/* ================================================================
   TensorCut — Design System  v2
   60-30-10 palette for B2B industrial manufacturing
   ─────────────────────────────────────────────────────────────────
   60 %  Neutral  — #EEF1F7  Cool grey backgrounds, white surfaces
   30 %  Navy     — #0D1B2E  Deep navy structure, text, sidebar
   10 %  Orange   — #E55000  Precision-orange CTA, highlights
   ================================================================ */

/* ── Root tokens ─────────────────────────────────────────────── */
:root {
  /* 60 % — Neutral backgrounds & surfaces */
  --tc-bg:          #EEF1F7;   /* page background        */
  --tc-surface:     #FFFFFF;   /* cards, modals          */
  --tc-surface-2:   #F5F7FC;   /* table heads, inset bg  */
  --tc-pale:        #EBF0FA;   /* soft tint panels       */
  --tc-border:      #D1DBE8;   /* all borders            */
  --tc-border-light:#E3EAF3;   /* subtle dividers        */

  /* 30 % — Navy structure & text */
  --tc-navy:        #0D1B2E;   /* sidebar, navbar, footer */
  --tc-navy-mid:    #163354;   /* depth layer            */
  --tc-steel:       #25537A;   /* secondary buttons      */
  --tc-steel-light: #3470A0;   /* hover state            */
  --tc-silver:      #8EA5BB;   /* sidebar muted text     */
  --tc-silver-lt:   #C4D4E3;   /* light accents          */

  /* Text scale */
  --tc-text:        #0D1B2E;   /* headings, bold         */
  --tc-text-body:   #2E4057;   /* body copy              */
  --tc-text-mid:    #4A6070;   /* labels, secondary      */
  --tc-text-light:  #7A95AB;   /* captions, timestamps   */

  /* 10 % — Precision-orange CTA */
  --tc-orange:      #E55000;   /* primary CTA            */
  --tc-orange-hov:  #FF6420;   /* hover/active           */
  --tc-orange-pale: #FFF0E8;   /* orange context bg      */
  --tc-orange-ring: rgba(229,80,0,.15); /* focus ring   */

  /* Semantic colours */
  --tc-success:     #0B6E4F;
  --tc-success-bg:  #E6F5EF;
  --tc-warning:     #9A5000;
  --tc-warning-bg:  #FFF5E6;
  --tc-danger:      #B91C1C;
  --tc-danger-bg:   #FEF2F2;
  --tc-info:        #1254A0;
  --tc-info-bg:     #E3EFFF;

  /* Shape & depth */
  --tc-radius:      8px;
  --tc-radius-lg:   12px;
  --tc-radius-xl:   16px;
  --tc-shadow:      0 1px 3px rgba(13,27,46,.07), 0 1px 2px rgba(13,27,46,.04);
  --tc-shadow-md:   0 4px 16px rgba(13,27,46,.10);
  --tc-shadow-lg:   0 8px 32px rgba(13,27,46,.14);
  --tc-shadow-xl:   0 16px 48px rgba(13,27,46,.18);
}

/* ── Reset & base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--tc-text-body);
  background: var(--tc-bg);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { color: var(--tc-text); font-weight: 700; }
a { color: inherit; text-decoration: none; }

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--tc-bg); }
::-webkit-scrollbar-thumb { background: var(--tc-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--tc-silver); }

/* ================================================================
   NAVIGATION
   ================================================================ */
.tc-navbar {
  background: var(--tc-navy);
  height: 62px;
  border-bottom: 3px solid var(--tc-orange);
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 2px 12px rgba(13,27,46,.25);
}
.tc-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  color: #fff !important;
  letter-spacing: -.4px;
}
.tc-logo-icon {
  width: 34px; height: 34px;
  background: var(--tc-orange);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff;
  box-shadow: 0 2px 8px rgba(229,80,0,.4);
}
.tc-navbar .nav-link {
  color: rgba(255,255,255,.6) !important;
  font-size: 13.5px;
  font-weight: 500;
  padding: 6px 14px !important;
  border-radius: var(--tc-radius);
  transition: all .15s;
}
.tc-navbar .nav-link:hover, .tc-navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.09);
}
.tc-avatar-btn {
  width: 36px; height: 36px;
  background: var(--tc-orange);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: #fff; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all .15s;
  letter-spacing: -.5px;
}
.tc-avatar-btn:hover { background: var(--tc-orange-hov); transform: scale(1.05); }

