/* ══════════════════════════════════════════════════════════════════
   NVL Forecast Tool v2.0 — Styles
   ══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:#ffffff; --bg-muted:#f8fafc; --bg-card:#ffffff; --border:#e2e8f0;
  --border-focus:#3b82f6; --text:#0f172a; --text-muted:#64748b; --text-sm:#94a3b8;
  --primary:#1d4ed8; --primary-fg:#ffffff; --primary-hover:#1e40af;
  --success:#16a34a; --success-bg:#f0fdf4; --success-bd:#bbf7d0;
  --warn:#d97706; --warn-bg:#fffbeb; --warn-bd:#fde68a;
  --danger:#dc2626; --danger-bg:#fef2f2; --danger-bd:#fecaca;
  --info-bg:#eff6ff; --info-bd:#bfdbfe;
  --radius:.5rem; --radius-sm:.375rem; --radius-lg:.75rem;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.05);
  --font:'Inter',system-ui,-apple-system,sans-serif;
}

body { font-family:var(--font); background:var(--bg-muted); color:var(--text); min-height:100vh; font-size:14px; line-height:1.5; }

/* ── Header ──────────────────────────────────────────────────── */
.app-header { background:var(--bg-card); border-bottom:1px solid var(--border); padding:0 .75rem; height:48px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50; box-shadow:var(--shadow-sm); gap:.5rem; }
.app-header .logo { display:flex; align-items:center; gap:.5rem; min-width:0; flex-shrink:1; }
.app-header .logo svg { width:24px; height:24px; flex-shrink:0; }
.logo-text { font-weight:700; font-size:.875rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em; }
.header-right { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }

/* ── Help Button ────────────────────────────────────────────── */
.btn-icon { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.875rem; cursor:pointer; background:var(--bg-card); color:var(--text-muted); transition:all .15s; flex-shrink:0; line-height:1; padding:0; }
.btn-icon:hover { background:var(--bg-muted); color:var(--text); }

/* ── Lang Switcher ───────────────────────────────────────────── */
.lang-switcher { display:flex; gap:2px; flex-shrink:0; }
.lang-btn { padding:.25rem .4rem; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.6875rem; font-weight:600; cursor:pointer; background:var(--bg-card); color:var(--text-muted); transition:all .15s; line-height:1; white-space:nowrap; }
.lang-btn.active { background:var(--primary); color:white; border-color:var(--primary); }
.lang-btn:hover:not(.active) { background:var(--bg-muted); color:var(--text); }

@media (min-width:640px) {
  .app-header { padding:0 1rem; height:52px; }
  .logo-text { font-size:.9375rem; }
  .lang-btn { padding:.25rem .5rem; font-size:.71875rem; }
  .btn-icon { width:34px; height:34px; }
}

/* ── Layout ──────────────────────────────────────────────────── */
.container { max-width:1400px; margin:0 auto; padding:.75rem; }
@media (min-width:640px) { .container { padding:1rem; } }
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.card-header { padding:.75rem 1rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.5rem; }
.card-header h2 { font-size:.875rem; font-weight:600; white-space:nowrap; }
.card-header .icon { width:18px; height:18px; opacity:.7; }
.card-body { padding:.75rem; }
@media (min-width:640px) { .card-body { padding:1rem; } }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.375rem; padding:.4375rem .75rem; border-radius:var(--radius-sm); font-size:.8125rem; font-weight:500; cursor:pointer; border:1px solid transparent; transition:all .15s; white-space:nowrap; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:var(--primary); color:var(--primary-fg); }
.btn-primary:hover:not(:disabled) { background:var(--primary-hover); }
.btn-outline { background:transparent; color:var(--text); border-color:var(--border); }
.btn-outline:hover:not(:disabled) { background:var(--bg-muted); }
.btn-ghost { background:transparent; color:var(--text-muted); border-color:transparent; }
.btn-ghost:hover:not(:disabled) { background:var(--bg-muted); color:var(--text); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover:not(:disabled) { background:#15803d; }
.btn-sm { padding:.25rem .5rem; font-size:.75rem; }

/* ── Forms ────────────────────────────────────────────────────── */
.input,.select { width:100%; padding:.5rem .75rem; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.8125rem; color:var(--text); background:var(--bg-card); outline:none; transition:border-color .15s; }
.input:focus,.select:focus { border-color:var(--border-focus); box-shadow:0 0 0 2px rgba(59,130,246,.15); }
.label { font-size:.75rem; font-weight:500; color:var(--text-muted); margin-bottom:.25rem; display:inline; white-space:nowrap; }
.goal-selector { display:flex; gap:2px; margin-top:.25rem; }
.goal-btn { flex:1; padding:.375rem; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.6875rem; font-weight:600; cursor:pointer; background:var(--bg-card); color:var(--text-muted); transition:all .15s; line-height:1; }
.goal-btn.active { background:var(--primary); color:white; border-color:var(--primary); }
.goal-btn:hover:not(.active) { background:var(--bg-muted); color:var(--text); }

/* ── Config Inline (Primary) ─────────────────────────────────── */
.config-inline { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:.5rem; }
@media (max-width:639px) { .config-inline { grid-template-columns:1fr; } }

/* ── Config Advanced (Collapsible) ───────────────────────────── */
.btn-config-toggle { display:flex; align-items:center; gap:.375rem; padding:.375rem .5rem; border:none; background:transparent; color:var(--text-muted); font-size:.75rem; font-weight:600; cursor:pointer; transition:all .15s; border-radius:var(--radius-sm); margin-bottom:.25rem; }
.btn-config-toggle:hover { background:var(--bg-muted); color:var(--text); }
.btn-config-toggle .toggle-icon { font-size:.625rem; transition:transform .2s ease; display:inline-block; }
.btn-config-toggle.expanded .toggle-icon { transform:rotate(90deg); }
.config-advanced { max-height:0; overflow:hidden; transition:max-height .3s ease, opacity .2s ease; opacity:0; }
.config-advanced.expanded { max-height:400px; opacity:1; }

/* ── Column Toggle Button ────────────────────────────────────── */
.btn-expand-cols { display:inline-flex; align-items:center; gap:.375rem; padding:.3125rem .625rem; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.75rem; font-weight:500; cursor:pointer; background:var(--bg-card); color:var(--text-muted); transition:all .15s; }
.btn-expand-cols:hover { background:var(--bg-muted); color:var(--text); }
.btn-expand-cols.active { background:var(--info-bg); color:var(--primary); border-color:var(--border-focus); }

/* ── Upload Zone ─────────────────────────────────────────────── */
.upload-zone { border:2px dashed var(--border); border-radius:var(--radius-lg); padding:1rem .75rem; text-align:center; cursor:pointer; transition:all .15s; background:var(--bg-muted); position:relative; }
.upload-zone:hover,.upload-zone.drag { border-color:var(--border-focus); background:var(--info-bg); }
.upload-zone.done { border-color:var(--success); background:var(--success-bg); border-style:solid; }
.upload-zone.error { border-color:var(--danger); background:var(--danger-bg); border-style:solid; }
.upload-zone input[type=file] { display:none; }
.upload-icon { width:28px; height:28px; margin:0 auto .375rem; color:var(--text-sm); }
.upload-zone.done .upload-icon { color:var(--success); }
.upload-label { font-size:.75rem; font-weight:500; white-space:nowrap; }
.upload-sub { font-size:.6875rem; color:var(--text-muted); margin-top:.125rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Column Mapping Panel ────────────────────────────────────── */
.mapping-panel { margin-top:.75rem; padding:.75rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-muted); }
.mapping-panel .mapping-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.mapping-panel .mapping-header .confidence { font-size:.6875rem; font-weight:600; padding:.125rem .5rem; border-radius:99px; }
.mapping-panel .confidence-high { background:var(--success-bg); color:var(--success); border:1px solid var(--success-bd); }
.mapping-panel .confidence-med { background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-bd); }
.mapping-panel .confidence-low { background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-bd); }
.mapping-row { display:flex; align-items:center; gap:.5rem; margin-bottom:.375rem; font-size:.75rem; }
.mapping-row .field-name { width:100px; font-weight:600; color:var(--text-muted); flex-shrink:0; }
.mapping-row select { flex:1; padding:.25rem .375rem; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.75rem; background:var(--bg-card); }
.mapping-row .status-icon { width:16px; text-align:center; flex-shrink:0; }
.mapping-actions { display:flex; gap:.375rem; margin-top:.5rem; }

