/* ============================================
   CREDENTRY ADMIN PORTAL - Design System
   ============================================ */

/* --- CSS Variables (Design Tokens) --- */
:root {
    /* Brand Colors — overridden by tenant branding via --ce-tenant-primary/secondary/accent */
    --ce-navy: #1a2744;
    --ce-navy-light: #243352;
    --ce-navy-dark: #0f1829;
    --ce-teal: var(--ce-tenant-primary, #00a99d);
    --ce-teal-light: var(--ce-tenant-accent, #00c4b6);
    --ce-teal-dark: #008a80;

    /* Neutral Palette */
    --ce-white: #ffffff;
    --ce-gray-50: #f8fafc;
    --ce-gray-100: #f1f5f9;
    --ce-gray-200: #e2e8f0;
    --ce-gray-300: #cbd5e1;
    --ce-gray-400: #94a3b8;
    --ce-gray-500: #64748b;
    --ce-gray-600: #475569;
    --ce-gray-700: #334155;
    --ce-gray-800: #1e293b;
    --ce-gray-900: #0f172a;

    /* Semantic Colors */
    --ce-success: #10b981;
    --ce-success-light: #d1fae5;
    --ce-success-100: #d1fae5;
    --ce-warning: #f59e0b;
    --ce-warning-light: #fef3c7;
    --ce-warning-100: #fef3c7;
    --ce-danger: #ef4444;
    --ce-danger-light: #fee2e2;
    --ce-danger-100: #fee2e2;
    --ce-info: var(--ce-tenant-secondary, #3b82f6);
    --ce-info-light: #dbeafe;
    --ce-info-100: #dbeafe;

    /* Extended Color Palette */
    --ce-blue: var(--ce-tenant-secondary, #3b82f6);
    --ce-blue-100: #dbeafe;
    --ce-blue-light: rgba(59, 130, 246, 0.2);
    --ce-green: #22c55e;
    --ce-green-100: #dcfce7;
    --ce-green-light: rgba(34, 197, 94, 0.2);
    --ce-orange: #f97316;
    --ce-orange-100: #ffedd5;
    --ce-orange-light: rgba(249, 115, 22, 0.2);
    --ce-red: #ef4444;
    --ce-red-100: #fee2e2;
    --ce-red-light: rgba(239, 68, 68, 0.2);
    --ce-purple: #a855f7;
    --ce-purple-100: #f3e8ff;
    --ce-purple-light: rgba(168, 85, 247, 0.2);
    --ce-teal-100: #ccfbf1;
    --ce-teal-light-bg: rgba(0, 169, 157, 0.2);

    /* Typography */
    --ce-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ce-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Spacing Scale */
    --ce-space-1: 0.25rem;
    --ce-space-2: 0.5rem;
    --ce-space-3: 0.75rem;
    --ce-space-4: 1rem;
    --ce-space-5: 1.25rem;
    --ce-space-6: 1.5rem;
    --ce-space-8: 2rem;
    --ce-space-10: 2.5rem;
    --ce-space-12: 3rem;

    /* Border Radius */
    --ce-radius-sm: 0.375rem;
    --ce-radius-md: 0.5rem;
    --ce-radius-lg: 0.75rem;
    --ce-radius-xl: 1rem;
    --ce-radius-full: 9999px;

    /* Shadows */
    --ce-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --ce-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --ce-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --ce-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Transitions */
    --ce-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --ce-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --ce-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Sidebar */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 72px;
    --header-height: 64px;
    /* Footer height, exposed globally so hosts can offset floating action buttons against it,
       e.g. bottom: calc(var(--footer-height) + 12px). */
    --footer-height: 40px;

    /* Theme-aware colors (Light Mode) — wired through brand variables */
    --ce-bg-primary: var(--brand-bg-card, var(--ce-white));
    --ce-bg-secondary: var(--brand-bg-page, var(--ce-gray-50));
    --ce-bg-tertiary: var(--brand-bg-header, var(--ce-gray-100));
    --ce-text-primary: var(--brand-text-primary, var(--ce-gray-900));
    --ce-text-secondary: var(--brand-text-secondary, var(--ce-gray-700));
    --ce-text-muted: var(--ce-gray-500);
    --ce-border-primary: var(--brand-border, var(--ce-gray-200));
    --ce-border-secondary: var(--ce-gray-100);
}

/* --- Dark Mode Variables --- */
[data-theme="dark"] {
    --ce-bg-primary: var(--brand-bg-card, #0f172a);
    --ce-bg-secondary: var(--brand-bg-page, #1e293b);
    --ce-bg-tertiary: var(--brand-bg-header, #334155);
    --ce-text-primary: var(--brand-text-primary, #f1f5f9);
    --ce-text-secondary: var(--brand-text-secondary, #cbd5e1);
    --ce-text-muted: #94a3b8;
    --ce-border-primary: var(--brand-border, #334155);
    --ce-border-secondary: #475569;

    /* Adjusted semantic colors for dark mode */
    --ce-success-light: rgba(16, 185, 129, 0.2);
    --ce-warning-light: rgba(245, 158, 11, 0.2);
    --ce-danger-light: rgba(239, 68, 68, 0.2);
    --ce-info-light: rgba(59, 130, 246, 0.2);

    /* Override grays for dark mode */
    --ce-gray-50: #1e293b;
    --ce-gray-100: #334155;
    --ce-gray-200: #475569;
    --ce-gray-700: #cbd5e1;
    --ce-gray-800: #e2e8f0;
    --ce-gray-900: #f1f5f9;

    /* Override white for components using it directly */
    --ce-white: #1e293b;

    /* Badge text colors for dark mode — lighter to be visible on dark backgrounds */
    --ce-badge-success-text: #34d399;
    --ce-badge-warning-text: #fbbf24;
    --ce-badge-danger-text: #f87171;
    --ce-badge-info-text: #60a5fa;

    /* Shadows for dark mode */
    --ce-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --ce-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --ce-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    --ce-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.5);
}

/* Dark mode logo switching */
[data-theme="dark"] .ce-logo-img-dark {
    display: block;
}

[data-theme="dark"] .ce-logo-img-light {
    display: none;
}

/* Dark mode table fixes */
[data-theme="dark"] .ce-table thead th {
    background: var(--ce-bg-tertiary);
}

[data-theme="dark"] .ce-table tbody tr:hover {
    background: var(--ce-bg-tertiary);
}

/* Dark mode modal backdrop */
[data-theme="dark"] .ce-modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .ce-modal {
    background: var(--ce-bg-primary);
    border: 1px solid var(--ce-border-primary);
}

/* Dark mode badge adjustments */
[data-theme="dark"] .ce-badge-gray,
[data-theme="dark"] .ce-badge-neutral {
    background: var(--ce-bg-tertiary);
    color: var(--ce-text-secondary);
}

/* Dark mode form select */
[data-theme="dark"] .ce-form-select,
[data-theme="dark"] .ce-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

[data-theme="dark"] .ce-form-select option,
[data-theme="dark"] .ce-select option {
    background: var(--ce-bg-primary);
    color: var(--ce-text-primary);
}

/* Dark mode native date/time inputs */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"] {
    color-scheme: dark;
}

/* Dark mode code elements */
[data-theme="dark"] code {
    background: var(--ce-bg-tertiary);
    color: var(--ce-teal-light);
}

/* Dark mode checkbox */
[data-theme="dark"] input[type="checkbox"] {
    accent-color: var(--ce-teal);
}

/* Dark mode login page */
[data-theme="dark"] .ce-login-card {
    background: var(--ce-bg-primary);
}

[data-theme="dark"] .ce-login-title {
    color: var(--ce-text-primary);
}

[data-theme="dark"] .ce-login-hint {
    background: var(--ce-bg-tertiary);
    color: var(--ce-text-muted);
}

[data-theme="dark"] .ce-login-hint code {
    background: var(--ce-bg-secondary);
}

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- Base Reset & Typography (shell-scoped) --- */
/* COEXISTENCE: every element-level reset below is scoped under `.ce-app` (the shell
   root rendered by PortalLayout) so that loading this stylesheet next to a host app's
   own theme NEVER restyles the host's own pages (its <body>, <a>, <h1>… stay untouched).
   The design-token `:root` variables above remain GLOBAL on purpose, so host pages may
   still reference the `--ce-*` tokens. All `.ce-*` component classes are unchanged and
   keep working identically because the shell always renders them inside `.ce-app`. */
.ce-app, .ce-app *, .ce-app *::before, .ce-app *::after {
    box-sizing: border-box;
}

.ce-app {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scroll margin for anchor targets (accounts for sticky header) */
.ce-app [id] {
    scroll-margin-top: calc(var(--header-height) + var(--ce-space-6));
}

.ce-app h1, .ce-app h2, .ce-app h3, .ce-app h4, .ce-app h5, .ce-app h6 {
    font-family: var(--ce-font-heading, inherit);
    font-weight: 600;
    color: var(--ce-text-primary);
    line-height: 1.3;
    margin-bottom: 0.5em;
}

.ce-app h1 { font-size: 1.875rem; letter-spacing: -0.025em; }
.ce-app h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.ce-app h3 { font-size: 1.25rem; }
.ce-app h4 { font-size: 1.125rem; }
.ce-app h5 { font-size: 1rem; }
.ce-app h6 { font-size: 0.875rem; }

.ce-app p { margin-bottom: 1rem; }

.ce-app a {
    color: var(--ce-teal);
    text-decoration: none;
    transition: color var(--ce-transition-fast);
}

.ce-app a:hover {
    color: var(--ce-link-hover, var(--ce-teal-dark));
}

.ce-app code {
    font-family: var(--ce-font-mono);
    font-size: 0.85em;
    padding: 0.125rem 0.375rem;
    background: var(--ce-gray-100);
    border-radius: var(--ce-radius-sm);
    color: var(--ce-teal-dark);
}

/* --- Layout Structure --- */
/* Shell root: also carries the base typography/background that used to live on <body>,
   so the chrome looks identical without bleeding a background onto the host's <body>. */
.ce-app {
    display: flex;
    min-height: 100vh;
    font-family: var(--ce-tenant-font, var(--ce-font-sans));
    font-size: var(--ce-font-size, 0.9375rem);
    font-weight: var(--ce-font-weight, 400);
    line-height: 1.6;
    color: var(--ce-text-secondary);
    background-color: var(--ce-bg-secondary);
    transition: background-color var(--ce-transition-slow), color var(--ce-transition-slow);
}

.ce-sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--header-height) - var(--footer-height));
    background: linear-gradient(180deg, var(--brand-bg-sidebar, var(--ce-sidebar-bg, var(--ce-navy))) 0%, var(--brand-bg-sidebar-end, var(--ce-sidebar-bg, var(--ce-navy-dark))) 100%);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: width var(--ce-transition-slow);
    overflow: hidden;
}

/* Collapsed sidebar */
.ce-sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.ce-sidebar.collapsed .ce-nav-section-title,
.ce-sidebar.collapsed .ce-logo-text,
.ce-sidebar.collapsed .ce-tenant-switcher,
.ce-sidebar.collapsed .ce-sidebar-select,
.ce-sidebar.collapsed .ce-sidebar-footer {
    display: none;
}

.ce-sidebar.collapsed .ce-nav-section {
    margin-bottom: var(--ce-space-2);
}

.ce-sidebar.collapsed .ce-nav-item {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: var(--ce-space-2) 0;
    border-left: none;
    color: var(--ce-sidebar-text, var(--ce-gray-300));
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
    overflow: hidden;
}

.ce-sidebar.collapsed .ce-nav-item svg {
    font-size: 16px;
    width: 22px;
    height: 22px;
    min-width: 22px;
    opacity: 0.85;
}

.ce-sidebar.collapsed .ce-nav-item.active svg,
.ce-sidebar.collapsed .ce-nav-item:hover svg {
    opacity: 1;
}

.ce-sidebar.collapsed + .ce-main,
.ce-sidebar.collapsed ~ .ce-main {
    margin-left: var(--sidebar-collapsed-width);
}

/* Sidebar collapse hamburger — rendered on the CONTENT side (first element of the breadcrumb
   row, hugging the sidebar boundary), NOT inside the sidebar. Styled for the content background;
   living outside the sidebar keeps it visible + clickable when the sidebar is collapsed. */
.ce-sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: var(--ce-radius-sm);
    color: var(--ce-text-muted);
    cursor: pointer;
    transition: all var(--ce-transition-fast);
    flex-shrink: 0;
}

.ce-sidebar-collapse-btn:hover {
    background: var(--ce-bg-tertiary);
    color: var(--ce-text-primary);
}

/* The toggle is a hamburger (same icon collapsed/expanded — no direction flip needed). */
.ce-sidebar-collapse-btn svg {
    transition: transform var(--ce-transition-fast);
}

/* Optional host-supplied sidebar header (SidebarHeader slot). Only rendered when the host supplies
   content — with the collapse toggle moved to the content side an absent slot renders nothing, so
   the tenant/location switchers sit flush at the sidebar's top edge. */
.ce-sidebar-header {
    padding: var(--ce-space-2) var(--ce-space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ce-space-2);
}

/* Host SidebarHeader slot content (e.g. Vizie's "Select Location") hides when collapsed,
   consistently with the built-in .ce-tenant-switcher. */
.ce-sidebar.collapsed .ce-sidebar-header {
    display: none;
}

.ce-sidebar.collapsed .ce-nav-badge {
    display: none;
}

.ce-logo {
    display: flex;
    align-items: center;
    gap: var(--ce-space-3);
}

.ce-logo-icon {
    width: 36px;
    height: 36px;
    background: var(--ce-teal);
    border-radius: var(--ce-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    flex-shrink: 0;
}

.ce-logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.02em;
}

.ce-logo-text span {
    color: var(--ce-teal);
}

/* --- Navigation --- */
.ce-nav {
    flex: 1;
    padding: var(--ce-space-4) 0;
    overflow-y: auto;
}

.ce-nav-section {
    margin-bottom: var(--ce-space-6);
}

.ce-nav-section-title {
    padding: var(--ce-space-2) var(--ce-space-6);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ce-sidebar-text, var(--ce-gray-400));
    opacity: 0.6;
}

/* Selector carries .ce-sidebar for ONE reason: `.ce-app a` (0,1,1) sets every link to
   var(--ce-teal), and a bare `.ce-nav-item` (0,1,0) loses to it — so the sidebar's own text
   colour was never the colour that rendered. With the default palette the wrong variable happens
   to be legible on navy, which is why this survived unnoticed. It stops being legible the moment
   a tenant's primary colour is close to its sidebar colour, which is what a company with one
   brand palette will naturally configure: WestGold set both to #1B3A4B and their whole navigation
   disappeared.

   :hover, .active and the collapsed rules already reach 0,2,0 and were never affected. Only this
   base rule needed the lift. */
.ce-sidebar .ce-nav-item {
    display: flex;
    align-items: center;
    gap: var(--ce-space-3);
    padding: var(--ce-space-3) var(--ce-space-6);
    color: var(--ce-sidebar-text, var(--ce-gray-300));
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--ce-transition-fast);
    cursor: pointer;
    border-left: 3px solid transparent;
    text-decoration: none;
}

.ce-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--ce-sidebar-hover, white);
}

.ce-nav-item.active {
    background: rgba(0, 169, 157, 0.15);
    color: var(--ce-sidebar-hover, var(--ce-teal-light));
    border-left-color: var(--ce-sidebar-hover, var(--ce-teal));
}

.ce-nav-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.7;
}

.ce-nav-item.active svg,
.ce-nav-item:hover svg {
    opacity: 1;
}

.ce-nav-badge {
    margin-left: auto;
    background: var(--ce-teal);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: var(--ce-radius-full);
}

/* --- Sidebar Footer --- */
.ce-sidebar-footer {
    padding: var(--ce-space-4) var(--ce-space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ce-user-card {
    display: flex;
    align-items: center;
    gap: var(--ce-space-3);
    padding: var(--ce-space-3);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--ce-radius-md);
}

.ce-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--ce-radius-full);
    background: linear-gradient(135deg, var(--ce-teal) 0%, var(--ce-teal-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: white;
    flex-shrink: 0;
}

.ce-user-info {
    flex: 1;
    min-width: 0;
}

.ce-user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ce-user-role {
    font-size: 0.75rem;
    color: var(--ce-gray-400);
}

.ce-user-profile-link {
    display: flex;
    align-items: center;
    gap: var(--ce-space-3);
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    border-radius: var(--ce-radius-sm);
    transition: opacity var(--ce-transition-fast);
}

.ce-user-profile-link:hover {
    opacity: 0.8;
}

/* --- Main Content Area --- */
.ce-main {
    flex: 1;
    min-width: 0; /* flex item: allow shrinking below content min-width (prevents page-level h-scroll) */
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: var(--header-height);
    padding-bottom: var(--footer-height);
    background: var(--ce-bg-secondary);
    transition: margin-left var(--ce-transition-slow), background-color var(--ce-transition-slow);
}

/* --- Header --- */
.ce-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--ce-bg-primary);
    border-bottom: 1px solid var(--ce-border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--ce-space-8) 0 var(--ce-space-4);
    z-index: 1100;
    transition: background-color var(--ce-transition-slow), border-color var(--ce-transition-slow);
}

