@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+SC:wght@300;400;500;600;700&display=swap');

:root, html[data-theme="dark"] {
  --bg:#0f1720; --surface:#161e28; --surface2:#1c2534; --text:#e6edf3; --text2:#a8b8c8; --text3:#6b7b8b;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.05);
  --primary:#7fb8a8; --primary2:#5fa18f; --accent:#9ec3d8; --danger:#ef7d7d; --warning:#d6a357; --success:#7dbf8e;
  --shadow:0 8px 32px rgba(0,0,0,.18); --shadow-sm:0 4px 16px rgba(0,0,0,.1);
  --woc-low-bg:rgba(239,125,125,.12); --woc-low-fg:#ffb1b1;
  --woc-ok-bg:rgba(125,191,142,.13); --woc-ok-fg:#b7ebc3;
  --woc-high-bg:rgba(214,163,87,.12); --woc-high-fg:#efc588;
  --manual-bg:rgba(126,184,168,.06);
  --font:'IBM Plex Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --mono:'IBM Plex Mono','Fira Code',monospace;
}
html[data-theme="light"] {
  --bg:#f4f2ec; --surface:#fff; --surface2:#f8f7f3; --text:#1e2d3d; --text2:#5a6a7a; --text3:#8a96a4;
  --line:rgba(30,45,61,.09); --line2:rgba(30,45,61,.05);
  --primary:#6a9e8e; --primary2:#558272; --accent:#6a9bb5; --danger:#d35f5f; --warning:#b8853a; --success:#5a9a6a;
  --shadow:0 8px 32px rgba(40,55,70,.08); --shadow-sm:0 4px 16px rgba(40,55,70,.05);
  --woc-low-bg:rgba(211,95,95,.10); --woc-low-fg:#b64a4a;
  --woc-ok-bg:rgba(90,154,106,.11); --woc-ok-fg:#347143;
  --woc-high-bg:rgba(184,133,58,.10); --woc-high-fg:#9a661f;
  --manual-bg:rgba(106,158,142,.06);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:var(--font);color:var(--text);background:var(--bg);min-height:100vh;overflow-x:hidden}

/* ===== NAV ===== */
.navbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;padding:0 20px;height:52px;background:var(--surface);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.nav-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);font-weight:700;font-size:14px}
.brand-mark{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-size:12px}
.brand-text{letter-spacing:.01em}
.nav-links{display:flex;gap:4px;flex:1}
.nav-link{text-decoration:none;color:var(--text3);padding:6px 12px;border-radius:8px;font-size:13px;font-weight:500;transition:all .15s}
.nav-link:hover{color:var(--text);background:var(--line2)}
.nav-link.active{color:var(--text);background:rgba(127,184,168,.14)}
.nav-meta{display:flex;align-items:center;gap:8px}
.nav-user{font-size:12px;color:var(--text3);padding:5px 10px;border-radius:8px;background:var(--line2)}
.nav-logout{color:var(--danger)!important}
.theme-toggle{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:8px;padding:5px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px}
.theme-toggle:hover{background:var(--surface2)}
.theme-toggle-icon{font-size:12px}.theme-toggle-text{color:var(--text3)}

/* ===== LAYOUT ===== */
.container{max-width:1600px;margin:0 auto;padding:20px 22px 40px}
.container-center{min-height:100vh;display:flex;align-items:center;justify-content:center}

/* ===== PAGE HEADER ===== */
.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.page-header-stack{align-items:flex-start}
.page-header h1,.page-header h2{font-size:24px;font-weight:700;letter-spacing:-.02em}
.page-sub{color:var(--text3);font-size:12px;margin-top:4px}
.header-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ===== FLASH ===== */
.flash{margin-bottom:14px;padding:10px 14px;border-radius:10px;border:1px solid var(--line);font-size:13px}
.flash-success{background:rgba(90,154,106,.08);color:var(--success)}
.flash-error{background:rgba(211,95,95,.08);color:var(--danger)}
.flash-warning{background:rgba(184,133,58,.08);color:var(--warning)}

/* ===== LOGIN ===== */
.login-box{width:380px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px 28px;box-shadow:var(--shadow)}
.login-logo{font-size:30px;text-align:center;margin-bottom:8px}
.login-title{text-align:center;font-size:24px;font-weight:700;letter-spacing:-.02em}
.login-sub{text-align:center;margin:6px 0 24px;color:var(--text3);font-family:var(--mono);font-size:10px;letter-spacing:.12em}

