/* ========================================
   Shared Styles — FH Level Colors, Badges, Mobile Nav
   Used by all pages. Edit here, not in individual templates.
   ======================================== */

/* FH Level Color System */
:root {
  /* D1 blue spectrum (4 tiers) */
  --color-d1-1: #1565c0;
  --color-d1-2: #1e88e5;
  --color-d1-3: #64b5f6;
  --color-d1-4: #bbdefb;
  /* D2 green spectrum (2 tiers) */
  --color-d2-1: #43a047;
  --color-d2-2: #a5d6a7;
  /* D3 orange spectrum (3 tiers) */
  --color-d3-1: #e65100;
  --color-d3-2: #fb8c00;
  --color-d3-3: #ffcc80;
  /* USports */
  --color-usports: #ab47bc;
  /* Not interested */
  --color-not-interested: #748b97;

  /* Neutral palette (dashboard navy family) */
  --color-dark-navy: #112D4E;        /* Headers, strong text, primary dark */
  --color-medium-blue: #3F72AF;      /* Links, active states, primary buttons */
  --color-dark-blue-grey: #27374D;   /* Secondary text */
  --color-muted-blue-grey: #526D82;  /* Labels, metadata */
  --color-light-blue-grey: #9DB2BF;  /* Placeholder text, muted borders */
  --color-light-blue: #DBE2EF;       /* Borders, dividers */
  --color-very-light-blue-grey: #DDE6ED; /* Light backgrounds, hover fills */
  --color-off-white: #F9F7F7;        /* Page/card backgrounds */

  /* Tier accents (reach/target/safety) */
  --color-reach: #F38181;            /* Coral pink */
  --color-target: #95E1D3;           /* Seafoam green */
  --color-safety: #FCE38A;           /* Soft yellow */

  /* Achievement/progress states */
  --color-earned-green: #609966;     /* Earned icon */
  --color-earned-bg: #EDF1D6;        /* Earned background */
}

/* FH Level Badges */
.badge-d1-1 { background-color: var(--color-d1-1); color: white; }
.badge-d1-2 { background-color: var(--color-d1-2); color: white; }
.badge-d1-3 { background-color: var(--color-d1-3); color: var(--color-dark-navy); }
.badge-d1-4 { background-color: var(--color-d1-4); color: var(--color-dark-navy); }
.badge-d2-1 { background-color: var(--color-d2-1); color: white; }
.badge-d2-2 { background-color: var(--color-d2-2); color: #2d5a3d; }
.badge-d3-1 { background-color: var(--color-d3-1); color: white; }
.badge-d3-2 { background-color: var(--color-d3-2); color: white; }
.badge-d3-3 { background-color: var(--color-d3-3); color: #5a2a2a; }
.badge-usports { background-color: var(--color-usports); color: white; }

/* Division-level badges (use primary color from each level group) */
.badge-d1 { background-color: var(--color-d1-1); color: white; }
.badge-d2 { background-color: var(--color-d2-1); color: white; }
.badge-d3 { background-color: var(--color-d3-1); color: white; }

/* Weather severity badges */
.badge-cold { background-color: #d0ebff; color: #1864ab; }
.badge-moderate { background-color: #fff3bf; color: #e67700; }
.badge-mild { background-color: #d3f9d8; color: #2b8a3e; }

/* ========================================
   Mobile Navigation — Canonical Pattern
   Fixed drop-down panel with backdrop overlay.
   All pages use this via shared.css + mobile-menu.js.
   ======================================== */

@media (max-width: 767px) {
  .navbar-collapse {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    margin-top: 0.5rem;
    padding: 0;
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: 4rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    z-index: 1050;
  }

  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    background-color: white;
  }

  /* Menu header with close button */
  .mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--color-very-light-blue-grey);
  }

  .mobile-menu-title {
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
    color: var(--color-dark-navy);
  }

  .mobile-menu-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-muted-blue-grey);
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.15s ease;
  }

  .mobile-menu-close:hover {
    background-color: var(--color-off-white);
    color: #000;
  }

  .navbar-nav {
    padding: 0.5rem 0;
  }

  .navbar-nav .nav-item {
    border-bottom: 1px solid var(--color-very-light-blue-grey);
  }

  .navbar-nav .nav-item:last-child {
    border-bottom: none;
  }

  .navbar-nav .nav-link {
    padding: 0.875rem 1rem;
    display: flex;
    align-items: center;
    transition: background-color 0.15s ease;
  }

  .navbar-nav .nav-link:hover {
    background-color: var(--color-off-white);
  }

  .navbar-nav .nav-link i {
    margin-right: 0.75rem;
    font-size: 1.1rem;
  }

  /* Backdrop overlay */
  .mobile-menu-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
  }

  .mobile-menu-backdrop.show {
    display: block;
  }

  /* Research dropdown — flush inside mobile nav */
  .navbar-nav .dropdown-menu {
    position: static;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    background: transparent;
  }

  .navbar-nav .dropdown-item {
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    display: flex;
    align-items: center;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid var(--color-very-light-blue-grey);
  }

  .navbar-nav .dropdown-item:last-child {
    border-bottom: none;
  }

  .navbar-nav .dropdown-item:hover {
    background-color: var(--color-off-white);
  }

  .navbar-nav .dropdown-item i {
    margin-right: 0.75rem;
    font-size: 1.1rem;
  }
}

