/* The School Leadership Library — shared styles
   Brand: Navy #003C5F · Magenta #C8186E · Orange #FF9500
   Tints: light blue #A8D5E2 · teal #7BC4C4 · near-white #F1F6F9 */

:root {
  --navy: #003C5F;
  --magenta: #C8186E;
  --orange: #FF9500;
  --lightblue: #A8D5E2;
  --teal: #7BC4C4;
  --nearwhite: #F1F6F9;
}

* { -webkit-font-smoothing: antialiased; }

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: var(--nearwhite);
  color: var(--navy);
}

/* ---------- Layout shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 260px;
  flex: 0 0 260px;
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.main-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* ---------- Wordmark / arc motif ---------- */
.arc-mark { display: inline-block; flex: 0 0 auto; }
.arc-mark path { stroke: var(--orange); }

/* ---------- Sidebar nav ---------- */
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  font-weight: 500;
  transition: background .15s, color .15s;
  cursor: pointer;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active { background: var(--magenta); color: #fff; }
.nav-item.active:hover { background: var(--magenta); }
.nav-item i { width: 18px; height: 18px; }

/* ---------- Cards ---------- */
.card {
  display: block;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,60,95,.06), 0 6px 20px rgba(0,60,95,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  border: 1px solid rgba(0,60,95,.06);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,60,95,.14);
}

/* ---------- Thumbnails (pure CSS, no images) ---------- */
.thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);
  background-size: 16px 16px;
  opacity: .5;
}
.thumb-icon { width: 46px; height: 46px; color: rgba(255,255,255,.92); position: relative; z-index: 1; }
.thumb-dark .thumb-icon { color: var(--navy); opacity: .85; }

.thumb-navy     { background: linear-gradient(135deg,#003C5F,#0a567f); }
.thumb-magenta  { background: linear-gradient(135deg,#C8186E,#e23d8b); }
.thumb-teal     { background: linear-gradient(135deg,#7BC4C4,#4f9d9d); }
.thumb-orange   { background: linear-gradient(135deg,#FF9500,#ffb24d); }
.thumb-blue     { background: linear-gradient(135deg,#A8D5E2,#7bbcd0); }
.thumb-tealnavy { background: linear-gradient(135deg,#003C5F 0%,#176a82 55%,#7BC4C4 100%); }
.thumb-magorange{ background: linear-gradient(135deg,#C8186E,#FF9500); }

/* type chip on thumbnail */
.type-chip {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  background: rgba(255,255,255,.92);
  color: var(--navy);
}
.type-chip i { width: 13px; height: 13px; }

.badge-new {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  background: var(--orange);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.badge-time {
  position: absolute;
  bottom: 10px; right: 10px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-time i { width: 12px; height: 12px; }

/* category pill on card body */
.cat-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--magenta);
}

/* progress bar */
.progress { height: 6px; border-radius: 999px; background: #e3edf2; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: var(--magenta); }

/* line clamp helpers */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Goal tiles ---------- */
.goal-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,60,95,.08);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  cursor: pointer;
}
.goal-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,60,95,.12); border-color: var(--teal); }
.goal-ico {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--nearwhite);
  color: var(--navy);
}
.goal-ico i { width: 20px; height: 20px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 11px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: filter .15s, transform .1s, background .15s, color .15s;
  border: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--magenta); color: #fff; }
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost { background: #fff; color: var(--navy); border: 1px solid rgba(0,60,95,.18); }
.btn-ghost:hover { background: var(--nearwhite); }
.btn i { width: 17px; height: 17px; }

/* ---------- Deck thumbnail (templates page) ---------- */
.deck {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
}
.deck-titlebar { height: 9px; width: 60%; border-radius: 4px; background: rgba(255,255,255,.9); }
.deck-line { height: 6px; border-radius: 4px; background: rgba(255,255,255,.55); }
.deck-line.short { width: 45%; }
.deck-line.mid { width: 72%; }
.deck-shape {
  margin-top: auto;
  height: 34px; width: 34px; border-radius: 8px;
  background: rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
}
.deck-shape i { width: 18px; height: 18px; }
/* stacked-deck effect */
.deck-stack { position: relative; }
.deck-stack::before, .deck-stack::after {
  content: ""; position: absolute; inset: 0; border-radius: 10px; z-index: -1;
  background: #fff; border: 1px solid rgba(0,60,95,.10);
}
.deck-stack::before { transform: translate(5px,5px); }
.deck-stack::after  { transform: translate(10px,10px); }

/* ---------- Topbar search ---------- */
.search-box {
  display: flex; align-items: center; gap: 9px;
  background: #fff;
  border: 1px solid rgba(0,60,95,.12);
  border-radius: 11px;
  padding: 9px 14px;
  color: #6b8794;
  width: 100%;
  max-width: 460px;
}
.search-box i { width: 17px; height: 17px; }
.pill-new {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff4e6; color: #b56b00;
  border: 1px solid #ffd699;
  padding: 7px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.pill-new i { width: 14px; height: 14px; }

.icon-btn {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid rgba(0,60,95,.12);
  color: var(--navy);
  cursor: pointer;
}
.icon-btn:hover { background: var(--nearwhite); }
.dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 999px; background: var(--magenta); }

.avatar {
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; letter-spacing: .02em;
  flex: 0 0 auto;
}

/* tracker steps */
.stage {
  flex: 1 1 0;
  position: relative;
  text-align: center;
}
.stage-dot {
  width: 34px; height: 34px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  background: #e3edf2; color: #6b8794;
  border: 3px solid #fff;
  position: relative; z-index: 1;
}
.stage.done .stage-dot { background: var(--teal); color: #fff; }
.stage.current .stage-dot { background: var(--magenta); color: #fff; box-shadow: 0 0 0 4px rgba(200,24,110,.16); }

/* scrollbar polish */
.scroll-x { scrollbar-width: thin; }
.scroll-x::-webkit-scrollbar { height: 8px; }
.scroll-x::-webkit-scrollbar-thumb { background: #cddde4; border-radius: 999px; }

/* ---------- Mobile / responsive ---------- */
.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,30,48,.5);
  z-index: 40; opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

@media (max-width: 1023px) {
  .app-shell { display: block; }
  .sidebar {
    position: fixed; top: 0; left: 0;
    height: 100vh; height: 100dvh; width: 270px;
    transform: translateX(-100%);
    transition: transform .26s ease;
    z-index: 50;
    box-shadow: 0 10px 40px rgba(0,0,0,.32);
  }
  .sidebar.open { transform: translateX(0); }
  .main-col { width: 100%; }
}
@media (min-width: 1024px) {
  .sidebar-backdrop { display: none !important; }
}

/* tighten generous padding on small screens */
@media (max-width: 640px) {
  .pad-main { padding-left: 18px !important; padding-right: 18px !important; }
}

/* section heading */
.sec-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }