/* ============================================================
   Inventory Management System — Design System.
   Light theme is the default (no data-theme attribute needed) so
   the dashboard is guaranteed to open in light mode even before any
   JS runs. Dark is available as an opt-in via [data-theme="dark"]
   (see admin_header.php's theme toggle button + assets/js/
   admin_sidebar.js).
   ============================================================ */

:root {
    color-scheme: light;

    --bg-0: #f4f2fb;
    --bg-1: #ffffff;
    --bg-1-rgb: 255, 255, 255;
    --bg-2: #f8f7fc;
    --surface-tint-rgb: 30, 20, 60;
    --panel: #ffffff;
    --panel-border: rgba(30, 20, 60, 0.08);
    --panel-border-hover: rgba(123, 92, 255, 0.35);

    --accent-a: #7b5cff;
    --accent-b: #4f8cff;
    --accent-c: #17b897;
    --accent-a-rgb: 123, 92, 255;
    --accent-b-rgb: 79, 140, 255;
    --accent-gradient: linear-gradient(135deg, var(--accent-a), var(--accent-b));
    --accent-gradient-2: linear-gradient(135deg, var(--accent-c), var(--accent-a));

    --text-hi: #1c1b29;
    --text-mid: #5c5a72;
    --text-low: #8b899e;

    --danger: #d6294c;
    --danger-bg: rgba(214, 41, 76, 0.08);
    --success: #128a63;
    --success-bg: rgba(18, 138, 99, 0.08);
    --warning: #b3760a;
    --warning-bg: rgba(179, 118, 10, 0.1);

    --radius: 14px;
    --radius-sm: 8px;
    --shadow-glow: 0 1px 2px rgba(30, 20, 60, 0.05), 0 16px 40px -20px rgba(30, 20, 60, 0.16);
    --font: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Dark theme — same variable names, dark-mode values. Opt-in only,
   toggled by setting data-theme="dark" on <html>. Every dashboard
   component already reads colors exclusively through these custom
   properties, so this one block re-themes the whole admin dashboard
   — sidebar, topbar, cards, tables, forms, buttons — without editing
   any of those individually. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg-0: #05070d;
    --bg-1: #0b0f1a;
    --bg-1-rgb: 11, 15, 26;
    --bg-2: #111726;
    --surface-tint-rgb: 255, 255, 255;
    --panel: rgba(var(--surface-tint-rgb), 0.04);
    --panel-border: rgba(var(--surface-tint-rgb), 0.08);
    --panel-border-hover: rgba(120, 170, 255, 0.35);

    --accent-a: #4f8cff;
    --accent-b: #7b5cff;
    --accent-c: #24e0c9;
    --accent-a-rgb: 79, 140, 255;
    --accent-b-rgb: 123, 92, 255;

    --text-hi: #eef2fb;
    --text-mid: #a9b3c9;
    --text-low: #6c7690;

    --danger: #ff5d7a;
    --danger-bg: rgba(255, 93, 122, 0.12);
    --success: #2be0a0;
    --success-bg: rgba(43, 224, 160, 0.12);
    --warning: #ffb84f;
    --warning-bg: rgba(255, 184, 79, 0.12);

    --shadow-glow: 0 0 0 1px var(--panel-border), 0 20px 60px -20px rgba(var(--accent-a-rgb), 0.25);
}

/* ============================================================
   Public site theme — navy / black / white
   ============================================================
   Everything below this block is scoped to `body.site-theme-public`,
   which only `includes/header.php` ever adds to <body> (see that
   file). `includes/admin_header.php` never adds this class, so the
   admin dashboard keeps the original dark design system above
   completely untouched, even though both headers share this same
   stylesheet and several class names (.site-header, .main-nav,
   .brand, .btn, .panel, ...).

   Because nearly every rule in this file is written in terms of the
   custom properties above (--bg-*, --panel*, --accent-*, --text-*),
   redeclaring just those properties here is enough to re-theme the
   whole public site — cards, buttons, tables, forms, pills — without
   having to touch each component rule individually. A handful of
   places hardcode a color instead of using a variable (autocomplete
   dropdown, status pills/alerts, the hero glow); those get explicit
   overrides further down.
   ============================================================ */
