/* ============================================================
   APLIKASI SURAT KUASA — TEMA SAP (Material 3)
   Adaptasi dari sap.sapulidi.co.id/assets/css/style.css
   Palet: indigo-biru (#1E88E5 / #1A237E), permukaan putih,
   latar abu kebiruan (#F5F7FB), teks slate (#1E293B)
   Tipografi: Inter (sans), sudut membulat, bayangan lembut
   ============================================================ */
:root {
  --primary: #1E88E5;
  --primary-light: #42A5F5;
  --primary-dark: #1565C0;
  --primary-bg: rgba(30, 136, 229, 0.08);
  --secondary: #0ea5e9;
  --success: #4CAF50;
  --success-light: #E8F5E9;
  --success-dark: #2E7D32;
  --warning: #FF9800;
  --warning-light: #FFF3E0;
  --warning-dark: #E65100;
  --danger: #F44336;
  --danger-light: #FFEBEE;
  --danger-dark: #C62828;
  --info: #2196F3;
  --info-light: #E3F2FD;
  --info-dark: #1565C0;
  --dark: #1A1A2E;
  --gray-50: #F8FAFC;
  --gray-100: #F5F7FB;
  --gray-200: #E8ECF1;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;
  --sidebar-width: 270px;
  --sidebar-bg: linear-gradient(180deg, #1A237E 0%, #283593 50%, #1A237E 100%);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --card-shadow-hover: 0 8px 30px rgba(30, 136, 229, 0.10), 0 2px 8px rgba(0,0,0,0.04);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  /* alias lama (dipakai style inline & css lama) */
  --biru: var(--primary);
  --biru-tua: var(--primary-dark);
  --abu: var(--gray-400);
  --garis: var(--gray-200);
  --paper: var(--gray-100);
  --surface: #FFFFFF;
  --ink: var(--gray-800);
  --ink-2: var(--gray-600);
  --ink-3: var(--gray-400);
  --line: var(--gray-200);
  --line-2: var(--gray-300);
  --ok: var(--success-dark);
  --ok-bg: var(--success-light);
  --warn: var(--warning-dark);
  --warn-bg: var(--warning-light);
  --info-bg: var(--info-light);
  --navy: var(--primary-dark);
  --gold: var(--primary-light);
  --gold-soft: #64B5F6;
  --gold-pale: var(--primary-bg);
  --danger-bg: var(--danger-light);
  --shadow: var(--card-shadow);
  --shadow-hover: var(--card-shadow-hover);
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);
  --tr: var(--transition);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--gray-100);
  color: var(--gray-800);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ===== SIDEBAR — indigo gradient + pola titik SAP ===== */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh; height: 100dvh;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 1000;
  display: flex; flex-direction: column;
  background: var(--sidebar-bg);
  color: #fff;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.sidebar::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.side-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 20px 16px;
  color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
}
.side-brand img { height: 44px; max-width: 60px; object-fit: contain; border-radius: 12px; background: #fff; padding: 2px; }
.logo-ph {
  width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, #64B5F6, #1E88E5);
  box-shadow: 0 4px 12px rgba(30, 136, 229, 0.4);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; letter-spacing: 1px;
}
.side-brand-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.side-brand-txt b {
  font-size: 15px; font-weight: 700; letter-spacing: -0.3px; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-brand-txt small {
  font-size: 11px; color: rgba(255,255,255,.5); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-nav {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  padding: 12px 12px 24px;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.side-nav::-webkit-scrollbar { width: 5px; }
.side-nav::-webkit-scrollbar-track { background: transparent; }
.side-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
.side-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }
.side-sect {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: rgba(255,255,255,.35);
  padding: 16px 12px 6px;
}
.side-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin: 2px 0;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,.65);
  font-size: 13.5px; font-weight: 500;
  transition: var(--transition);
  text-decoration: none;
  position: relative;
  border-left: 2px solid transparent;
}
.side-nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.side-nav a.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(66, 165, 245, 0.5) 0%, rgba(30, 136, 229, 0.3) 100%);
  box-shadow: 0 2px 8px rgba(30, 136, 229, 0.3);
  border-left-color: transparent;
}
.side-nav a.active::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; background: #64B5F6; border-radius: 0 3px 3px 0;
}
.side-user { padding: 16px; border-top: 1px solid rgba(255,255,255,.08); position: relative; }
.side-user .u {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05);
}
.side-user .avatar, .side-user img.avatar {
  width: 38px; height: 38px; border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #64B5F6, #1E88E5);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
  object-fit: cover;
}
.side-user .nama { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .role { font-size: 11px; color: rgba(255,255,255,.45); font-weight: 500; }
.side-user .btn-keluar {
  margin-left: auto; color: rgba(255,255,255,.4); text-decoration: none;
  padding: 6px 10px; border-radius: 8px; transition: var(--transition); font-size: 12px;
}
.side-user .btn-keluar:hover { color: #fff; background: rgba(244, 67, 54, 0.2); }

/* ===== MAIN CONTENT ===== */
.main-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  background: var(--gray-100);
  display: flex; flex-direction: column;
  transition: margin-left 0.3s;
}
.main-content .container { flex: 1; }
.container { max-width: auto; margin: 15px 35px 0; padding: 24px; }

/* ===== TOP-NAVBAR — kaca buram (glass) ===== */
.top-navbar {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-200);
  padding: 14px 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 100;
}
.top-navbar .page-title {
  font-size: 18px; font-weight: 700; color: var(--gray-900);
  margin: 0; letter-spacing: -0.3px;
}
.top-navbar .breadcrumb-text { font-size: 12px; color: var(--gray-400); margin: 2px 0 0; }
.top-navbar-right { display: flex; align-items: center; gap: 12px; }
.top-navbar-left { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.top-navbar-date { font-size: 12.5px; color: var(--gray-500); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.navbar-user {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  border: 1px solid var(--gray-200);
  background: #fff;
  font-size: 12.5px; font-weight: 600; color: var(--gray-600);
  white-space: nowrap;
}
.navbar-user .avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #64B5F6, #1E88E5); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}

.page-head { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.page-head h1 { display: none; }
h1 { font-size: 22px; font-weight: 800; margin: 0; color: var(--gray-900); letter-spacing: -0.3px; }
h2 {
  font-size: 15px; font-weight: 700;
  margin: 0 0 12px; color: var(--gray-900);
  display: flex; align-items: center; gap: 8px;
}
h2::before {
  content: ''; width: 4px; height: 18px; border-radius: 4px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
}
.card > h2:first-child { margin-top: 0; }
h3 { margin: 16px 0 8px; font-size: 11.5px; text-transform: uppercase; color: var(--gray-400); letter-spacing: 1.2px; font-weight: 700; }

/* ===== TOPBAR (menu horizontal, mode topbar/keduanya) ===== */
.topbar {
  background: linear-gradient(90deg, #1A237E 0%, #283593 55%, #1E88E5 100%);
  color: #fff;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 22px;
  flex-wrap: wrap;
  border-bottom: 3px solid #64B5F6;
  position: sticky; top: 0; z-index: 900;
}
.topbar .brand {
  font-size: 16px; font-weight: 700; color: #fff; text-decoration: none;
  display: flex; align-items: center; gap: 10px; letter-spacing: -0.2px;
}
.topbar .brand img { height: 38px; max-width: 54px; object-fit: contain; border-radius: var(--radius-sm); background: #fff; padding: 2px; }
.topbar .brand .logo-ph { width: 38px; height: 38px; font-size: 13px; box-shadow: none; }
.topbar nav { flex: 1; display: flex; flex-wrap: wrap; gap: 2px; }
.topbar nav a {
  color: rgba(255,255,255,.65); text-decoration: none;
  font-size: 13px; font-weight: 500;
  padding: 7px 12px; border-radius: var(--radius-sm);
  transition: var(--transition);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.topbar nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.topbar nav a.active { color: #64B5F6; border-bottom-color: #64B5F6; background: rgba(255,255,255,.05); }
.topbar nav .side-sect { display: none; }
.topbar.only-brand nav { display: none; }

/* ===== CARD — Material 3 (flat, rounded, bayangan lembut) ===== */
.card {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  background: #fff;
  padding: 22px 24px;
  margin-bottom: 20px;
  transition: var(--transition);
  overflow: hidden;
}
.card:hover { box-shadow: var(--card-shadow-hover); }

/* Kelompok pengaturan (setting.php) */
.set-group { margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px dashed var(--gray-200); }
.set-group:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.set-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--primary); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 18px; }
.grid2 .full { grid-column: 1 / -1; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 14px 18px; }
.grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--gray-600); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--gray-300); border-radius: var(--radius-md);
  font: inherit; font-size: 13.5px; color: var(--gray-800);
  background: var(--gray-50);
  transition: var(--transition);
}
.field textarea { min-height: 70px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.12);
  background-color: #fff;
}
.field input:disabled, .field select:disabled { background: var(--gray-100); color: var(--gray-400); }
.field input::placeholder, .field textarea::placeholder { color: var(--gray-400); }

/* ===== BUTTONS — gradient Material ===== */
.btn {
  display: inline-block; padding: 8px 16px;
  border: 1px solid var(--gray-300); border-radius: var(--radius-sm);
  background: #fff; color: var(--gray-600);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: var(--transition);
}
.btn:hover { background: var(--gray-100); border-color: var(--gray-400); color: var(--gray-700); }
.btn.primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  border: none; color: #fff;
  box-shadow: 0 2px 8px rgba(30, 136, 229, 0.3);
}
.btn.primary:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  box-shadow: 0 4px 16px rgba(30, 136, 229, 0.4);
  transform: translateY(-1px);
}
.btn.danger {
  background: linear-gradient(135deg, var(--danger-dark), var(--danger));
  border: none; color: #fff;
  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
}
.btn.danger:hover { box-shadow: 0 4px 16px rgba(244, 67, 54, 0.4); transform: translateY(-1px); }
.btn.small { padding: 5px 12px; font-size: 12.5px; }
.btn.icon { display: inline-flex; align-items: center; justify-content: center; padding: 5px 7px; line-height: 1.2; }
.btn.icon .ikon { width: 15px; height: 15px; display: block; }
.btn.icon:hover { transform: translateY(-1px); }
/* dark mode: warna semantik icon dicerahkan agar tetap jelas */
body.dark .btn.icon .ikon[style] { filter: brightness(1.35); }
body.dark .table th { background: var(--gray-100); }
/* grup aksi icon sejajar horizontal satu baris di dalam sel tabel */
.btn-group { display: inline-flex; flex-wrap: nowrap; gap: 4px; align-items: center; vertical-align: middle; white-space: nowrap; }
.btn-group form { display: inline-flex; margin: 0; }
/* kolom Aksi rata kanan — tombol sejajar rapi antar baris.
   Specificity .table td.td-aksi sengaja > .table td (yang set text-align:left) */
