/*
 * Elevated theme for the teacher-facing area, scoped under .ev-app (applied
 * to <body> in layouts/teacher.html.erb) so it never touches the
 * kids/parent/admin/marketing layouts, which load this same bundle.
 *
 * Approach: retheme Bootstrap's own CSS custom properties (--bs-primary,
 * --bs-border-radius, --bs-*-bg-subtle, --bs-btn-*, ...) rather than
 * overriding each component's final CSS properties. Bootstrap's own rules
 * already have the right specificity for their own states (hover/focus/
 * active/disabled) and never fight each other — a plain `color: X` override
 * on `.btn-primary` can lose to a plain `a { color: Y }` rule in surprising
 * ways depending on selector shape, but retheming the *input* Bootstrap's
 * own higher-specificity rule reads from can't have that problem.
 *
 * Only a handful of rules below are direct property overrides — those are
 * cases where Bootstrap's compiled CSS hardcodes a color instead of reading
 * a variable (confirmed against the compiled bootstrap.min.css), or where
 * we're adding something Bootstrap has no variable for at all (card shadow,
 * table header typography, the app shell chrome).
 */

.ev-app {
  /* canvas + typography */
  --bs-body-bg: #F6F7FB;
  --bs-body-color: #1B1E28;
  --bs-body-color-rgb: 27, 30, 40;
  --bs-emphasis-color: #1B1E28;
  --bs-emphasis-color-rgb: 27, 30, 40;
  --bs-secondary-color: #6B7280;
  --bs-tertiary-bg: #F6F7FB;
  --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-font-monospace: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --bs-border-color: #E6E8EF;
  --bs-border-color-translucent: #E6E8EF;
  --bs-border-radius: .625rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: .875rem;

  /* accent (primary) */
  --bs-primary: #4F46E5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-primary-bg-subtle: #EEF0FF;
  --bs-primary-border-subtle: #C7C4F5;
  --bs-primary-text-emphasis: #4F46E5;
  --bs-link-color: #4F46E5;
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: #433BCB;
  --bs-link-hover-color-rgb: 67, 59, 203;

  /* status colors */
  --bs-success: #0E8F5F;
  --bs-success-rgb: 14, 143, 95;
  --bs-success-bg-subtle: #E3F5EA;
  --bs-success-border-subtle: #C9E9D7;
  --bs-success-text-emphasis: #0E8F5F;
  --bs-danger: #D03B3B;
  --bs-danger-rgb: 208, 59, 59;
  --bs-danger-bg-subtle: #FBEAEA;
  --bs-danger-border-subtle: #F2C6C6;
  --bs-danger-text-emphasis: #D03B3B;
  --bs-warning: #B8860B;
  --bs-warning-rgb: 184, 134, 11;
  --bs-warning-bg-subtle: #FBF1DC;
  --bs-warning-border-subtle: #F0DDA8;
  --bs-warning-text-emphasis: #8A5E10;
  --bs-info-bg-subtle: #EEF0FF;
  --bs-info-border-subtle: #C7C4F5;
  --bs-info-text-emphasis: #433BCB;
}

.ev-app h1, .ev-app h2, .ev-app h3, .ev-app h4, .ev-app h5, .ev-app h6 {
  font-weight: 800;
  letter-spacing: -0.01em;
}
.ev-app code { color: var(--bs-link-hover-color); background: var(--bs-primary-bg-subtle); padding: .15em .4em; border-radius: 6px; }

/* Cards — Bootstrap defines --bs-card-box-shadow but never applies it, and
   has no variable for "tinted cap background off", so those two stay as
   direct additions; everything else (radius, border, bg) flows from the
   root vars above via --bs-card-border-radius / --bs-card-border-color /
   --bs-card-bg already defaulting to them. */
.ev-app .card {
  --bs-card-border-radius: 1rem;
  --bs-card-bg: #fff;
  --bs-card-cap-bg: transparent;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -14px rgba(16,24,40,.10);
}
.ev-app .card-header { font-weight: 700; }
.ev-app .card-title { font-weight: 800; }

