/* ==========================================================================
   DESIGN SYSTEM — Site Association of Industries
   Stack: Bootstrap 5.3.3 + Bootstrap Icons + Public Sans
   Theme: “Global chamber / business association” — informed by common patterns
   seen across international business bodies (e.g. ICC’s peacock blue #0A5DA8,
   deep institutional navies, airy cool neutrals, restrained gold for prestige
   accents). This is an original palette, not a copy of any single mark.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ========================================================================== */

:root {

    /* --- Brand palette — cool institutional navy (structure, dark UI) --- */
    --color-brand-950: #021627;
    --color-brand-900: #032338;
    --color-brand-800: #063255;
    --color-brand-700: #0a426e;
    --color-brand-600: #0f5688;
    --color-brand-500: #3a6f8f;
    --color-brand-400: #6a8fa8;
    --color-brand-300: #9bb5c4;
    --color-brand-200: #ccdbe4;
    --color-brand-100: #e8f0f5;
    --color-brand-50:  #f4f8fb;

    /* Accent — ICC-style “peacock” primary + tints (actions, links, focus) */
    --color-accent-rgb: 10, 93, 168;
    --color-accent-900: #042f54;
    --color-accent-800: #084a87;
    --color-accent-700: #0a5da8;
    --color-accent-600: #1273c4;
    --color-accent-500: #3d8fd4;
    --color-accent-200: #b8d4ef;
    --color-accent-100: #e3eef8;
    --color-accent-50:  #f0f7fc;
    --color-accent-focus-ring: rgba(var(--color-accent-rgb), 0.22);
    --color-accent-soft-bg: rgba(var(--color-accent-rgb), 0.12);

    /* Prestige accent — muted gold/ochre (eyebrows, dividers; use sparingly) */
    --color-institution-900: #4f3f16;
    --color-institution-700: #7d6226;
    --color-institution-600: #9a7b2c;
    --color-institution-200: #e8dcc0;
    --color-institution-100: #f3ead1;

    /* Semantic — success */
    --color-success-800: #166534;
    --color-success-100: #dcfce7;
    --color-success-200: #bbf7d0;

    /* Semantic — warning */
    --color-warning-800: #92400e;
    --color-warning-100: #fef3c7;
    --color-warning-200: #fde68a;

    /* Semantic — error */
    --color-error-800: #991b1b;
    --color-error-100: #fee2e2;
    --color-error-200: #fecaca;

    /* Semantic — info (aligned to primary) */
    --color-info-800: var(--color-accent-900);
    --color-info-100: var(--color-accent-100);
    --color-info-200: var(--color-accent-200);

    /* --- Neutral surfaces — cool, paper-like (association annual reports) --- */
    --color-surface-body:   #f3f7fb;
    --color-surface-0:      #ffffff;
    --color-surface-1:      #f6f9fc;
    --color-surface-2:      #edf3f8;
    --color-border:         #d5dee8;
    --color-border-strong:  #b8c5d4;
    --color-text-primary:   #071a2e;
    --color-text-secondary: #3d566e;
    --color-text-muted:     #6b8299;
    --color-text-inverted:  #ffffff;

    /* --- Typography --- */
    --font-family: "Public Sans", Arial, Helvetica, sans-serif;
    --font-size-xs:   0.6875rem;   /* 11px — labels, eyebrows */
    --font-size-sm:   0.8125rem;   /* 13px — table cells, helper text */
    --font-size-base: 0.9375rem;   /* 15px — body */
    --font-size-md:   1rem;        /* 16px */
    --font-size-lg:   1.0625rem;   /* 17px — card titles */
    --font-size-xl:   1.25rem;     /* 20px */
    --font-size-2xl:  1.5rem;      /* 24px — page titles */
    --font-size-3xl:  1.875rem;    /* 30px — dashboard welcome */
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-extrabold:800;
    --line-height-tight:  1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed:1.65;
    --letter-spacing-label: 0.09em;  /* ALL CAPS labels */
    --letter-spacing-tight: -0.025em; /* large headings */

    /* --- Spacing (4px base unit) --- */
    --space-1:  0.25rem;   /* 4px  */
    --space-2:  0.5rem;    /* 8px  */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */

    /* --- Border radius --- */
    --radius-xs:  6px;
    --radius-sm:  8px;
    --radius-md:  10px;   /* buttons, inputs */
    --radius-lg:  14px;   /* cards */
    --radius-xl:  18px;   /* large cards */
    --radius-pill:9999px; /* badges, pills */

    /* --- Shadows --- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.08);

    /* --- Topbar — deep navy into peacock (trust, continuity with ICC-type sites) --- */
    --topbar-height: 60px;
    --topbar-bg-start: #021a2f;
    --topbar-bg-mid:   #063255;
    --topbar-bg-end:   #0a5da8;
    --topbar-accent:   #4db0f5;
    --topbar-link-color:  rgba(255,255,255,0.78);
    --topbar-link-active: rgba(255,255,255,1);
    --topbar-link-hover-bg: rgba(255,255,255,0.10);
    --topbar-link-active-bg: rgba(255,255,255,0.16);

    /* --- Sidebar --- */
    --sidebar-width-expanded: 240px;
    --sidebar-width-collapsed: 60px;
    --sidebar-bg: var(--color-brand-800);
    --sidebar-border: rgba(255,255,255,0.08);
    --sidebar-link-color: rgba(255,255,255,0.72);
    --sidebar-link-hover-bg: rgba(255,255,255,0.08);
    --sidebar-link-active-bg: var(--color-accent-700);
    --sidebar-link-active-color: #fff;

    /* --- Page layout --- */
    --page-container-max: 1200px;
    --page-container-pad-x: clamp(var(--space-4), 3vw, var(--space-8));
    /* Vertical rhythm: comfortable inset under admin nav (matches module pages) */
    --page-container-pad-y: var(--space-8);

    /* --- Nav breakpoint mirror (Bootstrap xxl = 1400px) --- */
    --nav-collapse-breakpoint: 1400px;
}


/* ==========================================================================
   2. GLOBAL RESET & BASE
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background: var(--color-surface-body);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-accent-700);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Focus ring — applied globally, only visible on keyboard nav */
:focus-visible {
    outline: 2px solid var(--color-accent-600);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Remove outline from mouse-click focus (browsers that support it) */
:focus:not(:focus-visible) {
    outline: none;
}


/* ==========================================================================
   3. BOOTSTRAP OVERRIDES
   Targeted fixes — do not fight the framework, guide it.
   ========================================================================== */

/*
 * FIX: The previous `border-radius: inherit` rule on Bootstrap components
 * caused all buttons/cards/alerts to inherit 0 from <body>, flattening corners.
 * Remove that rule and restore Bootstrap's own --bs-border-radius tokens,
 * mapped to our design tokens.
 */
:root {
    --bs-border-radius:    var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-xl: var(--radius-xl);
    --bs-border-radius-pill: var(--radius-pill);
    --bs-body-font-family: var(--font-family);
    --bs-body-color: var(--color-text-primary);
    --bs-border-color: var(--color-border);
    --bs-primary: var(--color-accent-700);
    --bs-primary-rgb: var(--color-accent-rgb);
}

/* Button refinements */
.btn {
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease, opacity 0.15s ease;
}

.btn-dark,
.btn-dark:hover {
    background-color: var(--color-brand-800);
    border-color: var(--color-brand-800);
}

.btn-dark:hover {
    background-color: var(--color-brand-900);
    border-color: var(--color-brand-900);
}

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

.btn-primary:hover {
    background-color: var(--color-accent-800);
    border-color: var(--color-accent-800);
}

.btn-outline-dark {
    color: var(--color-brand-800);
    border-color: var(--color-brand-200);
}

.btn-outline-dark:hover {
    background-color: var(--color-brand-800);
    border-color: var(--color-brand-800);
    color: var(--color-text-inverted);
}

/* Form controls */
.form-control,
.form-select {
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-accent-500);
    box-shadow: 0 0 0 3px var(--color-accent-focus-ring);
}

.form-label {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.form-text {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Table — preserve Bootstrap structure, refine padding + header */
.table > :not(caption) > * > * {
    padding: 0.75rem 0.875rem;
    vertical-align: middle;
}

.table > thead > tr > * {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text-secondary);
    background-color: var(--color-surface-1);
    border-bottom-width: 1px;
    border-bottom-color: var(--color-border);
    white-space: nowrap;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--color-accent-50);
}