body.site-theme-public {
    color-scheme: light;

    --bg-0: #ffffff;
    --bg-1: #f4f6fb;
    --bg-2: #eaeef7;
    --surface-tint-rgb: var(--tc2-rgb, 11, 64, 147);
    --panel: #ffffff;
    --panel-border: rgba(var(--tc2-rgb, 11, 64, 147), 0.14);
    --panel-border-hover: rgba(var(--tc2-rgb, 11, 64, 147), 0.4);

    /* Brand colors come from --tc1/--tc2 (web-includes/root.php,
       overridable in Admin > Fonts & Colors) rather than being
       hardcoded here, so this module always matches the marketing
       site and the backend, whichever one changes. */
    --accent-a: var(--tc2, #0b4093);
    --accent-b: var(--dtc2, #072a63);
    --accent-c: var(--tc2, #0b4093);
    --accent-a-rgb: var(--tc2-rgb, 11, 64, 147);
    --accent-b-rgb: var(--dtc2-rgb, 5, 29, 66);

    --text-hi: #000000;
    --text-mid: #33353b;
    --text-low: #6b6e76;

    --danger: #b3261e;
    --danger-bg: rgba(179, 38, 30, 0.08);
    --success: #1c7a3c;
    --success-bg: rgba(28, 122, 60, 0.08);
    --warning: #8a5a00;
    --warning-bg: rgba(138, 90, 0, 0.1);

    --shadow-glow: 0 0 0 1px var(--panel-border), 0 20px 50px -22px rgba(11, 64, 147, 0.22);
}

body.site-theme-public {
    background: var(--bg-0);
    /* The marketing site's root style.css sets overflow-x: hidden on
       BOTH html and body as separate rules. Per spec, overflow-x
       anything other than visible forces overflow-y to compute as
       auto — so that makes html AND body two independent scroll
       containers at once, which is a well-known cause of
       position: sticky silently not working (the browser has an
       ambiguous answer for which element is "the" page scroller).
       Freeing body back to visible here — scoped to this module's
       own pages only, never the plain marketing pages — leaves html
       as the single, unambiguous scrolling container so sticky table
       headers actually work. */
    overflow-x: visible;
}

/* No horizontal scrollbar anywhere on these pages, page-level or a
   wrapper div's — instead, the results table shrinks its own font
   size/padding at narrower widths (see the responsive font-size
   rules further down, near table.results-table) so it fits the
   viewport without needing to scroll OR clip content. html.df-html
   (set only by this module's own includes/header.php, never the
   plain marketing pages) simply keeps <html>'s inherited
   overflow-x: hidden from the marketing site's root style.css — this
   rule mostly exists so that behavior is documented and deliberate
   here rather than an unexplained inherited default. */
html.df-html { overflow-x: hidden; }

body.site-theme-public a { color: var(--accent-a); }
body.site-theme-public a:hover { color: var(--accent-b); }
body.site-theme-public ::selection { background: rgba(11, 64, 147, 0.22); color: #000; }

/* Autocomplete/combo dropdowns hardcode a dark popup background —
   needs a light counterpart so it doesn't look like a stray dark box
   floating on an otherwise white page. */
body.site-theme-public .combo-panel { background: #ffffff; box-shadow: 0 20px 45px -15px rgba(11, 64, 147, 0.25); }
body.site-theme-public .combo-option:hover { background: rgba(11, 64, 147, 0.08); }
body.site-theme-public .combo-input:focus,
body.site-theme-public .ds-range-input:focus,
body.site-theme-public .form-group input:focus,
body.site-theme-public .form-group select:focus,
body.site-theme-public .form-group textarea:focus { box-shadow: 0 0 0 3px rgba(11, 64, 147, 0.18); }

/* Status pills/alerts hardcode pastel text colors tuned for a dark
   background — swap in darker, higher-contrast tones for a light one
   (the tinted *-bg variables above already update automatically). */
body.site-theme-public .pill-success { color: var(--success); }
body.site-theme-public .pill-warning { color: var(--warning); }
body.site-theme-public .pill-danger  { color: var(--danger); }
body.site-theme-public .alert-error   { color: var(--danger); }
body.site-theme-public .alert-success { color: var(--success); }
body.site-theme-public .alert-warning { color: var(--warning); }
body.site-theme-public .btn-danger { color: var(--danger); }
body.site-theme-public .btn-danger:hover { color: var(--danger); border-color: var(--danger); }
body.site-theme-public .memo-error { color: var(--danger); }
body.site-theme-public .copy-status,
body.site-theme-public .cart-status { color: var(--success); }
body.site-theme-public .copy-status.copy-status-error,
body.site-theme-public .cart-status.copy-status-error { color: var(--danger); }

/* Subtle elevation on cards/panels — the reference design's flat
   navy/white look still reads as "premium" with a soft shadow rather
   than the harder borders-only look of the admin dashboard. */
body.site-theme-public .card,
body.site-theme-public .panel,
body.site-theme-public .dd-section,
body.site-theme-public .dd-cert-panel,
body.site-theme-public .results-table-wrap { box-shadow: 0 1px 3px rgba(11, 64, 147, 0.07); }
body.site-theme-public .card:hover { box-shadow: 0 14px 30px -16px rgba(11, 64, 147, 0.35); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--text-hi);
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(var(--accent-b-rgb), 0.20), transparent 60%),
        radial-gradient(900px 500px at 0% 0%, rgba(var(--accent-a-rgb), 0.15), transparent 55%),
        var(--bg-0);
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-c); text-decoration: none; }
a:hover { color: #6ff2df; }

::selection { background: rgba(var(--accent-a-rgb), 0.35); color: #fff; }

/* ---------------- Header / nav ---------------- */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 32px;
    background: rgba(var(--bg-1-rgb), 0.7);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--panel-border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo {
    height: 38px;
    width: auto;
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--panel-border);
}
.admin-badge {
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-a);
    background: rgba(var(--accent-a-rgb), 0.12);
    padding: 4px 10px;
    border-radius: 999px;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    align-items: center;
}
.main-nav a {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--text-mid);
    font-weight: 600;
    font-size: 0.92rem;
    transition: all 0.2s ease;
}
.main-nav a:hover {
    color: var(--text-hi);
    background: var(--panel);
    box-shadow: inset 0 0 0 1px var(--panel-border);
}
.nav-account {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding-left: 14px;
    margin-left: 4px;
    border-left: 1px solid var(--panel-border);
}
.nav-account-name {
    font-size: 0.78em;
    color: var(--text-low);
    white-space: nowrap;
}
.nav-account-btn {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    color: var(--text-mid);
    font-weight: 600;
    font-size: 0.92rem;
    transition: all 0.2s ease;
}
.nav-account-btn:hover {
    color: var(--text-hi);
    background: var(--panel);
    box-shadow: inset 0 0 0 1px var(--panel-border);
}

/* Public site: username/logout use the shared brand root vars
   (--tc1/--tc2/--site-font*, set by web-includes/root.php and
   Admin > Fonts & Colors) instead of the admin dashboard's dark
   palette. */
body.site-theme-public .nav-account-name {
    font-family: var(--site-font, inherit);
    font-size: var(--site-font-size-sm, 0.78em);
    color: var(--dtc2, var(--text-low));
}
body.site-theme-public .nav-account-btn {
    font-family: var(--site-font, inherit);
    color: var(--tc2, var(--accent-a));
    box-shadow: inset 0 0 0 1px var(--tc2, var(--panel-border));
}
body.site-theme-public .nav-account-btn:hover {
    color: var(--white, #fff);
    background: var(--tc2, var(--accent-a));
}

/* ---------------- Public header: topbar + light nav ----------------
   Only ever rendered by includes/header.php (never the admin
   dashboard), scoped to body.site-theme-public anyway for the same
   reason as the theme variables above: .site-header/.main-nav/.brand
   are shared class names with includes/admin_header.php. */
body.site-theme-public .site-topbar {
    background: var(--accent-a);
    color: #ffffff;
    text-align: center;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    padding: 8px 16px;
}
body.site-theme-public .site-topbar a { color: #ffffff; }
body.site-theme-public .site-topbar a:hover { color: rgba(255, 255, 255, 0.75); }

body.site-theme-public .site-header {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--panel-border);
}
body.site-theme-public .company-name {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: var(--text-hi);
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: 0.5px;
}
body.site-theme-public .main-nav a {
    color: var(--accent-a);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.84rem;
}
body.site-theme-public .main-nav a.active { color: var(--text-hi); }
body.site-theme-public .main-nav a:hover {
    color: var(--text-hi);
    background: var(--bg-1);
    box-shadow: inset 0 0 0 1px var(--panel-border);
}
body.site-theme-public .nav-account { color: var(--text-low); }
body.site-theme-public .nav-account a { color: var(--accent-a); }

/* ---------------- Public footer ---------------- */
body.site-theme-public .site-footer {
    background: var(--bg-1);
    border-top: 1px solid var(--panel-border);
    color: var(--text-mid);
}
body.site-theme-public .footer-company { color: var(--text-hi); }

/* The decorative glow behind the hero heading was tuned for a dark
   background (35% opacity reads as a soft glow there); at the same
   opacity on white it looks like a muddy smudge, so tone it down. */
body.site-theme-public .hero::before {
    background: radial-gradient(600px 200px at 50% -10%, rgba(11, 64, 147, 0.07), transparent 70%);
}


/* ---------------- Layout ---------------- */
.site-content {
    max-width: 1180px; margin: 0 auto; padding: 48px 24px 80px;
    font-family: var(--content-font-family, var(--font));
    font-size: var(--content-font-size, 1rem);
    color: var(--content-fg, var(--text-hi));
    background: var(--content-bg, transparent);
}
/* Wider variant for content-heavy pages (e.g. the Results table with
   many columns) — keeps a small margin instead of the standard
   1180px-centered layout, so more columns fit without scrolling. */
.site-content--wide {
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
}

/* ---------------- Hero / home ---------------- */
.hero {
    text-align: center;
    padding: 64px 24px;
    border-radius: var(--radius);
    background: var(--content-bg, var(--panel));
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--panel-border);
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute; inset: -2px;
    background: radial-gradient(600px 200px at 50% -10%, rgba(var(--accent-b-rgb), 0.35), transparent 70%);
    pointer-events: none;
}
.hero h1 {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    margin: 0 0 10px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.hero p { color: var(--content-fg, var(--text-mid)); font-size: 1.05rem; margin: 0 auto 24px; max-width: 520px; opacity: 0.9; }

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: var(--accent-gradient);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 10px 30px -8px rgba(var(--accent-a-rgb), 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: none;
    cursor: pointer;
}
.cta-button:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(var(--accent-a-rgb), 0.7); color: #fff; }

.home-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin-top: 36px;
}
.card {
    background: var(--content-bg, var(--panel));
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 22px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: var(--panel-border-hover); transform: translateY(-3px); }
.card h2 { margin: 0 0 8px; font-size: 1.05rem; }
.card p { margin: 0; color: var(--content-fg, var(--text-mid)); font-size: 0.92rem; opacity: 0.85; }

.social-section { margin-top: 48px; text-align: center; }
.social-icons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--content-bg, var(--panel));
    border: 1px solid var(--panel-border);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.social-icon:hover { transform: translateY(-3px); border-color: var(--panel-border-hover); }
.social-icon img { width: 26px; height: 26px; object-fit: contain; display: block; }

