/* ============================================================
   VeronaIC / CDI Industrial Controls Theme (Bootstrap 5 Compliant)
   LIGHT THEME VERSION
   Bold industrial: whites, steels, graphite text, Ferrari red + metallic depth
   Full replacement theme.css
   ============================================================ */

/* ---------- LabelWright Istanbul font ---------- */
/* NOTE: verify the file name is correct: BRISTRTO.TTF (letter O) */
@font-face {
  font-family: "Istanbul";
  src: url("/static/fonts/Istanbul/BRISTRT0.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Root tokens
   ============================================================ */
:root{
  /* Cleaner display stack: lighter, less condensed, easier to read */
  --font-display: "Bahnschrift", "Aptos", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Barlow", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* ---------- Light industrial palette ---------- */
  --white: #ffffff;
  --snow: #fbfcfe;
  --mist: #f2f5f9;
  --fog:  #e8edf4;
  --silver: #c9d2de;

  --ink: #0c0f14;
  --charcoal: #121722;
  --slate: #1b2433;
  --graphite: #2b3442;
  --steel: #3a4657;

  /* Ferrari-ish reds (layered) */
  --red-1: #ff2a2a;
  --red-2: #e10600; /* primary “Ferrari red” */
  --red-3: #b00000;
  --red-glow: rgba(225, 6, 0, .20);

  /* Risky-but-controlled accents */
  --electric: #0ea5e9;
  --hazard: #ffb020;
  --lime: #22c55e;

  /* Surfaces */
  --bg: var(--snow);
  --bg-2: var(--mist);
  --panel: rgba(12,15,20,.03);
  --panel-2: rgba(12,15,20,.05);
  --border: rgba(12,15,20,.10);
  --border-2: rgba(12,15,20,.16);

  /* Text */
  --text: rgba(12,15,20,.92);
  --text-2: rgba(12,15,20,.74);
  --text-3: rgba(12,15,20,.62);

  /* Effects */
  --shadow: 0 14px 40px rgba(12,15,20,.10);
  --shadow-2: 0 24px 70px rgba(12,15,20,.14);
  --radius: 18px;

  /* Gradients (metallic + subtle depth) */
  --grad-surface: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
  --grad-ink: linear-gradient(135deg, #ffffff 0%, #f2f5f9 45%, #ffffff 100%);
  --grad-metal: linear-gradient(135deg, rgba(12,15,20,.08) 0%, rgba(12,15,20,.03) 40%, rgba(255,255,255,.85) 100%);
  --grad-red: linear-gradient(90deg, var(--red-3), var(--red-2), var(--red-1));
  --grad-red-diag: linear-gradient(135deg, var(--red-3) 0%, var(--red-2) 45%, var(--red-1) 100%);
  --grad-glow: radial-gradient(circle at 30% 20%, rgba(225,6,0,.18), transparent 55%),
               radial-gradient(circle at 80% 70%, rgba(14,165,233,.12), transparent 55%);

  /* “linework” pattern (light mode version) */
  --grid: linear-gradient(to right, rgba(12,15,20,.05) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(12,15,20,.05) 1px, transparent 1px);
  --grid-size: 42px 42px;

  /* ============================================================
     Bootstrap 5 token mapping
     ============================================================ */

  /* Body */
  --bs-body-font-family: var(--font-body);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);

  /* Text utilities */
  --bs-secondary-color: var(--text-2);
  --bs-tertiary-color: var(--text-3);
  --bs-emphasis-color: var(--ink);

  /* Links */
  --bs-link-color: var(--red-2);
  --bs-link-hover-color: var(--red-1);

  /* Borders / radii */
  --bs-border-color: rgba(12,15,20,.14);
  --bs-border-color-translucent: rgba(12,15,20,.10);
  --bs-border-radius: 16px;
  --bs-border-radius-lg: var(--radius);
  --bs-border-radius-pill: 999px;

  /* Surfaces */
  --bs-secondary-bg: rgba(12,15,20,.03);
  --bs-tertiary-bg: rgba(12,15,20,.05);

  /* Brand colors */
  --bs-primary: var(--red-2);
  --bs-primary-rgb: 225, 6, 0;

  --bs-danger: var(--red-2);
  --bs-danger-rgb: 225, 6, 0;

  --bs-info: var(--electric);
  --bs-info-rgb: 14, 165, 233;

  --bs-warning: var(--hazard);
  --bs-warning-rgb: 255, 176, 32;

  --bs-success: var(--lime);
  --bs-success-rgb: 34, 197, 94;

  /* Focus ring */
  --bs-focus-ring-color: rgba(225,6,0,.20);

  /* Typography */
  --bs-font-sans-serif: var(--font-body);
  --bs-heading-color: rgba(12,15,20,.92);

  /* LabelWright tokens */
  --lw-black: #0b0b0b;
  --lw-red: #c1121f;
  --lw-gray: rgba(12,15,20,.55);
}

/* ============================================================
   Base
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  margin: 0;
  position: relative;
  background:
    radial-gradient(circle at right bottom, rgba(12,15,20,.08), transparent 38%),
    radial-gradient(circle at 12% 14%, rgba(225,6,0,.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grid);
  background-size: var(--grid-size);
  opacity: .16;
  pointer-events: none;
  z-index: -1;
}

a { color: var(--bs-link-color); text-decoration: none; }
a:hover { color: var(--bs-link-hover-color); text-decoration: none; }

/* Headings: strong, industrial, but readable in light mode */
h1, h2, h3, h4, h5, h6, .display-font,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--bs-heading-color);
  font-weight: 500;
  letter-spacing: 0.015em;
}

