/* InvoiceStep — Corporate International Theme */
:root {
  --inv-primary: #0a2540;
  --inv-primary-700: #06182b;
  --inv-primary-50: #eef2f7;
  --inv-accent: #c9a227;
  --inv-accent-700: #a78519;
  --inv-text: #1a2230;
  --inv-muted: #5b6b80;
  --inv-border: #e3e7ee;
  --inv-bg: #f6f7fb;
  --inv-card: #ffffff;
  --inv-success: #1f7a4d;
  --inv-danger: #b3261e;
  --inv-radius: 6px;
  --inv-shadow: 0 1px 2px rgba(10, 37, 64, .06), 0 8px 24px rgba(10, 37, 64, .06);
  --inv-shadow-sm: 0 1px 2px rgba(10, 37, 64, .08);
  --inv-font-sans: "Inter", "Helvetica Neue", "Segoe UI", Roboto, "Noto Sans", "PingFang SC", "Hiragino Sans", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --inv-font-serif: "Source Serif 4", "Source Serif Pro", "Noto Serif", Georgia, "Times New Roman", serif;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body { height: 100%; }
body {
  font-family: var(--inv-font-sans);
  color: var(--inv-text);
  background: var(--inv-bg);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  letter-spacing: .005em;
  /* iOS/Android notched screens: keep content off the sensor/home-indicator inset */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
h1, h2, h3, h4, .display-1, .display-2, .display-3, .display-4 {
  font-family: var(--inv-font-serif);
  letter-spacing: -.01em;
  color: var(--inv-primary);
}
.text-muted { color: var(--inv-muted) !important; }

/* Top bar — refined dark navy */
.inv-topbar {
  background: var(--inv-primary);
  background-image: linear-gradient(180deg, #0a2540 0%, #07203a 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
  padding-top: env(safe-area-inset-top, 0px);
}
.inv-topbar .navbar-brand {
  font-family: var(--inv-font-serif);
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding-top: .9rem;
  padding-bottom: .9rem;
}
.inv-topbar .navbar-brand .inv-mark {
  width: 30px; height: 30px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--inv-accent); color: #0a2540; font-weight: 700;
  font-family: var(--inv-font-sans);
  letter-spacing: .02em;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
}
.inv-topbar .navbar-brand .inv-brand-sub {
  font-family: var(--inv-font-sans);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: rgba(255,255,255,.55);
  margin-left: .35rem;
}
.inv-topbar .nav-link {
  color: rgba(255,255,255,.78) !important;
  font-weight: 500;
  font-size: .92rem;
  padding: .9rem .85rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.inv-topbar .nav-link i.bi {
  font-size: 1rem;
  line-height: 1;
  opacity: .9;
}
.inv-topbar .nav-link:hover { color: #fff !important; }
.inv-topbar .nav-link:hover i.bi { opacity: 1; }
.inv-topbar .nav-link.active,
.inv-topbar .nav-link[aria-current="page"] { color: #fff !important; }
.inv-topbar .nav-link.active i.bi { opacity: 1; }
.inv-topbar .nav-link.active::after,
.inv-topbar .nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .35rem;
  height: 2px; background: var(--inv-accent); border-radius: 2px;
}
/* Dropdown toggles: hide the native caret since we already render a chevron via Bootstrap. */
.inv-topbar .nav-link.dropdown-toggle::after {
  margin-left: .15rem;
  border-top-color: rgba(255,255,255,.6);
}
.inv-topbar .nav-link.dropdown-toggle:hover::after { border-top-color: #fff; }

/* Visually separate the right-hand "utility" cluster (locale + account) from the main nav. */
.inv-topbar .inv-utilnav { gap: .15rem; }
.inv-topbar .inv-utilnav .nav-link { padding: .55rem .65rem; }
.inv-topbar .inv-utilnav .nav-link i.bi { font-size: 1.05rem; }

.inv-topbar .dropdown-menu {
  border: 1px solid var(--inv-border);
  border-radius: var(--inv-radius);
  box-shadow: var(--inv-shadow);
  padding: .35rem;
  min-width: 13rem;
}
.inv-topbar .dropdown-item {
  border-radius: 4px;
  padding: .5rem .7rem;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
}
.inv-topbar .dropdown-item i.bi {
  font-size: 1rem;
  width: 1.1rem;
  text-align: center;
  color: var(--inv-muted);
}
.inv-topbar .dropdown-item:hover { background: var(--inv-primary-50); }
.inv-topbar .dropdown-item:hover i.bi { color: var(--inv-primary); }
.inv-topbar .dropdown-item.active,
.inv-topbar .dropdown-item.active i.bi {
  background: var(--inv-primary-50);
  color: var(--inv-primary);
}

/* Mobile collapsed layout: tighten spacing so nav doesn't feel sparse on phones. */
@media (max-width: 991.98px) {
  .inv-topbar .navbar-collapse { padding-bottom: .5rem; }
  .inv-topbar .nav-link { padding: .55rem .25rem; }
  .inv-topbar .dropdown-menu {
    background: rgba(255,255,255,.04);
    border: none;
    box-shadow: none;
    padding: .15rem .35rem;
    margin-left: 1.5rem;
  }
  .inv-topbar .dropdown-item { color: rgba(255,255,255,.78); }
  .inv-topbar .dropdown-item:hover,
  .inv-topbar .dropdown-item.active {
    background: rgba(255,255,255,.08);
    color: #fff;
  }
  .inv-topbar .dropdown-item i.bi { color: rgba(255,255,255,.6); }
}

/* Hairline accent under topbar */
.inv-accent-rule { height: 2px; background: linear-gradient(90deg, var(--inv-accent), transparent 60%); }

/* Container width tuned for desktop reading */
.inv-shell { padding-top: 1.75rem; padding-bottom: 4rem; }

/* Page title */
.inv-page-title {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem;
  padding-bottom: .75rem; border-bottom: 1px solid var(--inv-border);
}
.inv-page-title h1 {
  font-size: 1.65rem; margin: 0; font-weight: 600;
}
.inv-page-title .inv-eyebrow {
  font-family: var(--inv-font-sans);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  color: var(--inv-muted);
  display: block;
  margin-bottom: .25rem;
}

/* Cards */
.card {
  border: 1px solid var(--inv-border) !important;
  border-radius: var(--inv-radius) !important;
  box-shadow: var(--inv-shadow-sm);
  background: var(--inv-card);
}
.card .card-body { padding: 1.4rem 1.5rem; }
.shadow-sm { box-shadow: var(--inv-shadow-sm) !important; }

/* Forms */
.form-label { font-weight: 500; color: var(--inv-text); font-size: .88rem; }
.form-control, .form-select {
  border-radius: var(--inv-radius);
  border-color: var(--inv-border);
  font-size: .95rem;
  padding: .55rem .75rem;
  background-color: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--inv-primary);
  box-shadow: 0 0 0 .2rem rgba(10, 37, 64, .1);
}

/* Buttons */
.btn { border-radius: var(--inv-radius); font-weight: 500; letter-spacing: .01em; }
.btn-primary {
  background: var(--inv-primary); border-color: var(--inv-primary);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--inv-primary-700); border-color: var(--inv-primary-700);
}
.btn-outline-primary { color: var(--inv-primary); border-color: var(--inv-primary); }
.btn-outline-primary:hover { background: var(--inv-primary); border-color: var(--inv-primary); }
.btn-accent {
  background: var(--inv-accent); color: #0a2540; border: 1px solid var(--inv-accent-700);
}
.btn-accent:hover { background: var(--inv-accent-700); color: #fff; }
.btn-link { color: var(--inv-primary); }

/* Tables */
.table {
  --bs-table-bg: var(--inv-card);
  --bs-table-color: var(--inv-text);
  font-size: .92rem;
}
.table > thead {
  background: #fbfbfd;
}
.table > thead th {
  color: var(--inv-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  border-bottom: 1px solid var(--inv-border) !important;
  padding: .85rem 1rem;
}
.table > tbody td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--inv-border);
  vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-state: #fafbfd;
}

/* Hero (login / dashboard) */
.inv-hero {
  background:
    radial-gradient(1200px 380px at 100% -100px, rgba(201, 162, 39, .12), transparent 60%),
    linear-gradient(180deg, #0a2540 0%, #112f53 100%);
  color: #fff;
  border-radius: var(--inv-radius);
  padding: 2.4rem 2.4rem 2.2rem;
  margin-bottom: 1.75rem;
  position: relative;
  overflow: hidden;
}
.inv-hero h1, .inv-hero h2 { color: #fff; margin: 0 0 .35rem; }
.inv-hero p { color: rgba(255,255,255,.78); margin: 0; }
.inv-hero .inv-eyebrow { color: rgba(255,255,255,.65); }
.inv-hero::after {
  content: "";
  position: absolute; right: -60px; top: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201,162,39,.18), transparent 70%);
  pointer-events: none;
}

/* Stat tiles */
.inv-stat {
  background: #fff;
  border: 1px solid var(--inv-border);
  border-radius: var(--inv-radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--inv-shadow-sm);
  height: 100%;
}
.inv-stat .label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .2em;
  color: var(--inv-muted);
}
.inv-stat .value {
  font-family: var(--inv-font-serif);
  font-size: 1.7rem; color: var(--inv-primary); margin-top: .25rem;
}

/* Auth layout */
.inv-auth-shell { min-height: calc(100vh - 64px); display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px) {
  .inv-auth-shell { grid-template-columns: 1.05fr .95fr; }
}
.inv-auth-aside {
  background:
    radial-gradient(800px 260px at 80% -80px, rgba(201, 162, 39, .14), transparent 70%),
    linear-gradient(180deg, #0a2540 0%, #061a32 100%);
  color: #fff;
  padding: 3rem 3rem;
  display: flex; flex-direction: column; justify-content: space-between;
}
.inv-auth-aside .brand-row {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--inv-font-serif);
  font-size: 1.35rem;
}
.inv-auth-aside .brand-row .inv-mark {
  width: 36px; height: 36px; border-radius: 4px;
  background: var(--inv-accent); color: #0a2540;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--inv-font-sans);
}
.inv-auth-aside h2 {
  font-family: var(--inv-font-serif);
  color: #fff;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.25;
  margin-top: 2rem;
}
.inv-auth-aside ul { list-style: none; padding: 0; margin-top: 1.25rem; color: rgba(255,255,255,.78); }
.inv-auth-aside ul li { padding: .35rem 0; border-bottom: 1px dashed rgba(255,255,255,.1); font-size: .92rem; }
.inv-auth-aside .legal { color: rgba(255,255,255,.45); font-size: .78rem; margin-top: 2rem; }
.inv-auth-form {
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 1.5rem;
}
.inv-auth-card {
  width: 100%; max-width: 420px;
}
.inv-auth-card .inv-eyebrow {
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--inv-muted); font-size: .72rem;
}
.inv-auth-card h1 {
  font-size: 1.85rem; margin: .25rem 0 1.4rem;
}

/* Footer */
.inv-footer {
  border-top: 1px solid var(--inv-border);
  padding: 1.5rem 0;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  color: var(--inv-muted);
  font-size: .82rem;
  background: #fff;
}
.inv-footer a { color: var(--inv-primary); text-decoration: none; }
.inv-footer a:hover { text-decoration: underline; }

/* Alerts */
.alert { border-radius: var(--inv-radius); border: 1px solid transparent; font-size: .92rem; }
.alert-info { background: #eef4fb; color: #0a2540; border-color: #d6e3f3; }
.alert-success { background: #ecf6f0; color: #0e5733; border-color: #c8e4d4; }
.alert-warning { background: #fdf6e3; color: #6b4f00; border-color: #f0e1a8; }
.alert-danger { background: #fdecea; color: #8a1d17; border-color: #f3c5c1; }

/* Badge */
.badge.bg-primary { background: var(--inv-primary) !important; }
.badge.bg-accent { background: var(--inv-accent); color: #0a2540; }

/* Misc utilities */
.inv-divider { border-top: 1px solid var(--inv-border); margin: 1.5rem 0; }
.inv-kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #f1f3f8; border: 1px solid var(--inv-border);
  border-radius: 4px; padding: 1px 6px; font-size: .85em; color: var(--inv-primary);
}

/* ====== Invoice template thumbnails ====== */
.tpl-card { transition: transform .12s ease, box-shadow .12s ease; }
.tpl-card:hover { transform: translateY(-2px); box-shadow: var(--inv-shadow); }
.tpl-thumb {
  border-radius: var(--inv-radius) var(--inv-radius) 0 0;
  overflow: hidden;
  font-size: 11px;
  font-family: var(--inv-font-sans);
}
.tpl-thumb-lg { font-size: 14px; }
.tpl-thumb-head { padding: 8px 12px; font-size: 12px; }
.tpl-thumb-lg .tpl-thumb-head { padding: 14px 18px; font-size: 16px; }
.tpl-thumb-body { padding: 10px 12px; }
.tpl-thumb-lg .tpl-thumb-body { padding: 16px 22px; }
.tpl-row { display: grid; grid-template-columns: 1fr 60px 80px; gap: 4px; padding: 4px 0; }
.tpl-thumb-lg .tpl-row { grid-template-columns: 1fr 80px 110px; padding: 6px 0; }
.tpl-row.tpl-total { font-weight: 700; }
.tpl-swatch { width: 22px; height: 22px; border-radius: 4px; display: inline-block; }

/* ====== Invoice template chooser cards (in invoice form) ====== */
.tpl-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.tpl-pick { position: relative; cursor: pointer; }
.tpl-pick input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-pick .tpl-pick-card {
  border: 2px solid var(--inv-border);
  border-radius: var(--inv-radius);
  overflow: hidden;
  background: #fff;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.tpl-pick:hover .tpl-pick-card { border-color: var(--inv-accent); }
.tpl-pick input:checked + .tpl-pick-card {
  border-color: var(--inv-primary);
  box-shadow: 0 0 0 3px rgba(10, 37, 64, .12);
}
.tpl-pick .tpl-pick-name {
  font-size: 12px; font-weight: 600;
  padding: 6px 8px; background: #fff; color: var(--inv-text);
  display: flex; justify-content: space-between; align-items: center;
}
.tpl-pick .tpl-pick-mini { height: 70px; }
.tpl-pick .tpl-pick-mini .bar1 { height: 16px; }
.tpl-pick .tpl-pick-mini .bar2 { height: 6px; margin: 6px 8px; border-radius: 3px; }
.tpl-pick .tpl-pick-mini .bar3 { height: 4px; margin: 4px 8px; border-radius: 2px; }

/* Seller / buyer directory — stable short UID for quick recognition */
.seller-uid-code,
.buyer-uid-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.8125rem;
  color: var(--inv-primary);
  letter-spacing: 0.03em;
  line-height: 1.35;
}
th.inv-col-seller-uid,
td.inv-col-seller-uid,
th.inv-col-buyer-uid,
td.inv-col-buyer-uid {
  min-width: 7.5rem;
  max-width: 11rem;
}

/* ── Cross-device: phones / small tablets (iOS, Android, narrow PC viewports) ── */
@media (max-width: 575.98px) {
  /* 16px+ on primary inputs avoids iOS Safari zooming the viewport on focus */
  .form-control:not(textarea),
  .form-select:not(.form-select-sm),
  textarea.form-control {
    font-size: 1rem;
  }
  .inv-page-title {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }
  .inv-page-title .btn,
  .inv-page-title .btn-link,
  .inv-page-title a.btn {
    align-self: flex-start;
  }
  .inv-hero {
    padding: 1.35rem 1.15rem 1.25rem;
  }
  .inv-hero h1 {
    font-size: 1.45rem;
  }
  .inv-shell {
    padding-top: 1.1rem;
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
  }
  .card .card-body {
    padding: 1rem 1.1rem;
  }
  /* Invoice line items: sm inputs still ≥16px on phones */
  #lineTbl .form-control-sm,
  #lineTbl .form-select-sm,
  #taxTbl .form-control-sm,
  #taxTbl .form-select-sm {
    font-size: 1rem;
  }
}

/* ── Internal API documentation (admin-rendered Markdown) ── */
.api-doc-card {
  --api-doc-muted: var(--inv-muted, #6c757d);
}
.api-doc .api-doc-pre {
  background: #0b1220;
  color: #e8ecf8;
  padding: 1rem 1.1rem;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.45;
}
.api-doc .api-doc-pre code {
  color: inherit;
  font-size: inherit;
}
.api-doc p {
  max-width: 56rem;
}
.api-doc ul.api-doc-ul {
  padding-left: 1.25rem;
  max-width: 56rem;
}
.api-doc-table code {
  font-size: 0.85em;
}