/* Card */
.card {
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* Badge */
.badge {
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
}

/* Alert — Bootstrap's own alerts restored with proper radius */
.alert {
    border-radius: var(--radius-md);
}

/* Dropdown */
.dropdown-menu {
    border-color: rgba(148, 163, 184, 0.25);
    box-shadow: var(--shadow-md);
}

.dropdown-item {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--color-accent-50);
    color: var(--color-brand-800);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--color-accent-800);
    color: #fff;
}


/* ==========================================================================
   4. PUBLIC SITE (guest + error layouts: nav, main, footer)
   ========================================================================== */

body.public-site {
    margin: 0;
    font-family: var(--font-family);
    background: linear-gradient(
        165deg,
        var(--color-surface-body) 0%,
        var(--color-brand-50) 48%,
        var(--color-surface-body) 100%
    );
    color: var(--color-text-primary);
}

.site-public-nav {
    background: linear-gradient(
        90deg,
        var(--topbar-bg-start) 0%,
        var(--topbar-bg-mid) 40%,
        var(--topbar-bg-end) 88%,
        var(--topbar-accent) 125%
    );
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-public-nav .navbar-brand {
    color: var(--color-text-inverted) !important;
    letter-spacing: var(--letter-spacing-tight);
}

.site-public-nav__brand-mark {
    width: 2.875rem;
    height: 2.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.site-public-nav__brand-mark--icon {
    font-size: 1.2rem;
    color: #fff;
}

.site-public-nav__brand-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.site-public-nav__brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.site-public-nav__brand-name {
    display: block;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
}

.site-public-nav__brand-subtitle {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.site-public-nav .nav-link {
    color: rgba(255, 255, 255, 0.88) !important;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.site-public-nav .nav-link:hover,
.site-public-nav .nav-link:focus {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.08);
}

.site-public-nav .nav-link.active {
    color: #fff !important;
    background-color: rgba(var(--color-accent-rgb), 0.38);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.guest-main {
    min-height: 0;
}

.guest-main__content {
    flex-shrink: 0;
}

.guest-brand-mark {
    flex-shrink: 0;
    margin-bottom: var(--space-8);
}

.guest-brand-mark__link {
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    background: var(--color-surface-0);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

.guest-brand-mark__link:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.14);
    filter: brightness(1.02);
}

.guest-brand-mark__img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(280px, 58vw);
    max-height: min(220px, 32vh);
    object-fit: contain;
}

.home-hero .letter-spacing-1 {
    letter-spacing: 0.12em;
}

.home-hero__eyebrow {
    color: var(--color-institution-600) !important;
    letter-spacing: 0.14em;
}

.home-hero__title {
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
}

.association-home {
    display: grid;
    gap: var(--space-8);
}

.association-home__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
    gap: var(--space-6);
    align-items: stretch;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 28px;
    background:
        linear-gradient(120deg, rgba(2, 22, 39, 0.92), rgba(10, 66, 110, 0.88)),
        url("../img/site-header.jpeg") center/cover no-repeat;
    box-shadow: var(--shadow-lg);
    color: #fff;
}

.association-home__hero-copy {
    display: grid;
    align-content: center;
}

.association-home__hero-lead {
    max-width: 52rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
}

.association-home__hero .home-hero__title,
.association-home__hero .home-hero__eyebrow {
    color: #fff;
}

.association-home__hero .home-hero__eyebrow {
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.72) !important;
}

.association-home__hero-points {
    display: grid;
    gap: var(--space-3);
}

.association-home__hero-points li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: rgba(255, 255, 255, 0.9);
}

.association-home__hero-points i {
    color: #9fd0ff;
}

.association-home__hero-panel {
    padding: var(--space-6);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
}

.association-home__panel-label,
.association-home__section-kicker,
.site-public-footer__eyebrow,
.auth-portal__eyebrow,
.auth-card__kicker {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
}

.association-home__panel-label {
    color: #b8d4ef;
}

.association-home__panel-list {
    display: grid;
    gap: var(--space-3);
}

.association-home__panel-list div {
    display: grid;
    gap: 0.2rem;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.association-home__panel-list span {
    color: rgba(255, 255, 255, 0.68);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.association-home__panel-list strong {
    color: #fff;
    font-size: var(--font-size-base);
}

.association-home__section {
    display: grid;
    gap: var(--space-5);
}

.association-home__section-head {
    max-width: 48rem;
}

.association-home__section-title {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.1;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-brand-900);
}

.association-home__section-text {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.association-home__service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.association-home__service-card {
    padding: var(--space-6);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(6, 50, 85, 0.08);
    box-shadow: var(--shadow-md);
}

.association-home__service-card h3 {
    margin: 0 0 var(--space-2);
    color: var(--color-brand-900);
    font-size: 1.15rem;
}

.association-home__service-card p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.association-home__service-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--color-accent-700), var(--color-brand-800));
    color: #fff;
    font-size: 1.1rem;
}

.association-home__section--notice .association-home__notice-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-6);
    border-radius: 24px;
    background: linear-gradient(135deg, var(--color-institution-100), #fff);
    border: 1px solid var(--color-institution-200);
    box-shadow: var(--shadow-sm);
}

.site-public-footer {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 245, 251, 0.98)),
        url("../img/letterhead-watermark.jpg") right bottom / 260px auto no-repeat;
    border-top: 1px solid rgba(6, 50, 85, 0.08);
    box-shadow: 0 -1px 0 rgba(15, 23, 42, 0.06);
}

.site-public-footer__eyebrow {
    color: var(--color-institution-700);
}

.site-public-footer__title {
    color: var(--color-brand-900);
}

.site-public-footer__lead,
.site-public-footer__meta,
.site-public-footer__bottom {
    color: var(--color-text-secondary);
}

.site-public-footer__heading {
    margin: 0 0 var(--space-3);
    color: var(--color-brand-900);
    font-size: var(--font-size-md);
}

.site-public-footer__links,
.site-public-footer__contact {
    display: grid;
    gap: var(--space-2);
}

.site-public-footer__links a {
    color: var(--color-brand-800);
}

.site-public-footer__contact li {
    display: grid;
    gap: 0.15rem;
}

.site-public-footer__contact span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.site-public-footer__contact strong {
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.site-public-footer__bottom {
    border-top: 1px solid rgba(6, 50, 85, 0.08);
}

/* Legacy: centered full-viewport shell (admin errors / old markup if any) */
.guest-shell,
.app-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}


/* ==========================================================================
   5. AUTH CARD
   ========================================================================== */

.auth-card {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    background: var(--color-surface-0);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
}

.auth-card__header {
    margin-bottom: var(--space-5);
}

.auth-card__header h1:not(.display-4) {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}

.auth-card__header p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}

.auth-portal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    gap: var(--space-6);
    align-items: center;
}

.auth-portal__info {
    color: var(--color-brand-900);
}

.auth-portal__eyebrow,
.auth-card__kicker {
    color: var(--color-institution-700);
}

.auth-portal__title {
    margin: 0 0 var(--space-3);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.02;
    letter-spacing: var(--letter-spacing-tight);
}

.auth-portal__lead {
    margin: 0 0 var(--space-5);
    color: var(--color-text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
}

.auth-portal__panel {
    padding: var(--space-6);
    border-radius: 24px;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.94), rgba(232, 240, 245, 0.9));
    border: 1px solid rgba(6, 50, 85, 0.08);
    box-shadow: var(--shadow-md);
}

.auth-portal__panel h2 {
    margin: 0 0 var(--space-3);
    font-size: 1.25rem;
    color: var(--color-brand-900);
}

.auth-portal__panel p {
    margin: 0 0 var(--space-4);
    color: var(--color-text-secondary);
}

.auth-portal__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3);
}

.auth-portal__list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-brand-900);
}

.auth-portal__list i {
    color: var(--color-accent-700);
}

.auth-card--portal {
    max-width: none;
    background: rgba(255, 255, 255, 0.98);
}

.auth-form {
    display: grid;
    gap: var(--space-4);
}

.form-row {
    display: grid;
    gap: var(--space-2);
}

.form-row label {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="text"] {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    background: var(--color-surface-0);
    color: var(--color-text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-row input:focus {
    border-color: var(--color-accent-500);
    box-shadow: 0 0 0 3px var(--color-accent-focus-ring);
    outline: none;
}

.form-row--checkbox label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-weight-medium);
}

