/* ══════════════════════════════════════════════════════════════
   Seamons Dealer Portal  –  portal.css  v4.0  (Modern Light Theme)
══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Outfit:wght@400;500;600;700;800&display=swap');

:root{
  /* Brand — modern indigo/violet, fresh light-theme accent */
  --g1:#4f46e5; --g2:#6366f1; --g3:#818cf8; --gl:#eef2ff; --gp:#f6f7ff;
  --gold:#d97706; --gold-l:#fffbeb;
  --w:#fff;
  /* Neutrals — modern slate scale */
  --gr50:#f8fafc; --gr100:#f1f5f9; --gr200:#e2e8f0;
  --gr300:#cbd5e1; --gr400:#94a3b8; --gr500:#64748b;
  --gr600:#475569; --gr700:#334155; --gr800:#1e293b; --gr900:#0f172a;
  --red:#e11d48; --blue:#3b82f6; --orange:#f59e0b;
  --nav-h:60px;
  --r:12px; --rl:18px;
  --sh1:0 1px 3px rgba(15,23,42,.07),0 1px 2px rgba(15,23,42,.05);
  --sh2:0 8px 24px rgba(79,70,229,.10),0 2px 6px rgba(15,23,42,.05);
  --sh3:0 24px 56px rgba(15,23,42,.18),0 6px 16px rgba(79,70,229,.10);
  --sh-brand:0 8px 24px rgba(79,70,229,.24);
  --font:'Inter',sans-serif;
  --font2:'Outfit',sans-serif;
  --ease:cubic-bezier(.34,1.25,.64,1);

  /* Sidebar — clean light theme, soft indigo tints */
  --sb-bg:#ffffff; --sb-bg2:#f7f8ff; --sb-text:#5b6472; --sb-text-dim:#9aa3b2;
  --sb-border:#eef0f9; --sb-hover:#eef2ff; --sb-active:#6366f1;
}

/* ── Base ──────────────────────────────────────────────────────── */
#sdaf-portal,#sdaf-portal *,#sdaf-portal *::before,#sdaf-portal *::after{box-sizing:border-box;margin:0;padding:0}
#sdaf-portal{font-family:var(--font);color:var(--gr800);min-height:100vh;background:var(--gr50)}

/* ── Screens ───────────────────────────────────────────────────── */
.sdaf-screen{display:none}
.sdaf-screen-active{display:block}

/* ══════════════════════════════════════════════════════════════
   LOGIN SCREEN
══════════════════════════════════════════════════════════════ */
#sdaf-login-screen{
  min-height:100vh;
  background:linear-gradient(135deg,var(--g1) 0%,#0d3b0d 40%,#1a3a2a 100%);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.sdaf-login-card{
  background:var(--w);border-radius:20px;
  padding:44px 40px;width:100%;max-width:420px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.sdaf-login-brand{text-align:center;margin-bottom:32px}
.sdaf-login-logo{font-size:52px;margin-bottom:10px}
.sdaf-login-brand h1{font-family:var(--font2);font-size:1.6em;color:var(--g1);font-weight:700}
.sdaf-login-brand p{color:var(--gr500);font-size:.9em;margin-top:4px}

.sdaf-form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.sdaf-form-group label{font-size:13px;font-weight:600;color:var(--gr600)}
.sdaf-form-group input,.sdaf-form-group select,.sdaf-form-group textarea{
  border:1.5px solid var(--gr200);border-radius:var(--r);
  padding:11px 14px;font-family:var(--font);font-size:14px;
  color:var(--gr800);background:var(--gr50);outline:none;
  transition:border-color .2s,box-shadow .2s;width:100%;
}
.sdaf-form-group input:focus,.sdaf-form-group select:focus{
  border-color:var(--g2);background:var(--w);
  box-shadow:0 0 0 3px rgba(99,102,241,.14);
}
.sdaf-pw-wrap{position:relative}
.sdaf-pw-wrap input{padding-right:44px}
.sdaf-toggle-pw{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;font-size:16px;padding:0;
}
.sdaf-login-hint{text-align:center;font-size:12px;color:var(--gr400);margin-top:20px}

/* ── Alerts ────────────────────────────────────────────────────── */
.sdaf-alert{
  padding:11px 14px;border-radius:var(--r);font-size:13px;font-weight:500;
  margin-bottom:14px;
}
.sdaf-alert-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.sdaf-alert-success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.sdaf-alert-info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}

