/* =====================================================================
   ID Card Studio Pro — Design System
   Built for high-volume operator work: dense tables, fast data entry,
   thumb-friendly capture screens inside an Android WebView.
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root{
  /* Ink & surface — cool slate, so card previews (which are colourful)
     always read as the brightest thing on screen */
  --ink-900:#0f1b2d;
  --ink-700:#2c3e55;
  --ink-500:#5b7089;
  --ink-300:#9aabc0;
  --ink-100:#dce4ee;
  --surface:#f4f7fb;
  --panel:#ffffff;
  --line:#dce4ee;

  /* Brand — indigo (trust/records) + a signal amber for "needs action" */
  --brand-700:#1b3a8f;
  --brand-600:#2450b8;
  --brand-500:#2f63e0;
  --brand-100:#e6edfd;
  --signal:#d97a06;
  --signal-100:#fdf1de;

  /* Status */
  --ok:#0f7a4d;      --ok-100:#e0f5eb;
  --warn:#b06a00;    --warn-100:#fdf1de;
  --err:#b3261e;     --err-100:#fce9e8;
  --info:#1e6fa8;    --info-100:#e2f0fa;
  --violet:#6b3fa0;  --violet-100:#f0e9fa;
  --teal:#0d6e6e;    --teal-100:#dff2f2;
  --gray:#5b7089;    --gray-100:#eaeff5;

  --radius:8px;
  --radius-sm:5px;
  --shadow-1:0 1px 2px rgba(15,27,45,.06), 0 1px 3px rgba(15,27,45,.08);
  --shadow-2:0 4px 12px rgba(15,27,45,.10);
  --shadow-3:0 12px 32px rgba(15,27,45,.16);

  --sidebar-w:236px;
  --header-h:56px;

  --font-ui:"Inter","Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  --font-num:"Roboto Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.5;
  color:var(--ink-900);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  /* WebView: stop the elastic overscroll white flash */
  overscroll-behavior-y:none;
}
img{max-width:100%;display:block}
a{color:var(--brand-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5rem;line-height:1.25;font-weight:650}
h1{font-size:1.375rem}
h2{font-size:1.125rem}
h3{font-size:1rem}
p{margin:0 0 .75rem}

/* Visible keyboard focus everywhere */
:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}

/* ---------- APP SHELL ---------- */
.app{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);
  background:var(--ink-900);
  color:#fff;
  position:fixed;
  top:0;bottom:0;left:0;
  overflow-y:auto;
  z-index:200;
  transition:transform .22s ease;
  -webkit-overflow-scrolling:touch;
}
.sidebar-brand{
  display:flex;align-items:center;gap:.55rem;
  height:var(--header-h);
  padding:0 1rem;
  border-bottom:1px solid rgba(255,255,255,.10);
  font-weight:700;font-size:.95rem;letter-spacing:.2px;
}
.sidebar-brand .mark{
  width:26px;height:26px;border-radius:6px;flex:0 0 26px;
  background:linear-gradient(135deg,var(--brand-500),var(--signal));
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:800;color:#fff;
}
.sidebar-section{
  padding:.9rem 1rem .3rem;
  font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-300);font-weight:700;
}
.sidebar a.nav{
  display:flex;align-items:center;gap:.6rem;
  padding:.6rem 1rem;
  color:#c9d5e5;font-size:.845rem;
  border-left:3px solid transparent;
  min-height:40px;
}
.sidebar a.nav:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.sidebar a.nav.active{
  background:rgba(47,99,224,.20);
  border-left-color:var(--brand-500);
  color:#fff;font-weight:600;
}
.sidebar a.nav .ic{width:17px;flex:0 0 17px;opacity:.9}

.main{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column}

.topbar{
  height:var(--header-h);
  background:var(--panel);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:.75rem;
  padding:0 1rem;
  position:sticky;top:0;z-index:150;
}
.topbar .page-title{font-weight:650;font-size:.95rem;margin:0}
.topbar .spacer{flex:1}
.hamburger{
  display:none;background:none;border:0;padding:.4rem;cursor:pointer;
  color:var(--ink-700);min-width:40px;min-height:40px;
}

