/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/**
 * Design tokens
 */
:root {
  --bs-body-bg:      #f4f6f9;

  /* Navbar chrome */
  --nav-bg:          #0f1923;

  /* Navbar text tones */
  --nav-link-color:  #9aa5b4;
  --nav-link-hover:  #ffffff;
  --nav-meta-color:  #6b7a8d;

  /* Accent (amber) */
  --accent:          #f5a623;
  --accent-dark:     #d4891c;
}

/**
 * Body
 */
body {
  background-color: var(--bs-body-bg);
}

/**
 * Navbar overrides (Bootstrap variables)
 */
.navbar {
  --bs-navbar-color:               var(--nav-link-color);
  --bs-navbar-hover-color:         var(--nav-link-hover);
  --bs-navbar-active-color:        var(--nav-link-hover);
  --bs-navbar-brand-color:         var(--nav-brand-color);
  --bs-navbar-brand-hover-color:   var(--accent);
  --bs-navbar-toggler-border-color:rgba(255,255,255,.15);
}

/* Active nav-link accent underline */
.navbar .nav-link.active {
  color: var(--accent) !important;
}

/* Rotate collapse chevron when panel is collapsed */
[data-bs-toggle="collapse"].collapsed .bi-chevron-down {
  transform: rotate(-90deg);
}

/**
 * Sticky last two columns in the observations table
 */
.sticky-col,
.sticky-col-last {
  position: sticky;
  background: inherit;
  z-index: 1;
}

.sticky-col      { right: 2.5rem; }
.sticky-col-last { right: 0; box-shadow: -2px 0 4px rgba(0, 0, 0, .06); }

/**
 * Typography helpers
 */
.as-eyebrow     { letter-spacing: .07em; }   /* card-header eyebrows */
.as-th          { letter-spacing: .06em; }   /* table column headers */
.as-tagline     { letter-spacing: 2px; font-size: .6rem; }        /* login tagline */
.as-nav-tagline { letter-spacing: 2px; font-size: 0.55rem; color: var(--nav-meta-color); } /* navbar brand tagline */
.as-badge       { letter-spacing: .08em; }   /* status pill badges */

/**
 * Page header meta strip — muted chrome color on dark background
 */
.as-page-meta {
  color: var(--nav-link-color);
}

/**
 * Studies index table — density sizing
 */
.as-study-table thead th {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  color: var(--bs-secondary-color);
}

.as-study-table tbody td {
  font-size: .88rem;
  vertical-align: middle;
}

/**
 * Sign-out button — inverts to accent on hover
 */
.navbar .btn-outline-light {
  --bs-btn-color:              var(--nav-link-color);
  --bs-btn-border-color:       var(--nav-meta-color);
  --bs-btn-hover-color:        var(--nav-bg);
  --bs-btn-hover-bg:           var(--accent);
  --bs-btn-hover-border-color: var(--accent);
}