/* Scoped to settings; shared with both theme selections. */
.settings-page {
    --settings-surface: #151d28;
    --settings-field: #101720;
    --settings-line: #293340;
    --settings-muted: #a0afc0;
    --settings-text: #e9eff6;
    max-width: 1120px; margin: 0 auto; padding: 26px 8px 40px;
    color: var(--settings-text);
}
.settings-page-header { margin-bottom: 24px; }
.settings-eyebrow { display: block; color: #90a5bf; font-size: .69rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.settings-page h1 { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 650; letter-spacing: -.035em; margin: 0 0 8px; color: var(--settings-text); }
.settings-page-header p { color: var(--settings-muted); font-size: .9rem; margin: 0; }
.settings-nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; margin-bottom: 28px; width: fit-content; max-width: 100%; border: 1px solid var(--settings-line); border-radius: 12px; background: #101720; }
.settings-nav a { border-radius: 8px; padding: 9px 16px; color: var(--settings-muted); font-size: .84rem; text-decoration: none; transition: background .15s, color .15s; }
.settings-nav a:hover { color: #fff; background: #202b39; }
.settings-nav a.active { color: #eef5ff; background: #29394e; box-shadow: 0 1px 3px #0003; }
.settings-card { background: var(--settings-surface); border: 1px solid var(--settings-line); border-radius: 16px; padding: 24px; margin-bottom: 22px; }
.settings-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.settings-page h2 { color: var(--settings-text); font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; margin: 0 0 6px; }
.settings-page h3 { color: var(--settings-text); font-size: 1.05rem; margin: 0 0 20px; letter-spacing: -.015em; }
.settings-card-heading p, .settings-help { color: var(--settings-muted); font-size: .8rem; line-height: 1.6; margin: 0; }
.settings-page .text-muted, .settings-page .text-info { color: var(--settings-muted) !important; }
.settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; }
.settings-page .form-group { margin: 0 0 22px; min-width: 0; }
.settings-fields > .form-group { margin: 0; }
.settings-fields .setting-wide { grid-column: 1 / -1; }
.settings-page .form-group > br { display: none; }
.settings-page .form-group > label { display: block; color: #c9d5e3; font-size: .83rem; font-weight: 500; margin: 0 0 9px; }
.settings-page .form-group .small { margin: 4px 0 9px; font-size: .77rem; line-height: 1.5; }
.settings-page .form-control, .settings-page .form-select, .settings-page .form-control-sm, .settings-page input[type=date], .settings-page .filters-row input {
    background: var(--settings-field); color: var(--settings-text); border: 1px solid #334050; border-radius: 9px; min-height: 42px; padding: 10px 12px; font-size: .86rem; box-shadow: none;
}
.settings-page .form-control:focus, .settings-page .form-select:focus, .settings-page input:focus-visible { border-color: #82a9e8; outline: 2px solid #82a9e84d; outline-offset: 2px; box-shadow: none; }
.settings-page :is(button,a,input,select):focus-visible { outline: 2px solid #82a9e8; outline-offset: 3px; }
.settings-page select[size] { min-height: 124px; padding: 7px; }
.settings-page select[size] option { padding: 6px 9px; border-radius: 5px; }
.settings-page input[type=checkbox] { width: 17px; height: 17px; accent-color: #789fe2; cursor: pointer; flex-shrink: 0; vertical-align: middle; }
.settings-page input:disabled { cursor: default; opacity: .6; }
.settings-fields > .setting-toggle { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 16px; border: 1px solid var(--settings-line); border-radius: 10px; }
.settings-fields > .setting-toggle > label { margin: 0; }
.settings-fields > .setting-toggle > .small, .settings-fields > .setting-toggle > .validation-message { grid-column: 1; grid-row: 2; margin: 0; }
.settings-fields > .setting-toggle > input[type=checkbox] { grid-column: 2; grid-row: 1 / span 2; }
.settings-page .btn { font-size: .8rem; font-weight: 550; border-radius: 8px; padding: 9px 14px; box-shadow: none; transition: background .15s, border-color .15s; }
.settings-page .btn-primary { background: #4772b4; border-color: #4772b4; color: #fff; }
.settings-page .btn-primary:hover { background: #5482c8; border-color: #5482c8; }
.settings-page .btn-secondary { background: #222e3e; border-color: #344355; color: #d9e5f4; }
.settings-page .btn-danger { background: #e0656512; color: #ffb0b0; border-color: #e0656540; }
.settings-page .btn-danger:hover { background: #e0656530; border-color: #e0656580; }
.settings-page .btn:disabled { opacity: .4; }
.settings-page .input-group { flex-wrap: wrap; gap: 0; }
.settings-page .input-group .btn { border-radius: 0 9px 9px 0; }
.settings-page .input-group > .form-control { border-radius: 9px 0 0 9px; }
.settings-page .input-group-text { background: #222e3e; color: var(--settings-muted); border-color: #334050; font-size: .8rem; }
.settings-save-bar { position: sticky; bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: #1c2838; border: 1px solid #3a4b60; border-radius: 12px; box-shadow: 0 8px 24px #0004; z-index: 5; }
.settings-save-bar span { font-size: .8rem; color: #bfcee0; }
.settings-page .settings-save-bar #saveButton { position: static; right: auto; bottom: auto; }
.settings-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.settings-stat { padding: 19px; background: var(--settings-surface); border: 1px solid var(--settings-line); border-radius: 14px; }
.settings-stat-label { display: block; color: var(--settings-muted); font-size: .77rem; margin-bottom: 9px; }
.settings-stat-value { font-size: 1.7rem; font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.settings-stat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.settings-stat-actions .btn { padding: 5px 7px; }
.settings-stat-online { color: #61dba2; }
.settings-filters { display: flex; flex-wrap: wrap; gap: 18px; padding: 0 0 18px; color: var(--settings-muted); font-size: .8rem; }
.settings-filters label { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.settings-users { max-height: 440px; overflow-y: auto; }
.settings-user { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--settings-line); }
.settings-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; background: #26374c; color: #c2d8f5; font-size: .9rem; font-weight: 600; }
.settings-user-info { min-width: 0; flex: 1; }
.settings-user-name { display: block; font-size: .86rem; font-weight: 550; overflow-wrap: anywhere; }
.settings-last-seen { display: block; color: var(--settings-muted); font-size: .73rem; margin-top: 4px; }
.settings-user-role { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--settings-muted); font-size: .76rem; }
.settings-presence { display: inline-flex; align-items: center; gap: 7px; min-width: 96px; font-size: .76rem; color: var(--settings-muted); }
.settings-presence-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #758397; }
.settings-presence.is-active { color: #72e4ad; }
.settings-presence.is-active .settings-presence-dot { background: #39d98a; box-shadow: 0 0 0 3px #39d98a15; }
.settings-footnote { margin: 16px 0 0; color: var(--settings-muted); font-size: .74rem; }
.settings-empty { color: var(--settings-muted); padding: 22px 0; font-size: .85rem; }
.settings-page .settings-body > .row { margin: 0 0 22px; padding: 24px; border: 1px solid var(--settings-line); border-radius: 16px; background: var(--settings-surface); }
.settings-page .settings-body > .row > [class*=col-] { padding: 0; width: 100%; max-width: none; flex: 1 1 100%; min-width: 0; overflow-x: auto; }
.settings-page .settings-body > .row .form-group:last-child { margin-bottom: 0; }
.settings-page .table { --bs-table-bg: transparent; --bs-table-color: var(--settings-text); --bs-table-striped-bg: #ffffff03; --bs-table-striped-color: var(--settings-text); --bs-table-hover-bg: #ffffff06; --bs-table-hover-color: #fff; color: var(--settings-text); margin: 14px 0 0; border-color: var(--settings-line); font-size: .82rem; }
.settings-page .table th { padding: 14px 12px; font-size: .72rem; color: var(--settings-muted); font-weight: 500; white-space: nowrap; }
.settings-page .table td { padding: 14px 12px; vertical-align: middle; }
.settings-page .table .btn { padding: 6px 11px; }
.settings-page .table label { margin: 0; }
.settings-table-scroll { overflow-x: auto; }
.settings-page .settings-token-create { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.settings-page .settings-token-create label { font-size: .82rem; color: var(--settings-muted); }
.settings-page .branding-icon { max-width: 96px; max-height: 96px; object-fit: contain; border-radius: 14px; }
.settings-branding .settings-body > .row { max-width: 700px; }
.settings-account-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; }
.settings-account-grid .nav-link { font-size: .83rem; color: var(--settings-muted); padding: 10px 12px; border-radius: 8px; margin: 2px 0; }
.settings-account-grid .nav-link.active { background: #29394e; color: #fff; }
.settings-account-content { min-width: 0; }
.settings-account-content .row { margin: 0; }
.settings-account-content [class*=col-md-] { width: 100%; max-width: 620px; padding: 0; }
.settings-page .form-floating > .form-control { min-height: 58px; padding-top: 24px; padding-bottom: 8px; }
.settings-page .form-floating > label { color: var(--settings-muted); }
.settings-page .logs-content { border: 1px solid var(--settings-line); border-radius: 10px; padding: 16px; background: #101720 !important; font-family: ui-monospace, monospace; font-size: .78rem; width: 100%; }
.settings-page .filters-row { display: flex; gap: 16px; flex-wrap: wrap; }
.settings-page .filters-row strong { font-weight: 500; font-size: .8rem; color: var(--settings-muted); }
.settings-page .buttons-row { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) {
    .settings-page { padding: 18px 0 30px; }
    .settings-card, .settings-page .settings-body > .row { padding: 18px; }
    .settings-fields { grid-template-columns: 1fr; gap: 18px; }
    .settings-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-nav { width: 100%; }
    .settings-nav a { padding: 8px 11px; }
    .settings-user { flex-wrap: wrap; gap: 10px; }
    .settings-user-info { flex-basis: calc(100% - 52px); }
    .settings-presence { margin-left: 48px; }
    .settings-user-role { margin-left: auto; }
    .settings-account-grid { grid-template-columns: 1fr; }
    .settings-account-grid .nav { flex-direction: row !important; gap: 4px; }
    .settings-save-bar { bottom: 8px; }
    .settings-save-bar span { max-width: 55%; }
}
@media (prefers-reduced-motion: reduce) { .settings-page * { transition: none !important; } }