/**
 * ZynchroCMS - Shared Styles
 * Common CSS classes used across all pages
 * Follows BEM-like naming convention and best practices
 */

/* ============================================
   RESET & BASE STYLES
   ============================================ */

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

:root {
    /* Colors */
    --color-primary: #10b981;
    --color-primary-dark: #059669;
    --color-danger: #dc2626;
    --color-danger-dark: #991b1b;
    --color-warning: #f59e0b;
    --color-info: #3b82f6;
    --color-success: #22c55e;
    --color-error: #ef4444;
    
    /* Accent Colors (used across pages) */
    --accent-primary: #10b981;
    --accent-primary-rgb: 16, 185, 129;
    --accent-secondary: #059669;
    
    /* Background */
    --bg-primary: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    --bg-glass: rgba(255, 255, 255, 0.1);
    --bg-glass-light: rgba(255, 255, 255, 0.15);
    --bg-glass-dark: rgba(255, 255, 255, 0.05);
    
    /* Borders */
    --border-glass: rgba(255, 255, 255, 0.2);
    --border-glass-light: rgba(255, 255, 255, 0.3);
    --border-glass-dark: rgba(255, 255, 255, 0.1);
    --border-color: rgba(255, 255, 255, 0.2);
    
    /* Text */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-tertiary: rgba(255, 255, 255, 0.4);
    --text-on-accent: #ffffff;
    
    /* Status Colors */
    --success: #22c55e;
    --error: #ef4444;
    --error-color: #ff4444;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 48px;
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 20px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    
    /* Transitions */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;

    /* Stat tiles */
    --stat-width: 150px;
    --stat-height: 44px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-primary);
    min-height: 100vh;
    color: var(--text-primary);
    overflow-x: hidden;
}

/* Global Select/Dropdown Styling - Dark Theme */
select {
    background-color: #1e293b;
    color: var(--text-primary);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
}

select option {
    background-color: #1e293b;
    color: var(--text-primary);
    padding: 8px 12px;
}

select option:hover,
select option:focus,
select option:checked {
    background-color: #334155;
    color: var(--text-primary);
}

select:focus {
    outline: none;
    border-color: rgba(96, 165, 250, 0.5);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.glass {
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
}

/* ============================================
   LAYOUT COMPONENTS
   ============================================ */

/* Top Bar */
.top-bar {
    padding: 20px var(--spacing-2xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-glass);
}

.top-bar__left {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.top-bar__right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Main Container */
.main-container {
    width: 100%;
    min-height: calc(100vh - 96px);
}

.container {
    padding: var(--spacing-xl);
    width: 100%;
}

.container--centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Grid Layouts */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

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

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

.grid--cols-auto {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid--cols-auto-sm {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.grid--cols-auto-lg {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

/* Flex Layouts */
.flex {
    display: flex;
}

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

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

.flex--center {
    align-items: center;
    justify-content: center;
}

.flex--between {
    justify-content: space-between;
}

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

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

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

/* ============================================
   LOGO COMPONENT
   ============================================ */

.logo {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--transition-fast);
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.logo:hover {
    transform: scale(1.02);
}

.logo img {
    height: 50px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* ============================================
   BUTTON COMPONENTS
   ============================================ */

.btn {
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-lg);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: 14px;
    font-family: inherit;
}

.btn--primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn--primary:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

/* Short button variant (section-details and compact toolbars) */
.btn--short {
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.2;
    min-height: auto;
}

.btn--short:hover {
    transform: scale(1.02);
}

/* Save button states */
.btn--save-disabled {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    color: #a0aec0;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.7;
}

.btn--save-disabled:hover {
    transform: none;
    box-shadow: none;
}

.btn--save-enabled {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    animation: pulse-save 2s ease-in-out infinite;
}

@keyframes pulse-save {
    0%, 100% { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
    50% { box-shadow: 0 4px 20px rgba(16, 185, 129, 0.5); }
}

.btn--danger {
    background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.btn--danger:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
    transform: translateY(-1px);
}

.btn--orange {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
}

.btn--orange:hover {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(234, 88, 12, 0.4);
}

.btn--blue {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn--blue:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

.btn--secondary {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    border: 1px solid var(--border-glass-light);
}

.btn--secondary:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* Button with badge (iOS-style notification bubble) */
.btn--with-badge {
    position: relative;
}

.btn-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.btn-badge:empty,
.btn-badge[data-count="0"] {
    display: none !important;
}

.btn-badge--start {
    background: #22c55e; /* Green */
}

.btn-badge--end {
    background: #f97316; /* Orange */
}

.asset-action-empty {
    color: var(--text-tertiary);
    font-size: 12px;
    font-style: italic;
    padding: 4px 0;
}

.asset-schedule-empty {
    color: var(--text-tertiary);
    font-size: 12px;
    font-style: italic;
    padding: 4px 0;
}

.btn--success {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn--success:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.btn--info {
    background: linear-gradient(135deg, var(--color-info) 0%, #2563eb 100%);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn--info:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.btn--ghost {
    background: var(--bg-glass-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-glass-dark);
}

.btn--ghost:hover {
    background: var(--bg-glass);
    border-color: var(--border-glass);
}

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

.btn--large {
    padding: 14px 28px;
    font-size: 16px;
}

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

.btn-access {
    flex: 1;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Icon Button */
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon--small {
    width: 28px;
    height: 28px;
}

.btn-icon--large {
    width: 48px;
    height: 48px;
}

/* Menu Toggle Button - Premium Style */
.btn-menu-toggle {
    padding: 0 20px;
    height: 66px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(153, 27, 27, 0.15) 100%);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.15);
}

.btn-menu-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.5s ease;
}

.btn-menu-toggle:hover {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.35) 0%, rgba(153, 27, 27, 0.25) 100%);
    border-color: rgba(220, 38, 38, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.25);
}

.btn-menu-toggle:hover::before {
    left: 100%;
}

.btn-menu-toggle:active {
    transform: translateY(0);
}

/* Account Switcher Button */
.btn-account-switcher {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass-light);
    border-radius: var(--radius-xl);
    padding: var(--spacing-sm) 20px;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
    box-shadow: var(--shadow-sm);
    height: 66px;
    display: flex;
    align-items: center;
    width: auto;
    min-width: fit-content;
}

.btn-account-switcher:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* ============================================
   FORM COMPONENTS
   ============================================ */

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-glass);
    background: var(--bg-glass);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 400;
    font-family: inherit;
    transition: all var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: rgba(96, 165, 250, 0.5);
    background: var(--bg-glass-light);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

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

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

/* Hour input with always-visible up/down buttons (analytics and similar) */
.hour-input-wrap {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 72px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-glass);
    background: var(--bg-glass);
    overflow: hidden;
}
.hour-input-wrap:focus-within {
    border-color: rgba(96, 165, 250, 0.5);
    background: var(--bg-glass-light);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}
.hour-input-wrap .hour-input {
    width: 2.5em;
    min-width: 0;
    flex: 1;
    border: none;
    border-radius: 0;
    background: transparent;
    text-align: center;
    padding-left: var(--spacing-sm);
    padding-right: 2px;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
}
.hour-input-wrap .hour-input::-webkit-outer-spin-button,
.hour-input-wrap .hour-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.hour-input-btns {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-left: 1px solid var(--border-glass);
}
.hour-input-btn {
    flex: 1;
    min-height: 0;
    padding: 0 6px;
    border: none;
    background: var(--bg-glass-dark);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.hour-input-btn:hover {
    background: var(--bg-glass-light);
    color: var(--text-primary);
}
.hour-input-btn:active {
    background: var(--border-glass);
}
.hour-input-btn--up::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid currentColor;
}
.hour-input-btn--down::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

/* Wider stepper: goals, planner, and other full-width numeric fields */
.hour-input-wrap--wide {
    max-width: none;
    width: 100%;
    min-width: 0;
}
.hour-input-wrap--wide .hour-input {
    flex: 1 1 auto;
    min-width: 5rem;
    text-align: left;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-sm);
}

/* Compact stepper for filter toolbars (e.g. asset picker duration/size) */
.hour-input-wrap--sm {
    max-width: 118px;
}
.hour-input-wrap--sm .hour-input {
    font-size: 14px;
    padding-left: var(--spacing-sm);
    min-width: 2.75em;
}

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

.form-select {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-glass);
    background: var(--bg-glass);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 400;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
    color-scheme: dark;
}

.form-select:focus {
    outline: none;
    border-color: rgba(96, 165, 250, 0.5);
    background: var(--bg-glass-light);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.form-select option {
    background: #1e293b;
    color: var(--text-primary);
    padding: 8px 12px;
}

.form-select optgroup {
    background: #0f172a;
    color: var(--text-muted, #94a3b8);
    font-weight: 600;
    font-style: normal;
}

.form-select option:hover,
.form-select option:focus,
.form-select option:checked {
    background: #334155;
    color: var(--text-primary);
}

.form-select--sm {
    width: auto;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 14px;
}

/* List Controls */
.list-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.sort-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.sort-label {
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.form-error {
    color: #fca5a5;
    font-size: 13px;
    margin-top: calc(var(--spacing-xs) * -1);
    display: none;
}

.form-error--show {
    display: block;
}

/* ============================================
   CARD COMPONENTS
   ============================================ */

.card {
    background: var(--bg-glass-dark);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    transition: all var(--transition-fast);
}

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

.card--no-hover:hover {
    transform: none;
}

.card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.card__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Admin Card Styles (for system-admin page) */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-xl);
}

.admin-card {
    background: var(--bg-glass-dark);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    transition: all var(--transition-fast);
}

.admin-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-glass);
}

.admin-card__title {
    font-size: 20px;
    font-weight: 700;
    color: #60a5fa;
    margin-bottom: var(--spacing-xs);
}

.admin-card__description {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

.admin-card__actions {
    display: flex;
    gap: var(--spacing-md);
}

@media (max-width: 768px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }
}

/* Page Header Styles */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-2xl);
    gap: var(--spacing-xl);
    flex-wrap: wrap;
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.page-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Accounts List Styles */
.accounts-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.account-item {
    background: var(--bg-glass-dark);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-xl);
    transition: all var(--transition-fast);
}

.account-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-glass);
}

.account-item__content {
    flex: 1;
    min-width: 0;
}

.account-item__name {
    font-size: 18px;
    font-weight: 700;
    color: #60a5fa;
    margin-bottom: var(--spacing-xs);
}

.account-item__description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.account-item__actions {
    display: flex;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

.empty-state {
    padding: var(--spacing-3xl);
    text-align: center;
    border: 1px dashed rgba(148, 163, 184, 0.3);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    background: var(--bg-glass-dark);
}

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
    }

    .account-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .account-item__actions {
        width: 100%;
    }

    .account-item__actions .btn {
        flex: 1;
    }
}

/* ============================================
   STATISTICS COMPONENTS
   ============================================ */

.stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: var(--spacing-md) var(--spacing-md);
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-lg);
    font-size: 13px;
}

.stat__label {
    font-size: 13px;
    opacity: 0.8;
    font-weight: 500;
}

.stat__value {
    font-size: 14px;
    font-weight: 600;
}

.stat--blue {
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.3);
}

.stat--green {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
}

.stat--red {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

.stat--yellow {
    background: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.3);
}

.stat--orange {
    background: rgba(249, 115, 22, 0.15);
    border-color: rgba(249, 115, 22, 0.3);
}

/* ============================================
   MODAL COMPONENTS
   ============================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 998;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    display: flex;
}

.modal-overlay.active .modal {
    display: flex;
    margin: auto;
}

.modal-overlay--active {
    display: flex;
}

.modal-overlay--active .modal {
    display: flex;
    margin: auto;
}

/* Website preview opens from asset details — keep it on top */
#websitePreviewModalOverlay.modal-overlay--active {
    z-index: 1002;
}
#websitePreviewModalOverlay.modal-overlay--active .modal {
    z-index: 1003;
}

/* Website preview modal: iframe fits inside modal with no scrollbars */
.website-preview-modal__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.website-preview-iframe-wrapper {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    background: #1a1a1a;
}
#websitePreviewIframe {
    border: 1px solid #444;
    display: block;
    transform-origin: 0 0;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-2xl);
    padding: 0;
    display: none;
    flex-direction: column;
    z-index: 999;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Ensure modal stays viewport-centered when ancestor has transform/filter (containing block) */
.modal-overlay.active .modal,
.modal-overlay--active .modal {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}

.modal--active {
    display: flex;
}

.modal--large {
    max-width: 900px;
}

.modal--xl {
    max-width: 1600px;
    width: 90%;
    height: 85vh;
}

.modal--sm {
    max-width: 450px;
}

#messageModalContent {
    white-space: pre-line;
}

.modal--md {
    max-width: 700px;
}

.modal--lg {
    max-width: 800px;
}

/* Player details — Experience triggers list (wide for long UDP labels + wildcard inputs) */
.modal--player-triggers {
    width: 80vw;
    max-width: min(1600px, 92vw);
}

.player-triggers-section-title {
    margin: 14px 0 8px;
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
}

.player-triggers-section-title:first-child {
    margin-top: 0;
}

/* UDP manual trigger: Local (default) vs Broadcast on LAN */
.player-trigger-udp-delivery {
    flex-shrink: 0;
    margin-right: 4px;
    max-width: min(100%, 28rem);
}

.player-trigger-udp-delivery__row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.player-trigger-udp-delivery__side {
    font-size: 0.7rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.55));
    white-space: nowrap;
}

.player-trigger-udp-toggle.toggle-switch {
    margin: 0;
    gap: 0;
}

.player-trigger-udp-toggle .toggle-slider {
    width: 36px;
    height: 20px;
}

.player-trigger-udp-toggle .toggle-slider::before {
    width: 14px;
    height: 14px;
    top: 3px;
    left: 3px;
}

.player-trigger-udp-toggle input[type="checkbox"]:checked + .toggle-slider::before {
    transform: translateX(14px);
}

.player-trigger-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.player-trigger-row--alt {
    background: rgba(255, 255, 255, 0.07);
}

.player-trigger-row__fire {
    flex-shrink: 0;
}

.player-trigger-row__label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    line-height: 1.35;
}

.player-trigger-row__wildcard {
    flex: 0 0 auto;
    width: 120px;
    max-width: 40vw;
    height: 28px;
    padding: 2px 8px;
    font-size: 0.8125rem;
    line-height: 1.2;
    box-sizing: border-box;
}

.modal--fullscreen {
    max-width: 95vw;
    width: 95vw;
    max-height: 92vh;
    height: 92vh;
    display: flex;
    flex-direction: column;
}

.modal--fullscreen .modal__body--scroll {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
}

/* Location Manager Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
}

.pagination__info {
    color: var(--text-secondary);
    font-size: 14px;
    min-width: 120px;
    text-align: center;
}

.pagination__size {
    width: auto;
    min-width: 130px;
    font-size: 13px;
    padding: 4px 8px;
}

.pagination__total {
    color: var(--text-muted);
    font-size: 13px;
}

.modal--screenshot-history {
    max-width: 1400px;
    width: 95%;
}

/* Asset Picker Modal Styles (for section-details Add Asset modal) */
.asset-picker-modal {
    display: none;
    flex-direction: column;
}

.modal-overlay--active .asset-picker-modal {
    display: flex;
}

.asset-picker-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
}

.asset-picker-layout {
    display: flex;
    min-height: 100%;
    flex: 1 0 auto;
    align-items: flex-start;
}

.asset-picker-sidebar {
    width: 280px;
    min-width: 280px;
    min-height: 100%;
    border-right: 1px solid var(--border-glass);
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.1);
}

.asset-picker-sidebar-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-glass);
    font-weight: 600;
}

.asset-picker-sidebar-header h3 {
    margin: 0;
    font-size: 14px;
    color: var(--text-primary);
}

.asset-picker-tree {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.folder-tree-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin: 2px 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease;
    gap: 8px;
}

.folder-tree-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.folder-tree-item.selected {
    background: var(--accent-primary);
    color: white;
}

.folder-tree-item.folder-selected-for-import {
    background: rgba(var(--accent-primary-rgb), 0.3);
    border: 2px solid var(--accent-primary);
}

.folder-tree-item__icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.folder-tree-item__name {
    flex: 1;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-tree-item__checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.folder-tree-children {
    padding-left: 16px;
}

.folder-tree-toggle {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform 0.15s ease;
}

.folder-tree-toggle.expanded {
    transform: rotate(90deg);
}

.asset-picker-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.asset-picker-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-glass);
    gap: 16px;
}

.asset-picker-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    flex: 1;
    overflow: hidden;
}

.asset-picker-breadcrumb .breadcrumb-item {
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s ease;
}

.asset-picker-breadcrumb .breadcrumb-item:hover {
    color: var(--accent-primary);
}

.asset-picker-breadcrumb .breadcrumb-item--root {
    font-weight: 600;
    color: var(--text-primary);
}

.asset-picker-breadcrumb .breadcrumb-item--search {
    color: var(--text-secondary);
    cursor: default;
}

.file-folder-hint {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.asset-picker-selection-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

.asset-picker-grid {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    align-content: start;
}

/* Asset Picker Toolbar */
.asset-picker-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-glass-dark);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.asset-picker-toolbar .toolbar-left,
.asset-picker-toolbar .toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.asset-picker-toolbar .toolbar-right {
    flex-wrap: wrap;
}

/* Asset Picker Filters Panel */
.asset-picker-filters {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-glass);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.asset-picker-filters .filter-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.asset-picker-filters .filter-label {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.asset-picker-filters .filter-inputs {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.asset-picker-filters .filter-inputs span {
    color: var(--text-tertiary);
}

.form-input--sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 12px;
    width: 80px;
}

/* Fix loading state text wrapping */
.asset-picker-grid .loading-state,
.asset-picker-grid .empty-state {
    grid-column: 1 / -1;
    white-space: nowrap;
    text-align: center;
    padding: var(--spacing-2xl);
}

.search-input-wrapper--sm {
    width: 200px;
}

.search-input-wrapper--sm .search-input {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 13px;
}

/* Asset Picker Grid */
.asset-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
}

.asset-picker-grid--list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Asset Picker Item - Grid View */
.asset-picker-item {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.asset-picker-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.02);
}

.asset-picker-item.selected {
    border-color: var(--accent-primary);
}

.asset-picker-item__checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    z-index: 2;
}

/* 16:9 Thumbnail Wrapper */
.asset-picker-item__thumb-wrapper {
    position: relative;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
}

.asset-picker-item__thumb-wrapper--16x9 {
    aspect-ratio: 16 / 9;
}

.asset-picker-item__thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asset-picker-item__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 12px;
}

.asset-picker-item__placeholder-icon {
    font-size: 32px;
    opacity: 0.5;
}

.asset-picker-item__type-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    font-size: 10px;
    text-transform: uppercase;
    color: white;
    font-weight: 500;
}

/* Asset Details Below Thumbnail */
.asset-picker-item__details {
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.asset-picker-item__name {
    font-size: 12px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.asset-picker-item__date {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Asset Picker Item - List View */
.asset-picker-item--list {
    flex-direction: row;
    align-items: center;
    padding: var(--spacing-sm);
    gap: var(--spacing-md);
}

.asset-picker-item--list:hover {
    transform: none;
}

.asset-picker-item--list .asset-picker-item__checkbox {
    position: relative;
    top: auto;
    left: auto;
}

.asset-picker-item--list .asset-picker-item__thumb-wrapper {
    width: 80px;
    height: 45px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.asset-picker-item--list .asset-picker-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.asset-picker-item--list .asset-picker-item__name {
    font-size: 14px;
}

.asset-picker-item__meta {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Legacy type badge (for old markup) */
.asset-picker-item__type {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    font-size: 10px;
    text-transform: uppercase;
    color: white;
}

.folder-import-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: var(--accent-primary);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    text-transform: uppercase;
}

.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xl) var(--spacing-2xl);
    border-bottom: 1px solid var(--border-glass);
}

.modal__title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.modal__header-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal__subtitle {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    word-break: break-all;
}

.modal__close {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid var(--border-glass-light);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.modal__close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.modal__body {
    padding: var(--spacing-xl) var(--spacing-2xl);
    overflow-y: auto;
    flex: 1;
}

.modal__body-saving {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10;
    border-radius: inherit;
}
.modal__body-saving .modal__body-saving-text {
    color: #fff;
    font-size: 1.1rem;
}
.modal--md {
    position: relative;
}

/* Warning/Danger Messages in Modals */
.warning-message {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.warning-message p {
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.5;
}

.warning-message p:last-child {
    margin-bottom: 0;
}

.text-danger {
    color: #ef4444;
}

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

/* Zone Mapping Modal */
.zone-mapping-intro {
    margin-bottom: var(--spacing-lg);
    color: var(--text-secondary);
}

.zone-mapping-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-height: 400px;
    overflow-y: auto;
}

.zone-mapping-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-glass-dark);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-glass);
}

.zone-mapping-from {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zone-mapping-from__name {
    font-weight: 600;
    color: var(--text-primary);
}

.zone-mapping-from__sections {
    font-size: 12px;
    color: var(--text-muted);
}

.zone-mapping-arrow {
    color: var(--text-muted);
    font-size: 18px;
}

.zone-mapping-to {
    flex: 1;
}

.zone-mapping-to select {
    width: 100%;
}

/* Layout Preview Modal */
.layout-preview-modal {
    width: auto;
    max-width: 90vw;
    max-height: 90vh;
}

.layout-preview-modal .modal__body {
    padding: var(--spacing-lg);
}

.layout-preview-container {
    display: flex;
    gap: var(--spacing-xl);
    align-items: flex-start;
}

.layout-preview-canvas-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.layout-preview-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-glass-dark);
    border-radius: var(--radius-sm);
}

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

.layout-preview-dimensions {
    font-size: 13px;
    color: var(--text-muted);
    font-family: monospace;
}

.layout-preview-canvas {
    position: relative;
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.layout-preview-zone {
    position: absolute;
    border: 2px solid;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    cursor: default;
    transition: transform 0.15s ease;
}

.layout-preview-zone:hover {
    transform: scale(1.02);
    z-index: 100 !important;
}

.layout-preview-zone__label {
    background: rgba(0,0,0,0.5);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    white-space: nowrap;
}

.layout-preview-zones-list {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    overflow-y: auto;
}

.layout-preview-zones-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-glass);
}

.layout-preview-zones {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    overflow-y: auto;
    max-height: 350px;
}

.layout-preview-zone-item {
    padding: var(--spacing-md);
    background: var(--bg-glass-dark);
    border-radius: var(--radius-md);
    border-left: 4px solid;
}

.layout-preview-zone-item__name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.layout-preview-zone-item__props {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px var(--spacing-md);
    font-size: 12px;
}

.layout-preview-zone-item__label {
    color: var(--text-muted);
}

.layout-preview-zone-item__value {
    color: var(--text-secondary);
    font-family: monospace;
}

.modal__footer {
    padding: var(--spacing-xl) var(--spacing-2xl);
    border-top: 1px solid var(--border-glass);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

/* ============================================
   LIST COMPONENTS
   ============================================ */

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.list-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.list-actions {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state__icon {
    font-size: 64px;
    margin-bottom: var(--spacing-lg);
    opacity: 0.3;
}

.empty-state__text {
    font-size: 18px;
    margin-bottom: var(--spacing-sm);
}

.empty-state__subtext {
    font-size: 14px;
    opacity: 0.6;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

@media (max-width: 768px) {
    .top-bar {
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .grid--cols-auto-lg {
        grid-template-columns: 1fr;
    }
    
    .grid--cols-auto {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .container {
        padding: var(--spacing-md);
    }
    
    .modal {
        width: 95%;
        max-height: 90vh;
    }
}


/* ============================================
   Account Select Page
   ============================================ */
.accounts-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    align-items: stretch;
}

.system-box {
    background: rgba(15, 23, 42, 0.82);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(148, 163, 184, 0.25);
    padding: var(--spacing-xl);
    align-self: flex-start;
    min-width: 360px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.4);
}

.system-box__title {
    font-size: 18px;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: var(--spacing-xs);
}

.system-box__description {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.system-box__actions .btn {
    width: 140px;
}

.accounts-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(
        90deg,
        rgba(148, 163, 184, 0) 0%,
        rgba(148, 163, 184, 0.8) 20%,
        rgba(148, 163, 184, 0.8) 80%,
        rgba(148, 163, 184, 0) 100%
    );
    margin: var(--spacing-lg) 0 var(--spacing-md);
}

.account-row {
    background: rgba(15, 23, 42, 0.85);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(148, 163, 184, 0.2);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(14, 23, 38, 0.35);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.account-row:hover {
    border-color: rgba(148, 163, 184, 0.45);
    transform: translateY(-1px);
}

.account-row.expanded {
    border-color: rgba(59, 130, 246, 0.7);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.25);
}

.account-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-xl);
    cursor: pointer;
    gap: var(--spacing-lg);
}

.account-row-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
}

.account-row-toggle-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: rgba(148, 163, 184, 0.8);
    transition: transform var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.account-row.expanded .account-row-toggle-icon {
    transform: rotate(90deg);
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.2);
}

.account-row-header-content {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--spacing-lg);
}

.account-row-main {
    flex: 1;
}

.account-name {
    font-size: 18px;
    font-weight: 700;
    color: #93c5fd;
    letter-spacing: 0.2px;
}

.account-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.account-row-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: 0;
}

.account-stats {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.account-stat {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(148, 163, 184, 0.08);
    width: var(--stat-width);
    min-width: var(--stat-width);
    max-width: var(--stat-width);
    height: var(--stat-height);
    min-height: var(--stat-height);
}

.account-stat__label {
    font-size: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.8);
}

.account-stat__value {
    font-size: 13px;
    font-weight: 600;
    color: #f8fafc;
}

.account-pill {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: var(--text-secondary);
    background: rgba(148, 163, 184, 0.1);
    min-width: 140px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.account-row-body {
    border-top: 1px solid rgba(148, 163, 184, 0.25);
    background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.9), rgba(10, 15, 25, 0.95));
    padding: var(--spacing-xl);
    display: none;
}

.account-row.expanded .account-row-body {
    display: block;
}

.projects-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.project-row {
    background: rgba(15, 23, 42, 0.85);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(148, 163, 184, 0.2);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.project-row-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    justify-content: space-between;
}

.project-row-main {
    flex: 0 0 auto;
    min-width: 200px;
}

.project-name {
    font-size: 16px;
    font-weight: 700;
    color: #e0e7ff;
    letter-spacing: 0.3px;
}

.project-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.project-row-right {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    margin-right: 0;
    margin-left: 30px;
}

.project-stats {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-end;
}

.project-stat {
    flex: 0 0 auto;
    width: var(--stat-width);
    min-width: var(--stat-width);
    max-width: var(--stat-width);
    padding: 8px 12px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    white-space: nowrap;
    height: var(--stat-height);
    min-height: var(--stat-height);
}

.project-stat__label {
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.8);
}

.project-stat__value {
    font-size: 15px;
    font-weight: 600;
    color: #e5e7eb;
}

.project-stat--blue {
    border-color: rgba(96, 165, 250, 0.4);
    background: rgba(59, 130, 246, 0.1);
}

.project-stat--green {
    border-color: rgba(52, 211, 153, 0.35);
    background: rgba(16, 185, 129, 0.08);
}

.project-stat--red {
    border-color: rgba(248, 113, 113, 0.35);
    background: rgba(239, 68, 68, 0.08);
}

.project-stat--yellow {
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(245, 158, 11, 0.08);
}

.project-row-actions {
    display: flex;
    align-items: center;
}

.project-row-actions .btn {
    min-width: 140px;
    min-height: var(--stat-height);
    height: var(--stat-height);
    padding: 10px 18px;
}

@media (max-width: 1100px) {
    .project-stats {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .project-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .project-row-content {
        flex-direction: column;
    }

    .project-stats {
        width: 100%;
        flex-wrap: wrap;
    }

    .project-row-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ============================================
   ADDITIONAL BUTTON VARIATIONS
   ============================================ */

.btn--compact {
    padding: var(--spacing-sm) var(--spacing-md) !important;
    height: 36px !important;
    font-size: 14px !important;
    min-width: auto !important;
}

.btn--active {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
}

.action-btn {
    padding: 8px 16px;
    border-radius: var(--radius-md);
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.btn-action {
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid;
}

.btn-action--edit {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.btn-action--edit:hover {
    background: rgba(59, 130, 246, 0.3);
    transform: scale(1.05);
}

.btn-action--delete {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(220, 38, 38, 0.3);
    color: #fca5a5;
}

.btn-action--delete:hover {
    background: rgba(220, 38, 38, 0.3);
    transform: scale(1.05);
}

/* ============================================
   BADGES
   ============================================ */

.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.badge-success {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.badge-warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.badge-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.badge--main {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--text-primary);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: auto;
}

.role-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.role-badge:hover {
    transform: scale(1.05);
}

.role-badge--admin {
    background: rgba(220, 38, 38, 0.2);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #fca5a5;
}

.role-badge--developer {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.role-badge--manager {
    background: rgba(147, 51, 234, 0.2);
    border: 1px solid rgba(147, 51, 234, 0.3);
    color: #c4b5fd;
}

.role-badge--viewer {
    background: rgba(107, 114, 128, 0.2);
    border: 1px solid rgba(107, 114, 128, 0.3);
    color: #d1d5db;
}

.role-badge--full-access {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

.role-badge--no-access {
    background: rgba(107, 114, 128, 0.2);
    border: 1px solid rgba(107, 114, 128, 0.3);
    color: #d1d5db;
}

.indexing-status-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    z-index: 10;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.indexing-status-badge-list {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-right: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.indexing-status-pending {
    color: #ffa500;
}

.indexing-status-processing {
    color: #4a9eff;
    animation: pulse 2s infinite;
}

.indexing-status-completed {
    color: #4caf50;
}

.indexing-status-failed {
    color: #f44336;
}

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

/* ============================================
   TABS
   ============================================ */

.tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: var(--spacing-md);
}

.tab {
    padding: var(--spacing-md) var(--spacing-xl);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-bottom: none;
}

.tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.tab--active {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    border-color: transparent;
    color: var(--text-primary);
    font-weight: 600;
}

.tab-content {
    display: none;
}

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

.menu-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.menu-tab {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.menu-tab:hover {
    background: rgba(255, 255, 255, 0.1);
}

.menu-tab.active {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    border-color: transparent;
    color: white;
}

.menu-tab-content {
    display: none;
}

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

.video-indexer-tabs {
    display: flex;
    gap: var(--spacing-sm);
    border-bottom: 2px solid var(--border-glass-dark);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
}

.video-indexer-tab {
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition-fast);
    margin-bottom: -2px;
}

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

.video-indexer-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.video-indexer-tab-content {
    display: none;
}

.video-indexer-tab-content.active {
    display: block;
}

.map-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    height: 60px;
}

.map-tab {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.map-tab:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.map-tab.active {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    border: none;
    color: white;
}

.map-tab.active:hover {
    background: linear-gradient(135deg, #b91c1c, #7f1d1d);
}

/* ============================================
   TABLES
   ============================================ */

.table {
    width: 100%;
    border-collapse: collapse;
}

.table thead {
    background: rgba(255, 255, 255, 0.05);
}

.table th {
    padding: 12px;
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    opacity: 0.8;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.table td {
    padding: 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Alternating row colors for Download Progress modal */
.table--striped .table-row--even {
    background: rgba(255, 255, 255, 0.02);
}
.table--striped .table-row--odd {
    background: rgba(255, 255, 255, 0.06);
}
.table--striped tbody tr:hover {
    background: rgba(255, 255, 255, 0.1);
}

.matrix-table-container {
    background: var(--bg-glass-dark);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.matrix-table {
    width: 100%;
    border-collapse: collapse;
}

.matrix-table thead {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.matrix-table th {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.matrix-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: var(--spacing-xl);
}

.matrix-table th.sortable:hover {
    color: var(--text-primary);
}

.matrix-table th.sortable::after {
    content: '⇅';
    position: absolute;
    right: var(--spacing-md);
    opacity: 0.5;
    font-size: 12px;
}

.matrix-table th.sortable--active {
    color: var(--text-primary);
}

.matrix-table th.sortable--asc::after {
    content: '↑';
    opacity: 0.9;
}

.matrix-table th.sortable--desc::after {
    content: '↓';
    opacity: 0.9;
}

.matrix-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-fast);
}

.matrix-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.matrix-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 14px;
    color: var(--text-primary);
}

.matrix-table td:first-child {
    font-weight: 600;
    color: #60a5fa;
}

.table-container {
    background: var(--bg-glass-dark);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-xl);
    overflow: hidden;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead {
    background: rgba(255, 255, 255, 0.05);
}

.data-table th {
    padding: var(--spacing-lg) var(--spacing-xl);
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-glass-dark);
    white-space: nowrap;
}

.data-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: color var(--transition-fast);
    position: relative;
}

.data-table th.sortable:hover {
    color: var(--text-primary);
}

.data-table th.sortable .sort-icon {
    margin-left: var(--spacing-xs);
    opacity: 0.5;
    font-size: 12px;
    display: inline-block;
    position: relative;
}

.data-table th.sortable[data-sort-direction="asc"] .sort-icon,
.data-table th.sortable[data-sort-direction="desc"] .sort-icon {
    font-size: 0;
    opacity: 1;
}

.data-table th.sortable[data-sort-direction="asc"] .sort-icon::before {
    content: "↑";
    font-size: 12px;
    display: inline-block;
    opacity: 1;
    margin-left: 0;
}

.data-table th.sortable[data-sort-direction="desc"] .sort-icon::before {
    content: "↓";
    font-size: 12px;
    display: inline-block;
    opacity: 1;
    margin-left: 0;
}

.data-table tbody tr {
    border-bottom: 1px solid var(--border-glass-dark);
    transition: background var(--transition-fast);
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.data-table tbody tr:last-child {
    border-bottom: none;
}

.data-table td {
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: 14px;
    color: var(--text-primary);
    text-align: left;
    white-space: nowrap;
}

.data-table td.empty-state {
    text-align: center;
    padding: var(--spacing-3xl);
    color: var(--text-secondary);
    white-space: normal;
}

/* Compact table for publish page (more rows visible) */
.data-table.data-table--compact th,
.data-table.data-table--compact td {
    padding: 6px 12px;
    font-size: 13px;
}
.data-table.data-table--compact .form-select {
    height: 28px;
    padding: 2px 8px;
    font-size: 13px;
}
.data-table.data-table--compact input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

/* Navigation flow graph (analytics report) */
.navigation-flow-hint {
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.navigation-flow-diagram {
    overflow: auto;
}
.navigation-flow-diagram .navigation-flow-graph {
    min-height: 400px;
    background: transparent;
}
.navigation-flow-graph {
    font-family: inherit;
}
.navigation-flow-graph .navigation-flow-box {
    transition: filter 0.15s ease;
}
.navigation-flow-graph .navigation-flow-box:hover {
    filter: brightness(1.1);
}

.nav-flow-tooltip {
    display: none;
    position: fixed;
    z-index: 9999;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.5;
    max-width: 280px;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Publish page toolbar */
.publish-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
}
.publish-toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}
.publish-toolbar-sep {
    color: var(--text-muted);
    font-size: 12px;
    margin: 0 2px;
}
.publish-toolbar-label {
    font-size: 13px;
    color: var(--text-secondary);
}
.publish-toolbar .view-toggle .btn {
    padding: 4px 10px;
    font-size: 13px;
}
.switch-experience-view .col-actions {
    width: 100px;
}

/* All dropdowns on Publish page use compact size (like toolbar Experience) */
.publish-view .form-select {
    height: 28px;
    min-height: 28px;
    padding: 2px 8px;
    font-size: 13px;
}

/* Publish type row: toggles + bulk dropdown + action button(s) */
.publish-type-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: 10px;
}

.publish-type-row-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Match toolbar toggle height (same as .publish-type-selector .btn--toggle: 6px 14px, 13px) */
.publish-type-row-actions .form-select,
.publish-type-row-actions .btn {
    height: 32px;
    min-height: 32px;
    padding: 6px 14px;
    font-size: 13px;
    line-height: 1.2;
    box-sizing: border-box;
}

.publish-bulk-dropdown-wrap .form-select {
    min-width: 180px;
}

/* Publish type selector - clear 4 options */
.publish-type-selector {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 4px;
    margin-bottom: 0;
}
.publish-type-selector .btn--toggle {
    height: 32px;
    min-height: 32px;
    padding: 6px 14px;
    font-size: 13px;
    line-height: 1.2;
    box-sizing: border-box;
}
.publish-type-selector .btn--toggle.active {
    font-weight: 600;
}
.publish-toolbar-by-type {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 10px;
}
.publish-toolbar-by-type .publish-type-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-right: 8px;
}

/* Stats column right-aligned */
.data-table td.cell-stats {
    text-align: right;
}

/* Center count columns (headers and cells aligned) */
.data-table th[data-sort="statesCount"],
.data-table th[data-sort="citiesCount"],
.data-table th[data-sort="locationsCount"],
.data-table td.cell-statesCount,
.data-table td.cell-citiesCount,
.data-table td.cell-locationsCount {
    text-align: center;
}

/* ============================================
   PLAYERS LIST CONTROLS BAR
   ============================================ */

.players-controls-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* Search controls group */
.search-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.search-controls .form-select {
    width: 180px;
    min-width: 180px;
}

.search-controls .form-input {
    width: 280px;
    min-width: 200px;
}

/* Filter tags container (inline within search controls) */
.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.filter-tags:empty {
    display: none;
}

/* Individual filter tag */
.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    font-size: 13px;
    color: var(--text-primary);
}

.filter-tag__label {
    color: var(--text-secondary);
}

.filter-tag__remove {
    cursor: pointer;
    color: var(--text-muted);
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
    transition: color var(--transition-fast);
}

.filter-tag__remove:hover {
    color: var(--error);
}

/* ============================================
   TOGGLE SWITCHES
   ============================================ */

.toggle-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: var(--text-primary);
}

.toggle-switch input[type="checkbox"] {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: #ccc;
    border-radius: 24px;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider {
    background-color: #4CAF50;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.toggle-switch input[type="checkbox"]:focus + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.toggle-label {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.toggle-switch__text {
    font-size: 13px;
    color: var(--text-secondary);
}

.widget-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    cursor: pointer;
}

.widget-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.widget-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.2);
    transition: 0.3s;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.widget-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 3px;
    background: white;
    transition: 0.3s;
    border-radius: 50%;
}

.widget-switch input:checked + .widget-switch-slider {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    border-color: transparent;
}

.widget-switch input:checked + .widget-switch-slider:before {
    transform: translateX(22px);
}

.widget-switch input:focus + .widget-switch-slider {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3);
}

