/* ============ Token ============ */
:root {
    --ink: #12263F;
    --ink-2: #1B3557;
    --ink-line: rgba(255, 255, 255, .09);
    --paper: #F4F6F9;
    --surface: #FFFFFF;
    --line: #E3E8EF;
    --text: #18222F;
    --muted: #64748B;
    --brand: #2B50F5;
    --brand-dark: #1F3FD9;
    --brand-soft: #E9EDFF;
    --ok: #0B7A53;
    --ok-soft: #E1F5EC;
    --warn: #8A5A00;
    --warn-soft: #FFF0CC;
    --bad: #C9343B;
    --font-head: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
    --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --r-lg: 16px;
    --r-md: 10px;

    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--paper);
}

body {
    font-family: var(--font-body);
    font-size: .9375rem;
    color: var(--text);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

a:focus-visible,
button:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ============ Kerangka ============ */
.app {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    min-height: 100vh;
}

.main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1;
    width: 100%;
    max-width: 1440px;
    padding: 28px 32px;
}

.foot {
    padding: 18px 32px;
    font-size: .8rem;
    color: var(--muted);
}

/* ============ Sidebar ============ */
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
    background: var(--ink);
    color: #C9D4E3;
}

.sidebar a:focus-visible { outline-color: #9FB2FF; }

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 22px;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.12rem;
    letter-spacing: -.01em;
}

.brand svg { color: #7F98FF; flex-shrink: 0; }

.nav-group-label {
    padding: 20px 12px 6px;
    font-size: .78rem;
    font-weight: 600;
    color: #7C8DA6;
}

.nav-link-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    margin-bottom: 2px;
    border-radius: var(--r-md);
    color: #C9D4E3;
    font-weight: 500;
    text-decoration: none;
}