/* Paragraph + list readability */
p, li { color: var(--text-2); }
small, .muted { color: var(--text-3) !important; }

.text-muted { color: var(--text-3) !important; opacity: 1 !important; }
.text-secondary { color: var(--text-2) !important; }

/* Selection */
::selection {
  background: rgba(225, 6, 0, .18);
  color: var(--ink);
}

/* Utility accents */
.text-red { color: var(--red-2) !important; }
.text-electric { color: var(--electric) !important; }
.border-red { border-color: rgba(225,6,0,.40) !important; }

.hr-metal {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(12,15,20,.18), transparent);
  margin: 2rem 0;
}

/* ============================================================
   Components
   ============================================================ */

/* Generic hero/page hero only */
.hero, .page-hero, .masthead, .banner {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(12,15,20,.10);
  background: var(--grad-ink);
}

.hero::before, .page-hero::before, .masthead::before, .banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-glow);
  opacity: .9;
  pointer-events: none;
}

.hero::after, .page-hero::after, .masthead::after, .banner::after {
  content: "";
  position: absolute;
  inset: -2px;
  background-image: var(--grid);
  background-size: var(--grid-size);
  opacity: .35;
  pointer-events: none;
  mask-image: radial-gradient(circle at 40% 35%, black 0%, transparent 70%);
}

.hero .hero-title,
.page-hero h1,
.masthead h1,
.banner h1 {
  color: rgba(12,15,20,.96);
  text-shadow: 0 10px 30px rgba(12,15,20,.08);
  font-weight: 600;
}

.hero .hero-title span,
.hero .accent,
.page-hero .accent {
  background: var(--grad-red);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .hero-subtitle,
.page-hero p,
.masthead p,
.banner p {
  color: rgba(12,15,20,.72);
  max-width: 62ch;
}

/* Sections */
.section, section { position: relative; }

.section--dark {
  background: linear-gradient(180deg, rgba(12,15,20,.03), rgba(12,15,20,.01));
}

.section--grid {
  background:
    radial-gradient(circle at 20% 10%, rgba(225,6,0,.10), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(14,165,233,.10), transparent 55%),
    var(--grad-ink);
}

.section--grid::after {
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--grid);
  background-size: var(--grid-size);
  opacity: .28;
  pointer-events:none;
}

