/* ==========================================================================
   Eslövs Skyttegille – application styles
   ========================================================================== */

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    line-height: 1.2;
    margin: 0 0 0.4em;
    color: var(--color-text);
}

p {
    margin: 0 0 0.75em;
    color: var(--color-text-muted);
}

a {
    color: var(--color-primary-600);
}

/* ---------- App shell / layout ---------------------------------------- */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-main {
    flex: 1;
    min-width: 0;
}

.app-content {
    max-width: 1080px;
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
}

/* ---------- Side navigation --------------------------------------------- */

.nav-sidebar {
    width: var(--nav-width);
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--color-primary-900), var(--color-primary-800));
    color: var(--color-text-on-primary);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.1rem;
    position: sticky;
    top: 0;
    /* 100vh is taller than the visible area on phones (the browser's toolbars
       are counted in it), which pushed "Logga ut" out of sight; dvh is the
       visible height. The menu scrolls if it is still too tall. */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.5rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 1.25rem;
}

.nav-brand-mark {
    font-size: 1.6rem;
}

.nav-brand-text {
    font-weight: 700;
    font-size: 1.02rem;
    color: #ffffff;
}

.nav-brand-subtext {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.nav-links a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-links a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.nav-links a.active {
    background: var(--color-accent-600);
    color: #241a02;
    font-weight: 700;
}

.nav-icon {
    font-size: 1.05rem;
}

.nav-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.nav-user:hover {
    background: rgba(255, 255, 255, 0.08);
}

.nav-user.active {
    background: rgba(255, 255, 255, 0.16);
}

.nav-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-accent-500);
    color: #241a02;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.nav-user-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-logout-btn,
.nav-login-btn {
    width: 100%;
    display: block;
    text-align: center;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.nav-logout-btn:hover,
.nav-login-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.nav-toggle-checkbox,
.nav-toggle-label {
    display: none;
}

/* ---------- Page header ---------------------------------------------------- */

.page-header {
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 1.8rem;
}

.page-subtitle {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* ---------- Dashboard cards ------------------------------------------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.dashboard-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

a.dashboard-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.dashboard-card-icon {
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
}

.dashboard-card h2 {
    font-size: 1.05rem;
}

.dashboard-card p {
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}

.card-link {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--color-primary-600);
}

.card-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

.card-badge-pending {
    background: var(--color-accent-100);
    color: var(--color-accent-600);
}

/* ---------- Sections (pills) --------------------------------------- */

.section-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.section-pill {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
}

.section-pill-small {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    margin: 0.15rem 0.3rem 0.15rem 0;
    display: inline-block;
}

/* ---------- Profile card --------------------------------------------- */

.profile-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-primary-600);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
}

.profile-avatar-image {
    object-fit: cover;
}

/* Compact avatar used in lists (e.g. the member table). */
.profile-avatar-small {
    width: 40px;
    height: 40px;
    font-size: 0.85rem;
}

/* Generic silhouette shown when a member has no profile picture. */
.profile-avatar-placeholder {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.profile-avatar-placeholder svg {
    width: 68%;
    height: 68%;
}

.back-link {
    color: var(--color-text-muted);
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

/* Lets the form use the card's full width; the container queries below
   size the form rows by that width rather than by the window. */
.profile-details {
    flex: 1;
    min-width: 0;
    container-type: inline-size;
}

.form-section {
    margin-bottom: 1.5rem;
}

.form-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 0 0 0.9rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1rem;
}

.form-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.75rem;
}

.form-checks .auth-checkbox {
    margin: 0;
}

/* One section as a small card: its checkbox and its "passive member"
   checkbox always on the same row. */
.section-choice {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    width: 15rem;
    max-width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
}

.section-choice .auth-checkbox {
    white-space: nowrap;
}

