/* Design tokens – DESIGN.md §3–4. No hex colors outside this block.
   Proposed update (design-proposal.md §2.1). Lines marked NEW or CHANGED differ from the current app.css. */
:root{
  --radius:6px;

  --background:#ECEFF4;          /* CHANGED from #F1F3F6 – a white card stands out from the work area */
  --foreground:#111827;
  --card:#FFFFFF;
  --primary:#1F3A5F;
  --primary-foreground:#FFFFFF;
  --secondary:#EAF1F9;
  --secondary-foreground:#1F3A5F;
  --muted:#F9FAFB;
  --muted-foreground:#4B5563;
  --border:#DCE1E8;              /* CHANGED from #E5E7EB – outer frame of cards and tables */
  --border-soft:#E9EDF2;         /* NEW – lines between rows inside a table */
  --input:#C9D0DA;               /* CHANGED from #D1D5DB */
  --ring:#2E5283;
  --destructive:#B91C1C;
  --destructive-foreground:#FFFFFF;
  --tertiary-foreground:#374151;
  --row-hover:#F3F6FA;

  --action:#B4561C;
  --action-foreground:#FFFFFF;

  /* Logo colors (NEW) */
  --brand:#2F5585;               /* logo navy – link hover, progress fill */
  --brand-sky:#5189C4;           /* logo light blue – second chart series */
  --brand-orange:#DD8A2F;        /* logo orange – lines and markers only (active tab, active side item). Never a background for white text */

  /* Booking / quote forms: translucent zones (NEW). Inputs stay solid --card */
  --tint-form:rgba(47,85,133,.05);
  --tint-form-head:rgba(47,85,133,.11);
  --tint-form-line:rgba(47,85,133,.20);
  --tint-money:rgba(221,138,47,.10);
  --tint-money-line:rgba(221,138,47,.40);

  --sidebar:#1F3A5F;
  --sidebar-foreground:#CBD5E1;
  --sidebar-primary:#2E5283;
  --sidebar-primary-foreground:#FFFFFF;

  --chart-1:#2E5283;
  --chart-2:#DE952F;
  --chart-3:#A3BFE2;             /* CHANGED from #4E86C0 – the second series is --brand-sky; a light third one keeps them apart */
  --chart-track:#E4E8EE;         /* CHANGED from #EEF0F3 */
  --badge-on-dark:#E8A25A;
  --on-badge:#1B2A3D;

  /* Status badges (§4) */
  --st-new-bg:#E5E7EB;      --st-new-fg:#374151;      --st-new-line:#9CA3AF;
  --st-quote-bg:#E3ECF7;    --st-quote-fg:#1F3A5F;    --st-quote-bar:#C9D9EE;
  --st-deposit-bg:#FCE9DA;  --st-deposit-fg:#8A3E12;
  --st-deposit-bar:#F6D3AE; --st-deposit-bar-fg:#5A2A0A; --st-deposit-bar-line:#E8B888; /* NEW – "deposit paid" bar on the room board */
  --st-paid-bg:#D1FAE5;     --st-paid-fg:#065F46;
  --st-cancel-bg:#FEE2E2;   --st-cancel-fg:#991B1B;
  --destructive-line:#FECACA;

  /* Availability: one blue scale – unchanged */
  --avail-free:#F4F8FC;     --avail-free-fg:#1F3A5F;  --avail-free-line:#C9D9EE;
  --avail-mid:#C9D9EE;      --avail-mid-fg:#1F3A5F;
  --avail-part:#7FA3D1;     --avail-part-fg:#0F213A;
  --avail-busy:#1F3A5F;     --avail-busy-fg:#FFFFFF;

  /* WhatsApp chat area only (DESIGN §3.4, exception): the colors agents know from WhatsApp Web */
  --wa-bg:#EFEAE2;          --wa-bubble-in:#FFFFFF;   --wa-bubble-out:#D9FDD3;
  --wa-meta:#667781;        --wa-tick-read:#53BDEB;   --wa-day:#FFFFFF;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{font-family:'Heebo',system-ui,sans-serif;background:var(--background);color:var(--foreground);font-size:13px;line-height:1.5}
body:not(.is-admin) .admin-only{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700}
.num,.ltr{direction:ltr;unicode-bidi:isolate}
:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.ic{flex:none;vertical-align:middle}
.ic.flip{transform:scaleX(-1)}

/* ---------- Auth ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:16px;background:var(--primary)}
.auth-box{background:var(--card);border-radius:var(--radius);padding:26px 24px;width:100%;max-width:380px;border:1px solid var(--border)}
.auth-box h1{font-size:20px}
.auth-box p{color:var(--muted-foreground);margin:6px 0 0}
.auth-box form{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.auth-box label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted-foreground);font-weight:500}
.auth-box input{border:1px solid var(--input);border-radius:var(--radius);padding:8px 10px;font-size:13px}
.auth-err{color:var(--destructive);font-weight:500;min-height:1.2em}

/* ---------- App shell (§6) ---------- */
.shell{display:flex;min-height:100vh}
.side{width:76px;flex:none;background:var(--sidebar);display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:none;z-index:30}
.side::-webkit-scrollbar{display:none}
.side-logo{width:44px;height:44px;border-radius:8px;background:var(--card);margin-bottom:8px;flex:none;padding:4px}
.side-logo img{display:block;width:100%;height:100%;object-fit:contain}
.side-logo img:not([src^="data:"]){visibility:hidden} /* until the emblem is cut out of the logo */
.auth-logo{display:block;width:210px;max-width:70%;margin:0 auto 6px}
.auth-brand{text-align:center;font-size:26px;font-weight:800;color:var(--primary);margin-block-end:14px}
/* Sign-in steps and "my account" (account.js) */
#authStep{margin-top:18px}
#authStep>form,#authStep>.enroll,.enroll{display:flex;flex-direction:column;gap:12px}
.auth-box label.auth-check,label.auth-check{flex-direction:row;align-items:center;gap:6px;color:var(--foreground);font-weight:400}
.auth-methods{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.btn.auth-method{justify-content:flex-start;text-align:start;height:auto;padding:10px 12px;gap:10px;white-space:normal}
.btn.auth-method>span{display:flex;flex-direction:column;gap:2px}
.enroll-steps{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:4px}
.enroll-qr{align-self:center;width:180px;padding:8px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.enroll-qr svg{display:block;width:100%;height:auto}
.enroll-key{letter-spacing:.06em;white-space:nowrap}
.rc-list{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 18px;margin:0;padding:10px 14px;padding-inline-start:34px;background:var(--muted);border-radius:var(--radius);font-family:ui-monospace,Consolas,monospace;font-size:14px}
.acct{display:flex;flex-direction:column;gap:18px}
.acct section{border-top:1px solid var(--border);padding-top:12px}
.acct section:first-child{border-top:0;padding-top:0}
.side .grow{flex:1;min-height:8px}
.tab{width:56px;flex:none;border:0;background:none;color:var(--sidebar-foreground);border-radius:8px;padding:7px 2px 5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;line-height:1.2;text-align:center;position:relative}
.tab:hover{background:var(--sidebar-primary);color:var(--sidebar-primary-foreground)}
.tab.active{background:var(--sidebar-primary);color:var(--sidebar-primary-foreground);font-weight:500}
.tab .count-dot{position:absolute;top:2px;inset-inline-end:6px;min-width:16px;height:16px;border-radius:8px;background:var(--badge-on-dark);color:var(--on-badge);font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.side-user{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:8px;color:var(--sidebar-foreground);font-size:11px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--sidebar-primary);color:var(--sidebar-primary-foreground);display:grid;place-items:center;font-weight:700;font-size:12px;position:relative}
.live{position:absolute;bottom:0;inset-inline-end:0;width:9px;height:9px;border-radius:50%;background:var(--st-new-line);border:2px solid var(--sidebar)}
.live.on{background:var(--badge-on-dark)}
.icon-btn{border:0;background:none;color:var(--sidebar-foreground);cursor:pointer;padding:4px;border-radius:6px;display:grid;place-items:center}
.icon-btn:hover{background:var(--sidebar-primary);color:var(--sidebar-primary-foreground)}

.workspace{flex:1;min-width:0;display:flex;flex-direction:column}
.page-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 20px 0}
.page-head h1{font-size:20px;font-weight:700}
.page-ctx{color:var(--muted-foreground);font-size:13px}
.page-head .grow{flex:1}
.seg{display:inline-flex;border:1px solid var(--primary);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.seg button{border:0;background:none;color:var(--primary);padding:5px 12px;cursor:pointer;font-size:13px;white-space:nowrap}
.seg button+button{border-inline-start:1px solid var(--primary)}
.seg button.on{background:var(--primary);color:var(--primary-foreground);font-weight:500}
main{padding:14px 20px 32px;width:100%;max-width:1600px}
.panel{display:none}
.panel.active{display:block}

/* ---------- Buttons (§7) ---------- */
.btn{border:1px solid var(--input);background:var(--card);color:var(--tertiary-foreground);padding:6px 12px;border-radius:var(--radius);cursor:pointer;font-weight:500;font-size:13px;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:6px;line-height:1.4}
.btn:hover{background:var(--muted)}
.btn.outline{border-color:var(--primary);color:var(--primary)}
.btn.outline:hover{background:var(--secondary)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
.btn.primary:hover{background:var(--ring);border-color:var(--ring)}
.btn.action{background:var(--action);border-color:var(--action);color:var(--action-foreground)}
.btn.action:hover{filter:brightness(.94)}
.btn.danger{color:var(--destructive);border-color:var(--st-cancel-bg)}
.btn.danger:hover{background:var(--st-cancel-bg)}
.btn.sm{padding:3px 9px;font-size:12px}
.btn:disabled{opacity:.55;cursor:default}
.link{background:none;border:0;color:var(--primary);cursor:pointer;padding:0;font-weight:500}
.link:hover{text-decoration:underline}

/* ---------- Cards, layout ---------- */
.card{background:var(--card);border-radius:var(--radius);padding:14px 16px;border:1px solid var(--border);min-width:0}
.card h3{font-size:14px;margin-bottom:10px}
.card h3 small{font-weight:400;color:var(--muted-foreground);font-size:12px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.span-all{grid-column:1/-1}
.chart-box{position:relative;height:270px}
.empty{color:var(--muted-foreground);padding:20px;text-align:center}
.hint{color:var(--muted-foreground);font-size:12px;margin:0 0 10px}
.no-period{max-width:620px;margin:40px auto;text-align:center}
.no-period h2{font-size:18px;margin-bottom:8px}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.toolbar .grow{flex:1}
.toolbar label{display:flex;align-items:center;gap:6px;color:var(--muted-foreground);font-size:13px}
.field,select.field,input.field{border:1px solid var(--input);border-radius:var(--radius);padding:5px 9px;background:var(--card);min-width:0;font-size:13px}
.count{color:var(--muted-foreground);font-size:12px}
.balance{color:var(--action);font-weight:700}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:12px}
.kpi{background:var(--card);border-radius:var(--radius);padding:12px 14px;border:1px solid var(--border);border-top:3px solid var(--primary)}
.kpi.money{border-top-color:var(--action)}
.kpi .k-label{color:var(--muted-foreground);font-size:12px}
.kpi .k-val{font-size:22px;font-weight:700;line-height:1.25;margin-top:2px}
.kpi.money .k-val{color:var(--action)}
.kpi .k-sub{color:var(--muted-foreground);font-size:11px}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;background:var(--card)}
th,td{padding:0 10px;height:39px;text-align:start;border-bottom:1px solid var(--border);white-space:nowrap;vertical-align:middle}
th{height:32px;background:var(--muted);color:var(--muted-foreground);font-weight:500;font-size:12px;position:sticky;top:0}
tbody tr:hover{background:var(--row-hover)}
tr.clickable{cursor:pointer}
tr.selected,tr.selected:hover{background:var(--secondary)}
/* the orange bar on the start edge (DESIGN §7); on the cell, since table rows don't reliably draw shadows */
tr.selected>td:first-child{box-shadow:inset -3px 0 0 var(--action)}
td .sub,.sub{color:var(--muted-foreground);font-size:12px}
tfoot td{font-weight:700;background:var(--muted)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:6px;vertical-align:middle}

/* ---------- Status badge (§4) ---------- */
.chip{display:inline-block;padding:1px 8px;border-radius:4px;font-size:11px;font-weight:500;vertical-align:middle;white-space:nowrap;background:var(--st-new-bg);color:var(--st-new-fg)}
.chip.mute{background:var(--st-new-bg);color:var(--st-new-fg)}
.chip.out,.chip.in{background:var(--st-quote-bg);color:var(--st-quote-fg)}
.chip.warn{background:var(--st-deposit-bg);color:var(--st-deposit-fg)}
.chip.ok{background:var(--st-paid-bg);color:var(--st-paid-fg)}
.chip.bad{background:var(--st-cancel-bg);color:var(--st-cancel-fg)}
.tag{display:inline-block;padding:1px 8px;border-radius:4px;font-size:11px;font-weight:500;background:var(--st-deposit-bg);color:var(--st-deposit-fg);margin-inline-start:4px;vertical-align:middle}
.fac{display:inline-block;font-size:11px;padding:0 6px;border-radius:4px;background:var(--secondary);color:var(--secondary-foreground);margin:1px 0;margin-inline-end:3px;white-space:nowrap}
.fac.hit{background:var(--st-paid-bg);color:var(--st-paid-fg);font-weight:500}
.row-actions{display:flex;gap:6px;align-items:center}

/* ---------- Progress ---------- */
.loadbar,.meter{height:6px;background:var(--chart-track);border-radius:3px;overflow:hidden}
.loadbar{width:90px;display:inline-block;vertical-align:middle;margin-inline-start:6px}
.meter{margin:8px 0 4px}
.loadbar i,.meter i{display:block;height:100%;background:var(--chart-1)}
.loadbar.hi i,.meter.hi i{background:var(--chart-2)}
.loadbar.full i,.meter.full i{background:var(--destructive)}
.past td{color:var(--st-new-line)}

/* ---------- Room assignment (Gantt) ---------- */
.assign-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:12px;align-items:start}
.pending{position:sticky;top:14px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;border-inline-start:3px solid var(--action)}
.pending-list{overflow-y:auto;display:flex;flex-direction:column;gap:6px;min-height:80px;padding:4px;border-radius:var(--radius)}
.pending-list.drop-ok{background:var(--st-deposit-bg)}
.p-item{border:1px dashed var(--input);border-radius:var(--radius);padding:7px 9px;cursor:grab;background:var(--card);user-select:none}
.p-item:hover{border-color:var(--primary)}
.p-item b{font-size:13px}
.p-item .sub{display:block}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted-foreground)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block;border:1px solid transparent}
.gantt-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
.gantt{min-width:820px}
.g-row{display:grid;position:relative;border-bottom:1px solid var(--border);min-height:38px}
.g-row:last-child{border-bottom:0}
.g-head{background:var(--muted);position:sticky;top:0;z-index:4}
.g-label{grid-row:1;grid-column:1;padding:4px 10px;background:var(--card);position:sticky;inset-inline-start:0;z-index:3;border-inline-end:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;line-height:1.2}
.g-head .g-label{background:var(--muted);color:var(--muted-foreground);font-size:12px}
.g-label small{color:var(--muted-foreground);font-size:11px}
.g-cell{grid-row:1;border-inline-end:1px solid var(--border)}
.g-cell.we{background:var(--secondary)}
.g-cell.today{background:var(--st-quote-bg)}
.g-cell.outp,.g-day.outp{background:repeating-linear-gradient(45deg,var(--muted),var(--muted) 4px,var(--chart-track) 4px,var(--chart-track) 8px)}
.g-cell.week{border-inline-start:2px solid var(--primary)}
.g-day{grid-row:1;text-align:center;font-size:11px;color:var(--muted-foreground);padding:4px 0;line-height:1.25;border-inline-end:1px solid var(--border)}
.g-day b{display:block;color:var(--foreground);font-size:12px}
.g-day.we{background:var(--secondary)}
.g-day.today{background:var(--primary);color:var(--primary-foreground)}
.g-day.today b{color:var(--primary-foreground)}
.g-row.drop-ok{background:var(--st-paid-bg);outline:2px solid var(--st-paid-fg);outline-offset:-2px}
.g-row.drop-bad{background:var(--st-cancel-bg);outline:2px solid var(--destructive);outline-offset:-2px}
/* Booking bars take the payment status colors of §4 */
.bar{grid-row:1;margin:5px 2px;border-radius:4px;font-size:11px;padding:0 7px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;cursor:grab;z-index:2;min-width:0;border:1px solid transparent}
.bar.s-new{background:var(--st-new-bg);color:var(--st-new-fg);border-color:var(--st-new-line)}
.bar.s-deposit{background:var(--chart-2);color:var(--on-badge)}
.bar.s-paid{background:var(--primary);color:var(--primary-foreground)}
.bar:hover{filter:brightness(1.06)}
.bar.cut-s{border-start-start-radius:0;border-end-start-radius:0}
.bar.cut-e{border-start-end-radius:0;border-end-end-radius:0}
.bar.dragging,.p-item.dragging{opacity:.45}
.bar span{overflow:hidden;text-overflow:ellipsis}
.lg-new{background:var(--st-new-bg);border-color:var(--st-new-line)!important}
.lg-deposit{background:var(--chart-2)}
.lg-paid{background:var(--primary)}

