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

:root {
  --bg:        #0d1520;
  --bg2:       #111e2e;
  --bg3:       #172539;
  --bg4:       #1d2f47;
  --border:    rgba(255,255,255,.07);
  --border2:   rgba(255,255,255,.13);
  --accent:    #3ecfff;
  --accent-dim:rgba(62,207,255,.10);
  --green:     #2ECC71;
  --orange:    #ffb43c;
  --red:       #e05c5c;
  --text:      #e8edf5;
  --text2:     #8fa3bc;
  --text3:     #4a6278;
  --radius:    6px;
  --font:      'Segoe UI','Apple SD Gothic Neo',system-ui,sans-serif;
}

html, body { height:100%; }
body { font-family:var(--font); background:var(--bg); color:var(--text); height:100vh; overflow:hidden; display:flex; flex-direction:column; font-size:13px; }

/* Login */
#login-screen { position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:9999; }
.login-box { background:var(--bg2); border:1px solid var(--border2); border-radius:12px; padding:40px 48px; width:360px; display:flex; flex-direction:column; gap:18px; }
.login-logo { font-size:24px; font-weight:800; color:var(--accent); letter-spacing:3px; text-align:center; }
.login-sub  { font-size:11px; color:var(--text3); text-align:center; }
.login-field { display:flex; flex-direction:column; gap:5px; }
.login-label { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:.8px; }
.login-input { background:var(--bg3); border:1px solid var(--border2); border-radius:var(--radius); color:var(--text); padding:10px 14px; font-size:13px; outline:none; font-family:var(--font); transition:border-color .15s; }
.login-input:focus { border-color:var(--accent); }
.login-btn { padding:12px; background:var(--accent); border:none; color:#0b1622; border-radius:var(--radius); font-size:13px; font-weight:700; cursor:pointer; font-family:var(--font); }
.login-btn:hover { opacity:.85; }
.login-err { font-size:11px; color:var(--red); text-align:center; min-height:16px; }

/* App shell */
#app-root { display:none; flex-direction:column; flex:1; overflow:hidden; }
.app-header { height:48px; background:var(--bg2); border-bottom:1px solid var(--border2); display:flex; align-items:center; padding:0 20px; gap:12px; flex-shrink:0; }
.app-logo { font-size:18px; font-weight:800; color:var(--accent); letter-spacing:3px; }
.header-tabs { display:flex; gap:4px; margin-left:12px; }
.header-user { margin-left:auto; font-size:10px; color:var(--text3); display:flex; align-items:center; gap:8px; }

/* Tabs */
.tab-btn { padding:5px 14px; border-radius:var(--radius); cursor:pointer; font-size:11px; font-weight:700; font-family:var(--font); transition:all .15s; border:1px solid transparent; }
.tab-btn-blue   { background:var(--bg3); color:var(--accent);  border-color:rgba(62,207,255,.3); }
.tab-btn-green  { background:var(--bg3); color:var(--green);   border-color:rgba(46,204,113,.3); }
.tab-btn-orange { background:var(--bg3); color:var(--orange);  border-color:rgba(255,180,60,.3); }
.tab-btn.active-blue   { background:var(--accent); color:#0b1622; border-color:transparent; }
.tab-btn.active-green  { background:var(--green);  color:#0a1a0a; border-color:transparent; }
.tab-btn.active-orange { background:var(--orange); color:#111;    border-color:transparent; }

/* Panels */
.panel { display:none; flex:1; flex-direction:column; overflow:hidden; min-height:0; }
.panel.active { display:flex; }
.panel-toolbar { padding:10px 16px; background:var(--bg2); border-bottom:1px solid var(--border2); display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; }
.panel-toolbar-title { font-size:12px; font-weight:700; }

/* Buttons */
.btn { padding:7px 16px; border-radius:var(--radius); border:none; cursor:pointer; font-size:11px; font-weight:700; font-family:var(--font); transition:opacity .15s; }
.btn:hover { opacity:.85; }
.btn-primary { background:var(--accent); color:#0b1622; }
.btn-success { background:var(--green); color:#0a1a0a; }
.btn-danger  { background:rgba(224,92,92,.15); border:1px solid rgba(224,92,92,.3); color:var(--red); }
.btn-ghost   { background:var(--accent-dim); border:1px solid rgba(62,207,255,.25); color:var(--accent); }
.btn-orange  { background:rgba(255,180,60,.15); border:1px solid rgba(255,180,60,.3); color:var(--orange); }
.btn-sm      { padding:4px 10px; font-size:11px; }
.logout-btn  { padding:5px 11px; background:rgba(224,92,92,.1); border:1px solid rgba(224,92,92,.3); color:var(--red); border-radius:var(--radius); cursor:pointer; font-size:11px; font-family:var(--font); }

/* ── Panel 1: New Order (horizontal table) ── */
#panel-new-order { overflow:hidden; min-height:0; }
#panel-new-order.active { display:flex; flex-direction:column; }
#panel-new-order .panel-toolbar { flex-shrink:0; }
.order-table-scroll { overflow:auto; flex:1; padding:16px; min-height:0; }


.order-htable { border-collapse:collapse; white-space:nowrap; font-size:11px; width:100%; table-layout:fixed; }
.order-htable th { background:var(--bg3); color:var(--text3); padding:6px 10px; border:1px solid var(--border); font-size:10px; text-transform:uppercase; letter-spacing:.4px; position:sticky; top:0; z-index:2; }
.order-htable td { padding:4px 6px; border:1px solid var(--border); vertical-align:middle; }
.ht-input, .ht-sel { background:var(--bg3); border:1px solid var(--border2); color:var(--text); border-radius:4px; padding:4px 7px; font-size:11px; font-family:var(--font); outline:none; width:100%; box-sizing:border-box; }
.ht-input { min-width:90px; }
.ht-sel   { min-width:70px; cursor:pointer; }
.ht-input:focus, .ht-sel:focus { border-color:rgba(62,207,255,.45); }
.price-cell { color:var(--accent); font-weight:700; text-align:right; min-width:100px; }
.btn-del-row { background:none; border:none; color:rgba(224,92,92,.4); cursor:pointer; font-size:14px; padding:0 4px; }
.btn-del-row:hover { color:var(--red); }

/* ── Panel 2: Order List ── */
#panel-order-list { position:relative; }
.tbl-wrap { overflow:auto; flex:1; }
table.main-table { border-collapse:collapse; width:100%; white-space:nowrap; font-size:11px; }
table.main-table th { background:var(--bg3); color:var(--text3); padding:7px 10px; border:1px solid var(--border); font-weight:500; font-size:10px; text-transform:uppercase; letter-spacing:.4px; position:sticky; top:0; z-index:2; }
table.main-table td { padding:5px 8px; border:1px solid var(--border); vertical-align:middle; color:var(--text2); }
table.main-table tbody tr:hover td { background:rgba(62,207,255,.03); cursor:pointer; }
.td-ordernum { color:var(--accent) !important; font-weight:600; }
.search-input { background:var(--bg3); color:var(--text); border:1px solid var(--border2); border-radius:var(--radius); padding:5px 10px; font-size:11px; width:200px; outline:none; font-family:var(--font); }
.search-input:focus { border-color:rgba(62,207,255,.45); }
.empty-msg { padding:40px; text-align:center; color:var(--text3); font-size:12px; }

/* Drawer */
#ol-drawer { position:absolute; top:0; right:0; width:310px; height:100%; background:var(--bg2); border-left:1px solid var(--border2); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .2s ease; z-index:20; box-shadow:-4px 0 16px rgba(0,0,0,.4); }
#ol-drawer.open { transform:translateX(0); }
.drawer-header { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-bottom:1px solid var(--border2); flex-shrink:0; }
.drawer-title  { font-size:12px; font-weight:700; color:var(--accent); }
.drawer-close  { background:none; border:none; color:var(--text3); cursor:pointer; font-size:16px; }
.drawer-body   { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:14px; }
.drawer-section-title { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:.8px; margin-bottom:7px; }

/* Cost mod */
.cm-row { display:flex; align-items:center; gap:5px; padding:3px 0; border-bottom:1px solid var(--border); }
.cm-row:last-of-type { border-bottom:none; }
.cm-label { flex:1; font-size:11px; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-amt   { width:62px; text-align:right; background:var(--bg3); border:1px solid var(--border2); color:var(--text); border-radius:4px; padding:3px 6px; font-size:11px; font-family:var(--font); outline:none; }
.cm-amt:focus { border-color:rgba(62,207,255,.45); }
.cm-unit  { font-size:10px; color:var(--text3); width:26px; }
.cm-del   { background:none; border:none; color:rgba(224,92,92,.4); cursor:pointer; font-size:13px; padding:0 2px; }
.cm-del:hover { color:var(--red); }
.cm-add-row { display:flex; gap:4px; margin-top:5px; align-items:center; }
.cm-add-row input { padding:3px 6px; border-radius:4px; border:1px solid var(--border2); background:var(--bg3); color:var(--text); font-size:11px; font-family:var(--font); outline:none; }
.cm-add-row .cm-lbl-inp { flex:1; }
.cm-add-row .cm-amt-inp { width:62px; text-align:right; }
.cm-add-btn { padding:3px 10px; background:var(--accent-dim); border:1px solid rgba(62,207,255,.3); color:var(--accent); border-radius:4px; font-size:14px; cursor:pointer; }
.cm-total { display:flex; justify-content:space-between; font-size:12px; padding:6px 0 2px; }

/* ── Panel 3: Quotation List ── */
#panel-quotation { overflow-y:auto; }
.ql-sc-row { display:flex; align-items:center; gap:10px; background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:8px 14px; margin-bottom:6px; }
.ql-sc-label { flex:1; font-size:12px; color:var(--text); }
.ql-sc-input { width:80px; text-align:right; background:var(--bg4); border:1px solid var(--border2); color:var(--text); border-radius:4px; padding:4px 8px; font-size:12px; font-family:var(--font); outline:none; }
.ql-sc-input:focus { border-color:rgba(62,207,255,.45); }
.ql-unit { font-size:10px; color:var(--text3); width:28px; }
.ql-section-title { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
.ql-table { border-collapse:collapse; width:100%; font-size:11px; }
.ql-table th { background:var(--bg3); color:var(--text3); padding:6px 8px; border:1px solid var(--border); font-size:10px; text-transform:uppercase; }
.ql-table td { border:1px solid var(--border); padding:3px 4px; }
.ql-cell { width:100%; background:var(--bg4); border:1px solid transparent; color:var(--text2); border-radius:3px; padding:3px 6px; font-size:11px; font-family:var(--font); outline:none; }
.ql-cell:focus { border-color:rgba(62,207,255,.4); color:var(--text); }
.ql-price { width:80px; text-align:right; }
.ql-del-btn { background:none; border:none; color:rgba(224,92,92,.4); cursor:pointer; font-size:13px; }
.ql-del-btn:hover { color:var(--red); }

/* ── New Order: price breakdown ── */
.price-cell { color:var(--accent); font-weight:700; text-align:right; min-width:100px; cursor:pointer; user-select:none; }
.price-cell:hover { background:rgba(62,207,255,.06); }
.price-arrow { color:var(--text3); font-size:9px; margin-right:2px; }
.bd-wrap { padding:8px 14px; }
.bd-table { border-collapse:collapse; width:auto; min-width:280px; }
.bd-table td { border:none; padding:3px 18px 3px 0; font-size:11px; }
.bd-label { color:var(--text2); }
.bd-amt   { color:var(--text); text-align:right; font-weight:600; }
.bd-base .bd-label { color:var(--accent); }
.bd-sur .bd-label  { color:var(--text3); }
.bd-total td { border-top:1px solid var(--border2); padding-top:5px; font-weight:700; }
.bd-total .bd-label { color:var(--text2); }
.bd-total .bd-amt   { color:var(--accent); }


/* New Order table: fill full width */
.order-htable th:last-child, .order-htable td:last-child { width:40px; text-align:center; }
.order-htable td { overflow:hidden; }

/* ── Order List: center checkboxes ── */
.main-table th:first-child, .main-table td:first-child { text-align:center; vertical-align:middle; }
.main-table input[type="checkbox"] { display:inline-block; margin:0 auto; vertical-align:middle; cursor:pointer; }

/* ── Quotation List: add/delete controls ── */
.ql-sc-name { flex:1; background:var(--bg4); border:1px solid var(--border2); color:var(--text); border-radius:4px; padding:4px 10px; font-size:12px; font-family:var(--font); outline:none; }
.ql-sc-name:focus { border-color:rgba(62,207,255,.45); }
.ql-add-btn { padding:5px 14px; background:var(--accent-dim); border:1px solid rgba(62,207,255,.35); color:var(--accent); border-radius:5px; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--font); }
.ql-add-btn:hover { opacity:.85; }
.ql-sc-del { font-size:13px; }
.ql-sc-addrow { border:1px dashed var(--border2) !important; background:transparent !important; }