/* Sun Orchard brand skin. See docs/design-system.md.
   Loaded after Bootstrap; class names are generic so they don't collide. */

:root {
  --brand-navy: #1d2d5a;
  --brand-navy-dark: #16224a;
  --brand-green: #2f9e44;
  --brand-bg: #f6f8fb;
  --brand-border: #e4e8ef;
}

html, body { height: 100%; }
.app-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--brand-bg);
}

/* Top navbar: white bar, navy text, green active link, icon-over-label links */
.app-navbar { background: #fff; border-bottom: 1px solid var(--brand-border); }
.app-navbar .brand-title { color: var(--brand-navy); font-size: 1.25rem; }
.app-navbar .nav-link { color: var(--brand-navy); font-size: 0.85rem; font-weight: 600; }
.app-navbar .nav-link i { font-size: 1.1rem; }
.app-navbar .nav-link.active { color: var(--brand-green); }

/* Thin green accent bar directly under the navbar */
.accent-bar { height: 3px; background: var(--brand-green); }

/* Page titles */
.page-title { color: var(--brand-navy); font-weight: 700; }
.page-title i { margin-right: .4rem; }

/* Navy section-header bar sitting on top of a white bordered body */
.section-bar {
  background: var(--brand-navy); color: #fff;
  border-radius: .4rem .4rem 0 0; padding: .5rem .9rem; font-weight: 600;
}
.section-bar i { margin-right: .4rem; }
.section-body {
  background: #fff; border: 1px solid var(--brand-border);
  border-top: 0; border-radius: 0 0 .4rem .4rem;
}

/* KPI cards with colored icon tiles */
.kpi-card { background: #fff; border: 1px solid var(--brand-border); border-radius: .5rem; }
.kpi-card .icon-tile {
  width: 48px; height: 48px; border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff;
}
.kpi-card .kpi-label { color: #6b7280; font-size: .85rem; }
.kpi-card .kpi-value { color: var(--brand-navy); font-size: 1.4rem; font-weight: 700; }
.kpi-card .kpi-sub { color: #9aa2b1; font-size: .78rem; }
.kpi-card .card-footer { background: #fbfcfe; border-top: 1px solid #eef1f6; font-size: .85rem; }
.tile-navy  { background: var(--brand-navy); }
.tile-green { background: var(--brand-green); }
.tile-amber { background: #e8a13c; }
.tile-red   { background: #d9534f; }
.tile-teal  { background: #3bc9db; }

/* Compact tables + right-aligned tabular numbers */
.table-sm td, .table-sm th { font-size: .85rem; }
.amount { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Soft status badges (pale bg, dark text) */
.badge-matched   { background: #d3f0d9; color: #1e7a32; }
.badge-flagged   { background: #fdeccf; color: #a4700f; }
.badge-approved  { background: var(--brand-navy); color: #fff; }
.badge-unmatched { background: #f3d6d5; color: #94302c; }

/* Subtle inset detail box */
.detail-box { background: #f8fafc; border: 1px solid var(--brand-border); border-radius: .4rem; }

/* Dark-navy footer */
.app-footer { background: var(--brand-navy-dark); color: #cdd5e8; }
.app-footer em { color: #9fe0ae; }

/* --- app-specific additions, built from the tokens above --- */

/* Selectable rows in the reconciliation panes */
.selectable { cursor: pointer; }
.selectable.selected { background: #e8f0ff; box-shadow: inset 3px 0 0 var(--brand-navy); }
.row-matched { opacity: .72; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }
.page-thumb { max-width: 100%; border: 1px solid var(--brand-border); border-radius: .3rem; }
.scroll-pane { max-height: 30rem; overflow-y: auto; }

/* --- full-screen check editor --- */

/* The scan stays put while the line table scrolls beside it */
.image-pane { position: sticky; top: .75rem; }
.page-viewport {
  overflow: auto;
  max-height: calc(100vh - 15rem);
  background: #f1f3f7;
  border: 1px solid var(--brand-border);
  border-radius: .3rem;
}
.page-viewport img { display: block; width: 100%; transform-origin: top left; }

/* A line that still needs a GL account */
.needs-gl input.gl-cell { background: #fdeccf !important; box-shadow: inset 0 0 0 1px #e8a13c; }
.suggest-gl { display: block; margin-top: .2rem; white-space: nowrap; }

.gl-popup {
  position: absolute; z-index: 1080; width: 30rem; background: #fff;
  border: 1px solid var(--brand-border); border-radius: .4rem; padding: .5rem;
}
.gl-results { max-height: 18rem; overflow-y: auto; margin-top: .4rem; }
.gl-option { padding: .35rem .5rem; border-radius: .25rem; cursor: pointer; font-size: .82rem; }
.gl-option:hover, .gl-option.active { background: #e8f0ff; }
.gl-option .acct { font-family: ui-monospace, Consolas, monospace; color: var(--brand-navy); font-weight: 600; }
.gl-option .cat { color: #6b7280; }
.gl-option .dsc { color: #9aa2b1; font-size: .76rem; }

/* An excluded check is visibly out of the deposit */
.row-excluded { opacity: .55; text-decoration: line-through; }

/* Open-items drill-down */
.kpi-card.clickable { cursor: pointer; transition: box-shadow .12s; }
.kpi-card.clickable:hover { box-shadow: 0 .25rem .6rem rgba(29,45,90,.12); }

/* Subtotal/total lines: kept for audit, but visibly not part of the total */
.row-summary { background: #f8fafc; color: #6b7280; font-style: italic; }
.row-summary input, .row-summary select { color: #6b7280; font-style: italic; }

/* Editable cells read as fields only on hover/focus, so the table stays calm */
tbody input.form-control:hover { background: #fbfcfe !important; }
tbody input.form-control:focus, tbody select.form-select:focus {
  background: #fff !important; box-shadow: 0 0 0 .15rem rgba(29,45,90,.15);
}
.table-wrap { overflow-x: auto; }

/* --- invoice application: the strip under each remittance line --- */

/* Reads as attached to the line above it, not as a row of its own. */
tr.apply-row > td {
  padding: 0 .4rem .5rem 2.9rem !important;
  border-top: 0;
  background: #fbfcfe;
}
tr.apply-row .apply-strip {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .78rem; color: #4b5563;
  border-left: 3px solid var(--brand-border);
  padding: .3rem .55rem; border-radius: 0 .3rem .3rem 0;
}
/* The left edge carries the state, so a long check can be read by scanning it */
tr.apply-row .apply-strip.is-applied  { border-left-color: var(--brand-green); background: #f2fbf4; }
tr.apply-row .apply-strip.is-ready    { border-left-color: #3bc9db; }
tr.apply-row .apply-strip.is-review   { border-left-color: #e8a13c; background: #fffdf7; }
tr.apply-row .apply-strip.is-none     { border-left-color: var(--brand-border); }

.apply-strip .inv { font-family: ui-monospace, Consolas, monospace; font-weight: 600; color: var(--brand-navy); }
.apply-strip .cust { color: #6b7280; }
.apply-strip .inv-date { color: #6b7280; font-variant-numeric: tabular-nums; }
/* The ERP's date disagreeing with the line's is worth a second look */
.apply-strip .inv-date.date-differs {
  color: #a4700f; background: #fdeccf; border-radius: .2rem;
  padding: 0 .25rem; cursor: help;
}
.apply-strip .sep { color: #cbd2dd; }
.apply-strip .amt { font-variant-numeric: tabular-nums; }
.apply-strip .neg { color: #94302c; }
.apply-strip .btn { --bs-btn-padding-y: .05rem; --bs-btn-padding-x: .4rem; --bs-btn-font-size: .74rem; }
.apply-strip input.apply-amount {
  width: 7rem; font-size: .76rem; padding: .05rem .35rem; text-align: right;
  font-variant-numeric: tabular-nums;
}
.apply-strip .badge { font-size: .66rem; font-weight: 600; }

/* Invoice lookup popup: same mechanics as the GL picker */
.inv-popup {
  position: absolute; z-index: 1080; width: 38rem; background: #fff;
  border: 1px solid var(--brand-border); border-radius: .4rem; padding: .5rem;
  box-shadow: 0 .5rem 1.5rem rgba(29,45,90,.18);
}
.inv-results { max-height: 20rem; overflow-y: auto; margin-top: .4rem; }
.inv-option { padding: .35rem .5rem; border-radius: .25rem; cursor: pointer; font-size: .8rem; }
.inv-option:hover, .inv-option.active { background: #e8f0ff; }
.inv-option .num { font-family: ui-monospace, Consolas, monospace; color: var(--brand-navy); font-weight: 600; }
.inv-option .who { color: #6b7280; }
.inv-option .meta { color: #9aa2b1; font-size: .74rem; }
.inv-option .bal { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--brand-green); }

/* Cache freshness sits in the section bar, so it is read before it is trusted */
.cache-note { font-weight: 400; font-size: .76rem; color: #cdd5e8; }
.cache-note.stale { color: #ffd8a8; }

/* --- deduction validation: the claim strip under a deduction line --- */

/* Sits below the invoice strip on the same line, indented one step further so
   the two read as a stack belonging to the row above rather than as siblings. */
tr.claim-row > td {
  padding: 0 .4rem .5rem 3.6rem !important;
  border-top: 0;
  background: #fbfcfe;
}
tr.claim-row .claim-strip {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .78rem; color: #4b5563;
  border-left: 3px solid var(--brand-border);
  padding: .3rem .55rem; border-radius: 0 .3rem .3rem 0;
}
/* Same left-edge vocabulary as the invoice strip: a long check is read by
   scanning the edge, so the two panels must not use different colours for the
   same state. Violet marks a recorded validation - green already means an
   invoice was applied, and one line can be both. */
tr.claim-row .claim-strip.is-validated { border-left-color: #7048e8; background: #f7f5ff; }
tr.claim-row .claim-strip.is-ready     { border-left-color: #3bc9db; }
tr.claim-row .claim-strip.is-review    { border-left-color: #e8a13c; background: #fffdf7; }
tr.claim-row .claim-strip.is-muted     { border-left-color: var(--brand-border); color: #9aa2b1; }
tr.claim-row .claim-strip.is-none      { border-left-color: var(--brand-border); }

.claim-strip .cust { color: #6b7280; }
.claim-strip .sep { color: #cbd2dd; }
.claim-strip .badge { font-size: .66rem; font-weight: 600; }
.claim-strip .btn { --bs-btn-padding-y: .05rem; --bs-btn-padding-x: .4rem; --bs-btn-font-size: .74rem; }

.badge-muted { background: #eceef2; color: #6b7280; }

/* The MFX number is the thread back to the record; it has to look followable. */
.mfx-link {
  font-family: ui-monospace, Consolas, monospace; font-weight: 600;
  font-size: .78rem; color: var(--brand-navy); text-decoration: none;
  vertical-align: baseline;
}
.mfx-link:hover { text-decoration: underline; color: #7048e8; }
.mfx-open { color: #7048e8; cursor: pointer; text-decoration: underline; }

/* Claim lookup reuses the invoice popup's frame */
.inv-item {
  padding: .4rem .5rem; border-radius: .25rem; cursor: pointer;
  font-size: .8rem; border-bottom: 1px solid #f1f3f7;
}
.inv-item:hover { background: #f7f5ff; }
.inv-item .inv { font-family: ui-monospace, Consolas, monospace; font-weight: 600; color: var(--brand-navy); }
.inv-item .cust { color: #6b7280; }
.inv-item .amt { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--brand-green); }

/* --- the MFX record, opened over the page --- */

.mfx-drawer {
  position: fixed; inset: 0; z-index: 1090;
  background: rgba(22,34,74,.35);
  display: flex; justify-content: flex-end;
}
.mfx-panel {
  width: min(38rem, 100%); background: #fff; height: 100%;
  display: flex; flex-direction: column;
  box-shadow: -.5rem 0 1.5rem rgba(29,45,90,.2);
}
.mfx-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--brand-border);
  background: var(--brand-navy); color: #fff;
}
.mfx-head .btn { --bs-btn-color: #cdd5e8; --bs-btn-border-color: #3d4d7a; }
.mfx-eyebrow {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #9fb0d8;
}
.mfx-body { padding: 1.1rem; overflow-y: auto; flex: 1; }
.mfx-subject { color: var(--brand-navy); font-weight: 700; }

/* Approved / taken / open, side by side: the whole question in one line. */
.mfx-balance {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  background: #f8fafc; border: 1px solid var(--brand-border); border-radius: .4rem;
  padding: .6rem .8rem; margin: .6rem 0 1rem; font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.mfx-balance .is-open { color: #a4700f; }
.mfx-balance .is-done { color: #1e7a32; }
.mfx-balance.is-muted { color: #6b7280; display: block; }

.mfx-fields { display: grid; grid-template-columns: 9rem 1fr; gap: .3rem .8rem; font-size: .82rem; margin: 0 0 1rem; }
.mfx-field { display: contents; }
.mfx-fields dt { color: #6b7280; font-weight: 500; }
.mfx-fields dd { margin: 0; color: #1f2937; }

.mfx-block { margin-bottom: 1.1rem; }
.mfx-block h6 { color: var(--brand-navy); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.mfx-block p { font-size: .84rem; white-space: pre-wrap; margin: 0; }

.mfx-notes { list-style: none; padding: 0; margin: 0; }
.mfx-note { border-left: 2px solid var(--brand-border); padding: .1rem 0 .6rem .7rem; margin-bottom: .5rem; }
.mfx-note-head { display: flex; gap: .6rem; align-items: baseline; }
.mfx-note-type {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
  color: #7048e8; font-weight: 600;
}
.mfx-note-date { font-size: .72rem; color: #9aa2b1; font-variant-numeric: tabular-nums; }
.mfx-note-text { font-size: .82rem; white-space: pre-wrap; color: #374151; }

/* A discount that posts, and one that has nowhere to post yet. */
.apply-strip .disc { color: #5f3dc4; font-variant-numeric: tabular-nums; }
.apply-strip .disc.uncoded { color: #a4700f; background: #fdeccf; border-radius: .2rem; padding: 0 .25rem; }

/* The bank confirmation, shown beside the deposit it belongs to. */
#conf-viewport { max-height: 46rem; overflow: auto; background: #f1f3f7; border-radius: .3rem; }
#conf-image { display: block; width: 100%; }

/* Claims approved for exactly what a line took. A hint, not a verdict - so it
   sits under the strip in a quieter register than the strip itself. */
tr.claim-row .claim-alt {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .76rem; color: #6b7280;
  border-left: 3px solid #d0bfff; background: #faf8ff;
  padding: .28rem .55rem; border-radius: 0 .3rem .3rem 0; margin-top: .2rem;
}
tr.claim-row .claim-alt .bi-lightbulb { color: #7048e8; }
.claim-alt-item { display: inline-flex; align-items: center; gap: .35rem; }
.claim-alt .btn { --bs-btn-padding-y: .02rem; --bs-btn-padding-x: .35rem; --bs-btn-font-size: .72rem; }

/* The drawer is display:flex, which beats the hidden attribute on its own -
   without this it never hides and never appears to open. */
.mfx-drawer[hidden] { display: none; }

.mfx-balance span { display: flex; flex-direction: column; line-height: 1.25; }
.mfx-balance em { font-style: normal; font-size: .68rem; color: #9aa2b1; text-transform: uppercase; letter-spacing: .04em; }
.mfx-action {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: #f6fbf7; border: 1px solid #cfe8d6; border-radius: .4rem;
  padding: .5rem .7rem; margin-bottom: 1rem;
}
.mfx-note-who { font-size: .72rem; color: #4b5563; font-weight: 600; }
.mfx-notes { padding-left: 0; }
.mfx-cost { font-variant-numeric: tabular-nums; color: #7048e8; font-weight: 600; }
.mfx-attach { font-size: .78rem; color: #6b7280; border-top: 1px solid var(--brand-border); padding-top: .6rem; }

/* GL account picker, shared by every field that takes an account. */
.gl-picker {
  position: absolute; z-index: 1085; max-height: 20rem; overflow-y: auto;
  background: #fff; border: 1px solid var(--brand-border); border-radius: .4rem;
  box-shadow: 0 .5rem 1.5rem rgba(29,45,90,.18); padding: .25rem;
}
.gl-pick {
  display: grid; grid-template-columns: 11rem 1fr; gap: 0 .6rem;
  padding: .3rem .5rem; border-radius: .25rem; cursor: pointer; font-size: .8rem;
}
.gl-pick:hover, .gl-pick.active { background: #e8f0ff; }
.gl-pick .acct { font-family: ui-monospace, Consolas, monospace; font-weight: 600; color: var(--brand-navy); }
.gl-pick .desc { color: #1f2937; }
.gl-pick .cat { grid-column: 2; color: #9aa2b1; font-size: .74rem; }

/* A check with no images. An <img> with no src shows a broken icon, which
   reads as a bug rather than as "there is nothing here". */
.page-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; min-height: 16rem; padding: 2rem 1rem; text-align: center;
  color: #6b7280; background: #f8fafc; border: 1px dashed var(--brand-border);
  border-radius: .4rem;
}
.page-empty .bi { font-size: 2rem; color: #cbd2dd; }
.page-empty p { margin: 0; max-width: 26rem; }

/* --- the second row of a remittance line --- */

/* Reads as a continuation of the line above, not as a row of its own: no top
   border, and the same tinted ground the strips below it use. */
tr.text-row > td {
  border-top: 0;
  padding: 0 .4rem .35rem 2.9rem !important;
  background: #fbfcfe;
}
tr.row-summary + tr.text-row > td { background: #f6f7fa; }

.line-fields {
  display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap;
}
.line-field { display: flex; flex-direction: column; gap: .1rem; margin: 0; min-width: 0; }
.line-field > span {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
  color: #9aa2b1; line-height: 1;
}
.line-field input,
.line-field textarea {
  font-size: .78rem; padding: .1rem .35rem; height: auto;
  border-color: #eceef2; background: #fff;
}
.line-field input:focus,
.line-field textarea:focus { border-color: var(--brand-navy); background: #fff; }
/* Wraps and grows to its content - see growArea. No resize handle: the height
   is the note's, not something to fiddle with per line. */
.line-area {
  resize: none; overflow-y: auto; line-height: 1.35; min-height: 1.4rem;
}
/* Notes takes whatever is left - it is the field that was truncating, and the
   only one whose length is unbounded. */
.line-field.is-grow { flex: 1 1 22rem; }
.line-field.is-wide { flex: 0 0 11rem; }
.line-field.is-narrow { flex: 0 0 8rem; }

/* Where the line came from in the payer's document. Stored since v6 and shown
   nowhere until now; a disputed line has to be citable back to the customer. */
.line-source {
  font-size: .7rem; color: #9aa2b1; white-space: nowrap; padding-bottom: .2rem;
}

/* The change log: rows open an entry, so they have to look like they do. */
#log-rows tr.selectable { cursor: pointer; }
#log-rows tr.selectable:hover { background: #f7f5ff; }