/* ==========================================================================
   App shell styles — نظام إدارة المحل
   --------------------------------------------------------------------------
   The application's JavaScript renders markup using its own long-standing class
   names (.panel, .card .val, .month-pill, .data-table …). Rewriting ~1,400 lines
   of working business logic just to rename CSS hooks would risk the calculations
   for zero user-visible gain, so this layer restyles those existing class names
   onto the design-system tokens in app.css instead.

   app.css remains the single source of truth for colour, type, spacing and
   motion. Nothing below introduces a new palette value.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Token aliases
   The app's inline styles reference --ink / --muted / --bad / --accent by name
   from inside JavaScript template strings. Aliasing them here keeps that code
   working verbatim while routing it through the monochrome system.
   -------------------------------------------------------------------------- */
:root{
  --ink:var(--text);
  --muted:var(--text-secondary);
  --line:var(--border);
  --panel:var(--surface);
  --accent:var(--gray-900);
  --bad:var(--error);
  --good:var(--success);
  --warn:var(--warning);
  --chart-bar:var(--gray-300);
}

/* --------------------------------------------------------------------------
   Utilities (retained — referenced from JS-generated markup)
   -------------------------------------------------------------------------- */
.w-full{width:100%;}
.w-90{width:90px;}
.mt-6{margin-top:var(--s-2);}
.mt-10{margin-top:var(--s-3);}
.mt-14{margin-top:var(--s-5);}
.mb-8{margin-bottom:var(--s-2);}
.mb-16{margin-bottom:var(--s-5)!important;}
.flex-gap-10{display:flex;align-items:center;gap:var(--s-3);}
.data-table{min-width:640px;}
.split-two{display:flex;gap:var(--s-5);margin-top:var(--s-4);flex-wrap:wrap;}
.split-two > div{flex:1;min-width:260px;}
.spark-bar{width:5px;background:var(--gray-200);border-radius:2px;}
hr{border:none;border-top:1px solid var(--border);margin:var(--s-6) 0;}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.app{display:none;min-height:100vh;}
.app.show{display:flex;}

.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--surface-subtle);
  /* inline-END is the seam with the content pane; under RTL inline-start is the
     viewport edge, which draws no visible separator at all. Matches app.css. */
  border-inline-end:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.bar-accent{display:none;} /* decorative bar removed — monochrome system */

.brand{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-5) var(--s-5) var(--s-4);}
.brand-mark{
  width:30px;height:30px;border-radius:var(--r-md);flex-shrink:0;
  background:var(--gray-900);color:var(--white);
  display:flex;align-items:center;justify-content:center;
}
.brand-mark svg{width:16px;height:16px;}
.brand h1{font-size:13.5px;margin:0 0 1px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--text);}
.brand span{font-size:11px;color:var(--text-secondary);line-height:1.45;display:block;}

.nav{padding:var(--s-2) var(--s-3);display:flex;flex-direction:column;gap:1px;}
.nav button{
  appearance:none;background:none;border:1px solid transparent;width:100%;
  display:block;text-align:start;cursor:pointer;
  font-family:var(--font);font-size:13.5px;font-weight:450;color:var(--text-secondary);
  padding:8px var(--s-3);border-radius:var(--r-sm);
  transition:background var(--t-fast),color var(--t-fast);
}
.nav button:hover{background:var(--surface-hover);color:var(--text);}
.nav button.active{background:var(--white);color:var(--text);font-weight:550;border-color:var(--border);box-shadow:var(--shadow-xs);}

.archive-box{padding:var(--s-4);background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);margin:var(--s-3) var(--s-4);}
.archive-box h4{margin:0 0 var(--s-3);font-size:11px;color:var(--text-tertiary);letter-spacing:.06em;font-weight:600;text-transform:uppercase;}
.year-block summary{cursor:pointer;font-size:12.5px;font-weight:600;padding:4px 2px;list-style:none;color:var(--text);}
.year-block summary::-webkit-details-marker{display:none;}
/* The gap belongs on the inline-END, between a pill and the next one along.
   Physical `margin-right` put it on the inline-START under RTL, so the row was
   indented from the edge it should hang off and flush against the edge it should
   clear. */
.month-pill{
  display:inline-block;margin-block:5px 0;margin-inline:0 5px;padding:4px 10px;font-size:11.5px;font-weight:500;
  border-radius:var(--r-full);background:var(--white);cursor:pointer;color:var(--text-secondary);
  border:1px solid var(--border);
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.month-pill:hover{color:var(--text);border-color:var(--border-strong);background:var(--surface-hover);}
.month-pill.current{background:var(--gray-900);color:var(--white);border-color:var(--gray-900);}

.sidebar-foot{margin-top:auto;padding:var(--s-4) var(--s-5);font-size:11.5px;color:var(--text-tertiary);border-top:1px solid var(--border);line-height:1.55;}

/* --------------------------------------------------------------------------
   Main column
   -------------------------------------------------------------------------- */
.main{flex:1;min-width:0;padding:var(--s-8);max-width:1320px;}
/* app.css styles the OTHER shell's topbar: a sticky bar spanning the viewport,
   with its own 32px inset and a rule under it. Here the bar is an ordinary row
   inside .main's padding, so both have to be undone — inherited, the inset put
   the page title 33px inside every row beneath it and drew a stray hairline
   across the page. The app.css rule stays: admin.html still needs it. */
.topbar{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-5);flex-wrap:wrap;gap:var(--s-3);
  padding:0;border-bottom:none;
}
.topbar-inner{position:relative;min-height:38px;}
/* Inline sides, not left/right: the 130px is room for the account button, which
   is pinned to the inline-END of the bar. */