/* Full-width footer (mirrors the Brand Settings live preview) */
.ce-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--footer-height);
    background: var(--ce-bg-primary);
    border-top: 1px solid var(--ce-border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ce-space-2);
    font-size: 0.6875rem;
    color: var(--ce-text-muted);
    z-index: 1100;
    transition: background-color var(--ce-transition-slow), border-color var(--ce-transition-slow);
}

/* "Powered by <logo>" footer variant (PortalLayout FooterLogoUrl). */
.ce-footer-powered {
    display: inline-flex;
    align-items: center;
    gap: var(--ce-space-2);
}

.ce-footer-logo {
    display: block;
    height: 16px;
    width: auto;
}

.ce-header-left {
    display: flex;
    align-items: center;
    gap: var(--ce-space-4);
    flex: 1;
    min-width: 0;
}

.ce-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--ce-space-2);
    font-size: 0.875rem;
    color: var(--ce-gray-500);
}

.ce-breadcrumb-item {
    color: var(--ce-gray-500);
}

.ce-breadcrumb-item.active {
    color: var(--ce-gray-900);
    font-weight: 500;
}

.ce-breadcrumb-separator {
    color: var(--ce-gray-300);
}

.ce-header-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--ce-space-4);
}

.ce-header-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: var(--ce-radius-md);
    border: none;
    background: transparent;
    color: var(--ce-gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--ce-transition-fast);
}

.ce-header-btn:hover {
    background: var(--ce-gray-100);
    color: var(--ce-gray-700);
}

.ce-header-btn svg {
    width: 20px;
    height: 20px;
}

.ce-notification-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: var(--ce-danger);
    border-radius: 50%;
    border: 2px solid var(--ce-white);
}

/* --- Profile (Header) --- */
/* Wrapper anchoring the absolutely-positioned profile dropdown to the avatar. */
.ce-profile {
    position: relative;
}

.ce-profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--ce-radius-full, 9999px);
    background: var(--ce-teal, #00a99d);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity var(--ce-transition-fast, 0.15s);
    font-family: var(--ce-font-sans, system-ui);
}

.ce-profile-avatar:hover {
    opacity: 0.85;
}

/* --- Sidebar select (shared pattern) ---
   The tenant switcher's DDL styling, extracted as the reusable `.ce-sidebar-select*`
   classes so host pickers (e.g. Vizie's location switcher, rendered in the layout's
   SidebarBelowTenant slot) look EXACTLY like the built-in tenant switcher. The legacy
   `.ce-tenant-*` names stay as aliases of the same rules. */
.ce-tenant-switcher,
.ce-sidebar-select {
    padding: var(--ce-space-2) var(--ce-space-4);
    position: relative;
}

.ce-tenant-btn,
.ce-sidebar-select-btn {
    display: flex;
    align-items: center;
    gap: var(--ce-space-2);
    width: 100%;
    padding: var(--ce-space-2) var(--ce-space-3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--ce-radius-md);
    background: rgba(255, 255, 255, 0.06);
    color: var(--ce-sidebar-text, rgba(255, 255, 255, 0.85));
    cursor: pointer;
    font-size: 0.8125rem;
    font-family: var(--ce-font-sans, system-ui);
    transition: all var(--ce-transition-fast, 0.15s);
}

.ce-tenant-btn:hover,
.ce-sidebar-select-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.ce-tenant-name,
.ce-sidebar-select-label {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ce-tenant-dropdown,
.ce-sidebar-select-dropdown {
    position: absolute;
    top: 100%;
    left: var(--ce-space-4);
    right: var(--ce-space-4);
    background: var(--ce-bg-primary, white);
    border: 1px solid var(--ce-border-color);
    border-radius: var(--ce-radius-md);
    box-shadow: var(--ce-shadow-lg, 0 10px 25px rgba(0,0,0,0.15));
    z-index: 100;
    margin-top: 4px;
    max-height: 240px;
    overflow-y: auto;
}

.ce-tenant-option,
.ce-sidebar-select-option {
    display: block;
    width: 100%;
    padding: var(--ce-space-2) var(--ce-space-3);
    border: none;
    background: none;
    color: var(--ce-text-primary);
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    font-family: var(--ce-font-sans, system-ui);
    transition: background var(--ce-transition-fast, 0.15s);
}

.ce-tenant-option:hover,
.ce-sidebar-select-option:hover {
    background: var(--ce-bg-secondary);
}

.ce-tenant-option.active,
.ce-sidebar-select-option.active {
    background: var(--ce-teal-light-bg, rgba(0, 169, 157, 0.1));
    color: var(--ce-teal, #00a99d);
    font-weight: 500;
}

/* Extras for richer pickers (filter box + multi-select checkbox rows INSIDE the dropdown). */
.ce-sidebar-select-group {
    padding: var(--ce-space-2) var(--ce-space-3);
}

.ce-sidebar-select-filter {
    width: 100%;
    padding: var(--ce-space-1) var(--ce-space-2);
    margin-bottom: var(--ce-space-2);
    font-size: 0.8125rem;
    font-family: var(--ce-font-sans, system-ui);
    border: 1px solid var(--ce-border-primary);
    border-radius: var(--ce-radius-sm);
    background: var(--ce-bg-secondary);
    color: var(--ce-text-primary);
    outline: none;
}

.ce-sidebar-select-filter:focus {
    border-color: var(--ce-teal, #00a99d);
}

.ce-sidebar-select-check {
    display: flex;
    align-items: center;
    gap: var(--ce-space-2);
    padding: var(--ce-space-1) var(--ce-space-2);
    border-radius: var(--ce-radius-sm);
    color: var(--ce-text-primary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background var(--ce-transition-fast, 0.15s);
}

.ce-sidebar-select-check:hover {
    background: var(--ce-bg-secondary);
}

.ce-sidebar-select-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    accent-color: var(--ce-teal, #00a99d);
    cursor: pointer;
}

.ce-sidebar-select-check span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Invisible click-away layer for Blazor-managed picker dropdowns (interactive islands
   can't lean on portal-shell.js menu handling without fighting the render diff). */
.ce-sidebar-select-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}

/* --- Breadcrumb bar (top of the content area, tight under the header) --- */
/* Left padding is smaller than the content's so its FIRST element — the sidebar collapse
   hamburger — hugs the sidebar boundary, with the "Home" crumb to its right. */
.ce-crumbs {
    display: flex;
    align-items: center;
    gap: var(--ce-space-2);
    padding: var(--ce-space-2) var(--ce-space-8) 0 var(--ce-space-3);
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--ce-text-muted);
}

.ce-crumb-link {
    color: var(--ce-text-muted);
    text-decoration: none;
    transition: color var(--ce-transition-fast);
}

.ce-crumb-link:hover {
    color: var(--ce-text-primary);
    text-decoration: underline;
}

.ce-crumb-current {
    color: var(--ce-text-primary);
    font-weight: 500;
}

.ce-crumb-sep {
    color: var(--ce-border-secondary);
}

/* --- Content Area --- */
/* Top padding is compact: the breadcrumb bar above supplies the breathing room. */
.ce-content {
    flex: 1;
    padding: var(--ce-space-4) var(--ce-space-8) var(--ce-space-8);
}

/* --- Page Header --- */
/* Compact: no subtitle line below the title any more (subtitle = tooltip on the (i) icon),
   so the block is a single tight row and the title sits higher. */
.ce-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ce-space-3);
    margin-bottom: var(--ce-space-5);
}

.ce-page-title-row {
    display: flex;
    align-items: center;
    gap: var(--ce-space-2);
    min-width: 0;
}

.ce-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ce-gray-900);
    margin: 0;
}

/* Subtitle tooltip trigger — the small (i) beside the title. */
.ce-page-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ce-text-muted);
    cursor: help;
    outline: none;
}

.ce-page-info svg {
    width: 17px;
    height: 17px;
}

.ce-page-info:hover,
.ce-page-info:focus-visible {
    color: var(--ce-text-secondary);
}

.ce-page-info-tip {
    position: absolute;
    top: calc(100% + 6px);
    left: -6px;
    width: max-content;
    max-width: 340px;
    padding: var(--ce-space-2) var(--ce-space-3);
    background: var(--ce-text-primary);
    color: var(--ce-bg-primary);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    border-radius: var(--ce-radius-md);
    box-shadow: var(--ce-shadow-lg);
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--ce-transition-fast), visibility var(--ce-transition-fast);
}

.ce-page-info:hover .ce-page-info-tip,
.ce-page-info:focus-visible .ce-page-info-tip,
.ce-page-info:focus .ce-page-info-tip {
    opacity: 1;
    visibility: visible;
}

/* Legacy visible subtitle (still used by SubtitleContent custom markup hosts). */
.ce-page-subtitle {
    font-size: 0.875rem;
    color: var(--ce-gray-500);
    margin-top: var(--ce-space-1);
}

/* --- Cards --- */
.ce-card {
    background: var(--ce-bg-primary);
    border-radius: var(--ce-radius-lg);
    border: 1px solid var(--ce-border-primary);
    box-shadow: var(--ce-shadow-sm);
    overflow: hidden;
    transition: background-color var(--ce-transition-slow), border-color var(--ce-transition-slow);
}

.ce-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ce-space-5) var(--ce-space-6);
    border-bottom: 1px solid var(--ce-border-secondary);
}

.ce-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ce-text-primary);
    margin: 0;
}

.ce-card-body {
    padding: var(--ce-space-6);
}

.ce-card-footer {
    padding: var(--ce-space-4) var(--ce-space-6);
    border-top: 1px solid var(--ce-border-secondary);
    background: var(--ce-bg-secondary);
}

/* --- Stat Cards --- */
.ce-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--ce-space-6);
    margin-bottom: var(--ce-space-8);
}

.ce-stat-card {
    background: var(--ce-bg-primary);
    border-radius: var(--ce-radius-lg);
    border: 1px solid var(--ce-border-primary);
    padding: var(--ce-space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--ce-space-4);
    transition: all var(--ce-transition-fast);
}

.ce-stat-card:hover {
    box-shadow: var(--ce-shadow-md);
    border-color: var(--ce-teal);
}

.ce-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--ce-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ce-stat-icon svg {
    width: 24px;
    height: 24px;
}

.ce-stat-icon.teal {
    background: rgba(0, 169, 157, 0.1);
    color: var(--ce-teal);
}

.ce-stat-icon.blue {
    background: rgba(59, 130, 246, 0.1);
    color: var(--ce-info);
}

.ce-stat-icon.green {
    background: rgba(16, 185, 129, 0.1);
    color: var(--ce-success);
}

.ce-stat-icon.orange {
    background: rgba(245, 158, 11, 0.1);
    color: var(--ce-warning);
}

.ce-stat-content {
    flex: 1;
    min-width: 0;
}

.ce-stat-label {
    font-size: 0.8125rem;
    color: var(--ce-text-muted);
    margin-bottom: var(--ce-space-1);
}

.ce-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ce-text-primary);
    line-height: 1.2;
}

.ce-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: var(--ce-space-1);
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: var(--ce-space-2);
    padding: 0.125rem 0.5rem;
    border-radius: var(--ce-radius-full);
}

.ce-stat-trend.up {
    background: var(--ce-success-light);
    color: var(--ce-success);
}

.ce-stat-trend.down {
    background: var(--ce-danger-light);
    color: var(--ce-danger);
}

/* --- CeStatCard icon tile ---
   Self-contained icon class for the CeStatCard primitive. Deliberately NOT named
   `.ce-stat-icon` so the global `.ce-stat-icon svg { color: white }` rule (used by the
   dashboard KPI/scorecard gradient tiles) can never clobber this primitive's icon colour.
   Two looks:
     • pale tint (default)      — soft ~10% background + coloured icon
     • saturated/gradient (.filled) — white icon on a saturated colour gradient, matching the
       hand-rolled page-summary tiles on Invoices / Payments / Subscriptions. */
.ce-stattile-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--ce-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ce-stattile-icon svg {
    width: 24px;
    height: 24px;
}

/* Pale-tint look (default) */
.ce-stattile-icon.teal   { background: rgba(0, 169, 157, 0.1);  color: var(--ce-teal); }
.ce-stattile-icon.blue   { background: rgba(59, 130, 246, 0.1); color: var(--ce-info); }
.ce-stattile-icon.indigo { background: rgba(99, 102, 241, 0.1); color: #4f46e5; }
.ce-stattile-icon.green  { background: rgba(16, 185, 129, 0.1); color: var(--ce-success); }
.ce-stattile-icon.orange { background: rgba(245, 158, 11, 0.1); color: var(--ce-warning); }
.ce-stattile-icon.red    { background: rgba(239, 68, 68, 0.1);  color: var(--ce-danger); }

/* Saturated/gradient look (Filled="true") — reproduces the native page-summary tiles:
   white icon on a saturated colour gradient. */
.ce-stattile-icon.filled svg    { color: #fff; }
.ce-stattile-icon.filled.teal   { background: linear-gradient(135deg, var(--ce-teal) 0%, var(--ce-teal-dark) 100%); }
.ce-stattile-icon.filled.blue   { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.ce-stattile-icon.filled.indigo { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }
.ce-stattile-icon.filled.green  { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.ce-stattile-icon.filled.orange { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.ce-stattile-icon.filled.red    { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

/* --- Buttons --- */
.ce-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ce-space-2);
    padding: var(--ce-space-2) var(--ce-space-4);
    font-family: var(--ce-font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: var(--ce-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--ce-transition-fast);
    white-space: nowrap;
}

.ce-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ce-btn svg {
    width: 16px;
    height: 16px;
}

.ce-btn-primary {
    background: var(--ce-teal);
    color: white;
    border-color: var(--ce-teal);
}

.ce-btn-primary:hover:not(:disabled) {
    background: var(--ce-teal-dark);
    border-color: var(--ce-teal-dark);
}


.ce-btn-secondary {
    background: var(--ce-bg-primary);
    color: var(--ce-text-secondary);
    border-color: var(--ce-border-primary);
}

.ce-btn-secondary:hover:not(:disabled) {
    background: var(--ce-bg-secondary);
    border-color: var(--ce-border-secondary);
}

.ce-btn-ghost {
    background: transparent;
    color: var(--ce-text-muted);
}

.ce-btn-ghost:hover:not(:disabled) {
    background: var(--ce-bg-tertiary);
}

.ce-btn-danger {
    background: var(--ce-danger);
    color: white;
    border-color: var(--ce-danger);
}

.ce-btn-danger:hover:not(:disabled) {
    background: #dc2626;
    border-color: #dc2626;
}

.ce-btn-sm {
    padding: var(--ce-space-1) var(--ce-space-3);
    font-size: 0.8125rem;
}

.ce-btn-lg {
    padding: var(--ce-space-3) var(--ce-space-6);
    font-size: 0.9375rem;
}

.ce-btn-outline {
    background: transparent;
    border: 1px solid var(--ce-border-primary);
    color: var(--ce-text-secondary);
}

.ce-btn-outline:hover:not(:disabled) {
    background: var(--ce-bg-secondary);
    border-color: var(--ce-border-secondary);
}

.ce-btn-danger-outline {
    background: transparent;
    border-color: var(--ce-danger);
    color: var(--ce-danger);
}

.ce-btn-danger-outline:hover:not(:disabled) {
    background: var(--ce-danger);
    color: white;
}

.ce-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--ce-radius-md);
    border: 1px solid var(--ce-border-primary);
    background: transparent;
    color: var(--ce-text-muted);
    cursor: pointer;
    transition: all var(--ce-transition-fast);
}

.ce-btn-icon:hover {
    background: var(--ce-bg-secondary);
    color: var(--ce-text-primary);
}

.ce-btn-icon-danger:hover {
    background: var(--ce-danger-light);
    color: var(--ce-danger);
    border-color: var(--ce-danger);
}

/* Borderless icon button — for dense action rows where a border would be noise. */
.ce-btn-icon-ghost {
    border-color: transparent;
    background: transparent;
}

.ce-btn-icon-ghost:hover {
    background: var(--ce-bg-tertiary);
    border-color: transparent;
}

/* Compact icon button. */
.ce-btn-icon-sm {
    width: 28px;
    height: 28px;
}

.ce-btn-icon-sm svg {
    width: 14px;
    height: 14px;
}

.ce-btn-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Tabs --- */
.ce-tabs {
    display: flex;
    gap: var(--ce-space-1);
    margin-bottom: var(--ce-space-6);
    border-bottom: 2px solid var(--ce-border-primary);
}

.ce-tab {
    display: flex;
    align-items: center;
    gap: var(--ce-space-2);
    padding: var(--ce-space-3) var(--ce-space-5);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--ce-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--ce-font-sans);
    transition: all var(--ce-transition-fast);
}

.ce-tab:hover {
    color: var(--ce-text-primary);
}

.ce-tab.active {
    color: var(--ce-teal);
    border-bottom-color: var(--ce-teal);
}

.ce-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--ce-radius-full);
    background: var(--ce-bg-tertiary);
    color: var(--ce-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.ce-tab.active .ce-tab-count {
    background: rgba(0, 169, 157, 0.1);
    color: var(--ce-teal);
}

.ce-tab-count-pending {
    background: var(--ce-warning-light) !important;
    color: var(--ce-warning) !important;
}

/* --- Tables --- */
.ce-table-container {
    overflow-x: auto;
}

/* While a column filter menu is open, reserve enough vertical room that the absolutely positioned
   dropdown is never clipped by the container's overflow (overflow-x:auto makes overflow-y compute to
   auto, so a short/empty table would otherwise cut the menu off). Sized to the tallest menu. */
.ce-table-menu-open {
    min-height: 320px;
}

.ce-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ce-table th {
    position: relative;
    text-align: left;
    padding: var(--ce-space-3) var(--ce-space-4);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ce-text-muted);
    background: var(--ce-bg-secondary);
    border-bottom: 1px solid var(--ce-border-primary);
}

/* Drag-to-resize handle appended to header cells by credentryDashboard.initColumnResize. */
.ce-col-resize {
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    z-index: 1;
}
.ce-col-resize:hover {
    background: var(--ce-border-primary);
}

/* Clickable entity-list cell (per-column link override). */
.ce-entity-link {
    color: var(--ce-teal, #0d9488);
    text-decoration: none;
    cursor: pointer;
}
.ce-entity-link:hover {
    text-decoration: underline;
}

.ce-table td {
    padding: var(--ce-space-4);
    border-bottom: 1px solid var(--ce-border-secondary);
    color: var(--ce-text-secondary);
}

.ce-table tr:hover td {
    background: var(--ce-bg-secondary);
}

.ce-table-actions {
    display: flex;
    align-items: center;
    gap: var(--ce-space-2);
}

/* --- Built-in Excel-style column sort/filter dropdown (opt-in via CeColumn.Sortable/Filterable) --- */

/* Anchor for the absolutely-positioned dropdown; sits inside the th. */
.ce-th-menu-anchor {
    position: relative;
    display: inline-block;
}

/* Header becomes a menu trigger. Inherits the th's uppercase/letter-spacing typography. */
.ce-th-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--ce-space-1);
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.ce-th-trigger:hover {
    color: var(--ce-text-primary);
}

.ce-th-trigger-active {
    color: var(--ce-accent);
}

/* Active sort arrow / filter dot indicator on the header. */
.ce-th-ind {
    font-size: 0.7em;
    line-height: 1;
    color: var(--ce-accent);
}

.ce-th-ind-filter {
    font-size: 0.5em;
}

/* Subtle "opens a menu" caret; brightens on hover/active. */
.ce-th-caret {
    font-size: 0.6em;
    line-height: 1;
    opacity: 0.35;
    transition: opacity 0.12s ease;
}

.ce-th-trigger:hover .ce-th-caret,
.ce-th-trigger-active .ce-th-caret {
    opacity: 0.7;
}

/* Full-viewport transparent layer: any outside click closes the open menu (no JS). */
.ce-th-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

/* The dropdown itself, anchored under the header cell. */
.ce-th-menu {
    position: absolute;
    top: calc(100% + var(--ce-space-1));
    left: 0;
    z-index: 41;
    min-width: 220px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    background: var(--ce-bg-primary);
    border: 1px solid var(--ce-border-primary);
    border-radius: var(--ce-radius-md);
    box-shadow: var(--ce-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.18));
    padding: var(--ce-space-1);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

/* Columns near the right edge open leftwards so the menu is not clipped. */
.ce-th-menu-end {
    left: auto;
    right: 0;
}

/* A group inside the menu (sort actions, then filter controls) — divider between groups. */
.ce-th-menu-section {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-1);
    padding: var(--ce-space-1);
}