/* ================================================================
   BUTTONS — 10 % orange only on primary CTA
   ================================================================ */
.tc-btn-primary {
  background: var(--tc-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--tc-radius) !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  transition: background .15s, transform .12s, box-shadow .15s !important;
  box-shadow: 0 2px 8px rgba(229,80,0,.3) !important;
}
.tc-btn-primary:hover {
  background: var(--tc-orange-hov) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(229,80,0,.4) !important;
}
.tc-btn-primary:active { transform: translateY(0); }

.tc-btn-ghost {
  background: transparent !important;
  color: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: var(--tc-radius) !important;
  font-weight: 500 !important;
  transition: all .15s !important;
}
.tc-btn-ghost:hover { background: rgba(255,255,255,.1) !important; color: #fff !important; }

.tc-btn-outline {
  background: transparent !important;
  color: var(--tc-orange) !important;
  border: 1.5px solid var(--tc-orange) !important;
  border-radius: var(--tc-radius) !important;
  font-weight: 600 !important;
  transition: all .15s !important;
}
.tc-btn-outline:hover {
  background: var(--tc-orange-pale) !important;
  box-shadow: 0 2px 8px rgba(229,80,0,.15) !important;
}

.tc-btn-secondary {
  background: var(--tc-steel) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--tc-radius) !important;
  font-weight: 500 !important;
  transition: background .15s !important;
}
.tc-btn-secondary:hover { background: var(--tc-steel-light) !important; }

.tc-btn-success {
  background: var(--tc-success) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--tc-radius) !important;
  font-weight: 500 !important;
}

/* ================================================================
   CARDS
   ================================================================ */
.tc-card {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  box-shadow: var(--tc-shadow);
}
.tc-card-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--tc-border-light);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--tc-surface);
  border-radius: var(--tc-radius-lg) var(--tc-radius-lg) 0 0;
}
.tc-card-header h3, .tc-card-header h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--tc-text);
  margin: 0;
  flex: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tc-card-body { padding: 20px 24px; }

/* ── Stat Cards ──────────────────────────────────────────────── */
.tc-stat-card {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s;
}
.tc-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--tc-border);
}
.tc-stat-card.accent::before { background: var(--tc-orange); }
.tc-stat-card:hover { box-shadow: var(--tc-shadow-md); }
.tc-stat-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tc-text-light);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}
.tc-stat-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--tc-text);
  line-height: 1;
  letter-spacing: -.5px;
}
.tc-stat-change { font-size: 12px; margin-top: 8px; font-weight: 500; }
.tc-stat-change.up   { color: var(--tc-success); }
.tc-stat-change.down { color: var(--tc-danger); }

/* ================================================================
   BADGES / STATUS CHIPS
   ================================================================ */
