/* ============================================================================
   Pharmbills brand theme — bank-recon
   Tokens calibrated against the live pharmbills.com Webflow stylesheet
   (colour palette, typography, radii, shadow language).
   Fonts are self-hosted from /static/fonts/ — no third-party requests.
   ============================================================================ */

/* ── Self-hosted fonts ──────────────────────────────────────────────────── */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/montserrat-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/fonts/opensans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/fonts/opensans-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/fonts/opensans-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/fonts/opensans-cyrillic-italic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ── Design tokens ──────────────────────────────────────────────────────── */

:root {
  /* Brand navy stack (pharmbills.com uses #081629 as the dominant dark) */
  --pb-rich-black:    #080f19;
  --pb-navy:          #081629;
  --pb-navy-soft:     #0a1d37;
  --pb-oxford-blue:   #0a2648;
  --pb-berkeley-blue: #092e59;
  --pb-yale-blue:     #173a62;
  --pb-yinmn-blue:    #294c7f;
  --pb-penn-blue:     #001446;

  /* Brand blue accents */
  --pb-sapphire:       #176bd4;   /* primary action blue */
  --pb-sapphire-hover: #0c4484;
  --pb-regal-navy:     #023079;
  --pb-polynesian:     #0c4484;
  --pb-bleu-de-france: #3587e5;

  /* Brand teal / aqua */
  --pb-teal:        #2bb5bc;
  --pb-teal-deep:   #0495ae;
  --pb-sky-surge:   #68bbdb;
  --pb-non-photo:   #8ed7e8;
  --pb-aquamarine:  #9cefd1;
  --pb-teal-bg:     #ecf8f9;

  /* Brand orange CTA */
  --pb-orange:       #ff9100;
  --pb-orange-hover: #cb7401;
  --pb-orange-soft:  #ff6d3d;

  /* Neutrals */
  --pb-white:         #ffffff;
  --pb-anti-flash:    #f0f0f0;
  --pb-page-bg:       #f5f7fb;
  --pb-panel:         #ffffff;
  --pb-light-blue-bg: #eef4fb;
  --pb-border:        #d8e2ef;
  --pb-border-strong: #bfcee0;
  --pb-text:          #081629;
  --pb-text-soft:     #173a62;
  --pb-muted:         #758696;
  --pb-muted-soft:    #9fb1c7;

  /* Status */
  --pb-red:      #d23434;
  --pb-red-bg:   #fde4e4;
  --pb-amber:    #b06b00;
  --pb-amber-bg: #fff1d6;
  --pb-green:    #0e7b55;
  --pb-green-bg: #d8f5e6;
  --pb-gray-bg:  #e7ecf2;

  /* Elevation (matches pharmbills.com's soft shadow language) */
  --pb-shadow-sm: 0 1px 4px rgba(8, 22, 41, .06);
  --pb-shadow-md: 0 4px 16px rgba(8, 22, 41, .10);
  --pb-shadow-lg: 0 18px 40px rgba(8, 22, 41, .22);

  /* Radii (pharmbills.com favours 12px for cards, 24px for hero panels) */
  --pb-radius-sm: 6px;
  --pb-radius:    12px;
  --pb-radius-lg: 24px;
  --pb-radius-pill: 999px;

  /* Layout */
  --pb-container: 1200px;
  --pb-nav-h:     64px;

  /* Back-compat aliases used by existing templates / inline styles */
  --navy: var(--pb-navy);
  --blue: var(--pb-sapphire);
  --teal: var(--pb-teal);
  --light: var(--pb-light-blue-bg);
  --border: var(--pb-border);
  --text: var(--pb-text);
  --muted: var(--pb-muted);
  --red: var(--pb-red);
  --amber: var(--pb-amber);
  --green: var(--pb-green);
  --bg-red: var(--pb-red-bg);
  --bg-amber: var(--pb-amber-bg);
  --bg-green: var(--pb-green-bg);
  --bg-gray: var(--pb-gray-bg);
}

/* ── Reset + base typography ───────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--pb-text);
  background: var(--pb-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.pb-main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--pb-text);
  margin: 0 0 .4em;
  line-height: 1.2;
}
h1 { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }

p { margin: 0 0 12px; }

a {
  color: var(--pb-sapphire);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover { color: var(--pb-sapphire-hover); text-decoration: underline; }

small, .text-muted {
  color: var(--pb-muted);
  font-size: 13px;
}

code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .92em;
}

/* ── Layout primitives ─────────────────────────────────────────────────── */

.container {
  max-width: var(--pb-container);
  margin: 24px auto;
  padding: 0 24px;
}

/* ── Top navigation ────────────────────────────────────────────────────── */

