/**
 * Creatrr Portal — Design System
 *
 * Pure Monochrome palette, dark-mode first.
 * Font: Poppins (400 / 500 / 600 / 700), locally hosted.
 *
 * All typography uses clamp() for fluid scaling across viewports.
 * Spacing tokens use a consistent 4px base scale.
 * Icon set: custom SVG inline system (see Icons.php / crIcons JS).
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* --- Typography ---------------------------------------------------- */
    --cr-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Fluid type scale — clamp(min, preferred, max)
       Preferred uses viewport-relative units for smooth scaling.
       Breakpoints targeted: 375px (min) → 1440px (max).                 */
    --cr-font-size-xs:   clamp(0.6875rem, 0.65rem + 0.19vw, 0.75rem);     /* ~11px → 12px */
    --cr-font-size-sm:   clamp(0.75rem,   0.7rem  + 0.25vw, 0.875rem);    /* ~12px → 14px */
    --cr-font-size-base: clamp(0.875rem,  0.83rem  + 0.23vw, 1rem);       /* ~14px → 16px */
    --cr-font-size-lg:   clamp(1rem,      0.95rem  + 0.25vw, 1.125rem);   /* ~16px → 18px */
    --cr-font-size-xl:   clamp(1.125rem,  1.05rem  + 0.38vw, 1.25rem);    /* ~18px → 20px */
    --cr-font-size-2xl:  clamp(1.25rem,   1.1rem   + 0.75vw, 1.5rem);     /* ~20px → 24px */
    --cr-font-size-3xl:  clamp(1.5rem,    1.25rem  + 1.25vw, 1.875rem);   /* ~24px → 30px */
    --cr-font-size-4xl:  clamp(1.75rem,   1.4rem   + 1.75vw, 2.25rem);    /* ~28px → 36px */

    --cr-font-weight-regular:  400;
    --cr-font-weight-medium:   500;
    --cr-font-weight-semibold: 600;
    --cr-font-weight-bold:     700;

    --cr-line-height:        1.6;
    --cr-line-height-tight:  1.2;
    --cr-line-height-snug:   1.35;

    /* --- Spacing (4px base) -------------------------------------------- */
    --cr-space-1:  0.25rem;    /*  4px */
    --cr-space-2:  0.5rem;     /*  8px */
    --cr-space-3:  0.75rem;    /* 12px */
    --cr-space-4:  1rem;       /* 16px */
    --cr-space-5:  1.25rem;    /* 20px */
    --cr-space-6:  1.5rem;     /* 24px */
    --cr-space-8:  2rem;       /* 32px */
    --cr-space-10: 2.5rem;     /* 40px */
    --cr-space-12: 3rem;       /* 48px */
    --cr-space-16: 4rem;       /* 64px */

    /* Fluid section spacing — for larger gaps between page sections */
    --cr-space-section: clamp(1.5rem, 1rem + 2.5vw, 3rem);
    --cr-space-page:    clamp(1rem,   0.5rem + 2.5vw, 2rem);

    /* --- Border Radius ------------------------------------------------- */
    --cr-radius-sm:   4px;
    --cr-radius-md:   8px;
    --cr-radius-lg:   12px;
    --cr-radius-xl:   16px;
    --cr-radius-full: 9999px;

    /* --- Shadows ------------------------------------------------------- */
    --cr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --cr-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --cr-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);

    /* --- Overlays ------------------------------------------------------ */
    --cr-overlay:       rgba(0, 0, 0, 0.6);
    --cr-overlay-heavy: rgba(0, 0, 0, 0.7);

    /* --- Chart / data-viz ---------------------------------------------- */
    --cr-chart-grid:   rgba(255, 255, 255, 0.05);
    --cr-chart-border: rgba(0, 0, 0, 0.2);

    /* --- Transitions --------------------------------------------------- */
    --cr-transition: 200ms ease;

    /* --- Status Colors (universally accessible) ------------------------ */
    --cr-success: #22c55e;
    --cr-error:   #ef4444;
    --cr-warning: #f59e0b;
    --cr-info:    #3b82f6;
    --cr-role-sm-close: #9b59b6;

    /* --- Brand Accent (Ocean Deep) ------------------------------------- */
    --cr-accent:       #1e6b9e;
    --cr-accent-hover: #0f5073;
    --cr-accent-light: rgba(30, 107, 158, 0.15);

    /* --- Container ----------------------------------------------------- */
    --cr-container-max: 1200px;
    --cr-container-pad: clamp(1rem, 0.5rem + 2.5vw, 2rem);
}

/* ==========================================================================
   Dark Mode (Default) — "Soft Dark" palette
   Lifted neutral with subtle zinc undertone (#27272a base).
   ========================================================================== */

[data-theme="dark"],
:root {
    --cr-bg-primary:   #27272a;
    --cr-bg-secondary: #2e2e32;
    --cr-bg-tertiary:  #37373c;
    --cr-bg-elevated:  #414146;
    --cr-bg-hover:     #4c4c52;
    --cr-bg-active:    #56565c;

    --cr-text-primary:   #f0f0f0;
    --cr-text-secondary: #9a9aa0;
    --cr-text-tertiary:  #76767e;
    --cr-text-disabled:  #56565c;
    --cr-text-inverse:   #18181b;

    --cr-border:       #414146;
    --cr-border-hover: #56565c;
    --cr-border-focus: #f0f0f0;

    --cr-input-bg:     #27272a;
    --cr-input-border: #37373c;

    --cr-btn-primary-bg:       var(--cr-accent);
    --cr-btn-primary-text:     #f0f0f0;
    --cr-btn-primary-hover:    var(--cr-accent-hover);
    --cr-btn-secondary-bg:     transparent;
    --cr-btn-secondary-text:   #f0f0f0;
    --cr-btn-secondary-border: #4c4c52;
    --cr-btn-secondary-hover:  #37373c;
}

/* ==========================================================================
   Light Mode
   ========================================================================== */

[data-theme="light"] {
    --cr-bg-primary:   #f7f7f7;
    --cr-bg-secondary: #f0f0f0;
    --cr-bg-tertiary:  #eaeaea;
    --cr-bg-elevated:  #fafafa;
    --cr-bg-hover:     #e5e5e5;
    --cr-bg-active:    #dcdcdc;

    --cr-text-primary:   #1a1a1a;
    --cr-text-secondary: #525252;
    --cr-text-tertiary:  #8a8a8a;
    --cr-text-disabled:  #c0c0c0;
    --cr-text-inverse:   #f7f7f7;

    --cr-border:       #d8d8d8;
    --cr-border-hover: #bfbfbf;
    --cr-border-focus: #1a1a1a;

    --cr-input-bg:     #fafafa;
    --cr-input-border: #d0d0d0;

    --cr-btn-primary-bg:       var(--cr-accent);
    --cr-btn-primary-text:     #f7f7f7;
    --cr-btn-primary-hover:    var(--cr-accent-hover);
    --cr-btn-secondary-bg:     transparent;
    --cr-btn-secondary-text:   #1a1a1a;
    --cr-btn-secondary-border: #bfbfbf;
    --cr-btn-secondary-hover:  #e5e5e5;

    /* Light-mode accent adjustments — darker for contrast on white */
    --cr-accent:       #0f5073;
    --cr-accent-hover: #08364e;
    --cr-accent-light: rgba(15, 80, 115, 0.12);

    /* Status colors override for light mode — better contrast on white */
    --cr-success: #16a34a;
    --cr-error:   #dc2626;
    --cr-warning: #d97706;
    --cr-info:    #2563eb;

    --cr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --cr-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --cr-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    --cr-overlay:       rgba(0, 0, 0, 0.5);
    --cr-overlay-heavy: rgba(0, 0, 0, 0.8);

    --cr-chart-grid:   rgba(0, 0, 0, 0.06);
    --cr-chart-border: rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

/* Apply design system tokens and base typography to all major container elements.
   Ensures consistent font smoothing and baseline color/bg from root CSS vars. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

.portal,
.listings,
.creatrr-auth-wrapper {
    font-family: var(--cr-font-family);
    font-size: var(--cr-font-size-base);
    font-weight: var(--cr-font-weight-regular);
    line-height: var(--cr-line-height);
    color: var(--cr-text-primary);
    background-color: var(--cr-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.cr-h1 {
    font-size: var(--cr-font-size-4xl);
    font-weight: var(--cr-font-weight-bold);
    line-height: var(--cr-line-height-tight);
    letter-spacing: -0.02em;
    color: var(--cr-text-primary);
}

.cr-h2 {
    font-size: var(--cr-font-size-3xl);
    font-weight: var(--cr-font-weight-semibold);
    line-height: var(--cr-line-height-tight);
    letter-spacing: -0.01em;
    color: var(--cr-text-primary);
}

.cr-h3 {
    font-size: var(--cr-font-size-2xl);
    font-weight: var(--cr-font-weight-semibold);
    line-height: var(--cr-line-height-snug);
    color: var(--cr-text-primary);
}

.cr-h4 {
    font-size: var(--cr-font-size-xl);
    font-weight: var(--cr-font-weight-medium);
    line-height: var(--cr-line-height-snug);
    color: var(--cr-text-primary);
}

.cr-h5 {
    font-size: var(--cr-font-size-lg);
    font-weight: var(--cr-font-weight-medium);
    line-height: var(--cr-line-height-snug);
    color: var(--cr-text-primary);
}

.cr-body {
    font-size: var(--cr-font-size-base);
    font-weight: var(--cr-font-weight-regular);
    line-height: var(--cr-line-height);
    color: var(--cr-text-primary);
}

.cr-small {
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-regular);
    line-height: var(--cr-line-height);
    color: var(--cr-text-secondary);
}

.cr-caption {
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-regular);
    line-height: var(--cr-line-height);
    color: var(--cr-text-tertiary);
}

.cr-label {
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-medium);
    line-height: var(--cr-line-height-snug);
    color: var(--cr-text-secondary);
}

.cr-overline {
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-semibold);
    line-height: var(--cr-line-height-snug);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cr-text-tertiary);
}

/* Section header — consistent for card / panel headings */
.cr-section-header {
    font-size: var(--cr-font-size-lg);
    font-weight: var(--cr-font-weight-semibold);
    line-height: var(--cr-line-height-snug);
    margin-bottom: var(--cr-space-4);
}

/* Page section — universal vertical rhythm between major content blocks.
   Use on cards, table wrappers, form groups, and any top-level content block
   to ensure consistent spacing across all portal pages.
   Example: <div class="cr-card cr-page-section"> or <section class="cr-page-section"> */
.cr-page-section { margin-bottom: var(--cr-space-6); }
.cr-page-section:last-child { margin-bottom: 0; }

/* ==========================================================================
   Icons
   ========================================================================== */

.cr-icon {
    display: inline-flex;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Ensure icons inherit text color by default */
.cr-icon:not([stroke]) {
    stroke: currentColor;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.cr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cr-space-2);
    padding: var(--cr-space-3) var(--cr-space-6);
    font-family: var(--cr-font-family);
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-medium);
    line-height: 1.15;
    border-radius: var(--cr-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--cr-transition);
    text-decoration: none;
    white-space: nowrap;
}
.cr-btn svg { display: block; flex-shrink: 0; transform: translateY(-0.5px); }

.cr-btn:focus-visible {
    outline: 2px solid var(--cr-border-focus);
    outline-offset: 2px;
}

.cr-btn-primary {
    background: var(--cr-btn-primary-bg);
    color: var(--cr-btn-primary-text);
}

.cr-btn-primary:hover {
    background: var(--cr-btn-primary-hover);
}

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

.cr-btn-secondary:hover {
    background: var(--cr-btn-secondary-hover);
}

.cr-btn-ghost {
    background: transparent;
    color: var(--cr-text-secondary);
    border-color: transparent;
}

.cr-btn-ghost:hover {
    background: var(--cr-bg-hover);
    color: var(--cr-text-primary);
}

.cr-btn-danger {
    background: var(--cr-error);
    color: var(--cr-bg-primary);
    border-color: transparent;
}

.cr-btn-danger:hover {
    filter: brightness(0.9);
}

.cr-btn-danger-outline {
    background: transparent;
    color: var(--cr-error);
    border: 1px solid var(--cr-error);
}

.cr-btn-danger-outline:hover {
    background: var(--cr-error);
    color: var(--cr-bg-primary);
}

.cr-btn-lg {
    padding: var(--cr-space-4) var(--cr-space-8);
    font-size: var(--cr-font-size-base);
}

.cr-btn-sm {
    padding: var(--cr-space-2) var(--cr-space-4);
    font-size: var(--cr-font-size-xs);
}

/* Universal "Add" button — primary CTA in page headers.
   Use with .cr-btn .cr-btn-primary .cr-btn-sm .cr-btn-add.
   Contains .cr-btn-add-label (wide) and .cr-btn-add-icon (narrow).
   Example: <button class="cr-btn cr-btn-primary cr-btn-sm cr-btn-add">
              <span class="cr-btn-add-label"><svg>+</svg> Add Stage Manager</span>
              <span class="cr-btn-add-icon"><svg>+</svg><svg>crew</svg></span>
            </button> */
.cr-btn-add { padding: var(--cr-space-2) var(--cr-space-3); line-height: 1; }
.cr-btn-add .cr-btn-add-label { display: inline-flex; align-items: center; gap: var(--cr-space-1); }
.cr-btn-add .cr-btn-add-label svg { width: 12px; height: 12px; }
.cr-btn-add .cr-btn-add-icon { display: none; align-items: center; gap: var(--cr-space-1); }
.cr-btn-add .cr-btn-add-icon svg { width: 12px; height: 12px; stroke-width: 2.5; }
@media (max-width: 1024px) {
    .cr-btn-add .cr-btn-add-label { display: none; }
    .cr-btn-add .cr-btn-add-icon { display: inline-flex; }
}

.cr-btn-icon {
    padding: var(--cr-space-2);
    border-radius: var(--cr-radius-md);
    background: transparent;
    color: var(--cr-text-secondary);
    border: 1px solid transparent;
}

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

/* ==========================================================================
   Form Elements
   ========================================================================== */

.cr-input,
.cr-textarea,
.cr-select {
    width: 100%;
    padding: var(--cr-space-3) var(--cr-space-4);
    font-family: var(--cr-font-family);
    font-size: var(--cr-font-size-base);
    color: var(--cr-text-primary);
    background: var(--cr-input-bg);
    border: 1px solid var(--cr-input-border);
    border-radius: var(--cr-radius-md);
    transition: border-color var(--cr-transition);
}

.cr-select {
    padding-right: var(--cr-space-8);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--cr-space-3) center;
    background-size: 14px;
}

.cr-input:focus,
.cr-textarea:focus,
.cr-select:focus {
    outline: none;
    border-color: var(--cr-border-focus);
}

.cr-input::placeholder,
.cr-textarea::placeholder {
    color: var(--cr-text-tertiary);
}

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

.cr-field {
    margin-bottom: var(--cr-space-5);
}

.cr-field label {
    display: block;
    margin-bottom: var(--cr-space-2);
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-medium);
    color: var(--cr-text-secondary);
}

.cr-field-error {
    margin-top: var(--cr-space-1);
    font-size: var(--cr-font-size-xs);
    color: var(--cr-error);
}

.cr-field-hint {
    margin-top: var(--cr-space-1);
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
}

/* Checkbox & Radio — custom styling */
.cr-checkbox,
.cr-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--cr-space-2);
    font-size: var(--cr-font-size-sm);
    color: var(--cr-text-primary);
    cursor: pointer;
}

/* Custom checkbox — matches the radio dot visual language */
.cr-checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--cr-border);
    border-radius: var(--cr-radius-sm);
    background: var(--cr-bg-primary);
    cursor: pointer;
    transition: all var(--cr-transition);
    flex-shrink: 0;
    position: relative;
}
.cr-checkbox input[type="checkbox"]:hover {
    border-color: var(--cr-border-hover);
}
.cr-checkbox input[type="checkbox"]:checked {
    border-color: var(--cr-accent);
    background: var(--cr-accent);
}
.cr-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid var(--cr-bg-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ==========================================================================
   Radio Card Groups — selectable option rows/cards with injected dot
   Two layouts:
     .cr-radio-group              → default vertical row list (facility config)
     .cr-radio-group.cr-radio-group-grid → card grid auto-fit (onboarding)
   ========================================================================== */
.cr-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--cr-space-2);
    margin-bottom: 0;
}
.cr-radio-group.cr-radio-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--cr-space-3);
    margin-bottom: var(--cr-space-6);
}
/* Legacy vertical modifier — kept for backwards compat (same as default now) */
.cr-radio-group.cr-radio-group-vertical {
    display: flex;
    flex-direction: column;
}

.cr-radio-option {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--cr-space-3);
    align-items: center;
    padding: var(--cr-space-3) var(--cr-space-4);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    cursor: pointer;
    transition: all var(--cr-transition);
}
.cr-radio-option:hover { border-color: var(--cr-border-hover); }
.cr-radio-option.selected {
    border-color: var(--cr-accent);
    background: color-mix(in srgb, var(--cr-accent) 8%, transparent);
}

/* Grid variant — no injected dot, whole card acts as the control */
.cr-radio-group-grid .cr-radio-option {
    display: block;
    padding: var(--cr-space-4);
}
.cr-radio-group-grid .cr-radio-option.selected {
    border-color: var(--cr-text-primary);
    background: var(--cr-bg-hover);
}

/* Default: radio dot injected via ::before so existing markup doesn't need extra elements */
.cr-radio-group:not(.cr-radio-group-grid) .cr-radio-option::before {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: var(--cr-radius-full);
    border: 2px solid var(--cr-border);
    flex-shrink: 0;
    grid-row: 1 / span 2;
    transition: all var(--cr-transition);
    box-sizing: border-box;
}
.cr-radio-group:not(.cr-radio-group-grid) .cr-radio-option.selected::before {
    border-color: var(--cr-accent);
    background: radial-gradient(circle, var(--cr-accent) 0 4px, transparent 5px);
}

/* ==========================================================================
   Checkbox Card Groups — same visual as radio cards but multi-select
   ========================================================================== */
.cr-check-group {
    display: flex;
    flex-direction: column;
    gap: var(--cr-space-2);
}
.cr-check-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cr-space-2);
}
.cr-check-option {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--cr-space-3);
    align-items: center;
    padding: var(--cr-space-3) var(--cr-space-4);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    cursor: pointer;
    transition: all var(--cr-transition);
}
.cr-check-option:hover { border-color: var(--cr-border-hover); }
.cr-check-option.selected {
    border-color: var(--cr-accent);
    background: color-mix(in srgb, var(--cr-accent) 8%, transparent);
}
/* Checkbox square via ::before — contains the check via SVG background */
.cr-check-option::before {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: var(--cr-radius-sm);
    border: 2px solid var(--cr-border);
    flex-shrink: 0;
    grid-row: 1 / span 2;
    transition: all var(--cr-transition);
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
}
.cr-check-option.selected::before {
    border-color: var(--cr-accent);
    background-color: var(--cr-accent);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5.5L4 8L8.5 2' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cr-check-option h4 {
    grid-column: 2;
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-medium);
    margin: 0;
    color: var(--cr-text-primary);
    line-height: 18px;
}
.cr-check-option p {
    grid-column: 2;
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
    margin: var(--cr-space-1) 0 0;
    line-height: 1.4;
}

