/* =========================================================
   THEME / TOKENS
========================================================= */
:root {
    --bg: #F7F7F8; /* page background */
    --ink: #000000; /* headings / primary text */
    --charcoal: #2A2D34; /* brand dark / buttons / header */
    --line: rgba(0,0,0,.08);
    --line-strong: rgba(0,0,0,.10);
    --shadow: 0 12px 32px rgba(0,0,0,.08);
    --shadow-card: 0 12px 32px rgba(0,0,0,.06);
    --radius: 16px;
}

/* =========================================================
   BASE
========================================================= */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    background: radial-gradient(1200px 600px at 80% -10%, rgba(42,45,52,.04), transparent 60%), radial-gradient(1000px 500px at -10% 100%, rgba(0,0,0,.04), transparent 55%), var(--bg);
    color: var(--charcoal);
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
    margin: 0;
}

/* Utility */
.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
    white-space: nowrap;
}

:root {
    --kendo-color-primary-subtle: #d7e9e7 !important;
    --kendo-color-primary-subtle-hover: #c3deda !important;
    --kendo-color-primary-subtle-active: #aed1cc !important;
    --kendo-color-primary: #245f5b !important;
    --kendo-color-primary-hover: #1d4f4b !important;
    --kendo-color-primary-active: #163f3c !important;
    --kendo-color-primary-emphasis: rgba(36, 95, 91, 0.35) !important;
    --kendo-color-primary-on-subtle: #173836 !important;
    --kendo-color-on-primary: #ffffff !important;
    --kendo-color-primary-on-surface: #245f5b !important;
    --kendo-color-surface: #245f5b!important;
}

/* =========================================================
   LOCATOR BASICS
========================================================= */
.locator-wrap {
    padding: 8px;
}

.searchbar {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.infowin h5 {
    margin: 0 0 6px 0;
}

/* =========================================================
   AUTH (LOGIN)
========================================================= */
.auth-theme {
    min-height: calc(100vh - 2rem);
    display: grid;
    place-items: center;
    padding: clamp(16px,3vw,32px);
}

.auth-card {
    width: min(480px,92vw);
    background: #FFFFFF;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow);
}

.auth-brand {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
}

.brand-copy h1 {
    margin: 0;
    font-size: 1.35rem;
    color: var(--ink);
    letter-spacing: .2px;
}

.brand-copy p {
    margin: .25rem 0 0 0;
    font-size: .9rem;
    opacity: .75;
}

/* Auth fields */
.auth-field {
    margin: 16px 0;
}

    .auth-field label {
        display: block;
        font-size: .9rem;
        margin-bottom: 8px;
        color: var(--charcoal);
    }

.auth-input {
    width: 100%;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    padding: 0 14px;
    outline: none;
    transition: border-color .15s, box-shadow .15s, transform .05s;
}

    .auth-input:focus {
        border-color: var(--charcoal);
        box-shadow: 0 0 0 4px rgba(42,45,52,.12);
    }

    .auth-input.is-invalid {
        border-color: #B00020 !important;
        box-shadow: 0 0 0 4px rgba(176,0,32,.12) !important;
    }

.auth-hint {
    display: block;
    margin-top: 6px;
    color: #B00020;
    font-size: .85rem;
}

/* Password group */
.auth-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

    .auth-input-group .auth-input {
        padding-right: 44px;
    }

.auth-toggle {
    position: absolute;
    right: 6px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
}

    .auth-toggle:hover {
        background: rgba(0,0,0,.04);
    }

/* Auth actions */
.auth-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.auth-checkbox {
    width: 18px;
    height: 18px;
}

/* Auth button */
.auth-btn {
    appearance: none;
    border: none;
    height: 46px;
    padding: 0 20px;
    background: var(--charcoal);
    color: #fff;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer;
    transition: transform .05s, box-shadow .15s, filter .15s;
}

    .auth-btn:hover {
        box-shadow: 0 8px 24px rgba(42,45,52,.28);
    }

    .auth-btn:active {
        transform: translateY(1px);
    }

    .auth-btn[disabled] {
        opacity: .7;
        cursor: not-allowed;
        box-shadow: none;
    }

    .auth-btn.is-busy {
        position: relative;
    }

        .auth-btn.is-busy::after {
            content: "";
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid #fff;
            border-top-color: transparent;
            animation: spin .8s linear infinite;
        }

@keyframes spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* Auth alert / foot */
.auth-alert {
    display: none;
    margin: 8px 0 12px 0;
    padding: 12px 14px;
    border-radius: 12px;
    color: #000;
    background: linear-gradient(180deg,#00000010,#00000005);
    border: 1px solid #00000018;
    font-size: .92rem;
}

    .auth-alert:empty {
        display: none;
    }

    .auth-alert:not(:empty) {
        display: block;
    }

.auth-foot {
    margin-top: 18px;
    text-align: center;
    opacity: .7;
}

/* Centered logo stack (login) */
.auth-center {
    min-height: calc(100vh - 2rem);
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 32px);
}

.auth-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.auth-logo img {
    display: block;
    max-width: 180px;
    max-height: 64px;
    height: auto;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.08));
    margin: 0;
}

.auth-card {
    width: min(480px, 92vw);
}

/* =========================================================
   ADMIN SHELL (topbar / nav / main)
========================================================= */
:root {
    --admin-bg: #08161b;
    --admin-bg-2: #0b1d24;
    --admin-surface: #0f2a33;
    --admin-surface-soft: rgba(15,42,51,.74);
    --admin-border: rgba(20,224,210,.16);
    --admin-border-strong: rgba(20,224,210,.34);
    --admin-teal: #14e0d2;
    --admin-teal-strong: #0fb9ad;
    --admin-teal-glow: rgba(20,224,210,.22);
    --admin-ink: #e8fbfa;
    --admin-muted: #8cb8b5;
    --admin-muted-2: #6f9593;
    --admin-shadow: 0 22px 50px rgba(2,10,14,.30);
}

.admin-body {
    background: radial-gradient(700px 320px at 10% -8%, rgba(20,224,210,.08), transparent 60%), radial-gradient(900px 400px at 110% 0%, rgba(20,224,210,.10), transparent 56%), linear-gradient(180deg, #f6fbfb 0%, #edf5f5 100%);
    color: var(--charcoal);
    min-height: 100vh;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 74px;
    padding: 12px 20px;
    background: linear-gradient(180deg, var(--admin-bg) 0%, var(--admin-bg-2) 100%);
    color: var(--admin-ink);
    border-bottom: 1px solid rgba(255,255,255,.05);
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

.admin-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--admin-border);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    color: var(--admin-ink);
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

    .nav-toggle:hover {
        transform: translateY(-1px);
        border-color: var(--admin-border-strong);
        background: rgba(20,224,210,.10);
        box-shadow: 0 10px 24px rgba(0,0,0,.22);
    }

    .nav-toggle svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.25;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.admin-topbar .brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
    color: var(--admin-ink);
}

.brand-logo {
    display: block;
    height: 28px;
    width: auto;
    flex: 0 0 auto;
}

.brand-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
}

.topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
}

.topbar-user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
    padding-right: 14px;
    border-right: 1px solid rgba(255,255,255,.08);
}

.topbar-user-email {
    color: #f7ffff;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-user-role {
    color: var(--admin-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    margin-top: 3px;
    line-height: 1.1;
}

.admin-topbar .logout-form {
    margin: 0;
    flex: 0 0 auto;
}

.admin-topbar .logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid rgba(20,224,210,.35);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(20,224,210,.18), rgba(20,224,210,.10));
    color: #dffefd;
    font: inherit;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.20);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

    .admin-topbar .logout-btn:hover {
        transform: translateY(-1px);
        border-color: rgba(20,224,210,.55);
        background: linear-gradient(180deg, #22ebdd 0%, #11c7bb 100%);
        color: #05262b;
        box-shadow: 0 14px 28px rgba(0,0,0,.24), 0 0 0 4px rgba(20,224,210,.10);
    }

.logout-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 10px;
    background: rgba(4,34,38,.22);
}

.admin-topbar .logout-btn:hover .logout-btn__icon {
    background: rgba(5,38,43,.12);
}

.logout-btn__icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.logout-btn__text {
    line-height: 1;
}

.admin-nav {
    position: fixed;
    top: 74px;
    left: 0;
    bottom: 0;
    z-index: 40;
    width: 292px;
    transform: translateX(-100%);
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(20,224,210,.06), transparent 24%), linear-gradient(180deg, #08181d 0%, #0d252d 100%);
    border-right: 1px solid var(--admin-border);
    box-shadow: var(--admin-shadow);
    transition: transform .22s ease;
}

    .admin-nav.open {
        transform: translateX(0);
    }

    .admin-nav::-webkit-scrollbar {
        width: 10px;
    }

    .admin-nav::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.12);
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }

.admin-menu-shell {
    padding: 18px 14px 18px;
    color: var(--admin-ink);
}

.admin-menu-header {
    padding: 14px 14px 16px;
    margin-bottom: 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(20,224,210,.12), rgba(255,255,255,.03));
    border: 1px solid var(--admin-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.admin-menu-title {
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
}

.admin-menu-subtitle {
    margin-top: 4px;
    font-size: .82rem;
    color: var(--admin-muted);
}

.admin-menu-label {
    padding: 0 14px 8px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--admin-muted-2);
}

.admin-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-nav li {
    margin: 6px 0;
}

.admin-nav .menu-link {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    text-decoration: none;
    color: #dcf8f6;
    border: 1px solid transparent;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

    .admin-nav .menu-link:hover {
        transform: translateX(2px);
        border-color: rgba(255,255,255,.06);
        background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    }

.admin-nav li.active > .menu-link {
    border-color: var(--admin-border-strong);
    background: linear-gradient(90deg, rgba(20,224,210,.18), rgba(20,224,210,.04)), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

    .admin-nav li.active > .menu-link::before {
        content: "";
        position: absolute;
        left: -1px;
        top: 10px;
        bottom: 10px;
        width: 4px;
        border-radius: 999px;
        background: linear-gradient(180deg, #51fff3, var(--admin-teal-strong));
        box-shadow: 0 0 18px rgba(20,224,210,.45);
    }

.menu-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.06);
    color: #bffaf4;
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

    .menu-link__icon svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.admin-nav li.active .menu-link__icon,
.admin-nav .menu-link:hover .menu-link__icon {
    color: #ffffff;
    background: rgba(20,224,210,.14);
    border-color: rgba(20,224,210,.26);
    box-shadow: 0 8px 18px rgba(20,224,210,.12);
}

.menu-link__label {
    min-width: 0;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.2;
}

.menu-link__meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.menu-link__meta--external svg {
    width: 16px;
    height: 16px;
    stroke: var(--admin-muted);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(20,224,210,.14);
    border: 1px solid rgba(20,224,210,.22);
    color: #ccfffb;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
}

.admin-nav li.active .menu-badge {
    background: rgba(20,224,210,.20);
    border-color: rgba(20,224,210,.34);
    color: #ffffff;
}

.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2,10,14,.56);
    backdrop-filter: blur(4px);
    z-index: 35;
    display: none;
}

    .nav-backdrop.show {
        display: block;
    }

body.nav-open {
    overflow: hidden;
}

.admin-main {
    margin: 18px;
    position: relative;
    z-index: 1;
}

@media (min-width: 992px) {
    .nav-toggle {
        display: none;
    }

    .admin-nav {
        transform: none;
    }

    .nav-backdrop {
        display: none !important;
    }

    .admin-main {
        margin: 26px;
        margin-left: 318px;
    }
}

@media (max-width: 991.98px) {
    .admin-topbar {
        padding: 12px 14px;
    }

    .topbar-user {
        max-width: 210px;
    }

    .admin-topbar .logout-btn {
        padding: 0 14px;
    }

    .admin-nav {
        width: min(292px, calc(100vw - 24px));
    }
}

@media (max-width: 640px) {
    .brand-title,
    .logout-btn__text {
        display: none;
    }

    .topbar-user {
        max-width: 145px;
        padding-right: 10px;
    }

    .topbar-user-email {
        font-size: .82rem;
    }

    .topbar-user-role {
        font-size: .68rem;
    }

    .admin-main {
        margin: 14px;
    }
}

/* =========================================================
   CARDS / TABLES / BUTTONS (generic)
========================================================= */
.card {
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
}

.card-header {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card-title {
    margin: 0;
    font-size: 1.05rem;
    color: var(--ink);
}

.card-body {
    padding: 16px 18px;
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .table th, .table td {
        padding: 12px 10px;
        border-bottom: 1px solid rgba(0,0,0,.06);
        vertical-align: middle;
    }

    .table th {
        text-align: left;
        font-weight: 800;
        color: var(--charcoal);
    }

    .table tr:hover td {
        background: rgba(0,0,0,.02);
    }

/* Generic buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: .2px;
}

.btn-primary {
    background: var(--charcoal);
    color: #fff;
}

    .btn-primary:hover {
        box-shadow: 0 8px 24px rgba(42,45,52,.28);
    }

.btn-outline {
    background: #fff;
    color: var(--charcoal);
    border: 1px solid rgba(0,0,0,.12);
}

    .btn-outline:hover {
        background: rgba(0,0,0,.04);
    }

/* Small link-style button in tables */
.table .tcenter {
    text-align: center;
    width: 80px;
}

.table td a.btn {
    height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    font-weight: 700;
}

/* =========================================================
   HIGH-CONTRAST FORM SYSTEM (ADMIN FORMS)
========================================================= */
.form {
    display: block;
    max-width: 880px;
}

.section-title {
    margin: 18px 0 8px 0;
    font-weight: 800;
    color: var(--ink);
    font-size: 1rem;
    letter-spacing: .2px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

    .form-row:last-child {
        border-bottom: none;
    }

.form-label {
    color: var(--charcoal);
    font-size: .93rem;
    font-weight: 700;
}

.form-help {
    font-size: .85rem;
    color: rgba(0,0,0,.75);
}

.input, select.input, textarea.input {
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.14);
    background: rgba(0,0,0,.03);
    color: var(--ink);
    padding: 10px 12px;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

textarea.input {
    min-height: 90px;
    resize: vertical;
}

select.input {
    height: 44px;
}

    .input:focus, select.input:focus, textarea.input:focus {
        border-color: var(--charcoal);
        box-shadow: 0 0 0 4px rgba(42,45,52,.18);
        background: rgba(0,0,0,.02);
    }

.input.is-invalid {
    border-color: #B00020 !important;
    box-shadow: 0 0 0 4px rgba(176,0,32,.12) !important;
}

.chk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--charcoal);
}

.form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* Responsive helpers (legacy two-column areas if any) */
.grid {
    display: grid;
    gap: 18px;
}

.col {
    display: grid;
    gap: 14px;
}

.field {
    display: block;
}

    .field label {
        display: block;
        font-size: .9rem;
        margin-bottom: 6px;
        color: var(--charcoal);
    }

.field-row {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

.actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
}

@media (min-width:768px) {
    .card-body {
        padding: 22px;
    }

    .grid {
        grid-template-columns: 1fr 1fr;
    }

    .field-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================================================
   STATUS (used in locator + grids)
========================================================= */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.status--ok {
    color: #28a745;
}

    .status--ok .status-dot {
        background: #28a745;
    }

.status--busy {
    color: #fd7e14;
}

    .status--busy .status-dot {
        background: #fd7e14;
    }

.status--off {
    color: #dc3545;
}

    .status--off .status-dot {
        background: #dc3545;
    }

.status--unknown {
    color: #6c757d;
}

    .status--unknown .status-dot {
        background: #6c757d;
    }

/* Simple helpers for ticks/muted & dots (used in Stations list) */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    font-size: .8rem;
    font-weight: 800;
    color: #2A2D34;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

    .dot.ok {
        background: #28a745;
    }

    .dot.busy {
        background: #fd7e14;
    }

    .dot.off {
        background: #dc3545;
    }

    .dot.unknown {
        background: #6c757d;
    }

.tick {
    color: #28a745;
    font-weight: 800;
}

.muted {
    opacity: .6;
}

/* =========================================================
   ADMIN DATA GRIDS (pretty GridView styling)
   (uses .admin-grid / .admin-grid-card to avoid conflicts with .grid helper)
========================================================= */

/* Top toolbar for filters + add button */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 0 0 12px 0;
}

    .toolbar .spacer {
        flex: 1;
    }

.input-ghost {
    height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    color: #000;
    outline: none;
    transition: box-shadow .15s, border-color .15s;
}

    .input-ghost:focus {
        border-color: #2A2D34;
        box-shadow: 0 0 0 4px rgba(42,45,52,.12);
    }

.select-ghost {
    height: 40px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    color: #000;
}

/* Card container */
.admin-grid-card {
    background: #FFFFFF;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* Table */
.admin-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .admin-grid thead th {
        position: sticky;
        top: 0;
        background: linear-gradient(180deg,#fff,#fafafa);
        color: #000;
        font-weight: 800;
        text-align: left;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(0,0,0,.08);
        user-select: none;
    }

    .admin-grid .sortable {
        cursor: pointer;
    }

    .admin-grid .sort-glyph {
        opacity: .6;
        margin-left: 6px;
        font-size: .9em;
    }

    .admin-grid tbody td {
        padding: 12px 14px;
        border-bottom: 1px solid rgba(0,0,0,.06);
        vertical-align: middle;
    }

    .admin-grid tbody tr:hover td {
        background: rgba(0,0,0,.02);
    }

    .admin-grid tbody tr.alt td {
        background: rgba(0,0,0,.015);
    }

/* Pager */
.grid-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.08);
}

    .grid-pager .pager-buttons a,
    .grid-pager .pager-buttons span {
        margin: 0 4px;
        padding: 4px 10px;
        border-radius: 10px;
        text-decoration: none;
        color: #2A2D34;
        border: 1px solid rgba(0,0,0,.12);
        background: #fff;
    }

    .grid-pager .pager-buttons span {
        background: #2A2D34;
        color: #fff;
        border-color: #2A2D34;
    }

.page-size {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .page-size select {
        height: 34px;
        border-radius: 10px;
        border: 1px solid rgba(0,0,0,.12);
        padding: 0 8px;
    }
/* =========================
   BEAUTIFUL DATA GRID
========================= */
.data-card {
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* Toolbar above grid */
.dg-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

    .dg-toolbar .grow {
        flex: 1
    }

.dg-search {
    display: flex;
    gap: 8px;
    align-items: center;
    background: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 12px;
    padding: 6px 8px;
    width: 100%;
    max-width: 420px;
}

    .dg-search input {
        border: none;
        background: transparent;
        outline: none;
        width: 100%;
        height: 34px;
    }

.dg-toolbar .btn {
    height: 38px;
    border-radius: 10px;
    padding: 0 12px;
}

/* GridView table */
.data-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .data-grid th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #fafafa;
        color: var(--charcoal);
        font-weight: 800;
        text-align: left;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(0,0,0,.08);
    }

    .data-grid td {
        padding: 12px 14px;
        border-bottom: 1px solid rgba(0,0,0,.06);
        vertical-align: middle;
    }

.dg-row:hover td {
    background: rgba(0,0,0,.02);
}

.dg-alt td {
    background: rgba(0,0,0,.015);
}

/* Small helper cells */
.dg-compact {
    width: 60px;
    text-align: center
}

.dg-actions {
    white-space: nowrap;
    display: flex;
    gap: 8px;
}

/* Badges / pills */
.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .83rem;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    color: #2A2D34;
}

.badge-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .83rem;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    color: #2A2D34;
    text-decoration: none;
}

    .badge-link:hover {
        background: rgba(0,0,0,.04);
    }