/* ---------- Availability ---------- */
.avail-cell{text-align:center;font-weight:700}
.av-none{background:var(--avail-busy);color:var(--avail-busy-fg)}
.av-low{background:var(--avail-part);color:var(--avail-part-fg)}
.av-mid{background:var(--avail-mid);color:var(--avail-mid-fg)}
.av-ok{background:var(--avail-free);color:var(--avail-free-fg)}
.avail-cell .sub,.rtile small{color:inherit;opacity:.85} /* the total keeps the cell's own contrast */
.room-map{display:flex;flex-direction:column;gap:12px}
.floor h4{font-size:12px;color:var(--muted-foreground);font-weight:500;margin-bottom:6px}
.floor-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px}
.rtile{border-radius:var(--radius);padding:7px 9px;border:1px solid;line-height:1.25}
.rtile b{font-size:15px;display:block}
.rtile small{font-size:11px;display:block}
.rtile.free{background:var(--avail-free);border-color:var(--avail-free-line);color:var(--avail-free-fg)}
.rtile.part{background:var(--avail-part);border-color:var(--avail-part);color:var(--avail-part-fg)}
.rtile.busy{background:var(--avail-busy);border-color:var(--avail-busy);color:var(--avail-busy-fg)}
.lg-avfree{background:var(--avail-free);border-color:var(--avail-free-line)!important}
.lg-avpart{background:var(--avail-part)}
.lg-avbusy{background:var(--avail-busy)}
.card.danger-zone{border-color:var(--destructive-line)}

