/* ============================================================================
   CoreX v2 — cash-up, invoice history, grouped navigation
   ----------------------------------------------------------------------------
   Loaded after app.css and additive: it styles the new screens and refines the
   old ones without rewriting them. Every rule uses logical properties
   (inline-start/end, not left/right) so the Arabic RTL layout keeps working.
   ========================================================================= */

:root{
  --ok:#1e9e5a; --warn:#c98a12; --bad:#c0392b;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
}

/* ------------------------------------------------------- navigation groups */
/* Thirteen flat items made a cashier scan a list to find the two they use.
   Grouping is a label, not a new mechanism — the buttons are unchanged. */
.nav-group{
  padding:14px 16px 5px; font-size:10px; font-weight:700; letter-spacing:.12em;
  color:var(--muted,#8a8f98); text-transform:uppercase; user-select:none;
}
.nav-group:first-child{padding-top:6px}
.nav-item[hidden]{display:none !important}

/* --------------------------------------------------------- till state chip */
/* Red until the till is opened. A shop should never get to 4pm and discover
   the day cannot be cashed up (audit H-04). */
.till-state{
  border:1px solid transparent; border-radius:999px; padding:7px 14px;
  font-size:12px; font-weight:700; letter-spacing:.03em; cursor:pointer;
  transition:.15s; white-space:nowrap;
}
.till-state.closed{
  background:color-mix(in srgb, var(--bad) 14%, transparent);
  border-color:var(--bad); color:var(--bad);
  animation:till-pulse 2.6s ease-in-out infinite;
}
.till-state.open{
  background:color-mix(in srgb, var(--ok) 13%, transparent);
  border-color:color-mix(in srgb, var(--ok) 45%, transparent); color:var(--ok);
}
.till-state:hover{filter:brightness(1.12)}
@keyframes till-pulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.till-state.closed{animation:none}}

/* ================================================================ CASH UP */
.cu-wrap{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px; padding:20px; align-items:start; overflow:auto; height:100%;
}
@media (max-width:1100px){.cu-wrap{grid-template-columns:1fr}}

.cu-card{
  background:var(--surface,#171a1f); border:1px solid var(--line,#262a31);
  border-radius:var(--r-lg); padding:20px 22px;
}
.cu-card h2{font-size:17px; margin:0 0 3px}
.cu-card h3{font-size:13px; margin:0 0 10px; color:var(--muted,#8a8f98);
  text-transform:uppercase; letter-spacing:.06em}
.cu-h3{margin-top:22px !important}
.cu-sub{margin:0 0 16px; color:var(--muted,#8a8f98); font-size:13px}
.cu-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}

.cu-grid{display:flex; flex-direction:column; gap:1px;
  background:var(--line,#262a31); border-radius:var(--r-md); overflow:hidden; margin-bottom:22px}
.cu-row{display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--surface-2,#1c2026); padding:11px 14px; font-size:14px}
.cu-row b{font-variant-numeric:tabular-nums; font-weight:600}
.cu-row.muted{opacity:.6; font-size:13px}

/* The number the cashier is counting against. */
.cu-expected{background:var(--surface-3,#232830) !important; padding:15px 14px !important}
.cu-expected span{font-size:11px; font-weight:700; letter-spacing:.07em; color:var(--muted,#8a8f98)}
.cu-expected b{font-size:22px}

.cu-count{border-top:1px solid var(--line,#262a31); padding-top:20px}
.cu-count-fields{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px}
@media (max-width:560px){.cu-count-fields{grid-template-columns:1fr}}

.cu-field{display:flex; flex-direction:column; gap:5px; margin-bottom:13px}
.cu-field>span{font-size:12px; color:var(--muted,#8a8f98)}
.cu-field input[type=text]{
  background:var(--surface-2,#1c2026); border:1px solid var(--line,#262a31);
  border-radius:var(--r-sm); padding:10px 12px; color:inherit; font:inherit; width:100%;
}

/* The variance, stated plainly. Never softened — it is the whole point. */
.cu-variance{margin:4px 0 16px}
.cu-variance:empty{display:none}
.cu-variance{border-radius:var(--r-md); padding:14px 16px; border:1px solid var(--line,#262a31)}
.cu-var-row{display:flex; justify-content:space-between; font-size:13px; opacity:.8; margin-bottom:4px}
.cu-var-row b{font-variant-numeric:tabular-nums}
.cu-var-big{font-size:21px; font-weight:800; letter-spacing:.02em; margin-top:8px}

.cu-variance.exact{background:color-mix(in srgb,var(--ok) 10%,transparent); border-color:var(--ok)}
.cu-variance.exact .cu-var-big{color:var(--ok)}
.cu-variance.over{background:color-mix(in srgb,var(--warn) 10%,transparent); border-color:var(--warn)}
.cu-variance.over .cu-var-big{color:var(--warn)}
.cu-variance.short{background:color-mix(in srgb,var(--bad) 12%,transparent); border-color:var(--bad)}
.cu-variance.short .cu-var-big{color:var(--bad)}

.cu-last{margin-top:14px; font-size:12px; color:var(--muted,#8a8f98)}
.cu-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px}
.cu-stats>div{background:var(--surface-2,#1c2026); border-radius:var(--r-md); padding:12px; text-align:center}
.cu-stats b{display:block; font-size:19px; font-variant-numeric:tabular-nums}
.cu-stats span{font-size:11px; color:var(--muted,#8a8f98)}
.cu-stats .bad b{color:var(--bad)}

/* ------------------------------------------------------------ the Z slip */
.z-slip{padding:4px 2px}
.z-slip h3{font-size:14px; letter-spacing:.06em; margin:0 0 14px; text-align:center}
.z-row{display:flex; justify-content:space-between; font-size:14px; padding:6px 0}
.z-row b{font-variant-numeric:tabular-nums}
.z-strong{border-top:1px solid var(--line,#262a31); font-weight:700; padding-top:9px}
.z-verdict{margin:16px 0; padding:16px; border-radius:var(--r-md); text-align:center;
  font-size:23px; font-weight:800; letter-spacing:.02em}
.z-verdict.exact{background:color-mix(in srgb,var(--ok) 14%,transparent); color:var(--ok)}
.z-verdict.over {background:color-mix(in srgb,var(--warn) 14%,transparent); color:var(--warn)}
.z-verdict.short{background:color-mix(in srgb,var(--bad) 15%,transparent); color:var(--bad)}
.z-actions{display:flex; gap:10px}
.z-actions button{flex:1}

/* ======================================================= INVOICE HISTORY */
.hist-bar{
  display:flex; gap:10px; padding:16px 20px; align-items:center; flex-wrap:wrap;
  border-bottom:1px solid var(--line,#262a31);
}
.hist-bar .search{flex:1; min-width:220px}
.hist-bar input[type=date],.hist-bar select{
  background:var(--surface-2,#1c2026); border:1px solid var(--line,#262a31);
  border-radius:var(--r-sm); padding:9px 11px; color:inherit; font:inherit;
}
.hist-rows{overflow:auto; padding:10px 14px 24px; height:calc(100% - 66px)}

.hist-row{
  display:flex; align-items:center; gap:14px; padding:12px 14px; cursor:pointer;
  border:1px solid transparent; border-radius:var(--r-md); transition:.12s;
}
.hist-row:hover{background:var(--surface-2,#1c2026); border-color:var(--line,#262a31)}
.h-no{font-weight:700; font-variant-numeric:tabular-nums; min-width:74px; color:var(--accent,#4c8dff)}
.h-mid{flex:1; min-width:0}
.h-when{font-size:13px}
.h-who{font-size:12px; color:var(--muted,#8a8f98); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.h-right{text-align:end; display:flex; flex-direction:column; align-items:flex-end; gap:4px}
.h-amt{font-weight:700; font-variant-numeric:tabular-nums; font-size:15px}
.h-tags{display:flex; gap:5px}
.empty-note{padding:40px; text-align:center; color:var(--muted,#8a8f98)}

/* ---------------------------------------------------------- invoice modal */
.inv-meta{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px}
.inv-meta>div{background:var(--surface-2,#1c2026); border-radius:var(--r-sm); padding:9px 12px}
.inv-meta span{display:block; font-size:11px; color:var(--muted,#8a8f98)}
.inv-meta b{font-size:13px}
.inv-tot{margin-top:14px; border-top:1px solid var(--line,#262a31); padding-top:12px}
.inv-tot>div{display:flex; justify-content:space-between; padding:4px 0; font-size:14px}
.inv-tot .big{font-size:19px; font-weight:800; margin-top:6px}
.inv-tot b{font-variant-numeric:tabular-nums}
.inv-returns{margin-top:12px; padding:10px 12px; border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--bad) 10%,transparent); color:var(--bad); font-size:13px}

/* --------------------------------------------------------- shared modal */
.modal-back{
  position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:900;
  display:flex; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(2px);
}
.modal-back>.modal{
  background:var(--surface,#171a1f); border:1px solid var(--line,#262a31);
  border-radius:var(--r-lg); padding:22px; width:min(620px,100%);
  max-height:88vh; overflow:auto;
}
.modal-back>.modal.sm{width:min(420px,100%)}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px}
.modal-head h3{margin:0; font-size:17px}
.modal-foot{display:flex; gap:10px; justify-content:flex-end; margin-top:18px}
.modal-foot button{min-width:120px}

/* ------------------------------------------------------------- utilities */
.tbl{width:100%; border-collapse:collapse}
.tbl.sm{font-size:13px}
.tbl th{text-align:start; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted,#8a8f98); padding:8px 10px; border-bottom:1px solid var(--line,#262a31); font-weight:600}
.tbl td{padding:9px 10px; border-bottom:1px solid var(--line,#262a31)}
.tbl tr:last-child td{border-bottom:none}
.tbl .r{text-align:end; font-variant-numeric:tabular-nums}
.bad{color:var(--bad)}
.mono{font-family:ui-monospace,"Cascadia Code",Consolas,monospace}
.sm{font-size:12px}
.bad-pill{background:color-mix(in srgb,var(--bad) 16%,transparent); color:var(--bad)}
.btn-ghost{
  background:transparent; border:1px solid var(--line,#262a31); border-radius:var(--r-sm);
  padding:10px 16px; color:inherit; font:inherit; cursor:pointer; transition:.12s;
}
.btn-ghost:hover{background:var(--surface-2,#1c2026)}
.icon-btn{background:none; border:none; color:var(--muted,#8a8f98); cursor:pointer;
  font-size:17px; padding:4px 8px; border-radius:var(--r-sm)}
.icon-btn:hover{background:var(--surface-2,#1c2026); color:inherit}

/* Cost figures are stripped server-side for cashiers; this only tidies gaps. */
body.hide-cost .cost-col,body.hide-cost .cost-cell{display:none !important}