/* Status coloring (reuse your status classes) */
.badge-soft.status--ok {
    color: #28a745;
    border-color: #28a74533;
}

.badge-soft.status--busy {
    color: #fd7e14;
    border-color: #fd7e1433;
}

.badge-soft.status--off {
    color: #dc3545;
    border-color: #dc354533;
}

.badge-soft.status--unknown {
    color: #6c757d;
    border-color: #6c757d33;
}

/* Pager */
.dg-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: #fafafa;
    border-top: 1px solid rgba(0,0,0,.06);
}

    .dg-pager .pages {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .dg-pager a, .dg-pager span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 34px;
        min-width: 34px;
        padding: 0 10px;
        border-radius: 10px;
        border: 1px solid rgba(0,0,0,.12);
        text-decoration: none;
        color: var(--charcoal);
        font-weight: 700;
    }

        .dg-pager a:hover {
            background: rgba(0,0,0,.05);
        }

    .dg-pager .current {
        background: var(--charcoal);
        color: #fff;
        border-color: var(--charcoal);
    }

.station-photo {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
}

.station-title {
    margin: 0 0 8px 0;
    font-size: 1.6rem;
}

.station-address {
    margin: 6px 0 14px 0;
    opacity: .8;
}

.station-particulars {
    display: block;
    margin-bottom: 12px;
    font-style: italic;
}

.inf-block {
    margin: 6px 0;
}

.station-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.admin-section {
    margin: 0 0 20px 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    background: #fff;
    border: 1px solid var(--line-strong);
}

.admin-section__header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--charcoal);
    color: #fff;
    padding: 14px 16px;
}

    .admin-section__header h2 {
        margin: 0;
        font-size: 1.05rem; /* matches your card-title scale */
        font-weight: 800;
        letter-spacing: .2px;
    }

    .admin-section__header .badge {
        font-size: 11px;
        line-height: 1;
        padding: 6px 8px;
        border-radius: 999px;
        background: rgba(255,255,255,.18);
        border: 1px solid rgba(255,255,255,.25);
    }

.admin-section__body {
    /* subtle grey → white vibe for the container area */
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, #F3F4F6, #fff) border-box;
    padding: 14px;
}

.content-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px;
}

/* Keep grids usable on mobile */
.grid-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* =========================================================
   TELERIK GRID POLISH (non-invasive)
========================================================= */
.RadGrid .rgHeader, .RadGrid th.rgHeader {
    background: #fafafa;
    border-bottom: 1px solid var(--line) !important;
    text-transform: none;
}

.RadGrid .rgCommandRow {
    background: #f7f7f8;
    border-bottom: 1px solid var(--line);
}

.RadGrid .rgRow:hover, .RadGrid .rgAltRow:hover {
    background: #f5f7fb;
}



/* Responsive tweaks */
@media (max-width: 768px) {
    .admin-section__header {
        padding: 12px 14px;
    }

        .admin-section__header h2 {
            font-size: 1rem;
        }

    .admin-section__body {
        padding: 10px;
    }

    .content-panel {
        padding: 6px;
    }

    .RadGrid .rgFilterBox {
        max-width: 110px;
    }
}

/* =========================================================
   DARK CARD HEADERS (inside Overview)
========================================================= */
.card.elevated {
    box-shadow: var(--shadow-card);
    border-radius: var(--radius);
    overflow: hidden; /* ensures header rounding is clean */
}

.card-header.dark {
    background: var(--charcoal);
    color: #fff;
    border-bottom: 1px solid rgba(0,0,0,.1);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

    .card-header.dark .card-title {
        color: #fff;
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: .2px;
    }

/* Keep body flush below the rounded header */
.card-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* KPI values */
.metric-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
}

    .metric-value.small {
        font-size: 1.6rem;
    }

.metric-sub {
    opacity: .7;
}

/* Map iframe wrapper */
.iframe-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

    .iframe-wrapper iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        background: #fff;
    }

.map-tip {
    margin-top: 8px;
    font-size: .9rem;
    opacity: .75;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr !important;
    }

    .metric-value {
        font-size: 1.6rem;
    }
}

/* Map host used on SitesEdit (Google Map container) */
.mapHost {
    height: 520px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

@media (max-width: 992px) {
    .mapHost {
        height: 520px;
    }
}

/* Two-column admin form grid: label left, input right */
.form-grid {
    display: grid;
    grid-template-columns: 220px 1fr; /* label | field */
    gap: 12px 16px; /* row | column */
    align-items: center;
}

    .form-grid .form-row {
        display: contents;
    }

    .form-grid .form-label {
        justify-self: end;
        font-weight: 700;
        color: var(--charcoal);
    }

    .form-grid .form-field {
        width: 100%;
    }

    .form-grid .form-spacer {
        grid-column: 1 / 2;
    }
    /* empty label cell */
    .form-grid .form-actions {
        grid-column: 2 / 3;
    }
/* button-only rows */

/* Stack on mobile */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

        .form-grid .form-label {
            justify-self: start;
        }

        .form-grid .form-spacer {
            display: none;
        }

        .form-grid .form-actions {
            grid-column: 1 / -1;
        }
}

.form-grid #pwdWrap {
    display: contents;
}

.logout-form {
    margin: 0;
}

.logout-btn {
    background: none;
    border: none;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font: inherit;
    opacity: .9;
}

    .logout-btn:hover {
        opacity: 1;
    }

.site-thumb {
    max-width: 80px;
    max-height: 60px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    object-fit: cover;
}

.site-toggle-btn {
    border: none;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 600;
    min-width: 80px;
}

    .site-toggle-btn.active {
        background: #dcfce7;
        color: #166534;
    }

    .site-toggle-btn.inactive {
        background: #f1f5f9;
        color: #64748b;
    }

.row-inactive {
    opacity: 0.6;
}

    .row-inactive td {
        background-color: #f8fafc !important;
    }

.rad-btn {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #111827;
}

    .rad-btn:hover {
        background: #e5e7eb;
    }

.btn-icon {
    font-weight: 700;
}

.rad-icon {
    width: 16px;
    height: 16px;
}

.k-grid table {
    font-weight: normal;
}

.k-grid th {
    font-weight: 600;
}

.k-grid {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.k-grid-header {
    background: #f9fafb;
}

.k-grid tbody tr:hover {
    background: #f3f4f6;
}

.k-grid td[data-type='number'],
.k-grid th[data-type='number'] {
    text-align: center !important;
}

.inactive-row {
    background-color: #f9fafb !important;
    opacity: 0.65;
}

.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #d1d5db;
    transition: .2s;
    border-radius: 24px;
}

    .slider:before {
        content: "";
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        top: 3px;
        background-color: white;
        transition: .2s;
        border-radius: 50%;
    }

.switch input:checked + .slider {
    background-color: #2A2D34;
}

    .switch input:checked + .slider:before {
        transform: translateX(22px);
    }

.grid-search {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    width: 220px;
}

/* Center aligned header */
.k-grid th.center-header .k-link {
    justify-content: center !important;
    text-align: center !important;
}

/* Right aligned header */
.k-grid th.right-header .k-link {
    justify-content: flex-end !important;
    text-align: right !important;
}

/* Left aligned header */
.k-grid th.left-header .k-link {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Remove funnel icon */
.k-grid .k-grid-header .k-grid-filter {
    display: none !important;
}

.k-dropdown-operator {
    display: none !important;
}

.grid-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    gap: 20px;
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* =========================================================
   PREMIUM TOOLBAR SYSTEM (CLEAN + UNIFIED)
========================================================= */

.fade-in-toolbar {
    opacity: 0;
    transform: translateY(-8px);
    animation: fadeToolbar .4s ease forwards;
}

@keyframes fadeToolbar {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.grid-toolbar-premium {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    padding: 20px 28px;
    border: 1px solid rgba(229, 231, 235, 0.9);
    box-shadow: 0 12px 40px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    width: 100%;
}

/* LEFT + RIGHT ZONES */

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.toolbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* TITLE + COUNT */

.page-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 6px;
}

.page-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.3px;
}

.count-badge {
    background: #111827;
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
}

/* =========================================================
   PREMIUM BUTTON SYSTEM
========================================================= */

.btn-premium {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    transition: all .18s ease;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn-svg {
    width: 16px;
    height: 16px;
}

/* PRIMARY BUTTON */

.btn-primary-premium {
    background: linear-gradient(135deg, #111827, #1f2937);
    color: white !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

    .btn-primary-premium:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(0,0,0,0.28);
    }

/* GHOST BUTTON */

.btn-ghost-premium {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #374151;
}

    .btn-ghost-premium:hover {
        background: #f9fafb;
        border-color: #d1d5db;
        transform: translateY(-1px);
    }

/* Ripple */

.ripple::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.35);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ripple:active::after {
    width: 220px;
    height: 220px;
    transition: width .4s ease, height .4s ease;
}

/* =========================================================
   PREMIUM SEARCH (WIDER + CLEANER)
========================================================= */

.search-premium {
    position: relative;
    width: 360px; /* widened */
}

    .search-premium input {
        width: 100%;
        padding: 10px 16px 10px 42px;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        font-size: 14px;
        background: #f9fafb;
        transition: all .2s ease;
    }

        .search-premium input:focus {
            outline: none;
            background: #fff;
            border-color: #111827;
            box-shadow: 0 0 0 3px rgba(17,24,39,0.08);
        }

.search-svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #9ca3af;
}

/* =========================================================
   KENDO GRID PREMIUM POLISH
========================================================= */

.k-grid {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.k-grid-header {
    background: #f9fafb;
}

.k-grid th {
    font-weight: 600;
    font-size: 13px;
}

.k-grid tbody tr:hover {
    background: #f3f4f6;
}

.inactive-row {
    background-color: #f9fafb !important;
    opacity: 0.65;
}

/* =========================================================
   HEADER ALIGNMENT HELPERS (FIXED)
========================================================= */

.k-grid th.center-header .k-link {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
}

.k-grid th.right-header .k-link {
    display: flex !important;
    justify-content: flex-end !important;
    text-align: right !important;
}

.k-grid th.left-header .k-link {
    display: flex !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Remove filter icons (row filter only) */
.k-grid .k-grid-header .k-grid-filter {
    display: none !important;
}

.k-dropdown-operator {
    display: none !important;
}

/* =========================================================
   SITE IMAGE
========================================================= */

.site-thumb {
    max-width: 80px;
    max-height: 60px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    object-fit: cover;
}



.conn-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

    .conn-pills .pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 24px;
        padding: 0 8px;
        border-radius: 999px;
        font-weight: 800;
        font-size: 12px;
        border: 1px solid rgba(0,0,0,.10);
        background: #fff;
        color: #111827;
    }

        .conn-pills .pill.ok {
            border-color: rgba(16,185,129,.35);
            color: #065f46;
            background: rgba(16,185,129,.10);
        }

        .conn-pills .pill.busy {
            border-color: rgba(245,158,11,.35);
            color: #92400e;
            background: rgba(245,158,11,.12);
        }

        .conn-pills .pill.off {
            border-color: rgba(239,68,68,.35);
            color: #7f1d1d;
            background: rgba(239,68,68,.10);
        }

        .conn-pills .pill.unk {
            border-color: rgba(107,114,128,.35);
            color: #374151;
            background: rgba(107,114,128,.12);
        }

        .conn-pills .pill.total {
            border-color: rgba(17,24,39,.18);
            background: rgba(17,24,39,.06);
        }

    .conn-pills .pill-link {
        margin-left: 6px;
        font-weight: 800;
        font-size: 12px;
        color: #111827;
        text-decoration: none;
        padding: 0 8px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        border: 1px solid rgba(0,0,0,.10);
        background: #fff;
    }

        .conn-pills .pill-link:hover {
            background: rgba(0,0,0,.04);
        }

/* Tooltip popover */
.k-tooltip {
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.18) !important;
}

.conn-pop {
    min-width: 260px;
    padding: 6px 2px;
}

    .conn-pop .conn-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        border-radius: 10px;
    }

        .conn-pop .conn-row:hover {
            background: rgba(0,0,0,.04);
        }

    .conn-pop .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        background: #9ca3af;
    }

        .conn-pop .dot.ok {
            background: #10b981;
        }

        .conn-pop .dot.busy {
            background: #f59e0b;
        }

        .conn-pop .dot.off {
            background: #ef4444;
        }

        .conn-pop .dot.unk {
            background: #6b7280;
        }

    .conn-pop .cid {
        font-weight: 800;
        color: #111827;
        min-width: 56px;
    }

    .conn-pop .st {
        font-weight: 700;
        opacity: .9;
    }

        .conn-pop .st.ok {
            color: #065f46;
        }

        .conn-pop .st.busy {
            color: #92400e;
        }

        .conn-pop .st.off {
            color: #7f1d1d;
        }

        .conn-pop .st.unk {
            color: #374151;
        }

/* Modal content */
.conn-modal-loading,
.conn-modal-empty {
    padding: 16px;
}

.conn-modal {
    padding: 14px;
}

.conn-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.conn-table {
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    overflow: hidden;
}

.conn-th, .conn-tr {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1.4fr .8fr 1.6fr;
    gap: 10px;
    padding: 10px 12px;
}

.conn-th {
    background: #f9fafb;
    font-weight: 900;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.conn-tr {
    border-bottom: 1px solid rgba(0,0,0,.06);
}

    .conn-tr:last-child {
        border-bottom: none;
    }

    .conn-tr:hover {
        background: rgba(0,0,0,.03);
    }

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
}

    .badge.ok {
        border-color: rgba(16,185,129,.35);
        color: #065f46;
        background: rgba(16,185,129,.10);
    }

    .badge.busy {
        border-color: rgba(245,158,11,.35);
        color: #92400e;
        background: rgba(245,158,11,.12);
    }

    .badge.off {
        border-color: rgba(239,68,68,.35);
        color: #7f1d1d;
        background: rgba(239,68,68,.10);
    }

    .badge.unk {
        border-color: rgba(107,114,128,.35);
        color: #374151;
        background: rgba(107,114,128,.12);
    }

.grid-link {
    color: var(--accent, #3b82f6) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: 0.2s ease !important;
}

    .grid-link:hover {
        text-decoration: underline !important;
        opacity: 0.85 !important;
    }

.grid-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #94a3b8; /* muted */
    transition: all .15s ease;
    text-decoration: none;
}

    .grid-icon-link svg {
        width: 18px;
        height: 18px;
    }

.delete-icon:hover {
    background: rgba(239,68,68,.1);
    color: #ef4444; /* red */
    transform: scale(1.05);
}

.conn-pills-list {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 140px;
}

.conn-line {
    line-height: 1.15;
}

