/* ==========================================================================
   TGP Corporate App - Design System v2 (frontend-rework)

   POV: a serious dispatch ledger. Operators live here for hours; chrome
   should vanish. Quiet, dense, scannable. Data is the product.

   Loaded on every page that extends orders/base.html.
   Per-page styles live in static/app/css/pages/*.css.
   The standalone print templates (invoice_print.html, quote_print.html)
   carry their own self-contained styles and do NOT load this file.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand — TGP (default) */
  --tgp-blue: #68b0e8;
  --tgp-blue-deep: #4a94cf;
  --tgp-navy: #0d3b66;
  --tgp-ink: #25262d;
  --tgp-beige: #fcf1e2;
  --tgp-brass: #c9a45f;

  /* Brand — HWB (Hampers With Bite). These tokens are always defined so
     anything that wants a literal HWB color (e.g. the brand chip) can use
     them regardless of which brand the current page is in. The semantic
     --tgp-* tokens above are overridden under [data-brand="hwb"] further
     down so existing rules using var(--tgp-navy) etc. flip to HWB colours
     automatically when viewing an HWB order/quote. */
  --hwb-orange: #ec5430;
  --hwb-orange-700: #c7421f;
  --hwb-orange-300: #f4886a;
  --hwb-orange-100: #fce2d7;
  --hwb-orange-50: #fff6f1;
  --hwb-ink: #1b1a18;
  --hwb-charcoal: #3a3733;
  --hwb-stone: #6b6660;
  --hwb-mist: #b5afa7;
  --hwb-cream: #f7f1e8;
  --hwb-paper: #fbf7f0;
  --hwb-bottle: #2e4a37;
  --hwb-vine: #5b7a52;
  --hwb-claret: #7a1f2b;
  --hwb-gold: #b8893a;
  --hwb-blush: #e8c8b8;
  --hwb-success: #2f7a4d;
  --hwb-warning: #c68a1f;
  --hwb-danger: #b23a2a;

  /* Surfaces (within ~5% luminance of each other) */
  --surface-page: #f7f8fa;
  --surface-card: #ffffff;
  --surface-alt:  #fafbfc;
  --surface-inset:#f3f4f6;
  --surface-dark: var(--tgp-navy);

  /* Text */
  --text-strong: var(--tgp-navy);
  --text-body:   var(--tgp-ink);
  --text-muted:  #6b7280;
  --text-subtle: #9ca3af;
  --text-on-dark:#ffffff;

  /* Borders */
  --border-hair:   #e5e7eb;
  --border-strong: #d1d5db;
  --border-dark:   #1f3a5a;

  /* Status */
  --ok:    #15803d;
  --warn:  #b45309;
  --bad:   #b91c1c;
  --info:  #1d4ed8;
  --ok-soft:   #f0fdf4;
  --warn-soft: #fffbeb;
  --bad-soft:  #fef2f2;
  --info-soft: #eff6ff;

  /* Type families */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Lora", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Type scale */
  --fs-xs:   0.6875rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.875rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.5rem;

  /* Radius */
  --r-sm:   3px;
  --r-md:   5px;
  --r-lg:   6px;
  --r-pill: 999px;

  /* Layout */
  --shell-max:   100%;
  --shell-pad-x: 24px;
}


/* --------------------------------------------------------------------------
   Brand override — HWB (Hampers With Bite)

   When the body has data-brand="hwb" (an HWB order or quote is in context),
   remap the semantic --tgp-* tokens to HWB equivalents. Every existing rule
   in this file that uses var(--tgp-navy), var(--tgp-blue) etc. picks up the
   HWB colours automatically without needing per-rule changes. The literal
   --hwb-* tokens above stay accessible for components that want a hard HWB
   colour regardless of context (e.g. the brand chip on a TGP dashboard
   tile that previews an HWB record).

   Surfaces (--surface-page, --surface-card, …) and text neutrals
   (--text-muted, --text-subtle) stay at their default greys — both brands
   share the same operator-grade surface treatment.
   -------------------------------------------------------------------------- */

[data-brand="hwb"] {
  --tgp-blue:       var(--hwb-orange);
  --tgp-blue-deep:  var(--hwb-orange-700);
  --tgp-navy:       var(--hwb-ink);
  --tgp-ink:        var(--hwb-charcoal);
  --tgp-beige:      var(--hwb-cream);
  --tgp-brass:      var(--hwb-gold);

  /* Status colours — HWB has its own status palette that reads warmer. */
  --ok:   var(--hwb-success);
  --warn: var(--hwb-warning);
  --bad:  var(--hwb-danger);
}


