/* =========================================================================
   Spasio — style.css
   Tema profesional kontras tinggi (terbaca di cahaya terang, WCAG AA).
   Responsif penuh: ponsel, tablet, desktop. Tanpa dependensi eksternal.
   ========================================================================= */

:root{
  --teal-900:#0f3d1f; --teal-800:#1b5e20; --teal-700:#2e7d32; --teal-600:#388e3c;
  --teal:#2e7d32; --teal-500:#43a047;
  --amber:#e08a1e; --red:#dc2626; --green:#16a34a; --blue:#2563eb;
  --ink:#10201f; --muted:#5b6b6a; --line:#dfe6e4; --bg:#f3f7f3; --card:#ffffff;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(15,61,31,.06),0 6px 20px rgba(15,61,31,.07);
  --shadow-sm:0 1px 2px rgba(15,61,31,.08);
  --sidebar-w:236px; --topbar-h:58px;
  --font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  font-size:15px;line-height:1.5;
}
a{color:var(--teal-700);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.5rem;margin:0 0 4px} h2{font-size:1.15rem} h3{font-size:1rem;margin:14px 0 6px}
code,.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.86em}
.muted{color:var(--muted)} .small{font-size:.82rem}
.ok{color:var(--green);font-weight:600} .bad{color:var(--red);font-weight:600}
hr{border:none;border-top:1px solid var(--line);margin:18px 0}

.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:1000;border-radius:6px}

/* ---------- Topbar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:50;
  display:flex;align-items:center;gap:12px;padding:0 16px;
  background:var(--teal-800);color:#fff;box-shadow:var(--shadow-sm);
}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mark{
  display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,var(--amber),#f0a93f);color:#3a2400;font-weight:800;
}
.brand-name{font-size:1.05rem;letter-spacing:.2px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.user-name{color:#dbeae8;font-size:.9rem}
.nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:1.5rem;cursor:pointer;padding:4px 8px}

.role-badge{font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.3px}
.role-superadmin{background:#fde68a;color:#7a4d00}
.role-admin{background:#bfdbfe;color:#1e3a8a}
.role-manager{background:#bbf7d0;color:#14532d}
.role-user{background:#e2e8f0;color:#334155}
.role-guest{background:#f1f5f9;color:#64748b}

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed;top:var(--topbar-h);bottom:0;left:0;width:var(--sidebar-w);z-index:40;
  background:var(--teal-900);color:#cfe3e0;padding:14px 10px;overflow-y:auto;
  display:flex;flex-direction:column;
}
.sidebar ul{list-style:none;margin:0;padding:0;flex:1}
.sidebar li{margin:2px 0}
.sidebar a{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;
  color:#cfe3e0;font-weight:500;text-decoration:none;transition:background .15s,color .15s;
}
.sidebar a:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar li.active a{background:var(--amber);color:#2a1a00;font-weight:700}
.sidebar .ico{font-size:1.05rem;width:20px;text-align:center}
.sidebar-foot{color:#6f8d8a;font-size:.72rem;padding:10px 13px;border-top:1px solid rgba(255,255,255,.08)}

/* ---------- Content ---------- */
.content{margin-top:var(--topbar-h);margin-left:var(--sidebar-w);padding:24px;max-width:1180px}
.content-full{margin-left:0}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-actions,.page-actions form{display:flex;gap:8px;align-items:center}

/* ---------- Cards & grid ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);margin-bottom:18px}
.card-title{margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-dash{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card-link{display:block;transition:transform .12s,box-shadow .12s}
.card-link:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(10,46,47,.12);text-decoration:none}
.card-ico{font-size:1.7rem;display:block;margin-bottom:6px}

/* ---------- Widgets ---------- */
.widget-title{font-size:1rem;margin:0 0 12px}
.row-item{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);
  color:var(--ink);text-decoration:none}
.row-item:last-child{border-bottom:0}
a.row-item:hover{background:#f8fafa;text-decoration:none}
.row-main{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-meta{font-size:.8rem;color:var(--muted);white-space:nowrap}
.row-meta.overdue,.overdue{color:var(--red);font-weight:600}
.empty{color:var(--muted);text-align:center;padding:18px;font-style:italic}
.widget-kpi{text-align:center}
.kpi{margin:8px 0}
.kpi-num{font-size:2.4rem;font-weight:800;color:var(--teal-700);line-height:1}
.kpi-label{color:var(--muted);font-size:.85rem}
.progress{height:9px;background:var(--line);border-radius:999px;overflow:hidden;margin:8px 0}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--teal-600),var(--green))}

.quick-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