.table td.td-aksi { text-align: right; }
.td-aksi .btn-group, .td-aksi form { justify-content: flex-end; }

/* ===== TABLES ===== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: none; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--card-shadow); margin-bottom: 20px; }
.table-wrap .table { margin-bottom: 0; }
.table { width: 100%; border-collapse: collapse; background: transparent; margin-bottom: 0; font-size: 13.5px; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--gray-100); font-size: 13.5px; vertical-align: middle; color: var(--gray-700); }
/* header tabel kecil, senada proporsi isi */
.table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--gray-400); background: var(--gray-50); white-space: nowrap; }
.table td.td-aksi { white-space: nowrap; width: 1%; }   /* kolom aksi mungil: selebar isi, kolom lain yang melebar */
.table th.th-aksi { text-align: right; }                 /* specificity > .table th */
.table td .input-sm { max-width: 165px; }                /* dropdown status tidak melebar sendiri */
.table th {
  background: var(--gray-50);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--gray-500); letter-spacing: 0.6px;
  border-bottom: 2px solid var(--gray-100);
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: var(--transition); }
.table tbody tr:hover { background: linear-gradient(90deg, rgba(30, 136, 229, 0.03) 0%, rgba(66, 165, 245, 0.02) 100%); }
.muted { color: var(--gray-400); }