.section-passive {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Greyed out while the section itself is not ticked. */
.section-passive:has(input:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}

.form-actions {
    display: flex;
    justify-content: center;
}

.form-actions .auth-submit {
    width: auto;
    min-width: 160px;
    padding: 0.75rem 2.5rem;
}

.auth-field input[readonly] {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    cursor: default;
}

@container (min-width: 380px) {
    .form-row-personal { grid-template-columns: repeat(2, 1fr); }
    .form-row-contact { grid-template-columns: repeat(2, 1fr); }
}

@container (min-width: 560px) {
    .form-row-address { grid-template-columns: 2fr 1fr 1.4fr; }
}

@container (min-width: 700px) {
    .form-row-personal { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 480px) {
    .form-actions .auth-submit { width: 100%; }
}

.profile-details h2 {
    font-size: 1.3rem;
    margin-bottom: 0.15rem;
}

.profile-email {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    margin-bottom: 0.9rem;
}

.profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.profile-fields {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.35rem 1rem;
    margin: 0 0 1.25rem;
}

/* Long values (e-mail addresses) get their own row when the card is narrow,
   and may wrap mid-word if even that is not enough. */
@container (max-width: 480px) {
    .profile-fields {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    /* Extra specificity: the plain dd/dt rules further down reset margins. */
    .profile-details .profile-fields dd {
        margin-bottom: 1.25rem;
    }

    .profile-details .profile-fields dt {
        margin-bottom: 0.15rem;
    }
}

.profile-fields dt {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.profile-fields dd {
    margin: 0;
    font-weight: 600;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

/* ---------- Table (member list) -------------------------------------- */

.filter-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* Label + control stay together: only whole fields wrap onto a new line. */
.filter-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.filter-bar label {
    font-size: 0.83rem;
    font-weight: 600;
}

.filter-bar select {
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.92rem;
}

.filter-bar select:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

.filter-search {
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.92rem;
    min-width: 220px;
}

.filter-search:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

/* A group of checkboxes in the filter bar (the payment statuses on /membership-fees). */
.filter-checkboxes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.filter-checkboxes legend {
    float: left;
    margin-right: 0.4rem;
    padding: 0;
    font-size: 0.83rem;
    font-weight: 600;
}

.filter-bar .filter-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 400;
    font-size: 0.92rem;
    cursor: pointer;
}

.filter-checkbox input {
    accent-color: var(--color-primary-500);
    margin: 0;
}

/* The member number after the name in a list. */
.member-number {
    color: var(--color-text-muted);
    font-size: 0.83rem;
}

/* A fee status in a list: the colored dot and the text. */
.payment-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.payment-status-none {
    color: var(--color-text-muted);
}

/* Name and member number: long names wrap instead of widening the table. */
.payment-name-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.payment-table .payment-status {
    align-items: flex-start;
}

.payment-table .fee-status-dot {
    margin-top: 0.3em;
}

/* Hidden on screen, still read by screen readers (e.g. a column heading with no visible text). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* The "+" that opens the payment dialog. Above the row link, which covers the row. */
.payment-table td.payment-action {
    width: 1%;
    text-align: right;
}

.btn-add.btn-add-small {
    z-index: 1;
    width: 34px;
    height: 34px;
    margin-left: auto;
}

.btn-add.btn-add-small::before {
    width: 14px;
    height: 2px;
}

.btn-add.btn-add-small::after {
    width: 2px;
    height: 14px;
}

/* Fee, paid and status at the top of the payment dialog. */
.payment-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 1rem;
    margin: 0 0 1.25rem;
    font-size: 0.92rem;
}

.payment-summary dt {
    color: var(--color-text-muted);
}

.payment-summary dd {
    margin: 0;
    font-weight: 600;
}

.payment-error {
    margin: 0.75rem 0 0;
}

@media (max-width: 640px) {
    .filter-field-search {
        flex: 1 1 100%;
    }

    .filter-field-search .filter-search {
        flex: 1;
        min-width: 0;
    }
}

/* Information an administrator can see but other members cannot. */
.field-hidden {
    color: var(--color-text-muted);
    opacity: 0.6;
}

.admin-note {
    font-size: 0.83rem;
}

.btn-primary {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.65rem 1.4rem;
    border-radius: var(--radius-sm);
    background: var(--color-primary-600);
    color: #fff;
    font-weight: 700;
    font-size: 0.94rem;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.btn-primary:hover {
    background: var(--color-primary-700);
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.profile-actions .btn-primary {
    margin-top: 0;
}

.btn-danger {
    display: inline-block;
    padding: 0.65rem 1.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-danger-500);
    background: transparent;
    color: var(--color-danger-500);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.94rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-danger:hover:not(:disabled),
.btn-danger-solid {
    background: var(--color-danger-500);
    color: #fff;
}

.btn-danger:disabled,
.btn-secondary:disabled {
    opacity: 0.6;
    cursor: default;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
}

.modal {
    width: min(480px, 100%);
    padding: 1.75rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.modal h2 {
    font-size: 1.2rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.modal-actions .btn-secondary {
    margin: 0;
    font-family: inherit;
    cursor: pointer;
}

.page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.page-header-row h1 {
    margin: 0;
}

.btn-add {
    /* The plus is drawn with two bars (not a "+" glyph, whose font metrics
       sit low) so it is exactly centred at any size. */
    display: block;
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-primary-600);
    box-shadow: var(--shadow-sm);
    font-size: 0;
    color: transparent;
    text-decoration: none;
    transition: background var(--transition-fast);
}

/* Used both as a link and as a <button> (the board page): strip the button defaults so they look alike. */
button.btn-add {
    padding: 0;
    border: 0;
    cursor: pointer;
}

.btn-add::before,
.btn-add::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    border-radius: 2px;
    transform: translate(-50%, -50%);
}

.btn-add::before {
    width: 22px;
    height: 3px;
}

.btn-add::after {
    width: 3px;
    height: 22px;
}
.btn-add:hover {
    background: var(--color-primary-700);
}

.btn-secondary {
    display: inline-block;
    margin: 0.35rem 0 1.25rem;
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-primary-600);
    background: transparent;
    color: var(--color-primary-600);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-secondary:hover {
    background: var(--color-primary-600);
    color: #fff;
}

.table-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

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

.member-table th {
    text-align: left;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    padding: 0.85rem 1.25rem;
}

.member-table td {
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.92rem;
}

/* The whole row is clickable: the name link is stretched over the row via
   ::after, which keeps it a real link (keyboard, middle-click, etc.). */
.member-row {
    position: relative;
    transition: background var(--transition-fast);
}

.member-row:hover,
.member-row:focus-within {
    background: var(--color-surface-muted);
}

.member-cell {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.member-link {
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
}

.member-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.member-row:hover .member-link {
    text-decoration: underline;
}

/* On a phone each member on /membership-fees becomes a card: picture and name on top,
   then the status and the sections indented under the name. The column headings
   go. After the .member-table rules on purpose, so these win. */
@media (max-width: 640px) {
    .payment-table thead {
        display: none;
    }

    .payment-table,
    .payment-table tbody,
    .payment-table td {
        display: block;
    }

    /* A grid: the picture (40px) spans the rows to the left, and name, status and
       sections (least important here, so last) stack to the right of it with the
       same small gap between them. */
    .payment-table tr {
        display: grid;
        grid-template-columns: 40px 1fr auto;
        column-gap: 0.85rem;
        row-gap: 4px;
        align-items: start;
        padding: 0.85rem 1rem;
        border-top: 1px solid var(--color-border);
    }

    .payment-table tbody tr:first-child {
        border-top: 0;
    }

    .payment-table td {
        padding: 0;
        border-top: 0;
    }

    /* The name cell's picture and name become grid items themselves. */
    .payment-table td.payment-name,
    .payment-table .payment-name .member-cell {
        display: contents;
    }

    .payment-table .payment-name .profile-avatar {
        grid-row: 1 / span 3;
    }

    .payment-table .payment-name-text {
        grid-column: 2;
        grid-row: 1;
    }

    .payment-table td.payment-status-cell {
        grid-column: 2;
        grid-row: 2;
    }

    .payment-table td.payment-sections {
        grid-column: 2;
        grid-row: 3;
        display: flex;
        flex-wrap: wrap;
        gap: 4px 0.3rem;
    }

    .payment-table .payment-sections .section-pill-small {
        margin: 0;
    }

    /* Message rows ("Laddar…", "Inga medlemmar hittades.") span the whole card. */
    .payment-table td[colspan] {
        grid-column: 1 / -1;
    }

    /* The "+" to the right, next to the name. */
    .payment-table td.payment-action {
        grid-column: 3;
        grid-row: 1 / span 3;
        width: auto;
    }
}

/* ---------- Authentication page ----------------------------------------- */

/* The pages sit inside the normal centred, padded content column; let the
   authentication pages break out of it so their background fills the window. */
.app-content:has(> .auth-page) {
    max-width: none;
    padding: 0;
}

.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background:
        radial-gradient(circle at 15% 15%, rgba(47, 135, 96, 0.16), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(212, 160, 23, 0.14), transparent 45%),
        var(--color-bg);
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 2.25rem;
}

.auth-card-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

.auth-logo {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 0.5rem;
}

.auth-card-header h1 {
    font-size: 1.4rem;
}

.auth-card-header p {
    font-size: 0.88rem;
    margin: 0;
}

.auth-field {
    display: block;
    margin-bottom: 1rem;
}

.auth-field span {
    display: block;
    font-size: 0.83rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--color-text);
}

.auth-field input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.94rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-field input:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

.auth-field input.invalid {
    border-color: var(--color-danger-500);
}

.auth-field .validation-message {
    display: block;
    color: var(--color-danger-500);
    font-size: 0.78rem;
    margin-top: 0.35rem;
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.86rem;
    margin-bottom: 1.5rem;
    color: var(--color-text-muted);
}

.auth-submit {
    width: 100%;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--color-primary-600);
    color: #fff;
    font-size: 0.96rem;
    font-weight: 700;
    padding: 0.75rem;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.auth-submit:hover {
    background: var(--color-primary-700);
    transform: translateY(-1px);
}

.auth-alert {
    background: var(--color-danger-100);
    color: var(--color-danger-500);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    font-size: 0.86rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.auth-alert-info {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}

.auth-link {
    display: inline-block;
    margin-bottom: 1.25rem;
    color: var(--color-primary-600);
    font-weight: 600;
    font-size: 0.86rem;
    text-decoration: none;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-hint {
    margin-top: 1.5rem;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.4;
}

/* ---------- Membership application (ApplyForMembership.razor) -------- */

.auth-card-wide {
    max-width: 760px;
    container-type: inline-size;
}

.auth-card-wide .validation-message {
    display: block;
    color: var(--color-danger-500);
    font-size: 0.78rem;
    margin-top: 0.35rem;
}

.auth-field textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.94rem;
    resize: vertical;
}

.auth-field textarea:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

.auth-field textarea.invalid {
    border-color: var(--color-danger-500);
}

.form-section-hint {
    font-size: 0.83rem;
    color: var(--color-text-muted);
    margin: -0.4rem 0 0.8rem;
}

.application-image {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}

.application-image-text .form-section-hint {
    margin: 0.6rem 0 0;
}

.application-image-button {
    position: relative;
    width: 128px;
    height: 128px;
    padding: 0;
    border: 2px dashed var(--color-border);
    border-radius: 50%;
    background: var(--color-surface-muted);
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
}

.application-image-button:hover,
.application-image-button:focus-visible {
    border-color: var(--color-primary-500);
}

.application-image-preview {
    display: block;
    width: 100%;
    height: 100%;
}

.application-image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.application-image-placeholder[hidden] {
    display: none;
}

.application-section {
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
}

.visibility-choices {
    display: grid;
    gap: 0.6rem;
}

/* One choice per row: the detail, then its two mutually exclusive boxes. */
.visibility-choice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.5rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
}

.visibility-choice .auth-checkbox {
    margin: 0;
}

.visibility-choice-label {
    min-width: 8rem;
    font-size: 0.86rem;
    font-weight: 600;
}

/* The Turnstile widget (bot check), centred above the submit button. */
.application-captcha {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 65px;
    margin-bottom: 1.25rem;
    text-align: center;
    font-size: 0.83rem;
}

.visibility-choice .validation-message {
    flex-basis: 100%;
    margin-top: 0;
}

@container (min-width: 380px) {
    .form-row-pair { grid-template-columns: repeat(2, 1fr); }
}

@container (min-width: 560px) {
    .form-row-three { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
    .auth-card-wide { padding: 1.75rem 1.25rem; }
}

/* ---------- Responsiveness ------------------------------------------ */

.resizing .nav-sidebar {
    transition: none !important;
}

@media (max-width: 880px) {
    .nav-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        /* Stretched by top/bottom to the visible area instead of a fixed height. */
        height: auto;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
        width: min(280px, 78vw);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--transition-base), visibility 0s linear 220ms;
        z-index: 40;
    }

    .nav-toggle-checkbox:checked ~ .nav-sidebar {
        transform: translateX(0);
        visibility: visible;
        transition: transform var(--transition-base), visibility 0s;
        box-shadow: var(--shadow-lg);
    }

    .nav-toggle-label {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 50;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--color-primary-800);
        box-shadow: var(--shadow-md);
        cursor: pointer;
        align-items: center;
    }

    .nav-toggle-label span {
        width: 18px;
        height: 2px;
        background: #fff;
        margin: 0 auto;
        border-radius: 2px;
    }

    .app-content {
        padding: 4.5rem 1.25rem 3rem;
    }

    .profile-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-fields {
        text-align: left;
    }

    /* The card is a centred column here; forms still need the full width. */
    .profile-details {
        align-self: stretch;
        width: 100%;
    }

    .profile-details .form-section,
    .profile-details .form-actions {
        text-align: left;
    }
}

/* ---------- Member picker + section board ------------------------------- */

.modal-wide {
    width: min(760px, 100%);
    max-height: 90vh;
    overflow-y: auto;
}

/* A name that is picked (a button) looks like the link it replaces. */
.member-pick {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.board-group {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.board-group h2 {
    font-size: 1.05rem;
    margin: 0 0 0.75rem;
}

.board-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.board-entry {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--color-border);
}

.board-entry:first-child {
    border-top: 0;
}

.member-link-plain {
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    min-width: 12rem;
}

.member-link-plain:hover {
    text-decoration: underline;
}

.board-entry-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex: 1;
}

.board-edit {
    margin: 0;
    font-family: inherit;
    cursor: pointer;
}

.board-field {
    margin-top: 1rem;
}

.board-field select {
    /* As tall as the buttons beside it. */
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.92rem;
}

.board-subtitle {
    font-size: 0.95rem;
    margin: 1.25rem 0 0.5rem;
}

.board-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pill-remove {
    border: 0;
    background: none;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 0.35rem;
}

/* ---------- Menu tree (one per section) ---------------------------------- */

.nav-tree summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.94rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

.nav-tree summary::-webkit-details-marker {
    display: none;
}

.nav-tree summary::after {
    content: "▸";
    margin-left: auto;
    transition: transform var(--transition-fast);
}

.nav-tree[open] summary::after {
    transform: rotate(90deg);
}

.nav-tree summary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.nav-tree-children {
    list-style: none;
    margin: 0.15rem 0 0.35rem;
    padding: 0 0 0 1.6rem;
}

.nav-tree-children a {
    padding: 0.45rem 0.8rem;
    font-size: 0.88rem;
}

/* Profile picture: the picture is a button that opens the chooser. */
.avatar-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.avatar-button {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.avatar-button-hint {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.15rem 0;
    line-height: 1.2;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 0 0 36px 36px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.avatar-button:hover .avatar-button-hint,
.avatar-button:focus-visible .avatar-button-hint {
    opacity: 1;
}

.avatar-remove {
    margin: 0;
}

.link-button {
    border: 0;
    padding: 0;
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.78rem;
    text-decoration: underline;
    cursor: pointer;
}

.avatar-dialog {
    width: min(420px, calc(100% - 2rem));
    padding: 1.75rem;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
}

.avatar-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.avatar-dialog h2 {
    font-size: 1.2rem;
    margin-top: 0;
}

/* Shows the picture the way it will appear (round, like the avatars). */
.avatar-preview {
    display: block;
    width: 200px;
    height: 200px;
    margin: 1rem auto;
    border-radius: 50%;
    background: var(--color-surface-muted);
}

.avatar-dialog .modal-actions {
    flex-wrap: wrap;
}

.avatar-dialog .modal-actions button {
    margin: 0;
    font-family: inherit;
    cursor: pointer;
}
/* A picture that opens larger when clicked (other members' profile pages). */
.avatar-enlarge {
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: zoom-in;
    line-height: 0;
    flex-shrink: 0;
}

.image-modal {
    width: auto;
    max-width: min(1080px, 100%);
    text-align: center;
}

.image-modal img {
    display: block;
    max-width: 100%;
    max-height: 75vh;
    margin: 0 auto;
    border-radius: var(--radius-md, 8px);
}

/* Member fee and its specification dialog. */
.fee-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
}

.fee-specification-link {
    font-size: 0.85rem;
}

.fee-dialog {
    width: min(480px, calc(100% - 2rem));
    padding: 1.75rem;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
}

.fee-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.fee-dialog h2 {
    font-size: 1.2rem;
    margin-top: 0;
}

.fee-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.fee-table th,
.fee-table td {
    padding: 0.5rem 0.4rem;
    text-align: left;
    font-size: 0.92rem;
    border-bottom: 1px solid var(--color-border);
}

.fee-table tfoot th {
    border-bottom: 0;
    border-top: 2px solid var(--color-border);
}

.fee-table .fee-amount {
    text-align: right;
    white-space: nowrap;
}

/* Bankgiro to the left, the payment message to the right; the message wraps
   onto its own line when both do not fit. */
.fee-payment-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1.5rem;
    font-size: 0.92rem;
    margin-bottom: 1rem;
}

/* One row per reminder sent, under the row of the year's fee. */
.fee-table .fee-reminder td {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.fee-dialog h3.fee-records-title {
    font-size: 1rem;
    margin: 1.25rem 0 0.25rem;
}

/* A fee's status: unpaid light gray (white in dark mode), partly paid
   yellow, paid green, overdue red, overpaid blue. */
.fee-status {
    font-weight: 600;
}

.fee-status-unpaid { color: var(--color-status-unpaid); }
.fee-status-partial { color: var(--color-status-partial); }
.fee-status-paid { color: var(--color-status-paid); }
.fee-status-overdue { color: var(--color-status-overdue); }
.fee-status-overpaid { color: var(--color-status-overpaid); }

/* This year's status next to the fee: a dot in the status color. */
.fee-status-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.fee-dialog .modal-actions button {
    margin: 0;
    font-family: inherit;
    cursor: pointer;
}

/* Buttons that sit side by side - the actions under a profile, in dialogs and
   next to a form control or a page title - share one size and shape, whichever
   kind they are (primary, secondary, danger) and whether they are <a> or <button>.
   Without this the secondary buttons were smaller and the borderless primary ones 2px
   lower than the bordered ones. */
.profile-actions :is(.btn-primary, .btn-secondary, .btn-danger),
.modal-actions :is(.btn-primary, .btn-secondary, .btn-danger),
.board-field :is(.btn-primary, .btn-secondary, .btn-danger),
.page-header-row > :is(.btn-primary, .btn-secondary, .btn-danger),
.page-header-actions :is(.btn-primary, .btn-secondary, .btn-danger) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0.65rem 1.4rem;
    border: 1px solid;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.profile-actions .btn-primary,
.modal-actions .btn-primary,
.board-field .btn-primary,
.page-header-row > .btn-primary,
.page-header-actions .btn-primary {
    border-color: var(--color-primary-600);
}

.profile-actions .btn-primary:hover,
.modal-actions .btn-primary:hover,
.board-field .btn-primary:hover,
.page-header-row > .btn-primary:hover,
.page-header-actions .btn-primary:hover {
    border-color: var(--color-primary-700);
}

/* A title button stays in the header's flex row on narrow screens instead of wrapping its text. */
.page-header-row > :is(.btn-primary, .btn-secondary, .btn-danger),
.page-header-actions :is(.btn-primary, .btn-secondary, .btn-danger) {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Several buttons side by side beside a page title (the title wraps first); on a phone they wrap, right-aligned. */
.page-header-actions {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    gap: 0.75rem;
}

@media (max-width: 640px) {
    .page-header-actions {
        flex-shrink: 1;
        flex-wrap: wrap;
    }
}

.page-header-row > .btn-primary:disabled,
.page-header-actions :is(.btn-primary, .btn-secondary):disabled {
    opacity: 0.6;
    cursor: default;
}

.modal-actions .btn-danger-solid,
.profile-actions .btn-danger-solid {
    border-color: var(--color-danger-500);
}