/* =====================================================================
   The dashboard's look (Version 20): /admin/ only.
   ---------------------------------------------------------------------
   A top bar (the bar's mark, search, theme, your account), a menu down
   the side in groups, and the pages in the middle. The pages are the same
   panels as before and are drawn with style.css's rules, which use the
   colour variables below (--navy, --card, --text …): each theme sets
   those, so every page follows the theme without rules of its own.

   Themes (set on <html> by js/admin-console-boot.js, chosen under the
   account menu or My Profile):
     light  white pages on a pale grey canvas
     dark   charcoal
     cc     the website's own navy and gold (style.css's defaults)
   "Match my device" picks light or dark from the device's setting.

   --c-* are the dashboard's own extras. --ok-fg, --bad-fg, --warn-fg and
   --violet-fg are the status colours style.css falls back from (its pale
   colours suit only a dark page).
   ===================================================================== */

:root {
  --c-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* Version 28: CC Slaughters' navy along the top in every theme, and its
     gold as the brand mark; the platform's own colours stay neutral. */
  --c-topbar: #0b1838;
  --c-topbar-ink: #ffffff;
  --c-topbar-dim: #b9c3da;
  --c-topbar-line: rgba(255, 255, 255, 0.12);
  --c-topbar-hover: rgba(255, 255, 255, 0.1);
  --c-brand: #d9a34c;
  --c-mark: #d9a34c;
  --c-mark-ink: #0b1838;
  --c-sidebar: var(--navy-alt);
  --c-hover: rgba(255, 255, 255, 0.06);
  --c-selected: rgba(217, 163, 76, 0.16);
  --c-selected-ink: var(--text);
  --c-indicator: #d9a34c;
  --c-accent: #b7741c;
  --c-accent-hover: #a0640f;
  --c-on-accent: #ffffff;
  --c-link: var(--gold-light);
  --c-input: #061630;
  --c-field-border: #2a4068;
  --c-sunken: #081a3a;
  --c-section-head: #0f2549;
  --c-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  --c-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.45);
  --c-focus: #d9a34c;
  --c-radius: 8px;
  /* Status: text, and a pale fill behind it */
  --s-ok: #84e0a3; --s-ok-bg: rgba(132, 224, 163, 0.12);
  --s-warn: #f3c769; --s-warn-bg: rgba(243, 199, 105, 0.12);
  --s-bad: #ff9d96; --s-bad-bg: rgba(255, 157, 150, 0.12);
  --s-info: #a9bde6; --s-info-bg: rgba(169, 189, 230, 0.12);
  /* Charts (checked for colour-blind separation and contrast; see admin-home.js) */
  --viz-1: #c08528;
  --viz-2: #3d8fc4;
  --viz-grid: rgba(255, 255, 255, 0.08);
  --viz-base: rgba(255, 255, 255, 0.28);
}

/* CC Slaughters: the website's navy and gold, with the website's own
   header colour along the top. */
:root[data-console-theme="cc"] {
  --c-topbar: #8b500e;
  --c-topbar-dim: #f3dcc0;
  --c-mark: #02112c;
  --c-mark-ink: #d9a34c;
  --c-sidebar: #061733;
  --c-hover: rgba(255, 255, 255, 0.06);
  --c-selected: rgba(217, 163, 76, 0.18);
}

:root[data-console-theme="light"] {
  color-scheme: light;
  --navy: #f2f4f7;
  --navy-alt: #ffffff;
  --card: #ffffff;
  --text: #151b28;
  --text-dim: #566175;
  --border: #dde1e8;
  --gold: #94540f;
  --gold-light: #1d5bb8;
  --frost: #0d7480;
  --accent-border: rgba(148, 84, 15, 0.35);
  --ok-fg: #17663a;
  --bad-fg: #b42318;
  --warn-fg: #8a4b00;
  --violet-fg: #6236b3;
  --c-sidebar: #ffffff;
  --c-hover: #f0f2f6;
  --c-selected: #fbf3e6;
  --c-indicator: #b06a12;
  --c-accent: #94540f;
  --c-accent-hover: #7c450a;
  --c-link: #1d5bb8;
  --c-input: #ffffff;
  --c-field-border: #b9c0cc;
  --c-sunken: #f7f8fa;
  --c-section-head: #f8f9fb;
  --c-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.05);
  --c-shadow-lg: 0 20px 48px rgba(16, 24, 40, 0.2);
  --c-focus: #1d5bb8;
  --s-ok: #17663a; --s-ok-bg: #e6f4ea;
  --s-warn: #8a4b00; --s-warn-bg: #fdf1dc;
  --s-bad: #b42318; --s-bad-bg: #fde8e6;
  --s-info: #33507f; --s-info-bg: #e9eef7;
  --viz-1: #b06a12;
  --viz-2: #1f6f9e;
  --viz-grid: #eceef2;
  --viz-base: #b9c0cc;
}

/* Dark: CC's navy, deepened, rather than a neutral charcoal. */
:root[data-console-theme="dark"] {
  color-scheme: dark;
  --navy: #0a1121;
  --navy-alt: #0d1526;
  --card: #131b2d;
  --text: #e8ecf4;
  --text-dim: #a3adc3;
  --border: #26324c;
  --gold: #d9a34c;
  --gold-light: #8fb6ff;
  --frost: #6fd6e0;
  --accent-border: rgba(217, 163, 76, 0.4);
  --ok-fg: #7fdca0;
  --bad-fg: #ff9b93;
  --warn-fg: #f2c46b;
  --violet-fg: #cbb2ff;
  --c-topbar: #060c1a;
  --c-topbar-line: rgba(255, 255, 255, 0.09);
  --c-sidebar: #0d1526;
  --c-hover: #1a2439;
  --c-selected: rgba(217, 163, 76, 0.14);
  --c-indicator: #d9a34c;
  --c-accent: #d9a34c;
  --c-accent-hover: #e6b764;
  --c-on-accent: #1b1204;
  --c-link: #8fb6ff;
  --c-input: #0c1324;
  --c-field-border: #36435f;
  --c-sunken: #0f1729;
  --c-section-head: #182238;
  --c-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --c-focus: #8fb6ff;
  --s-ok: #7fdca0; --s-ok-bg: rgba(127, 220, 160, 0.12);
  --s-warn: #f2c46b; --s-warn-bg: rgba(242, 196, 107, 0.12);
  --s-bad: #ff9b93; --s-bad-bg: rgba(255, 155, 147, 0.13);
  --s-info: #a9bde6; --s-info-bg: rgba(169, 189, 230, 0.12);
  --viz-1: #c08528;
  --viz-2: #3d8fc4;
  --viz-grid: #1d2840;
  --viz-base: #3c4a68;
}

/* ---------------------------------------------------------------------
   The frame
   --------------------------------------------------------------------- */

.console.page { padding: 0; }
.console {
  font-family: var(--c-font);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
  min-height: 100vh;
}
.console :focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

.console-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 0.75rem;
  height: 3rem; padding: 0 0.75rem 0 1rem;
  background: var(--c-topbar); color: var(--c-topbar-ink);
  border-bottom: 1px solid var(--c-topbar-line);
}
.console-brand {
  display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0;
  color: var(--c-topbar-ink); text-decoration: none; font-size: 0.95rem; white-space: nowrap;
}
.console .console-brand, .console .console-brand:hover { color: var(--c-topbar-ink); text-decoration: none; }
.console-tenant-mark { width: 2rem; height: 2rem; display: block; border-radius: 50%; box-shadow: 0 0 0 1.5px #d9a34c; }
.console-brand-name { font-weight: 650; letter-spacing: 0.005em; }
.console-brand-module { padding-left: 0.75rem; margin-left: 0.1rem; border-left: 1px solid var(--c-topbar-line); color: var(--c-topbar-dim); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }
.console-brand-module:empty { display: none; }

/* Tierlume's logo (core/branding; Version 31: the Deco tiers and pearl). The
   mark is the gold tiers, the logo the full name on the logo's own ink. */
.platform-mark { width: auto; height: 1.05rem; flex-shrink: 0; display: block; }
.platform-logo { display: block; width: 100%; height: auto; }
.platform-about-logo { width: 16rem; max-width: 100%; margin: 0.25rem 0 0.9rem; padding: 1rem 1.25rem; border-radius: 12px; background: #1e1626; }
.console-platform { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text-dim); font-size: 0.78rem; line-height: 1.3; }
.console-platform strong { color: var(--text); font-weight: 650; }
.console-sidebar-foot { margin-top: auto; padding: 0.9rem 0.65rem 0.2rem; border-top: 1px solid var(--border); }

.console-search-btn {
  display: flex; align-items: center; gap: 0.5rem;
  flex: 1 1 auto; max-width: 34rem; height: 2rem; margin: 0 auto; padding: 0 0.6rem 0 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px;
  background: rgba(255, 255, 255, 0.1) var(--icon-search-white) no-repeat 0.6rem 50% / 1rem;
  color: rgba(255, 255, 255, 0.82); font: inherit; font-size: 0.875rem; cursor: pointer; text-align: left;
}
.console-search-btn:hover { background-color: rgba(255, 255, 255, 0.16); }
.console-search-btn-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-kbd {
  font: inherit; font-size: 0.72rem; padding: 0.05rem 0.4rem; border-radius: 4px;
  border: 1px solid currentColor; opacity: 0.75; white-space: nowrap;
}
.console-topbar-end { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.console:has(> .console-shell:not([hidden])) .console-topbar-end { margin-left: 0; }

.console-icon-btn, .console-avatar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--c-topbar-ink); cursor: pointer;
}
.console-icon-btn::before {
  content: ""; width: 1.25rem; height: 1.25rem; background: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain;
}
.console-menu-btn { --icon: var(--icon-menu); display: none; }
.console-theme-btn { --icon: var(--icon-contrast); }
.console-apps-btn { --icon: var(--icon-apps); }
.console-bell-btn { --icon: var(--icon-bell); position: relative; }
.console-bell-count {
  position: absolute; top: 0.2rem; right: 0.15rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem;
  border-radius: 999px; background: #d92d20; color: #fff; box-shadow: 0 0 0 2px var(--c-topbar);
  font-size: 0.65rem; font-weight: 700; line-height: 1.05rem; text-align: center;
}
.console-topbar .console-icon-btn { color: var(--c-topbar-ink); }
.console-icon-btn:hover, .console-avatar-btn:hover,
.console-icon-btn[aria-expanded="true"], .console-avatar-btn[aria-expanded="true"] { background: var(--c-topbar-hover); }

/* The module switcher */
.console-apps {
  position: absolute; left: 0; top: calc(100% + 0.4rem); z-index: 55;
  width: min(46rem, calc(100vw - 1rem)); max-height: calc(100vh - 4.5rem); overflow-y: auto;
  padding: 1rem; background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--c-shadow-lg);
}
.console-apps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0.25rem 0.75rem; }
.console-apps-title { margin: 0; font-size: 1rem; font-weight: 650; }
.console-apps-sub { margin: 0; color: var(--text-dim); font-size: 0.8rem; }
.console-apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 0.6rem; }
.console-app { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow: hidden; }
.console-app-current { border-color: var(--c-indicator); box-shadow: inset 0 3px 0 var(--c-indicator); }
.console-app-admin { background: var(--c-sunken); }
.console-app-open {
  display: grid; grid-template-columns: auto 1fr auto; column-gap: 0.6rem; align-items: center;
  width: 100%; padding: 0.75rem 0.8rem 0.4rem; border: 0; background: none; color: var(--text);
  font: inherit; font-size: 0.92rem; font-weight: 650; text-align: left; cursor: pointer;
}
.console-app-open::before {
  content: ""; width: 1.3rem; height: 1.3rem; grid-row: span 2; align-self: start; margin-top: 0.05rem;
  background: var(--c-indicator); -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain;
}
.console-app-open .admin-tab-count { grid-column: 3; grid-row: 1; }
.console-app-about { grid-column: 2 / 4; font-size: 0.78rem; font-weight: 400; color: var(--text-dim); line-height: 1.35; }
.console-app-open:hover { background: var(--c-hover); }
.console-app-pages { list-style: none; margin: 0; padding: 0.2rem 0.5rem 0.6rem 2.55rem; display: flex; flex-wrap: wrap; gap: 0.1rem 0.15rem; }
.console-app-pages button { padding: 0.15rem 0.35rem; border: 0; border-radius: 4px; background: none; color: var(--c-link); font: inherit; font-size: 0.8rem; cursor: pointer; }
.console-app-pages button:hover { background: var(--c-hover); text-decoration: underline; }
.console-apps-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.9rem 0.25rem 0; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.console .console-apps-foot .btn-link { color: var(--c-link); font-size: 0.85rem; }

