/* DONUT ERP - extracted verbatim from the approved design (index.html). App-specific additions at the end. */
:root{
  --brand:#C8961E; --brand-2:#E9BD4F; --brand-soft:#FBF3DE; --brand-ink:#7A5808;
  --bg:#F8F7F3; --card:#FFFFFF; --ink:#23262F; --ink-2:#4A4F5C; --muted:#8A8F9B; --line:#EEEAE0; --line-2:#F4F1EA;
  --emerald:#10B981; --teal:#14B8A6; --sky:#0EA5E9; --violet:#8B5CF6; --rose:#F43F5E; --orange:#F97316; --amber:#F59E0B; --lime:#65A30D; --pink:#EC4899; --grey:#94A3B8;
  --r-lg:16px; --r-md:12px; --r-sm:8px;
  --shadow:0 1px 2px rgba(120,100,40,.06),0 6px 20px rgba(120,100,40,.06);
  --font:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Sora','DM Sans',system-ui,sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html[data-accent="emerald"]{--brand:#0E9F6E;--brand-2:#34D399;--brand-soft:#E7F8F0;--brand-ink:#065F46}
html[data-accent="teal"]{--brand:#0D9488;--brand-2:#2DD4BF;--brand-soft:#E4F7F5;--brand-ink:#115E59}
html[data-accent="blue"]{--brand:#2F7DF6;--brand-2:#60A5FA;--brand-soft:#E8F1FE;--brand-ink:#1E4FA8}
html[data-accent="purple"]{--brand:#8B5CF6;--brand-2:#A78BFA;--brand-soft:#F1ECFE;--brand-ink:#5B21B6}
html[data-accent="burgundy"]{--brand:#B4234A;--brand-2:#E0577A;--brand-soft:#FCEBF0;--brand-ink:#7F1733}
html[data-accent="orange"]{--brand:#EA6A0C;--brand-2:#FB923C;--brand-soft:#FEF0E4;--brand-ink:#9A3F05}
html[data-accent="grey"]{--brand:#64748B;--brand-2:#94A3B8;--brand-soft:#EFF2F6;--brand-ink:#334155}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
.ic{width:18px;height:18px;flex:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:260px 1fr;grid-template-rows:64px 1fr;height:100%}
.topbar{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:0 18px;background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:30}
.logo{display:flex;align-items:center;gap:10px;min-width:232px;text-decoration:none}
.logo b{font-family:var(--display);font-size:17px;letter-spacing:-.02em}
.logo small{display:block;font-size:11px;color:var(--brand-ink);font-weight:600;margin-top:-2px}
.sel{display:flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13px;cursor:pointer;white-space:nowrap}
.sel select{border:0;background:transparent;outline:0;font-weight:600;cursor:pointer;max-width:220px}
.sel span{color:var(--muted);font-size:12px}
.search{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--line-2);border-radius:10px;color:var(--muted);cursor:pointer;border:1px solid transparent}
.search:hover{border-color:var(--line)}
.search kbd{margin-left:auto;font-size:11px;border:1px solid var(--line);background:#fff;border-radius:6px;padding:1px 6px;font-family:var(--font)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{position:relative;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
.icon-btn:hover{background:var(--line-2)}
.icon-btn .dot{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--rose);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;border:2px solid #fff}
.ai-btn{display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;border:0;cursor:pointer;color:#fff;font-weight:600;background:linear-gradient(120deg,var(--violet),var(--pink) 60%,var(--orange))}
.user{display:flex;align-items:center;gap:9px;padding:4px 6px 4px 4px;border-radius:12px;cursor:pointer}
.avatar{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--brand-ink);background:var(--brand-soft)}
.user b{display:block;font-size:13px}.user small{color:var(--muted);font-size:11.5px}
.palette{display:flex;gap:5px;padding:6px 8px;border:1px solid var(--line);border-radius:10px}
.palette button{width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.palette button.on{box-shadow:0 0 0 2px var(--ink)}
.burger{display:none}

.sidebar{background:#fff;border-right:1px solid var(--line);overflow-y:auto;padding:12px 10px 30px}
.sb-group{font-size:11.5px;color:var(--muted);font-weight:600;padding:14px 12px 6px}
.sb-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;cursor:pointer;color:var(--ink-2);font-weight:500;text-decoration:none;font-size:13.5px}
.sb-item:hover{background:var(--line-2)}
.sb-item .chip{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none}
.sb-item .chip .ic{width:16px;height:16px}
.sb-item.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.sb-item .cnt{margin-left:auto;font-size:11px;font-weight:700;padding:1px 7px;border-radius:10px;background:var(--line-2);color:var(--ink-2)}
.sb-foot{margin:18px 8px 0;padding:12px;border-radius:12px;background:var(--brand-soft);font-size:12px;color:var(--brand-ink)}

.main{overflow-y:auto;padding:22px 26px 60px;min-width:0}
.crumb{font-size:12.5px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.crumb a{text-decoration:none;cursor:pointer}.crumb a:hover{color:var(--brand-ink)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:6px 0 16px;flex-wrap:wrap}
.page-head h1{font-family:var(--display);font-size:24px;letter-spacing:-.025em;margin:0;font-weight:600}
.page-head p{margin:3px 0 0;color:var(--muted)}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;color:var(--ink-2)}
.btn:hover{background:var(--line-2)}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.pri:hover{filter:brightness(.95)}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:8px}
.btn .ic{width:16px;height:16px}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tab{display:flex;align-items:center;gap:7px;padding:10px 14px;cursor:pointer;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;text-decoration:none;font-size:13.5px}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--brand-ink);border-color:var(--brand)}
.tab .ic{width:16px;height:16px}
.tab .n{font-size:11px;padding:0 7px;border-radius:10px;background:var(--rose);color:#fff}

/* ---------- cards & grid ---------- */
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g21{grid-template-columns:2fr 1fr}
.g12{grid-template-columns:1fr 2fr}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow);min-width:0}
.card h3{margin:0;font-size:14.5px;font-weight:700}
.card .sub{color:var(--muted);font-size:12px;margin-top:2px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.kpi{position:relative;overflow:hidden;cursor:pointer;transition:transform .15s}
.kpi:hover{transform:translateY(-2px)}
.kpi .lbl{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-weight:600;font-size:12.5px}
.kpi .lbl i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center}
.kpi .lbl i .ic{width:15px;height:15px}
.kpi .val{font-family:var(--display);font-size:25px;font-weight:600;letter-spacing:-.03em;margin:10px 0 2px}
.kpi .val small{font-size:13px;color:var(--muted);font-weight:500;margin-right:3px;font-family:var(--font)}
.kpi .foot{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.kpi canvas{position:absolute;right:10px;bottom:10px;width:90px!important;height:34px!important}
.delta{font-weight:700;padding:1px 6px;border-radius:6px;font-size:11.5px}
.up{color:#047857;background:#DCFCE7}.down{color:#BE123C;background:#FFE4E6}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--k,var(--brand))}

.chart-box{position:relative;height:260px}
.chart-box.sm{height:200px}.chart-box.lg{height:300px}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.tbl th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:10px 12px;background:#FCFBF8;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:#FFFCF3}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tfoot td{font-weight:700;background:#FCFBF8;border-top:1px solid var(--line)}
.link{color:var(--brand-ink);font-weight:600;cursor:pointer;text-decoration:none}
.link:hover{text-decoration:underline}
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-green{background:#DCFCE7;color:#047857}.b-sky{background:#E0F2FE;color:#0369A1}.b-amber{background:#FEF3C7;color:#B45309}
.b-rose{background:#FFE4E6;color:#BE123C}.b-violet{background:#EDE9FE;color:#6D28D9}.b-orange{background:#FFEDD5;color:#C2410C}
.b-grey{background:#F1F5F9;color:#475569}.b-teal{background:#CCFBF1;color:#0F766E}.b-pink{background:#FCE7F3;color:#BE185D}

/* forms */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-size:12px;font-weight:600;color:var(--ink-2)}
.field label em{color:var(--rose);font-style:normal}
.inp{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#fff;outline:0;font-size:13.5px}
.inp:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.inp[readonly]{background:var(--line-2);color:var(--ink-2)}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fgrid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fgrid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sec-title{font-weight:700;font-size:13.5px;margin:4px 0 12px;display:flex;align-items:center;gap:8px}
.sec-title i{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-style:normal;font-size:11px;color:#fff;background:var(--brand)}
.seg{display:inline-flex;background:var(--line-2);border-radius:10px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:6px 12px;border-radius:8px;font-weight:600;font-size:12.5px;cursor:pointer;color:var(--muted)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.check{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:13px}
.check input{accent-color:var(--brand);width:16px;height:16px}
.check span{margin-left:auto;color:var(--muted);font-size:12px}
.check.on{border-color:var(--brand);background:var(--brand-soft)}

/* misc components */
.list-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.list-row:last-child{border-bottom:0}
.list-row .t{font-weight:600;font-size:13px}.list-row .s{color:var(--muted);font-size:12px}
.list-row .r{margin-left:auto;text-align:right}
.ini{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.pill-flow{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.pill-flow .st{flex:1;min-width:120px;padding:12px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer}
.pill-flow .st b{display:block;font-family:var(--display);font-size:20px;font-weight:600}
.pill-flow .st small{color:var(--muted);font-size:12px}
.pill-flow .st .tp{font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px}
.pill-flow .st .tp::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.pill-flow .st.on{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.flowline{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px}
.flowline span{padding:4px 10px;border-radius:20px;background:#fff;border:1px solid var(--line);font-weight:600;color:var(--ink-2)}
.flowline span.on{background:var(--brand);border-color:var(--brand);color:#fff}
.flowline em{color:var(--muted);font-style:normal}
.banner{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;background:linear-gradient(100deg,#F5EEFF,#FFF1F6 45%,#FFF6E6);border:1px solid #EFE3FB;margin-bottom:18px}
.banner .spark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--violet),var(--pink));flex:none}
.banner p{margin:0;font-size:13.5px}
.banner b{font-weight:700}
.tile{padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;display:flex;gap:12px;align-items:flex-start;transition:border-color .15s,box-shadow .15s}
.tile:hover{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.tile .ti{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none}
.tile b{display:block;font-size:13.5px}.tile small{color:var(--muted);font-size:12px}
.side-list{display:flex;flex-direction:column;gap:2px}
.side-list a{padding:8px 11px;border-radius:9px;cursor:pointer;font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:8px;text-decoration:none}
.side-list a:hover{background:var(--line-2)}
.side-list a.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.side-list a span{margin-left:auto;font-size:11px;color:var(--muted)}
.side-cat{font-size:11.5px;font-weight:700;color:var(--muted);padding:12px 11px 4px}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:14px;border:1px solid var(--line);border-radius:12px;background:#FCFBF8;margin-bottom:14px}
.filters .field{min-width:140px;flex:1}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{border:1px solid var(--line);background:#fff;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;color:var(--ink-2)}
.chips button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.rem-col{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rem-col header{padding:12px 14px;display:flex;align-items:center;gap:8px;font-weight:700;border-bottom:1px solid var(--line);border-top:3px solid var(--c)}
.rem-col header span{margin-left:auto;background:var(--c);color:#fff;border-radius:10px;padding:0 8px;font-size:11.5px}
.rem-item{padding:12px 14px;border-bottom:1px solid var(--line-2);font-size:12.5px}
.rem-item:last-child{border-bottom:0}
.rem-item b{display:block;font-size:13px;margin-bottom:2px}
.rem-item .meta{color:var(--muted);display:flex;justify-content:space-between;gap:8px;margin-top:6px;align-items:center}
.empty{padding:30px;text-align:center;color:var(--muted)}

/* kanban */
.kanban{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:12px;overflow-x:auto}
.kcol{background:var(--line-2);border-radius:14px;padding:10px}
.kcol h4{margin:2px 4px 10px;font-size:13px;display:flex;align-items:center;gap:7px}
.kcol h4::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.kcol h4 span{margin-left:auto;color:var(--muted);font-weight:600;font-size:12px}
.kcard{background:#fff;border-radius:10px;padding:10px 11px;margin-bottom:8px;border:1px solid var(--line);font-size:12.5px;cursor:pointer}
.kcard b{display:block;font-size:13px}
.kcard .m{display:flex;justify-content:space-between;color:var(--muted);margin-top:6px;font-size:11.5px}

/* funnel */
.funnel{display:flex;flex-direction:column;gap:7px}
.funnel .fr{display:flex;align-items:center;gap:10px;font-size:12.5px}
.funnel .fr .bar{height:30px;border-radius:8px;display:flex;align-items:center;padding:0 10px;color:#fff;font-weight:700;min-width:44px}
.funnel .fr .lb{width:120px;color:var(--ink-2);font-weight:600}
.funnel .fr .pc{color:var(--muted);font-size:12px}

/* floor plan */
.floor{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:62px;gap:8px;padding:14px;background:repeating-linear-gradient(0deg,transparent 0 23px,#F3EFE4 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,#F3EFE4 23px 24px);border:1px solid var(--line);border-radius:14px}
.unit{border-radius:10px;padding:7px 9px;cursor:pointer;font-size:11.5px;display:flex;flex-direction:column;justify-content:space-between;border:1.5px solid var(--c);background:color-mix(in srgb,var(--c) 14%,#fff);transition:transform .12s}
.unit:hover{transform:scale(1.03);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.unit b{font-size:12px}
.unit small{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unit.core{background:#fff;border:1.5px dashed #DDD6C4;cursor:default;color:var(--muted);align-items:center;justify-content:center}
.unit.core:hover{transform:none;box-shadow:none}
.desks{display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start}
.desk{width:18px;height:18px;border-radius:5px;background:var(--c);opacity:.85}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px}
.legend span{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:600}
.legend span i{width:12px;height:12px;border-radius:4px;background:var(--c)}

/* 360 */
.hero360{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hero360 .big{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font-family:var(--display);font-size:22px;font-weight:700;color:#fff}
.hero360 h2{margin:0;font-family:var(--display);font-size:22px;letter-spacing:-.02em;font-weight:600}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;margin-top:18px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.strip div{padding:12px 14px;border-right:1px solid var(--line);background:#FCFBF8}
.strip div:last-child{border-right:0}
.strip small{color:var(--muted);font-size:11.5px;font-weight:600}
.strip b{display:block;font-family:var(--display);font-size:17px;font-weight:600;margin-top:3px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600;text-align:right}
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:10px;top:4px;bottom:4px;width:2px;background:var(--line)}
.tl{position:relative;padding:0 0 16px}
.tl::before{content:"";position:absolute;left:-21px;top:3px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--c)}
.tl b{font-size:13px}.tl p{margin:2px 0 0;color:var(--ink-2);font-size:12.5px}.tl small{color:var(--muted)}
.doc{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;gap:10px;align-items:center;background:#fff}
.doc .fi{width:36px;height:42px;border-radius:6px;display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff}
.bar-mini{height:8px;background:var(--line-2);border-radius:6px;overflow:hidden}
.bar-mini i{display:block;height:100%;border-radius:6px;background:var(--c,var(--brand))}

/* billing */
.summary{position:sticky;top:0}
.sum-row{display:flex;justify-content:space-between;padding:7px 0;font-size:13px;border-bottom:1px dashed var(--line)}
.sum-row b{font-variant-numeric:tabular-nums}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding:14px;border-radius:12px;background:var(--brand-soft)}
.sum-total b{font-family:var(--display);font-size:22px;color:var(--brand-ink)}
.note{padding:10px 12px;border-radius:10px;font-size:12.5px;display:flex;gap:8px;align-items:flex-start}
.note.warn{background:#FFF7E6;color:#92400E;border:1px solid #FDE7B0}
.note.ok{background:#ECFDF5;color:#065F46;border:1px solid #BBF0D6}
.note.info{background:#EFF8FF;color:#075985;border:1px solid #CDEAFB}

/* overlays */
.overlay{position:fixed;inset:0;background:rgba(60,50,20,.28);backdrop-filter:blur(3px);display:none;z-index:80;align-items:flex-start;justify-content:center;padding:6vh 16px}
.overlay.show{display:flex}
.modal{background:#fff;border-radius:18px;width:min(720px,100%);max-height:88vh;overflow:auto;box-shadow:0 30px 80px rgba(60,50,20,.25);animation:pop .18s ease-out}
.modal header{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.modal header h3{margin:0;font-size:16px}
.modal header .x{margin-left:auto}
.modal .body{padding:20px}
.modal footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line);background:#FCFBF8}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:#fff;z-index:90;box-shadow:-20px 0 60px rgba(60,50,20,.18);transform:translateX(105%);transition:transform .25s ease;overflow-y:auto;padding-top:env(safe-area-inset-top,0px)}
.drawer.show{transform:none}
.drawer header{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff}
.drawer .body{padding:18px}
.toasts{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;z-index:120}
.toast{background:#fff;border:1px solid var(--line);border-inline-start:4px solid var(--emerald);border-radius:12px;padding:11px 14px;box-shadow:var(--shadow);font-size:13px;display:flex;gap:9px;align-items:center;animation:pop .2s}
.dropdown{position:absolute;top:56px;right:120px;width:360px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px rgba(60,50,20,.18);display:none;z-index:60}
.dropdown.show{display:block}
.dropdown header{padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700;display:flex}
.dropdown .it{display:flex;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line-2);font-size:12.5px;cursor:pointer}
.dropdown .it:hover{background:var(--line-2)}
.cmdk .res{padding:8px}
.cmdk .res a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;cursor:pointer;text-decoration:none}
.cmdk .res a:hover,.cmdk .res a.act{background:var(--brand-soft)}
.cmdk .res small{margin-left:auto;color:var(--muted)}

/* impacts */
.impact{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;opacity:.35;transition:opacity .25s,background .25s}
.impact.done{opacity:1;background:#F6FEF9}
.impact .ck{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:none;color:#fff}
.impact.done .ck{background:var(--emerald);border-color:var(--emerald)}
.impact b{font-size:13px;display:block}.impact small{color:var(--muted);font-size:12px}
.impact .mod{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted)}

/* AI */
.ai-wrap{display:grid;grid-template-columns:1fr 320px;gap:16px;height:calc(100vh - 230px);min-height:520px}
.chat{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.msgs{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg,#FFFDF8,#fff)}
.msg{max-width:88%;padding:12px 14px;border-radius:14px;font-size:13.5px}
.msg.me{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;max-width:96%}
.msg.bot .who{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--violet);margin-bottom:6px}
.composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.composer input{flex:1}
.sugg{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 12px}
.sugg button{border:1px solid #E9DDFB;background:#F8F4FF;color:#6D28D9;border-radius:20px;padding:5px 11px;font-size:12px;cursor:pointer;font-weight:600}
.agent{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.agent:last-child{border-bottom:0}
.switch{position:relative;width:36px;height:20px;margin-left:auto;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:#DDD8CB;border-radius:20px;cursor:pointer;transition:.2s}
.switch span::before{content:"";position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+span{background:var(--emerald)}
.switch input:checked+span::before{transform:translateX(16px)}
.typing{display:flex;gap:4px}.typing i{width:6px;height:6px;border-radius:50%;background:var(--violet);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}

.appr{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:10px;transition:opacity .3s,transform .3s}
.appr.gone{opacity:0;transform:translateX(30px)}
.levels{display:flex;gap:4px;margin-top:6px}
.levels i{width:26px;height:5px;border-radius:3px;background:var(--line)}
.levels i.ok{background:var(--emerald)}.levels i.cur{background:var(--amber)}

.mt{margin-top:16px}.mb{margin-bottom:16px}.muted{color:var(--muted)}.right{text-align:right}.flex{display:flex;align-items:center;gap:8px}.wrap{flex-wrap:wrap}.grow{flex:1}.fw{font-weight:700}

/* responsive */
@media (max-width:1280px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.strip{grid-template-columns:repeat(4,minmax(0,1fr))}.strip div:nth-child(4){border-right:0}.palette,.sel.centre{display:none}}
@media (max-width:1024px){.g3,.g21,.g12{grid-template-columns:1fr}.fgrid,.fgrid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-wrap{grid-template-columns:1fr;height:auto}.chat{height:70vh}.user div{display:none}}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;top:64px;left:0;bottom:0;width:270px;z-index:50;transform:translateX(-102%);transition:transform .25s;box-shadow:20px 0 50px rgba(60,50,20,.15)}
  .sidebar.show{transform:none}
  .burger{display:grid}.logo{min-width:0}.logo small,.sel,.search span,.search kbd,.ai-btn span{display:none}.search{flex:0 0 auto}
  .main{padding:16px 14px 60px}.g2,.g4{grid-template-columns:1fr}.fgrid,.fgrid.c4,.fgrid.c2{grid-template-columns:1fr}.strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dropdown{right:10px;width:calc(100% - 20px)}
}

/* property map */
.props{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.pcard{padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;border-top:3px solid var(--c)}
.pcard.on{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent);border-color:var(--c)}
.pcard b{display:block;font-size:13.5px}.pcard small{color:var(--muted);font-size:12px}
.stack{display:grid;grid-template-columns:64px repeat(var(--cols,6),minmax(0,1fr));gap:6px}
.stack .fl{font-size:12px;color:var(--muted);display:flex;align-items:center;font-weight:600}
.cell{border-radius:9px;padding:6px 8px;font-size:11px;border:1.5px solid var(--c);background:color-mix(in srgb,var(--c) 14%,#fff);cursor:pointer;min-height:54px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .12s;min-width:0}
.cell:hover{transform:scale(1.04);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.cell b{font-size:11.5px}.cell small{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.villas{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.villas .cell{min-height:70px}
/* booking calendar */
.cal{display:grid;grid-template-columns:170px repeat(21,minmax(38px,1fr));border:1px solid var(--line);border-radius:12px;overflow-x:auto;background:#fff}
.calh{font-size:11px;text-align:center;padding:7px 0;color:var(--muted);border-bottom:1px solid var(--line);background:#FCFBF8;font-weight:600;line-height:1.25}
.calh.we,.calc.we{background:#FFF9EC}
.calh.td{color:#fff;background:var(--brand)}
.calu{padding:8px 10px;font-size:12px;border-bottom:1px solid var(--line-2);border-inline-end:1px solid var(--line);position:sticky;inset-inline-start:0;background:#fff;z-index:2}
.calu b{display:block;font-size:12.5px}.calu small{color:var(--muted)}
.calc{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);min-height:48px}
.bk{margin:7px 2px;border-radius:8px;padding:5px 8px;font-size:11.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;z-index:1;align-self:center}
.basis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.basis button{border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:10px 8px;cursor:pointer;text-align:left}
.basis button b{display:block;font-size:13px}.basis button small{color:var(--muted);font-size:11.5px}
.basis button.on{border-color:var(--brand);background:var(--brand-soft)}
.basis button.on b{color:var(--brand-ink)}
@media (max-width:1280px){.props{grid-template-columns:repeat(2,minmax(0,1fr))}.basis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.props{grid-template-columns:1fr}.basis{grid-template-columns:repeat(2,minmax(0,1fr))}}

.langsw button{padding:5px 10px;font-size:12px}
.langsw button[data-l="ar"]{font-family:'IBM Plex Sans Arabic',var(--font)}
.cal.mr{grid-template-columns:190px repeat(12,minmax(58px,1fr))}
/* ---------- cost centres ---------- */
.ccbox{border:1.5px dashed color-mix(in srgb,var(--brand) 45%,transparent);background:linear-gradient(180deg,var(--brand-soft),#fff 70%);border-radius:14px;padding:14px}
.cc-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;font-size:13px;color:var(--brand-ink)}
.cc-head .muted{font-size:12px;font-weight:400}
.cc-tag{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:6px;background:#DCFCE7;color:#047857;margin-inline-start:4px;vertical-align:middle}
.cc-tag.man{background:#FEF3C7;color:#B45309}
.inp.sm{padding:5px 8px;font-size:12.5px;border-radius:8px}
select.inp.sm{min-width:90px}
.cc-man{border-color:var(--amber)!important;background:#FFFBEB}
.ccbar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:16px;box-shadow:var(--shadow)}
.ccbar .field{min-width:150px;flex:1}
.ccbar .field label{font-size:11px;color:var(--muted)}
.cc-title{display:flex;align-items:center;gap:6px;color:var(--brand-ink);align-self:center;padding-inline-end:6px}
.tbl th.cch{background:var(--brand-soft);color:var(--brand-ink)}
.tbl td.cc{color:var(--ink-2);font-size:12.5px;background:#FFFDF6}
.ccchips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ccchips span{padding:10px 12px;border-radius:12px;background:var(--brand-soft);display:flex;flex-direction:column}
.ccchips small{font-size:11px;color:var(--brand-ink);font-weight:700}
.ccchips b{font-size:13px;margin-top:2px}
@media (max-width:860px){.ccchips{grid-template-columns:1fr 1fr}}
/* ---------- Arabic / RTL ---------- */
html[lang="ar"] body,html[lang="ar"] button,html[lang="ar"] input,html[lang="ar"] select,html[lang="ar"] textarea{font-family:'IBM Plex Sans Arabic','DM Sans',system-ui,sans-serif}
html[lang="ar"]{--display:'IBM Plex Sans Arabic','Sora',system-ui,sans-serif}
html[lang="ar"] .page-head h1,html[lang="ar"] .hero360 h2{letter-spacing:0}
[dir="rtl"] .kpi::after{left:auto;right:0}
[dir="rtl"] .kpi canvas{right:auto;left:10px}
[dir="rtl"] .tb-right,[dir="rtl"] .search kbd,[dir="rtl"] .sb-item .cnt,[dir="rtl"] .modal header .x,[dir="rtl"] .list-row .r,[dir="rtl"] .check span,[dir="rtl"] .rem-col header span,[dir="rtl"] .kcol h4 span,[dir="rtl"] .impact .mod,[dir="rtl"] .switch,[dir="rtl"] .side-list a span{margin-left:0;margin-right:auto}
[dir="rtl"] .list-row .r{text-align:left}
[dir="rtl"] [style*="margin-left:auto"]{margin-left:0!important;margin-right:auto!important}
[dir="rtl"] .tbl th{text-align:right}
[dir="rtl"] .tbl .num{text-align:left}
[dir="rtl"] .right{text-align:left}
[dir="rtl"] .kv dd{text-align:left}
[dir="rtl"] .drawer{right:auto;left:0;transform:translateX(-105%)}
[dir="rtl"] .drawer.show{transform:none}
[dir="rtl"] .toasts{right:auto;left:18px}
[dir="rtl"] .dropdown{right:auto;left:120px}
[dir="rtl"] .timeline{padding-left:0;padding-right:26px}
[dir="rtl"] .timeline::before{left:auto;right:10px}
[dir="rtl"] .tl::before{left:auto;right:-21px}
[dir="rtl"] .pill-flow .st.on{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
@media (max-width:860px){[dir="rtl"] .sidebar{left:auto;right:0;transform:translateX(102%)}[dir="rtl"] .sidebar.show{transform:none}[dir="rtl"] .dropdown{left:10px}}

/* ================= application additions (server-rendered pages) ================= */
a.search,a.ai-btn,a.btn,a.tile,a.kpi,.chips a{text-decoration:none}
.sel{margin:0}.palette{margin:0}.langsw{margin:0}
.chips a{border:1px solid var(--line);background:#fff;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;color:var(--ink-2)}
.chips a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ferr{color:var(--rose);font-size:11.5px;font-weight:600}
.pager{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-top:12px;font-size:12.5px}
.lookup{position:relative}
.lookup-res{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(60,50,20,.14);z-index:40;max-height:260px;overflow:auto}
.lookup-res a{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;text-decoration:none;font-size:13px;color:var(--ink)}
.lookup-res a:hover{background:var(--brand-soft)}.lookup-res small{color:var(--muted)}
.dropdown .it button{color:inherit}
.dropdown#userDrop .it{align-items:center}
body.bare{display:block;height:auto;min-height:100%}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(1200px 500px at 10% -10%,var(--brand-soft),transparent),var(--bg)}
.login{width:min(420px,100%);padding:28px}
.appr form{margin:0}
.cell{text-decoration:none;color:inherit}
@media print{.topbar,.sidebar,.tabs,.actions,.ccbar,.chips,.toasts,.pager{display:none!important}.app{display:block}.main{overflow:visible;padding:0}.card{box-shadow:none;break-inside:avoid}}
[hidden]{display:none!important}