/**
 * Wireframe UI Framework
 * Base Styles - Core variables, reset, typography, and grid system
 */

/*   CSS RESET   */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

:root {
    /* Colors - Monochromatic with accent colors */
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #242424;
    --color-bg-tertiary: #2a2a2a;
    --color-border-primary: #404040;
    --color-border-secondary: #505050;
    --color-border-active: #606060;
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #a0a0a0;
    --color-text-tertiary: #808080;
    --color-text-inverse: #1a1a1a;
    /* Accent colors - selective highlights */
    --color-accent-blue: #4a9eff;
    --color-accent-green: #4ade80;
    --color-accent-orange: #fb923c;
    --color-accent-red: #f87171;
    --color-accent-purple: #a78bfa;
    --color-accent-yellow: #fbbf24;
    /* Semantic colors */
    --color-success: var(--color-accent-green);
    --color-warning: var(--color-accent-yellow);
    --color-error: var(--color-accent-red);
    --color-info: var(--color-accent-blue);
    /* Typography */
    --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace;
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    /* Spacing */
    --spacing-xs: 0.25rem; /* 4px */
    --spacing-sm: 0.5rem; /* 8px */
    --spacing-md: 1rem; /* 16px */
    --spacing-lg: 1.5rem; /* 24px */
    --spacing-xl: 2rem; /* 32px */
    --spacing-2xl: 3rem; /* 48px */
    --spacing-3xl: 4rem; /* 64px */
    /* Border */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;
    --border-radius-none: 0;
    --border-radius-sm: 2px;
    --border-radius-md: 4px;
    --border-radius-lg: 6px;
    /* Transitions */
    --transition-fast: 100ms ease-in-out;
    --transition-normal: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;
    /* Z-index scale */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
}

/*   BASE STYLES   */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
}

/*   TYPOGRAPHY   */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

h1 {
    font-size: var(--font-size-4xl);
}

h2 {
    font-size: var(--font-size-3xl);
}

h3 {
    font-size: var(--font-size-2xl);
}

h4 {
    font-size: var(--font-size-xl);
}

h5 {
    font-size: var(--font-size-lg);
}

h6 {
    font-size: var(--font-size-base);
}

p {
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--color-accent-blue);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

strong, b {
    font-weight: var(--font-weight-bold);
}

em, i {
    font-style: italic;
}

code {
    font-family: var(--font-family-mono);
    font-size: 0.875em;
    padding: 0.125rem 0.25rem;
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-primary);
    color: var(--color-accent-orange);
}

pre {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    padding: var(--spacing-md);
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-primary);
    overflow-x: auto;
    margin-bottom: var(--spacing-md);
}

    pre code {
        padding: 0;
        background: none;
        border: none;
        color: var(--color-text-primary);
    }

blockquote {
    padding-left: var(--spacing-md);
    border-left: var(--border-width-thick) solid var(--color-border-primary);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

hr {
    border: none;
    border-top: var(--border-width-thin) solid var(--color-border-primary);
    margin: var(--spacing-xl) 0;
}

/*   LISTS   */
ul, ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-xl);
}

    ul ul, ul ol, ol ul, ol ol {
        margin-bottom: 0;
    }

li {
    margin-bottom: var(--spacing-xs);
}

/* Scrollbar Styling */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary) var(--color-bg-secondary);
}

/* WebKit Browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-md);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: var(--border-radius-md);
    border: 2px solid var(--color-bg-secondary); /* creates a gap effect */
    transition: background var(--transition-normal), border var(--transition-normal);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-border-active);
    }

    ::-webkit-scrollbar-thumb:active {
        background: var(--color-accent-blue);
        border-color: var(--color-bg-secondary);
    }


/*   GRID SYSTEM  */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.container-fluid {
    width: 100%;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* Standard row - uses flexbox with negative margins */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--spacing-md) * -1);
    margin-right: calc(var(--spacing-md) * -1);
}

    .row > * {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
        width: 100%;
    }

/* Row gap styles */
.row-gap-sm,
.row-gap-md,
.row-gap-lg,
.row-gap-xl {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: row;
    margin-left: 0;
    margin-right: 0;
}

.row-gap-sm {
    gap: var(--spacing-sm);
}

.row-gap-md {
    gap: var(--spacing-md);
}

.row-gap-lg {
    gap: var(--spacing-lg);
}

.row-gap-xl {
    gap: var(--spacing-xl);
}

    .row-gap-sm > *,
    .row-gap-md > *,
    .row-gap-lg > *,
    .row-gap-xl > * {
        padding-left: 0;
        padding-right: 0;
        width: auto;
        min-width: 0; /* Prevents grid blowout */
        grid-column: span 12; /* Default to full width - will be overridden by responsive classes */
    }

/* No gutters */
.row-no-gutters {
    margin-left: 0;
    margin-right: 0;
}

    .row-no-gutters > * {
        padding-left: 0;
        padding-right: 0;
    }

/* Grid columns - for standard flexbox rows */
.col {
    flex: 1 0 0%;
}

.col-1 {
    flex: 0 0 auto;
    width: 8.333333%;
}

.col-2 {
    flex: 0 0 auto;
    width: 16.666667%;
}

.col-3 {
    flex: 0 0 auto;
    width: 25%;
}

.col-4 {
    flex: 0 0 auto;
    width: 33.333333%;
}

.col-5 {
    flex: 0 0 auto;
    width: 41.666667%;
}

.col-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-7 {
    flex: 0 0 auto;
    width: 58.333333%;
}

.col-8 {
    flex: 0 0 auto;
    width: 66.666667%;
}

.col-9 {
    flex: 0 0 auto;
    width: 75%;
}

.col-10 {
    flex: 0 0 auto;
    width: 83.333333%;
}

.col-11 {
    flex: 0 0 auto;
    width: 91.666667%;
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

/* Grid columns - for CSS Grid gap rows */
.row-gap-sm > .col-1,
.row-gap-md > .col-1,
.row-gap-lg > .col-1,
.row-gap-xl > .col-1 {
    grid-column: span 1;
    width: auto;
}

.row-gap-sm > .col-2,
.row-gap-md > .col-2,
.row-gap-lg > .col-2,
.row-gap-xl > .col-2 {
    grid-column: span 2;
    width: auto;
}

.row-gap-sm > .col-3,
.row-gap-md > .col-3,
.row-gap-lg > .col-3,
.row-gap-xl > .col-3 {
    grid-column: span 3;
    width: auto;
}

.row-gap-sm > .col-4,
.row-gap-md > .col-4,
.row-gap-lg > .col-4,
.row-gap-xl > .col-4 {
    grid-column: span 4;
    width: auto;
}

.row-gap-sm > .col-5,
.row-gap-md > .col-5,
.row-gap-lg > .col-5,
.row-gap-xl > .col-5 {
    grid-column: span 5;
    width: auto;
}

.row-gap-sm > .col-6,
.row-gap-md > .col-6,
.row-gap-lg > .col-6,
.row-gap-xl > .col-6 {
    grid-column: span 6;
    width: auto;
}

.row-gap-sm > .col-7,
.row-gap-md > .col-7,
.row-gap-lg > .col-7,
.row-gap-xl > .col-7 {
    grid-column: span 7;
    width: auto;
}

.row-gap-sm > .col-8,
.row-gap-md > .col-8,
.row-gap-lg > .col-8,
.row-gap-xl > .col-8 {
    grid-column: span 8;
    width: auto;
}

.row-gap-sm > .col-9,
.row-gap-md > .col-9,
.row-gap-lg > .col-9,
.row-gap-xl > .col-9 {
    grid-column: span 9;
    width: auto;
}

.row-gap-sm > .col-10,
.row-gap-md > .col-10,
.row-gap-lg > .col-10,
.row-gap-xl > .col-10 {
    grid-column: span 10;
    width: auto;
}

.row-gap-sm > .col-11,
.row-gap-md > .col-11,
.row-gap-lg > .col-11,
.row-gap-xl > .col-11 {
    grid-column: span 11;
    width: auto;
}

.row-gap-sm > .col-12,
.row-gap-md > .col-12,
.row-gap-lg > .col-12,
.row-gap-xl > .col-12 {
    grid-column: span 12;
    width: auto;
}

/* Dynamic column for gap rows */
.row-gap-sm > .col,
.row-gap-md > .col,
.row-gap-lg > .col,
.row-gap-xl > .col {
    grid-column: span 1;
    width: auto;
}

/* Responsive column classes */
@media (min-width: 576px) {
    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.333333%;
    }

    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.666667%;
    }

    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.666667%;
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.333333%;
    }

    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }

    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.333333%;
    }

    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.666667%;
    }

    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    /* CSS Grid span for gap rows */
    .row-gap-sm > .col-sm-1, .row-gap-md > .col-sm-1, .row-gap-lg > .col-sm-1, .row-gap-xl > .col-sm-1 {
        grid-column: span 1;
        width: auto;
    }

    .row-gap-sm > .col-sm-2, .row-gap-md > .col-sm-2, .row-gap-lg > .col-sm-2, .row-gap-xl > .col-sm-2 {
        grid-column: span 2;
        width: auto;
    }

    .row-gap-sm > .col-sm-3, .row-gap-md > .col-sm-3, .row-gap-lg > .col-sm-3, .row-gap-xl > .col-sm-3 {
        grid-column: span 3;
        width: auto;
    }

    .row-gap-sm > .col-sm-4, .row-gap-md > .col-sm-4, .row-gap-lg > .col-sm-4, .row-gap-xl > .col-sm-4 {
        grid-column: span 4;
        width: auto;
    }

    .row-gap-sm > .col-sm-5, .row-gap-md > .col-sm-5, .row-gap-lg > .col-sm-5, .row-gap-xl > .col-sm-5 {
        grid-column: span 5;
        width: auto;
    }

    .row-gap-sm > .col-sm-6, .row-gap-md > .col-sm-6, .row-gap-lg > .col-sm-6, .row-gap-xl > .col-sm-6 {
        grid-column: span 6;
        width: auto;
    }

    .row-gap-sm > .col-sm-7, .row-gap-md > .col-sm-7, .row-gap-lg > .col-sm-7, .row-gap-xl > .col-sm-7 {
        grid-column: span 7;
        width: auto;
    }

    .row-gap-sm > .col-sm-8, .row-gap-md > .col-sm-8, .row-gap-lg > .col-sm-8, .row-gap-xl > .col-sm-8 {
        grid-column: span 8;
        width: auto;
    }

    .row-gap-sm > .col-sm-9, .row-gap-md > .col-sm-9, .row-gap-lg > .col-sm-9, .row-gap-xl > .col-sm-9 {
        grid-column: span 9;
        width: auto;
    }

    .row-gap-sm > .col-sm-10, .row-gap-md > .col-sm-10, .row-gap-lg > .col-sm-10, .row-gap-xl > .col-sm-10 {
        grid-column: span 10;
        width: auto;
    }

    .row-gap-sm > .col-sm-11, .row-gap-md > .col-sm-11, .row-gap-lg > .col-sm-11, .row-gap-xl > .col-sm-11 {
        grid-column: span 11;
        width: auto;
    }

    .row-gap-sm > .col-sm-12, .row-gap-md > .col-sm-12, .row-gap-lg > .col-sm-12, .row-gap-xl > .col-sm-12 {
        grid-column: span 12;
        width: auto;
    }
}

@media (min-width: 768px) {
    .col-md-1 {
        flex: 0 0 auto;
        width: 8.333333%;
    }

    .col-md-2 {
        flex: 0 0 auto;
        width: 16.666667%;
    }

    .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .col-md-5 {
        flex: 0 0 auto;
        width: 41.666667%;
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-md-7 {
        flex: 0 0 auto;
        width: 58.333333%;
    }

    .col-md-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }

    .col-md-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-md-10 {
        flex: 0 0 auto;
        width: 83.333333%;
    }

    .col-md-11 {
        flex: 0 0 auto;
        width: 91.666667%;
    }

    .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    /* CSS Grid span for gap rows */
    .row-gap-sm > .col-md-1, .row-gap-md > .col-md-1, .row-gap-lg > .col-md-1, .row-gap-xl > .col-md-1 {
        grid-column: span 1;
        width: auto;
    }

    .row-gap-sm > .col-md-2, .row-gap-md > .col-md-2, .row-gap-lg > .col-md-2, .row-gap-xl > .col-md-2 {
        grid-column: span 2;
        width: auto;
    }

    .row-gap-sm > .col-md-3, .row-gap-md > .col-md-3, .row-gap-lg > .col-md-3, .row-gap-xl > .col-md-3 {
        grid-column: span 3;
        width: auto;
    }

    .row-gap-sm > .col-md-4, .row-gap-md > .col-md-4, .row-gap-lg > .col-md-4, .row-gap-xl > .col-md-4 {
        grid-column: span 4;
        width: auto;
    }

    .row-gap-sm > .col-md-5, .row-gap-md > .col-md-5, .row-gap-lg > .col-md-5, .row-gap-xl > .col-md-5 {
        grid-column: span 5;
        width: auto;
    }

    .row-gap-sm > .col-md-6, .row-gap-md > .col-md-6, .row-gap-lg > .col-md-6, .row-gap-xl > .col-md-6 {
        grid-column: span 6;
        width: auto;
    }

    .row-gap-sm > .col-md-7, .row-gap-md > .col-md-7, .row-gap-lg > .col-md-7, .row-gap-xl > .col-md-7 {
        grid-column: span 7;
        width: auto;
    }

    .row-gap-sm > .col-md-8, .row-gap-md > .col-md-8, .row-gap-lg > .col-md-8, .row-gap-xl > .col-md-8 {
        grid-column: span 8;
        width: auto;
    }

    .row-gap-sm > .col-md-9, .row-gap-md > .col-md-9, .row-gap-lg > .col-md-9, .row-gap-xl > .col-md-9 {
        grid-column: span 9;
        width: auto;
    }

    .row-gap-sm > .col-md-10, .row-gap-md > .col-md-10, .row-gap-lg > .col-md-10, .row-gap-xl > .col-md-10 {
        grid-column: span 10;
        width: auto;
    }

    .row-gap-sm > .col-md-11, .row-gap-md > .col-md-11, .row-gap-lg > .col-md-11, .row-gap-xl > .col-md-11 {
        grid-column: span 11;
        width: auto;
    }

    .row-gap-sm > .col-md-12, .row-gap-md > .col-md-12, .row-gap-lg > .col-md-12, .row-gap-xl > .col-md-12 {
        grid-column: span 12;
        width: auto;
    }
}

@media (min-width: 992px) {
    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.333333%;
    }

    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.666667%;
    }

    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.666667%;
    }

    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.333333%;
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }

    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.333333%;
    }

    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.666667%;
    }

    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    /* CSS Grid span for gap rows */
    .row-gap-sm > .col-lg-1, .row-gap-md > .col-lg-1, .row-gap-lg > .col-lg-1, .row-gap-xl > .col-lg-1 {
        grid-column: span 1;
        width: auto;
    }

    .row-gap-sm > .col-lg-2, .row-gap-md > .col-lg-2, .row-gap-lg > .col-lg-2, .row-gap-xl > .col-lg-2 {
        grid-column: span 2;
        width: auto;
    }

    .row-gap-sm > .col-lg-3, .row-gap-md > .col-lg-3, .row-gap-lg > .col-lg-3, .row-gap-xl > .col-lg-3 {
        grid-column: span 3;
        width: auto;
    }

    .row-gap-sm > .col-lg-4, .row-gap-md > .col-lg-4, .row-gap-lg > .col-lg-4, .row-gap-xl > .col-lg-4 {
        grid-column: span 4;
        width: auto;
    }

    .row-gap-sm > .col-lg-5, .row-gap-md > .col-lg-5, .row-gap-lg > .col-lg-5, .row-gap-xl > .col-lg-5 {
        grid-column: span 5;
        width: auto;
    }

    .row-gap-sm > .col-lg-6, .row-gap-md > .col-lg-6, .row-gap-lg > .col-lg-6, .row-gap-xl > .col-lg-6 {
        grid-column: span 6;
        width: auto;
    }

    .row-gap-sm > .col-lg-7, .row-gap-md > .col-lg-7, .row-gap-lg > .col-lg-7, .row-gap-xl > .col-lg-7 {
        grid-column: span 7;
        width: auto;
    }

    .row-gap-sm > .col-lg-8, .row-gap-md > .col-lg-8, .row-gap-lg > .col-lg-8, .row-gap-xl > .col-lg-8 {
        grid-column: span 8;
        width: auto;
    }

    .row-gap-sm > .col-lg-9, .row-gap-md > .col-lg-9, .row-gap-lg > .col-lg-9, .row-gap-xl > .col-lg-9 {
        grid-column: span 9;
        width: auto;
    }

    .row-gap-sm > .col-lg-10, .row-gap-md > .col-lg-10, .row-gap-lg > .col-lg-10, .row-gap-xl > .col-lg-10 {
        grid-column: span 10;
        width: auto;
    }

    .row-gap-sm > .col-lg-11, .row-gap-md > .col-lg-11, .row-gap-lg > .col-lg-11, .row-gap-xl > .col-lg-11 {
        grid-column: span 11;
        width: auto;
    }

    .row-gap-sm > .col-lg-12, .row-gap-md > .col-lg-12, .row-gap-lg > .col-lg-12, .row-gap-xl > .col-lg-12 {
        grid-column: span 12;
        width: auto;
    }
}

@media (min-width: 1200px) {
    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.333333%;
    }

    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.666667%;
    }

    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.666667%;
    }

    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.333333%;
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }

    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.333333%;
    }

    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.666667%;
    }

    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    /* CSS Grid span for gap rows */
    .row-gap-sm > .col-xl-1, .row-gap-md > .col-xl-1, .row-gap-lg > .col-xl-1, .row-gap-xl > .col-xl-1 {
        grid-column: span 1;
        width: auto;
    }

    .row-gap-sm > .col-xl-2, .row-gap-md > .col-xl-2, .row-gap-lg > .col-xl-2, .row-gap-xl > .col-xl-2 {
        grid-column: span 2;
        width: auto;
    }

    .row-gap-sm > .col-xl-3, .row-gap-md > .col-xl-3, .row-gap-lg > .col-xl-3, .row-gap-xl > .col-xl-3 {
        grid-column: span 3;
        width: auto;
    }

    .row-gap-sm > .col-xl-4, .row-gap-md > .col-xl-4, .row-gap-lg > .col-xl-4, .row-gap-xl > .col-xl-4 {
        grid-column: span 4;
        width: auto;
    }

    .row-gap-sm > .col-xl-5, .row-gap-md > .col-xl-5, .row-gap-lg > .col-xl-5, .row-gap-xl > .col-xl-5 {
        grid-column: span 5;
        width: auto;
    }

    .row-gap-sm > .col-xl-6, .row-gap-md > .col-xl-6, .row-gap-lg > .col-xl-6, .row-gap-xl > .col-xl-6 {
        grid-column: span 6;
        width: auto;
    }

    .row-gap-sm > .col-xl-7, .row-gap-md > .col-xl-7, .row-gap-lg > .col-xl-7, .row-gap-xl > .col-xl-7 {
        grid-column: span 7;
        width: auto;
    }

    .row-gap-sm > .col-xl-8, .row-gap-md > .col-xl-8, .row-gap-lg > .col-xl-8, .row-gap-xl > .col-xl-8 {
        grid-column: span 8;
        width: auto;
    }

    .row-gap-sm > .col-xl-9, .row-gap-md > .col-xl-9, .row-gap-lg > .col-xl-9, .row-gap-xl > .col-xl-9 {
        grid-column: span 9;
        width: auto;
    }

    .row-gap-sm > .col-xl-10, .row-gap-md > .col-xl-10, .row-gap-lg > .col-xl-10, .row-gap-xl > .col-xl-10 {
        grid-column: span 10;
        width: auto;
    }

    .row-gap-sm > .col-xl-11, .row-gap-md > .col-xl-11, .row-gap-lg > .col-xl-11, .row-gap-xl > .col-xl-11 {
        grid-column: span 11;
        width: auto;
    }

    .row-gap-sm > .col-xl-12, .row-gap-md > .col-xl-12, .row-gap-lg > .col-xl-12, .row-gap-xl > .col-xl-12 {
        grid-column: span 12;
        width: auto;
    }
}

@media (max-width: 575px) {
    .col-xs-1 {
        flex: 0 0 auto;
        width: 8.333333%;
    }

    .col-xs-2 {
        flex: 0 0 auto;
        width: 16.666667%;
    }

    .col-xs-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xs-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .col-xs-5 {
        flex: 0 0 auto;
        width: 41.666667%;
    }

    .col-xs-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xs-7 {
        flex: 0 0 auto;
        width: 58.333333%;
    }

    .col-xs-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }

    .col-xs-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xs-10 {
        flex: 0 0 auto;
        width: 83.333333%;
    }

    .col-xs-11 {
        flex: 0 0 auto;
        width: 91.666667%;
    }

    .col-xs-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .col-mobile-1 {
        flex: 0 0 auto;
        width: 8.333333%;
    }

    .col-mobile-2 {
        flex: 0 0 auto;
        width: 16.666667%;
    }

    .col-mobile-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-mobile-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .col-mobile-5 {
        flex: 0 0 auto;
        width: 41.666667%;
    }

    .col-mobile-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-mobile-7 {
        flex: 0 0 auto;
        width: 58.333333%;
    }

    .col-mobile-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }

    .col-mobile-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-mobile-10 {
        flex: 0 0 auto;
        width: 83.333333%;
    }

    .col-mobile-11 {
        flex: 0 0 auto;
        width: 91.666667%;
    }

    .col-mobile-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    /* CSS Grid span for gap rows */
    .row-gap-sm > .col-xs-1, .row-gap-md > .col-xs-1, .row-gap-lg > .col-xs-1, .row-gap-xl > .col-xs-1 {
        grid-column: span 1;
        width: auto;
    }

    .row-gap-sm > .col-xs-2, .row-gap-md > .col-xs-2, .row-gap-lg > .col-xs-2, .row-gap-xl > .col-xs-2 {
        grid-column: span 2;
        width: auto;
    }

    .row-gap-sm > .col-xs-3, .row-gap-md > .col-xs-3, .row-gap-lg > .col-xs-3, .row-gap-xl > .col-xs-3 {
        grid-column: span 3;
        width: auto;
    }

    .row-gap-sm > .col-xs-4, .row-gap-md > .col-xs-4, .row-gap-lg > .col-xs-4, .row-gap-xl > .col-xs-4 {
        grid-column: span 4;
        width: auto;
    }

    .row-gap-sm > .col-xs-5, .row-gap-md > .col-xs-5, .row-gap-lg > .col-xs-5, .row-gap-xl > .col-xs-5 {
        grid-column: span 5;
        width: auto;
    }

    .row-gap-sm > .col-xs-6, .row-gap-md > .col-xs-6, .row-gap-lg > .col-xs-6, .row-gap-xl > .col-xs-6 {
        grid-column: span 6;
        width: auto;
    }

    .row-gap-sm > .col-xs-7, .row-gap-md > .col-xs-7, .row-gap-lg > .col-xs-7, .row-gap-xl > .col-xs-7 {
        grid-column: span 7;
        width: auto;
    }

    .row-gap-sm > .col-xs-8, .row-gap-md > .col-xs-8, .row-gap-lg > .col-xs-8, .row-gap-xl > .col-xs-8 {
        grid-column: span 8;
        width: auto;
    }

    .row-gap-sm > .col-xs-9, .row-gap-md > .col-xs-9, .row-gap-lg > .col-xs-9, .row-gap-xl > .col-xs-9 {
        grid-column: span 9;
        width: auto;
    }

    .row-gap-sm > .col-xs-10, .row-gap-md > .col-xs-10, .row-gap-lg > .col-xs-10, .row-gap-xl > .col-xs-10 {
        grid-column: span 10;
        width: auto;
    }

    .row-gap-sm > .col-xs-11, .row-gap-md > .col-xs-11, .row-gap-lg > .col-xs-11, .row-gap-xl > .col-xs-11 {
        grid-column: span 11;
        width: auto;
    }

    .row-gap-sm > .col-xs-12, .row-gap-md > .col-xs-12, .row-gap-lg > .col-xs-12, .row-gap-xl > .col-xs-12 {
        grid-column: span 12;
        width: auto;
    }

    .row-gap-sm > .col-mobile-1, .row-gap-md > .col-mobile-1, .row-gap-lg > .col-mobile-1, .row-gap-xl > .col-mobile-1 {
        grid-column: span 1;
        width: auto;
    }

    .row-gap-sm > .col-mobile-2, .row-gap-md > .col-mobile-2, .row-gap-lg > .col-mobile-2, .row-gap-xl > .col-mobile-2 {
        grid-column: span 2;
        width: auto;
    }

    .row-gap-sm > .col-mobile-3, .row-gap-md > .col-mobile-3, .row-gap-lg > .col-mobile-3, .row-gap-xl > .col-mobile-3 {
        grid-column: span 3;
        width: auto;
    }

    .row-gap-sm > .col-mobile-4, .row-gap-md > .col-mobile-4, .row-gap-lg > .col-mobile-4, .row-gap-xl > .col-mobile-4 {
        grid-column: span 4;
        width: auto;
    }

    .row-gap-sm > .col-mobile-5, .row-gap-md > .col-mobile-5, .row-gap-lg > .col-mobile-5, .row-gap-xl > .col-mobile-5 {
        grid-column: span 5;
        width: auto;
    }

    .row-gap-sm > .col-mobile-6, .row-gap-md > .col-mobile-6, .row-gap-lg > .col-mobile-6, .row-gap-xl > .col-mobile-6 {
        grid-column: span 6;
        width: auto;
    }

    .row-gap-sm > .col-mobile-7, .row-gap-md > .col-mobile-7, .row-gap-lg > .col-mobile-7, .row-gap-xl > .col-mobile-7 {
        grid-column: span 7;
        width: auto;
    }

    .row-gap-sm > .col-mobile-8, .row-gap-md > .col-mobile-8, .row-gap-lg > .col-mobile-8, .row-gap-xl > .col-mobile-8 {
        grid-column: span 8;
        width: auto;
    }

    .row-gap-sm > .col-mobile-9, .row-gap-md > .col-mobile-9, .row-gap-lg > .col-mobile-9, .row-gap-xl > .col-mobile-9 {
        grid-column: span 9;
        width: auto;
    }

    .row-gap-sm > .col-mobile-10, .row-gap-md > .col-mobile-10, .row-gap-lg > .col-mobile-10, .row-gap-xl > .col-mobile-10 {
        grid-column: span 10;
        width: auto;
    }

    .row-gap-sm > .col-mobile-11, .row-gap-md > .col-mobile-11, .row-gap-lg > .col-mobile-11, .row-gap-xl > .col-mobile-11 {
        grid-column: span 11;
        width: auto;
    }

    .row-gap-sm > .col-mobile-12, .row-gap-md > .col-mobile-12, .row-gap-lg > .col-mobile-12, .row-gap-xl > .col-mobile-12 {
        grid-column: span 12;
        width: auto;
    }
}

/*   DISPLAY UTILITIES   */
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

.d-grid {
    display: grid !important;
}