.tc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* Order statuses */
.tc-badge-pending     { background: var(--tc-warning-bg); color: var(--tc-warning); }
.tc-badge-reviewing   { background: var(--tc-info-bg);    color: var(--tc-info); }
.tc-badge-confirmed   { background: var(--tc-info-bg);    color: var(--tc-info); }
.tc-badge-assigned    { background: #F0E8FF;               color: #5B21B6; }
.tc-badge-in_production { background: var(--tc-success-bg); color: var(--tc-success); }
.tc-badge-qc_check    { background: var(--tc-warning-bg); color: var(--tc-warning); }
.tc-badge-shipped     { background: #F0E8FF;               color: #5B21B6; }
.tc-badge-delivered   { background: var(--tc-success-bg); color: var(--tc-success); }
.tc-badge-cancelled   { background: var(--tc-danger-bg);  color: var(--tc-danger); }
/* Partner/account statuses */
.tc-badge-active      { background: var(--tc-success-bg); color: var(--tc-success); }
.tc-badge-suspended   { background: var(--tc-danger-bg);  color: var(--tc-danger); }
.tc-badge-inactive    { background: var(--tc-bg);          color: var(--tc-text-light); border: 1px solid var(--tc-border); }
/* Quote statuses */
.tc-badge-draft       { background: var(--tc-bg);          color: var(--tc-text-mid); border: 1px solid var(--tc-border); }
/* Every quote the customer is actually invited to pay for carries this status,
   and it had no rule -- so `.tc-badge tc-badge-sent` rendered as an unstyled
   inline-block with no background on the quote list, the quote detail page and
   the ops queue. Orange because "Quote Sent" is the state that wants action. */
.tc-badge-sent        { background: var(--tc-orange-pale); color: var(--tc-orange); }
.tc-badge-accepted    { background: var(--tc-info-bg);    color: var(--tc-info); }
.tc-badge-rejected    { background: var(--tc-danger-bg);  color: var(--tc-danger); }
.tc-badge-expired     { background: var(--tc-bg);          color: var(--tc-text-light); border: 1px solid var(--tc-border); }
/* Priority */
.tc-badge-high        { background: var(--tc-danger-bg);  color: var(--tc-danger); }
.tc-badge-normal      { background: var(--tc-info-bg);    color: var(--tc-info); }
/* PartnerJob statuses */
.tc-badge-acknowledged { background: var(--tc-info-bg);    color: var(--tc-info); }
.tc-badge-cutting      { background: #FFFBEB;               color: #854D0E; }
.tc-badge-bending      { background: #F0E8FF;               color: #5B21B6; }
.tc-badge-finishing    { background: #FCE8F4;               color: #9D1651; }
.tc-badge-qc           { background: var(--tc-warning-bg); color: var(--tc-warning); }
.tc-badge-packed       { background: #D8F5E7;               color: #0B6E4F; }
.tc-badge-dispatched   { background: var(--tc-success-bg); color: var(--tc-success); }
.tc-badge-completed    { background: var(--tc-success-bg); color: var(--tc-success); }
.tc-badge-refunded     { background: var(--tc-danger-bg);  color: var(--tc-danger); }

/* ================================================================
   TABLES
   ================================================================ */
.tc-table { width: 100%; border-collapse: collapse; }
.tc-table th {
  padding: 11px 16px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tc-text-light);
  text-transform: uppercase;
  letter-spacing: .07em;
  border-bottom: 1px solid var(--tc-border);
  background: var(--tc-surface-2);
  white-space: nowrap;
}
.tc-table td {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--tc-text-body);
  border-bottom: 1px solid var(--tc-border-light);
  vertical-align: middle;
}
.tc-table tr:last-child td { border-bottom: none; }
.tc-table tbody tr { transition: background .1s; }
.tc-table tbody tr:hover td { background: var(--tc-pale); }

/* ================================================================
   FORMS
   ================================================================ */
.tc-form-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--tc-text-mid);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
  display: block;
}
.tc-input, .tc-select, .tc-textarea,
input.tc-input, select.tc-input, textarea.tc-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--tc-border);
  border-radius: var(--tc-radius);
  font-size: 14px;
  font-family: inherit;
  color: var(--tc-text);
  background: var(--tc-surface);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.tc-input:focus, .tc-select:focus, .tc-textarea:focus {
  border-color: var(--tc-orange);
  box-shadow: 0 0 0 3px var(--tc-orange-ring);
}
.tc-input::placeholder { color: var(--tc-text-light); }

/* ── Auth input (larger, for sign in / sign up) ──────────────── */
.tc-auth-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--tc-border);
  border-radius: var(--tc-radius);
  font-size: 15px;
  font-family: inherit;
  color: var(--tc-text);
  background: var(--tc-surface-2);
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.tc-auth-input:focus {
  border-color: var(--tc-orange);
  background: #fff;
  box-shadow: 0 0 0 3px var(--tc-orange-ring);
}
.tc-auth-input::placeholder { color: var(--tc-text-light); }
.tc-auth-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-text-mid);
  margin-bottom: 6px;
  letter-spacing: .02em;
}

