/*
EPICURE brand theme.
Overrides the vendor Gradient Able CSS variables (static/assets/css/style.css)
to match the visual identity of epicure-hpc.eu and eurohpcsupport.eu: a deep
teal-navy + bright mint-teal accent palette over warm neutral backgrounds.
Load this file AFTER style.css so these values win the cascade.
*/

:root {
  /* Brand tokens */
  --brand-navy: #0B3B45;
  --brand-navy-dark: #072A32;
  --brand-mint: #1FCFA6;         /* backgrounds/fills only - too light for AA text contrast */
  --brand-mint-dark: #16A583;    /* backgrounds/fills only, same reason */
  --brand-teal-text: #0A6653;    /* for links/text on light backgrounds - passes WCAG AA (6.3:1) */
  --brand-beige: #E5E3DC;
  --brand-warm-bg: #F6F5F2;
  --brand-text: #1C2B2E;

  /* Bootstrap semantic overrides */
  --bs-primary: var(--brand-mint);
  --bs-primary-rgb: 31, 207, 166;
  --bs-secondary: var(--brand-navy);
  --bs-secondary-rgb: 11, 59, 69;
  --bs-success: #2ED8B6;
  --bs-success-rgb: 46, 216, 182;
  --bs-info: #3AB0D6;
  --bs-info-rgb: 58, 176, 214;
  --bs-warning: #F0AD4E;
  --bs-warning-rgb: 240, 173, 78;
  --bs-danger: #B8291F;          /* darker than the mint-family accent red - passes WCAG AA (6.2:1) on white */
  --bs-danger-rgb: 184, 41, 31;
  --bs-light: var(--brand-warm-bg);
  --bs-light-rgb: 246, 245, 242;
  --bs-dark: var(--brand-navy);
  --bs-dark-rgb: 11, 59, 69;

  --bs-body-color: var(--brand-text);
  --bs-body-color-rgb: 28, 43, 46;
  --bs-body-bg: var(--brand-warm-bg);
  --bs-body-bg-rgb: 246, 245, 242;

  /* System font stack: no external network dependency, matches
     eurohpcsupport.eu, and already matches the TinyMCE editor config. */
  --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* Link color follows the teal-navy accent rather than Bootstrap's default blue. */
a {
  color: var(--brand-teal-text);
}
a:hover {
  color: var(--brand-navy);
}

/* Flatter card style matching both reference sites (minimal shadow, clean border). */
.card {
  border: 1px solid var(--brand-beige);
  box-shadow: 0 1px 3px rgba(11, 59, 69, 0.06);
}

/* btn-primary text stays dark navy on the bright mint background for WCAG AA
   contrast (mint is a light, high-luminance color - white or mint-dark text on
   it both fail 4.5:1, so hover/focus/active signal via shadow, not a color
   swap, keeping the same passing navy-on-mint pairing throughout). */
.btn-primary {
  color: var(--brand-navy);
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  color: var(--brand-navy);
  background-color: var(--brand-mint);
  border-color: var(--brand-mint);
  box-shadow: 0 0 0 0.2rem rgba(11, 59, 69, 0.25);
}

.btn-outline-primary {
  color: var(--brand-navy);
  border-color: var(--brand-mint-dark);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  color: var(--brand-navy);
  background-color: var(--brand-mint);
  border-color: var(--brand-mint);
}

/* The vendor .badge class hardcodes color:#fff (not a CSS variable), so any
   badge on the light mint/teal primary or success background needs an
   explicit override here - those two backgrounds are too light for white
   text to pass WCAG AA (~1.9:1) regardless of which template sets them. */
.badge.bg-primary,
.badge.bg-success {
  color: var(--brand-navy) !important;
}

/* ==========================================================================
   App shell layout: navbar + sidebar + main content.
   Replaces the vendor Gradient Able pcoded-* structure (project-authored
   markup lives in templates/layouts/base.html and templates/includes/
   {navigation,sidebar,menu-list}.html).
   ========================================================================== */

.app-navbar {
  background-color: var(--brand-navy);
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: 60px;
}
.app-navbar .navbar-brand {
  /* Neutralize a leftover vendor rule (.navbar-brand { background: #4099ff })
     from style.css that was dormant under the old markup (which used a
     Gradient-Able-specific .b-brand class instead of Bootstrap's standard
     .navbar-brand) but now paints an unwanted blue box behind our logo. */
  background: none;
}
.app-navbar .navbar-brand img {
  max-height: 32px;
}
.app-navbar-btn {
  color: #fff;
  border: none;
  background: transparent;
}
.app-navbar-btn:hover,
.app-navbar-btn:focus {
  color: var(--brand-mint);
}

/* Bootstrap's .navbar-nav .dropdown-menu is position:static by default and
   only switches to absolute inside a .navbar-expand-* breakpoint media
   query (style.css ~line 4603). Our header never carries a .navbar-expand-*
   class (it's a fixed custom shell, not a collapsing navbar), so that
   override never fires and the user-menu dropdown pushes the navbar taller
   instead of overlaying it. Force absolute positioning unconditionally. */
.app-navbar .navbar-nav .dropdown-menu {
  position: absolute;
}

.app-layout {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 60px);
}