.pb-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--pb-navy);
  color: var(--pb-white);
  height: var(--pb-nav-h);
  display: flex;
  align-items: center;
  padding: 0 24px;
  box-shadow: var(--pb-shadow-sm);
}
.pb-navbar .pb-navbar-inner {
  max-width: var(--pb-container);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.pb-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--pb-white);
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.02em;
  text-decoration: none;
}
.pb-brand:hover { color: var(--pb-white); text-decoration: none; }
.pb-brand-mark { color: var(--pb-white); }
.pb-brand-tag {
  color: var(--pb-teal);
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 14px;
  letter-spacing: .01em;
}
.pb-nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.pb-nav-links a {
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.pb-nav-links a:hover {
  color: var(--pb-white);
  border-bottom-color: var(--pb-teal);
  text-decoration: none;
}
.pb-nav-user {
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  margin-left: 4px;
}

/* ── Compact footer ────────────────────────────────────────────────────── */

.pb-footer {
  background: var(--pb-navy);
  color: rgba(255, 255, 255, .72);
  padding: 18px 24px;
  margin-top: 48px;
  font-size: 13px;
}
.pb-footer-inner {
  max-width: var(--pb-container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pb-footer a {
  color: var(--pb-teal);
  text-decoration: none;
}
.pb-footer a:hover { color: var(--pb-non-photo); text-decoration: underline; }

/* ── Card ──────────────────────────────────────────────────────────────── */

.card {
  background: var(--pb-panel);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  box-shadow: var(--pb-shadow-sm);
  padding: 24px;
  margin-bottom: 20px;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -4px 0 16px;
}
.card-header h2,
.card-header h3 { margin: 0; }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--pb-radius-sm);
  background: var(--pb-navy);
  color: var(--pb-white);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease,
              box-shadow .15s ease, transform .05s ease;
}
.btn:hover { background: var(--pb-oxford-blue); color: var(--pb-white); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn.disabled { opacity: .55; cursor: not-allowed; }

.btn-primary { background: var(--pb-sapphire); }
.btn-primary:hover { background: var(--pb-sapphire-hover); }

.btn-success { background: var(--pb-green); }
.btn-success:hover { background: #0a5c40; }

.btn-danger { background: var(--pb-red); }
.btn-danger:hover { background: #a92525; }

.btn-warning { background: var(--pb-orange); color: var(--pb-white); }
.btn-warning:hover { background: var(--pb-orange-hover); }

.btn-secondary {
  background: var(--pb-white);
  color: var(--pb-text);
  border-color: var(--pb-border-strong);
}
.btn-secondary:hover {
  background: var(--pb-light-blue-bg);
  color: var(--pb-text);
  border-color: var(--pb-sapphire);
}

.btn-outline {
  background: transparent;
  color: var(--pb-sapphire);
  border-color: var(--pb-sapphire);
}
.btn-outline:hover {
  background: var(--pb-sapphire);
  color: var(--pb-white);
}

.btn-ghost {
  background: transparent;
  color: var(--pb-text);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--pb-light-blue-bg); color: var(--pb-text); }

.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }

/* ── Badges ────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--pb-radius-pill);
  background: var(--pb-gray-bg);
  color: var(--pb-text-soft);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .01em;
}
.badge-success  { background: var(--pb-green-bg); color: var(--pb-green); }
.badge-warning  { background: var(--pb-amber-bg); color: var(--pb-amber); }
.badge-danger   { background: var(--pb-red-bg);   color: var(--pb-red); }
.badge-info     { background: var(--pb-teal-bg);  color: var(--pb-teal-deep); }
.badge-secondary{ background: var(--pb-gray-bg);  color: var(--pb-text-soft); }

/* ── Alerts / flash messages ───────────────────────────────────────────── */

.alert {
  padding: 12px 16px;
  border-radius: var(--pb-radius-sm);
  border: 1px solid transparent;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
}
.alert-danger  { background: var(--pb-red-bg);   color: var(--pb-red);   border-color: #f2bcbc; }
.alert-success { background: var(--pb-green-bg); color: var(--pb-green); border-color: #a8e4c9; }
.alert-warning { background: var(--pb-amber-bg); color: var(--pb-amber); border-color: #f1d48a; }
.alert-info    { background: var(--pb-teal-bg);  color: var(--pb-teal-deep); border-color: #b3e1e7; }

/* ── Forms ─────────────────────────────────────────────────────────────── */

.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pb-text-soft);
  letter-spacing: .01em;
}
.form-group input,
.form-group select,
.form-group textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--pb-white);
  color: var(--pb-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--pb-sapphire);
  box-shadow: 0 0 0 3px rgba(23, 107, 212, .18);
}
.form-hint { font-size: 12px; color: var(--pb-muted); margin-top: 4px; }

/* ── Tables ────────────────────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 8px;
  font-size: 14px;
}
th, td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--pb-border);
  vertical-align: middle;
}
th {
  background: var(--pb-light-blue-bg);
  color: var(--pb-text-soft);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom-color: var(--pb-border-strong);
}
tbody tr:hover { background: rgba(238, 244, 251, .5); }
.table-clean th { background: transparent; text-transform: none; letter-spacing: 0; font-size: 14px; }

/* ── Focus ring (keyboard users) ───────────────────────────────────────── */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--pb-sky-surge);
  outline-offset: 2px;
}

