/* StockMaster — shared theme (all pages).
   Kraft shell, white label surfaces, ink text, state colours only where they carry meaning. */
:root {
    color-scheme: light;
    /* shell */
    --kraft: #c4a27a;
    --kraft-deep: #a9845a;
    --kraft-ink: #2a2014;
    --kraft-soft: #e9dcc8;
    /* ground and surfaces */
    --ground: #efeeea;
    --surface: #ffffff;
    --surface-sunk: #f7f6f3;
    --rule: #dedad2;
    --rule-strong: #c9c3b8;
    /* ink */
    --ink: #1d1b18;
    --ink-2: #57524a;
    --ink-3: #6f695f;
    --ink-hover: #3a362f;
    /* states */
    --ok: #1e7b46;
    --ok-soft: #e3f2e8;
    --low: #9a5600;
    --low-soft: #fbedd5;
    --low-fill: #f2b84b;
    --bad: #b4232a;
    --bad-soft: #fbe5e4;
    --held: #7a5a2e;
    --held-soft: #f3eadc;
    --info: #1f4f7a;
    --info-soft: #e3edf6;
    /* shape */
    --r-sm: 4px;
    --r: 6px;
    --r-lg: 10px;
    --shadow: 0 1px 2px rgba(42, 32, 20, .06), 0 2px 6px rgba(42, 32, 20, .05);
    --shadow-pop: 0 12px 32px rgba(29, 27, 24, .22), 0 2px 6px rgba(29, 27, 24, .12);
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Leelawadee UI", "Noto Sans Thai UI", "Noto Sans Thai", "Sukhumvit Set", Thonburi, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-code: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    /* legacy names still used by inline styles in page scripts */
    --bg-main: var(--ground);
    --bg-card: var(--surface);
    --text-main: var(--ink);
    --text-muted: var(--ink-2);
    --primary: var(--ink);
    --primary-hover: var(--ink-hover);
    --success: var(--ok);
    --warning: var(--low);
    --danger: var(--bad);
    --border: var(--rule);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--ground);
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.3; text-wrap: balance; }
::selection { background: var(--kraft-soft); color: var(--ink); }
input, textarea { caret-color: var(--ink); }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
img { max-width: 100%; }
table { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* scrollbars */
* { scrollbar-color: var(--rule-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* focus */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- marking panel: on hand / reserved / available ---------- */
.mark {
    display: inline-grid;
    grid-template-columns: repeat(3, minmax(3.6rem, auto));
    border: 2px solid var(--ink);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    vertical-align: middle;
}
.mark > span { display: flex; flex-direction: column; gap: .1rem; padding: .3rem .55rem .35rem; min-width: 0; }
.mark > span + span { border-left: 1px solid var(--ink); }
.mark small { font-size: .75rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.mark b { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.mark b i { font-style: normal; font-size: .75rem; font-weight: 600; margin-left: .15rem; }
.mark .mk-held b { color: var(--held); }
.mark .mk-held.is-zero b { color: var(--ink-3); font-weight: 600; }
.mark .mk-free { background: var(--ink); color: #fff; }
.mark .mk-free small { color: rgba(255, 255, 255, .78); }
.mark.is-low .mk-free { background: var(--low-fill); color: var(--ink); }
.mark.is-low .mk-free small { color: var(--kraft-ink); }
.mark.is-out { border-color: var(--bad); }
.mark.is-out > span + span { border-left-color: var(--bad); }
.mark.is-out .mk-free { background: var(--bad); color: #fff; }
.mark.is-out .mk-free small { color: rgba(255, 255, 255, .85); }
.mark-lg { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.mark-lg > span { padding: .55rem .7rem .6rem; }
.mark-lg small { font-size: .76rem; white-space: normal; line-height: 1.25; }
.mark-lg b { font-size: 1.3rem; margin-top: auto; }

/* single availability tag (storefront) */
.avail {
    display: inline-flex; align-items: stretch;
    border: 2px solid var(--ink); border-radius: var(--r-sm);
    font-size: .8rem; font-weight: 600; line-height: 1.35;
    font-variant-numeric: tabular-nums; overflow: hidden; width: fit-content;
}
.avail > span { padding: .22rem .5rem; }
.avail > b { padding: .22rem .5rem; background: var(--ink); color: #fff; }
.avail.is-low > b { background: var(--low-fill); color: var(--ink); }
.avail.is-out { border-color: var(--bad); color: var(--bad); }
.avail.is-out > b { background: var(--bad); color: #fff; }

/* ---------- account dialog trigger shared by every page ---------- */
.sm-account-open {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 38px; padding: .45rem .85rem;
    border: 1px solid var(--rule-strong); border-radius: var(--r);
    background: var(--surface); color: var(--ink);
    font-weight: 600; font-size: .88rem; cursor: pointer; white-space: nowrap;
}
.sm-account-open:hover { border-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}