/*!
 * ShamTicketz Material Design 3 Theme
 * ====================================
 * Applies a complete Material Design 3 (M3) design system over ShamTicketz's
 * Bootstrap 3 + SB Admin 2 control panel and public-facing pages.
 *
 * Tested against: ShamTicketz (pretix 2026.3.0)
 *
 * Upgrade safety notes:
 * - This file overrides Bootstrap 3 classes (.btn, .panel, .form-control, etc.).
 *   If ShamTicketz migrates to a newer CSS framework, these overrides may need updating.
 * - Color tokens use CSS custom properties — safe to override without touching
 *   component styles.
 * - Typography tokens reference 'Roboto' for Latin text; Tajawal Arabic font
 *   is managed separately by tajawal-font.css via --pretix-font-family-sans-serif.
 * - No JavaScript, no @import — this is a single self-contained CSS file.
 * - Uses ManifestStaticFilesStorage compatible paths.
 *
 * File: pretix_custom/static/pretix_custom/css/theme.css
 * Plugin: pretix_custom (ShamTicketz)
 * Author: Amar Tinawi
 * License: See plugin LICENSE
 */


/* ==========================================================================
   1. M3 Color Tokens (Light Scheme, Blue Seed #1976D2)
   ========================================================================== */

:root {
    /* Primary */
    --md-sys-color-primary: #1565C0;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #D4E3FF;
    --md-sys-color-on-primary-container: #001C3A;
    --md-sys-color-primary-fixed: #D4E3FF;
    --md-sys-color-primary-fixed-dim: #A8C7FF;

    /* Secondary */
    --md-sys-color-secondary: #535F70;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #D7E3F8;
    --md-sys-color-on-secondary-container: #101C2B;
    --md-sys-color-secondary-fixed: #D7E3F8;
    --md-sys-color-secondary-fixed-dim: #BAC7DB;

    /* Tertiary */
    --md-sys-color-tertiary: #6B5778;
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: #F2DAFF;
    --md-sys-color-on-tertiary-container: #251431;
    --md-sys-color-tertiary-fixed: #F2DAFF;
    --md-sys-color-tertiary-fixed-dim: #D5BEE3;

    /* Error */
    --md-sys-color-error: #BA1A1A;
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: #FFDAD6;
    --md-sys-color-on-error-container: #410002;

    /* Warning (Orange) — derived from M3 tertiary palette for alert styling */
    --md-sys-color-warning: #F57C00;
    --md-sys-color-on-warning: #FFFFFF;
    --md-sys-color-warning-container: #FFDDB5;
    --md-sys-color-on-warning-container: #271900;

    /* Background & Surface */
    --md-sys-color-background: #FDFCFF;
    --md-sys-color-on-background: #1A1C1E;
    --md-sys-color-surface: #FDFCFF;
    --md-sys-color-on-surface: #1A1C1E;
    --md-sys-color-surface-variant: #DFE2EB;
    --md-sys-color-on-surface-variant: #43474E;
    --md-sys-color-surface-container: #EEF0F4;
    --md-sys-color-surface-container-low: #F3F4F8;
    --md-sys-color-surface-container-high: #E8E9ED;
    --md-sys-color-surface-container-highest: #E2E3E7;
    --md-sys-color-surface-container-lowest: #FFFFFF;
    --md-sys-color-surface-dim: #DBDADD;
    --md-sys-color-surface-bright: #FDFCFF;

    /* Surface tint */
    --md-sys-color-surface-tint: #D4E3FF;

    /* Outline */
    --md-sys-color-outline: #73777F;
    --md-sys-color-outline-variant: #C3C6CF;

    /* Inverse */
    --md-sys-color-inverse-surface: #2F3033;
    --md-sys-color-inverse-on-surface: #F1F0F4;
    --md-sys-color-inverse-primary: #A8C7FF;

    /* Scrim & Shadow */
    --md-sys-color-scrim: #000000;
    --md-sys-color-shadow: #000000;

    /* Pretix-specific color overrides */
    --pretix-color-brand: var(--md-sys-color-primary);
    --pretix-color-brand-dark: #0D47A1;
    --pretix-color-text: var(--md-sys-color-on-background);
    --pretix-color-text-muted: var(--md-sys-color-on-surface-variant);
    --pretix-color-bg: var(--md-sys-color-background);
    --pretix-color-surface: var(--md-sys-color-surface);
    --pretix-color-link: var(--md-sys-color-primary);

    /* Override pretix brand-primary (default #7f5a91 purple) to M3 blue.
       Safe: theme.css is only injected on /control/* paths — presale pages
       keep their organizer-set --pretix-brand-primary untouched. */
    --pretix-brand-primary: #1565C0;
    --pretix-brand-primary-darken-5: #1254a8;
    --pretix-brand-primary-darken-10: #0e4590;
    --pretix-brand-primary-darken-15: #0b3678;
    --pretix-brand-primary-darken-20: #082860;
    --pretix-brand-primary-darken-30: #041638;
    --pretix-brand-primary-lighten-5: #2374c8;
    --pretix-brand-primary-lighten-10: #4d8dd0;
    --pretix-brand-primary-lighten-20: #7daade;
    --pretix-brand-primary-lighten-23-saturate-2: #8fb5e3;
    --pretix-brand-primary-lighten-28-saturate-20: #a3c3eb;
    --pretix-brand-primary-lighten-30: #9fc2ea;
    --pretix-brand-primary-lighten-35: #bdd5f0;
    --pretix-brand-primary-lighten-38: #c8ddf3;
    --pretix-brand-primary-lighten-40: #d4e5f6;
    --pretix-brand-primary-lighten-43: #ddeef8;
    --pretix-brand-primary-lighten-48: #eaf3fb;
    --pretix-brand-primary-lighten-50: #eef5fc;
    --pretix-brand-primary-lighten-53: #f3f9fd;
    --pretix-brand-primary-lighten-55: #f8fbfe;
    --pretix-brand-primary-shade-25: #0f4a85;
    --pretix-brand-primary-shade-42: #0a3058;
    --pretix-brand-primary-tint-90: #f2f7fc;

    /* Override pretix background tints that used purple/orange */
    --pretix-bg-auth: var(--md-sys-color-surface);
    --pretix-bg-admin: var(--md-sys-color-surface);
}


/* ==========================================================================
   2. M3 Typography Tokens

   Tajawal Arabic font is managed by tajawal-font.css — do NOT override here.
   These tokens set the Latin font family; Arabic falls back to the
   --pretix-font-family-sans-serif variable injected by tajawal-font.css.
   ========================================================================== */