.cr-radio-option h4 {
    grid-column: 2;
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-medium);
    margin: 0;
    color: var(--cr-text-primary);
    line-height: 18px;
}
.cr-radio-option p {
    grid-column: 2;
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
    margin: var(--cr-space-1) 0 0;
    line-height: 1.4;
}
.cr-radio-group-grid .cr-radio-option h4 {
    grid-column: auto;
    font-weight: var(--cr-font-weight-semibold);
    margin-bottom: var(--cr-space-1);
}
.cr-radio-group-grid .cr-radio-option p {
    grid-column: auto;
    margin: 0;
}

/* Explicit radio-dot element (used by Payment Terms markup) — hide since ::before handles it */
.cr-radio-dot { display: none; }
.cr-radio-body { display: block; grid-column: 2; }
.cr-radio-body h4 {
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-medium);
    margin: 0;
    color: var(--cr-text-primary);
}
.cr-radio-body p {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
    margin: var(--cr-space-1) 0 0;
    line-height: 1.4;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.cr-card {
    background: var(--cr-bg-elevated);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-lg);
    padding: var(--cr-space-6);
    transition: box-shadow var(--cr-transition);
}

.cr-card:hover {
    box-shadow: var(--cr-shadow-md);
}

.cr-card-flat {
    background: var(--cr-bg-elevated);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-lg);
    padding: var(--cr-space-6);
}

/* ==========================================================================
   Dashed Action Card (.cr-dash-card)
   Clickable dashed-border card used as an inline "add" CTA.
   Always 40px tall, 100% wide, plus icon on the left.
   ========================================================================== */

.cr-dash-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cr-space-2);
    width: 100%;
    height: 40px;
    padding: 0 var(--cr-space-4);
    border: 2px dashed var(--cr-border);
    border-radius: var(--cr-radius-md);
    background: transparent;
    cursor: pointer;
    transition: all var(--cr-transition);
    box-sizing: border-box;
}
.cr-dash-card:hover {
    border-color: var(--cr-accent);
    background: color-mix(in srgb, var(--cr-accent) 5%, transparent);
}
.cr-dash-card-icon {
    width: 18px;
    height: 18px;
    border-radius: var(--cr-radius-full);
    background: var(--cr-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cr-text-tertiary);
    transition: all var(--cr-transition);
    flex-shrink: 0;
}
.cr-dash-card:hover .cr-dash-card-icon {
    color: var(--cr-accent);
    background: color-mix(in srgb, var(--cr-accent) 12%, transparent);
}
.cr-dash-card-label {
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-medium);
    color: var(--cr-text-tertiary);
    transition: color var(--cr-transition);
}
.cr-dash-card:hover .cr-dash-card-label {
    color: var(--cr-accent);
}
.cr-dash-card--centered {
    justify-content: center;
}

/* ==========================================================================
   Status Badges
   ========================================================================== */

.cr-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cr-space-1);
    padding: var(--cr-space-1) var(--cr-space-3);
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-medium);
    border-radius: var(--cr-radius-full);
    line-height: 1.4;
    min-width: 86px;
    text-align: center;
}

.cr-badge-success { background: color-mix(in srgb, var(--cr-success) 15%, transparent); color: var(--cr-success); }
.cr-badge-error   { background: color-mix(in srgb, var(--cr-error) 15%, transparent);   color: var(--cr-error); }
.cr-badge-warning { background: color-mix(in srgb, var(--cr-warning) 15%, transparent); color: var(--cr-warning); }
.cr-badge-info    { background: color-mix(in srgb, var(--cr-info) 15%, transparent);    color: var(--cr-info); }
.cr-badge-neutral { background: var(--cr-bg-hover);        color: var(--cr-text-secondary); }

.cr-badge-pickbook {
    background-color: var(--cr-info);
    color: var(--cr-bg-primary);
}

.cr-badge-allin {
    background-color: var(--cr-success);
    color: var(--cr-bg-primary);
}

.cr-badge-quote {
    background-color: var(--cr-warning);
    color: var(--cr-bg-primary);
}

/* ==========================================================================
   Tables
   ========================================================================== */

.cr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--cr-font-size-sm);
}

.cr-table th {
    text-align: left;
    font-weight: var(--cr-font-weight-semibold);
    font-size: var(--cr-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cr-text-tertiary);
    padding: var(--cr-space-2) var(--cr-space-3);
    border-bottom: 1px solid var(--cr-border);
    position: relative;
}
.cr-table th.col-right { text-align: right; }
.cr-table th.col-center { text-align: center; }

.cr-table td {
    padding: var(--cr-space-3);
    border-bottom: 1px solid var(--cr-border);
    color: var(--cr-text-secondary);
    vertical-align: middle;
    font-size: var(--cr-font-size-sm);
    height: 56px;
    box-sizing: border-box;
}
/* ── Column-type widths (apply to th AND td so no inline styles are needed) ── */
.cr-table .col-date    { width: 60px; }
.cr-table .col-action  { width: 44px; }
.cr-table .col-avatar  { width: 52px; }
.cr-table .col-dot     { width: 28px; overflow: visible; }
.cr-table .col-drag    { width: 40px; }

/* ── Project column — always gets fade/truncate, consistent font ── */
.cr-table td.col-project {
    font-size: var(--cr-font-size-sm);
}
.cr-table td.col-project .cr-cell-name {
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-text-primary);
}
/* Project column ALWAYS keeps the fade mask — never exclude it */
.cr-table.cr-col-sized td.col-project {
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent calc(100% - 4px));
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent calc(100% - 4px));
}

/* Date column — no fade, no clip, always vertically centered */
.cr-table td.col-date {
    overflow: visible;
    vertical-align: middle;
}
.cr-table.cr-col-sized td.col-date {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}
/* Amount column — right-aligned numbers, no fade */
.cr-table.cr-col-sized td.col-amount {
    -webkit-mask-image: none;
    mask-image: none;
}
/* When table-layout is fixed (after resize), clip cell content with fade */
.cr-table.cr-col-sized td,
.cr-table.cr-col-sized th {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
/* Action cells must allow overflow — no clipping on interactive columns */
.cr-table.cr-col-sized td.col-action,
.cr-table td.col-action,
.cr-table.cr-col-sized td.col-right,
.cr-table.cr-col-sized td.col-avatar {
    overflow: visible;
}
/* Action cells with row-actions: do not compress below content width */
.cr-table td:has(> .cr-row-actions) {
    white-space: nowrap;
}
/* Avatar, action, amount, and color-dot cells — never clip or fade */
.cr-table.cr-col-sized td:has(> .cr-cell-avatar),
.cr-table.cr-col-sized td:has(> .cr-row-actions),
.cr-table.cr-col-sized td:has(> .cr-cell-amount),
.cr-table.cr-col-sized td:has(> .cr-fac-color-dot) {
    overflow: visible;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}
/* Fade mask on text cells (exclude badge, action, amount, date, right, avatar, dot, readiness cols) */
.cr-table.cr-col-sized td:not(.col-badge):not(.col-action):not(.col-amount):not(.col-date):not(.col-right):not(.col-avatar):not(.col-dot):not(.col-drag):not(.col-readiness) {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent calc(100% - 4px));
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent calc(100% - 4px));
}
/* Readiness badge cells — never fade or clip */
.cr-table.cr-col-sized td.col-readiness,
.cr-table.cr-col-sized td:has(> .dash-ready-checks) {
    overflow: visible;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}
/* Inner helpers also get fade */
.cr-table.cr-col-sized td .cr-cell-name,
.cr-table.cr-col-sized td .cr-cell-amount {
    overflow: hidden;
    white-space: nowrap;
}
.cr-table.cr-col-sized td .cr-cell-sub,
.cr-table.cr-col-sized td .cr-cell-date {
    overflow: hidden;
    white-space: nowrap;
    display: block;
}
/* Badge cells: collapse badge to a colored dot when column is narrow */
.cr-table.cr-col-sized td.col-badge .cr-badge {
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    transition: max-width 0.15s, padding 0.15s, font-size 0.15s, border-radius 0.15s;
}
.cr-table.cr-col-sized td.col-badge {
    overflow: visible;
}
/* When badge text doesn't fit, collapse to dot via container query is complex —
   use JS class .cr-badge-dot applied by the resize observer */
.cr-badge.cr-badge-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    padding: 0;
    border-radius: var(--cr-radius-full);
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
.cr-badge.cr-badge-dot.cr-badge-success { background: var(--cr-success); }
.cr-badge.cr-badge-dot.cr-badge-error   { background: var(--cr-error); }
.cr-badge.cr-badge-dot.cr-badge-warning { background: var(--cr-warning); }
.cr-badge.cr-badge-dot.cr-badge-info    { background: var(--cr-info); }
.cr-badge.cr-badge-dot.cr-badge-neutral { background: var(--cr-text-tertiary); }

/* ── Responsive Column Rules ──────────────────────────────────────────────
   Universal rules for column types. Applied by cr-table-interactive.js
   based on available space, not fixed breakpoints.
   ──────────────────────────────────────────────────────────────────────── */

/* Avatar column: hidden when table is narrow (JS adds .cr-col-hidden) */
.cr-table th.cr-col-hidden,
.cr-table td.cr-col-hidden {
    display: none;
}

/* Action icons → dropdown toggle.
   JS wraps existing .cr-row-actions in a container with a single toggle button
   and a positioned dropdown menu. */
.cr-actions-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    color: var(--cr-text-tertiary);
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: background var(--cr-transition), color var(--cr-transition);
}
.cr-actions-toggle:hover {
    background: var(--cr-bg-secondary);
    color: var(--cr-text-primary);
    border-color: var(--cr-text-tertiary);
}
.cr-actions-toggle svg {
    width: 14px;
    height: 14px;
}

/* Dropdown panel anchored to the toggle — Variant 1 "Clean Minimal" */
.cr-actions-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: var(--cr-space-1);
    background: var(--cr-bg-elevated);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    box-shadow: var(--cr-shadow-lg);
    z-index: 50;
    min-width: 200px;
    padding: var(--cr-space-2) 0;
}
.cr-actions-dropdown.cr-actions-open {
    display: block;
}

/* Dropdown items — Variant 1 "Clean Minimal": generous padding, sm font, 15px icons */
.cr-actions-dropdown .cr-row-action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--cr-space-3);
    width: 100%;
    padding: var(--cr-space-2) var(--cr-space-4);
    border: none;
    border-radius: 0;
    min-width: 0;
    height: auto;
    font-size: var(--cr-font-size-sm);
    color: var(--cr-text-secondary);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    background: none;
    cursor: pointer;
    font-family: var(--cr-font-family);
    transition: var(--cr-transition);
}
.cr-actions-dropdown .cr-row-action:hover {
    background: var(--cr-bg-hover);
    color: var(--cr-text-primary);
    border: none;
}
.cr-actions-dropdown .cr-row-action svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* When NOT collapsed, hide the dropdown wrapper entirely */
.cr-row-actions > .cr-actions-wrap {
    display: none;
    position: relative;
}
/* When using data-row-actions (dropdown-only, no inline icons), always show the wrap */
.cr-row-actions.cr-actions-dropdown-only > .cr-actions-wrap {
    display: inline-flex;
}

.cr-table tbody tr { transition: background 0.1s; }
.cr-table tbody tr:hover { background: var(--cr-bg-secondary); }
/* Remove last row border-bottom so it doesn't double with container border */
.cr-table tbody tr:last-child td { border-bottom: none; }
/* Strip borders from hidden readiness rows so border-collapse doesn't accumulate them */
.cr-table tbody tr.dash-ready-14 td,
.cr-table tbody tr.dash-ready-beyond td { border-bottom: none; }
/* Remove bottom border from the last visible row before hidden readiness rows */
.cr-table tbody tr:not(.dash-ready-14):not(.dash-ready-beyond):has(+ .dash-ready-14) td { border-bottom: none; }
.cr-table tbody tr[onclick],
.cr-table tbody tr[data-href] { cursor: pointer; }

/* ── Table Cell Helpers ── */

/* Project / primary name cell: dot + bold name */
.cr-cell-name {
    font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-text-primary);
    display: flex;
    align-items: center;
    gap: var(--cr-space-2);
}
.cr-cell-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--cr-radius-full);
    flex-shrink: 0;
    display: inline-block;
}

/* Sub-text (company, facility, day count) below a primary value */
.cr-cell-sub {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
    font-weight: var(--cr-font-weight-regular);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Producer cell — name + optional company, vertically centered */
.cr-cell-producer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 32px;
    line-height: 1.3;
}

/* Right-aligned amount + date stacked */
.cr-cell-amount {
    text-align: right;
    font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-text-primary);
    font-variant-numeric: tabular-nums;
}
.cr-cell-date {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
    white-space: nowrap;
}
td.col-right { text-align: right; }
td.col-center { text-align: center; }

/* Date column: stacked month/day/weekday */
.cr-cell-date-block {
    text-align: center;
    line-height: 1.1;
}
.cr-cell-date-block .month {
    font-size: var(--cr-font-size-xs);
    text-transform: uppercase;
    color: var(--cr-text-tertiary);
    letter-spacing: 0.05em;
}
.cr-cell-date-block .day {
    font-size: var(--cr-font-size-xl);
    font-weight: var(--cr-font-weight-bold);
}
.cr-cell-date-block .weekday {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
}

/* Type labels (Shoot, Prep, etc.) */
.cr-cell-type {
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-medium);
}

/* Paid progress bar */
.cr-cell-paid {
    display: flex;
    align-items: center;
    gap: var(--cr-space-2);
}
.cr-cell-paid-track {
    width: 48px;
    height: 4px;
    background: var(--cr-border);
    border-radius: var(--cr-radius-full);
    overflow: hidden;
    flex-shrink: 0;
}
.cr-cell-paid-fill {
    height: 100%;
    border-radius: var(--cr-radius-full);
}
.cr-cell-paid-fill.full { background: var(--cr-success); }
.cr-cell-paid-fill.partial { background: var(--cr-warning); }
.cr-cell-paid-fill.none { background: var(--cr-border); }
.cr-cell-paid-pct {
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 30px;
}

/* Calendar-style date cell (month over day in compact block) */
.cr-cell-cal {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
    min-width: 28px;
}
.cr-cell-cal-month {
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cr-text-tertiary);
}
.cr-cell-cal-day {
    font-size: var(--cr-font-size-lg);
    font-weight: var(--cr-font-weight-bold);
    color: var(--cr-text-primary);
    line-height: 1.1;
}
.cr-cell-date-empty {
    color: var(--cr-text-tertiary);
}

/* Calendar view container — hidden by default; shown when calendar toggle is active. */
.cr-calendar-view { display: none; }

/* ==========================================================================
   Shared Calendar Grid — default full-page month calendar.
   Use .cr-cal-grid + .cr-cal-cell pattern on any page needing a month view.
   ========================================================================== */
.cr-cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--cr-space-4); flex-wrap: wrap; gap: var(--cr-space-3); }
.cr-cal-header h3 { font-size: var(--cr-font-size-base); font-weight: var(--cr-font-weight-semibold); margin: 0; }
.cr-cal-header-left h2 { font-size: var(--cr-font-size-xl); font-weight: var(--cr-font-weight-semibold); margin: 0; }
.cr-cal-grid {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px; background: var(--cr-border);
    border: 1px solid var(--cr-border); border-radius: var(--cr-radius-md); overflow: hidden;
}
.cr-cal-dow {
    padding: var(--cr-space-2); text-align: center;
    font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-medium);
    color: var(--cr-text-tertiary); background: var(--cr-bg-elevated);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.cr-cal-cell {
    min-height: 120px; padding: var(--cr-space-2);
    background: var(--cr-bg-primary); vertical-align: top;
}
.cr-cal-cell.other-month { background: color-mix(in srgb, var(--cr-bg-secondary) 30%, var(--cr-bg-primary)); }
.cr-cal-cell.today { background: color-mix(in srgb, var(--cr-info) 8%, var(--cr-bg-primary)); border-left: 3px solid var(--cr-info); }
.cr-cal-day-num { font-size: var(--cr-font-size-xs); color: var(--cr-text-tertiary); margin-bottom: var(--cr-space-1); }
.cr-cal-event {
    display: block; font-size: var(--cr-font-size-xs); line-height: 1.35;
    padding: var(--cr-space-1) var(--cr-space-1); border-radius: var(--cr-radius-sm);
    margin-bottom: 2px; text-decoration: none; color: inherit;
    overflow: hidden; cursor: pointer; min-width: 0;
}
.cr-cal-fac-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    flex-shrink: 0; margin-right: 4px; vertical-align: middle;
    position: relative; top: -0.5px;
}
.cr-cal-event-name {
    display: block; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; font-weight: var(--cr-font-weight-medium);
}
.cr-cal-event-meta {
    display: block; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; opacity: 0.8;
}
/* Event type colors */
.cr-cal-event.type-shoot   { background: color-mix(in srgb, var(--cr-success) 15%, transparent); color: var(--cr-success); }
.cr-cal-event.type-prep    { background: color-mix(in srgb, var(--cr-info) 15%, transparent);    color: var(--cr-info); }
.cr-cal-event.type-strike  { background: color-mix(in srgb, var(--cr-warning) 15%, transparent); color: var(--cr-warning); }
.cr-cal-event.type-hold    { background: color-mix(in srgb, var(--cr-text-tertiary) 15%, transparent); color: var(--cr-text-tertiary); }
.cr-cal-event.type-default { background: color-mix(in srgb, var(--cr-text-secondary) 10%, transparent); color: var(--cr-text-secondary); }
/* Booking-status event colors (schedule page) */
.cr-cal-event.status-active    { background: color-mix(in srgb, var(--cr-success) 15%, transparent); color: var(--cr-success); }
.cr-cal-event.status-offered   { background: color-mix(in srgb, var(--cr-info) 15%, transparent);    color: var(--cr-info); }
.cr-cal-event.status-pending   { background: color-mix(in srgb, var(--cr-warning) 15%, transparent); color: var(--cr-warning); }
.cr-cal-event.status-wrapped   { background: color-mix(in srgb, var(--cr-text-tertiary) 15%, transparent); color: var(--cr-text-tertiary); }
.cr-cal-event.status-cancelled { background: color-mix(in srgb, var(--cr-error) 15%, transparent);   color: var(--cr-error); text-decoration: line-through; }
.cr-cal-event.status-blocked   { background: var(--cr-error); color: var(--cr-bg-primary); font-weight: var(--cr-font-weight-medium); }
.cr-cal-event.status-tour      { background: color-mix(in srgb, var(--cr-info) 15%, transparent);    color: var(--cr-info); }
.cr-cal-event.status-inquiry   { background: transparent; border: 1px dashed var(--cr-warning); color: var(--cr-warning); }
.cr-cal-event.status-interview { background: color-mix(in srgb, var(--cr-warning) 15%, transparent); color: var(--cr-warning); }
/* Production day-type calendar statuses */
.cr-cal-event.status-shoot     { background: color-mix(in srgb, var(--cr-success) 15%, transparent); color: var(--cr-success); }
.cr-cal-event.status-prep      { background: color-mix(in srgb, var(--cr-info) 15%, transparent);    color: var(--cr-info); }
.cr-cal-event.status-strike    { background: color-mix(in srgb, var(--cr-warning) 15%, transparent); color: var(--cr-warning); }
.cr-cal-event.status-hold      { background: color-mix(in srgb, var(--cr-text-tertiary) 15%, transparent); color: var(--cr-text-tertiary); }
/* Pending production day — no bg fill, orange left bar (overrides booking-status color) */
.cr-cal-event.prod-pending.prod-pending { background: transparent; color: var(--cr-warning); border-left: 3px solid var(--cr-warning); }
/* Calendar event hover tooltip */
.cr-cal-tooltip {
    position: fixed; z-index: 1100;
    background: var(--cr-bg-elevated); border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md); padding: var(--cr-space-3) var(--cr-space-4);
    box-shadow: var(--cr-shadow-lg); max-width: 280px; pointer-events: auto;
    font-family: var(--cr-font-family);
}
.cr-cal-tooltip-title { font-size: var(--cr-font-size-sm); font-weight: var(--cr-font-weight-semibold); color: var(--cr-text-primary); margin-bottom: var(--cr-space-1); }
.cr-cal-tooltip-meta  { font-size: var(--cr-font-size-xs); color: var(--cr-text-secondary); line-height: 1.5; }
.cr-cal-tooltip-meta span { display: block; }
.cr-cal-tooltip-link  { display: inline-block; margin-top: var(--cr-space-2); font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-medium); color: var(--cr-text-primary); text-decoration: none; border-bottom: 1px solid var(--cr-border); padding-bottom: 1px; }
/* Calendar responsive */
@media (max-width: 768px) {
    .cr-cal-cell { min-height: 80px; }
}

