/* Eagleridge brand skin, layered over the unchanged Vue/Vuetify 1.5 build.
   Colors: Eagleridge Enrichment Program brand guide (Blue #003DA6, Pantone 293 C; Gold #FBCE39, Pantone 122 C).
   Layout cues (white header with logo and tagline, colored stripe, blue footer, Inter) follow
   mpsaz.org and eagleridgeenrichment.mpsaz.org.
   Loaded only when BRAND_HEAD is set (compose env), so turning it off restores the old look.
   Vuetify writes its theme colors at runtime with !important, so every rule here is scoped under
   #app (the v-app root, which also hosts dialogs and menus) to win on specificity. */

@font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 300; src: url(fonts/inter-latin-300-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/inter-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/inter-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/inter-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 900; src: url(fonts/inter-latin-900-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 300; src: url(fonts/inter-latin-ext-300-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/inter-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/inter-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/inter-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 900; src: url(fonts/inter-latin-ext-900-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --er-blue: #003da6;
  --er-blue-dark: #002e7d;
  --er-blue-tint: #e6ecf6;
  --er-gold: #fbce39;
  --er-text: #2d2d2d;
  --er-text-2: #474747;
  --er-bg: #f1f1f1;
  --er-red: #c62828;
  --er-green: #2e7d32;
  --er-font: Inter, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------- base */
#app.application { font-family: var(--er-font); }
#app.theme--light.application { background: var(--er-bg); color: var(--er-text); }
#app .display-4, #app .display-3, #app .display-2, #app .display-1, #app .headline, #app .title { font-family: var(--er-font) !important; }
#app input, #app textarea, #app select, #app button { font-family: inherit; }
#app a { color: var(--er-blue); }

/* theme colors: the old build used Material blue and amber */
#app .primary, #app .info, #app .blue:not([class*="lighten"]) {
  background-color: var(--er-blue) !important; border-color: var(--er-blue) !important;
}
#app .primary--text, #app .info--text, #app .blue--text { color: var(--er-blue) !important; caret-color: var(--er-blue) !important; }
#app .blue.lighten-5 { background-color: var(--er-blue-tint) !important; border-color: var(--er-blue-tint) !important; }
#app .blue.lighten-4 { background-color: #d9e3f5 !important; border-color: #d9e3f5 !important; }   /* Wednesday class tiles */
/* light Material blues carried dark text; where they become brand blue, the text turns white */
#app .v-toolbar.blue.lighten-3 { background-color: var(--er-blue) !important; border-color: var(--er-blue) !important; }   /* admin menu bar */
#app .v-toolbar.blue.lighten-3 .v-toolbar__title,
#app .v-toolbar.blue.lighten-3 .v-btn,
#app .v-toolbar.blue.lighten-3 .v-icon { color: #fff !important; }
#app .v-expansion-panel__container.blue .v-expansion-panel__header,
#app .v-expansion-panel__container.blue .v-expansion-panel__header .v-icon { color: #fff !important; }   /* Wednesday section header */
#app .warning { background-color: var(--er-gold) !important; border-color: var(--er-gold) !important; }

/* ---------------------------------------------------------------- header */
#app #toolbar.v-toolbar {
  height: auto !important;               /* the old app CSS pins it at 110-125px */
  background: #fff !important;
  border-top: 6px solid var(--er-blue) !important;
  border-bottom: 4px solid var(--er-gold) !important;
  box-shadow: 0 4px 10px #0000001a !important;
  padding: 0 !important;
}
#app #toolbar .v-toolbar__content { height: auto !important; min-height: 84px; padding: 10px 24px; }
#app #toolbar h1 {
  margin: 0 !important;
  text-align: left;
  display: grid;
  grid-template-columns: 100px auto;
  column-gap: 16px;
  align-items: center;
  color: var(--er-blue) !important;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .5px;
}
#app #toolbar h1::before {
  content: "";
  grid-row: 1 / span 2;
  width: 100px;
  height: 60px;
  background: url(eagleridge-logo.png) center / contain no-repeat;
}
#app #toolbar h1::after {
  content: "Eagleridge Enrichment Program \00b7  Mesa Public Schools";
  align-self: start;
  margin-top: 4px;
  color: var(--er-text-2);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
#app #toolbar .v-btn { color: var(--er-blue) !important; font-weight: 700; }

@media (max-width: 600px) {
  #app #toolbar .v-toolbar__content { min-height: 68px; padding: 8px 12px; }
  #app #toolbar h1 { grid-template-columns: 70px auto; column-gap: 10px; font-size: 17px; }
  #app #toolbar h1::before { width: 70px; height: 42px; }
  #app #toolbar h1::after { font-size: 10px; letter-spacing: .5px; content: "Mesa Public Schools"; }
}