/*   FLEX UTILITIES   */
.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.justify-start {
    justify-content: flex-start !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-around {
    justify-content: space-around !important;
}

.align-start {
    align-items: flex-start !important;
}

.align-end {
    align-items: flex-end !important;
}

.align-center {
    align-items: center !important;
}

.align-stretch {
    align-items: stretch !important;
}

.gap-xs {
    gap: var(--spacing-xs) !important;
}

.gap-sm {
    gap: var(--spacing-sm) !important;
}

.gap-md {
    gap: var(--spacing-md) !important;
}

.gap-lg {
    gap: var(--spacing-lg) !important;
}

.gap-xl {
    gap: var(--spacing-xl) !important;
}

/*   SPACING UTILITIES   */
/* Margin */
.m-0 {
    margin: 0 !important;
}

.m-xs {
    margin: var(--spacing-xs) !important;
}

.m-sm {
    margin: var(--spacing-sm) !important;
}

.m-md {
    margin: var(--spacing-md) !important;
}

.m-lg {
    margin: var(--spacing-lg) !important;
}

.m-xl {
    margin: var(--spacing-xl) !important;
}

.m-auto {
    margin: auto !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-xs {
    margin-top: var(--spacing-xs) !important;
}

.mt-sm {
    margin-top: var(--spacing-sm) !important;
}

.mt-md {
    margin-top: var(--spacing-md) !important;
}

.mt-lg {
    margin-top: var(--spacing-lg) !important;
}

.mt-xl {
    margin-top: var(--spacing-xl) !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-xs {
    margin-bottom: var(--spacing-xs) !important;
}

.mb-sm {
    margin-bottom: var(--spacing-sm) !important;
}

.mb-md {
    margin-bottom: var(--spacing-md) !important;
}

.mb-lg {
    margin-bottom: var(--spacing-lg) !important;
}

.mb-xl {
    margin-bottom: var(--spacing-xl) !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.ml-xs {
    margin-left: var(--spacing-xs) !important;
}

.ml-sm {
    margin-left: var(--spacing-sm) !important;
}

.ml-md {
    margin-left: var(--spacing-md) !important;
}

.ml-lg {
    margin-left: var(--spacing-lg) !important;
}

.ml-xl {
    margin-left: var(--spacing-xl) !important;
}

.ml-auto {
    margin-left: auto !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-xs {
    margin-right: var(--spacing-xs) !important;
}

.mr-sm {
    margin-right: var(--spacing-sm) !important;
}

.mr-md {
    margin-right: var(--spacing-md) !important;
}

.mr-lg {
    margin-right: var(--spacing-lg) !important;
}

.mr-xl {
    margin-right: var(--spacing-xl) !important;
}

.mr-auto {
    margin-right: auto !important;
}

/* Padding */
.p-0 {
    padding: 0 !important;
}

.p-xs {
    padding: var(--spacing-xs) !important;
}

.p-sm {
    padding: var(--spacing-sm) !important;
}

.p-md {
    padding: var(--spacing-md) !important;
}

.p-lg {
    padding: var(--spacing-lg) !important;
}

.p-xl {
    padding: var(--spacing-xl) !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-xs {
    padding-top: var(--spacing-xs) !important;
}

.pt-sm {
    padding-top: var(--spacing-sm) !important;
}

.pt-md {
    padding-top: var(--spacing-md) !important;
}

.pt-lg {
    padding-top: var(--spacing-lg) !important;
}

.pt-xl {
    padding-top: var(--spacing-xl) !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-xs {
    padding-bottom: var(--spacing-xs) !important;
}

.pb-sm {
    padding-bottom: var(--spacing-sm) !important;
}

.pb-md {
    padding-bottom: var(--spacing-md) !important;
}

.pb-lg {
    padding-bottom: var(--spacing-lg) !important;
}

.pb-xl {
    padding-bottom: var(--spacing-xl) !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.pl-xs {
    padding-left: var(--spacing-xs) !important;
}

.pl-sm {
    padding-left: var(--spacing-sm) !important;
}

.pl-md {
    padding-left: var(--spacing-md) !important;
}

.pl-lg {
    padding-left: var(--spacing-lg) !important;
}

.pl-xl {
    padding-left: var(--spacing-xl) !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pr-xs {
    padding-right: var(--spacing-xs) !important;
}

.pr-sm {
    padding-right: var(--spacing-sm) !important;
}

.pr-md {
    padding-right: var(--spacing-md) !important;
}

.pr-lg {
    padding-right: var(--spacing-lg) !important;
}

.pr-xl {
    padding-right: var(--spacing-xl) !important;
}

/*   TEXT UTILITIES   */
.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-xs {
    font-size: var(--font-size-xs) !important;
}

.text-sm {
    font-size: var(--font-size-sm) !important;
}

.text-base {
    font-size: var(--font-size-base) !important;
}

.text-lg {
    font-size: var(--font-size-lg) !important;
}

.text-xl {
    font-size: var(--font-size-xl) !important;
}

.text-normal {
    font-weight: var(--font-weight-normal) !important;
}

.text-medium {
    font-weight: var(--font-weight-medium) !important;
}

.text-semibold {
    font-weight: var(--font-weight-semibold) !important;
}

.text-bold {
    font-weight: var(--font-weight-bold) !important;
}

.text-primary {
    color: var(--color-text-primary) !important;
}

.text-secondary {
    color: var(--color-text-secondary) !important;
}

.text-tertiary {
    color: var(--color-text-tertiary) !important;
}

.text-blue {
    color: var(--color-accent-blue) !important;
}

.text-green {
    color: var(--color-accent-green) !important;
}

.text-orange {
    color: var(--color-accent-orange) !important;
}

.text-red {
    color: var(--color-accent-red) !important;
}

.text-purple {
    color: var(--color-accent-purple) !important;
}

.text-yellow {
    color: var(--color-accent-yellow) !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

.text-capitalize {
    text-transform: capitalize !important;
}

.text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/*   BORDER UTILITIES   */
.border {
    border: var(--border-width-thin) solid var(--color-border-primary) !important;
}

.border-top {
    border-top: var(--border-width-thin) solid var(--color-border-primary) !important;
}

.border-right {
    border-right: var(--border-width-thin) solid var(--color-border-primary) !important;
}

.border-bottom {
    border-bottom: var(--border-width-thin) solid var(--color-border-primary) !important;
}

.border-left {
    border-left: var(--border-width-thin) solid var(--color-border-primary) !important;
}

.border-0 {
    border: 0 !important;
}

/*   BACKGROUND UTILITIES   */
.bg-primary {
    background-color: var(--color-bg-primary) !important;
}

.bg-secondary {
    background-color: var(--color-bg-secondary) !important;
}

.bg-tertiary {
    background-color: var(--color-bg-tertiary) !important;
}

/*   WIDTH & HEIGHT   */
.w-25 {
    width: 25% !important;
}

.w-50 {
    width: 50% !important;
}

.w-75 {
    width: 75% !important;
}

.w-100 {
    width: 100% !important;
}

.w-auto {
    width: auto !important;
}

.h-25 {
    height: 25% !important;
}

.h-50 {
    height: 50% !important;
}

.h-75 {
    height: 75% !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

/*   POSITION   */
.position-static {
    position: static !important;
}

.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

.position-fixed {
    position: fixed !important;
}

.position-sticky {
    position: sticky !important;
}

/**
 * Wireframe UI Framework
 * Accordions & Collapse Component
 */

/*  ACCORDION  */
.accordion {
  border: var(--border-width-thin) solid var(--color-border-primary);
}

.accordion-item {
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.accordion-item:last-child {
  border-bottom: none;
}

/*  ACCORDION HEADER  */
.accordion-header {
  margin-bottom: 0;
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-align: left;
  background-color: transparent;
  border: 0;
  border-left: var(--border-width-thick) solid transparent;
  overflow-anchor: none;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.accordion-button:hover {
  background-color: var(--color-bg-secondary);
  border-left-color: var(--color-border-primary);
}

.accordion-button:focus {
  outline: var(--border-width-medium) solid var(--color-accent-blue);
  outline-offset: -2px;
}


/*  ACCORDION BODY  */
.accordion-collapse {
  transition: height var(--transition-normal);
}

.accordion-collapse.collapse {
  display: none;
}

.accordion-collapse.collapse.show {
  display: block;
}

.accordion-collapse.collapsing {
  height: 0;
  overflow: hidden;
}

.accordion-body {
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--color-text-primary);
  border-left: var(--border-width-thick) solid var(--color-border-primary);
}

/*  ACCORDION FLUSH  */
.accordion-flush {
  border: none;
}

.accordion-flush .accordion-item {
  border: none;
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.accordion-flush .accordion-item:last-child {
  border-bottom: none;
}

.accordion-flush .accordion-button {
  border-left: none;
  padding-left: 0;
}

.accordion-flush .accordion-body {
  border-left: none;
  padding-left: 0;
}

/*  COLLAPSE  */
.collapse {
  display: none;
}

.collapse.show {
  display: block;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height var(--transition-normal);
}

/*  COLLAPSE HORIZONTAL  */
.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width var(--transition-normal);
}

.collapse-horizontal.show {
  width: auto;
}

/*  SIMPLE TOGGLE  */
.toggle {
  position: relative;
  display: block;
  overflow: hidden;
}

.toggle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  cursor: pointer;
  border: var(--border-width-thin) solid var(--color-border-primary);
  background-color: transparent;
  transition: all var(--transition-fast);
}

.toggle-header:hover {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border-active);
}

.toggle-icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--transition-normal);
}

.toggle.active .toggle-icon {
  transform: rotate(180deg);
}

.toggle-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal);
  border: var(--border-width-thin) solid var(--color-border-primary);
  border-top: none;
}

.toggle.active .toggle-content {
  max-height: 1000px;
}

.toggle-body {
  padding: var(--spacing-md);
}

/*  DETAILS ELEMENT STYLING  */
details {
  border: var(--border-width-thin) solid var(--color-border-primary);
  margin-bottom: var(--spacing-md);
}

summary {
  padding: var(--spacing-md) var(--spacing-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none;
  background-color: transparent;
  border-left: var(--border-width-thick) solid transparent;
  transition: all var(--transition-fast);
}

summary:hover {
  background-color: var(--color-bg-secondary);
  border-left-color: var(--color-border-primary);
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: var(--spacing-sm);
  border-right: var(--border-width-medium) solid currentColor;
  border-bottom: var(--border-width-medium) solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition-normal);
  float: right;
  margin-top: 0.3rem;
}

details[open] summary {
  border-left-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
  background-color: var(--color-bg-secondary);
}

details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 0.5rem;
}

details > :not(summary) {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: var(--border-width-thin) solid var(--color-border-primary);
}

/*  EXPANDABLE PANELS  */
.panel {
  border: var(--border-width-thin) solid var(--color-border-primary);
  margin-bottom: var(--spacing-md);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: transparent;
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.panel-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0;
  color: var(--color-text-primary);
}

.panel-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.panel-body {
  padding: var(--spacing-lg);
  color: var(--color-text-primary);
}

.panel-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: var(--border-width-thin) solid var(--color-border-primary);
  background-color: var(--color-bg-secondary);
}

/*  PANEL VARIANTS  */
.panel-primary .panel-header {
  border-bottom-color: var(--color-accent-blue);
}

.panel-primary .panel-title {
  color: var(--color-accent-blue);
}

.panel-success .panel-header {
  border-bottom-color: var(--color-accent-green);
}

.panel-success .panel-title {
  color: var(--color-accent-green);
}

.panel-warning .panel-header {
  border-bottom-color: var(--color-accent-yellow);
}

.panel-warning .panel-title {
  color: var(--color-accent-yellow);
}

.panel-error .panel-header {
  border-bottom-color: var(--color-accent-red);
}

.panel-error .panel-title {
  color: var(--color-accent-red);
}

/*  COLLAPSIBLE PANEL  */
.panel-collapsible .panel-header {
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.panel-collapsible .panel-header:hover {
  background-color: var(--color-bg-secondary);
}

.panel-collapsible.collapsed .panel-body {
  display: none;
}

.panel-collapsible.collapsed .panel-footer {
  display: none;
}

/*  TAB CONTENT (for accordion-style tabs)  */
.tab-content > .tab-pane {
  display: none;
}

.tab-content > .active {
  display: block;
}

/*  RESPONSIVE  */
@media (max-width: 768px) {
  .accordion-button,
  .accordion-body,
  .toggle-header,
  .toggle-body,
  summary,
  details > :not(summary),
  .panel-header,
  .panel-body,
  .panel-footer {
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

/**
 * Wireframe UI Framework
 * Mobile Accordions - Responsive accordions and collapse components
 */

@media (max-width: 768px) {
  
  /*   ACCORDION   */
  .accordion {
    border: var(--border-width-thin) solid var(--color-border-primary);
  }

  /*   ACCORDION HEADER   */
  .accordion-button {
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
    min-height: 56px;
  }

  .accordion-button::after {
    width: 1.25rem;
    height: 1.25rem;
    background-size: 1.25rem;
    margin-left: var(--spacing-md);
  }

  /*   ACCORDION BODY   */
  .accordion-body {
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
  }

  /*   ACCORDION FLUSH   */
  .accordion-flush .accordion-button {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }

  .accordion-flush .accordion-body {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }

  /*   COLLAPSE   */
  /* Optimize transition for mobile performance */
  .accordion-collapse,
  .collapse {
    transition: height 250ms ease-in-out;
  }

  /*   TOGGLE   */
  .toggle-header {
    padding: var(--spacing-md);
    min-height: 56px;
  }

  .toggle-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .toggle-body {
    padding: var(--spacing-md);
  }

  /*   DETAILS ELEMENT   */
  summary {
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
    min-height: 56px;
  }

  summary::after {
    width: 0.625rem;
    height: 0.625rem;
  }

  details > :not(summary) {
    padding: var(--spacing-md);
  }

  /*   PANEL   */
  .panel {
    margin-bottom: var(--spacing-md);
  }

  .panel-header {
    padding: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .panel-title {
    font-size: var(--font-size-base);
    flex: 1 1 100%;
    margin-bottom: var(--spacing-xs);
  }

  .panel-actions {
    flex: 1 1 auto;
    display: flex;
    gap: var(--spacing-xs);
    width: 100%;
    justify-content: flex-start;
  }

  .panel-body {
    padding: var(--spacing-md);
  }

  .panel-footer {
    padding: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  /*   COLLAPSIBLE PANEL   */
  .panel-collapsible .panel-header {
    touch-action: manipulation;
  }

  /*   TAB CONTENT   */
  .tab-content {
    padding: var(--spacing-md);
  }

  /*   ACCORDION TOUCH OPTIMIZATION   */
  /* Larger touch targets */
  .accordion-button,
  .toggle-header,
  summary {
    min-height: 56px;
    display: flex;
    align-items: center;
  }

  /* Prevent text selection on accordion headers */
  .accordion-button,
  .toggle-header,
  summary {
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Better touch feedback */
  .accordion-button:active,
  .toggle-header:active,
  summary:active {
    background-color: var(--color-bg-secondary);
  }

  /*   NESTED ACCORDIONS   */
  .accordion .accordion {
    margin: var(--spacing-sm) 0;
  }

  .accordion .accordion .accordion-button {
    padding-left: var(--spacing-lg);
    font-size: var(--font-size-sm);
  }

  .accordion .accordion .accordion-body {
    padding-left: var(--spacing-lg);
  }

  /*   ACCORDION WITH ICON   */
  .accordion-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: var(--spacing-sm);
    flex-shrink: 0;
  }

  /*   SWIPE TO EXPAND   */
  .accordion-swipeable {
    touch-action: pan-y;
  }

  /*   SMOOTH SCROLLING TO EXPANDED ITEM   */
  .accordion-item.expanded {
    scroll-margin-top: var(--spacing-lg);
  }
}

/*   SMALL MOBILE (max-width: 480px)   */
@media (max-width: 480px) {
  .accordion-button {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    min-height: 52px;
  }

  .accordion-button::after {
    width: 1rem;
    height: 1rem;
    background-size: 1rem;
    margin-left: var(--spacing-sm);
  }

  .accordion-body {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .toggle-header {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .toggle-body {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  summary {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  details > :not(summary) {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .panel-header,
  .panel-body,
  .panel-footer {
    padding: var(--spacing-sm);
  }

  .panel-title {
    font-size: var(--font-size-sm);
  }

  .accordion .accordion .accordion-button {
    padding-left: var(--spacing-md);
  }

  .accordion .accordion .accordion-body {
    padding-left: var(--spacing-md);
  }

  .accordion-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/*   LANDSCAPE MODE   */
@media (max-height: 500px) and (orientation: landscape) {
  .accordion-button {
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    min-height: 48px;
  }

  .accordion-body {
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
  }

  .toggle-header {
    min-height: 48px;
  }

  summary {
    min-height: 48px;
  }

  .panel-header {
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

/*   ACCESSIBILITY   */
@media (max-width: 768px) {
  /* Better focus indicators */
  .accordion-button:focus,
  .toggle-header:focus,
  summary:focus {
    outline-width: 3px;
    outline-offset: -3px;
  }

  /* Ensure sufficient contrast for expanded state */
  .accordion-button:not(.collapsed) {
    position: relative;
  }
}

/*   REDUCED MOTION   */
@media (prefers-reduced-motion: reduce) {
  .accordion-collapse,
  .collapse,
  .toggle-content {
    transition: none;
  }

  .accordion-button::after,
  .toggle-icon {
    transition: none;
  }
}

/**
 * Wireframe UI Framework
 * Alerts Component
 */

/*  BASE ALERT  */
.alert {
  position: relative;
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  border: var(--border-width-medium) solid var(--color-border-primary);
  color: var(--color-text-primary);
  background-color: transparent;
}

.alert:last-child {
  margin-bottom: 0;
}

/*  ALERT VARIANTS  */
.alert-primary {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.alert-success {
  border-color: var(--color-accent-green);
  color: var(--color-accent-green);
}

.alert-warning {
  border-color: var(--color-accent-yellow);
  color: var(--color-accent-yellow);
}

.alert-error,
.alert-danger {
  border-color: var(--color-accent-red);
  color: var(--color-accent-red);
}

.alert-info {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

/*  ALERT WITH LEFT ACCENT  */
.alert-accent {
  border-left-width: var(--border-width-thick);
}

.alert-primary.alert-accent {
  border-left-color: var(--color-accent-blue);
  border-left-width: var(--border-width-thick);
  color: var(--color-text-primary);
}

.alert-success.alert-accent {
  border-left-color: var(--color-accent-green);
  border-left-width: var(--border-width-thick);
  color: var(--color-text-primary);
}

.alert-warning.alert-accent {
  border-left-color: var(--color-accent-yellow);
  border-left-width: var(--border-width-thick);
  color: var(--color-text-primary);
}

.alert-error.alert-accent,
.alert-danger.alert-accent {
  border-left-color: var(--color-accent-red);
  border-left-width: var(--border-width-thick);
  color: var(--color-text-primary);
}

/*  FILLED ALERTS  */
.alert-filled.alert-primary {
  background-color: var(--color-accent-blue);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-blue);
}

.alert-filled.alert-success {
  background-color: var(--color-accent-green);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-green);
}

.alert-filled.alert-warning {
  background-color: var(--color-accent-yellow);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-yellow);
}

.alert-filled.alert-error,
.alert-filled.alert-danger {
  background-color: var(--color-accent-red);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-red);
}

/*  ALERT HEADING  */
.alert-heading {
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

/*  ALERT LINKS  */
.alert-link {
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
}

.alert-primary .alert-link {
  color: var(--color-accent-blue);
}

.alert-success .alert-link {
  color: var(--color-accent-green);
}

.alert-warning .alert-link {
  color: var(--color-accent-yellow);
}

.alert-error .alert-link,
.alert-danger .alert-link {
  color: var(--color-accent-red);
}

.alert-filled .alert-link {
  color: var(--color-text-inverse);
  text-decoration: underline;
}

/*  DISMISSIBLE ALERT  */
.alert-dismissible {
  padding-right: calc(var(--spacing-lg) + 2rem);
}

.alert-dismissible .btn-close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-lg);
  padding: 0;
}

/*  ALERT WITH ICON  */
.alert-with-icon {
  display: flex;
  gap: var(--spacing-md);
}

.alert-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-content {
  flex: 1;
}

/*  BANNER ALERTS  */
.alert-banner {
  border-left: none;
  border-right: none;
  border-radius: 0;
  margin-bottom: 0;
}

.alert-banner-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-index-fixed);
  border-top: none;
}

.alert-banner-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-index-fixed);
  border-bottom: none;
}

/*  NOTIFICATION BADGE  */
.notification-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background-color: var(--color-accent-red);
  border: var(--border-width-thin) solid var(--color-bg-primary);
  border-radius: 50%;
}

.notification-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  background-color: var(--color-accent-red);
  border: var(--border-width-thin) solid var(--color-bg-primary);
  border-radius: 10px;
}

/**
 * Wireframe UI Framework
 * Mobile Alerts - Responsive alerts and notifications
 */

@media (max-width: 768px) {
  
  /*   BASE ALERT   */
  .alert {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-base);
  }

  /*   ALERT HEADING   */
  .alert-heading {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-sm);
  }

  /*   DISMISSIBLE ALERT   */
  .alert-dismissible {
    padding-right: calc(var(--spacing-md) + 44px);
  }

  .alert-dismissible .btn-close {
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    min-width: 44px;
    min-height: 44px;
  }

  /*   ALERT WITH ICON   */
  .alert-with-icon {
    flex-direction: row;
    gap: var(--spacing-sm);
  }

  .alert-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  /*   TOAST CONTAINER   */
  .toast-container {
    padding: var(--spacing-sm);
    max-width: 100%;
  }

  .toast-container-top-right,
  .toast-container-bottom-right {
    right: 0;
    left: auto;
  }

  .toast-container-top-left,
  .toast-container-bottom-left {
    left: 0;
    right: auto;
  }

  .toast-container-top-center,
  .toast-container-bottom-center {
    left: 0;
    right: 0;
    transform: none;
    padding: var(--spacing-sm);
  }

  /*   TOAST   */
  .toast {
    max-width: 100%;
    width: 100%;
    margin-bottom: var(--spacing-sm);
  }

  .toast-header {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .toast-body {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .toast-title {
    font-size: var(--font-size-base);
  }

  .toast .btn-close {
    min-width: 32px;
    min-height: 32px;
  }

  /*   BANNER ALERTS   */
  .alert-banner {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .alert-banner-top {
    position: fixed;
    top: 0;
    z-index: var(--z-index-fixed);
  }

  .alert-banner-bottom {
    position: fixed;
    bottom: 0;
    z-index: var(--z-index-fixed);
  }

  /* Add padding when banner is active */
  body.alert-banner-top-active {
    padding-top: 60px;
  }

  body.alert-banner-bottom-active {
    padding-bottom: 60px;
  }

  /*   NOTIFICATION BADGES   */
  .notification-dot {
    width: 10px;
    height: 10px;
    top: -2px;
    right: -2px;
  }

  .notification-count {
    min-width: 20px;
    height: 20px;
    font-size: 11px;
    top: -8px;
    right: -8px;
  }

  /*   STACKED ALERTS   */
  .alert-stack {
    position: fixed;
    top: var(--spacing-md);
    right: var(--spacing-md);
    left: var(--spacing-md);
    z-index: var(--z-index-tooltip);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    pointer-events: none;
  }

  .alert-stack .alert {
    pointer-events: auto;
    margin-bottom: 0;
  }

  /*   SWIPE TO DISMISS   */
  .toast-swipeable {
    touch-action: pan-y;
    position: relative;
  }

  /*   SAFE AREA ADJUSTMENTS   */
  .alert-banner-top {
    padding-top: max(var(--spacing-sm), env(safe-area-inset-top));
  }

  .alert-banner-bottom {
    padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
  }

  .toast-container-top-right,
  .toast-container-top-left,
  .toast-container-top-center {
    top: max(var(--spacing-md), env(safe-area-inset-top));
  }

  .toast-container-bottom-right,
  .toast-container-bottom-left,
  .toast-container-bottom-center {
    bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
  }
}

/*   SMALL MOBILE (max-width: 480px)   */
@media (max-width: 480px) {
  .alert {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

  .alert-heading {
    font-size: var(--font-size-sm);
  }

  .alert-dismissible {
    padding-right: calc(var(--spacing-sm) + 40px);
  }

  .alert-banner {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 12px;
  }

  .toast {
    font-size: var(--font-size-sm);
  }

  .toast-header,
  .toast-body {
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .alert-stack {
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    left: var(--spacing-sm);
  }
}

/*   LANDSCAPE MODE   */
@media (max-height: 500px) and (orientation: landscape) {
  .alert {
    padding: var(--spacing-sm);
  }

  .toast-container {
    max-height: 80vh;
    overflow-y: auto;
  }

  .alert-banner {
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}

/**
 * Wireframe UI Framework
 * Badges & Tags Component
 */

/*  BASE BADGE  */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border: var(--border-width-thin) solid var(--color-border-primary);
  color: var(--color-text-secondary);
  background-color: transparent;
  transition: all var(--transition-fast);
}

/*  BADGE VARIANTS  */
.badge-primary {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.badge-success {
  border-color: var(--color-accent-green);
  color: var(--color-accent-green);
}

.badge-warning {
  border-color: var(--color-accent-yellow);
  color: var(--color-accent-yellow);
}

.badge-error,
.badge-danger {
  border-color: var(--color-accent-red);
  color: var(--color-accent-red);
}

.badge-info {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.badge-secondary {
  border-color: var(--color-border-primary);
  color: var(--color-text-secondary);
}

/*   FILLED BADGES   */
.badge-filled {
  background-color: var(--color-bg-secondary);
}

.badge-primary.badge-filled {
  background-color: var(--color-accent-blue);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-blue);
}

.badge-success.badge-filled {
  background-color: var(--color-accent-green);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-green);
}

.badge-warning.badge-filled {
  background-color: var(--color-accent-yellow);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-yellow);
}

.badge-error.badge-filled,
.badge-danger.badge-filled {
  background-color: var(--color-accent-red);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-red);
}

.badge-info.badge-filled {
  background-color: var(--color-accent-blue);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-blue);
}

/*   BADGE SIZES   */
.badge-sm {
  padding: 0.125rem var(--spacing-xs);
  font-size: 0.625rem;
}

.badge-lg {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
}

/*   BADGE DOT   */
.badge-dot {
  padding: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: var(--border-width-thin) solid var(--color-border-primary);
}

.badge-dot.badge-primary {
  background-color: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
}

.badge-dot.badge-success {
  background-color: var(--color-accent-green);
  border-color: var(--color-accent-green);
}

.badge-dot.badge-warning {
  background-color: var(--color-accent-yellow);
  border-color: var(--color-accent-yellow);
}

.badge-dot.badge-error,
.badge-dot.badge-danger {
  background-color: var(--color-accent-red);
  border-color: var(--color-accent-red);
}

/*   BADGE PILL   */
.badge-pill {
  border-radius: 999px;
}

/*   TAGS   */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  border: var(--border-width-thin) solid var(--color-border-primary);
  color: var(--color-text-primary);
  background-color: transparent;
  transition: all var(--transition-fast);
}

.tag:hover {
  border-color: var(--color-border-active);
}

/*   TAG VARIANTS   */
.tag-primary {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.tag-success {
  border-color: var(--color-accent-green);
  color: var(--color-accent-green);
}

.tag-warning {
  border-color: var(--color-accent-yellow);
  color: var(--color-accent-yellow);
}

.tag-error,
.tag-danger {
  border-color: var(--color-accent-red);
  color: var(--color-accent-red);
}

/*   TAG REMOVABLE   */
.tag-removable {
  padding-right: calc(var(--spacing-xs) + 1.25rem);
  position: relative;
}

.tag-remove {
  position: absolute;
  right: var(--spacing-xs);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.tag-remove:hover {
  color: var(--color-text-primary);
}

.tag-remove::before,
.tag-remove::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 1px;
  background-color: currentColor;
}

.tag-remove::before {
  transform: rotate(45deg);
}

.tag-remove::after {
  transform: rotate(-45deg);
}

/*   TAG GROUP   */
.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

/*   STATUS INDICATORS   */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: var(--border-width-thin) solid var(--color-border-primary);
  background-color: var(--color-bg-secondary);
}

.status-online .status-dot {
  background-color: var(--color-accent-green);
  border-color: var(--color-accent-green);
}

.status-busy .status-dot {
  background-color: var(--color-accent-red);
  border-color: var(--color-accent-red);
}

.status-away .status-dot {
  background-color: var(--color-accent-yellow);
  border-color: var(--color-accent-yellow);
}

.status-offline .status-dot {
  background-color: var(--color-text-tertiary);
  border-color: var(--color-text-tertiary);
}

/*   PULSE ANIMATION FOR STATUS   */
.status-pulse .status-dot {
  position: relative;
}

.status-pulse .status-dot::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  border: var(--border-width-thin) solid currentColor;
  animation: status-pulse 2s ease-out infinite;
}

@keyframes status-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/*   LABEL   */
.label {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  border-left: var(--border-width-thick) solid var(--color-border-primary);
}

.label-primary {
  border-left-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.label-success {
  border-left-color: var(--color-accent-green);
  color: var(--color-accent-green);
}

.label-warning {
  border-left-color: var(--color-accent-yellow);
  color: var(--color-accent-yellow);
}

.label-error,
.label-danger {
  border-left-color: var(--color-accent-red);
  color: var(--color-accent-red);
}

/*   CHIP   */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
  border: var(--border-width-thin) solid var(--color-border-primary);
  background-color: var(--color-bg-secondary);
  transition: all var(--transition-fast);
}

.chip:hover {
  border-color: var(--color-border-active);
}

.chip-avatar {
  width: 1.5rem;
  height: 1.5rem;
  border: var(--border-width-thin) solid var(--color-border-primary);
  border-radius: 50%;
  overflow: hidden;
  margin-left: calc(var(--spacing-xs) * -1);
}

.chip-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chip-icon {
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*   COUNTER   */
.counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 var(--spacing-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  border: var(--border-width-thin) solid var(--color-border-primary);
  background-color: transparent;
}

.counter-primary {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.counter-filled {
  background-color: var(--color-accent-blue);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-blue);
}

/**
 * Wireframe UI Framework
 * Mobile Badges - Responsive badges, tags, and status indicators
 */

@media (max-width: 768px) {
  
  /*   BASE BADGE   */
  .badge {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 11px;
  }

  /*   BADGE SIZES   */
  .badge-sm {
    padding: 2px var(--spacing-xs);
    font-size: 10px;
  }

  .badge-lg {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  /*   TAGS   */
  .tag {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
    gap: var(--spacing-xs);
  }

  /*   TAG REMOVABLE   */
  .tag-removable {
    padding-right: calc(var(--spacing-sm) + 1.5rem);
  }

  .tag-remove {
    width: 1.25rem;
    height: 1.25rem;
    right: var(--spacing-xs);
    min-width: 32px;
    min-height: 32px;
  }

  /*   TAG GROUP   */
  .tag-group {
    gap: var(--spacing-xs);
    flex-wrap: wrap;
  }

  /*   STATUS INDICATORS   */
  .status {
    font-size: var(--font-size-sm);
    gap: var(--spacing-sm);
  }

  .status-dot {
    width: 10px;
    height: 10px;
  }

  /*   LABEL   */
  .label {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 10px;
  }

  /*   CHIP   */
  .chip {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    gap: var(--spacing-xs);
  }

  .chip-avatar {
    width: 1.25rem;
    height: 1.25rem;
  }

  .chip-icon {
    width: 0.875rem;
    height: 0.875rem;
  }

  /*   COUNTER   */
  .counter {
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 var(--spacing-xs);
    font-size: 10px;
  }

  /*   BADGE IN BUTTONS   */
  .btn .badge {
    margin-left: var(--spacing-xs);
  }

  /*   MOBILE TOUCH OPTIMIZATION   */
  /* Make removable tags easier to tap */
  .tag-removable {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  /*   BADGE STACKING   */
  /* Better wrapping for badge groups */
  .badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
  }

  /*   NOTIFICATION POSITIONING   */
  .notification-dot {
    top: -3px;
    right: -3px;
  }

  .notification-count {
    top: -6px;
    right: -6px;
  }
}

/*   SMALL MOBILE (max-width: 480px)   */
@media (max-width: 480px) {
  .badge {
    font-size: 10px;
    padding: 2px var(--spacing-xs);
  }

  .badge-lg {
    font-size: 12px;
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .tag {
    font-size: 12px;
    padding: var(--spacing-xs);
  }

  .status {
    font-size: 12px;
  }

  .status-dot {
    width: 8px;
    height: 8px;
  }

  .chip {
    font-size: 12px;
    padding: var(--spacing-xs);
  }

  .chip-avatar {
    width: 1rem;
    height: 1rem;
  }

  .label {
    font-size: 9px;
  }
}

/**
 * Wireframe UI Framework
 * Button Dropdowns Component - Dropdown buttons and split buttons
 */

/*   BUTTON DROPDOWN   */
.btn-dropdown {
  position: relative;
  display: inline-block;
}

.btn-dropdown .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/*   DROPDOWN CARET   */
.btn-dropdown .dropdown-toggle::after,
.btn.dropdown-toggle::after {
  content: '';
  display: inline-block;
  margin-left: var(--spacing-xs);
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-bottom: 0;
  border-left: 4px solid transparent;
  transition: transform var(--transition-fast);
}

.btn-dropdown.show .dropdown-toggle::after,
.btn.dropdown-toggle.show::after {
  transform: rotate(180deg);
}

/*   SPLIT BUTTON DROPDOWN   */
.btn-group-dropdown {
  position: relative;
  display: inline-flex;
}

.btn-group-dropdown > .btn:not(:last-child) {
  border-right: none;
}

.btn-group-dropdown > .btn:not(:first-child) {
  margin-left: calc(var(--border-width-medium) * -1);
}

.btn-group-dropdown > .btn:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group-dropdown > .btn:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group-dropdown .dropdown-toggle-split {
  padding-right: var(--spacing-sm);
  padding-left: var(--spacing-sm);
  border-left: var(--border-width-thin) solid var(--color-border-primary);
}

.btn-group-dropdown .dropdown-toggle-split::after {
  margin-left: 0;
}

/*   BUTTON DROPDOWN MENU   */
.btn-dropdown .dropdown-menu {
  top: calc(100% + var(--spacing-xs));
  left: 0;
  min-width: 100%;
}

.btn-group-dropdown .dropdown-menu {
  top: calc(100% + var(--spacing-xs));
  left: 0;
}

/*   BUTTON DROPDOWN SIZES   */
.btn-dropdown .btn-sm::after {
  border-top-width: 3px;
  border-right-width: 3px;
  border-left-width: 3px;
}

.btn-dropdown .btn-lg::after {
  border-top-width: 5px;
  border-right-width: 5px;
  border-left-width: 5px;
}

.btn-dropdown .btn-xl::after {
  border-top-width: 6px;
  border-right-width: 6px;
  border-left-width: 6px;
}

/*   BUTTON DROPDOWN VARIANTS   */
.btn-dropdown-primary .dropdown-toggle {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.btn-dropdown-success .dropdown-toggle {
  border-color: var(--color-accent-green);
  color: var(--color-accent-green);
}

.btn-dropdown-warning .dropdown-toggle {
  border-color: var(--color-accent-yellow);
  color: var(--color-accent-yellow);
}

.btn-dropdown-error .dropdown-toggle {
  border-color: var(--color-accent-red);
  color: var(--color-accent-red);
}

/*   DROPUP BUTTON   */
.btn-dropup .dropdown-menu {
  top: auto;
  bottom: calc(100% + var(--spacing-xs));
  margin-top: 0;
  margin-bottom: 0;
}

.btn-dropup .dropdown-toggle::after {
  border-top: 0;
  border-bottom: 4px solid;
}

/*   DROPEND BUTTON   */
.btn-dropend .dropdown-menu {
  top: 0;
  left: calc(100% + var(--spacing-xs));
  margin-top: 0;
  margin-left: 0;
}

.btn-dropend .dropdown-toggle::after {
  border-top: 4px solid transparent;
  border-right: 0;
  border-bottom: 4px solid transparent;
  border-left: 4px solid;
  margin-left: var(--spacing-sm);
}

/*   DROPSTART BUTTON   */
.btn-dropstart .dropdown-menu {
  top: 0;
  right: calc(100% + var(--spacing-xs));
  left: auto;
  margin-top: 0;
  margin-right: 0;
}

.btn-dropstart .dropdown-toggle::after {
  display: none;
}

.btn-dropstart .dropdown-toggle::before {
  content: '';
  display: inline-block;
  margin-right: var(--spacing-xs);
  vertical-align: middle;
  border-top: 4px solid transparent;
  border-right: 4px solid;
  border-bottom: 4px solid transparent;
  border-left: 0;
}

/*   BUTTON DROPDOWN WITH ICONS   */
.btn-dropdown-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.btn-dropdown-icon .icon {
  width: 1rem;
  height: 1rem;
}

/*   BUTTON DROPDOWN MENU ALIGNMENT   */
.btn-dropdown .dropdown-menu-right {
  right: 0;
  left: auto;
}

.btn-dropdown .dropdown-menu-center {
  left: 50%;
  transform: translateX(-50%);
}

/*   BUTTON DROPDOWN WITH SEARCH   */
.btn-dropdown .dropdown-search {
  position: sticky;
  top: 0;
  background-color: var(--color-bg-primary);
  z-index: 1;
}

/*   BUTTON DROPDOWN STATES   */
.btn-dropdown.disabled .btn,
.btn-dropdown .btn:disabled {
  pointer-events: none;
  opacity: 0.4;
}

.btn-dropdown.show .btn {
  border-color: var(--color-accent-blue);
}

/*   NESTED BUTTON DROPDOWN   */
.btn-dropdown .dropdown-submenu {
  position: relative;
}

.btn-dropdown .dropdown-submenu .dropdown-menu {
  left: 100%;
  top: 0;
  margin-left: calc(var(--border-width-medium) * -1);
  margin-top: calc(var(--spacing-xs) * -1);
}

/*   BUTTON GROUP WITH MULTIPLE DROPDOWNS   */
.btn-group-multi-dropdown {
  display: inline-flex;
  gap: var(--spacing-xs);
}

/*   FILLED BUTTON DROPDOWN   */
.btn-dropdown .btn-filled {
  background-color: var(--color-accent-blue);
  color: var(--color-text-inverse);
}

.btn-dropdown .btn-filled.show {
  background-color: var(--color-accent-blue);
  filter: brightness(0.9);
}

/*   RESPONSIVE   */
@media (max-width: 768px) {
  /* Full width on mobile */
  .btn-dropdown-mobile-full {
    display: block;
  }

  .btn-dropdown-mobile-full .btn {
    width: 100%;
  }

  .btn-dropdown-mobile-full .dropdown-menu {
    left: 0;
    right: 0;
    width: auto;
  }

  /* Stack split buttons */
  .btn-group-dropdown-mobile-stack {
    flex-direction: column;
  }

  .btn-group-dropdown-mobile-stack > .btn {
    width: 100%;
    border-right: var(--border-width-medium) solid;
    border-bottom: none;
  }

  .btn-group-dropdown-mobile-stack > .btn:not(:last-child) {
    border-radius: 0;
  }

  .btn-group-dropdown-mobile-stack > .btn:first-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .btn-group-dropdown-mobile-stack > .btn:last-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-left: 0;
    margin-top: calc(var(--border-width-medium) * -1);
  }
}

/**
 * Wireframe UI Framework
 * Mobile Button Dropdowns - Touch-friendly sizing and mobile optimizations
 */

@media (max-width: 768px) {
  
  /*   BUTTON DROPDOWN   */
  .btn-dropdown .btn {
    min-height: 44px; /* iOS recommended minimum */
  }

  /*   DROPDOWN CARET   */
  .btn-dropdown .dropdown-toggle::after {
    border-top-width: 5px;
    border-right-width: 5px;
    border-left-width: 5px;
  }

  /*   SPLIT BUTTON DROPDOWN   */
  .btn-group-dropdown {
    display: flex;
    width: 100%;
  }

  .btn-group-dropdown > .btn:first-child {
    flex: 1;
  }

  .btn-group-dropdown .dropdown-toggle-split {
    padding-right: var(--spacing-md);
    padding-left: var(--spacing-md);
    min-width: 44px;
  }

  /*   BUTTON DROPDOWN MENU   */
  .btn-dropdown .dropdown-menu {
    min-width: 100%;
    max-width: 100vw;
  }

  /*   FULL WIDTH BUTTON DROPDOWN   */
  .btn-dropdown-mobile-full {
    display: block;
    width: 100%;
  }

  .btn-dropdown-mobile-full .btn {
    width: 100%;
  }

  .btn-dropdown-mobile-full .dropdown-menu {
    left: 0;
    right: 0;
    width: auto;
  }

  /*   STACK SPLIT BUTTONS   */
  .btn-group-dropdown-mobile-stack {
    flex-direction: column;
    width: 100%;
  }

  .btn-group-dropdown-mobile-stack > .btn {
    width: 100%;
    border-right: var(--border-width-medium) solid;
    border-bottom: none;
  }

  .btn-group-dropdown-mobile-stack > .btn:not(:last-child) {
    border-radius: 0;
  }

  .btn-group-dropdown-mobile-stack > .btn:first-child {
    border-top-left-radius: var(--border-radius-md);
    border-top-right-radius: var(--border-radius-md);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .btn-group-dropdown-mobile-stack > .btn:last-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--border-radius-md);
    border-bottom-right-radius: var(--border-radius-md);
    margin-left: 0;
    margin-top: calc(var(--border-width-medium) * -1);
  }

  .btn-group-dropdown-mobile-stack .dropdown-toggle-split {
    border-left: none;
    border-top: var(--border-width-thin) solid var(--color-border-primary);
  }

  /*   BOTTOM SHEET STYLE   */
  .btn-dropdown-mobile-sheet .dropdown-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    overflow-y: auto;
    animation: slide-up var(--transition-normal);
  }

  @keyframes slide-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  /*   BUTTON GROUP WITH MULTIPLE DROPDOWNS   */
  .btn-group-multi-dropdown {
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
  }

  .btn-group-multi-dropdown .btn-dropdown {
    width: 100%;
  }

  .btn-group-multi-dropdown .btn {
    width: 100%;
  }

  /*   DROPDOWN MENU IMPROVEMENTS   */
  .btn-dropdown .dropdown-item {
    min-height: 44px;
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
  }

  /*   DROPUP, DROPEND, DROPSTART ON MOBILE   */
  .btn-dropup .dropdown-menu,
  .btn-dropend .dropdown-menu,
  .btn-dropstart .dropdown-menu {
    /* Convert to bottom sheet on mobile */
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

  /*   SAFE AREA SUPPORT   */
  .btn-dropdown .dropdown-menu {
    padding-bottom: max(var(--spacing-xs), env(safe-area-inset-bottom));
  }

  .btn-dropdown-mobile-sheet .dropdown-menu {
    padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
  }

  /*   TOUCH OPTIMIZATIONS   */
  .btn-dropdown .btn:active {
    transform: none;
    background-color: var(--color-bg-secondary);
  }

  /*   DISABLE HOVER EFFECTS   */
  @media (hover: none) {
    .btn-dropdown .btn:hover {
      transform: none;
    }
  }
}

/**
 * Wireframe UI Framework
 * Buttons Component
 */

/*   BASE BUTTON   */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: var(--border-width-medium) solid var(--color-border-primary);
  background-color: transparent;
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
}

.btn:hover {
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus {
  outline: var(--border-width-medium) solid var(--color-accent-blue);
  outline-offset: 2px;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/*   BUTTON SIZES   */
.btn-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  gap: var(--spacing-xs);
}

.btn-lg {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-lg);
  gap: var(--spacing-sm);
}

.btn-xl {
  padding: var(--spacing-lg) var(--spacing-xl);
  font-size: var(--font-size-xl);
  gap: var(--spacing-md);
}

/*   BUTTON VARIANTS   */
/* Primary - Blue accent */
.btn-primary {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.btn-primary:hover {
  background-color: var(--color-accent-blue);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-blue);
}

/* Success - Green accent */
.btn-success {
  border-color: var(--color-accent-green);
  color: var(--color-accent-green);
}

.btn-success:hover {
  background-color: var(--color-accent-green);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-green);
}

/* Warning - Yellow accent */
.btn-warning {
  border-color: var(--color-accent-yellow);
  color: var(--color-accent-yellow);
}

.btn-warning:hover {
  background-color: var(--color-accent-yellow);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-yellow);
}

/* Error/Danger - Red accent */
.btn-error,
.btn-danger {
  border-color: var(--color-accent-red);
  color: var(--color-accent-red);
}

.btn-error:hover,
.btn-danger:hover {
  background-color: var(--color-accent-red);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-red);
}

/* Info - Blue accent (lighter variant) */
.btn-info {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.btn-info:hover {
  background-color: var(--color-accent-blue);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-blue);
}

/* Secondary - Neutral */
.btn-secondary {
  border-color: var(--color-border-primary);
  color: var(--color-text-secondary);
}

.btn-secondary:hover {
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

/* Ghost - Minimal border */
.btn-ghost {
  border-color: transparent;
  color: var(--color-text-secondary);
}

.btn-ghost:hover {
  border-color: var(--color-border-primary);
  color: var(--color-text-primary);
}

/*   FILLED VARIANTS   */
.btn-filled {
  background-color: var(--color-bg-secondary);
}

.btn-primary.btn-filled {
  background-color: var(--color-accent-blue);
  color: var(--color-text-inverse);
}

.btn-primary.btn-filled:hover {
  background-color: transparent;
  color: var(--color-accent-blue);
}

.btn-success.btn-filled {
  background-color: var(--color-accent-green);
  color: var(--color-text-inverse);
}

.btn-success.btn-filled:hover {
  background-color: transparent;
  color: var(--color-accent-green);
}

.btn-error.btn-filled,
.btn-danger.btn-filled {
  background-color: var(--color-accent-red);
  color: var(--color-text-inverse);
}

.btn-error.btn-filled:hover,
.btn-danger.btn-filled:hover {
  background-color: transparent;
  color: var(--color-accent-red);
}

/*   BUTTON SHAPES   */
.btn-square {
  border-radius: 0;
}

.btn-rounded {
  border-radius: var(--border-radius-md);
}

.btn-pill {
  border-radius: 999px;
}

/*   ICON BUTTONS   */
.btn-icon {
  padding: var(--spacing-sm);
  width: 2.5rem;
  height: 2.5rem;
}

.btn-icon.btn-sm {
  width: 2rem;
  height: 2rem;
  padding: var(--spacing-xs);
}

.btn-icon.btn-lg {
  width: 3rem;
  height: 3rem;
  padding: var(--spacing-md);
}

.btn-icon.btn-xl {
  width: 3.5rem;
  height: 3.5rem;
  padding: var(--spacing-lg);
}

/*   BLOCK BUTTON   */
.btn-block {
  display: flex;
  width: 100%;
}

/*   BUTTON GROUP   */
.btn-group {
  display: inline-flex;
  vertical-align: middle;
}

.btn-group > .btn {
  position: relative;
  border-radius: 0;
}

.btn-group > .btn:not(:first-child) {
  margin-left: calc(var(--border-width-medium) * -1);
}

.btn-group > .btn:first-child {
  border-top-left-radius: var(--border-radius-sm);
  border-bottom-left-radius: var(--border-radius-sm);
}

.btn-group > .btn:last-child {
  border-top-right-radius: var(--border-radius-sm);
  border-bottom-right-radius: var(--border-radius-sm);
}

.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn.active {
  z-index: 1;
}

/*   BUTTON TOOLBAR   */
.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

/*   LOADING STATE   */
.btn.loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.loading::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 50%;
  left: 50%;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
  border: var(--border-width-medium) solid var(--color-border-primary);
  border-radius: 50%;
  border-top-color: var(--color-text-primary);
  animation: btn-spin 0.6s linear infinite;
}

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

/*   LINK BUTTON   */
.btn-link {
  border: none;
  background: none;
  color: var(--color-accent-blue);
  padding: 0;
  text-decoration: underline;
}

.btn-link:hover {
  color: var(--color-text-primary);
  background: none;
}

.btn-link:focus {
  outline: none;
  text-decoration: none;
}

/**
 * Wireframe UI Framework
 * Mobile Buttons - Touch-friendly sizing and mobile optimizations
 */

@media (max-width: 768px) {
  
  /*   BUTTON TOUCH OPTIMIZATION   */
  .btn {
    min-height: 44px; /* iOS recommended minimum */
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
  }

  /*   BUTTON SIZES   */
  .btn-sm {
    min-height: 36px;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .btn-lg {
    min-height: 52px;
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
  }

  .btn-xl {
    min-height: 60px;
    padding: var(--spacing-lg) var(--spacing-2xl);
    font-size: var(--font-size-xl);
  }

  /*   ICON BUTTONS   */
  .btn-icon {
    min-width: 44px;
    min-height: 44px;
    padding: var(--spacing-sm);
    width: 44px;
    height: 44px;
  }

  .btn-icon.btn-sm {
    min-width: 36px;
    min-height: 36px;
    width: 36px;
    height: 36px;
  }

  .btn-icon.btn-lg {
    min-width: 52px;
    min-height: 52px;
    width: 52px;
    height: 52px;
  }

  .btn-icon.btn-xl {
    min-width: 60px;
    min-height: 60px;
    width: 60px;
    height: 60px;
  }

  /*   BLOCK BUTTONS   */
  .btn-block {
    width: 100%;
  }

  /* Make all buttons block on mobile by default with utility class */
  .btn-mobile-block {
    display: flex;
    width: 100%;
  }

  /*   BUTTON GROUP   */
  .btn-group {
    display: flex;
    width: 100%;
  }

  .btn-group > .btn {
    flex: 1;
    min-width: 0; /* Allow buttons to shrink */
  }

  /* Stack button groups on small screens if needed */
  .btn-group-mobile-vertical {
    flex-direction: column;
  }

  .btn-group-mobile-vertical > .btn {
    width: 100%;
  }

  .btn-group-mobile-vertical > .btn:not(:first-child) {
    margin-left: 0;
    margin-top: calc(var(--border-width-medium) * -1);
    border-radius: 0;
  }

  .btn-group-mobile-vertical > .btn:first-child {
    border-top-left-radius: var(--border-radius-sm);
    border-top-right-radius: var(--border-radius-sm);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .btn-group-mobile-vertical > .btn:last-child {
    border-bottom-left-radius: var(--border-radius-sm);
    border-bottom-right-radius: var(--border-radius-sm);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  /*   BUTTON TOOLBAR   */
  .btn-toolbar {
    gap: var(--spacing-sm);
    flex-direction: column;
  }

  .btn-toolbar > .btn {
    width: 100%;
  }

  /* Keep horizontal if specified */
  .btn-toolbar-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .btn-toolbar-horizontal > .btn {
    width: auto;
    flex: 1;
  }

  /*   BUTTON SPACING   */
  /* Add more spacing between stacked buttons */
  .btn + .btn {
    margin-top: var(--spacing-sm);
  }

  /* For flex containers, use gap instead */
  .d-flex.gap-sm > .btn + .btn,
  .d-flex.gap-md > .btn + .btn {
    margin-top: 0;
  }

  /*   LOADING STATE   */
  .btn.loading::after {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: -0.625rem;
    margin-top: -0.625rem;
  }

  /*   LINK BUTTONS   */
  .btn-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /*   FLOATING ACTION BUTTON (FAB)   */
  .btn-fab {
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-index-fixed);
    box-shadow: 0 0 0 var(--border-width-medium) var(--color-border-primary);
  }

  .btn-fab:active {
    transform: scale(0.95);
  }

  /*   ACTIVE/FOCUS STATES   */
  /* Larger focus outline for better visibility on mobile */
  .btn:focus {
    outline-width: 3px;
    outline-offset: 3px;
  }

  /* More pronounced active state for touch feedback */
  .btn:active {
    transform: translateY(2px);
  }
}

/*   SMALL MOBILE (max-width: 480px)   */
@media (max-width: 480px) {
  .btn {
    font-size: var(--font-size-sm);
  }

  .btn-lg {
    font-size: var(--font-size-base);
  }

  .btn-xl {
    font-size: var(--font-size-lg);
  }

  /* Always stack button groups */
  .btn-group {
    flex-direction: column;
    width: 100%;
  }

  .btn-group > .btn {
    width: 100%;
  }

  .btn-group > .btn:not(:first-child) {
    margin-left: 0;
    margin-top: calc(var(--border-width-medium) * -1);
  }

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

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

  .btn-group > .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
  }

  /* FAB position adjustment */
  .btn-fab {
    bottom: var(--spacing-md);
    right: var(--spacing-md);
  }
}

/*   LANDSCAPE MODE   */
@media (max-height: 500px) and (orientation: landscape) {
  /* Reduce button padding in landscape mode */
  .btn {
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
  }

  .btn-lg {
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
  }
}

/**
 * Wireframe UI Framework
 * Cards Component
 */

/*   BASE CARD   */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-primary);
  border: var(--border-width-thin) solid var(--color-border-primary);
  transition: border-color var(--transition-fast);
}

.card:hover {
  border-color: var(--color-border-active);
}

/*   CARD SECTIONS   */
.card-header {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.card-body {
  flex: 1 1 auto;
  padding: var(--spacing-lg);
}

.card-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: var(--border-width-thin) solid var(--color-border-primary);
}

/*   CARD HEADER VARIATIONS   */
.card-header-primary {
  background-color: transparent;
  border-bottom-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.card-header-success {
  background-color: transparent;
  border-bottom-color: var(--color-accent-green);
  color: var(--color-accent-green);
}

.card-header-warning {
  background-color: transparent;
  border-bottom-color: var(--color-accent-yellow);
  color: var(--color-accent-yellow);
}

.card-header-error {
  background-color: transparent;
  border-bottom-color: var(--color-accent-red);
  color: var(--color-accent-red);
}

/*   CARD TITLE & TEXT   */
.card-title {
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

.card-subtitle {
  margin-top: calc(var(--spacing-sm) * -1);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.card-text {
  margin-bottom: var(--spacing-md);
  color: var(--color-text-primary);
}

.card-text:last-child {
  margin-bottom: 0;
}

/*   CARD IMAGE   */
.card-img {
  width: 100%;
  height: auto;
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.card-img-top {
  width: 100%;
  height: auto;
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.card-img-bottom {
  width: 100%;
  height: auto;
  border-top: var(--border-width-thin) solid var(--color-border-primary);
}

/*   CARD VARIANTS   */
.card-bordered {
  border-width: var(--border-width-medium);
}

.card-accent {
  border-left: var(--border-width-thick) solid var(--color-accent-blue);
}

.card-accent-green {
  border-left: var(--border-width-thick) solid var(--color-accent-green);
}

.card-accent-orange {
  border-left: var(--border-width-thick) solid var(--color-accent-orange);
}

.card-accent-red {
  border-left: var(--border-width-thick) solid var(--color-accent-red);
}

.card-accent-purple {
  border-left: var(--border-width-thick) solid var(--color-accent-purple);
}

/*   CARD ELEVATED   */
.card-elevated {
  background-color: var(--color-bg-secondary);
}

/*   HORIZONTAL CARD   */
.card-horizontal {
  flex-direction: row;
}

.card-horizontal .card-img {
  width: 200px;
  height: auto;
  border-bottom: none;
  border-right: var(--border-width-thin) solid var(--color-border-primary);
}

.card-horizontal .card-body {
  flex: 1;
}

/*   CARD LINK   */
.card-link {
  color: var(--color-accent-blue);
  text-decoration: none;
  margin-right: var(--spacing-md);
  transition: color var(--transition-fast);
}

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

.card-link:last-child {
  margin-right: 0;
}

/*   CLICKABLE CARD   */
.card-clickable {
  cursor: pointer;
  transition: all var(--transition-fast);
}

.card-clickable:hover {
  border-color: var(--color-text-primary);
  transform: translateY(-2px);
}

.card-clickable:active {
  transform: translateY(0);
}

/*   CARD GROUP   */
.card-group {
  display: flex;
  flex-flow: row wrap;
}

.card-group > .card {
  flex: 1 0 0%;
  margin-bottom: 0;
}

.card-group > .card:not(:first-child) {
  border-left: 0;
}

/*   CARD DECK   */
.card-deck {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.card-deck .card {
  flex: 1 0 0%;
}

/*   CARD COLUMNS   */
.card-columns {
  column-count: 3;
  column-gap: var(--spacing-lg);
}

.card-columns .card {
  display: inline-block;
  width: 100%;
  margin-bottom: var(--spacing-lg);
  break-inside: avoid;
}

/*   CARD LIST   */
.card-list {
  margin-bottom: 0;
}

.card-list-item {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
  transition: background-color var(--transition-fast);
}

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

.card-list-item:hover {
  background-color: var(--color-bg-secondary);
}

.card-list-item-clickable {
  cursor: pointer;
}

/*   CARD WITH ICON   */
.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--spacing-md);
  border: var(--border-width-medium) solid var(--color-border-primary);
  color: var(--color-text-primary);
}

.card-icon-sm {
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--spacing-sm);
}

.card-icon-lg {
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--spacing-lg);
}

.card-icon-primary {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.card-icon-success {
  border-color: var(--color-accent-green);
  color: var(--color-accent-green);
}

.card-icon-warning {
  border-color: var(--color-accent-yellow);
  color: var(--color-accent-yellow);
}

.card-icon-error {
  border-color: var(--color-accent-red);
  color: var(--color-accent-red);
}

/*   RESPONSIVE ADJUSTMENTS   */
@media (max-width: 768px) {
  .card-horizontal {
    flex-direction: column;
  }
  
  .card-horizontal .card-img {
    width: 100%;
    border-right: none;
    border-bottom: var(--border-width-thin) solid var(--color-border-primary);
  }
  
  .card-columns {
    column-count: 1;
  }
  
  .card-deck {
    flex-direction: column;
  }
}

@media (max-width: 1024px) {
  .card-columns {
    column-count: 2;
  }
}

/**
 * Wireframe UI Framework
 * Mobile Cards - Responsive card layouts and optimizations
 */

@media (max-width: 768px) {
  
  /*   BASE CARD   */
  .card {
    margin-bottom: var(--spacing-md);
  }

  /*   CARD SECTIONS   */
  .card-header {
    padding: var(--spacing-md);
  }

  .card-body {
    padding: var(--spacing-md);
  }

  .card-footer {
    padding: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  /*   CARD TITLE & TEXT   */
  .card-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
  }

  .card-subtitle {
    font-size: var(--font-size-sm);
  }

  .card-text {
    font-size: var(--font-size-base);
  }

  /*   HORIZONTAL CARD   */
  .card-horizontal {
    flex-direction: column;
  }

  .card-horizontal .card-img {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: var(--border-width-thin) solid var(--color-border-primary);
  }

  .card-horizontal .card-body {
    flex: 1;
    width: 100%;
  }

  /*   CARD LINK   */
  .card-link {
    display: inline-block;
    margin-right: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
  }

  /*   CLICKABLE CARD   */
  .card-clickable {
    /* Reduce hover transform on mobile */
    transition: border-color var(--transition-fast);
  }

  .card-clickable:hover {
    transform: none;
  }

  .card-clickable:active {
    transform: scale(0.98);
  }

  /*   CARD GROUP   */
  .card-group {
    flex-direction: column;
  }

  .card-group > .card {
    width: 100%;
    margin-bottom: var(--spacing-md);
  }

  .card-group > .card:not(:first-child) {
    border-left: var(--border-width-thin) solid var(--color-border-primary);
  }

  .card-group > .card:last-child {
    margin-bottom: 0;
  }

  /*   CARD DECK   */
  .card-deck {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .card-deck .card {
    width: 100%;
  }

  /*   CARD COLUMNS   */
  .card-columns {
    column-count: 1;
    column-gap: var(--spacing-md);
  }

  .card-columns .card {
    margin-bottom: var(--spacing-md);
  }

  /*   CARD LIST   */
  .card-list-item {
    padding: var(--spacing-md);
  }

  /*   CARD WITH ICON   */
  .card-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--spacing-sm);
  }

  .card-icon-sm {
    width: 2rem;
    height: 2rem;
  }

  .card-icon-lg {
    width: 3rem;
    height: 3rem;
  }

  /*   CARD TOUCH OPTIMIZATION   */
  .card-clickable {
    min-height: 44px;
    display: flex;
    flex-direction: column;
  }

  /*   CARD IMAGE OPTIMIZATION   */
  .card-img,
  .card-img-top,
  .card-img-bottom {
    max-height: 250px;
    object-fit: cover;
  }

  /*   CARD SPACING IN GRID   */
  .row > [class*="col"] > .card {
    height: auto;
    margin-bottom: var(--spacing-md);
  }
}

/*   SMALL MOBILE (max-width: 480px)   */
@media (max-width: 480px) {
  .card-header,
  .card-body,
  .card-footer {
    padding: var(--spacing-sm);
  }

  .card-title {
    font-size: var(--font-size-base);
  }

  .card-text {
    font-size: var(--font-size-sm);
  }

  .card-icon {
    width: 2rem;
    height: 2rem;
  }

  .card-img,
  .card-img-top,
  .card-img-bottom {
    max-height: 200px;
  }
}

/*   LANDSCAPE MODE   */
@media (max-height: 500px) and (orientation: landscape) {
  .card {
    margin-bottom: var(--spacing-sm);
  }

  .card-img,
  .card-img-top,
  .card-img-bottom {
    max-height: 150px;
  }
}

/**
 * Wireframe UI Framework
 * Carousel Component
 */

/*   CAROUSEL CONTAINER   */
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-bg-primary);
  border: var(--border-width-thin) solid var(--color-border-primary);
}

/*   CAROUSEL VIEWPORT   */
.carousel-viewport {
  width: 100%;
  overflow: hidden;
}

/*   CAROUSEL TRACK   */
.carousel-track {
  display: flex;
  transition: transform var(--transition-slow);
  will-change: transform;
}

/*   CAROUSEL ITEM   */
.carousel-item {
  flex: 0 0 100%;
  padding: var(--spacing-md);
  box-sizing: border-box;
}

.carousel-item img {
  width: 100%;
  height: auto;
  display: block;
  border: var(--border-width-thin) solid var(--color-border-primary);
}

/*   CAROUSEL CONTROLS   */
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background-color: var(--color-bg-secondary);
  border: var(--border-width-medium) solid var(--color-border-primary);
  color: var(--color-text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  z-index: 10;
}

.carousel-control:hover:not(:disabled) {
  background-color: var(--color-bg-tertiary);
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.carousel-control:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.carousel-control-prev {
  left: var(--spacing-md);
}

.carousel-control-next {
  right: var(--spacing-md);
}

.carousel-control-icon {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

/*   CAROUSEL INDICATORS   */
.carousel-indicators {
  position: absolute;
  bottom: var(--spacing-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--spacing-sm);
  z-index: 10;
}

.carousel-indicator {
  width: 12px;
  height: 12px;
  background-color: var(--color-bg-secondary);
  border: var(--border-width-medium) solid var(--color-border-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
}

.carousel-indicator:hover {
  border-color: var(--color-accent-blue);
}

.carousel-indicator.active {
  background-color: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
}

/*   CAROUSEL SIZES   */
.carousel-sm {
  min-height: 200px;
}

.carousel-sm .carousel-item {
  padding: var(--spacing-sm);
}

.carousel-md {
  min-height: 300px;
}

.carousel-lg {
  min-height: 400px;
}

.carousel-lg .carousel-item {
  padding: var(--spacing-lg);
}

.carousel-xl {
  min-height: 500px;
}

.carousel-xl .carousel-item {
  padding: var(--spacing-xl);
}

/*   CAROUSEL CONTENT STYLES   */
.carousel-item-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.carousel-item-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
}

.carousel-item-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 600px;
}

/*   RESPONSIVE   */
@media (max-width: 768px) {
  .carousel-control {
    width: 36px;
    height: 36px;
  }

  .carousel-control-prev {
    left: var(--spacing-sm);
  }

  .carousel-control-next {
    right: var(--spacing-sm);
  }

  .carousel-control-icon {
    font-size: var(--font-size-xl);
  }

  .carousel-indicators {
    bottom: var(--spacing-sm);
  }

  .carousel-indicator {
    width: 10px;
    height: 10px;
  }

  .carousel-item {
    padding: var(--spacing-sm);
  }

  .carousel-item-title {
    font-size: var(--font-size-lg);
  }

  .carousel-item-description {
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 480px) {
  .carousel-sm {
    min-height: 150px;
  }

  .carousel-md {
    min-height: 200px;
  }

  .carousel-lg {
    min-height: 300px;
  }

  .carousel-xl {
    min-height: 350px;
  }
}

/**
 * Wireframe UI Framework
 * Carousel Component - Mobile Styles
 */

@media (max-width: 768px) {
  .carousel {
    border-width: var(--border-width-thin);
  }

  .carousel-control {
    width: 36px;
    height: 36px;
  }

  .carousel-control-prev {
    left: var(--spacing-sm);
  }

  .carousel-control-next {
    right: var(--spacing-sm);
  }

  .carousel-control-icon {
    font-size: var(--font-size-xl);
  }

  .carousel-indicators {
    bottom: var(--spacing-sm);
    gap: var(--spacing-xs);
  }

  .carousel-indicator {
    width: 10px;
    height: 10px;
  }

  .carousel-item {
    padding: var(--spacing-sm);
  }

  .carousel-item-title {
    font-size: var(--font-size-lg);
  }

  .carousel-item-description {
    font-size: var(--font-size-sm);
  }

  .carousel-sm {
    min-height: 150px;
  }

  .carousel-md {
    min-height: 200px;
  }

  .carousel-lg {
    min-height: 300px;
  }

  .carousel-xl {
    min-height: 350px;
  }
}

@media (max-width: 480px) {
  .carousel-control {
    width: 32px;
    height: 32px;
  }

  .carousel-control-icon {
    font-size: var(--font-size-lg);
  }

  .carousel-sm {
    min-height: 120px;
  }

  .carousel-md {
    min-height: 150px;
  }

  .carousel-lg {
    min-height: 250px;
  }

  .carousel-xl {
    min-height: 300px;
  }

  .carousel-item-title {
    font-size: var(--font-size-base);
  }

  .carousel-item-description {
    font-size: var(--font-size-xs);
  }
}

/* Touch-friendly enhancements */
@media (hover: none) and (pointer: coarse) {
  .carousel-control {
    width: 44px;
    height: 44px;
  }

  .carousel-indicator {
    width: 12px;
    height: 12px;
    margin: var(--spacing-xs);
  }
}

/**
 * Wireframe UI Framework
 * Charts Component Styles
 */

/*   CHART BASE STYLES   */
.chart {
  background-color: var(--color-bg-primary);
  border: var(--border-width-thin) solid var(--color-border-primary);
  padding: var(--spacing-lg);
}

.chart-header {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.chart-title {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.chart-subtitle {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.chart-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/*   CHART SIZES   */
.chart-sm {
  padding: var(--spacing-md);
}

.chart-sm .chart-title {
  font-size: var(--font-size-lg);
}

.chart-md {
  padding: var(--spacing-lg);
}

.chart-lg {
  padding: var(--spacing-xl);
}

.chart-lg .chart-title {
  font-size: var(--font-size-2xl);
}

.chart-xl {
  padding: var(--spacing-2xl);
}

.chart-xl .chart-title {
  font-size: var(--font-size-3xl);
}

/*   PIE CHART   */
.pie-chart-svg {
  max-width: 400px;
  margin: 0 auto;
  display: block;
}

.pie-slice {
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.pie-slice:hover {
  opacity: 0.8;
}

.pie-chart-center-label {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  fill: var(--color-text-primary);
}

/*   DOUGHNUT CHART   */
.doughnut-chart-svg {
  max-width: 400px;
  margin: 0 auto;
  display: block;
}

.doughnut-slice {
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.doughnut-slice:hover {
  opacity: 0.8;
}

.doughnut-chart-center-label {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  fill: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.doughnut-chart-center-value {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  fill: var(--color-text-primary);
}

/*   BAR CHART - HORIZONTAL   */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.bar-chart-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--spacing-md);
  align-items: center;
}

.bar-chart-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-align: right;
  padding-right: var(--spacing-sm);
}

.bar-chart-bar-container {
  position: relative;
  height: 32px;
  background-color: var(--color-bg-secondary);
  border: var(--border-width-thin) solid var(--color-border-primary);
}

.bar-chart-bar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--spacing-sm);
  transition: width var(--transition-slow);
}

.bar-chart-value {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/*   BAR CHART - VERTICAL   */
.bar-chart-vertical {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: var(--spacing-md);
  height: 300px;
  padding: var(--spacing-md) 0;
}

.bar-chart-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
}

.bar-chart-bar-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.bar-chart-bar-vertical {
  width: 100%;
  max-width: 60px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--spacing-xs);
  border: var(--border-width-thin) solid var(--color-border-primary);
  transition: height var(--transition-slow);
  position: relative;
}

.bar-chart-value-vertical {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.bar-chart-label-vertical {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-align: center;
  word-wrap: break-word;
  max-width: 100%;
}

/*   CHART LEGEND   */
.chart-legend {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background-color: var(--color-bg-secondary);
  border: var(--border-width-thin) solid var(--color-border-primary);
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  transition: background-color var(--transition-fast);
}

.chart-legend-item:hover {
  background-color: var(--color-bg-tertiary);
}

.chart-legend-color {
  width: 16px;
  height: 16px;
  border: var(--border-width-thin) solid var(--color-border-primary);
  flex-shrink: 0;
}

.chart-legend-label {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.chart-legend-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono);
}

/*   RESPONSIVE STYLES   */
@media (max-width: 768px) {
  .chart {
    padding: var(--spacing-md);
  }

  .chart-title {
    font-size: var(--font-size-lg);
  }

  .bar-chart-row {
    grid-template-columns: 100px 1fr;
    gap: var(--spacing-sm);
  }

  .bar-chart-label {
    font-size: var(--font-size-xs);
  }

  .bar-chart-bar-container {
    height: 24px;
  }

  .bar-chart-vertical {
    height: 200px;
  }

  .pie-chart-svg,
  .doughnut-chart-svg {
    max-width: 300px;
  }

  .chart-legend {
    padding: var(--spacing-sm);
  }

  .chart-legend-item {
    padding: var(--spacing-xs);
  }

  .chart-legend-color {
    width: 12px;
    height: 12px;
  }

  .chart-legend-label,
  .chart-legend-value {
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 480px) {
  .chart {
    padding: var(--spacing-sm);
  }

  .chart-header {
    margin-bottom: var(--spacing-md);
  }

  .chart-title {
    font-size: var(--font-size-base);
  }

  .bar-chart-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }

  .bar-chart-label {
    text-align: left;
    padding-right: 0;
  }

  .bar-chart-vertical {
    height: 150px;
    gap: var(--spacing-sm);
  }

  .bar-chart-bar-vertical {
    max-width: 40px;
  }

  .pie-chart-svg,
  .doughnut-chart-svg {
    max-width: 250px;
  }

  .chart-legend {
    gap: var(--spacing-xs);
  }
}

/**
 * Wireframe UI Framework
 * Charts Component - Mobile Styles
 */

@media (max-width: 768px) {
  .chart {
    padding: var(--spacing-md);
  }

  .chart-title {
    font-size: var(--font-size-lg);
  }

  .chart-subtitle {
    font-size: var(--font-size-xs);
  }

  /* Pie and Doughnut Charts */
  .pie-chart-svg,
  .doughnut-chart-svg {
    max-width: 300px;
  }

  .pie-chart-center-label {
    font-size: 12px;
  }

  .doughnut-chart-center-label {
    font-size: 10px;
  }

  .doughnut-chart-center-value {
    font-size: 16px;
  }

  /* Bar Charts */
  .bar-chart-row {
    grid-template-columns: 100px 1fr;
    gap: var(--spacing-sm);
  }

  .bar-chart-label {
    font-size: var(--font-size-xs);
  }

  .bar-chart-bar-container {
    height: 24px;
  }

  .bar-chart-value {
    font-size: 10px;
  }

  .bar-chart-vertical {
    height: 200px;
    gap: var(--spacing-sm);
  }

  .bar-chart-bar-vertical {
    max-width: 40px;
  }

  .bar-chart-label-vertical {
    font-size: 10px;
  }

  /* Legend */
  .chart-legend {
    padding: var(--spacing-sm);
    gap: var(--spacing-xs);
  }

  .chart-legend-item {
    padding: var(--spacing-xs);
  }

  .chart-legend-color {
    width: 12px;
    height: 12px;
  }

  .chart-legend-label,
  .chart-legend-value {
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 480px) {
  .chart {
    padding: var(--spacing-sm);
  }

  .chart-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
  }

  .chart-title {
    font-size: var(--font-size-base);
  }

  .chart-container {
    gap: var(--spacing-md);
  }

  /* Pie and Doughnut Charts */
  .pie-chart-svg,
  .doughnut-chart-svg {
    max-width: 250px;
  }

  /* Bar Charts */
  .bar-chart {
    gap: var(--spacing-sm);
  }

  .bar-chart-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }

  .bar-chart-label {
    text-align: left;
    padding-right: 0;
    padding-bottom: var(--spacing-xs);
  }

  .bar-chart-bar-container {
    height: 20px;
  }

  .bar-chart-vertical {
    height: 150px;
  }

  .bar-chart-bar-vertical {
    max-width: 32px;
  }
}

/* Touch-friendly enhancements */
@media (hover: none) and (pointer: coarse) {
  .chart {
    padding: var(--spacing-md);
  }

  .bar-chart-bar-container {
    height: 28px;
  }

  .chart-legend-item {
    padding: var(--spacing-sm);
    min-height: 44px;
  }

  .chart-legend-color {
    width: 14px;
    height: 14px;
  }
}

/**
 * Wireframe UI Framework
 * Color Picker Component
 */

/*   COLOR PICKER CONTAINER   */
.color-picker {
  position: relative;
  display: inline-block;
  width: 100%;
}

/*   COLOR PICKER DISPLAY   */
.color-picker-display {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
}

.color-picker-swatch {
  width: 2.5rem;
  height: 2.5rem;
  border: var(--border-width-medium) solid var(--color-border-primary);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.color-picker-swatch:hover {
  border-color: var(--color-border-active);
}

.color-picker-input {
  flex: 1;
  text-transform: uppercase;
}

/*   COLOR PICKER ICON   */
.color-picker-icon {
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-tertiary);
}

/*   COLOR PICKER BACKDROP   */
.color-picker-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-index-dropdown) - 1);
  background: transparent;
}

/*   COLOR PICKER PANEL   */
.color-picker-panel {
  position: absolute;
  top: calc(100% + var(--spacing-xs));
  left: 0;
  z-index: var(--z-index-dropdown);
  min-width: 280px;
  padding: var(--spacing-md);
  background-color: var(--color-bg-primary);
  border: var(--border-width-medium) solid var(--color-border-primary);
  animation: dropdown-fade-in var(--transition-fast);
}

/*   COLOR PRESETS   */
.color-picker-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.color-preset {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: var(--border-width-medium) solid var(--color-border-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: none;
}

.color-preset:hover {
  border-color: var(--color-border-active);
  transform: scale(1.1);
}

.color-preset.active {
  border-color: var(--color-accent-blue);
  border-width: var(--border-width-thick);
}

/*   CUSTOM COLOR INPUT   */
.color-picker-custom {
  padding-top: var(--spacing-md);
  border-top: var(--border-width-thin) solid var(--color-border-primary);
}

.color-picker-custom-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.color-picker-native {
  width: 100%;
  height: 3rem;
  border: var(--border-width-medium) solid var(--color-border-primary);
  cursor: pointer;
  background-color: transparent;
}

.color-picker-native:hover {
  border-color: var(--color-border-active);
}

/*   SIZES   */
.color-picker-sm .color-picker-swatch {
  width: 2rem;
  height: 2rem;
}

.color-picker-lg .color-picker-swatch {
  width: 3rem;
  height: 3rem;
}

/*   VALIDATION STATES   */
.color-picker-valid .color-picker-input {
  border-color: var(--color-accent-green);
}

.color-picker-invalid .color-picker-input {
  border-color: var(--color-accent-red);
}

/*   ANIMATIONS   */
@keyframes dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Wireframe UI Framework
 * Color Picker Component - Mobile
 */

@media (max-width: 768px) {
  /*   COLOR PICKER PANEL   */
  .color-picker-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: auto;
    max-width: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    animation: slide-up var(--transition-normal);
  }

  /*   COLOR PRESETS   */
  .color-picker-presets {
    grid-template-columns: repeat(6, 1fr);
  }

  /*   ANIMATIONS   */
  @keyframes slide-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
}

/**
 * Wireframe UI Framework
 * Date Picker Component
 */

/*   DATE PICKER CONTAINER   */
.date-picker {
  position: relative;
  display: inline-block;
  width: 100%;
}

/*   DATE PICKER INPUT   */
.date-picker-input-wrapper {
  position: relative;
  width: 100%;
}

.date-picker-input {
  padding-right: calc(var(--spacing-xl) + var(--spacing-md));
  cursor: pointer;
}

.date-picker-icon {
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: var(--font-size-lg);
}

/*   DATE PICKER BACKDROP   */
.date-picker-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-index-dropdown) - 1);
  background: transparent;
}

