/* ============================================================
   CRM System — Design System
   Warehouse Booking CRM  |  UI Kit
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
    /* Brand */
    --c-brand-50:  #eef2ff;
    --c-brand-100: #e0e7ff;
    --c-brand-200: #c7d2fe;
    --c-brand-300: #a5b4fc;
    --c-brand-400: #818cf8;
    --c-brand-500: #4f46e5;
    --c-brand-600: #4338ca;
    --c-brand-700: #3730a3;
    --c-brand-900: #1e1b4b;

    /* Ink / Navy (sidebar) */
    --c-navy-900: #0f172a;
    --c-navy-800: #131c31;
    --c-navy-700: #1e293b;

    /* Neutral */
    --c-bg:        #f4f6fb;
    --c-surface:   #ffffff;
    --c-border:    #e6e9f2;
    --c-border-2:  #eef1f7;
    --c-text:      #101828;
    --c-text-2:    #667085;
    --c-text-3:    #98a2b3;

    /* Semantic */
    --c-success: #12b76a;
    --c-success-bg: #e7f8f0;
    --c-warning: #f79009;
    --c-warning-bg: #fef4e6;
    --c-danger:  #f04438;
    --c-danger-bg: #feecea;
    --c-info:    #2e90fa;
    --c-info-bg: #e8f3ff;
    --c-purple:  #7a5af8;
    --c-purple-bg: #f1eeff;
    --c-teal:    #06aed4;
    --c-teal-bg: #e5f7fb;

    /* Elevation */
    --sh-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --sh-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --sh-md: 0 4px 12px rgba(16, 24, 40, .07);
    --sh-lg: 0 12px 32px rgba(16, 24, 40, .10);
    --sh-xl: 0 24px 60px rgba(16, 24, 40, .14);

    /* Shape */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-full: 999px;

    /* Layout */
    --sidebar-w: 262px;
    --sidebar-w-mini: 78px;
    --topbar-h: 66px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.crm {
    margin: 0;
    font-family: 'Noto Sans Thai', 'Inter', -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
p { margin: 0; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cdd3e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #b3bccf; }

/* ---------- 3. Utilities ---------- */
.u-flex { display: flex; }
.u-between { display: flex; align-items: center; justify-content: space-between; }
.u-center { display: flex; align-items: center; }
.u-gap-4 { gap: 4px; } .u-gap-6 { gap: 6px; } .u-gap-8 { gap: 8px; }
.u-gap-10 { gap: 10px; } .u-gap-12 { gap: 12px; } .u-gap-16 { gap: 16px; }
.u-wrap { flex-wrap: wrap; }
.u-grow { flex: 1; }
.u-right { margin-left: auto; }
.u-mt-4 { margin-top: 4px; } .u-mt-8 { margin-top: 8px; } .u-mt-12 { margin-top: 12px; }
.u-mt-16 { margin-top: 16px; } .u-mt-24 { margin-top: 24px; }
.u-mb-8 { margin-bottom: 8px; } .u-mb-12 { margin-bottom: 12px; }
.u-mb-16 { margin-bottom: 16px; } .u-mb-24 { margin-bottom: 24px; }
.u-muted { color: var(--c-text-2); }
.u-faint { color: var(--c-text-3); }
.u-xs { font-size: 12px; } .u-sm { font-size:16px; } .u-lg { font-size: 16px; }
.u-bold { font-weight: 700; } .u-semi { font-weight: 600; }
.u-nowrap { white-space: nowrap; }
.u-text-right { text-align: right; }
.u-text-center { text-align: center; }
.u-full { width: 100%; }

/* ---------- 4. Grid ---------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.grid-2-1 { grid-template-columns: 2fr 1fr; }
.grid-1-2 { grid-template-columns: 1fr 2fr; }
.grid-3-2 { grid-template-columns: 3fr 2fr; }

@media (max-width: 1400px) {
    .grid-5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 1200px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .grid-2-1, .grid-1-2, .grid-3-2 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .grid-2, .grid-3, .grid-5 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   5. APP SHELL
   ============================================================ */
.app { min-height: 100vh; }

/* -- Sidebar -- */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--c-navy-900) 0%, #111a2e 60%, #0d1526 100%);
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    z-index: 60;
    transition: transform .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1);
}

.sidebar__brand {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 20px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.brand-mark {
    width: 38px; height: 38px;
    border-radius: 11px;
    flex-shrink: 0;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--c-brand-400), var(--c-brand-600));
    box-shadow: 0 6px 16px rgba(79, 70, 229, .45);
    color: #fff; font-size: 20px;
}

.brand-text { line-height: 1.2; overflow: hidden; }
.brand-text b {
    display: block;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .2px;
    color: #fff;
    white-space: nowrap;
}
.brand-text span {
    display: block;
    margin-top: 1px;
    font-size:12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #8b99b5;
    white-space: nowrap;
}

.sidebar__scroll {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px 24px;
}
.sidebar__scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }

.nav-group-label {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: #5c6b85;
    padding: 18px 12px 8px;
}
.nav-group-label:first-child { padding-top: 4px; }

.nav-item { position: relative; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 500;
    color: #a6b3c9;
    transition: background .18s, color .18s;
    cursor: pointer;
}
.nav-link i.ico { font-size: 20px; width: 22px; text-align: center; flex-shrink: 0; }
.nav-link .lbl { flex: 1; white-space: nowrap; overflow: hidden; }
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-link--pending { cursor: default; }

/* ============================================================
   Warehouse Projects
   ============================================================ */
.project-toolbar { display:flex; align-items:center; gap:10px; padding:12px; background:#fff; border:1px solid var(--c-border); border-radius:var(--r-md); }
.project-toolbar .search-inline { max-width:none; }
.project-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.project-kpi { min-width:0; display:flex; align-items:center; gap:12px; padding:15px; background:#fff; border:1px solid var(--c-border); border-radius:var(--r-md); }
.project-kpi__icon { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; flex:none; font-size:20px; }
.project-kpi span:not(.project-kpi__icon) { display:block; color:var(--c-text-2); font-size:14px; white-space:nowrap; }
.project-kpi b { display:block; margin-top:2px; font-size:20px; line-height:1.2; white-space:nowrap; }
.project-kpi b small,.project-detail-kpi b small { color:var(--c-text-2); font-size:12px; font-weight:600; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.project-card { min-width:0; overflow:hidden; background:#fff; border:1px solid var(--c-border); border-radius:var(--r-lg); box-shadow:var(--sh-xs); transition:border-color .16s,box-shadow .16s; }
.project-card:hover { border-color:var(--c-brand-200); box-shadow:var(--sh-md); }
.project-cover { position:relative; height:150px; display:grid; place-items:center; overflow:hidden; color:rgba(255,255,255,.78); background:#263552; }
.project-cover::before { content:''; position:absolute; inset:0; opacity:.45; background:linear-gradient(25deg,transparent 45%,rgba(255,255,255,.12) 46% 48%,transparent 49%),linear-gradient(155deg,transparent 50%,rgba(255,255,255,.1) 51% 54%,transparent 55%); background-size:70px 70px; }
.project-cover--2 { background:#324962; }.project-cover--3 { background:#2d4e51; }.project-cover--4 { background:#4b465c; }
.project-cover > i { position:relative; font-size:58px; }.project-cover > .badge { position:absolute; left:14px; top:14px; }
.project-more { position:absolute; right:12px; top:10px; width:32px; height:32px; border:0; border-radius:8px; background:rgba(15,23,42,.42); color:#fff; font-size:18px; cursor:pointer; }
.project-card__body { padding:17px 18px 14px; }.project-card__title h3 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; }
.project-card__title p { margin-top:4px; color:var(--c-text-2); font-size:14px; }.project-card__meta { display:flex; gap:18px; padding:13px 0; margin:12px 0; border-top:1px solid var(--c-border-2); border-bottom:1px solid var(--c-border-2); color:var(--c-text-2); font-size:14px; }
.project-space-row { display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; font-size:12px; color:var(--c-text-2); }.project-space-row b { color:var(--c-text); }
.availability { display:flex; align-items:center; gap:5px; margin-top:12px; color:#067647; font-size:14px; font-weight:600; }.availability.is-low { color:#b54708; }
.project-card__foot { display:flex; align-items:center; justify-content:space-between; padding:11px 18px; border-top:1px solid var(--c-border-2); background:#fafbfe; }
.project-empty { grid-column:1/-1; padding:55px; text-align:center; }.project-empty > i { font-size:48px; color:var(--c-text-3); }.project-empty b { display:block; margin-top:10px; }

.project-detail-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }.project-detail-kpi { position:relative; min-width:0; padding:14px 15px; background:#fff; border:1px solid var(--c-border); border-radius:var(--r-md); }
.project-detail-kpi > i { position:absolute; top:13px; right:13px; color:var(--c-brand-400); font-size:20px; }.project-detail-kpi > span { display:block; color:var(--c-text-2); font-size:12px; }.project-detail-kpi b { display:block; margin-top:5px; font-size:19px; white-space:nowrap; }
.project-tabs { padding:0 4px; background:#fff; border:1px solid var(--c-border); border-radius:var(--r-md); }.project-tabs a { padding:13px 18px; }
.project-dl { display:grid; grid-template-columns:115px 1fr; gap:12px 15px; margin:0; font-size:16px; }.project-dl dt { color:var(--c-text-2); }.project-dl dd { min-width:0; margin:0; font-weight:600; }
.project-gallery__hero { position:relative; height:250px; display:grid; place-items:center; border-radius:var(--r-lg); background:#263b58; color:#fff; overflow:hidden; }.project-gallery__hero::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.1),transparent); }.project-gallery__hero > i { font-size:74px; opacity:.8; }.project-gallery__hero > span { position:absolute; right:12px; bottom:12px; padding:5px 10px; border-radius:8px; background:rgba(15,23,42,.58); font-size:12px; }
.project-gallery__thumbs { display:flex; gap:8px; margin-top:9px; }.project-gallery__thumbs button { width:62px; height:50px; border:1px solid var(--c-border); border-radius:8px; background:#e9eef5; color:#50617a; font-size:22px; }.project-gallery__thumbs button.is-active { border:2px solid var(--c-brand-500); }.project-gallery__thumbs .project-gallery__add { border-style:dashed; background:#fff; color:var(--c-text-3); }
.project-specs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:6px 20px 18px; }.project-specs > div { padding:14px; border-bottom:1px solid var(--c-border-2); }.project-specs span { display:block; color:var(--c-text-2); font-size:14px; }.project-specs b { display:block; margin-top:4px; font-size:16px; }
.availability-layout { display:flex; align-items:center; gap:32px; }.availability-ring { --pct:0; position:relative; width:118px; height:118px; flex:none; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#12b76a calc(var(--pct)*1%),#e8edf4 0); }.availability-ring::before { content:''; width:88px; height:88px; position:absolute; border-radius:50%; background:#fff; }.availability-ring > div { position:relative; z-index:1; text-align:center; }.availability-ring b { display:block; font-size:23px; }.availability-ring span { font-size:12px; color:var(--c-text-2); }
.availability-bars { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.availability-bars > div:not(.availability-stack) { padding-right:18px; border-right:1px solid var(--c-border); }.availability-bars span { display:block; font-size:12px; color:var(--c-text-2); }.availability-bars span i { display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:3px; }.availability-bars b { display:block; margin-top:5px; font-size:16px; }.availability-stack { grid-column:1/-1; display:flex; height:10px; overflow:hidden; border-radius:99px; background:#eef1f7; }.availability-stack i { display:block; height:100%; }

.project-form { display:grid; gap:18px; max-width:1100px; }.project-form__section-icon { color:var(--c-brand-400); font-size:25px; }.form-grid-2,.form-grid-3 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; }.form-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }.form-span-2 { grid-column:1/-1; }.field label { display:block; margin-bottom:6px; font-size:14px; font-weight:600; }.field label em { color:var(--c-danger); font-style:normal; }.input-suffix { position:relative; }.input-suffix .input { padding-right:75px; }.input-suffix span { position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--c-text-3); font-size:12px; }
.project-upload { height:180px; margin:0!important; border:1px dashed #c9d1df; border-radius:var(--r-md); background:#fafbfe; cursor:pointer; overflow:hidden; }.project-upload input { display:none; }.project-upload > span { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--c-text-2); }.project-upload i { color:var(--c-brand-500); font-size:34px; }.project-upload small { color:var(--c-text-3); font-weight:400; }.project-upload img { width:100%; height:145px; object-fit:cover; }.project-form__foot { position:sticky; bottom:12px; z-index:5; display:flex; justify-content:flex-end; gap:8px; padding:11px; border:1px solid var(--c-border); border-radius:var(--r-md); background:rgba(255,255,255,.94); box-shadow:var(--sh-md); backdrop-filter:blur(8px); }

@media(max-width:1300px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.project-detail-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.project-specs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.project-toolbar{align-items:stretch;flex-direction:column}.project-toolbar .select-sm{width:100%}.project-grid,.project-kpis,.project-detail-kpis,.form-grid-2,.form-grid-3{grid-template-columns:1fr}.form-span-2{grid-column:auto}.project-specs{grid-template-columns:repeat(2,minmax(0,1fr))}.availability-layout{align-items:flex-start;flex-direction:column}.availability-bars{width:100%;grid-template-columns:1fr}.availability-bars > div:not(.availability-stack){border:0}.availability-stack{grid-column:auto}}
@media(max-width:520px){.project-grid,.project-kpis,.project-specs{grid-template-columns:1fr}.project-space-row{flex-direction:column}.project-tabs{overflow-x:auto}.project-card__foot{gap:8px}.project-card__foot .btn{flex:1}}

/* Project detail */
.project-show{display:grid;gap:16px}.project-code{padding:3px 8px;border:1px solid var(--c-border);border-radius:6px;background:#fff;color:var(--c-text-2);font-size:12px;font-weight:700}.project-summary{display:grid;grid-template-columns:220px 1fr;overflow:hidden}.project-summary__cover{min-height:180px;background:#eef2f8}.project-summary__cover img,.project-summary__placeholder{width:100%;height:100%;min-height:180px;object-fit:cover}.project-summary__placeholder{display:grid;place-items:center;background:linear-gradient(145deg,#172554,#334e7d);color:#c7d7f5}.project-summary__placeholder i{font-size:70px;opacity:.8}.project-summary__content{display:flex;flex-direction:column;justify-content:center;padding:22px 26px}.project-summary__title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.project-summary__title>div>span{color:var(--c-text-2);font-size:12px}.project-summary__title h2{margin-top:3px;font-size:21px}.project-summary__location{display:flex;gap:11px;margin-top:18px}.project-summary__location>i{width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:9px;background:#eef4ff;color:var(--c-brand-500);font-size:18px}.project-summary__location b,.project-summary__location span,.project-summary__location small{display:block}.project-summary__location b{font-size:12px}.project-summary__location span{margin-top:2px;color:var(--c-text-2);font-size:14px}.project-summary__location small{margin-top:2px;color:var(--c-text-3);font-size:16px}.project-summary__description{max-width:850px;margin-top:15px;color:var(--c-text-2);font-size:12px;line-height:1.65}.project-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.project-metric{--metric:#6938ef;display:flex;align-items:center;justify-content:space-between;min-width:0;padding:16px 17px;border:1px solid var(--c-border);border-top:3px solid var(--metric);border-radius:var(--r-md);background:#fff}.project-metric span{display:block;color:var(--c-text-2);font-size:12px}.project-metric b{display:block;margin-top:4px;font-size:20px;white-space:nowrap}.project-metric b small{color:var(--c-text-2);font-size:12px}.project-metric>i{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#f4f1ff;color:var(--metric);font-size:20px}.project-metric--blue{--metric:#2e90fa}.project-metric--blue>i{background:#eff8ff}.project-metric--green{--metric:#12b76a}.project-metric--green>i{background:#ecfdf3}.project-metric--orange{--metric:#f79009}.project-metric--orange>i{background:#fffaeb}.project-show__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}.project-occupancy .card__head>strong{color:#067647;font-size:16px}.project-occupancy .card__body{display:flex;align-items:center;gap:30px;padding:22px}.project-occupancy__ring{position:relative;width:126px;height:126px;display:grid;place-items:center;flex:none;border-radius:50%;background:conic-gradient(#12b76a calc(var(--pct)*1%),#e9eef5 0)}.project-occupancy__ring:before{content:'';width:96px;height:96px;border-radius:50%;background:#fff}.project-occupancy__ring>div{position:absolute;text-align:center}.project-occupancy__ring b,.project-occupancy__ring span{display:block}.project-occupancy__ring b{font-size:22px}.project-occupancy__ring span{color:var(--c-text-2);font-size:12px}.project-occupancy__detail{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;width:100%}.project-occupancy__detail>div:not(.project-occupancy__bar){padding-right:12px;border-right:1px solid var(--c-border-2)}.project-occupancy__detail span,.project-occupancy__detail b{display:block}.project-occupancy__detail span{color:var(--c-text-2);font-size:12px}.project-occupancy__detail span i{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:2px}.project-occupancy__detail b{margin-top:5px;font-size:12px}.project-occupancy__detail .is-occupied{background:#12b76a}.project-occupancy__detail .is-reserved{background:#f79009}.project-occupancy__detail .is-vacant{background:#2e90fa}.project-occupancy__bar{grid-column:1/-1;display:flex;height:10px;overflow:hidden;border-radius:99px;background:#eef2f6}.project-occupancy__bar i:nth-child(1){background:#12b76a}.project-occupancy__bar i:nth-child(2){background:#f79009}.project-occupancy__bar i:nth-child(3){flex:1;background:#2e90fa}.project-section-icon{color:var(--c-brand-400);font-size:23px}.project-spec-list{display:grid;grid-template-columns:repeat(2,1fr);padding:7px 18px 17px}.project-spec-list>div{padding:12px 8px;border-bottom:1px solid var(--c-border-2)}.project-spec-list span,.project-spec-list b{display:block}.project-spec-list span{color:var(--c-text-2);font-size:12px}.project-spec-list b{margin-top:3px;font-size:12px}.project-units__empty{display:flex;align-items:center;justify-content:center;gap:14px;padding:30px;color:var(--c-text-2)}.project-units__empty>i{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:#f2f4f7;color:var(--c-text-3);font-size:22px}.project-units__empty b{display:block;color:var(--c-text);font-size:12px}.project-units__empty p{margin-top:2px;font-size:12px}.project-units__empty .btn{margin-left:12px}
@media(max-width:1050px){.project-metrics{grid-template-columns:repeat(2,1fr)}.project-show__grid{grid-template-columns:1fr}}
@media(max-width:700px){.project-summary{grid-template-columns:1fr}.project-summary__cover{min-height:150px;max-height:190px}.project-summary__content{padding:18px}.project-metrics{grid-template-columns:1fr 1fr}.project-occupancy .card__body{align-items:flex-start;flex-direction:column}.project-occupancy__detail{grid-template-columns:1fr}.project-occupancy__bar{grid-column:auto}.project-spec-list{grid-template-columns:1fr}.project-units__empty{align-items:flex-start;flex-direction:column}.project-units__empty .btn{margin-left:0}}

/* Units database screens */
.unit-page{display:grid;gap:15px}.unit-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.unit-summary__item{--unit-tone:#6938ef;display:flex;align-items:center;justify-content:space-between;min-width:0;padding:14px 15px;border:1px solid var(--c-border);border-top:3px solid var(--unit-tone);border-radius:var(--r-md);background:#fff}.unit-summary__item span{display:block;color:var(--c-text-2);font-size:16px}.unit-summary__item b{display:block;margin-top:4px;font-size:19px;white-space:nowrap}.unit-summary__item b small{color:var(--c-text-2);font-size:12px}.unit-summary__item>i{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:#f4f1ff;color:var(--unit-tone);font-size:19px}.unit-summary__item--green{--unit-tone:#12b76a}.unit-summary__item--green>i{background:#ecfdf3}.unit-summary__item--orange{--unit-tone:#f79009}.unit-summary__item--orange>i{background:#fffaeb}.unit-summary__item--red{--unit-tone:#f04438}.unit-summary__item--red>i{background:#feecea}.unit-summary__item--blue{--unit-tone:#2e90fa}.unit-summary__item--blue>i{background:#eff8ff}.unit-summary__item--cyan{--unit-tone:#06aed4}.unit-summary__item--cyan>i{background:#ecfdff}.unit-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) 220px 170px auto auto;align-items:center;gap:9px;padding:11px}.unit-toolbar .search-inline{max-width:none}.unit-list-card .card__head{min-height:58px}.unit-occupancy{display:flex;align-items:center;gap:6px;color:#067647;font-size:16px;font-weight:700}.unit-occupancy i{width:8px;height:8px;border-radius:50%;background:#12b76a}.unit-clean-table td{vertical-align:middle}.unit-clean-table td small{display:block;margin-top:2px;color:var(--c-text-3);font-size:12px}.unit-clean-table .unit-code{display:block;font-size:16px}.unit-row-actions{display:flex;justify-content:flex-end;gap:5px}.unit-detail-hero{display:flex;align-items:center;justify-content:space-between;padding:24px 27px;background:linear-gradient(135deg,#fff,#f7f8ff)}.unit-detail-hero h2{margin-top:10px;font-size:25px}.unit-detail-hero p{margin-top:6px;color:var(--c-text-2);font-size:12px}.unit-detail-hero>i{color:#d6ccff;font-size:75px}.unit-detail-features{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.unit-detail-features span{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:11px;border:1px solid var(--c-border-2);border-radius:9px;color:var(--c-text-2);font-size:12px}.unit-detail-features span>i{font-size:19px}.unit-detail-features span>b{font-size:12px}.unit-detail-features span.is-enabled{border-color:#abefc6;background:#f6fef9;color:#067647}
@media(max-width:1150px){.unit-summary{grid-template-columns:repeat(3,1fr)}.unit-toolbar{grid-template-columns:1fr 1fr 1fr}.unit-toolbar .search-inline{grid-column:1/-1}}
@media(max-width:700px){.unit-summary{grid-template-columns:repeat(2,1fr)}.unit-toolbar{grid-template-columns:1fr}.unit-toolbar .search-inline{grid-column:auto}.unit-detail-features{grid-template-columns:1fr}}

/* Site visits database screens */
.visit-page{display:grid;gap:15px}.visit-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.visit-summary__item{--visit-tone:#6938ef;display:flex;align-items:center;justify-content:space-between;padding:15px 17px;border:1px solid var(--c-border);border-top:3px solid var(--visit-tone);border-radius:var(--r-md);background:#fff}.visit-summary__item span{display:block;color:var(--c-text-2);font-size:16px}.visit-summary__item b{display:block;margin-top:4px;font-size:21px}.visit-summary__item>i{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#f4f1ff;color:var(--visit-tone);font-size:20px}.visit-summary__item--blue{--visit-tone:#2e90fa}.visit-summary__item--blue>i{background:#eff8ff}.visit-summary__item--orange{--visit-tone:#f79009}.visit-summary__item--orange>i{background:#fffaeb}.visit-summary__item--green{--visit-tone:#12b76a}.visit-summary__item--green>i{background:#ecfdf3}.visit-toolbar{display:grid;grid-template-columns:minmax(250px,1fr) 155px 220px 170px auto auto;align-items:center;gap:8px;padding:11px}.visit-toolbar .search-inline{max-width:none}.visit-clean-table td{vertical-align:middle}.visit-clean-table td:first-child b,.visit-clean-table td small{display:block}.visit-clean-table td:first-child b{margin-top:3px;font-size:16px}.visit-clean-table td small{margin-top:2px;color:var(--c-text-3);font-size:12px}.visit-detail-hero{display:flex;align-items:center;justify-content:space-between;padding:23px 26px}.visit-detail-hero h2{margin-top:9px;font-size:22px}.visit-detail-hero p{margin-top:3px;color:var(--c-text-2);font-size:12px}.visit-detail-when{display:flex;align-items:center;gap:10px;padding:12px 15px;border-radius:10px;background:#f5f7ff}.visit-detail-when>i{color:var(--c-brand-500);font-size:25px}.visit-detail-when b,.visit-detail-when span{display:block}.visit-detail-when b{font-size:12px}.visit-detail-when span{margin-top:2px;color:var(--c-text-2);font-size:12px}
@media(max-width:1100px){.visit-toolbar{grid-template-columns:repeat(3,1fr)}.visit-toolbar .search-inline{grid-column:1/-1}}
@media(max-width:700px){.visit-summary{grid-template-columns:repeat(2,1fr)}.visit-toolbar{grid-template-columns:1fr}.visit-toolbar .search-inline{grid-column:auto}.visit-detail-hero{align-items:flex-start;flex-direction:column;gap:14px}}

/* Units & Availability */
.unit-filter { display:grid; grid-template-columns:minmax(240px,1fr) repeat(3,minmax(135px,auto)) 145px minmax(150px,auto); align-items:center; gap:8px; padding:11px; }.unit-filter .search-inline{width:100%}.unit-date{height:40px;font-size:12px}
.unit-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px }.unit-kpis>div { position:relative; min-width:0; padding:13px 14px 12px 48px; background:#fff; border:1px solid var(--c-border); border-radius:var(--r-md) }.unit-kpis>div>span { position:absolute; left:12px; top:13px; width:28px; height:28px; display:grid; place-items:center; border-radius:8px; font-size:16px }.unit-kpis p{overflow:hidden;margin:0;color:var(--c-text-2);font-size:16px;white-space:nowrap;text-overflow:ellipsis}.unit-kpis b{display:block;margin-top:3px;font-size:18px;white-space:nowrap}.unit-kpis small{color:var(--c-text-2);font-size:12px}
.unit-stack{display:flex;height:15px;overflow:hidden;border-radius:99px;background:#edf1f6}.unit-stack i{display:block;height:100%}.unit-stack-legend{display:flex;gap:25px;margin-top:17px}.unit-stack-legend span{font-size:14px;color:var(--c-text-2)}.unit-stack-legend span>i{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:2px}.unit-stack-legend b{display:block;margin:3px 0 0 14px;color:var(--c-text);font-size:16px}
.unit-alerts{display:grid;gap:8px}.unit-alert{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--c-border);border-radius:var(--r-md);background:#fff}.unit-alert>i{font-size:21px}.unit-alert b,.unit-alert span{display:block}.unit-alert b{font-size:12px}.unit-alert span{color:var(--c-text-2);font-size:16px}.unit-alert.warning>i{color:var(--c-warning)}.unit-alert.info>i{color:var(--c-info)}.unit-alert.danger>i{color:var(--c-danger)}
.project-availability-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 22px;padding-top:8px}.project-availability-list button{display:grid;grid-template-columns:minmax(170px,1.2fr) 1fr 42px;align-items:center;gap:12px;padding:10px;border:0;border-radius:8px;background:transparent;text-align:left;cursor:pointer}.project-availability-list button:hover{background:#f8f9fc}.project-availability-list span b,.project-availability-list span small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.project-availability-list span b{font-size:14px}.project-availability-list span small{color:var(--c-text-2);font-size:16px}.project-availability-list strong{text-align:right;font-size:12px}
.view-switch{display:inline-flex;padding:3px;border-radius:9px;background:#eef1f6}.view-switch button{padding:5px 10px;border:0;border-radius:7px;background:transparent;color:var(--c-text-2);font-size:14px;cursor:pointer}.view-switch button.is-active{background:#fff;color:var(--c-brand-600);box-shadow:var(--sh-xs)}.unit-table{min-width:1250px}.unit-table th{white-space:nowrap}.unit-table td{max-width:190px;font-size:14px}.unit-table .cell-main{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.unit-code{color:var(--c-brand-600);font-size:16px;font-weight:800}.unit-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.unit-card{min-width:0;padding:15px;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-md)}.unit-card header{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.unit-card header a{font-size:17px;font-weight:800;color:var(--c-brand-600)}.unit-card>p{overflow:hidden;margin-top:5px;color:var(--c-text-2);font-size:14px;white-space:nowrap;text-overflow:ellipsis}.unit-card>p i{width:19px}.unit-card__stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:13px 0}.unit-card__stats span{padding:8px;border-radius:8px;background:#f7f8fb;color:var(--c-text-2);font-size:12px}.unit-card__stats b{display:block;margin-top:2px;color:var(--c-text);font-size:12px}.unit-card__tenant{margin-bottom:12px;padding-top:10px;border-top:1px solid var(--c-border-2)}.unit-card__tenant span,.unit-card__tenant b,.unit-card__tenant small{display:block}.unit-card__tenant span{color:var(--c-text-2);font-size:12px}.unit-card__tenant b{font-size:12px}.unit-card__tenant small{overflow:hidden;margin-top:3px;color:var(--c-text-2);white-space:nowrap;text-overflow:ellipsis}
.unit-detail-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.unit-detail-kpis>div{position:relative;min-width:0;padding:14px;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-md)}.unit-detail-kpis i{position:absolute;right:12px;color:var(--c-brand-400);font-size:20px}.unit-detail-kpis span{display:block;color:var(--c-text-2);font-size:16px}.unit-detail-kpis b{display:block;overflow:hidden;margin-top:6px;font-size:14px;white-space:nowrap;text-overflow:ellipsis}.unit-spec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.unit-spec-grid>div{position:relative;padding:10px 10px 10px 38px;border:1px solid var(--c-border-2);border-radius:8px}.unit-spec-grid i{position:absolute;left:10px;top:13px;color:var(--c-brand-500);font-size:18px}.unit-spec-grid span,.unit-spec-grid b{display:block}.unit-spec-grid span{color:var(--c-text-2);font-size:12px}.unit-spec-grid b{font-size:12px}
.unit-status-panel{display:flex;align-items:flex-start;gap:16px;padding:20px;border:1px solid #b7e8cc;border-left:4px solid var(--c-success);border-radius:var(--r-md);background:#f3fbf7}.unit-status-panel.status-reserved{border-color:#fedf89;border-left-color:var(--c-warning);background:#fffbeb}.unit-status-panel.status-occupied{border-color:#d9d6fe;border-left-color:var(--c-purple);background:#f7f5ff}.unit-status-panel.status-maintenance,.unit-status-panel.status-blocked{border-color:#e4e7ec;border-left-color:var(--c-text-3);background:#f8f9fb}.unit-status-panel__icon{width:42px;height:42px;display:grid;place-items:center;flex:none;border-radius:10px;background:#fff;color:var(--c-success);font-size:24px}.unit-status-panel h3{margin:2px 0 12px}.unit-status-data{display:flex;flex-wrap:wrap;gap:20px 32px}.unit-status-data span{color:var(--c-text-2);font-size:16px}.unit-status-data b{display:block;margin-top:3px;color:var(--c-text);font-size:14px}.unit-feature-checks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.unit-feature-checks label{display:flex;align-items:center;gap:9px;margin:0;padding:13px;border:1px solid var(--c-border);border-radius:9px;cursor:pointer}.unit-feature-checks label i{color:var(--c-brand-500);font-size:20px}.unit-feature-checks label span{margin:0;font-size:12px}
@media(max-width:1350px){.unit-filter{grid-template-columns:repeat(3,1fr)}.unit-filter .search-inline{grid-column:span 2}.unit-kpis,.unit-detail-kpis{grid-template-columns:repeat(3,1fr)}.unit-card-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.unit-card-grid{grid-template-columns:repeat(2,1fr)}.project-availability-list{grid-template-columns:1fr}.unit-status-panel{flex-wrap:wrap}.unit-feature-checks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.unit-filter{grid-template-columns:1fr}.unit-filter .search-inline{grid-column:auto}.unit-kpis,.unit-detail-kpis,.unit-card-grid{grid-template-columns:1fr}.unit-stack-legend{align-items:flex-start;flex-direction:column;gap:8px}.unit-stack-legend b{display:inline;margin-left:4px}.unit-status-data{flex-direction:column;gap:10px}.unit-feature-checks{grid-template-columns:1fr}}

/* Site Visits */
.visit-filter{display:grid;grid-template-columns:minmax(260px,1fr) 145px repeat(3,minmax(145px,auto));align-items:center;gap:8px;padding:11px}.visit-filter .input{height:40px;font-size:12px}.visit-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.visit-kpis>div{position:relative;min-width:0;padding:13px 12px 12px 48px;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-md)}.visit-kpis>div>span{position:absolute;left:12px;top:13px;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;font-size:16px}.visit-kpis p{overflow:hidden;color:var(--c-text-2);font-size:16px;white-space:nowrap;text-overflow:ellipsis}.visit-kpis b{display:block;margin-top:2px;font-size:19px}.visit-upcoming{padding:6px 17px}.visit-upcoming>a{display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--c-border-2)}.visit-upcoming>a:last-child{border:0}.visit-upcoming time b,.visit-upcoming time span,.visit-upcoming>a>div>b,.visit-upcoming>a>div>span,.visit-upcoming>a>div>small{display:block}.visit-upcoming time b{font-size:17px}.visit-upcoming time span,.visit-upcoming>a>div>small{color:var(--c-text-2);font-size:12px}.visit-upcoming>a>div>b{overflow:hidden;font-size:14px;white-space:nowrap;text-overflow:ellipsis}.visit-upcoming>a>div>span{overflow:hidden;color:var(--c-text-2);font-size:12px;white-space:nowrap;text-overflow:ellipsis}.visit-attention{display:grid;gap:8px}.visit-table{min-width:1500px}.visit-table td{max-width:190px;font-size:14px}.visit-table td>b,.visit-table td>small{display:block}.visit-table td>small{color:var(--c-text-2);font-size:12px}.visit-cal-event{display:block;overflow:hidden;margin-bottom:4px;padding:4px 6px;border-left:3px solid currentColor;border-radius:5px;font-size:12px;white-space:nowrap;text-overflow:ellipsis}.visit-cal-event small{display:block;overflow:hidden;font-size:8.5px;opacity:.75;text-overflow:ellipsis}.visit-cal-event.e-info{background:#e8f3ff;color:#175cd3}.visit-cal-event.e-warning{background:#fef4e6;color:#b54708}.visit-cal-event.e-success{background:#e7f8f0;color:#067647}.visit-cal-event.e-purple{background:#f1eeff;color:#5925dc}.visit-cal-event.e-danger{background:#feecea;color:#b42318}.visit-cal-event.e-gray{background:#f2f4f7;color:#475467}
.visit-detail-actions{display:flex;flex-wrap:wrap;gap:8px}.visit-property{overflow:hidden;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg)}.visit-property__image{height:150px;display:grid;place-items:center;background:#2c415e;color:#fff;font-size:62px}.visit-property__body{padding:17px}.visit-property__body h3{margin:2px 0 5px}.visit-property__body>p{color:var(--c-text-2);font-size:14px}.visit-property__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0}.visit-property__stats span{padding:8px;border-radius:7px;background:#f7f8fb;color:var(--c-text-2);font-size:9.5px}.visit-property__stats b{display:block;overflow:hidden;margin-top:2px;color:var(--c-text);font-size:14px;white-space:nowrap;text-overflow:ellipsis}.visit-requirement{padding:13px;border-left:3px solid var(--c-brand-400);border-radius:0 8px 8px 0;background:#f7f8ff;color:var(--c-text-2);font-size:14px}.visit-requirement-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:14px}.visit-requirement-grid span{padding:9px;border:1px solid var(--c-border-2);border-radius:7px;color:var(--c-text-2);font-size:12px}.visit-requirement-grid b{display:block;margin-top:2px;color:var(--c-text);font-size:14px}.visit-checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.visit-checklist label{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid var(--c-border-2);border-radius:8px;font-size:14px;cursor:pointer}.visit-checklist input{display:none}.visit-checklist label>span{width:20px;height:20px;display:grid;place-items:center;border:1px solid var(--c-border);border-radius:5px;color:transparent}.visit-checklist input:checked+span{border-color:var(--c-success);background:var(--c-success);color:#fff}.next-action-card.is-missing{border-color:#fecdca}.visit-timeline .tl-card{padding:10px 13px}.visit-timeline .tl-item{padding-bottom:15px}
@media(max-width:1250px){.visit-filter{grid-template-columns:repeat(3,1fr)}.visit-filter .search-inline{grid-column:span 2}.visit-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.visit-filter{grid-template-columns:1fr}.visit-filter .search-inline{grid-column:auto}.visit-kpis{grid-template-columns:repeat(2,1fr)}.visit-upcoming>a{grid-template-columns:70px 1fr}.visit-upcoming>a>.badge{grid-column:2}.visit-requirement-grid,.visit-checklist{grid-template-columns:1fr}.cal__cell{min-width:85px}.cal{overflow-x:auto}.cal__dow,.cal__grid{min-width:650px}}

/* Quotations */
.quote-filter{display:grid;grid-template-columns:minmax(250px,1fr) 140px repeat(4,minmax(135px,auto));align-items:center;gap:8px;padding:11px}.quote-filter>.input{height:40px;font-size:12px}.quote-kpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px}.quote-kpis>div{position:relative;min-width:0;padding:12px 10px 11px 43px;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-md)}.quote-kpis>div>span{position:absolute;left:10px;top:12px;width:25px;height:25px;display:grid;place-items:center;border-radius:7px;font-size:14px}.quote-kpis p{overflow:hidden;color:var(--c-text-2);font-size:9.5px;white-space:nowrap;text-overflow:ellipsis}.quote-kpis b{display:block;margin-top:3px;font-size:16px;white-space:nowrap}.quote-alerts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.quote-table{min-width:1350px}.quote-table td{max-width:190px;font-size:14px}.quote-table td>b,.quote-table td>small{display:block}.quote-table td>small{color:var(--c-text-2);font-size:9.5px}.quote-expired{color:var(--c-danger);font-weight:700}.quote-revision{padding:2px 7px;border-radius:6px;background:#f2f4f7;color:var(--c-text-2);font-size:12px;vertical-align:middle}.quote-summary{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.quote-summary>div{min-width:0;padding:13px;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-md)}.quote-summary span{display:block;color:var(--c-text-2);font-size:12px}.quote-summary b{display:block;overflow:hidden;margin-top:4px;font-size:15px;white-space:nowrap;text-overflow:ellipsis}.quote-summary>div:last-child{border-color:var(--c-brand-300);background:var(--c-brand-50)}.quote-summary>div:last-child b{color:var(--c-brand-700);font-size:17px}.quote-property{overflow:hidden;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg)}.quote-property>div{height:100px;display:grid;place-items:center;background:#2c415e;color:#fff;font-size:48px}.quote-property>section{padding:15px}.quote-property>section>span{color:var(--c-text-2);font-size:12px}.quote-property h3,.quote-property p{margin:0}.quote-property p{color:var(--c-text-2);font-size:12px}.quote-property dl{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin:11px 0;font-size:12px}.quote-property dt{color:var(--c-text-2)}.quote-property dd{margin:0;text-align:right}.quote-terms{display:grid;grid-template-columns:repeat(2,1fr);gap:0 22px}.quote-terms>div{padding:9px 0;border-bottom:1px solid var(--c-border-2)}.quote-terms span,.quote-terms b{display:block}.quote-terms span{color:var(--c-text-2);font-size:12px}.quote-terms b{font-size:14px}.quote-negotiation>div{position:relative;padding:9px 10px 9px 19px;border-left:2px solid var(--c-brand-200)}.quote-negotiation>div::before{content:'';position:absolute;left:-5px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--c-brand-500)}.quote-negotiation span,.quote-negotiation b,.quote-negotiation small{display:block}.quote-negotiation span{color:var(--c-text-2);font-size:12px}.quote-negotiation b{font-size:16px}.quote-negotiation small{color:var(--c-text-3);font-size:9.5px}
.quote-form{display:grid;grid-template-columns:minmax(0,1fr) 290px;align-items:start;gap:16px}.quote-form__main{display:grid;gap:16px;min-width:0}.quote-price-summary{position:sticky;top:82px;padding:18px;background:#111c36;color:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-md)}.quote-price-summary>span{font-size:12px;letter-spacing:1px;color:#9daac1}.quote-price-summary h3{margin:2px 0 15px}.quote-price-summary dl{margin:0}.quote-price-summary dl>div{display:contents}.quote-price-summary dt,.quote-price-summary dd{margin:0;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.09)}.quote-price-summary dt{color:#aeb9cc;font-size:16px}.quote-price-summary dd{text-align:right;font-size:12px}.quote-price-summary>div{margin-top:16px;padding:13px;border-radius:9px;background:rgba(255,255,255,.08)}.quote-price-summary>div span,.quote-price-summary>div b{display:block}.quote-price-summary>div span{font-size:12px;color:#b8c2d4}.quote-price-summary>div b{margin-top:3px;font-size:22px}.quote-price-summary>small{display:block;margin-top:11px;color:#8997af;font-size:9.5px}
@media(max-width:1350px){.quote-filter{grid-template-columns:repeat(3,1fr)}.quote-filter .search-inline{grid-column:span 2}.quote-kpis{grid-template-columns:repeat(4,1fr)}.quote-alerts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1050px){.quote-form{grid-template-columns:1fr}.quote-price-summary{position:static}.quote-summary{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.quote-filter{grid-template-columns:1fr}.quote-filter .search-inline{grid-column:auto}.quote-kpis,.quote-alerts,.quote-summary{grid-template-columns:repeat(2,1fr)}.quote-terms{grid-template-columns:1fr}}
.quote-price-summary dl{display:grid;grid-template-columns:1fr auto}

/* Reservations */
.reservation-filter{display:grid;grid-template-columns:minmax(230px,1fr) repeat(4,minmax(135px,auto)) 140px minmax(145px,auto);align-items:center;gap:8px;padding:11px}.reservation-filter>.input{height:40px;font-size:12px}.reservation-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.reservation-kpis>div{position:relative;min-width:0;padding:14px 12px 13px 49px;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-md)}.reservation-kpis>div>span{position:absolute;left:12px;top:14px;width:29px;height:29px;display:grid;place-items:center;border-radius:8px;font-size:17px}.reservation-kpis p{overflow:hidden;color:var(--c-text-2);font-size:16px;white-space:nowrap;text-overflow:ellipsis}.reservation-kpis b{display:block;margin-top:3px;font-size:18px;white-space:nowrap}.reservation-attention{display:flex;align-items:center;gap:15px;padding:12px;border:1px solid #fedf89;border-radius:var(--r-md);background:#fffcf5}.reservation-attention>h3{min-width:105px;font-size:16px}.reservation-attention>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1}.reservation-attention .unit-alert{padding:8px;background:#fff}.reservation-attention section b,.reservation-attention section span{display:block}.reservation-attention section b{font-size:16px}.reservation-attention section span{color:var(--c-text-2);font-size:9.5px}.reservation-table{min-width:1250px}.reservation-table td{max-width:190px;font-size:14px}.reservation-table td>b,.reservation-table td>small{display:block}.reservation-table td>small{color:var(--c-text-2);font-size:9.5px}.days-left{display:inline-flex;padding:3px 7px;border-radius:6px;background:#f2f4f7;color:#475467;font-size:16px;font-weight:700;white-space:nowrap}.days-left.is-urgent{background:#fef4e6;color:#b54708}.days-left.is-expired{background:#feecea;color:#b42318}.reservation-summary{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.reservation-summary>div{min-width:0;padding:13px;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-md)}.reservation-summary span{display:block;color:var(--c-text-2);font-size:12px}.reservation-summary b{display:block;overflow:hidden;margin-top:4px;font-size:15px;white-space:nowrap;text-overflow:ellipsis}.reservation-summary .is-emphasis{border-color:#fedf89;background:#fffcf5}.reservation-summary .is-emphasis b{color:#b54708}.reservation-period{display:grid;grid-template-columns:auto minmax(180px,1fr) auto auto;align-items:center;gap:18px;padding:18px 20px;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-md)}.reservation-period>div>span{display:block;color:var(--c-text-2);font-size:12px;letter-spacing:.6px}.reservation-period>div>b{font-size:14px}.reservation-period__line{position:relative;text-align:center}.reservation-period__line i{display:block;height:3px;background:linear-gradient(90deg,var(--c-brand-300),var(--c-brand-600));border-radius:99px}.reservation-period__line i::before,.reservation-period__line i::after{content:'';position:absolute;top:-3px;width:9px;height:9px;border-radius:50%;background:var(--c-brand-600)}.reservation-period__line i::before{left:0}.reservation-period__line i::after{right:0}.reservation-period__line span{margin-top:5px!important}.reservation-period>strong{padding:5px 9px;border-radius:7px;background:var(--c-brand-50);color:var(--c-brand-700);font-size:12px;white-space:nowrap}.reservation-period>strong.is-urgent{background:#fef4e6;color:#b54708}.reservation-property{overflow:hidden;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg)}.reservation-property__image{position:relative;height:115px;display:grid;place-items:center;background:#2d425e;color:#fff;font-size:52px}.reservation-property__image>span{position:absolute;right:10px;top:10px;padding:3px 8px;border-radius:6px;background:#7a5af8;font-size:12px;font-weight:800;letter-spacing:.5px}.reservation-property>section{padding:14px}.reservation-property h3,.reservation-property p{margin:0}.reservation-property p{color:var(--c-text-2);font-size:12px}.reservation-property>section>div{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:11px 0}.reservation-property>section>div span{padding:7px;border-radius:7px;background:#f7f8fb;color:var(--c-text-2);font-size:9.5px}.reservation-property>section>div b{display:block;color:var(--c-text);font-size:12px}.reservation-property>section>small{display:block;margin-bottom:8px;color:var(--c-purple);font-size:12px}.reservation-unit-check{padding:11px 13px;border:1px solid var(--c-border);border-radius:8px;background:#f8f9fb;color:var(--c-text-2);font-size:12px}.reservation-unit-check.is-available{border-color:#a6f4c5;background:#e7f8f0;color:#067647;font-weight:600}.reservation-unit-check.is-unavailable{border-color:#fecdca;background:#feecea;color:#b42318;font-weight:600}.reservation-integrity{display:flex;gap:11px;padding:13px;border:1px solid #b2ddff;border-radius:var(--r-md);background:#eff8ff;color:#175cd3}.reservation-integrity>i{font-size:24px}.reservation-integrity b,.reservation-integrity span{display:block}.reservation-integrity b{font-size:12px}.reservation-integrity span{font-size:16px}
@media(max-width:1400px){.reservation-filter{grid-template-columns:repeat(4,1fr)}.reservation-filter .search-inline{grid-column:span 2}.reservation-attention{align-items:flex-start;flex-direction:column}.reservation-attention>div{width:100%}.reservation-summary{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.reservation-filter{grid-template-columns:repeat(2,1fr)}.reservation-filter .search-inline{grid-column:span 2}.reservation-kpis{grid-template-columns:repeat(2,1fr)}.reservation-attention>div{grid-template-columns:1fr}.reservation-period{grid-template-columns:1fr}.reservation-period__line{min-height:25px}.reservation-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.reservation-filter{grid-template-columns:1fr}.reservation-filter .search-inline{grid-column:auto}.reservation-kpis,.reservation-summary{grid-template-columns:1fr}}

/* Contracts */
.contract-filter{display:grid;grid-template-columns:minmax(220px,1fr) repeat(4,minmax(130px,auto)) 135px 135px minmax(135px,auto);align-items:center;gap:7px;padding:10px}.contract-filter>.input{height:40px;font-size:12px}.contract-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.contract-kpis>div{position:relative;min-width:0;padding:13px 10px 12px 46px;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-md)}.contract-kpis>div>span{position:absolute;left:11px;top:13px;width:27px;height:27px;display:grid;place-items:center;border-radius:8px}.contract-kpis p{overflow:hidden;color:var(--c-text-2);font-size:9.5px;white-space:nowrap;text-overflow:ellipsis}.contract-kpis b{display:block;margin-top:3px;font-size:16px;white-space:nowrap}.contract-kpis small{color:var(--c-text-2);font-size:8.5px}.contract-attention{display:flex;align-items:center;gap:13px;padding:11px;border:1px solid #fedf89;border-radius:var(--r-md);background:#fffcf5}.contract-attention>h3{min-width:105px;font-size:16px}.contract-attention>div{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;flex:1}.contract-attention .unit-alert{padding:7px}.contract-attention section b,.contract-attention section span{display:block}.contract-attention section b{font-size:12px}.contract-attention section span{color:var(--c-text-2);font-size:12px}.contract-table{min-width:1450px}.contract-table td{max-width:185px;font-size:12px}.contract-table td>b,.contract-table td>small{display:block}.contract-table td>small{color:var(--c-text-2);font-size:12px}.contract-summary{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.contract-summary>div{min-width:0;padding:13px;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-md)}.contract-summary span{display:block;color:var(--c-text-2);font-size:9.5px}.contract-summary b{display:block;overflow:hidden;margin-top:4px;font-size:14.5px;white-space:nowrap;text-overflow:ellipsis}.contract-summary .is-urgent{border-color:#fedf89;background:#fffcf5}.contract-summary .is-urgent b{color:#b54708}.contract-property{overflow:hidden;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg)}.contract-property>div{position:relative;height:105px;display:grid;place-items:center;background:#2b415d;color:#fff;font-size:48px}.contract-property>div>span{position:absolute;right:10px;top:10px;padding:3px 8px;border-radius:6px;background:#7a5af8;font-size:12px;font-weight:800}.contract-property>section{padding:14px}.contract-property h3,.contract-property p{margin:0}.contract-property p{color:var(--c-text-2);font-size:12px}.contract-property dl{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin:11px 0;font-size:12px}.contract-property dt{color:var(--c-text-2)}.contract-property dd{margin:0;text-align:right}.contract-terms{display:grid;grid-template-columns:repeat(2,1fr);gap:0 20px}.contract-terms>div{padding:8px 0;border-bottom:1px solid var(--c-border-2)}.contract-terms span,.contract-terms b{display:block}.contract-terms span{color:var(--c-text-2);font-size:9.5px}.contract-terms b{font-size:12px}.contract-revenue dl{display:grid;grid-template-columns:1fr auto;gap:0;margin:0}.contract-revenue dt,.contract-revenue dd{margin:0;padding:9px 0;border-bottom:1px solid var(--c-border-2);font-size:12px}.contract-revenue dt{color:var(--c-text-2)}.contract-revenue dd{text-align:right;font-weight:700}.contract-revenue>div{margin-top:14px;padding:12px;border-radius:8px;background:var(--c-brand-50)}.contract-revenue>div span,.contract-revenue>div b{display:block}.contract-revenue>div span{color:var(--c-brand-600);font-size:9.5px}.contract-revenue>div b{color:var(--c-brand-700);font-size:20px}.source-chain{display:flex;align-items:center;gap:8px;overflow-x:auto}.source-chain>a{min-width:118px;padding:10px;border:1px solid var(--c-border);border-radius:8px}.source-chain>a.is-current{border-color:var(--c-brand-400);background:var(--c-brand-50)}.source-chain span,.source-chain b{display:block}.source-chain span{color:var(--c-text-2);font-size:8.5px}.source-chain b{font-size:16px}.source-chain>i{color:var(--c-text-3)}.renewal-panel{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:20px;padding:17px;border:1px solid #d9d6fe;border-radius:var(--r-md);background:#faf9ff}.renewal-panel span{color:#6941c6;font-size:12px;letter-spacing:.6px}.renewal-panel h3,.renewal-panel p{margin:0}.renewal-panel p{color:var(--c-text-2);font-size:16px}.renewal-panel>div:last-child{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
@media(max-width:1400px){.contract-filter{grid-template-columns:repeat(4,1fr)}.contract-filter .search-inline{grid-column:span 2}.contract-attention{align-items:flex-start;flex-direction:column}.contract-attention>div{width:100%;grid-template-columns:repeat(2,1fr)}.contract-summary{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.contract-kpis{grid-template-columns:repeat(3,1fr)}.renewal-panel{grid-template-columns:1fr}.renewal-panel>div:last-child{justify-content:flex-start}}
@media(max-width:650px){.contract-filter{grid-template-columns:1fr}.contract-filter .search-inline{grid-column:auto}.contract-kpis,.contract-summary{grid-template-columns:repeat(2,1fr)}.contract-attention>div{grid-template-columns:1fr}.contract-terms{grid-template-columns:1fr}}

/* Renewals */
.renewal-filter{display:grid;grid-template-columns:minmax(250px,1fr) repeat(5,minmax(140px,auto));align-items:center;gap:8px;padding:11px}.renewal-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.renewal-kpis>div{position:relative;min-width:0;padding:13px 10px 12px 46px;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-md)}.renewal-kpis>div>span{position:absolute;left:11px;top:13px;width:27px;height:27px;display:grid;place-items:center;border-radius:8px}.renewal-kpis p{overflow:hidden;color:var(--c-text-2);font-size:9.5px;white-space:nowrap;text-overflow:ellipsis}.renewal-kpis b{display:block;margin-top:3px;font-size:16px;white-space:nowrap}.renewal-kpis small{color:var(--c-text-2);font-size:8.5px}.renewal-alerts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.renewal-periods{display:inline-flex;gap:3px;padding:3px;border-radius:9px;background:#eef1f6}.renewal-periods button{padding:6px 10px;border:0;border-radius:7px;background:transparent;color:var(--c-text-2);font-size:16px;cursor:pointer}.renewal-periods button.is-active{background:#fff;color:var(--c-brand-600);box-shadow:var(--sh-xs)}.renewal-pipeline{display:grid;grid-auto-flow:column;grid-auto-columns:245px;align-items:start;gap:10px;overflow-x:auto;padding-bottom:10px}.renewal-pipeline>section{overflow:hidden;border:1px solid var(--c-border);border-radius:var(--r-md);background:#f7f8fb}.renewal-pipeline header{display:flex;align-items:center;gap:7px;padding:10px;background:#fff;border-bottom:1px solid var(--c-border)}.renewal-pipeline header>span{width:8px;height:8px;border-radius:50%;background:var(--stage)}.renewal-pipeline header>b{font-size:12px}.renewal-pipeline header>em{margin-left:auto;padding:1px 6px;border-radius:99px;background:#f2f4f7;font-size:12px;font-style:normal}.renewal-pipeline>section>div{display:grid;gap:8px;padding:8px}.renewal-card{padding:11px;background:#fff;border:1px solid var(--c-border);border-radius:8px;box-shadow:var(--sh-xs)}.renewal-card>b,.renewal-card>span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.renewal-card>b{font-size:14px}.renewal-card>span{margin-top:2px;color:var(--c-text-2);font-size:9.5px}.renewal-card>div{display:flex;justify-content:space-between;gap:5px;margin-top:8px}.renewal-card small{color:var(--c-text-2);font-size:12px}.renewal-card strong{font-size:12px}.renewal-card strong.urgent{color:#b54708}.renewal-card footer{margin-top:8px;padding-top:7px;border-top:1px solid var(--c-border-2);color:var(--c-text-2);font-size:12px}.renewal-stage-empty{padding:22px 8px;text-align:center;color:var(--c-text-3);font-size:9.5px}.renewal-table{min-width:1250px}.renewal-table td{max-width:180px;font-size:12px}.renewal-table td>b,.renewal-table td>small{display:block}.renewal-table td>small{color:var(--c-text-2);font-size:12px}.renewal-forecast>div{display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--c-border-2)}.renewal-forecast>div>span{font-size:12px}.renewal-forecast>div>b{font-size:12px}.renewal-forecast>div>small{grid-column:2/-1;color:var(--c-text-2);font-size:12px}.renewal-detail-grid{display:grid;grid-template-columns:1fr 330px;gap:16px}.renewal-next.is-overdue{border-color:#fecdca}.renewal-next .card__body>span{color:var(--c-text-2);font-size:12px}.renewal-next .card__body h3{margin:2px 0 8px}.renewal-next .card__body p{color:var(--c-text-2);font-size:12px}.renewal-comparison{display:grid;grid-template-columns:1fr 38px 1fr 260px;align-items:stretch;gap:12px}.renewal-comparison>div,.renewal-comparison>aside{position:relative;padding:18px;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-md)}.renewal-comparison>.is-proposed{border-color:var(--c-brand-300);background:#fafaff}.renewal-comparison>i{align-self:center;text-align:center;color:var(--c-brand-500);font-size:26px}.renewal-comparison span{color:var(--c-text-2);font-size:12px;letter-spacing:.5px}.renewal-comparison h3{margin:7px 0 12px;font-size:26px}.renewal-comparison h3 small{font-size:12px;color:var(--c-text-2)}.renewal-comparison dl{display:grid;grid-template-columns:1fr auto;gap:6px;margin:0;font-size:16px}.renewal-comparison dt{color:var(--c-text-2)}.renewal-comparison dd{margin:0;text-align:right;font-weight:600}.renewal-change{position:absolute;right:14px;top:14px;padding:3px 7px;border-radius:6px;font-size:12px}.renewal-change.up{background:#e7f8f0;color:#067647}.renewal-change.down{background:#feecea;color:#b42318}.renewal-comparison aside{background:#111c36;color:#fff}.renewal-comparison aside dl{margin-top:14px}.renewal-comparison aside dt{color:#aeb9cc}.renewal-comparison aside dd.positive{color:#6ce9a6}.renewal-comparison aside dd.negative{color:#fda29b}.renewal-decisions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.renewal-decisions label{display:flex;align-items:center;gap:7px;padding:10px;border:1px solid var(--c-border);border-radius:8px;cursor:pointer}.renewal-decisions label.is-selected{border-color:var(--c-brand-400);background:var(--c-brand-50)}.renewal-decisions input{display:none}.renewal-decisions i{color:var(--c-brand-500);font-size:19px}.renewal-decisions span{font-size:16px}.moveout-box{margin-top:12px;padding:11px;border:1px solid #fecdca;border-radius:8px;background:#fff7f6}.moveout-box b,.moveout-box p{display:block;margin:0}.moveout-box p{margin:3px 0 9px;color:var(--c-text-2);font-size:12px}.renewal-chain{text-align:center}.renewal-chain>div{padding:11px;border:1px solid var(--c-border);border-radius:8px}.renewal-chain>div.is-new{border-color:var(--c-brand-300);background:var(--c-brand-50)}.renewal-chain b,.renewal-chain span,.renewal-chain small{display:block}.renewal-chain span,.renewal-chain small{color:var(--c-text-2);font-size:12px}.renewal-chain>i{display:block;margin:6px;color:var(--c-brand-400)}.renewal-chain>strong{font-size:12px}.renewal-source-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.renewal-source-summary>div,.renewal-source-summary>span{padding:10px;border:1px solid var(--c-border-2);border-radius:8px}.renewal-source-summary span,.renewal-source-summary b{display:block}.renewal-source-summary span{color:var(--c-text-2);font-size:9.5px}.renewal-source-summary b{font-size:12px}
@media(max-width:1300px){.renewal-filter{grid-template-columns:repeat(3,1fr)}.renewal-filter .search-inline{grid-column:span 2}.renewal-kpis{grid-template-columns:repeat(3,1fr)}.renewal-comparison{grid-template-columns:1fr 30px 1fr}.renewal-comparison>aside{grid-column:1/-1}.renewal-alerts{grid-template-columns:1fr}}
@media(max-width:900px){.renewal-detail-grid{grid-template-columns:1fr}.renewal-source-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.renewal-filter{grid-template-columns:1fr}.renewal-filter .search-inline{grid-column:auto}.renewal-kpis{grid-template-columns:repeat(2,1fr)}.renewal-comparison{grid-template-columns:1fr}.renewal-comparison>i{transform:rotate(90deg)}.renewal-comparison>aside{grid-column:auto}.renewal-periods{max-width:100%;overflow-x:auto}.renewal-source-summary,.renewal-decisions{grid-template-columns:1fr}}

/* Warehouse Analytics Report */
.warehouse-filter{display:grid;grid-template-columns:140px repeat(6,minmax(130px,1fr)) auto;align-items:end;gap:8px;padding:11px}.warehouse-filter .field{margin:0}.warehouse-filter label{font-size:12px}.warehouse-filter .input,.warehouse-filter .select{height:38px;font-size:16px}.warehouse-filter__actions{display:flex;gap:5px}.warehouse-active-filters{display:flex;flex-wrap:wrap;gap:5px}.warehouse-active-filters span{padding:3px 8px;border:1px solid var(--c-border);border-radius:99px;background:#fff;color:var(--c-text-2);font-size:12px}.warehouse-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.warehouse-kpis>div{position:relative;min-width:0;padding:12px 9px 11px 44px;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-md)}.warehouse-kpis>div>span{position:absolute;left:10px;top:12px;width:26px;height:26px;display:grid;place-items:center;border-radius:7px}.warehouse-kpis p{overflow:hidden;color:var(--c-text-2);font-size:12px;white-space:nowrap;text-overflow:ellipsis}.warehouse-kpis b{display:block;overflow:hidden;margin-top:3px;font-size:16px;white-space:nowrap;text-overflow:ellipsis}.warehouse-kpis small{display:block;color:var(--c-text-2);font-size:8px}.warehouse-secondary{display:flex;flex-wrap:wrap;gap:0;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-md)}.warehouse-secondary span{flex:1;min-width:125px;padding:9px 12px;border-right:1px solid var(--c-border-2);color:var(--c-text-2);font-size:12px}.warehouse-secondary b{display:block;color:var(--c-text);font-size:14px}.report-major .card__head>b{font-size:22px;color:#067647}.portfolio-stack{display:flex;height:18px;overflow:hidden;border-radius:99px;background:#edf1f6}.portfolio-stack i{display:block;height:100%}.portfolio-legend{display:flex;justify-content:space-between;gap:15px;margin-top:15px}.portfolio-legend span{color:var(--c-text-2);font-size:9.5px}.portfolio-legend span>i{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:2px}.portfolio-legend b{display:block;margin:3px 0 0 13px;color:var(--c-text);font-size:12px}.unit-status-report{display:grid;gap:5px}.unit-status-report>div{display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:7px;border-bottom:1px solid var(--c-border-2);font-size:12px}.unit-status-report strong{min-width:70px;text-align:right}.status-dot{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:2px}.status-dot.status-vacant{background:#12b76a}.status-dot.status-reserved{background:#f79009}.status-dot.status-occupied{background:#7a5af8}.status-dot.status-maintenance{background:#98a2b3}.status-dot.status-blocked{background:#f04438}.project-report-list{padding:6px 18px 15px}.project-report-list>div{display:grid;grid-template-columns:minmax(180px,1.4fr) repeat(4,80px) minmax(140px,1fr) 48px;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--c-border-2)}.project-report-list a b,.project-report-list a small,.project-report-list span b{display:block}.project-report-list a b{font-size:12px}.project-report-list a small,.project-report-list span{color:var(--c-text-2);font-size:8.5px}.project-report-list span b{color:var(--c-text);font-size:12px}.project-report-list .portfolio-stack{height:8px}.project-report-list>div>strong{text-align:right;font-size:12px}.report-unavailable .card__body{text-align:center;padding:36px}.report-unavailable .card__body>i{font-size:34px;color:var(--c-text-3)}.report-unavailable .card__body>b,.report-unavailable .card__body>p{display:block}.report-unavailable .card__body>b{margin-top:7px;font-size:12px}.report-unavailable .card__body>p{color:var(--c-text-2);font-size:9.5px}.rate-comparison{display:grid;grid-template-columns:1fr 30px 1fr auto;align-items:center;gap:10px}.rate-comparison>div{padding:12px;border:1px solid var(--c-border);border-radius:8px}.rate-comparison span,.rate-comparison b,.rate-comparison small{display:block}.rate-comparison span,.rate-comparison small{color:var(--c-text-2);font-size:8.5px}.rate-comparison b{font-size:19px}.rate-comparison>i{color:var(--c-brand-500);font-size:20px}.rate-comparison>strong{padding:4px 7px;border-radius:6px;background:#f2f4f7;font-size:12px}.revenue-report dl{display:grid;grid-template-columns:1fr auto;margin:0}.revenue-report dt,.revenue-report dd{margin:0;padding:8px 0;border-bottom:1px solid var(--c-border-2);font-size:12px}.revenue-report dt{color:var(--c-text-2)}.revenue-report dd{text-align:right;font-weight:700}.revenue-report>div{margin-top:12px;padding:12px;border:1px solid #b2ddff;border-radius:8px;background:#eff8ff}.revenue-report>div span,.revenue-report>div b,.revenue-report>div small{display:block}.revenue-report>div span,.revenue-report>div small{color:#175cd3;font-size:8.5px}.revenue-report>div b{font-size:17px}.revenue-project-bars>div,.expiry-report>div{display:grid;grid-template-columns:minmax(120px,1fr) 1.5fr auto;align-items:center;gap:10px;padding:8px 0}.revenue-project-bars span,.expiry-report span{overflow:hidden;font-size:9.5px;white-space:nowrap;text-overflow:ellipsis}.revenue-project-bars b,.expiry-report b{font-size:12px}.revenue-project-bars small,.expiry-report small{grid-column:2/-1;color:var(--c-text-2);font-size:8.5px}.renewal-risk-report .card__body{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.renewal-risk-report .card__body>div{padding:10px;border:1px solid var(--c-border-2);border-radius:8px}.renewal-risk-report span,.renewal-risk-report b{display:block}.renewal-risk-report span{color:var(--c-text-2);font-size:8.5px}.renewal-risk-report b{margin-top:3px;font-size:16px}.performance-table{min-width:1050px}.performance-table td{font-size:12px}
@media(max-width:1400px){.warehouse-filter{grid-template-columns:repeat(4,1fr)}.warehouse-filter__actions{grid-column:span 2}.warehouse-kpis{grid-template-columns:repeat(3,1fr)}.project-report-list>div{grid-template-columns:minmax(180px,1.4fr) repeat(4,70px) minmax(120px,1fr) 42px}.renewal-risk-report .card__body{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.warehouse-filter{grid-template-columns:repeat(2,1fr)}.warehouse-kpis{grid-template-columns:repeat(2,1fr)}.project-report-list{overflow-x:auto}.project-report-list>div{min-width:850px}.portfolio-legend{align-items:flex-start;flex-direction:column}.renewal-risk-report .card__body{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.warehouse-filter,.warehouse-kpis{grid-template-columns:1fr}.warehouse-filter__actions{grid-column:auto}.renewal-risk-report .card__body{grid-template-columns:1fr}}

.nav-link.is-active {
    background: linear-gradient(90deg, var(--c-brand-500), var(--c-brand-600));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(79,70,229,.38);
}

.nav-link .caret { font-size: 15px; transition: transform .2s; opacity: .7; }
.nav-item.is-open > .nav-link .caret { transform: rotate(90deg); }
.nav-item.is-open > .nav-link { color: #fff; }

.nav-badge {
    font-size: 16px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--r-full);
    background: var(--c-danger);
    color: #fff;
}

.nav-sub {
    list-style: none;
    margin: 2px 0 4px;
    padding: 0 0 0 34px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
}
.nav-item.is-open > .nav-sub { max-height: 460px; }

.nav-sub a {
    display: block;
    padding: 7px 12px;
    font-size:16px;
    color: #8494ad;
    border-radius: var(--r-sm);
    border-left: 2px solid rgba(255,255,255,.09);
    transition: color .16s, border-color .16s;
}
.nav-sub a:hover { color: #fff; border-color: var(--c-brand-400); }
.nav-sub a.is-active { color: #fff; font-weight: 600; border-color: var(--c-brand-400); background: rgba(255,255,255,.05); }

.sidebar__foot {
    padding: 14px;
    border-top: 1px solid rgba(255,255,255,.06);
    flex-shrink: 0;
}
.side-card {
    background: linear-gradient(135deg, rgba(79,70,229,.22), rgba(6,174,212,.14));
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--r-md);
    padding: 13px 14px;
}
.side-card b { color: #fff; font-size:16px; display: block; }
.side-card p { color: #93a1b8; font-size: 14px; margin-top: 2px; }

/* -- Main -- */
.main {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .28s cubic-bezier(.4,0,.2,1);
}

/* -- Topbar -- */
.topbar {
    position: sticky; top: 0;
    z-index: 50;
    height: var(--topbar-h);
    background: rgba(255,255,255,.88);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 26px;
}

.icon-btn {
    width: 38px; height: 38px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: transparent;
    display: grid; place-items: center;
    font-size: 20px;
    color: var(--c-text-2);
    cursor: pointer;
    position: relative;
    transition: background .16s, color .16s;
}
.icon-btn:hover { background: var(--c-bg); color: var(--c-text); }

.notification-btn {
    width: 46px;
    height: 46px;
    font-size: 28px;
}
.notification-btn .dot-badge {
    top: 4px;
    right: 3px;
}

.topbar__search {
    position: relative;
    flex: 1;
    max-width: 400px;
}
.topbar__search i {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--c-text-3); font-size: 19px;
}
.topbar__search input {
    width: 100%;
    height: 40px;
    border: 1px solid var(--c-border);
    background: #f7f8fc;
    border-radius: var(--r-full);
    padding: 0 16px 0 40px;
    font-size:16px;
    outline: none;
    transition: border-color .16s, box-shadow .16s, background .16s;
}
.topbar__search input::placeholder { color: var(--c-text-3); }
.topbar__search input:focus {
    background: #fff;
    border-color: var(--c-brand-300);
    box-shadow: 0 0 0 4px var(--c-brand-50);
}
.kbd {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: 16px; font-weight: 600; color: var(--c-text-3);
    border: 1px solid var(--c-border); border-radius: 6px;
    padding: 1px 6px; background: #fff;
}

.dot-badge {
    position: absolute; top: 7px; right: 7px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: var(--r-full);
    background: var(--c-danger);
    color: #fff;
    font-size:12px; font-weight: 700;
    display: grid; place-items: center;
    border: 2px solid #fff;
}

.user-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 12px 5px 5px;
    border-radius: var(--r-full);
    border: 1px solid var(--c-border);
    background: #fff;
    cursor: pointer;
    transition: box-shadow .16s, border-color .16s;
}
.user-chip:hover { box-shadow: var(--sh-sm); border-color: var(--c-brand-200); }
.user-chip .avatar { width: 32px; height: 32px; }
.user-chip__meta { line-height: 1.2; }
.user-chip__meta b { display: block; font-size:16px; font-weight: 600; }
.user-chip__meta span { display: block; font-size:12px; color: var(--c-text-2); }

/* -- Dropdown -- */
.dd { position: relative; }
.dd__panel {
    position: absolute;
    top: calc(100% + 10px); right: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    padding: 7px;
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition: all .18s ease;
    z-index: 80;
}
.dd.is-open .dd__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.dd__head { padding: 10px 12px 8px; border-bottom: 1px solid var(--c-border-2); margin-bottom: 5px; }
.dd__item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    font-size:16px;
    color: var(--c-text);
    transition: background .14s;
}
.dd__item i { font-size: 19px; color: var(--c-text-2); }
.dd__item:hover { background: var(--c-bg); }
.dd__item.is-danger { color: var(--c-danger); }
.dd__item.is-danger i { color: var(--c-danger); }
.dd__sep { height: 1px; background: var(--c-border-2); margin: 5px 0; }

/* -- Page -- */
.page { padding: 26px; flex: 1; }
@media (max-width: 640px) { .page { padding: 18px 14px; } }

.page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 22px;
}
.page-head h1 { font-size: 24px; font-weight: 800; }
.page-head .sub { color: var(--c-text-2); font-size:16px; margin-top: 3px; }

.crumb { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--c-text-3); margin-bottom: 7px; }
.crumb a:hover { color: var(--c-brand-500); }
.crumb i { font-size: 14px; }

/* ============================================================
   6. COMPONENTS
   ============================================================ */

/* -- Card -- */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
}
.card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 17px 20px;
    border-bottom: 1px solid var(--c-border-2);
}
.card__head h3 { font-size: 15.5px; font-weight: 700; }
.card__head .sub { font-size: 14px; color: var(--c-text-2); margin-top: 2px; }
.card__body { padding: 20px; }
.card__body.tight { padding: 0; }
.card__foot { padding: 14px 20px; border-top: 1px solid var(--c-border-2); }

/* -- Stat card -- */
.stat {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    box-shadow: var(--sh-xs);
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.stat::after {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--stat-c, var(--c-brand-500));
}
.stat__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stat__label { font-size: 14px; color: var(--c-text-2); font-weight: 500; }
.stat__value { font-size: 27px; font-weight: 800; letter-spacing: -.5px; margin-top: 5px; }
.stat__value small { font-size: 14px; font-weight: 600; color: var(--c-text-2); }
.stat__icon {
    width: 44px; height: 44px; border-radius: var(--r-md);
    display: grid; place-items: center;
    font-size: 23px;
    background: var(--stat-bg, var(--c-brand-50));
    color: var(--stat-c, var(--c-brand-500));
}
.stat__foot { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12px; }

.trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.trend.up { color: var(--c-success); }
.trend.down { color: var(--c-danger); }
.trend i { font-size: 15px; }

/* -- Buttons -- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 40px; padding: 0 17px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-size:16px; font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .17s ease;
}
.btn i { font-size: 19px; }
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: linear-gradient(135deg, var(--c-brand-500), var(--c-brand-600));
    color: #fff;
    box-shadow: 0 6px 16px rgba(79,70,229,.28);
}
.btn-primary:hover { box-shadow: 0 9px 22px rgba(79,70,229,.36); }

.btn-ghost { background: #fff; border-color: var(--c-border); color: var(--c-text); }
.btn-ghost:hover { border-color: var(--c-brand-300); color: var(--c-brand-600); background: var(--c-brand-50); }

.btn-soft { background: var(--c-brand-50); color: var(--c-brand-600); }
.btn-soft:hover { background: var(--c-brand-100); }

.btn-dark { background: var(--c-navy-900); color: #fff; }
.btn-dark:hover { background: var(--c-navy-700); }

.btn-danger-soft { background: var(--c-danger-bg); color: var(--c-danger); }
.btn-danger-soft:hover { background: #fddcd8; }

.btn-sm { height: 33px; padding: 0 12px; font-size: 14px; border-radius: var(--r-sm); }
.btn-sm i { font-size: 16px; }
.btn-icon { width: 40px; padding: 0; }
.btn-sm.btn-icon { width: 33px; }
.btn-block { width: 100%; }
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }

/* -- Badges -- */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: var(--r-full);
    font-size: 14px; font-weight: 600;
    white-space: nowrap;
    line-height: 1.7;
}
.badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.badge.no-dot::before { display: none; }
.badge-success { background: var(--c-success-bg); color: #067647; }
.badge-warning { background: var(--c-warning-bg); color: #b54708; }
.badge-danger  { background: var(--c-danger-bg);  color: #b42318; }
.badge-info    { background: var(--c-info-bg);    color: #175cd3; }
.badge-purple  { background: var(--c-purple-bg);  color: #5925dc; }
.badge-teal    { background: var(--c-teal-bg);    color: #0e7090; }
.badge-gray    { background: #f2f4f7; color: #475467; }
.badge-brand   { background: var(--c-brand-50); color: var(--c-brand-600); }

/* -- Avatar -- */
.avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size:16px; font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--c-brand-400), var(--c-brand-600));
    flex-shrink: 0;
    overflow: hidden;
    letter-spacing: .3px;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.xs { width: 28px; height: 28px; font-size:12px; }
.avatar.sm { width: 34px; height: 34px; font-size: 12px; }
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }
.avatar.xl { width: 84px; height: 84px; font-size: 27px; }
.avatar.g2 { background: linear-gradient(135deg, #34d399, #059669); }
.avatar.g3 { background: linear-gradient(135deg, #fbbf24, #d97706); }
.avatar.g4 { background: linear-gradient(135deg, #f472b6, #db2777); }
.avatar.g5 { background: linear-gradient(135deg, #38bdf8, #0369a1); }
.avatar.g6 { background: linear-gradient(135deg, #a78bfa, #6d28d9); }

.avatar-stack { display: flex; }
.avatar-stack .avatar { border: 2px solid #fff; margin-left: -9px; }
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-stack .more {
    background: #f2f4f7; color: var(--c-text-2); font-size:12px;
}

/* -- Table -- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th {
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--c-text-2);
    background: #fafbfe;
    padding: 12px 18px;
    border-bottom: 1px solid var(--c-border);
    white-space: nowrap;
}
.table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--c-border-2);
    font-size:16px;
    vertical-align: middle;
}
.table tbody tr { transition: background .14s; }
.table tbody tr:hover { background: #fafbff; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .cell-main { font-weight: 600; color: var(--c-text); }
.table .cell-sub { font-size: 12px; color: var(--c-text-2); }

/* -- Forms -- */
.field { margin-bottom: 16px; }
.label {
    display: block;
    font-size:16px; font-weight: 600;
    color: #344054;
    margin-bottom: 6px;
}
.label .req { color: var(--c-danger); }

.input, .select, .textarea {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color .16s, box-shadow .16s;
}
.textarea { height: auto; padding: 11px 14px; resize: vertical; min-height: 96px; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--c-text-3); }
.input:focus, .select:focus, .textarea:focus {
    border-color: var(--c-brand-400);
    box-shadow: 0 0 0 4px var(--c-brand-50);
}
.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 38px;
    cursor: pointer;
}
.input-group { position: relative; }
.input-group .ig-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 20px; color: var(--c-text-3); pointer-events: none;
}
.input-group .ig-action {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: 20px; color: var(--c-text-3); cursor: pointer; background: none; border: 0; padding: 0;
}
.input-group .ig-action:hover { color: var(--c-text-2); }
.input-group.has-icon .input { padding-left: 44px; }
.input-group.has-action .input { padding-right: 44px; }
.help { font-size: 12px; color: var(--c-text-2); margin-top: 5px; }

.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size:16px; }
.check input { width: 18px; height: 18px; accent-color: var(--c-brand-500); cursor: pointer; margin: 0; }

.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
    position: absolute; inset: 0;
    background: #d0d5dd; border-radius: var(--r-full);
    transition: background .2s; cursor: pointer;
}
.switch span::before {
    content: ''; position: absolute;
    width: 18px; height: 18px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%;
    transition: transform .2s; box-shadow: var(--sh-xs);
}
.switch input:checked + span { background: var(--c-brand-500); }
.switch input:checked + span::before { transform: translateX(18px); }

/* -- Toolbar / filters -- */
.toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 15px 20px;
    border-bottom: 1px solid var(--c-border-2);
}
.search-inline { position: relative; flex: 1; min-width: 210px; max-width: 330px; }
.search-inline i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--c-text-3); font-size: 19px; }
.search-inline input {
    width: 100%; height: 40px;
    border: 1px solid var(--c-border); border-radius: var(--r-md);
    padding: 0 14px 0 40px; font-size:16px; outline: none;
    transition: border-color .16s, box-shadow .16s;
}
.search-inline input:focus { border-color: var(--c-brand-400); box-shadow: 0 0 0 4px var(--c-brand-50); }
.select-sm { height: 40px; width: auto; min-width: 138px; font-size:16px; }

/* -- Tabs -- */
.tabs {
    display: flex; gap: 3px;
    border-bottom: 1px solid var(--c-border);
    overflow-x: auto;
}
.tabs a {
    padding: 12px 16px;
    font-size:16px; font-weight: 600;
    color: var(--c-text-2);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color .16s, border-color .16s;
}
.tabs a:hover { color: var(--c-text); }
.tabs a.is-active { color: var(--c-brand-600); border-color: var(--c-brand-500); }

.seg {
    display: inline-flex;
    background: #f2f4f7;
    border-radius: var(--r-md);
    padding: 3px;
}
.seg button {
    border: 0; background: transparent;
    padding: 7px 14px;
    border-radius: var(--r-sm);
    font-size: 14px; font-weight: 600;
    color: var(--c-text-2); cursor: pointer;
    transition: all .16s;
}
.seg button.is-active { background: #fff; color: var(--c-text); box-shadow: var(--sh-xs); }

/* -- Progress -- */
.bar { height: 7px; background: #eef1f7; border-radius: var(--r-full); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: var(--r-full); background: var(--c-brand-500); }

/* -- Pagination -- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pager__nums { display: flex; gap: 5px; }
.pager__nums a {
    min-width: 35px; height: 35px; padding: 0 9px;
    display: grid; place-items: center;
    border: 1px solid var(--c-border); border-radius: var(--r-sm);
    font-size:16px; font-weight: 600; color: var(--c-text-2);
    transition: all .16s;
}
.pager__nums a:hover { border-color: var(--c-brand-300); color: var(--c-brand-600); }
.pager__nums a.is-active { background: var(--c-brand-500); border-color: var(--c-brand-500); color: #fff; }

/* -- Timeline -- */
.timeline { position: relative; padding-left: 34px; }
.timeline::before {
    content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px;
    width: 2px; background: linear-gradient(180deg, var(--c-border), var(--c-border-2));
}
.tl-item { position: relative; padding-bottom: 24px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
    position: absolute; left: -34px; top: 0;
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 16px;
    background: #fff;
    border: 2px solid var(--c-border);
    color: var(--c-text-2);
}
.tl-dot.c-brand   { border-color: var(--c-brand-300);  background: var(--c-brand-50);  color: var(--c-brand-600); }
.tl-dot.c-success { border-color: #a6f4c5; background: var(--c-success-bg); color: #067647; }
.tl-dot.c-warning { border-color: #fedf89; background: var(--c-warning-bg); color: #b54708; }
.tl-dot.c-info    { border-color: #b2ddff; background: var(--c-info-bg);    color: #175cd3; }
.tl-dot.c-danger  { border-color: #fecdca; background: var(--c-danger-bg);  color: #b42318; }
.tl-dot.c-purple  { border-color: #d9d6fe; background: var(--c-purple-bg);  color: #5925dc; }

.tl-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 13px 16px;
    transition: box-shadow .16s, border-color .16s;
}
.tl-card:hover { box-shadow: var(--sh-sm); border-color: var(--c-brand-200); }
.tl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tl-head b { font-size: 14px; }
.tl-time { font-size: 14px; color: var(--c-text-3); white-space: nowrap; }
.tl-body { font-size:16px; color: var(--c-text-2); margin-top: 5px; }

/* -- Kanban / Pipeline -- */
.kanban {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 296px;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 14px;
    align-items: start;
}
.kb-col {
    background: #f8f9fd;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    display: flex; flex-direction: column;
    max-height: 74vh;
}
.kb-col__head {
    padding: 13px 15px;
    border-bottom: 1px solid var(--c-border);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: #fff;
}
.kb-col__title { display: flex; align-items: center; gap: 8px; font-size:16px; font-weight: 700; }
.kb-col__title .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--kb-c, var(--c-brand-500)); }
.kb-col__title .n {
    margin-left: auto; font-size: 14px; font-weight: 700;
    background: #f2f4f7; color: var(--c-text-2);
    border-radius: var(--r-full); padding: 1px 8px;
}
.kb-col__sum { font-size: 12px; color: var(--c-text-2); margin-top: 4px; }
.kb-col__body { padding: 11px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }

.kb-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--kb-c, var(--c-brand-500));
    border-radius: var(--r-md);
    padding: 13px 14px;
    box-shadow: var(--sh-xs);
    cursor: grab;
    transition: transform .16s, box-shadow .16s;
}
.kb-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.kb-card__co { font-size:16px; font-weight: 700; line-height: 1.4; }
.kb-card__meta { font-size: 12px; color: var(--c-text-2); margin-top: 3px; }
.kb-card__val { font-size: 15px; font-weight: 800; color: var(--c-brand-600); margin-top: 9px; }
.kb-card__foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--c-border);
}

/* -- Calendar -- */
.cal { border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.cal__dow {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    background: #fafbfe; border-bottom: 1px solid var(--c-border);
}
.cal__dow div {
    padding: 10px 8px; text-align: center;
    font-size: 14px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--c-text-2);
}
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal__cell {
    min-height: 116px;
    min-width: 0;
    border-right: 1px solid var(--c-border-2);
    border-bottom: 1px solid var(--c-border-2);
    padding: 8px;
    background: #fff;
    transition: background .14s;
}
.cal__cell:nth-child(7n) { border-right: 0; }
.cal__cell:hover { background: #fafbff; }
.cal__cell.is-out { background: #fafbfd; }
.cal__cell.is-out .cal__num { color: var(--c-text-3); }
.cal__num { font-size: 14px; font-weight: 700; color: var(--c-text-2); margin-bottom: 6px; }
.cal__cell.is-today .cal__num {
    background: var(--c-brand-500); color: #fff;
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
}
.cal-ev {
    display: block;
    font-size: 14px; font-weight: 600;
    padding: 3px 7px;
    border-radius: 6px;
    margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-left: 3px solid currentColor;
}
.cal-ev.e-brand   { background: var(--c-brand-50);   color: var(--c-brand-600); }
.cal-ev.e-success { background: var(--c-success-bg); color: #067647; }
.cal-ev.e-warning { background: var(--c-warning-bg); color: #b54708; }
.cal-ev.e-danger  { background: var(--c-danger-bg);  color: #b42318; }
.cal-ev.e-info    { background: var(--c-info-bg);    color: #175cd3; }
.cal-ev.e-purple  { background: var(--c-purple-bg);  color: #5925dc; }

@media (max-width: 900px) { .cal__cell { min-height: 78px; } .cal-ev { font-size: 0; padding: 3px; } }

/* -- Notification list -- */
.notif {
    display: flex; gap: 13px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--c-border-2);
    transition: background .14s;
    cursor: pointer;
}
.notif:hover { background: #fafbff; }
.notif.is-unread { background: #f7f8ff; }
.notif.is-unread::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-brand-500); align-self: center; flex-shrink: 0;
}
.notif__ico {
    width: 40px; height: 40px; border-radius: var(--r-md);
    display: grid; place-items: center; font-size: 21px; flex-shrink: 0;
}
.notif__body { flex: 1; min-width: 0; }
.notif__body b { font-size:16px; }
.notif__body p { font-size: 14px; color: var(--c-text-2); margin-top: 2px; }
.notif__time { font-size: 14px; color: var(--c-text-3); margin-top: 5px; }

/* -- Chart helpers (pure CSS) -- */
.chart-bars {
    display: flex; align-items: flex-end; gap: 12px;
    height: 210px; padding-top: 10px;
}
.chart-bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.chart-bars .col {
    width: 100%; max-width: 34px;
    border-radius: 7px 7px 0 0;
    background: linear-gradient(180deg, var(--c-brand-400), var(--c-brand-600));
    position: relative;
    transition: opacity .16s;
}
.chart-bars .col.alt { background: linear-gradient(180deg, #c7d2fe, #a5b4fc); }
.chart-bars .col:hover { opacity: .85; }
.chart-bars .lb { font-size: 14px; color: var(--c-text-2); font-weight: 600; }

.donut {
    width: 168px; height: 168px; border-radius: 50%;
    display: grid; place-items: center;
    position: relative;
    flex-shrink: 0;
}
.donut::after {
    content: ''; position: absolute; inset: 26px;
    background: #fff; border-radius: 50%;
}
.donut__center { position: relative; z-index: 2; text-align: center; }
.donut__center b { display: block; font-size: 24px; font-weight: 800; }
.donut__center span { font-size: 14px; color: var(--c-text-2); }

.legend { display: flex; flex-direction: column; gap: 11px; }
.legend__row { display: flex; align-items: center; gap: 9px; font-size:16px; }
.legend__dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

.funnel { display: flex; flex-direction: column; gap: 9px; }
.funnel__row { display: flex; align-items: center; gap: 13px; }
.funnel__lb { width: 118px; font-size: 14px; font-weight: 600; color: var(--c-text-2); flex-shrink: 0; }
.funnel__bar {
    height: 34px; border-radius: var(--r-sm);
    display: flex; align-items: center; padding: 0 12px;
    color: #fff; font-size: 14px; font-weight: 700;
    min-width: 60px;
    transition: filter .16s;
}
.funnel__row:hover .funnel__bar { filter: brightness(1.06); }

/* -- Misc -- */
.divider { height: 1px; background: var(--c-border-2); margin: 18px 0; }
.dl { display: grid; grid-template-columns: 132px 1fr; gap: 11px 14px; font-size:16px; }
.dl dt { color: var(--c-text-2); }
.dl dd { margin: 0; font-weight: 500; }

.empty { padding: 54px 24px; text-align: center; }
.empty i { font-size: 46px; color: var(--c-text-3); }
.empty b { display: block; margin-top: 12px; font-size: 15px; }
.empty p { color: var(--c-text-2); font-size:16px; margin-top: 5px; }

.tag-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    font-size: 14px; font-weight: 500;
    background: #fff;
}

.alert {
    display: flex; gap: 12px;
    padding: 13px 16px;
    border-radius: var(--r-md);
    border: 1px solid;
    font-size:16px;
}
.alert i { font-size: 21px; flex-shrink: 0; }
.alert-info    { background: var(--c-info-bg);    border-color: #b2ddff; color: #175cd3; }
.alert-warning { background: var(--c-warning-bg); border-color: #fedf89; color: #b54708; }
.alert-danger  { background: var(--c-danger-bg);  border-color: #fecdca; color: #b42318; }
.alert-success { background: var(--c-success-bg); border-color: #a6f4c5; color: #067647; }

/* ============================================================
   7. RESPONSIVE SHELL
   ============================================================ */
.sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity .25s;
    z-index: 55;
}

/* Collapsed (desktop mini rail) */
@media (min-width: 1025px) {
    body.is-mini .sidebar { width: var(--sidebar-w-mini); }
    body.is-mini .main { margin-left: var(--sidebar-w-mini); }
    body.is-mini .brand-text,
    body.is-mini .nav-link .lbl,
    body.is-mini .nav-link .caret,
    body.is-mini .nav-badge,
    body.is-mini .nav-group-label,
    body.is-mini .sidebar__foot { display: none; }
    body.is-mini .nav-sub { display: none; }
    body.is-mini .sidebar__brand { justify-content: center; padding: 0; }
    body.is-mini .nav-link { justify-content: center; padding: 11px; }
}

@media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); box-shadow: var(--sh-xl); }
    body.is-open .sidebar { transform: translateX(0); }
    body.is-open .sidebar-backdrop { opacity: 1; visibility: visible; }
    .main { margin-left: 0; }
    .topbar { padding: 0 16px; }
    .topbar__search { max-width: none; }
}

@media (max-width: 640px) {
    .topbar__search, .kbd { display: none; }
    .user-chip__meta { display: none; }
    .user-chip { padding: 4px; border: 0; }
    .page-head h1 { font-size: 20px; }
}

/* ============================================================
   8. AUTH PAGES
   ============================================================ */
body.auth {
    margin: 0;
    min-height: 100vh;
    font-family: 'Noto Sans Thai', 'Inter', -apple-system, 'Segoe UI', sans-serif;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
}

.auth-shell { display: grid; grid-template-columns: 1fr 1.08fr; min-height: 100vh; }

/* Left — form */
.auth-form-side {
    display: flex; align-items: center; justify-content: center;
    padding: 44px 40px;
    background: #fff;
    position: relative;
}
.auth-box { width: 100%; max-width: 404px; }

.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 38px; }
.auth-brand .brand-mark { width: 44px; height: 44px; border-radius: 13px; font-size: 23px; }
.auth-brand .brand-text b { color: var(--c-text); font-size: 20px; }
.auth-brand .brand-text span { color: var(--c-text-3); }

.auth-title { font-size: 28px; font-weight: 800; letter-spacing: -.5px; }
.auth-sub { color: var(--c-text-2); font-size: 14px; margin-top: 8px; margin-bottom: 28px; }

.auth-foot { margin-top: 28px; text-align: center; font-size: 14px; color: var(--c-text-3); }
.auth-back { display: inline-flex; align-items: center; gap: 6px; font-size:16px; font-weight: 600; color: var(--c-brand-600); }
.auth-back:hover { text-decoration: underline; }

.link-brand { color: var(--c-brand-600); font-weight: 600; font-size:16px; }
.link-brand:hover { text-decoration: underline; }

/* Right — showcase */
.auth-art {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(6,174,212,.35) 0%, transparent 55%),
        radial-gradient(100% 80% at 0% 100%, rgba(124,58,237,.38) 0%, transparent 55%),
        linear-gradient(150deg, #1e1b4b 0%, #2c2a6e 45%, #172554 100%);
    display: flex; align-items: center;
    padding: 56px;
    color: #fff;
}
.auth-art::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
}
.auth-art__glow {
    position: absolute;
    width: 460px; height: 460px; border-radius: 50%;
    filter: blur(88px); opacity: .5;
}
.auth-art__glow.g1 { background: #4f46e5; top: -140px; right: -110px; }
.auth-art__glow.g2 { background: #06aed4; bottom: -160px; left: -110px; opacity: .35; }

.auth-art__inner { position: relative; z-index: 2; max-width: 520px; width: 100%; }

.art-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 15px;
    border-radius: var(--r-full);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    font-size: 14px; font-weight: 600;
    backdrop-filter: blur(8px);
    margin-bottom: 22px;
}
.art-badge .pulse {
    width: 7px; height: 7px; border-radius: 50%; background: #34d399;
    box-shadow: 0 0 0 0 rgba(52,211,153,.7);
    animation: pulse 2.2s infinite;
}
@keyframes pulse {
    70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); }
    100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

.art-title {
    font-size: 38px; font-weight: 800; line-height: 1.22; letter-spacing: -1px;
    margin-bottom: 14px;
}
.art-title em {
    font-style: normal;
    background: linear-gradient(100deg, #a5b4fc, #67e8f9);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.art-desc { font-size: 14.5px; line-height: 1.85; color: rgba(255,255,255,.72); margin-bottom: 34px; }

.art-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-bottom: 30px; }
.art-stat {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-md);
    padding: 15px 16px;
    backdrop-filter: blur(8px);
}
.art-stat b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.art-stat span { font-size: 14px; color: rgba(255,255,255,.6); }

.art-feats { display: flex; flex-direction: column; gap: 13px; }
.art-feat { display: flex; align-items: center; gap: 13px; font-size: 14px; }
.art-feat i {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 20px;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.13);
}
.art-feat span { color: rgba(255,255,255,.86); }

@media (max-width: 1024px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-art { display: none; }
    .auth-form-side { min-height: 100vh; background: var(--c-bg); }
    .auth-box {
        background: #fff; padding: 34px 30px;
        border-radius: var(--r-xl); box-shadow: var(--sh-lg);
        max-width: 440px;
    }
}
@media (max-width: 480px) {
    .auth-form-side { padding: 22px 14px; }
    .auth-box { padding: 26px 20px; }
    .auth-title { font-size: 23px; }
}

/* Flash */
.flash {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 15px; border-radius: var(--r-md);
    font-size:16px; font-weight: 500; margin-bottom: 20px;
}
.flash i { font-size: 20px; }
.flash-error { background: var(--c-danger-bg); color: #b42318; border: 1px solid #fecdca; }
.flash-ok { background: var(--c-success-bg); color: #067647; border: 1px solid #a6f4c5; }

/* OTP */
.otp { display: flex; gap: 10px; }
.otp input {
    flex: 1; height: 58px; text-align: center;
    font-size: 22px; font-weight: 700;
    border: 1px solid var(--c-border); border-radius: var(--r-md);
    outline: none; transition: border-color .16s, box-shadow .16s;
}
.otp input:focus { border-color: var(--c-brand-400); box-shadow: 0 0 0 4px var(--c-brand-50); }

/* Password strength */
.pw-meter { display: flex; gap: 5px; margin-top: 9px; }
.pw-meter i { flex: 1; height: 4px; border-radius: 99px; background: #e6e9f2; }
.pw-meter.s1 i:nth-child(1) { background: var(--c-danger); }
.pw-meter.s2 i:nth-child(-n+2) { background: var(--c-warning); }
.pw-meter.s3 i:nth-child(-n+3) { background: #84cc16; }
.pw-meter.s4 i { background: var(--c-success); }

/* Fade-in */
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise { animation: riseIn .45s cubic-bezier(.22,1,.36,1) both; }
.rise-1 { animation-delay: .05s; } .rise-2 { animation-delay: .1s; }
.rise-3 { animation-delay: .15s; } .rise-4 { animation-delay: .2s; }
.customer-toolbar .search-inline{flex:1;min-width:260px}.customer-empty{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--c-muted)}.customer-empty i{font-size:34px}.customer-form{max-width:900px;margin:auto}.customer-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.customer-form-grid label>span{display:block;margin-bottom:7px;font-size:14px;font-weight:600}.customer-form-grid .input,.customer-form-grid .select{width:100%}.customer-form-grid small{display:block;margin-top:5px;color:var(--c-muted)}.customer-form-actions{display:flex;justify-content:flex-end;gap:8px}@media(max-width:720px){.customer-form-grid{grid-template-columns:1fr}.customer-toolbar{flex-wrap:wrap}.customer-toolbar .search-inline{flex-basis:100%}}
.customer-create__layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:20px;align-items:start}.customer-create__main,.customer-create__side{display:grid;gap:20px}.form-section{overflow:hidden}.form-section__head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--c-border)}.form-section__head h3{font-size:15px}.form-section__head p{font-size:12px;color:var(--c-muted);margin-top:2px}.form-section__icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:20px;flex:0 0 auto}.form-section__icon.is-brand{color:#4f46e5;background:#eef2ff}.form-section__icon.is-green{color:#079455;background:#ecfdf3}.form-section__icon.is-orange{color:#dc6803;background:#fffaeb}.form-section__icon.is-blue{color:#1570ef;background:#eff8ff}.form-section__body{padding:20px}.form-stack{display:grid;gap:15px}.form-stack label>span,.source-detail>span{display:block;font-size:14px;font-weight:600;margin-bottom:7px}.form-stack .input,.form-stack .select{width:100%}.source-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.source-option{cursor:pointer}.source-option input{position:absolute;opacity:0;pointer-events:none}.source-option span{height:42px;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid var(--c-border);border-radius:10px;font-size:14px;font-weight:600;transition:.16s}.source-option span i{font-size:18px;color:var(--c-muted)}.source-option input:checked+span{border-color:var(--c-brand-500);background:var(--c-brand-50);color:var(--c-brand-700);box-shadow:0 0 0 2px rgba(79,70,229,.08)}.source-option input:checked+span i{color:var(--c-brand-600)}.source-detail{grid-column:1/-1;margin-top:5px}.source-detail .input{width:100%}.customer-create__actions{position:sticky;bottom:0;z-index:5;display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding:14px 18px;background:rgba(255,255,255,.94);border:1px solid var(--c-border);border-radius:14px;box-shadow:0 -5px 24px rgba(16,24,40,.06);backdrop-filter:blur(10px)}.source-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:99px;background:#f2f4f7;color:#475467;font-size:14px;font-weight:600;white-space:nowrap}.source-facebook{background:#eff8ff;color:#175cd3}.source-website{background:#eef2ff;color:#4338ca}.source-walk_in{background:#ecfdf3;color:#067647}.source-line{background:#ecfdf3;color:#027a48}@media(max-width:1050px){.customer-create__layout{grid-template-columns:1fr}.customer-create__side{grid-template-columns:1fr 1fr}}@media(max-width:720px){.customer-create__side{grid-template-columns:1fr}.source-options{grid-template-columns:1fr 1fr}.form-section__body{padding:16px}}

/* เตือนวันหมดสัญญาในตาราง Unit: <=30 วัน หรือหมดแล้ว = แดง */
.unit-clean-table td .unit-expiry{display:flex;align-items:center;gap:4px;width:fit-content;margin-top:3px}
.unit-clean-table td .unit-expiry.is-soon,.unit-clean-table td .unit-expiry.is-expired{padding:2px 7px;border-radius:6px;font-weight:700}
.unit-clean-table td .unit-expiry.is-soon{background:#fef3f2;color:#b42318}
.unit-clean-table td .unit-expiry.is-expired{background:#fee4e2;color:#912018}
.unit-clean-table td b.is-soon,.unit-clean-table td b.is-expired{color:#b42318}