:root {
    --navy-950: #031c34;
    --navy-900: #062d52;
    --navy-850: #083b67;
    --blue-700: #076bd7;
    --blue-600: #0d7de8;
    --blue-100: #eaf4ff;
    --sky-50: #f6fbff;
    --surface: #ffffff;
    --surface-2: #f7f9fc;
    --line: #e4ebf3;
    --text: #162235;
    --muted: #748197;
    --green: #23b26d;
    --green-100: #eaf9f1;
    --orange: #f4a94f;
    --red: #ec5b68;
    --shadow-sm: 0 8px 24px rgba(14, 38, 68, .06);
    --shadow: 0 18px 48px rgba(14, 38, 68, .10);
    --radius: 18px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    color: var(--text);
    background: var(--sky-50);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; }

.eyebrow, .card-eyebrow, .admin-eyebrow, .topbar-kicker, .admin-kicker {
    display: inline-block;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #7c8ba1;
}
.eyebrow.light { color: rgba(255,255,255,.72); }

/* ---------- Shared cards / buttons ---------- */
.dashboard-card, .briefing-card, .briefing-side-card, .assessment-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.btn-main {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .75rem 1.1rem;
    border: 0;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    cursor: pointer;
}
.btn-main:hover { transform: translateY(-1px); }
.btn-main-blue {
    color: #fff;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
    box-shadow: 0 12px 26px rgba(13,125,232,.22);
}
.btn-main-blue:hover { color: #fff; box-shadow: 0 16px 32px rgba(13,125,232,.26); }
.btn-main-outline {
    color: #46607a;
    background: #fff;
    border: 1px solid #d5dfeb;
}
.btn-main-outline:hover { color: var(--text); background: #f7faff; }
.full-width { width: 100%; }

/* ---------- Employee shell ---------- */
.asensi-app { background: #f7fbff; }
.app-main { min-height: 100vh; margin-left: 252px; }

.home-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 252px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    color: #fff;
    background: linear-gradient(180deg, #062d52 0%, #062546 100%);
    box-shadow: 12px 0 36px rgba(4, 30, 54, .12);
    padding: 18px 14px;
}
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 8px 20px;
}
.brand-mark {
    width: 34px; height: 34px; flex: 0 0 34px;
    position: relative;
    display: grid;
    place-items: center;
}
.brand-mark span {
    position: absolute;
    width: 22px; height: 9px;
    border-radius: 7px 4px 7px 4px;
    transform: rotate(-25deg);
}
.brand-mark span:nth-child(1) { background: #fff; top: 5px; left: 4px; }
.brand-mark span:nth-child(2) { background: #18a7f0; top: 13px; left: 2px; transform: rotate(27deg); }
.brand-mark span:nth-child(3) { background: #28c67b; top: 17px; left: 11px; transform: rotate(-20deg); }
.brand-mark-large { width: 44px; height: 44px; flex-basis: 44px; }
.brand-mark-large span { transform: scale(1.18) rotate(-25deg); }
.brand-copy { min-width: 0; display: flex; flex-direction: column; }
.brand-copy strong, .admin-brand strong, .login-brand-top strong { font-size: 1rem; letter-spacing: .05em; }
.brand-copy span, .admin-brand small, .login-brand-top small { margin-top: 2px; font-size: .67rem; color: rgba(255,255,255,.62); }
.sidebar-close-btn {
    display: none;
    margin-left: auto;
    width: 36px; height: 36px; border: 0; border-radius: 9px;
    background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
}
.sidebar-profile {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 10px 18px; margin-bottom: 8px;
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.sidebar-avatar, .topbar-avatar, .admin-avatar {
    display: grid; place-items: center; border-radius: 50%; font-weight: 800;
}
.sidebar-avatar {
    width: 40px; height: 40px; flex: 0 0 40px;
    background: linear-gradient(135deg,#1a8fe6,#2fbf86);
    color: #fff; font-size: .74rem;
}
.sidebar-profile-copy { min-width: 0; display: flex; flex-direction: column; }
.sidebar-profile-copy strong { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-profile-copy span { color: rgba(255,255,255,.52); font-size: .66rem; margin-top: 3px; }
.sidebar-section-title {
    padding: 14px 10px 7px; color: rgba(255,255,255,.40);
    font-size: .60rem; font-weight: 800; letter-spacing: .14em;
}
.sidebar-section-secondary { padding-top: 18px; }
.sidebar-nav { display: grid; gap: 4px; }
.sidebar-link {
    display: flex; align-items: center; gap: 11px;
    min-height: 42px; padding: 0 11px;
    border-radius: 10px; color: rgba(255,255,255,.72);
    text-decoration: none; font-size: .80rem; font-weight: 650;
}
.sidebar-link i { width: 18px; text-align: center; font-size: .86rem; }
.sidebar-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.sidebar-link.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(14,131,236,.9), rgba(18,101,191,.72));
    box-shadow: 0 10px 24px rgba(2, 111, 205, .18);
}
.sidebar-footer {
    margin-top: auto; padding: 14px 8px 4px;
    border-top: 1px solid rgba(255,255,255,.07);
}
.sidebar-footer-note {
    display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.66); font-size: .66rem; margin-bottom: 9px;
}
.sidebar-footer-note i { color: #37d28a; font-size: .70rem; }
.sidebar-logout {
    width: 100%; border: 0; background: rgba(255,255,255,.05); color: #fff;
    padding: 9px 10px; border-radius: 9px; font-weight: 700; font-size: .75rem; text-align: left; cursor: pointer;
}
.sidebar-logout:hover { background: rgba(255,255,255,.09); }
.sidebar-footer small { display: block; color: rgba(255,255,255,.34); margin: 9px 0 0; font-size: .58rem; }

.topbar {
    position: sticky; top: 0; z-index: 900;
    min-height: 76px; padding: 0 28px;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,.94); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.topbar-left, .topbar-right, .topbar-user { display: flex; align-items: center; }
.topbar-left { gap: 12px; }
.topbar-page { display: flex; flex-direction: column; gap: 2px; }
.topbar-page strong { font-size: .92rem; }
.topbar-kicker { font-size: .58rem; color: #8a9aaf; }
.mobile-menu-btn {
    display: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: #eff5fb; color: var(--navy-900);
}
.topbar-right { gap: 16px; }
.topbar-date { display: flex; flex-direction: column; align-items: flex-end; font-size: .70rem; color: #62738b; }
.topbar-date small { color: #96a2b2; }
.icon-btn {
    position: relative; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid #e0e8f0; background: #fff; color: #4f637c;
}
.notification-dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #ee5b69; border: 2px solid #fff; }
.topbar-user { gap: 8px; padding-left: 12px; border-left: 1px solid #e6edf4; }
.topbar-avatar {
    width: 36px; height: 36px; background: #eaf2fb; color: #145f9d; font-size: .68rem;
}
.topbar-user-copy { display: flex; flex-direction: column; }
.topbar-user-copy strong { font-size: .72rem; }
.topbar-user-copy span { font-size: .60rem; color: #90a0b2; }
.topbar-chevron { font-size: .55rem; color: #8f9dad; }

.page-content { padding: 28px 30px 50px; max-width: 1500px; margin: 0 auto; }
.flash-stack { display: grid; gap: 8px; padding: 14px 30px 0; max-width: 1500px; margin: 0 auto; }
.flash { display: flex; gap: 9px; align-items: center; padding: 11px 13px; border-radius: 12px; font-size: .76rem; font-weight: 650; }
.flash-success { color: #11663b; background: #ebf8f0; border: 1px solid #cfefdd; }
.flash-error { color: #a23842; background: #fff0f2; border: 1px solid #f5d2d7; }
.flash-info { color: #215b8d; background: #edf7ff; border: 1px solid #d6ebfb; }

/* ---------- Employee dashboard ---------- */
.employee-dashboard { display: grid; gap: 18px; }
.welcome-hero {
    min-height: 180px; position: relative; overflow: hidden;
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 28px 32px; border-radius: 20px;
    background:
        radial-gradient(circle at 88% 16%, rgba(56,184,255,.25), transparent 28%),
        linear-gradient(135deg, #062d52 0%, #0a5a96 62%, #0b73c3 100%);
    color: #fff; box-shadow: 0 20px 44px rgba(4,48,85,.18);
}
.welcome-copy h1 { margin: 5px 0 2px; font-size: 1.75rem; line-height: 1.1; letter-spacing: -.02em; }
.welcome-copy p { margin: 0; color: rgba(255,255,255,.72); font-size: .78rem; }
.safety-quote { display: flex; align-items: center; gap: 9px; margin-top: 24px; color: rgba(255,255,255,.92); font-size: .76rem; }
.quote-line { width: 26px; height: 2px; background: #fff; border-radius: 99px; }
.hero-orb {
    width: 150px; height: 150px; border-radius: 50%;
    display: grid; place-items: center; color: rgba(255,255,255,.88);
    background: radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,.02) 58%, transparent 59%);
    font-size: 4rem; margin: 0 34px 0 0;
}
.dashboard-two-col { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }
.dashboard-card { padding: 20px; }
.card-heading, .section-heading-row, .assessment-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.card-heading h2, .section-heading-row h2, .assessment-head h2 {
    margin: 4px 0 0; font-size: 1.03rem; letter-spacing: -.01em;
}
.card-heading-icon {
    width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    background: var(--blue-100); color: var(--blue-700);
}
.status-banner {
    display: flex; align-items: center; gap: 11px; margin: 16px 0;
    padding: 13px; border-radius: 13px;
}
.status-banner.success { background: var(--green-100); color: #187c4c; }
.status-banner.warning { background: #fff5e6; color: #9a6b22; }
.status-banner-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.66); }
.status-banner strong { display:block; font-size: .82rem; }
.status-banner span { display:block; margin-top: 2px; color: #6f7f93; font-size: .67rem; }
.mini-stats {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;
}
.mini-stats > div { padding: 10px 12px; background: #f7f9fc; border-radius: 10px; }
.mini-stats span, .recent-value small, .recent-row > div small { display: block; color: #94a1b2; font-size: .62rem; }
.mini-stats strong { display: block; margin-top: 3px; font-size: .86rem; }
.card-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.card-actions form, .card-actions a { flex: 1; min-width: 140px; }

.text-link {
    color: var(--blue-700); font-size: .68rem; font-weight: 750; text-decoration: none;
}
.text-link:hover { text-decoration: underline; }
.recent-list { margin-top: 12px; }
.recent-row {
    display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
    padding: 12px 0; border-bottom: 1px solid #edf1f5;
}
.recent-row:last-child { border-bottom: 0; }
.recent-dot { width: 8px; height: 8px; border-radius: 50%; }
.recent-dot.green { background: var(--green); }
.recent-dot.blue { background: #4b8fe6; }
.recent-dot.orange { background: #f1ab4e; }
.recent-row > div strong { font-size: .72rem; }
.recent-value { text-align: right; }
.recent-value strong { display:block; font-size:.76rem; }

.attendance-workflow { padding: 22px; }
.section-heading-row p { margin: 5px 0 0; color: #8190a2; font-size: .69rem; }
.status-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px;
    background: #f0f7ff; color: var(--blue-700); font-size: .63rem; font-weight: 800;
}
.status-selector-form { margin-top: 17px; }
.status-grid {
    display: grid; grid-template-columns: repeat(5,1fr); gap: 10px;
}
.status-option {
    position: relative; display:flex; flex-direction:column; align-items:center; text-align:center;
    min-height: 132px; padding: 14px 10px; border: 1.5px solid #e0e8f1; border-radius: 14px;
    background: #fff; cursor:pointer; transition:.2s ease;
}
.status-option:hover { border-color:#8fc4f5; transform: translateY(-1px); }
.status-option.selected { border-color:#77b9f0; background:#f3f9ff; box-shadow:0 8px 18px rgba(13,125,232,.08); }
.status-option input { position:absolute; opacity:0; pointer-events:none; }
.status-option-icon {
    width: 42px; height: 42px; border-radius: 12px; display:grid; place-items:center; margin-bottom: 9px; font-size: .95rem;
}
.status-option-icon.blue { color:#136fce; background:#e7f2ff; }
.status-option-icon.gray { color:#6e7f92; background:#eef2f5; }
.status-option-icon.red { color:#df616b; background:#ffeff1; }
.status-option-icon.pink { color:#c96a83; background:#fff0f5; }
.status-option-icon.violet { color:#786bd0; background:#f1efff; }
.status-option strong { font-size: .70rem; }
.status-option small { margin-top: 3px; color:#97a3b3; font-size: .60rem; }
.workflow-actions { display:flex; justify-content:flex-end; margin-top: 13px; }
.status-locked {
    display:flex; align-items:center; gap:10px; margin: 17px 0 5px;
    padding: 13px; border: 1px solid #d9efe2; background:#f2fbf6; border-radius: 12px;
}
.status-locked-icon { color:#2fbf7b; font-size:1.15rem; }
.status-locked strong { display:block; font-size:.75rem; }
.status-locked span { display:block; color:#7f8e9f; font-size:.63rem; }
.workflow-stepper {
    display:grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; align-items:center;
    gap:8px; margin-top:20px; padding-top: 17px; border-top:1px solid #edf1f5;
}
.workflow-step { display:flex; flex-direction:column; align-items:center; text-align:center; min-width:60px; }
.workflow-step span {
    width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
    color:#7c8998; background:#eef2f6; font-size:.68rem; font-weight:800;
}
.workflow-step.current span, .workflow-step.done span { color:#fff; background:var(--blue-600); }
.workflow-step.done span { background: var(--green); }
.workflow-step strong { margin-top:5px; font-size:.61rem; }
.workflow-step small { margin-top:2px; color:#9aa6b5; font-size:.55rem; }
.workflow-line { height:2px; background:#e8eef4; border-radius:99px; }
.workflow-line.done { background:#77cda2; }

.quick-action-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.quick-action-card {
    display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding:16px;
    border:1px solid var(--line); border-radius:16px; background:#fff; text-decoration:none; box-shadow:var(--shadow-sm);
    transition:.2s ease;
}
.quick-action-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.quick-action-icon {
    width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:.82rem;
}
.quick-action-icon.blue { color:#0b6ed4; background:#e8f3ff; }
.quick-action-icon.indigo { color:#645ac8; background:#eeecff; }
.quick-action-icon.green { color:#219665; background:#e8f8f0; }
.quick-action-icon.orange { color:#c17c21; background:#fff3df; }
.quick-action-card strong { font-size:.72rem; }
.quick-action-card small { color:#8c99a9; font-size:.61rem; }

/* ---------- Workflow pages ---------- */
.workflow-page { display:grid; gap:18px; }
.page-intro { padding: 4px 2px 0; }
.page-intro h1 { margin:5px 0 3px; font-size:1.55rem; letter-spacing:-.02em; }
.page-intro p { margin:0; color:#8190a2; font-size:.72rem; }
.stepper-card {
    display:grid; grid-template-columns:auto 1fr auto 1fr auto 1fr auto; align-items:center; gap:9px;
    padding:15px 18px; background:#fff; border:1px solid var(--line); border-radius:15px;
}
.flow-step { display:flex; flex-direction:column; align-items:center; gap:5px; }
.flow-step span {
    width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#edf1f5; color:#8997a8;
    font-size:.68rem; font-weight:800;
}
.flow-step small { font-size:.59rem; color:#8d99aa; white-space:nowrap; }
.flow-step.active span { background:var(--blue-600); color:#fff; box-shadow:0 7px 16px rgba(13,125,232,.18); }
.flow-step.done span { background:var(--green); color:#fff; }
.flow-connector { height:2px; border-radius:99px; background:#ebeff4; }
.flow-connector.done { background:#83d5ae; }
.briefing-layout { display:grid; grid-template-columns:1.35fr .8fr; gap:18px; }
.briefing-card, .briefing-side-card, .assessment-card { padding:22px; }
.round-icon {
    width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
}
.round-icon.blue { background:#e8f3ff; color:#0b6ed4; }
.scanner-empty {
    min-height: 370px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:24px; margin:17px 0; background:linear-gradient(180deg,#f7fbff,#fbfdff);
    border:1px dashed #b9cee2; border-radius:16px; text-align:center;
}
.scanner-frame-placeholder {
    width:180px; height:180px; display:grid; place-items:center; border:2px dashed #6aa8e2;
    color:#0d78dc; font-size: 3.4rem; border-radius:18px; background:#fff;
    box-shadow: inset 0 0 0 8px #f1f8ff;
}
.scanner-empty strong { margin-top:18px; font-size:.88rem; }
.scanner-empty p { max-width:390px; color:#8a99aa; font-size:.68rem; margin:6px 0 0; }
.scanner-live { margin:17px 0; padding:14px; border-radius:16px; background:#071b2e; color:#fff; }
#qr-reader { width:100%; min-height:320px; border-radius:12px; overflow:hidden; }
.scanner-live p { margin:9px 0 2px; font-size:.65rem; color:rgba(255,255,255,.70); text-align:center; }
.briefing-side-card h2 { margin:6px 0 14px; font-size:1.0rem; }
.checklist { display:grid; gap:12px; }
.checklist > div { display:flex; gap:9px; align-items:flex-start; color:#50647a; font-size:.68rem; line-height:1.55; }
.check-bullet { width:22px; height:22px; flex:0 0 22px; display:grid; place-items:center; border-radius:7px; background:#e8f7ef; color:#20a366; font-size:.58rem; }
.info-strip {
    display:flex; gap:10px; margin-top:18px; padding:12px; border-radius:12px; background:#f2f8ff; color:#356a9a;
}
.info-strip > i { color:#0c79dc; margin-top:2px; }
.info-strip strong { display:block; font-size:.67rem; }
.info-strip span { display:block; margin-top:2px; font-size:.61rem; color:#7f91a5; }

.assessment-head { align-items:center; }
.assessment-head h2 { max-width:720px; }
.question-counter {
    display:inline-flex; align-items:baseline; gap:4px; padding:7px 10px; border-radius:999px; background:#edf6ff; color:#0d74d3;
    font-size:.72rem; font-weight:850;
}
.question-counter small { font-size:.58rem; color:#8ba3ba; }
.video-shell {
    margin: 18px 0; border-radius:16px; overflow:hidden; background:#031a2d;
}
.video-shell video { display:block; width:100%; max-height:460px; background:#000; }
.video-caption { padding:10px 13px; color:rgba(255,255,255,.72); font-size:.63rem; }
.question-box {
    display:flex; gap:12px; margin:17px 0 12px; padding:16px; border-radius:14px; background:#f3f8fd; border-left:4px solid #0b7ae0;
}
.question-number { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:#dff0ff; color:#0a74d0; font-size:.66rem; font-weight:850; flex:0 0 30px; }
.question-box p { margin:3px 0 0; font-size:.80rem; font-weight:700; line-height:1.55; }
.answer-list { display:grid; gap:9px; }
.answer-option {
    position:relative; display:flex; align-items:center; gap:10px; min-height:54px; padding:11px 13px;
    border:1px solid #dfe7ef; border-radius:12px; background:#fff; cursor:pointer; transition:.18s;
}
.answer-option:hover { border-color:#9ec6ea; background:#f7fbff; }
.answer-option input { position:absolute; opacity:0; pointer-events:none; }
.answer-radio {
    width:18px; height:18px; border-radius:50%; border:2px solid #b7c6d5; flex:0 0 18px;
    position:relative;
}
.answer-option input:checked + .answer-radio { border-color:#0e79dc; box-shadow:inset 0 0 0 4px #fff; background:#0e79dc; }
.answer-option input:checked ~ .answer-copy { color:#0b6dc6; font-weight:800; }
.answer-copy { font-size:.72rem; color:#52657a; line-height:1.5; }
.assessment-footer { display:flex; justify-content:space-between; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid #edf1f5; }

/* ---------- Login ---------- */
.login-page {
    min-height:100vh;
    background:#f4f9fd;
}
.login-shell {
    min-height:100vh; display:grid; grid-template-columns:1.14fr .86fr;
}
.login-brand-panel {
    position:relative; overflow:hidden; color:#fff; padding:40px 56px;
    display:flex; flex-direction:column; justify-content:space-between;
    background:
        radial-gradient(circle at 18% 22%, rgba(45,190,255,.26), transparent 31%),
        linear-gradient(148deg,#062b4f 0%,#0b5f9c 67%,#0d7fce 100%);
}
.login-brand-top, .login-brand-top > div:last-child { display:flex; align-items:center; }
.login-brand-top { gap:10px; }
.login-brand-top > div:last-child { flex-direction:column; align-items:flex-start; }
.login-hero-copy { max-width:640px; position:relative; z-index:2; }
.login-hero-copy h1 { margin:10px 0 10px; font-size:3rem; line-height:1.03; letter-spacing:-.035em; }
.login-hero-copy p { max-width:560px; margin:0; color:rgba(255,255,255,.76); font-size:.92rem; line-height:1.7; }
.login-feature-list { display:grid; gap:12px; margin-top:28px; max-width:500px; }
.login-feature-list > div { display:grid; grid-template-columns:34px 1fr; column-gap:10px; align-items:center; }
.login-feature-list span {
    grid-row:span 2; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.10);
}
.login-feature-list strong { font-size:.74rem; }
.login-feature-list small { color:rgba(255,255,255,.58); font-size:.62rem; }
.login-visual { position:relative; min-height:250px; margin-top:12px; }
.truck-shape {
    position:absolute; right:4%; bottom:22px; width:66%; height:130px;
    background:linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.09));
    border-radius:28px 22px 16px 16px; transform:skewX(-10deg);
    box-shadow:0 24px 48px rgba(0,0,0,.16);
}
.truck-shape::before { content:""; position:absolute; left:14%; top:18px; width:50%; height:62px; border:2px solid rgba(255,255,255,.45); border-radius:20px; }
.truck-shape::after { content:""; position:absolute; right:-28px; bottom:0; width:42px; height:70px; background:rgba(255,255,255,.17); border-radius:10px; }
.road-shape { position:absolute; left:-8%; right:-8%; bottom:0; height:48px; background:rgba(0,0,0,.13); transform:skewY(-4deg); }
.safety-worker {
    position:absolute; right:12%; bottom:84px; width:74px; height:74px; border-radius:50%;
    display:grid; place-items:center; background:rgba(255,255,255,.13); color:#fff; font-size:2rem; border:1px solid rgba(255,255,255,.18);
}
.visual-caption { position:absolute; left:0; bottom:0; font-size:.62rem; color:rgba(255,255,255,.55); font-style:italic; }
.login-form-panel {
    display:flex; flex-direction:column; justify-content:center; align-items:center; padding:38px;
    background:linear-gradient(180deg,#f8fbff,#eef5fa);
}
.login-card-premium {
    width:min(100%, 430px); padding:28px; background:#fff; border:1px solid #e1e9f1; border-radius:22px; box-shadow:0 22px 60px rgba(9,45,79,.12);
}
.login-card-heading { display:flex; align-items:flex-start; gap:12px; margin-bottom:24px; }
.login-icon-circle {
    width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:#eaf4ff; color:#0a73d4; flex:0 0 44px;
}
.login-card-heading h2 { margin:3px 0 2px; font-size:1.4rem; }
.login-card-heading p { margin:0; color:#8a97a6; font-size:.68rem; }
.login-form { display:grid; gap:17px; }
.field-wrap label { display:block; margin-bottom:7px; font-size:.68rem; font-weight:750; color:#516177; }
.field-control {
    display:flex; align-items:center; gap:8px; height:48px; padding:0 12px; border:1px solid #dce5ed; border-radius:11px; background:#fbfdff; transition:.18s;
}
.field-control:focus-within { border-color:#7bb6e9; box-shadow:0 0 0 3px rgba(13,125,232,.08); background:#fff; }
.field-control > i { color:#8ea0b3; font-size:.82rem; }
.field-control input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:#24344a; font-size:.76rem; }
.password-toggle { border:0; background:transparent; color:#9aa8b7; padding:4px; cursor:pointer; }
.field-error { display:block; margin-top:5px; color:#c74c57; font-size:.59rem; }
.login-error { display:flex; gap:7px; align-items:flex-start; color:#aa3e49; background:#fff0f2; border:1px solid #f2d1d6; padding:10px 11px; border-radius:10px; font-size:.65rem; }
.login-submit { min-height:48px; }
.login-help { display:flex; justify-content:center; }
.login-help a { color:#1171cb; font-size:.65rem; font-weight:700; text-decoration:none; }
.login-note {
    display:flex; align-items:center; justify-content:center; gap:7px; margin-top:18px; padding-top:16px; border-top:1px solid #edf1f5; color:#8996a6; font-size:.62rem; text-align:center;
}
.login-note i { color:#31af70; }
.login-footer { margin-top:15px; display:flex; gap:5px; flex-direction:column; align-items:center; color:#8491a0; }
.login-footer small { color:#a9b2be; font-size:.56rem; }

/* ---------- Admin shell ---------- */
.admin-page { background:#f5f8fc; }
.admin-shell { min-height:100vh; display:flex; }
.admin-sidebar {
    position:fixed; inset:0 auto 0 0; width:246px; padding:18px 13px;
    color:#fff; background:linear-gradient(180deg,#062d52,#05233f); box-shadow:12px 0 34px rgba(5,31,55,.12); display:flex; flex-direction:column; z-index:1100;
}
.admin-brand { display:flex; align-items:center; gap:10px; padding:2px 9px 19px; border-bottom:1px solid rgba(255,255,255,.07); }
.admin-brand > div:last-child { display:flex; flex-direction:column; }
.admin-brand small { letter-spacing:.12em; }
.admin-sidebar-title { padding:18px 10px 8px; color:rgba(255,255,255,.38); font-size:.59rem; font-weight:800; letter-spacing:.14em; }
.admin-nav { display:grid; gap:4px; }
.admin-nav-link {
    display:flex; align-items:center; gap:10px; min-height:41px; padding:0 11px; border-radius:10px;
    color:rgba(255,255,255,.68); text-decoration:none; font-size:.74rem; font-weight:650;
}
.admin-nav-link i { width:18px; text-align:center; }
.admin-nav-link:hover { color:#fff; background:rgba(255,255,255,.06); }
.admin-nav-link.active { color:#fff; background:linear-gradient(90deg,rgba(12,129,237,.88),rgba(25,101,185,.70)); box-shadow:0 10px 24px rgba(0,97,183,.17); }
.admin-sidebar-bottom { margin-top:auto; padding:14px 8px 4px; border-top:1px solid rgba(255,255,255,.07); }
.admin-online { display:flex; align-items:center; gap:8px; font-size:.63rem; color:rgba(255,255,255,.62); margin-bottom:10px; }
.admin-online span { width:7px; height:7px; border-radius:50%; background:#29c37c; box-shadow:0 0 0 4px rgba(41,195,124,.08); }
.admin-logout { display:block; padding:9px 10px; border-radius:9px; color:rgba(255,255,255,.72); text-decoration:none; font-size:.70rem; font-weight:700; background:rgba(255,255,255,.04); }
.admin-logout:hover { color:#fff; background:rgba(255,255,255,.07); }
.admin-main { width:100%; margin-left:246px; }
.admin-topbar {
    min-height:78px; padding:0 28px; background:#fff; border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
}
.admin-topbar h1 { margin:3px 0 0; font-size:1.0rem; letter-spacing:-.015em; }
.admin-kicker { font-size:.56rem; color:#91a0b1; }
.admin-topbar-right { display:flex; align-items:center; gap:12px; }
.admin-date { color:#77879a; font-size:.68rem; }
.admin-avatar { width:34px; height:34px; background:#eaf3fb; color:#0d619e; font-size:.67rem; }
.admin-content { padding:28px; max-width:1450px; margin:0 auto; }
.admin-flash { padding-left:0; padding-right:0; }

.admin-dashboard { display:grid; gap:18px; }
.admin-page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.admin-page-heading h2 { margin:5px 0 3px; font-size:1.55rem; letter-spacing:-.025em; }
.admin-page-heading p { margin:0; color:#8290a2; font-size:.71rem; }
.date-chip {
    display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid #dde6ef; border-radius:10px; background:#fff; color:#65758a; font-size:.65rem; font-weight:700;
}
.admin-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.admin-stat-card {
    display:flex; justify-content:space-between; align-items:center; gap:12px; padding:17px;
    background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm); overflow:hidden; position:relative;
}
.admin-stat-card::after { content:""; position:absolute; width:80px; height:80px; right:-27px; bottom:-27px; border-radius:50%; background:rgba(25,130,235,.06); }
.admin-stat-card > div:first-child span { display:block; font-size:.65rem; color:#8290a2; font-weight:700; }
.admin-stat-card strong { display:block; margin-top:4px; font-size:1.55rem; line-height:1; }
.admin-stat-card small { display:block; margin-top:5px; color:#9aa6b5; font-size:.59rem; }
.admin-stat-card.blue strong { color:#1777d6; }
.admin-stat-card.green strong { color:#20a869; }
.admin-stat-card.orange strong { color:#d8902b; }
.admin-stat-card.purple strong { color:#715fd0; }
.admin-stat-icon { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#eff6ff; color:#0c72d2; font-size:.9rem; }
.admin-stat-card.green .admin-stat-icon { color:#20a869; background:#edf9f3; }
.admin-stat-card.orange .admin-stat-icon { color:#d8902b; background:#fff6e7; }
.admin-stat-card.purple .admin-stat-icon { color:#715fd0; background:#f2efff; }
.admin-grid-2 { display:grid; grid-template-columns:1.15fr .85fr; gap:12px; }
.admin-panel { padding:19px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm); }
.admin-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding-bottom:13px; border-bottom:1px solid #edf1f5; }
.admin-panel-head h3 { margin:4px 0 0; font-size:.95rem; }
.admin-panel-head > i { color:#91a0b1; }
.admin-quick-links { display:grid; gap:5px; margin-top:10px; }
.admin-quick-link {
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:10px; border-radius:11px; text-decoration:none;
}
.admin-quick-link:hover { background:#f7faff; }
.admin-quick-link > div strong { display:block; font-size:.68rem; }
.admin-quick-link > div small { display:block; margin-top:2px; color:#9aa6b5; font-size:.58rem; }
.admin-quick-link > i { color:#9aa6b5; font-size:.62rem; }
.admin-quick-icon { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; }
.admin-quick-icon.blue { color:#0e73d2; background:#e9f4ff; }
.admin-quick-icon.indigo { color:#6d5fd0; background:#f0eeff; }
.admin-quick-icon.orange { color:#cc8322; background:#fff3df; }
.admin-quick-icon.green { color:#1c9f67; background:#e9f8f0; }
.system-status-list { display:grid; gap:10px; margin-top:12px; }
.system-status-list > div { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; padding:10px 0; border-bottom:1px solid #edf1f5; }
.system-status-list > div:last-child { border-bottom:0; }
.system-dot { width:8px; height:8px; border-radius:50%; background:#27bd79; box-shadow:0 0 0 5px rgba(39,189,121,.08); }
.system-status-list strong { display:block; font-size:.68rem; }
.system-status-list small { display:block; color:#9aa6b5; font-size:.58rem; margin-top:2px; }
.system-status-list b { color:#1d9c64; font-size:.59rem; }
.system-callout { display:flex; gap:10px; margin-top:8px; padding:11px; border-radius:11px; background:#f4f9fd; color:#34698e; }
.system-callout > i { color:#0d78d8; }
.system-callout strong { display:block; font-size:.63rem; }
.system-callout span { display:block; margin-top:2px; color:#8292a4; font-size:.58rem; }

/* Compatibility styling for existing admin pages */
.admin-content .history-panel, .admin-content .users-list, .admin-content .user-card, .admin-content .table-responsive, .admin-content .admin-panel,
.admin-content .reports-panel, .admin-content .settings-panel {
    background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm);
}
.admin-content table { width:100%; border-collapse:separate; border-spacing:0; }
.admin-content th { background:#f7f9fc !important; color:#53657a !important; }
.admin-content td, .admin-content th { border-color:#edf1f5 !important; font-size:.70rem; }
.admin-content input, .admin-content select, .admin-content textarea {
    border:1px solid #dce5ed !important; border-radius:10px !important; box-shadow:none !important;
}
.admin-content .btn-primary { background:linear-gradient(135deg,var(--blue-600),var(--blue-700)); border:0; }
.admin-content .btn-danger { background:#fff0f2; color:#c64d59; border:1px solid #f2d5d8; }
.admin-content .btn-success { background:#ebf8f0; color:#1b9761; border:1px solid #ccecd9; }

/* ---------- Mobile ---------- */
.sidebar-overlay {
    position:fixed; inset:0; background:rgba(1,19,34,.50); opacity:0; visibility:hidden; transition:.2s ease; z-index:1150;
}
.sidebar-overlay.is-visible { opacity:1; visibility:visible; }
.mobile-bottom-nav { display:none; }
body.menu-open { overflow:hidden; }

@media (max-width: 1100px) {
    .dashboard-two-col, .briefing-layout, .admin-grid-2 { grid-template-columns:1fr; }
    .status-grid { grid-template-columns:repeat(3,1fr); }
    .quick-action-grid { grid-template-columns:repeat(2,1fr); }
    .admin-stat-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 900px) {
    .app-main, .admin-main { margin-left:0; }
    .home-sidebar, .admin-sidebar { transform:translateX(-102%); transition:transform .25s ease; }
    .home-sidebar.is-open { transform:translateX(0); }
    .sidebar-close-btn { display:grid; place-items:center; }
    .mobile-menu-btn { display:grid; place-items:center; }
    .topbar { padding:0 16px; }
    .topbar-user-copy, .topbar-chevron { display:none; }
    .topbar-date { display:none; }
    .page-content, .admin-content { padding:19px 16px 90px; }
    .admin-topbar { padding:0 16px; }
}
@media (max-width: 700px) {
    .welcome-hero { min-height:220px; padding:23px 20px; }
    .welcome-copy h1 { font-size:1.45rem; }
    .hero-orb { display:none; }
    .status-grid { grid-template-columns:repeat(2,1fr); }
    .mini-stats { grid-template-columns:1fr; }
    .quick-action-grid { grid-template-columns:repeat(2,1fr); }
    .workflow-stepper { grid-template-columns:repeat(4,1fr); }
    .workflow-line { display:none; }
    .stepper-card { grid-template-columns:repeat(4,1fr); }
    .flow-connector { display:none; }
    .flow-step small { white-space:normal; text-align:center; }
    .assessment-head { align-items:flex-start; }
    .assessment-footer { flex-direction:column; }
    .login-shell { grid-template-columns:1fr; }
    .login-brand-panel { min-height:420px; padding:25px 22px; }
    .login-hero-copy h1 { font-size:2.15rem; }
    .login-visual { min-height:135px; }
    .login-form-panel { padding:22px 14px 30px; }
    .login-card-premium { padding:22px 18px; }
    .admin-stat-grid { grid-template-columns:1fr 1fr; }
    .admin-page-heading { align-items:flex-start; flex-direction:column; }
    .admin-date { display:none; }
}
@media (max-width: 560px) {
    .topbar-page strong { font-size:.84rem; }
    .card-heading h2, .section-heading-row h2 { font-size:.92rem; }
    .status-option { min-height:120px; }
    .status-option strong { font-size:.64rem; }
    .status-option small { font-size:.56rem; }
    .stepper-card { padding:12px 8px; }
    .flow-step span { width:26px; height:26px; }
    .flow-step small { font-size:.53rem; }
    .scanner-empty { min-height:300px; }
    .scanner-frame-placeholder { width:145px; height:145px; font-size:2.8rem; }
    .quick-action-grid { grid-template-columns:1fr 1fr; gap:9px; }
    .admin-stat-grid { grid-template-columns:1fr; }
    .admin-content table { min-width:720px; }
    .login-brand-panel { min-height:430px; }
}

@media (max-width: 430px) {
    .mobile-bottom-nav {
        position:fixed; left:0; right:0; bottom:0; z-index:1250;
        display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border-top:1px solid #e3eaf1;
        box-shadow:0 -6px 24px rgba(10,38,65,.08);
    }
    .mobile-nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:63px; color:#8b98a8; text-decoration:none; font-size:.54rem; font-weight:700; }
    .mobile-nav-item i { font-size:.78rem; }
    .mobile-nav-item.active { color:#0a72d5; }
    .home-sidebar { width:80vw; max-width:295px; }
    .login-feature-list { display:none; }
    .login-hero-copy p { font-size:.76rem; }
}


/* ---------- Briefing method & self-study ---------- */
.method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.method-card{background:#fff;border:1px solid #e5edf5;border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:20px;box-shadow:0 12px 30px rgba(14,53,92,.06);transition:.18s ease}
.method-card:hover{transform:translateY(-2px);border-color:#c7dff6;box-shadow:0 18px 36px rgba(14,53,92,.10)}
.method-icon{width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.method-icon.blue{color:#0c73d6;background:#e9f4ff}.method-icon.green{color:#149b62;background:#eaf9f1}
.method-copy{flex:1}.method-kicker{font-size:.66rem;font-weight:800;letter-spacing:.12em;color:#8a98a9}.method-copy h2{font-size:1.25rem;margin:7px 0 8px;color:#18324b}.method-copy p{color:#6b7b8d;line-height:1.65;margin:0}.method-points{display:grid;gap:8px;margin-top:16px;color:#526477;font-size:.86rem}.method-points span{display:flex;gap:8px;align-items:center}.method-points i{color:#25aa70}
.btn-main-green{background:linear-gradient(135deg,#21a66d,#14925d);color:#fff;border:none}.btn-main-green:hover{color:#fff;transform:translateY(-1px)}
.status-inline-done{display:inline-flex;align-items:center;gap:8px;color:#1b9b61;font-weight:700;padding:11px 14px;background:#effaf4;border-radius:12px}
.manual-qr-divider{display:flex;align-items:center;gap:10px;color:#96a3b1;margin:18px 0}.manual-qr-divider:before,.manual-qr-divider:after{content:"";height:1px;background:#e7edf3;flex:1}.manual-qr-divider span{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.manual-qr-form label{display:block;font-size:.78rem;font-weight:700;color:#4b5d71;margin-bottom:7px}.manual-qr-row{display:grid;grid-template-columns:1fr auto;gap:8px}.manual-qr-row input{min-width:0;border:1px solid #dbe5ee;border-radius:12px;padding:12px 13px;outline:none}.manual-qr-row input:focus{border-color:#7fb8ed;box-shadow:0 0 0 3px rgba(27,125,222,.08)}
.study-list{display:grid;gap:10px}.study-item{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #e8eef5;border-radius:15px;background:#fbfdff}.study-item-icon{width:40px;height:40px;border-radius:12px;background:#edf6ff;color:#1777c7;display:flex;align-items:center;justify-content:center}.study-item div{flex:1;display:grid;gap:3px}.study-item strong{font-size:.88rem;color:#223a52}.study-item small{font-size:.72rem;color:#8d9aaa}.study-check{color:#1ea868}.study-video-list{display:grid;gap:14px;margin-top:18px}.study-video-card{border:1px solid #e8eef5;border-radius:16px;padding:13px;background:#fcfdff}.study-video-heading{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}.study-video-heading strong{font-size:.86rem;color:#263d53}.study-video-heading span{font-size:.68rem;color:#7e8c9b}.study-video-card video{display:block;width:100%;border-radius:12px;background:#071827;max-height:360px}.study-confirm-form{margin-top:20px;padding-top:18px;border-top:1px solid #edf2f6}.confirm-check{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;color:#59697b;line-height:1.5;margin-bottom:13px}.confirm-check input{margin-top:3px;accent-color:#1a9e65}.empty-state-inline{display:flex;gap:10px;align-items:flex-start;padding:15px;border-radius:14px;background:#f6f9fc;color:#65758a;font-size:.78rem;line-height:1.55}.empty-state-inline i{color:#6f9ec7;margin-top:2px}
/* ---------- Assessment result ---------- */
.success-card{max-width:850px;margin:0 auto;text-align:center;padding:36px 28px}.success-icon{width:82px;height:82px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;background:#28b474;color:#fff;font-size:2rem;box-shadow:0 14px 28px rgba(40,180,116,.22)}.success-card h1{font-size:1.65rem;color:#19364f;margin:8px 0 7px}.success-card>p{color:#718197;max-width:560px;margin:0 auto;line-height:1.6}.result-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:24px 0}.result-summary-grid>div{padding:16px 12px;border:1px solid #e8eef4;border-radius:15px;background:#fbfdff;display:grid;gap:5px}.result-summary-grid span{font-size:.7rem;color:#8a97a6}.result-summary-grid strong{font-size:1rem;color:#1f405a}.success-actions{max-width:360px;margin:0 auto}
.assessment-footer button.is-disabled{opacity:.5;cursor:not-allowed;transform:none!important}
@media(max-width:800px){.method-grid{grid-template-columns:1fr}.result-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.manual-qr-row{grid-template-columns:1fr}.success-card{padding:28px 18px}}

/* ===== Reference-matched UI pass ===== */
.home-sidebar{background:linear-gradient(180deg,#082d4f 0%,#052440 100%);width:236px}
.app-main{margin-left:236px}
.sidebar-brand{padding:8px 10px 22px}
.pertamina-mark{position:relative;width:38px;height:38px;flex:0 0 38px}
.pertamina-mark span{position:absolute;height:10px;width:27px;border-radius:7px 2px 7px 2px;transform:skew(-28deg)}
.pertamina-mark span:nth-child(1){background:#fff;left:4px;top:4px}.pertamina-mark span:nth-child(2){background:#23a8e7;left:0;top:14px}.pertamina-mark span:nth-child(3){background:#19c279;left:10px;top:20px}
.brand-copy strong{font-size:1.05rem;color:#fff;letter-spacing:.02em}.brand-copy span{color:rgba(255,255,255,.55)}
.reference-hero{min-height:220px;display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden;background:#fff;border:1px solid #e3eaf1;border-radius:18px;box-shadow:0 12px 30px rgba(18,45,70,.07)}
.reference-hero-copy{position:relative;z-index:1;padding:34px 34px 30px;background:linear-gradient(90deg,#fff 0%,#fff 72%,rgba(255,255,255,.88) 100%)}
.reference-hero-copy h1{margin:10px 0 4px;font-size:2rem;color:#11263c}.reference-hero-copy p{margin:0;color:#63778d;font-size:.84rem}.hero-quote{display:flex;gap:9px;align-items:center;margin-top:26px;color:#173149;font-size:.78rem}.hero-quote span{width:28px;height:2px;background:#0d7de8;border-radius:9px}.reference-hero-photo{position:relative;min-height:220px;overflow:hidden;background:#e9f3f8}.reference-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:64% center}.reference-hero-photo:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff0 0%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.04) 100%);z-index:1}
.dashboard-two-col{grid-template-columns:1.18fr 1fr}.dashboard-card{border-radius:16px}.status-banner{margin:14px 0}.action-hint{display:flex;align-items:center;color:#8090a1;font-size:.72rem}.status-option{min-height:126px}.dashboard-quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.dashboard-quick-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e3eaf1;border-radius:14px;padding:15px;text-decoration:none;color:#19334b;box-shadow:0 8px 22px rgba(18,45,70,.05)}.dashboard-quick-card>i:first-child{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#edf5fc;color:#0d7de8}.dashboard-quick-card div{min-width:0;flex:1}.dashboard-quick-card strong{display:block;font-size:.79rem}.dashboard-quick-card span{display:block;margin-top:3px;color:#8393a4;font-size:.66rem;line-height:1.3}.dashboard-quick-card>i:last-child{font-size:.7rem;color:#97a7b8}.materials-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}.material-stat{background:#fff;border:1px solid #e4ebf1;border-radius:15px;padding:16px;display:flex;align-items:center;gap:12px}.material-stat-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center}.material-stat-icon.blue{background:#eaf4ff;color:#0d7de8}.material-stat-icon.green{background:#eaf9f1;color:#1ea56a}.material-stat-icon.orange{background:#fff4e7;color:#d67d18}.material-stat strong{display:block;font-size:1rem;color:#19334b}.material-stat small{display:block;color:#8292a3;font-size:.67rem;margin-top:2px}.profile-header-card{display:flex;align-items:center;gap:18px;padding:24px;background:#fff;border:1px solid #e3eaf1;border-radius:18px;box-shadow:0 12px 30px rgba(18,45,70,.06)}.profile-header-card>div:nth-child(2){flex:1}.profile-header-card h1{margin:5px 0 2px;font-size:1.5rem;color:#173149}.profile-header-card p{margin:0 0 8px;color:#74869a;font-size:.78rem}.profile-avatar-large{width:76px;height:76px;border-radius:50%;overflow:hidden;flex:0 0 76px;background:#eaf3fb;color:#0d7de8;display:grid;place-items:center;font-size:1.9rem;border:4px solid #fff;box-shadow:0 7px 18px rgba(13,125,232,.15)}.profile-avatar-large img{width:100%;height:100%;object-fit:cover}.profile-role{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;color:#376582;background:#eff7fc;border:1px solid #dbeaf4;padding:6px 9px;border-radius:999px}.profile-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-top:16px}.profile-detail-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid #eef2f6}.profile-detail-list>div{padding:14px 0;border-bottom:1px solid #eef2f6}.profile-detail-list span{display:block;color:#8a9aaa;font-size:.65rem;margin-bottom:3px}.profile-detail-list strong{display:block;color:#223e57;font-size:.75rem}.profile-actions{display:grid;gap:8px}.profile-actions a{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid #e7edf3;border-radius:12px;text-decoration:none;color:#28445c;background:#fbfdff}.profile-actions a>i:first-child{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:#eef6fc;color:#0d7de8}.profile-actions a span{flex:1}.profile-actions a strong,.profile-actions a small{display:block}.profile-actions a strong{font-size:.74rem}.profile-actions a small{margin-top:2px;color:#8797a8;font-size:.63rem}.profile-actions a>i:last-child{font-size:.66rem;color:#9babbb}.history-table-card{padding:20px}.history-table-wrap{overflow:auto;margin-top:14px}.employee-history-table{width:100%;border-collapse:separate;border-spacing:0;min-width:780px}.employee-history-table th{background:#f6f9fc;color:#6f8294;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:11px 12px;border-bottom:1px solid #e7edf2}.employee-history-table td{padding:13px 12px;border-bottom:1px solid #eef2f6;color:#41586e;font-size:.72rem;vertical-align:middle}.employee-history-table td strong{color:#203d55}.employee-status-pill{display:inline-flex;padding:5px 8px;border-radius:8px;font-size:.63rem;font-weight:800}.status-duty{background:#eaf8f0;color:#178650}.status-offshift{background:#eef3f7;color:#61778a}.status-sick{background:#fff0f1;color:#c54d56}.status-leave{background:#fff5e8;color:#bd7a1b}.status-permission{background:#f3efff;color:#6e56b4}.empty-state-inline.large{padding:38px 18px}.empty-state-inline.large i{font-size:1.8rem}
.admin-nav-link{font-size:.74rem}.admin-content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.material-admin-card video{width:100%;margin-top:14px;border-radius:12px;background:#0b2135;max-height:260px}.material-admin-head{display:flex;gap:11px;align-items:center}.material-admin-head div{min-width:0}.material-admin-head strong,.material-admin-head small{display:block}.material-admin-head strong{font-size:.8rem}.material-admin-head small{margin-top:3px;color:#8b9bad;font-size:.65rem}.material-admin-text{margin:14px 0;color:#6f8193;font-size:.72rem;line-height:1.6}.material-admin-actions{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid #edf1f5}.material-admin-actions a{font-size:.68rem;text-decoration:none;color:#0d70c5}.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}.detail-grid>div,.detail-box{padding:13px;border:1px solid #e4ebf1;border-radius:11px;background:#fbfdff}.detail-grid span,.detail-box span{display:block;color:#8a99a8;font-size:.62rem;text-transform:uppercase;font-weight:800;letter-spacing:.06em}.detail-grid strong{display:block;margin-top:4px;color:#23425a;font-size:.73rem}.detail-box{margin-top:12px}.detail-box p{margin:6px 0 0;color:#60758a;font-size:.72rem;line-height:1.6}.detail-box a{color:#0d70c5}
@media (max-width:1100px){.reference-hero{grid-template-columns:1fr}.reference-hero-photo{height:150px}.dashboard-two-col,.profile-grid{grid-template-columns:1fr}.dashboard-quick-grid,.materials-summary-grid{grid-template-columns:1fr}.admin-content-grid{grid-template-columns:1fr}.detail-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.app-main{margin-left:0}.home-sidebar{transform:translateX(-102%);transition:transform .22s ease}.home-sidebar.is-open{transform:translateX(0)}.mobile-menu-btn{display:grid;place-items:center}.topbar{padding:0 16px}.topbar-user-copy,.topbar-chevron{display:none}.topbar-date{font-size:.62rem}.page-content{padding:18px 14px 80px}.reference-hero-copy{padding:24px}.reference-hero-copy h1{font-size:1.5rem}.profile-header-card{align-items:flex-start;flex-wrap:wrap}.profile-header-card>a{width:100%}}
.login-help-text{font-size:.68rem;color:#8090a1}.login-visual{background-image:linear-gradient(180deg,rgba(6,45,82,.02),rgba(6,45,82,.08)),url('/images/pertamina-truck.jpg');background-size:cover;background-position:center;min-height:210px}.login-visual .truck-shape,.login-visual .road-shape{display:none}#attendance{scroll-margin-top:92px}
.btn-main:disabled{opacity:.52;cursor:not-allowed;transform:none!important;box-shadow:none}.btn-main:disabled:hover{transform:none}.status-inline-done{display:inline-flex;align-items:center;gap:7px;color:#197b4c;font-size:.7rem;font-weight:800}
.profile-edit-card{padding:22px}.profile-edit-top{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid #edf1f5}.profile-edit-top h2{margin:4px 0 2px;font-size:1.05rem}.profile-edit-top p{margin:0;color:#8494a5;font-size:.68rem}.profile-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.profile-form-grid>div{display:grid;gap:6px}.profile-form-grid label{font-size:.68rem;font-weight:800;color:#435b71}.profile-form-grid input,.profile-form-grid textarea{width:100%;border:1px solid #dce5ed;border-radius:10px;padding:10px 11px;color:#243f57;background:#fff;font-size:.74rem;outline:none}.profile-form-grid input:focus,.profile-form-grid textarea:focus{border-color:#6caee0;box-shadow:0 0 0 3px rgba(13,125,232,.08)}.profile-form-grid small{color:#8999a9;font-size:.6rem}.profile-form-wide{grid-column:1/-1}.profile-edit-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid #edf1f5}@media(max-width:700px){.profile-form-grid{grid-template-columns:1fr}.profile-form-wide{grid-column:auto}.profile-edit-actions{justify-content:stretch}.profile-edit-actions .btn-main{flex:1}}