.ce-th-menu-section + .ce-th-menu-section {
    border-top: 1px solid var(--ce-border-secondary);
    margin-top: var(--ce-space-1);
    padding-top: var(--ce-space-2);
}

/* An actionable row (sort ascending/descending, clear). */
.ce-th-menu-item {
    display: flex;
    align-items: center;
    gap: var(--ce-space-2);
    width: 100%;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--ce-text-primary);
    background: transparent;
    border: none;
    border-radius: var(--ce-radius-sm);
    padding: var(--ce-space-1) var(--ce-space-2);
    cursor: pointer;
}

.ce-th-menu-item:hover {
    background: var(--ce-bg-secondary);
}

.ce-th-menu-item-active {
    color: var(--ce-accent);
    font-weight: 600;
    background: color-mix(in srgb, var(--ce-accent) 12%, transparent);
}

.ce-th-menu-icon {
    font-size: 0.85em;
    opacity: 0.8;
}

.ce-th-menu-clear {
    color: var(--ce-text-muted);
}

/* The "contains" text box. */
.ce-th-menu-search {
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--ce-text-primary);
    background: var(--ce-bg-primary);
    border: 1px solid var(--ce-border-primary);
    border-radius: var(--ce-radius-sm);
    padding: var(--ce-space-1) var(--ce-space-2);
    width: 100%;
    box-sizing: border-box;
}

.ce-th-menu-search:focus {
    outline: none;
    border-color: var(--ce-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ce-accent) 25%, transparent);
}

/* Operator selector (Contains/Equals…, Between/=/>…, On/Before…) above the filter operand inputs. */
.ce-th-menu-op {
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--ce-text-primary);
    background: var(--ce-bg-primary);
    border: 1px solid var(--ce-border-primary);
    border-radius: var(--ce-radius-sm);
    padding: var(--ce-space-1) var(--ce-space-2);
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.ce-th-menu-op:focus {
    outline: none;
    border-color: var(--ce-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ce-accent) 25%, transparent);
}

/* Numeric / date operand input(s). A single input fills the row; Between renders two in a range. */
.ce-th-menu-num {
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--ce-text-primary);
    background: var(--ce-bg-primary);
    border: 1px solid var(--ce-border-primary);
    border-radius: var(--ce-radius-sm);
    padding: var(--ce-space-1) var(--ce-space-2);
    width: 100%;
    box-sizing: border-box;
}

.ce-th-menu-num:focus {
    outline: none;
    border-color: var(--ce-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ce-accent) 25%, transparent);
}

/* Two-operand "Between" row: [min] – [max]. */
.ce-th-menu-range {
    display: flex;
    align-items: center;
    gap: var(--ce-space-1);
}

.ce-th-menu-range-sep {
    color: var(--ce-text-muted);
    flex: 0 0 auto;
}

/* Let the two operand inputs shrink to fit the menu — native date inputs otherwise keep a wide
   intrinsic min-width and overflow the popover. */
.ce-th-menu-range > .ce-th-menu-num {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

/* Scrollable checkbox list of distinct values. */
.ce-th-menu-checklist {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
}

.ce-th-menu-check {
    display: flex;
    align-items: center;
    gap: var(--ce-space-2);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--ce-text-primary);
    padding: var(--ce-space-1) var(--ce-space-2);
    border-radius: var(--ce-radius-sm);
    cursor: pointer;
}

.ce-th-menu-check:hover {
    background: var(--ce-bg-secondary);
}

.ce-th-menu-check input {
    accent-color: var(--ce-accent);
    cursor: pointer;
}

.ce-th-menu-check span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Clear all filters" bar shown above the table while any filter is active. */
.ce-table-filterbar {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 var(--ce-space-2);
}

.ce-table-clear-filters {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ce-accent);
    background: transparent;
    border: 1px solid var(--ce-border-primary);
    border-radius: var(--ce-radius-sm);
    padding: var(--ce-space-1) var(--ce-space-3);
    cursor: pointer;
}

.ce-table-clear-filters:hover {
    background: var(--ce-bg-secondary);
}

/* Row shown when active filters hide every row. */
.ce-table-nomatch {
    text-align: center;
    color: var(--ce-text-muted);
    font-style: italic;
    padding: var(--ce-space-6) var(--ce-space-4);
}

/* --- Responsive columns (CeDataTable Flexible mode + CeColumn Truncate/Mono/Copyable) --- */

/* AUTO layout (not fixed): a column's explicit width is a PREFERRED width, so content wider
   than it (icon buttons, badges) widens the column instead of being clipped — the old fixed
   layout clipped action cells and pushed their overflow past the table edge, re-creating a
   horizontal scrollbar. Unwidthed flex columns get an equal percentage share from CeDataTable
   (+ td max-width:0 below) so they absorb the remainder and Truncate columns ellipsize when
   tight. Fit columns (width:1% + nowrap) shrink to their content and NEVER clip. The small
   min-width means the table still COMPRESSES to the container on wide viewports and only falls
   back to the container's horizontal scroll when genuinely narrow (host stylesheets must not
   force min-width:max-content on flexible tables). */
.ce-table-flexible {
    table-layout: auto;
    width: 100%;
    min-width: 640px;
}

/* CeColumn Fit: size the column to its content (auto layout never shrinks a column below its
   min-content width, so the content — e.g. a row of icon buttons — is never clipped). */
.ce-table-flexible th.ce-col-fit,
.ce-table-flexible td.ce-col-fit {
    width: 1%;
    white-space: nowrap;
}

/* Unwidthed flex columns: max-width:0 caps the cells' content contribution to the auto layout,
   so the percentage share on the header decides the width and inner Truncate spans ellipsize. */
.ce-table-flexible td.ce-col-flex {
    max-width: 0;
}

.ce-cell-content {
    min-width: 0;
}

.ce-cell-truncate {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ce-cell-mono {
    font-family: var(--ce-font-mono);
    font-size: 0.8125rem;
}

.ce-cell-wrap {
    display: flex;
    align-items: center;
    gap: var(--ce-space-1);
    min-width: 0;
}

.ce-cell-wrap .ce-cell-truncate {
    flex: 1 1 auto;
}

.ce-cell-copy-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--ce-radius-sm);
    color: var(--ce-text-muted);
    cursor: pointer;
    transition: all var(--ce-transition-fast);
}

.ce-cell-copy-btn:hover {
    background: var(--ce-bg-tertiary);
    color: var(--ce-text-secondary);
}

.ce-cell-copy-btn svg {
    width: 13px;
    height: 13px;
}

/* --- Badges --- */
.ce-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ce-space-1);
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--ce-radius-full);
}

.ce-badge-success {
    background: var(--ce-success-light);
    color: var(--ce-badge-success-text, #047857);
}

.ce-badge-warning {
    background: var(--ce-warning-light);
    color: var(--ce-badge-warning-text, #b45309);
}

.ce-badge-danger {
    background: var(--ce-danger-light);
    color: var(--ce-badge-danger-text, #b91c1c);
}

.ce-badge-info {
    background: var(--ce-info-light);
    color: var(--ce-badge-info-text, #1d4ed8);
}

.ce-badge-secondary {
    background: var(--ce-bg-tertiary);
    color: var(--ce-text-secondary);
}

.ce-badge-gray,
.ce-badge-neutral {
    background: var(--ce-gray-100);
    color: var(--ce-gray-600);
}

/* --- Forms --- */
.ce-form-group {
    margin-bottom: var(--ce-space-5);
}

.ce-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ce-text-secondary);
    margin-bottom: var(--ce-space-2);
}

/* Compact form label (native BrandSettings / DataSourceWizard parity). */
.ce-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--ce-text-secondary);
}

.ce-form-input,
.ce-input {
    width: 100%;
    padding: var(--ce-space-2) var(--ce-space-3);
    font-family: var(--ce-font-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    min-height: 38px;
    color: var(--ce-text-primary);
    background: var(--ce-input-bg, var(--ce-bg-primary));
    border: 1px solid var(--ce-border-primary);
    border-radius: var(--ce-radius-md);
    transition: all var(--ce-transition-fast);
}

.ce-form-input:focus,
.ce-input:focus {
    outline: none;
    border-color: var(--ce-teal);
    box-shadow: 0 0 0 3px rgba(0, 169, 157, 0.1);
}

.ce-form-input:hover:not(:focus):not(:disabled),
.ce-input:hover:not(:focus):not(:disabled) {
    border-color: var(--ce-gray-300);
}

.ce-form-input:disabled,
.ce-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ce-form-input::placeholder,
.ce-input::placeholder {
    color: var(--ce-gray-400);
}

.ce-form-select,
.ce-select {
    width: 100%;
    padding: var(--ce-space-2) var(--ce-space-3);
    padding-right: 2.5rem;
    font-family: var(--ce-font-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    min-height: 38px;
    color: var(--ce-text-primary);
    background-color: var(--ce-input-bg, var(--ce-bg-primary));
    border: 1px solid var(--ce-border-primary);
    border-radius: var(--ce-radius-md);
    transition: all var(--ce-transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

.ce-form-select:focus,
.ce-select:focus {
    outline: none;
    border-color: var(--ce-teal);
    box-shadow: 0 0 0 3px rgba(0, 169, 157, 0.1);
}

.ce-form-select:hover:not(:focus):not(:disabled),
.ce-select:hover:not(:focus):not(:disabled) {
    border-color: var(--ce-gray-300);
}

.ce-form-select:disabled,
.ce-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ce-form-select[multiple],
.ce-select[multiple] {
    padding-right: var(--ce-space-3);
    background-image: none;
}

.ce-form-textarea {
    min-height: 100px;
    resize: vertical;
}

.ce-form-error {
    font-size: 0.8125rem;
    color: var(--ce-danger);
    margin-top: var(--ce-space-1);
}

/* --- Modal --- */
.ce-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: var(--ce-space-4);
    animation: fadeIn 0.2s ease-out;
}

.ce-modal {
    background: var(--ce-bg-primary);
    border-radius: var(--ce-radius-xl);
    box-shadow: var(--ce-shadow-xl);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease-out;
}

.ce-modal-lg {
    max-width: 700px;
}

.ce-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ce-space-5) var(--ce-space-6);
    border-bottom: 1px solid var(--ce-border-secondary);
}

.ce-modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ce-text-primary);
    margin: 0;
}

.ce-modal-close {
    width: 32px;
    height: 32px;
    border-radius: var(--ce-radius-md);
    border: none;
    background: transparent;
    color: var(--ce-gray-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--ce-transition-fast);
}

.ce-modal-close:hover {
    background: var(--ce-gray-100);
    color: var(--ce-gray-600);
}

.ce-modal-body {
    padding: var(--ce-space-6);
    overflow-y: auto;
}

.ce-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ce-space-3);
    padding: var(--ce-space-4) var(--ce-space-6);
    border-top: 1px solid var(--ce-border-secondary);
    background: var(--ce-bg-secondary);
}

.ce-modal-sm {
    max-width: 420px !important;
}

/* --- Form Utilities --- */
.ce-form-row-modal {
    display: flex;
    gap: var(--ce-space-4);
}

.ce-form-row-modal .ce-form-group {
    flex: 1;
}

.ce-validation-error {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--ce-danger);
}

/* Template Picker */
.ce-template-intro {
    font-size: 0.875rem;
    color: var(--ce-text-muted);
    margin-bottom: var(--ce-space-6);
}

.ce-template-grid {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-6);
}

.ce-template-category h4 {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ce-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--ce-space-3);
}

.ce-template-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--ce-space-3);
}

.ce-template-card {
    display: flex;
    align-items: flex-start;
    gap: var(--ce-space-3);
    padding: var(--ce-space-4);
    background: var(--ce-bg-secondary);
    border: 1px solid var(--ce-border-primary);
    border-radius: var(--ce-radius-md);
    cursor: pointer;
    text-align: left;
    transition: all var(--ce-transition-fast);
}

.ce-template-card:hover {
    border-color: var(--ce-teal);
    background: var(--ce-bg-tertiary);
}

.ce-template-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--ce-radius-sm);
    background: var(--ce-teal-100);
    color: var(--ce-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ce-template-icon svg {
    width: 20px;
    height: 20px;
}

.ce-template-info {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-1);
    min-width: 0;
}

.ce-template-name {
    font-weight: 600;
    color: var(--ce-text-primary);
}

.ce-template-desc {
    font-size: 0.75rem;
    color: var(--ce-text-muted);
    line-height: 1.4;
}

/* --- Animations --- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* --- Search --- */
.ce-search {
    position: relative;
    flex: 0 1 280px;
    min-width: 110px;
}