.conn-line-status {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
}

    .conn-line-status.ok {
        color: #16a34a;
    }

    .conn-line-status.busy {
        color: #d97706;
    }

    .conn-line-status.off {
        color: #dc2626;
    }

    .conn-line-status.unk {
        color: #6b7280;
    }

.conn-line-actions {
    margin-top: 4px;
}

.conn-lines-empty {
    font-size: 12px;
}

.site-thumb-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
}

.site-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================
   DASHBOARD PAGE POLISH (Admin > Overview)
========================================================= */
.dashboard-section {
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
}

.dashboard-page-header {
    margin-bottom: 16px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(20,224,210,.18);
    background: linear-gradient(135deg, rgba(20,224,210,.12), rgba(20,224,210,.04) 28%, rgba(8,22,27,.96) 28%, rgba(11,29,36,.98) 100%);
    box-shadow: 0 16px 34px rgba(2,10,14,.22);
}

.dashboard-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dashboard-header-subtext {
    margin-top: 4px;
    color: rgba(232,251,250,.72);
    font-size: .88rem;
}

.header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(20,224,210,.22), rgba(20,224,210,.12));
    border: 1px solid rgba(20,224,210,.26);
    color: #dffefd;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

    .header-icon svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.header-icon--sm {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 12px;
}

    .header-icon--sm svg {
        width: 18px;
        height: 18px;
    }

.header-icon--xs {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 10px;
}

    .header-icon--xs svg,
    .header-icon--btn svg {
        width: 16px;
        height: 16px;
    }

.header-icon--btn {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 10px;
    background: rgba(20,224,210,.14);
    border-color: rgba(20,224,210,.18);
    box-shadow: none;
}

.dashboard-body {
    padding: 0;
    background: transparent;
}

.dashboard-panel {
    padding: 0;
    background: transparent;
    border: none;
}

.dashboard-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-stack-grid {
    grid-template-columns: 1fr;
    margin-top: 18px;
}

.dashboard-card,
.dashboard-metric-card {
    border: 1px solid rgba(20,224,210,.10);
    box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

.dashboard-card-header {
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(20,224,210,.18), rgba(20,224,210,.05) 22%, #101e25 22%, #16262d 100%) !important;
    border-bottom: 1px solid rgba(20,224,210,.14);
}

.dashboard-card-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .dashboard-card-title-wrap .card-title {
        display: flex;
        align-items: center;
        min-height: 36px;
    }

.dashboard-card-body {
    padding: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), #f7fbfb 100%);
}

.dashboard-card-body--spacious {
    padding: 18px;
}

.dashboard-metric-card .metric-value {
    font-size: clamp(2rem, 2.4vw, 2.5rem);
    line-height: 1;
    letter-spacing: -.03em;
    color: #08161b;
}

.dashboard-metric-card .metric-sub {
    margin-top: 8px;
    color: #5a7170;
    font-weight: 600;
}

.dashboard-metric-card .dashboard-card-body {
    position: relative;
    overflow: hidden;
}

    .dashboard-metric-card .dashboard-card-body::after {
        content: "";
        position: absolute;
        right: -18px;
        top: -18px;
        width: 88px;
        height: 88px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(20,224,210,.14) 0%, rgba(20,224,210,0) 70%);
    }

.dashboard-metric-card--warning .header-icon,
.dashboard-metric-card--warning .dashboard-card-header {
    border-color: rgba(255,176,32,.26);
}

.dashboard-metric-card--warning .header-icon {
    background: linear-gradient(180deg, rgba(255,176,32,.26), rgba(255,176,32,.12));
    color: #fff2d4;
}

.dashboard-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.dashboard-subpanel {
    border: 1px solid rgba(20,224,210,.12);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
    overflow: hidden;
}

.dashboard-subpanel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(20,224,210,.10);
    background: linear-gradient(180deg, rgba(20,224,210,.09), rgba(20,224,210,.03));
}

    .dashboard-subpanel-header h4 {
        margin: 0;
        font-size: .98rem;
        color: #0d2127;
    }

.dashboard-table {
    margin: 0;
}

    .dashboard-table thead th {
        background: rgba(8,22,27,.03);
        color: #334746;
        font-size: .8rem;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .dashboard-table tbody tr:last-child td {
        border-bottom: none;
    }

.dashboard-number-col {
    width: 140px;
    text-align: right !important;
    font-weight: 800;
    color: #0d2127;
}

.dashboard-total-row td {
    background: rgba(20,224,210,.06);
    font-weight: 800;
}

.dashboard-map-card {
    margin-top: 18px;
}

.dashboard-map-btn {
    border-color: rgba(20,224,210,.24);
    color: #dffefd;
    background: rgba(20,224,210,.08);
}

    .dashboard-map-btn:hover {
        background: rgba(20,224,210,.16);
        border-color: rgba(20,224,210,.34);
    }

.dashboard-iframe-wrapper {
    border-color: rgba(20,224,210,.14);
    box-shadow: 0 14px 28px rgba(0,0,0,.08);
}

.dashboard-map-tip {
    margin-top: 10px;
    color: #5d7170;
    font-weight: 600;
}

@media (max-width: 1199px) {
    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .dashboard-page-header {
        padding: 16px;
        border-radius: 16px;
    }

    .dashboard-title-wrap {
        align-items: flex-start;
    }

    .dashboard-status-grid,
    .dashboard-kpi-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-map-btn {
        width: 100%;
        justify-content: center;
    }

    .dashboard-number-col {
        width: 92px;
    }
}

/* =========================================================
   DASHBOARD HEADER BAR OVERRIDES
   Dark grey bars + subtle border + teal icons
========================================================= */

.dashboard-page-header,
.dashboard-card-header,
.dashboard-subpanel-header {
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.dashboard-page-header {
    padding: 16px 18px;
    border-radius: 18px;
    margin-bottom: 16px;
}

.dashboard-card-header {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

.dashboard-subpanel-header {
    padding: 13px 15px;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 0;
}

.dashboard-title-wrap,
.dashboard-card-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .dashboard-title-wrap h2,
    .dashboard-card-title-wrap .card-title,
    .dashboard-subpanel-header h4 {
        margin: 0;
        color: #f4fbfb;
        font-weight: 800;
        letter-spacing: .01em;
    }

.dashboard-header-subtext {
    margin-top: 4px;
    color: #8ea7a5;
    font-size: .88rem;
}

.header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    background: rgba(20,224,210,.08);
    border: 1px solid rgba(20,224,210,.22);
    color: #14e0d2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

    .header-icon svg {
        width: 19px;
        height: 19px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.header-icon--sm {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 10px;
}

    .header-icon--sm svg {
        width: 17px;
        height: 17px;
    }

.header-icon--xs {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 9px;
}

    .header-icon--xs svg,
    .header-icon--btn svg {
        width: 15px;
        height: 15px;
    }

.header-icon--btn {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 9px;
    background: rgba(20,224,210,.08);
    border: 1px solid rgba(20,224,210,.18);
    color: #14e0d2;
    box-shadow: none;
}

/* kill the yellow warning special treatment */
.dashboard-metric-card--warning .dashboard-card-header {
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%) !important;
    border-color: rgba(255,255,255,.07) !important;
}

.dashboard-metric-card--warning .header-icon {
    background: rgba(20,224,210,.08) !important;
    border-color: rgba(20,224,210,.22) !important;
    color: #14e0d2 !important;
}

/* map button to match the same language instead of doing its own nonsense */
.dashboard-map-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(20,224,210,.24);
    border-radius: 12px;
    background: rgba(20,224,210,.08);
    color: #dffefd;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

    .dashboard-map-btn:hover {
        background: rgba(20,224,210,.14);
        border-color: rgba(20,224,210,.34);
        color: #ffffff;
    }

/* make sure card headers keep their shape nicely */
.dashboard-card,
.dashboard-metric-card,
.dashboard-subpanel {
    overflow: hidden;
}

@media (max-width: 767px) {
    .dashboard-page-header {
        padding: 14px 15px;
        border-radius: 16px;
    }

    .dashboard-card-header,
    .dashboard-subpanel-header {
        padding: 12px 14px;
    }
}

/* =========================================================
   DASHBOARD SMALL FIXES
========================================================= */

/* 1. Kill underline on the map button */
.dashboard-map-btn,
.dashboard-map-btn:hover,
.dashboard-map-btn:focus,
.dashboard-map-btn:active {
    text-decoration: none !important;
}

/* 2. Make dashboard header text match the menu item text colour */
.dashboard-title-wrap h2,
.dashboard-card-title-wrap .card-title,
.dashboard-subpanel-header h4 {
    color: #dcf8f6 !important;
}

/* 3. Add space under the map tip / bottom of map card */
.dashboard-map-card {
    margin-bottom: 22px;
}

/* =========================================================
   SITES INDEX REVAMP
========================================================= */
.sites-index-page {
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
}

.sites-page-header {
    margin-bottom: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.sites-page-header-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sites-page-header-copy h2 {
    margin: 0;
    color: #dcf8f6;
    font-weight: 800;
    letter-spacing: .01em;
}

.sites-page-header-subtitle {
    margin-top: 4px;
    color: #8ea7a5;
    font-size: .88rem;
}

.sites-grid-panel {
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(20,224,210,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,251,251,.98));
    box-shadow: 0 14px 28px rgba(5,22,28,.07);
}

/* toolbar */
.sites-index-page #gridSites .k-grid-toolbar {
    padding: 0;
    border: none;
    background: transparent;
}

.sites-grid-toolbar {
    margin-bottom: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.sites-toolbar-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sites-toolbar-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(20,224,210,.08);
    border: 1px solid rgba(20,224,210,.22);
    color: #14e0d2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

    .sites-toolbar-title-icon svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.sites-grid-toolbar .page-title {
    color: #dcf8f6;
}

.sites-grid-toolbar .count-badge {
    background: rgba(20,224,210,.12);
    border: 1px solid rgba(20,224,210,.24);
    color: #dcfffc;
}

.sites-btn-primary {
    background: linear-gradient(180deg, rgba(20,224,210,.18), rgba(20,224,210,.12));
    border: 1px solid rgba(20,224,210,.34);
    color: #dffefd !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 20px rgba(0,0,0,.18);
}

    .sites-btn-primary:hover {
        background: linear-gradient(180deg, #22ebdd 0%, #11c7bb 100%);
        color: #05262b !important;
        border-color: rgba(20,224,210,.55);
    }

.sites-btn-ghost {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: #dcf8f6;
}

    .sites-btn-ghost:hover {
        background: rgba(20,224,210,.10);
        border-color: rgba(20,224,210,.24);
        color: #ffffff;
    }

.sites-search-box input {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: #ecfffd;
}

    .sites-search-box input::placeholder {
        color: #8ea7a5;
    }

    .sites-search-box input:focus {
        background: rgba(255,255,255,.09);
        border-color: rgba(20,224,210,.34);
        box-shadow: 0 0 0 3px rgba(20,224,210,.10);
    }

.sites-grid-toolbar .search-svg {
    color: #8ea7a5;
}

/* main grid shell */
.sites-index-page #gridSites.k-grid {
    border: 1px solid rgba(12,28,34,.10);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 24px rgba(5,22,28,.06);
}

.sites-index-page #gridSites .k-grid-header {
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%);
    border-bottom: 1px solid rgba(20,224,210,.14);
}

    .sites-index-page #gridSites .k-grid-header table,
    .sites-index-page #gridSites .k-grid-header-wrap table {
        background: transparent;
    }

    .sites-index-page #gridSites .k-grid-header th,
    .sites-index-page #gridSites .k-grid-header .k-header {
        background: transparent !important;
        color: #dcf8f6 !important;
        border-color: rgba(255,255,255,.06) !important;
        font-size: .82rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

        .sites-index-page #gridSites .k-grid-header th .k-link,
        .sites-index-page #gridSites .k-grid-header .k-header .k-link {
            color: #dcf8f6 !important;
        }

.sites-index-page #gridSites .k-filter-row th {
    background: #f7fbfb !important;
    border-bottom: 1px solid #e7f1f1 !important;
    border-color: #edf4f4 !important;
    padding-top: 8px;
    padding-bottom: 8px;
}

.sites-index-page #gridSites .k-filter-row .k-textbox,
.sites-index-page #gridSites .k-filter-row input,
.sites-index-page #gridSites .k-filter-row .k-input-inner {
    border-color: #d9e7e6 !important;
    background: #ffffff !important;
}

.sites-index-page #gridSites .k-grid-content {
    background: #ffffff;
}

.sites-index-page #gridSites tbody tr {
    transition: background-color .18s ease, box-shadow .18s ease;
    cursor: pointer;
}

.sites-index-page #gridSites tbody td {
    border-color: #edf4f4;
    padding-top: 14px;
    padding-bottom: 14px;
    vertical-align: middle;
}

.sites-index-page #gridSites tbody tr:hover td {
    background: rgba(20,224,210,.05) !important;
}

.sites-index-page #gridSites tbody tr:nth-child(even) td {
    background: rgba(248,251,251,.72);
}

.sites-index-page #gridSites tbody tr.inactive-row td {
    background: linear-gradient(90deg, rgba(148,163,184,.08), rgba(255,255,255,0)) !important;
    color: #728786;
}

    .sites-index-page #gridSites tbody tr.inactive-row td:first-child {
        box-shadow: inset 4px 0 0 rgba(148,163,184,.32);
    }

.sites-index-page #gridSites tbody tr.inactive-row .sites-name-text,
.sites-index-page #gridSites tbody tr.inactive-row .sites-address-text {
    color: #748785;
}

.sites-index-page #gridSites .k-pager-wrap {
    border-top: 1px solid #edf4f4;
    background: linear-gradient(180deg, #fbfefe 0%, #f4fbfb 100%);
}

/* custom cell building blocks */
.sites-id-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(20,224,210,.18);
    background: rgba(20,224,210,.08);
    color: #0d4f57;
    font-size: .78rem;
    font-weight: 800;
}

.sites-name-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.sites-name-line,
.sites-address-cell,
.sites-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sites-name-text,
.sites-address-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sites-name-text {
    color: #10232a;
    font-weight: 800;
    font-size: .95rem;
}

.sites-address-text {
    color: #556f6d;
    font-weight: 600;
    line-height: 1.35;
}

.sites-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 32px;
}

.sites-inline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

    .sites-inline-badge.is-active {
        background: rgba(20,224,210,.10);
        border-color: rgba(20,224,210,.20);
        color: #0c7b73;
    }

    .sites-inline-badge.is-inactive {
        background: rgba(148,163,184,.12);
        border-color: rgba(148,163,184,.20);
        color: #5f7281;
    }

.sites-cell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 7px;
    background: rgba(20,224,210,.09);
    color: #13b9ae;
}

.sites-cell-icon--muted {
    background: rgba(140,184,181,.10);
    color: #6d8b89;
}

.sites-cell-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sites-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 72px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(20,224,210,.10);
    border: 1px solid rgba(20,224,210,.20);
    color: #0f5d65;
    font-size: .88rem;
    font-weight: 800;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

    .sites-count-pill svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.sites-stations-link {
    text-decoration: none !important;
}

    .sites-stations-link:hover .sites-count-pill {
        transform: translateY(-1px);
        background: rgba(20,224,210,.16);
        border-color: rgba(20,224,210,.30);
    }

.sites-date-chip {
    justify-content: center;
    padding: 0 10px;
    height: 34px;
    border-radius: 999px;
    background: rgba(140,184,181,.10);
    border: 1px solid rgba(140,184,181,.18);
    color: #4f6766;
    font-size: .82rem;
    font-weight: 700;
}

.sites-index-page .grid-link {
    color: #0f8380 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}

    .sites-index-page .grid-link:hover {
        color: #0ca79c !important;
        text-decoration: none !important;
        opacity: 1 !important;
    }

/* make Kendo switch feel less random in this grid */
.sites-index-page #gridSites .k-switch {
    box-shadow: none;
}

.sites-index-page #gridSites .k-switch-on .k-switch-track {
    background: rgba(20,224,210,.16);
    border-color: rgba(20,224,210,.35);
}

.sites-index-page #gridSites .k-switch-on .k-switch-thumb {
    background: #14e0d2;
}

/* responsive */
@media (max-width: 991.98px) {
    .sites-grid-toolbar {
        gap: 12px;
    }

        .sites-grid-toolbar .toolbar-left,
        .sites-grid-toolbar .toolbar-right {
            width: 100%;
        }

    .sites-search-box {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .sites-page-header {
        padding: 14px 15px;
        border-radius: 16px;
    }

    .sites-page-header-subtitle {
        font-size: .82rem;
    }

    .sites-grid-panel {
        padding: 8px;
        border-radius: 16px;
    }

    .sites-grid-toolbar {
        padding: 12px;
        border-radius: 14px;
    }

    .sites-toolbar-title-wrap {
        width: 100%;
    }

    .sites-index-page #gridSites .k-grid-content {
        overflow-x: auto;
    }
}

/* =========================================================
   SITES INDEX PAGE
========================================================= */
.sites-index-page {
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
}

.sites-page-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.sites-page-actions__left {
    display: flex;
    align-items: center;
    min-width: 0;
}