/* ================================================================
   UPLOAD ZONES
   ================================================================ */
.tc-upload-zone {
  border: 2px dashed var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: 44px 24px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  background: var(--tc-surface);
}
.tc-upload-zone:hover, .tc-upload-zone.drag-over {
  border-color: var(--tc-orange);
  background: var(--tc-orange-pale);
}
.tc-upload-icon { font-size: 42px; color: var(--tc-silver); margin-bottom: 14px; transition: color .2s; }
.tc-upload-zone:hover .tc-upload-icon { color: var(--tc-orange); }

/* ================================================================
   FILE ITEMS
   ================================================================ */
.tc-file-item {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: box-shadow .15s;
}
.tc-file-item:hover { box-shadow: var(--tc-shadow-md); }
.tc-file-ext {
  width: 44px; height: 44px;
  border-radius: var(--tc-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
}
.ext-dxf  { background: #E3EFFF; color: var(--tc-info); }
.ext-dwg  { background: #E6F5EF; color: var(--tc-success); }
.ext-step, .ext-stp { background: var(--tc-warning-bg); color: var(--tc-warning); }
.ext-stl  { background: #F0E8FF; color: #5B21B6; }
.ext-iges, .ext-igs { background: #FCE8F4; color: #9D1651; }

/* ================================================================
   OPTION GRIDS (material / process / finish selectors)
   ================================================================ */
.tc-option-grid { display: grid; gap: 8px; }
.tc-option-btn {
  border: 1.5px solid var(--tc-border);
  border-radius: var(--tc-radius);
  padding: 10px 14px;
  cursor: pointer;
  transition: all .15s;
  background: var(--tc-surface);
  text-align: left;
}
.tc-option-btn:hover { border-color: var(--tc-silver); background: var(--tc-pale); }
.tc-option-btn.selected {
  border-color: var(--tc-orange);
  background: var(--tc-orange-pale);
  box-shadow: 0 0 0 1px var(--tc-orange);
}
.tc-option-btn .opt-name { font-size: 13px; font-weight: 600; color: var(--tc-text); }
.tc-option-btn .opt-sub  { font-size: 11px; color: var(--tc-text-light); margin-top: 2px; }

/* A caption under an option group: what is on offer and why the list is the
   length it is. Sized below .opt-sub so it never competes with an option. */
.tc-field-note { font-size: 11px; color: var(--tc-text-light); line-height: 1.5; }

/* --- Thickness: an ordered scale, not thirteen unrelated buttons ---------
   Gauges run thin to thick, the unit is stated once in the caption instead of
   thirteen times, and each chip draws its own metal: the bar's height in
   pixels IS the gauge in millimetres (clamped so 0.8 mm stays visible and
   12 mm stays a chip). The ramp is what makes the row read as a ruler. */
.tc-gauge-scale { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-gauge {
  width: 56px;
  padding: 7px 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}
.tc-gauge-value { font-size: 13px; font-weight: 600; color: var(--tc-text); line-height: 1; }
.tc-gauge-bar {
  width: 26px;
  min-height: 2px;
  max-height: 12px;
  border-radius: 1px;
  /* Falls back to the neutral silver when the material has no colour of its
     own, so a newly seeded metal renders before anyone chooses one. */
  background: var(--tc-metal, var(--tc-silver-lt));
  transition: background .15s;
}
/* Selection darkens the same metal rather than switching to orange. The chip
   already carries an orange border and tint, so the bar does not need to
   repeat the cue -- and keeping it metal means the selected gauge still shows
   what it is made of, which is the whole point of colouring the scale. */
.tc-option-btn.selected .tc-gauge-bar { background: var(--tc-metal-dk, var(--tc-orange)); }

/* Real finished-surface colours, keyed on Material.code. Mild steel carries
   its blue-grey mill scale; stainless is brighter and cooler than aluminium,
   which is lighter and slightly warmer; galvanized reads as spangled zinc;
   copper is C11000. Deliberately muted -- these are 26px bars sitting under a
   number, and the number is what is being read. */
.tc-gauge-scale[data-metal="MS"]     { --tc-metal: #8C97A5; --tc-metal-dk: #5E6975; }
.tc-gauge-scale[data-metal="SS304"],
.tc-gauge-scale[data-metal="SS316"]  { --tc-metal: #B4BCC4; --tc-metal-dk: #838D97; }
.tc-gauge-scale[data-metal="AL6061"] { --tc-metal: #C9CFD4; --tc-metal-dk: #9AA3AB; }
.tc-gauge-scale[data-metal="GI"]     { --tc-metal: #A6B4BE; --tc-metal-dk: #778793; }
.tc-gauge-scale[data-metal="CU"]     { --tc-metal: #B87333; --tc-metal-dk: #8C5524; }

/* --- Single-choice lists (surface finish) --------------------------------
   A radio dot makes "pick exactly one of these" legible, which five equally
   weighted cards do not. */
.tc-option-radio {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: 1.5px solid var(--tc-border);
  border-radius: 50%;
  background: #fff;
  position: relative;
}
.tc-option-btn.selected .tc-option-radio { border-color: var(--tc-orange); }
.tc-option-btn.selected .tc-option-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--tc-orange);
}
.tc-option-price { font-size: 12px; font-weight: 700; color: var(--tc-text-mid); white-space: nowrap; }
.tc-option-price.is-included { font-weight: 600; color: var(--tc-text-light); }

/* ================================================================
   PRICE BREAKDOWN BOX
   ================================================================ */
.tc-price-box {
  background: var(--tc-pale);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: 18px 20px;
}
.tc-price-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--tc-text-mid);
  padding: 5px 0;
}
.tc-price-total {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 800;
  color: var(--tc-text);
  padding-top: 12px;
  border-top: 1.5px solid var(--tc-border);
  margin-top: 10px;
}

/* ================================================================
   PROGRESS BAR
   ================================================================ */
.tc-progress-bar {
  height: 5px;
  background: var(--tc-border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}
.tc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tc-orange), var(--tc-orange-hov));
  border-radius: 3px;
  transition: width .4s ease;
}

/* ================================================================
   SIDEBAR PORTAL LAYOUT
   ================================================================ */
.tc-sidebar {
  background: var(--tc-navy);
  width: 240px;
  min-height: calc(100vh - 62px);
  position: fixed;
  top: 62px;
  left: 0;
  overflow-y: auto;
  z-index: 100;
  border-right: 1px solid rgba(255,255,255,.04);
}
.tc-sidebar-logo {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 6px;
}
.tc-sidebar-brand { padding: 20px 20px 8px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 8px; }
.tc-sidebar-brand-name { color: #fff; font-size: 13.5px; font-weight: 600; }
.tc-sidebar-role {
  font-size: 10.5px;
  color: var(--tc-silver);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 3px;
}
.tc-sidebar-nav { padding: 8px 0; }
.tc-sidebar-footer {
  padding: 12px 0 16px;
  border-top: 1px solid rgba(255,255,255,.07);
  margin-top: auto;
}
.tc-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 20px;
  color: rgba(255,255,255,.55);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.tc-nav-item:hover {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  border-left-color: rgba(255,255,255,.15);
}
.tc-nav-item.active {
  background: rgba(229,80,0,.14);
  color: #fff;
  border-left-color: var(--tc-orange);
  font-weight: 600;
}
.tc-nav-item i { font-size: 15px; width: 18px; flex-shrink: 0; }
.tc-nav-section {
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 16px 20px 6px;
}
.tc-sidebar-content {
  margin-left: 240px;
  min-height: calc(100vh - 62px);
  background: var(--tc-bg);
}

/* ── Portal topbar ───────────────────────────────────────────── */
.tc-portal-topbar {
  background: var(--tc-surface);
  border-bottom: 1px solid var(--tc-border);
  padding: 0 32px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 62px;
  z-index: 90;
  box-shadow: 0 1px 0 var(--tc-border);
}
.tc-portal-topbar h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--tc-text);
  flex: 1;
  margin: 0;
}

/* ================================================================
   QUOTE CONFIG PANEL
   ================================================================ */
.tc-quote-panel {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tc-quote-panel-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--tc-border-light);
}
.tc-quote-panel-body { padding: 20px; flex: 1; overflow-y: auto; }
.tc-quote-panel-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--tc-border-light);
  background: var(--tc-surface-2);
  border-radius: 0 0 var(--tc-radius-lg) var(--tc-radius-lg);
}

/* ================================================================
   3-D / DXF PREVIEW PANEL
   ================================================================ */
.tc-preview-panel {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  overflow: hidden;
}
.tc-preview-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--tc-border-light);
  display: flex; align-items: center; gap: 12px;
  background: var(--tc-surface-2);
}
.tc-preview-body {
  height: 400px;
  background: var(--tc-pale);
  position: relative;
}
.tc-preview-tabs .nav-link {
  padding: 4px 14px !important;
  font-size: 12px !important;
  color: var(--tc-text-light) !important;
  border-radius: 20px !important;
}
.tc-preview-tabs .nav-link.active {
  background: var(--tc-navy) !important;
  color: #fff !important;
}
.tc-preview-controls {
  padding: 10px 20px;
  border-top: 1px solid var(--tc-border-light);
  display: flex; align-items: center; gap: 10px;
  background: var(--tc-surface-2);
}