/* Override Bootstrap raw <button[type=submit]> — use btn classes instead */
button[type="submit"]:not(.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 0;
    border-radius: var(--radius-md);
    padding: 0.75rem var(--space-4);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family);
    cursor: pointer;
    background: var(--color-brand-800);
    color: var(--color-text-inverted);
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

button[type="submit"]:not(.btn):hover {
    background: var(--color-brand-900);
}

.auth-links {
    margin-top: var(--space-5);
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
}


/* ==========================================================================
   6. ALERT COMPONENT
   ========================================================================== */

.alerts {
    margin: 0 0 var(--space-4) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.alert {
    border-radius: var(--radius-md);
    padding: 0.75rem 0.875rem;
    border: 1px solid transparent;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

/* Icon prefix via Bootstrap Icons as a pseudo-element */
.alert::before {
    font-family: "bootstrap-icons";
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.alert--error,
.alert-danger {
    background: var(--color-error-100);
    border-color: var(--color-error-200);
    color: var(--color-error-800);
}

.alert--error::before { content: "\F333"; } /* bi-exclamation-circle-fill */

.alert--success,
.alert-success {
    background: var(--color-success-100);
    border-color: var(--color-success-200);
    color: var(--color-success-800);
}

.alert--success::before { content: "\F26A"; } /* bi-check-circle-fill */

.alert--info,
.alert-info {
    background: var(--color-info-100);
    border-color: var(--color-info-200);
    color: var(--color-info-800);
}

.alert--info::before { content: "\F431"; } /* bi-info-circle-fill */

.alert--warning,
.alert-warning {
    background: var(--color-warning-100);
    border-color: var(--color-warning-200);
    color: var(--color-warning-800);
}

.alert--warning::before { content: "\F33A"; } /* bi-exclamation-triangle-fill */

/* Bootstrap alert variants that don't use our BEM naming */
.alert-danger::before  { content: "\F333"; }
.alert-success::before { content: "\F26A"; }
.alert-info::before    { content: "\F431"; }
.alert-warning::before { content: "\F33A"; }


/* ==========================================================================
   7. ERROR CARD
   ========================================================================== */

.error-card {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    background: var(--color-surface-0);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
}

.error-card h1 {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.error-card p {
    margin: 0 0 var(--space-3);
    color: var(--color-text-secondary);
}


/* ==========================================================================
   8. ADMIN BODY FRAME
   The frame wraps header + (optional sidebar) + main.
   sidebar activation is opt-in via body.has-sidebar — no PHP changes needed.
   ========================================================================== */

.admin-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--color-surface-body);
}

/* Inner frame: sidebar + main row when a sidebar exists; otherwise main grows full width */
.admin-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: calc(100vh - var(--topbar-height));
}


/* ==========================================================================
   9. ADMIN HEADER & TOPBAR
   ========================================================================== */

.admin-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    isolation: isolate;
    width: 100%;
    min-height: var(--topbar-height);
    background: linear-gradient(
        90deg,
        var(--topbar-bg-start) 0%,
        var(--topbar-bg-mid) 35%,
        var(--topbar-bg-end) 70%,
        var(--topbar-accent) 120%
    );
    box-shadow: var(--shadow-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: stretch;
    overflow: visible;
}

.admin-navbar {
    --admin-nav-pad-x: var(--page-container-pad-x);
    padding: 0;
    width: 100%;
    min-height: var(--topbar-height);
}

.admin-navbar__inner {
    max-width: 1440px;
    min-height: var(--topbar-height);
    margin: 0 auto;
    padding-left: var(--admin-nav-pad-x);
    padding-right: var(--admin-nav-pad-x);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--space-2);
}

/* Brand */
.admin-navbar__brand {
    color: var(--color-text-inverted) !important;
    text-decoration: none !important;
    margin-right: var(--space-4);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    min-width: 0;
}

.admin-navbar__brand:hover {
    opacity: 0.9;
}

.admin-navbar__brand-name {
    max-width: min(22rem, 52vw);
    color: var(--color-text-inverted);
}

.admin-navbar__brand-tagline {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.58);
    max-width: min(28rem, 70vw);
}

.admin-navbar__logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: var(--color-surface-0);
    border-radius: var(--radius-sm);
    padding: 4px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.admin-navbar__brand-text {
    min-width: 0;
}

.admin-navbar__brand-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    color: var(--color-text-inverted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-navbar__brand-sub {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: rgba(255, 255, 255, 0.52);
    margin-top: 2px;
    white-space: nowrap;
}

/* Toggler */
.admin-navbar__toggler {
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.4rem 0.55rem;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease;
}

.admin-navbar__toggler:hover {
    background: rgba(255, 255, 255, 0.1);
}

.admin-navbar__collapse {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

/* Nav links */
.admin-navbar__nav {
    gap: 0.15rem;
}

.admin-navbar .admin-navbar__link {
    position: relative;
    z-index: 2;
    color: var(--topbar-link-color) !important;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.admin-navbar .dropdown-toggle.admin-navbar__link {
    z-index: 2;
}

.admin-navbar .admin-navbar__link:hover,
.admin-navbar .admin-navbar__link:focus-visible {
    color: var(--topbar-link-active) !important;
    background-color: var(--topbar-link-hover-bg);
    text-decoration: none;
}

.admin-navbar .admin-navbar__link.active {
    color: var(--topbar-link-active) !important;
    background-color: var(--topbar-link-active-bg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.admin-navbar .dropdown-toggle::after {
    margin-left: 0.3em;
    vertical-align: 0.1em;
}

/* Dropdown */
.admin-navbar__dropdown {
    --bs-dropdown-min-width: 13rem;
    z-index: 1080;
    border-radius: var(--radius-lg);
    padding: var(--space-1) var(--space-1);
    margin-top: var(--space-2) !important;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: var(--color-surface-0);
    box-shadow: var(--shadow-md);
}

.admin-navbar__dropdown .dropdown-item {
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    padding: 0.5rem 0.75rem;
    color: var(--color-brand-700);
}

.admin-navbar__dropdown .dropdown-item:hover {
    background: var(--color-accent-50);
    color: var(--color-brand-800);
}

.admin-navbar__dropdown .dropdown-item.active,
.admin-navbar__dropdown .dropdown-item:active {
    background: var(--color-accent-800);
    color: #fff;
}

/* Account section */
.admin-navbar__account {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-3);
    margin-top: var(--space-1);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
}

.admin-navbar__email {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-navbar__logout button {
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
}

/* Collapse breakpoint: below 1400px (Bootstrap xxl) use hamburger */
@media (max-width: 1399.98px) {
    .admin-navbar__inner > .navbar-collapse {
        flex-basis: 100%;
        order: 3;
    }

    .admin-navbar__toggler {
        order: 2;
    }
}

@media (max-width: 991.98px) {
    .association-home__hero,
    .auth-portal,
    .association-home__section--notice .association-home__notice-card {
        grid-template-columns: 1fr;
    }

    .association-home__service-grid {
        grid-template-columns: 1fr;
    }

    .association-home__notice-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    .site-public-nav__brand-subtitle {
        display: none;
    }

    .association-home__hero {
        padding: var(--space-5);
    }

    .auth-card--portal {
        padding: var(--space-6);
    }
}

@media (min-width: 1400px) {
    .admin-navbar__collapse {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        flex: 1 1 auto;
        width: auto;
        min-height: var(--topbar-height);
    }

    .admin-navbar__center {
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 0;
        min-height: var(--topbar-height);
    }

    .admin-navbar__center .admin-navbar__nav {
        justify-content: center;
        flex-wrap: nowrap;
        gap: 0.2rem;
        min-height: var(--topbar-height);
        align-items: center;
    }

    .admin-navbar__brand-text {
        max-width: min(260px, 20vw);
    }

    .admin-navbar__account {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        border-top: none;
        padding-top: 0;
        margin-top: 0;
        margin-left: auto;
        padding-left: var(--space-4);
        border-left: 1px solid rgba(255, 255, 255, 0.14);
        gap: var(--space-2);
    }

    .admin-navbar__email {
        max-width: min(220px, 16vw);
        font-size: var(--font-size-xs);
    }
}


/* ==========================================================================
   10. OPTIONAL SIDEBAR
   Activated by adding class `has-sidebar` to <body>.
   No PHP layout changes required — CSS handles the show/hide.
   At ≥1024px the sidebar pushes the main content area.
   On mobile it overlays as a drawer.
   ========================================================================== */

.admin-sidebar {
    display: none; /* hidden by default; shown when body.has-sidebar */
}

body.has-sidebar .admin-sidebar {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width-expanded);
    flex-shrink: 0;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    min-height: calc(100vh - var(--topbar-height));
    position: sticky;
    top: var(--topbar-height);
    height: calc(100vh - var(--topbar-height));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    transition: width 0.2s ease;
}

/* Sidebar nav */
.sidebar-nav {
    padding: var(--space-3) var(--space-2);
    flex: 1 1 auto;
}

.sidebar-nav__section {
    margin-bottom: var(--space-5);
}

.sidebar-nav__label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: rgba(255, 255, 255, 0.35);
    padding: 0 var(--space-2) var(--space-2);
}

.sidebar-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--sidebar-link-color);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-nav__link:hover {
    background: var(--sidebar-link-hover-bg);
    color: #fff;
    text-decoration: none;
}

.sidebar-nav__link.active {
    background: var(--sidebar-link-active-bg);
    color: var(--sidebar-link-active-color);
}

.sidebar-nav__icon {
    font-size: 1.1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}

/* Collapsed sidebar: show icons only (1024–1199px) */
@media (min-width: 1024px) and (max-width: 1199.98px) {
    body.has-sidebar .admin-sidebar {
        width: var(--sidebar-width-collapsed);
    }

    .sidebar-nav__label,
    .sidebar-nav__text {
        display: none;
    }

    .sidebar-nav__link {
        justify-content: center;
        padding: var(--space-2);
    }
}

/* Below 1024px: sidebar hidden even if body.has-sidebar */
@media (max-width: 1023.98px) {
    body.has-sidebar .admin-sidebar {
        display: none;
    }
}

/* Sidebar drawer: mobile overlay (toggled via JS adding .sidebar-open to body) */
@media (max-width: 1023.98px) {
    body.has-sidebar.sidebar-open .admin-sidebar {
        display: flex;
        position: fixed;
        top: var(--topbar-height);
        left: 0;
        z-index: 1020;
        height: calc(100vh - var(--topbar-height));
        width: var(--sidebar-width-expanded);
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }
}


/* ==========================================================================
   11. ADMIN MAIN CONTENT AREA
   ========================================================================== */

.admin-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/*
 * Admin <main> reuses .app-shell from the guest layout stack so it inherits
 * .app-shell { padding, centering, min-height }. A single high-specificity block
 * restores institute spacing — do NOT use `.admin-layout .app-shell { padding:0 }`
 * (that beat `.admin-main` and removed horizontal gutters entirely).
 */
.admin-layout main.app-shell.admin-main {
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--page-container-pad-y) var(--page-container-pad-x);
}

/* ==========================================================================
   12. PAGE COMPOSITION COMPONENTS
   These are the standard building blocks every module page should use.
   ========================================================================== */

/* --- Page container: max-width + horizontal padding centering --- */
.page-container {
    width: 100%;
    max-width: var(--page-container-max);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    /* Bottom gutter for all admin routes (dashboard, modules, bare markup e.g. membership case) */
    padding-bottom: var(--space-8);
    box-sizing: border-box;
}

/* Full-width modules (DataTables, wide dashboards) — keep horizontal padding from .admin-main */
.page-container--fluid {
    max-width: none;
}

/* --- Page header: title/subtitle left, action buttons right --- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.page-header__lead {
    flex: 1 1 14rem;
    min-width: 0;
}

.page-title {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}

.page-subtitle {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
}

.page-header__actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* Page content region — same horizontal footprint as dashboard & loose module markup */
.page-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: 100%;
    max-width: 100%;
}

