<style>
/* ---------------------------
   Minimal, clean dashboard skin
   Works with your existing HTML + Tailwind
----------------------------*/

/* Light/Dark tokens (toggle via .dark on <html> – Telegram does this) */
:root{
  --bg: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --surface: rgba(255,255,255,.86);
  --surface-strong: rgba(255,255,255,.95);
  --border: rgba(2,8,23,.08);

  --brand: #3b82f6;   /* blue-500 */
  --success: #16a34a; /* green-600 */
  --warn: #b45309;    /* amber-700 */
  --danger:#dc2626;  /* red-600 */
}
.dark{
  --bg:
    radial-gradient(700px 320px at 90% -10%, rgba(59,109,255,.18), transparent 55%),
    radial-gradient(800px 360px at -10% 110%, rgba(34,197,94,.16), transparent 55%),
    #0b1220;
  --text: #e2e8f0;
  --muted:#94a3b8;
  --surface: rgba(15,23,42,.70);
  --surface-strong: rgba(15,23,42,.84);
  --border: rgba(148,163,184,.16);
}

html,body{ height:100%; }
body{
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Chips (badges) */
.chip{
  display:inline-flex; align-items:center;
  font-size:.72rem; line-height:1;
  padding:.24rem .6rem;
  border-radius:9999px;
  border:1px solid transparent;
  white-space:nowrap;
}
.chip-green { background:rgba(22,163,74,.16);  color:#86efac; border-color:rgba(22,163,74,.38); }
.chip-amber { background:rgba(245,158,11,.16); color:#fde68a; border-color:rgba(245,158,11,.40); }
.chip-red   { background:rgba(220,38,38,.16);  color:#fecaca; border-color:rgba(220,38,38,.38); }
.chip-slate { background:rgba(148,163,184,.14);color:#cbd5e1; border-color:rgba(148,163,184,.30); }
.chip-blue  { background: rgba(59,130,246,.18);  color:#93c5fd; border-color: rgba(59,130,246,.45); } /* blue */
.chip-white { background: rgba(255,255,255,.12); color:#fff;    border-color: rgba(255,255,255,.55); } /* white */



/* Order cards (structure) */
.order-card{ padding:1rem; }
.order-header{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.order-num{ font-weight:800; font-size:1.35rem; letter-spacing:.3px; }
.order-chips{ display:flex; gap:.4rem; }
.order-meta{
  display:grid; grid-template-columns: 120px 1fr; gap:.25rem 1.2rem; margin-top:.6rem;
  font-size:.95rem;
}
.order-meta .label{ color: var(--muted); }
.amount-green{ color:#86efac; font-weight:700; }
.amount-blue{  color:#93c5fd; font-weight:700; }
.amount-sky{   color:#7dd3fc; font-weight:700; }
.amount-red{   color:#fecaca; font-weight:700; }
.order-actions{ display:flex; gap:.5rem; margin-top:.9rem; }
@media (max-width:640px){
  .order-num{ font-size:1.25rem; }
  .order-meta{ grid-template-columns: 100px 1fr; }
}

/* Compact tables (desktop) */
.table-compact{ font-size:.95rem; }
.table-compact thead{ color: var(--muted); }
.table-compact tbody tr{ border-bottom:1px solid rgba(148,163,184,.12); }
.table-compact tbody tr:hover{ background: rgba(255,255,255,.03); }

/* Bottom nav (mobile) */
.bottom-nav{
  position:fixed; left:50%; bottom:.9rem; transform:translateX(-50%);
  display:flex; gap:.35rem; padding:.45rem .5rem;
  background: var(--surface-strong);
  border:1px solid var(--border); border-radius:9999px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  z-index:60; backdrop-filter: blur(12px);
  padding-bottom: calc(.45rem + env(safe-area-inset-bottom));
}
.bottom-nav button{
  display:flex; align-items:center; gap:.45rem;
  padding:.55rem .85rem; border-radius:9999px;
  background:transparent; border:1px solid transparent; color: var(--text);
}
.bottom-nav button[aria-current="page"]{
  background: rgba(59,109,255,.18);
  border-color: rgba(59,109,255,.45);
}

/* Footer */
.footer-card{
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  text-align:center;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
}
.footer-powered{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:.85rem; line-height:1; color: var(--muted); opacity:.95; margin-top:.35rem;
}
.footer-powered .powered-logo{ height:18px; width:auto; filter: drop-shadow(0 3px 10px rgba(0,0,0,.35)); }

/* Overlay + UI lock (used by your portal) */
#overlay{ position:fixed; inset:0; display:none; z-index:9998;
  background:rgba(0,0,0,.45); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); cursor:wait;
}
body.ui-locked main, body.ui-locked aside, body.ui-locked header{
  filter: blur(3px) saturate(.95); pointer-events:none; user-select:none;
}

/* Nice thin scrollbars (desktop) */
@media (min-width:768px){
  *{ scrollbar-width: thin; scrollbar-color:#334155 transparent; }
  *::-webkit-scrollbar{ height:8px; width:8px; }
  *::-webkit-scrollbar-thumb{ background:#334155; border-radius:8px; }
  *::-webkit-scrollbar-track{ background:transparent; }
}

/* ===============================
   Full-page photo background (single source of truth)
=================================*/
:root{
  --bg-img: url('https://github.com/aliy4sser/kebab---form/raw/main/BOOZ%20BG.png');
}
html, body { min-height: 100%; }
body { background: #0b1220; } /* fallback under the image */

body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, rgba(2,8,23,.60), rgba(2,8,23,.60)),
    var(--bg-img);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  will-change: transform;
}
/* iOS Safari: avoid repaint quirks */
@supports (-webkit-touch-callout: none) {
  body::before{ transform: translateZ(0); }
}

/* Glass over photo (single copy) */
.card{ background: rgba(15,23,42,.76); border:1px solid rgba(148,163,184,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.glass-strong{ background: rgba(15,23,42,.86); border:1px solid rgba(148,163,184,.20); }
.bottom-nav{ background: rgba(15,23,42,.86); border-color: rgba(148,163,184,.20); }

/* ===============================
   Readability / Contrast Patch (final copy)
   (trimmed to avoid overriding modal colors)
=================================*/
/* Stronger text tokens */
:root{ --text:#e5e7eb; --muted:#cbd5e1; }
.dark{ --text:#f8fafc; --muted:#d1d5db; }

/* Make body + cards clearly readable */
body, main, header, aside, .card, .order-card, .glass-strong{ color: var(--text); }

/* Headings & key numbers pop (no .font-bold/.font-extrabold) */
h1,h2,h3,h4,.order-num{ color:#ffffff !important; }

/* Labels/tiny captions */
.card .opacity-60, .card .opacity-70,
.order-card .opacity-60, .order-card .opacity-70{ opacity:1 !important; color:var(--muted) !important; }

/* KPI tiles: label + value */
.card .text-xs{ color:var(--muted) !important; opacity:1 !important; }

/* Inputs & selects: scoped (no globals) */
.card input, .card select{
  background: rgba(2,6,23,.45);
  border: 1px solid rgba(203,213,225,.28);
  border-radius: .75rem;
}
input::placeholder{ color:#cbd5e1 !important; opacity:1 !important; }

/* Buttons */
#refreshBtn, .btn-primary{
  background:#3b82f6 !important; color:#fff !important; border:1px solid rgba(255,255,255,.16);
}
.btn-ghost, .order-actions button{
  color:#e5e7eb !important;
  background: rgba(255,255,255,.05) !important;
  border:1px solid rgba(203,213,225,.25) !important;
  border-radius:.8rem !important;
}

/* Tables */
.table-compact thead{ color: var(--muted) !important; }
.table-compact td, .table-compact th{ color: var(--text) !important; }

/* Bottom nav text */
.bottom-nav button{ color: var(--text) !important; }

/* Order cards (visual) */
.order-card{
  background: rgba(15,23,42,.86);
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  padding: 1rem;
}

/* ===============================
   Amount colors (keep only global version)
=================================*/
:root{
  --amt-delivered:#34d399;    /* emerald-400 */
  --amt-invoiced:#93c5fd;     /* blue-300   */
  --amt-paid:#38bdf8;         /* sky-400    */
  --amt-outstanding:#f87171;  /* red-400    */
  --amt-attn:#f59e0b;         /* amber-500  */
}

/* Make table elements transparent by default */
.table-compact, .table-compact thead, .table-compact tbody,
.table-compact tr, .table-compact th, .table-compact td{
  background: transparent !important;
}

/* Column-based coloring (desktop + stacked) */
/* Column-based coloring (desktop + stacked) */
td[data-col="delivered"],
td[data-col="delivered_orders"],
td[data-label="Delivered"],
td[data-label="Delivered CZK"],
td[data-label="Delivered Orders"]{
  color: var(--amt-delivered) !important; font-weight:700;
}

td[data-col="paid"],
td[data-label="Paid"], td[data-label="Paid CZK"]{
  color: var(--amt-paid) !important; font-weight:700;
}

td[data-col="outstanding"],
td[data-label="Outstanding"], td[data-label="Outstanding CZK"]{
  color: var(--amt-outstanding) !important; font-weight:800;
}


/* Payments + Expenses accents */
#paymentsTable td[data-label="Paid"]{ color:var(--amt-paid) !important; font-weight:800; }
#expensesTable td[data-label="Amount CZK"]{ color:#fda4af !important; font-weight:800; } /* rose-300 */

/* ===============================
   Mobile stacked rows (final copy)
=================================*/
@media (max-width:640px){
  table.table-compact.stacked{ min-width:0 !important; }
  .table-compact.stacked thead{ display:none; }
  .table-compact.stacked, .table-compact.stacked tbody, .table-compact.stacked tr, .table-compact.stacked td{
    display:block; width:100%;
  }
  .table-compact.stacked tbody tr{
    margin:.75rem 0; padding:.55rem .65rem !important;
    background: rgba(15,23,42,.90) !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    border-radius:.75rem !important;
    color:#f8fafc !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
  }
  .table-compact.stacked td{
    padding:.32rem 0 !important;
    display:grid; grid-template-columns: 6rem 1fr; gap:.5rem; align-items:start;
    font-size:.92rem;
  }
  .table-compact.stacked td::before{
    content: attr(data-label);
    color:#d1d5db !important; font-weight:600; opacity:1 !important; font-size:.80rem;
  }
}

/* --- Single-file "pages" --- */
.page{ display:none; }
.page.active{ display:block; }

/* === Compact stacked glass footer === */
.footer-card{
  background: rgba(36, 37, 55, 0.26);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.17);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(190, 190, 200, 0.11);
  padding: 8px 12px;
  margin: 12px auto 0;
  width: max-content;
  max-width: 96vw;
  text-align: center;
}
.footer-mini .footer-logo{ display: none; }
@media (max-width:640px){
  .footer-card{ padding: 6px 10px; }
  .powered-logo{ height: 24px; }
}
.footer-card.footer-compact{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem;
  padding:.5rem .75rem; margin:12px auto 0; width:fit-content; max-width:calc(100vw - 24px);
  background: rgba(36, 37, 55, 0.26);
  border-radius: 16px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.17);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(190, 190, 200, 0.11);
  text-align:center;
}
.footer-card.footer-compact .powered-row{ display:inline-flex; align-items:center; gap:.45rem; color:#bbb; font-size:.95rem; line-height:1; }
.footer-card.footer-compact .powered-logo{ height:22px; width:auto; display:block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
@media (max-width:480px){
  .footer-card.footer-compact{ padding:.45rem .6rem; gap:.3rem; }
  .footer-card.footer-compact .powered-logo{ height:20px; }
}

/* === Mobile density & table slimming === */
@media (max-width:640px){
  html { font-size: 15px; }
  main { padding: 10px !important; }
  .page.space-y-6 > :not([hidden]) ~ :not([hidden]){ margin-top: .9rem !important; }
  .card{ padding: .75rem !important; border-radius: 14px; }
  header.card{ padding: .6rem .75rem !important; }
  #page-dashboard section:first-of-type .text-xs{ font-size:.68rem !important; }
  #page-dashboard section:first-of-type .font-extrabold{ font-size: clamp(1.05rem, 4.5vw, 1.3rem) !important; }
  .order-card{ padding:.75rem !important; }
  .order-meta{ grid-template-columns: 88px 1fr; gap: .2rem .8rem; font-size:.92rem; }
  .order-actions{ gap:.4rem; }
  .order-actions button{ padding:.45rem .6rem !important; font-size:.82rem; }
  .card input, .card select{ padding:.5rem .6rem !important; font-size:.93rem !important; } /* scoped */
  #ordersExport{ padding:.35rem .55rem !important; }
  .bottom-nav{ gap:.2rem; padding:.4rem .45rem; }
}
@media (max-width:380px){
  .bottom-nav span{ display:none; }
  .bottom-nav button{ padding:.5rem; }
}

/* Hide non-critical columns on phones */
@media (max-width:640px){
  /* Debts: hide Code, Last Payment */
  #page-debts table tr > *:nth-child(2),
  #page-debts table tr > *:nth-child(5){ display:none !important; }
  /* Workers: hide Cancelled, Submitted */
  #page-workers table tr > *:nth-child(3),
  #page-workers table tr > *:nth-child(4){ display:none !important; }
  /* Payments: hide Method */
  #page-payments table tr > *:nth-child(3){ display:none !important; }
  /* Expenses: hide Notes (keep Amount visible) */
  #page-expenses table tr > *:nth-child(4){ display:none !important; }
}

/* Opaque Original-Order anchor panel */
#original-order-anchor{
  background: #20212a !important;
  border: 1px solid #444 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.55) !important;
}

/* Fallback blur when backdrop-filter isn't supported */
.app-blur #app-shell{
  filter: blur(10px) saturate(.9);
  transform: translateZ(0);
  pointer-events: none;
  user-select: none;
}

/* Payment modal, scoped */
#payment-page label{ color:#fff; font-weight:700; }
#payment-page select, #payment-page input{ color:#fff; font-weight:700; }
#payment-page .outstanding-amount{ color:#f87171; font-weight:800; }

/* Dynamic viewport height for mobile toolbars */
.min-h-dvh { min-height: 100dvh; }

/* iOS: prevent auto-zoom on inputs (needs >=16px) */
@supports (-webkit-touch-callout: none) {
  .card input, .card select, .card textarea { font-size: 16px !important; }
}

/* Extra bottom padding on small screens so content never hides behind bottom nav */
@media (max-width:640px){
  main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* Hide bottom nav while keyboard is open */
.kb-open .bottom-nav { transform: translate(-50%, calc(100% + 16px)); opacity: .6; }

/* Nicer taps */
button, .btn-primary, .btn-ghost { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

#payment-page .rounded-xl { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); }

/* =====================================================
   Modern Polish Pack — drop‑in CSS layer (safe to paste
   at the very END of your current <style> block)
   -----------------------------------------------------
   Goals
   • Sharper readability & contrast
   • Smoother, classy micro‑interactions
   • Stickier, denser data tables (desktop)
   • Clean button/focus states (a11y)
   • Subtle elevation on cards + nav polish
   • Works with your existing tokens & classes
   ===================================================== */

/* ---- Design tokens (non‑breaking) ---- */
:root{
  --radius: 14px;                 /* default corner */
  --radius-lg: 20px;              /* larger surfaces */
  --ease: cubic-bezier(.2,.9,.2,1);
  --ring: var(--brand, #3b82f6);
  --shadow-1: 0 8px 24px rgba(2,8,23,.18);
  --shadow-2: 0 16px 44px rgba(2,8,23,.28);
  --shadow-3: 0 22px 60px rgba(2,8,23,.36);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---- Global polish ---- */
body{ letter-spacing:.01em; }

/* Focus states (buttons, inputs, links) */
button:focus-visible, [type="button"]:focus-visible,
[type="submit"], [type="submit"]:focus-visible,
.card input:focus-visible, .card select:focus-visible,
.card textarea:focus-visible, a:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring), white 10%), 0 0 0 6px color-mix(in oklab, var(--ring), transparent 85%) !important;
  border-color: color-mix(in oklab, var(--ring), white 20%) !important;
}

/* Buttons */
.btn-primary{
  border-radius: .85rem !important;
  box-shadow: 0 6px 18px rgba(59,130,246,.35) !important;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(59,130,246,.45) !important; }
.btn-primary:active{ transform: translateY(0); box-shadow: 0 6px 18px rgba(59,130,246,.35) !important; }

.btn-ghost{
  transition: transform .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
}
.btn-ghost:hover{ transform: translateY(-1px); }

/* Card surfaces */
.card{
  border-radius: var(--radius) !important;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease);
  box-shadow: var(--shadow-1);
}
@media (hover:hover){
  .card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: rgba(148,163,184,.32); }
}

/* Dense header toolbar controls */
header.card .rounded{ border-radius:.7rem !important; }
header.card input, header.card select{ height: 2.25rem; padding:.35rem .65rem !important; }

/* Sidebar nav polish */
aside nav button{
  display:flex; align-items:center; gap:.6rem; font-weight:600; letter-spacing:.02em;
  border-radius:.7rem; transition: background-color .18s var(--ease), transform .18s var(--ease);
}
aside nav button:hover{ transform: translateX(2px); }
aside nav button[aria-current="page"]{
  background: linear-gradient(180deg, rgba(59,109,255,.22), rgba(59,109,255,.12));
  box-shadow: inset 0 0 0 1px rgba(59,109,255,.38);
}

/* Bottom nav: clearer current state */
.bottom-nav button{ font-weight:600; opacity:.86; }
.bottom-nav button[aria-current="page"]{ opacity:1; box-shadow: inset 0 0 0 1px rgba(59,109,255,.55), 0 10px 24px rgba(0,0,0,.25); }
.bottom-nav svg{ flex:0 0 auto; }

/* KPI tiles: larger numbers tighten line‑height */
#page-dashboard .card .font-extrabold{ line-height:1.05; }

/* Chips: optical weight + subtle glow */
.chip{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); letter-spacing:.02em; }
.chip-green{ text-shadow: 0 0 12px rgba(16,185,129,.25); }
.chip-amber{ text-shadow: 0 0 12px rgba(245,158,11,.25); }
.chip-red{ text-shadow: 0 0 12px rgba(239,68,68,.25); }

/* Tables: sticky head, zebra, tighter rows */
.table-compact thead th{ position: sticky; top: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,23,42,.90), rgba(15,23,42,.82)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.table-compact th, .table-compact td{ vertical-align: middle; padding-top:.55rem; padding-bottom:.55rem; }
.table-compact tbody tr:nth-child(odd){ background: rgba(148,163,184,.035); }
.table-compact tbody tr:hover{ background: rgba(148,163,184,.08) !important; }

/* “Carded” rows in stacked mode already styled — keep their shadow a touch stronger */
@media (max-width:640px){ .table-compact.stacked tbody tr{ box-shadow: 0 10px 28px rgba(0,0,0,.28); } }
/* Don't stretch values inside stacked table "cards" */
.table-compact.stacked td{ justify-items: start; }               /* grid container */
.table-compact.stacked td > *{ justify-self: start; width:auto; max-width:max-content; }
.table-compact.stacked td .chip{ width:auto; }                    /* status badge stays snug */


/* Empty states */
.table-compact tbody tr td[colspan]{ color: var(--muted); }

/* Micro helpers */
@media (hover:hover){ .card-hover:hover{ transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-3); } }

/* Badges for statuses that appear in many places */
.badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .6rem; border-radius:9999px; font-weight:700; font-size:.72rem; letter-spacing:.02em; border:1px solid rgba(255,255,255,.12); }
.badge.ok{ background: rgba(34,197,94,.14); color:#86efac; }
.badge.warn{ background: rgba(245,158,11,.14); color:#fde68a; }
.badge.err{ background: rgba(239,68,68,.16); color:#fecaca; }
/* Inputs inside .card: crisper + subtle inner shadow */
.card input, .card select, .card textarea{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(0,0,0,.08);
}
.card input:hover, .card select:hover, .card textarea:hover{ border-color: rgba(203,213,225,.45); }

/* Footer glass: slightly brighter */
.footer-card{ box-shadow: 0 12px 36px rgba(0,0,0,.33); }

/* Order cards: tighten meta grid spacing */
.order-meta{ row-gap:.18rem; }

/* Utility: subtle divider you can drop anywhere */
.hr{ height:1px; background: linear-gradient(90deg, transparent, rgba(148,163,184,.25), transparent); }

/* Skeleton (use by toggling .is-loading on parent) */
.is-loading .skeleton{ position:relative; overflow:hidden; background: linear-gradient(90deg, rgba(148,163,184,.12), rgba(148,163,184,.20), rgba(148,163,184,.12)); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; border-radius:.5rem; }
@keyframes shimmer{ 0%{ background-position: 200% 0 } 100%{ background-position: -200% 0 } }

/* Toast (optional): style a #toast element if you ever need it) */
#toast{ position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateX(-50%); padding:.6rem .8rem; border-radius:9999px; background: rgba(15,23,42,.88); border:1px solid rgba(148,163,184,.22); box-shadow: 0 18px 42px rgba(0,0,0,.45); font-weight:600; z-index:10020; display:none; }

/* Print friendly tweaks (if you export) */
@media print{
  body{ background:#fff; }
  .card, .glass-strong{ background:#fff !important; border-color:#e5e7eb !important; box-shadow:none !important; }
  .bottom-nav, #authGate, #accessGate, #overlay{ display:none !important; }
}
/* Hide only the sidebar; keep the mobile bottom nav visible */
aside { display: none !important; }
/* Color the values inside order cards */
.order-card .amount-delivered   { color: var(--amt-delivered);   font-weight: 800; }
.order-card .amount-invoiced    { color: var(--amt-invoiced);    font-weight: 800; }
.order-card .amount-paid        { color: var(--amt-paid);        font-weight: 800; }
.order-card .amount-outstanding { color: var(--amt-outstanding); font-weight: 900; }

/* ==== Pro Polish (add at very end) ================================== */

/* 1) Numeric readability everywhere (dashboards love tabular digits) */
html { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* 2) Create a small, consistent button system + fix ghost padding */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border-radius:.85rem;
  border:1px solid var(--border); background:rgba(255,255,255,.05);
  font-weight:700; line-height:1.1; transition:transform .16s var(--ease), background-color .16s var(--ease);
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn .icon{ width:1em; height:1em; line-height:1; opacity:.9; }
.btn-ghost{ background:transparent !important; padding:.55rem .9rem !important; }
.btn-primary{ padding:.6rem 1rem !important; }

/* 3) Tighten chips and make them look uniform, not pill-fat */
.chip{ font-weight:700; letter-spacing:.01em; padding:.28rem .6rem; border-radius:9999px; }

/* 4) Card titles & spacing */
.card h3{ font-weight:800; letter-spacing:.01em; }
.card h3 + *{ margin-top:.35rem; }

/* 5) Inputs: same height, better focus ring, readable bg */
.card input, .card select, .card textarea{
  min-height: 2.6rem; padding:.5rem .7rem !important;
  background: rgba(2,6,23,.45) !important;
  border:1px solid rgba(203,213,225,.28) !important;
  border-radius:.8rem !important;
}
.card input:focus, .card select:focus, .card textarea:focus{
  outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.25);
  border-color: rgba(59,130,246,.55) !important;
}

/* 6) Tables: tighter, crisper, zebra with subtle hover */
.table-compact th, .table-compact td{ padding:.55rem .6rem !important; vertical-align:middle; }
.table-compact thead th{
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.82));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.table-compact tbody tr:nth-child(odd){ background: rgba(148,163,184,.04); }
.table-compact tbody tr:hover{ background: rgba(148,163,184,.10) !important; }

/* 7) Approve / Reject buttons look like a set, not random */
[data-exp-approve],[data-exp-reject]{
  padding:.4rem .65rem; border-radius:.6rem; font-weight:800; line-height:1.05;
  box-shadow: 0 6px 18px rgba(0,0,0,.20);
}
[data-exp-approve]{ background:#16a34a; border-color:#16a34a; }
[data-exp-approve]:hover{ filter: brightness(1.05); }
[data-exp-reject]{ background:#dc2626; border-color:#dc2626; }
[data-exp-reject]:hover{ filter: brightness(1.05); }

/* 8) “Totals” bar next to Recent Expenses: make it read as metadata */
#exp-totals{ padding:.25rem .6rem; border:1px solid var(--border);
  border-radius:.6rem; background:rgba(255,255,255,.04); }

/* 9) Filters block—more professional framing (optional but nice) */
#exp-filterbar{
  padding:.6rem; border:1px solid var(--border); border-radius:12px;
  background: rgba(15,23,42,.72); backdrop-filter: blur(6px);
}

/* 10) Reduce background image strength a hair for readability */
body::before{ background-image:
  linear-gradient(to bottom, rgba(2,8,23,.64), rgba(2,8,23,.64)),
  var(--bg-img) !important;
}

/* 11) “Back” / small utility buttons never touch their label again */
.header .btn-ghost, .order-actions button{ padding:.55rem .9rem !important; }

@media (max-width:640px){
  /* Stores: keep CZK sums visible; hide these only */
  #page-stores table [data-col="Code"],
  #page-stores table [data-col="Cancelled"],
  #page-stores table [data-col="Submitted"],
  #page-stores table [data-col="Last Payment"] {
    display: block !important;
  }
}
/* === Fix: keep "Last Payment" visible on phones === */
@media (max-width:640px){
  /* Debts page: only hide Code (col 2), NOT Last Payment (col 5) */
  #page-debts table tr > *:nth-child(2){ display:none !important; }
  #page-debts table tr > *:nth-child(5){ display:block !important; } /* was hidden */

  /* Stores page: stop hiding Last Payment in stacked view */
  #page-stores table [data-label="Last Payment"]{ display:block !important; }
}
/* Force an LTR “island” for IDs / order numbers */
.dir-ltr { direction: ltr; unicode-bidi: isolate; }

/* === Readability: row separators inside order cards === */
.order-card .order-meta > *{
  padding: .40rem 0;
  border-top: 1px solid rgba(148,163,184,.22); /* subtle divider */
}
.order-card .order-meta > *:nth-child(1),
.order-card .order-meta > *:nth-child(2){
  border-top: none; /* no line above the first row */
}

/* (Optional) Also add separators to the key/value rows inside small "debt" cards */
#orders-area article.card .mt-3.text-sm > .flex{
  border-top: 1px solid rgba(148,163,184,.20);
  padding-top: .45rem;
  margin-top: .25rem;
}
#orders-area article.card .mt-3.text-sm > .flex:first-child{
  border-top: none; padding-top: 0; margin-top: 0;
}

/* ========= Readability patch for Debts + Stores (drop at END of <style>) ========= */

/* 1) Make each stacked row read like a card header + tidy label column */
.table-compact.stacked td{ grid-template-columns: 7.5rem 1fr; }   /* was 6rem */
#page-debts  .table-compact.stacked tbody tr,
#page-stores .table-compact.stacked tbody tr{
  line-height: 1.15;
}

/* Treat the Store cell as the card title */
#page-debts  .table-compact.stacked td[data-label="Store"],
#page-stores .table-compact.stacked td[data-label="Store"]{
  display:block !important;
  padding-bottom:.25rem !important;
  margin-bottom:.15rem;
  font-size:1.06rem;
  font-weight:800;
  letter-spacing:.01em;
}
#page-debts  .table-compact.stacked td[data-label="Store"]::before,
#page-stores .table-compact.stacked td[data-label="Store"]::before{ content:''; display:none; }

/* 2) Key money lines: bigger, heavier, always colored */
#page-debts  .table-compact.stacked td[data-label="Outstanding CZK"],
#page-stores .table-compact.stacked td[data-col="outstandingCzk"]{
  font-size:1.08rem;
  font-weight:900;
  color: var(--amt-outstanding) !important; /* red */
}
#page-stores .table-compact.stacked td[data-col="deliveredCzk"]{
  font-weight:800; color: var(--amt-delivered) !important;        /* green */
}
#page-stores .table-compact.stacked td[data-col="paidCzk"]{
  font-weight:800; color: var(--amt-paid) !important;              /* sky  */
}
#page-stores .table-compact.stacked td[data-col="originalCzk"]{
  font-weight:800; color: var(--amt-invoiced) !important;          /* blue */
}

/* 3) Add gentle separators between value rows (keeps the “card” feeling) */
#page-debts  .table-compact.stacked td + td,
#page-stores .table-compact.stacked td + td{
  border-top: 1px solid rgba(148,163,184,.18);
  padding-top:.40rem !important;
  margin-top:.15rem;
}

/* 4) Status cell on phones: chip + button never collide, button reads as primary */
#page-debts .table-compact.stacked td[data-label="Status"] .flex{
  flex-wrap: wrap; gap:.5rem;
}
#page-debts .table-compact.stacked td[data-label="Status"] button{
  padding:.5rem .75rem !important;
  border-radius:.7rem !important;
  font-weight:800;
}

/* 5) Keep “Last Payment” as a two-column grid so the space shows */
@media (max-width:640px){
  #page-debts  .table-compact.stacked td[data-label="Last Payment"],
  #page-stores .table-compact.stacked td[data-col="lastPayment"]{
    display:grid !important;
    grid-template-columns: 7.5rem 1fr;   /* label | value */
    gap:.5rem;
    color: var(--muted) !important;
  }
}


/* 6) Desktop: slightly narrower rows for density (still comfy) */
@media (min-width:641px){
  #page-debts  .table-compact th, #page-debts  .table-compact td,
  #page-stores .table-compact th, #page-stores .table-compact td{
    padding-top:.5rem !important; padding-bottom:.5rem !important;
  }
}
/* Gold store names — match the debt page tone */
:root{ --gold: #fde68a; } /* Tailwind yellow-200 */

#page-debts  td[data-label="Store"],
#page-stores td[data-label="Store"],
#page-payments td[data-label="Store"]{
  color: var(--gold) !important;
  font-weight: 800 !important; /* similar to debt page's extra-bold look */
}

/* Order cards: the bold line with the store name */
.order-card .mt-1.text-sm .font-semibold{
  color: var(--gold) !important;
}

/* Keep the small "Store" label grey in stacked/mobile tables */
@media (max-width:640px){
  #page-debts  .table-compact.stacked td[data-label="Store"]::before,
  #page-stores .table-compact.stacked td[data-label="Store"]::before,
  #page-payments .table-compact.stacked td[data-label="Store"]::before{
    color:#d1d5db !important;
  }
}
/* Telegram Desktop performance helpers */
.tg-desktop-lite .card,
.tg-desktop-lite .glass-strong,
.tg-desktop-lite .bottom-nav{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(15,23,42,.92) !important;
}
.tg-desktop-lite body::before{ will-change: auto; }
.tg-desktop-lite *{ transition-duration:.12s !important; }

/* ——— booz badge next to Menu (large) ——— */
.booz-badge{
  position: relative;
  display: inline-flex; align-items: center; gap:.5rem;
  padding:.48rem .75rem;                 /* a bit more space for h-10 */
  border-radius:9999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(203,213,225,.25);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  will-change: transform, box-shadow;
  isolation: isolate;
  animation: booz-float 8s ease-in-out infinite;
}
.booz-badge:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(59,130,246,.35);
  border-color: color-mix(in oklab, var(--ring, #3b82f6), white 30%);
}
.booz-badge img{
  /* height is controlled by Tailwind h-10 on the element */
  display:block;
  width:auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.booz-text{
  font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.9rem; line-height:1;        /* slightly larger text to match icon */
  background: linear-gradient(110deg,#fff 0%, #cde 40%, #fff 60%, #cde 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size: 200% 100%;
  animation: booz-shine 2.8s var(--ease) infinite;
}

/* ambient glow + sweep */
.booz-badge::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  border-radius: inherit;
  background: radial-gradient(120% 140% at 10% 10%, rgba(59,130,246,.18), transparent 60%),
              radial-gradient(120% 140% at 90% 90%, rgba(14,165,233,.16), transparent 60%);
}
.booz-badge::after{
  content:""; position:absolute; top:0; bottom:0; left:-30%; width:28%;
  transform: skewX(-15deg);
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.24), transparent);
  filter: blur(2px);
  animation: booz-sweep 4.2s var(--ease) infinite;
  opacity:.9;
}

/* keyframes */
@keyframes booz-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-2px) } }
@keyframes booz-sweep{ 0%{ left:-30% } 55%{ left:130% } 100%{ left:130% } }
@keyframes booz-shine{ 0%{ background-position: 200% 0 } 100%{ background-position: -200% 0 } }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .booz-badge{ animation:none; }
  .booz-badge::after{ animation:none; opacity:0; }
  .booz-text{ animation:none; background:none; color:#fff; }
}

/* === KPI color accents ===================================== */
.kpi{
  --kpi: var(--brand, #3b82f6);
  position: relative;
  overflow: hidden;
}
.kpi::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:3px;
  background: var(--kpi);
  opacity:.95; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);
}
.kpi .value{
  color: var(--kpi) !important;
  text-shadow: 0 0 14px color-mix(in oklab, var(--kpi), transparent 85%);
}

/* Map tiles to your existing palette */
.kpi-orders{      --kpi: var(--brand, #3b82f6); }            /* blue */
.kpi-delivered{   --kpi: var(--amt-delivered); }             /* green */
.kpi-paid{        --kpi: var(--amt-paid); }                  /* sky   */
.kpi-outstanding{ --kpi: var(--amt-outstanding); }           /* red   */
.kpi-active{      --kpi: var(--amt-attn); }                   /* amber */
.kpi-expenses{    --kpi: #fda4af; }                           /* rose-300 */
.kpi-today{       --kpi: var(--amt-delivered); }              /* green */

/* Optional: subtle colored haze in the corner */
.kpi::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 120% at 110% -10%, color-mix(in oklab, var(--kpi), transparent 85%), transparent 60%);
  pointer-events:none;
}

/* Full-page blur when auth/access overlays are open */
.modal-blur #app-shell{
  filter: blur(16px) saturate(.9);
  transform: translateZ(0);
}

/* Read-only look for Unit Price + Name */
.card input.co-unit[readonly],
.card input.co-name[readonly]{
  cursor: not-allowed;
  opacity: .9;
  background: rgba(2,6,23,.55) !important;
}
/* ==== Telegram-only production polish (drop at END of <style>) ==== */

/* 1) Card look — consistent, modern, and readable */
.card,
.order-card {
  border-radius: 16px !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  background: rgba(15,23,42,.86) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.28) !important;
}

/* Lift on hover (desktop only) */
@media (hover:hover){
  .card:hover,
  .order-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 56px rgba(0,0,0,.34);
    border-color: rgba(148,163,184,.32);
    transition: transform .2s cubic-bezier(.2,.9,.2,1), box-shadow .2s cubic-bezier(.2,.9,.2,1);
  }
}

/* 2) Color the two order action buttons (no HTML change needed) */
.order-actions [data-oo] {                  /* "Original Order" */
  background: linear-gradient(180deg, #3b82f6, #1f6bff) !important;  /* brand blue */
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  box-shadow: 0 10px 24px rgba(59,130,246,.35) !important;
  font-weight: 800;
}
.order-actions [data-oo]:hover {
  filter: brightness(1.05);
}
.order-actions [data-oo]:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(59,130,246,.30) !important;
}

/* Delivered Products toggle */
.order-actions [data-toggle-products] {
  background: linear-gradient(180deg, #22c55e, #16a34a) !important; /* emerald */
  color: #062b16 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 24px rgba(22,163,74,.35) !important;
  font-weight: 800;
}
.order-actions [data-toggle-products]:hover {
  filter: brightness(1.05);
}

/* Optional “open” state color bump (wired by JS below) */
.order-actions .order-toggle.is-open {
  background: linear-gradient(180deg, #16a34a, #15803d) !important;
  color: #eafff2 !important;
}

/* 3) Make order cards read cleaner */
.order-card .order-header { align-items: center; }
.order-card .order-num { font-size: 1.25rem; letter-spacing: .02em; }
.order-card .order-meta { row-gap: .22rem; }
.order-card .order-actions { gap: .5rem; }
.order-card .order-actions button {
  padding: .55rem .85rem !important;
  border-radius: .85rem !important;
}

/* 4) Telegram Desktop fullscreen ergonomics */
.tg-desktop-lite main {
  max-width: 1200px;           /* keeps lines readable on ultra-wide */
  margin: 0 auto;
}
.tg-desktop-lite .bottom-nav { /* keep bottom nav crisp on desktop */
  transform: translateZ(0);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* 5) Focus ring (keyboard/a11y) */
.order-actions button:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--brand, #3b82f6), white 12%),
    0 0 0 6px color-mix(in oklab, var(--brand, #3b82f6), transparent 85%) !important;
}

/* 6) Small mobile niceties */
@media (max-width:640px){
  .order-card { padding: .85rem !important; }
  .order-card .order-meta { grid-template-columns: 7.5rem 1fr; }
}
/* Center the whole app for Telegram phones */
.tg-phone #app-shell{ justify-content: center; }
.tg-phone main{
  flex: 0 1 720px;      /* stop flex:1 from stretching full width */
  max-width: 720px;
  width: 100%;
  margin: 0 auto;       /* belt & suspenders */
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}
/* Orders action buttons → two rows:
   Row 1: Edit / Delete
   Row 2: Original Order / Delivered Products */
.order-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.order-actions button{ width: 100%; }

/* Row placement by data-attributes you already use */
.order-actions [data-edit-order],
.order-actions [data-delete-order]{ grid-row: 1; }

.order-actions [data-oo],
.order-actions [data-toggle-products]{ grid-row: 2; }
/* ===== Orders controls: put Export + New Order ABOVE the search bar ===== */
#page-orders #ordersTable .flex.items-center.gap-2{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* two neat columns */
  gap: .5rem .5rem;
  align-items: center;
}

/* Top row (buttons) */
#ordersExport{        grid-row:1; grid-column:1; justify-self:start; }
#openCreateOrderBtn{  grid-row:1; grid-column:2; justify-self:end; }

/* Bottom row (search + status) */
#ordersSearch{        grid-row:2; grid-column:1; }
#ordersStatusFilter{  grid-row:2; grid-column:2; }

/* Make the two buttons smaller */
#ordersExport,
#openCreateOrderBtn{
  font-size: .82rem !important;
  padding: .4rem .6rem !important;
  border-radius: .65rem !important;
}

/* Slightly tighten the search + filter so the block feels compact */
#ordersSearch,
#ordersStatusFilter{
  padding: .45rem .6rem !important;
  font-size: .9rem !important;
}