.userchip{
  display:flex;align-items:center;gap:.5rem;
  padding:.3rem .55rem;border-radius:var(--radius-sm);
  cursor:pointer;border:1px solid transparent;background:none;
  font-family:inherit;font-size:.82rem;color:var(--ink-700);
}
.userchip:hover{background:var(--surface);border-color:var(--line)}
.avatar{
  width:28px;height:28px;border-radius:50%;flex:0 0 28px;
  background:var(--brand-100);color:var(--brand-700);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.72rem;
}

.content{padding:1.15rem;flex:1}
@media(min-width:1400px){.content{padding:1.4rem 1.75rem}}

/* ---------- PANELS ---------- */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  margin-bottom:1.15rem;
}
.panel-head{
  padding:.8rem 1rem;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;
}
.panel-head h2,.panel-head h3{margin:0;font-size:.95rem}
.panel-head .spacer{flex:1}
.panel-body{padding:1rem}
.panel-body.tight{padding:0}
.panel-foot{
  padding:.7rem 1rem;border-top:1px solid var(--line);
  background:var(--surface);
  border-radius:0 0 var(--radius) var(--radius);
  display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
}

/* ---------- GRID ---------- */
.grid{display:grid;gap:1.15rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- STAT CARDS ---------- */
.stat{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:.95rem 1rem;
  box-shadow:var(--shadow-1);
  display:flex;align-items:flex-start;gap:.8rem;
}
.stat .stat-ic{
  width:38px;height:38px;flex:0 0 38px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}
.stat .stat-val{
  font-size:1.6rem;font-weight:700;line-height:1.1;
  font-family:var(--font-num);letter-spacing:-.02em;
}
.stat .stat-lbl{font-size:.775rem;color:var(--ink-500);margin-top:.15rem}
.stat .stat-sub{font-size:.72rem;color:var(--ink-300);margin-top:.3rem}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.42rem;
  padding:.5rem .9rem;
  min-height:38px;                 /* touch target */
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--ink-700);
  font:inherit;font-size:.845rem;font-weight:550;
  cursor:pointer;
  transition:background .13s,border-color .13s,box-shadow .13s;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:var(--surface);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn.disabled{opacity:.55;cursor:not-allowed;pointer-events:none}