/* --------------------------------------------------------------------------
   Reset and global utilities
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03";
}

img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
textarea { font-family: inherit; }
a { color: var(--text-strong); text-decoration: none; transition: color .14s ease; }
a:hover { color: var(--tgp-blue-deep); }

h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-strong);
  font-weight: 600;
  letter-spacing: -0.005em;
}
h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-3xl);
  line-height: 1.15;
  color: var(--text-strong);
  letter-spacing: -0.014em;
}
h1 em, h1 .accent {
  font-style: italic;
  font-weight: 500;
  color: var(--tgp-brass);
}

/* Editorial italic - for impact words/phrases mid-paragraph */
.tgp-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--text-strong);
}
.tgp-italic.brass { color: var(--tgp-brass); }
h2 { font-size: var(--fs-xl);  line-height: 1.3; }
h3 { font-size: var(--fs-lg);  line-height: 1.35; font-weight: 600; }
h4 { font-size: var(--fs-md);  line-height: 1.4;  font-weight: 600; }

p { margin: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}


/* --------------------------------------------------------------------------
   Shell - header, container, footer
   -------------------------------------------------------------------------- */

.tgp-shell-header {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-hair);
}

.tgp-shell-header-inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 10px var(--shell-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.tgp-brand-block { display: flex; align-items: center; gap: 14px; }
.tgp-brand-link  { display: inline-flex; align-items: center; }
.tgp-brand-logo  { height: 28px; display: block; }
/* HWB wordmark has a 2.4:1 aspect with 3 stacked lines of text; at the TGP
   logo's 28px height each line is 8px tall and unreadable. 36px makes each
   line ~12px so HAMPERS/WITH/BITE reads about the same visual weight as
   THE/GOURMET/PANTRY without dominating the header. */
.tgp-brand-logo--hwb { height: 36px; }
.brand-pair {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand-pair-divider {
  color: var(--text-muted, #94a3b8);
  font-weight: 300;
  font-size: 20px;
  line-height: 1;
  user-select: none;
}

/* Compact brand pill used on dashboard tiles to scan TGP vs HWB at a glance. */
.brand-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-right: 6px;
}
/* Brand chips always use literal brand colours, NOT the semantic --tgp-*
   tokens — so a TGP chip is always navy and an HWB chip is always orange
   even when previewed on the other brand's page. */
.brand-chip--tgp { background: #0d3b66; }
.brand-chip--hwb { background: var(--hwb-orange); }
.tgp-app-title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.005em;
}
.tgp-app-title::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 18px;
  margin-right: 14px;
  vertical-align: -4px;
  background: var(--border-strong);
}

.tgp-auth-block { display: flex; align-items: center; gap: 16px; font-size: var(--fs-sm); color: var(--text-muted); }
.tgp-auth-copy  { margin: 0; }
.tgp-auth-copy a, .link {
  color: var(--text-strong);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color .14s ease;
}
.tgp-auth-copy a:hover, .link:hover { border-bottom-color: var(--tgp-blue); }

main.container,
.container {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 22px var(--shell-pad-x) 20px;
  width: 100%;
}

.footer { padding: 0; }


/* --------------------------------------------------------------------------
   Stepper - numbered dots on a single line
   -------------------------------------------------------------------------- */

.tgps-stepper-wrap {
  display: none;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-hair);
}
.tgps-stepper-wrap.is-active { display: block; }
.tgps-stepper {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-pad-x);
}
.tgps-flow {
  display: none;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  align-items: center;
  gap: 0;
}
.tgps-flow.show { display: flex; flex-wrap: wrap; }