/* ================================================================
   HERO — LANDING PAGE
   ================================================================ */
.tc-hero {
  background: linear-gradient(140deg, var(--tc-navy) 0%, #163354 60%, #25537A 100%);
  padding: 80px 0 88px;
  position: relative;
  overflow: hidden;
}
.tc-hero::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 100%;
  background: radial-gradient(ellipse at 80% 50%, rgba(229,80,0,.12) 0%, transparent 65%);
  pointer-events: none;
}
.tc-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(229,80,0,.16);
  color: #FF7A40;
  border: 1px solid rgba(229,80,0,.3);
  padding: 5px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 22px;
}
.tc-hero h1 {
  font-size: 50px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.6px;
  margin-bottom: 20px;
}
.tc-hero h1 em { color: var(--tc-orange-hov); font-style: normal; }
.tc-hero-sub {
  color: var(--tc-silver-lt);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 38px;
  max-width: 560px;
}
.tc-hero-trust {
  display: flex;
  align-items: center;
  gap: 20px;
  color: rgba(255,255,255,.45);
  font-size: 12px;
  font-weight: 500;
  flex-wrap: wrap;
}
.tc-hero-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.5);
}
.tc-hero-trust-item i { color: var(--tc-orange); font-size: 14px; }

/* ================================================================
   FEATURE CARDS (landing)
   ================================================================ */