.page-content h1 { margin-top: 0; font-size: 1.9rem; letter-spacing: -0.01em; }
.contact-company-name { font-size: 1.1rem; font-weight: 700; color: var(--content-fg, var(--text-hi)); margin: -8px 0 20px; }
.section-subheading { font-size: 1.15rem; margin: 32px 0 14px; letter-spacing: -0.005em; }
.contact-details { list-style: none; padding: 0; line-height: 2; }
.contact-details li {
    padding: 14px 18px;
    background: var(--content-bg, var(--panel));
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
}

/* ---------------- Auth / login ---------------- */
.login-section {
    max-width: 420px;
    margin: 40px auto;
    background: var(--panel);
    padding: 36px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glow);
}
.login-section h1 { margin: 0 0 4px; font-size: 1.6rem; }
.login-section > p { color: var(--text-mid); margin: 0 0 20px; font-size: 0.92rem; }

.login-form { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.login-form label { font-weight: 600; font-size: 0.85rem; color: var(--text-mid); margin-top: 10px; }

.input-field, .login-form input[type="text"], .login-form input[type="password"] {
    padding: 12px 14px;
    background: rgba(var(--surface-tint-rgb), 0.03);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    color: var(--text-hi);
    font-size: 0.95rem;
    margin-bottom: 4px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    font-family: var(--font);
}
.input-field:focus, .login-form input:focus {
    border-color: var(--accent-a);
    box-shadow: 0 0 0 3px rgba(var(--accent-a-rgb), 0.18);
}

.password-field-wrap { position: relative; display: flex; align-items: center; }
.password-field-wrap input { padding-right: 44px; margin-bottom: 0; }
.login-form .password-toggle-btn,
.password-toggle-btn {
    position: absolute;
    right: 4px;
    top: 0;
    bottom: 0;
    margin: auto 0 !important; /* overrides the generic ".login-form button" margin-top rule */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    color: var(--text-low);
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
}
.password-toggle-btn:hover { color: var(--text-hi); background: rgba(var(--surface-tint-rgb), 0.06); }
.password-toggle-btn svg { display: block; }

.remember-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 4px;
    font-size: 0.88rem;
    color: var(--text-mid);
}
.remember-row input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--accent-a);
}

.login-form button, .btn-primary {
    padding: 13px;
    background: var(--accent-gradient);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    margin-top: 18px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 10px 24px -10px rgba(var(--accent-a-rgb), 0.6);
}
.login-form button:hover, .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(var(--accent-a-rgb), 0.7); }

.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-top: 14px; font-size: 0.88rem; border: 1px solid transparent; }
.alert-error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bg); }
.alert-success { background: var(--success-bg); color: var(--success); border-color: var(--success-bg); }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-bg); }

/* ---------------- Footer ---------------- */
.site-footer {
    background: rgba(5, 7, 13, 0.9);
    border-top: 1px solid var(--panel-border);
    color: var(--text-low);
    margin-top: 60px;
    padding: 34px 24px;
}
.footer-inner { max-width: 1180px; margin: 0 auto; font-size: 0.88rem; line-height: 1.8; }
.footer-inner a { color: var(--accent-c); }
.footer-company { color: var(--text-mid); font-weight: 700; }
.footer-admin-login { margin-top: 8px; font-size: 0.8rem; opacity: 0.75; }

/* ============================================================
   Admin dashboard shell (sidebar layout)
   ============================================================ */
.dash-shell { display: flex; min-height: calc(100vh - 70px); }

.dash-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: var(--bg-1);
    border-right: 1px solid var(--panel-border);
    padding: 24px 14px;
    position: sticky;
    top: 70px;
    align-self: flex-start;
    height: calc(100vh - 70px);
    overflow-y: auto;
}
.dash-sidebar .sidebar-section {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-low);
    padding: 16px 12px 8px;
}
.dash-sidebar a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    color: var(--text-mid);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 2px;
    transition: all 0.15s ease;
}
.dash-sidebar a:hover { background: var(--bg-2); color: var(--text-hi); }
.dash-sidebar a.active {
    background: rgba(var(--accent-a-rgb), 0.14);
    color: var(--accent-a);
    box-shadow: none;
}

.dash-main {
    flex: 1; padding: 32px; max-width: 1400px;
    font-family: var(--content-font-family, var(--font));
    font-size: var(--content-font-size, 1rem);
    color: var(--content-fg, var(--text-hi));
}
.dash-header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.dash-header h1 { margin: 0; font-size: 1.6rem; letter-spacing: -0.01em; }
.dash-header p.dash-subtitle { margin: 4px 0 0; color: var(--content-fg, var(--text-mid)); opacity: 0.85; font-size: 0.9rem; }

