/* ============================================================================
   CSS VARIABLES - Design Tokens
   ============================================================================ */
:root {
    /* ===== Color Palette ===== */
    
    /* Text Colors */
    --color-text-primary: #212529;       /* Bootstrap primary text */
    --color-text-secondary: #495057;     /* Darker secondary text */
    --color-text-muted: #6c757d;        /* Bootstrap secondary gray - for muted text, notes, separators */
    --color-text-light: #adb5bd;        /* Light gray for placeholders */
    --color-text-default: #666;          /* Default fallback text color */
    
    /* Background Colors */
    --color-bg-white: #ffffff;
    --color-bg-light: #f8f9fa;          /* Light gray backgrounds */
    --color-bg-lighter: #e9ecef;        /* Even lighter gray */
    
    /* Border Colors */
    --color-border-light: #dee2e6;       /* Light borders */
    --color-border-medium: #ced4da;      /* Medium borders for inputs */
    --color-border-dark: #adb5bd;        /* Darker borders on hover */
    
    /* Brand Colors - Bootstrap Standard */
    --color-primary: #007bff;            /* Bootstrap primary blue */
    --color-success: #28a745;            /* Bootstrap success green */
    --color-danger: #dc3545;             /* Bootstrap danger red */
    --color-warning: #ffc107;            /* Bootstrap warning yellow */
    --color-info: #17a2b8;               /* Bootstrap info cyan */
    
    /* State Colors - Lighter Variants */
    --color-primary-light: rgba(0, 123, 255, 0.1);
    --color-primary-lighter: #e2f3ff;
    --color-success-light: #d4edda;
    --color-success-border: #c3e6cb;
    --color-danger-light: #f8d7da;
    --color-danger-border: #f5c6cb;
    --color-warning-light: #fff3cd;
    
    /* Focus/Shadow Colors */
    --color-focus-shadow: rgba(0, 123, 255, 0.25);
    
    /* Drag & Drop Colors */
    --color-drag-indicator: #007bff;
    
    /* ===== Spacing ===== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    
    /* ===== Typography ===== */
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    
    /* ===== Effects ===== */
    --border-radius-sm: 3px;
    --border-radius-default: 4px;
    --border-radius-md: 5px;
    --border-radius-lg: 8px;
    --border-radius-pill: 20px;
    --transition-default: all 0.3s ease;
    --transition-fast: all 0.2s ease;
    
    /* ===== Shadows ===== */
    --shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-hover: 0 0 10px rgba(255, 193, 7, 0.5);
}

/* ============================================================================
   Main Styles
   ============================================================================ */

/* Main layout improvements */
.project-header {
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: var(--spacing-lg);
}

/* Remove focus outline from all buttons */
button:focus,
.btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.characters-section {
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 20px;
}

.character-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.character-toggle {
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.character-toggle:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.character-toggle.muted {
    opacity: 0.5;
}

.script-section {
    margin-top: 20px;
}

/* Accordion styling for scenes */
.scene-accordion-item {
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
}

.scene-header-wrapper {
    display: flex;
    background-color: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border-light);
}

.scene-accordion-header {
    background-color: transparent;
    padding: 15px 20px;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.3s ease;
    flex: 1;
}

.scene-accordion-header:hover {
    background-color: var(--color-bg-lighter);
}

.scene-accordion-header.collapsed {
    border-bottom: none;
}

.drag-handle {
    display: flex;
    align-items: center;
    cursor: grab;
    padding: 8px;
    color: var(--color-text-muted);
    user-select: none;
    flex-shrink: 0;
}

.drag-handle:hover {
    color: var(--color-text-secondary);
}

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

.drag-icon {
    font-size: 18px;
    line-height: 1;
    writing-mode: vertical-lr;
    text-orientation: mixed;
}

/* Drag and Drop Visual Feedback */
.scene-accordion-item.dragging {
    opacity: 0.6;
    transform: rotate(2deg);
    box-shadow: var(--shadow-sm);
    z-index: 1000;
}

.scene-accordion-item.drag-over-before::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-drag-indicator);
    border-radius: 2px;
    z-index: 1001;
}