/* ============================================
   ADDITIONAL FORM COMPONENTS
   ============================================ */

.form-textarea {
    width: 100%;
    min-height: 120px;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-glass);
    background: var(--bg-glass);
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    transition: all var(--transition-fast);
    resize: vertical;
}

.form-textarea:focus {
    outline: none;
    border-color: rgba(96, 165, 250, 0.5);
    background: var(--bg-glass-light);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

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

.form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

.form-grid {
    display: grid;
    gap: var(--spacing-lg);
}

.form-grid--two {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.form-error--visible {
    display: block;
}

.search-input {
    flex: 1;
    min-width: 200px;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-glass);
    background: var(--bg-glass-dark);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
}

.search-input:focus {
    outline: none;
    border-color: rgba(96, 165, 250, 0.5);
    background: var(--bg-glass);
}

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

.search-input--narrow {
    flex: 1;
    max-width: 400px;
}

.filter-select {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-glass);
    background: var(--bg-glass-dark);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    min-width: 150px;
}

.filter-select:focus {
    outline: none;
    border-color: rgba(96, 165, 250, 0.5);
    background: var(--bg-glass);
}

.filter-select option {
    background: #1e293b;
    color: var(--text-primary);
    padding: 8px 12px;
}

.filter-select option:hover,
.filter-select option:focus,
.filter-select option:checked {
    background: #334155;
    color: var(--text-primary);
}

.filter-select--inline {
    min-width: 220px;
}

/* ============================================
   FILTERS & SEARCH
   ============================================ */

.filters-bar {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.filters-bar--spaced {
    justify-content: space-between;
}

/* Auto-refresh controls */
.auto-refresh-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: auto;
}

.last-updated {
    font-size: 0.85rem;
    color: var(--text-secondary);
    opacity: 0.8;
}

/* Auto-refresh status bar - for player details page */
.auto-refresh-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-glass-light);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-md);
}

.auto-refresh-status {
    font-size: 0.85rem;
    color: var(--text-secondary);
    opacity: 0.9;
}

.btn--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-glass-light);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.btn--icon:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.filters-bar--roles {
    justify-content: flex-start;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.filters-bar--roles .btn {
    margin-left: auto;
}

.filters-bar--users {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    align-items: center;
}

.filters-bar--users .filter-select {
    min-width: 200px;
}

.filters-bar--users .search-input {
    flex: 1;
    min-width: 220px;
}

.filters-bar--users .btn {
    margin-left: auto;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.filter-label {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Analytics report: status/error messages (system design) */
.analytics-status {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass-light);
    color: var(--text-secondary);
}
.analytics-status--error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--text-primary);
}

.filters-container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.filter-input {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    min-width: 200px;
}

.filter-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.filter-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #dc2626, #991b1b);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.map-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.map-filter-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.map-filter-input {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    font-size: 13px;
    min-width: 120px;
}

.map-filter-input.smart-group {
    min-width: 240px;
}

.map-filter-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.map-filter-btn {
    padding: 6px 16px;
    background: linear-gradient(135deg, #dc2626, #991b1b);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.map-filter-btn:hover {
    background: linear-gradient(135deg, #b91c1c, #7f1d1d);
    transform: translateY(-1px);
}

.map-filter-btn.clear {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.map-filter-btn.clear:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
}

.map-tabs-left {
    display: flex;
    gap: 12px;
    align-items: center;
}

.map-tabs-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Segmented Button Group (pill-style joined buttons) */
.map-btn-group {
    display: flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.map-btn-seg {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.map-btn-seg:last-child {
    border-right: none;
}

.map-btn-seg:hover {
    background: rgba(255, 255, 255, 0.15);
}

.map-btn-seg.active {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    color: white;
    font-weight: 600;
}

.map-btn-seg.active:hover {
    background: linear-gradient(135deg, #b91c1c, #7f1d1d);
}

/* Status filter button color variants when active */
.map-btn-seg--blue.active {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.map-btn-seg--blue.active:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.map-btn-seg--green.active {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.map-btn-seg--green.active:hover {
    background: linear-gradient(135deg, #16a34a, #15803d);
}

.map-btn-seg--red.active {
    background: linear-gradient(135deg, #dc2626, #991b1b);
}

.map-btn-seg--red.active:hover {
    background: linear-gradient(135deg, #b91c1c, #7f1d1d);
}

.map-btn-seg--yellow.active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.map-btn-seg--yellow.active:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
}

/* Layer toggle buttons (independent on/off) */
.map-btn-seg--toggle {
    position: relative;
}

.map-btn-seg--weather.active {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.map-btn-seg--weather.active:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.map-btn-seg--timezone.active {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.map-btn-seg--timezone.active:hover {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

/* Loading indicator for layer buttons */
.map-btn-seg--toggle.loading {
    opacity: 0.7;
    pointer-events: none;
}

.map-btn-seg--toggle.loading::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 6px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
}

/* Temperature Marker Pins */
.temp-marker {
    background: transparent !important;
    border: none !important;
    text-align: center;
}

.temp-marker-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 26px;
    border-radius: 13px;
    color: white;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.9);
    padding: 0 6px;
}

.temp-marker-value {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.5px;
}

.temp-marker-count {
    font-size: 9px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 6px;
    padding: 0 4px;
    margin-left: 3px;
    line-height: 16px;
}

.temp-marker-label {
    font-size: 10px;
    font-weight: 600;
    color: #1e293b;
    text-shadow: 0 0 3px white, 0 0 3px white, 0 0 3px white, 0 0 3px white;
    white-space: nowrap;
    margin-top: 2px;
    text-align: center;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Temperature Tooltip */
.temp-tooltip {
    background: rgba(0, 0, 0, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    color: white !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.temp-tooltip::before {
    border-top-color: rgba(0, 0, 0, 0.85) !important;
}

/* Timezone tooltip styling */
.timezone-tooltip {
    background: rgba(0, 0, 0, 0.85) !important;
    color: white !important;
    border: 1px solid rgba(139, 92, 246, 0.5) !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.timezone-tooltip::before {
    border-top-color: rgba(0, 0, 0, 0.85) !important;
}

/* ============================================
   ASSET LIBRARY COMPONENTS
   ============================================ */

.asset-library-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    background: var(--bg-glass);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-md);
}

.toolbar-left,
.toolbar-right {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.toolbar-right {
    flex: 1;
    justify-content: flex-end;
}

.search-input-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 600px;
    min-width: 400px;
}

.toolbar-right .search-input {
    width: 100%;
    height: 48px;
    padding: 0 var(--spacing-lg);
    padding-right: 48px;
    font-size: 16px;
    border: 2px solid var(--border-glass-dark);
    border-radius: var(--radius-md);
    background: var(--bg-glass-dark);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.toolbar-right .search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-glass);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.1);
}

.toolbar-right .search-input::placeholder {
    color: var(--text-secondary);
}

.search-clear-btn {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    padding: 0;
    font-size: 18px;
    line-height: 1;
}

.search-clear-btn:hover {
    background: var(--bg-glass-dark);
    color: var(--text-primary);
}

.search-clear-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.toolbar-right .form-select {
    min-width: 120px;
    max-width: 150px;
    height: 48px;
    padding: 0 var(--spacing-md);
    font-size: 14px;
    border: 2px solid var(--border-glass-dark);
    border-radius: var(--radius-md);
    background: var(--bg-glass-dark);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.toolbar-right #sortByFilter {
    min-width: 160px;
    max-width: 180px;
}

.toolbar-right .form-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-glass);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.1);
}

.asset-library-content {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-lg);
    min-height: 400px;
}

.folder-tree-sidebar {
    width: 250px;
    min-width: 250px;
    flex-shrink: 0;
    background: var(--bg-glass);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
}

.folder-tree-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-glass-dark);
}

.folder-tree-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
}

.folder-tree-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.folder-tree-node {
    display: flex;
    flex-direction: column;
}

.folder-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    user-select: none;
    white-space: nowrap;
}

.folder-expand-icon {
    display: inline-block;
    width: 16px;
    font-size: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: center;
    transition: transform var(--transition-fast);
}

.folder-expand-icon--empty {
    visibility: hidden;
}

.folder-expand-icon:hover {
    color: var(--text-primary);
}

.folder-item:hover {
    background: var(--bg-glass-dark);
}

.folder-item.active,
.folder-item.selected {
    background: var(--accent-primary);
    color: var(--text-on-accent);
}

.folder-item--root {
    font-weight: 600;
}

.folder-icon {
    font-size: 16px;
    display: flex;
    align-items: center;
    line-height: 1;
}

.folder-name {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    display: flex;
    align-items: center;
}

.folder-children {
    display: flex;
    flex-direction: column;
}

.folder-children--collapsed {
    display: none;
}

.file-grid-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-glass);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    min-width: 0;
}

.file-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-glass-dark);
    gap: var(--spacing-md);
}

.breadcrumb {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    flex: 1;
    flex-wrap: wrap;
    min-height: 32px;
}

.breadcrumb-item {
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    transition: color var(--transition-fast);
}

.breadcrumb-item:hover {
    color: var(--text-primary);
}

.breadcrumb-item.active {
    color: var(--text-primary);
    font-weight: 600;
    cursor: default;
}

.breadcrumb-rename-btn {
    margin-left: var(--spacing-sm);
    font-size: 12px;
    padding: 4px var(--spacing-sm);
    height: auto;
}

.breadcrumb-separator {
    color: var(--text-secondary);
    margin: 0 var(--spacing-xs);
}

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

.breadcrumb-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 8px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-secondary);
    font-weight: 600;
}

.breadcrumb-chip__label {
    white-space: nowrap;
}

.breadcrumb-chip--link {
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast), border var(--transition-fast);
}

.breadcrumb-chip--link:hover {
    background: rgba(148, 163, 184, 0.15);
    border-color: rgba(148, 163, 184, 0.6);
}

.breadcrumb-chip--current {
    border-color: rgba(96, 165, 250, 0.6);
    background: rgba(96, 165, 250, 0.15);
    color: var(--text-primary);
}

.file-grid-actions {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.action-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.action-group-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.action-group-buttons {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.action-group-separator {
    width: 1px;
    height: 60px;
    background: var(--border-glass-dark);
    margin: 0 var(--spacing-md);
    align-self: center;
    opacity: 0.6;
}

.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    padding: var(--spacing-sm);
}

.file-item {
    background: var(--bg-glass-dark);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    border: 2px solid transparent;
    position: relative;
}

.file-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: var(--accent-primary);
}

.file-item.selected,
.file-item--selected {
    border-color: var(--accent-primary);
    background: var(--bg-glass);
}

.file-item--selected {
    border-color: var(--accent-primary) !important;
    background: rgba(var(--accent-primary-rgb), 0.1) !important;
}

.file-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
    background: var(--bg-glass-dark);
}

.file-thumbnail--image {
    object-fit: contain;
}

.thumbnail-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass-dark);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
    padding: var(--spacing-sm);
}

.file-name {
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    word-break: break-word;
    line-height: 1.4;
}

.file-meta {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-meta-divider {
    color: var(--text-tertiary);
    font-weight: 500;
}

.file-meta--with-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.file-meta-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.file-actions {
    position: absolute;
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
    display: flex;
    gap: var(--spacing-xs);
    opacity: 1;
    transition: opacity var(--transition-fast);
}

.file-action-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background var(--transition-fast);
}

.file-action-btn:hover {
    background: rgba(0, 0, 0, 0.9);
}

.file-action-btn.file-action-delete {
    background: rgba(220, 38, 38, 0.8);
}

.file-action-btn.file-action-delete:hover {
    background: rgba(220, 38, 38, 1);
}

.file-action-index,
.file-action-info {
    font-size: 16px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* File item bottom container for logo and checkbox - both aligned to right */
.file-item-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
    pointer-events: none; /* prevent whole footer from stealing clicks */
}

.file-item-dynamic-range {
    display: flex;
    align-items: center;
    pointer-events: none;
}

.file-item-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
    pointer-events: auto; /* checkbox remains clickable */
    position: relative; /* keep absolute children scoped to the checkbox only */
}

.file-item-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 24px;
    height: 24px;
    top: 0;
    left: 0;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

.file-item-checkbox .checkbox-custom {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-secondary);
    border-radius: 4px;
    background: var(--bg-glass);
    transition: all var(--transition-fast);
    z-index: 1;
}

.file-item-checkbox:hover .checkbox-custom {
    border-color: var(--accent-primary);
    background: var(--bg-glass-dark);
}

.file-item-checkbox input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.file-item-checkbox input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

.file-item-checkbox,
.asset-item-checkbox-list {
    pointer-events: auto;
}

.file-item-checkbox *,
.asset-item-checkbox-list * {
    pointer-events: none;
}

.file-item-checkbox input,
.asset-item-checkbox-list input {
    pointer-events: auto;
}

/* HDR / Dolby Vision Logo Styles */
.dynamic-range-logo {
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
}

.dynamic-range-logo--small {
    height: 28px;
    width: auto;
    margin-left: 6px;
}

.dynamic-range-logo--large {
    height: 48px;
    width: auto;
    margin-left: 12px;
}

/* Thumbnail badge wrapper */
.file-thumbnail-wrapper {
    position: relative;
}

.dynamic-range-badge {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* badge should not capture clicks */
}

.dynamic-range-badge .dynamic-range-logo {
    height: 32px; /* slightly larger badge on grid thumbnail */
    width: auto;
}

/* List view logo styling */
.asset-name-list .dynamic-range-logo {
    margin-left: 8px;
    vertical-align: middle;
    height: 32px; /* larger but should not increase row height */
}

/* Modal header logo styling */
#fileDetailsTitle .dynamic-range-logo {
    margin-left: 12px;
    vertical-align: middle;
}

/* View Toggle */
.view-toggle-group {
    display: flex;
    gap: 8px;
    background: var(--bg-glass-dark);
    border-radius: var(--radius-md);
    padding: 4px;
    border: 1px solid var(--border-glass-dark);
}

.view-toggle-btn {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.view-toggle-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.view-toggle-btn.active {
    background: var(--accent-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), 0.3);
}

/* List View */
.assets-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.asset-item-list {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    transition: background 0.4s ease-out, border-color 0.4s ease-out;
    cursor: default;
    margin-bottom: 0;
}

.asset-item-list:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.asset-item-list--always-expanded {
    padding: 6px 10px;
    min-height: auto;
}

.asset-item-list--selected {
    background: rgba(var(--accent-primary-rgb), 0.1) !important;
    border-left: 3px solid var(--accent-primary) !important;
}

.asset-item-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    cursor: pointer;
}

.asset-item-list-header:hover {
    transform: translateX(4px);
}

.asset-item-checkbox-list {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: var(--spacing-md);
    cursor: pointer;
    flex-shrink: 0;
}

.asset-item-checkbox-list input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

.asset-item-checkbox-list .checkbox-custom {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-secondary);
    border-radius: 4px;
    background: var(--bg-glass);
    transition: all var(--transition-fast);
    z-index: 1;
}

.asset-item-checkbox-list:hover .checkbox-custom {
    border-color: var(--accent-primary);
    background: var(--bg-glass-dark);
}

.asset-item-checkbox-list input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.asset-item-checkbox-list input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

.asset-thumbnail-list {
    width: 180px;
    height: 100px;
    min-width: 180px;
    min-height: 100px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    align-self: flex-start;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.asset-header-details-wrapper-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.asset-name-row-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 1;
    width: 100%;
}

.asset-info-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.asset-name-list {
    font-size: 14px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}

.asset-type-list {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: capitalize;
    font-weight: 400;
}

.asset-actions-row-list {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.asset-btn-list {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.asset-btn-list:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.asset-btn-list.delete {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.asset-btn-list.delete:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
}

.asset-btn-list.move {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
    padding: 8px 12px;
    font-size: 13px;
}

.asset-info-actions-container-list {
    display: flex;
    gap: 20px;
    margin-top: 0;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.asset-item-list:not(.expanded) .asset-info-actions-container-list {
    display: none;
}

.asset-details-row-list {
    display: flex;
    gap: 10px;
    margin-top: 0px;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.asset-details-column-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto;
    min-width: 0;
}

.stat-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 12px;
    white-space: nowrap;
    width: 270px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 24px;
}

.stat__label-list {
    font-size: 11px;
    opacity: 0.8;
    color: rgba(255, 255, 255, 0.7);
}

.stat__value-list {
    font-size: 11px;
    font-weight: 600;
    color: white;
}

/* Upload Progress */
.upload-progress {
    margin: var(--spacing-lg) 0;
}

.upload-file-list {
    margin-top: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Upload Website modal: fixed size, fixed header/footer, scrollable file list */
.upload-website-modal {
    height: 80vh;
    max-height: 640px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.upload-website-modal .modal__header {
    flex-shrink: 0;
}

.upload-website-modal__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.upload-website-modal .modal__footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border-glass);
}

.upload-website-progress {
    margin: var(--spacing-lg) 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.upload-website-progress .progress-bar,
.upload-website-progress .progress-text {
    flex-shrink: 0;
}

.upload-website-file-list-box {
    margin-top: var(--spacing-md);
    flex: 1;
    min-height: 80px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    background: var(--bg-glass-dark);
    font-size: 13px;
}

.upload-website-file-list-box .upload-file-list {
    margin-top: 0;
}

.upload-file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--bg-glass-dark);
    border-radius: var(--radius-sm);
    font-size: 13px;
    gap: var(--spacing-md);
}

.upload-file-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.upload-file-name {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-file-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-glass);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}

.upload-file-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: var(--radius-sm);
    width: 0%;
    transition: width 0.3s ease;
    position: relative;
}

.upload-file-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 1.5s infinite;
}

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

.upload-file-status-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-xs);
    min-width: 120px;
    text-align: right;
}

.upload-file-status {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}

.upload-file-status.success {
    color: var(--success);
}

.upload-file-status.error {
    color: var(--error);
}

.upload-file-size {
    font-size: 10px;
    color: var(--text-tertiary);
    font-family: 'Courier New', monospace;
}

/* File Details Modal */
.modal--large {
    max-width: 90vw;
    width: 90%;
    max-height: 90vh;
    height: 90%;
    display: flex;
    flex-direction: column;
}

.modal--large .modal__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-xl);
}

/* Website details: single scroll in history section only, no main modal scroll */
.modal--large .modal__body:has(.website-detail-history-section) {
    overflow: hidden;
}

.file-details-container:has(.website-detail-history-section) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.file-details-container:has(.website-detail-history-section) .file-details-grid,
.file-details-container:has(.website-detail-history-section) .file-details-horizontal-divider,
.file-details-container:has(.website-detail-history-section) .file-details-video-indexer {
    flex-shrink: 0;
}

.file-details-container:has(.website-detail-history-section) .website-detail-history-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 0;
}

.file-details-container:has(.website-detail-history-section) .website-detail-history-list {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding-right: 4px;
}

.file-details-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    width: 100%;
}

.file-details-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: var(--spacing-lg);
    align-items: start;
    flex-shrink: 0;
}

.file-details-divider {
    width: 1px;
    background: var(--border-glass-dark);
    min-height: 200px;
}

.file-details-horizontal-divider {
    width: 100%;
    height: 1px;
    background: var(--border-glass-dark);
    flex-shrink: 0;
}

.file-details-preview {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.file-details-preview img,
.file-details-preview video {
    width: 100%;
    max-height: 600px;
    min-height: 300px;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: var(--bg-glass-dark);
    display: block;
}

.file-details-preview video {
    height: auto;
    max-width: 100%;
}

.file-details-preview video::-webkit-media-controls-fullscreen-button {
    display: inline-block !important;
}

.file-details-preview video::-webkit-media-controls {
    display: flex !important;
}

.file-details-preview video:fullscreen,
.file-details-preview video:-webkit-full-screen,
.file-details-preview video:-moz-full-screen,
.file-details-preview video:-ms-fullscreen {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
}

.file-details-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px solid var(--border-glass-dark);
}

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

.detail-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 12px;
}

.detail-value {
    color: var(--text-primary);
    font-size: 12px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.file-details-properties,
.file-details-linked-to {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.file-details-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 2px 0;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--border-glass-dark);
}

.file-details-ai-scan-title {
    font-size: 18px;
    text-align: center;
    margin: 0 0 var(--spacing-md) 0;
    padding-bottom: var(--spacing-sm);
}

/* Video Indexer */
.file-details-video-indexer {
    display: flex !important;
    flex-direction: column;
    gap: var(--spacing-md);
    min-height: 300px;
    width: 100%;
    visibility: visible !important;
    opacity: 1 !important;
}

.file-details-video-indexer--no-data {
    min-height: auto;
}

/* Collapsible Detailed Analysis Section */
.ai-details-collapsible {
    margin-top: var(--spacing-lg);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ai-details-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-glass);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
}

.ai-details-toggle:hover {
    background: var(--bg-glass-dark);
}

.ai-details-toggle-icon {
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

.ai-details-collapsible.expanded .ai-details-toggle-icon {
    transform: rotate(90deg);
}

.ai-details-toggle-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.ai-details-toggle-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-left: auto;
}

.ai-details-content {
    display: none;
    padding: var(--spacing-lg);
    background: var(--bg-glass-dark);
}

.ai-details-collapsible.expanded .ai-details-content {
    display: block;
}

.file-details-video-indexer-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: var(--spacing-lg);
    align-items: stretch;
    flex: 1;
    min-height: 300px;
}

.file-details-video-indexer-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    height: 100%;
    min-height: 0;
}

.file-details-video-indexer-column-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border-glass-dark);
    flex-shrink: 0;
}

.file-details-video-indexer-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding-right: var(--spacing-xs);
    font-size: 12px;
}

.file-details-video-indexer-content::-webkit-scrollbar {
    width: 6px;
}

.file-details-video-indexer-content::-webkit-scrollbar-track {
    background: var(--bg-glass-dark);
    border-radius: 3px;
}

.file-details-video-indexer-content::-webkit-scrollbar-thumb {
    background: var(--border-glass-dark);
    border-radius: 3px;
}

.file-details-video-indexer-content::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

.file-details-video-indexer-divider {
    width: 1px;
    background: var(--border-glass-dark);
    height: 100%;
}

.video-indexer-modal {
    max-width: 900px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    z-index: 1001;
}

#videoIndexerModalOverlay {
    z-index: 1000;
}

.video-indexer-content {
    flex: 1;
    overflow-y: auto;
    min-height: 300px;
    max-height: 60vh;
}

.video-indexer-item {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background: var(--bg-glass-dark);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent-primary);
}

.video-indexer-item-header {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    margin-bottom: var(--spacing-sm);
    flex-wrap: wrap;
}

.video-indexer-time,
.video-indexer-language,
.video-indexer-confidence {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: monospace;
    background: var(--bg-glass);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.video-indexer-object-name {
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.video-indexer-item--object .video-indexer-item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.video-indexer-object-icon {
    font-size: 24px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass-dark);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.video-indexer-item-content {
    color: var(--text-primary);
    line-height: 1.6;
}

.video-indexer-loading,
.video-indexer-empty,
.video-indexer-error {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);
}

.video-indexer-error {
    color: var(--error-color, #ff4444);
}

/* AI Insights Panel */
.ai-insights-panel {
    margin-bottom: var(--spacing-lg);
}

.ai-insights-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.ai-insights-grid > * {
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 100%;
}

/* Stacked columns take same flex as single sections */
.ai-insights-stacked-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    flex: 1 1 200px;
    min-width: 180px;
}

.ai-insights-stacked-column .ai-insights-section {
    /* Don't use flex: 1 - let each section size to its content */
    flex: none;
    display: flex;
    flex-direction: column;
}

/* People section */
.ai-insights-section--people {
    flex: 1 1 200px;
    min-width: 180px;
}

.ai-insights-section--people .ai-faces-container {
    flex-direction: column;
}

.ai-insights-section {
    background: var(--bg-glass-dark);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-glass-dark);
    transition: border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.ai-insights-section:hover {
    border-color: var(--border-glass);
}

.ai-insights-section-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-glass);
}

.ai-insights-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.ai-insights-section-count {
    font-size: 12px;
    font-weight: normal;
    color: var(--text-secondary);
    opacity: 0.8;
}

.ai-insights-section-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.ai-insights-section-content {
    padding: var(--spacing-md);
    flex: 1;
    min-height: 0;
}


/* AI Tags */
.ai-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.ai-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    background: var(--bg-glass);
    color: var(--text-primary);
    border: 1px solid var(--border-glass-dark);
    transition: all 0.2s ease;
}

.ai-tag:hover {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.1);
}

.ai-tag--topic {
    background: rgba(103, 58, 183, 0.2);
    border-color: rgba(103, 58, 183, 0.4);
}

.ai-tag--keyword {
    background: rgba(33, 150, 243, 0.2);
    border-color: rgba(33, 150, 243, 0.4);
}

.ai-tag--brand {
    background: rgba(255, 152, 0, 0.2);
    border-color: rgba(255, 152, 0, 0.4);
}

.ai-tag--label {
    background: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.4);
}

.ai-tag--entity {
    background: rgba(0, 188, 212, 0.2);
    border-color: rgba(0, 188, 212, 0.4);
}

.ai-tag-confidence {
    font-size: 10px;
    color: var(--text-secondary);
    margin-left: 2px;
}

/* AI Faces */
.ai-faces-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.ai-face-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--bg-glass);
    border-radius: var(--radius-md);
    min-width: 140px;
    border: 1px solid var(--border-glass-dark);
}

.ai-face-item.celebrity {
    border-color: rgba(255, 193, 7, 0.5);
    background: rgba(255, 193, 7, 0.1);
}

.ai-face-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-glass-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.ai-face-placeholder {
    font-size: 20px;
    color: var(--text-secondary);
}

.ai-face-info {
    flex: 1;
    min-width: 0;
}

.ai-face-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-face-badge {
    font-size: 10px;
    color: #ffc107;
    display: inline-block;
    margin-top: 2px;
}

.ai-face-duration {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Content Moderation - now stacked with Category in same column */
.ai-insights-moderation {
    /* Removed full-width spanning - now fits in stacked column */
}

.ai-insights-moderation.moderation-safe .ai-insights-section-badge {
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
}

/* Content Moderation Result */
.moderation-result {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-glass);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-glass);
}

.moderation-result-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: 4px;
}

.moderation-result-icon {
    font-size: 16px;
}

.moderation-result-text {
    font-size: 14px;
    font-weight: 600;
}

.ai-insights-moderation.moderation-safe .moderation-result-text {
    color: #4caf50;
}

.ai-insights-moderation.moderation-review .moderation-result-text {
    color: #ff9800;
}

.moderation-result-description {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.moderation-scores {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.moderation-score-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-glass);
    border-radius: var(--radius-sm);
}

.moderation-score-item.flagged {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.moderation-score-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.moderation-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.moderation-bar {
    height: 6px;
    background: var(--bg-glass-dark);
    border-radius: 3px;
    overflow: hidden;
}

.moderation-bar-fill {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.moderation-score-item.flagged .moderation-bar-fill {
    background: #f44336;
}

.moderation-value {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}

.moderation-description {
    font-size: 10px;
    color: var(--text-tertiary);
    margin: 0;
    line-height: 1.3;
}

/* Emotions */
.ai-emotions-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.ai-emotion-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: var(--bg-glass);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-glass);
}

.ai-emotion-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.ai-emotion-icon {
    font-size: 16px;
}

.ai-emotion-type {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
}

.ai-emotion-count {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-glass-dark);
    padding: 2px 6px;
    border-radius: 8px;
}

.ai-emotion-times {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 24px;
}

.ai-emotion-time {
    font-size: 10px;
    color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ai-emotion-time:hover {
    background: rgba(var(--accent-primary-rgb), 0.2);
}

.ai-emotion-more {
    font-size: 10px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Sentiments */
.ai-sentiments-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.ai-sentiment-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.ai-sentiment-type {
    font-size: 12px;
    font-weight: 500;
    width: 70px;
    flex-shrink: 0;
}

.ai-sentiment-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-glass-dark);
    border-radius: 4px;
    overflow: hidden;
}

.ai-sentiment-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.ai-sentiment-score {
    font-size: 11px;
    color: var(--text-secondary);
    width: 35px;
    text-align: right;
    flex-shrink: 0;
}

/* Larger Labels */
.ai-tag--large {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
}


/* Compact List Layout for Transcript/Objects/Text columns */
.video-indexer-item--compact {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: 1px solid var(--border-glass);
    gap: 2px;
}

.video-indexer-item--compact:last-child {
    border-bottom: none;
}

.video-indexer-item-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.video-indexer-item--compact .video-indexer-time {
    font-size: 10px;
    color: var(--text-secondary);
}

.video-indexer-item--compact .video-indexer-confidence {
    font-size: 10px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.video-indexer-item-row2 {
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
}

/* Compact List with Thumbnail */
.video-indexer-item--with-thumbnail {
    display: flex;
    align-items: flex-start;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: 1px solid var(--border-glass);
    gap: var(--spacing-sm);
}

.video-indexer-item--with-thumbnail:last-child {
    border-bottom: none;
}

.video-indexer-thumbnail {
    width: 48px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-glass-dark);
}

.video-indexer-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-indexer-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Clickable thumbnails */
.ai-face-avatar img,
.video-indexer-thumbnail img {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.ai-face-avatar img:hover,
.video-indexer-thumbnail img:hover {
    opacity: 0.8;
}

/* Image Preview Modal */
.image-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    cursor: pointer;
}

.image-preview-overlay.active {
    display: flex;
}

.image-preview-container {
    position: relative;
    cursor: default;
}

.image-preview-container img {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.image-preview-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.image-preview-close:hover {
    background: var(--accent-primary);
}

/* Pagination */
.pagination-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    background: var(--bg-glass);
    border-radius: var(--radius-lg);
}

.pagination-info {
    color: var(--text-secondary);
    font-size: 14px;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: center;
}

.pagination-controls .btn {
    min-width: 100px;
    padding: var(--spacing-sm) var(--spacing-md);
}

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

