/**
 * Settings Page Styles - Jetfolio Platform
 */

/* ============================================================================
   Page Layout
   ============================================================================ */

.settings-page {
    display: flex;
    min-height: calc(100vh - 80px);
    background: var(--bg-primary, #eef1f6);
}

/* ============================================================================
   Sidebar
   ============================================================================ */

.settings-sidebar {
    width: 280px;
    min-width: 280px;
    background: var(--bg-card, #fff);
    border-right: 1px solid var(--border-color, #e5e7eb);
    padding: 24px 16px;
    position: sticky;
    top: 80px;
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.sidebar-section {
    margin-bottom: 24px;
}

.sidebar-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 12px;
    padding: 0 12px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    transition: all 0.2s;
    text-align: left;
    width: 100%;
}

.sidebar-nav-item svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    flex-shrink: 0;
}

.sidebar-nav-item:hover {
    background: var(--bg-secondary, #f5f5f5);
    color: var(--text-primary, #2c2c2c);
}

.sidebar-nav-item.active {
    background: var(--warm-accent, #2c5282);
    color: white;
}

.sidebar-nav-item.active svg {
    stroke: white;
}

.sidebar-divider {
    height: 1px;
    background: var(--border-color, #e5e7eb);
    margin: 16px 12px;
}

/* ============================================================================
   Main Content
   ============================================================================ */

.settings-content {
    flex: 1;
    padding: 32px 40px;
    max-width: 900px;
    margin: 0 auto;
}

/* Loading */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--warm-accent, #2c5282);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Access Indicator */
.access-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--status-warning-soft) 0%, #fde68a 100%);
    border: 1px solid var(--status-warning);
    border-radius: 12px;
    margin-bottom: 24px;
    color: var(--status-warning-ink);
    font-size: 14px;
}

.access-indicator svg {
    width: 20px;
    height: 20px;
    stroke: var(--status-warning-ink);
    flex-shrink: 0;
}

/* ============================================================================
   Section Styles
   ============================================================================ */

.settings-section {
    margin-bottom: 32px;
}

.section-header {
    margin-bottom: 20px;
}

.section-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary, #2c2c2c);
    margin-bottom: 8px;
}

.section-header p {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
}

/* Settings Cards */
.settings-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--warm-border, #dfe5ee);
    border-radius: var(--radius-lg, 10px);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-card, 0 1px 2px rgba(22, 32, 46, 0.05));
}

.card-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #2c2c2c);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.card-description {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 20px;
}

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

.form-group {
    margin-bottom: 20px;
}

.form-group:last-child {
    margin-bottom: 0;
}

/* Readonly form-group: dim the actual controls but keep labels + hints at full
   contrast. Blanket opacity on the wrapper pulled .hint below AA against the
   white card background (axe violation). */
.form-group.readonly input,
.form-group.readonly select,
.form-group.readonly textarea {
    opacity: 0.7;
}

.form-group.readonly::after {
    content: '';
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #2c2c2c);
    margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--warm-border, #dfe5ee);
    border-radius: 10px;
    font-size: 15px;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #2c2c2c);
    transition: all 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--warm-accent, #2c5282);
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.1);
}

.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--bg-secondary, #f5f5f5);
}

.form-group .hint {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    margin-top: 6px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

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

/* ============================================================================
   Reference Constants — compact layouts (design fixes; settings-scoped sheet)
   ============================================================================ */
/* Fix 2b: simple constants + Crew/Charter Layer-B rows lay value | source | updated
   horizontally instead of the inherited 2-column stack. Scoped to .form-row.reference-constant-row
   (BOTH classes) so it hits only the settings reference rows — never the Training grid cells
   (.tlb-cell has no .form-row) and never any app-wide bare .form-row.
   Alignment fix: align-items:start (was :end, which aligned form-group BOTTOMS and pushed the
   value input UP by the unit-span height — a 26px row-internal misalignment). minmax(0,…) tracks
   are purely proportional (no content-driven min growth), so columns align across rows by
   construction; inputs are already width:100% (base .form-group input rule) and fill their cells. */
.form-row.reference-constant-row {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, 0.6fr);
    align-items: start;
    gap: 16px;
}
.form-row.reference-constant-row .form-group { margin-bottom: 0; }   /* grid gap owns spacing */
@media (max-width: 700px) {
    .form-row.reference-constant-row { grid-template-columns: 1fr; }
}