.sites-page-actions__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.sites-page-actions__buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.sites-toolbar-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sites-toolbar-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(20,224,210,.08);
    border: 1px solid rgba(20,224,210,.22);
    color: #14e0d2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    flex: 0 0 34px;
}

    .sites-toolbar-title-icon svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.sites-page-title-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sites-page-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sites-page-title {
    color: #dcf8f6;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .01em;
}

.sites-page-subtitle {
    margin-top: 4px;
    color: #8ea7a5;
    font-size: .86rem;
    line-height: 1.2;
}

.sites-page-actions .count-badge {
    background: rgba(20,224,210,.12);
    border: 1px solid rgba(20,224,210,.24);
    color: #dcfffc;
}

.sites-btn-primary {
    background: linear-gradient(180deg, rgba(20,224,210,.18), rgba(20,224,210,.12));
    border: 1px solid rgba(20,224,210,.34);
    color: #dffefd !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 20px rgba(0,0,0,.18);
}

    .sites-btn-primary:hover {
        background: linear-gradient(180deg, #22ebdd 0%, #11c7bb 100%);
        color: #05262b !important;
        border-color: rgba(20,224,210,.55);
    }

.sites-btn-ghost {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: #dcf8f6;
}

    .sites-btn-ghost:hover {
        background: rgba(20,224,210,.10);
        border-color: rgba(20,224,210,.24);
        color: #ffffff;
    }

.sites-page-actions .sites-search-box {
    width: 320px;
    max-width: 100%;
}

    .sites-page-actions .sites-search-box input {
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.08);
        color: #ecfffd;
    }

        .sites-page-actions .sites-search-box input::placeholder {
            color: #8ea7a5;
        }

        .sites-page-actions .sites-search-box input:focus {
            background: rgba(255,255,255,.09);
            border-color: rgba(20,224,210,.34);
            box-shadow: 0 0 0 3px rgba(20,224,210,.10);
        }

.sites-page-actions .search-svg {
    color: #8ea7a5;
}

.sites-grid-body {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.sites-index-page #gridSites.k-grid {
    border: 1px solid rgba(12,28,34,.10);
    border-radius: 0 !important;
    overflow: hidden;
    background: #fff;
    box-shadow: none;
}

.sites-index-page #gridSites .k-grid-header,
.sites-index-page #gridSites .k-grid-content,
.sites-index-page #gridSites .k-pager-wrap,
.sites-index-page #gridSites .k-grid-header-wrap {
    border-radius: 0 !important;
}

.sites-index-page #gridSites .k-grid-header {
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%);
    border-bottom: 1px solid rgba(20,224,210,.14);
}

    .sites-index-page #gridSites .k-grid-header table,
    .sites-index-page #gridSites .k-grid-header-wrap table {
        background: transparent;
    }

    .sites-index-page #gridSites .k-grid-header th,
    .sites-index-page #gridSites .k-grid-header .k-header {
        background: transparent !important;
        color: #dcf8f6 !important;
        border-color: rgba(255,255,255,.06) !important;
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
        padding: 20px !important;
        line-height: 1.1;
    }

        .sites-index-page #gridSites .k-grid-header th .k-link,
        .sites-index-page #gridSites .k-grid-header .k-header .k-link {
            color: #dcf8f6 !important;
            text-decoration: none !important;
            padding: 0 !important;
            min-height: 0 !important;
            line-height: 1.1;
        }

.sites-index-page #gridSites .k-grid-content {
    background: #ffffff;
}

.sites-index-page #gridSites tbody tr {
    transition: background-color .18s ease, box-shadow .18s ease;
    cursor: pointer;
}

.sites-index-page #gridSites tbody td {
    border-color: #edf4f4;
    padding-top: 14px;
    padding-bottom: 14px;
    vertical-align: middle;
}

.sites-index-page #gridSites tbody tr:hover td {
    background: rgba(20,224,210,.05) !important;
}

.sites-index-page #gridSites tbody tr:nth-child(even) td {
    background: rgba(248,251,251,.72);
}

.sites-index-page #gridSites tbody tr.inactive-row td {
    background: linear-gradient(90deg, rgba(148,163,184,.08), rgba(255,255,255,0)) !important;
    color: #728786;
}

    .sites-index-page #gridSites tbody tr.inactive-row td:first-child {
        box-shadow: inset 4px 0 0 rgba(148,163,184,.32);
    }

.sites-index-page #gridSites tbody tr.inactive-row .sites-name-text,
.sites-index-page #gridSites tbody tr.inactive-row .sites-address-text {
    color: #748785;
}

.sites-index-page #gridSites .k-pager-wrap {
    border-top: 1px solid #edf4f4;
    background: linear-gradient(180deg, #fbfefe 0%, #f4fbfb 100%);
}

.sites-id-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(20,224,210,.18);
    background: rgba(20,224,210,.08);
    color: #0d4f57;
    font-size: .78rem;
    font-weight: 800;
}

.site-thumb-wrap {
    width: 78px;
    height: 58px;
    border-radius: 14px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #f8fbfb 0%, #eef6f6 100%);
    border: 1px solid rgba(20,224,210,.14);
    box-shadow: 0 6px 16px rgba(5,22,28,.08);
    vertical-align: middle;
}

.site-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.site-image-link {
    display: inline-block;
    line-height: 0;
}

.sites-empty-thumb {
    width: 78px;
    height: 58px;
    border-radius: 14px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: linear-gradient(180deg, #f8fbfb 0%, #eef6f6 100%);
    border: 1px dashed rgba(140,184,181,.45);
    color: #7f9694;
    font-size: 10px;
    font-weight: 700;
}

    .sites-empty-thumb svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.sites-name-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.sites-name-line,
.sites-address-cell,
.sites-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sites-name-text,
.sites-address-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sites-name-text {
    color: #10232a;
    font-weight: 800;
    font-size: .95rem;
}

.sites-address-text {
    color: #556f6d;
    font-weight: 600;
    line-height: 1.35;
}

.sites-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 32px;
}

.sites-inline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

    .sites-inline-badge.is-active {
        background: rgba(20,224,210,.10);
        border-color: rgba(20,224,210,.20);
        color: #0c7b73;
    }

    .sites-inline-badge.is-inactive {
        background: rgba(148,163,184,.12);
        border-color: rgba(148,163,184,.20);
        color: #5f7281;
    }

.sites-cell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 7px;
    background: rgba(20,224,210,.09);
    color: #13b9ae;
}

.sites-cell-icon--muted {
    background: rgba(140,184,181,.10);
    color: #6d8b89;
}

.sites-cell-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sites-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 72px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(20,224,210,.10);
    border: 1px solid rgba(20,224,210,.20);
    color: #0f5d65;
    font-size: .88rem;
    font-weight: 800;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

    .sites-count-pill svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.sites-stations-link {
    text-decoration: none !important;
}

    .sites-stations-link:hover .sites-count-pill {
        transform: translateY(-1px);
        background: rgba(20,224,210,.16);
        border-color: rgba(20,224,210,.30);
    }

.sites-date-chip {
    justify-content: center;
    min-width: 186px;
    white-space: nowrap;
    padding: 0 10px;
    height: 34px;
    border-radius: 999px;
    background: rgba(140,184,181,.10);
    border: 1px solid rgba(140,184,181,.18);
    color: #4f6766;
    font-size: .82rem;
    font-weight: 700;
}

.sites-index-page .grid-link {
    color: #0f8380 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}

    .sites-index-page .grid-link:hover {
        color: #0ca79c !important;
        text-decoration: none !important;
        opacity: 1 !important;
    }

.sites-index-page #gridSites .k-switch {
    box-shadow: none;
}

.sites-index-page #gridSites .k-switch-on .k-switch-track {
    background: rgba(20,224,210,.16);
    border-color: rgba(20,224,210,.35);
}

.sites-index-page #gridSites .k-switch-on .k-switch-thumb {
    background: #14e0d2;
}

@media (max-width: 1100px) {
    .sites-page-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sites-page-actions__right {
        width: 100%;
        justify-content: flex-end;
    }

    .sites-page-actions .sites-search-box {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .sites-page-actions {
        padding: 14px 15px;
        border-radius: 16px;
    }

    .sites-page-subtitle {
        font-size: .82rem;
    }

    .sites-page-actions__right,
    .sites-page-actions__buttons {
        width: 100%;
    }

    .sites-page-actions__buttons {
        justify-content: flex-end;
    }

    .sites-index-page #gridSites .k-grid-content {
        overflow-x: auto;
    }
}

/* =========================================================
   STATIONS INDEX PAGE
========================================================= */
.stations-index-page {
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
}

.stations-page-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.stations-page-actions__left {
    display: flex;
    align-items: center;
    min-width: 0;
}

.stations-page-actions__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.stations-page-actions__buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.stations-toolbar-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stations-toolbar-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(20,224,210,.08);
    border: 1px solid rgba(20,224,210,.22);
    color: #14e0d2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    flex: 0 0 34px;
}

    .stations-toolbar-title-icon svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.stations-page-title-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stations-page-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stations-page-title {
    color: #dcf8f6;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .01em;
}

.stations-page-subtitle {
    margin-top: 4px;
    color: #8ea7a5;
    font-size: .86rem;
    line-height: 1.2;
}

.stations-page-actions .count-badge {
    background: rgba(20,224,210,.12);
    border: 1px solid rgba(20,224,210,.24);
    color: #dcfffc;
}

.stations-btn-primary {
    background: linear-gradient(180deg, rgba(20,224,210,.18), rgba(20,224,210,.12));
    border: 1px solid rgba(20,224,210,.34);
    color: #dffefd !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 20px rgba(0,0,0,.18);
}

    .stations-btn-primary:hover {
        background: linear-gradient(180deg, #22ebdd 0%, #11c7bb 100%);
        color: #05262b !important;
        border-color: rgba(20,224,210,.55);
    }

.stations-btn-ghost {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: #dcf8f6;
}

    .stations-btn-ghost:hover {
        background: rgba(20,224,210,.10);
        border-color: rgba(20,224,210,.24);
        color: #ffffff;
    }

.stations-page-actions .stations-search-box {
    width: 320px;
    max-width: 100%;
}

    .stations-page-actions .stations-search-box input {
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.08);
        color: #ecfffd;
    }

        .stations-page-actions .stations-search-box input::placeholder {
            color: #8ea7a5;
        }

        .stations-page-actions .stations-search-box input:focus {
            background: rgba(255,255,255,.09);
            border-color: rgba(20,224,210,.34);
            box-shadow: 0 0 0 3px rgba(20,224,210,.10);
        }

.stations-page-actions .search-svg {
    color: #8ea7a5;
}

.stations-grid-body {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.stations-index-page #gridStations.k-grid {
    border: 1px solid rgba(12,28,34,.10);
    border-radius: 0 !important;
    overflow: hidden;
    background: #fff;
    box-shadow: none;
}

.stations-index-page #gridStations .k-grid-header,
.stations-index-page #gridStations .k-grid-content,
.stations-index-page #gridStations .k-pager-wrap,
.stations-index-page #gridStations .k-grid-header-wrap {
    border-radius: 0 !important;
}

.stations-index-page #gridStations .k-grid-header {
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%);
    border-bottom: 1px solid rgba(20,224,210,.14);
}

    .stations-index-page #gridStations .k-grid-header table,
    .stations-index-page #gridStations .k-grid-header-wrap table {
        background: transparent;
    }

    .stations-index-page #gridStations .k-grid-header th,
    .stations-index-page #gridStations .k-grid-header .k-header {
        background: transparent !important;
        color: #dcf8f6 !important;
        border-color: rgba(255,255,255,.06) !important;
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
        padding: 20px !important;
        line-height: 1.1;
    }

        .stations-index-page #gridStations .k-grid-header th .k-link,
        .stations-index-page #gridStations .k-grid-header .k-header .k-link {
            color: #dcf8f6 !important;
            text-decoration: none !important;
            padding: 0 !important;
            min-height: 0 !important;
            line-height: 1.1;
        }

.stations-index-page #gridStations .k-filter-row {
    display: none !important;
}

.stations-index-page #gridStations .k-grid-content {
    background: #ffffff;
}

.stations-index-page #gridStations tbody tr {
    transition: background-color .18s ease, box-shadow .18s ease;
    cursor: pointer;
}

.stations-index-page #gridStations tbody td {
    border-color: #edf4f4;
    padding-top: 14px;
    padding-bottom: 14px;
    vertical-align: middle;
}

.stations-index-page #gridStations tbody tr:hover td {
    background: rgba(20,224,210,.05) !important;
}

.stations-index-page #gridStations tbody tr:nth-child(even) td {
    background: rgba(248,251,251,.72);
}

.stations-index-page #gridStations tbody tr.inactive-row td {
    background: linear-gradient(90deg, rgba(148,163,184,.08), rgba(255,255,255,0)) !important;
    color: #728786;
}

    .stations-index-page #gridStations tbody tr.inactive-row td:first-child {
        box-shadow: inset 4px 0 0 rgba(148,163,184,.32);
    }

.stations-index-page #gridStations .k-pager-wrap {
    border-top: 1px solid #edf4f4;
    background: linear-gradient(180deg, #fbfefe 0%, #f4fbfb 100%);
}

.station-thumb-wrap {
    width: 78px;
    height: 58px;
    border-radius: 14px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #f8fbfb 0%, #eef6f6 100%);
    border: 1px solid rgba(20,224,210,.14);
    box-shadow: 0 6px 16px rgba(5,22,28,.08);
    vertical-align: middle;
}

.station-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.station-image-link {
    display: inline-block;
    line-height: 0;
}

.stations-empty-thumb {
    width: 78px;
    height: 58px;
    border-radius: 14px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: linear-gradient(180deg, #f8fbfb 0%, #eef6f6 100%);
    border: 1px dashed rgba(140,184,181,.45);
    color: #7f9694;
    font-size: 10px;
    font-weight: 700;
}

    .stations-empty-thumb svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.stations-id-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(20,224,210,.18);
    background: rgba(20,224,210,.08);
    color: #0d4f57;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

.station-name-cell {
    text-align: left;
}

.station-name-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 2px 0;
}

.station-name-line,
.station-address-cell,
.stations-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.station-name-icon,
.station-cell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 7px;
    background: rgba(20,224,210,.09);
    color: #13b9ae;
}

.station-cell-icon--muted,
.station-name-line-site .station-name-icon {
    background: rgba(140,184,181,.10);
    color: #6d8b89;
}

.station-name-line-station .station-name-icon {
    background: rgba(20,224,210,.09);
    color: #13b9ae;
}

.station-name-icon svg,
.station-cell-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.station-name-text,
.station-address-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.station-site-text {
    font-size: 12px;
    font-weight: 700;
    color: #5c7674;
    letter-spacing: .01em;
}

.station-station-text {
    font-size: 14px;
    font-weight: 800;
    color: #10232a;
}

.station-address-text {
    color: #556f6d;
    font-weight: 600;
    line-height: 1.35;
}

.station-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 32px;
}

.station-inline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

    .station-inline-badge.is-active {
        background: rgba(20,224,210,.10);
        border-color: rgba(20,224,210,.20);
        color: #0c7b73;
    }

    .station-inline-badge.is-inactive {
        background: rgba(148,163,184,.12);
        border-color: rgba(148,163,184,.20);
        color: #5f7281;
    }

.stations-conn-pills {
    min-width: 160px;
}

    .stations-conn-pills .pill-link {
        color: #0f8380;
        text-decoration: none !important;
        border-color: rgba(20,224,210,.18);
        background: rgba(20,224,210,.08);
    }

        .stations-conn-pills .pill-link:hover {
            color: #0ca79c;
            background: rgba(20,224,210,.14);
        }

.stations-date-chip {
    justify-content: center;
    min-width: 186px;
    white-space: nowrap;
    padding: 0 10px;
    height: 34px;
    border-radius: 999px;
    background: rgba(140,184,181,.10);
    border: 1px solid rgba(140,184,181,.18);
    color: #4f6766;
    font-size: .82rem;
    font-weight: 700;
}

.stations-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.stations-grid-icon-link {
    border: 1px solid rgba(20,224,210,.18);
    background: rgba(20,224,210,.08);
    color: #0f8380;
}

    .stations-grid-icon-link:hover {
        background: rgba(20,224,210,.14);
        color: #0ca79c;
        transform: translateY(-1px);
    }

.stations-index-page #gridStations .k-switch {
    box-shadow: none;
}

.stations-index-page #gridStations .k-switch-on .k-switch-track {
    background: rgba(20,224,210,.16);
    border-color: rgba(20,224,210,.35);
}

.stations-index-page #gridStations .k-switch-on .k-switch-thumb {
    background: #14e0d2;
}

@media (max-width: 1100px) {
    .stations-page-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .stations-page-actions__right {
        width: 100%;
        justify-content: flex-end;
    }

    .stations-page-actions .stations-search-box {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .stations-page-actions {
        padding: 14px 15px;
        border-radius: 16px;
    }

    .stations-page-subtitle {
        font-size: .82rem;
    }

    .stations-page-actions__right,
    .stations-page-actions__buttons {
        width: 100%;
    }

    .stations-page-actions__buttons {
        justify-content: flex-end;
    }

    .stations-index-page #gridStations .k-grid-content {
        overflow-x: auto;
    }
}

