/* ui.css — one look for the whole pallet site (palette of index.php).
   .uinav  — shared menu (ui_nav.php), used on every page.
   body.ui-legacy — dark theme for the old light pages; selectors start with body.ui-legacy
   so they win over each page's own inline <style>. */
:root{
    --ui-bg:#0b0d10; --ui-bg2:#111418; --ui-panel:#141820; --ui-panel2:#1a1f29;
    --ui-border:#232a36; --ui-border2:#2c3544; --ui-text:#e6e9ef; --ui-muted:#8a94a6;
    --ui-accent:#6ee7b7; --ui-accent2:#38bdf8; --ui-danger:#f87171; --ui-warn:#fbbf24;
    --ui-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
}
html{-webkit-text-size-adjust:100%}

/* ── shared menu ───────────────────────────────────── */
.uinav{position:sticky;top:0;z-index:900;background:rgba(11,13,16,.92);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--ui-border);font:14px/1.3 var(--ui-font)}
.uinav-in{max-width:1500px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.uinav a.uinav-brand{font-weight:700;color:var(--ui-text);padding:6px 14px 6px 0;margin-right:4px;
    border-right:1px solid var(--ui-border);white-space:nowrap;text-decoration:none;letter-spacing:.3px}
.uinav-links{display:flex;flex-wrap:wrap;gap:2px;align-items:center;flex:1}
.uinav-links a{color:var(--ui-muted);padding:7px 10px;border-radius:8px;font-size:13px;text-decoration:none;white-space:nowrap}
.uinav-links a:hover{background:var(--ui-panel);color:var(--ui-text)}
.uinav-links a.on{background:var(--ui-panel2);color:var(--ui-accent)}
.uinav-links a.sub{font-size:12px}
.uinav-sep{width:1px;height:18px;background:var(--ui-border);margin:0 6px}
.uinav-t{display:none}
.uinav-btn{display:none}
@media (max-width:900px){
    .uinav-in{padding:8px 12px}
    .uinav a.uinav-brand{border:0;padding-right:0;margin-right:auto}
    .uinav-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;
        border:1px solid var(--ui-border2);border-radius:8px;color:var(--ui-text);background:var(--ui-panel);
        cursor:pointer;font-size:14px;-webkit-user-select:none;user-select:none}
    .uinav-btn b{color:var(--ui-accent);font-weight:600}
    .uinav-links{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;padding:8px 0 4px;
        max-height:calc(100vh - 70px);overflow-y:auto}
    .uinav-t:checked ~ .uinav-links{display:flex}
    .uinav-links a,.uinav-links a.sub{padding:12px;font-size:15px}
    .uinav-sep{width:auto;height:1px;margin:6px 0}
}

/* ── flash message (cart) ──────────────────────────── */
.ui-flash{margin:10px 0 14px;padding:10px 14px;border-radius:8px;font-weight:600;border:1px solid}
.ui-flash.ok{background:rgba(110,231,183,.1);color:var(--ui-accent);border-color:rgba(110,231,183,.35)}
.ui-flash.err{background:rgba(248,113,113,.1);color:var(--ui-danger);border-color:rgba(248,113,113,.4)}

/* ── old light pages → dark ────────────────────────── */
body.ui-legacy{margin:0;padding:0;background:var(--ui-bg);color:var(--ui-text);font:14px/1.5 var(--ui-font);
    -webkit-font-smoothing:antialiased}
body.ui-legacy .ui-main{max-width:1500px;margin:0 auto;padding:22px 20px 80px}
body.ui-legacy .ui-main .container{width:auto;max-width:none;margin:0;padding:0}
body.ui-legacy h1{font-size:22px;font-weight:650;color:var(--ui-text);margin:4px 0 16px;text-align:left;
    border:0;padding:0;letter-spacing:-.2px}
