/* [CG] Semantic colours shared by application controls and page components. */
:root {
    --app-page: #fff;
    --app-surface: #fff;
    --app-surface-secondary: #f8f8f8;
    --app-surface-elevated: #fff;
    --app-text: #111827;
    --app-text-secondary: #4b5563;
    --app-text-muted: #667085;
    --app-border: #d1d5db;
    --app-divider: #e5e7eb;
    --app-action: #0065ab;
    --app-on-action: #fff;
    --app-selection: #e5f1fa;
    --app-focus: #0065ab;
    --app-success: #287c36;
    --app-success-surface: #e8f5e9;
    --app-error: #b62f38;
    --app-error-surface: #fff0f0;
    --app-shadow: 0 8px 28px rgb(0 0 0 / 18%);
}
html[data-theme="dark"] {
    --app-page: #121417;
    --app-surface: #1b1f24;
    --app-surface-secondary: #22272e;
    --app-surface-elevated: #272e36;
    --app-text: #dce2e9;
    --app-text-secondary: #c2c8d0;
    --app-text-muted: #a3acb7;
    --app-border: #718092;
    --app-divider: #343d47;
    --app-action: #70c8ef;
    --app-on-action: #081018;
    --app-selection: #233f55;
    --app-focus: #80c5ff;
    --app-success: #9be3a2;
    --app-success-surface: #173227;
    --app-error: #ff9b9b;
    --app-error-surface: #3a1b1b;
    --app-shadow: 0 8px 28px rgb(0 0 0 / 45%);
    color-scheme: dark;
    background: var(--app-page);
}
.syngli-appearance-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    margin: 0;
    min-width: 205px;
    font-size: 14px;
    font-weight: normal;
    line-height: 24px;
    text-transform: none;
    color: var(--app-text);
    background: var(--app-surface);
}
.syngli-appearance-control select {
    width: auto;
    min-width: 88px;
    min-height: 34px;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    padding: 3px 6px;
    color: var(--app-text);
    background: var(--app-surface);
    font: inherit;
}
.syngli-appearance-control select:focus-visible {
    outline: 2px solid var(--app-focus);
    outline-offset: 2px;
}
.syngli-appearance-nav .syngli-appearance-control { min-width: 0; }
/* [CG] Large labelled radio targets fit both Settings layouts. */
.syngli-appearance-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.syngli-appearance-options legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.syngli-appearance-option {
    display: flex;
    flex: 1 1 100px;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 16px;
    margin: 0;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: var(--app-surface);
    color: var(--app-text);
    font-weight: normal;
    cursor: pointer;
}
.syngli-appearance-option input {
    margin: 0;
    accent-color: var(--app-action);
}
.syngli-appearance-option:has(input:checked) {
    background: var(--app-selection);
    border-color: var(--app-action);
}
.syngli-appearance-option:focus-within {
    outline: 2px solid var(--app-focus);
    outline-offset: 2px;
}
/* [CG] Keep the preference inside the viewport on narrow navigation layouts. */
#nav_settings > .sg-dropdown-list {
    right: 0;
    max-width: calc(100vw - 20px);
}

/* [CG] Legacy compatibility stays in app-owned CSS, outside vendor sources. */
html[data-theme="dark"] body {
    background-color: var(--app-page);
    color: var(--app-text);
}
html[data-theme="dark"] a { color: var(--app-action); }
html[data-theme="dark"] :is(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--app-focus);
    outline-offset: 2px;
}
html[data-theme="dark"] :is(#top-nav, .navbar-default, footer,
    .syngli-footer, .sg-dropdown-list, .dropdown-menu,
    .ui-widget-content, .ui-widget-header, .ui-menu, .ui-selectmenu-button,
    .select2-drop, .select2-container .select2-choice,
    .mm-menu, .mm-panel, .mm-navbar) {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}