.dash-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    color: var(--text-hi);
    text-decoration: none;
    transition: all 0.15s ease;
}
.btn:hover { border-color: var(--panel-border-hover); transform: translateY(-1px); color: var(--text-hi); }
.btn-accent { background: var(--accent-gradient); border: none; color: #fff; box-shadow: 0 8px 22px -10px rgba(var(--accent-a-rgb),0.6); }
.btn-accent:hover { color: #fff; }
.btn-danger { background: var(--danger-bg); border-color: var(--danger-bg); color: var(--danger); }
.btn-danger:hover { color: var(--danger); border-color: var(--danger); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 6px 12px; font-size: 0.78rem; }

/* List/Grid view toggle (Results, View Selected — see
   assets/js/results_view_toggle.js). Two adjoining buttons acting as
   one control; the active one reads as "pressed", not just hovered. */
.results-view-toggle { display: inline-flex; border: 1px solid var(--panel-border); border-radius: 8px; overflow: hidden; }
.results-view-toggle .results-view-btn { border-radius: 0; border: none; border-right: 1px solid var(--panel-border); }
.results-view-toggle .results-view-btn:last-child { border-right: none; }
.results-view-btn.is-active { background: var(--accent-gradient); color: #fff; }
.results-view-btn.is-active:hover { color: #fff; }

/* Grid view: one card per diamond, same data as the List view's row
   (both built from render_results_field_value() so they never drift
   apart). */
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.results-card {
    border: 1px solid var(--panel-border);
    border-top: 3px solid var(--panel-border);
    border-radius: 10px;
    padding: 14px;
    background: var(--panel-bg, #fff);
}
.results-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(var(--surface-tint-rgb), 0.08);
}
.results-card-stockno .results-stockno-link { font-weight: 700; font-size: 1rem; }
.results-card-body { display: flex; flex-direction: column; gap: 6px; }
.results-card-field { display: flex; justify-content: space-between; gap: 10px; font-size: 0.85rem; }
.results-card-label { color: var(--text-low); }
.results-card-value { color: var(--text-hi); text-align: right; overflow-wrap: anywhere; }

/* Search/Reset and any other primary actions on the public Diamond
   Search page: same solid-pill, navy/orange brand button as the
   marketing site's own buttons (see style.css's .hdr-btn), not the
   dashboard's purple accent gradient. */
body.site-theme-public .btn {
    border-radius: 999px;
    border-color: var(--tc2, #0b4093);
    color: var(--tc2, #0b4093);
    background: transparent;
}
body.site-theme-public .btn:hover {
    border-color: var(--tc1, #cf7e16);
    color: var(--tc1, #cf7e16);
}
/* .btn.btn-accent (not just .btn-accent) so this beats the plain
   .btn rule above on specificity regardless of source order — before
   this, both selectors matched buttons with class="btn btn-accent"
   at equal specificity, and .btn (declared later) was winning,
   which silently turned every accent button transparent-with-navy-
   text and, on hover, made the label the same orange as its own
   background (invisible "Search" text, solid orange pill). */
body.site-theme-public .btn.btn-accent {
    background: var(--tc2, #0b4093);
    border-color: var(--tc2, #0b4093);
    color: var(--white, #fff);
    box-shadow: none;
}
body.site-theme-public .btn.btn-accent:hover {
    background: var(--tc1, #cf7e16);
    border-color: var(--tc1, #cf7e16);
    color: var(--white, #fff);
}

/* Stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 30px; }
.dash-group-heading {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-low);
    margin: 0 0 12px;
}
.table-picker-group-heading {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-mid);
    margin: 22px 0 12px;
    padding-top: 6px;
    border-top: 1px solid var(--panel-border);
}
.table-picker-group-heading:first-of-type { border-top: none; padding-top: 0; }
.stat-card {
    background: var(--content-bg, var(--panel));
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 18px 20px;
}
.stat-card .stat-value { font-size: 1.7rem; font-weight: 800; background: var(--accent-gradient-2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-card .stat-label { color: var(--content-fg, var(--text-mid)); opacity: 0.85; font-size: 0.82rem; margin-top: 4px; }

/* Panels / tables */
.panel {
    background: var(--content-bg, var(--panel));
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 24px;
}
.panel h2 { margin: 0 0 4px; font-size: 1.1rem; }
.panel .panel-desc { color: var(--content-fg, var(--text-mid)); opacity: 0.85; font-size: 0.85rem; margin: 0 0 18px; }

.table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.search-input {
    padding: 9px 14px;
    background: rgba(var(--surface-tint-rgb), 0.03);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text-hi);
    font-size: 0.88rem;
    min-width: 220px;
}

/* IMPORTANT: no overflow-x: auto here. ANY element with overflow-x
   set to something other than visible counts as a CSS "scroll
   container" — even if it never actually needs to scroll — and
   position: sticky sticks relative to the NEAREST scroll container
   up the tree, not necessarily the page. With overflow-x: auto here,
   the sticky <th> was locking onto this div instead of the real page
   scroll; since this div's height always matches its content exactly
   (it never scrolls internally), sticky had nothing to stick against
   and silently did nothing. Removing it makes <html> the sticky
   reference again, so the header actually pins on page scroll — the
   trade-off is this wrapper no longer gets its own horizontal
   scrollbar if a very wide table doesn't fit; at that point it will
   just be visually clipped instead (see the mobile card-layout
   breakpoint below for how narrow screens avoid this entirely). */
.table-wrap {
    border-radius: var(--radius-sm);
    border: 1px solid var(--panel-border);
}
/* border-collapse: separate (not the more common "collapse") is
   required here — position: sticky on a <th>/<td> is unreliable (in
   some browsers, silently a no-op) when the table uses border-
   collapse: collapse. border-spacing: 0 keeps the layout looking
   identical to collapsed borders (no visible gap between cells). */
table.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.86rem; }
.theme-role-section {
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    padding: 18px;
    margin-bottom: 18px;
}
.theme-role-heading {
    margin: 0 0 14px;
    font-size: 0.95rem;
    color: var(--accent-a);
}
.theme-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 14px;
}
.field-label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.88rem; }
.field-label small { font-weight: 400; color: var(--text-low); }
.theme-preview-box {
    background: var(--bg-2);
    border: 1px dashed var(--panel-border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}
.theme-preview-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-low);
    margin-bottom: 8px;
}
.theme-preview-sample {
    padding: 10px 14px;
    border-radius: 6px;
    display: inline-block;
    min-width: 200px;
}
.swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--panel);
    margin-right: -6px;
    vertical-align: middle;
}
table.data-table th {
    text-align: left;
    padding: 12px 14px;
    background: rgba(var(--surface-tint-rgb), 0.03);
    color: var(--content-fg, var(--text-mid));
    opacity: 0.9;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--panel-border);
    white-space: nowrap;
}

/* Sticky header: stays visible while scrolling down through a long
   table, instead of disappearing off the top and leaving the rows
   unlabeled. This sticks relative to the whole PAGE's scroll —
   .table-wrap/.results-table-wrap deliberately have NO overflow-x/y
   set at all (see those rules' own comments: even overflow-x: auto
   alone turns a div into a "scroll container" that hijacks sticky's
   reference point away from the page). The header needs a fully
   OPAQUE background (not the ~3% tint above) so scrolled rows don't
   show through underneath it while it's pinned. */
table.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-1, #ffffff);
    opacity: 1;
}
body.site-theme-public table.data-table thead th { background: #ffffff; }

/* Results table header: sort link + optional column filter button
   (Shape, Color, Clarity, ... — see includes/functions.php's
   ds_lookup_map()), spreadsheet-AutoFilter style. */
.results-th-inner { display: flex; align-items: center; gap: 6px; position: relative; }
/* Carat / Price per CT / Amt USD are numeric — right-align the
   header (and its sort link) rather than the default left. */
/* table.data-table th (up above) sets text-align: left with
   specificity (0,1,2) — a bare class, or even th.results-th--right
   (0,1,1), both still LOSE to that rule. Matching its own
   "table.data-table th" shape but adding the class is what actually
   wins here. */
table.data-table th.results-th--right { text-align: right; }
table.data-table th.results-th--right .results-th-inner { justify-content: flex-end; }
/* Matching data cells for the same three numeric columns. */
td.results-td--right { text-align: right; }
.results-sort-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
}
.results-sort-link:hover { color: var(--accent-a); }
.results-sort-icon { font-size: 0.7em; opacity: 0.35; }
.results-sort-icon.is-active { opacity: 1; color: var(--accent-a); }
.results-col-filter { position: relative; }
.results-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-low);
    font-size: 0.65rem;
    cursor: pointer;
    border-radius: 4px;
}
.results-filter-btn:hover { background: rgba(var(--surface-tint-rgb), 0.08); color: var(--text-hi); }
.results-filter-btn.is-active { color: var(--accent-a); }
.results-col-filter-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 240px;
    background: var(--panel);
    border: 1px solid var(--panel-border-hover);
    border-radius: var(--radius-sm);
    box-shadow: 0 20px 45px -15px rgba(11, 64, 147, 0.3);
    padding: 10px;
    z-index: 30;
    /* Header text is uppercase/bold/letter-spaced for the th itself —
       reset all of that for the popup's normal-weight content. */
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    white-space: normal;
}
.results-col-filter-search {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 8px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    background: var(--content-bg, rgba(var(--surface-tint-rgb), 0.03));
    color: var(--content-fg, var(--text-hi));
    font-size: 0.82rem;
    font-family: var(--font);
    outline: none;
}
.results-col-filter-search:focus { border-color: var(--accent-a); }
.results-col-filter-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.results-col-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--content-fg, var(--text-hi));
    cursor: pointer;
}
.results-col-filter-option:hover { background: rgba(var(--surface-tint-rgb), 0.06); }
.results-col-filter-option input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent-a); cursor: pointer; flex: 0 0 auto; }
.results-col-filter-actions { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--panel-border); }
.results-col-filter-clear { color: var(--danger); border-color: rgba(179, 38, 30, 0.3); margin-right: auto; }
table.data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(var(--surface-tint-rgb), 0.04);
    color: var(--content-fg, var(--text-hi));
    vertical-align: top;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