/* ---------- Dashboard ---------- */
.moves{max-height:520px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.mv-day{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.mv-head{background:var(--primary);color:var(--primary-foreground);padding:6px 12px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.mv-head .mv-sum{margin-inline-start:auto;font-size:12px;opacity:.85}
.mv-cols{display:grid;grid-template-columns:1fr 1fr}
.mv-cols>div{padding:8px 12px}
.mv-cols>div+div{border-inline-start:1px solid var(--border)}
.mv-cols h4{font-size:12px;color:var(--muted-foreground);font-weight:500;margin-bottom:4px}
.mv-cols ul{list-style:none;margin:0;padding:0}
.mv-cols li{padding:2px 0;display:flex;gap:6px;align-items:center}
.mv-cols li .sub{margin-inline-start:auto}

/* ---------- Reports ---------- */
.insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:12px}
.insight{background:var(--card);border-radius:var(--radius);padding:12px 14px;border:1px solid var(--border);display:flex;gap:10px;align-items:flex-start}
.insight .ic{color:var(--primary);margin-top:1px}
.insight.alert .ic{color:var(--action)}
.insight p{margin:0}
.heat{display:flex;flex-wrap:wrap;gap:22px}
.heat-month{min-width:230px}
.hm-title{font-weight:700;margin-bottom:6px}
.hm-grid{display:grid;grid-template-columns:repeat(7,32px);gap:3px}
.hm-grid .wd{font-size:11px;color:var(--muted-foreground);text-align:center}
.hm-grid .d{height:30px;border-radius:4px;display:grid;place-items:center;font-size:11px;background:var(--muted);color:var(--st-new-line)}
.heat-scale{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted-foreground);margin-bottom:10px}
.heat-scale i{width:22px;height:12px;border-radius:3px;display:inline-block}

/* ---------- CRM ---------- */
.crm-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px;align-items:start}
.tasks-side{position:sticky;top:14px;max-height:calc(100vh - 40px);overflow-y:auto}
.task{display:flex;gap:8px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--border)}
.task:last-child{border-bottom:0}
.task input[type=checkbox]{margin-top:3px;width:15px;height:15px;cursor:pointer;flex:none}
.task .t-main{flex:1;min-width:0}
.task .t-title{display:block}
.task.done .t-title{text-decoration:line-through;color:var(--muted-foreground)}
.due{font-size:12px;color:var(--muted-foreground)}
.due.over{color:var(--destructive);font-weight:700}
.due.today{color:var(--action);font-weight:700}
.x-btn{border:0;background:none;color:var(--st-new-line);cursor:pointer;font-size:16px;line-height:1;padding:2px 4px}
.x-btn:hover{color:var(--destructive)}
.cc-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start;background:var(--primary);color:var(--primary-foreground);margin:-20px -22px 0;padding:18px 22px 14px;padding-inline-end:52px;border-radius:var(--radius) var(--radius) 0 0}
.cc-head h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:20px}
.cc-head .sub{color:var(--sidebar-foreground)}
.cc-head .balance{color:var(--badge-on-dark)}
.cc-actions{display:flex;gap:6px;flex-wrap:wrap}
.cc-head .btn{background:transparent;border-color:var(--sidebar-foreground);color:var(--primary-foreground)}
.cc-head .btn:hover{background:var(--sidebar-primary)}
.cc-head .btn.action{background:var(--action);border-color:var(--action)}
.cc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:14px}
.cc-sec{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:12px}
.cc-sec h3{font-size:14px;margin-bottom:8px}
.cc-bk{display:flex;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);cursor:pointer;flex-wrap:wrap}
.cc-bk:last-child{border-bottom:0}
.cc-bk:hover{background:var(--row-hover)}
.timeline{display:flex;flex-direction:column;gap:8px;max-height:560px;overflow-y:auto;margin-top:6px}
.tl-item{display:flex;gap:10px;padding:8px 10px;border-radius:var(--radius);background:var(--muted);border:1px solid var(--border)}
.tl-item .ic{color:var(--primary);margin-top:2px}
.tl-item .tl-meta{font-size:12px;color:var(--muted-foreground)}
.tl-item .tl-body{white-space:pre-wrap;font-size:14px;line-height:1.7;word-break:break-word}
.tl-item.system{background:transparent;border-style:dashed;padding:5px 10px}
.tl-item.system .ic{color:var(--muted-foreground)}
.tl-item.system .tl-body{font-size:12px;color:var(--muted-foreground);line-height:1.5}
.composer{background:var(--secondary);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-top:12px}
.composer h3{font-size:14px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.mini-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
.mini-form :is(input,select,textarea){border:1px solid var(--input);border-radius:var(--radius);padding:5px 8px;background:var(--card);min-width:0;font-size:13px}
.mini-form textarea{flex-basis:100%;resize:vertical;font-size:14px;line-height:1.7}
.mini-form input[name=title]{flex:1 1 200px}
.checks{display:flex;gap:12px;align-items:center;padding-top:6px;color:var(--foreground);flex-wrap:wrap}
.checks label,.form-grid label.checks{flex-direction:row!important;align-items:center;gap:5px!important;color:var(--foreground)!important;font-weight:400!important}

/* ---------- Booking form ---------- */
.sec-title{grid-column:1/-1;font-weight:700;font-size:14px;color:var(--primary);border-bottom:1px solid var(--border);padding-bottom:4px;margin-top:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sec-title .sub{font-weight:400}
.tr-list{grid-column:1/-1}
.tr-row{display:grid;grid-template-columns:105px 145px minmax(80px,1fr) 95px 70px 30px;gap:6px;align-items:center;margin-bottom:6px}
.tr-row.ap{grid-template-columns:100px 140px minmax(80px,1fr) 70px}
.tr-card{border-bottom:1px solid var(--border-soft);padding-block-end:6px;margin-bottom:8px}
.tr-more{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12.5px}
.tr-more .checks{margin:0}
.tr-more .tr-num{display:inline-flex;flex-direction:row;align-items:center;gap:4px}
.tr-num input{inline-size:70px;border:1px solid var(--input);border-radius:var(--radius);padding:3px 6px}
.tr-row :is(input,select){border:1px solid var(--input);border-radius:var(--radius);padding:5px 8px;background:var(--card);min-width:0;width:100%}
.tour-row{display:grid;grid-template-columns:minmax(0,1fr) 80px 80px;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}
.tour-row:last-child{border-bottom:0}
.tour-row.off{opacity:.5}
.tour-row input{border:1px solid var(--input);border-radius:var(--radius);padding:4px 8px;width:100%}
.lines-table{grid-column:1/-1}
.lines-table td{white-space:normal;height:32px}
.lines-table .amt{text-align:end;font-weight:700;white-space:nowrap}
.lines-table tfoot td{font-size:15px}

/* ---------- Hotels ---------- */
.hotels-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:12px;align-items:start}
.hotel-list{display:flex;flex-direction:column;gap:6px}
.hotel-item{border:1px solid var(--border);border-radius:var(--radius);padding:9px 11px;cursor:pointer;background:var(--card);text-align:start}
.hotel-item:hover{background:var(--row-hover)}
.hotel-item.sel{background:var(--secondary);box-shadow:inset -3px 0 0 var(--action)}
.price-grid input{width:90px;border:1px solid var(--input);border-radius:var(--radius);padding:4px 7px}

/* ---------- Tours & transfers ---------- */
.tour-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.tour-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;cursor:pointer}
.tour-card:hover{background:var(--row-hover)}
.tour-card h3{font-size:14px;margin-bottom:4px}
.tr-day{margin-bottom:16px}
.tr-day>h3{font-size:14px;margin-bottom:8px}
.tr-group{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden;background:var(--card)}
.tr-group-head{background:var(--muted);padding:7px 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tr-group-head .grow{flex:1}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;background:rgba(17,24,39,.45);display:none;align-items:flex-start;justify-content:center;z-index:100;padding:32px 16px;overflow-y:auto}
.modal.open{display:flex}
.modal-box{background:var(--card);border-radius:var(--radius);width:100%;max-width:760px;padding:20px 22px;border:1px solid var(--border);position:relative}
.modal-box.wide{max-width:1100px}
.modal-box h2{font-size:18px;margin-bottom:4px}
.modal-x{position:absolute;top:12px;inset-inline-end:12px;border:0;background:none;font-size:22px;cursor:pointer;color:var(--muted-foreground);line-height:1;z-index:2}
.modal-box:has(.cc-head) .modal-x{color:var(--primary-foreground)}
.modal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.form-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 12px;margin-top:12px}
.form-grid label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted-foreground);font-weight:500}
.form-grid input,.form-grid select,.form-grid textarea{border:1px solid var(--input);border-radius:var(--radius);padding:6px 9px;background:var(--card);color:var(--foreground);font-size:13px;width:100%}
.form-grid input[type=checkbox]{width:auto}
.form-grid input:disabled,.form-grid select:disabled{background:var(--muted);color:var(--muted-foreground)}
.c1{grid-column:span 1}.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:span 6}
.inline{display:flex;gap:6px}
.form-summary{background:var(--muted);border:1px solid var(--border);border-radius:var(--radius);padding:7px 11px}
.form-err{color:var(--destructive);font-weight:500}
.room-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-top:12px}
.room-opt{border:1px solid var(--border);background:var(--card);border-radius:var(--radius);padding:8px;cursor:pointer;text-align:start;line-height:1.3}
.room-opt:hover{background:var(--row-hover);border-color:var(--primary)}
.room-opt b{font-size:15px;display:block}
.room-opt small{color:var(--muted-foreground);display:block}
.room-opt.current{background:var(--secondary);box-shadow:inset -3px 0 0 var(--action)}
.notice{background:var(--st-cancel-bg);color:var(--st-cancel-fg);border-radius:var(--radius);padding:9px 12px;margin-top:12px}

/* ---------- Passengers (as in the passport) ---------- */
.pax-card{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px 12px;margin:10px 0 0;min-width:0;background:var(--card)}
.pax-card.has-bad{border-color:var(--destructive)}
.pax-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pax-head b{font-size:14px;color:var(--primary)}
.pax-head .grow{flex:1}
.pax-head select.field{max-width:240px}
.pax-grid{margin-top:8px}
.pax-grid .latin input{text-transform:uppercase;text-align:end}
.pax-grid input[dir=ltr]{text-align:end}
.pax-needs{display:flex;flex-wrap:wrap;gap:4px 14px}
.pax-warn:empty{display:none}
.pax-msg{font-size:12px;padding:3px 8px;border-radius:4px;margin-top:3px;background:var(--st-new-bg);color:var(--st-new-fg)}
.pax-msg.warn{background:var(--st-deposit-bg);color:var(--st-deposit-fg)}
.pax-msg.bad{background:var(--st-cancel-bg);color:var(--st-cancel-fg)}
.pax-msg.ok{background:var(--st-paid-bg);color:var(--st-paid-fg)}
.pax-upload{cursor:pointer}
.pax-upload.busy{opacity:.6;pointer-events:none}
.pax-linkbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--secondary);color:var(--secondary-foreground);border-radius:var(--radius);padding:10px 12px;margin-top:10px}
.pax-list{display:flex;flex-direction:column;gap:4px}
.pax-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.pax-names{font-size:11px;text-align:start}
.need{display:inline-flex;color:var(--primary);margin-inline-end:2px;vertical-align:middle}
.bar .need{color:inherit}
.chip-btn{border:0;background:none;padding:0;cursor:pointer}
button.chip{border:0;cursor:pointer;font-family:inherit}
button.chip:hover{outline:1px solid var(--ring)}
.chip-btn:hover .chip{outline:1px solid var(--ring)}
tr.pax-missing td{color:var(--st-deposit-fg);background:var(--st-deposit-bg)}

/* ---------- Booking confirmation (printed) ---------- */
.voucher{font-size:13px;color:var(--foreground)}
.voucher .v-head{display:flex;align-items:center;gap:18px;border-bottom:2px solid var(--primary);padding-bottom:10px;margin-bottom:12px}
.voucher .v-head img{width:150px}
.voucher h1{font-size:22px;color:var(--primary)}
.voucher h2{font-size:15px;color:var(--primary);margin:14px 0 6px}
.voucher h2 small{font-weight:400;color:var(--muted-foreground)}
.voucher .v-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
.voucher .v-grid div{display:flex;gap:8px;border-bottom:1px dotted var(--border);padding:2px 0}
.voucher .v-grid span{color:var(--muted-foreground);min-width:96px}
.voucher table{width:100%;border-collapse:collapse}
.voucher th,.voucher td{border:1px solid var(--border);padding:4px 6px;height:auto;text-align:start;white-space:normal;position:static}
.voucher .v-price td:last-child{text-align:end;white-space:nowrap}
.voucher .v-price tfoot td{font-weight:700}
.voucher ul{margin:0;padding-inline-start:18px}
.voucher .v-foot{margin-top:16px;border-top:1px solid var(--border);padding-top:8px;color:var(--muted-foreground);font-size:12px}

