/* ═══════════════════════════════════════════════
   Settings Pages — scoped additions
   Loaded on: aircraftSettings, users, defects, techlog, reports
   Base styles (body, .btn, topbar) live in styles.css
   ═══════════════════════════════════════════════ */

/* --- Form elements (scoped to .container to avoid topbar bleed) --- */
.container label {
    display: block;
    margin-top: 12px;
    color: var(--color-text-secondary, #555);
}

.container input,
.container select {
    width: 100%;
    padding: 8px 10px;
    margin-top: 4px;
    border: 1px solid #ccc;
    border-radius: var(--radius-input);
    font-size: 14px;
    box-sizing: border-box;
}

.container form button:not(.btn) {
    margin-top: 16px;
    padding: 10px 16px;
    background: var(--color-primary-bg);
    color: var(--color-primary-text);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-btn);
    font-size: 14px;
    font-weight: var(--font-weight-btn);
    cursor: pointer;
    transition: box-shadow var(--transition-base);
}

.container form button:not(.btn):hover {
    box-shadow: var(--shadow-btn-hover);
}

.container select {
    margin-top: 4px;
}

/* --- Inline forms --- */
.form-inline {
    display: flex;
    gap: 10px;
    align-items: center;
}

.form-inline td {
    padding: 8px;
}