/*   DATE PICKER PANEL   */
.date-picker-panel {
  position: absolute;
  top: calc(100% + var(--spacing-xs));
  left: 0;
  z-index: var(--z-index-dropdown);
  min-width: 320px;
  padding: var(--spacing-md);
  background-color: var(--color-bg-primary);
  border: var(--border-width-medium) solid var(--color-border-primary);
  animation: dropdown-fade-in var(--transition-fast);
}

/*   DATE PICKER HEADER   */
.date-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
  gap: var(--spacing-sm);
}

.date-picker-header-text {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex: 1;
  justify-content: center;
}

.date-picker-select {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  background-color: var(--color-bg-secondary);
  border: var(--border-width-thin) solid var(--color-border-primary);
  color: var(--color-text-primary);
  cursor: pointer;
}

.date-picker-nav {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  line-height: 1;
}

/*   DATE PICKER CALENDAR   */
.date-picker-calendar {
  margin-bottom: var(--spacing-md);
}

.date-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.date-picker-weekday {
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-tertiary);
  padding: var(--spacing-xs);
}

.date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-xs);
}

.date-picker-day {
  aspect-ratio: 1;
  padding: var(--spacing-xs);
  font-size: var(--font-size-sm);
  background-color: transparent;
  border: var(--border-width-thin) solid transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.date-picker-day:hover:not(:disabled) {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border-primary);
}

