/* ============================================================
   yesIT Design System - token & brand-primitive layer
   ------------------------------------------------------------
   Design tokens for the yesIT Customer Portal.

   This is a deliberate copy of the shared token layer, not a link to it.
   The portal is a public site and publishes only files inside its own app
   directory, so it can never serve an internal asset name or comment by
   accident. Brand tokens are the stable half of the design system, so the
   duplication costs little; re-copy it when the brand palette changes.

   (Do NOT pull anything in with a CSS at-rule import - that pattern, even
   written inside a comment, is matched by WhiteNoise/Django manifest
   post-processing and caused a self-referential
   "Max post-process passes exceeded".)

   Source: claude.ai/design "yesIT Design System"
     (tokens/colors.css, typography.css, spacing.css, fonts.css).

   Brand: Deep Core navy #102547 · Data Stream teal #53c6d6 · Poppins.
   This file provides BOTH the native brand tokens AND a "bridge"
   that re-points a set of legacy variable names
   (--text-primary, --bg-white, --border-color, --shadow-*, the
   --blue/success/... families, and the Bootstrap --bs-* vars) to
   brand values. The Bootstrap bridge is what makes the portal's stock
   Bootstrap components pick up the brand with no extra stylesheet.

   ============================================================ */

/* ---- Poppins webfont (brand: Light=body weight, Black/Bold=headings) ---- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/poppins/Poppins-Light.7c448dffabde.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins/Poppins-Regular.09acac7457bd.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins/Poppins-Medium.20aaac2ef92c.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins/Poppins-SemiBold.2c63e05091c7.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins/Poppins-Bold.92934d92f57e.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/poppins/Poppins-Black.005bf0ac0e3d.ttf") format("truetype"); }

:root {
  /* ============================================================
     RAW BRAND PALETTE (from tokens/colors.css)
     ============================================================ */
  --yesit-deep-core:    #102547; /* primary dark - "Deep Core"     */
  --yesit-data-stream:  #53c6d6; /* primary accent - "Data Stream" */
  --yesit-white:        #ffffff;
  --yesit-circuit:      #14678b; /* mid blue - "Circuit"           */
  --yesit-quantum-dust: #abbac6; /* cool grey - "Quantum Dust"     */
  --yesit-matrix-grey:  #50535a; /* neutral grey - "Matrix Grey"   */
  --yesit-security-red: #990000; /* cyber-security material only   */

  /* Tint / shade ramps */
  --deep-core-900: #0a1830;
  --deep-core-800: #102547; /* base */
  --deep-core-700: #163059;
  --deep-core-600: #1f4575;
  --deep-core-500: #2c5a92;

  --data-stream-700: #2aa6b8;
  --data-stream-600: #3fb8c8;
  --data-stream-500: #53c6d6; /* base */
  --data-stream-400: #79d4e0;
  --data-stream-300: #a6e3ea;
  --data-stream-200: #d0f1f5;
  --data-stream-100: #ecf9fb;

  --quantum-300: #abbac6; /* base */
  --quantum-200: #c8d2da;
  --quantum-100: #e6ebef;
  --quantum-050: #f4f6f8;

  /* ============================================================
     SEMANTIC ALIASES (light) - from tokens/colors.css
     ============================================================ */
  --surface-page:        var(--yesit-white);
  --surface-subtle:      var(--quantum-050);
  --surface-muted:       var(--quantum-100);
  --surface-card:        var(--yesit-white);
  --surface-inverse:     var(--yesit-deep-core);
  --surface-inverse-alt: var(--deep-core-900);
  --surface-brand:       var(--yesit-data-stream);

  --text-strong:        var(--yesit-deep-core);
  --text-body:          var(--yesit-matrix-grey);
  --text-muted:         #7c828c;
  --text-on-dark:       var(--yesit-white);
  --text-on-dark-muted: var(--quantum-300);
  --text-on-brand:      var(--yesit-deep-core);
  --text-link:          var(--yesit-circuit);

  --border-subtle:  var(--quantum-100);
  --border-default: var(--quantum-200);
  --border-strong:  var(--quantum-300);
  --border-brand:   var(--yesit-data-stream);
  --divider-on-dark: rgba(255, 255, 255, 0.14);

  --accent:          var(--yesit-data-stream);
  --accent-hover:    var(--data-stream-600);
  --accent-press:    var(--data-stream-700);
  --accent-contrast: var(--yesit-deep-core);
  --focus-ring:      var(--yesit-data-stream);

  --status-info:    var(--yesit-circuit);
  --status-success: #2f9e6f;
  --status-warning: #d9a134;
  --status-danger:  var(--yesit-security-red);

  /* ============================================================
     TYPOGRAPHY (from tokens/typography.css)
     ============================================================ */
  --font-brand: "Poppins", "Tahoma", "Segoe UI", system-ui, sans-serif;
  --font-body:  "Poppins", "Arial", system-ui, sans-serif;
  /* Modern faces first, so an identifier never falls back to Courier New:
     ui-monospace picks the platform's own (SF Mono, Cascadia), and the named
     faces cover the rest before the generic keyword. */
  --font-mono:  ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Mono",
                "Segoe UI Mono", "Roboto Mono", "Consolas",
                "Liberation Mono", monospace;

  --fw-light: 300; --fw-regular: 400; --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700; --fw-black: 900;

  --fs-display: 4.209rem; --fs-h1: 3.157rem; --fs-h2: 2.369rem;
  --fs-h3: 1.777rem; --fs-h4: 1.333rem; --fs-lg: 1.125rem;
  --fs-base: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem;

  --lh-tight: 1.05; --lh-heading: 1.15; --lh-snug: 1.35; --lh-body: 1.6;
  --ls-tight: -0.02em; --ls-normal: 0; --ls-label: 0.18em; --ls-tagline: 0.32em;

  /* ============================================================
     SPACING / RADIUS / SHADOW / MOTION (from tokens/spacing.css)
     ============================================================ */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
  --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;

  --skew-brand: -18deg; /* brand parallelogram skew */

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms; --dur-normal: 220ms; --dur-slow: 400ms;

  --ring-width: 3px;
  --ring-color: rgba(83, 198, 214, 0.55);
  --container-max: 1200px;

  /* ============================================================
     BRIDGE - legacy variable names re-pointed to brand values.
     Templates use these names; changing the VALUES here reskins
     them everywhere without touching the templates.
     ============================================================ */
  /* Neutrals */
  --border-color:   var(--border-default);
  --text-primary:   var(--text-strong);
  --text-secondary: var(--text-body);
  --bg-light:       var(--surface-subtle);
  --bg-white:       var(--surface-card);

  /* Spacing (kept; brand 4px scale) */
  --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px;
  --spacing-lg: 24px; --spacing-xl: 32px;

  /* Radius - brand leans angular; restrained rounding, cards ~12px */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 18px;
  --radius-pill: 999px;

  /* Shadows - soft, navy-tinted (never grey/black drop shadows) */
  --shadow-sm: 0 1px 2px rgba(16, 37, 71, 0.06);
  --shadow-md: 0 6px 18px rgba(16, 37, 71, 0.10);
  --shadow-lg: 0 16px 40px rgba(16, 37, 71, 0.14);
  --shadow-brand: 0 10px 30px rgba(83, 198, 214, 0.30);

  /* Status section-box families (light) - re-tinted into brand family */
  --blue-bg: var(--data-stream-100); --blue-border: var(--yesit-circuit); --blue-text: var(--deep-core-700);
  --warning-bg: #fff3cd; --warning-border: var(--status-warning); --warning-text: #856404;
  --success-bg: #e3f5ec; --success-border: var(--status-success); --success-text: #1c6b4a;
  --danger-bg: #fbe5e5; --danger-border: var(--status-danger); --danger-text: #7a1212;
  --indigo-bg: var(--quantum-100); --indigo-border: var(--yesit-circuit); --indigo-text: var(--deep-core-700);
  --purple-bg: var(--quantum-100); --purple-border: var(--deep-core-600); --purple-text: var(--deep-core-700);

  /* ============================================================
     BOOTSTRAP 5.2 remap (light). .bg-/.text-/.border-primary all
     read --bs-primary-rgb → map to Deep Core navy (the brand's
     "primary" surface colour). The teal accent is applied to
     .btn-primary / links / focus explicitly below.
     ============================================================ */
  --bs-primary: #102547;
  --bs-primary-rgb: 16, 37, 71;
  --bs-link-color: var(--yesit-circuit);
  --bs-link-color-rgb: 20, 103, 139;
  --bs-link-hover-color: var(--data-stream-700);
  --bs-border-color: var(--border-default);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 12px;
}

