/* ============================================================
   style.css — LoadPlanIQ design system
   Palette: Indigo #4F46E5 / Ink #0F172A / Canvas #F5F6FB
   Type: Plus Jakarta Sans (display) + Inter (body) + JetBrains Mono (data)
   ============================================================ */

:root{
  --ink:#0F172A;
  --ink-soft:#475569;
  --canvas:#F5F6FB;
  --surface:#FFFFFF;
  --border:#E4E7F2;
  --indigo:#4F46E5;
  --indigo-dark:#3730A3;
  --indigo-tint:#EEF0FF;
  --emerald:#059669;
  --emerald-tint:#E7F8F1;
  --amber:#D97706;
  --amber-tint:#FFF4E0;
  --rose:#E11D48;
  --rose-tint:#FDECEF;
  --slate-tint:#EEF1F8;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 6px 20px rgba(15,23,42,.08);
  --shadow-lg: 0 16px 40px rgba(15,23,42,.12);
  --radius: 14px;
  --radius-sm: 10px;
  --header-h: 64px;
  --sidebar-w: 264px;
}

[data-theme="dark"]{
  --ink:#F1F5F9;
  --ink-soft:#94A3B8;
  --canvas:#0B1020;
  --surface:#121830;
  --border:#232B45;
  --indigo-tint:#1B1F3B;
  --emerald-tint:#0F2A22;
  --amber-tint:#2A2110;
  --rose-tint:#2A1620;
  --slate-tint:#171D34;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:14.5px;
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.brand-title{font-family:'Plus Jakarta Sans',sans-serif;}
code,.mono{font-family:'JetBrains Mono',monospace;}

/* ---------- HEADER ---------- */
.app-header{
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
  gap:12px;
}
.header-left,.header-right{display:flex;align-items:center;gap:10px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--indigo),#7C3AED);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:16px; box-shadow:var(--shadow-sm);
}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-title{font-weight:800;font-size:17px;color:var(--ink);}
.brand-accent{color:var(--indigo);}
.brand-subtitle{font-size:11px;color:var(--ink-soft);font-weight:500;letter-spacing:.2px;}

.icon-btn{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.15s;
}
.icon-btn:hover{background:var(--slate-tint);color:var(--ink);}

.btn{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;border-radius:10px;padding:8px 14px;display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;transition:.15s;}
.btn-light-soft{background:var(--slate-tint);color:var(--ink-soft);}
.btn-light-soft:hover{background:var(--border);color:var(--ink);}
.btn-outline-token{background:var(--surface);color:var(--ink);border-color:var(--border);}
.btn-outline-token:hover{border-color:var(--indigo);color:var(--indigo);}
.btn-primary-token{background:var(--indigo);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary-token:hover{background:var(--indigo-dark);color:#fff;}
.btn-ghost-token{background:transparent;color:var(--ink-soft);border-color:var(--border);}
.btn-ghost-token:hover{background:var(--slate-tint);}
.btn-lg{padding:11px 20px;font-size:14px;}

.profile-pill{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:999px;background:var(--slate-tint);}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,var(--indigo));color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.profile-info{flex-direction:column;line-height:1.1;}
.profile-name{font-size:12.5px;font-weight:700;}
.profile-role{font-size:10.5px;color:var(--ink-soft);}

/* search overlay */
.search-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(2px);z-index:200;display:none;align-items:flex-start;justify-content:center;padding-top:10vh;}
.search-overlay.active{display:flex;}
.search-box{width:min(560px,90vw);background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:12px 16px;display:flex;align-items:center;gap:10px;color:var(--ink-soft);}
.search-box input{flex:1;border:none;outline:none;font-size:15px;background:transparent;color:var(--ink);}
.search-results{width:min(560px,90vw);background:var(--surface);margin-top:6px;border-radius:var(--radius);box-shadow:var(--shadow-lg);max-height:50vh;overflow:auto;}
.search-result-item{padding:10px 16px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px;}
.search-result-item:hover{background:var(--indigo-tint);}
.search-result-item small{display:block;color:var(--ink-soft);}

