/*
 * CampusShield AI — Lovable-inspired module page experience.
 * Presentation-only layer: keep existing Supabase data, routes, actions and role gates.
 * Forest green + emerald, warm canvas, clear page hierarchy and calm card surfaces.
 */

#workspace .page:not(#page-dashboard) > .heading {
  display: block;
  margin: 0 0 22px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--cs-line, #DCE9DE);
}

/* Only headings with an explicit action group need a horizontal desktop layout. */
#workspace .page:not(#page-dashboard) > .heading:has(> .heading-actions) {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

#workspace .page:not(#page-dashboard) > .heading > div:first-child {
  flex: 1 1 420px;
  min-width: 0;
}

#workspace .page:not(#page-dashboard) > .heading h1 {
  margin: 0;
  color: var(--cs-ink, #173325);
  font-size: clamp(1.55rem, 2.35vw, 2.1rem);
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: -.045em;
  text-wrap: balance;
}

#workspace .page:not(#page-dashboard) > .heading p {
  max-width: 72ch;
  margin: 7px 0 0;
  color: var(--cs-muted, #53695B);
  font-size: 13px;
  line-height: 1.65;
}

#workspace .page:not(#page-dashboard) > .heading .heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

#workspace .page:not(#page-dashboard) > .heading .heading-actions .btn,
#workspace .page:not(#page-dashboard) > .heading > .btn {
  min-height: 40px;
  border-radius: 11px;
  padding: 9px 13px;
  white-space: normal;
}

#workspace .page:not(#page-dashboard):not(#page-shieldmind):not(#page-campus-map) > .panel {
  min-width: 0;
  border: 1px solid var(--cs-line, #DCE9DE);
  border-radius: 18px;
  background-color: var(--cs-card, #FFFFFF);
  box-shadow: 0 10px 28px rgba(18, 59, 35, .045);
}

#workspace .page:not(#page-dashboard):not(#page-shieldmind):not(#page-campus-map) > .panel > .panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

#workspace .page:not(#page-dashboard):not(#page-shieldmind):not(#page-campus-map) > .panel > .panel-heading h2,
#workspace .page:not(#page-dashboard):not(#page-shieldmind):not(#page-campus-map) > .panel > .panel-heading h3 {
  margin: 0;
  color: var(--cs-ink, #173325);
  font-size: 17px;
  font-weight: 820;
  letter-spacing: -.035em;
}

#workspace .page:not(#page-dashboard):not(#page-shieldmind):not(#page-campus-map) > .panel > .panel-heading p {
  margin: 4px 0 0;
  color: var(--cs-muted, #53695B);
  font-size: 12px;
  line-height: 1.55;
}

#workspace .page:not(#page-dashboard) .notice-inline,
#workspace .page:not(#page-dashboard) .notice {
  border-radius: 13px;
  line-height: 1.6;
}

#workspace .page:not(#page-dashboard) .field label {
  color: var(--cs-ink, #173325);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.4;
}

#workspace .page:not(#page-dashboard) .field input,
#workspace .page:not(#page-dashboard) .field select,
#workspace .page:not(#page-dashboard) .field textarea {
  min-height: 42px;
  border: 1px solid #D2E2D5;
  border-radius: 10px;
  background: #FFFFFF;
  color: #173325;
  font-size: 13px;
}

#workspace .page:not(#page-dashboard) .field textarea {
  min-height: 104px;
}

#workspace .page:not(#page-dashboard) .field input:focus,
#workspace .page:not(#page-dashboard) .field select:focus,
#workspace .page:not(#page-dashboard) .field textarea:focus {
  border-color: #15803D;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, .13);
}

#workspace .page:not(#page-dashboard) .table-wrap {
  overflow: auto;
  border: 1px solid var(--cs-line, #DCE9DE);
  border-radius: 13px;
}

#workspace .page:not(#page-dashboard) .table-wrap table {
  border-collapse: separate;
  border-spacing: 0;
}

#workspace .page:not(#page-dashboard) .table-wrap thead th {
  background: #EFF7F0;
  color: #385B43;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

#workspace .page:not(#page-dashboard) .table-wrap tbody tr:hover td {
  background: #F7FBF7;
}