/* ---------- Toast (bottom-left) ---------- */
#toasts{position:fixed;bottom:16px;inset-inline-end:16px;display:flex;flex-direction:column;gap:8px;z-index:200;max-width:min(400px,calc(100vw - 32px))}
.toast{background:var(--card);color:var(--foreground);border:1px solid var(--border);padding:10px 14px;border-radius:var(--radius);box-shadow:0 4px 12px rgba(17,24,39,.08);animation:tin .2s ease-out;display:flex;gap:8px;align-items:flex-start}
.toast.err{color:var(--st-cancel-fg);border-color:var(--st-cancel-bg);background:var(--st-cancel-bg)}
.toast.ok{color:var(--st-paid-fg)}
.toast.warn{color:var(--st-deposit-fg);border-color:var(--st-deposit-bg)}
@keyframes tin{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
footer{color:var(--muted-foreground);font-size:11px;padding:0 20px 20px}
#printArea{display:none}

/* ---------- Narrow screens: the side bar becomes a top strip ---------- */
@media (max-width:900px){
  .grid2,.cc-grid,.crm-layout,.hotels-layout,.assign-layout{grid-template-columns:minmax(0,1fr)}
  .pending,.tasks-side{position:static;max-height:none}
  .pending-list{flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .p-item{min-width:200px}
}
@media (max-width:760px){
  .shell{flex-direction:column}
  .side{width:100%;height:auto;position:sticky;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:6px 10px;gap:2px}
  .side-logo{width:36px;height:36px;margin:0;margin-inline-end:6px}
  .side .grow{display:none}
  .side-user{flex-direction:row;margin:0;margin-inline-start:8px}
  .page-head{padding:12px 16px 0}
  main{padding:12px 16px 28px}
  .form-grid .c1,.form-grid .c2,.form-grid .c3,.form-grid .c4{grid-column:span 6}
  .tr-row,.tr-row.ap{grid-template-columns:1fr 1fr}
  .mv-cols{grid-template-columns:1fr}
  .mv-cols>div+div{border-inline-start:0;border-top:1px solid var(--border)}
  .modal{padding:10px}
  .modal-box{padding:16px}
  .cc-head{margin:-16px -16px 0;padding:14px 16px;padding-inline-end:44px}
}
@media print{
  body{background:var(--card)}
  .side,.no-print,#toasts,footer,.page-head .seg,.page-head .btn{display:none!important}
  main{padding:0;max-width:none}
  .panel:not(.active){display:none!important}
  .card,.kpi,.insight{break-inside:avoid}
  .grid2{grid-template-columns:1fr 1fr}
  body.print-area-mode>*:not(#printArea){display:none!important}
  body.print-area-mode #printArea{display:block}
  #printArea table{font-size:12px}
  #printArea .tr-group{break-inside:avoid}
  #printArea table.manifest{font-size:11px}
  .voucher h2,.voucher table{break-inside:avoid}
}
.pax-photo{display:inline-flex;align-items:center;gap:2px}
.pax-photo:empty{display:none}
.pax-photo-view{margin-top:8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--muted);text-align:center;padding:6px}
.pax-photo-view img{max-width:100%;max-height:420px}

/* ---------- Leads & incoming calls ---------- */
.lead-note{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.call-pop{position:fixed;bottom:16px;inset-inline-start:92px;z-index:210;display:flex;align-items:flex-start;gap:12px;min-width:280px;max-width:min(380px,calc(100vw - 32px));background:var(--card);border:1px solid var(--border);border-inline-start:4px solid var(--primary);border-radius:var(--radius);padding:12px 14px;box-shadow:0 8px 24px rgba(17,24,39,.16);animation:tin .2s ease-out}
.call-pop .ic{color:var(--primary);margin-top:2px}
.call-pop.ringing{border-inline-start-color:var(--action)}
.call-pop.ringing .ic{color:var(--action);animation:ring 1s ease-in-out infinite}
.call-pop.missed{border-inline-start-color:var(--destructive)}
.call-pop.missed .ic{color:var(--destructive)}
.call-pop .cp-main{flex:1;min-width:0}
.call-pop .cp-phone{font-size:16px;font-weight:700;text-align:start}
.call-pop .cp-actions{display:flex;align-items:center;gap:4px}
@keyframes ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.composer.call-live{border-color:var(--action)}
.int-sec{border-top:1px solid var(--border);padding-top:10px;margin-top:10px}
.int-head{display:flex;align-items:center;gap:8px}
.int-sim{background:var(--muted);border-radius:var(--radius);padding:8px 10px;margin-top:10px}
#intCard h3 .ic{color:var(--primary)}

/* ---------- Side drawer (DESIGN §8.1–8.2): details beside the list ---------- */
.drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(480px,100vw);z-index:60;background:var(--card);border-inline-start:1px solid var(--border);display:flex;flex-direction:column;box-shadow:0 0 16px rgba(17,24,39,.08)}
@media (min-width:1180px){body.drawer-open .workspace{margin-inline-end:480px}}
.dw-x{position:absolute;top:10px;inset-inline-end:10px;z-index:2;border:0;background:none;color:var(--primary-foreground);font-size:22px;line-height:1;cursor:pointer;width:32px;height:32px;border-radius:var(--radius)}
.dw-x:hover{background:var(--sidebar-primary)}
.dw-head{background:var(--primary);color:var(--primary-foreground);padding:14px 16px 12px;padding-inline-end:48px}
.dw-head h2{font-size:19px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0}
.dw-kicker{font-size:12px;color:var(--sidebar-foreground)}
.dw-contact{color:var(--sidebar-foreground);font-size:13px}
.dw-headbtn{background:var(--sidebar-primary);border-color:var(--sidebar-primary);color:var(--primary-foreground);margin-top:8px}
.dw-headbtn:hover{background:var(--ring);color:var(--primary-foreground)}
.dw-headacts{display:flex;gap:6px;flex-wrap:wrap}
.dw-stats{display:flex;gap:20px;margin-top:8px}
.dw-stats div{display:flex;flex-direction:column}
.dw-stats b{font-size:17px}
.dw-stats span{font-size:11px;color:var(--sidebar-foreground)}
.dw-stats .dw-owed{color:var(--badge-on-dark)}
.dw-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 10px;overflow-x:auto;flex:none}
.dw-tabs button{border:0;background:none;padding:10px 10px 8px;color:var(--muted-foreground);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;font-size:13px}
.dw-tabs button:hover{color:var(--primary)}
.dw-tabs button.on{color:var(--primary);font-weight:700;border-bottom-color:var(--action)}
.dw-count{font-size:11px;background:var(--secondary);color:var(--secondary-foreground);border-radius:4px;padding:0 5px}
.dw-body{flex:1;overflow-y:auto;padding:12px 16px 16px}
.dw-foot{flex:none;border-top:1px solid var(--border);background:var(--muted);padding:10px 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dw-foot .grow{flex:1}
.dw-total{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dw-total b{font-size:15px}
.dw-total .meter{width:90px;margin:0}
.dw-sec{font-size:14px;color:var(--primary);margin:16px 0 6px}
.pkg-list{display:flex;flex-direction:column}
.pkg-row{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.pkg-row b{font-size:12px;color:var(--muted-foreground)}
.dw-lines{background:none}
.dw-lines td{height:30px;white-space:normal}
.dw-lines .amt{text-align:end;white-space:nowrap}
.dw-facts{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.dw-list,.dw-ul{display:flex;flex-direction:column}
.dw-ul{margin:0;padding-inline-start:18px;gap:4px}
.dw-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:7px 0;border-bottom:1px solid var(--border)}
.dw-row .grow,.dw-item .grow{flex:1}
.dw-item{display:flex;gap:8px;align-items:center;flex-wrap:wrap;width:100%;text-align:start;border:0;border-bottom:1px solid var(--border);background:none;padding:8px 4px;cursor:pointer}
.dw-item:hover{background:var(--row-hover)}
.dw-fact{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.dw-note{white-space:pre-wrap;margin:0;background:var(--muted);border-radius:var(--radius);padding:8px 10px}
#drawer .mini-form{margin-bottom:10px}

/* ---------- Group headers in lists (DESIGN §7: by cycle / by status) ---------- */
tr.grp td{background:var(--primary);color:var(--primary-foreground);height:36px;position:static}
tr.grp:hover td{background:var(--primary)}
.grp-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.grp-in .grow{flex:1}
.grp-meter{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--sidebar-foreground)}
.grp-meter .meter{width:70px;margin:0;background:var(--sidebar-primary)}
.grp-meter .meter i{background:var(--badge-on-dark)}
#bkViewSeg{flex:none}
/* With a drawer open, the customers list takes the whole width; the drawer has the tasks */
body.drawer-open #tab-crm .tasks-side{display:none}
body.drawer-open #tab-crm .crm-layout{grid-template-columns:minmax(0,1fr)}

/* ---------- Period setup: extra hotels, seasons, extras ---------- */
.ps-hotel{border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;margin-top:8px}
.price-grid input[type=date]{min-width:130px}
.price-grid input:not([type=checkbox]),.price-grid select{width:100%;min-width:70px;border:1px solid var(--input);border-radius:var(--radius);padding:4px 6px;background:var(--card)}

/* ---------- Booking form: sale type, extras, staff ---------- */
.bk-types{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--muted);border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px}
.extra-row{display:flex;align-items:center;gap:10px;padding:4px 0;border-bottom:1px solid var(--border)}
.extra-row label{flex:1}
.extra-row input[type=number]{width:70px}
.staff-note{background:var(--secondary);color:var(--secondary-foreground)}
/* Staff: told apart by a dashed outline, not by a new color (DESIGN §4) */
.chip.staff{background:var(--card);color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.bar.s-staff{background:var(--card);color:var(--primary);border:1px dashed var(--primary)}
.lg-staff{background:var(--card);border:1px dashed var(--primary)!important}
.dn-we td{background:var(--secondary)}

/* ---------- Inner tabs of a side-bar group (DESIGN §7 Tabs) ---------- */
.subtabs{display:flex;gap:2px;padding:0 20px;border-bottom:1px solid var(--border);overflow-x:auto;background:var(--background)}
.subtabs button{border:0;background:none;padding:9px 12px 7px;color:var(--muted-foreground);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;font-size:13px}
.subtabs button:hover{color:var(--primary)}
.subtabs button.on{color:var(--primary);font-weight:700;border-bottom-color:var(--action)}
@media (max-width:760px){.subtabs{padding:0 16px}}

/* ---------- Date range (shared by the list screens) ---------- */
.range{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.range-dates{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted-foreground)}
.range-dates input{padding:4px 6px}
.mv-card{padding:0;margin-bottom:8px}

/* ---------- Services from suppliers, supplier voucher ---------- */
.modal-actions .grow{flex:1}
.svc-list{display:flex;flex-direction:column;gap:8px}
.svc-card{border:1px solid var(--border);border-radius:var(--radius);padding:9px 11px;display:flex;flex-direction:column;gap:4px;background:var(--card)}
/* A room of a booking in our hotel, inside the booking's drawer */
.stay-card{border:1px solid var(--border);border-radius:var(--radius);padding:9px 11px;display:flex;flex-direction:column;gap:3px;background:var(--card);margin-bottom:8px}
.stay-head{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.stay-head .grow{flex:1}
/* New booking: what kind of sale */
.choice-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.choice{display:flex;gap:12px;align-items:center;text-align:start;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);padding:12px 14px;cursor:pointer;font:inherit;color:inherit}
.choice.on{border-color:var(--primary);background:var(--secondary)}
.sm-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sm-row>b{min-inline-size:48px;color:var(--muted-foreground);font-weight:500}
.sm-row>input{flex:1}
.lg-kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:10px}
#lgBar{flex-wrap:wrap;gap:8px}
.lg-table{max-block-size:55vh;overflow:auto}
.lg-table td{white-space:nowrap}
.inv-svcs{flex-direction:column;align-items:flex-start;max-block-size:240px;overflow:auto}
.dd-opts{margin-top:12px}
.dd-opt{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--border-soft)}
.dd-opt:last-child{border-bottom:0}
.dd-opt>b{min-inline-size:90px;color:var(--muted-foreground);font-weight:500}
.choice:hover:not(:disabled){border-color:var(--primary);background:var(--row-hover)}
.choice:disabled{opacity:.55;cursor:not-allowed}
.choice > span{display:flex;flex-direction:column;gap:2px}
.choice .ic{color:var(--primary);flex-shrink:0}
.svc-card.off{opacity:.6}
.svc-top{display:flex;align-items:center;gap:6px}
.svc-top .ic{color:var(--primary);flex:none}
.svc-desc{flex:1;min-width:0}
.svc-meta{font-size:12px;display:flex;flex-wrap:wrap;gap:2px 6px}
.svc-cost{font-size:12px;color:var(--muted-foreground)}
.svc-cost b{color:var(--foreground)}
.svc-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.svc-row{display:flex;gap:6px;align-items:center;margin:4px 0;flex-wrap:wrap}
.form-grid .svc-row input{width:auto;flex:0 0 auto;border:1px solid var(--input);border-radius:var(--radius);padding:5px 8px;background:var(--card);font-size:13px;min-width:0;margin:0}
.svc-costbox{border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px 12px;background:var(--muted)}
.svc-costbox legend{font-size:12px;color:var(--muted-foreground);padding-inline:4px}
.sm-field{width:130px;padding:4px 7px}
.voucher-preview{border:1px solid var(--border);border-radius:var(--radius);padding:16px;max-height:60vh;overflow-y:auto;background:var(--card)}
.svc-flights{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px}
.dk-child td:nth-child(2){padding-inline-start:28px}
.dk-child{background:var(--muted)}
/* The booking's status on its card: the steps from new to done, and what to do next */
.status-box{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:12px;background:var(--muted)}
.status-box p{margin:6px 0}
.status-box.st-cancelled{border-color:var(--destructive-line)}
.st-head{display:flex;gap:8px;align-items:center}
.st-steps{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}
.st-step{flex:1 1 0;min-width:64px;text-align:center;font-size:12px;padding:4px 2px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);color:var(--muted-foreground);display:flex;flex-direction:column}
.st-step.on{background:var(--secondary);border-color:var(--primary);color:var(--primary);font-weight:600}
.st-step small{font-weight:400;font-size:11px}
.st-cancel{text-align:end;margin-top:6px}
.danger-link{color:var(--destructive);font-size:12px}
.terms-text{white-space:pre-wrap;font-family:inherit;background:var(--muted);border:1px solid var(--border);border-radius:var(--radius);padding:10px;max-height:50vh;overflow:auto}

/* Message templates: the variables to insert, and the filled-in preview */
.tpl-vars{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.tpl-vars b{font-size:12px;color:var(--muted-foreground);margin-inline-start:6px}
.tpl-vars .btn{font-size:12px;padding:2px 8px}
.tpl-preview{white-space:pre-wrap;background:var(--muted);border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px;font-size:13px;line-height:1.6;max-height:280px;overflow-y:auto}

/* Sales reports: card headers with an export button, the change against the range before, the funnel rows */
#tab-sales .card h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.k-delta.up{color:var(--st-paid-fg);font-weight:600}
.k-delta.down{color:var(--destructive);font-weight:600}
.funnel-row{display:grid;grid-template-columns:150px 1fr 110px;gap:10px;align-items:center;padding:5px 0;font-size:13px}
.funnel-row .meter{margin:0;height:10px}
.funnel-row .num{text-align:end;white-space:nowrap}
@media (max-width:760px){.funnel-row{grid-template-columns:110px 1fr 90px}}
/* Calls: the recording plays in its own cell; the actions under one another */
.call-audio{inline-size:230px;block-size:32px;vertical-align:middle}
#tab-calls td .row-actions + .row-actions{margin-block-start:4px}
/* Mail inbox (Gmail-like): folders on the side, the list or one thread beside them */
.mail-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px;align-items:start}
.mail-side{display:flex;flex-direction:column;gap:10px;position:sticky;inset-block-start:12px}
.mail-side > .btn.action{justify-content:center;padding-block:10px}
.mail-box-pick{display:flex;flex-direction:column;gap:4px}
.mail-folders{display:flex;flex-direction:column;gap:2px}
.mail-folders button{display:flex;align-items:center;gap:10px;border:0;background:none;font:inherit;color:var(--tertiary-foreground);padding:7px 12px;border-start-end-radius:16px;border-end-end-radius:16px;cursor:pointer;text-align:start}
.mail-folders button:hover{background:var(--row-hover)}
.mail-folders button.on{background:var(--secondary);color:var(--secondary-foreground);font-weight:700}
.mail-count{margin-inline-start:auto;font-size:12px;font-weight:700}
.mail-sync{font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.mail-main{padding:0;min-height:420px}
.mail-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border-block-end:1px solid var(--border)}
.mail-search{flex:1 1 260px;max-width:460px}
.mail-check{display:grid;place-items:center;padding:4px;cursor:pointer}
.mail-row{display:grid;grid-template-columns:28px 28px minmax(110px,190px) minmax(0,1fr) auto 64px;align-items:center;gap:6px;padding:6px 12px;border-block-end:1px solid var(--border);cursor:pointer;background:var(--muted)}
.mail-row.unread{background:var(--card)}
.mail-row.unread .mail-from,.mail-row.unread .mail-date{font-weight:700;color:var(--foreground)}
.mail-row:not(.unread) .mail-subj b{font-weight:500}
.mail-row:hover{background:var(--row-hover)}
.mail-row.selected{background:var(--secondary)}
.mail-from,.mail-subj{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-tags{display:flex;align-items:center;gap:4px;color:var(--muted-foreground)}
.mail-date{text-align:end;font-size:12px;color:var(--muted-foreground);white-space:nowrap}
.mail-star{border:0;background:none;cursor:pointer;color:var(--input);padding:2px;display:grid;place-items:center}
.mail-star.on{color:var(--chart-2)}
.mail-star.on svg{fill:currentColor}
.mail-thread{padding:12px 18px 18px}
.mail-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:20px;margin-block:4px 14px}
.mail-msg{border-block-end:1px solid var(--border);padding-block:10px}
.mail-msg-head{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.mail-msg-who{flex:1;min-width:0}
.mail-msg.closed .mail-msg-snip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-body{padding-inline-start:42px;padding-block-start:8px}
.mail-body iframe{inline-size:100%;block-size:200px;border:0;background:var(--card)}
.mail-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
.mail-files{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:10px}
.mail-file{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:var(--radius);padding:6px 10px;color:inherit;text-decoration:none;background:var(--muted)}
a.mail-file:hover{border-color:var(--primary)}
.mail-reply-bar{display:flex;gap:8px;margin-block-start:16px}
.mail-compose{margin-block-start:14px;border:1px solid var(--border);border-radius:var(--radius);padding:12px;background:var(--muted)}
#mlNewCompose .mail-compose{border:0;padding:0;background:none}
.mail-ctx{display:flex;flex-direction:column;gap:4px;padding:8px 12px;margin-block-end:8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--muted)}
.mail-dk{font-size:12px;color:var(--muted-foreground);white-space:nowrap}
.mail-ai{display:flex;align-items:center;gap:8px;color:var(--primary)}
.mail-ai input{flex:1;min-width:0}
@media (max-width:900px){
  .mail-shell{grid-template-columns:1fr}
  .mail-side{position:static}
  .mail-folders{flex-direction:row;flex-wrap:wrap}
  .mail-row{grid-template-columns:28px 28px minmax(0,1fr) 56px}
  .mail-row .mail-subj{grid-column:3 / -1;grid-row:2}
  .mail-row .mail-tags{display:none}
}
/* Screens that do not depend on the period: no period picker or period line in the head */
.page-head.period-free #periodSeg,.page-head.period-free #periodSel,.page-head.period-free #pageCtx{display:none}
/* WhatsApp chats (WhatsApp Web-like): the chats on the side, one chat with its bubbles beside them */
.wa-shell{display:grid;grid-template-columns:340px minmax(0,1fr);padding:0;height:calc(100vh - 150px);min-height:480px;overflow:hidden}
.wa-list{display:flex;flex-direction:column;border-inline-end:1px solid var(--border);min-height:0}
.wa-list-head{padding:10px;display:flex;flex-direction:column;gap:8px;border-block-end:1px solid var(--border)}
.wa-filters{display:flex;gap:6px;flex-wrap:wrap}
.wa-filters button{border:1px solid var(--border);background:var(--card);border-radius:14px;padding:3px 12px;font:inherit;font-size:13px;cursor:pointer;color:var(--tertiary-foreground)}
.wa-filters button.on{background:var(--secondary);color:var(--secondary-foreground);border-color:var(--secondary);font-weight:700}
.wa-chats{flex:1;overflow-y:auto}
.wa-chat{display:flex;gap:10px;align-items:center;inline-size:100%;border:0;border-block-end:1px solid var(--border);background:var(--card);padding:10px 12px;font:inherit;color:inherit;text-align:start;cursor:pointer}
.wa-chat:hover{background:var(--row-hover)}
.wa-chat.on{background:var(--secondary)}
.wa-chat .avatar{flex:none;width:40px;height:40px;font-size:15px}
.wa-chat-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wa-chat-top,.wa-chat-bottom{display:flex;align-items:center;gap:6px}
.wa-chat-top b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-chat-time{font-size:12px;color:var(--muted-foreground)}
.wa-chat.unread .wa-chat-time{color:var(--action);font-weight:700}
.wa-chat-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted-foreground);font-size:13px}
.wa-unread{background:var(--action);color:var(--action-foreground);border-radius:10px;min-width:20px;padding:0 6px;font-size:12px;font-weight:700;text-align:center}
.wa-foot{padding:8px 10px;border-block-start:1px solid var(--border)}
.wa-foot .mini-form{flex-wrap:wrap}
.wa-pane{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--wa-bg)}
.wa-empty{margin:auto}
.wa-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px;background:var(--card);border-block-end:1px solid var(--border)}
.wa-head .avatar{width:40px;height:40px;font-size:15px}
.wa-head-who{flex:1;min-width:180px}
.wa-assign{display:flex;align-items:center;gap:6px}
.wa-back{display:none}
.wa-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 14px;background:var(--card);border-block-end:1px solid var(--border)}
.wa-msgs{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:6px}
.wa-day{text-align:center;margin-block:8px}
.wa-day span{background:var(--wa-day);border-radius:8px;padding:3px 12px;font-size:12px;color:var(--wa-meta)}
.wa-b{max-inline-size:min(520px,78%);padding:6px 10px 4px;border-radius:8px;background:var(--wa-bubble-in);align-self:flex-start;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.wa-b.out{align-self:flex-end;background:var(--wa-bubble-out)}
.wa-b.failed{outline:1px solid var(--destructive)}
.wa-b.preview{align-self:stretch;max-inline-size:none}
.wa-b-who{font-size:12px;color:var(--primary);font-weight:700;margin-block-end:2px}
.wa-b-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
.wa-b-meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:11px;color:var(--wa-meta);margin-block-start:2px}
.wa-b-err{font-size:12px;color:var(--destructive)}
.wa-img{display:block;max-inline-size:280px;max-block-size:280px;border-radius:6px;margin-block-end:4px}
.wa-b audio{max-inline-size:260px}
.wa-ticks{display:inline-flex;color:var(--wa-meta)}
.wa-ticks svg + svg{margin-inline-start:-9px}
.wa-ticks.read{color:var(--wa-tick-read)}
.wa-ticks.bad{color:var(--destructive)}
.wa-compose{background:var(--card);border-block-start:1px solid var(--border);padding:8px 12px}
.wa-write{display:flex;align-items:flex-end;gap:8px}
.wa-write textarea{flex:1;resize:none;min-block-size:38px;max-block-size:160px;border:1px solid var(--input);border-radius:18px;padding:8px 14px;font:inherit}
.wa-write .btn.action{border-radius:50%;inline-size:40px;block-size:40px;padding:0;justify-content:center}
.wa-attach{border-radius:50%;inline-size:36px;block-size:36px;padding:0;justify-content:center;cursor:pointer}
.wa-file{margin-block-end:6px}
.wa-closed{display:flex;flex-direction:column;gap:8px}
@media (max-width:900px){
  .wa-shell{grid-template-columns:1fr;height:auto;min-height:0}
  .wa-shell.open .wa-list{display:none}
  .wa-shell:not(.open) .wa-pane{display:none}
  .wa-back{display:inline-flex}
  .wa-msgs{max-block-size:60vh}
}
.wa-links{display:flex;gap:6px;flex-wrap:wrap}
.wa-links:empty{display:none}