.tc-feature-icon {
  width: 48px; height: 48px;
  border-radius: var(--tc-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
}
.tc-feature-icon-orange { background: var(--tc-orange-pale); color: var(--tc-orange); }
.tc-feature-icon-navy   { background: var(--tc-pale);        color: var(--tc-navy); }
.tc-feature-icon-green  { background: var(--tc-success-bg);  color: var(--tc-success); }

/* ================================================================
   AUTH PAGES — Full-viewport split layout
   ================================================================ */
.tc-auth-page {
  min-height: 100vh;
  display: flex;
  background: var(--tc-navy);
}

/* Left panel — 30 % navy (visual weight, brand messaging) */
.tc-auth-left {
  width: 44%;
  background: linear-gradient(155deg, #0D1B2E 0%, #163354 55%, #1E4A7A 100%);
  padding: 56px 56px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.tc-auth-left::before {
  content: '';
  position: absolute;
  bottom: -80px; right: -80px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229,80,0,.18) 0%, transparent 70%);
  pointer-events: none;
}
.tc-auth-left::after {
  content: '';
  position: absolute;
  top: -60px; left: -40px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%);
  pointer-events: none;
}

/* Right panel — 60 % neutral white/light (the form surface) */
.tc-auth-right {
  flex: 1;
  background: var(--tc-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.tc-auth-box {
  width: 100%;
  max-width: 440px;
}
.tc-auth-card {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  padding: 40px 40px;
  box-shadow: var(--tc-shadow-lg);
}

/* Auth brand */
.tc-auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.4px;
  margin-bottom: 48px;
  text-decoration: none;
}
.tc-auth-logo {
  width: 38px; height: 38px;
  background: var(--tc-orange);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff;
  box-shadow: 0 4px 14px rgba(229,80,0,.5);
}

/* Auth value props */
.tc-auth-value-list { list-style: none; padding: 0; margin: 0; }
.tc-auth-value-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255,255,255,.82);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.tc-auth-value-list li .icon {
  width: 28px; height: 28px;
  background: rgba(229,80,0,.2);
  border: 1px solid rgba(229,80,0,.3);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #FF7A40;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}
.tc-auth-value-list li strong { color: #fff; display: block; font-size: 13px; font-weight: 600; }

/* Auth testimonial */
.tc-auth-testimonial {
  margin-top: auto;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.tc-auth-testimonial blockquote {
  color: rgba(255,255,255,.75);
  font-size: 14px;
  line-height: 1.65;
  font-style: italic;
  margin: 0 0 14px;
}
.tc-auth-testimonial .author { color: rgba(255,255,255,.5); font-size: 12px; font-weight: 500; }
.tc-auth-testimonial .author strong { color: rgba(255,255,255,.8); }

/* Auth divider */
.tc-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tc-text-light);
  font-size: 12px;
  font-weight: 500;
  margin: 20px 0;
}
.tc-auth-divider::before,
.tc-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--tc-border);
}