.scene-accordion-item.drag-over-after::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-drag-indicator);
    border-radius: 2px;
    z-index: 1001;
}

.scene-accordion-item {
    position: relative;
}

.scene-accordion-item[draggable="true"] {
    cursor: grab;
}

.scene-title {
    font-size: 1.1em;
    font-weight: 600;
    margin: 0;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    width: auto; /* Adapt to content width */
    min-width: 24px; /* Square size when empty */
    max-width: 90%; /* Use up to 90% of available space, leaving 10% for controls */
    flex-shrink: 1; /* Allow shrinking if needed */
}

.scene-title:empty::before {
    content: '';
    width: 16px;
    height: 16px;
    background: transparent;
    border: 1px dashed var(--color-border-medium);
    border-radius: 2px;
    display: block;
}

.scene-title.editable:hover {
    background-color: var(--color-primary-light);
    cursor: text;
    border-radius: var(--border-radius-default);
}

.scene-title.editing {
    background-color: var(--color-bg-white);
    border: 2px solid var(--color-primary);
    box-shadow: 0 0 0 0.2rem var(--color-focus-shadow);
    border-radius: var(--border-radius-default);
    padding: 4px 8px;
}

.scene-title-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.1em;
    font-weight: 600;
    padding: 0;
    margin: 0;
    color: inherit;
    width: auto;
    min-width: 50px;
    max-width: 300px;
}

.scene-accordion-item.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
}

.scene-accordion-item.drag-over {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
    transform: scale(1.02);
}

.drag-placeholder {
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-success));
    border-radius: 2px;
    margin: 4px 0;
    opacity: 0.8;
    animation: dragPulse 1s ease-in-out infinite alternate;
}

@keyframes dragPulse {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

.scene-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    padding: 15px 20px;
    background-color: var(--color-bg-light);
    border-left: 1px solid var(--color-border-light);
}

.scene-drag-area {
    flex: 1; /* Take up remaining space */
    cursor: grab;
    min-height: 24px;
    min-width: 40px; /* Minimum clickable area */
    display: flex;
    align-items: center;
    justify-content: center;
}

.scene-drag-area:active {
    cursor: grabbing;
}

.scene-controls .btn {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
}

.scene-control-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background-color: var(--color-bg-white);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    cursor: pointer;
}

.scene-control-btn:hover {
    background-color: var(--color-bg-light);
    border-color: var(--color-border-dark);
    color: var(--color-text-secondary);
}

.scene-control-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.scene-control-btn.play-scene-btn:hover {
    background-color: var(--color-success-light);
    border-color: var(--color-success);
    color: var(--color-success);
}

.scene-control-btn.play-scene-btn.btn-danger {
    background-color: var(--color-danger-light);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}

.scene-control-btn.play-scene-btn.btn-danger:hover {
    background-color: #f1b0b7;
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}

.scene-control-btn.edit-scene-btn:hover {
    background-color: var(--color-primary-lighter);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.scene-control-btn.delete-scene-btn:hover {
    background-color: var(--color-danger-light);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.scene-control-btn svg {
    flex-shrink: 0;
}

.scene-collapse-icon {
    margin-left: 15px;
    transition: transform 0.3s ease;
}

.scene-collapse-icon.collapsed {
    transform: rotate(-90deg);
}

.scene-accordion-body {
    padding: 20px;
    background-color: white;
}

.scene-description {
    color: var(--color-text-muted);
    font-style: italic;
    margin-bottom: 15px;
}

/* Editable Title */
.editable-title {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--border-radius-default);
    transition: var(--transition-fast);
    display: inline-block;
}

.editable-title:hover {
    background-color: var(--color-bg-light);
    color: var(--color-primary);
}

.inline-title-input {
    border: 2px solid var(--color-primary) !important;
}

/* Editable Description */
.editable-description {
    color: var(--color-text-secondary);
    font-style: italic;
    margin-bottom: 15px;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--border-radius-default);
    transition: var(--transition-fast);
}

.editable-description:hover {
    background-color: var(--color-bg-light);
}