/* Section heading (used in dashboard and module subsections) */
.section-heading {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Sticky page actions bar (for long edit forms) */
.page-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--color-surface-0);
    border-top: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-6);
    margin: 0 calc(-1 * var(--page-container-pad-x));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06);
}


/* ==========================================================================
   13. DS-CARD COMPONENT
   Standard content card for all module index/detail pages.
   Variants: ds-card--flat (no shadow), ds-card--raised (stronger shadow)
   ========================================================================== */

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

.ds-card--flat {
    box-shadow: none;
}

.ds-card--raised {
    box-shadow: var(--shadow-md);
}

.ds-card--hover {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}

.ds-card--hover:hover {
    border-color: var(--color-brand-200);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.ds-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-1);
}

.ds-card__title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.ds-card__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ds-card__body {
    padding: var(--space-5);
}

.ds-card__footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-1);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Card with colored left accent border */
.ds-card--accent-blue  { border-left: 4px solid var(--color-accent-700); }
.ds-card--accent-green { border-left: 4px solid #16a34a; }
.ds-card--accent-amber { border-left: 4px solid #d97706; }
.ds-card--accent-red   { border-left: 4px solid #dc2626; }


/* ==========================================================================
   13b. MEMBERSHIP DASHBOARD — stat widgets + pipeline grid (T_UI_04)
   ========================================================================== */

.ds-dashboard__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.ds-stat-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-0);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.ds-stat-card__label {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.ds-stat-card__value {
    margin: 0;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.ds-stat-card__hint {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
}

.ds-pipeline-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

.ds-pipeline-stage {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.ds-pipeline-stage__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.ds-pipeline-stage__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.ds-pipeline-stage__meta {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.ds-pipeline-stage__title {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}

.ds-pipeline-stage__cta {
    margin: 0;
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent-700);
}

.ds-pipeline-stage:focus-visible {
    outline: 2px solid var(--color-accent-500);
    outline-offset: 2px;
}

@media (max-width: 1199.98px) {
    .ds-dashboard__stats,
    .ds-pipeline-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .ds-dashboard__stats,
    .ds-pipeline-grid {
        grid-template-columns: 1fr;
    }

    .ds-stat-card__value {
        font-size: var(--font-size-2xl);
    }
}


/* ==========================================================================
   14. TABLE COMPONENT
   ========================================================================== */

/* Outer scroll container — prevents tables from breaking layout on small screens */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    background: var(--color-surface-0);
    -webkit-overflow-scrolling: touch;
}

/* The table inside sits flush — border-radius clips via overflow:hidden on .table-wrap */
.table-wrap .table {
    margin-bottom: 0;
    border-collapse: collapse;
    width: 100%;
    min-width: 600px; /* force scroll on small screens rather than wrapping */
}

.table-wrap .table > thead > tr > th {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text-secondary);
    background: var(--color-surface-1);
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 0.875rem;
    white-space: nowrap;
}

/* First/last header cell respect the table-wrap border-radius */
.table-wrap .table > thead > tr > th:first-child {
    border-radius: calc(var(--radius-lg) - 1px) 0 0 0;
}
.table-wrap .table > thead > tr > th:last-child {
    border-radius: 0 calc(var(--radius-lg) - 1px) 0 0;
}

.table-wrap .table > tbody > tr:last-child > td:first-child {
    border-radius: 0 0 0 calc(var(--radius-lg) - 1px);
}
.table-wrap .table > tbody > tr:last-child > td:last-child {
    border-radius: 0 0 calc(var(--radius-lg) - 1px) 0;
}

.table-wrap .table > tbody > tr > td {
    padding: 0.75rem 0.875rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.table-wrap .table > tbody > tr:last-child > td {
    border-bottom: none;
}

.table-wrap .table-hover > tbody > tr:hover > td {
    background: var(--color-accent-50);
}

/* Column helpers */
.col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.col-date {
    white-space: nowrap;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
}

.col-status {
    width: 1%;
    white-space: nowrap;
}


/* ==========================================================================
   14b. DS-FILTER-BAR + FRONTDESK MAIL LOG TABLES (T_UI_05)
   ========================================================================== */

.ds-filter-bar {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-1);
}

.ds-filter-bar .form-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.ds-filter-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.ds-filter-bar__summary {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
}

@media (max-width: 991.98px) {
    .ds-filter-bar__summary {
        flex-basis: 100%;
        margin-top: var(--space-2);
    }
}

/* Wide mail registers — horizontal scroll inside .table-wrap */
.table-wrap.table-wrap--mail-wide .table,
.table-wrap.table-wrap--mail-wide table.dataTable {
    min-width: 1100px;
}

.table-wrap > .dataTables_wrapper {
    width: 100%;
}

/* FrontDesk mail log cell hierarchy */
.fd-mail__ref {
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

.fd-mail__subject {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    min-width: 12rem;
}

.fd-mail__meta {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: var(--line-height-normal);
}

.fd-pagination-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.fd-dt-hint {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* Incoming log: multi-line subject / notes read better top-aligned */
.table-wrap.fd-mail-incoming .table > tbody > tr > td {
    vertical-align: top;
}

/* FrontDesk mail entry — view signature preview (T_UI_06) */
.fd-signature-thumb {
    max-height: 120px;
    width: auto;
    height: auto;
}

/* FrontDesk mail detail — definition list spacing */
.fd-detail-dl dt {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.fd-detail-dl dd {
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

@media (min-width: 576px) {
    .fd-detail-dl dd {
        margin-bottom: var(--space-3);
    }
}


/* ==========================================================================
   14c. CIRCULARS — Quill RTE, preview, invitee list (T_UI_07)
   ========================================================================== */

.circ-quill-field .circ-quill-editor {
    background: var(--color-surface-0);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    min-height: 280px;
}

.circ-quill-field .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--color-surface-1);
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-2);
}

.circ-quill-field .ql-container.ql-snow {
    border: none;
    font-family: var(--font-family-sans, Public Sans, system-ui, sans-serif);
    font-size: var(--font-size-sm);
}

.circ-quill-field .ql-editor {
    min-height: 220px;
    line-height: var(--line-height-relaxed);
}

.circ-quill-field .ql-editor img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.circ-invitee-list {
    max-height: 280px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--color-surface-0);
}

.circ-preview-card__header {
    background: linear-gradient(135deg, var(--color-accent-800) 0%, var(--color-brand-900) 100%);
    border-bottom: none;
}

.circ-preview-iframe-wrap {
    background: var(--color-surface-1);
}

.circ-preview-iframe {
    width: 100%;
    height: min(420px, 70vh);
    border: 0;
    display: block;
    background: #fff;
}

/* Saved circular email preview page — taller frame for letterhead HTML */
.circ-preview-iframe--saved {
    min-height: 640px;
    height: min(80vh, 900px);
}

/* Mobile viewport simulation — toggled by initPreviewToggle() in app.js */
.circ-preview-viewport-wrap {
    transition: max-width 0.2s ease, margin 0.2s ease;
}

.circ-preview-viewport-wrap.circ-preview--mobile {
    max-width: 375px;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}

.circ-view-body {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
}

.circ-view-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.circ-view-body p {
    margin-bottom: var(--space-3);
}

.circ-view-body p:last-child {
    margin-bottom: 0;
}

/* Newsletter hero (circular top image + caption) — T_FEAT_01 */
.ds-circular-hero {
    margin: 0 0 var(--space-6) 0;
}

.ds-circular-hero__img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.ds-circular-hero__caption {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: var(--space-2);
    line-height: 1.4;
    font-weight: normal;
    font-style: normal;
}

@media (max-width: 767px) {
    .ds-circular-hero__img {
        border-radius: 0;
        margin-left: calc(-1 * var(--space-4));
        margin-right: calc(-1 * var(--space-4));
        width: calc(100% + var(--space-4) * 2);
    }
}

.circ-hero-dropzone {
    border: 2px dashed var(--color-border);
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.circ-hero-dropzone--active {
    border-color: var(--color-accent-600);
    background: var(--color-surface-1);
}

.circ-hero-dropzone:focus-visible {
    outline: 2px solid var(--color-accent-600);
    outline-offset: 2px;
}

.circ-hero-dropzone__text {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.circ-hero-dropzone__meta {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.circ-hero-preview-wrap {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.circ-hero-preview-aspect {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: var(--color-surface-2);
}

.circ-hero-preview-aspect img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.circ-hero-preview-img--provisional {
    filter: grayscale(80%) blur(1px);
    opacity: 0.6;
}

.circ-hero-remove {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    z-index: 2;
    font-size: var(--font-size-xs);
}

.circ-hero-remove--busy {
    pointer-events: none;
    opacity: 0.4;
}

.circ-hero-preview-wrap--optimizing .circ-hero-preview-aspect {
    opacity: 1;
}

.circ-hero-status {
    color: var(--color-text-muted);
}

/* Keep live regions in the DOM for screen readers — do not use display:none (see T_UI_11). */
.circ-hero-status--hidden {
    visibility: hidden;
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

.circ-hero-alert:not(.circ-hero-status--hidden) {
    visibility: visible;
    height: auto;
    min-height: 0;
    clip-path: none;
    overflow: visible;
    color: var(--color-error-800, #b91c1c);
    font-weight: var(--font-weight-medium, 500);
}

.circ-hero-status--success {
    color: var(--color-text-primary);
}

.circ-hero-status--pulse {
    animation: circ-hero-status-pulse 1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .circ-hero-status--pulse {
        animation: none;
    }
}

@keyframes circ-hero-status-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Preview toggle: one clear focus ring (avoid Bootstrap btn shadow + global outline stack). */
.circ-preview-card__header .circ-preview-toggle__btn:focus {
    box-shadow: none;
}

.circ-preview-card__header .circ-preview-toggle__btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.95);
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .circ-quill-field .ql-toolbar .ql-formats {
        margin-right: 0;
    }
}

.circ-quill-field--invalid .circ-quill-editor,
.circ-quill-field--invalid .ql-toolbar.ql-snow {
    border-color: var(--color-error-800) !important;
}

.circ-quill-field--invalid textarea.circ-body-fallback-textarea {
    border-color: var(--color-error-800);
}

textarea.circ-body-fallback-textarea {
    min-height: 280px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}


/* ==========================================================================
   15. DS-BADGE (STATUS BADGES)
   Semantic workflow status tokens — covers all modules.
   ========================================================================== */

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.2em 0.6em;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: capitalize;
    white-space: nowrap;
    line-height: 1.4;
}

/* Dot indicator */
.ds-badge::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
    flex-shrink: 0;
}

/* Status variants */
.ds-badge--draft {
    background: var(--color-surface-2);
    color: var(--color-brand-500);
    border: 1px solid var(--color-border);
}

.ds-badge--pending {
    background: var(--color-warning-100);
    color: var(--color-warning-800);
    border: 1px solid var(--color-warning-200);
}

.ds-badge--active,
.ds-badge--approved,
.ds-badge--published {
    background: var(--color-success-100);
    color: var(--color-success-800);
    border: 1px solid var(--color-success-200);
}

.ds-badge--in-review,
.ds-badge--in_review {
    background: var(--color-info-100);
    color: var(--color-info-800);
    border: 1px solid var(--color-info-200);
}

.ds-badge--rejected,
.ds-badge--inactive {
    background: var(--color-error-100);
    color: var(--color-error-800);
    border: 1px solid var(--color-error-200);
}

.ds-badge--closed,
.ds-badge--archived {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

/* Delegation authority badge — amber/gold, distinct from routing step badges */
.ds-badge--delegated {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
}


/* ==========================================================================
   16. EMPTY STATE
   Used in all module list views when there are no records.
   ========================================================================== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-12) var(--space-8);
    color: var(--color-text-secondary);
    min-height: 280px;
}

.empty-state__icon {
    font-size: 3rem;
    color: var(--color-brand-300);
    margin-bottom: var(--space-4);
    line-height: 1;
}

.empty-state__title {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.empty-state__desc {
    margin: 0 0 var(--space-5);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    max-width: 28rem;
    line-height: var(--line-height-relaxed);
}


/* ==========================================================================
   17. FORM SECTION COMPONENT
   Card-wrapped fieldset for consistent form layout in module edit/create pages.
   ========================================================================== */

.form-section {
    background: var(--color-surface-0);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    margin-bottom: var(--space-5);
}

.form-section__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-1);
}

.form-section__heading {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text-secondary);
}

.form-section__body {
    padding: var(--space-5);
    display: grid;
    gap: var(--space-5);
}

.form-section__body--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767.98px) {
    .form-section__body--cols-2 {
        grid-template-columns: 1fr;
    }
}

/* Individual form group within a form-section */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.form-group--full {
    grid-column: 1 / -1;
}


/* ==========================================================================
   17b. DS-FORM — standardized labels, fieldsets, actions (Membership & modules)
   ========================================================================== */

.ds-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.ds-form__fieldset {
    border: 0;
    margin: 0 0 var(--space-6);
    padding: 0;
    min-width: 0;
}

.ds-form__fieldset:last-of-type {
    margin-bottom: var(--space-4);
}

.ds-form__legend {
    float: none;
    width: 100%;
    padding: 0;
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-2);
}

.ds-form__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: 0;
}