/* Phones: stack to one column for max clarity inside Telegram */
@media (max-width: 520px){
  #page-orders #ordersTable .flex.items-center.gap-2{
    grid-template-columns: 1fr;
  }
  #ordersExport{        grid-row:1; grid-column:1; justify-self:stretch; }
  #openCreateOrderBtn{  grid-row:2; grid-column:1; justify-self:stretch; }
  #ordersSearch{        grid-row:3; grid-column:1; }
  #ordersStatusFilter{  grid-row:4; grid-column:1; }
}
/* Create Order: phone-first form */
@media (max-width: 639px){
  /* Let the sheet content scroll vertically on phone */
  #createOrderSheet .form-scroll {
    max-height: 72vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Kill forced wide tables on phone */
  #createOrderSheet table { min-width: 0 !important; }
  #createOrderSheet thead { display: none; }

  /* Stacked row labels like your other 'stacked' tables */
  #createOrderSheet td[data-label] {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: .25rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  #createOrderSheet td[data-label]::before {
    content: attr(data-label);
    font-size: 12px;
    opacity: .7;
  }

  /* Inputs fill width on phone */
  #createOrderSheet input.co-qty,
  #createOrderSheet input.co-unit,
  #createOrderSheet input.co-name,
  #createOrderSheet select.co-prod {
    width: 100% !important;
  }
}

/* Nice right alignment for totals (all sizes) */
#createOrderSheet .co-line { text-align: right; }
/* Create + Edit Order: phone-first stacked table + vertical scroll */
@media (max-width: 639px){
  #createOrderSheet .form-scroll,
  #editOrderSheet   .form-scroll{
    max-height: 72vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #createOrderSheet table,
  #editOrderSheet   table { min-width: 0 !important; }

  /* Hide table headers on small screens when stacked */
  #createOrderSheet .stacked thead,
  #editOrderSheet   .stacked thead { display: none; }

  /* Cells show their label above the control */
  #createOrderSheet td[data-label],
  #editOrderSheet   td[data-label]{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: .25rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  #createOrderSheet td[data-label]::before,
  #editOrderSheet   td[data-label]::before{
    content: attr(data-label);
    font-size: 12px;
    opacity: .7;
  }

  /* Inputs fill width on phones */
  #createOrderSheet input.co-qty,
  #createOrderSheet input.co-unit,
  #createOrderSheet input.co-name,
  #createOrderSheet select.co-prod,
  #editOrderSheet   input.eo-qty,
  #editOrderSheet   input.eo-unit,
  #editOrderSheet   input.eo-name,
  #editOrderSheet   select.eo-prod{
    width: 100% !important;
  }
}

/* Right-align line totals (both sheets) */
#createOrderSheet .co-line,
#editOrderSheet   .eo-line { text-align: right; }

/* put once in your CSS */
.no-blur, .no-blur * { filter: none !important; backdrop-filter: none !important; }