table.data-table tr:nth-child(odd) td { background: #ffffff; }
table.data-table tr:nth-child(even) td { background: #eaf2fc; }
table.data-table tr:hover td { background: #d7e7fb; }
table.data-table tr:last-child td { border-bottom: none; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.pill-success { background: var(--success-bg); color: var(--success); }
.pill-warning { background: var(--warning-bg); color: var(--warning); }
.pill-danger { background: var(--danger-bg); color: var(--danger); }
.pill-neutral { background: rgba(var(--surface-tint-rgb), 0.06); color: var(--text-mid); }

.row-actions { display: flex; gap: 6px; white-space: nowrap; }

.pagination { display: flex; gap: 6px; margin-top: 16px; justify-content: flex-end; align-items: center; font-size: 0.85rem; color: var(--text-mid); flex-wrap: wrap; }
.pagination a, .pagination span { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--panel-border); color: var(--text-mid); }
.pagination a:hover { border-color: var(--panel-border-hover); color: var(--text-hi); }
.pagination .current { background: var(--accent-gradient); color: #fff; border: none; }
.pagination-nav { font-weight: 600; }
.pagination-nav.is-disabled { color: var(--text-low); opacity: 0.5; cursor: default; }
.pagination-ellipsis { padding: 6px 4px; border: none; color: var(--text-low); }
body.site-theme-public .pagination .current { background: var(--tc2, #0b4093); }

.results-pagination-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.results-pagination-bar .pagination { margin-top: 0; }
.results-per-page { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-mid); }
.results-per-page select {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    color: var(--text-hi);
    font-size: 0.85rem;
    font-family: var(--font);
    cursor: pointer;
}
.results-per-page select:focus { border-color: var(--panel-border-hover); outline: none; }
@media (max-width: 720px) {
    .results-pagination-bar { flex-direction: column; align-items: stretch; }
    .results-pagination-bar .pagination { justify-content: center; }
}

/* Forms (CRUD add/edit) */
.crud-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 20px; }
.form-group { display: flex; flex-direction: column; }
.form-group.full-width { grid-column: 1 / -1; }
.form-group label { font-weight: 600; font-size: 0.82rem; color: var(--text-mid); margin-bottom: 6px; }
.hint { font-size: 0.75rem; color: var(--text-low); margin-top: 6px; }
.form-group .hint { margin-top: 4px; }
.form-group input, .form-group select, .form-group textarea {
    padding: 10px 12px;
    background: rgba(var(--surface-tint-rgb), 0.03);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    color: var(--text-hi);
    font-size: 0.9rem;
    font-family: var(--font);
    outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--accent-a);
    box-shadow: 0 0 0 3px rgba(var(--accent-a-rgb), 0.18);
}
.color-field-wrap { display: flex; gap: 8px; align-items: stretch; }
.color-field-wrap .color-swatch {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    padding: 3px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: rgba(var(--surface-tint-rgb), 0.03);
}
.color-field-wrap .color-hex-input { flex: 1; font-family: 'SFMono-Regular', Consolas, monospace; text-transform: lowercase; }

.combo-wrap { position: relative; }
.combo-input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(var(--surface-tint-rgb), 0.03);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    color: var(--text-hi);
    font-size: 0.9rem;
    font-family: var(--font);
    outline: none;
    cursor: text;
}
.combo-input:focus { border-color: var(--accent-a); box-shadow: 0 0 0 3px rgba(var(--accent-a-rgb), 0.18); }
.combo-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: #12161f;
    border: 1px solid var(--panel-border-hover);
    border-radius: var(--radius-sm);
    box-shadow: 0 20px 45px -15px rgba(0,0,0,0.6);
    z-index: 40;
    padding: 4px;
}
.combo-option {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.87rem;
    color: var(--text-hi);
    cursor: pointer;
}
.combo-option:hover { background: rgba(var(--accent-a-rgb), 0.16); }
.combo-empty { padding: 10px; font-size: 0.82rem; color: var(--text-low); }
select option,
.form-group select option {
    /* Explicit fallback for browsers/engines that don't fully honor
       color-scheme on the popup: force readable dark-on-light text
       for the options list regardless of the closed select's theme.
       Deliberately not scoped to any wrapper class — native option
       popups almost always render with a light/white background
       regardless of page theme, cross-browser, so option text needs
       to stay dark everywhere, not just inside .form-group. */
    color: #16181d;
    background: #ffffff;
}
select { color-scheme: light; }
.form-group input[readonly] { color: var(--text-low); background: rgba(var(--surface-tint-rgb), 0.015); }
.form-actions { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 8px; }

.readonly-value { padding: 10px 12px; color: var(--text-mid); font-size: 0.9rem; background: rgba(var(--surface-tint-rgb), 0.015); border-radius: var(--radius-sm); border: 1px solid var(--panel-border); }

/* Dropzone (import) */
.dropzone {
    border: 1.5px dashed var(--panel-border);
    border-radius: var(--radius);
    padding: 28px;
    text-align: center;
    color: var(--text-mid);
    font-size: 0.88rem;
    background: rgba(var(--surface-tint-rgb), 0.015);
}
.dropzone strong { color: var(--text-hi); }

/* Backup list */
.backup-list { list-style: none; padding: 0; margin: 0; }
.backup-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    font-size: 0.87rem;
}
.backup-list .backup-meta { color: var(--text-low); font-size: 0.78rem; }

/* Badges for CRUD table selector cards */
.table-picker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.table-picker-card {
    display: block;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 20px;
    transition: all 0.2s ease;
}
.table-picker-card:hover { border-color: var(--panel-border-hover); transform: translateY(-3px); color: var(--text-hi); }
.table-picker-card .tpc-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-gradient);
    font-weight: 800;
    margin-bottom: 12px;
    color: #fff;
}
.table-picker-card h3 { margin: 0 0 4px; font-size: 1rem; }
.table-picker-card p { margin: 0; color: var(--text-mid); font-size: 0.82rem; }

/* Hamburger toggle button — hidden on desktop, shown on mobile. */
.sidebar-toggle-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    margin-right: 4px;
}
.sidebar-toggle-btn span { display: block; width: 16px; height: 2px; background: var(--text-hi); margin: 0 auto; border-radius: 1px; }

/* Theme toggle — sun icon shown in dark mode (click to go light),
   moon icon shown in light mode (click to go dark). Both icons live
   in the DOM always; only one is ever visible, swapped purely by
   :root[data-theme] with no JS re-render needed. */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--bg-2);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text-mid);
    cursor: pointer;
    transition: all 0.15s ease;
}
.theme-toggle-btn:hover { color: var(--text-hi); border-color: var(--panel-border-hover); }
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }

/* Profile dropdown */
.profile-menu-wrap { position: relative; }
.profile-menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    background: var(--bg-2);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text-hi);
    cursor: pointer;
    transition: all 0.15s ease;
}
.profile-menu-btn:hover { border-color: var(--panel-border-hover); }
.profile-menu-btn svg { color: var(--text-low); flex-shrink: 0; }
.profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.profile-name-block { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.profile-name { font-weight: 600; font-size: 0.86rem; }
.profile-role { font-size: 0.72rem; color: var(--text-low); }
.profile-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-glow);
    overflow: hidden;
    z-index: 60;
}
.profile-menu.is-open { display: block; }
.profile-menu a {
    display: block;
    padding: 11px 16px;
    color: var(--text-mid);
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.1s ease;
}
.profile-menu a:hover { background: var(--bg-2); color: var(--text-hi); }
.profile-menu a:last-child { color: var(--danger); }

@media (max-width: 640px) {
    .profile-name-block { display: none; }
}

.dash-sidebar-backdrop {
    display: none;
}

/* Responsive */
@media (max-width: 860px) {
    .sidebar-toggle-btn { display: flex; }

    .dash-shell { flex-direction: column; position: relative; }
    .dash-main { padding: 16px; }

    /* Off-canvas sidebar: hidden by default so page content is
       immediately visible, instead of forcing a scroll past 20+
       nav links before reaching anything useful. */
    .dash-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 82%;
        max-width: 320px;
        height: 100vh;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 20px 0 50px -20px rgba(0,0,0,0.6);
        padding-top: 80px; /* clears the fixed top header */
    }
    .dash-shell.sidebar-open .dash-sidebar { transform: translateX(0); }

    .dash-shell.sidebar-open .dash-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 55;
    }
}

/* ============================================================
   Font & Color Preview sandbox
   ============================================================ */
.fc-preview-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 0.8fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1100px) {
    .fc-preview-grid { grid-template-columns: 1fr; }
}