html[data-theme="dark"] :is(.navbar-default .navbar-nav > li > a,
    .sg-dropdown-list a, .dropdown-menu > li > a,
    .ui-widget-content a, .mm-menu a, .mm-navbar a) {
    color: var(--app-text-secondary);
}
html[data-theme="dark"] :is(.sg-dropdown-list a:hover,
    .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus,
    .ui-state-hover, .ui-state-focus, .ui-state-active,
    .select2-results .select2-highlighted) {
    color: var(--app-text);
    background: var(--app-selection);
    border-color: var(--app-focus);
}
html[data-theme="dark"] :is(input[type="text"], input[type="email"],
    input[type="password"], input[type="number"], input[type="search"],
    input[type="url"], input[type="tel"], input:not([type]),
    textarea, select, .form-control) {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--app-text-muted); }
html[data-theme="dark"] :is(input, textarea, select):focus-visible {
    outline: 2px solid var(--app-focus);
    outline-offset: 2px;
}
html[data-theme="dark"] :is(.btn-default, .syngli-modal-btn,
    .syngli-modal-btn--secondary, .syngli-confirm-cancel) {
    background: var(--app-surface-secondary);
    color: var(--app-text);
    border-color: var(--app-border);
    text-shadow: none;
}
html[data-theme="dark"] :is(.btn-primary, .syngli-modal-btn--primary) {
    background: var(--app-action);
    color: var(--app-on-action);
    border-color: var(--app-action);
    text-shadow: none;
}
html[data-theme="dark"] :is(.btn:disabled, .btn.disabled,
    input:disabled, select:disabled, textarea:disabled) {
    opacity: .65;
}
html[data-theme="dark"] :is(.well, .panel, .panel-body,
    .panel-default > .panel-heading, .list-group-item,
    .modal-content, .vex .vex-content, .vex-dialog-form,
    .syngli-modal-dialog, .syngli-modal-header, .syngli-modal-body,
    .syngli-modal-footer, .syngli-panel_dialog, .syngli-panel_header,
    .syngli-panel_body, .syngli-panel_footer) {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}
html[data-theme="dark"] .syngli-confirm_dialog {
    background: var(--app-surface-elevated);
    border-color: var(--app-border);
}
html[data-theme="dark"] :is(.syngli-confirm_title, .syngli-confirm_message) {
    color: var(--app-text);
}
html[data-theme="dark"] .syngli-confirm_btn {
    background: var(--app-surface-secondary);
    border-color: var(--app-border);
    color: var(--app-text);
}
html[data-theme="dark"] :is(.modal-header, .modal-footer,
    .table > thead > tr > th, .table > tbody > tr > td,
    .table > tbody > tr > th, .table-bordered,
    .table-bordered > thead > tr > th,
    .table-bordered > tbody > tr > td) { border-color: var(--app-divider); }
html[data-theme="dark"] .table-striped > tbody > tr:nth-child(odd) > td,
html[data-theme="dark"] .table-striped > tbody > tr:nth-child(odd) > th {
    background: var(--app-surface-secondary);
}
html[data-theme="dark"] .table-hover > tbody > tr:hover > td {
    background: var(--app-selection);
}
html[data-theme="dark"] :is(.alert-danger, .error-panel) {
    background: var(--app-error-surface);
    color: var(--app-error);
    border-color: var(--app-error);
}
html[data-theme="dark"] .alert-success {
    background: var(--app-success-surface);
    color: var(--app-success);
    border-color: var(--app-success);
}
html[data-theme="dark"] :is(.text-muted, .help-block, .control-label) {
    color: var(--app-text-muted);
}
html[data-theme="dark"] .close { color: var(--app-text); text-shadow: none; }
html[data-theme="dark"] .progress { background: var(--app-surface-secondary); }
html[data-theme="dark"] .tooltip-inner {
    background: var(--app-surface-elevated);
    color: var(--app-text);
    box-shadow: var(--app-shadow);
}
html[data-theme="dark"] :is(.syngli-modal-title, .syngli-panel_title,
    .syngli-panel_field_label, .syngli-panel_static_value) {
    color: var(--app-text);
}
html[data-theme="dark"] :is(.syngli-panel_field_hint, .syngli-modal-close) {
    color: var(--app-text-secondary);
}