.page-title{text-align:center;margin-block:0;margin-inline:var(--s-5) 130px;font-size:16px;font-weight:600;letter-spacing:-.015em;}
.topbar h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.015em;}
.toolbar-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-6);flex-wrap:wrap;gap:var(--s-3);}
.account-menu-anchor{position:absolute;inset-inline-end:0;top:0;}
.account-menu-box{
  display:none;position:absolute;top:calc(100% + 6px);inset-inline-end:0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);min-width:236px;z-index:50;padding:var(--s-2);
}
.account-menu-box .acct-head{margin:var(--s-2) var(--s-2) var(--s-3);}
.acct-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;
  border:none;background:transparent;border-radius:var(--r-sm);cursor:pointer;
  font:inherit;font-size:13px;font-weight:500;color:var(--text);
  text-align:start;text-decoration:none;transition:background .12s,color .12s;
}
.acct-item svg{width:16px;height:16px;flex-shrink:0;color:var(--text-secondary);}
.acct-item.hidden{display:none;}
.acct-item:hover{background:var(--surface-subtle);}
.acct-item:hover svg{color:var(--text);}
.acct-item:active{background:var(--primary-soft,#E7EFED);}
.acct-item-danger{color:var(--bad,#C2410C);}
.acct-item-danger svg{color:var(--bad,#C2410C);}
.acct-item-danger:hover{background:rgba(194,65,12,.07);}
.acct-item-danger:hover svg{color:var(--bad,#C2410C);}
.acct-item .acct-count{
  margin-inline-start:auto;min-width:19px;height:19px;border-radius:10px;
  background:var(--bad,#C2410C);color:#fff;font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
}
.acct-sep{height:1px;background:var(--border);margin:var(--s-2) var(--s-2);}

/* «عرض الخطط والأسعار» — the in-app plans view inside the modal. */
.plans-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-3);}
@media(max-width:640px){.plans-grid{grid-template-columns:1fr;}}
.plan-card{display:flex;flex-direction:column;gap:8px;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:var(--s-5);background:var(--surface);}
.plan-card.is-current{border-color:var(--primary,#315C5B);background:var(--primary-soft,#E7EFED);}
.plan-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14.5px;}
.plan-card-price strong{font-size:20px;letter-spacing:-.01em;}
.plan-card-price span{font-size:12px;color:var(--text-secondary);}
.plan-card-feats{list-style:none;margin:4px 0 6px;padding:0;display:flex;flex-direction:column;gap:6px;}
.plan-card-feats li{display:flex;gap:8px;font-size:12.5px;line-height:1.5;}
.plan-card-feats li span{flex:none;width:14px;text-align:center;color:var(--primary,#315C5B);font-weight:700;}
.plan-card-feats li.off{color:var(--text-tertiary);}
.plan-card-feats li.off span{color:var(--text-tertiary);font-weight:400;}
.plan-card .btn{margin-top:auto;}
.plan-price-old{font-size:12.5px;color:var(--text-tertiary);text-decoration:line-through;margin-inline-end:4px;}
.plan-offer-badge{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:var(--r-full);background:var(--primary,#315C5B);color:#fff;}
.plans-promo{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--border);}
.plans-promo label{font-size:12.5px;font-weight:600;display:block;margin-bottom:6px;}
.plans-promo-row{display:flex;gap:8px;}
.plans-promo-row input{max-width:220px;}
.plans-promo-ok{margin-top:10px;font-size:13px;background:var(--surface-subtle,#F4F7F6);border-radius:var(--r-md);padding:10px 12px;line-height:1.8;}
.month-badge{
  background:var(--surface);border:1px solid var(--border);
  padding:7px var(--s-4);border-radius:var(--r-full);
  font-weight:500;color:var(--text);font-size:12.5px;
}

#alertsArea{margin-bottom:var(--s-5);}
.alert{
  background:var(--error-bg);border:1px solid var(--error-border);
  color:#8F1C13;padding:11px var(--s-4);border-radius:var(--r-md);
  font-size:13px;line-height:1.55;margin-bottom:var(--s-2);
}
.alert.warn{background:var(--warning-bg);border-color:var(--warning-border);color:#8A3706;}

/* --------------------------------------------------------------------------
   Sections, panels, metric cards
   -------------------------------------------------------------------------- */
.section{display:none;}
.section.active{display:block;animation:fadeUp .24s var(--ease) both;}

/* Summary cards — the previous design's grid: a soft resting shadow and a
   lift on hover, single auto-fit row. */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:var(--s-4);margin-bottom:var(--s-6);}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-5);position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-strong);}
.card .lbl{font-size:12px;color:var(--text-secondary);margin-bottom:var(--s-2);font-weight:500;}
.card .val{font-size:25px;font-weight:600;color:var(--text);letter-spacing:-.025em;line-height:1.2;font-variant-numeric:tabular-nums;}
.card .sub{font-size:11.5px;color:var(--text-tertiary);margin-top:5px;}

.panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-6);margin-bottom:var(--s-5);
}
.panel h3{
  margin:0 0 var(--s-5);font-size:15px;color:var(--text);font-weight:600;letter-spacing:-.012em;
  border-bottom:1px solid var(--border);padding-bottom:var(--s-4);
}
.panel p.hint{font-size:12.5px;color:var(--text-secondary);margin:calc(-1 * var(--s-3)) 0 var(--s-5);line-height:1.65;}

/* Prominent Final-Net hero — the previous design's dark, inverted panel with a
   soft corner highlight and a large value. */
.panel.hero-panel{
  background:radial-gradient(130% 170% at 88% -25%,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 55%),var(--gray-900);
  border-color:var(--gray-900);color:var(--white);box-shadow:var(--shadow-md);padding:var(--s-6);
}
.panel.hero-panel h3{
  color:var(--white);opacity:.72;font-weight:500;border-bottom-color:rgba(255,255,255,.14);
}
.hero-value{font-size:40px;font-weight:600;color:var(--white);letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums;}

/* Collapsible panels */
details.panel > summary{list-style:none;display:flex;align-items:center;gap:var(--s-3);cursor:pointer;}
details.panel > summary::-webkit-details-marker{display:none;}
.collapsible-summary{cursor:pointer;font-weight:600;font-size:15px;letter-spacing:-.012em;}
/* Physical border sides on purpose: a chevron pointing *down* must point down in
   both directions, and logical (inline-end) sides flip under RTL into a sideways
   arrow. */
details.panel > summary::after{
  content:"";width:7px;height:7px;flex-shrink:0;margin-inline-start:auto;
  border-right:1.6px solid var(--text-tertiary);border-bottom:1.6px solid var(--text-tertiary);
  transform:rotate(45deg) translate(-1px,-1px);transition:transform var(--t);
}
details.panel[open] > summary::after{transform:rotate(-135deg) translate(-1px,-1px);}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
/* Most field rows in app.html are a <div class="inline"> inside a plain <form>,
   not the <form> itself — `form.inline` matched none of those seven and the
   add-employee, add-obligation, import and shop-settings rows fell back to a
   full-width ungapped stack.
   The row-gap is wider than the column gap on purpose: a date field's
   equivalent-date line hangs out of flow below its control (see .dp-echo-line)
   and this is the space it hangs into. */
.inline{display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-4);align-items:flex-end;margin-bottom:var(--s-5);}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12.5px;color:var(--text);font-weight:500;}
.field-error{display:none;color:var(--error);font-size:12px;margin-top:var(--s-2);}

/* LONGHANDS on purpose. app.css draws the select chevron with background-image
   and reserves its gutter with padding-inline-end; this rule has the same
   specificity but comes from the later file, so the `background` and `padding`
   SHORTHANDS were resetting both back to nothing and app.html's selects lost the
   arrow every other page draws. Longhands touch only what they name. */
input,select,textarea{
  background-color:var(--white);border:1px solid var(--border);color:var(--text);
  padding-block:0;padding-inline:var(--s-3);height:38px;border-radius:var(--r-sm);
  font-family:var(--font);font-size:13.5px;min-width:120px;
  transition:border-color var(--t),box-shadow var(--t);
}
/* padding-inline above still names the end side, so the gutter is restated here
   — later in the same file, so it wins on order. */
select{padding-inline-end:var(--s-8);}
textarea{height:auto;min-height:80px;padding:10px var(--s-3);}
input::placeholder,textarea::placeholder{color:var(--text-tertiary);}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gray-900);box-shadow:var(--focus-ring);}
input[type="file"]{height:auto;padding:8px var(--s-3);cursor:pointer;}

/* --------------------------------------------------------------------------
   Buttons — the app renders `button.btn`, `.btn.secondary`, `.btn.danger-mini`
   -------------------------------------------------------------------------- */
button.btn{
  appearance:none;-webkit-appearance:none;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  background:var(--gray-900);color:var(--white);border:1px solid var(--gray-900);
  padding:0 var(--s-4);height:38px;border-radius:var(--r-sm);
  font-family:var(--font);font-size:13.5px;font-weight:500;line-height:1;
  cursor:pointer;white-space:nowrap;
  transition:background var(--t),border-color var(--t),color var(--t),box-shadow var(--t);
}
button.btn:hover{background:var(--gray-800);border-color:var(--gray-800);}
button.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--gray-900);}
button.btn.hidden{display:none;}
button.btn.secondary{background:var(--white);color:var(--text);border-color:var(--border);box-shadow:var(--shadow-xs);}
button.btn.secondary:hover{background:var(--surface-hover);border-color:var(--border-strong);}
button.btn.danger-mini{
  appearance:none;background:none;border:none;box-shadow:none;
  color:var(--error);font-size:12.5px;font-weight:500;
  height:auto;padding:4px 8px;border-radius:var(--r-xs);cursor:pointer;
  transition:background var(--t-fast);
}
button.btn.danger-mini:hover{background:var(--error-bg);}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:13.5px;}
/* thead, not every th: a totals row labels its own row with a <th> too, and the
   column-header treatment turned that label into 11.5px uppercase secondary text
   sitting beside its own 13.5px bold figures. Its typography is restored with
   the rest of the totals row, further down. */
thead th{
  text-align:start;color:var(--text-secondary);font-weight:600;
  font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
  padding:10px var(--s-4);border-bottom:1px solid var(--border);
  background:var(--surface-subtle);white-space:nowrap;
}
td{padding:13px var(--s-4);border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr{transition:background var(--t-fast);}
tbody tr:hover td{background:var(--surface-hover);}
td.num{font-weight:550;font-variant-numeric:tabular-nums;}
.pos{color:var(--success);}
.neg{color:var(--error);}
.empty{color:var(--text-secondary);font-size:13.5px;padding:var(--s-12) var(--s-4);text-align:center;}

/* Fields inside a grid, not on a form.
   The 120px floor above is right for a standalone field and wrong six times over
   in a row of money columns: at 152px each the day editor measured 1167px inside
   a 918px panel and scrolled sideways on any laptop. In a table the cells state
   their own width instead. */
.data-table input,.data-table select,.data-table textarea{min-width:0;}
.data-table input[type="number"]{width:76px;}
/* No spinner steppers on the amount fields in Daily Entries and Purchases: the
   up/down arrows clutter the money grid, are never used for entry, and differ
   per browser. Hidden for WebKit/Blink (Chrome/Edge/Brave/Safari) via the
   spin-button pseudo-elements and for Gecko (Firefox) via appearance:textfield.
   Scoped to these two sections only. */
#sec-entries input[type="number"],
#sec-purchases input[type="number"]{-moz-appearance:textfield;appearance:textfield;}
#sec-entries input[type="number"]::-webkit-outer-spin-button,
#sec-entries input[type="number"]::-webkit-inner-spin-button,
#sec-purchases input[type="number"]::-webkit-outer-spin-button,
#sec-purchases input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
/* A select is the one field whose content dictates its size — stretched to the
   column it clipped "من الشبكة" to "من الشبك". Sized to its longest option it
   takes the room it needs and the note column gives it up. */
.data-table select{width:auto;}
/* Action buttons in a list row sit at list density, not form density. */
td.actions-cell .btn{height:30px;padding:0 var(--s-3);border-radius:var(--r-xs);vertical-align:middle;}
td.actions-cell .btn + .btn{margin-inline-start:var(--s-1);}

.progress{background:var(--gray-150);border-radius:var(--r-full);height:5px;overflow:hidden;margin-top:var(--s-2);}
.progress-bar{height:100%;background:var(--gray-900);border-radius:var(--r-full);transition:width .5s var(--ease);}

/* --------------------------------------------------------------------------
   Charts (inline SVG rendered by the app)
   -------------------------------------------------------------------------- */
.chart-wrap{overflow-x:auto;}
.chart-bar-label{font-size:10px;fill:var(--text-secondary);font-family:var(--font);}
.chart-bar-value{font-size:10px;fill:var(--text);font-family:var(--font);font-weight:600;}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.toast{
  position:fixed;bottom:var(--s-6);left:50%;
  transform:translateX(-50%) translateY(8px);
  background:var(--gray-900);color:var(--white);
  padding:11px var(--s-5);border-radius:var(--r-md);font-size:13px;
  box-shadow:var(--shadow-lg);z-index:1200;opacity:0;pointer-events:none;
  transition:opacity var(--t-slow),transform var(--t-slow);
  max-width:calc(100vw - 32px);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.toast-retry-btn{
  margin-right:var(--s-3);background:none;border:none;color:var(--white);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
  font-size:12.5px;font-family:var(--font);
}

/* --------------------------------------------------------------------------
   Welcome / unlock screen
   -------------------------------------------------------------------------- */
.lock-overlay{position:fixed;inset:0;background:var(--surface-subtle);z-index:2000;margin:0;padding:0;}
.lock-box{
  position:fixed;background:var(--surface);padding:var(--s-8);
  border:1px solid var(--border);border-radius:var(--r-xl);
  width:360px;max-width:88vw;box-sizing:border-box;text-align:center;
  box-shadow:var(--shadow-md);
}
.lock-box-wide{width:400px;}
.lock-box h2{margin:0 0 6px;font-size:19px;font-weight:600;letter-spacing:-.02em;}
.lock-box p{color:var(--text-secondary);font-size:13px;margin:0 0 var(--s-6);line-height:1.65;}
.lock-box input{width:100%;margin-bottom:var(--s-3);text-align:center;}
.lock-box button{width:100%;}
#lockError{color:var(--error);font-size:12px;margin-top:var(--s-3);display:none;}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(17,17,17,.40);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;z-index:3000;margin:0;padding:var(--s-5);
}
.modal-box{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--s-6);width:400px;max-width:90vw;box-shadow:var(--shadow-xl);
  animation:scaleIn .2s var(--ease) both;
}
.modal-box.modal-box-form{width:600px;max-height:85vh;overflow-y:auto;text-align:right;}
.modal-box.modal-box-form .field{margin-bottom:var(--s-4);}
.modal-box h3{margin:0 0 var(--s-3);font-size:16px;font-weight:600;letter-spacing:-.015em;}
.modal-box h4{font-size:14px;font-weight:600;margin:0 0 var(--s-3);}
.modal-box #modalMessage{margin:0 0 var(--s-5);font-size:13.5px;color:var(--text-secondary);line-height:1.65;}
.modal-box .modal-buttons{display:flex;gap:var(--s-2);justify-content:flex-end;flex-wrap:wrap;}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  .app.show{flex-direction:column;}
  .sidebar{width:100%;flex-direction:row;flex-wrap:wrap;position:static;height:auto;overflow:visible;border-inline-end:none;border-bottom:1px solid var(--border);}
  .brand{width:100%;}
  .nav{flex-direction:row;flex-wrap:wrap;width:100%;gap:var(--s-1);}
  .nav button{width:auto;}
  .archive-box{width:calc(100% - var(--s-8));}
  .main{padding:var(--s-5);}
  .topbar-inner{gap:var(--s-3);}
  .page-title{order:1;flex:1;margin:0;text-align:start;}
  /* relative, not static: the dropdown is absolute against its nearest POSITIONED
     ancestor, and static handed that job back to .topbar-inner — the menu then
     opened from the bar's edge instead of from the button that owns it. */
  .account-menu-anchor{position:relative;order:2;}
  .panel{padding:var(--s-5);}
}