/* ── Validation Panel ────────────────────────────────────────── */
.validation-panel { margin-top:.75rem; padding:.75rem; border-radius:var(--radius); font-size:.75rem; }
.validation-panel.has-errors { background:var(--danger-bg); border:1px solid var(--danger-bd); }
.validation-panel.has-warnings { background:var(--warn-bg); border:1px solid var(--warn-bd); }
.validation-panel.all-good { background:var(--success-bg); border:1px solid var(--success-bd); }
.validation-panel h4 { font-size:.75rem; font-weight:600; margin-bottom:.375rem; }
.validation-item { padding:.125rem 0; display:flex; gap:.375rem; align-items:flex-start; }
.validation-item .v-icon { flex-shrink:0; }
.validation-toggle { cursor:pointer; color:var(--primary); font-size:.6875rem; margin-top:.25rem; text-decoration:underline; }

/* ── Warehouse Mapping Modal ─────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:200; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal { background:var(--bg-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); max-width:500px; width:100%; max-height:80vh; overflow-y:auto; }
.modal-header { padding:1rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-header h3 { font-size:.9375rem; font-weight:600; }
.modal-body { padding:1rem; }
.modal-footer { padding:.75rem 1rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:.5rem; }
.wh-mapping-row { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.wh-mapping-row .wh-code { font-family:'Courier New',monospace; font-size:.75rem; background:var(--bg-muted); padding:.25rem .5rem; border-radius:var(--radius-sm); min-width:140px; }
.wh-mapping-row .wh-arrow { color:var(--text-sm); }
.wh-mapping-row input { flex:1; padding:.375rem .5rem; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.8125rem; }

/* ── Badges ──────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:.25rem; padding:.1875rem .5rem; border-radius:99px; font-size:.6875rem; font-weight:600; }
.badge-red    { background:var(--danger-bg);  color:var(--danger);  border:1px solid var(--danger-bd); }
.badge-yellow { background:var(--warn-bg);    color:var(--warn);    border:1px solid var(--warn-bd); }
.badge-green  { background:var(--success-bg); color:var(--success); border:1px solid var(--success-bd); }
.badge-blue   { background:var(--info-bg);    color:var(--primary); border:1px solid var(--info-bd); }
.badge-gray   { background:var(--bg-muted);   color:var(--text-muted); border:1px solid var(--border); }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert { padding:.75rem 1rem; border-radius:var(--radius-sm); font-size:.8125rem; display:flex; gap:.5rem; align-items:flex-start; margin-bottom:.5rem; }
.alert-info    { background:var(--info-bg);    border:1px solid var(--info-bd);    color:#1e40af; }
.alert-success { background:var(--success-bg); border:1px solid var(--success-bd); color:#15803d; }
.alert-warn    { background:var(--warn-bg);    border:1px solid var(--warn-bd);    color:#92400e; }
.alert-danger  { background:var(--danger-bg);  border:1px solid var(--danger-bd);  color:#991b1b; }

/* ── Stats ───────────────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.625rem; }
@media (min-width:640px) { .stats-grid { grid-template-columns:repeat(4,1fr); } }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:.75rem; }
.stat-label { font-size:.6875rem; color:var(--text-muted); font-weight:500; text-transform:uppercase; letter-spacing:.025em; }
.stat-value { font-size:1.375rem; font-weight:700; margin-top:.125rem; }
.stat-sub { font-size:.6875rem; color:var(--text-muted); margin-top:.125rem; }
.stat-danger .stat-value { color:var(--danger); }
.stat-warn   .stat-value { color:var(--warn); }
.stat-success .stat-value { color:var(--success); }

/* ── Table ───────────────────────────────────────────────────── */
.table-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table { width:100%; border-collapse:collapse; font-size:.8125rem; min-width:900px; }
.table th { padding:.5rem .75rem; text-align:left; font-size:.6875rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.025em; border-bottom:1px solid var(--border); background:var(--bg-muted); white-space:nowrap; cursor:pointer; user-select:none; }
.table th:hover { background:var(--border); }
.table th.sorted { color:var(--primary); }
.table td { padding:.5rem .75rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:var(--bg-muted); }
.table tr.danger td { background:#fff5f5; }
.table tr.warn td { background:#fffdf5; }

/* ── DOI ─────────────────────────────────────────────────────── */
.doi-cell { display:inline-flex; align-items:center; gap:.375rem; font-weight:600; }
.doi-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.doi-red    { color:var(--danger); } .doi-red .doi-dot    { background:var(--danger); }
.doi-yellow { color:var(--warn);   } .doi-yellow .doi-dot { background:var(--warn); }
.doi-green  { color:var(--success);} .doi-green .doi-dot  { background:var(--success); }
.doi-blue   { color:#2563eb;       } .doi-blue .doi-dot   { background:#2563eb; }

.qty-input { width:72px; padding:.25rem .375rem; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.8125rem; text-align:right; font-weight:500; }
.qty-input:focus { border-color:var(--border-focus); outline:none; box-shadow:0 0 0 2px rgba(59,130,246,.15); }
.qty-changed { border-color:var(--warn); background:var(--warn-bg); }

/* ── Tabs ────────────────────────────────────────────────────── */
.tabs { display:flex; gap:0; border-bottom:1px solid var(--border); overflow-x:auto; }
.tab { padding:.625rem 1rem; font-size:.8125rem; font-weight:500; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; white-space:nowrap; }
.tab:hover { color:var(--text); }
.tab.active { color:var(--primary); border-bottom-color:var(--primary); }

/* ── Toolbar ─────────────────────────────────────────────────── */
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.75rem 1rem; border-bottom:1px solid var(--border); }
.toolbar-left  { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; flex:1; min-width:0; }
.toolbar-right { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }

/* ── Chart ───────────────────────────────────────────────────── */
.chart-container { position:relative; height:320px; }
@media (min-width:768px) { .chart-container { height:420px; } }

/* ── Grid ────────────────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr; gap:.75rem; }
@media (min-width:768px) { .grid-2 { grid-template-columns:repeat(2,1fr); } }
.grid-3 { display:grid; grid-template-columns:1fr; gap:.625rem; }
@media (min-width:768px) { .grid-3 { grid-template-columns:repeat(3,1fr); } }
.grid-4 { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; }
@media (min-width:768px) { .grid-4 { grid-template-columns:repeat(4,1fr); } }

/* ── Steps ───────────────────────────────────────────────────── */
.steps { display:flex; gap:0; overflow-x:auto; padding-bottom:.375rem; -webkit-overflow-scrolling:touch; }
.step { display:flex; align-items:center; gap:.25rem; font-size:.6875rem; font-weight:500; color:var(--text-sm); white-space:nowrap; }
@media (min-width:640px) { .step { font-size:.75rem; gap:.375rem; } }
.step.active { color:var(--primary); }
.step.done   { color:var(--success); }
.step-num { width:20px; height:20px; border-radius:50%; border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:.625rem; font-weight:700; flex-shrink:0; }
@media (min-width:640px) { .step-num { width:22px; height:22px; font-size:.6875rem; } }
.step.done .step-num { background:var(--success); color:white; border-color:var(--success); }
.step-sep { width:16px; height:1px; background:var(--border); flex-shrink:0; }
@media (min-width:640px) { .step-sep { width:24px; } }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination { display:flex; align-items:center; gap:.375rem; justify-content:center; padding:.75rem 1rem; }
.page-btn { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.75rem; cursor:pointer; background:var(--bg-card); transition:all .1s; }
.page-btn:hover { background:var(--bg-muted); }
.page-btn.active { background:var(--primary); color:white; border-color:var(--primary); }

/* ── Slider ──────────────────────────────────────────────────── */
.slider { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:4px; background:var(--border); outline:none; }
.slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--primary); cursor:pointer; box-shadow:0 0 0 2px white,0 0 0 3px var(--primary); }

