/* Portal-wide overrides on top of Bootstrap 5.3.3. Keep this file thin — prefer Bootstrap
   utility classes. Certis brand palette/typography/sidebar shape ported from the WXL Demand
   Tracking portal (C:\Users\tdrap\Projects\STAGING\WXL Demand Tracking\templates\_head.html)
   so this portal reads as the same product family, not a from-scratch skin. */

:root {
  --certis-blue: #002855;
  --certis-blue-2: #1A4C9B;
  --certis-orange: #F98D29;
  --certis-orange-dark: #e07d1c;
  --certis-yellow: #FEDD4F;
  --certis-grey: #BCBEC0;

  --bs-primary: #002855;
  --bs-primary-rgb: 0, 40, 85;
  --bs-link-color: #1A4C9B;
  --bs-link-color-rgb: 26, 76, 155;
  --bs-link-hover-color: #002855;
  --bs-body-color: #2b3440;
  --bs-border-color: #e3e7ec;
}

body {
  background: #eef1f5;
  font-family: 'Lato', Arial, sans-serif;
  color: var(--bs-body-color);
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--certis-blue); }

/* App shell: sidebar + main content, same structure as WXL Demand Tracking's base.html. */
.app-shell { min-height: 100vh; align-items: stretch; }

.app-sidebar {
  width: 230px;
  flex: 0 0 230px;
  background: var(--certis-blue);
  color: #fff;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border-right: 3px solid var(--certis-orange);
  box-shadow: 2px 0 10px rgba(0, 40, 85, .15);
}
.app-sidebar .brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  padding: 1.25rem 1.25rem 1rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.app-sidebar .brand-word {
  font-weight: 900; letter-spacing: .08em; font-size: 1.05rem;
  color: #fff; line-height: 1.25;
}
.app-sidebar .brand-sub {
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .68rem; font-weight: 700; color: var(--certis-orange);
}

.sidebar-nav { padding: .75rem 0; display: flex; flex-direction: column; }
.sidebar-link {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem 1.25rem;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s;
}
.sidebar-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar-link.active { color: #fff; background: rgba(255,255,255,.12); border-left-color: var(--certis-orange); }

.sidebar-heading {
  padding: .9rem 1.25rem .3rem;
  font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.sidebar-heading-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; cursor: pointer; color: inherit;
  transition: color .15s;
}
.sidebar-heading-toggle:hover { color: rgba(255,255,255,.75); }
.sidebar-heading-toggle .sidebar-caret { transition: transform .15s; }
.sidebar-heading-toggle.collapsed .sidebar-caret { transform: rotate(-90deg); }
.sidebar-link.sidebar-sublink { padding-left: 2rem; font-size: .76rem; }

.sidebar-user {
  margin-top: auto;
  padding: .9rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.15);
  font-size: .76rem;
}
.sidebar-user .user-email { color: rgba(255,255,255,.7); word-break: break-all; }
.sidebar-user button, .sidebar-user a { color: #fff; font-weight: 700; text-decoration: none; }
.sidebar-user button:hover, .sidebar-user a:hover { text-decoration: underline; }

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

@media (max-width: 768px) {
  .app-shell { flex-direction: column; }
  .app-sidebar { width: 100%; flex: 0 0 auto; height: auto; position: static; }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
}

.btn-primary {
  --bs-btn-bg: var(--certis-blue); --bs-btn-border-color: var(--certis-blue);
  --bs-btn-hover-bg: #001b3d; --bs-btn-hover-border-color: #001b3d;
  --bs-btn-active-bg: #001b3d; --bs-btn-active-border-color: #001b3d;
}
.btn-certis {
  background: var(--certis-orange); border: 1px solid var(--certis-orange);
  color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  box-shadow: 0 2px 6px rgba(249, 141, 41, .35);
}
.btn-certis:hover, .btn-certis:focus {
  background: var(--certis-orange-dark); border-color: var(--certis-orange-dark); color: #fff;
}

.form-control:focus, .form-select:focus {
  border-color: var(--certis-blue-2);
  box-shadow: 0 0 0 .2rem rgba(26, 76, 155, .18);
}

.card { border: 1px solid var(--bs-border-color); border-radius: .6rem; }
.card-header { background: #f7f9fc; font-weight: 700; color: var(--certis-blue); }

/* Login page shell, same shape as WXL Demand Tracking's auth-shell/auth-card. */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-card { width: 100%; max-width: 360px; }

/* Dashboard metric cards (home/index.html) — same stat-number language as WXL Demand
   Tracking's stat cards, sized for a small cluster of numbers inside a feature card
   rather than a full clickable tile. */
.stat-number { font-size: 2.2rem; font-weight: 900; line-height: 1; color: var(--certis-blue); }
.stat-number.stat-warning { color: var(--certis-orange-dark); }
.stat-number.stat-danger { color: #b3261e; }

.dashboard-stat-row {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: .5rem 0;
}
/* flex: 0 (not 1) on purpose — a stat block sizes to its own content and the row stays
   centered/compact, instead of stretching to fill a wide card and leaving huge gaps
   between a couple of numbers. */
.dashboard-stat { flex: 0 1 auto; min-width: 7rem; text-align: center; padding: 0 1rem; }
.dashboard-stat + .dashboard-stat { border-left: 1px solid var(--bs-border-color); }