body.ui-legacy h2{font-size:17px;font-weight:600;color:var(--ui-text);margin:22px 0 10px}
body.ui-legacy h3{font-size:15px;font-weight:600;color:var(--ui-text);margin:18px 0 8px}
body.ui-legacy p{margin:6px 0}
body.ui-legacy a{color:var(--ui-accent2)}
body.ui-legacy a:hover{color:var(--ui-accent)}
body.ui-legacy strong{color:inherit}
body.ui-legacy label{color:var(--ui-muted)}

body.ui-legacy table{width:100%;border-collapse:separate;border-spacing:0;background:var(--ui-panel);
    border:1px solid var(--ui-border);border-radius:12px;overflow:hidden;margin:0 0 18px;box-shadow:none;color:var(--ui-text)}
body.ui-legacy th{background:var(--ui-bg2);color:var(--ui-muted);font-size:11px;font-weight:600;text-transform:uppercase;
    letter-spacing:.4px;padding:11px 12px;text-align:left;border-bottom:1px solid var(--ui-border)}
body.ui-legacy th a,body.ui-legacy th .sort-link{color:var(--ui-text)}
body.ui-legacy td{padding:10px 12px;border-bottom:1px solid var(--ui-border);font-size:13px;
    font-variant-numeric:tabular-nums;color:var(--ui-text);background:transparent}
body.ui-legacy tr:last-child td{border-bottom:0}
body.ui-legacy tr:nth-child(even){background:transparent}
body.ui-legacy tr:hover,body.ui-legacy tbody tr:hover{background:var(--ui-panel2)}
body.ui-legacy td form,body.ui-legacy th form{margin:0}

body.ui-legacy button,body.ui-legacy input[type=submit],body.ui-legacy input[type=button],
body.ui-legacy a.button-link,body.ui-legacy .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;
    background:rgba(110,231,183,.12);color:var(--ui-accent);border:1px solid rgba(110,231,183,.35);
    border-radius:8px;padding:8px 14px;font:600 13px/1.2 var(--ui-font);cursor:pointer;
    box-shadow:none;transform:none;text-decoration:none;transition:background .15s,color .15s}
body.ui-legacy button:hover,body.ui-legacy input[type=submit]:hover,body.ui-legacy input[type=button]:hover,
body.ui-legacy a.button-link:hover,body.ui-legacy .btn:hover{background:var(--ui-accent);color:#0b0d10;transform:none;box-shadow:none}
body.ui-legacy button:disabled{opacity:.4;cursor:not-allowed;background:transparent;color:var(--ui-muted);border-color:var(--ui-border2)}
body.ui-legacy .reset-filters,body.ui-legacy .cancel-btn,body.ui-legacy .modal-btn.cancel-btn{
    background:var(--ui-panel2);color:var(--ui-text);border-color:var(--ui-border2)}
body.ui-legacy .reset-filters:hover,body.ui-legacy .cancel-btn:hover{background:var(--ui-border2);color:var(--ui-text)}
body.ui-legacy form:has(input[name=remove_item_id]) button,body.ui-legacy #resetButton{
    background:transparent;color:var(--ui-danger);border-color:rgba(248,113,113,.45)}
body.ui-legacy form:has(input[name=remove_item_id]) button:hover,body.ui-legacy #resetButton:hover{background:var(--ui-danger);color:#fff}

body.ui-legacy input[type=text],body.ui-legacy input[type=number],body.ui-legacy input[type=password],
body.ui-legacy input[type=date],body.ui-legacy input[type=search],body.ui-legacy input[type=email],
body.ui-legacy select,body.ui-legacy textarea,body.ui-legacy .editable-location{
    background:var(--ui-bg2);color:var(--ui-text);border:1px solid var(--ui-border2);border-radius:8px;
    padding:8px 10px;font:14px/1.3 var(--ui-font);min-height:36px;box-shadow:none;margin:2px 6px 2px 0}