:root {
    --md-sys-typescale-display-large-font: 'Roboto', system-ui, -apple-system, sans-serif;
    --md-sys-typescale-display-large-size: 57px;
    --md-sys-typescale-display-large-line-height: 64px;
    --md-sys-typescale-display-large-weight: 400;
    --md-sys-typescale-display-large-tracking: -0.25px;

    --md-sys-typescale-display-medium-font: 'Roboto', system-ui, -apple-system, sans-serif;
    --md-sys-typescale-display-medium-size: 45px;
    --md-sys-typescale-display-medium-line-height: 52px;
    --md-sys-typescale-display-medium-weight: 400;
    --md-sys-typescale-display-medium-tracking: 0;

    --md-sys-typescale-display-small-font: 'Roboto', system-ui, -apple-system, sans-serif;
    --md-sys-typescale-display-small-size: 36px;
    --md-sys-typescale-display-small-line-height: 44px;
    --md-sys-typescale-display-small-weight: 400;
    --md-sys-typescale-display-small-tracking: 0;

    --md-sys-typescale-headline-large-font: 'Roboto', system-ui, -apple-system, sans-serif;
    --md-sys-typescale-headline-large-size: 32px;
    --md-sys-typescale-headline-large-line-height: 40px;
    --md-sys-typescale-headline-large-weight: 400;
    --md-sys-typescale-headline-large-tracking: 0;

    --md-sys-typescale-headline-medium-font: 'Roboto', system-ui, -apple-system, sans-serif;
    --md-sys-typescale-headline-medium-size: 28px;
    --md-sys-typescale-headline-medium-line-height: 36px;
    --md-sys-typescale-headline-medium-weight: 400;
    --md-sys-typescale-headline-medium-tracking: 0;

    --md-sys-typescale-headline-small-font: 'Roboto', system-ui, -apple-system, sans-serif;
    --md-sys-typescale-headline-small-size: 24px;
    --md-sys-typescale-headline-small-line-height: 32px;
    --md-sys-typescale-headline-small-weight: 400;
    --md-sys-typescale-headline-small-tracking: 0;

    --md-sys-typescale-title-large-font: 'Roboto', system-ui, -apple-system, sans-serif;
    --md-sys-typescale-title-large-size: 22px;
    --md-sys-typescale-title-large-line-height: 28px;
    --md-sys-typescale-title-large-weight: 400;
    --md-sys-typescale-title-large-tracking: 0;

    --md-sys-typescale-title-medium-font: 'Roboto', system-ui, -apple-system, sans-serif;
    --md-sys-typescale-title-medium-size: 16px;
    --md-sys-typescale-title-medium-line-height: 24px;
    --md-sys-typescale-title-medium-weight: 500;
    --md-sys-typescale-title-medium-tracking: 0.15px;

    --md-sys-typescale-title-small-font: 'Roboto', system-ui, -apple-system, sans-serif;
    --md-sys-typescale-title-small-size: 14px;
    --md-sys-typescale-title-small-line-height: 20px;
    --md-sys-typescale-title-small-weight: 500;
    --md-sys-typescale-title-small-tracking: 0.1px;

    --md-sys-typescale-body-large-font: 'Roboto', system-ui, -apple-system, sans-serif;
    --md-sys-typescale-body-large-size: 16px;
    --md-sys-typescale-body-large-line-height: 24px;
    --md-sys-typescale-body-large-weight: 400;
    --md-sys-typescale-body-large-tracking: 0.5px;

    --md-sys-typescale-body-medium-font: 'Roboto', system-ui, -apple-system, sans-serif;
    --md-sys-typescale-body-medium-size: 14px;
    --md-sys-typescale-body-medium-line-height: 20px;
    --md-sys-typescale-body-medium-weight: 400;
    --md-sys-typescale-body-medium-tracking: 0.25px;

    --md-sys-typescale-body-small-font: 'Roboto', system-ui, -apple-system, sans-serif;
    --md-sys-typescale-body-small-size: 12px;
    --md-sys-typescale-body-small-line-height: 16px;
    --md-sys-typescale-body-small-weight: 400;
    --md-sys-typescale-body-small-tracking: 0.4px;

    --md-sys-typescale-label-large-font: 'Roboto', system-ui, -apple-system, sans-serif;
    --md-sys-typescale-label-large-size: 14px;
    --md-sys-typescale-label-large-line-height: 20px;
    --md-sys-typescale-label-large-weight: 500;
    --md-sys-typescale-label-large-tracking: 0.1px;

    --md-sys-typescale-label-medium-font: 'Roboto', system-ui, -apple-system, sans-serif;
    --md-sys-typescale-label-medium-size: 12px;
    --md-sys-typescale-label-medium-line-height: 16px;
    --md-sys-typescale-label-medium-weight: 500;
    --md-sys-typescale-label-medium-tracking: 0.5px;

    --md-sys-typescale-label-small-font: 'Roboto', system-ui, -apple-system, sans-serif;
    --md-sys-typescale-label-small-size: 11px;
    --md-sys-typescale-label-small-line-height: 16px;
    --md-sys-typescale-label-small-weight: 500;
    --md-sys-typescale-label-small-tracking: 0.5px;
}


/* ==========================================================================
   3. M3 Elevation Tokens
   ========================================================================== */

:root {
    --md-sys-elevation-0: none;
    --md-sys-elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30);
    --md-sys-elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30);
    --md-sys-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.30);
    --md-sys-elevation-4: 0 6px 10px 4px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.30);
    --md-sys-elevation-5: 0 8px 12px 6px rgba(0, 0, 0, 0.15), 0 4px 4px 0 rgba(0, 0, 0, 0.30);
}


/* ==========================================================================
   4. M3 Shape Tokens
   ========================================================================== */

:root {
    --md-sys-shape-none: 0px;
    --md-sys-shape-extra-small: 4px;
    --md-sys-shape-small: 8px;
    --md-sys-shape-medium: 12px;
    --md-sys-shape-large: 16px;
    --md-sys-shape-extra-large: 28px;
    --md-sys-shape-full: 9999px;
}


/* ==========================================================================
   5. M3 Motion Tokens
   ========================================================================== */

:root {
    --md-sys-motion-duration-short1: 50ms;
    --md-sys-motion-duration-short2: 100ms;
    --md-sys-motion-duration-short3: 150ms;
    --md-sys-motion-duration-short4: 200ms;
    --md-sys-motion-duration-medium1: 250ms;
    --md-sys-motion-duration-medium2: 300ms;
    --md-sys-motion-duration-medium3: 350ms;
    --md-sys-motion-duration-medium4: 400ms;
    --md-sys-motion-duration-long1: 450ms;
    --md-sys-motion-duration-long2: 500ms;

    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
    --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
    --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --md-sys-motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1);
    --md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
}


/* ==========================================================================
   6. M3 State Tokens
   ========================================================================== */

:root {
    --md-sys-state-hover-opacity: 0.08;
    --md-sys-state-focus-opacity: 0.12;
    --md-sys-state-pressed-opacity: 0.12;
    --md-sys-state-dragged-opacity: 0.16;
    --md-sys-state-disabled-opacity: 0.38;
    --md-sys-state-hover-state-layer-color: var(--md-sys-color-on-surface);
    --md-sys-state-focus-state-layer-color: var(--md-sys-color-on-surface);
    --md-sys-state-pressed-state-layer-color: var(--md-sys-color-on-surface);
}


/* ==========================================================================
   7. Base Styles (apply tokens to root)

   NOTE: Tajawal Arabic font is managed by tajawal-font.css — do NOT override
   body font-family here. tajawal-font.css sets --pretix-font-family-sans-serif
   and applies it via a universal selector with !important.
   ========================================================================== */

:root {
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
}

h1, h2, h3,
.h1, .h2, .h3 {
    font-family: var(--md-sys-typescale-headline-large-font), var(--pretix-font-family-sans-serif);
    color: var(--md-sys-color-on-surface);
    line-height: var(--md-sys-typescale-headline-medium-line-height);
    letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
}

h1, .h1 {
    font-size: var(--md-sys-typescale-headline-large-size);
    line-height: var(--md-sys-typescale-headline-large-line-height);
    letter-spacing: var(--md-sys-typescale-headline-large-tracking);
    font-weight: 600;
}

h2, .h2 {
    font-size: var(--md-sys-typescale-headline-medium-size);
    line-height: var(--md-sys-typescale-headline-medium-line-height);
    letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
    font-weight: 600;
}