.editable-description .placeholder-text {
    color: var(--color-text-light);
    padding: 8px 12px;
    border-radius: var(--border-radius-default);
    cursor: pointer;
    transition: var(--transition-fast);
    border: 1px solid transparent;
    background-color: transparent;
    user-select: none; /* Prevent selection and copying */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.editable-description:hover {
    background-color: var(--color-bg-light);
    color: var(--color-text-secondary);
}

.editable-description .placeholder-text {
    color: var(--color-text-light);
    font-style: italic;
}

.editable-description[data-has-description="false"]:hover .placeholder-text {
    color: var(--color-text-muted);
}

.script-container {
    /* Remove height constraints and scrollbar */
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    max-height: none;
    overflow: visible;
}

.script-line {
    margin-bottom: 4px;
    padding: 4px 15px;
    background-color: var(--color-bg-white);
    border-radius: var(--border-radius-md);
    border-left: 4px solid #3498db;
    transition: opacity 0.3s ease;
}

.script-line.muted {
    opacity: 0.3;
}

.script-line.current-line {
    background-color: var(--color-warning-light);
    border-left-color: var(--color-warning);
    box-shadow: var(--shadow-hover);
}

.script-line.character-hidden {
    opacity: 0.0;
}

.script-line.character-hidden:hover {
    opacity: 1;
}

/* Note line styling */
.script-line.note-line {
    border-left-color: var(--color-text-muted);
}

.script-line.note-line .line-text {
    opacity: 0.5;
    font-style: italic;
}

.script-line.note-line .line-controls-left {
    opacity: 0.3;
}

/* Target note lines via note-indicator sibling selector */
.line-content:has(.note-indicator) .line-text {
    color: grey;
    font-style: italic;
}

/* Parenthetical text styling - same grey color as note lines */
.parenthetical {
    color: grey;
    font-style: italic;
}

/* Character tag styling - shows character name in their color and italic */
.character-tag {
    font-style: italic;
    font-weight: 500;
}

.compact-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 15px;
    margin-bottom: 2px;
    margin-top: 2px;
}

.line-controls-left {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.line-controls-left .btn {
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 3px;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.line-control-btn {
    min-width: 28px;
    height: 100%;  /* Match line height */
    min-height: 28px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: var(--border-radius-default);
    background-color: transparent;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    cursor: pointer;
}

.line-control-btn:hover {
    background-color: var(--color-bg-light);
    border-color: var(--color-border-light);
}

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

.line-control-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.line-control-btn.record-btn.delete-mode {
    color: var(--color-text-muted);
}

.line-control-btn.record-btn.delete-mode:hover {
    background-color: var(--color-danger-light);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}

.line-control-btn.record-btn:hover {
    background-color: var(--color-danger-light);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}

.line-control-btn.record-btn.btn-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-bg-white);
}

/* Disabled play button (no recording) - no interaction */
.line-control-btn.play-btn.disabled {
    cursor: default !important;
    pointer-events: none;
    opacity: 0.3;
}

/* Keep play button visible when recording exists */
.line-control-btn.play-btn.has-recording {
    opacity: 1;
    color: var(--color-success);
    cursor: pointer;
}