/* Reference IDs (invoice numbers, booking refs) — Poppins with slight tracking */
.cr-cell-mono {
    font-family: var(--cr-font-family);
    letter-spacing: 0.02em;
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-semibold);
}

/* Inline links inside table cells */
.cr-cell-link {
    color: var(--cr-accent);
    text-decoration: none;
}
.cr-cell-link:hover {
    text-decoration: underline;
}

/* Avatar cell (36px circle) */
.cr-cell-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--cr-radius-full);
    background: var(--cr-bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-bold);
    color: var(--cr-text-secondary);
    text-transform: uppercase;
    overflow: hidden;
    flex-shrink: 0;
}
.cr-cell-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Row action icon buttons — universal pattern for inline table actions */
.cr-row-actions {
    display: flex;
    gap: var(--cr-space-1);
    justify-content: flex-end;
    flex-shrink: 0;
    flex-wrap: nowrap;
}
.cr-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex-shrink: 0;
    color: var(--cr-text-tertiary);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    text-decoration: none;
    cursor: pointer;
    background: none;
    padding: 0;
    font-family: var(--cr-font-family);
}
.cr-row-action svg { width: 14px; height: 14px; flex-shrink: 0; }
.cr-row-action:hover {
    background: var(--cr-bg-secondary);
    color: var(--cr-text-primary);
    border-color: var(--cr-text-tertiary);
}

/* ── Table Toolbar (reusable filter bar above tables) ── */
.cr-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--cr-space-2);
    margin-bottom: var(--cr-space-4);
    flex-wrap: wrap;
}
.cr-table-toolbar .cr-select {
    width: auto;
    min-width: 0;
    flex-shrink: 1;
}
/* Status filter styled as toggle segment (matches range-toggle height/font) */
.cr-table-toolbar .cr-filter-select {
    font-family: inherit;
    font-size: var(--cr-font-size-xs);
    padding: var(--cr-space-1) var(--cr-space-3);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    background: transparent;
    color: var(--cr-text-secondary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: var(--cr-space-6);
}
.cr-table-toolbar .cr-filter-select:focus {
    outline: none;
    border-color: var(--cr-accent);
}
/* All toolbar items already pushed right via justify-content: flex-end */
/* Table footer: count left, load-more right, divider line above */
.cr-table-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cr-space-3) var(--cr-space-1);
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
    border-top: 1px solid var(--cr-border);
}
.cr-table-stats .cr-table-count { flex: 1; }
.cr-table-stats .cr-btn { flex-shrink: 0; }

/* View toggle: icon-only pill group */
.cr-view-toggle {
    display: inline-flex;
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    overflow: hidden;
}
.cr-view-toggle button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: var(--cr-space-1) var(--cr-space-3);
    /* Match height of dash-range-toggle text buttons (font xs × line-height + padding) */
    min-height: 27px;
    cursor: pointer;
    color: var(--cr-text-tertiary);
    transition: background 0.15s, color 0.15s;
}
.cr-view-toggle button:not(:last-child) {
    border-right: 1px solid var(--cr-border);
}
.cr-view-toggle button:hover {
    background: var(--cr-bg-secondary);
    color: var(--cr-text-primary);
}
.cr-view-toggle button.active {
    background: var(--cr-bg-secondary);
    color: var(--cr-text-primary);
}
.cr-view-toggle button svg {
    width: 16px;
    height: 16px;
}

/* ── Compact Filter Bar ── */
/* Unified pill bar: dropdowns + view icons in one rounded container.
   Used across all portal pages with filter controls. */
.cr-filter-bar {
    display: flex;
    align-items: stretch;
    width: fit-content;
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-full);
    background: var(--cr-bg-primary);
    overflow: hidden;
    margin-left: auto;
    margin-bottom: var(--cr-space-4);
    position: relative;
}
/* ── Filter Bar: Shimmer loading sweep ── */
.cr-filter-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--cr-text-primary) 3%, transparent) 35%, color-mix(in srgb, var(--cr-text-primary) 6%, transparent) 50%, color-mix(in srgb, var(--cr-text-primary) 3%, transparent) 65%, transparent 100%);
    animation: cr-fb-shimmer 1s ease-out forwards;
    pointer-events: none;
}
@keyframes cr-fb-shimmer {
    0%   { transform: translateX(-100%); opacity: 1; }
    70%  { transform: translateX(100%); opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}
/* After animation completes, hide via display:none so it doesn't interfere */
.cr-filter-bar.cr-fb-ready::before { display: none; }
/* When inside a page header row or section header, no bottom margin needed */
.cr-page-header-row .cr-filter-bar,
.cr-dash-section-header .cr-filter-bar,
.cr-prod-section-header .cr-filter-bar {
    margin-bottom: 0;
}
.cr-filter-bar .cr-fb-div {
    width: 1px;
    background: var(--cr-border);
    align-self: stretch;
    flex-shrink: 0;
}
/* Inline select inside the bar */
.cr-filter-bar .cr-fb-sel {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.cr-filter-bar .cr-fb-sel select {
    appearance: none;
    -webkit-appearance: none;
    padding: var(--cr-space-2) var(--cr-space-6) var(--cr-space-2) var(--cr-space-3);
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-medium);
    font-family: inherit;
    color: var(--cr-text-primary);
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
    outline: none;
}
.cr-filter-bar .cr-fb-sel select:hover {
    background: var(--cr-bg-secondary);
}
.cr-filter-bar .cr-fb-sel::after {
    content: '';
    position: absolute;
    right: var(--cr-space-2);
    top: 50%;
    transform: translateY(-50%);
    border-left: var(--cr-space-1) solid transparent;
    border-right: var(--cr-space-1) solid transparent;
    border-top: var(--cr-space-1) solid var(--cr-text-tertiary);
    pointer-events: none;
}
/* Hide chevron when clear button is visible */
.cr-filter-bar .cr-fb-sel.has-value::after { display: none; }
/* Clear (X) button for selects — hidden until a non-default value is chosen */
.cr-filter-bar .cr-fb-sel .cr-fb-clear {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 0 var(--cr-space-2);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cr-text-tertiary);
    font-size: 11px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: color 0.15s;
}
.cr-filter-bar .cr-fb-sel .cr-fb-clear:hover { color: var(--cr-text-primary); }
.cr-filter-bar .cr-fb-sel.has-value .cr-fb-clear { display: flex; }
.cr-filter-bar .cr-fb-sel.has-value select {
    color: var(--cr-accent);
    padding-right: var(--cr-space-6);
}
/* View icon buttons inside the bar */
.cr-filter-bar .cr-fb-view {
    padding: var(--cr-space-2) var(--cr-space-3);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cr-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.cr-filter-bar .cr-fb-view:hover {
    color: var(--cr-text-primary);
    background: var(--cr-bg-secondary);
}
.cr-filter-bar .cr-fb-view.active {
    background: var(--cr-bg-tertiary);
    color: var(--cr-text-primary);
}
.cr-filter-bar .cr-fb-view svg {
    width: 16px;
    height: 16px;
}
/* Clip first/last children to pill radius */
.cr-filter-bar > :first-child { border-radius: var(--cr-radius-full) 0 0 var(--cr-radius-full); }
.cr-filter-bar > :last-child { border-radius: 0 var(--cr-radius-full) var(--cr-radius-full) 0; }
.cr-filter-bar > :only-child { border-radius: var(--cr-radius-full); }
/* Extra inset on first/last so content clears the curve — applied to the
   interactive element itself so hover backgrounds fill edge-to-edge. */
.cr-filter-bar > .cr-fb-sel:first-child select { padding-left: var(--cr-space-4); }
.cr-filter-bar > .cr-fb-sel:last-child select { padding-right: var(--cr-space-7); }
.cr-filter-bar > .cr-fb-view:first-child { padding-left: var(--cr-space-4); }
.cr-filter-bar > .cr-fb-view:last-child { padding-right: var(--cr-space-4); }
.cr-filter-bar > .cr-fb-search:last-child button:first-child { padding-right: var(--cr-space-4); }
/* Expandable search inside the bar */
.cr-filter-bar .cr-fb-search {
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: width 0.25s ease;
    width: var(--cr-space-10);
}
.cr-filter-bar .cr-fb-search button {
    padding: var(--cr-space-2) var(--cr-space-3);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cr-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s;
}
.cr-filter-bar .cr-fb-search button:hover { color: var(--cr-text-primary); }
.cr-filter-bar .cr-fb-search button svg { width: 16px; height: 16px; }
.cr-filter-bar .cr-fb-search input {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-primary);
    outline: none;
    width: 0;
    padding: 0;
    transition: width 0.25s ease, padding 0.25s ease;
}
/* Clear (X) button — hidden until expanded */
.cr-filter-bar .cr-fb-search .cr-fb-clear {
    display: none;
    padding: var(--cr-space-1) var(--cr-space-2);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cr-text-tertiary);
    font-size: var(--cr-font-size-sm);
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}
.cr-filter-bar .cr-fb-search .cr-fb-clear:hover { color: var(--cr-text-primary); }
.cr-filter-bar .cr-fb-search.expanded {
    width: 200px;
}
.cr-filter-bar .cr-fb-search.expanded input {
    width: 130px;
    padding: var(--cr-space-1) 0 var(--cr-space-1) var(--cr-space-1);
}
.cr-filter-bar .cr-fb-search.expanded .cr-fb-clear {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Filter Bar: Nav Buttons (‹ Today ›) ── */
/* Also used standalone in .cr-cal-nav for calendar headers outside the filter bar */
.cr-cal-nav { display: flex; align-items: center; gap: var(--cr-space-1); }
.cr-cal-nav .cr-fb-nav-btn,
.cr-filter-bar .cr-fb-nav-btn {
    padding: var(--cr-space-2) var(--cr-space-2);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cr-text-secondary);
    font-family: var(--cr-font-family);
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-medium);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    min-width: 28px;
}
.cr-cal-nav .cr-fb-nav-btn:hover,
.cr-filter-bar .cr-fb-nav-btn:hover {
    background: var(--cr-bg-secondary);
    color: var(--cr-text-primary);
}
.cr-cal-nav .cr-fb-nav-today,
.cr-filter-bar .cr-fb-nav-today {
    padding-left: var(--cr-space-3);
    padding-right: var(--cr-space-3);
    font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-text-primary);
}
/* ── Filter Bar: Toggle Button (Show Past) ── */
.cr-filter-bar .cr-fb-toggle {
    padding: var(--cr-space-2) var(--cr-space-3);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cr-text-secondary);
    font-family: var(--cr-font-family);
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-medium);
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.cr-filter-bar .cr-fb-toggle:hover {
    background: var(--cr-bg-secondary);
    color: var(--cr-text-primary);
}
.cr-filter-bar .cr-fb-toggle.active {
    background: var(--cr-bg-tertiary);
    color: var(--cr-accent);
    font-weight: var(--cr-font-weight-semibold);
}

/* ── Interactive Table: Sort Indicators ── */
.cr-table th.cr-col-sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: var(--cr-space-5);
}
.cr-table th.cr-sort-active {
    color: var(--cr-text-primary);
}
.cr-table th.cr-sort-asc::after,
.cr-table th.cr-sort-desc::after {
    position: absolute;
    right: var(--cr-space-2);
    font-size: var(--cr-font-size-xs);
    opacity: 0.7;
}
.cr-table th.cr-sort-asc::after {
    content: '\25B2';
}
.cr-table th.cr-sort-desc::after {
    content: '\25BC';
}

/* ── Interactive Table: Column Resize Handles ── */
.cr-col-resize-handle {
    position: absolute;
    top: 0;
    right: -2px;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
    background: transparent;
    transition: background 0.15s;
}
.cr-col-resize-handle:hover,
.cr-col-resize-handle:active {
    background: var(--cr-accent, var(--cr-text-tertiary));
}

/* ── Interactive Table: Column Reorder (Drag & Drop) ── */
.cr-col-draggable {
    cursor: grab;
}
.cr-col-draggable:active {
    cursor: grabbing;
}
.cr-col-dragging {
    opacity: 0.4;
    background: var(--cr-bg-secondary);
}
.cr-col-drop-target {
    box-shadow: inset 2px 0 0 var(--cr-accent, var(--cr-text-primary));
}

/* ── Interactive Table: Mobile Card-Stack Layout ── */
.cr-table-card-row {
    display: none;
}

/* Card container: always styled when class is present (JS toggles it) */
.cr-table.cr-table-cards {
    border-collapse: collapse;
    table-layout: auto !important;
}
.cr-table.cr-table-cards thead {
    display: none;
}
.cr-table.cr-table-cards tbody tr:not(.cr-table-card-row) {
    display: none;
}
.cr-table.cr-table-cards .cr-table-card-row {
    display: block;
}
.cr-table.cr-table-cards .cr-table-card,
.cr-table.cr-col-sized.cr-table-cards .cr-table-card {
    display: block;
    padding: var(--cr-space-3) var(--cr-space-3);
    border-top: 1px solid var(--cr-border);
    border-bottom: none;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    white-space: normal;
    height: auto;
}
/* Role-based horizontal layout keeps flex */
.cr-table.cr-table-cards .cr-table-card:has(.cr-card-left) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cr-space-3);
}
/* No extra border-bottom on last card — footer border-top handles separation */

/* ── Horizontal card layout (role-based) ──────────────────────────── */
.cr-table-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cr-space-3);
}

/* Left: avatar + name/subtitle stacked */
.cr-card-left {
    display: flex;
    align-items: center;
    gap: var(--cr-space-3);
    min-width: 0;
    flex: 1 1 auto;
}
.cr-card-avatar {
    flex-shrink: 0;
}
.cr-card-avatar .cr-cell-avatar {
    width: 32px;
    height: 32px;
    font-size: var(--cr-font-size-sm);
}
.cr-card-text {
    min-width: 0;
    flex: 1 1 auto;
}
.cr-card-name {
    font-weight: var(--cr-font-weight-semibold);
    font-size: var(--cr-font-size-sm);
    color: var(--cr-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.cr-card-sub {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* Right: dots + action icons */
.cr-card-right {
    display: flex;
    align-items: center;
    gap: var(--cr-space-2);
    flex-shrink: 0;
}

/* Colour dots (collapsed badges) */
.cr-card-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--cr-radius-full);
    background: var(--cr-text-tertiary);
}
.cr-card-dot-success { background: var(--cr-success); }
.cr-card-dot-error   { background: var(--cr-error); }
.cr-card-dot-warning { background: var(--cr-warning); }
.cr-card-dot-info    { background: var(--cr-info); }
.cr-card-dot-neutral { background: var(--cr-text-tertiary); }

/* Card action icons */
.cr-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--cr-radius-sm);
    color: var(--cr-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.cr-card-action:hover {
    background: var(--cr-bg-hover);
    color: var(--cr-text-primary);
}
.cr-card-action svg {
    width: 14px;
    height: 14px;
}

/* ── Enhanced stacked card layout (fallback when no roles) ────────── */
/* 3-column row: body (title+badges) | meta (dates+contact) | chevron */
.cr-card-stack {
    display: flex;
    align-items: center;
    gap: var(--cr-space-3);
    width: 100%;
    min-width: 0;
}

/* Column 1: body — title + badges stacked vertically, tight gap */
.cr-card-stack-body {
    display: flex;
    flex-direction: column;
    gap: var(--cr-space-1);
    flex: 1 1 auto;
    min-width: 0;
}

/* Title: project name with facility dot */
.cr-card-stack-title {
    min-width: 0;
}
.cr-card-stack-title .cr-cell-name {
    font-weight: var(--cr-font-weight-semibold);
    font-size: var(--cr-font-size-sm);
    color: var(--cr-text-primary);
    display: flex;
    align-items: center;
    gap: var(--cr-space-2);
}
.cr-card-stack-title .cr-cell-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}

/* Badges: single row directly below title */
.cr-card-stack-badges {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--cr-space-1);
}
.cr-card-stack-badges .cr-badge {
    font-size: var(--cr-font-size-xs);
    padding: 1px 6px;
    min-width: 0;
}

/* Column 2: meta — date span + contact, right-aligned */
.cr-card-stack-meta {
    flex-shrink: 0;
    text-align: right;
}
.cr-card-stack-span {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
    white-space: nowrap;
}
.cr-card-stack-contact {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-secondary);
    white-space: nowrap;
    margin-top: 1px;
}

/* Column 3: chevron — vertically centered, far right */
.cr-card-stack-actions {
    flex-shrink: 0;
}

/* ==========================================================================
   Layout Utilities
   ========================================================================== */

/* Grid and flex helpers for rapid layout construction.
   .cr-grid-N creates N-column grids; responsive breakpoints collapse to 1fr on mobile.
   Spacing utility classes (.cr-gap-*, .cr-mt-*, .cr-mb-*) avoid magic numbers. */

.cr-container {
    max-width: var(--cr-container-max);
    margin: 0 auto;
    padding: 0 var(--cr-container-pad);
}

.cr-grid {
    display: grid;
    gap: var(--cr-space-6);
}

.cr-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cr-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cr-grid-4 { grid-template-columns: repeat(4, 1fr); }