.date-picker-day:disabled {
  color: var(--color-text-tertiary);
  opacity: 0.3;
  cursor: not-allowed;
}

.date-picker-day.other-month {
  color: var(--color-text-tertiary);
  opacity: 0.4;
}

.date-picker-day.today {
  border-color: var(--color-accent-blue);
  font-weight: var(--font-weight-bold);
}

.date-picker-day.selected {
  background-color: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
}

/*   DATE PICKER FOOTER   */
.date-picker-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: var(--border-width-thin) solid var(--color-border-primary);
}

/*   SIZES   */
.date-picker-sm .date-picker-panel {
  min-width: 280px;
}

.date-picker-sm .date-picker-day {
  font-size: var(--font-size-xs);
}

.date-picker-lg .date-picker-panel {
  min-width: 360px;
}

.date-picker-lg .date-picker-day {
  font-size: var(--font-size-base);
}

/*   VALIDATION STATES   */
.date-picker-valid .date-picker-input {
  border-color: var(--color-accent-green);
}

.date-picker-invalid .date-picker-input {
  border-color: var(--color-accent-red);
}

/*   ANIMATIONS   */
@keyframes dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Wireframe UI Framework
 * Date Picker Component - Mobile
 */

@media (max-width: 768px) {
  /*   DATE PICKER PANEL   */
  .date-picker-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: auto;
    max-width: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    animation: slide-up var(--transition-normal);
  }

  /*   DATE PICKER HEADER   */
  .date-picker-header-text {
    flex-direction: column;
  }

  /*   ANIMATIONS   */
  @keyframes slide-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
}

/**
 * Wireframe UI Framework
 * Date Range Picker Component
 */

/*   DATE RANGE PICKER CONTAINER   */
.date-range-picker {
  position: relative;
  display: inline-block;
  width: 100%;
}

/*   DATE RANGE PICKER INPUT   */
.date-range-picker-input-wrapper {
  position: relative;
  width: 100%;
}

.date-range-picker-input {
  padding-right: calc(var(--spacing-xl) + var(--spacing-md));
  cursor: pointer;
}

.date-range-picker-icon {
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: var(--font-size-lg);
}

/*   DATE RANGE PICKER BACKDROP   */
.date-range-picker-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-index-dropdown) - 1);
  background: transparent;
}

/*   DATE RANGE PICKER PANEL   */
.date-range-picker-panel {
  position: absolute;
  top: calc(100% + var(--spacing-xs));
  left: 0;
  z-index: var(--z-index-dropdown);
  min-width: 660px;
  padding: var(--spacing-md);
  background-color: var(--color-bg-primary);
  border: var(--border-width-medium) solid var(--color-border-primary);
  animation: dropdown-fade-in var(--transition-fast);
}

/*   DATE RANGE PICKER CALENDARS   */
.date-range-picker-calendars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.date-range-calendar {
  min-width: 0;
}

/*   DATE RANGE PICKER HEADER   */
.date-range-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
  gap: var(--spacing-sm);
}

.date-range-picker-header-text {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex: 1;
  justify-content: center;
}

.date-range-picker-select {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  background-color: var(--color-bg-secondary);
  border: var(--border-width-thin) solid var(--color-border-primary);
  color: var(--color-text-primary);
  cursor: pointer;
}

.date-range-picker-nav {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  line-height: 1;
}

/*   DATE RANGE PICKER CALENDAR   */
.date-range-picker-calendar {
  margin-bottom: 0;
}

.date-range-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.date-range-picker-weekday {
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-tertiary);
  padding: var(--spacing-xs);
}

.date-range-picker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-xs);
}

.date-range-picker-day {
  aspect-ratio: 1;
  padding: var(--spacing-xs);
  font-size: var(--font-size-sm);
  background-color: transparent;
  border: var(--border-width-thin) solid transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.date-range-picker-day:hover:not(:disabled) {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border-primary);
}

.date-range-picker-day:disabled {
  color: var(--color-text-tertiary);
  opacity: 0.3;
  cursor: not-allowed;
}

.date-range-picker-day.other-month {
  color: var(--color-text-tertiary);
  opacity: 0.4;
}

.date-range-picker-day.today {
  border-color: var(--color-accent-blue);
  font-weight: var(--font-weight-bold);
}

.date-range-picker-day.selected-start,
.date-range-picker-day.selected-end {
  background-color: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
}

.date-range-picker-day.in-range {
  background-color: var(--color-bg-secondary);
  border-color: transparent;
}

/*   DATE RANGE PICKER FOOTER   */
.date-range-picker-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: var(--border-width-thin) solid var(--color-border-primary);
}

/*   SIZES   */
.date-range-picker-sm .date-range-picker-panel {
  min-width: 560px;
}

.date-range-picker-sm .date-range-picker-day {
  font-size: var(--font-size-xs);
}

.date-range-picker-lg .date-range-picker-panel {
  min-width: 760px;
}

.date-range-picker-lg .date-range-picker-day {
  font-size: var(--font-size-base);
}

/*   VALIDATION STATES   */
.date-range-picker-valid .date-range-picker-input {
  border-color: var(--color-accent-green);
}

.date-range-picker-invalid .date-range-picker-input {
  border-color: var(--color-accent-red);
}

/*   ANIMATIONS   */
@keyframes dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Wireframe UI Framework
 * Date Range Picker Component - Mobile
 */

@media (max-width: 768px) {
  /*   DATE RANGE PICKER PANEL   */
  .date-range-picker-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: auto;
    max-width: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    animation: slide-up var(--transition-normal);
    max-height: 90vh;
    overflow-y: auto;
  }

  /*   DATE RANGE PICKER CALENDARS   */
  .date-range-picker-calendars {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  /*   DATE RANGE PICKER HEADER   */
  .date-range-picker-header-text {
    flex-direction: column;
  }

  /*   DATE RANGE PICKER FOOTER   */
  .date-range-picker-footer {
    flex-wrap: wrap;
  }

  .date-range-picker-footer .btn {
    flex: 1;
    min-width: calc(50% - var(--spacing-xs));
  }

  /*   ANIMATIONS   */
  @keyframes slide-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
}

/**
 * Wireframe UI Framework
 * Dialog Component - Confirmation dialogs, alerts, and prompts
 */

/*   DIALOG OVERLAY   */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-index-modal);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

.dialog-overlay.show {
  display: flex;
}

/*   DIALOG CONTAINER   */
.dialog {
  position: relative;
  width: 90%;
  max-width: 500px;
  pointer-events: auto;
  background-color: var(--color-bg-primary);
  border: var(--border-width-medium) solid var(--color-border-primary);
  animation: dialog-fade-in var(--transition-normal);
}

/*   DIALOG CONTENT   */
.dialog-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/*   DIALOG HEADER   */
.dialog-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.dialog-title {
  margin-bottom: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

/*   DIALOG BODY   */
.dialog-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--spacing-xl) var(--spacing-lg);
  color: var(--color-text-primary);
}

.dialog-message {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  margin-bottom: 0;
}

/*   DIALOG INPUT (for prompt type)   */
.dialog-input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  margin-top: var(--spacing-md);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border: var(--border-width-medium) solid var(--color-border-primary);
  outline: none;
  transition: border-color var(--transition-fast);
}

.dialog-input:focus {
  border-color: var(--color-accent-blue);
}

.dialog-input::placeholder {
  color: var(--color-text-tertiary);
}

/*   DIALOG FOOTER   */
.dialog-footer {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: var(--border-width-thin) solid var(--color-border-primary);
  gap: var(--spacing-sm);
}

.dialog-footer > * {
  margin: 0;
}

/*   DIALOG BUTTONS   */
.dialog-footer .btn {
  min-width: 100px;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-align: center;
  cursor: pointer;
  border: var(--border-width-medium) solid var(--color-border-primary);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
}

.dialog-footer .btn:hover {
  border-color: var(--color-text-primary);
}

.dialog-footer .btn:focus {
  outline: var(--border-width-medium) solid var(--color-accent-blue);
  outline-offset: 2px;
}

.dialog-footer .btn-primary {
  background-color: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
  color: var(--color-text-inverse);
}

.dialog-footer .btn-primary:hover {
  background-color: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
  opacity: 0.9;
}

.dialog-footer .btn-secondary {
  background-color: transparent;
  border-color: var(--color-border-primary);
  color: var(--color-text-primary);
}

.dialog-footer .btn-secondary:hover {
  border-color: var(--color-text-primary);
}

/*   DIALOG VARIANTS   */
.dialog-success .dialog-header {
  border-bottom-color: var(--color-accent-green);
}

.dialog-success .dialog-title {
  color: var(--color-accent-green);
}

.dialog-warning .dialog-header {
  border-bottom-color: var(--color-accent-yellow);
}

.dialog-warning .dialog-title {
  color: var(--color-accent-yellow);
}

.dialog-error .dialog-header {
  border-bottom-color: var(--color-accent-red);
}

.dialog-error .dialog-title {
  color: var(--color-accent-red);
}

.dialog-info .dialog-header {
  border-bottom-color: var(--color-accent-blue);
}

.dialog-info .dialog-title {
  color: var(--color-accent-blue);
}

/*   DIALOG TYPES   */
.dialog-alert .dialog-footer {
  justify-content: center;
}

.dialog-confirmation .dialog-footer,
.dialog-prompt .dialog-footer {
  justify-content: flex-end;
}

/*   ANIMATIONS   */
@keyframes dialog-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes dialog-fade-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
  }
}

/*   RESPONSIVE   */
@media (min-width: 576px) {
  .dialog {
    width: 85%;
    max-width: 500px;
  }
}

@media (min-width: 768px) {
  .dialog {
    width: 80%;
  }
}

/**
 * Wireframe UI Framework
 * Mobile Dialog - Responsive dialog component
 */

@media (max-width: 768px) {
  
  /*   DIALOG CONTAINER   */
  .dialog {
    width: 95%;
    max-width: 95%;
    margin: var(--spacing-md);
  }

  /*   DIALOG HEADER   */
  .dialog-header {
    padding: var(--spacing-md);
  }

  .dialog-title {
    font-size: var(--font-size-lg);
  }

  /*   DIALOG BODY   */
  .dialog-body {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .dialog-message {
    font-size: var(--font-size-sm);
  }

  /*   DIALOG INPUT   */
  .dialog-input {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

  /*   DIALOG FOOTER   */
  .dialog-footer {
    padding: var(--spacing-sm) var(--spacing-md);
    gap: var(--spacing-xs);
  }

  .dialog-footer .btn {
    min-width: 80px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }
}

/*   SMALL MOBILE (max-width: 480px)   */
@media (max-width: 480px) {
  .dialog {
    width: 100%;
    max-width: 100%;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .dialog-overlay {
    align-items: stretch;
  }

  .dialog-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .dialog-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-md);
  }

  .dialog-footer {
    flex-direction: column;
    width: 100%;
  }

  .dialog-footer .btn {
    width: 100%;
    min-width: auto;
  }

  /* Reverse button order on mobile for better thumb reach */
  .dialog-footer {
    flex-direction: column-reverse;
  }
}

/*   LANDSCAPE MODE   */
@media (max-height: 500px) and (orientation: landscape) {
  .dialog {
    max-height: 90vh;
    overflow-y: auto;
  }

  .dialog-body {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .dialog-header {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .dialog-footer {
    padding: var(--spacing-xs) var(--spacing-md);
  }
}

/*   TOUCH TARGETS   */
@media (max-width: 768px) {
  .dialog-footer .btn {
    min-height: 44px;
  }

  .dialog-input {
    min-height: 44px;
  }
}

/*   REDUCED MOTION   */
@media (prefers-reduced-motion: reduce) {
  .dialog {
    animation: none;
  }
}

/**
 * Wireframe UI Framework
 * Dropdowns Component
 */


/*   DROPDOWN CONTAINER   */
.dropdown {
  position: relative;
  display: inline-block;
}

/*   DROPDOWN TOGGLE   */
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.dropdown-toggle::after {
  content: '';
  display: inline-block;
  margin-left: var(--spacing-xs);
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-bottom: 0;
  border-left: 4px solid transparent;
}

.dropdown-toggle-split {
  padding-right: var(--spacing-sm);
  padding-left: var(--spacing-sm);
}

.dropdown-toggle-split::after {
  margin-left: 0;
}

/*   DROPDOWN MENU   */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-index-dropdown);
  display: none;
  min-width: 10rem;
  margin: var(--spacing-xs) 0 0;
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  text-align: left;
  list-style: none;
  background-color: var(--color-bg-primary);
  border: var(--border-width-medium) solid var(--color-border-primary);
  animation: dropdown-fade-in var(--transition-fast);
}

.dropdown-menu.show {
  display: block;
}

/*   DROPDOWN MENU ALIGNMENT   */
.dropdown-menu-right {
  right: 0;
  left: auto;
}

.dropdown-menu-left {
  right: auto;
  left: 0;
}

/*   DROPDOWN MENU POSITIONING   */
.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: var(--spacing-xs);
}

.dropend .dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: var(--spacing-xs);
}

.dropstart .dropdown-menu {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: var(--spacing-xs);
}

/*   DROPDOWN ITEMS   */
.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  clear: both;
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  border-left: var(--border-width-medium) solid transparent;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--color-text-primary);
  background-color: var(--color-bg-secondary);
  border-left-color: var(--color-border-primary);
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--color-accent-blue);
  background-color: var(--color-bg-secondary);
  border-left-color: var(--color-accent-blue);
}

.dropdown-item:disabled,
.dropdown-item.disabled {
  color: var(--color-text-tertiary);
  pointer-events: none;
  background-color: transparent;
  opacity: 0.4;
}

/*   DROPDOWN ITEM WITH ICON   */
.dropdown-item-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.dropdown-item-icon .icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/*   DROPDOWN DIVIDER   */
.dropdown-divider {
  height: 0;
  margin: var(--spacing-xs) 0;
  overflow: hidden;
  border-top: var(--border-width-thin) solid var(--color-border-primary);
}

/*   DROPDOWN HEADER   */
.dropdown-header {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/*   DROPDOWN TEXT   */
.dropdown-item-text {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-secondary);
}

/*   DROPDOWN SUBMENU   */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: calc(var(--spacing-xs) * -1);
  margin-left: calc(var(--border-width-medium) * -1);
}

.dropdown-submenu > .dropdown-toggle::after {
  content: '';
  display: inline-block;
  margin-left: auto;
  border-top: 4px solid transparent;
  border-right: 0;
  border-bottom: 4px solid transparent;
  border-left: 4px solid;
}

/*   DROPDOWN WITH SEARCH   */
.dropdown-search {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.dropdown-search .form-input {
  width: 100%;
  border-color: var(--color-border-primary);
}

/*   DROPDOWN WITH FOOTER   */
.dropdown-footer {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: var(--border-width-thin) solid var(--color-border-primary);
  background-color: var(--color-bg-secondary);
}

/*   DROPDOWN SIZES   */
.dropdown-menu-sm {
  min-width: 8rem;
  font-size: var(--font-size-sm);
}

.dropdown-menu-lg {
  min-width: 20rem;
}

.dropdown-menu-xl {
  min-width: 30rem;
}

/*   MEGA MENU   */
.dropdown-mega {
  position: static;
}

.dropdown-mega .dropdown-menu {
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: var(--spacing-lg);
  gap: var(--spacing-xl);
}

.dropdown-mega-column {
  flex: 1;
  min-width: 200px;
}

.dropdown-mega-heading {
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-primary);
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
  padding-bottom: var(--spacing-xs);
}

/*   DROPDOWN ANIMATIONS   */
@keyframes dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*   CONTEXT MENU   */
.context-menu {
  position: fixed;
  z-index: var(--z-index-dropdown);
  display: none;
  min-width: 12rem;
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  list-style: none;
  background-color: var(--color-bg-primary);
  border: var(--border-width-medium) solid var(--color-border-primary);
  animation: dropdown-fade-in var(--transition-fast);
}

.context-menu.show {
  display: block;
}

/*   SELECT DROPDOWN   */
.select-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

.select-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-bg-primary);
  border: var(--border-width-medium) solid var(--color-border-primary);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.select-dropdown-toggle:hover {
  border-color: var(--color-border-active);
}

.select-dropdown.open .select-dropdown-toggle {
  border-color: var(--color-accent-blue);
}

.select-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-index-dropdown);
  display: none;
  max-height: 300px;
  margin-top: var(--spacing-xs);
  padding: var(--spacing-xs) 0;
  background-color: var(--color-bg-primary);
  border: var(--border-width-medium) solid var(--color-border-primary);
  overflow-y: auto;
  animation: dropdown-fade-in var(--transition-fast);
}

.select-dropdown.open .select-dropdown-menu {
  display: block;
}

.select-dropdown-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

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

.select-dropdown-item.selected {
  background-color: var(--color-bg-secondary);
  color: var(--color-accent-blue);
  border-left: var(--border-width-medium) solid var(--color-accent-blue);
}

/*   MULTISELECT DROPDOWN   */
.multiselect-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.multiselect-dropdown-item input[type="checkbox"] {
  margin: 0;
}

/*   RESPONSIVE   */
@media (max-width: 768px) {
  .dropdown-menu {
    position: fixed;
    top: auto;
    right: var(--spacing-md);
    bottom: var(--spacing-md);
    left: var(--spacing-md);
    margin: 0;
    max-width: none;
    max-height: 50vh;
    overflow-y: auto;
  }
}

/*   DROPDOWN BACKDROP   */
.dropdown-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-index-dropdown) - 1);
  background: transparent;
}

/**
 * Wireframe UI Framework
 * Mobile Dropdowns - Responsive dropdown menus and selects
 */