/* ---------- File library (docket and customer "קבצים") ---------- */
.fl-drop{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1.5px dashed var(--input);border-radius:var(--radius);padding:12px 14px;background:var(--muted);color:var(--muted-foreground)}
.fl-drop.over{border-color:var(--ring);background:var(--secondary);color:var(--secondary-foreground)}
.fl-cat{display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto}
.fl-cat select{min-inline-size:150px}
.fl-bar{margin-block:10px 0;gap:8px}
.fl-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.fl-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;padding:7px 10px;border-block-start:1px solid var(--border)}
.fl-row:first-child{border-block-start:0}
.fl-row.on{background:var(--secondary)}
.fl-main{min-inline-size:0}
.fl-name{font-weight:600;text-align:start;overflow-wrap:anywhere}
.fl-tags{display:flex;gap:4px;flex-wrap:wrap;justify-content:end}
.fl-ic{border:0;background:none;color:var(--muted-foreground);cursor:pointer;padding:4px;border-radius:6px;display:inline-grid;place-items:center}
.fl-ic:hover{background:var(--row-hover);color:var(--primary)}
.fl-view{block-size:min(72vh,900px);border:1px solid var(--border);border-radius:var(--radius);background:var(--muted);display:grid;place-items:center;overflow:auto}
.fl-view iframe{inline-size:100%;block-size:100%;border:0;background:var(--card)}
.fl-view img{max-inline-size:100%;max-block-size:100%;object-fit:contain}
.mail-filebox{display:inline-flex;align-items:center;gap:4px}
.wa-save{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--wa-meta);font:inherit;font-size:12px;cursor:pointer;padding:2px 0;margin-block-end:4px}
.wa-save:hover{color:var(--primary);text-decoration:underline}

