/* KTE Service — "Service Line" design trial: Register (quotations, LPOs, projects, AMC billing, summary, downloads).
   Layout rules carried over from the working Register; the look is new (see the end of this file). */
/* ---------- Register (app/js/pages/register.js) ---------- */
.reg-pin { padding-bottom: 0; }
.reg-head { margin-bottom: 8px; }
.reg-tabs { margin-bottom: 8px; flex-wrap: wrap; }
.reg-badge { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.reg-filters { flex-wrap: wrap; }
.reg-filters input[type=search] { flex: 2 1 260px; }
.reg-filters input[type=text] { flex: 1 1 160px; }
.reg-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reg-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; }
.reg-row.is-focus { outline: 2px solid var(--link); }
.reg-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reg-no { font-size: 0.98rem; }
.reg-cust { font-weight: 600; margin-top: 2px; }
.reg-amount { text-align: right; display: grid; font-variant-numeric: tabular-nums; }
.reg-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 330px; }
.reg-preset { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.reg-preset span { display: block; }
.reg-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); font-size: 0.88rem; }
.reg-table th, .reg-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.reg-table thead th { background: var(--bg); color: var(--muted); font-size: 0.76rem; }
.reg-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.reg-table tfoot th, .reg-table tfoot td { background: var(--bg); }
.reg-summary tr.is-now th { color: var(--primary); }
.amc-bill { min-width: 1100px; }
.amc-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 10px; }
.qtn-preview { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 12px; margin: 4px 0 8px; }
.approve-type .po-field { margin: 6px 0 0; width: 100%; }
.approve-type { display: flex; flex-direction: column; gap: 4px; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 14px; }
.dl-grid .field { max-width: 240px; }
  .amc-months { grid-template-columns: repeat(3, 1fr); }
}
.reg-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .reg-tiles .tile b { font-size: 1.5rem; } @media (max-width: 820px), (pointer: coarse) and (max-height: 500px) { .reg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* long amounts and labels wrap inside the tile instead of pushing the row past the screen */
.reg-tiles .tile { min-width: 0; } .reg-tiles .tile b, .reg-tiles .tile span { overflow-wrap: anywhere; }
.kv.qtn-kv { grid-template-columns: 170px minmax(0, 1fr); gap: 6px 12px; font-size: 0.9rem; } .kv.qtn-kv dt { font-size: 0.82rem; }
.reg-only { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 12px; padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
/* the quotation button beside a row is a link too: keep it a plain small button, not the row's grid */
/* Register, Quotations tab: short cards (same look, less height) */
.qtn-rows { gap: 4px; }
.qtn-row { padding: 5px 12px; gap: 2px 12px; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 430px); }
.qtn-row .reg-top { gap: 4px 8px; }
.qtn-row .reg-cust { margin-top: 0; }
.qtn-row .reg-meta { font-size: 0.78rem; line-height: 1.35; margin-top: 1px; }
.qtn-row .reg-btns { gap: 4px; align-items: center; max-width: 640px; }
.qtn-row .btn.small { min-height: 26px; padding: 2px 9px; font-size: 0.78rem; }
.qtn-linked { display: inline-flex; align-items: center; }
.qtn-unlink { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 0.74rem; line-height: 1; padding: 4px 5px; border-radius: var(--radius-sm); }
.qtn-unlink:hover, .qtn-unlink:focus-visible { color: var(--danger); background: var(--bg); }
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) { .qtn-row { grid-template-columns: minmax(0, 1fr) auto; } .qtn-row .btn.small { min-height: 32px; } }
/* Add Quotation: Is it expected? */
.exp-choice { flex-direction: column; gap: 8px; }
.exp-btns { display: flex; gap: 8px; }
.exp-btns .btn { min-width: 84px; justify-content: center; }
.exp-month { margin: 0; }
/* Link Complaint pop-up: the complaint list, one tap links */
.lc-hint { margin: 6px 0 8px; }
.lc-list { max-height: 55vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lc-list > p, .lc-list > .empty { margin: 10px 12px; }
.lc-head { margin: 0; padding: 6px 12px; font-size: 0.76rem; color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--line); }
.lc-rows { list-style: none; margin: 0; padding: 0; }
.lc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; min-height: 44px; padding: 7px 12px; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.lc-row:hover, .lc-row:focus-visible { background: var(--bg); }
.lc-row:disabled { opacity: 0.6; cursor: wait; }
.lc-cust { font-weight: 600; }
.lc-site { font-size: 0.85rem; }
.lc-date { margin-left: auto; }