/* =========================================================
   USERS INDEX PAGE
========================================================= */
.users-index-page {
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
}

.users-page-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.users-page-actions__left {
    display: flex;
    align-items: center;
    min-width: 0;
}

.users-page-actions__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.users-page-actions__buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.users-toolbar-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.users-toolbar-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(20,224,210,.08);
    border: 1px solid rgba(20,224,210,.22);
    color: #14e0d2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    flex: 0 0 34px;
}

    .users-toolbar-title-icon svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.users-page-title-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.users-page-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.users-page-title {
    color: #dcf8f6;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .01em;
}

.users-page-subtitle {
    margin-top: 4px;
    color: #8ea7a5;
    font-size: .86rem;
    line-height: 1.2;
}

.users-page-actions .count-badge {
    background: rgba(20,224,210,.12);
    border: 1px solid rgba(20,224,210,.24);
    color: #dcfffc;
}

.users-btn-primary {
    background: linear-gradient(180deg, rgba(20,224,210,.18), rgba(20,224,210,.12));
    border: 1px solid rgba(20,224,210,.34);
    color: #dffefd !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 20px rgba(0,0,0,.18);
}

    .users-btn-primary:hover {
        background: linear-gradient(180deg, #22ebdd 0%, #11c7bb 100%);
        color: #05262b !important;
        border-color: rgba(20,224,210,.55);
    }

.users-btn-ghost {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: #dcf8f6;
}

    .users-btn-ghost:hover {
        background: rgba(20,224,210,.10);
        border-color: rgba(20,224,210,.24);
        color: #ffffff;
    }

.users-page-actions .users-search-box {
    width: 320px;
    max-width: 100%;
}

    .users-page-actions .users-search-box input {
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.08);
        color: #ecfffd;
    }

        .users-page-actions .users-search-box input::placeholder {
            color: #8ea7a5;
        }

        .users-page-actions .users-search-box input:focus {
            background: rgba(255,255,255,.09);
            border-color: rgba(20,224,210,.34);
            box-shadow: 0 0 0 3px rgba(20,224,210,.10);
        }

.users-page-actions .search-svg {
    color: #8ea7a5;
}

.users-grid-body {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.users-index-page #gridUsers.k-grid {
    border: 1px solid rgba(12,28,34,.10);
    border-radius: 0 !important;
    overflow: hidden;
    background: #fff;
    box-shadow: none;
}

.users-index-page #gridUsers .k-grid-header,
.users-index-page #gridUsers .k-grid-content,
.users-index-page #gridUsers .k-pager-wrap,
.users-index-page #gridUsers .k-grid-header-wrap {
    border-radius: 0 !important;
}

.users-index-page #gridUsers .k-grid-header {
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%);
    border-bottom: 1px solid rgba(20,224,210,.14);
}

    .users-index-page #gridUsers .k-grid-header table,
    .users-index-page #gridUsers .k-grid-header-wrap table {
        background: transparent;
    }

    .users-index-page #gridUsers .k-grid-header th,
    .users-index-page #gridUsers .k-grid-header .k-header {
        background: transparent !important;
        color: #dcf8f6 !important;
        border-color: rgba(255,255,255,.06) !important;
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
        padding: 20px !important;
        line-height: 1.1;
    }

        .users-index-page #gridUsers .k-grid-header th .k-link,
        .users-index-page #gridUsers .k-grid-header .k-header .k-link {
            color: #dcf8f6 !important;
            text-decoration: none !important;
            padding: 0 !important;
            min-height: 0 !important;
            line-height: 1.1;
        }

.users-index-page #gridUsers .k-filter-row {
    display: none !important;
}

.users-index-page #gridUsers .k-grid-content {
    background: #ffffff;
}

.users-index-page #gridUsers tbody tr {
    transition: background-color .18s ease, box-shadow .18s ease;
    cursor: pointer;
}

.users-index-page #gridUsers tbody td {
    border-color: #edf4f4;
    padding-top: 14px;
    padding-bottom: 14px;
    vertical-align: middle;
}

.users-index-page #gridUsers tbody tr:hover td {
    background: rgba(20,224,210,.05) !important;
}

.users-index-page #gridUsers tbody tr:nth-child(even) td {
    background: rgba(248,251,251,.72);
}

.users-index-page #gridUsers tbody tr.inactive-row td {
    background: linear-gradient(90deg, rgba(148,163,184,.08), rgba(255,255,255,0)) !important;
    color: #728786;
}

    .users-index-page #gridUsers tbody tr.inactive-row td:first-child {
        box-shadow: inset 4px 0 0 rgba(148,163,184,.32);
    }

.users-index-page #gridUsers .k-pager-wrap {
    border-top: 1px solid #edf4f4;
    background: linear-gradient(180deg, #fbfefe 0%, #f4fbfb 100%);
}

.users-id-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(20,224,210,.18);
    background: rgba(20,224,210,.08);
    color: #0d4f57;
    font-size: .78rem;
    font-weight: 800;
}

.users-email-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.users-email-line,
.users-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.users-email-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #10232a;
    font-weight: 800;
    font-size: .95rem;
}

.users-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 32px;
}

.users-inline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

    .users-inline-badge.is-active {
        background: rgba(20,224,210,.10);
        border-color: rgba(20,224,210,.20);
        color: #0c7b73;
    }

    .users-inline-badge.is-inactive {
        background: rgba(148,163,184,.12);
        border-color: rgba(148,163,184,.20);
        color: #5f7281;
    }

.users-cell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 7px;
    background: rgba(20,224,210,.09);
    color: #13b9ae;
}

.users-cell-icon--muted {
    background: rgba(140,184,181,.10);
    color: #6d8b89;
}

.users-cell-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.users-role-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 92px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(20,224,210,.10);
    border: 1px solid rgba(20,224,210,.20);
    color: #0f5d65;
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}

    .users-role-chip.role-admin {
        background: rgba(20,224,210,.12);
        border-color: rgba(20,224,210,.26);
        color: #0d6e67;
    }

    .users-role-chip.role-editor {
        background: rgba(59,130,246,.10);
        border-color: rgba(59,130,246,.20);
        color: #295f9d;
    }

    .users-role-chip.role-user {
        background: rgba(148,163,184,.12);
        border-color: rgba(148,163,184,.22);
        color: #5f7281;
    }

.users-role-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .users-role-icon svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.users-date-chip {
    justify-content: center;
    min-width: 186px;
    white-space: nowrap;
    padding: 0 10px;
    height: 34px;
    border-radius: 999px;
    background: rgba(140,184,181,.10);
    border: 1px solid rgba(140,184,181,.18);
    color: #4f6766;
    font-size: .82rem;
    font-weight: 700;
}

.users-date-chip--empty {
    background: rgba(148,163,184,.10);
    border-color: rgba(148,163,184,.18);
    color: #728786;
}

.users-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.users-grid-icon-link {
    border: 1px solid rgba(20,224,210,.18);
    background: rgba(20,224,210,.08);
    color: #0f8380;
}

    .users-grid-icon-link:hover {
        background: rgba(20,224,210,.14);
        color: #0ca79c;
        transform: translateY(-1px);
    }

.users-index-page #gridUsers .k-switch {
    box-shadow: none;
}

.users-index-page #gridUsers .k-switch-on .k-switch-track {
    background: rgba(20,224,210,.16);
    border-color: rgba(20,224,210,.35);
}

.users-index-page #gridUsers .k-switch-on .k-switch-thumb {
    background: #14e0d2;
}

@media (max-width: 1100px) {
    .users-page-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .users-page-actions__right {
        width: 100%;
        justify-content: flex-end;
    }

    .users-page-actions .users-search-box {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .users-page-actions {
        padding: 14px 15px;
        border-radius: 16px;
    }

    .users-page-subtitle {
        font-size: .82rem;
    }

    .users-page-actions__right,
    .users-page-actions__buttons {
        width: 100%;
    }

    .users-page-actions__buttons {
        justify-content: flex-end;
    }

    .users-index-page #gridUsers .k-grid-content {
        overflow-x: auto;
    }
}

/* =========================================================
   SITES EDIT PAGE
========================================================= */
.sites-edit-page {
    background: transparent;
}

.sites-edit-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.sites-edit-page-header__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sites-edit-page-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    background: rgba(20,224,210,.08);
    border: 1px solid rgba(20,224,210,.22);
    color: #14e0d2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

    .sites-edit-page-header__icon svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.sites-edit-page-header__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sites-edit-page-header__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .sites-edit-page-header__title-row h2 {
        margin: 0;
        color: #dcf8f6;
        font-size: 1.15rem;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: .01em;
    }

.sites-edit-page-header__subtitle {
    margin-top: 4px;
    color: #8ea7a5;
    font-size: .86rem;
    line-height: 1.2;
}

.sites-edit-page-header__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(20,224,210,.12);
    border: 1px solid rgba(20,224,210,.24);
    color: #dcfffc;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .03em;
}

.sites-edit-shell {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.site-edit-tabs.k-tabstrip {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

    .site-edit-tabs.k-tabstrip > .k-tabstrip-items {
        margin: 0 0 16px 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        display: flex !important;
        gap: 10px !important;
    }

        .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item {
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            background: transparent !important;
            box-shadow: none !important;
        }

            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item::before,
            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item::after {
                content: none !important;
                display: none !important;
            }

            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item .k-link,
            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item > .k-link,
            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item > span.k-link {
                min-height: 44px !important;
                padding: 0 16px !important;
                border-radius: 14px !important;
                border: 1px solid rgba(255,255,255,.08) !important;
                background: linear-gradient(180deg, #172127 0%, #1b262d 100%) !important;
                box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                text-decoration: none !important;
                font-weight: 800 !important;
                letter-spacing: .02em !important;
                color: #7f9c99 !important;
                -webkit-text-fill-color: #7f9c99 !important;
                transition: border-color .18s ease, background .18s ease, color .18s ease !important;
            }

                .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item .k-link *,
                .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item > .k-link *,
                .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item > span.k-link *,
                .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item .k-link .k-link-text,
                .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item > .k-link .k-link-text,
                .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item > span.k-link .k-link-text {
                    color: #7f9c99 !important;
                    -webkit-text-fill-color: #7f9c99 !important;
                    fill: currentColor !important;
                    stroke: currentColor !important;
                }

            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item:hover .k-link,
            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item:hover > .k-link,
            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item:hover > span.k-link,
            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-active .k-link,
            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-active > .k-link,
            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-active > span.k-link,
            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-selected .k-link,
            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-selected > .k-link,
            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-selected > span.k-link,
            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-state-active .k-link,
            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-state-active > .k-link,
            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-state-active > span.k-link {
                border-color: rgba(20,224,210,.26) !important;
                background: linear-gradient(90deg, rgba(20,224,210,.12), rgba(20,224,210,.04)), linear-gradient(180deg, #172127 0%, #1b262d 100%) !important;
                color: #14e0d2 !important;
                -webkit-text-fill-color: #14e0d2 !important;
            }

                .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item:hover .k-link *,
                .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item:hover > .k-link *,
                .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item:hover > span.k-link *,
                .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-active .k-link *,
                .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-active > .k-link *,
                .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-active > span.k-link *,
                .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-selected .k-link *,
                .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-selected > .k-link *,
                .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-selected > span.k-link *,
                .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-state-active .k-link *,
                .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-state-active > .k-link *,
                .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-state-active > span.k-link * {
                    color: #14e0d2 !important;
                    -webkit-text-fill-color: #14e0d2 !important;
                    fill: currentColor !important;
                    stroke: currentColor !important;
                }

    .site-edit-tabs.k-tabstrip > .k-content {
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

@media (max-width: 767px) {
    .site-edit-tabs.k-tabstrip > .k-tabstrip-items {
        flex-wrap: wrap !important;
    }

        .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item,
        .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item .k-link,
        .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item > .k-link,
        .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item > span.k-link {
            width: 100% !important;
        }

            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item .k-link,
            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item > .k-link,
            .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item > span.k-link {
                justify-content: flex-start !important;
            }
}
.site-edit-tabs > .k-tabstrip-items {
    margin: 0 0 16px 0;
    padding: 0;
    border: none;
    background: transparent;
    display: flex;
    gap: 10px;
}

    .site-edit-tabs > .k-tabstrip-items .k-item {
        border: none;
        margin: 0;
    }

    .site-edit-tabs > .k-tabstrip-items .k-link {
        min-height: 44px;
        padding: 0 16px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.08);
        background: linear-gradient(180deg, #172127 0%, #1b262d 100%);
        color: #8ea7a5;
        font-weight: 800;
        letter-spacing: .02em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
        transition: border-color .18s ease, background .18s ease, color .18s ease;
    }

        .site-edit-tabs > .k-tabstrip-items .k-item.k-active .k-link,
        .site-edit-tabs > .k-tabstrip-items .k-link:hover {
            color: #dcf8f6;
            border-color: rgba(20,224,210,.26);
            background: linear-gradient(90deg, rgba(20,224,210,.12), rgba(20,224,210,.04)), linear-gradient(180deg, #172127 0%, #1b262d 100%);
        }

.site-edit-tabs > .k-content {
    padding: 0;
    border: none;
    background: transparent;
}

.site-edit-tab-panel {
    padding: 0;
    background: transparent;
}

.site-edit-card {
    margin-bottom: 18px;
    border: 1px solid rgba(20,224,210,.10);
    box-shadow: 0 12px 24px rgba(5,22,28,.06);
}

.site-edit-card-header {
    padding: 14px 16px;
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%) !important;
    border-bottom: 1px solid rgba(20,224,210,.12);
}

.site-edit-card-header__inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-edit-card-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: rgba(20,224,210,.08);
    border: 1px solid rgba(20,224,210,.22);
    color: #14e0d2;
}

    .site-edit-card-header__icon svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.site-edit-card-header .card-title {
    margin: 0;
    color: #dcf8f6;
    font-size: 1rem;
    font-weight: 800;
}

.site-edit-card-body {
    padding: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), #f7fbfb 100%);
}

.site-edit-form-grid {
    display: grid;
    gap: 10px 20px;
}

.site-edit-form-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-edit-field-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-bottom: 5px;
}

.site-edit-field-group--full {
    grid-column: 1 / -1;
}

.site-edit-field-label {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 0 5px 0;
    text-align: left !important;
    color: #21363a;
    font-weight: 800;
    letter-spacing: .01em;
}

.site-edit-field-group .input,
.site-edit-field-group input[type="text"],
.site-edit-field-group input[type="number"],
.site-edit-field-group textarea,
.site-edit-field-group .k-input,
.site-edit-field-group .k-textbox,
.site-edit-field-group .k-input-inner {
    width: 100%;
    margin-bottom: 5px;
}

.site-edit-switch-field {
    display: flex;
    align-items: center;
    min-height: 42px;
    margin-bottom: 5px;
}

.sites-edit-page .k-switch {
    box-shadow: none;
}

.sites-edit-page .k-switch-track {
    border-color: rgba(140,184,181,.32);
    background: rgba(148,163,184,.16);
}

.sites-edit-page .k-switch-thumb {
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

.sites-edit-page .k-switch-on .k-switch-track {
    background: rgba(20,224,210,.18);
    border-color: rgba(20,224,210,.42);
}

.sites-edit-page .k-switch-on .k-switch-thumb {
    background: #14e0d2;
}

.sites-edit-page input[type="checkbox"],
.sites-edit-page .k-checkbox {
    accent-color: #14e0d2;
}

.site-edit-image-preview {
    margin-bottom: 10px;
}

.site-edit-image-label {
    display: inline-block;
    cursor: pointer;
}

.site-edit-image-preview__img {
    display: block;
    width: 240px;
    max-width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(20,224,210,.16);
    box-shadow: 0 10px 20px rgba(5,22,28,.08);
}

.site-edit-file-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.site-edit-upload-btn,
.site-edit-geo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    border-color: rgba(20,224,210,.22) !important;
    color: #0f8380 !important;
    background: rgba(20,224,210,.08) !important;
}

    .site-edit-upload-btn:hover,
    .site-edit-geo-btn:hover {
        color: #0ca79c !important;
        background: rgba(20,224,210,.14) !important;
        border-color: rgba(20,224,210,.32) !important;
    }

.site-edit-file-name {
    color: #556f6d;
    font-weight: 700;
    font-size: .88rem;
}

.site-edit-file-input--hidden {
    display: none !important;
}

.site-edit-help-text {
    margin-top: 5px;
    color: #6d8583;
    font-size: .84rem;
    line-height: 1.35;
}

.site-edit-readonly-input {
    background: #f3f8f8 !important;
    color: #6c8482;
    cursor: not-allowed;
}

.site-edit-map-host {
    height: 520px;
    border: 1px solid rgba(20,224,210,.14);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    margin-bottom: 5px;
}

.site-edit-inline-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 5px;
}

.site-edit-action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 8px;
    padding-top: 6px;
}