/* Auth error/help */
.tc-auth-error {
  background: var(--tc-danger-bg);
  border: 1px solid #FCA5A5;
  border-radius: var(--tc-radius);
  padding: 10px 14px;
  color: var(--tc-danger);
  font-size: 13px;
}
.tc-auth-success {
  background: var(--tc-success-bg);
  border: 1px solid #6EE7B7;
  border-radius: var(--tc-radius);
  padding: 10px 14px;
  color: var(--tc-success);
  font-size: 13px;
}

/* ================================================================
   FOOTER
   ================================================================ */
.tc-footer {
  background: var(--tc-navy);
  color: rgba(255,255,255,.7);
  border-top: 3px solid var(--tc-orange);
}
.tc-footer h6 { color: #fff; }
.tc-footer-link { color: rgba(255,255,255,.5); transition: color .15s; }
.tc-footer-link:hover { color: #fff; }
.tc-social-link { color: rgba(255,255,255,.45); font-size: 18px; transition: color .15s; }
.tc-social-link:hover { color: var(--tc-orange); }

/* ================================================================
   DROPDOWN
   ================================================================ */
.tc-dropdown {
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  box-shadow: var(--tc-shadow-lg);
  padding: 6px;
  min-width: 210px;
  background: var(--tc-surface);
}
.tc-dropdown .dropdown-item {
  border-radius: var(--tc-radius);
  font-size: 13.5px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--tc-text-body);
  transition: background .1s;
}
.tc-dropdown .dropdown-item:hover { background: var(--tc-pale); color: var(--tc-text); }
.tc-dropdown .dropdown-header {
  font-size: 11px;
  color: var(--tc-text-light);
  padding: 4px 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ================================================================
   JOB CARD (Partner portal)
   ================================================================ */
.tc-job-card {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: 20px 24px;
  transition: box-shadow .2s, border-color .2s;
}
.tc-job-card:hover { box-shadow: var(--tc-shadow-md); border-color: var(--tc-silver-lt); }
.tc-job-thumb {
  width: 80px; height: 64px;
  background: var(--tc-pale);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* ================================================================
   MONOSPACE — order numbers, file names, codes
   ================================================================ */
.tc-mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 12px; }

/* ================================================================
   UTILITIES
   ================================================================ */
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.text-orange  { color: var(--tc-orange); }
.text-navy    { color: var(--tc-navy); }
.bg-tc-pale   { background: var(--tc-pale); }
.bg-tc-surface{ background: var(--tc-surface); }
.border-tc    { border: 1px solid var(--tc-border); }
.rounded-tc   { border-radius: var(--tc-radius); }
.rounded-tc-lg{ border-radius: var(--tc-radius-lg); }

/* Focus-visible outline — orange ring */
:focus-visible { outline: 2px solid var(--tc-orange); outline-offset: 2px; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 992px) {
  .tc-sidebar { display: none; }
  .tc-sidebar-content { margin-left: 0; }
  .tc-hero h1 { font-size: 36px; }
  .tc-auth-left { display: none; }
  .tc-auth-right { background: var(--tc-navy); }
  .tc-auth-card { border: 1px solid rgba(255,255,255,.1); }
}

@media (max-width: 576px) {
  .tc-auth-card { padding: 28px 24px; }
  .tc-portal-topbar { padding: 0 16px; }
  .tc-hero { padding: 48px 0 56px; }
  .tc-hero h1 { font-size: 30px; }
}

/* ================================================================
   CART ICON  (Amazon-style — navbar)
   ================================================================ */
.tc-cart-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-decoration: none;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  transition: background .15s, box-shadow .15s;
  line-height: 1;
}
.tc-cart-icon:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.tc-cart-icon__wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.tc-cart-icon__badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #f0c000;
  color: #111;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-family: var(--tc-font);
}
.tc-cart-icon__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-top: 2px;
}

