/* ============================================================================
   Glass Shield — Shared Design System
   Cards, buttons, badges, drawers, tabs, toolbar, modal, toast.
   Used by glass-shield-production.html, planner.html, etc.
   ============================================================================ */

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

:root {
  --ink:#0a0f1e; --gray:#475569; --gray2:#94a3b8; --accent:#2563eb;
  --mist:#eff6ff; --bg:#f8fafc; --green:#059669; --red:#dc2626; --amber:#f59e0b;
  --border:rgba(28,59,122,0.12); --white:#fff;
  --r:14px; --shadow:0 1px 3px rgba(10,15,30,.04), 0 4px 12px rgba(10,15,30,.04);
}
html, body { max-width:100vw; overflow-x:hidden; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--ink); margin:0; min-height:100vh; }

/* HEADER ===================================================================== */
header { background:var(--ink); padding:14px 32px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; box-shadow:0 1px 0 rgba(0,0,0,.1); height:60px; }
.hl { display:flex; align-items:center; gap:16px; }
.back-link { color:rgba(255,255,255,.7); text-decoration:none; display:flex; align-items:center; gap:6px; font-size:13px; padding:6px 10px; border-radius:8px; transition:background .15s; }
.back-link:hover { background:rgba(255,255,255,.1); color:white; }
.hdiv { width:1px; height:20px; background:rgba(255,255,255,.2); }
.htitle { color:white; font-family:'Outfit',sans-serif; font-size:18px; font-weight:700; }
.huser { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border-radius:20px; padding:5px 12px 5px 8px; cursor:pointer; transition:background .15s; }
.huser:hover { background:rgba(255,255,255,.14); }
.uav { width:26px; height:26px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:white; }
.unm { font-size:12px; font-weight:600; color:rgba(255,255,255,.7); }