h3, .h3 {
    font-size: var(--md-sys-typescale-headline-small-size);
    line-height: var(--md-sys-typescale-headline-small-line-height);
    letter-spacing: var(--md-sys-typescale-headline-small-tracking);
    font-weight: 500;
}

h4, .h4 {
    font-size: var(--md-sys-typescale-title-large-size);
    line-height: var(--md-sys-typescale-title-large-line-height);
    letter-spacing: var(--md-sys-typescale-title-large-tracking);
    font-weight: var(--md-sys-typescale-title-large-weight);
}

h5, .h5 {
    font-size: var(--md-sys-typescale-title-medium-size);
    line-height: var(--md-sys-typescale-title-medium-line-height);
    letter-spacing: var(--md-sys-typescale-title-medium-tracking);
    font-weight: var(--md-sys-typescale-title-medium-weight);
}

h6, .h6 {
    font-size: var(--md-sys-typescale-title-small-size);
    line-height: var(--md-sys-typescale-title-small-line-height);
    letter-spacing: var(--md-sys-typescale-title-small-tracking);
    font-weight: var(--md-sys-typescale-title-small-weight);
}

p, .text-body {
    font-family: var(--md-sys-typescale-body-large-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-body-large-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
    letter-spacing: var(--md-sys-typescale-body-large-tracking);
}

small, .text-small {
    font-size: var(--md-sys-typescale-body-small-size);
    line-height: var(--md-sys-typescale-body-small-line-height);
    letter-spacing: var(--md-sys-typescale-body-small-tracking);
}

a {
    color: var(--md-sys-color-primary);
    text-decoration: none;
    transition: color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

a:hover {
    color: var(--md-sys-color-inverse-primary);
    text-decoration: underline;
}

::selection {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}


/* ==========================================================================
   8. ShamTicketz Component Overrides
   ========================================================================== */

/* -------------------------------------------------------------------------
   8.1 Buttons — M3 Filled Button / Filled Tonal Button
   ------------------------------------------------------------------------- */

.btn {
    font-family: var(--md-sys-typescale-label-large-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
    line-height: var(--md-sys-typescale-label-large-line-height);
    border: none;
    border-radius: var(--md-sys-shape-full);
    padding: 10px 24px;
    text-transform: none;
    box-shadow: var(--md-sys-elevation-0);
    transition:
        background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.btn:hover {
    box-shadow: var(--md-sys-elevation-1);
}

.btn:active {
    box-shadow: var(--md-sys-elevation-0);
}

.btn:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.nav > li > a:focus-visible,
.dropdown-menu > li > a:focus-visible,
.pagination > li > a:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: -2px;
}

.btn:disabled,
.btn[disabled],
fieldset[disabled] .btn {
    cursor: not-allowed;
    box-shadow: var(--md-sys-elevation-0);
    background-color: color-mix(in srgb, var(--md-sys-color-surface) 12%, transparent);
}

.btn:disabled,
.btn[disabled],
fieldset[disabled] .btn {
    opacity: var(--md-sys-state-disabled-opacity);
}

.btn-primary:disabled,
.btn-primary[disabled],
.btn-success:disabled,
.btn-success[disabled],
.btn-danger:disabled,
.btn-danger[disabled] {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, var(--md-sys-color-surface));
    color: var(--md-sys-color-on-surface);
    opacity: var(--md-sys-state-disabled-opacity);
}

/* Primary — M3 Filled Button */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
}

.btn-primary:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, black);
}

.btn-primary:active {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 78%, black);
}

/* Default — M3 Filled Tonal Button */
.btn-default,
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border: none;
}

.btn-default:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container) 90%, black);
}

.btn-default:active {
    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container) 80%, black);
}

/* Success — M3 Filled Button (tertiary color) */
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--md-sys-color-tertiary);
    color: var(--md-sys-color-on-tertiary);
    border: none;
}

.btn-success:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-tertiary) 88%, black);
}

.btn-success:active {
    background-color: color-mix(in srgb, var(--md-sys-color-tertiary) 78%, black);
}

/* Danger — M3 Filled Button (error color) */
.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
    border: none;
}

.btn-danger:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-error) 88%, black);
}

.btn-danger:active {
    background-color: color-mix(in srgb, var(--md-sys-color-error) 78%, black);
}

/* Warning — M3 Filled Button with secondary styling */
.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: var(--md-sys-color-secondary);
    color: var(--md-sys-color-on-secondary);
    border: none;
}

.btn-warning:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-secondary) 88%, black);
}

/* Outline button variant */
.btn-outline-primary {
    background-color: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline);
}

.btn-outline-primary:hover {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-color: var(--md-sys-color-primary);
}

/* Small / Large button sizes */
.btn-sm {
    font-family: var(--md-sys-typescale-label-medium-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-label-medium-size);
    font-weight: var(--md-sys-typescale-label-medium-weight);
    letter-spacing: var(--md-sys-typescale-label-medium-tracking);
    padding: 6px 16px;
    border-radius: var(--md-sys-shape-full);
}

.btn-lg {
    font-size: var(--md-sys-typescale-label-large-size);
    padding: 14px 32px;
    border-radius: var(--md-sys-shape-full);
}

.btn-xs {
    font-family: var(--md-sys-typescale-label-small-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-label-small-size);
    font-weight: var(--md-sys-typescale-label-small-weight);
    letter-spacing: var(--md-sys-typescale-label-small-tracking);
    padding: 4px 12px;
    border-radius: var(--md-sys-shape-full);
}

.btn {
    background-image: none;
    filter: none;
}

/* Pretix core .btn-save — override to M3 pill button spec */
.btn-save {
    border-radius: var(--md-sys-shape-full);
    font-size: var(--md-sys-typescale-label-large-size);
    padding: 10px 24px;
}

/* -------------------------------------------------------------------------
   8.2 Panels — M3 Card
   ------------------------------------------------------------------------- */

.panel {
    background-color: var(--md-sys-color-surface-container);
    border: none;
    border-radius: var(--md-sys-shape-medium);
    box-shadow: var(--md-sys-elevation-1);
    overflow: hidden;
    transition: transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
                box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.panel:hover {
    transform: translateY(-1px);
    box-shadow: var(--md-sys-elevation-2);
}

.panel-default {
    border: none;
}

.panel-heading {
    background-color: var(--md-sys-color-primary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--md-sys-shape-medium) var(--md-sys-shape-medium) 0 0;
    padding: 16px 24px;
}

.panel-default > .panel-heading {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.panel-heading .panel-title {
    font-family: var(--md-sys-typescale-title-medium-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-title-medium-size);
    font-weight: var(--md-sys-typescale-title-medium-weight);
    letter-spacing: var(--md-sys-typescale-title-medium-tracking);
    line-height: var(--md-sys-typescale-title-medium-line-height);
    color: var(--md-sys-color-on-primary);
}

.panel-heading .panel-title > a {
    color: var(--md-sys-color-on-primary);
}

.panel-body {
    padding: 24px;
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-body-large-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-body-large-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
}

.panel-footer {
    background-color: var(--md-sys-color-surface-container-low);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 0 0 var(--md-sys-shape-medium) var(--md-sys-shape-medium);
    padding: 12px 24px;
}

/* -------------------------------------------------------------------------
   8.3 Form Controls — M3 Filled Text Field
   ------------------------------------------------------------------------- */

.form-control {
    font-family: var(--md-sys-typescale-body-large-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-body-large-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
    letter-spacing: var(--md-sys-typescale-body-large-tracking);
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-surface-variant);
    border: none;
    border-bottom: 2px solid var(--md-sys-color-on-surface-variant);
    border-radius: var(--md-sys-shape-extra-small) var(--md-sys-shape-extra-small) 0 0;
    padding: 16px;
    box-shadow: none;
    transition:
        border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    height: auto;
}

.form-control:focus {
    border-color: var(--md-sys-color-primary);
    background-color: var(--md-sys-color-surface-container);
    box-shadow: none;
    outline: none;
}

.form-control::placeholder {
    color: var(--md-sys-color-on-surface-variant);
}

.form-control:disabled,
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: var(--md-sys-color-surface-container-low);
    border-bottom-color: var(--md-sys-color-on-surface-variant);
    color: var(--md-sys-color-on-surface);
    opacity: var(--md-sys-state-disabled-opacity);
}

/* Select elements — outlined variant */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%2343474E' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 24px;
    padding-inline-end: 40px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-small);
    border-bottom-width: 1px;
}

