/* =============================================================================
   LAPS SJK — Portal "fresh" theme over Bootstrap 5 (Tailwind-like, navy/red/gold)
   Loaded after bootstrap.min.css in both portal layouts (auth + dashboard).
   ============================================================================= */
:root {
    --p-navy: #1b306a;
    --p-navy-700: #16285a;
    --p-navy-800: #112149;
    --p-navy-900: #0f1d42;
    --p-navy-soft: #eef2fb;
    --p-red: #cc0000;
    --p-red-soft: #fdecec;
    --p-gold: #f0a91c;
    --p-gold-2: #fadb5f;
    --p-green: #16a34a;
    --p-bg: #eef2f8;
    --p-card: #ffffff;
    --p-border: #e6ebf3;
    --p-border-strong: #d8e0ee;
    --p-text: #16223a;
    --p-text-2: #5b6b86;
    --p-muted: #8a98ad;

    --bs-primary: #1b306a;
    --bs-primary-rgb: 27, 48, 106;
    --bs-link-color: #1b306a;
    --bs-link-color-rgb: 27, 48, 106;
    --bs-link-hover-color: #cc0000;
    --bs-body-color: #16223a;
    --bs-border-color: #e6ebf3;
}

* { font-family: 'Inter', 'Poppins', system-ui, sans-serif; }
body { color: var(--p-text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: var(--p-navy); letter-spacing: -.01em; }
.text-navy { color: var(--p-navy) !important; }
.text-accent { color: var(--p-red) !important; }
a { text-decoration: none; }

/* ---- Buttons ---- */
.btn { border-radius: .7rem; font-weight: 600; transition: transform .12s ease, box-shadow .15s ease, background-color .15s, background-image .15s, color .15s; }
.btn:active { transform: translateY(0); }
.btn-portal-primary, .btn-primary {
    background-image: linear-gradient(135deg, #2a468f, #1b306a);
    border: 0; color: #fff;
    box-shadow: 0 10px 22px -10px rgba(27, 48, 106, .6);
}
.btn-portal-primary:hover, .btn-primary:hover, .btn-portal-primary:focus, .btn-primary:focus {
    background-image: linear-gradient(135deg, #24407f, #142554); color: #fff; transform: translateY(-1px);
}
.btn-danger { background-image: linear-gradient(135deg, #e0231b, #cc0000); border: 0; box-shadow: 0 10px 22px -12px rgba(204, 0, 0, .5); }
.btn-danger:hover { transform: translateY(-1px); }
.btn-success { background-image: linear-gradient(135deg, #1fb255, #16a34a); border: 0; }
.btn-outline-primary { border: 1.5px solid var(--p-navy); color: var(--p-navy); }
.btn-outline-primary:hover { background: var(--p-navy); border-color: var(--p-navy); }
.btn-outline-danger { border: 1.5px solid var(--p-red); color: var(--p-red); }
.btn-outline-danger:hover { background: var(--p-red); border-color: var(--p-red); color: #fff; }
.btn-outline-secondary { border-radius: .7rem; }
.btn-light { background: #eef2f8; border: 0; color: var(--p-navy); }
.btn-sm { border-radius: .55rem; }
.btn-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }

/* ---- Cards ---- */
.card, .portal-card {
    border: 1px solid var(--p-border) !important;
    border-radius: 1rem !important;
    box-shadow: 0 1px 3px rgba(16, 32, 80, .04), 0 18px 40px -28px rgba(16, 32, 80, .28) !important;
    background: var(--p-card);
}
.card-header { background: #fff !important; border-bottom: 1px solid #eef1f6 !important; border-radius: 1rem 1rem 0 0 !important; padding: 1rem 1.25rem; }
.card-header h6, .card-header h5 { font-weight: 700; }
.portal-card.card-hover { transition: transform .15s ease, box-shadow .2s ease; }
.portal-card.card-hover:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -26px rgba(16, 32, 80, .34) !important; }

/* ---- Stat card (dashboard KPI) ---- */
.p-stat { position: relative; overflow: hidden; }
.p-stat .p-stat-ico { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.p-stat .p-stat-val { font-weight: 800; color: var(--p-navy); line-height: 1.05; letter-spacing: -.02em; }
.p-stat .p-stat-lbl { font-size: .82rem; color: var(--p-muted); font-weight: 500; }
.p-ico-navy { background: rgba(27, 48, 106, .1); color: var(--p-navy); }
.p-ico-red { background: rgba(204, 0, 0, .1); color: var(--p-red); }
.p-ico-gold { background: rgba(240, 169, 28, .14); color: #c98509; }
.p-ico-green { background: rgba(22, 163, 74, .12); color: var(--p-green); }

/* ---- Forms ---- */
.form-label { font-weight: 600; color: var(--p-text-2); font-size: .9rem; margin-bottom: .4rem; }
.form-control, .form-select {
    border-radius: .7rem; border: 1.5px solid var(--p-border-strong); padding: .62rem .9rem; color: var(--p-text);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-control::placeholder { color: var(--p-muted); }
.form-control:focus, .form-select:focus { border-color: #3a55a8; box-shadow: 0 0 0 .22rem rgba(27, 48, 106, .14); }
.form-control.is-invalid { border-color: var(--p-red); }
.input-group .form-control { border-radius: .7rem; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > :not(:first-child):not(.dropdown-menu) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-text { border-radius: .7rem; border: 1.5px solid var(--p-border-strong); background: #f4f6fb; color: var(--p-text-2); }
/* leading-icon input */
.p-input-ico { position: relative; }
.p-input-ico > .p-ico { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--p-muted); z-index: 3; pointer-events: none; }
.p-input-ico .form-control { padding-left: 2.7rem; }
.p-input-ico .p-eye { position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); color: var(--p-muted); cursor: pointer; z-index: 3; }
.p-input-ico .p-eye:hover { color: var(--p-navy); }
.form-check-input:checked { background-color: var(--p-navy); border-color: var(--p-navy); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(27, 48, 106, .15); }

/* ---- Badges ---- */
.badge { border-radius: .5rem; font-weight: 600; padding: .42em .65em; }
.badge.bg-primary { background: var(--p-navy) !important; }
.badge.bg-info { background: #17a2b8 !important; }

/* ---- Alerts ---- */
.alert { border: 0; border-left: 4px solid transparent; border-radius: .8rem; }
.alert-success { background: #e9f9ef; color: #15803d; border-left-color: var(--p-green); }
.alert-danger { background: var(--p-red-soft); color: #a30b0b; border-left-color: var(--p-red); }
.alert-info { background: #e9f1fb; color: #1b4f9c; border-left-color: #2563eb; }
.alert-warning { background: #fff8e6; color: #946206; border-left-color: var(--p-gold); }

/* ---- Tables ---- */
.table { color: var(--p-text); }
.table thead th { text-transform: uppercase; font-size: .74rem; letter-spacing: .04em; color: var(--p-muted); font-weight: 700; border-bottom: 1px solid var(--p-border); }
.table.table-borderless td { padding-top: .55rem; padding-bottom: .55rem; }
.table-hover tbody tr:hover { background: #f7f9fd; }

/* ---- select2 (bootstrap-agnostic minimal polish) ---- */
.select2-container--default .select2-selection--single { height: auto; border-radius: .7rem; border: 1.5px solid var(--p-border-strong); padding: .35rem .5rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }
.select2-dropdown { border-radius: .7rem; border: 1px solid var(--p-border-strong); box-shadow: 0 18px 40px -18px rgba(16, 32, 80, .3); overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--p-navy); }

/* ---- SweetAlert2 ---- */
.swal2-popup { border-radius: 1.1rem; }
.swal2-styled.swal2-confirm { background: var(--p-navy) !important; border-radius: .7rem !important; }

/* ---- Scrollbar (subtle) ---- */
.portal-sidebar::-webkit-scrollbar { width: 6px; }
.portal-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 3px; }

/* =============================================================================
   AUTH (login / register / forgot / reset / enrollment / verify)
   ============================================================================= */
body.portal-auth {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(50rem 40rem at 12% -5%, rgba(27, 48, 106, .12), transparent 55%),
        radial-gradient(44rem 34rem at 102% 105%, rgba(240, 169, 28, .09), transparent 55%),
        #eef2f8;
}
.portal-card { overflow: hidden; }
.portal-brand-panel {
    background: linear-gradient(150deg, #22397a 0%, #1b306a 48%, #0f1d42 100%) !important;
    color: #fff; position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 46px 32px; min-height: 480px;
}
.portal-brand-panel::before { content: ""; position: absolute; top: -70px; right: -55px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(240, 169, 28, .42), transparent 70%); }
.portal-brand-panel::after { content: ""; position: absolute; bottom: -100px; left: -70px; width: 280px; height: 280px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); }
.portal-brand-panel > * { position: relative; z-index: 1; }
.portal-brand-logo { max-width: 148px; margin-bottom: 4px; }
.portal-brand-panel h3 { color: #fff; font-weight: 700; font-size: 1.28rem; text-align: center; margin: 20px 0 6px; }
.portal-brand-panel p { color: rgba(255, 255, 255, .82); text-align: center; font-size: .9rem; margin: 0; }
.portal-brand-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .72rem; font-weight: 600; letter-spacing: .4px; }
.portal-brand-dot { width: 7px; height: 7px; border-radius: 50%; background: #5ef0b0; box-shadow: 0 0 0 3px rgba(94, 240, 176, .2); }
.portal-form-panel { background: #fff; padding: 46px 42px; display: flex; flex-direction: column; justify-content: center; }
.portal-form-panel h4 { color: var(--p-navy); font-weight: 700; margin-bottom: 4px; }
.portal-form-sub { color: var(--p-muted); font-size: .9rem; margin-bottom: 24px; }
.link-accent { color: var(--p-red); font-weight: 600; }
.link-accent:hover { color: #990000; }
.captcha-box { background: linear-gradient(135deg, #dfe6f2, #eef2f9); border: 1.5px solid var(--p-border-strong) !important; border-radius: .7rem !important; display: flex; align-items: center; justify-content: center; min-width: 120px; overflow: hidden; padding: 0 !important; }
.captcha-box img { max-height: 40px; }

/* =============================================================================
   DASHBOARD chrome (sidebar + topbar)
   ============================================================================= */
body.portal-dash {
    background:
        radial-gradient(48rem 38rem at 100% -5%, rgba(27, 48, 106, .06), transparent 55%),
        #eef2f8;
}
.portal-sidebar { background: linear-gradient(180deg, #21396f 0%, #15275a 52%, #0d1a3c 100%) !important; box-shadow: 8px 0 40px -28px rgba(0, 0, 0, .6); }
.portal-sidebar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #f0a91c, #fadb5f, #f0a91c); z-index: 2; }
.portal-sidebar .sidebar-brand { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.portal-sidebar .sidebar-menu { padding: 12px 0; }
.portal-sidebar .sidebar-menu li a { border-radius: .7rem; margin: 2px 12px; padding: 11px 16px; color: rgba(255, 255, 255, .72); }
.portal-sidebar .sidebar-menu li a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.portal-sidebar .sidebar-menu li.active a { background: linear-gradient(135deg, rgba(47, 90, 214, .5), rgba(204, 0, 0, .26)) !important; color: #fff; box-shadow: inset 3px 0 0 #fadb5f; border-left: 0 !important; }
.portal-topbar { border-top: 0 !important; box-shadow: 0 1px 0 rgba(16, 32, 80, .06); border-bottom: 1px solid #eef1f6; position: sticky; top: 0; z-index: 50; }
.portal-topbar .user-name { color: var(--p-navy) !important; }
.portal-avatar { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #2a468f, #1b306a); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.dropdown-menu { border-radius: .8rem; border: 1px solid #eef1f6; box-shadow: 0 18px 44px -18px rgba(16, 32, 80, .3); padding: .4rem; }
.dropdown-item { border-radius: .55rem; }
.dropdown-item:hover { background: var(--p-navy-soft); color: var(--p-navy); }

/* page heading */
.portal-page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.portal-page-head .ph-ico { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, #2a468f, #1b306a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 10px 22px -10px rgba(27, 48, 106, .6); }
.portal-page-head h4 { margin: 0; font-weight: 700; color: var(--p-navy); }
.portal-page-head .ph-sub { color: var(--p-muted); font-size: .85rem; }

/* ---- Selectable option cards (radio) ---- */
.p-choice { display: flex; gap: 12px; flex-wrap: wrap; }
.p-choice .p-choice-item { flex: 1 1 0; min-width: 140px; position: relative; }
.p-choice input { position: absolute; opacity: 0; pointer-events: none; }
.p-choice label { display: flex; align-items: center; gap: 11px; width: 100%; height: 100%; cursor: pointer; border: 1.5px solid var(--p-border-strong); border-radius: .85rem; padding: 12px 14px; margin: 0; transition: all .15s; }
.p-choice label:hover { border-color: #b9c5dc; }
.p-choice input:checked + label { border-color: var(--p-navy); background: var(--p-navy-soft); box-shadow: 0 0 0 .18rem rgba(27, 48, 106, .12); }
.p-choice input:focus-visible + label { box-shadow: 0 0 0 .22rem rgba(27, 48, 106, .25); }
.p-choice .pc-ico { width: 36px; height: 36px; border-radius: 11px; background: rgba(27, 48, 106, .1); color: var(--p-navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.p-choice input:checked + label .pc-ico { background: linear-gradient(135deg, #2a468f, #1b306a); color: #fff; }
.p-choice .pc-t { font-weight: 600; font-size: .9rem; color: var(--p-text); line-height: 1.2; }

/* ---- Verify-email icon ---- */
.p-verify-ico { width: 84px; height: 84px; border-radius: 50%; background: var(--p-navy-soft); color: var(--p-navy); display: inline-flex; align-items: center; justify-content: center; font-size: 34px; box-shadow: 0 12px 28px -12px rgba(27, 48, 106, .45); }

/* ---- Enrollment status ---- */
.portal-enroll-status { margin-top: 24px; width: 100%; max-width: 240px; padding: 18px; border-radius: 16px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .15); text-align: center; font-size: 13px; }
.portal-enroll-status.is-reject { background: rgba(204, 0, 0, .24); border-color: rgba(255, 130, 130, .34); }
.portal-enroll-status i { font-size: 26px; margin-bottom: 8px; display: block; color: #fadb5f; }
.portal-enroll-status.is-reject i { color: #ff9b9b; }
.portal-enroll-status p { margin: 0; color: #fff; font-weight: 600; }
.p-state-ico { width: 84px; height: 84px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 32px; }
.p-state-ico.is-wait { background: #fff8e6; color: #b8860b; }

/* =============================================================================
   DASHBOARD layout structure
   ============================================================================= */
.portal-sidebar { position: fixed; top: 0; left: 0; width: 262px; height: 100vh; z-index: 1000; overflow-y: auto; color: #fff; }
.portal-sidebar .sidebar-brand { padding: 24px 20px 20px; text-align: center; }
.portal-sidebar .sidebar-brand img { max-width: 118px; margin-bottom: 10px; }
.portal-sidebar .sidebar-brand h5 { color: #fff; font-weight: 700; font-size: 15px; margin: 0; }
.portal-sidebar .sidebar-brand small { color: rgba(255, 255, 255, .6); font-size: 12px; }
.portal-sidebar .sidebar-menu { list-style: none; margin: 0; padding: 10px 0 20px; }
.portal-sidebar .sidebar-menu li a { display: flex; align-items: center; text-decoration: none; font-size: 14px; font-weight: 500; }
.portal-sidebar .sidebar-menu li a i { width: 22px; margin-right: 12px; text-align: center; font-size: 15px; }
.portal-sidebar .sidebar-heading { color: rgba(255, 255, 255, .42); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 16px 28px 6px; }
.portal-main { margin-left: 262px; min-height: 100vh; display: flex; flex-direction: column; }
.portal-topbar { background: #fff; height: 68px; display: flex; align-items: center; justify-content: flex-end; padding: 0 28px; gap: 14px; }
.portal-topbar .user-info { display: flex; align-items: center; gap: 12px; }
.portal-topbar .user-name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.portal-topbar .user-type { font-size: 12px; color: var(--p-muted); }
.portal-content { padding: 28px; flex: 1; }
.portal-sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
    .portal-sidebar { transform: translateX(-100%); transition: transform .3s ease; }
    .portal-sidebar.show { transform: translateX(0); }
    .portal-main { margin-left: 0; }
    .portal-topbar { justify-content: space-between; }
    .portal-sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 999; }
}

/* ---- Pagination ---- */
.pagination { gap: 4px; }
.page-link { border-radius: .55rem !important; border: 1px solid var(--p-border); color: var(--p-text-2); margin: 0; }
.page-link:hover { background: var(--p-navy-soft); color: var(--p-navy); }
.page-item.active .page-link { background: var(--p-navy); border-color: var(--p-navy); }
.page-item.disabled .page-link { color: #b6c0ce; }

/* ---- Competency score ring ---- */
.p-score-ring { width: 104px; height: 104px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: conic-gradient(#f0a91c, #fadb5f, #f0a91c); padding: 5px; }
.p-score-ring > span { width: 100%; height: 100%; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #c98509; }

/* ---- Nav tabs (profile) ---- */
.nav-tabs { border-bottom: 1px solid var(--p-border); padding: 0 .5rem; }
.nav-tabs .nav-link { border: 0; border-bottom: 2.5px solid transparent; color: var(--p-text-2); font-weight: 600; padding: 14px 16px; border-radius: 0; }
.nav-tabs .nav-link:hover { color: var(--p-navy); border-bottom-color: #c7d2e8; }
.nav-tabs .nav-link.active { color: var(--p-navy); background: transparent; border-bottom-color: var(--p-navy); }
.nav-tabs .nav-link i { color: inherit; }

/* =============================================================================
   LOGIN — design variants (?v=1|2|3) + switcher
   ============================================================================= */
.p-alert-close { background: transparent; border: 0; color: inherit; opacity: .55; cursor: pointer; padding: 0 4px; font-size: .95rem; line-height: 1; }
.p-alert-close:hover { opacity: 1; }

.p-login-switch { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1100; display: flex; align-items: center; gap: 6px; padding: 6px 9px; background: rgba(13, 21, 37, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .55); }
.p-login-switch .lbl { color: rgba(255, 255, 255, .78); font-size: .72rem; font-weight: 700; padding: 0 5px; }
.p-login-switch a { width: 29px; height: 29px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .82rem; text-decoration: none; background: rgba(255, 255, 255, .13); transition: all .15s; }
.p-login-switch a:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.p-login-switch a.active { background: linear-gradient(135deg, #fadb5f, #f0a91c); color: #0f1d42; }

/* Variant 2 — centered glass on immersive gradient */
.p-auth-v2 { position: fixed; inset: 0; z-index: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 24px;
    background: radial-gradient(50rem 40rem at 12% 0%, #22397a, transparent 55%), radial-gradient(46rem 36rem at 100% 100%, #0c1c4a, transparent 55%), linear-gradient(150deg, #15265f, #0d1a3c); }
.p-auth-v2 .v2-blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.p-auth-v2 .v2-blob.g { width: 30rem; height: 30rem; top: -8rem; right: -6rem; background: radial-gradient(circle, rgba(240, 169, 28, .4), transparent 70%); }
.p-auth-v2 .v2-blob.r { width: 26rem; height: 26rem; bottom: -10rem; left: -7rem; background: radial-gradient(circle, rgba(204, 0, 0, .26), transparent 70%); }
.p-auth-v2 .v2-card { position: relative; z-index: 2; width: 100%; max-width: 432px; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .6); border-radius: 22px; box-shadow: 0 44px 100px -34px rgba(0, 0, 0, .6); padding: 40px 38px; }
.p-auth-v2 .v2-logo { display: block; max-width: 132px; margin: 0 auto 14px; }

/* Variant 3 — full split (form left / brand right) */
.p-auth-v3 { position: fixed; inset: 0; z-index: 0; display: grid; grid-template-columns: 1fr 1fr; }
.p-auth-v3 .v3-form { background: #fff; display: flex; align-items: center; justify-content: center; padding: 40px; overflow: auto; }
.p-auth-v3 .v3-form-inner { width: 100%; max-width: 400px; }
.p-auth-v3 .v3-brand { position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 56px;
    background: linear-gradient(150deg, #22397a 0%, #1b306a 48%, #0f1d42 100%); }
.p-auth-v3 .v3-brand::before { content: ""; position: absolute; top: -80px; right: -60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(240, 169, 28, .4), transparent 70%); }
.p-auth-v3 .v3-brand::after { content: ""; position: absolute; bottom: -120px; left: -80px; width: 360px; height: 360px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); }
.p-auth-v3 .v3-brand > * { position: relative; z-index: 1; }
.p-auth-v3 .v3-brand h2 { color: #fff; font-weight: 800; font-size: 1.9rem; line-height: 1.2; margin: 18px 0 12px; }
.p-auth-v3 .v3-feat { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 14px; }
.p-auth-v3 .v3-feat li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.p-auth-v3 .v3-feat li i { width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .12); color: #fadb5f; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media (max-width: 991.98px) { .p-auth-v3 { grid-template-columns: 1fr; } .p-auth-v3 .v3-brand { display: none; } }

/* v3 (override): glass form card on a soft gradient (more modern) */
.p-auth-v3 .v3-form {
    background:
        radial-gradient(40rem 32rem at 0% -5%, rgba(27, 48, 106, .13), transparent 60%),
        radial-gradient(36rem 28rem at 100% 105%, rgba(240, 169, 28, .11), transparent 60%),
        #e9eef7 !important;
}
.p-auth-v3 .v3-glass {
    width: 100%; max-width: 420px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(22px) saturate(165%); backdrop-filter: blur(22px) saturate(165%);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 22px;
    box-shadow: 0 30px 70px -30px rgba(16, 32, 80, .32), inset 0 1px 0 rgba(255, 255, 255, .6);
    padding: 40px 38px;
}

/* v3: artistic batik-kawung pattern behind the glass form (soft, modern) */
.p-auth-v3 .v3-form {
    background-color: #eef2f9 !important;
    background-image:
        url("../images/batik-kawung.svg"),
        radial-gradient(40rem 32rem at 0% -5%, rgba(27, 48, 106, .12), transparent 60%),
        radial-gradient(36rem 28rem at 100% 105%, rgba(240, 169, 28, .12), transparent 60%) !important;
    background-repeat: repeat, no-repeat, no-repeat !important;
    background-size: 78px 78px, auto, auto !important;
}

/* v3 — selectable soft patterns (?bg=) behind the glass form */
.p-auth-v3 .v3-form.pat-none,
.p-auth-v3 .v3-form.pat-kawung,
.p-auth-v3 .v3-form.pat-parang,
.p-auth-v3 .v3-form.pat-dots,
.p-auth-v3 .v3-form.pat-tri {
    background-color: #eef2f9 !important;
    background-repeat: repeat, no-repeat, no-repeat !important;
}
.p-auth-v3 .v3-form.pat-none { background-image:
    radial-gradient(40rem 32rem at 0% -5%, rgba(27,48,106,.12), transparent 60%),
    radial-gradient(36rem 28rem at 100% 105%, rgba(240,169,28,.12), transparent 60%) !important;
    background-repeat: no-repeat, no-repeat !important; }
.p-auth-v3 .v3-form.pat-kawung { background-image:
    url("../images/pat-kawung.svg"),
    radial-gradient(40rem 32rem at 0% -5%, rgba(27,48,106,.12), transparent 60%),
    radial-gradient(36rem 28rem at 100% 105%, rgba(240,169,28,.12), transparent 60%) !important;
    background-size: 84px 84px, auto, auto !important; }
.p-auth-v3 .v3-form.pat-parang { background-image:
    url("../images/pat-parang.svg"),
    radial-gradient(40rem 32rem at 0% -5%, rgba(27,48,106,.12), transparent 60%),
    radial-gradient(36rem 28rem at 100% 105%, rgba(240,169,28,.12), transparent 60%) !important;
    background-size: 48px 48px, auto, auto !important; }
.p-auth-v3 .v3-form.pat-dots { background-image:
    url("../images/pat-dots.svg"),
    radial-gradient(40rem 32rem at 0% -5%, rgba(27,48,106,.12), transparent 60%),
    radial-gradient(36rem 28rem at 100% 105%, rgba(240,169,28,.12), transparent 60%) !important;
    background-size: 28px 28px, auto, auto !important; }
.p-auth-v3 .v3-form.pat-tri { background-image:
    url("../images/pat-tri.svg"),
    radial-gradient(40rem 32rem at 0% -5%, rgba(27,48,106,.12), transparent 60%),
    radial-gradient(36rem 28rem at 100% 105%, rgba(240,169,28,.12), transparent 60%) !important;
    background-size: 56px 48px, auto, auto !important; }

/* pattern switcher (above the variant switcher) */
.p-pat-switch { position: fixed; left: 50%; bottom: 62px; transform: translateX(-50%); z-index: 1100; display: flex; align-items: center; gap: 4px; padding: 5px 8px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid #e1e7f0; border-radius: 999px; box-shadow: 0 12px 30px -12px rgba(16,32,80,.3); }
.p-pat-switch .lbl { color: var(--p-muted); font-size: .72rem; font-weight: 700; padding: 0 4px; }
.p-pat-switch a { padding: 4px 11px; border-radius: 999px; font-size: .73rem; font-weight: 600; color: var(--p-text-2); text-decoration: none; }
.p-pat-switch a:hover { background: var(--p-navy-soft); color: var(--p-navy); }
.p-pat-switch a.active { background: var(--p-navy); color: #fff; }

/* v3 form: column flex + auto-margin so tall forms (register/enrollment) scroll from top, not clipped */
.p-auth-v3 .v3-form { flex-direction: column; }
.p-auth-v3 .v3-glass { margin-block: auto; }

/* Turnstile: symmetric (flexible fills width; centred fallback for normal size) */
.cf-turnstile { display: flex; justify-content: center; min-height: 65px; }

/* flash alert refinement (icon aligns to first line, comfortable spacing) */
.alert { padding: 13px 16px; line-height: 1.45; }
.alert i { font-size: 1rem; }
.alert .p-alert-close i { font-size: .95rem; }

/* =============================================================================
   BS5 utility polyfills — this stisla build is Bootstrap v4.1.3 (no me/ms/ps/pe/gap)
   ============================================================================= */
.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-auto{margin-right:auto!important}
.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-auto{margin-left:auto!important}
.ps-1{padding-left:.25rem!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}
.pe-1{padding-right:.25rem!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}
.text-start{text-align:left!important}.text-end{text-align:right!important}
.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}.gap-5{gap:3rem!important}
.fw-bold{font-weight:700!important}.fw-bolder{font-weight:800!important}.fw-semibold{font-weight:600!important}.fw-medium{font-weight:500!important}.fw-normal{font-weight:400!important}
/* badge colour utilities readable on BS4 (bg-* utilities) */
.badge.bg-primary,.badge.bg-success,.badge.bg-info,.badge.bg-danger,.badge.bg-secondary,.badge.bg-warning{color:#fff}
.badge.bg-warning{color:#3a2c00}
.fs-1{font-size:2.5rem!important}.fs-2{font-size:2rem!important}.fs-3{font-size:1.75rem!important}.fs-4{font-size:1.5rem!important}.fs-5{font-size:1.25rem!important}.fs-6{font-size:1rem!important}
/* form-select arrow (BS4 has no .form-select) */
.form-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235b6b86' 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.4rem}

/* =============================================================================
   MODERN CLEAN REFRESH — "Trust & Authority": restrained, subtle, no AI gradients
   (overrides earlier heavier styles; loaded last so it wins)
   ============================================================================= */
:root{ --ink:#0f172a; --ink-2:#475569; --ink-3:#94a3b8; --line:#e9ecf3; --line-2:#eef1f6; --surface:#f6f7f9; }

body.portal-dash{ background:var(--surface)!important; }

/* Cards: hairline border + minimal shadow (not floaty) */
.card,.portal-card{ border:1px solid var(--line)!important; border-radius:14px!important; box-shadow:0 1px 2px rgba(16,24,40,.04)!important; }
.card-header{ background:#fff!important; border-bottom:1px solid var(--line-2)!important; padding:1rem 1.25rem!important; }
.card-header h6,.card-header h5{ color:var(--ink)!important; font-weight:650; }
.portal-card.card-hover:hover{ transform:none; box-shadow:0 4px 14px -6px rgba(16,24,40,.12)!important; }

/* Headings calmer */
h1,h2,h3,h4,h5,h6{ color:var(--ink); }
.text-navy{ color:var(--ink)!important; }

/* Page head: lighter icon */
.portal-page-head{ margin-bottom:1.75rem; }
.portal-page-head h4{ font-weight:700; font-size:1.3rem; }
.portal-page-head .ph-sub{ color:var(--ink-3); }
.portal-page-head .ph-ico{ width:42px; height:42px; border-radius:12px; font-size:18px; background:#eef2fb!important; color:var(--p-navy)!important; box-shadow:none!important; }

/* Stat cards: restrained — value in ink (not loud), soft tinted icon */
.p-stat .card-body{ padding:1.15rem 1.25rem!important; }
.p-stat .p-stat-ico{ width:46px; height:46px; border-radius:12px; font-size:19px; }
.p-stat .p-stat-val{ color:var(--ink)!important; font-weight:700!important; font-size:1.5rem!important; letter-spacing:-.01em; }
.p-stat .p-stat-lbl{ color:var(--ink-3); font-size:.8rem; }
.p-ico-navy{ background:#eef2fb; color:#274b8e; }
.p-ico-red{ background:#fdecec; color:#cc0000; }
.p-ico-gold{ background:#fef6e6; color:#c98509; }
.p-ico-green{ background:#e9f7ef; color:#15803d; }

/* Sidebar: clean navy, NO gradient on active item (gold accent only) */
.portal-sidebar{ background:linear-gradient(180deg,#1b3568 0%,#142a55 100%)!important; box-shadow:none; }
.portal-sidebar .sidebar-brand{ border-bottom:1px solid rgba(255,255,255,.07); }
.portal-sidebar .sidebar-menu li a{ color:rgba(255,255,255,.64); border-radius:10px; margin:2px 14px; padding:10px 14px; transition:background .15s,color .15s; }
.portal-sidebar .sidebar-menu li a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.portal-sidebar .sidebar-menu li.active a{ background:rgba(255,255,255,.11)!important; color:#fff; box-shadow:inset 3px 0 0 #f0a91c!important; }
.portal-sidebar .sidebar-menu li a i{ color:rgba(255,255,255,.8); }
.portal-sidebar .sidebar-menu li.active a i{ color:#fadb5f; }
.portal-sidebar .sidebar-heading{ color:rgba(255,255,255,.36); font-size:10.5px; letter-spacing:.1em; padding:18px 28px 6px; }
.portal-sidebar::before{ opacity:.7; }

/* Topbar refined */
.portal-topbar{ border-bottom:1px solid var(--line)!important; box-shadow:none; }
.portal-topbar .user-name{ color:var(--ink)!important; }
.portal-topbar .user-type{ color:var(--ink-3); }
.portal-avatar{ border-radius:11px; background:linear-gradient(135deg,#274b8e,#1b306a); }

/* Welcome-card avatar (clean) */
.p-avatar-lg{ width:60px; height:60px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#274b8e,#1b306a); color:#fff; font-size:23px; flex-shrink:0; }

/* Info rows: muted labels, clean values */
.table.table-borderless td{ padding:.55rem 0!important; border:0; vertical-align:top; }
.table.table-borderless td.text-muted{ color:var(--ink-3)!important; font-weight:500!important; }
.table.table-borderless td:not(.text-muted){ color:var(--ink); }

/* Badges: smaller, calmer */
.badge{ font-weight:600; font-size:.72rem; padding:.42em .62em; border-radius:7px; }

/* dropdown / select polish stays */
.dropdown-menu{ border:1px solid var(--line)!important; box-shadow:0 12px 30px -12px rgba(16,24,40,.18)!important; }

/* =============================================================================
   CLEAN v2 — Inter, lighter/smaller type, compact cards, soft badges, de-template
   ============================================================================= */
body.portal-dash, body.portal-auth { letter-spacing: -.006em; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-weight:600!important; letter-spacing:-.015em; }
.fw-bold{ font-weight:600!important; }.fw-bolder{ font-weight:700!important; }

/* page head: drop icon box -> clean title */
.portal-page-head .ph-ico{ display:none!important; }
.portal-page-head{ margin-bottom:1.6rem; }
.portal-page-head h4{ font-size:1.25rem!important; font-weight:600!important; color:var(--ink); }
.portal-page-head .ph-sub{ font-size:.85rem; color:var(--ink-3); }

/* cards flatter/tighter */
.card,.portal-card{ border-radius:13px!important; }
.card-body{ padding:1.25rem 1.4rem; }
.card-header{ padding:.95rem 1.4rem!important; }
.card-header h6{ font-weight:600!important; font-size:.9rem!important; }
.card-header h6 i{ color:var(--ink-3)!important; font-size:.95rem; }

/* stat cards compact */
.p-stat .card-body{ padding:1.05rem 1.2rem!important; }
.p-stat .p-stat-ico{ width:42px!important; height:42px!important; border-radius:11px!important; font-size:16px!important; }
.p-stat .p-stat-val{ font-size:1.3rem!important; font-weight:600!important; }
.p-stat .p-stat-val .fs-6{ font-size:.82rem!important; font-weight:500; color:var(--ink-3); }
.p-stat .p-stat-lbl{ font-size:.78rem; font-weight:400; }

/* welcome card */
.p-avatar-lg{ width:52px!important; height:52px!important; font-size:20px!important; border-radius:13px!important; }
.card-body h5{ font-weight:600!important; font-size:1.02rem!important; }

/* badges: soft (not solid loud) */
.badge{ font-size:.7rem!important; font-weight:500!important; padding:.36em .6em!important; border-radius:6px!important; }
.badge.bg-info{ background:#e6f4f7!important; color:#0b7285!important; }
.badge.bg-success{ background:#e9f7ef!important; color:#15803d!important; }
.badge.bg-primary{ background:#eef2fb!important; color:#274b8e!important; }
.badge.bg-secondary{ background:#eef0f4!important; color:#475569!important; }
.badge.bg-warning{ background:#fdf3e3!important; color:#b06f06!important; }
.badge.bg-danger{ background:#fdecec!important; color:#c0392b!important; }

/* sidebar lighter */
.portal-sidebar .sidebar-brand h5{ font-weight:600!important; font-size:14px; }
.portal-sidebar .sidebar-menu li a{ font-weight:500; font-size:13.5px; }
.portal-sidebar .sidebar-heading{ font-weight:600; }
.portal-topbar .user-name{ font-weight:600!important; }

/* info rows lighter */
.table.table-borderless{ font-size:13.5px!important; }
.table.table-borderless td{ padding:.5rem 0!important; }
.table.table-borderless td.text-muted{ font-weight:500!important; color:var(--ink-3)!important; }
.table.table-borderless td:not(.text-muted){ color:#1e293b; font-weight:400; }

/* =============================================================================
   "Postiler"-style — LIGHT sidebar, airy, solid navy active (corporate colours)
   ============================================================================= */
body.portal-dash{ background:#f5f6f9!important; }

/* light sidebar */
.portal-sidebar{ background:#ffffff!important; border-right:1px solid #edf0f5; box-shadow:none!important; }
.portal-sidebar::before{ display:none!important; }
.portal-sidebar .sidebar-brand{ border-bottom:1px solid #f0f2f6; }
.portal-sidebar .sidebar-brand h5{ color:#0f172a!important; }
.portal-sidebar .sidebar-brand small{ color:#9aa5b5!important; }
.portal-sidebar .sidebar-heading{ color:#9aa5b5!important; font-weight:600; }
.portal-sidebar .sidebar-menu li a{ color:#5b6675!important; font-weight:500; }
.portal-sidebar .sidebar-menu li a i{ color:#9aa5b5!important; }
.portal-sidebar .sidebar-menu li a:hover{ background:#f2f5fb!important; color:#1b306a!important; }
.portal-sidebar .sidebar-menu li a:hover i{ color:#1b306a!important; }
.portal-sidebar .sidebar-menu li.active a{ background:#1b306a!important; color:#fff!important; box-shadow:0 8px 18px -8px rgba(27,48,106,.5)!important; }
.portal-sidebar .sidebar-menu li.active a i{ color:#fff!important; }
.portal-sidebar::-webkit-scrollbar-thumb{ background:rgba(15,23,42,.1); }

/* topbar + cards: clean, airy, hairline */
.portal-topbar{ background:#fff!important; border-bottom:1px solid #edf0f5!important; box-shadow:none; }
.card,.portal-card{ border:1px solid #edf0f5!important; box-shadow:0 1px 2px rgba(16,24,40,.03)!important; border-radius:14px!important; }
.card-header{ border-bottom:1px solid #f1f3f7!important; }

/* =============================================================================
   Sidebar footer (help card) + tint, and 3-section topbar (title / search / actions)
   ============================================================================= */
.portal-sidebar{ background:#f7f8fc!important; display:flex; flex-direction:column; }
.portal-sidebar .sidebar-menu{ flex:1 0 auto; }
.sidebar-foot{ margin-top:auto; padding:14px; }
.sidebar-help{ background:linear-gradient(160deg,#22386f 0%,#15275a 100%); color:#fff; border-radius:14px; padding:16px 15px; text-align:center; box-shadow:0 12px 24px -14px rgba(27,48,106,.55); }
.sidebar-help .sh-ico{ width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.14); color:#fadb5f; display:inline-flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:9px; }
.sidebar-help .sh-title{ font-weight:600; font-size:.9rem; }
.sidebar-help .sh-sub{ font-size:.73rem; color:rgba(255,255,255,.72); margin:5px 0 12px; line-height:1.45; }
.sidebar-help .sh-btn{ display:block; background:#fff; color:#15275a; border-radius:9px; padding:8px; font-weight:600; font-size:.8rem; text-decoration:none; transition:background .15s,color .15s; }
.sidebar-help .sh-btn:hover{ background:#fadb5f; color:#15275a; }

/* topbar 3-section */
.portal-topbar{ justify-content:space-between!important; gap:16px; }
.topbar-title{ font-weight:600; color:var(--ink); font-size:.98rem; display:inline-flex; align-items:center; }
.topbar-title i{ color:#9aa5b5; }
.topbar-search{ flex:1; max-width:320px; align-items:center; gap:9px; background:#f1f3f8; border:1px solid #e8ebf2; border-radius:11px; padding:8px 14px; color:#94a3b8; }
.topbar-search i{ font-size:.82rem; }
.topbar-search input{ border:0; background:transparent; outline:none; font-size:.88rem; width:100%; color:var(--ink); }
.topbar-search input::placeholder{ color:#94a3b8; }
.topbar-bell{ width:40px; height:40px; border-radius:11px; border:1px solid #e8ebf2; background:#fff; color:#5b6675; align-items:center; justify-content:center; cursor:pointer; transition:background .15s,color .15s; }
.topbar-bell:hover{ background:#f1f3f8; color:#1b306a; }

/* =============================================================================
   GLASS COLOUR SIDEBAR — navy frosted glass (corporate)
   ============================================================================= */
body.portal-dash{ background:#eef1f7!important; }
/* colour blobs behind the sidebar so the frosted glass picks up colour */
body.portal-dash::before{
    content:""; position:fixed; top:0; left:0; width:262px; height:100vh; z-index:0; pointer-events:none;
    background:
        radial-gradient(20rem 16rem at 35% 6%, #2a4ba0, transparent 62%),
        radial-gradient(15rem 13rem at 85% 55%, rgba(240,169,28,.42), transparent 60%),
        radial-gradient(17rem 15rem at 8% 100%, rgba(204,0,0,.38), transparent 60%),
        linear-gradient(180deg,#17295c,#0f1d42);
}
@media (max-width:991.98px){ body.portal-dash::before{ display:none; } }

.portal-sidebar{
    background:rgba(18,32,66,.66)!important;
    -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%);
    border-right:1px solid rgba(255,255,255,.10)!important; box-shadow:none!important;
    display:flex; flex-direction:column;
}
.portal-sidebar .sidebar-brand{ border-bottom:1px solid rgba(255,255,255,.10); }
.portal-sidebar .sidebar-brand h5{ color:#fff!important; }
.portal-sidebar .sidebar-brand small{ color:rgba(255,255,255,.6)!important; }
.portal-sidebar .sidebar-heading{ color:rgba(255,255,255,.4)!important; }
.portal-sidebar .sidebar-menu li a{ color:rgba(255,255,255,.74)!important; }
.portal-sidebar .sidebar-menu li a i{ color:rgba(255,255,255,.6)!important; }
.portal-sidebar .sidebar-menu li a:hover{ background:rgba(255,255,255,.09)!important; color:#fff!important; }
.portal-sidebar .sidebar-menu li a:hover i{ color:#fadb5f!important; }
.portal-sidebar .sidebar-menu li.active a{ background:rgba(255,255,255,.16)!important; color:#fff!important; box-shadow:inset 3px 0 0 #fadb5f!important; }
.portal-sidebar .sidebar-menu li.active a i{ color:#fadb5f!important; }
.portal-sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); }

/* footer help card -> glass */
.sidebar-help{ background:rgba(255,255,255,.1)!important; border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:none!important; }
.sidebar-help .sh-sub{ color:rgba(255,255,255,.78)!important; }
.sidebar-help .sh-btn{ background:#fadb5f; color:#15275a; }
.sidebar-help .sh-btn:hover{ background:#fff; color:#15275a; }

/* =============================================================================
   Topbar: search in right cluster + refined user/avatar toggle
   ============================================================================= */
.user-info .topbar-search{ max-width:240px; flex:0 1 240px; }
.portal-user-toggle{ display:inline-flex; align-items:center; gap:10px; background:transparent; border:0; padding:5px 8px 5px 11px; border-radius:12px; cursor:pointer; transition:background .15s; }
.portal-user-toggle:hover{ background:#eef1f6; }
.portal-user-toggle .user-name{ font-weight:600; font-size:13.5px; color:var(--ink); line-height:1.2; }
.portal-user-toggle .user-type{ font-size:11.5px; color:var(--ink-3); line-height:1.2; }
.portal-avatar{ width:40px!important; height:40px!important; border-radius:50%!important; background:linear-gradient(135deg,#2a468f,#1b306a)!important; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; position:relative; box-shadow:0 0 0 2px #fff, 0 0 0 3px #e7eaf1; flex-shrink:0; }
.portal-avatar::after{ content:""; position:absolute; right:0; bottom:0; width:11px; height:11px; border-radius:50%; background:#22c55e; border:2px solid #fff; }
.portal-user-caret{ font-size:10px; color:#9aa5b5; transition:transform .15s; }
.portal-user-toggle[aria-expanded="true"] .portal-user-caret{ transform:rotate(180deg); }
.portal-user-toggle[aria-expanded="true"]{ background:#eef1f6; }

/* topbar greeting (left) */
.topbar-greet{ font-size:1rem; color:var(--ink-2); font-weight:500; }
.topbar-greet strong{ color:var(--ink); font-weight:600; }

/* role flag (login-as PUJK / Mediator) in topbar */
.role-flag{ align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:.74rem; font-weight:600; line-height:1; }
.role-flag i{ font-size:.78rem; }
.role-pujk{ background:#eaf0fb; color:#1f47a6; }
.role-med{ background:#e6f4f7; color:#0b7285; }

/* =============================================================================
   Fix: native select / file inputs were clipped (BS4 fixed-height vs our padding)
   ============================================================================= */
.form-control, .form-select { height: auto !important; min-height: 44px; line-height: 1.5; }
select.form-control, select.form-select { padding-top: .55rem !important; padding-bottom: .55rem !important; }
input[type="file"].form-control, input[type="file"] { height: auto !important; min-height: 44px; padding: .55rem .9rem !important; line-height: 1.8; }
.form-control-sm, .form-select-sm, input[type="file"].form-control-sm { min-height: 38px; line-height: 1.6; padding-top: .35rem !important; padding-bottom: .35rem !important; }
textarea.form-control { min-height: auto; }

/* =============================================================================
   Spacing: gutter polyfill (BS4 ignores g-*) + more breathing room + responsive
   ============================================================================= */
/* horizontal-only negative margins so mb-*/mt-* utilities on the row still work */
.row.g-2{ margin-left:-.4rem!important; margin-right:-.4rem!important; } .row.g-2>*{ padding:.4rem!important; }
.row.g-3{ margin-left:-.85rem!important; margin-right:-.85rem!important; } .row.g-3>*{ padding:.85rem!important; }
.row.g-4{ margin-left:-1rem!important; margin-right:-1rem!important; } .row.g-4>*{ padding:1rem!important; }
.row.g-6{ margin-left:-1.1rem!important; margin-right:-1.1rem!important; } .row.g-6>*{ padding:1.1rem!important; }

.portal-content{ padding:30px 34px; }
.portal-page-head{ margin-bottom:1.85rem; }

/* tablet */
@media (max-width:991.98px){
    .portal-content{ padding:24px 22px; }
}
/* mobile */
@media (max-width:767.98px){
    .portal-content{ padding:18px 15px; }
    .portal-topbar{ padding:0 15px!important; gap:8px; height:62px; }
    .topbar-greet{ font-size:.92rem; }
    .card-body{ padding:1.05rem 1.15rem; }
    .portal-page-head h4{ font-size:1.15rem!important; }
    .row.g-3{ margin-left:-.55rem!important; margin-right:-.55rem!important; } .row.g-3>*{ padding:.55rem!important; }
    .row.g-6{ margin-left:-.55rem!important; margin-right:-.55rem!important; } .row.g-6>*{ padding:.55rem!important; }
    .portal-user-toggle{ padding:4px; }
    .portal-avatar{ width:36px!important; height:36px!important; font-size:14px; }
}
@media (max-width:575.98px){
    .topbar-greet strong{ display:inline; }
    .portal-content{ padding:16px 13px; }
}

/* auth (login/register/...) mobile: prevent the glass card from overflowing */
@media (max-width:575.98px){
    .p-auth-v3 .v3-form{ padding:22px 14px!important; }
    .p-auth-v3 .v3-glass{ max-width:100%!important; padding:26px 20px!important; margin-block:0!important; }
    .v3-glass .portal-form-sub{ font-size:.82rem; }
}
body.portal-auth{ overflow-x:hidden; }

/* auth mobile (robust): single-column block, no overflow */
@media (max-width:991.98px){
    .p-auth-v3{ display:block!important; }
    .p-auth-v3 .v3-brand{ display:none!important; }
    .p-auth-v3 .v3-form{ width:100%!important; max-width:100%!important; min-height:100vh; min-height:100dvh; padding:26px 16px!important; }
    .p-auth-v3 .v3-glass{ width:100%!important; max-width:440px!important; margin:auto!important; padding:30px 22px!important; }
}

/* auth mobile (definitive): clamp everything to viewport width */
@media (max-width:991.98px){
    .p-auth-v3{ width:100vw!important; max-width:100vw!important; overflow-x:hidden!important; }
    .p-auth-v3 .v3-form{ width:100vw!important; max-width:100vw!important; box-sizing:border-box; }
    .p-auth-v3 .v3-glass{ width:100%!important; max-width:100%!important; box-sizing:border-box; }
    .p-auth-v3 .v3-glass img{ max-width:130px; }
    .cf-turnstile{ max-width:100%; overflow:hidden; }
}
html, body{ max-width:100%; overflow-x:hidden; }

/* auth mobile (final): normal flow, no fixed/vw tricks -> no overflow */
@media (max-width:991.98px){
    body.portal-auth{ display:block!important; }
    body.portal-auth > .container{ max-width:100%!important; padding:0!important; }
    .p-auth-v3{ position:static!important; display:block!important; width:auto!important; max-width:none!important; min-height:100vh; }
    .p-auth-v3 .v3-brand{ display:none!important; }
    .p-auth-v3 .v3-form{ position:static!important; width:auto!important; max-width:none!important; min-height:100vh; padding:26px 16px!important; display:flex; align-items:center; justify-content:center; }
    .p-auth-v3 .v3-glass{ width:100%!important; max-width:440px!important; margin:auto!important; }
}

/* auth mobile bulletproof: glass width relative to viewport */
@media (max-width:991.98px){
    .p-auth-v3 .v3-form{ width:100vw!important; max-width:100vw!important; padding:24px 0!important; }
    .p-auth-v3 .v3-glass{ width:calc(100vw - 32px)!important; max-width:440px!important; margin:0 auto!important; }
}