/* Travel Expense Claim module.
   Loaded alongside index.html's inline styles and reusing its tokens, so the
   two modules cannot drift apart on colour or spacing. Brand reference:
   Petrol #003D44, Green #48822A, Lime #C1FA00. */

:root {
  --petrol: #003D44;
  --green:  #48822A;
  --lime:   #C1FA00;
}

.exp-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.exp-head h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--petrol); letter-spacing: -.2px; }
html.theme-classic .exp-head h2 { font-size: 18px; font-weight: 600; letter-spacing: 0; }
.exp-head .spacer { margin-inline-start: auto; }

.exp-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 16px; }
.exp-card {
  background: #fff; border: 1px solid #D7DEDF; border-radius: 8px; padding: 12px 16px;
}
.exp-card .k { font-size: 11px; color: #5C7176; font-weight: 500; }
.exp-card .v { font-size: 21px; font-weight: 700; color: var(--petrol); margin-top: 3px; }
html.theme-classic .exp-card { border-radius: 10px; padding: 14px; border-color: var(--border); }
html.theme-classic .exp-card .k { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
html.theme-classic .exp-card .v { font-size: 20px; letter-spacing: 0; }
.exp-card.alert .v { color: var(--green); }

.exp-section {
  border: 1px solid #D7DEDF; border-radius: 8px; margin: 12px 0; background: #fff;
}
.exp-section > summary {
  cursor: pointer; padding: 10px 14px; font-weight: 700; font-size: 13px; color: var(--petrol);
  list-style: none; display: flex; align-items: center; gap: 10px;
}
html.theme-classic .exp-section { border-radius: 10px; margin: 14px 0; border-color: var(--border); }
html.theme-classic .exp-section > summary { padding: 12px 14px; font-size: 13.5px; }
.exp-section > summary::-webkit-details-marker { display: none; }
.exp-section > summary::before { content: "\25B8"; color: var(--muted); transition: transform .15s; }
.exp-section[open] > summary::before { transform: rotate(90deg); }
.exp-section .body { padding: 0 14px 14px; }
.exp-section .sec-total { margin-inline-start: auto; font-weight: 600; color: var(--green); font-size: 12.5px; }

/* Line tables. Wide on a desktop, stacked cards on a phone: an expense row has
   eight columns and no amount of horizontal scrolling makes that usable at
   390px. */
.lines { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lines th {
  text-align: start; font-size: 12px;
  color: #5C7176; padding: 6px 6px; border-bottom: 1px solid #D7DEDF; font-weight: 600;
}
html.theme-classic .lines th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
.lines td { padding: 5px 4px; border-bottom: 1px solid var(--border); vertical-align: top; }
.lines input, .lines select { width: 100%; min-width: 0; padding: 6px 7px; font-size: 12.5px; }
.lines td.num input { text-align: end; }
.lines tfoot td { font-weight: 700; color: var(--petrol); border-bottom: none; padding-top: 8px; }
.line-del {
  background: none; border: 0; color: var(--red, #b42318); cursor: pointer; font-size: 16px; padding: 2px 6px;
}
.chip {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .4px;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.chip.ai      { background: #E6F9A5; color: #2C5C19; }
.chip.manual  { background: #E8EFF0; color: #003D44; }
.chip.review  { background: #F6E9E6; color: #9A4630; }
.chip.ok      { background: #E9F3E3; color: #48822A; }
html.theme-classic .chip.ai     { background: #eef4ff; color: #1d4ed8; }
html.theme-classic .chip.manual { background: #eef4f5; color: var(--petrol); }
html.theme-classic .chip.review { background: #fff4e0; color: #92600a; }
html.theme-classic .chip.ok     { background: #eaf6e6; color: var(--green); }

.totals-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.totals-grid .t { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: #fbfcfd; }
.totals-grid .t .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.totals-grid .t .v { font-size: 16px; font-weight: 700; color: var(--petrol); }
.totals-grid .t.grand { background: var(--petrol); border-color: var(--petrol); }
.totals-grid .t.grand .k { color: rgba(255,255,255,.75); }
.totals-grid .t.grand .v { color: #fff; }
.totals-grid .t.due  { background: var(--lime); border-color: var(--lime); }
.totals-grid .t.due .k { color: rgba(0,61,68,.7); }
.totals-grid .t.due .v { color: var(--petrol); }
.words { margin-top: 8px; font-size: 12px; color: var(--muted); font-style: italic; }

.drop {
  border: 1px dashed #D7DEDF; border-radius: 8px; padding: 18px; text-align: center;
  background: #fff;
}
.drop:hover { border-color: var(--petrol); background: #E8EFF0; }
.drop.over { border-color: var(--green); background: #E6F9A5; }
html.theme-classic .drop { border: 2px dashed var(--border); border-radius: 10px; background: #fbfcfd; }
html.theme-classic .drop.over { background: #f2f9ef; }
.drop .hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.drop-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

.timeline { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.timeline li { padding: 8px 0 8px 16px; border-inline-start: 2px solid var(--border); position: relative; }
.timeline li::before {
  content: ""; position: absolute; inset-inline-start: -5px; top: 13px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
}
.timeline .when { color: var(--muted); font-size: 11.5px; }

.err-list { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 8px; padding: 12px 14px; margin: 12px 0; }
.err-list ul { margin: 6px 0 0; padding-inline-start: 18px; }
.fx-mini { display: flex; gap: 4px; align-items: center; margin-bottom: 4px; }
.fx-mini input[data-field="currency"] { width: 58px; }
.fx-mini input[data-field="foreign_amount"] { width: 84px; }
.fx-mini input[data-field="fx_rate"] { width: 84px; }
.fx-mini .x { color: var(--muted, #6b7280); }
td [data-field="amount_sar"][readonly] { background: #f8fafc; }
input.field-err, select.field-err, textarea.field-err {
  border-color: #dc2626 !important;
  background: #fef2f2;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* ---- Claims log: one claim per line ----------------------------------
   Every cell refuses to wrap; the long department name gets an ellipsis and
   the table scrolls inside its wrapper on a narrow window instead of folding
   each claim onto three lines. The phone card layout below still wins under
   780px. */
.log-table th, .log-table td { white-space: nowrap; }
.log-table td { padding: 7px 6px; }
.log-table td:nth-child(5) { max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
.log-table .btn-sm { padding: 4px 8px; }
@media (max-width: 780px) {
  .log-table th, .log-table td { white-space: normal; }
  .log-table td:nth-child(5) { max-width: none; }
}

.rcpt-preview { width: 100%; height: 60vh; border: 1px solid var(--border); border-radius: 8px; }
.rcpt-img { width: 100%; border: 1px solid var(--border); border-radius: 8px; }

@media (max-width: 780px) {
  .lines thead { display: none; }
  .lines, .lines tbody, .lines tr, .lines td { display: block; width: 100%; }
  .lines tr { border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 10px; position: relative; }
  .lines td { border: none; padding: 4px 0; }
  .lines td::before {
    content: attr(data-label); display: block; font-size: 10px; text-transform: uppercase;
    letter-spacing: .5px; color: var(--muted); margin-bottom: 2px;
  }
  .lines tfoot { display: block; }
  .lines tfoot tr { border: none; }
  .exp-head .spacer { margin-inline-start: 0; width: 100%; }

  /* 16px is the threshold below which iOS zooms the page on focus. */
  .lines input, .lines select { font-size: 16px; }

  /* In the stacked card the delete cross sits at the card's top corner
     rather than becoming a full-width row of its own. */
  .lines td[data-label=""]:has(> .line-del) { position: absolute; top: 2px; inset-inline-end: 4px; width: auto; padding: 0; }
  .lines td[data-label=""]::before { display: none; }

  /* Log rows carry their action buttons inline; those cells are the same
     empty-label cells, so give the log's button group room instead. */
  .lines td[data-label=""] .btn { margin: 2px; }

  .fx-mini { flex-wrap: wrap; }
  .fx-mini input { font-size: 16px; }

  /* Card polish: labels always sit at the start even on numeric cells, the
     iOS date field stops sizing itself past the card, the cross gets its own
     row of air, and the short fields pair up instead of one long column. */
  .lines tr { padding: 14px 12px 10px; }
  .lines td.num { text-align: start; }
  .lines td.num input { text-align: end; }
  .lines input[type="date"] {
    -webkit-appearance: none; appearance: none;
    width: 100%; min-height: 44px; text-align: start;
  }
  .lines td[data-label="Amount SAR"]:not(:has(.fx-mini)),
  .lines td[data-label="VAT SAR"] {
    display: inline-block; width: 49%; vertical-align: top;
  }
  .lines td[data-label="Receipt"],
  .lines td[data-label="Source"],
  .lines td[data-label="Foreign"] {
    display: inline-block; width: 32%; vertical-align: top;
  }

  .lines .btn-sm { padding: 10px 12px; }
  /* Thumb-sized targets for the tick and the cross. */
  .lines input[type="checkbox"] { width: 20px; height: 20px; }
  .line-del { font-size: 22px; padding: 6px 10px; }
}

/* ---- Receipt reading progress ---------------------------------------
   A batch of phone photographs can take half a minute. A bar with a count
   and a per file line says what is happening; a spinner with no end in
   sight reads as a hang. */
.rcpt-prog { margin-top: 12px; }
.rcpt-prog .bar {
  height: 8px; border-radius: 999px; background: #e6ebec; overflow: hidden;
}
.rcpt-prog .bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--green, #48822A), var(--lime, #C1FA00));
  transition: width .3s ease;
}
/* While work is running the fill carries moving stripes and never sits at a
   dead zero, so a glance always shows something happening. */
.rcpt-prog.active .bar span {
  min-width: 5%;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px),
    linear-gradient(90deg, var(--green, #48822A), var(--lime, #C1FA00));
  background-size: 17px 17px, 100% 100%;
  animation: rcpt-stripes .7s linear infinite;
}
@keyframes rcpt-stripes { to { background-position: 17px 0, 0 0; } }
.rcpt-files li.busy .st::after {
  content: ''; display: inline-block; width: 1.2em; text-align: start;
  animation: rcpt-dots 1.2s steps(4, end) infinite;
}
@keyframes rcpt-dots {
  0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; }
}
@media (prefers-reduced-motion: reduce) {
  .rcpt-prog.active .bar span, .rcpt-files li.busy .st::after { animation: none; }
}
.rcpt-prog-text {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 6px; font-size: 12px; color: var(--muted);
}
.rcpt-files { list-style: none; margin: 8px 0 0; padding: 0; font-size: 12px; }
.rcpt-files li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 0; border-bottom: 1px solid var(--border); color: var(--muted);
}
.rcpt-files li .nm {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rcpt-files li .st { white-space: nowrap; }
.rcpt-files li.ok  .st { color: var(--green, #48822A); font-weight: 600; }
.rcpt-files li.bad .st { color: var(--red, #b42318); font-weight: 600; }

/* ---- Admin controls, People table ------------------------------------
   Six columns, related fields stacked inside each, so the whole table fits a
   normal window without sideways scrolling. The scroll wrapper stays only as
   a fallback for genuinely narrow windows. */
.table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.people { min-width: 860px; }
.people th { white-space: nowrap; vertical-align: bottom; line-height: 1.3; }
.people td { padding: 10px 8px; }
.people td:first-child { min-width: 200px; }
.people .stack { display: grid; gap: 6px; }
.people select, .people input[type="text"], .people input[type="number"] {
  width: 100%; min-width: 0;
}
.people .mini {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
}
.people .mini input { flex: 1; }
.people .ticks label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink, #1c2330); cursor: pointer; white-space: nowrap;
}
.people input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--green, #48822A); flex: none;
}
.people .btn-sm { justify-self: start; }

@media (max-width: 780px) {
  .people { min-width: 0; }
  .people td::before { display: none; }  /* the stacks label themselves */
}

.people .btn-sm.danger { color: #b42318; border-color: #f3c9c4; }
.people .btn-sm.danger:hover { background: #fef2f2; }

/* Workflow designer */
.wf-flow { display:flex; flex-direction:column; gap:0; margin-top:10px; }
.wf-node { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid #e3e8ea; border-radius:10px; background:#fff; position:relative; margin-bottom:18px; }
.wf-node::after { content:''; position:absolute; left:26px; bottom:-18px; width:2px; height:18px; background:#cfd8db; }
.wf-node:last-child::after { display:none; }
.wf-node.wf-fixed { background:#f6f8f9; }
.wf-node.wf-off { opacity:.6; border-style:dashed; }
.wf-n { flex:0 0 28px; height:28px; border-radius:50%; background:var(--petrol,#003D44); color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; }
.wf-off .wf-n { background:#9aa6aa; }
.wf-body { flex:1; min-width:0; }
.wf-head { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.wf-label { font-weight:700; font-size:14px; border:1px solid transparent; background:transparent; padding:4px 6px; border-radius:6px; min-width:160px; }
.wf-label:hover, .wf-label:focus { border-color:#cfd8db; background:#fff; }
.wf-switch { font-size:12px; font-weight:600; display:flex; gap:6px; align-items:center; }
.wf-move { margin-left:auto; display:flex; gap:4px; }
.wf-holders { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.wf-pick summary { cursor:pointer; font-size:12px; color:var(--petrol,#003D44); font-weight:600; }
.wf-pick-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:4px 14px; margin-top:8px; font-size:13px; }
.wf-pick-list label { display:flex; gap:6px; align-items:center; }
@media (max-width:640px){ .wf-move { margin-left:0; } }

/* Detail header: title left, one primary right, the rest behind More */
.exp-head-detail { display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:10px 0 18px; margin-bottom:4px; border-bottom:1px solid #e3e8ea; }
.exp-head-detail .exp-title { display:flex; flex-direction:column; gap:6px; min-width:0; }
.exp-head-detail .exp-title #expBack { align-self:flex-start; background:transparent; border:0; box-shadow:none; padding:0; font-size:12.5px; font-weight:600; color:var(--petrol,#003D44); opacity:.85; }
.exp-head-detail .exp-title #expBack:hover { opacity:1; text-decoration:underline; }
.exp-head-detail .exp-title h2 { margin:0; display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:26px; letter-spacing:-.2px; }
.exp-head-detail .exp-title .muted-note { font-size:13.5px; }
.exp-head-detail .exp-actions { margin-left:auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.exp-head-detail .row-menu { position:relative; display:inline-block; }
.exp-head-detail .row-menu > summary { list-style:none; cursor:pointer; display:inline-block; }
.exp-head-detail .row-menu > summary::-webkit-details-marker { display:none; }
.exp-head-detail .row-menu-list { position:absolute; right:0; top:calc(100% + 6px); z-index:40; background:#fff; border:1px solid #e3e8ea; border-radius:10px; box-shadow:0 12px 30px rgba(0,61,68,.14); min-width:200px; padding:6px; display:flex; flex-direction:column; }
.exp-head-detail .row-menu-list .menu-item { background:transparent; border:0; text-align:left; padding:9px 11px; border-radius:7px; font:inherit; font-size:13.5px; color:#13191B; cursor:pointer; }
.exp-head-detail .row-menu-list .menu-item:hover { background:#f3f6f7; }
.exp-head-detail .row-menu-list .menu-item.danger { color:#b91c1c; }
@media (max-width:700px) { .exp-head-detail .exp-actions { margin-left:0; width:100%; } }

/* ── The claim form's rail (prototype parity with the request form) ── */
.exp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 20px; align-items: start; }
.exp-main { min-width: 0; }
.exp-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }
.rail-kv { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid #D7DEDF; }
.rail-kv:last-child { border-bottom: 0; }
.rail-kv span { color: #5C7176; }
.rail-kv b { font-variant-numeric: tabular-nums; }
.rail-kv.total b { color: var(--petrol); }
@media (max-width: 1000px) {
  .exp-cols { grid-template-columns: 1fr; }
  .exp-rail { position: static; }
}
html.theme-classic .exp-cols { display: block; }
html.theme-classic .exp-rail { position: static; margin-top: 14px; }

/* Modern v2 density for the claims screens; classic keeps its scale. */
.lines th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; background: #FAFBFB; }
html.theme-classic .lines th { background: transparent; }

/* Autosave (2026-09-03): quiet status beside the Save button. */
.autosave-status { font-size: 12.5px; color: var(--muted, #5C7176); align-self: center; }
.autosave-status.warn { color: #9A4630; }
/* Receipts covered by the per diem (hotel, meals): recorded, not reimbursed. */
.lines tr.line-covered input[data-field="amount_sar"],
.lines tr.line-covered input[data-field="vat_sar"] { color: #5C7176; }
.covered-note { font-size: 11px; color: #5C7176; margin-top: 3px; }
.lines tfoot tr.covered-foot td { font-weight: 400; color: #5C7176; font-size: 12.5px; }
.rail-kv.muted span, .rail-kv.muted b { color: #5C7176; font-weight: 400; }

/* Policy fields (2026-09-03) */
.check-row { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 13.5px; }
.check-row input { width: auto; margin-top: 3px; }
.rail-kv b .muted { color: #5C7176; font-weight: 400; font-size: 12px; }
#railCap.warn { color: #9A4630; }