.cr-flex         { display: flex; }
.cr-flex-col     { display: flex; flex-direction: column; }
.cr-flex-row     { display: flex; align-items: center; }
.cr-flex-center  { display: flex; align-items: center; justify-content: center; }
.cr-flex-between { display: flex; align-items: center; justify-content: space-between; }
.cr-flex-wrap    { display: flex; flex-wrap: wrap; }

.cr-gap-1 { gap: var(--cr-space-1); }
.cr-gap-2 { gap: var(--cr-space-2); }
.cr-gap-3 { gap: var(--cr-space-3); }
.cr-gap-4 { gap: var(--cr-space-4); }
.cr-gap-6 { gap: var(--cr-space-6); }
.cr-gap-8 { gap: var(--cr-space-8); }

/* Spacing utilities */
.cr-mt-2 { margin-top: var(--cr-space-2); }
.cr-mt-4 { margin-top: var(--cr-space-4); }
.cr-mt-6 { margin-top: var(--cr-space-6); }
.cr-mt-8 { margin-top: var(--cr-space-8); }
.cr-mb-2 { margin-bottom: var(--cr-space-2); }
.cr-mb-4 { margin-bottom: var(--cr-space-4); }
.cr-mb-6 { margin-bottom: var(--cr-space-6); }
.cr-mb-8 { margin-bottom: var(--cr-space-8); }

/* Text utilities */
.cr-text-muted    { color: var(--cr-text-secondary); }
.cr-text-subtle   { color: var(--cr-text-tertiary); }
.cr-text-success  { color: var(--cr-success); }
.cr-text-error    { color: var(--cr-error); }
.cr-text-warning  { color: var(--cr-warning); }
.cr-text-center   { text-align: center; }
.cr-text-right    { text-align: right; }
.cr-text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Divider */
.cr-divider {
    border: none;
    border-top: 1px solid var(--cr-border);
    margin: var(--cr-space-6) 0;
}

/* ==========================================================================
   Theme Toggle
   ========================================================================== */

.cr-theme-toggle {
    background: none;
    border: 1px solid var(--cr-border);
    color: var(--cr-text-secondary);
    width: 36px;
    height: 36px;
    border-radius: var(--cr-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--cr-transition);
}

.cr-theme-toggle:hover {
    border-color: var(--cr-border-hover);
    color: var(--cr-text-primary);
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.cr-tabs {
    display: flex;
    gap: var(--cr-space-1);
    border-bottom: 1px solid var(--cr-border);
    margin-bottom: var(--cr-space-6);
}

.cr-tab {
    padding: var(--cr-space-2) var(--cr-space-4);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--cr-text-tertiary);
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-medium);
    cursor: pointer;
    font-family: var(--cr-font-family);
    transition: color var(--cr-transition), border-color var(--cr-transition);
}

.cr-tab:hover { color: var(--cr-text-primary); }
.cr-tab.active { color: var(--cr-text-primary); border-bottom-color: var(--cr-accent); }

.cr-tab-content { display: none; }
.cr-tab-content.active { display: block; }

/* ==========================================================================
   Empty States
   ========================================================================== */

.cr-empty-state {
    text-align: center;
    padding: var(--cr-space-12) var(--cr-space-4);
    color: var(--cr-text-tertiary);
}

.cr-empty-state .cr-icon {
    margin-bottom: var(--cr-space-4);
    opacity: 0.4;
}

.cr-empty-state h3 {
    font-size: var(--cr-font-size-lg);
    font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-text-secondary);
    margin: 0 0 var(--cr-space-2);
}

.cr-empty-state p {
    font-size: var(--cr-font-size-sm);
    margin: 0;
}

/* ==========================================================================
   Loading / Skeleton
   ========================================================================== */

/* Shimmer-sweep bone — the base building block for skeleton screens.
   Apply to any element; size it with inline width/height.
   Page-specific layout classes stay in each template's <style>. */
.cr-skel-bone {
    background: var(--cr-bg-elevated);
    border-radius: var(--cr-radius-sm);
    position: relative;
    overflow: hidden;
}

.cr-skel-bone::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--cr-bg-hover), transparent);
    animation: cr-shimmer 1.5s infinite;
}

@keyframes cr-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Stagger delays — add to a parent container; each successive child row
   gets a progressively delayed shimmer for a cascading effect. */
.cr-skel-stagger > :nth-child(2) .cr-skel-bone::after { animation-delay: 0.1s; }
.cr-skel-stagger > :nth-child(3) .cr-skel-bone::after { animation-delay: 0.2s; }
.cr-skel-stagger > :nth-child(4) .cr-skel-bone::after { animation-delay: 0.3s; }
.cr-skel-stagger > :nth-child(5) .cr-skel-bone::after { animation-delay: 0.4s; }
.cr-skel-stagger > :nth-child(6) .cr-skel-bone::after { animation-delay: 0.5s; }
.cr-skel-stagger > :nth-child(7) .cr-skel-bone::after { animation-delay: 0.6s; }
.cr-skel-stagger > :nth-child(8) .cr-skel-bone::after { animation-delay: 0.7s; }

/* Pulse skeleton (simpler, for JS-built loading placeholders) */
.cr-skeleton {
    background: var(--cr-bg-tertiary);
    border-radius: var(--cr-radius-md);
    animation: cr-pulse 1.5s ease-in-out infinite;
}

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

/* ==========================================================================
   Responsive — Grid Collapse
   ========================================================================== */

@media (max-width: 640px) {
    .cr-grid-2,
    .cr-grid-3,
    .cr-grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .cr-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .cr-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Responsive — Table Scroll
   ========================================================================== */

.cr-table-wrap {
    width: 100%;
    overflow-x: auto;
}

/* ==========================================================================
   Flatpickr — Creatrr Design System Overrides
   ========================================================================== */

/* Heavy use of !important needed to override inline Flatpickr styles.
   Light and dark theme variants applied via [data-theme] attribute.
   Calendar renders at z-index: 10000 to float above modals (z-index: 9000). */

.flatpickr-input.flatpickr-mobile,
input.flatpickr-input + .form-control,
.flatpickr-alt-input {
    font-family: var(--cr-font-family) !important;
}

.flatpickr-calendar {
    border-radius: var(--cr-radius-lg) !important;
    box-shadow: var(--cr-shadow-lg) !important;
    border: 1px solid var(--cr-border) !important;
    padding: var(--cr-space-2) !important;
    font-family: var(--cr-font-family) !important;
    width: 340px !important;
    z-index: 10000 !important; /* Ensure calendar renders above modals */
}

.flatpickr-months {
    padding: var(--cr-space-2) var(--cr-space-1) !important;
}

.flatpickr-months .flatpickr-month {
    height: 36px !important;
}

.flatpickr-current-month {
    font-size: var(--cr-font-size-sm) !important;
    font-weight: var(--cr-font-weight-semibold) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: var(--cr-font-weight-semibold) !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 6px 10px !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    width: 12px !important;
    height: 12px !important;
}

span.flatpickr-weekday {
    font-size: 11px !important;
    font-weight: var(--cr-font-weight-medium) !important;
    color: var(--cr-text-tertiary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.flatpickr-day {
    border-radius: var(--cr-radius-md) !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 13px !important;
    margin: 1px !important;
    transition: all var(--cr-transition) !important;
}

.flatpickr-day:hover {
    background: var(--cr-bg-hover) !important;
    border-color: transparent !important;
}

.flatpickr-day.today {
    border: none !important;
    font-weight: var(--cr-font-weight-bold) !important;
    position: relative;
}

.flatpickr-day.today::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--cr-text-primary);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    border-radius: var(--cr-radius-md) !important;
    font-weight: var(--cr-font-weight-semibold) !important;
}

.dayContainer {
    padding: var(--cr-space-1) 0 !important;
}

.flatpickr-innerContainer {
    padding: 0 var(--cr-space-1) !important;
}

/* Dark theme — Flatpickr */
[data-theme="dark"] .flatpickr-calendar {
    background: var(--cr-bg-secondary) !important;
    border-color: var(--cr-border) !important;
    box-shadow: var(--cr-shadow-lg) !important;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-month,
[data-theme="dark"] .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
    color: var(--cr-text-primary) !important;
    fill: var(--cr-text-primary) !important;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-weekday {
    color: var(--cr-text-secondary) !important;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-day {
    color: var(--cr-text-primary) !important;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-day:hover {
    background: var(--cr-bg-hover) !important;
    border-color: var(--cr-bg-hover) !important;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-day.selected {
    background: var(--cr-text-primary) !important;
    color: var(--cr-bg-primary) !important;
    border-color: var(--cr-text-primary) !important;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-day.today {
    border-color: var(--cr-text-secondary) !important;
}

/* Light theme — Flatpickr */
[data-theme="light"] .flatpickr-calendar {
    background: var(--cr-bg-primary) !important;
    border-color: var(--cr-border) !important;
    box-shadow: var(--cr-shadow-lg) !important;
}

[data-theme="light"] .flatpickr-calendar .flatpickr-month,
[data-theme="light"] .flatpickr-calendar .flatpickr-current-month,
[data-theme="light"] .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
[data-theme="light"] .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
    color: var(--cr-text-primary) !important;
    fill: var(--cr-text-primary) !important;
}

[data-theme="light"] .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
[data-theme="light"] .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
    fill: var(--cr-text-primary) !important;
}

[data-theme="light"] .flatpickr-calendar .flatpickr-weekday {
    color: var(--cr-text-tertiary) !important;
}

[data-theme="light"] .flatpickr-calendar .flatpickr-day {
    color: var(--cr-text-primary) !important;
}

[data-theme="light"] .flatpickr-calendar .flatpickr-day:hover {
    background: var(--cr-bg-hover) !important;
    border-color: var(--cr-bg-hover) !important;
}

[data-theme="light"] .flatpickr-calendar .flatpickr-day.selected {
    background: var(--cr-btn-primary-bg) !important;
    color: var(--cr-btn-primary-text) !important;
    border-color: var(--cr-btn-primary-bg) !important;
}

[data-theme="light"] .flatpickr-calendar .flatpickr-day.today {
    border-color: var(--cr-text-tertiary) !important;
}

[data-theme="light"] .flatpickr-calendar .flatpickr-day.prevMonthDay,
[data-theme="light"] .flatpickr-calendar .flatpickr-day.nextMonthDay {
    color: var(--cr-text-disabled) !important;
}

/* Hide native date input when altInput is active */
input[type="date"].flatpickr-input { display: none; }

/* Flatpickr alt inputs — inherit cr-input styling everywhere */
input.flatpickr-input[type="hidden"] + input.cr-input {
    width: 100% !important;
    font-family: var(--cr-font-family) !important;
    font-size: var(--cr-font-size-sm) !important;
    padding: var(--cr-space-2) var(--cr-space-3) !important;
    border: 1px solid var(--cr-border) !important;
    border-radius: var(--cr-radius-md) !important;
    background: var(--cr-bg-primary) !important;
    color: var(--cr-text-primary) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}
input.flatpickr-input[type="hidden"] + input.cr-input:focus {
    border-color: var(--cr-text-primary) !important;
    outline: none !important;
}

/* ==========================================================================
   Toast Notifications
   Minimal inline toast that lives in the topbar, to the left of the
   search/bell icons. Fades in, auto-dismisses, fades out.
   Use creatrr.toast(msg, opts) from cr-utils.js.
   ========================================================================== */

/* Toast sits inline in the topbar, to the left of action icons.
   body.portal scope wins over marketplace-base.css's position:fixed rule
   which loads later in the cascade. */
body.portal :not(.cr-mkt-body) > .cr-toast {
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    z-index: auto;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--cr-space-2);
    font-size: var(--cr-font-size-xs);
    font-family: var(--cr-font-family);
    color: var(--cr-text-secondary);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 250ms ease, transform 250ms ease;
    pointer-events: none;
    margin-right: var(--cr-space-3);
}
body.portal :not(.cr-mkt-body) > .cr-toast.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
body.portal :not(.cr-mkt-body) > .cr-toast.hide {
    opacity: 0;
    transform: translateY(-4px);
}

/* Status icon — small inline SVG. */
.cr-toast-icon {
    width: 14px; height: 14px;
    flex-shrink: 0;
    color: var(--cr-success);
}

/* Message text. */
.cr-toast-msg {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: var(--cr-font-weight-medium);
}

/* ── Variant icon colors ── */
.cr-toast-error   .cr-toast-icon { color: var(--cr-error); }
.cr-toast-warning .cr-toast-icon { color: var(--cr-warning); }
.cr-toast-info    .cr-toast-icon { color: var(--cr-info); }

/* ── Actionable toast (clickable — navigates on click) ── */
.cr-toast-action {
    cursor: pointer;
    border-radius: var(--cr-radius-md);
    padding: var(--cr-space-1) var(--cr-space-2);
    margin-right: var(--cr-space-2);
    transition: opacity 250ms ease, transform 250ms ease, background 150ms ease;
}
.cr-toast-action:hover {
    background: var(--cr-bg-hover);
}
.cr-toast-action:focus-visible {
    outline: 2px solid var(--cr-info);
    outline-offset: 2px;
}
.cr-toast-chevron {
    width: 12px; height: 12px;
    flex-shrink: 0;
    color: var(--cr-text-muted);
    transition: transform 150ms ease;
}
.cr-toast-action:hover .cr-toast-chevron {
    transform: translateX(2px);
    color: var(--cr-text-secondary);
}

/* ── Mobile: hide inline toast, show as a thin bar below topbar ── */
@media (max-width: 768px) {
    body.portal :not(.cr-mkt-body) > .cr-toast {
        position: fixed;
        top: 56px; left: 0; right: 0;
        justify-content: center;
        margin: 0;
        padding: var(--cr-space-2) var(--cr-space-4);
        background: var(--cr-bg-elevated);
        border-bottom: 1px solid var(--cr-border);
        z-index: 9999;
        transform: translateY(-100%);
        white-space: normal;
    }
    body.portal :not(.cr-mkt-body) > .cr-toast.show { transform: translateY(0); }
    body.portal :not(.cr-mkt-body) > .cr-toast.hide { transform: translateY(-100%); }
}

/* ==========================================================================
   Command Palette (Cmd+K)
   Keyboard-driven quick nav / action launcher.
   JS: assets/js/cr-command-palette.js
   ========================================================================== */

.cr-cmd-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms ease, visibility 150ms ease;
}
.cr-cmd-overlay.open {
    opacity: 1;
    visibility: visible;
}

.cr-cmd-modal {
    width: 520px;
    max-width: 90vw;
    max-height: 420px;
    background: var(--cr-bg-primary);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-lg);
    box-shadow: var(--cr-shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.97) translateY(-8px);
    transition: transform 150ms ease;
}
.cr-cmd-overlay.open .cr-cmd-modal {
    transform: scale(1) translateY(0);
}

/* ── Search header ── */
.cr-cmd-header {
    display: flex;
    align-items: center;
    gap: var(--cr-space-3);
    padding: var(--cr-space-3) var(--cr-space-4);
    border-bottom: 1px solid var(--cr-border);
    color: var(--cr-text-muted);
}
.cr-cmd-header svg {
    flex-shrink: 0;
}
.cr-cmd-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--cr-font-size-base);
    font-family: var(--cr-font-family);
    color: var(--cr-text-primary);
    line-height: 1.5;
}
.cr-cmd-input::placeholder {
    color: var(--cr-text-muted);
}
.cr-cmd-kbd {
    font-size: 11px;
    font-family: var(--cr-font-family);
    color: var(--cr-text-muted);
    background: var(--cr-bg-tertiary);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-sm);
    padding: 2px 6px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Results list ── */
.cr-cmd-list {
    overflow-y: auto;
    padding: var(--cr-space-2) 0;
    flex: 1;
}
.cr-cmd-section {
    padding: var(--cr-space-2) var(--cr-space-4) var(--cr-space-1);
    font-size: 11px;
    font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cr-cmd-item {
    display: flex;
    align-items: center;
    gap: var(--cr-space-3);
    padding: var(--cr-space-2) var(--cr-space-4);
    cursor: pointer;
    color: var(--cr-text-primary);
    font-size: var(--cr-font-size-sm);
    font-family: var(--cr-font-family);
    border-radius: 0;
    transition: background 80ms ease;
}
.cr-cmd-item.active {
    background: var(--cr-bg-tertiary);
}
.cr-cmd-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--cr-text-muted);
}
.cr-cmd-item-icon svg {
    width: 16px;
    height: 16px;
}
.cr-cmd-item-label {
    flex: 1;
}
.cr-cmd-empty {
    padding: var(--cr-space-6) var(--cr-space-4);
    text-align: center;
    color: var(--cr-text-muted);
    font-size: var(--cr-font-size-sm);
}

/* ==========================================================================
   Inline Thread (.cr-thread)
   Multi-participant chat thread for production pages (SM, Host).
   Role colors: SM Open (blue), SM Close (purple), Host (green), Producer (amber).
   ========================================================================== */

.cr-thread { padding: var(--cr-space-5); }
.cr-thread-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--cr-space-4);
}
.cr-thread-title {
    font-size: var(--cr-font-size-sm); font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-text-primary);
}
.cr-thread-unread {
    font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-bold);
    background: var(--cr-error); color: var(--cr-text-inverse);
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--cr-radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: var(--cr-space-2);
}

/* Participant stack */
.cr-thread-participants { display: flex; align-items: center; gap: var(--cr-space-1); }
.cr-thread-avatar {
    width: 26px; height: 26px; border-radius: var(--cr-radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-bold);
    border: 2px solid var(--cr-bg-primary); position: relative;
}
.cr-thread-avatar:not(:first-child) { margin-left: -8px; }
.cr-thread-avatar.role-sm-open { background: color-mix(in srgb, var(--cr-info) 15%, transparent); color: var(--cr-info); }
.cr-thread-avatar.role-sm-close { background: color-mix(in srgb, var(--cr-role-sm-close) 15%, transparent); color: var(--cr-role-sm-close); }
.cr-thread-avatar.role-host { background: color-mix(in srgb, var(--cr-success) 15%, transparent); color: var(--cr-success); }
.cr-thread-avatar.role-producer { background: color-mix(in srgb, var(--cr-warning) 15%, transparent); color: var(--cr-warning); }
.cr-thread-participant-count {
    font-size: var(--cr-font-size-xs); color: var(--cr-text-tertiary);
    margin-left: var(--cr-space-2);
}