.page-numbers {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.page-number-btn {
    min-width: 40px;
    height: 40px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 2px solid var(--border-glass-dark);
    border-radius: var(--radius-md);
    background: var(--bg-glass-dark);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-number-btn:hover:not(:disabled) {
    background: var(--bg-glass);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.page-number-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
    font-weight: 600;
}

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

.page-ellipsis {
    padding: 0 var(--spacing-xs);
    color: var(--text-secondary);
    font-size: 14px;
}

/* Selection Controls */
.breadcrumb-header-left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 1;
}

.selection-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.select-all-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: var(--text-primary);
}

.select-all-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.selected-count {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Filter Modal */
.filter-modal {
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

.filter-section {
    margin-bottom: var(--spacing-lg);
}

.filter-section:last-child {
    margin-bottom: 0;
}

.filter-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border-glass-dark);
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-height: 300px;
    overflow-y: auto;
    padding: var(--spacing-sm);
    background: var(--bg-glass-dark);
    border-radius: var(--radius-md);
}

.filter-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    cursor: pointer;
}

.filter-option:hover {
    background: var(--bg-glass);
}

.filter-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.filter-option label {
    cursor: pointer;
    flex: 1;
    color: var(--text-primary);
    font-size: 14px;
    user-select: none;
}

.filter-loading {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);
}

.filter-empty {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-secondary);
    font-style: italic;
}

/* Move Folder Tree */
.move-folder-tree {
    max-height: 400px;
    overflow-y: auto;
    background: var(--bg-glass-dark);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    border: 1px solid var(--border-glass-dark);
}

.move-folder-tree .folder-item {
    margin-bottom: var(--spacing-xs);
}

.move-folder-tree .folder-item.selected {
    background: var(--accent-primary);
    color: var(--text-on-accent);
}

.folder-selected-check {
    margin-left: auto;
    margin-right: 8px;
    font-weight: bold;
    font-size: 18px;
    color: var(--text-on-accent);
    display: none;
}

.move-folder-tree .folder-item.selected .folder-selected-check {
    display: inline;
}

.move-folder-tree .folder-children {
    margin-left: var(--spacing-md);
    margin-top: var(--spacing-xs);
}

/* Deleted Files */
.deleted-files-list {
    max-height: 600px;
    overflow-y: auto;
    padding: var(--spacing-md);
}

.deleted-file-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-glass);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    border: 1px solid var(--border-glass-dark);
    transition: all var(--transition-fast);
}

.deleted-file-item:hover {
    background: var(--bg-glass-dark);
    border-color: var(--accent-primary);
}

.deleted-file-item.urgent {
    border-color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

.deleted-file-item.urgent .deleted-file-name {
    color: #ff6b6b;
}

.deleted-file-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.deleted-file-info {
    flex: 1;
    min-width: 0;
}

.deleted-file-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    word-break: break-word;
}

.deleted-file-details {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 14px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.deleted-file-separator {
    color: var(--text-tertiary);
}

.deleted-file-days {
    font-weight: 600;
    color: var(--text-secondary);
}

.deleted-file-days.urgent {
    color: #ff6b6b;
    font-weight: 700;
}

.deleted-file-actions {
    flex-shrink: 0;
}

#deletePermanentlyBtn {
    margin-right: auto;
}

#deletePermanentlyBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Asset Usage Modal */
.asset-usage-loading,
.asset-usage-error,
.asset-usage-empty {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-secondary);
}

.asset-usage-error {
    color: var(--error-color, #ff4444);
}

.asset-usage-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.asset-usage-header p {
    margin: 0;
    color: var(--text-primary);
}

.asset-usage-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.asset-usage-item {
    padding: var(--spacing-md);
    background: var(--bg-glass);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color, #e0e0e0);
}

.asset-usage-module {
    font-weight: 600;
    font-size: 1.1em;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.asset-usage-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: 0.9em;
}

.asset-usage-item-name,
.asset-usage-type,
.asset-usage-date {
    display: flex;
    gap: var(--spacing-xs);
}

.asset-usage-item-name strong,
.asset-usage-type strong,
.asset-usage-date strong {
    color: var(--text-primary);
    min-width: 100px;
}

/* Asset History Modal */
.asset-history-modal {
    max-width: 1100px;
    width: 95%;
}

.asset-history-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.asset-history-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--bg-glass);
    border-radius: var(--radius-md);
}

.asset-history-nav-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--accent-primary);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    cursor: pointer;
    font-size: 14px;
    transition: all var(--transition-fast);
}

.asset-history-nav-btn:hover:not(:disabled) {
    background: var(--accent-hover);
}

.asset-history-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.asset-history-counter {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    min-width: 80px;
    text-align: center;
}

.asset-history-content {
    min-height: 400px;
    overflow-x: auto;
}

.asset-history-loading,
.asset-history-error,
.asset-history-empty {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.asset-history-error {
    color: var(--error-color, #ff4444);
}

/* 3-column comparison layout */
.asset-history-comparison {
    display: grid;
    grid-template-columns: 150px 1fr 1fr 1fr;
    gap: 1px;
    background: var(--border-glass-dark);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.asset-history-comparison-header {
    display: contents;
}

.asset-history-comparison-header > div {
    background: var(--bg-glass);
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    font-size: 12px;
    color: var(--text-primary);
    text-align: center;
    border-bottom: 2px solid var(--accent-primary);
}

.asset-history-comparison-header .header-labels {
    text-align: left;
    color: var(--text-secondary);
}

.asset-history-version-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.asset-history-version-title {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.asset-history-version-date {
    font-size: 10px;
    color: var(--text-muted, rgba(255,255,255,0.5));
}

.asset-history-version-user {
    font-size: 10px;
    color: var(--text-secondary);
}

.asset-history-version-filename {
    font-size: 10px;
    color: var(--accent-primary);
    word-break: break-all;
    margin-top: var(--spacing-xs);
}

.asset-history-comparison-row {
    display: contents;
}

.asset-history-comparison-row > div {
    background: var(--bg-primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 12px;
    display: flex;
    align-items: center;
}

.asset-history-comparison-row:nth-child(even) > div {
    background: var(--bg-glass);
}

.asset-history-comparison-row .prop-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.asset-history-comparison-row .prop-value {
    color: var(--text-primary);
    word-break: break-word;
}

.asset-history-comparison-row .prop-value.diff-highlight {
    color: #ff6b6b;
    font-weight: 600;
}

.asset-history-comparison-row .prop-value.no-data {
    color: var(--text-muted, rgba(255,255,255,0.4));
    font-style: italic;
}

/* Download button in version header */
.asset-history-download-btn {
    margin-top: var(--spacing-xs);
    padding: 4px 8px;
    font-size: 10px;
    background: var(--accent-secondary, #6c5ce7);
    border: none;
    border-radius: var(--radius-xs);
    color: white;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.asset-history-download-btn:hover {
    opacity: 0.8;
}

/* Version column styling */
.asset-history-comparison-header .version-left {
    background: rgba(255, 107, 107, 0.1);
}

.asset-history-comparison-header .version-middle {
    background: var(--bg-glass);
}

.asset-history-comparison-header .version-right {
    background: rgba(255, 107, 107, 0.1);
}

/* ============================================
   Validation Settings Modal
   ============================================ */

.validation-settings-modal {
    max-width: 600px;
}

.validation-settings-description {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
}

.validation-profiles-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.validation-profile-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--bg-glass);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-glass-dark);
}

.validation-profile-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.validation-profile-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.validation-profile-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.validation-profile-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.validation-profile-summary {
    font-size: 12px;
    color: var(--text-secondary);
}

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

.validation-settings-divider {
    margin: var(--spacing-lg) 0;
    border: none;
    border-top: 1px solid var(--border-glass-dark);
}

.validation-settings-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.default-duration-settings .form-group {
    margin-bottom: var(--spacing-md);
}

.default-duration-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.default-duration-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
}

.default-duration-sep {
    color: var(--text-secondary);
    font-size: 13px;
}

.default-duration-settings .btn {
    margin-top: var(--spacing-sm);
}

/* Profile Edit Modal */
.profile-edit-modal {
    max-width: 450px;
}

.profile-edit-modal .form-group {
    margin-bottom: var(--spacing-md);
}

.profile-edit-modal .form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.profile-edit-modal .form-select,
.profile-edit-modal .form-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-glass);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
}

.bitrate-range-inputs {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.bitrate-range-values {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.bitrate-range-values .form-input {
    width: 80px;
}

.bitrate-range-values span {
    color: var(--text-secondary);
    font-size: 13px;
}

/* Icon button style */
.btn--icon {
    padding: var(--spacing-sm);
    background: var(--bg-glass);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
}

.btn--icon:hover {
    background: var(--bg-glass-hover);
    border-color: var(--accent-primary);
}

/* Asset validation warning highlight (orange) */
.asset-validation-warning {
    background-color: rgba(255, 120, 0, 0.25) !important;
}

.file-item.asset-validation-warning {
    border: 2px solid rgba(255, 120, 0, 1) !important;
    box-shadow: 0 0 0 2px rgba(255, 120, 0, 0.4) !important;
}

.files-list-row.asset-validation-warning {
    background-color: rgba(255, 120, 0, 0.25) !important;
}

.files-list-row.asset-validation-warning:hover {
    background-color: rgba(255, 120, 0, 0.35) !important;
}

.asset-item-list.asset-validation-warning {
    background-color: rgba(255, 120, 0, 0.25) !important;
    border: 2px solid rgba(255, 120, 0, 1) !important;
}

.asset-item-list.asset-validation-warning:hover {
    background-color: rgba(255, 120, 0, 0.35) !important;
}

/* Validation failed property highlighting (red) */
.detail-row.validation-failed,
.asset-history-row.validation-failed {
    background-color: rgba(255, 60, 60, 0.2);
    border-radius: 4px;
    padding: 2px 6px;
    margin: -2px -6px;
}

.detail-row.validation-failed .detail-label,
.detail-row.validation-failed .detail-value,
.asset-history-row.validation-failed .asset-history-prop-label,
.asset-history-row.validation-failed .asset-history-version-value {
    color: #ff6b6b !important;
}

.stat-list.validation-failed {
    background-color: rgba(255, 60, 60, 0.2);
    border-radius: 4px;
    padding: 2px 6px;
    margin: -2px -6px;
}

.stat-list.validation-failed .stat__label-list,
.stat-list.validation-failed .stat__value-list {
    color: #ff6b6b !important;
}

/* Log modal validation failed row */
.asset-history-comparison-row.validation-failed {
    background-color: rgba(255, 60, 60, 0.15);
    border-radius: 4px;
}

.asset-history-comparison-row.validation-failed .prop-label {
    color: #ff6b6b !important;
}

.prop-value.validation-failed-text {
    color: #ff6b6b !important;
    font-weight: 600;
}

/* File Details Section Divider (for separating tracking info) */
.file-details-section-divider {
    height: 1px;
    background: var(--border-glass-dark);
    margin: var(--spacing-sm) 0;
}

.file-details-tracking {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.file-details-tracking .detail-row {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.file-details-tracking .detail-label {
    color: var(--text-secondary);
    font-size: 12px;
}

.file-details-tracking .detail-value {
    color: var(--text-primary);
    font-size: 12px;
    text-align: right;
}

/* Delete Progress Spinner */
.delete-progress-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

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

/* Content Search Controls */
.search-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

#searchTypeFilter {
    min-width: 140px;
}

#searchTypeFilter:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   DASHBOARD COMPONENTS
   ============================================ */

.welcome-text {
    text-align: left;
}

.welcome-text h3 {
    font-size: 16px;
    margin-bottom: 2px;
    color: var(--text-primary);
}

.welcome-text p {
    font-size: 13px;
    opacity: 0.8;
    color: var(--text-primary);
}

/* Sidebar - Premium Glass Design */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    z-index: 998;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-overlay.active {
    display: flex;
    opacity: 1;
}

.sidebar {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 1200px;
    max-width: 95vw;
    background: linear-gradient(135deg, rgba(30, 30, 45, 0.95) 0%, rgba(20, 20, 35, 0.98) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    display: none;
    flex-direction: column;
    z-index: 999;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 1px 0 rgba(255, 255, 255, 0.1) inset;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.active {
    display: flex;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 28px;
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.15) 0%, rgba(153, 27, 27, 0.05) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.sidebar-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #dc2626, transparent 70%);
}

.sidebar-header h3 {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

.sidebar-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-close-btn:hover {
    background: rgba(220, 38, 38, 0.3);
    border-color: rgba(220, 38, 38, 0.5);
    color: #fff;
    transform: rotate(90deg) scale(1.1);
}

.sidebar-content {
    padding: 20px 24px;
    overflow-y: visible;
    flex: 1;
}

/* Menu Components - Premium Compact Style */
.menu-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
}

/* Menu Grid Layout - 3 Columns */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.menu-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.menu-column .menu-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.menu-button {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    overflow: hidden;
}

.menu-button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 50%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.menu-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.menu-button:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(220, 38, 38, 0.15);
}

.menu-button:hover::before {
    opacity: 1;
}

.menu-button:hover::after {
    left: 100%;
}

.menu-button-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.menu-button-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.menu-button-label {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.menu-button-sublabel {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.menu-button:hover .menu-button-icon {
    transform: scale(1.1);
}

/* Menu Button Placeholder - Coming Soon */
.menu-button--placeholder {
    cursor: default;
    opacity: 0.5;
    pointer-events: none;
}

.menu-button--placeholder .menu-button-icon {
    opacity: 0.4;
}

.menu-button--placeholder::after {
    display: none;
}

.menu-button--placeholder:empty {
    visibility: hidden;
}

.coming-soon-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: linear-gradient(135deg, rgba(100, 100, 120, 0.4) 0%, rgba(80, 80, 100, 0.3) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.5);
}

/* Section-Specific Accent Colors */
/* Dashboard - Red (Brand) */
.menu-section--dashboard .menu-button-icon {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.25) 0%, rgba(153, 27, 27, 0.15) 100%);
    color: #f87171;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}
.menu-section--dashboard .menu-button:hover {
    border-color: rgba(220, 38, 38, 0.4);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 0 25px rgba(220, 38, 38, 0.2);
}

/* Monitoring - Cyan */
.menu-section--monitoring .menu-button-icon {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.25) 0%, rgba(8, 145, 178, 0.15) 100%);
    color: #22d3ee;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
}
.menu-section--monitoring .menu-button:hover {
    border-color: rgba(6, 182, 212, 0.4);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 0 25px rgba(6, 182, 212, 0.2);
}

/* Content - Purple */
.menu-section--content .menu-button-icon {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.25) 0%, rgba(126, 34, 206, 0.15) 100%);
    color: #c084fc;
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.2);
}
.menu-section--content .menu-button:hover {
    border-color: rgba(147, 51, 234, 0.4);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 0 25px rgba(147, 51, 234, 0.2);
}

/* Locations - Green */
.menu-section--locations .menu-button-icon {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(22, 163, 74, 0.15) 100%);
    color: #4ade80;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}
.menu-section--locations .menu-button:hover {
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 0 25px rgba(34, 197, 94, 0.2);
}

/* Groups - Orange */
.menu-section--groups .menu-button-icon {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.25) 0%, rgba(234, 88, 12, 0.15) 100%);
    color: #fb923c;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
}
.menu-section--groups .menu-button:hover {
    border-color: rgba(249, 115, 22, 0.4);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 0 25px rgba(249, 115, 22, 0.2);
}

/* Experience - Pink */
.menu-section--experience .menu-button-icon {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.25) 0%, rgba(219, 39, 119, 0.15) 100%);
    color: #f472b6;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.2);
}
.menu-section--experience .menu-button:hover {
    border-color: rgba(236, 72, 153, 0.4);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 0 25px rgba(236, 72, 153, 0.2);
}

/* Version Badge - Premium Compact Style */
.menu-version {
    padding: 12px var(--spacing-md);
    margin-top: 8px;
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.menu-version-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0;
}

.menu-version-value {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    letter-spacing: 0.5px;
    background: linear-gradient(90deg, #f87171, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Menu Divider - Gradient Style */
.menu-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    margin: 10px 0;
    border: none;
}

/* Menu Section - Enhanced */
.menu-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Section Title - With Accent Bar */
.menu-section-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
    padding: 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.menu-section-title::before {
    content: '';
    width: 3px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Section Title Accent Colors */
.menu-section--dashboard .menu-section-title::before {
    background: linear-gradient(180deg, #dc2626, #991b1b);
}
.menu-section--monitoring .menu-section-title::before {
    background: linear-gradient(180deg, #06b6d4, #0891b2);
}
.menu-section--content .menu-section-title::before {
    background: linear-gradient(180deg, #9333ea, #7e22ce);
}
.menu-section--locations .menu-section-title::before {
    background: linear-gradient(180deg, #22c55e, #16a34a);
}
.menu-section--groups .menu-section-title::before {
    background: linear-gradient(180deg, #f97316, #ea580c);
}
.menu-section--experience .menu-section-title::before {
    background: linear-gradient(180deg, #ec4899, #db2777);
}

.menu-buttons-row {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.menu-buttons-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.menu-modules-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.menu-module-btn {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.menu-module-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.menu-module-btn-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.menu-module-btn-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.menu-module-btn-desc {
    font-size: 13px;
    opacity: 0.7;
    line-height: 1.4;
}

.menu-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.menu-option {
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.menu-option:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.menu-option-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.menu-option-desc {
    font-size: 13px;
    opacity: 0.7;
    line-height: 1.4;
}

.menu-item {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.menu-item:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(96, 165, 250, 0.5);
    transform: scale(1.02);
}

.menu-item.active {
    background: rgba(59, 130, 246, 0.4);
    border-color: rgba(96, 165, 250, 0.6);
}

.menu-item .arrow {
    float: right;
    transition: transform 0.2s;
}

.menu-item.expanded .arrow {
    transform: rotate(180deg);
}

.submenu {
    margin-top: 8px;
    margin-left: 16px;
    display: none;
    flex-direction: column;
    gap: 6px;
}

.submenu.active {
    display: flex;
}

.submenu-item {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.submenu-item:hover {
    background: rgba(59, 130, 246, 0.2);
    color: white;
}

.menu-logout {
    margin-top: auto;
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
}

.menu-logout:hover {
    background: rgba(239, 68, 68, 0.3);
}

/* Content Area */
.content-area {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    overflow-x: auto;
}

.content-area {
    padding: 24px;
}

.main-container.with-chat .content-area {
    margin-right: 400px;
    transition: margin-right 0.3s ease;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.2s;
}

.stat-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.stat-label {
    font-size: 14px;
    opacity: 0.8;
    font-weight: 500;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
}

.stat-change {
    font-size: 14px;
    color: rgba(34, 197, 94, 1);
}

/* Totals Section */
.totals-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.total-box {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.total-box.blue {
    background: rgba(107, 114, 128, 0.2);
    border-color: rgba(156, 163, 175, 0.3);
}

.total-box.green {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.3);
}

.total-box.yellow {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.3);
}

.total-box.red {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
}

.total-box.grey {
    background: rgba(100, 116, 139, 0.2);
    border-color: rgba(100, 116, 139, 0.3);
}

.total-label {
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.total-value {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
}

.total-subtitle {
    font-size: 11px;
    opacity: 0.7;
}

/* Widgets System */
.widgets-grid {
    display: flex !important;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 24px;
    width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
}

.widgets-column {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
    align-content: flex-start;
    flex: 0 0 608px;
    width: 608px;
    max-width: 608px;
    min-width: 300px;
    box-sizing: border-box;
    transition: flex-basis 0.3s ease, width 0.3s ease;
}

.drop-zone {
    min-width: 300px;
    min-height: 376px;
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.2s;
    pointer-events: none;
    display: none;
}

.widgets-grid.dragging .drop-zone {
    display: block !important;
    pointer-events: auto;
}

.drop-zone.active {
    border-color: rgba(220, 38, 38, 0.6);
    background: rgba(220, 38, 38, 0.1);
    border-style: solid;
}

.widget {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    cursor: move;
}

/* Map widget always fills remaining space */
.widgets-grid > .widget.map-widget {
    flex: 1 1 auto;
    min-width: 300px;
}

.widget:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.widget.dragging {
    opacity: 0.5;
    border-color: rgba(220, 38, 38, 0.6);
}

.widget.drag-over {
    border-color: rgba(220, 38, 38, 0.8);
    background: rgba(220, 38, 38, 0.1);
}

.widget.map-widget {
    height: 764px !important;
    min-width: 300px !important;
    pointer-events: none;
    padding: 0;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
    flex: 1 1 auto;
    cursor: default;
}

.widget.map-widget .map-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 16px;
}

.widget.map-widget #map {
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: hidden;
}

.widget.map-widget > * {
    pointer-events: auto;
}

.widget#systemStatusWidget,
.widget#tvsWidget,
.widget#experiencesWidget,
.widget#analyticsWidget {
    width: 300px;
    flex-shrink: 0;
    height: 376px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.widget#systemStatusWidget {
    padding: 24px;
}

.widget#systemStatusWidget .widget-title {
    font-size: 14px;
}

.widget#systemStatusWidget .widget-header {
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.widget#systemStatusWidget .stat {
    padding: 6px 10px;
    margin-bottom: 6px;
    font-size: 12px;
}

.widget#systemStatusWidget .stat__label,
.widget#systemStatusWidget .stat__value {
    font-size: 12px;
}

.widget:not(.map-widget):not(#systemStatusWidget) {
    padding: 24px;
}

.widget:not(.map-widget):not(#systemStatusWidget) .widget-title {
    font-size: 16px;
}

.widget:not(.map-widget):not(#systemStatusWidget) .stat {
    padding: 8px 12px;
    margin-bottom: 8px;
}

.widget:not(.map-widget):not(#systemStatusWidget) .stat__label,
.widget:not(.map-widget):not(#systemStatusWidget) .stat__value {
    font-size: 13px;
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    cursor: default;
}

.widget-header * {
    pointer-events: auto;
}

.widget-title {
    font-size: 18px;
    font-weight: 600;
}

.widget-close {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.widget-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* Widgets Modal */
.widgets-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 998;
    display: none;
    align-items: center;
    justify-content: center;
}

.widgets-modal-overlay.active {
    display: flex;
}

.widgets-modal {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    width: 500px;
    max-width: 90vw;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.widget-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.widget-toggle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.2s;
}

.widget-toggle-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.widget-toggle-info {
    flex: 1;
}

.widget-toggle-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.widget-toggle-desc {
    font-size: 13px;
    opacity: 0.7;
    line-height: 1.4;
}

/* TV Widget Styles */
.tv-brand-section {
    margin-bottom: 12px;
}

.tv-brand-section:last-child {
    margin-bottom: 0;
}

.tv-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 12px 0;
}

.tv-brand-name-inline {
    font-size: 12px;
    font-weight: 600;
    color: #60a5fa;
    margin-bottom: 8px;
    cursor: pointer;
    user-select: none;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.tv-brand-name-inline strong {
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
}

.tv-brand-name-inline:hover {
    background: rgba(255, 255, 255, 0.1);
}

.tv-brand-toggle {
    display: inline-block;
    transition: transform 0.3s;
    font-size: 10px;
    margin-right: 6px;
    transform: rotate(0deg);
}

.tv-brand-name-inline:not(.collapsed) .tv-brand-toggle {
    transform: rotate(90deg);
}

.tv-brand-content {
    margin-top: 8px;
    margin-bottom: 4px;
    display: none;
}

.tv-brand-content.expanded {
    display: block;
}

.tv-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.tv-stat-column {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tv-stat-label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2px;
    font-size: 12px;
}

.tv-stat-data {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    line-height: 1.3;
}

.tv-stat-data.connected-stat,
.tv-stat-data.power-on-stat {
    color: #22c55e;
}

.tv-stat-data.disconnected-stat,
.tv-stat-data.power-off-stat {
    color: #ef4444;
}

.tv-stat-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
}

.tv-stat-value {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
}

.tv-stat-value.connected-stat,
.tv-stat-value.power-on-stat {
    color: #22c55e;
}

.tv-stat-value.disconnected-stat,
.tv-stat-value.power-off-stat {
    color: #ef4444;
}

.tv-brand-percentage {
    flex-shrink: 0;
    white-space: nowrap;
}

.stat-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 8px 0;
}

/* Dashboard: message when account/project not selected */
.dashboard-context-message {
    padding: 32px 24px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin: 12px 0;
}
.dashboard-context-message p {
    margin: 0 0 16px 0;
    color: var(--text-secondary, #9ca3af);
}
.dashboard-context-message .btn { margin-top: 8px; }

/* Map Components */
.map-container {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.map-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#map {
    width: 100%;
    height: calc(100% - 60px);
    z-index: 1;
}

.leaflet-container {
    background: rgba(255, 255, 255, 0.05) !important;
}

.leaflet-control-zoom a {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(10px);
}

.leaflet-control-zoom a:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.leaflet-bar {
    background: transparent !important;
    border: none !important;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.5), rgba(15, 15, 30, 0.5));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    position: relative;
    overflow: hidden;
}

.map-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect fill="%232563eb" width="400" height="300"/><circle cx="80" cy="80" r="8" fill="%2322c55e" opacity="0.8"/><circle cx="120" cy="100" r="8" fill="%2322c55e" opacity="0.8"/><circle cx="150" cy="70" r="8" fill="%2322c55e" opacity="0.8"/><circle cx="180" cy="120" r="8" fill="%23ef4444" opacity="0.8"/><circle cx="220" cy="90" r="8" fill="%2322c55e" opacity="0.8"/><circle cx="250" cy="130" r="8" fill="%2322c55e" opacity="0.8"/><circle cx="280" cy="80" r="8" fill="%23ef4444" opacity="0.8"/><circle cx="310" cy="110" r="8" fill="%2322c55e" opacity="0.8"/><circle cx="90" cy="180" r="8" fill="%2322c55e" opacity="0.8"/><circle cx="130" cy="200" r="8" fill="%2322c55e" opacity="0.8"/><circle cx="170" cy="170" r="8" fill="%2322c55e" opacity="0.8"/><circle cx="210" cy="190" r="8" fill="%23ef4444" opacity="0.8"/><circle cx="250" cy="210" r="8" fill="%2322c55e" opacity="0.8"/><circle cx="290" cy="180" r="8" fill="%2322c55e" opacity="0.8"/><circle cx="320" cy="200" r="8" fill="%2322c55e" opacity="0.8"/></svg>');
    background-size: cover;
    background-position: center;
}

/* ============================================
   ZYVO AI ASSISTANT
   ============================================ */

/* Zyvo Header Button - dark gray background with logo */
.btn-zyvo {
    background: linear-gradient(135deg, #3a3a3a, #2a2a2a);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xl);
    padding: 6px 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: fit-content;
}

.btn-zyvo:hover {
    background: linear-gradient(135deg, #4a4a4a, #3a3a3a);
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-zyvo.active {
    background: linear-gradient(135deg, #4a4a4a, #3a3a3a);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.5), 0 6px 24px rgba(0, 0, 0, 0.45);
}

.btn-zyvo .zyvo-logo-img {
    height: 44px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Zyvo notification dot for unread messages */
.btn-zyvo .zyvo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: zyvoPulse 2s ease-in-out infinite;
}

@keyframes zyvoPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.3); }
}

/* Chat Sidebar Panel */
.ai-chat-sidebar {
    position: fixed;
    top: 110px;
    right: -420px;
    width: 420px;
    height: calc(100vh - 110px);
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(24px);
    border-left: 1px solid rgba(99, 102, 241, 0.3);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 997;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
}

.ai-chat-sidebar.active {
    right: 0;
}

/* Chat Header */
.ai-chat-header {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #1a1a1a, #111111);
    flex-shrink: 0;
}

.ai-chat-title {
    display: flex;
    align-items: center;
}

.ai-chat-header-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    display: block;
}

.ai-chat-header-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.ai-chat-toggle {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.ai-chat-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
}

.ai-chat-voice-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-top: 1px solid rgba(99, 102, 241, 0.2);
    background: rgba(15, 23, 42, 0.6);
    flex-shrink: 0;
}

.ai-chat-voice-status {
    flex: 1;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
}

#zyvoVoiceAudio {
    display: none;
}

.ai-chat-voice-hold {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}

.ai-chat-voice-hold:hover {
    background: rgba(99, 102, 241, 0.3);
}

.ai-chat-voice-hold:active {
    background: rgba(99, 102, 241, 0.4);
}

.ai-chat-voice-end {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border-radius: 6px;
    cursor: pointer;
}

.ai-chat-voice-end:hover {
    background: rgba(239, 68, 68, 0.3);
}

/* Chat Messages Area */
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.ai-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.ai-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

/* Chat Message Bubbles */
.ai-chat-message {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    animation: zyvoFadeIn 0.3s ease;
}

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

.ai-chat-message .message-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    overflow: hidden;
}

.ai-chat-message .message-avatar .message-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-chat-message.user {
    flex-direction: row-reverse;
}

.ai-chat-message.user .message-avatar {
    background: rgba(16, 185, 129, 0.3);
}

.ai-chat-message .message-content {
    flex: 1;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
    max-width: 85%;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.ai-chat-message.ai .message-content {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.15);
}

.ai-chat-message.user .message-content {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.15);
}

/* Confirmation: override pre-wrap on bubbles — inter-tag whitespace must not render as blank lines */
.ai-chat-message .message-content.ai-chat-confirm-content {
    white-space: normal;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    line-height: 1.3;
}

/* Confirmation - Affected Summary */
.ai-chat-affected-summary {
    font-size: 13px;
    font-weight: 500;
    color: #f59e0b;
    margin: 0;
    padding: 4px 6px;
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    line-height: 1.25;
}

.ai-chat-affected-number {
    font-weight: 700;
    font-size: 1.2em;
}

.ai-chat-confirm-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Confirmation Buttons */
.ai-chat-confirm-buttons {
    display: flex;
    gap: 6px;
    margin: 0;
    flex-shrink: 0;
}

.ai-chat-confirm-buttons .btn-confirm-yes {
    padding: 5px 12px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.ai-chat-confirm-buttons .btn-confirm-yes:hover {
    background: linear-gradient(135deg, #818cf8, #6366f1);
    transform: scale(1.02);
}

.ai-chat-confirm-buttons .btn-confirm-no {
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.ai-chat-confirm-buttons .btn-confirm-no:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Typing Indicator */
.zyvo-typing {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    align-items: center;
}

.zyvo-typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.6);
    animation: zyvoTypingBounce 1.4s ease-in-out infinite;
}

.zyvo-typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.zyvo-typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes zyvoTypingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* New Conversation Indicator */
.ai-chat-new-conversation {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    margin: 2px 0;
}

.ai-chat-new-conversation span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Chat Input Area */
.ai-chat-input-container {
    padding: 10px;
    border-top: 1px solid rgba(99, 102, 241, 0.2);
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    background: rgba(15, 23, 42, 0.5);
}

.ai-chat-input {
    flex: 1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: white;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}

.ai-chat-input:focus {
    border-color: rgba(99, 102, 241, 0.5);
}

.ai-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.ai-chat-send {
    width: 38px;
    height: 38px;
    border: none;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: 10px;
    color: white;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.ai-chat-send:hover {
    background: linear-gradient(135deg, #818cf8, #6366f1);
    transform: scale(1.05);
}

.ai-chat-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Zyvo Teach mode + Continue (guided tours) */
.ai-chat-mode-bar {
    flex-shrink: 0;
    padding: 8px 10px 6px;
    border-bottom: 1px solid rgba(99, 102, 241, 0.15);
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.zyvo-mode-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.zyvo-mode-row--sub {
    padding-left: 0;
}

.zyvo-mode-row--watch-speed .zyvo-mode-btn {
    padding: 5px 4px;
    font-size: 10px;
}

.zyvo-mode-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 38px;
}

.zyvo-mode-segment {
    display: flex;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.zyvo-mode-btn {
    flex: 1;
    padding: 6px 8px;
    font-size: 11px;
    font-family: inherit;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.zyvo-mode-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.zyvo-mode-btn.active {
    border-color: rgba(99, 102, 241, 0.55);
    background: rgba(99, 102, 241, 0.25);
    color: #fff;
}

.ai-chat-teach-continue {
    flex-shrink: 0;
    padding: 8px 10px;
    border-top: 1px solid rgba(99, 102, 241, 0.2);
    display: none;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
}

.ai-chat-teach-continue-btn {
    min-width: 140px;
    padding: 8px 16px;
    font-size: 13px;
    font-family: inherit;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
}

.ai-chat-teach-continue-btn:hover {
    background: linear-gradient(135deg, #818cf8, #6366f1);
}

/* Zyvo spotlight overlay (see zyvo-teach-overlay.js)
   Must sit above .modal-overlay (998), asset modals, and Zyvo sidebar (997) so the glow/caption
   stay visible when a modal is open (e.g. Create Tag); the hole stays click-through to the target. */
#zyvoTeachOverlay.zyvo-teach-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    pointer-events: none;
}

.zyvo-teach-overlay__shade {
    position: fixed;
    z-index: 0;
    /* Softer dim — more of the page shows through; spotlight + caption still read */
    background: rgba(0, 0, 0, 0.3);
    pointer-events: auto;
}

/* Glowing frame around the spotlight hole (above shades, no hit-testing) */
.zyvo-teach-overlay__glow {
    display: none;
    position: fixed;
    z-index: 1;
    pointer-events: none;
    box-sizing: border-box;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.42);
    box-shadow:
        0 0 0 2px rgba(99, 102, 241, 0.72),
        0 0 0 5px rgba(99, 102, 241, 0.32),
        0 0 28px 10px rgba(129, 140, 248, 0.48),
        0 0 56px 22px rgba(139, 92, 246, 0.28),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    animation: zyvo-teach-glow-pulse 2.2s ease-in-out infinite;
}

@keyframes zyvo-teach-glow-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(99, 102, 241, 0.72),
            0 0 0 5px rgba(99, 102, 241, 0.32),
            0 0 28px 10px rgba(129, 140, 248, 0.48),
            0 0 56px 22px rgba(139, 92, 246, 0.28),
            inset 0 0 20px rgba(255, 255, 255, 0.1);
        filter: brightness(1);
    }
    50% {
        box-shadow:
            0 0 0 3px rgba(129, 140, 248, 0.85),
            0 0 0 8px rgba(99, 102, 241, 0.4),
            0 0 36px 14px rgba(167, 139, 250, 0.55),
            0 0 72px 28px rgba(139, 92, 246, 0.36),
            inset 0 0 26px rgba(255, 255, 255, 0.14);
        filter: brightness(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .zyvo-teach-overlay__glow {
        animation: none;
    }
}

.zyvo-teach-overlay__caption {
    position: fixed;
    z-index: 2;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
    color: #fff;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(129, 140, 248, 0.45);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.35),
        0 0 16px rgba(99, 102, 241, 0.28);
    pointer-events: none;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .ai-chat-sidebar {
        width: 100vw;
        right: -100vw;
        top: 0;
        height: 100vh;
    }

    .btn-zyvo {
        padding: 4px 10px;
        min-width: auto;
    }

    .btn-zyvo .zyvo-logo-img {
        height: 34px;
    }
}

/* ============================================
   ADMIN MATRIX COMPONENTS
   ============================================ */

.page-actions {
    display: flex;
    gap: var(--spacing-md);
}

.page-header--breadcrumb {
    justify-content: flex-start;
}

/* Permission Grid */
.permission-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.permission-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.permission-label {
    width: 120px;
    font-weight: 600;
    color: var(--text-secondary);
}

.permission-select {
    flex: 1;
}

.permission-options {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.radio-option {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 13px;
    color: var(--text-primary);
}

.radio-option input[type="radio"] {
    accent-color: #dc2626;
}

/* Profile List */
.profile-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.profile-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.04);
}

.profile-item-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.profile-meta-title {
    font-weight: 600;
}

.profile-meta-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}

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

.profile-role {
    font-size: 12px;
}

.modal--compact {
    max-width: 480px;
}

/* Edit Asset Metadata: wider/taller; overflow visible so autocomplete dropdowns are not clipped by modal body scroll */
.modal--edit-metadata {
    max-width: min(840px, 96vw);
    width: 96%;
    max-height: min(92vh, 900px);
    overflow: visible;
}

.modal--edit-metadata .modal__body {
    overflow: visible;
    flex: 0 1 auto;
}

.modal--edit-metadata .autocomplete-wrapper {
    overflow: visible;
}

.modal--edit-metadata .autocomplete-dropdown {
    z-index: 1100;
}

/* Role Details */
.role-permissions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.role-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-md) 0 var(--spacing-lg);
}