/* --- Checkbox style --- */
.form-check {
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-check-input {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.form-check-label {
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

/* --- Table cells within settings --- */
td input[type="date"],
td input[type="number"] {
    width: 160px;
    padding: 6px 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

td form {
    display: inline;
}

td button {
    margin-top: 0;
}

/* ═══════════════════════════════════════════════
   USERS PAGE
   ═══════════════════════════════════════════════ */
.users-page h2 {
    margin-bottom: 8px;
}

.users-table-card {
    background: var(--color-bg-subtle, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    padding: 28px 32px 32px;
    box-shadow: var(--shadow-card, 0 2px 12px rgba(0, 0, 0, 0.05));
}

.users-table-wrap {
    max-height: 480px;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    border: 1px solid var(--color-border, #e5e7eb);
}

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

.users-table thead th {
    position: sticky;
    top: 0;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--color-th-text);
    background: var(--color-th-bg);
    border-bottom: 1px solid var(--color-th-border);
    text-align: left;
    white-space: nowrap;
    z-index: 2;
}

.users-th-center { text-align: center !important; min-width: 70px; }

.users-table tbody tr {
    transition: background 0.15s ease;
}

.users-table tbody tr:hover {
    background: #f0f7ff;
}

.users-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--color-border-light, #f1f3f5);
}

.users-table td {
    padding: 12px 14px;
    font-size: 14px;
    color: var(--color-text, #374151);
}

.users-td-name {
    font-weight: 600;
    color: var(--color-text, #1e293b);
    min-width: 90px;
}

.users-td-email {
    color: var(--color-text-secondary, #6b7280);
    min-width: 120px;
}

.users-td-center {
    text-align: center;
}

.users-td-actions {
    text-align: right;
}

/* Role badges */
.role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.role-yes {
    color: #065f46;
    background: #d1fae5;
}

.role-no {
    color: var(--color-text-secondary, #9ca3af);
    background: var(--color-bg-subtle, #f3f4f6);
}

/* Inline editing */
.users-td-center,
.users-td-actions {
    white-space: nowrap;
}

.inline-edit-input {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    background: var(--color-bg-subtle, #fff);
    color: var(--color-text, #1e293b);
}

.inline-edit-input:focus {
    outline: none;
    border-color: var(--color-primary-bg, #93c5fd);
    box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.3);
}


.inline-edit-reg-row {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.inline-edit-reg-row .inline-edit-input {
    width: 80px;
    flex-shrink: 0;
}

.inline-edit-heli-label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    cursor: pointer;
}

.inline-edit-heli-label--disabled {
    opacity: 0.4;
    filter: grayscale(1);
    cursor: not-allowed;
    pointer-events: none;
}

.inline-edit-form {
    display: inline;
}

.flight-data-source-toggle {
    padding: 4px 8px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
    background: var(--color-surface, #fff);
    color: var(--color-text, inherit);
}

button.users-docs-link {
    font-family: inherit;
    cursor: pointer;
}

/* Documents link */
.users-docs-link {
    display: inline-block;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #0072ce;
    background: #eef6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.users-docs-link:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(0, 114, 206, 0.15);
}

@media (max-width: 700px) {
    .users-table-card {
        padding: 12px 8px 16px;
        border-radius: 6px;
    }
    .users-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .users-table {
        min-width: 700px;
        border-collapse: separate;
        border-spacing: 0;
    }
    .users-table thead th {
        padding: 8px 6px;
        font-size: 11px;
    }
    .users-table td {
        padding: 8px 6px;
        font-size: 13px;
    }

    /* Sticky first column on horizontal scroll */
    .users-table thead th:first-child,
    .users-table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
    }

    .users-table tbody td:first-child {
        background: var(--color-surface, #fff);
    }

    .users-table thead th:first-child {
        z-index: 3;
    }

    /* Preserve row highlight colours on sticky cell */
    .users-table tr.restrictive-row-expired td:first-child {
        background: var(--color-danger-bg, #fee2e2);
    }
    .users-table tr.restrictive-row-expiring td:first-child {
        background: #fefce8;
    }
    .users-table tr.row-completed td:first-child {
        background: var(--color-surface, #fff);
        opacity: 0.5;
    }
}

.add-user-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    padding: 28px 32px 32px;
    margin-top: 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

@media (max-width: 700px) {
    .add-user-card {
        padding: 20px 16px 24px;
    }
}

/* ═══════════════════════════════════════════════
   DOCUMENT TABS (user documents page)
   ═══════════════════════════════════════════════ */
.tab-btn {
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
}

.tab-btn:hover {
    color: var(--color-text, #1e293b);
}

.tab-btn.active {
    color: var(--color-primary-bg, #0072ce);
    border-bottom-color: var(--color-primary-bg, #0072ce);
}

.tab-content {
    display: none;
}

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

.add-document-section {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid #ddd;
}

.add-document-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

.add-document-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}

.form-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 150px;
}

.form-group label {
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 14px;
}

.form-group input {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.1);
}

.add-document-form button {
    height: 38px;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════
   RESTRICTIVE EVENTS PAGE
   ═══════════════════════════════════════════════ */
.restrictive-page h2 {
    margin-bottom: 8px;
}

/* Tabs */
.restrictive-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--color-border, #e5e7eb);
}

.restrictive-tab {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
}

.restrictive-tab:hover {
    color: var(--color-text, #1e293b);
}

.restrictive-tab.active {
    color: var(--color-primary-bg, #0072ce);
    border-bottom-color: var(--color-primary-bg, #0072ce);
}

/* Add record cards */
.add-record-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    padding: 28px 32px 32px;
    margin-top: 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.add-record-card .form-field select {
    padding: 10px 12px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    background: var(--color-bg-subtle, #fff);
    color: var(--color-text, #1e293b);
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}

.add-record-card .form-field select:focus {
    outline: none;
    border-color: var(--color-primary-bg, #0072ce);
    box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.1);
}

/* Table overrides */
.restrictive-tbl td {
    vertical-align: middle;
}

.restrictive-date-warning {
    color: #dc2626;
    font-weight: 700;
}

.row-completed {
    background-color: var(--color-bg-subtle, #f9fafb) !important;
}

.row-completed td {
    color: var(--color-text-secondary, #9ca3af);
}

.restrictive-badge-expired {
    color: #991b1b;
    background: #fee2e2;
}

.restrictive-input {
    padding: 8px 10px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    background: var(--color-surface, #fff);
    color: var(--color-text, inherit);
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 130px;
    box-sizing: border-box;
}

.restrictive-input:focus {
    outline: none;
    border-color: var(--color-primary-bg, #0072ce);
    box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.1);
}

.restrictive-action-btn {
    font-family: inherit;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 400;
    border-radius: 8px;
    line-height: 1.5;
}

.restrictive-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-secondary, #9ca3af);
    font-size: 15px;
}

/* Auto-managed document expiry row highlights */
.restrictive-row-expiring {
    background-color: #fefce8 !important;
}

.restrictive-row-expiring td {
    color: #854d0e;
}

.restrictive-row-expired {
    background-color: var(--color-danger-bg, #fee2e2) !important;
}

.restrictive-row-expired td {
    color: var(--color-danger-text, #991b1b);
}

@media (max-width: 720px) {
    .add-record-card {
        padding: 20px 16px 24px;
    }

    .restrictive-doc-tbl {
        min-width: 600px;
        width: max-content;
    }

    .add-record-form .form-field input,
    .add-record-form .form-field select,
    .add-record-form .doc-file-input {
        width: 100%;
        min-height: 44px;
        box-sizing: border-box;
    }
}

/* ═══════════════════════════════════════════════
   ORG PICKER PAGE
   ═══════════════════════════════════════════════ */
.org-picker-page {
    max-width: 560px;
    margin: 40px auto;
    padding: 0 16px;
}

.org-picker-card {
    background-color: #fdfcfd;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: 32px 28px 28px;
}

.org-picker-logo {
    display: block;
    max-width: 280px;
    margin: 0 auto 20px;
}

.org-picker-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text, #1e293b);
    text-align: left;
}

.org-picker-subtitle {
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--color-text-secondary, #6b7280);
}

.org-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.org-list-item {
    margin: 0;
}

.org-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    background: var(--color-bg-subtle, #f8f9fb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: left;
    font-family: inherit;
    font-size: 15px;
}

.org-card:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.1);
    transform: translateY(-1px);
}

.org-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #4f46e5;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.org-card-name {
    flex: 1;
    font-weight: 600;
    color: var(--color-text, #1e293b);
}

.org-card-arrow {
    color: var(--color-text-secondary, #94a3b8);
    font-size: 18px;
    transition: transform 0.15s ease, color 0.15s ease;
}

.org-card:hover .org-card-arrow {
    transform: translateX(3px);
    color: #4f46e5;
}

/* Add org section */
.org-add-section {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.org-add-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text, #374151);
}

.org-add-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.org-add-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: var(--color-surface, #fff);
    color: var(--color-text, inherit);
    outline: none;
    transition: border-color 0.15s;
}

.org-add-input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.org-add-btn {
    white-space: nowrap;
}

/* Org card logo (picker page) */
.org-card-logo {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Org logo preview (settings page) */
.org-logo-preview {
    max-width: 160px;
    border-radius: 8px;
    border: 1px solid var(--color-border, #e5e7eb);
}

.org-logo-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Org tab panels */
.org-tab-panel {
    /* No extra styles needed — display toggled by JS */
}

@media (max-width: 700px) {
    .org-logo-preview {
        max-width: 120px;
    }
    .org-logo-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Topbar org badge & user styles moved to styles.css (loaded on all pages) */

/* ═══════════════════════════════════════════════
   ADD AIRCRAFT CARD
   ═══════════════════════════════════════════════ */
.add-aircraft-card {
    background: var(--color-bg-subtle, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    padding: 28px 32px 32px;
    margin-top: 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.add-aircraft-title {
    margin: 0 0 24px;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text, #1e293b);
}

/* --- Category picker (helicopter / fixed wing) --- */
.aircraft-category-picker {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.category-option {
    flex: 1;
    max-width: 200px;
    cursor: pointer;
    margin: 0 !important;
}

.category-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    border: 2px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    background: var(--color-bg-subtle, #f9fafb);
    transition: all 0.2s ease;
}

.category-option input[type="radio"]:checked + .category-card {
    border-color: #0072ce;
    background: #eef6ff;
    box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.12);
}

.category-option:hover .category-card {
    border-color: #93c5fd;
    background: #f0f7ff;
}

/* --- Dark: settings cards --- */
[data-palette="phpstorm_classic"] .category-card,
[data-palette="phpstorm_teal"] .category-card {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-palette="phpstorm_classic"] .category-option input[type="radio"]:checked + .category-card,
[data-palette="phpstorm_teal"] .category-option input[type="radio"]:checked + .category-card {
    border-color: var(--color-primary-bg);
    background: var(--color-hover);
    box-shadow: 0 0 0 3px rgba(130, 170, 255, 0.25);
}

[data-palette="phpstorm_classic"] .category-option:hover .category-card,
[data-palette="phpstorm_teal"] .category-option:hover .category-card {
    border-color: var(--color-primary-border);
    background: var(--color-hover);
}

[data-palette="phpstorm_classic"] .settings-option-example,
[data-palette="phpstorm_classic"] .category-label,
[data-palette="phpstorm_teal"] .settings-option-example,
[data-palette="phpstorm_teal"] .category-label {
    color: var(--color-text);
}

.category-option--disabled {
    cursor: not-allowed;
    pointer-events: none;
}

.category-option--disabled .category-card {
    opacity: 0.45;
    filter: grayscale(1);
}

.category-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted, #9ca3af);
}

.category-emoji {
    font-size: 32px;
    line-height: 1;
}

.category-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text, #374151);
}

/* --- Form grid --- */
.aircraft-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
}

.form-field label {
    margin: 0 0 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #4b5563);
}

.form-field input {
    padding: 10px 12px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: var(--color-bg-subtle, #fff);
    color: var(--color-text, #1e293b);
    min-width: 0;
}

.form-field input:focus {
    outline: none;
    border-color: var(--color-primary-bg, #0072ce);
    box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.1);
}

.form-field select {
    padding: 10px 12px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    background: var(--color-bg-subtle, #fff);
    color: var(--color-text, #1e293b);
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}

.form-field select:focus {
    outline: none;
    border-color: var(--color-primary-bg, #0072ce);
    box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.1);
}

.form-field input::placeholder {
    color: var(--color-text-secondary, #9ca3af);
}

/* --- Toggle pills (Turbine / Multi Engine) --- */
.aircraft-toggles {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.toggle-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f9fafb;
    margin: 0 !important;
    user-select: none;
}

.toggle-pill:hover {
    border-color: #93c5fd;
    background: #f0f7ff;
}

.toggle-pill input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #0072ce;
    cursor: pointer;
    margin: 0;
}

.toggle-pill .toggle-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text, #374151);
    cursor: pointer;
}

/* --- Clickable flag badges (editable role-badge) --- */
.flag-toggle {
    cursor: pointer;
    display: inline-block;
    margin: 0 !important;
    user-select: none;
}
.flag-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.flag-badge {
    display: none;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: all 0.18s ease;
}
.flag-on {
    color: #065f46;
    background: #d1fae5;
}
.flag-off {
    color: var(--color-text-secondary, #9ca3af);
    background: var(--color-bg-subtle, #f3f4f6);
}
.flag-toggle:hover .flag-badge {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.flag-toggle input:checked ~ .flag-on { display: inline-block; }
.flag-toggle input:checked ~ .flag-off { display: none; }
.flag-toggle input:not(:checked) ~ .flag-on { display: none; }
.flag-toggle input:not(:checked) ~ .flag-off { display: inline-block; }

/* --- Submit button --- */
.add-aircraft-btn {
    margin-top: 8px;
}

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

    .add-aircraft-card {
        padding: 12px 8px 16px;
        border-radius: 6px;
    }
}

/* ═══════════════════════════════════════════════
   ORGANISATION SETTINGS PAGE
   ═══════════════════════════════════════════════ */
.org-settings-page {
    max-width: 620px;
    margin: 40px auto;
    padding: 0 16px;
}

.org-settings-card {
    background: var(--color-surface, #fff);
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: 32px 28px 28px;
}

.org-settings-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text, #1e293b);
    text-align: left;
}

.org-settings-subtitle {
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--color-text-secondary, #6b7280);
}

/* Sections */
.settings-section {
    margin-bottom: 28px;
}

.settings-section-title {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text, #1e293b);
}

.settings-section-desc {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--color-text-secondary, #6b7280);
}

/* Radio-card toggle group (reuses category-option/category-card) */
.settings-toggle-group {
    display: flex;
    gap: 12px;
}

.settings-toggle-group .category-option {
    flex: 1;
    max-width: 220px;
}

.settings-option-example {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text, #1e293b);
    line-height: 1.2;
}

/* Select dropdown */
.settings-select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    background: var(--color-bg-subtle, #f9fafb);
    color: var(--color-text, #1e293b);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: auto;
}

.settings-select:focus {
    outline: none;
    border-color: #0072ce;
    box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.12);
}

/* Select wrapper (for tile-saved animation target) */
.settings-select-wrap {
    border-radius: 10px;
}

/* ═══════════════════════════════════════════════
   AUDIT PAGE
   ═══════════════════════════════════════════════ */

/* Severity sub-tab colors */
.severity-tab-info.active  { background: #dcfce7; color: #166534; border-color: #86efac; }
.severity-tab-warn.active  { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.severity-tab-error.active { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* Severity badges in table rows */
.severity-badge-info,
.severity-badge-debug { color: #065f46; background: #d1fae5; }
.severity-badge-warning    { color: #854d0e; background: #fef9c3; }
.severity-badge-error      { color: #991b1b; background: #fee2e2; }
.severity-badge-warn       { color: #854d0e; background: #fef9c3; }

/* Expandable detail rows */
.audit-detail-row td { border-top: none !important; }

.audit-pre {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    max-height: 300px;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 4px 0 0;
}

/* ═══════════════════════════════════════════════
   COLOUR SCHEME PAGE
   ═══════════════════════════════════════════════ */
.palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.palette-card {
    background: var(--color-surface, #fff);
    border: 2px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.palette-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 12px rgba(0, 114, 206, 0.1);
}

.palette-card--active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.12);
}

.palette-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text, #1e293b);
}

.palette-desc {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.palette-swatches {
    display: flex;
    gap: 6px;
}

.palette-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 700px) {
    .palette-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .palette-card {
        padding: 14px 12px;
    }
    .palette-swatch {
        width: 22px;
        height: 22px;
    }
}

/* ═══════════════════════════════════════════════
   USER DOCUMENTS PAGE
   ═══════════════════════════════════════════════ */

/* Expiry status badges */
.doc-badge-valid {
    color: #065f46;
    background: #d1fae5;
}

.doc-badge-expiring {
    color: #854d0e;
    background: #fef9c3;
}

.doc-badge-expired {
    color: #991b1b;
    background: #fee2e2;
}

/* Document table */
.doc-table {
    margin-bottom: 0;
}

.doc-table td {
    vertical-align: middle;
}

/* Delete button styled like docs-link but danger */
.doc-delete-btn {
    color: #dc2626 !important;
    background: #fef2f2 !important;
    border-color: #fecaca !important;
}

.doc-delete-btn:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
}

/* File input */
.doc-file-input {
    padding: 6px 0 !important;
    border: none !important;
    font-size: 13px;
}

@media (max-width: 720px) {
    /* Stack the add-document form vertically */
    .add-document-form {
        flex-direction: column;
    }

    .add-document-form .form-group {
        min-width: 100%;
    }

    .add-document-form .form-group input,
    .add-document-form .form-group select,
    .add-document-form .doc-file-input {
        width: 100%;
        min-height: 44px;
        box-sizing: border-box;
    }

    .doc-table {
        min-width: 600px;
        width: max-content;
    }
}

/* --- Users filter bar --- */
.users-filter-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.users-search-input {
    flex: 1;
    min-width: 200px;
    max-width: 360px;
    padding: 8px 12px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    background: var(--color-surface, #fff);
    color: var(--color-text, inherit);
}

.users-dot-filter {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 0 !important;
    font-size: 13px;
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.users-dot-filter input {
    display: none !important;
}

.users-dot-filter .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border, #d1d5db);
    transition: background 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}

.users-dot-filter input:checked ~ .dot {
    background: var(--color-primary-bg, #0072ce);
    box-shadow: 0 0 6px 2px color-mix(in srgb, var(--color-primary-bg, #0072ce) 50%, transparent);
}

[data-palette="phpstorm_classic"] .users-dot-filter,
[data-palette="phpstorm_teal"] .users-dot-filter {
    color: var(--color-text-secondary);
}

[data-palette="phpstorm_classic"] .users-dot-filter input:checked ~ .dot,
[data-palette="phpstorm_teal"] .users-dot-filter input:checked ~ .dot {
    box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-primary-bg) 60%, transparent);
}

@media (max-width: 600px) {
    .users-filter-bar {
        gap: 10px;
    }
    .users-search-input {
        min-width: 0;
        max-width: none;
        flex-basis: 100%;
    }
}

/* ═══════════════════════════════════════════════
   VERTICAL TAB LAYOUT (Organisation Settings)
   ═══════════════════════════════════════════════ */
.org-settings-page--tabbed {
    max-width: var(--page-max-width, 1400px);
}

.org-settings-card--tabbed {
    padding: 0;
    overflow: hidden;
}

.settings-tabs-layout {
    display: flex;
    min-height: 400px;
}

.settings-tabs-nav {
    display: flex;
    flex-direction: column;
    width: 180px;
    flex-shrink: 0;
    background: var(--color-bg-subtle, #f8f9fb);
    border-right: 1px solid var(--color-border, #e5e7eb);
    padding: 16px 0;
}

.settings-tab-link {
    display: block;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary, #6b7280);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
}

.settings-tab-link:hover {
    color: var(--color-text, #1e293b);
    background: var(--color-hover, #eef2ff);
}

.settings-tab-link.active {
    color: var(--color-primary-bg, #0072ce);
    font-weight: 600;
    background: var(--color-surface, #fff);
    border-left-color: var(--color-primary-bg, #0072ce);
}

.settings-tab-content {
    flex: 1;
    padding: 32px 28px 28px;
    min-width: 0;
}

/* Dark palette support */
[data-palette="phpstorm_classic"] .settings-tabs-nav,
[data-palette="phpstorm_teal"] .settings-tabs-nav {
    background: var(--color-surface);
    border-right-color: var(--color-border);
}

[data-palette="phpstorm_classic"] .settings-tab-link,
[data-palette="phpstorm_teal"] .settings-tab-link {
    color: var(--color-text-secondary);
}

[data-palette="phpstorm_classic"] .settings-tab-link:hover,
[data-palette="phpstorm_teal"] .settings-tab-link:hover {
    color: var(--color-text);
    background: var(--color-hover);
}

[data-palette="phpstorm_classic"] .settings-tab-link.active,
[data-palette="phpstorm_teal"] .settings-tab-link.active {
    color: var(--color-primary-bg);
    background: var(--color-bg);
    border-left-color: var(--color-primary-bg);
}

/* Mobile: horizontal tabs */
@media (max-width: 700px) {
    .settings-tabs-layout {
        flex-direction: column;
        min-height: auto;
    }

    .settings-tabs-nav {
        flex-direction: row;
        width: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-border, #e5e7eb);
        padding: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .settings-tab-link {
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
        padding: 14px 18px;
    }

    .settings-tab-link.active {
        border-bottom-color: #0072ce;
        border-left-color: transparent;
    }

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

/* ═══════════════════════════════════════════════
   MEMBERSHIP SETTINGS TAB
   ═══════════════════════════════════════════════ */
.membership-form {
    max-width: 420px;
}

.membership-field {
    margin-bottom: 24px;
}

/* Enable membership reuses .toggle-pill from aircraft/user settings */

.membership-fields {
    padding-top: 8px;
}

.membership-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 280px;
}

.membership-currency-select {
    padding: 10px 8px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: var(--color-surface, #fff);
    color: var(--color-text, inherit);
    width: 100px;
}

.membership-price-input,
.membership-discount-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: var(--color-surface, #fff);
    color: var(--color-text, inherit);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.membership-price-input:focus,
.membership-discount-input:focus {
    outline: none;
    border-color: var(--color-primary-bg, #0072ce);
    box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.1);
}

.membership-input-suffix {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
}

.membership-feedback {
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
}

.membership-feedback--success {
    background: #d1fae5;
    color: #065f46;
}

.membership-feedback--error {
    background: #fee2e2;
    color: #991b1b;
}

/* ═══════════════════════════════════════════════
   MY MEMBERSHIP PAGE
   ═══════════════════════════════════════════════ */
.membership-page {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 16px;
}

.membership-card {
    background: var(--color-bg, #fff);
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: 32px 28px 28px;
}
.membership-card + .membership-card {
    margin-top: 20px;
}

.membership-card-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text, #1e293b);
}

.membership-card-subtitle {
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--color-text-secondary, #6b7280);
}

/* Selling message */
.membership-selling {
    background: var(--color-hover, #f0f7ff);
    border: 1px solid var(--color-border, #bfdbfe);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
}

.membership-selling-title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary, #1e40af);
}

.membership-rates {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.membership-rate-item {
    display: flex;
    flex-direction: column;
}

.membership-rate-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--color-text-secondary, #6b7280);
}

.membership-rate-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text, #1e293b);
}

.membership-rate-value--highlight {
    color: #059669;
}

.membership-breakeven {
    font-size: 13px;
    color: var(--color-text, #374151);
    margin: 0;
}

/* Document warning */
.membership-doc-warning {
    background: #fef9c3;
    border: 1px solid #fde047;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #854d0e;
}

.membership-doc-warning a {
    color: #92400e;
    font-weight: 600;
}

/* Status section */
.membership-status {
    margin-bottom: 24px;
}

.membership-status-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.membership-badge-active {
    color: #065f46;
    background: #d1fae5;
}

.membership-badge-pending {
    color: #854d0e;
    background: #fef9c3;
}

.membership-badge-expired {
    color: #991b1b;
    background: #fee2e2;
}

.membership-dates {
    font-size: 14px;
    color: var(--color-text, #374151);
    margin: 8px 0;
}

/* Stripe payment section */
.membership-payment-section {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--color-bg-card, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
}

.membership-payment-section h3 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text, #1e293b);
}

#stripe-payment-element {
    min-height: 100px;
}

#stripe-payment-errors {
    color: var(--color-danger, #dc2626);
    font-size: 13px;
    margin-top: 10px;
}

#stripe-submit-btn {
    margin-top: 16px;
    width: 100%;
    padding: 12px;
}

/* History table */
.membership-history {
    margin-top: 28px;
}

.membership-history-title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text, #1e293b);
}

.membership-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.membership-history-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--color-th-text, #6b7280);
    background: var(--color-th-bg, #f9fafb);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.membership-history-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-light, #f1f3f5);
    color: var(--color-text, #374151);
}

/* Cancel membership */
.membership-cancel-section {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    background: var(--color-bg, #fff);
}

.membership-cancel-section h3 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text, #1e293b);
}

.membership-cancel-warning {
    color: var(--color-text-secondary, #6b7280);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 16px;
}

.membership-cancel-actions {
    display: flex;
    gap: 10px;
}

.membership-cancel-success {
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--color-success-bg, #ecfdf5);
    border: 1px solid var(--color-success-border, #a7f3d0);
    color: var(--color-success-text, #065f46);
    font-size: 14px;
    line-height: 1.6;
    margin-top: 12px;
}

.membership-cancel-error {
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--color-error-bg, #fef2f2);
    border: 1px solid var(--color-error-border, #fecaca);
    color: var(--color-error-text, #991b1b);
    font-size: 14px;
    margin-top: 12px;
}

@media (max-width: 700px) {
    .membership-page {
        margin: 20px auto;
    }
    .membership-card {
        padding: 20px 16px 24px;
    }
    .membership-rates {
        gap: 16px;
    }
    .membership-history-table {
        font-size: 13px;
    }
}

/* ═══════════════════════════════════════════════
   FLIGHT PRODUCT TYPES TAB
   ═══════════════════════════════════════════════ */
.fpt-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-light, #f1f3f5);
}

.fpt-type-key {
    font-size: 12px;
    color: var(--color-text-secondary, #9ca3af);
    font-family: monospace;
}

.fpt-inline-form {
    display: inline;
    margin-left: auto;
}

.fpt-scenery-section {
    margin: 16px 0 24px 0;
    padding: 16px;
    background: var(--color-hover, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
}

.fpt-scenery-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

.fpt-scenery-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border-light, #f1f3f5);
    font-size: 14px;
    color: var(--color-text, #374151);
}

.fpt-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.fpt-add-row .inline-edit-input {
    flex: 1;
    max-width: 300px;
}

.fpt-add-type-form,
.fpt-add-scenery-form {
    margin-top: 16px;
}

.btn-sm {
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════
   BOOKINGS AVAILABILITY TAB
   ═══════════════════════════════════════════════ */
.avail-inner-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-border, #e5e7eb);
}

.avail-inner-tab {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary, #6b7280);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: inherit;
}

.avail-inner-tab:hover {
    color: var(--color-text, #1e293b);
}

.avail-inner-tab.active {
    color: var(--color-primary, #0072ce);
    font-weight: 600;
    border-bottom-color: var(--color-primary, #0072ce);
}

.avail-panel {
    display: none;
}

.avail-panel.active {
    display: block;
}

.avail-entity-select {
    margin-bottom: 16px;
}

.avail-rules-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.avail-rule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 8px;
    background: var(--color-bg, #fff);
    font-size: 14px;
}

.avail-rule-mode {
    font-weight: 600;
    text-transform: capitalize;
}

.avail-rule-dates {
    font-size: 13px;
    color: var(--color-text-secondary, #6b7280);
    margin-left: 8px;
}

.avail-rule-note {
    font-size: 13px;
    color: var(--color-text-secondary, #6b7280);
    font-style: italic;
    margin-left: 8px;
}

.avail-add-form {
    padding: 16px;
    background: var(--color-hover, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
}

.avail-add-form .form-field {
    margin-bottom: 12px;
}

.avail-mode-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.avail-datetime-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.avail-datetime-row .form-field {
    flex: 1;
    margin-bottom: 0;
}

/* Entity sub-tabs (pill-style) */
.avail-sub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.avail-sub-tab {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    background: var(--color-bg-subtle, #f3f4f6);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.avail-sub-tab:hover {
    color: var(--color-text, #1e293b);
    background: var(--color-hover, #eef2ff);
    border-color: var(--color-primary-border, #93c5fd);
}

.avail-sub-tab.active {
    color: #fff;
    background: var(--color-primary-bg, #0072ce);
    border-color: var(--color-primary-bg, #0072ce);
}

/* Recurrence fields */
.avail-recurrence-fields {
    margin-bottom: 12px;
    padding: 12px;
    background: var(--color-bg-subtle, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
}

.avail-recurrence-type {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.avail-day-checkboxes,
.avail-week-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.avail-check-label {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text, #374151);
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, background 0.15s;
}

.avail-check-label:hover {
    border-color: var(--color-primary-border, #93c5fd);
    background: var(--color-hover, #f0f7ff);
}

.avail-check-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--color-primary-bg, #0072ce);
    cursor: pointer;
    margin: 0;
}

/* Delete form inside rule item */
.avail-rule-delete-form {
    display: inline;
}

/* Dark palette support for sub-tabs and recurrence */
[data-palette="phpstorm_classic"] .avail-sub-tab,
[data-palette="phpstorm_teal"] .avail-sub-tab {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

[data-palette="phpstorm_classic"] .avail-sub-tab:hover,
[data-palette="phpstorm_teal"] .avail-sub-tab:hover {
    background: var(--color-hover);
    color: var(--color-text);
}

[data-palette="phpstorm_classic"] .avail-sub-tab.active,
[data-palette="phpstorm_teal"] .avail-sub-tab.active {
    background: var(--color-primary-bg);
    border-color: var(--color-primary-bg);
    color: #fff;
}

[data-palette="phpstorm_classic"] .avail-recurrence-fields,
[data-palette="phpstorm_teal"] .avail-recurrence-fields {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-palette="phpstorm_classic"] .avail-check-label,
[data-palette="phpstorm_teal"] .avail-check-label {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-palette="phpstorm_classic"] .avail-check-label:hover,
[data-palette="phpstorm_teal"] .avail-check-label:hover {
    background: var(--color-hover);
    border-color: var(--color-primary-border);
}

.avail-flash {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 12px;
}
.avail-flash.flash-success {
    background: var(--color-success-bg, #d1fae5);
    color: var(--color-success-text, #065f46);
}
.avail-flash.flash-error {
    background: #fee2e2;
    color: #991b1b;
}

/* ═══════════════════════════════════════════════
   TRAINING COURSES — custom course rows
   ═══════════════════════════════════════════════ */
.training-course-custom-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.training-course-custom-row .users-dot-filter {
    flex: 1;
}

.training-course-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 24px;
}

.training-course-add-input {
    flex: 1;
    max-width: 200px;
    padding: 8px 12px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: var(--color-surface, #fff);
    color: var(--color-text, inherit);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.training-course-add-input:focus {
    outline: none;
    border-color: var(--color-primary-bg, #0072ce);
    box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.1);
}

.training-course-add-input::placeholder {
    color: var(--color-text-secondary, #9ca3af);
}

.training-course-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--color-text-secondary, #6b7280);
    padding: 3px 5px;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.training-course-remove-btn:hover {
    color: var(--color-danger, #dc2626);
    background: color-mix(in srgb, var(--color-danger, #dc2626) 8%, transparent);
}

/* ═══════════════════════════════════════════════
   CAMO TAB
   ═══════════════════════════════════════════════ */
.camo-form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.camo-form-field > label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text, #1e293b);
}

.camo-form-input {
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: var(--color-surface, #fff);
    color: var(--color-text, inherit);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.camo-form-input:focus {
    outline: none;
    border-color: var(--color-primary-bg, #0072ce);
    box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.1);
}

.camo-address-input {
    resize: vertical;
    min-height: 48px;
}

.camo-add-contact-btn {
    margin-top: 10px;
    align-self: flex-start;
}

/* --- My Information form grid --- */
.my-info-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}
.my-info-form-grid .camo-form-field:first-child {
    grid-column: 1 / -1;
}
@media (max-width: 640px) {
    .my-info-form-grid {
        grid-template-columns: 1fr;
    }
}

.camo-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

/* Contact form rows (inline add/edit) */
.camo-contact-form-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.camo-contact-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    font-size: 13px;
}

.camo-contact-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--color-text-secondary, #6b7280);
    padding: 4px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.camo-contact-remove-btn:hover {
    color: var(--color-danger, #dc2626);
    background: color-mix(in srgb, var(--color-danger, #dc2626) 8%, transparent);
}

/* Saved CAMO cards */
.camo-card {
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
    background: var(--color-bg-subtle, #f9fafb);
    transition: box-shadow 0.15s;
}

.camo-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

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

.camo-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text, #1e293b);
}

.camo-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.camo-card-address {
    font-size: 13px;
    color: var(--color-text-secondary, #6b7280);
    margin-bottom: 8px;
    line-height: 1.4;
}

.camo-card-contacts {
    border-top: 1px solid var(--color-border-light, #f1f3f5);
    padding-top: 8px;
}

.camo-contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
    color: var(--color-text, #374151);
}

.camo-contact-name {
    font-weight: 600;
}

.camo-contact-detail {
    color: var(--color-text-secondary, #6b7280);
}

/* Dark palette support */
[data-palette="phpstorm_classic"] .camo-card,
[data-palette="phpstorm_teal"] .camo-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-palette="phpstorm_classic"] .camo-card-name,
[data-palette="phpstorm_teal"] .camo-card-name {
    color: var(--color-text);
}

[data-palette="phpstorm_classic"] .camo-card-address,
[data-palette="phpstorm_classic"] .camo-contact-detail,
[data-palette="phpstorm_teal"] .camo-card-address,
[data-palette="phpstorm_teal"] .camo-contact-detail {
    color: var(--color-text-secondary);
}

@media (max-width: 700px) {
    .camo-contact-form-row {
        flex-wrap: wrap;
    }
    .camo-contact-input {
        min-width: 100%;
    }
    .camo-form-input {
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════
   ORG TYPE RADIO CARDS
   ═══════════════════════════════════════════════ */
.orgtype-radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}

.orgtype-radio-card {
    display: block;
    cursor: pointer;
    margin: 0;
}

.orgtype-radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.orgtype-radio-card-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 14px;
    border: 2px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    background: var(--color-bg-subtle, #f9fafb);
    transition: all 0.18s ease;
}

.orgtype-radio-card input[type="radio"]:checked + .orgtype-radio-card-inner {
    border-color: var(--color-primary-bg, #0072ce);
    background: #eef6ff;
    box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.12);
}

.orgtype-radio-card:hover .orgtype-radio-card-inner {
    border-color: #93c5fd;
    background: #f0f7ff;
}

.orgtype-radio-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text, #1e293b);
}

.orgtype-radio-card-desc {
    font-size: 12px;
    color: var(--color-text-secondary, #6b7280);
    line-height: 1.4;
}

/* Dark palette support */
[data-palette="phpstorm_classic"] .orgtype-radio-card-inner,
[data-palette="phpstorm_teal"] .orgtype-radio-card-inner {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-palette="phpstorm_classic"] .orgtype-radio-card input[type="radio"]:checked + .orgtype-radio-card-inner,
[data-palette="phpstorm_teal"] .orgtype-radio-card input[type="radio"]:checked + .orgtype-radio-card-inner {
    border-color: var(--color-primary-bg);
    background: var(--color-hover);
    box-shadow: 0 0 0 3px rgba(130, 170, 255, 0.25);
}

[data-palette="phpstorm_classic"] .orgtype-radio-card:hover .orgtype-radio-card-inner,
[data-palette="phpstorm_teal"] .orgtype-radio-card:hover .orgtype-radio-card-inner {
    border-color: var(--color-primary-border);
    background: var(--color-hover);
}

[data-palette="phpstorm_classic"] .orgtype-radio-card-name,
[data-palette="phpstorm_teal"] .orgtype-radio-card-name {
    color: var(--color-text);
}

[data-palette="phpstorm_classic"] .orgtype-radio-card-desc,
[data-palette="phpstorm_teal"] .orgtype-radio-card-desc {
    color: var(--color-text-secondary);
}

@media (max-width: 700px) {
    .orgtype-radio-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 400px) {
    .orgtype-radio-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════
   SHARED FILE-PICK COMPONENT
   (mirrors training programme-file-pick pattern)
   ═══════════════════════════════════════════════ */
.file-pick-section {
    margin-top: 16px;
    padding: 16px 20px;
    border: 1px dashed var(--color-border, #e5e7eb);
    border-radius: var(--radius-sm, 8px);
    background: var(--color-bg-subtle, #f9fafb);
}

.file-pick-hint {
    font-size: 13px;
    color: var(--color-text-secondary, #6b7280);
    margin: 0 0 12px;
    line-height: 1.5;
}

.file-pick-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.file-pick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1.5px dashed var(--color-border, #e5e7eb);
    border-radius: var(--radius-sm, 8px);
    background: var(--color-surface, #fff);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    flex: 1;
    min-width: 0;
}

.file-pick:hover {
    border-color: var(--color-primary, #0072ce);
    background: color-mix(in srgb, var(--color-primary, #0072ce) 4%, transparent);
}

.file-pick--dragover {
    border-color: var(--color-primary, #0072ce);
    border-style: solid;
    background: color-mix(in srgb, var(--color-primary, #0072ce) 8%, transparent);
}

.file-pick--has-file {
    border-color: var(--color-success, #16a34a);
    border-style: solid;
    background: color-mix(in srgb, var(--color-success, #16a34a) 5%, transparent);
}

.file-pick-icon {
    font-size: 16px;
    line-height: 1;
    opacity: 0.5;
    flex-shrink: 0;
}

.file-pick--has-file .file-pick-icon {
    opacity: 0.8;
}

.file-pick-label {
    font-size: 13px;
    color: var(--color-text-secondary, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-pick--has-file .file-pick-label {
    color: var(--color-success, #16a34a);
    font-weight: 500;
}

.file-pick-input-hidden {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.file-pick--compact {
    padding: 5px 10px;
    font-size: 12px;
}

.file-pick--compact .file-pick-icon {
    font-size: 14px;
}

.file-pick--compact .file-pick-label {
    font-size: 12px;
}

/* Dark palette support */
[data-palette="phpstorm_classic"] .file-pick-section,
[data-palette="phpstorm_teal"] .file-pick-section {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-palette="phpstorm_classic"] .file-pick,
[data-palette="phpstorm_teal"] .file-pick {
    background: var(--color-bg);
    border-color: var(--color-border);
}

[data-palette="phpstorm_classic"] .file-pick:hover,
[data-palette="phpstorm_teal"] .file-pick:hover {
    border-color: var(--color-primary-border);
    background: var(--color-hover);
}

@media (max-width: 700px) {
    .file-pick-section {
        padding: 12px 14px;
    }
    .file-pick-row {
        flex-direction: column;
        align-items: stretch;
    }
    .file-pick-row .btn {
        align-self: flex-start;
    }
}

/* ═══════════════════════════════════════════════
   ORGANISATION DOCUMENTS TAB
   ═══════════════════════════════════════════════ */
.orgdoc-upload-form {
    margin-bottom: 24px;
}

.orgdoc-upload-form .form-field {
    margin-bottom: 16px;
}

.orgdoc-upload-form .file-pick {
    max-width: 280px;
}

.orgdoc-table .orgdoc-name-cell {
    min-width: 200px;
}

.orgdoc-actions {
    white-space: nowrap;
}

.orgdoc-actions .btn {
    margin-left: 4px;
}

.orgdoc-actions .btn:first-child {
    margin-left: 0;
}

@media (max-width: 700px) {
    .orgdoc-table {
        min-width: 600px;
    }
    .restrictive-tbl {
        min-width: 700px;
    }
}

/* ═══════════════════════════════════════════════
   DARK PALETTE OVERRIDES
   ═══════════════════════════════════════════════ */

/* Document status badges */
[data-palette="phpstorm_classic"] .doc-badge-valid,
[data-palette="phpstorm_teal"] .doc-badge-valid {
    color: #6ee7b7;
    background: rgba(6, 95, 70, 0.3);
}

[data-palette="phpstorm_classic"] .doc-badge-expiring,
[data-palette="phpstorm_teal"] .doc-badge-expiring {
    color: #fcd34d;
    background: rgba(133, 77, 14, 0.3);
}

[data-palette="phpstorm_classic"] .doc-badge-expired,
[data-palette="phpstorm_teal"] .doc-badge-expired {
    color: #fca5a5;
    background: rgba(153, 27, 27, 0.3);
}

/* Restrictive badges + rows */
[data-palette="phpstorm_classic"] .restrictive-badge-expired,
[data-palette="phpstorm_teal"] .restrictive-badge-expired {
    color: #fca5a5;
    background: rgba(153, 27, 27, 0.3);
}

[data-palette="phpstorm_classic"] .restrictive-row-expiring,
[data-palette="phpstorm_teal"] .restrictive-row-expiring {
    background-color: rgba(133, 77, 14, 0.15) !important;
}

[data-palette="phpstorm_classic"] .restrictive-row-expiring td,
[data-palette="phpstorm_teal"] .restrictive-row-expiring td {
    color: #fcd34d;
}

[data-palette="phpstorm_classic"] .restrictive-date-warning,
[data-palette="phpstorm_teal"] .restrictive-date-warning {
    color: #f87171;
}

/* Role yes badge */
[data-palette="phpstorm_classic"] .role-yes,
[data-palette="phpstorm_teal"] .role-yes {
    color: #6ee7b7;
    background: rgba(6, 95, 70, 0.3);
}

/* Delete button */
[data-palette="phpstorm_classic"] .doc-delete-btn,
[data-palette="phpstorm_teal"] .doc-delete-btn {
    color: #f87171 !important;
    background: rgba(153, 27, 27, 0.2) !important;
    border-color: rgba(153, 27, 27, 0.4) !important;
}

[data-palette="phpstorm_classic"] .doc-delete-btn:hover,
[data-palette="phpstorm_teal"] .doc-delete-btn:hover {
    background: rgba(153, 27, 27, 0.35) !important;
}

/* Membership feedback */
[data-palette="phpstorm_classic"] .membership-feedback--success,
[data-palette="phpstorm_teal"] .membership-feedback--success {
    color: #6ee7b7;
    background: rgba(6, 95, 70, 0.2);
    border-color: rgba(6, 95, 70, 0.4);
}

[data-palette="phpstorm_classic"] .membership-feedback--error,
[data-palette="phpstorm_teal"] .membership-feedback--error {
    color: #fca5a5;
    background: rgba(153, 27, 27, 0.2);
    border-color: rgba(153, 27, 27, 0.4);
}

/* Org card hover */
[data-palette="phpstorm_classic"] .org-card:hover,
[data-palette="phpstorm_teal"] .org-card:hover {
    background: var(--color-hover);
    border-color: var(--color-primary-border);
}

[data-palette="phpstorm_classic"] .org-card-icon,
[data-palette="phpstorm_teal"] .org-card-icon {
    background: var(--color-primary);
}

[data-palette="phpstorm_classic"] .org-card:hover .org-card-arrow,
[data-palette="phpstorm_teal"] .org-card:hover .org-card-arrow {
    color: var(--color-primary);
}

/* Form input borders */
[data-palette="phpstorm_classic"] .container input,
[data-palette="phpstorm_classic"] .container select,
[data-palette="phpstorm_teal"] .container input,
[data-palette="phpstorm_teal"] .container select {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
}

[data-palette="phpstorm_classic"] td input[type="date"],
[data-palette="phpstorm_classic"] td input[type="number"],
[data-palette="phpstorm_teal"] td input[type="date"],
[data-palette="phpstorm_teal"] td input[type="number"] {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
}

[data-palette="phpstorm_classic"] .form-group input,
[data-palette="phpstorm_teal"] .form-group input {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
}

/* --- User org-link status badges (users page) --- */
.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}
.status-badge--active {
    color: #065f46;
    background: #d1fae5;
}
.status-badge--invited {
    color: #854d0e;
    background: #fef9c3;
}
.status-badge--suspended {
    color: #991b1b;
    background: #fee2e2;
}