/* Only enable hover on play buttons with recordings */
.line-control-btn.play-btn.has-recording:hover {
    background-color: var(--color-success-light);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

/* Playing state - red background like stop button (must come after .has-recording) */
.line-control-btn.play-btn.has-recording.playing {
    background-color: var(--color-danger-light);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
    opacity: 1;
}

.line-control-btn.play-btn.has-recording.playing:hover {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: white;
}

.line-control-btn svg {
    flex-shrink: 0;
}

.line-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.line-text {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
}

.line-text:hover {
    background-color: var(--color-bg-light);
}

.character-name {
    align-self: flex-start;
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 5px;
    flex-shrink: 0;
}

/* Normalize strong tags inside character names to prevent double-bold */
.character-name strong {
    font-weight: inherit;
}

.note-indicator {
    align-self: flex-start;
}

.clickable-character {
    font-weight: bold;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.clickable-character:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.line-text {
    line-height: 1.6;
    flex: 1;
}

.compact-line .line-text {
    margin-bottom: 0;
    line-height: 1.4;
}

/* Invisible line break for copy/paste spacing */
.copy-paste-spacer {
    display: block;
    height: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
}

.line-controls {
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.script-line:hover .line-controls {
    opacity: 1;
}

/* FIX: Keep buttons visible during recording */
.script-line.is-recording .line-controls {
    opacity: 1;
}

/* FIX: Keep line-controls visible when recording exists (so play button is visible) */
.script-line[data-has-recording="true"] .line-controls {
    opacity: 1;
}

/* FIX: Keep play button icon always visible when recording exists (not full button, just icon) */
.script-line[data-has-recording="true"] .line-controls .play-btn.has-recording svg {
    opacity: 1;
    color: var(--color-success);
}

.script-line[data-has-recording="true"] .line-controls .play-btn.has-recording {
    background-color: transparent;
    border-color: transparent;
}

/* Show full button with light green hover */
.script-line[data-has-recording="true"]:hover .line-controls .play-btn.has-recording {
    opacity: 1;
}

.script-line[data-has-recording="true"] .line-controls .play-btn.has-recording:hover {
    background-color: var(--color-success-light);
    border-color: var(--color-success-border);
}

/* PLAYING STATE: Red stop button when audio is playing */
.script-line[data-has-recording="true"] .line-controls .play-btn.has-recording.playing {
    background-color: var(--color-danger-light);
    border-color: var(--color-danger-border);
    opacity: 1;
}

.script-line[data-has-recording="true"] .line-controls .play-btn.has-recording.playing svg {
    color: var(--color-danger);
}

.script-line[data-has-recording="true"] .line-controls .play-btn.has-recording.playing:hover {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

.script-line[data-has-recording="true"] .line-controls .play-btn.has-recording.playing:hover svg {
    color: white;
}

/* FIX: Hide delete button by default, show only on hover */
.script-line[data-has-recording="true"] .line-controls .record-btn.delete-mode {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.script-line[data-has-recording="true"]:hover .line-controls .record-btn.delete-mode {
    opacity: 1;
}

.character-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.character-toggle {
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.character-toggle.muted {
    opacity: 0.5;
    text-decoration: line-through;
}


.character-option:hover {
    cursor: pointer;
}

.navbar-brand {
    font-weight: bold;
}

.navbar .container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
}

.navbar-brand-container {
    flex: 0 0 auto;
}

.navbar-menu-container {
    flex: 1 1 auto;
    display: flex;
}

/* Menu alignment classes - controlled by site settings */
.navbar-menu-container.menu-align-left {
    justify-content: flex-start;
}

.navbar-menu-container.menu-align-center {
    justify-content: center;
}

.navbar-menu-container.menu-align-right {
    justify-content: flex-end;
}

.navbar-user-container {
    flex: 0 0 auto;
    margin-left: auto;
}

.navbar-menu-container .navbar-nav {
    flex-wrap: nowrap;
    gap: 0.5rem;
}

/* Ensure dropdown menu appears outside navbar */
.navbar .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
}

.navbar .dropdown {
    position: relative;
}

@media (max-width: 768px) {
    .navbar .container {
        gap: 0.5rem;
    }
    
    .navbar-menu-container .navbar-nav {
        gap: 0.25rem;
    }
    
    .navbar-nav .nav-link {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
        font-size: 0.9rem;
    }
}

/* Card hover effect */
.card {
    transition: transform 0.2s ease;
}

.card:hover {
    transform: translateY(-5px);
}

.alert {
    border-radius: 8px;
}

.btn {
    border-radius: 5px;
}

.modal-content {
    border-radius: 10px;
}

/* Confirmation modal should appear above other modals */
#confirmationModal {
    z-index: 1060;
}

#confirmationModal + .modal-backdrop {
    z-index: 1055;
}

.form-control, .form-select {
    border-radius: 5px;
}

@media (max-width: 768px) {
    .script-line {
        padding: 10px;
    }

    /* Mobile grid layout: 2 rows (Character + Buttons on Row 1, Text on Row 2) */
    .compact-line {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 4px 8px;
        align-items: start;
        padding: 8px 15px;
    }

    /* OPTIMIZATION: Unwrap .line-content using display: contents */
    /* This allows character-name and line-text to participate directly in the grid */
    /* Without taking horizontal space from each other (buttons only affect character row) */
    .line-content {
        display: contents;
    }

    /* Row 1, Column 1: Character name (flexible width, left) */
    .character-name, .note-indicator {
        grid-column: 1;
        grid-row: 1;
        display: inline;
        font-size: 1.05em;
        margin-bottom: 0;
    }

    /* Row 1, Column 2: Audio buttons (fixed width, right) */
    .line-controls {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: row;
        gap: 5px;
        opacity: 1 !important; /* CRITICAL: Always visible on mobile (no hover state) */
        align-self: start; /* Align to top of row */
    }

    /* Override hover state on mobile (no hover on touch devices) */
    .script-line:hover .line-controls {
        opacity: 1;
    }

    /* Mobile: Always show delete button when recording exists (override desktop hidden state) */
    .script-line[data-has-recording="true"] .line-controls .record-btn.delete-mode {
        opacity: 1 !important;
    }

    /* Row 2, Full width: Line text */
    .line-text {
        grid-column: 1 / -1; /* Span both columns */
        grid-row: 2;
        display: block;
        width: 100%;
        line-height: 1.5;
        cursor: pointer;
        margin-bottom: 0;
    }

    .line-controls-left {
        order: 1;
        align-self: flex-start;
    }

    .character-controls {
        justify-content: center;
    }

    /* Mobile responsive styling for inline edit form */
    .inline-add-line-form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* Row 1: Character selector(s) - full width */
    .character-select-container {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        flex-shrink: 1;
        align-items: flex-start;
    }

    .group-char-item {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        gap: 4px;
        align-items: center;
    }

    .character-select {
        width: auto;
        min-width: 120px;
        max-width: 200px;
        flex-shrink: 1;
        text-align: left;
    }

    /* Row 2: Text input - full width */
    .line-text-container {
        width: 100%;
        flex: 1;
    }

    .line-text-input {
        width: 100%;
        min-height: 60px;
    }

    /* Row 3: Buttons - full width, right-aligned */
    .inline-form-actions {
        width: 100%;
        display: flex;
        gap: 6px;
        justify-content: flex-end;
        align-items: stretch;
    }

    .btn-inline-save, .btn-inline-cancel {
        flex: 0 1 auto;
        padding: 8px 16px;
    }

    /* On mobile, move the group mode toggle button inline with characters */
    .inline-add-line-form > div[style*="display: flex"] {
        display: block !important; /* Remove flex container around toggle */
    }
    
    .group-mode-toggle:not([style*="display: none"]) {
        display: inline-flex !important; /* Make it inline only when not hidden */
        vertical-align: middle;
        margin-right: 2px;
        padding: 2px;
        opacity: 1;
    }

    /* Character select container should be inline-block to wrap with toggle button */
    .character-select-container {
        display: inline-flex !important;
        width: auto !important;
        gap: 2px !important;
    }

    /* Make remove button more visible on mobile */
    .group-char-remove-btn {
        opacity: 1;
        padding: 4px;
        min-width: 20px;
        min-height: 20px;
    }

}

/* Inline Add Line Styling - Mobile-first (light grey, always visible) */
.add-line-space {
    position: relative;
    padding: 12px 15px;
    background-color: var(--color-bg-light);  /* Light grey for mobile */
    cursor: pointer;
    transition: var(--transition-fast);
    border: none;
    margin-bottom: 4px;
}

.add-line-hint {
    color: var(--color-text-light);
    font-size: 13px;
    font-style: italic;
    opacity: 1;  /* Visible for mobile (no hover state on touch) */
    transition: opacity 0.2s ease;
    user-select: none; /* Prevent selection and copying */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Always show hint for empty scenes */
.add-line-space.empty-scene .add-line-hint {
    opacity: 1;
    font-weight: 500;
}

/* Desktop enhancement: white background by default, light grey on hover */
@media (min-width: 769px) {
    .add-line-space {
        background-color: var(--color-bg-white);  /* White for desktop */
    }

    .add-line-space:hover {
        background-color: var(--color-bg-light);
    }

    .add-line-hint {
        opacity: 0;  /* Hidden by default on desktop */
    }

    .add-line-space:hover .add-line-hint {
        opacity: 1;  /* Show on hover for desktop */
    }
}

/* Keep add-line-container for backwards compatibility */
.add-line-container {
    position: relative;
}

/* Line separator for adding between lines */
/* Inline edit form */
.inline-add-line-form {
    display: flex;
    gap: 10px;
    padding: 10px;
    background-color: var(--color-bg-light);
    border-radius: var(--border-radius-default);
    margin: 5px 0;
    align-items: center;
}

.scene-heading-form {
    margin-bottom: 15px;
}

.scene-heading-form .form-control {
    font-style: italic;
    color: var(--color-text-secondary);
    padding: 8px 12px;
    border-radius: var(--border-radius-default);
    width: 100%;
}

/* Character management */
.characters-edit-section {
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    padding: 20px;
    background-color: var(--color-bg-light);
}

.characters-table .table {
    margin-bottom: 0;
}

.characters-table .table th {
    background-color: var(--color-bg-lighter);
    font-weight: var(--font-weight-semibold);
    border-bottom: 2px solid var(--color-border-light);
}

.editable-field {
    position: relative;
    border: 1px solid transparent;
    transition: var(--transition-fast);
}

.editable-field:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem var(--color-focus-shadow);
}

.editable-field::after {
    content: "✎";
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.editable-field:hover::after {
    opacity: 1;
}

.character-shortcut-display.editable-field {
    min-width: 40px;
}

.color-display-container.editable-field {
    min-width: 100px;
}

.add-character-container {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--color-border-light);
}

.add-character-btn {
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--border-radius-default);
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-character-btn:hover {
    color: var(--color-primary);
    background-color: var(--color-bg-light);
}

.add-character-icon {
    font-size: 16px;
    font-weight: bold;
}

.add-character-text {
    font-size: 14px;
}

.character-edit-form {
    display: none;
    background-color: var(--color-bg-light);
    padding: 10px;
    border-radius: var(--border-radius-default);
    margin: 5px 0;
}

.character-edit-form.active {
    display: block;
}

.character-shortcut-display {
    font-weight: bold;
    font-family: monospace;
    background-color: var(--color-bg-lighter);
    padding: 4px 8px;
    border-radius: var(--border-radius-default);
    display: inline-block;
    min-width: 30px;
    text-align: center;
}

.character-select-container {
    position: relative;
    min-width: 150px;
}

.character-select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius-default);
    font-size: 14px;
}

