/* static/css/custom.css */

:root {
  --dark-blue: #0A2342;
  --black: #000000;
  --steel-blue: #2C5D94;
  --silver: #EAEBED;
  --light-gray: #f8f9fa;
  --text-on-dark: #FFFFFF;
  --text-on-light: #343a40;
  --powerbi_background: #000000;

  /* RA brand palette — primaries 1-3, matching the Power BI client dashboards */
  --ra-cyan: #3FC6FF;
  --ra-purple: #B14BFF;
  --ra-orange: #FF7A3D;
  --ra-gradient: linear-gradient(90deg,
    var(--ra-cyan) 0%,
    var(--ra-purple) 50%,
    var(--ra-orange) 100%);

  /* Elevation. The portal used to have only two values — the black body and a
     white Bootstrap card — so every panel punched a hole in the page. These are
     the steps between: content sits on surface-1, lifts to surface-2. */
  --surface-1: #0C0F14;
  --surface-2: #12161D;
  --hairline: rgba(234, 235, 237, .10);
  --hairline-strong: rgba(234, 235, 237, .18);

  --text-primary: var(--silver);
  --text-secondary: rgba(234, 235, 237, .64);
  --text-tertiary: rgba(234, 235, 237, .44);

  /* Offset + blur, never a zero-offset halo. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px rgba(0, 0, 0, .45);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

body {
  background-color: var(--powerbi_background);
  color: var(--text-primary);
}

/* Header */
.app-header .navbar {
  background-color: var(--black) !important;
  height: var(--header-height); /* Ensure navbar matches header height */
  min-height: var(--header-height);
}

/* Brand gradient bar along the header's bottom edge. A border-bottom can't take
   a gradient, and painting it inside the header keeps the navbar from
   overflowing the fixed --header-height by the old border's 1px.
   Positioning anchor is the `position: sticky` on .app-header in app.css — do
   NOT add `position: relative` here, it loads later and would kill the sticky. */
.app-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--ra-gradient);
  pointer-events: none;
}
.app-header .navbar-brand span { color: var(--silver); }
.app-header .nav-toggle { color: var(--silver); border-color: var(--steel-blue); }
.app-header .nav-toggle:hover { background-color: var(--black); }

/* Header nav (horizontal layout) */
.app-header .navbar-nav .nav-link {
  color: var(--silver);
  opacity: 0.9;
  padding: 0.5rem 0.9rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
}
.app-header .navbar-nav .nav-link:hover,
.app-header .navbar-nav .nav-link:focus {
  background-color: var(--steel-blue);
  color: var(--text-on-dark);
  opacity: 1;
}
.app-header .navbar-nav .nav-link.active,
.app-header .navbar-nav .show > .nav-link {
  background-color: var(--steel-blue);
  color: var(--text-on-dark);
  opacity: 1;
  font-weight: 600;
}
.app-header .dropdown-menu {
  background-color: var(--black);
  border: 1px solid var(--steel-blue);
}
.app-header .dropdown-item { color: var(--silver); }
.app-header .dropdown-item:hover,
.app-header .dropdown-item:focus {
  background-color: var(--steel-blue);
  color: var(--text-on-dark);
}
/* Opaque backdrop for the collapsed menu on mobile */
.app-header .navbar-collapse { background-color: var(--black); }

/* Sidebar */
.sidebar { 
  background-color: var(--black) !important; 
  border-right: 1px solid var(--steel-blue) !important; 
  padding-top: 15px; /* Increased top padding to create more space from header */
}
.sidebar-inner {
  padding-top: 5px; /* Additional padding on the inner container */
}
.sidebar-title { 
  color: var(--silver); 
  opacity: 0.7; 
  font-weight: 500; 
  padding: 1rem 1.5rem; /* Increased top/bottom padding */
  margin-top: 0; /* Reset margin since we added padding to sidebar */
}