.site-edit-back-btn,
.site-edit-secondary-btn,
.site-edit-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.site-edit-save-btn {
    min-height: 44px;
    padding-inline: 18px;
    color: #dffefd !important;
    border: 1px solid rgba(20,224,210,.38) !important;
    background: linear-gradient(180deg, rgba(20,224,210,.22), rgba(20,224,210,.14)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.18);
}

    .site-edit-save-btn:hover {
        color: #05262b !important;
        background: linear-gradient(180deg, #22ebdd 0%, #11c7bb 100%) !important;
        border-color: rgba(20,224,210,.56) !important;
    }

.site-edit-secondary-btn {
    min-height: 44px;
}

.site-edit-hidden-window {
    display: none;
}

/* =========================================================
   SITES EDIT SUBSECTIONS / TAB TOOLBARS
========================================================= */
.site-edit-subsection,
.site-edit-docs-upload {
    margin-bottom: 18px;
    border: 1px solid rgba(20,224,210,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.98), #f7fbfb 100%);
    box-shadow: 0 12px 24px rgba(5,22,28,.06);
}

.site-edit-docs-upload__header,
.site-edit-subsection__toolbar {
    padding: 14px 16px;
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%);
    border-bottom: 1px solid rgba(20,224,210,.12);
}

.site-edit-docs-upload__title-wrap,
.site-edit-subsection__title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .site-edit-docs-upload__title-wrap h3,
    .site-edit-subsection__title {
        margin: 0;
        color: #dcf8f6;
        font-size: 1rem;
        font-weight: 800;
    }

.site-edit-subsection__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: rgba(20,224,210,.08);
    border: 1px solid rgba(20,224,210,.22);
    color: #14e0d2;
}

    .site-edit-subsection__icon svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.site-edit-subsection__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.site-edit-subsection__toolbar-left,
.site-edit-subsection__toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-edit-inline-search {
    width: 320px;
    max-width: 100%;
}

    .site-edit-inline-search input {
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.08);
        color: #ecfffd;
    }

        .site-edit-inline-search input::placeholder {
            color: #8ea7a5;
        }

        .site-edit-inline-search input:focus {
            background: rgba(255,255,255,.09);
            border-color: rgba(20,224,210,.34);
            box-shadow: 0 0 0 3px rgba(20,224,210,.10);
        }

    .site-edit-inline-search .search-svg {
        color: #8ea7a5;
    }

.site-edit-docs-upload__body {
    padding: 22px;
}

/* =========================================================
   SITES EDIT GRID STYLING
========================================================= */
.site-edit-grid-shell {
    padding: 0;
    background: transparent;
}

.site-edit-grid.k-grid {
    border: 1px solid rgba(12,28,34,.10);
    border-radius: 0 !important;
    overflow: hidden;
    background: #fff;
    box-shadow: none;
}

.site-edit-grid .k-grid-header,
.site-edit-grid .k-grid-content,
.site-edit-grid .k-pager-wrap,
.site-edit-grid .k-grid-header-wrap {
    border-radius: 0 !important;
}

.site-edit-grid .k-grid-header {
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%);
    border-bottom: 1px solid rgba(20,224,210,.14);
}

    .site-edit-grid .k-grid-header table,
    .site-edit-grid .k-grid-header-wrap table {
        background: transparent;
    }

    .site-edit-grid .k-grid-header th,
    .site-edit-grid .k-grid-header .k-header {
        background: transparent !important;
        color: #dcf8f6 !important;
        border-color: rgba(255,255,255,.06) !important;
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
        padding: 20px !important;
        line-height: 1.1;
    }

        .site-edit-grid .k-grid-header th .k-link,
        .site-edit-grid .k-grid-header .k-header .k-link {
            color: #dcf8f6 !important;
            text-decoration: none !important;
            padding: 0 !important;
            min-height: 0 !important;
            line-height: 1.1;
        }

.site-edit-grid .k-filter-row {
    display: none !important;
}

.site-edit-grid .k-grid-content {
    background: #ffffff;
}

.site-edit-grid tbody tr {
    transition: background-color .18s ease;
    cursor: pointer;
}

.site-edit-grid tbody td {
    border-color: #edf4f4;
    padding-top: 14px;
    padding-bottom: 14px;
    vertical-align: middle;
}

.site-edit-grid tbody tr:hover td {
    background: rgba(20,224,210,.05) !important;
}

.site-edit-grid tbody tr:nth-child(even) td {
    background: rgba(248,251,251,.72);
}

.site-edit-grid tbody tr.inactive-row td {
    background: linear-gradient(90deg, rgba(148,163,184,.08), rgba(255,255,255,0)) !important;
    color: #728786;
}

    .site-edit-grid tbody tr.inactive-row td:first-child {
        box-shadow: inset 4px 0 0 rgba(148,163,184,.32);
    }

.site-edit-grid .k-pager-wrap {
    border-top: 1px solid #edf4f4;
    background: linear-gradient(180deg, #fbfefe 0%, #f4fbfb 100%);
}

.site-edit-id-chip,
.site-edit-file-chip,
.site-edit-type-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
}

.site-edit-id-chip {
    min-width: 88px;
    border: 1px solid rgba(20,224,210,.18);
    background: rgba(20,224,210,.08);
    color: #0d4f57;
}

.site-edit-file-chip {
    justify-content: flex-start;
    border: 1px solid rgba(140,184,181,.18);
    background: rgba(140,184,181,.10);
    color: #4f6766;
}

.site-edit-type-chip {
    justify-content: flex-start;
    border: 1px solid rgba(20,224,210,.18);
    background: rgba(20,224,210,.08);
    color: #0d6a67;
}

