:root { color-scheme: light; font-family: Arial, system-ui, sans-serif; }
    * { box-sizing: border-box; }
    html,body { margin:0; width:100%; min-height:100%; }
    body { background:#f7f9fc; color:#263744; font-size:13px; line-height:1.25; }
    .page { width:100%; max-width:none; margin:0; padding:7px 10px 10px; }
    .heading { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 10px; padding:0 0 4px; border-bottom:1px solid #d9e5ee; }
    h1 { margin:0; color:#265e85; font-size:18px; line-height:1.05; }
    .heading span { font-weight:650; font-size:11px; color:#4b6175; }
    .heading p { margin:0; font-size:10px; color:#748899; }
    fieldset { border:1px solid #cadbe7; border-radius:5px; background:#fff; min-width:0; margin:5px 0 0; padding:4px 8px 5px; }
    legend { color:#2b6592; font-weight:700; padding:0 4px; font-size:11px; }
    .form-line { display:grid; grid-template-columns:minmax(125px, .7fr) minmax(190px,2fr) minmax(80px,.45fr) auto; align-items:end; gap:5px; }
    .form-line.dinas-line { grid-template-columns:minmax(250px,1fr) auto; gap:5px; }
    .form-line label { display:flex; min-width:0; flex-direction:column; gap:2px; font-size:10px; font-weight:600; color:#596b7d; }
    .form-line input,.form-line select { display:block; min-width:0; width:100%; height:26px; margin:0; padding:3px 6px;
      border:1px solid #b9cbd8; border-radius:4px; background:#fff; font:inherit; font-size:12px; color:#273b4a; }
    .form-line input:focus-visible,.form-line select:focus-visible { outline:2px solid #a6c7e1; outline-offset:1px; }
    button { font:inherit; border:1px solid #bfd0de; color:#285d85; background:#edf4f9; padding:4px 10px; border-radius:4px;
      min-height:26px; cursor:pointer; white-space:nowrap; }
    button:hover:not(:disabled) { background:#dcebf6; }
    button:disabled { opacity:.6; cursor:wait; }
    #cariWilayah,#cariDinas,#simpan { background:#337bab; color:white; border-color:#337bab; font-weight:600; }
    #cariWilayah:hover:not(:disabled),#cariDinas:hover:not(:disabled),#simpan:hover:not(:disabled) { background:#246894; }
    .form-line > button { height:26px; }
    .result-options { background:#f7fbff; border:1px solid #d9e8f2; border-radius:4px; margin:5px 0 0; padding:5px 8px; }
    .result-options h3 { font-size:11px; margin:0 0 3px; }
    .result-options p { margin:2px 0; }
    .result-options button { min-height:24px; text-align:left; }
    #selectedWilayah,#selectedDinas { margin:4px 0 0; padding:3px 6px; background:#edf8f1; border-left:3px solid #68ad82; color:#286045; }
    .save-row { margin:4px 0 0; }
    #message { margin:5px 0 4px; padding:3px 6px; background:#edf3f8; border-left:3px solid #aac7de; color:#506879; }
    #message.ok { background:#eaf7ef; border-left-color:#56a97d; color:#286a43; }
    #message.error { background:#fff1f0; border-left-color:#ce665c; color:#8d403b; }
    .list-head { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:4px; margin:4px 0 4px; }
    .list-head h2 { margin:0; font-size:14px; color:#295c80; }
    .list-head p { margin:0; color:#687d90; font-size:10px; }
    .table-scroll { width:100%; overflow-x:auto; background:#fff; border:1px solid #cfdde8; border-radius:4px; }
    table.monitor-table { width:100%; min-width:780px; border-collapse:collapse; text-align:left; font-size:11px; }
    .monitor-table th,.monitor-table td { padding:4px 7px; border:1px solid #a5b4c1; vertical-align:middle; text-align:left; line-height:1.15; }
    .monitor-table th { font-size:11px; background:#e9f2f9; color:#3b627e; white-space:nowrap; border-color:#93a6b6; }
    .monitor-table tbody tr:nth-child(even) { background:#fbfdff; }
    .monitor-table td button { min-height:23px; padding:2px 7px; border:1px solid #e3cac8; color:#9c4843; background:#fffafa; }
    a { color:#246eac; text-decoration:none; } a:hover { text-decoration:underline; }
    .monitor-table td[title] { cursor:help; }
    .monitor-table td:nth-child(7), .monitor-table td:nth-child(8) { white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right; }
    #refreshSummary { min-height:24px; }
    footer { color:#8798a6; font-size:10px; padding:4px 0 0; }
    footer p { margin:0; }
    [hidden] { display:none !important; }
    @media(max-width:740px) {
      .page { padding:6px; } .heading { display:block; } .heading span { display:inline-block; margin-top:2px; }
      .heading p { margin-top:2px; }
      .form-line { grid-template-columns:1fr 1fr; align-items:end; }
      .form-line label:nth-child(2) { grid-column:1/-1; grid-row:1; }
      .form-line.dinas-line { grid-template-columns:1fr auto; }
      .form-line.dinas-line label:nth-child(1) { grid-column:auto; grid-row:auto; }
      .form-line button { width:100%; }
    }
    @media(max-width:410px) {
      .form-line,.form-line.dinas-line { grid-template-columns:1fr; }
      .form-line label:nth-child(2) { grid-column:auto; grid-row:auto; }
      .form-line > button { width:100%; }
    }

    /* Monitoring harian: mengikuti gaya tabel lama, full-width dan tetap rapat. */
    .monitor-extra { border-top:1px solid #d4e2ec; padding-top:7px; margin-top:10px; }
    .monitor-extra h2 { font-size:15px; margin:1px 0 5px; color:#295c80; }
    .monitor-note { font-size:11px; color:#6b7b89; margin:4px 0 7px; }
    .monitor-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:5px 0 6px; }
    .monitor-bar p { margin:0; font-size:11px; }
    #runMonitor { font-weight:600; background:#337bab; border-color:#337bab; color:white; }
    .company-form { display:grid; grid-template-columns:minmax(200px,1fr) 112px auto; gap:8px; align-items:end; }
    .company-form label { display:flex; flex-direction:column; gap:3px; font-size:11px; }
    .company-form input { font:inherit; font-size:12px; height:27px; padding:3px 7px; border:1px solid #b9cbd8; border-radius:4px; }
    .company-form button { height:27px; }
    #companyChoices { margin-top:5px; }
    #companyChoices button { margin:2px 4px 2px 0; white-space:normal; text-align:left; }
    #companyMsg { margin:4px 0; font-size:11px; color:#42667f; }
    #monitorStatus { margin:0; color:#456779; }
    .monitor-table td small { font-size:10px; color:#667987; }
    .monitor-table td.metric { font-variant-numeric:tabular-nums; }
    .history-scroll { max-height:260px; overflow:auto; }
    .history-scroll table { min-width:730px; }
    #companyExisting { margin-top:7px; }
    #companyExisting .monitor-bar { justify-content:space-between; }
    #companyExistingRows td:nth-child(7) { text-align:right; white-space:nowrap; }
    #companyExistingRows td:nth-child(8) { font-weight:600; }
    #companyExistingRows tr.new-entry td:nth-child(8) { color:#176c3f; }
    #companyExistingStatus { font-size:11px; color:#456779; }
    .existing-scroll { max-height:460px; overflow:auto; }
    .existing-scroll table { min-width:1000px; }
    #companyTable td button + button, .monitor-table td button + button { margin-left:4px; }
    #companyTable td:nth-child(5),#companyTable td:nth-child(6) { text-align:right; font-variant-numeric:tabular-nums; }
    @media(max-width:640px) { .company-form { grid-template-columns:1fr 98px; } .company-form button { grid-column:1/-1; } }

    /* PATCH ANTARMUKA DASHBOARD — dua menu, hanya frontend. */
    :root { font-family: Inter, "Segoe UI", Arial, sans-serif; color-scheme: light;
      --blue:#1769ca; --navy:#143c72; --green:#16884a; --red:#d9414c;
      --line:#e0e8f2; --ink:#233548; --muted:#65788b; --wash:#f5f8fc; }
    html,body { margin:0; min-height:100%; background:var(--wash); color:var(--ink); font-size:13px; }
    .dashboard-shell { display:grid; grid-template-columns:238px minmax(0,1fr); min-height:100vh; }
    .side-nav { position:sticky; top:0; align-self:start; height:100vh; background:#fff;
      border-right:1px solid var(--line); padding:22px 12px; z-index:21; }
    .brand-block { padding:4px 11px 24px; display:grid; gap:3px; }
    .brand-title { font-size:25px; font-weight:850; letter-spacing:-1px; line-height:1; color:#244e86; }
    .brand-title .brand-red { color:var(--red); }
    .brand-sub { font-size:11px; color:var(--muted); }
    .side-menu { display:grid; gap:8px; }
    .side-menu button { width:100%; border:none; display:flex; align-items:center; text-align:left; gap:11px;
      padding:13px 12px; color:#35475a; font-size:13px; font-weight:650;
      background:transparent; border-radius:9px; min-height:46px; cursor:pointer; white-space:normal; }
    .side-menu button .menu-icon { flex:none; font-size:17px; width:23px; text-align:center; }
    .side-menu button:hover, .side-menu button:focus-visible { background:#f0f6ff; color:var(--navy); }
    .side-menu button[aria-current="page"] { background:#e9f3ff; color:#145fbc;
      box-shadow:inset 4px 0 var(--blue); }
    .sidebar-foot { position:absolute; bottom:24px; left:22px; right:16px; color:var(--muted); font-size:11px; }
    .sidebar-foot span { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); margin-right:7px; }
    .dashboard-main { min-width:0; }
    .topbar { position:sticky; top:0; z-index:12; display:flex; justify-content:space-between; align-items:center;
      gap:16px; min-height:70px; padding:13px 23px; background:linear-gradient(110deg,#1e65b6,#2787e9);
      color:white; box-shadow:0 2px 9px rgba(10,49,105,.10); }
    .topbar h1 { font-size:19px; letter-spacing:-.45px; margin:0; color:white; line-height:1.15; }
    .topbar p { margin:5px 0 0; font-size:12px; color:#dfeeff; }
    .topbar-right { display:flex; gap:10px; align-items:center; font-size:12px; white-space:nowrap; }
    .topbar-right .dot { display:inline-block; width:9px; height:9px; background:#9cf0bc; border-radius:50%; margin-right:6px; }
    #openSidebar { display:none; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4);
      border-radius:8px; font-size:21px; color:white; width:38px; min-height:38px; }
    #navBackdrop { display:none; }
    .page { width:100%; max-width:none; padding:19px 19px 24px; }
    .section-intro { margin:0 0 14px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:8px; }
    .section-intro h2 { color:#123d77; font-size:19px; line-height:1.2; margin:0 0 4px; }
    .section-intro p { color:var(--muted); font-size:12px; margin:0; }
    .stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:15px; }
    .stat-tile { border:1px solid var(--line); border-radius:11px; padding:14px 14px 12px;
      box-shadow:0 1px 4px rgba(25,64,98,.045); background:#fff; display:flex; gap:12px; min-height:96px; }
    .stat-icon { display:grid; place-items:center; border-radius:10px; width:45px; height:45px;
      flex:none; font-size:22px; background:#e9f2ff; color:var(--blue); }
    .stat-tile.green .stat-icon { background:#e9f8ee; color:var(--green); }
    .stat-tile.red .stat-icon { background:#fff0f0; color:var(--red); }
    .stat-tile .stat-label { font-size:12px; font-weight:650; color:#43566b; }
    .stat-tile .stat-value { font-size:26px; font-weight:800; letter-spacing:-.8px; color:#12345f; line-height:1.22; }
    .stat-tile .stat-caption { color:var(--muted); font-size:10px; }
    .view-panel[hidden] { display:none !important; }
    .panel-card, .view-panel > fieldset, .view-panel > section,
    #historyPanel { border:1px solid var(--line); background:#fff; border-radius:11px;
      margin:0 0 13px; padding:13px 14px; box-shadow:0 1px 6px rgba(25,64,98,.045); }
    .view-panel > section .table-scroll { margin-top:10px; }
    fieldset { min-width:0; }
    legend { color:var(--navy); font-size:12px; font-weight:750; padding:0 7px; }
    .view-panel > fieldset { padding:13px 14px; }
    .form-line { grid-template-columns:minmax(140px,.8fr) minmax(260px,2fr) minmax(104px,.42fr) auto;
      align-items:end; gap:10px; }
    .form-line.dinas-line { grid-template-columns:minmax(240px,1fr) auto; }
    .form-line label, .company-form label { font-size:12px; font-weight:650; gap:6px; color:#43566b; }
    .form-line input,.form-line select,.company-form input { border:1px solid #cfdbe8;
      background:#fff; color:var(--ink); border-radius:6px; padding:7px 10px; height:36px; font-size:13px; }
    .form-line input:focus-visible,.form-line select:focus-visible,.company-form input:focus-visible {
      outline:2px solid #9bc2f3; outline-offset:0; border-color:#448cde; }
    button { border:1px solid #cfdbe8; background:#fff; color:#335572; font-size:12px;
      padding:7px 11px; min-height:34px; border-radius:6px; font-weight:650; }
    button:hover:not(:disabled) { background:#edf5ff; border-color:#abc4e1; }
    .form-line > button, .company-form button { height:36px; }
    #cariWilayah,#cariDinas,#simpan,#findCompany,#runMonitor { background:var(--green); color:#fff;
      border:1px solid var(--green); font-weight:750; }
    #cariWilayah:hover:not(:disabled),#cariDinas:hover:not(:disabled),#simpan:hover:not(:disabled),
    #findCompany:hover:not(:disabled),#runMonitor:hover:not(:disabled) { background:#0c7338; }
    #refreshSummary { background:var(--blue); color:#fff; border-color:var(--blue); margin-left:9px; }
    #refreshSummary:hover:not(:disabled) { background:#105bb5; }
    #message,#companyMsg { background:#eff6fe; color:#315f83; border-left:3px solid #76b4f7;
      padding:9px 11px; margin:0 0 13px; border-radius:5px; font-size:12px; }
    #message.ok { background:#eefbf2; border-left-color:var(--green); color:#176337; }
    #message.error { background:#fff0f1; border-left-color:var(--red); color:#9a303b; }
    .result-options { background:#f8fbff; border:1px solid #dbe8f5; margin-top:10px; padding:10px; }
    #selectedWilayah,#selectedDinas { margin:9px 0 0; padding:7px 10px; font-size:12px; }
    .list-head { margin:0 0 12px; gap:10px; align-items:center; }
    .list-head h2, .monitor-extra h2 { color:#123d77; font-size:16px; }
    .list-head p { display:flex; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:11px; }
    .monitor-note,.monitor-bar p,#monitorStatus,#companyExistingStatus { font-size:12px; color:var(--muted); }
    .monitor-extra { border-top:1px solid var(--line); padding-top:13px; margin-top:0; }
    .monitor-bar { gap:10px; margin:10px 0 6px; }
    .table-scroll { background:#fff; border:1px solid #d9e3ee; border-radius:8px;
      overflow-x:auto; width:100%; max-width:100%; }
    table.monitor-table { border:0; width:100%; min-width:1320px; border-collapse:collapse; font-size:12px; }
    #companyTable { min-width:1080px; }
    #companyExisting .monitor-table { min-width:1150px; }
    .history-scroll table { min-width:850px; }
    .monitor-table th,.monitor-table td { border:1px solid #e2e9f1; padding:10px 9px;
      line-height:1.3; vertical-align:middle; }
    .monitor-table th { background:#eef4fb; border-color:#d9e3ef; color:#29445f;
      font-size:11px; text-align:left; }
    .monitor-table tbody tr:hover { background:#f6faff; }
    .monitor-table tbody tr:nth-child(even) { background:#fcfdff; }
    .monitor-table td button { border:1px solid #f0c7cb; background:#fff7f7;
      color:#b43742; padding:6px 9px; margin-bottom:3px; min-height:30px; }
    .monitor-table td button:hover { background:#ffedf0; }
    .monitor-table td button:first-child:not(:last-child) { background:#eff6ff; border-color:#bfd8f4; color:#1766ba; }
    .monitor-table td.metric,.monitor-table td:nth-child(7),.monitor-table td:nth-child(8) { font-variant-numeric:tabular-nums; }
    #companyTable td:nth-child(5),#companyTable td:nth-child(6) { text-align:right; }
    a { color:#136ed0; text-decoration:underline; text-underline-offset:2px; }
    footer { color:#8798a8; font-size:11px; padding:7px 2px; }
    #historyPanel { margin-top:0; }
    #historyPanel > h2 { color:#123d77; font-size:16px; margin:0 0 7px; }
    .company-form { grid-template-columns:minmax(250px,1fr) 125px auto; gap:11px; }
    #companyExisting { margin-top:14px; background:#f9fcff; padding:12px; border:1px solid var(--line); border-radius:8px; }
    #companyExisting h3 { font-size:14px; margin:0; color:var(--navy); }
    .history-scroll { max-height:320px; }
    @media(max-width:1280px) { .stat-grid {grid-template-columns:repeat(2,minmax(0,1fr));} }
    @media(max-width:900px) {
      .dashboard-shell { grid-template-columns:1fr; }
      .side-nav { position:fixed; top:0; bottom:0; left:0; width:248px; max-width:83vw;
        transform:translateX(-110%); transition:transform .2s ease; box-shadow:0 5px 25px #173d7426; }
      .side-nav.is-open { transform:translateX(0); }
      #navBackdrop.is-open { display:block; position:fixed; inset:0; background:#172d4d7d; z-index:20; }
      #openSidebar { display:inline-grid; place-items:center; flex:none; }
      .topbar { padding:13px 14px; }
      .topbar h1 { font-size:16px; }
      .page { padding:14px 12px; }
    }
    @media(max-width:650px) {
      .topbar-right { display:none; }
      .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
      .stat-tile { padding:10px; gap:8px; min-height:82px; }
      .stat-icon { width:34px; height:34px; font-size:17px; }
      .stat-tile .stat-label { font-size:10px; }
      .stat-tile .stat-value { font-size:20px; }
      .stat-tile .stat-caption { font-size:9px; }
      .form-line, .form-line.dinas-line,.company-form { grid-template-columns:1fr; }
      .form-line label:nth-child(2) { grid-column:auto;grid-row:auto; }
      .form-line > button,.company-form button { width:100%; }
      .panel-card,.view-panel > fieldset,.view-panel > section,#historyPanel { padding:11px; }
      #refreshSummary { margin:8px 0 0; }
    }


/* PATCH MENU DI ATAS — style.css eksternal agar kompatibel CSP style-src 'self'. */
.dashboard-shell { display:block; min-height:100vh; }
.dashboard-main { width:100%; min-width:0; }
.topbar { position:relative; top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:15px;
  padding:13px 22px; min-height:76px; }
.topbar-brand { display:flex; flex-direction:column; justify-content:center; flex:none;
  padding-right:18px; border-right:1px solid rgba(255,255,255,.28); }
.topbar-brand .brand-title { color:#fff; font-size:24px; font-weight:850; line-height:1; letter-spacing:-.7px; }
.topbar-brand .brand-red { color:#ff666d; }
.topbar-brand .brand-sub { color:#dbeaff; font-size:10px; margin-top:5px; }
.topbar-heading { flex:1; min-width:200px; }
.topbar-heading h1 { font-size:18px; color:#fff; margin:0; }
.topbar-heading p { color:#e0edff; font-size:12px; margin:4px 0 0; }
.topbar-right { color:#f0f8ff; }
.top-menu { position:sticky; top:0; z-index:17; display:flex; gap:8px; align-items:center;
  padding:8px 22px; background:#fff; border-bottom:1px solid #dae6f1;
  box-shadow:0 2px 9px rgba(20,55,95,.06); }
.top-menu button { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:39px; padding:9px 15px; border:1px solid transparent; border-radius:7px;
  font-size:13px; font-weight:700; color:#3a566f; background:transparent; cursor:pointer; }
.top-menu button .menu-icon { font-size:17px; line-height:1; }
.top-menu button:hover,.top-menu button:focus-visible { background:#edf5ff; border-color:#d0e1f5; }
.top-menu button[aria-current="page"] { background:#e9f3ff; border-color:#bad8f7; color:#145fbc;
  box-shadow:inset 0 -3px #1769ca; }
.view-panel > .section-intro { margin-bottom:10px; }
@media(max-width:900px) {
  .topbar { padding:12px 14px; }
  .top-menu { padding:8px 12px; }
  .topbar h1 { font-size:17px; }
}
@media(max-width:580px) {
  .topbar { gap:9px; padding:12px 11px; }
  .topbar-brand { padding-right:10px; }
  .topbar-brand .brand-title { font-size:20px; }
  .topbar-heading { min-width:0; flex-basis:50%; }
  .topbar-heading h1 { font-size:14px; }
  .topbar-heading p { font-size:10px; }
  .top-menu { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:7px 9px; }
  .top-menu button { padding:8px 6px; font-size:11px; min-width:0; min-height:39px; }
  .top-menu button .menu-icon { font-size:14px; }
}