/* =====================================================================
   KDMPMACU appearance system  (loaded after m3.css)
   ---------------------------------------------------------------------
   Everything here is driven by attributes on <html>, set by the theme
   customizer (palette icon in the top bar) and saved per user:

     data-m3-theme   colour preset      union | ocean | emerald | indigo | purple | teal | orange | rose | graphite | gold
     data-sb         side menu          light | tinted | dark | primary | custom
     data-tb         top bar            white | tinted | primary | dark
     data-th         table header       light | tinted | primary | dark
     data-striped    table rows         on | off
     data-page       page background    white | soft | tinted
     data-card       cards              bordered | shadow | flat
     data-radius     corners            sharp | medium | round
     data-font       text size          sm | md | lg
     data-density    spacing            comfortable | compact
     data-menu-icons menu icons         color | mono

   A custom primary / side-menu colour is written as inline CSS variables
   (--md-primary, --sb-custom ...) on <html>.
   core.css + theme-material.css use var(--md-primary) / --md-primary-rgb,
   so a theme re-colours buttons, links, inputs, tabs, pagination, menus.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Colour presets
   --------------------------------------------------------------------- */
:root, html[data-m3-theme="union"] {
  --md-primary: #b71c1c; --md-primary-rgb: 183, 28, 28;
  --md-primary-container: #fde3e1; --md-on-primary-container: #5f0b0b;
  --m3-brand-2: #f2b705;
}
html[data-m3-theme="ocean"]    { --md-primary: #006493; --md-primary-rgb: 0, 100, 147;  --md-primary-container: #d6ecfb; --md-on-primary-container: #00344f; }
html[data-m3-theme="emerald"]  { --md-primary: #10794a; --md-primary-rgb: 16, 121, 74;  --md-primary-container: #d3f2e1; --md-on-primary-container: #003920; }
html[data-m3-theme="indigo"]   { --md-primary: #3f51b5; --md-primary-rgb: 63, 81, 181;  --md-primary-container: #e0e4fb; --md-on-primary-container: #18236b; }
html[data-m3-theme="purple"]   { --md-primary: #7b3fbf; --md-primary-rgb: 123, 63, 191; --md-primary-container: #efe2fd; --md-on-primary-container: #3b0b6e; }
html[data-m3-theme="teal"]     { --md-primary: #00796b; --md-primary-rgb: 0, 121, 107;  --md-primary-container: #cdf1ec; --md-on-primary-container: #00382f; }
html[data-m3-theme="orange"]   { --md-primary: #c2410c; --md-primary-rgb: 194, 65, 12;  --md-primary-container: #ffe3d6; --md-on-primary-container: #5c1900; }
html[data-m3-theme="rose"]     { --md-primary: #c2185b; --md-primary-rgb: 194, 24, 91;  --md-primary-container: #fde0eb; --md-on-primary-container: #5e0027; }
html[data-m3-theme="graphite"] { --md-primary: #37474f; --md-primary-rgb: 55, 71, 79;   --md-primary-container: #e1e8ec; --md-on-primary-container: #10191e; }
html[data-m3-theme="gold"]     { --md-primary: #9a6700; --md-primary-rgb: 154, 103, 0;  --md-primary-container: #fdefc8; --md-on-primary-container: #3d2800; }

/* ---------------------------------------------------------------------
   2. Base tokens (white application)
   --------------------------------------------------------------------- */
:root, html[data-m3-theme] {
  --md-on-primary: #ffffff;
  --md-secondary-container: color-mix(in srgb, var(--md-primary) 9%, white);
  --md-on-secondary-container: color-mix(in srgb, var(--md-primary) 55%, black);
  --md-inverse-primary: color-mix(in srgb, var(--md-primary) 45%, white);

  --bs-primary: var(--md-primary);
  --bs-primary-rgb: var(--md-primary-rgb);
  --bs-link-color: var(--md-primary);
  --bs-link-color-rgb: var(--md-primary-rgb);
  --bs-link-hover-color: color-mix(in srgb, var(--md-primary) 80%, black);
  --bs-primary-bg-subtle: var(--md-primary-container);
  --bs-primary-text-emphasis: var(--md-on-primary-container);
  --bs-body-bg: #ffffff;

  --md-surface: #ffffff;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #ffffff;
  --md-surface-container: #f5f6f8;
  --md-surface-container-high: #eff1f4;
  --md-surface-container-highest: #e9ecef;
  --md-on-surface: #1b1f24;
  --md-on-surface-variant: #4a525c;
  --md-outline-variant: #e3e6ea;

  /* accent palette: KPI cards, menu icons, charts */
  --m3-accent-1: var(--md-primary);
  --m3-accent-2: #1e8e3e;
  --m3-accent-3: #e8710a;
  --m3-accent-4: #9334e6;
  --m3-accent-5: #0b8bb5;
  --m3-accent-6: #d01884;
  --m3-accent-7: #c99400;
  --m3-accent-8: #5f6368;

  /* layout pieces (overridden by the options below) */
  --page-bg: #ffffff;
  --sb-bg: #ffffff; --sb-fg: #3c4043; --sb-fg-muted: #6b7280; --sb-hover: rgba(15, 23, 42, .05);
  --sb-active-bg: var(--md-primary-container); --sb-active-fg: var(--md-on-primary-container);
  --sb-border: var(--md-outline-variant); --sb-search-bg: #f1f3f5; --sb-brand-fg: var(--md-on-surface);
  --tb-bg: #ffffff; --tb-fg: var(--md-on-surface); --tb-fg-muted: var(--md-on-surface-variant); --tb-border: var(--md-outline-variant);
  --th-bg: #f5f6f8; --th-fg: #374151;
  --card-border: 1px solid var(--md-outline-variant);
  --card-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --radius-card: 16px; --radius-ctl: 10px;
  --stripe-bg: transparent;
  --cell-py: .7rem;
}

/* ---------------------------------------------------------------------
   3. Options
   --------------------------------------------------------------------- */
/* side menu */
html[data-sb="tinted"]  { --sb-bg: color-mix(in srgb, var(--md-primary) 6%, white); --sb-search-bg: #fff; --sb-hover: rgba(var(--md-primary-rgb), .08); }
html[data-sb="dark"]    { --sb-bg: #121826; --sb-fg: #e5e7eb; --sb-fg-muted: #9aa3b2; --sb-hover: rgba(255,255,255,.06);
                          --sb-active-bg: var(--md-primary); --sb-active-fg: #fff; --sb-border: #121826; --sb-search-bg: rgba(255,255,255,.08); --sb-brand-fg: #fff; }
html[data-sb="primary"] { --sb-bg: color-mix(in srgb, var(--md-primary) 88%, black); --sb-fg: rgba(255,255,255,.92); --sb-fg-muted: rgba(255,255,255,.7);
                          --sb-hover: rgba(255,255,255,.1); --sb-active-bg: rgba(255,255,255,.2); --sb-active-fg: #fff; --sb-border: transparent;
                          --sb-search-bg: rgba(255,255,255,.14); --sb-brand-fg: #fff; }
html[data-sb="custom"]  { --sb-bg: var(--sb-custom, #1f2937); --sb-border: transparent; }
html[data-sb="custom"][data-sb-text="light"] { --sb-fg: rgba(255,255,255,.92); --sb-fg-muted: rgba(255,255,255,.7); --sb-hover: rgba(255,255,255,.1);
                          --sb-active-bg: rgba(255,255,255,.2); --sb-active-fg: #fff; --sb-search-bg: rgba(255,255,255,.14); --sb-brand-fg: #fff; }
html[data-sb="custom"][data-sb-text="dark"]  { --sb-fg: #1f2937; --sb-fg-muted: #4b5563; --sb-hover: rgba(0,0,0,.06);
                          --sb-active-bg: rgba(0,0,0,.1); --sb-active-fg: #111827; --sb-search-bg: rgba(255,255,255,.6); --sb-brand-fg: #111827; }

/* top bar */
html[data-tb="tinted"]  { --tb-bg: color-mix(in srgb, var(--md-primary) 7%, white); }
html[data-tb="primary"] { --tb-bg: var(--md-primary); --tb-fg: #fff; --tb-fg-muted: rgba(255,255,255,.78); --tb-border: transparent; }
html[data-tb="dark"]    { --tb-bg: #121826; --tb-fg: #f3f4f6; --tb-fg-muted: #9aa3b2; --tb-border: transparent; }

/* table header */
html[data-th="tinted"]  { --th-bg: color-mix(in srgb, var(--md-primary) 10%, white); --th-fg: var(--md-on-primary-container); }
html[data-th="primary"] { --th-bg: var(--md-primary); --th-fg: #fff; }
html[data-th="dark"]    { --th-bg: #1f2937; --th-fg: #f9fafb; }
html[data-th="custom"]  { --th-bg: var(--th-custom, #f5f6f8); }
html[data-th="custom"][data-th-text="light"] { --th-fg: #fff; }
html[data-striped="on"] { --stripe-bg: color-mix(in srgb, var(--md-primary) 4%, #fafbfc); }

/* page background */
html[data-page="soft"]   { --page-bg: #f6f7f9; }
html[data-page="tinted"] { --page-bg: color-mix(in srgb, var(--md-primary) 4%, white); }

/* cards */
html[data-card="shadow"] { --card-border: 1px solid transparent; --card-shadow: 0 2px 6px rgba(16,24,40,.06), 0 10px 24px rgba(16,24,40,.06); }
html[data-card="flat"]   { --card-border: 1px solid var(--md-outline-variant); --card-shadow: none; }

/* corners */
html[data-radius="sharp"] { --radius-card: 6px;  --radius-ctl: 4px;  --md-shape-lg: 6px;  --md-shape-xl: 10px; --md-shape-md: 6px; }
html[data-radius="round"] { --radius-card: 24px; --radius-ctl: 14px; --md-shape-lg: 22px; --md-shape-xl: 32px; }

/* text size + density */
html[data-font="sm"] { font-size: 15px; }
html[data-font="lg"] { font-size: 17px; }
html[data-density="compact"] { --cell-py: .4rem; }
html[data-density="compact"] .card-body { padding: 1rem !important; }
html[data-density="compact"] .container-p-y { padding-top: 1rem !important; padding-bottom: 1rem !important; }

/* ---------------------------------------------------------------------
   4. Page + top bar
   --------------------------------------------------------------------- */
html, body, .layout-wrapper, .layout-container, .layout-page, .content-wrapper,
.bg-body, .bg-lighter, .light-style .bg-body { background-color: var(--page-bg) !important; }
body { color: var(--md-on-surface-variant); letter-spacing: .1px; }
h1, h2, h3, h4, h5, h6, .h4, .h5 { color: var(--md-on-surface); letter-spacing: -.01em; }

html[data-tb] .layout-navbar.m3-topbar, html[data-tb] .layout-page.window-scrolled .layout-navbar.m3-topbar,
html[data-tb] .m3-topbar.is-scrolled, .m3-topbar, .layout-navbar {
  background: var(--tb-bg) !important; color: var(--tb-fg) !important;
  border-bottom: 1px solid var(--tb-border) !important;
  backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px);
}
.m3-topbar .m3-topbar-title, .m3-topbar .m3-topbar-title *, .layout-navbar .m3-topbar-title h1 { color: var(--tb-fg) !important; }
.m3-topbar .m3-topbar-title small, .m3-topbar .m3-topbar-sub { color: var(--tb-fg-muted) !important; }
.m3-topbar .m3-icon-btn, .layout-navbar .m3-icon-btn { color: var(--tb-fg) !important; }
.m3-topbar .m3-icon-btn:hover, .layout-navbar .m3-icon-btn:hover { background: color-mix(in srgb, var(--tb-fg) 10%, transparent) !important; }
.m3-user-btn .who strong, .m3-user-btn .who b, .m3-user-btn .who { color: var(--tb-fg) !important; }
.m3-user-btn .who small { color: var(--tb-fg-muted) !important; }

/* ---------------------------------------------------------------------
   5. Side menu (navigation drawer)
   --------------------------------------------------------------------- */
.layout-menu.m3-drawer, .bg-menu-theme.m3-drawer {
  background: var(--sb-bg) !important; color: var(--sb-fg) !important;
  border-right: 1px solid var(--sb-border) !important; box-shadow: none !important;
}
.m3-drawer .app-brand { height: 76px; padding: 0 14px 0 16px; }
.m3-brand-logo { width: 46px; height: 46px; flex: none; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 2px 8px rgba(0,0,0,.18); overflow: hidden; }
.m3-brand-logo img { width: 44px; height: 44px; border-radius: 50%; display: block; }
.m3-drawer .m3-brand-text strong { color: var(--sb-brand-fg) !important; font-size: 15.5px; letter-spacing: .3px; }
.m3-drawer .m3-brand-text small { color: var(--sb-fg-muted) !important; }
.m3-drawer .layout-menu-toggle { color: var(--sb-fg) !important; }
.m3-drawer-search .m3-search { background: var(--sb-search-bg) !important; color: var(--sb-fg); border: 1px solid transparent; }
.m3-drawer-search .m3-search input { color: var(--sb-fg) !important; }
.m3-drawer-search .m3-search input::placeholder, .m3-drawer-search .m3-search .mdi { color: var(--sb-fg-muted) !important; }
.m3-drawer .menu-header .menu-header-text { color: var(--sb-fg-muted) !important; }

.m3-drawer .menu-link {
  color: var(--sb-fg) !important; border-radius: 12px !important; min-height: 42px; margin: 1px 0 !important;
  font-weight: 500; transition: background-color .15s ease, color .15s ease;
}
html[data-sb] .m3-drawer .menu-link:hover { background: var(--sb-hover) !important; color: var(--sb-fg) !important; }
.m3-drawer .menu-item.open > .menu-link.menu-toggle,
.m3-drawer .menu-item.active > .menu-link.menu-toggle { background: transparent !important; color: var(--sb-fg) !important; font-weight: 600; }
html[data-sb] .m3-drawer .menu-item.active > .menu-link:not(.menu-toggle),
html[data-sb] .m3-drawer .menu-sub > .menu-item.active > .menu-link,
html[data-sb] .bg-menu-theme.m3-drawer .menu-item.active > .menu-link:not(.menu-toggle),
html[data-sb] .bg-menu-theme.m3-drawer .menu-item.active:not(.open) > .menu-link:not(.menu-toggle) {
  background: var(--sb-active-bg) !important; color: var(--sb-active-fg) !important; font-weight: 600;
  box-shadow: inset 3px 0 0 var(--md-primary);
}
html[data-sb="dark"] .m3-drawer .menu-item.active > .menu-link:not(.menu-toggle),
html[data-sb="primary"] .m3-drawer .menu-item.active > .menu-link:not(.menu-toggle),
html[data-sb="custom"] .m3-drawer .menu-item.active > .menu-link:not(.menu-toggle) { box-shadow: none; }

/* module icons: coloured rounded tiles */
.m3-drawer .menu-inner > .menu-item > .menu-link > .menu-icon {
  --ic: var(--m3-accent-1);
  width: 30px; height: 30px; margin-right: 12px !important; border-radius: 9px; font-size: 18px !important;
  display: inline-grid !important; place-items: center; color: var(--ic) !important;
  background: color-mix(in srgb, var(--ic) 13%, transparent);
}
.m3-drawer .menu-inner > .menu-item:nth-child(8n+2) > .menu-link > .menu-icon { --ic: var(--m3-accent-2); }
.m3-drawer .menu-inner > .menu-item:nth-child(8n+3) > .menu-link > .menu-icon { --ic: var(--m3-accent-3); }
.m3-drawer .menu-inner > .menu-item:nth-child(8n+4) > .menu-link > .menu-icon { --ic: var(--m3-accent-4); }
.m3-drawer .menu-inner > .menu-item:nth-child(8n+5) > .menu-link > .menu-icon { --ic: var(--m3-accent-5); }
.m3-drawer .menu-inner > .menu-item:nth-child(8n+6) > .menu-link > .menu-icon { --ic: var(--m3-accent-6); }
.m3-drawer .menu-inner > .menu-item:nth-child(8n+7) > .menu-link > .menu-icon { --ic: var(--m3-accent-7); }
.m3-drawer .menu-inner > .menu-item:nth-child(8n+8) > .menu-link > .menu-icon { --ic: var(--m3-accent-8); }
html[data-sb="dark"] .m3-drawer .menu-inner > .menu-item > .menu-link > .menu-icon,
html[data-sb="primary"] .m3-drawer .menu-inner > .menu-item > .menu-link > .menu-icon,
html[data-sb="custom"][data-sb-text="light"] .m3-drawer .menu-inner > .menu-item > .menu-link > .menu-icon {
  color: color-mix(in srgb, var(--ic) 45%, white) !important; background: rgba(255,255,255,.1);
}
html[data-menu-icons="mono"] .m3-drawer .menu-inner > .menu-item > .menu-link > .menu-icon { color: inherit !important; background: transparent !important; }

/* page icons inside a module: shown, smaller, aligned under the module label */
.m3-drawer .menu-sub { padding: 2px 0 6px !important; position: relative; }
.m3-drawer .menu-sub::before {
  content: ""; position: absolute; left: 30px; top: 4px; bottom: 10px; width: 1px; background: color-mix(in srgb, var(--sb-fg) 14%, transparent);
}
.m3-drawer .menu-sub .menu-link { padding-left: 46px !important; min-height: 38px; font-weight: 450; font-size: 13.5px; color: var(--sb-fg) !important; }
.m3-drawer .menu-sub .menu-link > .menu-icon {
  display: inline-flex !important; width: 20px; font-size: 17px !important; margin-right: 10px !important;
  color: var(--sb-fg-muted) !important; background: none !important;
}
.m3-drawer .menu-sub .menu-item.active > .menu-link > .menu-icon { color: inherit !important; }
.m3-drawer .menu-link.menu-toggle::after { color: var(--sb-fg-muted); }

/* ---------------------------------------------------------------------
   6. Cards, KPI tiles
   --------------------------------------------------------------------- */
.card, .m3-stat, .legacy-page {
  background-color: #ffffff !important; border: var(--card-border) !important;
  box-shadow: var(--card-shadow) !important; border-radius: var(--radius-card) !important;
}
.card .card { box-shadow: none !important; }
.card-header { background: transparent; border-bottom: 1px solid var(--md-outline-variant); }
.m3-section-title, .card-title { color: var(--md-on-surface); }

/* ---------------------------------------------------------------------
   KPI tiles: a different accent colour per card
   --------------------------------------------------------------------- */

.m3-stat { --m3-c: var(--m3-accent-1); border-top: 3px solid var(--m3-c) !important; }
.m3-stat .label .mdi {
  color: var(--m3-c) !important; width: 28px; height: 28px; border-radius: 8px;
  display: inline-grid; place-items: center; font-size: 17px;
  background: color-mix(in srgb, var(--m3-c) 13%, white);
}
:is(.m3-stats, #dashKpis, .row) > .m3-stat:nth-child(8n+2), :is(.m3-stats, #dashKpis) > :nth-child(8n+2) .m3-stat { --m3-c: var(--m3-accent-2); }
:is(.m3-stats, #dashKpis, .row) > .m3-stat:nth-child(8n+3), :is(.m3-stats, #dashKpis) > :nth-child(8n+3) .m3-stat { --m3-c: var(--m3-accent-3); }
:is(.m3-stats, #dashKpis, .row) > .m3-stat:nth-child(8n+4), :is(.m3-stats, #dashKpis) > :nth-child(8n+4) .m3-stat { --m3-c: var(--m3-accent-4); }
:is(.m3-stats, #dashKpis, .row) > .m3-stat:nth-child(8n+5), :is(.m3-stats, #dashKpis) > :nth-child(8n+5) .m3-stat { --m3-c: var(--m3-accent-5); }
:is(.m3-stats, #dashKpis, .row) > .m3-stat:nth-child(8n+6), :is(.m3-stats, #dashKpis) > :nth-child(8n+6) .m3-stat { --m3-c: var(--m3-accent-6); }
:is(.m3-stats, #dashKpis, .row) > .m3-stat:nth-child(8n+7), :is(.m3-stats, #dashKpis) > :nth-child(8n+7) .m3-stat { --m3-c: var(--m3-accent-7); }
:is(.m3-stats, #dashKpis, .row) > .m3-stat:nth-child(8n+8), :is(.m3-stats, #dashKpis) > :nth-child(8n+8) .m3-stat { --m3-c: var(--m3-accent-8); }
.m3-stat.accent { background: var(--md-primary-container) !important; --m3-c: var(--md-primary); }
.m3-stat.bad { --m3-c: var(--md-error); }


/* ---------------------------------------------------------------------
   7. Tables (Bootstrap tables, DataTables, old report pages)
   --------------------------------------------------------------------- */
.table > :not(caption) > * > * { background-color: transparent; padding-top: var(--cell-py); padding-bottom: var(--cell-py); }
.table thead th, .table thead td, table.dataTable thead th, table.dataTable thead td,
.legacy-page table thead th, .legacy-page table tr > th {
  background-color: var(--th-bg) !important; color: var(--th-fg) !important;
  font-weight: 600; font-size: .8rem; letter-spacing: .3px; text-transform: none; border-bottom: 0 !important;
}
.table thead th:first-child { border-top-left-radius: 10px; }
.table thead th:last-child  { border-top-right-radius: 10px; }
.table tbody tr:nth-of-type(odd) > * { background-color: var(--stripe-bg); }
.table-hover tbody tr:hover > *, table.dataTable tbody tr:hover > * { background-color: color-mix(in srgb, var(--md-primary) 6%, white) !important; }
.table td, .table th { border-color: #eef0f3; }

/* ---------------------------------------------------------------------
   8. Controls
   --------------------------------------------------------------------- */
.btn { border-radius: var(--radius-ctl) !important; font-weight: 500; letter-spacing: .2px; }
.btn-primary { box-shadow: 0 1px 2px rgba(var(--md-primary-rgb), .25), 0 2px 6px rgba(var(--md-primary-rgb), .18) !important; }
.btn-primary:hover { filter: brightness(1.06); }
.form-control, .form-select, .select2-container--default .select2-selection { border-radius: var(--radius-ctl) !important; }
.form-control:focus, .form-select:focus { border-color: var(--md-primary) !important; box-shadow: 0 0 0 3px rgba(var(--md-primary-rgb), .14) !important; }
.badge.bg-primary, .bg-primary { background-color: var(--md-primary) !important; }
.text-primary { color: var(--md-primary) !important; }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { color: var(--md-primary); }
.nav-pills .nav-link.active { background: var(--md-primary) !important; color: #fff !important; }
.page-item.active .page-link { background: var(--md-primary) !important; border-color: var(--md-primary) !important; }
.dropdown-menu { border-radius: 14px !important; border: 1px solid var(--md-outline-variant) !important; box-shadow: 0 12px 32px rgba(16,24,40,.14) !important; }
::selection { background: rgba(var(--md-primary-rgb), .18); }
* { scrollbar-width: thin; scrollbar-color: #c9ced6 transparent; }

/* ---------------------------------------------------------------------
   9. Theme customizer (offcanvas, opened from the palette icon)
   --------------------------------------------------------------------- */
.m3-customizer { width: 380px !important; border-left: 0 !important; box-shadow: -12px 0 40px rgba(16,24,40,.16); }
.m3-customizer .offcanvas-header { padding: 18px 20px; border-bottom: 1px solid var(--md-outline-variant); }
.m3-customizer .offcanvas-title { font-weight: 600; color: var(--md-on-surface); display: flex; align-items: center; gap: 10px; }
.m3-customizer .offcanvas-title .mdi { color: var(--md-primary); font-size: 22px; }
.m3-customizer .offcanvas-body { padding: 8px 20px 24px; }
.m3-cz-sec { padding: 16px 0; border-bottom: 1px dashed var(--md-outline-variant); }
.m3-cz-sec:last-child { border-bottom: 0; }
.m3-cz-sec h6 { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--md-on-surface-variant); margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
.m3-cz-presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.m3-cz-dot { width: 100%; aspect-ratio: 1; border-radius: 14px; border: 2px solid transparent; cursor: pointer; position: relative; padding: 0;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.55); }
.m3-cz-dot[aria-pressed="true"] { border-color: var(--md-on-surface); }
.m3-cz-dot[aria-pressed="true"]::after { content: "\F012C"; font-family: "Material Design Icons"; color: #fff; font-size: 18px; position: absolute; inset: 0; display: grid; place-items: center; }
.m3-cz-dot small { position: absolute; left: 0; right: 0; bottom: -18px; font-size: 10.5px; color: var(--md-on-surface-variant); }
.m3-cz-presets.labels { row-gap: 26px; margin-bottom: 26px; }
.m3-cz-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.m3-cz-opt { border: 1px solid var(--md-outline-variant); background: #fff; border-radius: 12px; padding: 8px; cursor: pointer; text-align: center;
  font-size: 12px; color: var(--md-on-surface-variant); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.m3-cz-opt:hover { border-color: color-mix(in srgb, var(--md-primary) 50%, white); }
.m3-cz-opt[aria-pressed="true"] { border-color: var(--md-primary); box-shadow: 0 0 0 2px rgba(var(--md-primary-rgb), .18); color: var(--md-on-surface); font-weight: 600; }
.m3-cz-prev { width: 100%; height: 44px; border-radius: 8px; display: flex; overflow: hidden; border: 1px solid #e5e7eb; }
.m3-cz-prev i { display: block; }
.m3-cz-color { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; }
.m3-cz-color input[type=color] { width: 44px; height: 32px; border: 1px solid var(--md-outline-variant); border-radius: 8px; padding: 2px; background: #fff; cursor: pointer; }
.m3-cz-switch { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 13px; }
.m3-cz-foot { position: sticky; bottom: 0; background: #fff; padding: 12px 20px; border-top: 1px solid var(--md-outline-variant); display: flex; gap: 8px; }
.m3-cz-foot .btn { flex: 1; }
.m3-cz-saved { font-size: 12px; color: var(--md-on-surface-variant); }

/* ---------------------------------------------------------------------
   10. Ask AI floating button + quick panel, login hero, legacy pages
   --------------------------------------------------------------------- */

.m3-ai-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 1090;
  height: 56px; padding: 0 20px 0 16px; border: 0; border-radius: 16px;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--md-primary); color: var(--md-on-primary);
  font-weight: 500; font-size: 15px; box-shadow: var(--md-elev-3); cursor: pointer;
}
.m3-ai-fab .mdi { font-size: 22px; }
.m3-ai-fab:hover { filter: brightness(1.08); }
.m3-ai-panel {
  position: fixed; right: 24px; bottom: 92px; z-index: 1091;
  width: min(420px, calc(100vw - 32px)); height: min(620px, calc(100vh - 120px));
  background: #fff; border: 1px solid var(--md-outline-variant); border-radius: 20px;
  box-shadow: 0 12px 40px rgba(16,24,40,.18); display: none; flex-direction: column; overflow: hidden;
}
.m3-ai-panel.open { display: flex; }
.m3-ai-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--md-primary); color: var(--md-on-primary); }
.m3-ai-head .t { font-weight: 600; font-size: 15px; line-height: 1.2; }
.m3-ai-head small { display: block; opacity: .85; font-size: 11.5px; font-weight: 400; }
.m3-ai-head button { margin-left: auto; background: none; border: 0; color: inherit; font-size: 20px; cursor: pointer; }
.m3-ai-body { flex: 1; overflow-y: auto; padding: 14px; background: var(--md-surface-container); display: flex; flex-direction: column; gap: 10px; }
.m3-ai-msg { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.m3-ai-msg.me { align-self: flex-end; background: var(--md-primary); color: var(--md-on-primary); border-bottom-right-radius: 4px; }
.m3-ai-msg.bot { align-self: flex-start; background: #fff; color: var(--md-on-surface); border: 1px solid var(--md-outline-variant); border-bottom-left-radius: 4px; }
.m3-ai-msg .meta { display: block; margin-top: 6px; font-size: 11px; color: var(--md-on-surface-variant); }
.m3-ai-msg table { width: 100%; margin-top: 8px; font-size: 12px; border-collapse: collapse; white-space: normal; }
.m3-ai-msg th, .m3-ai-msg td { padding: 3px 6px; border-bottom: 1px solid var(--md-outline-variant); text-align: left; }
.m3-ai-msg th { background: var(--md-surface-container); font-weight: 600; }
.m3-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; background: #fff; }
.m3-ai-chips button { border: 1px solid var(--md-outline-variant); background: #fff; border-radius: 8px; padding: 4px 10px; font-size: 12px; color: var(--md-on-surface-variant); cursor: pointer; }
.m3-ai-chips button:hover { border-color: var(--md-primary); color: var(--md-primary); }
.m3-ai-input { display: flex; gap: 8px; padding: 10px 12px 12px; background: #fff; }
.m3-ai-input textarea { flex: 1; resize: none; height: 44px; max-height: 120px; border: 1px solid var(--md-outline-variant); border-radius: 12px; padding: 10px 12px; font-size: 14px; outline: none; }
.m3-ai-input textarea:focus { border-color: var(--md-primary); box-shadow: 0 0 0 3px rgba(var(--md-primary-rgb), .15); }
.m3-ai-input button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--md-primary); color: var(--md-on-primary); font-size: 20px; cursor: pointer; }
.m3-ai-input button:disabled { opacity: .5; cursor: default; }
.m3-ai-typing span { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: var(--md-outline); animation: m3dot 1s infinite; }
.m3-ai-typing span:nth-child(2) { animation-delay: .15s; } .m3-ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes m3dot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (max-width: 575.98px) {
  .m3-ai-fab { right: 16px; bottom: 16px; padding: 0 16px; } .m3-ai-fab .lbl { display: none; }
  .m3-ai-panel { right: 8px; left: 8px; width: auto; bottom: 84px; }
}
@media print { .m3-ai-fab, .m3-ai-panel { display: none !important; } }

/* login hero follows the theme */
.m3-auth-hero {
  background:
    radial-gradient(1200px 600px at -10% -10%, color-mix(in srgb, var(--md-primary) 60%, white) 0%, transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--md-primary) 75%, black) 0%, var(--md-primary) 55%, color-mix(in srgb, var(--md-primary) 80%, #2bb3c0) 100%) !important;
}

/* older pages now shown inside the app shell */
.legacy-page { background: #fff; border: 1px solid var(--md-outline-variant); border-radius: 16px; padding: 20px; }
.legacy-page h2, .legacy-page h4 { color: var(--md-on-surface); }
.m3-ai-fab { text-decoration: none !important; padding: 0 20px 0 8px; border-radius: 999px; height: 54px; }
.m3-ai-fab:hover { color: var(--md-on-primary); }
.m3-ai-fab-logo { width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
@media (max-width: 575.98px) { .m3-ai-fab { padding: 0 7px; } }

/* ---------------------------------------------------------------------
   11. App shell: fixed header, no gap on top, collapsible side menu
   ---------------------------------------------------------------------
   html.m3-rail = side menu collapsed to an icon rail (toggle button in the
   top bar, remembered per browser). Hovering the rail shows the full menu
   over the page without moving it.
   --------------------------------------------------------------------- */
:root { --m3-topbar-h: 64px; --m3-rail: 76px; --m3-drawer: var(--md-drawer-width, 16.25rem); }

html[class] .layout-wrapper .layout-page .layout-navbar.m3-topbar, html .layout-navbar.m3-topbar {
  position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important;
  width: auto !important; height: var(--m3-topbar-h) !important; margin: 0 !important; z-index: 1075 !important;
  transition: left .2s ease;
}
html .layout-content-navbar .layout-page,
html.layout-navbar-fixed .layout-content-navbar .layout-page { padding-top: var(--m3-topbar-h) !important; margin-top: 0 !important; }
html .layout-page::before { display: none !important; }
.content-wrapper > [class*="container-"].container-p-y { padding-top: 18px !important; }

@media (min-width: 1200px) {
  html[class] .layout-wrapper .layout-page .layout-navbar.m3-topbar, html .layout-navbar.m3-topbar { left: var(--m3-drawer) !important; }
  html .layout-content-navbar .layout-page { padding-left: var(--m3-drawer) !important; transition: padding-left .2s ease; }
  .layout-menu.m3-drawer { transition: width .2s ease, box-shadow .2s ease; }

  html.m3-rail { --m3-drawer: var(--m3-rail); }
  html.m3-rail .layout-menu.m3-drawer { width: var(--m3-rail) !important; overflow: hidden; }
  html.m3-rail .layout-menu.m3-drawer:hover { width: var(--md-drawer-width, 16.25rem) !important; box-shadow: 8px 0 32px rgba(16,24,40,.18) !important; z-index: 1085; }
  html.m3-rail .layout-menu.m3-drawer:not(:hover) .m3-brand-text,
  html.m3-rail .layout-menu.m3-drawer:not(:hover) .m3-drawer-search,
  html.m3-rail .layout-menu.m3-drawer:not(:hover) .menu-header,
  html.m3-rail .layout-menu.m3-drawer:not(:hover) .menu-sub,
  html.m3-rail .layout-menu.m3-drawer:not(:hover) .m3-drawer-credit .txt,
  html.m3-rail .layout-menu.m3-drawer:not(:hover) .menu-link > div,
  html.m3-rail .layout-menu.m3-drawer:not(:hover) .menu-link > .m3-truncate { display: none !important; }
  html.m3-rail .layout-menu.m3-drawer:not(:hover) .menu-link.menu-toggle::after { display: none !important; }
  html.m3-rail .layout-menu.m3-drawer:not(:hover) .menu-link { justify-content: center !important; padding: 0 !important; }
  html.m3-rail .layout-menu.m3-drawer:not(:hover) .menu-inner > .menu-item > .menu-link > .menu-icon { margin-right: 0 !important; }
  html.m3-rail .layout-menu.m3-drawer:not(:hover) .app-brand { justify-content: center; padding: 0 !important; }
  html.m3-rail .layout-menu.m3-drawer:not(:hover) .menu-inner { padding-left: 10px !important; padding-right: 10px !important; }
  html.m3-rail .layout-menu.m3-drawer:not(:hover) .m3-drawer-credit { justify-content: center; }
  html.m3-rail .layout-menu.m3-drawer:not(:hover) .ps__rail-y,
  html.m3-rail .layout-menu.m3-drawer:not(:hover) .ps__rail-x,
  html.m3-rail .layout-menu.m3-drawer:not(:hover) .menu-sub::before { display: none !important; }
}
@media (max-width: 1199.98px) {
  .m3-rail-toggle { display: none !important; }
}
.m3-rail-toggle .mdi { transition: transform .2s ease; }
html.m3-rail .m3-rail-toggle .mdi { transform: scaleX(-1); }

/* "Developed by RegiInfo" */
.m3-drawer-credit {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid color-mix(in srgb, var(--sb-fg) 10%, transparent);
  font-size: 11.5px; color: var(--sb-fg-muted) !important; text-decoration: none !important; flex: none;
}
.m3-drawer-credit img, .m3-dev-logo { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; background: #fff; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.m3-drawer-credit b { color: var(--sb-fg); font-weight: 600; }
.m3-drawer-credit:hover b { text-decoration: underline; }
.m3-footer .m3-dev { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.m3-footer .m3-dev img { width: 22px; height: 22px; }
.m3-ai-fab-logo { border-radius: 12px !important; object-fit: contain; padding: 3px; }

/* RegiInfo logo (uploaded artwork): wide logo in credits, orange mark when the menu is collapsed */
.m3-drawer-credit { gap: 6px; }
.m3-drawer-credit .txt { display: inline-flex; align-items: center; gap: 6px; }
.m3-drawer-credit img.wide { height: 28px; width: auto; background: none; box-shadow: none; border-radius: 0; }
.m3-drawer-credit img.mark { display: none; width: 30px; height: 30px; background: none; box-shadow: none; }
html[data-sb="dark"] .m3-drawer-credit img.wide, html[data-sb="primary"] .m3-drawer-credit img.wide,
html[data-sb="custom"][data-sb-text="light"] .m3-drawer-credit img.wide { background: #fff; border-radius: 6px; padding: 2px 6px; height: 28px; }
@media (min-width: 1200px) {
  html.m3-rail .layout-menu.m3-drawer:not(:hover) .m3-drawer-credit img.mark { display: block; }
}
.m3-footer .m3-dev img.m3-dev-wide { height: 26px; width: auto; }
.m3-ai-fab-logo { background: #fff; padding: 4px; border-radius: 50% !important; }
.m3-filter-chips .on { background: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important; font-weight: 600; border-color: transparent !important; }