:root {
    --orange: #f97316;
    --orange-dark: #e7bd11;
    --orange-light: #fff4ed;
    --orange-mid: #fed7aa;
    --navy: #0f1b35;
    --navy-2: #162040;
    --navy-3: #1e2d52;
    --surface: #f5f6fa;
    --surface-2: #ffffff;
    --surface-3: #eef0f6;
    --border: #e2e5ef;
    --text: #0f1b35;
    --text-2: #4a5578;
    --text-muted: #8a94b0;
    --sidebar-w: 260px;
    --sidebar-mini: 100px;
    --header-h: 64px;
    --footer-h: 30px;
    --radius: 12px;
    --sg: #769952;
    --sgb: #dcfce7;
    --sgbr: #86efac;
    --sy: #eab308;
    --syb: #fef9c3;
    --sybr: #fde047;
    --sr: #ef4444;
    --srb: #fee2e2;
    --srbr: #fca5a5;
    --tr: .22s cubic-bezier(.4, 0, .2, 1);
    --font: 'Poppins';
    --font-mono: 'Poppins';
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body,
html {
    font-family: var(--font);
    background: var(--surface);
    color: var(--text);
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--surface);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 99px;
}

.invalid-feedback {
    margin-top: 0;
    transform: translate(10px, -5px);
    font-size: 12px;
}

.nx-header {
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    right: 0;
    height: var(--header-h);
    border-bottom: 1px solid #8080804f;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem 0 0;
    z-index: 1050;
    box-shadow: 0 2px 16px rgba(15, 27, 53, .22);
}

.nx-logo-area {
    width: var(--sidebar-w);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 0 1.1rem;
    transition: width var(--tr);
    /* overflow: hidden; */
}

body.sidebar-mini .nx-logo-area {
    width: var(--sidebar-mini);
    justify-content: center;
    padding: 0;
}

.nx-logo-box {
  width: 63px;
    height: 63px;
    border-radius: 9px;
    display: grid;
    place-items: center;
}

.nx-logo-box i {
    color: #fff;
    font-size: 1rem;
}

.nx-logo-text {
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
    letter-spacing: -.01em;
    white-space: nowrap;
    transition: opacity var(--tr), max-width var(--tr);
    max-width: 200px;
    overflow: hidden;
}

body.sidebar-mini .nx-logo-text {
    opacity: 0;
    max-width: 0;
}

.nx-mini-btn {
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: #769952;
    font-size: 20px;
    cursor: pointer;
    transition: all var(--tr);
    flex-shrink: 0;
    margin-left: auto;
}

body.sidebar-mini .nx-mini-btn {
    margin-left: 0;
    transform: translateX(45px);
}

.nx-header-center {
    flex: 1;
    padding: 0 1.25rem;
}

.nx-search {
    position: relative;
    max-width: 360px;
}

.nx-search input {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 999px;
    padding: .45rem 1rem .45rem 2.4rem;
    color: #fff;
    font-size: .84rem;
    font-family: var(--font);
    width: 100%;
    transition: border-color var(--tr), background var(--tr);
}

.nx-search input::placeholder {
    color: rgba(255, 255, 255, .32);
}

.nx-search input:focus {
    outline: none;
    border-color: var(--sg);
    background: rgba(255, 255, 255, .11);
}

.nx-search>i {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .32);
    font-size: .9rem;
}

.nx-header-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.nx-hbtn {
    width: 36px;
    height: 36px;
    background: rgb(229 240 237);
    border: 1px solid rgb(19 122 94);
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: rgb(19 122 94);
    font-size: .95rem;
    cursor: pointer;
    position: relative;
    transition: all var(--tr);
    text-decoration: none;
}

.nx-hbtn:hover {
    background: rgba(249, 115, 22, .18);
    border-color: var(--sg);
    color: var(--sg);
}

.nx-dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 6px;
    height: 6px;
    background: var(--sg);
    border-radius: 50%;
    border: 1.5px solid var(--navy);
}

.nx-avatar {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--sg) 0%, #f43f5e 100%);
    display: grid;
    place-items: center;

    font-size: .7rem;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, .15);
    transition: border-color var(--tr);
    margin-left: .25rem;
}

.nx-avatar:hover {
    border-color: var(--sg);
}

.nx-sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    width: var(--sidebar-w);
    height: calc(100vh - var(--header-h));
    background: #ffffff;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #8080804f;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1040;
    transition: width var(--tr), transform var(--tr);
}

body.sidebar-mini .nx-sidebar {
    width: var(--sidebar-mini);
}

.nx-nav-section {
    padding: 1.1rem .75rem .4rem;
}

.nx-nav-label {
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 0 .5rem;
    margin-bottom: .5rem;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--tr);
    margin-top: 15px;
}

body.sidebar-mini .nx-nav-label {
    opacity: 0;
}

.nx-nav-custom-drodown-items {
    position: relative !important;
    transform: translate3d(12px, 0px, 0px) !important;
    border: 0;
}

.nx-nav-custom-drodown-items .dropdown-item {
    color: #2d2b2bf0;
    text-decoration: none;
    font-size: .85rem;
    margin-bottom: 6px;
}

.nx-nav-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .62rem .75rem;
    border-radius: 10px;
    color: #494949f0;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 500;
    transition: all var(--tr);
    position: relative;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
}

.nx-nav-item i {
    font-size: 1rem;
    width: 20px;
    flex-shrink: 0;
    text-align: center;
}

.nx-nav-item:hover {
    background: rgb(235 235 235);
    color: rgb(19 122 94);
}

.nx-nav-item.active {
    background: var(--sg);
    color: #fff;
    font-weight: 600;
}

.nx-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    background: #fff;
    border-radius: 0 3px 3px 0;
}

.nx-nav-text {
    transition: opacity var(--tr), max-width var(--tr);
    max-width: 200px;
    overflow: hidden;
}

body.sidebar-mini .nx-nav-text {
    opacity: 0;
    max-width: 0;
}

.nx-nav-badge {
    margin-left: auto;
    font-size: .6rem;
    background: var(--sg);
    color: #fff;
    border-radius: 999px;
    padding: .1rem .45rem;
    font-weight: 700;

    flex-shrink: 0;
    transition: opacity var(--tr);
}

body.sidebar-mini .nx-nav-badge {
    opacity: 0;
}

.nx-sidebar-footer {
    margin-top: auto;
    padding: .85rem .75rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.nx-user-card {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .65rem;
    border-radius: 10px;
    transition: background var(--tr);
    cursor: pointer;
    overflow: hidden;
}

.nx-user-card:hover {
    background: rgba(255, 255, 255, .07);
}

.uc-avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--sg), #f43f5e);
    display: grid;
    place-items: center;
    font-size: .65rem;
    font-weight: 700;
    color: #fff;

    flex-shrink: 0;
}

.uc-info {
    min-width: 0;
    transition: opacity var(--tr), max-width var(--tr);
    max-width: 160px;
}

body.sidebar-mini .uc-info {
    display: none;
}

body.sidebar-mini .uc-chevron {
    display: none;
}

.uc-name {
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

.uc-role {
    font-size: .68rem;
    color: rgba(255, 255, 255, .38);
}

.nx-main {
    margin-left: var(--sidebar-w);
    margin-top: var(--header-h);
    min-height: calc(100vh - var(--header-h) - var(--footer-h));
    padding: 2rem 0;
    transition: margin-left var(--tr);
}

body.sidebar-mini .nx-main {
    margin-left: var(--sidebar-mini);
}

.nx-footer {
    margin-left: var(--sidebar-w);
    height: var(--footer-h);
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    font-size: .75rem;
    color: var(--text-muted);
    transition: margin-left var(--tr);
}

body.sidebar-mini .nx-footer {
    margin-left: var(--sidebar-mini);
}

.nx-footer a {
    color: var(--sg);
    text-decoration: none;
}

.nx-footer a:hover {
    text-decoration: underline;
}

.nx-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 27, 53, .45);
    z-index: 1030;
}

.nx-overlay.show {
    display: block;
}

.mob-toggle {
    display: none;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 9px;
    place-items: center;
    color: #94a3b8;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all var(--tr);
    margin-right: .5rem;
    flex-shrink: 0;
}

.mob-toggle:hover {
    border-color: var(--sg);
    color: var(--sg);
}

.nx-header-actions .dropdown {
    position: relative;
}

.nx-header-actions .nx-user-card {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .65rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background .22s cubic-bezier(.4, 0, .2, 1);
    border: 1px solid rgba(255, 255, 255, .11);
    background: rgb(229 240 237);
}

.nx-header-actions .nx-user-card:hover {
    background: rgba(249, 115, 22, .18);
    border-color: #f97316;
}

.nx-header-actions .uc-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    display: grid;
    place-items: center;
    font-size: .65rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.nx-header-actions .uc-info {
    min-width: 0;
    line-height: 1.3;
}

.nx-header-actions .uc-name {
    font-size: .8rem;
    font-weight: 600;
    color: #000;
    white-space: nowrap;
}

.nx-header-actions .uc-role {
    font-size: .65rem;
    color: #000;
    white-space: nowrap;
}

.nx-header-actions .uc-chevron {
    font-size: .7rem;
    color: rgba(255, 255, 255, .4);
    flex-shrink: 0;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.nx-header-actions .dropdown.show .uc-chevron {
    transform: rotate(180deg);
}

.sidebar-mini .nx-user-dropdown {
    transform: translate3d(-100px, 0px, 0) !important;
}

.nx-user-dropdown {
    min-width: 200px;
    background: #fff;
    border: 1px solid #e2e5ef;
    border-radius: 12px;
    padding: .4rem;
    box-shadow: 0 8px 30px rgba(15, 27, 53, .14), 0 2px 8px rgba(15, 27, 53, .08);
    right: 0;
    left: auto !important;
    bottom: auto !important;
    top: calc(100% + 8px) !important;
    transform: translate3d(-22px, 0px, 0) !important;
    inset: unset !important;
    position: absolute !important;
}

.nx-dd-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .65rem;
    border-radius: 8px;
    color: #4a5578;
    font-size: .84rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .22s cubic-bezier(.4, 0, .2, 1), color .22s cubic-bezier(.4, 0, .2, 1);
}

.nx-dd-item:hover {
    background: #eef0f6;
    color: #0f1b35;
}

.nx-dd-logout {
    color: #dc2626;
}

.nx-dd-logout:hover {
    background: #fef2f2;
    color: #dc2626;
}

.nx-dd-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    font-size: .85rem;
    flex-shrink: 0;
}

.nx-dd-divider {
    margin: .3rem 0;
    border-color: #e2e5ef;
}

.login_body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: #f5f6fa;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-wrap {
    width: 100%;
    max-width: 450px;
    padding: 1rem;
}

.login-card {
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    box-shadow: 0 4px 24px rgba(15, 27, 53, .08);
}

.login-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 2rem;
}



.login-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0f1b35;
    margin-bottom: .3rem;
}

.login-sub {
    font-size: .84rem;
    color: #8a94b0;
    margin-bottom: 1.75rem;
}

.form-label {
    font-size: .82rem;
    font-weight: 600;
    color: #4a5578;
    margin-bottom: .4rem;
}

.form-control {
    border: 1.5px solid #e2e5ef;
    border-radius: 10px;
    padding: .65rem .9rem;
    font-size: .875rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #0f1b35;
    transition: border-color .2s, box-shadow .2s;
}

.form-control:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .12);
    outline: none;
}

.form-control::placeholder {
    color: #b0b9d0;
}

.input-group .form-control {
    border-right: none;
    border-radius: 10px 0 0 10px;
}

.input-group-text {
    background: #fff;
    border: 1.5px solid #e2e5ef;
    border-left: none;
    border-radius: 0 10px 10px 0;
    color: #b0b9d0;
    cursor: pointer;
    padding: 0 .9rem;
    transition: color .2s;
}

.input-group-text:hover {
    color: #f97316;
}

.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text {
    border-color: #f97316;
}

.input-group:focus-within .form-control {
    box-shadow: none;
}

.input-group:focus-within .input-group-text {
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .12);
}

.btn-login {
    width: 100%;
    background: #f97316;
    border: none;
    border-radius: 10px;
    padding: .72rem;
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 14px rgba(249, 115, 22, .3);
    margin-top: .25rem;
}

.btn-login:hover {
    background: #e7bd11;
    box-shadow: 0 6px 18px rgba(249, 115, 22, .38);
    transform: translateY(-1px);
}

.btn-login:active {
    transform: translateY(0);
}

.login-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: .75rem;
    color: #b0b9d0;
}

@media (max-width: 576px) {
    .nx-header-actions .uc-info {
        display: none;
    }

    .nx-header-actions .uc-chevron {
        display: none;
    }
}

@media (max-width: 991px) {
    .nx-sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-w) !important;
    }

    .nx-sidebar.mob-open {
        transform: translateX(0);
    }

    .nx-user-dropdown {
        transform: translate3d(-150px, 0px, 0) !important;
    }

    .nx-main,
    .nx-footer {
        margin-top: 5px;
        margin-left: 0 !important;
        padding: 10px;
    }

    .nx-logo-area {
        width: auto !important;
    }

    .nx-logo-text {
        opacity: 1 !important;
        max-width: 200px !important;
    }

    .nx-search {
        display: none;
    }

    .nx-mini-btn {
        display: none;
    }

    .mob-toggle {
        display: grid;
    }
}


@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

.input-group .form-control.is-invalid {
    border-color: #dc3545;
    z-index: 1;
}

.input-group .form-control.is-valid {
    border-color: #198754;
}

.input-group:has(.form-control.is-invalid) .input-group-text {
    border-color: #dc3545;
}

.input-group:has(.form-control.is-valid) .input-group-text {
    border-color: #198754;
}

.swal2-html-container h4 {
    font-weight: bold;
}


















.p1-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.station-card {
    background: var(--surface);
    border: 1px solid var(--orange-dark);
    border-radius: 18px;
    padding: 1.4rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.sc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.sc-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--orange-glow);
    border: 1.5px solid rgba(249, 115, 22, .25);
    display: grid;
    place-items: center;
    color: var(--sg);
    font-size: 1rem;
}