/* ===== BADGES — chip mobile style ===== */
.badge {
  display: inline-block; padding: 5px 10px;
  border-radius: 6px; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.2px; white-space: nowrap;
  border: 1px solid transparent;
}
.badge.umum { background: var(--info-light); color: var(--info-dark); }
.badge.khusus { background: var(--warning-light); color: var(--warning-dark); }
.badge.istimewa { background: var(--danger-light); color: var(--danger-dark); }
.badge.final { background: var(--success-light); color: var(--success-dark); }
.badge.draf { background: var(--gray-100); color: var(--gray-500); }
.badge.ditandatangani { background: var(--primary-bg); color: var(--primary-dark); }
.badge.proses { background: var(--warning-light); color: var(--warning-dark); }
.badge.review { background: var(--info-light, #e3f2fd); color: var(--info-dark, #1565c0); }
.badge.terkirim { background: var(--success-light); color: var(--success-dark); }
.row-versi td { background: var(--gray-50, #f8fafc); }
.badge.batal { background: var(--danger-light); color: var(--danger-dark); }
.badge.somasi { background: var(--danger-light); color: var(--danger-dark); }
.badge.litigasi { background: #E3F2FD; color: var(--info-dark); }
.badge.replik { background: var(--warning-light); color: var(--warning-dark); }
.badge.duplik { background: var(--info-light); color: var(--info-dark); }
.badge.putusan { background: var(--primary-bg); color: var(--primary-dark); }
.badge.pendapatan { background: var(--success-light); color: var(--success-dark); }
.badge.biaya { background: var(--danger-light); color: var(--danger-dark); }
.badge.akomodasi { background: var(--warning-light); color: var(--warning-dark); }
.badge.lainnya, .badge.ktp, .badge.surat_kuasa { background: var(--gray-100); color: var(--gray-600); }
.badge.danger { background: var(--danger-light); color: var(--danger-dark); }
.badge.warning { background: var(--warning-light); color: var(--warning-dark); }

.timeline { list-style: none; margin: 12px 0 0; padding: 0; }
.timeline li { padding: 8px 0 8px 18px; border-left: 2px solid var(--gray-300); margin-left: 6px; position: relative; font-size: 14px; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); border: 2px solid #fff; box-sizing: content-box; margin-left: -2px; }
.timeline li .hint { margin-left: 8px; }

/* ===== ALERTS — border kiri Material ===== */
.alert { padding: 14px 18px; border-radius: var(--radius-md); border: none; margin-bottom: 16px; font-size: 13.5px; font-weight: 500; }
.alert.error, .alert.danger { background: var(--danger-light); color: var(--danger-dark); border-left: 4px solid var(--danger); }
.alert.ok, .alert.success { background: var(--success-light); color: var(--success-dark); border-left: 4px solid var(--success); }
.alert.info { background: var(--info-light); color: var(--info-dark); border-left: 4px solid var(--info); }
.alert.warning { background: var(--warning-light); color: var(--warning-dark); border-left: 4px solid var(--warning); }

/* ===== Step title — header seksi bernomor (form multi-step) ===== */
.step-title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.step-title .n {
  width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #fff; font-weight: 800; font-size: 14px;
  box-shadow: 0 2px 8px rgba(30, 136, 229, 0.3);
}
.step-title h2 { margin: 0; }
.step-title h2::before { display: none; } /* angka step sudah jadi aksen */

/* ===== Stepper — indikator progres langkah form ===== */
.stepper {
  display: flex; align-items: flex-start;
  margin: 0 0 20px;
  position: sticky; top: 58px; z-index: 90;
  background: rgba(245, 247, 251, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 0 8px;
}
body.mode-topbar .stepper, body.mode-keduanya .stepper { position: static; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
body.dark .stepper { background: rgba(23, 30, 46, 0.92); }
.step {
  flex: 1; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* garis penghubung antar langkah */
.step + .step::before {
  content: ''; position: absolute; top: 17px; left: -50%;
  width: 100%; height: 2px; background: var(--gray-200);
  z-index: 0; transition: var(--transition);
}
.step.done + .step::before, .step.active::before { background: var(--primary); }
.step .dot {
  position: relative; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--gray-300);
  color: var(--gray-400); font-size: 13.5px; font-weight: 700;
  transition: var(--transition);
}
.step .lbl { font-size: 11.5px; font-weight: 600; color: var(--gray-400); text-align: center; transition: var(--transition); }
.step:hover .dot { border-color: var(--primary); color: var(--primary); transform: scale(1.06); }
.step.active .dot {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 10px rgba(30, 136, 229, 0.4);
}
.step.active .lbl { color: var(--primary-dark); }
.step.done .dot { background: var(--primary-bg); border-color: var(--primary); color: var(--primary); }
.step.done .lbl { color: var(--gray-500); }
.card[id^="step"] { scroll-margin-top: 96px; } /* offset navbar saat lompat anchor */
body.mode-topbar .card[id^="step"], body.mode-keduanya .card[id^="step"] { scroll-margin-top: 12px; }
.step-title .hint { font-weight: 400; }

/* ===== Radio card — pilihan jenis surat (Material 3) ===== */
.radio-card { display: block; position: relative; cursor: pointer; }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card > span {
  display: block; padding: 12px 14px;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-md);
  background: #fff;
  transition: var(--transition);
  height: 100%;
}
.radio-card > span b { display: block; font-size: 13.5px; color: var(--gray-800); margin-bottom: 2px; }
.radio-card > span :where(span) { display: block; font-size: 12px; color: var(--gray-400); line-height: 1.45; }
.radio-card:hover > span { border-color: var(--primary); background: var(--primary-bg); }
.radio-card input:checked + span {
  border-color: var(--primary);
  background: var(--primary-bg);
  box-shadow: 0 2px 8px rgba(30, 136, 229, 0.18);
}
.radio-card input:checked + span b { color: var(--primary-dark); }
.radio-card input:checked + span::after {
  content: '✓'; position: absolute; top: 10px; right: 12px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(30, 136, 229, 0.4);
}
.radio-card input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ===== Poin isi — textarea melebar & tombol hapus rapi ===== */
.poin-item { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start; }
.poin-item .num { font-weight: 700; padding-top: 12px; min-width: 22px; text-align: right; color: var(--primary); flex-shrink: 0; }
.poin-item textarea {
  flex: 1 1 auto; min-width: 0; min-height: 64px;
  border: 1px solid var(--gray-300); border-radius: var(--radius-md);
  padding: 10px 14px; font: inherit; font-size: 13.5px;
  color: var(--gray-800); background: var(--gray-50);
  transition: var(--transition);
}
.poin-item textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.12); background: #fff;
}
.poin-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 18px 0 10px; flex-wrap: wrap;
}
.poin-head .judul {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--gray-500);
}
.poin-head .judul::before {
  content: ''; width: 3px; height: 14px; border-radius: 3px;
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
}
.poin-head .count {
  padding: 2px 10px; border-radius: 999px;
  background: var(--primary-bg); color: var(--primary-dark);
  font-size: 11px; font-weight: 700;
}

/* Grid & kartu pilihan jenis surat */
.jenis-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.jenis-grid .radio-card { margin: 0; }
.jenis-grid .radio-card > span {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px;
}
.jenis-ico {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: var(--gray-100); color: var(--gray-500);
  transition: var(--transition);
}
.radio-card:hover .jenis-ico { background: var(--primary-bg); color: var(--primary); }
/* chip kode jenis (UMUM/KHUSUS/ISTIMEWA) pada radio-card langkah 3 buat.php */
.jenis-kode { display: inline-block; margin: 2px 0 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; padding: 2px 9px; border-radius: 999px; }
/* judul grup jenis surat di langkah 3 buat.php (SK / Litigasi / Non-Litigasi / Korespondensi) */
.jenis-group-title { margin: 14px 0 8px; font-size: 15px; font-weight: 700; color: var(--gray-700); display: flex; align-items: center; gap: 8px; }
/* ===== edit.php & edit_lanjutan.php: layout 2 kolom — langkah 1-3 kiri (lebar), Timeline & Status kanan (sticky) ===== */
.edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 400px); gap: 16px; align-items: start; } /* kolom Timeline: 300px (layar sempit) s.d. 400px (layar lebar) */
.edit-col-form { order: -1; } /* langkah 1-3 selalu tampil KIRI, Timeline & Status KANAN */
.edit-col-status { position: sticky; top: 76px; } /* tetap terlihat saat scroll kolom form yang panjang */
.edit-col-status .card { margin-bottom: 0; }
.edit-col-status .actions-bar { flex-wrap: wrap; gap: 8px; }
.edit-col-status .timeline { max-height: 60vh; overflow-y: auto; }
@media (max-width: 980px) { .edit-grid { grid-template-columns: 1fr; } .edit-col-status { position: static; } }
/* field readonly tampilan kode jenis di langkah 4 (nilai ikut pilihan langkah 3) */
.input-kode { background: var(--gray-100); font-weight: 700; letter-spacing: .6px; color: var(--gray-700); cursor: default; }
.radio-card input:checked + span .jenis-ico {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(30, 136, 229, 0.35);
}
.jenis-grid .radio-card > span b { font-size: 13.5px; }
.jenis-txt { flex: 1; min-width: 0; }
.jenis-txt b { margin-bottom: 2px; }
body.dark .jenis-ico { background: var(--gray-100); }
.poin-item .btn { flex-shrink: 0; }