.line-text-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius-default);
    font-size: 14px;
}

.inline-form-actions {
    display: flex;
    gap: 5px;
}

.btn-inline-save {
    background-color: var(--color-success);
    color: var(--color-bg-white);
    border: none;
    padding: 6px 12px;
    border-radius: var(--border-radius-default);
    font-size: 12px;
    cursor: pointer;
}

.btn-inline-cancel {
    background-color: var(--color-text-muted);
    color: var(--color-bg-white);
    border: none;
    padding: 6px 12px;
    border-radius: var(--border-radius-default);
    font-size: 12px;
    cursor: pointer;
}

/* Line editing styles - match inline add form style */
.line-text-edit {
    width: 100% !important;
    border: 1px solid var(--color-border-medium) !important;
    padding: 4px 8px !important;
    font-size: inherit !important;
    font-family: inherit !important;
    background: var(--color-bg-white) !important;
    border-radius: var(--border-radius-sm) !important;
    resize: none !important;
    overflow: hidden !important;
    min-height: 32px !important;
    max-height: 200px !important;
    line-height: 1.4 !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.line-text-edit:focus {
    border-color: var(--color-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 0.2rem var(--color-focus-shadow) !important;
}

/* Ensure the script line can accommodate growing textarea */
.script-line {
    min-height: auto;
    align-items: flex-start; /* Align to top when textarea grows */
}

.line-content {
    flex: 1;
    min-width: 0; /* Prevent flex item from overflowing */
}

/* Adjust line controls to align with top of content */
.line-controls-left {
    align-self: flex-start;
    margin-top: 6px; /* Align with text baseline */
}

/* Inline line form styling */
.inline-add-line-form {
    display: flex;
    align-items: flex-start; /* Align everything to top */
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    margin: 8px 0;
}

.character-select-container {
    flex-shrink: 0; /* Don't shrink */
}

.character-select {
    min-width: 150px;
    max-width: 200px;
    padding: 6px 8px;
    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius-default);
    font-size: 14px;
    height: auto; /* Natural height */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.character-select:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--color-focus-shadow);
}