.sidebar-link,
.sidebar-sublink,
.sidebar-sub-sublink {
  color: var(--silver);
  opacity: 0.9;
  background: none;
  border: none;
  padding: 0.6rem 1.5rem;
  transition: all 0.2s ease-in-out;
}
.sidebar-link:hover,
.sidebar-sublink:hover,
.sidebar-sub-sublink:hover {
  background-color: var(--steel-blue);
  color: var(--text-on-dark);
  opacity: 1;
}
.sidebar .collapse { background-color: rgba(0, 0, 0, 0.15); }

/* Main cards.
   Bootstrap's default card is white, which on this black body read as an
   unfinished page rather than a design. The card now belongs to the dark
   world; anything that needs to be light should say so explicitly. */
.card {
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: .75rem;
  box-shadow: var(--shadow-1);
  color: var(--text-primary);
}
.card-title { color: var(--text-primary); }
.card-text,
.card .text-muted,
.text-muted { color: var(--text-secondary) !important; }

/* Form controls, so the filter field and the login form share one vocabulary. */
.form-control,
.form-select {
  background-color: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--text-primary);
}
.form-control::placeholder { color: var(--text-tertiary); }
.form-control:focus,
.form-select:focus {
  background-color: var(--surface-2);
  border-color: var(--ra-cyan);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(63, 198, 255, .22);
}
.form-label { color: var(--text-secondary); }

/* Alerts inherit the dark ground instead of Bootstrap's pastel washes. */
.alert {
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  color: var(--text-primary);
}
.alert-success { border-color: rgba(63, 198, 255, .35); }
.alert-danger,
.alert-error { border-color: rgba(255, 122, 61, .45); }
.alert .btn-close { filter: invert(1) grayscale(1) brightness(2); }

hr { border-color: var(--hairline); opacity: 1; }

/* ---- Browser surfaces ----
   The parts we didn't draw still belong to the design. */
::selection {
  background-color: rgba(63, 198, 255, .28);
  color: var(--text-on-dark);
}

:focus-visible {
  outline: 2px solid var(--ra-cyan);
  outline-offset: 2px;
  border-radius: .35rem;
}

.main {
  scrollbar-width: thin;
  scrollbar-color: rgba(234, 235, 237, .22) transparent;
}
.main::-webkit-scrollbar { width: 10px; height: 10px; }
.main::-webkit-scrollbar-track { background: transparent; }
.main::-webkit-scrollbar-thumb {
  background-color: rgba(234, 235, 237, .18);
  border: 3px solid var(--powerbi_background);
  border-radius: 999px;
}
.main::-webkit-scrollbar-thumb:hover { background-color: rgba(234, 235, 237, .3); }

/* Buttons.
   Bootstrap's default primary is its own blue, which sat next to the RA
   palette rather than in it. Primary actions use steel blue, the same colour
   the nav already uses for its active state. */
.btn-primary {
  background-color: var(--steel-blue);
  border-color: var(--steel-blue);
  color: var(--text-on-dark);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #366eae;
  border-color: #366eae;
  color: var(--text-on-dark);
}

.btn-outline-secondary {
  border-color: var(--hairline-strong);
  color: var(--text-primary);
}
.btn-outline-secondary:hover {
  background-color: var(--surface-2);
  border-color: var(--hairline-strong);
  color: var(--text-primary);
}

.btn-outline-danger { border-color: var(--steel-blue); color: var(--steel-blue); }
.btn-outline-danger:hover { background-color: var(--steel-blue); border-color: var(--steel-blue); color: var(--text-on-dark); }

/* Active link state */
.sidebar .active {
  background-color: var(--steel-blue);
  color: var(--text-on-dark);
  font-weight: 600;
}

/* The old .pbi-viewport / .iframe-page rules lived here. They dated from the
   raw-<iframe> embed and were dead by the time the powerbi-client SDK took
   over — no template or script referenced either class. Report sizing now
   lives in pages/dashboard_base.html and static/js/powerbi-embed.js, which
   set the container height from the report's own aspect ratio. */