/**
 * ============================================================
 * APPEARANCE PALETTE AXES (css/appearance-palettes.css)
 * ============================================================
 * Always loaded. Makes data-topbar / data-sidebar / data-color
 * reactive for every pack, including Commissary Classic.
 * Dreams POS keeps its pack-scoped copies for its own shell rules.
 * ============================================================
 */

/* ── 1. Topbar palette variables ─────────────────────────── */
html[data-topbar="white"] {
    --app-header-bg: #ffffff;
    --app-header-fg: #1e293b;
    --app-header-border: var(--border);
    --app-header-hover: rgba(0, 0, 0, 0.05);
}

html[data-topbar="topbarcolorone"] {
    --app-header-bg: #FBFBFB;
    --app-header-fg: #1e293b;
    --app-header-border: #e2e8f0;
    --app-header-hover: rgba(0, 0, 0, 0.05);
}

html[data-topbar="topbarcolortwo"] {
    --app-header-bg: #505969;
    --app-header-fg: #ffffff;
    --app-header-border: #444c5a;
    --app-header-hover: rgba(255, 255, 255, 0.12);
}

html[data-topbar="topbarcolorthree"] {
    --app-header-bg: #2C2C2C;
    --app-header-fg: #ffffff;
    --app-header-border: #3d3d3d;
    --app-header-hover: rgba(255, 255, 255, 0.12);
}

html[data-topbar="topbarcolorfour"] {
    --app-header-bg: #1D51B6;
    --app-header-fg: #ffffff;
    --app-header-border: #164299;
    --app-header-hover: rgba(255, 255, 255, 0.15);
}

html[data-topbar="topbarcolorfive"] {
    --app-header-bg: #6C0BA9;
    --app-header-fg: #ffffff;
    --app-header-border: #5a098d;
    --app-header-hover: rgba(255, 255, 255, 0.15);
}

html[data-topbar="topbarcolorsix"] {
    --app-header-bg: #0B897D;
    --app-header-fg: #ffffff;
    --app-header-border: #086e64;
    --app-header-hover: rgba(255, 255, 255, 0.15);
}