/* --------------------------------------------------------------------------
   Print — reports must render on white regardless of screen styling
   -------------------------------------------------------------------------- */
#printArea{display:none;}
body.printing > .app{display:none!important;}
body.printing{background:#fff;}
body.printing #printArea{display:block;color:#111;background:#fff;padding:var(--s-5);font-family:var(--font);}
#printArea h1{font-size:19px;margin-bottom:2px;color:#111;font-weight:600;}
#printArea h2{font-size:14px;margin:var(--s-6) 0 var(--s-2);border-bottom:1px solid #DDD;padding-bottom:6px;color:#111;font-weight:600;}
#printArea table{width:100%;border-collapse:collapse;font-size:11.5px;min-width:0;}
#printArea th,#printArea td{border:1px solid #DDD;padding:6px 8px;text-align:right;color:#111;background:#fff;text-transform:none;letter-spacing:0;}
#printArea .p-grid{display:flex;gap:var(--s-3);flex-wrap:wrap;margin:var(--s-3) 0;}
#printArea .p-card{border:1px solid #DDD;border-radius:var(--r-sm);padding:10px var(--s-3);min-width:140px;}
#printArea .p-card .l{font-size:11px;color:#666;}
#printArea .p-card .v{font-size:16px;font-weight:600;color:#111;}
#printArea .table-scroll{overflow:visible;}

/* النماذج الجاهزة — a document, not a report.
   The body is plain text authored by the shop owner, so <pre> is what preserves
   their line breaks and blank lines exactly as typed. white-space:pre-wrap
   keeps that while still wrapping a long sentence inside the page width, and
   the serif-free stack stays on IBM Plex Sans Arabic like the rest of the app. */
#printArea .form-doc-print pre{
  white-space:pre-wrap;
  word-break:break-word;
  font-family:var(--font);
  font-size:13.5px;
  line-height:2.1;
  color:#111;
  margin:var(--s-4) 0 0;
  text-align:right;
  direction:rtl;
}
#printArea .form-doc-print h1{
  text-align:center;
  font-size:18px;
  margin-bottom:var(--s-4);
  padding-bottom:var(--s-3);
  border-bottom:1px solid #DDD;
}