/* Messages */
.cr-thread-messages { display: flex; flex-direction: column; gap: var(--cr-space-1); margin-bottom: var(--cr-space-4); max-height: 500px; overflow-y: auto; }
.cr-thread-msg { display: flex; align-items: flex-start; gap: var(--cr-space-3); padding: var(--cr-space-2) 0; }
.cr-thread-msg-avatar {
    width: 30px; height: 30px; border-radius: var(--cr-radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--cr-font-size-sm); font-weight: var(--cr-font-weight-bold);
    flex-shrink: 0; margin-top: 2px;
}
.cr-thread-msg-avatar.role-sm-open { background: color-mix(in srgb, var(--cr-info) 15%, transparent); color: var(--cr-info); }
.cr-thread-msg-avatar.role-sm-close { background: color-mix(in srgb, var(--cr-role-sm-close) 15%, transparent); color: var(--cr-role-sm-close); }
.cr-thread-msg-avatar.role-host { background: color-mix(in srgb, var(--cr-success) 15%, transparent); color: var(--cr-success); }
.cr-thread-msg-avatar.role-producer { background: color-mix(in srgb, var(--cr-warning) 15%, transparent); color: var(--cr-warning); }
.cr-thread-msg-body { flex: 1; min-width: 0; }
.cr-thread-msg-meta {
    display: flex; align-items: baseline; gap: var(--cr-space-2);
    margin-bottom: 2px;
}
.cr-thread-msg-name {
    font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-text-primary); white-space: nowrap;
}
.cr-thread-msg-role {
    font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-medium);
    padding: 1px 6px; border-radius: var(--cr-radius-sm); white-space: nowrap;
}
.cr-thread-msg-role.role-sm-open { background: color-mix(in srgb, var(--cr-info) 10%, transparent); color: var(--cr-info); }
.cr-thread-msg-role.role-sm-close { background: color-mix(in srgb, var(--cr-role-sm-close) 10%, transparent); color: var(--cr-role-sm-close); }
.cr-thread-msg-role.role-host { background: color-mix(in srgb, var(--cr-success) 10%, transparent); color: var(--cr-success); }
.cr-thread-msg-role.role-producer { background: color-mix(in srgb, var(--cr-warning) 10%, transparent); color: var(--cr-warning); }
.cr-thread-msg-time { font-size: var(--cr-font-size-xs); color: var(--cr-text-tertiary); white-space: nowrap; }
.cr-thread-msg-text { font-size: var(--cr-font-size-sm); color: var(--cr-text-secondary); line-height: 1.55; }

/* Day divider */
.cr-thread-divider { display: flex; align-items: center; gap: var(--cr-space-3); margin: var(--cr-space-2) 0; }
.cr-thread-divider::before, .cr-thread-divider::after { content: ''; flex: 1; height: 1px; background: var(--cr-border); }
.cr-thread-divider-text {
    font-size: var(--cr-font-size-xs); color: var(--cr-text-tertiary);
    font-weight: var(--cr-font-weight-medium); text-transform: uppercase;
    letter-spacing: 0.04em; white-space: nowrap;
}

/* Input bar */
.cr-thread-input-bar { display: flex; align-items: flex-end; gap: var(--cr-space-2); }
.cr-thread-input {
    flex: 1; border: 1px solid var(--cr-border); border-radius: var(--cr-radius-md);
    padding: var(--cr-space-2) var(--cr-space-3); font-size: var(--cr-font-size-sm);
    font-family: var(--cr-font-family); background: var(--cr-bg-primary);
    color: var(--cr-text-primary); outline: none; resize: none;
    min-height: 38px; max-height: 100px; line-height: 1.5;
}
.cr-thread-input::placeholder { color: var(--cr-text-tertiary); }
.cr-thread-input:focus { border-color: var(--cr-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cr-accent) 15%, transparent); }
.cr-thread-send {
    width: 38px; height: 38px; border-radius: var(--cr-radius-md);
    background: var(--cr-accent); color: var(--cr-text-inverse); border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: var(--cr-font-size-sm);
    flex-shrink: 0; transition: var(--cr-transition);
}
.cr-thread-send:hover { filter: brightness(1.1); }

/* ==========================================================================
   Tab Navigation
   ========================================================================== */

/* Horizontal tab bar with underline indicator. Hides native scrollbar on desktop.
   .cr-tab.active shows bottom border; inactive tabs have transparent border for alignment. */

.cr-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--cr-border);
    margin-bottom: var(--cr-space-8);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cr-tabs::-webkit-scrollbar { display: none; }

.cr-tab {
    padding: var(--cr-space-3) var(--cr-space-5);
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-medium);
    color: var(--cr-text-tertiary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: all var(--cr-transition);
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--cr-font-family);
}

.cr-tab:hover { color: var(--cr-text-secondary); }

.cr-tab.active {
    color: var(--cr-text-primary);
    border-bottom-color: var(--cr-text-primary);
}

.cr-tab-panel { display: none; }
.cr-tab-panel.active { display: block; }

/* ==========================================================================
   Modal / Overlay
   ========================================================================== */

/* .cr-modal-overlay uses fixed inset positioning (z-index: 9000).
   .cr-modal is centered child; max-width 480px, 90vw on small screens.
   Hidden by default; JS adds .active class to display: flex. */

.cr-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--cr-overlay-heavy);
    z-index: 9000;
    align-items: center;
    justify-content: center;
}

.cr-modal-overlay.active,
.cr-modal-overlay.open,
.cr-modal-overlay.show { display: flex; }

.cr-modal {
    background: var(--cr-bg-elevated);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-lg);
    padding: var(--cr-space-6);
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.cr-modal h3 {
    font-size: var(--cr-font-size-lg);
    font-weight: var(--cr-font-weight-semibold);
    margin-bottom: var(--cr-space-4);
}

.cr-modal label {
    display: block;
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-medium);
    margin-bottom: var(--cr-space-1);
}

.cr-modal input,
.cr-modal textarea,
.cr-modal select {
    width: 100%;
    padding: var(--cr-space-2) var(--cr-space-3);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    background: var(--cr-bg-surface);
    color: var(--cr-text-primary);
    font-size: var(--cr-font-size-sm);
    font-family: var(--cr-font-family);
    margin-bottom: var(--cr-space-3);
}

.cr-modal input:focus,
.cr-modal textarea:focus,
.cr-modal select:focus {
    outline: none;
    border-color: var(--cr-text-primary);
}

.cr-modal .btn-row {
    display: flex;
    gap: var(--cr-space-3);
    justify-content: flex-end;
    margin-top: var(--cr-space-4);
}

/* Modal with header/body/footer sections — standard anatomy:
   ┌─────────────────────────────┐
   │  Title              [×]    │  .cr-modal-header  (border-bottom)
   ├─────────────────────────────┤
   │  Body content …            │  .cr-modal-body
   ├─────────────────────────────┤
   │          [Cancel] [Action] │  .cr-modal-footer  (border-top)
   └─────────────────────────────┘
   When header/body/footer sections are used, the parent .cr-modal should
   have padding: 0 so each section owns its own spacing. The :has() rule
   below handles this automatically. */

.cr-modal:has(.cr-modal-header) { padding: 0; }

.cr-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--cr-space-4);
    border-bottom: 1px solid var(--cr-border);
}
.cr-modal-header h3,
.cr-modal-header h4 {
    font-size: var(--cr-font-size-base);
    font-weight: var(--cr-font-weight-semibold);
    margin: 0;
}
.cr-modal-close {
    background: none;
    border: none;
    color: var(--cr-text-tertiary);
    cursor: pointer;
    line-height: 1;
    padding: var(--cr-space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cr-modal-close:hover { color: var(--cr-text-primary); }
.cr-modal-close svg.cr-icon { display: block; }
.cr-modal-body {
    padding: var(--cr-space-4);
}
.cr-modal-footer {
    display: flex;
    gap: var(--cr-space-2);
    justify-content: flex-end;
    padding: var(--cr-space-3) var(--cr-space-4);
    border-top: 1px solid var(--cr-border);
}
.cr-modal-field { margin-bottom: var(--cr-space-3); }
.cr-modal-field label {
    display: block;
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-medium);
    color: var(--cr-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--cr-space-1);
}
.cr-modal-value {
    font-size: var(--cr-font-size-sm);
    color: var(--cr-text-primary);
}
.cr-modal-message-preview {
    background: var(--cr-bg-secondary);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-sm);
    padding: var(--cr-space-3);
    font-size: var(--cr-font-size-sm);
    color: var(--cr-text-secondary);
    line-height: 1.5;
}

/* ==========================================================================
   Toggle Switch
   ========================================================================== */

/* Custom checkbox-styled toggle using ::before pseudo-element (slider thumb).
   Input opacity: 0; slider background animates on :checked pseudo-class.
   Transform: translateX(20px) moves thumb on check. */

.cr-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--cr-space-3) 0;
    border-bottom: 1px solid var(--cr-border);
}

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

.cr-toggle-label { font-size: var(--cr-font-size-sm); }

.cr-toggle-label .desc {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
    margin-top: var(--cr-space-1);
}

.cr-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.cr-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }

.cr-toggle .slider {
    display: inline-block;
    width: 36px;
    height: 20px;
    background: var(--cr-border);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background 200ms;
}

.cr-toggle .slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: left 200ms;
    box-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* Ensure no ::after knob appears */
.cr-toggle .slider::after { display: none; }

.cr-toggle input:checked + .slider { background: var(--cr-accent); }
.cr-toggle input:checked + .slider::before { left: 19px; }

/* ==========================================================================
   Form Fields
   ========================================================================== */

/* Multiple form layout patterns: .cr-form-grid (2-col), .cr-form-row (1-2 col),
   .cr-form-group (uppercase labels). Full-width variant via .full class.
   All inputs use design tokens for consistent focus/border behavior. */

.cr-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cr-space-4);
}

.cr-form-field { margin-bottom: var(--cr-space-4); }
.cr-form-field.full { grid-column: 1 / -1; }

.cr-form-field label {
    display: block;
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-medium);
    color: var(--cr-text-secondary);
    margin-bottom: var(--cr-space-1);
}

.cr-form-field input,
.cr-form-field select,
.cr-form-field textarea {
    width: 100%;
    padding: var(--cr-space-2) var(--cr-space-3);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    background: var(--cr-bg-surface);
    color: var(--cr-text-primary);
    font-size: var(--cr-font-size-sm);
    font-family: var(--cr-font-family);
    box-sizing: border-box;
}

.cr-form-field input:focus,
.cr-form-field select:focus,
.cr-form-field textarea:focus {
    outline: none;
    border-color: var(--cr-text-primary);
}

.cr-form-field textarea { resize: vertical; min-height: 80px; }

.cr-form-field .help {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
    margin-top: var(--cr-space-1);
}

/* Alternate form layout (uppercase labels) */
.cr-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cr-space-4);
    margin-bottom: var(--cr-space-4);
}

.cr-form-row.full { grid-template-columns: 1fr; }

.cr-form-group label {
    display: block;
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-medium);
    color: var(--cr-text-secondary);
    margin-bottom: var(--cr-space-1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cr-form-group input,
.cr-form-group select,
.cr-form-group textarea {
    width: 100%;
    padding: var(--cr-space-2) var(--cr-space-3);
    font-size: var(--cr-font-size-sm);
    font-family: var(--cr-font-family);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    background: var(--cr-bg-surface);
    color: var(--cr-text-primary);
    box-sizing: border-box;
}

.cr-form-group input:focus,
.cr-form-group select:focus,
.cr-form-group textarea:focus {
    outline: none;
    border-color: var(--cr-text-primary);
}

/* ==========================================================================
   Avatar
   ========================================================================== */

.cr-avatar {
    border-radius: var(--cr-radius-full);
    background: var(--cr-bg-surface);
    border: 2px solid var(--cr-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--cr-font-weight-bold);
    color: var(--cr-text-tertiary);
    text-transform: uppercase;
    flex-shrink: 0;
}

.cr-avatar-area {
    display: flex;
    align-items: center;
    gap: var(--cr-space-4);
    margin-bottom: var(--cr-space-5);
}

.cr-avatar-info .name { font-size: var(--cr-font-size-md); font-weight: var(--cr-font-weight-semibold); }
.cr-avatar-info .email { font-size: var(--cr-font-size-sm); color: var(--cr-text-secondary); }
.cr-avatar-info .role { font-size: var(--cr-font-size-xs); color: var(--cr-text-tertiary); margin-top: var(--cr-space-1); }

/* ==========================================================================
   Back Link
   ========================================================================== */

.cr-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--cr-space-1);
    color: var(--cr-text-tertiary);
    font-size: var(--cr-font-size-sm);
    text-decoration: none;
    margin-bottom: var(--cr-space-4);
    transition: color var(--cr-transition);
}

.cr-back-link:hover { color: var(--cr-text-primary); }

@media (max-width: 768px) {
    .cr-form-grid,
    .cr-form-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Shared Portal Components (Partials)
   —————————————————————————————————————
   These classes are the single source of truth for reusable portal patterns.
   Used by includes/Helpers/Partials.php render methods.
   Templates should use these classes instead of inline styles.
   ========================================================================== */

/* --- Page Wrapper --------------------------------------------------------- */

.cr-page-wrap {
    max-width: var(--cr-container-max);
    margin: 0 auto;
    padding: 0;
}


/* --- Stat Cards (Dashboard) ----------------------------------------------- */

.cr-stat-card {
    display: flex;
    align-items: center;
    gap: var(--cr-space-2);
    background: var(--cr-bg-surface);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    padding: var(--cr-space-2) var(--cr-space-3);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s;
}
.cr-stat-card:hover { border-color: var(--cr-text-tertiary); }

.cr-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--cr-radius-sm);
    background: var(--cr-bg-hover);
    flex-shrink: 0;
    color: var(--cr-text-secondary);
}

.cr-stat-value {
    font-size: var(--cr-font-size-xl);
    font-weight: var(--cr-font-weight-bold);
    line-height: 1.2;
}

.cr-stat-label {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
    margin-top: var(--cr-space-1);
}

.cr-stat-subline {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-error);
    margin-top: var(--cr-space-1);
}

/* --- Stat Bar (List pages — centered metric blocks) ----------------------- */

.cr-stat-bar {
    display: grid;
    gap: var(--cr-space-4);
    margin-bottom: var(--cr-space-8);
}
.cr-stat-bar[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.cr-stat-bar[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.cr-stat-bar[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }

.cr-stat-block {
    text-align: center;
    padding: var(--cr-space-4);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-lg);
    background: var(--cr-bg-elevated);
}
.cr-stat-block .cr-stat-value {
    font-size: var(--cr-font-size-2xl);
    font-weight: var(--cr-font-weight-bold);
}
.cr-stat-block .cr-stat-label {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
    margin-top: var(--cr-space-2);
}

/* --- Section Header ------------------------------------------------------- */

.cr-dash-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--cr-space-3);
}
.cr-dash-section-title {
    font-size: var(--cr-font-size-base);
    font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-text-primary);
}

/* --- Action Item (list row in dashboard sections) ------------------------- */

.cr-action-item {
    display: flex;
    align-items: center;
    gap: var(--cr-space-2);
    background: var(--cr-bg-surface);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    padding: var(--cr-space-2) var(--cr-space-3);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s;
    margin-bottom: var(--cr-space-1);
}
.cr-action-item:hover { border-color: var(--cr-text-tertiary); }

.cr-action-icon {
    display: flex;
    align-items: center;
    color: var(--cr-text-tertiary);
    flex-shrink: 0;
}

.cr-action-text {
    flex: 1;
    min-width: 0;
}
.cr-action-text .cr-action-title {
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-medium);
}
.cr-action-text .cr-action-meta {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
}

/* --- Data Table (grid-based rows) ----------------------------------------- */

.cr-table-header {
    display: grid;
    padding: var(--cr-space-2) var(--cr-space-5);
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--cr-border);
    margin-bottom: var(--cr-space-2);
}

.cr-data-row {
    display: grid;
    align-items: center;
    padding: var(--cr-space-4) var(--cr-space-5);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    background: var(--cr-bg-elevated);
    margin-bottom: var(--cr-space-2);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--cr-transition), border-color var(--cr-transition);
}
.cr-data-row:hover {
    box-shadow: var(--cr-shadow-sm);
    border-color: var(--cr-accent);
}

/* --- Section Header with Count Badge -------------------------------------- */

.cr-list-section-header {
    display: flex;
    align-items: center;
    gap: var(--cr-space-3);
    margin-bottom: var(--cr-space-4);
}
.cr-list-section-header h2 {
    font-size: var(--cr-font-size-lg);
    font-weight: var(--cr-font-weight-semibold);
}
.cr-count-badge {
    background: var(--cr-bg-hover);
    color: var(--cr-text-secondary);
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-medium);
    padding: var(--cr-space-1) var(--cr-space-2);
    border-radius: var(--cr-radius-full);
}

/* --- Page Header ---------------------------------------------------------- */

.cr-page-header {
    margin-bottom: var(--cr-space-10);
}
.cr-flex-between .cr-page-header {
    margin-bottom: 0;
}
.cr-page-header h1 {
    font-size: var(--cr-font-size-2xl);
    font-weight: var(--cr-font-weight-bold);
    line-height: var(--cr-line-height-tight);
    margin: 0;
}
.cr-page-header .cr-page-subtitle {
    font-size: var(--cr-font-size-sm);
    color: var(--cr-text-secondary);
    margin-top: var(--cr-space-1);
}

/* --- Page Header Row (unified header + actions layout) -------------------- */

.cr-page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cr-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--cr-space-10);
}
.cr-page-header-row .cr-page-header {
    margin-bottom: 0;
}
.cr-page-header-row-actions {
    display: flex;
    align-items: center;
    gap: var(--cr-space-2);
    flex-shrink: 0;
}
/* Spacing variants */
.cr-page-header-row[data-spacing="tight"]  { margin-bottom: var(--cr-space-6); }
.cr-page-header-row[data-spacing="medium"] { margin-bottom: var(--cr-space-8); }

/* --- Facility Selector (Owner portal dropdown) ---------------------------- */

/* Custom facility selector dropdown */
.cr-facility-selector-wrap {
    flex-shrink: 0;
    position: relative;
}
.cr-facility-select-btn {
    min-width: 0;
    max-width: 260px;
    font-family: var(--cr-font-family);
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-medium);
    letter-spacing: -0.1px;
    padding: var(--cr-space-2) var(--cr-space-3);
    height: auto;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--cr-space-2);
    white-space: nowrap;
    background: var(--cr-bg-primary);
    color: var(--cr-text-primary);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    cursor: pointer;
    transition: all var(--cr-transition);
}
.cr-facility-select-btn:hover {
    border-color: var(--cr-text-tertiary);
    background-color: var(--cr-bg-hover);
}
.cr-fac-select-chevron {
    flex-shrink: 0;
    color: var(--cr-text-tertiary);
    transition: transform 200ms ease;
}
.cr-facility-selector-wrap.open .cr-fac-select-chevron {
    transform: rotate(180deg);
}
.cr-facility-dropdown {
    display: none;
    position: absolute; top: calc(100% + 4px); right: 0; left: auto;
    min-width: 180px;
    background: var(--cr-bg-elevated);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    box-shadow: var(--cr-shadow-lg);
    z-index: 100;
    padding: var(--cr-space-1) 0;
    max-height: 240px;
    overflow-y: auto;
}
.cr-facility-selector-wrap.open .cr-facility-dropdown { display: block; }
.cr-fac-opt {
    display: flex; align-items: center; gap: var(--cr-space-2);
    padding: var(--cr-space-2) var(--cr-space-3);
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-primary);
    cursor: pointer;
    transition: background 100ms;
}
.cr-fac-opt:hover { background: var(--cr-bg-hover); }
.cr-fac-opt-active { font-weight: var(--cr-font-weight-medium); }
.cr-fac-opt-dot {
    width: 8px; height: 8px; border-radius: var(--cr-radius-full);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .cr-facility-selector-wrap {
        flex-shrink: 1;
    }
    .cr-facility-select-btn {
        max-width: 200px;
    }
}

