/* ==========================================================================
   ALFASUN Digital ID — Admin UI (Bootstrap 5.3 theme layer)
   ========================================================================== */
:root {
    --brand: #1F3A68;
    --brand-2: #2E6BD6;
    --brand-soft: #E8EEF9;
    --sidebar-w: 260px;
    --bg: #F4F6FB;
    --card-radius: 14px;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-primary: #2E6BD6;
    --bs-primary-rgb: 46, 107, 214;
    --bs-link-color: #2E6BD6;
    --bs-link-color-rgb: 46, 107, 214;
}

body { background: var(--bg); color: #1E293B; font-size: .925rem; }
.btn-primary { --bs-btn-bg: #2E6BD6; --bs-btn-border-color: #2E6BD6; --bs-btn-hover-bg: #2459B8; --bs-btn-hover-border-color: #2459B8; --bs-btn-active-bg: #1F4FA6; }
.btn-outline-primary { --bs-btn-color: #2E6BD6; --bs-btn-border-color: #2E6BD6; --bs-btn-hover-bg: #2E6BD6; --bs-btn-hover-border-color: #2E6BD6; }
.text-primary { color: #2E6BD6 !important; }
.bg-primary { background-color: #2E6BD6 !important; }
.form-control, .form-select { border-color: #DCE3EE; }
.form-control:focus, .form-select:focus { border-color: #8FB0EA; box-shadow: 0 0 0 .2rem rgba(46,107,214,.15); }
.form-label { font-weight: 500; font-size: .85rem; color: #475569; }

/* ---------- Layout ---------- */
.app-sidebar {
    width: var(--sidebar-w); position: fixed; inset: 0 auto 0 0; z-index: 1040;
    background: linear-gradient(180deg, #13284D 0%, #1F3A68 100%); color: #CBD5E1;
    display: flex; flex-direction: column;
}
.app-sidebar .brand { padding: 1.25rem 1.25rem 1rem; display: flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; }
.app-sidebar .brand-logo { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #2E6BD6, #06B6D4); display: grid; place-items: center; font-size: 1.3rem; overflow: hidden; }
.app-sidebar .brand-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.app-sidebar .brand-text { line-height: 1.1; }
.app-sidebar .brand-text strong { display: block; font-size: 1rem; }
.app-sidebar .brand-text small { color: #94A3B8; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.app-sidebar .nav-scroll { overflow-y: auto; flex: 1; padding: .5rem .75rem 1rem; }
.app-sidebar .nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #64748B; padding: 1rem .75rem .4rem; }
.app-sidebar .nav-link {
    color: #CBD5E1; border-radius: 10px; padding: .55rem .75rem; display: flex; align-items: center; gap: .75rem; font-weight: 500; margin-bottom: 2px;
}
.app-sidebar .nav-link i { font-size: 1.05rem; width: 20px; text-align: center; }
.app-sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.app-sidebar .nav-link.active { background: #2E6BD6; color: #fff; box-shadow: 0 6px 16px rgba(46,107,214,.35); }
.app-sidebar .nav-link .badge { margin-left: auto; }
.app-sidebar .sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .75rem; color: #64748B; }

.app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.app-topbar {
    position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
    border-bottom: 1px solid #E5EAF2; padding: .65rem 1.5rem; display: flex; align-items: center; gap: 1rem;
}
.app-topbar .page-title { font-weight: 600; font-size: 1.05rem; margin: 0; }
.app-content { padding: 1.5rem; flex: 1; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 600; font-size: .8rem; background: var(--brand-soft); color: var(--brand); object-fit: cover; flex-shrink: 0; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.3rem; }
.avatar-xl { width: 96px; height: 96px; font-size: 1.8rem; }

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); transition: transform .25s ease; }
    .app-sidebar.show { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.3); }
    .app-main { margin-left: 0; }
    .sidebar-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1035; display: none; }
    .sidebar-backdrop.show { display: block; }
    .app-content { padding: 1rem; }
    .app-topbar { padding: .6rem 1rem; }
}

/* ---------- Surfaces ---------- */
.card { border: 1px solid #E8EDF5; border-radius: var(--card-radius); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.card-header { background: transparent; border-bottom: 1px solid #EEF2F7; padding: 1rem 1.25rem; font-weight: 600; }
.card-header:first-child { border-radius: var(--card-radius) var(--card-radius) 0 0; }
.card-body { padding: 1.25rem; }
.stat-card { position: relative; overflow: hidden; }
.stat-card .stat-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; }
.stat-card .stat-value { font-size: 1.65rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { color: #64748B; font-size: .8rem; font-weight: 500; }
.soft-primary { background: #E8EFFC; color: #2E6BD6; }
.soft-success { background: #E3F7EC; color: #15803D; }
.soft-warning { background: #FEF3E2; color: #B45309; }
.soft-danger { background: #FDE8E8; color: #B91C1C; }
.soft-info { background: #E0F5FA; color: #0E7490; }
.soft-secondary { background: #EEF2F7; color: #475569; }
.soft-purple { background: #EEE9FE; color: #6D28D9; }

.table { --bs-table-hover-bg: #F7F9FD; margin-bottom: 0; }
.table > thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #64748B; font-weight: 600; background: #F8FAFD; border-bottom-width: 1px; white-space: nowrap; }
.table td, .table th { padding: .75rem 1rem; vertical-align: middle; }
.table-card .card-body { padding: 0; }
.filter-bar { background: #fff; border: 1px solid #E8EDF5; border-radius: var(--card-radius); padding: 1rem; margin-bottom: 1rem; }
.empty-state { text-align: center; padding: 3rem 1rem; color: #94A3B8; }
.empty-state i { font-size: 2.5rem; display: block; margin-bottom: .5rem; }

.status-badge { font-weight: 600; font-size: .72rem; padding: .35em .7em; border-radius: 999px; text-transform: capitalize; display: inline-flex; align-items: center; gap: .35em; }
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-active, .status-approved, .status-valid { background: #E3F7EC; color: #15803D; }
.status-pending { background: #FEF3E2; color: #B45309; }
.status-expired, .status-suspended { background: #FFF1E0; color: #C2410C; }
.status-deactivated, .status-rejected, .status-invalid, .status-not_found, .status-inactive { background: #FDE8E8; color: #B91C1C; }
.status-superseded, .status-none { background: #EEF2F7; color: #64748B; }

.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.page-header h1 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.page-header .subtitle { color: #64748B; margin: .15rem 0 0; font-size: .875rem; }
.detail-list dt { color: #64748B; font-weight: 500; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.detail-list dd { margin-bottom: .9rem; font-weight: 500; }
.timeline-item { display: flex; gap: .75rem; padding: .6rem 0; border-bottom: 1px dashed #E8EDF5; }
.timeline-item:last-child { border-bottom: 0; }
.timeline-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: .9rem; }
.permission-group { border: 1px solid #E8EDF5; border-radius: 12px; padding: 1rem; height: 100%; }
.design-option input { display: none; }
.design-option label { cursor: pointer; border: 2px solid #E2E8F0; border-radius: 12px; padding: .5rem; display: block; transition: .15s; background: #fff; }
.design-option input:checked + label { border-color: #2E6BD6; box-shadow: 0 0 0 4px rgba(46,107,214,.12); }
.color-input { width: 46px; height: 38px; padding: 3px; }
code.secret { background: #0F172A; color: #A5F3FC; padding: .5rem .75rem; border-radius: 8px; display: block; word-break: break-all; font-size: .85rem; }

/* ---------- Login ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-hero { background: radial-gradient(1200px 600px at 10% 10%, #2E6BD6 0%, #1F3A68 45%, #0B1730 100%); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-hero .floating-card { position: absolute; right: -40px; bottom: 80px; width: 360px; transform: rotate(-8deg); opacity: .95; }
.auth-form { display: grid; place-items: center; padding: 2rem; background: #fff; }
.auth-form .inner { width: 100%; max-width: 400px; }
@media (max-width: 991.98px) { .auth-wrap { grid-template-columns: 1fr; } .auth-hero { display: none; } }

/* ---------- Scanner ---------- */
#reader { border-radius: 14px; overflow: hidden; background: #0F172A; min-height: 280px; }
#reader video { border-radius: 14px; }
.scan-result { border-radius: 16px; padding: 1.25rem; color: #fff; }
.scan-result.valid { background: linear-gradient(135deg, #16A34A, #15803D); }
.scan-result.warn { background: linear-gradient(135deg, #F59E0B, #D97706); }
.scan-result.invalid { background: linear-gradient(135deg, #DC2626, #B91C1C); }
.scan-result .avatar-xl { border: 3px solid rgba(255,255,255,.7); background: rgba(255,255,255,.2); color: #fff; }

/* ==========================================================================
   ID Card renderer — shared by template designer, card view and print.
   Sized with container query units so it scales to any width.
   ========================================================================== */
.idc-wrap { container-type: inline-size; width: 100%; }
.idc {
    --p: #1F3A68; --s: #2E6BD6; --t: #FFFFFF;
    position: relative; overflow: hidden; border-radius: 4.2cqw; aspect-ratio: 85.6 / 53.98;
    box-shadow: 0 10px 30px rgba(15,23,42,.18); background: #fff; color: #0F172A; font-size: 3.4cqw; line-height: 1.25;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.idc.idc-portrait { aspect-ratio: 53.98 / 85.6; border-radius: 6cqw; font-size: 5cqw; }
.idc * { box-sizing: border-box; }
.idc-bgimg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .18; pointer-events: none; }
.idc-logo { height: 100%; max-width: 100%; object-fit: contain; }
.idc-logo-fallback { font-weight: 800; letter-spacing: .02em; }
.idc-photo { overflow: hidden; background: #E2E8F0; display: grid; place-items: center; color: #64748B; font-weight: 700; flex-shrink: 0; }
.idc-photo img { width: 100%; height: 100%; object-fit: cover; }
.idc-name { font-weight: 800; font-size: 1.45em; line-height: 1.1; }
.idc-sub { font-weight: 600; opacity: .85; font-size: .95em; }
.idc-fields { display: grid; grid-template-columns: auto 1fr; gap: .15em .7em; margin: .5em 0 0; font-size: .82em; }
.idc-fields dt { font-weight: 500; opacity: .65; text-transform: uppercase; font-size: .82em; letter-spacing: .03em; align-self: center; }
.idc-fields dd { margin: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idc-qr { background: #fff; padding: .35em; border-radius: .5em; line-height: 0; }
.idc-qr img, .idc-qr canvas { width: 100% !important; height: auto !important; }
.idc-live { font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: .78em; display: inline-flex; align-items: center; gap: .4em; }
.idc-live::before { content: ''; width: .6em; height: .6em; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: idc-pulse 1.6s infinite; }
@keyframes idc-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.7); } 70% { box-shadow: 0 0 0 .6em rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.idc-barcode { height: 100%; max-width: 100%; }
.idc-holo { position: absolute; width: 18cqw; aspect-ratio: 1; border-radius: 50%; right: -5cqw; top: -5cqw; background: conic-gradient(from 0deg, rgba(255,255,255,.0), rgba(255,255,255,.25), rgba(255,255,255,0), rgba(255,255,255,.2), rgba(255,255,255,0)); animation: idc-spin 6s linear infinite; pointer-events: none; }
@keyframes idc-spin { to { transform: rotate(360deg); } }
.idc-status-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15,23,42,.55); z-index: 5; }
.idc-status-overlay span { background: #DC2626; color: #fff; font-weight: 800; padding: .4em 1.2em; border-radius: .4em; transform: rotate(-12deg); letter-spacing: .1em; font-size: 1.4em; }

/* --- Landscape base layout --- */
.idc-landscape .idc-header { position: absolute; left: 0; right: 0; top: 0; height: 19%; display: flex; align-items: center; gap: 2.5cqw; padding: 0 4cqw; }
.idc-landscape .idc-header .idc-logo-box { height: 62%; display: flex; align-items: center; }
.idc-landscape .idc-org { font-weight: 700; font-size: .95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.idc-landscape .idc-title { font-weight: 800; letter-spacing: .14em; font-size: .78em; padding: .3em .8em; border-radius: 999px; }
.idc-landscape .idc-body { position: absolute; top: 23%; bottom: 17%; left: 4cqw; right: 4cqw; display: flex; gap: 3.5cqw; align-items: stretch; }
.idc-landscape .idc-photo { width: 24cqw; border-radius: 2.5cqw; font-size: 2em; }
.idc-landscape .idc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.idc-landscape .idc-codes { width: 21cqw; display: flex; flex-direction: column; justify-content: center; }
.idc-landscape .idc-footer { position: absolute; left: 0; right: 0; bottom: 0; height: 14%; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 0 4cqw; font-size: .8em; }
.idc-landscape .idc-footer .idc-barcode-box { height: 70%; flex: 1; display: flex; justify-content: center; }

/* classic */
.idc-classic { background: #fff; }
.idc-classic .idc-header { background: var(--p); color: var(--t); }
.idc-classic .idc-title { background: var(--s); color: #fff; }
.idc-classic .idc-photo { border: .5cqw solid var(--s); }
.idc-classic .idc-name { color: var(--p); }
.idc-classic .idc-sub { color: var(--s); }
.idc-classic .idc-footer { background: linear-gradient(90deg, var(--p), var(--s)); color: var(--t); }
.idc-classic .idc-qr { border: .3cqw solid #E2E8F0; }

/* modern */
.idc-modern { background: linear-gradient(135deg, var(--p) 0%, var(--s) 100%); color: var(--t); }
.idc-modern::after { content: ''; position: absolute; width: 70cqw; aspect-ratio: 1; border-radius: 50%; right: -30cqw; bottom: -40cqw; background: rgba(255,255,255,.08); }
.idc-modern .idc-title { background: rgba(255,255,255,.18); color: var(--t); border: 1px solid rgba(255,255,255,.35); }
.idc-modern .idc-photo { border-radius: 50%; width: 22cqw; height: 22cqw; align-self: center; border: .7cqw solid rgba(255,255,255,.6); }
.idc-modern .idc-footer { background: rgba(0,0,0,.18); }
.idc-modern .idc-body, .idc-modern .idc-header, .idc-modern .idc-footer { z-index: 1; }

/* minimal */
.idc-minimal { background: var(--s); color: var(--p); border: 1px solid #E2E8F0; }
.idc-minimal .idc-header { border-bottom: .5cqw solid var(--p); height: 18%; }
.idc-minimal .idc-title { color: var(--p); border: .3cqw solid var(--p); }
.idc-minimal .idc-photo { border-radius: 2cqw; filter: grayscale(.1); }
.idc-minimal .idc-footer { color: var(--p); border-top: 1px dashed rgba(15,23,42,.2); }
.idc-minimal .idc-live::before { background: var(--p); }

/* --- Portrait base layout --- */
.idc-portrait .idc-header { position: absolute; top: 0; left: 0; right: 0; height: 30%; display: flex; flex-direction: column; align-items: center; padding-top: 6cqw; gap: 2cqw; }
.idc-portrait .idc-logo-box { height: 11cqw; display: flex; align-items: center; justify-content: center; }
.idc-portrait .idc-org { font-weight: 700; font-size: .8em; text-align: center; padding: 0 6cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.idc-portrait .idc-photo { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); width: 36cqw; height: 36cqw; border-radius: 50%; font-size: 2.4em; z-index: 2; }
.idc-portrait .idc-info { position: absolute; top: 50%; left: 6cqw; right: 6cqw; text-align: center; }
.idc-portrait .idc-fields { text-align: left; margin-top: .6em; }
.idc-portrait .idc-codes { position: absolute; bottom: 12%; left: 0; right: 0; display: flex; justify-content: center; align-items: flex-end; gap: 4cqw; }
.idc-portrait .idc-codes .idc-qr { width: 26cqw; }
.idc-portrait .idc-footer { position: absolute; bottom: 0; left: 0; right: 0; height: 9%; display: flex; align-items: center; justify-content: space-between; padding: 0 6cqw; font-size: .72em; }
.idc-portrait .idc-title { position: absolute; top: 30%; right: -1px; writing-mode: vertical-rl; font-weight: 800; letter-spacing: .2em; font-size: .7em; padding: 1em .4em; border-radius: .5em 0 0 .5em; }

/* vertical */
.idc-vertical { background: #fff; }
.idc-vertical .idc-header { background: linear-gradient(160deg, var(--p), var(--s)); color: var(--t); border-radius: 0 0 50% 50% / 0 0 18% 18%; }
.idc-vertical .idc-photo { border: 1.5cqw solid #fff; box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.idc-vertical .idc-name { color: var(--p); }
.idc-vertical .idc-sub { color: var(--s); }
.idc-vertical .idc-title { background: var(--s); color: #fff; }
.idc-vertical .idc-footer { background: var(--p); color: var(--t); }

/* executive */
.idc-executive { background: radial-gradient(120% 80% at 50% 0%, #2A3342 0%, var(--p) 60%); color: var(--t); }
.idc-executive .idc-header { color: var(--s); }
.idc-executive .idc-photo { border: 1cqw solid var(--s); box-shadow: 0 0 0 1.5cqw rgba(201,162,39,.15); }
.idc-executive .idc-name { color: #fff; }
.idc-executive .idc-sub { color: var(--s); }
.idc-executive .idc-title { background: var(--s); color: var(--p); }
.idc-executive .idc-footer { border-top: 1px solid rgba(201,162,39,.4); color: var(--s); }
.idc-executive .idc-fields dt { color: var(--s); opacity: .9; }

/* --- Card back (print) --- */
.idc-back { background: #fff; color: #0F172A; display: flex; flex-direction: column; padding: 5cqw; gap: 2cqw; }
.idc-back .back-stripe { height: 3cqw; background: linear-gradient(90deg, var(--p), var(--s)); margin: -5cqw -5cqw 1cqw; }
.idc-back .back-body { display: flex; gap: 4cqw; flex: 1; align-items: center; }
.idc-back .back-text { font-size: .78em; color: #334155; flex: 1; }
.idc-back .back-qr { width: 26cqw; }
.idc-portrait.idc-back .back-body { flex-direction: column; text-align: center; }
.idc-portrait.idc-back .back-qr { width: 50cqw; }
.idc-back .sig { border-top: 1px solid #94A3B8; font-size: .65em; color: #64748B; padding-top: .3em; width: 40%; }

@media print {
    .no-print { display: none !important; }
}
.idc-landscape .idc-title { position: absolute; top: 4.6%; right: 4cqw; z-index: 2; }
.idc-landscape .idc-header { padding-right: 30cqw; }
.idc-landscape.idc-no-photo .idc-photo { display: none; }
.idc-portrait.idc-no-photo .idc-photo { display: none; }
.idc-portrait.idc-no-photo .idc-info { top: 30%; }