/* ============================================================================
   Dextall Production ERP — visual system
   Matches the Dextall viewer: flat light-grey surfaces · indigo #3f53df accent
   JetBrains Mono (UI chrome / data) · Syne (display) · Inter (prose)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;450;500;600&display=swap');

:root {
    --bg:        #e6e7e9;   /* page canvas — a touch darker than surfaces */
    --bg-grid:   #dcdee1;
    --surface:   #efefef;   /* panels / cards — viewer panel grey */
    --surface-2: #e4e5e8;   /* insets, zebra, hovers */
    --ink:       #292929;   /* viewer --text */
    --ink-2:     #353535;   /* viewer --text2 */
    --muted:     #5a5a5a;   /* viewer --text3 */
    --line:      #b0b4ba;   /* viewer --border */
    --line-2:    #c6cace;   /* softer separators */

    --primary:   #3f53df;   /* viewer --accent (indigo-blue) */
    --primary-d: #3445c4;   /* viewer --accent2 */
    --primary-l: #e6e8fb;   /* accent tint (~accent-dim over grey) */

    --accent:    #f0c44a;   /* viewer --yellow — signature, used sparingly */
    --accent-d:  #b98900;
    --accent-l:  #faf0cf;

    --ok:        #2f8f3e;
    --ok-l:      #dcefdd;
    --bad:       #d63a2a;   /* darker of viewer --red #f05a4a */
    --bad-l:     #fbdfdb;
    --warn:      #9a6a00;
    --warn-l:    #f8ecc4;

    --r:    8px;
    --r-sm: 6px;
    --r-lg: 10px;
    --shadow:    0 14px 44px -16px rgba(28,32,42,.42), 0 2px 6px -2px rgba(28,32,42,.14);
    --shadow-sm: 0 1px 2px rgba(28,32,42,.07);

    --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --disp: 'Syne', 'Space Grotesk', system-ui, sans-serif;
    --body: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--body);
    color: var(--ink);
    background-color: var(--bg);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--disp); font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin: 0; }
h1 { font-size: 23px; }
h2 { font-size: 17px; }

code, .mono { font-family: var(--mono); }

/* ---------------------------------------------------------------- top bar  */
.topbar {
    position: sticky; top: 0; z-index: 40;
    background: var(--primary);
    color: #eaf0fb;
    border-bottom: 3px solid var(--accent);
}
.topbar-inner {
    max-width: 1360px; margin: 0 auto;
    display: flex; align-items: center; gap: 22px;
    padding: 0 22px; height: 56px;
}
.topbar .brand {
    display: flex; align-items: center; gap: 11px;
    font-family: var(--disp); font-weight: 600; font-size: 15px;
    color: #fff; letter-spacing: .01em; white-space: nowrap;
}
.topbar .brand:hover { text-decoration: none; }
.brand-tile {
    width: 30px; height: 30px; border-radius: var(--r-sm);
    background: var(--primary); color: #fff;
    display: grid; place-items: center;
    font-family: var(--disp); font-weight: 700; font-size: 13px; letter-spacing: -.03em;
    box-shadow: inset 0 0 0 2px var(--accent);
}
.brand-sub { color: var(--muted); font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

.nav { display: flex; gap: 3px; margin-left: 6px; }
.nav a {
    color: #c3d0ee; padding: 7px 13px; border-radius: 7px;
    font-weight: 500; font-size: 13.5px; line-height: 1;
    display: inline-flex; align-items: center; gap: 7px;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.09); text-decoration: none; }
