@charset "UTF-8";

/* ============================================================
   eFBL Admin - application styles
   Translated from FIATA Ops (Vue/Tailwind) design system
   ============================================================ */

/* Fonts
   ---------------------------------------------------------- */
@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable.7c80433dfb0d.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable-Italic.c72626aa905e.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* Design tokens -FIATA brand
   ---------------------------------------------------------- */
:root {
    --fiata-cyan:        #0085B0;
    --fiata-cyan-dark:   #006a8e;   /* hover */
    --fiata-cyan-border: #004f6b;   /* 3D button border-bottom (legacy login override) */
    --fiata-gray:        #414241;   /* Bootstrap --bs-body-color */

    /* Bootstrap overrides */
    --bs-font-sans-serif:  "Inter", system-ui, sans-serif;
    --bs-primary:          var(--fiata-cyan);
    --bs-primary-rgb:      0, 133, 176;
    --bs-body-color:       var(--fiata-gray);
    --bs-border-color:     #cbd5e1;  /* slate-300 */
    --bs-border-radius:    .375rem;
}

/* Layout
   ---------------------------------------------------------- */
html, body {
    height: 100%;
    overflow: hidden;
}

/* Sidebar
   ---------------------------------------------------------- */
#sidebar {
    width: 240px;
    min-width: 240px;
    background-color: #0f172a;     /* slate-900 */
    color: #cbd5e1;                /* slate-300 */
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
}

#sidebar .brand {
    padding: 1rem 1rem;
    border-bottom: 1px solid #1e293b;   /* slate-800 */
    display: flex;
    align-items: center;
    gap: .6rem;
}

#sidebar .brand img {
    height: 36px;
    width: auto;
}

#sidebar .brand-name {
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
}

#sidebar .nav-link {
    color: #cbd5e1;                /* slate-300 */
    padding: .4rem .75rem;
    border-radius: var(--bs-border-radius);
    margin: .1rem .5rem;
    font-size: .875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .625rem;
}

#sidebar .nav-link:hover {
    background-color: #1e293b;     /* slate-800 */
    color: #ffffff;
}

#sidebar .nav-link.active {
    background-color: var(--fiata-cyan);
    color: #ffffff;
}

#sidebar .nav-link .bi {
    width: 1.25rem;
    text-align: center;
    color: #94a3b8;                /* slate-400 */
}

#sidebar .nav-link.active .bi,
#sidebar .nav-link:hover .bi {
    color: #ffffff;
}

#sidebar .sidebar-section-title {
    padding: .75rem 1rem .25rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;                /* slate-500 */
}

#sidebar .sidebar-footer {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid #1e293b;
    font-size: .8rem;
    color: #94a3b8;                /* slate-400 */
}
#sidebar .sidebar-footer .footer-name { color: #ffffff; }
#sidebar .sidebar-footer .footer-email { color: #64748b; }

/* New shell (sidebar + topbar + main, post-revamp)
   ---------------------------------------------------------- */