.role-detail-column {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.role-detail-heading {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.role-detail-row:last-child {
    border-bottom: none;
}

.role-detail-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.role-detail-value {
    font-size: 13px;
    font-weight: 600;
    color: #60a5fa;
    text-transform: capitalize;
}

.role-project-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.role-project-item {
    padding: 6px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
    font-size: 13px;
    color: var(--text-primary);
}

.permission-pill {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    color: var(--text-secondary);
}

/* Expandable Lists */
.expandable-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.list-item {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    transition: all var(--transition-fast);
    overflow: hidden;
}

.list-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.list-item.expanded {
    border-color: rgba(255, 255, 255, 0.3);
}

.list-item--inactive {
    border-color: rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.025);
}

.list-item--inactive .list-item-title {
    color: var(--text-secondary);
}

.list-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-xl);
    cursor: default;
    gap: var(--spacing-lg);
    transition: all var(--transition-fast);
}

.list-item-header-left.js-expand-toggle {
    cursor: pointer;
}

.list-item-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.list-item-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex: 1;
}

.list-item-header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.expand-icon {
    font-size: 18px;
    color: var(--text-secondary);
    transition: transform var(--transition-fast);
    user-select: none;
}

.list-item.expanded .expand-icon {
    transform: rotate(90deg);
}

.list-item-content {
    display: none;
    padding: 0 var(--spacing-xl) var(--spacing-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.list-item.expanded .list-item-content {
    display: block;
}

.list-item-title {
    font-size: 18px;
    font-weight: 700;
    color: #60a5fa;
}

.list-item-title--account {
    color: #10b981;
}

.list-item-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}

.list-item-info {
    padding: var(--spacing-sm) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.info-row {
    display: flex;
    gap: var(--spacing-sm);
    padding: 2px 0;
    align-items: baseline;
    flex-wrap: wrap;
}

.info-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-width: 80px;
}

.info-value {
    font-size: 13px;
    color: var(--text-primary);
}

.status-label {
    font-size: 13px;
    font-weight: 600;
    color: #34d399;
}

.status-label--inactive {
    color: #f87171;
}

/* Relationships */
.relationships-list {
    margin-top: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.relationships-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
}

.relationship-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.relationship-row:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.relationship-row-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
}

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

.relationship-separator {
    margin: 0 8px;
}

.role-badge-margin {
    margin-right: 8px;
}

.add-relationship-btn-top {
    margin-bottom: var(--spacing-xl);
}

/* Projects */
.projects-list {
    margin-top: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.project-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.project-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.project-item-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
}

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

.add-project-btn {
    margin-top: var(--spacing-md);
    width: 100%;
}

/* User Avatar */
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.user-email-secondary {
    color: var(--text-secondary);
    font-size: 12px;
}

/* ============================================
   LOCATION MANAGER COMPONENTS
   ============================================ */

/* Autocomplete Dropdowns */
.autocomplete-dropdown,
.location-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: var(--radius-lg);
    margin-top: var(--spacing-xs);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.autocomplete-item,
.location-search-item {
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    color: #f1f5f9;
}

.autocomplete-item:last-child,
.location-search-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover,
.location-search-item:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #ffffff;
}

.autocomplete-wrapper {
    position: relative;
}

.metadata-upc-search-group .autocomplete-wrapper {
    overflow: visible;
}
.metadata-upc-search-group .autocomplete-dropdown {
    z-index: 1100;
}

.autocomplete-dropdown-item {
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    color: #f1f5f9;
}
.autocomplete-dropdown-item:last-child {
    border-bottom: none;
}
.autocomplete-dropdown-item:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #ffffff;
}
.autocomplete-dropdown-item--empty {
    color: #94a3b8;
    cursor: default;
}
.autocomplete-dropdown-barcode {
    font-size: 12px;
    color: #94a3b8;
    margin-left: var(--spacing-sm);
}

.location-search-name {
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: var(--spacing-xs);
}

.location-search-address {
    font-size: 12px;
    color: #cbd5e1;
}

.location-search-distance {
    font-size: 11px;
    color: #94a3b8;
    margin-top: var(--spacing-xs);
    font-style: italic;
}

.location-search-store-number {
    font-size: 11px;
    color: #60a5fa;
    margin-top: var(--spacing-xs);
    font-weight: 600;
}

/* Highlight matching store numbers */
.location-search-item--match {
    background: rgba(34, 197, 94, 0.15);
    border-left: 3px solid #22c55e;
}

.location-search-item--match:hover {
    background: rgba(34, 197, 94, 0.25);
}

.store-number--match {
    color: #22c55e;
    font-weight: 700;
}

.form-group {
    position: relative;
}

/* Duration modal: one line — Duration: Switch Infinite | Input (5 digits) */
.form-group--row.form-group--duration-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}
.form-group--duration-inline .form-label--inline {
    margin-bottom: 0;
    margin-right: 0;
    flex-shrink: 0;
}
.form-group--duration-inline .duration-seconds-inline {
    display: inline-flex;
    flex-shrink: 0;
}
.form-group--duration-inline .form-input--duration-secs {
    width: 5em;
    min-width: 4em;
    text-align: right;
}

/* Coordinates */
.form-group--coordinates {
    margin-top: var(--spacing-lg);
}

.coordinates-row {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-end;
}

.coordinate-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.coordinate-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.coordinate-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
    font-size: 13px;
    padding: var(--spacing-sm) var(--spacing-md);
}

.coordinate-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, 0.08);
}

.coordinate-input[readonly] {
    cursor: default;
    opacity: 0.9;
}

.coordinate-value {
    font-size: 13px;
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
    background: rgba(255, 255, 255, 0.05);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-glass-dark);
}

/* Field Status Messages */
.field-status {
    font-size: 11px;
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-top: var(--spacing-xs);
    border-radius: var(--radius-md);
    font-weight: 500;
}

.field-status--success {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.field-status--warning {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.field-status--error {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Container Status Messages */
.container-status {
    font-size: 12px;
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 500;
}

.container-status--success {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.container-status--warning {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

/* Auto-fill Summary */
.auto-fill-summary {
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 500;
    border: 2px solid;
}

.auto-fill-summary--success {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.4);
}

.auto-fill-summary--info {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.4);
}

.auto-fill-summary--warning {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.4);
}

/* Operation Hours */
.hours-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.hours-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.hours-day {
    min-width: 100px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
}

.hours-time {
    flex: 0 0 auto;
    width: 120px;
}

.hours-separator {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0 var(--spacing-xs);
}

/* Location Modal Styles */
.modal--location {
    max-width: 700px;
    width: 95%;
}

.modal--location .modal__body {
    max-height: 75vh;
    overflow-y: auto;
}

.location-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.form-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
}

.form-section__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--spacing-lg) 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

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

.location-form .form-group {
    margin-bottom: var(--spacing-lg);
}

.location-form .form-group:last-child {
    margin-bottom: 0;
}

.location-form .form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.location-form .form-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.location-form .form-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.location-form .form-input::placeholder {
    color: var(--text-muted);
    font-size: 13px;
}

.location-form .form-select {
    appearance: none;
    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='%239ca3af' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    padding-right: var(--spacing-2xl);
    cursor: pointer;
}

.form-hint {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

.input-with-button {
    display: flex;
    gap: var(--spacing-sm);
}

.input-with-button .form-input {
    flex: 1;
}

.input-with-button .btn--sm {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 12px;
    white-space: nowrap;
}

.location-form .hours-grid {
    gap: var(--spacing-sm);
    margin-top: 0;
}

.location-form .hours-row {
    display: grid;
    grid-template-columns: 90px 1fr auto 1fr;
    gap: var(--spacing-sm);
    align-items: center;
}

.location-form .hours-day {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: auto;
}

.location-form .hours-time {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 13px;
}

.location-form .hours-separator {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

.location-form .modal__footer {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-color);
}

/* Lookup button loading state */
#lookupZipBtn.loading {
    opacity: 0.7;
    pointer-events: none;
}

#lookupZipBtn.loading::after {
    content: '...';
}

/* Location Users Modal */
.modal--users {
    max-width: 800px;
    width: 95%;
}

.modal--users .modal__body {
    padding: var(--spacing-lg);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.users-modal-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(96, 165, 250, 0.1);
    border-radius: var(--radius-md);
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.users-modal-info p {
    margin: 0;
    font-size: 14px;
    color: var(--text-primary);
}

.users-modal-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-primary);
    padding: var(--spacing-xs) var(--spacing-md);
    background: rgba(96, 165, 250, 0.15);
    border-radius: var(--radius-full);
}

.users-search-bar {
    flex-shrink: 0;
}

.users-search-bar .form-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 14px;
}

.users-table-container {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    min-height: 200px;
    max-height: 400px;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
}

.users-table thead {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 1;
}

.users-table th {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.users-table__checkbox {
    width: 40px;
    text-align: center !important;
}

.users-table__checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.users-table__sortable {
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
}

.users-table__sortable:hover {
    background: rgba(255, 255, 255, 0.05);
}

.users-table__sortable .sort-icon {
    margin-left: var(--spacing-xs);
    opacity: 0.5;
    font-size: 12px;
}

/* When sorted - hide double arrow, show single arrow */
.users-table__sortable.sorted-asc .sort-icon,
.users-table__sortable.sorted-desc .sort-icon {
    font-size: 0; /* Hide the ↕ text */
}

.users-table__sortable.sorted-asc .sort-icon::before {
    content: '↑';
    font-size: 12px;
    opacity: 1;
}

.users-table__sortable.sorted-desc .sort-icon::before {
    content: '↓';
    font-size: 12px;
    opacity: 1;
}

.users-table tbody tr {
    transition: background var(--transition-fast);
}

.users-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.users-table tbody tr.selected {
    background: rgba(96, 165, 250, 0.1);
}

.users-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.users-table td:first-child {
    text-align: center;
}

.users-table .user-email {
    color: var(--text-secondary);
    font-size: 13px;
}

.users-table .empty-state {
    text-align: center;
    padding: var(--spacing-2xl) !important;
    color: var(--text-muted);
}

.modal--users .modal__footer {
    flex-shrink: 0;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    margin-top: 0;
}

/* Users button in actions column */
.btn--users {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.btn--users:hover {
    background: rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.5);
}

/* Locations Table Column Widths */
/* Based on longest names research:
   - State: "Massachusetts" / "North Carolina" = 14 chars
   - City: "Salt Lake City" / "San Francisco" = 14 chars
   - Country: "United States" = 13 chars
*/
.locations-table {
    table-layout: fixed;
    width: 100%;
}

.locations-table .col-retailer {
    width: 110px;
}

.locations-table .col-country {
    width: 130px;
}

.locations-table .col-state {
    width: 95px;
}

.locations-table .col-city {
    width: 180px;
}

.locations-table .col-zipcode {
    width: 105px;
}

.locations-table .col-name {
    width: auto;
    min-width: 120px;
}

.locations-table .col-id {
    width: 105px;
}

.locations-table .col-players {
    width: 115px;
    text-align: center;
    overflow: visible;
    text-overflow: clip;
}

.locations-table .col-users {
    width: 75px;
    min-width: 75px;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

/* Player stats in location table - compact version */
.location-player-stats {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.location-player-stats .stat-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.location-player-stats .stat-badge--blue {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #60a5fa;
}

.location-player-stats .stat-badge--green {
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #4ade80;
}

.location-player-stats .stat-badge--red {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.location-player-stats .stat-badge--orange {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}

.locations-table .col-actions {
    width: 320px;
}

.locations-table td,
.locations-table th {
    padding: 10px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sortable headers for locations table */
.locations-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.locations-table th.sortable:hover {
    background: rgba(255, 255, 255, 0.05);
}

.locations-table th.sortable .sort-icon {
    margin-left: var(--spacing-xs);
    opacity: 0.5;
    font-size: 12px;
}

/* When sorted - hide double arrow, show single arrow */
.locations-table th.sortable[data-sort-direction="asc"] .sort-icon,
.locations-table th.sortable[data-sort-direction="desc"] .sort-icon {
    font-size: 0; /* Hide the ↕ text */
}

.locations-table th.sortable[data-sort-direction="asc"] .sort-icon::before {
    content: "↑";
    font-size: 12px;
    opacity: 1;
}

.locations-table th.sortable[data-sort-direction="desc"] .sort-icon::before {
    content: "↓";
    font-size: 12px;
    opacity: 1;
}

.locations-table td.col-users {
    text-align: center;
}

.locations-table td.col-actions .action-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
}

.user-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-full);
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.user-count-badge.empty {
    background: rgba(100, 116, 139, 0.15);
    color: var(--text-muted);
}

/* Expandable Location Rows */
.location-row {
    cursor: pointer;
    transition: background var(--transition-fast);
}

.location-row:hover {
    background: rgba(255, 255, 255, 0.08);
}

.location-row-main {
    position: relative;
}

.location-row-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    user-select: none;
}

.location-expand-icon {
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform var(--transition-fast);
    display: inline-block;
    width: 12px;
    text-align: center;
}

.location-row.expanded .location-expand-icon {
    transform: rotate(0deg);
}

.location-row-expanded {
    background: rgba(255, 255, 255, 0.03);
}

.location-expanded-content {
    padding: var(--spacing-xl) !important;
}

.location-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.location-detail-section {
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-glass-dark);
}

.location-detail-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-md) 0;
}

.location-detail-value {
    font-size: 14px;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.6;
}

.location-hours-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.location-hour-item {
    font-size: 13px;
    color: var(--text-primary);
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

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

/* Assigned Users in Expanded Row */
.assigned-users-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.assigned-users-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.assigned-user-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(30, 41, 59, 0.5);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.assigned-user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.assigned-user-email {
    font-size: 12px;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .assigned-users-container {
        grid-template-columns: 1fr;
    }
}

.location-detail-divider {
    height: 1px;
    background: var(--border-glass-dark);
    margin: var(--spacing-lg) 0;
}

.location-coordinates {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

/* Map Modal */
.modal--map {
    max-width: 800px;
    width: 95%;
}

.modal__body--map {
    padding: var(--spacing-xl);
}

#locationMap {
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-glass-dark);
}

/* Bulk Upload */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.radio-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.radio-label input[type="radio"] {
    cursor: pointer;
}

.bulk-upload-progress {
    margin: var(--spacing-lg) 0;
}

.progress-bar {
    width: 100%;
    height: 24px;
    background: var(--bg-glass-dark);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
}

.progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.bulk-upload-errors {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md);
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: var(--radius-md);
    max-height: 300px;
    overflow-y: auto;
}

.bulk-upload-errors h3 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--error);
    font-size: 16px;
}

.bulk-upload-errors ul {
    margin: 0;
    padding-left: var(--spacing-lg);
    list-style-type: decimal;
}

.bulk-upload-errors li {
    margin: var(--spacing-xs) 0;
    color: var(--text-primary);
    font-size: 14px;
}

/* ============================================
   RESPONSIVE MEDIA QUERIES
   ============================================ */

@media (max-width: 1100px) {
    .project-stats {
        flex-wrap: wrap;
    }
}

@media (max-width: 1024px) {
    .matrix-table {
        font-size: 13px;
    }

    .matrix-table th,
    .matrix-table td {
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .asset-library-content {
        flex-direction: column;
        height: auto;
    }

    .folder-tree-sidebar {
        width: 100%;
        max-height: 200px;
    }

    .file-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .asset-library-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-right {
        flex-direction: column;
    }

    .page-header {
        flex-direction: column;
    }

    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .filters-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        width: 100%;
    }

    .filter-select,
    .search-input {
        width: 100%;
    }

    .matrix-table-container {
        overflow-x: auto;
    }

    .matrix-table {
        min-width: 800px;
    }

    .coordinates-row {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .pagination-container {
        padding: var(--spacing-md);
    }

    .pagination-controls {
        flex-direction: column;
        width: 100%;
    }

    .pagination-controls .btn {
        width: 100%;
    }

    .page-numbers {
        justify-content: center;
        width: 100%;
    }

    .page-number-btn {
        min-width: 36px;
        height: 36px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: var(--spacing-md);
    }

    .modal {
        width: 95%;
        max-height: 90vh;
    }
}

/* ============================================
   EXPERIENCES PAGES STYLES
   ============================================ */

/* List Header */
.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
}

.list-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.list-actions {
    display: flex;
    gap: var(--spacing-md);
}

/* Experiences Grid */
.experiences-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

/* Experience Card */
.experience-card {
    background: var(--bg-glass-dark);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-xl);
    padding: 16px;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.experience-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-glass);
}

.experience-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.experience-name {
    font-size: 16px;
    font-weight: 700;
    color: #60a5fa;
    margin-bottom: 0;
    cursor: pointer;
    transition: color 0.2s;
}

.experience-name:hover {
    color: #93c5fd;
}

/* Provisioning CSV experienceId (ExperienceCode) next to name */
.experience-provisioning-id {
    font-size: 0.75em;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
}

.experience-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.experience-card__publish-buttons {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 0;
    flex-shrink: 0;
}

.experience-card__publish-all-btn,
.experience-card__update-btn {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 10px;
    cursor: pointer;
}

.experience-card__publish-all-btn:disabled,
.experience-card__update-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.experience-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

/* Action buttons: just below Total size, same height as info boxes, full width */
.experience-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    width: 100%;
}

.experience-actions .btn-edit-view {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 10px;
    height: auto;
    line-height: 1.2;
}

/* Sections block: layer boxes only (no duplicate "Sections" title) */
.experience-sections-block {
    margin-top: 14px;
}

.experience-sections-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Same gap between section rows inside a layer as between layer boxes */
.experience-sections-layer {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.experience-sections-layer__title {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.experience-sections-layer__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 8px;
}

.experience-sections-layer__list .experience-section-row {
    margin: 0;
}

.experience-section-row {
    display: block;
    width: 100%;
}

/* Full-row link: name + SyncID (read-only); replaces separate Edit button */
.experience-section-row__link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 12px;
    color: var(--text-primary, #e5e7eb);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.experience-section-row__link:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
}

.experience-section-row__link--main {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.5);
    color: #ecfdf5;
}

.experience-section-row__link--main:hover {
    background: rgba(34, 197, 94, 0.28);
    border-color: rgba(34, 197, 94, 0.65);
}

.experience-section-row__name {
    font-weight: 500;
    line-height: 1.3;
    word-break: break-word;
    width: 100%;
}

.experience-section-row__sync {
    font-size: 11px;
    opacity: 0.88;
    color: rgba(255, 255, 255, 0.72);
}

.experience-section-row__link--main .experience-section-row__sync {
    color: rgba(236, 253, 245, 0.88);
}

.experience-section-row__sync-label {
    font-weight: 600;
    margin-right: 4px;
}

.experience-section-row__empty-text {
    display: block;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 12px;
    opacity: 0.7;
}

/* Stat Boxes */
.stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 12px;
}

.stat__label {
    font-size: 12px;
    opacity: 0.8;
}

.stat__value {
    font-size: 12px;
    font-weight: 600;
}

.stat--blue {
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.3);
}

.stat--green {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
}

.stat--red {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

.stat--yellow {
    background: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.3);
}

/* Edit/View Buttons */
.btn-edit-view {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-glass);
    background: var(--bg-glass);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.btn-edit-view:hover {
    background: var(--bg-glass-light);
}

.btn-edit-view--success {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
}

.btn-edit-view--success:hover {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%);
}

.btn-edit-view--info {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.btn-edit-view--info:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
}

.btn-edit-view--danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.btn-edit-view--danger:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 24px;
}

.breadcrumb-item {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.2s;
}

.breadcrumb-item:hover {
    color: rgba(255, 255, 255, 1);
}

.breadcrumb-item.active {
    color: white;
    font-weight: 700;
}

.breadcrumb-separator {
    color: rgba(255, 255, 255, 0.5);
    margin: 0 4px;
}

.breadcrumb-edit-btn {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
    transition: all 0.2s;
    white-space: nowrap;
    margin-left: 12px;
}

.breadcrumb-edit-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Breadcrumb Navigation - Button Style (like player stats boxes) */
.breadcrumb-nav--buttons {
    gap: 12px;
    font-size: 16px;
}

.breadcrumb-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(148, 163, 184, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: default;
}

.breadcrumb-btn__label {
    white-space: nowrap;
}

.breadcrumb-btn__edit {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    font-size: 11px;
    font-weight: 400;
    transition: all 0.2s;
    margin-left: 8px;
}

.breadcrumb-btn__edit:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.breadcrumb-btn--link {
    cursor: pointer;
}

.breadcrumb-btn--link:hover {
    background: rgba(148, 163, 184, 0.2);
    border-color: rgba(148, 163, 184, 0.5);
    color: white;
}

.breadcrumb-btn--active {
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.4);
    color: white;
    font-weight: 600;
}

/* Different colors for different levels */
.breadcrumb-btn--experiences {
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.3);
}

.breadcrumb-btn--experiences:hover {
    background: rgba(96, 165, 250, 0.25);
    border-color: rgba(96, 165, 250, 0.5);
}

.breadcrumb-btn--experience {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
}

.breadcrumb-btn--experience:hover {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.5);
}

.breadcrumb-btn--section {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
}

/* Breadcrumb - Interlocking chevron arrows (fixed-pixel arrow points) */
.breadcrumb-nav--arrows {
    --arrow-size: 18px;
    --arrow-height: 42px;
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 24px;
    font-size: 14px;
    list-style: none;
    padding: 0;
    margin-left: 0;
    border-radius: 10px;
    overflow: hidden;
}

.breadcrumb-arrow {
    display: inline-flex;
    align-items: center;
    padding: 0 calc(var(--arrow-size) + 12px) 0 calc(var(--arrow-size) + 14px);
    margin-left: calc(var(--arrow-size) * -0.45);
    height: var(--arrow-height);
    background: #2d4a6f;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    position: relative;
    cursor: default;
    clip-path: polygon(
        0 0,
        var(--arrow-size) 50%,
        0 100%,
        calc(100% - var(--arrow-size)) 100%,
        100% 50%,
        calc(100% - var(--arrow-size)) 0
    );
}

.breadcrumb-arrow:first-child {
    margin-left: 0;
    padding-left: 20px;
    clip-path: polygon(
        0 0,
        calc(100% - var(--arrow-size)) 0,
        100% 50%,
        calc(100% - var(--arrow-size)) 100%,
        0 100%
    );
}

.breadcrumb-arrow:last-child {
    clip-path: polygon(
        0 0,
        var(--arrow-size) 50%,
        0 100%,
        calc(100% - var(--arrow-size)) 100%,
        100% 50%,
        calc(100% - var(--arrow-size)) 0
    );
}

.breadcrumb-arrow:only-child {
    margin-left: 0;
    padding: 0 calc(var(--arrow-size) + 12px) 0 20px;
    clip-path: polygon(
        0 0,
        calc(100% - var(--arrow-size)) 0,
        100% 50%,
        calc(100% - var(--arrow-size)) 100%,
        0 100%
    );
}

/* Alternating subtle blues – close to background with slight contrast */
.breadcrumb-arrow:nth-child(odd)  { background: #2d4a6f; }
.breadcrumb-arrow:nth-child(even) { background: #3a5f85; }
.breadcrumb-arrow:only-child      { background: #2d4a6f; }

.breadcrumb-arrow--link {
    cursor: pointer;
}

.breadcrumb-arrow--link:hover {
    filter: brightness(1.12);
}

.breadcrumb-arrow__label {
    white-space: nowrap;
}

.breadcrumb-arrow__icon {
    opacity: 0.9;
}

.breadcrumb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.breadcrumb-row .breadcrumb-nav--arrows {
    margin-bottom: 0;
}

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

/* Responsive adjustments for breadcrumb buttons */
@media (max-width: 768px) {
    .breadcrumb-nav--buttons {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .breadcrumb-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .breadcrumb-btn__edit {
        padding: 3px 8px;
        font-size: 10px;
    }
}

@media (max-width: 768px) {
    .breadcrumb-nav--arrows {
        flex-wrap: wrap;
    }
    .breadcrumb-arrow {
        padding: 10px 14px 10px 18px;
        margin-left: -8px;
        font-size: 13px;
    }
    .breadcrumb-arrow:first-child { padding-left: 16px; }
    .breadcrumb-arrow:last-child { padding-right: 16px; }
}

/* Divider */
.divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 20px 0;
}

/* Section switcher (section-details: switch between sections) */
.section-switcher-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 4px;
    margin-bottom: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.section-switcher-divider {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    margin: 0 4px;
    user-select: none;
}

.section-switcher-btn {
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 8px;
    color: #93c5fd;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.15s, border-color 0.15s;
}

.section-switcher-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #bfdbfe;
}

.section-switcher-btn--current {
    background: rgba(147, 197, 253, 0.15);
    border-color: rgba(147, 197, 253, 0.35);
    color: #e0e7ff;
    cursor: default;
    font-weight: 500;
}

/* Section details page: three-box layout */
.section-details-box {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

/* Experience box: slightly different transparency to differentiate from section box */
.section-details-box--experience {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Horizontal dividers between rows inside boxes */
.section-details-box__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.section-details-box__row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.section-details-box--experience .section-details-box__row:first-child {
    padding-top: 0;
}

/* Tighter vertical spacing in experience box to match section box */
.section-details-box--experience .section-details-box__row {
    padding-bottom: 8px;
    margin-bottom: 8px;
}
.section-details-box--experience .section-details-box__row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* First row of buttons: horizontal gap, vertical spacing to match space below experience box (16px) */
.section-details-box__row--nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Section layers: no extra top padding so gap above L1 = gap below experience box (16px) */
.section-details-box--experience .section-layers {
    padding-top: 0;
    margin-top: 0;
    gap: 8px;
}
.section-details-box--experience .section-layers .section-details-box__row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.section-details-box--3 .section-settings-row + .section-settings-row {
    margin-top: 0;
}

/* Home button to the left of experience title */
.section-details-home-btn {
    display: inline-flex;
    align-items: center;
    margin-right: 14px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, rgba(255,255,255,0.7));
    text-decoration: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.section-details-home-btn:hover {
    color: var(--text-primary, #e5e7eb);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Light loading state when switching section (no full reload) */
.section-details-box--loading {
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.15s ease-out;
}

.section-details-page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #e5e7eb);
}

.section-details-page-title__suffix {
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    color: var(--text-secondary, rgba(255,255,255,0.7));
    margin-left: 10px;
}

.section-details-section-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #e5e7eb);
}

.section-details-box--3__title-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.section-details-box--3__title-row .section-details-page-title__suffix {
    margin-left: 0;
}

.section-nav-row,
.section-nav-row--top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 4px;
    padding: 0;
}

.section-nav-row--top {
    border-bottom: none;
}

.section-layers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section-layers--switching {
    pointer-events: none;
    opacity: 0.85;
}

.section-layer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.section-layer-label {
    font-size: 12px;
    color: var(--text-secondary, rgba(255,255,255,0.7));
    font-weight: 500;
    min-width: 56px;
}

.section-layer-badges {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.section-nav-actions-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 8px;
    align-self: stretch;
}

.section-nav-actions-col .section-nav-badge {
    width: 100%;
    height: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.section-nav-btn {
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 8px;
    color: #93c5fd;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.15s, border-color 0.15s;
    cursor: pointer;
    font-family: inherit;
}

a.section-nav-btn {
    display: inline-flex;
}

.section-nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #bfdbfe;
}

/* Delete buttons in nav: solid red, no gray override from .section-nav-btn */
.section-nav-btn.btn--danger {
    background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
    color: var(--text-primary, #fff);
    border-color: rgba(220, 38, 38, 0.6);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}
.section-nav-btn.btn--danger:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
    border-color: rgba(220, 38, 38, 0.8);
    color: var(--text-primary, #fff);
    transform: translateY(-1px);
}

.section-nav-divider {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    margin: 0 4px;
    user-select: none;
}

.section-details-publish-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.section-details-publish-buttons {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.section-details-publish-buttons .section-nav-btn {
    min-width: 0;
}

.section-nav-btn.btn--blue {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: var(--text-primary, #fff);
    border-color: rgba(37, 99, 235, 0.5);
}

.section-nav-btn.btn--blue:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: rgba(37, 99, 235, 0.7);
    color: var(--text-primary, #fff);
}

.section-details-publish-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.section-nav-btn.btn--orange {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    color: var(--text-primary, #fff);
    border-color: rgba(234, 88, 12, 0.5);
}

.section-nav-btn.btn--orange:hover {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-color: rgba(234, 88, 12, 0.7);
    color: var(--text-primary, #fff);
}

.section-nav-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    color: #93c5fd;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.15s, border-color 0.15s;
    min-width: 100px;
    min-height: 48px;
    justify-content: flex-start;
    flex-shrink: 0;
}

button.section-nav-badge {
    cursor: pointer;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.section-nav-badge:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #bfdbfe;
}

.section-nav-badge--current {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.5);
    color: #e0e7ff;
    cursor: default;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.4), 0 0 24px rgba(34, 197, 94, 0.2);
}
.section-nav-badge--current:hover {
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.5), 0 0 28px rgba(34, 197, 94, 0.25);
}

.section-nav-badge--add {
    border-style: dashed;
    cursor: pointer;
    opacity: 0.9;
}
.section-nav-badge--add:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}
.section-nav-badge--add:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.section-nav-badge--copy {
    border-style: dashed;
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.05);
    color: #93c5fd;
    cursor: pointer;
    opacity: 0.9;
}
.section-nav-badge--copy:hover {
    opacity: 1;
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.6);
}
.section-nav-badge--copy:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.section-nav-badge--link {
    border-style: dashed;
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.05);
    color: #86efac;
    cursor: pointer;
}
.section-nav-badge--link:hover {
    opacity: 1;
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.6);
}

.section-nav-badge__linked {
    display: block;
    font-size: 0.85em;
    color: rgba(134, 239, 172, 0.9);
    margin-top: 4px;
}

.linked-section-banner {
    margin: 0 0 12px 0;
    padding: 10px 14px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 6px;
    color: #86efac;
    font-size: 0.95rem;
}

.link-section-options .link-section-options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.link-section-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.link-section-option--always {
    color: var(--text-muted, rgba(255, 255, 255, 0.6));
}

.link-section-option--checkbox {
    cursor: pointer;
}

.link-section-option--checkbox input {
    margin-right: 4px;
}

.link-section-option__hint {
    font-size: 12px;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    margin-left: 4px;
}