/* ============================================================
   POPPINS THROUGHOUT - per the yesIT Design System: body is
   Poppins Light (300) at 1.6 line-height, headings are Poppins
   Black (900).

   This differs from the internal app, which restricts Poppins to
   headings and UI chrome and keeps a system stack for body and
   tables. That was a legibility call for dense operator screens
   full of serial numbers and IDs; the portal shows a handful of
   customer-facing rows and should follow the brand guide instead.
   ============================================================ */
body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand, .nav-link, .dropdown-header,
.btn, .form-label, .card-title, .modal-title,
.page-title, .section-header, .eyebrow {
  font-family: var(--font-brand);
}
h1, h2, h3, .h1, .h2, .h3 {
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
}
h4, h5, h6, .h4, .h5, .h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

/* Brand "eyebrow" - all-caps wide-tracked label (design motif) */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  color: var(--accent-press);
}

/* ============================================================
   LINKS / FOCUS
   ============================================================ */
a { color: var(--text-link); }
a:hover { color: var(--data-stream-700); }

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.nav-link:focus-visible,
a:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.25rem var(--ring-color);
  outline: 0;
}

/* ============================================================
   BUTTONS - primary = Data Stream teal (navy text),
   secondary = Deep Core navy (white text), with the signature
   angular "notch" (chamfered bottom-right) on filled variants.
   ============================================================ */