/* ══════════════════════════════════════════════════════════════
   TOP NAV
══════════════════════════════════════════════════════════════ */
.sdaf-nav{
  position:sticky;top:0;z-index:100;
  height:var(--nav-h);
  background:linear-gradient(135deg,var(--g1),#0f3f0f);
  display:flex;align-items:center;gap:0;
  padding:0 20px;box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.sdaf-nav-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-right:28px}
.sdaf-nav-logo{font-size:22px}
.sdaf-nav-title{font-family:var(--font2);font-size:.95em;font-weight:700;color:rgba(255,255,255,.95);white-space:nowrap}
.sdaf-nav-tabs{display:flex;gap:4px;flex:1}
.sdaf-nav-tab{
  padding:8px 16px;border-radius:8px;background:transparent;border:none;
  color:rgba(255,255,255,.7);font-family:var(--font);font-size:13px;font-weight:600;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.sdaf-nav-tab:hover{background:rgba(255,255,255,.12);color:#fff}
.sdaf-nav-tab.active{background:rgba(255,255,255,.2);color:#fff}
.sdaf-nav-user{display:flex;align-items:center;gap:10px;flex-shrink:0}
.sdaf-user-avatar{
  width:34px;height:34px;border-radius:50%;background:var(--g3);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:#fff;flex-shrink:0;
}
.sdaf-user-info{display:flex;flex-direction:column;line-height:1.2}
.sdaf-user-name{font-size:13px;font-weight:600;color:#fff}
.sdaf-user-role{font-size:11px;color:rgba(255,255,255,.6)}

/* ── Buttons ───────────────────────────────────────────────────── */
.sdaf-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 20px;border-radius:var(--r);border:none;
  font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;
  transition:all .2s;text-decoration:none;
}
.sdaf-btn:disabled{opacity:.55;cursor:not-allowed}
.sdaf-btn-sm{padding:7px 14px;font-size:13px}
.sdaf-btn-block{width:100%;justify-content:center;padding:13px}
.sdaf-btn-primary{background:linear-gradient(135deg,var(--g2),var(--g1));color:#fff;box-shadow:0 2px 8px rgba(79,70,229,.3)}
.sdaf-btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 14px rgba(79,70,229,.4)}
.sdaf-btn-ghost{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.25)}
.sdaf-btn-ghost:hover:not(:disabled){background:rgba(255,255,255,.25)}
.sdaf-btn-outline{background:transparent;color:var(--gr600);border:1.5px solid var(--gr300)}
.sdaf-btn-outline:hover:not(:disabled){background:var(--gr100)}
.sdaf-btn-danger{background:#dc3545;color:#fff}
.sdaf-btn-danger:hover:not(:disabled){background:#b91c1c}
.sdaf-btn-success{background:linear-gradient(135deg,#28a745,#1a6e30);color:#fff;padding:13px 32px;font-size:15px;box-shadow:0 3px 10px rgba(40,167,69,.35)}
.sdaf-btn-success:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 16px rgba(40,167,69,.4)}
.sdaf-btn-warn{background:#f59e0b;color:#fff}
.sdaf-btn-warn:hover{background:#d97706}

/* ── Spinner ───────────────────────────────────────────────────── */
.sdaf-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
.sdaf-spinner-lg{display:block;width:32px;height:32px;border:3px solid var(--gr200);border-top-color:var(--g2);border-radius:50%;animation:spin .7s linear infinite;margin:20px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════════════════════════
   VIEWS CONTAINER
══════════════════════════════════════════════════════════════ */
.sdaf-views{padding:24px;max-width:1200px;margin:0 auto}
.sdaf-view{display:none}
.sdaf-view.active{display:block;animation:fadein .3s ease}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.sdaf-view-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:24px;flex-wrap:wrap;gap:12px;
}
.sdaf-view-header h2{font-family:var(--font2);font-size:1.4em;color:var(--gr900)}
.sdaf-view-header p{color:var(--gr500);font-size:.9em;margin-top:2px}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD  ──  Stats
══════════════════════════════════════════════════════════════ */
.sdaf-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.sdaf-stat-card{
  background:var(--w);border-radius:var(--rl);padding:20px 22px;
  display:flex;align-items:center;gap:16px;box-shadow:var(--sh1);
  border:1px solid var(--gr200);
}
.sdaf-stat-icon{font-size:32px;flex-shrink:0}
.sdaf-stat-num{font-size:2.2em;font-weight:800;font-family:var(--font2);line-height:1}
.sdaf-stat-label{font-size:12px;color:var(--gr500);font-weight:600;margin-top:3px}
.sdaf-stat-total .sdaf-stat-num{color:var(--gr800)}
.sdaf-stat-done  .sdaf-stat-num{color:var(--g2)}
.sdaf-stat-draft .sdaf-stat-num{color:var(--orange)}

/* ── Table Toolbar ─────────────────────────────────────────────── */
.sdaf-table-toolbar{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sdaf-search-box{
  flex:1;min-width:220px;padding:9px 14px;border:1.5px solid var(--gr200);
  border-radius:var(--r);font-family:var(--font);font-size:14px;outline:none;
}
.sdaf-search-box:focus{border-color:var(--g2);box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.sdaf-filter-sel{
  padding:9px 14px;border:1.5px solid var(--gr200);border-radius:var(--r);
  font-family:var(--font);font-size:14px;outline:none;background:var(--w);cursor:pointer;
}

/* ── Tables ────────────────────────────────────────────────────── */
.sdaf-table-wrap{
  background:var(--w);border-radius:var(--rl);overflow:hidden;
  box-shadow:var(--sh1);border:1px solid var(--gr200);overflow-x:auto;
}
.sdaf-table{width:100%;border-collapse:collapse;min-width:900px}
.sdaf-table thead tr{background:linear-gradient(135deg,var(--g1),#0f3f0f)}
.sdaf-table th{
  padding:12px 14px;font-size:12px;font-weight:700;
  color:rgba(255,255,255,.9);text-align:left;white-space:nowrap;
}
.sdaf-table td{padding:12px 14px;font-size:13px;border-bottom:1px solid var(--gr100);vertical-align:middle}
.sdaf-table tbody tr:hover{background:var(--gp)}
.sdaf-table tbody tr:last-child td{border-bottom:none}
.sdaf-table-empty{text-align:center;padding:40px;color:var(--gr400)}

/* Status badge */
.sdaf-badge{
  display:inline-block;padding:3px 10px;border-radius:20px;
  font-size:11px;font-weight:700;white-space:nowrap;
}
.sdaf-badge-completed{background:#dcfce7;color:#166534}
.sdaf-badge-draft{background:#fef9c3;color:#854d0e}

/* Step indicator */
.sdaf-step-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:var(--g3);color:#fff;font-size:11px;font-weight:700;
}

/* Action buttons in table */
.sdaf-tbl-actions{display:flex;gap:6px;flex-wrap:wrap}
.sdaf-tbl-btn{
  padding:5px 10px;border-radius:6px;font-size:11px;font-weight:600;
  border:none;cursor:pointer;transition:all .2s;
}
.sdaf-tbl-btn-view{background:var(--gl);color:var(--g1)}
.sdaf-tbl-btn-view:hover{background:var(--g3);color:#fff}
.sdaf-tbl-btn-del{background:#fee2e2;color:#991b1b}
.sdaf-tbl-btn-del:hover{background:var(--red);color:#fff}

/* ══════════════════════════════════════════════════════════════
   FORM VIEW  ──  Progress bar
══════════════════════════════════════════════════════════════ */
.sdaf-progress-bar{
  background:var(--w);border:1px solid var(--gr200);border-radius:var(--rl);
  padding:18px 20px;margin-bottom:20px;
  display:flex;align-items:center;overflow-x:auto;box-shadow:var(--sh1);
}
.sdaf-pb-step{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0}
.sdaf-pb-dot{
  width:40px;height:40px;border-radius:50%;border:2px solid var(--gr200);
  background:var(--gr100);display:flex;align-items:center;justify-content:center;
  font-size:16px;transition:all .3s;
}
.sdaf-pb-label{font-size:10px;font-weight:700;color:var(--gr400);white-space:nowrap;transition:color .3s}
.sdaf-pb-line{flex:1;height:2px;background:var(--gr200);margin:0 6px;margin-bottom:22px;transition:background .3s}
.sdaf-pb-step.active .sdaf-pb-dot{background:var(--g2);border-color:var(--g2);box-shadow:0 0 0 4px rgba(99,102,241,.18)}
.sdaf-pb-step.active .sdaf-pb-label{color:var(--g2)}
.sdaf-pb-step.done .sdaf-pb-dot{background:var(--gl);border-color:var(--g3)}
.sdaf-pb-step.done .sdaf-pb-label{color:var(--g3)}
.sdaf-pb-line.done{background:var(--g3)}

/* ── Panel ─────────────────────────────────────────────────────── */
.sdaf-panel{display:none;background:var(--w);border-radius:var(--rl);box-shadow:var(--sh2);overflow:hidden;border:1px solid var(--gr200);animation:fadein .35s ease}
.sdaf-panel.active{display:block}
.sdaf-panel-hd{
  display:flex;align-items:center;gap:14px;padding:22px 26px;
  background:linear-gradient(135deg,var(--g1),#0f3f0f);color:#fff;
}
.sdaf-panel-hd span{font-size:32px;flex-shrink:0}
.sdaf-panel-hd h3{font-size:1.15em;font-weight:700;margin-bottom:3px}
.sdaf-panel-hd p{font-size:.83em;opacity:.85}
.sdaf-panel-foot{
  display:flex;justify-content:flex-end;gap:10px;
  padding:18px 24px;border-top:1px solid var(--gr100);background:var(--gr50);
}

/* ── Fields ────────────────────────────────────────────────────── */
.sdaf-flds{display:flex;flex-wrap:wrap;gap:14px;padding:24px}
.sdaf-fg{display:flex;flex-direction:column;gap:5px;flex:1 1 100%}
.sdaf-half{flex:1 1 calc(50% - 7px);min-width:200px}
.sdaf-third{flex:1 1 calc(33% - 10px);min-width:170px}
.sdaf-fg label{font-size:13px;font-weight:600;color:var(--gr600)}
.sdaf-fg input,.sdaf-fg select,.sdaf-fg textarea{
  border:1.5px solid var(--gr200);border-radius:8px;padding:10px 13px;
  font-family:var(--font);font-size:14px;color:var(--gr800);
  background:var(--gr50);outline:none;transition:border-color .2s,box-shadow .2s;width:100%;
}
.sdaf-fg input:focus,.sdaf-fg select:focus,.sdaf-fg textarea:focus{
  border-color:var(--g2);background:var(--w);box-shadow:0 0 0 3px rgba(99,102,241,.12);
}
.sdaf-fg textarea{resize:vertical;min-height:80px}
.req{color:var(--red);margin-left:2px}

/* ── Sub-titles in form ────────────────────────────────────────── */
.sdaf-sub-title{
  width:100%;padding:9px 14px;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.07em;color:var(--g1);
  background:var(--gl);border-left:4px solid var(--g2);border-radius:0 6px 6px 0;
}

/* ── Radios & Checks ───────────────────────────────────────────── */
.sdaf-radios,.sdaf-checks{display:flex;flex-wrap:wrap;gap:8px}
.sdaf-radio-opt,.sdaf-chk{
  display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;
  padding:7px 13px;border-radius:8px;border:1.5px solid var(--gr200);
  background:var(--gr50);transition:all .2s;
}
.sdaf-radio-opt:hover,.sdaf-chk:hover{border-color:var(--g2);background:var(--gp)}
.sdaf-radio-opt input,.sdaf-chk input{accent-color:var(--g2)}

/* ── Repeat rows ───────────────────────────────────────────────── */
.sdaf-repeat{display:flex;align-items:flex-start;gap:12px;padding:14px 24px;border-bottom:1px solid var(--gr100)}
.sdaf-repeat-badge{
  width:26px;height:26px;border-radius:50%;background:var(--g2);color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:22px;
}
.sdaf-flds-row{flex-direction:row;flex-wrap:nowrap;padding:0;gap:10px;flex:1}
@media(max-width:700px){.sdaf-flds-row{flex-wrap:wrap}}

/* ── Declaration note ──────────────────────────────────────────── */
.sdaf-decl-note{
  background:var(--gold-l);border:1px solid var(--gold);border-radius:var(--r);
  padding:16px 22px;font-size:13.5px;line-height:1.7;color:var(--gr600);
  margin:20px 24px 0;
}

/* ── Signature Grid ────────────────────────────────────────────── */
.sdaf-sig-hint{
  margin:16px 24px 0;padding:11px 16px;
  background:var(--gold-l);border:1px solid var(--gold);border-radius:var(--r);
  font-size:13px;color:var(--gr600);
}
.sdaf-sig-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));
  gap:14px;padding:20px 24px;
}
.sdaf-sig-card{border:1.5px solid var(--gr200);border-radius:var(--r);overflow:hidden;background:var(--w);transition:box-shadow .2s}
.sdaf-sig-card:hover{box-shadow:var(--sh2)}
.sdaf-sig-card.uploaded{border-color:var(--g3)}
.sdaf-sc-head{
  padding:9px 12px;background:var(--gl);font-size:11.5px;font-weight:700;color:var(--g1);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.sdaf-sc-preview{height:120px;display:flex;align-items:center;justify-content:center;background:var(--gr50);border-bottom:1px solid var(--gr100);overflow:hidden}
.sdaf-sc-preview img{max-width:100%;max-height:100%;object-fit:contain}
.sdaf-sc-empty{text-align:center;color:var(--gr400);font-size:12px;line-height:1.8}
.sdaf-sc-upload{
  display:block;text-align:center;padding:8px;font-size:12px;font-weight:700;
  cursor:pointer;background:var(--gr50);color:var(--g2);
  border-top:1px solid var(--gr100);transition:background .2s;
}
.sdaf-sc-upload:hover{background:var(--gl)}
.sdaf-sc-upload input{display:none}
.sdaf-sc-status{font-size:11px;text-align:center;padding:4px;min-height:20px}
.sdaf-sc-status.ok{color:var(--g2);font-weight:600}
.sdaf-sc-status.err{color:var(--red)}
.sdaf-sc-status.loading{color:var(--gr400)}

/* ── Submit area ───────────────────────────────────────────────── */
.sdaf-submit-area{text-align:center;padding:48px 32px}
.sdaf-submit-icon{font-size:64px;margin-bottom:14px}
.sdaf-submit-area h3{font-size:1.5em;color:var(--g1);margin-bottom:10px}
.sdaf-submit-area p{color:var(--gr500);max-width:440px;margin:0 auto 12px}
.sdaf-app-ref-line{font-size:1.1em;color:var(--g2);font-weight:700}
.sdaf-success-box{
  text-align:center;padding:40px;
  background:linear-gradient(135deg,var(--gl),var(--gp));
  border:2px solid var(--g3);border-radius:var(--rl);
  margin:24px;animation:fadein .4s ease;
}
.sdaf-success-box>div:first-child{font-size:52px;margin-bottom:10px}
.sdaf-success-box h3{color:var(--g1);font-size:1.4em;margin-bottom:8px}
.sdaf-success-box p{color:var(--gr500);margin-bottom:20px}

/* ── Field error highlight ─────────────────────────────────────── */
.sdaf-fg.sdaf-err input,.sdaf-fg.sdaf-err select,.sdaf-fg.sdaf-err textarea{border-color:var(--red)!important;background:#fff5f5!important}
.sdaf-fg.sdaf-err label{color:var(--red)!important}

/* ══════════════════════════════════════════════════════════════
   DETAIL VIEW
══════════════════════════════════════════════════════════════ */
.sdaf-detail-body{background:var(--w);border-radius:var(--rl);border:1px solid var(--gr200);overflow:hidden;box-shadow:var(--sh1)}
.sdaf-detail-section-head{
  background:linear-gradient(135deg,var(--g1),#0f3f0f);color:#fff;
  padding:10px 18px;font-size:13px;font-weight:700;letter-spacing:.03em;
}
.sdaf-detail-table{width:100%;border-collapse:collapse}
.sdaf-detail-table th,.sdaf-detail-table td{padding:10px 16px;font-size:13px;border-bottom:1px solid var(--gr100);vertical-align:top}
.sdaf-detail-table th{background:var(--gp);color:var(--g1);font-weight:600;width:220px;text-align:left}
.sdaf-detail-table tr:last-child td,.sdaf-detail-table tr:last-child th{border-bottom:none}
.sdaf-detail-sigs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:16px}
.sdaf-detail-sig-box{border:1px solid var(--gr200);border-radius:var(--r);overflow:hidden;text-align:center}
.sdaf-detail-sig-lbl{background:var(--gl);color:var(--g1);font-size:11px;font-weight:700;padding:7px}
.sdaf-detail-sig-box img{width:100%;max-height:120px;object-fit:contain;padding:8px}
.sdaf-detail-sig-empty{color:var(--gr400);font-size:12px;padding:20px 8px}
.sdaf-enc-list{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px}
.sdaf-enc-item{font-size:12px;padding:4px 10px;border-radius:20px}
.sdaf-enc-yes{background:var(--gl);color:var(--g2)}
.sdaf-enc-no{background:var(--gr100);color:var(--gr400)}
.sdaf-multi-table{width:100%;border-collapse:collapse;margin:0}
.sdaf-multi-table th{background:var(--gr100);color:var(--gr600);font-size:11px;font-weight:700;padding:7px 12px;text-align:left}
.sdaf-multi-table td{padding:7px 12px;font-size:12px;border-top:1px solid var(--gr100)}

/* ══════════════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════════════ */
.sdaf-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;padding:20px;
  animation:fadein .2s ease;
}
.sdaf-modal{background:var(--w);border-radius:var(--rl);width:100%;max-width:460px;box-shadow:var(--sh3);overflow:hidden}
.sdaf-modal-sm{max-width:360px}
.sdaf-modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--gr100)}
.sdaf-modal-header h3{font-size:1.1em;font-weight:700}
.sdaf-modal-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--gr500);padding:0;line-height:1}
.sdaf-modal-body{padding:22px}
.sdaf-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--gr100);background:var(--gr50)}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .sdaf-nav-title{display:none}
  .sdaf-user-info{display:none}
  .sdaf-stats-row{grid-template-columns:1fr}
}
@media(max-width:600px){
  .sdaf-views{padding:12px}
  .sdaf-half,.sdaf-third{flex:1 1 100%}
  .sdaf-sig-grid{grid-template-columns:1fr 1fr}
  .sdaf-nav-tabs{gap:2px}
  .sdaf-nav-tab{padding:7px 10px;font-size:12px}
}

/* ══════════════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════════════ */
@media print{
  .sdaf-nav,.sdaf-progress-bar,.sdaf-view-header .sdaf-btn{display:none!important}
  .sdaf-detail-section-head{background:var(--g1)!important;-webkit-print-color-adjust:exact}
  #sdaf-portal{background:#fff}
}

/* PDF Export button */
.ra-export { background:#e8f5e9; color:#1a5e1a; border:1px solid #4caf50; }
.ra-export:hover { background:#1a5e1a; color:#fff; border-color:#1a5e1a; }

/* ══════════════════════════════════════════════════════════════
   SHELL / LOGIN / DASHBOARD  –  added v3.2
   (matches actual markup in templates/app.php + templates/login.php
   which use sb-, dash-, btn, modal-, lf-, login- classes — these were
   previously missing from this stylesheet, which only covered the
   sdaf- prefixed form-step panels, causing the whole app shell to
   render completely unstyled.)
══════════════════════════════════════════════════════════════ */

html,body{margin:0;padding:0;background:var(--gr50);font-family:var(--font);}
#sdap-app, #sdap-login{font-family:var(--font);color:var(--gr800);}
.hidden{display:none!important;}
*{box-sizing:border-box;}
button,input,select,textarea{font-family:inherit;}

/* ── Login screen ─────────────────────────────────────────── */
.sdap-login{display:flex;min-height:100vh;width:100%;}
.login-left{flex:1 1 50%;background:linear-gradient(160deg,var(--g1),var(--g2) 60%,var(--g3));color:#fff;display:flex;align-items:center;justify-content:center;padding:60px;position:relative;overflow:hidden;}
.login-left-inner{max-width:460px;position:relative;z-index:2;}
.brand-logo{display:flex;align-items:center;gap:12px;margin-bottom:48px;}
.logo-mark {background: #FFFFFF;padding: 10px; border-radius: 15px;z-index: 99;}
.brand-text{display:flex;flex-direction:column;}
.brand-name{font-family:var(--font2);font-weight:700;font-size:22px;line-height:1.1;}
.brand-sub{font-size:11px;letter-spacing:2px;opacity:.8;}
.brand-tagline h1{font-family:var(--font2);font-size:38px;line-height:1.15;font-weight:700;margin-bottom:18px;}
.brand-tagline em{font-style:italic;color:var(--gold-l);}
.brand-tagline p{font-size:15px;opacity:.85;line-height:1.6;max-width:380px;}
.login-stats{display:flex;align-items:center;gap:20px;margin-top:48px;}
.ls-item{display:flex;flex-direction:column;}
.ls-num{font-family:var(--font2);font-size:22px;font-weight:700;}
.ls-label{font-size:11.5px;opacity:.75;}
.ls-div{width:1px;height:32px;background:rgba(255,255,255,.25);}
.deco-circles{position:absolute;inset:0;z-index:1;pointer-events:none;}
.dc{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.12);}
.dc1{width:420px;height:420px;top:-120px;right:-160px;}
.dc2{width:280px;height:280px;bottom:-100px;left:-80px;}
.dc3{width:160px;height:160px;bottom:60px;right:40px;}

.login-right{flex:1 1 50%;display:flex;align-items:center;justify-content:center;background:var(--w);padding:40px;}
.login-form-wrap{width:100%;max-width:380px;}
.lf-header h2{font-family:var(--font2);font-size:26px;font-weight:700;margin-bottom:4px;}
.lf-header p{color:var(--gr500);font-size:14px;margin-bottom:28px;}
.lf-group{margin-bottom:18px;}
.lf-group label{display:block;font-size:13px;font-weight:600;color:var(--gr700);margin-bottom:6px;}
.lf-input-wrap{position:relative;display:flex;align-items:center;}
.lf-input-wrap input{width:100%;padding:12px 14px 12px 40px;border:1.5px solid var(--gr200);border-radius:var(--r);font-size:14.5px;outline:none;transition:border-color .15s,box-shadow .15s;}
.lf-input-wrap input:focus{border-color:var(--g3);box-shadow:0 0 0 3px var(--gl);}
.lf-icon{position:absolute;left:12px;width:18px;height:18px;color:var(--gr400);pointer-events:none;}
.lf-eye{position:absolute;right:10px;background:none;border:none;cursor:pointer;color:var(--gr400);padding:4px;display:flex;}
.lf-eye svg{width:18px;height:18px;}
.lf-error{display:flex;align-items:center;gap:8px;background:#fef2f2;color:var(--red);border:1px solid #fecaca;border-radius:var(--r);padding:10px 12px;font-size:13px;margin-bottom:16px;}
.lf-error svg{width:16px;height:16px;flex-shrink:0;}
.lf-submit{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--g1);color:#fff;border:none;border-radius:var(--r);padding:13px;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s;}
.lf-submit:hover{background:var(--g2);}
.lf-submit:disabled{opacity:.7;cursor:default;}
.lf-arrow{width:18px;height:18px;}
.lf-footer{margin-top:24px;text-align:center;}
.lf-footer p{font-size:12.5px;color:var(--gr500);margin-bottom:4px;}
.lf-version{color:var(--gr400)!important;font-size:11px!important;}
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sdap-spin .7s linear infinite;}
@keyframes sdap-spin{to{transform:rotate(360deg);}}

@media(max-width:880px){
  .sdap-login{flex-direction:column;}
  .login-left{padding:36px 24px;flex:0 0 auto;}
  .login-stats{flex-wrap:wrap;}
  .login-right{padding:32px 24px;}
}

/* ── App shell layout ─────────────────────────────────────── */
.sdap-app{display:flex;min-height:100vh;width:100%;background:var(--gr50);}
.sidebar{width:252px;flex:0 0 252px;background:linear-gradient(180deg,var(--sb-bg) 0%,var(--sb-bg2) 100%);color:var(--sb-text);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;border-right:1px solid var(--sb-border);box-shadow:2px 0 24px rgba(79,70,229,.05);}
.sidebar-inner{display:flex;flex-direction:column;height:100%;padding:18px 14px;}
.sb-brand{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 8px 18px;position:relative;border-bottom:1px solid var(--sb-border);margin-bottom:10px;}
/*.sb-logo-mark{flex:0 0 auto;filter:none;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--g2),var(--g1));display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(99,102,241,.35);}*/
.sb-logo-mark{flex:0 0 auto;width:170px;height: fit-content;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(99,102,241,.25);overflow:hidden;}
.sb-brand-text{display:flex;align-items:center;flex-direction:column;line-height:1.2;}
.sb-name{font-family:var(--font2);font-weight:700;font-size:15.5px;color:var(--gr800);}
.sb-tagline{font-size:10.5px;color:var(--g2);font-weight:600;letter-spacing:.3px;}
.sb-collapse{display:none;}
.sb-nav{display:flex;flex-direction:column;gap:3px;}
.sb-nav-label{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--sb-text-dim);font-weight:700;padding:14px 10px 6px;}
.sb-nav-label.sb-mt{margin-top:6px;}
.sb-link{display:flex;align-items:center;gap:11px;background:none;border:none;color:var(--sb-text);padding:10px 12px;border-radius:var(--r);font-size:13.8px;font-weight:500;cursor:pointer;text-align:left;width:100%;transition:background .2s var(--ease),color .2s var(--ease),transform .15s var(--ease);}
.sb-link svg{width:18px;height:18px;flex:0 0 auto;transition:transform .2s var(--ease);}
.sb-link:hover{background:var(--sb-hover);color:var(--g1);transform:translateX(3px);}
.sb-link:hover svg{transform:scale(1.12) rotate(-4deg);}
.sb-link.active{background:linear-gradient(135deg,var(--g2),var(--g1));color:#fff;font-weight:600;box-shadow:0 4px 14px rgba(99,102,241,.35);}
.sb-link.active svg{transform:scale(1.05);}
.sb-link-accent{color:var(--g2);}
.sb-link-accent:hover{background:linear-gradient(135deg,var(--g2),var(--g1));color:#fff;}
.sb-spacer{flex:1;}

.sb-bottom-row{display:flex;align-items:center;gap:8px;background:var(--sb-bg2);border:1px solid var(--sb-border);border-radius:var(--r);padding:8px;margin-top:8px;}
.sb-user-card{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.sb-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--g2),var(--g1));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:0 0 auto;box-shadow:0 2px 6px rgba(99,102,241,.4);}
.sb-user-info{display:flex;flex-direction:column;overflow:hidden;}
.sb-uname{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gr800);}
.sb-role{font-size:10.5px;color:var(--sb-text-dim);}
.sb-logout{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;background:var(--gr100);border:1px solid var(--sb-border);color:var(--sb-text);border-radius:50%;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),transform .15s var(--ease),border-color .2s var(--ease);}
.sb-logout svg{width:17px;height:17px;}
.sb-logout span{display:none;}
.sb-logout:hover{background:var(--red);color:#fff;border-color:var(--red);transform:scale(1.08) rotate(-6deg);}

.sdap-main{flex:1;min-width:0;padding:28px 32px 60px;background:var(--gr50);}
#sdap-toast-stack{}

.sdap-view{display:none;}
.sdap-view.active{display:block;animation:sdap-view-in .35s var(--ease);}
@keyframes sdap-view-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}


/* ── Page header / buttons ────────────────────────────────── */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.ph-title{font-family:var(--font2);font-size:24px;font-weight:700;color:var(--gr900);margin:0 0 4px;}
.ph-sub{color:var(--gr500);font-size:13.5px;margin:0;}
.ph-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

.btn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:var(--r);padding:10px 16px;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .15s var(--ease),box-shadow .18s var(--ease);white-space:nowrap;}
.btn:active{transform:scale(.96);}
.btn svg{width:16px;height:16px;}
.btn-primary{background:var(--g1);color:#fff;}
.btn-primary:hover{background:var(--g2);box-shadow:0 4px 14px rgba(79,70,229,.3);transform:translateY(-1px);}
.btn-sm{padding:7px 12px;font-size:12.5px;}
.btn-ghost{background:transparent;color:var(--gr700);border:1.5px solid var(--gr200);}
.btn-ghost:hover{background:var(--gr100);}
.btn-ghost-dark{background:var(--gr100);color:var(--gr700);border:none;}
.btn-ghost-dark:hover{background:var(--gr200);}
.btn-outline{background:transparent;color:var(--g1);border:1.5px solid var(--g3);}
.btn-outline:hover{background:var(--gl);}
.link-btn{background:none;border:none;color:var(--g2);font-size:12.5px;font-weight:600;cursor:pointer;padding:0;}
.link-btn:hover{text-decoration:underline;}

/* ── Dashboard stat cards ─────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px;}
.stat-card{position:relative;background:#fff;border-radius:var(--rl);padding:18px 18px 16px;box-shadow:var(--sh1);overflow:hidden;display:flex;align-items:center;gap:14px;border:1px solid var(--gr100);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);}
.stat-card:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--gl);}
.stat-card-bg{position:absolute;inset:0;opacity:.05;background:radial-gradient(circle at 100% 0%,var(--g3),transparent 60%);}
.stat-icon-wrap{position:relative;z-index:1;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--g2),var(--g1));color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 4px 12px rgba(99,102,241,.3);transition:transform .3s var(--ease);}
.stat-card:hover .stat-icon-wrap{transform:scale(1.08) rotate(-4deg);}
.stat-icon-wrap svg{width:22px;height:22px;}
.stat-info{position:relative;z-index:1;}
.stat-num{font-family:var(--font2);font-size:25px;font-weight:700;color:var(--gr900);line-height:1.1;}
.stat-lbl{font-size:12px;color:var(--gr500);margin-top:2px;}
.stat-complete .stat-icon-wrap{background:linear-gradient(135deg,#22d3ee,#0891b2);box-shadow:0 4px 12px rgba(8,145,178,.3);}
.stat-draft .stat-icon-wrap{background:linear-gradient(135deg,#fbbf24,#d97706);box-shadow:0 4px 12px rgba(217,119,6,.3);}
.stat-rate .stat-icon-wrap{background:linear-gradient(135deg,#f472b6,#db2777);box-shadow:0 4px 12px rgba(219,39,119,.3);}

.dash-bottom{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px;}
.dash-card{background:#fff;border-radius:var(--rl);padding:18px;box-shadow:var(--sh1);}
.dash-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.dash-card-header h3{font-size:14.5px;font-weight:700;margin:0;}
.dash-card-sub{font-size:11.5px;color:var(--gr400);}
.chart-area{min-height:160px;}

/* ── Toolbar / search / filter ────────────────────────────── */
.apps-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.search-wrap{flex:1;min-width:200px;position:relative;display:flex;align-items:center;}
.search-wrap svg{position:absolute;left:12px;width:16px;height:16px;color:var(--gr400);}
.search-wrap input{width:100%;padding:9px 12px 9px 36px;border:1.5px solid var(--gr200);border-radius:var(--r);font-size:13.5px;outline:none;}
.search-wrap input:focus{border-color:var(--g3);}
.filter-sel{padding:9px 12px;border:1.5px solid var(--gr200);border-radius:var(--r);font-size:13px;background:#fff;outline:none;}

/* ── Tables ────────────────────────────────────────────────── */
.table-card{background:#fff;border-radius:var(--rl);box-shadow:var(--sh1);overflow:hidden;}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.data-table{width:100%;border-collapse:collapse;font-size:13.2px;min-width:640px;}
.data-table th{text-align:left;padding:12px 16px;background:var(--gr50);color:var(--gr500);font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:600;border-bottom:1px solid var(--gr200);}
.data-table td{padding:12px 16px;border-bottom:1px solid var(--gr100);vertical-align:middle;}
.data-table tbody tr:hover{background:var(--gp);}
.table-footer{padding:12px 16px;font-size:12px;color:var(--gr500);border-top:1px solid var(--gr100);}
.tbl-loading{text-align:center;padding:32px!important;}
.pulse-loader{display:flex;gap:6px;justify-content:center;}
.pulse-loader div{width:8px;height:8px;border-radius:50%;background:var(--g3);animation:sdap-pulse 1s ease-in-out infinite;}
.pulse-loader div:nth-child(2){animation-delay:.15s;}
.pulse-loader div:nth-child(3){animation-delay:.3s;}
@keyframes sdap-pulse{0%,80%,100%{opacity:.3;transform:scale(.8);}40%{opacity:1;transform:scale(1);}}

/* ── Modal ─────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;}
.modal{background:#fff;border-radius:var(--rl);width:100%;max-width:480px;box-shadow:var(--sh3);}
.modal-sm{max-width:380px;}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--gr100);}
.modal-header h3{font-size:16px;font-weight:700;margin:0;}
.modal-x{background:none;border:none;cursor:pointer;color:var(--gr400);padding:4px;display:flex;}
.modal-x svg{width:18px;height:18px;}
.modal-body{padding:20px;}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;border-top:1px solid var(--gr100);}
.modal-err{background:#fef2f2;color:var(--red);border:1px solid #fecaca;border-radius:var(--r);padding:9px 12px;font-size:12.5px;margin-top:10px;}

.mf-row{display:flex;gap:14px;}
@media(max-width:420px){.mf-row{flex-direction:column;gap:0;}}
.mf-group{flex:1;margin-bottom:14px;}
.mf-group label{display:block;font-size:12.5px;font-weight:600;color:var(--gr700);margin-bottom:5px;}
.mf-group input,.mf-group select{width:100%;padding:9px 12px;border:1.5px solid var(--gr200);border-radius:var(--r);font-size:13.5px;outline:none;}
.mf-group input:focus,.mf-group select:focus{border-color:var(--g3);}
.req{color:var(--red);}

/* ── Form notice / stepper carries over from sdaf- vars; ok as-is ── */
.form-notice{border-radius:var(--r);padding:11px 14px;font-size:13px;margin-bottom:16px;}
.detail-body{background:#fff;border-radius:var(--rl);box-shadow:var(--sh1);padding:22px;overflow-x:auto;}

@media(max-width:1000px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .dash-bottom{grid-template-columns:1fr;}
}

/* ── Mobile topbar (hamburger + logo) — hidden on desktop ──── */
.sdap-topbar{
  display:none;align-items:center;gap:14px;
  position:fixed;top:0;left:0;right:0;height:56px;z-index:900;
  background:var(--sb-bg);
  border-bottom:1px solid var(--sb-border);
  padding:0 14px;box-shadow:0 2px 10px rgba(79,70,229,.06);
}
.topbar-burger{
  width:36px;height:36px;flex:0 0 auto;border-radius:9px;border:1px solid var(--sb-border);
  background:var(--gl);color:var(--g1);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .18s var(--ease),transform .15s var(--ease);
}
.topbar-burger:hover{background:var(--g1);color:#fff;transform:scale(1.05);}
.topbar-burger svg{width:19px;height:19px;}
.topbar-logo{height:30px;width:auto;object-fit:contain;}

.sdap-sidebar-backdrop{display:none;}

@media(max-width:768px){
  .sdap-topbar{display:flex;}
  .sdap-app{padding-top:56px;}
  .sidebar{
    position:fixed;top:0;left:0;height:100vh;z-index:1000;
    width:82vw;max-width:280px;
    transform:translateX(-100%);
    transition:transform .28s var(--ease);
  }
  .sidebar.mobile-open{transform:translateX(0);box-shadow:6px 0 28px rgba(0,0,0,.35);}
  .sdap-sidebar-backdrop{
    display:block;position:fixed;inset:0;background:rgba(0,0,0,0);
    z-index:999;pointer-events:none;transition:background .25s var(--ease);
  }
  .sdap-sidebar-backdrop.show{background:rgba(0,0,0,.5);pointer-events:auto;}
  .sdap-main{padding:16px;}
  .stat-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
  .stat-grid{grid-template-columns:1fr;}
  .ph-title{font-size:20px;}
  .sdap-main{padding:12px;}
}

/* ══════════════════════════════════════════════════════════════
   DEALER APPLICATION PAGE  –  added v3.3
   (stepper + sdap-panel form classes used in templates/panels.php
   and the stepper markup in templates/app.php — previously had
   ZERO matching CSS anywhere, so this whole page rendered as
   plain unstyled HTML.)
══════════════════════════════════════════════════════════════ */

/* ── Stepper ───────────────────────────────────────────────── */
.stepper-wrap{display:flex;align-items:flex-start;background:#fff;border-radius:var(--rl);box-shadow:var(--sh1);padding:22px 18px;margin-bottom:20px;overflow-x:auto;}
.stepper-item{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto;min-width:74px;position:relative;cursor:pointer;}
.stepper-dot{width:38px;height:38px;border-radius:50%;background:var(--gr100);color:var(--gr400);display:flex;align-items:center;justify-content:center;font-size:16px;border:2px solid var(--gr200);transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);position:relative;}
.stepper-icon svg{width:17px;height:17px;}
.stepper-check{display:none;width:18px;height:18px;}
.stepper-item.active .stepper-dot{background:var(--g1);border-color:var(--g1);color:#fff;transform:scale(1.08);box-shadow:0 0 0 4px var(--gl);}
.stepper-item.done .stepper-dot{background:var(--g3);border-color:var(--g3);color:#fff;}
.stepper-item.done .stepper-icon{display:none;}
.stepper-item.done .stepper-check{display:block;}
.stepper-label{font-size:11px;font-weight:600;color:var(--gr500);text-align:center;white-space:nowrap;}
.stepper-item.active .stepper-label{color:var(--g1);}
.stepper-line{flex:1;height:2px;background:var(--gr200);margin:18px 6px 0;min-width:18px;transition:background .25s var(--ease);}
.stepper-item.done + .stepper-line{background:var(--g3);}

/* ── Form panels ───────────────────────────────────────────── */
.sdap-panel{display:none;background:#fff;border-radius:var(--rl);box-shadow:var(--sh1);overflow:hidden;}
.sdap-panel.active{display:block;animation:sdap-view-in .3s var(--ease);}
.sdap-panel-hd{display:flex;align-items:flex-start;gap:14px;padding:20px 24px;border-bottom:1px solid var(--gr100);background:var(--gp);}
.sdap-panel-hd>span{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--g2),var(--g1));color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 4px 10px rgba(99,102,241,.28);}
.sdap-panel-hd>span svg{width:21px;height:21px;}
.sdap-panel-hd h3{font-size:16.5px;font-weight:700;margin:0 0 3px;color:var(--gr900);}
.sdap-panel-hd p{font-size:12.5px;color:var(--gr500);margin:0;}
.sdap-flds{display:flex;flex-wrap:wrap;gap:16px;padding:22px 24px;}
.sdap-fg{flex:1 1 100%;display:flex;flex-direction:column;gap:6px;min-width:200px;}
.sdap-fg.sdap-half{flex:1 1 calc(50% - 8px);}
.sdap-fg.sdap-third{flex:1 1 calc(33.333% - 11px);}
.sdap-fg label{font-size:12.5px;font-weight:600;color:var(--gr700);}
.sdap-fg input,.sdap-fg select,.sdap-fg textarea{padding:10px 13px;border:1.5px solid var(--gr200);border-radius:var(--r);font-size:13.5px;outline:none;transition:border-color .15s var(--ease),box-shadow .15s var(--ease);font-family:inherit;width:100%;}
.sdap-fg input:focus,.sdap-fg select:focus,.sdap-fg textarea:focus{border-color:var(--g3);box-shadow:0 0 0 3px var(--gl);}
.sdap-fg textarea{resize:vertical;}
.sdap-sub-title{flex:1 1 100%;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--g1);border-bottom:1.5px solid var(--gl);padding-bottom:6px;margin-top:6px;}
.sdap-radios{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.sdap-radio-opt{display:flex;align-items:center;gap:8px;background:var(--gr50);border:1.5px solid var(--gr200);border-radius:var(--r);padding:10px 14px;font-size:13px;font-weight:600;color:var(--gr700);line-height:1.3;cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease);}
.sdap-radio-opt:hover{border-color:var(--g3);background:var(--gp);}
.sdap-radio-opt input{flex:0 0 auto;width:16px;height:16px;margin:0;accent-color:var(--g1);}
.sdap-radio-opt:has(input:checked){border-color:var(--g2);background:var(--gl);color:var(--g1);box-shadow:0 0 0 3px rgba(99,102,241,.12);}
.sdap-flds-row{flex-wrap:wrap;gap:14px;align-items:flex-start;}
.sdap-repeat{position:relative;background:var(--gr50);border:1px solid var(--gr100);border-radius:var(--r);padding:18px 18px 16px 46px;margin:0 24px 14px;}
.sdap-repeat-badge{position:absolute;left:14px;top:16px;width:24px;height:24px;border-radius:50%;background:var(--g1);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.sdap-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;padding:0 24px 18px;}
.sdap-chk{display:flex;align-items:center;gap:10px;background:var(--gr50);border:1.5px solid var(--gr200);border-radius:var(--r);padding:10px 14px;font-size:13px;line-height:1.35;color:var(--gr700);cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease);}
.sdap-chk:hover{border-color:var(--g3);background:var(--gp);}
.sdap-chk input{flex:0 0 auto;width:16px;height:16px;margin:0;accent-color:var(--g1);}
.sdap-chk:has(input:checked){border-color:var(--g2);background:var(--gl);}
@media(max-width:480px){.sdap-checks{grid-template-columns:1fr;}}
.sdap-decl-note{margin:0 24px 18px;background:var(--gold-l);border:1px solid #ecdca0;border-radius:var(--r);padding:12px 14px;font-size:12.5px;color:#8a6d1f;}
.sdap-app-ref-line{font-size:12.5px;color:var(--gr500);font-family:monospace;}

.sdap-panel-foot{display:flex;justify-content:space-between;gap:10px;padding:18px 24px;border-top:1px solid var(--gr100);background:var(--gr50);}
.sdap-btn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:var(--r);padding:10px 18px;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .18s var(--ease),transform .15s var(--ease),box-shadow .18s var(--ease);}
.sdap-btn:active{transform:scale(.96);}
.sdap-btn-primary{background:var(--g1);color:#fff;}
.sdap-btn-primary:hover{background:var(--g2);box-shadow:0 4px 14px rgba(79,70,229,.3);transform:translateY(-1px);}
.sdap-btn-ghost{background:#fff;color:var(--gr600);border:1.5px solid var(--gr200);}
.sdap-btn-ghost:hover{background:var(--gr100);}
.sdap-btn-success{background:#16a34a;color:#fff;}
.sdap-btn-success:hover{background:#15803d;box-shadow:0 4px 14px rgba(22,163,74,.3);transform:translateY(-1px);}

/* ── Signature upload grid ────────────────────────────────── */
.sdap-sig-hint{margin:18px 24px 0;background:var(--gl);border:1px solid #c6ebd4;border-radius:var(--r);padding:11px 14px;font-size:12.5px;color:var(--g1);}
.sdap-sig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;padding:18px 24px;}
.sdap-sig-card{background:var(--gr50);border:1.5px solid var(--gr200);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s var(--ease),transform .15s var(--ease);}
.sdap-sig-card:hover{border-color:var(--g3);transform:translateY(-2px);}
.sdap-sc-head{font-size:12.5px;font-weight:600;color:var(--gr700);}
.sdap-sc-preview{height:90px;background:#fff;border:1.5px dashed var(--gr300);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.sdap-sc-preview img{width:100%;height:100%;object-fit:contain;}
.sdap-sc-empty{font-size:11px;color:var(--gr400);text-align:center;line-height:1.6;}
.sdap-sc-upload{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--g1);color:#fff;border-radius:8px;padding:8px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s var(--ease);}
.sdap-sc-upload:hover{background:var(--g2);}
.sdap-sc-upload input{display:none;}
.sdap-sc-status{font-size:11px;color:var(--gr500);min-height:14px;}

/* ── Submit panel ──────────────────────────────────────────── */
.sdap-submit-area{text-align:center;padding:50px 24px;}
.sdap-submit-icon{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;background:linear-gradient(135deg,var(--g2),var(--g1));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(99,102,241,.35);animation:sdap-bounce 2s ease-in-out infinite;}
.sdap-submit-icon svg{width:34px;height:34px;}
@keyframes sdap-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.sdap-submit-area h3{font-size:19px;font-weight:700;margin-bottom:8px;}
.sdap-submit-area p{font-size:13.5px;color:var(--gr500);margin-bottom:14px;line-height:1.6;}
.sdap-success-box{text-align:center;padding:50px 24px;}
.sdap-success-box>div:first-child{font-size:48px;margin-bottom:10px;}
.sdap-success-box h3{font-size:19px;font-weight:700;margin-bottom:8px;color:var(--g1);}
.sdap-success-box p{font-size:13.5px;color:var(--gr500);margin-bottom:18px;}

@media(max-width:700px){
  .sdap-fg.sdap-half,.sdap-fg.sdap-third{flex:1 1 100%;}
  .sdap-repeat{margin-left:14px;margin-right:14px;}
  .sdap-flds{padding:18px;}
}

/* ── Users table row actions ──────────────────────────────────── */
.ra-actions{display:flex;gap:6px;flex-wrap:wrap;}
.ra-icon-btn{
  width:30px;height:30px;border-radius:8px;border:1px solid var(--gr200);
  background:#fff;color:var(--gr500);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.ra-icon-btn:hover{background:var(--gp);}
.ra-icon-view:hover{color:var(--blue);border-color:var(--blue);}
.ra-icon-edit:hover{color:var(--g1);border-color:var(--g1);}
.ra-icon-del:hover{color:var(--red);border-color:var(--red);background:#fef2f2;}

/* ── Edit user modal checkbox row ─────────────────────────────── */
.sdap-checkrow{flex-direction:row !important;align-items:center;gap:8px !important;}
.sdap-checklabel{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--gr600);cursor:pointer;}
.sdap-checklabel input{width:16px;height:16px;cursor:pointer;}

/* ── Applications table 9-col fix ── */
#apps-table thead th { font-size: 11px; }
.row-actions { display:flex; gap:5px; flex-wrap:nowrap; align-items:center; }
.ra-btn { display:inline-flex; align-items:center; gap:4px; padding:5px 9px; border-radius:6px; font-size:11px; font-weight:600; border:none; cursor:pointer; transition:all .2s; white-space:nowrap; }
.ra-view   { background:#e8f5e9; color:#1a5e1a; }
.ra-view:hover   { background:#1a5e1a; color:#fff; }
.ra-export { background:#dbeafe; color:#1e40af; }
.ra-export:hover { background:#1e40af; color:#fff; }
.ra-del    { background:#fee2e2; color:#991b1b; }
.ra-del:hover    { background:#dc3545; color:#fff; }
.ra-del:disabled { opacity:.5; cursor:not-allowed; }

/* ── Dashboard charts fix ── */
.chart-area { overflow-x:auto; min-height:140px; display:flex; align-items:flex-end; gap:4px; padding:12px 16px 8px; }
#state-bars  { padding:12px 16px; }
#monthly-chart { width:100%; overflow:hidden; }

/* ── Icon action buttons ── */
.ia-wrap { display:flex; gap:5px; justify-content:center; align-items:center; }
.ia-btn {
  width:32px; height:32px; border:none; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .18s ease; flex-shrink:0;
}
.ia-btn:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.18); }
.ia-btn:active { transform:translateY(0); }
.ia-btn:disabled { opacity:.4; cursor:not-allowed; transform:none !important; }
.ia-view { background:#e0f2fe; color:#0369a1; }
.ia-view:hover { background:#0369a1; color:#fff; }
.ia-edit { background:#fef9c3; color:#92400e; }
.ia-edit:hover { background:#d97706; color:#fff; }
.ia-pdf  { background:#dcfce7; color:#15803d; }
.ia-pdf:hover  { background:#15803d; color:#fff; }
.ia-del  { background:#fee2e2; color:#be123c; }
.ia-del:hover  { background:#be123c; color:#fff; }
.party-code-pill {
  display:inline-block; padding:2px 9px;
  background:#f0fdf4; color:#166534;
  border:1px solid #bbf7d0; border-radius:20px;
  font-size:11.5px; font-weight:700;
}

/* ── Modern Signature & Document Cards ── */
.sdap-sig-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr) ;
  /*grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));*/
  gap: 12px;
  padding: 0 24px 16px;
}
@media (max-width:1024px) {
    .sdap-sig-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width:768px) {
    .sdap-sig-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width:480px) {
    .sdap-sig-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}
.sdap-sig-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  transition: all .2s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  display: flex; flex-direction: column;
}
.sdap-sig-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.10); border-color: #d1fae5; transform: translateY(-2px); }
.sdap-sig-card.uploaded { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.sdap-sc-head {
  padding: 10px 12px 8px;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
.sc-icon-wrap {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sdap-sc-preview {
  flex: 1; min-height: 90px;
  display: flex; align-items: center; justify-content: center;
  background: #f8fafc; position: relative; overflow: hidden;
  margin: 0 10px; border-radius: 10px; border: 1px dashed #e2e8f0;
}
.sdap-sc-preview img { max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; }
.sdap-sc-empty { text-align:center; color:#cbd5e1; font-size:11px; padding:10px; }
.sdap-sc-upload {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 8px 10px 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: all .2s;
  border: none;
}
.sdap-sc-upload:hover { opacity:.85; }
.sdap-sc-upload input { display:none; }
.sdap-sc-status { font-size:11px; text-align:center; padding:0 10px 8px; min-height:18px; }
.sdap-sc-status.ok      { color:#16a34a; font-weight:700; }
.sdap-sc-status.err     { color:#dc2626; }
.sdap-sc-status.loading { color:#94a3b8; }

/* ── Document cards ── */
.sdap-doc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /*grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));*/
  gap: 14px; padding: 0 24px 20px;
}
@media (max-width:1024px) {
    .sdap-doc-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width:768px) {
    .sdap-doc-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width:480px) {
    .sdap-doc-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}
.sdap-doc-card {
  border-radius: 16px; overflow: hidden;
  border: 1.5px dashed #e2e8f0;
  background: #fafafa;
  transition: all .2s ease;
  display: flex; flex-direction: column;
}
.sdap-doc-card:hover { border-color: #86efac; background: #f0fdf4; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.sdap-doc-card.uploaded { border-style:solid; border-color:#22c55e; background:#fff; box-shadow:0 0 0 3px rgba(34,197,94,.12); }
.sdap-doc-hd { padding:14px 14px 8px; display:flex; align-items:flex-start; gap:10px; }
.sdap-doc-icon { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sdap-doc-hd-text { flex:1; min-width:0; }
.sdap-doc-hd-text strong { display:block; font-size:12.5px; font-weight:700; color:#1e293b; }
.sdap-doc-hd-text span   { font-size:10.5px; color:#94a3b8; margin-top:2px; display:block; }
.sdap-doc-preview {
  margin: 0 14px; height:80px; border-radius:10px;
  background:#f1f5f9; display:flex; align-items:center;
  justify-content:center; overflow:hidden; border:1px dashed #e2e8f0;
}
.sdap-doc-preview img { max-width:100%; max-height:100%; object-fit:contain; }
.sdap-doc-preview-empty { color:#cbd5e1; font-size:11px; text-align:center; }
.sdap-doc-upload-btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:10px 14px 14px; padding:9px;
  border-radius:10px; border:1.5px solid #e2e8f0;
  background:#fff; color:#475569; font-size:12px; font-weight:600;
  cursor:pointer; transition:all .2s;
}
.sdap-doc-upload-btn:hover { border-color:#22c55e; color:#15803d; background:#f0fdf4; }
.sdap-doc-upload-btn input { display:none; }
.sdap-doc-status { font-size:11px; text-align:center; padding:0 14px 10px; min-height:18px; }
.sdap-doc-status.ok  { color:#16a34a; font-weight:700; }
.sdap-doc-status.err { color:#dc2626; }

/* ── Status badge pills (used in Applications table) ──────── */
.badge{
  display:inline-block; padding:3px 11px; border-radius:20px;
  font-size:11px; font-weight:700; letter-spacing:.01em; white-space:nowrap;
}
.badge-complete{background:#dcfce7; color:#166534;}
.badge-draft{background:#fef9c3; color:#854d0e;}

/* ── Step-progress pill (used in Applications table "Progress" column) ── */
.progress-pill{display:flex; align-items:center; gap:8px; min-width:110px;}
.progress-track{
  flex:1; height:6px; border-radius:20px; background:var(--gr200); overflow:hidden;
}
.progress-fill{
  height:100%; border-radius:20px;
  background:linear-gradient(90deg,var(--g3),var(--g1));
  transition:width .3s var(--ease);
}
.progress-txt{font-size:11px; font-weight:700; color:var(--gr500); flex:0 0 auto; white-space:nowrap;}

/* ── Dashboard "Recent Activity" rows ─────────────────────── */
.activity-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 4px; border-bottom:1px solid var(--gr100);
  transition:background .15s var(--ease);
}
.activity-item:last-child{border-bottom:none;}
.activity-item:hover{background:var(--gr50); border-radius:8px;}

/* ── Section divider inside panel */
.sdap-section-divider {
  display:flex; align-items:center; gap:12px;
  padding:18px 24px 14px; border-top:1px solid #f1f5f9;
}
.sdap-section-divider-title {
  font-size:13px; font-weight:700; color:#374151;
  display:flex; align-items:center; gap:7px;
}

/* ══════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS  –  modern
══════════════════════════════════════════════════════════════ */
#sdap-toast-stack{
  position:fixed; bottom:22px; right:22px; z-index:99999;
  display:flex; flex-direction:column-reverse; gap:10px;
  pointer-events:none; max-width:380px; width:calc(100% - 44px);
}
.sdap-toast{
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:10px;
  background:var(--gr900); color:#fff;
  padding:13px 14px; border-radius:var(--r);
  font-family:var(--font); font-size:13.5px; font-weight:500; line-height:1.45;
  box-shadow:var(--sh3);
  border:1px solid rgba(255,255,255,.08);
  border-left:3px solid var(--g3);
  animation:sdap-toast-in .32s var(--ease);
}
.sdap-toast.sdap-toast-out{animation:sdap-toast-out .25s var(--ease) forwards;}
@keyframes sdap-toast-in{
  from{opacity:0; transform:translateX(24px) scale(.96);}
  to{opacity:1; transform:translateX(0) scale(1);}
}
@keyframes sdap-toast-out{
  from{opacity:1; transform:translateX(0) scale(1); max-height:100px; margin-top:0;}
  to{opacity:0; transform:translateX(24px) scale(.96); max-height:0; margin-top:-10px;}
}
.sdap-toast-icon{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}
.sdap-toast-icon svg{width:12px; height:12px;}
.sdap-toast-msg{flex:1; word-break:break-word;}
.sdap-toast-close{
  flex:0 0 auto; background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.45); padding:2px; display:flex; margin:-2px -2px 0 0;
  transition:color .15s var(--ease);
}
.sdap-toast-close:hover{color:#fff;}
.sdap-toast-close svg{width:13px; height:13px;}
.sdap-toast-success{border-left-color:#34d399;}
.sdap-toast-success .sdap-toast-icon{background:rgba(52,211,153,.18); color:#34d399;}
.sdap-toast-error{border-left-color:var(--red);}
.sdap-toast-error .sdap-toast-icon{background:rgba(225,29,72,.18); color:#fb7185;}
.sdap-toast-warn{border-left-color:var(--orange);}
.sdap-toast-warn .sdap-toast-icon{background:rgba(245,158,11,.18); color:#fbbf24;}

@media(max-width:600px){
  #sdap-toast-stack{right:12px; left:12px; bottom:12px; max-width:none; width:auto;}
}

/* ══════════════════════════════════════════════════
   PRINT STYLES — Detail view print/save as PDF
══════════════════════════════════════════════════ */
@media print {
  @page {
    size: A4 portrait;
    margin: 8mm 10mm;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── Hide EVERYTHING first ── */
  body > *,
  #sdap-app > * { display: none !important; }

  /* ── Then show ONLY sdap-main ── */
  #sdap-app { display: block !important; }
  #sdap-app > .sdap-main { display: block !important; margin-left: 0 !important; padding: 0 !important; width: 100% !important; }

  /* ── Show ONLY detail view ── */
  #sdap-app > .sdap-main > #view-detail { display: block !important; padding: 0 !important; }

  /* ── Hide buttons inside detail ── */
  .ph-actions, #detail-back, #detail-export-btn, #sdap-toast-stack { display: none !important; }

  /* ── Remove all shadows/borders from containers ── */
  * { box-shadow: none !important; text-shadow: none !important; }

  /* ── Detail body full width ── */
  #detail-body, .detail-body {
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    overflow: visible !important;
  }

  /* ── Tables ── */
  /* ── Tables — no scroll in print, full width ── */
  #detail-body table {
    display: table !important;
    width: 100% !important;
    border-collapse: collapse !important;
    overflow: visible !important;
    white-space: normal !important;
    page-break-inside: auto;
    font-size: 8.5px !important;
  }
  #detail-body thead { display: table-header-group !important; }
  #detail-body tbody { display: table-row-group !important; }
  #detail-body tr    { display: table-row !important; page-break-inside: avoid; }
  #detail-body th,
  #detail-body td {
    display: table-cell !important;
    padding: 4px 6px !important;
    border: 1px solid #ccc !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    width: auto !important;
    min-width: unset !important;
  }
  #detail-body th {
    background: linear-gradient(135deg,#4f46e5,#4338ca) !important;
    color: #fff !important;
    font-weight: 700 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /*#detail-body tr { page-break-inside: avoid; }*/
  /*#detail-body th, #detail-body td { padding: 6px 10px; border: 1px solid #ccc; font-size: 10px; vertical-align: top; }*/
  /*#detail-body th {*/
  /*  background: linear-gradient(135deg,#4f46e5,#4338ca) !important;*/
  /*  color: #fff !important;*/
  /*  font-weight: 700;*/
  /*  -webkit-print-color-adjust: exact;*/
  /*  print-color-adjust: exact;*/
  /*}*/

  /* ── Section headers ── */
  #detail-body div[style*="background:linear-gradient"] {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── Images ── */
  #detail-body img { max-width: 100%; max-height: 80px; object-fit: contain; }

  /* ── Signature/doc grid ── */
  #detail-body div[style*="grid"] {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  /* ── Print header ── */
  .print-header {
    display: block !important;
    border-bottom: 2px solid #4f46e5;
    padding-bottom: 8px;
    margin-bottom: 12px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Print header — hidden on screen, shown on print */
.print-header {
  display: none;
  text-align: left;
  border-bottom: 3px solid #4f46e5;
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.print-header-name {
  font-size: 22px;
  font-weight: 800;
  color: #000;
}
.print-header-sub {
  font-size: 11px;
  color: #555;
  margin-top: 3px;
}
.print-header-meta {
  font-size: 11px;
  color: #4f46e5;
  margin-top: 4px;
  font-weight: 600;
}

/* ── Mobile responsive detail view ── */
@media (max-width: 768px) {
  /* Detail body full width */
  .detail-body,
  #detail-body { width: 100% !important; overflow: hidden; }

  /* All tables scroll horizontally */
  /*#detail-body table {*/
  /*  display: block;*/
  /*  overflow-x: auto;*/
  /*  -webkit-overflow-scrolling: touch;*/
  /*  width: 100%;*/
  /*  min-width: unset;*/
  /*  white-space: nowrap;*/
  /*}*/
  
  /* All tables scroll horizontally — screen only */
  @media screen {
    #detail-body table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      width: 100%;
      min-width: unset;
      white-space: nowrap;
    }
  }

  /* th fixed width remove on mobile */
  #detail-body th { width: auto !important; min-width: 120px; }
  #detail-body td { min-width: 150px; }

  /* Multi-column tables (props/bank/trans) */
  #detail-body thead th { white-space: normal; min-width: 80px; }

  /* Signature & doc grid — 2 columns on mobile */
  #detail-body div[style*="grid-template-columns:repeat(auto-fill"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  /* Section headers */
  #detail-body div[style*="background:linear-gradient"] {
    font-size: 11px !important;
    padding: 8px 12px !important;
    word-break: break-word;
    white-space: normal;
  }

  /* Page header on mobile */
  #view-detail .page-header {
    flex-direction: column;
    gap: 10px;
  }
  #view-detail .ph-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  #view-detail .ph-actions .btn {
    font-size: 12px;
    padding: 7px 12px;
  }

  /* Table cells wrap text */
  #detail-body td,
  #detail-body th {
    white-space: normal;
    word-break: break-word;
  }
}
/* ── Very small screens (480px) — stack tables ── */
@media screen and (max-width: 480px) {
  #detail-body table,
  #detail-body table tbody,
  #detail-body table thead,
  #detail-body table tr {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  #detail-body table th,
  #detail-body table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    white-space: normal !important;
    word-break: break-word;
    padding: 8px 12px !important;
  }
  #detail-body table th {
    background: linear-gradient(135deg,#4f46e5,#4338ca) !important;
    color: #fff !important;
    font-size: 11px !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    margin-top: 4px;
  }
  #detail-body table td {
    background: #fff !important;
    font-size: 12px !important;
    color: #1f2937 !important;
  }
  /* Signature/doc grid — 2 cols */
  #detail-body div[style*="grid"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
}