/* Needs attention (the bell) */
.console-bell-menu { min-width: 19rem; }
.console .console-bell-item { display: grid; grid-template-columns: auto 1fr; column-gap: 0.6rem; }
.console-bell-item::before { content: ""; width: 1.1rem; height: 1.1rem; grid-row: span 2; background: var(--text-dim); -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; }
.console-bell-text { font-weight: 600; }
.console-bell-where { grid-column: 2; color: var(--text-dim); font-size: 0.78rem; }
.console-menu-empty { margin: 0.25rem 0.6rem 0.6rem; color: var(--text-dim); font-size: 0.875rem; }
.console-account-platform { margin: 0.35rem 0 0; padding: 0.55rem 0.6rem 0.2rem; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 0.75rem; }

/* Things only for someone signed in (search, menu, account). */
.console:has(> .console-shell[hidden]) [data-signed-in-only] { display: none; }

/* Drop-down menus in the top bar */
.console-menu-wrap { position: relative; }
.console-menu {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 50;
  min-width: 15rem; padding: 0.35rem;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--c-radius); box-shadow: var(--c-shadow-lg);
}
.console-menu-label { margin: 0.3rem 0.6rem 0.35rem; font-size: 0.78rem; font-weight: 600; color: var(--text-dim); }
.console-menu [role^="menuitem"] {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  padding: 0.5rem 0.6rem; border: 0; border-radius: 5px; background: none;
  color: inherit; font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer;
}
.console-menu [role^="menuitem"]:hover, .console-menu [role^="menuitem"]:focus-visible { background: var(--c-hover); outline: none; }
.console-menu [role="menuitemradio"]::before { content: ""; width: 1rem; flex-shrink: 0; text-align: center; }
.console-menu [role="menuitemradio"][aria-checked="true"]::before { content: "\2713"; color: var(--c-accent); font-weight: 700; }
.console-menu .console-menu-danger { color: var(--bad-fg, #ffb3b3); border-top: 1px solid var(--border); border-radius: 0 0 5px 5px; margin-top: 0.3rem; padding-top: 0.6rem; }
.console-account-menu { min-width: 17rem; }
.console-account-head { display: flex; gap: 0.75rem; align-items: center; padding: 0.6rem 0.6rem 0.75rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--border); }
.console-account-name { margin: 0; font-weight: 600; }
.console-account-email { margin: 0; color: var(--text-dim); font-size: 0.8rem; overflow-wrap: anywhere; }

/* People: a photo, or initials on a colour picked from their email */
.console-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2rem; height: 2rem; border-radius: 50%; overflow: hidden;
  background: var(--avatar-bg, #3d5a99); color: #fff;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; user-select: none;
}
.console-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.console-avatar-btn .console-avatar { width: 1.85rem; height: 1.85rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }
.console-avatar-lg { width: 2.6rem; height: 2.6rem; font-size: 0.95rem; }
.console-avatar-xl { width: 5.5rem; height: 5.5rem; font-size: 1.9rem; }

/* ---------------------------------------------------------------------
   Side menu and page
   --------------------------------------------------------------------- */

.console-shell {
  display: grid; grid-template-columns: 15.5rem minmax(0, 1fr);
  background: linear-gradient(to right, var(--c-sidebar) 15.5rem, var(--border) 15.5rem, var(--border) calc(15.5rem + 1px), transparent calc(15.5rem + 1px));
  min-height: calc(100vh - 3rem);
}
.console-sidebar {
  position: sticky; top: 3rem; align-self: start;
  display: flex; flex-direction: column;
  height: calc(100vh - 3rem); overflow-y: auto; overscroll-behavior: contain;
  padding: 0.6rem 0.6rem 0.9rem;
  background: var(--c-sidebar); border-right: 1px solid var(--border);
  scrollbar-width: thin;
}
.console-nav-group { margin-bottom: 0.35rem; }
/* A group with nothing this person can open isn't shown at all. */
.console-nav-group:not(.console-nav-favorites):not(.console-nav-modules):not(:has(.admin-tab:not([hidden]))) { display: none; }
.console-nav-heading { margin: 0.85rem 0.65rem 0.25rem; font-size: 0.75rem; font-weight: 600; color: var(--text-dim); }
.console-nav-top { padding-bottom: 0.2rem; }

/* Version 28: on Home the menu lists your modules; in a module, its pages. */
.console-sidebar[data-view="home"] .console-nav-group[data-module],
.console-sidebar[data-view="module"] .console-nav-modules,
.console-sidebar[data-view="module"] .console-nav-group[data-module]:not([data-current]),
.console-nav-group[data-module-off] { display: none !important; }
.console-sidebar[data-view="module"] .console-nav-group[data-current] > .console-nav-heading { display: none; }
.console-module-head { margin: 0.5rem 0 0.35rem; padding: 0.6rem 0 0.25rem; border-top: 1px solid var(--border); }
.console-module-head[hidden] { display: none; }
.console-module-back {
  display: inline-flex; align-items: center; gap: 0.3rem; margin: 0 0 0.35rem 0.35rem; padding: 0.15rem 0.35rem;
  border: 0; border-radius: 4px; background: none; color: var(--text-dim); font: inherit; font-size: 0.78rem; cursor: pointer;
}
.console-module-back::before { content: "\2039"; font-size: 1.05rem; line-height: 1; }
.console-module-back:hover { background: var(--c-hover); color: var(--text); }
.console-module-title {
  display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.15rem 0.65rem 0.2rem;
  font-size: 0.95rem; font-weight: 650; color: var(--text);
}
.console-module-title::before { content: ""; width: 1.2rem; height: 1.2rem; flex-shrink: 0; background: var(--c-indicator); -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; }

.console .console-sidebar .admin-tab,
.console .console-fav-link {
  position: relative;
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  margin: 1px 0; padding: 0.42rem 0.65rem; border: 0; border-radius: 6px;
  background: transparent; color: var(--text); font: inherit; font-size: 0.875rem; line-height: 1.35;
  text-align: left; cursor: pointer;
}
.console .console-sidebar .admin-tab::before,
.console .console-fav-link::before,
.dash-attention-item::before,
.dash-link::before,
.dash-mod::before,
.mod-item::before,
.ov-card::before,
.console-search-item::before {
  content: ""; flex-shrink: 0; width: 1.15rem; height: 1.15rem; background: var(--text-dim);
  -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain;
}
.console .console-sidebar .admin-tab:hover, .console .console-fav-link:hover { background: var(--c-hover); }
.console .console-sidebar .admin-tab-active {
  background: var(--c-selected); color: var(--c-selected-ink); font-weight: 600; border-color: transparent;
}
.console .console-sidebar .admin-tab-active::after {
  content: ""; position: absolute; left: 0; top: 0.45rem; bottom: 0.45rem; width: 3px; border-radius: 3px; background: var(--c-indicator);
}
.console .console-sidebar .admin-tab-active::before { background: var(--c-indicator); }
.console .console-module-link::before { background: var(--c-indicator); opacity: 0.9; }
.console .admin-tab-count {
  margin-left: auto; min-width: 1.35rem; padding: 0 0.4rem; border-radius: 999px;
  background: #d92d20; color: #fff; font-size: 0.72rem; font-weight: 700; line-height: 1.35rem; text-align: center;
}

.console-main { min-width: 0; padding: 1.25rem 2rem 4rem; }
.console-main > * { max-width: 120rem; }

.console-page-head { margin-bottom: 1.25rem; }
.console-breadcrumb { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.35rem; padding: 0; list-style: none; font-size: 0.8rem; color: var(--text-dim); }
.console-breadcrumb li + li::before { content: "\203A"; margin-right: 0.35rem; }
.console-breadcrumb button { padding: 0; border: 0; background: none; color: var(--c-link); font: inherit; cursor: pointer; }
.console-breadcrumb button:hover { text-decoration: underline; }
.console-page-title-row { display: flex; align-items: center; gap: 0.5rem; }
.console .console-page-title { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.console-page-sub { margin: 0.3rem 0 0; color: var(--text-dim); font-size: 0.9rem; }
.console-fav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-dim); cursor: pointer;
}
.console-fav-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.console-fav-btn::before {
  content: ""; width: 1.2rem; height: 1.2rem; background: currentColor;
  -webkit-mask: var(--icon-star) no-repeat center / contain; mask: var(--icon-star) no-repeat center / contain;
}
.console-fav-btn:hover { background: var(--c-hover); color: var(--text); }
.console-fav-btn[aria-pressed="true"] { color: #e0a526; }
.console-fav-btn[aria-pressed="true"]::before { -webkit-mask-image: var(--icon-star-filled); mask-image: var(--icon-star-filled); }

.console-scrim { display: none; }

/* ---------------------------------------------------------------------
   The pages' own parts, in the dashboard's style
   --------------------------------------------------------------------- */

.console .admin-panel { padding-bottom: 1rem; }
.console .admin-panel h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin: 1.75rem 0 0.75rem; }
.console .admin-panel > h2:first-child, .console .admin-panel > .section-sub + h2 { margin-top: 0.25rem; }
.console .admin-panel h3 { font-size: 1rem; font-weight: 600; }
.console .admin-mfa h3, .console .admin-mfa-card h3 { color: var(--text); font-size: 1rem; }
.console .admin-section-heading { margin-top: 2rem; }
.console .console-dup-heading { display: none; }
.console .section-sub { text-align: left; max-width: 72ch; margin: 0 0 1.25rem; font-size: 0.9rem; }
.console a { color: var(--c-link); }

.console .admin-mfa-card,
.console .admin-list-row,
.console .console-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--c-radius); box-shadow: var(--c-shadow);
}
.console .admin-mfa-card { padding: 1.1rem 1.25rem; }

.console .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.45rem 1rem; border: 1px solid transparent; border-radius: 6px;
  background: var(--c-accent); color: var(--c-on-accent);
  font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.4; cursor: pointer; opacity: 1;
}
.console .btn:hover { background: var(--c-accent-hover); opacity: 1; text-decoration: none; }
.console .btn:disabled { opacity: 0.55; cursor: default; }
.console .btn-ghost { background: var(--card); color: var(--text); border-color: var(--border); }
.console .btn-ghost:hover { background: var(--c-hover); }
.console .admin-list-row-actions .btn { padding: 0.32rem 0.75rem; font-size: 0.8125rem; }