.btn-primary{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.btn-primary:hover{background:var(--brand-700);border-color:var(--brand-700)}
.btn-ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn-ok:hover{background:#0b6440}
.btn-danger{background:var(--err);border-color:var(--err);color:#fff}
.btn-danger:hover{background:#8f1e17}
.btn-signal{background:var(--signal);border-color:var(--signal);color:#fff}
.btn-signal:hover{background:#b86505}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-500)}
.btn-ghost:hover{background:var(--surface);color:var(--ink-900)}
.btn-sm{padding:.32rem .6rem;min-height:31px;font-size:.79rem}
.btn-lg{padding:.7rem 1.3rem;min-height:46px;font-size:.95rem}
.btn-block{display:flex;width:100%}
.btn-group{display:flex;gap:.45rem;flex-wrap:wrap}

/* ---------- FORMS ---------- */
.field{margin-bottom:.9rem}
.field label,.lbl{
  display:block;font-size:.79rem;font-weight:600;
  color:var(--ink-700);margin-bottom:.3rem;
}
.field label .req{color:var(--err);margin-left:2px}
.input,.select,.textarea{
  width:100%;
  padding:.52rem .68rem;
  min-height:40px;
  border:1px solid var(--ink-100);
  border-radius:var(--radius-sm);
  font:inherit;
  font-size:16px;      /* 16px stops iOS/WebView zoom-on-focus */
  color:var(--ink-900);
  background:#fff;
  transition:border-color .13s,box-shadow .13s;
  -webkit-appearance:none;appearance:none;
}
@media(min-width:768px){
  .input,.select,.textarea{font-size:.875rem}
}
.input:focus,.select:focus,.textarea:focus{
  outline:none;
  border-color:var(--brand-500);
  box-shadow:0 0 0 3px rgba(47,99,224,.14);
}
.input[readonly],.input:disabled{background:var(--surface);color:var(--ink-500)}
.textarea{min-height:82px;resize:vertical}
.select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7089' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .55rem center;
  background-size:15px;
  padding-right:2rem;
}
.hint{font-size:.735rem;color:var(--ink-500);margin-top:.28rem}
.field-err{font-size:.735rem;color:var(--err);margin-top:.28rem;font-weight:500}
.input.has-err{border-color:var(--err)}
.check{display:flex;align-items:center;gap:.5rem;font-size:.845rem;cursor:pointer;min-height:34px}
.check input[type=checkbox],.check input[type=radio]{width:17px;height:17px;accent-color:var(--brand-600);flex:0 0 auto}
.form-row{display:grid;gap:.9rem}
@media(min-width:640px){
  .form-row.c2{grid-template-columns:1fr 1fr}
  .form-row.c3{grid-template-columns:repeat(3,1fr)}
  .form-row.c4{grid-template-columns:repeat(4,1fr)}
}

/* ---------- TABLES ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:.845rem}
table.tbl th{
  text-align:left;
  padding:.6rem .7rem;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  font-size:.715rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.045em;
  color:var(--ink-500);
  white-space:nowrap;
}
table.tbl td{padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tbody tr:hover{background:var(--brand-100)}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl .num{font-family:var(--font-num);font-size:.8rem}
table.tbl .actions{white-space:nowrap;text-align:right}
.thumb-sq{
  width:38px;height:46px;border-radius:4px;object-fit:cover;
  background:var(--ink-100);border:1px solid var(--line);
}
.thumb-empty{
  width:38px;height:46px;border-radius:4px;
  background:var(--surface);border:1px dashed var(--ink-300);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-300);font-size:.62rem;text-align:center;line-height:1.1;
}

/* ---------- BADGES ---------- */
.badge{
  display:inline-block;padding:.16rem .48rem;
  border-radius:100px;font-size:.7rem;font-weight:650;
  white-space:nowrap;line-height:1.45;
}
.badge-green{background:var(--ok-100);color:var(--ok)}
.badge-amber{background:var(--warn-100);color:var(--warn)}
.badge-red{background:var(--err-100);color:var(--err)}
.badge-blue{background:var(--info-100);color:var(--info)}
.badge-violet{background:var(--violet-100);color:var(--violet)}
.badge-teal{background:var(--teal-100);color:var(--teal)}
.badge-gray{background:var(--gray-100);color:var(--gray)}

/* ---------- ALERTS ---------- */
.alert{
  padding:.7rem .9rem;border-radius:var(--radius-sm);
  margin-bottom:.9rem;font-size:.855rem;
  border-left:3px solid;display:flex;gap:.55rem;align-items:flex-start;
}
.alert-success{background:var(--ok-100);border-color:var(--ok);color:#0a5c3a}
.alert-error,.alert-danger{background:var(--err-100);border-color:var(--err);color:#8f1e17}
.alert-warning{background:var(--warn-100);border-color:var(--signal);color:#8a5200}
.alert-info{background:var(--info-100);border-color:var(--info);color:#155a87}

/* ---------- EMPTY STATE ---------- */
.empty{padding:2.75rem 1.25rem;text-align:center;color:var(--ink-500)}
.empty .empty-ic{
  width:52px;height:52px;margin:0 auto .8rem;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink-300);
}
.empty h3{color:var(--ink-700);font-size:.95rem;margin-bottom:.3rem}
.empty p{font-size:.845rem;max-width:400px;margin:0 auto .95rem}

/* ---------- PAGINATION ---------- */
.pagination{display:flex;gap:.3rem;padding:.8rem 1rem;justify-content:center;flex-wrap:wrap}
.pagination .pg{
  min-width:36px;height:36px;padding:0 .5rem;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--ink-700);font-size:.82rem;background:var(--panel);
}
.pagination .pg:hover{background:var(--surface);text-decoration:none}
.pagination .pg.active{background:var(--brand-600);border-color:var(--brand-600);color:#fff;font-weight:650}
.pagination .pg.disabled{opacity:.4;pointer-events:none}

/* ---------- MODAL ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(15,27,45,.52);
  display:none;align-items:center;justify-content:center;
  z-index:500;padding:1rem;
}
.modal-backdrop.open{display:flex}
.modal{
  background:var(--panel);border-radius:var(--radius);
  box-shadow:var(--shadow-3);
  width:100%;max-width:520px;max-height:90vh;
  display:flex;flex-direction:column;
}
.modal-head{
  padding:.85rem 1rem;border-bottom:1px solid var(--line);
  display:flex;align-items:center;
}
.modal-head h3{margin:0;font-size:.98rem;flex:1}
.modal-body{padding:1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal-foot{
  padding:.75rem 1rem;border-top:1px solid var(--line);
  display:flex;gap:.5rem;justify-content:flex-end;background:var(--surface);
  border-radius:0 0 var(--radius) var(--radius);
}
.modal-close{background:none;border:0;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--ink-500);padding:.2rem .4rem}

/* ---------- TOAST ---------- */
#toast-host{position:fixed;top:.85rem;right:.85rem;z-index:900;display:flex;flex-direction:column;gap:.5rem;max-width:330px}
.toast{
  background:var(--ink-900);color:#fff;
  padding:.65rem .85rem;border-radius:var(--radius-sm);
  font-size:.845rem;box-shadow:var(--shadow-2);
  animation:toastIn .2s ease;
}
.toast.ok{background:var(--ok)}
.toast.err{background:var(--err)}
.toast.warn{background:var(--signal)}
@keyframes toastIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

/* ---------- LOGIN ---------- */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:1.25rem;
  background:
    radial-gradient(1100px 480px at 12% -12%, #24408f 0%, transparent 62%),
    radial-gradient(900px 420px at 108% 112%, #0c2a52 0%, transparent 58%),
    var(--ink-900);
}
.auth-card{
  width:100%;max-width:392px;background:var(--panel);
  border-radius:12px;box-shadow:var(--shadow-3);
  padding:1.7rem 1.5rem;
}
.auth-logo{
  width:50px;height:50px;border-radius:12px;margin:0 auto .85rem;
  background:linear-gradient(135deg,var(--brand-500),var(--signal));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:1.05rem;
}
.auth-card h1{text-align:center;font-size:1.2rem;margin-bottom:.2rem}
.auth-sub{text-align:center;color:var(--ink-500);font-size:.83rem;margin-bottom:1.3rem}

/* ---------- UTILITIES ---------- */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mb1{margin-bottom:.5rem}.mb2{margin-bottom:1rem}.mb3{margin-bottom:1.5rem}
.mt1{margin-top:.5rem}.mt2{margin-top:1rem}.mt3{margin-top:1.5rem}
.text-c{text-align:center}.text-r{text-align:right}
.muted{color:var(--ink-500)}
.small{font-size:.79rem}
.xsmall{font-size:.72rem}
.bold{font-weight:650}
.nowrap{white-space:nowrap}
.flex{display:flex}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.flex-gap{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.hide{display:none !important}
.w100{width:100%}
.mono{font-family:var(--font-num)}

/* ---------- RESPONSIVE / MOBILE + WEBVIEW ---------- */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);box-shadow:var(--shadow-3)}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .hamburger{display:inline-flex;align-items:center;justify-content:center}
  .content{padding:.85rem}
  .sidebar-backdrop{
    position:fixed;inset:0;background:rgba(15,27,45,.45);
    z-index:190;display:none;
  }
  .sidebar-backdrop.open{display:block}
  .modal{max-width:100%}
  #toast-host{left:.7rem;right:.7rem;max-width:none}
}

/* Respect reduced-motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- PRINT ---------- */
@media print{
  .sidebar,.topbar,.no-print,.btn,#toast-host{display:none !important}
  .main{margin-left:0}
  .content{padding:0}
  .panel{border:0;box-shadow:none;margin:0}
  body{background:#fff}
}