@media (max-width: 768px) {
  
  /*   DROPDOWN MENU   */
  .dropdown-menu {
    position: fixed;
    top: auto !important;
    left: var(--spacing-sm) !important;
    right: var(--spacing-sm) !important;
    bottom: var(--spacing-sm);
    width: auto;
    max-width: none;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    z-index: var(--z-index-dropdown);
  }

  /*   DROPDOWN ITEMS   */
  .dropdown-item {
    padding: var(--spacing-md);
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: var(--font-size-base);
  }

  /*   DROPDOWN HEADER   */
  .dropdown-header {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    position: sticky;
    top: 0;
    background-color: var(--color-bg-primary);
    z-index: 1;
  }

  /*   DROPDOWN DIVIDER   */
  .dropdown-divider {
    margin: var(--spacing-sm) 0;
  }

  /*   DROPDOWN POSITIONS   */
  /* Override positioning for mobile */
  .dropup .dropdown-menu,
  .dropend .dropdown-menu,
  .dropstart .dropdown-menu {
    position: fixed;
    top: auto !important;
    left: var(--spacing-sm) !important;
    right: var(--spacing-sm) !important;
    bottom: var(--spacing-sm) !important;
    margin: 0;
  }

  /*   DROPDOWN WITH SEARCH   */
  .dropdown-search {
    padding: var(--spacing-md);
    position: sticky;
    top: 0;
    background-color: var(--color-bg-primary);
    z-index: 1;
    border-bottom: var(--border-width-thin) solid var(--color-border-primary);
  }

  .dropdown-search .form-input {
    min-height: 44px;
  }

  /*   DROPDOWN WITH FOOTER   */
  .dropdown-footer {
    padding: var(--spacing-md);
    position: sticky;
    bottom: 0;
    background-color: var(--color-bg-primary);
    z-index: 1;
  }

  /*   DROPDOWN SIZES   */
  .dropdown-menu-sm,
  .dropdown-menu-lg,
  .dropdown-menu-xl {
    min-width: auto;
    max-width: none;
  }

  /*   MEGA MENU   */
  .dropdown-mega .dropdown-menu {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: 80vh;
    padding: var(--spacing-md);
    flex-direction: column;
    overflow-y: auto;
  }

  .dropdown-mega-column {
    flex: none;
    width: 100%;
    min-width: 100%;
    margin-bottom: var(--spacing-lg);
  }

  .dropdown-mega-column:last-child {
    margin-bottom: 0;
  }

  /*   CONTEXT MENU   */
  .context-menu {
    position: fixed;
    max-width: calc(100% - var(--spacing-xl));
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /*   SELECT DROPDOWN   */
  .select-dropdown-toggle {
    min-height: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .select-dropdown-menu {
    position: fixed;
    top: auto !important;
    left: var(--spacing-sm) !important;
    right: var(--spacing-sm) !important;
    bottom: var(--spacing-sm);
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .select-dropdown-item {
    padding: var(--spacing-md);
    min-height: 44px;
  }

  /*   MULTISELECT DROPDOWN   */
  .multiselect-dropdown-item {
    padding: var(--spacing-md);
    min-height: 44px;
    gap: var(--spacing-md);
  }

  .multiselect-dropdown-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  /*   DROPDOWN BACKDROP   */
  .dropdown-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-index-dropdown) - 1);
  }

  /*   BOTTOM SHEET DROPDOWN   */
  .dropdown-bottom-sheet .dropdown-menu {
    border-radius: 0;
    border-bottom: none;
    border-left: none;
    border-right: none;
  }

  /* Bottom sheet handle */
  .dropdown-bottom-sheet .dropdown-menu::before {
    content: '';
    position: sticky;
    top: 0;
    display: block;
    width: 40px;
    height: 4px;
    margin: var(--spacing-sm) auto;
    background-color: var(--color-border-primary);
    border-radius: 2px;
    z-index: 2;
  }

  /*   SLIDE UP ANIMATION   */
  @keyframes dropdown-slide-up {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .dropdown-menu.show {
    animation: dropdown-slide-up var(--transition-normal);
  }

  /*   NATIVE SELECT STYLING   */
  /* Encourage use of native selects on mobile when appropriate */
  .form-select-native {
    -webkit-appearance: none;
    appearance: none;
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/*   SMALL MOBILE (max-width: 480px)   */
@media (max-width: 480px) {
  .dropdown-menu {
    font-size: var(--font-size-sm);
  }

  .dropdown-item {
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 40px;
  }

  .dropdown-header {
    padding: var(--spacing-xs) var(--spacing-md);
  }

  .dropdown-search,
  .dropdown-footer {
    padding: var(--spacing-sm);
  }

  .dropdown-mega .dropdown-menu {
    padding: var(--spacing-sm);
  }

  .dropdown-mega-column {
    margin-bottom: var(--spacing-md);
  }
}

/*   LANDSCAPE MODE   */
@media (max-height: 500px) and (orientation: landscape) {
  .dropdown-menu {
    max-height: 60vh;
  }

  .select-dropdown-menu {
    max-height: 50vh;
  }

  .dropdown-mega .dropdown-menu {
    max-height: 70vh;
  }
}

/*   SAFE AREA ADJUSTMENTS   */
@media (max-width: 768px) {
  .dropdown-menu {
    padding-bottom: max(var(--spacing-xs), env(safe-area-inset-bottom));
  }

  .dropdown-footer {
    padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
  }
}

/**
 * Wireframe UI Framework
 * Forms Component
 */

/*   FORM GROUPS   */
.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-group:last-child {
  margin-bottom: 0;
}

/*   LABELS   */
.form-label {
  display: inline-block;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.form-label-required::after {
  content: '*';
  color: var(--color-accent-red);
  margin-left: var(--spacing-xs);
}

/*   TEXT INPUTS   */
.form-input,
.form-textarea,
.form-select {
  display: block;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border: var(--border-width-medium) solid var(--color-border-primary);
  transition: all var(--transition-fast);
  appearance: none;
}

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

.form-input:hover,
.form-textarea:hover,
.form-select:hover {
  border-color: var(--color-border-active);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.1);
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: var(--color-bg-secondary);
}

/*   INPUT SIZES   */
.form-input-sm,
.form-select-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.form-input-lg,
.form-select-lg {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-lg);
}

/*   TEXTAREA   */
.form-textarea {
  min-height: 100px;
  resize: vertical;
}

.form-textarea-fixed {
  resize: none;
}

/*   SELECT   */
.form-select {
  padding-right: calc(var(--spacing-xl) + var(--spacing-sm));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e0e0e0' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  background-size: 12px;
}

.form-select[multiple] {
  padding-right: var(--spacing-md);
  background-image: none;
  height: auto;
}

/*   INPUT GROUPS   */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-input,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.input-group-prepend,
.input-group-append {
  display: flex;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  text-align: center;
  white-space: nowrap;
  background-color: var(--color-bg-secondary);
  border: var(--border-width-medium) solid var(--color-border-primary);
}

.input-group-prepend {
  margin-right: calc(var(--border-width-medium) * -1);
}

.input-group-append {
  margin-left: calc(var(--border-width-medium) * -1);
}

.input-group > .input-group-prepend > .input-group-text {
  border-right: 0;
}

.input-group > .input-group-append > .input-group-text {
  border-left: 0;
}

.input-group > .input-group-prepend > .btn {
  border-right: 0;
}

.input-group > .input-group-append > .btn {
  border-left: 0;
}

/*   CHECKBOXES   */
.form-checkbox {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.form-checkbox input[type="checkbox"] {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: var(--border-width-medium) solid var(--color-border-primary);
  background-color: var(--color-bg-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.form-checkbox input[type="checkbox"]:hover {
  border-color: var(--color-border-active);
}

.form-checkbox input[type="checkbox"]:focus {
  outline: var(--border-width-medium) solid var(--color-accent-blue);
  outline-offset: 2px;
}

.form-checkbox input[type="checkbox"]:checked {
  background-color: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a1a1a' d='M10 3L4.5 8.5L2 6'  stroke='%231a1a1a' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.form-checkbox input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.form-checkbox label {
  margin-left: var(--spacing-sm);
  cursor: pointer;
  user-select: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.form-checkbox input[type="checkbox"]:disabled + label {
  opacity: 0.4;
  cursor: not-allowed;
}

/*   RADIO BUTTONS   */
.form-radio {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.form-radio input[type="radio"] {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: var(--border-width-medium) solid var(--color-border-primary);
  border-radius: 50%;
  background-color: var(--color-bg-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.form-radio input[type="radio"]:hover {
  border-color: var(--color-border-active);
}

.form-radio input[type="radio"]:focus {
  outline: var(--border-width-medium) solid var(--color-accent-blue);
  outline-offset: 2px;
}

.form-radio input[type="radio"]:checked {
  border-color: var(--color-accent-blue);
  background-image: radial-gradient(circle, var(--color-accent-blue) 0%, var(--color-accent-blue) 40%, transparent 40%);
}

.form-radio input[type="radio"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.form-radio label {
  margin-left: var(--spacing-sm);
  cursor: pointer;
  user-select: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.form-radio input[type="radio"]:disabled + label {
  opacity: 0.4;
  cursor: not-allowed;
}

/*   SWITCHES   */
.form-switch {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.form-switch input[type="checkbox"] {
  appearance: none;
  width: 2.5rem;
  height: 1.25rem;
  border: var(--border-width-medium) solid var(--color-border-primary);
  background-color: var(--color-bg-primary);
  cursor: pointer;
  transition: all var(--transition-normal);
  flex-shrink: 0;
  position: relative;
}

.form-switch input[type="checkbox"]::before {
  content: '';
  position: absolute;
  width: 0.875rem;
  height: 0.875rem;
  background-color: var(--color-border-primary);
  top: calc(var(--border-width-medium));
  left: calc(var(--border-width-medium));
  transition: all var(--transition-normal);
}

.form-switch input[type="checkbox"]:hover {
  border-color: var(--color-border-active);
}

.form-switch input[type="checkbox"]:hover::before {
  background-color: var(--color-border-active);
}

.form-switch input[type="checkbox"]:focus {
  outline: var(--border-width-medium) solid var(--color-accent-blue);
  outline-offset: 2px;
}

.form-switch input[type="checkbox"]:checked {
  background-color: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
}

.form-switch input[type="checkbox"]:checked::before {
  background-color: var(--color-text-inverse);
  left: calc(100% - 0.875rem - var(--border-width-medium));
}

.form-switch input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.form-switch label {
  margin-left: var(--spacing-sm);
  cursor: pointer;
  user-select: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.form-switch input[type="checkbox"]:disabled + label {
  opacity: 0.4;
  cursor: not-allowed;
}

/*   FILE INPUT   */
.form-file {
  position: relative;
  display: inline-block;
}

.form-file input[type="file"] {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.form-file-label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  background-color: transparent;
  border: var(--border-width-medium) solid var(--color-border-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.form-file-label:hover {
  border-color: var(--color-text-primary);
}

.form-file input[type="file"]:focus + .form-file-label {
  outline: var(--border-width-medium) solid var(--color-accent-blue);
  outline-offset: 2px;
}

.form-file input[type="file"]:disabled + .form-file-label {
  opacity: 0.4;
  cursor: not-allowed;
}

/*   RANGE SLIDER   */
.form-range {
  appearance: none;
  width: 100%;
  height: var(--border-width-medium);
  background: var(--color-border-primary);
  outline: none;
  margin: var(--spacing-md) 0;
}

.form-range::-webkit-slider-thumb {
  appearance: none;
  width: 1rem;
  height: 1rem;
  background: var(--color-text-primary);
  border: var(--border-width-medium) solid var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.form-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background: var(--color-text-primary);
  border: var(--border-width-medium) solid var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.form-range:hover::-webkit-slider-thumb {
  background: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
}

.form-range:hover::-moz-range-thumb {
  background: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.3);
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.3);
}

/*   HELP TEXT   */
.form-help {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/*   VALIDATION STATES   */
.form-input.is-valid,
.form-textarea.is-valid,
.form-select.is-valid {
  border-color: var(--color-accent-green);
}

.form-input.is-valid:focus,
.form-textarea.is-valid:focus,
.form-select.is-valid:focus {
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.1);
}

.form-input.is-invalid,
.form-textarea.is-invalid,
.form-select.is-invalid {
  border-color: var(--color-accent-red);
}

.form-input.is-invalid:focus,
.form-textarea.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.1);
}

.valid-feedback {
  display: none;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-accent-green);
}

.invalid-feedback {
  display: none;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-accent-red);
}

.form-input.is-valid ~ .valid-feedback,
.form-textarea.is-valid ~ .valid-feedback,
.form-select.is-valid ~ .valid-feedback {
  display: block;
}

.form-input.is-invalid ~ .invalid-feedback,
.form-textarea.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback {
  display: block;
}

/*   FLOATING LABELS   */
.form-floating {
  position: relative;
}

.form-floating > .form-input,
.form-floating > .form-select {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  pointer-events: none;
  transform-origin: 0 0;
  transition: all var(--transition-normal);
  color: var(--color-text-tertiary);
}

.form-floating > .form-input:focus ~ label,
.form-floating > .form-input:not(:placeholder-shown) ~ label,
.form-floating > .form-select:focus ~ label,
.form-floating > .form-select:not([value=""]) ~ label {
  transform: scale(0.85) translateY(-0.5rem) translateX(0);
  color: var(--color-accent-blue);
}

/*   INLINE FORMS   */
.form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.form-inline .form-label {
  margin-bottom: 0;
}

.form-inline .form-input,
.form-inline .form-select {
  width: auto;
  flex: 1;
}

/**
 * Wireframe UI Framework
 * Mobile Forms - Optimized inputs and touch-friendly form controls
 */

@media (max-width: 768px) {
  
  /*   FORM GROUPS   */
  .form-group {
    margin-bottom: var(--spacing-md);
  }

  /*   LABELS   */
  .form-label {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-sm);
  }

  /*   TEXT INPUTS   */
  .form-input,
  .form-textarea,
  .form-select {
    min-height: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 16px; /* Prevents zoom on iOS */
    border-width: var(--border-width-medium);
  }

  /* Prevent auto-zoom on iOS */
  .form-input:focus,
  .form-textarea:focus,
  .form-select:focus {
    font-size: 16px;
  }

  /*   INPUT SIZES   */
  .form-input-sm,
  .form-select-sm {
    min-height: 36px;
    font-size: 14px;
  }

  .form-input-lg,
  .form-select-lg {
    min-height: 52px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 17px;
  }

  /*   TEXTAREA   */
  .form-textarea {
    min-height: 120px;
  }

  /*   SELECT   */
  .form-select {
    background-size: 16px;
    padding-right: calc(var(--spacing-xl) + var(--spacing-md));
  }

  /*   INPUT GROUPS   */
  .input-group {
    flex-wrap: wrap;
  }

  .input-group-prepend,
  .input-group-append {
    flex: 0 0 auto;
  }

  .input-group-text {
    min-height: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* Stack input groups on very small screens if needed */
  .input-group-mobile-vertical {
    flex-direction: column;
  }

  .input-group-mobile-vertical .input-group-prepend,
  .input-group-mobile-vertical .input-group-append {
    width: 100%;
  }

  .input-group-mobile-vertical .input-group-prepend {
    margin-right: 0;
    margin-bottom: calc(var(--border-width-medium) * -1);
  }

  .input-group-mobile-vertical .input-group-append {
    margin-left: 0;
    margin-top: calc(var(--border-width-medium) * -1);
  }

  .input-group-mobile-vertical > .form-input,
  .input-group-mobile-vertical > .form-select {
    width: 100%;
  }

  /*   CHECKBOXES   */
  .form-checkbox {
    margin-bottom: var(--spacing-md);
  }

  .form-checkbox input[type="checkbox"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
  }

  .form-checkbox label {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    margin-left: var(--spacing-md);
  }

  /*   RADIO BUTTONS   */
  .form-radio {
    margin-bottom: var(--spacing-md);
  }

  .form-radio input[type="radio"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
  }

  .form-radio label {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    margin-left: var(--spacing-md);
  }

  /*   SWITCHES   */
  .form-switch {
    margin-bottom: var(--spacing-md);
  }

  .form-switch input[type="checkbox"] {
    width: 3rem;
    height: 1.5rem;
  }

  .form-switch input[type="checkbox"]::before {
    width: 1.125rem;
    height: 1.125rem;
  }

  .form-switch input[type="checkbox"]:checked::before {
    left: calc(100% - 1.125rem - var(--border-width-medium));
  }

  .form-switch label {
    font-size: var(--font-size-base);
    margin-left: var(--spacing-md);
  }

  /*   FILE INPUT   */
  .form-file-label {
    min-height: 44px;
    font-size: var(--font-size-base);
    width: 100%;
    justify-content: center;
  }

  /*   RANGE SLIDER   */
  .form-range {
    margin: var(--spacing-lg) 0;
  }

  .form-range::-webkit-slider-thumb {
    width: 1.5rem;
    height: 1.5rem;
  }

  .form-range::-moz-range-thumb {
    width: 1.5rem;
    height: 1.5rem;
  }

  /*   HELP TEXT   */
  .form-help {
    font-size: var(--font-size-sm);
  }

  /*   VALIDATION FEEDBACK   */
  .valid-feedback,
  .invalid-feedback {
    font-size: var(--font-size-sm);
  }

  /*   FLOATING LABELS   */
  .form-floating > .form-input,
  .form-floating > .form-select {
    min-height: 56px;
    padding-top: 1.875rem;
    padding-bottom: 0.625rem;
  }

  .form-floating > label {
    font-size: var(--font-size-base);
    padding: var(--spacing-md);
  }

  .form-floating > .form-input:focus ~ label,
  .form-floating > .form-input:not(:placeholder-shown) ~ label,
  .form-floating > .form-select:focus ~ label,
  .form-floating > .form-select:not([value=""]) ~ label {
    transform: scale(0.85) translateY(-0.75rem) translateX(0);
    font-size: var(--font-size-sm);
  }

  /*   INLINE FORMS   */
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }

  .form-inline .form-label {
    margin-bottom: var(--spacing-xs);
  }

  .form-inline .form-input,
  .form-inline .form-select {
    width: 100%;
    margin-bottom: var(--spacing-sm);
  }

  /*   FORM LAYOUT HELPERS   */
  /* Stack form fields vertically */
  .form-row {
    flex-direction: column;
  }

  .form-row > * {
    width: 100%;
    margin-bottom: var(--spacing-md);
  }

  .form-row > *:last-child {
    margin-bottom: 0;
  }

  /*   DATE/TIME INPUTS   */
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"] {
    min-height: 44px;
  }

  /*   NUMBER INPUTS   */
  input[type="number"] {
    min-height: 44px;
  }

  /*   SEARCH INPUTS   */
  input[type="search"] {
    min-height: 44px;
    -webkit-appearance: none;
  }

  /*   COLOR PICKER   */
  input[type="color"] {
    min-height: 44px;
    min-width: 44px;
    padding: var(--spacing-xs);
  }

  /*   KEYBOARD HELPERS   */
  /* Show appropriate keyboard for different input types */
  input[type="email"] {
    -webkit-input-type: email;
  }

  input[type="tel"] {
    -webkit-input-type: tel;
  }

  input[type="url"] {
    -webkit-input-type: url;
  }

  input[type="number"] {
    -webkit-input-type: number;
  }

  /*   FORM ACTIONS   */
  .form-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
  }

  .form-actions .btn {
    width: 100%;
  }

  /* Keep horizontal if specified */
  .form-actions-horizontal {
    flex-direction: row;
  }

  .form-actions-horizontal .btn {
    flex: 1;
  }
}

/*   SMALL MOBILE (max-width: 480px)   */
@media (max-width: 480px) {
  .form-input,
  .form-textarea,
  .form-select {
    padding: var(--spacing-sm);
  }

  .form-checkbox input[type="checkbox"],
  .form-radio input[type="radio"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
  }

  .form-switch input[type="checkbox"] {
    width: 2.5rem;
    height: 1.25rem;
  }

  .form-switch input[type="checkbox"]::before {
    width: 0.875rem;
    height: 0.875rem;
  }

  .form-switch input[type="checkbox"]:checked::before {
    left: calc(100% - 0.875rem - var(--border-width-medium));
  }

  /* Always stack input groups */
  .input-group {
    flex-direction: column;
  }

  .input-group-prepend,
  .input-group-append {
    width: 100%;
  }

  .input-group-prepend {
    margin-right: 0;
    margin-bottom: calc(var(--border-width-medium) * -1);
  }

  .input-group-append {
    margin-left: 0;
    margin-top: calc(var(--border-width-medium) * -1);
  }

  .input-group > .form-input,
  .input-group > .form-select {
    width: 100%;
  }
}

/*   LANDSCAPE MODE   */
@media (max-height: 500px) and (orientation: landscape) {
  /* Reduce vertical spacing in landscape */
  .form-group {
    margin-bottom: var(--spacing-sm);
  }

  .form-textarea {
    min-height: 80px;
  }

  .form-floating > .form-input,
  .form-floating > .form-select {
    min-height: 48px;
  }
}

/*   ACCESSIBILITY   */
@media (max-width: 768px) {
  /* Ensure focus indicators are visible */
  .form-input:focus,
  .form-textarea:focus,
  .form-select:focus {
    outline-width: 3px;
  }

  /* Better visibility for required fields */
  .form-label-required::after {
    font-size: 1.2em;
  }
}

/**
 * Wireframe UI Framework
 * Modals Component
 */

/*   MODAL BACKDROP   */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-index-modal);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal.show {
  display: block;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-index-modal-backdrop);
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-backdrop.show {
  opacity: 1;
}

/*   MODAL DIALOG   */
.modal-dialog {
  position: relative;
  width: auto;
  margin: var(--spacing-xl);
  pointer-events: none;
  display: flex;
  align-items: center;
  min-height: calc(100% - calc(var(--spacing-xl) * 2));
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - calc(var(--spacing-xl) * 2));
}

.modal-dialog-scrollable {
  max-height: calc(100% - calc(var(--spacing-xl) * 2));
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - calc(var(--spacing-xl) * 2));
  overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

/*   MODAL CONTENT   */
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--color-bg-primary);
  border: var(--border-width-medium) solid var(--color-border-primary);
  outline: 0;
}

/*   MODAL HEADER   */
.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.modal-title {
  margin-bottom: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

.modal-header .btn-close {
  padding: 0;
  margin: calc(var(--spacing-sm) * -1) calc(var(--spacing-sm) * -1) calc(var(--spacing-sm) * -1) auto;
}

/*   MODAL BODY   */
.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--spacing-lg);
  color: var(--color-text-primary);
}

/*   MODAL FOOTER   */
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: var(--border-width-thin) solid var(--color-border-primary);
  gap: var(--spacing-sm);
}

.modal-footer > * {
  margin: 0;
}

/*   MODAL SIZES   */
.modal-sm {
  max-width: 400px;
}

.modal-lg {
  max-width: 800px;
}

.modal-xl {
  max-width: 1140px;
}

.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}

.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
}

/*   CLOSE BUTTON   */
.btn-close {
  box-sizing: content-box;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  color: var(--color-text-primary);
  background: transparent;
  border: var(--border-width-thin) solid var(--color-border-primary);
  opacity: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.btn-close:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
  opacity: 1;
}

.btn-close:focus {
  outline: var(--border-width-medium) solid var(--color-accent-blue);
  outline-offset: 2px;
}

.btn-close::before,
.btn-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: var(--border-width-medium);
  background-color: var(--color-text-primary);
}

.btn-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.btn-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Scrollbar Styling */
.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
    scroll-behavior: smooth;
    padding-right: calc(var(--spacing-lg) + 8px);
}

    /* Custom scrollbar styling for modal (Webkit browsers - Chrome, Safari, Edge) */
    .modal-dialog-scrollable .modal-body::-webkit-scrollbar {
        width: 8px;
    }

    .modal-dialog-scrollable .modal-body::-webkit-scrollbar-track {
        background: var(--color-bg-secondary);
        border-left: var(--border-width-thin) solid var(--color-border-primary);
    }

    .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
        background: var(--color-border-secondary);
        border-left: var(--border-width-thin) solid var(--color-border-primary);
    }

        .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb:hover {
            background: var(--color-text-tertiary);
        }

/* Firefox scrollbar styling */
.modal-dialog-scrollable .modal-body {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary) var(--color-bg-secondary);
}

    /* Add visual indicator that content is scrollable */
    .modal-dialog-scrollable .modal-body::before {
        content: '';
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(to bottom, var(--color-border-primary), transparent);
        display: block;
        margin: calc(var(--spacing-lg) * -1) calc(var(--spacing-lg) * -1) var(--spacing-md);
        z-index: 1;
    }

    .modal-dialog-scrollable .modal-body::after {
        content: '';
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(to top, var(--color-border-primary), transparent);
        display: block;
        margin: var(--spacing-md) calc(var(--spacing-lg) * -1) calc(var(--spacing-lg) * -1);
        z-index: 1;
    }

    /* Improve spacing when content is not overflowing */
    .modal-dialog-scrollable .modal-body:not(:hover):not(:focus-within) {
        padding-right: var(--spacing-lg);
    }

    /* Better focus indicator for scrollable content */
    .modal-dialog-scrollable .modal-body:focus-within {
        outline: none;
    }

/*   ANIMATIONS   */
@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modal-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-50px);
  }
}

.modal.show .modal-dialog {
  animation: modal-fade-in var(--transition-normal);
}

/*   RESPONSIVE   */
@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: var(--spacing-2xl) auto;
  }
  
  .modal-dialog-centered {
    min-height: calc(100% - calc(var(--spacing-2xl) * 2));
  }
  
  .modal-dialog-scrollable {
    max-height: calc(100% - calc(var(--spacing-2xl) * 2));
  }
  
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - calc(var(--spacing-2xl) * 2));
  }
  
  .modal-sm {
    max-width: 400px;
  }
}

@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}

/**
 * Wireframe UI Framework
 * Mobile Modals - Full-screen and bottom-sheet modal patterns
 */

@media (max-width: 768px) {
  
  /*   MODAL DIALOG   */
  .modal-dialog {
    margin: 0;
    max-width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
  }

  .modal-dialog-centered {
    align-items: center;
  }

  /*   MODAL CONTENT   */
  .modal-content {
    width: 100%;
    max-height: 90vh;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }

  /* Full-screen modal on mobile by default */
  .modal-dialog-fullscreen-mobile .modal-content {
    height: 100vh;
    max-height: 100vh;
    border: none;
  }

  /*   MODAL HEADER   */
  .modal-header {
    padding: var(--spacing-md);
    position: sticky;
    top: 0;
    background-color: var(--color-bg-primary);
    z-index: 1;
  }

  .modal-title {
    font-size: var(--font-size-lg);
  }

  /*   MODAL BODY   */
  .modal-body {
    padding: var(--spacing-md);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /*   MODAL FOOTER   */
  .modal-footer {
    padding: var(--spacing-md);
    flex-direction: column;
    gap: var(--spacing-sm);
    position: sticky;
    bottom: 0;
    background-color: var(--color-bg-primary);
  }

  .modal-footer > * {
    width: 100%;
  }

  /* Keep horizontal if specified */
  .modal-footer-horizontal {
    flex-direction: row;
  }

  .modal-footer-horizontal > * {
    flex: 1;
    width: auto;
  }

  /*   MODAL SIZES   */
  /* All modals become full-width on mobile */
  .modal-sm,
  .modal-lg,
  .modal-xl {
    max-width: 100%;
  }

  /*   BOTTOM SHEET MODAL   */
  .modal-bottom-sheet .modal-dialog {
    align-items: flex-end;
    margin: 0;
  }

  .modal-bottom-sheet .modal-content {
    max-height: 80vh;
    border-radius: 0;
    border-top: var(--border-width-medium) solid var(--color-border-primary);
  }

  /* Bottom sheet handle */
  .modal-bottom-sheet .modal-header::before {
    content: '';
    position: absolute;
    top: var(--spacing-sm);
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background-color: var(--color-border-primary);
    border-radius: 2px;
  }

  .modal-bottom-sheet .modal-header {
    padding-top: var(--spacing-lg);
  }

  /*   CLOSE BUTTON   */
  .btn-close {
    width: 32px;
    height: 32px;
    min-width: 44px;
    min-height: 44px;
  }

  /*   MODAL SCROLLABLE   */
  .modal-dialog-scrollable {
    max-height: 100vh;
  }

  .modal-dialog-scrollable .modal-content {
    max-height: 100vh;
  }

  .modal-dialog-scrollable .modal-body {
    overflow-y: auto;
  }

  /*   MODAL ANIMATIONS   */
  @keyframes modal-slide-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .modal.show .modal-dialog {
    animation: modal-slide-up var(--transition-normal);
  }

  /*   MODAL BACKDROP   */
  .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
  }

  /*   SAFE AREA ADJUSTMENTS   */
  .modal-header {
    padding-top: max(var(--spacing-md), env(safe-area-inset-top));
  }

  .modal-footer {
    padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
  }

  /*   SWIPE TO DISMISS   */
  .modal-swipeable {
    touch-action: pan-y;
  }

  /*   FULL HEIGHT MODAL   */
  .modal-full-height .modal-dialog {
    height: 100vh;
    min-height: 100vh;
  }

  .modal-full-height .modal-content {
    height: 100vh;
    border: none;
  }
}

/*   SMALL MOBILE (max-width: 480px)   */
@media (max-width: 480px) {
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--spacing-sm);
  }

  .modal-title {
    font-size: var(--font-size-base);
  }

  .btn-close {
    width: 28px;
    height: 28px;
  }

  .modal-bottom-sheet .modal-content {
    max-height: 85vh;
  }
}

/*   LANDSCAPE MODE   */
@media (max-height: 500px) and (orientation: landscape) {
  .modal-content {
    max-height: 100vh;
  }

  .modal-bottom-sheet .modal-content {
    max-height: 95vh;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--spacing-sm);
  }
}

/*   ACCESSIBILITY   */
@media (max-width: 768px) {
  /* Ensure modals are scrollable */
  .modal-body {
    -webkit-overflow-scrolling: touch;
  }

  /* Better focus visibility */
  .modal-content:focus-within {
    outline: none;
  }

  .btn-close:focus {
    outline-width: 3px;
    outline-offset: 2px;
  }
}

/**
 * Wireframe UI Framework
 * Navigation Component
 */

/*   BASE NAV   */
.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  border: var(--border-width-thin) solid transparent;
  transition: all var(--transition-fast);
  text-decoration:none;
}

    .nav-link:hover {
        color: var(--color-text-primary);
        border-color: var(--color-border-primary);
        text-decoration: none;
    }

    .nav-link.active {
        color: var(--color-accent-blue);
        border-color: var(--color-accent-blue);
        text-decoration: none;
    }

    .nav-link:disabled,
    .nav-link.disabled {
        color: var(--color-text-tertiary);
        opacity: 0.4;
        pointer-events: none;
        cursor: not-allowed;
        text-decoration: none;
    }

/*   NAV VARIATIONS   */
.nav-tabs {
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.nav-tabs .nav-link {
  margin-bottom: calc(var(--border-width-thin) * -1);
  border-bottom: var(--border-width-medium) solid transparent;
}

.nav-tabs .nav-link:hover {
  border-color: transparent transparent var(--color-border-primary);
}

.nav-tabs .nav-link.active {
  border-color: transparent transparent var(--color-accent-blue);
}

.nav-pills .nav-link {
  border: var(--border-width-thin) solid transparent;
}

.nav-pills .nav-link:hover {
  border-color: var(--color-border-primary);
}

.nav-pills .nav-link.active {
  background-color: var(--color-accent-blue);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-blue);
}

.nav-underline .nav-link {
  border: none;
  border-bottom: var(--border-width-medium) solid transparent;
}

.nav-underline .nav-link:hover {
  border-bottom-color: var(--color-border-primary);
}

.nav-underline .nav-link.active {
  border-bottom-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

/*   NAV LAYOUT   */
.nav-vertical {
  flex-direction: column;
}

.nav-vertical .nav-link {
  border-left: var(--border-width-medium) solid transparent;
  padding-left: calc(var(--spacing-md) - var(--border-width-medium));
}

.nav-vertical .nav-link.active {
  border-left-color: var(--color-accent-blue);
}

.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}

/*   NAVBAR   */
.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) 0;
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
  background-color: var(--color-bg-primary);
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.navbar-brand {
  display: inline-block;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: var(--spacing-xl);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: inherit;
  white-space: nowrap;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.navbar-brand:hover {
  color: var(--color-accent-blue);
}

.navbar-nav {
  display: flex;
  flex-direction: row;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  gap: var(--spacing-sm);
  align-items: center;
}

    .navbar-nav .nav-link {
        padding-right: var(--spacing-md);
        padding-left: var(--spacing-md);
        text-decoration: none;
    }

.navbar-toggler {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-lg);
  line-height: 1;
  background-color: transparent;
  border: var(--border-width-thin) solid var(--color-border-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--color-text-primary);
  display: none;
}

.navbar-toggler:hover {
  border-color: var(--color-text-primary);
}

.navbar-toggler:focus {
  outline: var(--border-width-medium) solid var(--color-accent-blue);
  outline-offset: 2px;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='%23e0e0e0' stroke-linecap='square' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

/*   NAVBAR COLLAPSE   */
.navbar-collapse {
  flex-basis: auto;
  flex-grow: 1;
  align-items: center;
  display: flex;
  justify-content: flex-end;
}

/* On desktop, never hide the navbar items */
.navbar-collapsed {
  display: flex;
}

/* Overlay for mobile menu */
.navbar-overlay {
  display: none;
}

/*   NAVBAR VARIANTS   */
.navbar-dark {
  border-bottom-color: var(--color-border-primary);
  background-color: var(--color-bg-primary);
}

.navbar-light {
  border-bottom-color: var(--color-border-secondary);
  background-color: var(--color-bg-secondary);
}

/*   NAVBAR FIXED   */
.navbar-fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-index-fixed);
  background-color: var(--color-bg-primary);
}

.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-index-fixed);
  background-color: var(--color-bg-primary);
}

.navbar-sticky-top {
  position: sticky;
  top: 0;
  z-index: var(--z-index-sticky);
  background-color: var(--color-bg-primary);
}

.navbar-fixed-top-spacer {
  padding-top: 72px;
}

.navbar-fixed-bottom-spacer {
  padding-bottom: 72px;
}

/*   BOTTOM NAV (Mobile App Style)   */
.navbar-bottom-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: var(--color-bg-primary);
  border-top: var(--border-width-thin) solid var(--color-border-primary);
  border-bottom: none;
  z-index: var(--z-index-fixed);
  padding: 0;
}

.navbar-bottom-container {
  display: flex;
  width: 100%;
  padding: 0;
}

.navbar-bottom-mobile .nav-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
    min-height: 56px;
    color: var(--color-text-secondary);
    text-decoration: none;
    border: none;
    background: transparent;
    transition: all var(--transition-fast);
    font-size: var(--font-size-xs);
    text-decoration: none;
}

    .navbar-bottom-mobile .nav-link:hover,
    .navbar-bottom-mobile .nav-link:active {
        background-color: var(--color-bg-secondary);
        text-decoration: none;
    }

    .navbar-bottom-mobile .nav-link.active {
        color: var(--color-accent-blue);
        text-decoration: none;
    }

