/* ==========================================================================
   Settings page styles
   --------------------------------------------------------------------------
   Scoped to the Settings page only. Sizes are in px on purpose: dark-theme.css
   shrinks the root font to 85% and then sizes .form-text at 0.8rem on top of
   that, which left help text at ~9px. Pixel sizes here are immune to that
   compact scale. If this reads well, the same fix can be applied portal-wide.
   ========================================================================== */

/* Colors follow the portal appearance (hig-theme.css tokens, light + dark).
   The second value is the old dark color, used only if hig-theme.css is missing. */
#settingsForm {
    --si-text: var(--hig-label, #f2f4f5);
    --si-desc: var(--hig-label2, #b9c1c8);
    --si-muted: var(--hig-label2, #8f99a2);
    --si-line: var(--hig-separator, #33373b);
    --si-line-soft: var(--hig-separator, #2e3235);
    --si-surface: var(--hig-bg2, #25282b);
    --si-accent: var(--hig-tint, var(--si-yellow, #e1b84f));
    --si-accent-text: var(--hig-tint-text, #f3d98f);
    --si-accent-soft: var(--hig-tint-soft, rgba(225, 184, 79, 0.16));
    --si-fill: var(--hig-fill, #4a4f55);
    --si-fill3: var(--hig-fill3, rgba(255, 255, 255, 0.05));
}

/* --------------------------------------------------------------------------
   Readability for the tabs that still use the older card markup
   -------------------------------------------------------------------------- */
#settingsForm .form-text {
    font-size: 13px !important;
    line-height: 1.5 !important;
}
#settingsForm .form-text.text-light,
#settingsForm .form-text.opacity-75 {
    color: var(--si-desc) !important;
    opacity: 1 !important;
}
#settingsForm .form-check-label { font-size: 14.5px; }
#settingsForm .form-label { font-size: 14px; }
#settingsTabContent p.small { font-size: 13px; line-height: 1.5; }
#settingsTabContent .settings-group-title { font-size: 15px; }

/* --------------------------------------------------------------------------
   Sidebar: grouped
   -------------------------------------------------------------------------- */
#settingsTabs .settings-nav-group {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--si-muted);
    padding: 16px 10px 5px;
    background: transparent;
    border: 0;
}
#settingsTabs .settings-nav-group:first-child { padding-top: 4px; }
#settingsTabs .list-group-item { font-size: 14px; }
#settingsTabs .settings-nav-group + .list-group-item {
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}
#settingsTabs .list-group-item:has(+ .settings-nav-group) {
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}
#settingsTabs .settings-tab-expansion:not(.active) { color: var(--hig-green-text, #57cc99); }


/* Anything a ?section= link can land on clears the portal's fixed top bar. */
#settingsTabContent [data-settings-section] { scroll-margin-top: calc(var(--settings-nav-top, 16px) + 8px); }

/* --------------------------------------------------------------------------
   Section + row kit (settingSection / settingRow and friends in settings.js)
   -------------------------------------------------------------------------- */
.si-tab-intro {
    font-size: 15px;
    color: var(--si-desc);
    line-height: 1.55;
    max-width: 72ch;
    margin: 2px 0 20px;
}

.si-section {
    background: var(--si-surface);
    border: 0;
    border-radius: 10px;
    box-shadow: var(--hig-card-shadow, none);
    margin-bottom: 24px;
}
.si-section-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px 14px;
    border-bottom: 0.5px solid var(--si-line);
}
.si-section-icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--si-accent-soft);
    border: 0;
    color: var(--si-accent);
    font-size: 15px;
}
.si-section-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--si-text);
    margin: 0;
    line-height: 1.3;
}
.si-section-intro {
    font-size: 14px;
    color: var(--si-desc);
    margin: 3px 0 0;
    line-height: 1.45;
    max-width: 70ch;
}
.si-section-note { padding: 16px 20px 4px; display: flex; flex-direction: column; gap: 12px; }
.si-section-note .si-callout { margin-bottom: 0; }