#workspace .page:not(#page-dashboard) .heading-actions .btn:focus-visible,
#workspace .page:not(#page-dashboard) .panel button:focus-visible,
#workspace .page:not(#page-dashboard) .panel a:focus-visible {
  outline: 3px solid #58B879;
  outline-offset: 3px;
}

html[data-theme="dark"] #workspace .page:not(#page-dashboard) > .heading {
  border-bottom-color: #315B40;
}

html[data-theme="dark"] #workspace .page:not(#page-dashboard) > .heading h1,
html[data-theme="dark"] #workspace .page:not(#page-dashboard):not(#page-shieldmind):not(#page-campus-map) > .panel > .panel-heading h2,
html[data-theme="dark"] #workspace .page:not(#page-dashboard):not(#page-shieldmind):not(#page-campus-map) > .panel > .panel-heading h3 {
  color: #E5F3E8;
}

html[data-theme="dark"] #workspace .page:not(#page-dashboard) > .heading p,
html[data-theme="dark"] #workspace .page:not(#page-dashboard):not(#page-shieldmind):not(#page-campus-map) > .panel > .panel-heading p {
  color: #B7C9BD;
}

html[data-theme="dark"] #workspace .page:not(#page-dashboard):not(#page-shieldmind):not(#page-campus-map) > .panel {
  border-color: #315B40;
  background-color: var(--cs-dark-surface, #132a1f);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .13);
  color: #E5F3E8;
}

html[data-theme="dark"] #workspace .page:not(#page-dashboard) .field label {
  color: #DCEDE0;
}

html[data-theme="dark"] #workspace .page:not(#page-dashboard) .field input,
html[data-theme="dark"] #workspace .page:not(#page-dashboard) .field select,
html[data-theme="dark"] #workspace .page:not(#page-dashboard) .field textarea {
  border-color: #426A50;
  background: #0D2F1D;
  color: #E5F3E8;
}

html[data-theme="dark"] #workspace .page:not(#page-dashboard) .table-wrap {
  border-color: #315B40;
}

html[data-theme="dark"] #workspace .page:not(#page-dashboard) .table-wrap thead th {
  background: #1A422A;
  color: #D9ECDE;
}

html[data-theme="dark"] #workspace .page:not(#page-dashboard) .table-wrap tbody tr:hover td {
  background: #193D29;
}

@media (max-width: 760px) {
  #workspace .page:not(#page-dashboard) > .heading {
    margin-bottom: 17px;
    padding-bottom: 13px;
  }

  #workspace .page:not(#page-dashboard) > .heading:has(> .heading-actions) {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  #workspace .page:not(#page-dashboard) > .heading > div:first-child {
    flex-basis: auto;
    width: 100%;
  }

  #workspace .page:not(#page-dashboard) > .heading .heading-actions {
    justify-content: flex-start;
    width: 100%;
  }

  #workspace .page:not(#page-dashboard) > .heading .heading-actions .btn {
    flex: 0 1 auto;
  }

  #workspace .page:not(#page-dashboard):not(#page-shieldmind):not(#page-campus-map) > .panel {
    border-radius: 15px;
    padding: clamp(14px, 3.5vw, 18px);
  }
}

@media (max-width: 420px) {
  #workspace .page:not(#page-dashboard) > .heading h1 {
    font-size: clamp(1.4rem, 7vw, 1.7rem);
  }

  #workspace .page:not(#page-dashboard) > .heading .heading-actions .btn {
    min-height: 42px;
    flex: 1 1 calc(50% - 8px);
  }

  #workspace .page:not(#page-dashboard):not(#page-shieldmind):not(#page-campus-map) > .panel > .panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  #workspace .page:not(#page-dashboard) *,
  #workspace .page:not(#page-dashboard) *::before,
  #workspace .page:not(#page-dashboard) *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* Student workspace navigation — compact shortcuts without replacing live modules. */