.nav a.active { color: #fff; background: rgba(255,255,255,.16); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.proj-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface-2); border: 1px solid var(--line);
    padding: 5px 6px 5px 12px; border-radius: 999px; font-size: 12.5px; color: var(--ink-2);
}
.proj-pill b { color: var(--ink); font-family: var(--mono); font-weight: 600; letter-spacing: -.02em; }
.proj-pill .swap { color: var(--primary); padding: 3px 9px; border-radius: 999px; background: var(--primary-l); font-size: 11.5px; }
.proj-pill .swap:hover { background: #d8dcf7; text-decoration: none; color: var(--primary-d); }
.link-quiet { color: var(--muted); font-size: 12.5px; }
.link-quiet:hover { color: var(--primary); text-decoration: none; }

/* ---------------------------------------------------------------- layout   */
.wrap { max-width: 1800px; margin: 0 auto; padding: 26px 34px 60px; }
.wrap-narrow { max-width: 780px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head .eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.page-head p.lede { color: var(--ink-2); margin: 6px 0 0; max-width: 60ch; }

.row { display: flex; gap: 16px; }
.grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

/* ---------------------------------------------------------------- card     */
.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: none;
}
.card-pad { padding: 20px 22px; }
.card-hd {
    padding: 15px 22px; border-bottom: 1px solid var(--line-2);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-hd h2 { display: flex; align-items: center; gap: 9px; }
.card-hd .hint { color: var(--muted); font-size: 12.5px; }

/* ---------------------------------------------------------------- buttons  */
.btn {
    font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: -.01em;
    padding: 9px 15px; border-radius: var(--r-sm); border: 1px solid var(--line);
    background: transparent; color: var(--ink-2); cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; line-height: 1;
    transition: background .12s, border-color .12s, color .12s, transform .05s;
    white-space: nowrap;
}
.btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-l); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--line); color: var(--ink-2); background: transparent; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-d); border-color: var(--primary-d); color: #fff; }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #2a2205; }
.btn-accent:hover { background: var(--accent-d); border-color: var(--accent-d); color: #fff; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--primary-l); color: var(--primary); border-color: transparent; }
.btn-danger { color: var(--bad); border-color: var(--line); background: transparent; }
.btn-danger:hover { background: var(--bad-l); border-color: var(--bad); color: var(--bad); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-lg { padding: 12px 22px; font-size: 15px; }
.btn-block { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------- forms    */
label.field { display: block; margin-bottom: 14px; }
label.field .lbl { display: block; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.input, select.input, textarea.input {
    width: 100%; font-family: var(--body); font-size: 14px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-sm); padding: 9px 12px; line-height: 1.4;
}
.input:focus, select.input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-l);
}
select.input { appearance: none; background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235a5a5a' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px; cursor: pointer; }
.input-mono { font-family: var(--mono); letter-spacing: -.02em; }

.file-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 1.5px dashed var(--line); border-radius: var(--r);
    background: var(--surface-2); padding: 30px 24px; text-align: center;
    cursor: pointer; transition: border-color .12s, background .12s;
}
.file-drop:hover, .file-drop.drag { border-color: var(--primary); background: var(--primary-l); }
.file-drop .fd-icon { color: var(--primary); margin-bottom: 10px; }
.file-drop .fd-title { font-weight: 600; font-family: var(--disp); }
.file-drop .fd-sub { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.file-drop input[type=file] { display: none; }

/* ---------------------------------------------------------------- badges   */
.tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: -.02em;
    padding: 3px 9px; border-radius: 6px; background: var(--surface-2);
    border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap;
}
.tag-panel {
    background: var(--accent-l); border-color: #f3d8a6; color: var(--accent-d);
    font-weight: 600;
}
.tag-panel .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap;
}
.chip .cdot { width: 7px; height: 7px; border-radius: 999px; background: var(--muted); flex: none; }
.pill-count {
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    background: var(--primary-l); color: var(--primary); padding: 2px 8px; border-radius: var(--r-sm);
}

/* ---------------------------------------------------------------- stats    */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    padding: 16px 18px; box-shadow: none;
}
.stat .num { font-family: var(--disp); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -.02em; }
.stat .lbl { color: var(--muted); font-size: 12px; margin-top: 8px; letter-spacing: .02em; text-transform: uppercase; font-weight: 500; }
.stat.accent .num { color: var(--accent-d); }
.stat.primary .num { color: var(--primary); }