/* --- Empty State (compact, for dashboard sections) ------------------------ */

.cr-empty {
    text-align: center;
    padding: var(--cr-space-6);
    color: var(--cr-text-tertiary);
    font-size: var(--cr-font-size-sm);
}

/* ═══════════════════════════════════════════════════════════════
   HOST DASHBOARD v2 — "Today-first" layout with urgency tiers
   ═══════════════════════════════════════════════════════════════ */

/* Page-level container — inherits max-width from .cr-page-wrap (1200px) */
.dash-v2 { }

/* ── TIER 1: Today Strip ── */
.dash-today-wrap {
    position: relative;
    margin-bottom: var(--cr-space-8);
}
.dash-today-wrap::after {
    content: '';
    position: absolute;
    top: 1px; right: 1px; bottom: 1px;
    width: 80px;
    background: linear-gradient(to right, transparent, var(--cr-bg-secondary));
    border-radius: 0 calc(var(--cr-radius-lg) - 1px) calc(var(--cr-radius-lg) - 1px) 0;
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--cr-transition);
    z-index: 1;
}
.dash-today-wrap.scrolled-end::after { opacity: 0; }
.dash-today {
    display: flex;
    align-items: center;
    gap: var(--cr-space-4);
    padding: var(--cr-space-3) var(--cr-space-5);
    background: var(--cr-bg-secondary);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-lg);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}
.dash-today::-webkit-scrollbar { display: none; }
.dash-today.grabbing { cursor: grabbing; }
.dash-today-label {
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cr-text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}
.dash-today-items {
    display: flex;
    gap: var(--cr-space-3);
    flex: 1;
    min-width: 0;
}
.dash-today-items::after {
    content: '';
    flex-shrink: 0;
    width: var(--cr-space-3);
}
.dash-today-item {
    display: flex;
    align-items: center;
    gap: var(--cr-space-2);
    padding: var(--cr-space-1) var(--cr-space-3);
    background: var(--cr-bg-elevated);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    font-size: var(--cr-font-size-sm);
    color: var(--cr-text-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--cr-transition);
}
.dash-today-item:hover { border-color: var(--cr-text-tertiary); }
.dash-today-dot {
    width: 6px; height: 6px; border-radius: var(--cr-radius-full);
    flex-shrink: 0;
}
/* Facility color-coded dots — rotate through palette by facility ID */
.dash-today-dot[data-fac="0"] { background: var(--cr-info); }
.dash-today-dot[data-fac="1"] { background: var(--cr-success); }
.dash-today-dot[data-fac="2"] { background: var(--cr-warning); }
.dash-today-dot[data-fac="3"] { background: var(--cr-error); }
.dash-today-dot[data-fac="4"] { background: var(--cr-accent); }
.dash-today-producer {
    color: var(--cr-text-tertiary);
}
.dash-today-empty {
    font-size: var(--cr-font-size-sm);
    color: var(--cr-text-tertiary);
    font-style: italic;
}
.dash-today-date {
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-text-secondary);
    margin-right: var(--cr-space-1);
}

/* ── Scoreboard (compact stat strip — reusable across list pages) ── */
.cr-scoreboard,
.dash-scoreboard {
    display: flex;
    gap: var(--cr-space-1);
    margin-bottom: var(--cr-space-8);
}
.cr-scoreboard-tile,
.dash-score {
    flex: 1;
    text-align: center;
    padding: var(--cr-space-3) var(--cr-space-2);
    background: var(--cr-bg-secondary);
    border: 1px solid var(--cr-border);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background var(--cr-transition), border-color var(--cr-transition);
}
.cr-scoreboard-tile:first-child,
.dash-score:first-child { border-radius: var(--cr-radius-lg) 0 0 var(--cr-radius-lg); }
.cr-scoreboard-tile:last-child,
.dash-score:last-child  { border-radius: 0 var(--cr-radius-lg) var(--cr-radius-lg) 0; }
.cr-scoreboard-tile:only-child,
.dash-score:only-child { border-radius: var(--cr-radius-lg); }
.cr-scoreboard-tile:hover,
.cr-scoreboard-tile.active,
.dash-score:hover { background: var(--cr-bg-hover); }
.cr-scoreboard-tile.active { border-color: var(--cr-text-tertiary); }
.cr-scoreboard-num,
.dash-score-num {
    font-size: var(--cr-font-size-xl);
    font-weight: var(--cr-font-weight-bold);
    line-height: 1.1;
}
.cr-scoreboard-label,
.dash-score-label {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: var(--cr-space-1);
}

/* ── TIER 3: Action Cards ── */
.dash-actions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--cr-space-3);
}
.dash-actions-title {
    font-size: var(--cr-font-size-xl);
    font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-text-primary);
}
.dash-actions-count {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
}
.dash-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cr-space-3);
    margin-bottom: var(--cr-space-8);
}
.dash-action-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--cr-space-4);
    background: var(--cr-bg-primary);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    text-decoration: none;
    color: inherit;
    transition: opacity 400ms ease, transform 400ms ease, background var(--cr-transition), color var(--cr-transition), border-color var(--cr-transition), box-shadow var(--cr-transition);
}
.dash-action-card:hover {
    border-color: var(--cr-text-tertiary);
    box-shadow: var(--cr-shadow-sm);
}
.dash-action-card:hover .dash-action-cta {
    background: var(--cr-accent);
    color: var(--cr-bg-primary);
    border-color: var(--cr-accent);
}
.dash-action-card.dismissed {
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
    pointer-events: none;
}
.dash-action-type {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--cr-space-1);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.dash-action-title {
    position: relative;
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-text-primary);
    margin-bottom: var(--cr-space-1);
    overflow: hidden;
    white-space: nowrap;
}
.dash-action-title::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--cr-bg-primary));
    pointer-events: none;
}
.dash-action-meta {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-secondary);
    margin-bottom: var(--cr-space-2);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.dash-action-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--cr-space-1);
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-medium);
    color: var(--cr-text-primary);
    text-decoration: none;
    padding: var(--cr-space-1) var(--cr-space-3);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    background: var(--cr-bg-elevated);
    width: fit-content;
    cursor: pointer;
    transition: background var(--cr-transition);
}
.dash-action-cta:hover { background: var(--cr-bg-hover); }
.dash-action-cta.primary {
    background: var(--cr-accent);
    color: var(--cr-bg-primary);
    border-color: var(--cr-accent);
}
.dash-action-cta.primary:hover { opacity: 0.85; }
.dash-actions-cleared {
    display: none;
    text-align: center;
    padding: var(--cr-space-8) var(--cr-space-4);
    color: var(--cr-text-tertiary);
    font-size: var(--cr-font-size-sm);
}

/* ── TIER 4: Two-Column Below The Fold ── */
.dash-lower {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cr-space-6);
}
.dash-panel {
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    padding: var(--cr-space-5);
    overflow: visible;
}
.dash-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 var(--cr-space-3) 0;
    border-bottom: none;
}
.dash-panel-title {
    font-size: var(--cr-font-size-base);
    font-weight: var(--cr-font-weight-semibold);
}
.dash-panel-link {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
    text-decoration: none;
    border: 1px solid var(--cr-border);
    padding: var(--cr-space-1) var(--cr-space-2);
    border-radius: var(--cr-radius-sm);
}
.dash-panel-link:hover { background: var(--cr-bg-hover); }
.dash-panel-body { padding: 0; }
/* Use border-top instead of border-bottom so hidden overflow rows don't leave
   a trailing divider on the last visible row (View All toggle hides via display:none,
   which breaks :last-child targeting). */
.dash-panel .cr-table td { vertical-align: middle; padding-top: var(--cr-space-3); padding-bottom: var(--cr-space-3); border-bottom: none; border-top: 1px solid var(--cr-border); }
.dash-panel .cr-table tbody tr:first-child td { border-top: none; }
.dash-panel .cr-table .col-right { text-align: right; white-space: nowrap; width: 1%; }

/* Restore table-cell display on td.cr-cell-name (which has display:flex globally)
   so cells stretch to full row height and borders align inside dash-panel cards. */
.dash-panel .cr-table {
    border-collapse: separate;
    border-spacing: 0;
}
.dash-panel .cr-table td.cr-cell-name {
    display: table-cell;
}

/* Row items inside panels */
.dash-row {
    display: flex;
    align-items: center;
    gap: var(--cr-space-3);
    padding: var(--cr-space-3) var(--cr-space-4);
    border-bottom: 1px solid var(--cr-border);
    text-decoration: none;
    color: inherit;
    transition: background var(--cr-transition);
}
.dash-row:last-child { border-bottom: none; }
.dash-row:hover { background: var(--cr-bg-hover); }
.dash-row-body { flex: 1; min-width: 0; }
.dash-row-title {
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-medium);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-row-sub {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
}
.dash-row-right {
    flex-shrink: 0;
    text-align: right;
}
.dash-row-amount {
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-semibold);
}
.dash-row-due {
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-tertiary);
}

/* ── Facility color dot ── */
.dash-fac-dot {
    width: 8px; height: 8px; border-radius: var(--cr-radius-full);
    flex-shrink: 0; display: inline-block;
}
.dash-action-meta .dash-fac-dot {
    vertical-align: middle;
    margin-right: 2px;
    position: relative;
    top: -1px;
}

/* ── PRODUCTION READINESS ── */
.dash-ready-row {
    display: flex;
    gap: var(--cr-space-3);
    padding: var(--cr-space-3) var(--cr-space-4);
    border-bottom: 1px solid var(--cr-border);
    text-decoration: none;
    color: inherit;
    transition: background var(--cr-transition);
    min-height: 72px;
    align-items: stretch;
}
.dash-ready-row:last-child { border-bottom: none; }
.dash-ready-row:hover { background: var(--cr-bg-hover); }
.dash-ready-date {
    width: 40px;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dash-ready-date-day {
    font-size: var(--cr-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cr-text-tertiary);
}
.dash-ready-date-num {
    font-size: var(--cr-font-size-base);
    font-weight: var(--cr-font-weight-bold);
}
.dash-ready-date.is-today .dash-ready-date-num {
    color: var(--cr-text-primary);
    background: var(--cr-bg-elevated);
    border-radius: var(--cr-radius-full);
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--cr-border);
}
.dash-ready-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--cr-space-1);
}
.dash-ready-title {
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-medium);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-ready-producer {
    font-weight: var(--cr-font-weight-normal);
    color: var(--cr-text-tertiary);
}
.dash-ready-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.dash-ready-actions {
    display: flex;
    gap: var(--cr-space-2);
    flex-wrap: wrap;
    align-items: center;
}
.dash-check {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: var(--cr-font-size-xs);
    letter-spacing: 0.02em;
    padding: 2px var(--cr-space-2);
    border-radius: var(--cr-radius-sm);
    white-space: nowrap;
}
.dash-check.ok {
    color: var(--cr-success);
    background: color-mix(in srgb, var(--cr-success) 8%, transparent);
}
.dash-check.warn {
    color: var(--cr-warning);
    background: color-mix(in srgb, var(--cr-warning) 10%, transparent);
    font-weight: var(--cr-font-weight-medium);
}
.dash-check.bad {
    color: var(--cr-error);
    background: color-mix(in srgb, var(--cr-error) 10%, transparent);
    font-weight: var(--cr-font-weight-semibold);
}
.dash-check-icon { font-size: var(--cr-font-size-sm); }

/* Split-shift pill */
.dash-check-split {
    display: flex;
    align-items: center;
    gap: 0;
    border-radius: var(--cr-radius-sm);
    overflow: hidden;
    font-size: var(--cr-font-size-xs);
    white-space: nowrap;
}
.dash-check-half {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 5px;
}
.dash-check-half.ok   { color: var(--cr-success); background: color-mix(in srgb, var(--cr-success) 8%, transparent); }
.dash-check-half.bad  { color: var(--cr-error); background: color-mix(in srgb, var(--cr-error) 10%, transparent); font-weight: var(--cr-font-weight-semibold); }
.dash-check-half.warn { color: var(--cr-warning); background: color-mix(in srgb, var(--cr-warning) 10%, transparent); font-weight: var(--cr-font-weight-medium); }
.dash-check-divider {
    width: 1px;
    height: 14px;
    background: var(--cr-border);
    flex-shrink: 0;
}

/* Inline quick-action buttons */
.dash-ready-action {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-medium);
    padding: var(--cr-space-1) var(--cr-space-3);
    border-radius: var(--cr-radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--cr-transition), border-color var(--cr-transition);
    border: 1px solid var(--cr-border);
    background: var(--cr-bg-elevated);
    color: var(--cr-text-primary);
    white-space: nowrap;
    position: relative;
}
.dash-ready-action:hover {
    background: var(--cr-bg-hover);
    border-color: var(--cr-text-tertiary);
}
/* SM picker dropdown */
.dash-sm-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--cr-space-1);
    background: var(--cr-bg-secondary);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    box-shadow: var(--cr-shadow-md);
    z-index: 50;
    min-width: 180px;
    padding: var(--cr-space-1) 0;
}
.dash-sm-dropdown.open { display: block; }
.dash-sm-option {
    display: flex;
    align-items: center;
    gap: var(--cr-space-2);
    padding: var(--cr-space-2) var(--cr-space-3);
    font-size: var(--cr-font-size-xs);
    color: var(--cr-text-primary);
    cursor: pointer;
    transition: background var(--cr-transition);
    text-decoration: none;
}
.dash-sm-option:hover { background: var(--cr-bg-hover); }
.dash-sm-option-name { font-weight: var(--cr-font-weight-medium); }
.dash-sm-option-avail { color: var(--cr-text-tertiary); margin-left: auto; }

/* ── Hybrid 2: Split Badge (status | action) ── */
.dash-ready-checks {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--cr-space-1);
    min-width: 180px;
}
.h2-split {
    display: inline-flex;
    align-items: stretch;
    border-radius: var(--cr-radius-sm);
    overflow: hidden;
    font-size: var(--cr-font-size-xs);
    white-space: nowrap;
    width: 100%;
    justify-content: center;
    cursor: pointer;
}
.h2-split-status {
    padding: 3px 8px;
    font-weight: var(--cr-font-weight-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
}
.h2-split-action {
    padding: 3px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-left: 1px solid rgba(255,255,255,0.15);
    transition: var(--cr-transition);
    flex-shrink: 0;
}
.h2-split.ok .h2-split-status { background: color-mix(in srgb, var(--cr-success) 12%, transparent); color: var(--cr-success); }
.h2-split.ok .h2-split-action { background: color-mix(in srgb, var(--cr-success) 16%, transparent); color: var(--cr-success); cursor: pointer; font-size: 0; line-height: 0; }
.h2-split.ok .h2-split-action::after { content: '✓'; font-size: var(--cr-font-size-xs); line-height: 1; }
.h2-split.bad .h2-split-status { background: color-mix(in srgb, var(--cr-error) 10%, transparent); color: var(--cr-error); }
.h2-split.bad .h2-split-action { background: color-mix(in srgb, var(--cr-error) 16%, transparent); color: var(--cr-error); }
.h2-split.bad .h2-split-action:hover { background: color-mix(in srgb, var(--cr-error) 24%, transparent); }
.h2-split.warn .h2-split-status { background: color-mix(in srgb, var(--cr-warning) 10%, transparent); color: var(--cr-warning); }
.h2-split.warn .h2-split-action { background: color-mix(in srgb, var(--cr-warning) 16%, transparent); color: var(--cr-warning); }
.h2-split.warn .h2-split-action:hover { background: color-mix(in srgb, var(--cr-warning) 24%, transparent); }

/* Day-range toggle */
.dash-range-toggle {
    display: flex;
    width: fit-content;
    margin-left: auto;
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    overflow: hidden;
}
.dash-range-toggle button {
    font-family: inherit;
    font-size: var(--cr-font-size-xs);
    padding: var(--cr-space-1) var(--cr-space-3);
    border: none;
    background: transparent;
    color: var(--cr-text-secondary);
    cursor: pointer;
    transition: background var(--cr-transition), color var(--cr-transition);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.dash-range-toggle button.active {
    background: var(--cr-bg-elevated);
    color: var(--cr-text-primary);
    font-weight: var(--cr-font-weight-medium);
}
.dash-range-toggle button:not(:last-child) {
    border-right: 1px solid var(--cr-border);
}

/* ==========================================================================
   Section System — shared layout, disclosure, card, drag-drop primitives
   Used in: production-day, booking-detail, future detail pages
   ========================================================================== */

/* 2/3 + 1/3 two-column layout */
.rd-layout { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(var(--cr-space-3), 2.5vw, var(--cr-space-6)); align-items: start; }
.rd-main { min-width: 0; }
.rd-sidebar { display: flex; flex-direction: column; gap: 0; min-width: 0; }

/* Disclosure (collapsible main-column section via native <details>) */
.rd-disclosure { margin-bottom: var(--cr-space-8); border: none; border-radius: 0; background: none; }
.rd-disclosure summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--cr-space-2); font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-bold); text-transform: uppercase; letter-spacing: -0.02em; color: var(--cr-text-primary); padding: var(--cr-space-2) var(--cr-space-3); background: color-mix(in srgb, var(--cr-accent) 5%, transparent); border-radius: 0; }
.rd-disclosure summary::-webkit-details-marker { display: none; }
.rd-disclosure .rd-disc-body { padding: var(--cr-space-4) 0 0 0; }
.rd-disclosure summary .rd-chev { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--cr-text-tertiary); transition: transform var(--cr-transition); margin-left: auto; flex-shrink: 0; }
.rd-disclosure[open] summary .rd-chev { transform: rotate(180deg); }
.rd-disclosure summary svg { color: var(--cr-accent); flex-shrink: 0; }
.rd-disclosure summary .rd-section-actions { margin-left: auto; display: flex; align-items: center; gap: var(--cr-space-2); }
.rd-disclosure summary .rd-section-actions .rd-chev { margin-left: 0; }

/* Card-style disclosure variant — border around entire section, gray header */
.rd-disclosure.rd-card-section { border: 1px solid var(--cr-border); border-radius: var(--cr-radius-lg); overflow: hidden; }
.rd-disclosure.rd-card-section summary { background: var(--cr-bg-secondary); font-size: var(--cr-font-size-sm); font-weight: var(--cr-font-weight-semibold); text-transform: none; letter-spacing: 0; padding: var(--cr-space-3) clamp(var(--cr-space-3), 1.5vw, var(--cr-space-4)); }
.rd-disclosure.rd-card-section summary svg { color: var(--cr-text-tertiary); }
.rd-disclosure.rd-card-section .rd-disc-body { padding: clamp(var(--cr-space-2), 1.5vw, var(--cr-space-4)); }