.tgps-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.tgps-step .dot {
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.tgps-step .label a,
.tgps-step .label span { color: inherit; }
.tgps-step .label a { transition: color .14s ease; }
.tgps-step .label a:hover { color: var(--text-strong); }

.tgps-step.done .dot {
  background: var(--tgp-navy);
  border-color: var(--tgp-navy);
  color: var(--text-on-dark);
}
.tgps-step.done { color: var(--text-strong); }

.tgps-step.current .dot {
  background: var(--surface-card);
  border-color: var(--tgp-navy);
  border-width: 2px;
  color: var(--tgp-navy);
  box-shadow: 0 0 0 3px var(--surface-page);
}
.tgps-step.current { color: var(--text-strong); font-weight: 600; }

.tgps-divider {
  width: 28px;
  height: 1px;
  background: var(--border-hair);
  align-self: center;
  margin: 0 4px;
}

.tgps-step .tip {
  position: absolute;
  left: 0; top: calc(100% + 6px);
  max-width: 220px;
  background: var(--text-body);
  color: var(--text-on-dark);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 6px 9px;
  border-radius: var(--r-sm);
  display: none;
  z-index: 20;
  white-space: normal;
}
.tgps-step:hover .tip { display: block; }


/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.tgp-card {
  background: var(--surface-card);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  margin: 0;
  box-sizing: border-box;
}

.tgp-card.is-flush { padding: 0; }
.tgp-card.is-tight { padding: 16px 18px; }

/* Hero variants - use sparingly, max one per page */
.tgp-card.is-hero {
  background: var(--tgp-navy);
  border-color: var(--tgp-navy);
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
}
.tgp-card.is-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--tgp-brass);
}
.tgp-card.is-hero h1,
.tgp-card.is-hero h2,
.tgp-card.is-hero h3,
.tgp-card.is-hero p { color: var(--text-on-dark); }
.tgp-card.is-hero p { color: rgba(255,255,255,.78); }
.tgp-card.is-hero .tgp-eyebrow { color: rgba(255,255,255,.62); }
.tgp-card.is-hero h1::after,
.tgp-card.is-hero h2::after { background: var(--tgp-brass); }
.tgp-card.is-hero em,
.tgp-card.is-hero .accent { color: var(--tgp-brass); }

.tgp-card.is-warm {
  background: var(--tgp-beige);
  border-color: #efdcb5;
}

.tgp-card > * + * { margin-top: 14px; }
.tgp-card > .tgp-eyebrow + h1,
.tgp-card > .tgp-eyebrow + h2,
.tgp-card > .tgp-eyebrow + h3 { margin-top: 6px; }
.tgp-card > h1 + p, .tgp-card > h2 + p, .tgp-card > h3 + p { margin-top: 8px; }
.tgp-card > h1::after {
  content: "";
  display: block;
  width: 32px;
  height: 1.5px;
  background: var(--tgp-brass);
  margin-top: 12px;
}

.tgp-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.tgp-card-header > * { margin: 0; }


/* --------------------------------------------------------------------------
   Eyebrow - the signature primitive
   -------------------------------------------------------------------------- */

.tgp-eyebrow {
  display: inline-block;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tgp-eyebrow.brand { color: var(--tgp-blue); }
.tgp-eyebrow.brass { color: var(--tgp-brass); }
.tgp-eyebrow.on-dark { color: rgba(255,255,255,.78); }


/* --------------------------------------------------------------------------
   Hero - one moment of presence per page
   -------------------------------------------------------------------------- */

.tgp-hero-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-3xl);
  line-height: 1.15;
  color: var(--text-strong);
  letter-spacing: -0.012em;
  margin: 0;
}
.tgp-hero-title em,
.tgp-hero-title .accent {
  font-style: italic;
  font-weight: 500;
  color: var(--tgp-brass);
}

.tgp-hero-number {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-4xl);
  line-height: 1;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.tgp-hero-rule {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--tgp-brass);
  margin: 14px 0 16px;
}


/* --------------------------------------------------------------------------
   Pills / status chips
   -------------------------------------------------------------------------- */

.tgp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-inset);
  color: var(--text-muted);
  border: 1px solid var(--border-hair);
}
.tgp-pill.soft { background: var(--surface-inset); color: var(--text-muted); }
.tgp-pill.good { background: var(--ok-soft);   color: var(--ok);   border-color: #bbf7d0; }
.tgp-pill.warn { background: var(--warn-soft); color: var(--warn); border-color: #fde68a; }
.tgp-pill.bad  { background: var(--bad-soft);  color: var(--bad);  border-color: #fecaca; }
.tgp-pill.info { background: var(--info-soft); color: var(--info); border-color: #bfdbfe; }
.tgp-pill.brand { background: rgba(104,176,232,.12); color: var(--tgp-navy); border-color: rgba(104,176,232,.35); }
.tgp-pill.mono { font-family: var(--font-mono); letter-spacing: 0; text-transform: none; font-weight: 500; }


/* --------------------------------------------------------------------------
   Buttons - visible weight communicates intent
   -------------------------------------------------------------------------- */

.btn-primary, .btn-secondary, .btn-danger, .btn-success,
.btn-ghost, .btn-danger-soft, .btn-accent,
button, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--tgp-blue);
  color: var(--text-on-dark);
  border-color: var(--tgp-blue);
}
.btn-primary:hover { background: var(--tgp-blue-deep); border-color: var(--tgp-blue-deep); color: var(--text-on-dark); }

.btn-secondary {
  background: var(--surface-card);
  color: var(--text-strong);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-inset); color: var(--text-strong); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--surface-inset); color: var(--text-strong); }