.ds-form__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 0;
}

.ds-form__hint {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: var(--line-height-normal);
}

.ds-form__error {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-error-800);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    display: none; /* hidden by default */
}

.ds-form__error.is-visible {
    display: block;
}

.ds-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-5);
    margin-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.ds-form__actions--compact {
    padding-top: var(--space-3);
    margin-top: 0;
    border-top: none;
}

/* Horizontal row (e.g. record filing inside doc cards) */
.ds-form--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}

.ds-form__group--grow {
    flex: 1 1 12rem;
    min-width: 0;
}

.ds-form .form-control:focus,
.ds-form .form-select:focus,
.ds-form textarea:focus {
    border-color: var(--color-accent-500);
    box-shadow: 0 0 0 3px var(--color-accent-50);
}

@media (max-width: 575.98px) {
    .ds-form--inline {
        flex-direction: column;
        align-items: stretch;
    }

    .ds-form--inline .btn {
        width: 100%;
    }
}


/* ==========================================================================
   18. ACCOUNT / PROFILE BLOCK
   ========================================================================== */

.account-details {
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}


/* ==========================================================================
   19. DASHBOARD STYLES
   Migrated from original with design tokens substituted.
   Structure and class names are unchanged — only raw hex → token.
   ========================================================================== */

.dashboard-page {
    width: 100%;
    max-width: 1120px;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.dashboard-welcome {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5) var(--space-8);
    padding: var(--space-6) var(--space-6);
    background: var(--color-surface-0);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.dashboard-welcome__intro {
    flex: 1 1 16rem;
    min-width: 0;
}

.dashboard-welcome__title {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}

.dashboard-eyebrow {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-institution-700);
}