body.ui-legacy input:focus,body.ui-legacy select:focus,body.ui-legacy textarea:focus{outline:none;border-color:var(--ui-accent2);box-shadow:none}
body.ui-legacy input::placeholder,body.ui-legacy textarea::placeholder{color:#556070}
body.ui-legacy input[type=date],body.ui-legacy select{color-scheme:dark}
body.ui-legacy input[type=checkbox]{accent-color:var(--ui-accent)}

body.ui-legacy .modal{background-color:rgba(0,0,0,.6)}
body.ui-legacy .modal-content{background:var(--ui-panel);color:var(--ui-text);border:1px solid var(--ui-border);
    border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
body.ui-legacy .modal h3{color:var(--ui-text);border-color:var(--ui-border)}
body.ui-legacy .close{color:var(--ui-muted)}
body.ui-legacy .close:hover{color:var(--ui-text)}
body.ui-legacy .highlight-green{background:rgba(110,231,183,.08)!important}
body.ui-legacy .warn{color:var(--ui-danger)}

/* instock_cost.php */
body.ui-legacy .search-filters,body.ui-legacy .table-container{background:var(--ui-panel);border:1px solid var(--ui-border);
    border-radius:12px;box-shadow:none}
body.ui-legacy .search-filters label{color:var(--ui-muted);font-size:12px}
body.ui-legacy .table-container table{border:0;margin:0}
body.ui-legacy .total-row td{background:rgba(56,189,248,.08);border-top:1px solid var(--ui-border2)}
body.ui-legacy .success{background:rgba(110,231,183,.1);color:var(--ui-accent);border-color:rgba(110,231,183,.35)}
body.ui-legacy .error{background:rgba(248,113,113,.1);color:var(--ui-danger);border-color:rgba(248,113,113,.4)}

/* inventory_check.php */
body.ui-legacy #inventoryTable{background:var(--ui-panel);border:1px solid var(--ui-border);box-shadow:none}
body.ui-legacy #inventoryTable th{background:var(--ui-bg2);color:var(--ui-muted)}
body.ui-legacy #inventoryTable td{border-bottom:1px solid var(--ui-border)}
body.ui-legacy .error-background{background:rgba(248,113,113,.12)}
body.ui-legacy .editable-quantity{background:var(--ui-bg2);color:var(--ui-text);border:1px solid var(--ui-border2)}

/* cart.php — Excel import block */
body.ui-legacy .import-section{background:var(--ui-panel);border:2px dashed var(--ui-border2)}
body.ui-legacy .import-section h2{color:var(--ui-text)}
body.ui-legacy .import-section textarea{width:100%;background:var(--ui-bg2)}
body.ui-legacy #importPreview td{color:var(--ui-text)}
body.ui-legacy #importPreview th{background:var(--ui-bg2)}

/* login.php */
body.ui-legacy.ui-login .ui-main{max-width:380px;margin:14vh auto 0;padding:28px 24px;background:var(--ui-panel);
    border:1px solid var(--ui-border);border-radius:14px}
body.ui-legacy.ui-login input[type=password]{width:100%;margin:0 0 12px}
body.ui-legacy.ui-login button{width:100%}

/* ── phones ────────────────────────────────────────── */
@media (max-width:760px){
    body.ui-legacy .ui-main{padding:14px 12px 60px}
    body.ui-legacy h1{font-size:19px}
    body.ui-legacy table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
    body.ui-legacy th,body.ui-legacy td{white-space:nowrap;padding:8px 10px}
    body.ui-legacy input[type=text],body.ui-legacy input[type=number],body.ui-legacy input[type=password],
    body.ui-legacy input[type=date],body.ui-legacy input[type=search],body.ui-legacy select,body.ui-legacy textarea{
        font-size:16px;max-width:100%}
    body.ui-legacy button,body.ui-legacy input[type=submit],body.ui-legacy a.button-link{min-height:42px}
    body.ui-legacy .search-filters .form-group{flex:1 1 auto;margin-right:0}
    body.ui-legacy.ui-login .ui-main{margin:8vh 12px 0}
}