.ce-search-input {
    width: 100%;
    padding: var(--ce-space-2) var(--ce-space-3) var(--ce-space-2) 2.5rem;
    font-size: 0.875rem;
    color: var(--ce-text-primary);
    background: var(--ce-bg-tertiary);
    border: 1px solid transparent;
    border-radius: var(--ce-radius-md);
    transition: all var(--ce-transition-fast);
}

.ce-search-input:focus {
    background: var(--ce-bg-primary);
    border-color: var(--ce-border-primary);
    outline: none;
}

.ce-search-input::placeholder {
    color: var(--ce-text-muted);
}

.ce-search-icon {
    position: absolute;
    left: var(--ce-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ce-gray-400);
    width: 16px;
    height: 16px;
}

/* --- Empty State --- */
.ce-empty-state {
    text-align: center;
    padding: var(--ce-space-12) var(--ce-space-6);
}

.ce-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--ce-space-4);
    color: var(--ce-gray-300);
}

.ce-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ce-gray-700);
    margin-bottom: var(--ce-space-2);
}

.ce-empty-text {
    font-size: 0.875rem;
    color: var(--ce-gray-500);
    margin-bottom: var(--ce-space-6);
}

/* --- Loading --- */
.ce-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ce-space-8);
}

.ce-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--ce-gray-200);
    border-top-color: var(--ce-teal);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- Pagination --- */
.ce-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ce-space-4) 0;
}

.ce-pagination-info {
    font-size: 0.875rem;
    color: var(--ce-gray-500);
}

.ce-pagination-buttons {
    display: flex;
    gap: var(--ce-space-1);
}

.ce-pagination-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 var(--ce-space-3);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ce-gray-600);
    background: var(--ce-white);
    border: 1px solid var(--ce-gray-200);
    border-radius: var(--ce-radius-md);
    cursor: pointer;
    transition: all var(--ce-transition-fast);
}

.ce-pagination-btn:hover:not(:disabled) {
    background: var(--ce-gray-50);
    border-color: var(--ce-gray-300);
}

.ce-pagination-btn.active {
    background: var(--ce-teal);
    border-color: var(--ce-teal);
    color: white;
}

.ce-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Chart Placeholder --- */
.ce-chart-container {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--ce-gray-50) 0%, var(--ce-white) 100%);
    border-radius: var(--ce-radius-md);
    color: var(--ce-gray-400);
    font-size: 0.875rem;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .ce-sidebar {
        transform: translateX(-100%);
    }

    /* Off-canvas mode: the header's .ce-mobile-toggle drives the sidebar, so the
       breadcrumb-row collapse hamburger is redundant here. */
    .ce-sidebar-collapse-btn {
        display: none;
    }

    .ce-dashboard-header {
        flex-wrap: wrap;
        gap: var(--ce-space-3);
    }

    .ce-dashboard-header .ce-dashboard-tabs {
        flex-wrap: wrap;
        min-width: 0;
    }

    .ce-dashboard-header .ce-dashboard-actions {
        margin-left: auto;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .ce-sidebar.open {
        transform: translateX(0);
    }

    .ce-main {
        margin-left: 0;
    }

    .ce-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ce-content {
        padding: var(--ce-space-4);
    }

    .ce-crumbs {
        padding: var(--ce-space-2) var(--ce-space-4) 0 var(--ce-space-2);
    }

    .ce-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ce-space-4);
    }

    .ce-stat-grid {
        grid-template-columns: 1fr;
    }

    .ce-header {
        padding: 0 var(--ce-space-4);
        gap: var(--ce-space-2);
    }

    .ce-header-left {
        gap: var(--ce-space-2);
    }

    .ce-search {
        display: none;
    }
}

/* --- Utility Classes --- */
.text-muted { color: var(--ce-gray-500); }
.text-success { color: var(--ce-success); }
.text-warning { color: var(--ce-warning); }
.text-danger { color: var(--ce-danger); }
.text-info { color: var(--ce-info); }

.font-mono { font-family: var(--ce-font-mono); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.mt-2 { margin-top: var(--ce-space-2); }
.mt-4 { margin-top: var(--ce-space-4); }
.mt-6 { margin-top: var(--ce-space-6); }
.mb-2 { margin-bottom: var(--ce-space-2); }
.mb-4 { margin-bottom: var(--ce-space-4); }
.mb-6 { margin-bottom: var(--ce-space-6); }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--ce-space-2); }
.gap-4 { gap: var(--ce-space-4); }

/* --- Blazor Specific --- */
.ce-app h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--ce-success);
}

.invalid {
    outline: 1px solid var(--ce-danger);
}

.validation-message {
    color: var(--ce-danger);
    font-size: 0.8125rem;
    margin-top: var(--ce-space-1);
}

.blazor-error-boundary {
    background: var(--ce-danger);
    padding: var(--ce-space-4);
    color: white;
    border-radius: var(--ce-radius-md);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ce-danger);
    color: white;
    padding: var(--ce-space-4);
    text-align: center;
    z-index: 9999;
}

/* --- Additional Component Styles --- */

/* Stats Row */
.ce-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ce-space-4);
}

.ce-stat-card {
    display: flex;
    align-items: center;
    gap: var(--ce-space-4);
    background: var(--ce-bg-primary);
    padding: var(--ce-space-4) var(--ce-space-5);
    border-radius: var(--ce-radius-lg);
    box-shadow: var(--ce-shadow-sm);
    border: 1px solid var(--ce-border-primary);
}

.ce-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--ce-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ce-stat-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.ce-stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ce-gray-500);
    margin-bottom: 2px;
}

.ce-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ce-text-primary);
    line-height: 1.2;
}

/* Avatar */
.ce-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--ce-radius-full);
    background: linear-gradient(135deg, var(--ce-teal) 0%, var(--ce-teal-dark) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.ce-avatar-lg {
    width: 48px;
    height: 48px;
    font-size: 0.875rem;
}

/* Product Tag */
.ce-product-tag {
    display: inline-block;
    padding: var(--ce-space-1) var(--ce-space-2);
    background: var(--ce-gray-100);
    color: var(--ce-gray-700);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--ce-radius-sm);
}

.ce-product-tag-sm {
    padding: 2px var(--ce-space-2);
    font-size: 0.6875rem;
}

/* Filter Group */
.ce-filter-group {
    display: flex;
    gap: var(--ce-space-2);
    align-items: center;
}

/* Table Footer with Pagination */
.ce-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ce-space-4);
    border-top: 1px solid var(--ce-gray-100);
}

.ce-pagination {
    display: flex;
    gap: var(--ce-space-1);
}

.ce-btn-active {
    background: var(--ce-teal) !important;
    color: white !important;
}

/* Info Items for Tenant Cards */
.ce-info-item {
    padding: var(--ce-space-2);
    background: var(--ce-gray-50);
    border-radius: var(--ce-radius-sm);
}

.ce-info-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ce-gray-500);
    margin-bottom: 2px;
}

.ce-info-value {
    font-size: 0.875rem;
    color: var(--ce-gray-900);
    font-weight: 500;
}

/* Health Indicator */
.ce-health-indicator {
    width: 8px;
    height: 8px;
    border-radius: var(--ce-radius-full);
}

.ce-health-good {
    background: var(--ce-success);
}

.ce-health-warning {
    background: var(--ce-warning);
}

.ce-health-danger {
    background: var(--ce-danger);
}

/* Empty State */
.ce-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ce-space-12);
    text-align: center;
}

.ce-empty-state h3 {
    margin: var(--ce-space-4) 0 var(--ce-space-2);
    color: var(--ce-gray-700);
    font-size: 1rem;
}

.ce-empty-state p {
    color: var(--ce-gray-500);
    font-size: 0.875rem;
    margin: 0;
}

/* Sync Status */
.ce-sync-status {
    display: inline-flex;
    align-items: center;
    gap: var(--ce-space-1);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px var(--ce-space-2);
    border-radius: var(--ce-radius-sm);
}

.ce-sync-success {
    background: var(--ce-success-light);
    color: #047857;
}

.ce-sync-pending {
    background: var(--ce-warning-light);
    color: #b45309;
}

/* Compact Table */
.ce-table-compact {
    font-size: 0.8125rem;
}

.ce-table-compact th,
.ce-table-compact td {
    padding: var(--ce-space-2) var(--ce-space-3);
}

/* Small Input */
.ce-form-input-sm {
    padding: var(--ce-space-2) var(--ce-space-3);
    font-size: 0.8125rem;
}

/* Integration Icon */
.ce-integration-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--ce-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Status Dot */
.ce-status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--ce-radius-full);
    display: inline-block;
}

.ce-status-healthy {
    background: var(--ce-success);
}

.ce-status-error {
    background: var(--ce-danger);
}

.ce-status-warning {
    background: var(--ce-warning);
}

/* Settings Navigation */
.ce-settings-nav {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-1);
    position: sticky;
    top: calc(var(--header-height) + var(--ce-space-6));
}

.ce-settings-nav-item {
    display: flex;
    align-items: center;
    gap: var(--ce-space-3);
    padding: var(--ce-space-3) var(--ce-space-4);
    color: var(--ce-gray-600);
    text-decoration: none;
    border-radius: var(--ce-radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--ce-transition-fast);
}

.ce-settings-nav-item:hover {
    background: var(--ce-gray-100);
    color: var(--ce-gray-900);
}

.ce-settings-nav-item.active {
    background: var(--ce-teal);
    color: white;
}

/* Toggle Switch */
.ce-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ce-space-4);
    border-bottom: 1px solid var(--ce-gray-100);
}

.ce-toggle-row:last-child {
    border-bottom: none;
}

.ce-toggle-label {
    font-weight: 500;
    color: var(--ce-gray-900);
    font-size: 0.875rem;
}

.ce-toggle-description {
    font-size: 0.8125rem;
    color: var(--ce-gray-500);
    margin-top: 2px;
}

.ce-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.ce-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ce-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ce-gray-300);
    transition: var(--ce-transition-fast);
    border-radius: var(--ce-radius-full);
}

.ce-toggle-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: var(--ce-transition-fast);
    border-radius: var(--ce-radius-full);
    box-shadow: var(--ce-shadow-sm);
}

.ce-toggle input:checked + .ce-toggle-slider {
    background-color: var(--ce-teal);
}

.ce-toggle input:checked + .ce-toggle-slider::before {
    transform: translateX(20px);
}

/* Card Footer */
.ce-card-footer {
    padding: var(--ce-space-4) var(--ce-space-6);
    border-top: 1px solid var(--ce-gray-100);
    display: flex;
    justify-content: flex-end;
    gap: var(--ce-space-3);
}

/* Inactive table row (native Users page: deactivated users dim) */
.ce-row-inactive {
    opacity: 0.6;
}

/* Card Hover Effect */
.ce-card-hover {
    transition: all var(--ce-transition-normal);
}

.ce-card-hover:hover {
    box-shadow: var(--ce-shadow-lg);
    transform: translateY(-2px);
}

/* Form Hint */
.ce-form-hint {
    font-size: 0.75rem;
    color: var(--ce-text-muted);
    margin-top: var(--ce-space-1);
}

/* Gap utilities */
.gap-1 { gap: var(--ce-space-1); }
.gap-3 { gap: var(--ce-space-3); }

/* Small Form Select */
.ce-form-select-sm {
    padding: var(--ce-space-1) var(--ce-space-2);
    padding-right: 2rem;
    font-size: 0.8125rem;
}

/* Badge Info — token-driven so the dark theme's --ce-badge-info-text override applies. */
.ce-badge-info {
    background-color: var(--ce-info-light);
    color: var(--ce-badge-info-text, #1d4ed8);
}

/* --- Theme Toggle --- */
.ce-theme-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: var(--ce-radius-md);
    border: none;
    background: transparent;
    color: var(--ce-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--ce-transition-fast);
}

.ce-theme-toggle:hover {
    background: var(--ce-bg-tertiary);
    color: var(--ce-text-primary);
}

.ce-theme-toggle svg {
    width: 20px;
    height: 20px;
}

.ce-theme-toggle .sun-icon {
    display: none;
}

.ce-theme-toggle .moon-icon {
    display: block;
}

[data-theme="dark"] .ce-theme-toggle .sun-icon {
    display: block;
}

[data-theme="dark"] .ce-theme-toggle .moon-icon {
    display: none;
}

/* Tenant brand policy: "Enable Dark Mode" off — the theme toggle must not be offered.
   The flag is stamped by PortalLayout on the shell root (server render) and mirrored onto
   <html> by portal-theme.js (window.applyThemePolicy), so the rule hits under any host and
   render mode, including instant apply-on-save without a reload. */
[data-ce-dark-enabled="false"] .ce-theme-toggle {
    display: none !important;
}

/* --- Logo Image Styles --- */
.ce-logo-img {
    height: 32px;
    width: auto;
}

/* Auth-page logo (login / sso-callback / invite-accept). Constrains the brand logo
   on the centered auth cards. Login.razor defines this locally; sharing it here so
   SsoCallback + InviteAccept (which lack the local rule) don't render it full-size. */
.ce-login-logo-img {
    height: 40px;
    width: auto;
    margin: 0 auto;
}

.ce-tenant-logo {
    max-height: 36px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.92);
    padding: 4px 10px;
    border-radius: 6px;
}

.ce-logo-img-dark {
    display: none;
}

.ce-logo-img-light {
    display: block;
}

[data-theme="dark"] .ce-logo-img-dark {
    display: block;
}

[data-theme="dark"] .ce-logo-img-light {
    display: none;
}

/*
 * The dark logo variant is designed as light/white artwork on transparent, meant to
 * sit directly on the dark sidebar. The white pill from .ce-tenant-logo would render it
 * white-on-white (a blank box), so drop the pill for the dark variant in dark mode.
 * Two classes + the attribute selector (0,3,0) outweigh the bare .ce-tenant-logo (0,1,0).
 */
[data-theme="dark"] .ce-logo-img-dark.ce-tenant-logo {
    background: transparent;
    padding: 0;
}

/* When no separate dark variant exists, always show it */
.ce-logo-no-dark-variant {
    display: block;
}

[data-theme="dark"] .ce-logo-no-dark-variant {
    display: block;
}

/* The compact icon-only mark is hidden by default — the EXPANDED header shows the wordmark. It only
   appears when the sidebar is collapsed (rule below). Without this default, a host that supplies a
   LogoIconUrl would show the icon AND the wordmark side by side in the expanded header. */
.ce-logo-icon-only {
    display: none;
}

/* Collapsed-sidebar logo swap. The header brand lives in .ce-header (OUTSIDE .ce-sidebar), so the
   swap keys off `.ce-app.collapsed` — the class portal-shell.js mirrors onto .ce-app when collapsing.
   The wordmark/full-logo is only hidden when the host actually supplies a compact icon to replace it
   (.ce-logo carries .ce-logo--has-icon then). WITHOUT an icon we KEEP the full logo on collapse rather
   than blanking the header — .ce-header is full-width, so the wordmark still fits. */
.ce-app.collapsed .ce-logo--has-icon .ce-logo-text {
    display: none;
}

.ce-app.collapsed .ce-logo--has-icon .ce-logo-img:not(.ce-logo-icon-only) {
    display: none;
}

.ce-app.collapsed .ce-logo-icon-only {
    display: block;
}

/* Page Title for dark mode */
.ce-page-title {
    color: var(--ce-text-primary);
}

.ce-page-subtitle {
    color: var(--ce-text-muted);
}

/* Secondary button dark mode fix */
.ce-btn-secondary {
    background: var(--ce-bg-primary);
    color: var(--ce-text-secondary);
    border-color: var(--ce-border-primary);
}

.ce-btn-secondary:hover:not(:disabled) {
    background: var(--ce-bg-secondary);
    border-color: var(--ce-border-secondary);
}

/* Pagination button dark mode */
.ce-pagination-btn {
    color: var(--ce-text-secondary);
    background: var(--ce-bg-primary);
    border: 1px solid var(--ce-border-primary);
}

.ce-pagination-btn:hover:not(:disabled) {
    background: var(--ce-bg-secondary);
    border-color: var(--ce-border-secondary);
}

/* Header button dark mode */
.ce-header-btn {
    color: var(--ce-text-muted);
}

.ce-header-btn:hover {
    background: var(--ce-bg-tertiary);
    color: var(--ce-text-primary);
}

/* Notification dot border fix for dark mode */
.ce-notification-dot {
    border-color: var(--ce-bg-primary);
}

/* Info items dark mode */
.ce-info-item {
    background: var(--ce-bg-secondary);
}

.ce-info-value {
    color: var(--ce-text-primary);
}

/* Product tag dark mode */
.ce-product-tag {
    background: var(--ce-bg-tertiary);
    color: var(--ce-text-secondary);
}

/* Toggle row dark mode */
.ce-toggle-row {
    border-bottom-color: var(--ce-border-secondary);
}

.ce-toggle-label {
    color: var(--ce-text-primary);
}

