/* ---- ui-enterprise.css ----
 * The "Modern" interface style: white pages, orange accent, grey title
 * bars, flat square-cornered cards, grey table headers and pastel KPI
 * tiles with a big number.
 *
 * Everything below is scoped to html[data-ui="enterprise"], so choosing
 * "Classic" (the original look) simply stops these rules from applying.
 * Nothing in app-shell.css or theme-ui.css was changed for this.
 *
 * The attribute is set before first paint by the script in the layout's
 * <head> (window.appUi). Each person's choice is kept on their device;
 * until they choose, the Super Admin's default (Settings > Appearance)
 * applies.
 */

/* ===================== Style switch (user menu) ===================== */
html[data-ui="enterprise"] .theme-switch button[data-ui-set="enterprise"],
html[data-ui="classic"] .theme-switch button[data-ui-set="classic"] { background: var(--brand); color: var(--ent-on-accent, #fff); }

/* Top-bar button: shows which style you are on, click to flip. */
.ui-cycle-btn svg { width: 14px; height: 14px; }

/* ===================== Colour tokens ===================== */
html[data-ui="enterprise"] {
    --brand: #D04A02;
    --brand-dark: #B03E00;
    --brand-darker: #8A2F00;
    --brand-light: #FBE3D4;
    --brand-lighter: #FDF1E9;
    /* Used by the Super Admin's accent colour picker (Settings > Appearance):
       the accent as r,g,b, and the text colour that sits on top of it. */
    --ent-accent-rgb: 208,74,2;
    --ent-on-accent: #FFFFFF;

    --ent-band: #7B7D80;          /* grey title bar */
    --ent-th: #EBEBEB;            /* table header */
    --ent-line: #D9D9D9;
    --ent-radius: 2px;

    --page-bg: #F6F6F6;
    --border: #D9D9D9;
    --border-soft: #E8E8E8;
    --muted: #6A6D72;
    --shadow-card: none;
    --shadow-pop: 0 4px 14px rgba(0,0,0,.14);
}
html[data-ui="enterprise"][data-theme="dark"] {
    --brand-dark: #FF8A4C;
    --brand-darker: #FFB48A;
    --brand-light: rgba(208,74,2,.26);
    --brand-lighter: rgba(208,74,2,.14);
    --ent-band: #2A2E36;
    --ent-th: #1D2128;
    --ent-line: #2B313C;
    --page-bg: #0F1115;
    --border: #262B35;
    --border-soft: #1F232B;
    --muted: #9199A8;
}
html[data-ui="enterprise"] body { background: var(--page-bg); }

/* ===================== Sidebar ===================== */
html[data-ui="enterprise"] .sidebar { width: 224px; box-shadow: none; }
html[data-ui="enterprise"] .sidebar-brand { border-bottom: 1px solid var(--border-soft); margin-bottom: 0.6rem; }

html[data-ui="enterprise"]:not([data-theme="dark"]):not([data-sb-custom]) {
    --sb-hover-bg: var(--brand-lighter);
    --sb-hover-text: var(--brand-darker);
    --sb-active-bg: var(--brand);
    --sb-active-text: var(--ent-on-accent);
    --sb-active-icon: var(--ent-on-accent);
}
html[data-ui="enterprise"][data-theme="dark"] {
    --sb-active-bg: var(--brand);
    --sb-active-text: var(--ent-on-accent);
    --sb-active-icon: var(--ent-on-accent);
}

html[data-ui="enterprise"] .sidebar .sidebar-nav a,
html[data-ui="enterprise"] .sidebar .nav-group-toggle,
html[data-ui="enterprise"] .sidebar .nav-group-items a { border-radius: 0; font-size: 0.82rem; }
html[data-ui="enterprise"] .sidebar .sidebar-nav { padding: 0.2rem 0; }
html[data-ui="enterprise"] .sidebar .sidebar-nav > a,
html[data-ui="enterprise"] .sidebar .nav-row > a,
html[data-ui="enterprise"] .sidebar .nav-group-toggle { padding-left: 1rem; padding-right: 0.8rem; margin-bottom: 0; }

/* Selected page: solid orange row with a darker edge, as in the mock-up. */
html[data-ui="enterprise"] .sidebar .sidebar-nav > a.active,
html[data-ui="enterprise"] .sidebar .sidebar-nav > .nav-row > a.active {
    background: var(--sb-active-bg, var(--brand)); color: var(--ent-on-accent, #fff); font-weight: 600;
    box-shadow: inset 4px 0 0 var(--brand-darker);
}
html[data-ui="enterprise"] .sidebar .sidebar-nav > a.active svg,
html[data-ui="enterprise"] .sidebar .sidebar-nav > .nav-row > a.active svg { color: var(--ent-on-accent, #fff); }

/* Open section: orange heading, sub pages listed under it. */
html[data-ui="enterprise"] .sidebar .nav-group.has-active > .nav-group-toggle { color: var(--brand-dark); font-weight: 700; }
html[data-ui="enterprise"] .sidebar .nav-group.has-active > .nav-group-toggle .label svg { color: var(--brand-dark); }
html[data-ui="enterprise"] .sidebar .nav-group-items a { padding-left: 2.6rem; }
html[data-ui="enterprise"] .sidebar .nav-group-items a.active,
html[data-ui="enterprise"] .sidebar .nav-group-items .nav-item.active {
    background: var(--brand-lighter); color: var(--brand-dark); font-weight: 700;
    box-shadow: inset 4px 0 0 var(--brand);
}
html[data-ui="enterprise"] .sidebar .sidebar-nav .nav-section { letter-spacing: 0.1em; }

html[data-ui="enterprise"] .sidebar-cta .btn { border-radius: var(--ent-radius); }

/* ===================== Top bar ===================== */
html[data-ui="enterprise"] .topbar { height: 52px; box-shadow: 0 1px 0 var(--ent-line); border-bottom: 0; }
html[data-ui="enterprise"] .icon-btn { border: 0; background: transparent; color: var(--brand); border-radius: var(--ent-radius); }
html[data-ui="enterprise"] .icon-btn:hover { background: var(--brand-lighter); color: var(--brand-dark); }
html[data-ui="enterprise"] .nav-toggle { border-radius: var(--ent-radius); }
html[data-ui="enterprise"] .user-menu summary { border-radius: var(--ent-radius); }
html[data-ui="enterprise"] .user-menu-panel { border-radius: var(--ent-radius); }
html[data-ui="enterprise"] .theme-switch,
html[data-ui="enterprise"] .theme-switch button { border-radius: var(--ent-radius); }

/* ===================== Page title bar ===================== */
html[data-ui="enterprise"] .container { padding-top: 1.1rem; }
html[data-ui="enterprise"] .container h1 { font-size: 1.12rem; font-weight: 700; letter-spacing: 0; }

html[data-ui="enterprise"] .list-head,
html[data-ui="enterprise"] .dash-head {
    background: var(--ent-band); color: #fff; padding: 0.6rem 1rem; margin-bottom: 0.9rem;
    border-radius: var(--ent-radius) var(--ent-radius) 0 0; border-bottom: 3px solid var(--brand);
}
html[data-ui="enterprise"] .list-head h1,
html[data-ui="enterprise"] .dash-head h1 { color: #fff; font-size: 1.05rem; }
html[data-ui="enterprise"] .list-head h1 .chev { color: rgba(255,255,255,.7); }
html[data-ui="enterprise"] .dash-head .sub { color: rgba(255,255,255,.85); }

/* ===================== Cards, tables ===================== */
html[data-ui="enterprise"] .card,
html[data-ui="enterprise"] .doc-sheet,
html[data-ui="enterprise"] .flash,
html[data-ui="enterprise"] .callout-danger,
html[data-ui="enterprise"] .callout-warning { border-radius: var(--ent-radius); box-shadow: none; }
html[data-ui="enterprise"] .card-head h2 { font-size: 0.95rem; font-weight: 700; }
html[data-ui="enterprise"] .card-head .card-sub-link { color: var(--brand-dark); }

html[data-ui="enterprise"] th {
    background: var(--ent-th); color: var(--text); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.03em; border-bottom: 2px solid var(--ent-line);
}
html[data-ui="enterprise"] tbody tr:hover { background: var(--brand-lighter); }
html[data-ui="enterprise"] .list-card { border-top: 0; border-radius: 0 0 var(--ent-radius) var(--ent-radius); }
html[data-ui="enterprise"] .list-toolbar { background: var(--card); }
html[data-ui="enterprise"] .list-sort-icon,
html[data-ui="enterprise"] .list-search-toggle,
html[data-ui="enterprise"] .list-search-input,
html[data-ui="enterprise"] .list-search.is-open .list-search-input { border-radius: var(--ent-radius); }
html[data-ui="enterprise"] .list-sort-icon,
html[data-ui="enterprise"] .list-search-toggle { color: var(--brand); }
html[data-ui="enterprise"] .list-card tbody tr td a { color: var(--brand-dark); }

/* ===================== KPI tiles ===================== */
html[data-ui="enterprise"] .stat-grid { gap: 0.6rem; }
html[data-ui="enterprise"] .stat {
    border-radius: var(--ent-radius); box-shadow: none; border: 1px solid var(--ent-line);
    border-left: 4px solid var(--muted-soft); background: var(--card); padding: 0.8rem 0.95rem;
}
html[data-ui="enterprise"] .stat .num { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
html[data-ui="enterprise"] .stat .label { font-size: 0.74rem; font-weight: 600; color: var(--brand-dark); text-transform: uppercase; letter-spacing: 0.03em; }
html[data-ui="enterprise"] .stat .icon-roundel { order: 2; margin-left: auto; background: transparent !important; box-shadow: none; }
html[data-ui="enterprise"] .stat > div:last-child { order: 1; }
html[data-ui="enterprise"] .stat-brand   { background: var(--brand-light);   border-left-color: var(--brand); }
html[data-ui="enterprise"] .stat-warning { background: var(--warning-bg);    border-left-color: var(--warning); }
html[data-ui="enterprise"] .stat-danger  { background: var(--danger-bg);     border-left-color: var(--danger); }
html[data-ui="enterprise"] .stat-info    { background: var(--info-bg);       border-left-color: var(--info); }
html[data-ui="enterprise"] .stat-teal    { background: var(--teal-bg);       border-left-color: var(--teal); }
html[data-ui="enterprise"] .stat-muted   { background: var(--card);          border-left-color: var(--muted-soft); }

/* ===================== Buttons, fields, badges ===================== */
html[data-ui="enterprise"] .btn,
html[data-ui="enterprise"].btn-tones .btn { border-radius: var(--ent-radius) !important; }
html[data-ui="enterprise"] .btn-outline { color: var(--brand-dark); border-color: var(--brand); background: var(--card); }
html[data-ui="enterprise"] .btn-outline:hover { background: var(--brand-lighter); }

/* Coloured buttons: every "do something" tone becomes the orange accent.
   Delete / Reject stay red and Cancel / Back stay grey, so the meaning of
   a button is still clear at a glance. */
html[data-ui="enterprise"] .btn[data-tone="green"],
html[data-ui="enterprise"] .btn[data-tone="blue"],
html[data-ui="enterprise"] .btn[data-tone="teal"],
html[data-ui="enterprise"] .btn[data-tone="indigo"],
html[data-ui="enterprise"] .btn[data-tone="purple"],
html[data-ui="enterprise"] .btn[data-tone="amber"],
html[data-ui="enterprise"] .btn[data-tone="orange"],
html[data-ui="enterprise"] .btn[data-tone="pink"],
html[data-ui="enterprise"] .btn[data-tone="cyan"] { --t: var(--brand); }
html[data-ui="enterprise"] .btn[data-tone="slate"] { --t: #6B6E73; }
html[data-ui="enterprise"] .btn[data-tone="red"] { --t: #C8302F; }

html[data-ui="enterprise"] input:not([type="checkbox"]):not([type="radio"]),
html[data-ui="enterprise"] select,
html[data-ui="enterprise"] textarea { border-radius: var(--ent-radius); border-color: #BFC2C7; }
html[data-ui="enterprise"][data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-ui="enterprise"][data-theme="dark"] select,
html[data-ui="enterprise"][data-theme="dark"] textarea { border-color: #2B313C; }
html[data-ui="enterprise"] input:focus,
html[data-ui="enterprise"] select:focus,
html[data-ui="enterprise"] textarea:focus { border-color: var(--brand); outline: 2px solid rgba(var(--ent-accent-rgb),.18); outline-offset: 0; }
html[data-ui="enterprise"] input[type="checkbox"],
html[data-ui="enterprise"] input[type="radio"] { accent-color: var(--brand); }

html[data-ui="enterprise"] .badge { border-radius: var(--ent-radius); }
html[data-ui="enterprise"] .searchable-dropdown,
html[data-ui="enterprise"] .dd-panel { border-radius: var(--ent-radius); }

/* Phones: keep the title bar compact. */
@media (max-width: 640px) {
    html[data-ui="enterprise"] .topbar { height: 54px; }
    html[data-ui="enterprise"] .list-head,
    html[data-ui="enterprise"] .dash-head { padding: 0.5rem 0.75rem; }
}