/* Linked section: playlist toolbar + assets live in #sectionPlaylistArea (not inside #sectionDetailsBox) */
.section-playlist-area.linked-section-readonly .order-toggle-group {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

.section-playlist-area.linked-section-readonly .order-toggle-group .toggle-switch {
    cursor: not-allowed;
}

.section-playlist-area.linked-section-readonly .drag-handle {
    visibility: hidden;
    pointer-events: none;
    cursor: not-allowed;
    user-select: none;
}

.section-nav-badge__name {
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
}

.section-nav-badge__meta {
    font-size: 11px;
    opacity: 0.85;
}

.section-nav-badge__campaign {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-primary, #7dd3fc);
    background: rgba(125, 211, 252, 0.12);
    border-radius: 4px;
    vertical-align: middle;
}

.section-nav-badge__meta-main-yes {
    font-weight: bold;
}

/* Section settings bar (SyncID, Main, When asset/playlist ends) */
.section-settings-bar {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.section-settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.section-settings-row + .section-settings-row {
    margin-top: 10px;
}

.section-settings-label {
    font-size: 13px;
    color: var(--text-secondary, rgba(255,255,255,0.7));
}

.section-settings-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #e5e7eb);
}

.section-settings-vsep {
    color: rgba(255, 255, 255, 0.35);
    margin: 0 8px;
    user-select: none;
}

.section-settings-select {
    min-width: 80px;
}

.section-settings-sync-input {
    width: 4rem;
    min-width: 3.5rem;
    text-align: center;
}

/* Section-details Sync ID: campaign-style steppers, same row height as form-input--sm (not taller) */
.hour-input-wrap--section-sync {
    max-width: 7.25rem;
    width: 7.25rem;
    min-height: 0;
    align-self: center;
}
.hour-input-wrap--section-sync .hour-input.section-settings-sync-input {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    font-size: 12px;
    line-height: 1.25;
    padding: var(--spacing-xs) var(--spacing-xs);
    text-align: center;
}
.hour-input-wrap--section-sync .hour-input-btns {
    width: 1.375rem;
}
.hour-input-wrap--section-sync .hour-input-btn {
    padding: 0 2px;
    min-height: 0;
}
.hour-input-wrap--section-sync .hour-input-btn--up::after {
    border-left-width: 3px;
    border-right-width: 3px;
    border-bottom-width: 4px;
}
.hour-input-wrap--section-sync .hour-input-btn--down::after {
    border-left-width: 3px;
    border-right-width: 3px;
    border-top-width: 4px;
}
.hour-input-wrap--section-sync:has(.hour-input:disabled) .hour-input-btn {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

.section-settings-sync-hint {
    margin-left: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.playlist-end-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.playlist-end-inline.playback-behaviour-row--disabled {
    opacity: 0.5;
    pointer-events: none;
}

.section-actions-bar--short .actions-divider {
    height: 24px;
}

/* Playlist toolbar: below box 3, closer to asset list */
.section-playlist-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 12px;
    padding: 8px 0;
}

.section-playlist-toolbar__right {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.playlist-toolbar-select-block,
.playlist-toolbar-order-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Linked folders row (section folder link) – dark theme to match section details */
.linked-folders-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.linked-folders-label {
    font-size: 0.9rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.8));
}
.linked-folders-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.linked-folder-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-glass, rgba(255, 255, 255, 0.1));
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary, #ffffff);
}
.linked-folder-name {
    font-size: 0.9rem;
    color: inherit;
}
.linked-folder-unlink {
    padding: 2px 8px;
    font-size: 0.85rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.8));
}
.linked-folder-unlink:hover {
    color: var(--text-primary, #ffffff);
}

.btn--icon-sm .select-mode-icon-img,
.btn.btn--icon-sm img {
    width: 18px;
    height: 18px;
}

.btn--icon-sm {
    padding: 4px 8px;
    min-width: auto;
}

/* Experience/Section Actions Bar */
.experience-actions-bar,
.section-actions-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.experience-actions-left,
.section-actions-left {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* Vertical divider between action groups */
.actions-divider {
    width: 1px;
    height: 32px;
    background: var(--border-glass);
    margin: 0 var(--spacing-sm);
}

.asset-count-label {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 0 var(--spacing-xs);
}

.asset-count-label strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Playlist block: toolbar + linked folders + asset list (linked-section-readonly toggled in JS) */
.section-playlist-area {
    display: block;
}

/* Order toggle group */
.order-toggle-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.order-toggle-label {
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.order-sort-select {
    min-width: 150px;
}

/* Playback behaviour (section-details) */
.playback-behaviour-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.playback-behaviour-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.playback-behaviour-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.playback-behaviour-label {
    font-size: 14px;
    color: var(--text-secondary);
}
.playback-behaviour-hint {
    font-size: 11px;
    color: var(--color-text-muted, #94a3b8);
    font-style: italic;
}

.playback-behaviour-target .form-select {
    min-width: 200px;
}

/* When "When asset ends" is Go to Section, "When playlist ends" row is disabled */
.playback-behaviour-row--disabled {
    opacity: 0.5;
    pointer-events: none;
}

.playback-behaviour-row--disabled .form-select {
    cursor: not-allowed;
}

/* Create Experience modal - larger and taller */
.modal--create-experience {
    max-width: 960px;
    width: 92%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.modal--create-experience .modal__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Create Experience modal - layout picker */
#createExperienceModalOverlay .create-experience-layouts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    max-height: 380px;
    overflow-y: auto;
    padding: 6px 0;
}

.create-experience-layout-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 48px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.create-experience-layout-card__preview {
    margin-bottom: 8px;
    flex-shrink: 0;
}

.create-experience-preview {
    position: relative;
    background: #1a2332;
    border: 1px solid var(--color-border, rgba(255,255,255,0.12));
    border-radius: 4px;
    overflow: hidden;
}

.create-experience-preview--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 70px;
    font-size: 11px;
    color: var(--text-secondary);
}

.create-experience-layout-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

.create-experience-layout-card.selected {
    border-color: var(--color-primary, #4a90d9);
    background: rgba(74, 144, 217, 0.15);
}

/* Template name: smaller font, up to 2 lines */
.create-experience-layout-card__name {
    font-size: 11px;
    line-height: 1.25;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.experience-actions-right,
.section-actions-right {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Sections Grid */
.sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    align-items: start;
    grid-auto-flow: row dense;
}

/* Section Card */
.section-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s;
    cursor: pointer;
    height: fit-content;
    align-self: start;
}

.section-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.section-card.collapsed .section-info {
    display: none !important;
}

.section-card.collapsed .section-header {
    gap: 0 !important;
    margin-bottom: 0;
}

.section-card.collapsed .section-name {
    margin-bottom: 12px;
}

.section-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.section-name {
    font-size: 18px;
    font-weight: 700;
    color: #60a5fa;
    margin-bottom: 0;
}

.section-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.section-actions .btn-edit-view {
    padding: 4px 10px;
    font-size: 11px;
}

/* Map Info Stat */
.map-info-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 12px;
}

.map-info-label {
    font-size: 12px;
    opacity: 0.8;
}

.map-info-value {
    font-size: 12px;
    font-weight: 400;
}

/* SyncID Color Styling */
.map-info-stat[data-syncid="off"] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.map-info-stat[data-syncid="1"] {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
}

.map-info-stat[data-syncid="2"] {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

.map-info-stat[data-syncid="3"] {
    background: rgba(249, 115, 22, 0.15);
    border-color: rgba(249, 115, 22, 0.3);
}

.map-info-stat[data-syncid="4"] {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.3);
}

.map-info-stat[data-syncid="5"] {
    background: rgba(236, 72, 153, 0.15);
    border-color: rgba(236, 72, 153, 0.3);
}

.map-info-stat[data-syncid="6"] {
    background: rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.3);
}

/* SyncID Select */
.syncid-select {
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 400;
    font-family: inherit;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    min-width: 50px;
}

.syncid-select:hover {
    background: rgba(255, 255, 255, 0.1);
}

.syncid-select:focus {
    background: rgba(255, 255, 255, 0.15);
}

.syncid-select option {
    background: #1e293b;
    color: #e2e8f0;
    padding: 4px;
}

/* Checkbox Toggle */
.checkbox-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

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

.checkbox-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.2);
    transition: 0.3s;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.checkbox-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 2px;
    background: white;
    transition: 0.3s;
    border-radius: 50%;
}

.checkbox-toggle input:checked + .checkbox-toggle-slider {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    border-color: transparent;
}

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

/* Triggers List */
.triggers-list-section {
    margin-bottom: 24px;
}

.triggers-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.triggers-list-title {
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.triggers-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.trigger-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}

.trigger-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.trigger-info {
    flex: 1;
}

.trigger-name {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
}

.trigger-details {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.trigger-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
    padding-right: 4px;
}

.btn-trigger-action {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-trigger-action:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-trigger-action.btn-edit {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.3);
}

.btn-trigger-action.btn-edit:hover {
    background: rgba(96, 165, 250, 0.3);
}

.btn-trigger-action.btn-delete {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
}

.btn-trigger-action.btn-delete:hover {
    background: rgba(239, 68, 68, 0.3);
}

.btn-trigger-action.btn-duplicate {
    background: rgba(156, 163, 175, 0.2);
    border-color: rgba(156, 163, 175, 0.3);
}

.btn-trigger-action.btn-duplicate:hover {
    background: rgba(156, 163, 175, 0.3);
}

.empty-triggers {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* Trigger Form */
.trigger-form-section {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 24px;
    margin-top: 24px;
}

.trigger-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.trigger-form-title {
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.trigger-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.conditional-field {
    display: none;
}

.conditional-field.active {
    display: block;
}

/* Range Slider */
.range-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.range-slider {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #10b981;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #10b981;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.range-value {
    min-width: 50px;
    text-align: center;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: white;
}

/* Log Sort Controls */
.log-sort-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-glass);
}

.log-sort-controls span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.log-sort-controls .btn.active {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--accent-blue);
}

/* Log Entries */
.log-entries {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.log-entry {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid var(--accent-blue);
}

.log-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.log-time {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    white-space: nowrap;
}

.log-user {
    color: var(--accent-blue);
    font-size: 12px;
    font-weight: 500;
}

.log-action-type {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.log-description {
    color: var(--text-primary);
    font-size: 14px;
}

.log-action {
    color: var(--text-primary);
    font-size: 14px;
}

/* Assets List */
.assets-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

/* Asset Item */
.asset-item {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    transition: all 0.2s ease;
    cursor: default;
}

.asset-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.asset-item.dragging {
    opacity: 0.4;
    transform: scale(0.98);
    border: 2px dashed rgba(96, 165, 250, 0.5);
    background: rgba(96, 165, 250, 0.05);
}

.asset-item.drag-over {
    transition: all 0.2s ease;
}

.asset-item.drag-over-top {
    margin-top: 16px;
}

.asset-item.drag-over-top::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 6px;
    background: #ef4444;
    border-radius: 3px;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6), 0 0 4px rgba(239, 68, 68, 0.8);
    animation: pulse-red 1s ease-in-out infinite;
}

.asset-item.drag-over-bottom {
    margin-bottom: 16px;
}

.asset-item.drag-over-bottom::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 6px;
    background: #ef4444;
    border-radius: 3px;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6), 0 0 4px rgba(239, 68, 68, 0.8);
    animation: pulse-red 1s ease-in-out infinite;
}

@keyframes pulse-red {
    0%, 100% {
        opacity: 1;
        transform: scaleX(1);
    }
    50% {
        opacity: 0.8;
        transform: scaleX(1.02);
    }
}

/* Clickable thumbnail */
.asset-thumbnail--clickable {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.asset-thumbnail--clickable:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Asset Item Header */
.asset-item-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    cursor: pointer;
}

/* Drag Handle */
.drag-handle {
    cursor: grab;
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    user-select: none;
    width: 28px;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}

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

.drag-handle:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Asset Thumbnail */
.asset-thumbnail {
    width: 80px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    display: none;
}

.asset-item.expanded .asset-thumbnail {
    display: block;
    width: 200px;
    height: auto;
    min-height: 120px;
}

/* When expanded: align items at top and hide drag handle */
.asset-item.expanded .asset-item-header {
    align-items: flex-start;
}

.asset-item.expanded .drag-handle {
    display: none;
}

/* When expanded in select mode: move checkbox below thumbnail */
.asset-item.expanded .asset-checkbox {
    top: 100px;
    transform: none;
}

/* ============================================
   Select Mode Styles
   ============================================ */

/* Select Mode Button */
.btn--select-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    min-width: auto;
}

.btn--select-mode.active {
    background: transparent;
}

.select-mode-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Asset Checkbox (hidden by default) */
.asset-checkbox {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 8px;
    width: 36px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 5;
}

.asset-checkbox__mark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.asset-select-checkbox {
    display: none;
}

.asset-select-checkbox:checked + .asset-checkbox__mark {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.asset-select-checkbox:checked + .asset-checkbox__mark::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* Show checkbox when in select mode */
.assets-list.select-mode .asset-checkbox {
    opacity: 1;
    pointer-events: auto;
}

/* Hide drag handle when in select mode */
.assets-list.select-mode .drag-handle {
    opacity: 0;
    pointer-events: none;
}

/* Hide drag handle when in auto sort mode (keep space) */
.assets-list.auto-sort-mode .drag-handle {
    visibility: hidden;
    pointer-events: none;
}

/* Bulk Actions Toolbar */
.bulk-actions-toolbar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
    background: #1e293b;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 100;
    animation: slideUp 0.2s ease;
}

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

.bulk-actions-toolbar__info {
    color: var(--text-primary);
    font-weight: 600;
    padding-right: 16px;
    border-right: 1px solid var(--border-color);
    white-space: nowrap;
}

.bulk-actions-toolbar__info span {
    color: var(--accent-primary);
    font-size: 18px;
}

.bulk-actions-toolbar__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bulk-actions-toolbar .btn--sm {
    padding: 8px 12px;
    font-size: 12px;
}

.bulk-actions-toolbar .btn--xs {
    padding: 4px 10px;
    font-size: 11px;
    margin-left: 10px;
}

.bulk-actions-toolbar__info {
    display: flex;
    align-items: center;
}

.bulk-actions-toolbar .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Warning button style */
.btn--warning {
    background: #f59e0b;
    color: #1a1a1a;
    border: none;
}

.btn--warning:hover:not(:disabled) {
    background: #d97706;
}

/* Asset Header Details */
.asset-header-details-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.asset-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 1;
    width: 100%;
}

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

.asset-name {
    font-size: 14px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

/* Collapsed row: Duration | Asset name (with vertical dividers); drag handle is before this */
.asset-header-collapsed-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.asset-item.expanded .asset-header-collapsed-row {
    display: none;
}

.asset-header-divider {
    color: var(--color-text-muted, #94a3b8);
    font-size: 12px;
    font-weight: 400;
    flex-shrink: 0;
}
.asset-item.expanded .asset-header-divider--collapsed-only {
    display: none;
}

.asset-name-text {
    font-size: 14px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.asset-name--expanded-only {
    display: none;
}
.asset-item.expanded .asset-name--expanded-only {
    display: block;
}

.asset-header-duration {
    font-size: 12px;
    color: var(--color-text-muted, #94a3b8);
    margin-top: 0;
    line-height: 1.2;
    flex-shrink: 0;
}
/* When expanded, show duration only in the details section */
.asset-item.expanded .asset-header-duration--collapsed-only {
    display: none;
}

/* Website: duration badge and Edit button on same line, same height */
.asset-header-duration-row.asset-header-duration-row--website {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.asset-header-duration-row--website .asset-header-duration-badge {
    font-size: 13px;
    color: var(--color-text-muted, #94a3b8);
    line-height: 1.2;
}
.asset-header-duration-row--website .asset-duration-edit-btn {
    flex-shrink: 0;
}

/* Stat row with duration + edit: keep same width as other stats; edit button doesn't stretch row */
.stat--duration-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
}
.stat--duration-row .stat__label {
    flex-shrink: 0;
}
.stat--duration-row .stat__value--fixed {
    flex: 1;
    min-width: 0;
    max-width: 5em;
}
.stat--duration-row .asset-duration-edit-btn {
    flex-shrink: 0;
}

/* Website: File column + Edit button in a row */
.asset-info-website-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.asset-info-website-row > .asset-duration-edit-btn {
    margin-top: 24px;
    flex-shrink: 0;
}

/* Website duration Edit button: smaller height */
.asset-duration-edit-btn {
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.2;
    min-height: unset;
}

/* Column titles in asset details */
.asset-details-column__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted, #94a3b8);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* 3-column layout for asset details (File | Video | Audio) */
.asset-details-row--three-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-md, 16px);
    align-items: start;
}
@media (max-width: 768px) {
    .asset-details-row--three-col {
        grid-template-columns: 1fr;
    }
}

/* Legacy: Stat row with inline edit button (e.g. duration for websites) */
.stat--with-edit {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.stat--with-edit .asset-duration-edit-btn {
    margin-left: 4px;
}

/* Asset Type Badge */
.asset-type-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    margin-right: 6px;
    line-height: 1.2;
}

.asset-type-badge--video {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.asset-type-badge--image {
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #86efac;
}

.asset-type-badge--website {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

/* Asset Actions Row */
.asset-actions-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Asset Button - compact for section-details row */
.asset-btn {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    transition: all 0.2s;
    white-space: nowrap;
}

.asset-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.asset-btn:disabled,
.asset-btn[disabled] {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none;
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
}

.asset-btn:disabled:hover,
.asset-btn[disabled]:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: none;
}

.asset-btn--danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.asset-btn--danger:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
}

.asset-from-folder-hint {
    font-size: 0.75rem;
    color: var(--muted-text, #94a3b8);
    font-style: italic;
}

/* Smaller badges on compact asset row buttons */
.asset-actions-row .asset-btn .btn-badge {
    top: -4px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    font-size: 9px;
    line-height: 14px;
    border-radius: 7px;
}

/* Asset Info Actions Container - Expanded Only */
.asset-info-actions-container {
    display: none;
}

.asset-item.expanded .asset-info-actions-container {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    align-items: flex-start;
    justify-content: space-between;
}

/* Asset info: shrink to content, don't hog extra space */
.asset-info-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.asset-info-actions-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    align-self: stretch;
}

/* Asset Details Row */
.asset-details-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* 3-column grid sized to content: File | Video | Audio */
.asset-details-row.asset-details-row--three-col {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 24px;
    align-items: start;
}

.asset-details-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
    white-space: nowrap;
}
.asset-details-column .stat {
    gap: 12px;
}
@media (max-width: 768px) {
    .asset-details-row.asset-details-row--three-col {
        grid-template-columns: 1fr;
    }
}

/* Actions: takes 2 parts so start+end each equal 1 part (matching schedule) */
.asset-actions-wrapper {
    flex: 2 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.asset-actions-columns {
    display: flex;
    gap: 12px;
    width: 100%;
}

/* Titles above Actions at start / end and Schedule (always shown) */
.asset-actions-column__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted, #94a3b8);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.asset-actions-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Asset Action Stats */
.asset-action-stat-start {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px;
    background: rgba(34, 197, 94, 0.25);
    border: 1px solid rgba(34, 197, 94, 0.7);
    border-radius: 10px;
    font-size: 12px;
    min-height: 28px;
    flex-wrap: wrap;
    gap: 4px;
}

.asset-action-stat-start .stat__label {
    color: rgba(34, 197, 94, 1);
    font-weight: 500;
}

.asset-action-stat-start .stat__value {
    color: rgba(34, 197, 94, 1);
    font-weight: 600;
}

.asset-action-stat-end {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px;
    background: rgba(249, 115, 22, 0.25);
    border: 1px solid rgba(249, 115, 22, 0.7);
    border-radius: 10px;
    font-size: 12px;
    min-height: 28px;
    flex-wrap: wrap;
    gap: 4px;
}

.asset-action-stat-end .stat__label {
    color: rgba(249, 115, 22, 1);
    font-weight: 500;
}

.asset-action-stat-end .stat__value {
    color: rgba(249, 115, 22, 1);
    font-weight: 600;
}

/* Asset Schedule Stats (blue) */
.asset-schedule-stat {
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.6);
    border-radius: 10px;
    font-size: 12px;
    gap: 2px;
}

.asset-schedule-stat .stat__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.asset-schedule-stat .stat__label {
    color: rgba(59, 130, 246, 1);
    font-weight: 600;
}

.asset-schedule-stat .stat__type {
    color: rgba(59, 130, 246, 0.9);
    font-weight: 500;
    font-size: 10px;
    padding: 1px 6px;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 4px;
}

.asset-schedule-stat .stat__details {
    color: rgba(59, 130, 246, 0.85);
    font-size: 11px;
    line-height: 1.4;
}

/* Schedule: equal share with each action column */
.asset-actions-column-schedule {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
}

/* Responsive Adjustments for Experiences */
@media (max-width: 768px) {
    .experiences-grid,
    .sections-grid {
        grid-template-columns: 1fr;
    }

    .experience-actions-bar,
    .section-actions-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .experience-actions-left,
    .experience-actions-right,
    .section-actions-left,
    .section-actions-right {
        justify-content: center;
    }

    .breadcrumb-nav {
        font-size: 18px;
        flex-wrap: wrap;
    }

    .asset-name-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .asset-actions-row {
        margin-top: 12px;
        flex-wrap: wrap;
    }

    .asset-item.expanded .asset-info-actions-container {
        flex-direction: column;
    }

    .asset-details-row {
        flex-direction: column;
    }

    .asset-actions-columns {
        flex-direction: column;
    }
}

/* ================================
   Triggers Modal Styles
   ================================ */

.triggers-modal {
    width: 95%;
    max-width: 1900px;
    height: 90vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.triggers-modal__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 16px 24px 24px;
}

.triggers-modal__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.triggers-modal__toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.triggers-modal__close {
    padding: 6px 10px;
    font-size: 18px;
    line-height: 1;
    min-width: auto;
}

/* Triggers Table: section grows to fill body, list uses all space */
.triggers-table-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.triggers-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.triggers-table-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin: 0;
}

.triggers-table-container {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.triggers-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Column widths: one row per trigger; Action and Parameters show grouped list */
.triggers-table .triggers-col-type {
    width: 8%;
    min-width: 88px;
    white-space: nowrap;
}

.triggers-table .triggers-col-trigger {
    width: 22%;
    min-width: 140px;
}

.triggers-table .triggers-col-actions-list {
    width: 52%;
    min-width: 320px;
    padding: 0 !important; /* padding applied to inner cells */
}

.triggers-table .triggers-col-actions {
    width: 18%;
    min-width: 220px;
    white-space: nowrap;
}

/* No alternating colors between trigger boxes - only between action rows inside each box */

.triggers-table td.triggers-col-trigger {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.triggers-table td.triggers-col-actions-list {
    white-space: normal;
    vertical-align: top;
    word-break: normal;
}

/* Action | Parameters (more space) | Tags - Parameters column next to Action with extra width */
.trigger-actions-cell-item {
    display: grid;
    grid-template-columns: 22% 58% 20%;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.trigger-actions-cell-item--header {
    padding: 12px 16px;
    border-bottom: none;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.6);
}

.trigger-actions-cell-item:last-child {
    border-bottom: none;
}

.trigger-actions-cell-action {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trigger-actions-cell-params {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trigger-actions-cell-tag-list {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.triggers-table td.trigger-actions {
    white-space: nowrap;
    vertical-align: middle;
}

.triggers-table .trigger-multi-action-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(16, 185, 129, 0.25);
    border-radius: 4px;
    white-space: nowrap;
}

.triggers-table thead {
    background: #1e293b;
    position: sticky;
    top: 0;
    z-index: 1;
}

.triggers-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.triggers-table th.triggers-col-actions-list {
    padding: 0;
}

.triggers-table th.sortable-header {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.triggers-table th.sortable-header:hover {
    color: rgba(255, 255, 255, 0.8);
}

.sort-arrows {
    display: inline-flex;
    flex-direction: column;
    margin-left: 6px;
    vertical-align: middle;
    gap: 0;
}

.sort-arrow {
    font-size: 8px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: color 0.2s ease;
}

.sort-arrow:hover {
    color: #10b981;
}

.sort-arrow.active {
    color: #10b981;
}

.triggers-table td {
    padding: 12px 16px;
    font-size: 14px;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.triggers-table td.triggers-col-actions-list {
    padding: 8px !important;
}

/* Action items (boxes) in triggers table – same style as trigger form list */
.triggers-table td.triggers-col-actions-list .action-item--readonly {
    cursor: default;
}

.triggers-table td.triggers-col-actions-list .action-item:first-child {
    margin-top: 0;
}

.triggers-table tbody tr:last-child td {
    border-bottom: none;
}

.triggers-table .trigger-type-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.triggers-table .trigger-type-badge--outform {
    background: rgba(249, 115, 22, 0.2);
    color: #fb923c;
}

.triggers-table .trigger-type-badge--serial {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
}

.triggers-table .trigger-type-badge--udp {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.triggers-table .trigger-type-badge--streamdeck {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.triggers-table .action-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.triggers-table .trigger-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
    padding-right: 4px;
}

.triggers-table td.trigger-actions {
    padding-right: 10px;
}

.triggers-table .trigger-actions .btn {
    padding: 6px 12px;
    font-size: 12px;
}

/* Trigger box: one box per trigger, actions as rows with alternating color */
.triggers-table .trigger-box-cell {
    padding: 0 !important;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.triggers-table .trigger-box {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    overflow: hidden;
    margin: 8px 12px;
    background: rgba(0, 0, 0, 0.15);
}
.triggers-table .trigger-box__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
    cursor: pointer;
    user-select: none;
}

.triggers-table .trigger-box--collapsed .trigger-box__header {
    border-bottom: none;
}

.triggers-table .trigger-box--collapsed .trigger-box__actions {
    display: none;
}
.triggers-table .trigger-box__trigger-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}
.triggers-table .trigger-box__header-actions {
    display: flex;
    gap: 6px;
}
.triggers-table .trigger-box__header-actions .btn {
    padding: 6px 12px;
    font-size: 12px;
}
.triggers-table .trigger-box__actions {
    display: flex;
    flex-direction: column;
}
.triggers-table .trigger-box__action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.triggers-table .trigger-box__action-row:last-child {
    border-bottom: none;
}
.triggers-table .trigger-box__action-row--alt0 {
    background: rgba(255, 255, 255, 0.02);
}
.triggers-table .trigger-box__action-row--alt1 {
    background: rgba(255, 255, 255, 0.06);
}
.triggers-table .trigger-box__action-row:hover {
    background: rgba(255, 255, 255, 0.11) !important;
}
.triggers-table .trigger-box__action-num {
    flex-shrink: 0;
    width: 24px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}
.triggers-table .trigger-box__action-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.triggers-table .trigger-box__action-name {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
}
.triggers-table .trigger-box__action-params {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
}
.triggers-table .trigger-box__action-delays {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-style: italic;
}
.triggers-table .trigger-box__action-tags {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}
.triggers-table .trigger-box__action-btns {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.triggers-table .trigger-box__action-btns .btn {
    padding: 5px 10px;
    font-size: 12px;
}

.triggers-table .trigger-group-label-row td {
    padding: 10px 14px 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    border-bottom: none;
}
.triggers-table .trigger-inherit-divider td {
    padding: 8px 12px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.triggers-table .trigger-inherit-divider__inner {
    display: flex;
    align-items: center;
    gap: 12px;
}
.triggers-table .trigger-inherit-divider__line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}
.triggers-table .trigger-inherit-divider__text {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.5);
}
.triggers-table .trigger-box--readonly {
    opacity: 0.92;
    border-color: rgba(120, 160, 255, 0.25);
}
.triggers-table .trigger-box__readonly-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(120, 160, 255, 0.15);
    color: rgba(200, 215, 255, 0.95);
}

/* Trigger modal: Add action row - dropdown and button same row, same height */
.trigger-add-action-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.trigger-add-action-row .trigger-add-action-select {
    flex: 1;
    min-width: 0;
}
.trigger-add-action-row .trigger-add-action-btn {
    flex-shrink: 0;
    align-self: stretch;
    min-height: 38px;
    padding: 8px 16px;
    font-size: 14px;
}

/* Trigger modal: multiple actions list */
.trigger-actions-list-container {
    min-height: 80px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    position: relative;
}

.trigger-actions-list-container.empty .trigger-actions-list-header,
.trigger-actions-list-container.empty .trigger-actions-list {
    display: none !important;
}

/* Drag | Action | Parameters/Description (more space) | Tags | Edit | Delete */
.trigger-actions-list-header {
    display: grid;
    grid-template-columns: 24px 0.9fr 2.6fr 0.9fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 6px 10px 8px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.trigger-actions-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.trigger-actions-list-item {
    display: grid;
    grid-template-columns: 24px 0.9fr 2.6fr 0.9fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.trigger-actions-list-item:last-child {
    margin-bottom: 0;
}

.trigger-actions-list-item.dragging {
    opacity: 0.5;
}

.trigger-actions-list-item.drag-over {
    border-color: rgba(59, 130, 246, 0.6);
    background: rgba(59, 130, 246, 0.1);
}

.trigger-actions-drag-handle {
    cursor: grab;
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    user-select: none;
}

.trigger-actions-drag-handle:active {
    cursor: grabbing;
}

.trigger-actions-cell-action {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    min-width: 0;
}

.trigger-actions-cell-description {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trigger-actions-cell-tags {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    min-width: 0;
}

.trigger-actions-edit-btn,
.trigger-actions-delete-btn {
    padding: 4px 10px;
    font-size: 12px;
}

.trigger-actions-empty {
    padding: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

.triggers-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.triggers-table + .triggers-empty-state {
    display: none;
}

.triggers-table:has(tbody:empty) + .triggers-empty-state {
    display: block;
}

.triggers-table:has(tbody:empty) {
    display: none;
}

/* Trigger Form */
.trigger-form-section {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 24px;
    margin-top: 0;
}

.trigger-form-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin: 0 0 20px 0;
}

.trigger-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.trigger-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.trigger-form-row--3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    align-items: start;
}

/* Ensure all columns in 3-col row have consistent structure */
.trigger-form-row--3col > .form-group {
    display: flex;
    flex-direction: column;
}

/* Key/Input column - ensure conditional fields align properly */
#keyInputColumn {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#keyInputColumn .conditional-field {
    display: none !important;
}

#keyInputColumn .conditional-field.active {
    display: flex !important;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Serial Config Row - hidden by default */
#serialConfigGroup {
    display: none !important;
}

#serialConfigGroup.active {
    display: flex !important;
}

.trigger-form-group {
    flex: 1;
    min-width: 200px;
}

.trigger-form-group--wide {
    flex: 2;
    min-width: 400px;
}

.trigger-form-group--full {
    flex: 1;
    width: 100%;
}

/* Serial Config Grid */
.serial-config-grid {
    display: grid;
    grid-template-columns: 1fr repeat(5, auto);
    gap: 8px;
    align-items: center;
}

.serial-config-grid .form-input {
    min-width: 120px;
}

.serial-config-grid .form-select {
    min-width: 100px;
}

/* UDP Config Grid */
.udp-config-grid {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 8px;
}

.udp-send-grid {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 8px;
}

/* Radio Group */
.radio-group {
    display: flex;
    gap: 20px;
    padding: 10px 0;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: white;
}

.radio-label input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #10b981;
}

/* Volume Slider */
.volume-slider-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.form-range {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #10b981;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #10b981;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.volume-input {
    width: 70px;
    text-align: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    -moz-appearance: textfield;
}

.volume-input::-webkit-outer-spin-button,
.volume-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.volume-input:focus {
    outline: none;
    border-color: #10b981;
    background: rgba(255, 255, 255, 0.15);
}

.volume-mode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.volume-mode-row .form-label {
    margin-bottom: 0;
}

.volume-wildcard-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 8px;
}

.wildcard-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-radius: 4px;
    font-family: monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.form-text-muted {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

/* Image Select Group */
.image-select-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.selected-image-preview {
    width: 72px;
    height: 72px;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.selected-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.selected-image-preview .no-image-text {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    padding: 4px;
}

/* Streamdeck Image Picker */
.streamdeck-image-info {
    padding: 12px 16px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #60a5fa;
}

.streamdeck-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
}

.streamdeck-image-item {
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.streamdeck-image-item:hover {
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.02);
}

.streamdeck-image-item.selected {
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}

.streamdeck-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.streamdeck-image-item .image-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.8);
    font-size: 10px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.streamdeck-image-item .image-size {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.8);
}

.streamdeck-image-item.size-match .image-size {
    background: rgba(16, 185, 129, 0.8);
    color: white;
}

.streamdeck-no-images {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* Conditional Field Active State */
.conditional-field.active {
    display: block;
}

/* Responsive for Triggers */
@media (max-width: 768px) {
    .triggers-modal {
        max-width: 100%;
        height: 95vh;
    }

    .serial-config-grid {
        grid-template-columns: 1fr 1fr;
    }

    .trigger-form-row {
        flex-direction: column;
    }

    .trigger-form-group,
    .trigger-form-group--wide {
        min-width: 100%;
    }

    .radio-group {
        flex-direction: column;
        gap: 12px;
    }
}

/* ============================================
   ACTIONS MODAL (Entry, Exit, Start, End)
   ============================================ */

.actions-modal {
    max-width: 900px;
    height: 90vh;
    max-height: 90vh;
}

.actions-modal__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    overflow-x: hidden;
    padding-bottom: 24px;
}

.modal__title-asset {
    font-size: 0.7em;
    font-weight: 400;
    color: var(--text-secondary);
    display: block;
    margin-top: 4px;
}

/* Actions List Section - fills remaining modal height */
.actions-list-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.actions-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.actions-list-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
}

.actions-list-container {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.actions-list {
    padding: 8px;
}

.actions-list-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
    font-style: italic;
    flex-shrink: 0;
}

.actions-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-style: italic;
}

/* Action Item (Draggable) */
.action-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: grab;
    transition: all 0.2s ease;
}

.action-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-primary);
}

.action-item:last-child {
    margin-bottom: 0;
}

.action-item.dragging {
    opacity: 0.5;
    background: rgba(16, 185, 129, 0.1);
    border: 2px dashed var(--color-primary);
}

.action-item.drag-over-top {
    margin-top: 24px;
    position: relative;
}

.action-item.drag-over-top::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 6px;
    background: #ef4444;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.action-item.drag-over-bottom {
    margin-bottom: 24px;
    position: relative;
}

.action-item.drag-over-bottom::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 0;
    right: 0;
    height: 6px;
    background: #ef4444;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.action-item__drag-handle {
    color: var(--text-muted);
    font-size: 18px;
    cursor: grab;
    user-select: none;
}

.action-item__content {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.action-item__action {
    font-weight: 500;
    color: var(--text-primary);
}

.action-item__params {
    font-size: 12px;
    color: var(--text-muted);
}

/* Action Settings modal (nested on top of Actions modal) */
.action-settings-modal-overlay.modal-overlay--active {
    display: flex;
}

.action-settings-modal {
    max-width: min(95vw, 1100px);
    width: 90%;
}

/* Target Asset combobox (type-to-search) in Add New Action modal */
.target-asset-combobox-wrapper {
    position: relative;
}

.target-asset-combobox-wrapper .target-asset-select-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    height: 0;
    width: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
}

.target-asset-combobox-wrapper .autocomplete-dropdown {
    max-height: 260px;
}

.target-asset-combobox-wrapper .autocomplete-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Trigger Settings modal (nested on top of Triggers modal) */
.trigger-settings-modal-overlay.modal-overlay--active {
    display: flex;
}

.trigger-settings-modal {
    width: 90%;
    max-width: 1600px;
}

/* Unified spacing: same gap between every title (label) and control in the trigger form */
.trigger-settings-modal .trigger-form .form-group,
.trigger-settings-modal .trigger-form .trigger-form-row--3col > .form-group,
.trigger-settings-modal .trigger-form #keyInputColumn.trigger-form-group,
.trigger-settings-modal .trigger-form #keyInputColumn .conditional-field.active,
.trigger-settings-modal .trigger-form #actionParamsRow .form-group,
.trigger-settings-modal .trigger-form .trigger-tags-row .form-group {
    gap: 14px;
}