.app-sidebar {
  width: 260px;
  flex-shrink: 0;
  background-color: #fff;
  border-right: 1px solid var(--brand-beige);
  height: calc(100vh - 60px);
  position: sticky;
  top: 60px;
}
.app-sidebar-scroll {
  height: 100%;
  overflow-y: auto;
}
.app-layout.sidebar-hidden .app-sidebar {
  /* !important needed: Bootstrap's responsive .d-lg-flex utility (applied to
     .app-sidebar so it's hidden below the lg breakpoint) sets display:flex
     !important, which otherwise always wins over a plain display:none here
     regardless of selector specificity. */
  display: none !important;
}

.app-main {
  flex: 1;
  min-width: 0;
}

/* Sidebar nav */
.app-nav {
  padding: 0.5rem 0;
}
.app-nav-caption {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #556468; /* passes WCAG AA (6.2:1) on the white sidebar background */
  font-weight: 700;
  padding: 1rem 1rem 0.35rem;
}
.app-nav .nav-link {
  color: var(--brand-text);
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 0;
}
.app-nav .nav-link:hover,
.app-nav .nav-link:focus {
  background-color: var(--brand-warm-bg);
  color: var(--brand-navy);
}
.app-nav-toggle {
  justify-content: space-between;
}
.app-nav-chevron {
  margin-left: auto;
  transition: transform 0.15s ease-in-out;
}
.app-nav-toggle[aria-expanded="true"] .app-nav-chevron {
  transform: rotate(180deg);
}
.app-submenu .nav-link {
  padding-left: 2.6rem;
  font-size: 0.925rem;
}

/* Offcanvas mobile sidebar reuses the same nav styling */
#appSidebarOffcanvas .app-nav-caption:first-child {
  padding-top: 0.35rem;
}

@media (max-width: 991.98px) {
  .app-layout {
    min-height: calc(100vh - 60px);
  }
}

/* ==========================================================================
   Dashboard stat cards (templates/pages/index.html).
   Overrides the vendor .bg-c-* gradient tiles (old blue/red/green/yellow/
   purple palette) with solid brand colors matching the ApexCharts series
   colors used for the same data below, so the summary tiles and the charts
   they summarize read as one system. Solid fills (not gradients): every
   color here is chosen to pass WCAG AA (4.5:1) with the white text the
   cards use for their label/number/subtitle - a two-stop gradient would
   need both stops to independently clear that bar, which added several
   colors that don't (verified while drafting this file).
   ========================================================================== */
.bg-c-blue   { background: #4E6B77; } /* Not Started - matches chart's #8CA3AB family, darkened for AA text contrast */
.bg-c-green  { background: #0C7A62; } /* Completed - matches chart's brand mint family */
.bg-c-yellow { background: #1E7A9C; } /* In Progress - matches chart's info-blue family */
.bg-c-red    { background: #A8661C; } /* Stalled - matches chart's amber family */
.bg-c-purple { background: var(--brand-navy); } /* Archived */

.stat-card-mint  { background: #0C7A62; }
.stat-card-info  { background: #1E7A9C; }
.stat-card-navy  { background: var(--brand-navy); }
.stat-card-beige { background: var(--brand-beige); }