.btn-danger {
  background: var(--bad);
  color: var(--text-on-dark);
  border-color: var(--bad);
}
.btn-danger:hover { background: #991b1b; border-color: #991b1b; color: var(--text-on-dark); }

.btn-danger-soft {
  background: var(--bad-soft);
  color: var(--bad);
  border-color: #fecaca;
}
.btn-danger-soft:hover { background: #fee2e2; color: var(--bad); }

.btn-success {
  background: var(--ok);
  color: var(--text-on-dark);
  border-color: var(--ok);
}
.btn-success:hover { background: #166534; border-color: #166534; color: var(--text-on-dark); }

.btn-accent {
  background: var(--tgp-navy);
  color: var(--text-on-dark);
  border-color: var(--tgp-navy);
}
.btn-accent:hover { background: #0a2d50; border-color: #0a2d50; color: var(--text-on-dark); }

.btn-small {
  height: 28px;
  padding: 0 10px;
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
}
.btn-large { height: 42px; padding: 0 18px; font-size: var(--fs-md); }

button:disabled, .btn-primary:disabled, .btn-secondary:disabled,
input[type="submit"]:disabled {
  opacity: .55;
  cursor: not-allowed;
}

button:not([class]) {
  background: var(--surface-card);
  color: var(--text-strong);
  border-color: var(--border-strong);
}


/* --------------------------------------------------------------------------
   Toolbars / actions / stacks
   -------------------------------------------------------------------------- */

.tgp-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tgp-toolbar > * { margin: 0; }

.tgp-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tgp-actions.compact { gap: 6px; }

.tgp-stack { display: grid; gap: 12px; }
.tgp-stack.tight { gap: 8px; }
.tgp-stack.loose { gap: 18px; }

.tgp-field-stack { display: grid; gap: 6px; align-content: start; }
.tgp-field-stack label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tgp-section-copy, .tgp-muted { color: var(--text-muted); }


/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

form { margin: 0; max-width: 100%; }

.tgp-excel-table input,
.tgp-excel-table select,
.tgp-excel-table textarea,
form input[type="text"],
form input[type="number"],
form input[type="date"],
form input[type="email"],
form input[type="password"],
form input[type="tel"],
form input[type="url"],
form select,
form textarea {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.2;
  margin: 0;
  transition: border-color .14s ease, box-shadow .14s ease;
}

form textarea, .tgp-excel-table textarea {
  height: auto;
  min-height: 84px;
  padding: 9px 10px;
  resize: vertical;
  line-height: 1.45;
}

form input[type="file"] {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  height: auto;
  padding: 7px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  font-size: var(--fs-base);
}

form input[type="radio"], form input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0;
  accent-color: var(--tgp-navy);
}

.tgp-excel-table input:focus,
.tgp-excel-table select:focus,
.tgp-excel-table textarea:focus,
form input:focus,
form select:focus,
form textarea:focus {
  outline: none;
  border-color: var(--tgp-blue);
  box-shadow: 0 0 0 2px rgba(104,176,232,.22);
}

.field-error, .errorlist, .error { color: var(--bad); }

.errorlist {
  list-style: none;
  margin: 6px 0 0;
  padding: 7px 10px;
  background: var(--bad-soft);
  border: 1px solid #fecaca;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.error {
  padding: 7px 10px;
  border-radius: var(--r-md);
  background: var(--bad-soft);
  border: 1px solid #fecaca;
  font-size: var(--fs-sm);
  font-weight: 500;
}

.alert {
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-hair);
  background: var(--surface-card);
  font-size: var(--fs-sm);
}


/* --------------------------------------------------------------------------
   Messages (django.contrib.messages)
   -------------------------------------------------------------------------- */

.messages {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.messages li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-hair);
  background: var(--surface-card);
  font-size: var(--fs-sm);
  white-space: pre-line;
  position: relative;
}
.messages li::before {
  content: "";
  width: 3px;
  align-self: stretch;
  background: var(--text-muted);
  border-radius: 2px;
  flex: none;
}
.messages li.success { border-color: #bbf7d0; background: var(--ok-soft); }
.messages li.success::before { background: var(--ok); }
.messages li.warning { border-color: #fde68a; background: var(--warn-soft); }
.messages li.warning::before { background: var(--warn); }
.messages li.error   { border-color: #fecaca; background: var(--bad-soft); }
.messages li.error::before { background: var(--bad); }
.messages li.info    { border-color: #bfdbfe; background: var(--info-soft); }
.messages li.info::before { background: var(--info); }


/* --------------------------------------------------------------------------
   Excel-style data tables - the core data surface
   -------------------------------------------------------------------------- */

.tgp-excel-wrap {
  border: 1px solid var(--border-hair);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  overflow: auto;
  max-width: 100%;
}

.tgp-excel-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  font-size: var(--fs-sm);
}

.tgp-excel-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--tgp-navy);
  color: var(--text-on-dark);
  border: none;
  border-bottom: 1px solid var(--border-dark);
  padding: 10px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.tgp-excel-table td {
  border: none;
  border-bottom: 1px solid var(--border-hair);
  border-right: 1px solid var(--border-hair);
  padding: 8px 10px;
  vertical-align: top;
  background: var(--surface-card);
  font-variant-numeric: tabular-nums;
}
.tgp-excel-table td:last-child { border-right: 0; }
.tgp-excel-table tbody tr:last-child td { border-bottom: 0; }

.tgp-excel-table tbody tr:nth-child(even) td { background: var(--surface-alt); }
.tgp-excel-table tbody tr:hover td { background: #f1f5f9; }

.tgp-mono, .tgp-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}


/* --------------------------------------------------------------------------
   Loading overlay
   -------------------------------------------------------------------------- */

.tgp-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(13, 59, 102, 0.62);
  backdrop-filter: blur(4px);
}
.tgp-loading-overlay.show { display: flex; }

.tgp-loading-panel {
  width: min(560px, calc(100vw - 32px));
  padding: 24px 28px;
  border-radius: var(--r-lg);
  background: var(--surface-card);
  border: 1px solid var(--border-hair);
}

.tgp-loading-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.tgp-loading-spinner {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--tgp-navy);
  animation: tgp-spin .8s linear infinite;
  flex: none;
}
.tgp-loading-title { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--text-strong); }
.tgp-loading-copy  { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-sm); }