.console .inquiry-form input[type="text"],
.console .inquiry-form input[type="email"],
.console .inquiry-form input[type="tel"],
.console .inquiry-form input[type="date"],
.console .inquiry-form input[type="time"],
.console .inquiry-form input[type="number"],
.console .inquiry-form input[type="password"],
.console .inquiry-form input[type="search"],
.console .inquiry-form input[type="url"],
.console .inquiry-form select,
.console .inquiry-form textarea,
.console .admin-panel input[type="text"],
.console .admin-panel input[type="search"],
.console .admin-panel input[type="password"],
.console .admin-panel select {
  padding: 0.5rem 0.7rem; border-radius: 6px; border: 1px solid var(--c-field-border);
  background: var(--c-input); color: var(--text); font: inherit; font-size: 0.9rem;
}
.console .inquiry-form input:focus, .console .inquiry-form select:focus, .console .inquiry-form textarea:focus,
.console .admin-panel input:focus, .console .admin-panel select:focus, .console .admin-panel textarea:focus {
  outline: 2px solid var(--c-focus); outline-offset: 0; border-color: transparent;
}
.console .inquiry-form input[type="file"]::file-selector-button { background: var(--c-accent); color: var(--c-on-accent); border-radius: 5px; }
.console .field-row label { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.3rem; }
.console .field-row { margin-bottom: 1rem; }
.console .inquiry-form { margin-top: 0; }
.console .inquiry-status { font-size: 0.875rem; }
.console .inquiry-status-success { color: var(--ok-fg, #b7f0c4); }
.console .inquiry-status-error { color: var(--bad-fg, #ffb3b3); }
.console .admin-table th { color: var(--text-dim); font-size: 0.8rem; font-weight: 600; }
.console details > summary { cursor: pointer; }
.console .admin-badge { border-radius: 4px; }
.console .ticket-qr, .console .admin-orders-qr img { box-shadow: 0 0 0 1px var(--border); }

/* What a search result or Home opened: a moment's highlight. */
.console-flash { animation: console-flash 1.8s ease-out; border-radius: 6px; }
@keyframes console-flash {
  0%, 35% { box-shadow: 0 0 0 3px var(--c-focus); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .console-flash { animation: none; outline: 3px solid var(--c-focus); }
  .console-sidebar { transition: none !important; }
}

/* ---------------------------------------------------------------------
   Sections (Version 20.1): each part of a page is its own card with a
   heading band, so it's clear where one part ends and the next begins.
   Cards and rows inside a section sit a shade darker or lighter than it.
   --------------------------------------------------------------------- */

.console .console-section {
  margin: 0 0 1.25rem; padding: 0 1.5rem 1.25rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--c-shadow);
}
.console .console-section > h2:first-of-type {
  margin: 0 -1.5rem 1.1rem !important; padding: 0.8rem 1.5rem;
  background: var(--c-section-head); border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0;
  font-size: 1.05rem;
}
.console .console-section:has(> h2.console-dup-heading) { padding-top: 1.25rem; }
.console .console-section > h2.admin-section-heading:first-of-type { padding-top: 0.8rem; border-top: 0; }
.console-split, .console-editor, .console-section { scroll-margin-top: 4rem; }
.console .console-section h3 { margin-top: 1.5rem; }
.console .console-section .admin-section-heading { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.console .console-section .admin-mfa-card,
.console .console-section .admin-list-row,
.console .console-section .admin-ls-item,
.console .console-section details.admin-mfa-card { background: var(--c-sunken); box-shadow: none; }
.console .console-section .admin-list-row .admin-list-row { background: var(--card); }
.console .console-section > .section-sub { margin-bottom: 1rem; }

/* A form's groups of fields */
.console .console-fieldset {
  margin: 0 0 1rem; padding: 0.85rem 1.25rem 0.35rem; min-width: 0;
  background: var(--c-sunken); border: 1px solid var(--border); border-radius: 8px;
}
.console .console-fieldset > legend {
  padding: 0 0.45rem; margin-left: -0.45rem; font-size: 0.875rem; font-weight: 600; color: var(--text);
}
.console .console-fieldset .field-help, .console .console-fieldset .admin-upload-hint { max-width: 70ch; }
.console .field-row label { color: var(--text); }
.console .admin-form-grid { gap: 0 1.25rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }

/* Toolbar above a list: the New button and a filter */
.console-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin: 0 0 1rem; }
.console .console-btn-new::before { content: "+"; font-size: 1.1rem; line-height: 1; font-weight: 600; margin-right: 0.1rem; }
.console-toolbar-filter { flex: 0 1 22rem; }
.console .console-toolbar-filter input { width: 100%; padding: 0.45rem 0.7rem; border-radius: 6px; border: 1px solid var(--c-field-border); background: var(--c-input); color: var(--text); font: inherit; font-size: 0.9rem; }
.console-toolbar .inquiry-status { flex-basis: 100%; margin: 0; }

/* An editor (new or editing one thing): its own card, with its buttons
   kept in view at the bottom while scrolling through a long form. */
.console-editor {
  margin: 0 0 1.25rem; padding: 0 1.5rem;
  background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--c-accent);
  border-radius: 10px; box-shadow: var(--c-shadow-lg);
}
.console-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 0 0.85rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.console-editor-kicker { margin: 0 0 0.1rem; font-size: 0.8rem; font-weight: 600; color: var(--c-accent); }
.console .console-editor-head h2 { margin: 0 !important; font-size: 1.2rem; overflow-wrap: anywhere; }
.console-icon-close {
  flex-shrink: 0; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--text-dim); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.console-icon-close::before { content: "\00d7"; }
.console-icon-close:hover { background: var(--c-hover); color: var(--text); }
.console-editor .admin-form { margin: 0; }
.console-editor-actions {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  margin: 0.5rem -1.5rem 0; padding: 0.8rem 1.5rem;
  background: var(--card); border-top: 1px solid var(--border); border-radius: 0 0 10px 10px;
}
.console-editor-actions .inquiry-status { flex: 1 1 16rem; margin: 0; }
.console .admin-row-editing { background: var(--c-selected) !important; box-shadow: inset 3px 0 0 var(--c-accent); }

/* The list and the editor side by side on a wide screen */
.console-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.25rem; align-items: start; }
@media (min-width: 1400px) {
  .console-split:has(> .console-editor:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(30rem, 1.1fr); grid-template-areas: "list editor"; }
  .console-split:has(> .console-editor:not([hidden])) > .console-editor {
    grid-area: editor; position: sticky; top: 4rem; max-height: calc(100vh - 5rem); overflow-y: auto; overscroll-behavior: contain;
  }
  .console-split:has(> .console-editor:not([hidden])) > .console-split-list { grid-area: list; }
}

/* Single fields on their own line stay a comfortable width */
.console .admin-panel form > .field-row,
.console .admin-panel .console-fieldset > .field-row { max-width: 56rem; }

/* Wide screens: the form to add something beside the list of what's there */
@media (min-width: 1500px) {
  .console [data-admin-panel="tickets"],
  .console [data-admin-panel="videos"],
  .console [data-admin-panel="reviews"],
  .console [data-admin-panel="broadcast"] {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.25rem; align-items: start;
  }
  .console [data-admin-panel="tickets"] > :not(.console-section),
  .console [data-admin-panel="videos"] > :not(.console-section),
  .console [data-admin-panel="reviews"] > :not(.console-section),
  .console [data-admin-panel="broadcast"] > :not(.console-section) { grid-column: 1 / -1; }
  .console [data-admin-panel="broadcast"] > .console-section:first-of-type { grid-row: span 2; }
}

/* Wide screens: the pages use the room. Text stays a readable width;
   cards and forms that were kept narrow fill their column, and pages made
   of separate cards lay them out side by side. */
.console .admin-panel .admin-mfa-card,
.console .admin-panel form.admin-mfa-card,
.console .admin-panel form[data-hosting-form],
.console .admin-user-confirm { max-width: none !important; }
.console [data-admin-panel="keys"] [data-keys-list] {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: 1rem; align-items: start;
}

/* ---------------------------------------------------------------------
   Sign-in, two-step and new-password screens
   --------------------------------------------------------------------- */

.console-signin { display: flex; justify-content: center; padding: 3rem 1rem 4rem; }
.console-signin:not(:has(> .console-signin-card > .console-signin-body > :not([hidden]))) { display: none; }
.console-signin-card {
  width: min(100%, 30rem); overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--c-shadow-lg);
}
.console-signin-card:has([data-admin-mfa]:not([hidden]), [data-mfa-codes]:not([hidden])) { width: min(100%, 46rem); }
.console-signin-brand { display: flex; justify-content: center; padding: 1.25rem 1rem 1rem; background: #02112c; }
.console-signin-brand { flex-direction: column; align-items: center; gap: 0.6rem; }
.console-signin-brand img { width: 11rem; height: auto; display: block; }
.console .console-signin-platform { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: #b9c3da; font-size: 0.75rem; }
.console .console-signin-platform .platform-logo { width: 6.5rem; }
.console-signin-body { padding: 1.75rem 2rem 2rem; }
.console .console-signin-title { margin: 0 0 0.3rem; font-size: 1.35rem; font-weight: 600; }
.console-signin-sub { margin: 0 0 1.25rem; color: var(--text-dim); font-size: 0.9rem; }
.console .console-signin [data-admin-login] .inquiry-form { max-width: none; margin: 0.85rem 0 0; }
.console .console-signin [data-admin-login] .cf-turnstile { justify-content: flex-start; margin: 0.25rem 0 1rem; }
.console .console-signin .inquiry-submit { width: 100%; padding: 0.6rem 1rem; font-size: 0.95rem; }
.console .console-signin .admin-mfa { max-width: none; margin: 0; }
.console .console-signin .admin-mfa h2 { margin: 0 0 0.4rem; font-size: 1.3rem; font-weight: 600; }
.console .console-signin .section-sub { margin-bottom: 1.25rem; }
.console .console-signin .admin-mfa-card { box-shadow: none; background: var(--navy); }

/* ---------------------------------------------------------------------
   Home (Version 28): a grid of widgets each person arranges, and the
   figures and charts inside them. Administration's Overview uses the
   same pieces.
   --------------------------------------------------------------------- */

.dash-bar { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; margin: -3.4rem 0 1rem; min-height: 2.4rem; }
.dash-updated { margin: 0; color: var(--text-dim); font-size: 0.8rem; }
.console .dash-customize::before { content: ""; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: var(--icon-layout) no-repeat center / contain; mask: var(--icon-layout) no-repeat center / contain; }
.dash-edit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; margin: 0 0 1rem; padding: 0.75rem 1rem;
  background: var(--c-selected); border: 1px dashed var(--c-indicator); border-radius: 10px;
}
.dash-edit[hidden] { display: none; }
.dash-edit-text { flex: 1 1 22rem; margin: 0; font-size: 0.875rem; }
.dash-edit-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dash-edit .inquiry-status { flex-basis: 100%; margin: 0; }

.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 1rem; align-items: start; }
.dash-w, .ov-section {
  grid-column: span 6; min-width: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--c-shadow);
}
.dash-w-s { grid-column: span 4; }
.dash-w-m { grid-column: span 6; }
.dash-w-l { grid-column: span 12; }
/* Version 30: two thirds; and the packed grid (admin-home.js gives each
   widget as many 8px rows as its content needs, the gap included). */
.dash-w-w { grid-column: span 8; }
.dash-w { position: relative; }
.dash-packed { grid-auto-rows: 8px; row-gap: 0; }
.dash-w-head { display: flex; align-items: center; gap: 0.6rem; min-height: 2.9rem; padding: 0.55rem 0.6rem 0.55rem 1.1rem; border-bottom: 1px solid var(--border); }
.console .dash-w-title { flex: 1; min-width: 0; margin: 0 !important; font-size: 0.95rem !important; font-weight: 650; line-height: 1.3; }
.dash-w-open {
  flex-shrink: 0; padding: 0.25rem 0.5rem; border: 0; border-radius: 5px; background: none;
  color: var(--c-link); font: inherit; font-size: 0.8rem; cursor: pointer; white-space: nowrap;
}
.dash-w-open::after { content: " \203A"; }
.dash-w-open:hover { background: var(--c-hover); }
.dash-w-body { padding: 0.95rem 1.1rem 1.1rem; }
.dash-w-body > * + * { margin-top: 0.85rem; }

/* Customize */
.dash-editing .dash-w { cursor: grab; outline: 1px dashed var(--c-field-border); outline-offset: 3px; }
.dash-editing .dash-w-body { pointer-events: none; opacity: 0.75; }
.dash-w.dash-dragging { opacity: 0.4; }
.dash-w.dash-drop-before { box-shadow: -4px 0 0 var(--c-indicator), var(--c-shadow); }
.dash-w.dash-drop-after { box-shadow: 4px 0 0 var(--c-indicator), var(--c-shadow); }
.dash-w-l.dash-drop-before { box-shadow: 0 -4px 0 var(--c-indicator), var(--c-shadow); }
.dash-w-l.dash-drop-after { box-shadow: 0 4px 0 var(--c-indicator), var(--c-shadow); }
.dash-w-tools { display: flex; align-items: center; gap: 0.2rem; flex-shrink: 0; }
.dash-grip { width: 1.1rem; height: 1.6rem; margin-right: 0.15rem; background: var(--text-dim); -webkit-mask: var(--icon-grip) no-repeat center / contain; mask: var(--icon-grip) no-repeat center / contain; }
.dash-tool, .dash-size {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.85rem; height: 1.85rem; padding: 0 0.3rem;
  border: 1px solid var(--border); border-radius: 5px; background: var(--card); color: var(--text); font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.dash-tool::before { content: ""; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; }
.dash-move-up { --icon: var(--icon-left); }
.dash-move-down { --icon: var(--icon-right); }
.dash-remove { --icon: var(--icon-close); margin-left: 0.2rem; }
.dash-remove:hover { color: var(--s-bad); border-color: var(--s-bad); }
.dash-tool:hover:not(:disabled), .dash-size:hover { background: var(--c-hover); }
.dash-tool:disabled { opacity: 0.35; cursor: default; }
.dash-sizes { display: inline-flex; margin-left: 0.2rem; }
.dash-size { border-radius: 0; margin-left: -1px; }
.dash-size:first-child { border-radius: 5px 0 0 5px; margin-left: 0; }
.dash-size:last-child { border-radius: 0 5px 5px 0; }
.dash-size[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); position: relative; }