/* The editable preview. Monospace would break Arabic shaping, so it keeps the
   app font and just gets document-like line spacing. */
textarea.form-doc{
  min-height:360px;
  line-height:2.1;
  font-family:var(--font);
  font-size:13.5px;
  white-space:pre-wrap;
}

/* --------------------------------------------------------------------------
   منتقي التاريخ — the one date picker (assets/js/datepicker.js)
   Monochrome only: the design system's greys, plus the status hues nowhere.
   -------------------------------------------------------------------------- */
/* The two halves join into ONE control, so each keeps its radius on the OUTER
   edge and loses it on the shared edge, and only one border is drawn between
   them. The DOM order is input-then-button, and this is a flex row inside a
   dir=rtl document, so the INPUT sits at the inline-start (right) edge and the
   BUTTON at the inline-end (left) edge.
   Both rules previously named the opposite sides: the button was rounded on the
   edge touching the input and had its OUTER border removed, so it rendered as an
   unclosed box with a notch between the two halves. */
.dp-field{position:relative;}
.dp-row{display:flex;align-items:stretch;gap:0;}
/* The carrier is a REAL text input so required fires and the owner can type.
   Selector is `input.dp-input`, not `.dp-input`: the base field styling is
   `.input, input[type="text"], …{border-radius:var(--r-sm)}`, and that
   attribute selector out-specifies a lone class, so the corner rules here were
   being discarded entirely and the input stayed rounded on all four corners.
   Matching its specificity and winning on order is enough.
   NOTE the input carries dir="ltr" (it holds an ISO date), so ITS inline-start
   is the LEFT — the opposite of the RTL row around it. The button sits on the
   left, so the shared edge is this element's inline-START and the property
   names below are the ones already here; only the specificity was wrong. */