/* ---------- SHELL / SIDEBAR ---------- */
.app-shell{display:flex;min-height:calc(100vh - var(--header-h));}
.app-sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));
}
.sidebar-progress{padding:18px;display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--border);}
.progress-ring-wrap{position:relative;width:56px;height:56px;flex:0 0 56px;}
.progress-ring{width:56px;height:56px;transform:rotate(-90deg);}
.ring-track{fill:none;stroke:var(--slate-tint);stroke-width:6;}
.ring-fill{fill:none;stroke:var(--indigo);stroke-width:6;stroke-linecap:round;stroke-dasharray:175.9;stroke-dashoffset:175.9;transition:stroke-dashoffset .4s ease;}
.progress-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;}
.progress-title{display:block;font-size:12.5px;font-weight:700;}
.progress-sub{display:block;font-size:11px;color:var(--ink-soft);}

.sidebar-nav{flex:1;overflow-y:auto;padding:10px;}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  cursor:pointer;color:var(--ink-soft);font-size:13px;font-weight:600;margin-bottom:2px;
  transition:.15s; position:relative;
}
.nav-item:hover{background:var(--slate-tint);color:var(--ink);}
.nav-item.active{background:var(--indigo-tint);color:var(--indigo-dark);}
.nav-item .nav-ico{width:18px;text-align:center;}
.nav-item .nav-status{margin-left:auto;font-size:13px;}
.nav-item .nav-status.done{color:var(--emerald);}
.nav-item .nav-status.pending{color:var(--amber);}
.sidebar-footer{padding:12px;border-top:1px solid var(--border);}

/* ---------- MAIN ---------- */
.app-main{flex:1;padding:24px clamp(16px,3vw,36px);min-width:0;}
.view-panel{display:none;}
.view-panel.active{display:block;animation:fadeUp .35s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.panel-title{font-size:24px;font-weight:800;margin:0;}
.panel-subtitle{color:var(--ink-soft);margin:4px 0 0;font-size:13.5px;}

.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);}
.stat-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;margin-bottom:10px;}
.bg-indigo{background:var(--indigo-tint);color:var(--indigo);}
.bg-emerald{background:var(--emerald-tint);color:var(--emerald);}
.bg-amber{background:var(--amber-tint);color:var(--amber);}
.bg-slate{background:var(--slate-tint);color:var(--ink-soft);}
.stat-value{font-size:20px;font-weight:800;}
.stat-label{font-size:12px;color:var(--ink-soft);font-weight:600;}

.empty-card{
  background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);
  text-align:center;padding:48px 24px;color:var(--ink-soft);
}
.empty-card i{font-size:30px;color:var(--indigo);margin-bottom:12px;}
.empty-card h3{margin:0 0 6px;color:var(--ink);}
.empty-card p{max-width:480px;margin:0 auto 16px;font-size:13.5px;}

/* wizard topbar */
.wizard-topbar{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.step-pill{background:var(--indigo-tint);color:var(--indigo-dark);font-weight:700;font-size:12px;padding:6px 12px;border-radius:999px;white-space:nowrap;}
.wizard-progress-track{flex:1;height:8px;background:var(--slate-tint);border-radius:999px;overflow:hidden;}
.wizard-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--indigo),#7C3AED);transition:width .35s ease;}
.step-pct{font-size:12px;font-weight:700;color:var(--ink-soft);width:36px;text-align:right;}

.wizard-step{display:none;}
.wizard-step.active{display:block;animation:fadeUp .3s ease;}

.step-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px clamp(16px,3vw,28px);box-shadow:var(--shadow-sm);}
.step-card-head{margin-bottom:18px;}
.step-card-head h2{font-size:18px;font-weight:800;display:flex;align-items:center;gap:10px;margin:0 0 4px;}
.step-card-head h2 i{color:var(--indigo);font-size:16px;}
.step-card-head p{color:var(--ink-soft);font-size:13px;margin:0;}

.form-label{font-weight:600;font-size:12.5px;color:var(--ink);margin-bottom:5px;}
.req{color:var(--rose);}
.help-icon{color:var(--ink-soft);font-size:11px;margin-left:3px;cursor:help;}
.form-control,.form-select{
  border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:13.5px;background:var(--surface);color:var(--ink);
}
.form-control:focus,.form-select:focus{border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-tint);}
.form-control.is-invalid{border-color:var(--rose);}
.field-error{display:none;color:var(--rose);font-size:11.5px;margin-top:4px;}
.field-error.show{display:block;}

.toggle-row{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--slate-tint);border-radius:10px;}
.form-check-input{cursor:pointer;}
.form-check-input:checked{background-color:var(--indigo);border-color:var(--indigo);}