.fc-font-group {
    padding: 16px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    background: rgba(var(--surface-tint-rgb), 0.015);
}
.fc-font-group:last-child { margin-bottom: 0; }
.fc-font-group h3 { margin: 0 0 8px; font-size: 0.95rem; }
.fc-font-meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--text-mid);
    margin-bottom: 10px;
}
.fc-font-meta strong { color: var(--text-hi); font-weight: 600; }

.fc-font-input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 184, 79, 0.06);
    border: 1px solid rgba(255, 184, 79, 0.35);
    border-radius: var(--radius-sm);
    color: var(--text-hi);
    font-size: 0.9rem;
    font-family: var(--font);
    outline: none;
    margin-bottom: 10px;
}
.fc-font-input:focus { border-color: var(--warning); box-shadow: 0 0 0 3px rgba(255, 184, 79, 0.18); }
.fc-font-input::placeholder { color: var(--text-low); }

.fc-font-preview {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: rgba(var(--surface-tint-rgb), 0.03);
    color: var(--text-hi);
    min-height: 1.6em;
    word-break: break-word;
}

.fc-color-list { display: flex; flex-direction: column; gap: 8px; }
.fc-color-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fc-color-label { font-size: 0.85rem; color: var(--text-mid); font-weight: 600; min-width: 110px; }
.fc-swatch-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    background: rgba(var(--surface-tint-rgb), 0.03);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.fc-swatch-btn:hover:not(:disabled) { border-color: var(--panel-border-hover); transform: translateY(-1px); }
.fc-swatch-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.fc-swatch-btn.fc-swatch-active { border-color: var(--accent-a); box-shadow: 0 0 0 2px rgba(var(--accent-a-rgb),0.25); }
.fc-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--panel-border);
    flex-shrink: 0;
}
.fc-hex { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.82rem; color: var(--text-mid); }

.fc-image-panel { text-align: center; position: sticky; top: 90px; }
.fc-dummy-image {
    margin: 12px auto 0;
    width: 160px;
    height: 130px;
    border-radius: var(--radius);
    border: 1px solid var(--panel-border);
    background: rgba(var(--surface-tint-rgb), 0.03);
    color: var(--text-mid);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.fc-dummy-caption { font-size: 0.82rem; font-weight: 600; }

/* ============================================================
   Diamond Search filter page
   ============================================================ */
.ds-hero { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
.ds-title { font-size: 2rem; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.ds-actions { display: flex; gap: 10px; align-items: center; }
.copy-markup-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-mid);
    white-space: nowrap;
}
.copy-markup-field input {
    padding: 8px 10px;
    background: rgba(var(--surface-tint-rgb), 0.03);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    color: var(--content-fg, var(--text-hi));
    font-family: var(--font);
}

/* Two-up responsive grid for filter sections — matches the reference
   design's denser layout (Location/Availability side by side, Cut/
   Symmetry side by side, etc.) instead of one full-width section per
   row. Shape (a wide icon row) and free-text search boxes opt out via
   .ds-section--full and span the full width instead. */
.ds-sections-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
    row-gap: 26px;
    margin-bottom: 8px;
}
.ds-section { margin-bottom: 0; min-width: 0; }
/* "Fancy" Color pill selected (assets/js/diamond_search.js): every
   OTHER pill in the Color section dims to show it's disabled — the
   rest of the page (Shape, Clarity, Cut, ...) is untouched. */
.ds-pill:has(input:disabled) { opacity: 0.45; }
.ds-section--full { grid-column: 1 / -1; }
/* Carat's own Reset button (assets/js/diamond_search.js) sits next
   to its heading instead of below it. */
.ds-section-header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ds-section-header-row .ds-section-title { margin-bottom: 0; }
.ds-section-title {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-mid);
    margin: 0 0 12px;
}
.ds-empty-note { color: var(--text-low); font-size: 0.85rem; }

.ds-visually-hidden-input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip-path: inset(50%);
}

.ds-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Carat: the Weight preset pills plus a continuous From/To range,
   side by side on wide screens (wrapping to its own line on narrow
   ones) — matches the reference design's Carat row. */
.ds-carat-row { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.ds-carat-row .ds-pill-row { flex: 1 1 auto; }
.ds-carat-range { flex: 0 0 auto; }
.ds-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    background: var(--content-bg, var(--panel));
    color: var(--content-fg, var(--text-hi));
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.ds-pill:hover { border-color: var(--panel-border-hover); transform: translateY(-1px); }
.ds-pill.ds-selected {
    background: var(--accent-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(var(--accent-a-rgb),0.55);
}
body.site-theme-public .ds-pill.ds-selected {
    background: var(--tc2, #0b4093);
    box-shadow: none;
}

.ds-shape-grid { display: flex; flex-wrap: wrap; gap: 18px; }
.ds-shape-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 76px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-mid);
    user-select: none;
}
.ds-shape-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.ds-shape-btn:hover .ds-shape-icon { border-color: var(--accent-a); transform: translateY(-2px); box-shadow: 0 6px 16px -6px rgba(0,0,0,0.35); }
.ds-shape-btn.ds-selected .ds-shape-icon {
    background: rgba(var(--tc2-rgb, 11, 64, 147), 0.16);
    border-color: var(--tc2, #0b4093);
}
.ds-shape-icon img { width: 40px; height: 40px; object-fit: contain; }
.ds-shape-fallback { font-size: 1.1rem; color: #9a9384; }
.ds-shape-label { font-size: 0.78rem; font-weight: 600; text-align: center; }
.ds-shape-btn.ds-selected .ds-shape-label { color: var(--text-hi); }

.ds-checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--content-fg, var(--text-hi));
    cursor: pointer;
}
.ds-checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent-a); cursor: pointer; }

.ds-range-row { display: flex; align-items: center; gap: 10px; max-width: 320px; width: 100%; }
.ds-range-input {
    flex: 1;
    min-width: 0;
    width: 0; /* combined with flex:1, forces the input to respect the flex container's available space instead of its content-based intrinsic minimum (the classic cause of flexbox overflow with <input type="number">) */
    padding: 10px 12px;
    background: var(--content-bg, rgba(var(--surface-tint-rgb), 0.03));
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    color: var(--content-fg, var(--text-hi));
    font-size: 0.9rem;
    font-family: var(--font);
}
.ds-range-input:focus { border-color: var(--accent-a); outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-a-rgb),0.18); }
.ds-range-sep { color: var(--text-low); }

/* Free-text filter fields (any Main Data column without a lookup
   table — Stock No, Certificate No, ...) render as a compact search
   box with a leading icon, rather than a full boxed section. */
.ds-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 420px;
    padding: 0 14px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    background: var(--content-bg, rgba(var(--surface-tint-rgb), 0.03));
}
.ds-search-row:focus-within { border-color: var(--accent-a); box-shadow: 0 0 0 3px rgba(var(--accent-a-rgb),0.18); }
.ds-search-icon { font-size: 0.9rem; opacity: 0.6; }
.ds-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    padding: 10px 0;
    color: var(--content-fg, var(--text-hi));
    font-size: 0.9rem;
    font-family: var(--font);
    outline: none;
}

.ds-bottom-actions { margin-top: 8px; display: flex; justify-content: flex-end; }

/* From/To numeric fields with +/- stepper buttons, matching the
   reference design's Carat/Price/Measurement inputs. */