/* Settings nav item dark mode */
.ce-settings-nav-item {
    color: var(--ce-text-secondary);
}

.ce-settings-nav-item:hover {
    background: var(--ce-bg-tertiary);
    color: var(--ce-text-primary);
}

/* Chart container dark mode */
.ce-chart-container {
    background: linear-gradient(180deg, var(--ce-bg-secondary) 0%, var(--ce-bg-primary) 100%);
    color: var(--ce-text-muted);
}

/* Table footer dark mode */
.ce-table-footer {
    border-top-color: var(--ce-border-secondary);
}

/* --- Logout Button --- */
.ce-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    border-radius: var(--ce-radius-md);
    transition: all var(--ce-transition-fast);
    margin-left: auto;
}

.ce-logout-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ef4444;
}

.ce-user-card {
    display: flex;
    align-items: center;
    gap: var(--ce-space-3);
    padding: var(--ce-space-3);
    border-radius: var(--ce-radius-md);
    background: rgba(255, 255, 255, 0.05);
}

/* --- Toast Notifications --- */
.ce-toast-container {
    position: fixed;
    top: calc(var(--header-height) + var(--ce-space-4));
    right: var(--ce-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-3);
    z-index: 3000;
    max-width: 400px;
}

.ce-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--ce-space-3);
    padding: var(--ce-space-4);
    background: var(--ce-bg-primary);
    border-radius: var(--ce-radius-lg);
    box-shadow: var(--ce-shadow-lg);
    border: 1px solid var(--ce-border-primary);
    animation: slideInRight 0.3s ease-out;
}

.ce-toast-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.ce-toast-content {
    flex: 1;
    min-width: 0;
}

.ce-toast-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ce-text-primary);
    margin-bottom: 2px;
}

.ce-toast-message {
    font-size: 0.8125rem;
    color: var(--ce-text-muted);
}

.ce-toast-close {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--ce-text-muted);
    cursor: pointer;
    border-radius: var(--ce-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--ce-transition-fast);
}

.ce-toast-close:hover {
    background: var(--ce-bg-tertiary);
    color: var(--ce-text-primary);
}

.ce-toast-success .ce-toast-icon { color: var(--ce-success); }
.ce-toast-error .ce-toast-icon { color: var(--ce-danger); }
.ce-toast-warning .ce-toast-icon { color: var(--ce-warning); }
.ce-toast-info .ce-toast-icon { color: var(--ce-info); }

.ce-toast-success { border-left: 3px solid var(--ce-success); }
.ce-toast-error { border-left: 3px solid var(--ce-danger); }
.ce-toast-warning { border-left: 3px solid var(--ce-warning); }
.ce-toast-info { border-left: 3px solid var(--ce-info); }

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ce-toast-exit {
    animation: slideOutRight 0.2s ease-in forwards;
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* --- Loading Container --- */
.ce-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ce-space-12);
    text-align: center;
    color: var(--ce-text-muted);
}

.ce-loading-container p {
    margin-top: var(--ce-space-4);
}

/* --- Error Container --- */
.ce-error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ce-space-12);
    text-align: center;
}

.ce-error-container p {
    color: var(--ce-danger);
    margin-bottom: var(--ce-space-4);
}

/* --- Dropdown Menu --- */
.ce-dropdown {
    background: var(--ce-bg-primary);
    border: 1px solid var(--ce-border-primary);
    border-radius: var(--ce-radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

[data-theme="dark"] .ce-dropdown {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.ce-dropdown-item {
    display: block;
    padding: 10px 16px;
    font-size: 0.8125rem;
    color: var(--ce-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ce-transition-fast);
}

.ce-dropdown-item:hover {
    background: var(--ce-bg-secondary);
    color: var(--ce-text-primary);
}

/* --- Mobile Toggle --- */
.ce-mobile-toggle {
    display: none;
}

@media (max-width: 1024px) {
    .ce-mobile-toggle {
        display: flex;
    }
}

/* ==========================================
   DASHBOARD WIDGETS
   ========================================== */

/* Dashboard Grid — FINE resolution: the native 4-column / 140px-row grid doubled to 8 half-column
   units and 62px half-row units (2 units + the 16px gap = one legacy 140px row / one legacy column),
   so widgets can size in half steps while legacy spans (×2) render pixel-identical.
   CeDashboardGrid overrides grid-template-columns inline from its Columns parameter. */
.ce-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    /* FIXED half-row unit (was minmax(62px, auto)): a widget's height must derive from its
       rowSpan (rowSpan × 62px + gaps), never from its content. An `auto` max let a tall
       data-table/list grow its grid-row track to fit ALL its rows, which stretched the widget
       AND every neighbour sharing that row line (e.g. a chart) to the same giant height. With a
       fixed track, an overflowing table/list scrolls inside .ce-widget-body (overflow:auto)
       instead of expanding the track. Matches the native dashboard's fixed rowHeight. */
    grid-auto-rows: 62px;
    gap: 16px;
    /* No inner padding: the host page/layout already pads the content area, so the grid's
       widget edges must align flush with the filter bar and the rest of the page content
       (the native portal's extra inset read as unwanted side gutters in SDK hosts). */
    padding: 0;
}

.ce-dashboard-grid.ce-grid-drag-active {
    background: rgba(0, 169, 157, 0.02);
    border-radius: var(--ce-radius-lg);
}

/* Edit mode: the whole widget wrapper is draggable (grab anywhere to move it). */
.ce-dashboard-grid > div[draggable="true"] {
    cursor: move;
}

.ce-dashboard-grid > div[draggable="true"]:hover > .ce-widget {
    outline: 2px dashed var(--ce-teal);
    outline-offset: 2px;
}

/* The dimmed source while its native drag image is being dragged. */
.ce-dashboard-grid > div.ce-widget-dragging > .ce-widget {
    opacity: 0.5;
    outline: 2px solid var(--ce-teal);
}

/* Widget containers stretch to fill grid cell for equal heights */
.ce-dashboard-grid > div {
    display: flex;
    flex-direction: column;
    min-width: 0; /* grid item: charts/tables must shrink with their track */
}

.ce-dashboard-grid > div > .ce-widget {
    flex: 1;
}

/* Widget Base */
.ce-widget {
    background: var(--ce-bg-primary);
    border: 1px solid var(--ce-border-primary);
    border-radius: var(--ce-radius-lg);
    box-shadow: var(--ce-shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all var(--ce-transition-fast);
    height: 100%;
}

.ce-widget:hover {
    box-shadow: var(--ce-shadow-md);
}

.ce-widget-dragging {
    opacity: 0.5;
    transform: scale(0.98);
    box-shadow: var(--ce-shadow-lg);
}

.ce-widget-placeholder,
.ce-drop-placeholder {
    background: rgba(0, 169, 157, 0.1);
    border: 2px dashed var(--ce-teal);
    border-radius: var(--ce-radius-lg);
    transition: all var(--ce-transition-fast);
}

.ce-drop-placeholder.ce-drop-valid {
    background: rgba(0, 169, 157, 0.15);
    border-color: var(--ce-teal);
}

.ce-drop-placeholder.ce-drop-invalid {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--ce-danger, #ef4444);
    border-style: dashed;
}

/* Widget Sizes */
.ce-widget-small { grid-column: span 1; grid-row: span 1; }
.ce-widget-medium { grid-column: span 2; grid-row: span 1; }
.ce-widget-large { grid-column: span 2; grid-row: span 2; }
.ce-widget-wide { grid-column: span 4; grid-row: span 1; }
.ce-widget-full { grid-column: span 4; grid-row: span 2; }

/* Widget Header */
.ce-widget-header {
    display: flex;
    align-items: center;
    gap: var(--ce-space-2);
    padding: var(--ce-space-3) var(--ce-space-4);
    border-bottom: 1px solid var(--ce-border-secondary);
    min-height: 44px;
}

.ce-widget-drag-handle {
    cursor: grab;
    color: var(--ce-text-muted);
    padding: var(--ce-space-1);
    border-radius: var(--ce-radius-sm);
    transition: all var(--ce-transition-fast);
}

.ce-widget-drag-handle:hover {
    background: var(--ce-bg-tertiary);
    color: var(--ce-text-secondary);
}

.ce-widget-drag-handle:active {
    cursor: grabbing;
}

.ce-widget-drag-handle svg {
    width: 16px;
    height: 16px;
}

.ce-widget-title {
    flex: 1;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ce-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ce-widget-actions {
    display: flex;
    gap: var(--ce-space-1);
}

.ce-widget-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--ce-radius-sm);
    color: var(--ce-text-muted);
    cursor: pointer;
    transition: all var(--ce-transition-fast);
}

.ce-widget-btn:hover {
    background: var(--ce-bg-tertiary);
    color: var(--ce-text-secondary);
}

.ce-widget-btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--ce-danger);
}

.ce-widget-btn svg {
    width: 16px;
    height: 16px;
}

/* Widget Body */
.ce-widget-body {
    flex: 1;
    /* min-height:0 lets this flex child shrink below its content inside the fixed-height widget,
       so a tall table/list overflows HERE (overflow:auto scrolls) instead of forcing the widget —
       and its grid-row track — to grow. Without it the flex item's default min-height:auto keeps
       the body as tall as its content, defeating the scroll. */
    min-height: 0;
    padding: var(--ce-space-4);
    overflow: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

.ce-widget-body .ce-chart-panel {
    flex: 1;
    min-height: 0;
}

.ce-widget-body.loading,
.ce-widget-body.error {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ce-widget-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ce-space-2);
    color: var(--ce-text-muted);
}

.ce-widget-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ce-space-2);
    color: var(--ce-text-muted);
    text-align: center;
}

.ce-widget-error svg {
    width: 24px;
    height: 24px;
    color: var(--ce-danger);
}

/* Native error-state "Retry" affordance (WidgetWrapper's .ce-btn-link). */
.ce-widget-error .ce-btn-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ce-teal);
    font-size: 0.8125rem;
    text-decoration: underline;
}

/* KPI panel with the native tinted icon tile (image-196 look): icon left, text right. */
.ce-kpi-with-icon {
    display: flex;
    align-items: center;
    gap: var(--ce-space-3);
}

.ce-kpi-with-icon .ce-kpi-main {
    min-width: 0;
}

/* Widget KPI Value */
.ce-widget-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ce-text-primary);
    line-height: 1.2;
}

.ce-widget-value.small {
    font-size: 1.25rem;
}

.ce-widget-value.large {
    font-size: 2.5rem;
}

.ce-widget-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ce-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--ce-space-1);
}

/* Legacy-tile "(REPORT)" link on KPI tiles (CeKpiPanel): subtle, uppercase, muted. */
.ce-kpi-report-link {
    display: block;
    background: none;
    border: none;
    padding: 0;
    margin-top: var(--ce-space-1);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ce-text-muted);
    cursor: pointer;
}

.ce-kpi-report-link:hover {
    color: var(--ce-teal);
    text-decoration: underline;
}

.ce-widget-trend {
    display: inline-flex;
    align-items: center;
    gap: var(--ce-space-1);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--ce-radius-full);
    margin-top: var(--ce-space-2);
}

.ce-widget-trend.up {
    background: rgba(16, 185, 129, 0.1);
    color: var(--ce-success);
}

.ce-widget-trend.down {
    background: rgba(239, 68, 68, 0.1);
    color: var(--ce-danger);
}

.ce-widget-trend.neutral {
    background: var(--ce-bg-tertiary);
    color: var(--ce-text-muted);
}

.ce-widget-trend svg {
    width: 12px;
    height: 12px;
}

/* Widget Chart Container */
.ce-widget-chart {
    width: 100%;
    height: 100%;
    min-height: 280px;
    position: relative;
}

.ce-widget-chart canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Widget List */
.ce-widget-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ce-widget-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ce-space-2) 0;
    border-bottom: 1px solid var(--ce-border-secondary);
}

.ce-widget-list-item:last-child {
    border-bottom: none;
}

.ce-widget-list-label {
    font-size: 0.8125rem;
    color: var(--ce-text-secondary);
}

.ce-widget-list-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ce-text-primary);
}

/* Widget Table */
.ce-widget-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.ce-widget-table th {
    text-align: left;
    padding: var(--ce-space-2);
    font-weight: 600;
    color: var(--ce-text-muted);
    border-bottom: 1px solid var(--ce-border-primary);
}

.ce-widget-table td {
    padding: var(--ce-space-2);
    color: var(--ce-text-secondary);
    border-bottom: 1px solid var(--ce-border-secondary);
}

.ce-widget-table tr:last-child td {
    border-bottom: none;
}

.ce-widget-table tr:hover td {
    background: var(--ce-bg-secondary);
}

/* Widget Progress */
.ce-widget-progress {
    width: 100%;
    height: 8px;
    background: var(--ce-bg-tertiary);
    border-radius: var(--ce-radius-full);
    overflow: hidden;
}

.ce-widget-progress-bar {
    height: 100%;
    background: var(--ce-teal);
    border-radius: var(--ce-radius-full);
    transition: width var(--ce-transition-normal);
}

.ce-widget-progress-bar.success { background: var(--ce-success); }
.ce-widget-progress-bar.warning { background: var(--ce-warning); }
.ce-widget-progress-bar.danger { background: var(--ce-danger); }
.ce-widget-progress-bar.teal { background: var(--ce-teal); }
.ce-widget-progress-bar.blue { background: var(--ce-blue); }
.ce-widget-progress-bar.green { background: var(--ce-green); }
.ce-widget-progress-bar.orange { background: var(--ce-orange); }

/* Widget Empty State */
.ce-widget-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 80px;
    color: var(--ce-text-muted);
    font-size: 0.875rem;
    text-align: center;
}

/* Widget List (Enhanced) */
.ce-widget-list-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--ce-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ce-text-secondary);
}

.ce-widget-list-content {
    flex: 1;
    min-width: 0;
}

.ce-widget-list-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ce-text-primary);
}

.ce-widget-list-subtitle {
    font-size: 0.75rem;
    color: var(--ce-text-muted);
}

/* Widget Stat List */
.ce-widget-stat-list {
    display: flex;
    flex-direction: column;
}

.ce-widget-stat-row {
    display: flex;
    align-items: center;
    gap: var(--ce-space-3);
    padding: var(--ce-space-3) 0;
    border-bottom: 1px solid var(--ce-border-primary);
}

.ce-widget-stat-row:last-child {
    border-bottom: none;
}

.ce-widget-stat-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ce-widget-stat-info {
    flex: 1;
    min-width: 0;
}

.ce-widget-stat-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ce-text-primary);
}

.ce-widget-stat-sublabel {
    font-size: 0.75rem;
    color: var(--ce-text-muted);
}

.ce-widget-stat-value-wrapper {
    text-align: right;
}

.ce-widget-stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ce-text-primary);
}

.ce-widget-stat-change {
    font-size: 0.75rem;
    font-weight: 500;
}

.ce-widget-stat-change.up {
    color: var(--ce-success);
}

.ce-widget-stat-change.down {
    color: var(--ce-danger);
}

/* Widget Table Container */
.ce-widget-table-container {
    overflow-x: auto;
    max-height: 100%;
}

.ce-widget-table th.sorted {
    color: var(--ce-teal);
}

.ce-widget-table th .sort-icon {
    margin-left: var(--ce-space-1);
    font-size: 0.75rem;
}

.ce-widget-table th {
    cursor: pointer;
}

.ce-widget-table th:hover {
    color: var(--ce-text-primary);
}

.ce-widget-table td.text-right {
    text-align: right;
}

/* Dashboard Selector (Tabs) */
.ce-dashboard-tabs {
    display: flex;
    align-items: center;
    gap: var(--ce-space-2);
    padding: var(--ce-space-4) var(--ce-space-6);
    border-bottom: 1px solid var(--ce-border-primary);
    overflow-x: auto;
}

.ce-dashboard-tab {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--ce-space-2);
    padding: var(--ce-space-2) var(--ce-space-4);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ce-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--ce-radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--ce-transition-fast);
}

.ce-dashboard-tab:hover {
    background: var(--ce-bg-secondary);
    color: var(--ce-text-primary);
}

.ce-dashboard-tab.active {
    background: var(--ce-teal);
    color: white;
}

input.ce-dashboard-tab-editable {
    background: var(--ce-teal);
    color: white;
    border: 1px dashed rgba(255, 255, 255, 0.5);
    outline: none;
    width: 150px;
    cursor: text;
}

input.ce-dashboard-tab-editable::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.ce-dashboard-tab-add {
    padding: var(--ce-space-2);
    color: var(--ce-text-muted);
}

.ce-dashboard-tab-add:hover {
    background: var(--ce-bg-secondary);
    color: var(--ce-teal);
}

/* Dashboard Actions */
.ce-dashboard-actions {
    display: flex;
    align-items: center;
    gap: var(--ce-space-3);
    margin-left: auto;
}