/* ---------- Docket milestones ---------- */
.ms-box{margin-block:12px}
.ms-box:empty{display:none}
.ms-head{display:flex;align-items:baseline;gap:10px;margin-block-end:6px;color:var(--primary)}
.ms-strip{display:flex;flex-wrap:wrap;gap:6px}
.ms-pill{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:999px;padding:3px 10px;font:inherit;font-size:12px;background:var(--card);color:var(--tertiary-foreground);cursor:pointer}
span.ms-pill{cursor:default}
.ms-pill small{color:inherit;opacity:.8}
.ms-pill.done{background:var(--st-paid-bg);color:var(--st-paid-fg);border-color:transparent}
.ms-pill.late{background:var(--st-cancel-bg);color:var(--st-cancel-fg);border-color:transparent;font-weight:600}
.ms-pill.na{color:var(--muted-foreground);border-style:dashed;text-decoration:line-through}
button.ms-pill:hover{outline:1px solid var(--ring)}
.ms-table th.ms-th{font-size:11px;text-align:center;white-space:nowrap}
.ms-cell{text-align:center;padding-inline:4px}
.ms-dot{display:inline-grid;place-items:center;inline-size:24px;block-size:24px;border-radius:50%;border:0;background:var(--st-new-bg);color:var(--st-new-fg);cursor:pointer;vertical-align:middle}
span.ms-dot{inline-size:18px;block-size:18px;cursor:default}
.ms-dot.done{background:var(--st-paid-bg);color:var(--st-paid-fg)}
.ms-dot.late{background:var(--st-cancel-bg);color:var(--st-cancel-fg)}
.ms-dot.na{background:transparent;color:var(--input)}
.ms-dot.open{background:var(--card);color:var(--st-new-line);box-shadow:inset 0 0 0 1px var(--border)}
button.ms-dot:hover{outline:2px solid var(--ring)}
.ms-count{font-size:12px;font-weight:600;color:var(--tertiary-foreground)}
.ms-count.done{color:var(--st-paid-fg)}
.ms-count.late{color:var(--st-cancel-fg)}
.ms-legend{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.ms-conf input.field{min-inline-size:0}
.ms-conf .num-field{inline-size:64px}

/* ---------- Demo data notice (mail, WhatsApp) ---------- */
.demo-note{display:flex;align-items:center;gap:6px;background:var(--st-deposit-bg);color:var(--st-deposit-fg);border-radius:var(--radius);padding:6px 10px;margin-block-end:8px;font-size:13px}

/* ---------- The office's documents ---------- */
.fs-mode{margin-block-end:12px}
.od-pick{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);padding:8px;margin-block:6px;inline-size:100%}
.od-pick-head{display:flex;align-items:center;gap:10px;margin-block-end:6px;color:var(--primary)}
.od-pick-head .field{flex:1;min-inline-size:0}
.od-pick-list{max-block-size:240px;overflow:auto;display:flex;flex-direction:column;border-block:1px solid var(--border);margin-block-end:8px}
.od-pick-row{display:flex;align-items:center;gap:8px;padding:6px 4px;cursor:pointer;border-block-start:1px solid var(--border)}
.od-pick-row:first-child{border-block-start:0}
.od-pick-row:hover{background:var(--row-hover)}
.od-pick-row[hidden]{display:none}
.fl-extra{margin-block:8px 0;align-items:center}

/* ---------- Staff requests ("?" in the side bar) ---------- */
.rq-list{display:flex;flex-direction:column;gap:8px}
#rqList{display:flex;flex-direction:column;gap:10px}
.rq-item{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);padding:10px 12px}
.rq-item.done{opacity:.75}
.rq-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.rq-body{white-space:pre-wrap;margin-block:8px}
.rq-shot img{max-inline-size:260px;max-block-size:160px;border:1px solid var(--border);border-radius:var(--radius);display:block}
.rq-admin{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-block-start:8px;border-block-start:1px solid var(--border);padding-block-start:8px}
.rq-admin textarea{flex:1 1 280px;min-inline-size:0}
.rq-tech{flex-basis:100%}
.rq-reply{background:var(--secondary);color:var(--secondary-foreground);border-radius:var(--radius);padding:8px 10px;margin-block-start:8px}
.rq-shotbox{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1.5px dashed var(--input);border-radius:var(--radius);padding:10px;color:var(--muted-foreground)}
.rq-preview{max-inline-size:220px;max-block-size:140px;border-radius:var(--radius);border:1px solid var(--border)}
#btnHelp{position:relative}
.wa-tplrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:6px 10px 0}
.wa-tplrow select{max-inline-size:280px}

/* ==========================================================================
   Tour Olam – design refresh: new and changed component rules
   To be merged into app.css (after the :root block from tokens-update.css).
   Plain CSS, logical properties only, colors only through variables.
   Each block notes whether it REPLACES an existing rule or is NEW.
   ========================================================================== */

/* ---------- Numbers (CHANGED) ---------- */
.num,.ltr{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
td.amt,th.amt{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.balance{color:var(--action);font-weight:600}
.balance.zero{color:var(--muted-foreground);font-weight:400}

/* ---------- Page header becomes a white band (REPLACES .page-head / .subtabs look) ---------- */
.page-head{background:var(--card);border-bottom:1px solid var(--border);padding:14px 20px}
.page-head:has(+ .subtabs:not([hidden])){border-bottom:0;padding-bottom:6px}
@media (max-width:760px){.page-head{padding:12px 16px}}
.page-ctx{font-size:12.5px}
.subtabs{background:var(--card);border-bottom:1px solid var(--border)}
.subtabs button.on{border-bottom-color:var(--brand-orange)}
.dw-tabs button.on{border-bottom-color:var(--brand-orange)}

/* ---------- Side bar: active item marker (CHANGED) ---------- */
.tab.active{box-shadow:inset -3px 0 0 var(--brand-orange)}

/* ---------- KPI strip (NEW – replaces the tall .kpis cards on list screens) ---------- */
.kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px}
.kpi-strip .kpi{border:0;border-radius:0;background:none;padding:10px 14px;display:flex;flex-direction:column;gap:1px;text-align:start;cursor:pointer;font:inherit;color:inherit;min-width:0}
.kpi-strip .kpi+.kpi{border-inline-start:1px solid var(--border)}
.kpi-strip .kpi:hover{background:var(--row-hover)}
.kpi-strip div.kpi{cursor:default}            /* only a <button> KPI (one that filters) looks clickable */
.kpi-strip div.kpi:hover{background:none}
.kpi-strip .kpi[aria-pressed="true"]{background:var(--secondary)}   /* the KPI whose filter is on */
.kpi-strip .k-label{color:var(--muted-foreground);font-size:12px;white-space:nowrap}
.kpi-strip .k-val{font-size:20px;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums}
.kpi-strip .k-sub{color:var(--muted-foreground);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-strip .kpi.money .k-val{color:var(--action)}
.kpi-strip .kpi.alert{box-shadow:inset 0 -2px 0 var(--destructive)}
.kpi-strip .kpi.alert .k-val{color:var(--destructive)}
@media (max-width:760px){
  .kpi-strip{display:flex;overflow-x:auto;scrollbar-width:none}
  .kpi-strip .kpi{flex:0 0 150px}
}

/* ---------- Tables (CHANGED) ---------- */
.table-wrap{background:var(--card);border:1px solid var(--border)}
th,td{border-bottom-color:var(--border-soft)}
thead th{border-bottom:1px solid var(--border)}
.type-tag{display:inline-block;padding:0 6px;border-radius:4px;font-size:11px;font-weight:500;background:var(--secondary);color:var(--secondary-foreground)}
.type-tag.other{background:var(--st-new-bg);color:var(--st-new-fg)}
.tag.waiting{background:var(--card);color:var(--st-deposit-fg);box-shadow:inset 0 0 0 1px var(--st-deposit-bg)}

/* Mobile: table rows become cards (NEW). Each td gets data-label="…" */
@media (max-width:760px){
  table.table-cards thead{display:none}
  table.table-cards,table.table-cards tbody,table.table-cards tr,table.table-cards td{display:block;width:100%}
  table.table-cards tr{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;padding:8px 12px}
  table.table-cards td{height:auto;border:0;padding:2px 0;white-space:normal}
  table.table-cards td[data-label]::before{content:attr(data-label) " · ";color:var(--muted-foreground);font-size:12px}
}

/* ---------- Translucent zones for single-item screens (NEW) ----------
   Use in: forms, modals, drawers, customer card, settings, customer page.
   Not in: lists, tables, room board, availability, reports charts. */
.form-sec{background:var(--tint-form);border:1px solid var(--tint-form-line);border-radius:var(--radius)}
.form-sec>.sec-head{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--tint-form-head);border-bottom:1px solid var(--tint-form-line);border-start-start-radius:var(--radius);border-start-end-radius:var(--radius);font-weight:700;color:var(--primary)}
.form-sec>.sec-body{padding:12px}
.money-zone{background:var(--tint-money);border:1px solid var(--tint-money-line);border-radius:var(--radius)}
.money-zone>.sec-head{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--tint-money-line);font-weight:700;color:var(--st-deposit-fg)}
.money-zone>.sec-body{padding:10px 12px}
.money-zone .total-box{background:var(--card);border:1px solid var(--tint-money-line);border-radius:var(--radius);padding:10px 12px}
.money-row{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--tint-money-line)}
.money-row:last-child{border-bottom:0}
.fact-row{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--tint-form-line)}
.fact-row:last-child{border-bottom:0}
.sec-num{width:20px;height:20px;border-radius:50%;background:var(--primary);color:var(--primary-foreground);font-size:11px;font-weight:700;display:grid;place-items:center;flex:none}
.money-zone .sec-num{background:var(--action)}
/* Inputs inside a tinted zone stay solid white so they stand out */
:is(.form-sec,.money-zone) :is(input,select,textarea),
:is(.form-sec,.money-zone) .fac-toggle{background:var(--card)}
/* On the gray page background, lay the tint over white – otherwise blue turns gray and orange turns brown */
:is(main,.page) > :is(.form-sec,.money-zone),
:is(main,.page) .grid2 > :is(.form-sec,.money-zone){background:linear-gradient(var(--tint-form),var(--tint-form)),var(--card)}
:is(main,.page) > .money-zone,
:is(main,.page) .grid2 > .money-zone{background:linear-gradient(var(--tint-money),var(--tint-money)),var(--card)}
/* Drawer footer and the calculator's price column are money zones too */
.dw-foot.money{background:var(--tint-money);border-top-color:var(--tint-money-line)}
.dw-foot.money .meter{background:var(--card)}

/* ---------- Toggle chips for room facilities etc. (NEW – replaces long checkbox rows) ---------- */
.fac-toggle{border:1px solid var(--input);background:var(--card);color:var(--foreground);border-radius:999px;padding:4px 12px;font-size:12px;cursor:pointer}
.fac-toggle[aria-pressed="true"]{border-color:var(--primary);background:var(--secondary);color:var(--primary);font-weight:600}