input.dp-input{
  flex:1;min-width:0!important;border-start-start-radius:0;border-end-start-radius:0;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  /* Same physical side, and for the same reason, as `.cell-ltr`: dir stays ltr
     so the digits keep their order, and `right` is where this RTL column starts,
     so the value lines up with every other field in the row instead of hanging
     off the far end of its own box. */
  text-align:right;
}
.dp-open{
  flex:none;width:38px;display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--text-secondary);cursor:pointer;
  border:1px solid var(--border);border-inline-start:0;
  border-start-end-radius:var(--r-md);border-end-end-radius:var(--r-md);
}
.dp-open:hover{background:var(--surface-hover);color:var(--text);}
.dp-open svg{width:16px;height:16px;}
/* The equivalent-date line hangs BELOW the control rather than sitting inside
   it. In flow it made the wrapping .field 17px taller than its neighbours, and
   `.inline{align-items:flex-end}` bottom-aligns the fields — so the one date
   input in a row floated 17px above every input beside it. Out of flow the field
   is exactly as tall as the control; min-height still holds the line open, so
   nothing shifts the moment the equivalent date appears while typing, and the
   row below reserves the space with its own row-gap.
   pointer-events:none because the line now overlaps that gap. */
.dp-echo-line{
  position:absolute;top:100%;inset-inline:0;pointer-events:none;
  font-size:11px;color:var(--text-secondary);margin-top:3px;min-height:14px;line-height:1.3;
}
.dp-echo-line.is-bad{color:var(--error);}
/* In the daily-entries editor the date field sits directly above the grid, so
   the absolute, hanging equivalent-date line overlapped the table header. There
   (only) it is put back in normal flow so it reserves its own height and the
   table starts below it; every other field keeps the absolute line for uniform
   row heights. Verified desktop / tablet / mobile RTL. */
.field--daypicker .dp-echo-line{position:static;margin-top:4px;pointer-events:auto;}

.dp-pop{
  /* ABOVE .modal-overlay (z-index 3000). The popup is parented to <body>,
     so it is a SIBLING of the overlay in the root stacking context — at 200 it
     rendered BEHIND the dim layer for the five date fields that live inside
     modals, and the click meant for it landed on the overlay instead. */
  position:absolute;z-index:3200;width:288px;
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-md);box-shadow:0 10px 30px rgba(17,17,17,.13);
  padding:10px;font-family:var(--font);
  /* A six-week grid is ~400px tall — taller than the room under a field halfway
     down a laptop window, which is where the اليوم / مسح buttons were being cut
     off. position() narrows this to the space actually free; the ceiling is the
     backstop. overscroll-behavior keeps a flick inside the calendar from
     scrolling the modal underneath it out from under the field. */
  max-height:calc(100vh - 16px);overflow-y:auto;overscroll-behavior:contain;
}
.dp-head{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;}
.dp-cal-switch{display:flex;border:1px solid var(--border);border-radius:var(--r-full);overflow:hidden;}
.dp-cal{
  flex:1;padding:5px 0;font-size:12px;font-family:var(--font);
  background:var(--surface);color:var(--text-secondary);border:0;cursor:pointer;
}
.dp-cal.on{background:var(--gray-900);color:var(--text-inverse);font-weight:600;}
.dp-nav{display:flex;align-items:center;gap:4px;}
.dp-arrow{
  width:30px;height:30px;flex:none;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.dp-arrow svg{width:15px;height:15px;}
.dp-arrow:hover{background:var(--surface-hover);}
.dp-title{
  flex:1;height:30px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);font-family:var(--font);font-size:13px;
  font-weight:600;cursor:pointer;
}
.dp-title:hover{background:var(--surface-hover);}

.dp-week,.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.dp-wd{text-align:center;font-size:10.5px;color:var(--text-tertiary);padding:3px 0;}
.dp-cell{
  height:32px;border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--text);font-family:var(--font);font-size:13px;cursor:pointer;
}
.dp-cell:hover{background:var(--surface-hover);}
.dp-blank{cursor:default;}
.dp-cell.is-today{box-shadow:inset 0 0 0 1px var(--border-strong);}
.dp-cell.is-sel{background:var(--gray-900);color:var(--text-inverse);font-weight:600;}
/* A date that already has saved daily entries — not selectable from the picker;
   it is edited from the Previous Days list instead. */
.dp-cell.is-disabled,.dp-cell:disabled{color:var(--text-tertiary);opacity:.4;cursor:not-allowed;background:transparent;}
.dp-cell.is-disabled:hover,.dp-cell:disabled:hover{background:transparent;}

.dp-list{display:grid;gap:4px;padding:2px 0;}
.dp-list-3{grid-template-columns:repeat(3,1fr);}
.dp-opt{
  padding:8px 4px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);font-family:var(--font);font-size:12.5px;cursor:pointer;
}
.dp-opt:hover{background:var(--surface-hover);}
.dp-opt.is-sel{background:var(--gray-900);color:var(--text-inverse);border-color:var(--gray-900);font-weight:600;}

.dp-foot{margin-top:9px;padding-top:8px;border-top:1px solid var(--border);}
.dp-echo{font-size:11.5px;color:var(--text-secondary);margin-bottom:7px;text-align:center;line-height:1.5;}
.dp-actions{display:flex;gap:6px;}
.dp-btn{
  flex:1;padding:6px 0;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);font-family:var(--font);font-size:12px;cursor:pointer;
}
.dp-btn:hover{background:var(--surface-hover);}

/* Day list: a whole day is one clickable row (القيود اليومية). */
tr.row-link{cursor:pointer;}
tr.row-link:hover>td{background:var(--surface-hover);}
/* The previous day currently loaded in the editor above (accent on the RTL
   start edge, i.e. the right). */
tr.row-link.is-active>td{background:var(--surface-hover);box-shadow:inset -2px 0 0 var(--gray-900);}
.cell-strong{font-weight:600;}
.cell-sub{font-size:11px;color:var(--text-secondary);margin-top:1px;}
.data-table tfoot .totals-row th,
.data-table tfoot .totals-row td{
  border-top:1.5px solid var(--border-strong);font-weight:600;background:var(--surface-subtle);
}
/* The row label is a <th> but it names a ROW, not a column, so it carries the
   body's type at the body's density — level with the figures beside it. */