/* Responsive Grid — widget placement is inline (grid-column/row per widget),
   so collapsing requires !important overrides; inline `order` preserves flow. */
@media (max-width: 1200px) {
    .ce-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: dense;
    }
    .ce-dashboard-grid > .ce-widget-container {
        grid-row: auto !important;
    }
    .ce-dashboard-grid > .ce-widget-container.ce-span-1 {
        grid-column: auto / span 1 !important;
    }
    .ce-dashboard-grid > .ce-widget-container.ce-span-2,
    .ce-dashboard-grid > .ce-widget-container.ce-span-3,
    .ce-dashboard-grid > .ce-widget-container.ce-span-4 {
        grid-column: auto / span 2 !important;
    }
    .ce-widget-wide,
    .ce-widget-full {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .ce-dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
        padding: 0; /* flush with the filter bar / page content on mobile too */
    }
    .ce-dashboard-grid > .ce-widget-container,
    .ce-dashboard-grid > .ce-widget-container.ce-span-1,
    .ce-dashboard-grid > .ce-widget-container.ce-span-2,
    .ce-dashboard-grid > .ce-widget-container.ce-span-3,
    .ce-dashboard-grid > .ce-widget-container.ce-span-4 {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
    .ce-widget-small,
    .ce-widget-medium,
    .ce-widget-large,
    .ce-widget-wide,
    .ce-widget-full {
        grid-column: span 1;
    }
}

/* ============================================
   AI Chat Panel
   ============================================ */

.ce-ai-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 52px;
    height: 52px;
    border-radius: var(--ce-radius-full);
    background: linear-gradient(135deg, var(--ce-teal-light) 0%, var(--ce-teal) 100%);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ce-shadow-lg);
    transition: all var(--ce-transition-normal) ease;
    /* Above the fixed shell header/footer (z-index 1100) so the footer never clips the FAB. */
    z-index: 1200;
}
.ce-ai-fab:hover {
    background: linear-gradient(135deg, var(--ce-teal) 0%, var(--ce-teal-dark) 100%);
    transform: scale(1.05);
}
.ce-ai-fab.hidden {
    display: none;
}

.ce-ai-chat {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: var(--ce-bg-primary);
    border-left: 1px solid var(--ce-border-color);
    display: flex;
    flex-direction: column;
    /* Must sit ABOVE the fixed shell header/footer (z-index 1100), otherwise the
       full-height side panel is painted over / clipped by the chrome. */
    z-index: 1200;
    transition: right var(--ce-transition-slow) ease;
    box-shadow: var(--ce-shadow-xl);
}
.ce-ai-chat.open {
    right: 0;
}

.ce-ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ce-border-color);
    background: var(--ce-bg-secondary);
    flex-shrink: 0;
}
.ce-ai-chat-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ce-ai-chat-title {
    font-weight: 600;
    font-size: 0.875rem;
}
.ce-ai-chat-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ce-ai-chat-header-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--ce-radius-sm);
    color: var(--ce-text-muted);
    display: flex;
    align-items: center;
    transition: all var(--ce-transition-fast);
}
.ce-ai-chat-header-btn:hover {
    background: var(--ce-bg-tertiary);
    color: var(--ce-text-primary);
}

/* Messages area */
.ce-ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Welcome screen */
.ce-ai-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    flex: 1;
}
.ce-ai-welcome-icon {
    margin-bottom: 16px;
    opacity: 0.8;
}
.ce-ai-welcome-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 8px;
}
.ce-ai-welcome-subtitle {
    font-size: 0.8125rem;
    color: var(--ce-text-muted);
    line-height: 1.5;
    max-width: 280px;
}
.ce-ai-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    justify-content: center;
}
.ce-ai-quick-action {
    padding: 6px 12px;
    border: 1px solid var(--ce-border-color);
    border-radius: var(--ce-radius-full);
    background: var(--ce-bg-secondary);
    color: var(--ce-text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--ce-transition-fast);
}
.ce-ai-quick-action:hover {
    border-color: var(--ce-teal);
    color: var(--ce-teal);
    background: var(--ce-bg-primary);
}

/* Message bubbles */
.ce-ai-message {
    display: flex;
    gap: 8px;
    max-width: 100%;
}
.ce-ai-message.user {
    flex-direction: row-reverse;
}
.ce-ai-message-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--ce-radius-full);
    background: var(--ce-teal);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ce-ai-message-content {
    max-width: 85%;
}
.ce-ai-message-text {
    padding: 10px 14px;
    border-radius: var(--ce-radius-lg);
    font-size: 0.8125rem;
    line-height: 1.5;
    word-wrap: break-word;
}
.ce-ai-message.assistant .ce-ai-message-text {
    background: var(--ce-bg-secondary);
    border: 1px solid var(--ce-border-color);
}
.ce-ai-message.user .ce-ai-message-text {
    background: var(--ce-teal);
    color: white;
}
.ce-ai-message-text code {
    background: rgba(0,0,0,0.1);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-family: var(--ce-font-mono);
}
.ce-ai-message-text ul,
.ce-ai-message-text ol {
    margin: 4px 0;
    padding-left: 20px;
}
.ce-ai-message-text ul { list-style: disc; }
.ce-ai-message-text ol { list-style: decimal; }
.ce-ai-message-text li {
    margin: 2px 0;
}
.ce-ai-message-text strong {
    font-weight: 600;
}
.ce-ai-report-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    margin: 4px 0;
    border-radius: var(--ce-radius-md);
    background: var(--ce-teal);
    color: white;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity var(--ce-transition-fast);
}
.ce-ai-report-link:hover {
    opacity: 0.85;
    color: white;
}

/* Inline chart in chat */
.ce-ai-chart-container {
    margin: 8px 0;
    padding: 8px;
    border-radius: 8px;
    background: var(--ce-bg-primary);
    border: 1px solid var(--ce-border-color);
}
.ce-ai-chart-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ce-text-secondary);
    margin-bottom: 6px;
}
.ce-ai-chart-wrapper {
    position: relative;
    height: 220px;
}
.ce-ai-chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--ce-text-secondary);
    font-size: 0.8rem;
    border: 1px dashed var(--ce-border-color);
    border-radius: 8px;
    margin: 8px 0;
}

/* Typing indicator */
.ce-ai-typing {
    display: flex;
    gap: 4px;
    padding: 12px 14px;
}
.ce-ai-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ce-teal);
    animation: ce-ai-bounce 1.4s ease-in-out infinite;
}
.ce-ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ce-ai-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ce-ai-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-6px); opacity: 1; }
}

/* Input area */
.ce-ai-chat-input {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--ce-border-color);
    background: var(--ce-bg-secondary);
    flex-shrink: 0;
}
.ce-ai-input {
    flex: 1;
    border: 1px solid var(--ce-border-color);
    border-radius: var(--ce-radius-md);
    padding: 10px 12px;
    font-size: 0.8125rem;
    font-family: var(--ce-font-sans);
    background: var(--ce-bg-primary);
    color: var(--ce-text-primary);
    resize: none;
    max-height: 120px;
    line-height: 1.4;
}
.ce-ai-input:focus {
    outline: none;
    border-color: var(--ce-teal);
    box-shadow: 0 0 0 2px rgba(0, 169, 157, 0.15);
}
.ce-ai-input::placeholder {
    color: var(--ce-text-muted);
}
.ce-ai-send-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--ce-radius-md);
    background: var(--ce-teal);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--ce-transition-fast);
}
.ce-ai-send-btn:hover:not(:disabled) {
    background: var(--ce-teal-dark);
}
.ce-ai-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Session list */
.ce-ai-session-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.ce-ai-session-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--ce-border-color);
}
.ce-ai-session-loading,
.ce-ai-session-empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--ce-text-muted);
    font-size: 0.8125rem;
}
.ce-ai-session-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--ce-border-color);
    background: transparent;
    cursor: pointer;
    transition: background var(--ce-transition-fast);
    color: var(--ce-text-primary);
}
.ce-ai-session-item:hover {
    background: var(--ce-bg-secondary);
}
.ce-ai-session-item.active {
    background: var(--ce-bg-tertiary);
    border-left: 3px solid var(--ce-teal);
}
.ce-ai-session-item-title {
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ce-ai-session-item-meta {
    font-size: 0.6875rem;
    color: var(--ce-text-muted);
    margin-top: 2px;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .ce-ai-chat {
        width: 100%;
        right: -100%;
    }
    .ce-ai-fab {
        bottom: 16px;
        right: 16px;
    }
}

/* ========== Analytics Page ========== */

.ce-analytics-section {
    margin-bottom: var(--ce-space-8);
}

.ce-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ce-text-primary);
    margin-bottom: var(--ce-space-4);
}

.ce-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ce-space-4);
}

@media (max-width: 1024px) {
    .ce-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ce-kpi-row {
        grid-template-columns: 1fr;
    }
}

.ce-card-compact {
    padding: var(--ce-space-4);
}

/* Cohort retention heatmap table */
.ce-cohort-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.ce-cohort-table th {
    padding: var(--ce-space-2) var(--ce-space-3);
    text-align: center;
    font-weight: 600;
    color: var(--ce-text-secondary);
    border-bottom: 2px solid var(--ce-border);
    white-space: nowrap;
}

.ce-cohort-table th:first-child,
.ce-cohort-table th:nth-child(2) {
    text-align: left;
}

.ce-cohort-table td {
    padding: var(--ce-space-2) var(--ce-space-3);
    text-align: center;
    border-bottom: 1px solid var(--ce-border);
}

.ce-cohort-label {
    font-weight: 500;
    white-space: nowrap;
    text-align: left !important;
}

.ce-cohort-size {
    color: var(--ce-text-muted);
    text-align: left !important;
}

.ce-cohort-cell {
    font-weight: 500;
    border-radius: var(--ce-radius-sm);
    min-width: 48px;
}

.ce-cohort-cell-high {
    background-color: rgba(16, 185, 129, 0.15);
    color: #047857;
}

.ce-cohort-cell-medium {
    background-color: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.ce-cohort-cell-low {
    background-color: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.ce-cohort-cell-empty {
    background-color: var(--ce-bg-secondary);
}

/* ========== Walkthrough Overlay ========== */

.ce-wt-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
}

.ce-wt-overlay::before {
    content: '';
    position: fixed;
    inset: 0;
    /* Spotlight cutout using box-shadow — CSS custom properties set by JS */
    clip-path: polygon(
        0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
        var(--wt-x) var(--wt-y),
        var(--wt-x) calc(var(--wt-y) + var(--wt-h)),
        calc(var(--wt-x) + var(--wt-w)) calc(var(--wt-y) + var(--wt-h)),
        calc(var(--wt-x) + var(--wt-w)) var(--wt-y),
        var(--wt-x) var(--wt-y)
    );
    background: rgba(0, 0, 0, 0.5);
    transition: clip-path 0.3s ease;
}

.ce-wt-tooltip {
    position: fixed;
    z-index: 10002;
    width: 320px;
    background: var(--ce-bg-primary);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-lg);
    box-shadow: var(--ce-shadow-lg);
    pointer-events: auto;
    animation: ce-wt-fade-in 0.25s ease;
}

@keyframes ce-wt-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ce-wt-tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ce-space-3) var(--ce-space-4);
    border-bottom: 1px solid var(--ce-border);
}

.ce-wt-tooltip-step {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ce-accent);
}

.ce-wt-tooltip-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ce-text-primary);
}

.ce-wt-tooltip-close {
    background: none;
    border: none;
    color: var(--ce-text-muted);
    cursor: pointer;
    font-size: 1.125rem;
    padding: 0;
    line-height: 1;
}

.ce-wt-tooltip-close:hover {
    color: var(--ce-text-primary);
}

.ce-wt-tooltip-body {
    padding: var(--ce-space-4);
    font-size: 0.875rem;
    color: var(--ce-text-secondary);
    line-height: 1.5;
}

.ce-wt-tooltip-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ce-space-3) var(--ce-space-4);
    border-top: 1px solid var(--ce-border);
}

.ce-wt-btn {
    padding: var(--ce-space-1) var(--ce-space-3);
    border-radius: var(--ce-radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--ce-border);
    background: var(--ce-bg-secondary);
    color: var(--ce-text-primary);
    transition: background 0.15s;
}

.ce-wt-btn:hover {
    background: var(--ce-bg-tertiary);
}

.ce-wt-btn-primary {
    background: var(--ce-accent);
    color: white;
    border-color: var(--ce-accent);
}

.ce-wt-btn-primary:hover {
    opacity: 0.9;
    background: var(--ce-accent);
}

.ce-wt-click-indicator {
    position: fixed;
    z-index: 10001;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    margin-top: -12px;
    border-radius: 50%;
    background: var(--ce-accent);
    opacity: 0.6;
    animation: ce-wt-pulse 1.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ce-wt-pulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    50%  { transform: scale(2.2); opacity: 0; }
    100% { transform: scale(1);   opacity: 0.6; }
}

/* Walkthrough "Start Tour" card in AI chat messages */
.ce-ai-walkthrough-card {
    display: flex;
    align-items: center;
    gap: var(--ce-space-3);
    margin-top: var(--ce-space-3);
    padding: var(--ce-space-3) var(--ce-space-4);
    background: rgba(0, 169, 157, 0.08);
    border: 1px solid rgba(0, 169, 157, 0.25);
    border-radius: var(--ce-radius-md);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.ce-ai-walkthrough-card:hover {
    background: rgba(0, 169, 157, 0.14);
    border-color: rgba(0, 169, 157, 0.4);
}

.ce-ai-walkthrough-card-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.ce-ai-walkthrough-card-text {
    flex: 1;
    min-width: 0;
}

.ce-ai-walkthrough-card-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ce-text-primary);
}

.ce-ai-walkthrough-card-desc {
    font-size: 0.75rem;
    color: var(--ce-text-secondary);
    margin-top: 2px;
}