.trigger-settings-modal .trigger-form .form-label {
    margin: 0 0 6px 0;
    display: block;
}

/* Align all three columns; Trigger (middle) column wider than Type and Action */
.trigger-settings-modal .trigger-form-row--3col {
    align-items: start;
    grid-template-columns: 1fr 2.5fr 1fr;
}

.trigger-settings-modal .trigger-form-row--3col > .form-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.trigger-settings-modal #keyInputColumn .conditional-field.active {
    display: flex !important;
    flex-direction: column;
}

/* Bigger UDP message input (messages can be long) */
.trigger-settings-modal #udpTriggerMessage {
    min-height: 44px;
    min-width: 280px;
    padding: 12px 16px;
    font-size: 15px;
    box-sizing: border-box;
}

.trigger-settings-modal .udp-config-grid {
    grid-template-columns: minmax(280px, 3fr) 90px;
    gap: 12px;
}

/* Hide number spinner arrows on Port inputs in trigger form */
.trigger-settings-modal #udpListenPort::-webkit-outer-spin-button,
.trigger-settings-modal #udpListenPort::-webkit-inner-spin-button,
.trigger-settings-modal #udpSendPort::-webkit-outer-spin-button,
.trigger-settings-modal #udpSendPort::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.trigger-settings-modal #udpListenPort,
.trigger-settings-modal #udpSendPort {
    -moz-appearance: textfield;
}

/* Bigger Action dropdown */
.trigger-settings-modal #triggerActionSelect {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 15px;
}

.action-item__actions {
    display: flex;
    gap: 8px;
}

.action-item__btn {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-item__btn--edit {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.action-item__btn--edit:hover {
    background: rgba(59, 130, 246, 0.4);
}

.action-item__btn--delete {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.action-item__btn--delete:hover {
    background: rgba(239, 68, 68, 0.4);
}

/* Action Form */
.action-form-section {
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
}

.action-form-header {
    margin-bottom: 16px;
}

.action-form-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
}

.action-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.action-params-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Action type badge in list */
.action-type-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(16, 185, 129, 0.2);
    color: var(--color-primary);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

/* Responsive for Actions Modal */
@media (max-width: 768px) {
    .actions-modal {
        max-width: 100%;
        height: 95vh;
    }
    
    .action-item {
        flex-wrap: wrap;
    }
    
    .action-item__actions {
        width: 100%;
        margin-top: 8px;
    }
}

/* ============================================
   Asset Schedule Modal Styles
   ============================================ */

.schedule-modal {
    max-width: 800px;
    max-height: 90vh;
}

.schedule-modal__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 65vh;
    overflow-y: auto;
}

.schedule-asset-name {
    font-size: 0.65em;
    font-weight: 400;
    color: var(--text-secondary);
    display: block;
    margin-top: 4px;
    word-wrap: break-word;
}

/* Timezone Row */
.schedule-timezone-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.schedule-timezone-options {
    display: flex;
    gap: 20px;
}

/* Conflict Banner */
.schedule-conflict-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 8px;
    color: #f87171;
}

.conflict-icon {
    font-size: 18px;
}

.conflict-text {
    font-size: 14px;
    font-weight: 500;
}

/* Schedule Rules Section */
.schedule-rules-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.schedule-rules-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.schedule-rules-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
}

.schedule-rules-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.schedule-rules-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

/* Schedule Rule Card */
.schedule-rule-card {
    position: relative;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: grab;
    transition: all 0.2s ease;
}

.schedule-rule-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.schedule-rule-card.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.schedule-rule-card.drag-over {
    border-color: var(--accent-primary);
    background: rgba(96, 165, 250, 0.1);
}

.schedule-rule-card--include {
    border-left: 4px solid #10b981;
}

.schedule-rule-card--exclude {
    border-left: 4px solid #ef4444;
}

.schedule-rule-card--conflict {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.08);
}

.schedule-rule-priority {
    padding: 2px 8px;
    background: var(--bg-glass-dark);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.schedule-rule-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.schedule-rule-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.schedule-rule-drag-handle {
    cursor: grab;
    color: var(--text-secondary);
    font-size: 16px;
}

.schedule-rule-type {
    font-weight: 600;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 4px;
}

.schedule-rule-card--include .schedule-rule-type {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.schedule-rule-card--exclude .schedule-rule-type {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.schedule-rule-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}

.schedule-rule-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.schedule-rule-delete-btn {
    color: var(--text-secondary) !important;
}

.schedule-rule-delete-btn:hover {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

.schedule-rule-details {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.schedule-rule-detail {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-icon {
    font-size: 14px;
}

.schedule-rule-conflict-indicator {
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 4px;
    font-size: 12px;
    color: #f87171;
}

/* Schedule Rule Form */
.schedule-rule-form-section {
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.schedule-rule-form-header {
    margin-bottom: 16px;
}

.schedule-rule-form-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
}

.schedule-rule-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Rule Type Labels */
.rule-type-label {
    font-weight: 600;
}

.rule-type-label--include {
    color: #10b981;
}

.rule-type-label--exclude {
    color: #ef4444;
}

/* Date Range Row */
.date-range-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.date-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.date-range-arrow {
    font-size: 18px;
    color: var(--text-secondary);
    padding-bottom: 10px;
}

.form-label--sm {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Custom Recurrence Row */
.schedule-custom-recurrence {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.custom-recurrence-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.custom-recurrence-row span {
    color: var(--text-secondary);
}

/* Time Windows */
.time-windows-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time-windows-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.time-window-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.time-window-arrow {
    color: var(--text-secondary);
}

.time-input {
    width: 100px !important;
}

.remove-time-window-btn {
    padding: 4px 8px !important;
    font-size: 14px !important;
}

/* Days of Week Selector */
.days-of-week-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.days-of-week-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.day-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.day-checkbox:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.day-checkbox:has(input:checked) {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.4);
}

.day-checkbox input {
    margin: 0;
}

/* Schedule Form Actions */
.schedule-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Schedule Modal Button Sizing - match asset buttons */
.schedule-modal .btn,
.schedule-modal .modal__footer .btn {
    padding: 8px 16px;
    font-size: 13px;
    min-height: auto;
}

.schedule-modal .btn--sm {
    padding: 6px 12px;
    font-size: 12px;
}

.schedule-modal .btn--ghost {
    padding: 6px 12px;
    font-size: 12px;
}

/* Checkbox Label */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
}

/* ============================================
   Mini Calendar Preview Styles
   ============================================ */

.schedule-calendar-preview-wrapper {
    padding: 12px 0;
}

.schedule-calendar-preview {
    display: inline-block;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    min-width: 220px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.calendar-header-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    cursor: pointer;
}

.calendar-day-header {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    padding: 4px 0;
}

.calendar-day {
    text-align: center;
    font-size: 12px;
    padding: 6px 4px;
    border-radius: 4px;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.calendar-day:hover:not(.calendar-day--empty) {
    background: rgba(255, 255, 255, 0.1);
}

.calendar-day--empty {
    color: transparent;
}

.calendar-day--include {
    background: rgba(16, 185, 129, 0.25);
    color: #10b981;
    font-weight: 600;
}

.calendar-day--exclude {
    background: rgba(239, 68, 68, 0.25);
    color: #ef4444;
    font-weight: 600;
}

/* If both include and exclude */
.calendar-day--include.calendar-day--exclude {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 50%, rgba(239, 68, 68, 0.25) 50%);
    color: var(--text-primary);
}

.calendar-legend {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.calendar-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.calendar-legend-item--include .legend-dot {
    background: #10b981;
}

.calendar-legend-item--exclude .legend-dot {
    background: #ef4444;
}

/* Schedule Badge Styles */
.btn-badge--schedule {
    background: rgba(147, 51, 234, 0.8);
}

/* Flatpickr Dark Theme Overrides – system colors and rounded corners */
.flatpickr-calendar.dark {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.flatpickr-calendar.dark.flatpickr-open {
    border-color: var(--border-glass-light);
}

.flatpickr-calendar.dark .flatpickr-months .flatpickr-month,
.flatpickr-calendar.dark .flatpickr-current-month .numInputWrapper,
.flatpickr-calendar.dark .flatpickr-weekdays,
.flatpickr-calendar.dark .flatpickr-day {
    color: var(--text-primary);
}

.flatpickr-calendar.dark .flatpickr-current-month {
    color: var(--text-primary);
}

.flatpickr-calendar.dark .flatpickr-monthDropdown-months,
.flatpickr-calendar.dark .flatpickr-weekday {
    color: var(--text-secondary);
}

.flatpickr-calendar.dark .flatpickr-day {
    border-radius: var(--radius-md);
}

.flatpickr-calendar.dark .flatpickr-day:hover {
    background: var(--bg-glass-light);
    border-color: transparent;
}

.flatpickr-calendar.dark .flatpickr-day.selected,
.flatpickr-calendar.dark .flatpickr-day.startRange,
.flatpickr-calendar.dark .flatpickr-day.endRange {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    border-radius: var(--radius-md);
}

.flatpickr-calendar.dark .flatpickr-time input:hover,
.flatpickr-calendar.dark .flatpickr-time .flatpickr-am-pm:hover {
    background: var(--bg-glass-light);
}

.flatpickr-calendar.dark .flatpickr-time .numInputWrapper span.arrowUp:after,
.flatpickr-calendar.dark .flatpickr-time .numInputWrapper span.arrowDown:after {
    border-bottom-color: var(--text-secondary);
    border-top-color: var(--text-secondary);
}

.flatpickr-calendar.dark .flatpickr-time input {
    color: var(--text-primary);
    background: transparent;
}

.flatpickr-calendar.dark .flatpickr-time .flatpickr-time-separator {
    color: var(--text-secondary);
}

.flatpickr-calendar.dark .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar.dark .flatpickr-months .flatpickr-next-month svg {
    fill: var(--text-primary);
}

.flatpickr-calendar.dark .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar.dark .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--accent-primary);
}

/* Responsive for Schedule Modal */
@media (max-width: 768px) {
    .schedule-modal {
        max-width: 100%;
        height: 95vh;
    }
    
    .date-range-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .date-range-arrow {
        display: none;
    }
    
    .schedule-rule-details {
        flex-direction: column;
        gap: 8px;
    }
    
    .days-of-week-selector {
        justify-content: center;
    }
}

/* ================================
   Simulate Schedule Feature
   ================================ */

/* Simulate Schedule Button */
#simulateScheduleBtn {
    transition: all 0.3s ease;
}

#simulateScheduleBtn.simulation-active {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
    color: #10b981;
}

#simulateScheduleBtn.simulation-active:hover {
    background: rgba(16, 185, 129, 0.3);
}

/* Simulate Schedule Modal */
.simulate-schedule-modal {
    max-width: 420px;
}

.simulate-description {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.simulate-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}

.simulate-toggle-label {
    font-weight: 500;
    flex: 1;
}

.simulate-status {
    font-size: 13px;
    font-weight: 600;
    min-width: 30px;
}

.simulate-status.active {
    color: #10b981;
}

.simulate-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    margin-top: 20px;
}

.simulate-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-dot--green {
    background: #10b981;
}

.legend-dot--red {
    background: #ef4444;
}

.legend-dot--gray {
    background: #6b7280;
}

/* Style simulation modal inputs like schedule rule form */
.simulate-schedule-modal .form-control {
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 10px 12px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.simulate-schedule-modal .form-control:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.simulate-schedule-modal .form-control::placeholder {
    color: var(--text-tertiary);
}

/* Asset Glow Effects for Simulation */
.asset-item.simulation-included {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.4), 
                0 0 20px rgba(16, 185, 129, 0.3),
                inset 0 0 30px rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.5);
}

.asset-item.simulation-excluded {
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4), 
                0 0 20px rgba(239, 68, 68, 0.3),
                inset 0 0 30px rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.5);
    opacity: 0.7;
}

.asset-item.simulation-no-rules {
    /* No special styling for assets without schedule rules */
}

/* Simulation indicator badge on asset */
.simulation-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    background: transparent;
}

.simulation-badge--included {
    color: #10b981;
}

.simulation-badge--excluded {
    color: #ef4444;
}

/* ============================================
   FOLDER ACCESS MODAL
   ============================================ */

.folder-access-modal {
    max-width: 1400px;
    width: 95%;
    height: 90vh;
    display: flex;
    flex-direction: column;
}

.folder-access-modal .modal__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    overflow: hidden;
    padding: var(--spacing-xl);
}

/* Inherited Access Notice */
.folder-access-inherited-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-lg);
}

.inherited-notice-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.inherited-notice-content h4 {
    margin: 0 0 var(--spacing-sm) 0;
    color: #fbbf24;
    font-size: 16px;
}

.inherited-notice-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.inherited-notice-content p strong {
    color: var(--text-primary);
}

.inherited-notice-info {
    margin-top: var(--spacing-sm) !important;
    font-style: italic;
    opacity: 0.8;
}

/* Access Priority Info */
.folder-access-priority-info {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
}

.priority-info-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1.4;
}

.priority-info-content {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.priority-info-content strong {
    color: var(--text-primary);
}

.priority-info-content em {
    color: var(--accent-primary);
    font-style: normal;
    font-weight: 500;
}

/* Access Mode Section */
.folder-access-mode-section {
    flex-shrink: 0;
}

.access-mode-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.access-mode-header .form-label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.access-mode-help .help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-size: 11px;
    color: var(--text-tertiary);
    cursor: help;
}

.access-mode-options {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.access-mode-option {
    cursor: pointer;
    flex: 1;
    min-width: 200px;
}

.access-mode-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.access-mode-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--bg-glass-dark);
    border: 2px solid var(--border-glass);
    border-radius: var(--radius-xl);
    transition: all var(--transition-fast);
}

.access-mode-option:hover .access-mode-card {
    border-color: rgba(96, 165, 250, 0.3);
    background: rgba(96, 165, 250, 0.05);
}

.access-mode-option input[type="radio"]:checked + .access-mode-card {
    border-color: var(--accent-primary);
    background: rgba(96, 165, 250, 0.1);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.access-mode-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.access-mode-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.access-mode-info strong {
    color: var(--text-primary);
    font-size: 15px;
}

.access-mode-info span {
    color: var(--text-tertiary);
    font-size: 12px;
}

.access-mode-default {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-sm);
    color: #10b981 !important;
    font-size: 10px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Locations Section */
.folder-access-locations-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.access-locations-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.access-locations-search {
    position: relative;
    flex: 1;
    min-width: 250px;
    max-width: 400px;
}

.access-locations-search .search-input {
    width: 100%;
    padding-right: 40px;
}

.access-locations-search .search-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.access-locations-bulk-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.bulk-actions-label {
    color: var(--text-tertiary);
    font-size: 13px;
    margin-right: var(--spacing-xs);
}

/* Locations Table Container */
.access-locations-table-container {
    flex: 1;
    background: var(--bg-glass-dark);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-xl);
    overflow: auto;
    min-height: 0;
}

.access-locations-table {
    width: 100%;
    min-width: 900px;
}

.access-locations-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(30, 41, 59, 0.98);
}

.access-locations-table th.th-checkbox {
    width: 50px;
    text-align: center;
    padding: var(--spacing-md);
}

.access-locations-table th.th-permissions {
    width: 360px;
    text-align: center;
}

/* Permission Legend in Header */
.permission-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-tertiary);
}

.permission-legend-item {
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
}

.permission-legend-arrow {
    color: var(--text-tertiary);
    opacity: 0.5;
}

.access-locations-table tbody tr {
    transition: background var(--transition-fast);
}

.access-locations-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.access-locations-table tbody tr.selected {
    background: rgba(96, 165, 250, 0.1);
}

.access-locations-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-glass-dark);
    vertical-align: middle;
}

.access-locations-table td:first-child {
    text-align: center;
}

/* Checkbox Custom Styling */
.checkbox-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-custom {
    height: 20px;
    width: 20px;
    background: var(--bg-glass-dark);
    border: 2px solid var(--border-glass);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-label:hover .checkbox-custom {
    border-color: var(--accent-primary);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* Permission Radio Buttons */
.permission-options {
    display: flex;
    gap: var(--spacing-xs);
    justify-content: center;
}

.permission-option {
    cursor: pointer;
}

.permission-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.permission-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-glass);
    background: var(--bg-glass-dark);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    min-width: 80px;
}

.permission-option:hover .permission-btn {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
}

.permission-option input[type="radio"]:checked + .permission-btn {
    border-color: transparent;
    color: white;
    font-weight: 600;
}

.permission-option input[type="radio"][value="none"]:checked + .permission-btn {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.permission-option input[type="radio"][value="view"]:checked + .permission-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.permission-option input[type="radio"][value="add"]:checked + .permission-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.permission-option input[type="radio"][value="edit"]:checked + .permission-btn {
    background: linear-gradient(135deg, #10b981, #059669);
}

/* Permission button sizing for 4 options */
.permission-btn {
    min-width: 70px;
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* Empty and Loading States */
.access-locations-empty,
.access-locations-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    color: var(--text-tertiary);
    gap: var(--spacing-md);
}

.access-locations-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-glass);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Info Footer */
.access-locations-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0 0 0;
    font-size: 13px;
    color: var(--text-tertiary);
}

#accessSelectedCount {
    color: var(--accent-primary);
    font-weight: 500;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .folder-access-modal {
        max-width: 98%;
        height: 95vh;
    }
    
    .access-mode-options {
        flex-direction: column;
    }
    
    .access-mode-option {
        min-width: 100%;
    }
}

@media (max-width: 768px) {
    .access-locations-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .access-locations-search {
        max-width: 100%;
    }
    
    .access-locations-bulk-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ============================================
   TEMPLATES LIST
   ============================================ */

.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-xl);
    padding: var(--spacing-lg) 0;
}

.template-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.template-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.template-card__preview {
    height: 140px;
    background: var(--bg-glass-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-glass);
}

.template-preview__icon {
    font-size: 48px;
    opacity: 0.5;
}

/* Layout Preview (for layout list cards) */
.layout-preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
}

.layout-preview--empty {
    flex-direction: column;
    gap: var(--spacing-xs);
}

.layout-preview__placeholder {
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.7;
}

.layout-preview__canvas {
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.layout-preview__zone {
    transition: opacity 0.15s ease;
}

.template-card__content {
    padding: var(--spacing-lg);
}

.template-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.template-card__name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.template-card__actions {
    display: flex;
    gap: var(--spacing-xs);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.template-card:hover .template-card__actions {
    opacity: 1;
}

.template-card__description {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.template-card__meta {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.template-card__resolution,
.template-card__zones,
.template-card__experiences {
    font-size: 12px;
    color: var(--text-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-glass-dark);
    border-radius: var(--radius-sm);
}

.template-card__footer {
    font-size: 12px;
    color: var(--text-muted);
}

/* Resolution Presets */
.resolution-presets {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.resolution-preset {
    padding: var(--spacing-xs) var(--spacing-sm) !important;
    font-size: 12px !important;
}

/* ============================================
   TEMPLATE EDITOR
   ============================================ */

.container--full-width {
    max-width: none;
    padding: 0 var(--spacing-xl);
}

.template-editor {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 180px);
    min-height: 500px;
}

.template-editor__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border-glass);
}

.toolbar-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.template-resolution {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--bg-glass-dark);
    border-radius: var(--radius-sm);
}

.template-editor__main {
    display: flex;
    gap: var(--spacing-lg);
    flex: 1;
    min-height: 0;
}

/* Canvas Container */
.template-editor__canvas-container {
    flex: 1;
    position: relative;
    overflow: auto;
    background: #0a0a0a;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
}

.template-editor__canvas {
    position: relative;
    background: #1a1a2e;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-glass);
}

.canvas-grid {
    position: absolute;
    pointer-events: none;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Zone Styling */
.zone {
    position: absolute;
    background: rgba(74, 144, 217, 0.25);
    border: 2px solid #4a90d9;
    border-radius: 4px;
    cursor: move;
    transition: box-shadow 0.15s ease;
}

.zone:hover {
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.3);
}

.zone--selected {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.5);
    border-color: var(--accent-primary);
}

.zone__label {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
}

.zone__z-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 4px;
    border-radius: 2px;
    pointer-events: none;
}

/* Resize Handles */
.zone__resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--accent-primary);
    border: 2px solid white;
    border-radius: 2px;
}

.zone__resize-handle--n { top: -5px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
.zone__resize-handle--s { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.zone__resize-handle--e { right: -5px; top: 50%; transform: translateY(-50%); cursor: e-resize; }
.zone__resize-handle--w { left: -5px; top: 50%; transform: translateY(-50%); cursor: w-resize; }
.zone__resize-handle--nw { top: -5px; left: -5px; cursor: nw-resize; }
.zone__resize-handle--ne { top: -5px; right: -5px; cursor: ne-resize; }
.zone__resize-handle--sw { bottom: -5px; left: -5px; cursor: sw-resize; }
.zone__resize-handle--se { bottom: -5px; right: -5px; cursor: se-resize; }

/* Properties Panel */
.template-editor__panel {
    width: 280px;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overflow-x: hidden;
}

.template-editor__panel .panel-content {
    overflow-x: hidden;
}

.panel-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-glass);
}

.panel-header h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.panel-content {
    padding: var(--spacing-lg);
    flex: 1;
    overflow-y: auto;
}

.panel-divider {
    height: 1px;
    background: var(--border-glass);
}

.panel-empty-state {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: var(--spacing-xl) var(--spacing-md);
}

/* Property Groups */
.property-group {
    margin-bottom: var(--spacing-lg);
}

.property-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

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

.property-field {
    flex: 1;
}

.property-field label {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.property-actions {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-glass);
}

/* Layers List */
.layers-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.layer-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--bg-glass-dark);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.layer-item:hover {
    background: var(--bg-glass-light);
}

.layer-item--selected {
    border-color: var(--accent-primary);
    background: rgba(16, 185, 129, 0.1);
}

.layer-item__row1 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.layer-item__row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.layer-item__color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.layer-item__name {
    flex: 1;
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layer-item__z {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1;
}

.layer-item__arrows {
    display: flex;
    gap: 2px;
}

/* Color Picker */
.color-picker-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.color-picker {
    width: 40px;
    height: 32px;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
}

.color-presets {
    display: flex;
    gap: var(--spacing-xs);
}

.color-preset {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.color-preset:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

/* Form Row */
.form-row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

/* Zone Selector (for Section Modal) */
.zone-selector {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.zone-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-glass-dark);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.zone-option:hover {
    background: var(--bg-glass);
}

.zone-option.selected {
    border-color: var(--accent-primary);
    background: rgba(16, 185, 129, 0.1);
}

.zone-option__color {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    flex-shrink: 0;
}

.zone-option__info {
    flex: 1;
}

.zone-option__name {
    font-weight: 500;
    color: var(--text-primary);
}

.zone-option__meta {
    font-size: 12px;
    color: var(--text-muted);
}

/* Template Preview in Experience Details */
.template-preview-mini {
    width: 100%;
    height: 120px;
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}

.template-preview-mini__zone {
    position: absolute;
    border: 1px solid;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* No Template State */
.no-template-notice {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

.no-template-notice__icon {
    font-size: 24px;
}

.no-template-notice__text {
    flex: 1;
    font-size: 14px;
    color: var(--text-secondary);
}

/* Active Button State */
.btn--ghost.active {
    background: var(--bg-glass-light);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Template Section in Experience Details */
.experience-template-section {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.template-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.template-section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.template-section-icon {
    font-size: 18px;
}

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

.template-section-content {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.no-template-state {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--bg-glass-dark);
    border-radius: var(--radius-md);
    width: 100%;
}

.no-template-icon {
    font-size: 24px;
    opacity: 0.5;
}

.no-template-text {
    color: var(--text-muted);
    font-size: 14px;
}

.template-info {
    flex: 1;
}

.template-info-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

.template-resolution {
    font-size: 12px;
    color: var(--text-muted);
    padding: 2px 8px;
    background: var(--bg-glass-dark);
    border-radius: var(--radius-sm);
}

.template-zones-count {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Template Picker Grid in Modal */
.templates-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
    max-height: 400px;
    overflow-y: auto;
}

.templates-picker-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    gap: var(--spacing-lg);
    color: var(--text-muted);
}

/* Layout Picker Styles */
.layout-picker-item,
.template-picker-item {
    display: flex;
    flex-direction: column;
    background: var(--bg-glass-dark);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.layout-picker-item:hover,
.template-picker-item:hover {
    background: var(--bg-glass);
    border-color: var(--border-glass-light);
}

.layout-picker-item.selected,
.template-picker-item.selected {
    border-color: var(--accent-primary);
    background: rgba(16, 185, 129, 0.1);
}

.layout-picker-preview,
.template-picker-preview {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: var(--bg-glass);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
}

.layout-picker-preview--empty {
    color: var(--text-muted);
    font-size: 12px;
}

.layout-picker-preview__placeholder {
    color: var(--text-muted);
    font-size: 11px;
}

.layout-picker-preview__canvas {
    border-radius: 2px;
}

.layout-picker-name,
.template-picker-name {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.layout-picker-info {
    text-align: center;
}

.layout-picker-meta,
.template-picker-meta {
    font-size: 12px;
    color: var(--text-muted);
}

/* Layouts Picker Grid */
.layouts-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--spacing-md);
    max-height: 400px;
    overflow-y: auto;
    padding: var(--spacing-xs);
}

.layouts-picker-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    color: var(--text-muted);
    text-align: center;
}

/* Form Help Text */
.form-help-text {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

/* ============================================
   ZONES CONTAINER & CARDS
   ============================================ */

.zones-container {
    display: flex;
    flex-direction: column;
}

.zones-container > .zone-card {
    margin-bottom: 48px;
}

.zones-container > .zone-card:last-child {
    margin-bottom: 0;
}

.zones-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-3xl);
    text-align: center;
    background: var(--bg-glass-dark);
    border-radius: var(--radius-lg);
    min-height: 300px;
}

.zones-empty-state .empty-state-icon {
    font-size: 48px;
    opacity: 0.5;
}

.zones-empty-state .empty-state-text {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
}

.zones-empty-state .empty-state-subtext {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 400px;
}

/* Zone Card */
.zone-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-fast);
}

.zone-card:hover {
    border-color: var(--border-glass-light);
}

.zone-card--focused {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.zone-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-glass-dark);
    border-left: 4px solid var(--accent-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.zone-card__header:hover {
    background: var(--bg-glass);
}

.zone-card__header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.zone-card__header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.zone-card__collapse-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-xs);
    font-size: 12px;
    line-height: 1;
    transition: color var(--transition-fast);
}

.zone-card__collapse-btn:hover {
    color: var(--text-primary);
}

.collapse-icon {
    display: inline-block;
    transition: transform var(--transition-fast);
}

.zone-card--collapsed .collapse-icon {
    transform: rotate(0deg);
}

.zone-card__title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zone-card__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.zone-card__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: 12px;
    color: var(--text-muted);
}

.zone-card__z-level {
    padding: 1px 6px;
    background: var(--bg-glass);
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 11px;
}

.zone-card__section-count {
    color: var(--text-secondary);
}

.zone-card__body {
    padding: var(--spacing-md) var(--spacing-lg);
    transition: all var(--transition-fast);
}

.zone-card__body--hidden {
    display: none;
}

/* Zone Empty State */
.zone-empty-state {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    color: var(--text-muted);
    font-size: 13px;
    background: var(--bg-glass-dark);
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-glass);
}

.zone-empty-icon {
    font-size: 18px;
    opacity: 0.5;
}

/* Zone Sections List */
.zone-sections-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Section Item (inside zone) */
.section-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.section-item:hover {
    background: var(--bg-glass);
    border-color: var(--border-glass);
}

.section-item__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.section-item__name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-item__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.section-item__badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    text-transform: uppercase;
}

.section-item__badge--main {
    background: var(--accent-primary);
    color: var(--text-on-accent);
}

.section-item__badge--type {
    background: var(--bg-glass);
    color: var(--text-secondary);
}

.section-item__badge--sync {
    background: var(--color-info);
    color: white;
}

.section-item__info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 120px;
}

.section-item__assets {
    font-size: 12px;
    color: var(--text-secondary);
}

.section-item__date {
    font-size: 11px;
    color: var(--text-muted);
}

.section-item__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.section-item:hover .section-item__actions {
    opacity: 1;
}

/* Icon Button */
.btn-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    transition: all var(--transition-fast);
}

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

.btn-icon--danger:hover {
    background: rgba(220, 38, 38, 0.2);
    border-color: var(--color-danger);
}

/* Zone Add Section Button */
.zone-add-section-btn {
    white-space: nowrap;
}

/* Breadcrumb Zone Items */
.breadcrumb-zone-sep,
.breadcrumb-zone-item {
    transition: all var(--transition-fast);
}

.breadcrumb-zone-item {
    cursor: default;
}

/* Experience Actions Bar adjustments */
.experience-actions-bar {
    margin-bottom: var(--spacing-lg);
}

/* Template Info Bar in Actions Bar */
.template-info-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--bg-glass-dark);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-glass-dark);
}

.template-info-label {
    font-size: 12px;
    color: var(--text-muted);
}

.template-info-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.template-info-resolution {
    font-size: 12px;
    color: var(--text-muted);
}

.actions-separator {
    width: 1px;
    height: 24px;
    background: var(--border-glass);
    margin: 0 var(--spacing-sm);
}

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

.btn--danger-text:hover {
    background: rgba(220, 38, 38, 0.1);
}

/* ============================================
   SMART GROUPS MODULE
   ============================================ */

/* Smart Groups Actions Bar */
.smart-groups-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}

.smart-groups-actions-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.smart-groups-actions-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.search-container {
    min-width: 250px;
}

.form-input--search {
    padding-left: var(--spacing-xl);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.5)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 18px;
}

/* Smart Groups Grid */
.smart-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: var(--spacing-lg);
}

/* Smart Group Card */
.smart-group-card {
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.smart-group-card:hover {
    background: var(--bg-glass-light);
    border-color: var(--border-glass-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.smart-group-card__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.smart-group-card__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.smart-group-card__actions {
    display: flex;
    gap: var(--spacing-xs);
    opacity: 1;
}

.smart-group-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.smart-group-card__rules {
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.smart-group-card__rules-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
}

.smart-group-card__rules-preview {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
    word-break: break-word;
}

.smart-group-card__footer {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-glass-dark);
}

.smart-group-card__meta {
    font-size: 11px;
    color: var(--text-muted);
}

/* Rule preview styling */
.rule-logic {
    color: var(--accent-primary);
    font-weight: 600;
    padding: 0 2px;
}

.rule-group {
    color: #60a5fa;
    font-weight: 500;
}

.rule-value {
    color: #a78bfa;
    font-weight: 500;
}

/* Smart Group Details Container */
.smart-group-container {
    padding-bottom: 100px; /* Space for floating action bar */
}

/* Smart Group Details Actions Bar */
.smart-group-details-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.smart-group-details-actions-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.smart-group-details-actions-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Player Count Display */
.player-count-display {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.15) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-md);
}

.player-count-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.player-count-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-primary);
}

/* Rule Sets Container */
.rule-sets-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

/* Rule Set */
.rule-set {
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.rule-set__combine-logic {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-glass-dark);
    border-bottom: 1px solid var(--border-glass-dark);
}

.combine-logic-label {
    font-size: 12px;
    color: var(--text-muted);
}

.logic-toggle {
    display: flex;
    gap: 2px;
    background: var(--bg-glass-dark);
    border-radius: var(--radius-md);
    padding: 2px;
    border: 1px solid var(--border-glass-dark);
}

.logic-toggle__btn {
    padding: var(--spacing-xs) var(--spacing-md);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.logic-toggle__btn:hover {
    color: var(--text-primary);
}

.logic-toggle__btn.active {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.rule-set__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-glass-light);
    border-bottom: 1px solid var(--border-glass-dark);
}

.rule-set__header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.rule-set__header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.rule-set__toggle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 10px;
    transition: transform var(--transition-fast);
}

.rule-set.collapsed .rule-set__toggle {
    transform: rotate(-90deg);
}

.rule-set__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.rule-set__body {
    padding: var(--spacing-lg);
}

.rule-set.collapsed .rule-set__body {
    display: none;
}

/* Rules Container */
.rules-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

/* Rule Item */
.rule-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.rule-item__logic {
    display: flex;
    gap: 2px;
    padding-top: var(--spacing-xs);
}

.logic-btn {
    padding: 4px 10px;
    border: 1px solid var(--border-glass);
    background: var(--bg-glass);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

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

.logic-btn:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    border-left: none;
}

.logic-btn:hover {
    background: var(--bg-glass-light);
}

.logic-btn.active {
    background: rgba(96, 165, 250, 0.3);
    border-color: rgba(96, 165, 250, 0.5);
    color: white;
}

.rule-item__fields {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    flex-wrap: wrap;
}

.rule-item__property,
.rule-item__operator {
    min-width: 150px;
}

.rule-item__value-container {
    flex: 1;
    min-width: 180px;
}

.rule-item__delete {
    flex-shrink: 0;
}

.rule-item__property-hint {
    flex-basis: 100%;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.35;
}

.rule-item__hint-example {
    color: var(--text-secondary);
}

.rule-item__value-autocomplete {
    position: relative;
    width: 100%;
}

.rule-item__suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    max-height: 200px;
    overflow-y: auto;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.rule-item__suggestion {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
}

.rule-item__suggestion:hover {
    background: rgba(var(--accent-primary-rgb), 0.15);
}

/* Add Rule Button */
.btn--add-rule {
    align-self: flex-start;
}

/* Add Rule Set Button */
.btn--add-rule-set {
    align-self: flex-start;
}

/* Floating Action Bar */
.floating-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-xl);
    background: rgba(30, 41, 59, 0.98);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-glass);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.floating-action-bar__left {
    flex: 1;
    min-width: 0;
}

.floating-action-bar__right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

/* Rule Preview Inline */
.rule-preview-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    max-width: 100%;
    overflow: hidden;
}

.rule-preview-inline__label {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.rule-preview-inline__text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Button Size Variants */
.btn--xs {
    padding: 4px 8px;
    font-size: 11px;
}

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

/* Form Textarea */
.form-textarea {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: all var(--transition-fast);
}

.form-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.15);
}

.form-textarea::placeholder {
    color: var(--text-muted);
}

