:root {
    --navy:#053d53;
    --deep:#063044;
    --teal:#05698a;
    --blue:#0d789c;
    --bg:#f4f7fa;
    --ink:#182c3b;
    --muted:#647888;
    --border:#e1e9ee;
    --white:#fff;
    --radius:15px;
}

* {
    box-sizing:border-box;
}

html {
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    color:var(--ink);
}

body {
    margin:0;
    background:var(--bg);
    font-size:14px;
}

a {
    color:#066886;
    text-decoration:none;
}

a:hover {
    text-decoration:underline;
}

button,input,select,textarea {
    font:inherit;
}

button {
    cursor:pointer;
}

h1,h2,h3,p {
    margin-top:0;
}

h1 {
    font-size:clamp(24px,3vw,32px);
    line-height:1.23;
    margin-bottom:10px;
    letter-spacing:-.03em;
}

h2 {
    font-size:18px;
    font-weight:750;
    margin-bottom:18px;
}

p {
    line-height:1.5;
}

.muted {
    color:var(--muted);
}

small {
    font-size:12px;
    color:var(--muted);
}

small:not(.profile small) {
    display:block;
    margin-top:5px;
}

.eyebrow {
    font-size:11px;
    letter-spacing:1.5px;
    font-weight:800;
    color:var(--blue);
}

.center {
    text-align:center;
}