html[data-topbar="topbarcolorseven"] {
    --app-header-bg: linear-gradient(180deg, #4B749F 0%, #243748 100%);
    --app-header-fg: #ffffff;
    --app-header-border: #243748;
    --app-header-hover: rgba(255, 255, 255, 0.15);
}

html[data-topbar="topbarcoloreight"] {
    --app-header-bg: linear-gradient(180deg, #18ACCF 0%, #0F59AD 100%);
    --app-header-fg: #ffffff;
    --app-header-border: #0F59AD;
    --app-header-hover: rgba(255, 255, 255, 0.15);
}

html[data-topbar="topbarcolornine"] {
    --app-header-bg: linear-gradient(180deg, #7D90B8 0%, #103783 100%);
    --app-header-fg: #ffffff;
    --app-header-border: #103783;
    --app-header-hover: rgba(255, 255, 255, 0.15);
}

html[data-topbar="topbarcolorten"] {
    --app-header-bg: linear-gradient(180deg, #8E4BEB 0%, #472282 100%);
    --app-header-fg: #ffffff;
    --app-header-border: #472282;
    --app-header-hover: rgba(255, 255, 255, 0.15);
}

html[data-topbar="topbarcoloreleven"] {
    --app-header-bg: linear-gradient(180deg, #309F92 0%, #0C5666 100%);
    --app-header-fg: #ffffff;
    --app-header-border: #0C5666;
    --app-header-hover: rgba(255, 255, 255, 0.15);
}

html[data-topbar="topbarcolortwelve"] {
    --app-header-bg: linear-gradient(90deg, #FF9966 1.92%, #FF5E62 100%);
    --app-header-fg: #ffffff;
    --app-header-border: #FF5E62;
    --app-header-hover: rgba(255, 255, 255, 0.15);
}

html[data-topbar="topbarcolorthirteen"] {
    --app-header-bg: linear-gradient(90deg, #760762 1.92%, #883907 100%);
    --app-header-fg: #ffffff;
    --app-header-border: #883907;
    --app-header-hover: rgba(255, 255, 255, 0.15);
}

html[data-topbar="topbarcolorfourteen"] {
    --app-header-bg: linear-gradient(90deg, #4471CC 1.92%, #AE7BD4 100%);
    --app-header-fg: #ffffff;
    --app-header-border: #4471CC;
    --app-header-hover: rgba(255, 255, 255, 0.15);
}

/* ── 2. Sidebar palette variables ────────────────────────── */
html[data-sidebar="light"] {
    --app-sidebar-bg: #ffffff;
    --app-sidebar-fg: #1e293b;
    --app-sidebar-border: #e2e8f0;
    --app-sidebar-surface: rgba(15, 23, 42, 0.045);
    --app-sidebar-hover: rgba(15, 23, 42, 0.07);
    --app-sidebar-active: rgba(15, 23, 42, 0.12);
}

html[data-sidebar="sidebarcolorone"] {
    --app-sidebar-bg: #FBFBFB;
    --app-sidebar-fg: #1e293b;
    --app-sidebar-border: #e2e8f0;
    --app-sidebar-surface: rgba(15, 23, 42, 0.045);
    --app-sidebar-hover: rgba(15, 23, 42, 0.07);
    --app-sidebar-active: rgba(15, 23, 42, 0.12);
}

html[data-sidebar="sidebarcolortwo"] {
    --app-sidebar-bg: #505969;
    --app-sidebar-fg: #ffffff;
    --app-sidebar-border: #444c5a;
    --app-sidebar-surface: rgba(255, 255, 255, 0.06);
    --app-sidebar-hover: rgba(255, 255, 255, 0.12);
    --app-sidebar-active: rgba(255, 255, 255, 0.22);
}

html[data-sidebar="sidebarcolorthree"] {
    --app-sidebar-bg: #2C2C2C;
    --app-sidebar-fg: #ffffff;
    --app-sidebar-border: #3d3d3d;
    --app-sidebar-surface: rgba(255, 255, 255, 0.06);
    --app-sidebar-hover: rgba(255, 255, 255, 0.12);
    --app-sidebar-active: rgba(255, 255, 255, 0.22);
}

html[data-sidebar="sidebarcolorfour"] {
    --app-sidebar-bg: #1D51B6;
    --app-sidebar-fg: #ffffff;
    --app-sidebar-border: #164299;
    --app-sidebar-surface: rgba(255, 255, 255, 0.06);
    --app-sidebar-hover: rgba(255, 255, 255, 0.12);
    --app-sidebar-active: rgba(255, 255, 255, 0.22);
}

html[data-sidebar="sidebarcolorfive"] {
    --app-sidebar-bg: #6C0BA9;
    --app-sidebar-fg: #ffffff;
    --app-sidebar-border: #5a098d;
    --app-sidebar-surface: rgba(255, 255, 255, 0.06);
    --app-sidebar-hover: rgba(255, 255, 255, 0.12);
    --app-sidebar-active: rgba(255, 255, 255, 0.22);
}

html[data-sidebar="sidebarcolorsix"] {
    --app-sidebar-bg: #0B897D;
    --app-sidebar-fg: #ffffff;
    --app-sidebar-border: #086e64;
    --app-sidebar-surface: rgba(255, 255, 255, 0.06);
    --app-sidebar-hover: rgba(255, 255, 255, 0.12);
    --app-sidebar-active: rgba(255, 255, 255, 0.22);
}

html[data-sidebar="sidebarcolorseven"] {
    --app-sidebar-bg: linear-gradient(180deg, #4B749F 0%, #243748 100%);
    --app-sidebar-fg: #ffffff;
    --app-sidebar-border: #243748;
    --app-sidebar-surface: rgba(255, 255, 255, 0.06);
    --app-sidebar-hover: rgba(255, 255, 255, 0.12);
    --app-sidebar-active: rgba(255, 255, 255, 0.22);
}

html[data-sidebar="sidebarcoloreight"] {
    --app-sidebar-bg: linear-gradient(180deg, #18ACCF 0%, #0F59AD 100%);
    --app-sidebar-fg: #ffffff;
    --app-sidebar-border: #0F59AD;
    --app-sidebar-surface: rgba(255, 255, 255, 0.06);
    --app-sidebar-hover: rgba(255, 255, 255, 0.12);
    --app-sidebar-active: rgba(255, 255, 255, 0.22);
}

html[data-sidebar="sidebarcolornine"] {
    --app-sidebar-bg: linear-gradient(180deg, #7D90B8 0%, #103783 100%);
    --app-sidebar-fg: #ffffff;
    --app-sidebar-border: #103783;
    --app-sidebar-surface: rgba(255, 255, 255, 0.06);
    --app-sidebar-hover: rgba(255, 255, 255, 0.12);
    --app-sidebar-active: rgba(255, 255, 255, 0.22);
}

html[data-sidebar="sidebarcolorten"] {
    --app-sidebar-bg: linear-gradient(180deg, #8E4BEB 0%, #472282 100%);
    --app-sidebar-fg: #ffffff;
    --app-sidebar-border: #472282;
    --app-sidebar-surface: rgba(255, 255, 255, 0.06);
    --app-sidebar-hover: rgba(255, 255, 255, 0.12);
    --app-sidebar-active: rgba(255, 255, 255, 0.22);
}

html[data-sidebar="sidebarcoloreleven"] {
    --app-sidebar-bg: linear-gradient(180deg, #309F92 0%, #0C5666 100%);
    --app-sidebar-fg: #ffffff;
    --app-sidebar-border: #0C5666;
    --app-sidebar-surface: rgba(255, 255, 255, 0.06);
    --app-sidebar-hover: rgba(255, 255, 255, 0.12);
    --app-sidebar-active: rgba(255, 255, 255, 0.22);
}

html[data-sidebar="sidebarcolortwelve"] {
    --app-sidebar-bg: linear-gradient(90deg, #FF9966 1.92%, #FF5E62 100%);
    --app-sidebar-fg: #ffffff;
    --app-sidebar-border: #FF5E62;
    --app-sidebar-surface: rgba(255, 255, 255, 0.06);
    --app-sidebar-hover: rgba(255, 255, 255, 0.12);
    --app-sidebar-active: rgba(255, 255, 255, 0.22);
}

html[data-sidebar="sidebarcolorthirteen"] {
    --app-sidebar-bg: linear-gradient(90deg, #760762 1.92%, #883907 100%);
    --app-sidebar-fg: #ffffff;
    --app-sidebar-border: #883907;
    --app-sidebar-surface: rgba(255, 255, 255, 0.06);
    --app-sidebar-hover: rgba(255, 255, 255, 0.12);
    --app-sidebar-active: rgba(255, 255, 255, 0.22);
}

html[data-sidebar="sidebarcolorfourteen"] {
    --app-sidebar-bg: linear-gradient(90deg, #4471CC 1.92%, #AE7BD4 100%);
    --app-sidebar-fg: #ffffff;
    --app-sidebar-border: #4471CC;
    --app-sidebar-surface: rgba(255, 255, 255, 0.06);
    --app-sidebar-hover: rgba(255, 255, 255, 0.12);
    --app-sidebar-active: rgba(255, 255, 255, 0.22);
}

/* ── 3. Primary accent palette variables ─────────────────── */
html[data-color="primary"] {
    --accent: #FE9F43;
    --accent-2: #e08328;
    --accent-blue: #FE9F43;
    --accent-indigo: #FE9F43;
    --rgb-accent: 254 159 67;
    --rgb-accent-2: 224 131 40;
    --rgb-accent-blue: 254 159 67;
    --text-on-accent: #0f172a !important;
}

html[data-color="brightblue"] {
    --accent: #009688;
    --accent-2: #00796B;
    --accent-blue: #009688;
    --accent-indigo: #009688;
    --rgb-accent: 0 150 136;
    --rgb-accent-2: 0 121 107;
    --rgb-accent-blue: 0 150 136;
    --text-on-accent: #0f172a !important;
}

html[data-color="lunargreen"] {
    --accent: #D63031;
    --accent-2: #b71c1c;
    --accent-blue: #D63031;
    --accent-indigo: #D63031;
    --rgb-accent: 214 48 49;
    --rgb-accent-2: 183 28 28;
    --rgb-accent-blue: 214 48 49;
    --text-on-accent: #ffffff !important;
}

html[data-color="lavendar"] {
    --accent: #6C5CE7;
    --accent-2: #5849be;
    --accent-blue: #6C5CE7;
    --accent-indigo: #6C5CE7;
    --rgb-accent: 108 92 231;
    --rgb-accent-2: 88 73 190;
    --rgb-accent-blue: 108 92 231;
    --text-on-accent: #ffffff !important;
}

html[data-color="magenta"] {
    --accent: #0984E3;
    --accent-2: #0767b1;
    --accent-blue: #0984E3;
    --accent-indigo: #0984E3;
    --rgb-accent: 9 132 227;
    --rgb-accent-2: 7 103 177;
    --rgb-accent-blue: 9 132 227;
    --text-on-accent: #0f172a !important;
}

html[data-color="chromeyellow"] {
    --accent: #00B894;
    --accent-2: #009376;
    --accent-blue: #00B894;
    --accent-indigo: #00B894;
    --rgb-accent: 0 184 148;
    --rgb-accent-2: 0 147 118;
    --rgb-accent-blue: 0 184 148;
    --text-on-accent: #0f172a !important;
}

html[data-color="orange"] {
    --accent: #E04F16;
    --accent-2: #b83d0d;
    --accent-blue: #E04F16;
    --accent-indigo: #E04F16;
    --rgb-accent: 224 79 22;
    --rgb-accent-2: 184 61 13;
    --rgb-accent-blue: 224 79 22;
    --text-on-accent: #0f172a !important;
}

/* ── 4. Shell consumption (classic gets the same axes) ───── */
/* "classic" deliberately has no rule: it preserves the theme baseline. */
html[data-topbar]:not([data-topbar="classic"]) .admin-topbar {
    background: var(--app-header-bg);
    color: var(--app-header-fg);
    border-bottom-color: var(--app-header-border);
    --text-main: var(--app-header-fg);
    --text-subtle: var(--app-header-fg);
    --text-muted: var(--app-header-fg);
    --text-faint: var(--app-header-fg);
    --bg-hover: var(--app-header-hover);
    --bg-panel: var(--app-header-hover);
    --border: var(--app-header-border);
    --border-color: var(--app-header-border);
}

html[data-topbar]:not([data-topbar="classic"]) .admin-topbar .btn-icon,
html[data-topbar]:not([data-topbar="classic"]) .admin-topbar .topbar-title,
html[data-topbar]:not([data-topbar="classic"]) .admin-topbar .app-topnav .nav-tab {
    color: var(--app-header-fg);
}

html[data-sidebar]:not([data-sidebar="classic"]) .admin-sidebar {
    background: var(--app-sidebar-bg);
    color: var(--app-sidebar-fg);
    --bg-base: var(--app-sidebar-bg);
    --bg-deep: var(--app-sidebar-bg);
    --bg-sunken: var(--app-sidebar-surface);
    --bg-panel: var(--app-sidebar-surface);
    --bg-card: var(--app-sidebar-surface);
    --bg-inset: var(--app-sidebar-surface);
    --bg-hover: var(--app-sidebar-hover);
    --text-main: var(--app-sidebar-fg);
    --text-subtle: var(--app-sidebar-fg);
    --text-muted: var(--app-sidebar-fg);
    --text-faint: var(--app-sidebar-fg);
    --border: var(--app-sidebar-border);
    --border-color: var(--app-sidebar-border);
}

html[data-sidebar]:not([data-sidebar="classic"]) .admin-sidebar .sidebar-header,
html[data-sidebar]:not([data-sidebar="classic"]) .admin-sidebar .sidebar-search-wrap,
html[data-sidebar]:not([data-sidebar="classic"]) .admin-sidebar .sidebar-footer,
html[data-sidebar]:not([data-sidebar="classic"]) .admin-sidebar .nav-group {
    background: var(--app-sidebar-surface);
    border-color: var(--app-sidebar-border);
}

html[data-sidebar]:not([data-sidebar="classic"]) .admin-sidebar .admin-nav-vertical .nav-tab {
    color: var(--app-sidebar-fg) !important;
}
html[data-sidebar]:not([data-sidebar="classic"]) .admin-sidebar .admin-nav-vertical .nav-tab:hover {
    background: var(--app-sidebar-hover) !important;
    color: var(--app-sidebar-fg) !important;
    border-color: var(--app-sidebar-border) !important;
    border-left-color: var(--accent) !important;
}
html[data-sidebar]:not([data-sidebar="classic"]) .admin-sidebar .admin-nav-vertical .nav-tab.active {
    background: var(--app-sidebar-active) !important;
    color: var(--app-sidebar-fg) !important;
    border-color: var(--app-sidebar-border) !important;
    border-left-color: var(--accent) !important;
}

html[data-sidebar]:not([data-sidebar="classic"]) .admin-sidebar .sidebar-close-btn,
html[data-sidebar]:not([data-sidebar="classic"]) .admin-sidebar .sidebar-action-btn,
html[data-sidebar]:not([data-sidebar="classic"]) .admin-sidebar .nav-group-title {
    color: var(--app-sidebar-fg);
}

/* Classic sidebar keeps its baseline; an explicit accent still needs a readable
   active item instead of dark ink on a dark accent tint. */
html[data-sidebar="classic"][data-color]:not([data-color="classic"]) .admin-sidebar .admin-nav-vertical .nav-tab.active {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
    border-color: var(--accent) !important;
    border-left-color: var(--accent) !important;
    box-shadow: 0 2px 8px rgb(var(--rgb-accent) / 0.25) !important;
}