.dashboard-welcome__lead {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    max-width: 34rem;
}

.dashboard-welcome__aside {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    min-width: 12rem;
}

.dashboard-user-pill {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
}

.dashboard-user-pill__icon {
    font-size: 1.75rem;
    color: var(--color-brand-400);
    line-height: 1;
}

.dashboard-user-pill__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dashboard-user-pill__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text-muted);
}

.dashboard-user-pill__email {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-welcome__site-link {
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
}

.dashboard-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.dashboard-section__heading {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.dashboard-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
}

.dashboard-module-grid--narrow {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    max-width: 640px;
}

.dashboard-module-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-5) var(--space-5);
    background: var(--color-surface-0);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dashboard-module-card:hover {
    border-color: var(--color-brand-200);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.dashboard-module-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.dashboard-module-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, var(--color-accent-50) 0%, var(--color-accent-100) 100%);
    color: var(--color-accent-700);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.dashboard-module-card__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
}

.dashboard-module-card__desc {
    margin: 0 0 var(--space-4);
    flex: 1 1 auto;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

.dashboard-module-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
}

.dashboard-module-card__actions .btn {
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
}


/* ==========================================================================
   20. LETTERHEAD PREVIEW CARD
   Unchanged in structure — only raw hex replaced with design tokens.
   The letterhead module renders a mock paper layout; do not alter layout.
   ========================================================================== */

.letterhead-preview-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.98) 100%);
    border: 1px solid rgba(148,163,184,0.22);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.letterhead-preview-card__header {
    background: var(--color-surface-0);
    border-bottom: 1px solid rgba(148,163,184,0.2);
}

.letterhead-preview-card__header-image {
    display: block;
    width: 100%;
    height: auto;
}

.letterhead-preview-card__body {
    position: relative;
    padding: 2rem clamp(1.25rem, 2vw, 2.5rem) 2.5rem;
    min-height: 420px;
    overflow: hidden;
}

.letterhead-preview-card__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(380px, 70%);
    transform: translate(-50%, -50%);
    opacity: 0.08;
    pointer-events: none;
}

.letterhead-preview-card__meta,
.letterhead-preview-card__to-block,
.letterhead-preview-card__subject,
.letterhead-preview-card__body-copy,
.letterhead-preview-card__signature {
    position: relative;
    z-index: 1;
}

.letterhead-preview-card__meta {
    font-size: 0.86rem;
    color: var(--color-brand-500);
    margin-bottom: 1.75rem;
}

.letterhead-preview-card__draft-title {
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.35);
}

.letterhead-preview-card__draft-title-label {
    display: block;
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.2rem;
}

.letterhead-preview-card__draft-title-value {
    display: block;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: 0.9rem;
    line-height: 1.35;
    word-break: break-word;
}

.letterhead-workflow-bullets li {
    padding-left: 0.15rem;
}

.letterhead-workflow-pills .ds-badge {
    white-space: nowrap;
}

.letterhead-preview-card__to-block {
    white-space: pre-line;
    max-width: 28rem;
    margin-bottom: 1.5rem;
    color: var(--color-text-primary);
}

.letterhead-preview-card__subject {
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    margin-bottom: 1.25rem;
    color: var(--color-text-primary);
}

.letterhead-preview-card__body-copy {
    min-height: 8rem;
    white-space: pre-line;
    line-height: 1.7;
    color: var(--color-brand-600);
    margin-bottom: 3rem;
    max-width: 52rem;
}

.letterhead-preview-card__signature {
    max-width: 20rem;
    margin-top: auto;
}

.letterhead-preview-card__closing {
    margin-bottom: 3.5rem;
    color: var(--color-brand-600);
}

.letterhead-preview-card__signatory {
    display: inline-block;
    min-width: 13rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(15, 23, 42, 0.8);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.letterhead-preview-card__signatory span {
    font-weight: var(--font-weight-medium);
    font-size: 0.95rem;
    color: var(--color-brand-500);
}

/* Editor vs preview: shell wraps the paper simulation for create/edit layouts */
.letterhead-editor-layout .letterhead-editor-card {
    border: 1px solid var(--color-border);
}

.letterhead-preview-shell {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 100%;
}

.letterhead-preview-shell__chrome {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-surface-1) 0%, var(--color-surface-0) 100%);
    border: 1px solid var(--color-border);
}

.letterhead-preview-shell__eyebrow {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.letterhead-preview-shell__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.letterhead-preview-shell__hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.45;
    margin-top: var(--space-2);
}

.letterhead-preview-shell__paper {
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    background: var(--color-surface-2);
    border: 1px dashed rgba(148, 163, 184, 0.45);
    max-width: 100%;
    overflow: hidden;
}

.letterhead-preview-card--sim {
    box-shadow: var(--shadow-sm);
}

.letterhead-danger-card {
    border: 1px solid rgba(220, 53, 69, 0.35);
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.35) 0%, var(--color-surface-0) 100%);
}

@media (min-width: 1200px) {
    .letterhead-preview-shell--sticky {
        position: sticky;
        top: var(--space-4);
        z-index: 2;
        align-self: flex-start;
    }
}


/* ==========================================================================
   REVIEW MODULE — routed approvals (stepper + timeline)
   ========================================================================== */

.review-document-body {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.05rem;
    line-height: 1.65;
}

.review-body-plain {
    white-space: pre-wrap;
}

.review-body-sanitized.circulars-admin-body {
    font-family: inherit;
}

.review-email-preview-iframe {
    display: block;
    width: 100%;
    min-height: 420px;
    height: min(70vh, 640px);
    border: none;
}

.ds-review-stepper__track {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
}

.ds-review-stepper__item {
    flex: 1 1 0;
    min-width: 4.5rem;
    text-align: center;
    color: var(--color-text-muted);
}

.ds-review-stepper__item.is-current {
    color: var(--color-brand-600);
}

