/* Page styles for admin.html — served as an EXTERNAL stylesheet on purpose.
   Some content-filtering extensions (AdGuard-family HTML filtering) strip or
   corrupt large inline <style> blocks on cold (non-cached) page loads, which
   rendered these pages unstyled until a manual reload. External same-origin
   stylesheets are not affected. Do not inline this back. */
.page-loader{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0a0a0a;display:flex;justify-content:center;align-items:center;z-index:999999;transition:opacity .4s ease,visibility .4s ease;opacity:1;visibility:visible}.page-loader.fade-out{opacity:0;visibility:hidden}.loader-content{display:flex;flex-direction:column;align-items:center;text-align:center}.logo-wrapper{position:relative;width:130px;height:130px;display:flex;justify-content:center;align-items:center;margin-bottom:1.5rem}.loader-logo{height:50px;z-index:10;animation:pulse-slow 2s infinite ease-in-out}.loader-spinner-ring{position:absolute;width:110px;height:110px;border:2px solid rgba(207,159,71,.08);border-top:2px solid #cf9f47;border-radius:50%;animation:spin 1.1s linear infinite}.loader-text{color:#fff;font-family:'Outfit',sans-serif;font-size:1.25rem;font-weight:600;letter-spacing:4px;margin-top:.5rem;text-transform:uppercase}.loader-subtext{color:#767676;font-family:'Inter',sans-serif;font-size:.85rem;margin-top:.5rem;letter-spacing:1px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes pulse-slow{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.05);opacity:1}}
        /* Admin roles & delivery config UI */
        .role-badge{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:10px;font-size:.65rem;font-weight:700;letter-spacing:.5px;vertical-align:middle;white-space:nowrap}
        .role-badge-super{background:rgba(207,159,71,.15);color:#b8860b;border:1px solid rgba(207,159,71,.4)}
        .role-badge-manager{background:rgba(100,116,139,.12);color:#475569;border:1px solid rgba(100,116,139,.35)}
        .perms-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem;margin-top:.5rem;padding:.75rem;background:var(--bg-main,#f9fafb);border:1px solid var(--border-light);border-radius:6px;align-items:start}
        .perms-panel label{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-main);margin:0;cursor:pointer;font-weight:500}
        /* Grouped permission catalog (fieldset per sidebar section) */
        .perm-group{display:flex;flex-direction:column;gap:.3rem;border:1px solid var(--border-light);border-radius:6px;padding:.6rem .7rem;margin:0;min-width:0;background:var(--bg-card,#fff)}
        .perm-group legend{font-size:.72rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--accent,#b8860b);padding:0 .3rem}
        .perm-item{line-height:1.3}
        .perm-item input{width:15px;height:15px;margin:0;flex-shrink:0}
        .perm-item-sub{margin-left:1.25rem;font-weight:400 !important;color:var(--text-muted) !important;font-size:.8rem !important}
        .perm-item-sub input{width:13px;height:13px}
        .weekday-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:.75rem}
        .weekday-row label{display:flex;align-items:center;gap:4px;font-size:.8rem;font-weight:600;color:var(--text-main);margin:0;cursor:pointer;border:1px solid var(--border-light);border-radius:4px;padding:4px 8px;background:var(--bg-main,#f9fafb)}
        .blocked-dates-list{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
        .date-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(207,159,71,.12);border:1px solid rgba(207,159,71,.4);color:var(--text-main);border-radius:14px;padding:3px 6px 3px 10px;font-size:.8rem;font-weight:500}
        .date-chip button{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:transparent;border:none;color:#b91c1c;cursor:pointer;font-size:.95rem;line-height:1;padding:0;flex-shrink:0;transition:background-color .15s ease}
        .date-chip button:hover{background:rgba(185,28,28,.15)}
        .delivery-opt-row{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}
        .delivery-opt-row .opt-delete-btn{padding:.25rem .6rem;color:#ef4444;border-color:#fca5a5;min-height:unset;line-height:1.2;margin-left:.25rem;flex-shrink:0;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
        .delivery-opt-row .opt-delete-btn:hover{background:rgba(239,68,68,.08);border-color:#ef4444;color:#dc2626}
        /* Settings layout: EVERY card spans the full tab width uniformly (owner
           request — the old mixed 650px/full-width cards looked ragged).
           scroll-margin keeps the card title clear of the sticky navbar when the
           sidebar sub-navigation smooth-scrolls to it. */
        #tab-settings .glass-card{width:100%;max-width:none;box-sizing:border-box;scroll-margin-top:76px}
        .delivery-wh-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:1rem}
        @media (min-width:900px){.delivery-wh-grid{grid-template-columns:1fr 1fr}}
        /* Scanner AI card */
        .scanner-cfg-grid{display:grid;grid-template-columns:1fr;gap:.85rem 1rem;margin-bottom:1rem}
        @media (min-width:640px){.scanner-cfg-grid{grid-template-columns:1fr 1fr}}
        .scanner-cfg-field label{display:block;font-size:.78rem;font-weight:600;color:var(--text-main);margin-bottom:.3rem}
        .scanner-cfg-field input,.scanner-cfg-field select{width:100%;box-sizing:border-box;font-size:.82rem;padding:.5rem .7rem;border:1px solid var(--border-light);border-radius:6px;background:var(--bg-main);color:var(--text-main)}
        .scanner-cfg-field input:focus,.scanner-cfg-field select:focus{outline:none;border-color:var(--accent)}
        .scanner-cfg-field small{display:block;margin-top:.25rem;font-size:.7rem;color:var(--text-muted);line-height:1.35}
        #scannerAiStatus{font-size:.8rem;color:var(--text-muted);margin:0 0 .5rem 0}
        #scannerAiStatus b{color:var(--text-main);font-weight:600}
        .prompt-badge{display:inline-block;margin-left:4px;padding:2px 9px;border-radius:10px;font-size:.65rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
        .prompt-badge-default{background:rgba(100,116,139,.12);color:#64748b;border:1px solid rgba(100,116,139,.35)}
        .prompt-badge-custom{background:rgba(207,159,71,.15);color:#b8860b;border:1px solid rgba(207,159,71,.45)}
        #scannerPromptText{width:100%;box-sizing:border-box;font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:.82rem;line-height:1.55;padding:.75rem .9rem;border:1px solid var(--border-light);border-radius:6px;background:var(--bg-main);color:var(--text-main);resize:vertical}
        #scannerPromptText:focus{outline:none;border-color:var(--accent)}
        /* Unmatched Drive photos manual matcher (Drive Photos tab) */
        .unmatched-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:11px;font-size:.75rem;font-weight:700;background:rgba(207,159,71,.15);color:#b8860b;border:1px solid rgba(207,159,71,.4)}
        .unmatched-item{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;background:white;border:1px solid var(--border-light);border-radius:6px;padding:.75rem 1rem;margin-bottom:.6rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}
        .unmatched-thumb{flex:0 0 auto;width:56px;height:56px;border-radius:4px;object-fit:cover;background:var(--bg-main);border:1px solid var(--border-light)}
        .unmatched-item-info{flex:1 1 240px;min-width:0;max-width:100%}
        .unmatched-filename{font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-weight:700;font-size:.85rem;color:var(--text-main);word-break:break-all;overflow-wrap:anywhere}
        .unmatched-reason{font-size:.75rem;color:var(--text-muted);margin-top:2px;overflow-wrap:anywhere;word-break:break-word}
        .unmatched-added{font-size:.72rem;color:var(--text-muted);margin-top:2px;opacity:.85}
        .unmatched-candidates{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}
        .unmatched-candidates-label{font-size:.7rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;align-self:center;margin-right:.15rem}
        .unmatched-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border:1px solid rgba(207,159,71,.4);border-radius:12px;background:rgba(207,159,71,.1);color:#9a6b15;font-size:.72rem;font-weight:600;cursor:pointer;font-family:inherit;line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis}
        .unmatched-chip:hover{background:rgba(207,159,71,.22);border-color:rgba(207,159,71,.65)}
        .unmatched-chip .chip-score{font-weight:700;opacity:.75;font-size:.66rem}
        .unmatched-controls{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;min-width:0;max-width:100%}
        .unmatched-controls input[type=text],.unmatched-controls select{padding:.45rem .6rem;border:1px solid var(--border-light);border-radius:4px;background:var(--bg-main);color:var(--text-main);font-size:.8rem}
        .unmatched-controls input[type=text]{width:200px}
        .unmatched-controls select{max-width:220px}
        .unmatched-controls .btn{padding:.4rem .8rem;font-size:.78rem;white-space:nowrap}
        .unmatched-or{font-size:.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
        .unmatched-empty{font-size:.85rem;color:var(--text-muted);font-style:italic;margin:0;padding:.25rem 0}
        /* Dismiss button — neutral/secondary style (distinct from the gold primary
           "Match to slab" and the outline "Set as product image"). */
        .unmatched-dismiss-btn{background:var(--bg-main);color:var(--text-muted);border:1px solid var(--border-light)}
        .unmatched-dismiss-btn:hover{background:#ef4444;border-color:#ef4444;color:#fff}
        /* Searchable product typeahead (replaces the old long <select>). */
        .product-typeahead{position:relative;display:inline-block;width:220px;max-width:100%}
        .unmatched-controls .product-typeahead input[type=text]{width:100%;box-sizing:border-box}
        .product-typeahead-menu{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:1100;max-height:230px;overflow-y:auto;background:#fff;border:1px solid var(--border-light);border-radius:4px;box-shadow:0 6px 20px rgba(0,0,0,.12)}
        .product-typeahead-option{padding:.45rem .6rem;font-size:.8rem;color:var(--text-main);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .product-typeahead-option:hover,.product-typeahead-option.active{background:rgba(207,159,71,.14)}
        @media (max-width:640px){
            #unmatchedPhotosCard{padding:1rem!important;overflow-x:hidden}
            .unmatched-item{flex-direction:column;align-items:stretch;max-width:100%;overflow:hidden}
            .unmatched-thumb{width:100%;height:140px}
            /* Prevent iOS Safari from auto-zooming when focusing the Products-tab
               search / filter controls (it zooms any input whose font-size < 16px). */
            #adminSearchInput,#adminStockStatusFilter,#adminMissingPriceFilter,#adminMissingPropFilter{font-size:16px}
            .unmatched-candidates{width:100%}
            .unmatched-chip{max-width:100%}
            .unmatched-chip span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
            .unmatched-controls{flex-direction:column;align-items:stretch}
            .unmatched-controls input[type=text],.unmatched-controls select{width:100%;max-width:none;box-sizing:border-box;font-size:16px}
            .unmatched-controls .btn{width:100%;box-sizing:border-box}
            .unmatched-or{text-align:center}
            .product-typeahead{width:100%;max-width:none}
            /* 16px input font stops iOS Safari auto-zooming the typeahead. */
            .product-typeahead input[type=text]{font-size:16px}
        }
        /* Blocked-date popover calendar (reuses the site checkout calendar styles) */
        .blocked-date-add{position:relative;display:inline-block}
        .admin-cal-popover{position:absolute;top:calc(100% + 6px);left:0;z-index:1050}
        .admin-cal-popover .checkout-calendar{width:290px;padding:.85rem;box-shadow:0 12px 32px rgba(26,26,26,.18)}
        .admin-cal-popover .cal-header{margin-bottom:.6rem}
        .admin-cal-popover .cal-header .cal-title{font-size:.92rem}
        .admin-cal-popover .cal-header button{width:30px;height:30px;font-size:1rem}
        .admin-cal-popover .cal-day{min-height:32px;border-radius:8px;font-size:.82rem}
        /* Analytics tab */
        .analytics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.5rem}
        .analytics-card{background:var(--bg-card,#fff);border:1px solid var(--border-light);border-radius:8px;padding:1.25rem 1.35rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}
        .analytics-card .ac-label{display:block;font-size:.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.4rem}
        .analytics-card .ac-value{font-size:1.9rem;font-weight:700;color:var(--text-main);line-height:1.1;font-family:'Outfit',sans-serif}
        .analytics-card .ac-sub{display:block;margin-top:.3rem;font-size:.75rem;color:var(--text-muted)}
        .analytics-devices{display:flex;gap:1.25rem;flex-wrap:wrap;margin-top:.5rem}
        .analytics-devices .dev-item{display:flex;flex-direction:column;gap:.15rem}
        .analytics-devices .dev-val{font-size:1.25rem;font-weight:700;color:var(--text-main)}
        .analytics-devices .dev-key{font-size:.72rem;color:var(--text-muted);text-transform:capitalize}
        .top-products-list{list-style:none;margin:0;padding:0}
        .top-products-list li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--border-light)}
        .top-products-list li:last-child{border-bottom:none}
        .top-products-list .tp-name{font-size:.9rem;color:var(--text-main);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .top-products-list .tp-rank{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;margin-right:.6rem;border-radius:50%;background:rgba(207,159,71,.15);color:#b8860b;font-size:.72rem;font-weight:700}
        .top-products-list .tp-views{flex-shrink:0;font-size:.82rem;font-weight:600;color:var(--accent)}
        .analytics-empty{font-size:.85rem;color:var(--text-muted);font-style:italic;margin:0;padding:.25rem 0}
        /* Analytics range selector + expanded dashboard */
        .ana-range{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
        .ana-range-btn{padding:.3rem .85rem;font-size:.8rem;font-weight:600;border:1px solid var(--border-light);border-radius:16px;background:var(--bg-card,#fff);color:var(--text-muted);cursor:pointer;transition:border-color .15s ease,color .15s ease,background-color .15s ease}
        .ana-range-btn:hover{border-color:var(--accent);color:var(--accent)}
        .ana-range-btn.active{background:rgba(207,159,71,.15);border-color:var(--accent);color:#b8860b}
        .ana-section{margin-bottom:1.75rem}
        .ana-section-title{margin:0 0 .75rem 0;font-size:1rem;color:var(--text-main);border-bottom:1px solid var(--border-light);padding-bottom:.4rem;font-family:'Outfit',sans-serif}
        .ana-chart-card{background:var(--bg-card,#fff);border:1px solid var(--border-light);border-radius:8px;padding:1rem 1.25rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}
        .ana-chart-wrap svg{display:block;width:100%;height:auto}
        .ana-tables-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 1.5rem}
        .ana-table{width:100%;border-collapse:collapse;font-size:.85rem;background:var(--bg-card,#fff);border:1px solid var(--border-light);border-radius:8px;overflow:hidden}
        .ana-table th{background:#f9fafb;text-align:left;padding:.5rem .75rem;font-weight:600;color:var(--text-main);border-bottom:1px solid var(--border-light)}
        .ana-table td{padding:.45rem .75rem;border-bottom:1px solid var(--border-light);color:var(--text-main);overflow-wrap:anywhere}
        .ana-table tr:last-child td{border-bottom:none}
        /* =====================================================================
           Analytics truth + interactivity pass (2026-08).
           Two jobs here:
             1. D6/D8 — every card shows a SCOPE chip and can explain itself
                through a focusable "i" bubble (focusable so a TAP opens it on
                the phones/tablets the admin is actually used on).
             2. The interactive chart engine in admin.js — crosshair, tooltip,
                toggleable legend and a per-day detail panel. All colours come
                from the page tokens, so a token change restyles the charts.
           ===================================================================== */
        .ana-scope{display:inline-block;margin-left:.45rem;padding:1px 8px;border-radius:10px;background:var(--bg-main,#f9fafb);border:1px solid var(--border-light);color:var(--text-muted);font-size:.65rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;vertical-align:middle;font-family:'Inter',sans-serif}
        .ana-scope-card{margin:.55rem 0 0 0;display:inline-block}
        .analytics-card .ana-scope-card{margin-left:0}
        /* A card whose number is known to be the legacy/inflated one gets a warm
           edge so the owner can see at a glance which figure to distrust. */
        .analytics-card.ana-card-warn{border-color:rgba(207,159,71,.55);box-shadow:0 1px 3px rgba(207,159,71,.16)}
        .analytics-card.ana-card-warn .ac-sub{color:#9a6b15}
        .ana-na{color:var(--text-muted);font-size:1rem;font-style:italic;font-weight:500}
        .ana-note{margin:.15rem 0 .6rem 0;font-size:.75rem;line-height:1.45;color:var(--text-muted)}
        /* "i" affordance + its bubble. Opens on hover AND focus (tap). */
        .ana-info{display:inline-flex;align-items:center;justify-content:center;position:relative;width:14px;height:14px;margin-left:.4rem;border-radius:50%;border:1px solid var(--border-light);background:var(--bg-main,#f9fafb);color:var(--text-muted);font-size:.6rem;font-weight:700;font-style:italic;font-family:'Inter',sans-serif;line-height:1;cursor:help;vertical-align:middle;flex-shrink:0;text-transform:none;letter-spacing:0}
        .ana-info:hover,.ana-info:focus{border-color:var(--accent);color:var(--accent);outline:none}
        .ana-info-bubble{position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);z-index:60;display:none;width:max-content;max-width:min(280px,72vw);padding:.55rem .7rem;border-radius:6px;border:1px solid var(--border-light);background:var(--bg-card,#fff);box-shadow:0 8px 24px rgba(0,0,0,.14);color:var(--text-main);font-size:.74rem;font-weight:400;font-style:normal;line-height:1.5;text-align:left;letter-spacing:0;text-transform:none;white-space:normal}
        .ana-info:hover .ana-info-bubble,.ana-info:focus .ana-info-bubble{display:block}
        /* Near the right edge the bubble would hang off the tab; nudge it in. */
        .analytics-grid>.analytics-card:last-child .ana-info-bubble,
        .ana-tables-grid .ana-section:last-child .ana-info-bubble{left:auto;right:0;transform:none}
        /* Small in-card scope toggle (Most Viewed Products: range vs all time) */
        .ana-mini-toggle{display:inline-flex;gap:.3rem;margin-bottom:.6rem;flex-wrap:wrap}
        .ana-mini-btn{padding:.2rem .6rem;font-size:.7rem;font-weight:600;font-family:'Inter',sans-serif;border:1px solid var(--border-light);border-radius:12px;background:var(--bg-card,#fff);color:var(--text-muted);cursor:pointer;transition:border-color .15s ease,color .15s ease,background-color .15s ease}
        .ana-mini-btn:hover{border-color:var(--accent);color:var(--accent)}
        .ana-mini-btn.active{background:rgba(207,159,71,.15);border-color:var(--accent);color:#b8860b}

        /* ── interactive chart ──────────────────────────────────────────────── */
        .ana-chart-card{position:relative}
        .ana-chart-wrap{position:relative}
        /* touch-action:pan-y keeps vertical page scrolling working while a
           horizontal drag scrubs the chart on a touchscreen. */
        .ana-svg{display:block;width:100%;height:auto;cursor:crosshair;outline:none;touch-action:pan-y}
        .ana-svg:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
        .ana-grid{stroke:var(--border-light);stroke-width:1}
        .ana-axis{fill:var(--text-muted);font-size:10px;font-family:'Inter',sans-serif}
        .ana-cross-line{stroke:var(--text-muted);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
        .ana-cross-band{fill:rgba(207,159,71,.16);pointer-events:none}
        .ana-cross-dot{stroke:var(--bg-card,#fff);stroke-width:1.5;pointer-events:none}
        .ana-sel-line{stroke:var(--accent);stroke-width:1.5;pointer-events:none}
        .ana-bar{pointer-events:none}
        /* Custom tooltip: instant, styleable, multi-series, and it exists on
           touch — none of which the old native <title> tooltip managed. */
        .ana-tip{position:absolute;z-index:20;pointer-events:none;min-width:120px;max-width:min(260px,88%);padding:.45rem .6rem;border-radius:6px;border:1px solid var(--border-light);background:var(--bg-card,#fff);box-shadow:0 6px 20px rgba(0,0,0,.14);font-size:.74rem;line-height:1.45;color:var(--text-main)}
        .ana-tip[hidden]{display:none}
        .ana-tip-date{font-weight:700;margin-bottom:.2rem;color:var(--text-main)}
        .ana-tip-row{display:flex;align-items:center;gap:.4rem;white-space:nowrap}
        .ana-tip-lbl{color:var(--text-muted);margin-right:auto}
        .ana-tip-val{font-weight:700;font-variant-numeric:tabular-nums}
        .ana-tip-dot{width:8px;height:8px;border-radius:2px;display:inline-block;flex-shrink:0}
        /* Legend doubles as the series on/off control. */
        .ana-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;margin-top:.55rem}
        .ana-legend-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;border:1px solid var(--border-light);border-radius:12px;background:var(--bg-card,#fff);color:var(--text-muted);font-size:.72rem;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;transition:border-color .15s ease,color .15s ease,opacity .15s ease}
        .ana-legend-btn:hover{border-color:var(--accent);color:var(--text-main)}
        .ana-legend-btn.off{opacity:.42;text-decoration:line-through}
        .ana-legend-swatch{width:12px;height:3px;border-radius:2px;display:inline-block;flex-shrink:0}
        .ana-legend-swatch.bar{height:9px}
        .ana-legend-axis{margin-left:.25rem;font-weight:400;font-size:.66rem;opacity:.8}
        .ana-legend-hint{font-size:.7rem;color:var(--text-muted);margin-left:auto}
        /* Per-day detail panel revealed by clicking/tapping/Enter on a point. */
        .ana-detail{margin-top:.75rem;padding:.75rem .85rem;border:1px solid var(--border-light);border-radius:8px;background:var(--bg-main,#f9fafb);overflow-x:auto}
        .ana-detail[hidden]{display:none}
        .ana-detail-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.55rem}
        .ana-detail-head strong{font-size:.95rem;color:var(--text-main);font-family:'Outfit',sans-serif}
        .ana-detail-sub{font-size:.72rem;color:var(--text-muted)}
        .ana-detail-btn{margin-left:0;padding:.2rem .65rem;font-size:.72rem;font-weight:600;font-family:'Inter',sans-serif;border:1px solid var(--border-light);border-radius:12px;background:var(--bg-card,#fff);color:var(--text-muted);cursor:pointer}
        .ana-detail-btn:hover{border-color:var(--accent);color:var(--accent)}
        .ana-detail-head .ana-detail-btn:first-of-type{margin-left:auto}
        .ana-detail-table{font-size:.8rem}
        .ana-detail-table td{font-variant-numeric:tabular-nums}
        .ana-detail-table td .ana-tip-dot{margin-right:.4rem;vertical-align:middle}
        /* A wide table (Catalog by Warehouse: 5 columns) scrolls INSIDE its own
           box instead of pushing the whole tab sideways on a phone. Kept off
           .ana-section itself on purpose — an overflow context there would clip
           the absolutely-positioned "i" bubbles. */
        .ana-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
        .ana-table-scroll .ana-table{min-width:430px}
        /* Screen-reader announcement target for keyboard chart navigation. */
        .ana-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
        @media (prefers-reduced-motion: reduce){
            .ana-mini-btn,.ana-legend-btn,.ana-detail-btn{transition:none}
        }
        /* Belt and braces: admin.js also stamps .ana-no-motion on a chart card
           when matchMedia reports the reduce preference, so the setting is
           honoured even where the media query is evaluated oddly. */
        .ana-no-motion .ana-mini-btn,.ana-no-motion .ana-legend-btn,.ana-no-motion .ana-detail-btn{transition:none}
        @media (max-width:640px){
            .ana-legend-hint{margin-left:0;flex-basis:100%}
            .ana-tip{font-size:.7rem;min-width:104px}
            .ana-info-bubble{max-width:min(260px,82vw)}
            /* On a phone the chip belongs on its own line, not crushed against
               a wrapped section title. */
            .ana-section-title{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem}
        }
        /* Visitors tab */
        .visitor-row:hover{background:rgba(207,159,71,.06)}

        /* =====================================================================
           Admin width presets (Standard / Wide / Ultrawide) — setAdminWidth()
           in admin.js toggles the classes; the toggle itself reuses the global
           .catalog-view-toggle / .view-toggle-btn styles from style.css.
           Standard = 1380px (~15% wider than the 1200px style.css base; this
           file loads after style.css so the override wins, scoped to the admin
           page's .admin-container only).
           ===================================================================== */
        .admin-container{max-width:1380px;transition:max-width .35s ease}
        /* Wide = 92% of the screen, but never narrower than the 1380px Standard
           (on smaller monitors a plain 92vw could SHRINK the dashboard). */
        .admin-container.admin-wide{max-width:max(1380px,92vw)}
        /* Ultrawide mirrors the catalog's ultrawide preset (2560px cap). */
        .admin-container.admin-ultrawide{max-width:min(2560px,96vw)}
        @media (prefers-reduced-motion: reduce){
            .admin-container{transition:none}
        }
        /* Width is fixed on phones/tablets: hide the toggle (style.css already
           hides .catalog-view-toggle <=900px — this keeps the admin toggle
           independent of that selector staying global) and neutralize the
           preset classes so a saved Wide/Ultrawide never shrinks a phone. */
        @media (max-width:900px){
            #adminViewToggle{display:none}
            .admin-container.admin-wide,.admin-container.admin-ultrawide{max-width:1380px}
        }
        /* Ultrawide only makes sense on genuinely ultrawide monitors — same
           2100px threshold as the catalog's #viewUltraBtn rule in style.css. */
        #adminViewUltraBtn{display:none}
        @media (min-width:2100px){
            #adminViewUltraBtn{display:inline-flex}
        }

        /* =====================================================================
           User Approvals: compact 2-column table (User | Status) + row-click
           detail modal (renderAdminUsers override + openUserDetailModal in
           admin.js). The <=860px stacked-card rules in style.css still apply:
           td1 is the card title, td2 gets the 'Status' label.
           ===================================================================== */
        #usersList tr.user-row{cursor:pointer}
        #usersList tr.user-row:hover{background:rgba(207,159,71,.06)}
        #usersList td.user-status-td{position:relative;padding-right:2.4rem}
        #usersList .user-level-muted{display:block;font-size:.75rem;font-weight:500;color:var(--text-muted);margin-top:2px}
        #usersList .user-row-chevron{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;color:var(--text-muted);opacity:.55}
        @media (max-width:860px){
            /* Stacked-card mode: the whole card is the tap target — drop the
               absolutely-positioned chevron so it can't overlap the Status line,
               and restore the card's flush right edge. */
            #usersList .user-row-chevron{display:none}
            #usersList td.user-status-td{padding-right:0}
        }

        /* =====================================================================
           Sidebar sub-navigation (#settingsSubnav / #productsSubnav /
           #spssyncSubnav / #analyticsSubnav). Hidden by default; revealed by
           CSS while the adjacent tab button is active. Indented, smaller, gold
           active/hover — matches the sidebar aesthetic. Works inside the mobile
           drawer unchanged (the drawer restyles .admin-sidebar only; this block
           just flows within it).
           ===================================================================== */
        .admin-subnav{display:none;flex-direction:column;gap:1px;margin:2px 0 4px;padding-left:1.55rem;position:relative}
        .admin-subnav::before{content:'';position:absolute;left:1.05rem;top:4px;bottom:4px;width:1px;background:var(--border-light)}
        .admin-sidebar .tab-btn.active+.admin-subnav{display:flex}
        .admin-subnav-link{display:block;width:100%;text-align:left;background:none;border:none;border-radius:5px;padding:.32rem .55rem;font-size:.8rem;font-weight:500;color:var(--text-muted);cursor:pointer;font-family:'Outfit',sans-serif;transition:background .15s ease,color .15s ease}
        .admin-subnav-link:hover{background:var(--border-light);color:var(--text-main)}
        .admin-subnav-link.active{background:rgba(207,159,71,.12);color:var(--accent-hover,#b8860b);font-weight:600}
        /* Subnav scroll anchors (Products / SPS Sync / Analytics targets of
           gotoAdminSection): keep the section title clear of the sticky navbar
           when smooth-scrolled to — same 76px offset the Settings cards get
           from the #tab-settings .glass-card rule above. */
        #dataSyncSection,#syncHistorySection,#productCatalogSection,
        #tab-spssync .glass-card,#analyticsContent [id^=anaSec]{scroll-margin-top:76px}

        /* =====================================================================
           Pricing tab: compact desktop cells so the matrix fits the standard
           1200px container without horizontal scrolling. It is now TEN columns
           (Product, Category, seven tiers, Action) rather than eight — the two
           fabricator tiers added in 2026-08 are real columns here — so the
           per-cell padding is tighter than it was. Scoped to >860px; below that
           style.css stacks the rows into labeled cards and its own paddings and
           input widths must win.
           ===================================================================== */
        .pricing-price-input{width:66px}
        @media (min-width:861px){
            #tab-pricing .table-responsive th,
            #tab-pricing .table-responsive td{padding:.5rem .3rem}
            #tab-pricing .table-responsive th:first-child,
            #tab-pricing .table-responsive td:first-child{padding-left:.75rem}
            /* The tier headings carry a hover tooltip naming their audience. */
            #tab-pricing .table-responsive thead th[title]{white-space:nowrap}
        }

        /* Data Synchronization: block 4 (Prices) needs two of the grid's tracks
           for its warehouse picker + download + upload, but not the whole row.
           At grid-column:1/-1 it swallowed all four tracks, left three of them
           empty, and pushed blocks 5-7 onto a row of their own. Falls back to a
           single track below 620px, where the auto-fit grid is one column wide
           and `span 2` would invent a second, overflowing track. */
        .sync-card-wide{grid-column:span 2}
        @media (max-width:620px){.sync-card-wide{grid-column:auto}}

        /* =====================================================================
           Sync History header (Products tab): on phones the flex-wrapped
           "Refresh History" button drops under the title and right-aligns
           instead of poking past the screen edge.
           ===================================================================== */
        @media (max-width:860px){
            #syncHistoryRefreshBtn{margin-left:auto;flex-shrink:0}
        }

        /* === SDP admin pass (#1/#5/#10/#12/#8) ===============================
           Live Chats tab (handoff detail: header grid, collapsed AI transcript,
           live message thread, reply row) + stale-push result box. All content
           inside these containers is inserted via textContent by admin.js.
           ===================================================================== */
        .handoff-detail-head{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1rem}
        .handoff-head-row{display:flex;gap:.75rem;align-items:baseline}
        .handoff-head-label{min-width:110px;flex-shrink:0;font-weight:600;color:var(--text-muted);font-size:.82rem}
        .handoff-head-value{color:var(--text-main);font-size:.9rem;overflow-wrap:anywhere}
        .handoff-transcript{margin:0 0 1rem 0;border:1px solid var(--border-light);border-radius:8px;background:var(--bg-main,#f9fafb)}
        .handoff-transcript summary{cursor:pointer;padding:.6rem .85rem;font-size:.85rem;font-weight:600;color:var(--text-muted);user-select:none}
        .handoff-transcript summary:hover{color:var(--text-main)}
        .handoff-transcript[open] summary{border-bottom:1px solid var(--border-light)}
        #handoffTranscript{padding:.75rem .85rem;display:flex;flex-direction:column;gap:.45rem;max-height:260px;overflow-y:auto}
        .handoff-transcript-line{display:flex;gap:.5rem;font-size:.83rem;line-height:1.45}
        .handoff-transcript-who{flex-shrink:0;min-width:88px;font-weight:700;color:var(--text-muted)}
        .handoff-transcript-text{color:var(--text-main);white-space:pre-wrap;overflow-wrap:anywhere}
        .handoff-thread{max-height:420px;min-height:80px;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding:1rem;background:var(--bg-main,#f9fafb);border:1px solid var(--border-light);border-radius:8px}
        .handoff-thread-empty{font-size:.85rem;color:var(--text-muted);font-style:italic;align-self:center;margin:auto}
        .handoff-msg{max-width:78%;padding:.5rem .75rem;border-radius:10px;font-size:.88rem;line-height:1.45}
        .handoff-msg .hm-meta{font-size:.68rem;color:var(--text-muted);margin-bottom:2px;font-weight:600}
        .handoff-msg .hm-body{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text-main)}
        .handoff-msg-customer{align-self:flex-start;background:var(--bg-card,#fff);border:1px solid var(--border-light);border-bottom-left-radius:3px}
        .handoff-msg-admin{align-self:flex-end;background:rgba(207,159,71,.13);border:1px solid rgba(207,159,71,.35);border-bottom-right-radius:3px}
        .handoff-reply-row{display:flex;gap:.6rem;margin-top:.75rem;align-items:flex-end}
        .handoff-reply-row textarea{flex:1;box-sizing:border-box;padding:.6rem .75rem;border-radius:6px;border:1px solid var(--border-light);background:var(--bg-input,var(--bg-main));color:var(--text-main);font-size:.9rem;font-family:inherit;resize:vertical;min-height:44px}
        .handoff-reply-row textarea:focus{outline:none;border-color:var(--accent)}
        /* The chats tab keeps its detail card clear of the sticky navbar when
           deep-scrolled, same offset as the settings cards. */
        #tab-chats .glass-card{scroll-margin-top:76px}
        @media (max-width:640px){
            .handoff-msg{max-width:94%}
            .handoff-head-label{min-width:84px}
            .handoff-reply-row{flex-direction:column;align-items:stretch}
            /* 16px stops iOS Safari auto-zooming the reply box. */
            .handoff-reply-row textarea{font-size:16px}
        }

/* Measurement-cutover warning under the analytics range banner. Shown only when
   the selected window starts before the date the measurement itself changed, so
   an old-vs-new step change is never read as a real swing in the business. */
.ana-cutover-note {
    margin: 0.4rem 0 0.9rem;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid var(--accent, #cf9f47);
    background: var(--bg-subtle, rgba(207, 159, 71, 0.08));
    color: var(--text-muted, #767676);
    font-size: 0.78rem;
    line-height: 1.45;
    border-radius: 3px;
}