/* ID Card Management System — dashboard shell. Page-specific styles live in the views. */
:root { --d-navy: #06283D; --d-blue: #0B80B5; --d-gold: #D99A22; --d-bg: #f1f4f7; --d-card: #fff; --d-border: #e3e9ef;
        --d-text: #1e2a36; --d-muted: #6b7a88; --d-head: #f7f9fb; --d-side: 248px; }
body.dash { margin: 0; background: var(--d-bg); color: var(--d-text); font-family: "Segoe UI", Roboto, -apple-system, Arial, sans-serif; }
a { color: var(--d-blue); }
.btn-primary { --bs-btn-bg: #0B80B5; --bs-btn-border-color: #0B80B5; --bs-btn-hover-bg: #096a96; --bs-btn-hover-border-color: #096a96;
               --bs-btn-active-bg: #085a80; --bs-btn-active-border-color: #085a80; }
.btn-outline-primary { --bs-btn-color: #0B80B5; --bs-btn-border-color: #0B80B5; --bs-btn-hover-bg: #0B80B5; --bs-btn-hover-border-color: #0B80B5;
                       --bs-btn-active-bg: #0B80B5; --bs-btn-active-border-color: #0B80B5; }

/* sidebar */
.dash-side { position: fixed; inset: 0 auto 0 0; width: var(--d-side); background: var(--d-navy); color: #fff; display: flex; flex-direction: column; z-index: 1030; }
.dash-brand { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.1rem 1rem; color: #fff; text-decoration: none; font-weight: 800; line-height: 1.15;
              border-bottom: 1px solid rgba(255,255,255,.12); }
.dash-brand img { width: 46px; height: 46px; border-radius: 50%; background: #fff; object-fit: contain; }
.dash-brand small { font-weight: 500; opacity: .75; font-size: .78rem; }
.dash-brand span { font-size: .92rem; }
.dash-nav { flex: 1; padding: .75rem .6rem; overflow-y: auto; }
.dash-nav a, .dash-logout button { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .62rem .8rem; border-radius: 8px; color: rgba(255,255,255,.82);
              text-decoration: none; font-size: .93rem; font-weight: 600; background: none; border: 0; text-align: left; }
.dash-nav a i, .dash-logout i { width: 20px; text-align: center; opacity: .9; }
.dash-nav a:hover, .dash-logout button:hover { background: rgba(255,255,255,.09); color: #fff; }
.dash-nav a.active { background: var(--d-blue); color: #fff; }
.dash-logout { padding: .6rem; border-top: 1px solid rgba(255,255,255,.12); margin: 0; }

.dash-nav-head { padding: .9rem .8rem .3rem; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.45); }

/* main */
.dash-main { margin-left: var(--d-side); min-height: 100vh; display: flex; flex-direction: column; }
.dash-top { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 1rem; background: var(--d-card); border-bottom: 1px solid var(--d-border); padding: .7rem 1.5rem; }
.dash-title { flex: 1; font-size: 1.1rem; font-weight: 800; margin: 0; }
.dash-burger { display: none; border: 0; background: none; font-size: 1.25rem; color: var(--d-navy); }
.dash-user { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--d-text); line-height: 1.2; }
.dash-user .av { width: 38px; height: 38px; border-radius: 50%; background: var(--d-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.dash-user b { display: block; font-size: .9rem; }
.dash-user small { color: var(--d-muted); font-size: .76rem; }
.dash-content { padding: 1.5rem; flex: 1; }

.dash-theme { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--d-border); background: var(--d-head); color: var(--d-text);
              border-radius: 999px; padding: .38rem .8rem; font-size: .82rem; font-weight: 700; line-height: 1; }
.dash-theme:hover { border-color: var(--d-blue); color: var(--d-blue); }

/* dark theme (switch in the top bar). The ID card itself always keeps its printed colours. */
[data-bs-theme="dark"] { --d-bg: #0e161d; --d-card: #17222c; --d-border: #2a3947; --d-text: #e4ebf1; --d-muted: #9aabb9; --d-head: #1d2a36;
                         --bs-body-bg: #17222c; --bs-body-color: #e4ebf1; --bs-border-color: #2a3947; --bs-secondary-color: #9aabb9; }
[data-bs-theme="dark"] body.dash { background: var(--d-bg); color: var(--d-text); }
[data-bs-theme="dark"] body.dash a:not(.btn):not(.dropdown-item):not(.page-link) { color: #5cbbe6; }
[data-bs-theme="dark"] .dash-nav a, [data-bs-theme="dark"] .dash-brand { color: rgba(255,255,255,.85) !important; }
[data-bs-theme="dark"] .dash-side { background: #0a1219; border-right: 1px solid var(--d-border); }
[data-bs-theme="dark"] .dash-burger { color: var(--d-text); }
[data-bs-theme="dark"] body.dash .bg-white { background-color: var(--d-card) !important; }
[data-bs-theme="dark"] body.dash .bg-light { background-color: var(--d-head) !important; color: var(--d-text) !important; }
[data-bs-theme="dark"] body.dash .text-muted { color: var(--d-muted) !important; }
[data-bs-theme="dark"] body.dash .text-reset { color: var(--d-text) !important; }
[data-bs-theme="dark"] body.dash .table { --bs-table-bg: var(--d-card); --bs-table-color: var(--d-text); --bs-table-border-color: var(--d-border); }
[data-bs-theme="dark"] body.dash .btn-outline-secondary { --bs-btn-color: #c3d0db; --bs-btn-border-color: #40515f; }
[data-bs-theme="dark"] body.dash .idc-preview .holder, [data-bs-theme="dark"] body.dash .idcard { color-scheme: light; }

@media (max-width: 991.98px) {
    .dash-side { transform: translateX(-100%); transition: transform .2s; }
    .dash-side.open { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
    .dash-main { margin-left: 0; }
    .dash-burger { display: inline-block; }
    .dash-content { padding: 1rem; }
}

/* sign-in page */
body.auth { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
            background: linear-gradient(135deg, #06283D, #0B80B5); font-family: "Segoe UI", Roboto, -apple-system, Arial, sans-serif; }
.auth-card { width: 100%; max-width: 420px; background: #fff; border-radius: 16px; padding: 2rem; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.auth-card .logo { width: 84px; height: 84px; display: block; margin: 0 auto .75rem; }
.auth-card h1 { font-size: 1.25rem; font-weight: 800; text-align: center; margin-bottom: .15rem; color: #06283D; }
.auth-card .sub { text-align: center; color: #6b7a88; font-size: .9rem; margin-bottom: 1.5rem; }