.data-table tfoot .totals-row th{
  padding:13px var(--s-4);text-align:start;white-space:nowrap;
  font-size:13.5px;letter-spacing:normal;text-transform:none;color:var(--text);
}
.totals-strip{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-3);}
.totals-cell{
  flex:1;min-width:140px;border:1px solid var(--border);border-radius:var(--r-md);
  padding:9px var(--s-4);background:var(--surface-subtle);
}
.totals-cell.strong{border-color:var(--border-strong);background:var(--surface);}
.totals-cell .l{display:block;font-size:11px;color:var(--text-secondary);}
.totals-cell .v{display:block;font-size:16px;font-weight:600;color:var(--text);margin-top:2px;}

/* Account menu — who is signed in, then which shop. */
.acct-head{margin-bottom:var(--s-3);line-height:1.5;}
.acct-name{font-size:13px;font-weight:600;color:var(--text);}
.acct-email{font-size:11.5px;color:var(--text-secondary);direction:ltr;text-align:right;}
.acct-shop{font-size:11.5px;color:var(--text-tertiary);margin-top:3px;}
.acct-warn{font-size:11px;color:var(--warning);margin-top:4px;}

@media(max-width:640px){
  .hero-value{font-size:34px;}          /* matches the previous design's mobile size */
}

/* ==========================================================================
   Subscription view (account menu → «الاشتراك»). Read-only; every value comes
   from GET /subscription.
   ========================================================================== */
.sub-loading{display:flex;align-items:center;gap:var(--s-2);color:var(--text-secondary);padding:var(--s-4) 0;font-size:13px;}
.spinner-dot{width:14px;height:14px;border:2px solid var(--border-strong);border-top-color:var(--gray-900);border-radius:50%;display:inline-block;animation:spin .7s linear infinite;}

.sub-view{display:flex;flex-direction:column;gap:var(--s-5);}
.sub-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);}
.sub-plan-name{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.02em;}
.sub-price{font-size:13px;color:var(--text-secondary);margin-top:2px;font-variant-numeric:tabular-nums;}

.sub-dates{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);
  background:var(--surface-subtle);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);
}
.sub-date{display:flex;flex-direction:column;gap:3px;}
.sub-date .lbl{font-size:11px;color:var(--text-tertiary);}
.sub-date .val{font-size:13px;font-weight:600;color:var(--text);}

.sub-section{display:flex;flex-direction:column;gap:var(--s-2);}
.sub-h{margin:0;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary);}

.sub-meter{margin-bottom:var(--s-2);}
.sub-meter-head{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-secondary);margin-bottom:5px;}
.sub-meter-head .num{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
.progress-bar.is-full{background:var(--error);}

.sub-feats{display:flex;flex-direction:column;gap:var(--s-1);}
.sub-feat{
  display:flex;align-items:center;gap:var(--s-2);
  padding:9px var(--s-3);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);
}
.sub-feat-ico{width:18px;text-align:center;flex-shrink:0;}
.sub-feat.on .sub-feat-ico{color:var(--success);}
.sub-feat.off{opacity:.72;}
.sub-feat.off .sub-feat-name{color:var(--text-secondary);}
.sub-feat-name{flex:1;font-size:13px;color:var(--text);}
.sub-feat-state{font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums;}

/* One balanced, centered CTA group: every action shares the SAME box —
   equal flex basis (so equal widths regardless of label length), one height,
   one padding, one type size — and the pair stacks to equal full-width rows
   only when the modal is too narrow for one row. */
.sub-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3);margin-top:var(--s-3);}
.sub-actions .sub-cta{
  flex:0 1 220px;min-width:170px;height:40px;padding:0 var(--s-4);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:550;border-radius:var(--r-md);
  text-decoration:none;white-space:nowrap;
}
@media(max-width:480px){
  .sub-actions .sub-cta{flex:1 1 100%;}
}
.mt-0{margin-top:0;}

@media(max-width:600px){
  .sub-dates{grid-template-columns:1fr;gap:var(--s-2);}
}

/* ==========================================================================
   REDESIGN v2 — CUSTOMER shell (appended last; overrides by source order)
   Matches app.css v2: neutral canvas + white rail, bold solid-dark active nav,
   start-aligned bold page title, larger stat numbers, softly-elevated panels.
   ========================================================================== */

/* White rail on the neutral canvas; content shows the ground through .main */
.sidebar{background:var(--white);border-inline-end:1px solid var(--border);}
.main{background:transparent;max-width:1340px;padding:var(--s-8) var(--s-8) var(--s-16);}
.brand{padding:var(--s-6) var(--s-5) var(--s-5);}
.brand-mark{width:34px;height:34px;border-radius:var(--r-lg);}

/* Navigation — roomier items, bold solid-dark active state */
.nav{padding:var(--s-3) var(--s-3);gap:2px;}
.nav button{border-radius:var(--r-md);padding:10px var(--s-3);font-size:13.5px;font-weight:500;}
.nav button:hover{background:var(--gray-100);color:var(--text);border-color:transparent;}
.nav button.active{background:var(--gray-900);color:var(--white);border-color:var(--gray-900);box-shadow:var(--shadow-sm);font-weight:600;}
#tgNavBadge{background:var(--white)!important;color:var(--gray-900)!important;}

/* Page header — start-aligned, bold, prominent */
.page-title{text-align:start;margin-inline:0 132px;font-size:23px;font-weight:700;letter-spacing:-.022em;}
.topbar{margin-bottom:var(--s-6);}

/* Stat cards — bigger tabular number, quiet uppercase label */
.grid{gap:var(--s-4);}
.card{border-radius:var(--r-xl);box-shadow:var(--shadow-sm);padding:var(--s-5) var(--s-5);}
.card .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);font-weight:600;}
.card .val{font-size:29px;letter-spacing:-.03em;}

/* Panels — larger radius + soft lift; heading a step up */
.panel{border-radius:var(--r-xl);box-shadow:var(--shadow-sm);padding:var(--s-6);}
.panel h3{font-size:16px;}
.panel.hero-panel{border-radius:var(--r-xl);box-shadow:var(--shadow-md);}

/* Archive box separates within the white rail */
.archive-box{background:var(--surface-subtle);}