/* Responsive adjustments for Smart Groups */
@media (max-width: 768px) {
    .smart-groups-grid {
        grid-template-columns: 1fr;
    }

    .smart-groups-actions-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .smart-groups-actions-right {
        flex-direction: column;
    }

    .search-container {
        min-width: 100%;
    }

    .floating-action-bar {
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }

    .floating-action-bar__left {
        width: 100%;
    }

    .floating-action-bar__right {
        width: 100%;
        justify-content: flex-end;
    }

    .rule-item__fields {
        flex-direction: column;
        align-items: stretch;
    }

    .rule-item__property,
    .rule-item__operator,
    .rule-item__value-container {
        min-width: 100%;
    }
}

/* ============================================
   PLAYERS - HIERARCHY & DETAILS
   ============================================ */

/* Players Stats Bar */
.players-stats-bar {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    min-width: 100px;
}

.stat-box--blue {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.1);
}

.stat-box--green {
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.1);
}

.stat-box--red {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.1);
}

.stat-box--yellow {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.1);
}

.stat-box--orange {
    border-color: rgba(249, 115, 22, 0.5);
    background: rgba(249, 115, 22, 0.1);
}

.stat-box__label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-box__value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Stat Badges (inline) */
.stat-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    margin-right: 4px;
}

.stat-badge--online {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.stat-badge--offline {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.stat-badge--neutral {
    background: var(--bg-glass);
    color: var(--text-muted);
}

/* Table Link */
.table-link {
    color: var(--accent-primary);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

/* Player Details Header */
.player-details-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}

.player-details-header__left {
    flex: 1;
    min-width: 300px;
}

.player-details-header__right {
    flex-shrink: 0;
}

.player-details-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.player-details-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.player-details-id {
    font-size: 12px;
    color: var(--text-muted);
}

/* Player Details Controls */
.player-details-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}

.player-details-controls__left,
.player-details-controls__center,
.player-details-controls__right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* Grid View Controls (inline with other controls) */
.grid-view-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.zoom-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.zoom-controls .toolbar-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-right: 4px;
}

.zoom-controls .btn {
    border-radius: var(--radius-md) !important;
}

/* Stats Row (dashboard-style stat boxes) */
.stats-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.stats-row .stat {
    padding: 6px 12px;
    font-size: 12px;
    min-width: auto;
}

.stats-row .stat__label {
    font-size: 11px;
    margin-right: 4px;
}

.stats-row .stat__value {
    font-size: 12px;
}

/* View Toggle */
.view-toggle {
    display: flex;
    gap: 0;
}

.btn--toggle {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

/* Colored stat button variants */
.btn--stat-blue {
    background: rgba(96, 165, 250, 0.2) !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
    color: #93c5fd !important;
}

.btn--stat-green {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #86efac !important;
}

.btn--stat-red {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #fca5a5 !important;
}

.btn--stat-yellow {
    background: rgba(234, 179, 8, 0.2) !important;
    border-color: rgba(234, 179, 8, 0.4) !important;
    color: #fde047 !important;
}

.btn--stat-orange {
    background: rgba(249, 115, 22, 0.25) !important;
    border-color: rgba(249, 115, 22, 0.5) !important;
    color: #fdba74 !important;
}

.btn--stat-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border-color: transparent !important;
    color: #1a1a1a !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.btn--stat-warning:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
}

.btn--stat-danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.btn--stat-danger:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

/* Compact stat buttons for table rows */
.view-toggle--compact {
    display: inline-flex;
    gap: 0;
}

.view-toggle--compact .btn--sm {
    padding: 4px 8px;
    font-size: 11px;
}

.view-toggle--compact .btn--sm strong {
    font-weight: 600;
}

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

.btn--toggle:not(:first-child):not(:last-child) {
    border-radius: 0;
    border-left: none;
}

.btn--toggle:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-left: none;
}

.btn--toggle.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent);
}

.btn--toggle:hover:not(.active) {
    background: var(--bg-glass-light);
}

/* Inline Stats (matching view-toggle style) */
.stats-inline {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 0;
}

.stat-inline {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 13px;
    color: var(--text-secondary);
    border-right: 1px solid var(--border-glass);
    white-space: nowrap;
}

.stat-inline:last-child {
    border-right: none;
}

.stat-inline strong {
    color: var(--text-primary);
    font-weight: 600;
}

.stat-inline--blue strong { color: #60a5fa; }
.stat-inline--green strong { color: #4ade80; }
.stat-inline--red strong { color: #f87171; }
.stat-inline--yellow strong { color: #fbbf24; }

/* Controls Divider */
.controls-divider {
    width: 1px;
    height: 28px;
    background: var(--border-glass);
    margin: 0 var(--spacing-sm);
}

/* Bulk Actions */
.bulk-actions {
    display: flex;
    gap: 0;
}

.bulk-actions .btn--toggle {
    border-radius: 0;
}

.bulk-actions .btn--toggle:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.bulk-actions .btn--toggle:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-left: none;
}

.bulk-actions .btn--toggle:not(:first-child):not(:last-child) {
    border-left: none;
}

/* Bulk Player List Items */
.bulk-player-item:hover {
    background: var(--bg-glass-light);
}

.status-indicator--online {
    background-color: #4ade80;
}

.status-indicator--waiting {
    background-color: #facc15;
}

.status-indicator--offline {
    background-color: #f87171;
}

/* Grid Mode Toggle */
.grid-mode-toggle {
    display: flex;
    gap: 0;
}

/* Grid Size Selector */
.grid-size-selector {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.grid-size-selector label {
    font-size: 12px;
    color: var(--text-muted);
}

.form-select--sm {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 12px;
    min-width: 70px;
}

/* Player Cards Container (List View) */
.player-list-view {
    margin-top: var(--spacing-lg);
}

.player-cards-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Player Card */
.player-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-fast);
}

.player-card:hover {
    border-color: var(--border-glass-light);
}

.player-card--online {
    border-left: 3px solid #22c55e;
}

.player-card--offline {
    border-left: 3px solid #ef4444;
}

.player-card--alert {
    border-left-color: #f59e0b;
}

.player-card--recovery {
    border-left-color: #f97316;
}

.player-card__header {
    display: flex;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    gap: var(--spacing-md);
    transition: background var(--transition-fast);
}

.player-card__header:hover {
    background: var(--bg-glass-light);
}

.player-card__status {
    flex-shrink: 0;
}

.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.status-indicator--online {
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
}

.status-indicator--waiting {
    background: #facc15;
    box-shadow: 0 0 6px #facc15;
    animation: none;
}

.status-indicator--offline {
    background: #ef4444;
    animation: none;
}

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

.player-card__title {
    flex: 1;
    min-width: 0;
}

.player-card__name {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-card__model {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

.player-card__badges {
    display: flex;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.player-card__expand-icon {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 10px;
}

/* Player Card Summary */
.player-card__summary {
    display: flex;
    gap: var(--spacing-xl);
    padding: 0 var(--spacing-lg) var(--spacing-md);
    flex-wrap: wrap;
}

.player-card__summary-item {
    display: flex;
    gap: var(--spacing-xs);
    font-size: 12px;
}

.summary-label {
    color: var(--text-muted);
}

.summary-value {
    color: var(--text-secondary);
}

/* Player Card Body (expanded) */
.player-card__body {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-glass);
    background: var(--bg-glass-dark);
}

.player-card__details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.player-detail-section {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.player-detail-section__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
}

.player-detail-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.player-detail-item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.detail-label {
    color: var(--text-muted);
}

.detail-value {
    color: var(--text-secondary);
}

/* Player Screenshot */
.player-screenshot {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 16 / 9;
    background: var(--bg-glass-dark);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.player-screenshot__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-screenshot__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 13px;
}

/* Player Card Actions */
.player-card__actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-glass);
}

/* Compact View */
.player-card--compact .player-card__summary {
    display: none;
}

.player-card--compact .player-card__header {
    padding: var(--spacing-sm) var(--spacing-lg);
}

/* ============================================
   DEVICE CARD - New Design Matching Mockup
   ============================================ */

/* Device Card Container */
.device-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.device-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.device-card.expanded {
    border-color: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

/* Device Header */
.device-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.device-info {
    flex: 1;
}

.device-title {
    font-size: 16px;
    font-weight: 700;
    color: white;
}

.device-serial {
    font-size: 12px;
    opacity: 0.7;
    color: white;
    margin-right: 8px;
}

.device-edit-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    margin-right: 4px;
    border-radius: 4px;
    transition: all var(--transition-fast);
}

.device-edit-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-primary);
}

.device-name {
    font-weight: 500;
}

.form-static-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.form-static-label {
    font-size: 14px;
    color: var(--text-muted);
}

.form-static-value {
    font-size: 14px;
    color: var(--text-primary);
    font-family: monospace;
}

.device-status-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Status Badge */
.status-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.status-badge.status-online {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-badge.status-waiting {
    background: rgba(250, 204, 21, 0.2);
    color: #facc15;
    border: 1px solid rgba(250, 204, 21, 0.35);
}

.status-badge.status-offline {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Presentation Status Badge */
.presentation-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* Bar: same style as player status badge (Online/Offline) */
.device-status-group .presentation-badge {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
}

.presentation-status-uptodate {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.presentation-status-published {
    background: rgba(253, 126, 20, 0.2);
    color: #fd7e14;
    border: 1px solid rgba(253, 126, 20, 0.3);
}

.presentation-status-modified {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.presentation-status-different {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.presentation-status-none {
    background: rgba(148, 163, 184, 0.15);
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

button.presentation-badge--clickable {
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}

button.presentation-badge--clickable:hover {
    filter: brightness(1.3);
    transform: scale(1.05);
}

button.presentation-badge--clickable:active {
    transform: scale(0.97);
}

/* Presentation status dots for grid view */
.presentation-dot--uptodate {
    background: #22c55e !important;
}

.presentation-dot--published {
    background: #fd7e14 !important;
}

.presentation-dot--modified {
    background: #ffc107 !important;
}

.presentation-dot--none {
    background: rgba(148, 163, 184, 0.4) !important;
}

/* Expand Icon */
.expand-icon {
    font-size: 12px;
    transition: transform 0.3s;
    color: rgba(255, 255, 255, 0.7);
}

.device-card.expanded .expand-icon {
    transform: rotate(90deg);
}

/* Quick Info Row */
.device-quick-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 12px;
    justify-content: flex-start;
}

/* List Info (shown only in list view, not expanded) */
.device-list-info {
    display: none;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.list-info-item {
    color: rgba(255, 255, 255, 0.7);
}

.list-info-label {
    color: rgba(255, 255, 255, 0.5);
}

.list-info-separator {
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.3);
}

/* In list view, show list-info for non-expanded cards */
body.list-view .device-card:not(.expanded) .device-list-info {
    display: inline;
}

/* In list view, hide quick-info for non-expanded cards */
body.list-view .device-card:not(.expanded) .device-quick-info {
    display: none;
}

/* Hide quick-info in Details view since info is shown in expanded details */
body.details-view .device-card.expanded .device-quick-info {
    display: none;
}

/* List view styling for non-expanded cards */
body.list-view .device-card:not(.expanded) {
    padding-top: 12px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 4px;
    margin-bottom: 8px;
}

body.list-view .device-card:not(.expanded) .device-header {
    padding-bottom: 0;
    margin-bottom: 0;
}

body.list-view .device-card:not(.expanded) .device-title {
    font-size: 13px;
}

body.list-view .device-card:not(.expanded) + .device-card {
    margin-top: 0; /* margin handled by margin-bottom above */
}

/* Details view - collapsed cards should match list view appearance */
body.details-view .device-card:not(.expanded) .device-list-info {
    display: inline;
}

body.details-view .device-card:not(.expanded) .device-quick-info {
    display: none;
}

body.details-view .device-card:not(.expanded) {
    padding-top: 12px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 4px;
    margin-bottom: 8px;
}

body.details-view .device-card:not(.expanded) .device-header {
    padding-bottom: 0;
    margin-bottom: 0;
}

body.details-view .device-card:not(.expanded) .device-title {
    font-size: 13px;
}

body.details-view .device-card:not(.expanded) + .device-card {
    margin-top: 0;
}

.quick-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quick-info-label {
    font-size: 10px;
    opacity: 0.6;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.quick-info-value {
    font-size: 13px;
    font-weight: 600;
    color: white;
}

/* Device Details (Expanded) */
.device-details {
    margin-top: 4px;
    margin-bottom: 8px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Actions Bar */
.device-actions-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 16px;
}

.device-actions-label {
    font-weight: 600;
    color: white;
}

.action-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 6px 12px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.action-btn--danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.action-btn--danger:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.action-btn--warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #1a1a1a;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.action-btn--warning:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

/* Actions Toggle - Similar to View Toggle */
.actions-toggle {
    display: flex;
    gap: 0;
}

.actions-toggle .btn--toggle {
    padding: 6px 14px;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 0;
}

.actions-toggle .btn--toggle:first-child {
    border-radius: 6px 0 0 6px;
}

.actions-toggle .btn--toggle:last-child {
    border-radius: 0 6px 6px 0;
}

.actions-toggle .btn--toggle:not(:first-child) {
    margin-left: -1px;
}

.actions-toggle .btn--toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    z-index: 1;
}

.actions-toggle .btn--toggle-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #1a1a1a;
    border-color: transparent;
}

.actions-toggle .btn--toggle-warning:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.actions-toggle .btn--toggle-danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    border-color: transparent;
}

.actions-toggle .btn--toggle-danger:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* Modal Form Controls */
.modal .form-control {
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.modal .form-control:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.modal .form-control::placeholder {
    color: var(--text-tertiary);
}

/* Delete Modal Input - Red focus */
#deleteModal .form-control {
    text-transform: uppercase;
}

#deleteModal .form-control:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

#deleteModal .form-control::placeholder {
    text-transform: none;
}

/* Location Mode Toggle */
.location-mode-toggle {
    display: flex;
    gap: 0;
}

.location-mode-toggle .btn--toggle {
    padding: 8px 20px;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.location-mode-toggle .btn--toggle:first-child {
    border-radius: 6px 0 0 6px;
}

.location-mode-toggle .btn--toggle:last-child {
    border-radius: 0 6px 6px 0;
    margin-left: -1px;
}

.location-mode-toggle .btn--toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.location-mode-toggle .btn--toggle.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
    z-index: 1;
}

/* Player Log List */
.log-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.log-item {
    padding: 12px;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
}

.log-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.log-item-action {
    font-weight: 600;
    color: var(--text-primary);
}

.log-item-time {
    font-size: 0.85em;
    color: var(--text-muted);
}

.log-item-user {
    font-size: 0.9em;
    color: var(--text-secondary);
}

/* Website history list detail (expandable) */
.log-item-detail {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary, rgba(0,0,0,0.15));
    border-radius: var(--radius-sm, 4px);
    border-left: 3px solid var(--accent-primary, #0066cc);
    font-size: 0.9em;
}

.log-item-detail-line {
    margin-bottom: 6px;
}

.log-item-detail-line:last-child {
    margin-bottom: 0;
}

.log-item-detail-files {
    margin: 4px 0 0 16px;
    padding-left: 12px;
}

.log-item-detail-files li {
    margin: 2px 0;
}

.website-history-list .log-item {
    margin-bottom: 8px;
}

/* Website detail modal: inline change history at bottom */
.website-detail-history-section {
    margin-top: var(--spacing-md, 16px);
}
.website-detail-history-section .file-details-section-title {
    margin-bottom: 8px;
}
/* Default when not in flex layout (fallback) */
.website-detail-history-list {
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.website-history-item .website-history-detail-btn {
    margin-top: 8px;
}

.log-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* Details Grid */
.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.details-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px;
}

.details-section--screenshot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.details-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.9);
}

.details-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.details-row--full {
    justify-content: flex-start;
}

.details-label {
    opacity: 0.7;
    color: rgba(255, 255, 255, 0.8);
}

.details-value {
    font-weight: 600;
    color: white;
}

.details-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

/* Tags block: button on top, badges below (player details Content section) */
.details-row--tags .details-tags-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.details-tags-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.details-tag-badge {
    display: inline-block;
    background: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
}

.details-tags-badges .tag-picker__empty {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    font-weight: normal;
    font-size: 13px;
}

/* Minimal link-style for "TAGs:" label (opens tag picker) */
.link-style--label {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    text-decoration: none;
}

.link-style--label:hover {
    text-decoration: underline;
    opacity: 1;
}

/* Player Tags */
.player-tag {
    background: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.player-tag-empty {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
}

/* TV Toggle Buttons */
.tv-toggle {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tv-btn {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s;
}

.tv-btn.active-on {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.3);
}

.tv-btn.active-off {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.tv-btn.inactive {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}

/* Device Screenshot */
.device-screenshot {
    width: 100%;
    max-width: 300px;
    text-align: center;
}

.device-screenshot-link {
    display: block;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.device-screenshot-link:hover {
    opacity: 0.85;
}

.device-screenshot-img {
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.device-screenshot-time {
    margin-top: 8px;
    font-size: 11px;
    opacity: 0.7;
    color: white;
}

.device-screenshot-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

/* Screenshot Actions */
.screenshot-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.screenshot-actions .btn {
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.2;
    min-height: 28px;
}

/* Screenshot History Gallery */
.screenshot-history-gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    row-gap: 24px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px;
}

@media (max-width: 1200px) {
    .screenshot-history-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    .screenshot-history-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .screenshot-history-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

.screenshot-history-item {
    position: relative;
    aspect-ratio: 16 / 9;
    min-height: 120px;
    height: auto;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.screenshot-history-item:hover {
    transform: scale(1.03);
    border-color: var(--accent-primary);
}

.screenshot-history-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.screenshot-history-date {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    color: white;
    font-size: 11px;
    text-align: center;
}

.screenshot-history-date .screenshot-date {
    font-weight: 600;
}

.screenshot-history-date .screenshot-time {
    opacity: 0.8;
}

.screenshot-history-loading,
.screenshot-history-empty,
.screenshot-history-error {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.screenshot-history-error {
    color: var(--danger);
}

/* Device Logs Modal */
.logs-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.logs-status {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
}

.logs-content {
    max-height: 500px;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0;
}

.logs-text {
    margin: 0;
    padding: 16px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--text-primary);
    tab-size: 4;
}

.logs-info {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--spacing-lg);
    font-size: 14px;
}

.breadcrumb-nav .breadcrumb-item {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-nav .breadcrumb-item:hover {
    color: white;
}

.breadcrumb-nav .breadcrumb-item.active {
    color: white;
    font-weight: 600;
}

.breadcrumb-nav .breadcrumb-separator {
    color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   PLAYERS - GRID VIEW
   ============================================ */

.player-grid-view {
    margin-top: var(--spacing-sm);
}

/* Canvas Container - Scrollable viewport for the canvas */
.player-grid-canvas-container {
    position: relative;
    overflow: auto;
    background: #1a1a2e;
    border-radius: var(--radius-lg);
    min-height: 700px;
    height: calc(100vh - 200px);
    /* Hide scrollbars but keep scroll functionality for panning */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.player-grid-canvas-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

/* The actual canvas where player cards are positioned */
.player-grid-canvas {
    position: relative;
    background: transparent;
    min-width: 100%;
    min-height: 100%;
    cursor: grab;
}

.player-grid-canvas:active {
    cursor: grabbing;
}

/* Grid overlay - visual grid lines */
.player-grid-overlay {
    position: absolute;
    pointer-events: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    z-index: 1;
    cursor: grab;
}

.player-grid-overlay:active {
    cursor: grabbing;
}

/* Guide Lines */
.guide-line {
    position: absolute;
    background: #ffffff;
    z-index: 5;
    cursor: move;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.guide-line:hover {
    opacity: 1;
}

.guide-line--selected {
    opacity: 1;
    background: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.guide-line--horizontal {
    height: 3px !important;
    min-width: 40px;
}

.guide-line--vertical {
    width: 3px !important;
    min-height: 40px;
}

/* Guide Line Resize Handles */
.guide-line-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border: 2px solid #1a1a2e;
    border-radius: 50%;
    z-index: 6;
    cursor: pointer;
}

.guide-line--horizontal .guide-line-handle--start {
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    cursor: ew-resize;
}

.guide-line--horizontal .guide-line-handle--end {
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    cursor: ew-resize;
}

.guide-line--vertical .guide-line-handle--start {
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    cursor: ns-resize;
}

.guide-line--vertical .guide-line-handle--end {
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    cursor: ns-resize;
}

/* Guide Line Delete Button */
.guide-line-delete {
    position: absolute;
    width: 18px;
    height: 18px;
    background: var(--danger);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 7;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.guide-line-delete:hover {
    opacity: 1;
}

.guide-line--horizontal .guide-line-delete {
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
}

.guide-line--vertical .guide-line-delete {
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
}

/* Guide Line Controls in Toolbar */
.guide-line-controls {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Canvas Boxes (background rectangles) */
.canvas-box {
    position: absolute;
    z-index: 2;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: move;
    transition: border-color 0.15s ease;
}

.canvas-box:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.canvas-box--selected {
    border-color: rgba(255, 255, 255, 0.6) !important;
    border-style: dashed;
}

/* Box Resize Handles */
.canvas-box-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border: 2px solid #1a1a2e;
    border-radius: 2px;
    z-index: 3;
}

.canvas-box-handle--nw { top: -5px; left: -5px; cursor: nw-resize; }
.canvas-box-handle--n  { top: -5px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
.canvas-box-handle--ne { top: -5px; right: -5px; cursor: ne-resize; }
.canvas-box-handle--e  { top: 50%; right: -5px; transform: translateY(-50%); cursor: e-resize; }
.canvas-box-handle--se { bottom: -5px; right: -5px; cursor: se-resize; }
.canvas-box-handle--s  { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.canvas-box-handle--sw { bottom: -5px; left: -5px; cursor: sw-resize; }
.canvas-box-handle--w  { top: 50%; left: -5px; transform: translateY(-50%); cursor: w-resize; }

/* Box Delete Button */
.canvas-box-delete {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background: var(--danger, #dc2626);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 4;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.canvas-box-delete:hover {
    opacity: 1;
}

/* Box Color Palette */
.canvas-box-palette {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 3px;
    background: rgba(0, 0, 0, 0.8);
    padding: 4px 6px;
    border-radius: 6px;
    z-index: 4;
    white-space: nowrap;
}

.canvas-box-swatch {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s ease, transform 0.1s ease;
}

.canvas-box-swatch:hover {
    transform: scale(1.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.canvas-box-swatch--active {
    border-color: #ffffff !important;
    transform: scale(1.15);
}

/* Player Card on Canvas */
.player-card-canvas {
    position: absolute;
    background: #1a1a2e;
    border: 2px solid var(--border-glass);
    border-radius: var(--radius-md);
    cursor: move;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s ease;
    z-index: 8;
}

.player-card-canvas:hover {
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.3);
}

.player-card-canvas--selected {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.5);
    border-color: var(--accent-primary);
    z-index: 10;
}

.player-card-canvas--online {
    border-left: 3px solid #22c55e;
}

.player-card-canvas--offline {
    border-left: 3px solid #ef4444;
}

/* Player card content sections */
.player-card-canvas__status {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.player-card-canvas__content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    min-height: 0;
}

/* Screenshot mode - add padding and maintain aspect ratio */
.player-card-canvas__content:has(.player-card-canvas__screenshot) {
    padding: 0.4em;
}

.player-card-canvas__screenshot {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0.2em;
}

.player-card-canvas__no-screenshot {
    font-size: 2em;
    color: var(--text-muted);
    opacity: 0.5;
}

.player-card-canvas__name-bar {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 0.8em;
    font-size: 1.1em;
    font-weight: 500;
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    overflow: hidden;
}

.player-card-canvas__name-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Player card Info mode */
.player-card-canvas__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: 8px;
}

.player-card-canvas__info .player-card-canvas__name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.player-card-canvas__info .player-card-canvas__model {
    font-size: 10px;
    color: var(--text-muted);
}

.player-card-canvas__info .player-card-canvas__serial {
    font-size: 10px;
    color: var(--text-muted);
    font-family: monospace;
}

.player-card-canvas__info .player-card-canvas__experience {
    font-size: 10px;
    color: var(--accent-primary);
    margin-top: 4px;
}

/* Player card Network mode */
.player-card-canvas__network {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: 8px;
}

.player-card-canvas__network .player-card-canvas__ip {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    font-family: monospace;
}

.player-card-canvas__network .player-card-canvas__uptime,
.player-card-canvas__network .player-card-canvas__storage {
    font-size: 10px;
    color: var(--text-muted);
}

/* Player card Details mode (compact info display) */
.player-card-canvas__details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 0.2em;
    padding: 0.5em 0.6em;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.player-card-canvas__details-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.4em;
    width: 100%;
    line-height: 1.3;
}

.player-card-canvas__details-label {
    font-size: 1em;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.player-card-canvas__details-value {
    font-size: 1em;
    font-weight: 400;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Hide scrollbar for details but allow scrolling */
.player-card-canvas__details::-webkit-scrollbar {
    width: 3px;
}

.player-card-canvas__details::-webkit-scrollbar-track {
    background: transparent;
}

.player-card-canvas__details::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* Resize Handles */
.player-card-canvas .resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--accent-primary);
    border-radius: 50%;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.player-card-canvas--selected .resize-handle {
    opacity: 1;
}

.resize-handle--n  { top: -5px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
.resize-handle--s  { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.resize-handle--e  { right: -5px; top: 50%; transform: translateY(-50%); cursor: e-resize; }
.resize-handle--w  { left: -5px; top: 50%; transform: translateY(-50%); cursor: w-resize; }
.resize-handle--nw { top: -5px; left: -5px; cursor: nw-resize; }
.resize-handle--ne { top: -5px; right: -5px; cursor: ne-resize; }
.resize-handle--sw { bottom: -5px; left: -5px; cursor: sw-resize; }
.resize-handle--se { bottom: -5px; right: -5px; cursor: se-resize; }

/* Toolbar elements for grid controls */
.toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border-glass);
    margin: 0 8px;
}

.toolbar-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-right: 4px;
}

/* Legacy grid-cell styles - keeping for backwards compatibility */
.grid-cell {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    min-height: 60px;
    transition: all var(--transition-fast);
    position: relative;
}

.grid-cell--empty {
    background: rgba(255, 255, 255, 0.02);
}

.grid-cell--empty:hover {
    background: rgba(255, 255, 255, 0.05);
    border-style: dashed;
}

.grid-cell--player {
    cursor: grab;
}

.grid-cell--player:active {
    cursor: grabbing;
}

.grid-cell--drag-over {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--accent-primary);
    border-style: solid;
}

.grid-cell--player.dragging {
    opacity: 0.5;
}

/* Legacy Grid Player Card - keeping for backwards compatibility */
.grid-player {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.grid-player--online {
    border-left: 3px solid #22c55e;
}

.grid-player--offline {
    border-left: 3px solid #ef4444;
}

.grid-player__status {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 1;
}

.grid-player__content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 4px;
}

.grid-player__screenshot {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid-player__no-screenshot {
    font-size: 24px;
    color: var(--text-muted);
}

.grid-player__name-bar {
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Grid Player Info Mode */
.grid-player__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    padding: 4px;
}

.grid-player__info .grid-player__name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
}

.grid-player__info .grid-player__model {
    font-size: 9px;
    color: var(--text-muted);
}

.grid-player__info .grid-player__serial {
    font-size: 9px;
    color: var(--text-muted);
}

.grid-player__info .grid-player__experience {
    font-size: 9px;
    color: var(--accent-primary);
    margin-top: 2px;
}

/* Grid Player Network Mode */
.grid-player__network {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    padding: 4px;
}

.grid-player__network .grid-player__ip {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-primary);
    font-family: monospace;
}

.grid-player__network .grid-player__uptime,
.grid-player__network .grid-player__storage {
    font-size: 9px;
    color: var(--text-muted);
}

/* Saved/Load Layout Lists */
.saved-layouts-list,
.load-layouts-list {
    margin-top: var(--spacing-md);
    max-height: 200px;
    overflow-y: auto;
}

.saved-layout-item,
.load-layout-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-xs);
    cursor: pointer;
}

.saved-layout-item:hover,
.load-layout-item:hover {
    background: var(--bg-glass-light);
}

.saved-layout-item--selectable.selected {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.saved-layout-item--selectable.selected .saved-layout-name {
    color: white;
}

.saved-layout-item--selectable.selected .saved-layout-meta {
    color: rgba(255, 255, 255, 0.8);
}

.saved-layouts-header {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.saved-layout-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.saved-layout-name,
.load-layout-name {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
}

.saved-layout-date,
.load-layout-date {
    font-size: 11px;
    color: var(--text-muted);
}

.load-layout-grid {
    font-size: 11px;
    color: var(--accent-primary);
}

/* Load layout item with info and actions */
.load-layout-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-xs);
}

.load-layout-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 2px;
}

.load-layout-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.load-layout-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.empty-layouts {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* Responsive Player Grid */
@media (max-width: 768px) {
    .player-details-header {
        flex-direction: column;
    }

    .player-details-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .player-details-controls__left,
    .player-details-controls__center,
    .player-details-controls__right {
        justify-content: center;
    }

    .player-grid-canvas {
        aspect-ratio: auto;
        min-height: 400px;
    }

    .players-stats-bar {
        justify-content: center;
    }

    .stat-box {
        min-width: 80px;
    }
}

/* ============================================
   Reboot Button States
   ============================================ */

/* Rebooting state - disabled with visual feedback */
.btn--rebooting {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Fixed width to prevent button size jumping */
[data-action="reboot"] {
    min-width: 90px;
    text-align: center;
}

/* ============================================
   Tags List Page
   ============================================ */

.tags-table-container {
    margin-top: 16px;
}

.tags-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-secondary, #1a2332);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
}

.tags-table thead {
    background: var(--color-bg-tertiary, #0f1923);
}

.tags-table__th {
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted, rgba(255,255,255,0.5));
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.08));
}

.tags-table__th--value {
    width: 25%;
}

.tags-table__th--description {
    width: 40%;
}

.tags-table__th--players {
    width: 15%;
    text-align: center;
}

.tags-table__th--actions {
    width: 32%;
    text-align: right;
}

.tags-table__row {
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.05));
    transition: background 0.15s ease;
}

.tags-table__row:hover {
    background: rgba(255,255,255,0.03);
}

.tags-table__row:last-child {
    border-bottom: none;
}

.tags-table__td {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--color-text-primary, rgba(255,255,255,0.85));
    vertical-align: middle;
}

.tags-table__td--description {
    color: var(--color-text-secondary, rgba(255,255,255,0.6));
    font-size: 12px;
}

.tags-table__td--players {
    text-align: center;
}

.tags-table__td--actions {
    text-align: right;
}

.tags-table__action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.tag-players-modal__hint {
    margin-bottom: 12px;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
    font-size: 13px;
}

.tag-players-table-wrap {
    max-height: min(60vh, 420px);
    overflow: auto;
}

.tag-players-table {
    margin-top: 0;
}

.tags-empty-players {
    padding: 16px;
    text-align: center;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.5));
    font-size: 14px;
}

.modal__footer--split {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* Tag value chip */
.tag-value-chip {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    color: #a5b4fc;
}

/* Player count badges */
.tags-player-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.tags-player-badge--active {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.tags-player-badge--none {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.3);
}

/* No results message */
.tags-no-results {
    padding: 40px;
    text-align: center;
    color: var(--color-text-muted, rgba(255,255,255,0.4));
    font-size: 14px;
}

/* Ghost danger button variant */
.btn--ghost-danger:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Disabled action button */
.btn--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Form hint text */
.form-hint {
    font-size: 11px;
    color: var(--color-text-muted, rgba(255,255,255,0.4));
    margin-top: 4px;
}

/* ============================================
   Tag Picker (Player Details)
   ============================================ */

.tag-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.tag-picker__controls {
    display: flex;
    gap: 6px;
    align-items: center;
}

.tag-picker__add-btn {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 6px;
    white-space: nowrap;
}

.tag-picker__current {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.tag-picker__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    font-size: 12px;
    color: #a5b4fc;
}

.tag-picker__empty {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

/* ---- Tag Picker Modal ---- */

.tag-picker-modal {
    max-width: 720px;
    min-height: 520px;
    display: flex;
    flex-direction: column;
}

.tag-picker-modal .modal__header {
    align-items: flex-start;
}

.tag-picker-modal__header-content {
    min-width: 0;
}

.tag-picker-modal__subtitle {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    margin: 4px 0 0 0;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.tag-picker-modal__device-id {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.tag-picker-modal .modal__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.tag-picker-modal__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tag-picker-modal__count {
    margin-left: auto;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.tag-picker-modal__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 4px;
    flex: 1;
    min-height: 0;
}

.tag-picker-modal__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.tag-picker-modal__item:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.2);
}

.tag-picker-modal__item--selected {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.35);
}

.tag-picker-modal__item--selected:hover {
    background: rgba(99, 102, 241, 0.18);
}

.tag-picker-modal__checkbox {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #6366f1;
    cursor: pointer;
}

.tag-picker-modal__item-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.tag-picker-modal__item-value {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

.tag-picker-modal__item-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.3;
    min-width: 0;
}

.tag-picker-modal__item-desc:not(:empty)::before {
    content: ' – ';
    color: rgba(255, 255, 255, 0.25);
}

.tag-picker-modal__empty {
    padding: 30px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
    font-style: italic;
}

/* Scrollbar styling for tag list */
.tag-picker-modal__list::-webkit-scrollbar {
    width: 6px;
}

.tag-picker-modal__list::-webkit-scrollbar-track {
    background: transparent;
}

.tag-picker-modal__list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

.tag-picker-modal__list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Trigger Tags Row & Group */
.trigger-tags-row {
    width: 100%;
}

.trigger-tags-group {
    flex: 1;
    width: 100%;
    min-width: 100% !important;
}

.tag-picker__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 28px;
    margin-bottom: 6px;
}

.tag-picker__input-row {
    display: flex;
    gap: 8px;
    align-items: center;
    max-width: 400px;
}

.tag-picker__input-row .form-select--sm {
    flex: 1;
}

.form-label-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
}

/* Small chip variant for table display */
.tag-picker__chip--sm {
    padding: 1px 6px;
    font-size: 10px;
    border-radius: 3px;
}

/* Trigger tags cell in table */
.trigger-tags-cell {
    max-width: 200px;
}