.ds-stepper-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ds-stepper {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    background: var(--content-bg, rgba(var(--surface-tint-rgb), 0.03));
    overflow: hidden;
}
.ds-stepper-btn {
    width: 30px;
    flex: 0 0 30px;
    border: none;
    background: none;
    color: var(--text-mid);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ds-stepper-btn:hover { background: rgba(var(--accent-a-rgb), 0.1); color: var(--accent-a); }
.ds-stepper-input {
    width: 76px;
    min-width: 0;
    border: none;
    background: none;
    text-align: center;
    padding: 8px 4px;
    color: var(--content-fg, var(--text-hi));
    font-size: 0.88rem;
    font-family: var(--font);
    outline: none;
    /* Hide the native up/down spinner — the +/- buttons replace it. */
    -moz-appearance: textfield;
}
.ds-stepper-input::-webkit-outer-spin-button,
.ds-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ds-stepper:focus-within { border-color: var(--accent-a); box-shadow: 0 0 0 3px rgba(var(--accent-a-rgb),0.18); }

/* "Price and Amount" combines two range fields (Price and the
   totamt/Amount field) in one section, each with its own sub-label —
   matching the reference's PRICE/CARAT + AMOUNT grouping. */
.ds-price-amount-grid { display: flex; flex-wrap: wrap; gap: 28px; }
.ds-subsection-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-low);
    margin: 0 0 8px;
}

.ds-advanced-toggle-row { display: flex; justify-content: center; margin: 20px 0 28px; }
.ds-advanced-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--panel);
    color: var(--accent-a);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ds-advanced-toggle-btn:hover { border-color: var(--panel-border-hover); }
.ds-advanced-toggle-chevron { transition: transform 0.2s ease; }
.ds-advanced-toggle-btn[aria-expanded="true"] .ds-advanced-toggle-chevron { transform: rotate(180deg); }
.ds-advanced-panel { margin-bottom: 8px; }
.ds-advanced-panel[hidden] { display: none; }

/* ============================================================
   Results page
   ============================================================ */
.results-summary-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 16px; }
.results-count { color: var(--content-fg, var(--text-mid)); opacity: 0.85; font-size: 0.9rem; margin: 0; }
.results-selected-count { color: var(--accent-a); font-weight: 600; font-size: 0.9rem; margin: 0; }
.results-stockno-link { color: var(--accent-a); font-weight: 700; text-decoration: none; }
.results-stockno-link:hover { text-decoration: underline; }
.results-applied-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(var(--accent-a-rgb),0.12);
    border: 1px solid rgba(var(--accent-a-rgb),0.3);
    color: var(--content-fg, var(--text-hi));
    font-size: 0.78rem;
}
.filter-tag strong { font-weight: 700; color: var(--accent-a); }
/* See .table-wrap's comment above: no overflow-x: auto here either,
   for the same reason (it would silently break the sticky header by
   hijacking sticky's scroll-container reference onto this div). */
.results-table-wrap {
    border-radius: var(--radius-sm);
    border: 1px solid var(--panel-border);
}
/* Let every column size itself to its actual content (Stock No,
   Color, Cert No, Measurements, etc. all need very different
   widths) and never wrap/break text inside a cell. On a data table
   with this many columns, forcing everything into equal-width slots
   (the old table-layout: fixed + word-break approach) was actually
   the thing MANGLING the data — "Fancy Intense" chopped to "Fancy
   Inte", measurements and cert numbers cut off mid-value. A table
   wider than the screen now simply isn't scrollable horizontally (see
   .results-table-wrap's own comment on why it can't have overflow-x:
   auto without breaking the sticky header) — every cell stays fully
   readable either way. On narrow/mobile screens the table switches to
   the stacked card layout below (max-width: 720px), which doesn't use
   this column-width logic — or a horizontal scrollbar — at all. */
table.results-table { table-layout: auto; width: 100%; min-width: 0; }
table.results-table th.results-checkbox-col,
table.results-table td.results-checkbox-col { width: 40px; }
table.results-table th {
    white-space: nowrap;
    padding: 8px 10px;
}
table.results-table td {
    white-space: nowrap;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    padding: 8px 6px;
}
.results-empty { text-align: center; padding: 30px !important; color: var(--text-low); white-space: normal !important; }

/* Shrink the Results table's own font size/padding as the viewport
   narrows — this (not a scrollbar) is how it avoids overflowing at
   smaller window sizes or higher browser zoom levels. Text and cell
   padding just get progressively smaller instead. This can't
   literally guarantee zero overflow at every extreme zoom level with
   this many columns, but covers realistic window sizes/zoom. Doesn't
   touch table.data-table generally (admin CRUD tables etc.) — scoped
   to table.results-table specifically, matching how the equal-width
   column-sizing rules above are scoped too. */
@media (max-width: 1600px) {
    table.results-table th { padding: 6px 7px; font-size: 0.7rem; }
    table.results-table td { padding: 6px 6px; font-size: 0.82rem; }
}
@media (max-width: 1400px) {
    table.results-table th { padding: 5px 6px; font-size: 0.64rem; }
    table.results-table td { padding: 5px 5px; font-size: 0.76rem; }
}
@media (max-width: 1200px) {
    table.results-table th { padding: 4px 4px; font-size: 0.58rem; letter-spacing: 0.02em; }
    table.results-table td { padding: 4px 4px; font-size: 0.7rem; }
}
@media (max-width: 960px) {
    table.results-table th { padding: 3px 3px; font-size: 0.52rem; }
    table.results-table td { padding: 3px 3px; font-size: 0.64rem; }
}


/* ============================================================
   Responsive: Diamond Search / Results pages
   ============================================================ */
@media (max-width: 720px) {
    .site-content { padding: 28px 16px 56px; }
    .site-content--wide { padding-left: 12px; padding-right: 12px; }
    .site-topbar { font-size: 0.76rem; padding: 7px 12px; }
    .hero { padding: 40px 20px; }
    .cta-button { width: 100%; justify-content: center; }

    .ds-hero { flex-direction: column; align-items: stretch; gap: 12px; }
    .ds-title { font-size: 1.5rem; }
    .ds-stepper-row { gap: 10px; }
    .ds-carat-range { margin-top: 4px; }
    .ds-price-amount-grid { gap: 18px; }
    /* Results/Cart action bars can hold five or six buttons (Export,
       Excel-select, Copy, Add to Cart, Clear Cart, ...). Squeezing
       them into one flex row (the old behavior) forced tiny,
       word-wrapped buttons, so stack them full-width instead. Some
       of these buttons are wrapped in a plain <form> (e.g. "Clear
       Cart"); display:contents lets the form disappear from layout
       so its button lines up and sizes exactly like its siblings. */
    .ds-actions { flex-direction: column; align-items: stretch; justify-content: stretch; }
    .ds-actions form { display: contents; }
    .ds-actions .btn { flex: 1; width: 100%; text-align: center; }
    .ds-shape-grid { gap: 14px; justify-content: space-between; }
    .ds-shape-btn { width: 72px; }
    .ds-shape-icon { width: 58px; height: 58px; }
    .ds-shape-icon img { width: 36px; height: 36px; }
    .ds-pill { padding: 8px 14px; font-size: 0.82rem; }
    .ds-range-row { max-width: 100%; }
    .ds-sections-grid { grid-template-columns: 1fr; row-gap: 24px; }
    .ds-search-row { max-width: 100%; }

    /* Data tables (admin CRUD lists + the Results page) become a
       stacked card list instead of a wide scrolling table, using the
       data-label attribute already present on each cell. */
    .results-table-wrap, .table-wrap { border: none; overflow: visible; max-height: none; }
    .results-table, .data-table { min-width: 0; width: 100%; }
    .results-table thead, .data-table thead { display: none; }
    .results-table, .results-table tbody, .results-table tr, .results-table td,
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
    .results-table tr, .data-table tr {
        margin-bottom: 12px;
        border: 1px solid var(--panel-border);
        border-radius: var(--radius-sm);
        overflow: hidden;
    }
    table.results-table td, table.data-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border-bottom: 1px solid rgba(var(--surface-tint-rgb), 0.04);
        white-space: normal;
        max-width: none;
    }
    .results-table td:last-child, .data-table td:last-child { border-bottom: none; }
    .results-table td::before, .data-table td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-low);
        flex-shrink: 0;
    }
    .data-table td.row-actions { justify-content: flex-end; gap: 8px; }
    .data-table td.row-actions::before { content: none; }
    .results-empty { display: block !important; text-align: center; }
    .results-empty::before { content: none; }

    /* Page number links can run into the dozens for a large result
       set — wrap and center rather than overflowing the viewport. */
    .pagination { justify-content: center; gap: 4px; }
    .pagination a, .pagination span { padding: 6px 10px; }

    /* Markup Copy row (View Cart): let the input drop to its own
       line on very narrow screens instead of clipping the button. */
    .copy-markup-row { flex-wrap: wrap; }
    .copy-markup-field { flex: 1 1 100%; }
}