/* ---------------------------------------------------------------- system notices
   Staff give each notice a type (success, info, warning, error) in Admin > System Notifications.
   Each type keeps its own icon and color, as soft rounded tiles instead of the old solid blocks. */
#app .notifications { width: 100%; max-width: 1185px; margin: 18px auto 0; padding: 0 16px; display: grid; gap: 10px; }
#app .notifications .v-alert {
  --a-bg: #e8eef9; --a-line: #c9d6ef; --a-icon: var(--er-blue); --a-ink: #10234f;   /* info */
  background: var(--a-bg) !important;
  border: 1px solid var(--a-line) !important;
  border-radius: 10px;
  color: var(--a-ink) !important;
  box-shadow: none;
  margin: 0;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}
#app .notifications .v-alert.success { --a-bg: #e8f4ea; --a-line: #c4e2cb; --a-icon: var(--er-green); --a-ink: #173d1c; }
#app .notifications .v-alert.warning { --a-bg: #fdf3d3; --a-line: #f1dc8f; --a-icon: #8f6400; --a-ink: #463300; }
#app .notifications .v-alert.error { --a-bg: #fbeaea; --a-line: #f1c7c4; --a-icon: var(--er-red); --a-ink: #5a1613; }
#app .notifications .v-alert .v-alert__icon { color: var(--a-icon) !important; }

/* ---------------------------------------------------------------- controls */
#app .v-btn { text-transform: none; letter-spacing: .01em; font-weight: 600; border-radius: 4px; }
#app .v-btn--icon, #app .v-btn--floating { border-radius: 50%; }
#app .v-btn--round { border-radius: 28px; }
#app .v-card, #app .v-dialog { border-radius: 8px; }
#app .v-card > .v-toolbar:first-child { border-radius: 8px 8px 0 0; }
/* login card: with Inter the links fill the row and Login wraps; keep it on the right when it does */
#app form .v-card__actions #login { margin-left: auto; margin-top: 8px; }
/* enrollment page: pink "Back to Dashboard" and the bright yellow semester picker */
#app .v-btn.red.lighten-4 { background-color: #fff !important; color: var(--er-blue) !important; box-shadow: inset 0 0 0 1px var(--er-blue) !important; }
#app .v-input__slot.yellow { background-color: #fdf0c2 !important; border-color: #fdf0c2 !important; }

/* ---------------------------------------------------------------- footer */
/* one slim row: MPS logo on a white tile, two lines of office info beside it */
#app .v-footer.warning {
  background-color: var(--er-blue) !important;
  border-color: var(--er-blue) !important;
  padding: 0 16px;
}
#app .v-footer .flex {
  font-size: 0 !important;   /* hides the old "(c)2018 - Present Eagleridge" */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 !important;
}
#app .v-footer .flex::before {
  content: "";
  flex: none;
  width: 92px;
  height: 46px;
  margin-right: 16px;
  border-radius: 4px;
  background: #fff url(mps-logo.png) center / 78px auto no-repeat;
}
#app .v-footer .flex::after {
  content: "Eagleridge Enrichment Program  \00b7  Mesa Public Schools\A 1313 W. Medina Ave., Mesa  \00b7  (480) 308-6060";
  white-space: pre-line;
  text-align: left;
  color: #fff;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 400;
}
@media (max-width: 600px) {
  #app .v-footer .flex { justify-content: flex-start; padding: 12px 0 !important; }
  #app .v-footer .flex::before { width: 76px; height: 38px; margin-right: 12px; background-size: 64px auto; }
  #app .v-footer .flex::after { content: "Eagleridge Enrichment Program\A 1313 W. Medina Ave., Mesa\A (480) 308-6060"; font-size: 12px; line-height: 1.5; }
}

/* ---------------------------------------------------------------- parent dashboard
   (its instruction line, p.body-2.red--text, only exists on this page, so it scopes the rules) */
#app h1.display-2.pb-2 { font-size: 32px !important; line-height: 1.2 !important; font-weight: 700; letter-spacing: 0 !important; color: var(--er-text); text-align: left; }
#app p.body-2.red--text { color: var(--er-text-2) !important; font-weight: 400; font-size: 15px !important; }

