.settings-list {
    display: flex;
    flex-direction: column;
    margin-left: 1rem;
    margin-top: 0;
}

/* .settings-list>a {
    margin-top: 0;
    text-decoration: none;
} */

.settings-list>a:hover {
    font-weight: 400;
    text-decoration: underline;
    padding:0 0 0 1px;
    /* increases distance */
    text-underline-offset: 0.4em;
    /* thickness of the underline */
    text-decoration-thickness: 1px;
    /* helps avoid descenders */
    text-decoration-skip-ink: auto;
}

.settings-header-item {
    color: var(--color-text-dim);
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 2rem;
    user-select: none;
}

.settings-link-item {
    font-size: 0.8rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 11px 0 0px 10px;
    text-decoration: none;
    user-select: none;
    color: var(--color-link);
}

/* .settings-link-item:first-of-type {
    font-size: 0.9rem;
    margin: 20px 0 0px 10px;
    text-decoration: none;
} */

.settings-title-link-item {
    margin-left: 0;
    text-decoration: none;
    color: var(--color-link);
}

.settings-title-link-item:hover {
    margin-left: 1px;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 600;
}

.settings-link-item-disabled {
    font-size: 0.9rem;
    margin: 15px 0 0px 10px;
    color: gray;
}

.settings-link-item-disabled:hover::after {
    /* position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030; */
    padding: 5px 0 0 16px;
    content: "The Event Log feature is not yet enabled";
    color: indianred;
    font-weight: 600;
}



.settings-title-item-2 {
    /* display: inline-block;  */
    margin: 0 0 0 10px;
    /* background-color: aqua;   */
    color: var(--color-titles);
}

/* pins/unpins the page in the left menu - sits just after the page title */
.settings-title-pin {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    vertical-align: middle;
    cursor: pointer;
    opacity: 0.75;
}

.settings-title-pin:hover {
    opacity: 1;
}

.settings-title-pin:hover svg {
    fill: var(--color-svg-hover);
}

.settings-div-1 {
    margin: 15px 0 25px 0;
}

/* Appearance / Preferences pages: labels auto-size the first column, controls
   line up in the second. Margin resets below are scoped to these grids so the
   shared .settings-* classes still behave as before on other settings pages. */
.settings-appearance-grid,
.settings-preferences-grid {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 2rem;
    row-gap: 22px;
    margin: 25px 0 0 1rem;
}

.settings-appearance-grid .settings-cboLabel,
.settings-preferences-grid .settings-cboLabel {
    margin: 0;
}

.settings-appearance-grid .settings-cbo-themes,
.settings-preferences-grid .settings-cbo-themes {
    margin: 0;
}

/* read-only value shown in the control column - bordered so it reads as a
   setting alongside the real controls next to it */
.settings-value-box {
    border: 1px solid var(--color-borders-1);
    border-radius: 3px;
    background-color: var(--color-background);
    color: var(--color-text-1);
    padding: 0.2rem 0.4rem;
}

.settings-cboLabel {
    margin-left: 1rem;
    margin-top: 1rem;
}

.settings-cbo-themes {
    margin-left: 1rem;
    margin-top: 1rem;
    /* font-size: 1.1rem; */
    padding: 0.2rem;
}

.account-logged-in-as {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-text-dim);
    margin: 0px 0 0px 10px;
    /* text-decoration: underline;
    text-underline-offset: 4px; */
}

.account-other-details {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-text-dim);
    margin: 0px 0 0px 10px;
}



.settings-link-item-2 {
    font-size: 0.9rem;
    margin: 8px 0 0px 10px;
    text-decoration: none;
    user-select: none;
    color: var(--color-link);
    cursor: pointer;
}

.settings-link-item-2:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--color-link-highlighted);
}


/* ── Account page ─────────────────────────────────────────────────────────── */

.account-page-container {
    max-width: 520px;
    padding: 8px 24px 32px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Info card */
.account-info-card {
    background: var(--color-card-background);
    border: 1px solid var(--color-borders-2);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 6px;
}

.account-info-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 5px 18px;
    border-bottom: 1px solid var(--color-borders-2);
}

.account-info-row:last-child {
    border-bottom: none;
}

.account-info-label {
    min-width: 100px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-dim);
    flex-shrink: 0;
}

.account-info-value {
    font-size: 0.86rem;
    font-weight: 400;
    color: var(--color-text-1);
}

.account-info-value--ok {
    color: #27ae60;
    font-weight: 500;
}

.account-info-value--warn {
    color: var(--color-message-warning);
    font-weight: 500;
}

/* Section groups */
.account-section {
    border: 1px solid var(--color-borders-2);
    border-radius: 8px;
    overflow: hidden;
}

