/* =============================================================================
   ui-baru.css -- "Workspace Kinerja" marketing.suryamadina.com (redesain total, 28 Okt 2026)
   Satu stylesheet untuk semua halaman: kerangka (sidebar/topbar/navigasi bawah), komponen
   (hero, kartu, filter, tabel, tombol), halaman login, dan penyesuaian Bootstrap 5.3.
   Catatan teknis: jarak antar-elemen flex memakai margin (bukan gap) supaya hasil uji render sama
   dengan peramban; grid memakai gap.
   ============================================================================= */

:root {
    --ui-side: 248px;
    --ui-bg: #f3f6fb;
    --ui-card: #ffffff;
    --ui-line: #e4eaf4;
    --ui-line-2: #edf1f8;
    --ui-ink: #0e1b43;
    --ui-text: #25335a;
    --ui-muted: #6c7a9a;
    --ui-navy: #0a2a6b;
    --ui-navy-2: #123b94;
    --ui-navy-3: #0d3585;
    --ui-orange: #f97316;
    --ui-orange-2: #ea580c;
    --ui-blue: #2563eb;   --ui-blue-bg: #e8f0fe;
    --ui-amber: #f59e0b;  --ui-amber-bg: #fff3dc;
    --ui-green: #16a34a;  --ui-green-bg: #e3f6ea;
    --ui-purple: #7c3aed; --ui-purple-bg: #efe9fe;
    --ui-red: #dc2626;    --ui-red-bg: #fde8e8;
    --ui-r: 16px;
    --ui-shadow: 0 1px 2px rgba(16, 32, 80, .04), 0 8px 24px rgba(16, 32, 80, .05);
    /* nama token lama dipakai sebagian kode inline */
    --sm-blue: #0a2a6b;
    --sm-orange: #f97316;
    --app-bg: #f3f6fb;
}

/* ------------------------------------------------------------------ dasar */
body.ui {
    --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-color: #25335a;
    --bs-body-bg: #f3f6fb;
    --bs-primary: #0a2a6b;
    --bs-primary-rgb: 10, 42, 107;
    --bs-link-color: #123b94;
    --bs-link-hover-color: #0a2a6b;
    margin: 0;
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}
body.ui a { text-decoration: none; }
.ui-main h1, .ui-main h2, .ui-main h3, .ui-main h4, .ui-main h5, .ui-main h6 { color: var(--ui-ink); }
body.ui.ui-lock { overflow: hidden; }
body.ui :focus-visible { outline: 3px solid rgba(18, 59, 148, .35); outline-offset: 2px; }

