/* ============================================================
   SIROKA Warranty Desk — brand tokens
   Palette drawn from the physical warranty card: charcoal ink,
   cream card-stock, and the hand-stamped ember red serial numbers.
   ============================================================ */
:root{
  --ink:        #1c1a19;
  --paper:      #f6f3ec;
  --paper-2:    #efeade;
  --ember:      #c1272d;
  --ember-dark: #8f1a1f;
  --slate:      #6b655d;
  --line:       #ddd6c7;
  --success:    #2f7d4f;
  --warning:    #b8791a;
  --danger:     #b23a2e;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
}

*{ box-sizing:border-box; }

html{ overflow-x: hidden; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Horizontally-scrolling strip for a row of items that can be wider than
   the screen on mobile (e.g. a Bootstrap .btn-group filter row with 5+
   buttons) — scopes the overflow to just that row instead of letting it
   force the whole page wider. Same idea as .siroka-chip-row below, as a
   reusable wrapper for any such row rather than a chip-specific one. */
.siroka-scroll-tabs{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.siroka-scroll-tabs::-webkit-scrollbar{ display:none; }
.siroka-scroll-tabs > .btn-group{ flex-wrap: nowrap; }

h1,h2,h3,h4,h5,.display-font{ font-family: var(--font-display); letter-spacing: -0.01em; }
.mono{ font-family: var(--font-mono); }

a{ color: var(--ember); }
a:hover{ color: var(--ember-dark); }

/* ---------------- Desktop: fixed left sidebar ---------------- */
.siroka-sidebar{
  position: fixed; top:0; left:0; bottom:0; width:240px; z-index:1030;
  background: var(--ink); color:#fff;
  flex-direction:column;
  border-right: 3px solid var(--ember);
}
.siroka-sidebar-brand{ padding: 1.15rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.1); }
.siroka-sidebar-nav{ flex:1 1 auto; overflow-y:auto; padding: .75rem .75rem; }
.siroka-sidebar-nav .nav-link{
  color: rgba(255,255,255,.75); font-weight:500; border-radius:.5rem;
  padding:.6rem .75rem; margin-bottom:.15rem; display:flex; align-items:center; gap:.65rem;
}
.siroka-sidebar-nav .nav-link i{ width:18px; text-align:center; }
.siroka-sidebar-nav .nav-link:hover{ color:#fff; background: rgba(255,255,255,.08); }
.siroka-sidebar-nav .nav-link.active{ color:#fff; background: var(--ember); }
.siroka-sidebar-footer{ border-top:1px solid rgba(255,255,255,.1); padding:.65rem; }
.siroka-sidebar-clock{ color: rgba(255,255,255,.5); font-size:.72rem; padding: .1rem .5rem .5rem; }
.siroka-sidebar-user{
  display:flex; align-items:center; gap:.6rem; width:100%;
  background:transparent; border:none; color:#fff; padding:.5rem; border-radius:.5rem; text-align:left;
}
.siroka-sidebar-user:hover{ background: rgba(255,255,255,.08); }
.siroka-sidebar-user .name{ font-size:.85rem; font-weight:600; line-height:1.2; }
.siroka-sidebar-user .role{ font-size:.68rem; color: rgba(255,255,255,.5); }

/* brand mark, shared by sidebar / mobile topbar / offcanvas */
.siroka-brand{
  display:flex; align-items:center; gap:.5rem;
  font-family: var(--font-display); font-weight: 700;
  color: #fff !important; letter-spacing: .03em; text-decoration:none;
}
.brand-mark{
  width: 30px; height:30px; border-radius:50%; flex-shrink:0;
  background: var(--ember);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.8rem;
}
.brand-word{ font-size:1.1rem; }
.avatar-chip{
  width:28px; height:28px; border-radius:50%;
  background: var(--ember); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:700; flex-shrink:0;
}

/* ---------------- Mobile: slim top bar ---------------- */
.siroka-topbar-mobile{
  background: var(--ink); color:#fff;
  padding:.6rem .9rem; border-bottom:3px solid var(--ember);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:1020;
}
.siroka-topbar-mobile .brand-word{ font-size:1rem; }
.siroka-avatar-btn{ background:none; border:none; padding:0; line-height:0; }

/* ---------------- Mobile: bottom tab bar with FAB notch ---------------- */
.siroka-bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:1040;
  background:#fff; border-top:1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  display:flex; align-items:stretch;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.siroka-bottom-nav .bn-item{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.2rem; padding:.5rem .2rem .4rem; color: var(--slate); text-decoration:none;
  font-size:.66rem; font-weight:600; border:none; background:none; white-space:nowrap;
}
.siroka-bottom-nav .bn-item i{ font-size:1.05rem; }
.siroka-bottom-nav .bn-item.active,
.siroka-bottom-nav .bn-item:hover{ color: var(--ember); }
.bn-fab-slot{ flex:1 1 0; position:relative; }
.bn-fab{
  position:absolute; left:50%; bottom:.5rem; transform:translateX(-50%);
  width:52px; height:52px; border-radius:50%;
  background: var(--ember); color:#fff; border:3px solid var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; box-shadow: 0 8px 20px rgba(193,39,45,.4);
}
.bn-fab:hover{ background: var(--ember-dark); color:#fff; }

/* Reserve space so the fixed bottom bar never covers content (mobile only) */
@media (max-width:991.98px){
  .app-content{ padding-bottom: 4.75rem; }
}
/* Desktop: offset content past the fixed sidebar */
@media (min-width:992px){
  .app-content{ margin-left:240px; width:calc(100% - 240px); max-width:1400px; }
}

/* Mobile-only offcanvas "More" drawer — reuses the same dark drawer look */
.siroka-offcanvas{
  background: var(--ink);
  color:#fff;
  width: 280px;
}
.siroka-offcanvas .offcanvas-body{
  /* Bootstrap already sets flex-grow + overflow-y:auto here, but this
     drawer now lists every nav item (not just the non-bottom-tab ones —
     see includes/header.php), so on a short viewport (older/smaller
     phones, or the browser's address bar eating into the visible height)
     the list can run taller than the drawer. Stated explicitly rather
     than relying on the Bootstrap default surviving future CSS changes,
     so Log out — pinned to the bottom via mb-auto on the item above it —
     is always reachable by scrolling instead of silently cut off. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.siroka-offcanvas .offcanvas-header{ border-bottom:1px solid rgba(255,255,255,.1); }
.siroka-offcanvas-user{
  display:flex; align-items:center; gap:.6rem;
  padding-bottom: .9rem; border-bottom:1px solid rgba(255,255,255,.1);
  color:#fff;
}
.siroka-offcanvas .nav-link{
  color: rgba(255,255,255,.75); font-weight:500;
  padding:.65rem .5rem; border-radius:.4rem;
}
.siroka-offcanvas .nav-link:hover,
.siroka-offcanvas .nav-link.active{
  color:#fff; background: rgba(255,255,255,.08);
}
.siroka-offcanvas-divider{ border-color: rgba(255,255,255,.12); margin:.5rem 0; }
.siroka-offcanvas-logout{
  color: rgba(255,255,255,.75) !important;
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:.9rem; margin-top:.5rem;
}
.siroka-offcanvas-logout:hover{ color:#fff !important; }

/* ---------------- Dashboard business snapshot (admin) ---------------- */
.siroka-snapshot{
  background: var(--ink); color:#fff; border-radius:16px;
  padding: 1.2rem 1.2rem 0;
  overflow:hidden;
}
.siroka-snapshot-head{ padding-bottom: 1rem; }
.siroka-snapshot-stats{
  display:flex; gap:.7rem; overflow-x:auto;
  padding-bottom: 1.1rem; margin: 0 -1.2rem; padding-left:1.2rem; padding-right:1.2rem;
  scrollbar-width:none;
}
.siroka-snapshot-stats::-webkit-scrollbar{ display:none; }
.siroka-snapshot-chip{
  flex: 0 0 auto; min-width:130px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:.75rem .9rem;
}
.siroka-snapshot-chip .chip-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color: rgba(255,255,255,.55); margin-bottom:.25rem; }
.siroka-snapshot-chip .chip-value{ font-family: var(--font-mono); font-size:1.15rem; font-weight:600; }
.siroka-snapshot-chip.owe .chip-value{ color:#ff8f85; }
.siroka-snapshot-chip.owed .chip-value{ color:#7be0af; }

/* Ledger-tape row: colored left edge — red=out/debit, green=in/credit, amber=pending.
   Used consistently for ledger-style lists (dashboard activity, statements). */
.ledger-row{
  display:flex; justify-content:space-between; align-items:center; gap:.75rem;
  padding:.7rem .9rem; border-left:4px solid var(--line); border-radius:8px;
  background: var(--paper-2); margin-bottom:.5rem;
}
.ledger-row:last-child{ margin-bottom:0; }
.ledger-row.out{ border-left-color: var(--danger); }
.ledger-row.in{ border-left-color: var(--success); }
.ledger-row.pending{ border-left-color: var(--warning); }
.ledger-row .ledger-title{ font-weight:600; font-size:.9rem; }
.ledger-row .ledger-subtitle{ font-size:.78rem; color: var(--slate); }
.ledger-row .ledger-amount{ font-family: var(--font-mono); font-weight:600; white-space:nowrap; }
.ledger-row.out .ledger-amount{ color: var(--danger); }
.ledger-row.in .ledger-amount{ color: var(--success); }
.ledger-row.pending .ledger-amount{ color: var(--warning); }

/* ---------------- Layout ---------------- */

/* Retailer order screen: catalog rows + sticky cart bar */
.siroka-catalog-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:.85rem 0; border-bottom:1px solid var(--line);
}
.siroka-catalog-row:last-child{ border-bottom:none; }
.siroka-qty-stepper{ display:flex; align-items:center; gap:.6rem; }
.siroka-qty-stepper .qty-value{ min-width:1.5rem; text-align:center; font-weight:600; }

.siroka-chip-row{ display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; padding-bottom:.1rem; }
.siroka-chip-row::-webkit-scrollbar{ display:none; }
.siroka-chip{
  flex:0 0 auto; border:1px solid var(--line); background:#fff; color: var(--ink);
  border-radius:20px; padding:.4rem .95rem; font-size:.82rem; font-weight:600;
  white-space:nowrap;
}
.siroka-chip.active{ background: var(--ember); border-color: var(--ember); color:#fff; }

.siroka-cart-bar{
  position: fixed; left:0; right:0; bottom:0; z-index: 1030;
  background:#fff; border-top:1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
@media (max-width:991.98px){
  .siroka-cart-bar{ bottom: 4.75rem; } /* sit above the mobile bottom tab bar */
}
.siroka-cart-bar-inner{
  max-width:1320px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  padding: .85rem 1rem;
}
body:has(.siroka-cart-bar) .app-content{ padding-bottom: 6rem; }
@media (max-width:991.98px){
  body:has(.siroka-cart-bar) .app-content{ padding-bottom: 10rem; } /* cart bar + bottom nav, stacked */
}
.siroka-cart-bar-spacer{ height: 6rem; }


/* ---------------- Ticket-stub card (signature element) ----------------
   Echoes the perforated cut-line on the physical Siroka gift coupon /
   warranty card: a dashed divider with punch-hole notches.            */
.stub-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  position:relative;
  overflow:visible;
  box-shadow: 0 1px 2px rgba(28,26,25,.04);
}
.stub-card .stub-divider{
  border-top: 2px dashed var(--line);
  position:relative;
  margin: 0 -1px;
}
.stub-card .stub-divider::before,
.stub-card .stub-divider::after{
  content:"";
  position:absolute; top:-8px;
  width:16px; height:16px; border-radius:50%;
  background: var(--paper);
  border:1px solid var(--line);
}
.stub-card .stub-divider::before{ left:-9px; }
.stub-card .stub-divider::after{ right:-9px; }

/* ---------------- Stat cards ---------------- */
.stat-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:1.25rem 1.4rem;
  height:100%;
  transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(28,26,25,.08); }
.stat-card .stat-icon{
  width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:#fff;
}
.stat-card .stat-value{ font-family: var(--font-display); font-size:1.9rem; font-weight:700; line-height:1; }
.stat-card .stat-label{ color: var(--slate); font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; }

.bg-ember{ background: var(--ember); }
.bg-ink{ background: var(--ink); }
.bg-success-soft{ background: var(--success); }
.bg-warning-soft{ background: var(--warning); }

/* ---------------- Buttons ---------------- */
.btn-ember{
  background: var(--ember); border-color: var(--ember); color:#fff;
}
.btn-ember:hover{ background: var(--ember-dark); border-color: var(--ember-dark); color:#fff; }
.btn-outline-ember{
  border-color: var(--ember); color: var(--ember); background:transparent;
}
.btn-outline-ember:hover{ background: var(--ember); color:#fff; }
.btn-ink{ background: var(--ink); border-color: var(--ink); color:#fff; }
.btn-ink:hover{ background:#000; border-color:#000; color:#fff; }
.btn-outline-ink{ border-color: var(--ink); color: var(--ink); }
.btn-outline-ink:hover{ background: var(--ink); border-color: var(--ink); color:#fff; }
.btn-check:checked + .btn-outline-ink{ background: var(--ink); border-color: var(--ink); color:#fff; }

/* ---------------- Badges ---------------- */
.badge-status{ font-weight:600; font-size:.72rem; padding:.4em .65em; border-radius:20px; letter-spacing:.02em; }
.badge-active{ background: rgba(47,125,79,.12); color: var(--success); }
.badge-expiring{ background: rgba(184,121,26,.14); color: var(--warning); }
.badge-expired{ background: rgba(178,58,46,.12); color: var(--danger); }
.badge-void{ background: rgba(107,101,93,.14); color: var(--slate); }
.badge-pending{ background: rgba(184,121,26,.14); color: var(--warning); }

/* ---------------- Login page ---------------- */
.login-shell{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(1200px 600px at 15% -10%, #2a2523 0%, var(--ink) 55%);
  padding: 1.5rem;
}
.login-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  max-width: 880px;
  width:100%;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.login-side{
  background: var(--ink);
  color:#fff;
  padding: 3rem 2.4rem;
  position:relative;
}
.login-side::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:4px;
  background: var(--ember);
}
.login-side .flame{
  width:56px; height:56px; border-radius:50%;
  background: var(--ember);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; margin-bottom:1.5rem;
}
.login-form-side{ padding: 3rem 2.4rem; }
.form-label{ font-weight:600; font-size:.85rem; color: var(--ink); }
.form-control:focus{ border-color: var(--ember); box-shadow: 0 0 0 .2rem rgba(193,39,45,.15); }

/* ---------------- Tables ---------------- */
.table-siroka thead th{
  background: var(--ink); color:#fff;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.05em;
  border:none; font-weight:600; white-space:nowrap;
}
.table-siroka tbody tr:hover{ background: var(--paper-2); }
.table-siroka td{ vertical-align:middle; }

/* ---------------- Printable warranty card ---------------- */
@media print{
  .no-print{ display:none !important; }
  body{ background:#fff; }
}
.print-card{
  background:#fff; border:2px solid var(--ink); border-radius:12px;
  padding:2rem; max-width:640px; margin:0 auto;
}

.footer-brand-dot{ color: var(--ember); }
.siroka-footer{ color: var(--slate); border-top:1px solid var(--line); }

/* scrollbar polish (non-critical, cosmetic) */
::-webkit-scrollbar{ height:8px; width:8px; }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius:8px; }

/* ---------------- Toast notifications ---------------- */
.siroka-toast-container{
  position: fixed; right: 16px; bottom: 16px; z-index: 2000;
  display: flex; flex-direction: column; gap: 8px;
  max-width: calc(100vw - 32px); width: 360px;
}
.siroka-toast{
  display:flex; align-items:center; gap:10px;
  background: var(--ink); color: var(--paper);
  border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  font-family: var(--font-body); font-size: .92rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.siroka-toast.show{ opacity: 1; transform: translateY(0); }
.siroka-toast i{ font-size: 1.05rem; flex-shrink: 0; }
.siroka-toast-success i{ color: var(--success); }
.siroka-toast-error   i{ color: var(--danger); }
.siroka-toast-warning i{ color: var(--warning); }
.siroka-toast-info    i{ color: var(--paper); opacity:.8; }
.siroka-toast-msg{ flex: 1 1 auto; line-height: 1.35; }
.siroka-toast-close{
  background: none; border: none; color: var(--paper); opacity: .6;
  font-size: 1.1rem; line-height: 1; padding: 0 2px; cursor: pointer;
}
.siroka-toast-close:hover{ opacity: 1; }

/* ---------------- Confirm dialog ---------------- */
.siroka-confirm-overlay{
  position: fixed; inset: 0; z-index: 2100;
  background: rgba(28,26,25,.45);
  display:flex; align-items:center; justify-content:center;
  padding: 16px;
  opacity: 0; transition: opacity .15s ease;
}
.siroka-confirm-overlay.show{ opacity: 1; }
.siroka-confirm-card{
  background: var(--paper); border-radius: 14px;
  padding: 20px; max-width: 360px; width: 100%;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  transform: scale(.96); transition: transform .15s ease;
}
.siroka-confirm-overlay.show .siroka-confirm-card{ transform: scale(1); }
.siroka-confirm-msg{
  font-family: var(--font-body); color: var(--ink);
  font-size: .95rem; line-height: 1.5; margin-bottom: 16px;
}
.siroka-confirm-actions{ display:flex; justify-content:flex-end; gap:8px; }