/* ============================================================
   TonerPro Ultra — Main Styles
   File: css/main.css
   ============================================================ */

:root {
  --bg:       #f0f4fa;
  --white:    #ffffff;
  --sb:       #e2e8f0;
  --sb2:      #cbd5e1;
  --c1:       #0ea5e9;
  --c2:       #6366f1;
  --c3:       #10b981;
  --c4:       #f59e0b;
  --c5:       #ec4899;
  --er:       #ef4444;
  --wr:       #f59e0b;
  --ok:       #10b981;
  --tx:       #0f172a;
  --t2:       #475569;
  --t3:       #94a3b8;
  --f:        'Outfit', sans-serif;
  --m:        'JetBrains Mono', monospace;
  --shadow:   0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:0 4px 6px rgba(0,0,0,.07), 0 12px 40px rgba(0,0,0,.1);
  --shadow-xl:0 8px 16px rgba(0,0,0,.08), 0 32px 80px rgba(0,0,0,.12);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body { background:var(--bg); color:var(--tx); font-family:var(--f); min-height:100vh; overflow-x:hidden }

/* ── SIDEBAR ──────────────────────────────────────────── */
.sb { width:255px; height:100vh; position:fixed; left:0; top:0; z-index:200;
  background:var(--white); border-right:1px solid var(--sb);
  display:flex; flex-direction:column; box-shadow:2px 0 12px rgba(0,0,0,.05);
  transition: transform .3s cubic-bezier(.16,1,.3,1); }

.sblogo { padding:22px 20px 18px; border-bottom:1px solid var(--sb);
  display:flex; align-items:center; gap:11px }
.sbm { width:38px; height:38px; border-radius:0;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0 }
.sblt { font-size:16px; font-weight:800; color:var(--tx) }
.sblt b { background:linear-gradient(135deg,var(--c1),var(--c2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.sblv { font-size:9px; color:var(--t3); font-family:var(--m) }

.sbu { padding:12px 16px; margin:10px 10px 0; border-radius:13px;
  background:linear-gradient(135deg,#f0f9ff,#eff6ff);
  border:1px solid #bae6fd; display:flex; align-items:center; gap:11px }
.sbav { width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,var(--c2),var(--c5));
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff; flex-shrink:0 }
.sbun { font-size:13px; font-weight:600; color:var(--tx) }
.sbur { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--c1) }

.sbnav { flex:1; padding:14px 10px; overflow-y:auto }
.sbnav::-webkit-scrollbar { width:3px }
.sbnav::-webkit-scrollbar-thumb { background:var(--sb2); border-radius:3px }

.nbsec { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--t3); padding:0 10px; margin:16px 0 6px }
.nbsec:first-child { margin-top:2px }

.nb { width:100%; display:flex; align-items:center; gap:9px; padding:10px 12px;
  border-radius:10px; cursor:pointer; font-size:13px; font-weight:500; color:var(--t2);
  background:none; border:none; font-family:var(--f); text-align:left; transition:all .18s }
.nb:hover { color:var(--tx); background:#f8fafc }
.nb.act { color:var(--c1); background:#f0f9ff; font-weight:600; border:1px solid #bae6fd }
.nb .ni { font-size:16px; width:20px; text-align:center; flex-shrink:0 }

.sbft { padding:14px 10px 18px; border-top:1px solid var(--sb) }
.live { display:flex; align-items:center; gap:7px; padding:9px 12px; border-radius:9px;
  background:#f0fdf4; border:1px solid #bbf7d0; margin-bottom:9px }
.ldot { width:7px; height:7px; border-radius:50%; background:var(--ok);
  animation:lp 2s ease-in-out infinite; flex-shrink:0 }
@keyframes lp { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.4)} 50%{box-shadow:0 0 0 5px rgba(16,185,129,0)} }
.ltx { font-size:11px; color:#065f46; font-weight:600 }
.lclk { font-size:10px; font-family:var(--m); color:var(--t3); margin-left:auto }

.lgout { width:100%; padding:10px; border-radius:9px; cursor:pointer;
  background:#fef2f2; border:1px solid #fecaca; color:var(--er);
  font-size:12px; font-weight:600; font-family:var(--f); transition:all .2s;
  display:flex; align-items:center; justify-content:center; gap:6px }
.lgout:hover { background:#fee2e2 }

/* ── MAIN CONTENT ─────────────────────────────────────── */
.main { margin-left:255px; padding:28px 32px; min-height:100vh; background:var(--bg) }
.page { display:none; }
.page.act { display:block; animation:pi .3s cubic-bezier(.16,1,.3,1) both }
@keyframes pi { from{opacity:0;transform:translateY(12px)} }

.pgh { display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:26px; flex-wrap:wrap; gap:12px }
.pgt { font-size:25px; font-weight:800; color:var(--tx); letter-spacing:-.02em }
.pgs { font-size:13px; color:var(--t2); margin-top:3px }
.pgact { display:flex; align-items:center; gap:9px; flex-wrap:wrap }

/* ── SHARED COMPONENTS ────────────────────────────────── */
.btn { padding:10px 18px; border-radius:10px; font-size:13px; font-weight:600;
  cursor:pointer; border:none; font-family:var(--f); transition:all .2s;
  display:inline-flex; align-items:center; gap:6px }
.btn-g  { background:var(--white); border:1.5px solid var(--sb); color:var(--t2); box-shadow:var(--shadow) }
.btn-g:hover { border-color:var(--c1); color:var(--c1); background:#f0f9ff }
.btn-p  { background:linear-gradient(135deg,var(--c1),var(--c2)); color:#fff; font-weight:700;
  box-shadow:0 4px 14px rgba(14,165,233,.3) }
.btn-p:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(14,165,233,.4) }
.btn-ok { background:linear-gradient(135deg,var(--c3),#059669); color:#fff;
  font-weight:700; box-shadow:0 4px 14px rgba(16,185,129,.3) }
.btn-ok:hover { transform:translateY(-1px) }
.btn-er { background:#fef2f2; border:1px solid #fecaca; color:var(--er) }
.btn-er:hover { background:#fee2e2 }
.btn-sm { padding:7px 12px; font-size:12px }

.card { background:var(--white); border:1px solid var(--sb); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow) }
.ch { padding:16px 22px; border-bottom:1px solid var(--sb);
  display:flex; align-items:center; justify-content:space-between; background:var(--white) }
.ch h3 { font-size:14px; font-weight:700; color:var(--tx) }
.chr { display:flex; align-items:center; gap:8px }

.tbl { width:100%; border-collapse:collapse }
.tbl th { padding:11px 18px; text-align:left; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--t3);
  border-bottom:1px solid var(--sb); background:#fafbfc }
.tbl td { padding:12px 18px; font-size:13px; border-bottom:1px solid #f1f5f9; color:var(--tx) }
.tbl tbody tr { transition:background .12s }
.tbl tbody tr:hover td { background:#f8fafc }
.tbl tbody tr:last-child td { border-bottom:none }

.tag { display:inline-flex; align-items:center; gap:4px; padding:3px 9px;
  border-radius:18px; font-size:11px; font-weight:700 }
.tg { background:#dcfce7; color:#15803d; border:1px solid #bbf7d0 }
.ta { background:#fef9c3; color:#92400e; border:1px solid #fde68a }
.tr { background:#fee2e2; color:#b91c1c; border:1px solid #fecaca }
.tb { background:#dbeafe; color:#1d4ed8; border:1px solid #bfdbfe }
.tp { background:#ede9fe; color:#5b21b6; border:1px solid #c4b5fd }

.pb  { height:6px; border-radius:4px; background:#f1f5f9; overflow:hidden; flex:1 }
.pf  { height:100%; border-radius:4px; transition:width 1s cubic-bezier(.4,0,.2,1) }
.pfg { background:linear-gradient(90deg,#10b981,#34d399) }
.pfw { background:linear-gradient(90deg,#f59e0b,#fbbf24) }
.pfr { background:linear-gradient(90deg,#ef4444,#f87171); box-shadow:0 0 6px rgba(239,68,68,.3) }

.fs, .fi2 { width:100%; padding:11px 14px; border-radius:10px; background:#f8fafc;
  border:1.5px solid var(--sb); color:var(--tx); font-size:13px;
  font-family:var(--f); outline:none; transition:all .2s }
.fs { background-image:url("data:image/svg+xml,%3Csvg width='11' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
  padding-right:34px; -webkit-appearance:none; appearance:none }
.fs:focus, .fi2:focus { border-color:var(--c1); background:#fff; box-shadow:0 0 0 3px rgba(14,165,233,.1) }
.fs option { background:#fff; color:var(--tx) }

/* ── MODALS ───────────────────────────────────────────── */
.mb { position:fixed; inset:0; z-index:999; display:none; align-items:center;
  justify-content:center; background:rgba(15,23,42,.3); backdrop-filter:blur(6px) }
.mb.op { display:flex }
.mx { background:var(--white); border:1px solid var(--sb); border-radius:22px; padding:32px;
  width:480px; max-width:94vw; box-shadow:var(--shadow-xl);
  animation:mi .35s cubic-bezier(.16,1,.3,1) }
@keyframes mi { from{opacity:0;transform:scale(.96) translateY(16px)} }
.mt { font-size:19px; font-weight:700; margin-bottom:22px;
  display:flex; align-items:center; gap:9px; color:var(--tx) }
.mft { display:flex; gap:9px; margin-top:22px }
.mc  { flex:1; padding:12px; border-radius:11px; background:#f8fafc;
  border:1.5px solid var(--sb); color:var(--t2); cursor:pointer;
  font-size:13px; font-family:var(--f); transition:all .2s }
.mc:hover { background:#f1f5f9; color:var(--tx) }
.mok { flex:1; padding:12px; border-radius:11px;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  border:none; color:#fff; font-size:13px; font-weight:700;
  cursor:pointer; font-family:var(--f); transition:all .2s }
.mok:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(14,165,233,.3) }
.ff { margin-bottom:16px }
.ffl { font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--t3); margin-bottom:7px; display:block }
.fr { display:grid; grid-template-columns:1fr 1fr; gap:14px }

/* ── TOAST ────────────────────────────────────────────── */
.toast { position:fixed; bottom:26px; right:26px; z-index:9999;
  background:var(--white); border:1px solid var(--sb); border-radius:14px;
  padding:14px 18px; display:flex; align-items:center; gap:12px;
  box-shadow:var(--shadow-xl); transform:translateY(80px); opacity:0;
  transition:all .4s cubic-bezier(.16,1,.3,1); max-width:340px }
.toast.sh { transform:translateY(0); opacity:1 }
.toico { font-size:20px }
.totx  { font-size:13px; font-weight:600; color:var(--tx) }
.tosb  { font-size:11px; color:var(--t2); margin-top:2px }

/* ── UTILS ────────────────────────────────────────────── */
.krow    { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px }
.twocol  { display:grid; grid-template-columns:3fr 2fr; gap:18px }
.bgrid   { display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
.mb16    { margin-bottom:16px }
.mb20    { margin-bottom:20px }
.scx     { overflow-x:auto }
.scy     { overflow-y:auto; max-height:420px }
.emptys  { text-align:center; padding:32px; color:var(--t3); font-size:13px }
.loading { display:flex; align-items:center; justify-content:center; padding:40px; color:var(--t3); font-size:13px; gap:10px }
.spin    { width:18px; height:18px; border-radius:50%; border:2px solid var(--sb);
  border-top-color:var(--c1); animation:sp .7s linear infinite; flex-shrink:0 }
@keyframes sp { to{transform:rotate(360deg)} }
.searchi { padding:9px 14px; background:#f8fafc; border:1.5px solid var(--sb);
  border-radius:9px; color:var(--tx); font-size:12px; outline:none;
  font-family:var(--f); width:180px }
.searchi:focus { border-color:var(--c1); background:#fff }
.sdot { width:7px; height:7px; border-radius:50%; flex-shrink:0; display:inline-block }
.sdg { background:var(--ok) }
.sda { background:var(--wr) }
.sdr { background:var(--er); animation:rb 1.5s ease-in-out infinite }
@keyframes rb { 0%,100%{opacity:1} 50%{opacity:.3} }
::-webkit-scrollbar { width:5px; height:5px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--sb2); border-radius:3px }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile & Tablet Support
   ══════════════════════════════════════════════════════════ */

/* ── Mobile overlay (tap to close sidebar) ─────────────── */
.sb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(2px);
}
.sb-overlay.vis { display: block; }

/* ── Hamburger toggle button (mobile only) ─────────────── */
.sb-toggle {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 201;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--white);
  border: 1.5px solid var(--sb);
  box-shadow: var(--shadow);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all .2s;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
}
.sb-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--tx);
  border-radius: 2px;
  transition: all .25s;
}
.sb-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sb-toggle.open span:nth-child(2) { opacity: 0; }
.sb-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══════════════════════════════
   TABLET  (≤ 1024px)
   ═══════════════════════════════ */
@media (max-width: 1024px) {
  .krow   { grid-template-columns: repeat(2,1fr); }
  .twocol { grid-template-columns: 1fr; }
  .bgrid  { grid-template-columns: 1fr; }
  .stgrid { grid-template-columns: repeat(3,1fr); }
  .svc-kpi-row { grid-template-columns: repeat(2,1fr); }
  .pr-kpi-row  { grid-template-columns: repeat(2,1fr); }
  .appr-kpi-row{ grid-template-columns: repeat(3,1fr); }
  .nreq-body   { grid-template-columns: 1fr; }
  .nreq-info   { display: none; }
  .st-action-layout { grid-template-columns: 1fr; }
  .imp-upload-layout{ grid-template-columns: 1fr; }
  .svc-twocol  { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════
   MOBILE  (≤ 768px)
   ═══════════════════════════════ */
@media (max-width: 768px) {

  /* Sidebar — slides in/out */
  .sb {
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.16,1,.3,1);
    z-index: 200;
  }
  .sb.mob-open { transform: translateX(0); }

  /* Show hamburger */
  .sb-toggle { display: flex; }

  /* Main takes full width, add top padding for toggle button */
  .main {
    margin-left: 0;
    padding: 72px 16px 24px;
  }

  /* Page header — leave space for hamburger button */
  .pgh { margin-bottom: 18px; padding-left: 52px; }
  .pgt { font-size: 20px; }
  .pgact { width: 100%; justify-content: flex-start; }

  /* KPI cards — 2 columns on mobile */
  .krow        { grid-template-columns: repeat(2,1fr); gap:10px; }
  .svc-kpi-row { grid-template-columns: repeat(2,1fr); gap:10px; }
  .pr-kpi-row  { grid-template-columns: repeat(2,1fr); gap:10px; }
  .appr-kpi-row{ grid-template-columns: 1fr; gap:10px; }
  .stgrid      { grid-template-columns: repeat(2,1fr); }

  /* KPI font size */
  .knum { font-size:26px; }
  .svc-kpi-num { font-size:24px; }
  .appr-kpi-num { font-size:28px; }
  .pr-kpi-num  { font-size:20px; }

  /* Single column layouts */
  .twocol      { grid-template-columns: 1fr; }
  .bgrid       { grid-template-columns: 1fr; }
  .svc-twocol  { grid-template-columns: 1fr; }
  .nreq-body   { grid-template-columns: 1fr; }
  .nreq-info   { display: none; }
  .st-action-layout  { grid-template-columns: 1fr; }
  .imp-upload-layout { grid-template-columns: 1fr; }
  .fr          { grid-template-columns: 1fr; gap:10px; }

  /* Hero banners */
  .svc-hero { border-radius:14px; padding:16px 18px; }
  .svc-hero-title { font-size:17px; }
  .svc-hero-sub { font-size:11px; }
  .appr-hero { border-radius:14px; padding:16px 18px; }
  .appr-hero-title { font-size:17px; }

  /* Tab bars — horizontal scroll */
  .svc-main-tabs { width:100%; max-width:100%; border-radius:12px; }
  .svc-tab { padding:8px 11px; font-size:11px; }
  .pr-tabs { overflow-x:auto; width:100%; }

  /* Tables — horizontal scroll container */
  .scx { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tbl th, .tbl td { padding:10px 12px; font-size:12px; white-space:nowrap; }

  /* Cards */
  .card { border-radius:12px; }
  .ch { padding:12px 16px; }

  /* Branch cards */
  .bc { padding:16px; }
  .bc-printer-row { flex-wrap:wrap; gap:6px; }

  /* Modals */
  .mx { padding:22px 18px; border-radius:18px; width:94vw; }
  .mt { font-size:16px; }

  /* Approvals */
  .appr-card-content { flex-direction:column; }
  .appr-card-right { width:100%; border-left:none; padding-left:0; border-top:1px solid var(--sb); padding-top:14px; align-items:stretch; }
  .appr-status-pill { text-align:center; }

  /* Service alerts panel max height */
  .svc-alerts-body,
  .svc-requests-body { max-height:300px; }

  /* Log grid */
  .log2-topbar { flex-direction:column; align-items:flex-start; gap:12px; }
  .log2-topbar-right { width:100%; flex-wrap:wrap; }
  .log2-grid { grid-template-columns:1fr; }

  /* Store */
  .st-stock-grid { grid-template-columns:repeat(2,1fr); }

  /* Print report */
  .pr-branch-hdr { flex-wrap:wrap; gap:8px; }
  .pr-branch-total-wrap { width:100%; }
  .pr-branch-bar-track { width:100%; flex:1; }

  /* Import */
  .imp-preview-card { min-height:200px; }

  /* Toast position */
  .toast { bottom:16px; right:16px; left:16px; max-width:100%; }

  /* New request form */
  .nreq-type-toggle { grid-template-columns:1fr; }
  .nreq-type-tab:first-child { border-right:none; border-bottom:1px solid var(--sb); }
  .nreq-form { padding:18px; }
  .nreq-priority-grid { grid-template-columns:repeat(3,1fr); gap:8px; }

  /* Filters */
  .appr-filter-row { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .appr-filter-btn { white-space:nowrap; flex-shrink:0; }

  /* Branch search */
  .branch-search-wrap { min-width:0; width:100%; }

  /* Page action buttons full width on mobile */
  .pgact { flex-wrap:wrap; }
  .pgact .btn { flex:1; justify-content:center; min-width:120px; }

  /* Paper levels */
  .paper-printers-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════
   SMALL MOBILE  (≤ 480px)
   ═══════════════════════════════ */
@media (max-width: 480px) {
  .main { padding:68px 12px 20px; }
  .krow { grid-template-columns:1fr 1fr; gap:8px; }
  .kpi  { padding:16px 14px; }
  .knum { font-size:22px; }
  .kico { font-size:20px; margin-bottom:8px; }
  .svc-kpi { padding:14px; }
  .svc-kpi-num { font-size:22px; }
  .svc-kpi-icon-wrap { width:38px; height:38px; font-size:18px; }
  .svc-tab { padding:8px 12px; font-size:11px; }
  .pgt  { font-size:18px; }
  .stgrid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .st-stock-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .nreq-priority-grid { gap:6px; }
  .nreq-pri-card { padding:10px 6px; }
}