.ui-skip {
    position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--ui-navy); color: #fff;
    padding: 10px 16px; border-radius: 10px; font-weight: 700;
}
.ui-skip:focus { top: 12px; color: #fff; }

/* ------------------------------------------------------------------ sidebar */
.ui-side {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--ui-side); z-index: 1045;
    background: #fff; border-right: 1px solid var(--ui-line);
    display: flex; flex-direction: column;
}
.ui-side__top { display: flex; align-items: center; padding: 22px 20px 18px; }
.ui-brand { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; }
.ui-brand img { width: 44px; height: auto; flex: 0 0 44px; margin-right: 12px; display: block; }
.ui-brand__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.ui-brand__t b { font-size: 17px; font-weight: 800; letter-spacing: .01em; color: var(--ui-navy); white-space: nowrap; }
.ui-brand__t small { font-size: 12.5px; font-weight: 500; color: var(--ui-muted); margin-top: 3px; white-space: nowrap; }
.ui-side__close {
    display: none; width: 40px; height: 40px; border: 0; background: #f1f5fb; color: #475569;
    border-radius: 12px; font-size: 16px; align-items: center; justify-content: center; margin-left: 8px; cursor: pointer;
}
.ui-me { display: none; grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: 12px; margin: 0 14px 6px; padding: 12px 14px; background: #f6f8fc; border-radius: 14px; }
.ui-me__av {
    display: block; width: 40px; height: 40px; border-radius: 50%; background: var(--ui-navy); color: #fff;
    text-align: center; line-height: 40px; font-weight: 800; font-size: 14px;
}
.ui-me__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ui-me__t b { font-size: 14px; font-weight: 700; color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-me__t small { font-size: 12px; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ui-nav { flex: 1 1 auto; overflow-y: auto; padding: 6px 14px 16px; }
.ui-nav__a {
    display: flex; align-items: center; min-height: 46px; padding: 0 14px; margin: 0 0 6px;
    border-radius: 12px; color: var(--ui-text); font-size: 15px; font-weight: 600; line-height: 1.2;
    transition: background .15s ease, color .15s ease;
}
.ui-nav__a i { flex: 0 0 22px; width: 22px; margin-right: 14px; font-size: 18px; color: #5d6d92; text-align: center; }
.ui-nav__a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-nav__a:hover { background: #f1f5fb; color: var(--ui-navy); }
.ui-nav__a.is-active { background: var(--ui-navy); color: #fff; box-shadow: 0 8px 18px rgba(10, 42, 107, .22); }
.ui-nav__a.is-active i { color: #fff; }
.ui-nav__sec {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; margin: 20px 6px 10px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7d8bab;
}
.ui-nav__sec::after { content: ""; height: 1px; background: var(--ui-line); }
.ui-side__foot { padding: 12px 14px 16px; border-top: 1px solid var(--ui-line); }
.ui-side__foot .ui-nav__a { margin-bottom: 0; }

.ui-backdrop { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(8, 20, 56, .45); z-index: 1040; }
.ui-backdrop.is-show { display: block; }

/* ------------------------------------------------------------------ topbar + isi */
.ui-wrap { margin-left: var(--ui-side); min-height: 100vh; min-width: 0; }
.ui-top {
    position: sticky; top: 0; z-index: 1020; height: 64px; background: #fff; border-bottom: 1px solid var(--ui-line);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 0 28px;
}
.ui-top__menu {
    display: none; width: 42px; height: 42px; border: 0; background: none; color: var(--ui-ink);
    font-size: 26px; align-items: center; justify-content: center; margin-left: -8px; cursor: pointer;
}
.ui-top__brand { display: none; align-items: center; min-width: 0; }
.ui-top__brand img { width: 40px; height: auto; margin-right: 10px; display: block; }
.ui-top__brand .ui-brand__t b { font-size: 15.5px; }
.ui-top__brand .ui-brand__t small { font-size: 11.5px; margin-top: 2px; }
.ui-crumb { display: flex; align-items: center; min-width: 0; font-size: 14px; color: var(--ui-muted); }
.ui-crumb i { margin-right: 8px; font-size: 15px; }
.ui-crumb a { color: var(--ui-muted); }
.ui-crumb a:hover { color: var(--ui-navy); }
.ui-crumb__sep { margin: 0 9px; opacity: .6; }
.ui-crumb__now { color: var(--ui-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-top__user { justify-self: end; white-space: nowrap; text-align: right; }
.ui-top__who { display: inline-block; vertical-align: middle; margin-right: 12px; text-align: right; line-height: 1.25; white-space: nowrap; }
.ui-top__who b { display: block; font-size: 14px; font-weight: 700; color: var(--ui-ink); }
.ui-top__who small { font-size: 12.5px; color: var(--ui-muted); }
.ui-top__who small i { color: #ef4444; margin-right: 3px; }
.ui-avatar {
    display: inline-block; vertical-align: middle; width: 42px; height: 42px; border-radius: 50%; background: #eef2f9; border: 1px solid var(--ui-line);
    text-align: center; line-height: 40px; color: var(--ui-navy); font-size: 20px; font-weight: 800;
}
.ui-avatar span { font-size: 14px; }

.ui-main { padding: 26px 28px 48px; max-width: 1400px; margin: 0 auto; min-width: 0; }
.ui-main > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ navigasi bawah (HP) */
.ui-bot {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #fff;
    border-top: 1px solid var(--ui-line); height: 68px; padding: 0 6px 0; align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 84px minmax(0, 1fr) minmax(0, 1fr);
    box-shadow: 0 -8px 26px rgba(10, 30, 80, .07);
}
.ui-bot__a {
    min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: none; border: 0; padding: 6px 0 4px; color: #6c7a9a; font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.ui-bot__a i { font-size: 22px; line-height: 1; margin-bottom: 4px; }
.ui-bot__a.is-active { color: var(--ui-navy); font-weight: 700; }
.ui-bot__fab { color: var(--ui-text); font-weight: 700; justify-content: flex-start; }
.ui-bot__fab b {
    width: 56px; height: 56px; border-radius: 50%; margin-top: -26px; margin-bottom: 4px; color: #fff; font-weight: 400;
    background: linear-gradient(180deg, #ff8a2b 0%, #f26a10 100%); border: 4px solid #fff;
    box-shadow: 0 10px 22px rgba(249, 115, 22, .40); display: flex; align-items: center; justify-content: center;
}
.ui-bot__fab b i { font-size: 26px; margin: 0; }

/* ------------------------------------------------------------------ hero */
.ui-hero {
    position: relative; overflow: hidden; border-radius: 18px; padding: 32px 36px; min-height: 156px; margin-bottom: 30px; color: #fff;
    background: linear-gradient(105deg, #0c2468 0%, #0a1d55 50%, #081542 100%);
}
.ui-hero__body { position: relative; z-index: 2; max-width: 62%; }
.ui-hero h1 { margin: 0; font-size: 32px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.ui-hero p { margin: 8px 0 0; font-size: 17px; color: rgba(255, 255, 255, .9); }
.ui-hero__date { display: inline-flex; align-items: center; margin-top: 14px; font-size: 15px; color: rgba(255, 255, 255, .92); }
.ui-hero__date i { margin-right: 10px; }
.ui-hero__art { position: absolute; right: -2%; bottom: -97px; height: 335px; width: auto; z-index: 1; pointer-events: none; }

/* ------------------------------------------------------------------ judul bagian, tombol */
.ui-sechead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 16px; margin-bottom: 18px; }
.ui-sechead__txt { grid-column: 1; grid-row: 1; min-width: 0; }
.ui-sechead .ui-btn { grid-column: 2; grid-row: 1; }
.ui-sechead h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.ui-sechead p { margin: 4px 0 0; color: var(--ui-muted); font-size: 14.5px; }
.ui-h3 { margin: 0 0 14px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }

.ui-btn {
    display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border: 0; border-radius: 12px;
    font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.ui-btn i { margin-right: 8px; font-size: 17px; }
.ui-btn:active { transform: translateY(1px); }
.ui-btn--orange { background: var(--ui-orange); color: #fff; box-shadow: 0 8px 18px rgba(249, 115, 22, .28); }
.ui-btn--orange:hover { background: var(--ui-orange-2); color: #fff; }
.ui-btn--navy { background: var(--ui-navy); color: #fff; box-shadow: 0 8px 18px rgba(10, 42, 107, .22); }
.ui-btn--navy:hover { background: var(--ui-navy-3); color: #fff; }
.ui-btn--green { background: var(--ui-green); color: #fff; box-shadow: 0 8px 18px rgba(22, 163, 74, .22); }
.ui-btn--green:hover { background: #128a3e; color: #fff; }
.ui-btn--red { background: var(--ui-red); color: #fff; }
.ui-btn--red:hover { background: #b91c1c; color: #fff; }
.ui-btn--ghost { background: #fff; color: var(--ui-text); border: 1px solid #dbe3f0; }
.ui-btn--ghost:hover { background: #f6f8fc; color: var(--ui-navy); }
.ui-btn--block { width: 100%; }
.ui-btn--sm { height: 38px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.ui-btn--sm i { font-size: 15px; margin-right: 6px; }
.ui-chips > * + * { margin-left: 8px; }

/* ------------------------------------------------------------------ kartu */
.ui-card { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: var(--ui-r); box-shadow: var(--ui-shadow); }
.ui-card__pad { padding: 24px; }
.ui-gap { margin-bottom: 22px; }

.ui-pagehead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.ui-pagehead__txt { min-width: 0; }
.ui-pagehead h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; }
.ui-pagehead__ico {
    width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; margin-right: 14px; font-size: 21px; font-weight: 400;
    display: flex; align-items: center; justify-content: center; background: var(--ui-blue-bg); color: var(--ui-blue);
}
.ui-pagehead p { margin: 6px 0 0; color: var(--ui-muted); font-size: 14.5px; }
.ui-pagehead__act { flex: 0 0 auto; margin-left: 16px; display: flex; flex-wrap: wrap; align-items: center; }
.ui-pagehead__act > * + * { margin-left: 10px; }

.is-blue   { background: var(--ui-blue-bg);   color: var(--ui-blue); }
.is-amber  { background: var(--ui-amber-bg);  color: var(--ui-amber); }
.is-green  { background: var(--ui-green-bg);  color: var(--ui-green); }
.is-purple { background: var(--ui-purple-bg); color: var(--ui-purple); }
.is-red    { background: var(--ui-red-bg);    color: var(--ui-red); }
.is-navy   { background: #e6ecf8;             color: var(--ui-navy); }
.is-orange { background: #ffeadb;             color: var(--ui-orange); }

/* ------------------------------------------------------------------ filter (grid sendiri) */
.ui-filter { padding: 22px 24px; margin-bottom: 24px; }
.ui-filter form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) 150px; column-gap: 18px; row-gap: 14px; align-items: end; }
.ui-filter--2 form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px; }
.ui-filter--1 form { grid-template-columns: minmax(0, 1fr) 150px; }
.ui-filter--target form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, 1fr) 150px; }
.ui-filter--arsip form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.9fr) 150px; }
.ui-field { min-width: 0; }
.ui-field label { display: block; margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--ui-ink); }
.ui-field__box { position: relative; }
.ui-field__box > i.ui-ico { position: absolute; left: 14px; top: 14px; font-size: 17px; line-height: 18px; color: #4b5b82; pointer-events: none; z-index: 2; }
.ui-field__box > i.ui-chev { position: absolute; right: 14px; top: 16px; font-size: 13px; line-height: 14px; color: #6c7a9a; pointer-events: none; z-index: 2; }
.ui-field input, .ui-field select {
    display: block; width: 100%; height: 46px; border: 1px solid #dbe3f0; border-radius: 10px; background: #fff; outline: 0;
    padding: 0 14px 0 42px; font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--ui-ink);
}
.ui-field select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 38px; text-overflow: ellipsis; }
.ui-field input:focus, .ui-field select:focus { border-color: var(--ui-navy-2); box-shadow: 0 0 0 4px rgba(18, 59, 148, .10); }
.ui-field input[type=date]::-webkit-calendar-picker-indicator { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ui-field input[type=date] { position: relative; min-height: 46px; }
.ui-filter .ui-btn { align-self: end; }

/* ------------------------------------------------------------------ kartu angka + akses cepat */
.ui-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 16px; margin-bottom: 32px; }
.ui-stat { display: flex; align-items: center; padding: 22px 24px; min-width: 0; }
.ui-stat__tile {
    width: 64px; height: 64px; flex: 0 0 64px; border-radius: 16px; margin-right: 20px; font-size: 28px;
    display: flex; align-items: center; justify-content: center;
}
.ui-stat__txt { min-width: 0; }
.ui-stat__num { font-size: 32px; font-weight: 800; line-height: 1; color: var(--ui-ink); letter-spacing: -.01em; }
.ui-stat__lbl { margin-top: 8px; font-size: 16px; font-weight: 700; color: var(--ui-ink); line-height: 1.25; }
.ui-stat__sub { margin-top: 2px; font-size: 13.5px; color: var(--ui-muted); }

.ui-qa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 32px; }
.ui-qa__a {
    display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; column-gap: 16px;
    padding: 14px 18px; min-width: 0; color: var(--ui-ink); font-size: 15.5px; font-weight: 700;
    transition: border-color .15s ease, transform .1s ease;
}
.ui-qa__a:hover { border-color: #c4d3ec; transform: translateY(-1px); color: var(--ui-ink); }
.ui-qa__tile { width: 48px; height: 48px; border-radius: 13px; font-size: 22px; display: flex; align-items: center; justify-content: center; }
.ui-qa__t { min-width: 0; }
.ui-qa__a > i.bi-chevron-right { color: #8896b4; font-size: 15px; }
.ui-qa--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-qa__a--hp { display: none; }

/* ------------------------------------------------------------------ rekap + tabel */
.ui-rekap { overflow: hidden; }
.ui-rekap__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 20px 24px; }
.ui-rekap__ttl { min-width: 0; }
.ui-rekap__head h3 { display: inline-block; margin: 0; font-size: 20px; font-weight: 800; vertical-align: middle; }
.ui-pill {
    display: inline-block; height: 26px; line-height: 26px; padding: 0 12px; margin-left: 12px; border-radius: 13px; vertical-align: middle;
    background: #eef2f9; color: var(--ui-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.ui-rekap__range { display: block; text-align: right; color: var(--ui-muted); font-size: 14px; white-space: nowrap; }
.ui-rekap__range i { margin-right: 8px; }

.ui-table { width: 100%; border-collapse: collapse; }
.ui-table th {
    background: #f6f8fc; color: #6a7899; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 14px 24px; text-align: left; border-top: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line);
}
.ui-table td { padding: 16px 24px; border-bottom: 1px solid var(--ui-line-2); vertical-align: middle; font-size: 14.5px; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:hover td { background: #fafbff; }
.ui-table .num { text-align: right; }
.ui-table .ctr { text-align: center; }
.ui-person { font-weight: 700; color: var(--ui-ink); }
.ui-sub { font-size: 12.5px; color: var(--ui-muted); }
.ui-sub i { margin-right: 4px; }
.ui-task { font-weight: 700; color: var(--ui-navy); }
.ui-total { font-size: 18px; font-weight: 800; color: var(--ui-green); }
.ui-tag { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; background: #eef2f9; color: #51608a; }
.ui-tag--media { background: var(--ui-blue-bg); color: #1d4ed8; }
.ui-tag--cs { background: var(--ui-amber-bg); color: #b45309; }
.ui-tag--lapangan { background: var(--ui-green-bg); color: #15803d; }

.ui-empty { text-align: center; padding: 44px 20px 52px; }
.ui-empty__ico {
    width: 68px; height: 68px; border-radius: 50%; background: #f1f4fa; color: #8d9bba; font-size: 30px;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.ui-empty b { display: block; color: var(--ui-ink); font-size: 15px; font-weight: 600; }
.ui-empty span { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 14px; }
.ui-scroll { overflow-x: auto; }

/* ------------------------------------------------------------------ penyesuaian Bootstrap */
body.ui .form-label { font-size: 13px; font-weight: 600; color: var(--ui-ink); margin-bottom: 7px; }
body.ui .form-control, body.ui .form-select {
    min-height: 46px; border: 1px solid #dbe3f0; border-radius: 10px; background-color: #fff; font-size: 14.5px; color: var(--ui-ink);
    padding-top: 9px; padding-bottom: 9px; padding-left: 14px; box-shadow: none;
}
body.ui .form-select { padding-right: 38px; }
body.ui .form-control-sm, body.ui .form-select-sm { min-height: 40px; font-size: 14px; padding-top: 6px; padding-bottom: 6px; border-radius: 10px; }
body.ui textarea.form-control { min-height: 96px; }
body.ui .form-control:focus, body.ui .form-select:focus { border-color: var(--ui-navy-2); box-shadow: 0 0 0 4px rgba(18, 59, 148, .10); background-color: #fff; }
body.ui .form-control::placeholder { color: #9aa7c2; }
body.ui .form-control:disabled, body.ui .form-select:disabled { background-color: #f3f5f9; color: #98a4bd; }
body.ui .form-text { color: var(--ui-muted); }
body.ui .input-group-text { background: #f3f6fb; border: 1px solid #dbe3f0; color: var(--ui-muted); font-weight: 600; font-size: 13.5px; border-radius: 10px; }

body.ui .btn { border-radius: 10px; font-weight: 600; font-size: 14px; }
body.ui .btn-sm { font-size: 13px; border-radius: 9px; }
body.ui .btn-primary {
    --bs-btn-bg: #0a2a6b; --bs-btn-border-color: #0a2a6b; --bs-btn-hover-bg: #0d3585; --bs-btn-hover-border-color: #0d3585;
    --bs-btn-active-bg: #082157; --bs-btn-active-border-color: #082157; --bs-btn-disabled-bg: #0a2a6b; --bs-btn-disabled-border-color: #0a2a6b;
    --bs-btn-focus-shadow-rgb: 10, 42, 107;
}
body.ui .btn-outline-primary {
    --bs-btn-color: #0a2a6b; --bs-btn-border-color: #0a2a6b; --bs-btn-hover-bg: #0a2a6b; --bs-btn-hover-border-color: #0a2a6b;
    --bs-btn-active-bg: #082157; --bs-btn-active-border-color: #082157; --bs-btn-focus-shadow-rgb: 10, 42, 107;
}
body.ui .btn-dark {
    --bs-btn-bg: #0a2a6b; --bs-btn-border-color: #0a2a6b; --bs-btn-hover-bg: #0d3585; --bs-btn-hover-border-color: #0d3585;
    --bs-btn-active-bg: #082157; --bs-btn-active-border-color: #082157; --bs-btn-focus-shadow-rgb: 10, 42, 107;
}
body.ui .btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: #dbe3f0; --bs-btn-hover-bg: #f6f8fc; --bs-btn-hover-border-color: #cbd6ea; }

body.ui .badge { font-weight: 700; letter-spacing: .02em; }
body.ui .table { --bs-table-bg: transparent; --bs-table-hover-bg: #f8faff; color: var(--ui-text); margin-bottom: 0; }
body.ui .table > :not(caption) > * > * { padding: 14px 20px; border-bottom-color: var(--ui-line-2); vertical-align: middle; }
body.ui .table-light { --bs-table-bg: #f6f8fc; --bs-table-color: #6a7899; --bs-table-border-color: var(--ui-line); }
body.ui .table-light th, body.ui thead.table-light th {
    background-color: #f6f8fc; color: #6a7899; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    border-bottom: 1px solid var(--ui-line);
}
body.ui .modal-content { border: 0; border-radius: 20px; box-shadow: 0 30px 80px rgba(10, 30, 80, .25); }
body.ui .modal-title { font-weight: 800; color: var(--ui-ink); }
body.ui .dropdown-menu { border: 1px solid var(--ui-line); border-radius: 14px; box-shadow: 0 18px 40px rgba(10, 30, 80, .14); padding: 8px; }
body.ui .dropdown-item { border-radius: 9px; font-size: 14px; font-weight: 500; }
body.ui .alert { border-radius: 14px; border: 0; font-weight: 600; }
body.ui .alert-success { background: #e3f6ea; color: #14532d; }
body.ui .alert-danger { background: #fde8e8; color: #7f1d1d; }
body.ui .alert-info { background: #e8f0fe; color: #1e3a8a; }
body.ui .text-muted { color: var(--ui-muted) !important; }

/* ------------------------------------------------------------------ form lapor (input_laporan) */
.fm-card { max-width: 900px; margin: 0 auto; padding: 34px 38px; }
.fm-head { text-align: center; margin-bottom: 30px; }
.fm-head__ico {
    width: 60px; height: 60px; border-radius: 18px; background: var(--ui-orange); color: #fff; font-size: 26px;
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; box-shadow: 0 10px 22px rgba(249, 115, 22, .28);
}
.fm-head h1 { margin: 0; font-size: 26px; font-weight: 800; }
.fm-head p { margin: 6px 0 0; color: var(--ui-muted); font-size: 14.5px; }
.section-badge {
    display: inline-flex; align-items: center; margin-bottom: 18px; padding: 7px 14px; border-radius: 9px; background: #eaf0fb; color: var(--ui-navy);
    font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.section-badge i { margin-right: 8px; }
.optional-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 6px; background: #e8edf6; color: #64748b; font-size: 10.5px; font-weight: 700; vertical-align: middle; }
.divider { height: 1px; background: var(--ui-line); margin: 32px 0; }
.widget-card {
    position: relative; margin-bottom: 12px; padding: 16px; background: #fff; border: 1px solid var(--ui-line); border-radius: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.widget-card:hover { border-color: #f7b98a; box-shadow: 0 8px 18px rgba(249, 115, 22, .08); }
.widget-label-input { font-weight: 700; color: var(--ui-navy); background: #f6f8fc !important; border: 0 !important; border-bottom: 2px dashed #c4cfe4 !important; border-radius: 0 !important; padding: 8px 10px; min-height: 40px !important; }
.widget-label-input:focus { background: #fff !important; border-bottom: 2px solid var(--ui-navy) !important; box-shadow: none !important; }
.dynamic-row { padding: 10px; margin: 0 0 10px; border-radius: 12px; }
.btn-submit {
    display: block; width: 100%; padding: 16px; border: 0; border-radius: 14px; background: var(--ui-orange); color: #fff;
    font-family: inherit; font-size: 16px; font-weight: 800; box-shadow: 0 10px 22px rgba(249, 115, 22, .28); cursor: pointer; transition: background .15s ease;
}
.btn-submit:hover { background: var(--ui-orange-2); color: #fff; }
.fm-note { background: #f6f8fc; border: 1px solid var(--ui-line); border-radius: 14px; padding: 16px; }

/* ------------------------------------------------------------------ Tabel Jobdesk (grid) */
.tg-filter { background: #f6f8fc; border: 1px solid var(--ui-line); border-radius: 14px; padding: 16px; margin-bottom: 20px; }
.table-container { width: 100%; overflow: auto; max-height: 70vh; border: 1px solid var(--ui-line); border-radius: 14px; background: #fff; }
.tracker-grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: max-content; }
.tracker-grid th, .tracker-grid td { border-right: 1px solid #e9eef6; border-bottom: 1px solid #e9eef6; padding: 0; text-align: center; vertical-align: middle; }
.tracker-grid thead th { position: sticky; top: 0; z-index: 5; background: #f6f8fc; padding: 10px; font-size: 12px; font-weight: 700; color: #52618a; }
.freeze-col { position: sticky; left: 0; z-index: 4; min-width: 300px; padding: 12px 16px !important; background: #fff; text-align: left !important; box-shadow: 2px 0 6px rgba(10, 30, 80, .04); }
.tracker-grid thead th.freeze-col { z-index: 6; background: #f6f8fc; }
.tracker-grid thead th.tg-total { background: var(--ui-navy); color: #fff; }
.cell-input { width: 100%; min-width: 52px; height: 46px; border: 0; background: transparent; outline: 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--ui-navy); }
.cell-input:focus { background: #e6f0ff; }
.cell-input:disabled { background: #f3f5f9; color: #a3aec4; cursor: not-allowed; }
.cell-saved { background-color: #d1fae5; transition: background-color .5s ease; }
.btn-detail { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 5px; border-radius: 6px; background: #eef2f9; color: #64748b; font-size: 11px; }
.btn-detail:hover { background: var(--ui-navy); color: #fff; }
.tg-job { font-size: 13px; font-weight: 700; color: var(--ui-navy); }
.tg-meta { font-size: 10.5px; color: #64748b; margin-top: 3px; }
.tg-sum { font-weight: 800; color: var(--ui-orange); background: #f6f8fc; }

/* ------------------------------------------------------------------ Analisis Cabang */
.chart-container { position: relative; width: 100%; padding: 24px; }
.chart-box { position: relative; width: 100%; height: 340px; }
.chart-title { text-align: center; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-muted); margin-bottom: 18px; }
.rank-badge { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; background: #94a3b8; }
.rank-badge.r1 { background: #f59e0b; }
.rank-badge.r3 { background: #cd7f32; }
.ui-score { font-size: 20px; font-weight: 800; color: var(--ui-orange); }
.ui-count { display: inline-block; min-width: 54px; padding: 6px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; text-align: center; }

/* ------------------------------------------------------------------ Struktur Pekerjaan */
.setup-card { height: 100%; padding: 26px; border-top: 4px solid var(--ui-blue); }
.setup-card.card-yellow { border-top-color: var(--ui-amber); }
.setup-card.card-green { border-top-color: var(--ui-green); }
.setup-card h2 { margin: 0 0 22px; font-size: 16px; font-weight: 800; }
.step-no { display: inline-block; vertical-align: middle; width: 28px; height: 28px; border-radius: 50%; margin-right: 10px; background: var(--ui-blue); color: #fff; font-size: 13px; font-weight: 800; line-height: 28px; text-align: center; }
.card-yellow .step-no { background: var(--ui-amber); color: #422006; }
.card-green .step-no { background: var(--ui-green); }
.btn-custom { width: 100%; padding: 11px; border-radius: 10px; font-weight: 700; }
.tree-container { margin-top: 28px; padding: 28px 30px; }
.tree-container h2 { margin: 0 0 18px; font-size: 19px; font-weight: 800; display: flex; align-items: center; }
.tree-container h2 i { margin-right: 10px; color: var(--ui-muted); }
.tree-program { margin: 20px 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--ui-line); font-size: 15px; font-weight: 800; color: var(--ui-navy); text-transform: uppercase; }
.tree-sub { position: relative; margin: 0 0 15px 20px; padding-left: 20px; border-left: 2px dashed #cbd5e1; }
.tree-sub::before { content: ""; position: absolute; top: 15px; left: -2px; width: 15px; height: 2px; background: #cbd5e1; }
.tree-sub-title { margin-bottom: 5px; font-size: 14px; font-weight: 800; color: var(--ui-orange); }
.tree-task { position: relative; margin: 0 0 8px 20px; padding-left: 15px; border-left: 2px solid #e2e8f0; font-size: 13px; color: #475569; }
.tree-task::before { content: ""; position: absolute; top: 10px; left: 0; width: 10px; height: 2px; background: #e2e8f0; }

/* ------------------------------------------------------------------ Arsip Dinamis */
.filter-box { background: #f6f8fc; border: 1px solid var(--ui-line); border-radius: 14px; padding: 18px 20px; margin-bottom: 22px; }
.filter-box .form-label { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }
.arsip-wrap { border: 1px solid var(--ui-line); border-radius: 14px; overflow-x: auto; }
.arsip-wrap .table > :not(caption) > * > * { white-space: nowrap; }
.dynamic-header { color: var(--ui-orange) !important; }
.btn-link-custom { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 20px; background: #fee2e2; color: #dc2626; font-size: 12px; font-weight: 700; }
.btn-link-custom:hover { background: #dc2626; color: #fff; }
.btn-link-custom.is-link { background: #e0f2fe; color: #0369a1; }
.btn-link-custom.is-link:hover { background: #0369a1; color: #fff; }

/* ------------------------------------------------------------------ Verifikasi & Akses */
.ui-cardhead { padding: 18px 24px; border-bottom: 1px solid var(--ui-line-2); font-size: 16px; font-weight: 800; color: var(--ui-ink); display: flex; align-items: center; }
.ui-cardhead i { margin-right: 10px; font-size: 18px; }
.btn-edit-user { margin-left: 12px; padding: 4px 10px; border: 0; border-radius: 8px; background: #eef2f9; color: var(--ui-navy); font-size: 12px; font-weight: 700; cursor: pointer; }
.btn-edit-user:hover { background: var(--ui-navy); color: #fff; }

/* ------------------------------------------------------------------ Target & KPI (dokumen A4) */
.a4-container { max-width: 1100px; margin: 0 auto; padding: 40px; background: #fff; border: 1px solid var(--ui-line); border-radius: 12px; box-shadow: var(--ui-shadow); }
.kop-surat h4 { margin-bottom: 20px; font-size: 18px; font-weight: 800; line-height: 1.4; color: #1e293b; }
.table-monitoring-wrap { overflow-x: auto; }
.table-monitoring { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: collapse; font-size: 11px; }
.table-monitoring th, .table-monitoring td { padding: 6px 8px; border: 1px solid #333; vertical-align: middle; word-wrap: break-word; overflow-wrap: break-word; }
.table-monitoring th { text-align: center; font-weight: 700; background-color: #f1f5f9; }
.bg-program { background-color: #dbeafe !important; font-size: 11px; font-weight: 700; text-transform: uppercase; }

/* ------------------------------------------------------------------ halaman masuk (landing, login, dst) */
body.ui-authbody {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px 20px;
    background: var(--ui-bg);
}
.ui-auth { display: grid; grid-template-columns: 1.08fr 1fr; width: 100%; max-width: 1040px; min-height: 590px; background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 24px 60px rgba(10, 30, 80, .14); }
.ui-auth__hero {
    position: relative; overflow: hidden; padding: 44px 44px 0; color: #fff; min-height: 590px;
    background: linear-gradient(155deg, #0c2468 0%, #0a1d55 55%, #071540 100%);
    display: flex; flex-direction: column; justify-content: space-between;
}
.ui-auth__art { display: block; width: 600px; height: 381px; max-width: none; align-self: center; margin: 10px 0 -64px; pointer-events: none; }
.ui-auth__tag {
    display: inline-block; padding: 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, .12); line-height: 1.4;
    font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
.ui-auth__tag i { margin-right: 8px; color: #fbbf24; }
.ui-auth__hero h1 { margin: 22px 0 0; font-size: 36px; line-height: 1.15; font-weight: 800; letter-spacing: -.015em; color: #fff; }
.ui-auth__hero p.lead { margin: 12px 0 0; max-width: 380px; font-size: 16px; color: rgba(255, 255, 255, .88); }
.ui-quote { margin-top: 26px; padding: 16px 18px; border-radius: 14px; background: #f6f8fc; border: 1px solid var(--ui-line); }
.ui-quote__ar { font-family: 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif; font-size: 23px; line-height: 1.7; color: var(--ui-navy); text-align: right; margin-bottom: 6px; }
.ui-quote__id { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ui-muted); font-style: italic; }
.ui-quote__src { display: block; margin-top: 4px; font-size: 11.5px; font-style: normal; color: #8a97b4; }
.ui-auth__panel { align-self: center; justify-self: stretch; width: 100%; background: #fff; padding: 52px 52px; min-width: 0; }
.ui-auth__logo { display: block; width: 100%; max-width: 330px; height: auto; margin: 0 0 30px; }
.ui-auth__panel h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.ui-auth__panel p.sub { margin: 8px 0 26px; color: var(--ui-muted); font-size: 14.5px; }
.ui-sso { display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; border-radius: 14px; background: var(--ui-navy); color: #fff; font-size: 15.5px; font-weight: 700; box-shadow: 0 12px 24px rgba(10, 42, 107, .22); transition: background .15s ease, transform .1s ease; }
.ui-sso i { margin-right: 10px; font-size: 19px; }
.ui-sso:hover { background: var(--ui-navy-3); color: #fff; transform: translateY(-1px); }
.ui-auth__foot { margin-top: 26px; font-size: 12px; line-height: 1.6; color: var(--ui-muted); }
.ui-auth__back { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--ui-muted); }
.ui-auth__back:hover { color: var(--ui-navy); }

.ui-simple { width: 100%; max-width: 520px; padding: 40px 40px 36px; background: #fff; border-radius: 24px; box-shadow: 0 24px 60px rgba(10, 30, 80, .14); text-align: center; }
.ui-simple__logo { width: 190px; height: auto; margin: 0 auto 22px; display: block; }
.ui-simple h1 { margin: 0 0 8px; font-size: 24px; font-weight: 800; }
.ui-simple p { margin: 0 0 22px; color: var(--ui-muted); font-size: 14.5px; }
.ui-simple__ico { width: 76px; height: 76px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 34px; margin-bottom: 18px; }
.ui-simple form { text-align: left; }
.ui-simple--form { max-width: 560px; }
.ui-simple--form h1, .ui-simple--form > p { text-align: center; }

/* ------------------------------------------------------------------ Atur Target & Satuan (admin/manager) */
.tgt-info { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: #eef4ff; border: 1px solid #d6e4fb; color: #1e3a8a; font-size: 13.5px; font-weight: 600; }
.tgt-note { margin-bottom: 18px; padding: 14px 18px; border-radius: 14px; background: #eef4ff; border: 1px solid #d6e4fb; color: #1e3a8a; font-size: 14px; line-height: 1.55; }
.tgt-note i { margin-right: 8px; }
.tgt-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--ui-line-2); font-size: 14px; color: var(--ui-muted); }
.tgt-toolbar b { color: var(--ui-ink); }
.tgt-table { width: 100%; border-collapse: collapse; }
.tgt-table th {
    background: #f6f8fc; color: #6a7899; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--ui-line);
}
.tgt-table td { padding: 14px 18px; border-bottom: 1px solid var(--ui-line-2); vertical-align: top; font-size: 14px; }
.tgt-group td { padding: 11px 18px; background: #f1f5fb; color: var(--ui-navy); font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.tgt-group td i { margin-right: 6px; color: #f59e0b; }
.tgt-group .ui-tag { margin-left: 8px; letter-spacing: .02em; }
.tgt-row.is-dirty td { background: #fffaf0; }
.tgt-row.is-dirty .tgt-in { border-color: var(--ui-orange); }
.tgt-in { width: 100%; max-width: 100%; }
.tgt-real b { font-size: 15px; font-weight: 800; color: var(--ui-ink); }
.tgt-real span { color: var(--ui-muted); }
.tgt-real small { color: var(--ui-muted); font-weight: 600; }
.tgt-meter { width: 120px; max-width: 100%; height: 6px; margin-top: 6px; border-radius: 3px; background: #e8edf6; overflow: hidden; }
.tgt-meter span { display: block; height: 100%; border-radius: 3px; background: var(--ui-green); }
.tgt-tugas summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ui-text); }
.tgt-tugas ul { margin: 8px 0 0; padding: 0; list-style: none; }
.tgt-tugas li { padding: 5px 0; border-top: 1px dashed var(--ui-line); font-size: 12.5px; color: var(--ui-text); }
.tgt-tugas li.is-beda b { color: var(--ui-red); }
.tgt-warn { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--ui-amber-bg); color: #b45309; font-size: 11.5px; font-weight: 700; }
.tgt-samakan { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ui-muted); cursor: pointer; }
.tgt-samakan input { margin-right: 6px; vertical-align: middle; }
.tgt-actions {
    position: sticky; bottom: 16px; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px;
    margin-top: 16px; padding: 12px 18px; background: #fff; border: 1px solid var(--ui-line); border-radius: 16px;
    box-shadow: 0 10px 30px rgba(10, 30, 80, .16); font-size: 14px; color: var(--ui-text);
}
.tree-unit { margin-left: 8px; font-size: 11.5px; color: var(--ui-muted); font-weight: 600; }
.tree-unit i { margin-right: 3px; }
.tree-unit.is-beda { color: #b45309; }

/* ------------------------------------------------------------------ cetak */
@media print {
    .ui-side, .ui-top, .ui-bot, .ui-backdrop, .ui-skip, .no-print { display: none !important; }
    body.ui { background: #fff; }
    .ui-wrap { margin-left: 0; }
    .ui-main { padding: 0; max-width: none; }
    .a4-container { border: 0; box-shadow: none; padding: 0; max-width: 100%; border-radius: 0; }
    .table-monitoring-wrap { overflow-x: visible; }
    .table-monitoring { font-size: 10px; min-width: 0; }
    .bg-program { background-color: #dbeafe !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .table-monitoring th { background-color: #f1f5f9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    @page { size: A4 landscape; margin: 12mm; }
}

/* ------------------------------------------------------------------ responsif: tablet & HP */
@media (max-width: 1199.98px) {
    .ui-hero__body { max-width: 56%; }
    .ui-hero h1 { font-size: 28px; }
    .ui-hero__art { right: -24px; bottom: -39px; height: 250px; }
    .ui-filter form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ui-filter--2 form, .ui-filter--1 form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ui-filter .ui-btn { grid-column: span 2; }
    .ui-filter .ui-field--wide { grid-column: span 2; }
    .ui-filter--1 .ui-field { grid-column: span 2; }
}


@media (max-width: 991.98px) {
    .ui-wrap { margin-left: 0; }
    .ui-side {
        width: 300px; max-width: 86vw; transform: translateX(-104%); visibility: hidden;
        transition: transform .28s ease, visibility 0s linear .28s;
    }
    .ui-side.is-open { transform: none; visibility: visible; transition: transform .28s ease, visibility 0s; box-shadow: 14px 0 40px rgba(10, 30, 80, .20); }
    .ui-side__close { display: flex; }
    .ui-me { display: grid; }
    .ui-top { height: 60px; padding: 0 16px; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 6px; }
    .ui-top__menu { display: flex; }
    .ui-top__brand { display: flex; }
    .ui-crumb, .ui-top__who { display: none; }
    .ui-bot { display: grid; }
    .ui-main { padding: 16px 16px 96px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

    .ui-hero { padding: 24px 22px; min-height: 150px; border-radius: 16px; margin-bottom: 16px; }
    .ui-hero__body { max-width: 62%; }
    .ui-hero h1 { font-size: 25px; }
    .ui-hero p { font-size: 14.5px; }
    .ui-hero__date { margin-top: 12px; font-size: 13.5px; }
    .ui-hero__art { right: -118px; bottom: -36px; height: 184px; width: auto; }

    .ui-sechead { grid-template-columns: minmax(0, 1fr); margin-bottom: 14px; }
    .ui-sechead__txt { grid-column: 1; grid-row: 2; }
    .ui-sechead .ui-btn { grid-column: 1; grid-row: 1; width: 100%; margin-bottom: 18px; height: 50px; }
    .ui-sechead h2 { font-size: 22px; }
    .ui-sechead p { font-size: 13.5px; }

    .ui-pagehead { display: block; margin-bottom: 16px; }
    .ui-pagehead h1 { font-size: 22px; }
    .ui-pagehead__ico { width: 40px; height: 40px; flex-basis: 40px; font-size: 19px; margin-right: 12px; }
    .ui-pagehead__act { margin-left: 0; margin-top: 14px; width: 100%; flex-wrap: wrap; }

    .ui-filter { padding: 18px 16px; margin-bottom: 18px; }
    .ui-filter form { column-gap: 12px; }

    .ui-stats { column-gap: 10px; margin-bottom: 24px; }
    .ui-stat { display: block; padding: 14px 12px 14px 14px; }
    .ui-stat__tile { width: 40px; height: 40px; flex-basis: 40px; margin: 0 0 10px; border-radius: 12px; font-size: 19px; }
    .ui-stat__txt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; }
    .ui-stat__num { font-size: 24px; }
    .ui-stat__lbl { margin-top: 0; font-size: 12.5px; line-height: 1.2; }
    .ui-stat__sub { display: none; }

    .ui-qa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
    .ui-qa__a { grid-template-columns: 38px minmax(0, 1fr) auto; column-gap: 10px; padding: 12px 12px; font-size: 13.5px; }
    .ui-qa__a--hp { display: grid; }
    .ui-qa__tile { width: 38px; height: 38px; border-radius: 11px; font-size: 18px; }
    .ui-h3 { font-size: 19px; }

    .ui-rekap__head { padding: 16px 16px; }
    .ui-rekap__head h3 { font-size: 17px; }
    .ui-rekap__range { font-size: 12.5px; }

    .fm-card { padding: 24px 18px; }
    .ui-auth { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 22px; }
    .ui-auth__hero { padding: 28px 24px 0; min-height: 0; }
    .ui-auth__hero h1 { font-size: 27px; margin-top: 16px; }
    .ui-auth__hero p.lead { font-size: 14.5px; max-width: 100%; }
    .ui-auth__art { width: 380px; height: 241px; margin: 4px 0 -44px; }
    .ui-auth__panel { padding: 32px 24px 30px; }
    .ui-auth__logo { max-width: 260px; margin-bottom: 22px; }
    .a4-container { padding: 20px 14px; }
    .tg-filter { padding: 14px; }
    .freeze-col { min-width: 176px; padding: 10px 12px !important; }
    .chart-container { padding: 16px; }
    .chart-box { height: 300px; }
    .tree-container { padding: 20px 16px; }
}

@media (min-width: 600px) and (max-width: 991.98px) {
    .ui-hero__body { max-width: 58%; }
    .ui-hero__art { right: -50px; bottom: -54px; height: 240px; }
}

@media (max-width: 767.98px) {
    /* tabel rekap menjadi kartu per baris */
    .ui-table--stack thead { display: none; }
    .ui-table--stack, .ui-table--stack tbody, .ui-table--stack tr, .ui-table--stack td { display: block; width: 100%; }
    .ui-table--stack tr { padding: 14px 16px; border-bottom: 1px solid var(--ui-line-2); }
    .ui-table--stack tbody tr:last-child { border-bottom: 0; }
    .ui-table--stack td { padding: 3px 0; border: 0; text-align: left; }
    .ui-table--stack tbody tr:hover td { background: transparent; }
    .ui-table--stack td.num { text-align: left; }
    .ui-table--stack td[data-label]::before { content: attr(data-label) ": "; color: var(--ui-muted); font-size: 12.5px; font-weight: 600; }
    .ui-table--stack td.no-label::before { content: none; }
}

@media (max-width: 767.98px) {
    .tgt-toolbar { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 14px 16px; }
    .tgt-table thead { display: none; }
    .tgt-table, .tgt-table tbody, .tgt-table tr, .tgt-table td { display: block; width: 100%; }
    .tgt-group td { padding: 10px 16px; }
    .tgt-row { padding: 14px 16px; border-bottom: 1px solid var(--ui-line-2); }
    .tgt-row td { padding: 4px 0; border: 0; }
    .tgt-row td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }
    .tgt-row.is-dirty td { background: transparent; }
    .tgt-row.is-dirty { background: #fffaf0; }
    .tgt-actions { bottom: 80px; grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
    .tgt-actions > div { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    .ui-rekap__head { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
    .ui-rekap__range { text-align: left; }
}

@media (max-width: 420px) {
    .ui-brand__t b, .ui-top__brand .ui-brand__t b { font-size: 14.5px; }
    .ui-hero h1 { font-size: 23px; }
    .ui-stat__lbl { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-side, .ui-side.is-open { transition: none; }
    * { scroll-behavior: auto !important; }
}

/* ---- Jobdesk ditulis karyawan (29 Okt 2026): panel "Tambah baris jobdesk" di Tabel Jobdesk + sel yang dikunci */
.tg-add { margin: 14px 0 16px; padding: 14px 16px; border: 1px dashed #c9d6ee; border-radius: 14px; background: #f8fafe; }
.tg-add__judul { margin-bottom: 10px; font-size: 13.5px; font-weight: 700; color: var(--ui-navy); }
.tg-add__judul i { margin-right: 6px; color: var(--ui-orange); }
.tg-add .form-text { margin-top: 8px; }
.tg-add__pesan { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: #fff4e5; border: 1px solid #fcd9a8; color: #8a4b08; font-size: 13px; font-weight: 600; }
.cell-input[readonly] { background: #f3f5f9; color: #52618a; cursor: not-allowed; }