/* Sub-disclosure (nested toggle inside a disclosure body) */
.rd-sub-disclosure { margin-top: var(--cr-space-3); border-top: 1px solid var(--cr-border); padding-top: var(--cr-space-3); }
.rd-sub-disclosure summary { font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-medium); text-transform: none; letter-spacing: 0; color: var(--cr-text-tertiary); padding: var(--cr-space-1) 0; cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--cr-space-2); border-left: none; background: none; border-radius: 0; }
.rd-sub-disclosure summary::-webkit-details-marker { display: none; }
.rd-sub-disclosure summary .rd-chev { width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid var(--cr-text-tertiary); transition: transform var(--cr-transition); margin-left: auto; }
.rd-sub-disclosure[open] summary .rd-chev { transform: rotate(180deg); }
.rd-sub-disclosure .rd-disc-body { padding: var(--cr-space-3); }

/* Sidebar card (collapsible via JS toggle) */
.rd-card { border: 1px solid var(--cr-border); border-radius: var(--cr-radius-lg); padding: 0; margin-bottom: var(--cr-space-8); background: none; overflow: hidden; }
.rd-card:last-child { margin-bottom: 0; }
.rd-card-title { font-size: var(--cr-font-size-sm); font-weight: var(--cr-font-weight-semibold); text-transform: none; letter-spacing: 0; color: var(--cr-text-primary); display: flex; align-items: center; gap: var(--cr-space-2); padding: var(--cr-space-3) clamp(var(--cr-space-3), 1.5vw, var(--cr-space-4)); background: var(--cr-bg-secondary); border-radius: 0; margin: 0; cursor: pointer; }
.rd-card-title svg { color: var(--cr-text-tertiary); flex-shrink: 0; }
.rd-card-body { padding: clamp(var(--cr-space-3), 1.5vw, var(--cr-space-4)); }
.rd-card-title .rd-card-chev { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--cr-text-tertiary); transition: transform var(--cr-transition); flex-shrink: 0; margin-left: auto; }
.rd-card-body { transition: max-height 0.25s ease, opacity 0.2s ease; overflow: hidden; }
.rd-card.collapsed .rd-card-body { max-height: 0; opacity: 0; padding: 0; }
.rd-card.collapsed .rd-card-title .rd-card-chev { transform: rotate(-90deg); }

/* Drag-and-drop reorder handle */
.rd-reorder { display: inline-flex; align-items: center; cursor: grab; color: var(--cr-text-tertiary); padding: var(--cr-space-1); margin-right: var(--cr-space-1); opacity: 0.4; transition: opacity var(--cr-transition); }
.rd-reorder:hover { opacity: 1; }
.rd-reorder svg { display: block; }

/* Drag states */
.rd-dragging { opacity: 0.4; transform: scale(0.98); }
.rd-drag-placeholder { height: 4px; border-radius: var(--cr-radius-full); background: var(--cr-accent); margin: var(--cr-space-2) 0; position: relative; animation: rd-pulse-bar 1s ease-in-out infinite; }
.rd-drag-placeholder::before, .rd-drag-placeholder::after { content: ''; position: absolute; top: 50%; width: 10px; height: 10px; border-radius: var(--cr-radius-full); background: var(--cr-accent); transform: translateY(-50%); }
.rd-drag-placeholder::before { left: -2px; }
.rd-drag-placeholder::after { right: -2px; }
@keyframes rd-pulse-bar { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.rd-main > *, .rd-sidebar > * { transition: transform 0.15s ease; }

/* Shared line item rows */
.rd-line { display: flex; align-items: center; gap: var(--cr-space-2); padding: var(--cr-space-2) 0; font-size: var(--cr-font-size-xs); color: var(--cr-text-primary); position: relative; }
.rd-line + .rd-line { border-top: 1px solid color-mix(in srgb, var(--cr-border) 60%, transparent); }
.rd-line .rd-l-type { color: var(--cr-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--cr-font-weight-medium); width: 24px; flex-shrink: 0; white-space: nowrap; display: flex; align-items: center; justify-content: center; }
.rd-line .rd-l-name { flex: 1; color: var(--cr-text-secondary); font-weight: var(--cr-font-weight-regular); }
.rd-line .rd-l-price { font-weight: var(--cr-font-weight-medium); min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.rd-line .rd-l-remove { background: none; border: none; color: var(--cr-text-tertiary); cursor: pointer; padding: var(--cr-space-1); font-size: 0; transition: all var(--cr-transition); flex-shrink: 0; margin-left: var(--cr-space-2); opacity: 0; }
.rd-line:hover .rd-l-remove { opacity: 1; }
.rd-line .rd-l-remove:hover { color: var(--cr-error); }

/* Shared summary rows */
.rd-sum { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--cr-font-size-xs); color: var(--cr-text-secondary); padding: var(--cr-space-2) 0; }
.rd-sum + .rd-sum { border-top: 1px solid color-mix(in srgb, var(--cr-border) 60%, transparent); }
.rd-sum .rd-s-label { color: var(--cr-text-secondary); font-weight: var(--cr-font-weight-regular); }
.rd-sum .rd-s-value { font-weight: var(--cr-font-weight-medium); font-variant-numeric: tabular-nums; text-align: right; min-width: 64px; color: var(--cr-text-primary); }
.rd-sum.total { padding-top: var(--cr-space-3); margin-top: var(--cr-space-2); border-top: 1.5px solid var(--cr-text-primary); }
.rd-sum.total .rd-s-label { color: var(--cr-text-primary); font-weight: var(--cr-font-weight-semibold); font-size: var(--cr-font-size-sm); }
.rd-sum.total .rd-s-value { font-size: var(--cr-font-size-base); font-weight: var(--cr-font-weight-bold); }

/* Shared sidebar summary rows */
.rd-summary-row { display: flex; justify-content: space-between; align-items: center; padding: var(--cr-space-2) 0; font-size: var(--cr-font-size-sm); color: var(--cr-text-tertiary); }
.rd-sr-label { color: var(--cr-text-tertiary); }
.rd-sr-value { font-weight: var(--cr-font-weight-regular); color: var(--cr-text-primary); }
.rd-sr-value a { color: var(--cr-accent); text-decoration: none; }

/* Section header badge */
.rd-header-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--cr-space-1); font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-bold); border-radius: var(--cr-radius-full); background: color-mix(in srgb, var(--cr-warning) 15%, transparent); color: var(--cr-warning); margin-left: var(--cr-space-2); }

/* Section system responsive */
@media (max-width: 960px) {
    .rd-layout { grid-template-columns: 1fr; }
    .rd-sidebar { order: -1; }
}

/* ── Day Navigation Pills — shared date picker for detail pages ── */
.rd-day-nav { display: flex; gap: var(--cr-space-1); margin-bottom: var(--cr-space-4); overflow-x: auto; }
.rd-day-pill { padding: var(--cr-space-1) var(--cr-space-3); border: 1px solid var(--cr-border); border-radius: var(--cr-radius-full); font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-medium); cursor: pointer; background: var(--cr-bg-primary); color: var(--cr-text-secondary); white-space: nowrap; transition: all var(--cr-transition); font-family: var(--cr-font-family); text-decoration: none; }
.rd-day-pill:hover { border-color: var(--cr-accent); color: var(--cr-accent); }
.rd-day-pill.active { background: var(--cr-accent); color: var(--cr-bg-primary); border-color: var(--cr-accent); }

/* ── Producer Card — shared sidebar producer/client contact ── */
.rd-producer-inner { display: flex; align-items: center; gap: var(--cr-space-3); }
.rd-producer-inner .rd-p-avatar { width: 36px; height: 36px; border-radius: var(--cr-radius-full); background: var(--cr-bg-secondary); color: var(--cr-text-tertiary); display: flex; align-items: center; justify-content: center; font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-bold); flex-shrink: 0; }
.rd-producer-inner .rd-p-info { flex: 1; min-width: 0; }
.rd-producer-inner .rd-p-name { font-size: var(--cr-font-size-sm); font-weight: var(--cr-font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.rd-producer-inner .rd-p-name a { color: var(--cr-accent); text-decoration: none; }
.rd-producer-inner .rd-p-role { font-size: var(--cr-font-size-xs); color: var(--cr-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-producer-inner .rd-p-actions { display: flex; gap: var(--cr-space-1); }
.rd-p-icon { width: 30px; height: 30px; border-radius: var(--cr-radius-full); border: none; background: none; display: inline-flex; align-items: center; justify-content: center; color: var(--cr-text-tertiary); cursor: pointer; transition: all var(--cr-transition); text-decoration: none; }
.rd-p-icon:hover { background: var(--cr-bg-secondary); color: var(--cr-text-primary); }

/* ── Hero Stripe — shared detail page header ── */
.rd-hero-stripe { display: flex; align-items: center; gap: var(--cr-space-4); padding: var(--cr-space-4) 0; margin-bottom: var(--cr-space-4); border-bottom: none; }
.rd-date-card { text-align: center; padding: var(--cr-space-2) var(--cr-space-3); border-radius: var(--cr-radius-md); background: var(--cr-accent); flex-shrink: 0; min-width: 64px; }
.rd-date-card .rd-month { font-size: var(--cr-font-size-xs); text-transform: uppercase; color: var(--cr-bg-primary); font-weight: var(--cr-font-weight-medium); letter-spacing: 0.06em; }
.rd-date-card .rd-day-num { font-size: var(--cr-font-size-2xl); font-weight: var(--cr-font-weight-bold); line-height: 1.2; color: var(--cr-bg-primary); }
.rd-date-card .rd-weekday { font-size: var(--cr-font-size-xs); color: var(--cr-bg-primary); line-height: 1; opacity: 0.8; }
.rd-date-card.rd-date-range { display: flex; flex-direction: column; align-items: center; min-width: auto; }
.rd-hero-info { flex: 1; min-width: 0; }
.rd-hero-info h2 { font-size: var(--cr-font-size-2xl); font-weight: var(--cr-font-weight-bold); margin: 0; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-hero-sub { font-size: var(--cr-font-size-sm); color: var(--cr-text-secondary); margin: 2px 0 0; display: flex; align-items: center; gap: var(--cr-space-2); flex-wrap: wrap; }
.rd-hero-sub a { color: var(--cr-accent); text-decoration: none; }
.rd-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--cr-radius-full); margin-right: var(--cr-space-2); vertical-align: middle; position: relative; top: -1px; }
.rd-status-dot.confirmed, .rd-status-dot.active { background: var(--cr-success); }
.rd-status-dot.pending { background: var(--cr-warning); }
.rd-status-dot.cancelled { background: var(--cr-error); }
.rd-status-dot.completed { background: var(--cr-text-tertiary); }
.rd-hero-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: var(--cr-space-2); flex-shrink: 0; }
.rd-hero-right .rd-day-nav { margin-bottom: 0; }
.rd-hero-actions { display: flex; gap: var(--cr-space-2); flex-wrap: wrap; align-items: center; }
@media (max-width: 768px) {
    .rd-hero-stripe { flex-direction: column; align-items: flex-start; }
    .rd-hero-right { margin-left: 0; }
}

/* ── Refined Detail Header ──
   Two-row header: title + badge-dd top, date-dd + meta bottom.
   Used in: booking-detail, production-day.
*/
.rd-header { padding: var(--cr-space-2) 0 var(--cr-space-4); margin-bottom: var(--cr-space-4); }
.rd-header-top { display: flex; align-items: center; justify-content: space-between; gap: var(--cr-space-4); margin-bottom: var(--cr-space-2); }
.rd-header-title { font-size: var(--cr-font-size-4xl); font-weight: var(--cr-font-weight-bold); color: var(--cr-text-primary); margin: 0; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-header-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--cr-space-4); flex-wrap: wrap; }
.rd-header-left { display: flex; align-items: center; gap: var(--cr-space-3); }
.rd-header-right { display: flex; align-items: center; gap: var(--cr-space-2); margin-left: auto; }
.rd-header-meta { display: flex; align-items: center; gap: var(--cr-space-2); font-size: var(--cr-font-size-sm); color: var(--cr-text-secondary); flex-wrap: wrap; }
.rd-header-meta-chip { display: inline-flex; align-items: center; gap: var(--cr-space-2); padding: var(--cr-space-1) var(--cr-space-3); border: 1px solid var(--cr-border); border-radius: var(--cr-radius-full); font-size: var(--cr-font-size-xs); color: var(--cr-text-secondary); background: var(--cr-bg-primary); white-space: nowrap; }
.rd-header-meta-chip svg { color: var(--cr-text-tertiary); }
.rd-header-meta-chip a { color: var(--cr-accent); text-decoration: none; }
.rd-header-dot { width: 8px; height: 8px; border-radius: var(--cr-radius-full); flex-shrink: 0; }

/* Badge dropdown (status actions) */
.rd-badge-dd { position: relative; display: inline-flex; }
.rd-badge-dd-trigger { display: inline-flex; align-items: center; gap: var(--cr-space-1); padding: var(--cr-space-1) var(--cr-space-3); border-radius: var(--cr-radius-full); border: none; font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-semibold); cursor: pointer; font-family: var(--cr-font-family); transition: all 0.15s; background: color-mix(in srgb, var(--cr-success) 15%, transparent); color: var(--cr-success); }
.rd-badge-dd-trigger:hover { filter: brightness(1.15); }
.rd-badge-dd-trigger .dd-chev { width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid currentColor; margin-left: var(--cr-space-1); }
.rd-badge-dd-trigger.status-pending { background: color-mix(in srgb, var(--cr-warning) 15%, transparent); color: var(--cr-warning); }
.rd-badge-dd-trigger.status-offered { background: color-mix(in srgb, var(--cr-info) 15%, transparent); color: var(--cr-info); }
.rd-badge-dd-trigger.status-active { background: color-mix(in srgb, var(--cr-success) 15%, transparent); color: var(--cr-success); }
.rd-badge-dd-trigger.status-completed { background: color-mix(in srgb, var(--cr-text-tertiary) 15%, transparent); color: var(--cr-text-tertiary); }
.rd-badge-dd-trigger.status-cancelled { background: color-mix(in srgb, var(--cr-error) 15%, transparent); color: var(--cr-error); }
.rd-badge-dd-menu { display: none; position: absolute; top: calc(100% + var(--cr-space-1)); right: 0; min-width: 160px; background: var(--cr-bg-elevated); border: 1px solid var(--cr-border); border-radius: var(--cr-radius-md); padding: var(--cr-space-1); box-shadow: var(--cr-shadow-lg); z-index: 10; }
.rd-badge-dd.open .rd-badge-dd-menu { display: block; }
.rd-badge-dd-item { display: flex; align-items: center; gap: var(--cr-space-2); padding: var(--cr-space-2) var(--cr-space-3); border-radius: var(--cr-radius-sm); font-size: var(--cr-font-size-sm); cursor: pointer; transition: background 0.1s; color: var(--cr-text-primary); text-decoration: none; }
.rd-badge-dd-item:hover { background: var(--cr-bg-hover); }
.rd-badge-dd-item.danger { color: var(--cr-error); }
.rd-badge-dd-item svg { flex-shrink: 0; }

/* Date dropdown (day navigation) */
.rd-date-dd { position: relative; display: inline-flex; }
.rd-date-dd-btn { display: inline-flex; align-items: center; gap: var(--cr-space-2); padding: var(--cr-space-2) var(--cr-space-3); border: 1px solid var(--cr-border); border-radius: var(--cr-radius-full); font-size: var(--cr-font-size-sm); font-weight: var(--cr-font-weight-medium); cursor: pointer; background: var(--cr-bg-primary); color: var(--cr-text-primary); font-family: var(--cr-font-family); transition: all 0.15s; }
.rd-date-dd-btn:hover { border-color: var(--cr-accent); color: var(--cr-accent); }
.rd-date-dd-btn svg { color: var(--cr-text-tertiary); }
.rd-date-dd-btn .dd-chev { width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid var(--cr-text-tertiary); }
.rd-date-dd-menu { display: none; position: absolute; top: calc(100% + var(--cr-space-1)); left: 0; min-width: 220px; background: var(--cr-bg-elevated); border: 1px solid var(--cr-border); border-radius: var(--cr-radius-md); padding: var(--cr-space-1); box-shadow: var(--cr-shadow-lg); z-index: 10; }
.rd-date-dd.open .rd-date-dd-menu { display: block; }
.rd-date-dd-item { display: flex; align-items: center; justify-content: space-between; padding: var(--cr-space-2) var(--cr-space-3); border-radius: var(--cr-radius-sm); font-size: var(--cr-font-size-sm); cursor: pointer; transition: background 0.1s; color: var(--cr-text-primary); text-decoration: none; }
.rd-date-dd-item:hover { background: var(--cr-bg-hover); }
.rd-date-dd-item.active { background: color-mix(in srgb, var(--cr-accent) 12%, transparent); color: var(--cr-accent); font-weight: var(--cr-font-weight-medium); }
.rd-date-dd-item .day-type { font-size: var(--cr-font-size-xs); color: var(--cr-text-tertiary); }
.rd-date-dd-item.active .day-type { color: var(--cr-accent); opacity: 0.7; }

/* ── Day Navigation — Integrated Pill ── */
.rd-day-nav { display: inline-flex; align-items: stretch; border: 2px solid var(--cr-border); border-radius: var(--cr-radius-full); background: var(--cr-bg-primary); overflow: visible; position: relative; box-shadow: none; gap: 0; margin-bottom: 0; transition: box-shadow 0.2s ease; }
.rd-day-nav:hover { box-shadow: 0 2px 8px color-mix(in srgb, var(--cr-text-primary) 8%, transparent); }
.rd-day-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 38px; border: none; background: var(--cr-bg-secondary); color: var(--cr-text-secondary); cursor: pointer; transition: all 0.15s; padding: 0; font-size: 0; flex-shrink: 0; }
.rd-day-nav-btn:first-child { border-radius: var(--cr-radius-full) 0 0 var(--cr-radius-full); }
.rd-day-nav-btn.rd-nav-next { border-radius: 0 var(--cr-radius-full) var(--cr-radius-full) 0; }
.rd-day-nav-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--cr-text-primary) 10%, transparent); color: var(--cr-text-primary); }
.rd-day-nav-btn:active:not(:disabled) { background: color-mix(in srgb, var(--cr-text-primary) 15%, transparent); transform: scale(0.95); }
.rd-day-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.rd-day-nav-btn svg { pointer-events: none; }
.rd-day-nav-divider { width: 1px; align-self: stretch; background: var(--cr-border); flex-shrink: 0; }
.rd-day-nav-booking-btn { border-radius: var(--cr-radius-full) 0 0 var(--cr-radius-full) !important; color: var(--cr-text-tertiary); text-decoration: none; }
.rd-day-nav-booking-btn:hover:not(:disabled) { color: var(--cr-accent); background: color-mix(in srgb, var(--cr-accent) 10%, transparent); }
.rd-day-nav .rd-date-dd { position: static; }
.rd-day-nav .rd-date-dd-btn { border: none; border-radius: 0; background: none; padding: var(--cr-space-1) var(--cr-space-3); min-width: 148px; text-align: center; justify-content: center; font-size: var(--cr-font-size-base); font-weight: var(--cr-font-weight-bold); color: var(--cr-text-primary); font-variant-numeric: tabular-nums; user-select: none; }
.rd-day-nav .rd-date-dd-btn:hover { color: var(--cr-text-primary); }
.rd-day-nav .rd-date-dd-menu { position: absolute; top: calc(100% + var(--cr-space-2)); left: 0; right: 0; transform: none; min-width: 100%; }