/* ---------- Calculator / booking form layout (NEW) ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:start}
.calc-form{padding:16px 20px;display:flex;flex-direction:column;gap:12px;border-inline-end:1px solid var(--border);min-width:0}
.calc-sum{position:sticky;top:0;align-self:stretch;padding:16px 18px;display:flex;flex-direction:column;gap:12px;background:var(--tint-money)}
.price-changed{font-size:12px;color:var(--st-deposit-fg);background:var(--st-deposit-bg);border-radius:var(--radius);padding:6px 9px}
.seat-tag{display:inline-block;padding:0 6px;border-radius:4px;font-size:11px;background:var(--secondary);color:var(--secondary-foreground)}
.seat-tag.low{background:var(--st-deposit-bg);color:var(--st-deposit-fg)}
@media (max-width:900px){.calc{grid-template-columns:minmax(0,1fr)}.calc-sum{position:static}}

/* ---------- Drawer: status steps + next step (CHANGED / NEW) ---------- */
.status-box{background:var(--tint-form);border-color:var(--tint-form-line)}
.st-step.done{background:var(--secondary);border-color:var(--secondary);color:var(--primary)}
.st-step.on{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground);font-weight:600}
.next-step{display:flex;gap:8px;align-items:center;margin-top:10px;padding:8px 10px;background:var(--card);border:1px solid var(--tint-form-line);border-radius:var(--radius)}
.next-step .ic{color:var(--action)}
.next-step .grow{flex:1}

/* ---------- Room board (CHANGED – deposit bar no longer solid orange) ---------- */
.bar.s-deposit{background:var(--st-deposit-bar);color:var(--st-deposit-bar-fg);border-color:var(--st-deposit-bar-line)}
.lg-deposit{background:var(--st-deposit-bar);border:1px solid var(--st-deposit-bar-line)}
.bar.s-new{border-style:dashed}
.g-day.today{background:var(--card);color:var(--foreground)}
.g-day.today b{background:var(--primary);color:var(--primary-foreground);border-radius:4px;margin:0 6px}

/* ---------- Flights load bars (CHANGED) ---------- */
.loadbar i,.meter i{background:var(--brand)}
.loadbar.hi i,.meter.hi i{background:var(--action)}   /* above 95% */

/* ---------- Customer page (personal link) (NEW) ---------- */
.cp{font-size:15px;line-height:1.55;max-width:560px;margin:0 auto}
.cp-steps{display:flex;gap:6px;padding:12px 16px 0}
.cp-steps>div{flex:1;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted-foreground)}
.cp-steps>div::before{content:"";height:4px;border-radius:2px;background:var(--border)}
.cp-steps>div.on{color:var(--primary);font-weight:600}
.cp-steps>div.on::before{background:var(--primary)}
.cp-steps>div.done::before{background:var(--brand)}
.cp-dates{display:grid;grid-template-columns:1fr 1fr;background:var(--card);border-bottom:1px solid var(--tint-form-line)}
.cp-dates>div{padding:10px 14px}
.cp-dates>div+div{border-inline-start:1px solid var(--tint-form-line)}
.cp-dates b{display:block;font-size:17px}
.cp :is(input,select){height:48px;font-size:16px;border-radius:8px}
.cp input[type=checkbox]{width:22px;height:22px}
.cp-bar{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;padding:10px 16px 14px;background:var(--card);border-top:1px solid var(--border);box-shadow:0 -4px 12px rgba(17,24,39,.06)}
.cp-bar .btn.action{flex:1;height:50px;justify-content:center;font-size:16px;font-weight:700;border-radius:8px}
.cp :is(.form-sec,.money-zone){border-radius:10px}
.cp > main > .form-sec{background:linear-gradient(var(--tint-form),var(--tint-form)),var(--card)}
.cp > main > .money-zone{background:linear-gradient(var(--tint-money),var(--tint-money)),var(--card)}

/* The room board's month view: narrow days, the room's type under its number hidden */
.gantt.g-month .g-day{font-size:10px}
.gantt.g-month .g-day b{font-size:11px}
.gantt.g-month .g-label small{display:none}
.gantt.g-month .bar span{font-size:11px}

/* A flight segment's ticket details, on a second line of its row */
.seg-row .seg-more{display:flex;gap:6px;flex-wrap:wrap;flex-basis:100%}
.tk-grid input.field{inline-size:100%;min-inline-size:70px}