#page-academics .academic-trust-note { margin-bottom: 14px; }
#page-academics .academic-shortcut-nav,
#page-community .campuspulse-local-nav {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 9px;
  border: 1px solid var(--cs-line, #DCE9DE);
  border-radius: 15px;
  background: var(--cs-card, #FFFFFF);
}
#page-academics .academic-shortcut-nav button,
#page-community .campuspulse-local-nav > a,
#page-community .campuspulse-local-nav > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--cs-ink, #173325);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.3;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
#page-academics .academic-shortcut-nav button > span,
#page-community .campuspulse-local-nav > a > span:first-child,
#page-community .campuspulse-local-nav > button > span:first-child {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  place-items: center;
  border-radius: 8px;
  background: #E8F5EB;
  color: #176B3A;
  font-size: 13px;
}
#page-community .campuspulse-local-nav > a,
#page-community .campuspulse-local-nav > button {
  flex: 1 1 170px;
  min-width: 0;
  border: 1px solid var(--cs-line, #DCE9DE);
  background: #FFFFFF;
  text-align: left;
}
#page-community .campuspulse-local-nav > a > span:nth-child(2),
#page-community .campuspulse-local-nav > button > span:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}
#page-community .campuspulse-local-nav strong { font-size: 12px; }
#page-community .campuspulse-local-nav small {
  color: var(--cs-muted, #53695B);
  font-size: 10px;
  font-weight: 600;
}
#page-community .campuspulse-local-nav .is-current {
  border-color: #7BBE91;
  background: #F0F8F1;
}
#page-community .campuspulse-bookmark-hint {
  margin: -2px 0 17px;
  padding: 9px 12px;
  border-left: 3px solid #4EAA70;
  border-radius: 0 9px 9px 0;
  background: #F1F8F2;
  color: #385B43;
  font-size: 11px;
  line-height: 1.55;
}
#page-academics .academic-core-section,
#page-academics .academic-support-section {
  margin: 22px 0;
}
#page-academics .academic-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}
#page-academics .academic-section-heading h2 {
  margin: 4px 0 0;
  color: var(--cs-ink, #173325);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 850;
  letter-spacing: -.04em;
}
#page-academics .academic-section-heading p {
  margin: 4px 0 0;
  color: var(--cs-muted, #53695B);
  font-size: 12px;
  line-height: 1.55;
}
#page-academics .academic-section-note {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #D4E8D9;
  border-radius: 999px;
  background: #F0F8F2;
  color: #28623A;
  font-size: 9px;
  font-weight: 800;
}
#page-academics .academic-primary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
#page-academics .academic-primary-card {
  display: flex;
  min-width: 0;
  min-height: 224px;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--cs-line, #DCE9DE);
  border-radius: 17px;
  background: var(--cs-card, #FFFFFF);
  box-shadow: 0 10px 28px rgba(18, 59, 35, .045);
}
#page-academics .academic-card-icon {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 13px;
  place-items: center;
  border-radius: 12px;
  background: #E8F5EB;
  color: #176B3A;
  font-size: 19px;
}
#page-academics .academic-primary-card h3 {
  margin: 4px 0 5px;
  color: var(--cs-ink, #173325);
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -.03em;
}
#page-academics .academic-primary-card p {
  flex: 1 1 auto;
  margin: 0 0 14px;
  color: var(--cs-muted, #53695B);
  font-size: 11.5px;
  line-height: 1.6;
}
#page-academics .academic-primary-card .btn {
  min-height: 38px;
  border-radius: 10px;
  font-size: 11px;
}
#page-academics .academic-card-actions {
  display: flex;
  width: 100%;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: auto;
}
#page-academics .academic-card-actions .btn { flex: 1 1 auto; }
#page-academics .academic-support-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#page-academics .academic-support-nav button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--cs-line, #DCE9DE);
  border-radius: 12px;
  background: var(--cs-card, #FFFFFF);
  color: var(--cs-ink, #173325);
  text-align: left;
}
#page-academics .academic-support-nav button > span:first-child {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: #E8F5EB;
  color: #176B3A;
}
#page-academics .academic-support-nav button > span:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}
#page-academics .academic-support-nav strong { font-size: 11.5px; }
#page-academics .academic-support-nav small {
  color: var(--cs-muted, #53695B);
  font-size: 10px;
  line-height: 1.4;
}
#page-academics .academic-support-nav button:hover,
#page-community .campuspulse-local-nav button:hover,
#page-community .campuspulse-local-nav a:hover,
#page-academics .academic-shortcut-nav button:hover {
  border-color: #8ABF99;
  background: #F3FAF4;
}
#page-academics .academic-shortcut-nav button:focus-visible,
#page-academics .academic-support-nav button:focus-visible,
#page-community .campuspulse-local-nav button:focus-visible,
#page-community .campuspulse-local-nav a:focus-visible {
  outline: 3px solid #58B879;
  outline-offset: 3px;
}
#page-academics .campus-roadmap-note { margin-top: 18px; }