.trigger-tags-cell__all {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

/* ==========================================
   SMART ASSETS MODULE
   ========================================== */

/* Upload Progress */
.sa-upload-progress {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-glass);
}

.sa-upload-progress__bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.sa-upload-progress__fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 0%;
}

.sa-upload-progress__text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

/* Smart Assets Grid */
.sa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.sa-card {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-glass);
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: default;
}

.sa-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.sa-card__thumbnail {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

.sa-card__thumbnail img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.sa-card__placeholder {
    font-size: 32px;
    color: rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

.sa-card__info {
    padding: 14px 16px 8px;
}

.sa-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}

.sa-card__meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
}

.sa-card__status {
    margin-bottom: 4px;
}

.sa-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.sa-badge--success {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.sa-badge--pending {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.sa-card__actions {
    padding: 8px 16px 14px;
    display: flex;
    gap: 8px;
}

/* Smart Asset Editor */
.sa-editor {
    display: flex;
    gap: 20px;
    min-height: calc(100vh - 250px);
}

.sa-editor__preview {
    flex: 0 0 400px;
    min-width: 0;
}

.sa-editor__thumbnail-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 12px;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sa-preview-row {
    display: flex;
    gap: 20px;
    margin-bottom: 0;
}

.sa-preview-col {
    flex: 1;
    min-width: 0;
}

.sa-preview-img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: contain;
}

.sa-preview-placeholder {
    padding: 40px 20px;
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

/* Locations table: fixed layout so headers and cells align */
.sa-assignments-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.sa-assignments-table th,
.sa-assignments-table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.12));
}
.sa-assignments-table th {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary, #fff);
}
.sa-assignments-table td {
    font-size: 13px;
    color: var(--text-primary, #fff);
}
.sa-assignments-table th:nth-child(1),
.sa-assignments-table td:nth-child(1) { width: 18%; }
.sa-assignments-table th:nth-child(2),
.sa-assignments-table td:nth-child(2) { width: 12%; }
.sa-assignments-table th:nth-child(3),
.sa-assignments-table td:nth-child(3) { width: 16%; }
.sa-assignments-table th:nth-child(4),
.sa-assignments-table td:nth-child(4) { width: 45%; }
.sa-assignments-table th:nth-child(5),
.sa-assignments-table td:nth-child(5) { width: 9%; text-align: right; white-space: nowrap; }

.sa-assignments-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.sa-assignments-toolbar .search-input {
    flex: 1;
    min-width: 200px;
    max-width: 320px;
}
.sa-assignments-count {
    font-size: 12px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}
.sa-assignments-table-wrapper {
    overflow: auto;
    max-height: 60vh;
}
.sa-assignments-table th.sortable {
    cursor: pointer;
    user-select: none;
}
.sa-assignments-table th.sortable:hover {
    background: rgba(255, 255, 255, 0.05);
}
.sa-assignments-table th.sortable .sort-icon {
    margin-left: var(--spacing-xs, 4px);
    opacity: 0.5;
}
.sa-assignments-table th.sortable[data-sort-direction="asc"] .sort-icon,
.sa-assignments-table th.sortable[data-sort-direction="desc"] .sort-icon {
    font-size: 0;
    opacity: 1;
}
.sa-assignments-table th.sortable[data-sort-direction="asc"] .sort-icon::before {
    content: "↑";
    font-size: 12px;
}
.sa-assignments-table th.sortable[data-sort-direction="desc"] .sort-icon::before {
    content: "↓";
    font-size: 12px;
}

.sa-editor__canvas-container {
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    overflow: hidden;
    padding: 16px;
}

.sa-form-element {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.sa-form-element:last-child {
    border-bottom: none;
}

.sa-form-element__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.sa-form-element__row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sa-form-element--text-row .sa-form-element__row {
    flex-wrap: nowrap;
}
.sa-form-element--text-row .sa-form-element__label,
.sa-form-element--image-row .sa-form-element__label {
    min-width: 200px;
    flex-shrink: 0;
}
.sa-form-element--text-row .sa-form-element__label {
    white-space: nowrap;
}
.sa-form-element--text-row .sa-form-element__input {
    flex: 1;
    min-width: 120px;
}
.sa-form-element__line-spacing-label {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}
.sa-form-element__line-spacing-select {
    width: 70px;
    padding: 6px 4px;
    font-size: 12px;
    flex-shrink: 0;
}

.sa-form-element--image-row .sa-form-element__row.sa-form-element__image-row-inner {
    flex-wrap: nowrap;
}
.sa-form-element--image-row .sa-form-element__label {
    white-space: nowrap;
}

.sa-form-element__icon {
    font-size: 16px;
    flex-shrink: 0;
}

.sa-form-element__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.sa-form-element__original {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-style: italic;
}

.sa-form-element__input {
    width: 100%;
    box-sizing: border-box;
}

.sa-form-element__image-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sa-form-element__image-preview {
    width: 80px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--bg-tertiary);
    flex-shrink: 0;
    min-width: 80px;
}

.sa-form-element__image-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sa-form-element__replacement {
    font-size: 12px;
    color: var(--success);
    font-weight: 500;
}

.sa-zoom-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sa-zoom-control__label {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.sa-zoom-control__slider {
    width: 80px;
    min-width: 80px;
    height: 6px;
    accent-color: var(--primary);
}

.sa-zoom-control__input {
    width: 64px;
    padding: 6px 6px;
    font-size: 12px;
    text-align: right;
}

.sa-zoom-control__suffix {
    font-size: 12px;
    color: var(--text-secondary);
}

.sa-editor__canvas-container canvas {
    display: block;
    border-radius: 8px;
}

#pdfCanvas {
    position: relative;
    z-index: 1;
}

#overlayCanvas {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    pointer-events: none;
}

#elementOverlays {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
}

.sa-editor__loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
    border-radius: 12px;
}

/* Element Overlays */
.sa-element-overlay {
    position: absolute;
    border: 2px dashed transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.sa-element-overlay:hover {
    border-color: rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.05);
}

.sa-element-overlay--image {
    border-color: transparent;
}

.sa-element-overlay--image:hover {
    border-color: rgba(59, 130, 246, 0.6);
    background: rgba(59, 130, 246, 0.05);
}

.sa-element-overlay--text {
    border-color: transparent;
}

.sa-element-overlay--text:hover {
    border-color: rgba(16, 185, 129, 0.6);
    background: rgba(16, 185, 129, 0.05);
}

.sa-element-overlay--selected {
    border-style: solid !important;
}

.sa-element-overlay--selected.sa-element-overlay--image {
    border-color: rgba(59, 130, 246, 0.9) !important;
    background: rgba(59, 130, 246, 0.1) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.sa-element-overlay--selected.sa-element-overlay--text {
    border-color: rgba(16, 185, 129, 0.9) !important;
    background: rgba(16, 185, 129, 0.1) !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}

.sa-element-overlay--modified {
    border-style: dashed;
    border-color: rgba(245, 158, 11, 0.6);
}

/* Properties Panel */
.sa-editor__panel {
    width: 320px;
    flex-shrink: 0;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-glass);
    overflow-y: auto;
    max-height: calc(100vh - 250px);
}

.sa-editor__panel-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-glass);
}

.sa-editor__panel-header--with-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sa-editor__panel-header--with-actions h3 {
    margin: 0;
}

.sa-editor__header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.sa-editor__upload-label {
    margin: 0;
    cursor: pointer;
}

.btn--xs {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
}

.sa-editor__panel-header h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.sa-editor__panel-body {
    padding: 16px;
}

.sa-editor__panel-empty {
    padding: 20px 16px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

.sa-prop-group {
    margin-bottom: 12px;
}

.sa-prop-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 4px;
}

.sa-prop-value {
    font-size: 13px;
    color: var(--text-primary);
    word-break: break-word;
}

.sa-prop-value--small {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    max-height: 60px;
    overflow-y: auto;
}

.sa-prop-image-preview {
    margin-top: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 8px;
    text-align: center;
}

.sa-prop-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.sa-text-edit {
    font-size: 13px;
    resize: vertical;
    min-height: 60px;
}

/* Elements List */
.sa-editor__elements-list {
    max-height: 300px;
    overflow-y: auto;
}

.sa-element-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.1s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sa-element-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.sa-element-item--active {
    background: rgba(99, 102, 241, 0.1);
    border-left: 3px solid var(--primary);
}

.sa-element-item__icon {
    font-size: 14px;
    flex-shrink: 0;
}

.sa-element-item__label {
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.sa-element-item__modified {
    font-size: 10px;
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    padding: 1px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Asset Picker Modal */
.sa-asset-picker {
    display: flex;
    height: 100%;
}

.sa-asset-picker__folders {
    width: 200px;
    border-right: 1px solid var(--border-glass);
    overflow-y: auto;
    flex-shrink: 0;
}

.sa-asset-picker__assets {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    align-content: start;
}

.sa-picker-folder {
    padding: 10px 12px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.1s ease;
}

.sa-picker-folder:hover {
    background: rgba(255, 255, 255, 0.04);
}

.sa-picker-folder--active {
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary);
}

.sa-picker-asset {
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.15s ease;
    background: rgba(0, 0, 0, 0.2);
}

.sa-picker-asset:hover {
    border-color: rgba(99, 102, 241, 0.4);
}

.sa-picker-asset--selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.sa-picker-asset img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.sa-picker-asset__name {
    padding: 4px 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Generation Spinner */
.sa-generate-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--primary);
    border-radius: 50%;
    margin: 0 auto;
    animation: sa-spin 0.8s linear infinite;
}

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

/* Breadcrumb separator */
.breadcrumb-separator {
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
    padding: 0 4px;
}

/* Responsive adjustments for Smart Assets Editor */
@media (max-width: 768px) {
    .sa-editor {
        flex-direction: column;
    }
    
    .sa-editor__panel {
        width: 100%;
        max-height: 400px;
    }
    
    .sa-preview-row {
        flex-direction: column;
    }
    
    .sa-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

/* ============================================
   PUBLISH EXPERIENCE MODAL
   ============================================ */

.modal--publish-experience {
    max-width: 860px;
    width: 95%;
}

.modal--publish-experience .modal__body {
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--spacing-xl);
}

.publish-experience-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    font-weight: 500;
}

.publish-experience-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-lg);
}

/* Compact row: name | stats | meta | Publish — same content, short height for long lists */
.publish-experience-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    min-height: 44px;
}

.publish-experience-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px rgba(var(--accent-primary-rgb), 0.3), var(--shadow-sm);
}

.publish-experience-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.publish-experience-card__stats {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
    white-space: nowrap;
}

.publish-experience-card__meta {
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
    min-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.publish-experience-card__btn {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .publish-experience-card {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        min-height: auto;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .publish-experience-card__name {
        flex: 1 1 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .publish-experience-card__stats,
    .publish-experience-card__meta {
        max-width: none;
    }

    .publish-experience-card__btn {
        margin-left: auto;
    }
}

@media (max-width: 600px) {
    .modal--publish-experience {
        max-width: 98%;
    }
}

/* ============================================
   PUBLISH MODULE PAGE
   ============================================ */

.publish-action-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: 0;
}

.publish-action-button-wrap {
    margin-left: var(--spacing-lg);
}

/* On-Demand | Schedule as a single grouped control (no gap between buttons) */
.publish-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
}

.publish-tabs .btn--toggle:not(:first-child) {
    margin-left: -1px;
}

.publish-filters-bar .form-select.form-select--match-input {
    width: auto;
    min-width: 160px;
    height: auto;
    min-height: 38px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 14px;
}

.publish-filters-bar .publish-location-search-row .form-input {
    min-width: 200px;
}

.publish-filters-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: var(--spacing-md);
}

.publish-filters-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    text-align: left;
}

.publish-filters-row .filter-label {
    font-size: 0.85em;
    color: var(--text-muted);
}

.publish-location-search-row {
    position: relative;
}

.location-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-secondary, #1e293b);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    z-index: 10;
    margin-top: 4px;
}

.location-search-item {
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    font-size: 0.9em;
}

.location-search-item:hover {
    background: var(--bg-glass-light, rgba(255,255,255,0.1));
}

.publish-filters-actions {
    margin-left: auto;
}

.publish-select-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.publish-selected-count {
    margin-left: var(--spacing-sm);
    font-size: 13px;
    color: var(--text-muted);
}

.data-table.col-check { width: 40px; }
.data-table .col-device-id { min-width: 140px; }
.data-table .col-name { min-width: 180px; }
.data-table .col-location { min-width: 160px; }
.data-table .col-experience { min-width: 200px; }

.table-container.hide { display: none; }

/* Publish log row status colors */
#publishLogTable tbody tr.publish-log-row--equal {
    background: rgba(40, 167, 69, 0.18);
}

#publishLogTable tbody tr.publish-log-row--equal:hover {
    background: rgba(40, 167, 69, 0.26);
}

#publishLogTable tbody tr.publish-log-row--not-equal {
    background: rgba(255, 140, 0, 0.18);
}

#publishLogTable tbody tr.publish-log-row--not-equal:hover {
    background: rgba(255, 140, 0, 0.26);
}

/* Schedule view */
.schedule-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.schedule-view-toggle { display: flex; gap: var(--spacing-sm); }

.schedule-priority-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.schedule-priority-label { font-size: 0.9em; color: var(--text-muted); }

.schedule-priority-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.calendar-nav {
    display: flex;
    align-items: center;
}

.calendar-container { margin-top: var(--spacing-md); }

.calendar-month-view,
.calendar-week-view,
.calendar-day-view {
    min-height: 320px;
}

.calendar-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.calendar-grid th,
.calendar-grid td {
    border: 1px solid var(--border-color);
    padding: var(--spacing-sm);
    vertical-align: top;
}

.calendar-grid th {
    background: var(--bg-glass-dark, rgba(255,255,255,0.05));
    color: var(--text-muted);
    font-weight: 600;
}

.calendar-cell {
    min-height: 80px;
    cursor: pointer;
}

.calendar-cell:hover:not(.calendar-cell--empty) {
    background: var(--bg-glass-light, rgba(255,255,255,0.08));
}

.calendar-cell--empty {
    background: var(--bg-glass-dark, rgba(255,255,255,0.03));
    cursor: default;
}

.calendar-day-num {
    font-weight: 600;
    margin-bottom: 4px;
}

.calendar-events {
    font-size: 0.8em;
    color: var(--text-muted);
}

/* ============================================
   PLACER.AI IMPORT & DEMOGRAPHICS
   ============================================ */

.placer-section {
    margin-bottom: 32px;
}

.placer-section__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.placer-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.placer-section__actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.placer-upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .placer-upload-grid {
        grid-template-columns: 1fr;
    }
}

/* Provisioning page: single upload card (avoid empty second grid column) */
.placer-upload-grid--single {
    grid-template-columns: 1fr;
    max-width: 560px;
}

.provisioning-section .placer-section__desc {
    margin-bottom: 12px;
    max-width: 720px;
}

.provisioning-actions {
    margin-bottom: 16px;
}

.provisioning-entries-panel {
    width: 100%;
    margin-top: 8px;
}

.provisioning-entries-panel .placer-empty,
.provisioning-entries-panel .provisioning-empty {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 28px 20px;
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-xl);
}

/* Provisioning modals: read-only device id in edit dialog */
.provisioning-entry-device-id {
    padding: 8px 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    opacity: 0.9;
    word-break: break-all;
}

.placer-upload-card {
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-xl);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.placer-upload-card__icon {
    font-size: 36px;
}

.placer-upload-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.placer-upload-card p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.placer-upload-drop {
    width: 100%;
    padding: 24px;
    border: 2px dashed var(--border-glass);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-muted);
    font-size: 13px;
}

.placer-upload-drop:hover,
.placer-upload-drop.dragover {
    border-color: var(--color-primary);
    background: rgba(96, 165, 250, 0.05);
    color: var(--text-primary);
}

.placer-upload-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-glass);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-primary);
}

.placer-progress {
    margin: 16px 0;
}

.placer-progress__bar {
    height: 6px;
    background: var(--bg-glass-dark);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.placer-progress__fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 0;
}

.placer-progress__text {
    font-size: 13px;
    color: var(--text-muted);
}

.placer-progress__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.placer-results__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.placer-venue-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--text-muted);
}

.placer-venue-stat strong {
    color: var(--text-primary);
}

.placer-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

.placer-location-list {
    max-height: 300px;
    overflow-y: auto;
}

.placer-location-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-glass-dark);
    cursor: pointer;
    transition: background 0.15s;
}

.placer-location-item:hover {
    background: var(--bg-glass);
}

.placer-location-item__sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.badge--success {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.badge--warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.badge--info {
    background: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
}

.badge--default {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

.btn-action--info {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

.btn-action--info:hover {
    background: rgba(96, 165, 250, 0.25);
}

/* Demographics Dashboard */

.placer-dash {
    padding: 0;
}

.placer-dash__venue-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px;
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-xl);
}

.placer-dash__venue-info h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.placer-dash__venue-info p {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--text-muted);
}

.placer-dash__venue-info .badge {
    margin-right: 6px;
}

.placer-dash__venue-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 13px;
    color: var(--text-muted);
}

.placer-dash__section {
    margin-bottom: 28px;
}

.placer-dash__section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-glass-dark);
}

.placer-dash__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.placer-dash__stats .stat-card {
    padding: 16px;
    text-align: center;
}

.placer-dash__stats .stat-card__value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.placer-dash__stats .stat-card__unit {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 4px;
}

.placer-dash__stats .stat-card__label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.placer-dash__charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .placer-dash__charts-row {
        grid-template-columns: 1fr;
    }
}

.placer-chart-card {
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-glass-dark);
    border-radius: var(--radius-xl);
    padding: 16px;
}

.placer-chart-card--wide {
    grid-column: 1 / -1;
}

.placer-chart {
    width: 100%;
    height: 300px;
}

/* Audience wizard insights: section spacing + tall trend/dwell (align with location demographics layout) */
.audience-wizard-demographics {
    margin-top: 4px;
}

.audience-chart-trend,
.audience-chart-dwell {
    min-height: 300px;
}

/* Audience wizard: make Insights map significantly taller for readability */
.audience-map-chart {
    height: 100%;
}

@media (max-width: 1100px) {
    .audience-map-chart {
        height: 520px;
    }
}

@media (max-width: 768px) {
    .audience-map-chart {
        height: 420px;
    }
}

.placer-loading,
.placer-no-data,
.placer-error {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 15px;
}

.placer-error {
    color: #ef4444;
}

/* Vendor Pad–style AI Summary dashboard (replicate LG/Vendor Pad analytics report) */
.vp-dashboard {
    padding: 20px;
    max-width: 1400px;
    background-color: #f9f9f9;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.vp-period {
    color: #666;
    margin-bottom: 20px;
    font-size: 0.9rem;
}
.vp-warning {
    color: #856404;
    padding: 10px;
    background: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}
.vp-ai-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: #c8102e;
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
}
.vp-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}
.vp-kpi-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.vp-kpi-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: #c8102e;
    margin: 10px 0;
}
.vp-kpi-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.vp-kpi-subtext {
    font-size: 0.75rem;
    color: #999;
    margin-top: 5px;
}
.vp-section {
    margin-bottom: 20px;
}
.vp-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.vp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.vp-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    margin: 0;
    text-transform: uppercase;
}
.vp-btn-details {
    background: transparent;
    border: 1px solid #ccc;
    color: #666;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
}
.vp-btn-details:hover {
    background: #f0f0f0;
}
.vp-chart {
    width: 100%;
    min-height: 200px;
}
.vp-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.vp-chart-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
    margin: 0;
    text-transform: uppercase;
}
.vp-tabs {
    display: flex;
    gap: 10px;
}
.vp-tab {
    background: transparent;
    border: 1px solid #ccc;
    color: #666;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
}
.vp-tab.active {
    background: #666;
    color: #fff;
    border-color: #666;
}
.vp-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
@media (max-width: 900px) {
    .vp-two-col { grid-template-columns: 1fr; }
    .vp-kpi-row { grid-template-columns: 1fr; }
}
.vp-col {
    min-width: 0;
}
.vp-matrix-cols {
    display: flex;
    gap: 15px;
}
.vp-matrix-col {
    flex: 1;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 15px;
}
.vp-matrix-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.vp-matrix-name { font-weight: 700; font-size: 1.1rem; color: #333; }
.vp-matrix-pct { font-weight: 700; font-size: 1.1rem; }
.vp-matrix-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}
.vp-matrix-stat { text-align: center; }
.vp-matrix-stat-lbl { font-size: 0.7rem; color: #999; text-transform: uppercase; margin-bottom: 4px; }
.vp-matrix-stat-val { font-size: 1rem; font-weight: 700; color: #333; }
.vp-matrix-bar-bg {
    height: 8px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
}
.vp-matrix-bar-fill {
    height: 100%;
    border-radius: 4px;
}
.vp-legend-center {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}
.vp-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #666;
}
.vp-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.vp-drill-metrics {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.vp-drill-metric {
    flex: 1;
}
.vp-drill-metric-lbl {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.vp-drill-metric-val {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
}
.vp-highlights-section {
    background: #fff;
}
.vp-highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.vp-highlight-card {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
}
.vp-highlight-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.vp-highlight-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #c8102e;
    color: #fff;
    font-size: 0.85rem;
    margin-right: 10px;
}
.vp-highlight-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.vp-highlight-metric {
    flex: 1;
    min-width: 45%;
}
.vp-highlight-metric-lbl {
    font-size: 0.7rem;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.vp-highlight-metric-val {
    font-size: 0.95rem;
    font-weight: 700;
    color: #333;
}
.vp-highlight-body {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
}
.vp-highlight-body ul {
    margin: 0;
    padding-left: 20px;
}
.vp-highlight-body li {
    margin-bottom: 8px;
}

/* USA map area: no external image (avoids 404). Use Zynchro dark background. */
.vp-map-placeholder {
    background: var(--bg-glass-dark, rgba(255,255,255,0.05));
    border-radius: var(--radius-sm, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #94a3b8);
    font-size: 0.9rem;
}
.vp-map-placeholder::before {
    content: "USA Heat Map";
}

/* Analytics report: spacing below header + full width + Zynchro dark theme */
.analytics-report-page .container {
    padding-top: var(--spacing-xl);
}
.analytics-report-page .vp-dashboard {
    max-width: none;
    width: 100%;
    background: transparent;
    color: var(--text-primary);
    padding: var(--spacing-lg) 0;
}
.analytics-report-page .vp-period {
    color: var(--text-muted);
}
.analytics-report-page .vp-warning {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
}
.analytics-report-page .vp-kpi-card,
.analytics-report-page .vp-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass, rgba(255,255,255,0.12));
    color: var(--text-primary);
}
.analytics-report-page .vp-kpi-label,
.analytics-report-page .vp-section-title {
    color: var(--text-primary);
}
.analytics-report-page .vp-kpi-subtext {
    color: var(--text-muted);
}
.analytics-report-page .vp-card-header {
    border-bottom-color: var(--border-glass);
}
.analytics-report-page .vp-btn-details {
    border-color: var(--border-glass);
    color: var(--text-primary);
}
.analytics-report-page .vp-btn-details:hover {
    background: var(--bg-glass-light);
}
.analytics-report-page .vp-matrix-name,
.analytics-report-page .vp-matrix-stat-val,
.analytics-report-page .vp-drill-metric-val,
.analytics-report-page .vp-highlight-metric-val {
    color: var(--text-primary);
}
.analytics-report-page .vp-matrix-stat-lbl,
.analytics-report-page .vp-drill-metric-lbl,
.analytics-report-page .vp-highlight-metric-lbl {
    color: var(--text-muted);
}
.analytics-report-page .vp-chart-title {
    color: var(--text-primary);
}
.analytics-report-page .vp-tab {
    color: var(--text-muted);
    border-color: var(--border-glass);
}
.analytics-report-page .vp-tab.active {
    background: #c8102e;
    color: #fff;
    border-color: #c8102e;
}
/* Highlight cards: dark background so light text is readable */
.analytics-report-page .vp-highlight-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass, rgba(255,255,255,0.12));
}
.analytics-report-page .vp-highlight-title,
.analytics-report-page .vp-highlight-num {
    color: var(--text-primary);
}
.analytics-report-page .vp-highlight-body,
.analytics-report-page .vp-highlight-body li {
    color: var(--text-secondary, #cbd5e1);
}

/* Multi-select dropdown with checkboxes (analytics playbacks: State, City, Location, Experience, Asset).
   Reuse .multi-select-wrap + .multi-select-dropdown for consistent styling elsewhere. */
.playbacks-report-filters .multi-select-wrap,
.multi-select-wrap {
    position: relative;
}
.playbacks-multi-dropdown,
.multi-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 360px;
    max-width: min(520px, 90vw);
    width: max-content;
    max-height: 280px;
    overflow-x: visible;
    overflow-y: auto;
    background: #1e293b;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    z-index: 100;
    box-shadow: var(--shadow-md);
}
.playbacks-multi-dropdown label,
.multi-select-dropdown label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.9rem;
    white-space: nowrap;
    min-width: 0;
    overflow: visible;
}
.playbacks-multi-dropdown input[type="checkbox"],
.multi-select-dropdown input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}
.analytics-dropdown-hint {
    display: block;
    padding: 8px 0;
    font-size: 0.85rem;
    color: var(--text-muted, #94a3b8);
}

.location-demographics-panel {
    margin-top: 16px;
    border-top: 1px solid var(--border-glass-dark);
    padding-top: 16px;
}

.location-detail-section--full {
    width: 100%;
}

.player-demographics-view {
    margin-top: 20px;
}

/* Simulate Rundown — location search shows ID, name, full address */
.rundown-location-results--scroll {
    max-height: 280px;
    overflow-y: auto;
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    background: var(--bg-secondary, rgba(15, 23, 42, 0.95));
}

.rundown-loc-result {
    padding: 10px 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    line-height: 1.35;
}

.rundown-loc-result:last-child {
    border-bottom: none;
}

.rundown-loc-result:hover,
.rundown-loc-result:focus {
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

.rundown-loc-result-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
}

.rundown-loc-result-name {
    font-weight: 600;
    color: var(--text-primary, #f1f5f9);
}

.rundown-loc-pill {
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.25);
    color: var(--text-secondary, #cbd5e1);
}

.rundown-loc-sub {
    font-size: 0.75rem;
    opacity: 0.65;
}

.rundown-loc-result-addr {
    margin-top: 4px;
    font-size: 0.8rem;
    opacity: 0.85;
    word-break: break-word;
}

.rundown-location-selected {
    font-size: 0.88rem;
    line-height: 1.45;
}

.rundown-loc-selected-inner {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.2);
}

.rundown-loc-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 6px;
}

.rundown-loc-row:last-child {
    margin-bottom: 0;
}

.rundown-loc-row--address {
    flex-direction: column;
    align-items: flex-start;
}

.rundown-loc-label {
    min-width: 5.5rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
}

.rundown-loc-value {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

/* Campaign section: rundown preview banner + read-only playlist rows */
.rundown-simulation-banner {
    margin: 0 0 12px 0;
    padding: 0;
}

.rundown-simulation-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 16px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.12);
    font-size: 0.88rem;
    line-height: 1.45;
}

.rundown-simulation-banner__title {
    font-weight: 600;
    color: var(--text-primary, #f1f5f9);
    margin-right: 8px;
}

.rundown-simulation-banner__details {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-secondary, #cbd5e1);
}

.rundown-simulation-banner__line {
    display: block;
}

.rundown-simulation-banner__note {
    display: block;
    font-size: 0.82rem;
    opacity: 0.85;
}

.rundown-simulation-banner__actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.asset-item--rundown-preview {
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.15);
}

.rundown-preview-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.rundown-preview-order {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.25);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #e2e8f0);
}

.rundown-preview-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rundown-preview-name {
    font-weight: 500;
    color: var(--text-primary, #f8fafc);
    word-break: break-word;
}

.rundown-preview-campaign {
    font-size: 0.8rem;
    color: #a5b4fc;
}

.rundown-preview-campaign--muted {
    opacity: 0.65;
    color: var(--text-muted, #94a3b8);
}

.rundown-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 2px;
}

.rundown-meta-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14rem;
}

.rundown-preview-adjacent-warn {
    margin-top: 6px;
    font-size: 0.7rem;
    color: #fbbf24;
    font-weight: 600;
}

/* Rundown preview: same asset row as normal sections; meta pills under collapsed title */
.asset-rundown-collapsed-extra {
    width: 100%;
    margin-top: 4px;
    padding-left: 2px;
}

.asset-item.expanded .asset-rundown-collapsed-extra {
    display: none;
}

.asset-actions-row--rundown-readonly {
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.asset-actions-row--rundown-readonly .asset-btn--readonly {
    pointer-events: none;
    opacity: 0.88;
    cursor: default;
    user-select: none;
}

/* Add Smart Assets modal (Image Studio / PDF Studio) */
.smart-assets-add-modal .simulate-description {
    margin-bottom: 16px;
}

.smart-assets-source-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}

@media (max-width: 640px) {
    .smart-assets-source-grid {
        grid-template-columns: 1fr;
    }
}

.smart-assets-source-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 18px;
    text-align: left;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(15, 23, 42, 0.6);
    color: var(--text-primary, #f1f5f9);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.smart-assets-source-card:hover {
    border-color: rgba(99, 102, 241, 0.55);
    background: rgba(99, 102, 241, 0.12);
}

.smart-assets-source-card__title {
    font-size: 1.05rem;
    font-weight: 600;
}

.smart-assets-source-card__desc {
    font-size: 0.85rem;
    opacity: 0.8;
}

.smart-assets-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 12px;
}

.smart-assets-list-subtitle {
    font-weight: 600;
    color: var(--text-secondary, #cbd5e1);
}

.smart-assets-search-wrap {
    flex: 1;
    min-width: 160px;
    max-width: 280px;
}

.smart-assets-list-container {
    max-height: min(52vh, 420px);
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.15);
}

.smart-assets-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
}

.smart-assets-row:hover:not(.smart-assets-row--disabled) {
    background: rgba(255, 255, 255, 0.05);
}

.smart-assets-row--disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.smart-assets-row-cb {
    flex-shrink: 0;
}

.smart-assets-row-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.smart-assets-row-thumb--placeholder {
    width: 56px;
    height: 56px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
}

.smart-assets-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.smart-assets-row-name {
    font-weight: 500;
    word-break: break-word;
}

.smart-assets-row-meta {
    font-size: 0.78rem;
    opacity: 0.7;
}

.smart-assets-generate-hint {
    margin-top: 10px;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    body * {
        visibility: hidden;
    }
    #campaignReportModalOverlay, #campaignReportModalOverlay * {
        visibility: visible;
    }
    #campaignReportModalOverlay {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: none;
    }
    .modal {
        box-shadow: none;
        border: none;
        width: 100%;
        max-width: 100%;
    }
    .modal__close, #campaignReportExportBtn, #campaignReportModalOkBtn {
        display: none !important;
    }
}

/* ==========================================================================
   Audience Smart Group Wizard
   ========================================================================== */

.audience-wizard-container {
    padding-bottom: 100px;
}

.audience-wizard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.audience-wizard-header__title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.wizard-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.wizard-step.active {
    opacity: 1;
}

.wizard-step.completed {
    opacity: 1;
}

.wizard-step__number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 2px solid var(--border-glass);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.wizard-step.active .wizard-step__number {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.wizard-step.completed .wizard-step__number {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.wizard-step__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.wizard-step.active .wizard-step__label {
    color: var(--text-primary);
}

.wizard-step__line {
    flex: 1;
    height: 2px;
    background: var(--border-glass);
    margin: 0 16px;
    transform: translateY(-12px);
}

.wizard-content {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin-bottom: 24px;
    min-height: 400px;
}

.wizard-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.wizard-panel.active {
    display: block;
}

.wizard-panel__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.wizard-panel__subtitle {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--border-glass);
}

.wizard-footer__right {
    display: flex;
    gap: 12px;
    margin-left: auto;
}

.audience-map-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
    align-items: stretch;
}

.audience-map-split__map {
    min-height: 620px;
}

.audience-map-split__side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    min-height: 620px;
}

.audience-split-chart {
    height: 100%;
    min-height: 280px;
}

@media (max-width: 1100px) {
    .audience-map-split__map,
    .audience-map-split__side {
        min-height: 520px;
    }
}

@media (max-width: 900px) {
    .audience-map-split {
        grid-template-columns: 1fr;
    }
    .audience-map-split__side {
        min-height: 420px;
        grid-template-rows: 1fr 1fr;
    }
    .audience-map-split__map {
        min-height: 420px;
    }
}

/* Audience Wizard Rule Builder Adjustments */
.rule-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.rules-list .rule-row:last-child {
    margin-bottom: 0;
}

.rule-field {
    flex: 1;
    min-width: 150px;
}

/* Audience wizard: metric list is long; operator labels are short (is, >, In Between, …) */
.rule-row .rule-field--property {
    flex: 2 1 240px;
    min-width: 160px;
}

.rule-row .rule-field--operator {
    flex: 0 0 10rem;
    min-width: 4.75rem;
    max-width: 11rem;
}

.rule-row .rule-field--value {
    flex: 1 1 140px;
    min-width: 100px;
}

.rule-row .rule-field--property .form-select,
.rule-row .rule-field--operator .form-select {
    width: 100%;
    min-width: 0;
}

/* Allow value column to shrink when showing In Between (min/max) so the row stays one line */
.rule-field--value:has(.rule-field__between) {
    min-width: 0;
}

/* In Between: keep Min / and / Max on one row; global .form-input is width:100% so override here */
.rule-field__between {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.rule-field__between .form-input {
    width: auto;
    flex: 1 1 0;
    min-width: 4.5rem;
    max-width: 8rem;
}

.rule-field__between-sep {
    color: #94a3b8;
    font-size: 0.875rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.rule-item__between-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.rule-item__between-wrap .form-input {
    width: auto;
    flex: 1 1 0;
    min-width: 4.5rem;
    max-width: 8rem;
}

.rule-item__between-sep {
    color: #94a3b8;
    font-size: 0.875rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.rule-logic-container {
    display: flex;
    align-items: center;
    margin: 8px 0 12px 0;
    padding-left: 12px;
}

.rule-set-logic-connector {
    display: flex;
    justify-content: center;
    margin: 16px 0;
}

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