/* Register cards, every tab: number · status · customer · description on one line, the amount in BHD, then the buttons */
.reg-rows { gap: 4px; }
.reg-card { grid-template-columns: minmax(0, 1fr) 150px 390px; gap: 4px 14px; padding: 6px 12px; cursor: pointer; }
.reg-card:hover { border-color: var(--line-strong); }
.reg-card:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.reg-line { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.reg-line .reg-no, .reg-line .reg-badge, .reg-line .tag { flex: none; }
.reg-line .reg-cust { margin: 0; font-weight: 600; flex: 0 1 auto; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.reg-line .reg-desc { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 0.84rem; }
.reg-card .reg-amount { white-space: nowrap; }
.reg-card .reg-btns { flex-wrap: nowrap; align-items: center; gap: 4px; max-width: none; justify-content: flex-end; }
.reg-card .btn.small { min-height: 28px; padding: 3px 9px; font-size: 0.78rem; white-space: nowrap; }
.btn.icon-only { padding: 3px 7px; justify-content: center; }
.btn.icon-only svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.reg-link.is-linked { color: var(--link); border-color: #c6d7f5; background: var(--link-soft); }
.reg-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid #c6d7f5; background: var(--link-soft); color: var(--primary); font: 600 0.74rem var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; }
.reg-chip:hover { border-color: var(--link); }
.reg-details .reg-kv { margin: 0; }
.reg-details .reg-kv dd { overflow-wrap: anywhere; }
.reg-sub { margin: 14px 0 6px; font-size: 0.9rem; }
.rd-links { list-style: none; margin: 0; padding: 0; }
.rd-links li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.rd-links .rd-ref { font-weight: 700; }
.rd-links .rd-where { flex: 1 1 160px; min-width: 0; }
@media (max-width: 1100px) { .reg-card { grid-template-columns: minmax(0, 1fr) 130px; } .reg-card .reg-btns { grid-column: 1 / -1; justify-content: flex-start; } }
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  .reg-card { grid-template-columns: minmax(0, 1fr) auto; }
  .reg-line { flex-wrap: wrap; row-gap: 2px; }
  .reg-line .reg-cust { max-width: none; }
  .reg-line .reg-desc { flex: 1 1 100%; }
  .reg-card .reg-btns { flex-wrap: wrap; }
  .reg-card .btn.small, .reg-chip { min-height: 32px; }
}
/* Dashboard tiles: amounts with a small BHD; on phones two even columns, amounts sized to fit, a last odd tile spans the row */
.tile b .cur { font-size: 0.5em; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; vertical-align: 0.35em; }
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  .tiles, .tiles.reg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles .tile { min-width: 0; }
  .tiles.reg-tiles .tile { padding: 12px; }
  .tiles.reg-tiles .tile b { font-size: clamp(1rem, 5.2vw, 1.35rem); overflow-wrap: normal; white-space: nowrap; }
  .tiles > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  /* Register on phones: the tabs stay on one row (they scroll sideways), so the pinned part is only the button and the tabs */
  .reg-tabs { flex-wrap: nowrap; width: 100%; }
  .reg-tabs button { flex: 0 0 auto; }
}
/* Register details: each linked complaint on one row (number, customer · branch, status, Open, Unlink) */
.rd-links li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; flex-wrap: nowrap; }
.rd-links .rd-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .rd-links li { grid-template-columns: auto minmax(0, 1fr) auto; } .rd-links li .status-pill { grid-column: 2; } }
/* Register cards: the status sits at the end of the text, just before the amount */
.reg-line .reg-badge { margin-left: auto; }
/* Register cards on phones: the status follows the number and customer on the first line, left-aligned (not floating on a line of its own) */
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) { .reg-line .reg-badge { order: 1; margin-left: 0; } .reg-line .reg-desc { order: 2; } }
/* A PO entered before the approval: an error to fix (Approve, or Remove PO) */
.reg-chip.is-error { border-color: #F1B3AB; background: #FCEBEB; color: #791F1F; }
.reg-error { margin: 0 0 12px; padding: 8px 10px; border: 1px solid #F1B3AB; border-radius: var(--radius-sm); background: #FCEBEB; color: #791F1F; font-weight: 600; font-size: 0.86rem; }
.reg-error p { margin: 0 0 8px; }
.reg-error .reg-btns { justify-content: flex-start; max-width: none; }
.qtn-card .reg-error { margin: 10px 0 0; }
/* Register rows: soft tint by status like the office sheet */
.reg-card.reg-t-billed { background: #E9F6EE; border-color: #BFE0CB; }
.reg-card.reg-t-approved, .reg-card.reg-t-partially-billed, .reg-card.reg-t-ex-bill-missing { background: #E6F1FB; border-color: #BBD5EE; }
.reg-card.reg-t-not-expected, .reg-card.reg-t-expired, .reg-card.reg-t-declined { background: #FDECEC; border-color: #F1C4C4; }
.reg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.reg-fchip { border: 1px solid transparent; border-radius: 6px; padding: 3px 11px; font-size: 0.74rem; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; }
.reg-fchip b { margin-left: 4px; font-weight: 800; }
.reg-fchip.is-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
/* long descriptions: up to two small lines inside the same row height (full text on hover) */

/* ============================ the new look: a ledger ============================ */
.reg-total { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 12px; }
.reg-total b { font: 700 1.6rem var(--font-c); letter-spacing: -0.01em; }
.reg-rows { gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.reg-rows > li + li .reg-card, .reg-rows > .reg-card + .reg-card { border-top: 1px solid var(--line); }
.reg-card { border: 0 !important; border-radius: 0; background: var(--surface) !important; padding: 7px 16px 7px 18px; position: relative; }
.reg-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-strong); }
.reg-card.reg-t-billed::before { background: #2f8f3a; }
.reg-card.reg-t-approved::before, .reg-card.reg-t-partially-billed::before, .reg-card.reg-t-ex-bill-missing::before { background: #1f5fd1; }
.reg-card.reg-t-not-expected::before, .reg-card.reg-t-expired::before, .reg-card.reg-t-declined::before { background: var(--alert); }
.reg-card.reg-t-expected::before, .reg-card.reg-t-quoted::before { background: var(--accent); }
.reg-card:hover { background: var(--hover) !important; }
.reg-no { font: 700 1.02rem var(--font-c); }
.reg-line .reg-cust { font-weight: 700; }
.reg-card .reg-amount b { font: 700 1.1rem var(--font-c); }
.reg-card .btn.small { min-height: 30px; border-radius: 7px; }
.reg-badge { border-radius: 6px; padding: 2px 8px; font-size: 0.72rem; }
.reg-fchip { border-radius: 999px; padding: 5px 12px; font-size: 0.76rem; }
.reg-fchip.is-active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.reg-table { border-radius: var(--r); overflow: hidden; border-collapse: separate; border-spacing: 0; }
.reg-table thead th { font-size: 0.8rem; font-weight: 700; color: var(--ink-2); }
.reg-summary tr.is-now th { color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.reg-preset { border-radius: var(--r); }
.reg-chip { border-radius: 7px; }
.lc-list { border-radius: var(--r-sm); }
.lc-head { font-size: 0.8rem; font-weight: 700; }
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) { .reg-rows { border-radius: 14px; } .reg-card { padding: 12px 14px 12px 16px; } }
/* Register: the Add button and the tabs stay pinned under the top bar while the list scrolls */
.reg-pin { position: sticky; top: calc(var(--top-h) + var(--safe-t)); z-index: 11; background: var(--bg); padding: 10px 0 2px; margin: -10px 0 8px; }
.reg-pin .page-head { margin-bottom: 10px; }
.reg-pin .tabs { margin-bottom: 0; }
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) { .reg-pin { position: static; } }