.ds-review-stepper__item.is-done {
    color: var(--color-success-600, #15803d);
}

.ds-review-stepper__node {
    width: 2rem;
    height: 2rem;
    margin: 0 auto var(--space-2);
    border-radius: 999px;
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    background: var(--color-surface-0);
}

.ds-review-stepper__item.is-current .ds-review-stepper__node {
    border-color: var(--color-brand-500);
    background: var(--color-accent-soft-bg);
    color: var(--color-brand-700);
}

.ds-review-stepper__item.is-done .ds-review-stepper__node {
    border-color: rgba(22, 163, 74, 0.5);
    background: rgba(22, 163, 74, 0.12);
}

.ds-review-stepper__label {
    display: block;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
}

.ds-review-stepper__sub {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

.ds-review-stepper__connector {
    flex: 0 0 1.25rem;
    height: 2px;
    margin-top: 1rem;
    background: var(--color-border);
    align-self: flex-start;
}

.ds-review-stepper__connector.is-done {
    background: rgba(22, 163, 74, 0.45);
}

.ds-review-stepper__note {
    max-width: 52rem;
}

.ds-review-stepper__note-label {
    display: inline-block;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    margin-right: 0.35rem;
}

.review-module .ds-review-stepper__note--delegated {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid #fbbf24;
    background: #fffbeb;
    color: var(--color-text-secondary);
}

.review-module .ds-review-stepper__note--delegated .ds-review-stepper__note-label {
    color: #92400e;
}

/* President step: delegated final authority (distinct from normal “current step” ring) */
.review-module .ds-review-stepper__item.is-current.is-delegated-final .ds-review-stepper__node {
    border-color: #d97706;
    background: rgba(245, 158, 11, 0.18);
    color: #92400e;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.45);
}

.review-registry-step__badge {
    font-size: 0.65rem;
    vertical-align: middle;
}

.review-registry-step__hint {
    max-width: 12rem;
    line-height: 1.35;
}

@media (max-width: 767.98px) {
    .review-registry .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .review-registry-step__hint {
        max-width: none;
    }
}

.review-module .ds-timeline__item--delegation {
    border-left-color: rgba(217, 119, 6, 0.45);
}

.review-module .ds-timeline__item--delegation .ds-timeline__marker {
    background: #d97706;
}

.ds-timeline {
    padding: var(--space-4);
}

.ds-timeline__item {
    position: relative;
    padding-left: var(--space-6);
    padding-bottom: var(--space-5);
    border-left: 2px solid var(--color-border);
}

.ds-timeline__item:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.ds-timeline__marker {
    position: absolute;
    left: -0.5rem;
    top: 0.15rem;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 999px;
    background: var(--color-brand-500);
    border: 2px solid var(--color-surface-0);
    box-shadow: 0 0 0 1px var(--color-border);
}

.ds-timeline__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
}

.ds-timeline__time {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.ds-timeline__detail {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.ds-timeline__detail--danger {
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.25);
}

.review-workflow-sidebar {
    position: static;
}

@media (min-width: 1200px) {
    .review-workflow-sidebar {
        position: sticky;
        top: var(--space-4);
        align-self: flex-start;
    }
}


/* ==========================================================================
   21. UTILITY CLASSES
   Minimal — supplement Bootstrap, don't duplicate it.
   ========================================================================== */

/* Text */
.text-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text-muted);
}

.text-muted-sm {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Divider */
.divider {
    height: 1px;
    background: var(--color-border);
    border: none;
    margin: var(--space-5) 0;
}

/* Inline icon alignment */
.icon-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}


/* ==========================================================================
   22. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* Mobile (< 768px) */
@media (max-width: 767.98px) {
    :root {
        --page-container-pad-x: var(--space-4);
        --page-container-pad-y: var(--space-6);
    }

    .page-container {
        padding-bottom: var(--space-6);
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-title {
        font-size: var(--font-size-xl);
    }

    .dashboard-welcome {
        padding: var(--space-5) var(--space-4);
    }

    .dashboard-welcome__aside {
        width: 100%;
    }

    .dashboard-module-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-module-grid--narrow {
        max-width: none;
        grid-template-columns: 1fr;
    }

    .letterhead-preview-card__body {
        min-height: 0;
        padding: var(--space-5);
    }

    .admin-navbar__account {
        flex-direction: column;
        align-items: stretch;
    }

    .table-wrap .table {
        min-width: 480px;
    }

    .page-actions {
        padding: var(--space-3) var(--space-4);
        flex-wrap: wrap;
    }

    .auth-card {
        padding: var(--space-5);
        border-radius: var(--radius-lg);
    }
}

/* Tablet (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023.98px) {
    :root {
        --page-container-pad-x: 20px;
    }

    .dashboard-module-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Laptop (1024px – 1399px) */
@media (min-width: 1024px) and (max-width: 1399.98px) {
    :root {
        --page-container-pad-x: clamp(16px, 2.5vw, 24px);
    }
}

/* Wide desktop (≥ 1400px) */
@media (min-width: 1400px) {
    .admin-navbar__collapse {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        flex: 1 1 auto;
        width: auto;
        min-height: var(--topbar-height);
    }

    .admin-navbar__center {
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 0;
        min-height: var(--topbar-height);
    }

    .admin-navbar__center .admin-navbar__nav {
        justify-content: center;
        flex-wrap: nowrap;
        gap: 0.2rem;
        min-height: var(--topbar-height);
        align-items: center;
    }

    .admin-navbar__brand-text {
        max-width: min(260px, 20vw);
    }

    .admin-navbar__account {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        border-top: none;
        padding-top: 0;
        margin-top: 0;
        margin-left: auto;
        padding-left: var(--space-4);
        border-left: 1px solid rgba(255, 255, 255, 0.14);
        gap: var(--space-2);
    }

    .admin-navbar__email {
        max-width: min(220px, 16vw);
    }
}


/* ==========================================================================
   23. MEMBERSHIP WORKFLOW — ds-stepper
   Dynamically driven from pipeline_stages config. Never hard-coded.
   States: completed, active, upcoming, rejected (terminal), complete (terminal).
   ========================================================================== */

/* --- Wrapper --- */
.ds-stepper {
    width: 100%;
    margin-bottom: var(--space-6);
}

/* Rejected terminal: wrap the entire stepper in this to show closure state */
.ds-stepper--rejected .ds-stepper__track-fill {
    background: var(--color-error-800);
}

.ds-stepper--complete .ds-stepper__track-fill {
    width: 100%;
    background: var(--color-success-800);
}

/* --- Desktop: horizontal node row --- */
.ds-stepper__inner {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
}

/* The connecting track sits in the vertical center of the nodes */
.ds-stepper__track {
    position: absolute;
    top: 14px;           /* half the node height (28px ÷ 2) */
    left: 14px;
    right: 14px;
    height: 3px;
    background: var(--color-border);
    border-radius: var(--radius-pill);
    z-index: 0;
    overflow: hidden;
}

/* Filled segment: width set via inline style from PHP (step / total * 100%) */
.ds-stepper__track-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--color-success-800) 0%,
        var(--color-accent-700) 100%
    );
    border-radius: var(--radius-pill);
    transition: width 0.35s ease;
}

/* --- Individual step --- */
.ds-stepper__step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    cursor: default;
}

/* Step node (the circle) */
.ds-stepper__node {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    border: 2px solid var(--color-border);
    background: var(--color-surface-0);
    color: var(--color-text-muted);
    transition: all 0.15s ease;
    flex-shrink: 0;
    line-height: 1;
    position: relative;
}

/* Step label — hidden by default, shown for active + on hover */
.ds-stepper__label {
    display: none;              /* hidden on all non-active steps */
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* --- Completed step --- */
.ds-stepper__step--completed .ds-stepper__node {
    background: var(--color-success-100);
    border-color: var(--color-success-800);
    color: var(--color-success-800);
}

/* Checkmark via Bootstrap Icons CSS content */
.ds-stepper__step--completed .ds-stepper__node::after {
    font-family: "bootstrap-icons";
    content: "\F26A";   /* bi-check-circle-fill */
    font-size: 0.75rem;
    position: absolute;
}

/* Hide the counter text when checkmark is shown */
.ds-stepper__step--completed .ds-stepper__node-num {
    display: none;
}

/* --- Active step --- */
.ds-stepper__step--active .ds-stepper__node {
    width: 36px;
    height: 36px;
    margin-top: -4px;   /* vertically center the larger node on the track */
    background: var(--color-accent-700);
    border-color: var(--color-accent-700);
    color: var(--color-text-inverted);
    box-shadow: 0 0 0 4px var(--color-accent-100);
    font-size: var(--font-size-sm);
}

.ds-stepper__step--active .ds-stepper__label {
    display: block;          /* always visible for active step */
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    max-width: 100px;
}

/* Rejection terminal: pipeline stage where the case was when rejected (not “almost finished”) */
.ds-stepper__step--rejected-at .ds-stepper__node {
    background: var(--color-error-100);
    border-color: var(--color-error-800);
    color: var(--color-error-800);
    box-shadow: 0 0 0 3px rgba(153, 27, 27, 0.12);
}

.ds-stepper__step--rejected-at .ds-stepper__label {
    display: block;
    color: var(--color-error-800);
    font-weight: var(--font-weight-bold);
    max-width: 100px;
}

/* --- Upcoming step --- */
.ds-stepper__step--upcoming .ds-stepper__node {
    background: var(--color-surface-1);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

/* --- Rejected terminal indicator (shown when case is rejected) --- */
.ds-stepper__rejected-state {
    display: none;
}

.ds-stepper--rejected .ds-stepper__rejected-state {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-error-100);
    border: 1px solid var(--color-error-200);
    border-radius: var(--radius-md);
    color: var(--color-error-800);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-top: var(--space-3);
}

/* --- Mobile: progress bar + text --- */
.ds-stepper__mobile {
    display: none;
}

.ds-stepper__mobile-bar-wrap {
    height: 6px;
    background: var(--color-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.ds-stepper__mobile-bar-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--color-success-800) 0%,
        var(--color-accent-700) 100%
    );
    border-radius: var(--radius-pill);
    transition: width 0.35s ease;
}