/* Research dropdown — desktop active item highlight */
.navbar-nav .dropdown-item.active {
  font-weight: 600;
  color: var(--color-dark-navy);
  background-color: transparent;
}

/* ========================================
   Dashboard/Detail Shared Styles
   Used by dashboard.html and school detail pages.
   ======================================== */

:root {
  /* Dashboard aliases — reference shared palette (no duplicate hex values) */
  --dash-navy: var(--color-dark-navy);
  --dash-blue: var(--color-medium-blue);
  --dash-blue-light: var(--color-light-blue);
  --dash-off-white: var(--color-off-white);
  --dash-gray-dark: var(--color-dark-blue-grey);
  --dash-gray-muted: var(--color-muted-blue-grey);
  --dash-gray-light: var(--color-light-blue-grey);
  --dash-gray-border: var(--color-very-light-blue-grey);

  /* Tier accents — reference shared palette */
  --dash-reach: var(--color-reach);
  --dash-target: var(--color-target);
  --dash-safety: var(--color-safety);

  /* Achievement states — reference shared palette */
  --dash-earned-green: var(--color-earned-green);
  --dash-earned-bg: var(--color-earned-bg);
  --dash-unearned-icon: var(--color-light-blue-grey);
  --dash-unearned-bg: var(--color-very-light-blue-grey);
}

/* Segmented controls (tier selector) */
.seg-control {
  display: flex;
  align-items: stretch;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--color-light-blue);
}

.seg-control button {
  flex: 1;
  padding: 0.3rem 0.6rem;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: none;
  border-right: 1px solid var(--color-light-blue);
  background: #fff;
  color: var(--dash-gray-dark);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.seg-control button:last-child {
  border-right: none;
}

.seg-control button:hover {
  background: var(--color-very-light-blue-grey);
}

.seg-control button.active-reach { background: var(--dash-reach); color: #fff; border-color: var(--dash-reach); }
.seg-control button.active-target { background: var(--dash-target); color: var(--dash-navy); border-color: var(--dash-target); }
.seg-control button.active-safety { background: var(--dash-safety); color: var(--dash-navy); border-color: var(--dash-safety); }

/* Advice segmented control active states */
.seg-control button.active-recommends { background: var(--dash-earned-bg); color: var(--dash-earned-green); border-color: var(--dash-earned-bg); }
.seg-control button.active-advises_against { background: rgba(243,129,129,0.15); color: var(--dash-reach); border-color: rgba(243,129,129,0.15); }
.seg-control button.active-none { background: var(--dash-gray-border); color: var(--dash-gray-muted); border-color: var(--dash-gray-border); }

/* Interest level selector */
.interest-control {
  display: flex;
  align-items: stretch;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--color-light-blue);
}

.interest-control button {
  flex: 1;
  padding: 0.3rem 0.6rem;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: none;
  border-right: 1px solid var(--color-light-blue);
  background: #fff;
  color: var(--dash-gray-dark);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.interest-control button:last-child {
  border-right: none;
}

.interest-control button:hover {
  background: var(--color-very-light-blue-grey);
}

.interest-control button.active-love { background: var(--dash-reach); color: #fff; border-color: var(--dash-reach); }
.interest-control button.active-like { background: var(--dash-blue); color: #fff; border-color: var(--dash-blue); }
.interest-control button.active-considering { background: var(--color-light-blue-grey); color: #fff; border-color: var(--color-light-blue-grey); }
.interest-control button.active-out { background: var(--dash-gray-border); color: var(--dash-gray-muted); border-color: var(--dash-gray-border); }

/* Conference status pills */
.conf-pill {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 0.75rem;
  white-space: nowrap;
  vertical-align: middle;
}

.conf-pill-ph { background: var(--color-earned-bg); color: var(--color-earned-green); }
.conf-pill-interest { font-size: 0.8rem; padding: 0; }
.conf-pill-safety { background: var(--dash-earned-bg); color: var(--dash-earned-green); }
.conf-pill-target { background: rgba(63,114,175,0.12); color: var(--dash-blue); }
.conf-pill-reach { background: rgba(243,129,129,0.12); color: var(--dash-reach); }

/* Phoebe's note input */
.dash-ph-note {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--dash-gray-border);
  border-radius: 0.5rem;
  font-size: 0.7rem;
  background: #fff;
  transition: border-color 0.15s;
}

.dash-ph-note:focus {
  outline: none;
  border-color: var(--dash-blue);
  box-shadow: 0 0 0 2px rgba(63,114,175,0.1);
}