.ce-ai-walkthrough-card-btn {
    flex-shrink: 0;
    padding: var(--ce-space-1) var(--ce-space-3);
    background: var(--ce-accent);
    color: white;
    border: none;
    border-radius: var(--ce-radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.ce-ai-walkthrough-card-btn:hover {
    opacity: 0.9;
}

/* --- AI Message Feedback --- */

.ce-ai-message-feedback {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.ce-ai-feedback-btn {
    background: none;
    border: 1px solid var(--ce-border);
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    color: var(--ce-text-muted);
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
}

.ce-ai-feedback-btn:hover {
    border-color: var(--ce-teal);
    color: var(--ce-teal);
}

.ce-ai-feedback-btn.active-helpful {
    background: rgba(20, 184, 166, 0.1);
    border-color: var(--ce-teal);
    color: var(--ce-teal);
}

.ce-ai-feedback-btn.active-unhelpful {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--ce-red, #ef4444);
    color: var(--ce-red, #ef4444);
}

/* --- AI Analytics Page --- */

.ce-ai-analytics-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ce-space-4);
    margin-top: var(--ce-space-4);
}

@media (max-width: 768px) {
    .ce-ai-analytics-charts {
        grid-template-columns: 1fr;
    }
}

.ce-ai-analytics-period {
    display: flex;
    align-items: center;
    gap: var(--ce-space-2);
}

.ce-ai-analytics-period select {
    background: var(--ce-surface);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius);
    padding: var(--ce-space-1) var(--ce-space-2);
    color: var(--ce-text);
    font-size: 0.85rem;
}


/* --- Print Styles (Export as PDF via browser print) --- */
@media print {
    /* Hide non-content elements */
    .ce-sidebar,
    .ce-header,
    .ce-crumbs,
    .ce-ai-fab,
    .ce-ai-chat-panel,
    .ce-dashboard-actions,
    .ce-page-header .ce-btn,
    .ce-page-header select,
    [data-walkthrough],
    .ce-walkthrough-overlay {
        display: none !important;
    }

    /* Full-width content without sidebar margin */
    .ce-layout {
        grid-template-columns: 1fr !important;
    }

    .ce-main {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .ce-content {
        padding: 8px !important;
    }

    /* Remove shadows and borders for cleaner print */
    .ce-card {
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
        break-inside: avoid;
    }

    /* Ensure charts and canvases print */
    .ce-app canvas {
        max-width: 100% !important;
    }

    /* Page settings */
    @page {
        size: A4 landscape;
        margin: 10mm;
    }

    .ce-app {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* --- PDF Export: hide UI controls during html2pdf capture --- */
body.pdf-exporting .ce-crumbs,
body.pdf-exporting .ce-dashboard-actions,
body.pdf-exporting .ce-dashboard-tabs,
body.pdf-exporting .ce-page-header button,
body.pdf-exporting .ce-page-header select,
body.pdf-exporting .ce-widget-header button,
body.pdf-exporting .ce-ai-fab {
    visibility: hidden !important;
}

/* --- Report Builder (CeReportBuilderPage) responsive two-column layout ---
   Config panel (fixed 340px, sticky) + results panel (fluid). Below 1024px the two
   columns stack (config on top, results below). The minmax(0, 1fr) results track plus
   `min-width: 0` on the grid children let a wide data table scroll inside its own
   .ce-table-container (overflow-x: auto) instead of forcing the page to scroll sideways. */
.ce-report-builder-grid {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: var(--ce-space-4);
    align-items: start;
}

.ce-report-builder-grid > * {
    min-width: 0;
}

.ce-report-builder-config {
    position: sticky;
    top: var(--ce-space-4);
}

@media (max-width: 1024px) {
    .ce-report-builder-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked: the config card scrolls with the page rather than sticking to the top. */
    .ce-report-builder-config {
        position: static;
    }
}

/* Hide report filter panel and expand results to full width */
body.pdf-exporting .ce-report-builder-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

body.pdf-exporting .ce-report-builder-config {
    display: none !important;
}

/* Expand data tables to show all rows (remove scroll container height limit) */
body.pdf-exporting .ce-datagrid-container {
    max-height: none !important;
    overflow: visible !important;
}

/* --- Dashboard Filter Bar --- */
.ce-filter-bar {
    display: flex;
    align-items: end;
    gap: 16px;
    padding: 12px 16px;
    background: var(--ce-bg-primary);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-lg);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* Optional section title at the start of a toolbar/filter bar (e.g. "All Invoices"). */
.ce-toolbar-title {
    display: flex;
    align-items: center;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ce-text-primary);
    margin-right: var(--ce-space-2);
}

.ce-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ce-filter-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ce-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Filter bar compact controls */
.ce-filter-bar .ce-form-select,
.ce-filter-bar .ce-select,
.ce-filter-bar .ce-form-input,
.ce-filter-bar .ce-input {
    width: auto;
    min-height: 32px;
    height: 32px;
    padding: 4px 2rem 4px 8px;
    font-size: 0.8125rem;
    background-color: var(--ce-bg-tertiary);
    border-color: transparent;
}

.ce-filter-bar .ce-form-input,
.ce-filter-bar .ce-input {
    padding-right: 8px;
}

.ce-filter-bar .ce-form-select:focus,
.ce-filter-bar .ce-select:focus,
.ce-filter-bar .ce-form-input:focus,
.ce-filter-bar .ce-input:focus {
    background-color: var(--ce-bg-primary);
    border-color: var(--ce-teal);
}

.ce-filter-bar .ce-form-select:hover:not(:focus),
.ce-filter-bar .ce-select:hover:not(:focus),
.ce-filter-bar .ce-form-input:hover:not(:focus),
.ce-filter-bar .ce-input:hover:not(:focus) {
    background-color: var(--ce-bg-secondary);
}

.ce-btn-group {
    display: flex;
    gap: 0;
}

.ce-btn-group .ce-btn {
    border-radius: 0;
}

.ce-btn-group .ce-btn:first-child {
    border-radius: var(--ce-radius-md) 0 0 var(--ce-radius-md);
}

.ce-btn-group .ce-btn:last-child {
    border-radius: 0 var(--ce-radius-md) var(--ce-radius-md) 0;
}

.ce-btn-group .ce-btn + .ce-btn {
    margin-left: -1px;
}

.ce-input-sm, .ce-select-sm {
    padding: 4px 8px;
    font-size: 0.8rem;
    height: 32px;
}

/* ===================== CE FORM KIT (added) ===================== */
/*
   Reusable form primitives (Forms/Ce*.razor). All classes are ce-prefixed and use
   only the existing --ce-* tokens, so they inherit tenant branding + dark mode
   ([data-theme="dark"]) automatically. Base .ce-input / .ce-select styling lives
   in the "Forms" block above; this block adds layout + the switch + the section card.
*/

/* Form wrapper — consistent vertical rhythm between sections. */
.ce-form {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-6);
}

/* Section card — bordered, rounded surface grouping related fields. */
.ce-form-section {
    background: var(--ce-bg-primary);
    border: 1px solid var(--ce-border-primary);
    border-radius: var(--ce-radius-lg);
    padding: var(--ce-space-6);
    box-shadow: var(--ce-shadow-sm);
}

.ce-form-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ce-space-4);
    margin-bottom: var(--ce-space-5);
}

.ce-form-section-heading {
    min-width: 0;
}

.ce-form-section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ce-text-primary);
}

.ce-form-section-desc {
    margin: var(--ce-space-1) 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ce-text-muted);
}

.ce-form-section-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--ce-space-2);
}

.ce-form-section-body {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-5);
}

/* --- Form section tabs (CeFormTabs / CeFormTab) --- */
/* Organises a long form's section cards into tabs. Side = vertical nav column + content
   panel; Top = horizontal nav bar above the content. Every panel stays in the DOM (inactive
   ones hidden with display:none) so a wrapping EditForm's validation still covers them. */
.ce-form-tabs {
    display: flex;
    gap: var(--ce-space-6);
}

.ce-form-tabs-top {
    flex-direction: column;
    gap: var(--ce-space-5);
}

.ce-form-tabs-nav {
    display: flex;
}

/* Side: sticky vertical column on the left. */
.ce-form-tabs-side > .ce-form-tabs-nav {
    flex-direction: column;
    gap: var(--ce-space-1);
    flex: 0 0 210px;
    width: 210px;
    position: sticky;
    top: var(--ce-space-4);
    align-self: flex-start;
}

/* Top: horizontal wrapping bar with an underline rail. */
.ce-form-tabs-top > .ce-form-tabs-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--ce-space-1);
    border-bottom: 2px solid var(--ce-border-primary);
}

.ce-form-tab-btn {
    display: flex;
    align-items: center;
    gap: var(--ce-space-2);
    width: 100%;
    padding: var(--ce-space-3) var(--ce-space-4);
    background: none;
    border: none;
    border-radius: var(--ce-radius-md);
    color: var(--ce-text-muted);
    font-family: var(--ce-font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all var(--ce-transition-fast);
}

.ce-form-tab-btn:hover {
    background: var(--ce-bg-secondary);
    color: var(--ce-text-primary);
}

.ce-form-tab-btn-active,
.ce-form-tab-btn-active:hover {
    color: var(--ce-accent);
    background: color-mix(in srgb, var(--ce-accent) 12%, transparent);
    font-weight: 600;
}

.ce-form-tab-btn-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.ce-form-tab-btn-icon svg {
    width: 18px;
    height: 18px;
}

.ce-form-tab-btn-label {
    min-width: 0;
}

/* Unsaved-changes indicator: a small accent dot after the label. In the side (vertical,
   full-width) layout it sits flush right; in top/narrow (auto-width pill) layouts it follows
   the label using the button's flex gap. */
.ce-form-tab-dirty {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--ce-warning);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ce-warning) 25%, transparent);
}

.ce-form-tabs-top .ce-form-tab-dirty {
    margin-left: 0;
}

@media (max-width: 820px) {
    .ce-form-tabs-side .ce-form-tab-dirty {
        margin-left: 0;
    }
}

/* Top: pill sits on the rail with an accent underline when active. */
.ce-form-tabs-top .ce-form-tab-btn {
    width: auto;
    border-radius: var(--ce-radius-md) var(--ce-radius-md) 0 0;
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
}

.ce-form-tabs-top .ce-form-tab-btn-active,
.ce-form-tabs-top .ce-form-tab-btn-active:hover {
    background: none;
    border-bottom-color: var(--ce-accent);
}

.ce-form-tabs-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-5);
}

/* Panels stack their own section cards. */
.ce-form-tab-panel {
    flex-direction: column;
    gap: var(--ce-space-5);
}

.ce-form-tab-panel[style*="block"] {
    display: flex !important;
}

/* Narrow: a Side layout collapses to a stacked Top layout. */
@media (max-width: 820px) {
    .ce-form-tabs-side {
        flex-direction: column;
        gap: var(--ce-space-5);
    }

    .ce-form-tabs-side > .ce-form-tabs-nav {
        flex-direction: row;
        flex-wrap: wrap;
        flex: 0 0 auto;
        width: 100%;
        position: static;
        border-bottom: 2px solid var(--ce-border-primary);
    }

    .ce-form-tabs-side .ce-form-tab-btn {
        width: auto;
        border-radius: var(--ce-radius-md) var(--ce-radius-md) 0 0;
        margin-bottom: -2px;
        border-bottom: 2px solid transparent;
    }

    .ce-form-tabs-side .ce-form-tab-btn-active,
    .ce-form-tabs-side .ce-form-tab-btn-active:hover {
        background: none;
        border-bottom-color: var(--ce-accent);
    }
}

/* Responsive field grid — side-by-side on wide, stacked on narrow. */
.ce-field-grid {
    display: grid;
    grid-template-columns: repeat(var(--ce-field-cols, 2), minmax(0, 1fr));
    gap: var(--ce-space-4) var(--ce-space-5);
    align-items: start;
}

/* A field that should occupy the whole row of the grid. */
.ce-field-grid-full {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .ce-field-grid {
        grid-template-columns: 1fr;
    }
}

/* One labelled field. */
.ce-field {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-2);
    min-width: 0;
}

.ce-field-label {
    display: inline-flex;
    align-items: center;
    gap: var(--ce-space-2);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ce-text-secondary);
}

.ce-field-label-text {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.ce-field-required {
    color: var(--ce-danger);
    font-weight: 600;
}

.ce-field-control {
    display: flex;
    flex-direction: column;
}

/* The control fills the field; stacked buttons/inputs keep full width. */
.ce-field-control > .ce-input,
.ce-field-control > .ce-select,
.ce-field-control > .ce-textarea {
    width: 100%;
}

.ce-field-hint {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--ce-text-muted);
}

.ce-field-error {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--ce-danger);
}

/* Multi-line control (composes .ce-input for colours/focus). */
.ce-textarea {
    width: 100%;
    min-height: 92px;
    resize: vertical;
    line-height: 1.5;
}

/* Toggle switch (bound to a bool). */
.ce-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--ce-space-3);
    cursor: pointer;
    user-select: none;
}

.ce-switch.is-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.ce-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ce-switch-track {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 24px;
    border-radius: var(--ce-radius-full);
    background: var(--ce-gray-300);
    transition: background var(--ce-transition-fast);
}

.ce-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: var(--ce-radius-full);
    background: #ffffff;
    box-shadow: var(--ce-shadow-sm);
    transition: transform var(--ce-transition-fast);
}

.ce-switch-input:checked + .ce-switch-track {
    background: var(--ce-teal);
}

.ce-switch-input:checked + .ce-switch-track .ce-switch-thumb {
    transform: translateX(20px);
}

.ce-switch-input:focus-visible + .ce-switch-track {
    box-shadow: 0 0 0 3px rgba(0, 169, 157, 0.25);
}

.ce-switch-label {
    font-size: 0.875rem;
    color: var(--ce-text-secondary);
}

/* --- Checkbox (CeCheckbox) --- */
.ce-form-check {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-1);
}

.ce-form-check.is-disabled {
    opacity: 0.6;
}

.ce-form-check-control {
    display: inline-flex;
    align-items: center;
    gap: var(--ce-space-2);
    cursor: pointer;
    user-select: none;
}

.ce-form-check.is-disabled .ce-form-check-control {
    cursor: not-allowed;
}

.ce-form-check-input {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--ce-teal);
    cursor: inherit;
}

.ce-form-check-input:focus-visible {
    outline: 2px solid var(--ce-teal);
    outline-offset: 2px;
}

.ce-form-check-label {
    font-size: 0.875rem;
    color: var(--ce-text-secondary);
}

.ce-form-check-hint {
    font-size: 0.75rem;
    color: var(--ce-text-muted);
    padding-left: calc(16px + var(--ce-space-2));
}

/* Footer row of form actions. */
.ce-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ce-space-3);
    padding-top: var(--ce-space-5);
    margin-top: var(--ce-space-1);
    border-top: 1px solid var(--ce-border-primary);
}

.ce-form-actions-flush {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

.ce-form-actions-start {
    justify-content: flex-start;
}

.ce-form-actions-center {
    justify-content: center;
}

.ce-form-actions-between {
    justify-content: space-between;
}

/* Pins an action bar to the bottom of the scroll area so it stays visible while the form
   scrolls. Apply to an existing action row/card (e.g. a .ce-card) — light + dark safe. */
.ce-form-actions-sticky {
    position: sticky;
    /* Sit ABOVE the fixed shell footer (.ce-footer, height var(--footer-height)) so it isn't
       covered by the "Powered by" bar. */
    bottom: var(--footer-height, 0px);
    z-index: 50;
    margin-top: var(--ce-space-4);
    padding: var(--ce-space-4);
    background: var(--ce-bg-primary);
    border-top: 1px solid var(--ce-border-primary);
    box-shadow: 0 -4px 12px -6px rgb(0 0 0 / 0.15);
}

/* --- JSON editor modal (CeJsonEditor) --- */
.ce-json-editor {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-3);
}

.ce-json-editor-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ce-space-3);
    flex-wrap: wrap;
}

.ce-json-editor-actions {
    display: flex;
    align-items: center;
    gap: var(--ce-space-2);
}

.ce-json-editor-status {
    font-size: 0.75rem;
    font-weight: 600;
}

.ce-json-editor-ok {
    color: var(--ce-success);
}

.ce-json-editor-err {
    color: var(--ce-danger);
}

.ce-json-editor-area {
    width: 100%;
    min-height: 320px;
    font-family: var(--ce-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.8125rem;
    line-height: 1.5;
    tab-size: 2;
    white-space: pre;
    resize: vertical;
}

/* --- List editor modal (CeListEditor) --- */
.ce-list-editor {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-3);
}

.ce-list-editor-row {
    display: flex;
    align-items: center;
    gap: var(--ce-space-2);
}

.ce-list-editor-row > .ce-input {
    flex: 1 1 auto;
    min-width: 0;
}

.ce-list-editor-add {
    margin-top: var(--ce-space-1);
}
/* ===================== end CE FORM KIT ===================== */

/* ── Block palette ────────────────────────────────────────────────────────────
   One choice in "what do you want to add?". A button rather than a card, because
   the whole tile is the target: a 210px choice whose only clickable part is its
   title is a choice people miss. */
.ce-block-choice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    background: var(--ce-bg-primary);
    border: 1px solid var(--ce-border-primary);
    border-radius: var(--ce-radius);
    color: inherit;
    cursor: pointer;
    transition: border-color var(--ce-transition-fast), background-color var(--ce-transition-fast);
}

.ce-block-choice:hover {
    border-color: var(--ce-primary);
    background: var(--ce-bg-secondary);
}

/* Keyboard users get the same affordance as the mouse, rather than the browser
   default outline landing somewhere invisible against the tile. */
.ce-block-choice:focus-visible {
    outline: 2px solid var(--ce-primary);
    outline-offset: 2px;
}

/* ── Report editor split ──────────────────────────────────────────────────────
   Configuration on the left, the report on the right. A preview under two screens
   of form is a preview nobody scrolls to, which is how arranging a page came to
   mean picking codes and hoping. */
.ce-analytics-editor-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ce-space-4);
    align-items: start;
}

@media (min-width: 1280px) {
    .ce-analytics-editor-split {
        /* The preview needs real width to be worth having — a report drawn at 300px
           tells you nothing about the report. Below this the panes stack instead. */
        grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    }

    .ce-analytics-editor-preview {
        /* Stays in view while you scroll the form beside it, which is the whole point
           of putting them side by side. */
        position: sticky;
        top: var(--ce-space-4);
        max-height: calc(100vh - var(--ce-space-8));
        overflow-y: auto;
    }
}

.ce-analytics-editor-config,
.ce-analytics-editor-preview {
    min-width: 0;
}

/* ── Field chips ──────────────────────────────────────────────────────────────
   Shared by CeMetricChips and by the dataset-scope picker beside it. They lived in
   the layout builder's own <style> block until a second builder needed them, which
   would have meant a copy — and a copy of a picker's rules is how one screen's
   "chosen" stops looking like another's. */
.ce-analytics-metric-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ce-analytics-metric-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--ce-border);
    background: var(--ce-surface);
    color: var(--ce-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.ce-analytics-metric-tag:hover {
    border-color: var(--ce-teal);
    color: var(--ce-text-primary);
}

.ce-analytics-metric-tag.selected {
    background: var(--ce-teal);
    border-color: var(--ce-teal);
    color: white;
}

/* A measure is not a raw field wearing a different hat, so it does not look like one.
   The distinction is carried by weight and a left rule rather than a second accent
   colour: the picker already spends its one strong colour on SELECTED, and a chip
   that competed with that would make "chosen" harder to see than "computed". */
.ce-analytics-picker-group {
    margin-bottom: 10px;
}

.ce-analytics-picker-group-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ce-text-muted);
    margin-bottom: 4px;
    cursor: help;
}

.ce-analytics-metric-tag.measure {
    font-weight: 600;
    border-left: 3px solid var(--ce-teal);
}