/* --- Key-Value Table (professional) --- */
.kv {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel, #fff);
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.kv table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kv tbody tr:nth-child(odd) th,
.kv tbody tr:nth-child(odd) td { background: #fbfbfc; }
.kv th, .kv td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border, #eef0f3);
  vertical-align: top;
}
.kv tbody tr:last-child th,
.kv tbody tr:last-child td { border-bottom: 0; }
.kv th {
  width: 36%;
  text-align: left;
  font-weight: 600;
  color: #6b7280;      /* slate-500 */
  background: #f9fafb; /* slate-50 */
}
.kv td { color: #111827; } /* slate-900 */
.kv .prewrap { white-space: pre-wrap; word-break: break-word; }

/* Responsive stacking for small screens */
@media (max-width: 520px){
  .kv table, .kv tbody, .kv tr, .kv th, .kv td { display: block; width: 100%; }
  .kv tr { border-bottom: 1px solid var(--border, #eef0f3); }
  .kv tr:last-child { border-bottom: 0; }
  .kv th { background: transparent; border-bottom: 0; padding-bottom: 4px; }
  .kv td { padding-top: 0; }
}
.order-meta{
    display:grid;
    grid-template-columns:max-content 1fr;
    column-gap:.75rem;
    row-gap:.25rem;
    align-items:center;
  }
  .order-meta .label{opacity:.7}
  /* Let canvases fill their wrapper */
.chartWrap > canvas { width:100% !important; height:100% !important; }

/* Desktop sizes */
@media (min-width:1024px){ .chartWrap { height: 460px; } }
@media (min-width:1280px){ .chartWrap { height: 500px; } }

/* Telegram Desktop boost */
.is-tg-desktop .chartWrap { height: 380px; }
/* Canvas must fill the wrapper box */
.chartWrap > canvas { width: 100% !important; height: 100% !important; display: block; }

/* Desktop: match Sample’s taller feel */
@media (min-width: 1024px) { .chartWrap { height: 420px; } }   /* lg */
@media (min-width: 1280px) { .chartWrap { height: 460px; } }   /* xl */

/* Debt chart slightly smaller on desktop only */
@media (min-width: 1024px) {  /* lg */
  .chartWrap--debt { height: 360px !important; }
}
@media (min-width: 1280px) {  /* xl */
  .chartWrap--debt { height: 400px !important; }
}

/* Telegram Desktop webview sizing */
.is-tg-desktop .chartWrap--debt { height: 340px !important; }

/* === Debts page desktop layout — wider 2-up cards === */

/* widen the overlay/container on desktop */
@media (min-width: 768px){
  #portal-debts-screen .mx-auto,
  #orders-area {                /* safe fallback if .mx-auto isn't the wrapper */
    max-width: 1080px;          /* tweak to 1240/1280 if you like */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/* grid: 1 column on mobile, 2 roomy columns on tablet/desktop */
#orders-area .debts-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;                    /* was .75rem */
}
@media (min-width: 768px){
  /* each column is at least 520px, then fills the rest evenly */
  #orders-area .debts-grid{
    grid-template-columns: repeat(2, minmax(520px, 1fr));
  }
}

/* make sure cards fill their grid cell fully */
#orders-area .debts-grid > article.card{
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto;
}

/* keep cards normal blocks; avoid inherited flex/height tricks */
#orders-area article.card{ display:block; height:auto; }

/* prevent the Add Payment button from stretching vertically */
#orders-area article.card .btn-primary{
  height: auto !important;
  align-self: auto;
  white-space: normal;          /* allows wrapping in AR/TR text */
}

/* long order numbers wrap cleanly */
#orders-area .order-num{
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Loading Report UI helpers */
.chip{
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.15rem .5rem; border-radius:9999px; border:1px solid rgba(148,163,184,.35);
  font-size:.75rem; line-height:1; white-space:nowrap;
}
.metric-card{
  border:1px solid rgba(148,163,184,.25); border-radius:1rem; padding:.75rem 1rem;
  background:linear-gradient(180deg, rgba(148,163,184,.08), rgba(148,163,184,0));
}
@media (prefers-color-scheme: dark){
  .metric-card{ background:linear-gradient(180deg, rgba(148,163,184,.10), rgba(148,163,184,0)); }
}
/* Print: only print the report body */
@media print{
  nav, header, .quick-nav, .footer, .overlay { display:none !important; }
  #page-loading-report { display:block !important; }
  body { background:#fff !important; color:#000 !important; }
  table { page-break-inside:auto; }
  tr    { page-break-inside:avoid; page-break-after:auto; }
  details { border-color:#ccc; }
}
.chip{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .5rem;border-radius:9999px;border:1px solid rgba(148,163,184,.35);font-size:.75rem;line-height:1;white-space:nowrap}
.metric-card{border:1px solid rgba(148,163,184,.25);border-radius:1rem;padding:.75rem 1rem;background:linear-gradient(180deg,rgba(148,163,184,.08),rgba(148,163,184,0))}
.chip-total{border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.10)}
.chip-unit{border-color:rgba(148,163,184,.35)}
.chip-qty{border-color:rgba(34,197,94,.35)}
@media print{
  nav,header,.quick-nav,.footer,.overlay{display:none!important}
  #page-loading-report{display:block!important}
  body{background:#fff!important;color:#000!important}
}
/* Keep content left-to-right even when the page is RTL */
.dir-ltr {
  direction: ltr;
  unicode-bidi: isolate; /* isolate bidi so surrounding RTL doesn’t affect this span */
}
/* Flip the table inline direction when in RTL UI */
.kv table.kv-rtl{ direction: rtl; }

/* Align label/value for readability in RTL blocks */
.kv table.kv-rtl th{ text-align: right; }
.kv table.kv-rtl td{ text-align: left; }

/* (From earlier) LTR islands for numbers like phone/zip/order/payment IDs */
.dir-ltr { direction: ltr; unicode-bidi: isolate; }
/* === Product-like rows, RTL-aware === */
.kv-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.kv-row-start{align-items:flex-start}
.kv-label{opacity:.6;font-size:.75rem;line-height:1.2}
.kv-value{text-align:right}
[dir="rtl"] .kv-row{flex-direction:row-reverse}
[dir="rtl"] .kv-value{text-align:left}
/* Live chip */
.live-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:700; line-height:1;
  padding:.35rem .6rem; border-radius:9999px;
  background: rgba(16,185,129,.14); /* emerald glow */
  color:#86efac; border:1px solid rgba(16,185,129,.35);
}
.live-chip .dot{
  width:.55rem; height:.55rem; border-radius:9999px;
  background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.2);
  animation: pulseDot 1.4s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100% { transform: scale(1); opacity: .9; }
  50%     { transform: scale(1.25); opacity: 1; }
}

</style>
<style id="menu-white-buttons">
  /* simple responsive grid */
  #page-menu #menuGrid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap:12px;
  }
  /* make ghost buttons white with black text inside the Menu grid only */
  #page-menu #menuGrid .btn.btn-ghost{
    background:#066dbb !important;
    color:#ffffff !important;
    border-color: rgba(0,0,0,.12);
  }
  #page-menu #menuGrid .btn.btn-ghost:hover{
    background:#d3ac12 !important;
    border-color: rgba(0,0,0,.24);
  }
  #page-menu #menuGrid .btn.btn-ghost{
  text-align: center;
  display: flex;              /* ensure centering works even if .btn isn’t flex */
  align-items: center;
  justify-content: center;
}

</style>