/* TABS ======================================================================= */
.tabs-bar { background:white; border-bottom:1px solid #dbe3ed; display:flex; padding:0 32px; position:sticky; top:60px; z-index:90; box-shadow:0 1px 2px rgba(15,23,42,.03); }
.tab-btn { height:48px; padding:0 20px; border:none; background:none; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:#64748b; cursor:pointer; position:relative; display:flex; align-items:center; gap:8px; transition:color .15s; }
.tab-btn:hover { color:#3b82f6; }
.tab-btn.active { color:#3b82f6; }
.tab-btn.active::after { content:''; position:absolute; bottom:-1px; left:12px; right:12px; height:2.5px; background:linear-gradient(90deg,#93c5fd,#60a5fa); border-radius:2px 2px 0 0; }
.tcnt { font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:#eef2f7; color:#64748b; min-width:20px; text-align:center; letter-spacing:.2px; }
.tab-btn.active .tcnt { background:#dbeafe; color:#3b82f6; }

/* TOOLBAR (search + buttons + sort chips) ==================================== */
.tbar { padding:18px 32px 14px; display:flex; flex-direction:column; gap:12px; }
@media (min-width: 901px) {
  .tbar { max-width:1500px; margin-left:auto; margin-right:auto; padding-left:0; padding-right:0; }
}
.tbar-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.search-wrap { position:relative; flex:1; max-width:380px; }
.si { width:100%; height:40px; padding:0 14px 0 40px; border:1px solid #c1cbd9; border-radius:12px; background:white; font-size:13px; color:var(--ink); outline:none; box-shadow:0 1px 2px rgba(15,23,42,.04); transition:border-color .15s, box-shadow .15s; font-family:'Inter',sans-serif; }
.si::placeholder { color:#94a3b8; }
.si:hover { border-color:#94a3b8; }
.si:focus { border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.15); }
.search-wrap svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:#94a3b8; pointer-events:none; }
.btn { height:40px; padding:0 16px; border-radius:12px; border:none; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all .15s ease; white-space:nowrap; letter-spacing:-.1px; }
.btn-primary { background:linear-gradient(180deg,#60a5fa,#3b82f6); color:white; box-shadow:0 1px 2px rgba(59,130,246,.3), 0 2px 6px rgba(59,130,246,.2); }
.btn-primary:hover { background:linear-gradient(180deg,#3b82f6,#2563eb); box-shadow:0 2px 4px rgba(59,130,246,.35), 0 4px 12px rgba(59,130,246,.25); transform:translateY(-1px); }
.btn-ghost { background:white; color:#475569; border:1px solid #c1cbd9; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.btn-ghost:hover { border-color:#94a3b8; color:#0f172a; box-shadow:0 1px 3px rgba(15,23,42,.06), 0 3px 8px rgba(15,23,42,.06); }
.btn-danger { background:transparent; color:var(--red); border:1.5px solid var(--red); }
.btn-danger:hover { background:var(--red); color:white; }
.sort-bar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sort-label { font-size:10.5px; font-weight:700; color:#94a3b8; margin-right:4px; text-transform:uppercase; letter-spacing:.6px; }
.sort-btn { height:30px; padding:0 12px; border-radius:999px; border:1px solid #c1cbd9; background:white; font-size:11.5px; font-weight:600; color:#475569; cursor:pointer; transition:all .15s ease; white-space:nowrap; font-family:'Inter',sans-serif; letter-spacing:.1px; }
.sort-btn:hover { border-color:#94a3b8; color:#0f172a; }
.sort-btn.active { border-color:#60a5fa; background:linear-gradient(180deg,#eff6ff,#dbeafe); color:#2563eb; box-shadow:0 1px 2px rgba(59,130,246,.15); }

/* CARDS GRID ================================================================= */
.cards-grid { display:flex; flex-direction:column; width:100%; gap:6px; }
.cards-col { display:flex; flex-direction:column; gap:6px; min-width:0; }
.cards-grid > .cc, .cards-col > .cc { display:block; width:100%; max-width:100%; box-sizing:border-box; min-width:0; position:relative; margin-bottom:0; }
@media (min-width: 901px) {
  .cards-grid { max-width:1500px; margin-left:auto; margin-right:auto; }
}
@media (min-width: 1281px) {
  .cards-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; align-items:start; max-width:1500px; margin-left:auto; margin-right:auto; }
  .cards-col { align-self:start; }
}

/* CARDS ====================================================================== */
.cc { background:white; border-radius:14px; border:1px solid #c1cbd9; box-shadow:0 1px 3px rgba(15,23,42,.06), 0 4px 10px rgba(15,23,42,.08); transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; position:relative; }
.cc:hover { box-shadow:0 2px 6px rgba(15,23,42,.08), 0 10px 24px rgba(15,23,42,.12); border-color:#94a3b8; transform:translateY(-1px); }
/* Progress tint (production only — width driven by --prog-pct, darkness by --prog-alpha) */
.cc::after {
  content:''; position:absolute; inset:0; border-radius:13px;
  background:linear-gradient(90deg,
    rgba(37,99,235, 0.22) 0%,
    rgba(59,130,246, 0.20) 70%,
    rgba(59,130,246, 0) 100%);
  background-size: var(--prog-pct, 0%) 100%;
  background-repeat: no-repeat;
  opacity: var(--prog-alpha, 0);
  transition: background-size .45s cubic-bezier(.4,0,.2,1), opacity .45s cubic-bezier(.4,0,.2,1);
  pointer-events:none; z-index:0;
}
.cc-inner { display:flex; align-items:stretch; width:100%; min-width:0; padding-left:4px; position:relative; z-index:1; border-radius:13px; overflow:hidden; }
.cc-inner::before { content:''; position:absolute; left:0; top:2px; bottom:2px; width:4px; background:transparent; transition:background .2s; z-index:2; border-radius:3px 0 0 3px; }

/* Card stripe color variants (production + raw) */
.cc.bo .cc-inner::before   { background:linear-gradient(180deg,#fca5a5,#dc2626); }
.cc.hold .cc-inner::before { background:linear-gradient(180deg,#fcd34d,#d97706); }
.cc.bo.hold .cc-inner::before { background:linear-gradient(180deg,#fca5a5,#dc2626); }
.cc.in-progress .cc-inner::before { background:linear-gradient(180deg,#93c5fd,#2563eb); }
.cc.bo.in-progress .cc-inner::before   { background:linear-gradient(180deg,#fca5a5,#dc2626); }
.cc.hold.in-progress .cc-inner::before { background:linear-gradient(180deg,#fcd34d,#d97706); }
.cc.raw-bo-gs .cc-inner::before    { background:linear-gradient(180deg,#fca5a5,#dc2626); }
.cc.raw-bo-fourn .cc-inner::before { background:linear-gradient(180deg,#fcd34d,#d97706); }
.cc.raw-commande .cc-inner::before { background:linear-gradient(180deg,#6ee7b7,#059669); }
.cc.raw-commande { background:linear-gradient(90deg,#e9effd 0%,#f4f7fe 15%,#ffffff 30%); }
.cc.raw-envoye .cc-inner::before   { background:linear-gradient(180deg,#93c5fd,#2563eb); }
.cc.raw-envoye  { background:linear-gradient(90deg,#e3ebfd 0%,#eff4fe 40%,#ffffff 65%); }
.cc.raw-envoye.raw-dated  { background:linear-gradient(90deg,#d8e4fb 0%,#e6effe 55%,#f7f9fe 85%); }
.cc.raw-pickup .cc-inner::before   { background:linear-gradient(180deg,#67e8f9,#0891b2); }
.cc.raw-pickup  { background:linear-gradient(90deg,#ddf5f7 0%,#edfbfc 40%,#ffffff 65%); }
.cc.raw-pickup.raw-dated  { background:linear-gradient(90deg,#d0f3f6 0%,#e0f7f9 55%,#f5fdfd 85%); }

/* Left checkbox column */
.chk-left { width:44px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:3px 3px; background:transparent; }
.chk-mini { display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; padding:3px 5px; border-radius:6px; transition:background .15s; user-select:none; }
.chk-mini:hover { background:#f1f5f9; }
.chk-mini input { margin:0; cursor:pointer; width:13px; height:13px; accent-color:#60a5fa; }
.chk-mini-lbl { font-size:8px; font-weight:600; color:#94a3b8; letter-spacing:.4px; text-transform:uppercase; white-space:nowrap; }
.chk-mini.on-bo .chk-mini-lbl { color:#f87171; font-weight:700; }
.chk-mini.on-hold .chk-mini-lbl { color:#d97706; font-weight:700; }
.chk-mini.on-bo input { accent-color:#f87171; }
.chk-mini.on-hold input { accent-color:#fbbf24; }

/* Card main body */
.cm { flex:1; padding:4px 13px 4px; min-width:0; display:flex; flex-direction:column; gap:2px; }

/* Row 1: product name, format pills, edit pencil */
.cr1 { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; min-height:22px; min-width:0; }
.cprod { font-family:'Outfit',sans-serif; font-size:16px; font-weight:700; color:#0f172a; letter-spacing:-.3px; line-height:1.15; min-width:0; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pickup-badge { display:inline-flex; align-items:baseline; justify-content:center; gap:5px; width:273px; box-sizing:border-box; background:#f0fbfc; color:#0891b2; border:1px solid #a5f3fc; font-family:'Inter',sans-serif; font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; letter-spacing:.2px; white-space:nowrap; flex-shrink:0; overflow:hidden; }
.pickup-badge.compact { width:180px; }
.pickup-badge.livraison { background:#f5f9ff; color:#2563eb; border-color:#bfdbfe; }
.pickup-badge .pb-lbl { font-size:9px; font-weight:700; text-transform:uppercase; opacity:.65; letter-spacing:.5px; }
.pickup-badge .pb-date { font-variant-numeric:tabular-nums; }
.fmt-badge { font-family:'Inter',sans-serif; font-size:9px; font-weight:600; padding:2px 8px; border-radius:999px; background:#eff6ff; color:#3b82f6; white-space:nowrap; letter-spacing:.3px; border:1px solid #dbeafe; }
.fmt-badge.bulk { background:#f5f3ff; color:#8b5cf6; border-color:#e9d5ff; }
.fmt-badge.alert { background:#fef2f2; color:#f87171; border-color:#fecaca; }
.fmt-badge.warn { background:#fffbeb; color:#d97706; border-color:#fde68a; }
.cr1-spacer { flex:1; }
.edit-btn { background:none; border:none; cursor:pointer; font-size:11px; padding:2px 5px; border-radius:6px; color:#94a3b8; opacity:.5; transition:opacity .15s, background .15s, color .15s; }
.edit-btn:hover { background:#f1f5f9; opacity:1; color:#60a5fa; }

/* Row 2: meta (lot, date, qte, etc.) */
.cr2 { display:flex; align-items:center; gap:12px; font-size:11px; color:#94a3b8; flex-wrap:nowrap; line-height:1; min-height:14px; overflow:hidden; }
.cr2 .mp { display:inline-flex; align-items:center; gap:4px; }
.cr2 .mk { font-size:8.5px; font-weight:600; color:#cbd5e1; text-transform:uppercase; letter-spacing:.5px; }
.cr2 .mv { font-size:11px; color:#475569; font-weight:500; font-variant-numeric:tabular-nums; }

/* Row 3: progress strip + action buttons */
.steps-row { display:flex; gap:4px; flex-wrap:nowrap; align-items:center; min-height:18px; }
.prog-strip { position:relative; display:flex; flex:1 1 auto; gap:0; min-width:0; padding:0; border-radius:999px; background:#e2e8f0; height:14px; overflow:hidden; }
.prog-fill { position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,#93c5fd,#3b82f6); border-radius:999px; transition:width .45s cubic-bezier(.4,0,.2,1); z-index:1; }
.step-btn { position:relative; z-index:2; flex:1 1 0; min-width:0; padding:0; border:none; background:transparent; font-size:8px; font-weight:600; color:#94a3b8; cursor:pointer; transition:color .3s, transform .2s; font-family:'Inter',sans-serif; line-height:1; text-align:center; letter-spacing:.4px; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.step-btn:hover { color:#64748b; }
.step-btn.on { color:#fff; font-weight:700; }
.step-btn.on:hover { color:#fff; }
.step-btn.pulsing { animation:stepPulse .35s ease; }
.step-btn.done-btn { flex:0 0 auto; min-width:42px; height:14px; padding:0 8px; border-radius:999px; border:1px solid #e2e8f0; background:#fff; font-size:8px; font-weight:600; color:#94a3b8; text-transform:uppercase; letter-spacing:.5px; z-index:auto; display:inline-flex; align-items:center; justify-content:center; }
.step-btn.done-btn:hover { border-color:var(--accent); color:var(--accent); }
.step-btn.done-btn.on { background:#60a5fa; color:white; border-color:#60a5fa; font-weight:700; }
.step-btn.done-btn.on:hover { background:#3b82f6; border-color:#3b82f6; color:white; }
.raw-swap { display:inline-flex; align-items:center; justify-content:center; margin-left:5px; padding:0 4px; border-radius:999px; background:rgba(255,255,255,.25); color:#fff; font-size:9px; font-weight:700; line-height:1; transition:background .15s, transform .15s; }
.raw-swap:hover { background:rgba(255,255,255,.45); transform:scale(1.15); }
@keyframes stepPulse { 0%{transform:scale(1)} 50%{transform:scale(1.15)} 100%{transform:scale(1)} }

.cr-actions { display:flex; gap:4px; margin-left:2px; align-items:center; flex:0 0 auto; }
.act-btn { padding:0 9px; height:18px; border-radius:999px; border:1px solid #e2e8f0; background:#fff; font-size:8.5px; font-weight:600; color:#94a3b8; cursor:pointer; font-family:'Inter',sans-serif; line-height:1; white-space:nowrap; text-transform:uppercase; letter-spacing:.5px; display:inline-flex; align-items:center; justify-content:center; transition:border-color .15s, color .15s, background .15s; }
.act-btn:hover { border-color:#60a5fa; color:#60a5fa; }
.act-btn.has-content { background:#fffbeb; border-color:#fde68a; color:#d97706; font-weight:700; }
.act-btn.has-content:hover { background:#fef3c7; border-color:#fbbf24; color:#b45309; }

/* Floating mail button for rawmats pickup cards */
.raw-mail-float { position:absolute; left:-36px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; border:1px solid #e2e8f0; background:#fff; font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(15,23,42,.08); transition:border-color .15s, box-shadow .15s, transform .15s; z-index:3; }
.raw-mail-float:hover { border-color:#60a5fa; box-shadow:0 2px 6px rgba(59,130,246,.2); transform:translateY(-50%) scale(1.08); }

/* Rawmats card density overrides (production page only — but harmless elsewhere) */
.cc[data-row^="raw-"] .cm { padding:4px 13px 4px; gap:2px; }
.cc[data-row^="raw-"] .cr1 { min-height:22px; gap:6px; }
.cc[data-row^="raw-"] .cprod { font-size:14px; }
.cc[data-row^="raw-"] .cr2 { min-height:14px; font-size:10.5px; gap:10px; }
.cc[data-row^="raw-"] .cr2:empty { display:none; }
.cc[data-row^="raw-"] .steps-row { min-height:18px; }
.cc[data-row^="raw-"] .chk-left { padding:3px 3px; gap:2px; }

/* EXPANDABLE PANELS (notes/history drawer under card) ======================== */
.exp-panel { display:none; background:linear-gradient(180deg,#fafbfd,#f5f7fb); overflow:hidden; border-radius:0 0 14px 14px; }
.exp-panel.open { display:block; max-height:600px; overflow-y:auto; border-top:1px solid #eef2f7; }
.exp-inner { padding:14px 18px 16px 60px; }
@media (min-width: 1281px) {
  .cc { position:relative; z-index:1; }
  .cc.panel-open { z-index:50; }
  .exp-panel { position:absolute; left:0; right:0; top:100%; z-index:50;
    background:linear-gradient(180deg,#fafbfd,#f5f7fb); border:1px solid #c1cbd9;
    border-radius:14px; box-shadow:0 12px 32px rgba(15,23,42,.15); margin-top:6px; }
  .exp-panel.open { max-height:600px; }
}
.panel-title { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:#64748b; margin-bottom:10px; display:inline-flex; align-items:center; gap:7px; padding:4px 10px 4px 9px; background:white; border:1px solid #dbe3ed; border-radius:999px; box-shadow:0 1px 2px rgba(15,23,42,.03); }
.note-text { font-size:13px; color:#0f172a; line-height:1.55; white-space:pre-wrap; background:white; padding:12px 14px; border-radius:10px; border:1px solid #eef2f7; box-shadow:0 1px 2px rgba(15,23,42,.03); }
.note-empty { font-size:12.5px; color:#94a3b8; font-style:italic; padding:4px 0; }
.hist-table { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; margin-top:4px; table-layout:fixed; background:white; border:1px solid #eef2f7; border-radius:10px; overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.03); }
.hist-table th { text-align:left; padding:9px 12px; font-size:9px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.6px; border-bottom:1px solid #eef2f7; white-space:nowrap; background:#fafbfd; }
.hist-table td { padding:9px 12px; border-bottom:1px solid #f1f5f9; color:#334155; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; font-variant-numeric:tabular-nums; }
.hist-table tr:last-child td { border-bottom:none; }
.hist-table tr:hover td { background:#fafbfd; }
.hist-table .h-prod { font-weight:600; color:#0f172a; }
.hist-table .h-lot { font-family:'Outfit',sans-serif; font-weight:600; color:#0f172a; }
.hist-table .h-mu { color:#94a3b8; }

/* MISC ======================================================================= */
.empty-state { text-align:center; padding:60px 20px; color:var(--gray2); font-size:14px; }
.loading { text-align:center; padding:40px 0; color:var(--gray2); font-size:13px; }
.inline-spin { width:14px; height:14px; border:1.5px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; display:inline-block; vertical-align:middle; margin-right:6px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* MODAL ====================================================================== */
.modal-overlay { position:fixed; inset:0; background:rgba(10,15,30,.6); z-index:1000; display:none; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(4px); }
.modal-overlay.open { display:flex; }
.modal { background:white; border-radius:18px; width:100%; max-width:440px; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(10,15,30,.2); overflow:hidden; }
.modal-header { background:var(--ink); padding:18px 22px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.modal-title { color:white; font-family:'Outfit',sans-serif; font-size:18px; font-weight:700; }
.modal-close { background:none; border:none; color:rgba(255,255,255,.6); font-size:20px; cursor:pointer; padding:4px 8px; }
.modal-close:hover { color:white; }
.modal-body { padding:20px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:12px; }
.fld { display:flex; flex-direction:column; gap:5px; min-width:0; }
.fld label { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--gray2); }
.fld input, .fld select, .fld textarea { padding:9px 11px; border:1.5px solid var(--border); border-radius:9px; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); outline:none; background:white; min-width:0; width:100%; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.fld textarea { resize:vertical; min-height:60px; }
.fld-row { display:flex; gap:8px; align-items:flex-end; }
.fld-row .fld { flex:1; }
.modal-footer { padding:14px 20px; border-top:1px solid var(--border); display:flex; gap:10px; align-items:center; flex-shrink:0; }
.modal-footer .footer-spacer { flex:1; }

/* TOAST ====================================================================== */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--ink); color:white; padding:12px 22px; border-radius:10px; font-size:13px; font-weight:500; box-shadow:0 8px 24px rgba(10,15,30,.25); z-index:2000; opacity:0; transition:opacity .2s; pointer-events:none; }
.toast.show { opacity:1; }
.toast.error { background:var(--red); }

/* ARCHIVE TABLES (used on archive pages — generic enough to share) =========== */
.arc-card { background:white; border-radius:var(--r); border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; }
.arc-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.arc-tbl thead { background:#f8fafc; }
.arc-tbl th { text-align:left; padding:11px 16px; font-size:10px; font-weight:700; color:var(--gray2); text-transform:uppercase; letter-spacing:.6px; border-bottom:1px solid var(--border); white-space:nowrap; }
.arc-tbl td { padding:9px 16px; border-bottom:1px solid #f1f5f9; color:var(--ink); text-align:left; vertical-align:middle; }
.arc-tbl tr:last-child td { border-bottom:none; }
.arc-tbl tr:hover { background:#f8fafc; }
.arc-tbl .pr { font-family:'Outfit',sans-serif; font-weight:700; color:var(--ink); }
.arc-tbl .mu { color:var(--gray); font-size:12px; }
.arc-tbl .num { font-variant-numeric:tabular-nums; }
.arc-tbl .empty { color:#cbd5e1; }

/* RESPONSIVE — mobile/tablet ================================================= */
@media (max-width: 1100px) {
  /* Header & layout */
  header { padding:0 12px; height:52px; }
  .htitle { font-size:15px; }
  .back-link { font-size:12px; padding:5px 8px; }
  .hdiv { display:none; }

  /* Tabs bar — horizontal scroll */
  .tabs-bar { padding:0 6px; overflow-x:auto; top:52px; -webkit-overflow-scrolling:touch; }
  .tabs-bar::-webkit-scrollbar { display:none; }
  .tab-btn { height:42px; padding:0 12px; font-size:12px; gap:6px; flex-shrink:0; white-space:nowrap; }
  .tcnt { font-size:9px; padding:1px 5px; min-width:18px; }

  /* Toolbar */
  .tbar { padding:10px 6px 8px; gap:6px; }
  .tbar-row { gap:6px; }
  .search-wrap { max-width:none; flex:1 1 100%; order:-1; }
  .si { height:34px; font-size:12px; }
  .btn { height:32px; padding:0 12px; font-size:12px; }
  .sort-bar { gap:4px; flex-wrap:wrap; }
  .sort-btn { height:25px; font-size:10px; padding:0 8px; }
  .sort-label { font-size:10px; }

  /* Cards */
  .cards-grid { gap:5px; padding:0 2px; }
  .cc { border-radius:10px; overflow:hidden; }
  .cc::after { border-radius:10px; }
  .cc-inner { border-radius:0; padding-left:5px; overflow:visible; }
  .cc-inner::before { top:0; bottom:0; left:0; width:5px; border-radius:0; }
  .chk-left { width:38px; padding:5px 2px; gap:2px; }
  .chk-mini { padding:2px 3px; }
  .chk-mini input { width:12px; height:12px; }
  .chk-mini-lbl { font-size:7px; }
  .cm { padding:6px 9px 7px; gap:3px; }
  .cprod { font-size:14px; }
  .fmt-badge { font-size:9px; padding:1px 6px; }
  .edit-btn { font-size:10px; padding:2px 4px; }
  .cr2 { gap:8px; font-size:10px; }
  .cr2 .mk { font-size:8px; }
  .cr2 .mv { font-size:10px; }
  .steps-row { gap:3px; }
  .prog-strip { padding:2px; gap:1px; }
  .step-btn { padding:3px 1px; font-size:8px; }
  .step-btn.done-btn { min-width:36px; padding:3px 6px; }
  .cr-actions { gap:2px; margin-left:2px; }
  .act-btn { padding:2px 4px; font-size:9px; line-height:1.3; border-width:1px; }

  /* Drawer */
  .exp-panel.open { max-height:500px; overflow-y:auto; }
  .exp-inner { padding:10px 10px 12px 48px; }
  .hist-table { font-size:11px; min-width:0; }
  .hist-table th, .hist-table td { padding:5px 6px; font-size:10px; }

  /* Modal */
  .modal { max-width:100%; border-radius:14px 14px 0 0; max-height:92vh; }
  .modal-body { padding:16px; gap:10px; }
  .fld-row { flex-direction:column; gap:10px; }

  /* Archive */
  .arc-card { overflow-x:auto; }
  .arc-tbl { font-size:11px; min-width:600px; }
  .arc-tbl th { padding:8px 10px; font-size:9px; }
  .arc-tbl td { padding:7px 10px; font-size:11px; }
}