.btn { font-weight: var(--fw-semibold); letter-spacing: 0.01em; }

.btn-primary {
  --bs-btn-color: var(--text-on-brand);
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--text-on-brand);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-color: var(--text-on-brand);
  --bs-btn-active-bg: var(--accent-press);
  --bs-btn-active-border-color: var(--accent-press);
  --bs-btn-disabled-color: var(--text-on-brand);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
}
.btn-secondary {
  --bs-btn-color: var(--text-on-dark);
  --bs-btn-bg: var(--yesit-deep-core);
  --bs-btn-border-color: var(--yesit-deep-core);
  --bs-btn-hover-color: var(--text-on-dark);
  --bs-btn-hover-bg: var(--deep-core-700);
  --bs-btn-hover-border-color: var(--deep-core-700);
  --bs-btn-active-color: var(--text-on-dark);
  --bs-btn-active-bg: var(--deep-core-900);
  --bs-btn-active-border-color: var(--deep-core-900);
}
.btn-outline-primary {
  --bs-btn-color: var(--yesit-circuit);
  --bs-btn-border-color: var(--yesit-circuit);
  --bs-btn-hover-bg: var(--yesit-circuit);
  --bs-btn-hover-border-color: var(--yesit-circuit);
  --bs-btn-active-bg: var(--deep-core-700);
}

/* Signature notch on filled buttons (echoes the tech-triangle motif).
   clip-path also clips box-shadow, so focus uses an INSET ring below. */