.app-shell { display: flex; height: 100vh; }
.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.app-topbar {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
}
.topbar-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: #0f172a;
}
.topbar-breadcrumb {
    font-size: .875rem;
    color: #64748b;
}
.topbar-breadcrumb a { color: #64748b; text-decoration: none; }
.topbar-breadcrumb a:hover { color: #0f172a; }
.topbar-breadcrumb .crumb-current { color: #0f172a; font-weight: 500; }
.topbar-user { position: relative; }
.topbar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--fiata-cyan);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background-color .15s;
}
.topbar-avatar:hover { background-color: var(--fiata-cyan-dark); color: #ffffff; }
.topbar-avatar:focus-visible { outline: 3px solid rgba(0, 133, 176, .25); outline-offset: 2px; }

.topbar-menu {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    min-width: 240px;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .06);
    z-index: 1000;
    overflow: hidden;
}
.topbar-menu-header {
    padding: .85rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}
.topbar-menu-name {
    font-size: .875rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-menu-email {
    font-size: .78rem;
    color: #64748b;
    margin-top: .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-menu-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem 1rem;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    font-size: .85rem;
    color: #475569;
    text-decoration: none;
    cursor: pointer;
}
.topbar-menu-item:hover { background-color: #f1f5f9; color: #0f172a; }
.topbar-menu-item.is-danger { color: #b91c1c; }
.topbar-menu-item.is-danger:hover { background-color: #fef2f2; color: #b91c1c; }
.topbar-menu-item .bi { width: 1rem; text-align: center; color: #94a3b8; }
.topbar-menu-item:hover .bi { color: inherit; }
.topbar-menu-divider {
    height: 1px;
    background-color: #f1f5f9;
    margin: 0;
}
.app-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    background-color: #F1F5F9;
}
[x-cloak] { display: none !important; }

/* List tabs (status switcher above list tables, e.g. registrations Pending/Rejected)
   ---------------------------------------------------------- */
.list-tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}
.list-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    color: #64748b;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.list-tab:hover { color: #0f172a; }
.list-tab.active {
    color: var(--fiata-cyan);
    border-bottom-color: var(--fiata-cyan);
}
.list-tab-count {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0 .45rem;
    background-color: #e2e8f0;
    color: #475569;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    text-align: center;
}
.list-tab.active .list-tab-count {
    background-color: #ecfeff;
    color: var(--fiata-cyan);
}

/* Pills & semantic indicators (new design)
   ---------------------------------------------------------- */
/* Status pill — base shape used for member status, software-provider status, etc. */
.status-pill {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
}
/* Member status variants */
.status-active              { background-color: #d1fae5; color: #047857; }
.status-pending             { background-color: #fef3c7; color: #92400e; }
.status-approved            { background-color: #cffafe; color: #155e75; }
.status-matched             { background-color: #dbeafe; color: #1e40af; }
.status-insurance_validated { background-color: #cffafe; color: #155e75; }
.status-suspended           { background-color: #fee2e2; color: #991b1b; }
.status-deactivated         { background-color: #e2e8f0; color: #475569; }
.status-imported            { background-color: #f3e8ff; color: #6b21a8; }
.status-rejected            { background-color: #fee2e2; color: #991b1b; }
/* Software-provider status variants */
.badge-status-pending_credentials { background-color: #fef3c7; color: #92400e; }
.badge-status-in_development      { background-color: #dbeafe; color: #1e40af; }
.badge-status-production_ready    { background-color: #d1fae5; color: #047857; }
/* User role variants */
.badge-role-super { background-color: #f3e8ff; color: #6b21a8; }
.badge-role-admin { background-color: #dbeafe; color: #1e40af; }
.badge-role-staff { background-color: #e2e8f0; color: #475569; }
/* Registration kind variants (FF / SP) */
.badge-kind {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 500;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.badge-kind-ff { background-color: #cffafe; color: #155e75; }
.badge-kind-sp { background-color: #f3e8ff; color: #6b21a8; }

/* Transaction type pills (credit ledger) */
.tx-pill {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
}
.tx-issuance          { background-color: #d1fae5; color: #047857; }
.tx-amendment         { background-color: #f3e8ff; color: #6b21a8; }
/* Insured variants: same hue as the base type, a shade darker. */
.tx-insured_issuance  { background-color: #6ee7b7; color: #065f46; }
.tx-insured_amendment { background-color: #d8b4fe; color: #581c87; }
.tx-purchase          { background-color: #fef3c7; color: #92400e; }
.tx-admin_adjustment { background-color: #e2e8f0; color: #475569; }
.tx-archive          { background-color: #e2e8f0; color: #475569; }

/* Signed amount (financial sense) */
.amount-pos { color: #047857; font-family: monospace; font-weight: 500; }
.amount-neg { color: #b91c1c; font-family: monospace; font-weight: 500; }

/* Text utilities
   ---------------------------------------------------------- */
.text-faded { color: #94a3b8; }   /* slate-400 — placeholders, em-dashes, muted hints */
.text-hint {
    font-size: .8rem;
    font-weight: 400;
    color: #94a3b8;
}

/* Forms
   ---------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--fiata-cyan);
    box-shadow: 0 0 0 3px rgba(0, 133, 176, .2);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .2);
}

/* Distinguish placeholders from filled-in values: lighter colour + italic so
   users do not mistake hint text (e.g. "INV-2026-...") for a pre-filled value. */
.form-control::placeholder,
.wizard-input::placeholder {
    color: #cbd5e1;        /* slate-300 */
    opacity: 1;            /* override Firefox default opacity */
    font-style: italic;
}

/* Credit balance warning - s3.6
   ---------------------------------------------------------- */
.credit-low {
    color: #d97706;
    font-weight: 600;
}
.credit-negative {
    color: #dc2626;
    font-weight: 600;
}

/* Tom Select — search icon via Bootstrap Icons font */
.ts-control::before {
    font-family: "bootstrap-icons";
    content: "\f52a";
    color: #94a3b8;
    margin-right: .4rem;
    font-size: .78rem;
    line-height: 1;
    pointer-events: none;
}
.ts-input-active .ts-control::before {
    color: var(--fiata-cyan);
}

/* Modal overlay + card (shared by confirm modal, transition modal, matching modal)
   ---------------------------------------------------------- */
.app-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1.5rem;
    backdrop-filter: blur(2px);
}
.app-modal-card {
    background-color: #fff;
    border-radius: 12px;
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    overflow: hidden;
}
.app-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
}
.app-modal-title { margin: 0; font-size: 1rem; font-weight: 600; color: #0f172a; }
.app-modal-subtitle { font-size: .78rem; color: #94a3b8; margin: .15rem 0 0; }
.app-modal-body { padding: 1rem 1.25rem; overflow-y: auto; }
.app-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

/* Global confirmation modal (centered icon variant)
   ---------------------------------------------------------- */
.confirm-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1.5rem;
    backdrop-filter: blur(2px);
}
.confirm-modal-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 1.5rem 1.5rem 1.25rem;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    text-align: center;
}
.confirm-modal-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .85rem;
    font-size: 1.5rem;
}
.confirm-modal-icon.is-danger { background-color: #fee2e2; color: #b91c1c; }
.confirm-modal-icon.is-warning { background-color: #fef3c7; color: #92400e; }
.confirm-modal-title {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
}
.confirm-modal-message {
    margin: 0 0 1.25rem;
    font-size: .875rem;
    color: #64748b;
    line-height: 1.5;
}
.confirm-modal-actions {
    display: flex;
    justify-content: center;
    gap: .65rem;
}
.confirm-modal-actions .btn-pill {
    min-width: 96px;
    justify-content: center;
}

.btn-danger-solid {
    background-color: #dc2626;
    color: #fff;
    border-color: #dc2626;
}
.btn-danger-solid:hover {
    background-color: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

/* Public registration wizard
   ---------------------------------------------------------- */
body.public-page {
    height: auto;
    overflow: auto;
    min-height: 100vh;
    background-color: #ffffff;
}

.wizard-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .wizard-shell {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Left: hero branding */
.wizard-hero {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
    padding: 3rem 0;
}

@media (min-width: 992px) {
    .wizard-hero { display: flex; }
}

.wizard-hero-image {
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: cover;
    display: block;
}

.wizard-hero-footer {
    padding: 0 2.5rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.wizard-hero-brand {
    font-weight: 700;
    color: var(--fiata-cyan);
    letter-spacing: .04em;
    border-left: 3px solid var(--fiata-cyan);
    padding-left: .75rem;
}

.wizard-hero-sub {
    color: #64748b;
    font-size: .95rem;
    line-height: 1.3;
}

/* Right: cyan panel with floating card */
.wizard-panel {
    background-color: #cfe5ec;
    padding: 2rem 1rem 3rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

@media (min-width: 992px) {
    .wizard-panel {
        padding: 3rem 2.5rem;
        align-items: center;
        min-height: 100vh;
    }
}

.wizard-card {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(10, 58, 82, .15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 6rem);
}

.wizard-card-header,
.wizard-steps { flex: 0 0 auto; }

/* Scrollable body: questions area + preview share the remaining height */
.wizard-card > .wizard-questions,
.wizard-card > .wizard-preview,
.wizard-card > .wizard-alert { flex: 0 0 auto; }

.wizard-card-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    position: relative;
    scroll-behavior: smooth;
}

.wizard-card-header {
    background: #3a9cb0;
    color: #fff;
    padding: 1.25rem 1.75rem;
}

.wizard-card-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.wizard-card-meta {
    font-size: .85rem;
    opacity: .9;
    margin-top: .15rem;
}

/* Progress bar inside the card header */
.wizard-progress {
    margin-top: .85rem;
    height: 5px;
    background: rgba(255, 255, 255, .25);
    border-radius: 999px;
    overflow: hidden;
}

.wizard-progress-bar {
    height: 100%;
    background: #fff;
    border-radius: 999px;
    transition: width .35s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 0 8px rgba(255, 255, 255, .6);
}

/* Step indicator */
.wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 1.25rem 1.75rem .5rem;
    flex-wrap: wrap;
}

.wizard-step {
    /* reset the default button look */
    appearance: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-size: .8rem;
    font-weight: 600;
    position: relative;
    transition: background .15s, color .15s, transform .12s;
}

.wizard-step:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.wizard-step:disabled.wizard-step-active,
.wizard-step:disabled.wizard-step-done {
    /* keep done/active circles fully visible even though they are not clickable */
    opacity: 1;
}

.wizard-step:focus-visible {
    outline: 2px solid var(--fiata-cyan);
    outline-offset: 2px;
}

/* "press Enter" hint is misleading when the active question is a textarea
   (Enter inserts a newline). Hide it in that case. */
.wizard-question:has(textarea) .wizard-question-enter {
    display: none;
}

.wizard-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    width: .6rem;
    height: 2px;
    background: #e2e8f0;
    transform: translateY(-50%);
}

.wizard-step-done {
    background: var(--fiata-cyan);
    color: #fff;
}

.wizard-step-active {
    background: #0f2d3a;
    color: #fff;
}

.wizard-step-clickable {
    cursor: pointer;
}

.wizard-step-clickable:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 6px rgba(15, 45, 58, .25);
}

/* Questions */
.wizard-questions {
    padding: 1rem 1.75rem 0;
    /* Stick the active question to the top of the wizard body so the preview
       list's already-answered items can scroll behind it (the user can scroll
       the body up to review them). */
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 2;
}

.wizard-question { display: none; }
.wizard-question-active { display: block; animation: wizard-fade .2s ease-out; }

@keyframes wizard-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wizard-question-meta {
    color: var(--fiata-cyan);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

.wizard-question-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    margin-bottom: .5rem;
}

.wizard-question-help {
    color: #64748b;
    font-size: .9rem;
    margin-bottom: 1.25rem;
}

.wizard-question-body { margin-bottom: 1.25rem; }

.wizard-field + .wizard-field { margin-top: .75rem; }

.wizard-conditional-hidden { display: none; }

/* Conditional questions / step circles hidden when their controller value
   does not match (see wizard.js). Applied to .wizard-question, .wizard-step
   and .wizard-preview-item. */
.wizard-step-hidden { display: none !important; }

.wizard-field-help {
    color: #94a3b8;
    font-size: .8rem;
    margin-top: .3rem;
}

/* Radio groups — Django renders <ul><li><label><input>…</label></li></ul> */
.wizard-question ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.wizard-question ul li { margin: 0; }

.wizard-question ul li label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: .6rem 1.1rem;
    font-size: .95rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    color: var(--fiata-gray);
    background: #fff;
}

.wizard-question ul li label:hover {
    border-color: var(--fiata-cyan);
    background: #f0fafe;
}

.wizard-question ul li input[type="radio"] {
    accent-color: var(--fiata-cyan);
}

.wizard-question ul li label:has(input:checked) {
    border-color: var(--fiata-cyan);
    background: #e6f5fb;
    color: var(--fiata-cyan-dark);
    font-weight: 600;
}

/* Inputs */
.wizard-input {
    width: 100%;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: .75rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--fiata-gray);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.wizard-input:focus {
    outline: none;
    border-color: var(--fiata-cyan);
    box-shadow: 0 0 0 3px rgba(0, 133, 176, .15);
}

.wizard-input-textarea { resize: vertical; min-height: 4.5rem; }

.wizard-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 14px;
    padding-right: 2.5rem;
}

.wizard-select-multiple {
    min-height: 9rem;
    background-image: none;
    padding-right: 1rem;
}

.wizard-input-file {
    width: 100%;
    padding: .5rem;
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
}

/* Actions */
.wizard-question-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: .25rem;
    flex-wrap: wrap;
}

.wizard-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--fiata-cyan);
    color: #fff;
    border: none;
    border-bottom: 3px solid var(--fiata-cyan-border);
    border-radius: 6px;
    padding: .65rem 1.4rem;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: background .12s, transform .05s;
}

.wizard-btn:hover { background: var(--fiata-cyan-dark); }

.wizard-btn:active { transform: translateY(1px); border-bottom-width: 2px; }

.wizard-btn-submit { padding: .75rem 1.75rem; }

.wizard-btn-link {
    background: none;
    border: none;
    color: #64748b;
    font-size: .85rem;
    cursor: pointer;
    padding: .25rem .5rem;
    margin-left: auto;
}

.wizard-btn-link:hover { color: var(--fiata-cyan); }

.wizard-question-enter {
    color: #64748b;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.wizard-question-enter .bi { color: #22c55e; }

/* Preview list */
.wizard-preview {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0 1.75rem 1.75rem;
    border-top: 1px solid #e2e8f0;
}

.wizard-preview-item {
    display: flex;
    gap: .85rem;
    padding: .85rem 0;
    border-bottom: 1px solid #f1f5f9;
    color: #94a3b8;
    transition: opacity .15s;
}

.wizard-preview-item:last-child { border-bottom: none; }

/* Already-answered questions stay in the preview list but are visually muted
   and struck through. By default they're scrolled out of view (above the
   sticky active-question area) — the user can scroll the body up to review
   them. The current question is hidden (the form area renders it instead). */
.wizard-preview-item-done { opacity: .5; }
.wizard-preview-item-done .wizard-preview-title { text-decoration: line-through; }

.wizard-preview-item-current { display: none; }

.wizard-preview-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    background: #e2e8f0;
    color: #64748b;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 600;
    margin-top: .1rem;
}

.wizard-preview-title {
    color: #475569;
    font-weight: 500;
    font-size: .9rem;
}

.wizard-preview-hint {
    color: #94a3b8;
    font-size: .8rem;
    margin-top: .1rem;
}

/* Terms & captcha */
.wizard-terms {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    color: var(--fiata-gray);
    font-size: .9rem;
    cursor: pointer;
}

.wizard-checkbox { margin-top: .25rem; transform: scale(1.15); }

.wizard-captcha { margin-top: 1rem; }

/* Errors */
.wizard-field-error {
    color: #dc2626;
    font-size: .8rem;
    margin-top: .35rem;
}

.wizard-alert {
    margin: 0 1.75rem;
    padding: .75rem 1rem;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #991b1b;
    font-size: .85rem;
}

/* Ping searchable dropdown (inside .app-modal forms) */
.ping-search-wrap { position: relative; }
.ping-dropdown {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 200;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
    margin-top: .15rem;
}
.ping-dropdown-item {
    padding: .5rem .75rem;
    cursor: pointer;
    font-size: .85rem;
    color: #0f172a;
}
.ping-dropdown-item:hover { background-color: #f1f5f9; }
.ping-dropdown-empty {
    padding: .65rem .75rem;
    font-size: .8rem;
    color: #94a3b8;
}

/* Ping detail grid (key-value pairs inside .app-modal) */
.ping-grid { display: flex; flex-direction: column; }
.ping-field {
    display: flex;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: .875rem;
}
.ping-field:last-child { border-bottom: 0; }
.ping-label { flex: 0 0 200px; color: #64748b; font-weight: 500; }
.ping-value { flex: 1; color: #0f172a; }
.ping-value code {
    background-color: #f1f5f9;
    color: #475569;
    padding: .1rem .4rem;
    border-radius: 4px;
    font-size: .78rem;
}

/* Homepage activity section
   ---------------------------------------------------------- */
.activity-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.activity-chart-wrap {
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    height: 240px;
    position: relative;
}
.activity-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}
.activity-table tbody tr { cursor: pointer; }
.activity-table tbody tr:hover { background-color: #f8fafc; }

/* Inline icon actions in detail-page certificate tables
   ---------------------------------------------------------- */
.cert-actions .action-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: .95rem;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
}
.cert-actions .action-btn + .action-btn { margin-left: .6rem; }
.cert-actions .action-btn:hover { opacity: .75; }
.cert-actions .action-verify { color: #047857; }
.cert-actions .action-reject { color: #b91c1c; }

/* Quick-actions bar (member detail + edit pages). Uses display: contents so
   the inner buttons participate in the parent flex layout (.page-header-actions)
   without introducing a wrapping flex item that would group them together. */
.quick-actions-bar { display: contents; }
.quick-action-disabled { opacity: .55; cursor: help; }
.quick-action-disabled:hover { opacity: .7; }