select.form-control {
    border-radius: 4px 4px 0px 0px;
}

/* Labels */
label,
.control-label {
    font-family: var(--md-sys-typescale-label-large-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
    color: var(--md-sys-color-on-surface-variant);
}

/* Help text */
.help-block,
.text-muted:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.glyphicon):not(.pw-icon) {
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--md-sys-typescale-body-small-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-body-small-size);
    line-height: var(--md-sys-typescale-body-small-line-height);
}

/* Form groups */
.form-group {
    margin-bottom: 16px;
}

/* Input groups */
.input-group .input-group-addon {
    background-color: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    border-radius: var(--md-sys-shape-extra-small);
}

.input-group .form-control:first-child,
.input-group-addon:first-child {
    border-radius: var(--md-sys-shape-extra-small) 0 0 var(--md-sys-shape-extra-small);
}

.input-group .form-control:last-child,
.input-group-addon:last-child {
    border-radius: 0 var(--md-sys-shape-extra-small) var(--md-sys-shape-extra-small) 0;
}

/* Validation states */
.has-error .form-control {
    border-bottom-color: var(--md-sys-color-error);
}

.has-success .form-control {
    border-bottom-color: var(--md-sys-color-tertiary);
}

.has-warning .form-control {
    border-bottom-color: var(--md-sys-color-secondary);
}

/* Checkbox & Radio — M3 style */
.checkbox label,
.radio label {
    font-family: var(--md-sys-typescale-body-large-font), var(--pretix-font-family-sans-serif);
    color: var(--md-sys-color-on-surface);
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

/* -------------------------------------------------------------------------
   8.4 Navigation — ShamTicketz Control Panel Top Bar & Sidebar
   ------------------------------------------------------------------------- */

/* Top navbar — primary blue background (was pretix purple #3b1c4a) */
.navbar-inverse {
    background-color: var(--md-sys-color-primary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: var(--md-sys-elevation-1);
    min-height: 56px;
}

.widget-container .bottomrow a.orders {
    background-color: var(--md-sys-color-primary) !important;
}

.navbar-inverse .navbar-brand {
    color: var(--md-sys-color-on-primary);
}

.navbar-inverse .navbar-brand:hover {
    color: rgba(255, 255, 255, 0.87);
}

.navbar-inverse .navbar-nav > li > a {
    color: rgba(255, 255, 255, 0.87);
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover {
    color: var(--md-sys-color-on-primary);
    background-color: rgba(255, 255, 255, 0.15);
}

.navbar-inverse .navbar-text {
    color: rgba(255, 255, 255, 0.87);
}

.navbar-inverse .navbar-toggle {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.87);
}

.navbar-inverse .navbar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
    border-color: rgba(255, 255, 255, 0.15);
}

/* Sidebar — primary blue, white text */
.navbar-default.sidebar {
    background-color: var(--md-sys-color-primary);
}

.navbar-default.sidebar .navbar-nav > li > a,
.navbar-default.sidebar ul li a {
    color: rgba(255, 255, 255, 0.87);
}

.navbar-default.sidebar .navbar-nav > li > a:hover,
.navbar-default.sidebar ul li a:hover,
.navbar-default.sidebar .navbar-nav > .active > a,
.navbar-default.sidebar ul li a.active {
    color: var(--md-sys-color-on-primary);
    background-color: rgba(255, 255, 255, 0.15);
}

/* Sidebar icons — white to match blue background */
.navbar-default.sidebar .navbar-nav > li > a .fa,
.navbar-default.sidebar .navbar-nav > li > a .pw-icon,
.navbar-default.sidebar .navbar-nav > li > a .glyphicon,
.navbar-default.sidebar ul li a .fa,
.navbar-default.sidebar ul li a .pw-icon,
.navbar-default.sidebar ul li a .glyphicon {
    color: rgba(255, 255, 255, 0.87);
}

.navbar-default.sidebar .navbar-nav > li > a:hover .fa,
.navbar-default.sidebar .navbar-nav > li > a:hover .pw-icon,
.navbar-default.sidebar .navbar-nav > li > a:hover .glyphicon,
.navbar-default.sidebar ul li a:hover .fa,
.navbar-default.sidebar ul li a:hover .pw-icon,
.navbar-default.sidebar ul li a:hover .glyphicon,
.navbar-default.sidebar .navbar-nav > .active > a .fa,
.navbar-default.sidebar .navbar-nav > .active > a .pw-icon,
.navbar-default.sidebar .navbar-nav > .active > a .glyphicon,
.navbar-default.sidebar ul li a.active .fa,
.navbar-default.sidebar ul li a.active .pw-icon,
.navbar-default.sidebar ul li a.active .glyphicon {
    color: var(--md-sys-color-on-primary);
}

/* Sidebar arrow icons */
.navbar-default.sidebar .fa.arrow {
    color: rgba(255, 255, 255, 0.87);
}

.navbar-default.sidebar .active > a > .fa.arrow {
    color: var(--md-sys-color-on-primary);
}

/* Sidebar context-selector — white text, visible without hover */
.navbar-default.sidebar .context-selector .dropdown-toggle {
    color: rgba(255, 255, 255, 0.87);
    text-decoration: none;
}

.navbar-default.sidebar .context-selector .dropdown-toggle:hover,
.navbar-default.sidebar .context-selector .dropdown-toggle:focus {
    color: var(--md-sys-color-on-primary);
    background-color: rgba(255, 255, 255, 0.15);
}

.navbar-default.sidebar .context-selector .context-name {
    color: rgba(255, 255, 255, 0.87);
}

.navbar-default.sidebar .context-selector .dropdown-toggle:hover .context-name,
.navbar-default.sidebar .context-selector .dropdown-toggle:focus .context-name {
    color: var(--md-sys-color-on-primary);
}

.navbar-default.sidebar .context-selector .caret {
    border-top-color: rgba(255, 255, 255, 0.87);
}

.navbar-default.sidebar .context-selector .dropdown-toggle:hover .caret,
.navbar-default.sidebar .context-selector .dropdown-toggle:focus .caret {
    border-top-color: var(--md-sys-color-on-primary);
}

/* -------------------------------------------------------------------------
   8.5 Tables — M3 Data Table
   ------------------------------------------------------------------------- */

.table {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--md-sys-typescale-body-medium-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-body-medium-size);
    line-height: var(--md-sys-typescale-body-medium-line-height);
    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

.table > thead > tr > th {
    background-color: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-label-large-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
    border-bottom: 2px solid var(--md-sys-color-outline-variant);
    padding: 12px 16px;
    vertical-align: bottom;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-top: 1px solid var(--md-sys-color-outline-variant);
    padding: 12px 16px;
}

.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th {
    background-color: var(--md-sys-color-surface-container);
}

/* Striped rows */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--md-sys-color-surface-container-lowest);
}