.nav-link-item i { font-size: 1.05rem; color: #7C8DA6; }
.nav-link-item:hover { background: var(--ink-2); color: #fff; }
.nav-link-item:hover i { color: #fff; }
.nav-link-item.active { background: var(--brand); color: #fff; }
.nav-link-item.active i { color: #fff; }

.sidebar-foot {
    margin-top: auto;
    padding: 14px 12px 0;
    border-top: 1px solid var(--ink-line);
    font-size: .8rem;
    color: #7C8DA6;
}

.scrim { display: none; }

/* ============ Topbar ============ */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    background: rgba(244, 246, 249, .9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

.topbar-title {
    margin: 0;
    font: 700 1.15rem var(--font-head);
    letter-spacing: -.01em;
}

.menu-btn {
    display: none;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: 1.2rem;
}

.usermenu {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
}

.avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

.usermenu-text { text-align: left; line-height: 1.2; }
.usermenu-text b { display: block; font-size: .85rem; }
.usermenu-text small { font-size: .75rem; color: var(--muted); }
.usermenu-panel { min-width: 240px; border-radius: 12px; border-color: var(--line); padding: 6px 0; }

/* ============ Komponen umum ============ */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.panel + .panel { margin-top: 24px; }

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.panel-head h3 { margin: 0; font: 700 1.05rem var(--font-head); letter-spacing: -.005em; }
.panel-head a { font-size: .85rem; font-weight: 600; color: var(--brand); text-decoration: none; }
.panel-head a:hover { text-decoration: underline; }
.panel-body { padding: 18px 20px; }

.btn { border-radius: var(--r-md); font-weight: 600; }

.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1A35B8;
    --bs-btn-active-border-color: #1A35B8;
    --bs-btn-focus-shadow-rgb: 43, 80, 245;
}

.btn-line {
    --bs-btn-color: var(--text);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--line);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: #F1F4F9;
    --bs-btn-hover-border-color: #CBD3DF;
    --bs-btn-active-color: var(--text);
    --bs-btn-active-bg: #E8ECF3;
    --bs-btn-active-border-color: #CBD3DF;
}

.form-control {
    padding: .65rem .85rem;
    border-radius: var(--r-md);
    border-color: #D5DCE6;
}

.form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(43, 80, 245, .15);
}

.form-label { font-weight: 600; font-size: .88rem; }
.alert { border-radius: 12px; }

/* Status pill */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.pill-ditugaskan { background: #EDF0F5; color: #4A5A70; }
.pill-berjalan   { background: var(--brand-soft); color: var(--brand-dark); }
.pill-berjalan::before { animation: blink 1.6s ease-in-out infinite; }
.pill-selesai    { background: var(--ok-soft); color: var(--ok); }
.pill-baru       { background: var(--warn-soft); color: var(--warn); }
.pill-diproses   { background: #DFF3F6; color: #0B6B7A; }
.pill-diteruskan { background: var(--brand-soft); color: var(--brand-dark); }
.pill-lain       { background: #EDF0F5; color: #4A5A70; }

@keyframes blink { 50% { opacity: .25; } }

/* Tabel */
.tbl { width: 100%; border-collapse: collapse; }

.tbl th {
    padding: 10px 20px;
    background: #FAFBFC;
    border-bottom: 1px solid var(--line);
    font-size: .8rem;
    font-weight: 600;
    text-align: left;
    color: var(--muted);
}

.tbl td { padding: 14px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: #FAFBFF; }

.datebox { display: flex; align-items: center; gap: 12px; }

.datebox-tile {
    width: 46px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    background: var(--brand-soft);
    color: var(--brand-dark);
    line-height: 1;
}

.datebox-tile b { font: 700 1.2rem var(--font-head); }
.datebox-tile span { margin-top: 3px; font-size: .7rem; font-weight: 600; }
.is-today .datebox-tile { background: var(--brand); color: #fff; }
.datebox-rel { font-size: .8rem; color: var(--muted); }
.datebox-rel.today { color: var(--brand-dark); font-weight: 600; }
.datebox-rel.late { color: var(--bad); font-weight: 600; }

/* Daftar baris */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { padding: 13px 20px; border-bottom: 1px solid var(--line); }
.rows li:last-child { border-bottom: 0; }
.row-flex { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.row-title { font-weight: 600; }
.row-sub { font-size: .82rem; color: var(--muted); }
.empty { padding: 28px 20px; text-align: center; color: var(--muted); }

/* Batang per kategori */
.bar-row + .bar-row { margin-top: 14px; }
.bar-top { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: .88rem; }
.bar-track { height: 8px; border-radius: 99px; background: #EDF0F5; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; background: var(--brand); }

/* Garis waktu aktivitas */
.timeline { list-style: none; margin: 0; padding: 6px 20px 8px; }
.timeline li { position: relative; padding: 10px 0 10px 24px; }

.timeline li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--line);
}

.timeline li:first-child::before { top: 18px; }
.timeline li:last-child::before { bottom: calc(100% - 18px); }

.timeline li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 17px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--brand);
}

/* ============ Dashboard ============ */
.hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.hero-date { margin: 0 0 6px; font-weight: 500; color: var(--muted); }

.hero-title {
    margin: 0;
    font: 700 clamp(1.9rem, 3.4vw, 2.7rem)/1.05 var(--font-head);
    letter-spacing: -.025em;
}

.hero-sub { margin: 10px 0 0; max-width: 58ch; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Panel khas: bingkai viewfinder */
.vf { position: relative; }

.vf-c {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2px solid #7F98FF;
    pointer-events: none;
}

.vf-c.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.vf-c.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.vf-c.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.vf-c.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }

.onset {
    padding: 34px 40px;
    margin-bottom: 24px;
    border-radius: var(--r-lg);
    background: var(--ink);
    color: #fff;
}

.onset-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-size: .88rem;
    font-weight: 600;
    color: #AFC0FF;
}

.live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #FF5A5F;
    box-shadow: 0 0 0 4px rgba(255, 90, 95, .22);
}

.is-live .live-dot { animation: blink 1.6s ease-in-out infinite; }

.onset-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    padding: 16px 0;
}

.onset-item + .onset-item { border-top: 1px solid var(--ink-line); }
.onset-title { margin: 0 0 8px; font: 700 clamp(1.3rem, 2.4vw, 1.75rem)/1.15 var(--font-head); letter-spacing: -.015em; }
.onset-sub { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; color: #AFC0FF; }
.onset-meta { text-align: right; }
.onset-clock { font: 700 2.3rem/1 var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.onset-meta small { display: block; margin-top: 6px; color: #AFC0FF; }
.onset-empty { margin: 0; font-size: 1.1rem; }
.onset-empty a { color: #fff; font-weight: 600; }

/* Deret angka */
.stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    margin-bottom: 24px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.stat { display: block; padding: 18px 22px; background: var(--surface); color: inherit; text-decoration: none; }
.stat:hover { background: #FAFBFF; }
.stat-num { display: block; font: 700 2rem/1 var(--font-head); letter-spacing: -.02em; }
.stat-label { display: block; margin-top: 8px; font-weight: 600; }
.stat-hint { display: block; font-size: .8rem; color: var(--muted); }
.stat-hint.bad { color: var(--bad); font-weight: 600; }

/* ============ Halaman sementara ============ */
.soon { padding: 56px 24px; text-align: center; }

.soon-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.4rem;
}

.soon h3 { margin: 0 0 6px; font: 700 1.3rem var(--font-head); }
.soon-list { display: inline-block; margin: 0 0 24px; padding-left: 1.1rem; text-align: left; color: var(--muted); }

/* ============ Login ============ */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

.auth-art {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 56px;
    background: var(--ink);
    color: #fff;
}

.brand-static {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 700 1.15rem var(--font-head);
}

.brand-static svg { color: #7F98FF; }
.auth-art h2 { max-width: 14ch; margin: 0 0 16px; font: 700 clamp(2.1rem, 3.6vw, 3.1rem)/1.05 var(--font-head); letter-spacing: -.025em; }
.auth-art p { max-width: 40ch; margin: 0; color: #AFC0FF; }

.auth-form-wrap { display: flex; align-items: center; justify-content: center; padding: 32px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h1 { margin: 0 0 6px; font: 700 1.9rem var(--font-head); letter-spacing: -.02em; }
.auth-mobile-brand { display: none; align-items: center; gap: 10px; margin-bottom: 28px; color: var(--ink); font: 700 1.1rem var(--font-head); }

/* ============ Responsif ============ */
@media (max-width: 1199.98px) {
    .stats { grid-template-columns: repeat(3, 1fr); }
    .stat:last-child { grid-column: span 2; }
}

@media (max-width: 991.98px) {
    .app { display: block; }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1040;
        width: 280px;
        height: 100%;
        transform: translateX(-100%);
        transition: transform .22s ease;
    }

    body.sidebar-open .sidebar { transform: none; }

    .scrim { position: fixed; inset: 0; z-index: 1030; background: rgba(10, 20, 35, .5); }
    body.sidebar-open .scrim { display: block; }

    .menu-btn { display: grid; }
    .topbar { padding: 12px 16px; }
    .content { padding: 20px 16px; }
    .foot { padding: 16px; }
    .onset { padding: 28px 24px; }
    .onset-meta { text-align: left; }

    .auth { grid-template-columns: 1fr; }
    .auth-art { display: none; }
    .auth-mobile-brand { display: flex; }
}

@media (max-width: 575.98px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stat:last-child { grid-column: 1 / -1; }
    .tbl th, .tbl td { padding-left: 14px; padding-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* ============ Baris yang bisa diklik ============ */
.tbl tbody tr[data-project-detail] { cursor: pointer; }
.tbl tbody tr[data-project-detail]:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.onset-item[data-project-detail] {
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s ease;
}

.onset-item[data-project-detail]:hover { background: rgba(255, 255, 255, .07); }
.onset-item[data-project-detail]:focus-visible { outline: 2px solid #9FB2FF; outline-offset: 2px; }

/* ============ Pop up detail ============ */
#projectModal .modal-content {
    border: 0;
    border-radius: var(--r-lg);
}

.dm-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    padding: 10px;
    border-radius: 50%;
    background-color: #EEF1F6;
    opacity: 1;
}

.dm-close:hover { background-color: #E1E6EE; }
#projectModal .modal-body { padding: 32px 36px 36px; }
.dm-loading { padding: 56px 0; text-align: center; color: var(--muted); }

.dm-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-right: 44px; }
.dm-kat { font-size: .85rem; font-weight: 600; color: var(--muted); }
.dm-title { margin: 0 0 10px; padding-right: 44px; font: 700 clamp(1.4rem, 3vw, 1.85rem)/1.15 var(--font-head); letter-spacing: -.02em; }

.dm-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 14px; color: var(--muted); }
.dm-meta i { margin-right: 6px; }
.dm-text { max-width: 68ch; margin: 0 0 22px; line-height: 1.6; }

.dm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px 24px;
    padding: 18px 20px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: #F6F8FB;
}

.dm-k { font-size: .8rem; font-weight: 600; color: var(--muted); }
.dm-v { font-weight: 600; }

.dm-h { margin: 26px 0 10px; font: 700 1.02rem var(--font-head); }
.dm-empty { margin: 0; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); }

.dm-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }

.dm-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}

.dm-list li:last-child { border-bottom: 0; }
.dm-li-main { flex: 1 1 180px; min-width: 0; }
.dm-li-side { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: .8rem; }
.dm-ok { color: var(--ok); font-weight: 600; }
.dm-wait { color: var(--warn); font-weight: 600; }
.dm-ok i, .dm-wait i { margin-right: 6px; }

.dm-link { font-weight: 600; color: var(--brand); text-decoration: none; }
.dm-link:hover { text-decoration: underline; }

.pill-pic { background: var(--ink); color: #fff; }
.pill-bad { background: #FDE8E9; color: var(--bad); }

@media (max-width: 575.98px) {
    #projectModal .modal-body { padding: 26px 20px 28px; }
    .dm-li-side { width: 100%; }
}
/* ============ Pembaruan otomatis ============ */
.live-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 6px;
    font-size: .8rem;
    color: var(--muted);
}

.live-dot-sm { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* ============ Panel di lapangan + perlu tindakan ============ */
.onset-col .onset { height: 100%; margin-bottom: 0; padding: 30px 32px; }
.panel-fill { display: flex; flex-direction: column; height: 100%; }

.pill-tinggi { background: #FDE8E9; color: var(--bad); }
.pill-sedang { background: var(--warn-soft); color: var(--warn); }
.pill-rendah { background: #EDF0F5; color: #4A5A70; }

.rows li.tx { padding: 0; }

.tx-in {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-left: 3px solid transparent;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.tx-in:hover { background: #FAFBFF; color: inherit; }
.tx-in:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.tx-main { min-width: 0; }
.tx-tinggi .tx-in { border-left-color: var(--bad); }
.tx-sedang .tx-in { border-left-color: #E0A100; }
.tx-rendah .tx-in { border-left-color: #B6C0CF; }

.tx-more summary {
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
    list-style: none;
}

.tx-more summary::-webkit-details-marker { display: none; }
.tx-more[open] summary { border-bottom: 1px solid var(--line); }

.tx-ok { padding: 44px 20px; text-align: center; color: var(--muted); }
.tx-ok i { display: block; margin-bottom: 8px; font-size: 1.9rem; color: var(--ok); }

/* ============ Jadwal mingguan ============ */
.week-nav { display: flex; align-items: center; gap: 8px; }
.week-range { margin-right: 4px; font-size: .85rem; color: var(--muted); }

.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.week-day { min-height: 170px; border-right: 1px solid var(--line); }
.week-day:last-child { border-right: 0; }
.week-day.is-weekend { background: #FAFBFC; }

.week-head { display: flex; align-items: baseline; gap: 8px; padding: 12px 12px 8px; }
.week-name { font-size: .82rem; font-weight: 600; color: var(--muted); }
.week-num { font: 700 1.25rem var(--font-head); }
.week-flag { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--brand-dark); }
.week-day.is-today .week-head { background: var(--brand-soft); }
.week-day.is-today .week-num { color: var(--brand-dark); }

.week-body { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 12px; }
.week-empty { padding: 4px 2px; font-size: .8rem; color: #9AA7B8; }

.wk-ev {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-left: 3px solid #9AA7B8;
    border-radius: 8px;
    background: var(--surface);
    font: inherit;
    text-align: left;
    color: inherit;
}

.wk-ev:hover { background: #F6F8FF; }
.wk-ev:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.wk-berjalan { border-left-color: var(--brand); }
.wk-selesai { border-left-color: var(--ok); opacity: .7; }
.wk-ev.is-conflict { border-color: var(--bad); border-left-color: var(--bad); background: #FFF6F6; }
.wk-title { display: block; font-size: .85rem; font-weight: 600; line-height: 1.25; }
.wk-sub { display: block; margin-top: 2px; font-size: .75rem; color: var(--muted); }

.panel-sub {
    padding: 14px 20px 10px;
    border-top: 1px solid var(--line);
    font: 700 .95rem var(--font-head);
}

.mx th, .mx td { padding: 10px 8px; text-align: center; }
.mx th:first-child, .mx td:first-child { min-width: 170px; padding-left: 20px; text-align: left; }
.mx th.is-today { background: var(--brand-soft); color: var(--brand-dark); }
.mx-free { font-size: .78rem; color: #9AA7B8; }

/* Ketersediaan petugas: teks selalu ada, warna hanya penguat */
.av { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.av-yes { background: var(--ok-soft); color: var(--ok); }
.av-no  { background: #EDF0F5; color: #4A5A70; }
.av-na  { color: #9AA7B8; font-weight: 400; }

/* Kolom pencarian di dalam panel */
[hidden] { display: none !important; }

.filter-box { position: relative; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.filter-box i { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.filter-box .form-control { padding-top: .45rem; padding-bottom: .45rem; padding-left: 2.25rem; font-size: .9rem; }
.rows-scroll { max-height: 340px; overflow-y: auto; }

.mx-chip {
    display: block;
    width: 100%;
    max-width: 130px;
    margin: 2px auto;
    padding: 4px 8px;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mx-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mx-chip.is-done { background: var(--ok-soft); color: var(--ok); }
.mx-chip.is-conflict { background: #FDE8E9; color: var(--bad); }

/* ============ Peringatan bentrok di pop up ============ */
.dm-warn {
    display: flex;
    gap: 12px;
    margin: 0 0 18px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #FDE8E9;
    color: #8C1F25;
}

.dm-warn i { margin-top: 2px; }
.dm-warn ul { margin: 4px 0 0; padding-left: 1.1rem; }

@media (max-width: 991.98px) {
    .onset-col .onset { padding: 26px 22px; }
    .week { grid-template-columns: 1fr; }
    .week-day { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
    .week-day:last-child { border-bottom: 0; }
}

/* ============ Kalender bulanan (sederhana: angka + titik status) ============ */
.mo-title { margin-right: 6px; font: 700 .95rem var(--font-head); }
.mo-wrap { padding: 10px 16px 14px; }

.mo-head, .mo-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mo-dow { padding: 4px 0 6px; text-align: center; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.mo-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 56px;
    padding: 6px 2px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.mo-day:hover { background: #F1F4F9; }
.mo-day:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mo-day.is-other { opacity: .4; }
.mo-day.is-today { border-color: var(--brand); background: var(--brand-soft); }

.mo-num { font: 700 .9rem var(--font-head); line-height: 1; }
.mo-day.is-today .mo-num { color: var(--brand-dark); }

.mo-dots { display: flex; justify-content: center; gap: 4px; min-height: 8px; }
.mo-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #9AA7B8; }
.mo-dot-berjalan { background: var(--brand); }
.mo-dot-selesai  { background: var(--ok); }

.mo-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; color: var(--muted); font-size: .78rem; }
.mo-legend .mo-dot { margin-right: 6px; }

@media (max-width: 575.98px) {
    .mo-wrap { padding: 8px; }
    .mo-grid, .mo-head { gap: 2px; }
    .mo-day { min-height: 50px; }
}

/* ============ Pop up per tanggal ============ */
.dm-back { margin-bottom: 14px; }
.dm-ev { cursor: pointer; }
.dm-ev:hover { background: #FAFBFF; }
.dm-ev:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.dm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 11px; border-radius: 999px; background: #EDF0F5; color: #4A5A70; font-size: .82rem; font-weight: 600; }
.dm-chip small { font-size: .72rem; font-weight: 500; opacity: .75; }
.dm-chip.is-free { background: var(--ok-soft); color: var(--ok); }

/* Baris panel yang bisa diklik untuk membuka rincian kegiatan */
.rows li[data-project-detail] { cursor: pointer; }
.rows li[data-project-detail]:hover { background: #FAFBFF; }
.rows li[data-project-detail]:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.row-title .pill-pic { margin-left: 6px; vertical-align: middle; }

/* Judul kelompok status di dalam daftar */
.rows li.rows-group { display: flex; align-items: center; gap: 8px; padding: 8px 20px; background: #F6F8FB; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.rows-group .mo-dot { margin: 0; }
.rows-count { margin-left: auto; font-weight: 600; }
.mo-dot-bad { background: var(--bad); }

/* Baris petugas dan alat: nama di kiri, label bertugas/terpakai di kanan */
.rows li.row-ket { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row-ket .row-main { min-width: 0; flex: 1; }
.row-ket .row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-ket .pill { flex-shrink: 0; }

/* Peta kegiatan */
.peta-slot { padding: 0; }
.peta { position: relative; isolation: isolate; width: 100%; height: 380px; background: #EAF0F7; }
.peta-legend { padding: 12px 20px; border-top: 1px solid var(--line); }
.leaflet-container { font-family: var(--font-body); }
.peta-pin { display: block; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(18, 38, 63, .45); }
.peta-pin-ditugaskan { background: #4A5A70; }
.peta-pin-berjalan { background: var(--brand); animation: peta-pulse 1.8s ease-out infinite; }
@keyframes peta-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(43, 80, 245, .5), 0 1px 4px rgba(18, 38, 63, .45); }
    100% { box-shadow: 0 0 0 14px rgba(43, 80, 245, 0), 0 1px 4px rgba(18, 38, 63, .45); }
}
.peta-pop strong { display: block; margin-bottom: 2px; }
.peta-pop-sub { font-size: .8rem; color: var(--muted); }
.peta-pop a { display: inline-block; margin-top: 6px; font-size: .82rem; font-weight: 600; }
@media (max-width: 575.98px) { .peta { height: 320px; } }
/* ---------- Form project ---------- */
.pf-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; margin-bottom: 18px; }
.pf-card h2 { margin: 0 0 2px; font: 700 1.05rem var(--font-head); }
.pf-hint { margin: 0 0 16px; color: var(--muted); font-size: .86rem; }
.pf-hide { display: none !important; }
.pf-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.pf-pick { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; cursor: pointer; font-weight: 600; font-size: .92rem; }
.pf-pick small { display: block; margin-top: 1px; color: var(--muted); font-size: .76rem; font-weight: 500; }
.pf-pick:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.pf-pick:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.pf-actions { display: flex; justify-content: flex-end; gap: 10px; padding-bottom: 12px; }
@media (max-width: 575.98px) {
    .pf-card { padding: 16px; }
    .pf-actions .btn { flex: 1; }
}
.pf-map { height: 340px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; z-index: 0; }

/* ---------- Halaman petugas ---------- */
.stats.stats-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 767.98px) { .stats.stats-4 { grid-template-columns: repeat(2, 1fr); } }

.tg-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0; color: inherit; text-decoration: none; }
.rows li:has(> .tg-row) { padding: 0; }
.tg-row { padding: 13px 20px; }
.tg-row:hover { background: #FAFBFF; }
.tg-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.tg-main { min-width: 0; flex: 1; }
.tg-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.tg-side small { color: var(--muted); font-size: .76rem; font-weight: 600; }
.tg-note { margin-top: 4px; font-size: .8rem; font-weight: 600; color: var(--warn); }
a.tg-onset { color: inherit; text-decoration: none; }
a.tg-onset:hover .onset-title { text-decoration: underline; }

.tg-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; background: #E8ECF3; border-radius: 12px; }
.tg-tab { padding: 7px 20px; border-radius: 9px; color: var(--muted); font-weight: 600; text-decoration: none; }
.tg-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(18, 38, 63, .12); }

.tg-head { padding: 22px 24px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.tg-title { margin: 0 0 10px; font: 700 clamp(1.4rem, 3vw, 1.85rem)/1.15 var(--font-head); letter-spacing: -.02em; }

.tg-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.tg-step { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: .82rem; font-weight: 600; color: var(--muted); }
.tg-step-no { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: #EDF0F5; font-size: .78rem; }
.tg-step.is-done { color: var(--ok); }
.tg-step.is-done .tg-step-no { background: var(--ok); color: #fff; }
.tg-step.is-now { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.tg-step.is-now .tg-step-no { background: var(--brand); color: #fff; }
@media (max-width: 991.98px) { .tg-steps { grid-template-columns: repeat(2, 1fr); } }

.tg-rules { margin: 0; padding-left: 1.2rem; line-height: 1.6; }
.tg-tim { border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; }
.tg-block { margin: 0 0 16px; padding-left: 1.1rem; color: var(--bad); font-weight: 600; font-size: .9rem; }
.tg-clock-box { padding: 20px; border-radius: var(--r-md); background: var(--ink); color: #fff; text-align: center; }
.tg-clock-box .live-label { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 8px; font-size: .85rem; font-weight: 600; color: #AFC0FF; }
.tg-clock-box small { display: block; margin-top: 8px; color: #AFC0FF; }
.tg-kembali { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(100px, .7fr) minmax(150px, 1.6fr); align-items: center; gap: 10px; }
.tg-kembali-cek { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; }
@media (max-width: 575.98px) { .tg-kembali { grid-template-columns: 1fr; } }

/* ============ Absensi ============ */
.absen-body { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 22px; padding: 20px; align-items: center; }
.absen-clock { padding: 20px 16px; border-radius: var(--r-lg); background: var(--ink); color: #fff; text-align: center; }
.absen-clock small { display: block; color: #AFC0FF; font-size: .8rem; }
.absen-time { margin: 6px 0; font: 700 2.3rem/1.1 var(--font-head); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.absen-rule { margin: 0 0 12px; color: var(--muted); font-size: .88rem; }
.absen-state { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; font-size: .95rem; }
.absen-note { margin: 0 0 14px; color: var(--muted); font-size: .88rem; }
.absen-form { margin: 0; }
.pill-abs-hadir      { background: var(--ok-soft); color: var(--ok); }
.pill-abs-terlambat  { background: var(--warn-soft); color: var(--warn); }
.pill-abs-dinas_luar { background: var(--brand-soft); color: var(--brand-dark); }
.pill-abs-izin, .pill-abs-sakit, .pill-abs-cuti { background: #DFF3F6; color: #0B6B7A; }
.pill-abs-alpa       { background: #FDE8E9; color: var(--bad); }
.pill-abs-koreksi    { background: #EEE8FB; color: #5B3FB0; }
.pill-abs-kosong     { background: #EDF0F5; color: #4A5A70; }
@media (max-width: 767.98px) {
    .absen-body { grid-template-columns: 1fr; }
}

/* Izin & cuti */
.pill-cuti-menunggu   { background: var(--warn-soft); color: var(--warn); }
.pill-cuti-diperiksa  { background: #E3EEFC; color: #1F5FA8; }
.pill-cuti-disetujui  { background: var(--ok-soft); color: var(--ok); }
.pill-cuti-ditolak    { background: #FDE8E9; color: var(--bad); }
.pill-cuti-dibatalkan { background: #EDF0F5; color: #4A5A70; }
.nav-badge { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .72rem; font-weight: 700; text-align: center; }
.nav-link-item.active .nav-badge { background: #fff; color: var(--brand-dark); }

/* Jarak antar modul dashboard: panel yang langsung mengikuti baris kolom */
.row.g-4 + .panel { margin-top: 24px; }

/* Jarak antar modul dashboard */
.panel + .stats { margin-top: 24px; }       /* kartu absensi lalu deret angka */
.row.g-4 + .panel { margin-top: 24px; }     /* baris kolom lalu panel berikutnya */

/* Absensi: ringkasan bulan ini sebagai grid 2x2 di sisi kanan kartu */
.absen-body { grid-template-columns: minmax(0, 250px) minmax(0, 1fr) minmax(0, 420px); }
.absen-sum { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 0 0 0 22px; border-left: 1px solid var(--line); }
.absen-sum-judul { margin: 0 0 10px; font: 700 .78rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.absen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.absen-kartu { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: var(--r-md); background: var(--paper); }
.absen-ik { flex: 0 0 36px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.05rem; }
.absen-kartu b { display: block; font: 700 1.5rem/1.05 var(--font-head); font-variant-numeric: tabular-nums; }
.absen-lb { display: block; margin-top: 2px; font-weight: 600; font-size: .84rem; }
.absen-kartu small { display: block; color: var(--muted); font-size: .74rem; }
.absen-kartu.ok .absen-ik { background: var(--ok-soft); color: var(--ok); }
.absen-kartu.warn .absen-ik { background: var(--warn-soft); color: var(--warn); }
.absen-kartu.dinas .absen-ik { background: var(--brand-soft); color: var(--brand-dark); }
.absen-kartu.netral .absen-ik { background: #EDF0F5; color: #4A5A70; }
.absen-kartu.bad { background: #FDE8E9; }
.absen-kartu.bad .absen-ik { background: #fff; color: var(--bad); }
.absen-kartu.bad b, .absen-kartu.bad .absen-lb { color: var(--bad); }

@media (max-width: 1199.98px) {
    .absen-body { grid-template-columns: minmax(0, 250px) minmax(0, 1fr) minmax(0, 340px); }
}
@media (max-width: 991.98px) {
    .absen-body { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
    .absen-sum { grid-column: 1 / -1; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 767.98px) {
    .absen-body { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .absen-grid { grid-template-columns: 1fr; }
}

/* ---- Kegiatan multi-tim: kartu hari tugas ---- */
.kg-hari { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; margin-bottom: 10px; }
.kg-hari > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; cursor: pointer; list-style: none; font-weight: 700; }
.kg-hari > summary::-webkit-details-marker { display: none; }
.kg-hari > summary::before { content: "\25B8"; margin-right: 8px; color: var(--muted); transition: transform .15s; }
.kg-hari[open] > summary::before { transform: rotate(90deg); }
.kg-judul { flex: 1 1 auto; }
.kg-chip { font-size: .78rem; font-weight: 600; color: var(--muted); background: #f1f3f5; border-radius: 999px; padding: 3px 10px; }
.kg-chip-ok { color: var(--brand); background: var(--brand-soft); }
.kg-body { padding: 4px 16px 16px; }
.kg-hari-satu { border: 0; margin: 0; }
.kg-hari-satu .kg-body { padding: 0; }
.kg-kosong td { background: #fafafa; }