.btn-primary, .btn-secondary {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn-sm.btn-primary, .btn-sm.btn-secondary { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); }
.btn-lg.btn-primary, .btn-lg.btn-secondary { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
.btn-primary:active, .btn-secondary:active { transform: translateY(1px); }
.btn-primary:focus-visible  { box-shadow: inset 0 0 0 2px var(--yesit-deep-core); }
.btn-secondary:focus-visible { box-shadow: inset 0 0 0 2px var(--yesit-white); }

/* Don't notch buttons that share a seam - groups & input add-ons */
.btn-group > .btn-primary, .btn-group > .btn-secondary,
.input-group .btn-primary, .input-group .btn-secondary,
.btn-group-sm > .btn-primary, .btn-group-sm > .btn-secondary {
  clip-path: none;
  border-radius: var(--bs-border-radius);
}

/* ============================================================
   NAVBAR - brand chrome with a faint polygon "tech-triangle" motif
   ============================================================ */
.navbar.bg-light {
  background-color: var(--surface-card) !important;
  border-bottom: 1px solid var(--border-subtle);
  background-image: url("../images/patterns/polygons-deepcore.333b56f4b46e.svg");
  background-repeat: no-repeat;
  background-position: right -60px center;
  background-size: auto 220%;
  box-shadow: var(--shadow-sm);
}
.navbar.bg-light .navbar-brand { font-weight: var(--fw-bold); color: var(--text-strong); }
.navbar.bg-light .nav-link { color: var(--text-body); font-weight: var(--fw-medium); }
.navbar.bg-light .nav-link:hover,
.navbar.bg-light .nav-link.active { color: var(--text-strong); }

/* Theme-swapped logo: colour wordmark on light, white on dark */
.brand-logo { height: 30px; width: auto; }
.brand-logo--light { display: inline-block; }
.brand-logo--dark  { display: none; }

/* App name tag beside the brand wordmark */
.navbar-app-name {
  font-family: var(--font-brand);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  color: var(--text-muted);
  padding-left: var(--space-2);
  border-left: 1px solid var(--border-default);
}

/* ============================================================
   FORMS / TABLES / CARDS polish (light)
   ============================================================ */
.card { border-color: var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.form-control, .form-select { border-color: var(--border-default); }
.table { --bs-table-border-color: var(--border-subtle); }
.badge.bg-info { background-color: var(--yesit-circuit) !important; }
.badge.bg-secondary { background-color: var(--yesit-matrix-grey) !important; }

/* ============================================================
   BRAND UTILITY CLASSES (for de-bloating inline styles)
   ============================================================ */
.bg-deepcore { background-color: var(--yesit-deep-core) !important; color: var(--text-on-dark) !important; }
.bg-brand    { background-color: var(--accent) !important; color: var(--text-on-brand) !important; }
.text-brand  { color: var(--accent-press) !important; }
.text-deepcore { color: var(--yesit-deep-core) !important; }
.brand-surface { background: var(--bg-light); color: var(--text-primary); }
.brand-card {
  background: var(--bg-white);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.brand-heading { font-family: var(--font-brand); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: var(--ls-tight); }

/* ============================================================
   DARK THEME - derived from the Deep Core ramp.
   Re-points both the brand aliases AND the legacy bridge vars.
   ============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Brand aliases (dark) */
  --surface-page:   var(--deep-core-900);
  --surface-subtle: #0d2143;
  --surface-muted:  #15315a;
  --surface-card:   var(--deep-core-800);
  --surface-inverse: var(--yesit-white);

  --text-strong:        #eaf1f8;
  --text-body:          #c3cedb;
  --text-muted:         #9fb1c2;
  --text-link:          var(--data-stream-400);

  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-default: #244468;
  --border-strong:  #2f5688;

  /* Legacy bridge vars (dark) */
  --border-color:   #244468;
  --text-primary:   #eaf1f8;
  --text-secondary: #9fb1c2;
  --bg-light:       #0d2143;
  --bg-white:       var(--deep-core-800);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

  /* Status section-box / badge families (dark) - semantic hues kept,
     darkened to read on the navy surfaces */
  --blue-bg: #13325e; --blue-border: var(--data-stream-400); --blue-text: var(--data-stream-300);
  --indigo-bg: #15315a; --indigo-border: var(--data-stream-400); --indigo-text: var(--data-stream-300);
  --purple-bg: #1c2d52; --purple-border: var(--deep-core-500); --purple-text: var(--quantum-200);
  --success-bg: #14331f; --success-border: #3fae7a; --success-text: #7bd0a4;
  --warning-bg: #3a2e0a; --warning-border: #d9a134; --warning-text: #ffd56b;
  --danger-bg: #3a1518; --danger-border: #d65b54; --danger-text: #f0a3a3;

  /* Bootstrap (dark): .text-primary/.bg-primary need a LIGHT value to
     stay visible on navy; link colour goes teal. */
  --bs-body-bg: var(--deep-core-900);
  --bs-body-color: #eaf1f8;
  --bs-primary: var(--data-stream-400);
  --bs-primary-rgb: 121, 212, 224;
  --bs-link-color: var(--data-stream-400);
  --bs-link-color-rgb: 121, 212, 224;
  --bs-link-hover-color: var(--data-stream-300);
  --bs-border-color: #244468;
}

html[data-theme="dark"] body {
  background-color: var(--deep-core-900);
  color: #eaf1f8;
}

/* Primary button stays Data Stream teal in dark (navy text reads on teal) */
html[data-theme="dark"] .btn-primary {
  --bs-btn-color: var(--yesit-deep-core);
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-active-bg: var(--accent-press);
}
/* Lift the navy secondary button so it stands off the near-black page */
html[data-theme="dark"] .btn-secondary {
  --bs-btn-bg: var(--deep-core-600);
  --bs-btn-border-color: var(--deep-core-600);
  --bs-btn-hover-bg: var(--deep-core-500);
  --bs-btn-active-bg: var(--deep-core-700);
}
html[data-theme="dark"] .navbar.bg-light {
  background-color: var(--deep-core-800) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background-image: url("../images/patterns/polygons-datastream.68b9035dd6c7.svg");
}

/* Theme-swapped logo */
html[data-theme="dark"] .brand-logo--light { display: none; }
html[data-theme="dark"] .brand-logo--dark  { display: inline-block; }