/* ── Skeleton / Shimmer Loading ── */
.rd-skeleton { position: relative; overflow: hidden; background: var(--cr-bg-secondary); border-radius: var(--cr-radius-md); }
.rd-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--cr-text-primary) 4%, transparent) 40%, color-mix(in srgb, var(--cr-text-primary) 8%, transparent) 50%, color-mix(in srgb, var(--cr-text-primary) 4%, transparent) 60%, transparent 100%); animation: rd-shimmer 1.5s ease-in-out infinite; }
@keyframes rd-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.rd-skeleton-line { height: 14px; margin-bottom: var(--cr-space-2); }
.rd-skeleton-line.w-75 { width: 75%; }
.rd-skeleton-line.w-50 { width: 50%; }
.rd-skeleton-line.w-40 { width: 40%; }
.rd-skeleton-line.w-60 { width: 60%; }
.rd-skeleton-line.w-30 { width: 30%; }
.rd-skeleton-line.h-lg { height: 20px; }
.rd-skeleton-line.h-sm { height: 10px; }
.rd-skeleton-card { border: 1px solid var(--cr-border); border-radius: var(--cr-radius-lg); overflow: hidden; margin-bottom: var(--cr-space-4); }
.rd-skeleton-card-header { height: 44px; background: var(--cr-bg-secondary); }
.rd-skeleton-card-body { padding: var(--cr-space-4); }
.rd-skeleton-avatar { width: 36px; height: 36px; border-radius: var(--cr-radius-full); flex-shrink: 0; }
.rd-skeleton-row { display: flex; align-items: center; gap: var(--cr-space-3); margin-bottom: var(--cr-space-3); }
.rd-skeleton-row:last-child { margin-bottom: 0; }

/* Skeleton layout mirrors rd-layout */
.rd-skeleton-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--cr-space-6); }
@media (max-width: 768px) { .rd-skeleton-layout { grid-template-columns: 1fr; } }

@media (max-width: 768px) {
    .rd-header-top { flex-wrap: wrap; }
    .rd-header-title { font-size: var(--cr-font-size-2xl); }
    .rd-header-bottom { flex-direction: column; align-items: flex-start; }
    .rd-header-right { margin-left: 0; }
}

/* ── Dashboard v2 Responsive ── */
@media (max-width: 768px) {
    .dash-actions { grid-template-columns: 1fr; }
    .dash-lower { grid-template-columns: 1fr; }
    .cr-scoreboard,
    .dash-scoreboard { flex-wrap: wrap; }
    .cr-scoreboard-tile,
    .dash-score { flex-basis: calc(33% - var(--cr-space-1)); }
}

/* ==========================================================================
   Detail Grid — key-value info cards (2×2 grid)
   Used in: client-detail (Details tab), future profile pages
   ========================================================================== */

.cr-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cr-space-4);
    margin-bottom: var(--cr-space-5);
}

.cr-detail-card {
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    padding: var(--cr-space-4);
}

.cr-detail-card-title {
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cr-text-tertiary);
    margin-bottom: var(--cr-space-3);
}

.cr-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--cr-space-2) 0;
    border-bottom: 1px solid var(--cr-border);
    font-size: var(--cr-font-size-sm);
}
.cr-detail-row:last-child { border-bottom: none; }

.cr-detail-label { color: var(--cr-text-tertiary); }
.cr-detail-value { font-weight: var(--cr-font-weight-medium); color: var(--cr-text-primary); }
.cr-detail-value a { color: var(--cr-info); text-decoration: none; }
.cr-detail-value a:hover { text-decoration: underline; }

/* ==========================================================================
   Load More Button — full-width ghost button at bottom of capped lists
   Used in: client-detail tabs, any list with pagination
   ========================================================================== */

.cr-load-more {
    display: block;
    width: 100%;
    padding: var(--cr-space-3);
    font-size: var(--cr-font-size-xs);
    font-family: var(--cr-font-family);
    font-weight: var(--cr-font-weight-medium);
    color: var(--cr-text-tertiary);
    background: none;
    border: none;
    border-top: 1px solid var(--cr-border);
    cursor: pointer;
    transition: color var(--cr-transition), background var(--cr-transition);
    text-align: center;
}
.cr-load-more:hover {
    color: var(--cr-text-primary);
    background: var(--cr-bg-secondary);
}

/* ==========================================================================
   Paid Bar — mini inline payment progress indicator
   Used in: client-detail bookings, booking lists
   ========================================================================== */

.cr-paid-bar {
    display: flex;
    align-items: center;
    gap: var(--cr-space-2);
}
.cr-paid-track {
    width: 48px;
    height: 4px;
    background: var(--cr-border);
    border-radius: var(--cr-radius-full);
    overflow: hidden;
    flex-shrink: 0;
}
.cr-paid-fill {
    display: block;
    height: 100%;
    border-radius: var(--cr-radius-full);
}
.cr-paid-fill.full { background: var(--cr-success); }
.cr-paid-fill.partial { background: var(--cr-warning); }
.cr-paid-fill.none { background: var(--cr-border); }
.cr-paid-pct {
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 30px;
}

/* ==========================================================================
   Bar Chart Widget — horizontal bar chart for engagement/stats reports
   Used in: client-detail Stats tab, future analytics sections
   ========================================================================== */

.cr-bar-chart {
    display: flex;
    flex-direction: column;
    gap: var(--cr-space-3);
}
.cr-bar-row {
    display: flex;
    align-items: center;
    gap: var(--cr-space-3);
    font-size: var(--cr-font-size-sm);
}
.cr-bar-label {
    min-width: 100px;
    color: var(--cr-text-secondary);
    flex-shrink: 0;
    text-align: right;
}
.cr-bar-value {
    min-width: 45px;
    font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-text-primary);
    font-variant-numeric: tabular-nums;
}

/* --- Responsive Shared ---------------------------------------------------- */

@media (max-width: 768px) {
    .cr-stat-bar[data-cols="5"],
    .cr-stat-bar[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
    .cr-stat-bar[data-cols="3"] { grid-template-columns: 1fr; }
    .cr-data-row { grid-template-columns: 1fr; gap: var(--cr-space-2); }
    .cr-table-header { display: none; }
    .cr-detail-grid { grid-template-columns: 1fr; }

    /* Unified table: horizontal scroll on mobile */
    .cr-table-wrap { overflow-x: auto; }
}

/* ============================================================
   .cr-segment — reusable segmented control
   Joined pill-group of <button>s. Use for mode toggles like
   Slots/Range, day/week/month, etc. Always inherits Poppins.
   ============================================================ */
.cr-segment {
    display: inline-flex;
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    background: var(--cr-bg-primary);
    overflow: hidden;
    font-family: var(--cr-font-family);
}
.cr-segment > button {
    font-family: inherit;
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-medium);
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--cr-text-secondary);
    cursor: pointer;
    transition: background var(--cr-transition), color var(--cr-transition);
    white-space: nowrap;
    line-height: 1.2;
}
.cr-segment > button + button { border-left: 1px solid var(--cr-border); }
.cr-segment > button:hover:not(.active) { background: var(--cr-bg-hover); color: var(--cr-text-primary); }
.cr-segment > button.active {
    background: var(--cr-bg-elevated);
    color: var(--cr-text-primary);
}

/* ============================================================
   .cr-time-popover — time picker (trigger + popover panel)
   Usage:
     <div class="cr-time-popover" data-value="10:00">
       <button type="button" class="cr-time-trigger">
         <svg>...</svg><span class="cr-time-label">10:00 AM</span>
       </button>
       <div class="cr-time-panel">
         <!-- built by crTimePicker.init() on first open -->
       </div>
       <input type="hidden" class="cr-time-value" value="10:00">
     </div>
   JS: call crTimePicker.init(root) once on page ready to bind
   all .cr-time-popover elements. The hidden .cr-time-value
   input is the single source of truth for 24-hour HH:MM.
   ============================================================ */
.cr-time-popover {
    position: relative;
    display: block;
    font-family: var(--cr-font-family);
}
.cr-time-popover > .cr-time-trigger {
    display: flex;
    align-items: center;
    gap: var(--cr-space-2);
    width: 100%;
    padding: 7px 14px;
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    background: var(--cr-bg-primary);
    color: var(--cr-text-primary);
    font-family: inherit;
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-medium);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color var(--cr-transition), box-shadow var(--cr-transition);
    min-width: 0;
    line-height: 1.2;
    box-sizing: border-box;
}
.cr-time-popover > .cr-time-trigger:hover { border-color: var(--cr-border-hover); }
.cr-time-popover > .cr-time-trigger[aria-expanded="true"] {
    border-color: var(--cr-accent);
    box-shadow: 0 0 0 3px var(--cr-accent-light);
}
.cr-time-popover > .cr-time-trigger svg { color: var(--cr-text-tertiary); flex: 0 0 auto; }
.cr-time-popover > .cr-time-trigger .cr-time-label { flex: 1 1 auto; text-align: left; }

.cr-time-panel {
    position: absolute;
    z-index: 10001;
    background: var(--cr-bg-primary);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-lg);
    box-shadow: var(--cr-shadow-lg, 0 10px 25px rgba(0,0,0,.15));
    padding: var(--cr-space-3);
    display: none;
    min-width: 160px;
    font-family: var(--cr-font-family);
}

.cr-time-panel-cols {
    display: grid;
    grid-template-columns: 1fr 12px 1fr;
    gap: 0;
    align-items: stretch;
}
.cr-time-col {
    height: 168px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    background: var(--cr-bg-primary);
    scrollbar-width: none;
}
.cr-time-col::-webkit-scrollbar { width: 0; height: 0; }
.cr-time-col-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cr-text-tertiary);
    font-weight: var(--cr-font-weight-semibold);
    font-size: var(--cr-font-size-lg);
}
.cr-time-opt {
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    font-size: var(--cr-font-size-sm);
    font-variant-numeric: tabular-nums;
    color: var(--cr-text-secondary);
    cursor: pointer;
    transition: background var(--cr-transition), color var(--cr-transition);
}
.cr-time-opt:hover { background: var(--cr-bg-hover); color: var(--cr-text-primary); }
.cr-time-opt.selected {
    background: var(--cr-accent-light);
    color: var(--cr-accent);
    font-weight: var(--cr-font-weight-semibold);
}

.cr-time-panel-meridiem {
    display: flex;
    gap: var(--cr-space-2);
    margin-top: var(--cr-space-3);
}
.cr-time-panel-meridiem button {
    flex: 1;
    font-family: inherit;
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-medium);
    padding: 6px 0;
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    background: var(--cr-bg-primary);
    color: var(--cr-text-secondary);
    cursor: pointer;
    transition: background var(--cr-transition), color var(--cr-transition), border-color var(--cr-transition);
}
.cr-time-panel-meridiem button:hover:not(.active) { background: var(--cr-bg-hover); color: var(--cr-text-primary); }
.cr-time-panel-meridiem button.active {
    background: var(--cr-accent);
    color: #fff;
    border-color: var(--cr-accent);
}

.cr-time-panel-actions {
    display: flex;
    gap: var(--cr-space-2);
    margin-top: var(--cr-space-3);
    padding-top: var(--cr-space-3);
    border-top: 1px solid var(--cr-border);
}
.cr-time-panel-actions button {
    flex: 1;
    font-family: inherit;
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-medium);
    padding: 6px 0;
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-md);
    background: var(--cr-bg-primary);
    color: var(--cr-text-secondary);
    cursor: pointer;
}
.cr-time-panel-actions button:hover { background: var(--cr-bg-hover); color: var(--cr-text-primary); }
.cr-time-panel-actions button.primary {
    background: var(--cr-accent);
    color: #fff;
    border-color: var(--cr-accent);
}
.cr-time-panel-actions button.primary:hover { background: var(--cr-accent-hover, var(--cr-accent)); color: #fff; }

/* ==========================================================================
   SECTION: STEP FOOTER BAR (.cr-section-step-footer)
   Sticky Back/Next bar for wizard-style multi-step flows. Pinned to the
   bottom of its scroll container so the primary action lives in the same
   spot on every step, regardless of content length.
   Used in: templates/portal/owner/facility.php (facility config wizard).
   ========================================================================== */
.cr-section-step-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cr-space-4);
    padding: var(--cr-space-3) var(--cr-space-6);
    background: var(--cr-bg-primary);
    border-top: 1px solid var(--cr-border);
    box-shadow: 0 -4px 12px -8px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .cr-section-step-footer {
    box-shadow: 0 -4px 12px -8px rgba(0, 0, 0, 0.6);
}
.cr-step-footer-meta {
    font-size: var(--cr-font-size-sm);
    color: var(--cr-text-tertiary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cr-step-footer-actions {
    display: flex;
    align-items: center;
    gap: var(--cr-space-2);
    flex-shrink: 0;
}
/* Step-footer Next button — always uses the accent blue (not the neutral
   .cr-btn-primary palette) so it stays high-contrast against the content
   regardless of theme. */
.cr-step-footer-actions .cr-btn-next {
    background: var(--cr-accent);
    color: #fff;
    border-color: var(--cr-accent);
}
.cr-step-footer-actions .cr-btn-next:hover {
    background: var(--cr-accent-hover, var(--cr-accent));
    filter: brightness(1.1);
    color: #fff;
}
.cr-step-footer-actions .cr-btn:disabled,
.cr-step-footer-actions .cr-btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
@media (max-width: 768px) {
    .cr-section-step-footer {
        padding: var(--cr-space-3) var(--cr-space-4);
    }
    .cr-step-footer-meta { display: none; }
}

/* ==========================================================================
   Payment Info Component
   Compact payment method detail bars used in billing cards and modals.
   Two variants: .cr-pay-info-card (billing) and .cr-pay-info-modal (modal).
   ========================================================================== */

/* ── Shared sub-elements ── */
.pi-z-icon {
    border-radius: var(--cr-radius-sm);
    background: color-mix(in srgb, var(--cr-info) 12%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--cr-font-weight-bold);
    color: var(--cr-info);
    flex-shrink: 0;
}
.pi-copy-btn {
    background: none;
    border: none;
    padding: 0 var(--cr-space-1);
    cursor: pointer;
    color: var(--cr-text-tertiary);
    border-radius: var(--cr-radius-sm);
    display: inline-flex;
    align-items: center;
    transition: color var(--cr-transition);
    flex-shrink: 0;
    font-family: var(--cr-font-family);
}
.pi-copy-btn:hover { color: var(--cr-accent); }
.pi-copy-btn.copied { color: var(--cr-success); }

/* ── Billing card variant ── */
.cr-pay-info-card {
    background: var(--cr-bg-secondary);
    border-radius: var(--cr-radius-md);
    font-size: var(--cr-font-size-xs);
    padding: var(--cr-space-3);
}
.cr-pay-info-card .pi-top {
    display: flex;
    align-items: center;
    gap: var(--cr-space-3);
}
.cr-pay-info-card .pi-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--cr-space-2);
    flex-shrink: 0;
}
.cr-pay-info-card .pi-brand .pi-z-icon {
    width: 32px;
    height: 32px;
    font-size: var(--cr-font-size-sm);
    border-radius: var(--cr-radius-md);
}
.cr-pay-info-card .pi-brand-label {
    font-weight: var(--cr-font-weight-bold);
    font-size: var(--cr-font-size-base);
    color: var(--cr-text-primary);
}
.cr-pay-info-card .pi-divider {
    width: 1px;
    align-self: stretch;
    background: var(--cr-border);
    flex-shrink: 0;
}
.cr-pay-info-card .pi-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cr-space-1) var(--cr-space-3);
    flex: 1;
    min-width: 0;
}
.cr-pay-info-card .pi-item {
    display: inline-flex;
    align-items: center;
    gap: var(--cr-space-1);
    white-space: nowrap;
}
.cr-pay-info-card .pi-value {
    color: var(--cr-text-primary);
    font-weight: var(--cr-font-weight-medium);
}
.cr-pay-info-card .pi-sep {
    color: var(--cr-border);
    font-size: 10px;
}
.cr-pay-info-card .pi-note {
    display: flex;
    align-items: center;
    gap: var(--cr-space-1);
    font-size: 10px;
    color: var(--cr-text-tertiary);
    line-height: 1.3;
    margin-top: var(--cr-space-2);
    padding-top: var(--cr-space-2);
    border-top: 1px solid var(--cr-border);
}
.cr-pay-info-card .pi-note svg { flex-shrink: 0; }

/* ── Modal variant ── */
.cr-pay-info-modal {
    padding: var(--cr-space-2) var(--cr-space-3);
    background: var(--cr-bg-secondary);
    border-radius: var(--cr-radius-md);
    font-size: var(--cr-font-size-xs);
}
.cr-pay-info-modal .pi-header {
    display: flex;
    align-items: center;
    gap: var(--cr-space-2);
    margin-bottom: var(--cr-space-2);
    padding-bottom: var(--cr-space-2);
    border-bottom: 1px solid var(--cr-border);
}
.cr-pay-info-modal .pi-header .pi-z-icon {
    width: 24px;
    height: 24px;
    font-size: 11px;
}
.cr-pay-info-modal .pi-header-label {
    font-weight: var(--cr-font-weight-semibold);
    font-size: var(--cr-font-size-sm);
    color: var(--cr-text-primary);
}
.cr-pay-info-modal .pi-rows {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cr-space-1) var(--cr-space-6);
}
.cr-pay-info-modal .pi-row {
    display: inline-flex;
    align-items: center;
    gap: var(--cr-space-1);
    white-space: nowrap;
}
.cr-pay-info-modal .pi-row-label { color: var(--cr-text-tertiary); }
.cr-pay-info-modal .pi-row-value {
    color: var(--cr-text-primary);
    font-weight: var(--cr-font-weight-medium);
}
.cr-pay-info-modal .pi-footer {
    font-size: 10px;
    color: var(--cr-text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--cr-space-1);
    margin-top: var(--cr-space-2);
}
.cr-pay-info-modal .pi-footer svg { flex-shrink: 0; }

/* ==========================================================================
   Cross-Document View Transitions
   Eliminates white-flash between portal pages by keeping the sidebar and
   top bar in place while only the content area transitions.
   Requires: <meta name="view-transition" content="same-origin" /> in <head>.
   Browser support: Chrome 111+. Degrades gracefully — older browsers
   just do a normal full page load with no visual difference.
   ========================================================================== */

@view-transition { navigation: auto; }

/* NOTE: .cr-nav-content previously had view-transition-name: cr-content here.
   That was removed because view-transition-name creates a new stacking context,
   which trapped position:fixed modal overlays (z-index: 9000) inside the content
   area — preventing them from rendering above the fixed sidebar (z-index: 190)
   and topbar (z-index: 200). Every modal overlay in the portal was affected.
   The page-to-page crossfade is sacrificed; transitions now use the default
   full-page snapshot from @view-transition { navigation: auto; } above.        */

/* Root snaps instantly — no crossfade, no flash. */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
}

/* cr-content crossfade animations removed — see note above.
   The ::view-transition-old/new(cr-content) rules and their keyframes
   are no longer needed since the named transition was removed.        */