/* ============================================================
   Diamond Details page
   ============================================================ */
.dd-layout { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.dd-image-panel { flex: 0 0 280px; }
.dd-image { width: 100%; border-radius: var(--radius); border: 1px solid var(--panel-border); background: #f6f3ee; }

.dd-media-panel { flex: 0 0 460px; display: flex; gap: 10px; }
.dd-media-thumbs { display: flex; flex-direction: column; gap: 10px; flex: 0 0 64px; }
.dd-thumb-btn {
    width: 64px; height: 64px;
    padding: 0;
    border-radius: var(--radius-sm);
    border: 2px solid var(--panel-border);
    background: #f6f3ee;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    position: relative;
    color: var(--accent-a);
}
.dd-thumb-btn img { width: 100%; height: 100%; object-fit: cover; }
.dd-thumb-btn.is-active { border-color: var(--accent-a); }
.dd-play-icon { font-size: 1.1rem; line-height: 1; }
.dd-play-label { position: absolute; bottom: 3px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em; }
.dd-media-box {
    flex: 1 1 auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    border: 1px solid var(--panel-border);
    background: #f6f3ee;
    overflow: hidden;
    position: relative;
}
/* object-fit has no effect on an <iframe> (it only applies to
   replaced elements like <img>/<video>), so an embedded v360.in page
   taller/wider than its 1:1 box shows its own internal scrollbars
   instead of being clipped by the wrapper's overflow:hidden — that's
   the "media overflowing" bug. overflow:hidden here (plus
   scrolling="no" on the <iframe> tag itself, in diamond_details.php)
   suppresses that. */
/* Default: fill the box directly at 100%/100%. The Image viewer
   (V360Images.aspx) already adapts correctly to whatever size it's
   given this way — no scaling needed, and forcing the fixed-canvas
   trick below onto it just makes it render tiny in the corner
   instead (it doesn't magnify to fill a bigger canvas the way the
   video viewer's fixed-size player does). */
.dd-media-content { width: 100%; height: 100%; border: 0; display: block; }

/* Video viewer (vision360.html) renders at its own fixed size
   instead of adapting to the iframe box, so a plain 100%/100% iframe
   either needs its own internal scrollbar or gets cropped. For this
   one only: render it on a large fixed canvas (comfortably bigger
   than it needs, so it never scrolls internally — size set inline by
   diamond_media.js from the data-canvas attribute below), then
   shrink the whole canvas down with a CSS transform to exactly fill
   the box — showing 100% of the video, scaled proportionally, no
   scrollbars, no cropping. */
.dd-media-content--scaled {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
}
.dd-media-content[hidden] { display: none !important; }

@media (max-width: 720px) {
    .dd-media-panel { flex-basis: auto; width: 100%; }
}

.dd-details-grid { flex: 1 1 480px; display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; min-width: 0; }
.dd-side-sections { flex: 1 1 260px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.dd-section {
    flex: 1 1 320px;
    min-width: 260px;
    background: var(--content-bg, var(--panel));
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 20px 22px;
}
.dd-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; border-bottom: 1px solid var(--panel-border); padding-bottom: 10px; }
.dd-section-header h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--content-fg, var(--text-hi)); }

.dd-avail-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--success, #22c55e); }
.dd-avail-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success, #22c55e); display: inline-block; }

.dd-field-list { margin: 0; }
.dd-field-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(var(--surface-tint-rgb), 0.05);
}
.dd-field-row:last-child { border-bottom: none; }
.dd-field-row dt { font-weight: 600; color: var(--content-fg, var(--text-hi)); margin: 0; }
.dd-field-row dd { margin: 0; color: var(--text-mid); text-align: right; }
/* Measurements ("12.8 x 9.15 x 5.87") is long enough to wrap
   awkwardly against a right-aligned value in this narrow side panel
   — print it on its own line below the label instead, at every
   width (not just the existing mobile breakpoint below). */
.dd-field-row--stack { flex-direction: column; align-items: flex-start; gap: 4px; }
.dd-field-row--stack dd { text-align: left; }

@media (max-width: 720px) {
    .dd-layout { flex-direction: column; }
    .dd-image-panel { flex-basis: auto; width: 100%; }
    .dd-details-grid { flex-direction: column; width: 100%; }
    .dd-side-sections { width: 100%; }
    .dd-section { min-width: 0; width: 100%; }
    .dd-field-row { flex-direction: column; gap: 2px; }
    .dd-field-row dd { text-align: left; color: var(--text-hi); }
}

.dd-cert-panel {
    margin-top: 28px;
    background: var(--content-bg, var(--panel));
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 20px 22px;
}
.dd-cert-frame-wrap {
    width: 100%;
    height: 800px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--panel-border);
    background: #f6f3ee;
}
.dd-cert-frame { width: 100%; height: 100%; border: 0; display: block; }
.dd-cert-fallback-link { margin: 10px 0 0; font-size: 0.85rem; }
.dd-cert-fallback-link a { color: var(--accent-a); }

@media (max-width: 720px) {
    /* Mobile browsers (Android Chrome in particular has no built-in
       PDF plugin) generally can't render a PDF embedded in an
       <iframe> — the certificate box just shows blank instead of the
       document, which is what was reported as "not displaying".
       Rather than show a broken-looking empty frame, skip the
       embed on small screens and surface the always-present
       "open in a new tab" link as a full-width button instead —
       that link opens the same PDF directly, which every mobile
       browser can handle on its own. */
    .dd-cert-frame-wrap { display: none; }
    .dd-cert-fallback-link { margin: 0; }
    .dd-cert-fallback-link a {
        display: block;
        text-align: center;
        padding: 14px 18px;
        border-radius: var(--radius-sm);
        background: var(--accent-gradient);
        color: #fff;
        font-weight: 700;
    }
}

/* ============================================================
   Memo action bar (Results page, level 4/5 only)
   ============================================================ */
.memo-bar {
    background: var(--content-bg, var(--panel));
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 20px;
}
.memo-bar-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.memo-field { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.memo-field label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-mid); }
.memo-field select {
    padding: 10px 12px;
    background: rgba(var(--surface-tint-rgb), 0.03);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    color: var(--content-fg, var(--text-hi));
    font-size: 0.9rem;
    font-family: var(--font);
}
.memo-bar-spacer { flex: 1; }
.memo-error {
    background: var(--danger-bg);
    border: 1px solid var(--danger-bg);
    color: var(--danger);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    font-size: 0.88rem;
}
.results-checkbox-col { width: 36px; text-align: center; }
.results-checkbox-col input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent-a); cursor: pointer; }

.copy-markup-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.copy-status,
.cart-status {
    background: var(--success-bg);
    border: 1px solid var(--success-bg);
    color: var(--success);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    font-size: 0.88rem;
}
.copy-status.copy-status-error,
.cart-status.copy-status-error {
    background: var(--danger-bg);
    border-color: var(--danger-bg);
    color: var(--danger);
}

@media (max-width: 720px) {
    .memo-bar-row { flex-direction: column; align-items: stretch; }
    .memo-field { min-width: 0; }
    .memo-bar-spacer { display: none; }
}