/* ================= Help: the menu behind "עזרה", the guide panel beside the screen, the "?" buttons ================= */
.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.page-title-row{display:flex;align-items:center;gap:4px}
.help-q{border:0;background:none;color:var(--muted-foreground);inline-size:28px;block-size:28px;border-radius:var(--radius);display:inline-grid;place-items:center;cursor:pointer;flex:none;padding:0}
.help-q:hover{background:var(--secondary);color:var(--primary)}
.help-q:focus-visible,.hp-item:focus-visible,.help-menu button:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.help-q.on-dark{color:var(--sidebar-foreground)}
.help-q.on-dark:hover{background:var(--sidebar-primary);color:var(--primary-foreground)}
.dw-help{margin-inline-start:auto;align-self:center}
.help-menu{position:fixed;inset-inline-start:84px;z-index:220;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:6px;min-inline-size:270px;max-inline-size:min(340px,calc(100vw - 100px));box-shadow:0 8px 24px rgba(17,24,39,.16);display:flex;flex-direction:column;gap:2px}
.help-menu[hidden]{display:none}
.help-menu button{display:flex;align-items:flex-start;gap:10px;border:0;background:none;text-align:start;padding:8px 10px;border-radius:var(--radius);cursor:pointer;color:var(--foreground)}
.help-menu button:hover{background:var(--row-hover)}
.help-menu button>.ic{color:var(--primary);margin-block-start:2px;flex:none}
.help-menu button>span{display:flex;flex-direction:column;gap:1px}
.help-menu .sub{font-size:12px}
.hm-dot{min-inline-size:18px;block-size:18px;border-radius:9px;background:var(--badge-on-dark);color:var(--on-badge);font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px;margin-inline-start:auto;align-self:center;flex:none}
.help-panel{position:fixed;top:0;bottom:0;inset-inline-end:0;inline-size:min(400px,100vw);z-index:150;background:var(--card);border-inline-start:1px solid var(--border);display:flex;flex-direction:column;box-shadow:0 0 16px rgba(17,24,39,.08)}
.help-panel[hidden]{display:none}
/* Beside the item drawer when both are open, so the steps and the screen are seen together */
@media (min-width:1100px){body.drawer-open .help-panel{inset-inline-end:480px}}
@media (min-width:1280px){body.help-open:not(.drawer-open) .workspace{margin-inline-end:400px}}
@media (min-width:1680px){body.help-open.drawer-open .workspace{margin-inline-end:880px}}
@media (min-width:1180px){body.help-open .modal{padding-inline-end:416px}}
.hp-head{background:var(--primary);color:var(--primary-foreground);padding:14px 16px 12px;padding-inline-end:48px;position:relative;flex:none}
.hp-head h2{font-size:18px;display:flex;align-items:center;gap:8px;margin:2px 0 0}
.hp-kicker{font-size:12px;color:var(--sidebar-foreground)}
.hp-search{position:relative;padding:10px 16px;border-bottom:1px solid var(--border);flex:none}
.hp-search>.ic{position:absolute;inset-inline-start:26px;top:50%;transform:translateY(-50%);color:var(--muted-foreground);pointer-events:none}
.hp-search input{inline-size:100%;padding-inline-start:32px}
.hp-body{flex:1;overflow-y:auto;padding:12px 16px 20px;outline:none}
.hp-foot{flex:none;border-top:1px solid var(--border);background:var(--muted);padding:10px 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hp-foot .grow{flex:1}
/* Shuki: the conversation, the question box and the first-time intro */
.sh-body{display:flex;flex-direction:column;gap:8px;background:var(--muted)}
.sh-msg{max-inline-size:88%;padding:8px 12px;border-radius:var(--radius);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.sh-msg.me{align-self:flex-start;background:var(--primary);color:var(--primary-foreground)}
.sh-msg.him{align-self:flex-end;background:var(--card);border:1px solid var(--border)}
.sh-msg ul{margin:4px 0;padding-inline-start:18px}
.sh-gap{margin:0;block-size:6px}
.sh-wait{color:var(--muted-foreground);display:flex;align-items:center;gap:6px}
.sh-tools{align-self:flex-end;font-size:11px}
.sh-intro{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;color:var(--foreground)}
.sh-intro>.ic{color:var(--primary)}
.sh-examples{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sh-examples .chip{cursor:pointer;border:0;font-size:12px;padding:4px 10px}
.sh-ask{flex:none;border-top:1px solid var(--border);background:var(--card);padding:10px 16px}
.sh-ask textarea{inline-size:100%;resize:vertical;min-block-size:44px}
.sh-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.sh-row .grow{flex:1}
.hp-here{background:var(--secondary);border-radius:var(--radius);padding:8px 10px 2px;margin-block-end:4px}
.hp-here .hp-item{border-bottom:0}
.hp-group{font-size:12px;color:var(--muted-foreground);font-weight:700;margin:14px 0 2px}
.hp-here .hp-group,.hp-body>.hp-group:first-child{margin-block-start:0}
.hp-list{display:flex;flex-direction:column}
.hp-item{display:flex;align-items:center;gap:8px;inline-size:100%;text-align:start;border:0;border-bottom:1px solid var(--border-soft);background:none;padding:8px 4px;cursor:pointer;color:var(--foreground);font-size:13px;border-radius:0}
.hp-item:hover{background:var(--row-hover)}
.hp-item:hover b{color:var(--primary)}
.hp-item>span{display:flex;flex-direction:column;gap:1px}
.hp-item .sub{font-size:12px}
.hp-back{display:inline-flex;align-items:center;gap:4px;margin-block-end:10px}
.hp-title{font-size:18px;color:var(--primary);margin:2px 0 4px}
.hp-when{color:var(--muted-foreground);margin:0 0 12px}
.hp-go{margin-block-start:14px}
.hp-article{font-size:14px;line-height:1.7}
.hp-article p{margin:0 0 8px}
.hp-article h4{font-size:14px;color:var(--primary);margin:16px 0 6px}
.hp-article ul{margin:4px 0 8px;padding-inline-start:18px}
.hp-article ul li{margin-block-end:2px}
.hp-article ol.steps{margin:0 0 8px;padding:0;list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:6px}
.hp-article ol.steps>li{counter-increment:st;position:relative;padding-inline-start:30px;min-block-size:24px}
.hp-article ol.steps>li::before{content:counter(st);position:absolute;inset-inline-start:0;top:2px;inline-size:22px;block-size:22px;border-radius:50%;background:var(--secondary);color:var(--secondary-foreground);font-size:12px;font-weight:700;display:grid;place-items:center;line-height:1}
.hp-article .tip,.hp-article .note{border-radius:var(--radius);padding:8px 10px;margin:10px 0;font-size:13px;line-height:1.6}
.hp-article .tip{background:var(--secondary);color:var(--secondary-foreground)}
.hp-article .note{background:var(--tint-money);border:1px solid var(--tint-money-line);color:var(--foreground)}
.hp-article .ui{font-weight:500;background:var(--muted);border:1px solid var(--input);border-radius:4px;padding:0 5px;font-size:13px;color:var(--tertiary-foreground);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hp-article h4 .ui{font-size:inherit}
@media print{.help-panel,.help-menu,.help-q{display:none!important}}

/* ---------- Drawer zones (design refresh stage 3) ---------- */
.dw-zone{margin-bottom:12px}
.dw-zone>.sec-head .sub{font-weight:400}
.dw-zone .pkg-row,.dw-zone .dw-row{border-bottom-color:var(--tint-form-line)}
.dw-zone .pkg-row:last-child,.dw-zone .dw-row:last-child{border-bottom:0}
.dw-zone .pkg-row{padding:7px 0}
.dw-zone .dw-fact,.dw-zone .dw-item{border-bottom-color:var(--tint-form-line)}
.dw-zone .dw-fact:last-child,.dw-zone .dw-item:last-child{border-bottom:0}
.money-zone .dw-lines td{border-bottom-color:var(--tint-money-line)}
.money-zone .table-wrap{border-color:var(--tint-money-line)}
.dw-count.warn{background:var(--st-deposit-bg);color:var(--st-deposit-fg)}
.next-step p{margin:0}
.next-step .row-actions{margin-top:6px}
.next-step .ic{flex:none;align-self:flex-start;margin-top:2px}

/* ---------- Modals and forms (design refresh stage 4, DESIGN §8.3) ---------- */
/* White header: the title, its context in gray, and the close button */
.modal-box>h2:first-of-type{margin:-20px -22px 16px;padding:16px 22px 14px;padding-inline-end:48px;border-bottom:1px solid var(--border);font-size:19px;display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap}
.m-ctx{font-size:13px;font-weight:400;color:var(--muted-foreground)}
/* Muted footer: a summary sentence, then the actions */
.modal-box>.modal-actions:last-child,.modal-box>form:last-child>.modal-actions:last-child{margin:16px -22px -20px!important;padding:12px 22px;background:var(--muted);border-top:1px solid var(--border);border-end-start-radius:var(--radius);border-end-end-radius:var(--radius);align-items:center}
.modal-box .dw-zone>.sec-body.form-grid{margin-top:0}
.modal-box form>.dw-zone,.modal-box>.dw-zone{margin-bottom:12px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.stat-grid>div{display:flex;flex-direction:column;gap:1px}
.stat-grid b{font-size:18px}
.money-zone .stat-grid.total-box b{font-size:16px}
.btn.danger.fill{background:var(--destructive);color:var(--destructive-foreground);border-color:var(--destructive)}
.btn.danger.fill:hover{background:var(--st-cancel-fg)}
.notice.has-ic{display:flex;gap:8px;align-items:flex-start;margin-top:0;margin-bottom:12px}
.notice.has-ic .ic{margin-top:2px}
.notice.info{background:var(--secondary);color:var(--foreground)}

/* Room form: the parts on the start side, the price summary fixed on the end side */
.modal-box .calc{gap:16px}
.modal-box .calc-form{padding:0;border:0}
.modal-box .calc-form>.dw-zone{margin-bottom:0}
.modal-box .calc-sum{position:sticky;top:12px;align-self:start;padding:14px;border:1px solid var(--tint-money-line);border-radius:var(--radius)}
.calc-sum-head{font-weight:700;color:var(--st-deposit-fg)}
.calc-sum .calc-fields{margin-top:0}
.calc-sum .total-box td{border-bottom-color:var(--tint-money-line)}
.calc-sum .total-box tr:last-child td{border-bottom:0}
.calc-sum .modal-actions{margin-top:0}
.calc-sum .notice{margin-top:0}
.calc-del{display:flex;justify-content:flex-end}
.calc-after{margin-top:14px}
.modal-box .bk-types{background:var(--card)}
/* Facilities as toggle chips: the checkboxes stay, drawn as pills (DESIGN §7 .fac-toggle) */
.fac-checks{gap:6px;padding-top:0}
.fac-checks label{position:relative;border:1px solid var(--input);background:var(--card);border-radius:999px;padding:4px 12px;font-size:12px;cursor:pointer}
.fac-checks label:has(input:checked){border-color:var(--primary);background:var(--secondary);color:var(--primary)!important;font-weight:600!important}
.fac-checks label:has(input:focus-visible){outline:2px solid var(--ring);outline-offset:1px}
.fac-checks input{position:absolute;opacity:0;pointer-events:none}
/* A form in two columns: the details, and the money on the end side */
.m-cols{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:12px;align-items:start}
.m-cols.one{grid-template-columns:minmax(0,1fr)}
.m-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.m-cols .dw-zone{margin-bottom:0}
@media (max-width:760px){.m-cols{grid-template-columns:minmax(0,1fr)}}
/* The footer's order (DESIGN §8.3): summary and delete on the start side, then close or cancel, and the one action at the very end */
.modal-box .modal-actions .m-sum,.modal-box .modal-actions .danger-link,.modal-box .modal-actions .btn.danger:not(.fill){order:-2}
.modal-box .modal-actions{justify-content:flex-end}
.modal-box .modal-actions .grow{order:-1}
.modal-box .modal-actions .btn.action,.modal-box .modal-actions .btn.danger.fill{order:9}

/* ---------- Customer card and settings (design refresh stage 5) ---------- */
/* A zone whose title is an h3 (customer card sections, setting cards): the tint laid over white, so it reads the same on the gray page */
.cc-sec,.h3-zone{background:linear-gradient(var(--tint-form),var(--tint-form)),var(--card);border:1px solid var(--tint-form-line);border-radius:var(--radius)}
.cc-sec{padding:0 12px 12px}
.cc-sec.money-zone,.h3-zone.money-zone{background:linear-gradient(var(--tint-money),var(--tint-money)),var(--card);border-color:var(--tint-money-line)}
.cc-sec>h3{margin:0 -12px 10px;padding:8px 12px;background:var(--tint-form-head);border-bottom:1px solid var(--tint-form-line);border-start-start-radius:var(--radius);border-start-end-radius:var(--radius);color:var(--primary);display:flex;align-items:center;gap:8px}
.cc-sec.money-zone>h3{background:none;border-bottom-color:var(--tint-money-line);color:var(--st-deposit-fg)}
.cc-sec :is(input,select,textarea){background:var(--card)}
.cc-sec .cc-bk{border-bottom-color:var(--tint-form-line)}
/* The log: a list with a line between the entries, not a box in a box */
.cc-sec .tl-item{background:none;border:0;border-bottom:1px solid var(--tint-form-line);border-radius:0;padding:8px 0}
.cc-sec .tl-item:last-child{border-bottom:0}
.cc-sec .stat-grid .sub+.sub{font-size:11.5px}
/* The settings form: a stack of zones on the gray page */
.zone-stack{display:flex;flex-direction:column;gap:12px}
.zone-stack>.dw-zone{margin-bottom:0}
.zone-stack>.form-sec{background:linear-gradient(var(--tint-form),var(--tint-form)),var(--card)}
.zone-stack>.money-zone{background:linear-gradient(var(--tint-money),var(--tint-money)),var(--card)}
.zone-stack .sec-body.form-grid{margin-top:0}
.zone-save{display:flex;justify-content:flex-end}
.card.cc-sec{padding:0 12px 12px}

/* ---------- Phone (design refresh stage 6) ---------- */
@media (max-width:760px){
  table.table-cards td.amt{text-align:start}
  table.table-cards td[data-label].amt,table.table-cards td:is([data-label="תאריכים"],[data-label="נוסעים"]){display:inline-block;width:auto;margin-inline-end:12px}
  .card:has(>.table-wrap>table.table-cards){background:none;border:0}
  .table-wrap:has(>table.table-cards){background:none;border:0;overflow:visible}
}

/* ---------- Room board, operations and reports (design refresh stage 7) ---------- */
.mv-head{background:var(--muted);color:var(--foreground);border-bottom:1px solid var(--border)}
.mv-head .mv-sum{color:var(--muted-foreground);opacity:1}
/* Separator between the groups of the operations tabs (flights and movement · hotel · suppliers) */
.sub-sep{flex:none;width:1px;align-self:center;height:18px;background:var(--border);margin-inline:6px}
/* Screenshots in the guide (also printed into its PDF: server/guide.js takes the .hp-article lines) */
.hp-article .hp-shot{margin:10px 0 14px;break-inside:avoid}
.hp-article .hp-shot img{display:block;max-width:100%;height:auto;border:1px solid var(--border);border-radius:var(--radius)}
.hp-article .hp-shot figcaption{font-size:12px;color:var(--muted-foreground);margin-top:4px}

/* Settings › backup: the imports from Kala, each with its undo */
.import-list{width:100%;margin-top:12px;border-collapse:collapse}
.import-list td{padding-block:8px;border-top:1px solid var(--border-soft);vertical-align:top}
.import-list td:last-child{text-align:end;white-space:nowrap;padding-inline-start:12px}

/* Operations › seating, and the docket's seating tab */
.st-hall{padding:0;margin-bottom:12px}
.st-hall h3{margin:0;padding:10px 14px}
.st-occ{display:flex;flex-direction:column}
.st-occ-row{display:grid;grid-template-columns:minmax(120px,1fr) 3fr;gap:10px;padding-block:8px;border-top:1px solid var(--border-soft)}
.st-occ-row:first-child{border-top:0}
.st-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;justify-content:space-between}
.st-line+.st-line{margin-top:4px}
.st-stale{display:inline-block;inline-size:7px;block-size:7px;border-radius:50%;background:var(--action);margin-inline-start:6px;vertical-align:middle}
.st-changes{margin:6px 0;padding-inline-start:18px}
/* The period's meals: a chip per night */
.ds-occ{padding-block:8px;border-top:1px solid var(--border-soft)}
.ds-occ:first-child{border-top:0}
.fl-card{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:10px}
.fl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.fl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 10px}
.fl-grid label{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--muted-foreground)}
.fl-grid :is(input,select){border:1px solid var(--input);border-radius:var(--radius);padding:7px 9px;font-size:14px;background:var(--card);color:var(--foreground)}
.fl-meet{margin-top:6px}
.fl-checks{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:8px}
.fl-checks .pub-check{margin:0}
.pax-price .pp-row{display:grid;grid-template-columns:38px 46px minmax(64px,1fr) 64px;gap:4px;align-items:center;margin-bottom:4px;font-size:13px}
.pax-price .pp-row input{min-inline-size:0}
.pax-price .pp-row b{text-align:end}
.pp-ages-edit{display:flex;gap:10px;margin-top:4px;font-size:13px}
.pp-ages-edit input{inline-size:56px}
.crew-doc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-bottom:4px;font-size:13px}
.crew-doc input[type=date]{border:1px solid var(--input);border-radius:var(--radius);padding:3px 6px}
.crew-mini{inline-size:100%;margin:6px 0;font-size:13px}
.crew-mini td{padding:4px 6px;border-bottom:1px solid var(--border-soft)}
.near-pick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-size:13px}
.near-pick select{border:1px solid var(--input);border-radius:var(--radius);padding:4px 8px;max-inline-size:340px}
.bar.moved{box-shadow:inset 0 0 0 2px var(--action)}
.g-floor{padding:6px 10px;font-size:12px;font-weight:700;color:var(--primary);background:var(--muted);border-top:1px solid var(--border)}
.g-label[data-roomlabel]{cursor:pointer}
.g-link{font-size:11px;font-weight:500;color:var(--muted-foreground)}
.bar.blk{background:var(--secondary);color:var(--muted-foreground);border:1px dashed var(--border);cursor:pointer}
.rtile.closed{background:var(--secondary);color:var(--muted-foreground);border-style:dashed}
.tr-desk{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px}
.tr-missing{padding:10px 14px;margin-bottom:12px}
.tr-missing summary{cursor:pointer}
.tr-missing .table-wrap{margin-top:8px}
.ts-commission{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13px}
.ts-commission input{inline-size:80px;border:1px solid var(--input);border-radius:var(--radius);padding:4px 8px}
.ts-airport{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px}
.ds-nights{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ds-night{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border:1px solid var(--border);border-radius:999px;font-size:12.5px;cursor:pointer;background:var(--card)}
.ds-night.on{border-color:var(--primary);background:var(--tint-form);color:var(--primary)}
.ds-night input{margin:0}
@media (max-width:640px){.st-occ-row{grid-template-columns:1fr}}

/* Settings › hotels: each period's actions on a line of their own under it */
tr.period-row td{border-bottom:0;padding-block-end:2px}
tr.period-acts td{padding-block-start:0}
tr.period-acts .row-actions{flex-wrap:wrap}
tr.period-row td{white-space:normal}