/* ── Toast ────────────────────────────────────────────────────── */
#toast-container { position:fixed; bottom:1rem; right:1rem; z-index:100; display:flex; flex-direction:column; gap:.5rem; }
.toast { padding:.625rem 1rem; border-radius:var(--radius); font-size:.8125rem; font-weight:500; color:white; max-width:320px; box-shadow:var(--shadow-md); animation:slideIn .2s ease; }
.toast-success { background:#15803d; }
.toast-error   { background:#dc2626; }
.toast-info    { background:#1d4ed8; }
@keyframes slideIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* ── Helpers ─────────────────────────────────────────────────── */
.section { margin-bottom:1rem; }
.section:last-child { margin-bottom:0; }
.mt-1{margin-top:.25rem;} .mt-2{margin-top:.5rem;} .mt-3{margin-top:.75rem;} .mt-4{margin-top:1rem;}
.mb-1{margin-bottom:.25rem;} .mb-2{margin-bottom:.5rem;}
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-1{gap:.25rem;} .gap-2{gap:.5rem;}
.text-sm{font-size:.75rem;} .text-xs{font-size:.6875rem;} .text-muted{color:var(--text-muted);}
.font-mono{font-family:'Courier New',monospace;}
.hidden{display:none!important;} .w-full{width:100%;}
.flex-wrap{flex-wrap:wrap;}

/* ── Template Download Button ───────────────────────────────── */
.btn-template { display:block; width:100%; background:transparent; border:none; color:var(--primary); font-size:.6875rem; font-weight:500; cursor:pointer; padding:.25rem 0; margin-top:.125rem; text-align:center; opacity:.7; transition:all .15s; white-space:nowrap; }
.btn-template:hover { opacity:1; text-decoration:underline; }

/* ── Help Button ────────────────────────────────────────────── */
.btn-help { border:1px solid var(--border); border-radius:var(--radius-sm); }

/* ── Tooltip System ─────────────────────────────────────────── */
.tip-icon { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; font-size:10px; color:var(--text-sm); cursor:help; border-radius:50%; border:1px solid var(--border); margin-left:3px; vertical-align:middle; transition:all .15s; user-select:none; line-height:1; flex-shrink:0; }
.tip-icon:hover { color:var(--primary); border-color:var(--primary); background:var(--info-bg); }
.tip-icon-upload { position:absolute; top:6px; right:6px; }
.upload-zone { position:relative; }
.tip-popup { position:absolute; z-index:300; max-width:320px; padding:.625rem .875rem; background:var(--text); color:white; font-size:.75rem; line-height:1.5; border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,.15); pointer-events:auto; opacity:0; transform:translateY(4px); transition:opacity .15s, transform .15s; }
.tip-popup.visible { opacity:1; transform:translateY(0); }
.tip-popup.below { transform:translateY(-4px); }
.tip-popup.below.visible { transform:translateY(0); }

/* ── Onboarding Modal ───────────────────────────────────────── */
.onboarding-overlay { position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; transition:opacity .3s ease; }
.onboarding-overlay.visible { opacity:1; }
.onboarding-overlay.closing { opacity:0; }
.onboarding-modal { background:var(--bg-card); border-radius:var(--radius-lg); box-shadow:0 24px 48px rgba(0,0,0,.15); max-width:520px; width:100%; overflow:hidden; animation:onboardSlideUp .3s ease; }
@keyframes onboardSlideUp { from { transform:translateY(24px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.onboarding-header { padding:1.5rem 1.5rem .75rem; text-align:center; }
.onboarding-title { font-size:1.25rem; font-weight:700; color:var(--text); margin-bottom:.75rem; }
.onboarding-step-icon { font-size:2rem; margin-bottom:.5rem; }
.onboarding-step-title { font-size:1rem; font-weight:600; color:var(--text); }
.onboarding-body { padding:0 1.5rem 1rem; font-size:.875rem; color:var(--text-muted); line-height:1.7; }
.onboarding-body b { color:var(--text); font-weight:600; }
.onboarding-footer { padding:.875rem 1.5rem; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.onboarding-dots { display:flex; gap:.375rem; }
.onboarding-dot { width:8px; height:8px; border-radius:50%; background:var(--border); cursor:pointer; transition:all .2s; }
.onboarding-dot.active { background:var(--primary); width:20px; border-radius:4px; }
.onboarding-nav { display:flex; gap:.5rem; }

/* ── Pending PO Card ────────────────────────────────────────── */
.pending-card { border:1px dashed var(--border); border-color:var(--text-sm); }
.pending-card .card-header { gap:.5rem; }
.badge-optional { background:var(--bg-muted); color:var(--text-sm); border:1px solid var(--border); font-size:.625rem; padding:.125rem .375rem; border-radius:99px; font-weight:500; }
.pending-upload-row { display:flex; align-items:center; gap:.75rem; }
.upload-zone-compact { flex:1; padding:.625rem .5rem; min-height:auto; }
.upload-icon-sm { width:20px; height:20px; color:var(--text-sm); margin:0 auto .25rem; }
.upload-label-sm { font-size:.6875rem; font-weight:500; }
.pending-divider { color:var(--text-sm); font-size:.6875rem; font-weight:500; text-transform:uppercase; }
.btn-pending-manual { white-space:nowrap; flex-shrink:0; }

/* ── Pending PO Modal ───────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:200; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal-box { background:var(--bg-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); max-width:700px; width:100%; max-height:85vh; display:flex; flex-direction:column; }
.modal-header { padding:.875rem 1rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-header h3 { font-size:.9375rem; font-weight:600; }
.modal-close { width:28px; height:28px; font-size:.875rem; }
.modal-body { padding:1rem; overflow-y:auto; flex:1; }
.modal-footer { padding:.75rem 1rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:.5rem; }

/* ── Pending Table in Modal ─────────────────────────────────── */
.pending-table-wrapper { overflow-x:auto; }
.pending-table { width:100%; border-collapse:collapse; font-size:.8125rem; }
.pending-table th { padding:.375rem .5rem; text-align:left; font-size:.6875rem; font-weight:600; color:var(--text-muted); border-bottom:1px solid var(--border); background:var(--bg-muted); white-space:nowrap; }
.pending-table td { padding:.375rem .5rem; border-bottom:1px solid var(--border); }
.pending-table input { width:100%; padding:.25rem .375rem; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.75rem; min-width:80px; }
.pending-table input:focus { border-color:var(--border-focus); outline:none; }
.pending-table .btn-delete-row { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; color:var(--text-sm); border-radius:var(--radius-sm); transition:all .15s; font-size:.875rem; }
.pending-table .btn-delete-row:hover { background:var(--danger-bg); color:var(--danger); }

/* ── Factor Input ───────────────────────────────────────────── */
.factor-input { width:56px; padding:.1875rem .25rem; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.75rem; text-align:center; font-weight:500; background:var(--bg-card); }
.factor-input:focus { border-color:var(--border-focus); outline:none; box-shadow:0 0 0 2px rgba(59,130,246,.15); }
.factor-changed { border-color:var(--primary); background:var(--info-bg); font-weight:600; }

/* ── Seasonal Ratio Lift ─────────────────────────────────────── */
.btn-seasonal { gap:.375rem; }
.modal-box-lg { max-width:860px; }
.seasonal-controls { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-bottom:1rem; }
.seasonal-toggle { display:flex; align-items:center; gap:.375rem; font-size:.8125rem; font-weight:500; cursor:pointer; }
.seasonal-toggle input[type="checkbox"] { width:16px; height:16px; accent-color:var(--primary); }
.seasonal-month-select { display:flex; align-items:center; gap:.375rem; }
.seasonal-month-select label { font-size:.75rem; font-weight:500; color:var(--text-muted); }
.seasonal-month-select select { padding:.25rem .5rem; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.8125rem; }
.seasonal-section { margin-bottom:1rem; }
.seasonal-section h4 { font-size:.8125rem; font-weight:600; margin-bottom:.5rem; color:var(--text); }
.seasonal-wh-table { width:100%; border-collapse:collapse; font-size:.8125rem; }
.seasonal-wh-table th { padding:.375rem .5rem; text-align:left; font-size:.6875rem; font-weight:600; color:var(--text-muted); border-bottom:1px solid var(--border); background:var(--bg-muted); }
.seasonal-wh-table td { padding:.375rem .5rem; border-bottom:1px solid var(--border); }
.seasonal-wh-table code { font-size:.75rem; background:var(--bg-muted); padding:.125rem .375rem; border-radius:3px; }
.seasonal-country-select { padding:.25rem .375rem; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.75rem; }
.seasonal-ratio-table-wrapper { overflow-x:auto; }
.seasonal-ratio-table { width:100%; border-collapse:collapse; font-size:.8125rem; }
.seasonal-ratio-table th { padding:.375rem .5rem; text-align:center; font-size:.6875rem; font-weight:600; color:var(--text-muted); border-bottom:1px solid var(--border); background:var(--bg-muted); white-space:nowrap; }
.seasonal-ratio-table td { padding:.25rem .375rem; border-bottom:1px solid var(--border); text-align:center; }
.seasonal-ratio-table .seasonal-month-label { text-align:left; font-weight:500; white-space:nowrap; }
.seasonal-ratio-table .seasonal-current-month { background:var(--info-bg); }
.seasonal-ratio-table .seasonal-current-month .seasonal-month-label { font-weight:700; color:var(--primary); }
.seasonal-ratio-input { width:56px; padding:.1875rem .25rem; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.75rem; text-align:center; font-weight:500; background:var(--bg-card); }
.seasonal-ratio-input:focus { border-color:var(--border-focus); outline:none; box-shadow:0 0 0 2px rgba(59,130,246,.15); }
.seasonal-ratio-cell.ratio-up .seasonal-ratio-input { border-color:var(--success); background:#f0fdf4; color:#15803d; font-weight:600; }
.seasonal-ratio-cell.ratio-down .seasonal-ratio-input { border-color:var(--danger); background:#fef2f2; color:#991b1b; font-weight:600; }
.seasonal-event-cell { font-size:.6875rem; color:var(--text-muted); text-align:left !important; white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; }

/* Quick action buttons */
.seasonal-quick-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.375rem; margin-bottom:.75rem; }
.seasonal-quick-label { font-size:.75rem; font-weight:500; color:var(--text-muted); }
.btn-seasonal-quick { display:inline-flex; align-items:center; gap:.25rem; padding:.25rem .625rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); font-size:.75rem; font-weight:500; cursor:pointer; transition:all .15s ease; }
.btn-seasonal-quick:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-seasonal-quick-default { color:var(--text-muted); }
.btn-seasonal-quick-default:hover { background:var(--text-muted); color:#fff; border-color:var(--text-muted); }

/* Apply All per-row button */
.seasonal-country-cell { display:flex; align-items:center; gap:.375rem; }
.btn-apply-all { padding:.125rem .375rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:transparent; font-size:.625rem; font-weight:600; color:var(--text-muted); cursor:pointer; transition:all .15s ease; white-space:nowrap; }
.btn-apply-all:hover { background:var(--primary); color:#fff; border-color:var(--primary); }

/* Ratio cell in main table */
.ratio-cell { display:inline-block; padding:.125rem .375rem; border-radius:var(--radius-sm); font-size:.75rem; font-weight:500; min-width:40px; text-align:center; cursor:help; }
.ratio-cell.ratio-up { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.ratio-cell.ratio-down { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

/* ══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — UX Overhaul (Fitts's / Hick's / Miller's)
   ══════════════════════════════════════════════════════════════════ */

@media (max-width:639px) {

  /* ── Container ─────────────────────────────────────────────── */
  .container { padding:.5rem; }

  /* ── Header ────────────────────────────────────────────────── */
  .app-header { padding:0 .5rem; }

  /* ── Config Grid — 1 col on very small, 2 col on small ──── */
  .grid-4 { grid-template-columns:1fr; gap:.5rem; }
  .grid-4 .input { min-height:44px; font-size:.875rem; }

  /* ── Upload Cards — stack, allow text wrap ────────────────── */
  .grid-3 { gap:.5rem; }
  .upload-label { white-space:normal; text-align:center; }
  .upload-sub { white-space:normal; text-align:center; }
  .upload-zone { padding:.875rem .625rem; }

  /* ── Buttons — Fitts's Law: min 44px touch zone ──────────── */
  .btn { min-height:44px; padding:.5rem .75rem; font-size:.8125rem; justify-content:center; }
  .btn-sm { min-height:40px; padding:.375rem .625rem; }

  /* ── Forms — 44px touch targets ────────────────────────────── */
  .select, .input { min-height:44px; font-size:.875rem; }

  /* ── Stats Grid — tighter on mobile ────────────────────────── */
  .stats-grid { gap:.375rem; }
  .stat-card { padding:.625rem .5rem; }
  .stat-value { font-size:1.125rem; }
  .stat-label { font-size:.625rem; }
  .stat-sub { font-size:.625rem; }

  /* ── Alerts — better mobile readability ────────────────────── */
  .alert { font-size:.75rem; padding:.625rem .75rem; }

  /* ── Toolbar — vertical stack, full-width filters ──────────── */
  .toolbar { flex-direction:column; align-items:stretch; gap:.375rem; padding:.625rem .75rem; }
  .toolbar-left { flex-direction:column; gap:.375rem; }
  .toolbar-left .select,
  .toolbar-left .input { width:100% !important; }
  .toolbar-right { width:100%; justify-content:stretch; }
  .toolbar-right .btn { flex:1; }

  /* ── Tabs — bigger touch targets ───────────────────────────── */
  .tab { padding:.75rem 1rem; min-height:44px; display:flex; align-items:center; }

  /* ── Pagination — fix layout + bigger buttons ──────────────── */
  .pagination { gap:.25rem; flex-wrap:wrap; padding:.5rem .75rem; }
  .page-btn { width:38px; height:38px; font-size:.8125rem; }

  /* ── Table info + pagination wrapper ───────────────────────── */
  .table-footer-mobile { flex-direction:column; align-items:flex-start; gap:.375rem; padding:.5rem .75rem; }

  /* ── Table scroll shadow hint ──────────────────────────────── */
  .table-wrapper { position:relative; }
  .table-wrapper::after {
    content:'';
    position:absolute; top:0; right:0; bottom:0; width:24px;
    background:linear-gradient(to right, transparent, rgba(0,0,0,.06));
    pointer-events:none; z-index:1;
    border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  }
  .table-wrapper.scrolled-end::after { display:none; }
  .table th { font-size:.625rem; padding:.375rem .5rem; }
  .table td { font-size:.75rem; padding:.375rem .5rem; }

  /* ── QTY input — slightly wider for mobile ─────────────────── */
  .qty-input { width:64px; min-height:36px; font-size:.75rem; }

  /* ── Export bar — stack vertically ──────────────────────────── */
  .export-bar-mobile { flex-direction:column; align-items:stretch; gap:.5rem; }
  .export-bar-mobile .btn { width:100%; justify-content:center; }
  .export-bar-mobile .flex { flex-direction:column; gap:.375rem; width:100%; }
  .export-bar-mobile .flex .btn { width:100%; }

  /* ── Steps indicator — compact ─────────────────────────────── */
  .step { font-size:.625rem; }
  .step-num { width:18px; height:18px; font-size:.5625rem; }
  .step-sep { width:12px; }

  /* ── Onboarding — better mobile sizing ─────────────────────── */
  .onboarding-modal { max-width:calc(100vw - 2rem); }
  .onboarding-header { padding:1.25rem 1rem .625rem; }
  .onboarding-body { padding:0 1rem .75rem; font-size:.8125rem; }
  .onboarding-footer { padding:.75rem 1rem; }
  .onboarding-title { font-size:1.125rem; }

  /* ── Toast — full width on mobile ──────────────────────────── */
  #toast-container { left:.5rem; right:.5rem; bottom:.5rem; }
  .toast { max-width:100%; }

  /* ── Card body padding ─────────────────────────────────────── */
  .card-body { padding:.625rem; }
  .card-header { padding:.625rem .75rem; }
  .card-header h2 { font-size:.8125rem; }

  /* ── Badges ─────────────────────────────────────────────────── */
  .badge { font-size:.625rem; padding:.125rem .375rem; }

  /* ── Mapping panel ─────────────────────────────────────────── */
  .mapping-row { flex-wrap:wrap; }
  .mapping-row .field-name { width:80px; font-size:.6875rem; }
  .mapping-row select { min-height:40px; }

  /* ── DOI cell ──────────────────────────────────────────────── */
  .doi-cell { font-size:.75rem; }

  /* ── Tip icon — slightly bigger for touch ──────────────────── */
  .tip-icon { width:18px; height:18px; font-size:11px; }

  /* ── Import action bar ─────────────────────────────────────── */
  .import-action-mobile { flex-direction:column; align-items:stretch; gap:.5rem; }
  .import-action-mobile .flex { width:100%; }
  .import-action-mobile .flex .btn { flex:1; }
  .import-action-mobile .text-sm { text-align:center; }
}

/* ── 360px ultra-small screen adjustments ────────────────────── */
@media (max-width:374px) {
  .stats-grid { grid-template-columns:1fr; }
  .stat-value { font-size:1rem; }
  .grid-4 { grid-template-columns:1fr; }
  .step span:not(.step-num) { display:none; }
  .lang-btn { padding:.25rem .3rem; font-size:.625rem; }
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .no-print{display:none!important;}
  .app-header{position:static;}
  body{background:white;}
  .card{box-shadow:none;border:1px solid #ccc;}
  .table th,.table td{font-size:10px;padding:4px 6px;}
  .tip-icon{display:none!important;}
  .btn-template{display:none!important;}
}