/* Customer modals — darker scrim + blur, larger radius */
.modal-overlay{background:rgba(17,17,17,.44);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.modal-box{border-radius:var(--r-xl);box-shadow:var(--shadow-xl);}

/* Month badge + account button a touch larger for touch */
.month-badge{padding:8px var(--s-4);}

/* Mobile: the rail becomes a full-width top bar; nav scrolls horizontally as a
   clean row of pills instead of wrapping into a tall block */
@media(max-width:860px){
  .app.show{flex-direction:column;}
  .sidebar{width:100%;height:auto;position:static;border-inline-end:none;border-bottom:1px solid var(--border);}
  .brand{padding:var(--s-4) var(--s-4) var(--s-3);}
  .nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:0 var(--s-4) var(--s-4);-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .nav::-webkit-scrollbar{display:none;}
  .nav button{width:auto;white-space:nowrap;flex:0 0 auto;}
  .archive-box{display:none;}
  .sidebar-foot{display:none;}
  .main{padding:var(--s-5) var(--s-4) var(--s-12);}
  .page-title{margin-inline:0 0;font-size:20px;}
}

/* --------------------------------------------------------------------------
   Redesign v3 — grouped sidebar navigation, tab bars, table toolbar,
   permission groups. Appended so existing rules keep their cascade order.
   -------------------------------------------------------------------------- */
.nav{gap:0;}
.nav-group{margin-bottom:var(--s-3);display:flex;flex-direction:column;gap:1px;}
.nav-group-label{
  font-size:10.5px;font-weight:650;letter-spacing:.08em;color:var(--text-tertiary);
  padding:var(--s-2) var(--s-3) var(--s-1);
}
.nav button{display:flex;align-items:center;gap:10px;}
.nav button svg{width:16px;height:16px;flex:none;opacity:.75;}
.nav button.active{
  background:var(--primary-soft);color:var(--primary);font-weight:600;
  border-color:var(--primary-soft-border);box-shadow:none;
}
.nav button.active svg{opacity:1;}

/* Tab bar — one component for dashboard, reports, and anything else. */
.tabs{
  display:inline-flex;gap:2px;padding:3px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);flex-wrap:wrap;
}
.tabs button{
  height:34px;padding:0 16px;border:none;background:transparent;cursor:pointer;
  font:inherit;font-size:13px;font-weight:550;color:var(--text-secondary);
  border-radius:var(--r-md);transition:background var(--t-fast),color var(--t-fast);
}
.tabs button:hover{color:var(--text);background:var(--surface-hover);}
.tabs button.active{background:var(--primary-soft);color:var(--primary);font-weight:650;}
.mb-12{margin-bottom:12px;}

/* Table toolbar — search + meta above any .data-table. */
.tbl-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;flex-wrap:wrap;}
.tbl-search{
  width:240px;max-width:100%;height:34px;padding:0 12px;font:inherit;font-size:13px;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text);
}
.tbl-search:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus-ring);}
.tbl-count{font-size:12px;color:var(--text-tertiary);}
.data-table th[data-sort]{cursor:pointer;user-select:none;}
.data-table th[data-sort]:hover{color:var(--primary);}
.data-table th[data-sort]::after{content:'↕';margin-inline-start:5px;font-size:10px;opacity:.45;}
.data-table th[data-sort="asc"]::after{content:'↑';opacity:1;}
.data-table th[data-sort="desc"]::after{content:'↓';opacity:1;}

/* Permission groups in the cashier modal. */
.perm-group{margin-bottom:var(--s-4);}
.perm-group-title{
  margin:0 0 var(--s-2);font-size:11px;font-weight:650;letter-spacing:.07em;
  color:var(--text-tertiary);
}

