/* PSFST Member Portal — Bootstrap 5 theme layer */
:root {
    --brand: #1f6b45;
    --brand-dark: #123f29;
    --brand-deep: #0b2a1b;
    --brand-light: #3f9a68;
    --brand-soft: #e7f3ec;
    --wheat: #e9c46a;
    --ink: #1c2a22;
    --surface: #f4f6f2;
    --sidebar-w: 270px;
    --bs-body-font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-primary: var(--brand);
    --bs-primary-rgb: 31, 107, 69;
    --bs-link-color: var(--brand);
    --bs-link-hover-color: var(--brand-dark);
    --bs-link-color-rgb: 31, 107, 69;
}

body { background: var(--surface); color: var(--ink); }
.min-w-0 { min-width: 0; }
.text-brand { color: var(--brand) !important; }
.bg-brand { background-color: var(--brand) !important; }
.bg-brand-soft { background: var(--brand-soft); color: var(--brand); }
.link-brand { color: var(--brand); text-decoration: none; font-weight: 600; }
.link-brand:hover { color: var(--brand-dark); }
.text-uppercase-ls { letter-spacing: .08em; text-transform: uppercase; font-size: .7rem; }

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--brand-light);
    box-shadow: 0 0 0 .2rem rgba(31, 107, 69, .18);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

.btn-brand {
    --bs-btn-color: #fff; --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-deep); --bs-btn-active-border-color: var(--brand-deep);
    --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
    font-weight: 600;
}

