/* =========================================================================
   Stationery Request Portal — front-end styles
   Visual language cloned from the OWG QSCV Tracker: sticky navy topbar,
   score-card summary strip, pill station tabs, white section cards with
   checklist-style item rows. Only the content/business logic differs.
   Theme tokens per brief: navy #19324B, yellow #F2C94C, bg #F5F7FA,
   border #E5E7EB, card radius 16px, button radius 12px.
   ========================================================================= */

.sms-front{
  --navy-900:#12233370; --navy-800:#152A3D; --navy-700:#19324B; --navy-600:#234161; --navy-500:#2F5478;
  --gold-500:#F2C94C; --gold-600:#DDB53A;
  --bg:#F5F7FA; --surface:#FFFFFF; --surface-2:#F7F9FB; --border:#E5E7EB;
  --text:#152331; --text-muted:#5B6C7C; --text-faint:#8B99A6;
  --good:#1F9254; --good-bg:#E5F5EC;
  --warn:#B8860B; --warn-bg:#FCF3DA;
  --bad:#C0392B; --bad-bg:#FBE7E4;
  --focus:#2F5478;
  --radius-card:16px; --radius-btn:12px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-md:0 6px 16px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.05);

  background:var(--bg); color:var(--text); font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased; margin:-8px; padding:0 0 24px;
}
.sms-front *{ box-sizing:border-box; }
.sms-front h1,.sms-front h2,.sms-front h3{ margin:0; }
.sms-wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }

@keyframes smsFadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.sms-fade-in{ animation:smsFadeIn .35s ease both; }
@media (prefers-reduced-motion: reduce){ .sms-front *{ animation:none !important; transition:none !important; } }

/* ---------- Sticky topbar (header card) ---------- */
.sms-topbar{ position:sticky; top:0; z-index:20; background:var(--navy-700); color:#fff; border-bottom:3px solid var(--gold-500); }
.sms-topbar-inner{
  max-width:1180px; margin:0 auto; padding:14px 20px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.sms-brand{ display:flex; align-items:baseline; gap:10px; }
.sms-brand-mark{
  font-weight:800; letter-spacing:.04em; font-size:15px;
  background:var(--gold-500); color:var(--navy-700); padding:3px 8px; border-radius:8px;
}
.sms-brand-title{ font-weight:800; font-size:16.5px; letter-spacing:.01em; }
.sms-brand-sub{ color:rgba(255,255,255,.68); font-size:12.5px; margin-top:1px; }
.sms-date-pill{
  font-variant-numeric:tabular-nums; font-size:12.5px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  padding:6px 12px; border-radius:999px; color:rgba(255,255,255,.92); font-weight:600;
}
.sms-front-tabs{
  max-width:1180px; margin:0 auto; padding:0 20px; display:flex; gap:4px;
  overflow-x:auto; scrollbar-width:none;
}
.sms-front-tabs::-webkit-scrollbar{ display:none; }
.sms-front-tab{
  text-decoration:none; color:rgba(255,255,255,.62); font-weight:600; font-size:13.5px;
  padding:10px 14px 12px; position:relative; white-space:nowrap;
}
.sms-front-tab:hover{ color:rgba(255,255,255,.9); }
.sms-front-tab.is-active{ color:#fff; }
.sms-front-tab.is-active::after{
  content:""; position:absolute; left:10px; right:10px; bottom:0; height:3px;
  background:var(--gold-500); border-radius:2px 2px 0 0;
}

/* ---------- Two-column top summary ---------- */
.sms-summary{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0 8px; }
@media (max-width:820px){ .sms-summary{ grid-template-columns:1fr; } }

.sms-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:var(--shadow); padding:18px 20px; transition:box-shadow .15s ease;
}
.sms-card:hover{ box-shadow:var(--shadow-md); }

.sms-progress-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.sms-eyebrow{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
.sms-progress-num{ font-variant-numeric:tabular-nums; font-weight:800; font-size:34px; line-height:1; margin:8px 0 4px; color:var(--navy-700); }
.sms-progress-num small{ font-size:15px; color:var(--text-faint); font-weight:700; }
.sms-progress-sub{ font-size:12.5px; color:var(--text-muted); margin-bottom:12px; }
.sms-track{ height:7px; border-radius:999px; background:var(--border); overflow:hidden; }
.sms-fill{ height:100%; border-radius:999px; background:var(--gold-500); transition:width .6s ease; }

.sms-inv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sms-inv-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
.sms-inv-num{ font-variant-numeric:tabular-nums; font-size:26px; font-weight:800; margin-top:4px; color:var(--navy-700); }
.sms-inv-item.is-bad .sms-inv-num{ color:var(--bad); }
.sms-inv-item.is-warn .sms-inv-num{ color:var(--warn); }

/* ---------- Badges ---------- */
.sms-badge{
  display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700;
  padding:2px 8px; border-radius:999px; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
}
.sms-badge-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.sms-badge.sms-good, .sms-tag-approved{ background:var(--good-bg); color:var(--good); }
.sms-badge.sms-warn, .sms-tag-pending{ background:var(--warn-bg); color:var(--warn); }
.sms-badge.sms-bad, .sms-tag-rejected{ background:var(--bad-bg); color:var(--bad); }

/* ---------- Action bar: Previous Day / Today / Next Day + View History ---------- */
.sms-action-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:18px 0; }
.sms-day-nav{ display:flex; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:4px; box-shadow:var(--shadow); }
.sms-day-btn{
  appearance:none; border:none; background:transparent; color:var(--text-muted); font-weight:600; font-size:13px;
  padding:8px 16px; border-radius:999px; cursor:pointer; text-decoration:none; display:inline-block;
}
.sms-day-btn:hover{ color:var(--text); background:var(--surface-2); }
.sms-day-btn.is-active{ background:var(--navy-700); color:#fff; }
.sms-history-link{ font-size:13px; font-weight:700; color:var(--navy-700); text-decoration:none; padding:8px 4px; }
.sms-history-link:hover{ text-decoration:underline; }

/* ---------- Notification banner ---------- */
.sms-notify{
  background:linear-gradient(155deg, var(--navy-700), var(--navy-800));
  color:#fff; border-radius:var(--radius-card); padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-bottom:18px; box-shadow:var(--shadow-md); position:relative; overflow:hidden;
}
.sms-notify::before{ content:""; position:absolute; inset:0; background:radial-gradient(140px 90px at 92% -10%, rgba(242,201,76,.25), transparent 70%); }
.sms-notify-text{ font-size:14px; font-weight:500; position:relative; }
.sms-notify-text strong{ font-weight:800; }
.sms-notify .sms-btn{ position:relative; }

/* ---------- Buttons ---------- */
.sms-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 20px; border-radius:var(--radius-btn); border:1px solid var(--border);
  background:var(--surface); color:var(--text); cursor:pointer; font-weight:700; font-size:13.5px;
  text-decoration:none; transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.sms-btn:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }
.sms-btn:active{ transform:translateY(0); }
.sms-btn-primary{ background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-700); }
.sms-btn-primary:hover{ background:var(--gold-600); border-color:var(--gold-600); }
.sms-btn-navy{ background:var(--navy-700); border-color:var(--navy-700); color:#fff; }
.sms-btn-navy:hover{ background:var(--navy-600); }
.sms-btn-outline{ background:transparent; color:var(--text-muted); }
.sms-btn-outline:hover{ border-color:var(--bad); color:var(--bad); }
.sms-btn-gray{ background:#EEF1F5; border-color:#EEF1F5; color:var(--text); }
.sms-btn-gray:hover{ background:#E4E8EE; }
.sms-btn-sm{ padding:6px 12px; font-size:12.5px; }
.sms-btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* ---------- Layout: main + sidebar ---------- */
.sms-layout{ display:grid; grid-template-columns:1fr 280px; gap:18px; align-items:start; }
@media (max-width:960px){ .sms-layout{ grid-template-columns:1fr; } }
.sms-main{ min-width:0; }

.sms-panel-head{ margin:26px 0 14px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.sms-panel-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--gold-600); text-transform:uppercase; }
.sms-panel-h1{ font-weight:800; font-size:22px; letter-spacing:-.01em; margin:2px 0 3px; }
.sms-panel-desc{ color:var(--text-muted); font-size:13.5px; max-width:60ch; }

/* ---------- Category pill tabs (Office / Printer / Pantry ...) ---------- */
.sms-cat-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.sms-cat-tab{
  appearance:none; border:1px solid var(--border); background:var(--surface); color:var(--text);
  font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; gap:7px; transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.sms-cat-tab:hover{ border-color:var(--navy-500); }
.sms-cat-tab.is-active{ background:var(--navy-700); border-color:var(--navy-700); color:#fff; }
.sms-cat-tab .sms-cat-pct{ font-variant-numeric:tabular-nums; opacity:.85; font-size:11px; }

/* ---------- Section card / item rows ---------- */
.sms-section-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  margin-bottom:14px; overflow:hidden; display:none; box-shadow:var(--shadow);
}
.sms-section-card.is-visible{ display:block; }
.sms-section-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; background:var(--surface-2); border-bottom:1px solid var(--border);
}
.sms-section-title{ font-weight:700; font-size:13.5px; }
.sms-section-count{ font-variant-numeric:tabular-nums; font-size:12px; color:var(--text-muted); display:flex; align-items:center; gap:8px; }
.sms-mini-bar{ width:64px; height:5px; border-radius:3px; background:var(--border); overflow:hidden; }
.sms-mini-bar-fill{ height:100%; background:var(--gold-500); border-radius:3px; transition:width .3s ease; }

.sms-items{ list-style:none; margin:0; padding:4px 0; }
.sms-item-row{ display:flex; align-items:flex-start; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.sms-item-row:last-child{ border-bottom:none; }
.sms-item-row:hover{ background:var(--surface-2); }

.sms-item-check{
  appearance:none; width:18px; height:18px; min-width:18px; margin-top:2px; border-radius:5px;
  border:1.5px solid var(--text-faint); background:var(--surface); cursor:pointer; position:relative; flex:none;
}
.sms-item-check:checked{ background:var(--good); border-color:var(--good); }
.sms-item-check:checked::after{
  content:""; position:absolute; left:5px; top:1px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.sms-item-check:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.sms-item-main{ flex:1; min-width:150px; }
.sms-item-name{ font-size:13.5px; font-weight:600; display:block; color:var(--text); }
.sms-item-stock{ font-size:11.5px; color:var(--text-faint); margin-top:2px; display:flex; align-items:center; gap:6px; }

.sms-item-actions{ display:flex; align-items:center; gap:8px; flex:none; margin-left:auto; }
.sms-qty-stepper{ display:flex; align-items:center; border:1.5px solid var(--border); border-radius:var(--radius-btn); overflow:hidden; }
.sms-qty-stepper button{
  appearance:none; border:none; background:var(--surface); width:28px; height:30px; cursor:pointer;
  font-size:15px; font-weight:700; color:var(--navy-700); line-height:1;
}
.sms-qty-stepper button:hover{ background:var(--surface-2); }
.sms-qty-stepper input{
  width:42px; border:none; border-left:1.5px solid var(--border); border-right:1.5px solid var(--border);
  height:30px; text-align:center; font-size:13.5px; font-weight:700; -moz-appearance:textfield; color:var(--text);
}
.sms-qty-stepper input::-webkit-outer-spin-button, .sms-qty-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.sms-item-row.is-disabled .sms-qty-stepper{ opacity:.4; pointer-events:none; }

.sms-note-btn{
  border:1.5px solid var(--border); background:var(--surface); border-radius:var(--radius-btn);
  padding:6px 11px; font-size:11.5px; font-weight:700; color:var(--navy-700); cursor:pointer; white-space:nowrap;
}
.sms-note-btn:hover{ background:var(--surface-2); }
.sms-note-btn.has-note{ background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-700); }

.sms-item-note-field{ flex-basis:100%; width:100%; margin:8px 0 0 28px; display:none; }
.sms-item-note-field.is-open{ display:block; }
.sms-item-note-field textarea{
  width:100%; max-width:520px; border:1.5px solid var(--border); border-radius:10px; padding:8px 10px;
  font-size:12.5px; font-family:inherit; resize:vertical;
}

.sms-footnote{ font-size:12px; color:var(--text-faint); padding:10px 16px; border-top:1px dashed var(--border); background:var(--surface-2); }

/* ---------- Plain data tables (My Requests / Approvals) ---------- */
.sms-front-table-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow); }
.sms-front-table{ width:100%; border-collapse:collapse; }
.sms-front-table th, .sms-front-table td{ text-align:left; padding:12px 16px; border-bottom:1px solid var(--border); font-size:13.5px; }
.sms-front-table tr:last-child td{ border-bottom:none; }
.sms-front-table th{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--surface-2); }

.sms-front-notice{ padding:11px 16px; border-radius:12px; margin:18px 20px 0; font-weight:600; font-size:13.5px; }
.sms-front-notice-success{ background:var(--good-bg); color:var(--good); }
.sms-front-notice-warning{ background:var(--warn-bg); color:var(--warn); }
.sms-front-notice-error{ background:var(--bad-bg); color:var(--bad); }

.sms-note-field{ margin:10px 0 18px; }
.sms-note-field label{ font-size:13px; font-weight:700; display:block; margin-bottom:6px; }
.sms-note-field textarea{ width:100%; border:1.5px solid var(--border); border-radius:12px; padding:10px 12px; font-size:13.5px; font-family:inherit; resize:vertical; }

/* ---------- Sidebar statistics ---------- */
.sms-sidebar-title{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:10px; }
.sms-stat-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); }
.sms-stat-row:last-child{ border-bottom:none; }
.sms-stat-label{ font-size:12px; color:var(--text-muted); font-weight:600; }
.sms-stat-value{ font-size:14.5px; font-weight:800; color:var(--navy-700); font-variant-numeric:tabular-nums; }
@media (max-width:960px){ .sms-sidebar{ order:99; } }

/* ---------- Sticky footer action bar ---------- */
.sms-footer-spacer{ height:82px; }
.sms-sticky-footer{
  position:sticky; bottom:0; left:0; right:0; background:var(--surface);
  border-top:1px solid var(--border); box-shadow:0 -6px 16px rgba(16,24,40,.08);
  padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  z-index:5; flex-wrap:wrap; margin-top:8px;
}
.sms-sticky-footer-group{ display:flex; gap:10px; }

@media (max-width:640px){
  .sms-sticky-footer{ flex-direction:column; align-items:stretch; }
  .sms-sticky-footer-group{ width:100%; }
  .sms-sticky-footer .sms-btn{ flex:1; }
  .sms-inv-grid{ grid-template-columns:1fr 1fr; }
  .sms-wrap{ padding:0 12px; }
  .sms-item-actions{ margin-left:0; width:100%; justify-content:space-between; }
}

.sms-front-login{ max-width:420px; margin:60px auto; }
.sms-front-login form p{ margin:10px 0; }
.sms-empty-state{ padding:24px; text-align:center; color:var(--text-muted); font-size:13.5px; }