.ds-stepper__mobile-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.ds-stepper__mobile-sub {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Responsive: swap desktop/mobile versions */
@media (max-width: 767.98px) {
    .ds-stepper__inner {
        display: none;
    }

    .ds-stepper__mobile {
        display: block;
    }
}


/* ==========================================================================
   24. MEMBERSHIP WORKFLOW — ds-case-header
   Sticky applicant summary strip. Visible above the 2-column grid.
   ========================================================================== */

.ds-case-header {
    background: var(--color-surface-0);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4) var(--space-8);
}

.ds-case-header__identity {
    flex: 1 1 14rem;
    min-width: 0;
}

.ds-case-header__ref {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.ds-case-header__name {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
    line-height: var(--line-height-tight);
}

.ds-case-header__stage-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ds-case-header__meta {
    flex: 0 1 auto;
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: var(--space-1) var(--space-5);
    align-content: start;
}

.ds-case-header__meta-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ds-case-header__meta-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text-muted);
}

.ds-case-header__meta-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.ds-case-header__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    flex-wrap: wrap;
}

@media (max-width: 767.98px) {
    .ds-case-header {
        padding: var(--space-4);
        gap: var(--space-4);
    }

    .ds-case-header__meta {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .ds-case-header__actions {
        width: 100%;
    }

    .ds-case-header__actions .btn {
        flex: 1 1 auto;
    }
}


/* ==========================================================================
   25. MEMBERSHIP WORKFLOW — ds-doc-registry & ds-doc-card
   Replaces the raw table-sm table-borderless for document management.
   ========================================================================== */

.ds-doc-registry {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Base document card */
.ds-doc-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-0);
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    border-left-color: var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: box-shadow 0.15s ease;
}

.ds-doc-card:has(.ds-doc-card__form) {
    flex-wrap: wrap;
}

/* Document type icon */
.ds-doc-card__icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-size: 1rem;
    margin-top: 1px;
}

.ds-doc-card__main {
    flex: 1 1 auto;
    min-width: 0;
}

.ds-doc-card__type {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text-muted);
    margin-bottom: 2px;
}

.ds-doc-card__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-doc-card__name--empty {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Action area (right side of card) */
.ds-doc-card__action {
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Inline record-filing form (inside missing card) */
.ds-doc-card__form {
    width: 100%;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2);
}

.ds-doc-card__form .form-control,
.ds-doc-card__form .form-select {
    font-size: var(--font-size-sm);
}

/* --- State variants --- */

/* Accepted */
.ds-doc-card--accepted {
    border-left-color: var(--color-success-800);
    background: linear-gradient(
        90deg,
        rgba(220, 252, 231, 0.35) 0%,
        var(--color-surface-0) 60px
    );
}

.ds-doc-card--accepted .ds-doc-card__icon {
    background: var(--color-success-100);
    color: var(--color-success-800);
}

/* Pending (filed, awaiting acceptance) */
.ds-doc-card--pending {
    border-left-color: #d97706;  /* --color-warning mid */
    background: linear-gradient(
        90deg,
        rgba(254, 243, 199, 0.35) 0%,
        var(--color-surface-0) 60px
    );
}

.ds-doc-card--pending .ds-doc-card__icon {
    background: var(--color-warning-100);
    color: var(--color-warning-800);
}

/* Missing (required, not yet filed) */
.ds-doc-card--missing {
    border-left-color: var(--color-border-strong);
}

.ds-doc-card--missing .ds-doc-card__icon {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
}


/* ==========================================================================
   26. MEMBERSHIP WORKFLOW — ds-action-bar
   Replaces the raw "Advance case" card. Groups advance vs danger transitions.
   ========================================================================== */

.ds-action-bar {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ds-action-bar__head {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.ds-action-bar__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text-secondary);
    margin: 0;
}

.ds-action-bar__body {
    padding: var(--space-5);
}

/* Advance buttons row */
.ds-action-bar__advance {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

/* Reject zone: visually separated */
.ds-action-bar__danger {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-error-200);
    background: rgba(254, 226, 226, 0.25);
    margin: 0 calc(-1 * var(--space-5));
    padding: var(--space-4) var(--space-5) var(--space-3);
}

.ds-action-bar__danger-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-error-800);
    margin-bottom: var(--space-2);
}

/* Reason + notes fields */
.ds-action-bar__fields {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.ds-action-bar__hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
    line-height: var(--line-height-relaxed);
}

@media (max-width: 767.98px) {
    .ds-action-bar__advance {
        flex-direction: column;
    }

    .ds-action-bar__advance .btn {
        width: 100%;
        justify-content: center;
    }

    .ds-action-bar__danger .btn {
        width: 100%;
    }
}


/* ==========================================================================
   27. MEMBERSHIP WORKFLOW — ds-timeline
   Migrates ec-timeline to the ds-* token system.
   Drop-in replacement: change .ec-timeline → .ds-timeline in the view.
   ========================================================================== */

.ds-timeline {
    border-left: 2px solid var(--color-border);
    padding-left: var(--space-5);
    margin-left: var(--space-2);
}

.ds-timeline__item {
    position: relative;
    padding-bottom: var(--space-4);
}

/* Timeline dot */
.ds-timeline__item::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-5) - 4px);  /* align on the border-left */
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-brand-300);
    border: 2px solid var(--color-surface-0);
    box-shadow: 0 0 0 1px var(--color-border);
}

/* Most recent entry gets accent dot */
.ds-timeline__item:first-child::before {
    background: var(--color-accent-700);
    box-shadow: 0 0 0 3px var(--color-accent-100);
}

/* Transition label */
.ds-timeline__transition {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-1);
}

/* Reason text */
.ds-timeline__reason {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-style: italic;
    margin-bottom: var(--space-1);
}

/* Actor + timestamp */
.ds-timeline__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.ds-timeline__meta-sep {
    opacity: 0.5;
}

/* Empty state inside timeline */
.ds-timeline__empty {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
    padding: var(--space-2) 0;
}

@media (max-width: 767.98px) {
    .ds-timeline {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
    }

    .ds-timeline__item::before {
        display: none;
    }

    .ds-timeline__item {
        padding-bottom: var(--space-3);
        padding-top: var(--space-3);
        border-bottom: 1px solid var(--color-border);
    }

    .ds-timeline__item:last-child {
        border-bottom: none;
    }
}


/* ==========================================================================
   28. MEMBERSHIP WORKFLOW — Layout wrapper
   The main case detail page uses page-container but needs a workflow-specific
   2-column layout adjustments below the stepper.
   ========================================================================== */

.wf-case-layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-6);
    align-items: start;
}

.wf-case-layout__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.wf-case-layout__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-4));
    max-height: calc(100vh - var(--topbar-height) - var(--space-8));
    overflow-y: auto;
}

@media (max-width: 1023.98px) {
    .wf-case-layout {
        grid-template-columns: 1fr;
    }

    .wf-case-layout__sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

.app-slogan {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: #6c757d;
    max-width: 640px;
    margin: 0 auto;
    text-transform: lowercase;
}

/* Brand slogan — landing and login pages */
.brand-slogan {
  max-width: 560px;
  line-height: 1.6;
  font-size: 1rem;
}

/* Navbar tagline — admin header */
.navbar-tagline {
  max-width: 280px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.sidebar-tagline {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    max-width: 100%;
}