.tgp-loading-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  margin: 0 0 10px;
  color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
}

.tgp-loading-progress {
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--surface-inset);
  margin: 0 0 18px;
}
.tgp-loading-progress-bar {
  width: 14%;
  height: 100%;
  background: var(--tgp-navy);
  transition: width .9s ease;
}

.tgp-loading-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tgp-loading-step {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-alt);
  border: 1px solid var(--border-hair);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.tgp-loading-step::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  flex: none;
}
.tgp-loading-step.done { color: var(--text-strong); border-color: #bbf7d0; background: var(--ok-soft); }
.tgp-loading-step.done::before { background: var(--ok); }
.tgp-loading-step.active { color: var(--text-strong); border-color: var(--border-strong); background: var(--surface-card); }
.tgp-loading-step.active::before { background: var(--tgp-navy); box-shadow: 0 0 0 3px rgba(13,59,102,.14); }

@keyframes tgp-spin { to { transform: rotate(360deg); } }


/* --------------------------------------------------------------------------
   Shared metric cards (deduplicated from invoice + send_to_neto)
   -------------------------------------------------------------------------- */

.neto-total-card,
.tgp-metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.neto-total-item,
.tgp-metric {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface-card);
  border: 1px solid var(--border-hair);
}

.neto-total-item strong,
.tgp-metric .label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.neto-total-item > span,
.tgp-metric .value {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* --------------------------------------------------------------------------
   Section headers
   -------------------------------------------------------------------------- */

.tgp-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}
.tgp-section-head .tgp-section-titles { min-width: 0; }
.tgp-section-head .tgp-section-titles > * { margin: 0; }
.tgp-section-head .tgp-section-titles > * + * { margin-top: 4px; }


/* --------------------------------------------------------------------------
   Divider rule
   -------------------------------------------------------------------------- */

.tgp-rule {
  border: 0;
  height: 1px;
  background: var(--border-hair);
  margin: 18px 0;
}
.tgp-rule.brass { background: var(--tgp-brass); margin: 14px 0; height: 1px; width: 36px; }


/* --------------------------------------------------------------------------
   Next-step card preserved (used by gift_message_editor + invoice flows)
   -------------------------------------------------------------------------- */

.next-step-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.next-step-card p { margin: 0; color: var(--text-muted); }


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  :root { --shell-pad-x: 16px; }
  .tgp-shell-header-inner {
    padding-top: 12px; padding-bottom: 12px;
    gap: 8px;
  }
  .tgp-app-title::before { display: none; }
  .tgps-flow { padding: 10px 0; }
  .tgps-divider { width: 14px; }
}

@media (max-width: 720px) {
  main.container, .container { padding: 16px var(--shell-pad-x) 48px; }
  .tgp-card { padding: 16px 18px; }
}