.line-text-container {
    flex: 1; /* Take remaining space */
}

.line-text-input {
    width: 100%;
    border: 1px solid var(--color-border-medium); /* Default grey border */
    padding: 4px 8px;
    font-size: inherit;
    font-family: inherit;
    background: var(--color-bg-white);
    border-radius: var(--border-radius-sm);
    resize: none;
    overflow: hidden;
    min-height: 32px;
    max-height: 200px;
    line-height: 1.4;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.line-text-input:focus {
    border-color: var(--color-primary); /* Blue border only when focused */
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--color-focus-shadow);
}

.inline-form-actions {
    display: flex;
    gap: 4px;
    align-items: flex-start; /* Align buttons to top */
    flex-shrink: 0; /* Don't shrink */
}

.btn-inline-save, .btn-inline-cancel {
    padding: 6px 12px;
    border: none;
    border-radius: var(--border-radius-default);
    font-size: 14px;
    cursor: pointer;
}

.btn-inline-save {
    background-color: var(--color-success);
    color: var(--color-bg-white);
}

.btn-inline-save:hover {
    background-color: #218838;
}

.btn-inline-cancel {
    background-color: var(--color-text-muted);
    color: var(--color-bg-white);
}

.btn-inline-cancel:hover {
    background-color: #5a6268;
}