/* ================= AUTH ================= */
.auth-body {
    min-height: 100vh;
    display: flex; align-items: center;
    background:
        radial-gradient(circle at 15% 20%, rgba(233, 196, 106, .18), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(63, 154, 104, .35), transparent 45%),
        linear-gradient(140deg, var(--brand-deep), var(--brand));
}
.auth-card { background: #fff; border-radius: 1.25rem; box-shadow: 0 30px 60px rgba(0,0,0,.25); overflow: hidden; }
.auth-head { background: var(--brand-dark); color: #fff; text-align: center; padding: 2rem 1.5rem 1.5rem; }
.auth-logo { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; border: 3px solid rgba(255,255,255,.3); margin-bottom: .75rem; }
.auth-tabs { background: var(--brand-soft); border-radius: .75rem; padding: .3rem; }
.auth-tabs .nav-link { color: var(--brand-dark); font-weight: 600; border-radius: .55rem; }
.auth-tabs .nav-link.active { background: var(--brand); color: #fff; }
.input-group-text { background: var(--brand-soft); color: var(--brand); }
.password-meter { height: 5px; }

/* ================= LAYOUT ================= */
.portal-sidebar {
    background: linear-gradient(180deg, var(--brand-deep), var(--brand-dark));
    color: #fff;
}
@media (min-width: 992px) {
    .portal-sidebar {
        position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
        display: flex; flex-direction: column; overflow-y: auto; z-index: 1030;
    }
    .portal-main { margin-left: var(--sidebar-w); }
}
@media (max-width: 991.98px) {
    .portal-sidebar.offcanvas-lg { --bs-offcanvas-width: var(--sidebar-w); --bs-offcanvas-bg: var(--brand-deep); color: #fff; }
}
.sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: 1.25rem 1.25rem 1rem; }
.sidebar-brand img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.brand-title { font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; line-height: 1; }
.brand-sub { font-size: .75rem; opacity: .7; }
.sidebar-user {
    display: flex; gap: .75rem; align-items: center;
    margin: 0 .9rem 1rem; padding: .9rem; border-radius: .9rem;
    background: rgba(255,255,255,.07);
}
.avatar-circle {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wheat); color: var(--brand-deep); font-weight: 800;
}
.avatar-circle.avatar-sm { width: 30px; height: 30px; font-size: .75rem; }
.sidebar-nav { padding: 0 .6rem 1rem; }
.sidebar-link {
    display: flex; align-items: center; gap: .8rem;
    padding: .7rem .9rem; margin-bottom: .15rem; border-radius: .6rem;
    color: rgba(255,255,255,.8); text-decoration: none; font-weight: 500;
    transition: background .2s, color .2s;
}
.sidebar-link i { width: 20px; text-align: center; }
.sidebar-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-link.active { background: #fff; color: var(--brand-dark); font-weight: 700; }
.sidebar-link.logout-link { color: #ffb4a9; }

.portal-main { min-height: 100vh; display: flex; flex-direction: column; }
.portal-topbar {
    position: sticky; top: 0; z-index: 1020;
    display: flex; align-items: center; gap: .75rem;
    padding: .8rem 1.5rem; background: rgba(244,246,242,.9); backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(0,0,0,.05);
}
.portal-content { padding: 1.5rem; flex: 1; }
.portal-footer { padding: 1rem 1.5rem; font-size: .8rem; color: #6c757d; }

/* ================= DASHBOARD ================= */
.welcome-panel {
    position: relative; overflow: hidden;
    padding: 2rem; border-radius: 1.25rem; color: #fff;
    background: linear-gradient(125deg, var(--brand-deep) 0%, var(--brand) 70%, var(--brand-light) 100%);
}
.welcome-panel::after {
    content: ''; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px;
    border-radius: 50%; border: 40px solid rgba(233,196,106,.12); pointer-events: none;
}
.member-card {
    position: relative; z-index: 1;
    padding: 1.4rem; border-radius: 1rem; color: #fff;
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px);
    box-shadow: 0 15px 35px rgba(0,0,0,.2);
    background-color: var(--brand-dark);
}
.member-number { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 1.35rem; letter-spacing: .12em; }

.stat-tile, .panel {
    background: #fff; border-radius: 1rem; border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 4px 18px rgba(20, 50, 35, .05);
}
.stat-tile { display: flex; align-items: center; gap: 1rem; padding: 1.1rem; height: 100%; transition: transform .2s, box-shadow .2s; }
.stat-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(20,50,35,.1); }
.stat-icon { width: 48px; height: 48px; border-radius: .8rem; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.stat-label { font-size: .8rem; color: #6c757d; }
.stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1.2; }

.panel { padding: 1.4rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }

.progress-steps { list-style: none; padding: 0; margin: 0; display: flex; gap: .5rem; counter-reset: s; }
.progress-steps li { flex: 1; text-align: center; position: relative; font-size: .82rem; }
.progress-steps li::before {
    content: ''; position: absolute; top: 18px; left: -50%; width: 100%; height: 3px; background: #e3e8e4; z-index: 0;
}
.progress-steps li:first-child::before { display: none; }
.progress-steps li.done::before { background: var(--brand-light); }
.progress-steps .dot {
    position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #e3e8e4; color: #6c757d; font-weight: 700; margin-bottom: .4rem;
}
.progress-steps li.done .dot { background: var(--brand); color: #fff; }
.progress-steps li.rejected .dot { background: #dc3545; color: #fff; }
.progress-steps .label { display: block; font-weight: 600; }
.progress-steps .date { display: block; color: #6c757d; font-size: .72rem; }
@media (max-width: 575.98px) {
    .progress-steps { flex-direction: column; }
    .progress-steps li { display: flex; align-items: center; gap: .75rem; text-align: left; }
    .progress-steps li::before { display: none; }
    .progress-steps .dot { margin: 0; }
}

.announce-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.activity-row { display: flex; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid #eef1ee; }
.activity-row:last-child { border-bottom: 0; }
.date-chip {
    flex-shrink: 0; width: 58px; text-align: center; border-radius: .7rem; padding: .35rem 0;
    background: var(--brand-soft); color: var(--brand-dark);
}
.date-chip .d { display: block; font-size: 1.2rem; font-weight: 800; line-height: 1; }
.date-chip .m { font-size: .7rem; text-transform: uppercase; }

.ring {
    --pct: 0; width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: conic-gradient(var(--brand) calc(var(--pct) * 1%), #e3e8e4 0);
}
.ring span {
    width: 64px; height: 64px; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.checklist li { padding: .3rem 0; font-size: .88rem; color: #6c757d; }
.checklist li i { width: 22px; color: #cfd6d1; }
.checklist li.ok { color: var(--ink); }
.checklist li.ok i { color: var(--brand); }
.account-dl dt { font-weight: 500; color: #6c757d; }
.doc-list li { display: flex; justify-content: space-between; align-items: center; padding: .45rem 0; border-bottom: 1px dashed #e3e8e4; }
.doc-list li:last-child { border-bottom: 0; }
.help-panel { background: var(--brand-dark); color: #fff; border: 0; }

.empty-state { text-align: center; color: #8a958e; padding: 1.5rem 0; }
.empty-state i { font-size: 1.8rem; margin-bottom: .5rem; }
.empty-state p { margin: 0; font-size: .9rem; }

/* ================= APPLICATION FORM ================= */
.stepper { display: flex; gap: .5rem; overflow-x: auto; }
.stepper-item {
    flex: 1; min-width: 110px; display: flex; align-items: center; gap: .5rem;
    background: transparent; border: 0; padding: .4rem; color: #6c757d; font-weight: 600; font-size: .9rem;
}
.stepper-item .num {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #e3e8e4; font-size: .85rem;
}
.stepper-item.active { color: var(--brand-dark); }
.stepper-item.active .num { background: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-soft); }
.stepper-item.done .num { background: var(--brand-light); color: #fff; }
.form-step { display: none; }
.form-step.active { display: block; animation: stepIn .3s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.choice-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.btn-choice {
    border: 1.5px solid #d7ded9; background: #fff; color: var(--ink);
    border-radius: .6rem; padding: .5rem 1rem; font-weight: 500;
}
.btn-check:checked + .btn-choice { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-check:focus-visible + .btn-choice { box-shadow: 0 0 0 .2rem rgba(31,107,69,.25); }
.group-feedback { display: none; }

.form-table th { font-size: .82rem; color: #5b6660; font-weight: 600; white-space: nowrap; }
.form-table td, .form-table th { vertical-align: middle; }
.form-table input { min-width: 120px; }

.upload-box {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .3rem; text-align: center; height: 100%; min-height: 170px; padding: 1rem;
    border: 2px dashed #cfd8d2; border-radius: 1rem; background: #fbfcfb; cursor: pointer;
    transition: border-color .2s, background .2s;
}
.upload-box:hover { border-color: var(--brand-light); background: var(--brand-soft); }
.upload-box.has-file { border-style: solid; border-color: var(--brand-light); }
.upload-box.invalid { border-color: #dc3545; background: #fff5f5; }
.upload-icon { font-size: 1.6rem; color: var(--brand); }
.upload-preview { width: 70px; height: 70px; object-fit: cover; border-radius: .5rem; }
.upload-preview:not(.d-none) + .upload-icon { display: none; }
.upload-name { word-break: break-all; }
.upload-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.view-field { background: var(--surface); border-radius: .6rem; padding: .6rem .8rem; height: 100%; }
.view-field span { display: block; font-size: .72rem; color: #6c757d; }
.success-burst i { font-size: 3.5rem; color: var(--brand); }

/* Print only the card */
@media print {
    .member-card { color: #000; background: #fff !important; border: 2px solid var(--brand); box-shadow: none; }
}