.ce-analytics-metric-tag.measure.selected {
    border-left-color: white;
}

/* ── Query report builder ─────────────────────────────────────────────────────
   Three zones, because a query report is three decisions and they are not the same
   decision: the QUESTION on the left, the PANELS in the middle, and the selected
   panel's BINDING on the right. Putting the binding beside the canvas rather than
   inside the panel is what lets a panel keep its real width while it is configured
   — the layout builder has to give an open panel the full row, and that is why
   arranging a page there means watching the grid re-flow under you.

   Below 1280px the rails stack above the canvas: three columns at 1000px gives each
   of them about 300px, and a form at 300px wraps its labels one word per line. */
.ce-query-report {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ce-space-4);
    align-items: start;
}

@media (min-width: 1280px) {
    .ce-query-report {
        grid-template-columns: 320px minmax(0, 1fr) 320px;
    }

    .ce-query-report-question,
    .ce-query-report-binding {
        /* Both rails stay in view while the canvas scrolls: choosing a field and seeing
           which panel changed is one act, and scrolling between them breaks it. */
        position: sticky;
        top: var(--ce-space-4);
        max-height: calc(100vh - var(--ce-space-8));
        overflow-y: auto;
    }
}

.ce-query-report > * {
    min-width: 0;
}

/* The selected panel, marked the way the layout builder marks its open one, so the
   right rail's "this is what you are editing" needs no explaining. */
.ce-query-report-panel {
    border: 1px solid var(--ce-border);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ce-query-report-panel:hover {
    border-color: var(--ce-teal);
}

.ce-query-report-panel-selected {
    border-color: var(--ce-teal);
    box-shadow: 0 0 0 1px var(--ce-teal);
}

/* ── Data Studio ─────────────────────────────────────────────────────────────
   A list beside a detail, because picking the data and interrogating it are two
   different acts and switching between them should not cost a page load.
   The list is fixed-width and the detail takes the rest: dataset names are short
   and predictable, while a record table is not, and giving the table the slack
   is what keeps rows from wrapping. */
.ce-data-studio {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 900px) {
    .ce-data-studio {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ce-data-studio-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--ce-surface, #fff);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius);
    padding: 8px;
}

.ce-data-studio-list-header {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ce-text-muted);
    padding: 4px 8px 8px;
}

.ce-data-studio-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    width: 100%;
    padding: 8px;
    border: 0;
    border-radius: var(--ce-radius-sm, 4px);
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: var(--ce-text-primary);
}

.ce-data-studio-item:hover {
    background: var(--ce-surface-hover, rgba(0, 0, 0, .04));
}

.ce-data-studio-item.selected {
    background: var(--ce-surface-selected, rgba(0, 128, 128, .1));
    box-shadow: inset 2px 0 0 var(--brand-accent, var(--ce-teal));
}

.ce-data-studio-item-name {
    font-size: 13px;
    font-weight: 500;
}

.ce-data-studio-item-code {
    font-size: 11px;
    color: var(--ce-text-muted);
    font-family: var(--ce-font-mono, ui-monospace, monospace);
}

.ce-data-studio-detail {
    min-width: 0;
}

.ce-data-studio-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.ce-data-studio-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.ce-data-studio-desc {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--ce-text-secondary, var(--ce-text-muted));
}

/* ── Field list ──────────────────────────────────────────────────────────── */
.ce-field-list-heading {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.ce-field-list-table {
    width: 100%;
}

.ce-field-list-name {
    font-weight: 500;
}

.ce-field-list-code {
    font-size: 12px;
    font-family: var(--ce-font-mono, ui-monospace, monospace);
    color: var(--ce-text-muted);
}

.ce-field-list-role {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    background: var(--ce-surface-hover, rgba(0, 0, 0, .05));
    color: var(--ce-text-secondary, var(--ce-text-muted));
    cursor: help;
}

/* Undeclared is a state worth seeing, not an absence worth hiding: it is exactly
   the state in which the validator can refuse nothing. */
.ce-field-list-role.undeclared {
    background: var(--ce-warning-bg, rgba(200, 140, 0, .12));
    color: var(--ce-warning-text, #8a6100);
}

.ce-field-list-sample {
    min-width: 220px;
}

/* Tabular figures so a column of identical values — the tell for a Reference
   field — lines up and reads as identical at a glance. */
.ce-field-list-values {
    font-family: var(--ce-font-mono, ui-monospace, monospace);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--ce-text-primary);
}

.ce-field-list-muted {
    font-size: 12px;
    color: var(--ce-text-muted);
}

/* ── Sheet layout picker ─────────────────────────────────────────────────────
   The grid IS the control. It reads as a spreadsheet on purpose — monospace,
   hairline borders, column letters and row numbers — because the whole point is
   that somebody recognises their own file and clicks the part they mean. */
.ce-sheet-picker-sheets {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.ce-sheet-picker-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ce-text-muted);
    margin-right: 2px;
}

.ce-sheet-tab {
    border: 1px solid var(--ce-border);
    background: var(--ce-surface);
    color: var(--ce-text-secondary);
    border-radius: 999px;
    padding: 3px 11px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.ce-sheet-tab.selected {
    background: var(--ce-teal);
    border-color: var(--ce-teal);
    color: #fff;
}

.ce-sheet-picker-prompt {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ce-text-primary);
}

/* The sheet can be wider than the panel; it scrolls in its own box rather than
   pushing the page sideways. */
.ce-sheet-picker-grid-wrap {
    overflow-x: auto;
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius);
}

.ce-sheet-grid {
    border-collapse: collapse;
    font-family: var(--ce-font-mono, ui-monospace, monospace);
    font-size: 11px;
    white-space: nowrap;
}

.ce-sheet-grid th,
.ce-sheet-grid td {
    border: 1px solid var(--ce-border);
    padding: 3px 8px;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ce-sheet-grid thead th,
.ce-sheet-grid .rownum {
    background: var(--ce-surface-hover, rgba(0, 0, 0, .04));
    color: var(--ce-text-muted);
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    position: sticky;
    left: 0;
}

.ce-sheet-grid thead th { position: static; }
.ce-sheet-grid .corner { cursor: default; }

.ce-sheet-grid td { cursor: pointer; color: var(--ce-text-primary); }

/* Chosen row and columns. Three distinct jobs, so three distinct treatments
   rather than three shades of the accent — a reader has to tell at a glance
   which is the row, which the names and which the units. */
.ce-sheet-grid .rownum.chosen {
    background: var(--ce-teal);
    color: #fff;
}

.ce-sheet-grid th.chosen-label,
.ce-sheet-grid td.label {
    background: color-mix(in srgb, var(--ce-teal) 12%, transparent);
    box-shadow: inset 2px 0 0 var(--ce-teal), inset -2px 0 0 var(--ce-teal);
}

.ce-sheet-grid th.chosen-unit,
.ce-sheet-grid td.unit {
    background: color-mix(in srgb, var(--ce-text-muted) 12%, transparent);
}

.ce-sheet-grid td.header { font-weight: 700; color: var(--ce-text-primary); }

/* The period columns — what the described layout will actually read. Showing
   them is what turns "everything to the right is a reading" from a claim into
   something visible. */
.ce-sheet-grid td.period {
    font-weight: 700;
    background: color-mix(in srgb, var(--ce-teal) 20%, transparent);
}

.ce-sheet-picker-summary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.ce-sheet-chip {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px dashed var(--ce-border);
    color: var(--ce-text-muted);
}

.ce-sheet-chip.set {
    border-style: solid;
    border-color: var(--ce-teal);
    color: var(--ce-teal);
    font-weight: 600;
}

.ce-sheet-chip.muted { cursor: help; }

/* ── Column rules table ─────────────────────────────────────────────────── */
.ce-column-rules-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--ce-text-secondary);
}

.ce-column-rules-actions { display: flex; gap: 6px; }

.ce-column-rules-wrap { overflow-x: auto; }

.ce-column-rules-table th { white-space: nowrap; }
.ce-column-rules-table .tick-col { width: 32px; text-align: center; }

.ce-column-rules-table td.source {
    font-family: var(--ce-font-mono, ui-monospace, monospace);
    font-size: 12px;
    color: var(--ce-text-muted);
    white-space: nowrap;
}

/* An excluded row stays legible. Fading it to near-invisible would undo the
   reason it is listed at all — that the file was read completely and this
   column was a choice. */
.ce-column-rules-table tr.excluded td { opacity: .55; }

.ce-column-rules-input { min-width: 150px; }
.ce-column-rules-unit  { width: 80px; }
.ce-column-rules-role  { min-width: 210px; }

.ce-column-rules-scale {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--ce-text-secondary);
    white-space: nowrap;
}

.ce-column-rules-na { color: var(--ce-text-muted); }

/* ── Data sources page ──────────────────────────────────────────────────── */
.ce-data-sources-toolbar { margin-bottom: 14px; }

.ce-data-sources-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.ce-data-source-name { font-weight: 600; font-size: 14px; }

.ce-data-source-code {
    font-family: var(--ce-font-mono, ui-monospace, monospace);
    font-size: 11px;
    color: var(--ce-text-muted);
}

.ce-data-source-desc {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--ce-text-secondary);
}

.ce-data-source-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--ce-text-muted);
}

/* Said out loud, because an undescribed source will accept a file, read it with
   row one as the header, and report success having stored almost nothing. */
.ce-data-source-warn {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ce-warning-bg, rgba(200, 140, 0, .12));
    color: var(--ce-warning-text, #8a6100);
    font-weight: 600;
    cursor: help;
}

/* A NOTE, not a warning. "No sheet layout" is the ordinary and correct state of a
   CSV source, so it must not carry the amber a real problem carries — a badge that
   cries wolf on every CSV is a badge nobody reads on the workbook that needs it. */
.ce-data-source-note {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ce-surface-muted, rgba(0, 0, 0, .05));
    color: var(--ce-text-secondary, #6b6b6b);
    font-weight: 500;
    cursor: help;
}

.ce-data-source-actions {
    margin-top: 10px;
}

/* The confirm sits IN the card rather than over the page, so the name being
   removed and the button removing it are never separated. */
.ce-data-source-confirm {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ce-border);
    font-size: 12.5px;
    color: var(--ce-text-secondary);
}

.ce-data-sources-step { margin: 0; font-size: 15px; font-weight: 600; }
.ce-data-sources-hint { margin: 0 0 12px; font-size: 13px; color: var(--ce-text-secondary); }

.ce-data-sources-derived {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--ce-text-muted);
}

.ce-data-sources-confirm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.ce-data-sources-summary {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--ce-text-muted);
}

.ce-data-sources-nav { display: flex; align-items: center; gap: 8px; }
.ce-data-sources-spacer { flex: 1 1 auto; }

/* ── The grouping offer ──────────────────────────────────────────────────────
   Given its own treatment because it changes the shape of everything downstream:
   150 rows or 10, a fleet matrix that can exist or one that cannot. It sits under
   the grid it was inferred from so the claim can be checked against the sheet. */
.ce-sheet-grouping {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 4px 0 12px;
    padding: 12px 14px;
    border-radius: var(--ce-radius);
    border: 1px solid color-mix(in srgb, var(--ce-teal) 35%, transparent);
    background: color-mix(in srgb, var(--ce-teal) 7%, transparent);
}

/* Accepted is quieter, not louder. Once it is taken it is a statement of fact
   about the sheet rather than a question, and a question that keeps shouting
   after it is answered reads as unresolved. */
.ce-sheet-grouping.accepted {
    border-style: dashed;
    background: transparent;
}

.ce-sheet-grouping-text {
    font-size: 13px;
    color: var(--ce-text-secondary);
    flex: 1 1 320px;
    min-width: 0;
}

.ce-sheet-grouping-text b { color: var(--ce-text-primary); }

.ce-sheet-grouping-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ce-sheet-grouping-controls .ce-label { margin: 0; white-space: nowrap; }

.ce-sheet-grouping-name { width: 130px; }

/* ── Local data sources ──────────────────────────────────────────────────────
   The allowlist screen. Two things carry visual weight on purpose: an object that
   cannot be registered stays visible and reads as unavailable rather than being
   hidden, and a source with no tenant column is marked wherever it appears. The
   second is the one fact on the page nobody should ever have to hunt for. */
.ce-local-toolbar { margin-bottom: 14px; }

.ce-local-step { margin: 0; font-size: 15px; font-weight: 600; }

.ce-local-hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--ce-text-secondary);
}

.ce-local-derived {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--ce-text-muted);
}

.ce-local-objects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.ce-local-object {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    text-align: left;
    border-radius: var(--ce-radius);
    border: 1px solid var(--ce-border);
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.ce-local-object:hover:not(:disabled) { border-color: var(--ce-primary); }

.ce-local-object-name {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ce-local-object-kind {
    flex-shrink: 0;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ce-text-muted);
}

/* ── Local source arguments ──────────────────────────────────────────────────
   A function's arguments, one row each. The type sits next to the name because
   two arguments of the same shape and different types bind differently. */
.ce-local-args {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ce-local-arg {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(220px, 2fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--ce-border);
    border-radius: 8px;
    background: var(--ce-surface);
}

.ce-local-arg-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ce-local-arg-type {
    font-size: 11.5px;
    color: var(--ce-text-muted);
}

/* Two functions in one schema often differ only by what they take. */
.ce-local-object-args {
    font-size: 11.5px;
    color: var(--ce-text-muted);
    font-family: var(--ce-font-mono, ui-monospace, monospace);
}

@media (max-width: 700px) {
    .ce-local-arg { grid-template-columns: 1fr; align-items: stretch; }
}

/* Listed, not hidden. An object whose name would need escaping is refused at the
   door, and leaving it out would look like the database does not hold it. */
.ce-local-unusable { opacity: .45; cursor: not-allowed; }

.ce-local-safety {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.ce-local-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    cursor: pointer;
}

.ce-local-summary {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 12.5px;
    color: var(--ce-text-muted);
}

.ce-local-nav { display: flex; align-items: center; gap: 8px; }
.ce-local-spacer { flex: 1 1 auto; }

.ce-local-name { font-weight: 600; font-size: 13.5px; }

.ce-local-desc {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--ce-text-secondary);
}

.ce-local-type {
    font-family: var(--ce-font-mono, ui-monospace, monospace);
    font-size: 11.5px;
    color: var(--ce-text-muted);
}

.ce-local-colname { font-size: 13px; font-weight: 500; }

.ce-local-nullable {
    margin-left: 6px;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--ce-text-muted);
}

.ce-local-na { color: var(--ce-text-muted); }

.ce-local-ok {
    font-family: var(--ce-font-mono, ui-monospace, monospace);
    font-size: 11.5px;
    color: var(--ce-success, #1a7f4b);
}

/* An unscoped source is a deliberate decision, so it stays loud for as long as it
   is in force rather than only at the moment it is taken. */
.ce-local-warn {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ce-warning-bg, rgba(200, 140, 0, .12));
    color: var(--ce-warning-text, #8a6100);
    font-size: 11.5px;
    font-weight: 600;
    cursor: help;
}

.ce-local-revoked td { opacity: .5; }

.ce-local-actions { display: flex; gap: 6px; white-space: nowrap; }

/* The rule under the row rather than in a tooltip: Rate and Ratio exist because
   they are counter-intuitive, and a rule nobody hovers over is a rule nobody reads. */
.ce-local-rolehint td {
    padding-top: 0;
    border-top: 0;
    font-size: 11.5px;
    color: var(--ce-text-muted);
}

.ce-local-columns .ce-table td { vertical-align: middle; }
.ce-local-unit { width: 80px; }

/* ── Pasted report design ────────────────────────────────────────────────────
   What a design would produce HERE, shown before anything is created. */
.ce-report-import { margin-bottom: var(--ce-space-3); }

.ce-report-import-origin {
    font-size: 12px;
    color: var(--ce-text-muted);
}

.ce-report-import-facts {
    display: grid;
    grid-template-columns: minmax(180px, auto) 1fr;
    gap: 6px 16px;
    margin: 14px 0 0;
    font-size: 13px;
}

.ce-report-import-facts > div { display: contents; }

.ce-report-import-facts dt {
    color: var(--ce-text-secondary);
    font-weight: 600;
}

.ce-report-import-facts dd {
    margin: 0;
    color: var(--ce-text-primary);
    overflow-wrap: anywhere;
}

/* The gaps are named, not counted — "2 missing" tells nobody what to import. */
.ce-report-import-facts dt.ce-report-import-gap { color: var(--ce-warning-text, #8a6100); }

@media (max-width: 640px) {
    .ce-report-import-facts { grid-template-columns: 1fr; }
    .ce-report-import-facts dd { margin-bottom: 8px; }
}

/* Import into a source that already exists — the affordance whose absence made
   every re-import create another source. */
.ce-data-source-import {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    cursor: pointer;
}