/* Version 30: each widget's settings (the gear), and the corner to drag for width. */
.dash-gear { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>"); border-color: transparent; background: none; color: var(--text-dim); }
.dash-gear:hover, .dash-gear[aria-expanded="true"] { color: var(--text); border-color: var(--border); }
.dash-w-settings { padding: 0.85rem 1.1rem 1rem; border-bottom: 1px solid var(--border); background: var(--c-sunken); display: flex; flex-direction: column; gap: 0.6rem; }
.dash-w-settings-title { margin: 0; font-size: 0.8rem; font-weight: 650; color: var(--text-dim); }
.dash-opt-group { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
.dash-opt-group legend { font-size: 0.82rem; font-weight: 650; padding: 0; margin-bottom: 0.3rem; width: 100%; }
.dash-opt-check, .dash-opt-choice { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; cursor: pointer; }
.dash-opt-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.dash-resize {
  position: absolute; right: -1px; bottom: -1px; width: 1.4rem; height: 1.4rem; cursor: ew-resize; touch-action: none;
  border-right: 3px solid var(--c-accent); border-bottom: 3px solid var(--c-accent); border-radius: 0 0 10px 0;
}
.dash-resizing { outline: 2px solid var(--c-accent) !important; }
.dash-links-list { flex-direction: column; align-items: stretch; }
.dash-sched .cal-legend { margin-top: 0.6rem; }

.dash-gallery {
  width: min(36rem, calc(100vw - 2rem)); max-height: min(40rem, 85vh); padding: 0; overflow: auto;
  background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--c-shadow-lg); font-family: var(--c-font);
}
.dash-gallery::backdrop { background: rgba(8, 12, 20, 0.45); }
.dash-gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem 0.4rem 1.25rem; }
.console .dash-gallery-head h2 { margin: 0 !important; font-size: 1.1rem; }
.dash-gallery-sub { margin: 0 1.25rem 0.75rem; color: var(--text-dim); font-size: 0.85rem; }
.dash-gallery-list { display: grid; gap: 0.5rem; padding: 0 1.25rem 1.25rem; }
.dash-gallery-item {
  display: grid; gap: 0.15rem; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.dash-gallery-item:hover { border-color: var(--c-indicator); background: var(--c-hover); }
.dash-gallery-name { font-weight: 650; font-size: 0.9rem; }
.dash-gallery-name::before { content: "+ "; color: var(--c-indicator); }
.dash-gallery-about { color: var(--text-dim); font-size: 0.8rem; }

/* Figures */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr)); gap: 0.6rem; }
.kpi {
  display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; padding: 0.7rem 0.85rem;
  background: var(--c-sunken); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font: inherit; text-align: left;
}
button.kpi { cursor: pointer; }
button.kpi:hover { border-color: var(--c-indicator); }
.kpi-label { color: var(--text-dim); font-size: 0.8rem; }
.kpi-value { font-size: 1.55rem; font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.kpi-sub { color: var(--text-dim); font-size: 0.78rem; line-height: 1.35; }
.kpi-good { color: var(--s-ok); }
.kpi-bad { color: var(--s-bad); }
.kpi-warn { color: var(--s-warn); }
.kpi-row-hero .kpi-value { font-size: 2rem; }
.kpi-lines { list-style: none; margin: 0.45rem 0 0; padding: 0.45rem 0 0; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text); display: grid; gap: 0.15rem; }
.dash-figure { margin: 0; font-size: 1.6rem; font-weight: 650; line-height: 1.2; }
.dash-figure-sub { margin: 0 !important; color: var(--text-dim); font-size: 0.8rem; }
.dash-note { margin: 0; color: var(--text-dim); font-size: 0.8rem; line-height: 1.45; }
.dash-note-warn { color: var(--s-warn); }
.dash-empty, .dash-loading { margin: 0; color: var(--text-dim); font-size: 0.875rem; }
.dash-loading { grid-column: 1 / -1; padding: 2rem 0; text-align: center; }
.console .dash-sub { margin: 0.4rem 0 0 !important; font-size: 0.85rem; font-weight: 650; }
.dash-state { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 600; font-size: 0.9rem; }
.dash-state::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--text-dim); }
.dash-state-on::before { background: var(--s-ok); box-shadow: 0 0 0 3px var(--s-ok-bg); }
.dash-state-break::before { background: var(--s-warn); box-shadow: 0 0 0 3px var(--s-warn-bg); }
.dash-rows { list-style: none; margin: 0; padding: 0; }
.dash-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.dash-rows li:last-child { border-bottom: 0; }
.dash-rows-name { min-width: 0; overflow-wrap: anywhere; }
.dash-rows-value { flex-shrink: 0; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }

.dash-attention { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.dash-attention-item {
  display: grid; grid-template-columns: auto auto 1fr; column-gap: 0.6rem; align-items: center; width: 100%;
  padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-left: 3px solid var(--s-warn); border-radius: 6px;
  background: var(--c-sunken); color: var(--text); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer;
}
.dash-attention-item:hover { border-color: var(--c-indicator); border-left-color: var(--s-warn); }
.dash-attention-item strong { font-size: 1.05rem; }
.dash-attention-where { grid-column: 3; color: var(--text-dim); font-size: 0.75rem; }
.dash-attention-item > span:not(.dash-attention-where) { grid-column: 3; grid-row: 1; }
.dash-attention-item strong { grid-column: 2; grid-row: 1 / span 2; min-width: 1.4rem; }
.dash-attention-item::before { grid-row: 1 / span 2; }
.dash-attention-none { display: flex; gap: 0.6rem; align-items: center; color: var(--text-dim); font-size: 0.875rem; }
.dash-ok-mark { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--s-ok-bg); position: relative; }
.dash-ok-mark::after { content: ""; position: absolute; inset: 0.35rem; background: var(--s-ok); -webkit-mask: var(--icon-check) no-repeat center / contain; mask: var(--icon-check) no-repeat center / contain; }
.dash-setup { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.dash-setup button {
  width: 100%; padding: 0.55rem 0.7rem 0.55rem 0.8rem; border: 1px solid var(--border); border-left: 3px solid var(--s-info); border-radius: 6px;
  background: var(--c-sunken); color: var(--text); font: inherit; font-size: 0.85rem; text-align: left; cursor: pointer;
}
.dash-setup button:hover { border-color: var(--c-indicator); border-left-color: var(--s-info); }
.dash-links { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.dash-link {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--c-sunken); color: var(--text); font: inherit; font-size: 0.85rem; cursor: pointer;
}
.dash-link::before { width: 1rem; height: 1rem; background: var(--c-indicator); }
.dash-link:hover { border-color: var(--c-indicator); }
.dash-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.6rem; }
.dash-mod {
  display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; row-gap: 0.15rem; align-content: start;
  padding: 0.8rem 0.9rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card);
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.dash-mod::before { grid-row: span 3; width: 1.3rem; height: 1.3rem; background: var(--c-indicator); }
.dash-mod:hover { border-color: var(--c-indicator); background: var(--c-hover); }
.dash-mod-name { display: flex; align-items: center; gap: 0.5rem; font-weight: 650; font-size: 0.92rem; }
.dash-mod-about { color: var(--text-dim); font-size: 0.8rem; line-height: 1.4; }
.dash-mod-pages { color: var(--c-link); font-size: 0.76rem; line-height: 1.4; }
.dash-me { display: flex; align-items: center; gap: 0.75rem; }
.dash-me-name { margin: 0; font-weight: 650; }
.dash-me-detail { margin: 0; color: var(--text-dim); font-size: 0.82rem; }
.dash-me-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Bars across (most viewed pages) */
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.hbars-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.82rem; margin-bottom: 0.25rem; }
.hbars-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbars-value { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.hbars-bar { height: 0.55rem; border-radius: 4px; background: var(--viz-grid); }
.hbars-fill { height: 100%; border-radius: 0 4px 4px 0; background: var(--viz-2); }

/* A meter (tickets sold of capacity, guests in of tickets) */
.meter-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.3rem; font-size: 0.82rem; }
.meter-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meter-value { flex-shrink: 0; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.meter-track { height: 0.55rem; border-radius: 4px; background: var(--viz-grid); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 0 4px 4px 0; background: var(--viz-2); }
.meter-fill.meter-high { background: var(--viz-1); }

/* Charts */
.viz { position: relative; }
.viz-plot { width: 100%; min-width: 0; }
.viz-svg { display: block; overflow: visible; }
.viz-hit { pointer-events: all; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.viz-base { stroke: var(--viz-base); stroke-width: 1; vector-effect: non-scaling-stroke; }
.viz-axis { fill: var(--text-dim); font-size: 11px; font-family: var(--c-font); }
.viz-end { fill: var(--text); font-size: 12px; font-weight: 650; font-family: var(--c-font); }
.viz-mark.viz-1, .viz-dot.viz-1 { fill: var(--viz-1); }
.viz-mark.viz-2, .viz-dot.viz-2 { fill: var(--viz-2); }
.viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.viz-line.viz-1 { stroke: var(--viz-1); }
.viz-line.viz-2 { stroke: var(--viz-2); }
.viz-area.viz-1 { fill: var(--viz-1); opacity: 0.1; }
.viz-area.viz-2 { fill: var(--viz-2); opacity: 0.1; }
.viz-dot { stroke: var(--card); stroke-width: 2; vector-effect: non-scaling-stroke; }
.viz-hit { fill: transparent; }
.viz-hit:hover { fill: var(--c-hover); opacity: 0.5; }
.viz-cursor { stroke: var(--viz-base); stroke-width: 1; vector-effect: non-scaling-stroke; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-bottom: 0.4rem; font-size: 0.8rem; color: var(--text); }
.viz-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.viz-key { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; }
.viz-key.viz-1 { background: var(--viz-1); }
.viz-key.viz-2 { background: var(--viz-2); }
.viz-table { margin-top: 0.4rem; font-size: 0.78rem; }
.viz-table summary { color: var(--c-link); width: max-content; }
.viz-table table { margin-top: 0.4rem; width: 100%; }
.viz-tip {
  position: fixed; z-index: 90; pointer-events: none; min-width: 9rem; padding: 0.5rem 0.65rem;
  background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--c-shadow-lg);
  font-family: var(--c-font); font-size: 0.8rem;
}
.viz-tip-head { font-weight: 650; margin-bottom: 0.25rem; }
.viz-tip-row { display: flex; align-items: center; gap: 0.4rem; }
.viz-tip-row strong { margin-left: auto; padding-left: 0.75rem; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Administration: Overview and Modules (Version 28)
   --------------------------------------------------------------------- */

.ov-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.ov-grid > .admin-upload-hint, .ov-grid > .dash-empty { grid-column: 1 / -1; }
.ov-banner { grid-column: 1 / -1; padding: 0.9rem 1.1rem; border-radius: 10px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--c-shadow); }
.ov-banner-todo { border-left: 4px solid var(--s-warn); }
.ov-banner-ok { border-left: 4px solid var(--s-ok); }
.ov-banner-title { margin: 0; font-weight: 650; font-size: 1rem; }
.ov-banner-sub { margin: 0.2rem 0 0; color: var(--text-dim); font-size: 0.875rem; }
.ov-todo { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.ov-todo button { display: flex; gap: 0.6rem; align-items: baseline; width: 100%; padding: 0.4rem 0.5rem; border: 0; border-radius: 5px; background: none; color: var(--text); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; }
.ov-todo button::before { content: ""; flex-shrink: 0; width: 0.55rem; height: 0.55rem; border-radius: 50%; transform: translateY(-0.05rem); background: var(--s-info); }
.ov-todo-warn button::before { background: var(--s-warn); }
.ov-todo-bad button::before { background: var(--s-bad); }
.ov-todo button:hover { background: var(--c-hover); }
.ov-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 0.75rem; }
.ov-card {
  display: grid; grid-template-columns: auto 1fr; column-gap: 0.65rem; row-gap: 0.15rem; align-content: start;
  padding: 0.9rem 1rem; border: 1px solid var(--border); border-top: 3px solid var(--s-info); border-radius: 10px;
  background: var(--card); box-shadow: var(--c-shadow); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.ov-card::before { grid-row: span 3; margin-top: 0.1rem; }
.ov-card:hover { background: var(--c-hover); }
.ov-ok { border-top-color: var(--s-ok); }
.ov-warn { border-top-color: var(--s-warn); }
.ov-bad { border-top-color: var(--s-bad); }
.ov-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.ov-card-title { color: var(--text-dim); font-size: 0.82rem; font-weight: 600; }
.ov-card-value { font-size: 1.6rem; font-weight: 650; line-height: 1.2; }
.ov-card-sub { color: var(--text-dim); font-size: 0.78rem; line-height: 1.35; }
.ov-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 650; white-space: nowrap; }
.ov-pill::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }
.ov-pill-ok { color: var(--s-ok); background: var(--s-ok-bg); }
.ov-pill-warn { color: var(--s-warn); background: var(--s-warn-bg); }
.ov-pill-bad { color: var(--s-bad); background: var(--s-bad-bg); }
.ov-pill-info { color: var(--s-info); background: var(--s-info-bg); }
.ov-section { grid-column: span 12; }
.ov-half { grid-column: span 6; }
.ov-events .dash-rows-name { display: grid; }
.ov-event-what { font-weight: 600; }
.ov-event-where { color: var(--text-dim); font-size: 0.78rem; }