.section--metal {
  background:
    radial-gradient(circle at 25% 20%, rgba(12,15,20,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(242,245,249,.86));
}

/* Cards */
.card, .panel, .box, .content-card {
  background: var(--grad-surface) !important;
  border: 1px solid rgba(12,15,20,.10) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
  overflow: hidden;
  color: var(--text);
}

.card .card-title, .panel .title {
  font-family: var(--font-display);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(12,15,20,.92);
  font-weight: 500;
}

.card .card-text { color: var(--text-2); }

.card .text-muted,
.card small,
.card .muted {
  color: var(--text-3) !important;
}

.card:hover, .panel:hover, .content-card:hover {
  border-color: rgba(225,6,0,.25) !important;
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Edge stripe variant */
.card--edge, .panel--edge { position: relative; }

.card--edge::before, .panel--edge::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 6px;
  background: var(--grad-red);
  opacity: .9;
}

/* Buttons */
.btn, button, input[type="submit"] {
  border-radius: 999px !important;
  font-family: var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
}

.btn-primary {
  background: var(--grad-red-diag) !important;
  border: 1px solid rgba(12,15,20,.08) !important;
  color: #fff !important;
  box-shadow: 0 16px 40px rgba(225,6,0,.16);
}

.btn-primary:hover {
  filter: brightness(1.03);
  box-shadow: 0 22px 55px rgba(225,6,0,.22);
  transform: translateY(-1px);
  transition: all .18s ease;
}

.btn-outline-primary,
.btn-outline-dark,
.btn-outline-secondary {
  background: rgba(255,255,255,.80) !important;
  border: 1px solid rgba(12,15,20,.18) !important;
  color: rgba(12,15,20,.86) !important;
}

.btn-outline-primary:hover,
.btn-outline-dark:hover,
.btn-outline-secondary:hover {
  border-color: rgba(225,6,0,.45) !important;
  box-shadow: 0 18px 50px rgba(225,6,0,.10);
  color: rgba(12,15,20,.92) !important;
}

/* CTA scan */
.btn-scan { position: relative; overflow: hidden; }

.btn-scan::after {
  content:"";
  position:absolute;
  top:-20%;
  left:-40%;
  width: 40%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(12,15,20,.10), transparent);
  transform: skewX(-18deg);
  animation: scan 2.8s ease-in-out infinite;
  opacity:.45;
}

@keyframes scan{
  0% { left:-40%; opacity:.0; }
  35% { opacity:.45; }
  70% { left:120%; opacity:.0; }
  100% { left:120%; opacity:.0; }
}

/* Badges */
.badge {
  border-radius: 999px;
  padding: .35rem .7rem;
  border: 1px solid rgba(12,15,20,.14);
  background: rgba(12,15,20,.03);
  color: rgba(12,15,20,.78);
  font-family: var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}

.badge.bg-primary {
  background: rgba(225,6,0,.12) !important;
  border-color: rgba(225,6,0,.30) !important;
  color: rgba(12,15,20,.92) !important;
}

.badge.bg-info {
  background: rgba(14,165,233,.12) !important;
  border-color: rgba(14,165,233,.30) !important;
  color: rgba(12,15,20,.92) !important;
}

.badge.bg-warning {
  background: rgba(255,176,32,.18) !important;
  border-color: rgba(255,176,32,.35) !important;
  color: rgba(12,15,20,.92) !important;
}

/* Lists */
ul li::marker { color: rgba(225,6,0,.65); }

/* Forms */
.form-control, .form-select, input, textarea, select {
  background: rgba(255,255,255,.92) !important;
  color: rgba(12,15,20,.92) !important;
  border: 1px solid rgba(12,15,20,.16) !important;
  border-radius: 12px !important;
  padding: .7rem .85rem;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(12,15,20,.45) !important;
}

.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: rgba(225,6,0,.45) !important;
  box-shadow: 0 0 0 4px rgba(225,6,0,.14) !important;
}

.form-text { color: var(--text-3) !important; }

/* Alerts */
.alert {
  border-radius: var(--radius);
  border: 1px solid rgba(12,15,20,.14);
  background: rgba(255,255,255,.92);
  color: rgba(12,15,20,.86);
  box-shadow: var(--shadow);
}

.alert-primary { border-color: rgba(225,6,0,.25); }
.alert-info { border-color: rgba(14,165,233,.25); }
.alert-warning { border-color: rgba(255,176,32,.28); }
.alert-success { border-color: rgba(34,197,94,.25); }

/* Tables */
.table {
  color: rgba(12,15,20,.86);
  --bs-table-color: rgba(12,15,20,.86);
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(12,15,20,.14);
}

.table thead th {
  font-family: var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(12,15,20,.92);
  font-weight: 600;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(12,15,20,.03) !important;
  color: rgba(12,15,20,.86) !important;
}

.table-hover > tbody > tr:hover > * {
  background-color: rgba(225,6,0,.06) !important;
}

/* Dropdowns / Modals */
.dropdown-menu,
.modal-content {
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(12,15,20,.14) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-2);
  color: rgba(12,15,20,.90);
}