/* Fix 2a: Training Layer-B as a 5×4 grid (type rows × event columns), one Source + Updated
   per type row. Each .tlb-cell is a keyed .reference-constant-row carrying just the value input
   (+ a hidden synced source); display:block strips any inherited row layout. */
.training-layerb-grid {
    display: grid;
    grid-template-columns: minmax(64px, auto) repeat(4, minmax(78px, 1fr)) minmax(150px, 1.4fr) minmax(82px, auto);
    gap: 8px 10px;
    align-items: center;
    margin-top: 4px;
}
.training-layerb-grid .tlb-corner,
.training-layerb-grid .tlb-colhead {
    font-size: 12px; font-weight: 600; color: var(--text-secondary, #6b7280);
    padding-bottom: 4px; border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.training-layerb-grid .tlb-colhead { text-align: center; }
.training-layerb-grid .tlb-rowhead { font-size: 13px; font-weight: 600; color: var(--text-primary, #111827); }
.training-layerb-grid .tlb-cell { display: block; margin: 0; padding: 0; }
.training-layerb-grid .tlb-cell input[data-refconst-value] { width: 100%; text-align: right; }
.training-layerb-grid .tlb-source { width: 100%; }
.training-layerb-grid .tlb-date { font-size: 12px; color: var(--text-tertiary, #9ca3af); white-space: nowrap; }
@media (max-width: 760px) {
    .training-layerb-grid { overflow-x: auto; }   /* scroll rather than crush the inputs */
}

/* ============================================================================
   Toggle Switches
   ============================================================================ */

.toggle-group {
    margin-bottom: 16px;
}

.toggle-group:last-child {
    margin-bottom: 0;
}

.toggle-group.nested {
    margin-left: 36px;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

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

.toggle-switch {
    width: 48px;
    height: 26px;
    background: var(--border-color, #e5e7eb);
    border-radius: 13px;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-label input:checked + .toggle-switch {
    background: var(--warm-accent, #2c5282);
}

.toggle-label input:checked + .toggle-switch::after {
    left: 24px;
}

.toggle-label input:disabled + .toggle-switch {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #2c2c2c);
}

.toggle-group .hint {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    margin-top: 4px;
    margin-left: 60px;
}

/* ============================================================================
   Color Inputs
   ============================================================================ */

.color-input-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
}

.color-input-wrapper input[type="color"] {
    width: 50px;
    height: 44px;
    padding: 4px;
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
}

.color-input-wrapper .color-text {
    flex: 1;
    font-family: monospace;
    text-transform: uppercase;
}

/* ============================================================================
   Logo Upload
   ============================================================================ */

.logo-upload-area {
    border: 2px dashed var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.logo-upload-area:hover {
    border-color: var(--warm-accent, #2c5282);
    background: rgba(44, 82, 130, 0.05);
}

.logo-upload-area.dragover {
    border-color: var(--warm-accent, #2c5282);
    background: rgba(44, 82, 130, 0.1);
}

.logo-upload-area.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.logo-upload-area.disabled:hover {
    border-color: var(--border-color, #e5e7eb);
    background: transparent;
}

.logo-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary, #6b7280);
}

.logo-upload-placeholder svg {
    width: 48px;
    height: 48px;
    stroke: var(--text-secondary, #6b7280);
}

.logo-preview {
    position: relative;
    display: inline-block;
}

.logo-preview img {
    max-width: 200px;
    max-height: 100px;
    object-fit: contain;
}

.logo-remove-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--risk-critical);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.logo-remove-btn:hover {
    background: var(--status-danger);
    transform: scale(1.1);
}

.logo-remove-btn svg {
    width: 14px;
    height: 14px;
    stroke: white;
}

/* ============================================================================
   Weight Sliders
   ============================================================================ */

.weight-total-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 10px;
    margin-bottom: 20px;
}

.weight-total-indicator.valid {
    background: rgba(16, 185, 129, 0.1);
}

.weight-total-indicator.warning {
    background: rgba(245, 158, 11, 0.1);
}

.weight-total-indicator.error {
    background: rgba(239, 68, 68, 0.1);
}

.weight-total-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
}

.weight-total-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #2c2c2c);
}

.weight-total-indicator.valid .weight-total-value {
    color: var(--status-success);
}

.weight-total-indicator.warning .weight-total-value {
    color: var(--status-warning);
}

.weight-total-indicator.error .weight-total-value {
    color: var(--risk-critical);
}

.weight-sliders {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.weight-slider-group {
    margin-bottom: 4px;
}

.weight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.weight-header label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #2c2c2c);
}

.weight-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--warm-accent, #2c5282);
    min-width: 40px;
    text-align: right;
}

.weight-slider {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color, #e5e7eb);
    border-radius: 4px;
    outline: none;
}

.weight-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--warm-accent, #2c5282);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.weight-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(44, 82, 130, 0.3);
}

.weight-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--warm-accent, #2c5282);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.weight-slider-group .hint {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-top: 4px;
}

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

.settings-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 20px 0;
    position: sticky;
    bottom: 0;
    background: var(--bg-primary, #eef1f6);
    border-top: 1px solid var(--warm-border, #dfe5ee);
    margin-top: 20px;
}

.unsaved-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
}

.unsaved-dot {
    width: 8px;
    height: 8px;
    background: var(--status-warning);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

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

.btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

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

.btn-primary {
    background: var(--warm-accent, #2c5282);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--warm-dark, #1e3a5f);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44, 82, 130, 0.3);
}

.btn-secondary {
    background: var(--bg-card, #fff);
    color: var(--text-primary, #2c2c2c);
    border: 1px solid var(--warm-border, #dfe5ee);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--bg-secondary, #f5f5f5);
    border-color: var(--warm-accent, #2c5282);
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

.btn svg.spinner {
    animation: spin 0.8s linear infinite;
}

/* ============================================================================
   Toast
   ============================================================================ */

.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 16px 24px;
    background: var(--status-success);
    color: white;
    border-radius: 10px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s;
    z-index: 1000;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast.error {
    background: var(--risk-critical);
}

/* ============================================================================
   Responsive
   ============================================================================ */

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

    .settings-sidebar {
        width: 100%;
        min-width: 100%;
        position: relative;
        top: 0;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color, #e5e7eb);
        padding: 16px;
    }

    .sidebar-section {
        margin-bottom: 16px;
    }

    .sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .sidebar-nav-item {
        flex: 1;
        min-width: 120px;
        justify-content: center;
        padding: 10px 12px;
    }

    .sidebar-nav-item span {
        display: none;
    }

    .sidebar-divider {
        width: 1px;
        height: 40px;
        margin: 0 8px;
    }

    .settings-content {
        padding: 24px 20px;
    }
}

@media (max-width: 480px) {
    .settings-actions {
        flex-wrap: wrap;
    }

    .unsaved-indicator {
        width: 100%;
        margin-bottom: 12px;
    }

    .btn {
        flex: 1;
    }
}

/* ============================================================================
   Probability Data Configuration
   ============================================================================ */

/* Collapsible Cards */
.collapsible-card {
    overflow: hidden;
}

.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.collapsible-header:hover {
    background: rgba(44, 82, 130, 0.05);
}

.collapsible-header .card-subtitle {
    margin: 0;
}

.collapsible-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.total-indicator {
    font-size: 13px;
    font-weight: 500;
    color: var(--status-success);
}

.collapse-icon {
    transition: transform 0.3s;
    color: var(--text-secondary, #6b7280);
}

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

.collapsible-content {
    padding: 0 20px 20px;
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s;
}

.collapsible-card.collapsed .collapsible-content {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Day Distribution Grid */
.day-distribution-grid,
.sales-window-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.distribution-slider-row {
    display: grid;
    grid-template-columns: 80px 1fr 50px;
    align-items: center;
    gap: 16px;
}

.distribution-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #2c2c2c);
}

.distribution-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--bg-secondary, #f1f1f1);
    border-radius: 3px;
    outline: none;
}

.distribution-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--warm-accent, #2c5282);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
}

.distribution-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.distribution-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--warm-accent, #2c5282);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.distribution-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--warm-accent, #2c5282);
    text-align: right;
}

/* Monthly Distribution Grid */
.monthly-distribution-grid {
    margin-top: 16px;
}

.monthly-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.monthly-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.monthly-input-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    text-align: center;
}

.monthly-input-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

.monthly-input-group input:focus {
    border-color: var(--warm-accent, #2c5282);
    outline: none;
}

.monthly-input-group span {
    font-size: 11px;
    color: var(--text-muted, #9ca3af);
    text-align: center;
}

/* CSV Upload Area */
.csv-upload-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

.csv-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.csv-status {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
}

.csv-status.csv-loaded {
    color: var(--status-success);
    font-weight: 500;
}

.csv-date {
    font-size: 12px;
    color: var(--text-muted, #9ca3af);
}

.csv-format-hint {
    margin-top: 16px;
    padding: 12px;
    background: var(--bg-secondary, #f9f9f9);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
}

.csv-format-hint code {
    display: block;
    margin-top: 8px;
    padding: 8px;
    background: var(--bg-card, #fff);
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    white-space: pre-line;
}

/* Probability Actions */
.probability-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .monthly-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .monthly-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .distribution-slider-row {
        grid-template-columns: 60px 1fr 40px;
        gap: 8px;
    }
}

/* ============================================================================
   RICH TEXT EDITOR (QUILL) - Terms & Conditions
   ============================================================================ */

#termsEditor .ql-editor {
    font-size: 14px;
    min-height: 250px;
    line-height: 1.6;
    font-family: inherit;
}

#termsEditor .ql-editor.ql-blank::before {
    font-style: italic;
    color: var(--text-tertiary, #9ca3af);
}

.ql-toolbar.ql-snow {
    border-radius: 10px 10px 0 0;
    border-color: var(--warm-border, #dfe5ee);
    background: var(--bg-card, #ffffff);
}

.ql-container.ql-snow {
    border-radius: 0 0 10px 10px;
    border-color: var(--warm-border, #dfe5ee);
    background: var(--bg-card, #ffffff);
}

/* ============================================================================
   Fees & Rates Tab
   ============================================================================ */

.fees-subtab-pill {
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full, 9999px);
    border: 1px solid var(--warm-border, #dfe5ee);
    background: var(--bg-card, #fff);
    color: var(--text-secondary, #6b7280);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.fees-subtab-pill:hover {
    border-color: var(--warm-accent, #2c5282);
    color: var(--warm-accent, #2c5282);
}

.fees-subtab-pill.active {
    background: var(--warm-accent, #2c5282);
    border-color: var(--warm-accent, #2c5282);
    color: #fff;
}

/* Compact table for 500+ rows */
.fees-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    line-height: 1.35;
}

.fees-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-secondary, #f9fafb);
    padding: 0.5rem 0.6rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary, #6b7280);
    border-bottom: 2px solid var(--border-color, #e5e7eb);
    white-space: nowrap;
    z-index: 1;
}

.fees-table tbody tr {
    border-bottom: 1px solid var(--border-color, #f0f0f0);
    transition: background 0.15s;
}

.fees-table tbody tr:hover {
    background: var(--bg-secondary, #f9fafb);
}

.fees-table td {
    padding: 0.4rem 0.6rem;
    color: var(--text-primary, #2c2c2c);
    white-space: nowrap;
}

.fees-col-icao {
    font-family: monospace;
    letter-spacing: 0.04em;
}

.fees-col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.fees-col-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.fees-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.15s;
}

.fees-btn-icon:hover {
    background: var(--bg-secondary, #f0f0f0);
    color: var(--text-primary, #2c2c2c);
}

.fees-btn-icon.fees-btn-danger:hover {
    background: var(--danger-bg);
    color: var(--risk-critical);
}

.fees-btn-sm {
    padding: 0.3rem 0.75rem;
    font-size: 0.78rem;
    border-radius: 6px;
    border: 1px solid var(--warm-border, #dfe5ee);
    background: var(--bg-card, #fff);
    color: var(--text-primary, #2c2c2c);
    cursor: pointer;
    transition: all 0.15s;
}

.fees-btn-sm:hover:not(:disabled) {
    border-color: var(--warm-accent, #2c5282);
    color: var(--warm-accent, #2c5282);
}

.fees-btn-sm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Modal overlay (reusable) */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

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

.modal {
    background: var(--bg-card, #fff);
    border-radius: var(--radius-lg, 10px);
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 1.25rem 1.5rem;
}

.modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

/* Signature Prices Tab */
.fees-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.fees-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fees-count-badge {
    display: inline-block;
    padding: 2px 10px;
    background: rgba(30, 90, 160, 0.15);
    color: #1e5aa0;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.fees-last-sync {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: 8px;
}

.fees-panel-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
}

.fees-search-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--warm-border);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.fees-filter-select {
    padding: 6px 10px;
    border: 1px solid var(--warm-border);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
    min-width: 180px;
}

.fees-empty-state {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
}

.fees-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.75rem 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.fees-btn-primary {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    background: var(--warm-accent, #2c5282);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.fees-btn-primary:hover:not(:disabled) {
    opacity: 0.9;
}

.fees-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.fees-btn-secondary {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--warm-border, #d1d5db);
    border-radius: 6px;
    cursor: pointer;
}

.fees-btn-secondary:hover {
    background: rgba(44, 82, 130, 0.08);
}

.fees-detail-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    font-size: 0.85rem;
}

.fees-detail-table td,
.fees-detail-table th {
    padding: 6px 10px;
    border-bottom: 1px solid var(--warm-border);
    text-align: left;
}

.fees-detail-table th {
    background: rgba(44, 82, 130, 0.08);
    font-weight: 600;
}

.fees-detail-table td.numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.fees-detail-table.services-matrix {
    font-size: 0.75rem;
}

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

.freshness-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.freshness-dot.fresh { background: var(--status-success); }
.freshness-dot.aging { background: var(--status-warning); }
.freshness-dot.stale { background: var(--risk-critical); }
.freshness-dot.unknown { background: #6b7280; }


/* ═══════════════════════════════════════════════════════════════════
   ROTATION PATTERNS  (Initiative 20, step 6)

   Was tools/scheduler-settings.html, a page of its own reached from the
   scheduler's strip. The owner asked for it here, in the one settings
   page, so the markup and this block moved and that page is gone.

   The `.set-` prefix is kept: it always meant "settings", and it is more
   accurate here than it was on a page called scheduler-settings.

   Known duplication, left alone deliberately: .set-form-input and
   .set-form-label restate what .form-group input / .form-group label
   already say a few hundred lines above. Collapsing them means editing a
   working rotation editor for naming, which is not what this step is for.
   ═══════════════════════════════════════════════════════════════════ */

.set-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.set-section-head h2 {
  font-size: var(--text-section);
  font-weight: 700;
  color: var(--text-heading);
  margin: 0;
}
.set-card {
  background: var(--bg-card);
  border: 1px solid var(--warm-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
  overflow: hidden;
}
.set-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--warm-border);
  background: var(--wash);
}
.set-card-title {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--text-heading);
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
}
.set-card-sub {
  font-size: var(--text-dense);
  color: var(--text-secondary);
  margin-left: 10px;
  font-weight: 400;
}
.set-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.set-card-body { padding: 16px 18px; }
.set-year-grid,
.set-year-row {
  display: grid;
  /* Last column is the row's remove control, sized to the touch floor. */
  grid-template-columns: 62px 1fr 1fr var(--touch-target-min);
  gap: 10px;
  align-items: center;
}
.set-year-grid { padding-bottom: 6px; }
.set-col-head {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-label);
}
.set-col-head.a { color: var(--warm-accent); }
.set-col-head.b { color: var(--accent-light); }
.set-year-row {
  padding: 9px 0;
  border-top: 1px solid var(--warm-border);
}
.set-year-label {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--text-heading);
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
}
.set-field label {
  display: block;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-label);
  margin-bottom: 4px;
}
.set-date-input {
  width: 100%;
  /* Matches the settings page's own inputs, and clears the 44px floor: the
     7px it carried on its old page left it about 35px tall. */
  box-sizing: border-box;
  min-height: var(--touch-target-min);
  padding: 10px 12px;
  font-size: var(--text-support);
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-heading);
}
.set-date-input:focus {
  outline: none;
  border-color: var(--warm-accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.set-date-input[readonly] {
  background: var(--wash);
  color: var(--text-secondary);
  cursor: default;
}
.set-row-remove {
  /* An icon-only control is still a control: 44px, like every other one in
     the kit. It was 30 x 26 on its old page. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  border-radius: var(--radius-sm);
  line-height: 0;
  align-self: end;
}
.set-row-remove:hover { color: var(--danger-color); background: var(--bad-bg); }
.set-note {
  font-size: var(--text-dense);
  color: var(--text-secondary);
  margin-top: 12px;
  line-height: 1.5;
}
.set-form-group { margin-bottom: 14px; }
.set-form-group:last-child { margin-bottom: 0; }
.set-form-label {
  display: block;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-label);
  margin-bottom: 5px;
}
.set-form-input {
  width: 100%;
  padding: 8px 10px;
  font-size: var(--text-support);
  font-family: var(--font-family);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
}
.set-form-input:focus {
  outline: none;
  border-color: var(--warm-accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.set-form-input.num {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
  text-align: center;
}
.set-form-hint { font-size: var(--text-dense); color: var(--text-secondary); margin-top: 5px; }
.set-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.set-modal-lede { font-size: var(--text-data); color: var(--text-secondary); margin: 0 0 16px; line-height: 1.5; }
.set-modal-copy { font-size: var(--text-data); color: var(--text-primary); margin: 0 0 8px; line-height: 1.5; }
.set-modal-fine { font-size: var(--text-dense); color: var(--text-muted); margin: 0; }
.set-warn {
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-size: var(--text-support);
  margin-bottom: 14px;
  line-height: 1.5;
}
/* Narrow: stack A over B rather than dropping the derived B side. Each field
   carries its own label, so the shared column header goes instead of the data. */
@media (max-width: 640px) {
  .set-year-grid { display: none; }
  .set-year-row {
    grid-template-columns: 52px 1fr var(--touch-target-min);
    row-gap: 8px;
    align-items: start;
  }
  .set-year-row .set-field.a { grid-column: 2; grid-row: 1; }
  .set-year-row .set-field.b { grid-column: 2; grid-row: 2; }
  .set-year-row .set-row-remove { grid-column: 3; grid-row: 1; margin-bottom: 0; align-self: center; }
  .set-year-label { padding-top: 16px; }
  .set-form-grid { grid-template-columns: 1fr; }
}

/* "Saved · Undo" toast (batch 10, item 3c — Apply pattern change to all
   rostered crew) — same recipe as css/scheduler/crew.css's own
   #crew-qual-undo-toast (batch 8, item 3): bottom-center, one persistent
   element re-shown (its timer reset) on every apply rather than stacking,
   one-shot Undo. This page doesn't load crew.css, so a same-recipe copy
   rather than a shared include. */
#set-pattern-undo-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 10px);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--navy-bar);
  color: #fff;
  padding: 8px 10px 8px 16px;
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--text-support);
  font-weight: 500;
  box-shadow: var(--shadow-xl);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#set-pattern-undo-toast.is-in { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.set-undo-toast-sep { opacity: 0.5; }
.set-undo-toast-action {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  cursor: pointer;
}
.set-undo-toast-action:hover { background: rgba(255, 255, 255, 0.24); }
.set-undo-toast-action:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 720px) {
  #set-pattern-undo-toast { left: 12px; right: 12px; transform: translateY(10px); }
  #set-pattern-undo-toast.is-in { transform: translateY(0); }
}