/* ===== FORMS ===== */
.form-group{margin-bottom:12px}
.form-group label{display:block;margin-bottom:5px;font-size:12px;color:var(--text2);font-weight:600}
.form-group input,.form-group select,.form-group textarea{width:100%;border:1px solid var(--line);outline:none;background:var(--surface2);color:var(--text);border-radius:10px;padding:9px 12px;font:inherit;font-size:14px;transition:border-color .15s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:rgba(127,184,168,.5);box-shadow:0 0 0 3px rgba(127,184,168,.08)}
textarea{resize:vertical;min-height:80px}
.form-row{display:grid;gap:10px}
.form-row.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-row.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:10px;border:1px solid transparent;text-decoration:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;transition:all .15s;white-space:nowrap}
.btn:hover{filter:brightness(1.05)}
.btn-primary{background:var(--primary);color:#fff}
.btn-secondary{background:var(--surface2);color:var(--text);border-color:var(--line)}
.btn-warning{background:var(--warning);color:#fff}
.btn-danger{background:transparent;color:var(--danger);border-color:rgba(211,95,95,.2)}
.btn-danger:hover{background:rgba(211,95,95,.08)}
.btn-block{width:100%}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:8px}

/* ===== SUMMARY ===== */
.summary-grid{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.summary-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 18px;min-width:160px;box-shadow:var(--shadow-sm)}
.summary-label{font-size:11px;color:var(--text3);margin-bottom:6px}
.summary-value{font-size:26px;font-weight:700;letter-spacing:-.02em}

/* ===== SECTION CARD ===== */
.section-card{margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow-sm)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:12px}
.section-head h3{font-size:16px}
.section-head p{font-size:12px;color:var(--text3);margin-top:2px}

/* ===== TABLE ===== */
.table-shell,.table-wrap,.table-scroll-wrap{overflow:auto;border-radius:12px}
table,.data-table{width:100%;border-collapse:collapse}
thead th{background:var(--surface2);color:var(--text2);font-size:11px;font-weight:700;padding:10px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{padding:10px 10px;border-bottom:1px solid var(--line2);font-size:13px;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--line2)}
.num{font-family:var(--mono);font-size:12px}
.actions{display:flex;flex-wrap:wrap;gap:6px}
.empty{text-align:center;color:var(--text3);padding:20px!important}
.soft-badge{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 8px;border-radius:6px;background:rgba(124,167,191,.10);color:var(--accent);font-size:11px;font-weight:600}
.thumb{width:40px;height:40px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.no-img{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--surface2);color:var(--text3);font-size:11px;border:1px dashed var(--line)}
.img-cell{width:50px}

/* WOC */
.woc-red,.woc-low{background:var(--woc-low-bg)!important;color:var(--woc-low-fg);font-weight:700}
.woc-green,.woc-ok{background:var(--woc-ok-bg)!important;color:var(--woc-ok-fg);font-weight:700}
.woc-orange,.woc-high{background:var(--woc-high-bg)!important;color:var(--woc-high-fg);font-weight:700}
.col-manual{background:var(--manual-bg)}
.col-manual input.manual-input{width:72px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--surface2);color:var(--text);text-align:right;font-family:var(--mono);font-size:12px}
.col-manual input.manual-input:focus{border-color:rgba(127,184,168,.5)}
.total-col{color:var(--primary)}
.row-confirmed{background:rgba(127,184,168,.05)}

/* Badges */
.badge,.badge-green,.badge-gray,.badge-blue,.badge-success,.badge-danger,.badge-warning,.badge-info,.badge-muted{display:inline-flex;align-items:center;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600;background:var(--line2)}
.badge-green,.badge-success{color:var(--success)}
.badge-gray,.badge-muted{color:var(--text3)}
.badge-blue,.badge-info{color:var(--accent)}
.badge-danger{color:var(--danger)}
.badge-warning{color:var(--warning)}