.mod-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.5rem; max-width: 52rem; }
.mod-item { display: grid; grid-template-columns: auto 1fr auto; column-gap: 0.8rem; align-items: center; padding: 0.75rem 0.9rem; border: 1px solid var(--border); border-radius: 8px; background: var(--c-sunken); }
.mod-item::before { width: 1.3rem; height: 1.3rem; background: var(--c-indicator); }
.mod-text { display: grid; gap: 0.1rem; min-width: 0; }
.mod-name { font-weight: 650; font-size: 0.92rem; }
.mod-about { color: var(--text-dim); font-size: 0.8rem; }
.console .admin-panel form > .field-row.mod-password { max-width: 22rem; }

/* An on/off switch (a checkbox underneath) */
.console .switch { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; cursor: pointer; font-weight: 600; font-size: 0.82rem; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 2.3rem; height: 1.3rem; border-radius: 999px; background: var(--c-field-border); transition: background 0.15s; }
.switch-track::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.15s; }
.switch input:checked + .switch-track { background: var(--c-accent); }
.switch input:checked + .switch-track::after { transform: translateX(1rem); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.switch-text { min-width: 3rem; }

@media (max-width: 1200px) {
  .dash-w-s { grid-column: span 6; }
  .dash-w-m, .dash-w-w { grid-column: span 12; }
  .ov-half { grid-column: span 12; }
}
@media (max-width: 720px) {
  .console-apps { position: fixed; left: 0.5rem; right: 0.5rem; top: 3.4rem; width: auto; }
  .kpi-row-hero { grid-template-columns: minmax(0, 1fr); }
  .dash-w-s, .dash-w-m, .dash-w-w, .dash-w-l { grid-column: 1 / -1; }
  .dash-packed { grid-auto-rows: auto; row-gap: 1rem; }
  .dash-resize { display: none; }
  .dash-bar { margin-top: 0; justify-content: space-between; }
  .dash-w-head { flex-wrap: wrap; }
  .dash-w-tools { width: 100%; justify-content: flex-end; }
  .kpi-row-hero .kpi-value { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .switch-track, .switch-track::after { transition: none; }
}

/* ---------------------------------------------------------------------
   My Profile
   --------------------------------------------------------------------- */

.console-profile-head { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: 1.25rem; margin-bottom: 1rem; }
.console-profile-who { flex: 1 1 14rem; min-width: 0; }
.console .console-profile-name { margin: 0 !important; font-size: 1.35rem !important; }
.console-profile-line { margin: 0.1rem 0 0.4rem; color: var(--text-dim); }
.console-profile-roles { margin: 0; }
.console-profile-photo { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; max-width: 22rem; }
.console-profile-photo .field-help { flex-basis: 100%; margin: 0; }
.console-profile-photo .inquiry-status { flex-basis: 100%; margin: 0; }
.console-file-btn { position: relative; }
.console-file-btn:focus-within { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.console-profile-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.console-profile-col > * { margin-bottom: 1rem; }
.console-profile-col .admin-form { margin-top: 0; }
.console .console-profile .admin-mfa-card { max-width: none !important; margin-top: 0 !important; }
.console-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1rem; margin: 0 0 1rem; font-size: 0.875rem; }
.console-facts dt { color: var(--text-dim); }
.console-facts dd { margin: 0; overflow-wrap: anywhere; }
.console-theme-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0 0 1rem; padding: 0; border: 0; }
.console-theme-option {
  display: grid; gap: 0.45rem; padding: 0.55rem; border: 1px solid var(--border); border-radius: var(--c-radius);
  font-size: 0.85rem; font-weight: 600; cursor: pointer; position: relative;
}
.console-theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.console-theme-option:has(input:checked) { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.console-theme-option:has(input:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.console-theme-swatch { display: block; height: 3.2rem; border-radius: 5px; border: 1px solid rgba(127, 127, 127, 0.25); }
.console-swatch-light { background: linear-gradient(#0b1838 0 22%, transparent 22%), linear-gradient(90deg, #fff 0 28%, #f3f4f6 28%); }
.console-swatch-dark { background: linear-gradient(#0a0c10 0 22%, transparent 22%), linear-gradient(90deg, #15181d 0 28%, #111418 28%); }
.console-swatch-system { background: linear-gradient(#0b1838 0 22%, transparent 22%), linear-gradient(105deg, #f3f4f6 0 50%, #111418 50%); }
.console-swatch-cc { background: linear-gradient(#8b500e 0 22%, transparent 22%), linear-gradient(90deg, #061733 0 28%, #02112c 28%); }
.console-start-row { margin-bottom: 0.5rem; }
.console-start-row select { width: 100%; }

/* Users page: photo and title beside each person */
.console .admin-user-row { justify-content: flex-start; }
.console .admin-user-row .admin-user-main { flex: 1 1 16rem; min-width: 0; }
.console .admin-user-row .admin-list-row-actions { flex-wrap: wrap; }
.admin-user-title { font-size: 0.85rem; }

/* ---------------------------------------------------------------------
   Search
   --------------------------------------------------------------------- */

.console-search {
  width: min(42rem, calc(100vw - 2rem)); max-height: min(36rem, 80vh);
  margin: 9vh auto auto; padding: 0; overflow: hidden;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--c-shadow-lg);
  font-family: var(--c-font);
}
.console-search[open] { display: flex; flex-direction: column; }
.console-search::backdrop { background: rgba(8, 12, 20, 0.45); }
.console-search-box { display: flex; align-items: center; gap: 0.6rem; padding: 0 1rem 0 2.6rem; border-bottom: 1px solid var(--border); background: var(--icon-search-dim) no-repeat 1rem 50% / 1.1rem; }
.console-search-box input {
  flex: 1; min-width: 0; height: 3.25rem; border: 0; background: none; color: var(--text);
  font: inherit; font-size: 1rem; outline: none;
}
.console-search-box input::-webkit-search-cancel-button { display: none; }
.console-search-box input:focus-visible { outline: none; }
.console-search-box .console-kbd { color: var(--text-dim); }
.console-search-results { flex: 1; overflow-y: auto; padding: 0.4rem; }
.console-search-group-title { margin: 0.6rem 0.6rem 0.25rem; font-size: 0.75rem; font-weight: 600; color: var(--text-dim); }
.console-search-item {
  display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; align-items: center;
  width: 100%; padding: 0.5rem 0.6rem; border: 0; border-radius: 6px; background: none;
  color: var(--text); font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer;
}
.console-search-item::before { grid-row: span 2; }
.console-search-item[aria-selected="true"] { background: var(--c-selected); }
.console-search-item[aria-selected="true"]::before { background: var(--c-accent); }
.console-search-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-search-item-detail { grid-column: 2; color: var(--text-dim); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-search-note { margin: 0.25rem 0.6rem 0.5rem; color: var(--text-dim); font-size: 0.85rem; }
.console-search-foot { margin: 0; padding: 0.55rem 1rem; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 0.75rem; }

/* ---------------------------------------------------------------------
   Narrower screens
   --------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .console-profile-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The side menu becomes a drawer, opened with the button at top left. */
@media (max-width: 900px) {
  .console-menu-btn { display: inline-flex; }
  .console-shell { grid-template-columns: minmax(0, 1fr); background: none; }
  .console-sidebar {
    /* align-self back to normal: Chrome lines up a fixed box by it too. */
    position: fixed; z-index: 35; left: 0; top: 3rem; bottom: 0; height: auto; width: min(18rem, 85vw); align-self: auto;
    transform: translateX(-100%); transition: transform 0.2s ease; visibility: hidden;
    box-shadow: var(--c-shadow-lg);
  }
  .console-nav-open .console-sidebar { transform: none; visibility: visible; }
  .console-scrim { display: block; position: fixed; z-index: 34; inset: 3rem 0 0; background: rgba(8, 12, 20, 0.45); }
  .console-scrim[hidden] { display: none; }
  .console-main { padding: 1rem 1rem 3rem; }
  .console-topbar { padding: 0 0.5rem; gap: 0.4rem; }
}

@media (max-width: 640px) {
  .console-brand-name, .console-brand-module { display: none; }
  .console-search-btn { flex: 0 0 2.25rem; width: 2.25rem; max-width: 2.25rem; padding: 0; margin: 0 0 0 auto; border-color: transparent; background-color: transparent; background-position: center; }
  .console-search-btn > * { display: none; }
  .console .console-page-title { font-size: 1.3rem; }
  .console-signin { padding: 1rem 0.75rem 2rem; }
  .console-signin-body { padding: 1.25rem; }
  .console-theme-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .console-search { margin-top: 0.75rem; max-height: calc(100vh - 1.5rem); }
}

/* Printing (a signed agreement, a QR code): just the thing being printed. */
@media print {
  .console-topbar, .console-sidebar, .console-page-head { display: none !important; }
  .console-shell { display: block; }
}

/* ---------------------------------------------------------------------
   Icons (drawn for this dashboard; used as masks, so they take the
   colour of the text around them).
   --------------------------------------------------------------------- */
:root {
  --icon-star: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3.6 2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/></svg>");
  --icon-menu: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6.5h16M4 12h16M4 17.5h16'/></svg>");
  --icon-contrast: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.2'/><path d='M12 3.8a8.2 8.2 0 0 1 0 16.4z' fill='%23000'/></svg>");
  --icon-apps: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><circle cx='5.5' cy='5.5' r='1.9'/><circle cx='12' cy='5.5' r='1.9'/><circle cx='18.5' cy='5.5' r='1.9'/><circle cx='5.5' cy='12' r='1.9'/><circle cx='12' cy='12' r='1.9'/><circle cx='18.5' cy='12' r='1.9'/><circle cx='5.5' cy='18.5' r='1.9'/><circle cx='12' cy='18.5' r='1.9'/><circle cx='18.5' cy='18.5' r='1.9'/></svg>");
  --icon-bell: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2h-15z'/><path d='M10 20.5a2.2 2.2 0 0 0 4 0'/></svg>");
  --icon-layout: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='7.5' height='9' rx='1.2'/><rect x='13' y='3.5' width='7.5' height='5' rx='1.2'/><rect x='13' y='10.5' width='7.5' height='10' rx='1.2'/><rect x='3.5' y='14.5' width='7.5' height='6' rx='1.2'/></svg>");
  --icon-grip: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 24' fill='%23000'><circle cx='4' cy='6' r='1.4'/><circle cx='8' cy='6' r='1.4'/><circle cx='4' cy='12' r='1.4'/><circle cx='8' cy='12' r='1.4'/><circle cx='4' cy='18' r='1.4'/><circle cx='8' cy='18' r='1.4'/></svg>");
  --icon-left: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 6 8.5 12l6 6'/></svg>");
  --icon-right: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9.5 6 6 6-6 6'/></svg>");
  --icon-close: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'><path d='M6.5 6.5l11 11M17.5 6.5l-11 11'/></svg>");
  --icon-check: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>");
  --icon-star-filled: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3.6 2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/></svg>");
  --icon-search-white: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.8' cy='10.8' r='6.3'/><path d='m20 20-4.6-4.6'/></svg>");
  --icon-search-dim: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.8' cy='10.8' r='6.3'/><path d='m20 20-4.6-4.6'/></svg>");
}
[data-icon="overview"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 15a8 8 0 1 1 16 0'/><path d='m12 15 3.5-4.5'/><path d='M4 19h16'/></svg>"); }
[data-icon="modules"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='7' height='7' rx='1.5'/><rect x='13.5' y='3.5' width='7' height='7' rx='1.5'/><rect x='3.5' y='13.5' width='7' height='7' rx='1.5'/><path d='M17 13.5v7M13.5 17h7'/></svg>"); }
[data-icon="mod-website"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M3.5 12h17M12 3.5c2.4 2.5 3.5 5.3 3.5 8.5s-1.1 6-3.5 8.5c-2.4-2.5-3.5-5.3-3.5-8.5S9.6 6 12 3.5z'/></svg>"); }
[data-icon="mod-events"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8.5V6.5A1.5 1.5 0 0 1 5.5 5h13A1.5 1.5 0 0 1 20 6.5v2a2.5 2.5 0 0 0 0 5v2a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 17.5v-2a2.5 2.5 0 0 0 0-5z' transform='translate(0 0.5)'/><path d='M14.5 6v13' stroke-dasharray='1.6 2'/></svg>"); }
[data-icon="mod-food"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3.5v17M4.5 3.5v4.5a2.5 2.5 0 0 0 5 0V3.5'/><path d='M16.5 20.5v-17c-2 1-3 3.5-3 7 0 1.6.8 2.5 3 2.5'/></svg>"); }
[data-icon="mod-staff"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.5' r='3.2'/><path d='M3.5 19.5a5.5 5.5 0 0 1 11 0'/><circle cx='16.8' cy='9.3' r='2.5'/><path d='M15.5 14.2a4.6 4.6 0 0 1 5.5 4.6'/></svg>"); }
[data-icon="mod-marketing"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10v4h3l6 4V6L7 10z'/><path d='M16.5 9a4 4 0 0 1 0 6M19 6.5a7.5 7.5 0 0 1 0 11'/></svg>"); }
[data-icon="mod-insights"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V4M4 20h16'/><path d='m7.5 15 3.5-4 3 2.5 5-6'/></svg>"); }
[data-icon="mod-admin"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5 5 6.3v5.2c0 4.2 2.9 7.6 7 9 4.1-1.4 7-4.8 7-9V6.3z'/><path d='m9 12 2.2 2.2L15.5 10'/></svg>"); }
[data-icon="mod-account"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8.5' r='3.8'/><path d='M4.5 20a7.5 7.5 0 0 1 15 0'/></svg>"); }
[data-icon="home"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 11 12 4l8.5 7'/><path d='M5.5 9.5V20h5v-6h3v6h5V9.5'/></svg>"); }
[data-icon="events"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='2'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg>"); }
[data-icon="tickets"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 7.5a1 1 0 0 1 1-1h15a1 1 0 0 1 1 1v2.2a2.3 2.3 0 0 0 0 4.6v2.2a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1v-2.2a2.3 2.3 0 0 0 0-4.6z'/><path d='M14.5 7v1.6M14.5 11.2v1.6M14.5 15.4V17'/></svg>"); }
[data-icon="door"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 20.5V4.5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v16M3.5 20.5h17'/><circle cx='14.3' cy='12.3' r='.9' fill='%23000' stroke='none'/></svg>"); }
[data-icon="local"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20.5s-6.5-5.8-6.5-10.4a6.5 6.5 0 0 1 13 0c0 4.6-6.5 10.4-6.5 10.4z'/><circle cx='12' cy='10' r='2.4'/></svg>"); }
[data-icon="hosting"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5v3M12 17.5v3M3.5 12h3M17.5 12h3M6 6l2.1 2.1M15.9 15.9 18 18M6 18l2.1-2.1M15.9 8.1 18 6'/><circle cx='12' cy='12' r='2.3'/></svg>"); }
[data-icon="orders"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3.5h12v17l-2.4-1.6-2.4 1.6-2.4-1.6-2.4 1.6L6 20.5z'/><path d='M9 8h6M9 11.5h6M9 15h3.5'/></svg>"); }
[data-icon="menus"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3.5v17M4.8 3.5V8a2.2 2.2 0 0 0 4.4 0V3.5M17.5 20.5V3.5c-2.3.6-3.5 3-3.5 6.2 0 2.2 1.2 3.4 3.5 3.4'/></svg>"); }
[data-icon="queerpdx"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5.5 20.5V4M5.5 4.5h12l-2.4 4.2 2.4 4.3h-12'/></svg>"); }
[data-icon="reviews"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3.6 2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/></svg>"); }
[data-icon="photos"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='14' rx='2'/><circle cx='9' cy='10' r='1.6'/><path d='m20.5 15.5-4.5-4.5-8.5 8'/></svg>"); }
[data-icon="videos"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='6' width='12.5' height='12' rx='2'/><path d='m16 10.2 4.5-2.7v9l-4.5-2.7'/></svg>"); }
[data-icon="theme"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5a8.5 8.5 0 1 0 0 17c1 0 1.5-.7 1.5-1.5 0-.9-.6-1.2-.6-2 0-.9.7-1.5 1.5-1.5h2a4.1 4.1 0 0 0 4.1-4.1C20.5 7 16.7 3.5 12 3.5z'/><circle cx='7.8' cy='11.2' r='1' fill='%23000' stroke='none'/><circle cx='10' cy='7.4' r='1' fill='%23000' stroke='none'/><circle cx='14.6' cy='7.6' r='1' fill='%23000' stroke='none'/></svg>"); }
[data-icon="forms"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='4.5' width='14' height='16' rx='2'/><path d='M9 3.5h6v2.5H9zM8.5 10.5h7M8.5 14h7M8.5 17.5h4'/></svg>"); }
[data-icon="releases"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 4.5h9l4 4V19a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 19V6a1.5 1.5 0 0 1 1-1.5z'/><path d='M14 4.5V8.5h4M7 16c1.2-1.6 2-1.6 2.6-.4.5 1 1.1 1 1.9-.2.6-.9 1.2-.9 1.7 0 .4.6 1 .7 1.8.2'/></svg>"); }
[data-icon="applications"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='7.5' width='17' height='12.5' rx='2'/><path d='M9 7.5V5.5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M3.5 12.5h17'/></svg>"); }
[data-icon="subscribers"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5.5' width='17' height='13' rx='2'/><path d='m4 7 8 6 8-6'/></svg>"); }
[data-icon="broadcast"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10v4h3l8 4.5v-13L7 10z'/><path d='M18.3 9a4 4 0 0 1 0 6'/></svg>"); }
[data-icon="visitors"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 20.5h17M6 20.5V12M10.7 20.5V5M15.3 20.5v-9M20 20.5V9'/></svg>"); }
[data-icon="users"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.5' r='3.2'/><path d='M3.5 19.5c0-3.2 2.5-5.6 5.5-5.6s5.5 2.4 5.5 5.6M15.5 5.6a3 3 0 0 1 0 5.8M17.5 14.3c1.8.7 3 2.6 3 5.2'/></svg>"); }
[data-icon="keys"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='15.5' r='4'/><path d='m10.9 12.6 8.6-8.6M16.5 7l2.2 2.2M14.3 9.2l1.8 1.8'/></svg>"); }
[data-icon="monitoring"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 5 6v5c0 4.4 3 8.3 7 9.5 4-1.2 7-5.1 7-9.5V6z'/><path d='M8.5 12.5h2l1.2-2.6 1.6 4.6 1.2-2h1.9'/></svg>"); }
[data-icon="bin"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16M9.5 7V4.5h5V7M6.2 7l.9 13h9.8l.9-13M10 11v5.5M14 11v5.5'/></svg>"); }
[data-icon="security"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5 19.5 6v5.6c0 4.4-3.1 7.9-7.5 8.9-4.4-1-7.5-4.5-7.5-8.9V6z'/><path d='m9 12 2.1 2.1L15.2 10'/></svg>"); }
[data-icon="signins"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M10 4H6.5A1.5 1.5 0 0 0 5 5.5v13A1.5 1.5 0 0 0 6.5 20H10M14 8l4 4-4 4M18 12H9'/></svg>"); }
[data-icon="mytime"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 7.5V12l3 2'/></svg>"); }
[data-icon="calendar"], [data-icon="mod-calendar"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='2'/><path d='M3.5 9.5h17M8 3v4M16 3v4'/><path d='M7.5 13h2M11 13h2M14.5 13h2M7.5 16.5h2M11 16.5h2'/></svg>"); }
[data-icon="teamtime"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15' rx='1.5'/><path d='M3.5 9.5h17M8 3v4M16 3v4M7 13h3M7 16.5h3M13 13h4M13 16.5h4'/></svg>"); }
[data-icon="profile"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8.5' r='4'/><path d='M4.5 20.5c0-4.1 3.4-7 7.5-7s7.5 2.9 7.5 7'/></svg>"); }

/* Version 24: "Forgot your password or username?" and the reset form. */
.console-signin-forgot { margin: 14px 0 0; text-align: center; }
.btn-link {
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  font: inherit; font-size: 0.92rem; color: var(--c-accent, #2e6be6);
  text-decoration: underline; text-underline-offset: 3px;
}
.btn-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }
.console-reset-methods { border: 0; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.console-reset-methods legend { font-weight: 600; margin-bottom: 6px; }
.console-reset-methods label { display: flex; align-items: center; gap: 8px; }
.admin-duty-owner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.admin-duty-owner label { font-weight: 600; font-size: 0.9rem; }
.console-signin-kitchen { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-border, #d9dce3); display: grid; justify-items: center; gap: 6px; text-align: center; }
.console-signin-kitchen .btn { min-width: 220px; }


/* ------------------------------------------------------------------
   Version 25: Security Monitoring
   ------------------------------------------------------------------ */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sec-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin: 0.75rem 0; }
.sec-stat { border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 0.9rem; background: var(--card); }
.sec-stat-n { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sec-stat-label { display: block; font-size: 0.85rem; color: var(--text-dim); margin-top: 0.15rem; }
.sec-stat-week { display: block; font-size: 0.8rem; color: var(--text-dim); margin-top: 0.35rem; }
.sec-stat-bad .sec-stat-n { color: var(--c-danger, #c0392b); }
.sec-top-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.sec-top-list button { background: none; border: 0; padding: 0; font: inherit; color: var(--c-accent); text-decoration: underline; cursor: pointer; }
.sec-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 0.9rem; }
.sec-filter-q { grid-column: span 2; }
@media (max-width: 520px) { .sec-filter-q { grid-column: auto; } }
.sec-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; margin-top: 0.75rem; }
.sec-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.sec-table th { text-align: left; font-weight: 600; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); background: var(--c-sunken); white-space: nowrap; position: sticky; top: 0; }
.sec-table td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.sec-table tbody tr.sec-row { cursor: pointer; }
.sec-table tbody tr.sec-row:hover, .sec-table tbody tr.sec-row:focus-visible { background: var(--c-hover, rgba(127, 127, 127, 0.08)); outline: none; }
.sec-table .sec-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sec-pill { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.sec-pill-success { background: #dff3e4; color: #14532d; }
.sec-pill-failure { background: #fde2dd; color: #8a1d0e; }
.sec-pill-locked { background: #fde2dd; color: #8a1d0e; border: 1px solid #c0392b; }
.sec-pill-blocked { background: #fff1c7; color: #6b4b00; }
.sec-pill-info { background: #e6e9f0; color: #2c3344; }
.sec-detail td { background: var(--c-sunken); }
.sec-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0; font-size: 0.85rem; }
.sec-detail dt { color: var(--text-dim); }
.sec-detail dd { margin: 0; overflow-wrap: anywhere; }
.sec-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.75rem; }
.sec-settings > summary { cursor: pointer; list-style: revert; }
.sec-settings > summary h3 { display: inline; }
.sec-settings h4 { margin: 1.1rem 0 0.4rem; }
.sec-num-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.sec-alert-rows { display: grid; gap: 0.45rem; }
.sec-alert-row input[type="number"] { width: 4.5rem; padding: 0.2rem 0.35rem; }

/* ------------------------------------------------------------------
   Version 25: Home, a panel of figures per role
   ------------------------------------------------------------------ */
.console-roles { display: grid; gap: 1rem; margin-bottom: 1rem; }
.console-roles:empty { display: none; }
.role-panel { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 1rem 1.1rem 1.1rem; }
.role-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.role-panel-head h2 { margin: 0; font-size: 1.1rem; }
.role-panel-head p { margin: 0; color: var(--text-dim); font-size: 0.85rem; }
.role-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.7rem; }
.role-tile { border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.85rem; background: var(--navy); display: grid; gap: 0.15rem; align-content: start; text-align: left; font: inherit; color: inherit; }
button.role-tile { cursor: pointer; }
button.role-tile:hover { border-color: var(--c-accent); }
.role-tile-n { font-size: 1.5rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.role-tile-label { font-size: 0.85rem; color: var(--text-dim); }
.role-tile-sub { font-size: 0.78rem; color: var(--text-dim); }
.role-up { color: #1d7a3a; }
.role-down { color: #b4271a; }
.role-sales { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.7rem; margin-bottom: 0.7rem; }
.role-sales-span { border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 0.9rem; }
.role-sales-span h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.role-sales-total { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.role-sales-lines { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: 0.15rem; font-size: 0.85rem; }
.role-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.9rem; }
.role-list li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
.role-note { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--text-dim); }
.role-setup { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.role-setup button { background: none; border: 0; padding: 0; font: inherit; color: var(--c-accent); text-align: left; cursor: pointer; text-decoration: underline; }
.role-subhead { margin: 1rem 0 0.4rem; font-size: 0.95rem; }

/* Version 25: the Clover card's longer choices, one per line, and the menu kept in step with Clover. */
.admin-print-modes, .admin-menu-sync-parts { flex-direction: column; align-items: flex-start; }
.admin-print-modes label, .admin-menu-sync-parts label { align-items: flex-start; }
.admin-print-modes input, .admin-menu-sync-parts input { margin-top: 0.3em; }
.admin-print-explain { padding-left: 1.2rem; }
.admin-print-explain li { margin: 0 0 0.4rem; }
.admin-menu-sync { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--admin-line, rgba(127, 127, 127, 0.3)); }
.admin-menu-sync-parts.is-off { opacity: 0.55; }
.admin-menu-sync-recent { list-style: none; padding: 0; margin: 0; font-size: 0.92rem; }
.admin-menu-sync-recent li { padding: 0.35rem 0; border-bottom: 1px solid var(--admin-line, rgba(127, 127, 127, 0.2)); }
.admin-menu-sync-recent li span { opacity: 0.75; }

/* ---------------------------------------------------------------------
   Security page (Version 27): the two-step methods in one card, a row
   each, beside the sign-ins. One column below 1100px.
   --------------------------------------------------------------------- */
.console .sec-layout { display: grid; gap: 1rem; align-items: start; margin-top: 0.25rem; }
@media (min-width: 1100px) { .console .sec-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.console .sec-layout .admin-mfa-card { margin: 0; }
.console .sec-side { display: grid; gap: 1rem; }
.console .sec-card-head { margin: 0 0 0.9rem; }
.console .sec-card-head h3 { margin: 0 0 0.25rem; }
.console .sec-card-head p { margin: 0; }
.console .sec-summary { font-size: 0.9rem; padding-left: 0.6rem; border-left: 3px solid var(--border); color: var(--text-dim); }
.console .sec-summary-ok { border-left-color: #2f9e5b; }
.console .sec-summary-warn { border-left-color: var(--c-accent); color: var(--text); }

.console .sec-confirm { background: var(--c-sunken); border: 1px solid var(--border); border-radius: 10px; padding: 0.85rem 1rem; margin: 0 0 0.5rem; }
.console .sec-confirm .field-row { margin: 0 0 0.4rem; }
.console .sec-confirm label, .console .sec-signout label { display: block; font-weight: 600; margin: 0 0 0.35rem; }
.console .sec-confirm input[type="password"], .console .sec-signout input[type="password"] { width: 100%; max-width: 22rem; }
.console .sec-confirm .admin-upload-hint { margin: 0; font-size: 0.85rem; }

.console .sec-method { padding: 1rem 0; border-top: 1px solid var(--border); }
.console .sec-method:last-child { padding-bottom: 0.15rem; }
.console .sec-method-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.6rem 1rem; }
.console .sec-method-text { flex: 1 1 16rem; min-width: 0; }
.console .sec-method h4 { margin: 0 0 0.2rem; font-size: 0.98rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.console .sec-method-text p { margin: 0; color: var(--text-dim); font-size: 0.9rem; }
.console .sec-method-actions { margin: 0; flex: 0 0 auto; }
.console .sec-method [data-sec-totp-panel] { margin-top: 0.85rem; }
.console .sec-pill { font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.5rem; border-radius: 999px; line-height: 1.4; }
.console .sec-pill:empty { display: none; }
.console .sec-pill-on { background: rgba(47, 158, 91, 0.16); color: #2f9e5b; }
.console .sec-pill-off { background: var(--c-sunken); color: var(--text-dim); border: 1px solid var(--border); }
.console .sec-keys-list:not(:empty) { margin-top: 0.75rem; }
.console .sec-keys-list > .admin-upload-hint { display: none; }
.console .sec-key-add { margin-top: 0.75rem; }
.console .sec-key-add form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; margin: 0; }
.console .sec-key-add .field-row { flex: 1 1 14rem; margin: 0; }
.console .sec-key-add label { font-weight: 400; font-size: 0.85rem; color: var(--text-dim); }
/* Version 32: a row per app, passkey or key, renamed in place. */
.console .sec-method-row { gap: 0.75rem; }
.console .sec-method-row-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.console .sec-method-row-text .admin-badge { margin-left: 0.25rem; vertical-align: 0.1em; }
.console .sec-method-row .admin-list-row-actions { flex-wrap: wrap; }
.console .sec-rename { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; }
.console .sec-rename input { flex: 1 1 12rem; min-width: 0; }
.console .sec-key-add .admin-mfa-totp-setup { margin-top: 0.25rem; }
.console .admin-mfa-moved { border-color: var(--c-warn, #b7791f); }

.console .sec-signout { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; margin: 0; }
.console .sec-signout .field-row { flex: 1 1 16rem; margin: 0; }
.console .sec-signout .inquiry-status { flex-basis: 100%; }

/* Sign-ins (here and on the Users page) */
.signin-list { list-style: none; margin: 0; padding: 0; }
.signin-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 0.25rem 0.9rem; align-items: start; padding: 0.6rem 0; border-top: 1px solid var(--border); }
.signin-row:first-child { border-top: 0; padding-top: 0.1rem; }
.signin-when, .signin-what { display: grid; min-width: 0; }
.signin-day { font-weight: 600; font-size: 0.88rem; }
.signin-time, .signin-meta { color: var(--text-dim); font-size: 0.82rem; }
.signin-device { font-size: 0.92rem; }
.signin-meta { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.signin-badge { align-self: center; white-space: nowrap; }
.signin-new { box-shadow: inset 3px 0 0 var(--c-accent); padding-left: 0.6rem; }
@media (max-width: 520px) {
  .signin-row { grid-template-columns: minmax(0, 1fr) auto; }
  .signin-when { grid-column: 1 / -1; display: flex; gap: 0.5rem; }
}

/* Version 27: Sign-in History */
.console .sec-signins-summary .btn { margin-top: 0.1rem; }
.console .signins-page { margin: 0; }
.signin-row { grid-template-columns: 7.5rem minmax(0, 1fr) auto; }
.signin-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; align-self: start; }
.signin-state { font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.signin-state-this { background: var(--s-ok-bg); color: var(--s-ok); }
.signin-state-active { background: var(--s-info-bg); color: var(--s-info); }
.signin-state-ended { background: var(--c-sunken); color: var(--text-dim); border: 1px solid var(--border); }
.signin-reported { background: var(--s-bad-bg); color: var(--s-bad); }
.signin-is-reported { box-shadow: inset 3px 0 0 #c25050; padding-left: 0.6rem; }
.signin-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.signin-actions .btn { padding: 0.3rem 0.7rem; font-size: 0.82rem; }
.signin-danger { color: var(--text-dim) !important; }
.signin-danger:hover, .signin-danger:focus-visible { color: #c25050 !important; border-color: rgba(194, 80, 80, 0.6) !important; }
.console .signins-report { margin-top: 1rem; border-color: rgba(194, 80, 80, 0.55); box-shadow: inset 4px 0 0 #c25050; }
.console .signins-steps { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: 0.35rem; font-size: 0.92rem; }
.console .signins-report .sec-signout { justify-content: flex-start; }
.console .signins-report .sec-signout .field-row { flex: 0 1 22rem; }
.console .signins-report .sec-signout .btn { flex: 0 0 auto; }
@media (max-width: 520px) {
  .signin-row { grid-template-columns: minmax(0, 1fr); }
  .signin-badges { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------
   Photo albums (Version 28): one row of photos per album, as on the
   website, with arrows, and a viewer for one photo at a time.
   --------------------------------------------------------------------- */
.console .admin-album-card { padding: 0.25rem 0 1rem; margin: 0 0 1rem; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; box-shadow: none; }
.console .admin-album-card:last-child { border-bottom: 0; margin-bottom: 0; }
.console .admin-album-card > .admin-list-row { background: none; border: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
.admin-album-count { margin-left: 0.75rem; color: var(--text-dim); font-size: 0.82rem; font-weight: 400; }
.album-strip-wrap { position: relative; display: flex; align-items: center; gap: 0.4rem; margin: 0.25rem 0 0.6rem; }
.console .album-strip {
  flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; gap: 0.5rem; margin: 0;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: 0.4rem;
}
.console .album-strip .admin-album-photo { flex: 0 0 auto; width: 112px; height: 112px; scroll-snap-align: start; }
.admin-album-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.admin-album-open img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-album-open:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.album-strip-nav, .album-viewer-nav {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0;
  border: 1px solid var(--border); border-radius: 50%; background: var(--card); color: var(--text); cursor: pointer; box-shadow: var(--c-shadow);
}
.album-strip-nav::before, .album-viewer-nav::before { content: ""; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; }
.album-strip-prev { --icon: var(--icon-left); }
.album-strip-next { --icon: var(--icon-right); }
.album-strip-nav:hover:not(:disabled), .album-viewer-nav:hover:not(:disabled) { background: var(--c-hover); }
.album-strip-nav:disabled, .album-viewer-nav:disabled { opacity: 0.3; cursor: default; }
.album-empty { margin: 0.25rem 0 0.5rem; }
.album-viewer {
  width: min(70rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; overflow: hidden;
  background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--c-shadow-lg); font-family: var(--c-font);
}
.album-viewer[open] { display: flex; flex-direction: column; }
.album-viewer::backdrop { background: rgba(4, 8, 16, 0.75); }
.album-viewer-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem 0.6rem 1.1rem; border-bottom: 1px solid var(--border); }
.album-viewer-caption { flex: 1; margin: 0; font-weight: 600; font-size: 0.92rem; }
.console .album-viewer-delete:hover { color: var(--s-bad); border-color: var(--s-bad); }
.album-viewer-stage { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.75rem; min-height: 0; background: var(--c-sunken); }
.album-viewer-stage img { max-width: calc(100% - 6rem); max-height: calc(100vh - 8rem); object-fit: contain; border-radius: 6px; display: block; }
.album-viewer-nav { width: 2.6rem; height: 2.6rem; }
@media (max-width: 600px) {
  .admin-album-count { display: block; margin: 0.15rem 0 0; }
  .album-strip-nav { display: none; }
  .console .album-strip .admin-album-photo { width: 92px; height: 92px; }
  .album-viewer-stage { gap: 0.3rem; padding: 0.4rem; }
  .album-viewer-stage img { max-width: calc(100% - 5rem); }
}

/* ---------------------------------------------------------------
   Version 30: the calendar (calendar-view.js), on the Calendar page,
   My Time, Team Time and Home. Each layer has its own colour, shown as a
   bar beside the item and as a dot; the text stays in the text colour.
   --------------------------------------------------------------- */
:root {
  --cal-events: #d9a34c; --cal-mine: #6cb3e6; --cal-team: #6fd6e0;
  --cal-interviews: #cbb2ff; --cal-hosting: #f5a3d0; --cal-sends: #a3adc3;
}
:root[data-console-theme="light"] {
  --cal-events: #b06a12; --cal-mine: #1f6f9e; --cal-team: #0d7480;
  --cal-interviews: #6236b3; --cal-hosting: #a3326e; --cal-sends: #5f6b80;
}
.cal-events { --cal: var(--cal-events); }
.cal-mine { --cal: var(--cal-mine); }
.cal-team { --cal: var(--cal-team); }
.cal-interviews { --cal: var(--cal-interviews); }
.cal-hosting { --cal: var(--cal-hosting); }
.cal-sends { --cal: var(--cal-sends); }
.cal-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--cal, var(--text-dim)); flex-shrink: 0; }

.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.cal-views { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cal-view-btn { font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.45rem 0.9rem; background: transparent; color: var(--text-dim); border: 0; cursor: pointer; }
.cal-view-btn + .cal-view-btn { border-left: 1px solid var(--border); }
.cal-view-btn[aria-pressed="true"] { background: var(--c-selected); color: var(--text); }
.cal-nav { display: flex; align-items: center; gap: 0.4rem; }
.console .cal-label { margin: 0 0.35rem !important; min-width: 11rem; text-align: center; font-size: 1.05rem !important; font-weight: 650; color: var(--text); }
.cal-step { min-width: 2.4rem; }
.cal-layers { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; border: 0; padding: 0; margin: 0 0 0.9rem; }
.cal-layer { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text); cursor: pointer; }
.cal-layer input { margin: 0; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; font-size: 0.78rem; color: var(--text-dim); margin-top: 0.5rem; }
.cal-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }

.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1rem; align-items: start; }
.cal-is-week .cal-layout { grid-template-columns: minmax(0, 1fr); }
.cal-is-week .cal-side { display: none; }
.cal-side { position: sticky; top: 4.5rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 1rem; }
.console .cal-agenda-title { margin: 0 0 0.6rem !important; font-size: 0.95rem !important; }
.cal-agenda-list, .cal-upcoming { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.cal-none { color: var(--text-dim); font-size: 0.85rem; margin: 0; }

/* The month grid */
.cal-month { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cal-month-head, .cal-month-body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow { padding: 0.45rem 0.5rem; font-size: 0.75rem; font-weight: 650; color: var(--text-dim); border-bottom: 1px solid var(--border); background: var(--c-section-head, transparent); }
.cal-day { min-height: 6.6rem; padding: 0.3rem 0.35rem 0.4rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; cursor: pointer; }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-month-body .cal-day:nth-last-child(-n + 7) { border-bottom: 0; }
.cal-out { background: var(--c-sunken, transparent); }
.cal-out .cal-day-num { color: var(--text-dim); }
.cal-day-num { align-self: flex-start; font: inherit; font-size: 0.8rem; font-weight: 650; color: var(--text); background: none; border: 0; border-radius: 999px; min-width: 1.7rem; height: 1.7rem; padding: 0 0.35rem; cursor: pointer; }
.cal-day-num:hover { background: var(--c-hover); }
.cal-today .cal-day-num { background: var(--c-accent, var(--gold)); color: #fff; }
.cal-selected { box-shadow: inset 0 0 0 2px var(--c-focus, var(--gold-light)); }
.cal-day-items { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; }
.cal-dots { display: none; gap: 0.2rem; flex-wrap: wrap; padding-left: 0.3rem; }
.cal-more { font: inherit; font-size: 0.72rem; color: var(--c-link, var(--gold-light)); background: none; border: 0; padding: 0 0.2rem; text-align: left; cursor: pointer; }

/* One item: a bar in its layer's colour, the time, the title. */
.cal-chip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35rem; width: 100%; min-width: 0; text-align: left; font: inherit; font-size: 0.74rem; line-height: 1.3; color: var(--text); background: color-mix(in srgb, var(--cal) 12%, transparent); border: 0; border-left: 3px solid var(--cal); border-radius: 4px; padding: 0.12rem 0.35rem; }
button.cal-chip { cursor: pointer; }
button.cal-chip:hover { background: color-mix(in srgb, var(--cal) 22%, transparent); }
.cal-chip-time { color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-chip-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.cal-chip-detail { flex-basis: 100%; color: var(--text-dim); font-size: 0.72rem; }
.cal-day .cal-chip-time { display: none; }
.cal-is-draft, .cal-is-pending { background: transparent; border-left-style: dashed; outline: 1px dashed color-mix(in srgb, var(--cal) 55%, transparent); outline-offset: -1px; }
.cal-agenda .cal-chip, .cal-week .cal-chip, .cal-upcoming .cal-chip { font-size: 0.84rem; padding: 0.35rem 0.55rem; }
.cal-agenda .cal-chip-title, .cal-week .cal-chip-title, .cal-upcoming .cal-chip-title { white-space: normal; }

/* The week list */
.cal-week { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cal-week-day { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); }
.cal-week-day:last-child { border-bottom: 0; }
.cal-week-date { display: flex; flex-direction: column; }
.cal-week-dow { font-weight: 650; }
.cal-week-num { color: var(--text-dim); font-size: 0.82rem; }
.cal-week-day.cal-today .cal-week-dow { color: var(--c-accent, var(--gold)); }
.cal-week-items { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.cal-upcoming-day { font-size: 0.75rem; font-weight: 650; color: var(--text-dim); margin-top: 0.35rem; }
.cal-upcoming-day:first-child { margin-top: 0; }

@media (max-width: 900px) {
  .cal-layout { grid-template-columns: minmax(0, 1fr); }
  .cal-side { position: static; }
}
@media (max-width: 640px) {
  .cal-day { min-height: 3.4rem; padding: 0.2rem; }
  .cal-day-items { display: none; }
  .cal-dots { display: flex; }
  .cal-dow { padding: 0.35rem 0.2rem; text-align: center; }
  .cal-day-num { align-self: center; }
  .console .cal-label { min-width: 0; font-size: 0.95rem !important; }
  .cal-week-day { grid-template-columns: 4.5rem minmax(0, 1fr); padding: 0.6rem 0.7rem; }
}
/* A small calendar inside a Home widget or My Time: dots only. */
.cal-compact .cal-day { min-height: 2.9rem; padding: 0.15rem; }
.cal-compact .cal-day-items { display: none; }
.cal-compact .cal-dots { display: flex; justify-content: center; padding: 0; }
.cal-compact .cal-day-num { align-self: center; font-size: 0.75rem; min-width: 1.5rem; height: 1.5rem; }
.cal-compact .cal-dow { text-align: center; padding: 0.3rem 0.1rem; }
/* Customize: the title on its own line, the tools (and the gear) under it. */
.dash-editing .dash-w-head { flex-wrap: wrap; row-gap: 0.4rem; }
.console .dash-editing .dash-w-title { flex-basis: 100%; }
.dash-editing .dash-gear { order: 2; }
.dash-editing .dash-w-tools { order: 3; margin-left: auto; }

/* ---------------------------------------------------------------------------
   Security page (Version 32): one list of the methods you've added, Add
   Method in a dialog, and the dialog for removing and new recovery codes.
   --------------------------------------------------------------------------- */
.console .sec-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; }
.console .sec-head-text { flex: 1 1 16rem; min-width: 0; }
.console .sec-head h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.console .sec-head p { margin: 0; color: var(--text-dim); font-size: 0.9rem; }
.console .sec-add-btn { flex: 0 0 auto; }
.console .sec-add-btn::before { content: "+"; margin-right: 0.4rem; font-weight: 700; }

.console .sec-status { display: flex; gap: 0.55rem; align-items: baseline; margin: 1rem 0 0; padding: 0.65rem 0.85rem; border-radius: 8px; font-size: 0.88rem; line-height: 1.45; }
.console .sec-status:empty { display: none; }
.console .sec-status::before { content: ""; flex: 0 0 auto; width: 0.55rem; height: 0.55rem; border-radius: 50%; transform: translateY(-0.05rem); }
.console .sec-status-ok { background: var(--s-ok-bg); color: var(--text); }
.console .sec-status-ok::before { background: var(--s-ok); }
.console .sec-status-warn { background: var(--s-warn-bg); color: var(--text); }
.console .sec-status-warn::before { background: var(--s-warn); }
.console .sec-methods > [data-sec-status] { margin: 0.75rem 0 0; }

.console .sec-list { list-style: none; margin: 1rem 0 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.console .sec-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.25rem 0.9rem; align-items: center; padding: 0.85rem 1rem; }
.console .sec-row + .sec-row, .console .sec-row + .sec-empty { border-top: 1px solid var(--border); }
.console .sec-row-stale { background: var(--s-warn-bg); }
.console .sec-row-icon { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--c-selected); color: var(--c-selected-ink); }
.console .sec-row-icon svg { width: 1.35rem; height: 1.35rem; }
.console .sec-row-main { min-width: 0; }
.console .sec-row-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.95rem; overflow-wrap: anywhere; }
.console .sec-row-meta { color: var(--text-dim); font-size: 0.8rem; line-height: 1.45; }
.console .sec-row-actions { display: flex; gap: 0.25rem; }
.console .sec-tag { font-size: 0.72rem; font-weight: 600; padding: 0.08rem 0.45rem; border-radius: 999px; }
.console .sec-tag-warn { background: var(--s-warn-bg); color: var(--warn-fg); border: 1px solid var(--s-warn); }
.console .sec-empty { padding: 1.1rem 1rem; color: var(--text-dim); font-size: 0.9rem; }
.console .sec-link { border: 0; background: none; padding: 0.35rem 0.55rem; border-radius: 6px; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--c-link); cursor: pointer; }
.console .sec-link:hover { background: var(--c-hover); }
.console .sec-link-danger { color: var(--bad-fg); }
.console .sec-rename { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; }
.console .sec-rename input { flex: 1 1 10rem; min-width: 0; }

.console .sec-recovery { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.console .sec-recovery-text { flex: 1 1 16rem; min-width: 0; }
.console .sec-recovery h4 { margin: 0 0 0.15rem; font-size: 0.95rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.console .sec-recovery p { margin: 0; color: var(--text-dim); font-size: 0.85rem; }

.sec-dialog {
  width: min(32rem, calc(100vw - 2rem)); max-height: min(44rem, 90vh); padding: 0; overflow: auto;
  background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--c-shadow-lg); font-family: var(--c-font);
}
.sec-dialog::backdrop { background: rgba(8, 12, 20, 0.5); }
.sec-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1rem 0.25rem 1.25rem; }
.console .sec-dialog-head h2, .sec-dialog-head h2 { margin: 0 !important; font-size: 1.1rem; }
.sec-dialog-body { padding: 0.5rem 1.25rem 1.25rem; }
.sec-dialog-lede { margin: 0 0 1rem; color: var(--text-dim); font-size: 0.9rem; }
.sec-dialog-form { margin: 0; }
.sec-dialog-form .field-row { margin: 0 0 0.9rem; }
.sec-dialog-form input[type="text"], .sec-dialog-form input[type="password"] { width: 100%; }
.sec-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.sec-dialog .inquiry-status { margin: 0.25rem 0 0; }
.sec-choices { display: grid; gap: 0.5rem; }
.sec-choice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; align-items: center; text-align: left;
  padding: 0.8rem 0.9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font: inherit; cursor: pointer;
}
.sec-choice:hover:not(:disabled) { border-color: var(--c-indicator); background: var(--c-hover); }
.sec-choice:disabled { opacity: 0.55; cursor: not-allowed; }
.sec-choice-text { display: grid; gap: 0.15rem; }
.sec-choice-text strong { font-size: 0.95rem; }
.sec-choice-text span { color: var(--text-dim); font-size: 0.82rem; line-height: 1.4; }
.sec-dialog .sec-row-icon { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--c-selected); color: var(--c-selected-ink); }
.sec-dialog .sec-row-icon svg { width: 1.25rem; height: 1.25rem; }
.sec-steps { margin: 0 0 0.75rem; padding-left: 1.2rem; font-size: 0.9rem; }
.sec-steps li { margin: 0 0 0.35rem; }
.sec-qr { display: block; width: 11rem; height: 11rem; margin: 0.25rem auto 0.75rem; background: #fff; padding: 0.5rem; border-radius: 8px; }
.sec-secret-label { margin: 0 0 0.35rem; color: var(--text-dim); font-size: 0.82rem; text-align: center; }
.sec-secret { margin: 0 auto 1rem; padding: 0.45rem 0.7rem; width: fit-content; max-width: 100%; border: 1px dashed var(--border); border-radius: 8px; background: var(--c-sunken); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; letter-spacing: 0.04em; text-align: center; overflow-wrap: anywhere; user-select: all; }
.sec-dialog-form input[name="code"] { max-width: 10rem; font-size: 1.15rem; letter-spacing: 0.2em; text-align: center; }
.btn.btn-danger { background: #b42318; border-color: #b42318; color: #fff; }
.btn.btn-danger:hover { filter: brightness(0.92); }

@media (max-width: 560px) {
  .console .sec-row { grid-template-columns: auto minmax(0, 1fr); }
  .console .sec-row-actions { grid-column: 2; margin-left: -0.55rem; }
}
.console .sec-signout-card [data-signout-done] { margin: 0.75rem 0 0; }

/* Roles page (Version 32) */
[data-icon="roles"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4' width='17' height='16' rx='2.5'/><circle cx='9' cy='10' r='2.2'/><path d='M5.8 16.2c.5-1.7 1.7-2.6 3.2-2.6s2.7.9 3.2 2.6M14.5 9h3.5M14.5 12h3.5M14.5 15h2.5'/></svg>"); }
.console .roles-layout { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 1100px) { .console .roles-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.console .roles-layout .admin-mfa-card { margin: 0; }
.console .roles-list { list-style: none; margin: 1rem 0 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.console .roles-row { display: flex; gap: 0.75rem 1rem; align-items: flex-start; justify-content: space-between; padding: 0.85rem 1rem; }
.console .roles-row + .roles-row, .console .roles-row + .sec-empty { border-top: 1px solid var(--border); }
.console .roles-row-main { min-width: 0; flex: 1 1 auto; }
.console .roles-row-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; }
.console .roles-holders { color: var(--text-dim); font-size: 0.8rem; }
.console .roles-row-about { margin: 0.2rem 0 0; color: var(--text-dim); font-size: 0.85rem; line-height: 1.45; }
.roles-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.roles-chip { font-size: 0.74rem; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--c-sunken); border: 1px solid var(--border); color: var(--text); }
.roles-dialog { width: min(40rem, calc(100vw - 2rem)); }
.roles-optional { font-weight: 400; color: var(--text-dim); }
.roles-perm-head { margin: 0.25rem 0 0.15rem; font-weight: 650; }
.roles-groups { display: grid; gap: 0.6rem; margin: 0.6rem 0 1rem; }
.roles-group { margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; min-width: 0; }
.roles-group.is-on { border-color: var(--c-indicator); }
.roles-group-head { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.85rem; background: var(--c-sunken); float: left; }
.roles-group-head label { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 400; cursor: pointer; }
.roles-group-count { color: var(--text-dim); font-size: 0.8rem; }
.roles-parts { clear: both; display: grid; gap: 0; }
.roles-part { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: start; padding: 0.55rem 0.85rem 0.55rem 2.1rem; border-top: 1px solid var(--border); margin: 0; font-weight: 400; cursor: pointer; }
.roles-part input { margin-top: 0.2rem; }
.roles-part span { display: grid; gap: 0.1rem; }
.roles-part strong { font-size: 0.9rem; font-weight: 600; }
.roles-part span span { color: var(--text-dim); font-size: 0.8rem; line-height: 1.4; }
.sec-dialog input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--c-accent); }
@media (max-width: 560px) {
  .console .roles-row { flex-direction: column; }
  .console .roles-row .sec-row-actions { margin-left: -0.55rem; }
}