/* ── DXF Viewer ──────────────────────────────────────────────────────────── */
#dxf-canvas-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
#dxf-fullscreen-overlay {
  display: none;
}
#dxf-fullscreen-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ── Shared public-page utilities ────────────────────────────────────────────
   These were previously defined only inside templates/accounts/home.html's
   local <style> block, so any other page using them (e.g. the About page)
   silently got no background — producing white-on-white text. Defined here
   so every page gets them. */
.tc-bg-pale       { background: var(--tc-pale); }
.tc-bg-navy       { background: var(--tc-navy); }
.tc-section-title { font-size: 1.75rem; font-weight: 700; color: var(--tc-text); }
.tc-text-orange   { color: var(--tc-orange); }
.py-6             { padding-top: 5rem; padding-bottom: 5rem; }

/* ── Customer dashboard ───────────────────────────────────────────────────── */
/* The hero was an inline gradient with hardcoded hex on a .tc-card that then
   had to fight the card's own border and radius. It is its own thing now, and
   it reads the palette so a token change reaches it. */
.tc-dash-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 22px 26px;
  border-radius: var(--tc-radius-lg);
  background: linear-gradient(135deg, var(--tc-navy) 0%, var(--tc-navy-mid) 100%);
  position: relative;
  overflow: hidden;
}
/* A single orange hairline tying the hero to the accent used on the primary
   stat tile and the CTA, so the three read as one system rather than three
   unrelated blocks of colour. */
.tc-dash-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--tc-orange);
  opacity: .85;
}
.tc-dash-hero-sub { color: #c8d8e8; font-size: 13px; }
.tc-dash-hero-cue { color: #fff; font-weight: 600; }

/* A zero here is a real state, not a number worth shouting. Keeping it at full
   weight made "Rs 0" compete with the order count beside it. */
.tc-stat-zero { color: var(--tc-text-light); font-weight: 700; }

/* Pending-quote actions: up to five controls in a 4-column-wide card. The two
   that decide money stay full-strength; edit and delete become quiet icons so
   the row stops looking like five equal choices. */
.tc-quote-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.tc-quote-actions .tc-icon-btn {
  border: 1px solid var(--tc-border);
  color: var(--tc-text-light);
  background: transparent;
  padding: .25rem .5rem;
  border-radius: 6px;
  line-height: 1.2;
  transition: color .15s, border-color .15s;
}
.tc-quote-actions .tc-icon-btn:hover { color: var(--tc-text); border-color: var(--tc-text-light); }
.tc-quote-actions .tc-icon-btn.danger:hover { color: #b91c1c; border-color: #fecaca; }

/* Empty right-hand column. Without this the column simply vanished and the
   orders table stretched into a lopsided page. */
.tc-dash-empty {
  border: 1px dashed var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--tc-text-light);
  background: transparent;
}