/* Drag-and-drop urutan poin */
.poin-item { transition: box-shadow var(--transition), opacity var(--transition); }
.poin-item .num { cursor: grab; user-select: none; }
.poin-item .num:active { cursor: grabbing; }
.poin-item.dragging {
  opacity: 0.55;
  box-shadow: 0 8px 24px rgba(30, 136, 229, 0.25);
  transform: scale(1.005);
}
.poin-item.drag-over { border-top: 2px solid var(--primary); margin-top: -2px; }
.poin-item.drag-over-bawah { border-bottom: 2px solid var(--primary); margin-bottom: -2px; }
.poin-item .num::after {
  content: '⋮⋮'; margin-left: 2px; font-size: 9px; color: var(--gray-300);
  vertical-align: middle; letter-spacing: -1px;
}
.poin-item.dragging .num::after { color: var(--primary); }
.hint { font-size: 12px; color: var(--gray-400); }
.dropzone { border: 2px dashed var(--gray-300); border-radius: var(--radius-lg); padding: 26px; text-align: center; color: var(--gray-400); cursor: pointer; transition: var(--transition); }
.dropzone:hover, .dropzone.drag { border-color: var(--primary); background: var(--primary-bg); }
.preview-ktp { max-width: 260px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); margin-top: 10px; display: none; }

.actions-bar { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 20px; flex-wrap: wrap; }

/* ===== Baris persetujuan user pending ===== */
.pending-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  background: var(--gray-50);
}
.pending-info { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.pending-info small { color: var(--gray-400); }
.pending-row select { padding: 7px 10px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font: inherit; font-size: 12.5px; background: #fff; color: var(--gray-800); }
body.dark .pending-row { background: var(--gray-100); }
body.dark .pending-row select { background: var(--gray-50); }

/* ===== Modal reusable (create/edit via dialog) ===== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }
/* Modal konfirmasi kecil: vertikal di tengah halaman */
.modal-overlay.modal-center { align-items: center; }
.modal-overlay.modal-center .modal-box { max-width: 480px; }
/* Logo kop & footer di pratinjau bisa digeser (drag) — posisi tersimpan per firma */
.kop-preview .logo-drag { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; display: inline-block; vertical-align: middle; }
.kop-preview .logo-drag:active { cursor: grabbing; }
.modal-box {
  background: #fff; border-radius: var(--radius-xl);
  box-shadow: 0 25px 80px rgba(0,0,0,0.25);
  width: 100%; max-width: 640px;
  animation: modalIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 24px; border-bottom: 1px solid var(--gray-100);
}
.modal-head h2 { margin: 0; font-size: 16px; }
.modal-head h2::before { display: none; }
.modal-close {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--gray-100); color: var(--gray-500);
  font-size: 15px; cursor: pointer; line-height: 1;
  transition: var(--transition); flex-shrink: 0;
}
.modal-close:hover { background: var(--danger-light); color: var(--danger-dark); }
.modal-body { padding: 20px 24px; }
.modal-body .actions-bar { margin-bottom: 0; }
body.dark .modal-box { background: var(--gray-50); }
@media (max-width: 768px) {
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal-box { max-width: 100%; min-height: 100dvh; border-radius: 0; display: flex; flex-direction: column; }
  .modal-body { flex: 1; overflow-y: auto; }
}

/* ===== Panel buat firma (details/summary) ===== */
details.create-firma { margin-top: 16px; }
details.create-firma > summary.btn {
  display: inline-flex; align-items: center; gap: 6px;
  width: fit-content; cursor: pointer; user-select: none;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  border: none; color: #fff;
  box-shadow: 0 2px 8px rgba(30, 136, 229, 0.3);
}
details.create-firma > summary.btn:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  box-shadow: 0 4px 16px rgba(30, 136, 229, 0.4);
  transform: translateY(-1px);
}
details.create-firma[open] > summary.btn { margin-bottom: 14px; }
details.create-firma > summary.btn::before { content: '+ '; font-weight: 800; }
details.create-firma[open] > summary.btn::before { content: '× '; }
details.create-firma .create-firma-form {
  border: 1px dashed var(--gray-300); border-radius: var(--radius-md);
  padding: 18px; background: var(--gray-50);
}
body.dark details.create-firma .create-firma-form { background: var(--gray-100); }