.table-striped > tbody > tr:nth-of-type(even) {
    background-color: var(--md-sys-color-surface);
}

/* Bordered table */
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: 1px solid var(--md-sys-color-outline-variant);
}

/* Hover */
.table-hover > tbody > tr:hover {
    background-color: var(--md-sys-color-surface-container-low);
}

/* -------------------------------------------------------------------------
   8.6 Alerts — M3 color styling (layout from pretix, colors from M3)
   ------------------------------------------------------------------------- */

/* Base alert — only override border-radius and margin, preserve ALL other Bootstrap/pretix defaults */
.alert {
    border-radius: var(--md-sys-shape-small);
    margin-bottom: 20px;
    padding: 16px 16px 16px 64px;
}

/* Container spacing */
.container-fluid > .alert:first-child {
    margin-top: 20px;
}

/* Alert headings */
.alert h4 {
    margin-top: 0;
    color: inherit;
}

/* Alert sequential paragraphs */
.alert > p + p,
.alert > p + ul,
.alert > ul + p {
    margin-top: 5px;
}

/* Alert last children — no bottom margin */
.alert > p:last-child,
.alert > dl:last-child {
    margin-bottom: 0;
}

/* Alert links */
.alert a:not(.btn) {
    color: inherit;
    text-decoration: underline;
}

/* Alert dismiss buttons */
.alert-dismissable .close,
.alert-dismissible .close {
    color: inherit;
    opacity: 0.7;
}

.alert-dismissable .close:hover,
.alert-dismissible .close:hover {
    opacity: 1;
}

/* === Color Variants — M3 colors === */

.alert-success {
    background-color: #C8E6C9;
    color: #1B5E20;
    border-color: #4CAF50;
}
.alert-success::before {
    background-color: #4CAF50;
}

.alert-info,
.alert-legal {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-color: var(--md-sys-color-primary);
}
.alert-info::before,
.alert-legal::before {
    background-color: var(--md-sys-color-primary);
}

/* Hide the license compliance banner from pretixcontrol/base.html.
   The banner has a single <a> child; the license page content has <p> children. */
.alert-legal:has(> a:only-child) {
    display: none !important;
}

.alert-warning {
    background-color: var(--md-sys-color-warning-container);
    color: var(--md-sys-color-on-warning-container);
    border-color: var(--md-sys-color-warning);
}
.alert-warning::before {
    background-color: var(--md-sys-color-warning);
}

.alert-danger {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    border-color: var(--md-sys-color-error);
}
.alert-danger::before {
    background-color: var(--md-sys-color-error);
}

/* Alert buttons — keep default styling, just ensure proper spacing */
.alert .btn {
    margin-top: 8px;
}

/* -------------------------------------------------------------------------
   8.7 Badges / Labels — M3 Badge
   ------------------------------------------------------------------------- */

.badge,
.label {
    font-family: var(--md-sys-typescale-label-small-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-label-small-size);
    font-weight: var(--md-sys-typescale-label-small-weight);
    letter-spacing: var(--md-sys-typescale-label-small-tracking);
    line-height: var(--md-sys-typescale-label-small-line-height);
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-radius: var(--md-sys-shape-small);
    padding: 4px 8px;
    display: inline-block;
    vertical-align: baseline;
}

.label-default,
.badge-default {
    background-color: var(--md-sys-color-secondary);
    color: var(--md-sys-color-on-secondary);
}