html[data-theme="dark"] #page-academics .academic-shortcut-nav,
html[data-theme="dark"] #page-community .campuspulse-local-nav {
  border-color: #315B40;
  background: #132A1F;
}
html[data-theme="dark"] #page-academics .academic-shortcut-nav button,
html[data-theme="dark"] #page-community .campuspulse-local-nav > a,
html[data-theme="dark"] #page-community .campuspulse-local-nav > button {
  color: #E5F3E8;
}
html[data-theme="dark"] #page-academics .academic-shortcut-nav button > span,
html[data-theme="dark"] #page-community .campuspulse-local-nav > a > span:first-child,
html[data-theme="dark"] #page-community .campuspulse-local-nav > button > span:first-child,
html[data-theme="dark"] #page-academics .academic-card-icon,
html[data-theme="dark"] #page-academics .academic-support-nav button > span:first-child {
  background: #1D4B30;
  color: #B9E6C4;
}
html[data-theme="dark"] #page-community .campuspulse-local-nav > a,
html[data-theme="dark"] #page-community .campuspulse-local-nav > button,
html[data-theme="dark"] #page-academics .academic-primary-card,
html[data-theme="dark"] #page-academics .academic-support-nav button {
  border-color: #315B40;
  background: #132A1F;
  color: #E5F3E8;
}
html[data-theme="dark"] #page-community .campuspulse-local-nav small,
html[data-theme="dark"] #page-community .campuspulse-bookmark-hint,
html[data-theme="dark"] #page-academics .academic-section-heading p,
html[data-theme="dark"] #page-academics .academic-section-heading h2,
html[data-theme="dark"] #page-academics .academic-primary-card h3,
html[data-theme="dark"] #page-academics .academic-support-nav small,
html[data-theme="dark"] #page-academics .academic-primary-card p {
  color: #C2D6C7;
}
html[data-theme="dark"] #page-community .campuspulse-bookmark-hint {
  border-left-color: #75C58C;
  background: #1A3C28;
}
html[data-theme="dark"] #page-community .campuspulse-local-nav .is-current {
  border-color: #69A87D;
  background: #1A3C28;
}
html[data-theme="dark"] #page-academics .academic-section-note {
  border-color: #3C6B49;
  background: #1A3C28;
  color: #CDEBD4;
}
html[data-theme="dark"] #page-academics .academic-support-nav button:hover,
html[data-theme="dark"] #page-community .campuspulse-local-nav button:hover,
html[data-theme="dark"] #page-community .campuspulse-local-nav a:hover,
html[data-theme="dark"] #page-academics .academic-shortcut-nav button:hover {
  border-color: #5A986D;
  background: #1B422B;
}

@media (max-width: 900px) {
  #page-academics .academic-primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  #page-academics .academic-primary-grid,
  #page-academics .academic-support-nav { grid-template-columns: minmax(0, 1fr); }
  #page-academics .academic-primary-card { min-height: 0; }
  #page-academics .academic-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  #page-academics .academic-section-note { align-self: flex-start; }
  #page-community .campuspulse-local-nav > a,
  #page-community .campuspulse-local-nav > button { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 380px) {
  #page-academics .academic-shortcut-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-academics .academic-shortcut-nav button { min-width: 0; padding: 8px; font-size: 10.5px; }
  #page-community .campuspulse-local-nav > a,
  #page-community .campuspulse-local-nav > button { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #page-academics .academic-shortcut-nav *,
  #page-community .campuspulse-local-nav * {
    transition-duration: .01ms !important;
  }
}