* {
    box-sizing:border-box
}
body {
    margin:0;
    font-family:Inter,Arial;
    background:#f5f7fb;
    color:#17213a
}
.app-shell {
    display:flex;
    min-height:100vh
}
.sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:238px;
    background:linear-gradient(180deg,#0c1c43,#09162f);
    color:#fff;
    padding:20px 14px;
    display:flex;
    flex-direction:column;
    z-index:10;
    height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:#4569c8 #09162f
}
.brand {
    display:flex;
    gap:11px;
    align-items:center;
    padding:0 8px 24px
}
.brand-mark {
    width:34px;
    height:34px;
    border-radius:50%;
    border:2px solid #ffb340;
    color:#ffb340;
    display:grid;
    place-items:center
}
.brand strong {
    font-size:18px
}
.brand small {
    display:block;
    color:#9fb0d2;
    font-size:10px;
    margin-top:3px
}
.sidebar nav {
    display:grid;
    gap:5px;
    flex:0 0 auto
}
.sidebar::-webkit-scrollbar {
    width:7px
}
.sidebar::-webkit-scrollbar-track {
    background:#09162f
}
.sidebar::-webkit-scrollbar-thumb {
    background:#4569c8;
    border-radius:10px
}
.sidebar::-webkit-scrollbar-thumb:hover {
    background:#5c7be0
}
.sidebar nav a {
    color:#dbe5ff;
    text-decoration:none;
    padding:11px 12px;
    border-radius:8px;
    display:flex;
    gap:11px;
    align-items:center;
    font-size:13px;
    font-weight:600
}
.sidebar nav a:hover,.sidebar nav a.active {
    background:linear-gradient(90deg,#2168f3,#6048ef);
    color:#fff;
    box-shadow:0 8px 20px #16378466
}
.nav-icon {
    width:22px;
    height:22px;
    border:1px solid #ffffff44;
    border-radius:6px;
    display:grid;
    place-items:center;
    font-size:10px;
    font-weight:800;
    letter-spacing:.3px
}
.sidebar-card {
    margin-top:auto;
    border-top:1px solid #ffffff1f;
    padding:17px 8px 0;
    display:grid;
    gap:4px
}
.sidebar-card span {
    font-size:11px;
    color:#9fb0d2
}
.main {
    margin-left:238px;
    width:calc(100% - 238px)
}
.topbar {
    height:68px;
    background:#fff;
    border-bottom:1px solid #e7ebf3;
    display:flex;
    align-items:center;
    padding:0 22px;
    position:sticky;
    top:0;
    z-index:5
}
.menu-btn {
    border:0;
    background:transparent;
    font-size:20px
}
.global-search {
    margin-left:20px;
    background:#f5f7fb;
    border:1px solid #edf0f6;
    border-radius:22px;
    padding:9px 14px;
    width:360px;
    color:#70809e
}
.global-search input {
    border:0;
    outline:0;
    background:transparent;
    width:90%
}
.top-actions {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:10px
}
.top-actions small {
    display:block;
    color:#8390a9;
    font-size:10px
}
.avatar {
    width:36px;
    height:36px;
    border-radius:50%;
    background:#dce6ff;
    display:grid;
    place-items:center;
    font-weight:800
}
.logout {
    font-size:11px;
    color:#e45555;
    text-decoration:none;
    margin-left:7px
}
.content {
    padding:22px
}
.page-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px
}
.page-head h1 {
    font-size:24px;
    margin:0
}
.page-head p {
    margin:5px 0 0;
    color:#7d899f;
    font-size:12px
}
.btn {
    border:0;
    border-radius:7px;
    padding:10px 14px;
    font-weight:700;
    font-size:12px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
    cursor:pointer
}
.btn-primary {
    background:#2168f3;
    color:#fff
}
.btn-success {
    background:#19a763;
    color:#fff
}
.btn-danger {
    background:#ef4d5a;
    color:#fff
}
.btn-light {
    background:#fff;
    border:1px solid #dfe4ee;
    color:#34415a
}
.grid {
    display:grid;
    gap:15px
}
.kpis {
    grid-template-columns:repeat(4,1fr)
}
.card {
    background:#fff;
    border:1px solid #e7ebf3;
    border-radius:11px;
    box-shadow:0 3px 12px #2537600a
}
.kpi {
    padding:18px;
    display:flex;
    justify-content:space-between;
    min-height:112px
}
.kpi small {
    color:#6e7c96;
    font-weight:600
}
.kpi h3 {
    margin:12px 0 4px;
    font-size:22px
}
.kpi span {
    font-size:11px;
    color:#92a0b8
}
.kpi-icon {
    width:45px;
    height:45px;
    border-radius:50%;
    background:#e8edff;
    color:#4454ef;
    display:grid;
    place-items:center;
    font-size:20px
}
.two-col {
    grid-template-columns:1.35fr .85fr;
    margin-top:15px
}
.card-head {
    padding:16px 17px;
    border-bottom:1px solid #edf0f5;
    display:flex;
    justify-content:space-between;
    align-items:center
}
.card-head h3 {
    margin:0;
    font-size:15px
}
.card-body {
    padding:16px
}
.chart {
    height:245px;
    position:relative;
    background:linear-gradient(#fff,#fbfcff);
    overflow:hidden
}
.chart:before {
    content:'';
    position:absolute;
    inset:20px;
    background:repeating-linear-gradient(to bottom,#edf1f7 0,#edf1f7 1px,transparent 1px,transparent 42px)
}
.chart-line {
    position:absolute;
    left:7%;
    right:5%;
    bottom:22%;
    height:55%;
    border-bottom:3px solid #3567f4;
    transform:skewY(-7deg);
    filter:drop-shadow(0 9px 7px #8ea9ff55)
}
.activity {
    display:grid;
    gap:0
}
.activity div {
    display:flex;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid #eff2f7;
    font-size:12px
}
.activity time {
    color:#8995aa
}
.table-wrap {
    overflow:auto
}
.table {
    width:100%;
    border-collapse:collapse;
    font-size:12px
}
.table th {
    background:#f8f9fc;
    color:#53617b;
    text-align:left;
    padding:12px;
    border-bottom:1px solid #e8ecf3
}
.table td {
    padding:12px;
    border-bottom:1px solid #edf0f5;
    white-space:nowrap
}
.badge {
    padding:5px 8px;
    border-radius:6px;
    font-size:10px;
    font-weight:700
}
.green {
    background:#ddf8e8;
    color:#159a55
}
.blue {
    background:#e1efff;
    color:#2580de
}
.orange {
    background:#fff0d8;
    color:#dd8a12
}
.red {
    background:#ffe2e5;
    color:#df3f4f
}
.actions {
    display:flex;
    gap:5px
}
.icon-btn {
    width:27px;
    height:27px;
    border-radius:50%;
    border:1px solid #dde4ef;
    background:#fff;
    text-decoration:none;
    display:grid;
    place-items:center;
    font-size:11px
}
.filters {
    padding:14px;
    display:grid;
    grid-template-columns:2fr repeat(3,1fr) auto auto;
    gap:10px
}
.input,.select,.textarea {
    width:100%;
    border:1px solid #dfe5ef;
    border-radius:7px;
    padding:10px 11px;
    font:inherit;
    background:#fff
}
.textarea {
    min-height:95px;
    resize:vertical
}
.form-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px
}
.form-section {
    padding:17px
}
.form-section h3 {
    margin:0 0 15px;
    font-size:14px
}
.field label {
    display:block;
    font-size:11px;
    font-weight:700;
    color:#4f5e78;
    margin-bottom:7px
}
.form-actions {
    display:flex;
    justify-content:flex-end;
    gap:9px;
    padding-top:18px
}
.detail-grid {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:15px
}
.vehicle-image {
    width:100%;
    height:320px;
    object-fit:cover;
    border-radius:9px;
    background:#edf1f7
}
.info-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0
}
.info-list div {
    padding:11px;
    border-bottom:1px solid #edf0f5;
    font-size:12px
}
.info-list b {
    color:#7f8ca2;
    font-weight:600
}
.doc-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px
}
.doc-card {
    border:1px solid #e4e9f1;
    border-radius:9px;
    padding:14px
}
.doc-card strong {
    display:block;
    font-size:12px
}
.doc-card small {
    color:#8592a7
}
.alert {
    padding:12px 14px;
    border-radius:8px;
    margin-bottom:14px;
    font-size:12px
}
.success {
    background:#ddf8e8;
    color:#187844
}
.error {
    background:#ffe2e5;
    color:#ad2735
}
.login-page {
    min-height:100vh;
    display:grid;
    place-items:center;
    background:radial-gradient(circle at 20% 20%,#2f57cc,#09162f 65%)
}
.login-box {
    width:390px;
    background:#fff;
    border-radius:18px;
    padding:32px;
    box-shadow:0 30px 70px #0005
}
.login-box h1 {
    margin:0 0 8px
}
.login-box p {
    color:#79869e;
    margin:0 0 24px
}
.login-box .field {
    margin-bottom:14px
}
@media(max-width:1100px) {
    .kpis {
        grid-template-columns:repeat(2,1fr)
    }
    .two-col,.detail-grid {
        grid-template-columns:1fr
    }
    .filters {
        grid-template-columns:1fr 1fr
    }
    .doc-grid {
        grid-template-columns:repeat(2,1fr)
    }
}
@media(max-width:760px) {
    .sidebar {
        width:76px
    }
    .brand div:last-child,.sidebar nav a:not(.active) {
        font-size:0
    }
    .sidebar nav a {
        justify-content:center
    }
    .sidebar-card {
        display:none
    }
    .main {
        margin-left:76px;
        width:calc(100% - 76px)
    }
    .global-search {
        width:180px
    }
    .top-actions div:not(.avatar) {
        display:none
    }
    .content {
        padding:12px
    }
    .kpis,.form-grid,.filters {
        grid-template-columns:1fr
    }
    .doc-grid {
        grid-template-columns:1fr 1fr
    }
}

.filters.compact{grid-template-columns:2fr 1fr 1fr 1fr auto auto}.filters input,.filters select{min-width:0}@media(max-width:1100px){.filters.compact{grid-template-columns:1fr 1fr}}@media(max-width:760px){.filters.compact{grid-template-columns:1fr}}