.sc-cu {
    font-size: 14px;
    font-weight: 700;
    color: var(--sg);
    margin-bottom: .25rem;
}

.sc-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: .15rem;
}

.sc-sub {
    font-size: 14px;
    width: max-content;
    color: white;
    border-radius: 6px;
    padding: 2px 3px;
    background-color: var(--sg);
}

.sc-divider {
    height: 1px;
    background: var(--sg);
    margin: 1rem 0;
}

.sc-stats {
    display: flex;
    gap: .5rem;
}

.sc-stat {
    flex: 1;
    text-align: center;
}



.sc-stat-val {
    font-size: 1.3rem;
    font-weight: 600;
}

.sc-stat-val.g {
    color: #4ade80;
}

.sc-stat-val.y {
    color: #facc15;
}

.sc-stat-val.r {
    color: #f87171;
}

.sc-stat-lbl {
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: black;
    margin-top: .15rem;
}

.sc-bar {
    display: flex;
    height: 4px;
    border-radius: 99px;
    overflow: hidden;
    margin-top: .85rem;
    gap: 2px;
}











.cu-section-hdr {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .85rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--border);
}

.cu-section-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--orange-glow);
    border: 1.5px solid rgba(249, 115, 22, .25);
    display: grid;
    place-items: center;
    color: var(--sg);
    font-size: .85rem;
}

.cu-section-name {
    font-size: 16px;
    font-weight: 600;
}

.cu-section-sub {
    font-size: 14px;
}

.cu-section-chips {
    margin-left: auto;
    display: flex;
    gap: .4rem;
}

.cu-mini-chip.g {
    background: rgba(34, 197, 94, .15);
    color: #4ade80;
}

.cu-mini-chip.y {
    background: rgba(234, 179, 8, .15);
    color: #facc15;
}

.cu-mini-chip.r {
    background: rgba(239, 68, 68, .15);
    color: #f87171;
}

.cu-mini-chip {
    font-size: .62rem;
    font-weight: 700;
    padding: .15rem .45rem;
    border-radius: 999px;
}

.dock-card {
    border-radius: 12px;
    padding: .75rem .7rem;
    cursor: pointer;
    transition: all var(--tr);
    position: relative;
    overflow: visible;
    border: 1.5px solid transparent;
}

.dock-card:hover {
    transform: translateY(-3px);
    z-index: 50;
}

.dock-card.green {
    background: rgba(34, 197, 94, .08);
    border-color: rgba(34, 197, 94, .2);
}

.dock-card.yellow {
    background: rgba(234, 179, 8, .08);
    border-color: rgba(234, 179, 8, .2);
}

.dock-card.red {
    background: rgba(239, 68, 68, .08);
    border-color: rgba(239, 68, 68, .2);
}

.dc-top {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .45rem;
}

.dock-card.engaged .dc-eng {
    background: rgba(34, 197, 94, .15);
    color: #4ade80;
}

.dock-card.yellow .dc-dot {
    background: #eab308;
}

.dock-card.green .dc-dot {
    background: #22c55e;
}

.dock-card.red .dc-dot {
    background: #ef4444;
}

.dc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dc-eng {
    margin-top: .35rem;
    font-size: .55rem;
    font-weight: 700;
    padding: .1rem .35rem;
    border-radius: 999px;
    display: inline-block;
}

.dock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .65rem;
}

.dock-tooltip {
    position: absolute;
    /* bottom: calc(100% + 8px); */
    left: 50%;
    right: 50%;
    transform: translateX(-50%) translateY(-50%) scale(.96);
    width: 360px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
    z-index: 500;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
    overflow: hidden;
}

.dock-card:hover .dock-tooltip {
    opacity: 1;
    transform: translateX(-0%) translateY(-10px) scale(1);
    pointer-events: auto;
}

.tt-hd {
    padding: .65rem .85rem .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .03);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tt-id {
    font-size: .72rem;
    font-weight: 600;
}

.tt-pill.green {
    background: rgba(34, 197, 94, .2);
    color: #4ade80;
}

.tt-pill {
    font-size: .58rem;
    font-weight: 700;
    padding: .12rem .42rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: .25rem;
}

.tt-body {
    padding: .5rem .85rem;
}

.tt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .28rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    font-size: 14px;
}

.tt-rv {
    font-size: 14px;
    font-weight: 700;
}

.tt-ft {
    padding: .5rem .85rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    gap: .35rem;
}

.tt-btn {
    color: #0f1b35;
    flex: 1;
    padding: .35rem;
    border-radius: 8px;
    font-size: .68rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid #dc2626;
    transition: all var(--tr);
}

.tt-btn.primary {
    background: var(--sg);
    border-color: var(--sg);
    color: #fff;
}

.dc-num {
    font-size: 14px;
}


.st-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}

.st-summary-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);

    margin-right: auto;
}

.st-pill {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 700;
    padding: .35rem .8rem;
    border-radius: 999px;
}

.st-pill.g {
    background: var(--sgb);
    color: #166534;
}

.st-pill.y {
    background: var(--syb);
    color: #854d0e;
}

.st-pill.r {
    background: var(--srb);
    color: #991b1b;
}

.st-pill.t {
    background: var(--surface-3);
    color: var(--text-2);
}

.st-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.g .st-pill-dot {
    background: var(--sg);
}

.y .st-pill-dot {
    background: var(--sy);
}

.r .st-pill-dot {
    background: var(--sr);
}

.st-page-hdr {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.st-page-title {
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -.02em;
}

.st-page-sub {
    font-size: .83rem;
    color: var(--text-muted);
    margin-top: .15rem;
}

.st-hdr-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--orange-light);
    border: 1.5px solid var(--orange-mid);
    display: grid;
    place-items: center;
    color: var(--sg);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.st-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.1rem;
}

.st-card {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 1.35rem 1.3rem 1.1rem;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
    position: relative;
    overflow: hidden;
}

.st-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sg), #f43f5e);
    opacity: 0;
    transition: opacity var(--tr);
}

.st-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(15, 27, 53, .1);
    border-color: var(--orange-mid);
}

.st-card:hover::before {
    opacity: 1;
}

.st-card.has-err {
    border-color: var(--srbr);
}

.st-card.has-err::before {
    background: linear-gradient(90deg, var(--sr), var(--sg));
    opacity: .5;
}

.st-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.st-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--orange-light);
    border: 1.5px solid var(--orange-mid);
    display: grid;
    place-items: center;
    color: var(--sg);
    font-size: .95rem;
}

.st-card-badge {
    font-size: .65rem;
    font-weight: 700;

    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-2);
    border: 1px solid var(--border);
}

.st-card-cu {
    font-size: .72rem;
    font-weight: 700;
    color: var(--sg);

    letter-spacing: .04em;
    margin-bottom: .2rem;
}

.st-card-name {
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: .6rem;
    letter-spacing: -.01em;
}

.st-dock-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 1rem;
}

.st-dock-dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
}

.st-dock-dot.green {
    background: var(--sg);
    opacity: .85;
}

.st-dock-dot.yellow {
    background: var(--sy);
    opacity: .85;
}

.st-dock-dot.red {
    background: var(--sr);
    opacity: .85;
}

.st-card-divider {
    height: 1px;
    background: var(--border);
    margin: .9rem 0;
}

.st-card-stats {
    display: flex;
    gap: .5rem;
}

.st-card-stat {
    flex: 1;
    text-align: center;
}

.st-card-stat-val {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: .2rem;
}

.st-card-stat-val.g {
    color: var(--sg);
}

.st-card-stat-val.y {
    color: var(--sy);
}

.st-card-stat-val.r {
    color: var(--sr);
}

.st-card-stat-lbl {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);

}

.st-progress {
    display: flex;
    height: 5px;
    border-radius: 99px;
    overflow: hidden;
    gap: 2px;
    margin-top: .85rem;
}

.st-progress-seg {
    border-radius: 99px;
}

.back_btn:hover,
.back_btn {
    border: 1px solid black;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: grid;
    place-content: center;
}

.sd-page-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.sd-page-hdr-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sd-hdr-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--orange-light);
    border: 1.5px solid var(--orange-mid);
    display: grid;
    place-items: center;
    color: var(--sg);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.sd-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -.02em;
}

.sd-page-sub {
    font-size: .82rem;
    color: var(--text-muted);
    margin-top: .2rem;

}

.sd-hdr-actions {
    display: flex;
    gap: .6rem;
    align-items: center;
}

.sd-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1rem;
    border-radius: 9px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    text-decoration: none;
    transition: all var(--tr);
    font-family: var(--font);
}

.sd-btn:hover {
    border-color: var(--sg);
    color: var(--sg);
    background: var(--orange-light);
}

.sd-btn.primary {
    background: var(--sg);
    border-color: var(--sg);
    color: #fff;
    box-shadow: 0 4px 14px rgba(249, 115, 22, .28);
}

.sd-btn.primary:hover {
    background: var(--orange-dark);
    border-color: var(--orange-dark);
    color: #fff;
}

.sd-cu-wrap {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.35rem 1.35rem 1.5rem;
    margin-bottom: 1.25rem;
}

.sd-cu-wrap .cu-section-hdr {
    margin-bottom: 1rem;
}

.tt-pill.yellow {
    background: rgba(234, 179, 8, .2);
    color: #ca8a04;
}

.tt-pill.red {
    background: rgba(239, 68, 68, .2);
    color: #dc2626;
}

.dc-id {
    font-size: .6rem;

    color: var(--text-muted);
    margin-top: .15rem;
}

.dock-card.yellow .dc-eng {
    background: rgba(234, 179, 8, .15);
    color: #ca8a04;
}

.dock-card.red .dc-eng {
    background: rgba(239, 68, 68, .12);
    color: #dc2626;
}

.dock-card.green .dc-eng {
    background: rgba(34, 197, 94, .15);
    color: #16a34a;
}

.sd-filter-bar {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.sd-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    transition: all var(--tr);
    font-family: var(--font);
}

.sd-filter-chip:hover,
.sd-filter-chip.active {
    border-color: var(--sg);
    color: var(--sg);
    background: var(--orange-light);
}

.sd-filter-chip .chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.sd-filter-chip.green-chip.active {
    border-color: var(--sg);
    color: #166534;
    background: var(--sgb);
}

.sd-filter-chip.yellow-chip.active {
    border-color: var(--sy);
    color: #854d0e;
    background: var(--syb);
}

.sd-filter-chip.red-chip.active {
    border-color: var(--sr);
    color: #991b1b;
    background: var(--srb);
}

.dash-stat-card {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 1.35rem 1.4rem 1.1rem;
    position: relative;
    overflow: hidden;
    transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
    height: 100%;
}

.dash-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(15, 27, 53, .10);
    border-color: var(--orange-mid);
}

.dsc-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.dsc-icon.orange {
    background: var(--orange-light);
    border: 1.5px solid var(--orange-mid);
    color: var(--sg);
}

.dsc-icon.red {
    background: #ff180014;
    border: 1.5px solid #ff1800;
    color: #ff1800;
}

.dsc-icon.green {
    background: var(--sgb);
    border: 1.5px solid var(--sgbr);
    color: var(--sg);
}

.dsc-icon.blue {
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    color: #3b82f6;
}

.dsc-icon.purple {
    background: #f5f3ff;
    border: 1.5px solid #ddd6fe;
    color: #8b5cf6;
}

.dsc-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #515971;

}

.dsc-value {
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -.03em;
    line-height: 1;
    margin: .5rem 0 .65rem;
}

.dsc-pill {
    font-size: .67rem;
    font-weight: 700;
    padding: .18rem .55rem;
    border-radius: 999px;

}

.dsc-pill.active {
    background: var(--sgb);
    color: #16a34a;
}

.dsc-pill.inactive {
    background: var(--srb);
    color: #dc2626;
}

.dsc-pill.suspended {
    background: #fff7ed;
    color: #c2410c;
}

.dsc-bar {
    height: 4px;
    border-radius: 99px;
    background: var(--border);
    margin-top: .9rem;
    overflow: hidden;
}

.map-pointer::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 10px;
    height: 10px;
    border-right: inherit;
    border-bottom: inherit;
    transform: translateX(-50%) rotate(45deg);
}

.dsc-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--sg), #f43f5e);
}

.dash-chart-card {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 1.35rem 1.4rem;
    height: 100%;
}

.dcc-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: .5rem;
    flex-wrap: wrap;
}

.dcc-title {
    font-size: .92rem;
    font-weight: 600;
    color: var(--navy);
}

.dcc-sub {
    font-size: .72rem;
    color: var(--text-muted);

    margin-top: .15rem;
}

.dcc-badge {
    font-size: .68rem;
    font-weight: 700;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: var(--orange-light);
    color: var(--sg);
    border: 1px solid var(--orange-mid);
    white-space: nowrap;

}

.dcc-legend {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}

.dcc-leg-item {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--text-2);
}

.dcc-leg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.donut-wrap {
    position: relative;
}

.donut-centre {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.donut-centre-val {
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--navy);
    line-height: 1;

}

.donut-centre-lbl {
    font-size: .58rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: .2rem;

}

.donut-legend {
    list-style: none;
    padding: 0;
    margin: 0;
}

.donut-legend li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .8rem;
}

.donut-legend li:last-child {
    border-bottom: none;
}

.dl-left {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    color: var(--text-2);
}

.dl-dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
}

.dl-val {

    font-weight: 700;
    font-size: .82rem;
    color: var(--navy);
}

.dash-table-card {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

.dtc-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem .9rem;
    border-bottom: 1px solid var(--border);
    gap: .5rem;
    flex-wrap: wrap;
}

.dtc-title {
    font-size: .92rem;
    font-weight: 600;
    color: var(--navy);
}

.dtc-sub {
    font-size: .72rem;
    color: var(--text-muted);

    margin-top: .1rem;
}

.dtc-live-badge {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .68rem;
    font-weight: 700;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: var(--sgb);
    color: #16a34a;
    border: 1px solid var(--sgbr);

}

.dtc-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sg);
    animation: pulse 1.4s ease infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .4;
        transform: scale(1.5)
    }
}

.dash-table {
    width: 100%;
    font-size: .8rem;
}

.dash-table thead tr th {
    background: var(--surface-3, #eef0f6);
    color: var(--text-muted);
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;

    padding: .65rem 1rem;
    border: none;
    white-space: nowrap;
}

.dash-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background var(--tr);
}

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

.dash-table tbody tr:hover {
    background: var(--surface-3, #eef0f6);
}

.dash-table tbody td {
    padding: .75rem 1rem;
    vertical-align: middle;
    color: var(--text);
    border: none;
}

.cyc-id {

    font-size: .72rem;
    font-weight: 700;
    color: var(--sg);
}

.cyc-dock {

    font-size: .7rem;
    background: var(--surface-3, #eef0f6);
    color: var(--text-2);
    padding: .1rem .4rem;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.cyc-station {
    font-size: .7rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--orange-light);
    color: var(--sg);
    border: 1px solid var(--orange-mid);
    white-space: nowrap;
}

.cyc-user {
    font-weight: 600;
    color: var(--navy);
    font-size: .8rem;
}

.cyc-time {
    font-size: .68rem;
    color: var(--text-muted);

}

.cyc-duration {

    font-size: .75rem;
    font-weight: 700;
    color: var(--navy);
}

.cyc-energy {

    font-size: .73rem;
    color: var(--text-2);
}

.cyc-income {

    font-size: .8rem;
    font-weight: 700;
    color: #16a34a;
}

.cyc-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .65rem;
    font-weight: 700;
    padding: .18rem .5rem;
    border-radius: 999px;
    background: var(--sgb);
    color: #16a34a;
    border: 1px solid var(--sgbr);

}

.cyc-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sg);
    animation: pulse 1.4s ease infinite;
}

.db-page-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    gap: .75rem;
}

.db-greeting {
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -.02em;
}

.db-sub {
    font-size: .82rem;
    color: var(--text-muted);
    margin-top: .2rem;

}

.db-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: 9px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    text-decoration: none;
    transition: all var(--tr);
    font-family: var(--font);
}

.db-btn:hover {
    border-color: var(--sg);
    color: var(--sg);
    background: var(--orange-light);
}

.db-btn.primary {
    background: var(--sg);
    border-color: var(--sg);
    color: #fff;
    box-shadow: 0 4px 14px rgba(249, 115, 22, .28);
}

.db-btn.primary:hover {
    background: var(--orange-dark);
    border-color: var(--orange-dark);
    color: #fff;
}

.db-section-label {
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--text-muted);

    margin-bottom: .85rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.db-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.sd-breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;

}

.sd-breadcrumb a {
    color: var(--sg);
    text-decoration: none;
}

.sd-breadcrumb i {
    font-size: .65rem;
}

#donutChart {
    margin: 0 auto;
    width: 150px !important;
    height: 150px !important;
}

@media (max-width:991px) {
    .nx-header {
        position: relative;
    }
}

.sf-page-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.sf-hdr-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sf-hdr-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #28f29b26;
    border: 1.5px solid #28f29b;
    display: grid;
    place-items: center;
    color: var(--sg);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.sf-page-title {
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -.02em;
}

.sf-page-sub {
    font-size: .82rem;
    color: var(--text-muted);
    margin-top: .2rem;

}

.sf-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1.1rem;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    text-decoration: none;
    transition: all var(--tr);
    font-family: var(--font);
}

.sf-btn:hover {
    border-color: var(--sg);
    color: var(--sg);
    background: var(--orange-light);
}

.sf-btn.primary {
    background: var(--sg);
    border-color: var(--sg);
    color: #fff;
    box-shadow: 0 4px 16px rgba(249, 115, 22, .30);
}

.sf-btn.primary:hover {
    background: var(--orange-dark);
    border-color: var(--orange-dark);
    color: #fff;
}

.sf-btn.danger {
    border-color: var(--srbr);
    color: var(--sr);
    background: var(--srb);
}

.sf-btn.danger:hover {
    background: var(--sr);
    color: #fff;
    border-color: var(--sr);
}

.sf-btn.info {
    background: var(--sy);
    border-color: var(--sy);
    color: #fff;
}

.sf-search-wrap {
    position: relative;
    max-width: 580px;
    min-width: 340px;
    flex: 1;
}

.sf-search-wrap input {
    width: 100%;
    padding: .5rem 1rem .5rem 2.4rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: .82rem;
    font-family: var(--font);
    color: var(--navy);
    background: var(--surface-2);
    transition: border-color var(--tr), box-shadow var(--tr);
}

.sf-search-wrap input:focus {
    outline: none;
    border-color: var(--sg);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .11);
}

.sf-search-wrap input::placeholder {
    color: var(--text-muted);
}

.sf-search-wrap .sf-search-icon {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: .85rem;
    pointer-events: none;
}

.sf-section-lbl {
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--text-muted);

    margin-bottom: .85rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sf-section-lbl::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.sf-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1.15rem;
}

.sf-card {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
    position: relative;

}

.sf-card-status {
    padding: 5px;
    border-radius: 999px;
    align-items: center;
    display: flex;
}

.sf-card-location {
    background-color: #86efac54;
    color: var(--sg);
    width: 30px;
    height: 30px;
    font-size: 14px;
    display: grid;
    place-content: center;
    border-radius: 50%;
}

.sf-card-status.active {
    background: var(--sgb);
    color: #16a34a;
    border: 1px solid var(--sgbr);
}

.sf-card-status.inactive {
    background: var(--srb);
    color: #dc2626;
    border: 1px solid var(--srbr);
}

.sf-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.active .sf-status-dot {
    background: var(--sg);
    animation: sfPulse 1.4s ease infinite;
}

.inactive .sf-status-dot {
    background: var(--sr);
}

@keyframes sfPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .4;
        transform: scale(1.6)
    }
}

.sf-card-body {
    padding: 1.25rem 1.25rem;
}

.sf-avatar-wrap {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: .85rem;
}

.sf-avatar {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    border: 3px solid #fff;
    box-shadow: 0 4px 16px rgba(15, 27, 53, .14);
    object-fit: cover;
    background: linear-gradient(135deg, var(--sg) 0%, #f43f5e 100%);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;

    overflow: hidden;
    flex-shrink: 0;
}

.sf-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.sf-card-actions-top {
    display: flex;
    gap: .4rem;
    padding-bottom: .25rem;
}

.sf-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    display: grid;
    place-items: center;
    font-size: .8rem;
    cursor: pointer;
    transition: all var(--tr);
    text-decoration: none;
}

.sf-icon-btn:hover {
    border-color: var(--sg);
    color: var(--sg);
    background: var(--orange-light);
}

.sf-icon-btn.sf-del:hover {
    border-color: var(--sr);
    color: var(--sr);
    background: var(--srb);
}

.sf-card-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -.01em;
    margin-bottom: .18rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rd-info-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px;
    border: 1px solid #edf0f5;
    border-radius: 10px;
    background: #fafbfc;
}

.rd-info-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef4ff;
    color: #315efb;
    font-size: 16px;
}

.rd-info-label {
    font-size: 11px;
    color: #8993a4;
    margin-bottom: 3px;
}

.rd-info-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    word-break: break-word;
}

.rd-stat-card {
    padding: 18px;
    border: 1px solid #edf0f5;
    border-radius: 10px;
    background: #fafbfc;
}

.rd-stat-icon {
    font-size: 18px;
    margin-bottom: 10px;
    color: #315efb;
}

.rd-stat-label {
    font-size: 11px;
    color: #8993a4;
    margin-bottom: 4px;
}

.rd-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
}

.timeline {
    position: relative;
}

.timeline-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.timeline-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef4ff;
    color: #315efb;
}

.timeline-icon.end {
    background: #edf9f1;
    color: #16a34a;
}

.timeline-icon.active {
    background: #fff7e8;
    color: #f59e0b;
}

.timeline-content {
    flex: 1;
}

.timeline-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
}

.timeline-date {
    font-size: 12px;
    color: #8993a4;
    margin-top: 3px;
}

.timeline-date span {
    margin-left: 8px;
    font-weight: 600;
}

.timeline-line {
    height: 25px;
    width: 2px;
    background: #e6eaf0;
    margin-left: 19px;
}
.sf-card-pos {
    font-size: .73rem;
    font-weight: 700;
    color: var(--sg);

    margin-bottom: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-card-divider {
    height: 1px;
    background: var(--border);
    margin: .75rem 0;
}

.sf-contact-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .75rem;
    color: var(--text-2);
    margin-bottom: .4rem;
}

.sf-contact-row:last-child {
    margin-bottom: 0;
}

.sf-contact-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--surface-3);
    display: grid;
    place-items: center;
    color: var(--sg);
    font-size: .72rem;
    flex-shrink: 0;
}

.sf-contact-val {
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.sf-form-panel {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
}

.sf-form-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    background: #085741;
    gap: .5rem;
    flex-wrap: wrap;
}

.sf-form-hdr-left {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.sf-form-hdr-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid rgba(249, 115, 22, .3);
    display: grid;
    place-items: center;
    color: var(--sg);
    font-size: .9rem;
    flex-shrink: 0;
}

.modal-header .btn-close {
    opacity: 1;
}

.sf-form-hdr-title {
    font-size: .92rem;
    font-weight: 600;
    color: #fff;
}

.sf-form-hdr-sub {
    font-size: .7rem;
    color: rgba(255, 255, 255, .45);

    margin-top: .1rem;
}

.sf-form-mode-badge {
    font-size: .65rem;
    font-weight: 700;

    padding: .2rem .65rem;
    border-radius: 999px;
}

.sf-form-mode-badge.add {
    background: rgba(34, 197, 94, .15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, .25);
}

.sf-form-mode-badge.update {
    background: rgba(249, 115, 22, .15);
    color: var(--sg);
    border: 1px solid rgba(249, 115, 22, .25);
}

.sf-form-body {
    padding: 1.5rem 1.4rem;
}

.sf-img-upload-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.sf-img-preview {
    display:grid;
    place-content: center;
    width: 180px;
    min-height: 80px;
    max-height: 180px;
    border-radius: 10px;
    background: linear-gradient(135deg, #c31432 0%, #f43f5e 100%);
    
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    transition: border-color var(--tr);
}

.sf-img-preview:hover {
    border-color: var(--sg);
}.sf-img-preview:hover .sf-img-preview{
    display: none;
}

.sf-img-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    border-radius: 17px;
}

.sf-img-preview .sf-img-placeholder {
    color: rgba(255, 255, 255, .8);
    font-size: 1.5rem;
}

.sf-img-preview input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.sf-img-upload-info {
    font-size: .78rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.sf-img-upload-info strong {
    color: var(--navy);
    font-weight: 700;
    display: block;
    margin-bottom: .2rem;
}

.sf-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 680px) {
    .sf-form-row {
        grid-template-columns: 1fr;
    }
}

.sf-field-group {
    display: flex;
    flex-direction: column;
}

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

.sf-field-label {
    font-size: .76rem;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: .42rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.sf-field-label i {
    color: var(--sg);
    font-size: .72rem;
}

.sf-field-label .sf-required {
    color: var(--sr);
    margin-left: .15rem;
}

.sf-field-input {
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: .65rem .9rem;
    font-size: .86rem;
    font-family: var(--font);
    color: var(--navy);
    background: var(--surface-2);
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
}

.sf-field-input:focus {
    outline: none;
    border-color: var(--sg);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .11);
}

.sf-field-input::placeholder {
    color: var(--text-muted);
    font-size: .82rem;
}

select.sf-field-input {
    cursor: pointer;
}

select.sf-field-input option {
    background: #fff;
}

.sf-form-footer {
    padding: 1rem 1.4rem;
    background: var(--surface-3);
}

.sf-form-footer-btns {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
}

.sf-breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;

}

.sf-breadcrumb a {
    color: var(--sg);
    text-decoration: none;
}

.sf-breadcrumb a:hover {
    text-decoration: underline;
}

.sf-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    font-size: .85rem;
}

.sf-empty i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: .75rem;
    opacity: .35;
}

.dt-search,
.dt-column-order,
.dt-empty {
    display: none;
}

table.dataTable thead>tr>th div.dt-column-header .dt-column-title {
    font-size: 14px;
    font-weight: 600;
    width: max-content;
    text-align: start;
}

table.dataTable td {
    font-size: 13px;
    font-weight: 500;
}

table.dataTable td.dt-type-numeric {
    text-align: start;
}

table.table .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.table>thead {
    height: 60px;
}

table.dataTable>thead>tr>th {
    color: #fff;
    background: #769952;
}

table.dataTable>tbody>tr {
    vertical-align: middle;
}

table.table .dropdown-menu {
    min-width: 200px;
    background: #fff;
    border: 1px solid #e2e5ef;
    border-radius: 12px;
    padding: .4rem;
    box-shadow: 0 8px 30px rgba(15, 27, 53, .14), 0 2px 8px rgba(15, 27, 53, .08);
}

table.table .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .65rem;
    border-radius: 8px;
    color: #4a5578;
    font-size: .84rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .22s cubic-bezier(.4, 0, .2, 1), color .22s cubic-bezier(.4, 0, .2, 1);
}

table.table .dropdown-menu .dropdown-item:hover {
    background: #eef0f6;
    color: #0f1b35;
}

div.dt-container .dt-info {
    font-size: 12px;
}

div.dt-container .dt-paging .dt-paging-button.current:hover,
div.dt-container .dt-paging .dt-paging-button.current {
    background-color: #008000;
    color: white !important;
    border-radius: 6px;
}

div.dt-container .dt-paging .dt-paging-button.disabled {
    background-color: #e5f0ed;
    border-radius: 6px;
    border: 1px solid #008000;
}

div.dt-container .dt-paging .dt-paging-button.disabled:hover {
    background-color: #f97316;
    color: white !important;
}

table.table .profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

table.table .profile img {
    width: 40px;
    height: 40px;
    aspect-ratio: 1;
    max-width: 40px;
    border: 1px solid #000;
    border-radius: 50%;
}

table.table .profile .details h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
}

table.table .profile .details p {
    margin: 0;
    font-size: 12px;
}

.badge {
    font-size: 13px;
    margin: 0;
    padding: 8px 20px;
    border-radius: 40px;
}

.rd-profile-grid {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.rd-profile-card .card-banner {
    background: var(--sg);
    height: 45px;
    border-radius: 14px 14px 0 0;
    position: relative;
}

.rd-avatar-wrap {
    position: absolute;
    bottom: -36px;
    left: 1.25rem;
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    overflow: hidden;
}

.rd-avatar {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--sg) 0%, #f43f5e 100%);
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.rd-avatar a {
    width: 100%;
    height: 100%;
}

.rd-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rd-current-ride {
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    border-radius: 50%;
    bottom: 0;
    right: 0;
}

.rd-current-ride.inactive {
    background-color: #f43f5e;
}

.rd-current-ride.active {
    background-color: #008000;
}

.rd-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.rd-card-body {
    padding: 2.75rem 1.25rem 1.25rem;
}

.rd-name {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--navy);
}

.rd-id {
    font-size: .68rem;
    font-weight: 700;
    color: var(--sg);
    letter-spacing: .06em;
    margin-bottom: .85rem;
}

.rd-info-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 14px;
    color: var(--text-2);
    margin-bottom: 14px;
}

.rd-info-icon {
    width: 35px;
    height: 35px;
    border-radius: 7px;
    background: var(--surface-3);
    display: grid;
    place-items: center;
    color: var(--sg);
    font-size: 14px;
    flex-shrink: 0;
}

.rd-info-val {
    font-weight: 600;
    color: var(--navy);
}

.rd-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.rd-mstat {
    text-align: center;
}

.rd-mstat-val {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1;
}

.rd-mstat-lbl {
    font-size: .57rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
    margin-top: .2rem;
}

.rd-wallet-row {
    display: flex;
    gap: .6rem;
    margin-top: 1rem;
}

.rd-wallet-chip {
    flex: 1;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .6rem .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.rd-wc-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: .8rem;
    flex-shrink: 0;
}

.rd-wc-icon.green {
    background: var(--sgb);
    color: var(--sg);
}

.rd-wc-icon.blue {
    background: #eff6ff;
    color: #3b82f6;
}

.rd-wc-lbl {
    font-size: 12px;
    color: #3f3f3f;
    font-weight: 600;
}

.rd-wc-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
}

.rd-right-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.rd-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}

.rd-field {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .55rem .75rem;
}

.rd-field-lbl {
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
    font-weight: 700;
}

.rd-field-val {
    font-size: .82rem;
    font-weight: 600;
    color: var(--navy);
    margin-top: .18rem;
}

.rd-field-val.verified {
    color: var(--sg);
}

.rd-field-val.unverified {
    color: var(--sr);
}

.rd-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.rd-target-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--border);
}

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

.rd-target-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--surface-3);
    display: grid;
    place-items: center;
    color: var(--sg);
    font-size: .8rem;
    flex-shrink: 0;
}

.rd-target-lbl {
    font-size: .74rem;
    font-weight: 600;
    color: var(--navy);
}

.rd-target-bar {
    height: 5px;
    border-radius: 99px;
    background: var(--border);
    margin-top: .3rem;
    overflow: hidden;
}

.rd-target-fill {
    height: 100%;
    border-radius: 99px;
}

.rd-target-fill.g {
    background: var(--sg);
}

.rd-target-fill.y {
    background: var(--sy);
}

.rd-target-fill.r {
    background: var(--sr);
}

.rd-target-pct {
    font-size: .7rem;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
}

.rd-social-chip {
    height: 30px;
    width: 30px;
    display: grid;
    place-content: center;
    gap: .35rem;
    font-size: 16px;
    font-weight: 600;
    padding: .28rem .65rem;
    border-radius: 999px;
    border: 1px solid var(--border);
}

.facebook {
    background-color: #1877F2;
    color: white;
}

.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff;
}

.rd-social-chip.linked {
    border-color: var(--sgbr);
    background: var(--sgb);
    color: #166534;
}

.rd-doc-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    font-weight: 600;
    padding: .3rem .7rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text-2);
    cursor: pointer;
    transition: all var(--tr);
    text-decoration: none;
}

.rd-doc-chip:hover {
    border-color: var(--sg);
    color: var(--sg);
}

.rd-tabs {
    display: flex;
    gap: .3rem;
    padding: .6rem 1.25rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.rd-tab {
    padding: .32rem .8rem;
    border-radius: 999px;
    font-size: .73rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    color: var(--text-muted);
    white-space: nowrap;
    transition: all var(--tr);
    background: transparent;
    font-family: var(--font);
}

.rd-tab.active {
    background: var(--sgb);
    border-color: var(--sgbr);
    color: var(--sg);
}

a {
    text-decoration: none;
}

.rd-tab:hover:not(.active) {
    color: var(--text-2);
    background: var(--surface-3);
}

.rd-ride-row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: .75rem;
    align-items: center;
    padding: .65rem 0;
    border-bottom: 1px solid var(--border);
}

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

.rd-ride-date {
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-2);
    line-height: 1.4;
}

.rd-ride-date small {
    font-size: .6rem;
    color: var(--text-muted);
    display: block;
}

.rd-ride-route {
    font-size: .76rem;
    font-weight: 600;
    color: var(--navy);
}

.rd-ride-meta {
    font-size: .63rem;
    color: var(--text-muted);
    margin-top: .2rem;
    display: flex;
    gap: .65rem;
}

.rd-ride-km {
    font-size: .72rem;
    font-weight: 700;
    color: var(--sg);
}

.rd-ride-charge {
    font-size: .75rem;
    font-weight: 700;
    color: var(--navy);
}

.rd-no-gps {
    font-size: .6rem;
    color: var(--text-muted);
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .15rem .4rem;
}

.rd-gps-ok {
    font-size: .6rem;
    font-weight: 700;
    background: var(--sgb);
    border: 1px solid var(--sgbr);
    border-radius: 6px;
    padding: .15rem .4rem;
    color: #166534;
}

.rd-action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .65rem;
}

.rd-action-btn {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: .85rem .5rem;
    text-align: center;
    cursor: pointer;
    background: var(--surface-2);
    transition: all var(--tr);
    font-family: var(--font);
}

.rd-action-btn:hover {
    border-color: var(--sg);
    background: var(--sgb);
}

.rd-action-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--surface-3);
    display: grid;
    place-items: center;
    font-size: .85rem;
    margin: 0 auto .45rem;
    color: var(--sg);
}

.rd-action-lbl {
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-2);
}

@media (max-width: 991px) {
    .rd-profile-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 576px) {
    .rd-field-grid {
        grid-template-columns: 1fr;
    }

    .rd-action-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rd-mini-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ep-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    align-items: start
}

.ep-left-col {
    display: flex;
    flex-direction: column;
    gap: 0
}

.ep-right-col {
    display: flex;
    flex-direction: column;
    gap: 0
}

.ep-avatar-wrap {
    position: relative;
    width: 190px;
    height: 190px;
    margin: 0 auto
}

.ep-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sg) 0%, #f43f5e 100%);
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(15, 27, 53, .15)
}

.ep-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 19px
}

.ep-avatar-edit {
    position: absolute;
    bottom: 10px;
    right: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--sg);
    border: 2px solid #fff;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    transition: background var(--tr);
}

.ep-avatar-edit:hover {
    background: var(--orange-dark)
}

.ep-avatar-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy)
}

.ep-avatar-id {
    font-size: .68rem;
    font-weight: 700;
    color: var(--sg);
    letter-spacing: .06em
}

.ep-photo-hint {
    font-size: .65rem;
    color: var(--text-muted);
    line-height: 1.5
}

.ep-card-hdr {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1rem 1.25rem .75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem
}

.ep-card-hdr-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #f0fdf9;
    border: 1px solid var(--sgbr);
    display: grid;
    place-items: center;
    color: var(--sg);
    font-size: .8rem;
    flex-shrink: 0
}

.ep-card-hdr-title {
    font-size: .88rem;
    font-weight: 600;
    color: var(--navy)
}

.ep-card-hdr-sub {
    font-size: .68rem;
    color: var(--text-muted)
}

.ep-form-row {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
    margin-bottom: .85rem
}

.ep-form-row:last-child {
    margin-bottom: 0
}

.ep-field-group {
    display: flex;
    flex-direction: column;
    gap: .35rem
}

.ep-label {
    font-size: .73rem;
    font-weight: 700;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: .35rem
}

.ep-label i {
    color: var(--sg);
    font-size: .68rem
}

.ep-req {
    color: var(--sr);
    margin-left: .1rem
}

.ep-input {
    border: 1.5px solid var(--border);
    border-radius: 9px;
    padding: .55rem .85rem;
    font-size: .83rem;
    font-family: var(--font);
    color: var(--navy);
    background: var(--surface-2);
    transition: border-color .2s, box-shadow .2s;
    width: 100%
}

.ep-input:focus {
    outline: none;
    border-color: var(--sg);
    box-shadow: 0 0 0 3px rgba(19, 122, 94, .1)
}

.ep-input::placeholder {
    color: var(--text-muted);
    font-size: .8rem
}

.ep-input-error {
    border-color: var(--sr) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1) !important
}

.ep-select {
    cursor: pointer;
    appearance: auto
}

.ep-select-verified option[value="1"] {
    color: #166534
}

.ep-select-verified option[value="0"] {
    color: #dc2626
}

.ep-input-prefix,
.ep-input-suffix {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: 9px;
    overflow: hidden;
    background: var(--surface-2);
    transition: border-color .2s, box-shadow .2s
}

.ep-input-prefix:focus-within,
.ep-input-suffix:focus-within {
    border-color: var(--sg);
    box-shadow: 0 0 0 3px rgba(19, 122, 94, .1)
}

.ep-input-prefix .ep-input,
.ep-input-suffix .ep-input {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent
}

.ep-input-prefix .ep-input:focus,
.ep-input-suffix .ep-input:focus {
    box-shadow: none
}

.ep-prefix,
.ep-suffix {
    padding: 10px .75rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--sg);
    background: var(--surface-3);
    border-right: 1px solid var(--border);
    white-space: nowrap;
    height: 100%;
    display: flex;
    align-items: center
}

.ep-suffix {
    border-right: none;
    border-left: 1px solid var(--border)
}

.ep-file-wrap {
    display: flex;
    flex-direction: column;
    gap: .4rem
}

.ep-file-box {
    border: 1.5px dashed var(--border);
    border-radius: 9px;
    padding: .75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    cursor: pointer;
    transition: all var(--tr);
    background: var(--surface-3);
    text-align: center
}

.ep-file-box:hover {
    border-color: var(--sg);
    background: #f0fdf9
}

.ep-file-box i {
    font-size: 1.2rem;
    color: var(--sg)
}

.ep-file-box span {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-2)
}

.ep-file-box small {
    font-size: .62rem;
    color: var(--text-muted)
}

.ep-file-existing {
    font-size: .68rem;
    font-weight: 600;
    color: var(--sg);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem
}

.ep-file-existing:hover {
    text-decoration: underline
}

.ep-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: .75rem
}

@media(max-width:991px) {
    .ep-grid {
        grid-template-columns: 1fr
    }

    .sf-img-upload-row {
        width: 150px;
    }
}

@media(max-width:576px) {
    .ep-form-row {
        grid-template-columns: 1fr
    }
}

.req {
    position: relative;
}

.req::after {
    content: "*";
    color: red;
    display: block;
}

#rideList {
    max-height: 325px;
    overflow-y: scroll;
    padding-right: 20px;
}

input:-internal-autofill-selected {
    background-color: #fff !important;
}

.bk-nav-chips {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap
}

.bk-nav-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .9rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    text-decoration: none;
    transition: all var(--tr)
}

.bk-nav-chip:hover,
.bk-nav-chip.active {
    border-color: var(--sg);
    background: var(--sgb);
    color: var(--sg)
}

.bk-search-wrap {
    position: relative
}

.bk-search-wrap input {
    padding: .38rem .85rem .38rem 2.1rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: .76rem;
    font-family: var(--font);
    color: var(--navy);
    width: 400px;
    transition: border-color var(--tr)
}

.bk-search-wrap input:focus {
    outline: none;
    border-color: var(--sg)
}

.bk-search-icon {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: .75rem;
    pointer-events: none
}

.bk-filter-row {
    display: flex;
    gap: .45rem
}

.bk-filter-select {
    padding: .38rem .7rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: .75rem;
    font-family: var(--font);
    color: var(--text-2);
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color var(--tr)
}

.bk-filter-select:focus {
    outline: none;
    border-color: var(--sg)
}

.bk-cycle-id {
    font-size: .78rem;
    font-weight: 700;
    color: var(--sg);
    text-decoration: none
}

.bk-cycle-id:hover {
    text-decoration: underline
}

.bk-type-chip {
    font-size: .65rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    white-space: nowrap
}

.bk-type-chip.pedal {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.bk-type-chip.electric {
    background: #f5f3ff;
    color: #6d28d9;
    border: 1px solid #ddd6fe
}

.bk-status-chip {
    font-size: .65rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    white-space: nowrap
}

.bk-status-chip.service {
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.bk-status-chip.maintenance {
    background: var(--syb);
    color: #854d0e;
    border: 1px solid var(--sybr)
}

.bk-status-chip.stolen {
    background: var(--srb);
    color: #991b1b;
    border: 1px solid var(--srbr)
}

.bk-dock-chip {
    font-size: .65rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    white-space: nowrap
}

.bk-dock-chip.trip {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa
}

.bk-dock-chip.docked {
    background: var(--surface-3);
    color: var(--text-2);
    border: 1px solid var(--border)
}

.bk-station-chip {
    font-size: .68rem;
    font-weight: 700;
    padding: .18rem .5rem;
    border-radius: 6px;
    background: var(--sgb);
    color: var(--sg);
    border: 1px solid var(--sgbr)
}

.bk-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    display: grid;
    place-items: center;
    font-size: .8rem;
    cursor: pointer;
    transition: all var(--tr)
}

.bk-action-btn:hover {
    border-color: var(--sg);
    color: var(--sg);
    background: var(--sgb)
}

.bkd-profile-grid {
    display: grid;
    grid-template-columns: 240px 1fr 220px;
    gap: 1.25rem;
    align-items: start
}

.bkd-photo-wrap {
    text-align: center
}

.bkd-photo {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 16px;
    border: 1.5px solid var(--border);
    background: var(--surface-3);
    padding: .5rem
}

.bkd-photo-badges {
    display: flex;
    justify-content: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .65rem
}

.bkd-make-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--navy);
    text-align: center
}

.bkd-make-sub {
    font-size: .72rem;
    color: var(--text-muted);
    text-align: center
}

.bkd-ids-list {
    display: flex;
    flex-direction: column;
    gap: .4rem
}

.bkd-id-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem .6rem;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px
}

.bkd-id-lbl {
    font-size: .65rem;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: .3rem
}

.bkd-id-val {
    font-size: .76rem;
    font-weight: 700;
    color: var(--sg)
}

.bkd-battery-bar {
    height: 6px;
    border-radius: 99px;
    background: var(--border);
    overflow: hidden;
    flex: 1;
    margin-right: .5rem;
    display: inline-block;
    width: 70px;
    vertical-align: middle
}

.bkd-battery-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--sg)
}

.bkd-action-list {
    display: flex;
    flex-direction: column;
    gap: .45rem
}

.bkd-action-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .75rem;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    transition: all var(--tr);
    font-family: var(--font);
    text-align: left;
    width: 100%
}

.bkd-action-item:hover {
    border-color: var(--sg);
    color: var(--navy);
    background: var(--sgb)
}

.bkd-action-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--surface-3);
    display: grid;
    place-items: center;
    color: var(--sg);
    font-size: .78rem;
    flex-shrink: 0
}

@media(max-width:991px) {
    .bkd-profile-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:576px) {
    .bk-filter-row {
        flex-direction: column
    }

    .bk-search-wrap input {
        width: 100%
    }
}

.db-quick-card {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 1.2rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    height: 100%;
    transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr)
}

.db-quick-card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer
}

.db-quick-card-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 27, 53, .09);
    border-color: var(--sgbr)
}

.db-qc-hdr {
    display: flex;
    align-items: center;
    gap: .75rem
}

.db-qc-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: .95rem;
    flex-shrink: 0
}

.db-qc-icon.cctv {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    color: #dc2626
}

.db-qc-icon.map {
    background: var(--sgb);
    border: 1.5px solid var(--sgbr);
    color: var(--sg)
}

.db-qc-icon.iot {
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    color: #3b82f6
}

.db-qc-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--navy)
}

.db-qc-sub {
    font-size: .68rem;
    color: var(--text-muted);
    margin-top: .08rem
}

.db-qc-live-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .62rem;
    font-weight: 700;
    padding: .18rem .5rem;
    border-radius: 999px;
    background: var(--srb);
    color: #dc2626;
    border: 1px solid var(--srbr);
    white-space: nowrap
}

.db-qc-open-badge {
    margin-left: auto;
    font-size: .62rem;
    font-weight: 700;
    padding: .18rem .55rem;
    border-radius: 999px;
    background: var(--sgb);
    color: var(--sg);
    border: 1px solid var(--sgbr);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .3rem
}

.db-cctv-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1
}

.db-cctv-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .6rem;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    text-decoration: none;
    transition: all var(--tr)
}

.db-cctv-item:hover {
    border-color: var(--sg);
    background: #f0fdf9
}

.db-cctv-thumb {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--navy);
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .5);
    font-size: .72rem;
    flex-shrink: 0
}

.db-cctv-info {
    flex: 1;
    min-width: 0
}

.db-cctv-name {
    font-size: .74rem;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.db-cctv-url {
    font-size: .62rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.db-cctv-status {
    font-size: .58rem;
    font-weight: 700;
    padding: .15rem .45rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0
}

.db-cctv-status.online {
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.db-cctv-status.offline {
    background: var(--srb);
    color: #991b1b;
    border: 1px solid var(--srbr)
}

.db-qc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .65rem;
    border-top: 1px solid var(--border)
}

.db-qc-link {
    font-size: .72rem;
    font-weight: 700;
    color: var(--sg);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: gap var(--tr)
}

.db-quick-card:hover .db-qc-link {
    gap: .5rem
}

.db-map-preview {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    flex: 1;
    position: relative;
}

.db-map-preview::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 1;
    cursor: no-drop;
}

.db-map-bg {
    background: linear-gradient(135deg, #e8f5e9 0%, #e3f2fd 100%);
    min-height: 140px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.db-map-pins {
    position: absolute;
    inset: 0
}

.db-map-pin {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem
}

.db-map-pin i {
    font-size: .95rem;
    color: var(--sg)
}

.db-map-pin.active i {
    color: #3b82f6;
    animation: pulse 1.4s ease infinite
}

.db-map-pin span {
    font-size: .55rem;
    font-weight: 700;
    color: var(--navy);
    background: #fff;
    border-radius: 4px;
    padding: .05rem .3rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
    white-space: nowrap
}

.db-iot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .55rem;
    flex: 1
}

.db-iot-stat {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .6rem .5rem;
    text-align: center;
    transition: all var(--tr)
}

.db-quick-card-link:hover .db-iot-stat {
    border-color: var(--sgbr)
}

.db-iot-stat-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: .75rem;
    margin: 0 auto .35rem
}

.db-iot-stat-val {
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy);
    line-height: 1
}

.db-iot-stat-lbl {
    font-size: .56rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-top: .2rem
}

.bk-modal {
    border: none;
    border-radius: 18px;
    overflow: hidden
}

.bk-modal-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    background: var(--navy)
}

.bk-modal-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(19, 122, 94, .25);
    border: 1px solid rgba(19, 122, 94, .4);
    display: grid;
    place-items: center;
    color: #4ade80;
    font-size: .95rem;
    flex-shrink: 0
}

.bk-modal-title {
    font-size: .95rem;
    font-weight: 600;
    color: #fff
}

.bk-modal-sub {
    font-size: .7rem;
    color: rgba(255, 255, 255, .45);
    margin-top: .1rem
}

.bk-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: transparent;
    color: rgba(255, 255, 255, .5);
    display: grid;
    place-items: center;
    font-size: .85rem;
    cursor: pointer;
    transition: all var(--tr)
}

.bk-modal-close:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff
}

.bk-modal-body {
    padding: 1.4rem;
    max-height: 69vh;
    overflow-y: auto
}

.bk-modal-section {
    margin-bottom: 1.35rem
}

.bk-modal-section-lbl {
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-muted);
    margin-bottom: .85rem;
    display: flex;
    align-items: center;
    gap: .4rem
}

.bk-modal-section-lbl i {
    color: var(--sg)
}

.bk-modal-section-lbl::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border)
}

.bk-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem
}

.bk-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.4rem;
    background: var(--surface-3);
    border-top: 1px solid var(--border)
}

.select2-results__option {
    font-size: 12px;
    padding-left: 20px;
    padding: 6px;
    font-weight: 400;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1.5px solid var(--border);
    border-radius: 9px;
    padding: .55rem .85rem;
    font-size: .83rem;
    font-family: var(--font);
    color: var(--navy);
    background: var(--surface-2);
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
}

.select2-container--default .select2-selection--single {
    border: 0;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    border: 1.5px solid var(--border);
    border-radius: 9px;
    padding: .55rem .85rem;
    font-size: .83rem;
    font-family: var(--font);
    color: var(--navy);
    background: var(--surface-2);
    line-height: normal;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
}

.select2-container {
    z-index: 9999 !important;
}

.db-filter-tabs {
    display: flex;
    gap: .3rem;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .25rem
}

.db-filter-tab {
    padding: .32rem .85rem;
    border-radius: 7px;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text-muted);
    transition: all var(--tr);
    font-family: var(--font)
}

.db-filter-tab.active {
    background: #fff;
    color: var(--sg);
    box-shadow: 0 1px 4px rgba(15, 27, 53, .1)
}

.db-filter-tab:hover:not(.active) {
    color: var(--text-2)
}

.db-page-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    gap: .75rem
}

.db-map-preview {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    flex: 1;
    min-height: 160px
}

@media(max-width:576px) {
    .bk-modal-grid {
        grid-template-columns: 1fr
    }
}

@keyframes skShimmer {
    0% {
        background-position: -600px 0
    }

    100% {
        background-position: 600px 0
    }
}

.sk-line,
.sk-card,
.sk-tabs,
.sk-section-lbl {
    background: linear-gradient(90deg, #e8eaf0 25%, #f4f5f8 50%, #e8eaf0 75%);
    background-size: 1200px 100%;
    animation: skShimmer 1.6s infinite linear;
    border-radius: 8px
}

.sk-line {
    height: 14px;
    margin-bottom: 4px;
    display: block
}

.sk-card {
    height: 110px;
    border-radius: 14px;
    width: 100%
}

.sk-tabs {
    width: 220px;
    height: 38px;
    border-radius: 10px
}

.sk-section-lbl {
    width: 120px;
    height: 12px;
    margin-bottom: 14px
}

.rl-filter-bar {
    display: flex;
    align-items: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 1rem 1.25rem
}

.rl-filter-group {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 130px;
    flex: 1
}

.rl-filter-lbl {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: .3rem
}

.rl-filter-lbl i {
    color: var(--sg);
    font-size: .62rem
}

.rl-filter-input {
    border: 1.5px solid var(--border);
    border-radius: 9px;
    padding: .48rem .75rem;
    font-size: .8rem;
    font-family: var(--font);
    color: var(--navy);
    background: var(--surface-2);
    transition: border-color .2s, box-shadow .2s;
    width: 100%
}

.rl-filter-input:focus {
    outline: none;
    border-color: var(--sg);
    box-shadow: 0 0 0 3px rgba(19, 122, 94, .1)
}

.rl-filter-actions {
    display: flex;
    gap: .45rem;
    align-items: flex-end;
    padding-bottom: .02rem
}

.rl-active-pills {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap
}

.rl-active-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 600;
    padding: .28rem .65rem;
    border-radius: 999px;
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.rl-active-pill strong {
    font-weight: 700
}

.rl-pill-remove {
    cursor: pointer;
    font-size: .85rem;
    line-height: 1;
    margin-left: .15rem;
    opacity: .7;
    transition: opacity var(--tr)
}

.rl-pill-remove:hover {
    opacity: 1
}

.rl-type-chip {
    font-size: .65rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    white-space: nowrap
}

.rl-type-chip.free {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.rl-type-chip.staff {
    background: #f5f3ff;
    color: #6d28d9;
    border: 1px solid #ddd6fe
}

.rl-type-chip.test {
    background: var(--syb);
    color: #854d0e;
    border: 1px solid var(--sybr)
}

.rl-type-chip.regular {
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.rl-group-chip {
    font-size: .65rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    white-space: nowrap
}

.rl-group-chip.r1 {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a
}

.rl-group-chip.r2 {
    background: #fce7f3;
    color: #9d174d;
    border: 1px solid #fbcfe8
}

@media(max-width:768px) {
    .rl-filter-group {
        min-width: calc(50% - .65rem)
    }

    .rl-filter-actions {
        width: 100%
    }

    .rl-filter-actions .sf-btn {
        flex: 1
    }
}

.stn-cu-wrap {
    position: relative;
    padding: 0 34px
}

.stn-cu-scroll {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: .5rem .25rem 1rem;
    scrollbar-width: none
}

.stn-cu-scroll::-webkit-scrollbar {
    display: none
}

.stn-cu-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .32rem;
    padding: .7rem .6rem;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    cursor: pointer;
    min-width: 150px;
    transition: all var(--tr);
    flex-shrink: 0
}

.stn-cu-card:hover {
    border-color: var(--sg);
    background: #f0fdf9;
    transform: translateY(-2px)
}

.stn-cu-card.active {
    border-color: var(--sg);
    background: var(--sgb);
    box-shadow: 0 4px 14px rgba(19, 122, 94, .15)
}

.stn-cu-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--surface-3);
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-size: .95rem;
    transition: all var(--tr)
}

.stn-cu-card.active .stn-cu-avatar,
.stn-cu-card:hover .stn-cu-avatar {
    border-color: var(--sg);
    background: var(--sg);
    color: #fff
}

.stn-cu-id {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    color: var(--sg);
    letter-spacing: .05em
}

.stn-cu-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap
}

.stn-cu-status {
    font-size: 12px;
    margin-top: 10px;
    font-weight: 700;
    padding: .1rem .38rem;
    border-radius: 999px
}

.stn-cu-status.g {
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.stn-cu-status.y {
    background: var(--syb);
    color: #854d0e;
    border: 1px solid var(--sybr)
}

.stn-scroll-btn {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    display: grid;
    place-items: center;
    font-size: .7rem;
    cursor: pointer;
    transition: all var(--tr);
    z-index: 10
}

.stn-scroll-btn.left {
    left: 0
}

.stn-scroll-btn.right {
    right: 0
}

.stn-scroll-btn:hover {
    border-color: var(--sg);
    color: var(--sg);
    background: var(--sgb)
}

.stn-detail-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--sgb);
    border: 1.5px solid var(--sgbr);
    display: grid;
    place-items: center;
    color: var(--sg);
    font-size: 1.05rem;
    flex-shrink: 0
}

.stn-detail-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy)
}

.stn-detail-sub {
    font-size: .7rem;
    color: var(--text-muted);
    margin-top: .1rem
}

.stn-view-btn {
    padding: .32rem .8rem;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    transition: all var(--tr);
    font-family: var(--font)
}

.stn-view-btn.active {
    background: var(--sgb);
    border-color: var(--sgbr);
    color: var(--sg)
}

.stn-view-btn:hover:not(.active) {
    border-color: var(--sg);
    color: var(--sg)
}

.stn-dock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .65rem
}

.stn-dock-card {
    border-radius: 12px;
    padding: .65rem .55rem;
    cursor: pointer;
    transition: all var(--tr);
    border: 1.5px solid transparent;
    text-align: center
}

.stn-dock-card.green {
    background: rgba(34, 197, 94, .07);
    border-color: rgba(34, 197, 94, .22)
}

.stn-dock-card.orange {
    background: rgba(249, 115, 22, .07);
    border-color: rgba(249, 115, 22, .22)
}

.stn-dock-card.empty {
    background: var(--surface-3);
    border-color: var(--border)
}

.stn-dock-card.fault {
    background: rgba(239, 68, 68, .07);
    border-color: rgba(239, 68, 68, .22)
}

.stn-dock-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(15, 27, 53, .1)
}

.stn-dock-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .4rem
}

.stn-dock-id {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted)
}

.stn-dock-badge {
    font-size: .5rem;
    font-weight: 700;
    padding: .1rem .32rem;
    border-radius: 999px;
    white-space: nowrap
}

.stn-dock-badge.green {
    background: rgba(34, 197, 94, .15);
    color: #166534
}

.stn-dock-badge.orange {
    background: rgba(249, 115, 22, .15);
    color: #9a3412
}

.stn-dock-badge.empty {
    background: var(--surface-3);
    color: var(--text-muted)
}

.stn-dock-badge.fault {
    background: rgba(239, 68, 68, .15);
    color: #991b1b
}

.stn-dock-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    margin: 0 auto .38rem
}

.stn-dock-icon-wrap.green {
    background: rgba(34, 197, 94, .15);
    color: #16a34a
}

.stn-dock-icon-wrap.orange {
    background: rgba(249, 115, 22, .12);
    color: #e7bd11
}

.stn-dock-icon-wrap.empty {
    background: var(--surface-3);
    color: var(--text-muted)
}

.stn-dock-icon-wrap.fault {
    background: rgba(239, 68, 68, .12);
    color: #dc2626
}

.stn-dock-cid {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: .38rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.stn-dock-view-btn {
    width: 100%;
    padding: .2rem 0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--sg);
    background: var(--sgb);
    color: var(--sg);
    transition: all var(--tr);
    font-family: var(--font)
}

.stn-dock-view-btn:hover {
    background: var(--sg);
    color: #fff
}

.stn-dock-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap
}

.stn-legend-item {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--text-2)
}

.stn-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0
}

.stn-legend-dot.green {
    background: #22c55e
}

.stn-legend-dot.orange {
    background: #f97316
}

.stn-legend-dot.empty {
    background: var(--border)
}

.stn-legend-dot.fault {
    background: #ef4444
}

.stn-cam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem
}

.stn-cam-card {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border)
}

.stn-cam-feed {
    height: 110px;
    background: var(--navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    color: rgba(255, 255, 255, .4);
    font-size: .75rem
}

.stn-cam-feed i {
    font-size: 1.6rem
}

.stn-cam-feed.offline {
    background: #1f1f1f;
    color: rgba(255, 255, 255, .25)
}

.stn-cam-lbl {
    padding: .4rem .65rem;
    font-size: .67rem;
    font-weight: 600;
    color: var(--text-2);
    background: var(--surface-3)
}

.dt-length {
    display: none;
}

input::placeholder {
    background-color: #fff;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #fff inset;
    -webkit-text-fill-color: #000;
    background-color: #fff !important;
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
    box-shadow: 0 0 0px 1000px #fff inset;
    -webkit-text-fill-color: #000;
}

.mn-stat-card {
    border-radius: 16px;
    padding: 1.2rem 1.25rem;
    cursor: pointer;
    transition: transform var(--tr), box-shadow var(--tr);
    position: relative;
    overflow: hidden;
    height: 100%
}

.mn-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 27, 53, .18)
}

.mn-stat-card.blue {
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%)
}

.mn-stat-card.orange {
    background: linear-gradient(135deg, #c2410c 0%, #f97316 100%)
}

.mn-stat-card.green {
    background: linear-gradient(135deg, #166534 0%, #22c55e 100%)
}

.mn-stat-card.red {
    background: linear-gradient(135deg, #991b1b 0%, #ef4444 100%)
}

.mn-stat-card.purple {
    background: linear-gradient(135deg, #5b21b6 0%, #8b5cf6 100%)
}

.mn-stat-card.dark {
    background: linear-gradient(135deg, #1e293b 0%, #475569 100%)
}

.mn-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem
}

.mn-stat-lbl {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .75)
}

.mn-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .18);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: .85rem
}

.mn-stat-val {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: .85rem
}

.mn-stat-btn {
    padding: .3rem .9rem;
    border-radius: 8px;
    font-size: .7rem;
    font-weight: 700;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    cursor: pointer;
    transition: background var(--tr);
    font-family: var(--font)
}

.mn-stat-btn:hover {
    background: rgba(255, 255, 255, .3)
}

.mn-status-chip {
    font-size: .65rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    white-space: nowrap
}

.mn-status-chip.created {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.mn-status-chip.progress {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    height: auto;
}

.mn-status-chip.completed {
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.mn-status-chip.sos {
    background: var(--srb);
    color: #991b1b;
    border: 1px solid var(--srbr)
}

.mn-sr-id {
    font-size: .75rem;
    font-weight: 700;
    color: var(--sg)
}

.mn-evidence-chip {
    font-size: .65rem;
    font-weight: 700;
    padding: .18rem .5rem;
    border-radius: 6px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.mn-freq-chip {
    font-size: .65rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: #f5f3ff;
    color: #6d28d9;
    border: 1px solid #ddd6fe
}

.mn-evidence-thumb {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--surface-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    font-size: .6rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--tr)
}

.mn-evidence-thumb i {
    font-size: 1.4rem;
    color: var(--sg)
}

.mn-evidence-thumb:hover {
    border-color: var(--sg);
    background: var(--sgb)
}

.notif-type-chip {
    font-size: .65rem;
    font-weight: 700;
    padding: .22rem .58rem;
    border-radius: 999px;
    white-space: nowrap
}

.notif-type-chip.alert {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.notif-type-chip.offer {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a
}

.notif-type-chip.update {
    background: #f5f3ff;
    color: #5b21b6;
    border: 1px solid #ddd6fe
}

.notif-type-chip.reminder {
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.notif-type-chip.emergency {
    background: var(--srb);
    color: #991b1b;
    border: 1px solid var(--srbr)
}

.notif-target-chip {
    font-size: .68rem;
    font-weight: 700;
    padding: .22rem .6rem;
    border-radius: 999px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .3rem
}

.notif-target-chip.all {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.notif-target-chip.group {
    background: #f5f3ff;
    color: #5b21b6;
    border: 1px solid #ddd6fe
}

.notif-target-chip.individual {
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.notif-target-chip.staff {
    background: var(--syb);
    color: #854d0e;
    border: 1px solid var(--sybr)
}

.notif-count-chip {
    font-size: .68rem;
    font-weight: 700;
    padding: .18rem .5rem;
    border-radius: 6px;
    background: var(--surface-3);
    color: var(--text-2);
    border: 1px solid var(--border)
}

.notif-title {
    font-size: .82rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: .2rem
}

.notif-desc {
    font-size: .72rem;
    color: var(--text-muted);
    max-width: 340px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.notif-send-tabs {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .85rem
}

.notif-send-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .95rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    transition: all var(--tr);
    font-family: var(--font)
}

.notif-send-tab.active {
    background: var(--sgb);
    border-color: var(--sgbr);
    color: var(--sg)
}

.notif-send-tab:hover:not(.active) {
    border-color: var(--sg);
    color: var(--sg)
}

.notif-target-info {
    margin-top: .25rem
}

.notif-target-info-box {
    padding: .65rem .9rem;
    border-radius: 10px;
    font-size: .78rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500
}

.notif-target-info-box.all {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.notif-target-info-box.group {
    background: #f5f3ff;
    color: #5b21b6;
    border: 1px solid #ddd6fe
}

.notif-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .5rem;
    margin-top: .45rem
}

.notif-group-option {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .6rem .75rem;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    cursor: pointer;
    transition: all var(--tr)
}

.notif-group-option:has(input:checked) {
    border-color: var(--sg);
    background: var(--sgb)
}

.notif-group-option input {
    display: none
}

.notif-group-option span {
    font-size: .76rem;
    font-weight: 600;
    color: var(--navy)
}

.notif-group-option small {
    font-size: .62rem;
    color: var(--text-muted)
}

.notif-rider-results {
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    overflow: hidden;
    margin-top: .35rem;
    box-shadow: 0 4px 14px rgba(15, 27, 53, .08)
}

.notif-rider-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .85rem;
    cursor: pointer;
    transition: background var(--tr)
}

.notif-rider-item:hover {
    background: var(--surface-3)
}

.notif-rider-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 9px;

    display: grid;
    place-items: center;
    font-size: .65rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0
}

.notif-selected-riders {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .45rem
}

.notif-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 600;
    padding: .28rem .65rem;
    border-radius: 999px;
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.notif-selected-chip span {
    cursor: pointer;
    font-size: .9rem;
    opacity: .7
}

.notif-selected-chip span:hover {
    opacity: 1
}

.notif-type-selector {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .25rem
}

.notif-type-opt {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .85rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    transition: all var(--tr);
    font-family: var(--font)
}

.notif-type-opt.active {
    background: var(--sgb);
    border-color: var(--sgbr);
    color: var(--sg)
}

.notif-type-opt:hover:not(.active) {
    border-color: var(--sg);
    color: var(--sg)
}

.notif-phone-preview {
    background: #1c1c1e;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25)
}

.notif-phone-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem .85rem;
    background: rgba(255, 255, 255, .06)
}

.notif-phone-content {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem .85rem
}

.notif-phone-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--sg);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: .9rem;
    flex-shrink: 0
}

.notif-phone-title {
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: .2rem
}

.notif-phone-body {
    font-size: .68rem;
    color: rgba(255, 255, 255, .55);
    line-height: 1.5
}

.notif-preview-card {
    background: var(--surface-3);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.1rem
}

.notif-preview-title {
    font-size: .88rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: .35rem
}

.notif-preview-body {
    font-size: .78rem;
    color: var(--text-2);
    line-height: 1.6
}

@media(max-width:576px) {
    .notif-send-tabs {
        gap: .3rem
    }

    .notif-type-selector {
        gap: .3rem
    }
}

.mn-form-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-radius: 14px 14px 0 0
}

.mn-form-hdr.sr {
    background: linear-gradient(135deg, var(--sg) 0%, #0e6650 100%)
}

.mn-form-hdr.sos {
    background: linear-gradient(135deg, #991b1b 0%, #ef4444 100%)
}

.mn-form-hdr-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .25);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: .9rem;
    flex-shrink: 0
}

.mn-form-hdr-title {
    font-size: .9rem;
    font-weight: 600;
    color: #fff
}

.mn-form-hdr-sub {
    font-size: .65rem;
    color: rgba(255, 255, 255, .6);
    margin-top: .08rem
}

.mn-radio-group {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .35rem
}

.mn-radio-opt {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .76rem;
    font-weight: 600;
    padding: .32rem .75rem;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    transition: all var(--tr)
}

.mn-radio-opt:has(input:checked) {
    border-color: var(--sg);
    background: var(--sgb);
    color: var(--sg)
}

.mn-radio-opt input {
    display: none
}

.mn-sos-alert-banner {
    background: var(--srb);
    border: 1px solid var(--srbr);
    border-radius: 10px;
    padding: .65rem .9rem;
    font-size: .78rem;
    font-weight: 600;
    color: #991b1b;
    display: flex;
    align-items: center;
    gap: .5rem
}

.mn-sos-status-note {
    background: var(--syb);
    border: 1px solid var(--sybr);
    border-radius: 10px;
    padding: .55rem .85rem;
    font-size: .76rem;
    color: #854d0e;
    display: flex;
    align-items: center;
    gap: .45rem
}

.mn-status-chip {
    font-size: .65rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    white-space: nowrap
}

.mn-status-chip.created {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.mn-status-chip.progress {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa
}

.mn-status-chip.completed {
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.mn-status-chip.sos {
    background: var(--srb);
    color: #991b1b;
    border: 1px solid var(--srbr)
}

.mn-sr-id {
    font-size: .75rem;
    font-weight: 700;
    color: var(--sg)
}

.inv-items-scroller {
    display: flex;
    gap: .85rem;
    overflow-x: auto;
    padding: .25rem .1rem 1rem;
    scrollbar-width: none
}

.inv-items-scroller::-webkit-scrollbar {
    display: none
}

.inv-item-card {
    min-width: 160px;
    border-radius: 16px;
    padding: 1.1rem 1.1rem .9rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    cursor: pointer;
    transition: transform var(--tr), box-shadow var(--tr)
}

.inv-item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 27, 53, .2)
}

.inv-item-name {
    font-size: .88rem;
    font-weight: 700;
    color: #fff
}

.inv-item-stock {
    font-size: .72rem;
    color: rgba(255, 255, 255, .75);
    margin-bottom: .35rem
}

.inv-item-view-btn {
    display: inline-block;
    padding: .25rem .8rem;
    border-radius: 7px;
    font-size: .68rem;
    font-weight: 700;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    text-decoration: none;
    transition: background var(--tr);
    width: fit-content
}

.inv-item-view-btn:hover {
    background: rgba(255, 255, 255, .35);
    color: #fff
}

.inv-cat-chip {
    font-size: .64rem;
    font-weight: 700;
    padding: .18rem .5rem;
    border-radius: 6px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    white-space: nowrap
}

.inv-stock-chip {
    font-size: .64rem;
    font-weight: 700;
    padding: .18rem .5rem;
    border-radius: 999px;
    white-space: nowrap
}

.inv-stock-chip.in {
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.inv-stock-chip.low {
    background: var(--syb);
    color: #854d0e;
    border: 1px solid var(--sybr)
}

.inv-stock-chip.out {
    background: var(--srb);
    color: #991b1b;
    border: 1px solid var(--srbr)
}

.inv-move-chip {
    font-size: .64rem;
    font-weight: 700;
    padding: .18rem .5rem;
    border-radius: 6px;
    white-space: nowrap
}

.inv-move-chip.added {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0
}

.inv-move-chip.removed {
    background: var(--srb);
    color: #991b1b;
    border: 1px solid var(--srbr)
}

.inv-req-list {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.inv-req-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .65rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    transition: all var(--tr)
}

.inv-req-item:hover {
    border-color: var(--sg);
    background: #f0fdf9
}

.inv-req-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    color: var(--sg);
    font-size: .75rem;
    flex-shrink: 0
}

.inv-req-info {
    flex: 1;
    min-width: 0
}

.inv-req-name {
    font-size: .76rem;
    font-weight: 600;
    color: var(--navy)
}

.inv-req-meta {
    font-size: .62rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.inv-req-status {
    font-size: .6rem;
    font-weight: 700;
    padding: .15rem .45rem;
    border-radius: 999px;
    white-space: nowrap
}

.inv-req-status.pending {
    background: var(--syb);
    color: #854d0e;
    border: 1px solid var(--sybr)
}

.inv-req-status.approved {
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.inv-req-status.rejected {
    background: var(--srb);
    color: #991b1b;
    border: 1px solid var(--srbr)
}

.his-timeline-wrap {
    padding: 1.5rem 1.5rem 1rem;
    overflow-y: scroll;
    max-height: 600px;
}

.his-date-group {
    margin: 1.25rem 0 .85rem
}

.his-date-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: .6rem
}

.his-date-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border)
}

.his-timeline-item {
    display: flex;
    gap: 1rem;
    position: relative;
    margin-bottom: 1rem
}

.his-tl-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: .55rem;
    border: 2.5px solid #fff;
    box-shadow: 0 0 0 2px var(--border);
    z-index: 1
}

.his-tl-dot.added {
    background: var(--sg);
    box-shadow: 0 0 0 2px var(--sgbr)
}

.his-tl-dot.removed {
    background: var(--sr);
    box-shadow: 0 0 0 2px var(--srbr)
}

.his-tl-dot.request {
    background: #d97706;
    box-shadow: 0 0 0 2px #fde68a
}

.his-tl-dot.approved {
    background: var(--sg);
    box-shadow: 0 0 0 2px var(--sgbr)
}

.his-tl-dot.rejected {
    background: var(--sr);
    box-shadow: 0 0 0 2px var(--srbr)
}

.his-tl-line {
    position: absolute;
    left: 6px;
    top: 22px;
    bottom: -16px;
    width: 2px;
    background: var(--border);
    z-index: 0
}

.his-timeline-item:last-child .his-tl-line {
    display: none
}

.his-tl-card {
    flex: 1;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: .85rem 1rem;
    transition: box-shadow var(--tr), border-color var(--tr)
}

.his-tl-card:hover {
    box-shadow: 0 4px 16px rgba(15, 27, 53, .08);
    border-color: var(--sgbr)
}

.his-tl-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .55rem
}

.his-tl-item-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--navy)
}

.his-tl-sku {
    font-size: .62rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: .08rem .38rem
}

.his-tl-time {
    font-size: .65rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
    margin-top: .15rem
}

.his-tl-details {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .85rem;
    margin-bottom: .45rem
}

.his-tl-detail-item {
    font-size: .72rem;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: .3rem
}

.his-tl-detail-item i {
    color: var(--sg);
    font-size: .65rem
}

.his-tl-detail-item strong {
    color: var(--navy)
}

.his-tl-note {
    font-size: .7rem;
    color: var(--text-muted);
    font-style: italic;
    border-top: 1px solid var(--border);
    padding-top: .4rem;
    margin-top: .35rem
}

.his-tl-action-chip {
    font-size: .65rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .3rem
}

.his-tl-action-chip.request {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a
}

.his-tl-action-chip.approved {
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.his-tl-action-chip.rejected {
    background: var(--srb);
    color: #991b1b;
    border: 1px solid var(--srbr)
}

.sos-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.1rem
}

.sos-card {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr)
}

.sos-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(15, 27, 53, .12)
}

.sos-card.open {
    border-color: var(--srbr)
}

.sos-card.open:hover {
    border-color: var(--sr)
}

.sos-card.wip {
    border-color: #fed7aa
}

.sos-card.wip:hover {
    border-color: #f97316
}

.sos-card.resolved {
    border-color: var(--sgbr)
}

.sos-card.resolved:hover {
    border-color: var(--sg)
}

.sos-card-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-3);
    flex-wrap: wrap;
    gap: .4rem
}

.sos-no-chip {
    font-size: .68rem;
    font-weight: 700;
    color: var(--sg);
    background: var(--sgb);
    border: 1px solid var(--sgbr);
    padding: .18rem .5rem;
    border-radius: 6px
}

.sos-type-chip {
    font-size: .65rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap
}

.sos-type-chip.accident {
    background: var(--srb);
    color: #991b1b;
    border: 1px solid var(--srbr)
}

.sos-type-chip.cycle {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa
}

.sos-type-chip.lock {
    background: #f5f3ff;
    color: #5b21b6;
    border: 1px solid #ddd6fe
}

.sos-type-chip.theft {
    background: var(--navy);
    color: #fff;
    border: 1px solid var(--navy)
}

.sos-type-chip.medical {
    background: var(--srb);
    color: #991b1b;
    border: 1px solid var(--srbr)
}

.sos-status-chip {
    font-size: .62rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center
}

.sos-status-chip.open {
    background: var(--srb);
    color: #991b1b;
    border: 1px solid var(--srbr)
}
.sos-status-chip.pending {
    background: #ff8f002e;
    color: #ff8f00;
    border: 1px solid #ff8f00
}
.sos-status-chip.wip {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa
}

.sos-status-chip.resolved {
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.sos-card-body {
    padding: .85rem 1rem
}

.sos-rider-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .75rem
}

.sos-rider-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--sr), #f43f5e);
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0
}

.sos-rider-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--navy)
}

.sos-rider-id {
    font-size: .65rem;
    color: var(--text-muted)
}

.sos-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .3rem .65rem;
    margin-bottom: .65rem
}

.sos-info-item {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    color: var(--text-2)
}

.sos-info-item i {
    color: var(--sg);
    font-size: .62rem;
    width: 12px;
    flex-shrink: 0
}

.sos-desc {
    font-size: .72rem;
    color: var(--text-muted);
    line-height: 1.5;
    background: var(--surface-3);
    border-radius: 8px;
    padding: .5rem .65rem;
    border: 1px solid var(--border)
}

.sos-desc-box {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .75rem 1rem;
    font-size: .8rem;
    color: var(--text-2);
    line-height: 1.6
}

.sos-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--surface-3)
}

.sos-view-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 600;
    padding: .32rem .75rem;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    transition: all var(--tr);
    font-family: var(--font)
}

.sos-view-btn:hover {
    border-color: var(--sg);
    color: var(--sg);
    background: var(--sgb)
}

.sos-action-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 700;
    padding: .32rem .85rem;
    border-radius: 8px;
    border: 1.5px solid var(--sr);
    background: var(--srb);
    color: var(--sr);
    cursor: pointer;
    transition: all var(--tr);
    font-family: var(--font)
}

.sos-action-btn:hover {
    background: var(--sr);
    color: #fff
}

.sos-action-btn.wip {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c
}

.sos-action-btn.wip:hover {
    background: #c2410c;
    color: #fff;
    border-color: #c2410c
}

.sos-action-btn.resolved {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--text-muted)
}

.sos-action-btn.urgent {
    border-color: #991b1b;
    background: #991b1b;
    color: #fff;
    animation: sosUrgent 1.5s ease infinite
}

@keyframes sosUrgent {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, .4)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0)
    }
}

.sos-tbl-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: .68rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0
}

.addmorebtn {
    border: 0;
    background-color: #5b21b6;
    color: white;
    width: max-content;
    font-size: 14px;
    padding: .55rem .85rem;
    display: grid;
    place-content: center;
    border-radius: 4px;
    transform: translate(10px, -5px);
}

.removemorebtn {
    border: 0;
    background-color: #f43f5e;
    color: white;
    width: max-content;
    font-size: 14px;
    padding: .55rem .85rem;
    display: grid;
    place-content: center;
    border-radius: 4px;
    transform: translate(10px, -5px);
}

.removemgbtn {
    border: 0;
    background-color: #f43f5e;
    color: white;
    width: max-content;
    font-size: 14px;
    padding: .55rem .85rem;
    display: grid;
    place-content: center;
    border-radius: 4px;
    transform: translate(10px, -5px);
}

.sos-tbl-avatar.red {
    background: linear-gradient(135deg, var(--sr), #f43f5e)
}

.sos-tbl-avatar.orange {
    background: linear-gradient(135deg, #c2410c, #f97316)
}

.sos-tbl-avatar.green {
    background: linear-gradient(135deg, var(--sg), #22c55e)
}

.sos-tbl-avatar.purple {
    background: linear-gradient(135deg, #5b21b6, #8b5cf6)
}

.sos-tbl-avatar.navy {
    background: linear-gradient(135deg, var(--navy), #475569)
}

.sos-card div.dt-container div.dt-layout-row {
    margin: 0;
}

.is-invalid {
    border: 1px solid red;
}

.is-valid {
    border: 1px solid green;
}

.iss-type-chip {
    font-size: .64rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    white-space: nowrap
}

.iss-type-chip.restock {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.iss-type-chip.maintenance {
    background: var(--syb);
    color: #854d0e;
    border: 1px solid var(--sybr)
}

.iss-type-chip.fielduse {
    background: #f5f3ff;
    color: #5b21b6;
    border: 1px solid #ddd6fe
}

.iss-type-chip.replacement {
    background: var(--surface-3);
    color: var(--text-2);
    border: 1px solid var(--border)
}

.iss-type-chip.emergency {
    background: var(--srb);
    color: #991b1b;
    border: 1px solid var(--srbr)
}

.iss-priority-chip {
    font-size: .62rem;
    font-weight: 700;
    padding: .18rem .5rem;
    border-radius: 999px;
    white-space: nowrap
}

.iss-priority-chip.normal {
    background: var(--surface-3);
    color: var(--text-2);
    border: 1px solid var(--border)
}

.iss-priority-chip.high {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a
}

.iss-priority-chip.urgent {
    background: var(--srb);
    color: #991b1b;
    border: 1px solid var(--srbr)
}

.iss-status-chip {
    font-size: .64rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    white-space: nowrap
}

.iss-status-chip.pending {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a
}

.iss-status-chip.approved {
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.iss-status-chip.rejected {
    background: var(--srb);
    color: #991b1b;
    border: 1px solid var(--srbr)
}

.iss-status-chip.issued {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.iss-view-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-weight: 600;
    padding: .28rem .65rem;
    border-radius: 7px;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    transition: all var(--tr);
    font-family: var(--font)
}

.iss-view-btn:hover {
    border-color: var(--sg);
    color: var(--sg);
    background: var(--sgb)
}

.iss-approve-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-weight: 700;
    padding: .28rem .65rem;
    border-radius: 7px;
    border: 1.5px solid var(--sg);
    background: var(--sgb);
    color: var(--sg);
    cursor: pointer;
    transition: all var(--tr);
    font-family: var(--font)
}

.iss-approve-btn:hover {
    background: var(--sg);
    color: #fff
}

.iss-approve-btn.urgent {
    border-color: var(--sr);
    background: var(--srb);
    color: var(--sr);
    animation: sosUrgent 1.5s ease infinite
}

.iss-issue-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-weight: 700;
    padding: .28rem .65rem;
    border-radius: 7px;
    border: 1.5px solid #1d4ed8;
    background: #eff6ff;
    color: #1d4ed8;
    cursor: pointer;
    transition: all var(--tr);
    font-family: var(--font)
}

.iss-issue-btn:hover {
    background: #1d4ed8;
    color: #fff
}

.cycle_loader {
    width: 106px;
    height: 56px;
    display: block;
    margin: 30px auto;
    background-image: linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), radial-gradient(circle 14px, #FFF 100%, transparent 0);
    background-size: 48px 15px, 15px 35px, 15px 35px, 25px 15px, 28px 28px;
    background-position: 25px 5px, 58px 20px, 25px 17px, 2px 37px, 76px 0px;
    background-repeat: no-repeat;
    position: relative;
    transform: rotate(-45deg);
    box-sizing: border-box;
}

.cycle_loader::after,
.cycle_loader::before {
    content: '';
    position: absolute;
    width: 56px;
    height: 56px;
    border: 6px solid #FFF;
    border-radius: 50%;
    left: -45px;
    top: -10px;
    background-repeat: no-repeat;
    background-image: linear-gradient(#FFF 64px, transparent 0), linear-gradient(#FFF 66px, transparent 0), radial-gradient(circle 4px, #FFF 100%, transparent 0);
    background-size: 40px 1px, 1px 40px, 8px 8px;
    background-position: center center;
    box-sizing: border-box;
    animation: rotation 0.3s linear infinite;
}

.cycle_loader::before {
    left: 25px;
    top: 60px;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.cctv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.1rem
}

.cctv-card {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr)
}

.cctv-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(15, 27, 53, .12);
    border-color: var(--sgbr)
}

.cctv-feed-wrap {
    position: relative;
    height: 160px;
    overflow: hidden;
    cursor: pointer
}

.cctv-feed {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem
}

.cctv-feed.online {
    background: linear-gradient(135deg, #0f1b35 0%, #1e2d52 100%);
    color: rgba(255, 255, 255, .45);
    font-size: .78rem
}

.cctv-feed.online i {
    font-size: 2rem;
    color: rgba(255, 255, 255, .25)
}

.cctv-feed.offline {
    background: linear-gradient(135deg, #1f1f1f 0%, #2d2d2d 100%);
    color: rgba(255, 255, 255, .25);
    font-size: .78rem
}

.cctv-feed.offline i {
    font-size: 2rem;
    color: rgba(255, 255, 255, .2)
}

.cctv-live-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    animation: pulse 1.4s ease infinite
}

.cctv-feed-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity var(--tr);
    cursor: pointer
}

.cctv-feed-overlay.offline-overlay {
    background: rgba(0, 0, 0, .4)
}

.cctv-feed-wrap:hover .cctv-feed-overlay {
    opacity: 1
}

.cctv-card-body {
    padding: .85rem 1rem
}

.cctv-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem
}

.cctv-cam-name {
    font-size: .84rem;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3
}

.cctv-cam-loc {
    font-size: .66rem;
    color: var(--text-muted);
    margin-top: .18rem;
    display: flex;
    align-items: center;
    gap: .28rem
}

.cctv-status-chip {
    font-size: .62rem;
    font-weight: 700;
    padding: .18rem .5rem;
    border-radius: 999px;
    white-space: nowrap
}

.cctv-status-chip.online {
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.cctv-status-chip.offline {
    background: var(--srb);
    color: #991b1b;
    border: 1px solid var(--srbr)
}

.cctv-card-meta {
    display: flex;
    gap: .85rem;
    font-size: .68rem;
    color: var(--text-muted);
    margin-bottom: .75rem
}

.cctv-card-meta i {
    color: var(--sg);
    font-size: .62rem
}

.cctv-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .65rem;
    border-top: 1px solid var(--border)
}

.cctv-open-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 600;
    padding: .32rem .85rem;
    border-radius: 8px;
    border: 1.5px solid var(--sg);
    background: var(--sgb);
    color: var(--sg);
    cursor: pointer;
    transition: all var(--tr);
    font-family: var(--font)
}

.cctv-open-btn:hover {
    background: var(--sg);
    color: #fff
}

.cctv-open-btn.offline {
    border-color: var(--border);
    background: var(--surface-3);
    color: var(--text-muted)
}

.cctv-open-btn.offline:hover {
    border-color: var(--text-2);
    color: var(--text-2)
}

.cctv-more-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    display: grid;
    place-items: center;
    font-size: .8rem;
    cursor: pointer;
    transition: all var(--tr)
}

.cctv-more-btn:hover {
    border-color: var(--sg);
    color: var(--sg)
}

.cctv-type-chip {
    font-size: .64rem;
    font-weight: 600;
    padding: .18rem .5rem;
    border-radius: 6px;
    background: #f5f3ff;
    color: #5b21b6;
    border: 1px solid #ddd6fe
}

.cctv-view-toggle {
    padding: .35rem .85rem;
    border-radius: 8px;
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    transition: all var(--tr);
    font-family: var(--font)
}

.cctv-view-toggle.active {
    background: var(--sgb);
    border-color: var(--sgbr);
    color: var(--sg)
}

.cctv-view-toggle:hover:not(.active) {
    border-color: var(--sg);
    color: var(--sg)
}

.cctv-modal-feed-wrap {
    background: #0a0a0a;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center
}

.cctv-modal-feed-online,
.cctv-modal-feed-offline {
    width: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.cctv-modal-screen {
    width: 100%;
    min-height: 260px;
    background: linear-gradient(135deg, #0f1b35 0%, #162040 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.cctv-modal-screen-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.cctv-modal-live-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    font-size: .65rem;
    font-weight: 700;
    padding: .22rem .6rem;
    border-radius: 999px;
    background: rgba(239, 68, 68, .85);
    color: #fff
}

@media(max-width:576px) {
    .cctv-grid {
        grid-template-columns: 1fr
    }
}
.dep-tabs-wrap {
    display: flex;
    gap: .4rem;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .3rem;
    width: fit-content;
    margin-bottom: 1.5rem
}

.dep-tab-btn {
    padding: .5rem 1.3rem;
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text-muted);
    transition: all var(--tr);
    font-family: var(--font);
    display: inline-flex;
    align-items: center;
    gap: .5rem
}

.dep-tab-btn.active {
    background: #fff;
    color: var(--sg);
    box-shadow: 0 2px 8px rgba(15, 27, 53, .12)
}

.dep-tab-btn:hover:not(.active) {
    color: var(--text-2)
}

.dep-tab-pane {
    display: none
}

.dep-tab-pane.active {
    display: block;
    animation: fadeUp .3s ease
}

.dep-amt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem
}

.dep-amt-card {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem 1.25rem 1.1rem;
    position: relative;
    overflow: hidden;
    transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr)
}

.dep-amt-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(15, 27, 53, .1);
    border-color: var(--sgbr)
}

.dep-amt-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sg), #f43f5e)
}

.dep-amt-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: .85rem
}

.dep-amt-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--sgb);
    border: 1.5px solid var(--sgbr);
    display: grid;
    place-items: center;
    color: var(--sg);
    font-size: 1rem
}

.dep-amt-badge {
    font-size: .62rem;
    font-weight: 700;
    padding: .18rem .55rem;
    border-radius: 999px
}

.dep-amt-badge.active {
    background: var(--sgb);
    color: #16a34a;
    border: 1px solid var(--sgbr)
}
.dep-amt-badge.pending {
    background: #fda6000a;
    color: #fda600;
    border: 1px solid #fda600;
}
.dep-amt-badge.inactive {
    background: var(--srb);
    color: #dc2626;
    border: 1px solid var(--srbr)
}

.dep-amt-lbl {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-bottom: .25rem
}

.dep-amt-val {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -.02em;
    line-height: 1
}

.dep-amt-sub {
    font-size: .72rem;
    color: var(--text-2);
    margin-top: .3rem
}

.dep-amt-divider {
    height: 1px;
    background: var(--border);
    margin: .9rem 0
}

.dep-amt-actions {
    display: flex;
    gap: .5rem
}

.dep-amt-edit-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .45rem 0;
    border-radius: 9px;
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid var(--sg);
    background: var(--sgb);
    color: var(--sg);
    transition: all var(--tr);
    font-family: var(--font)
}

.dep-amt-edit-btn:hover {
    background: var(--sg);
    color: #fff
}

.dep-add-card {
       background: #dcfce7;
    border: 1.5px dashed #04c546;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.5rem;
    cursor: pointer;
    transition: all var(--tr);
    min-height: 158px
}

.dep-add-card:hover {
    border-color: var(--sg);
    background: var(--orange-light)
}

.dep-add-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sgb);
    display: grid;
    place-items: center;
    color: var(--sg);
    font-size: 1.1rem
}

.dep-add-lbl {
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-2)
}

.off-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1.15rem
}

.off-card {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
    position: relative
}

.off-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(15, 27, 53, .12);
    border-color: var(--sgbr)
}

.off-card-banner {
    background: linear-gradient(135deg, var(--sg) 0%, #f43f5e 100%);
    padding: 1.1rem 1.25rem;
    position: relative;
    overflow: hidden
}

.off-card-banner::after {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, .12);
    border-radius: 50%
}

.off-code-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    font-weight: 700;
    padding: .22rem .6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    letter-spacing: .05em;
    margin-bottom: .5rem
}

.off-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em
}

.off-sub {
    font-size: .72rem;
    color: rgba(255, 255, 255, .8);
    margin-top: .15rem
}

.off-card-body {
    padding: 1.1rem 1.25rem
}

.off-desc {
    font-size: .78rem;
    color: var(--text-2);
    line-height: 1.55;
    margin-bottom: .9rem
}

.off-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .4rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .74rem
}

.off-meta-row:last-of-type {
    border-bottom: none
}

.off-meta-lbl {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: .35rem
}

.off-meta-lbl i {
    color: var(--sg);
    font-size: .68rem
}

.off-meta-val {
    font-weight: 700;
    color: var(--navy)
}

.off-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--border)
}

.off-status-chip {
    font-size: .64rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .3rem
}

.off-status-chip.active {
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.off-status-chip.expired {
    background: var(--srb);
    color: #991b1b;
    border: 1px solid var(--srbr)
}

.off-status-chip.scheduled {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.off-card-actions {
    display: flex;
    gap: .5rem
}

.off-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    display: grid;
    place-items: center;
    font-size: .78rem;
    cursor: pointer;
    transition: all var(--tr)
}

.off-icon-btn:hover {
    border-color: var(--sg);
    color: var(--sg);
    background: var(--sgb)
}

.off-icon-btn.del:hover {
    border-color: var(--sr);
    color: var(--sr);
    background: var(--srb)
}

.off-add-card {
     background: var(--sgb);
    border: 1px solid var(--sgbr);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 2rem 1.5rem;
    cursor: pointer;
    transition: all var(--tr);
    min-height: 240px
}

.off-add-card:hover {
    border-color: var(--sg);
    background: var(--orange-light)
}

.off-add-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--sgb);
    display: grid;
    place-items: center;
    color: var(--sg);
    font-size: 1.25rem
}

.off-add-lbl {
    font-size: .84rem;
    font-weight: 700;
    color: var(--text-2)
}

@media(max-width:576px) {
    .dep-tabs-wrap {
        width: 100%
    }

    .dep-tab-btn {
        flex: 1;
        justify-content: center;
        padding: .5rem .6rem
    }
}
.pay-method-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .68rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    white-space: nowrap
}

.pay-method-chip.wallet {
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.pay-method-chip.upi {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.pay-method-chip.paycard {
    background: #f5f3ff;
    color: #5b21b6;
    border: 1px solid #ddd6fe
}

.pay-method-chip.cash {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa
}
.mn-confirm-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: .95rem;
    flex-shrink: 0
}

.mn-confirm-text {
    font-size: .85rem;
    color: var(--text-2);
    line-height: 1.6;
    margin-bottom: .5rem
}

.mn-status-chip.cancelled {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa
} .dep-modal-hdr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.1rem 1.4rem;
        background: linear-gradient(135deg, var(--sg) 0%, #0e6650 100%)
    }

    .dep-modal-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        background: rgba(255, 255, 255, .18);
        border: 1px solid rgba(255, 255, 255, .25);
        display: grid;
        place-items: center;
        color: #fff;
        font-size: .95rem;
        flex-shrink: 0
    }

    .dep-modal-title {
        font-size: .95rem;
        font-weight: 600;
        color: #fff
    }

    .dep-modal-sub {
        font-size: .7rem;
        color: rgba(255, 255, 255, .55);
        margin-top: .1rem
    }

    .dep-view-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .65rem 0;
        border-bottom: 1px solid var(--border)
    }

    .dep-view-row:last-child {
        border-bottom: none
    }

    .dep-view-lbl {
        font-size: .74rem;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: .4rem
    }

    .dep-view-lbl i {
        color: var(--sg);
        font-size: .68rem;
        width: 14px
    }

    .dep-view-val {
        font-size: .82rem;
        font-weight: 700;
        color: var(--navy)
    }

    .off-modal-hdr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.1rem 1.4rem;
        background: linear-gradient(135deg, var(--sg) 0%, #f43f5e 100%)
    }

    .off-modal-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        background: rgba(255, 255, 255, .2);
        border: 1px solid rgba(255, 255, 255, .3);
        display: grid;
        place-items: center;
        color: #fff;
        font-size: .95rem;
        flex-shrink: 0
    }

    .off-modal-title {
        font-size: .95rem;
        font-weight: 600;
        color: #fff
    }

    .off-modal-sub {
        font-size: .7rem;
        color: rgba(255, 255, 255, .8);
        margin-top: .1rem
    }

    .del-modal-icon-wrap {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--srb);
        border: 1.5px solid var(--srbr);
        display: grid;
        place-items: center;
        color: var(--sr);
        font-size: 1.6rem;
        margin: 0 auto 1rem
    }

    .del-modal-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--navy);
        text-align: center;
        margin-bottom: .4rem
    }

    .del-modal-text {
        font-size: .82rem;
        color: var(--text-muted);
        text-align: center;
        line-height: 1.6
    }

    .del-modal-text strong {
        color: var(--navy)
    }
    .noresultfound h5{
        font-weight: bold;
        font-size: 16px;
    }.noresultfound p{
        font-size: 14px;
    }
.ad-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.15rem
}

.ad-card {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr)
}

.ad-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(15, 27, 53, .12);
    border-color: var(--orange-mid)
}

.ad-card-img-wrap {
    position: relative;
    height: 150px;
    overflow: hidden;
    background: var(--surface-3)
}

.ad-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.ad-status-chip {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .64rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px
}

.ad-status-chip.active {
    background: var(--sgb);
    color: #166534;
    border: 1px solid var(--sgbr)
}

.ad-status-chip.expired {
    background: var(--srb);
    color: #991b1b;
    border: 1px solid var(--srbr)
}

.ad-status-chip.scheduled {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.ad-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor
}

.ad-card-body {
    padding: 1rem 1.1rem
}

.ad-card-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem
}

.ad-card-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1
}

.ad-card-dates {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    color: var(--text-2);
    margin-bottom: .55rem
}

.ad-card-dates i:first-child {
    color: var(--sg)
}

.ad-card-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--sg);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%
}

.ad-card-link:hover {
    text-decoration: underline
}

.ad-card-divider {
    height: 1px;
    background: var(--border);
    margin: .75rem 0
}

.ad-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: .4rem
}
.ad-toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer
}

.ad-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0
}

.ad-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 999px;
    transition: background var(--tr);
}

.ad-toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--tr);
    box-shadow: 0 1px 3px rgba(15, 27, 53, .3)
}

.ad-toggle-switch input:checked+.ad-toggle-slider {
    background: var(--sg)
}

.ad-toggle-switch input:checked+.ad-toggle-slider::before {
    transform: translateX(18px)
}

.ad-toggle-switch input:focus-visible+.ad-toggle-slider {
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .25)
}
.ad-live-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .7rem .9rem;
    gap: 1rem
}

.ad-live-toggle-sub {
    font-size: .68rem;
    color: var(--text-muted)
}