/* ==========================================================================
   BOSkom Design System  ·  Corporate Identity: Teal #007676
   Single source of truth for brand tokens + components.
   Verbindliche Referenz: docs/CI.md
   Loaded on every page AFTER Bootstrap so brand overrides win.
   ========================================================================== */

:root {
  /* --- Brand: Teal (CI §3) --- */
  --brand:          #007676;
  --brand-hover:    #006A6A;
  --brand-pressed:  #005C5C;
  --brand-deep:     #004E4E;
  --brand-deep-2:   #003C3C;
  --brand-tint:     #339090;
  --brand-soft:     #E3F1F1;
  --brand-line:     #BFE0E0;
  --brand-on-dark:  #7FCACA;
  --brand-gradient: linear-gradient(135deg, #007676 0%, #005C5C 100%);

  /* --- Neutrals (Airbnb-inspired, CI §3) --- */
  --bg:        #FFFFFF;
  --surface:   #F7F7F7;
  --surface-2: #FCFBFA;
  --text:      #222222;
  --text-2:    #717171;
  --text-3:    #B0B0B0;
  --border:    #DDDDDD;
  --divider:   #EBEBEB;

  /* --- Semantic (unchanged, never brand-swap) --- */
  --success:      #4CAF50;
  --success-soft: #96D35F;
  --error:        #FF385C;

  /* --- Radius (CI §5) --- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-card: 24px;

  /* --- Typography: system stack, no CDN (CI §4) --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Back-compat aliases: legacy var(--primary) refs now resolve teal --- */
  --primary:      var(--brand);
  --primary-dark: var(--brand-hover);
  --accent:       var(--brand);
}

/* ==========================================================================
   Base
   ========================================================================== */
body { font-family: var(--font-sans); }

a { color: var(--brand); }
a:hover { color: var(--brand-hover); }

::selection { background: var(--brand-soft); color: var(--brand-deep); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ==========================================================================
   Bootstrap primary/utility overrides -> Teal
   ========================================================================== */
.text-primary { color: var(--brand) !important; }
.bg-primary   { background-color: var(--brand) !important; }
.border-primary { border-color: var(--brand) !important; }
.link-primary { color: var(--brand) !important; }

.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-bg: var(--brand-pressed);
  --bs-btn-active-border-color: var(--brand-pressed);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  background-image: var(--brand-gradient);
  border-radius: var(--r-md);
  font-weight: 600;
}
.btn-primary:hover { background-image: none; }

.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand-pressed);
  --bs-btn-active-border-color: var(--brand-pressed);
  border-radius: var(--r-md);
  font-weight: 600;
}

.btn-link { color: var(--brand); }

.badge.bg-primary,
.badge.text-bg-primary { background-color: var(--brand) !important; color: #fff !important; }

/* Bootstrap form focus -> teal (replaces default blue glow) */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--brand-line);
  box-shadow: 0 0 0 0.2rem rgba(0, 118, 118, 0.20);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: var(--brand); }

.page-item.active .page-link { background-color: var(--brand); border-color: var(--brand); }
.page-link { color: var(--brand); }

.progress-bar { background-color: var(--brand); }

.list-group-item.active { background-color: var(--brand); border-color: var(--brand); }

/* ==========================================================================
   BOSkom component layer (opt-in classes for redesigned views)
   ========================================================================== */

/* Buttons */
.bk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 52px; padding: 0 1.5rem; border-radius: var(--r-md);
  font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: all .2s ease;
}
.bk-btn--sm { height: 44px; padding: 0 1.15rem; font-size: .95rem; }
.bk-btn--primary { background: var(--brand-gradient); color: #fff; }
.bk-btn--primary:hover { filter: brightness(1.06); color: #fff; box-shadow: 0 8px 20px rgba(0,118,118,.25); }
.bk-btn--outline { background: #fff; color: var(--brand); border-color: var(--brand); }
.bk-btn--outline:hover { background: var(--brand-soft); color: var(--brand-deep); }
.bk-btn--ghost { background: var(--brand-soft); color: var(--brand-deep); }
.bk-btn--ghost:hover { background: var(--brand-line); }

/* Card */
.bk-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.75rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bk-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.08); border-color: transparent; }

/* Eyebrow / section labels (CI §4 uppercase, letter-spacing) */
.bk-eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand);
}
.bk-eyebrow--on-dark { color: var(--brand-on-dark); }

/* Chips / pills */
.bk-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--brand-soft); color: var(--brand-deep);
}

/* Icon tile (feature/security icons) */
.bk-icon {
  width: 56px; height: 56px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-gradient); color: #fff; font-size: 1.5rem;
}
.bk-icon--soft { background: var(--brand-soft); color: var(--brand); }

/* Wordmark lockup: BOS = text, kom = teal (CI §2) */
.bk-wordmark { font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.bk-wordmark em { font-style: normal; color: var(--brand); }
.bk-wordmark--on-dark { color: #fff; }
.bk-wordmark--on-dark em { color: var(--brand-on-dark); }
/* Member sidebar brand: beat the per-page `.sidebar-brand span{color:var(--primary)}` */
.sidebar-brand .bk-wordmark { color: var(--text); }
.sidebar-brand .bk-wordmark em { color: var(--brand); }

/* ==========================================================================
   Print (CI §7): kill shadows so PDF viewers don't render grey boxes
   ========================================================================== */
@media print {
  *, *::before, *::after { box-shadow: none !important; }
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}