:root {
    --ocean:  #005AA0; --ocean2: #0077CC;
    --mint:   #00875A; --mint2:  #00A36C;
    --coral:  #E53E3E; --coral2: #FC8181;
    --ink:    #1A202C; --gray:   #718096;
    --border: #E2E8F0; --sky:    #EBF8FF; --sky2: #BEE3F8;
    --white:  #FFFFFF; --bg:     #F7FAFC;
    --r:      12px;    --r-sm:   8px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
         background: var(--bg); color: var(--ink); font-size: 14px; }

  /* ── Login ── */
  #loginScreen { display:flex; align-items:center; justify-content:center;
                 min-height:100vh; background:linear-gradient(135deg,#005AA0,#0077CC); }
  .login-card { background:#fff; border-radius:20px; padding:40px; width:340px;
                box-shadow:0 20px 60px rgba(0,0,0,.2); }
  .login-logo { text-align:center; font-size:40px; margin-bottom:8px; }
  .login-title { text-align:center; font-size:20px; font-weight:900; color:var(--ocean); margin-bottom:4px; }
  .login-sub { text-align:center; font-size:12px; color:var(--gray); margin-bottom:24px; }
  .login-field label { font-size:11px; font-weight:700; color:var(--gray);
                       text-transform:uppercase; display:block; margin-bottom:4px; }
  .login-field input { width:100%; border:1.5px solid var(--border); border-radius:var(--r-sm);
                       padding:10px 12px; font-size:14px; outline:none; margin-bottom:12px; }
  .login-field input:focus { border-color:var(--ocean2); }
  .btn-login { width:100%; background:var(--ocean); color:#fff; border:none;
               border-radius:var(--r-sm); padding:12px; font-size:15px; font-weight:800;
               cursor:pointer; margin-top:4px; }
  .btn-login:hover { background:var(--ocean2); }
  .login-err { color:var(--coral); font-size:12px; margin-top:8px; display:none; text-align:center; }
  .login-err.show { display:block; }

  /* ── App Shell ── */
  #appMain { display:none; }
  .topbar { background:var(--ocean); color:#fff; padding:12px 20px;
            display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:100;
            box-shadow:0 2px 8px rgba(0,90,160,.3); }
  .topbar-logo { font-size:22px; font-weight:900; letter-spacing:-0.5px; }
  .topbar-badge { background:rgba(255,255,255,.2); border-radius:20px;
                  padding:3px 10px; font-size:11px; font-weight:700; }
  .topbar-user { margin-left:auto; font-size:12px; opacity:.85; }
  .topbar-logout { background:rgba(255,255,255,.15); border:none; color:#fff;
                   border-radius:6px; padding:5px 10px; cursor:pointer; font-size:12px; }

  /* ── Nav Tabs ── */
  .nav { background:#fff; border-bottom:2px solid var(--border);
         display:flex; overflow-x:auto; padding:0 16px; gap:4px; }
  .nav-tab { padding:12px 16px; border:none; background:none; cursor:pointer;
             font-size:13px; font-weight:700; color:var(--gray); white-space:nowrap;
             border-bottom:3px solid transparent; margin-bottom:-2px; }
  .nav-tab.active { color:var(--ocean); border-bottom-color:var(--ocean); }
  .nav-tab:hover { color:var(--ocean2); background:var(--sky); border-radius:6px 6px 0 0; }

  /* ── Page Content ── */
  .page { display:none; padding:20px; max-width:1200px; margin:0 auto; }
  .page.active { display:block; }

  /* ── Cards ── */
  .card { background:#fff; border-radius:var(--r); border:1.5px solid var(--border);
          padding:20px; margin-bottom:16px; }
  .card-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
  .card-icon { width:40px; height:40px; border-radius:10px; display:flex;
               align-items:center; justify-content:center; font-size:18px; }
  .card-title { font-size:15px; font-weight:800; }
  .card-sub { font-size:11px; color:var(--gray); margin-top:2px; }

  /* ── Tables ── */
  .tbl { width:100%; border-collapse:collapse; font-size:13px; }
  .tbl th { background:var(--sky2); padding:10px 12px; text-align:left;
            font-size:11px; font-weight:800; text-transform:uppercase;
            letter-spacing:.5px; color:var(--ocean); border-bottom:2px solid var(--border); }
  .tbl td { padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
  .tbl tr:hover td { background:var(--sky); }
  .tbl-wrap { overflow-x:auto; border:1.5px solid var(--border); border-radius:var(--r-sm); }

  /* ── Forms ── */
  .field { margin-bottom:14px; }
  .field label { display:block; font-size:11px; font-weight:700; color:var(--gray);
                 text-transform:uppercase; margin-bottom:5px; }
  .field input, .field select, .field textarea {
    width:100%; border:1.5px solid var(--border); border-radius:var(--r-sm);
    padding:9px 12px; font-size:13px; outline:none; font-family:inherit; }
  .field input:focus, .field select:focus, .field textarea:focus { border-color:var(--ocean2); }
  .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

  /* ── Buttons ── */
  .btn { border:none; border-radius:var(--r-sm); padding:9px 16px; font-size:13px;
         font-weight:700; cursor:pointer; }
  .btn-ocean  { background:var(--ocean);  color:#fff; }
  .btn-mint   { background:var(--mint2);  color:#fff; }
  .btn-gray   { background:var(--border); color:var(--ink); }
  .btn-danger { background:#fee2e2; color:var(--coral); border:1.5px solid var(--coral2); }
  .btn:hover  { opacity:.88; }

  /* ── Badges ── */
  .badge { display:inline-block; border-radius:20px; padding:3px 10px;
           font-size:11px; font-weight:700; }
  .badge-tetap  { background:#eff6ff; color:var(--ocean); }
  .badge-retail { background:#f0fdf4; color:var(--mint);  }
  .badge-udara  { background:#fef3f2; color:#dc2626; }
  .badge-laut   { background:#eff6ff; color:var(--ocean); }
  .badge-darat        { background:#fef9ee; color:#b45309; }
  .badge-laut_express { background:#fff7ed; color:#c2410c; font-weight:900; }

  /* ── Modal ── */
  .modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
              z-index:500; align-items:center; justify-content:center; padding:20px; }
  .modal-bg.open { display:flex; }
  .modal { background:#fff; border-radius:var(--r); padding:24px; width:100%;
           max-width:520px; max-height:90vh; overflow-y:auto;
           box-shadow:0 20px 60px rgba(0,0,0,.25); }
  .modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
  .modal-title { font-size:16px; font-weight:900; }
  .modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--gray); }

  /* ── Toast ── */
  #toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
           background:#1A202C; color:#fff; padding:10px 20px; border-radius:20px;
           font-size:13px; font-weight:700; opacity:0; transition:opacity .3s;
           z-index:1000; pointer-events:none; white-space:nowrap; }
  #toast.show { opacity:1; }
  #toast.success { background:var(--mint2); }
  #toast.error   { background:var(--coral); }
  #toast.warning { background:#f59e0b; }

  /* ── Rate inline edit ── */
  .rate-input { width:100%; border:1.5px solid var(--border); border-radius:6px;
                padding:5px 8px; font-size:12px; text-align:right; }
  .rate-input:focus { border-color:var(--ocean2); outline:none; }

  /* ── Empty state ── */
  .empty { text-align:center; padding:32px 20px; color:var(--gray); }
  .empty-ico { font-size:36px; margin-bottom:8px; }

  /* ── Form stepper (SJ) ── */
  .step-tabs { display:flex; gap:0; margin-bottom:16px;
               border:1.5px solid var(--border); border-radius:var(--r); overflow:hidden; }
  .step-tab  { flex:1; padding:11px 6px; text-align:center; font-size:13px; font-weight:700;
               background:var(--bg); color:var(--gray); border:none; cursor:pointer;
               border-right:1px solid var(--border); }
  .step-tab:last-child { border-right:none; }
  .step-tab.active { background:var(--ocean); color:#fff; }
  .step-pane { display:none; }
  .step-pane.active { display:block; }

  /* ── pdfme Template Sidebar ── */
  .pdtmpl-item {
    display:flex; align-items:center; gap:7px; padding:8px 12px;
    font-size:12px; cursor:pointer; border-bottom:1px solid #f5f5f5;
    transition:background .12s; user-select:none;
  }
  .pdtmpl-item:hover  { background:#f0f7ff; }
  .pdtmpl-item.selected { background:#eff6ff; font-weight:700; }
  .pdtmpl-dot {
    width:8px; height:8px; border-radius:50%; flex-shrink:0;
    background:#d1d5db; border:1.5px solid #9ca3af;
  }
  .pdtmpl-dot.active { background:#22c55e; border-color:#16a34a; }
  .pdtmpl-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pdtmpl-badge {
    font-size:9px; font-weight:800; color:#16a34a; background:#dcfce7;
    padding:1px 6px; border-radius:10px; white-space:nowrap;
  }

  /* ── SQL Editor ── */
  .sql-result-table { width:100%; border-collapse:collapse; font-size:12px; font-family:'Courier New',monospace; }
  .sql-result-table th { background:#1e293b; color:#94a3b8; font-weight:700;
    padding:7px 10px; text-align:left; white-space:nowrap; }
  .sql-result-table td { padding:6px 10px; border-bottom:1px solid var(--border);
    white-space:nowrap; max-width:280px; overflow:hidden; text-overflow:ellipsis; }
  .sql-result-table tr:hover td { background:var(--sky); }
  .sql-result-wrap { overflow-x:auto; border-radius:8px; border:1.5px solid var(--border); }
  .sql-msg-ok  { background:#f0fdf4; border:1.5px solid #bbf7d0; border-radius:8px;
    padding:12px 16px; color:#166534; font-size:13px; }
  .sql-msg-err { background:#fef2f2; border:1.5px solid #fecaca; border-radius:8px;
    padding:12px 16px; color:#991b1b; font-size:13px; font-family:monospace; white-space:pre-wrap; }
  .sql-hist-item { background:var(--bg); border:1px solid var(--border); border-radius:8px;
    padding:8px 12px; cursor:pointer; font-family:monospace; font-size:11px;
    color:#475569; display:flex; align-items:center; gap:8px; }
  .sql-hist-item:hover { border-color:var(--ocean2); background:var(--sky); color:var(--ocean); }
  .db-stat-card { background:var(--bg); border:1.5px solid var(--border); border-radius:10px;
    padding:14px; display:flex; flex-direction:column; gap:4px; }
  .db-stat-name { font-size:11px; font-weight:700; color:var(--gray); text-transform:uppercase; letter-spacing:.3px; }
  .db-stat-count { font-size:22px; font-weight:900; color:var(--ocean); line-height:1; }
  .db-stat-meta { font-size:10px; color:var(--gray); }

  /* ── Sticky submit ── */
  .sticky-submit { position:sticky; bottom:0; background:#fff;
                   padding:12px 0 8px; border-top:1.5px solid var(--border);
                   margin-top:16px; }

  /* ── Section label ── */
  .sec-label { font-size:11px; font-weight:900; color:var(--ocean);
               text-transform:uppercase; letter-spacing:.6px;
               margin-bottom:10px; margin-top:4px; }

  /* ── Photo Gallery ── */
  .foto-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; margin-top:8px; }
  .foto-thumb { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px;
                cursor:pointer; border:2px solid transparent; transition:.15s; }
  .foto-thumb:hover { border-color:var(--ocean2); transform:scale(1.03); }

  /* ── Upload Zone ── */
  .upload-zone { border:2px dashed var(--border); border-radius:var(--r); padding:20px 12px;
                 text-align:center; cursor:pointer; color:var(--gray); font-size:13px; transition:.2s; }
  .upload-zone:hover { border-color:var(--ocean2); background:var(--sky); color:var(--ocean); }
  .upload-zone input[type=file] { display:none; }

  /* ── Status Badge colors ── */
  .status-aktif        { background:#f0fdf4; color:var(--mint); }
  .status-termanifest  { background:#eff6ff; color:var(--ocean); font-weight:900; }
  .status-selesai      { background:#e0f2fe; color:#0369a1; }
  .status-gagal-kirim  { background:#fee2e2; color:var(--coral); }
  .status-batal        { background:#f1f5f9; color:var(--gray); }

  /* ── Print ── */
  @media print {
    #loginScreen, .topbar, .nav, #toast, .modal-bg,
    .btn, button { display:none !important; }
    body { background:#fff !important; }
    .page { display:block !important; padding:0 !important; max-width:100% !important; }
  }

  /* ── SJ Detail info grid ── */
  .sj-info-grid { display:grid; grid-template-columns:90px 1fr; gap:0; margin-bottom:16px; }
  .sj-info-lbl  { font-size:11px; font-weight:700; color:var(--gray); padding:5px 0;
                  border-bottom:1px solid var(--border); white-space:nowrap; }
  .sj-info-val  { font-size:13px; padding:5px 0; border-bottom:1px solid var(--border); }
  .sj-sec-title { font-size:11px; font-weight:900; color:var(--ocean); margin-bottom:8px;
                  text-transform:uppercase; letter-spacing:.5px; }
  .sj-detail-skeleton { padding:24px 0; text-align:center; color:var(--gray); font-size:13px; }

  /* ── Manifest ── */
  .mf-card { background:#fff;border:1.5px solid var(--border);border-radius:10px;
             padding:14px;margin-bottom:8px;display:flex;gap:12px;align-items:flex-start;
             cursor:pointer;transition:.15s; }
  .mf-card:hover { border-color:var(--ocean2);background:var(--sky); }
  .mf-card.mf-selected { border-color:var(--ocean2);background:var(--sky); }
  .mf-check { width:20px;height:20px;cursor:pointer;accent-color:var(--ocean2);
              flex-shrink:0;margin-top:2px; }
  .mf-sel-bar { position:sticky;bottom:0;background:#fff;
                border-top:2px solid var(--ocean2);padding:12px;z-index:50;
                box-shadow:0 -4px 16px rgba(0,90,160,.12); }
  .badge-draft    { background:#f1f5f9;color:#64748b; }
  .badge-terkirim { background:#eff6ff;color:var(--ocean); }
  .badge-selesai  { background:#f0fdf4;color:var(--mint); }

  /* ── Invoice ── */
  .inv-card { background:#fff;border:1.5px solid var(--border);border-radius:10px;
              padding:14px;margin-bottom:8px;cursor:pointer;transition:.15s; }
  .inv-card:hover { border-color:var(--ocean2);background:var(--sky); }
  .badge-lunas    { background:#f0fdf4;color:var(--mint);font-weight:900; }
  .badge-terkirim-inv { background:#eff6ff;color:var(--ocean); }
  .badge-draft-inv    { background:#f1f5f9;color:#64748b; }

  /* ── Invoice Summary Dashboard ── */
  .inv-summary-row {
    display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap; align-items:stretch;
  }
  .inv-sum-card {
    flex:1; min-width:140px;
    background:#fff; border-radius:12px;
    border:1.5px solid var(--border);
    border-left-width:4px;
    padding:14px 16px;
    display:flex; align-items:center; gap:12px;
  }
  .inv-sum-pending { border-left-color:#f59e0b; }
  .inv-sum-piutang { border-left-color:#ef4444; }
  .inv-sum-lunas   { border-left-color:#22c55e; }
  .inv-sum-icon    { font-size:22px; flex-shrink:0; }
  .inv-sum-body    { min-width:0; }
  .inv-sum-label   { font-size:10px; color:var(--gray); margin-bottom:2px;
                     text-transform:uppercase; letter-spacing:.4px; }
  .inv-sum-value   { font-size:15px; font-weight:900; color:var(--dark);
                     white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .inv-sum-sub     { font-size:10px; color:var(--gray); margin-top:2px; }
  /* Kartu bisa diklik */
  .inv-sum-card    { cursor:pointer; transition:transform .12s, box-shadow .12s; }
  .inv-sum-card:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.08); }
  .inv-sum-card:active { transform:translateY(0); }
  .inv-sum-card.inv-sum-active { box-shadow:0 0 0 3px rgba(0,90,160,.25); }

  /* ── Config ── */
  .user-row { display:flex;align-items:center;gap:12px;padding:12px 0;
              border-bottom:1px solid var(--border); }
  .user-avatar { width:36px;height:36px;border-radius:50%;background:var(--ocean);
                 color:#fff;display:flex;align-items:center;justify-content:center;
                 font-weight:900;font-size:15px;flex-shrink:0; }
  .user-info { flex:1;min-width:0; }
  .user-name { font-weight:700;font-size:13px; }
  .user-email { font-size:11px;color:var(--gray); }
  .role-badge { border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700; }
  .role-superuser     { background:#fef3c7;color:#92400e; }
  .role-administrator { background:#eff6ff;color:var(--ocean); }
  .role-manager       { background:#f3e8ff;color:#7c3aed; }
  .role-operasional   { background:#f0fdf4;color:var(--mint); }
  /* backward compat */
  .role-admin         { background:#eff6ff;color:var(--ocean); }
  .role-operator      { background:#f0fdf4;color:var(--mint); }

  /* ── SMU ── */
  .smu-card { background:#fff;border:1.5px solid var(--border);border-radius:10px;
              padding:14px;margin-bottom:8px;cursor:pointer;transition:.15s; }
  .smu-card:hover { border-color:var(--ocean2);background:var(--sky); }
  .status-menunggu   { background:#fff7ed;color:#c2410c; }
  .status-diambil    { background:#f0fdf4;color:var(--mint); }
  .status-kadaluarsa { background:#f1f5f9;color:var(--gray); }

  /* ── Admin-only tabs (hidden from operator) ── */
  .admin-tab    { display:none; }
  /* ── Operator tabs (hidden until role terdeteksi) ── */
  .operator-tab { display:none; }

  /* ── Terima Barang – Camera-first flow ── */
  .terima-cam-card { background:#1A202C; border-radius:16px; padding:20px;
                     text-align:center; margin-bottom:12px; min-height:200px;
                     display:flex; align-items:center; justify-content:center; }
  .terima-cam-btn  { background:var(--mint); color:#fff; border:none; border-radius:10px;
                     padding:14px 28px; font-size:15px; font-weight:800; cursor:pointer; }
  .terima-cam-btn:active { opacity:.85; }
  #terimaPhotoImg  { width:100%; border-radius:12px; display:block; }
  #terimaQRArea    { margin-bottom:12px; }
  #terimaQRReader  { border-radius:0 0 12px 12px; overflow:hidden; }
  #terimaQRReader video { width:100% !important; }
  /* Confirm bottom sheet */
  #terimaConfirmBg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:200; }
  #terimaConfirmSheet { position:absolute; bottom:0; left:0; right:0; background:#fff;
                        border-radius:20px 20px 0 0; padding:20px;
                        transform:translateY(100%);
                        transition:transform .35s cubic-bezier(.32,1,.45,1);
                        max-height:85vh; overflow-y:auto;
                        padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  /* ── Jadwal Ambil page ── */
  .jadwal-card { background:#fff; border:1.5px solid var(--border); border-radius:12px;
                 padding:14px 16px; margin-bottom:10px; }
  .jadwal-section-label { font-weight:700; font-size:11px; color:var(--gray);
                          text-transform:uppercase; letter-spacing:.6px; margin:14px 0 8px; }

  /* ── Config: Grup Telegram ── */
  .cfg-grup-item { display:flex; align-items:center; gap:10px; background:var(--sky);
                   border:1.5px solid var(--border); border-radius:var(--r-sm);
                   padding:10px 13px; margin-bottom:8px; transition:.15s; }
  .cfg-grup-item:hover { border-color:var(--ocean2); }
  .cfg-gname { flex:1; font-weight:700; font-size:13px; }
  .cfg-gid   { font-size:10px; font-weight:700; color:var(--gray);
               background:var(--border); padding:2px 7px; border-radius:20px; }

  /* ── Mobile ── */
  @media(max-width:640px) {
    .grid-2, .grid-3 { grid-template-columns:1fr; }
    .page { padding:10px; }
    .card { padding:14px; }
    .nav-tab { font-size:12px; padding:10px 10px; }
    .topbar-logo { font-size:18px; }
    .step-tab { font-size:12px; padding:10px 4px; }
    .tbl { font-size:11px; }
    .tbl th, .tbl td { padding:7px 6px; }
  }

  /* ── Tablet / Landscape ── */
  @media (orientation: landscape) and (max-height: 600px) {
    /* Topbar lebih ramping */
    .topbar { padding:7px 16px; }
    .topbar-logo { font-size:18px; }
    /* Nav tabs lebih rapat */
    .nav { padding:0 10px; gap:2px; }
    .nav-tab { padding:8px 12px; font-size:12px; }
    /* Konten lebih padat */
    .page { padding:10px 16px; }
    .card { padding:14px; margin-bottom:10px; }
    /* Step tabs (sub-tabs) */
    .step-tab { padding:8px 10px; font-size:12px; }
    /* Tabel lebih padat */
    .tbl th, .tbl td { padding:7px 10px; }
  }