/* Hero panel sits on the deep primary — the figure stays white on it. */
.hero-panel .hero-value{color:#fff;}

/* --------------------------------------------------------------------------
   Density pass (visual polish only): tighter rhythm, denser cards and tables,
   compact hero, hierarchical sidebar, alert cards. Appended overrides.
   -------------------------------------------------------------------------- */
.main{padding:var(--s-6) var(--s-6) var(--s-8);}
.topbar{margin-bottom:var(--s-3);}
.toolbar-row{margin-bottom:var(--s-4);}
#alertsArea{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-4);}
#alertsArea:empty{margin-bottom:0;}
.alert{margin:0;flex:1 1 250px;max-width:420px;display:flex;align-items:flex-start;gap:8px;padding:8px 12px;font-size:12.5px;line-height:1.5;border-radius:var(--r-md);}
.alert::before{content:"⚠";flex:none;font-size:13px;line-height:1.4;}

.grid{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:var(--s-3);margin-bottom:var(--s-4);}
.card{padding:var(--s-4);}
.card .lbl{margin-bottom:4px;}
.card .val{font-size:21px;}
.card:hover{transform:none;box-shadow:var(--shadow-sm);}
.panel{padding:var(--s-5);margin-bottom:var(--s-4);}
.panel h3{margin-bottom:var(--s-4);padding-bottom:var(--s-3);}

/* Hero: one compact row, still the loudest element on the page. */
.panel.hero-panel{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;padding:var(--s-4) var(--s-5);}
.panel.hero-panel h3{margin:0;padding:0;border:none;font-size:13.5px;}
.hero-value{font-size:28px;}

/* KPI hierarchy: four primary figures, then a denser secondary band. */
.grid.kpi-primary{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:var(--s-3);}
.grid.kpi-secondary{grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:var(--s-2);}
.kpi-secondary .card{padding:10px var(--s-3);box-shadow:none;}
.kpi-secondary .card .lbl{font-size:11px;margin-bottom:2px;}
.kpi-secondary .card .val{font-size:15.5px;}

/* Tabs: tighter, sitting right under the title row. */
.tabs{padding:2px;gap:2px;}
.tabs button{height:30px;padding:0 14px;font-size:12.5px;}
.mb-12{margin-bottom:10px;}

/* Sidebar hierarchy: labels as parents, children indented, active unmistakable. */
.brand{padding:var(--s-4) var(--s-5) var(--s-3);}
.nav-group{margin-bottom:var(--s-2);}
.nav-group-label{padding:var(--s-1) var(--s-3) 2px;}
.nav .nav-group button{padding:6px var(--s-3) 6px;padding-inline-start:14px;font-size:13px;}
.nav button.active{position:relative;}
.nav button.active::before{content:"";position:absolute;inset-inline-start:0;top:6px;bottom:6px;width:3px;border-radius:var(--r-full);background:var(--primary);}
.archive-box{background:transparent;border:none;border-radius:0;padding:var(--s-2) var(--s-4);margin:0 0 var(--s-2);}
.month-pill{padding:3px 9px;font-size:11px;margin-block:4px 0;}
.year-block summary{font-size:12px;}
.sidebar-foot{padding:var(--s-3) var(--s-5);font-size:11px;}

/* Unified control + table density — selects match inputs (40px), so mixed
   forms (e.g. المورد next to date/amount fields) line up exactly. */
input,select,textarea{height:40px;font-size:13px;}
textarea{height:auto;}
button.btn{height:34px;font-size:13px;}
.inline{gap:var(--s-4) var(--s-3);margin-bottom:var(--s-4);}
thead th{padding:8px var(--s-4);}
td{padding:10px var(--s-4);}
.empty{padding:var(--s-8) var(--s-4);}
.tbl-search{height:32px;}
.tbl-toolbar{margin-bottom:8px;}
.month-badge{padding:5px var(--s-3);font-size:12px;}

/* Compact month mini-chart (display only). */
.mini-chart-wrap{overflow-x:auto;}
.mini-chart-wrap svg{width:100%;max-width:900px;height:auto;display:block;}
/* The negative-top hint is designed to tuck under a bordered h3; after a plain
   h4 (report subsections) it climbed onto the heading itself. */
.panel h4 + p.hint{margin-top:2px;}
.panel h4{margin:var(--s-5) 0 var(--s-2);font-size:13.5px;}

/* Full-width shell + accordion sidebar groups (this phase). */
.main{max-width:none;}
.nav-group-toggle{
  appearance:none;border:none;background:none;width:100%;cursor:pointer;text-align:start;
  font-family:var(--font);font-size:10.5px;font-weight:650;letter-spacing:.08em;
  color:var(--text-tertiary);padding:var(--s-1) var(--s-3) 2px;display:flex;align-items:center;gap:6px;
}
.nav-group-toggle::after{content:"";width:6px;height:6px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin-inline-start:auto;transition:transform var(--t-fast);}
.nav-group.collapsed .nav-group-toggle::after{transform:rotate(135deg);}
.nav-group.collapsed .nav-kids{display:none;}
.nav-kids{display:flex;flex-direction:column;gap:1px;}

/* Obligation notices in the teal system (yellow retired for this family). */
.alert.info{background:var(--primary-soft);border-color:var(--primary-soft-border);color:var(--primary);}
.alert.info::before{content:"\2139";font-weight:700;}


/* ==========================================================================
   MOBILE REFINEMENT (final block — overrides earlier breakpoint rules by
   cascade order). The phone gets an intentional layout: a slide-in drawer
   for the grouped navigation (the old wrapped-row nav consumed ~560px of
   every screen and clipped its own labels), a compact sticky header row,
   full-width form fields, comfortable touch targets, and modals that fit.
   ========================================================================== */
.nav-toggle{display:none;}
.nav-backdrop{display:none;}

@media(max-width:900px){
  /* ---- top bar: [منيو] العنوان … الحساب ---- */
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;flex:none;order:0;cursor:pointer;
    border:1px solid var(--border);border-radius:var(--r-md);
    background:var(--surface);color:var(--text);box-shadow:var(--shadow-xs);
  }
  .nav-toggle svg{width:18px;height:18px;}
  .topbar-inner{display:flex;align-items:center;gap:var(--s-3);}
  .page-title{order:1;flex:1;margin:0;text-align:start;font-size:17px;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .account-menu-anchor{order:2;position:relative;}

  /* ---- the sidebar becomes a drawer (RTL: slides in from the right) ---- */
  .app.show{flex-direction:column;}
  .sidebar{
    position:fixed;top:0;bottom:0;inset-inline-start:0;
    width:min(300px,85vw);height:100dvh;z-index:80;
    display:flex;flex-direction:column;overflow-y:auto;
    background:var(--white);border-inline-end:1px solid var(--border);border-bottom:none;
    /* the old stacked-bar rules set row+wrap; a wrapped column drawer spills
       its children into side columns outside the panel — pin it straight */
    flex-wrap:nowrap;
    transform:translateX(100%);transition:transform .22s var(--ease);
  }
  [dir="rtl"] .sidebar{transform:translateX(100%);}
  .sidebar.open{transform:none;box-shadow:0 0 48px rgba(10,20,18,.3);}
  body.nav-locked{overflow:hidden;}
  .nav-backdrop{position:fixed;inset:0;z-index:70;background:rgba(12,20,19,.45);
    opacity:0;pointer-events:none;transition:opacity .2s var(--ease);}
  .nav-backdrop.show{display:block;opacity:1;pointer-events:auto;}

  /* inside the drawer the nav is a COLUMN again — full labels, roomy targets */
  .brand{width:auto;padding:var(--s-5) var(--s-5) var(--s-3);}
  .nav{flex-direction:column;flex-wrap:nowrap;overflow:visible;width:100%;
    padding:var(--s-1) var(--s-3) var(--s-3);gap:0;}
  .nav-group{width:100%;}
  .nav button{width:100%;flex:none;white-space:normal;min-height:42px;padding-block:10px;}
  /* the month archive returns on mobile — it was unreachable before */
  .archive-box{display:block;width:auto;margin:0 var(--s-4) var(--s-4);}
  .sidebar-foot{display:block;margin-top:auto;}

  /* ---- content rhythm ---- */
  .main{padding:var(--s-4) var(--s-4) var(--s-12);}
  .toolbar-row{gap:var(--s-2);margin-bottom:var(--s-4);}
  .panel{padding:var(--s-4);}
  .grid{gap:var(--s-2);}
  .card{padding:var(--s-4);}
  .card .val{font-size:22px;}
  .tabs{width:100%;}
  .tabs button{height:38px;flex:1;}
  .tbl-search{width:100%;height:38px;}
}

@media(max-width:600px){
  /* forms: one comfortable column, no squeezed side-by-side minimums */
  .inline{gap:var(--s-2) var(--s-3);}
  .inline .field{flex:1 1 100%;width:100%;min-width:0!important;max-width:none!important;}
  .inline .field input,.inline .field select{width:100%;}
  .inline > .btn,.inline > button[type="submit"]{width:100%;}
  /* modals hug the phone with their own scroll */
  .modal-box,.modal-box.modal-box-form{width:calc(100vw - 20px);max-width:calc(100vw - 20px);
    max-height:92dvh;overflow-y:auto;padding:var(--s-5);}
  .plans-grid{grid-template-columns:1fr;}
  .totals-strip{flex-wrap:wrap;}
  /* stat cards: two per row, never single-file scroll (incl. the primary
     KPI grid, whose own auto-fit rule outranks the plain .grid one) */
  .grid,.grid.kpi-primary,.grid.kpi-secondary{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid.kpi-primary .card .val{font-size:20px;}
}