/* ---------------------------------------------------------------- tables   */
.table-scroll { overflow: auto; border-radius: var(--r); }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th, table.data td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.data thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface-2); color: var(--muted);
    font-family: var(--mono); font-weight: 600; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
    white-space: nowrap; border-bottom: 1px solid var(--line);
    cursor: default; user-select: none;
}
table.data thead th.sortable { cursor: pointer; }
table.data thead th.sortable:hover { color: var(--primary); }
table.data thead th .arr { opacity: .4; font-size: 10px; margin-left: 3px; }
table.data thead th.sorted .arr { opacity: 1; color: var(--primary); }
table.data tbody tr:hover { background: var(--primary-l); }
table.data tbody tr.expandable { cursor: pointer; }
table.data td.num, table.data th.num { text-align: right; font-family: var(--mono); }
table.data td.code { font-family: var(--mono); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
table.data td.dim  { font-family: var(--mono); color: var(--ink-2); white-space: nowrap; }
table.data .zebra:nth-child(even) { background: #e9eaec; }
table.data .zebra:nth-child(even):hover { background: var(--primary-l); }

.detail-row td { background: #e7e8ea; padding: 0; }
.detail-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 2px 22px; padding: 14px 16px 16px 34px;
}
.detail-grid .d-item { padding: 5px 0; border-bottom: 1px dotted var(--line-2); }
.detail-grid .d-k { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.detail-grid .d-v { font-family: var(--mono); font-size: 12.5px; color: var(--ink); word-break: break-word; }
.detail-grid .d-v.empty { color: #c2ccd6; font-family: var(--body); }

/* --------------------------------------------------------------- toolbar   */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.toolbar .grow { flex: 1 1 220px; }
.search-wrap { position: relative; }
.search-wrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 16px; height: 16px; }
.search-wrap input { padding-left: 34px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.seg button { border: none; background: transparent; padding: 9px 14px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--primary); color: #fff; }

/* --------------------------------------------------------------- panel list */
.panel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.panel-card {
    display: block; text-align: left; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); padding: 15px 16px; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .06s;
    box-shadow: var(--shadow-sm);
}
.panel-card:hover { border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none; transform: translateY(-1px); }
.panel-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-l), var(--shadow); }
.panel-card .pc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.panel-card .pc-name { font-family: var(--mono); font-weight: 600; font-size: 14px; color: var(--ink); letter-spacing: -.02em; word-break: break-all; }
.panel-card .pc-meta { color: var(--muted); font-size: 11.5px; display: flex; gap: 12px; flex-wrap: wrap; }
.panel-card .pc-meta b { color: var(--ink-2); font-family: var(--mono); }

/* --------------------------------------------------------------- project grid */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.proj-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    padding: 18px; box-shadow: var(--shadow-sm); transition: border-color .12s, box-shadow .12s, transform .06s;
    display: flex; flex-direction: column; gap: 14px; position: relative;
}
.proj-card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-1px); }
.proj-card .pj-code { font-family: var(--mono); font-weight: 600; font-size: 19px; letter-spacing: -.03em; color: var(--primary); }
.proj-card .pj-name { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.proj-card .pj-stats { display: flex; gap: 18px; }
.proj-card .pj-stats .s .n { font-family: var(--disp); font-weight: 700; font-size: 20px; }
.proj-card .pj-stats .s .l { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.proj-card .pj-open { position: absolute; top: 14px; right: 14px; color: var(--muted); }
.proj-card:hover .pj-open { color: var(--primary); }

/* --------------------------------------------------------------- preview   */
.preview-banner {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 16px 20px; border-radius: var(--r); border: 1px solid var(--line);
    background: linear-gradient(180deg, #fff, var(--surface-2));
}
.pb-block .pb-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.pb-block .pb-v { font-family: var(--mono); font-weight: 600; font-size: 15px; color: var(--ink); letter-spacing: -.02em; }
.pb-arrow { color: var(--line); }
.pb-panel { background: var(--accent-l); border-color: #f3d8a6; }
.pb-panel .pb-v { color: var(--accent-d); font-size: 17px; }

.notice { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--r-sm); font-size: 13px; border: 1px solid; }
.notice svg { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.notice-warn { background: var(--warn-l); border-color: #ecd8a0; color: var(--warn); }
.notice-info { background: var(--primary-l); border-color: #cdddf7; color: var(--primary-d); }
.notice-ok   { background: var(--ok-l);   border-color: #b9e0c8; color: var(--ok); }
.notice-bad  { background: var(--bad-l);  border-color: #f0c6c3; color: var(--bad); }

/* --------------------------------------------------------------- misc      */
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.divider { height: 1px; background: var(--line-2); margin: 18px 0; }
.hidden { display: none !important; }
.spin { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.center-load { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 40px; color: var(--muted); }

.empty { text-align: center; padding: 50px 24px; color: var(--muted); }
.empty .em-icon { color: var(--line); margin-bottom: 14px; }
.empty h3 { color: var(--ink-2); margin-bottom: 6px; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; flex-wrap: wrap; }
.pager .pg-info { color: var(--muted); font-size: 12.5px; }
.pager .pg-btns { display: flex; gap: 6px; align-items: center; }

/* --------------------------------------------------------------- toast     */
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast {
    background: var(--ink); color: #fff; padding: 11px 15px; border-radius: var(--r-sm);
    font-size: 13px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 9px;
    animation: tin .18s ease; max-width: 340px;
}
.toast.ok  { background: #14532d; }
.toast.bad { background: #7f1d1d; }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }

/* --------------------------------------------------------------- modal     */
.modal-back { position: fixed; inset: 0; background: rgba(19,24,32,.5); z-index: 90; display: grid; place-items: center; padding: 20px; }
.modal { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); width: 100%; max-width: 440px; overflow: hidden; }
.modal .m-hd { padding: 18px 22px; border-bottom: 1px solid var(--line-2); }
.modal .m-bd { padding: 20px 22px; }
.modal .m-ft { padding: 14px 22px; background: var(--surface-2); display: flex; justify-content: flex-end; gap: 9px; }

/* --------------------------------------------------------------- plain pages (login/install) */
.plain-page {
    min-height: 100vh; display: grid; place-items: center; padding: 24px;
}
.card-narrow {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow); padding: 34px 32px; width: 100%; max-width: 400px;
}
.card-narrow h1 { margin-bottom: 8px; }
.brand-mark {
    width: 46px; height: 46px; border-radius: 11px; background: var(--primary); color: #fff;
    display: grid; place-items: center; font-family: var(--disp); font-weight: 700; font-size: 19px;
    letter-spacing: -.03em; box-shadow: inset 0 0 0 3px var(--accent); margin-bottom: 18px;
}
.status { padding: 11px 14px; border-radius: var(--r-sm); font-size: 13.5px; margin: 14px 0; }
.status-ok { background: var(--ok-l); color: var(--ok); }
.status-bad { background: var(--bad-l); color: var(--bad); }
.err-list { background: var(--bad-l); color: var(--bad); border-radius: var(--r-sm); padding: 12px 14px 12px 30px; font-size: 12.5px; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 820px) {
    .topbar-inner { gap: 12px; }
    .brand-sub { display: none; }
    .nav a span.lbl { display: none; }
    .nav a { padding: 8px 10px; }
    .proj-pill .p-word { display: none; }
    .wrap { padding: 18px 14px 50px; }
    .page-head { align-items: flex-start; }
    .detail-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding-left: 16px; }
}

/* ---------------------------------------------------------------- browser add-ons */
.icon-x {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
    background: transparent; border: 1px solid transparent; color: var(--muted);
    transition: background .12s, color .12s, border-color .12s;
}
.icon-x:hover { background: #fdecec; border-color: #f3c9c9; color: var(--bad, #b42318); }
.input-sm { font-size: 12.5px; padding: 6px 10px; }

/* overflow safety: let cards shrink inside grid/flex so inner scrollers work,
   and never let a scroll box exceed its parent (prevents whole-page widening) */
.card { min-width: 0; }
.table-scroll { max-width: 100%; }

/* ---------------------------------------------------------------- export menu */
.menu-wrap { position: relative; }
.menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-sm); box-shadow: var(--shadow);
    min-width: 250px; padding: 6px; display: none;
}
.menu.open { display: block; }
.menu .m-sec {
    font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); padding: 9px 10px 3px; display: flex; flex-direction: column; gap: 2px;
}
.menu .m-sec span { text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--line); color: #9aa6b2; }
.menu button {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    background: transparent; border: none; padding: 8px 10px; border-radius: 6px;
    font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.menu button:hover { background: var(--primary-l); color: var(--primary); }
.menu button svg { color: var(--muted); flex: none; }
.menu button:hover svg { color: var(--primary); }
.menu .badge-x { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.menu .menu-foot {
    border-top: 1px solid var(--line-2); margin-top: 5px; padding: 8px 10px 4px;
    font-size: 11px; color: var(--muted);
}

/* =========================================================== app shell ==== */
.app { display: flex; align-items: stretch; min-height: 100vh; }
.sidebar {
    width: 240px; flex: none; background: var(--surface); color: var(--ink);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
    position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
}
.content { flex: 1; min-width: 0; }

.s-brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.s-brand:hover { text-decoration: none; }
.s-brand-txt { font-family: var(--disp); font-weight: 700; font-size: 15px; line-height: 1.15; }
.s-brand .brand-sub { display: block; margin-top: 1px; }

.s-nav { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; flex: 1; }
.s-group-lbl { font-family: var(--mono); color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; padding: 15px 8px 6px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); border-left: 2px solid transparent; color: var(--ink-2); font-family: var(--mono); font-size: 13px; font-weight: 500; }
.nav-item:hover { background: var(--primary-l); color: var(--primary); text-decoration: none; border-left-color: var(--line); }
.nav-item.active { background: var(--primary-l); color: var(--primary); border-left-color: var(--primary); font-weight: 600; }
.ni-ic { flex: none; width: 18px; height: 18px; display: grid; place-items: center; }
.ni-ic svg { width: 18px; height: 18px; }
.ni-lbl { white-space: nowrap; }

.s-foot { padding: 14px 16px 18px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

@media (max-width: 860px) {
    .app { flex-direction: column; }
    .sidebar { width: auto; height: auto; position: static; }
    .s-nav { flex-direction: row; flex-wrap: wrap; padding: 4px 10px 10px; }
    .s-group-lbl { width: 100%; padding: 8px 8px 2px; }
    .s-foot { flex-direction: row; align-items: center; border-top: none; padding-top: 0; }
}

/* =================================================== panel-list helpers ==== */
.modal.wide { max-width: 940px; width: 94vw; }
.modal.xwide { max-width: 1320px; width: 95vw; }
.modal .m-bd.scroll { max-height: 70vh; overflow: auto; }
.modal.xwide .m-bd.scroll { max-height: 84vh; }

.badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--r-sm); letter-spacing: .02em; text-transform: uppercase; }
.badge.ok   { background: var(--ok-l);   color: var(--ok); }
.badge.warn { background: var(--warn-l); color: var(--warn); }
.badge.mut  { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.badge.info { background: var(--primary-l); color: var(--primary); }

/* batch filter chips */
.batchbar { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.bchip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 7px; align-items: center; }
.bchip:hover { border-color: var(--primary); color: var(--primary); }
.bchip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.bchip .bc-n { font-family: var(--mono); font-size: 11px; opacity: .8; }

/* dimension grid in the detail modal */
.dimgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.dimgrid .dm { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 9px 12px; }
.dimgrid .dm .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dimgrid .dm .v { font-family: var(--mono); font-size: 15px; color: var(--ink); margin-top: 2px; }

.usedin { display: flex; flex-wrap: wrap; gap: 8px; }
.usedin .ub { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 11px; font-size: 12.5px; }
.usedin .ub b { font-family: var(--mono); color: var(--primary); }

/* re-upload diff */
.diffbox { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.diff-sum { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); }
.diff-sum .ds { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.diff-sum .ds .n { font-family: var(--mono); }
.diff-sec { padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.diff-sec:last-child { border-bottom: none; }
.diff-sec h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 7px; }
.diff-row { font-size: 12.5px; padding: 3px 0; border-bottom: 1px dashed var(--line-2); }
.diff-row:last-child { border-bottom: none; }
.diff-row .pid { font-family: var(--mono); font-weight: 600; }
.chg { font-family: var(--mono); font-size: 11.5px; }
.chg .o { color: var(--bad); text-decoration: line-through; }
.chg .n { color: var(--ok); }
.tag-add { color: var(--ok); } .tag-rem { color: var(--bad); } .tag-chg { color: var(--accent-d); }

/* small link-like button inside tables */
.linklike { background: none; border: none; padding: 0; color: var(--primary); font: inherit; cursor: pointer; text-align: left; }
.linklike:hover { text-decoration: underline; }

.sec-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-family: var(--body); font-weight: 600; margin: 0 0 8px; }
table.data td.tw { color: var(--muted); width: 22px; text-align: center; }
table.data td.tw .twist { font-size: 10px; }
table.data tr.detail-row td { background: var(--surface-2); padding: 10px 14px; }
table.data tr.detail-row:hover td { background: var(--surface-2); }

/* BOM callout + helpers (Phase 2) */
.callout { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; font-size: 13px; }
.callout.warn { background: var(--warn-l); border-color: #e6cd8f; color: #6b4e08; }
.callout .callout-hd { font-weight: 600; }
.callout a { color: inherit; text-decoration: underline; }
.strong { font-weight: 700; }
table.data td.strong { color: var(--ink); }
.chip.removable { cursor: pointer; }
.chip.removable:hover { background: var(--bad-l); color: var(--bad); }

/* Orders (Phase 3) */
.orderbar { display: flex; align-items: center; gap: 12px; background: var(--primary-l); border: 1px solid #c3c8f2; border-radius: var(--r); padding: 10px 14px; font-size: 13px; }
.orderbar .ob-n { font-weight: 600; color: var(--primary); }
.orderbar .spacer { flex: 1; }
table.data td.chk, table.data th.chk { width: 34px; text-align: center; padding-right: 4px; }
table.data input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--primary); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.form-grid .field { margin-bottom: 0; }
.qty-input { width: 90px; font-family: var(--mono); text-align: right; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.ord-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--muted); }
.ord-meta b { color: var(--ink-2); font-weight: 600; }

/* Admin panel (Phase 4) */
.admin-top { background: var(--surface); border-bottom: 1px solid var(--line); }
.admin-top-in { max-width: 1800px; margin: 0 auto; padding: 12px 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.role-preview [data-edit-only] { display: none !important; }
.no-create [data-create-only] { display: none !important; }