/* ===== UPLOAD PANEL (replenishment) ===== */
.upload-panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.upload-fields{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.upload-form .form-group{margin-bottom:0;min-width:160px}
.import-history{margin-top:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px}
.import-history select{max-width:480px}

/* ACTION BAR */
.action-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;margin-bottom:10px;background:var(--surface);border:1px solid var(--line)}
.bottom-action-bar{margin-top:10px;margin-bottom:0}
.action-left,.action-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.muted,small,.sku-label{color:var(--text3)}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,32,.04);z-index:1000;pointer-events:none}
html[data-theme="light"] .modal-overlay{background:rgba(60,70,80,.03)}
.modal{position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);width:min(680px,calc(100vw - 40px));margin:0 auto;max-height:calc(100vh - 60px);overflow-y:auto;overflow-x:hidden;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);z-index:1001;padding:0}
.modal-content{padding:0}
.modal-header,.clean-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 20px 12px;border-bottom:1px solid var(--line)}
.modal-header h3,.clean-modal-header h3{font-size:18px;font-weight:700;letter-spacing:-.02em}
.clean-modal-header p{margin-top:3px;font-size:12px;color:var(--text3)}
.modal-close{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--surface2);color:var(--text);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.modal-close:hover{background:var(--line2)}
.clean-form{padding:0}
.modal-block{padding:14px 20px}
.modal-block+.modal-block{border-top:1px solid var(--line2)}
.modal-footer,.clean-modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--line)}
.modal-panel{width:min(680px,calc(100vw - 40px))}
.modal-panel.modal-wide{width:min(720px,calc(100vw - 40px))}

/* IMAGE UPLOAD */
.image-uploader{display:flex;flex-direction:column;gap:8px}
.simple-upload-zone,.image-paste-zone{min-height:80px;border-radius:12px;border:1px dashed var(--line);background:var(--surface2);display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;cursor:pointer}
.simple-upload-zone:hover,.image-paste-zone:hover{border-color:var(--primary)}
.upload-copy{display:flex;flex-direction:column;gap:2px}
.upload-copy strong{font-size:13px}
.upload-copy .paste-hint,.paste-hint{font-size:11px;color:var(--text3)}
.image-preview,.img-preview{max-width:80px;max-height:80px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.file-row{display:flex;align-items:center;gap:10px}
.plain-file-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 14px;border-radius:8px;background:var(--surface2);border:1px solid var(--line);color:var(--text);font-size:13px;font-weight:600;cursor:pointer}
.plain-file-btn input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.file-name{font-size:12px;color:var(--text3)}

/* FIELD HEAD */
.field-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.field-head h4{font-size:13px;font-weight:700}
.field-head span{font-size:11px;color:var(--text3)}

/* CHECK ROW */
.check-row{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;cursor:pointer}
.check-row input[type="checkbox"]{width:15px;height:15px}
.inline-subform{margin-top:10px;padding:12px;border-radius:12px;background:var(--surface2);border:1px solid var(--line2)}
.inline-subform-solid{margin-top:0}
.subtle-block{background:transparent}

/* STAT */
.stat-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:140px}
.stat-label{font-size:11px;color:var(--text3);margin-bottom:6px}
.stat-value{font-size:22px;font-weight:700}

/* ORDER DETAIL */
.info-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.info-row{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--line2);font-size:13px}
.info-row:last-child{border-bottom:none}
.info-label{font-weight:600;color:var(--text2);min-width:80px}
.total-row td{background:var(--surface2);font-weight:700}
.link-primary{color:var(--primary);text-decoration:none;font-weight:600}
.link-primary:hover{text-decoration:underline}

/* EMPTY STATE */
.empty-state{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:40px 20px;text-align:center;color:var(--text3);font-size:14px}
.unmatched-warn{border-radius:14px;padding:14px;margin-bottom:14px;background:rgba(184,133,58,.06);border:1px solid rgba(184,133,58,.15)}
.unmatched-warn h3{color:var(--warning);margin-bottom:6px;font-size:14px}

/* RESPONSIVE */
@media(max-width:820px){
  .navbar{flex-wrap:wrap;height:auto;padding:10px 16px}
  .nav-links{order:3;width:100%}
  .container{padding:14px 12px 28px}
  .form-row.cols-3,.form-row.cols-2{grid-template-columns:1fr}
  .modal{width:calc(100vw - 24px)!important}
  .modal-panel,.modal-panel.modal-wide{width:calc(100vw - 24px)!important}
  .page-header{flex-direction:column;align-items:flex-start}
  .upload-fields{flex-direction:column}
  .action-bar{flex-direction:column;align-items:flex-start}
  .summary-grid{flex-direction:column}
}

/* global overflow guard */
html { overflow-x: hidden; }
.container { overflow-x: hidden; }
.table-shell, .table-wrap, .table-scroll-wrap { overflow-x: auto; max-width: 100%; }

/* fix modal-content overflow */
.modal-content { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
.modal-panel, .modal-panel.modal-wide { width: 100% !important; max-width: 100% !important; }
.modal { width: min(720px, calc(100vw - 32px)) !important; }

.row-conflict{background:rgba(184,133,58,.06)!important}