/* ===== Dashboard ===== */
.dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
.chart-legend { display: flex; gap: 18px; font-size: 12px; color: var(--gray-600); margin-bottom: 14px; }
.chart-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.chart-legend .dot.navy { background: var(--primary); }
.chart-legend .dot.gold { background: var(--primary-light); }
.chart-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 6px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.chart-col small { font-size: 10px; color: var(--gray-400); text-transform: uppercase; }
.chart-stack { width: 100%; max-width: 34px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 6px 6px 0 0; overflow: hidden; }
.chart-stack .seg { display: block; width: 100%; }
.chart-stack .seg.navy { background: var(--primary); }
.chart-stack .seg.gold { background: var(--primary-light); }
.chart-bars.dense { gap: 2px; }
.chart-bars.dense .chart-stack { max-width: 100%; border-radius: 3px 3px 0 0; }
.chart-bars.dense .chart-col small { font-size: 8px; }
.chart-bars.dense .chart-col.today small { color: var(--primary); font-weight: 700; }
.list-act { display: flex; flex-direction: column; }
.row-act {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid var(--gray-100);
  text-decoration: none; color: var(--gray-800); transition: var(--transition);
}
.row-act:last-child { border-bottom: none; }
.row-act:hover { background: var(--gray-50); }
.row-act .ra-main { min-width: 0; }
.row-act .ra-main b { font-size: 13.5px; display: block; }
.row-act .ra-main small { color: var(--gray-400); font-size: 12px; }
.prop-bar { height: 8px; background: var(--gray-100); border: none; border-radius: 10px; overflow: hidden; }
.prop-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-light)); border-radius: 10px; }
.trend { margin-left: auto; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.trend.up { background: var(--success-light); color: var(--success-dark); }
.trend.down { background: var(--danger-light); color: var(--danger-dark); }
.empty-hint { padding: 22px; text-align: center; color: var(--gray-400); background: var(--gray-50); border: 1px dashed var(--gray-300); border-radius: var(--radius-md); font-size: 13px; }
.ok-text { color: var(--success-dark); }

/* ===== Mini stat ===== */
.mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.mini-stat {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: none;
  border-radius: var(--radius-lg); box-shadow: var(--card-shadow); padding: 16px 18px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.mini-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--primary); opacity: 0; transition: var(--transition); }
.mini-stat:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.mini-stat:hover::before { opacity: 1; }
.mini-stat .ico {
  width: 50px; height: 50px; border-radius: var(--radius-md); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 22px;
  background: var(--primary-bg); border: none;
}
.mini-stat b { display: block; font-size: 20px; font-weight: 800; color: var(--gray-900); line-height: 1.15; letter-spacing: -0.4px; }
.mini-stat small { font-size: 12px; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.5px; }