.site-edit-empty-thumb {
    width: 78px;
    height: 58px;
    border-radius: 14px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: linear-gradient(180deg, #f8fbfb 0%, #eef6f6 100%);
    border: 1px dashed rgba(140,184,181,.45);
    color: #7f9694;
    font-size: 10px;
    font-weight: 700;
}

    .site-edit-empty-thumb svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.station-thumb-wrap {
    width: 78px;
    height: 58px;
    border-radius: 14px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #f8fbfb 0%, #eef6f6 100%);
    border: 1px solid rgba(20,224,210,.14);
    box-shadow: 0 6px 16px rgba(5,22,28,.08);
    vertical-align: middle;
}

.station-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.station-image-link {
    display: inline-block;
    line-height: 0;
}

.site-edit-grid-name-cell,
.site-edit-grid-doc-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.site-edit-grid-name-line,
.site-edit-grid-address-cell,
.site-edit-date-chip,
.site-edit-grid-doc-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.site-edit-grid-name-text,
.site-edit-grid-address-text,
.site-edit-grid-doc-link {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-edit-grid-name-text {
    color: #10232a;
    font-weight: 800;
    font-size: .95rem;
}

.site-edit-grid-address-text {
    color: #556f6d;
    font-weight: 600;
    line-height: 1.35;
}

.site-edit-grid-doc-link {
    color: #0f8380 !important;
    text-decoration: none !important;
    font-weight: 800;
}

    .site-edit-grid-doc-link:hover {
        color: #0ca79c !important;
    }

.site-edit-grid-cell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 7px;
    background: rgba(20,224,210,.09);
    color: #13b9ae;
}

.site-edit-grid-cell-icon--muted {
    background: rgba(140,184,181,.10);
    color: #6d8b89;
}

.site-edit-grid-cell-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-edit-date-chip {
    justify-content: center;
    min-width: 186px;
    white-space: nowrap;
    padding: 0 10px;
    height: 34px;
    border-radius: 999px;
    background: rgba(140,184,181,.10);
    border: 1px solid rgba(140,184,181,.18);
    color: #4f6766;
    font-size: .82rem;
    font-weight: 700;
}

.site-edit-grid-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.site-edit-grid-icon-link {
    border: 1px solid rgba(20,224,210,.18);
    background: rgba(20,224,210,.08);
    color: #0f8380;
}

    .site-edit-grid-icon-link:hover {
        background: rgba(20,224,210,.14);
        color: #0ca79c;
        transform: translateY(-1px);
    }

.site-edit-conn-pills .pill-link {
    color: #0f8380;
    text-decoration: none !important;
    border-color: rgba(20,224,210,.18);
    background: rgba(20,224,210,.08);
}

    .site-edit-conn-pills .pill-link:hover {
        color: #0ca79c;
        background: rgba(20,224,210,.14);
    }

.site-edit-grid .k-switch {
    box-shadow: none;
}

.site-edit-grid .k-switch-on .k-switch-track {
    background: rgba(20,224,210,.16);
    border-color: rgba(20,224,210,.35);
}

.site-edit-grid .k-switch-on .k-switch-thumb {
    background: #14e0d2;
}

.site-edit-docs-upload .k-upload {
    border: 1px dashed rgba(20,224,210,.24);
    background: rgba(20,224,210,.04);
}

.site-edit-docs-upload .k-upload-button {
    border-color: rgba(20,224,210,.22) !important;
    color: #0f8380 !important;
    background: rgba(20,224,210,.08) !important;
}

    .site-edit-docs-upload .k-upload-button:hover {
        color: #0ca79c !important;
        background: rgba(20,224,210,.14) !important;
        border-color: rgba(20,224,210,.32) !important;
    }

@media (max-width: 991.98px) {
    .sites-edit-page-header {
        flex-direction: column;
        align-items: stretch;
        padding: 14px 15px;
        border-radius: 16px;
    }

    .sites-edit-page-header__right {
        display: flex;
        justify-content: flex-start;
    }

    .sites-edit-page-header__subtitle {
        font-size: .82rem;
    }

    .site-edit-card-body,
    .site-edit-docs-upload__body {
        padding: 18px;
    }

    .site-edit-form-grid--two {
        grid-template-columns: 1fr;
    }

    .site-edit-map-host {
        height: 420px;
    }

    .site-edit-subsection__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .site-edit-subsection__toolbar-right {
        width: 100%;
    }

    .site-edit-inline-search {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .site-edit-tabs > .k-tabstrip-items {
        flex-wrap: wrap;
    }

        .site-edit-tabs > .k-tabstrip-items .k-link {
            width: 100%;
            justify-content: flex-start;
        }

    .site-edit-image-preview__img {
        width: 100%;
        height: auto;
        max-height: 220px;
    }

    .site-edit-file-row,
    .site-edit-action-bar {
        flex-wrap: wrap;
    }

    .site-edit-map-host {
        height: 320px;
    }
}

.site-edit-save-btn {
    min-height: 44px;
    padding-inline: 18px;
    color: #dcf8f6 !important;
    border: 1px solid rgba(20,224,210,.26) !important;
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 22px rgba(0,0,0,.14);
}

    .site-edit-save-btn:hover {
        color: #ffffff !important;
        border-color: rgba(20,224,210,.38) !important;
        background: linear-gradient(90deg, rgba(20,224,210,.08), rgba(20,224,210,.03)), linear-gradient(180deg, #172127 0%, #1b262d 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 12px 24px rgba(0,0,0,.16);
    }

.sites-edit-shell {
    
    background: transparent;
    border: none;
    box-shadow: none;
}

/* =========================================================
   SITES EDIT - UNIFY TAB BUTTONS TO MATCH "ADD SITE"
========================================================= */

/* same look as the Add Site button on Sites/Index */
.sites-edit-page .site-edit-upload-btn,
.sites-edit-page .site-edit-geo-btn,
.sites-edit-page .site-edit-save-btn,
.sites-edit-page .site-edit-secondary-btn,
.sites-edit-page .site-edit-subsection__toolbar .btn-premium,
.sites-edit-page .site-edit-docs-upload .k-upload .k-upload-button,
.sites-edit-page .site-edit-docs-upload .k-upload-button {
    background: linear-gradient(180deg, rgba(20,224,210,.18), rgba(20,224,210,.12)) !important;
    border: 1px solid rgba(20,224,210,.34) !important;
    color: #dffefd !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 20px rgba(0,0,0,.18) !important;
}

    .sites-edit-page .site-edit-upload-btn:hover,
    .sites-edit-page .site-edit-geo-btn:hover,
    .sites-edit-page .site-edit-save-btn:hover,
    .sites-edit-page .site-edit-secondary-btn:hover,
    .sites-edit-page .site-edit-subsection__toolbar .btn-premium:hover,
    .sites-edit-page .site-edit-docs-upload .k-upload .k-upload-button:hover,
    .sites-edit-page .site-edit-docs-upload .k-upload-button:hover {
        background: linear-gradient(180deg, #22ebdd 0%, #11c7bb 100%) !important;
        border-color: rgba(20,224,210,.55) !important;
        color: #05262b !important;
    }

    /* keep icon colour behaving properly */
    .sites-edit-page .site-edit-upload-btn .btn-svg,
    .sites-edit-page .site-edit-geo-btn .btn-svg,
    .sites-edit-page .site-edit-save-btn .btn-svg,
    .sites-edit-page .site-edit-secondary-btn .btn-svg,
    .sites-edit-page .site-edit-subsection__toolbar .btn-premium .btn-svg,
    .sites-edit-page .site-edit-docs-upload .k-upload .k-upload-button .k-svg-icon,
    .sites-edit-page .site-edit-docs-upload .k-upload-button .k-svg-icon {
        color: inherit !important;
    }

/* Kendo upload button padding/shape so it stops looking like it came from another planet */
.sites-edit-page .site-edit-docs-upload .k-upload .k-upload-button,
.sites-edit-page .site-edit-docs-upload .k-upload-button {
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
}

/* =========================================================
   SITES EDIT - FIX CHOOSE IMAGE / GEOLOCATE BUTTONS
========================================================= */

.sites-edit-page .site-edit-upload-btn,
.sites-edit-page .site-edit-geo-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    list-style: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: linear-gradient(180deg, rgba(20,224,210,.18), rgba(20,224,210,.12)) !important;
    border: 1px solid rgba(20,224,210,.34) !important;
    color: #dffefd !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 20px rgba(0,0,0,.18) !important;
}

    .sites-edit-page .site-edit-upload-btn:hover,
    .sites-edit-page .site-edit-geo-btn:hover {
        background: linear-gradient(180deg, #22ebdd 0%, #11c7bb 100%) !important;
        border-color: rgba(20,224,210,.55) !important;
        color: #05262b !important;
    }

    /* kill any weird pseudo bullet nonsense */
    .sites-edit-page .site-edit-upload-btn::before,
    .sites-edit-page .site-edit-upload-btn::after,
    .sites-edit-page .site-edit-geo-btn::before,
    .sites-edit-page .site-edit-geo-btn::after {
        content: none !important;
        display: none !important;
    }

    /* fix the SVG so it draws as an icon, not a random black blob */
    .sites-edit-page .site-edit-upload-btn .btn-svg,
    .sites-edit-page .site-edit-geo-btn .btn-svg {
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 16px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

        .sites-edit-page .site-edit-upload-btn .btn-svg *,
        .sites-edit-page .site-edit-geo-btn .btn-svg * {
            fill: none !important;
            stroke: currentColor !important;
            stroke-width: 2 !important;
            stroke-linecap: round !important;
            stroke-linejoin: round !important;
        }

    .sites-edit-page .site-edit-upload-btn span,
    .sites-edit-page .site-edit-geo-btn span {
        color: inherit !important;
    }

    /* just in case another rule is fading these two specifically */
    .sites-edit-page .site-edit-upload-btn,
    .sites-edit-page .site-edit-geo-btn,
    .sites-edit-page .site-edit-upload-btn:visited,
    .sites-edit-page .site-edit-geo-btn:visited {
        opacity: 1 !important;
    }

/* =========================================================
   SITES EDIT - FORCE CHOOSE IMAGE / GEOLOCATE BUTTONS
========================================================= */

.sites-edit-page .site-edit-upload-btn,
.sites-edit-page .site-edit-geo-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    list-style: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%) !important;
    background-color: #172127 !important;
    border: 1px solid rgba(20,224,210,.26) !important;
    color: #dcf8f6 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 22px rgba(0,0,0,.14) !important;
}

    .sites-edit-page .site-edit-upload-btn:hover,
    .sites-edit-page .site-edit-geo-btn:hover {
        background: linear-gradient(90deg, rgba(20,224,210,.08), rgba(20,224,210,.03)), linear-gradient(180deg, #172127 0%, #1b262d 100%) !important;
        background-color: #172127 !important;
        border-color: rgba(20,224,210,.38) !important;
        color: #ffffff !important;
    }

    /* force readable text */
    .sites-edit-page .site-edit-upload-btn span,
    .sites-edit-page .site-edit-geo-btn span,
    .sites-edit-page .site-edit-upload-btn,
    .sites-edit-page .site-edit-geo-btn {
        color: #dcf8f6 !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

        .sites-edit-page .site-edit-upload-btn:hover span,
        .sites-edit-page .site-edit-geo-btn:hover span {
            color: #ffffff !important;
        }

        /* remove the stupid bullet / broken icon rendering */
        .sites-edit-page .site-edit-geo-btn .btn-svg,
        .sites-edit-page .site-edit-upload-btn .btn-svg {
            display: none !important;
        }

        .sites-edit-page .site-edit-upload-btn::before,
        .sites-edit-page .site-edit-upload-btn::after,
        .sites-edit-page .site-edit-geo-btn::before,
        .sites-edit-page .site-edit-geo-btn::after {
            content: none !important;
            display: none !important;
        }

/* =========================================================
   SITES EDIT - FIX SAVE / BACK BUTTONS ONLY
========================================================= */

/* Save + both Back buttons should match the Add Site button style */
.sites-edit-page .site-edit-save-btn,
.sites-edit-page .site-edit-secondary-btn,
.sites-edit-page .sites-edit-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    background: linear-gradient(180deg, rgba(20,224,210,.18), rgba(20,224,210,.12)) !important;
    background-color: transparent !important;
    border: 1px solid rgba(20,224,210,.34) !important;
    color: #dffefd !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 20px rgba(0,0,0,.18) !important;
}

    .sites-edit-page .site-edit-save-btn:hover,
    .sites-edit-page .site-edit-secondary-btn:hover,
    .sites-edit-page .sites-edit-back-btn:hover {
        background: linear-gradient(180deg, #22ebdd 0%, #11c7bb 100%) !important;
        background-color: transparent !important;
        border-color: rgba(20,224,210,.55) !important;
        color: #05262b !important;
    }

    .sites-edit-page .site-edit-save-btn span,
    .sites-edit-page .site-edit-secondary-btn span,
    .sites-edit-page .sites-edit-back-btn span,
    .sites-edit-page .site-edit-save-btn .btn-svg,
    .sites-edit-page .site-edit-secondary-btn .btn-svg,
    .sites-edit-page .sites-edit-back-btn .btn-svg {
        color: inherit !important;
    }

    .sites-edit-page .site-edit-save-btn .btn-svg,
    .sites-edit-page .site-edit-secondary-btn .btn-svg,
    .sites-edit-page .sites-edit-back-btn .btn-svg {
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 16px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

        .sites-edit-page .site-edit-save-btn .btn-svg *,
        .sites-edit-page .site-edit-secondary-btn .btn-svg *,
        .sites-edit-page .sites-edit-back-btn .btn-svg * {
            fill: none !important;
            stroke: currentColor !important;
            stroke-width: 2 !important;
            stroke-linecap: round !important;
            stroke-linejoin: round !important;
        }

/* =========================================================
   SITES EDIT - BOTTOM ACTION BAR BUTTONS ONLY
========================================================= */

.sites-edit-page .site-edit-action-bar .site-edit-save-btn,
.sites-edit-page .site-edit-action-bar .site-edit-secondary-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%) !important;
    background-color: #172127 !important;
    border: 1px solid rgba(20,224,210,.26) !important;
    color: #dcf8f6 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 22px rgba(0,0,0,.14) !important;
}

    .sites-edit-page .site-edit-action-bar .site-edit-save-btn:hover,
    .sites-edit-page .site-edit-action-bar .site-edit-secondary-btn:hover {
        background: linear-gradient(90deg, rgba(20,224,210,.08), rgba(20,224,210,.03)), linear-gradient(180deg, #172127 0%, #1b262d 100%) !important;
        background-color: #172127 !important;
        border-color: rgba(20,224,210,.38) !important;
        color: #ffffff !important;
    }

    .sites-edit-page .site-edit-action-bar .site-edit-save-btn span,
    .sites-edit-page .site-edit-action-bar .site-edit-secondary-btn span,
    .sites-edit-page .site-edit-action-bar .site-edit-save-btn .btn-svg,
    .sites-edit-page .site-edit-action-bar .site-edit-secondary-btn .btn-svg {
        color: inherit !important;
        opacity: 1 !important;
    }

    .sites-edit-page .site-edit-action-bar .site-edit-save-btn .btn-svg,
    .sites-edit-page .site-edit-action-bar .site-edit-secondary-btn .btn-svg {
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 16px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

        .sites-edit-page .site-edit-action-bar .site-edit-save-btn .btn-svg *,
        .sites-edit-page .site-edit-action-bar .site-edit-secondary-btn .btn-svg * {
            fill: none !important;
            stroke: currentColor !important;
            stroke-width: 2 !important;
            stroke-linecap: round !important;
            stroke-linejoin: round !important;
        }

/* =========================================================
   SITES EDIT - TAB TEXT + DOCUMENT UPLOAD BUTTON FIXES
========================================================= */

/* force tab text colours */
.sites-edit-page .site-edit-tabs > .k-tabstrip-items .k-item .k-link {
    color: #8ea7a5 !important;
}

    .sites-edit-page .site-edit-tabs > .k-tabstrip-items .k-item.k-active .k-link,
    .sites-edit-page .site-edit-tabs > .k-tabstrip-items .k-item .k-link:hover,
    .sites-edit-page .site-edit-tabs > .k-tabstrip-items .k-item .k-link:focus {
        color: #dcf8f6 !important;
    }

        /* make sure inner tab text doesn't inherit some random Kendo nonsense */
        .sites-edit-page .site-edit-tabs > .k-tabstrip-items .k-item .k-link *,
        .sites-edit-page .site-edit-tabs > .k-tabstrip-items .k-item.k-active .k-link * {
            color: inherit !important;
        }

/* documents tab upload button - match Add Site style */
.sites-edit-page .site-edit-docs-upload .k-upload .k-upload-button,
.sites-edit-page .site-edit-docs-upload .k-upload-button,
.sites-edit-page .site-edit-docs-upload .k-upload .k-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    background: linear-gradient(180deg, rgba(20,224,210,.18), rgba(20,224,210,.12)) !important;
    background-color: transparent !important;
    border: 1px solid rgba(20,224,210,.34) !important;
    color: #dffefd !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 20px rgba(0,0,0,.18) !important;
}

    .sites-edit-page .site-edit-docs-upload .k-upload .k-upload-button:hover,
    .sites-edit-page .site-edit-docs-upload .k-upload-button:hover,
    .sites-edit-page .site-edit-docs-upload .k-upload .k-button:hover {
        background: linear-gradient(180deg, #22ebdd 0%, #11c7bb 100%) !important;
        background-color: transparent !important;
        border-color: rgba(20,224,210,.55) !important;
        color: #05262b !important;
    }

    /* fix upload button text/icon readability */
    .sites-edit-page .site-edit-docs-upload .k-upload .k-upload-button *,
    .sites-edit-page .site-edit-docs-upload .k-upload-button *,
    .sites-edit-page .site-edit-docs-upload .k-upload .k-button * {
        color: inherit !important;
        fill: none !important;
        stroke: currentColor !important;
    }

/* upload wrapper */
.sites-edit-page .site-edit-docs-upload .k-upload {
    border: 1px dashed rgba(20,224,210,.24) !important;
    background: rgba(20,224,210,.04) !important;
    padding: 12px !important;
}

.sites-edit-page .site-edit-docs-upload .k-upload-dropzone,
.sites-edit-page .site-edit-docs-upload .k-dropzone {
    background: transparent !important;
    border: none !important;
}

/* selected file list */
.sites-edit-page .site-edit-docs-upload .k-upload-files {
    border-top: 1px solid rgba(20,224,210,.10) !important;
    margin-top: 10px !important;
}

.sites-edit-page .site-edit-docs-upload .k-file {
    background: rgba(255,255,255,.72) !important;
}

/* =========================================================
   SITES EDIT - TAB TEXT + DOCUMENT UPLOAD BUTTON FIXES
========================================================= */

/* force tab text colours */
.sites-edit-page .site-edit-tabs > .k-tabstrip-items .k-item .k-link {
    color: #8ea7a5 !important;
}

    .sites-edit-page .site-edit-tabs > .k-tabstrip-items .k-item.k-active .k-link,
    .sites-edit-page .site-edit-tabs > .k-tabstrip-items .k-item .k-link:hover,
    .sites-edit-page .site-edit-tabs > .k-tabstrip-items .k-item .k-link:focus {
        color: #dcf8f6 !important;
    }

        /* make sure inner tab text doesn't inherit some random Kendo nonsense */
        .sites-edit-page .site-edit-tabs > .k-tabstrip-items .k-item .k-link *,
        .sites-edit-page .site-edit-tabs > .k-tabstrip-items .k-item.k-active .k-link * {
            color: inherit !important;
        }

/* documents tab upload button - match Add Site style */
.sites-edit-page .site-edit-docs-upload .k-upload .k-upload-button,
.sites-edit-page .site-edit-docs-upload .k-upload-button,
.sites-edit-page .site-edit-docs-upload .k-upload .k-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    background: linear-gradient(180deg, rgba(20,224,210,.18), rgba(20,224,210,.12)) !important;
    background-color: transparent !important;
    border: 1px solid rgba(20,224,210,.34) !important;
    color: #dffefd !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 20px rgba(0,0,0,.18) !important;
}

    .sites-edit-page .site-edit-docs-upload .k-upload .k-upload-button:hover,
    .sites-edit-page .site-edit-docs-upload .k-upload-button:hover,
    .sites-edit-page .site-edit-docs-upload .k-upload .k-button:hover {
        background: linear-gradient(180deg, #22ebdd 0%, #11c7bb 100%) !important;
        background-color: transparent !important;
        border-color: rgba(20,224,210,.55) !important;
        color: #05262b !important;
    }

    /* fix upload button text/icon readability */
    .sites-edit-page .site-edit-docs-upload .k-upload .k-upload-button *,
    .sites-edit-page .site-edit-docs-upload .k-upload-button *,
    .sites-edit-page .site-edit-docs-upload .k-upload .k-button * {
        color: inherit !important;
        fill: none !important;
        stroke: currentColor !important;
    }

/* upload wrapper */
.sites-edit-page .site-edit-docs-upload .k-upload {
    border: 1px dashed rgba(20,224,210,.24) !important;
    background: rgba(20,224,210,.04) !important;
    padding: 12px !important;
}

.sites-edit-page .site-edit-docs-upload .k-upload-dropzone,
.sites-edit-page .site-edit-docs-upload .k-dropzone {
    background: transparent !important;
    border: none !important;
}

/* selected file list */
.sites-edit-page .site-edit-docs-upload .k-upload-files {
    border-top: 1px solid rgba(20,224,210,.10) !important;
    margin-top: 10px !important;
}

.sites-edit-page .site-edit-docs-upload .k-file {
    background: rgba(255,255,255,.72) !important;
}

/* =========================================================
   SITES EDIT - FINAL TAB TEXT + DOC UPLOAD BUTTON FIX
========================================================= */

/* ---------- TAB TEXT ---------- */
/* inactive tabs */
.sites-edit-page .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item .k-link,
.sites-edit-page .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item .k-link > .k-link-text,
.sites-edit-page .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item .k-link > span {
    color: #7f9c99 !important;
}

    /* active / hover tabs */
    .sites-edit-page .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-active .k-link,
    .sites-edit-page .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-active .k-link > .k-link-text,
    .sites-edit-page .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item.k-active .k-link > span,
    .sites-edit-page .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item .k-link:hover,
    .sites-edit-page .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item .k-link:hover > .k-link-text,
    .sites-edit-page .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item .k-link:hover > span,
    .sites-edit-page .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item .k-link:focus,
    .sites-edit-page .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item .k-link:focus > .k-link-text,
    .sites-edit-page .site-edit-tabs.k-tabstrip > .k-tabstrip-items .k-item .k-link:focus > span {
        color: #14e0d2 !important;
    }

/* ---------- DOCUMENT UPLOAD BUTTON ---------- */
/* match the Choose Image / Geolocate dark grey style */
.sites-edit-page .site-edit-docs-upload .k-upload .k-upload-button,
.sites-edit-page .site-edit-docs-upload .k-upload .k-upload-button-wrap .k-button,
.sites-edit-page .site-edit-docs-upload .k-upload .k-button,
.sites-edit-page .site-edit-docs-upload .k-upload-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%) !important;
    background-color: #172127 !important;
    border: 1px solid rgba(20,224,210,.26) !important;
    color: #dcf8f6 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 22px rgba(0,0,0,.14) !important;
}

    .sites-edit-page .site-edit-docs-upload .k-upload .k-upload-button:hover,
    .sites-edit-page .site-edit-docs-upload .k-upload .k-upload-button-wrap .k-button:hover,
    .sites-edit-page .site-edit-docs-upload .k-upload .k-button:hover,
    .sites-edit-page .site-edit-docs-upload .k-upload-button:hover {
        background: linear-gradient(90deg, rgba(20,224,210,.08), rgba(20,224,210,.03)), linear-gradient(180deg, #172127 0%, #1b262d 100%) !important;
        background-color: #172127 !important;
        border-color: rgba(20,224,210,.38) !important;
        color: #ffffff !important;
    }

    /* keep icon/text readable */
    .sites-edit-page .site-edit-docs-upload .k-upload .k-upload-button *,
    .sites-edit-page .site-edit-docs-upload .k-upload .k-upload-button-wrap .k-button *,
    .sites-edit-page .site-edit-docs-upload .k-upload .k-button *,
    .sites-edit-page .site-edit-docs-upload .k-upload-button * {
        color: inherit !important;
        fill: none !important;
        stroke: currentColor !important;
    }

/* upload zone can stay soft, but not the button */
.sites-edit-page .site-edit-docs-upload .k-upload {
    border: 1px dashed rgba(20,224,210,.24) !important;
    background: rgba(20,224,210,.04) !important;
    padding: 12px !important;
}

.sites-edit-page .site-edit-docs-upload .k-upload-dropzone,
.sites-edit-page .site-edit-docs-upload .k-dropzone {
    background: transparent !important;
    border: none !important;
}

/* =========================================================
   SITES EDIT - TAB CONTENT CONTAINER
========================================================= */

.sites-edit-page .site-edit-tabs.k-tabstrip > .k-content {
    padding: 20px !important;
    border: 1px solid rgba(20,224,210,.10) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.98), #f7fbfb 100%) !important;
    box-shadow: 0 12px 24px rgba(5,22,28,.06) !important;
    margin: 0 0 24px 0 !important;
}

    /* if loaded tab content has its own first/last block margins, keep things tidy */
    .sites-edit-page .site-edit-tabs.k-tabstrip > .k-content > *:first-child {
        margin-top: 0 !important;
    }

    .sites-edit-page .site-edit-tabs.k-tabstrip > .k-content > *:last-child {
        margin-bottom: 0 !important;
    }

.site-edit-docs-upload__header,
.site-edit-subsection__toolbar {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    overflow: hidden;
}

/* =========================================================
   ADMIN TOP BAR - FORCE TRUE STICKY/FIXED BEHAVIOUR
========================================================= */

.admin-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
}

/* because the topbar is now fixed, offset the page content */
.admin-body {
    padding-top: 74px !important;
}

/* keep the side nav starting below the fixed top bar */
.admin-nav {
    top: 74px !important;
    height: calc(100vh - 74px) !important;
}

/* keep content spacing sensible */
.admin-main {
    margin-top: 18px !important;
}

@media (min-width: 992px) {
    .admin-main {
        margin-top: 26px !important;
    }
}

/* =========================================================
   STATIONS EDIT PAGE - ADDITIONS
========================================================= */

.stations-edit-page .station-edit-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.stations-edit-page .station-edit-compact-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stations-edit-page .site-edit-field-label--compact {
    font-size: .82rem;
    color: #5c7674;
    padding-bottom: 5px;
}

.stations-edit-page .site-edit-subsection,
.stations-edit-page .site-edit-docs-upload {
    border-radius: 0;
}

.stations-edit-page .site-edit-docs-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.stations-edit-page .site-edit-grid tbody tr {
    cursor: pointer;
}

@media (max-width: 991.98px) {
    .stations-edit-page .station-edit-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   STATIONS EDIT - CONNECTORS / DOCUMENTS GRID HEADER FIX
   Force same header treatment as Sites grid
========================================================= */

/* grid shell */
.stations-edit-page #gridStationConnectors.k-grid,
.stations-edit-page #gridStationDocs.k-grid {
    border: 1px solid rgba(12,28,34,.10) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: none !important;
}

/* header containers */
.stations-edit-page #gridStationConnectors .k-grid-header,
.stations-edit-page #gridStationConnectors .k-grid-header-wrap,
.stations-edit-page #gridStationDocs .k-grid-header,
.stations-edit-page #gridStationDocs .k-grid-header-wrap {
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%) !important;
    background-color: #172127 !important;
    border-bottom: 1px solid rgba(20,224,210,.14) !important;
}

    /* header tables / thead / rows */
    .stations-edit-page #gridStationConnectors .k-grid-header table,
    .stations-edit-page #gridStationConnectors .k-grid-header-wrap table,
    .stations-edit-page #gridStationConnectors .k-grid-header thead,
    .stations-edit-page #gridStationConnectors .k-grid-header .k-table-thead,
    .stations-edit-page #gridStationConnectors .k-grid-header tr,
    .stations-edit-page #gridStationDocs .k-grid-header table,
    .stations-edit-page #gridStationDocs .k-grid-header-wrap table,
    .stations-edit-page #gridStationDocs .k-grid-header thead,
    .stations-edit-page #gridStationDocs .k-grid-header .k-table-thead,
    .stations-edit-page #gridStationDocs .k-grid-header tr {
        background: transparent !important;
        background-color: transparent !important;
    }

    /* actual header cells - old + new Kendo selectors */
    .stations-edit-page #gridStationConnectors .k-grid-header th,
    .stations-edit-page #gridStationConnectors .k-grid-header .k-header,
    .stations-edit-page #gridStationConnectors .k-grid-header .k-table-th,
    .stations-edit-page #gridStationConnectors .k-grid-header-wrap th,
    .stations-edit-page #gridStationConnectors .k-grid-header-wrap .k-header,
    .stations-edit-page #gridStationConnectors .k-grid-header-wrap .k-table-th,
    .stations-edit-page #gridStationDocs .k-grid-header th,
    .stations-edit-page #gridStationDocs .k-grid-header .k-header,
    .stations-edit-page #gridStationDocs .k-grid-header .k-table-th,
    .stations-edit-page #gridStationDocs .k-grid-header-wrap th,
    .stations-edit-page #gridStationDocs .k-grid-header-wrap .k-header,
    .stations-edit-page #gridStationDocs .k-grid-header-wrap .k-table-th {
        background: transparent !important;
        background-color: transparent !important;
        color: #dcf8f6 !important;
        border-color: rgba(255,255,255,.06) !important;
        font-size: .78rem !important;
        font-weight: 800 !important;
        letter-spacing: .04em !important;
        text-transform: uppercase !important;
        padding: 20px !important;
        line-height: 1.1 !important;
        box-shadow: none !important;
    }

        /* header links / inner spans */
        .stations-edit-page #gridStationConnectors .k-grid-header th .k-link,
        .stations-edit-page #gridStationConnectors .k-grid-header .k-header .k-link,
        .stations-edit-page #gridStationConnectors .k-grid-header .k-table-th .k-link,
        .stations-edit-page #gridStationConnectors .k-grid-header .k-column-title,
        .stations-edit-page #gridStationConnectors .k-grid-header .k-cell-inner,
        .stations-edit-page #gridStationDocs .k-grid-header th .k-link,
        .stations-edit-page #gridStationDocs .k-grid-header .k-header .k-link,
        .stations-edit-page #gridStationDocs .k-grid-header .k-table-th .k-link,
        .stations-edit-page #gridStationDocs .k-grid-header .k-column-title,
        .stations-edit-page #gridStationDocs .k-grid-header .k-cell-inner {
            color: #dcf8f6 !important;
            text-decoration: none !important;
            background: transparent !important;
            background-color: transparent !important;
            line-height: 1.1 !important;
        }

    /* sort icons */
    .stations-edit-page #gridStationConnectors .k-grid-header .k-sort-icon,
    .stations-edit-page #gridStationConnectors .k-grid-header .k-svg-icon,
    .stations-edit-page #gridStationDocs .k-grid-header .k-sort-icon,
    .stations-edit-page #gridStationDocs .k-grid-header .k-svg-icon {
        color: #8ea7a5 !important;
        fill: currentColor !important;
        stroke: currentColor !important;
    }