/* Buttons — per-variant --bs-btn-* vars, so hover/active/focus stay in sync
   automatically and never touch a state we didn't mean to (this is what a
   flat `.btn-primary { background: X }` override can't guarantee). */
.ev-app .btn { font-weight: 600; font-size: .9rem; }
.ev-app .btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: var(--bs-link-hover-color);
  --bs-btn-active-bg: var(--bs-link-hover-color);
  --bs-btn-active-border-color: var(--bs-link-hover-color);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.ev-app .btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.ev-app .btn-outline-secondary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--bs-body-bg);
  --bs-btn-hover-border-color: #C9CCD6;
}
.ev-app .btn-outline-danger {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger-border-subtle);
  --bs-btn-hover-color: var(--bs-danger);
  --bs-btn-hover-bg: var(--bs-danger-bg-subtle);
  --bs-btn-hover-border-color: var(--bs-danger-border-subtle);
}
.ev-app .btn-outline-warning {
  --bs-btn-color: var(--bs-warning-text-emphasis);
  --bs-btn-border-color: var(--bs-warning-border-subtle);
  --bs-btn-hover-color: var(--bs-warning-text-emphasis);
  --bs-btn-hover-bg: var(--bs-warning-bg-subtle);
  --bs-btn-hover-border-color: var(--bs-warning-border-subtle);
}

/* Badges — .badge only themes text color itself; background comes from the
   bg-*/bg-*-subtle utilities, which already read the root vars above. */
.ev-app .badge { border-radius: 999px; font-weight: 700; font-size: .72rem; }

/* Tables — Bootstrap hardcodes literal colors for .table-danger/.table-info
   (confirmed in the compiled CSS) instead of reading a variable, so those
   two stay as direct overrides. Header typography is a pure addition. */
.ev-app .table > thead > tr > th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--bs-secondary-color);
}
.ev-app .table-danger, .ev-app .table-danger > td, .ev-app .table-danger > th {
  --bs-table-bg: var(--bs-danger-bg-subtle);
}
.ev-app .table-info, .ev-app .table-info > td, .ev-app .table-info > th {
  --bs-table-bg: var(--bs-primary-bg-subtle);
}

/* Forms — Bootstrap hardcodes the checked/focus colors (#0d6efd / #86b7fe)
   instead of reading a variable, so these stay as direct overrides. */
.ev-app .form-control:focus,
.ev-app .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem var(--bs-primary-bg-subtle);
}
.ev-app .form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.ev-app .form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem var(--bs-primary-bg-subtle);
}
.ev-app .form-label { font-weight: 600; font-size: .88rem; }

/* App shell: topbar + sidebar — page chrome Bootstrap has no theme for. */
.ev-app .ev-topbar { background: #fff; border-bottom: 1px solid var(--bs-border-color); }
.ev-app .ev-brand { color: var(--bs-body-color); font-weight: 800; letter-spacing: -0.01em; text-decoration: none; }
.ev-app .ev-logout {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 999px; padding: .35rem .9rem;
  border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color);
  background: transparent; font-size: .85rem; font-weight: 600;
  text-decoration: none; transition: .15s;
}
.ev-app .ev-logout:hover { background-color: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); color: var(--bs-danger); }

.ev-app .ev-sidebar { background: #fff; border-inline-end: 1px solid var(--bs-border-color); }
.ev-app .ev-sidebar .nav-link {
  color: var(--bs-secondary-color); font-weight: 600; font-size: .92rem;
  border-radius: .625rem; padding: .55rem .8rem; margin-bottom: 2px;
  transition: .15s;
}
.ev-app .ev-sidebar .nav-link:hover { background-color: var(--bs-body-bg); color: var(--bs-body-color); }
.ev-app .ev-sidebar .nav-link.active {
  background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary); font-weight: 700;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */