:root {
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color:
        #111827;

    background:
        #f5f6f8;
}

* {
    box-sizing:
        border-box;
}

html,
body {
    margin:
        0;

    min-height:
        100%;
}

button,
input {
    font:
        inherit;
}

button {
    cursor:
        pointer;
}


/* LOGIN */

.login-shell {
    min-height:
        100vh;

    display:
        grid;

    place-items:
        center;

    padding:
        30px;

    background:
        #f5f6f8;
}

.login-card {
    width:
        min(100%, 430px);

    padding:
        36px;

    background:
        #ffffff;

    border:
        1px solid #e5e7eb;

    border-radius:
        18px;

    box-shadow:
        0 20px 60px
        rgba(17, 24, 39, 0.08);
}

.login-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    margin-bottom:
        32px;
}

.login-brand h1 {
    margin:
        0;

    font-size:
        23px;
}

.login-brand p {
    margin:
        5px 0 0;

    color:
        #6b7280;

    font-size:
        13px;
}

.brand-mark {
    width:
        46px;

    height:
        46px;

    flex:
        0 0 auto;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        #111827;

    color:
        #ffffff;

    font-size:
        21px;

    font-weight:
        750;
}

.login-card form {
    display:
        grid;

    gap:
        18px;
}

.login-card label {
    display:
        grid;

    gap:
        8px;

    color:
        #374151;

    font-size:
        13px;

    font-weight:
        600;
}

.login-card input {
    width:
        100%;

    height:
        45px;

    padding:
        0 13px;

    border:
        1px solid #d1d5db;

    border-radius:
        9px;

    outline:
        none;
}

.login-card input:focus,
.search-input:focus {
    border-color:
        #111827;

    box-shadow:
        0 0 0 3px
        rgba(17, 24, 39, 0.08);
}

.form-error {
    margin:
        16px 0 0;

    color:
        #b42318;

    font-size:
        13px;
}


/* BUTTONS */

.button {
    min-height:
        42px;

    padding:
        0 16px;

    border:
        0;

    border-radius:
        9px;

    font-weight:
        650;
}

.button-primary {
    background:
        #111827;

    color:
        #ffffff;
}

.button-secondary {
    background:
        #ffffff;

    border:
        1px solid #d1d5db;

    color:
        #111827;
}

.button:disabled {
    opacity:
        0.55;

    cursor:
        wait;
}


/* APP */

.app {
    min-height:
        100vh;

    display:
        grid;

    grid-template-columns:
        238px minmax(0, 1fr);

    background:
        #f5f6f8;
}

.sidebar {
    position:
        sticky;

    top:
        0;

    height:
        100vh;

    display:
        flex;

    flex-direction:
        column;

    padding:
        22px 16px;

    background:
        #111827;

    color:
        #ffffff;
}

.sidebar-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        0 8px 24px;
}

.sidebar-brand .brand-mark {
    background:
        #ffffff;

    color:
        #111827;
}

.sidebar-brand div:last-child {
    display:
        grid;

    gap:
        1px;
}

.sidebar-brand strong {
    font-size:
        17px;
}

.sidebar-brand span {
    color:
        #9ca3af;

    font-size:
        12px;
}

.nav {
    display:
        grid;

    gap:
        5px;
}

.nav-item {
    width:
        100%;

    min-height:
        43px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        0 12px;

    border:
        0;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #c7cbd1;

    text-align:
        left;

    font-size:
        14px;
}

.nav-item:hover:not(.disabled) {
    background:
        rgba(255, 255, 255, 0.06);

    color:
        #ffffff;
}

.nav-item.active {
    background:
        #ffffff;

    color:
        #111827;

    font-weight:
        650;
}

.nav-item.disabled {
    cursor:
        default;

    opacity:
        0.45;
}

.nav-icon {
    width:
        18px;

    text-align:
        center;
}

.coming-soon {
    margin-left:
        auto;

    padding:
        2px 6px;

    border-radius:
        20px;

    background:
        rgba(255, 255, 255, 0.08);

    font-size:
        9px;
}

.sidebar-footer {
    margin-top:
        auto;

    padding-top:
        18px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.1);
}

.sidebar-user {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 5px 14px;
}

.user-avatar {
    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #374151;

    color:
        #ffffff;

    font-weight:
        700;
}

.user-info {
    min-width:
        0;

    display:
        grid;

    gap:
        2px;
}

.user-info strong {
    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        13px;
}

.user-info span {
    color:
        #9ca3af;

    font-size:
        11px;

    text-transform:
        capitalize;
}

.logout-button {
    width:
        100%;

    height:
        36px;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius:
        7px;

    background:
        transparent;

    color:
        #d1d5db;

    font-size:
        12px;
}


/* WORKSPACE */

.workspace {
    min-width:
        0;
}

.topbar {
    min-height:
        86px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        18px 30px;

    background:
        #ffffff;

    border-bottom:
        1px solid #e5e7eb;
}

.topbar h1 {
    margin:
        0;

    font-size:
        22px;

    letter-spacing:
        -0.02em;
}

.topbar p {
    margin:
        4px 0 0;

    color:
        #6b7280;

    font-size:
        13px;
}

.topbar-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}

.last-updated {
    color:
        #6b7280;

    font-size:
        11px;
}

.content {
    padding:
        26px 30px 40px;
}


/* SYSTEM */

.system-message {
    margin:
        20px 30px 0;

    padding:
        11px 14px;

    border:
        1px solid #fecaca;

    border-radius:
        8px;

    background:
        #fef2f2;

    color:
        #991b1b;

    font-size:
        13px;
}


/* METRICS */

.metric-grid {
    display:
        grid;

    grid-template-columns:
        repeat(5, minmax(150px, 1fr));

    gap:
        14px;

    margin-bottom:
        18px;
}

.metric-card {
    min-height:
        142px;

    padding:
        18px;

    background:
        #ffffff;

    border:
        1px solid #e5e7eb;

    border-radius:
        11px;
}

.metric-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    color:
        #6b7280;

    font-size:
        12px;

    font-weight:
        600;
}

.metric-dot {
    width:
        8px;

    height:
        8px;

    border-radius:
        50%;
}

.metric-dot.good {
    background:
        #16a34a;
}

.metric-dot.neutral {
    background:
        #6b7280;
}

.metric-card > strong {
    display:
        block;

    margin-top:
        18px;

    color:
        #111827;

    font-size:
        30px;

    line-height:
        1;

    letter-spacing:
        -0.04em;
}

.metric-card small {
    display:
        block;

    margin-top:
        9px;

    color:
        #9ca3af;

    font-size:
        11px;
}


/* PANEL */

.panel {
    margin-top:
        18px;

    background:
        #ffffff;

    border:
        1px solid #e5e7eb;

    border-radius:
        11px;
}

.panel-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        18px 20px;

    border-bottom:
        1px solid #e5e7eb;
}

.panel-header h2 {
    margin:
        0;

    font-size:
        15px;
}

.panel-header p {
    margin:
        4px 0 0;

    color:
        #6b7280;

    font-size:
        11px;
}

.text-button {
    border:
        0;

    background:
        transparent;

    color:
        #374151;

    font-size:
        12px;

    font-weight:
        650;
}

.health-overview {
    display:
        grid;

    grid-template-columns:
        repeat(5, 1fr);

    padding:
        20px;
}

.health-item {
    padding:
        5px 20px;

    border-right:
        1px solid #e5e7eb;
}

.health-item:first-child {
    padding-left:
        0;
}

.health-item:last-child {
    border-right:
        0;
}

.health-item span {
    display:
        block;

    color:
        #6b7280;

    font-size:
        11px;
}

.health-item strong {
    display:
        block;

    margin-top:
        7px;

    font-size:
        22px;
}


/* ATTENTION */

.attention-list {
    display:
        grid;
}

.attention-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        14px 20px;

    border-bottom:
        1px solid #f0f1f3;
}

.attention-row:last-child {
    border-bottom:
        0;
}

.attention-main {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}

.attention-indicator {
    width:
        9px;

    height:
        9px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        #dc2626;
}

.attention-copy strong {
    display:
        block;

    font-size:
        13px;
}

.attention-copy span {
    display:
        block;

    margin-top:
        3px;

    color:
        #6b7280;

    font-size:
        11px;
}

.attention-time {
    color:
        #9ca3af;

    font-size:
        11px;

    white-space:
        nowrap;
}

.attention-clear {
    padding:
        23px 20px;

    color:
        #6b7280;

    font-size:
        13px;
}


/* FLEET */

.fleet-panel {
    margin-top:
        0;
}

.fleet-tools {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}

.search-input {
    width:
        240px;

    height:
        38px;

    padding:
        0 12px;

    border:
        1px solid #d1d5db;

    border-radius:
        8px;

    outline:
        none;

    background:
        #ffffff;

    font-size:
        12px;
}

.table-wrap {
    width:
        100%;

    overflow-x:
        auto;
}

table {
    width:
        100%;

    border-collapse:
        collapse;

    table-layout:
        auto;
}

th,
td {
    padding:
        13px 15px;

    border-bottom:
        1px solid #eef0f2;

    text-align:
        left;

    white-space:
        nowrap;
}

th {
    background:
        #fafafa;

    color:
        #6b7280;

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.04em;
}

td {
    color:
        #374151;

    font-size:
        12px;
}

tbody tr:hover {
    background:
        #fafafa;
}

.device-name {
    display:
        grid;

    gap:
        3px;
}

.device-name strong {
    color:
        #111827;

    font-size:
        12px;
}

.device-name span {
    color:
        #9ca3af;

    font-size:
        10px;
}

.status {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        4px 8px;

    border-radius:
        20px;

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.025em;
}

.status::before {
    content:
        "";

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;
}

.status-online,
.status-ok {
    background:
        #ecfdf3;

    color:
        #067647;
}

.status-online::before,
.status-ok::before {
    background:
        #12b76a;
}

.status-offline,
.status-no_fix {
    background:
        #fef3f2;

    color:
        #b42318;
}

.status-offline::before,
.status-no_fix::before {
    background:
        #f04438;
}

.status-stale {
    background:
        #fffaeb;

    color:
        #b54708;
}

.status-stale::before {
    background:
        #f79009;
}

.status-unknown {
    background:
        #f2f4f7;

    color:
        #667085;
}

.status-unknown::before {
    background:
        #98a2b3;
}

.empty-state {
    padding:
        40px;

    color:
        #6b7280;

    text-align:
        center;

    font-size:
        13px;
}


/* RESPONSIVE */

@media (max-width: 1150px) {

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

    .health-overview {
        grid-template-columns:
            repeat(3, 1fr);

        gap:
            20px 0;
    }

    .health-item:nth-child(3) {
        border-right:
            0;
    }
}


@media (max-width: 780px) {

    .app {
        display:
            block;
    }

    .sidebar {
        position:
            static;

        width:
            100%;

        height:
            auto;

        padding:
            14px;
    }

    .nav {
        display:
            flex;

        overflow-x:
            auto;
    }

    .nav-item {
        width:
            auto;

        flex:
            0 0 auto;
    }

    .nav-item.disabled {
        display:
            none;
    }

    .sidebar-footer {
        display:
            none;
    }

    .topbar {
        align-items:
            flex-start;

        padding:
            18px;
    }

    .topbar-actions {
        align-items:
            flex-end;

        flex-direction:
            column;
    }

    .content {
        padding:
            18px;
    }

    .system-message {
        margin:
            15px 18px 0;
    }

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

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

    .health-item {
        border:
            0;
    }

    .fleet-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .search-input {
        width:
            100%;
    }

    .fleet-tools {
        width:
            100%;
    }
}


@media (max-width: 480px) {

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

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


/*
 * HTML hidden must always win over component display rules.
 */
[hidden] {
    display: none !important;
}


/*
 * The native hidden attribute must override
 * component display declarations.
 */
[hidden] {
    display: none !important;
}


/* Fully Fleet additions */

.health-overview {
    grid-template-columns:
        repeat(6, 1fr);
}

.battery-cell {
    min-width:
        70px;

    display:
        grid;

    gap:
        5px;
}

.battery-cell strong {
    font-size:
        11px;
}

.battery-bar {
    width:
        58px;

    height:
        4px;

    overflow:
        hidden;

    display:
        block;

    border-radius:
        20px;

    background:
        #e5e7eb;
}

.battery-bar > span {
    height:
        100%;

    display:
        block;

    border-radius:
        inherit;

    background:
        #667085;
}


@media (max-width: 1150px) {

    .health-overview {
        grid-template-columns:
            repeat(3, 1fr);
    }
}


@media (max-width: 780px) {

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


@media (max-width: 480px) {

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