/* ---------- Badges / chips / status ---------- */
.badge{display:inline-block;min-width:30px;text-align:center;font-size:.72rem;font-weight:700;
  padding:3px 7px;border-radius:6px;color:#fff}
.prio-1{background:#b91c1c}.prio-2{background:#ea580c}.prio-3{background:#0891b2}
.prio-4{background:#64748b}.prio-5{background:#94a3b8}
.sev-1{background:#b91c1c}.sev-2{background:#ea580c}.sev-3{background:#ca8a04}
.sev-4{background:#64748b}.sev-5{background:#94a3b8}
.chip{display:inline-block;font-size:.74rem;padding:3px 9px;border-radius:999px;background:#eef3f2;color:var(--teal-800);font-weight:600}
.chip-cat{background:#e0efee}
.status{display:inline-block;font-size:.74rem;font-weight:600;padding:3px 9px;border-radius:999px}
.status-new{background:#e2e8f0;color:#334155}
.status-in-progress{background:#dbeafe;color:#1e40af}
.status-pending,.status-pending-verification{background:#fef3c7;color:#92400e}
.status-done,.status-resolved,.status-complete,.status-accepted{background:#dcfce7;color:#166534}
.status-close,.status-closed,.status-wf-end{background:#e5e7eb;color:#374151}
.status-rejected,.status-cancelled{background:#fee2e2;color:#991b1b}
.status-open,.status-assigned{background:#e0f2fe;color:#075985}
.status-transferred,.status-require-action{background:#ede9fe;color:#5b21b6}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table{width:100%;border-collapse:collapse;background:var(--card)}
.data-table th,.data-table td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.data-table th{font-size:.74rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);background:#fafcfb;position:sticky;top:0}
.data-table.compact th,.data-table.compact td{padding:8px 10px}
.data-table tbody tr[onclick]{cursor:pointer}
.data-table tbody tr:hover{background:#f6faf9}

/* ---------- Forms ---------- */
.form label{display:block;margin-bottom:14px;font-weight:600;font-size:.9rem;color:#243534}
.form input,.form select,.form textarea{
  display:block;width:100%;margin-top:6px;padding:10px 12px;font:inherit;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);transition:border .15s,box-shadow .15s}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--teal-600);box-shadow:0 0 0 3px rgba(28,107,102,.15)}
.form textarea{resize:vertical}
.form-card{max-width:680px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-actions{display:flex;gap:10px;margin-top:8px}
.has-error input,.has-error select{border-color:var(--red)}
.err{color:var(--red);font-weight:500;font-size:.8rem;display:block;margin-top:-8px;margin-bottom:10px}
fieldset{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;margin:0 0 16px}
legend{padding:0 6px;font-weight:700;color:var(--teal-700)}
.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.filterbar input,.filterbar select{padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;background:#fff}
.filterbar input[type=search]{min-width:200px;flex:1}
.inline-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.checkbox-row{display:flex;align-items:center;gap:8px;font-weight:500}
.checkbox-row input{width:auto;margin:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  font:inherit;font-weight:600;padding:10px 16px;border-radius:var(--radius-sm);border:1px solid transparent;
  transition:background .15s,box-shadow .15s,transform .05s;text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:7px 12px;font-size:.85rem}
.btn-block{width:100%}
.btn-primary{background:var(--teal-700);color:#fff}
.btn-primary:hover{background:var(--teal-800)}
.btn-outline{background:#fff;color:var(--teal-700);border-color:var(--teal-600)}
.btn-outline:hover{background:#eef5f4}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.content .btn-ghost{color:var(--teal-700);border-color:var(--line)}
.content .btn-ghost:hover{background:#eef5f4}

/* ---------- Alerts ---------- */
.alert{padding:12px 15px;border-radius:var(--radius-sm);margin-bottom:16px;border-left:4px solid;font-size:.92rem}
.alert-info{background:#e0f2fe;border-color:var(--blue);color:#075985}
.alert-success{background:#dcfce7;border-color:var(--green);color:#166534}
.alert-error{background:#fee2e2;border-color:var(--red);color:#991b1b}
.alert-warn{background:#fef3c7;border-color:var(--amber);color:#92400e}

/* ---------- Detail lists / misc ---------- */
.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 14px;margin:0}
.kv dt{color:var(--muted);font-size:.85rem}
.kv dd{margin:0;font-weight:500}
.prose{white-space:normal;color:#243534}
.comment{padding:10px 0;border-bottom:1px solid var(--line)}
.comment:last-child{border-bottom:0}
.feature-list{margin:0;padding-left:20px}
.feature-list li{margin:6px 0}
.tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.tab{padding:10px 16px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent}
.tab.active{color:var(--teal-700);border-color:var(--teal-600)}
.qr-box{text-align:center;margin:14px 0;padding:14px;background:#fafcfb;border-radius:var(--radius-sm)}

/* ---------- Auth pages ---------- */
.auth-body{display:grid;place-items:center;min-height:100vh;padding:20px;
  background:linear-gradient(135deg,var(--teal-900),var(--teal-700))}
.auth-card{width:100%;max-width:410px;background:#fff;border-radius:16px;padding:30px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.auth-brand h1{margin:0;font-size:1.4rem}
.auth-brand .brand-mark{width:42px;height:42px;font-size:1.3rem;border-radius:11px}
.auth-title{margin:18px 0 4px}
.auth-foot{text-align:center;margin-top:18px}

/* ---------- Responsive: tablet & phone ---------- */
@media (max-width:900px){
  .nav-toggle{display:block}
  .sidebar{transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:6px 0 30px rgba(0,0,0,.25)}
  body.nav-open .sidebar{transform:translateX(0)}
  .content{margin-left:0}
  body.nav-open::after{content:"";position:fixed;inset:var(--topbar-h) 0 0 0;background:rgba(0,0,0,.35);z-index:39}
}
@media (max-width:620px){
  body{font-size:14px}
  .content{padding:16px 13px}
  .form-row{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dt{margin-top:8px}
  .grid-2{grid-template-columns:1fr}
  .user-name{display:none}
  h1{font-size:1.3rem}
  .page-head{align-items:flex-start}
  .data-table th,.data-table td{padding:9px 8px}
}
@media (min-width:1500px){ .content{max-width:1320px} }

/* ---------- Kalender Agenda ---------- */
.cal-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cal-nav{display:flex;align-items:center;gap:6px}
.cal-title{font-size:1.05rem;margin-left:8px}
.cal-views{display:flex;gap:4px}
.cal-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}

.cal-month{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cal-dow{background:#fafcfb;text-align:center;font-size:.74rem;font-weight:700;color:var(--muted);padding:8px 0;text-transform:uppercase}
.cal-cell{background:#fff;min-height:104px;min-width:0;padding:5px 6px;display:flex;flex-direction:column;gap:3px}
.cal-cell.cal-out{background:#f7f9f9}
.cal-cell.cal-out .cal-daynum{color:#b6c2c0}
.cal-cell.cal-today{background:#eaf5ea;box-shadow:inset 0 0 0 2px var(--teal-600)}
.cal-daynum{font-size:.82rem;font-weight:600;text-align:right}
.cal-daynum a{color:inherit}
.cal-event{display:flex;align-items:flex-start;gap:4px;font-size:.74rem;line-height:1.25;
  background:#f1f6f1;border-left:3px solid var(--teal-700);border-radius:4px;
  padding:2px 5px;color:var(--ink);text-decoration:none;min-width:0;
  white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.cal-event .cal-time{flex:none}
.cal-event:hover{background:#e3efe3;text-decoration:none}
.cal-time{font-weight:700;font-variant-numeric:tabular-nums}
.cal-more{font-size:.7rem;color:var(--muted)}

.cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.cal-weekday{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px;min-height:120px}
.cal-weekday h3{margin:0 0 8px;font-size:.86rem}
.cal-weekday h3 a{color:var(--ink)}
.cal-weekday.cal-today{box-shadow:inset 0 0 0 2px var(--teal-600)}
.cal-weekday .cal-event{white-space:normal;margin-bottom:4px}

@media (max-width:900px){
  .cal-month .cal-event .cal-time{display:none}
  .cal-cell{min-height:78px}
  .cal-week{grid-template-columns:1fr}        /* tumpuk hari di layar kecil */
}
@media (max-width:620px){
  .cal-cell{min-height:60px;padding:3px}
  .cal-event{font-size:.68rem}
  .cal-toolbar{flex-direction:column;align-items:stretch}
}

/* ---------- Meeting Free/Busy grid ---------- */
.fb-wrap{margin-top:10px}
.fb-grid{border-collapse:collapse;font-size:.7rem;min-width:max-content}
.fb-grid th{padding:3px 4px;font-size:.62rem;color:var(--muted);font-weight:700;text-align:center;white-space:nowrap;border-bottom:1px solid var(--line)}
.fb-grid th:first-child,.fb-name{text-align:left;position:sticky;left:0;background:#fff;z-index:1;
  padding:4px 8px;font-weight:600;white-space:nowrap;border-right:1px solid var(--line)}
.fb-cell{width:18px;height:20px;border:1px solid #eef2f1}
.fb-free{background:#dcfce7}
.fb-busy{background:#fecaca}
.fb-ok{background:var(--teal-600)}
.fb-all td.fb-cell{height:10px}
.fb-all .fb-name{color:var(--teal-700)}
.fb-key{display:inline-block;width:14px;height:12px;border-radius:3px;vertical-align:middle;margin:0 3px}

/* ---------- Laporan: chart & cetak ---------- */
.chart-pie{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.chart-legend{display:flex;flex-direction:column;gap:5px;font-size:.82rem}
.chart-legend .lg{display:flex;align-items:center;gap:7px}
.chart-legend .lg span{width:12px;height:12px;border-radius:3px;display:inline-block}
.inline-label{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600}
.inline-label input{width:auto}

@media print {
  .topbar,.sidebar,.no-print,.page-actions,.filterbar,.skip-link{display:none !important}
  .content{margin:0 !important;max-width:100% !important;padding:0 !important}
  .card{box-shadow:none;border-color:#ccc;break-inside:avoid}
  body{background:#fff}
  .grid-2{grid-template-columns:1fr 1fr}
}

/* ---------- Inline row editor (workgroup) ---------- */
.row-edit summary{cursor:pointer;list-style:none;display:inline-flex}
.row-edit summary::-webkit-details-marker{display:none}
.row-edit[open] summary{margin-bottom:4px}
.row-edit .form label{margin-bottom:8px}

/* ---------- Topbar: site switcher + bell ---------- */
.site-switch select{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);
  border-radius:8px;padding:6px 8px;font:inherit;font-size:.82rem;max-width:160px}
.site-switch select option{color:#10201f}
.site-name{color:#dbeae8;font-size:.82rem;background:rgba(255,255,255,.1);padding:5px 9px;border-radius:8px}
.bell{position:relative;color:#fff;text-decoration:none;font-size:1.1rem;padding:4px 6px;line-height:1}
.bell:hover{text-decoration:none}
.bell-badge{position:absolute;top:-3px;right:-6px;background:var(--amber);color:#3a2400;
  font-size:.62rem;font-weight:800;min-width:16px;height:16px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.notif-unread{background:#eaf5ea}
.notif-unread .row-main strong::before{content:"● ";color:var(--amber)}
@media (max-width:620px){
  .site-switch select{max-width:108px}
  .site-name{display:none}
}

/* ---------- Topbar search ---------- */
.topbar-search input{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);
  border-radius:999px;padding:6px 12px;font:inherit;font-size:.82rem;width:150px;transition:width .15s}
.topbar-search input::placeholder{color:#bcd3d0}
.topbar-search input:focus{outline:none;width:200px;background:rgba(255,255,255,.18)}
@media (max-width:900px){ .topbar-search{display:none} }

/* ---------- Login: pilih site ---------- */
.site-choices{display:flex;flex-direction:column;gap:8px;margin:4px 0 14px}
.site-choice{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;cursor:pointer;transition:border-color .12s,background .12s}
.site-choice:hover{border-color:var(--teal)}
.site-choice input{accent-color:var(--teal)}
.site-choice span{font-weight:600}
.site-choice:has(input:checked){border-color:var(--teal);background:#eaf5ea}

/* ---------- Date/time picker ---------- */
.dtp{position:absolute;z-index:1000;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.16);padding:10px;width:260px;font-size:.85rem}
.dtp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-weight:700}
.dtp-head button{border:none;background:#eef3f2;border-radius:8px;width:28px;height:28px;cursor:pointer;font-size:1rem}
.dtp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dtp-dow{text-align:center;font-size:.68rem;color:var(--muted);font-weight:700;padding:2px 0}
.dtp-day{border:none;background:transparent;border-radius:8px;height:30px;cursor:pointer;color:var(--ink)}
.dtp-day:hover{background:#eaf5ea}
.dtp-day.dtp-out{color:#c2cecc}
.dtp-day.dtp-sel{background:var(--teal-700);color:#fff;font-weight:700}
.dtp-time{display:flex;align-items:center;gap:6px;margin-top:8px}
.dtp-time select{padding:6px;border:1px solid var(--line);border-radius:8px}
.dtp-ok{margin-left:auto;background:var(--teal-700);color:#fff;border:none;border-radius:8px;padding:6px 14px;cursor:pointer;font-weight:700}

/* ---------- Simple key/value list ---------- */
.kv-list{list-style:none;padding:0;margin:6px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.kv-list li{background:#f1f6f1;border-radius:8px;padding:8px 10px;font-size:.85rem}

/* ---------- Brand logo (uploaded) ---------- */
.brand-logo{height:30px;width:auto;display:block}
.brand .brand-name{font-weight:800;letter-spacing:.2px}
.auth-brand-logo{justify-content:center;display:flex}
.auth-brand-logo img{max-width:230px;width:80%;height:auto;margin:0 auto 8px;display:block}

/* ---------- Sidebar account / logout (mobile-friendly) ---------- */
.sidebar-account{border-top:1px solid rgba(255,255,255,.10);padding:6px 0}
.sidebar-account a{display:flex;align-items:center;gap:10px;color:#dbe7db;padding:11px 14px;text-decoration:none;font-size:.9rem}
.sidebar-account a:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-logout{color:#ffd9c2 !important;font-weight:700}
.sidebar-logout:hover{background:rgba(224,138,30,.22) !important}
/* Pada layar kecil, rapikan topbar agar logout tetap mudah lewat menu */
@media (max-width:620px){
  .role-badge{display:none}
  .topbar-right .btn-ghost{padding:6px 8px}
}

/* ---------- Scope multi-select filter ---------- */
.scope-filter{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}
.scope-chk{display:inline-flex;align-items:center;gap:5px;background:#f1f6f1;border:1px solid var(--line);border-radius:999px;padding:4px 10px;cursor:pointer}
.scope-chk input{accent-color:var(--teal-600);margin:0}
.scope-chk:has(input:checked){background:#e3efe3;border-color:var(--teal-600);color:var(--ink);font-weight:600}

/* ---------- Calendar overlap highlight ---------- */
.cal-event.cal-overlap{background:#fff3e0;border-left-color:#e65100 !important;box-shadow:inset 0 0 0 1px #ffb74d}
.cal-event.cal-overlap:hover{background:#ffe6c7}
.chip-overlap{background:#fff3e0;color:#b34700;border:1px solid #ffb74d}
tr.row-overlap{background:#fff8ef}
tr.row-overlap:hover{background:#ffefd6}

/* ---------- Week list (grouped by day) ---------- */
.day-group{padding:6px 0 10px;border-bottom:1px solid var(--line)}
.day-group:last-child{border-bottom:none}
.day-group-head{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:1rem;color:var(--teal-800)}
.day-group.is-today .day-group-head{color:var(--teal-700)}
.row-item.day-indent{margin-left:16px}

/* ---------- Dashboard settings ---------- */
.dash-settings{margin-bottom:14px}
.dash-settings summary{cursor:pointer;font-weight:600;color:var(--teal-700)}

/* ---------- Sortable table headers ---------- */
.data-table th.sortable a{color:inherit;text-decoration:none;display:inline-block;white-space:nowrap}
.data-table th.sortable a:hover{color:var(--teal-700)}
.data-table th.sortable.active{color:var(--teal-700)}

/* ---------- GSheet export rows ---------- */
tr.row-new{background:#f1f6f1}

/* ---------- Dashboard meeting RSVP ---------- */
.rsvp-count{font-size:.82rem;font-weight:600;white-space:nowrap;margin:0 4px}
.chip-ok{background:#e3efe3;color:#1b5e20;border:1px solid #43a047}

/* ---------- Dashboard unaccepted (red) ---------- */
.row-main.unaccepted{color:#c0341d;font-weight:600}
.chip-danger{background:#fde8e4;color:#c0341d;border:1px solid #f0a99a;font-size:.7rem}

/* ---------- Agenda: meeting yang sudah di-accept (biru muda) ---------- */
.cal-event.cal-meeting-acc{background:#e3f0fb;border-left-color:#1565c0 !important}
.cal-event.cal-meeting-acc:hover{background:#d3e6f8}
.row-item.cal-meeting-acc{background:#e3f0fb;border-radius:8px}
tr.cal-meeting-acc{background:#e9f2fb}

/* ---------- Workflow accept/reject ---------- */
.accept-box{background:#fff8e1;border:1px solid #ffe082;border-radius:10px;padding:12px 14px;margin-bottom:12px}
.accept-box p{margin:0 0 10px}


/* ---------- Dashboard view-mode bar (radio) ---------- */
.dash-modebar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:0 0 14px;padding:10px 14px;background:#f4f8f4;border:1px solid var(--line);border-radius:10px}
.modebar-title{color:var(--teal-800)}
.moderadio{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:.9rem;padding:3px 6px;border-radius:6px}
.moderadio input{width:16px;height:16px;accent-color:var(--teal-700);cursor:pointer}
.moderadio.active{color:var(--teal-700);font-weight:700}

/* ---------- Threaded discussion ---------- */
.discussion .comment{padding:8px 0;border-bottom:1px solid var(--line)}
.discussion .comment:last-of-type{border-bottom:none}
.comment-head{margin-bottom:2px}
.comment-actions{margin-top:3px}
.reply-toggle{font-size:.8rem;color:var(--teal-700);text-decoration:none}
.reply-form{margin:8px 0 4px;display:flex;flex-direction:column;gap:8px;max-width:640px}
.reply-form textarea,.discussion-new textarea{width:100%;min-height:70px;resize:vertical;padding:10px 12px;
  border:1.5px solid #cfe0c8;border-radius:10px;font:inherit;font-size:.95rem;line-height:1.45;background:#fff;box-sizing:border-box}
.reply-form textarea:focus,.discussion-new textarea:focus{outline:2px solid rgba(47,122,63,.12);border-color:var(--teal-600)}
.reply-form button,.discussion-new button{align-self:flex-start}
.comment-replies{margin-left:22px;padding-left:10px;border-left:2px solid var(--line);margin-top:6px}
.discussion-new{margin-top:16px;display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.discussion .comment-body{font-size:.95rem;line-height:1.5;color:var(--ink);margin:2px 0}

/* ---------- Agenda: shading tanggal lampau ---------- */
/* Tanggal lampau. Ditulis SETELAH .cal-out agar menang bila sebuah sel
   sekaligus di luar bulan dan sudah lewat — keduanya lampau, dan yang
   penting bagi pengguna adalah "sudah lewat". */
.cal-cell.cal-past{background:#c9ced2}
.cal-cell.cal-past .cal-daynum a{color:#5c646a}
.cal-cell.cal-out.cal-past{background:#d5d9dc}      /* sedikit lebih muda: lampau DAN bulan lain */
.cal-cell.cal-past .cal-chip{opacity:.72}
.cal-cell.cal-past .cal-daynum a{color:#4a4f55}
.cal-cell.cal-past.cal-today{background:#a9b7a0}

/* ---------- Laporan: judul kelompok ---------- */
.report-group-title{margin:18px 0 8px;font-size:1.05rem;color:var(--teal-800);border-bottom:2px solid var(--line);padding-bottom:4px}
.report-group-title:first-of-type{margin-top:4px}

/* ---------- Lampiran: nomor urut batch ---------- */
.attach-group{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--line)}
.attach-group:last-of-type{border-bottom:none}
.attach-seq{min-width:42px;font-weight:700;color:var(--teal-700);padding-top:4px}
.attach-files{flex:1}
.attach-files .row-item{border:none;padding:2px 0}

/* ---------- Laporan: baris metrik bisa diklik ---------- */
tr.row-click{cursor:pointer}
tr.row-click:hover{background:#eef5ee}

/* ---------- Foto & Dokumentasi ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:8px}
.photo-thumb{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;transition:transform .12s,box-shadow .12s}
.photo-thumb:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.10)}
.photo-thumb img{width:100%;height:120px;object-fit:cover;display:block}
.photo-doc{display:flex;align-items:center;justify-content:center;height:120px;font-size:2.4rem;background:#f3f6f3}
.photo-cap{display:block;padding:7px 9px;font-size:.82rem;line-height:1.25}

/* ---------- Kontak: struktur jabatan ---------- */
.org-tree, .org-tree ul{list-style:none;margin:0;padding-left:18px}
.org-tree > li{padding-left:0}
.org-tree li{position:relative;padding:4px 0 4px 14px}
.org-tree li::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1px solid var(--line)}
.org-tree > li::before{border-left:none}
.org-node{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 10px;background:#f7faf7;border:1px solid var(--line);border-radius:8px}
.org-name{font-weight:600;text-decoration:none;color:var(--teal-800)}
.org-pos{color:#555;font-size:.86rem}

/* ---------- Kontak: highlight & warning ---------- */
.cnote{padding:8px 10px;border-radius:8px;margin-bottom:8px;border:1px solid var(--line)}
.cnote-head{margin-bottom:2px}
.cnote-hi{background:#eef8ee;border-color:#bfe3c0}
.cnote-warn{background:#fdeeee;border-color:#f0c2c2}
.cnote-plain{background:#f7f7f7}

/* ---------- Kontak: foto profil & crop ---------- */
.avatar-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.avatar-box{width:96px;height:96px;border-radius:50%;overflow:hidden;background:#e8f0e8;display:flex;align-items:center;justify-content:center;border:2px solid var(--line);flex:none}
.avatar-box img{width:100%;height:100%;object-fit:cover}
.avatar-init{font-size:2rem;font-weight:700;color:var(--teal-700)}
.crop-wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;margin-top:10px}
#cropCanvas{border-radius:10px;border:1px solid var(--line);cursor:grab;touch-action:none;background:#eee}
.crop-controls{flex:1;min-width:220px}
.crop-controls input[type=range]{width:100%}
.avatar-sm{width:34px;height:34px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:6px;border:1px solid var(--line)}
.avatar-sm-init{display:inline-flex;width:34px;height:34px;border-radius:50%;background:#e8f0e8;color:var(--teal-700);font-weight:700;align-items:center;justify-content:center;margin-right:6px;vertical-align:middle}

/* ---------- Folder (galeri & file kerja) ---------- */
.crumbs{margin:0 0 10px;font-size:.9rem}
.crumbs a{text-decoration:none;color:var(--teal-700)}
.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.folder-item{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#f8faf8}
.folder-item > a{text-decoration:none;color:var(--teal-800);font-weight:600}
.folder-actions{margin-top:4px}


/* ---------- Topbar: nama site di tengah ---------- */
.brand-sep{color:rgba(255,255,255,.55);margin:0 8px;font-weight:400}
.brand-site{color:#fff;font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32vw}

/* ================= MOBILE (≤900px): tampilan lebih besar & kontras ================= */
@media (max-width: 900px) {
  body{font-size:17px;color:#122016;background:#eaf1ea}
  .content{margin-left:0;padding:16px 14px 28px;max-width:100%;width:100%}
  .brand-site{font-size:.92rem;max-width:34vw}
  .brand-sep{margin:0 5px}

  .page-head{flex-direction:column;align-items:stretch;gap:8px}
  .page-head h1{font-size:1.55rem;color:#0e2e1a;font-weight:800}
  .page-actions{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  .page-actions .btn{flex:1 1 46%;text-align:center;justify-content:center}

  .card{padding:15px;border-radius:14px;border:1px solid #b6cdba;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06)}
  .card-title,.widget-title{font-size:1.15rem;color:#0e2e1a;font-weight:800}
  .muted{color:#42553f}
  .small,.muted.small{font-size:.95rem}
  .empty{font-size:1.02rem;color:#42553f;text-align:center;padding:14px}

  .btn{padding:12px 16px;font-size:1rem;border-radius:11px;font-weight:700}
  .btn-sm{padding:11px 14px;font-size:.98rem}
  .btn-outline,.btn-ghost{border:1.5px solid #7fae90;color:#134a2a;background:#fff}
  .btn-primary{background:#15803d;color:#fff;border-color:#15803d}

  .filterbar{flex-direction:column;align-items:stretch;gap:9px}
  .filterbar input,.filterbar select,
  .form input,.form select,.form textarea{width:100%;font-size:1.05rem;padding:13px 12px;border-radius:11px;
    border:1.5px solid #9dbca4;background:#fff;color:#122016}
  .form-row{flex-direction:column;gap:10px}
  .form label{font-weight:700;color:#1d3524}
  fieldset{border:1.5px solid #b6cdba;border-radius:12px;padding:12px}
  legend{font-weight:800;color:#0e2e1a}

  /* Tabel → kartu (Contacts, Attendee List, dll) */
  .table-wrap{overflow:visible}
  .data-table thead{display:none}
  .data-table,.data-table tbody,.data-table tr,.data-table td{display:block;width:100%}
  .data-table tr{background:#fff;border:1.5px solid #a9c6b0;border-radius:14px;padding:14px;margin-bottom:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.07)}
  .data-table td{border:none;padding:5px 0;font-size:1.03rem;color:#1b2c1f}
  .data-table td:first-child{font-weight:800;color:#0e2e1a;font-size:1.05rem}
  .data-table td:empty{display:none}
  .data-table .avatar-sm,.data-table .avatar-sm-init{width:46px;height:46px;font-size:1.15rem}
  .data-table td:last-child{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed #c6dccb}
  .data-table td:last-child .btn{flex:1 1 46%;min-width:0}
  .data-table td:last-child form{flex:1 1 46%;display:flex}
  .data-table td:last-child form .btn{flex:1}

  .chip{font-size:.92rem;padding:5px 10px;border:1px solid #9dbca4}
  .chip-ok{background:#dcf2e3;color:#14532d;border-color:#7fae90}
  .chip-danger{background:#fde2e2;color:#8a2b2b}

  /* Kontak: avatar, crop, struktur, catatan */
  .avatar-box{width:112px;height:112px}
  #cropCanvas{width:100%;max-width:320px;height:auto}
  .crop-wrap{flex-direction:column}
  .org-node{padding:11px 12px;font-size:1.03rem}
  .org-tree,.org-tree ul{padding-left:10px}
  .cnote{font-size:1.03rem;padding:11px 12px}
  .folder-grid{grid-template-columns:1fr}
  .grid-2,.grid-cards{grid-template-columns:1fr!important}
  .row-item{padding:10px 0;font-size:1.02rem}
}

/* Halaman publik (QR / daftar hadir) di ponsel */
@media (max-width: 900px) {
  .pub-card{padding:20px 16px;border-radius:16px}
  .pub-card h1{font-size:1.5rem}
  .pub-form input,.pub-form textarea{font-size:1.08rem;padding:14px 12px;border:1.5px solid #9dbca4}
  .pub-btn{padding:16px;font-size:1.08rem}
  .pub-file{padding:18px;font-size:1.05rem}
}

/* Kartu statistik kecil (mis. saldo WhatsApp per site) */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{background:#f6faf6;border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-align:center}
.stat-label{display:block;font-size:.85rem;color:#5a6b58;font-weight:600}
.stat-value{display:block;font-size:1.6rem;font-weight:800;color:#14532d;margin-top:2px}
.stat-value.text-danger{color:#b42318}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr} }

/* ---------- Form Workflow: langkah bernomor, rapi & lega ---------- */
.wf-form{max-width:920px}
.wf-step{border:1px solid var(--line);border-radius:14px;padding:18px 18px 14px;margin-bottom:18px;background:#fff}
.wf-step > legend{display:flex;align-items:center;gap:10px;font-weight:800;color:#14532d;font-size:1.05rem;padding:0 8px}
.wf-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
        background:#15803d;color:#fff;font-size:.85rem;font-weight:800}
.wf-step.has-error{border-color:#e0a3a3;background:#fffaf9}
.wf-hint{margin:12px 0 6px;font-weight:700;color:#24382a}
.wf-sub{border-left:3px solid #cfe3d4;padding:10px 0 10px 14px;margin:14px 0;background:#f8fbf8;border-radius:0 10px 10px 0}
.wf-sub input[type="search"]{width:100%;margin-bottom:6px}
.wf-sub select{width:100%}
.wf-actions{display:flex;gap:10px;align-items:center;margin-top:4px}
@media (max-width:900px){
  .wf-step{padding:14px}
  .wf-sub{padding-left:10px}
  .wf-actions .btn{flex:1 1 46%}
}

/* ================= Messages Centre ================= */
.msg-split{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start}
.msg-people{border:1px solid var(--line);border-radius:12px;max-height:420px;overflow:auto;background:#fbfdfb}
.msg-person{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #eef2ec;
            text-decoration:none;color:inherit}
.msg-person:last-child{border-bottom:0}
.msg-person:hover{background:#f1f7f0}
.msg-person.is-active{background:#e6f0e3;box-shadow:inset 3px 0 0 #15803d}
.msg-avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;
            border-radius:50%;background:#15803d;color:#fff;font-weight:800}
.msg-person-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.msg-person-txt strong{color:#14532d}
.msg-person-txt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-badge{margin-left:auto;background:#b42318;color:#fff;border-radius:999px;padding:1px 7px;font-size:.75rem;font-weight:700}

.msg-chat{border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;min-height:420px;background:#fff}
.msg-chat-head{padding:10px 14px;border-bottom:1px solid #eef2ec;display:flex;flex-direction:column}
.msg-chat-body{flex:1;overflow:auto;max-height:320px;padding:12px 14px;display:flex;flex-direction:column-reverse;gap:8px}
.msg-bubble{max-width:75%;padding:8px 12px;border-radius:12px;background:#f2f6f1;align-self:flex-start}
.msg-bubble.is-mine{background:#dcefd7;align-self:flex-end}
.msg-bubble-meta{font-size:.72rem;color:#5a6b58;margin-bottom:2px}
.msg-bubble-txt{font-size:.95rem;color:#23301f}
.msg-compose{display:flex;gap:8px;padding:10px;border-top:1px solid #eef2ec;align-items:flex-end}
.msg-compose textarea{flex:1;resize:vertical}

/* Pengumuman: stempel nama/tanggal/jam di kiri */
.ann-list{display:flex;flex-direction:column;gap:10px;max-height:360px;overflow:auto;margin-bottom:10px}
.ann-item{display:grid;grid-template-columns:130px 1fr;gap:12px;border:1px solid var(--line);border-radius:12px;
          padding:10px 12px;background:#fff}
.ann-stamp{display:flex;flex-direction:column;border-right:1px solid #eef2ec;padding-right:10px}
.ann-name{font-weight:800;color:#14532d;font-size:.85rem}
.ann-date{font-size:.8rem;color:#5a6b58}
.ann-time{font-family:ui-monospace,monospace;font-size:.8rem;color:#5a6b58}
.ann-body{position:relative;color:#23301f}
.ann-del{position:absolute;top:-4px;right:0}
.ann-compose{border:1px solid var(--line);border-radius:12px;background:#fbfdfb}

/* Feedback lintas modul */
.fb-list{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto}
.fb-item{display:grid;grid-template-columns:86px 1fr 20px;gap:10px;align-items:center;
         border:1px solid var(--line);border-radius:12px;padding:9px 12px;text-decoration:none;color:inherit;background:#fff}
.fb-item:hover{background:#f4f9f3;border-color:#c9ddc5}
.fb-stamp{display:flex;flex-direction:column;line-height:1.2}
.fb-date{font-size:.78rem;color:#5a6b58;font-weight:600}
.fb-time{font-family:ui-monospace,monospace;font-size:.78rem;color:#8a998a}
.fb-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.fb-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fb-body{color:#4a5a49;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-go{color:#97BC62;font-size:1.3rem;font-weight:800;text-align:center}
.chip-soft{background:#eef5ea;color:#3f6b3a}

/* Pemilih penerima blast */
.pick-list{max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.pick-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid #f0f4ee;cursor:pointer}
.pick-item:last-child{border-bottom:0}
.pick-item:hover{background:#f6faf5}

@media (max-width:900px){
  .msg-split{grid-template-columns:1fr}
  .msg-people{max-height:220px}
  .ann-item{grid-template-columns:1fr}
  .ann-stamp{flex-direction:row;gap:8px;border-right:0;border-bottom:1px solid #eef2ec;padding:0 0 6px}
  .fb-item{grid-template-columns:70px 1fr 16px}
}

/* Sorot komentar yang dituju dari Messages Centre (tautan #c<id>) */
.comment:target{background:#fff7dd;border-radius:10px;box-shadow:0 0 0 2px #E0A106;animation:fbflash 2.4s ease-out 1}
@keyframes fbflash{0%{background:#ffeaa0}100%{background:#fff7dd}}
.chat-new{margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fbfdfb}
.chat-new summary{cursor:pointer;font-weight:700;color:#14532d}

/* ---- Lampiran & compose (Messages Centre + chat publik) ---- */
.compose-main{flex:1;display:flex;flex-direction:column;gap:6px}
.compose-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.msg-atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.msg-att-img img{max-width:220px;max-height:180px;border-radius:10px;border:1px solid #dfe6da;display:block}
.msg-att-file{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #dfe6da;
              border-radius:999px;background:#fff;text-decoration:none;color:#14532d;font-size:.85rem}
.msg-att-file:hover{background:#f2f7f0}

/* Pengumuman: kotak tulis besar, font merah tua */
.ann-input{min-height:130px;font-size:1.05rem;line-height:1.5;color:#7f1d1d;font-weight:600}
.ann-input::placeholder{color:#b98a8a;font-weight:400}
.ann-body{font-size:1.02rem;color:#7f1d1d;font-weight:600}

/* Chatroom: 3 kolom */
.chat-grid{display:grid;grid-template-columns:1fr 1.35fr 0.85fr;gap:14px;align-items:start}
.chat-col{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;min-width:0}
.chat-col-title{margin:0 0 8px;font-size:.95rem;font-weight:800;color:#14532d}
.chat-mirror{border:1px solid var(--line);border-radius:10px;background:#fbfdfb;padding:10px;
             max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.chat-actions{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.chat-actions .btn{width:100%}
.pub-btn-soft{background:#eef5ea;color:#14532d;border:1px solid #cfe0c6}
@media (max-width:1100px){ .chat-grid{grid-template-columns:1fr} }

/* ---- Feedback dua kolom ---- */
.fb-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.fb-col{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;min-width:0}
.fb-col-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.fb-filter{margin:0}
.fb-filter .checkbox-row{margin:0;font-size:.86rem;color:#3f5340;font-weight:600}
.fb-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fbfdfb;margin-bottom:10px}
.fb-card.is-done{opacity:.7;background:#f6f8f5}
.fb-card-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.fb-quote{border-left:3px solid #cfe0c6;padding:2px 0 2px 8px;color:#5a6b58;font-size:.85rem;font-style:italic;margin-bottom:6px}
.fb-reply-body{color:#23301f;font-size:.95rem;margin-bottom:8px;white-space:pre-wrap}
.fb-reply-form textarea{width:100%;resize:vertical;margin-bottom:6px}
@media (max-width:1100px){ .fb-grid{grid-template-columns:1fr} }

/* ================= Messages Centre — tata letak tab ================= */
.mc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;padding:5px;
         background:#eef3ec;border:1px solid var(--line);border-radius:12px}
.mc-tab{flex:1 1 auto;min-width:130px;border:0;background:transparent;cursor:pointer;
        padding:9px 14px;border-radius:9px;font:inherit;font-weight:700;color:#3f5340;
        display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background .15s,color .15s}
.mc-tab:hover{background:#e2ebdf}
.mc-tab.is-on{background:#fff;color:#14532d;box-shadow:0 1px 3px rgba(31,69,35,.14)}
.mc-count{background:#15803d;color:#fff;border-radius:999px;padding:0 7px;font-size:.72rem;font-weight:800}
.mc-tab.is-on .mc-count{background:#15803d}

/* Cegah isi meluber keluar kartu/kolom */
.mc-pane{overflow:hidden}
.mc-pane .msg-split,
.mc-pane .chat-grid,
.mc-pane .fb-grid{min-width:0}
.mc-pane .msg-split > *,
.mc-pane .chat-grid > *,
.mc-pane .fb-grid > *{min-width:0;overflow-wrap:anywhere}
.mc-pane input,
.mc-pane select,
.mc-pane textarea{max-width:100%;box-sizing:border-box}
.mc-pane .fb-body,
.mc-pane .msg-person-txt span{overflow-wrap:anywhere}
.mc-pane .table-wrap{overflow-x:auto}
.msg-att-img img{max-width:min(220px,100%)}
#roomLink{width:100%;font-family:ui-monospace,monospace;font-size:.82rem}

/* Kolom chatroom & feedback lebih lega di layar sedang */
@media (max-width:1280px){
  .chat-grid{grid-template-columns:1fr 1.2fr;grid-template-areas:"a b" "c c"}
  .chat-grid > .chat-col:nth-child(1){grid-area:a}
  .chat-grid > .chat-col:nth-child(2){grid-area:b}
  .chat-grid > .chat-col:nth-child(3){grid-area:c}
  .chat-actions{flex-direction:row;flex-wrap:wrap}
  .chat-actions .btn,.chat-actions form{width:auto;flex:1 1 180px}
}
@media (max-width:900px){
  .mc-tab{min-width:0;flex:1 1 45%;font-size:.9rem;padding:8px 10px}
  .chat-grid{grid-template-columns:1fr;grid-template-areas:none}
  .chat-grid > .chat-col{grid-area:auto}
  .chat-actions{flex-direction:column}
  .chat-actions .btn,.chat-actions form{width:100%}
}

/* ---- Chatroom: daftar ruang (pembuat + waktu) & panel lipat ---- */
.room-list{border:1px solid var(--line);border-radius:12px;background:#fbfdfb;max-height:260px;overflow:auto}
.room-item{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-bottom:1px solid #eef2ec;
           text-decoration:none;color:inherit}
.room-item:last-child{border-bottom:0}
.room-item:hover{background:#f1f7f0}
.room-item.is-active{background:#e6f0e3;box-shadow:inset 3px 0 0 #15803d}
.room-title{font-weight:800;color:#14532d;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.room-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:.78rem;color:#5a6b58}
.room-actions{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #eef2ec}
.room-actions .btn{width:100%}
.chat-fold{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fbfdfb;margin-bottom:10px}
.chat-fold summary{cursor:pointer;font-weight:800;color:#14532d;display:flex;align-items:center;gap:6px}
.chat-fold[open]{background:#fff}
.chat-fold .pick-list{max-height:190px}

/* ---- Pratinjau lampiran hasil paste / seret-lepas ---- */
.paste-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.paste-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border:1px solid #dfe6da;
            border-radius:999px;background:#fff;font-size:.82rem;color:#14532d;max-width:100%}
.paste-chip img{width:34px;height:34px;object-fit:cover;border-radius:50%;display:block}
.paste-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.paste-x{border:0;background:#eef3ec;color:#5a6b58;border-radius:50%;width:20px;height:20px;cursor:pointer;
         font-size:.9rem;line-height:1;font-weight:800}
.paste-x:hover{background:#e0e8dd;color:#b42318}
form.is-drop{outline:2px dashed #15803d;outline-offset:3px;border-radius:12px;background:#f4faf3}
.paste-hint{color:#5a6b58;font-size:.78rem}

/* ---- WhatsApp QR: caption & tombol ganda ---- */
.wa-qr-cap{font-size:.75rem;font-weight:800;color:#14532d;margin:-4px 0 8px;text-align:center}
.wa-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.wa-btns .btn{flex:1 1 auto;min-width:110px}
@media print{ .no-print{display:none !important} }

/* Lencana pesan belum dibaca di navigasi */
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
           padding:0 5px;margin-left:6px;border-radius:999px;background:#b42318;color:#fff;
           font-size:.68rem;font-weight:800;line-height:1;vertical-align:middle}

/* ---- Indikator "baru" di Messages Centre ---- */
/* Lencana angka merah pada tab (superscript kecil) */
.mc-tab{position:relative}
.mc-new{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
        padding:0 5px;margin-left:5px;border-radius:999px;background:#e11d1d;color:#fff;
        font-size:.66rem;font-weight:800;line-height:1;vertical-align:super;
        box-shadow:0 0 0 2px #eef3ec}
.mc-tab.is-on .mc-new{display:none}
@keyframes mcPulse{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
.mc-new{animation:mcPulse 1.6s ease-in-out infinite}

/* Titik merah "superscript" mengambang dekat scrollbar kanan */
#mcScrollFlag{position:fixed;top:96px;right:14px;z-index:60;display:none;align-items:center;justify-content:center;
              width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid #f0c9c9;cursor:pointer;
              box-shadow:0 3px 10px rgba(180,35,24,.25)}
#mcScrollFlag:hover{background:#fff4f4}
.mc-scroll-dot{width:12px;height:12px;border-radius:50%;background:#e11d1d;
               box-shadow:0 0 0 4px rgba(225,29,29,.18);animation:mcPulse 1.4s ease-in-out infinite}
@media (max-width:900px){ #mcScrollFlag{top:auto;bottom:80px;right:12px} }

/* Baris template kop yang sedang diedit */
.data-table tr.row-active td{background:#eef5ec}

/* ---- Builder Segmen Surat ---- */
.seg-list{display:flex;flex-direction:column;gap:10px;margin:8px 0}
.seg-card{border:1px solid #d8e0d6;border-radius:8px;background:#fbfdfa;overflow:hidden}
.seg-card.drag{opacity:.5;outline:2px dashed #7aa07a}
.seg-head{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#eef4ec;border-bottom:1px solid #dbe4d8;font-size:.9rem}
.seg-drag{cursor:grab;color:#789078;font-weight:700;user-select:none}
.seg-body{padding:10px}
.seg-body textarea{width:100%;font-family:inherit}
.seg-opts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px;font-size:.85rem}
.seg-opts label{display:flex;flex-direction:column;gap:2px}
/* Berlaku untuk SEMUA label centang di penyusun segmen, bukan hanya yang
   berada di dalam .seg-opts — di luar itu teksnya turun ke bawah kotak. */
label.chk{display:inline-flex !important;flex-direction:row;align-items:center;
  gap:6px;white-space:nowrap;font-weight:400;margin:0}
label.chk input{width:auto;margin:0;flex:none}
.seg-opts label.chk{flex-direction:row;align-items:center;gap:5px}
.seg-add{margin:6px 0 2px;display:flex;gap:8px;flex-wrap:wrap}
.btn-xs{padding:2px 7px;font-size:.8rem;line-height:1.4}
@media (max-width:900px){ .seg-opts{gap:8px} .seg-opts label{width:100%} }

/* ---- Field Reply-To (lebih besar & jelas) ---- */
.reply-to-field{display:block;max-width:640px}
.reply-to-field .field-label{display:block;font-weight:600;font-size:1rem;margin-bottom:6px;color:#1f2d22}
.input-lg{width:100%;font-size:1.05rem;padding:12px 14px;border:1.5px solid #c4d0bf;border-radius:8px;line-height:1.4}
.input-lg:focus{border-color:#2f7a3f;outline:2px solid rgba(47,122,63,.15)}

/* ---- Manage Attendees: duplikat ---- */
.data-table tr.dup-extra td{background:#fdf1ea}
.data-table tr.dup-first td{background:#f4f8f2}
.btn-danger{background:#c0392b;color:#fff;border:1px solid #a93226}
.btn-danger:hover{background:#a93226}

/* ============================================================
   Polish: List views (Agenda / Task / Workflow) — v6.1
   ============================================================ */

/* Panel toolbar yang membungkus mode + filter dalam satu kartu bersih */
.list-toolbar{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:12px 14px;margin-bottom:16px;
}
.list-toolbar .dv-row{margin-bottom:0}
.list-toolbar + .filterbar{margin-top:10px}

/* Segmented control untuk mode (Due for me / I create / With assignee) */
.dv-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%}
.dv-seg{display:inline-flex;background:#eef3f1;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.dv-seg .moderadio{margin:0;padding:6px 14px;border-radius:999px;font-size:.86rem;font-weight:600;color:var(--muted);transition:all .12s}
.dv-seg .moderadio input{display:none}
.dv-seg .moderadio.active{background:var(--card);color:var(--teal-700);box-shadow:0 1px 3px rgba(10,46,47,.12)}
.dv-seg .moderadio:hover:not(.active){color:var(--ink)}
.dv-assignee{display:inline-flex;align-items:center;gap:6px}
.dv-assignee select{padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;background:#fff;max-width:220px}

/* Ringkasan selesai/belum sebagai badge progres */
.dv-count{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font-size:.88rem}
.dv-count .done-n{font-weight:800;color:var(--green);font-size:1.05rem}
.dv-count .open-n{font-weight:700;color:var(--amber)}
.dv-count .sep{color:var(--muted)}
.dv-progress{width:120px;height:8px;background:#eef0ec;border-radius:999px;overflow:hidden;flex-shrink:0}
.dv-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--teal-600),var(--green));border-radius:999px}

/* Tabel list lebih lapang & baris zebra halus */
.data-table.list-table th{background:#f4f8f6;color:#3a4b49;letter-spacing:.5px}
.data-table.list-table tbody tr:nth-child(even){background:#fbfdfc}
.data-table.list-table tbody tr:hover{background:#eef6f3}
.data-table.list-table td{padding:12px 12px}
.data-table.list-table .t-title{font-weight:600;color:var(--ink)}
.data-table.list-table .t-code{font-size:.76rem;color:var(--muted);font-family:var(--mono,ui-monospace,monospace)}

/* Chip prioritas kecil (Pn) senada badge */
.pill{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:700;padding:3px 8px;border-radius:999px}

@media (max-width:900px){
  .dv-count{margin-left:0;width:100%;justify-content:space-between;margin-top:6px}
  .dv-seg{width:100%;justify-content:space-between}
  .dv-seg .moderadio{flex:1;justify-content:center;text-align:center}
  .dv-assignee{width:100%}
  .dv-assignee select{flex:1;max-width:none}
}

/* ============================================================
   Page-head dengan bar tampilan (dv) sebaris judul — v6.2
   ============================================================ */
.page-head-dv{align-items:center;gap:18px}
.page-head-dv .ph-titlewrap{flex-shrink:0}
.page-head-dv .ph-dvform{flex:1;min-width:280px;margin:0}
.page-head-dv .ph-dvform .dv-row{margin:0}
.dash-welcome{margin:-6px 0 14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dash-settings-inline{display:inline-block}
.dash-settings-inline summary{cursor:pointer;color:var(--teal-700);font-weight:600;font-size:.85rem;list-style:none}
.dash-settings-inline summary::-webkit-details-marker{display:none}
.dash-settings-inline[open]{display:block;width:100%;margin-top:6px}
.dash-settings-inline .filterbar{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;box-shadow:var(--shadow)}

@media (max-width:900px){
  .page-head-dv{flex-direction:column;align-items:stretch;gap:10px}
  .page-head-dv .ph-dvform{min-width:0;width:100%}
}

/* Agenda: baris kategori (kiri) + scope (kanan) */
.ag-filterrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 12px;box-shadow:var(--shadow);margin-bottom:12px}
.ag-filterrow .filterbar{margin:0;flex-wrap:wrap}
/* Sebelumnya flex:1 membuat form kategori meregang memenuhi baris, sehingga
   isinya terdorong berjauhan dan meninggalkan celah lebar di tengah. */
.ag-catform{flex:0 1 auto;min-width:0}
.ag-scopeform{flex:0 1 auto}
@media (max-width:900px){
  .ag-filterrow{flex-direction:column;align-items:stretch}
  .ag-catform,.ag-scopeform{min-width:0;width:100%}
}

/* Dashboard: metrik performa besar per kartu (Task / Workflow) */
.perf-big{padding:6px 2px 4px}
.perf-big-num{font-size:2.6rem;font-weight:800;line-height:1}
.perf-big-num span{font-size:1.3rem;font-weight:700}
.perf-big-sub{font-size:.9rem;margin-top:4px;color:var(--ink)}
.perf-big-bar{height:9px;border-radius:999px;background:#eef0ec;overflow:hidden;margin-top:10px}
.perf-big-bar i{display:block;height:100%;border-radius:999px}

/* ============================================================
   Timesheet Management
   ============================================================ */
/* Grafik plan vs actual */
.ts-legend{font-size:.85rem;color:var(--muted);margin-bottom:10px}
.ts-key{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle;margin-right:2px}
.ts-key.ts-plan{background:#9db8e0}
.ts-key.ts-actual{background:#2f7a3f}
.ts-chart{display:flex;flex-direction:column;gap:12px}
.ts-chart-row{display:flex;gap:12px;align-items:center}
.ts-chart-label{width:220px;flex-shrink:0;display:flex;flex-direction:column;line-height:1.2}
.ts-chart-label strong{font-size:.82rem;color:var(--teal-700)}
.ts-chart-label span{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-chart-bars{flex:1;display:flex;flex-direction:column;gap:3px}
.ts-bar-wrap{display:flex;align-items:center;gap:6px}
.ts-bar{height:14px;border-radius:4px;min-width:2px;transition:width .3s}
.ts-bar.ts-plan{background:#9db8e0}
.ts-bar.ts-actual{background:#2f7a3f}
.ts-bar-val{font-size:.76rem;color:var(--muted);white-space:nowrap}

/* Grid entri interaktif */
.ts-grid-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.ts-grid{border-collapse:collapse;width:100%;min-width:640px;font-size:.85rem}
.ts-grid th,.ts-grid td{border:1px solid #e6ece4;padding:4px 6px;text-align:center}
.ts-grid thead th{background:#f4f8f6;position:sticky;top:0;font-size:.78rem;color:#3a4b49}
.ts-col-code{width:70px;font-family:var(--mono,monospace);font-size:.78rem;text-align:left;white-space:nowrap}
.ts-col-desc{width:180px;text-align:left;color:var(--ink)}
.ts-col-day{min-width:56px}
.ts-col-total{width:64px;font-weight:700;background:#f8faf8}
.ts-dow{display:block;font-weight:700}
.ts-dnum{display:block;font-size:.72rem;color:var(--muted)}
.ts-grid th.ts-weekend,.ts-grid td.ts-weekend{background:#fdf6ec}
.ts-row-leave td{background:#fbeeee}
.ts-row-weekend td.ts-col-code,.ts-row-weekend td.ts-col-desc{background:#fdf6ec}
.ts-input{width:52px;padding:5px 4px;border:1px solid #dfe6e4;border-radius:6px;text-align:center !important;font:inherit;-moz-appearance:textfield}
.ts-input::-webkit-outer-spin-button,.ts-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ts-col-notes{width:200px;text-align:left}
.ts-note-input{width:100%;padding:5px 7px;border:1px solid #e2e8e0;border-radius:6px;font:inherit;font-size:.82rem;color:var(--ink)}
.ts-note-input:focus{border-color:var(--teal-600);outline:2px solid rgba(47,122,63,.1)}
.ts-input:focus{border-color:var(--teal-600);outline:2px solid rgba(47,122,63,.12)}
.ts-cell{padding:3px}
.ts-grid tfoot td{background:#f4f8f6;font-weight:700}
.ts-coltotal.ts-over,.ts-rowtotal.ts-over{color:#c0392b}

/* Dashboard timesheet metric */
.ts-metric-row{display:flex;gap:16px;flex-wrap:wrap}
.ts-metric{flex:1;min-width:120px;text-align:center;padding:10px;border:1px solid #e3e9df;border-radius:10px}
.ts-metric .n{font-size:1.6rem;font-weight:800}
.ts-metric .l{font-size:.78rem;color:var(--muted)}

@media (max-width:900px){
  .ts-chart-label{width:130px}
  .ts-col-desc{width:120px}
}

/* Timesheet: panel saran kode */
.ts-suggest{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ts-suggest .btn-xs .muted{font-weight:400;font-size:.78rem}

/* ============================================================
   Meeting edit form — tampilan rapi berbasis section
   ============================================================ */
.mtg-form{max-width:820px}
.mtg-form .mtg-sec{border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;margin:0 0 18px;background:var(--card);box-shadow:var(--shadow)}
.mtg-form .mtg-sec legend{font-weight:700;font-size:.95rem;color:var(--teal-700);padding:0 8px;letter-spacing:.2px}
.mtg-form label{display:block;margin-bottom:12px;font-weight:600;font-size:.88rem;color:var(--ink)}
.mtg-form label input:not([type=checkbox]),
.mtg-form label select,
.mtg-form label textarea{display:block;width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-weight:400;background:#fff}
.mtg-form label textarea{resize:vertical}
.mtg-form label input:focus,.mtg-form label select:focus,.mtg-form label textarea:focus{border-color:var(--teal-600);outline:2px solid rgba(47,122,63,.1)}
.mtg-form .form-row{display:flex;gap:14px;flex-wrap:wrap}
.mtg-form .form-row > label{flex:1;min-width:200px}
.mtg-form .muted.small{font-weight:400;display:block;margin:-6px 0 12px}
.mtg-form .has-error input,.mtg-form .has-error select{border-color:#c0392b}
.mtg-form .err{color:#c0392b;font-weight:600;font-size:.8rem}

/* Video conference toggle — highlight (spesificity dinaikkan agar flex menang) */
.mtg-form label.mtg-vc{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#eef6f1;border:1px solid #cfe6d8;border-radius:var(--radius-sm);font-weight:600;margin-bottom:6px !important;cursor:pointer}
.mtg-form label.mtg-vc input[type=checkbox]{width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:var(--teal-600)}

@media (max-width:640px){
  .mtg-form .form-row{flex-direction:column;gap:0}
  .mtg-form .form-row > label{min-width:0}
}

/* ---- Penanda pesan belum dibaca (Messages Centre) ---- */
.msg-person{position:relative}
.msg-person.has-unread{background:#f2f8f2}
.msg-person.has-unread .msg-person-txt strong{font-weight:800;color:var(--ink)}
.msg-person .msg-avatar{position:relative}
.msg-dot{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;
         background:#b42318;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.nav-badge[hidden]{display:none}

/* ---- Work Link: tiap baris cukup satu baris (tidak menumpuk) ---- */
.wl-table{table-layout:auto;width:100%}
.wl-table th,
.wl-table td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.wl-table td .chip{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
                   display:inline-block;vertical-align:middle}
.wl-table td.wl-desc{max-width:380px}
.wl-table td.wl-desc a{display:inline-block;max-width:100%;overflow:hidden;
                       text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.wl-table td:nth-child(2){max-width:140px}   /* Subfolder */
.wl-table td:nth-child(4){max-width:170px}   /* Link (nama host) */
.wl-table td:nth-child(5){max-width:150px}   /* Dibuat oleh */
/* Kolom Aksi ditempel di tepi kanan agar tombol Ubah/Hapus selalu terjangkau
   walau tabel lebih lebar daripada layar (9 kolom, tiap baris satu baris). */
.wl-table td.actions,
.wl-table th:last-child{position:sticky;right:0;z-index:2;white-space:nowrap;
  background:#fff;box-shadow:-6px 0 6px -6px rgba(0,0,0,.18)}
.wl-table th:last-child{background:#f7faf7}
.wl-table tbody tr:hover td.actions{background:#f7faf7}
.wl-table td.actions .btn{padding:2px 7px;margin:0 1px}
.wl-table td.actions form{display:inline}
@media (max-width: 820px){
  .wl-table td.wl-desc{max-width:200px}
  .wl-table td:nth-child(5){display:none}    /* sembunyikan "Dibuat oleh" di layar sempit */
  .wl-table th:nth-child(5){display:none}
}

/* ---- Work Link: kolom kredensial ---- */
.wl-table td.wl-user,
.wl-table td.wl-pass{max-width:170px}
.wl-table td.wl-user .wl-utxt,
.wl-table td.wl-pass .wl-dots{display:inline-block;max-width:118px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.wl-table td.wl-pass .wl-dots{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.5px}
.wl-mini{border:0;background:none;cursor:pointer;padding:0 3px;font-size:.85rem;opacity:.55;line-height:1;vertical-align:middle}
.wl-mini:hover{opacity:1}
.wl-mini:disabled{opacity:.3;cursor:progress}

/* ---- Penanda pengguna sedang tidak aktif ---- */
.away-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:#fdf3e0;color:#8a5b0a;font-size:.72rem;font-weight:700;vertical-align:middle;white-space:nowrap}
.away-note{border-left:4px solid #E0A106;background:#fffaf0;padding:10px 12px;border-radius:8px;margin:10px 0}

/* ---- Pemilih bahasa di bilah atas ---- */
.lang-switch{display:inline-flex;align-items:center;gap:2px;border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:2px;margin-right:4px}
.lang-opt{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:700;
  letter-spacing:.04em;color:#dfeade;text-decoration:none;line-height:1.5}
.lang-opt:hover{background:rgba(255,255,255,.14)}
.lang-opt.is-on{background:#E0A106;color:#26210b}
@media (max-width:720px){ .lang-switch{display:none} }

/* ---- Workflow: blok "Tindakan yang Diminta" ---- */
.req-action{border-left:5px solid #E0A106;background:#fffaf0;border-radius:8px;
  padding:10px 14px;margin:0 0 12px}
.req-action-title{margin:0 0 6px;font-size:.82rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#8a5b0a}
.req-action-text{margin:0;font-size:.98rem;line-height:1.55;color:#1b2733;
  white-space:normal;overflow-wrap:anywhere}
.req-action-meta{margin:6px 0 0;font-size:.8rem;color:#6b7a70}

/* ---- Workflow: tabel Historical Flow ----
   Kolom Catatan sengaja dibuat paling lebar dan teksnya TIDAK dipotong;
   kolom lain diciutkan agar ruangnya cukup. */
.wf-flow{table-layout:fixed;width:100%}
.wf-flow th,.wf-flow td{vertical-align:top}
.wf-flow .c-seq{width:38px;text-align:center}
.wf-flow .c-loc{width:15%}
.wf-flow .c-dt{width:11%}
.wf-flow .c-min{width:62px;text-align:right}
.wf-flow .c-actor{width:11%}
.wf-flow .c-note{width:auto;min-width:34%}
.wf-flow .c-loc,.wf-flow .c-actor,.wf-flow .c-dt{overflow-wrap:anywhere}
.wf-flow .c-note{white-space:normal;overflow-wrap:anywhere;color:#1b2733}
@media (max-width:860px){
  .wf-flow .c-dt,.wf-flow th.c-dt{display:none}
  .wf-flow .c-note{min-width:44%}
}

/* ---- Panel bagikan kontak (QR + lembar berbagi) ---- */
.cshare-overlay{position:fixed;inset:0;z-index:10000;background:rgba(12,28,18,.55);
  display:flex;align-items:center;justify-content:center;padding:18px}
.cshare-box{position:relative;background:#fff;border-radius:14px;padding:20px 22px;
  max-width:360px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.28);text-align:center}
.cshare-x{position:absolute;top:8px;right:12px;border:0;background:none;font-size:1.5rem;
  line-height:1;cursor:pointer;color:#6b7a70}
.cshare-x:hover{color:#1b2733}
.cshare-title{margin:0 0 2px;font-size:1.05rem;color:#2f7a3f}
.cshare-name{margin:0 0 12px;font-weight:700;font-size:1rem;color:#1b2733;overflow-wrap:anywhere}
.cshare-qr{display:flex;justify-content:center;min-height:60px}
.cshare-qr svg{width:210px;height:210px}
.cshare-hint{margin:10px 0 0;font-size:.8rem;color:#6b7a70;line-height:1.5}
.cshare-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.cshare-actions .btn{width:100%;white-space:normal;line-height:1.35}

/* ---- Checklist Management ---- */
.cl-inline{display:inline}
.checklist-card .cl-inst{border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;margin-bottom:12px;background:#fcfdfd}
.checklist-card .cl-inst:last-of-type{margin-bottom:0}
.cl-inst-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.cl-items{list-style:none;margin:8px 0 0;padding:0}
.cl-item{padding:8px 0;border-bottom:1px dashed var(--line)}
.cl-item:last-child{border-bottom:0}
.cl-item.is-done .cl-title{text-decoration:line-through;color:#6b7a70}
.cl-toggle{margin:0}
.cl-check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-weight:500;margin:0}
.cl-check input{width:auto;margin:2px 0 0;flex:none;transform:scale(1.15);cursor:pointer}
.cl-check input:disabled{cursor:default}
.cl-title{overflow-wrap:anywhere}
.cl-desc{margin:2px 0 0 26px}
.cl-stamp{margin:3px 0 0 26px;color:#2f7a3f}
.cl-stamp.muted{color:var(--muted)}
.cl-note{margin:3px 0 0 26px;color:#5a6b60}
.cl-noteform{display:flex;gap:6px;margin:5px 0 0 26px}
.cl-noteform input{flex:1;padding:4px 8px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;font-size:.82rem;background:#fff}
.cl-additem{display:flex;gap:6px;margin-top:10px}
.cl-additem input{flex:1;padding:6px 9px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;font-size:.85rem;background:#fff}
.cl-copyform{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.cl-copyform select{padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;background:#fff;min-width:230px}
.cl-copylabel{font-weight:600;font-size:.86rem;color:#243534}
.cl-preview{margin:0;padding-left:22px}
.cl-preview li{margin-bottom:9px}
@media (max-width:640px){
  .cl-copyform{flex-direction:column;align-items:stretch}
  .cl-copyform select{min-width:0;width:100%}
  .cl-desc,.cl-stamp,.cl-note,.cl-noteform{margin-left:0}
}

/* ---- Project Management ---- */
.pr-inline{display:inline}
.pr-inline select{padding:4px 8px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;font-size:.82rem;background:#fff}
.pr-summary{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;justify-content:space-between}
.pr-summary > div:first-child{flex:1;min-width:240px}
.pr-range{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pr-group-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.pr-group-actions{margin-left:auto;display:flex;gap:6px;align-items:center}
.data-table tr.is-late td{background:#fff8f6}
.overdue{color:#c0341d}
.chip-warn{background:#fff3e0;color:#b34700;border:1px solid #ffb74d}

/* PIC internal / external */
.pic-box{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:14px}
.pic-box legend{font-size:.82rem;font-weight:700;color:#243534;padding:0 6px}
.pic-switch{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.pic-box .pic-internal,.pic-box .pic-external{display:none}
.pic-box.is-internal .pic-internal{display:block}
.pic-box.is-external .pic-external{display:block}

/* ---- Workflow terkait (task & project) ---- */
.wfl-inline{display:inline}
.wfl-item{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;
  margin-bottom:10px;background:#fcfdfd}
.wfl-item:last-of-type{margin-bottom:0}
.wfl-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wfl-pos{margin-top:4px;line-height:1.6}
.wfl-note{margin-top:4px;color:#5a6b60}
.wfl-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.wfl-addform{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.wfl-addform select{padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;background:#fff;min-width:260px}
.wfl-addform input[type=text]{flex:1;min-width:160px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;background:#fff}

/* ---- SOP: transaksi manual / system ---- */
.trx-box{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:14px}
.trx-box legend{font-size:.82rem;font-weight:700;color:#243534;padding:0 6px}
.trx-box .trx-system{display:none}
.trx-box.is-system .trx-system{display:block}
.sop-link{margin:4px 0 6px;padding:6px 10px;background:#f2f7f5;border-radius:var(--radius-sm);
  border-left:3px solid var(--teal-600)}
.sop-link a{overflow-wrap:anywhere}

@media (max-width:640px){
  .pr-summary{flex-direction:column}
  .pr-group-actions{margin-left:0}
  .wfl-addform{flex-direction:column;align-items:stretch}
  .wfl-addform select,.wfl-addform input[type=text]{min-width:0;width:100%}
}

/* ---- Kartu dashboard: Project Berjalan ---- */
.dash-prj-bar{display:inline-block;vertical-align:middle;width:110px;height:6px;
  background:var(--line);border-radius:999px;overflow:hidden;margin:0 8px 0 0}
.dash-prj-bar > span{display:block;height:100%;
  background:linear-gradient(90deg,var(--teal-600),var(--green))}
@media (max-width:640px){ .dash-prj-bar{width:78px} }

/* ---- Project: form ubah melebar penuh (bukan terjepit di kolom aksi) ---- */
.data-table tr.row-edit > td{background:#f7fbfa;padding:16px 18px;border-left:3px solid var(--teal-600)}
.pr-editform{max-width:820px}
.pr-editform-title{margin:0 0 12px;font-size:1rem;color:var(--teal-800)}
.pr-editform .form-row-3{grid-template-columns:1fr 1fr 120px}
.pr-editform label{margin-bottom:12px}
.pr-editform .pic-box{background:#fff}
.pr-task-table td{vertical-align:top}
.pr-task-table .actions{white-space:nowrap}
@media (max-width:860px){
  .pr-editform .form-row-3{grid-template-columns:1fr}
  .data-table tr.row-edit > td{padding:12px}
}

/* ---- Knowledge Management ---- */
.km-list{margin:0;padding-left:22px}
.km-list li{margin-bottom:10px;line-height:1.6}
.km-do{border-top:3px solid #2f7a3f}
.km-dont{border-top:3px solid #c0341d}
.km-do .card-title{color:#2f7a3f}
.km-dont .card-title{color:#c0341d}
.km-addform{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.km-addform label{margin-bottom:8px}

/* ---- Sub-navigasi modul Knowledge ---- */
.km-subnav{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 16px;
  border-bottom:2px solid var(--line);padding-bottom:0}
.km-subnav-item{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;
  font-size:.9rem;font-weight:600;color:#5a6b60;text-decoration:none;
  border-bottom:3px solid transparent;margin-bottom:-2px;border-radius:6px 6px 0 0}
.km-subnav-item:hover{background:#f2f7f5;color:var(--teal-700);text-decoration:none}
.km-subnav-item.is-on{color:var(--teal-800);border-bottom-color:var(--teal-600);background:#f2f7f5}
.km-item-actions{margin-top:5px;display:flex;gap:4px;align-items:center}
.km-edit-inline{background:#f7fbfa;border-left:3px solid var(--teal-600);
  border-radius:var(--radius-sm);padding:12px 14px;margin:4px 0}
.km-addbox{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.km-addbox .pr-editform-title,.km-edit-inline .pr-editform-title{margin:0 0 10px}
@media (max-width:640px){
  .km-subnav{gap:0}
  .km-subnav-item{padding:8px 11px;font-size:.84rem}
}

/* ---- Personal Working Commitment ---- */
.pwc-summary{display:flex;gap:10px;flex-wrap:wrap}
.pwc-cell{flex:1;min-width:110px;background:#f7fbfa;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px 12px;text-align:center}
.pwc-cell-lbl{font-size:.76rem;font-weight:600;color:#5a6b60;text-transform:uppercase;letter-spacing:.03em}
.pwc-cell-val{font-size:1.7rem;font-weight:700;color:var(--teal-800);line-height:1.2;margin-top:2px}
.pwc-cell-val.is-empty{color:#b8c4bd;font-size:1.3rem}
.pwc-summary-sm .pwc-cell{padding:7px 9px;min-width:88px}
.pwc-summary-sm .pwc-cell-val{font-size:1.25rem}
.pwc-bar{height:5px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:6px}
.pwc-bar span{display:block;height:100%;background:var(--teal-600)}
.pwc-bar span.chip-ok{background:#43a047}
.pwc-bar span.chip-warn{background:#f0a020}
.pwc-bar span.chip-danger{background:#c0341d}
.pwc-metric{background:#f2f7f5;border-left:3px solid var(--teal-600);
  padding:8px 12px;border-radius:var(--radius-sm);margin:10px 0}
.pwc-detail{margin-top:10px}
.pwc-detail summary{cursor:pointer;color:var(--teal-700);font-size:.87rem;font-weight:600}
.pwc-assess-item{border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 13px;margin-bottom:10px;background:#fcfdfd}
.pwc-assess-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:4px}
.pwc-assess-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:8px}
.pwc-assess-form label{margin:0;font-size:.82rem;font-weight:600}
.pwc-assess-form input{padding:7px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;background:#fff}
.pwc-score-in input{width:100px}
.pwc-comment-in{flex:1;min-width:200px}
.pwc-comment-in input{width:100%}
@media (max-width:640px){
  .pwc-cell{min-width:calc(50% - 6px)}
  .pwc-assess-form{flex-direction:column;align-items:stretch}
  .pwc-score-in input{width:100%}
}

/* ---- Document Management ---- */
.dms-crumb{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 14px;
  padding:8px 12px;background:#f2f7f5;border-radius:var(--radius-sm);font-size:.87rem}
.dms-crumb a{color:var(--teal-700);text-decoration:none;font-weight:600}
.dms-crumb a:hover{text-decoration:underline}
.dms-crumb-sep{color:#9aab9f}
.dms-folders{display:flex;gap:10px;flex-wrap:wrap}
.dms-folder{display:flex;flex-direction:column;gap:2px;min-width:150px;flex:0 1 190px;
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#fcfdfd;text-decoration:none;color:inherit}
.dms-folder:hover{background:#f2f7f5;border-color:var(--teal-600);text-decoration:none}
.dms-folder-ico{font-size:1.3rem;line-height:1}
.dms-folder-name{font-weight:600;color:var(--teal-800);overflow-wrap:anywhere}
.dms-tree-row{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid var(--line)}
.dms-tree-row:last-child{border-bottom:0}
.dms-tree-name{flex:1;overflow-wrap:anywhere}
.dms-tree-act{display:flex;gap:4px;align-items:center}
.dms-fb{border-left:3px solid var(--line);padding:9px 0 9px 13px;margin-bottom:10px}
.dms-fb.is-resolved{border-left-color:#43a047;opacity:.75}
.dms-fb-head{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.dms-fb-body{margin:4px 0;line-height:1.6;overflow-wrap:anywhere}
.dms-fb-actions{display:flex;gap:10px;align-items:center;font-size:.83rem}
.dms-fb-actions a{color:var(--teal-700);text-decoration:none}
.dms-fb-reply{margin-top:8px}
.dms-fb-reply textarea,.dms-fb-new textarea{width:100%;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;background:#fff;resize:vertical;margin-bottom:6px}
.dms-fb-children{margin-top:10px;padding-left:14px;border-left:2px dashed var(--line)}
.dms-fb-new{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
@media (max-width:640px){ .dms-folder{flex:1 1 100%} }

/* ---- Notulen meeting ---- */
.mtg-lbl{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:#5a6b60;margin:12px 0 4px}
.mtg-decision{background:#f2f7f5;border-left:3px solid var(--teal-600);
  padding:9px 12px;border-radius:var(--radius-sm);line-height:1.6}
.mtg-addact{margin-top:10px}
.mtg-addact summary{cursor:pointer;color:var(--teal-700);font-weight:600}

/* ---- Checklist: keadaan kosong yang lebih jelas ---- */
.cl-empty-cta{margin-top:14px}
.cl-empty-cta .btn{margin-right:6px}

/* ---- Pemilih Kontak / Business Partner ---- */
/* Spesifisitas sengaja dinaikkan (.ctp .ctp-row) agar mengalahkan
   `.form label{display:block}` dan `.form input{width:100%}` di atas. */
.ctp{--ctp-grid:22px minmax(150px,1.6fr) minmax(120px,1.4fr) 46px 46px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden}
.ctp-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  padding:8px 10px;background:#f2f7f5;border-bottom:1px solid var(--line)}
.ctp .ctp-search{flex:1;min-width:170px;width:auto;display:block;margin:0;
  padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;font-size:.85rem;background:#fff}
/* Keterangan Y/N dibuat kecil dan tidak memaksa bilah melebar; di layar
   sempit ia turun ke baris sendiri, bukan mendorong kotak cari. */
.ctp-legend{white-space:nowrap;font-size:.76rem;color:#6b7c71}
.ctp-count{margin-left:auto;font-weight:600;color:var(--teal-700);white-space:nowrap}

.ctp-head,.ctp .ctp-row{display:grid;grid-template-columns:var(--ctp-grid);
  gap:10px;align-items:center}
.ctp-head{padding:6px 10px;background:#fbfdfc;border-bottom:1px solid var(--line);
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#5a6b60}
.ctp-head span:nth-child(4),.ctp-head span:nth-child(5){text-align:center}

/* Tinggi dipatok pada KELIPATAN tinggi baris agar tidak ada baris terpotong
   separuh di tepi bawah — itulah yang membuat teks petunjuk di bawahnya
   terlihat seperti menimpa daftar. */
.ctp-list{max-height:calc(var(--ctp-rows,8) * 31px);overflow-y:auto;
  border-bottom:1px solid var(--line)}
.ctp .ctp-row{padding:5px 10px;margin:0;cursor:pointer;border-bottom:1px solid #f0f4f2;
  min-height:31px;box-sizing:border-box;
  font:inherit;font-size:.86rem;font-weight:400;line-height:1.5;color:var(--ink)}
.ctp .ctp-row:last-of-type{border-bottom:0}
.ctp .ctp-row:hover{background:#f7fbfa}
.ctp .ctp-row:has(input:checked){background:#eef6f1}
.ctp .ctp-row input[type=checkbox]{display:inline-block;width:auto;margin:0;padding:0;
  justify-self:center;cursor:pointer}
.ctp .ctp-c{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ctp .ctp-name{font-weight:600}
.ctp .ctp-dim{color:#5a6b60}
.ctp .ctp-yn{justify-self:center;width:22px;height:20px;line-height:20px;text-align:center;
  border-radius:4px;font-size:.72rem;font-weight:700}
.ctp .ctp-yn.is-y{background:#e3f2e6;color:#2f7a3f}
.ctp .ctp-yn.is-n{background:#f0f2f1;color:#9aab9f}
.ctp-empty{padding:12px 10px;margin:0}
/* Petunjuk dijadikan bagian kaki tersendiri: latar berbeda, padding cukup,
   dan terpisah jelas dari daftar di atasnya. */
.ctp-hint{margin:0;padding:8px 11px;background:#f7fbfa;line-height:1.55}

@media (max-width:640px){
  .ctp{--ctp-grid:22px minmax(0,1fr) 46px 46px}
  .ctp-head span:nth-child(3){display:none}
  .ctp .ctp-row .ctp-dim{display:none}
  .ctp-legend{width:100%;order:9}
  .ctp-count{margin-left:0}
  .ctp-hint,.plist-hint{font-size:.8rem;padding:8px 10px}
}

/* ---- Baris laporan yang dapat diklik ---- */
tr.row-click td:first-child{position:relative}
.rep-doclink{color:var(--teal-700);font-weight:600;text-decoration:none;
  border-bottom:1px dotted var(--teal-600)}
.rep-doclink:hover{color:var(--teal-800);border-bottom-style:solid}
tr.row-click:hover td:last-child::after{content:'↗';margin-left:6px;color:var(--teal-600);font-weight:700}

/* ---- Pemilih peserta internal (checkbox) — seragam dengan pemilih Kontak ---- */
.plist{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden}
.plist-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  padding:8px 10px;background:#f2f7f5;border-bottom:1px solid var(--line)}
.plist .plist-search{flex:1;min-width:150px;width:auto;display:block;margin:0;
  padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;font-size:.85rem;background:#fff}
.plist-count{margin-left:auto;font-weight:600;color:var(--teal-700);white-space:nowrap}
.plist-list{max-height:calc(var(--pl-rows,7) * 33px);overflow-y:auto;
  border-bottom:1px solid var(--line)}
.plist-group{padding:6px 10px;background:#fbfdfc;border-bottom:1px solid var(--line);
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#5a6b60}
.plist .plist-row{display:flex;gap:9px;align-items:center;padding:6px 10px;margin:0;
  min-height:33px;box-sizing:border-box;
  cursor:pointer;border-bottom:1px solid #f0f4f2;font:inherit;font-size:.88rem;
  font-weight:400;line-height:1.5;color:var(--ink)}
.plist .plist-row:last-of-type{border-bottom:0}
.plist .plist-row:hover{background:#f7fbfa}
.plist .plist-row:has(input:checked){background:#eef6f1}
.plist .plist-row input[type=checkbox]{display:inline-block;width:auto;margin:0;padding:0;flex:none;cursor:pointer}
.plist-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plist-sub{color:#5a6b60;font-size:.82em;margin-left:5px}
.plist-empty{padding:12px 10px;margin:0}
.plist-hint{margin:0;padding:8px 11px;background:#f7fbfa;line-height:1.55}

/* ---- AI: perekam, transkrip, surat masuk ---- */
.rec-status{font-weight:700;color:var(--teal-800);text-align:center;margin:6px 0}
.rec-timer{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:2.4rem;
  font-weight:700;text-align:center;color:var(--teal-700);letter-spacing:.04em}
.rec-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.ai-transcript{max-height:420px;overflow-y:auto;margin-top:8px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fcfdfd}
.ai-seg{display:grid;grid-template-columns:64px minmax(90px,140px) 1fr;gap:10px;
  padding:6px 10px;border-bottom:1px solid #f0f4f2;font-size:.86rem;line-height:1.6}
.ai-seg:last-child{border-bottom:0}
.ai-seg-t{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;color:#9aab9f}
.ai-seg-s{font-weight:600;color:var(--teal-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-seg-x{overflow-wrap:anywhere}
.ai-ocr{max-height:340px;overflow:auto;background:#f7fbfa;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px 12px;font-size:.8rem;line-height:1.6;white-space:pre-wrap}
@media (max-width:640px){
  .ai-seg{grid-template-columns:1fr;gap:2px}
  .ai-seg-t{font-size:.72rem}
  .rec-timer{font-size:1.9rem}
}

/* ---- Notulen langsung (halaman perekam) ---- */
.live-tabs{display:flex;gap:4px;margin:0 0 14px;border-bottom:2px solid var(--line)}
.live-tab{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;
  padding:9px 14px;font:inherit;font-size:.9rem;font-weight:600;color:#5a6b60;cursor:pointer}
.live-tab:hover{color:var(--teal-700)}
.live-tab.is-on{color:var(--teal-800);border-bottom-color:var(--teal-600)}
.live-feed{max-height:300px;overflow-y:auto;margin-top:12px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fcfdfd}
.live-line{display:grid;grid-template-columns:62px minmax(80px,130px) 1fr;gap:9px;
  padding:6px 10px;border-bottom:1px solid #f0f4f2;font-size:.86rem;line-height:1.6}
.live-line:last-child{border-bottom:0}
.live-t{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.76rem;color:#9aab9f}
.live-s{font-weight:600;color:var(--teal-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-x{overflow-wrap:anywhere}
.live-interim{min-height:22px;margin-top:6px;padding:0 10px;
  font-size:.86rem;color:#8a9a90;font-style:italic}
@media (max-width:640px){ .live-line{grid-template-columns:1fr;gap:1px} }

/* ---- Scan surat: tombol besar ramah sentuh ---- */
.btn-block{display:block;width:100%;text-align:center;margin-bottom:8px}
.scan-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 10px}
.scan-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-height:140px;padding:18px 14px;margin:0;cursor:pointer;text-align:center;
  border:2px dashed var(--line);border-radius:var(--radius);background:#fcfdfd;
  transition:border-color .15s,background .15s}
.scan-btn:hover,.scan-btn:focus-within{border-color:var(--teal-600);background:#f2f7f5}
.scan-btn-cam{border-style:solid;border-color:var(--teal-600);background:#f2f7f5}
.scan-ico{font-size:2.4rem;line-height:1}
.scan-lbl{font-weight:700;font-size:1rem;color:var(--teal-800)}
.scan-sub{font-size:.8rem;color:#5a6b60}
.scan-preview{border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;background:#fcfdfd}
.scan-preview img{display:block;width:100%;max-height:420px;object-fit:contain;
  border-radius:var(--radius-sm);background:#eef2ef}
.scan-prev-info{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin:10px 0}
.scan-prev-act{display:flex;flex-direction:column;gap:0}
.scan-tips{margin-top:12px}
.scan-tips summary{cursor:pointer;font-weight:600;color:var(--teal-700);font-size:.9rem}
.scan-tips ul{margin-top:8px}

@media (max-width:640px){
  /* Di ponsel tombol kamera ditumpuk dan dibuat lebih tinggi agar mudah ditekan */
  .scan-pick{grid-template-columns:1fr;gap:10px}
  .scan-btn{min-height:120px}
  .scan-ico{font-size:2.8rem}
  .scan-result{grid-template-columns:1fr}
  .scan-preview img{max-height:300px}
  /* Aksi di kartu hasil jadi selebar layar, tidak berdesakan */
  .card .actions .btn,.card .actions form{width:auto}
}

/* ---- Event Management ---- */
.ev-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.ev-link-item{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#fcfdfd;font-size:.88rem;line-height:1.6}
.ev-link-item strong{display:block;margin-bottom:2px;color:var(--teal-800)}
.pub-rundown{display:grid;grid-template-columns:56px 1fr;gap:10px;padding:5px 0;
  border-bottom:1px solid #f0f4f2;font-size:.88rem;line-height:1.55}
.pub-rundown:last-child{border-bottom:0}
@media (max-width:640px){
  .ev-links{grid-template-columns:1fr}
  .pub-rundown{grid-template-columns:48px 1fr;gap:8px;font-size:.84rem}
}

/* ---- QR pendaftaran event ---- */
.ev-qr{display:grid;grid-template-columns:112px 1fr;gap:12px;align-items:start;margin-top:10px}
.ev-qr-box{width:112px;height:112px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
.ev-qr-box img{width:100%;height:100%;image-rendering:pixelated}
.ev-qr-side{display:flex;flex-direction:column;gap:6px;min-width:0}
.ev-qr-url{width:100%;padding:5px 8px;font-size:.74rem;border:1px solid var(--line);
  border-radius:6px;background:#f7fbfa}
.ev-qr-btns{display:flex;gap:5px;flex-wrap:wrap}
@media (max-width:640px){ .ev-qr{grid-template-columns:1fr;justify-items:center;text-align:center}
  .ev-qr-side{width:100%} .ev-qr-btns{justify-content:center} }

/* ---- Editor tata letak sertifikat ---- */
.cert-editor{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start}
.cert-canvas-wrap{min-width:0}
.cert-canvas{position:relative;width:100%;padding-top:calc(var(--cert-ratio,.707)*100%);
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#f2f4f3;
  overflow:hidden;touch-action:none;user-select:none}
.cert-canvas>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  pointer-events:none;user-select:none}
.cert-tag{position:absolute;white-space:nowrap;cursor:grab;padding:1px 4px;
  border:1px dashed transparent;border-radius:3px;line-height:1.2;
  text-shadow:0 0 3px rgba(255,255,255,.85)}
.cert-tag:hover{border-color:#43a047;background:rgba(255,255,255,.55)}
.cert-tag.is-drag{cursor:grabbing;border-color:#43a047;background:rgba(255,255,255,.75)}
.cert-tag.is-off{opacity:.28;border-style:dotted;border-color:#9aab9f}
.cert-fields{min-width:0}
.cert-fields input[type=number],.cert-fields select{padding:4px 6px;font-size:.82rem;margin:0;width:100%}
.cert-fields input[type=checkbox]{width:auto;margin:0}
@media (max-width:900px){
  .cert-editor{grid-template-columns:1fr}
}

/* ---- KPI event dapat diklik ---- */
a.ev-kpi{text-decoration:none;color:inherit;transition:border-color .15s,background .15s,transform .1s}
a.ev-kpi:hover{border-color:var(--teal-600);background:#f2f9f4;transform:translateY(-1px)}
a.ev-kpi:hover .pwc-cell-val{color:var(--teal-700)}
.ev-bulk{display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  padding:8px 10px;margin-bottom:10px;background:#f2f7f5;
  border:1px solid var(--line);border-radius:var(--radius-sm)}
.ev-bulk .muted{margin-left:auto;font-weight:600;color:var(--teal-700)}
@media (max-width:640px){ .ev-bulk .muted{margin-left:0;width:100%} }

/* ---- Nomor telepon: tombol WA & panggil ---- */
.ph-cell{display:inline-flex;align-items:center;gap:3px;flex-wrap:wrap}
.ph-num{font-size:.78rem;color:#3c4b42;white-space:nowrap}
.btn.ph-wa{padding:2px 6px;line-height:1.4}
.btn.ph-wa:hover{background:#e3f7e6;border-color:#25d366}
.btn.ph-tel{padding:2px 6px;line-height:1.4}
.btn.ph-tel:hover{background:#eef3fa}

/* ---- Hasil uji SMTP ---- */
.smtp-test{margin-top:12px;padding:12px;border-radius:10px;border:1px solid var(--line);background:#fcfdfd}
.smtp-test.is-ok{border-color:#43a047;background:#f2f9f4}
.smtp-test.is-fail{border-color:#e0a800;background:#fffbf0}
.smtp-step{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:start;
  padding:4px 0;font-size:.88rem;line-height:1.5}
.smtp-ico{line-height:1.5}
.smtp-hint{margin-top:10px;padding:10px 12px;border-radius:8px;background:#fff;
  border-left:3px solid var(--teal-600);font-size:.87rem;line-height:1.6}

/* ---- Status kesepakatan: bola penanda ---- */
.cst-dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  vertical-align:middle;margin-right:5px;flex:none}
.cst-confirmed{background:#2e9e4f;box-shadow:0 0 0 1px rgba(46,158,79,.28)}
.cst-planned{background:#e8890c;box-shadow:0 0 0 1px rgba(232,137,12,.28)}
.cst-lbl{font-size:.82rem}
.cal-event.cal-busy{opacity:.55;pointer-events:none}

/* ---- Menu klik-kanan ---- */
.cst-menu{position:absolute;z-index:9999;min-width:210px;padding:5px;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.16);font-size:.88rem}
.cst-menu-head{padding:6px 10px 8px;font-weight:700;color:var(--teal-800);
  border-bottom:1px solid var(--line);margin-bottom:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cst-menu-item{display:flex;align-items:center;gap:7px;width:100%;
  padding:8px 10px;border:0;border-radius:7px;background:none;
  font:inherit;text-align:left;color:var(--ink);text-decoration:none;cursor:pointer}
.cst-menu-item:hover:not(:disabled){background:#f2f7f5}
.cst-menu-item:disabled{opacity:.42;cursor:default}
.cst-menu-sep{height:1px;background:var(--line);margin:4px 2px}

/* ---- Penyusun kuis ---- */
.quiz-q{padding:12px 14px;margin-bottom:10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#fcfdfd}
.quiz-q-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.quiz-q-no{width:26px;height:26px;flex:none;border-radius:50%;background:var(--teal-700);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}
.quiz-q-txt{flex:1;min-width:180px;font-weight:600;line-height:1.45}
.quiz-q-act{display:flex;gap:2px;align-items:center}
.quiz-opts{display:flex;flex-wrap:wrap;gap:7px;margin:9px 0 0 36px}
.quiz-opt{padding:4px 10px;border-radius:99px;background:#eef2ef;font-size:.84rem}
.quiz-opt.is-correct{background:#e3f2e6;color:#2f7a3f;font-weight:600}
.quiz-optrow{display:grid;grid-template-columns:22px 30px 1fr;gap:8px;align-items:center;
  margin-bottom:7px;font-weight:400}
.quiz-optrow input[type=radio]{width:auto;margin:0;justify-self:center}
.quiz-optletter{font-weight:700;color:var(--teal-700);text-align:center}
.quiz-optrow input[type=text]{margin:0}
@media (max-width:640px){ .quiz-opts{margin-left:0} }

/* ---- Sakelar mulai/akhiri acara ---- */
.ev-runbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#f7fbfa}

/* ---- Kolom tanggal dengan tombol kalender ---- */
.dt-wrap{position:relative;display:block}
.dt-wrap>input[type=text]{width:100%;padding-right:40px}
.dt-wrap>.dt-pick{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:30px;min-width:30px;padding:0;margin:0;border:0;background:transparent;
  color:transparent;cursor:pointer}
.dt-wrap>.dt-pick::-webkit-calendar-picker-indicator{opacity:.75;cursor:pointer;
  width:24px;height:24px;padding:0}
.dt-wrap>.dt-pick:focus{outline:2px solid var(--teal-600);outline-offset:2px;border-radius:5px}

/* ---- Pratinjau pengulangan agenda ---- */
.rec-int{display:flex;align-items:center;gap:7px}
.rec-int input{max-width:90px;margin:0}
.rec-unit{font-weight:600;color:var(--teal-700);font-size:.9rem}
.rec-preview{margin:8px 0 10px;padding:9px 12px;border-radius:8px;
  background:#f2f7f5;border-left:3px solid var(--teal-600);
  font-size:.85rem;line-height:1.6}
.rec-preview.is-warn{background:#fff8e6;border-left-color:#e0a800}

/* ---- Pemilih kop surat ---- */
.wf-letter-launch{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.kop-pick{position:relative;display:inline-block}
.kop-pick.js-on .kop-native{display:none}          /* tanpa JS, select asli tetap dipakai */
.kop-pick:not(.js-on) .kop-btn,
.kop-pick:not(.js-on) .kop-menu{display:none}

.kop-btn{display:inline-flex;align-items:center;gap:9px;padding:6px 11px;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:9px;font:inherit;
  color:var(--ink);line-height:1.25;transition:border-color .15s,box-shadow .15s}
.kop-btn:hover{border-color:var(--teal-600);box-shadow:0 1px 6px rgba(0,0,0,.07)}
.kop-btn[aria-expanded="true"]{border-color:var(--teal-600);box-shadow:0 0 0 3px rgba(67,160,71,.14)}
.kop-ico{font-size:1.05rem;line-height:1}
.kop-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.kop-lbl{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:#7a8d80;line-height:1.2}
.kop-val{font-size:.86rem;font-weight:600;color:var(--teal-800);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:180px}
.kop-caret{color:#7a8d80;font-size:.75rem;margin-left:2px}

.kop-menu{position:absolute;z-index:60;top:calc(100% + 5px);right:0;min-width:250px;max-width:320px;
  padding:5px;background:#fff;border:1px solid var(--line);border-radius:11px;
  box-shadow:0 12px 32px rgba(0,0,0,.15)}
.kop-item{display:flex;flex-direction:column;gap:1px;width:100%;padding:8px 11px;
  border:0;border-radius:8px;background:none;font:inherit;text-align:left;cursor:pointer;
  color:var(--ink);text-decoration:none}
.kop-item:hover{background:#f2f7f5}
.kop-item.is-on{background:#e9f4ec}
.kop-item.is-on .kop-item-name::after{content:' ✓';color:var(--teal-700)}
.kop-item-name{font-size:.88rem;font-weight:600}
.kop-item-sub{font-size:.76rem;color:#7a8d80;line-height:1.4}
.kop-item-add{border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:3px;
  color:var(--teal-700)}
@media (max-width:640px){
  .kop-menu{right:auto;left:0;min-width:210px}
  .kop-val{max-width:120px}
}

/* ---- Salin isi dari surat lain ---- */
.lcopy{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
.lcopy-panel{margin:0 0 14px;border:1px solid var(--line);border-radius:10px;
  background:#fcfdfd;overflow:hidden}
.lcopy-bar{display:flex;gap:8px;align-items:center;padding:9px 11px;
  background:#f2f7f5;border-bottom:1px solid var(--line)}
.lcopy-bar input{flex:1;margin:0;padding:7px 10px;font-size:.88rem}
.lcopy-list{max-height:300px;overflow-y:auto;padding:5px}
.lcopy-item{display:flex;flex-direction:column;gap:2px;width:100%;padding:9px 11px;
  border:0;border-radius:8px;background:none;font:inherit;text-align:left;cursor:pointer}
.lcopy-item:hover{background:#f2f7f5}
.lcopy-item:disabled{opacity:.5;cursor:default}
.lcopy-subj{font-size:.9rem;font-weight:600;color:var(--teal-800);line-height:1.4}
.lcopy-meta{font-size:.76rem;color:#7a8d80}
.lcopy-foot{padding:9px 12px;border-top:1px solid var(--line);background:#f7fbfa}
.lcopy-list p{margin:8px 11px}
@media (max-width:640px){ .lcopy-bar{flex-wrap:wrap} .lcopy-bar input{width:100%;flex:none} }

/* ---- Bilah pemasangan aplikasi (PWA) ---- */
/* Wadah bertumpuk: bilah baru muncul DI ATAS bilah lama, tidak menimpanya. */
.pwa-stack{position:fixed;left:12px;right:12px;z-index:9000;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none}
.pwa-stack.is-empty{display:none}
.pwa-bar{pointer-events:auto;
  display:flex;align-items:center;gap:10px;padding:11px 13px;
  background:#0f2417;color:#eaf3ec;border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.28);font-size:.88rem;line-height:1.5}
.pwa-bar[hidden]{display:none}
.pwa-bar.pwa-update{background:#1b5e20}
.pwa-txt{flex:1;min-width:0}
.pwa-btn{flex:none;padding:8px 15px;border:0;border-radius:8px;background:#43a047;
  color:#fff;font:inherit;font-weight:700;cursor:pointer}
.pwa-btn:hover{background:#4caf50}
.pwa-x{flex:none;width:30px;height:30px;border:0;border-radius:7px;background:transparent;
  color:#9fc4a8;font-size:1rem;cursor:pointer;line-height:1}
.pwa-x:hover{background:rgba(255,255,255,.1);color:#fff}
@media (min-width:720px){
  .pwa-stack{left:auto;right:18px;bottom:18px;max-width:420px}
}
@media (max-width:420px){
  .pwa-bar{font-size:.83rem;padding:10px 11px;gap:8px}
  .pwa-btn{padding:8px 12px}
}
/* Saat berjalan sebagai aplikasi terpasang, beri ruang aman di ponsel berponi */
@media (display-mode: standalone){
  body{padding-bottom:env(safe-area-inset-bottom)}
}

/* ---- Pembungkus kolom formulir (.fld) ----
   Kelas ini dipakai 26 kali di 10 berkas tetapi TIDAK PERNAH punya CSS, sehingga
   isinya tetap inline dan menempel/menimpa elemen sebelumnya — inilah sebab
   teks petunjuk tampak menumpuk di atas daftar peserta.
   Dijadikan kolom dengan jarak antar-elemen. */
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fld-lbl{font-size:.9rem;font-weight:600;color:#38483a;line-height:1.4}
.fld-lbl .muted{font-weight:400}
/* Keterangan langsung di bawah panel pemilih: beri jarak dan lebar penuh. */
.fld > span.muted,
.fld > p.muted{display:block;margin:0;line-height:1.55}
.fld > .err{margin:0}

/* ---- Header tabel yang dapat diurutkan (tanpa <a>) ---- */
.data-table th.sortable{user-select:none;white-space:nowrap}
.data-table th.sortable:hover{color:var(--teal-700);background:#eef4f0}
.data-table th.sortable .sort-ind{font-size:.75em;color:var(--teal-700)}

/* ---- Panduan setup WhatsApp ---- */
.wa-guide{margin:0 0 14px;border:1px solid var(--line);border-radius:10px;background:#f7fbfa}
.wa-guide>summary{cursor:pointer;padding:10px 12px;font-weight:600;color:var(--teal-800);font-size:.9rem}
.wa-guide>ol{margin:0;padding:0 14px 4px 32px;font-size:.87rem;line-height:1.7}
.wa-guide ul{margin:5px 0;padding-left:20px}
.wa-guide>p{padding:0 14px 12px;margin:0}

/* ---- Lebar kolom tabel surat ---- */
.seg-cols{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.seg-wrap{margin-top:6px}
.seg-wlist{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.seg-wcol{display:flex;flex-direction:column;gap:3px;font-size:.76rem;color:#5a6b60}
.seg-wcol input{width:82px;margin:0;padding:5px 7px;font-size:.85rem}
@media (max-width:640px){ .seg-wcol input{width:70px} }

/* ---- Blok lebar kolom ---- */
.seg-cols{margin-top:10px;padding:10px 11px;border:1px solid var(--line);
  border-radius:8px;background:#f7fbfa}
.seg-cols-head{font-weight:700;font-size:.84rem;color:var(--teal-800);margin-bottom:8px}
.seg-cols-head .muted{font-weight:400}
.seg-wnote{margin-top:7px}
.seg-wnote.warn{color:#a3701c;font-weight:600}

/* ---- Tabel visual penyusun surat ---- */
.tb-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:7px}
.tb-tools label{display:inline-flex;align-items:center;gap:6px;margin:0;
  font-size:.84rem;font-weight:500;white-space:nowrap}
.tb-tools input[type=number]{width:64px;margin:0;padding:5px 7px;font-size:.85rem}
.tb-sep{width:1px;height:20px;background:var(--line)}
.tb-hint{margin-bottom:6px}
.tb-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
.tb-grid{width:100%;border-collapse:collapse;table-layout:fixed;min-width:420px}
.tb-grid td{position:relative;padding:0;border:1px solid #e4ebe6;overflow:hidden}
.tb-grid tr:first-child td{background:#f7fbfa}
.tb-cell{width:100%;border:0;margin:0;padding:7px 9px;font:inherit;font-size:.87rem;
  background:transparent;border-radius:0;min-width:0}
.tb-cell:focus{outline:2px solid var(--teal-600);outline-offset:-2px;background:#fff}
.tb-grid tr:first-child .tb-cell{font-weight:600}
/* Pegangan geser: pita tipis di batas kanan sel */
.tb-grip{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;
  z-index:2;touch-action:none}
.tb-grip:hover{background:rgba(67,160,71,.35)}
.tb-grid.is-resizing{user-select:none}
.tb-grid.is-resizing .tb-grip{background:rgba(67,160,71,.5)}
.tb-note{margin-top:6px}
.tb-note.warn{color:#a3701c;font-weight:600}
@media (max-width:640px){
  .tb-tools{gap:8px}
  .tb-tools input[type=number]{width:56px}
  .tb-cell{font-size:.82rem;padding:6px 7px}
}

/* ---- Bilah bantuan AI ---- */
.aiw-bar{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:7px;
  padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#f7fbfa}
.aiw-lbl{font-size:.78rem;font-weight:700;color:var(--teal-800);margin-right:2px}
.aiw-lang{width:auto;margin:0;padding:4px 6px;font-size:.78rem;max-width:150px}
.aiw-stat{margin-left:auto;font-size:.78rem}
.aiw-stat.ok{color:#2f7a3f;font-weight:600}
.aiw-stat.warn{color:#a3701c;font-weight:600}
.aiw-bar button:disabled{opacity:.45}
@media (max-width:640px){ .aiw-stat{margin-left:0;width:100%} }

/* ---- Pasangan tanggal + jam ---- */
.dt-pair{display:flex;gap:6px;align-items:center}
.dt-pair input[type=text]{flex:1;min-width:0;margin:0}
.dt-pair input[type=time]{flex:none;width:104px;margin:0}
@media (max-width:480px){ .dt-pair input[type=time]{width:92px} }

/* ---- Baris penutup pada Historical Flow ---- */
.wf-flow tr.wf-closed td{background:#f2f7f5;border-top:2px solid var(--teal-600);
  font-weight:500}
.wf-flow tr.wf-closed .c-seq{color:var(--teal-700);font-weight:700}

/* ---- Modul Interface API ---- */
.if-nav{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:2px}
.if-nav-item{padding:8px 13px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink);text-decoration:none;font-size:.85rem;white-space:nowrap}
.if-nav-item:hover{border-color:var(--teal-600);color:var(--teal-700)}
.if-nav-item.is-on{background:var(--teal-700);border-color:var(--teal-700);color:#fff;font-weight:600}
.if-raw{margin:6px 0 14px;padding:12px 14px;background:#0f2417;color:#d8ebdc;
  border-radius:9px;overflow-x:auto;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.8rem;line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:460px}
.key-box{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:10px 0}
.key-box code{flex:1;min-width:240px;padding:11px 13px;background:#0f2417;color:#9fe6ae;
  border-radius:8px;font-size:.86rem;word-break:break-all}

/* ---- Penyaring cakupan kalender (Personal / Site / Group) ---- */
.sf-bar{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.86rem}
.sf-chk{display:inline-flex;align-items:center;gap:5px;margin:0;font-weight:500;white-space:nowrap}
.sf-chk input{width:auto;margin:0}
.sf-dd{position:relative;display:inline-block}
.sf-dd-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:8px;font:inherit;
  font-size:.85rem;color:var(--ink);white-space:nowrap}
.sf-dd-btn:hover{border-color:var(--teal-600);color:var(--teal-700)}
.sf-dd-btn strong{color:var(--teal-700)}
.sf-dd-menu{position:absolute;z-index:70;top:calc(100% + 5px);left:0;min-width:210px;max-width:300px;
  max-height:320px;overflow-y:auto;padding:5px;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.16)}
.sf-dd-item{display:flex;align-items:center;gap:8px;padding:7px 10px;margin:0;
  border-radius:7px;font-size:.86rem;font-weight:400;cursor:pointer;white-space:nowrap}
.sf-dd-item:hover{background:#f2f7f5}
.sf-dd-item input{width:auto;margin:0;flex:none}
.sf-dd-head{display:block;padding:6px 10px 3px;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:#7a8d80}
.sf-dd-empty{display:block;padding:9px 11px;font-size:.83rem;color:#7a8d80}
@media (max-width:640px){ .sf-dd-menu{min-width:180px} }

/* ---- Penanda awal bulan pada kalender bergulir ---- */
.cal-cell.cal-mstart{border-top:2px solid var(--teal-600)}
.cal-mon{font-size:.68rem;font-weight:700;color:var(--teal-700);
  text-transform:uppercase;letter-spacing:.03em;margin-left:3px}
.cal-cell.cal-past .cal-mon{color:#8a9b90}

/* ---- Penanda status agenda saat "Semua status" aktif ---- */
.cal-event.cal-cancel{opacity:.6}
.cal-event.cal-cancel .cal-time,
.cal-event.cal-cancel{text-decoration:line-through;text-decoration-thickness:1px}
.cal-event.cal-done{opacity:.82}
.chip-toggle{white-space:nowrap}

/* ---- Bilah filter Agenda: dirapatkan ----
   Sebelumnya dua form terpisah dengan justify-content:space-between,
   sehingga muncul celah lebar di tengah saat isinya sedikit. */
.ag-filterrow{gap:8px 14px;justify-content:flex-start;padding:9px 12px}
.ag-filterrow .filterbar{gap:8px;margin:0}
.ag-filterrow .ag-scopeform{margin-left:auto}
.scope-filter{gap:8px}
.dv-extra{margin-left:auto;display:inline-flex;align-items:center}
.dv-extra .scope-chk{margin:0;white-space:nowrap}
.dv-row{gap:8px}
@media (max-width:900px){
  .ag-filterrow .ag-scopeform{margin-left:0;width:100%}
  .dv-extra{margin-left:0}
}