/* Loan & Advance Console — shared look.
   Mobile-first where it matters: the worker and manager screens are used on phones on
   site, so tables collapse to cards below 640px rather than scrolling sideways. */

:root {
  --ink: #1b2430;
  --ink-soft: #55637a;
  --line: #d7dde7;
  --bg: #f4f6fa;
  --card: #ffffff;
  --brand: #1f6f5c;
  --brand-dark: #17594a;
  --accent: #b26a00;
  --danger: #b3261e;
  --danger-soft: #fdeceb;
  --ok: #1f6f5c;
  --ok-soft: #e7f3ef;
  --warn: #8a6100;
  --warn-soft: #fdf3e0;
  --font: 'Segoe UI', Tahoma, Arial, sans-serif;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.45;
}

/* ---------- toolbar ---------- */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; }

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .5px;
}

.brand-name { font-weight: 600; }

.toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.you { display: flex; align-items: center; gap: 6px; }
.you-label { color: var(--ink-soft); font-size: 13px; }

.you-select, input, select, textarea {
  font: inherit;
  color: inherit;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  max-width: 100%;
}

.role-badge {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--brand-dark);
  border: 1px solid #c6e0d8;
  white-space: nowrap;
}

.role-badge.role-admin { background: #eee9f7; color: #4a2f7a; border-color: #d6c9ec; }
.role-badge.role-manager { background: var(--warn-soft); color: var(--warn); border-color: #eddcb4; }
.role-badge.role-worker { background: #eaf0f8; color: #2c4a73; border-color: #cddcef; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font: inherit;
  padding: 7px 13px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
}

.btn:hover { background: #f7f9fc; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: #fff; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-outline { color: var(--danger); border-color: #e7b9b6; }

#btn-worker-signin { background: #e8720c; border-color: #e8720c; color: #fff; }
#btn-worker-signin:hover { background: #cf6408; }

/* ---------- sync banner ---------- */

.sync-banner {
  padding: 9px 16px;
  font-size: 14px;
  border-bottom: 1px solid transparent;
}

.sync-warn { background: var(--warn-soft); color: var(--warn); border-bottom-color: #eddcb4; }
.sync-error { background: var(--danger-soft); color: var(--danger); border-bottom-color: #f0c4c1; }

/* ---------- layout ---------- */

.board {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px;
}

.tab-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.tab-btn {
  font: inherit;
  padding: 8px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 6px 6px 0 0;
}

.tab-btn:hover { color: var(--ink); background: #eef2f8; }

.tab-btn.tab-active {
  color: var(--brand-dark);
  border-bottom-color: var(--brand);
  font-weight: 600;
}

.badge {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.placeholder {
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 28px;
  color: var(--ink-soft);
  text-align: center;
}

.muted { color: var(--ink-soft); font-size: 14px; }

/* ---------- status pills ---------- */

.status-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.status-DRAFT, .status-PENDING { background: #eef1f6; color: var(--ink-soft); border-color: var(--line); }
.status-SUBMITTED, .status-MANAGER_OK, .status-COUNSELOR_OK, .status-PUBLISHED {
  background: var(--warn-soft); color: var(--warn); border-color: #eddcb4;
}
.status-APPROVED, .status-DISBURSED, .status-DEDUCTED, .status-CLOSED {
  background: var(--ok-soft); color: var(--brand-dark); border-color: #c6e0d8;
}
.status-REJECTED, .status-CANCELLED, .status-VOID {
  background: var(--danger-soft); color: var(--danger); border-color: #f0c4c1;
}
.status-RETURNED, .status-PARTIAL, .status-SKIPPED {
  background: #f3edfa; color: #5b3f8c; border-color: #ddd0ee;
}

/* ---------- forms ---------- */

.form-error {
  color: var(--danger);
  font-size: 13px;
  margin: 6px 0 0;
}

/* ---------- modals ---------- */

.modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 40; }
.modal[hidden] { display: none; }

.modal-backdrop { position: absolute; inset: 0; background: rgba(20, 28, 38, .45); }

.modal-card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  width: min(420px, calc(100vw - 32px));
  box-shadow: 0 12px 32px rgba(15, 23, 35, .22);
}

.modal-card h2 { margin: 0 0 6px; font-size: 18px; }
.modal-card input { width: 100%; margin-top: 10px; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* ---------- responsive ---------- */

/* ---------- data tables and panels (Workers / Users & PINs) ---------- */

.panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.panel-toolbar input[type="search"] { flex: 1; min-width: 220px; }
.panel-title-inline { margin: 0; font-size: 15px; }

.reconcile-totals { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); }
.reconcile-totals strong { color: var(--ink); margin-left: 4px; }

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.panel h3 { margin: 0 0 6px; font-size: 15px; }
.panel.danger-zone { border-color: #f0c4c1; background: var(--danger-soft); }
.panel.danger-zone h3 { color: var(--danger); }

.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }

.data-table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.data-table th, .data-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.data-table th { background: #eef2f8; font-weight: 600; }
.data-table tbody tr:last-child td { border-bottom: none; }

.btn-sm { padding: 4px 9px; font-size: 12px; margin-right: 4px; }

.notice {
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  font-size: 14px;
}

.notice-warn { background: var(--warn-soft); color: var(--warn); border: 1px solid #eddcb4; }
.notice-info { background: var(--ok-soft); color: var(--brand-dark); border: 1px solid #c6e0d8; }
.coverage-list { margin: 6px 0 0; padding-left: 18px; }

.pin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.pin-row:last-child { border-bottom: none; }
.pin-row > span:first-child { min-width: 140px; font-weight: 600; }
.pin-row > span:nth-child(2) { flex: 1; }

.quick-add-row { display: flex; gap: 8px; margin-top: 8px; }
.quick-add-row input { flex: 1; }

.scope-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.scope-row:last-child { border-bottom: none; }
.scope-num { min-width: 26px; text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.scope-name { min-width: 150px; font-weight: 600; }
.small-note { font-size: 12px; max-width: 260px; }

.scope-assigned { flex: 1; min-width: 160px; color: var(--ink-soft); font-size: 13px; }
.scope-assigned .tag {
  display: inline-block;
  background: #eef2f8;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  margin: 2px 4px 2px 0;
  font-size: 12px;
  color: var(--ink);
}

#scope-assign-search,
#workplace-list-search,
#nationality-list-search { width: 100%; margin: 10px 0; }

.check-list-scroll {
  max-height: 320px;
  overflow-y: auto;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
}
/* Fixed-width checkbox column, not a flex row — a flex row here left the checkbox and
   name free to drift apart because each label is a full-width block (its flex container
   spans the whole list width), and the native checkbox's own margin then reads as
   deliberate spacing. Grid pins every row's checkbox to the same column regardless of how
   long the name next to it is. This also overrides `.form-row label`'s column layout
   (higher specificity here: two classes beat one element+class), so the per-manager
   form's workplace/nationality checklists get the same fix. */
.check-list-scroll .check-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  column-gap: 8px;
  padding: 5px 2px;
  font-size: 14px;
  text-align: left;
}
.check-list-scroll .check-item input[type="checkbox"] {
  margin: 0;
  width: 16px;
  height: 16px;
}
.check-list-scroll .check-item.hidden-by-search { display: none; }

/* ---------- worker/user form modals ---------- */

.modal-wide { width: min(560px, calc(100vw - 32px)); max-height: 88vh; overflow-y: auto; }
.modal-xwide { width: min(960px, calc(100vw - 32px)); max-height: 88vh; overflow-y: auto; }

.import-preview-summary { margin: 12px 0 6px; }
.import-row-error td { background: var(--danger-soft); }
.import-row-warn td { background: var(--warn-soft); }
.import-issue { font-size: 12px; margin: 2px 0 0; }
.import-issue-error { color: var(--danger); }
.import-issue-warn { color: var(--warn); }
.import-issue-info { color: var(--ink-soft); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-top: 6px;
}

/* `.form-row` is used two ways: a <div> wrapping its own <label> (matched by the
   descendant selector) and a <label class="form-row"> directly (an element that IS a
   label, not one nested inside .form-row — needs its own selector or it falls back to
   inline layout and the field beside it goes a stray, unwidened default size). */
.form-grid label, .form-row label, label.form-row { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-soft); }
.form-grid input, .form-grid select, .form-grid textarea,
.form-row input, .form-row select, .form-row textarea,
label.form-row input, label.form-row select, label.form-row textarea { width: 100%; }

.checkbox-row { flex-direction: row !important; align-items: center; gap: 6px !important; }

.fieldset { border: 1px solid var(--line); border-radius: 6px; margin-top: 14px; padding: 10px 12px; }
.fieldset legend { padding: 0 6px; font-size: 13px; color: var(--ink-soft); }

.form-row { margin-top: 12px; }

.check-list { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 6px; }
.check-item { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink); }

.combo-list {
  position: relative;
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-top: 4px;
  background: #fff;
}
.combo-item { padding: 6px 10px; cursor: pointer; font-size: 13px; }
.combo-item:hover { background: #eef2f8; }

.lookalike-box {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--warn-soft);
  border: 1px solid #eddcb4;
  font-size: 13px;
}
.lookalike-box .lookalike-item { padding: 4px 0; }
.lookalike-box.lookalike-blocked { background: var(--danger-soft); border-color: #f0c4c1; color: var(--danger); }

/* ---------- loan cards, timeline, queue ---------- */

.balance-banner {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 16px;
}
.balance-label { color: var(--ink-soft); font-size: 13px; }
.balance-amount { font-size: 26px; font-weight: 700; color: var(--danger); }

.loan-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.loan-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.loan-type-label { text-decoration: underline; }
.loan-amount { font-weight: 800; }
.request-no { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.loan-timeline { margin-top: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.loan-card-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

.timeline-chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.timeline-arrow { color: var(--ink-soft); font-size: 12px; margin: 0 2px; }
.timeline-done { background: var(--ok-soft); color: var(--brand-dark); }
.timeline-current { background: var(--brand); color: #fff; font-weight: 600; }
.timeline-pending { background: #eef1f6; color: var(--ink-soft); }

.queue-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
.queue-card-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.queue-card-meta { color: var(--ink-soft); font-size: 13px; margin-top: 4px; }
.queue-card-note { margin-top: 8px; padding: 8px 10px; background: #f7f9fc; border-radius: 6px; font-size: 13px; }
.queue-card-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.aged-flag { color: var(--danger); font-weight: 600; }

@media (max-width: 640px) {
  .loan-card-head, .queue-card-head { flex-direction: column; gap: 4px; }
}

.audit-row { padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.audit-row:last-child { border-bottom: none; }
.audit-row-head { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.audit-row-meta { color: var(--ink-soft); margin-top: 2px; }
.audit-row-note { margin-top: 4px; }

.attachment-section .scope-list { margin: 6px 0 8px; }
.attachment-upload-btn { margin-top: 4px; }
.attachment-upload-status { margin-left: 8px; }

/* ---------- deduction builder ---------- */

.scope-row-active { background: var(--ok-soft); border-radius: 6px; }

.schedule-tools { justify-content: flex-start; margin-top: 8px; }

.schedule-rows { margin-top: 10px; }
.schedule-row {
  display: grid;
  grid-template-columns: 90px 1fr 140px auto;
  gap: 8px;
  align-items: center;
  padding: 5px 2px;
  border-bottom: 1px solid var(--line);
}
.schedule-row:last-child { border-bottom: none; }
.schedule-row-head { font-size: 12px; padding-bottom: 6px; }
.schedule-row input { width: 100%; }

.issue-list { margin: 10px 0 0; padding-left: 20px; font-size: 13px; }
.issue-error { color: var(--danger); }
.issue-warn { color: var(--warn); }

@media (max-width: 640px) {
  .schedule-row { grid-template-columns: 70px 1fr 1fr; }
  .schedule-row button { grid-column: 1 / -1; }
}

.renewal-row {
  display: grid;
  grid-template-columns: 200px 110px 90px 130px 200px 90px;
  gap: 8px;
  align-items: center;
  padding: 6px 2px;
  border-bottom: 1px solid var(--line);
}
.renewal-row:last-child { border-bottom: none; }
.renewal-row-head { font-size: 12px; padding-bottom: 6px; }
.renewal-row input { width: 100%; }
.renewal-row-name { display: flex; flex-direction: column; font-size: 13px; }

@media (max-width: 780px) {
  .renewal-row { grid-template-columns: 1fr 1fr; }
  .renewal-row button { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .toolbar { align-items: flex-start; }
  .board { padding: 12px; }
  .tab-nav { overflow-x: auto; flex-wrap: nowrap; }
  .tab-btn { white-space: nowrap; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .panel-toolbar { flex-direction: column; align-items: stretch; }
}