/* Switch on the left, next to its title, so the state reads down one edge at any
   width. Rows with a choice or slider underneath (--stack) are indented to the same
   text line. Rows whose control is a status pill (--trailing) keep it on the right. */
.si-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 4px 16px;
    padding: 16px 20px;
    align-items: start;
}
.si-row + .si-row { border-top: 0.5px solid var(--si-line-soft); }
.si-row > .si-control { order: -1; }
.si-row--stack { grid-template-columns: minmax(0, 1fr); padding-left: 80px; }
.si-row--trailing { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 28px; }
.si-row--trailing > .si-control { order: 0; justify-content: flex-end; }
.si-row.is-locked { opacity: 0.55; }

.si-row-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--si-text);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0;
    line-height: 1.35;
}
label.si-row-title { cursor: pointer; }
.si-row-status { font-size: 13px; font-weight: 500; }
.si-row-status .save-indicator { margin-left: 0 !important; }
.si-row-desc {
    font-size: 14px;
    color: var(--si-desc);
    line-height: 1.5;
    margin-top: 4px;
    max-width: 68ch;
}
.si-row-desc strong { color: var(--si-text); font-weight: 600; }

.si-more { margin-top: 8px; font-size: 13.5px; color: var(--si-desc); max-width: 68ch; }
.si-more summary {
    cursor: pointer;
    color: var(--si-accent);
    font-weight: 500;
    list-style: none;
    width: fit-content;
}
.si-more summary::-webkit-details-marker { display: none; }
.si-more summary::before { content: "+ "; }
.si-more[open] summary::before { content: "\2212 "; }
.si-more summary:focus-visible { outline: 2px solid var(--si-accent); outline-offset: 2px; border-radius: 3px; }
.si-more p { margin: 6px 0 0; line-height: 1.5; }
.si-more a { color: var(--si-accent); }