/* =========================================================
   USERS EDIT PAGE
========================================================= */

.users-edit-page .sites-edit-page-header__icon svg,
.users-edit-page .site-edit-card-header__icon svg {
    width: 18px;
    height: 18px;
}

.users-edit-page .users-edit-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #6d8583 50%), linear-gradient(135deg, #6d8583 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

.users-edit-page .site-edit-form-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.users-edit-page #pwdWrap {
    margin-top: 4px;
}

.users-edit-page .site-edit-help-text {
    margin-top: 2px;
}

@media (max-width: 991.98px) {
    .users-edit-page .site-edit-form-grid--two {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   LOGIN PAGE - FULL BACKGROUND HERO
========================================================= */
.auth-login-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: radial-gradient(900px 460px at 12% 8%, rgba(20,224,210,.07), transparent 58%), radial-gradient(900px 520px at 88% 92%, rgba(20,224,210,.05), transparent 55%), linear-gradient(180deg, #091218 0%, #0d171d 100%);
}

.auth-login-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.auth-login-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    filter: saturate(.92) brightness(.60);
    transform: scale(1.02);
}

.auth-login-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(6,12,16,.82) 0%, rgba(6,12,16,.60) 34%, rgba(6,12,16,.34) 62%, rgba(6,12,16,.56) 100%), linear-gradient(180deg, rgba(6,12,16,.28) 0%, rgba(6,12,16,.58) 100%);
}

.auth-login-bg-glow {
    position: absolute;
    inset: auto auto 8% 52%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20,224,210,.12) 0%, rgba(20,224,210,0) 72%);
    filter: blur(22px);
}

.auth-login-shell {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px clamp(24px, 5vw, 80px);
}

.auth-login-stage {
    width: min(1320px, 100%);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.auth-login-card {
    width: min(470px, 100%);
    padding: 34px 30px 26px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(17,28,34,.96) 0%, rgba(13,22,28,.93) 100%);
    border: 1px solid rgba(20,224,210,.18);
    box-shadow: 0 26px 60px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(12px);
}

.auth-login-brand-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 26px;
    padding-bottom: 18px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.auth-login-brand-logo {
    width: 100%;
    display: flex;
    justify-content: center;
}

    .auth-login-brand-logo img {
        display: block;
        width: auto;
        max-width: 178px;
        max-height: 52px;
        margin: 0 auto;
        filter: drop-shadow(0 0 0 rgba(20,224,210,0));
        animation: authLogoPulse 3.2s ease-in-out infinite;
    }

.auth-login-foot {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #748d8b;
    font-size: .84rem;
    text-align: center;
}
.auth-login-badge {
    display: none !important;
}

.auth-login-card-copy {
    text-align: center;
}

    .auth-login-card-copy h1 {
        margin: 0;
        color: #f4fffe;
        font-size: 2rem;
        line-height: 1.05;
        font-weight: 700;
        letter-spacing: -.02em;
    }

    .auth-login-card-copy p {
        margin: 12px auto 0 auto;
        color: #8ea7a5;
        font-size: .98rem;
        line-height: 1.6;
        max-width: 40ch;
        text-align: center;
    }

.auth-login-alert {
    display: none;
    margin: 18px 0 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    color: #ffe7ec;
    background: rgba(176,0,32,.14);
    border: 1px solid rgba(255,107,138,.24);
    font-size: .92rem;
}

    .auth-login-alert:empty {
        display: none;
    }

    .auth-login-alert:not(:empty) {
        display: block;
    }

.auth-login-form {
    margin-top: 22px;
}

.auth-login-field {
    margin-bottom: 18px;
}

.auth-login-label {
    display: block;
    margin: 0 0 8px 0;
    color: #d7edeb;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.auth-login-input-shell {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 54px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

    .auth-login-input-shell:focus-within {
        border-color: rgba(20,224,210,.34);
        background: rgba(255,255,255,.06);
        box-shadow: 0 0 0 4px rgba(20,224,210,.10);
    }

    .auth-login-input-shell.is-invalid {
        border-color: rgba(255,107,138,.42) !important;
        box-shadow: 0 0 0 4px rgba(255,107,138,.10) !important;
    }

.auth-login-input-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    flex: 0 0 46px;
    color: #6ea09c;
}

    .auth-login-input-icon svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-login-input {
    width: 100%;
    height: 52px;
    border: none;
    outline: none;
    background: transparent !important;
    color: #f4fffe;
    padding: 0 14px 0 0;
    font-size: .98rem;
    box-shadow: none !important;
}

    .auth-login-input::placeholder {
        color: #6f8886;
    }

    .auth-login-input:-webkit-autofill,
    .auth-login-input:-webkit-autofill:hover,
    .auth-login-input:-webkit-autofill:focus,
    .auth-login-input:-webkit-autofill:active {
        -webkit-text-fill-color: #f4fffe !important;
        transition: background-color 99999s ease-in-out 0s;
        box-shadow: 0 0 0 1000px transparent inset !important;
        background: transparent !important;
        caret-color: #f4fffe;
    }

.auth-login-toggle {
    width: 40px;
    height: 40px;
    margin-right: 6px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #6ea09c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .auth-login-toggle:hover {
        background: rgba(20,224,210,.08);
        color: #d8fffc;
    }

    .auth-login-toggle svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-login-page .auth-hint {
    display: block;
    margin-top: 7px;
    color: #ff8ca5;
    font-size: .84rem;
}

.auth-login-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    margin-bottom: 20px;
}

.auth-login-remember {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #b9d2d0;
    font-size: .92rem;
    font-weight: 600;
}

.auth-login-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #14e0d2;
}

.auth-login-link {
    color: #7fd3cb;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 700;
}

    .auth-login-link:hover {
        color: #d7fffc;
    }

.auth-login-btn {
    width: 100%;
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(20,224,210,.28);
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%);
    color: #dcf8f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 14px 28px rgba(0,0,0,.20);
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .08s ease, box-shadow .18s ease;
}

    .auth-login-btn:hover {
        border-color: rgba(20,224,210,.42);
        background: linear-gradient(90deg, rgba(20,224,210,.08), rgba(20,224,210,.03)), linear-gradient(180deg, #172127 0%, #1b262d 100%);
        color: #ffffff;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 16px 30px rgba(0,0,0,.24);
    }

    .auth-login-btn:active {
        transform: translateY(1px);
    }

    .auth-login-btn[disabled] {
        opacity: .82;
        cursor: not-allowed;
    }

.auth-login-btn-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-login-btn.is-busy {
    position: relative;
}

    .auth-login-btn.is-busy::after {
        content: "";
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid currentColor;
        border-top-color: transparent;
        animation: spin .8s linear infinite;
    }

@media (max-width: 900px) {
    .auth-login-shell {
        padding: 24px 18px;
    }

    .auth-login-stage {
        justify-content: center;
    }

    .auth-login-card {
        width: min(520px, 100%);
        padding: 28px 22px 22px;
        border-radius: 24px;
    }

    .auth-login-bg-image {
        object-position: center center;
    }

    .auth-login-bg-overlay {
        background: linear-gradient(180deg, rgba(6,12,16,.72) 0%, rgba(6,12,16,.62) 40%, rgba(6,12,16,.78) 100%);
    }
}

@media (max-width: 640px) {
    .auth-login-shell {
        padding: 14px;
    }

    .auth-login-card {
        padding: 22px 18px 18px;
        border-radius: 22px;
    }

    .auth-login-brand-row,
    .auth-login-meta-row,
    .auth-login-foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .auth-login-card-copy h1 {
        font-size: 1.8rem;
    }
}

@keyframes authLogoPulse {
    0% {
        filter: drop-shadow(0 0 0 rgba(20,224,210,0));
    }

    50% {
        filter: drop-shadow(0 0 8px rgba(20,224,210,.20)) drop-shadow(0 0 18px rgba(20,224,210,.12));
    }

    100% {
        filter: drop-shadow(0 0 0 rgba(20,224,210,0));
    }
}

.auth-login-page--forgot .auth-login-bg-image {
    object-position: center center;
}

.auth-login-shell--centered {
    justify-content: center;
}

.auth-login-stage--centered {
    justify-content: center;
}

.auth-login-card--forgot {
    width: min(540px, 100%);
}

.auth-login-card-copy--forgot p {
    max-width: 46ch;
}

.auth-login-helper-panel {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.03) 100%);
    border: 1px solid rgba(20,224,210,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.auth-login-helper-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20,224,210,.10);
    color: #8debe4;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

    .auth-login-helper-icon svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-login-helper-copy {
    display: grid;
    gap: 4px;
    color: #bfd8d6;
    font-size: .91rem;
    line-height: 1.55;
}

    .auth-login-helper-copy strong {
        color: #f1fffd;
        font-size: .92rem;
        font-weight: 700;
    }

    .auth-login-helper-copy span {
        color: #8ea7a5;
    }

.auth-login-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
}

.auth-login-btn--auto {
    width: auto;
    min-width: 210px;
    padding: 0 22px;
}

.auth-login-link--subtle {
    color: #9ec5c1;
}

    .auth-login-link--subtle:hover {
        color: #e6fffc;
    }

.auth-login-foot--centered {
    justify-content: center;
}

@media (max-width: 640px) {
    .auth-login-page--forgot .auth-login-brand-row,
    .auth-login-page--forgot .auth-login-foot {
        flex-direction: row;
        align-items: center;
    }

    .auth-login-helper-panel {
        grid-template-columns: 1fr;
    }

    .auth-login-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .auth-login-btn--auto {
        width: 100%;
        min-width: 0;
    }

    .auth-login-link--subtle {
        width: 100%;
        text-align: center;
    }
}

.auth-login-page--forgot .auth-login-bg-image {
    object-position: center center;
}

.auth-login-shell--centered {
    justify-content: center;
}

.auth-login-stage--centered {
    justify-content: center;
}

.auth-login-card--forgot {
    width: min(540px, 100%);
}

.auth-login-card-copy--forgot p {
    max-width: 46ch;
}

.auth-login-helper-panel {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.03) 100%);
    border: 1px solid rgba(20,224,210,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.auth-login-helper-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20,224,210,.10);
    color: #8debe4;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

    .auth-login-helper-icon svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-login-helper-copy {
    display: grid;
    gap: 4px;
    color: #bfd8d6;
    font-size: .91rem;
    line-height: 1.55;
}

    .auth-login-helper-copy strong {
        color: #f1fffd;
        font-size: .92rem;
        font-weight: 700;
    }

    .auth-login-helper-copy span {
        color: #8ea7a5;
    }

.auth-login-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
}

.auth-login-btn--auto {
    width: auto;
    min-width: 210px;
    padding: 0 22px;
}

.auth-login-link--subtle {
    color: #9ec5c1;
}

    .auth-login-link--subtle:hover {
        color: #e6fffc;
    }

.auth-login-foot--centered {
    justify-content: center;
}

@media (max-width: 640px) {
    .auth-login-page--forgot .auth-login-brand-row,
    .auth-login-page--forgot .auth-login-foot {
        flex-direction: row;
        align-items: center;
    }

    .auth-login-helper-panel {
        grid-template-columns: 1fr;
    }

    .auth-login-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .auth-login-btn--auto {
        width: 100%;
        min-width: 0;
    }

    .auth-login-link--subtle {
        width: 100%;
        text-align: center;
    }
}

:root {
    --kendo-color-primary-subtle: #d7e9e7 !important;
    --kendo-color-primary-subtle-hover: #c3deda !important;
    --kendo-color-primary-subtle-active: #aed1cc !important;
    --kendo-color-primary: #245f5b !important;
    --kendo-color-primary-hover: #1d4f4b !important;
    --kendo-color-primary-active: #163f3c !important;
    --kendo-color-primary-emphasis: rgba(36, 95, 91, 0.35) !important;
    --kendo-color-primary-on-subtle: #173836 !important;
    --kendo-color-on-primary: #ffffff !important;
    --kendo-color-primary-on-surface: #245f5b !important;
}

.auth-login-page--reset .auth-login-bg-image {
    object-position: center center;
}

.auth-login-shell--centered {
    justify-content: center;
}

.auth-login-stage--centered {
    justify-content: center;
}

.auth-login-card--reset {
    width: min(560px, 100%);
}

.auth-login-card-copy--reset p {
    max-width: 44ch;
}

.auth-login-helper-panel {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.03) 100%);
    border: 1px solid rgba(20,224,210,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.auth-login-helper-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20,224,210,.10);
    color: #8debe4;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

    .auth-login-helper-icon svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-login-helper-copy {
    display: grid;
    gap: 4px;
    color: #bfd8d6;
    font-size: .91rem;
    line-height: 1.55;
}

    .auth-login-helper-copy strong {
        color: #f1fffd;
        font-size: .92rem;
        font-weight: 700;
    }

    .auth-login-helper-copy span {
        color: #8ea7a5;
    }

.auth-login-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
}

.auth-login-btn--auto {
    width: auto;
    min-width: 210px;
    padding: 0 22px;
}

.auth-login-link--subtle {
    color: #9ec5c1;
}

    .auth-login-link--subtle:hover {
        color: #e6fffc;
    }

.auth-login-foot--centered {
    justify-content: center;
}

@media (max-width: 640px) {
    .auth-login-page--reset .auth-login-brand-row,
    .auth-login-page--reset .auth-login-foot {
        flex-direction: row;
        align-items: center;
    }

    .auth-login-helper-panel {
        grid-template-columns: 1fr;
    }

    .auth-login-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .auth-login-btn--auto {
        width: 100%;
        min-width: 0;
    }

    .auth-login-link--subtle {
        width: 100%;
        text-align: center;
    }
}

.k-table-thead, .k-table-header, .k-table-group-sticky-header {
    border-color: var(--kendo-color-border, rgba(33, 37, 41, 0.13));
    color: var(--kendo-color-on-app-surface, #212529);
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%) !important;
}

.k-pager {
    
    background-color: #eaf6f6!important;
}

.k-grid-header {
    background: linear-gradient(180deg, #172127 0%, #1b262d 100%)!important;
    background-color: rgba(0, 0, 0, 0)!important;
    border-bottom: 1px solid rgba(20,224,210,.14)!important;
}

.k-grid {
    width: 100%;
}

    .k-grid .k-grid-content {
        overflow-x: auto;
    }

        .k-grid .k-grid-header-wrap table,
        .k-grid .k-grid-content table {
            min-width: 100%;
        }