.dynamic-block{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.dynamic-field-wrap.full{grid-column:1/-1;}
.dynamic-field-wrap .form-check{display:flex;align-items:center;gap:8px;background:var(--slate-tint);border-radius:10px;padding:9px 12px;}
.empty-dynamic-hint{color:var(--ink-soft);font-size:12.5px;font-style:italic;grid-column:1/-1;}

.chip-group{display:flex;flex-wrap:wrap;gap:8px;}
.chip-check{cursor:pointer;}
.chip-check input{display:none;}
.chip-check span{
  display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid var(--border);
  font-size:12.5px;font-weight:600;color:var(--ink-soft);background:var(--surface);transition:.15s;
}
.chip-check input:checked + span{background:var(--indigo);border-color:var(--indigo);color:#fff;}

/* packaging hierarchy */
.hierarchy-list{display:flex;flex-direction:column;gap:10px;}
.hierarchy-level{
  display:flex;align-items:center;gap:10px;background:var(--slate-tint);
  border:1px solid var(--border);border-radius:12px;padding:12px 14px;flex-wrap:wrap;
}
.level-badge{width:26px;height:26px;border-radius:50%;background:var(--indigo);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 26px;}
.hierarchy-level input{flex:1 1 140px;min-width:110px;}
.level-remove{margin-left:auto;color:var(--rose);background:none;border:none;cursor:pointer;font-size:14px;}

/* upload */
.upload-drop{
  border:2px dashed var(--border);border-radius:var(--radius);padding:32px;text-align:center;
  color:var(--ink-soft);cursor:pointer;transition:.15s;
}
.upload-drop:hover,.upload-drop.dragover{border-color:var(--indigo);background:var(--indigo-tint);}
.upload-drop i{font-size:26px;color:var(--indigo);margin-bottom:8px;}
.upload-hint{display:block;font-size:11px;margin-top:4px;}
.upload-list{margin-top:12px;display:flex;flex-direction:column;gap:6px;}
.upload-item{display:flex;align-items:center;gap:8px;background:var(--slate-tint);border-radius:8px;padding:7px 10px;font-size:12.5px;}
.upload-item button{margin-left:auto;border:none;background:none;color:var(--rose);cursor:pointer;}

/* wizard controls */
.wizard-controls{display:flex;align-items:center;justify-content:space-between;margin-top:18px;}
.wizard-controls-right{display:flex;align-items:center;gap:14px;}
.autosave-indicator{font-size:12px;color:var(--emerald);font-weight:600;display:flex;align-items:center;gap:5px;opacity:.85;}

/* review grid */
.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:6px;}
.review-card{background:var(--slate-tint);border:1px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;transition:.15s;}
.review-card:hover{border-color:var(--indigo);box-shadow:var(--shadow-sm);}
.review-card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.review-card-head h4{margin:0;font-size:13.5px;font-weight:800;flex:1;}
.review-status{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;}
.review-status.done{background:var(--emerald-tint);color:var(--emerald);}
.review-status.pending{background:var(--amber-tint);color:var(--amber);}
.review-card dl{margin:0;font-size:12px;}
.review-card dt{color:var(--ink-soft);font-weight:600;}
.review-card dd{margin:0 0 6px;color:var(--ink);word-break:break-word;}
.review-missing{color:var(--rose);font-style:italic;}

.export-bar{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--border);}

/* preview modal */
.modal-backdrop-custom{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:300;display:none;align-items:center;justify-content:center;padding:20px;}
.modal-backdrop-custom.active{display:flex;}
.preview-modal{background:var(--surface);width:min(720px,100%);max-height:85vh;border-radius:var(--radius);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;}
.preview-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
.preview-modal-head h3{margin:0;font-size:15px;}
.preview-modal-body{padding:18px 20px;overflow-y:auto;font-size:13px;line-height:1.7;}
.preview-modal-body h4{font-size:13px;font-weight:800;margin:14px 0 4px;color:var(--indigo);}
.preview-modal-body h4:first-child{margin-top:0;}

/* toast */
.toast-stack{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:400;}
.toast-item{background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-size:12.5px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:8px;animation:fadeUp .25s ease;}
.toast-item i{color:var(--emerald);}

/* mobile sidebar */
@media (max-width:991.98px){
  .app-sidebar{position:fixed;left:-100%;top:var(--header-h);height:calc(100vh - var(--header-h));z-index:100;transition:left .25s ease;box-shadow:var(--shadow-lg);}
  .app-sidebar.open{left:0;}
}

@media print{
  .app-header,.app-sidebar,.wizard-controls,.wizard-topbar,.export-bar{display:none !important;}
  .app-main{padding:0;}
}