/* Group character selection styles */
.group-char-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.group-char-separator {
    color: var(--color-text-muted);
    margin: 0 8px;
    font-weight: bold;
}

.group-char-remove-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--color-danger);
    opacity: 0.6;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.group-char-remove-btn:hover {
    opacity: 1;
}

.group-mode-toggle {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.group-mode-toggle:hover {
    opacity: 1;
}

.inline-add-line-form[data-is-group="true"] .group-mode-toggle {
    opacity: 0.7;
}

.inline-add-line-form[data-is-group="true"] .group-mode-toggle:hover {
    opacity: 1;
}

.group-character-name {
    font-weight: bold;
}

/* ============================================================================
   USER DROPDOWN MENU
   ============================================================================ */

/* Profile icon dropdown button */
.user-dropdown-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.user-dropdown-btn:hover {
    color: var(--color-bg-white);
}

.user-dropdown-btn::after {
    display: none; /* Hide default Bootstrap caret */
}

.user-dropdown-btn svg {
    transition: var(--transition-fast);
}

.user-dropdown-btn:hover svg {
    opacity: 0.8;
}

/* Dropdown menu styling */
.navbar .dropdown-menu {
    min-width: 160px;
    box-shadow: var(--shadow-sm);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border-light);
}

.navbar .dropdown-item {
    padding: var(--spacing-sm) var(--spacing-md);
    transition: var(--transition-fast);
}

.navbar .dropdown-item:hover {
    background-color: var(--color-bg-light);
}

.navbar .dropdown-item:active {
    background-color: var(--color-primary);
    color: var(--color-bg-white);
}

/* ============================================================================
   ADMIN SETTINGS PAGE
   ============================================================================ */

/* Sidebar navigation */
#admin-settings-nav .list-group-item {
    border: none;
    border-radius: 0;
    transition: var(--transition-fast);
    padding: var(--spacing-sm) var(--spacing-md);
}

#admin-settings-nav .list-group-item:first-child {
    border-top-left-radius: var(--border-radius-default);
    border-top-right-radius: var(--border-radius-default);
}

#admin-settings-nav .list-group-item:last-child {
    border-bottom-left-radius: var(--border-radius-default);
    border-bottom-right-radius: var(--border-radius-default);
}

#admin-settings-nav .list-group-item:hover:not(.active) {
    background-color: var(--color-bg-light);
}

#admin-settings-nav .list-group-item.active {
    background-color: var(--color-primary);
    color: var(--color-bg-white);
    border-color: var(--color-primary);
}