.account-section-header {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-dim);
    background: var(--color-card-background);
    padding: 9px 18px;
    border-bottom: 1px solid var(--color-borders-2);
}

.account-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px 10px 130px;
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--color-link);
    text-decoration: none;
    border-bottom: 1px solid var(--color-borders-1);
    transition: background 0.15s;
}

.account-nav-item:last-child {
    border-bottom: none;
}

.account-nav-item:hover {
    background: var(--color-cards-focus);
    color: var(--color-link-highlighted);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.account-nav-item::after {
    content: '›';
    font-size: 1.1rem;
    color: var(--color-text-dim);
    transition: color 0.15s;
}

.account-nav-item:hover::after {
    color: var(--color-link-highlighted);
}


/* ── Simple form card ─────────────────────────────────────────────────────── */
/* shared by settings > change password and by the admin area authentication page.
   same card language as the account page above - all colors come from the theme
   vars so the forms follow the selected theme like every other page */

.app-form-card {
    max-width: 520px;
    margin: 25px 0 0 1rem;
    border: 1px solid var(--color-borders-2);
    border-radius: 8px;
    overflow: hidden;
}

.app-form-card-header {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-dim);
    background: var(--color-card-background);
    padding: 9px 18px;
    border-bottom: 1px solid var(--color-borders-2);
}

.app-form-body {
    padding: 16px 18px 18px 18px;
}

.app-form-intro {
    font-size: 0.86rem;
    color: var(--color-text-dim);
    margin: 0 0 18px 0;
}

.app-form-grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    column-gap: 1.5rem;
    row-gap: 14px;
}

.app-form-label {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-dim);
}

.app-form-input-wrap {
    position: relative;
}

.app-form-input {
    width: 100%;
    padding: 7px 32px 7px 9px;
    font-family: inherit;
    font-size: 0.86rem;
    color: var(--color-text-1);
    background-color: var(--color-table-row);
    border: 1px solid var(--color-borders-1);
    border-radius: 4px;
    outline: none;
}

.app-form-input:focus {
    border-color: var(--color-link);
}

.app-form-pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    padding: 2px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-svg-icons);
    opacity: 0.7;
}

.app-form-pw-toggle:hover {
    opacity: 1;
    color: var(--color-svg-hover);
}

.app-form-hint {
    grid-column: 2;
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--color-text-dim);
}

.app-form-actions {
    grid-column: 2;
    display: flex;
    gap: 14px;
}

.app-form-actions .button-blue,
.app-form-actions .button-pink {
    margin: 0;
    padding: 8px 22px;
}

/* the messaging utilities add .messaging-warning / .messaging-info here, which bring
   their own colors and font size - this only places the box in the grid */
.app-form-warning {
    grid-column: 1 / -1;
}

.app-form-warning:empty {
    display: none;
}

/* same as .app-form-warning, but it must stay visible while empty: the messaging utilities
   only write into divWarning_special_3 when it is on screen, and the forced change dialog
   relies on that to take the warnings instead of the page behind it */
.app-form-warning-dialog {
    grid-column: 1 / -1;
    min-height: 1px;
}

/* the forced change password dialog reuses the form styles above inside .dialog-main-area */
.app-form-dialog {
    min-width: 390px;
    max-width: 470px;
}

/* status line - the admin area uses it to say where the security code was sent.
   sits in the second column so it lines up with the input boxes.
   it has its own color var rather than --color-message-info: that one is tuned for the
   message bar, which on the blue themes sits on a dark strip, so it is too pale to read
   here on the light form card */
.app-form-status {
    grid-column: 2;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--color-form-status, var(--color-message-info));
}

.app-form-status:empty {
    display: none;
}

/* checkbox row - the tick is drawn in the link color rather than filling the box,
   so it stays visible in every theme */
.app-form-check-label {
    grid-column: 2;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 0.82rem;
    color: var(--color-text-1);
}

.app-form-check-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.app-form-check-box {
    width: 15px;
    height: 15px;
    min-width: 15px;
    border: 1px solid var(--color-borders-1);
    border-radius: 3px;
    background-color: var(--color-table-row);
    display: grid;
    place-items: center;
}

.app-form-check-box svg {
    width: 11px;
    height: 11px;
    color: var(--color-link);
    opacity: 0;
    transition: opacity 0.15s;
}

.app-form-check-label input:checked~.app-form-check-box {
    border-color: var(--color-link);
}

.app-form-check-label input:checked~.app-form-check-box svg {
    opacity: 1;
}

.app-form-check-label input:focus-visible~.app-form-check-box {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
}

/* secondary links under the button */
.app-form-links {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.app-form-links>a {
    margin: 0;
}