.si-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.5;
}
.si-tag--real { background: color-mix(in srgb, var(--hig-green, #72c998) 16%, transparent); color: var(--hig-green-text, #8fd6ad); }
.si-tag--region { background: color-mix(in srgb, var(--hig-blue, #8eb8d4) 14%, transparent); color: var(--hig-blue-text, #a9cbe2); }
.si-tag--caution { background: color-mix(in srgb, var(--hig-orange, #e1b84f) 16%, transparent); color: var(--hig-orange-text, #e8c56d); }
.si-tag--new { background: var(--si-accent-soft); color: var(--si-accent-text); }

.si-control {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Switch */
.si-switch.form-check.form-switch {
    font-size: 16px;
    padding-left: 0;
    margin: 0;
    min-height: 0;
    display: flex;
}
.si-switch .form-check-input {
    width: 2.75em;
    height: 1.5em;
    margin: 0;
    float: none;
    cursor: pointer;
    background-color: var(--si-fill);
    border-color: transparent;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.4' fill='%23fff'/%3e%3c/svg%3e");
}
.si-switch .form-check-input:checked {
    background-color: var(--si-accent);
    border-color: transparent;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.4' fill='%23fff'/%3e%3c/svg%3e");
}
.si-switch .form-check-input:focus { box-shadow: 0 0 0 0.2rem var(--hig-focus, rgba(225, 184, 79, 0.3)); border-color: transparent; }
.si-switch .form-check-input:disabled { cursor: not-allowed; opacity: 0.5; }

/* Segmented choice (radios underneath, so values save exactly as before) */
/* Apple segmented control: a gray track with the selected segment raised. */
.si-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    background: var(--si-fill3);
    border-radius: 9px;
    margin-top: 10px;
}
.si-seg-btn {
    font-size: 14px;
    font-weight: 500;
    padding: 5px 14px;
    color: var(--si-text);
    border-radius: 7px;
    cursor: pointer;
    margin: 0;
    user-select: none;
    transition: background-color 0.12s ease;
}
.si-seg-btn:hover { background: var(--hig-fill4, rgba(255, 255, 255, 0.04)); }
.si-seg .btn-check:checked + .si-seg-btn {
    background: var(--hig-seg-selected, rgba(225, 184, 79, 0.16));
    color: var(--si-text);
    font-weight: 600;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
}
.si-seg .btn-check:focus-visible + .si-seg-btn { outline: 2px solid var(--si-accent); outline-offset: -2px; }
.si-seg .btn-check:disabled + .si-seg-btn { opacity: 0.5; cursor: not-allowed; }

/* Slider */
.si-slider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    max-width: 480px;
}
.si-slider .form-range { flex: 1; min-width: 120px; }
.si-slider-end { font-size: 13px; color: var(--si-muted); font-variant-numeric: tabular-nums; }
.si-slider-value {
    font-size: 13px;
    font-weight: 600;
    background: var(--si-fill3);
    color: var(--si-text);
    padding: 3px 10px;
    border-radius: 999px;
    min-width: 4.5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Status + link rows (AI Expansion Pack tab) */
.si-status {
    font-size: 12.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.si-status--on { background: color-mix(in srgb, var(--hig-green, #72c998) 16%, transparent); color: var(--hig-green-text, #8fd6ad); }
.si-status--off { background: var(--si-fill3); color: var(--si-muted); }
.si-link-btn {
    font-size: 13.5px;
    color: var(--si-accent);
    background: none;
    border: 0;
    padding: 0;
    margin-top: 8px;
    cursor: pointer;
    text-align: left;
}
.si-link-btn:hover { text-decoration: underline; }
.si-link-btn:focus-visible { outline: 2px solid var(--si-accent); outline-offset: 2px; border-radius: 3px; }

@media (max-width: 575.98px) {
    .si-row { padding: 14px 16px; gap: 4px 12px; }
    .si-row--stack { padding-left: 72px; }
    .si-row--trailing { grid-template-columns: minmax(0, 1fr); }
    .si-row--trailing > .si-control { justify-content: flex-start; }
    .si-section-head { padding: 14px 16px 12px; }
}

.si-section-foot {
    padding: 12px 20px 14px;
    border-top: 0.5px solid var(--si-line-soft);
    font-size: 13.5px;
    color: var(--si-desc);
    line-height: 1.5;
}
.si-section-foot a { color: var(--si-accent); }
.si-section-note .alert { margin-bottom: 0; }

/* Callout for a top support question, at the top of a tab. Deliberately louder than
   anything else on the page. */
.si-callout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    margin-bottom: 24px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--si-accent) 9%, var(--si-surface));
    border: 0;
    box-shadow: var(--hig-card-shadow, none);
}
.si-callout-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--si-accent);
    color: #fff;
    font-size: 20px;
}
.si-callout-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--si-text);
    margin: 0 0 6px;
    line-height: 1.3;
}
.si-callout p {
    font-size: 15px;
    color: var(--si-desc);
    line-height: 1.55;
    margin: 0 0 14px;
    max-width: 75ch;
}
.si-callout-btn {
    display: inline-flex;
    align-items: center;
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    background: var(--si-accent);
    border: 0;
    padding: 7px 16px;
    border-radius: 8px;
    text-decoration: none;
}
.si-callout-btn:hover { background: var(--hig-tint-hover, #357fb0); color: #fff; }
.si-callout-btn:focus-visible { outline: 2px solid var(--si-accent); outline-offset: 2px; }
@media (max-width: 575.98px) {
    .si-callout { flex-direction: column; gap: 12px; padding: 16px; }
}

/* --------------------------------------------------------------------------
   Aircraft Callsign: the two _CALLSIGN_TYPE cards. Both stay editable; the
   one in use is outlined and badged instead of fading the other.
   -------------------------------------------------------------------------- */
#settingsForm .callsign-type-card { transition: box-shadow 0.15s ease; }
#settingsForm .callsign-type-card.is-selected { box-shadow: 0 0 0 2px var(--si-accent) !important; }
/* Text comes from CSS so settings search doesn't read "In Use" into the section name. */
#settingsForm .callsign-type-pill {
    display: none;
    vertical-align: middle;
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--si-accent-text);
    background: var(--si-accent-soft);
}
#settingsForm .callsign-type-card.is-selected .callsign-type-pill { display: inline-block; }
#settingsForm .callsign-type-pill::after { content: 'In Use'; }