/* Settings sections (no card wrapper) */
.settings-section h4 {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-light);
}

/* Users table */
#usersTable {
    margin-bottom: 0;
}

#usersTable th {
    background-color: var(--color-bg-lighter);
    font-weight: var(--font-weight-semibold);
    border-bottom: 2px solid var(--color-border-light);
}

#usersTable td {
    vertical-align: middle;
}

#usersTable .badge {
    font-size: 0.75em;
    font-weight: var(--font-weight-medium);
}

#usersTable .form-check-input {
    cursor: pointer;
}

#usersTable .form-check-input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ============================================================================
   PROFILE PAGE
   ============================================================================ */

/* Profile form styling */
.profile-form .card-header {
    background-color: var(--color-bg-light);
}

/* Form text helper */
.form-text {
    font-size: 0.875em;
    color: var(--color-text-muted);
}

/* Account info section */
.account-info hr {
    margin: var(--spacing-sm) 0;
    opacity: 0.1;
}

/* =============================================================================
   USER MANAGEMENT - ADMIN SETTINGS
   ============================================================================ */

/* New User Highlight - Apply to all cells in the row */
#usersTable tbody tr.user-row-new td {
    background-color: #d1ecf1 !important; /* Light blue highlight */
}

#usersTable tbody tr.user-row-new:hover td {
    background-color: #bee5eb !important; /* Slightly darker on hover */
}

/* ============================================================================
   RESPONSIVE SIDEBAR COMPONENT
   ============================================================================ */

/* Desktop sidebar base styles (>=768px) */
@media (min-width: 768px) {
    .settings-sidebar {
        position: sticky;
        top: var(--spacing-lg);
        height: calc(100vh - var(--spacing-lg) - var(--spacing-lg));
        overflow-y: auto;
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-medium);
        background-color: var(--color-bg-white);
        transition: width 0.3s ease;
    }

    .settings-sidebar .offcanvas-body {
        padding: 0 !important;
    }
}

/* Sidebar collapse toggle item styling */
.settings-sidebar .sidebar-collapse-item {
    background-color: var(--color-bg-lighter);
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-light);
}

.settings-sidebar .sidebar-collapse-item:hover {
    background-color: var(--color-bg-light);
}

.settings-sidebar .sidebar-collapse-toggle {
    color: var(--color-text-muted);
}

.settings-sidebar .sidebar-collapse-toggle:hover {
    color: var(--color-primary);
}

/* Collapsed state styles */
@media (min-width: 768px) {
    .settings-sidebar.collapsed {
        width: 60px !important;
        min-width: 60px !important;
    }

    .settings-sidebar.collapsed .sidebar-text {
        display: none;
    }

    .settings-sidebar.collapsed .list-group-item {
        text-align: center;
        padding: var(--spacing-md) 0;
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .settings-sidebar.collapsed .sidebar-icon {
        /* Keep as flex child for consistent alignment - don't change display */
        flex-shrink: 0;
    }

    .settings-sidebar.collapsed .sidebar-collapse-toggle {
        display: none;
    }
}

/* Sidebar navigation items */
.settings-sidebar .list-group-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding: var(--spacing-md);
    transition: all 0.2s ease;
}

.settings-sidebar .list-group-item:first-child {
    border-top: none;
}

.settings-sidebar .list-group-item:last-child {
    border-bottom: none;
}

.settings-sidebar .list-group-item.active {
    background-color: var(--color-bg-light);
    border-left: 3px solid var(--color-primary);
    font-weight: 600;
}

.settings-sidebar .sidebar-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: block;
    vertical-align: middle;
}

.settings-sidebar .sidebar-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Collapse toggle button */
.sidebar-collapse-toggle {
    padding: var(--spacing-xs);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all 0.2s ease;
}

.sidebar-collapse-toggle:hover {
    color: var(--color-primary);
}

.sidebar-collapse-toggle svg {
    transition: transform 0.3s ease;
}

/* Mobile offcanvas styles (<768px) */
@media (max-width: 767px) {
    .settings-sidebar .offcanvas-body {
        padding: 0;
    }

    .settings-sidebar .list-group-item {
        font-size: var(--font-size-base);
    }
}