/* ── Scrollbar polish (webkit) ─────────────────────────────────────────── */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(8, 22, 41, .18); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(8, 22, 41, .3); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Utility helpers ───────────────────────────────────────────────────── */

.pb-stack-16 > * + * { margin-top: 16px; }
.pb-stack-8  > * + * { margin-top: 8px; }
.pb-row      { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pb-row-end  { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.pb-row-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pb-spacer   { flex: 1; }
.pb-hidden   { display: none !important; }
.pb-mt-0     { margin-top: 0 !important; }
.pb-mt-16    { margin-top: 16px; }
.pb-mt-24    { margin-top: 24px; }
.pb-mb-0     { margin-bottom: 0 !important; }
.pb-mb-8     { margin-bottom: 8px; }
.pb-mb-16    { margin-bottom: 16px; }
.pb-narrow   { max-width: 480px; margin: 80px auto; }
.pb-center   { text-align: center; }
.btn-block   { width: 100%; }
.td-center   { text-align: center; }

/* Inline JS-set status text (reset-able) */
.is-error-text   { color: var(--pb-red); }
.is-success-text { color: var(--pb-green); }

/* Multi-file slot (upload.html) */
.ncs-file-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.ncs-file-row input[type="file"] { flex: 1; }

/* Mapping confirmation (mapping.html) */
.sample-val {
  color: var(--pb-muted);
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.required { color: var(--pb-red); font-weight: 700; }

/* Run status summary (run_status.html) */
.row-highlight {
  font-weight: 700;
  background: var(--pb-amber-bg);
}

/* AI verdict row tints — driven by action classifier.
   Colours match the Excel workbook palette for visual parity. */
.verdict-row--probable    { background: #c6e0b4; }
.verdict-row--timing      { background: #fff2cc; }
.verdict-row--split       { background: #fce4d6; }
.verdict-row--fee         { background: #d6e4f0; }
.verdict-row--no-match    { background: #f8d7da; }
.verdict-row--investigate { background: #f4b6b6; }
.verdict-row--default     { background: #e8daef; }

/* Admin navigation (admin/base.html) */
.pb-admin-nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--pb-border);
}
.pb-admin-nav a {
  color: var(--pb-text-soft);
  padding: 8px 14px;
  margin-bottom: -1px;
  border-radius: var(--pb-radius-sm) var(--pb-radius-sm) 0 0;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.pb-admin-nav a:hover {
  background: var(--pb-light-blue-bg);
  color: var(--pb-sapphire);
  text-decoration: none;
}

/* Stat tile grid (admin dashboard) */
.pb-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.pb-stat-grid .card { text-align: center; margin-bottom: 0; }

/* Inline-in-row form wrapper (e.g. action buttons in a table cell) */
.pb-inline-form { display: inline-block; margin: 0; }

/* Table cell helpers */
.td-right { text-align: right; }
.td-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--pb-muted);
}
.td-nowrap { white-space: nowrap; }
.td-zero  { color: var(--pb-muted-soft); }
.td-ellipsis {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Compact inputs for inline form fields */
.pb-input-sm { max-width: 120px; }

/* 2/3-column responsive grids (admin & support pages) */
.pb-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.pb-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

/* Compact stat tile variant of the card */
.card.card-compact {
  padding: 12px 16px;
  margin: 0;
}

/* Pre-formatted text block (support ticket bodies) */
.pb-pre {
  white-space: pre-wrap;
  background: var(--pb-light-blue-bg);
  padding: 12px;
  border-radius: var(--pb-radius-sm);
  font-family: inherit;
  font-size: 14px;
  color: var(--pb-text);
  margin: 0;
}

/* Thumbnail / bordered image */
.pb-thumb {
  max-width: 100%;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  display: block;
}

/* Label cell in a 2-column detail table */
.td-label {
  font-weight: 600;
  width: 140px;
  color: var(--pb-text-soft);
}

/* Filter/query-bar row (aligns inputs + submit button on one line) */
.pb-filter-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pb-filter-row .form-group { margin: 0; }

/* Card with left-edge accent (pending-approval, flagged items) */
.card--warn-accent { border-left: 4px solid var(--pb-orange); }