.auth-page {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:35px 15px;
    background:radial-gradient(circle at 30% 5%,#e8f5fa,transparent 36%),linear-gradient(145deg,#f8fafb,#eaf1f5);
    flex-direction:column;
}

.auth-card {
    width:min(460px,100%);
    padding:32px 42px 36px;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:0 22px 65px #0d3b4d1c;
    border-radius:18px;
}

.auth-logo {
    width:min(390px,100%);
    height:170px;
    object-fit:contain;
    display:block;
    margin:0 auto 8px;
}

.auth-page h1 {
    text-align:center;
}

.auth-page .muted {
    text-align:center;
    margin:10px 0 27px;
}

.auth-page .footer {
    background:transparent;
    color:#7b8a95;
}

.app-page {
    min-height:100vh;
}

.sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:255px;
    background:linear-gradient(170deg,#05364b,#032d40);
    color:#eaf4f7;
    display:flex;
    flex-direction:column;
    z-index:3;
}

.brand {
    padding:10px 10px 18px;
    border-bottom:1px solid #ffffff18;
}

.brand img {
    display:block;
    width:100%;
    max-width:100%;
    height:150px;
    object-fit:contain;
    object-position:center;
    background-color:#ffffff;
    border-radius:10px;
    padding:4px;
    margin:0 0 12px 0;
}

.brand p {
    font-size:12px;
    letter-spacing:1.8px;
    text-transform:uppercase;
    color:#9dc3d2;
    margin:0;
    font-weight:700;
}

.sidebar nav {
    padding:24px 13px;
    flex:1;
    overflow-y:auto;
}

.sidebar nav a {
    display:block;
    border-radius:9px;
    padding:12px 14px;
    margin-bottom:5px;
    color:#d4e1e8;
    font-weight:550;
}

.sidebar nav a:hover,.sidebar nav a.active {
    background:#13709077;
    color:#fff;
    text-decoration:none;
}

.sidebar-footer {
    display:flex;
    align-items:center;
    gap:9px;
    border-top:1px solid #ffffff21;
    padding:15px 12px;
}

.avatar {
    width:34px;
    height:34px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff;
    color:var(--navy);
    font-weight:800;
}

.profile {
    flex:1;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.profile strong {
    display:block;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.profile small {
    display:block;
    color:#bad3de;
}

.ghost {
    background:transparent;
    border:0;
    color:#fff;
    font-size:23px;
}

.content {
    margin-left:255px;
    padding:36px min(4%,52px) 65px;
    min-height:calc(100vh - 30px);
    max-width:1700px;
}

.page-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:10px;
    margin-bottom:26px;
}

.page-head h1 {
    margin:0;
}

.today {
    color:#708493;
}

.panel {
    background:white;
    border-radius:var(--radius);
    padding:23px 25px;
    margin-bottom:23px;
    border:1px solid var(--border);
    box-shadow:0 5px 20px #284e6710;
}

.panel.narrow {
    max-width:900px;
}

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

.two-columns>.panel {
    min-width:0;
}

.stats {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:23px;
}

.stat {
    min-height:114px;
    padding:19px 21px;
    background:white;
    border-radius:var(--radius);
    border:1px solid var(--border);
}

.stat span {
    color:var(--muted);
    font-size:12px;
    font-weight:650;
}

.stat strong {
    display:block;
    font-size:34px;
    color:var(--navy);
    margin-top:10px;
    line-height:1;
}

.table-wrap {
    overflow:auto;
    width:100%;
    margin-bottom:16px;
}

table {
    border-collapse:collapse;
    width:100%;
    font-size:13px;
    min-width:570px;
}

th,td {
    text-align:left;
    padding:13px 10px;
    border-bottom:1px solid #edf2f5;
    vertical-align:top;
}

th {
    color:#607484;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
    font-weight:800;
    background:#fbfcfd;
}

tbody tr:hover {
    background:#fafcfe;
}

td strong {
    color:#14374a;
}

.actions {
    white-space:nowrap;
}

.actions a {
    display:inline-block;
    margin-right:11px;
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:0;
    border-radius:9px;
    padding:11px 18px;
    font-weight:750;
    font-size:13px;
    text-decoration:none!important;
}

.btn.primary {
    background:#086786;
    color:white;
}

.btn.primary:hover {
    background:#045470;
}

.btn.secondary {
    background:#e7f2f6;
    color:var(--navy);
}

.btn.secondary:hover {
    background:#d3e9f0;
}

.stack {
    display:flex;
    flex-direction:column;
    gap:15px;
}

.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:17px;
}

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

.form-grid>.actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

label {
    display:block;
    color:#344c5b;
    font-size:13px;
    font-weight:650;
}

input:not([type=checkbox]),select,textarea {
    display:block;
    width:100%;
    border-radius:9px;
    border:1px solid #cad8df;
    padding:11px 12px;
    margin-top:7px;
    color:var(--ink);
    background:white;
    outline:none;
}

input:focus,select:focus,textarea:focus {
    border-color:#0b7a9e;
    box-shadow:0 0 0 3px #0b7a9e1c;
}

input[type=file] {
    font-size:12px;
}

textarea {
    resize:vertical;
}

.checkbox {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
}

.checkbox input {
    accent-color:#05698a;
}

.filter-row {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin-bottom:20px;
}

.filter-row input {
    width:min(420px,100%);
    margin-top:0;
}

.alert {
    padding:13px 18px;
    border-radius:9px;
    margin:10px 0 20px;
    border:1px solid #bdddc6;
    background:#eefaf1;
    color:#245e36;
}

.alert.warn {
    background:#fff6df;
    border-color:#edcf88;
    color:#7b5410;
}

.alert.bad {
    background:#fff2f1;
    border-color:#f3bfbb;
    color:#9c2c22;
}

.tag {
    display:inline-block;
    border-radius:20px;
    padding:4px 9px;
    font-size:11px;
    font-weight:750;
}

.tag.success {
    color:#267449;
    background:#e4f8ee;
}

.tag.neutral {
    color:#526b7c;
    background:#eaf0f5;
}

.footer {
    text-align:center;
    margin-left:255px;
    padding:12px;
    color:#8a9ba6;
    font-size:11px;
}

fieldset {
    border:1px solid var(--border);
    border-radius:10px;
    padding:14px;
}

legend {
    color:var(--muted);
    font-weight:650;
}

.inline {
    display:inline;
}

.link-button {
    border:0;
    background:transparent;
    color:#05698a;
    padding:0;
    font-weight:600;
}

.micro-form {
    padding:10px 0;
}

.micro-form .btn {
    margin-top:10px;
}

details {
    margin-top:10px;
    white-space:normal;
    min-width:170px;
}

summary {
    cursor:pointer;
    color:#076386;
}

details form {
    margin:10px 0;
}

.auth-card .btn {
    width:100%;
}

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

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

}

@media(max-width:800px) {
    .sidebar {
        position:static;
        width:100%;
        height:auto;
    }

    .brand {
        padding:8px 16px;
        display:flex;
        align-items:center;
        gap:20px;
    }

    .brand img {
        width:190px;
        max-width:190px;
        height:90px;
        object-fit:contain;
        object-position:center;
        padding:2px;
        margin:0;
    }

    .brand p {
        letter-spacing:.5px;
    }

    .sidebar nav {
        display:flex;
        overflow-x:auto;
        padding:8px 10px;
        gap:3px;
    }

    .sidebar nav a {
        white-space:nowrap;
        margin:0;
        font-size:12px;
        padding:10px;
    }

    .sidebar-footer {
        display:none;
    }

    .content,.footer {
        margin-left:0;
    }

    .content {
        padding:20px 15px 35px;
        min-height:auto;
    }

    .panel {
        padding:19px 14px;
    }

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

    .stats {
        gap:8px;
    }

    .stat {
        padding:13px;
        min-height:95px;
    }

    .stat strong {
        font-size:26px;
    }

    .auth-card {
        padding:25px 20px;
    }

    .auth-logo {
        height:120px;
    }

    .today {
        display:none;
    }

}