.label-primary,
.badge-primary {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.label-success,
.badge-success {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.label-danger,
.badge-danger {
    background-color: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
}

.label-warning,
.badge-warning {
    background-color: var(--md-sys-color-warning);
    color: var(--md-sys-color-on-warning);
}

.label-info,
.badge-info {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

/* Pretix core status badges — override for M3 contrast compliance */
.status-warning {
    color: var(--md-sys-color-on-warning-container);
}

/* -------------------------------------------------------------------------
   8.8 Modals — M3 Dialog
   ------------------------------------------------------------------------- */

.modal-content {
    background-color: var(--md-sys-color-surface-container-high);
    border: none;
    border-radius: var(--md-sys-shape-extra-large);
    box-shadow: var(--md-sys-elevation-3);
}

.modal-header {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    padding: 24px 24px 16px;
}

.modal-title {
    font-family: var(--md-sys-typescale-title-large-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-title-large-size);
    font-weight: var(--md-sys-typescale-title-large-weight);
    letter-spacing: var(--md-sys-typescale-title-large-tracking);
    line-height: var(--md-sys-typescale-title-large-line-height);
    color: var(--md-sys-color-on-surface);
}

.modal-body {
    padding: 16px 24px;
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-body-large-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-body-large-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
}

.modal-footer {
    border-top: 1px solid var(--md-sys-color-outline-variant);
    padding: 16px 24px;
}

.modal-backdrop {
    background-color: var(--md-sys-color-scrim);
}

/* -------------------------------------------------------------------------
   8.9 Pagination — M3 outline buttons
   ------------------------------------------------------------------------- */

.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 16px 0;
    gap: 4px;
}

.pagination > li > a,
.pagination > li > span {
    font-family: var(--md-sys-typescale-label-large-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
    color: var(--md-sys-color-primary);
    background-color: transparent;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-medium);
    padding: 8px 16px;
    margin-inline-start: 0;
    transition:
        background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.pagination > li > a:hover,
.pagination > li > span:hover {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-color: var(--md-sys-color-primary);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-color: var(--md-sys-color-primary);
}

.pagination > .disabled > span,
.pagination > .disabled > a,
.pagination > .disabled > a:hover {
    background-color: transparent;
    color: var(--md-sys-color-on-surface);
    opacity: var(--md-sys-state-disabled-opacity);
    border-color: var(--md-sys-color-outline);
}

/* -------------------------------------------------------------------------
   8.10 Progress Bars — M3 Linear Progress Indicator
   ------------------------------------------------------------------------- */

.progress {
    background-color: var(--md-sys-color-surface-container-highest);
    border-radius: var(--md-sys-shape-full);
    height: 4px;
    box-shadow: none;
    overflow: hidden;
    margin-bottom: 16px;
}

.progress-bar {
    background-color: var(--md-sys-color-primary);
    box-shadow: none;
    transition: width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.progress-bar-success {
    background-color: var(--md-sys-color-primary);
}

.progress-bar-warning {
    background-color: var(--md-sys-color-warning);
}

.progress-bar-danger {
    background-color: var(--md-sys-color-error);
}

.progress-striped .progress-bar {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 40px 40px;
}

/* -------------------------------------------------------------------------
   8.11 Dropdown Menus — M3 Menu
   ------------------------------------------------------------------------- */

.dropdown-menu {
    background-color: var(--md-sys-color-surface);
    border: none;
    border-radius: var(--md-sys-shape-medium);
    box-shadow: var(--md-sys-elevation-2);
    padding: 8px 0;
    margin: 4px 0 0;
    min-width: 200px;
}

.dropdown-menu > li > a {
    font-family: var(--md-sys-typescale-body-large-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-body-large-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
    color: var(--md-sys-color-on-surface);
    padding: 12px 24px;
    transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    border-radius: 0;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover {
    color: var(--md-sys-color-on-surface);
    opacity: var(--md-sys-state-disabled-opacity);
}

.dropdown-menu .divider {
    background-color: var(--md-sys-color-outline-variant);
    margin: 4px 0;
}

.dropdown-header {
    font-family: var(--md-sys-typescale-label-large-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
    color: var(--md-sys-color-on-surface-variant);
    padding: 12px 24px 4px;
}

/* Dropdown menus inside sidebar — dark text on white bg */
.navbar-default.sidebar .dropdown-menu {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

.navbar-default.sidebar .dropdown-menu > li > a {
    color: var(--md-sys-color-on-surface);
}

.navbar-default.sidebar .dropdown-menu > li > a:hover,
.navbar-default.sidebar .dropdown-menu > li > a:focus {
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

.navbar-default.sidebar .dropdown-menu > li > a .fa,
.navbar-default.sidebar .dropdown-menu > li > a .pw-icon,
.navbar-default.sidebar .dropdown-menu > li > a .glyphicon {
    color: var(--md-sys-color-on-surface-variant);
}

.navbar-default.sidebar .dropdown-menu > li > a:hover .fa,
.navbar-default.sidebar .dropdown-menu > li > a:hover .pw-icon,
.navbar-default.sidebar .dropdown-menu > li > a:hover .glyphicon {
    color: var(--md-sys-color-on-surface);
}

.navbar-default.sidebar .dropdown-menu .form-control {
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-surface-container);
    border-color: var(--md-sys-color-outline);
}

.navbar-default.sidebar .dropdown-menu .dropdown-header {
    color: var(--md-sys-color-on-surface-variant);
}

.navbar-default.sidebar .dropdown-menu .divider {
    background-color: var(--md-sys-color-outline-variant);
}

/* Dropdown caret */
.caret {
    border-top-color: var(--md-sys-color-on-surface-variant);
}

/* -------------------------------------------------------------------------
   8.12 Tabs — M3 Tab styling
   ------------------------------------------------------------------------- */

.nav-tabs {
    border-bottom: 2px solid var(--md-sys-color-outline-variant);
}

.nav-tabs > li > a {
    font-family: var(--md-sys-typescale-label-large-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
    color: var(--md-sys-color-on-surface-variant);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 12px 24px;
    margin-bottom: -2px;
    transition:
        color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.nav-tabs > li > a:hover {
    color: var(--md-sys-color-on-surface);
    background-color: transparent;
    border-bottom-color: var(--md-sys-color-outline);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--md-sys-color-primary);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--md-sys-color-primary);
}

.nav-tabs.nav-justified > li > a {
    border-radius: 0;
}

@media (max-width: 767px) {
    .nav-tabs {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .nav-tabs > li {
        float: none;
    }

    .nav-tabs > li > a {
        white-space: nowrap;
    }
}

/* Nav pills — M3 segmented button style */
.nav-pills > li > a {
    font-family: var(--md-sys-typescale-label-large-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    color: var(--md-sys-color-on-surface-variant);
    background-color: transparent;
    border-radius: var(--md-sys-shape-full);
    padding: 8px 24px;
    border: 1px solid transparent;
    transition:
        background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.nav-pills > li > a:hover {
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

/* -------------------------------------------------------------------------
   8.13 Additional Bootstrap Components
   ------------------------------------------------------------------------- */

/* Well — M3 surface container */
.well {
    background-color: var(--md-sys-color-surface-container);
    border: none;
    border-radius: var(--md-sys-shape-medium);
    box-shadow: var(--md-sys-elevation-0);
    color: var(--md-sys-color-on-surface);
    min-height: 20px;
    padding: 20px;
    margin-bottom: 20px;
}

.well-lg {
    border-radius: var(--md-sys-shape-large);
    padding: 24px;
}

.well-sm {
    border-radius: var(--md-sys-shape-small);
    padding: 9px;
}

/* Jumbotron — M3 hero area */
.jumbotron {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-radius: var(--md-sys-shape-large);
    padding: 48px;
    margin-bottom: 30px;
}

.jumbotron h1 {
    font-family: var(--md-sys-typescale-display-medium-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-display-medium-size);
    font-weight: var(--md-sys-typescale-display-medium-weight);
    line-height: var(--md-sys-typescale-display-medium-line-height);
    letter-spacing: var(--md-sys-typescale-display-medium-tracking);
    color: var(--md-sys-color-on-primary-container);
}

/* Thumbnails */
.thumbnail {
    background-color: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    box-shadow: var(--md-sys-elevation-1);
    padding: 4px;
    transition: box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.thumbnail:hover {
    box-shadow: var(--md-sys-elevation-2);
}

/* List groups */
.list-group-item {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    padding: 12px 16px;
}

.list-group-item:first-child {
    border-radius: var(--md-sys-shape-medium) var(--md-sys-shape-medium) 0 0;
}

.list-group-item:last-child {
    border-radius: 0 0 var(--md-sys-shape-medium) var(--md-sys-shape-medium);
}

.list-group-item.active,
.list-group-item.active:hover {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-color: var(--md-sys-color-primary-container);
}

.list-group-item:hover {
    background-color: var(--md-sys-color-surface-container-low);
}

/* Page header */
.page-header {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    margin: 40px 0 20px;
    padding-bottom: 9px;
}

.page-header h1 {
    font-family: var(--md-sys-typescale-headline-medium-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-headline-medium-size);
    font-weight: 600;
    line-height: var(--md-sys-typescale-headline-medium-line-height);
    letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
    color: var(--md-sys-color-on-surface);
}

/* Tooltip */
.tooltip-inner {
    background-color: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    font-family: var(--md-sys-typescale-body-small-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-body-small-size);
    line-height: var(--md-sys-typescale-body-small-line-height);
    border-radius: var(--md-sys-shape-extra-small);
    padding: 6px 12px;
}

.tooltip.top .tooltip-arrow {
    border-top-color: var(--md-sys-color-inverse-surface);
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--md-sys-color-inverse-surface);
}

.tooltip.left .tooltip-arrow {
    border-left-color: var(--md-sys-color-inverse-surface);
}

.tooltip.right .tooltip-arrow {
    border-right-color: var(--md-sys-color-inverse-surface);
}

/* Popover */
.popover {
    background-color: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    box-shadow: var(--md-sys-elevation-2);
}

.popover-title {
    background-color: var(--md-sys-color-surface-container-high);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium) var(--md-sys-shape-medium) 0 0;
    font-family: var(--md-sys-typescale-title-medium-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-title-medium-size);
    font-weight: var(--md-sys-typescale-title-medium-weight);
    color: var(--md-sys-color-on-surface);
}

.popover-content {
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-body-medium-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-body-medium-size);
    line-height: var(--md-sys-typescale-body-medium-line-height);
}

/* Breadcrumb */
.breadcrumb {
    background-color: transparent;
    border-radius: var(--md-sys-shape-extra-small);
    padding: 8px 0;
    font-family: var(--md-sys-typescale-label-medium-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-label-medium-size);
    letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}

.breadcrumb > li + li::before {
    color: var(--md-sys-color-on-surface-variant);
    content: "/ ";
}

.breadcrumb > .active {
    color: var(--md-sys-color-on-surface-variant);
}

/* Code / Pre */
code {
    background-color: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
    border-radius: var(--md-sys-shape-extra-small);
    padding: 2px 4px;
    font-size: 90%;
}

pre {
    background-color: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-small);
    color: var(--md-sys-color-on-surface);
    padding: 16px;
}

/* Blockquote */
blockquote {
    border-inline-start: 4px solid var(--md-sys-color-primary);
    color: var(--md-sys-color-on-surface-variant);
    padding-inline-start: 16px;
    margin: 0 0 20px;
}

blockquote small,
blockquote .small {
    color: var(--md-sys-color-on-surface-variant);
}

/* Horizontal rule */
hr {
    border-top: 1px solid var(--md-sys-color-outline-variant);
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Close button */
.close {
    color: var(--md-sys-color-on-surface-variant);
    text-shadow: none;
    opacity: 0.6;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
}

.close:hover {
    color: var(--md-sys-color-on-surface);
    opacity: 1;
}

/* SB Admin 2 sidebar — blue background, white text.
   IMPORTANT: Keep SB Admin 2's positioning (position: absolute, margin-top: 56px).
   Do NOT use position: fixed — SB Admin 2's JS manages sidebar toggle. */
.navbar-default.sidebar .sidebar-nav.navbar-collapse {
    padding-left: 0;
    padding-right: 0;
}

.navbar-default.sidebar .sidebar-nav ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar-default.sidebar .sidebar-nav ul li a.active {
    background-color: rgba(255, 255, 255, 0.15);
}

.navbar-default.sidebar .sidebar-brand,
.navbar-default.sidebar .navbar-brand {
    color: var(--md-sys-color-on-primary);
    font-family: var(--md-sys-typescale-title-medium-font), var(--pretix-font-family-sans-serif);
    padding: 16px 20px;
}

.navbar-default.sidebar .sidebar-toggle,
.navbar-default.sidebar .navbar-toggle {
    color: var(--md-sys-color-on-primary);
    border-color: rgba(255, 255, 255, 0.3);
}

.navbar-default.sidebar .sidebar-toggle:hover,
.navbar-default.sidebar .navbar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.navbar-default.sidebar .sidebar-nav .nav-second-level li a .fa,
.navbar-default.sidebar .sidebar-nav .nav-second-level li a .pw-icon,
.navbar-default.sidebar .sidebar-nav .nav-third-level li a .fa,
.navbar-default.sidebar .sidebar-nav .nav-third-level li a .pw-icon {
    color: rgba(255, 255, 255, 0.87);
}

/* Content area — align padding to 4px grid */
#page-wrapper {
    padding: 0 32px;
    min-height: calc(100vh - 56px);
}


/* ==========================================================================
   9. Utility Classes
   ========================================================================== */

/* M3 surface tints — for applying surface color variations */
.m3-surface {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

.m3-surface-container {
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

.m3-surface-container-high {
    background-color: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

.m3-surface-container-highest {
    background-color: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
}

.m3-surface-container-low {
    background-color: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
}

.m3-surface-container-lowest {
    background-color: var(--md-sys-color-surface-container-lowest);
    color: var(--md-sys-color-on-surface);
}

/* M3 elevation utilities */
.m3-elevation-0 { box-shadow: var(--md-sys-elevation-0); }
.m3-elevation-1 { box-shadow: var(--md-sys-elevation-1); }
.m3-elevation-2 { box-shadow: var(--md-sys-elevation-2); }
.m3-elevation-3 { box-shadow: var(--md-sys-elevation-3); }
.m3-elevation-4 { box-shadow: var(--md-sys-elevation-4); }
.m3-elevation-5 { box-shadow: var(--md-sys-elevation-5); }

/* M3 shape utilities */
.m3-shape-none { border-radius: var(--md-sys-shape-none); }
.m3-shape-xs { border-radius: var(--md-sys-shape-extra-small); }
.m3-shape-sm { border-radius: var(--md-sys-shape-small); }
.m3-shape-md { border-radius: var(--md-sys-shape-medium); }
.m3-shape-lg { border-radius: var(--md-sys-shape-large); }
.m3-shape-xl { border-radius: var(--md-sys-shape-extra-large); }
.m3-shape-full { border-radius: var(--md-sys-shape-full); }

/* M3 color text utilities */
.m3-text-primary { color: var(--md-sys-color-primary); }
.m3-text-on-primary { color: var(--md-sys-color-on-primary); }
.m3-text-secondary { color: var(--md-sys-color-secondary); }
.m3-text-tertiary { color: var(--md-sys-color-tertiary); }
.m3-text-error { color: var(--md-sys-color-error); }
.m3-text-on-surface { color: var(--md-sys-color-on-surface); }
.m3-text-on-surface-variant { color: var(--md-sys-color-on-surface-variant); }
.m3-text-outline { color: var(--md-sys-color-outline); }

/* M3 typography utilities */
.m3-display-large {
    font-family: var(--md-sys-typescale-display-large-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-display-large-size);
    font-weight: var(--md-sys-typescale-display-large-weight);
    line-height: var(--md-sys-typescale-display-large-line-height);
    letter-spacing: var(--md-sys-typescale-display-large-tracking);
}

.m3-display-medium {
    font-family: var(--md-sys-typescale-display-medium-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-display-medium-size);
    font-weight: var(--md-sys-typescale-display-medium-weight);
    line-height: var(--md-sys-typescale-display-medium-line-height);
    letter-spacing: var(--md-sys-typescale-display-medium-tracking);
}

.m3-display-small {
    font-family: var(--md-sys-typescale-display-small-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-display-small-size);
    font-weight: var(--md-sys-typescale-display-small-weight);
    line-height: var(--md-sys-typescale-display-small-line-height);
    letter-spacing: var(--md-sys-typescale-display-small-tracking);
}

.m3-headline-large {
    font-family: var(--md-sys-typescale-headline-large-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-headline-large-size);
    font-weight: var(--md-sys-typescale-headline-large-weight);
    line-height: var(--md-sys-typescale-headline-large-line-height);
    letter-spacing: var(--md-sys-typescale-headline-large-tracking);
}

.m3-headline-medium {
    font-family: var(--md-sys-typescale-headline-medium-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-headline-medium-size);
    font-weight: var(--md-sys-typescale-headline-medium-weight);
    line-height: var(--md-sys-typescale-headline-medium-line-height);
    letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
}

.m3-headline-small {
    font-family: var(--md-sys-typescale-headline-small-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-headline-small-size);
    font-weight: var(--md-sys-typescale-headline-small-weight);
    line-height: var(--md-sys-typescale-headline-small-line-height);
    letter-spacing: var(--md-sys-typescale-headline-small-tracking);
}

.m3-title-large {
    font-family: var(--md-sys-typescale-title-large-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-title-large-size);
    font-weight: var(--md-sys-typescale-title-large-weight);
    line-height: var(--md-sys-typescale-title-large-line-height);
    letter-spacing: var(--md-sys-typescale-title-large-tracking);
}

.m3-title-medium {
    font-family: var(--md-sys-typescale-title-medium-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-title-medium-size);
    font-weight: var(--md-sys-typescale-title-medium-weight);
    line-height: var(--md-sys-typescale-title-medium-line-height);
    letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}

.m3-title-small {
    font-family: var(--md-sys-typescale-title-small-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-title-small-size);
    font-weight: var(--md-sys-typescale-title-small-weight);
    line-height: var(--md-sys-typescale-title-small-line-height);
    letter-spacing: var(--md-sys-typescale-title-small-tracking);
}

.m3-body-large {
    font-family: var(--md-sys-typescale-body-large-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-body-large-size);
    font-weight: var(--md-sys-typescale-body-large-weight);
    line-height: var(--md-sys-typescale-body-large-line-height);
    letter-spacing: var(--md-sys-typescale-body-large-tracking);
}

.m3-body-medium {
    font-family: var(--md-sys-typescale-body-medium-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-body-medium-size);
    font-weight: var(--md-sys-typescale-body-medium-weight);
    line-height: var(--md-sys-typescale-body-medium-line-height);
    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

.m3-body-small {
    font-family: var(--md-sys-typescale-body-small-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-body-small-size);
    font-weight: var(--md-sys-typescale-body-small-weight);
    line-height: var(--md-sys-typescale-body-small-line-height);
    letter-spacing: var(--md-sys-typescale-body-small-tracking);
}

.m3-label-large {
    font-family: var(--md-sys-typescale-label-large-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    line-height: var(--md-sys-typescale-label-large-line-height);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
}

.m3-label-medium {
    font-family: var(--md-sys-typescale-label-medium-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-label-medium-size);
    font-weight: var(--md-sys-typescale-label-medium-weight);
    line-height: var(--md-sys-typescale-label-medium-line-height);
    letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}

.m3-label-small {
    font-family: var(--md-sys-typescale-label-small-font), var(--pretix-font-family-sans-serif);
    font-size: var(--md-sys-typescale-label-small-size);
    font-weight: var(--md-sys-typescale-label-small-weight);
    line-height: var(--md-sys-typescale-label-small-line-height);
    letter-spacing: var(--md-sys-typescale-label-small-tracking);
}


/* ==========================================================================
   10. RTL Adjustments

   Targets both [dir="rtl"] (HTML attribute) and .rtl (pretix body class).
   Uses logical properties (inline/block) where possible.
   ========================================================================== */

[dir="rtl"] .table > thead > tr > th,
[dir="rtl"] .table > tbody > tr > td,
[dir="rtl"] .table > tfoot > tr > td,
[dir="rtl"] .dropdown-menu > li > a,
[dir="rtl"] .nav-tabs > li > a,
[dir="rtl"] .pagination > li > a {
    text-align: start;
}

[dir="rtl"] .navbar-brand,
.rtl .navbar-brand {
    float: right;
}

[dir="rtl"] .navbar-nav,
.rtl .navbar-nav {
    float: right;
}

[dir="rtl"] .navbar-right,
.rtl .navbar-right {
    float: left;
}

[dir="rtl"] .navbar-left,
.rtl .navbar-left {
    float: right;
}

/* Breadcrumb separator in RTL */
[dir="rtl"] .breadcrumb > li + li::before,
.rtl .breadcrumb > li + li::before {
    content: "\\ ";
}

/* Blockquote in RTL */
[dir="rtl"] blockquote,
.rtl blockquote {
    border-inline-start: 4px solid var(--md-sys-color-primary);
    border-inline-end: none;
    padding-inline-start: 16px;
    padding-inline-end: 0;
}

/* Select dropdown arrow in RTL */
[dir="rtl"] select.form-control,
.rtl select.form-control {
    background-position: left 12px center;
    padding-inline-start: 40px;
    padding-inline-end: 16px;
}

/* Tabs in RTL */
[dir="rtl"] .nav-tabs,
.rtl .nav-tabs {
    direction: rtl;
}

/* Pagination in RTL */
[dir="rtl"] .pagination > li > a,
[dir="rtl"] .pagination > li > span {
    margin-inline-end: 0;
}

/* Input group addon in RTL */
[dir="rtl"] .input-group .input-group-addon:first-child {
    border-radius: 0 var(--md-sys-shape-extra-small) var(--md-sys-shape-extra-small) 0;
}

[dir="rtl"] .input-group .input-group-addon:last-child {
    border-radius: var(--md-sys-shape-extra-small) 0 0 var(--md-sys-shape-extra-small);
}

/* Close button in RTL */
[dir="rtl"] .close,
.rtl .close {
    float: left;
}

/* Pull utilities in RTL */
[dir="rtl"] .pull-left,
.rtl .pull-left {
    float: right;
}

[dir="rtl"] .pull-right,
.rtl .pull-right {
    float: left;
}

/* Sidebar in RTL */
[dir="rtl"] .sidebar,
.rtl .sidebar {
    border-inline-end: 1px solid var(--md-sys-color-outline-variant);
    border-inline-start: none;
}


/* ==========================================================================
   11. Reduced Motion

   Disables all animations and transitions for users who prefer reduced motion.
   This is the ONLY place where !important is used in this file, as required by
   the prefers-reduced-motion media query to override all other transition values.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   12. MD3 Ripple Effect

   Animated ripple on click for interactive elements. The JS adds a
   .md-ripple <span> with inline width/height/left/top (computed from
   click position). The CSS handles the visual animation.
   ========================================================================== */

.md-ripple-host {
    position: relative;
    overflow: hidden;
}

.md-ripple {
    position: absolute;
    border-radius: 50%;
    background: var(--md-sys-color-secondary-container, rgba(0, 0, 0, 0.12));
    transform: scale(0);
    animation: md-ripple-expand 600ms ease-out forwards;
    pointer-events: none;
}

@keyframes md-ripple-expand {
    to {
        transform: scale(4);
        opacity: 0;
    }
}


/* ==========================================================================
   13. M3 State Layers (hover / focus overlays)

   The JS (theme.js) sets data-md-hovered and data-md-focused attributes on
   STATE_SELECTOR targets (.panel-heading, .dropdown-menu > li > a, .nav > li > a).
   These CSS rules render the translucent overlay per M3 spec.
   ========================================================================== */

/* State layer overlay — base */
[data-md-hovered]::before,
[data-md-focused]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

[data-md-hovered]::before {
    background: var(--md-sys-state-hover-state-layer-color);
    opacity: var(--md-sys-state-hover-opacity);
}

[data-md-focused]::before {
    background: var(--md-sys-state-focus-state-layer-color);
    opacity: var(--md-sys-state-focus-opacity);
}

/* Ensure state layer targets have position:relative for overlay positioning */
.nav > li > a {
    position: relative;
}

.dropdown-menu > li > a {
    position: relative;
}

/* Panel-heading already has border-radius but needs explicit position:relative
   for the state layer overlay (it inherits from .panel which may be static) */
.panel-heading {
    position: relative;
}

:focus-visible {
    transition: outline-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    outline-offset: 2px;
}


/* ==========================================================================
   14. Responsive Breakpoints
   ========================================================================== */

/* Collapse sidebar at tablet (991px and below) — SB Admin 2 toggle handles show/hide */
@media (max-width: 991px) {
    .navbar-default.sidebar {
        display: none;
    }

    #page-wrapper {
        margin-left: 0 !important;
    }
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--md-sys-color-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-outline);
}

/* Statistics charts — override hardcoded pretix purple in Morris.js SVGs.
   Broad selectors catch all purple-range fills/strokes regardless of element type (path, rect, circle). */
.chart svg *[fill="#3b1c4a"],
.chart svg *[fill="rgb(59, 28, 74)"] {
    fill: var(--md-sys-color-primary) !important;
}

.chart svg *[stroke="#3b1c4a"],
.chart svg *[stroke="rgb(59, 28, 74)"] {
    stroke: var(--md-sys-color-primary) !important;
}

.chart svg *[fill="#452456"],
.chart svg *[fill="rgb(69, 36, 86)"] {
    fill: #42A5F5 !important;
}

.chart svg *[fill="#472a55"],
.chart svg *[fill="rgb(71, 42, 85)"] {
    fill: #42A5F5 !important;
}

.chart svg *[stroke="#50a167"],
.chart svg *[stroke="rgb(80, 161, 103)"] {
    stroke: #26A69A !important;
}

.chart svg *[fill="#50a167"],
.chart svg *[fill="rgb(80, 161, 103)"] {
    fill: #26A69A !important;
}

.chart svg *[fill="#6fb182"],
.chart svg *[fill="rgb(111, 177, 130)"] {
    fill: #80CBC4 !important;
}


/* ==========================================================================
   END — ShamTicketz M3 Theme
   ========================================================================== */