/*   BREADCRUMB   */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: var(--spacing-sm) 0;
  margin-bottom: var(--spacing-md);
  list-style: none;
}
.breadcrumb-list {
    display: flex;
}
.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: var(--spacing-sm);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  padding-right: var(--spacing-sm);
  color: var(--color-text-tertiary);
}

.breadcrumb-item a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
  color: var(--color-accent-blue);
}

.breadcrumb-item.active {
  color: var(--color-text-primary);
}

/*   PAGINATION   */
.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
  gap: var(--spacing-xs);
}

.page-item {
  display: inline-block;
}

.page-link {
  position: relative;
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  background-color: transparent;
  border: var(--border-width-thin) solid var(--color-border-primary);
  transition: all var(--transition-fast);
}

.page-link:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

.page-link:focus {
  outline: var(--border-width-medium) solid var(--color-accent-blue);
  outline-offset: 2px;
}

.page-item.active .page-link {
  color: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
  background-color: transparent;
}

.page-item.disabled .page-link {
  color: var(--color-text-tertiary);
  pointer-events: none;
  opacity: 0.4;
}

/*   PAGINATION SIZES   */
.pagination-lg .page-link {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-lg);
}

.pagination-sm .page-link {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
}

/*   SIDEBAR NAVIGATION   */
.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 250px;
  height: 100vh;
  padding: var(--spacing-lg);
  border-right: var(--border-width-thin) solid var(--color-border-primary);
  background-color: var(--color-bg-primary);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.sidebar-link {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-left: var(--border-width-medium) solid transparent;
  transition: all var(--transition-fast);
}

.sidebar-link:hover {
  color: var(--color-text-primary);
  border-left-color: var(--color-border-primary);
  background-color: var(--color-bg-secondary);
}

.sidebar-link.active {
  color: var(--color-accent-blue);
  border-left-color: var(--color-accent-blue);
  background-color: var(--color-bg-secondary);
}

.sidebar-heading {
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
}

/*   RESPONSIVE   */
@media (max-width: 768px) {
  .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Mobile slide-in menu */
  .navbar-collapse {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    background-color: var(--color-bg-primary);
    border-right: var(--border-width-thin) solid var(--color-border-primary);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: var(--spacing-xl) var(--spacing-lg);
    z-index: 1000;
    transition: left var(--transition-normal);
    overflow-y: auto;
  }

  .navbar-collapse:not(.navbar-collapsed) {
    left: 0;
  }

  .navbar-collapsed {
    left: -100%;
  }

  .navbar-nav {
    flex-direction: column;
    width: 100%;
    gap: 0;
  }

    .navbar-nav .nav-link {
        padding: var(--spacing-md);
        border-bottom: var(--border-width-thin) solid var(--color-border-primary);
        width: 100%;
        text-decoration: none;
    }

  .navbar-nav .nav-link:last-child {
    border-bottom: none;
  }

  /* Overlay */
  .navbar-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: var(--border-width-thin) solid var(--color-border-primary);
  }
}

/**
 * Wireframe UI Framework
 * Mobile Navigation - Responsive menus and mobile navigation patterns
 */

@media (max-width: 768px) {
  
  /*   BASE NAV   */
  .nav {
    flex-direction: row;
  }

  .nav-link {
    padding: var(--spacing-md);
    min-height: 44px;
    display: flex;
    align-items: center;
    text-decoration:none;
  }

  /*   NAV TABS - Keep horizontal with scroll   */
  .nav-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    border-bottom: var(--border-width-thin) solid var(--color-border-primary);
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .nav-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

    .nav-tabs .nav-link {
        white-space: nowrap;
        padding: var(--spacing-sm) var(--spacing-md);
        flex-shrink: 0;
        text-decoration: none;
    }

  /*   NAV PILLS   */
  .nav-pills {
    flex-direction: column;
  }

  .nav-pills .nav-link {
    width: 100%;
    text-align: left;
  }

  /*   NAV UNDERLINE - Keep horizontal with scroll   */
  .nav-underline {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .nav-underline::-webkit-scrollbar {
    display: none;
  }

  .nav-underline .nav-link {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /*   NAV VERTICAL   */
  .nav-vertical .nav-link {
    padding: var(--spacing-md);
  }

  /*   NAVBAR   */
  .navbar {
    padding: var(--spacing-sm) var(--spacing-md);
    flex-wrap: wrap;
  }

  .navbar-brand {
    font-size: var(--font-size-lg);
    margin-right: auto;
  }

  /*   NAVBAR NAV   */
  .navbar-nav {
    flex-direction: column;
    width: 100%;
    gap: 0;
    margin-top: 0;
  }

    .navbar-nav .nav-link {
        padding: var(--spacing-md);
        border-bottom: var(--border-width-thin) solid var(--color-border-primary);
        width: 100%;
        justify-content: flex-start;
        text-decoration: none;
    }

  .navbar-nav .nav-link:last-child {
    border-bottom: none;
  }

  /*   NAVBAR TOGGLER   */
  .navbar-toggler {
    padding: var(--spacing-sm);
    min-width: 44px;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .navbar-toggler-icon {
    width: 24px;
    height: 24px;
  }

  /*   NAVBAR COLLAPSE   */
  .navbar-collapse {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    background-color: var(--color-bg-primary);
    border-right: var(--border-width-thin) solid var(--color-border-primary);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: var(--spacing-xl) var(--spacing-lg);
    z-index: 1000;
    transition: left var(--transition-normal);
    overflow-y: auto;
  }

  /* Show the menu when not collapsed */
  .navbar-collapse:not(.navbar-collapsed) {
    left: 0;
  }

  /* Hide the menu when collapsed on mobile */
  .navbar-collapsed {
    left: -100%;
  }

  /* Overlay for mobile menu */
  .navbar-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    animation: fadeIn var(--transition-fast);
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /*   NAVBAR FIXED   */
  .navbar-fixed-top,
  .navbar-sticky-top {
    left: 0;
    right: 0;
  }

  .navbar-fixed-bottom {
    left: 0;
    right: 0;
  }

  /* Add padding to body when navbar is fixed */
  body.navbar-fixed-top-active {
    padding-top: 60px;
  }

  body.navbar-fixed-bottom-active {
    padding-bottom: 60px;
  }

  /*   BOTTOM NAVIGATION (Mobile App Style)   */
  .navbar-bottom-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background-color: var(--color-bg-primary);
    border-top: var(--border-width-thin) solid var(--color-border-primary);
    border-bottom: none;
    z-index: var(--z-index-fixed);
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .navbar-bottom-mobile .navbar-bottom-container {
    display: flex;
    width: 100%;
    padding: 0;
  }

  .navbar-bottom-mobile .navbar-nav,
  .navbar-bottom-mobile .nav {
    flex-direction: row;
    width: 100%;
    margin: 0;
    gap: 0;
  }

    .navbar-bottom-mobile .nav-link {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-sm);
        min-height: 56px;
        color: var(--color-text-secondary);
        text-decoration: none;
        border: none;
        border-bottom: none;
        background: transparent;
        transition: all var(--transition-fast);
        font-size: var(--font-size-xs);
        gap: var(--spacing-xs);
        text-decoration: none;
    }

  .navbar-bottom-mobile .nav-link:active {
    background-color: var(--color-bg-secondary);
  }

  .navbar-bottom-mobile .nav-link.active {
    color: var(--color-accent-blue);
  }

  /* Icon support for bottom nav */
  .navbar-bottom-mobile .nav-link-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
  }

  .navbar-bottom-mobile .nav-link-label {
    font-size: var(--font-size-xs);
    line-height: 1.2;
  }

  /* Add padding to body when bottom nav is present */
  body.navbar-bottom-active {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }

  /*   BREADCRUMB   */
  .breadcrumb {
    padding: var(--spacing-sm) 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .breadcrumb-item {
    white-space: nowrap;
  }

  .breadcrumb-item + .breadcrumb-item {
    padding-left: var(--spacing-xs);
  }

  .breadcrumb-item + .breadcrumb-item::before {
    padding-right: var(--spacing-xs);
  }

  /*   PAGINATION   */
  .pagination {
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    justify-content: center;
  }

  .page-link {
    min-width: 44px;
    min-height: 44px;
    padding: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Simplified pagination on mobile */
  .pagination-mobile-simple .page-item:not(.active):not(:first-child):not(:last-child) {
    display: none;
  }

  /*   PAGINATION SIZES   */
  .pagination-lg .page-link {
    min-width: 48px;
    min-height: 48px;
    padding: var(--spacing-md);
  }

  .pagination-sm .page-link {
    min-width: 36px;
    min-height: 36px;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

  /*   SIDEBAR NAVIGATION   */
  .sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: var(--border-width-thin) solid var(--color-border-primary);
    padding: var(--spacing-md);
  }

  .sidebar-link {
    padding: var(--spacing-md);
    min-height: 44px;
  }

  /* Mobile sidebar drawer */
  .sidebar-mobile-drawer {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    z-index: var(--z-index-modal);
    background-color: var(--color-bg-primary);
    border-right: var(--border-width-thin) solid var(--color-border-primary);
    transition: left var(--transition-normal);
    overflow-y: auto;
  }

  .sidebar-mobile-drawer.show {
    left: 0;
  }

  /* Sidebar overlay */
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-index-modal) - 1);
    display: none;
  }

  .sidebar-overlay.show {
    display: block;
  }

  /*   TAB BAR (iOS style)   */
  .tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background-color: var(--color-bg-primary);
    border-top: var(--border-width-thin) solid var(--color-border-primary);
    z-index: var(--z-index-fixed);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tab-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    min-height: 50px;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .tab-bar-item.active {
    color: var(--color-accent-blue);
  }
}

/*   SMALL MOBILE (max-width: 480px)   */
@media (max-width: 480px) {
  .navbar {
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .navbar-brand {
    font-size: var(--font-size-base);
  }

  .breadcrumb {
    font-size: var(--font-size-sm);
  }

  .page-link {
    min-width: 40px;
    min-height: 40px;
    padding: var(--spacing-xs);
    font-size: var(--font-size-sm);
  }

  .sidebar-mobile-drawer {
    width: 240px;
  }

    .navbar-bottom-mobile .nav-link,
    .tab-bar-item {
        padding: var(--spacing-xs);
        min-height: 52px;
        text-decoration: none;
    }

  .navbar-bottom-mobile .nav-link-label,
  .tab-bar-label {
    font-size: 10px;
  }
}

/*   LANDSCAPE MODE   */
@media (max-height: 500px) and (orientation: landscape) {
  .navbar-nav {
    max-height: 300px;
    overflow-y: auto;
  }

  .sidebar-mobile-drawer {
    width: 220px;
  }

  .navbar-bottom-mobile,
  .tab-bar {
    padding: var(--spacing-xs) 0;
  }

    .navbar-bottom-mobile .nav-link,
    .tab-bar-item {
        min-height: 48px;
        flex-direction: row;
        gap: var(--spacing-xs);
        text-decoration: none;
    }

  .navbar-bottom-mobile .nav-link-icon,
  .tab-bar-icon {
    margin-bottom: 0;
  }
}

/**
 * Wireframe UI Framework
 * Pager Component - Simplified pagination
 */

/*   BASE PAGER   */
.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) 0;
  list-style: none;
  margin: 0;
}

.pager-item {
  display: inline-block;
}

.pager-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  background-color: transparent;
  border: var(--border-width-medium) solid var(--color-border-primary);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.pager-link:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

.pager-link:focus {
  outline: var(--border-width-medium) solid var(--color-accent-blue);
  outline-offset: 2px;
}

.pager-link:active {
  transform: translateY(1px);
}

/*   PAGER STATES   */
.pager-item.disabled .pager-link {
  color: var(--color-text-tertiary);
  border-color: var(--color-border-primary);
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/*   PAGER VARIANTS   */
.pager-primary .pager-link {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.pager-primary .pager-link:hover {
  background-color: var(--color-accent-blue);
  color: var(--color-text-inverse);
}

/*   PAGER WITH ARROWS   */
.pager-link-prev::before {
  content: '←';
  margin-right: var(--spacing-xs);
}

.pager-link-next::after {
  content: '→';
  margin-left: var(--spacing-xs);
}

/*   PAGER SIZES   */
.pager-sm .pager-link {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
}

.pager-lg .pager-link {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-lg);
}

/*   PAGER CENTERED   */
.pager-centered {
  justify-content: center;
  gap: var(--spacing-md);
}

/*   PAGER FULL WIDTH   */
.pager-justified .pager-item {
  flex: 1;
}

.pager-justified .pager-link {
  width: 100%;
  justify-content: center;
}

/*   PAGER WITH LABEL   */
.pager-labeled {
  flex-direction: column;
  gap: var(--spacing-sm);
  align-items: stretch;
}

.pager-labeled .pager-item {
  width: 100%;
}

.pager-labeled .pager-link {
  width: 100%;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: var(--spacing-md);
}

.pager-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-xs);
}

/*   PAGER COMPACT   */
.pager-compact {
  gap: var(--spacing-sm);
}

.pager-compact .pager-link {
  padding: var(--spacing-xs) var(--spacing-sm);
}

/*   PAGER FILLED   */
.pager-filled .pager-link {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border-primary);
}

.pager-filled .pager-link:hover {
  background-color: var(--color-bg-tertiary);
  border-color: var(--color-border-secondary);
}

/*   PAGER WITH INFO   */
.pager-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.pager-status {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  border-top: var(--border-width-thin) solid var(--color-border-primary);
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

/*   RESPONSIVE   */
@media (max-width: 768px) {
  .pager {
    gap: var(--spacing-sm);
  }

  .pager-link {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  /* Stack on small screens */
  .pager-mobile-stack {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .pager-mobile-stack .pager-item {
    width: 100%;
  }

  .pager-mobile-stack .pager-link {
    width: 100%;
    justify-content: center;
  }
}

/**
 * Wireframe UI Framework
 * Mobile Pager - Touch-friendly sizing and mobile optimizations
 */

@media (max-width: 768px) {
  
  /*   BASE PAGER   */
  .pager {
    padding: var(--spacing-sm) 0;
    gap: var(--spacing-sm);
  }

  .pager-link {
    min-height: 44px; /* iOS recommended minimum */
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
  }

  /*   PAGER SIZES   */
  .pager-sm .pager-link {
    min-height: 36px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .pager-lg .pager-link {
    min-height: 52px;
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: var(--font-size-lg);
  }

  /*   PAGER MOBILE STACK   */
  .pager-mobile-stack {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .pager-mobile-stack .pager-item {
    width: 100%;
  }

  .pager-mobile-stack .pager-link {
    width: 100%;
    justify-content: center;
  }

  /*   PAGER MOBILE FULL WIDTH   */
  .pager-mobile-full .pager-item {
    flex: 1;
  }

  .pager-mobile-full .pager-link {
    width: 100%;
    justify-content: center;
  }

  /*   PAGER WITH INFO   */
  .pager-info {
    gap: var(--spacing-sm);
  }

  .pager-status {
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  /*   PAGER LABELED   */
  .pager-labeled .pager-link {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  /*   PAGER ARROWS   */
  .pager-link-prev::before,
  .pager-link-next::after {
    font-size: var(--font-size-lg);
  }

  /*   SAFE AREA SUPPORT   */
  .pager {
    padding-left: max(0, env(safe-area-inset-left));
    padding-right: max(0, env(safe-area-inset-right));
  }

  /*   FIXED PAGER   */
  .pager-fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-bg-primary);
    border-top: var(--border-width-thin) solid var(--color-border-primary);
    padding: var(--spacing-md);
    padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
    z-index: var(--z-index-fixed);
  }

  /*   TOUCH OPTIMIZATIONS   */
  .pager-link:active {
    transform: translateY(0);
    background-color: var(--color-bg-secondary);
  }

  /*   DISABLE HOVER EFFECTS   */
  @media (hover: none) {
    .pager-link:hover {
      transform: none;
    }
  }
}

/**
 * Wireframe UI Framework
 * Progress Bars Component
 */

/*   BASE PROGRESS   */
.progress {
  display: flex;
  height: 1.5rem;
  overflow: hidden;
  font-size: var(--font-size-xs);
  background-color: transparent;
  border: var(--border-width-thin) solid var(--color-border-primary);
}

/*   PROGRESS BAR   */
.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--color-text-inverse);
  text-align: center;
  white-space: nowrap;
  background-color: var(--color-accent-blue);
  transition: width var(--transition-normal);
}

/*   PROGRESS BAR VARIANTS   */
.progress-bar-success {
  background-color: var(--color-accent-green);
}

.progress-bar-warning {
  background-color: var(--color-accent-yellow);
}

.progress-bar-error,
.progress-bar-danger {
  background-color: var(--color-accent-red);
}

.progress-bar-info {
  background-color: var(--color-accent-blue);
}

/*   PROGRESS BAR STRIPED   */
.progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.1) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
  0% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 0 0;
  }
}

/*   PROGRESS SIZES   */
.progress-sm {
  height: 0.75rem;
}

.progress-lg {
  height: 2rem;
}

.progress-xl {
  height: 2.5rem;
  font-size: var(--font-size-sm);
}

/*   PROGRESS WITH LABEL   */
.progress-labeled {
  position: relative;
  height: 2rem;
}

.progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  z-index: 1;
  pointer-events: none;
}

/*   CIRCULAR PROGRESS   */
.progress-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
}

.progress-circle svg {
  transform: rotate(-90deg);
}

.progress-circle-bg {
  fill: none;
  stroke: var(--color-border-primary);
  stroke-width: 4;
}

.progress-circle-bar {
  fill: none;
  stroke: var(--color-accent-blue);
  stroke-width: 4;
  stroke-linecap: square;
  transition: stroke-dashoffset var(--transition-normal);
}

.progress-circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/*   CIRCULAR PROGRESS SIZES   */
.progress-circle-sm {
  width: 60px;
  height: 60px;
}

.progress-circle-sm .progress-circle-text {
  font-size: var(--font-size-sm);
}

.progress-circle-lg {
  width: 150px;
  height: 150px;
}

.progress-circle-lg .progress-circle-text {
  font-size: var(--font-size-2xl);
}

/*   CIRCULAR PROGRESS VARIANTS   */
.progress-circle-success .progress-circle-bar {
  stroke: var(--color-accent-green);
}

.progress-circle-warning .progress-circle-bar {
  stroke: var(--color-accent-yellow);
}

.progress-circle-error .progress-circle-bar,
.progress-circle-danger .progress-circle-bar {
  stroke: var(--color-accent-red);
}

/*   STEPPED PROGRESS   */
.progress-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-xl);
  position: relative;
}

.progress-steps::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  left: 0;
  right: 0;
  height: var(--border-width-thin);
  background-color: var(--color-border-primary);
  z-index: 0;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 1;
}

.progress-step-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-width-medium) solid var(--color-border-primary);
  background-color: var(--color-bg-primary);
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
  transition: all var(--transition-fast);
}

.progress-step-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
}

.progress-step.active .progress-step-icon {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
  background-color: var(--color-bg-primary);
}

.progress-step.active .progress-step-label {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.progress-step.completed .progress-step-icon {
  border-color: var(--color-accent-green);
  background-color: var(--color-accent-green);
  color: var(--color-text-inverse);
}

.progress-step.completed .progress-step-label {
  color: var(--color-text-primary);
}

/*   SKELETON LOADERS   */
.skeleton {
  background-color: var(--color-bg-secondary);
  border: var(--border-width-thin) solid var(--color-border-primary);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.05) 20%,
    rgba(255, 255, 255, 0.1) 60%,
    rgba(255, 255, 255, 0)
  );
  animation: skeleton-shimmer 2s infinite;
}

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

.skeleton-text {
  height: 1rem;
  margin-bottom: var(--spacing-sm);
}

.skeleton-text:last-child {
  margin-bottom: 0;
}

.skeleton-heading {
  height: 2rem;
  width: 60%;
  margin-bottom: var(--spacing-md);
}

.skeleton-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

.skeleton-block {
  height: 200px;
  width: 100%;
}

/*   LOADING SPINNER   */
.spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: var(--border-width-medium) solid var(--color-border-primary);
  border-radius: 50%;
  border-top-color: var(--color-accent-blue);
  animation: spinner-rotate 0.8s linear infinite;
}

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

.spinner-sm {
  width: 1rem;
  height: 1rem;
}

.spinner-lg {
  width: 3rem;
  height: 3rem;
  border-width: var(--border-width-thick);
}

.spinner-success {
  border-top-color: var(--color-accent-green);
}

.spinner-warning {
  border-top-color: var(--color-accent-yellow);
}

.spinner-error,
.spinner-danger {
  border-top-color: var(--color-accent-red);
}

/*   LOADING DOTS   */
.loading-dots {
  display: inline-flex;
  gap: var(--spacing-xs);
}

.loading-dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-text-primary);
  border-radius: 50%;
  animation: loading-dot-pulse 1.4s ease-in-out infinite;
}

.loading-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes loading-dot-pulse {
  0%, 80%, 100% {
    transform: scale(0.5);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/*   LOADING BARS   */
.loading-bars {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: flex-end;
  height: 2rem;
}

.loading-bar {
  width: 4px;
  background-color: var(--color-text-primary);
  animation: loading-bar-grow 1.2s ease-in-out infinite;
}

.loading-bar:nth-child(1) {
  animation-delay: -0.24s;
}

.loading-bar:nth-child(2) {
  animation-delay: -0.12s;
}

@keyframes loading-bar-grow {
  0%, 40%, 100% {
    height: 0.5rem;
  }
  20% {
    height: 2rem;
  }
}

/**
 * Wireframe UI Framework
 * Mobile Progress - Responsive progress bars, spinners, and loaders
 */

@media (max-width: 768px) {
  
  /*   PROGRESS BARS   */
  .progress {
    height: 1.25rem;
    font-size: 11px;
  }

  .progress-bar {
    font-size: 11px;
  }

  /*   PROGRESS SIZES   */
  .progress-sm {
    height: 0.625rem;
  }

  .progress-lg {
    height: 1.75rem;
    font-size: var(--font-size-sm);
  }

  .progress-xl {
    height: 2.25rem;
    font-size: var(--font-size-base);
  }

  /*   PROGRESS WITH LABEL   */
  .progress-labeled {
    height: 1.75rem;
  }

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

  /*   CIRCULAR PROGRESS   */
  .progress-circle {
    width: 80px;
    height: 80px;
  }

  .progress-circle-text {
    font-size: var(--font-size-base);
  }

  /*   CIRCULAR PROGRESS SIZES   */
  .progress-circle-sm {
    width: 50px;
    height: 50px;
  }

  .progress-circle-sm .progress-circle-text {
    font-size: var(--font-size-xs);
  }

  .progress-circle-lg {
    width: 120px;
    height: 120px;
  }

  .progress-circle-lg .progress-circle-text {
    font-size: var(--font-size-xl);
  }

  /*   STEPPED PROGRESS   */
  .progress-steps {
    margin-bottom: var(--spacing-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  .progress-steps::before {
    top: 1.25rem;
  }

  .progress-step {
    min-width: 80px;
  }

  .progress-step-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--spacing-xs);
  }

  .progress-step-label {
    font-size: 11px;
    white-space: nowrap;
  }

  /*   SKELETON LOADERS   */
  .skeleton-text {
    height: 0.875rem;
    margin-bottom: var(--spacing-xs);
  }

  .skeleton-heading {
    height: 1.5rem;
    width: 70%;
    margin-bottom: var(--spacing-sm);
  }

  .skeleton-avatar {
    width: 2.5rem;
    height: 2.5rem;
  }

  .skeleton-block {
    height: 150px;
  }

  /*   LOADING SPINNER   */
  .spinner {
    width: 1.75rem;
    height: 1.75rem;
  }

  .spinner-sm {
    width: 1.25rem;
    height: 1.25rem;
  }

  .spinner-lg {
    width: 2.5rem;
    height: 2.5rem;
  }

  /*   LOADING DOTS   */
  .loading-dots {
    gap: var(--spacing-xs);
  }

  .loading-dot {
    width: 0.625rem;
    height: 0.625rem;
  }

  /*   LOADING BARS   */
  .loading-bars {
    height: 1.5rem;
    gap: var(--spacing-xs);
  }

  .loading-bar {
    width: 3px;
  }

  /*   FULL SCREEN LOADER   */
  .loader-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-primary);
    z-index: var(--z-index-modal);
  }

  .loader-fullscreen .spinner {
    width: 3rem;
    height: 3rem;
  }

  .loader-fullscreen .loader-text {
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
  }

  /*   INLINE LOADER   */
  .loader-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
  }

  /*   PROGRESS PERCENTAGE   */
  .progress-percentage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
  }

  /*   PROGRESS GROUP   */
  .progress-group {
    margin-bottom: var(--spacing-md);
  }

  .progress-group-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
  }
}

/*   SMALL MOBILE (max-width: 480px)   */
@media (max-width: 480px) {
  .progress {
    height: 1rem;
    font-size: 10px;
  }

  .progress-lg {
    height: 1.5rem;
    font-size: 12px;
  }

  .progress-xl {
    height: 2rem;
    font-size: var(--font-size-sm);
  }

  .progress-circle {
    width: 60px;
    height: 60px;
  }

  .progress-circle-text {
    font-size: var(--font-size-sm);
  }

  .progress-circle-lg {
    width: 100px;
    height: 100px;
  }

  .progress-circle-lg .progress-circle-text {
    font-size: var(--font-size-lg);
  }

  .progress-step {
    min-width: 60px;
  }

  .progress-step-icon {
    width: 2rem;
    height: 2rem;
  }

  .progress-step-label {
    font-size: 10px;
  }

  .skeleton-avatar {
    width: 2rem;
    height: 2rem;
  }

  .skeleton-block {
    height: 120px;
  }

  .spinner {
    width: 1.5rem;
    height: 1.5rem;
  }

  .spinner-lg {
    width: 2rem;
    height: 2rem;
  }

  .loading-dot {
    width: 0.5rem;
    height: 0.5rem;
  }

  .loading-bars {
    height: 1.25rem;
  }
}

/*   LANDSCAPE MODE   */
@media (max-height: 500px) and (orientation: landscape) {
  .progress-steps {
    margin-bottom: var(--spacing-md);
  }

  .progress-step-icon {
    width: 2rem;
    height: 2rem;
  }

  .loader-fullscreen .spinner {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/*   REDUCED MOTION   */
@media (prefers-reduced-motion: reduce) {
  .spinner,
  .loading-dots,
  .loading-bars,
  .progress-bar-animated {
    animation: none;
  }

  .skeleton::after {
    animation: none;
  }
}

/**
 * Wireframe UI Framework
 * Rich Text Editor Component
 */

/*   RICH TEXT CONTAINER   */
.richtext-container {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-primary);
  border: var(--border-width-medium) solid var(--color-border-primary);
  transition: border-color var(--transition-fast);
}

.richtext-container:focus-within {
  border-color: var(--color-accent-blue);
}

.richtext-disabled {
  opacity: 0.6;
  pointer-events: none;
}

/*   TOOLBAR   */
.richtext-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background-color: var(--color-bg-secondary);
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.richtext-toolbar-group {
  display: flex;
  gap: var(--spacing-xs);
  padding-right: var(--spacing-sm);
  border-right: var(--border-width-thin) solid var(--color-border-primary);
}

.richtext-toolbar-group:last-child {
  border-right: none;
}

.richtext-btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: transparent;
  border: var(--border-width-thin) solid transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.richtext-btn:hover {
  background-color: var(--color-bg-tertiary);
  border-color: var(--color-border-primary);
}

.richtext-btn:active,
.richtext-btn.active {
  background-color: var(--color-bg-tertiary);
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.richtext-btn strong,
.richtext-btn em,
.richtext-btn u {
  font-style: normal;
  text-decoration: none;
  font-weight: var(--font-weight-bold);
}

.richtext-btn em {
  font-style: italic;
  font-weight: normal;
}

.richtext-btn u {
  text-decoration: underline;
  font-weight: normal;
}

/*   EDITOR AREA   */
.richtext-editor {
  padding: var(--spacing-md);
  min-height: 200px;
  max-height: 600px;
  overflow-y: auto;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  outline: none;
}

.richtext-editor:empty::before {
  content: attr(placeholder);
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.richtext-editor:focus {
  outline: none;
}

/* Editor content styles */
.richtext-editor h1,
.richtext-editor h2,
.richtext-editor h3,
.richtext-editor h4,
.richtext-editor h5,
.richtext-editor h6 {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.richtext-editor p {
  margin-bottom: var(--spacing-md);
}

.richtext-editor ul,
.richtext-editor ol {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-xl);
}

.richtext-editor a {
  color: var(--color-accent-blue);
  text-decoration: underline;
}

.richtext-editor a:hover {
  color: var(--color-text-primary);
}

.richtext-editor blockquote {
  padding-left: var(--spacing-md);
  border-left: var(--border-width-thick) solid var(--color-border-primary);
  color: var(--color-text-secondary);
  margin: var(--spacing-md) 0;
}

.richtext-editor code {
  background-color: var(--color-bg-secondary);
  padding: 0.125rem 0.25rem;
  border: var(--border-width-thin) solid var(--color-border-primary);
  color: var(--color-accent-orange);
  font-family: var(--font-family-mono);
}

.richtext-editor pre {
  background-color: var(--color-bg-secondary);
  padding: var(--spacing-md);
  border: var(--border-width-thin) solid var(--color-border-primary);
  overflow-x: auto;
  margin: var(--spacing-md) 0;
}

/*   HEIGHT VARIATIONS   */
.richtext-height-sm .richtext-editor {
  min-height: 150px;
  max-height: 300px;
}

.richtext-height-md .richtext-editor {
  min-height: 200px;
  max-height: 400px;
}

.richtext-height-lg .richtext-editor {
  min-height: 300px;
  max-height: 600px;
}

.richtext-height-xl .richtext-editor {
  min-height: 400px;
  max-height: 800px;
}

/*   FOOTER   */
.richtext-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: var(--color-bg-secondary);
  border-top: var(--border-width-thin) solid var(--color-border-primary);
}

.richtext-char-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/*   RESPONSIVE   */
@media (max-width: 768px) {
  .richtext-toolbar {
    gap: var(--spacing-xs);
  }

  .richtext-toolbar-group {
    padding-right: var(--spacing-xs);
  }

  .richtext-btn {
    min-width: 28px;
    height: 28px;
    padding: var(--spacing-xs);
    font-size: var(--font-size-xs);
  }

  .richtext-editor {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
  }
}

/**
 * Wireframe UI Framework
 * Rich Text Editor Component - Mobile Styles
 */

@media (max-width: 768px) {
  .richtext-container {
    border-width: var(--border-width-thin);
  }

  .richtext-toolbar {
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    flex-wrap: wrap;
  }

  .richtext-toolbar-group {
    padding-right: var(--spacing-xs);
    gap: 2px;
  }

  .richtext-btn {
    min-width: 28px;
    height: 28px;
    padding: var(--spacing-xs);
    font-size: var(--font-size-xs);
  }

  .richtext-editor {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
    min-height: 150px;
  }

  .richtext-height-sm .richtext-editor {
    min-height: 120px;
    max-height: 250px;
  }

  .richtext-height-md .richtext-editor {
    min-height: 150px;
    max-height: 300px;
  }

  .richtext-height-lg .richtext-editor {
    min-height: 200px;
    max-height: 400px;
  }

  .richtext-height-xl .richtext-editor {
    min-height: 250px;
    max-height: 500px;
  }

  .richtext-footer {
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .richtext-char-count {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .richtext-toolbar {
    padding: var(--spacing-xs);
  }

  .richtext-toolbar-group {
    margin-bottom: var(--spacing-xs);
  }

  .richtext-btn {
    min-width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .richtext-editor {
    padding: var(--spacing-xs);
    font-size: var(--font-size-xs);
    min-height: 120px;
  }

  .richtext-height-sm .richtext-editor {
    min-height: 100px;
    max-height: 200px;
  }

  .richtext-height-md .richtext-editor {
    min-height: 120px;
    max-height: 250px;
  }

  .richtext-height-lg .richtext-editor {
    min-height: 150px;
    max-height: 300px;
  }

  .richtext-height-xl .richtext-editor {
    min-height: 200px;
    max-height: 400px;
  }

  .richtext-editor h1 {
    font-size: var(--font-size-xl);
  }

  .richtext-editor h2 {
    font-size: var(--font-size-lg);
  }

  .richtext-editor h3 {
    font-size: var(--font-size-base);
  }
}

/* Touch-friendly enhancements */
@media (hover: none) and (pointer: coarse) {
  .richtext-btn {
    min-width: 36px;
    height: 36px;
  }

  .richtext-editor {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
  }
}

/**
 * Wireframe UI Framework
 * Skeleton Component - Loading placeholders
 */

/*   BASE SKELETON ELEMENTS   */
.skeleton-circle,
.skeleton-rectangle {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-primary);
}

/*   SKELETON CIRCLE   */
.skeleton-circle {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

/*   SKELETON RECTANGLE   */
.skeleton-rectangle {
    width: 100%;
    height: 8rem;
}

/*   SKELETON TEXT   */
.skeleton-text-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.skeleton-text-line {
    position: relative;
    overflow: hidden;
    height: 1rem;
    width: 100%;
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-primary);
}

/*   SKELETON SIZES - CIRCLE   */
.skeleton-circle.skeleton-sm {
    width: 2rem;
    height: 2rem;
}

.skeleton-circle.skeleton-lg {
    width: 4rem;
    height: 4rem;
}

.skeleton-circle.skeleton-xl {
    width: 6rem;
    height: 6rem;
}

/*   SKELETON SIZES - RECTANGLE   */
.skeleton-rectangle.skeleton-sm {
    height: 4rem;
}

.skeleton-rectangle.skeleton-lg {
    height: 12rem;
}

.skeleton-rectangle.skeleton-xl {
    height: 16rem;
}

/*   SKELETON SIZES - TEXT   */
.skeleton-text-container.skeleton-sm .skeleton-text-line {
    height: 0.75rem;
}

.skeleton-text-container.skeleton-lg .skeleton-text-line {
    height: 1.25rem;
}

.skeleton-text-container.skeleton-xl .skeleton-text-line {
    height: 1.5rem;
}

/*   WAVE ANIMATION   */
.skeleton-wave::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.05) 20%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0) );
    animation: skeleton-wave 2s infinite;
}