/* Foto profil (Google) sebagai avatar — bulat/rounded, ter-crop rapi */
img.avatar { object-fit: cover; background: #fff; }

/* ===== Baris pengguna ===== */
.user-cell { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.user-cell .avatar {
  width: 36px; height: 36px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: linear-gradient(135deg, #64B5F6, #1E88E5); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.input-sm { padding: 6px 10px !important; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font: inherit; font-size: 13px !important; background: #fff; color: var(--gray-800); }
.input-sm:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.12); }

/* ===== Hamburger + backdrop ===== */
/* Mobile: tombol menu sejajar dengan baris judul halaman (dalam .page-title-row) */
.nav-toggle {
  display: none; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color: #fff; font-size: 18px; line-height: 1;
  box-shadow: 0 2px 8px rgba(30, 136, 229, 0.35);
  align-items: center; justify-content: center;
}
.top-navbar .page-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nav-backdrop { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px); }
body.nav-open .nav-backdrop { display: block; }

/* ===== FOOTER ===== */
.footer { background: #fff; border-top: 1px solid var(--gray-200); color: var(--gray-400); font-size: 12.5px; padding: 14px 26px; }

/* ===== Login — kartu center screen ===== */
.login-wrap, body.login-page {
  min-height: 100vh; min-height: 100dvh;
  display: flex;
  padding: 20px;
  background: linear-gradient(160deg, #1A237E 0%, #1565C0 55%, #42A5F5 100%);
}
.login-wrap { align-items: center; justify-content: center; }
/* margin:auto lebih aman daripada align/justify center: konten yang lebih tinggi
   dari viewport tetap ter-center dan tidak terpotong di atas */
body.login-page .login-card { margin: auto; }
.login-card > :last-child { margin-bottom: 0; } /* seimbangkan footprint agar center presisi */
/* kartu login: seluruh konten center */
.login-card { text-align: center; }
.login-logo { display: flex; justify-content: center; }
.login-domain { margin: 0 auto 10px; } /* pill domain tetap center */

/* Tombol login Google — tombol sungguhan, bukan link teks */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 16px; margin-top: 14px;
  border-radius: var(--radius-md); border: 1px solid var(--gray-300);
  background: #fff; color: var(--gray-700);
  font: inherit; font-size: 13.5px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: var(--transition);
}
.btn-google:hover {
  border-color: var(--primary);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-1px);
}
body.dark .btn-google { background: var(--gray-50); }
body.dark .btn-google:hover { border-color: var(--primary-light); }

/* Animasi kemunculan kartu login (fadeInUp halus) */
@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes loginChildIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.login-page .login-card, .login-wrap .login-card {
  animation: loginCardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* elemen di dalam kartu muncul berurutan (stagger) */
body.login-page .login-card > * {
  animation: loginChildIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.login-page .login-card > *:nth-child(1) { animation-delay: 0.10s; }
body.login-page .login-card > *:nth-child(2) { animation-delay: 0.16s; }
body.login-page .login-card > *:nth-child(3) { animation-delay: 0.22s; }
body.login-page .login-card > *:nth-child(4) { animation-delay: 0.28s; }
body.login-page .login-card > *:nth-child(5) { animation-delay: 0.34s; }
body.login-page .login-card > *:nth-child(n+6) { animation-delay: 0.40s; }
/* hormati preferensi pengguna yang mematikan animasi */
@media (prefers-reduced-motion: reduce) {
  body.login-page .login-card, .login-wrap .login-card,
  body.login-page .login-card > * { animation: none; }
}
.login-card {
  background: #fff; border-radius: var(--radius-xl);
  box-shadow: 0 25px 80px rgba(0,0,0,0.15);
  padding: 36px 32px; width: 100%; max-width: 400px;
  border: none;
}
.login-card h1 { font-size: 21px; margin-bottom: 6px; }
.login-logo { margin-bottom: 14px; }
.login-logo img { display: block; height: 60px; object-fit: contain; }
.login-extra { margin-top: 16px; }
.login-extra summary { cursor: pointer; color: var(--gray-500); font-size: 12.5px; font-weight: 600; text-align: center; padding: 8px; border-radius: var(--radius-sm); transition: var(--transition); }
.login-extra summary:hover { color: var(--primary); background: var(--primary-bg); }
.login-tagline { color: var(--gray-600); font-size: 13.5px; margin: 0 0 8px; }
.login-domain {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  background: var(--primary-bg); color: var(--primary-dark);
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  margin-bottom: 10px;
}
.login-card .sub { color: var(--gray-400); font-size: 13.5px; margin-bottom: 18px; }

/* ===== Mode tampilan ===== */
body.mode-topbar .shell { display: block; }
body.mode-topbar .sidebar { display: none; }
body.mode-topbar .main-content { margin-left: 0; }
body.mode-keduanya .main-content { margin-left: var(--sidebar-width); }

/* top-navbar statis saat topbar menu tampil */
body.mode-topbar .top-navbar, body.mode-keduanya .top-navbar { position: static; }

/* ===== Responsive ===== */
@media (max-width: 992px) {
  .sidebar { transform: translateX(-100%); box-shadow: none; }
  body.nav-open .sidebar { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.2); }
  body:not(.mode-topbar) .main-content,
  body.mode-keduanya .main-content { margin-left: 0; }
  .nav-toggle { display: flex; }
  body.mode-topbar .nav-toggle { display: none; } /* mode topbar: menu sudah di atas, tanpa sidebar */
  /* breadcrumb menjorok sejajar teks judul (setelah tombol 38px + gap 8px) */
  body:not(.mode-topbar) .top-navbar .breadcrumb-text { padding-left: 46px; }
  .top-navbar .page-title { font-size: 16px; }
}
@media (max-width: 768px) {
  .container { padding: 14px; }
  .top-navbar { padding: 10px 12px; }
  .top-navbar .page-title { font-size: 15px; }
  .top-navbar .breadcrumb-text { display: none; }
  .top-navbar-date { display: none; }
  .navbar-user { font-size: 11.5px; padding: 4px 8px 4px 4px; }
  .topbar { padding: 10px 12px; gap: 8px; }
  .topbar nav a { padding: 6px 9px; font-size: 12px; }
  .page-head { flex-direction: column; align-items: stretch; }
  h1 { font-size: 19px; }
  .card { padding: 16px; border-radius: var(--radius-md); }
  .actions-bar { justify-content: stretch; }
  .actions-bar .btn { flex: 1; text-align: center; }
  .mini-stat b { font-size: 18px; }
  .mini-stat .ico { width: 42px; height: 42px; font-size: 18px; }
}

/* ============================================================
   OPTIMASI MOBILE (≤768px) — sentuhan, tabel, performa, safe-area
   ============================================================ */
@media (max-width: 768px) {
  /* Interaksi sentuh: hilangkan highlight biru & kunci zoom font */
  body { -webkit-tap-highlight-color: transparent; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

  /* Target sentuh minimal 40px (pedoman aksesibilitas mobile) */
  .btn { min-height: 40px; }
  .btn.icon { width: 40px; height: 40px; }
  .field input, .field select, .field textarea,
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="date"], select, textarea { min-height: 42px; font-size: 15px; } /* ≥15px cegah auto-zoom iOS */
  .input-sm { min-height: 36px; }
  input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }

  /* Ruang bawah untuk bottom-nav + aman untuk home indicator (iPhone) */
  .container { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

  /* Tabel panjang: geser horizontal, jangan pecah layout halaman */
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .table td, .table th { font-size: 13px; }

  /* Form & grid menyusut jadi satu kolom */
  .grid, .grid2 { grid-template-columns: 1fr !important; }
  .actions-bar { flex-wrap: wrap; }
  .actions-bar .btn { flex: 1 1 auto; }

  /* Statistik dashboard: 2 kolom agar kartu tidak sempit */
  .mini-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .mini-stat { padding: 12px !important; }

  /* Performa: matikan blur mahal & bayangan berat di layar kecil */
  .top-navbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  body.dark .top-navbar { background: var(--gray-50); }
  .card { box-shadow: 0 1px 4px rgba(0,0,0,.08); }
  .modal-box { max-height: 92dvh; overflow-y: auto; }

  /* Pratinjau kop surat di setting.php muat layar */
  .kop-preview { padding: 12px; }
  .kp-logo, .kp-ph { width: 44px !important; height: 44px !important; }
  .kp-teks { padding: 0 52px !important; }
  .kop-picker { grid-template-columns: repeat(2, 1fr); }

  /* Stepper tidak menutupi konten saat scroll */
  .stepper { padding: 6px 8px; }
}
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .btn, .card { transition: none; } /* hemat baterai */
}
/* ============================================================
   PENANDATANGAN MULTI-ADVOKAT (buat.php / edit.php)
   ============================================================ */
.ttd-multi { display: flex; flex-direction: column; gap: 8px; }
.ttd-chip {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--gray-200); border-radius: 12px;
  padding: 8px 12px; background: var(--gray-50); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ttd-chip:hover { border-color: var(--primary); }
.ttd-chip input[type="checkbox"] { accent-color: var(--primary); width: 17px; height: 17px; flex-shrink: 0; cursor: pointer; }
.ttd-chip .ord {
  min-width: 20px; height: 20px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: 11px; font-weight: 800;
  background: var(--gray-200); color: var(--gray-600); flex-shrink: 0;
}
.ttd-chip .who { display: flex; flex-direction: column; line-height: 1.25; }
.ttd-chip .who b { font-size: 13.5px; }
.ttd-chip .who span { font-size: 11px; color: var(--gray-500); text-transform: capitalize; }
.ttd-chip.picked {
  border-color: var(--primary); background: var(--primary-bg);
  box-shadow: 0 0 0 3px var(--primary-bg);
}
.ttd-chip.picked .ord { background: var(--primary); color: #fff; }
.ttd-chip.last-added { animation: ttdPop .35s ease; }
@keyframes ttdPop { 0% { transform: scale(.97); } 55% { transform: scale(1.015); } 100% { transform: scale(1); } }

/* Kartu bersarang (form anggota firma) — ikut tema terang/gelap */
.anggota-form {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  box-shadow: none;
}
.anggota-form:hover { box-shadow: none; }
body.dark .anggota-form { background: var(--gray-100); border-color: var(--gray-300); }

/* ============================================================
   VISUAL PICKER GAYA KOP SURAT (setting.php)
   ============================================================ */
.kop-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 6px; }
.kop-card { display: block; }
.kop-mini { display: block; position: relative; height: 76px; background: #fff; border: 1.5px solid var(--gray-200); border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.kop-mini::after { content: ""; position: absolute; left: 6px; right: 6px; top: 44px; border-top: 2px solid #1A237E; box-shadow: 0 2px 0 -0.5px #1E88E5; }
.kop-mini .km-logo { position: absolute; width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, #1A237E, #1E88E5); left: 6px; top: 6px; }
.kop-mini .km-line { position: absolute; height: 4px; border-radius: 2px; background: #94a3b8; }
.kop-mini .km-l1 { top: 8px; left: 50%; width: 60%; transform: translateX(-50%); height: 5px; background: #1A237E; }
.kop-mini .km-l2 { top: 17px; left: 50%; width: 42%; transform: translateX(-50%); }
.kop-mini .km-l3 { top: 26px; left: 50%; width: 70%; transform: translateX(-50%); height: 3px; }
.kop-mini .km-foot { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 10px; border-top: 1.5px solid #1A237E; }
.kop-mini .km-foot::before { content: ""; position: absolute; left: 0; top: 3px; width: 40%; height: 3px; border-radius: 2px; background: #94a3b8; }
.kop-mini .km-foot::after { content: ""; position: absolute; right: 0; top: 3px; width: 10px; height: 3px; border-radius: 2px; background: #cbd5e1; }
.kop-mini .km-foot.center::before { left: 30%; }
/* gaya A: logo kanan, tanpa teks kop, tanpa garis header/footer */
.km-a::after, .km-a .km-foot { border-top: none; box-shadow: none; }
.km-a::after { display: none; }
/* gaya C: tanpa garis footer */
.km-a .km-logo, .km-c .km-logo { left: auto; right: 6px; }
.km-a .km-l1, .km-a .km-l2, .km-a .km-l3 { display: none; }
.km-a::after, .km-c::after { top: 28px; }
.km-a .km-foot::before { width: 60%; }
/* gaya B: teks rata kiri di bawah logo kanan */
.km-b .km-logo { left: auto; right: 6px; }
.km-b .km-l1 { left: 6px; top: 30px; width: 55%; transform: none; }
.km-b .km-l2 { left: 6px; top: 38px; width: 40%; transform: none; }
.km-b .km-l3 { left: 6px; top: 46px; width: 65%; transform: none; }
.km-b::after { top: 58px; }
.km-b .km-foot { bottom: 2px; }
body.dark .kop-mini { border-color: var(--gray-300); }
/* gaya C (mini): garis kop tetap, footer tanpa garis */
.km-c .km-foot { border-top: none; }
/* gaya D (mini): polos — sembunyikan semua elemen mockup */
.km-d .km-logo, .km-d .km-line, .km-d .km-foot { display: none; }
.km-d::after { display: none; }
.kop-card input:checked + .kop-mini { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); }
.kop-card input:focus-visible + .kop-mini { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Live preview kertas kop */
.kop-preview-wrap { margin-top: 14px; }
.kop-preview { display: none; background: #fff; border: 1px solid var(--gray-300); border-radius: 10px; padding: 16px 20px; }
.kop-preview.active { display: block; }
.kp-kop { position: relative; min-height: 56px; }
.kp-logo { position: absolute; top: 0; right: 0; width: 54px; height: 54px; object-fit: contain; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; padding: 2px; }
.kp-logo.kiri { left: 0; right: auto; }
.kp-ph { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border: 1.5px solid #1A237E; border-radius: 8px; font-weight: 800; font-size: 13px; letter-spacing: 1px; color: #1A237E; }
.kp-ph.abs { position: absolute; top: 0; right: 0; }
.kp-ph.abs.kiri { left: 0; right: auto; }
.kp-teks { text-align: center; font-weight: 700; line-height: 1.45; padding: 0 70px; }
.kp-teks.kiri { text-align: left; padding: 0; margin-top: 56px; }
.kp-teks .kp-nama { font-size: 15px; color: #1A237E; text-transform: uppercase; }
.kp-teks .kp-desk { font-size: 11.5px; color: #1E88E5; text-transform: uppercase; }
.kp-teks .kp-alamat { font-size: 10.5px; font-weight: 400; color: #334155; margin-top: 2px; }
.kp-garis { margin-top: 10px; border-top: 3px double #1A237E; }
.kop-preview.tanpa-garis .kp-garis { display: none; }
.kop-preview.tanpa-garis .kp-foot { border-top: none; padding-top: 0; }
.kop-preview.tanpa-garis-foot .kp-foot { border-top: none; padding-top: 0; }
.kp-foot { margin-top: 12px; border-top: 1.5px solid #1A237E; padding-top: 4px; display: flex; gap: 10px; justify-content: space-between; align-items: center; font-size: 9.5pt; color: #334155; }
.kp-foot.alamat-kiri { justify-content: flex-start; }
.kp-foot.kop-a .falamat { max-width: 54%; font-size: 8.5pt; }
.kp-foot .flogo-head { height: 26px; max-width: 65px; object-fit: contain; flex-shrink: 0; }
.kp-foot .hal { margin-left: auto; }
.kp-foot .flogo-ph { width: 29px; height: 29px; border: 1px solid #1A237E; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 8.5pt; font-weight: 700; flex-shrink: 0; color: #1A237E; }
/* Pratinjau kop: mode garis off (pengaturan firma) + edit inline */
.kop-preview.kop-garis-off .kp-garis { display: none; }
.kop-preview.kop-garis-off .kp-foot { border-top: none; padding-top: 0; }
.kop-preview [contenteditable] { outline: none; border-radius: 4px; cursor: text; transition: box-shadow var(--transition), background var(--transition); }
.kop-preview [contenteditable]:hover { box-shadow: 0 0 0 1.5px var(--primary-bg); }
.kop-preview [contenteditable]:focus { box-shadow: 0 0 0 2px var(--primary); background: var(--primary-bg); }

@media (max-width: 576px) {
  .topbar .brand span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stepper { top: 52px; }
  .step .lbl { font-size: 10px; }
  .step .dot { width: 28px; height: 28px; font-size: 12px; }
  .step + .step::before { top: 14px; }
  .top-navbar .page-title { font-size: 14px; }
  .table th, .table td { padding: 10px 12px; font-size: 12.5px; }
  .btn.small { min-height: 36px; }
  .step-title h2 { font-size: 14px; }
  .poin-item { gap: 6px; }
  .poin-item .num { min-width: 16px; font-size: 12.5px; padding-top: 11px; }
  .poin-item textarea { min-height: 56px; }
  .ttd-chip { padding: 7px 10px; }
  .ttd-chip .who b { font-size: 13px; }
}
@media (hover: none) and (pointer: coarse) {
  .btn, .btn.small { min-height: 38px; }
}
/* ============================================================
   DARK MODE — pola tema SAP (toggle via body.dark, tersimpan di localStorage)
   ============================================================ */
body.dark {
  --primary-bg: rgba(66, 165, 245, 0.14);
  --gray-50: #1B2537;
  --gray-100: #171E2E;
  --gray-200: #2A3650;
  --gray-300: #3B4A6B;
  --gray-400: #8A99B8;
  --gray-500: #A5B2CC;
  --gray-600: #C0CADF;
  --gray-700: #D6DDEC;
  --gray-800: #E8ECF4;
  --gray-900: #F4F6FB;
  --dark: #0F172A;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --card-shadow-hover: 0 8px 30px rgba(66, 165, 245, 0.18), 0 2px 8px rgba(0,0,0,0.35);
  color-scheme: dark;
}
body.dark { background: var(--gray-100); color: var(--gray-800); }
body.dark ::-webkit-scrollbar-thumb { background: var(--gray-300); }
body.dark .card,
body.dark .table-wrap,
body.dark .mini-stat,
body.dark .footer,
body.dark .navbar-user,
body.dark .input-sm,
body.dark .btn { background: var(--gray-50); color: var(--gray-800); }
body.dark .ttd-chip { background: var(--gray-100); border-color: var(--gray-300); }
body.dark .ttd-chip.picked { background: var(--primary-bg); border-color: #64B5F6; box-shadow: 0 0 0 3px var(--primary-bg); }
body.dark .anggota-form .field input,
body.dark .anggota-form .field select,
body.dark .anggota-form .field textarea { background: var(--gray-50); }
body.dark .btn { border-color: var(--gray-300); }
body.dark .btn:hover { background: var(--gray-100); color: var(--gray-900); }
body.dark .card:hover,
body.dark .mini-stat:hover { box-shadow: var(--card-shadow-hover); }
body.dark .main-content { background: var(--gray-100); }
body.dark .top-navbar {
  background: rgba(23, 30, 46, 0.85);
  border-bottom-color: var(--gray-200);
}
body.dark .field input,
body.dark .field select,
body.dark .field textarea { background: var(--gray-100); color: var(--gray-800); }
body.dark .field input:focus,
body.dark .field select:focus,
body.dark .field textarea:focus { background: var(--gray-50); }
body.dark .table th { background: var(--gray-100); }
body.dark .table tbody tr:hover { background: rgba(66, 165, 245, 0.06); }
body.dark .empty-hint { background: var(--gray-50); }
body.dark .row-act:hover { background: var(--gray-50); }
body.dark .prop-bar { background: var(--gray-200); }
body.dark .badge.draf, body.dark .badge.lainnya, body.dark .badge.ktp, body.dark .badge.surat_kuasa { background: var(--gray-100); color: var(--gray-500); }
body.dark .timeline li::before { border-color: var(--gray-50); }
body.dark .dropzone:hover, body.dark .dropzone.drag { background: var(--primary-bg); }
body.dark .trend.up { background: rgba(76, 175, 80, 0.16); }
body.dark .trend.down { background: rgba(244, 67, 54, 0.16); }
body.dark .radio-card > span { background: var(--gray-50); }
body.dark .radio-card input:checked + span b { color: var(--primary-light); }
body.dark img.avatar { background: var(--gray-200); }

/* Tombol toggle dark mode di top-navbar */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--gray-200); background: #fff;
  cursor: pointer; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--transition); flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--primary); background: var(--primary-bg); transform: rotate(15deg); }
body.dark .theme-toggle { background: var(--gray-100); }

/* ============================================================
   MOBILE — BOTTOM NAVIGATION ala aplikasi SAP (hanya ≤768px)
   Render oleh includes/bottom_nav.php
   ============================================================ */
.bottom-nav { display: none; }
@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 900;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  body.dark .bottom-nav { background: var(--gray-50); box-shadow: 0 -4px 16px rgba(0,0,0,0.4); }
  .bottom-nav a {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 5px 2px; min-height: 44px;
    text-decoration: none; color: var(--gray-400);
    font-size: 10px; font-weight: 600; line-height: 1.2;
    border-radius: 10px; transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav a .ico { font-size: 19px; line-height: 1; font-style: normal; }
  .bottom-nav a span.lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottom-nav a:hover, .bottom-nav a:focus { color: var(--primary); background: var(--primary-bg); }
  .bottom-nav a.active { color: var(--primary); }
  .bottom-nav a.active .ico { transform: translateY(-1px) scale(1.08); }
  /* ruang agar konten terakhir tak tertutup bottom nav */
  body:not(.mode-topbar) .main-content,
  body.mode-keduanya .main-content { padding-bottom: 74px; }
  body.mode-topbar .main-content { padding-bottom: 74px; }
}

@media print {
  .sidebar, .topbar, .top-navbar, .nav-toggle, .nav-backdrop, .btn, .footer, .no-print, .bottom-nav, .theme-toggle { display: none !important; }
  body:not(.mode-topbar) .main-content, body.mode-keduanya .main-content { margin-left: 0 !important; }
  .page-head h1 { display: block; }
  .page-head { justify-content: space-between; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}


/* ==================== INVOICE ==================== */
.inv { max-width: 820px; margin: 0 auto; }
.inv-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.inv-judul { margin: 0 0 4px; letter-spacing: 2px; }
.inv-meta { text-align: right; }
.inv-penerbit { font-size: 16px; }
.inv-pihak { margin-bottom: 14px; }
.inv-tabel tfoot td { font-weight: 500; }
.ta-kanan { text-align: right; }