.dropdown-item { color: rgba(12,15,20,.78) !important; }

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(225,6,0,.06) !important;
  color: rgba(12,15,20,.92) !important;
}

/* Callout */
.callout, .announcement, .notice-bar {
  border-radius: var(--radius);
  border: 1px solid rgba(12,15,20,.14);
  background:
    radial-gradient(circle at 15% 30%, rgba(225,6,0,.10), transparent 55%),
    radial-gradient(circle at 85% 60%, rgba(14,165,233,.08), transparent 55%),
    rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.callout::before, .announcement::before, .notice-bar::before {
  content:"";
  position:absolute;
  inset:0;
  background: var(--grad-metal);
  opacity:.55;
  pointer-events:none;
}

/* Footer */
footer, .site-footer {
  background:
    linear-gradient(180deg, rgba(43,52,66,.98) 0%, rgba(18,23,34,1) 100%);
  border-top: 0;
}

footer a { color: rgba(255,255,255,.82); }
footer a:hover { color: #ffffff; }

.site-footer-shell {
  box-shadow: 0 -12px 36px rgba(12,15,20,.12);
}

/* Images / overlays */
.img-frame {
  border-radius: var(--radius);
  border: 1px solid rgba(12,15,20,.12);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

.img-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, transparent, rgba(12,15,20,.10));
  pointer-events:none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-scan::after { animation: none; }
  .card:hover, .panel:hover, .content-card:hover { transform: none; }
}

/* Optional: boost contrast */
@media (prefers-contrast: more) {
  :root{
    --text-2: rgba(12,15,20,.84);
    --text-3: rgba(12,15,20,.74);
  }

  .text-muted { color: var(--text-3) !important; }
}

/* ============================================================
   LabelWright typographic logo
   ============================================================ */
/* ============================================================
   LabelWright brand lockup
   Always use the exact HTML structure:
   <span class="labelwright-logo">
     <span class="lw-label">Label</span><span class="lw-wright">Wright</span><sup class="lw-reg">®</sup>
   </span>
   ============================================================ */

.labelwright-logo {
  display: inline-block;
  font-family: "Istanbul", Arial, sans-serif;
  font-size: 1.7rem;
  font-weight: 400;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: normal;
  text-transform: none !important;
  vertical-align: middle;
}

.labelwright-logo.labelwright-inline {
  font-size: 1em;
}

.labelwright-logo.labelwright-copy {
  font-size: 1em;
}

/* Defensive override in case parent headings/nav/cards force uppercase */
.labelwright-logo,
.labelwright-logo * {
  font-family: "Istanbul", Arial, sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.labelwright-logo .lw-label {
  color: var(--lw-red);
  font-style: italic;
}

.labelwright-logo .lw-wright {
  color: var(--lw-black);
  margin-left: 0.2em;
}

.labelwright-logo .lw-reg {
  font-size: 0.6em;
  vertical-align: super;
  line-height: 0;
  margin-left: 0;
  position: relative;
  left: -0.12em;
  top: -0.05em;
  color: var(--lw-gray);
}

/* Sizing helpers */
.labelwright-logo.labelwright-sm {
  font-size: 1.15rem;
}

.labelwright-logo.labelwright-md {
  font-size: 1.45rem;
}

.labelwright-logo.labelwright-lg {
  font-size: 1.7rem;
}

.labelwright-logo.labelwright-xl {
  font-size: 2.2rem;
}

/* Dark background variant */
.labelwright-logo.labelwright-on-dark .lw-label {
  color: #e23a3a;
  text-shadow:
    0 0 10px rgba(193, 18, 31, 0.22),
    0 0 22px rgba(193, 18, 31, 0.12);
}

.labelwright-logo.labelwright-on-dark .lw-wright {
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(255,255,255,0.10),
    0 2px 12px rgba(0,0,0,0.45);
}

.labelwright-logo.labelwright-on-dark .lw-reg {
  color: rgba(255,255,255,0.78);
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}

/* Optional subtle glow utility for dark/photo backgrounds */
.labelwright-glow-soft {
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.28));
}

/* If used inside display headings, preserve shape */
h1 .labelwright-logo,
h2 .labelwright-logo,
h3 .labelwright-logo,
h4 .labelwright-logo,
h5 .labelwright-logo,
h6 .labelwright-logo {
  line-height: 1;
}