@media (max-width: 600px) {
  #app h1.display-2.pb-2 { font-size: 24px !important; }

  /* students as cards: name and grade on top, Edit / View, then a full-width Add/Drop Classes */
  #app .container:has(p.body-2.red--text) .v-table__overflow { overflow: visible; }
  #app .container:has(p.body-2.red--text) table.v-table thead { display: none; }
  #app .container:has(p.body-2.red--text) table.v-table,
  #app .container:has(p.body-2.red--text) table.v-table tbody { display: block; width: 100%; }
  #app .container:has(p.body-2.red--text) table.v-table tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    height: auto; padding: 14px 16px; border-bottom: 1px solid var(--line, #e3e5ea);
  }
  #app .container:has(p.body-2.red--text) table.v-table tbody tr:hover { background: transparent; }
  #app .container:has(p.body-2.red--text) table.v-table tbody td { display: block; height: auto; padding: 0 !important; font-size: 16px; }
  #app .container:has(p.body-2.red--text) table.v-table tbody td:nth-child(1),
  #app .container:has(p.body-2.red--text) table.v-table tbody td:nth-child(2) { font-weight: 700; }
  #app .container:has(p.body-2.red--text) table.v-table tbody td:nth-child(3) { margin-left: auto; color: var(--er-text-2); display: flex; align-items: baseline; gap: 4px; }
  #app .container:has(p.body-2.red--text) table.v-table tbody td:nth-child(3)::before { content: "Grade "; }
  #app .container:has(p.body-2.red--text) table.v-table tbody td:nth-child(4),
  #app .container:has(p.body-2.red--text) table.v-table tbody td:nth-child(5) { flex: 1 1 40%; }
  #app .container:has(p.body-2.red--text) table.v-table tbody td:nth-child(6) { flex: 1 1 100%; }
  #app .container:has(p.body-2.red--text) table.v-table tbody td .v-btn { width: 100%; margin: 0; height: 40px; font-size: 15px; }

  /* header: Logout and the district name move into a slim blue bar on top, so the title row stays one line */
  #app #toolbar.v-toolbar { border-top-width: 32px !important; }
  #app #toolbar.v-toolbar::before {
    content: "Mesa Public Schools"; position: absolute; top: -32px; left: 12px; height: 32px; line-height: 32px;
    color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  }
  #app #toolbar h1::after { display: none; }
  #app #toolbar h1::before { grid-row: 1; }
  #app #toolbar .v-btn {
    position: absolute; top: -32px; right: 4px; height: 32px; min-width: 0; margin: 0; padding: 0 10px;
    color: #fff !important; font-size: 13px;
  }
}

/* ---------------------------------------------------------------- Add/Drop page on phones
   Enrolled / Waitlist tables (Vuetify wraps each in a plain div right after its heading): each class becomes a card (section and name, then teacher, room, days,
   time, period, then a full-width Drop or Remove). Desktop keeps the table. */
@media (max-width: 600px) {
  #app .v-card h2.display-1 { font-size: 22px !important; line-height: 1.3 !important; }
  #app h3.display-1.white--text { font-size: 20px !important; line-height: 1.3 !important; padding: 10px 14px !important; margin-top: 24px !important; border-radius: 6px; }
  #app h3.display-1.white--text + div .v-table__overflow { overflow: visible; }
  #app h3.display-1.white--text + div thead { display: none; }
  #app h3.display-1.white--text + div table,
  #app h3.display-1.white--text + div tbody { display: block; width: 100%; }
  #app h3.display-1.white--text + div tbody tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
    height: auto; padding: 12px 4px; border-bottom: 1px solid #e3e5ea;
  }
  #app h3.display-1.white--text + div tbody tr:hover { background: transparent; }
  #app h3.display-1.white--text + div tbody td {
    display: block; height: auto; padding: 0 !important; text-align: left !important; font-size: 14px; color: var(--er-text-2);
  }
  #app h3.display-1.white--text + div tbody td:nth-child(1),
  #app h3.display-1.white--text + div tbody td:nth-child(2) { font-size: 16px; font-weight: 700; color: var(--er-text); }
  #app h3.display-1.white--text + div tbody td:nth-child(2) { flex: 1 1 60%; }
  #app h3.display-1.white--text + div tbody td:nth-child(4)::before { content: "Rm "; }
  #app h3.display-1.white--text + div tbody td:nth-child(7)::before { content: "Period "; }
  #app h3.display-1.white--text + div tbody td:nth-child(8) { flex: 1 1 100%; margin-top: 8px; }
  #app h3.display-1.white--text + div tbody td:nth-child(8) .v-btn { width: 100%; margin: 0; height: 40px; }
  #app h3.display-1.white--text + div tbody td[colspan] { flex: 1 1 100%; text-align: center !important; font-size: 14px; font-weight: 400; color: var(--er-text-2); }
}