@keyframes skeleton-wave {
    100% {
        transform: translateX(100%);
    }
}

/*   PULSE ANIMATION   */
.skeleton-pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/*   NO ANIMATION   */
.skeleton-none {
    animation: none;
}

    .skeleton-none::after {
        display: none;
    }

/*   HELPER CLASSES FOR SKELETON GROUPS   */
.skeleton-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.skeleton-card {
    padding: var(--spacing-lg);
    border: var(--border-width-medium) solid var(--color-border-primary);
    background-color: var(--color-bg-primary);
}

.skeleton-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.skeleton-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/**
 * Wireframe UI Framework
 * Mobile Skeleton - Responsive loading placeholders
 */

@media (max-width: 768px) {

    /*   SKELETON CIRCLE SIZES   */
    .skeleton-circle {
        width: 2.5rem;
        height: 2.5rem;
    }

        .skeleton-circle.skeleton-sm {
            width: 1.75rem;
            height: 1.75rem;
        }

        .skeleton-circle.skeleton-lg {
            width: 3.5rem;
            height: 3.5rem;
        }

        .skeleton-circle.skeleton-xl {
            width: 5rem;
            height: 5rem;
        }

    /*   SKELETON RECTANGLE SIZES   */
    .skeleton-rectangle {
        height: 6rem;
    }

        .skeleton-rectangle.skeleton-sm {
            height: 3rem;
        }

        .skeleton-rectangle.skeleton-lg {
            height: 10rem;
        }

        .skeleton-rectangle.skeleton-xl {
            height: 14rem;
        }

    /*   SKELETON TEXT SIZES   */
    .skeleton-text-line {
        height: 0.875rem;
    }

    .skeleton-text-container.skeleton-sm .skeleton-text-line {
        height: 0.625rem;
    }

    .skeleton-text-container.skeleton-lg .skeleton-text-line {
        height: 1rem;
    }

    .skeleton-text-container.skeleton-xl .skeleton-text-line {
        height: 1.25rem;
    }

    /*   SKELETON GROUPS   */
    .skeleton-group {
        gap: var(--spacing-sm);
    }

    .skeleton-card {
        padding: var(--spacing-md);
    }

    .skeleton-card-header {
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }
}

/*   SMALL MOBILE (max-width: 480px)   */
@media (max-width: 480px) {

    .skeleton-circle {
        width: 2rem;
        height: 2rem;
    }

        .skeleton-circle.skeleton-sm {
            width: 1.5rem;
            height: 1.5rem;
        }

        .skeleton-circle.skeleton-lg {
            width: 3rem;
            height: 3rem;
        }

        .skeleton-circle.skeleton-xl {
            width: 4rem;
            height: 4rem;
        }

    .skeleton-rectangle {
        height: 5rem;
    }

        .skeleton-rectangle.skeleton-sm {
            height: 2.5rem;
        }

        .skeleton-rectangle.skeleton-lg {
            height: 8rem;
        }

        .skeleton-rectangle.skeleton-xl {
            height: 12rem;
        }

    .skeleton-text-line {
        height: 0.75rem;
    }

    .skeleton-card {
        padding: var(--spacing-sm);
    }
}

/*   LANDSCAPE MODE   */
@media (max-height: 500px) and (orientation: landscape) {

    .skeleton-rectangle {
        height: 4rem;
    }

        .skeleton-rectangle.skeleton-lg {
            height: 6rem;
        }

        .skeleton-rectangle.skeleton-xl {
            height: 8rem;
        }
}

/*   REDUCED MOTION   */
@media (prefers-reduced-motion: reduce) {

    .skeleton-wave::after {
        animation: none;
    }

    .skeleton-pulse {
        animation: none;
    }
}

/**
 * Wireframe UI Framework
 * Spline Charts Component 
 */

/*   BASE CHART CONTAINER   */
.chart {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
  border: var(--border-width-medium) solid var(--color-border-primary);
  background-color: var(--color-bg-primary);
}

/*   CHART HEADER   */
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.chart-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.chart-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  margin-top: var(--spacing-xs);
}

/*   SPLINE CHART   */
.spline-chart {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  border-left: var(--border-width-thin) solid var(--color-border-primary);
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
  padding: var(--spacing-md) 0;
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent calc(25% - 1px),
      var(--color-border-primary) calc(25% - 1px),
      var(--color-border-primary) 25%
    );
}

/*   CHART DATA POINTS   */
.spline-chart-bar {
  position: relative;
  flex: 1;
  background: linear-gradient(
    to top,
    var(--color-accent-blue),
    var(--color-accent-blue) 80%,
    transparent 80%
  );
  transition: all var(--transition-normal);
  cursor: pointer;
  min-height: 10px;
}

.spline-chart-bar::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: var(--color-accent-blue);
  border: var(--border-width-thin) solid var(--color-bg-primary);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.spline-chart-bar:hover::before {
  opacity: 1;
}

.spline-chart-bar:hover {
  filter: brightness(1.2);
}

/*   CHART VARIANTS   */
.spline-chart-success .spline-chart-bar {
  background: linear-gradient(
    to top,
    var(--color-accent-green),
    var(--color-accent-green) 80%,
    transparent 80%
  );
}

.spline-chart-success .spline-chart-bar::before {
  background-color: var(--color-accent-green);
}

.spline-chart-warning .spline-chart-bar {
  background: linear-gradient(
    to top,
    var(--color-accent-yellow),
    var(--color-accent-yellow) 80%,
    transparent 80%
  );
}

.spline-chart-warning .spline-chart-bar::before {
  background-color: var(--color-accent-yellow);
}

.spline-chart-error .spline-chart-bar {
  background: linear-gradient(
    to top,
    var(--color-accent-red),
    var(--color-accent-red) 80%,
    transparent 80%
  );
}

.spline-chart-error .spline-chart-bar::before {
  background-color: var(--color-accent-red);
}

/*   CHART WITH SMOOTH LINE   */
.spline-chart-smooth {
  position: relative;
  background-image: none;
  border: none;
  overflow: hidden;
}

.spline-chart-smooth::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--color-accent-blue) 10%,
    var(--color-accent-blue) 20%,
    transparent 20%,
    transparent 25%,
    var(--color-accent-blue) 35%,
    var(--color-accent-blue) 45%,
    transparent 45%,
    transparent 50%,
    var(--color-accent-blue) 60%,
    var(--color-accent-blue) 70%,
    transparent 70%,
    transparent 75%,
    var(--color-accent-blue) 85%,
    var(--color-accent-blue) 95%,
    transparent 95%
  );
  clip-path: polygon(
    0% 100%,
    5% 80%, 10% 70%, 15% 75%, 20% 65%,
    25% 85%, 30% 75%, 35% 60%, 40% 65%, 45% 55%,
    50% 70%, 55% 65%, 60% 50%, 65% 55%, 70% 45%,
    75% 80%, 80% 70%, 85% 60%, 90% 65%, 95% 50%,
    100% 45%, 100% 100%
  );
  opacity: 0.3;
}

.spline-chart-smooth .spline-chart-bar {
  background: transparent;
}

/*   CHART LABELS   */
.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.chart-label {
  text-align: center;
  flex: 1;
}

/*   CHART Y-AXIS   */
.chart-y-axis {
  position: absolute;
  left: calc(var(--spacing-lg) * -1);
  top: var(--spacing-md);
  bottom: var(--spacing-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.chart-y-label {
  text-align: right;
  padding-right: var(--spacing-xs);
}

/*   CHART LEGEND   */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: var(--border-width-thin) solid var(--color-border-primary);
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.chart-legend-color {
  width: 12px;
  height: 12px;
  border: var(--border-width-thin) solid var(--color-border-primary);
}

.chart-legend-color-primary {
  background-color: var(--color-accent-blue);
}

.chart-legend-color-success {
  background-color: var(--color-accent-green);
}

.chart-legend-color-warning {
  background-color: var(--color-accent-yellow);
}

.chart-legend-color-error {
  background-color: var(--color-accent-red);
}

/*   CHART SIZES   */
.chart-sm .spline-chart {
  height: 150px;
}

.chart-lg .spline-chart {
  height: 300px;
}

.chart-xl .spline-chart {
  height: 400px;
}

/*   AREA CHART   */
.area-chart .spline-chart-bar {
  background: linear-gradient(
    to top,
    var(--color-accent-blue),
    transparent
  );
  opacity: 0.6;
}

/*   LINE CHART   */
.line-chart {
  position: relative;
  height: 200px;
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent calc(25% - 1px),
      var(--color-border-primary) calc(25% - 1px),
      var(--color-border-primary) 25%
    );
  border-left: var(--border-width-thin) solid var(--color-border-primary);
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.line-chart-path {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 8%,
    var(--color-accent-blue) 8%,
    var(--color-accent-blue) 12%,
    transparent 12%,
    transparent 18%,
    var(--color-accent-blue) 18%,
    var(--color-accent-blue) 22%,
    transparent 22%
  );
  clip-path: polygon(
    0% 60%, 10% 50%, 20% 55%, 30% 40%, 40% 45%, 
    50% 35%, 60% 40%, 70% 30%, 80% 35%, 90% 25%, 
    100% 20%, 100% 100%, 0% 100%
  );
  opacity: 0.15;
}

.line-chart-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-accent-blue);
  top: 40%;
  clip-path: polygon(
    0% 60%, 10% 50%, 20% 55%, 30% 40%, 40% 45%, 
    50% 35%, 60% 40%, 70% 30%, 80% 35%, 90% 25%, 
    100% 20%
  );
}

/*   CHART TOOLTIP   */
.spline-chart-bar[data-value]::after {
  content: attr(data-value);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--color-bg-primary);
  border: var(--border-width-thin) solid var(--color-border-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  margin-bottom: var(--spacing-xs);
}

.spline-chart-bar:hover::after {
  opacity: 1;
}

/*   RESPONSIVE   */
@media (max-width: 768px) {
  .chart {
    padding: var(--spacing-md);
  }

  .spline-chart {
    height: 150px;
  }

  .chart-legend {
    gap: var(--spacing-sm);
  }

  .chart-y-axis {
    font-size: 0.625rem;
  }
}

/**
 * Wireframe UI Framework
 * Mobile Spline Charts - Touch-friendly and mobile optimizations
 */

@media (max-width: 768px) {
  
  /*   BASE CHART   */
  .chart {
    padding: var(--spacing-md);
  }

  /*   CHART HEADER   */
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
  }

  .chart-title {
    font-size: var(--font-size-base);
  }

  .chart-subtitle {
    font-size: var(--font-size-xs);
  }

  /*   SPLINE CHART   */
  .spline-chart {
    height: 150px;
    gap: 2px;
  }

  /*   CHART DATA POINTS   */
  .spline-chart-bar::before {
    width: 8px;
    height: 8px;
    /* Always show on mobile for better visibility */
    opacity: 1;
  }

  /*   CHART SIZES   */
  .chart-sm .spline-chart {
    height: 120px;
  }

  .chart-lg .spline-chart {
    height: 200px;
  }

  .chart-xl .spline-chart {
    height: 250px;
  }

  /*   LINE CHART   */
  .line-chart {
    height: 150px;
  }

  .line-chart-line {
    height: 3px; /* Thicker line for mobile */
  }

  /*   CHART LABELS   */
  .chart-labels {
    font-size: 0.625rem;
    margin-top: var(--spacing-xs);
  }

  .chart-label {
    /* Hide some labels on small screens */
    display: none;
  }

  .chart-label:nth-child(odd) {
    display: block;
  }

  /*   CHART Y-AXIS   */
  .chart-y-axis {
    font-size: 0.625rem;
    left: calc(var(--spacing-md) * -1);
  }

  /*   CHART LEGEND   */
  .chart-legend {
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
  }

  .chart-legend-item {
    font-size: var(--font-size-xs);
    gap: var(--spacing-xs);
  }

  .chart-legend-color {
    width: 10px;
    height: 10px;
  }

  /*   CHART TOOLTIP   */
  .spline-chart-bar[data-value]::after {
    font-size: 0.625rem;
    padding: var(--spacing-xs);
    /* Always show on mobile */
    opacity: 1;
  }

  /*   HORIZONTAL SCROLL   */
  .chart-mobile-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .chart-mobile-scroll .spline-chart {
    min-width: 600px;
  }

  /* Hide scrollbar but keep functionality */
  .chart-mobile-scroll::-webkit-scrollbar {
    display: none;
  }

  .chart-mobile-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /*   TOUCH OPTIMIZATIONS   */
  .spline-chart-bar {
    min-width: 20px; /* Ensure minimum tap target */
  }

  /*   DISABLE HOVER EFFECTS   */
  @media (hover: none) {
    .spline-chart-bar:hover {
      filter: none;
    }

    .spline-chart-bar:hover::before {
      opacity: 1;
    }

    .spline-chart-bar:hover::after {
      opacity: 1;
    }
  }

  /*   SAFE AREA SUPPORT   */
  .chart {
    padding-left: max(var(--spacing-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-md), env(safe-area-inset-right));
  }
}

/**
 * Wireframe UI Framework
 * Tables Component
 */

/*   BASE TABLE   */
.table {
  width: 100%;
  margin-bottom: var(--spacing-lg);
  color: var(--color-text-primary);
  vertical-align: top;
  border-collapse: collapse;
}

.table > :not(caption) > * > * {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: transparent;
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

/*   TABLE HEAD   */
.table > thead {
  vertical-align: bottom;
}

.table > thead > tr > th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  border-bottom: var(--border-width-medium) solid var(--color-border-primary);
}

/*   TABLE BODY   */
.table > tbody > tr {
  transition: background-color var(--transition-fast);
}

.table > tbody > tr:last-child > * {
  border-bottom: none;
}

/*   TABLE FOOTER   */
.table > tfoot {
  vertical-align: bottom;
}

.table > tfoot > tr > * {
  font-weight: var(--font-weight-medium);
  border-top: var(--border-width-medium) solid var(--color-border-primary);
  border-bottom: none;
}

/*   TABLE VARIANTS   */
.table-bordered {
  border: var(--border-width-thin) solid var(--color-border-primary);
}

.table-bordered > :not(caption) > * > * {
  border-right: var(--border-width-thin) solid var(--color-border-primary);
  border-left: var(--border-width-thin) solid var(--color-border-primary);
}

.table-borderless > :not(caption) > * > * {
  border-bottom: none;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--color-bg-secondary);
}

.table-hover > tbody > tr:hover {
  background-color: var(--color-bg-secondary);
  cursor: pointer;
}

/*   TABLE SIZES   */
.table-sm > :not(caption) > * > * {
  padding: var(--spacing-xs) var(--spacing-sm);
}

.table-lg > :not(caption) > * > * {
  padding: var(--spacing-md) var(--spacing-lg);
}

/*   TABLE ALIGNMENT   */
.table th,
.table td {
  text-align: left;
}

.table-center th,
.table-center td {
  text-align: center;
}

.table-right th,
.table-right td {
  text-align: right;
}

/*   RESPONSIVE TABLE   */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
  margin-bottom: 0;
}

.table-responsive > .table-bordered {
  border: 0;
}

/*   TABLE ROW STATES   */
.table-row-active {
  background-color: var(--color-bg-secondary);
}

.table-row-primary {
  border-left: var(--border-width-thick) solid var(--color-accent-blue);
}

.table-row-success {
  border-left: var(--border-width-thick) solid var(--color-accent-green);
}

.table-row-warning {
  border-left: var(--border-width-thick) solid var(--color-accent-yellow);
}

.table-row-error {
  border-left: var(--border-width-thick) solid var(--color-accent-red);
}

/*   TABLE CELL VARIANTS   */
.table-cell-primary {
  color: var(--color-accent-blue);
}

.table-cell-success {
  color: var(--color-accent-green);
}

.table-cell-warning {
  color: var(--color-accent-yellow);
}

.table-cell-error {
  color: var(--color-accent-red);
}

/*   TABLE WITH FIXED HEADER   */
.table-fixed-header {
  position: relative;
}

.table-fixed-header thead {
  position: sticky;
  top: 0;
  background-color: var(--color-bg-primary);
  z-index: 1;
}

/*   TABLE CONTAINER   */
.table-container {
  border: var(--border-width-thin) solid var(--color-border-primary);
  overflow: hidden;
}

.table-container .table {
  margin-bottom: 0;
}

.table-container .table > :not(caption) > * > * {
  border-bottom-color: var(--color-border-primary);
}

/*   TABLE CAPTION   */
.table caption {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  color: var(--color-text-secondary);
  text-align: left;
  caption-side: bottom;
}

.table-caption-top caption {
  caption-side: top;
}

/*   SORTABLE TABLE   */
.table-sortable th {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: calc(var(--spacing-xl) + var(--spacing-sm));
}

.table-sortable th::after {
  content: '';
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--color-text-tertiary);
  opacity: 0.5;
}

.table-sortable th:hover::after {
  opacity: 1;
  border-top-color: var(--color-text-primary);
}

.table-sortable th.sort-asc::after {
  border-top: 6px solid var(--color-accent-blue);
  opacity: 1;
}

.table-sortable th.sort-desc::after {
  border-top: none;
  border-bottom: 6px solid var(--color-accent-blue);
  opacity: 1;
}

/*   DATA TABLE   */
.datatable-wrapper {
  border: var(--border-width-thin) solid var(--color-border-primary);
}

.datatable-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.datatable-search {
  max-width: 300px;
}

.datatable-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: var(--border-width-thin) solid var(--color-border-primary);
}

.datatable-info {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/*   RESPONSIVE BREAKPOINTS   */
@media (max-width: 768px) {
  .table-responsive-sm {
    overflow-x: auto;
  }
}

@media (max-width: 992px) {
  .table-responsive-md {
    overflow-x: auto;
  }
}

@media (max-width: 1200px) {
  .table-responsive-lg {
    overflow-x: auto;
  }
}

/**
 * Wireframe UI Framework
 * Mobile Tables - Responsive table layouts and mobile optimizations
 */

@media (max-width: 768px) {
  
  /*   BASE TABLE   */
  .table {
    font-size: var(--font-size-sm);
  }

  .table > :not(caption) > * > * {
    padding: var(--spacing-sm);
  }

  /*   TABLE RESPONSIVE   */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--spacing-md);
  }

  /* All tables become scrollable on mobile */
  .table-mobile-scroll {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /*   CARD-STYLE TABLE   */
  .table-mobile-cards {
    border: none;
  }

  .table-mobile-cards thead {
    display: none;
  }

  .table-mobile-cards tbody {
    display: block;
  }

  .table-mobile-cards tr {
    display: block;
    margin-bottom: var(--spacing-md);
    border: var(--border-width-thin) solid var(--color-border-primary);
    padding: var(--spacing-md);
  }

  .table-mobile-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: var(--border-width-thin) solid var(--color-border-primary);
  }

  .table-mobile-cards td:last-child {
    border-bottom: none;
  }

  .table-mobile-cards td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-right: var(--spacing-md);
  }

  /*   STACKED TABLE   */
  .table-mobile-stacked {
    border: none;
  }

  .table-mobile-stacked thead {
    display: none;
  }

  .table-mobile-stacked tbody,
  .table-mobile-stacked tr,
  .table-mobile-stacked td {
    display: block;
    width: 100%;
  }

  .table-mobile-stacked tr {
    margin-bottom: var(--spacing-lg);
    border: var(--border-width-thin) solid var(--color-border-primary);
    padding: var(--spacing-md);
  }

  .table-mobile-stacked td {
    padding: var(--spacing-xs) 0;
    border: none;
    position: relative;
    padding-left: 50%;
    text-align: right;
  }

  .table-mobile-stacked td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 45%;
    padding-right: var(--spacing-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-align: left;
  }

  /*   TABLE SIZES   */
  .table-sm > :not(caption) > * > * {
    padding: var(--spacing-xs);
    font-size: var(--font-size-xs);
  }

  .table-lg > :not(caption) > * > * {
    padding: var(--spacing-md);
  }

  /*   TABLE FIXED HEADER   */
  .table-fixed-header {
    max-height: 400px;
    overflow-y: auto;
  }

  .table-fixed-header thead {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  /*   TABLE CONTAINER   */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /*   DATATABLE   */
  .datatable-wrapper {
    overflow-x: auto;
  }

  .datatable-header {
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
  }

  .datatable-search {
    max-width: 100%;
    width: 100%;
  }

  .datatable-footer {
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    align-items: stretch;
  }

  .datatable-info {
    text-align: center;
    order: 2;
  }

  .datatable-footer .pagination {
    order: 1;
    justify-content: center;
  }

  /*   SORTABLE TABLE   */
  .table-sortable th {
    min-width: 100px;
    white-space: nowrap;
  }

  /*   TABLE HOVER   */
  /* Disable hover on mobile (use active state instead) */
  .table-hover > tbody > tr:hover {
    background-color: transparent;
  }

  .table-hover > tbody > tr:active {
    background-color: var(--color-bg-secondary);
  }

  /*   SIMPLIFIED TABLE FOR SMALL SCREENS   */
  .table-mobile-simple {
    display: block;
  }

  .table-mobile-simple thead,
  .table-mobile-simple tbody,
  .table-mobile-simple tr {
    display: block;
  }

  .table-mobile-simple td {
    display: block;
    text-align: left;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: var(--border-width-thin) solid var(--color-border-primary);
  }

  .table-mobile-simple tr {
    margin-bottom: var(--spacing-md);
    border: var(--border-width-thin) solid var(--color-border-primary);
  }
}

/*   SMALL MOBILE (max-width: 480px)   */
@media (max-width: 480px) {
  .table {
    font-size: 12px;
  }

  .table > :not(caption) > * > * {
    padding: var(--spacing-xs);
  }

  .table-mobile-cards tr,
  .table-mobile-stacked tr {
    padding: var(--spacing-sm);
  }

  .table-mobile-cards td::before,
  .table-mobile-stacked td::before {
    font-size: 12px;
  }

  .datatable-header,
  .datatable-footer {
    padding: var(--spacing-sm);
  }
}

/*   LANDSCAPE MODE   */
@media (max-height: 500px) and (orientation: landscape) {
  .table-fixed-header {
    max-height: 300px;
  }

  .table-mobile-cards tr,
  .table-mobile-stacked tr {
    margin-bottom: var(--spacing-sm);
  }
}

/*   PRINT STYLES   */
@media print {
  .table-mobile-cards,
  .table-mobile-stacked,
  .table-mobile-simple {
    display: table;
  }

  .table-mobile-cards thead,
  .table-mobile-stacked thead,
  .table-mobile-simple thead {
    display: table-header-group;
  }

  .table-mobile-cards tbody,
  .table-mobile-stacked tbody,
  .table-mobile-simple tbody {
    display: table-row-group;
  }

  .table-mobile-cards tr,
  .table-mobile-stacked tr,
  .table-mobile-simple tr {
    display: table-row;
    border: none;
    padding: 0;
  }

  .table-mobile-cards td,
  .table-mobile-stacked td,
  .table-mobile-simple td {
    display: table-cell;
    padding: var(--spacing-xs);
  }

  .table-mobile-cards td::before,
  .table-mobile-stacked td::before {
    display: none;
  }
}

/**
 * Wireframe UI Framework
 * Tab Content Component Styles
 */

.tab-content {
  padding: var(--spacing-lg) 0;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.nav-tabs .nav-link {
  background-color: transparent;
  cursor: pointer;
  border: none;
  border-bottom: var(--border-width-medium) solid transparent;
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: calc(var(--border-width-thin) * -1);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}

.nav-tabs .nav-link:hover:not(.disabled) {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-border-primary);
}

.nav-tabs .nav-link.active {
  color: var(--color-accent-blue);
  border-bottom-color: var(--color-accent-blue);
}

.nav-tabs .nav-link:disabled,
.nav-tabs .nav-link.disabled {
  color: var(--color-text-tertiary);
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
  border-bottom-color: transparent;
}

/* Pills variation */
.nav-pills .nav-link {
  background-color: transparent;
  cursor: pointer;
  border: var(--border-width-thin) solid transparent;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}

.nav-pills .nav-link:hover:not(.disabled) {
  color: var(--color-text-primary);
  border-color: var(--color-border-primary);
}

.nav-pills .nav-link.active {
  background-color: var(--color-accent-blue);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-blue);
}

.nav-pills .nav-link:disabled,
.nav-pills .nav-link.disabled {
  color: var(--color-text-tertiary);
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
  background-color: transparent;
  border-color: transparent;
}

/* Vertical tabs layout */
.wf-tabs-vertical {
  display: flex;
  gap: var(--spacing-lg);
}

.wf-tabs-vertical .nav {
  flex-direction: column;
  min-width: 200px;
  border-bottom: none;
  border-right: var(--border-width-thin) solid var(--color-border-primary);
}

.wf-tabs-vertical .nav-tabs .nav-link {
  border-bottom: none;
  border-right: var(--border-width-medium) solid transparent;
  margin-bottom: 0;
  margin-right: calc(var(--border-width-thin) * -1);
  text-align: left;
}

.wf-tabs-vertical .nav-tabs .nav-link:hover:not(.disabled) {
  border-right-color: var(--color-border-primary);
}

.wf-tabs-vertical .nav-tabs .nav-link.active {
  border-right-color: var(--color-accent-blue);
}

.wf-tabs-vertical .tab-content {
  flex: 1;
  padding: 0;
}

/* Fill and justified tabs */
.nav-fill .nav-item,
.nav-fill .nav-link {
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified .nav-item,
.nav-justified .nav-link {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}

/* Focus styles for accessibility */
.nav-tabs .nav-link:focus,
.nav-pills .nav-link:focus {
  outline: var(--border-width-medium) solid var(--color-accent-blue);
  outline-offset: 2px;
}

/* Smooth transitions for content panels */
.tab-pane {
  animation: fadeIn var(--transition-normal);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Mobile responsive - horizontal scroll for tabs */
@media (max-width: 768px) {
  .nav-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .nav-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .nav-tabs .nav-item {
    flex-shrink: 0;
  }

  .nav-tabs .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Keep vertical tabs stacked on mobile */
  .wf-tabs-vertical {
    flex-direction: column;
  }

  .wf-tabs-vertical .nav {
    flex-direction: row;
    min-width: auto;
    width: 100%;
    border-right: none;
    border-bottom: var(--border-width-thin) solid var(--color-border-primary);
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .wf-tabs-vertical .nav::-webkit-scrollbar {
    display: none;
  }

  .wf-tabs-vertical .nav-tabs .nav-link {
    border-right: none;
    border-bottom: var(--border-width-medium) solid transparent;
    margin-right: 0;
    margin-bottom: calc(var(--border-width-thin) * -1);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .wf-tabs-vertical .nav-tabs .nav-link:hover:not(.disabled) {
    border-right-color: transparent;
    border-bottom-color: var(--color-border-primary);
  }

  .wf-tabs-vertical .nav-tabs .nav-link.active {
    border-right-color: transparent;
    border-bottom-color: var(--color-accent-blue);
  }

  .wf-tabs-vertical .tab-content {
    padding: var(--spacing-lg) 0;
  }

  /* Pills remain stacked on mobile */
  .nav-pills {
    flex-direction: column;
    overflow-x: visible;
  }

  .nav-pills .nav-link {
    width: 100%;
    text-align: left;
    white-space: normal;
  }
}

/**
 * Wireframe UI Framework
 * Tabs Component - Mobile Specific Styles
 */

@media (max-width: 768px) {
  
  /*   HORIZONTAL SCROLLING TABS   */
  .nav-tabs {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    scroll-behavior: smooth;
  }

  .nav-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge */
  }

  /* Ensure items don't shrink */
  .nav-tabs .nav-item {
    flex-shrink: 0;
  }

  .nav-tabs .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
    min-width: fit-content;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* Add scroll indicators (optional) */
  .nav-tabs::before,
  .nav-tabs::after {
    content: '';
    position: sticky;
    width: 20px;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }

  .nav-tabs::before {
    left: 0;
    background: linear-gradient(to right, var(--color-bg-primary), transparent);
  }

  .nav-tabs::after {
    right: 0;
    background: linear-gradient(to left, var(--color-bg-primary), transparent);
  }

  /*   UNDERLINE NAV   */
  .nav-underline {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .nav-underline::-webkit-scrollbar {
    display: none;
  }

  .nav-underline .nav-item {
    flex-shrink: 0;
  }

  .nav-underline .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /*   PILLS LAYOUT   */
  .nav-pills {
    flex-direction: column;
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .nav-pills .nav-item {
    flex-shrink: 1;
    width: 100%;
  }

  .nav-pills .nav-link {
    width: 100%;
    text-align: left;
    white-space: normal;
    min-height: 44px;
  }

  /*   VERTICAL TABS ON MOBILE   */
  .wf-tabs-vertical {
    flex-direction: column;
  }

  .wf-tabs-vertical .nav {
    flex-direction: row;
    min-width: auto;
    width: 100%;
    border-right: none;
    border-bottom: var(--border-width-thin) solid var(--color-border-primary);
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .wf-tabs-vertical .nav::-webkit-scrollbar {
    display: none;
  }

  .wf-tabs-vertical .nav-item {
    flex-shrink: 0;
  }

  .wf-tabs-vertical .nav-tabs .nav-link {
    border-right: none;
    border-bottom: var(--border-width-medium) solid transparent;
    margin-right: 0;
    margin-bottom: calc(var(--border-width-thin) * -1);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .wf-tabs-vertical .nav-tabs .nav-link:hover:not(.disabled) {
    border-right-color: transparent;
    border-bottom-color: var(--color-border-primary);
  }

  .wf-tabs-vertical .nav-tabs .nav-link.active {
    border-right-color: transparent;
    border-bottom-color: var(--color-accent-blue);
  }

  .wf-tabs-vertical .tab-content {
    padding: var(--spacing-lg) 0;
  }

  /*   TAB CONTENT   */
  .tab-content {
    padding: var(--spacing-md) 0;
  }

  /*   FILL AND JUSTIFIED ON MOBILE   */
  .nav-fill .nav-item,
  .nav-fill .nav-link {
    flex: 1 1 auto;
    min-width: 100px;
  }

  .nav-justified .nav-item,
  .nav-justified .nav-link {
    flex: 1 1 0;
    min-width: 100px;
  }

  /*   TOUCH TARGETS   */
  .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-tabs .nav-link,
  .nav-underline .nav-link {
    min-height: 44px;
  }
}

/*   SMALL MOBILE (max-width: 480px)   */
@media (max-width: 480px) {
  .nav-tabs .nav-link {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

  .nav-pills .nav-link {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .tab-content {
    padding: var(--spacing-sm) 0;
  }

  .nav-fill .nav-item,
  .nav-fill .nav-link {
    min-width: 80px;
  }

  .nav-justified .nav-item,
  .nav-justified .nav-link {
    min-width: 80px;
  }
}

/*   LANDSCAPE MODE   */
@media (max-height: 500px) and (orientation: landscape) {
  .nav-tabs .nav-link {
    padding: var(--spacing-xs) var(--spacing-sm);
    min-height: 36px;
  }

  .nav-pills .nav-link {
    padding: var(--spacing-xs) var(--spacing-md);
    min-height: 36px;
  }

  .tab-content {
    padding: var(--spacing-sm) 0;
  }
}

/**
 * Wireframe UI Framework
 * Thumbnails Component
 */

/*   BASE THUMBNAIL   */
.thumbnail {
  display: block;
  padding: var(--spacing-xs);
  border: var(--border-width-medium) solid var(--color-border-primary);
  background-color: var(--color-bg-primary);
  transition: all var(--transition-fast);
}

.thumbnail:hover {
  border-color: var(--color-accent-blue);
}

.thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  border: var(--border-width-thin) solid var(--color-border-primary);
}

/*   THUMBNAIL WITH CAPTION   */
.thumbnail-caption {
  padding: var(--spacing-sm);
  color: var(--color-text-primary);
}

.thumbnail-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-primary);
}

.thumbnail-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/*   THUMBNAIL SIZES   */
.thumbnail-sm {
  max-width: 150px;
}

.thumbnail-md {
  max-width: 250px;
}

.thumbnail-lg {
  max-width: 350px;
}

.thumbnail-xl {
  max-width: 500px;
}

/*   THUMBNAIL VARIANTS   */
.thumbnail-bordered {
  border-width: var(--border-width-thick);
}

.thumbnail-accent {
  border-color: var(--color-accent-blue);
}

.thumbnail-primary {
  border-color: var(--color-accent-blue);
}

.thumbnail-success {
  border-color: var(--color-accent-green);
}

.thumbnail-warning {
  border-color: var(--color-accent-yellow);
}

.thumbnail-error,
.thumbnail-danger {
  border-color: var(--color-accent-red);
}

/*   THUMBNAIL SHAPES   */
.thumbnail-square img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.thumbnail-circle {
  border-radius: 50%;
  overflow: hidden;
}

.thumbnail-circle img {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/*   THUMBNAIL STATES   */
.thumbnail-clickable {
  cursor: pointer;
}

.thumbnail-clickable:hover {
  border-color: var(--color-text-primary);
  background-color: var(--color-bg-secondary);
  transform: translateY(-2px);
}

.thumbnail-clickable:active {
  transform: translateY(0);
}

.thumbnail.selected {
  border-color: var(--color-accent-blue);
  border-width: var(--border-width-thick);
  background-color: var(--color-bg-secondary);
}

/*   THUMBNAIL GRID   */
.thumbnail-grid {
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.thumbnail-grid-sm {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--spacing-sm);
}

.thumbnail-grid-lg {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

/*   THUMBNAIL GALLERY   */
.thumbnail-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.thumbnail-gallery .thumbnail {
  flex: 0 0 auto;
}

/*   THUMBNAIL WITH OVERLAY   */
.thumbnail-overlay {
  position: relative;
  overflow: hidden;
}

.thumbnail-overlay-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-md);
  background: linear-gradient(to top, rgba(26, 26, 26, 0.9), transparent);
  color: var(--color-text-primary);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.thumbnail-overlay:hover .thumbnail-overlay-content {
  opacity: 1;
}

/*   THUMBNAIL WITH BADGE   */
.thumbnail-badge {
  position: relative;
}

.thumbnail-badge .badge {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
}

/*   THUMBNAIL LIST   */
.thumbnail-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.thumbnail-list-item {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-sm);
  border: var(--border-width-thin) solid var(--color-border-primary);
  background-color: var(--color-bg-primary);
  transition: all var(--transition-fast);
}

.thumbnail-list-item:hover {
  border-color: var(--color-border-secondary);
  background-color: var(--color-bg-secondary);
}

.thumbnail-list-img {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border: var(--border-width-thin) solid var(--color-border-primary);
}

.thumbnail-list-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumbnail-list-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*   THUMBNAIL PLACEHOLDER   */
.thumbnail-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background-color: var(--color-bg-secondary);
  border: var(--border-width-thin) solid var(--color-border-primary);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

/*   RESPONSIVE   */
@media (max-width: 768px) {
  .thumbnail-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--spacing-sm);
  }

  .thumbnail-grid-lg {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .thumbnail-list-item {
    flex-direction: column;
  }

  .thumbnail-list-img {
    width: 100%;
    height: 200px;
  }
}

/**
 * Wireframe UI Framework
 * Mobile Thumbnails - Touch-friendly sizing and mobile optimizations
 */

@media (max-width: 768px) {
  
  /*   BASE THUMBNAIL   */
  .thumbnail {
    padding: var(--spacing-sm);
  }

  /*   THUMBNAIL SIZES   */
  .thumbnail-sm {
    max-width: 120px;
  }

  .thumbnail-md {
    max-width: 180px;
  }

  .thumbnail-lg {
    max-width: 100%;
  }

  .thumbnail-xl {
    max-width: 100%;
  }

  /*   THUMBNAIL GRID   */
  .thumbnail-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--spacing-sm);
  }

  .thumbnail-grid-sm {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--spacing-xs);
  }

  .thumbnail-grid-lg {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-md);
  }

  /*   THUMBNAIL GALLERY   */
  .thumbnail-gallery {
    gap: var(--spacing-xs);
  }

  .thumbnail-gallery .thumbnail {
    min-width: 80px;
  }

  /*   THUMBNAIL LIST   */
  .thumbnail-list {
    gap: var(--spacing-sm);
  }

  .thumbnail-list-item {
    flex-direction: column;
    padding: var(--spacing-md);
  }

  .thumbnail-list-img {
    width: 100%;
    height: 180px;
  }

  /*   THUMBNAIL OVERLAY   */
  .thumbnail-overlay-content {
    padding: var(--spacing-sm);
    /* Always show on mobile for better UX */
    opacity: 0.95;
  }

  /*   THUMBNAIL CAPTION   */
  .thumbnail-caption {
    padding: var(--spacing-md);
  }

  .thumbnail-title {
    font-size: var(--font-size-base);
  }

  .thumbnail-text {
    font-size: var(--font-size-sm);
  }

  /*   THUMBNAIL CLICKABLE   */
  .thumbnail-clickable {
    /* Increase tap target */
    min-height: 44px;
  }

  .thumbnail-clickable:hover {
    /* Disable hover transform on mobile */
    transform: none;
  }

  /*   THUMBNAIL BADGE   */
  .thumbnail-badge .badge {
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    font-size: var(--font-size-xs);
  }

  /*   MOBILE SPECIFIC UTILITIES   */
  .thumbnail-mobile-full {
    max-width: 100%;
    width: 100%;
  }

  .thumbnail-mobile-stack .thumbnail-grid {
    grid-template-columns: 1fr;
  }

  /*   HORIZONTAL SCROLL GALLERY   */
  .thumbnail-gallery-mobile-scroll {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
  }

  .thumbnail-gallery-mobile-scroll .thumbnail {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 70vw;
    max-width: 300px;
  }

  /* Hide scrollbar but keep functionality */
  .thumbnail-gallery-mobile-scroll::-webkit-scrollbar {
    display: none;
  }

  .thumbnail-gallery-mobile-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /*   SAFE AREA SUPPORT   */
  .thumbnail-gallery-mobile-scroll {
    padding-left: max(var(--spacing-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-md), env(safe-area-inset-right));
  }
}

/**
 * Wireframe UI Framework
 * Time Picker Component
 */

/*   TIME PICKER CONTAINER   */
.time-picker {
  position: relative;
  display: inline-block;
  width: 100%;
}

/*   TIME PICKER INPUT   */
.time-picker-input-wrapper {
  position: relative;
  width: 100%;
}

.time-picker-input {
  padding-right: calc(var(--spacing-xl) + var(--spacing-md));
  cursor: pointer;
}

.time-picker-icon {
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: var(--font-size-lg);
}

/*   TIME PICKER BACKDROP   */
.time-picker-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-index-dropdown) - 1);
  background: transparent;
}

/*   TIME PICKER PANEL   */
.time-picker-panel {
  position: absolute;
  top: calc(100% + var(--spacing-xs));
  left: 0;
  z-index: var(--z-index-dropdown);
  min-width: 320px;
  padding: var(--spacing-md);
  background-color: var(--color-bg-primary);
  border: var(--border-width-medium) solid var(--color-border-primary);
  animation: dropdown-fade-in var(--transition-fast);
}

/*   TIME PICKER DISPLAY   */
.time-picker-display {
  text-align: center;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.time-picker-display-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-blue);
  font-variant-numeric: tabular-nums;
}

/*   TIME PICKER CONTROLS   */
.time-picker-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.time-picker-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}

.time-picker-arrow {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  line-height: 1;
}

.time-picker-value-wrapper {
  width: 4rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-secondary);
  border: var(--border-width-medium) solid var(--color-border-primary);
}

.time-picker-value {
  width: 100%;
  text-align: center;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  outline: none;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}

.time-picker-value::-webkit-inner-spin-button,
.time-picker-value::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.time-picker-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.time-picker-separator {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  margin-top: calc(var(--spacing-lg) * -1);
}

.time-picker-period {
  margin-top: calc(var(--spacing-lg) * -1);
}

.time-picker-period .btn {
  width: 4rem;
}

/*   TIME PICKER PRESETS   */
.time-picker-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.time-picker-preset {
  flex: 1;
  min-width: calc(50% - var(--spacing-xs));
}

/*   TIME PICKER FOOTER   */
.time-picker-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

/*   SIZES   */
.time-picker-sm .time-picker-panel {
  min-width: 280px;
}

.time-picker-sm .time-picker-display-value {
  font-size: var(--font-size-2xl);
}

.time-picker-sm .time-picker-value-wrapper {
  width: 3.5rem;
  height: 2.5rem;
}

.time-picker-sm .time-picker-value {
  font-size: var(--font-size-lg);
}

.time-picker-lg .time-picker-panel {
  min-width: 360px;
}

.time-picker-lg .time-picker-display-value {
  font-size: var(--font-size-4xl);
}

.time-picker-lg .time-picker-value-wrapper {
  width: 4.5rem;
  height: 3.5rem;
}

.time-picker-lg .time-picker-value {
  font-size: var(--font-size-2xl);
}

/*   VALIDATION STATES   */
.time-picker-valid .time-picker-input {
  border-color: var(--color-accent-green);
}

.time-picker-invalid .time-picker-input {
  border-color: var(--color-accent-red);
}

/*   ANIMATIONS   */
@keyframes dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Wireframe UI Framework
 * Time Picker Component - Mobile
 */

@media (max-width: 768px) {
  /*   TIME PICKER PANEL   */
  .time-picker-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: auto;
    max-width: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    animation: slide-up var(--transition-normal);
  }

  /*   TIME PICKER CONTROLS   */
  .time-picker-controls {
    flex-wrap: wrap;
  }

  .time-picker-column {
    flex: 1;
    min-width: calc(33.333% - var(--spacing-sm));
  }

  .time-picker-period {
    flex-basis: 100%;
    flex-direction: row;
    margin-top: var(--spacing-sm);
  }

  .time-picker-period .btn {
    flex: 1;
  }

  /*   TIME PICKER PRESETS   */
  .time-picker-presets {
    justify-content: space-between;
  }

  .time-picker-preset {
    flex: 1;
    min-width: calc(50% - var(--spacing-xs));
  }

  /*   ANIMATIONS   */
  @keyframes slide-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
}

/**
 * Wireframe UI Framework
 * Toast Notifications Component
 */

/*   TOAST CONTAINER   */
.toast-container {
  position: fixed;
  z-index: var(--z-index-tooltip);
  padding: var(--spacing-md);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-width: 400px;
}

.toast-top-right {
  top: 0;
  right: 0;
}

.toast-top-left {
  top: 0;
  left: 0;
}

.toast-top-center {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.toast-bottom-right {
  bottom: 0;
  right: 0;
}

.toast-bottom-left {
  bottom: 0;
  left: 0;
}

.toast-bottom-center {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/*   TOAST   */
.toast {
  position: relative;
  width: 100%;
  min-width: 300px;
  pointer-events: auto;
  background-color: var(--color-bg-primary);
  border: var(--border-width-medium) solid var(--color-border-primary);
  animation: toast-slide-in var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.toast.hiding {
  animation: toast-slide-out var(--transition-normal);
}

/*   TOAST HEADER   */
.toast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-primary);
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.toast-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  flex: 1;
}

/*   TOAST CLOSE BUTTON   */
.toast-close {
  box-sizing: content-box;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  margin-left: var(--spacing-sm);
  color: var(--color-text-primary);
  background: transparent;
  border: var(--border-width-thin) solid var(--color-border-primary);
  opacity: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  flex-shrink: 0;
  font-size: var(--font-size-lg);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-close:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
  opacity: 1;
}

.toast-close:focus {
  outline: var(--border-width-medium) solid var(--color-accent-blue);
  outline-offset: 1px;
}

/*   TOAST BODY   */
.toast-body {
  padding: var(--spacing-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

/*   TOAST VARIANTS   */
.toast-primary {
  border-color: var(--color-accent-blue);
}

.toast-primary .toast-header {
  border-bottom-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.toast-success {
  border-color: var(--color-accent-green);
}

.toast-success .toast-header {
  border-bottom-color: var(--color-accent-green);
  color: var(--color-accent-green);
}

.toast-warning {
  border-color: var(--color-accent-yellow);
}

.toast-warning .toast-header {
  border-bottom-color: var(--color-accent-yellow);
  color: var(--color-accent-yellow);
}

.toast-error {
  border-color: var(--color-accent-red);
}

.toast-error .toast-header {
  border-bottom-color: var(--color-accent-red);
  color: var(--color-accent-red);
}

.toast-info {
  border-color: var(--color-accent-blue);
}

.toast-info .toast-header {
  border-bottom-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

/*   ANIMATIONS   */
@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Slide in from left for left-positioned toasts */
.toast-top-left .toast,
.toast-bottom-left .toast {
  animation: toast-slide-in-left var(--transition-normal);
}

@keyframes toast-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast-top-left .toast.hiding,
.toast-bottom-left .toast.hiding {
  animation: toast-slide-out-left var(--transition-normal);
}

@keyframes toast-slide-out-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

/* Slide down for center-positioned toasts */
.toast-top-center .toast {
  animation: toast-slide-in-top var(--transition-normal);
}

@keyframes toast-slide-in-top {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toast-top-center .toast.hiding {
  animation: toast-slide-out-top var(--transition-normal);
}

@keyframes toast-slide-out-top {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

/* Slide up for bottom-center toasts */
.toast-bottom-center .toast {
  animation: toast-slide-in-bottom var(--transition-normal);
}

@keyframes toast-slide-in-bottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toast-bottom-center .toast.hiding {
  animation: toast-slide-out-bottom var(--transition-normal);
}

@keyframes toast-slide-out-bottom {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

/*   TOAST STACKING   */
.toast-container .toast + .toast {
  margin-top: var(--spacing-sm);
}

/**
 * Wireframe UI Framework
 * Mobile Toast - Responsive toast notifications
 */

@media (max-width: 768px) {
  
  /*   TOAST CONTAINER   */
  .toast-container {
    padding: var(--spacing-sm);
    max-width: 100%;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  .toast-top-right,
  .toast-top-left,
  .toast-top-center {
    top: 0;
  }

  .toast-bottom-right,
  .toast-bottom-left,
  .toast-bottom-center {
    bottom: 0;
  }

  /*   TOAST   */
  .toast {
    min-width: auto;
    width: 100%;
  }

  /*   TOAST HEADER   */
  .toast-header {
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .toast-title {
    font-size: var(--font-size-sm);
  }

  /*   TOAST CLOSE BUTTON   */
  .toast-close {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 44px;
    min-height: 44px;
    margin-left: var(--spacing-xs);
  }

  /*   TOAST BODY   */
  .toast-body {
    padding: var(--spacing-sm);
    font-size: 13px;
  }

  /*   TOAST STACKING   */
  .toast-container .toast + .toast {
    margin-top: var(--spacing-xs);
  }
}

/*   SMALL MOBILE (max-width: 480px)   */
@media (max-width: 480px) {
  .toast-container {
    padding: var(--spacing-xs);
  }

  .toast-header {
    padding: var(--spacing-xs);
  }

  .toast-title {
    font-size: 12px;
  }

  .toast-body {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 12px;
  }

  .toast-close {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/*   LANDSCAPE MODE   */
@media (max-height: 500px) and (orientation: landscape) {
  .toast-container {
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .toast {
    margin-bottom: var(--spacing-xs);
  }
}

/*   REDUCED MOTION   */
@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }

  .toast.hiding {
    animation: none;
  }
}

/**
 * Wireframe UI Framework
 * Tooltips & Popovers Component
 */

/*   TOOLTIP   */
.tooltip {
  position: absolute;
  z-index: var(--z-index-tooltip);
  display: block;
  margin: var(--spacing-xs);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  word-wrap: break-word;
  opacity: 0;
  pointer-events: none;
}

.tooltip.show {
  opacity: 1;
  pointer-events: auto;
}

.tooltip-inner {
  max-width: 200px;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-primary);
  text-align: center;
  background-color: var(--color-bg-primary);
  border: var(--border-width-medium) solid var(--color-border-primary);
}

/*   TOOLTIP ARROW   */
.tooltip-arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}

.tooltip-arrow::before {
  position: absolute;
  content: '';
  border-color: transparent;
  border-style: solid;
}

/*   TOOLTIP POSITIONS   */
.tooltip-top {
  padding: var(--spacing-xs) 0;
}

.tooltip-top .tooltip-arrow {
  bottom: 0;
}

.tooltip-top .tooltip-arrow::before {
  top: -1px;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: var(--color-border-primary);
}

.tooltip-right {
  padding: 0 var(--spacing-xs);
}

.tooltip-right .tooltip-arrow {
  left: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.tooltip-right .tooltip-arrow::before {
  right: -1px;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: var(--color-border-primary);
}

.tooltip-bottom {
  padding: var(--spacing-xs) 0;
}

.tooltip-bottom .tooltip-arrow {
  top: 0;
}

.tooltip-bottom .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: var(--color-border-primary);
}

.tooltip-left {
  padding: 0 var(--spacing-xs);
}

.tooltip-left .tooltip-arrow {
  right: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.tooltip-left .tooltip-arrow::before {
  left: -1px;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: var(--color-border-primary);
}

/*   TOOLTIP VARIANTS   */
.tooltip-primary .tooltip-inner {
  background-color: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
  color: var(--color-text-inverse);
}

.tooltip-primary.tooltip-top .tooltip-arrow::before {
  border-top-color: var(--color-accent-blue);
}

.tooltip-primary.tooltip-right .tooltip-arrow::before {
  border-right-color: var(--color-accent-blue);
}

.tooltip-primary.tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--color-accent-blue);
}

.tooltip-primary.tooltip-left .tooltip-arrow::before {
  border-left-color: var(--color-accent-blue);
}

/*   POPOVER   */
.popover {
  position: absolute;
  z-index: var(--z-index-popover);
  display: block;
  max-width: 276px;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  word-wrap: break-word;
  background-color: var(--color-bg-primary);
  border: var(--border-width-medium) solid var(--color-border-primary);
  opacity: 0;
  pointer-events: none;
  animation: popover-fade-in var(--transition-normal);
}

.popover.show {
  opacity: 1;
  pointer-events: auto;
}

/*   POPOVER ARROW   */
.popover-arrow {
  position: absolute;
  display: block;
  width: 1rem;
  height: 0.5rem;
}

.popover-arrow::before {
  position: absolute;
  content: '';
  border-color: transparent;
  border-style: solid;
}

/*   POPOVER POSITIONS   */
.popover-top {
  margin-bottom: var(--spacing-xs);
}

.popover-top > .popover-arrow {
  bottom: calc(-0.5rem - var(--border-width-medium));
}

.popover-top > .popover-arrow::before {
  bottom: 0;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: var(--color-border-primary);
}

.popover-right {
  margin-left: var(--spacing-xs);
}

.popover-right > .popover-arrow {
  left: calc(-0.5rem - var(--border-width-medium));
  width: 0.5rem;
  height: 1rem;
}

.popover-right > .popover-arrow::before {
  left: 0;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: var(--color-border-primary);
}

.popover-bottom {
  margin-top: var(--spacing-xs);
}

.popover-bottom > .popover-arrow {
  top: calc(-0.5rem - var(--border-width-medium));
}

.popover-bottom > .popover-arrow::before {
  top: 0;
  border-width: 0 0.5rem 0.5rem;
  border-bottom-color: var(--color-border-primary);
}

.popover-left {
  margin-right: var(--spacing-xs);
}

.popover-left > .popover-arrow {
  right: calc(-0.5rem - var(--border-width-medium));
  width: 0.5rem;
  height: 1rem;
}

.popover-left > .popover-arrow::before {
  right: 0;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: var(--color-border-primary);
}

/*   POPOVER HEADER   */
.popover-header {
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background-color: transparent;
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
}

.popover-header:empty {
  display: none;
}

/*   POPOVER BODY   */
.popover-body {
  padding: var(--spacing-md);
  color: var(--color-text-primary);
}

/*   POPOVER FOOTER   */
.popover-footer {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: var(--border-width-thin) solid var(--color-border-primary);
  background-color: var(--color-bg-secondary);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
}

/*   POPOVER VARIANTS   */
.popover-primary {
  border-color: var(--color-accent-blue);
}

.popover-primary .popover-header {
  color: var(--color-accent-blue);
  border-bottom-color: var(--color-accent-blue);
}

.popover-success {
  border-color: var(--color-accent-green);
}

.popover-success .popover-header {
  color: var(--color-accent-green);
  border-bottom-color: var(--color-accent-green);
}

/*   ANIMATIONS   */
@keyframes popover-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/*   HELPER TEXT   */
.helper-text {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  border: var(--border-width-thin) solid var(--color-border-primary);
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  cursor: help;
  transition: all var(--transition-fast);
}

.helper-text:hover {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

/*   NOTIFICATION CALLOUT   */
.callout {
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  border: var(--border-width-thin) solid var(--color-border-primary);
  border-left-width: var(--border-width-thick);
}

.callout-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-primary);
}

.callout-primary {
  border-left-color: var(--color-accent-blue);
}

.callout-primary .callout-title {
  color: var(--color-accent-blue);
}

.callout-success {
  border-left-color: var(--color-accent-green);
}

.callout-success .callout-title {
  color: var(--color-accent-green);
}

.callout-warning {
  border-left-color: var(--color-accent-yellow);
}

.callout-warning .callout-title {
  color: var(--color-accent-yellow);
}

.callout-error,
.callout-danger {
  border-left-color: var(--color-accent-red);
}

.callout-error .callout-title,
.callout-danger .callout-title {
  color: var(--color-accent-red);
}

/*   HINT/TIP   */
.hint {
  position: relative;
  display: inline-block;
  cursor: help;
}

.hint::after {
  content: attr(data-hint);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--color-bg-primary);
  border: var(--border-width-thin) solid var(--color-border-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.hint:hover::after {
  opacity: 1;
}

/*   INFO BOX   */
.info-box {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border: var(--border-width-thin) solid var(--color-border-primary);
  margin-bottom: var(--spacing-md);
}

.info-box-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-width-medium) solid var(--color-border-primary);
  color: var(--color-text-primary);
}

.info-box-content {
  flex: 1;
}

.info-box-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-primary);
}

.info-box-primary .info-box-icon {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.info-box-primary .info-box-title {
  color: var(--color-accent-blue);
}

/**
 * Wireframe UI Framework
 * Mobile Tooltips - Responsive tooltips, popovers, and callouts
 */

@media (max-width: 768px) {
  
  /*   TOOLTIP   */
  .tooltip {
    /* Position tooltips at bottom center on mobile for better visibility */
    position: fixed;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-index-tooltip);
  }

  .tooltip-inner {
    max-width: calc(100vw - var(--spacing-xl));
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  /*   TOOLTIP ARROW   */
  /* Hide arrows on mobile for cleaner appearance */
  .tooltip-arrow {
    display: none;
  }

  /*   TOOLTIP POSITIONS   */
  /* Override all positioning for mobile */
  .tooltip-top,
  .tooltip-right,
  .tooltip-bottom,
  .tooltip-left {
    position: fixed;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
  }

  /*   POPOVER   */
  .popover {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(100vw - var(--spacing-xl));
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: var(--z-index-popover);
  }

  /*   POPOVER ARROW   */
  /* Hide arrows on mobile */
  .popover-arrow {
    display: none;
  }

  /*   POPOVER POSITIONS   */
  /* Center all popovers on mobile */
  .popover-top,
  .popover-right,
  .popover-bottom,
  .popover-left {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }

  .popover-top > .popover-arrow,
  .popover-right > .popover-arrow,
  .popover-bottom > .popover-arrow,
  .popover-left > .popover-arrow {
    display: none;
  }

  /*   POPOVER HEADER   */
  .popover-header {
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
    position: sticky;
    top: 0;
    background-color: var(--color-bg-primary);
    z-index: 1;
  }

  /*   POPOVER BODY   */
  .popover-body {
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
  }

  /*   POPOVER FOOTER   */
  .popover-footer {
    padding: var(--spacing-md);
    flex-direction: column;
    gap: var(--spacing-sm);
    position: sticky;
    bottom: 0;
    background-color: var(--color-bg-primary);
  }

  .popover-footer > * {
    width: 100%;
  }

  /*   POPOVER BACKDROP   */
  .popover-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-index-popover) - 1);
  }

  /*   HELPER TEXT   */
  .helper-text {
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 11px;
    min-width: 32px;
    min-height: 32px;
  }

  /*   CALLOUT   */
  .callout {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .callout-title {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-sm);
  }

  /*   HINT/TIP   */
  .hint::after {
    position: fixed;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - var(--spacing-xl));
    white-space: normal;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  /*   INFO BOX   */
  .info-box {
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
  }

  .info-box-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .info-box-title {
    font-size: var(--font-size-base);
  }

  /*   TOUCH-OPTIMIZED POPOVER   */
  .popover-mobile-fullscreen {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    max-width: 100%;
    max-height: 100%;
    border: none;
  }

  .popover-mobile-fullscreen .popover-header {
    padding-top: max(var(--spacing-md), env(safe-area-inset-top));
  }

  .popover-mobile-fullscreen .popover-footer {
    padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
  }

  /*   BOTTOM SHEET POPOVER   */
  .popover-bottom-sheet {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    max-width: 100%;
    max-height: 80vh;
  }

  .popover-bottom-sheet .popover-header::before {
    content: '';
    position: absolute;
    top: var(--spacing-sm);
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background-color: var(--color-border-primary);
    border-radius: 2px;
  }

  .popover-bottom-sheet .popover-header {
    padding-top: var(--spacing-lg);
  }

  /*   TOOLTIP AS SNACKBAR   */
  .tooltip-snackbar {
    position: fixed;
    bottom: var(--spacing-lg);
    left: var(--spacing-md);
    right: var(--spacing-md);
    transform: none;
  }

  .tooltip-snackbar .tooltip-inner {
    width: 100%;
    max-width: 100%;
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
  }

  /*   ANIMATIONS   */
  @keyframes tooltip-slide-up {
    from {
      transform: translate(-50%, 20px);
      opacity: 0;
    }
    to {
      transform: translate(-50%, 0);
      opacity: 1;
    }
  }

  .tooltip.show {
    animation: tooltip-slide-up var(--transition-normal);
  }

  @keyframes popover-fade-scale {
    from {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.9);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .popover.show {
    animation: popover-fade-scale var(--transition-normal);
  }
}

/*   SMALL MOBILE (max-width: 480px)   */
@media (max-width: 480px) {
  .tooltip {
    bottom: var(--spacing-md);
  }

  .tooltip-inner {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 12px;
    max-width: calc(100vw - var(--spacing-lg));
  }

  .popover {
    max-width: calc(100vw - var(--spacing-lg));
  }

  .popover-header,
  .popover-body,
  .popover-footer {
    padding: var(--spacing-sm);
  }

  .popover-header {
    font-size: var(--font-size-sm);
  }

  .popover-body {
    font-size: var(--font-size-sm);
  }

  .callout {
    padding: var(--spacing-sm);
  }

  .callout-title {
    font-size: var(--font-size-sm);
  }

  .info-box {
    padding: var(--spacing-sm);
  }

  .info-box-icon {
    width: 2rem;
    height: 2rem;
  }

  .info-box-title {
    font-size: var(--font-size-sm);
  }

  .helper-text {
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    font-size: 10px;
  }

  .tooltip-snackbar {
    bottom: var(--spacing-md);
    left: var(--spacing-sm);
    right: var(--spacing-sm);
  }

  .tooltip-snackbar .tooltip-inner {
    padding: var(--spacing-sm);
  }
}

/*   LANDSCAPE MODE   */
@media (max-height: 500px) and (orientation: landscape) {
  .tooltip {
    bottom: var(--spacing-sm);
  }

  .popover {
    max-height: 90vh;
  }

  .popover-bottom-sheet {
    max-height: 70vh;
  }

  .popover-header,
  .popover-body,
  .popover-footer {
    padding: var(--spacing-sm);
  }
}

/*   SAFE AREA ADJUSTMENTS   */
@media (max-width: 768px) {
  .tooltip {
    bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
  }

  .tooltip-snackbar {
    bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
  }

  .popover-bottom-sheet {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/*   ACCESSIBILITY   */
@media (max-width: 768px) {
  /* Ensure tooltips and popovers are touch-dismissible */
  .tooltip,
  .popover {
    touch-action: manipulation;
  }

  /* Better focus visibility */
  .helper-text:focus {
    outline-width: 3px;
    outline-offset: 2px;
  }
}

/*   REDUCED MOTION   */
@media (prefers-reduced-motion: reduce) {
  .tooltip.show,
  .popover.show {
    animation: none;
  }
}