/* Saints Portal Unified Stylesheet
   Generated to standardize portal.saintsclassical.com local CSS.
   Source files are retained in place for rollback/history. */


/* ===== SOURCE: css/tailwind.css ===== */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Primary Colors */
  --color-primary: #213b2d; /* Deep forest green */
  --color-secondary: #355946; /* Lighter green */
  --color-accent: #e6c566; /* Warm gold */
  
  /* Background Colors */
  --color-background: #f5efd7; /* Soft cream */
  --color-surface: #ffffff; /* Pure white */
  
  /* Text Colors */
  --color-text-primary: #1a1a1a; /* Near-black */
  --color-text-secondary: #666666; /* Medium gray */
  
  /* Status Colors */
  --color-success: #4a7c59; /* Forest green variant */
  --color-warning: #d4a574; /* Warm tan */
  --color-error: #a0522d; /* Muted sienna */
  
  /* Border Colors */
  --color-border: #d1bd89; /* Muted tan */
  
  /* Shadow Colors */
  --shadow-primary: rgba(33, 59, 45, 0.1);
}

@layer base {
  body {
    font-family: 'Source Sans Pro', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text-primary);
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Crimson Text', serif;
  }
}

@layer components {
  .transition-gentle {
    transition: all 200ms ease-out;
  }
  
  .shadow-academic {
    box-shadow: 0 2px 8px var(--shadow-primary);
  }
  
  .border-academic {
    border: 1px solid var(--color-border);
  }
}

/* ===== SOURCE: css/main.css ===== */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;500&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap');

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: JetBrains Mono, monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Crimson Text', serif;
}

.transition-gentle {
  transition: all 200ms ease-out;
}

.shadow-academic {
  box-shadow: 0 2px 8px var(--shadow-primary);
  margin: 0 0 20px;
  word-break: break-all;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.inset-0{
  inset: 0px;
}

.bottom-6{
  bottom: 1.5rem;
}

.left-3{
  left: 0.75rem;
}

.right-0{
  right: 0px;
}

.right-6{
  right: 1.5rem;
}

.top-1\/2{
  top: 50%;
}

.top-8{
  top: 2rem;
}

.z-50{
  z-index: 50;
}

.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.mb-1{
  margin-bottom: 0.25rem;
}

.mb-2{
  margin-bottom: 0.5rem;
}

.mb-3{
  margin-bottom: 0.75rem;
}

.mb-4{
  margin-bottom: 1rem;
}

.mb-6{
  margin-bottom: 1.5rem;
}

.mb-8{
  margin-bottom: 2rem;
}

.ml-1{
  margin-left: 0.25rem;
}

.ml-2{
  margin-left: 0.5rem;
}

.ml-3{
  margin-left: 0.75rem;
}

.ml-4{
  margin-left: 1rem;
}

.ml-auto{
  margin-left: auto;
}

.mr-1{
  margin-right: 0.25rem;
}

.mr-2{
  margin-right: 0.5rem;
}

.mr-3{
  margin-right: 0.75rem;
}

.mt-1{
  margin-top: 0.25rem;
}

.mt-12{
  margin-top: 3rem;
}

.mt-16{
  margin-top: 4rem;
}

.mt-2{
  margin-top: 0.5rem;
}

.mt-4{
  margin-top: 1rem;
}

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

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.grid{
  display: grid;
}

.hidden{
  display: none;
}

.h-10{
  height: 2.5rem;
}

.h-12{
  height: 3rem;
}

.h-16{
  height: 4rem;
}

.h-3{
  height: 0.75rem;
}

.h-4{
  height: 1rem;
}

.h-5{
  height: 1.25rem;
}

.h-6{
  height: 1.5rem;
}

.h-8{
  height: 2rem;
}

.max-h-screen{
  max-height: 100vh;
}

.min-h-32{
  min-height: 8rem;
}

.min-h-screen{
  min-height: 100vh;
}

.w-10{
  width: 2.5rem;
}

.w-12{
  width: 3rem;
}

.w-3{
  width: 0.75rem;
}

.w-4{
  width: 1rem;
}

.w-48{
  width: 12rem;
}

.w-5{
  width: 1.25rem;
}

.w-6{
  width: 1.5rem;
}

.w-8{
  width: 2rem;
}

.w-full{
  width: 100%;
}

.w-px{
  width: 1px;
}

.max-w-7xl{
  max-width: 80rem;
}

.max-w-md{
  max-width: 28rem;
}

.flex-1{
  flex: 1 1 0%;
}

.flex-shrink-0{
  flex-shrink: 0;
}

.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer{
  cursor: pointer;
}

.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flex-col{
  flex-direction: column;
}

.flex-wrap{
  flex-wrap: wrap;
}

.items-start{
  align-items: flex-start;
}

.items-center{
  align-items: center;
}

.justify-center{
  justify-content: center;
}

.justify-between{
  justify-content: space-between;
}

.gap-1{
  gap: 0.25rem;
}

.gap-2{
  gap: 0.5rem;
}

.gap-4{
  gap: 1rem;
}

.gap-6{
  gap: 1.5rem;
}

.gap-8{
  gap: 2rem;
}

.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-y-auto{
  overflow-y: auto;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-full{
  border-radius: 9999px;
  background-color: var(--dark-green);
  color: white;
}

.rounded-lg{
  border-radius: 0.5rem;
}

.rounded-md{
  border-radius: 5px;
}

.rounded-b-lg{
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-t-lg{
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.border{
  border-width: 1px;
}

.border-2{
  border-width: 2px;
}

.border-b{
  border-bottom-width: 1px;
}

.border-b-2{
  border-bottom-width: 2px;
}

.border-t{
  border-top-width: 1px;
}

.border-t-0{
  border-top-width: 0px;
}

.border-dashed{
  border-style: dashed;
}

.border-accent{
  --tw-border-opacity: 1;
  border-color: rgb(230 197 102 / var(--tw-border-opacity, 1));
}

.border-border{
  --tw-border-opacity: 1;
  border-color: rgb(209 189 137 / var(--tw-border-opacity, 1));
}

.border-secondary{
  --tw-border-opacity: 1;
  border-color: rgb(53 89 70 / var(--tw-border-opacity, 1));
}

.bg-accent{
  --tw-bg-opacity: 1;
  background-color: rgb(230 197 102 / var(--tw-bg-opacity, 1));
}

.bg-background{
  --tw-bg-opacity: 1;
  background-color: rgb(245 239 215 / var(--tw-bg-opacity, 1));
}

.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-border{
  --tw-bg-opacity: 1;
  background-color: rgb(209 189 137 / var(--tw-bg-opacity, 1));
}

.bg-error{
  --tw-bg-opacity: 1;
  background-color: rgb(160 82 45 / var(--tw-bg-opacity, 1));
}

.bg-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(33 59 45 / var(--tw-bg-opacity, 1));
}

.bg-secondary{
  --tw-bg-opacity: 1;
  background-color: rgb(53 89 70 / var(--tw-bg-opacity, 1));
}

.bg-success{
  --tw-bg-opacity: 1;
  background-color: rgb(74 124 89 / var(--tw-bg-opacity, 1));
}

.bg-warning{
  --tw-bg-opacity: 1;
  background-color: rgb(212 165 116 / var(--tw-bg-opacity, 1));
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-opacity-50{
  --tw-bg-opacity: 0.5;
}

.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}

.p-2{
  padding: 0.5rem;
}

.p-3{
  padding: 0.75rem;
}

.p-4{
  padding: 1rem;
}

.p-6{
  padding: 1.5rem;
}

.p-8{
  padding: 2rem;
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pl-10{
  padding-left: 2.5rem;
}

.pr-4{
  padding-right: 1rem;
}

.pt-4{
  padding-top: 1rem;
}

.text-center{
  text-align: center;
}

.font-heading{
  font-family: Crimson Text, serif;
}

.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-medium{
  font-weight: 500;
}

.font-semibold{
  font-weight: 600;
}

.italic{
  font-style: italic;
}

.text-accent{
  --tw-text-opacity: 1;
  color: rgb(230 197 102 / var(--tw-text-opacity, 1));
}

.text-error{
  --tw-text-opacity: 1;
  color: rgb(160 82 45 / var(--tw-text-opacity, 1));
}

.text-secondary{
  --tw-text-opacity: 1;
  color: rgb(53 89 70 / var(--tw-text-opacity, 1));
}

.text-success{
  --tw-text-opacity: 1;
  color: rgb(74 124 89 / var(--tw-text-opacity, 1));
}

.text-text-primary{
  --tw-text-opacity: 1;
  color: rgb(26 26 26 / var(--tw-text-opacity, 1));
}

.text-text-secondary{
  --tw-text-opacity: 1;
  color: rgb(102 102 102 / var(--tw-text-opacity, 1));
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.underline{
  text-decoration-line: underline;
}

.opacity-0{
  opacity: 0;
}

.shadow-academic{
  --tw-shadow: 0 2px 8px rgba(33, 59, 45, 0.1);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-gentle{
  --tw-shadow: 0 1px 4px rgba(33, 59, 45, 0.08);
  --tw-shadow-colored: 0 1px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline{
  outline-style: solid;
}

.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

:root {
  /* Primary Colors */
  --color-primary: #213b2d;
  /* Deep forest green */
  --color-secondary: #355946;
  /* Lighter green */
  --color-accent: #e6c566;
  /* Warm gold */
  /* Background Colors */
  --color-background: #f5efd7;
  /* Soft cream */
  --color-surface: #ffffff;
  /* Pure white */
  /* Text Colors */
  --color-text-primary: #1a1a1a;
  /* Near-black */
  --color-text-secondary: #666666;
  /* Medium gray */
  /* Status Colors */
  --color-success: #4a7c59;
  /* Forest green variant */
  --color-warning: #d4a574;
  /* Warm tan */
  --color-error: #a0522d;
  /* Muted sienna */
  /* Border Colors */
  --color-border: #d1bd89;
  /* Muted tan */
  /* Shadow Colors */
  --shadow-primary: rgba(33, 59, 45, 0.1);
}

.hover\:border-secondary:hover{
  --tw-border-opacity: 1;
  border-color: rgb(53 89 70 / var(--tw-border-opacity, 1));
}

.hover\:bg-background:hover{
  --tw-bg-opacity: 1;
  background-color: #efefef;
}

.hover\:bg-primary:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(33 59 45 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-yellow-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}

.hover\:bg-yellow-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}

.hover\:text-accent:hover{
  --tw-text-opacity: 1;
  color: rgb(230 197 102 / var(--tw-text-opacity, 1));
}

.hover\:text-error:hover{
  --tw-text-opacity: 1;
  color: rgb(160 82 45 / var(--tw-text-opacity, 1));
}

.hover\:text-primary:hover{
  --tw-text-opacity: 1;
  color: rgb(33 59 45 / var(--tw-text-opacity, 1));
}

.hover\:text-secondary:hover{
  --tw-text-opacity: 1;
  color: rgb(53 89 70 / var(--tw-text-opacity, 1));
}

.hover\:text-text-primary:hover{
  --tw-text-opacity: 1;
  color: rgb(26 26 26 / var(--tw-text-opacity, 1));
}

.hover\:shadow-lg:hover{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:border-transparent:focus{
  border-color: transparent;
}

.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-secondary:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(53 89 70 / var(--tw-ring-opacity, 1));
}

@media (min-width: 640px){
  .sm\:mt-0{
    margin-top: 0px;
  }

  .sm\:flex-row{
    flex-direction: row;
  }

  .sm\:items-center{
    align-items: center;
  }

  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px){
  .md\:flex{
    display: flex;
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .md\:grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px){
  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:col-span-3{
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-4{
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-8{
    grid-column: span 8 / span 8;
  }

  .lg\:col-span-9{
    grid-column: span 9 / span 9;
  }

  .lg\:hidden{
    display: none;
  }

  .lg\:grid-cols-12{
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1280px){
  .xl\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xl\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.living-document {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.5;
    border: 0.5px solid #ddd;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: white;
    min-height: 500px;
    outline: none;
    width: 100%;
    padding: 15px 25px;
}
.living-document:focus {
    --tw-ring-opacity: 0;
    --tw-ring-color: #ddd;
    border: 0.5;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
#living-document-section {
    background: #f9fbfd;
}
.ql-toolbar.ql-snow {
  background-color: #efefef;
}
h2.resource-title {
    font-family: 'Archivo', sans-serif;
    font-size: 24px;
}
.resource-title-header {
    margin: 0 0 5px;
}
.resource-header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin: 0 0 10px;
}
h1.resource-title {
    font-size: 24px;
    font-weight: 400;
}
.resource-teacher {
    margin: 0;
    color: var(--light-green);
}
#living-document-editor .ql-editor {
    min-height: 400px;
    cursor: text;
}

#living-document-editor .ql-editor:focus {
    outline: none;
}
.resources-notification-badge {
    position: relative;
    background-color: var(--cream);
    color: black;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gold);
    min-width: 18px;
    margin-left: auto;
}
.date-cell {
    font-size: 14px;
    font-weight: 400;
}
.parent-cell {
  font-size: 14px;
  font-weight: 600;
}
td.clock-td {
  padding: 0px 5px 10px 25px;
}
.clock-text {
  font-size: 11px;
}
.clock-active {
  font-size: 11px;
  color: var(--red);
}

/* ===== SOURCE: css/styles.css ===== */
/* ========================================
   SAINTS CLASSICAL ACADEMY — DEV STYLES
   Design Direction: University-Grade Classical
   ======================================== */

/* ========================================
   DESIGN TOKENS
   ======================================== */
:root {
  /* Core Palette */
  --dark-green:   #213b2d;
  --light-green:  #355946;
  --white-green:  #f2fff8;
  --gold:         #e6c566;
  --cream:        #f5efd7;
  --tan:          #d1bd89;
  --red:          #cc522f;
  --text-dark:    #222;
  --text-light:   #fff;
  --grey:         #e5e7eb;
  --light-grey:   #f8f9fa;
  --blue:         #2196f3;

  /* Navy (Upper School / Admin) */
  --navy:         #1a2744;
  --navy-light:   #243456;
  --navy-muted:   #2d3f5e;

  /* Typography */
  --font-serif:   'Instrument Serif', Georgia, serif;
  --font-sans:    'Archivo', system-ui, sans-serif;

  /* Layout */
  --container:    1440px;
  --gutter:       clamp(20px, 4vw, 80px);
  --section-pad:  clamp(64px, 10vw, 120px);
}

/* ========================================
   RESET & BASE
   ======================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-dark);
  background: #fff;
  word-break: break-word;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
}

p { margin-bottom: 10px; word-break: break-word; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul { margin-left: 15px; }

/* ========================================
   NAVIGATION
   ======================================== */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 16px;
  transition: all 0.4s ease;
}

.site-nav.transparent .nav-inner {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}

.site-nav.solid {
  padding: 12px 16px;
}

.site-nav.solid .nav-inner {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.site-nav.solid .nav-logo-default { display: none; }
.site-nav.solid .nav-logo-scroll { display: block !important; height: 50px; }

.site-nav.solid .nav-links a {
  color: #333;
  opacity: 1;
}
.site-nav.solid .nav-links a:hover { color: #111; }

.site-nav.solid .nav-login {
  color: #333;
  border-color: rgba(0, 0, 0, 0.25);
}
.site-nav.solid .nav-login:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.4);
}

.site-nav.solid .nav-donate { color: var(--red) !important; }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px clamp(20px, 3vw, 40px);
  border-radius: 10px;
  transition: all 0.4s ease;
}

.nav-brand {
  display: flex;
  align-items: center;
}

.nav-logo {
  height: 60px;
  width: auto;
  transition: height 0.4s ease;
}

.nav-logo-scroll { display: none; }

.nav-links {
  display: flex;
  gap: 15px;
  list-style: none;
  align-items: center;
  margin: 0;
}

.nav-links a {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.3s ease;
}

.nav-links a:hover { opacity: 1; }

.nav-donate { color: var(--gold) !important; opacity: 1 !important; }

.nav-login {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 10px 35px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.nav-login:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.8);
}

/* Dropdown menus */
.has-dropdown { position: relative; }

.mega-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 7px;
  padding: 16px 8px;
  min-width: 220px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}

.has-dropdown:hover .mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-dropdown a {
  display: block;
  padding: 10px 16px;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-dark) !important;
  text-transform: none !important;
  opacity: 1 !important;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.mega-dropdown a:hover {
  background: var(--white-green);
}

/* Mobile nav toggle */
.nav-toggle { display: none; cursor: pointer; }
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-light);
  margin: 6px 0;
  transition: 0.3s;
}
.site-nav.solid .nav-toggle span { background: #333; }

/* Mobile overlay */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: var(--dark-green);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

.mobile-overlay.active { opacity: 1; visibility: visible; }

.mobile-overlay-inner { width: 85%; max-width: 400px; }

.mobile-close {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 28px;
  color: var(--text-light);
  cursor: pointer;
}

.mobile-nav {
  list-style: none;
  text-align: center;
  margin: 0;
}

.mobile-nav li { margin: 20px 0; }

.mobile-nav a {
  font-family: var(--font-serif);
  font-size: 32px;
  color: var(--text-light);
  transition: color 0.2s ease;
}

.mobile-nav a:hover { color: var(--gold); }

.mobile-login {
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 12px 32px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 20px;
}

@media (max-width: 900px) {
  .nav-links, .nav-login { display: none; }
  .nav-toggle { display: block; }
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 35px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.btn-primary, .btn.btn-primary {
  background: var(--gold);
  color: var(--dark-green);
  border-color: var(--gold);
}
.btn-primary:hover {
  background: #d4b04e;
  border-color: #d4b04e;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.btn-dark {
  background: var(--dark-green);
  color: var(--text-light);
  border-color: var(--dark-green);
}
.btn-dark:hover {
  background: var(--light-green);
  border-color: var(--light-green);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--text-light);
  border-color: rgba(255, 255, 255, 0.5);
}
.btn-outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.btn-secondary {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 28px;
  border-radius: 4px;
  border: 1px solid var(--dark-green);
  color: var(--dark-green);
  background: transparent;
  transition: all 0.25s ease;
  text-transform: none;
  letter-spacing: 0;
}

.btn-secondary:hover {
  background: var(--dark-green);
  color: var(--text-light);
}

.btn-navy {
  background: var(--navy);
  color: var(--text-light);
  border-color: var(--navy);
}
.btn-navy:hover {
  background: var(--navy-light);
  border-color: var(--navy-light);
}

/* ========================================
   HERO SECTION
   ======================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url('../images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33,59,45,0.3) 0%, rgba(33,59,45,0.75) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  padding: 0 var(--gutter);
  color: var(--text-light);
}

.hero-content h1 {
  font-size: clamp(58px, 11vw, 126px);
  color: var(--text-light);
  margin-bottom: 24px;
}

.hero-content h1 em {
  font-style: italic;
  color: var(--gold);
}

.hero-content p {
  font-size: clamp(16px, 2vw, 20px);
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin: 0 auto 36px;
}

.hero-content .btn-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ========================================
   STATS BAR
   ======================================== */
.stats-bar {
  background: var(--cream);
  padding: 48px 0;
  border-bottom: 1px solid var(--tan);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}

.stat-item h3 {
  font-size: clamp(28px, 4vw, 44px);
  color: var(--dark-green);
  margin-bottom: 4px;
}

.stat-item p {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--light-green);
  margin: 0;
}

@media (max-width: 600px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ========================================
   CONTENT SECTIONS
   ======================================== */
.section { padding: var(--section-pad) 0; }

.section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.section-split.reverse { direction: rtl; }
.section-split.reverse > * { direction: ltr; }

.section-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(32px, 4vw, 52px);
  color: var(--dark-green);
  margin-bottom: 24px;
}

.section-body {
  font-size: 17px;
  color: #222;
  line-height: 1.7;
  max-width: 560px;
}

.section-body p + p { margin-top: 16px; }

.section-image {
  aspect-ratio: 4/3;
  background: var(--light-grey);
  border-radius: 7px;
  overflow: hidden;
}

.section-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .section-split { grid-template-columns: 1fr; }
  .section-split.reverse { direction: ltr; }
}

/* ========================================
   INFO BLOCKS (3-up cards)
   ======================================== */
.info-blocks { padding: var(--section-pad) 0; }

.block-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.info-block {
  padding: 40px;
  border: 1px solid var(--grey);
  border-radius: 7px;
  text-align: center;
  transition: all 0.3s ease;
}

.info-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.info-block h2 {
  color: var(--dark-green);
  font-size: clamp(48px, 5vw, 64px);
  margin-bottom: 16px;
}

.info-block p { margin-bottom: 24px; }

@media (max-width: 768px) {
  .block-wrapper { grid-template-columns: 1fr; }
}

/* ========================================
   LOCATION SECTION
   ======================================== */
.location {
  min-height: 500px;
  padding: var(--section-pad) 0;
  background-image: url('../images/location-bg.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-light);
}

.location::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33,59,45,0.5) 0%, rgba(33,59,45,0.8) 100%);
}

.location .container { position: relative; }

.location-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: 12px;
}

.location h2 {
  font-size: clamp(64px, 8vw, 112px);
  margin-bottom: 12px;
}

.location .launch {
  font-size: clamp(16px, 2vw, 20px);
  opacity: 0.8;
  margin-bottom: 40px;
}

.location .btn {
  color: var(--text-light);
  border-color: rgba(255,255,255,0.5);
  background: transparent;
}
.location .btn:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.08);
}

/* ========================================
   MISSION SECTION
   ======================================== */
.mission {
  padding: var(--section-pad) 0;
  background: var(--dark-green);
  text-align: center;
  color: var(--text-light);
}

.mission h2 {
  font-size: clamp(64px, 8vw, 104px);
  color: var(--gold);
  margin-bottom: 32px;
}

.mission p {
  max-width: 800px;
  margin: 0 auto 20px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
}

/* ========================================
   FOOTER
   ======================================== */
.site-footer {
  background: var(--dark-green);
  color: var(--text-light);
  padding: 80px 0 32px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}

.footer-brand { }

.footer-logo-img {
  max-width: 100px;
  margin-bottom: 16px;
}

.footer-tagline {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
  line-height: 1.5;
}

.footer-social {
  display: flex;
  gap: 16px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
}

.footer-social a:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.footer-nav-section h3 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  color: var(--text-light);
}

.footer-nav-section ul {
  list-style: none;
  margin: 0;
}

.footer-nav-section ul li { margin-bottom: 10px; }

.footer-nav-section ul li a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s ease;
}

.footer-nav-section ul li a:hover { color: var(--text-light); }

.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.footer-bottom p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}

@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 576px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
}

/* ========================================
   SCROLL ANIMATIONS
   ======================================== */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   UTILITY / NOTIFICATION
   ======================================== */
.top-notification {
  background: var(--white-green);
  padding: 12px 25px;
  font-weight: 500;
  color: var(--dark-green);
  border-radius: 7px;
  margin-bottom: 30px;
  border: 1px solid var(--light-green);
}

/* ========================================
   PARENT DASHBOARD STYLES (preserved)
   ======================================== */
.account-deactivated-banner {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 7px;
  padding: 40px;
  text-align: center;
  margin: 20px;
}
.account-deactivated-banner.inline { margin: 20px 0; }
.account-deactivated-banner .banner-icon { font-size: 48px; margin-bottom: 16px; }
.account-deactivated-banner h2 { color: #991b1b; margin-bottom: 12px; }
.account-deactivated-banner p { color: #222; max-width: 500px; margin: 0 auto; }

.child-tab.inactive { opacity: 0.6; }

.inactive-badge-small {
  font-size: 10px;
  background: #fecaca;
  color: #991b1b;
  padding: 1px 5px;
  border-radius: 6px;
  margin-left: 4px;
}

.inactive-badge {
  font-size: 14px;
  background: #fecaca;
  color: #991b1b;
  padding: 4px 10px;
  border-radius: 7px;
  margin-left: 12px;
  vertical-align: middle;
}

.reenrollment-widget {
  border-radius: 7px;
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid rgba(0,0,0,0.08);
}
.reenrollment-widget h3 { margin: 0 0 4px; font-size: 16px; }
.reenrollment-widget h3 i { margin-right: 6px; }
.reenrollment-widget .status-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  position: absolute;
  top: 0;
  right: 0;
}
.reenrollment-widget .reenroll-btn {
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 13px;
  text-decoration: none;
  color: white;
}
.reenrollment-widget .reenroll-message { margin: 0; font-size: 14px; }
.reenrollment-widget .reenroll-message.with-margin { margin: 0 0 12px; }
.reenrollment-widget .survey-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  color: var(--dark-green);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.1);
}
.reenrollment-widget .thank-you-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.reenrollment-widget.status-not-started { background: #fef3c7; }
.reenrollment-widget.status-not-started h3,
.reenrollment-widget.status-not-started .status-label,
.reenrollment-widget.status-not-started .reenroll-message { color: #92400e; }
.reenrollment-widget.status-not-started .reenroll-btn { background: #92400e; }

.reenrollment-widget.status-family-verified,
.reenrollment-widget.status-in-progress { background: #dbeafe; }
.reenrollment-widget.status-family-verified h3,
.reenrollment-widget.status-family-verified .status-label,
.reenrollment-widget.status-family-verified .reenroll-message,
.reenrollment-widget.status-in-progress h3,
.reenrollment-widget.status-in-progress .status-label,
.reenrollment-widget.status-in-progress .reenroll-message { color: #1e40af; }
.reenrollment-widget.status-family-verified .reenroll-btn,
.reenrollment-widget.status-in-progress .reenroll-btn { background: #1e40af; }

.reenrollment-widget.status-pending-payment { background: #fef9c3; }
.reenrollment-widget.status-pending-payment h3,
.reenrollment-widget.status-pending-payment .status-label,
.reenrollment-widget.status-pending-payment .reenroll-message { color: #854d0e; }
.reenrollment-widget.status-pending-payment .reenroll-btn { background: #854d0e; }

.reenrollment-widget.status-fee-paid,
.reenrollment-widget.status-tuition-paid { background: #d1fae5; }
.reenrollment-widget.status-fee-paid h3,
.reenrollment-widget.status-fee-paid .status-label,
.reenrollment-widget.status-fee-paid .reenroll-message,
.reenrollment-widget.status-fee-paid .thank-you-label,
.reenrollment-widget.status-tuition-paid h3,
.reenrollment-widget.status-tuition-paid .status-label,
.reenrollment-widget.status-tuition-paid .reenroll-message,
.reenrollment-widget.status-tuition-paid .thank-you-label { color: #065f46; }

.assignment-item { --subject-color: #355946; }
.assignment-icon { color: var(--subject-color); }
.feedback-item { --subject-color: #355946; }
.feedback-icon { color: var(--subject-color); }
.subject-item { --subject-color: #355946; }
.subject-icon { color: var(--subject-color); }

.dashboard-reenrollment {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  position: relative;
}
.dashboard-reenrollment h3 { margin: 0 0 15px; }

.application-steps { margin-left: 20px; }


/* ===== SOURCE: css/form-styles.css ===== */
/* Form Styles for Saints Classical Academy */

/* Form Container */
.form-container {
  background-color: var(--cream);
  border-radius: 5px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  padding: 40px;
  margin-bottom: 30px;
}

/* Form Header */
.form-header {
  margin-bottom: 30px;
  text-align: center;
}

.form-header h2 {
  color: var(--dark-green);
  font-size: 2rem;
  margin-bottom: 10px;
  font-family: 'Instrument Serif', Georgia, serif;
}

.form-header p {
  color: var(--text-dark);
  max-width: 600px;
  margin: 0 auto;
}

/* Form Groups */
.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--dark-green);
  font-family: 'Archivo', sans-serif;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: 'Archivo', sans-serif;
  font-size: 1rem;
  color: var(--text-dark);
  background-color: white;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(230, 197, 102, 0.25);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-group select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6"><path fill="%23213b2d" d="M0 0l6 6 6-6z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}

/* Required Fields */
.required-field::after {
  content: "*";
  color: #d9534f;
  margin-left: 4px;
}

.form-note {
  display: block;
  font-size: 0.9rem;
  color: #666;
  margin-top: 5px;
  font-style: italic;
}

/* Buttons */
.form-buttons {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.btn-submit {
  background-color: var(--dark-green);
  color: white;
  border: 2px solid var(--dark-green);
  padding: 12px 25px;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-submit:hover {
  background-color: transparent;
  color: var(--dark-green);
}

.btn-reset {
  background-color: transparent;
  color: var(--dark-green);
  border: 2px solid var(--dark-green);
  padding: 12px 25px;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-reset:hover {
  background-color: rgba(33, 59, 45, 0.1);
}

/* Form Grid for side-by-side fields */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 0;
}

.form-col {
  flex: 1 1 calc(50% - 10px);
  min-width: 250px;
}

/* Success and Error Messages */
.form-message {
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 30px;
}

.form-success {
  background-color: rgba(40, 167, 69, 0.1);
  border-left: 4px solid #28a745;
  color: #155724;
}

.form-error {
  background-color: rgba(220, 53, 69, 0.1);
  border-left: 4px solid #dc3545;
  color: #721c24;
}

/* Form Response Page */
.form-response {
  padding: 60px 0;
  text-align: center;
}

.error-message {
  background-color: rgba(220, 53, 69, 0.1);
  border-radius: 5px;
  padding: 30px;
  margin: 30px auto;
  max-width: 800px;
  text-align: left;
}

.error-message h2 {
  color: #721c24;
  margin-bottom: 15px;
}

.error-message ul {
  margin-bottom: 20px;
}

/* Thank You Page */
.thank-you-message {
  padding: 60px 0;
  text-align: center;
}

.message-box {
  background-color: var(--cream);
  border-radius: 5px;
  padding: 50px;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
}

.message-box i {
  font-size: 4rem;
  color: #28a745;
  margin-bottom: 20px;
}

.message-box h2 {
  color: var(--dark-green);
  margin-bottom: 20px;
  font-size: 2.5rem;
}

.message-box p {
  font-size: 1.2rem;
  margin-bottom: 30px;
}

.next-steps {
  text-align: left;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 25px;
  border-radius: 5px;
  margin: 30px 0;
}

.next-steps h3 {
  color: var(--dark-green);
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.next-steps ul {
  padding-left: 20px;
}

.next-steps li {
  margin-bottom: 10px;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .form-container {
    padding: 30px 20px;
  }
  
  .message-box {
    padding: 30px 20px;
  }
  
  .form-buttons {
    flex-direction: column;
  }
  
  .btn-submit, .btn-reset {
    width: 100%;
  }
}


/* ===== SOURCE: css/page-styles.css ===== */
/* ========================================
   INTERIOR PAGE STYLES
   Saints Classical — Design Direction
   ======================================== */

/* ========================================
   PAGE HERO (interior pages)
   ======================================== */
.page-hero {
  position: relative;
  padding: 180px 0 100px;
  background: var(--dark-green);
  background-image: url('../images/banner-bg.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33,59,45,0.5) 0%, rgba(33,59,45,0.85) 100%);
}

.page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(42px, 7vw, 80px);
  font-weight: 400;
  color: var(--text-light);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 12px;
}

.page-hero h1 em {
  font-style: italic;
  color: var(--gold);
}

.page-hero .section-label {
  color: var(--gold);
}

/* ========================================
   HORIZONTAL PAGE NAV (sticky)
   ======================================== */
.page-nav {
  position: sticky;
  top: 0;
  z-index: 500;
  background: #fff;
  border-bottom: 1px solid var(--grey);
  transition: box-shadow 0.3s ease;
}

.page-nav.shadowed {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.page-nav ul {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-nav ul li { flex-shrink: 0; }

.page-nav a {
  display: block;
  padding: 16px 20px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.page-nav a:hover {
  color: var(--text-dark);
}

.page-nav a.active {
  color: var(--dark-green);
  border-bottom-color: var(--gold);
}

/* ========================================
   SECTION INTRO
   ======================================== */
.section-intro {
  margin-bottom: 48px;
}

/* ========================================
   PRINCIPLES GRID (About - Pedagogy)
   ======================================== */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.principle-card {
  padding: 40px;
  background: var(--light-grey);
  border-radius: 7px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.principle-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.principle-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 36px;
  color: var(--gold);
  margin-bottom: 12px;
  line-height: 1;
}

.principle-card h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--dark-green);
  margin-bottom: 12px;
  line-height: 1.2;
}

.principle-card p {
  font-size: 16px;
  color: #222;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 768px) {
  .principles-grid { grid-template-columns: 1fr; }
}

/* ========================================
   MISSION / VISION (About)
   ======================================== */
.about-mission-section {
  background: var(--cream);
}

.mission-vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
}

.mv-block .section-title {
  font-size: clamp(36px, 5vw, 56px);
}

.mv-block p {
  font-size: 17px;
  line-height: 1.8;
  color: #222;
}

.mv-block p + p { margin-top: 16px; }

@media (max-width: 768px) {
  .mission-vision-grid { grid-template-columns: 1fr; }
}

/* ========================================
   LEADER CARD (About - Leadership)
   ======================================== */
.leader-card {
  background: var(--light-grey);
  border-radius: 7px;
  padding: 48px;
  margin-bottom: 32px;
}

.leader-info h3 {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--dark-green);
  margin-bottom: 4px;
}

.leader-role {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}

.leader-info p {
  font-size: 16px;
  line-height: 1.75;
  color: #222;
  max-width: 720px;
}

.leader-info p + p { margin-top: 12px; }

.coming-soon-block {
  text-align: center;
  padding: 40px 0;
  color: #888;
  font-style: italic;
}

.coming-soon-block p { margin-bottom: 4px; }

/* ========================================
   CHURCH CARDS (About - Partnership)
   ======================================== */
.about-churches-section {
  background: var(--white-green);
}

.churches-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 16px;
}

.church-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 60px 40px;
  background: #fff;
  border-radius: 7px;
  border: 1px solid var(--grey);
  transition: all 0.25s ease;
}

.church-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.church-card h3 {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--dark-green);
  margin-bottom: 8px;
}

.church-link {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--gold);
  font-weight: 600;
}

@media (max-width: 600px) {
  .churches-grid { grid-template-columns: 1fr; }
}

/* ========================================
   ABOUT CTA
   ======================================== */
.about-cta {
  padding: var(--section-pad) 0;
  background: var(--dark-green);
  color: var(--text-light);
}

.about-cta h2 {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5vw, 56px);
  color: var(--gold);
  margin-bottom: 16px;
}

.about-cta p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  margin: 0 auto 32px;
}

/* ========================================
   ACADEMICS — PROGRAM CARDS
   ======================================== */
.program-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.program-card {
  padding: 40px;
  background: var(--light-grey);
  border-radius: 7px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.program-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.program-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.program-badge.lower { background: #e8f5e9; color: #2e7d32; }
.program-badge.upper { background: #e3f2fd; color: #1565c0; }
.program-badge.enrichment-badge { background: #f3e5f5; color: #7b1fa2; }

.program-card h3 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--dark-green);
  margin-bottom: 8px;
}

.program-schedule {
  font-size: 14px;
  font-weight: 600;
  color: var(--tan);
  margin-bottom: 16px !important;
}

.program-card p {
  font-size: 16px;
  color: #222;
  line-height: 1.7;
}

.program-card .btn-secondary { margin-top: 20px; }

@media (max-width: 900px) {
  .program-cards { grid-template-columns: 1fr; }
}

/* Alternating section background */
.academics-alt { background: var(--light-grey); }

/* Feature list (replaces old ul in boxes) */
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.feature-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--grey);
  font-size: 16px;
  color: #222;
  padding-left: 24px;
  position: relative;
}

.feature-list li:last-child { border-bottom: none; }

.feature-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}

/* ========================================
   ADMISSIONS — STEPS & TUITION
   ======================================== */
.steps-list { }

.step-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: var(--gold);
  color: var(--dark-green);
  font-family: var(--font-serif);
  font-size: 18px;
  border-radius: 50%;
}

.step-item strong {
  display: block;
  font-size: 16px;
  color: var(--dark-green);
  margin-bottom: 2px;
}

.step-item p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.tuition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.tuition-card {
  background: #fff;
  border-radius: 7px;
  padding: 40px;
  border: 1px solid var(--grey);
}

.tuition-card h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--dark-green);
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .tuition-grid { grid-template-columns: 1fr; }
}

/* ========================================
   CONTACT — LAYOUT
   ======================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: flex-start;
}

.contact-info-col .section-title {
  font-size: clamp(32px, 4vw, 48px);
  margin-bottom: 32px;
}

.contact-detail {
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
  align-items: flex-start;
}

.contact-detail i {
  color: var(--gold);
  font-size: 18px;
  margin-top: 4px;
  width: 20px;
  text-align: center;
}

.contact-detail strong {
  display: block;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dark-green);
  margin-bottom: 4px;
}

.contact-detail p {
  font-size: 15px;
  color: #222;
  margin: 0;
  line-height: 1.6;
}

.contact-detail a {
  color: var(--dark-green);
  text-decoration: underline;
}

.contact-form-col {
  background: var(--light-grey);
  border-radius: 7px;
  padding: 40px;
}

.contact-form-col .form-group input,
.contact-form-col .form-group select,
.contact-form-col .form-group textarea {
  border: 1px solid var(--grey);
  border-radius: 4px;
  background: #fff;
}

@media (max-width: 768px) {
  .contact-layout { grid-template-columns: 1fr; }
}

/* ========================================
   LEGACY INTERIOR STYLES (preserved)
   ======================================== */

/* Anchor Navigation */
.section-anchor {
  display: block;
  position: relative;
  top: -100px;
  visibility: hidden;
}

/* Component Boxes (for pages not yet redesigned) */
.principle-box, 
.vision-box, 
.mission-box,
.program-box, 
.option-box,
.faculty-profile {
  background-color: var(--cream);
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  border-radius: 7px;
}

.principle-box h3,
.vision-box h3,
.mission-box h3 {
  color: var(--dark-green);
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.principle-box ul,
.program-box ul,
.option-box ul {
  padding-left: 20px;
}

.principle-box li,
.program-box li,
.option-box li {
  margin-bottom: 10px;
}

/* Content Layout (legacy pages) */
.page-content { padding: 60px 0; }

.content-grid {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.main-content p { margin-bottom: 15px; }

/* Section Wrap (legacy) */
.section-wrap {
  margin-bottom: 60px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(33, 59, 45, 0.1);
}

.section-wrap:last-child { border-bottom: none; }

.section-wrap h2 {
  color: var(--dark-green);
  font-size: 2.5rem;
  margin-bottom: 30px;
}

/* Section Nav (legacy sidebar — hidden on redesigned pages) */
.section-nav {
  position: sticky;
  top: 100px;
  background-color: var(--cream);
  padding: 20px;
  border-radius: 7px;
  margin-bottom: 30px;
  flex-shrink: 0;
  min-width: 200px;
}

.section-nav ul { list-style: none; }
.section-nav ul li { margin-bottom: 10px; }

.section-nav ul li a {
  color: var(--dark-green);
  display: block;
  padding: 5px 10px;
  transition: all 0.3s ease;
}

.section-nav ul li a:hover,
.section-nav ul li a.active {
  background-color: #fff;
  border-radius: 4px;
}

/* Faculty Profile (legacy) */
.faculty-profile {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.faculty-info { flex: 1 1 400px; }

.faculty-info h3 {
  color: var(--dark-green);
  font-size: 1.8rem;
  margin-bottom: 5px;
}

.faculty-info h4 {
  color: var(--dark-green);
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-weight: 400;
  opacity: 0.8;
}

.coming-soon {
  text-align: center;
  padding: 40px 0;
  font-style: italic;
}

/* Page Banner (legacy) */
.page-banner {
  background-color: var(--dark-green);
  color: var(--text-light);
  padding: 120px 0 60px;
  text-align: center;
  background-image: url('../images/banner-bg.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
}

.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(33, 59, 45, 0.7);
}

.page-banner .container {
  position: relative;
  z-index: 1;
}

.page-banner h1 {
  font-size: 3.5rem;
  margin: 0;
}

/* Program boxes (legacy) */
.program-box h3,
.option-box h3 {
  color: var(--dark-green);
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.emphasis {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--dark-green);
  padding: 20px;
  background-color: var(--cream);
  border-radius: 7px;
  margin-top: 30px;
}

/* ========================================
   ADMISSIONS
   ======================================== */
.apply-process,
.tuition-info,
.dates-info {
  text-align: center;
  padding: 40px;
  background-color: var(--cream);
  border-radius: 7px;
  margin-bottom: 20px;
}

.application-row {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.application-content { flex: 1; min-width: 0; }

.application-thumbnail { flex-shrink: 0; width: 300px; }

.application-thumbnail img {
  width: 100%;
  border-radius: 7px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.application-thumbnail img:hover { transform: scale(1.02); }

/* Image Modal */
.image-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.9);
}

.image-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-modal .modal-content {
  max-width: 90%;
  max-height: 90%;
  border-radius: 7px;
}

.image-modal .modal-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
}

/* Schedule Tour */
.schedule-tour-section {
  text-align: center;
  padding: 60px 0;
  background-color: var(--gold);
  margin: 60px -20px 0;
  border-radius: 7px;
}

.schedule-tour-section h2 { color: var(--dark-green); margin-bottom: 20px; }
.schedule-tour-section p { max-width: 700px; margin: 0 auto 30px; }

/* ========================================
   CONTACT
   ======================================== */
.contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 60px;
}

.contact-info { flex: 1 1 400px; }

.contact-form-container {
  flex: 1 1 500px;
  background-color: var(--cream);
  padding: 40px;
  border-radius: 7px;
}

.contact-method { margin-bottom: 30px; }

.contact-method h3 {
  display: flex;
  align-items: center;
  color: var(--dark-green);
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.contact-method h3 i { margin-right: 10px; color: var(--gold); }
.contact-method a { color: var(--dark-green); text-decoration: underline; }

.social-links { display: flex; gap: 15px; }
.social-links-large { padding: 30px 0; }

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--dark-green);
  color: var(--text-light);
  border-radius: 50%;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.social-links a:hover {
  background-color: var(--gold);
  color: var(--dark-green);
}

/* ========================================
   FORMS
   ======================================== */
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--dark-green);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 1rem;
}

.form-group textarea { resize: vertical; }

.additional-options {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 60px;
}

.additional-options .option-box {
  flex: 1 1 300px;
  text-align: center;
  background-color: var(--cream);
  padding: 30px;
  border-radius: 7px;
  border-top: 3px solid var(--gold);
}

/* ========================================
   FAQ
   ======================================== */
.faq-container { margin-bottom: 40px; }

.faq-item {
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(33, 59, 45, 0.1);
}

.faq-question {
  padding: 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--dark-green);
}

.faq-question:after {
  content: '\f078';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  transition: transform 0.3s ease;
}

.faq-question.active:after { transform: rotate(180deg); }

.faq-answer {
  padding: 0 15px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer.active {
  padding: 0 15px 15px;
  max-height: 1000px;
}

/* ========================================
   BACK TO TOP
   ======================================== */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: var(--dark-green);
  color: var(--text-light);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}

.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--gold); color: var(--dark-green); }

.read-more {
  text-decoration: underline;
  font-size: 65%;
  text-transform: uppercase;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
  .page-hero { padding: 140px 0 60px; }
  .page-hero h1 { font-size: clamp(32px, 6vw, 56px); }

  .page-banner { padding: 105px 0 20px; }
  .page-banner h1 { font-size: 2rem; }

  .section-wrap h2 { font-size: 1.75rem; }
  .section-nav { display: none; }

  .application-row { flex-direction: column; }
  .application-thumbnail { width: 100%; }

  .page-nav ul { gap: 0; }
  .page-nav a { padding: 14px 16px; font-size: 12px; }
}

@media (max-width: 576px) {
  .principle-box,
  .vision-box,
  .mission-box,
  .program-box,
  .option-box { padding: 20px; }

  .contact-form-container { padding: 25px; }
}

@media (max-width: 992px) {
  .content-grid { flex-direction: column; }

  .section-nav ul {
    display: flex;
    overflow-x: auto;
  }

  .section-nav ul li {
    margin-right: 15px;
    margin-bottom: 0;
    white-space: nowrap;
  }
}


/* ===== SOURCE: css/dashboard.css ===== */
/* Dashboard Styles for Saints Classical Academy */
/* Design Direction: University-Grade Classical */

body, html {
  background-color: #f4f6f5;
  font-family: 'Archivo', system-ui, sans-serif;
}
.login-logo img {
	widht: 200px;
}

h1 {
  color: var(--dark-green);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0;
}
h2 {
  color: var(--dark-green);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
h3 {
  color: var(--dark-green);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 400;
  margin-bottom: 12px;
}
h4 {
  color: var(--dark-green);
  font-family: 'Archivo', system-ui, sans-serif;
  line-height: 18px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  padding-bottom: 5px;
  text-transform: uppercase;
  border-bottom: 1px dotted var(--gold);
  margin-bottom: 10px;
}

/* Dashboard Layout */
.dashboard-container {
  min-height: 100vh;
  background-color: #ECF3F0;
}

.dashboard-nav {
  background-color: var(--dark-green);
  color: var(--text-light);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 85px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  background-image: url(../images/banner-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.btn-publish {
  background-color: var(--dark-green);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 15px;
}

.nav-brand img {
  height: 65px;
}

.nav-brand span {
  font-size: 1.2rem;
  font-weight: 600;
  font-family: 'Instrument Serif', Georgia, serif;
}

.nav-links {
  display: flex;
  gap: 15px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
}

.nav-links a {
  color: var(--text-light);
  text-decoration: none;
  padding: 5px 9px;
  border-radius: 4px;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

.nav-links a:hover,
.nav-links a.active {
  opacity: 1;
  background-color: rgba(255,255,255,0.1);
  color: var(--text-light);
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logout-btn {
  background-color: transparent;
  border: 1px solid var(--text-light);
  color: var(--text-light);
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background-color: var(--text-light);
  color: var(--dark-green);
}

/* Main Content */
.dashboard-main {
  padding: 20px 40px;
  max-width: 1600px;
  margin: 0 auto;
}

.dashboard-header {
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-header h1 {
  color: var(--dark-green);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 30px;
  line-height: 30px;
  letter-spacing: -0.5px;
  font-weight: 400;
  margin: 0;
}

.stats-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
  margin-bottom: 30px;
  background: none;
  padding: 0;
  border-bottom: 0;
}

.stat-card-mini {
  background: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
  /* border-left: 3px solid #355946; */
}

.stat-card-mini h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #355946;
  margin: 0;
}

.stat-card-mini p {
  font-size: 0.85rem;
  color: #666;
  margin: 5px 0 0 0;
  font-weight: 500;
}

.main-grid {
  display: grid;
  grid-template-columns: calc(25% - 20px) calc(50% - 20px) 25%;
  gap: 20px;
  align-items: start;
}

@media (max-width: 992px) {
  .stats-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    margin-bottom: 10px;
  }
  .stat-card-mini {
    padding: 5px;
    margin-bottom: 10px;
  }
  .stat-card-mini h3 {
    font-size: 21px;
    font-weight: 700;
    color: #355946;
    margin: 0;
    line-height: 24px;
  }
  
  .stat-card-mini p {
    font-size: 14px;
    color: #666;
    margin: 5px 0 0 0;
    font-weight: 500;
    text-transform: uppercase;
  }
  .main-grid {
    grid-template-columns: 100%;
    gap: 10px;
  }
}



/* Dashboard Sections */
.dashboard-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
}

.section {
  background: white;
  border-radius: 7px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.section h2 {
  color: var(--dark-green);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.5rem;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--cream);
  padding-bottom: 10px;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.btn-primary {
  background-color: var(--dark-green);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
  transition: all 0.3s ease;
  /* text-transform: uppercase; */
  letter-spacing: 1px;
  font-size: 0.9rem;
}

.btn-primary:hover {
  background-color: var(--light-green);
  transform: translateY(-2px);
}

/* .btn-secondary {
  background-color: transparent;
  color: var(--dark-green);
  border: 2px solid var(--dark-green);
  padding: 10px 22px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
}

.btn-secondary:hover {
  background-color: var(--dark-green);
  color: white;
} */

.btn-small {
  background-color: var(--gold);
  color: var(--dark-green);
  border: none;
  padding: 6px 8px;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-small:hover {
  background-color: var(--tan);
}

.btn-danger {
  background-color: #dc3545;
  color: white;
}

.btn-danger:hover {
  background-color: #c82333;
}

/* Activity List */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.activity-item {
  padding: 7px 25px;
  background-color: #f5f5f5;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.activity-item strong {
  color: var(--dark-green);
  font-weight: 600;
}

.activity-item span {
  font-size: 12px;
  color: #fff;
  padding: 3px 10px;
}

/* Tables */
.users-table,
.students-table,
.assignments-table {
  background: white;
  border-radius: 7px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  overflow: hidden;
}

.users-table table,
.students-table table,
.assignments-table table {
  width: 100%;
  border-collapse: collapse;
}

.users-table th,
.students-table th,
.assignments-table th {
  background-color: var(--dark-green);
  color: white;
  padding: 15px;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
}

.users-table td,
.students-table td,
.assignments-table td {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.users-table tbody tr:hover,
.students-table tbody tr:hover,
.assignments-table tbody tr:hover {
  background-color: var(--cream);
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: white;
  margin: 5% auto;
  padding: 30px;
  border-radius: 7px;
  width: 90%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  max-width: 50vw;
  max-height: 80vh;
  overflow: scroll;
}

.close {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  color: #999;
  transition: color 0.3s ease;
}

.close:hover {
  color: var(--dark-green);
}

.modal h2 {
  color: var(--dark-green);
  font-family: 'Instrument Serif', Georgia, serif;
  margin-bottom: 20px;
  font-size: 1.8rem;
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  color: var(--color-primary, #213b2d);
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Form Styles in Modal */
.modal .form-group {
  margin-bottom: 10px;
}

.modal .form-group label {
  display: block;
  margin-bottom: 3px;
  font-weight: 600;
  font-size: 14px;
  color: var(--dark-green);
}

.modal .form-group input,
.modal .form-group select {
  width: 100%;
  padding: 6px;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.modal .form-group input:focus,
.modal .form-group select:focus {
  outline: none;
  border-color: var(--gold);
}

.modal .form-group label input[type="checkbox"] {
  width: auto;
  margin-right: 8px;
}

/* Messages */
.success-message {
  background-color: rgba(40, 167, 69, 0.1);
  border-left: 4px solid #28a745;
  color: #155724;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.error-message {
  background-color: rgba(220, 53, 69, 0.1);
  border-left: 4px solid #dc3545;
  color: #721c24;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.grade-section {
  margin-bottom: 40px;
}

.grade-section h2 {
  color: var(--dark-green);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.8rem;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--gold);
}

.grade-filter {
	margin-bottom: 20px;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 7px;
}
.grade-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}
.grade-tab {
	padding: 3px 8px;
	font-size: 14px;
	background: white;
	border: 1px solid #ddd;
	border-radius: 20px;
	text-decoration: none;
	color: #333;
	transition: all 0.3s;
}
.grade-tab:hover {
	background: #e9ecef;
}
.grade-tab.active {
	background: #007bff;
	color: white;
	border-color: #007bff;
}
.assignment-count {
	font-size: 0.8em;
	opacity: 0.7;
}


/* LOGIN SCREEN */

.login-container {
	width: 100%;
	max-width: 400px;
	padding: 20px;
}

.login-form {
	background: white;
	padding: 20px;
	border-radius: 5px;
	/* box-shadow: 0 10px 30px rgba(0,0,0,0.3); */
	text-align: center;
    border: 1px solid #e9ecef;
    background-color: #f8f9fa;
}

.login-logo {
	max-width: 200px;
	margin: 0 auto 20px;
}

.login-form h2 {
	color: var(--dark-green);
	font-family: 'Instrument Serif', Georgia, serif;
	font-size: 24px;
	margin-bottom: 30px;
  line-height: 2rem;
}

.login-form .form-group {
	text-align: left;
	margin-bottom: 20px;
}

.login-form .btn-primary {
	width: 100%;
	margin: 20px 0;
}

.login-help {
	margin-top: 20px;
}

.login-help a {
	color: var(--dark-green);
	text-decoration: underline;
}

.login-help a:hover {
	color: var(--gold);
}

.error-message {
	background-color: rgba(220, 53, 69, 0.1);
	border-left: 4px solid #dc3545;
	color: #721c24;
	padding: 15px;
	border-radius: 4px;
	margin-bottom: 20px;
	text-align: left;
}


/* PARENT VIEW */

.week-header {
	background-color: var(--dark-green);
	color: white;
	padding: 10px;
	margin-bottom: 20px;
	text-align: center;
	position: relative;
}

.week-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255,255,255,0.2);
	border: 1px solid rgba(255,255,255,0.3);
	color: white;
	padding: 8px 12px;
	border-radius: 20px;
	text-decoration: none;
	transition: background 0.3s;
}

.week-nav:hover {
	background: rgba(255,255,255,0.3);
	color: white;
}

.week-nav.prev { left: 20px; }
.week-nav.next { right: 20px; }

.week-title {
	font-size: 2rem;
	font-weight: 600;
	margin: 0;
}

.week-dates {
	font-size: 1.1rem;
	opacity: 0.9;
	margin-top: 5px;
}

.student-selector {
	background: white;
	padding: 15px;
	border-radius: 7px;
	margin-bottom: 20px;
	text-align: center;
}

.student-tabs {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.student-tab {
	padding: 10px 20px;
	background: #f8f9fa;
	border: 2px solid #dee2e6;
	border-radius: 25px;
	text-decoration: none;
	color: #495057;
	font-weight: 500;
	transition: all 0.3s;
}

.student-tab:hover {
	background: #e9ecef;
	color: #495057;
}

.student-tab.active {
	background: #8B4513;
	color: white;
	border-color: #8B4513;
}

.student-info {
	margin-top: 10px;
	color: #666;
}

.week-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: #ddd;
	border-radius: 7px;
	overflow: hidden;
}

.day-column {
	background: white;
	min-height: 400px;
	padding: 15px;
}

.day-header {
	text-align: center;
	border-bottom: 1px solid #ddd;
	margin: -15px -15px 15px -15px;
}

.assignment-item {
	background: #f8f9fa;
	border-radius: 7px;
	padding: 10px;
	margin-bottom: 10px;
	border-left: 4px solid;
	position: relative;
}

.assignment-subject {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 5px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.subject-icon {
	width: 20px;
	height: 20px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 0.7rem;
	font-weight: bold;
}
.class-header .subject-icon {
  font-size: 1.25rem;
  margin-right: 10px;
}

.assignment-title {
	font-weight: 500;
	margin-bottom: 5px;
	color: #333;
}

.assignment-type {
	display: inline-block;
	background: #e9ecef;
	color: #495057;
	padding: 2px 8px;
	border-radius: 7px;
	font-size: 0.7rem;
	text-transform: uppercase;
	font-weight: 500;
}

.assignment-type.homework { background: #d4edda; color: #155724; }
.assignment-type.test { background: #f8d7da; color: #721c24; }
.assignment-type.quiz { background: #fff3cd; color: #856404; }
.assignment-type.project { background: #d1ecf1; color: #0c5460; }
.assignment-type.reading { background: #e2e3e5; color: #383d41; }

.no-assignments {
	text-align: center;
	color: #666;
	font-style: italic;
	padding: 40px 20px;
}


/* FAMILIY GRID STYLES */


.family-stats {
  display: flex;
  gap: 15px;
  align-items: center;
}

.stat-badge {
  background: var(--light-green);
  color: var(--dark-green);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
}

.families-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.family-card {
  background: white;
  border-radius: 7px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.family-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.family-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.family-name {
  color: var(--dark-green);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.3rem;
  margin: 0;
  flex: 1;
}

.family-actions {
  margin-left: 10px;
}

.family-actions .btn-danger {
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
}

.family-parents {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.parent-info {
  font-size: 0.9rem;
  margin-bottom: 5px;
  color: #555;
}

.parent-info strong {
  color: var(--dark-green);
}

.family-students {
  margin-bottom: 15px;
}



.student-names {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.4;
}

.family-meta {
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.family-meta small {
  color: #999;
  font-size: 0.8rem;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.empty-state h3 {
  color: var(--dark-green);
  margin-bottom: 10px;
}

/* Family Details Page Styles */
.family-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.family-detail-card {
  background: white;
  padding: 25px;
  border-radius: 7px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  
}

.family-detail-card h3 {
  color: var(--dark-green);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.3rem;
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--cream);
}

.detail-field {
  margin-bottom: 15px;
  line-height: 1.5;
}

.detail-field strong {
  color: var(--dark-green);
  font-weight: 600;
  display: inline-block;
  min-width: 80px;
}

.detail-field a {
  color: var(--light-green);
  text-decoration: none;
}

.detail-field a:hover {
  color: var(--dark-green);
  text-decoration: underline;
}

.btn-map {
  background: #4285f4;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9rem;
  display: inline-block;
  margin-top: 5px;
}

.btn-map:hover {
  background: #3367d6;
  color: white;
}

/* Students Section */
.students-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 25px;
  margin-top: 20px;
}

.student-detail-card {
  background: white;
  padding: 25px;
  border-radius: 7px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-left: 4px solid var(--light-green);
}

.student-name {
  color: var(--dark-green);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.2rem;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.assignment-meta .student-name {
  color: var(--dark-green);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 14px;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  text-transform: capitalize;
}

.class-list {
  margin: 8px 0 0 20px;
  padding: 0;
}

.class-list li {
  margin-bottom: 5px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.class-list small {
  color: #666;
  font-style: italic;
}

.special-needs-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #555;
  margin: 8px 0;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 3px solid #ffc107;
}

.family-questions {
  border-left-color: var(--tan);
}

.family-answer {
  margin: 10px 0;
  line-height: 1.6;
  color: #555;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
  white-space: pre-wrap;
}

/* Student Dashboard Styling */
.student-welcome {
  background: linear-gradient(135deg, var(--dark-green), var(--light-green));
  color: white;
  padding: 2rem;
  border-radius: 7px;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.student-info h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.8rem;
}

.student-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
  opacity: 0.9;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.card {
  background: white;
  border-radius: 7px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 1px solid #e1e8ed;
  overflow: hidden;
}

.card-header {
  padding: 1.5rem;
  border-bottom: 1px solid #f1f3f4;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  color: var(--dark-green);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.3rem;
}

.card-body {
  padding: 1.5rem;
}

.progress-ring {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.progress-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: conic-gradient(var(--dark-green) 0deg, var(--dark-green) calc(var(--progress) * 3.6deg), #e9ecef calc(var(--progress) * 3.6deg), #e9ecef 360deg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.progress-circle::before {
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  position: absolute;
}

.progress-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dark-green);
  z-index: 1;
}

.assignment-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.assignment-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 7px;
  border-left: 4px solid var(--subject-color, var(--light-green));
  transition: all 0.2s;
  cursor: pointer;
}

.assignment-item:hover {
  background: #e9ecef;
  transform: translateX(4px);
}

.assignment-item.completed {
  opacity: 0.7;
  background: #d4edda;
}

.assignment-checkbox {
  width: 24px;
  height: 24px;
  border: 2px solid #dee2e6;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  flex-shrink: 0;
}

.assignment-checkbox.checked {
  background: var(--dark-green);
  border-color: var(--dark-green);
}

.assignment-checkbox.checked::after {
  content: '✓';
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.8rem;
  font-weight: bold;
}

.assignment-content {
  flex: 1;
}

.assignment-title {
  font-weight: 600;
  color: var(--dark-green);
  margin-bottom: 0.25rem;
}

.assignment-meta {
  font-size: 0.85rem;
  color: #666;
  display: flex;
  gap: 1rem;
}

.subject-badge {
  background: var(--subject-color, var(--light-green));
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 500;
}

.student-overview-card {
  background: white;
  border-radius: 5px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  border: 1px solid var(--gold);
}

.student-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.student-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-primary, #213b2d);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  font-family: 'Archivo', system-ui, sans-serif;
  overflow: hidden;
}
.student-name {
  margin: 0 0 0.5rem 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-primary, #213b2d);
  font-family: 'Archivo', system-ui, sans-serif;
}

.grade-badge {
  background: var(--gold);
  color: var(--dark-green);
  padding: 3px 15px;
  border-radius: 20px;
  font-weight: 500;
  font-size: 12px;
}
.student-info-header {
  flex: 1;
}

.house-badge {
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: #222;
  font-family: 'Instrument Serif', Georgia, serif;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.house-seal {
    width: 60px;
    height: 60px;
    margin-bottom: 5px;
    vertical-align: middle;
}

.house-augustine { background-color: #a22010; }
.house-aquinas { bbackground-color: #143648; }
.house-athanasius { background-color: #482c4e; }
.house-ambrose { background-color: #d89a00; }


.announcements-header {
  display: flex;
  justify-content: space-between;
}
.no-announcements-card {
  background: white;
  border-radius: 5px;
  padding: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-left: 4px solid var(--subject-color);
  transition: all 0.2s;
  cursor: pointer;
}

.announcements-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.announcement-item.unread {
    background: white;
    border-left: 5px solid var(--gold);
}

.announcement-item.read {
    background: #f5f5f5;
    border-left: 3px solid #ccc;
}

.announcement-item {
  padding: 1rem;
  
  background: #fff9e6;
  border-radius: 7px;
  margin-bottom: 1rem;
}

.announcement-title {
  font-weight: 600;
  color: var(--dark-green);
  margin-bottom: 0.5rem;
}

.announcement-content {
  font-size: 0.9rem;
  line-height: 1.5;
}

.announcement-date {
  font-size: 0.8rem;
  color: #666;
  margin-top: 0.5rem;
}

.event-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f1f3f4;
}

.event-date {
  background: var(--dark-green);
  color: white;
  padding: 0.5rem;
  border-radius: 7px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 60px;
}

.event-details {
  flex: 1;
}

.event-title {
  font-weight: 600;
  color: var(--dark-green);
  margin-bottom: 0.25rem;
}

.event-time {
  font-size: 0.85rem;
  color: #666;
}

.quick-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.quick-action {
  background: var(--light-green);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 7px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quick-action:hover {
  background: var(--dark-green);
  transform: translateY(-2px);
}

.empty-state {
  text-align: center;
  padding: 2rem;
  color: #666;
  font-style: italic;
}

/* Student Dashboard Styles */
.student-dashboard-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: white;
  padding: 2rem;
  border-radius: 7px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.student-info h2 {
  margin: 0 0 0.5rem 0;
  color: var(--dark-green);
}

.student-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.progress-ring {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

.progress-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: conic-gradient(var(--light-green) calc(var(--progress) * 1%), #f0f0f0 0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.progress-circle::before {
  content: '';
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: white;
  position: absolute;
}

.progress-text {
  position: relative;
  z-index: 1;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--dark-green);
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.quick-action {
  background: var(--light-green);
  color: var(--dark-green);
  padding: 1rem;
  border-radius: 7px;
  text-decoration: none;
  text-align: center;
  font-weight: 500;
  transition: transform 0.2s;
}

.quick-action:hover {
  transform: translateY(-2px);
  background: var(--dark-green);
  color: white;
}

.dashboard-grid {
  display: grid;
  gap: 2rem;
}

.assignment-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.assignment-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 3px solid var(--subject-color, var(--light-green));
}

.assignment-item:hover {
  background: #e9ecef;
  transform: translateX(4px);
}

.assignment-item.completed {
  opacity: 0.7;
  background: #e8f5e8;
}

.assignment-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.assignment-checkbox.checked {
  background: var(--light-green);
  border-color: var(--light-green);
}

.assignment-checkbox.checked::after {
  content: '✓';
  color: white;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.assignment-content {
  flex: 1;
}

.assignment-title {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.assignment-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: #666;
}

.subject-badge {
  padding: 0.2rem 0.5rem;
  border-radius: 7px;
  color: white;
  font-size: 0.7rem;
  font-weight: 500;
}

.empty-state {
  text-align: center;
  padding: 2rem;
  color: #666;
  font-style: italic;
}

.subject-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.subject-title i {
  font-size: 1.2rem;
}

.icon-picker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.icon-input {
  flex: 1;
}

.icon-preview {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
}

.icon-preview i {
  font-size: 1.2rem;
}

.color-picker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.color-input {
  width: 50px;
  height: 40px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.hex-input {
  width: 100px;
  font-family: monospace;
}
.icon-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.icon-browser {
  background: white;
  padding: 2rem;
  border-radius: 7px;
  max-width: 500px;
  max-height: 70vh;
  overflow-y: auto;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5rem;
  margin: 1rem 0;
}

.icon-option {
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.icon-option:hover {
  background: var(--light-green);
  border-color: var(--dark-green);
}

.icon-option i {
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .house-badge {
    font-size: 11px;
  }
  .house-seal {
      width: 40px;
      height: 40px;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  
  .student-welcome {
    flex-direction: column;
    text-align: center;
  }
  
  .student-meta {
    justify-content: center;
  }
  
  .quick-actions {
    flex-direction: column;
  }
}

/* Section Headers */
.section {
  margin: 40px 0;
}

.section h2 {
  color: var(--dark-green);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.8rem;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--gold);
}

@media (max-width: 768px) {
  .family-details-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .students-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .family-detail-card,
  .student-detail-card {
    padding: 20px;
  }
  
  .student-name {
    font-size: 1.1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .detail-field strong {
    min-width: auto;
    display: block;
    margin-bottom: 3px;
  }
}

@media (max-width: 480px) {
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .family-detail-card h3 {
    font-size: 1.1rem;
  }
  
  .section h2 {
    font-size: 1.5rem;
  }
}

/* Responsive Design */
@media (max-width: 1200px) {
  .families-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .families-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .family-card {
    padding: 15px;
  }
  
  .family-name {
    font-size: 1.1rem;
  }
  
  .family-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .families-grid {
    grid-template-columns: 1fr;
  }
}








@media (max-width: 768px) {
	.week-grid {
		grid-template-columns: 1fr;
	}
	.week-nav {
		position: static;
		display: inline-block;
		margin: 10px 5px 0 5px;
		transform: none;
	}
	.week-title { font-size: 1.5rem; }
	.student-tabs {
		flex-direction: column;
		align-items: center;
	}
}


/* Role Switcher */
.role-switcher select {
  background-color: var(--light-green);
  color: white;
  border: 1px solid var(--text-light);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 992px) {
  .nav-links {
	display: none;
  }
  
  .dashboard-main {
	padding: 20px;
  }
  
  .dashboard-sections {
	grid-template-columns: 1fr;
  }
  
  .stats-grid {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media (max-width: 768px) {
  .dashboard-nav {
	flex-wrap: wrap;
	gap: 15px;
    max-height: 75px;
  }
  .nav-brand img {
    height: 55px;
  }
  
  .dashboard-header {
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
  }
  
  .action-buttons {
	flex-direction: column;
  }
  
  .activity-item {
	flex-direction: column;
	align-items: flex-start;
  }
  
  .modal-content {
	margin: 10% auto;
	width: 95%;
  }
  
  .users-table,
  .students-table,
  .assignments-table {
	overflow-x: auto;
  }
}



/* NAV USER MENU */



.nav-user {
  position: relative;
}

.user-dropdown {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.user-dropdown:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-secondary, #e6c566);
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-avatar .initials {
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.user-info {
  display: flex;
  flex-direction: column;
  color: white;
}

.user-name {
  font-weight: 500;
  font-size: 14px;
}

.user-role {
  font-size: 12px;
}

.dropdown-arrow {
  color: white;
  font-size: 12px;
  transition: transform 0.2s;
}

.user-dropdown.active .dropdown-arrow {
  transform: rotate(180deg);
}

.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border-radius: 7px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  min-width: 280px;
  z-index: 1000;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.menu-header {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.menu-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-secondary, #e6c566);
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-avatar .initials {
  color: white;
  font-weight: 600;
  font-size: 18px;
}

.menu-user-info {
  flex: 1;
}

.menu-user-name {
  font-weight: 600;
  color: var(--color-primary, #213b2d);
  margin-bottom: 4px;
}

.menu-user-email {
  font-size: 12px;
  color: #666;
}

.menu-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 8px 0;
}

.menu-items {
  padding: 8px 0;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: var(--color-primary, #213b2d);
  text-decoration: none;
  transition: background-color 0.2s;
}

.menu-item:hover {
  background-color: #f8f9fa;
}

.menu-item.logout {
  color: #dc3545;
}

.menu-item.logout:hover {
  background-color: #fff5f5;
}

.menu-item i {
  width: 16px;
  text-align: center;
}

/* Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.hidden {
  display: none;
}

.gap-20 {
  gap: 20px;
}

.avatar-upload {
  text-align: center;
}

.current-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 20px;
  overflow: hidden;
  background: var(--color-secondary, #e6c566);
  display: flex;
  align-items: center;
  justify-content: center;
}

.current-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.current-avatar .initials {
  color: white;
  font-weight: 600;
  font-size: 36px;
}

#avatarInput {
  display: none;
}

.upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--color-secondary, #e6c566);
  color: white;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.upload-btn:hover {
  background: var(--color-primary, #213b2d);
}

.btn-primary, .btn-secondary, .btn-gold {
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.btn-primary {
  background: var(--color-primary, #213b2d);
  color: white;
}

.btn-secondary {
  background: #f8f9fa;
  color: var(--color-primary, #213b2d);
  border: 1px solid #dee2e6;
}

.role-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.role-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 2px solid #f0f0f0;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s;
}

.role-option:hover {
  border-color: var(--color-secondary, #e6c566);
}

.role-option.active {
  border-color: var(--color-primary, #213b2d);
  background: #f8f9fa;
}

.role-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-secondary, #e6c566);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.role-info {
  flex: 1;
}

.role-name {
  font-weight: 600;
  color: var(--color-primary, #213b2d);
}

.role-status {
  font-size: 12px;
  color: #666;
}

.grade-assignment-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.assignment-grading-header {
  margin-bottom: 2rem;
}

.back-navigation {
  margin-bottom: 1rem;
}

.assignment-context {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: white;
  border-radius: 7px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.assignment-icon {
  width: 48px;
  height: 48px;
  border-radius: 7px;
  background: var(--subject-color, #355946);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
}

.assignment-details h1 {
  margin: 0 0 0.5rem 0;
  color: #2d3748;
  font-size: 1.5rem;
}

.assignment-meta {
  color: #718096;
  font-size: 0.875rem;
}

.student-context {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 7px;
  border: 2px solid #e2e8f0;
}

/* .student-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dark-green);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 18px;
} */

.student-details h2 {
  margin: 0 0 0.25rem 0;
  color: #2d3748;
  font-size: 1.125rem;
}

.student-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.completion-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: white;
}

.completion-badge {
  background: #48bb78;
}

.completion-status {
    position: absolute;
    top: 5px;
    right: 10px;
}

.grading-content {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
}

.assignment-info-card, .grading-form-card, .feedback-history-card {
  background: white;
  border-radius: 7px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.assignment-info-card h3, .grading-form-card h3, .feedback-history-card h3 {
  margin: 0 0 1rem 0;
  color: #2d3748;
  font-size: 1.125rem;
}

.assignment-description, .assignment-due-date, .assignment-files {
  margin-bottom: 1.5rem;
}

.assignment-description h4, .assignment-due-date h4, .assignment-files h4 {
  margin: 0 0 0.5rem 0;
  color: #4a5568;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #f8fafc;
  border-radius: 7px;
}

.file-icon {
  color: #718096;
  font-size: 1.25rem;
}

.file-details {
  flex: 1;
}

.file-name {
  font-weight: 500;
  color: #2d3748;
}

.file-size {
  font-size: 0.75rem;
  color: #718096;
}

.grading-form-card {
  grid-column: 1 / -1;
}

.grading-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 600;
  color: #2d3748;
}

.form-group input, .form-group textarea {
  padding: 5px 10px;
  border: 2px solid #e2e8f0;
  border-radius: 7px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-group input:focus, .form-group textarea:focus {
  outline: none;
  border-color: #3182ce;
}

.form-hint {
  font-size: 0.875rem;
  color: #718096;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.feedback-history-card {
  grid-column: 1 / -1;
}

.feedback-item {
  padding: 1rem;
  background: #f8fafc;
  border-radius: 7px;
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.feedback-grade {
  font-weight: bold;
  color: #2d3748;
  font-size: 1.125rem;
}

.feedback-date {
  color: #718096;
  font-size: 0.875rem;
}

.feedback-text {
  color: #4a5568;
  line-height: 1.6;
}

.feedback-text.no-feedback {
  color: #a0aec0;
  font-style: italic;
  background-color: #efefef;
  border-radius: 5px;
}

@media (max-width: 768px) {
  .grading-content {
    grid-template-columns: 1fr;
  }
  
  .assignment-context {
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
  }
  
  .student-context {
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
  }
  
  .form-actions {
    flex-direction: column;
  }
}

.assignment-icon .fas { color: #ffffff; }

.nav-link-with-badge {
  position: relative;
  display: inline-block;
  padding: 2px 0 0;
  margin-top: 3px;
}

.notification-badge {
  position: absolute;
  top: 4px;
  right: -13px;
  background-color: var(--red);
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid white;
  min-width: 18px;
}

.notification-badge.hidden {
  display: none;
}
/* 
.notification-badge {
  background: #dc3545;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
} */

.notification-badge.feedback {
  background: #ff6b35;
}
.notification-badge:not(:empty) {
    display: flex !important;
}

.unread-badge {
  background-color: #ef4444;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid white;
  min-width: 18px;
}

/* Mobile Menu CSS - Add this to your dashboard.css */

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.mobile-menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.mobile-menu-toggle.active {
    background-color: var(--light-green);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile Menu Content */
.mobile-menu-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 90vw;
    height: 100%;
    background: var(--dark-green);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.mobile-menu-overlay.active .mobile-menu-content {
    transform: translateX(0);
}

/* Mobile Menu Header */
.mobile-menu-header {
    background: var(--dark-green);
    color: white;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-menu-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-secondary, #e6c566);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-user-avatar .initials {
    color: white;
    font-weight: 600;
    font-size: 18px;
}

.mobile-user-info {
    flex: 1;
}
@media (max-width: 992px) {
    .nav-links {
        display: none;
    }
    
    .user-dropdown {
        cursor: pointer;
    }
    
    .user-menu {
        display: none !important; /* Force hide desktop dropdown on mobile */
    }
  .user-info {
    display: none !important;
  }
}

.mobile-user-name {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
}

.mobile-user-role {
    font-size: 12px;
    opacity: 0.8;
}

.mobile-menu-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.mobile-menu-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Mobile Menu Navigation */
.mobile-menu-nav {
    padding: 20px 0;
}

.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid var(--light-green);
    transition: all 0.2s ease;
    position: relative;
}
.mobile-menu-nav .menu-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    color: var(--gold);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid var(--light-green);
    transition: all 0.2s ease;
    position: relative;
}

.mobile-menu-link:hover, .mobile-menu-nav .menu-item:hover {
    background-color: #f8f9fa;
    color: var(--dark-green);
}

.mobile-menu-link:active {
    background-color: #e9ecef;
    transform: scale(0.98);
}

.mobile-menu-link.logout {
    color: var(--red);
}

.mobile-menu-link.logout:hover {
    background-color: #fff5f5;
}

.mobile-menu-link i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.mobile-notification-badge {
    background: #dc3545;
    color: white;
    font-size: 12px;
    padding: 5px;
    border-radius: 7px;
    margin-left: auto;
    min-width: 22px;
    text-align: center;
    font-weight: 800;
    line-height: 12px;
}

.mobile-menu-divider {
    height: 1px;
    /* background: #f0f0f0; */
    margin: 10px 0;
}

/* Show mobile menu button and hide nav-links on smaller screens */
@media (max-width: 992px) {
    .nav-links {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
}

/* Additional responsive adjustments */
@media (max-width: 768px) {
    .dashboard-nav {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .nav-user {
        order: 3;
        flex-basis: 30%;
        justify-content: flex-end;
        margin-top: 15px;
    }

    
    .mobile-menu-content {
        width: 280px;
    }
}

@media (max-width: 480px) {
    .mobile-menu-content {
        width: 100%;
        max-width: 100vw;
    }
}
.add-class-form .form-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
input[type="radio"], input[type="checkbox"] {
  margin-right: 10px;
  width: 20px;
}

.search-section {
  background-color: white;
  border-radius: 5px;
  border: 1px solid var(--gold);
  width: 30%;
}
.search-section input {
    width: 100%;
    padding: 5px 10px;
    border-radius: 5px;
}
.student-checkbox-label {
  display: block; 
  padding: 0; 
  border: 0; 
  margin: 0; 
  border-radius: 4px; 
  cursor: pointer;
  font-size: 12px;
}
.add-house-form .form-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.house-section {
  margin-bottom: 0px;
}
.house-grid {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 5px;
  background-color: #fff;
}
.house-options {
  background-color: #fff;
}
.house-option {
  display: block;
  padding: 20px;
  border: 2px solid #eee;
  margin: 10px; 
  border-radius: 5px; 
  cursor: pointer; 
  transition: all 0.2s;
}
.login-header p {
    margin: 20px 0;
    line-height: 18px;
}
.login-form label {
    margin-bottom: 0;
}

.survey-section {
    border-top: 1px solid #eee;
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 5px;
    border: 1px solid #e9ecef;
}

.survey-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 8px 0;
  font-weight: 500;
}

.survey-header:hover {
  color: var(--dark-green);
}

.survey-count {
  font-size: 0.9rem;
  color: #666;
}

.survey-arrow {
  transition: transform 0.3s ease;
  color: #999;
}

.survey-arrow.rotated {
  transform: rotate(180deg);
}

.survey-responses {
  max-height: 300px;
  overflow-y: auto;
  padding: 10px 0;
}

.survey-item {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

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

.survey-question {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--dark-green);
  margin-bottom: 4px;
}

.survey-answer {
  font-size: 0.85rem;
  line-height: 1.4;
  color: #555;
}

.no-survey {
  color: #999;
  font-style: italic;
  text-align: center;
  padding: 15px;
}
.survey-actions {
    text-align: right;
    font-size: 12px;
    color: var(--light-green);
}
h2.announcements-header {
    margin-bottom: 20px;
}
table {
    width: 100%;
    text-align: left;
}
.announcements-table button.btn-small {
    margin: 5px 0;
}
.preview-actions {
  padding: 20px;
  border-top: 1px solid var(--gold);
  text-align: center;
}
.subject-due-date {
  font-size: 16px;
  font-weight: 700;
  color: var(--red);
}
.login-management {
  margin: 0 0 40px;
}
.login-management-user {
  font-weight: 800;
}
.login-management-username {
  color: var(--red);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-form input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
}

.login-form button {
  background: #355946;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
}

.login-form button:hover {
  background: #2a4737;
}

button.password-toggle {
    padding: 8px;
    font-size: 12px;
    background: white !important;
    color: var(--dark-green);
    border: 1px solid var(--dark-green) !important;
}

.avatar-management {
  background: #f8f9fa;
  border-radius: 7px;
  padding: 20px;
  margin: 0;
  border: 1px solid #e9ecef;
}

.avatar-upload-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.current-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #355946;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  margin-bottom: 10px;
}

.current-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-upload-form input[type="file"] {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.avatar-upload-form button {
  background: #355946;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
}

.avatar-upload-form button:hover {
  background: #2a4737;
}

.management-section {
  margin: 0 0 40px 0;
}

.management-section h5 {
  margin: 0 0 10px 0;
  color: #355946;
  font-size: 16px;
}

.status-indicator {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: bold;
}

.status-active {
  background: #d4edda;
  color: #155724;
  font-size: 11px;
  padding: 3px 15px;
  margin: 0 0 10px 0;
}

.status-inactive {
  background: #f8d7da;
  color: #721c24;
  font-size: 11px;
  /* padding: 3px 15px; */
  margin: 0 0 10px 0;
}

.message {
  padding: 10px 15px;
  border-radius: 4px;
  margin: 15px 0;
}

.message.success {
  background: #d4edda;
  color: var(--light-green);
  border: 1px solid #c3e6cb;
}

.message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
.login-management-status {
  display:flex;
  justify-content:space-between;
}
  .top-filter-bar {
  background: white;
  border-bottom: 2px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--shadow-academic);
}

.filter-input {
  border: 2px solid var(--color-border);
  border-radius: 7px;
  transition: all 0.3s ease;
  font-family: var(--font-body);
  background: white;
}

.filter-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(230, 197, 102, 0.1);
  outline: none;
}

.view-toggle {
  display: flex;
  border: 2px solid var(--color-border);
  border-radius: 7px;
  overflow: hidden;
}

.view-toggle button.active {
  background-color: var(--color-accent);
  color: var(--color-primary);
}
.top-filter-bar {
  background-color: var(--light-grey);
  border-bottom: 2px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--shadow-academic, 0 2px 8px rgba(33, 59, 45, 0.1));
  padding: 10px 0;
  border-radius: 5px;
}

.filter-input {
  border: 1px solid var(--gold);
  border-radius: 7px;
  transition: all 0.3s ease;
  font-family: var(--font-body);
  background: white;
  margin: 0 5px;
  padding: 7px;
}

.filter-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(230, 197, 102, 0.1);
  outline: none;
}

.view-toggle {
  display: flex;
  border: 2px solid var(--color-border);
  border-radius: 7px;
  overflow: hidden;
}

.view-toggle button {
  border: none;
  transition: all 0.3s ease;
  background: white;
  color: var(--dark-green);
}

.view-toggle button.active {
  background-color: var(--dark-green);
  color: white;
}

.btn-new-assignment {
  background-color: var(--color-accent);
  color: var(--color-primary);
  font-weight: 600;
  transition: all 0.3s ease;
  border-radius: 7px;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.btn-new-assignment:hover {
  background-color: var(--cream);
  color: black;
}
.role-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
}

.role-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.role-option:hover {
    background-color: #f8f9fa;
    border-color: #355946;
}

.role-option.active {
    background-color: #e8f5e8;
    border-color: #355946;
}

.role-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #355946;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.student-avatar {
    background: #e6c566;
    font-size: 14px;
    font-weight: 600;
}

.role-info {
    flex: 1;
}

.role-name {
    font-weight: 600;
    color: #355946;
    margin-bottom: 2px;
}

.role-status {
    font-size: 12px;
    color: #666;
}

.role-divider {
    margin: 16px 0 8px 0;
    text-align: center;
    position: relative;
}

.role-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #dee2e6;
}

.role-divider span {
    background: white;
    padding: 0 12px;
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.student-option .role-name {
    color: #212529;
}

.switch-back-option {
    justify-content: center;
    background-color: #fff3cd;
    border-color: #ffc107;
}

.switch-back-option:hover {
    background-color: #ffeaa7;
}

/* ===== SOURCE: css/dashboard-main.css ===== */
/* Unified Dashboard/Admin Stylesheet */
:root {
  --font-heading: 'Instrument Serif', Georgia, serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-body: 'Source Sans Pro', sans-serif;
  --color-primary: #213b2d;
  --color-secondary: #e6c566;
  --color-accent: #6bbf59;
  --color-error: #dc3545;
  --color-success: #28a745;
  --color-warning: #e6c566;
  --color-border: #e1e8ed;
  --color-background: #f8f5ee;
  --border-radius: 4px;
  --border-radius-lg: 8px;
  --border-radius-full: 20px;
}

body, html {
  font-family: var(--font-body);
  background: var(--color-background);
  color: var(--color-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-primary);
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--border-radius);
  padding: 12px 24px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  transition: all 0.3s;
}
.btn-primary:hover {
  background: var(--color-accent);
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius);
  padding: 10px 22px;
  font-weight: 600;
  transition: all 0.3s;
}
.btn-secondary:hover {
  background: var(--color-secondary);
  color: #fff;
}

.btn-danger {
  background: var(--color-error);
  color: #fff;
  border: none;
  border-radius: var(--border-radius);
  padding: 10px 22px;
  font-weight: 600;
  transition: all 0.3s;
}
.btn-danger:hover {
  background: #a0522d;
}

.card, .section, .dashboard-main, .student-card, .family-card {
  /* background: #fff;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); */
  padding: 30px;
}

input, select, textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 16px;
  color: var(--color-primary);
  background: #fff;
  transition: border-color 0.3s, box-shadow 0.3s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(230, 197, 102, 0.25);
  outline: none;
}

label {
  font-weight: 500;
  color: var(--color-primary);
  font-family: var(--font-body);
}

.table, table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
th, td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
th {
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-secondary);
}

.success-message {
  background: rgba(40, 167, 69, 0.1);
  border-left: 4px solid var(--color-success);
  color: #155724;
  padding: 20px;
  border-radius: var(--border-radius);
  margin-bottom: 20px;
}

.error-message {
  background: rgba(220, 53, 69, 0.1);
  border-left: 4px solid var(--color-error);
  color: #721c24;
  padding: 20px;
  border-radius: var(--border-radius);
  margin-bottom: 20px;
}

/* Add more as needed for modals, badges, etc. */ 

/* ===== SOURCE: css/student-dashboard.css ===== */
/* Student Dashboard Styles */

.student-dashboard {
	max-width: var(--portal-content-max);
	margin: 0 auto;
	font-family: 'Archivo', sans-serif;
}

/* Header Section */
.dashboard-header-section {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20px;
	position: relative;
}

.welcome-section h1 {
	font-family: 'Instrument Serif', Georgia, serif;
	font-size: 36px;
	font-weight: 400;
	color: black;
	margin: 0;
	letter-spacing: -1px;
}
.student-dashboard h2 {
	font-family: 'Archivo', sans-serif;
	font-size: 24px;
	font-weight: 400;
	color: var(--dark-green);
	margin: 0;
	letter-spacing: -1px;
}

.date-grade-section {
	text-align: right;
	margin: 5px 0 0;
}

.today-date {
	font-size: 12px;
	color: #000;
	margin-bottom: 0.25rem;
	font-family: 'Archivo', sans-serif;
	font-weight: 500;
}

.student-grade {
	font-size: 12px;
	color: var(--dark-green);
	font-weight: 500;
	background: white;
	padding: 2px 7px;
	border-radius: 5px;
	display: inline-block;
	font-family: 'Archivo', sans-serif;
}



/* Main Dashboard Grid */
.dashboard-grid {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 2rem;
}

.left-column,
.right-column {
	display: flex;
	flex-direction: column;
	gap: 10px;
}


/* Section Headers (outside cards) */

.section-header {
	font-family: 'Archivo', sans-serif;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--dark-green);
	margin-bottom: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.section-header .view-all-link {
	font-size: 0.9rem;
	color: var(--dark-green);
	text-decoration: none;
	font-weight: 500;
}

.section-header .view-all-link:hover {
	color: var(--gold);
}

/* Dashboard Cards */

.dashboard-card {
	background: white;
	border-radius: 5px;
	padding: 15px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	border: 1px solid #f0f0f0;
	margin-bottom: 30px;
}

/* Announcements */
.announcements-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.announcement-item {
	padding: 1rem;
	background: #f8f9fa;
	border-radius: 5px;
	border-left: 3px solid var(--gold);
	cursor: pointer;
	transition: all 0.2s;
}

.announcement-title {
	font-weight: 600;
	color: var(--dark-green);
	margin-bottom: 0.25rem;
	font-family: 'Archivo', sans-serif;
}

.announcement-meta {
	font-size: 0.8rem;
	color: #666;
	margin-bottom: 0.5rem;
	font-family: 'Archivo', sans-serif;
}

.announcement-preview {
	font-size: 0.9rem;
	color: #555;
	line-height: 1.4;
	font-family: 'Archivo', sans-serif;
}

/* Today's Assignments */
.assignments-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.assignment-checkbox-wrapper {
	flex-shrink: 0;
}

.assignment-icon {
	font-size: 1.2rem;
	flex-shrink: 0;
}

.assignment-content {
	flex: 1;
}

.assignment-subject {
	font-size: 11px;
	color: var(--subject-color);
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
}

/* Upcoming Projects Table */
.projects-table {
	width: 100%;
	border-collapse: collapse;
}

.projects-table th {
	background: var(--dark-green);
	color: white;
	padding: 0.75rem;
	text-align: left;
	font-weight: 500;
	font-family: 'Archivo', sans-serif;
}

.projects-table th:first-child {
	border-radius: 7px 0 0 0;
}

.projects-table th:last-child {
	border-radius: 0 8px 0 0;
}

.projects-table td {
	padding: 1rem 0.75rem;
	border-bottom: 1px solid #f0f0f0;
	font-family: 'Archivo', sans-serif;
}

.projects-table tr:hover {
	background: #f8f9fa;
}

.project-icon {
	font-size: 1.1rem;
	margin-right: 0.5rem;
}

/* My Subjects */
.subjects-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.subject-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 10px 20px;
	background-color: #fff;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.2s;
	border-left: 4px solid;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.subject-item:last-child {
	margin-bottom: 30px;
}

.subject-item:hover {
	background: var(--subject-color);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.subject-item:hover .subject-icon,
.subject-item:hover .subject-name,
.subject-item:hover .student-count,
.subject-item:hover .subject-teacher {
	color: white !important;
}

.subject-item .subject-icon {
	font-size: 1.5rem;
	color: var(--subject-color, #355946);
}

.subject-details {
	flex: 1;
}

.subject-name {
	font-size: 16px;
	font-weight: 600;
	color: black;
	font-family: 'Archivo', sans-serif;
}

.subject-teacher {
	font-size: 0.85rem;
	color: #666;
	font-family: 'Archivo', sans-serif;
}

.class-name {
	font-size: 21px;
	line-height: 24px;
	font-weight: 500;
	color: black;
	font-family: 'Instrument Serif', Georgia, serif;
}
.class-count {
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: -0.25px;
	line-height: 18px;
	color: var(--light-green);
}
.class-detail-header {
	display: flex;
	gap: 20px;
	align-items: start;
}

.assignment-detail-meta {
	gap: 20px;
}
.need-grading {
	background: var(--red);
	padding: 2px 15px;
	border-radius: 30px;
	color: white;
	font-size: 12px;
	font-weight: 600;
}
.title-padding-top {
	margin-top: 40px;
}

/* Recent Grades & Feedback */
.feedback-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.feedback-section {
	background: white;
	border-radius: 5px;
	padding: 2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.feedback-item {
	padding: 1.5rem;
	background: #f8f9fa;
	border-radius: 5px;
	border-left: 4px solid var(--subject-color);
}

.feedback-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.feedback-item {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 5px 15px;
	background: none;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.2s;
	position: relative;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	border-radius: 5px;
	border: 1px solid var(--light-grey);
}

.feedback-item:hover {
	transform: translateX(2px);
}

.feedback-item.unread {
	background-color: #e3f2fd;
	border: 0.5px solid var(--blue);
	border-left: 4px solid var(--blue);
}

.feedback-icon {
	font-size: 22px;
	flex-shrink: 0;
}

.feedback-content {
	flex: 1;
}
.feedback-card {
	background-color: #fafafa;
}

.feedback-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid #f1f3f4;
}


.feedback-assignment {
	font-weight: 500;
	color: var(--dark-green);
	margin-bottom: 0.25rem;
	font-family: 'Archivo', sans-serif;
}

.feedback-meta {
	font-size: 0.8rem;
	color: #666;
	display: flex;
	gap: 0.75rem;
	font-family: 'Archivo', sans-serif;
}

.grade {
	color: var(--dark-green);
	font-weight: 500;
}

.unread-indicator {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 8px;
	height: 8px;
	background: #007bff;
	border-radius: 50%;
}

/* My Classmates */
.classmates-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.classmate-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.classmate-avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--light-green);
	color: var(--gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 1rem;
	margin-bottom: 0.5rem;
	font-family: 'Archivo', sans-serif;
	overflow: hidden;
}

.classmate-name {
	font-size: 15px;
	color: var(--dark-green);
	font-weight: 500;
	font-family: 'Archivo', sans-serif;
	font-family: 'Archivo', sans-serif;
}

.classmate-grade {
	font-size: 11px;
	font-weight: 500;
	color: var(--light-green)
}




/* Classes Page Styling */


.student-header {
	background: linear-gradient(135deg, var(--dark-green), var(--light-green));
	color: white;
	padding: 2rem;
	border-radius: 5px;
	margin-bottom: 2rem;
	text-align: center;
}

.student-header h1 {
	margin: 0 0 0.5rem 0;
	font-size: 2rem;
	font-family: 'Instrument Serif', Georgia, serif;
}

.student-info {
	font-size: 1.1rem;
	opacity: 0.9;
	display: flex;
	justify-content: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.student-count {
  font-weight: 400;
  color: #000;
  font-size: 11px;
  text-transform: uppercase;
}

.classes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 2rem;
	margin-top: 20px;
	margin-bottom: 2rem;
}

.class-card {
	background: var(--light-grey);
	border-radius: 5px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	border: 1px solid #e1e8ed;
	overflow: hidden;
	transition: all 0.3s;
	/* border-left: 3px solid var(--subject-color); */
}

.class-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.class-header {
	background: linear-gradient(135deg, var(--subject-color), var(--subject-color-dark, var(--subject-color)));
	color: white;
	padding: 10px 25px;
	position: relative;
	display: flex;
	align-items: center;
}
.class-meta {
	margin-left: auto;
}

.class-header::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.1);
	pointer-events: none;
}

.class-title {
	font-size: 21px;
	font-weight: 400;
	color: white;
	margin: 0;
	position: relative;
	z-index: 1;
}

.class-meta {
	font-size: 0.9rem;
	opacity: 0.9;
	display: flex;
	gap: 1rem;
	position: relative;
	z-index: 1;
}

.class-body {
	padding: 1.5rem;
	background-color: var(--light-grey);
	display: flex;
	flex-direction: column;
	min-height: 300px;
}

.latest-assignment {
	margin-bottom: 20px;
	/* padding-bottom: 1.5rem;
	border-bottom: 1px solid #f1f3f4; */
}

.latest-assignment h4 {
	color: var(--dark-green);
	margin: 0 0 5px 0;
	font-size: 12px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-transform: uppercase;
	font-family: 'Archivo', sans-serif;
	border: 0;
}

.assignment-preview {
	background-color: white;
	padding: 1rem;
	border-radius: 5px;
	border: 0.5px solid var(--subject-color);
	border-left: 4px solid var(--subject-color);
	cursor: pointer;
	transition: all 0.2s;
}

.assignment-preview:hover {
	background: #e9ecef;
}

.assignment-preview-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 5px;
}

.assignment-preview-title {
	font-weight: 600;
	color: #000;
	line-height: 21px;
	font-size: 21px;
	padding-right: 2rem;
	font-family: 'Archivo', sans-serif;
}

.assignment-status {
	padding: 0px 10px;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	min-width: 80px;
}

.status-completed {
	background: #d4edda;
	color: #155724;
}

.status-pending {
	background: #fff3cd;
	color: #856404;
}

.assignment-preview-meta {
	font-size: 0.85rem;
	color: #666;
	display: flex;
	gap: 1rem;
}

.projects-section {
	margin-top: 1rem;
}

.projects-section h4 {
	color: var(--dark-green);
	margin: 0 0 5px 0;
	font-size: 12px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-transform: uppercase;
	font-family: 'Archivo', sans-serif;
	border: 0;
}

.project-alert {
	/* background: linear-gradient(135deg, #ff6b6b, #ee5a24); */
	background-color: white;
	color: black;
	padding: 5px 25px;
	border-radius: 5px;
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border: 1px solid var(--red);
}

.project-alert-icon {
	font-size: 1.2rem;
}

.project-alert-text {
	flex: 1;
}

.project-alert-title {
	font-weight: 600;
	margin-bottom: 0;
}

.project-alert-meta {
	font-size: 0.9rem;
	opacity: 0.9;
}

.no-projects {
	color: #666;
	font-style: italic;
	text-align: center;
	padding: 1rem;
	font-size: 14px;
}

.teacher-contact {
	background: #f8f9fa;
	padding: 1rem;
	border-radius: 5px;
	text-align: center;
	margin-top: 20px;
}

.teacher-contact h5 {
	margin: 0 0 0.5rem 0;
	color: var(--dark-green);
}

.teacher-email {
	color: var(--subject-color);
	text-decoration: none;
	font-weight: 500;
}

.teacher-email:hover {
	text-decoration: underline;
}

.teacher-students {
	padding: 10px 20px;
}

.no-assignment {
	color: #666;
	font-style: italic;
	text-align: center;
	padding: 1rem;
}

.upcoming-projects-card {
	background: #f8f9fa;
	border-radius: 5px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	border: 1px solid #e1e8ed;
	padding: 20px;
	margin: 20px 0;
}

.upcoming-projects-card h2 {
	color: black;
	margin: 0 0 1.5rem 0;
	font-family: 'Archivo', sans-serif;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.projects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1rem;
}

.project-card {
	background: #fff3cd;
	border: 1px solid #ffeaa7;
	border-radius: 5px;
	padding: 1.5rem;
	border-left: 6px solid #f39c12;
}

.project-urgency-high {
	background: white;
	border-color: #ffb3b3;
	border-left-color: #e74c3c;
	display: flex;
	gap: 20px;
	padding: 8px 25px;
	align-items: center;
	cursor: pointer;
}

.project-urgency-medium {
	background: #fff8e6;
	border-color: #ffe066;
	border-left-color: #f39c12;
	display: flex;
	gap: 20px;
	cursor: pointer;
}

.project-title {
	font-weight: 600;
	color: #333;
	margin-bottom: 0.5rem;
}

.project-urgency-high .project-title {
	font-weight: 600;
	color: #000;
	margin-bottom: 0;
	font-size: 18px;
}

.project-meta {
	font-size: 0.9rem;
	color: #666;
	margin-bottom: 1rem;
}

.project-due {
	font-weight: 600;
	color: #d63031;
}

.quick-actions {
	display: flex;
	gap: 1rem;
	margin-bottom: 2rem;
	justify-content: center;
}

.quick-action {
	background: var(--light-green);
	color: white;
	padding: 0.75rem 1.5rem;
	border-radius: 5px;
	text-decoration: none;
	font-weight: 500;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.quick-action:hover {
	background: var(--dark-green);
	transform: translateY(-2px);
}

@media (max-width: 768px) {
	.classes-grid {
		grid-template-columns: 1fr;
	}
	
	.projects-grid {
		grid-template-columns: 1fr;
	}
	
	.student-info {
		flex-direction: column;
		gap: 0.5rem;
	}
	
	.quick-actions {
		flex-direction: column;
	}
}

.assignment-detail {
	max-width: 100%;
	margin: 0 auto;
	padding: 10px;
}

.assignment-header {
	background: #fafafa;
	border-radius: 7px;
	padding: 28px 32px;
	margin-bottom: 2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	border-width: 1px 1px 1px 6px;
	border-style: solid;
	border-color: #e5e7eb #e5e7eb #e5e7eb var(--subject-color);
}

.assignment-meta-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(145px, 1fr));
	gap: 1rem;
	margin-top: 24px;
}

.meta-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.meta-label {
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--red);
	letter-spacing: 0.5px;
}

.meta-value {
	font-size: 16px;
	color: var(--dark-green);
	font-weight: 600;
	text-transform: capitalize;
}
.assignment-meta-grid .meta-value {
	white-space: nowrap;
}
.meta-value.assignment-description {
	white-space: normal;
}

.completion-toggle {
	display: flex;
	align-items: center;
	gap: .65rem;
	justify-self: end;
	align-self: start;
	padding: .75rem .9rem;
	background: #fff;
	border: 1px solid rgba(33, 59, 45, .12);
	border-radius: 7px;
	color: var(--dark-green);
	font-weight: 700;
	min-width: 155px;
}

.header-right {
	text-align: center;
	width: auto;
	position: absolute;
	top: 0;
	right: 0;
}

.completion-circle {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: conic-gradient(var(--light-green) 0deg, var(--dark-green) calc(var(--progress) * 3.6deg), var(--cream) calc(var(--progress) * 3.6deg), var(--gold) 360deg);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 0 auto 0.5rem;
}

.completion-circle::before {
	content: '';
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: white;
	position: absolute;
}

.completion-text {
	font-size: 0.9rem;
	font-weight: 600;
	z-index: 1;
}
.completion-subtext {
	display: block;
	font-size: 0.8rem;
	opacity: 0.9;
}

.assignment-header-title {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem;
	margin: 0;
	align-items: start;
}
.assignment-title-group {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	min-width: 0;
}
.assignment-title-icon {
	font-size: 1.75rem;
	line-height: 1;
}

.completed-on {
	font-size: 11px;
	color: #222;
}

.completion-checkbox {
	width: 24px;
	height: 24px;
	border: 1px solid var(--light-green);
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.2s;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.completion-checkbox.checked {
	background: var(--dark-green);
	border-color: var(--dark-green);
}

.completion-checkbox.checked::after {
	content: '✓';
	color: white;
	font-size: 0.9rem;
	font-weight: bold;
}

.complete-checkbox {
	width: 24px;
	height: 24px;
	border: 1px solid var(--light-green);
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.2s;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto !important;
}

.complete-checkbox.checked {
	background: var(--dark-green);
	border-color: var(--dark-green);
}

.complete-checkbox.checked::after {
	content: '✓';
	color: white;
	font-size: 0.9rem;
	font-weight: bold;
}


/* .grade-badge {
	background: var(--dark-green);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 20px;
	font-weight: 600;
} */

.feedback-text {
	line-height: 1.6;
	color: #333;
}

.action-buttons {
	display: flex;
	gap: 1rem;
	margin-top: 2rem;
}

.btn {
	padding: 0.75rem 1.5rem;
	border-radius: 5px;
	text-decoration: none;
	font-weight: 500;
	transition: all 0.2s;
	border: none;
	cursor: pointer;
}

.btn-primary {
	background: var(--dark-green);
	color: white;
}

.btn-primary:hover {
	background: var(--light-green);
	transform: translateY(-2px);
}

.btn-gold {
	background: var(--gold);
	color: black;
}

.btn-gold:hover {
	background: var(--cream);
	transform: translateY(-2px);
}

.subject-assignments {
	max-width: 100%;
	margin: 0 auto;
}

.subject-header {
	background: white;
	border-radius: 5px;
	padding: 2rem;
	margin-bottom: 2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	border-left: 6px solid var(--subject-color);
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.subject-icon-large {
	width: 60px;
	height: 60px;
	border-radius: 5px;
	background: var(--subject-color);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
}

.teacher-actions {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
}

.filter-tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.filter-tab {
	padding: 5px 15px;
	background: white;
	border: 1px solid #dee2e6;
	border-radius: 5px;
	text-decoration: none;
	color: var(--dark-green);
	font-weight: 500;
	transition: all 0.2s;
	font-size: 12px;
}

.filter-tab.active {
	background: var(--dark-green);
	color: white;
	border-color: var(--dark-green);
}

.filter-tab:hover {
	background: var(--cream);
	color: var(--dark-green);
	border-color: var(--light-green);
}

.assignments-grid {
	display: grid;
	gap: 1rem;
}

.teacher-assignment-date {
	margin: 10px 0;
}

.assignment-card {
	background: white;
	border-radius: 5px;
	padding: 15px 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	border-left: 4px solid var(--subject-color);
	transition: all 0.2s;
	cursor: pointer;
	font-size: 13px;
	line-height: 18px;
	word-break: break-all;
}

.assignment-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.assignment-card.completed {
	opacity: 0.8;
	background: #f8f9fa;
}

.assignment-card.overdue {
	border-left-color: #dc3545;
}

.assignment-card-header {
	display: flex;
	justify-content: between;
	align-items: flex-start;
	margin-bottom: 1rem;
}



.survey-card {
	background: white;
	border-radius: 5px;
	padding: 1.5rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	border-left: 4px solid var(--subject-color);
	transition: all 0.2s;
	cursor: pointer;
}

.survey-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.survey-card-header {
	display: flex;
	justify-content: between;
	align-items: flex-start;
	margin-bottom: 1rem;
}



.status-badge {
	padding: 0.25rem 0.75rem;
	border-radius: 5px;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
}

.status-badge.completed {
	background: #d4edda;
	color: #155724;
}

.status-badge.overdue {
	background: #f8d7da;
	color: #721c24;
}

.status-badge.upcoming {
	background: #fff3cd;
	color: #856404;
}

.completion-checkbox-small {
	width: 20px;
	height: 20px;
	border: 1px solid var(--light-green);
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.2s;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
}

.completion-checkbox-small.checked {
	background: var(--dark-green);
	border-color: var(--dark-green);
}

.completion-checkbox-small.checked::after {
	content: '✓';
	color: white;
	font-size: 0.7rem;
	font-weight: bold;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.stat-card {
	background: white;
	border-radius: 5px;
	padding: 8px 15px;
	text-align: center;
}

.stat-number {
	font-size: 24px;
	font-weight: 600;
	color: var(--dark-green);
	line-height: 27px;
}

.stat-label {
	font-size: 0.8rem;
	color: #666;
	margin-top: 0.25rem;
}

.assignments-view {
	max-width: var(--portal-content-max);
	margin: 0 auto;
	position: relative;
}

.view-header {
	/* background: linear-gradient(135deg, var(--dark-green), var(--light-green)); */
	color: black;
	padding: 5px;
	border-radius: 5px;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header-left {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.header-center {
	text-align: center;
	flex: 1;
}

.view-title {
  color: var(--dark-green);
  font-family: 'Archivo', sans-serif;
  font-size: 30px;
  line-height: 30px;
  letter-spacing: -0.5px;
  font-weight: 400;
  margin: 0;
}




.dashboard-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.dashboard-card-header-item {
}
.dashboard-main h3 {
	line-height: 20px;
	font-family: 'Archivo', sans-serif;
}


.assignment-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 5px;
	border-left: 4px solid var(--subject-color);
	transition: all 0.2s;
	cursor: pointer;
}

.assignment-item:hover {
	background: #e9ecef;
	transform: translateX(4px);
}

.assignment-item.completed {
	background: #d4edda;
	opacity: 0.8;
}

.grading-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 5px;
	border-left: 4px solid var(--subject-color);
	transition: all 0.2s;
	cursor: pointer;
}

.grading-item:hover {
	background: #e9ecef;
	transform: translateX(4px);
}

.grading-item.completed {
	background: #d4edda;
	opacity: 0.8;
}

.assignment-checkbox {
	width: 24px;
	height: 24px;
	border: 1px solid var(--light-green);
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.2s;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.assignment-checkbox.checked {
	background: var(--dark-green);
	border-color: var(--dark-green);
}

.assignment-checkbox.checked::after {
	content: '✓';
	color: white;
	font-size: 0.8rem;
	font-weight: bold;
}

.assignment-icon {
	font-size: 1.2rem;
	color: var(--subject-color);
}

.assignment-content {
	flex: 1;
}

.assignment-title {
	font-weight: 600;
	margin-bottom: 0.25rem;
	color: var(--dark-green);
	font-family: 'Archivo', sans-serif;
	font-size: 21px;
}
.assignment-title-row {
	font-size: 16px;
	text-transform: capitalize !important;
	font-weight: 500 !important;
	margin-bottom: 0;
}

.assignment-type-home {
	background-color: var(--gold);
	text-transform: capitalize;
	padding: 1px 5px;
	word-break: keep-all;
	font-weight: 700;
	font-size: 10px;
	color: #000;
	max-height: 22px;
	min-width: 52px;
}
.assignment-type-class {
	background-color: var(--light-green);
	text-transform: capitalize;
	padding: 1px 5px;
	word-break: keep-all;
	font-weight: 700;
	font-size: 10px;
	max-height: 22px;
	min-width: 48px;
}
.assignment-type-project {
	background-color: var(--red);
	text-transform: capitalize;
	padding: 1px 5px;
	word-break: keep-all;
	font-weight: 700;
	font-size: 10px;
	max-height: 22px;
}
.assignment-type-draft {
	background-color: var(--cream);
	text-transform: capitalize;
	padding: 1px 5px;
	word-break: keep-all;
	font-weight: 700;
	font-size: 10px;
	max-height: 22px;
	color: var(--text-dark);
}
.assignment-type-published {
	background-color: var(--text-dark);
	text-transform: capitalize;
	padding: 1px 5px;
	word-break: keep-all;
	font-weight: 700;
	font-size: 10px;
	max-height: 22px;
	color: var(--cream);
}
.filter-all {
	background-color: black;
	color: white;
}
.filter-published  {
	background-color: var(--light-green);
	color: var(--cream);
}
.filter-draft {
	background-color: var(--cream);
	color: black;
}
.filter-home {
	background-color: var(--gold);
	color: black;
}
.filter-project {
	background-color: var(--red);
	color: white;
}
.filter-draft {
	background-color: var(--cream);
	color: var(--text-dark);
}

.assignment-meta {
	font-size: 0.8rem;
	color: var(--light-green);
	text-transform: uppercase;
	display: flex;
	gap: 1rem;
	font-weight: 600;
}
.assignment-card-compact .assignment-meta {
	font-size: 13px;
	color: #222;
	text-transform: capitalize;
	display: flex;
	gap: 1rem;
	font-weight: 500;
}
.teacher-assignment-due-date {
	font-size: 13px;
	font-weight: 500;
	color: var(--red);
}
.teacher-assignments-grid-header > :last-child {
	margin-left: auto;
	gap: 5px;
}
.teacher-assignments-grid-title {
	margin-bottom: 0;
	font-size: 18px;
	letter-spacing: -0.5px;
	font-weight: 500;
	word-break: break-word;
}

.teacher-assignments-grid-header {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 10px;
}

.teacher-assignment-actions > :last-child {
	margin-left: auto;
}

.teacher-assignment-actions {
	display: flex;
	gap: 10px;
	padding-top: 10px;
	border-top: 1px dotted var(--gold);
}

h4.assignment-title-compact {
	font-size: 17px;
	text-transform: capitalize;
	margin: 0;
	border: 0;
	line-height: 17px;
	padding: 0;
	font-weight: 600;
}

/* Week View */
.week-grid {
	display: grid; 
	grid-template-columns: repeat(5, 1fr);
	gap: 1rem;
	background: white;
	border-radius: 5px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	overflow: hidden;
}

.day-column {
	min-height: 400px;
	padding: 0;
	background: white;
	border-right: 1px solid #ddd;
}

.day-column:last-child {
	border-right: none;
}

.day-header {
	text-align: center;
	padding: 10px;
	background: white;
	color: black;
	position: sticky;
	top: 0;
	z-index: 10;
}

.day-number {
	font-size: 1.5rem;
	margin-bottom: 0.25rem;
	color: #000;
	line-height: 21px;
}

.day-name {
	font-size: 0.9rem;
	opacity: 0.9;
}

.day-content {
	padding: 1rem;
}

.day-assignment {
	background: #f8f9fa;
	border-radius: 5px;
	padding: 1rem;
	margin-bottom: 1rem;
	border-left: 4px solid var(--subject-color);
	position: relative;
	transition: all 0.2s;
	cursor: pointer;
}

.day-assignment:hover {
	background: #e9ecef;
	transform: translateX(4px);
}

.day-assignment.completed {
	background: #d4edda;
	opacity: 0.8;
}

.day-assignment-checkbox {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 20px;
	height: 20px;
	border: 1px solid var(--light-green);
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s;
	background: white;
}

.day-assignment-checkbox.checked {
	background: var(--dark-green);
	border-color: var(--dark-green);
}

.day-assignment-checkbox.checked::after {
	content: '✓';
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 0.7rem;
	font-weight: bold;
}

.day-assignment-subject {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 0;
	color: var(--subject-color);
}

/* Month View */
.month-grid {
	background: white;
	border-radius: 5px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	overflow: hidden;
}

.month-body {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.month-day {
	min-height: 120px;
	padding: 0.5rem;
	border-right: 1px solid #f1f3f4;
	border-bottom: 1px solid #f1f3f4;
	position: relative;
}

.month-day:last-child {
	border-right: none;
}


.month-day.today {
	background: #fff3cd;
}

.month-day-number {
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var(--dark-green);
}

.month-assignment {
	background-color: white; 
	color: var(--dark-green);
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	font-size: 0.7rem;
	margin-bottom: 0.25rem;
	cursor: pointer;
	transition: all 0.2s;
}

.month-assignment:hover {
	transform: scale(1.02);
}

.no-assignments {
	text-align: center;
	color: #999;
	font-style: italic;
	padding: 2rem 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

/* Today indicator */
.day-column.today .day-header {
	background: var(--gold);
	color: black;
}

.day-column.today .day-number {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;
	margin: 0 auto;
}

.feedback-detail {
	max-width: 800px;
	margin: 0 auto;
	padding: 2rem;
}

.feedback-header {
	background: white;
	border-radius: 5px;
	padding: 2rem;
	margin-bottom: 2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	border-left: 6px solid var(--subject-color);
}

.assignment-info {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.assignment-icon {
	font-size: 1.5rem;
	color: var(--subject-color);
}

.assignment-details h1 {
	margin: 0;
	font-family: 'Instrument Serif', Georgia, serif;
	color: var(--dark-green);
}
.assignment-detail h1 {
	font-size: 24px;
	margin: 0;
	line-height: 30px;
	font-weight: 600;
	color: black;
	font-family: 'Archivo', sans-serif;
}
.assignment-detail-subject {
	font-size: 14px;
	font-weight: 500;
	color: #777;
}


.teacher-info {
	/* display: flex; */
	align-items: center;
	gap: 1rem;
}

.teacher-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--light-green);
	color: var(--dark-green);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 1.1rem;
}

.teacher-details h3 {
	margin: 0;
	color: var(--dark-green);
	font-family: 'Archivo', sans-serif;
}

.feedback-date {
	color: #666;
	font-size: 0.9rem;
	margin-top: 0.25rem;
}

/* .grade-badge {
	background: var(--dark-green);
	color: white;
	padding: 0.75rem 1.5rem;
	border-radius: 25px;
	font-weight: 600;
	font-size: 1.1rem;
} */

.feedback-text {
	line-height: 1.7;
	color: #333;
	font-size: 1rem;
}

.assignment-context {
	background: #f8f9fa;
	border-radius: 5px;
	padding: 1.5rem;
	margin-bottom: 2rem;
}

.assignment-context h3 {
	margin-top: 0;
	color: var(--dark-green);
	font-family: 'Archivo', sans-serif;
}

.action-buttons {
	display: flex;
	gap: 1rem;
	margin-top: 2rem;
}

.btn {
	padding: 0.75rem 1.5rem;
	border-radius: 5px;
	text-decoration: none;
	font-weight: 500;
	transition: all 0.2s;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.btn-secondary {
	background: var(--gold);
	color: #222;
	border: 1px solid #222;
	padding: 7px 15px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 4px;
}

.btn-secondary:hover {
	background: var(--cream);
	color: var(--dark-green);
}

.feedback-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.stat-item {
	background: white;
	padding: 1rem;
	border-radius: 5px;
	text-align: center;
	box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.stat-value {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--dark-green);
}

.stat-label {
	font-size: 0.8rem;
	color: #666;
	margin-top: 0.25rem;
}

.assignment-detail-header {
	margin-bottom: 20px;
}

/* Empty States */
.empty-state {
	text-align: center;
	padding: 10px;
	color: #666;
	font-style: italic;
	font-family: 'Archivo', sans-serif;
}

.notifications-section {
  position: absolute;
  top: -10px;
  right: -10px;
  display: flex;
  gap: 0.5rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
	.dashboard-grid {
		grid-template-columns: 1fr;
	}
	
	.student-dashboard {
	}
	
	.dashboard-header-section {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	
	.date-grade-section {
		text-align: left;
	}
	
	.notifications-section {
		position: relative;
		top: 0;
		right: 0;
	}
}

@media (max-width: 768px) {
	.welcome-section h1 {
		font-size: 2rem;
	}
	
	.classmates-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.dashboard-card {
		padding: 1rem;
	}
}




.header-left {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.nav-btn {
	background: rgba(255,255,255,0.1);
	border: 1px solid var(--light-green);
	color: var(--dark-green);
	padding: 5px 10px;
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.3s;
	font-size: 1.2rem;
}

.nav-btn:hover {
	background: rgba(255,255,255,0.2);
	border: 1px solid var(--dark-green);
	transform: translateY(-2px);
}

.header-center {
	text-align: center;
	flex: 1;
}

.view-subtitle {
	font-size: 24px;
	color: #000;
	font-weight: 300;
}


.view-tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 2rem;
	justify-content: center;
}

.view-tab {
	padding: 5px 30px;
	background: white;
	border: 1px solid #ccc;
	border-radius: 5px;
	text-decoration: none;
	color: var(--dark-green);
	font-weight: 500;
	transition: all 0.2s;
	font-size: 14px;
}

.view-tab.active {
	background: var(--gold);
	color: black;
	border-color: var(--red);
}

.view-tab:hover {
	background: var(--cream);
	color: var(--black);
	border-color: var(--gold);
}

/* Week View */
.week-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1rem;
	background: white;
	border-radius: 5px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	overflow: hidden;
}

.day-column {
	min-height: 400px;
	padding: 0;
	background: white;
	border-right: 1px solid #f1f3f4;
}

.day-column:last-child {
	border-right: none;
}

.day-number {
	font-size: 21px;
	font-weight: 300;
	margin-bottom: 0;
}

.day-name {
	font-size: 12px;
}

.day-content {
	padding: 1rem;
}

.day-assignment {
	background: #f8f9fa;
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--subject-color);
	border-right: 1px solid var(--subject-color);
	border-top: 1px solid var(--subject-color);
	border-left: 4px solid var(--subject-color);
	position: relative;
	transition: all 0.2s;
	cursor: pointer;
}

.day-assignment:hover {
	background: #e9ecef;
	transform: translateX(4px);
}

.day-assignment.completed {
	background: #d4edda;
	opacity: 0.8;
}

.day-assignment-checkbox.checked {
	background: var(--dark-green);
	border-color: var(--dark-green);
}

.day-assignment-checkbox.checked::after {
	content: '✓';
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 0.7rem;
	font-weight: bold;
}

.day-assignment-title {
	font-weight: 400;
	margin-bottom: 0;
	color: #000;
	line-height: 18px;
	padding-right: 20px;
	font-family: 'Archivo', sans-serif;
	font-size: 14px;
}


/* Month View */
.month-grid {
	background: white;
	border-radius: 5px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	overflow: hidden;
}
.month-grid .month-header,
.month-grid .month-body {
	display: grid;
	grid-template-columns: repeat(5, 1fr); /* Changed from 7 to 5 */
}

.month-header {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	background: #fff;
	color: black;
	border-bottom: 2px solid #ddd;
}

.month-day-header {
	padding: 10px;
	text-align: center;
	font-weight: 300;
	font-size: 21px;
	line-height: 27px;
	/* border-right: 1px solid #ddd; */
}

.month-day-header:last-child {
	border-right: none;
}

.month-body {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.month-day {
	min-height: 120px;
	padding: 0.5rem;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	position: relative;
}

.month-day:last-child {
	border-right: none;
}

.month-day.other-month {
	background: #f4f8f6;
	color: #999;
}

.month-day.today {
	background: #fff;
}

.month-day-number {
	font-weight: 400;
	font-family: 'Archivo', sans-serif;
	margin-bottom: 0.5rem;
	color: var(--dark-green);
}

.month-assignment {
	background: var(--subject-color);
	color: white;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	font-size: 0.7rem;
	margin-bottom: 0.25rem;
	cursor: pointer;
	transition: all 0.2s;
}

.month-assignment:hover {
	transform: scale(1.02);
}

.month-assignment.completed {
	opacity: 0.3;
	text-decoration: line-through dotted;
}

/* Day View */
.day-view {
	background: white;
	border-radius: 5px;
	padding: 2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.day-assignments {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.assignments-card {
	padding: 15px 15px 5px;
}

.assignment-checkbox {
	width: 24px;
	height: 24px;
	border: 1px solid var(--light-green);
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.assignment-checkbox.checked {
	background: var(--dark-green);
	border-color: var(--dark-green);
}

.assignment-checkbox.checked::after {
	content: '✓';
	color: white;
	font-size: 0.8rem;
	font-weight: bold;
}

.assignment-icon {
	font-size: 24px;
	color: var(--subject-color);
}

.assignment-content {
	flex: 1;
}
.assignment-content-description {
	margin-top: 24px;
	padding: 1.15rem;
	background: #fff;
	border: 1px solid rgba(33, 59, 45, .12);
	border-radius: 7px;
}
.assignment-content-description .meta-value,
.assignment-content-description .assignment-description,
.assignment-content-description .assignment-instructions,
.assignment-content-description .assignment-resources {
	white-space: normal;
	text-transform: none;
}

@media (max-width: 992px) {
	.week-grid,
	.month-body {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.assignment-header {
		padding: 22px 20px;
	}

	.assignment-header-title {
		grid-template-columns: 1fr;
	}

	.completion-toggle {
		justify-self: stretch;
	}

	.assignment-meta-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.view-header {
		flex-direction: row;
		gap: 1rem;
		text-align: center;
	}
	
	.week-grid,
	.month-body {
		grid-template-columns: 1fr;
	}
	
	.month-header {
		display: none;
	}
	
	.day-column {
		border-right: none;
		border-bottom: 1px solid #f1f3f4;
	}
}

.no-assignments {
	text-align: center;
	color: #999;
	font-style: italic;
	padding: 2rem 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

/* Today indicator */
.day-column.today .day-header {
	background: var(--gold);
	color: var(--dark-green);
}

.assignment-description,
.assignment-instructions,
.assignment-resources {
	font-size: 16px;
	color: var(--dark-green);
	font-weight: 500;
	line-height: 21px;
}

.assignment-description p,
.assignment-instructions p,
.assignment-resources p {
	margin-bottom: 1rem;
}

.assignment-description ul,
.assignment-description ol,
.assignment-instructions ul,
.assignment-instructions ol,
.assignment-resources ul,
.assignment-resources ol {
	margin: 1rem 0;
	padding-left: 2rem;
}

.assignment-description li,
.assignment-instructions li,
.assignment-resources li {
	margin-bottom: 0.5rem;
}

.assignment-video-section,
.assignment-files-section {
	background: white;
	border-radius: 5px;
	padding: 2rem;
	margin-bottom: 2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.assignment-video-section h3,
.assignment-files-section h3 {
	color: var(--dark-green);
	margin-bottom: 1.5rem;
	font-family: 'Archivo', sans-serif;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.video-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	border-radius: 7px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.assignment-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.assignment-description,
.assignment-instructions,
.assignment-resources {
	line-height: 1.6;
	color: #333;
}

.assignment-description p,
.assignment-instructions p,
.assignment-resources p {
	margin-bottom: 1rem;
}

.assignment-description ul,
.assignment-description ol,
.assignment-instructions ul,
.assignment-instructions ol,
.assignment-resources ul,
.assignment-resources ol {
	margin: 1rem 0;
	padding-left: 2rem;
}

.assignment-description li,
.assignment-instructions li,
.assignment-resources li {
	margin-bottom: 0.5rem;
}

/* Media Section Styles */
.assignment-media-section {
	background: white;
	border-radius: 7px;
	padding: 2rem;
	margin-bottom: 2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.media-grid {
	display: grid;
	gap: 2rem;
}

.media-grid.two-columns {
	grid-template-columns: 1fr 1fr;
}

.media-grid.single-column {
	grid-template-columns: 1fr;
}

.media-column h3 {
	color: var(--dark-green);
	margin-bottom: 1.5rem;
	font-family: 'Archivo', sans-serif;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.1rem;
}

/* Video Styles */
.video-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	border-radius: 7px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.assignment-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.file-preview {
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f3f4;
	position: relative;
	overflow: hidden;
}

.file-thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.file-item:hover .file-thumbnail {
	transform: scale(1.05);
}

.pdf-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	font-size: 2rem;
}

.pdf-preview span {
	font-size: 0.8rem;
	font-weight: 600;
	color: #dc3545;
}

.file-icon-large {
	font-size: 3rem;
	opacity: 0.7;
}

.file-info {
	padding: 1rem;
	background: white;
}

.file-name {
	font-weight: 600;
	color: var(--dark-green);
	margin-bottom: 0.25rem;
	font-size: 0.9rem;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.file-size {
	font-size: 0.75rem;
	color: #666;
}

.file-actions {
	position: absolute;
	top: 8px;
	right: 8px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.file-item:hover .file-actions {
	opacity: 1;
}

.download-btn {
	background: var(--dark-green);
	color: white;
	padding: 0.5rem;
	border-radius: 50%;
	text-decoration: none;
	font-size: 0.9rem;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.download-btn:hover {
	background: var(--light-green);
	color: white;
	transform: scale(1.1);
}

/* File Preview Modal */
.file-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

.modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(4px);
}

.modal-content {
	background: white;
	border-radius: 7px;
	max-width: 95vw;
	max-height: 95vh;
	width: 1100px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.3);
	position: relative;
	z-index: 1001;
	display: flex;
	flex-direction: column;
	overflow: scroll;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	border-bottom: 1px solid #e9ecef;
	background: #fff;
}

.modal-header h4 {
	margin: 0;
	color: var(--dark-green);
	font-family: 'Archivo', sans-serif;
}

.modal-header-actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

.modal-icon-btn {
	background: none;
	border: 1px solid transparent;
	font-size: 16px;
	color: #6c757d;
	cursor: pointer;
	padding: 8px 10px;
	border-radius: 6px;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.modal-icon-btn:hover {
	background: #f1f3f4;
	color: #495057;
	border-color: #dee2e6;
}

.modal-icon-btn .fa-google-drive {
	color: #4285f4;
}

.modal-icon-btn:hover .fa-google-drive {
	color: #1a73e8;
}

.modal-icon-btn .fa-print {
	color: #6c757d;
}

.modal-icon-btn:hover .fa-print {
	color: #495057;
}

.modal-icon-btn .fa-external-link-alt {
	color: #17a2b8;
}

.modal-icon-btn:hover .fa-external-link-alt {
	color: #138496;
}

.close-btn {
	background: none;
	border: none;
	font-size: 27px;
	line-height: 21px;
	color: #444;
	cursor: pointer;
	padding: 5px;
	border-radius: 50%;
	transition: all 0.2s ease;
}

.close-btn:hover {
	color: var(--dark-green);
}

.modal-body {
	flex: 1;
	padding: 1.5rem;
	overflow: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
}

.modal-footer {
	padding: 1rem 1.5rem;
	border-top: 1px solid #e9ecef;
	background: #f8f9fa;
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal-footer .download-btn {
	background: var(--dark-green);
	color: white;
	padding: 0.75rem 1.5rem;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: auto;
	height: auto;
	font-size: 0.95rem;
	transition: all 0.2s ease;
}

.modal-footer .download-btn:hover {
	background: var(--light-green);
	transform: translateY(-2px);
}

/* Preview Content Styles */
.preview-image {
	max-width: 100%;
	min-width: 700px;
	max-height: 75vh;
	border-radius: 7px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
	.preview-image {
		min-width: 100%;
	}
}

.pdf-embed {
	width: 100%;
	min-width: 900px;
	height: 75vh;
	border: none;
	border-radius: 7px;
}

@media (max-width: 960px) {
	.pdf-embed {
		min-width: 100%;
	}
}

.file-preview-placeholder {
	text-align: center;
	color: #666;
	font-style: italic;
}

.file-preview-placeholder i {
	font-size: 4rem;
	margin-bottom: 1rem;
	opacity: 0.5;
}

/* Responsive Design */
@media (max-width: 768px) {
	.view-tabs {
		margin: 20px 0;
	}
	.completion-circle {
		width: 40px;
		height: 40px;
	}
	
	.completion-circle::before {
		content: '';
		width: 30px;
		height: 30px;
	}
	.completion-text {
		font-size: 14px;
	}
	.completion-subtext {
		display: none;
	}
	.media-grid.two-columns {
		grid-template-columns: 1fr;
	}
	
	.files-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
	
	.file-preview {
		height: 100px;
	}
	
	.modal-content {
		margin: 1rem;
		width: calc(100% - 2rem);
		max-height: calc(100% - 2rem);
	}
	
	.modal-body {
		min-height: 200px;
	}
	
	.pdf-embed {
		height: 300px;
	}
}

@media (max-width: 480px) {
	.files-grid {
		grid-template-columns: 1fr;
	}
	
	.assignment-media-section {
		padding: 1rem;
	}
	
	.media-grid {
		gap: 1.5rem;
	}
}

.files-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

@media (max-width: 1024px) {
	.files-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.files-grid {
		grid-template-columns: 1fr;
	}
}

.file-item {
	display: flex;
	flex-direction: column;
	padding: 0;
	background: #f8f9fa;
	border-radius: 7px;
	border: 1px solid #e9ecef;
	transition: all 0.2s ease;
	overflow: hidden;
	cursor: pointer;
}

.file-item .file-preview {
	width: 100%;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e9ecef;
}

.file-item .file-thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.file-item .file-info {
	padding: 12px;
}

.file-item:hover {
	background: #e9ecef;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.file-icon {
	margin-right: 1rem;
	font-size: 1.5rem;
}

.file-info {
	flex: 1;
}

.file-name {
	font-weight: 400;
	color: var(--dark-green);
	margin-bottom: 0.25rem;
}

.file-size {
	font-size: 0.8rem;
	color: #666;
}

.file-actions {
	margin-left: 1rem;
}

.download-btn {
	background: var(--dark-green);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 4px;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.download-btn:hover {
	background: var(--light-green);
	color: white;
	transform: translateY(-1px);
}

@media (max-width: 768px) {
	.file-item {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
	}
	
	.file-icon {
		margin-right: 0;
		margin-bottom: 0.5rem;
	}
	
	.file-actions {
		margin-left: 0;
		width: 100%;
	}
	
	.download-btn {
		width: 100%;
		justify-content: center;
	}
}

.class-stats {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.stat-item {
	text-align: center;
	padding: 0.75rem;
	background: #f8f9fa;
	border-radius: 7px;
	min-width: 70px;
}

.stat-item.urgent {
	background: #fee;
	border: 1px solid #fcc;
}

.stat-item.warning {
	background: #fff8e1;
	border: 1px solid #ffeb3b;
}

.stat-number {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--dark-green);
}

.stat-item.urgent .stat-number {
	color: #d63031;
}

.stat-item.warning .stat-number {
	color: #f39c12;
}

.stat-label {
	font-size: 0.75rem;
	color: #666;
	margin-top: 0.25rem;
}

.action-buttons-compact {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
}

.action-btn-small {
	padding: 0.5rem 0.75rem;
	background: var(--dark-green);
	color: white;
	text-decoration: none;
	border-radius: 6px;
	font-size: 0.8rem;
	transition: background 0.3s;
}

.action-btn-small:hover {
	background: var(--light-green);
	text-decoration: none;
	color: white;
}
.child-selector {
	margin-bottom: 20px;
}

.child-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.child-tab {
	background: var(--cream);
	color: black;
	padding: 3px 15px;
	border-radius: 25px;
	text-decoration: none;
	font-weight: 400;
	font-size: 14px;
	border: 1px solid var(--gold);
	transition: all 0.3s ease;
	white-space: nowrap;
}

.child-tab:hover {
	background: var(--cream);
	color: var(--dark-green);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(230, 197, 102, 0.3);
}

.child-tab.active {
	background: var(--gold);
	color: black;
	border-color: var(--dark-green);
	box-shadow: 0 4px 12px rgba(33, 59, 45, 0.3);
}

/* Parent-specific title adjustments */


/* Responsive Design for Child Selector */
@media (max-width: 768px) {
	.child-selector {
		padding: 1rem;
		margin-bottom: 1.5rem;
	}
	
	.child-tabs {
		gap: 0.5rem;
	}
	
	.child-tab {
		padding: 0.5rem 1rem;
		font-size: 0.85rem;
	}
}

@media (max-width: 480px) {
	.child-tabs {
		flex-direction: column;
	}
	
	.child-tab {
		text-align: center;
		border-radius: 7px;
	}
}


/* ANNOUNCEMENTS */

/* Add to your existing CSS file */

.announcement-item {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 20px;
	background: white;
	border-radius: 7px;
	margin-bottom: 15px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	position: relative;
}

.announcement-avatar {
	flex-shrink: 0;
}

.announcement-avatar img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
}

.announcement-avatar .initials {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--dark-green);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 1.2rem;
}

.announcement-content {
	flex: 1;
}

.announcement-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: #333;
	margin-bottom: 10px;
	line-height: 1.3;
}

.announcement-message {
	color: #555;
	line-height: 1.5;
	margin-bottom: 12px;
}

.announcement-meta {
	font-size: 0.9rem;
	color: #888;
	font-style: italic;
}

.announcement-close {
	position: absolute;
	top: 15px;
	right: 15px;
}

.announcement-close button {
	background: none;
	border: none;
	font-size: 1.5rem;
	color: #ccc;
	cursor: pointer;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.2s;
}

.announcement-close button:hover {
	background: #f0f0f0;
	color: #999;
}

.dashboard-card.announcements-card {
	padding: 0;
	background: none;
	box-shadow: none;
}
.btn-badge {
	background-color: var(--red);
	border-radius: 6px;
	color: white;
	font-weight: 500;
	padding: 10px 20px;
	text-transform: capitalize; 
	border: 0;
	font-size: 16px;
}
.btn-badge:hover {
	background-color: black;
	color: white;
}

.btn-preview {
	border: 1.5px solid var(--gold);
	color: var(--text-dark);
	background: white;
	border-radius: 5px;
}
.btn-preview:hover {
	border: 1.5px solid black;
	background: black;
	color: white;
}
.btn-details {
	border: 1.5px solid var(--light-green);
	color: var(--text-dark);
	background-color: white;
	border-radius: 5px;
}
.btn-details:hover {
	background: var(--dark-green);
	color: white;
}
.header-actions {
	display: flex;
	gap: 10px;
	align-items: center;
}
.btn-new-assignment {
	display: flex;
	gap: 5px;
	background-color: var(--gold);
	padding: 7px 15px;
	text-transform: uppercase;
	color: black;
	font-size: 12px;
	font-weight: 600;
	border-radius: 4px;
	transition: all 0.2s;
	border: 1px solid var(--red);
}
.btn-new-assignment:hover {
	background-color: var(--cream);
	border: 1px solid var(--gold);
}
.btn-new-week {
	display: flex;
	gap: 5px;
	background: var(--light-green);
	color: white;
	border: 1px solid #222;
	padding: 7px 15px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 4px;
	transition: all 0.2s;
	border: 1px solid var(--dark-green);
	text-transform: uppercase;
	letter-spacing: 1px;
	align-items: center;
}

.btn-new-week:hover {
	background: var(--dark-green);
	color: white;
	border: 1px solid var(--dark-green);
}
.btn-student-week {
	background: white;
	color: black;
	border: 1px solid #222;
	padding: 7px 15px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 4px;
	transition: all 0.2s;
	border: 1px solid var(--dark-green);
}

.btn-student-week:hover {
	background: var(--cream);
	color: black;
	border: 1px solid var(--gold);
}
.btn-grade {
	display: flex;
	gap: 5px;
	background-color: var(--dark-green);
	padding: 7px 15px;
	text-transform: uppercase;
	color: white;
	font-size: 12px;
	font-weight: 600;
	border-radius: 4px;
	transition: all 0.2s;
	border: 1px solid var(--dark-green);
}
.btn-grade:hover {
	background-color: black;
	border: 1px solid black;
	color: white;
}


.file-attachment-preview {
	gap: 10px;
}




.layout-controls {
	display: flex;
	gap: 10px;
	margin-bottom: 15px;
	justify-content: flex-end;
}

.layout-btn {
	padding: 8px 16px;
	border: 2px solid #e1e8ed;
	background: white;
	cursor: pointer;
	border-radius: 7px;
	transition: all 0.3s ease;
	font-weight: 500;
}

.layout-btn.active {
	background: var(--dark-green, #213b2d);
	color: white;
	border-color: var(--dark-green, #213b2d);
}

.assignments-grid {
	margin-top: 30px;
}

.assignments-compact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1rem;
	margin-top: 30px;
}

.assignment-compact-meta {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 10px;
}



.assignment-card-compact {
	background: white;
	border: 1px solid #e1e8ed;
	border-radius: 7px;
	padding: 16px;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}

.assignment-card-compact:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.assignments-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 30px;
}

.assignment-row {
	background: white;
	border: 1px solid #e1e8ed;
	border-radius: 5px;
	padding: 8px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.assignment-row:hover {
	background: #f8f9fa;
}

.assignment-row-main {
	display: flex;
	gap: 10px;
	align-items: center;
}

.assignment-file-attachment {
	padding: 10px 20px 10px 10px;
	border: 1px solid var(--light-green);
	border-radius: 7px;
	display: flex;
	justify-content: space-between;
	margin: 10px 0 10px;
}

.completion-bar {
	width: 100px;
	height: 8px;
	background: #e9ecef;
	border-radius: 4px;
	overflow: hidden;
}

.completion-progress {
	height: 100%;
	background: var(--light-green, #28a745);
	transition: width 0.3s ease;
}

.hidden { display: none; }

.search-section {
	max-height: 40px;
	width: 50%;
}
.btn-grid {
	display: flex;
	gap: 5px;
	background: var(--light-grey);
	padding: 7px 15px;
	text-transform: uppercase;
	color: black;
	font-size: 12px;
	font-weight: 600;
	border-radius: 4px;
	transition: all 0.2s;
	border: 1px solid var(--gold);
}
.btn-grid:hover {
	background-color: var(--red);
	color: white;
	border: 1px solid var(--red);
}
.btn-grid.active {
	border: 1px solid var(--red);
	color: black;
	background: white;
}
.assignment-meta-due, .assignment-meta-assigned {
	font-size: 12px;
	font-weight: 600;
	color: #222;
}
.assignment-meta-due {
	color: var(--red);
}
.assignment-meta-grade {
	font-size: 12px;
	color: var(--light-green);
	font-weight: 500;
	margin: 0 0 5px 0;
	word-break: break-word;
	text-align: right;
}
.assignment-meta-count {
	text-align: right;
	font-size: 12px;
	color: var(--light-green);
	font-weight: 500;
}
.assignment-meta-points {
	color: var(--red);
	font-size: 12px;
	font-weight: 600;
}
.assignment-meta-flex {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.assignment-type-draft {
	margin-left: auto;
}
.teacher-assignment-actions-list {
	display: flex;
	gap: 10px;
	padding: 0;
	margin: 0;
}

.status-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.625rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 500;
}

.status-badge.pending {
	background-color: #f3f4f6;
	color: #1f2937;
}

.status-badge.completed {
	background-color: #dbeafe;
	color: #1e40af;
}

.status-badge.graded {
	background-color: #dcfce7;
	color: #166534;
}

.grade-display {
	font-weight: 500;
	color: #1f2937;
}

.grade-now-btn {
	font-size: 0.75rem;
	padding: 0.25rem 0.75rem;
	border-radius: 0.375rem;
}

.need-grading {
	background-color: #f59e0b;
	color: white;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.875rem;
	font-weight: 500;
}

.text-success {
	color: #059669;
}
.student-progress {
	display: flex;
	gap: 10px;
}
.student-progress-name {
	font-size: 14px;
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
	margin: 0;
	padding: 0;
}
.student-progress-house {
	font-size: 11px;
	color: #777;
	line-height: 11px;
	font-style: italic;
}

/* Resource Button Styling */
.resource-button-container {
	text-align: center;
	padding: 1rem 0 0.5rem 0;
	margin-top: auto;
	flex-shrink: 0;
}

.resource-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 5px 20px;
	background: white;
	color: var(--dark-green);
	text-decoration: none;
	border-radius: 5px;
	font-weight: 600;
	font-size: 0.9rem;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border: 0.5px solid var(--dark-green);
}

.resource-btn:hover {
	background: var(--dark-green);
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	text-decoration: none;
	color: white;
}

.resource-btn i {
	font-size: 1rem;
}

/* ===== SOURCE: css/parent-dashboard.css ===== */
/* Parent Dashboard Styles - Additional styles only */
/* This file contains ONLY parent-specific styles to avoid duplication */

/* Child Selection Navigation */
.child-selector {
	margin-bottom: 20px;
}

.child-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.child-tab {
	background: var(--cream);
	color: black;
	padding: 3px 15px;
	border-radius: 25px;
	text-decoration: none;
	font-weight: 400;
	font-size: 14px;
	border: 1px solid var(--gold);
	transition: all 0.3s ease;
	white-space: nowrap;
}

.child-tab:hover {
	background: var(--cream);
	color: var(--dark-green);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(230, 197, 102, 0.3);
}

.child-tab.active {
	background: var(--gold);
	color: black;
	border-color: var(--dark-green);
	box-shadow: 0 4px 12px rgba(33, 59, 45, 0.3);
}

.house-augustine { background-color: #a22010; }
.house-aquinas { bbackground-color: #143648; }
.house-athanasius { background-color: #482c4e; }
.house-ambrose { background-color: #d89a00; }


/* Responsive Design for Child Selector */
@media (max-width: 768px) {
	.child-selector {
		padding: 1rem;
		margin-bottom: 1.5rem;
	}
	
	.child-tabs {
		gap: 0.5rem;
	}
	
	.child-tab {
		padding: 0.5rem 1rem;
		font-size: 0.85rem;
	}
}

@media (max-width: 480px) {
	.child-tabs {
		flex-direction: column;
	}
	
	.child-tab {
		text-align: center;
		border-radius: 7px;
	}
}

/* Parent-specific completion checkbox (read-only) */
.completion-checkbox[data-readonly="true"] {
	cursor: default;
}

.completion-checkbox[data-readonly="true"]:hover {
	transform: none;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Adjust assignments view for parent context */
.assignments-view .child-selector {
	margin-bottom: 1rem;
}

.assignments-view .view-title {
	margin-top: 0;
}

/* Parent dashboard header adjustments */
.dashboard-header-section .welcome-section h1 {
	font-size: 2.2rem;
	color: var(--color-primary, #213b2d);
}

.survey-form p {
	margin: 15px 0;
}

.students-overview {
	padding: 0;
}

.students-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 2rem;
	margin-top: 2rem;
}





.student-meta {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.academic-progress {
	margin-bottom: 1.5rem;
}

.progress-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.academic-progress h4 {
	margin: 0;
	color: var(--color-primary, #213b2d);
	font-size: 1rem;
	font-weight: 600;
}

.completion-rate {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: conic-gradient(var(--color-secondary, #e6c566) calc(var(--progress) * 1%), #f0f0f0 0);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.completion-rate::before {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: white;
}

.completion-text {
	position: relative;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-primary, #213b2d);
}

.progress-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.stat-item {
	text-align: center;
}

.stat-label {
	font-size: 0.8rem;
	color: #666;
	margin-bottom: 0.25rem;
}

.stat-value {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-primary, #213b2d);
}

.recent-feedback-section, .upcoming-section {
	margin-bottom: 40px;
}

.recent-feedback-section h4, .upcoming-section h4 {

}

.no-feedback, .no-upcoming {
	color: #666;
	font-style: italic;
	text-align: center;
	padding: 1rem 0;
	border: 1px solid #e9ecef;
	border-radius: 5px;
	background-color: #f8f9fa;
}

.feedback-list-compact {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.feedback-item-compact {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #f8f9fa;
	padding: 0.5rem 0.75rem;
	border-radius: 7px;
	font-size: 0.85rem;
}

.feedback-subject {
	font-weight: 500;
	color: var(--color-primary, #213b2d);
}

.feedback-grade {
	background: var(--color-accent, #6bbf59);
	color: white;
	padding: 0.2rem 0.5rem;
	border-radius: 7px;
	font-size: 0.75rem;
	font-weight: 600;
}

.feedback-date {
	color: #666;
	font-size: 0.75rem;
}

.upcoming-list-compact {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.upcoming-item-compact {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: #f8f9fa;
	padding: 0.6rem 0.75rem;
	border-radius: 7px;
}

.assignment-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.assignment-info-compact {
	flex: 1;
}

.assignment-title-compact {
	font-weight: 500;
	color: var(--color-primary, #213b2d);
	font-size: 0.85rem;
	line-height: 1.2;
	margin-bottom: 0.2rem;
}

.assignment-due-compact {
	color: #666;
	font-size: 0.75rem;
}

.quick-actions-section {
	border-top: 1px solid #f0f0f0;
	padding-top: 1rem;
}

.action-buttons {
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
}

.action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0.75rem 0.5rem;
	border-radius: 7px;
	text-decoration: none;
	color: #666;
	font-size: 0.8rem;
	font-weight: 500;
	transition: all 0.2s ease;
	flex: 1;
	background: #f8f9fa;
}

.action-btn:hover {
	background: var(--color-secondary, #e6c566);
	color: white;
	transform: translateY(-2px);
}

.action-btn.primary {
	background: var(--color-primary, #213b2d);
	color: white;
}

.action-btn.primary:hover {
	background: var(--color-accent, #6bbf59);
}

.action-btn i {
	font-size: 1.1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
	.students-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	
	.student-overview-card {
		padding: 1.5rem;
	}
	
	.student-card-header {
		gap: 0.75rem;
	}
	
	.student-avatar {
		width: 50px;
		height: 50px;
		font-size: 1.2rem;
	}
	
	.student-name {
		font-size: 1.2rem;
	}
}

@media (max-width: 480px) {
	.student-overview-card {
		padding: 1rem;
	}
	
	.progress-stats {
		gap: 0.5rem;
	}
	
	.action-buttons {
		flex-direction: column;
		gap: 0.5rem;
	}
	
	.action-btn {
		flex-direction: row;
		justify-content: center;
		padding: 0.75rem;
	}
}

.survey-banner {
	background: #e7f3ff;
	border-left: 4px solid #0066cc;
	padding: 1rem;
	margin-bottom: 1rem;
	border-radius: 4px;
}

.survey-content {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.btn-survey {
	background: var(--light-green);
	color: white;
	padding: 0.5rem 1rem;
	text-decoration: none;
	border-radius: 4px;
	font-size: 0.9rem;
}
.survey-form {
	max-width: 900px;
	margin: 0 auto;
}

.student-section {
	background: white;
	border-radius: 7px;
	padding: 2rem;
	margin-bottom: 2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.student-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid #f0f0f0;
}

.student-header h1 {
	color: white;
	margin: 0;
}



.question-category {
	margin-bottom: 2.5rem;
}

.question-category h3 {
	color: var(--dark-green);
	font-size: 24px;
	font-weight: 500;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #e0e0e0;
}

.question-group {
	margin-bottom: 1.5rem;
}

.question-label {
	display: block;
	font-weight: 500;
	color: #333;
	margin-bottom: 0.5rem;
	line-height: 1.4;
}

.question-textarea {
	width: 100%;
	min-height: 80px;
	padding: 0.75rem;
	border: 2px solid #e1e5e9;
	border-radius: 7px;
	font-family: inherit;
	font-size: 0.95rem;
	resize: vertical;
	transition: border-color 0.2s;
}

.question-textarea:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(230, 197, 102, 0.1);
}

.form-actions {
	text-align: center;
	padding: 2rem 0;
	border-top: 1px solid #e0e0e0;
}

.form-actions .btn-primary {
	margin-right: 1rem;
}

.success-message {
	background: #d4edda;
	color: #155724;
	padding: 1rem;
	border-radius: 7px;
	margin-bottom: 1.5rem;
	border: 1px solid #c3e6cb;
}

/* ===== SOURCE: css/teacher-dashboard.css ===== */
/* Time Tracking Widget Styles */
.time-tracking-widget {
	background: white;
	border-radius: 7px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.time-status-display {
	text-align: left;
}

.status-indicator {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 5px;
	padding: 4px;
}

.status-indicator.active {
	background-color: #22c55e;
	animation: pulse 2s infinite;
}

.status-indicator.completed {
	background-color: #3b82f6;
}

.status-indicator.inactive {
	background-color: #6b7280;
}

.status-active {
	color: #155724;
	font-size: 11px;
	text-align: left;
	align-items: center;
	padding: 0;
	margin: 0;
	line-height: 11px;
	background: white;
}
.status-completed {
	background: white;
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.time-controls {
	padding: 10px;
	text-align: center;
}

.time-controls button {
	padding: 7px 30px;
	border: none;
	border-radius: 5px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	margin: 10px 0 0;
	color: white;
}
.time-controls button:hover {
	border: 0;
	background-color: black;
	color: white;
}
.btn-clock-in {
	background-color: var(--light-green);
}
.btn-clock-out {
	background-color: var(--red);
}

td.clock-td {
	padding: 0px 5px 0px 25px;
}
.clock-text {
	font-size: 11px;
}

.btn-success {
	background-color: #22c55e;
	color: white;
}

.btn-success:hover {
	background-color: #16a34a;
}

.btn-danger {
	background-color: #ef4444;
	color: white;
}

.btn-danger:hover {
	background-color: #dc2626;
}

.clock-header {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	line-height: 11px;
}

.elapsed-time {
	padding: 0;
	text-align: right;
	font-size: 11px;
	line-height: 11px;
	color: #374151;
}

.week-summary {
	padding: 0.5rem 1rem;
	text-align: center;
	color: #6b7280;
	font-size: 0.9rem;
}

.birthday-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.birthday-item {
	display: flex;
	align-items: center;
	padding: 0.75rem;
	border-radius: 7px;
	background: #f8f9fa;
	transition: all 0.3s ease;
}

.birthday-item.birthday-today {
	background: #fff3cd;
	border: 2px solid #ffc107;
}

.birthday-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 600;
	font-size: 0.9rem;
	margin-right: 0.75rem;
}

.birthday-name {
	font-weight: 600;
	color: var(--dark-green);
}

.birthday-meta {
	font-size: 0.8rem;
	color: #666;
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.birthday-today-badge {
	background: #ffc107;
	color: #000;
	padding: 0.2rem 0.5rem;
	border-radius: 7px;
	font-weight: 600;
}


/* ===== SOURCE: css/login.css ===== */
body {
	background: linear-gradient(135deg, var(--dark-green), var(--light-green));
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.survey-container { 
	max-width: 800px; 
	margin: 0 auto; 
	padding: 2rem; 
	background: none;
}
.child-section { 
	background: white; 
	margin: 2rem 0; 
	padding: 2rem; 
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.question-group { 
	margin: 1.5rem 0; 
}
.question-label { 
	font-weight: 500; 
	margin-bottom: 0.5rem; 
	display: block;
	color: var(--dark-green);
}
.survey-textarea { 
	width: 100%; 
	min-height: 80px; 
	padding: 0.75rem; 
	border: 2px solid #e1e5e9;
	border-radius: 8px;
	font-family: inherit;
	resize: vertical;
	transition: border-color 0.2s;
}
.survey-textarea:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(230, 197, 102, 0.1);
}
.survey-actions { 
	text-align: center; 
	margin: 3rem 0;
	padding: 2rem;
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.btn-skip { 
	background: #6c757d; 
	margin-right: 1rem; 
}
.btn-skip:hover {
	background: #5a6268;
}
.child-section h2 {
	color: var(--dark-green);
	margin-bottom: 0.5rem;
}
.grade-info {
	color: #666;
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
}
.login-footer {
	margin: 20px 0;
	font-size: 12px;
}
.btn-primary {
	text-transform: uppercase;
}
.input-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ===== SOURCE: css/admin.css ===== */
body, html {
  background-color: #ECF3F0;
  font-family: 'Archivo', sans-serif;
}

.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
}

.page-header h1 {
	margin: 0;
	color: #2c3e50;
}

.current-classes {
	background: #f8f9fa;
	padding: 1.5rem;
	border-radius: 8px;
	margin-bottom: 2rem;
}

.current-classes h2 {
	margin: 0 0 1rem 0;
	color: #333;
	font-size: 1.3rem;
}

.no-classes {
	color: #666;
	font-style: italic;
}

.classes-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.class-item {
	background: white;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.class-info {
	flex: 1;
}

.class-info h3 {
	margin: 0 0 0.5rem 0;
	font-size: 1.1rem;
	color: #2c3e50;
}

.class-details {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

.subject-tag,
.grades-tag,
.enrollment-tag {
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	font-size: 0.85rem;
	white-space: nowrap;
}

.subject-tag {
	color: white;
}

.grades-tag {
	background: #e9ecef;
	color: #495057;
}

.enrollment-tag {
	background: #d1ecf1;
	color: #0c5460;
}

.class-description {
	margin: 0.5rem 0 0 0;
	color: #666;
	font-size: 0.9rem;
}

.delete-form {
	margin-left: 1rem;
}

.btn-delete {
	background: #dc3545;
	color: white;
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 4px;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: all 0.2s;
}

.btn-delete:hover {
	background: #c82333;
}

/* Add New Class Form */
.add-class-section {
	background: white;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 2rem;
}

.add-class-section h2 {
	margin: 0 0 1.5rem 0;
	color: #333;
	font-size: 1.3rem;
}

.add-class-form {
	max-width: 100%;
}

.form-group {
	margin-bottom: 1.5rem;
}

.form-group label {
	display: flex;
	margin-bottom: 0.5rem;
	font-weight: 500;
	color: #333;
}

.form-group input[type="text"],
.form-group textarea {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1rem;
}

.form-group textarea {
	resize: vertical;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 2rem;
	margin-bottom: 1.5rem;
}

/* Grade Checkboxes */
.grade-checkboxes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5px;
	padding: 20px;
	background: #f8f9fa;
	border-radius: 4px;
}

.checkbox-label {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
	margin-right: 10px;
	width: 20px;
}

.checkbox-label span {
	font-size: 0.95rem;
}

/* Subject Radio Buttons */
.subject-radios {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	padding: 20px 10px;
	background: #f8f9fa;
	border-radius: 4px;
	max-height: auto;
	overflow-y: auto;
}

.radio-label {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 0.25rem;
}

.radio-label input[type="radio"] {
	margin-right: 0.5rem;
	flex-shrink: 0;
	width: 20px;
}

.subject-option {
	padding: 5px 10px;
	border-radius: 5px;
	color: white;
	font-size: 15px;
	font-weight: 500;
	display: inline-block;
	width: 100%;
	text-align: center;
	transition: opacity 0.2s;
}

.radio-label:hover .subject-option {
	opacity: 0.85;
}

.btn-primary {
	background: var(--light-green);
	color: white;
	padding: 7px 15px;
	font-size: 12px !important;
	font-weight: 600;
	border: none;
	border-radius: 4px;
	font-size: 1rem;
	cursor: pointer;
	transition: all 0.2s;
	text-transform: uppercase;
}

.btn-primary:hover {
	background: var(--dark-green);
}

/* Messages */
.success-message,
.error-message {
	padding: 1rem;
	border-radius: 4px;
	margin-bottom: 1.5rem;
}

.success-message {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.error-message {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

/* Responsive */
@media (max-width: 768px) {
	.page-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	
	.form-row {
		grid-template-columns: 1fr;
	}
	
	.class-details {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	
	.grade-checkboxes,
	.subject-radios {
		grid-template-columns: 1fr 1fr;
	}
}
/* Super Admin Assignment Management Styles */

/* Assignment Statistics Cards */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.stat-card {
	background: white;
	padding: 1.5rem;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	text-align: center;
	border-left: 4px solid #007bff;
}

.stat-card h3 {
	font-size: 2rem;
	font-weight: bold;
	margin: 0 0 0.5rem 0;
	color: #333;
}

.stat-card p {
	margin: 0;
	color: #666;
	font-size: 0.9rem;
}

.stat-card.stat-warning {
	border-left-color: #ffc107;
}

.stat-card.stat-danger {
	border-left-color: #dc3545;
}

.stat-card.stat-success {
	border-left-color: #28a745;
}

.stat-card.stat-info {
	border-left-color: #17a2b8;
}

/* Filters Section */
.filters-section {
	background: white;
	padding: 1.5rem;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	margin-bottom: 2rem;
}

.filters-form .filter-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}

.filters-form .filter-row:last-child {
	margin-bottom: 0;
}

.filter-group {
	display: flex;
	flex-direction: column;
}

.filter-group label {
	font-weight: 500;
	margin-bottom: 0.25rem;
	color: #333;
}

.filter-group select,
.filter-group input {
	padding: 0.5rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 0.9rem;
}

.filter-actions {
	display: flex;
	gap: 0.5rem;
	align-items: flex-end;
}

/* Table Enhancements */
.table-container {
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	overflow: hidden;
}

.table-header {
	padding: 1rem 1.5rem;
	border-bottom: 1px solid #eee;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #f8f9fa;
}

.table-title h2 {
	margin: 0;
	font-size: 1.25rem;
	color: #333;
}

.table-actions {
	display: flex;
	gap: 0.5rem;
}

.data-table {
	width: 100%;
	border-collapse: collapse;
}

.data-table th,
.data-table td {
	padding: 1rem;
	text-align: left;
	border-bottom: 1px solid #eee;
}

.data-table th {
	background: #f8f9fa;
	font-weight: 600;
	color: #333;
}

.checkbox-col {
	width: 50px;
}

.actions-col {
	width: 120px;
}

.no-data {
	text-align: center;
	padding: 3rem;
	color: #666;
	font-style: italic;
}

/* Assignment Info in Table */
.assignment-info h4 {
	margin: 0 0 0.5rem 0;
	font-size: 1rem;
	color: #333;
}

.assignment-meta {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.subject-tag,
.type-tag,
.points-tag {
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 500;
	color: white;
}

.type-tag.type-at_home {
	background-color: #17a2b8;
}

.type-tag.type-in_class {
	background-color: #28a745;
}

.type-tag.type-project {
	background-color: #6f42c1;
}

.points-tag {
	background-color: #6c757d;
}

/* Class Info */
.class-info .section-name {
	font-weight: 500;
	color: #333;
}

.class-info .grade-names {
	font-size: 0.85rem;
	color: #666;
}

/* Due Date Styling */
.due-date {
	font-weight: 500;
}

.due-date.overdue {
	color: #dc3545;
}

.due-date.due-today {
	color: #ffc107;
}

.no-due-date {
	color: #6c757d;
	font-style: italic;
}

/* Status Badges */
.status-badge {
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 500;
}

.status-badge.status-draft {
	background-color: #6c757d;
	color: white;
}

.status-badge.status-published {
	background-color: #28a745;
	color: white;
}

.status-badge.status-archived {
	background-color: #dc3545;
	color: white;
}

/* Progress Bar */
.progress-info {
	min-width: 120px;
}

.progress-bar {
	width: 100%;
	height: 8px;
	background-color: #e9ecef;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 0.25rem;
}

.progress-completed {
	height: 100%;
	background-color: #28a745;
	transition: width 0.3s ease;
}

.progress-text {
	font-size: 0.75rem;
	color: #666;
	line-height: 1.2;
}

.no-students {
	color: #6c757d;
	font-style: italic;
}

/* Action Buttons */
.action-buttons {
	display: flex;
	gap: 0.25rem;
}

/* .btn-small {
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #007bff;
	color: white;
}

.btn-small:hover {
	background-color: #0056b3;
}

.btn-small.btn-danger {
	background-color: #dc3545;
}

.btn-small.btn-danger:hover {
	background-color: #c82333;
} */

/* Pagination */
.pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

.pagination-btn {
	padding: 0.5rem 1rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-decoration: none;
	color: #333;
	background: white;
}

.pagination-btn:hover {
	background-color: #f8f9fa;
}

.pagination-btn.active {
	background-color: #007bff;
	color: white;
	border-color: #007bff;
}

/* Assignment Form Styles */
.form-container {
	max-width: 1200px;
	margin: 0 auto;
}

.assignment-form {
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	overflow: hidden;
}

.form-sections {
	padding: 2rem;
}

.form-section {
	margin-bottom: 2rem;
}

.form-section:last-child {
	margin-bottom: 0;
}

.form-section h2 {
	margin: 0 0 1.5rem 0;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #f8f9fa;
	color: #333;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
}

.form-group {
	display: flex;
	flex-direction: column;
}

.form-group label {
	font-weight: 500;
	margin-bottom: 0.5rem;
	color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
	padding: 0.75rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1rem;
}

.form-group textarea {
	resize: vertical;
	min-height: 100px;
}

.file-help {
	font-size: 0.85rem;
	color: #666;
	margin-top: 0.25rem;
}

/* Existing Files */
.existing-files {
	background: #f8f9fa;
	padding: 1rem;
	border-radius: 4px;
	margin-bottom: 1rem;
}

.existing-files h3 {
	margin: 0 0 1rem 0;
	font-size: 1rem;
	color: #333;
}

.file-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem;
	background: white;
	border-radius: 4px;
	margin-bottom: 0.5rem;
}

.file-item:last-child {
	margin-bottom: 0;
}

.file-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.file-name {
	font-weight: 500;
}

.file-size {
	color: #666;
	font-size: 0.85rem;
}

/* Form Actions */
.form-actions {
	padding: 1.5rem 2rem;
	background: #f8f9fa;
	border-top: 1px solid #eee;
	display: flex;
	gap: 1rem;
}

/* Assignment Detail Page */
.assignment-overview {
	background: white;
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	margin-bottom: 2rem;
}
a.view-all-link {
	font-size: 14px;
	font-weight: 400;
}
.assignment-header {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2rem;
	margin-bottom: 1.5rem;
}

.assignment-title h2 {
	margin: 0 0 1rem 0;
	color: #333;
}

.assignment-info {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.info-item {
	display: flex;
	flex-direction: column;
}

.info-item label {
	font-weight: 500;
	color: #666;
	font-size: 0.85rem;
	margin-bottom: 0.25rem;
}

.info-item span {
	color: #333;
}

.overdue-badge,
.due-today-badge {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 500;
	margin-left: 0.5rem;
}

.overdue-badge {
	background-color: #dc3545;
	color: white;
}

.due-today-badge {
	background-color: #ffc107;
	color: #333;
}

.assignment-description {
	margin-bottom: 1.5rem;
}

.assignment-description h3 {
	margin: 0 0 0.5rem 0;
	color: #333;
}

.video-container {
	margin-top: 0.5rem;
}

.video-container iframe {
	max-width: 100%;
	height: auto;
}

.assignment-files {
	margin-bottom: 1.5rem;
}

.assignment-files h3 {
	margin: 0 0 1rem 0;
	color: #333;
}

.file-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Grading Section */
.grading-section {
	background: white;
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.grading-section h2 {
	margin: 0 0 1.5rem 0;
	color: #333;
}

.grading-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #eee;
}

.quick-grade-buttons {
	display: flex;
	gap: 0.5rem;
}

/* Students Grid for Grading */
.students-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.student-card {
	border: 2px solid #e9ecef;
	border-radius: 8px;
	padding: 1.5rem;
	background: #f8f9fa;
}

.student-card.completed {
	border-color: #28a745;
	background: #f8fff9;
}

.student-card.not-completed {
	border-color: #ffc107;
	background: #fffdf5;
}

.student-header {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
	gap: 1rem;
}

.student-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #007bff;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 1.1rem;
}

.student-info h4 {
	margin: 0;
	color: #333;
}

.student-details {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.grade-tag,
.house-tag {
	padding: 0.125rem 0.5rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 500;
}

.grade-tag {
	background-color: #6c757d;
	color: white;
}

.house-tag {
	background-color: #17a2b8;
	color: white;
}

.completion-status {
	margin-left: auto;
	text-align: right;
}

.status-completed {
	color: #28a745;
	font-weight: 500;
}

.status-not-completed {
	color: #ffc107;
	font-weight: 500;
}

.grading-inputs {
	margin-top: 1rem;
}

.grade-input {
	margin-bottom: 1rem;
}

.grade-input label {
	display: block;
	font-weight: 500;
	margin-bottom: 0.5rem;
	color: #333;
}

.grade-input input {
	width: 100px;
	padding: 0.5rem;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.feedback-input label {
	display: block;
	font-weight: 500;
	margin-bottom: 0.5rem;
	color: #333;
}

.feedback-input textarea {
	width: 100%;
	padding: 0.5rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	resize: vertical;
}

.feedback-date {
	font-size: 0.85rem;
	color: #666;
	margin-top: 0.5rem;
	font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
	.filters-form .filter-row {
		grid-template-columns: 1fr;
	}
	
	.form-row {
		grid-template-columns: 1fr;
	}
	
	.assignment-header {
		grid-template-columns: 1fr;
	}
	
	.assignment-info {
		grid-template-columns: 1fr;
	}
	
	.students-grid {
		grid-template-columns: 1fr;
	}
	
	.grading-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}
	
	.quick-grade-buttons {
		justify-content: center;
	}
}
.teacher-classes {
	margin-top: 10px;
}
.house-seal {
	width: 30px;
	height: 30px;
	margin-bottom: 5px;
	vertical-align: middle;
}
.house-badge-teacher img.house-seal-admin {
	width: 50px;
	height: 50px;
	vertical-align: top;
}
.action-buttons {
  margin-top: 0;
}
.house-badge-admin {
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  color: #222;
  font-family: 'Archivo', sans-serif;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.students-table .house-badge-admin {
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  color: #222;
  font-family: 'Archivo', sans-serif;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 8px;
}
.house-seal-admin {
	width: 30px;
	height: 30px;
	margin-bottom: 0px;
	vertical-align: middle;
}

.class-count {
	font-size: 0.8em;
	font-weight: bold;
	color: #666;
	margin-bottom: 8px;
}

.class-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.class-tag {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 0.75em;
	color: white;
	font-weight: 500;
}

.no-classes {
	color: #999;
	font-style: italic;
	font-size: 0.9em;
}

.student-count {
	font-size: 0.8em;
	color: #666;
	font-weight: bold;
}
.search-section {
	margin-bottom: 0;
}

.search-form {
	display: flex;
	gap: 10px;
	align-items: center;
}

.search-input {
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	min-width: 300px;
}
.search-section.search-input {
	width: 70%;
	margin: 0;
	padding: 5px 15px;
}

.search-btn, .clear-btn {
	padding: 5px 15px;
	border-radius: 4px;
	text-decoration: none;
	background-color: var(--light-green);
	color: white;
	font-size: 14px;
	font-weight: 600;
}

.search-btn {
	background: var(--dark-green);
	color: white;
	border: none;
}

.clear-btn {
	background: #6c757d;
	color: white;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.user-type-tabs {
	display: flex;
	gap: 0;
	border: 1px solid var(--dark-green);
	border-radius: 4px;
	overflow: hidden;
}

.tab-btn {
	padding: 7px 15px;
	background: white;
	color: var(--dark-green);
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: all 0.2s;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 600;
}

.tab-btn:hover {
	background: var(--cream);
}

.tab-btn.active {
	background: var(--dark-green);
	color: white;
}

.checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.checkbox-group label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: normal;
}
.student-avatar-compact {
	width: 75px;
	height: 75px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 10px;
	border: 2px solid var(--light-green);
	background-color: var(--light-green);
	color: var(--gold);
	font-size: 30px;
	line-height: 70px;
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
}

.assignment-references {
	margin-bottom: 1.5rem;
}

.reference-links {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.reference-item {
	background: #f8f9fa;
	border-radius: 8px;
	padding: 0.75rem;
}

.reference-link {
	color: #007bff;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.reference-link:hover {
	text-decoration: underline;
}
.health-details {
	font-size: 11px;
	word-break: break-word;
	line-height: 12px;
}
.dash-section-subtitle {
	font: 12px 'Archivo', sans-serif;
	text-transform: uppercase;
	font-weight: 600;
}
.widget {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.widget-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  font-weight: 600;
  color: #355946;
}

.widget-header-prospective {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: #355946;
}

.widget-content {
  padding: 20px;
}
.widget-section {
	display: flex; 
	justify-content: space-between; 
	margin-bottom: 20px;
}

.user-list {
  max-height: 750px;
  overflow-y: auto;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  gap: 10px;
  font-size: 14px;
}

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

.user-info {
  display: flex;
  align-items: start;
  gap: 0;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-online { background: var(--light-green); }
.status-recent { background: var(--gold); }
.status-inactive { background: var(--red); }

.user-role {
  padding: 0;
  color: var(--cream);
}
.user-item .user-role {
  color: #777;
}

.chart-container {
  height: 250px;
  margin: 20px 0;
}

.activity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 25px;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 5px;
}

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

.activity-type {
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 10px;
  color: white;
}

.type-assignment { background: #007bff; }
.type-completion { background: #28a745; }
.type-login { background: #6c757d; }

.admin-tools {
  display: grid;
  gap: 10px;
}

.tool-link {
  display: block;
  padding: 12px 15px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  text-decoration: none;
  color: #495057;
  transition: all 0.2s;
}

.tool-link:hover {
  background: #355946;
  color: white;
  border-color: #355946;
}

.calendar-event {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.event-date {
  font-size: 0.85rem;
  color: #666;
}

.pending-count {
  background: #dc3545;
  color: white;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 8px;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.stat-card h3 {
  font-size: 2.5rem;
  color: var(--dark-green);
  margin-bottom: 10px;
  font-family: 'Instrument Serif', Georgia, serif;
}

.stat-card p {
  color: #666;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
}

.layout-controls {
	display: flex;
	justify-content: space-between !important;
	align-items: center;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 15px;
}

.program-filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.program-filter-btn {
	padding: 6px 12px;
	border: 1px solid var(--light-grey);
	border-radius: 5px;
	background: white;
	color: var(--text-dark);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.program-filter-btn:hover {
	background: var(--cream);
	border-color: var(--gold);
}

.program-filter-btn.active {
	background: var(--light-green);
	color: white;
	border-color: var(--dark-green);
	box-shadow: 0 2px 8px rgba(33, 59, 45, 0.2);
}

.layout-buttons {
	display: flex;
	gap: 10px;
}

@media (max-width: 768px) {
	.layout-controls {
		flex-direction: column;
		align-items: stretch;
	}
	
	.program-filters {
		justify-content: center;
		order: 1;
	}
	
	.layout-buttons {
		justify-content: center;
		order: 2;
	}
}

.house-filter {
	margin-top: 20px;
}
.house-tabs {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.house-tab {
	padding: 3px 8px;
	border: 1px solid #bbb;
	border-radius: 5px;
	text-decoration: none;
	color: var(--text-dark);
	font-size: 14px;
	font-weight: 500;
}
.house-tab.active {
	background: var(--light-green);
	color: white;
	border: 1px solid var(--dark-green);
	
}
.house-tab[data-house-color] {
	border-color: var(--house-color);
}

.house-tab[data-house-color].active {
	background-color: var(--house-color);
	color: white;
}

.house-tab[data-house-color]:hover {
	background-color: var(--house-color);
	opacity: 0.8;
	color: white;
}

.prospective-item {
	background-color: var(--cream);
	padding: 7px 25px;
	border-radius: 5px;
	border: 0.5px solid var(--gold);
	margin-bottom: 10px;
}

/* Pending Events Styles */
.pending-event-item {
	background: #fff9e6;
	border: 1px solid #f59e0b;
	border-radius: 6px;
	padding: 12px;
	margin-bottom: 10px;
	position: relative;
}

.pending-event-item:hover {
	background: #fef3c7;
}

.event-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 6px;
}

.event-header strong {
	color: #92400e;
	font-size: 14px;
}

.event-date {
	background: #f59e0b;
	color: white;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 500;
}

.event-details {
	margin-bottom: 8px;
	color: #666;
}

.category-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 4px;
}

.event-actions {
	display: flex;
	gap: 8px;
}

.btn-approve, .btn-reject {
	padding: 4px 12px;
	border: none;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
	font-weight: 500;
	transition: all 0.2s;
}

.btn-approve {
	background: #10b981;
	color: white;
}

.btn-approve:hover {
	background: #059669;
}

.btn-reject {
	background: #ef4444;
	color: white;
}

.btn-reject:hover {
	background: #dc2626;
}

.pending-events-count {
	color: #f59e0b !important;
}

.more-events {
	text-align: center;
	padding-top: 10px;
	border-top: 1px solid #f3f4f6;
	margin-top: 10px;
}

.more-events a {
	color: #f59e0b;
	text-decoration: none;
	font-size: 13px;
}

.more-events a:hover {
	text-decoration: underline;
}

/* Prospective Families Table Styles */
.prospective-table {
	font-size: 0.9rem;
}

.prospective-table th {
	padding: 0.75rem 0.5rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.5px;
	background: #f8f9fa;
	border-bottom: 2px solid #dee2e6;
}

.prospective-table td {
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid #f1f3f4;
	vertical-align: top;
}

.prospective-table tr:hover {
	background-color: #f8f9fa;
}

.prospective-table .date-cell {
	text-align: center;
}

.prospective-table .email-cell a:hover {
	text-decoration: underline;
}

.prospective-table .grade-badge,
.prospective-table .program-badge {
	white-space: nowrap;
	display: inline-block;
}

.prospective-table .notes-cell {
	max-width: 200px;
	word-wrap: break-word;
}

@media (max-width: 1200px) {
	.prospective-table {
		font-size: 0.85rem;
	}
	
	.prospective-table th,
	.prospective-table td {
		padding: 0.5rem 0.25rem;
	}
	
	.prospective-table .notes-cell {
		max-width: 150px;
	}
}

@media (max-width: 768px) {
	.prospective-table {
		font-size: 0.8rem;
	}
	
	/* Hide notes and phone columns on mobile */
	.prospective-table .notes-cell,
	.prospective-table .phone-cell {
		display: none;
	}
	
	.prospective-table th:nth-child(4), /* Phone */
	.prospective-table td:nth-child(4),
	.prospective-table th:nth-child(8), /* Notes */
	.prospective-table td:nth-child(8) {
		display: none;
	}
}

/* ===== SOURCE: css/families.css ===== */
/* Families Page - Assignment Dashboard Styling */
/* Layout Controls */
.layout-controls {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
	justify-content: flex-end;
}

.layout-btn {
	padding: 8px 15px;
	border: 1px solid #ddd;
	background: white;
	cursor: pointer;
	border-radius: 4px;
	transition: all 0.2s;
}

.layout-btn.active {
	background: var(--dark-green);
	color: white;
	border-color: var(--dark-green);
}

.layout-btn:hover {
	background: var(--light-green);
	color: white;
}

/* Family Stats */
.family-stats {
	display: flex;
	gap: 15px;
}

.stat-badge {
	background: var(--gold);
	color: var(--dark-green);
	padding: 5px 12px;
	border-radius: 20px;
	font-size: 0.9rem;
	font-weight: 600;
}

/* Layout 1: Current 4-wide grid */
.families-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
}

.family-card {
	background: white;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	cursor: pointer;
	transition: all 0.2s;
	border-left: 4px solid var(--light-green);
}

.family-card:hover {
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
	transform: translateY(-2px);
}

.family-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 10px;
}

.family-name {
	color: var(--dark-green);
	margin: 0;
	font-size: 1.2rem;
}

.family-actions {
	display: flex;
	gap: 5px;
}

.family-parents {
	margin-bottom: 15px;
}

.parent-info {
	margin-bottom: 5px;
	font-size: 0.9rem;
}

.family-students {
	margin-bottom: 15px;
}

.student-count {
	font-weight: 600;
	color: var(--dark-green);
	margin-bottom: 5px;
}

.student-names {
	font-size: 0.9rem;
	color: #666;
}

.family-meta {
	border-top: 1px solid #eee;
	padding-top: 10px;
	color: #999;
}

/* Layout 2: Compact 8-wide grid */
.families-compact {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 15px;
}

.family-card-compact {
	background: white;
	border-radius: 6px;
	padding: 15px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	cursor: pointer;
	transition: all 0.2s;
	border-left: 3px solid var(--light-green);
	text-align: center;
}

.family-card-compact:hover {
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
	transform: translateY(-2px);
}

.family-name-compact {
	color: var(--dark-green);
	margin: 0 0 10px 0;
	font-size: 1rem;
	font-weight: 600;
}

.student-count-compact {
	background: var(--cream);
	color: var(--dark-green);
	padding: 5px 10px;
	border-radius: 12px;
	font-size: 0.9rem;
	font-weight: 600;
	display: inline-block;
}

.family-actions-compact {
	margin-top: 10px;
}

/* Layout 3: Row layout */
.families-rows {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.family-row {
	background: white;
	padding: 20px;
	cursor: pointer;
	transition: all 0.2s;
	border-left: 4px solid var(--light-green);
	display: flex;
	align-items: center;
	gap: 20px;
}

.family-row:hover {
	background: var(--cream);
}

.family-row + .family-row {
	border-top: 1px solid #eee;
}

.family-name-row {
	color: var(--dark-green);
	font-size: 1.1rem;
	font-weight: 600;
	min-width: 200px;
	margin: 0;
}

.family-info-row {
	flex: 1;
	display: grid;
	grid-template-columns: 2fr 2fr 1fr 1fr;
	gap: 20px;
	align-items: center;
}

.parent-info-row {
	font-size: 0.9rem;
}

.parent-info-row strong {
	display: block;
	color: var(--dark-green);
}

.students-info-row {
	font-size: 0.9rem;
}

.meta-info-row {
	font-size: 0.85rem;
	color: #666;
}

.family-actions-row {
	display: flex;
	gap: 5px;
}

/* Hide inactive layouts */
.families-grid.hidden,
.families-compact.hidden,
.families-rows.hidden {
	display: none;
}

.header-actions {
	display: flex;
	gap: 10px;
	align-items: center;
}

.btn-danger {
	background: #dc3545;
	color: white;
	border: none;
	padding: 10px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 500;
	transition: background 0.2s;
}

.btn-danger:hover {
	background: #c82333;
}

.family-name-section {
	display: flex;
	align-items: center;
	gap: 10px;
}

.family-name-display {
	display: flex;
	align-items: center;
	gap: 10px;
}

.family-name-display h1 {
	margin: 0;
	padding: 0;
}

.btn-edit-inline {
	background: transparent;
	border: 1px solid #ddd;
	color: #666;
	padding: 8px;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s;
}

.btn-edit-inline:hover {
	background: #f5f5f5;
	color: #333;
}

.family-name-edit {
	display: flex;
	align-items: center;
}

.inline-edit-form {
	display: flex;
	align-items: center;
	gap: 8px;
}

.family-name-input {
	font-size: 1.8rem;
	font-weight: bold;
	padding: 8px;
	border: 2px solid var(--light-green);
	border-radius: 4px;
	min-width: 300px;
}

.btn-save-inline {
	background: var(--success, #28a745);
	border: none;
	color: white;
	padding: 8px 12px;
	border-radius: 4px;
	cursor: pointer;
}

.btn-cancel-inline {
	background: #6c757d;
	border: none;
	color: white;
	padding: 8px 12px;
	border-radius: 4px;
	cursor: pointer;
}

.btn-save-inline:hover {
	background: #218838;
}

.btn-cancel-inline:hover {
	background: #5a6268;
}

.student-name-link {
	color: inherit;
	text-decoration: none;
}

.student-name-link:hover {
	color: var(--light-green);
	text-decoration: underline;
}

.family-detail-card {
	background: white;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	margin-bottom: 20px;
}

.family-details-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-bottom: 30px;
}

.students-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 20px;
}

.student-detail-card {
	background: white;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
	border: 0.5px solid var(--light-green);
}

.detail-field {
	margin-bottom: 15px;
}

.detail-field strong {
	display: inline-block;
	min-width: 120px;
	font-weight: 600;
}

.house-badge {
	color: white;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 0.8rem;
	margin-left: 10px;
}

.class-list {
	margin: 5px 0;
	padding-left: 20px;
}

.class-list li {
	margin-bottom: 5px;
}

.special-needs-text, .family-answer {
	margin-top: 8px;
	padding: 10px;
	background: #f8f9fa;
	border-radius: 4px;
	border-left: 3px solid #e9ecef;
}

.section {
	margin-top: 30px;
}

.section h2 {
	color: var(--dark-green);
	border-bottom: 2px solid var(--gold);
	padding-bottom: 10px;
	margin-bottom: 20px;
}

.family-questions {
	max-width: 100%;
}

.btn-map {
	background: var(--gold);
	color: black;
	text-decoration: none;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 0.9rem;
}

.btn-map:hover {
	background: var(--cream);
	color: black;
}

@media (max-width: 768px) {
	.family-name-section {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}
	
	.family-name-input {
		font-size: 1.4rem;
		min-width: 250px;
	}
	
	.family-details-grid {
		grid-template-columns: 1fr;
	}
	
	.students-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.dashboard-header {
		flex-direction: column;
		gap: 15px;
	}
	
	.header-actions {
		width: 100%;
		justify-content: flex-start;
	}
}

/* Empty state */
.empty-state {
	text-align: center;
	padding: 60px 20px;
	color: #666;
}

.empty-state h3 {
	color: var(--dark-green);
	margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 768px) {
	.families-grid {
		grid-template-columns: 1fr;
	}
	
	.families-compact {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
	
	.family-info-row {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	
	.layout-controls {
		justify-content: center;
	}
}
/* Override existing grid layout to match assignment cards */
.families-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.family-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 1px solid #e1e8ed;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.family-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  transform: translateY(-4px);
}

.family-header {
  padding: 10px;
  border-bottom: 1px solid #f1f3f4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.family-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--dark-green);
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
}

.family-actions {
  display: flex;
  gap: 0.5rem;
}

.family-card .btn-small {
  padding: 6px 12px;
  font-size: 0.75rem;
  border-radius: 6px;
}

/* Family content sections */
.family-parents,
.family-students {
  padding: 0 10px 10px;
}

.family-students {
  border-bottom: 1px solid #f1f3f4;
}

.parent-info {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.parent-info strong {
  color: var(--dark-green);
  font-weight: 600;
  display: block;
  margin-bottom: 0.25rem;
}

.student-count {
  font-weight: 600;
  color: var(--dark-green);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.student-names {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.4;
}

.family-meta {
  padding: 5px 10px;
  background: #f8f9fa;
  border-top: none;
  margin: 0;
}

.family-meta small {
  color: #666;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Header stats styling */
.family-stats {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.stat-badge {
  background: linear-gradient(135deg, var(--gold), var(--tan));
  color: var(--dark-green);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(230, 197, 102, 0.3);
}

/* Layout controls styling */
.layout-controls {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  justify-content: flex-end;
  align-items: center;
}

.layout-btn {
  padding: 10px 16px;
  border: 2px solid #e1e8ed;
  background: white;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
  font-size: 0.9rem;
  color: #666;
}

.layout-btn.active {
  background: var(--dark-green);
  color: white;
  border-color: var(--dark-green);
  box-shadow: 0 2px 8px rgba(33, 59, 45, 0.2);
}

.layout-btn:hover:not(.active) {
  background: var(--cream);
  border-color: var(--gold);
  color: var(--dark-green);
}

/* Compact layout styling */
.families-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.family-card-compact {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 1px solid #e1e8ed;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.family-card-compact:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  transform: translateY(-4px);
}

.family-name-compact {
  color: var(--dark-green);
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: 'Instrument Serif', Georgia, serif;
}

.student-count-compact {
  background: linear-gradient(135deg, var(--light-green), var(--dark-green));
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(53, 89, 70, 0.3);
}

/* Row layout styling */
.families-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #e1e8ed;
  border-radius: 12px;
  overflow: hidden;
}

.family-row {
  background: white;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 4px solid var(--gold);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.family-row:hover {
  background: var(--cream);
  border-left-color: var(--dark-green);
}

.family-row:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.family-row:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.family-name-row {
  color: var(--dark-green);
  font-size: 1.2rem;
  font-weight: 600;
  min-width: 200px;
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
}

.family-info-row {
  flex: 1;
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.parent-info-row {
  font-size: 0.9rem;
  line-height: 1.4;
}

.parent-info-row strong {
  display: block;
  color: var(--dark-green);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.students-info-row {
  font-size: 0.9rem;
  line-height: 1.4;
}

.students-info-row strong {
  color: var(--dark-green);
  font-weight: 600;
}

.meta-info-row {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.4;
}

/* Empty state styling */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: #666;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.empty-state h3 {
  color: var(--dark-green);
  margin-bottom: 1rem;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .families-grid {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .families-grid {
	grid-template-columns: 1fr;
	gap: 1rem;
  }
  
  .families-compact {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  
  .family-info-row {
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
  }
  
  .layout-controls {
	justify-content: center;
	flex-wrap: wrap;
  }
  
  .family-header {
	padding: 1rem 1rem 0.75rem 1rem;
  }
  
  .family-parents,
  .family-students {
	padding: 0 1rem 0.75rem 1rem;
  }
  
  .family-meta {
	padding: 0.75rem 1rem;
  }
  
  .family-row {
	padding: 1rem;
	gap: 1rem;
  }
  
  .family-name-row {
	min-width: auto;
	font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .layout-controls {
	width: 100%;
  }
  
  .layout-btn {
	flex: 1;
	text-align: center;
  }
  
  .family-stats {
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-start;
  }
  
  .family-info-row {
	grid-template-columns: 1fr;
	gap: 0.75rem;
  }
}

/* ===== SOURCE: css/assignments.css ===== */
/* Assignments Page - Unique Styles */
:root {
  --font-heading: 'Instrument Serif', Georgia, serif;
  --font-body: 'Archivo', sans-serif;
  --color-primary: #213b2d;
  --color-secondary: #e6c566;
  --color-accent: #6bbf59;
  --color-error: #dc3545;
  --color-success: #28a745;
  --color-warning: #e6c566;
  --color-border: #e1e8ed;
  --color-background: #f8f5ee;
  --border-radius: 4px;
  --border-radius-lg: 8px;
  --border-radius-full: 20px;
}

.checklist-item {
	margin-bottom: 0.75rem;
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.checklist-item input {
	flex: 1;
}

.remove-item {
	background-color: var(--color-error);
	color: white;
	border: none;
	padding: 0.25rem 0.5rem;
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: 0.875rem;
	transition: all 200ms ease-out;
}

.remove-item:hover {
	background-color: #8b4513;
}

.add-checklist-item {
	background-color: var(--color-secondary);
	color: white;
	border: none;
	padding: 0.5rem 1rem;
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: 0.875rem;
	transition: all 200ms ease-out;
}

.add-checklist-item:hover {
	background-color: var(--color-primary);
}

#previewContent h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-primary);
	margin-bottom: 0.5rem;
}

#previewContent .bg-warning {
	background-color: rgba(212, 165, 116, 0.2);
}

.hidden {
	display: none !important;
}

#autoSaveStatus {
	transition: opacity 300ms ease-out;
}

.recent-assignments .bg-white:hover {
	transform: translateY(-2px);
}

.sticky {
	position: sticky;
}

/* Compact Layout Styles */
.assignment-card-compact {
	background: white;
	border: 1px solid #e1e8ed;
	border-radius: 8px;
	padding: 16px;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}

.assignment-card-compact:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.assignment-compact-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.assignment-title-compact {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	color: var(--color-primary);
	line-height: 1.3;
}

.assignment-meta-flex {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 12px;
}

.teacher-assignment-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: flex-start;
}

@media (max-width: 768px) {
	.grid-cols-1.lg\\:grid-cols-12 {
		grid-template-columns: 1fr;
	}
	.lg\\:col-span-8,
	.lg\\:col-span-4 {
		grid-column: span 1;
	}
	.sticky {
		position: static;
	}
	.md\\:grid-cols-3 {
		grid-template-columns: 1fr;
	}
}

input:focus,
select:focus,
textarea:focus,
button:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

button.bg-accent:hover {
	background-color: var(--color-primary);
}

button.bg-secondary:hover {
	background-color: var(--color-primary);
}

.form-field-error {
	border-color: var(--color-error);
}

.form-field-error:focus {
	border-color: var(--color-error);
	box-shadow: 0 0 0 3px rgba(160, 82, 45, 0.2);
}

.bg-success {
	background-color: var(--color-success);
}

.text-error {
	color: var(--color-error);
}

.text-warning {
	color: var(--red);
}

.border-warning {
	border-color: var(--color-warning);
}

.bg-opacity-20 {
	background-color: rgba(var(--color-warning-rgb, 230, 197, 102), 0.2);
}

textarea::-webkit-scrollbar {
	width: 8px;
}

textarea::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: var(--border-radius);
}

textarea::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: var(--border-radius);
}

textarea::-webkit-scrollbar-thumb:hover {
	background: var(--color-secondary);
}

.dashboard-main h1 {
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 30px;
	letter-spacing: -1px;
	font-weight: 400;
}
.dashboard-main h2 {
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 24px;
	letter-spacing: -1px;
	font-weight: 500;
}
.dashboard-main h3 {
	text-transform: uppercase;
	color: var(--color-primary);
	font-weight: 600;
}
.assignment-section {
	margin-bottom: 20px;
}

.links-section {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* Filter visibility for assignments2.php */
.daily-filter {
	display: flex;
}

.weekly-filter {
	display: none;
}

/* Pagination Styles */
.pagination-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.5rem 0;
	margin-top: 1.5rem;
	border-top: 1px solid var(--color-border);
}

.pagination-info {
	color: #666;
	font-size: 0.875rem;
}

.pagination-controls {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.pagination-pages {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.pagination-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 0.5rem;
	border: 1px solid var(--color-border);
	background: white;
	color: var(--color-primary);
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 500;
	transition: all 150ms ease;
}

.pagination-btn:hover:not(:disabled) {
	background: var(--color-background);
	border-color: var(--color-secondary);
}

.pagination-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.pagination-btn.active {
	background: var(--color-primary);
	color: white;
	border-color: var(--color-primary);
}

a.pagination-btn.disabled {
	opacity: 0.4;
	pointer-events: none;
	cursor: not-allowed;
}

.pagination-ellipsis {
	padding: 0 0.5rem;
	color: #666;
}

@media (max-width: 640px) {
	.pagination-container {
		flex-direction: column;
		gap: 1rem;
	}

	.pagination-controls {
		flex-wrap: wrap;
		justify-content: center;
	}
}


/* PDF Embed Preview */
.file-item-pdf {
    flex-direction: column;
}

.pdf-embed-preview {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #f1f5f9;
}

.pdf-preview-frame {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
}

.pdf-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    padding: 20px 12px 12px;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s ease;
}

.pdf-overlay:hover {
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
}

.pdf-overlay i {
    margin-right: 6px;
}

.file-item-pdf .file-info {
    padding: 12px;
    background: white;
    border-top: 1px solid #e2e8f0;
}

.file-download-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 12px;
    background: #f1f5f9;
    border-radius: 6px;
    color: #475569;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.file-download-link:hover {
    background: #e2e8f0;
    color: #1e293b;
}


/* ===== SOURCE: css/assignments2.css ===== */
/* Assignment2.php specific styles - Weekly View Enhancement */

/* Weekly Assignments View */
.weekly-assignments {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	max-width: 100%;
}

.weekly-assignment-card {
	background: white;
	border-radius: 5px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.weekly-assignment-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.weekly-card-header {
	padding: 1rem;
	color: white;
}

.weekly-header-content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.weekly-subject-info {
	display: flex;
	align-items: start;
	gap: 0.75rem;
}

.weekly-subject-info h3 {
	font-size: 1rem;
	margin: 0;
}

.weekly-subject-info p {
	font-size: 0.8rem;
	margin: 0;
}

.weekly-date-range {
	font-weight: 600;
	font-size: 0.9rem;
	opacity: 0.95;
}

.weekly-card-content {
	padding: 1rem;
	background: white;
}

.daily-assignments {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.daily-assignment-item {
	display: flex;
	align-items: start;
	gap: 0.5rem;
}

.day-name {
	font-weight: 600;
	color: #555;
	min-width: 82px;
	font-size: 12px;
	text-transform: uppercase;
}

.assignment-link {
	color: #2563eb;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 13px;
	line-height: 18px;
}

.assignment-link:hover {
	color: #1d4ed8;
	text-decoration: underline;
}

.draft-indicator {
	background: #fef3c7;
	color: #d97706;
	padding: 1px 5px;
	border-radius: 0.375rem;
	font-size: 10px;
	font-weight: 700;
	word-break: keep-all;
}

/* View Mode Toggle Styles */
.view-toggle {
	display: flex;
	background: #f3f4f6;
	border-radius: 8px;
	padding: 4px;
}

.view-toggle button {
	padding: 8px 16px;
	border: none;
	background: transparent;
	border-radius: 6px;
	font-weight: 500;
	color: #6b7280;
	cursor: pointer;
	transition: all 0.2s ease;
}

.view-toggle button.active {
	background: white;
	color: #374151;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.layout-toggle {
	display: flex;
	background: #f3f4f6;
	border-radius: 8px;
	padding: 4px;
	margin-left: 1rem;
}

.layout-toggle button {
	padding: 8px 12px;
	border: none;
	background: transparent;
	border-radius: 6px;
	color: #6b7280;
	cursor: pointer;
	transition: all 0.2s ease;
}

.layout-toggle button.active {
	background: white;
	color: #374151;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Filter visibility */
.weekly-filter {
	display: none;
}

.daily-filter {
	display: flex;
}

/* ===== SOURCE: css/class-assignments.css ===== */
/* Class Assignments Styles */

.class-actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

.btn-edit {
	background-color: #007bff;
	color: white;
	border: none;
	padding: 6px 12px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	transition: background-color 0.2s;
}

.btn-edit:hover {
	background-color: #0056b3;
}

.form-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.form-header h2 {
	margin: 0;
}

.delete-form {
	display: inline;
}

.btn-delete {
	background-color: #dc3545;
	color: white;
	border: none;
	padding: 6px 10px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	transition: background-color 0.2s;
}

.btn-delete:hover {
	background-color: #c82333;
}

.class-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	background: white;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 12px;
}

.class-info {
	flex-grow: 1;
}

.class-info h3 {
	margin: 0 0 8px 0;
	color: #333;
}

.class-details {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.subject-tag, .grades-tag, .enrollment-tag {
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
}

.subject-tag {
	color: white;
}

.grades-tag {
	background-color: #f8f9fa;
	color: #495057;
	border: 1px solid #dee2e6;
}

.enrollment-tag {
	background-color: #e3f2fd;
	color: #1976d2;
	border: 1px solid #bbdefb;
}

.class-description {
	margin: 8px 0 0 0;
	color: #666;
	font-size: 14px;
}

/* ===== SOURCE: css/teachers.css ===== */
.teachers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 1.5rem;
}

.teacher-card {
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	border: 1px solid #e1e8ed;
	overflow: hidden;
	transition: all 0.3s ease;
	cursor: pointer;
}

.teacher-card:hover {
	box-shadow: 0 8px 30px rgba(0,0,0,0.15);
	transform: translateY(-4px);
}

.teacher-header {
	padding: 1.5rem;
	border-bottom: 1px solid #f1f3f4;
	display: flex;
	align-items: center;
	gap: 1rem;
	position: relative;
}
.teacher-classes {
	padding: 20px;
}
.teacher-photo {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--cream);
	flex-shrink: 0;
}

.teacher-photo.placeholder {
	background: var(--cream);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dark-green);
	font-size: 2rem;
	font-weight: bold;
}

.teacher-info {
	flex: 1;
}

.teacher-name {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--dark-green);
	margin: 0 0 0.5rem 0;
	font-family: 'Instrument Serif', Georgia, serif;
}

.teacher-email {
	color: #666;
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
}

/* .house-badge {
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 0.8rem;
	font-weight: 600;
	color: white;
	display: inline-block;
} */

.house-augustine { background-color: #a22010; }
.house-aquinas { bbackground-color: #143648; }
.house-athanasius { background-color: #482c4e; }
.house-ambrose { background-color: #d89a00; }

.teacher-grades {
	padding: 0 1.5rem 1rem 1.5rem;
	border-bottom: 1px solid #f1f3f4;
}

.grade-count {
	font-weight: 600;
	color: var(--dark-green);
	margin-bottom: 0.5rem;
}

.grade-list {
	font-size: 0.9rem;
	color: #666;
	line-height: 1.4;
}

.teacher-subjects {
	padding: 0 1.5rem 1rem 1.5rem;
	border-bottom: 1px solid #f1f3f4;
}

.subject-count {
	font-weight: 600;
	color: var(--dark-green);
	margin-bottom: 0.5rem;
}

.subject-list {
	font-size: 0.9rem;
	color: #666;
	line-height: 1.4;
}

.teacher-meta {
	padding: 1rem 1.5rem;
	background: #f8f9fa;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.teacher-actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.house-tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}

.house-tab {
	padding: 10px 16px;
	border: 2px solid #e1e8ed;
	background: white;
	text-decoration: none;
	border-radius: 20px;
	font-weight: 500;
	font-size: 0.9rem;
	color: #666;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.house-tab.active {
	background: var(--dark-green);
	color: white;
	border-color: var(--dark-green);
}

.house-tab:hover:not(.active) {
	background: var(--cream);
	border-color: var(--gold);
	color: var(--dark-green);
}

.house-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.teacher-stats {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.stat-badge {
	background: linear-gradient(135deg, var(--gold), var(--tan));
	color: var(--dark-green);
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 0.9rem;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(230, 197, 102, 0.3);
}

.modal-content {
	max-width: 600px;
	max-height: 90vh;
	overflow-y: auto;
}

.subject-assignment-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.5rem;
	margin-top: 1rem;
}

.grade-assignment-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 0.5rem;
	margin-top: 1rem;
}

.assignment-option {
	padding: 0.75rem;
	border: 1px solid #ddd;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s;
}

.assignment-option:hover {
	background: var(--cream);
}

.assignment-option input[type="checkbox"]:checked + span {
	font-weight: 600;
	color: var(--dark-green);
}

.photo-upload-area {
	border: 2px dashed #ddd;
	border-radius: 8px;
	padding: 2rem;
	text-align: center;
	background: #f9f9f9;
	transition: all 0.3s;
}

.photo-upload-area:hover {
	border-color: var(--gold);
	background: var(--cream);
}

.current-photo {
	max-width: 150px;
	border-radius: 8px;
	margin-bottom: 1rem;
}

.workflow-info {
	background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
	border: 1px solid #bbdefb;
	border-radius: 8px;
	padding: 1rem;
	margin-bottom: 1rem;
}

.workflow-step {
	color: #1976d2;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
	.teachers-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	
	.teacher-header {
		padding: 1rem;
		flex-direction: column;
		text-align: center;
	}
	
	.teacher-photo {
		width: 60px;
		height: 60px;
	}
	
	.subject-assignment-grid {
		grid-template-columns: 1fr;
	}
	
	.grade-assignment-grid {
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	}
	
	.teacher-actions {
		justify-content: center;
		width: 100%;
	}
}

/* Class access styling */
.class-tag.additional-instructor {
	opacity: 0.8;
	border: 1px dashed rgba(255,255,255,0.3);
}

.class-tag.primary-instructor {
	border: 1px solid rgba(255,255,255,0.2);
}

.class-summary {
	margin-top: 0.5rem;
	font-style: italic;
	color: #666;
}

.class-access-item {
	margin-bottom: 8px;
}

.class-access-item label {
	cursor: pointer;
	padding: 8px;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.class-access-item label:hover {
	background-color: #f8f9fa;
}

.current-access-item {
	background: #f8f9fa;
	border-radius: 4px;
}

.current-access-item:hover {
	background: #e9ecef;
}

/* ===== SOURCE: css/students.css ===== */
.layout-controls {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 2rem;
	justify-content: flex-end;
	align-items: center;
}

.layout-btn {
	padding: 6px 12px;
	border: 1px solid #e1e8ed;
	background: white;
	cursor: pointer;
	border-radius: 5px;
	transition: all 0.3s ease;
	font-weight: 500;
	font-size: 13px;
	color: var(--text-dark);
}

.layout-btn.active {
	background: var(--light-green);
	color: white;
	border-color: var(--dark-green);
	box-shadow: 0 2px 8px rgba(33, 59, 45, 0.2);
}

.layout-btn:hover:not(.active) {
	background: var(--cream);
	border-color: var(--gold);
	color: var(--dark-green);
}

/* Layout 1: Grid View */
.students-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.5rem;
}

.student-card {
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	border: 1px solid #e1e8ed;
	overflow: hidden;
	transition: all 0.3s ease;
	cursor: pointer;
	padding: 15px 25px;
}

.student-card:hover {
	box-shadow: 0 8px 30px rgba(0,0,0,0.15);
	transform: translateY(-4px);
}

.student-header {
	margin-bottom: 1rem;
}

/* .student-name {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--dark-green);
	margin: 0;
	font-family: 'Instrument Serif', Georgia, serif;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
} */

.student-info {
	margin-bottom: 1rem;
}
.student-info h1 {
	color: #fff;
}

.info-row {
	margin-bottom: 0.75rem;
	font-size: 0.9rem;
	line-height: 1.4;
}

.info-row strong {
	color: var(--dark-green);
	font-weight: 600;
	display: inline-block;
	min-width: 70px;
}

.info-row a {
	color: var(--light-green);
	text-decoration: none;
}

.info-row a:hover {
	text-decoration: underline;
}

/* Layout 2: Compact Grid */
.students-compact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}

.student-card-compact {
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	border: 1px solid #e1e8ed;
	padding: 20px 10px;
	text-align: center;
	transition: all 0.3s ease;
	cursor: pointer;
}

.student-card-compact:hover {
	box-shadow: 0 8px 30px rgba(0,0,0,0.15);
	transform: translateY(-4px);
}

.student-name-compact {
	color: var(--dark-green);
	margin: 0 0 1rem 0;
	font-size: 16px;
	font-weight: 600;
	font-family: 'Archivo', sans-serif;
}

.student-grade-compact {
	background: linear-gradient(135deg, var(--light-green), var(--dark-green));
	color: white;
	padding: 2px 15px;
	border-radius: 20px;
	font-size: 0.9rem;
	font-weight: 600;
	display: inline-block;
	margin-right: 10px;
	box-shadow: 0 2px 8px rgba(53, 89, 70, 0.3);
}

.student-house-compact {
	padding: 6px 12px;
	border-radius: 15px;
	font-size: 0.8rem;
	font-weight: 600;
	color: white;
	display: inline-block;
	margin-top: 0.5rem;
}

/* Hide inactive layouts */
.students-grid.hidden,
.students-compact.hidden,
.students-table.hidden {
	display: none;
}

/* House badge colors */
/* .house-badge, .student-house-compact {
	padding: 0.25rem 0.75rem;
	border-radius: 12px;
	font-size: 0.8rem;
	font-weight: 600;
	color: white;
} */

.house-badge.house-augustine, .student-house-compact.house-augustine {
	background-color: #a22010;
}

.house-badge.house-aquinas, .student-house-compact.house-aquinas {
	background-color: #143648;
}

.house-badge.house-athanasius, .student-house-compact.house-athanasius {
	background-color: #482c4e;
}

.house-badge.house-ambrose, .student-house-compact.house-ambrose {
	background-color: #d89a00;
}

/* Empty state */
.empty-state {
	text-align: center;
	padding: 4rem 2rem;
	color: #666;
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.empty-state h3 {
	color: var(--dark-green);
	margin-bottom: 1rem;
	font-family: 'Instrument Serif', Georgia, serif;
	font-size: 1.5rem;
}

.header-actions {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.dashboard-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
}

.action-buttons {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 0;
}

.student-count {
	padding: 2px;
	border-radius: 5px;
	font-size: 14px;
	font-weight: 500;
	margin-left: 0.5rem;
	color: var(--gold);
}

.grade-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.grade-tab {
	padding: 3px 8px;
	background: #fff;
	border: 1px solid #bbb;
	border-radius: 5px;
	text-decoration: none;
	color: var(--text-dark);
	font-weight: 500;
	transition: all 0.2s;
	display: flex;
	align-items: center;
}

.grade-tab:hover {
	background: var(--cream);
	text-decoration: none;
	border: 1px solid var(--gold);
}

.grade-tab.active {
	background: var(--light-green);
	color: white;
	border-color: var(--dark-green);
}

.students-table {
	background: white;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.students-table table {
	width: 100%;
	border-collapse: collapse;
}

.students-table th {
	background: var(--dark-green);
	color: white;
	padding: 1rem;
	text-align: left;
	font-weight: 600;
}

.students-table td {
	padding: 10px;
	border-bottom: 1px solid #eee;
	vertical-align: middle;
}

.students-table tr:last-child td {
	border-bottom: none;
}

.students-table tr:hover {
	background: #f8f9fa;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.students-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	
	.students-compact {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}
	
	.layout-controls {
		justify-content: center;
		flex-wrap: wrap;
	}
	
	.student-card {
		padding: 1rem;
	}
	
	.student-name {
		font-size: 1.1rem;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	
	.dashboard-header {
		flex-direction: column;
		gap: 1rem;
		align-items: stretch;
	}
	
	.grade-tabs {
		justify-content: center;
	}
	
	.grade-tab {
		text-align: center;
		flex: 1;
		min-width: 100px;
	}
	
	.students-table {
		overflow-x: auto;
	}
	
	.action-buttons {
		flex-direction: column;
	}
}

@media (max-width: 480px) {
	.layout-controls {
		width: 100%;
	}
	
	.layout-btn {
		flex: 1;
		text-align: center;
	}
}

.edit-student-container {
	max-width: 1200px;
	margin: 0 auto;
}

.student-header {
	background: var(--gold);
	color: white;
	padding: 10px 20px;
	border-radius: 8px;
	margin-bottom: 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.student-info h1 {
	margin: 0;
	font-size: 2rem;
	color: black;
}

.student-meta {
	color: var(--text-dark);
	border-top: 1px solid var(--cream);
	padding-top: 10px;
	margin-top: 10px;
}

.student-meta small {
	color: #666;
	font-size: 0.85rem;
	font-weight: 500;
}

.tabs {
	display: flex;
	border-bottom: 2px solid #eee;
	margin-bottom: 2rem;
}

.tab {
	padding: 1rem 2rem;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	border-bottom: 3px solid transparent;
	transition: all 0.3s;
}

.tab.active {
	border-bottom-color: var(--gold);
	background: var(--cream);
}

.tab-content {
	display: none;
}

.tab-content.active {
	display: block;
}

.form-section {
	background: white;
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	margin-bottom: 2rem;
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
}

.form-group {
	margin-bottom: 1.5rem;
}

.form-group label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: var(--dark-green);
}

.form-group input,
.form-group select,
.form-group textarea {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1rem;
}

.form-group textarea {
	min-height: 100px;
	resize: vertical;
}

.form-group small {
	display: block;
	color: #666;
	font-size: 0.9rem;
	margin-top: 0.25rem;
}

.classes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.class-card {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 1rem;
	background: white;
	transition: all 0.3s;
}

.class-card.enrolled {
	border-color: var(--gold);
	background: var(--cream);
}

.class-card:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.class-card label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	margin: 0;
}

.class-info {
	flex: 1;
}

.class-title {
	font-weight: 600;
	color: var(--dark-green);
}

.class-teacher {
	font-size: 0.9rem;
	color: #666;
}

.notes-list {
	max-height: 400px;
	overflow-y: auto;
}

.note-item {
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 1rem;
	margin-bottom: 1rem;
	background: white;
}

.note-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.note-type {
	padding: 0.25rem 0.75rem;
	border-radius: 12px;
	font-size: 0.8rem;
	font-weight: 600;
}

.note-type.academic {
	background: #e3f2fd;
	color: #1976d2;
}

.note-type.behavioral {
	background: #fff3e0;
	color: #f57c00;
}

.note-type.medical {
	background: #ffebee;
	color: #d32f2f;
}

.note-type.general {
	background: #f3e5f5;
	color: #7b1fa2;
}

.note-meta {
	font-size: 0.9rem;
	color: #666;
}

.current-classes {
	background: var(--cream);
	padding: 1rem;
	border-radius: 8px;
	margin-bottom: 2rem;
}

.current-classes h4 {
	margin-bottom: 1rem;
	color: var(--dark-green);
}

.class-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.class-tag {
	background: var(--dark-green);
	color: white;
	padding: 0.25rem 0.75rem;
	border-radius: 12px;
	font-size: 0.9rem;
}

.error-message {
	background: #f8d7da;
	color: #721c24;
	padding: 1rem;
	border-radius: 8px;
	margin-bottom: 1rem;
	border: 1px solid #f5c6cb;
}

.success-message {
	background: #d4edda;
	color: #155724;
	padding: 1rem;
	border-radius: 8px;
	margin-bottom: 1rem;
	border: 1px solid #c3e6cb;
}

@media (max-width: 768px) {
	.student-header {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
	}
	
	.tabs {
		flex-wrap: wrap;
	}
	
	.tab {
		flex: 1;
		min-width: 120px;
	}
	
	.form-grid {
		grid-template-columns: 1fr;
	}
	
	.classes-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== SOURCE: css/messages.css ===== */
.shadow-academic { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.text-text-primary { color: #111827; }
.text-text-secondary { color: #6b7280; }
.bg-background { background-color: #f9fafb; }
.focus\:ring-secondary:focus { --tw-ring-color: #10b981; }
.hover\:bg-secondary-dark:hover { background-color: #059669; }
.transition-gentle { transition: all 0.2s ease-in-out; }
.unread-message { border-left: 3px solid #ef4444; }
.bg-gray-25 { background-color: #fafafa; }
.message-bubble { 
	word-wrap: break-word; 
	background-color: #5395e9;
	color: white;
}
.conversation-item {
	padding: 10px;
}
.conversation-item.active {
	background-color: #e3f2fd;
	border-left: 4px solid #2196f3;
}
.rounded-full {
	background-color: var(--dark-green);
	color: white;
}
.no-message {
	padding: 30px 0;
}
.text-right .direct-message {
	justify-content: end;
}
.direct-message-them {
	background-color: #efefef;
	color: #222;
	word-wrap: break-word;
	border-radius: 5px 30px 30px 30px;
}
.direct-message-me {
	background-color: #5395e9;
	color: #fff;
	word-wrap: break-word;
	text-align: left;
	border-radius: 30px 5px 30px 30px;
}
.text-right { text-align: right; }
.conversation-parent { padding: 7px 0 7px 20px !important; }
.unread-message {
	border-left: 3px solid #ef4444;
}
.conversation-item.bg-background {
	background-color: #e3f2fd;
	border-left: 4px solid #2196f3;
}
.admin-conversation-item {
	padding: 7px 15px;
}
.admin-conversation-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--light-green);
	overflow: hidden;
}
.direct-message-them-chat {
	max-width: 93%;
}
.admin-conversation-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
}
.admin-conversation-family {
	font-size: 12px;
	color: #aaa;
	line-height: 13px;
}
.chat-box {
	height: 80vh;
}
.chat-field {
	margin-top: auto;
}
.avatar-mini {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 10px;
	border: 2px solid var(--light-green);
}
.conversation-item-mini {
	padding: 10px;
	border-right: 0.5px dotted var(--light-green);
	border-radius: 10px;
	border-bottom: 0.5px dotted var(--light-green);
	margin-top: 10px;
	background-color: var(--light-grey);
}
.conversation-item-mini.active {
	background-color: #e3f2fd;
	border-left: 4px solid #2196f3;
}
.dashboard-main h2 {
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 24px;
	letter-spacing: -1px;
	font-weight: 500;
}
.conversation-icon {
	font-size: 25px;
	margin: 5px 15px 5px 5px;
}
.conversation-class-title {
	line-height: 18px;
}
.conversation-section {
	border-top: 1px solid var(--gold);
	padding: 10px 0 0;
}
.conversation-item {
	padding: 10px 15px;
}
.conversation-section-title {
	padding: 0 15px;
	text-transform: capitalize;
	color: #555;
	font-weight: 500;
	font-size: 14px;
	line-height: 14px !important;
	margin-bottom: 10px;
}
.conversation-class-item {
	padding: 10px;
	border: 1px solid var(--grey);
	border-radius: 5px;
	margin: 8px 15px;
}
.conversation-class-item:last-child {
	/* padding: 10px 15px;
	border-bottom: 0; */
}
.conversation-class-item.active {
	background-color: #e3f2fd;
	border-left: 4px solid #2196f3;
}

.message-right {
	grid-column: span 8 / span 8;
}
.message-left {
	grid-column: span 4 / span 4;
}
.message-grid {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 20px;
	display: grid;
}
.message-mine {
	justify-content: end;
}

/* ===== SOURCE: css/messaging.css ===== */
.collapsible-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	transition: all 0.2s ease;
	user-select: none;
}

.collapsible-header:hover {
	color: #374151;
}

.section-toggle {
	font-size: 12px;
	transition: transform 0.2s ease;
	color: #9ca3af;
}

.section-toggle.rotated {
	transform: rotate(-90deg);
}

.section-content {
	overflow: hidden;
	transition: max-height 0.3s ease, opacity 0.2s ease;
	opacity: 1;
}

.section-content.collapsed {
	max-height: 0;
	opacity: 0;
}

.messaging-container {
	height: calc(100vh - 120px);
	max-height: calc(100vh - 120px);
	display: flex;
	background: white;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.conversations-sidebar {
	width: 350px;
	border-right: 1px solid #e5e7eb;
	display: flex;
	flex-direction: column;
	background: #fafafa;
}

.sidebar-header {
	padding: 20px;
	border-bottom: 1px solid #e5e7eb;
	background: white;
}

.conversations-list {
	flex: 1;
	overflow-y: auto;
	padding: 8px 0;
}

.conversation-section {
	margin-bottom: 10px;
}

.section-title {
	padding: 12px 20px 8px;
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.conversation-item {
	padding: 12px 20px;
	cursor: pointer;
	transition: background-color 0.15s ease;
	border-left: 3px solid transparent;
	display: flex;
	align-items: center;
	gap: 12px;
}

.conversation-item:hover {
	background: #f3f4f6;
}

.conversation-item.active {
	background: #eff6ff;
	border-left-color: #3b82f6;
}

.conversation-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
}

.conversation-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avatar-initials {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 600;
	font-size: 14px;
}

.conversation-info {
	flex: 1;
	min-width: 0;
}



.conversation-time {
	font-size: 10px;
	color: #6b7280;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.unread-badge {
	background: #ef4444;
	color: white;
	border-radius: 12px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	min-width: 18px;
	height: 18px;
	text-align: center;
	word-break: keep-all;
}

.chat-area {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: white;
	height: calc(100vh - 140px);
}

.chat-header {
	padding: 20px 24px;
	border-bottom: 1px solid #e5e7eb;
	background: white;
	gap: 16px;
	display: flex;
	align-items: center;
}

.chat-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
}

.chat-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.chat-avatar .avatar-initials {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 18px;
	color: white;
}

.chat-subtitle {
	font-size: 14px;
	color: #6b7280;
	margin-top: 4px;
}

.messages-container {
	flex: 1;
	overflow-y: auto;
	padding: 24px;
	background: #f9fafb;
}

.message-group {
	margin-bottom: 24px;
}

.message-item {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}

.message-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.message-content {
	max-width: 70%;
	min-width: 0;
	align-items: start;
}

.message-bubble {
	padding: 12px 16px;
	border-radius: 18px;
	font-size: 14px;
	line-height: 1.4;
	word-wrap: break-word;
}

.message-item:not(.mine) .message-bubble {
	background: white;
	color: #111827;
	border-bottom-left-radius: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.message-item.mine .message-bubble {
	background: #3b82f6;
	color: white;
	border-bottom-right-radius: 6px;
}

.message-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	font-size: 12px;
	color: #6b7280;
}

.message-item.mine .message-meta {
	justify-content: flex-end;
}

.message-input-area {
	padding: 20px 24px;
	border-top: 1px solid #e5e7eb;
	background: white;
}

.message-form {
	display: flex;
	gap: 12px;
	align-items: center;
}

.message-input {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid #d1d5db;
	border-radius: 24px;
	font-size: 16px;
	resize: none;
	max-height: 100px;
}

.message-input:focus {
	outline: none;
	border-color: #3b82f6;
}

.send-button {
	width: 53px;
	height: 53px;
	border-radius: 50%;
	background: #3b82f6;
	border: none;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.send-button:hover {
	background: #2563eb;
}

/* Attach button */
.attach-button {
	width: 53px;
	height: 53px;
	border-radius: 50%;
	background: #f3f4f6;
	border: 1px solid #d1d5db;
	color: #6b7280;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.15s ease;
	flex-shrink: 0;
}

.attach-button:hover {
	background: #e5e7eb;
	color: #374151;
}

/* Attachment preview bar */
.attachment-preview {
	padding: 8px 24px;
	background: #f9fafb;
	border-top: 1px solid #e5e7eb;
}

.attachment-preview-content {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: white;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 13px;
	color: #374151;
}

.attachment-preview-content i:first-child {
	color: #3b82f6;
}

.attachment-preview-content span {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.attachment-remove {
	background: none;
	border: none;
	color: #9ca3af;
	cursor: pointer;
	padding: 2px 4px;
	font-size: 14px;
}

.attachment-remove:hover {
	color: #ef4444;
}

/* Attachment display in messages */
.message-attachment {
	margin-top: 8px;
}

.attachment-image {
	max-width: 300px;
	max-height: 200px;
	border-radius: 8px;
	cursor: pointer;
	display: block;
}

.attachment-image:hover {
	opacity: 0.9;
}

.attachment-file-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: #f3f4f6;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	color: #374151;
	text-decoration: none;
	font-size: 13px;
	transition: background 0.15s;
}

.attachment-file-link:hover {
	background: #e5e7eb;
}

.attachment-file-link i:first-child {
	color: #3b82f6;
	font-size: 18px;
}

.attachment-file-link i:last-child {
	color: #9ca3af;
	font-size: 12px;
}

.empty-state {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #6b7280;
	text-align: center;
	padding: 48px 24px;
}

.empty-state i {
	font-size: 48px;
	margin-bottom: 16px;
	opacity: 0.5;
}

/* Special avatar styles */
.mentors-avatar {
	background: linear-gradient(135deg, #1e3a8a, #3b82f6);
}

.director-avatar {
	background: linear-gradient(135deg, #059669, #10b981);
}

.tech-support-avatar {
	background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.teacher-avatar {
	background: linear-gradient(135deg, #dc2626, #ef4444);
}

.student-avatar {
	background: linear-gradient(135deg, #0891b2, #06b6d4);
}

.parent-avatar {
	background: linear-gradient(135deg, #ea580c, #f97316);
}

.admin-avatar {
	background: linear-gradient(135deg, #059669, #10b981);
}

/* House colors */
.house-avatar {
	border: 2px solid currentColor;
}

.success-message {
	background: #d1fae5;
	border: 1px solid #a7f3d0;
	color: #065f46;
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 16px;
}



/* Enhanced Messages CSS - Saints Classical Academy */

.messaging-container {
	display: flex;
	height: calc(100vh - 140px);
	background: #f8f9fa;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Left Sidebar */
.conversations-sidebar {
	width: 320px;
	background: white;
	border-right: 1px solid #e1e5e9;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: calc(100vh - 130px);
}

.sidebar-header {
	padding: 20px;
	border-bottom: 1px solid #e1e5e9;
	background: #f8f9fa;
}

.search-box:focus {
	outline: none;
	border-color: #3b82f6;
	background: white;
}
.search-box {
	width: 100%;
	padding: 10.75px 16px;
	border: 2px solid #e1e5e9;
	border-radius: 5px;
	font-size: 14px;
	transition: border-color 0.2s ease;
}

/* New User Search Results */
.new-user-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	max-height: 79vh;
	height: 79vh;
	overflow-y: auto;
	z-index: 1000;
	margin-top: 4px;
}

.new-user-results.hidden {
	display: none;
}

.new-user-result-item {
	display: flex;
	align-items: center;
	padding: 12px;
	cursor: pointer;
	border-bottom: 1px solid #f3f4f6;
	transition: background-color 0.15s ease;
}

.new-user-result-item:hover {
	background-color: #f9fafb;
}

.new-user-result-item:last-child {
	border-bottom: none;
}

.new-user-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #6b7280;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 14px;
	margin-right: 12px;
	flex-shrink: 0;
}

.new-user-info h4 {
	margin: 0 0 2px 0;
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
}

.new-user-info p {
	margin: 0;
	font-size: 12px;
	color: #6b7280;
}

.sidebar-header {
	position: relative;
}

/* Hide conversation button */
.hide-conversation-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	background: none;
	border: none;
	color: #9ca3af;
	font-size: 12px;
	cursor: pointer;
	padding: 4px;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.15s ease;
}

.conversation-item {
	position: relative;
}

.conversation-item:hover .hide-conversation-btn {
	opacity: 1;
}

.hide-conversation-btn:hover {
	background: #f3f4f6;
	color: #ef4444;
}

.conversations-list {
	flex: 1;
	overflow-y: auto;
	padding: 0;
}

/* Conversation Sections */
.conversation-section {
	border-bottom: 1px solid #f0f0f0;
}

.section-title {
	padding: 16px 20px 12px 20px;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #6b7280;
	background: #f8f9fa;
	position: sticky;
	top: 0;
	z-index: 10;
}

.section-title.collapsible-header {
	cursor: pointer;
	user-select: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background-color 0.2s ease;
}

.section-title.collapsible-header:hover {
	background: #f1f3f4;
}

.section-toggle {
	transition: transform 0.2s ease;
	font-size: 12px;
}

.section-toggle.rotated {
	transform: rotate(-90deg);
}

.section-content {
	transition: all 0.2s ease;
}

.section-content.collapsed {
	display: none;
}

/* Conversation Items */
.conversation-item {
	display: flex;
	align-items: center;
	padding: 12px 20px;
	cursor: pointer;
	transition: all 0.2s ease;
	border-left: 4px solid transparent;
	position: relative;
}

.conversation-item:hover {
	background: #f8f9fa;
}

.conversation-item.active {
	background-color: #e3f2fd;
	border-left: 4px solid #2196f3;
}

.conversation-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	margin-right: 2px;
	position: relative;
	flex-shrink: 0;
}

.conversation-avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.avatar-initials {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 16px;
	color: white;
}

/* Avatar Type Colors */
.teacher-avatar {
	background: #355946;
}

.student-avatar {
	background: #7c2d12;
}

.parent-avatar {
	background: #1e40af;
}

.director-avatar {
	background: #7c2d12;
}

.mentors-avatar {
	background: #059669;
}

.tech-support-avatar {
	background: #1f2937;
}

.house-avatar {
	border: 2px solid currentColor;
}

.conversation-info {
	flex: 1;
	min-width: 0;
}

.conversation-name {
	font-weight: 500;
	font-size: 14px;
	line-height: 14px;
	color: #1f2937;
	margin-bottom: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.conversation-preview {
	font-size: 12px;
	color: var(--color-success);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Chat Area */
.chat-area {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: white;
}

.chat-header {
	padding: 20px 24px;
	border-bottom: 1px solid #e1e5e9;
	background: #f8f9fa;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.chat-title-section {
	flex: 1;
}

.chat-title {
	margin: 0;
	font-size: 21px;
	font-weight: 600;
	color: #1f2937;
}

.chat-subtitle {
	font-size: 14px;
	color: #6b7280;
	margin-top: 2px;
}

.chat-meta {
	color: #6b7280;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.member-count {
	background: #f3f4f6;
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
}

/* Messages Container */
.messages-container {
	flex: 1;
	overflow-y: auto;
	padding: 20px 24px;
	background: #fafafa;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #6b7280;
	text-align: center;
}

.empty-state i {
	font-size: 48px;
	margin-bottom: 16px;
	opacity: 0.5;
}

.empty-state h3 {
	margin: 0 0 8px 0;
	font-size: 18px;
	font-weight: 600;
}

.empty-state p {
	margin: 0;
	font-size: 14px;
}

/* Message Items */
.message-item {
	display: flex;
	margin-bottom: 16px;
	gap: 12px;
}

.message-item.mine {
	flex-direction: row-reverse;
}

.message-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex-shrink: 0;
}

.message-avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.message-content {
	max-width: 70%;
	display: flex;
	flex-direction: column;
}

.message-item.mine .message-content {
	align-items: flex-end;
}

.message-bubble {
	background: white;
	padding: 12px 16px;
	border-radius: 18px;
	border: 1px solid #e1e5e9;
	word-wrap: break-word;
	line-height: 1.4;
	position: relative;
}

.message-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 12px;
	color: #6b7280;
}

.message-item.mine .message-meta {
	flex-direction: row-reverse;
}

.message-actions {
	display: none;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
}

.message-item:hover .message-actions {
	display: flex;
}

.action-btn {
	background: none;
	border: none;
	color: #6b7280;
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	font-size: 11px;
	transition: all 0.2s ease;
}

.action-btn:hover {
	background: #f3f4f6;
	color: #374151;
}

/* Message Input */
.message-input-area {
	padding: 20px 24px;
	border-top: 1px solid #e1e5e9;
	background: white;
}

.message-form {
	display: flex;
	gap: 12px;
	align-items: flex-end;
}

.message-input {
	flex: 1;
	padding: 12px 16px;
	border: 2px solid #e1e5e9;
	border-radius: 24px;
	font-size: 16px;
	font-family: inherit;
	resize: none;
	max-height: 100px;
	transition: border-color 0.2s ease;
}

.message-input:focus {
	outline: none;
	border-color: #355946;
}



/* Modal Styles */
.modal {
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.modal-content {
	background-color: white;
	margin: 5% auto;
	padding: 0;
	border-radius: 12px;
	width: 500px;
	max-width: 90%;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.modal-header {
	padding: 24px;
	border-bottom: 1px solid #e1e5e9;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal-header h3 {
	margin: 0;
	color: #1f2937;
	font-size: 18px;
	font-weight: 600;
}

.close {
	font-size: 24px;
	cursor: pointer;
	color: #6b7280;
	transition: color 0.2s ease;
	background: none;
	border: none;
	padding: 4px;
	border-radius: 4px;
}

.close:hover {
	color: #374151;
	background: #f3f4f6;
}

.modal-body {
	padding: 24px;
}

.search-input {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid #e1e5e9;
	border-radius: 8px;
	font-size: 16px;
	margin-bottom: 16px;
	transition: border-color 0.2s ease;
}

.search-input:focus {
	outline: none;
	border-color: #355946;
}

.search-results {
	max-height: 300px;
	overflow-y: auto;
	border-radius: 8px;
	border: 1px solid #e1e5e9;
}

.search-result-item {
	padding: 12px 16px;
	border-bottom: 1px solid #f0f0f0;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: background-color 0.2s ease;
}

.search-result-item:last-child {
	border-bottom: none;
}

.search-result-item:hover {
	background-color: #f8f9fa;
}

.search-result-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #355946;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 14px;
	flex-shrink: 0;
}

.search-result-info {
	flex: 1;
	min-width: 0;
}

.search-result-info h4 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: #1f2937;
}

.search-result-info p {
	margin: 2px 0 0 0;
	font-size: 13px;
	color: #6b7280;
}

.modal-actions {
	margin-top: 20px;
	display: flex;
	gap: 12px;
	justify-content: flex-end;
}

.btn-primary {
	background: #355946;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 6px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.btn-primary:hover {
	background: #2d4a3a;
	transform: translateY(-1px);
}

.btn-secondary {
	background: #f3f4f6;
	color: #374151;
	border: none;
	padding: 10px 20px;
	border-radius: 6px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.btn-secondary:hover {
	background: #e5e7eb;
}

#editMessageContent {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid #e1e5e9;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
	min-height: 80px;
	transition: border-color 0.2s ease;
}

#editMessageContent:focus {
	outline: none;
	border-color: #355946;
}

/* Success and Error Messages */
.success-message, .error-message {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
	font-weight: 500;
}

.success-message {
	background: #d1fae5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}

.error-message {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fca5a5;
}



.close {
	font-size: 24px;
	cursor: pointer;
	color: #999;
}

.close:hover {
	color: #333;
}

.modal-body {
	padding: 20px;
}

.search-input {
	width: 100%;
	padding: 12px;
	border: 2px solid #e1e5e9;
	border-radius: 6px;
	font-size: 16px;
	margin-bottom: 15px;
}

.search-input:focus {
	outline: none;
	border-color: #355946;
}

.search-results {
	max-height: 300px;
	overflow-y: auto;
}

.search-result-item {
	padding: 12px;
	border-bottom: 1px solid #f0f0f0;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
}

.search-result-item:hover {
	background-color: #f8f9fa;
}

.search-result-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #355946;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
}

.search-result-info h4 {
	margin: 0;
	font-size: 16px;
	color: #333;
}

.search-result-info p {
	margin: 4px 0 0 0;
	font-size: 14px;
	color: #666;
}

.modal-actions {
	margin-top: 20px;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.message-actions {
	display: none;
	gap: 8px;
	margin-left: 10px;
}

.message-item:hover .message-actions {
	display: flex;
}

.action-btn {
	background: none;
	border: none;
	color: #666;
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	font-size: 12px;
}

.action-btn:hover {
	background-color: #f0f0f0;
	color: #333;
}

.chat-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.chat-title-section {
	flex: 1;
}

.chat-meta {
	color: #666;
	font-size: 14px;
}

.section-title.collapsible-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	user-select: none;
}

.section-toggle {
	transition: transform 0.2s ease;
}

.section-toggle.rotated {
	transform: rotate(-90deg);
}

.section-content.collapsed {
	display: none;
}

#editMessageContent {
	width: 100%;
	padding: 12px;
	border: 2px solid #e1e5e9;
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
}

#editMessageContent:focus {
	outline: none;
	border-color: #355946;
}

/* Scrollbar Styling */
.conversations-list::-webkit-scrollbar,
.messages-container::-webkit-scrollbar,
.search-results::-webkit-scrollbar {
	width: 6px;
}

.conversations-list::-webkit-scrollbar-track,
.messages-container::-webkit-scrollbar-track,
.search-results::-webkit-scrollbar-track {
	background: #f1f1f1;
}

.conversations-list::-webkit-scrollbar-thumb,
.messages-container::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 3px;
}

.conversations-list::-webkit-scrollbar-thumb:hover,
.messages-container::-webkit-scrollbar-thumb:hover,
.search-results::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}

/* Loading States */
.loading-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid #f3f3f3;
	border-top: 2px solid #355946;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.section-unread-badge {
	background: #ef4444;
	color: white;
	border-radius: 12px;
	padding: 2px 5px;
	font-size: 11px;
	font-weight: 600;
	min-width: 18px;
	height: 18px;
	text-align: center;
	margin-left: auto;
	margin-right: 10px;
	line-height: 15px;
}

.empty-section {
	text-align: center;
	align-items: center;
	padding: 40px 20px;
	font-style: italic;
}
/* Add these styles to your messaging.css file */

/* Message link styling */
.message-link {
	color: #3b82f6;
	text-decoration: underline;
	word-break: break-word;
	transition: color 0.2s ease;
}

.message-link:hover {
	color: #1d4ed8;
	text-decoration: none;
}

/* For links in user's own messages (white background) */
.message-item.mine .message-link {
	color: #60a5fa;
}

.message-item.mine .message-link:hover {
	color: #93c5fd;
}

/* Ensure links don't break the message bubble layout */
.message-bubble {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Optional: Add icon before external links */
.message-link::before {
	content: "🔗 ";
	font-size: 0.8em;
	opacity: 0.7;
}

/* Style for truncated URLs */
.message-link[title] {
	cursor: help;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
	.message-link {
		font-size: 14px;
		word-break: break-all;
	}
}
.message-item.mine a {
	color: white !important;
}

.chat-panel {
	width: 100%;
}


/* Mobile Responsiveness - Updated for sliding panels */
@media (max-width: 768px) {
	.messaging-container {
		height: calc(100vh - 60px);
		position: relative;
		overflow: hidden;
	}
	
	/* Panel System */
	.mobile-panel {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: transform 0.3s ease;
		background: white;
	}
	
	.conversations-sidebar {
		width: 100%;
		position: relative;
		border-right: none;
		transform: translateX(0);
		z-index: 10;
	}
	
	.conversations-sidebar.hidden {
		transform: translateX(-100%);
	}
	
	.chat-area {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform: translateX(100%);
		z-index: 20;
		background: white;
	}
	
	.chat-area.active {
		transform: translateX(0);
	}
	
	/* Chat Header Updates */
	.chat-header {
		padding: 16px;
		gap: 12px;
		position: relative;
	}
	
	.back-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: none;
		color: #374151;
		font-size: 18px;
		padding: 8px;
		border-radius: 50%;
		cursor: pointer;
		transition: all 0.2s ease;
		margin-right: 12px;
		width: 36px;
		height: 36px;
	}
	
	.back-btn:hover {
		background: #f3f4f6;
		color: #1f2937;
	}
	
	/* Message adjustments */
	.messages-container {
		padding: 16px;
	}
	
	.message-input-area {
		padding: 16px;
	}
	
	.modal-content {
		margin: 10% auto;
		width: 95%;
	}
	
	.conversation-item {
		padding: 16px 20px;
		min-height: 60px;
	}
	
	.message-content {
		max-width: 85%;
	}
	
	.chat-avatar {
		width: 40px;
		height: 40px;
	}
	
	.chat-avatar .avatar-initials {
		width: 40px;
		height: 40px;
		font-size: 16px;
	}
	
	/* Section headers */
	.section-title {
		padding: 16px 20px 12px 20px;
		position: sticky;
		top: 0;
		background: #f8f9fa;
		z-index: 5;
	}
	
	/* Search box */
	.sidebar-header {
		padding: 16px;
		background: #f8f9fa;
		border-bottom: 1px solid #e1e5e9;
		position: sticky;
		top: 0;
		z-index: 5;
	}
	
	/* Ensure proper stacking */
	.conversations-list {
		padding-bottom: 20px;
	}
}

/* ===== SOURCE: css/timesheet.css ===== */
/* css/timesheet.css */
/* Timesheet system styling */

:root {
    --timesheet-primary: #355946;
    --timesheet-secondary: #7BA05B;
    --timesheet-accent: #9B8B5B;
    --timesheet-red: var(--red, #dc3545);
    --timesheet-green: #28a745;
    --timesheet-blue: #007bff;
    --timesheet-gray: #6c757d;
    --timesheet-light-gray: #f8f9fa;
    --timesheet-border: #dee2e6;
    --timesheet-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Container Layouts */
.timesheet-container,
.admin-timesheet-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
.timesheet-header {
    background: white;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--timesheet-shadow);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.header-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

/* Navigation */
.month-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
}

.month-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--timesheet-primary);
    margin: 0;
    min-width: 200px;
    text-align: center;
}

.nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: white;
    border: 2px solid var(--timesheet-border);
    border-radius: 50%;
    color: var(--timesheet-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.nav-arrow:hover {
    background: var(--timesheet-primary);
    color: white;
    border-color: var(--timesheet-primary);
}

/* Monthly Summary */
.monthly-summary,
.teacher-summary {
    margin-bottom: 24px;
}

.summary-card {
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: var(--timesheet-shadow);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.summary-item {
    text-align: center;
    padding: 16px;
    border-radius: 6px;
    background: var(--timesheet-light-gray);
}

.summary-label {
    display: block;
    font-size: 0.875rem;
    color: var(--timesheet-gray);
    margin-bottom: 8px;
    font-weight: 500;
}

.summary-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--timesheet-primary);
}

.summary-item.estimated-pay {
    background: linear-gradient(135deg, var(--timesheet-secondary), var(--timesheet-accent));
}

.summary-item.estimated-pay .summary-value {
    color: white;
}

.summary-item.estimated-pay .summary-label {
    color: rgba(255, 255, 255, 0.9);
}

/* Calendar Styles */
.timesheet-calendar {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--timesheet-shadow);
}

.calendar-header {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--timesheet-primary);
}

.day-name {
    padding: 5px 0;
    text-align: center;
    font-weight: 600;
    color: white;
    font-size: 18px;
}

.calendar-body {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--timesheet-border);
}

.calendar-day {
    background: white;
    min-height: 120px;
    padding: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.calendar-day.empty {
    background: var(--timesheet-light-gray);
    opacity: 0.5;
}

.calendar-day.weekend {
    background: #f8f9fa;
    display: none;
}

.calendar-day.today {
    background: #e8f4fd;
    border: 2px solid var(--timesheet-blue);
}

.calendar-day.completed {
    border: 2px solid var(--timesheet-green);
    background: #f0f9f0;
}

.calendar-day.time-off {
    background: #fff3cd;
    border: 2px solid #ffc107;
}

.calendar-day.has-request {
    border: 2px solid var(--timesheet-red);
    background: #fff0f0;
}

.day-number {
    font-weight: 600;
    color: var(--timesheet-primary);
    margin-bottom: 4px;
    font-size: 0.875rem;
}

.day-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.time-display {
    font-size: 0.75rem;
    color: var(--timesheet-gray);
    line-height: 1.2;
}

.status-badge {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    text-align: center;
    margin: 2px 0;
}

.status-badge.completed {
    background: var(--timesheet-green);
    color: white;
}

.status-badge.time-off {
    background: #ffc107;
    color: #212529;
}

.status-badge.pending {
    background: var(--timesheet-gray);
    color: white;
}

.day-actions {
    display: flex;
    gap: 4px;
    margin-top: auto;
}

.complete-btn,
.adjust-btn,
.time-off-btn {
    background: none;
    border: 1px solid var(--timesheet-border);
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    color: var(--timesheet-gray);
    transition: all 0.2s ease;
    font-size: 0.75rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.complete-btn:hover {
    background: var(--timesheet-green);
    color: white;
    border-color: var(--timesheet-green);
}

.adjust-btn:hover {
    background: var(--timesheet-blue);
    color: white;
    border-color: var(--timesheet-blue);
}

.time-off-btn:hover {
    background: #ffc107;
    color: #212529;
    border-color: #ffc107;
}

.request-status {
    font-size: 0.625rem;
    padding: 1px 4px;
    border-radius: 3px;
    text-align: center;
    margin-top: 2px;
}

.request-status.pending {
    background: var(--timesheet-red);
    color: white;
}

.request-status.approved {
    background: var(--timesheet-green);
    color: white;
}

.request-status.denied {
    background: var(--timesheet-gray);
    color: white;
}

/* Admin-specific styles */
.admin-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    box-shadow: var(--timesheet-shadow);
    gap: 20px;
}

.teacher-selection {
    display: flex;
    align-items: center;
    gap: 12px;
}

.teacher-selection label {
    font-weight: 600;
    color: var(--timesheet-primary);
}

.teacher-selection select {
    padding: 8px 12px;
    border: 2px solid var(--timesheet-border);
    border-radius: 6px;
    font-size: 1rem;
    min-width: 300px;
}

.request-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    color: var(--timesheet-red);
    font-size: 0.875rem;
    cursor: help;
}

.no-teacher-selected {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.empty-state {
    text-align: center;
    color: var(--timesheet-gray);
}

.empty-state i {
    font-size: 4rem;
    margin-bottom: 16px;
    color: var(--timesheet-border);
}

.empty-state h3 {
    margin-bottom: 8px;
    color: var(--timesheet-primary);
}

/* Pending Requests */
.pending-requests-alert,
.pending-requests-summary {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-direction: column;
}

.pending-requests-summary {
    background: white;
    border: 2px solid var(--timesheet-red);
}

#all-requests-list {
    width: 100%;
}

.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.summary-header h3 {
    margin: 0;
    color: var(--timesheet-red);
}

.request-previews {
    display: flex;
    gap: 15px;
    width: 100%;
    justify-content: space-between;
}

.request-preview {
    background: var(--timesheet-light-gray);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 130px;
}

.request-preview.more {
    background: var(--timesheet-red);
    color: white;
    align-items: center;
    justify-content: center;
}

.requests-list,
.teacher-requests {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--timesheet-shadow);
}

.teacher-requests h3 {
    margin-bottom: 16px;
    color: var(--timesheet-primary);
}

.request-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--timesheet-border);
    border-radius: 6px;
    margin-bottom: 12px;
    background: var(--timesheet-light-gray);
}

.request-info {
    flex: 1;
}

.request-type {
    font-weight: 600;
    color: var(--timesheet-primary);
    margin-bottom: 4px;
}

.request-date {
    font-size: 0.875rem;
    color: var(--timesheet-gray);
    margin-bottom: 4px;
}

.request-notes {
    font-size: 0.875rem;
    color: var(--timesheet-gray);
    font-style: italic;
}

.teacher-name {
    font-weight: 600;
    color: var(--timesheet-primary);
    margin-bottom: 4px;
}

.request-actions {
    display: flex;
    gap: 8px;
}

.btn-approve,
.btn-deny {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-approve {
    background: var(--timesheet-green);
    color: white;
}

.btn-approve:hover {
    background: #218838;
}

.btn-deny {
    background: var(--timesheet-red);
    color: white;
}

.btn-deny:hover {
    background: #c82333;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 0;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-content.large {
    max-width: 900px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--timesheet-border);
    background: var(--timesheet-light-gray);
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
}

.modal-header h3 {
    margin: 0;
    color: var(--timesheet-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--timesheet-gray);
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modal-close:hover {
    color: var(--timesheet-red);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Form Styles */
.form-group {
    margin-bottom: 16px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--timesheet-primary);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--timesheet-border);
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--timesheet-primary);
}

.current-schedule {
    background: var(--timesheet-light-gray);
    padding: 12px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 1rem;
    color: var(--timesheet-primary);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--timesheet-border);
    flex-shrink: 0;
}

/* Button Styles */
.btn-primary,
.btn-secondary,
.btn-small {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--timesheet-primary);
    color: white;
}

.btn-primary:hover {
    background: #2a4538;
}

.btn-secondary {
    background: var(--timesheet-gray);
    color: white;
}

.btn-secondary:hover {
    background: #545b62;
}

.btn-small {
    padding: 6px 12px;
    font-size: 0.75rem;
}

/* Notifications */
.top-notification {
    background: var(--timesheet-green);
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    margin-bottom: 20px;
    text-align: center;
}

.top-notification.error {
    background: var(--timesheet-red);
}

/* Responsive Design */
@media (max-width: 768px) {
    .timesheet-container,
    .admin-timesheet-container {
        padding: 16px;
    }

    .header-content {
        flex-direction: column;
        align-items: stretch;
    }

    .header-actions {
        justify-content: center;
    }

    .summary-card {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 16px;
    }

    .month-navigation {
        gap: 16px;
    }

    .month-title {
        font-size: 1.5rem;
        min-width: 150px;
    }

    .admin-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .teacher-selection {
        justify-content: center;
    }

    .teacher-selection select {
        min-width: auto;
        width: 100%;
    }

    .calendar-day {
        min-height: 100px;
        padding: 6px;
    }

    .day-actions {
        gap: 2px;
    }

    .complete-btn,
    .adjust-btn,
    .time-off-btn {
        width: 24px;
        height: 24px;
    }

    .modal-content {
        margin: 10% auto;
        width: 95%;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .request-item {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .request-actions {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .summary-card {
        grid-template-columns: 1fr;
    }

    .request-previews {
        flex-direction: column;
    }
}

/* Schedule Management Styles */
.schedule-management-content {
    max-height: 60vh;
    overflow-y: auto;
}

.schedule-section {
    margin-bottom: 24px;
}

.schedule-section h4 {
    color: var(--timesheet-primary);
    margin-bottom: 12px;
    font-size: 1.1rem;
}

.unscheduled-teachers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.teacher-btn {
    padding: 8px 16px;
    font-size: 0.875rem;
    border-radius: 4px;
    cursor: pointer;
}

.schedules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.schedule-card {
    background: var(--timesheet-light-gray);
    border: 1px solid var(--timesheet-border);
    border-radius: 6px;
    padding: 16px;
}

.schedule-card h5 {
    margin: 0 0 12px 0;
    color: var(--timesheet-primary);
    font-size: 1rem;
}

.schedule-details {
    margin-bottom: 12px;
}

.schedule-details div {
    margin-bottom: 4px;
    font-size: 0.875rem;
    color: var(--timesheet-gray);
}

.schedule-card .btn-primary {
    width: 100%;
    padding: 8px 16px;
    font-size: 0.875rem;
}

.day-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.day-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--timesheet-light-gray);
    border: 1px solid var(--timesheet-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.day-checkbox:hover {
    background: #e9ecef;
}

.day-checkbox input[type="checkbox"] {
    margin: 0;
    width: auto;
}

.day-checkbox input[type="checkbox"]:checked + span {
    font-weight: 600;
    color: var(--timesheet-primary);
}

.day-checkbox:has(input:checked) {
    background: var(--timesheet-secondary);
    color: white;
    border-color: var(--timesheet-secondary);
}

.day-checkbox:has(input:checked) span {
    color: white;
}

.loading {
    text-align: center;
    padding: 40px;
    color: var(--timesheet-gray);
}

.error {
    color: var(--timesheet-red);
    text-align: center;
    padding: 20px;
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 6px;
}

/* Schedule Editor Styles */
.schedule-editor-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.schedule-editor-header {
    background: white;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--timesheet-shadow);
}

.schedule-form {
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: var(--timesheet-shadow);
}

.schedule-section {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--timesheet-border);
}

.schedule-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.schedule-section h3 {
    color: var(--timesheet-primary);
    margin-bottom: 16px;
    font-size: 1.25rem;
}

.pay-config {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.weekly-schedule {
    display: grid;
    gap: 16px;
}

.day-schedule {
    border: 2px solid var(--timesheet-border);
    border-radius: 8px;
    padding: 16px;
    transition: all 0.3s ease;
}

.day-schedule.active {
    border-color: var(--timesheet-secondary);
    background: var(--timesheet-light-gray);
}

.day-header {
    background: var(--light-green);
    border-radius: 5px 5px 0 0;
    margin: -17px -17px 10px;
    padding: 0 20px;
}

.day-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 600;
    color: var(--timesheet-primary);
}

.day-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
}

.day-times {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    align-items: end;
    transition: opacity 0.3s ease;
}

.day-times.disabled {
    opacity: 0.4;
}

.time-input {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.time-input label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--timesheet-gray);
}

.time-input input[type="time"] {
    padding: 8px 12px;
    border: 1px solid var(--timesheet-border);
    border-radius: 4px;
    font-size: 1rem;
}

.time-input input[type="time"]:focus {
    outline: none;
    border-color: var(--timesheet-primary);
}

.hours-display {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--timesheet-secondary);
    border-radius: 4px;
    min-width: 100px;
    justify-content: center;
}

.hours-calc {
    font-weight: 600;
    color: white;
    font-size: 0.875rem;
}

.schedule-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--timesheet-border);
}

/* Responsive design for schedule editor */
@media (max-width: 768px) {
    .schedule-editor-container {
        padding: 16px;
    }

    .pay-config {
        grid-template-columns: 1fr;
    }

    .day-times {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hours-display {
        min-width: auto;
    }

    .schedule-actions {
        flex-direction: column;
    }

    .schedule-actions button {
        width: 100%;
    }
}

/* Teacher Schedule Cards */
.teacher-schedule-list {
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: var(--timesheet-shadow);
}

.teacher-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 16px;
}

.teacher-schedule-card {
    border: 1px solid var(--timesheet-border);
    border-radius: 6px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.teacher-schedule-card:hover {
    border-color: var(--timesheet-secondary);
    box-shadow: 0 2px 8px rgba(53, 89, 70, 0.1);
}

.teacher-info h4 {
    margin: 0 0 6px 0;
    color: var(--timesheet-primary);
    font-size: 1.1rem;
}

.teacher-schedule-summary {
    display: flex;
    gap: 12px;
    align-items: center;
}

.schedule-type {
    background: var(--timesheet-secondary);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.rate {
    color: var(--timesheet-gray);
    font-size: 0.875rem;
}

.no-schedule {
    color: var(--timesheet-red);
    font-size: 0.875rem;
    font-style: italic;
}

.teacher-actions .btn-primary {
    padding: 8px 16px;
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .teacher-cards {
        grid-template-columns: 1fr;
    }

    .teacher-schedule-card {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .teacher-actions {
        align-self: stretch;
    }

    .teacher-actions .btn-primary {
        width: 100%;
        text-align: center;
    }
}

/* Request Time Details */
.request-times {
    margin-top: 8px;
    padding: 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid var(--timesheet-border);
}

.time-detail {
    margin-bottom: 6px;
    padding: 6px 10px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.time-detail:last-child {
    margin-bottom: 0;
}

.time-detail strong {
    color: var(--timesheet-primary);
    display: inline-block;
    min-width: 80px;
}

.time-detail.requested {
    background: #e8f4fd;
    border-left: 3px solid var(--timesheet-blue);
    border-radius: 4px;
}

.time-detail.time-off-full {
    background: #fff3cd;
    border-left: 3px solid #ffc107;
    border-radius: 4px;
    font-weight: 500;
}

.time-detail.time-off-full strong {
    color: #856404;
}

/* Request Preview Time Badges */
.time-range {
    font-size: 0.75rem;
    color: var(--timesheet-blue);
    font-weight: 600;
    padding: 2px 6px;
    background: #e8f4fd;
    border-radius: 3px;
}

.time-off-badge {
    font-size: 0.75rem;
    color: #856404;
    font-weight: 600;
    padding: 2px 6px;
    background: #fff3cd;
    border-radius: 3px;
}

/* ===== SOURCE: css/tuition-management.css ===== */
/* Tuition Management Styles */

.admin-container {
    max-width: var(--portal-content-max);
    margin: 0 auto;
    padding: 20px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.page-header h1 {
    font-family: 'Instrument Serif', Georgia, serif;
    color: var(--dark-green, #213b2d);
    margin: 0;
}

.header-actions {
    display: flex;
    gap: 10px;
}

/* Stats Row */
.stats-row {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.stat-card {
    background: white;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    text-align: center;
    flex: 1;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-green, #213b2d);
}

.stat-label {
    font-size: 0.9rem;
    color: #666;
    margin-top: 5px;
}

/* Filters */
.filters-container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    margin-bottom: 25px;
}

.filters-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.search-box {
    flex: 1;
    min-width: 250px;
}

.search-box input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95rem;
}

.filter-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-group select {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    min-width: 130px;
}

.btn-primary {
    background: var(--dark-green, #213b2d);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: #2c5530;
}

.btn-secondary {
    background: #e0e0e0;
    color: #333;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-secondary:hover {
    background: #d0d0d0;
}

/* Families List */
.families-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.no-results {
    background: white;
    padding: 40px;
    text-align: center;
    color: #666;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Family Accordion */
.family-accordion {
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    overflow: hidden;
}

.family-header {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.2s;
    gap: 15px;
    margin-bottom: 0;
}

.family-header:hover {
    background: #f8f9fa;
}

.family-toggle {
    width: 24px;
    text-align: center;
}

.toggle-icon {
    display: inline-block;
    transition: transform 0.2s;
    color: #888;
    font-size: 0.8rem;
}

.family-accordion.expanded .toggle-icon {
    transform: rotate(90deg);
}

.family-name {
    font-weight: 600;
    font-size: 16px;
    font-family: 'Archivo', sans-serif;
    color: var(--dark-green, #213b2d);
    flex: 1;
}

.family-meta {
    color: #888;
    font-size: 0.9rem;
    padding-top: 0;
    border-top: 0;
}

.student-count {
    background: #f0f0f0;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
}

.family-tuition {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--dark-green, #213b2d);
    min-width: 120px;
    text-align: right;
}

/* Family Content */
.family-content {
    display: none;
    padding: 0 20px 20px;
    border-top: 1px solid #eee;
}

.family-accordion.expanded .family-content {
    display: block;
}

/* Students Table */
.students-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.students-table th {
    text-align: left;
    padding: 12px 10px;
    background: #f8f9fa;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #666;
    font-weight: 600;
}

.students-table td {
    padding: 15px 10px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
}

.students-table tr:last-child td {
    border-bottom: none;
}

/* Student Row */
.student-row {
    transition: background 0.2s;
}

.student-row.saving {
    opacity: 0.6;
}

.student-row.saved {
    background: rgba(46, 204, 113, 0.1);
}

.student-name {
    font-weight: 600;
    color: #333;
    font-size: 16px;
}

.sibling-info {
    font-size: 0.8rem;
    color: #888;
    margin-top: 3px;
}

.sibling-discount {
    color: var(--gold, #c9a227);
    font-weight: 500;
}

/* Program Badge */
.program-badge {
    display: inline-block;
    background: #e8f4ea;
    color: var(--dark-green, #213b2d);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.base-rate {
    font-size: 0.75rem;
    color: #888;
    margin-top: 3px;
}

/* Checkbox Styling */
.checkbox-container {
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: 22px;
    height: 22px;
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 4px;
    transition: all 0.2s;
}

.checkbox-container:hover .checkmark {
    border-color: var(--dark-green, #213b2d);
}

.checkbox-container input:checked ~ .checkmark {
    background-color: var(--dark-green, #213b2d);
    border-color: var(--dark-green, #213b2d);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

/* Discount Input */
.discount-input-group {
    display: flex;
    align-items: center;
    gap: 3px;
}

.discount-input {
    width: 60px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    text-align: right;
}

.discount-input:focus {
    outline: none;
    border-color: var(--dark-green, #213b2d);
}

.percent-sign {
    color: #888;
    font-size: 0.9rem;
}

/* Payment Options */
.payment-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}

.radio-option input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--dark-green, #213b2d);
}

.annual-discount {
    font-size: 0.75rem;
    color: var(--gold, #c9a227);
    font-weight: 500;
}

/* Tuition Display */
.tuition-display {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--dark-green, #213b2d);
}

.full-scholarship {
    color: var(--gold, #c9a227);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 1200px) {
    .students-table {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
    .stats-row {
        flex-direction: column;
    }

    .filters-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        flex-direction: column;
    }

    .filter-group select {
        width: 100%;
    }

    .page-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .family-header {
        flex-wrap: wrap;
    }

    .family-tuition {
        width: 100%;
        text-align: left;
        margin-top: 10px;
    }
}


/* ===== SOURCE: css/calendar.css ===== */
/* ========================================
   CALENDAR PAGE STYLES
   Saints Classical — Design Direction
   ======================================== */

.calendar-page {
  padding: var(--section-pad) 0;
  background: var(--light-grey);
}

.calendar-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  align-items: start;
  max-width: 1600px;
  margin: 0 auto;
}

/* Calendar Grid Container */
.calendar-grid-container {
  background: white;
  border-radius: 7px;
  padding: 40px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.semester-label {
  grid-column: 1 / -1;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--dark-green);
  padding: 20px 0 8px;
  border-bottom: 2px solid var(--gold);
  margin-bottom: 12px;
}

.semester-label:first-child {
  padding-top: 0;
}

/* Individual Months */
.calendar-month {
  background: #fafafa;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--grey);
}

.month-header {
  background: var(--dark-green);
  color: white;
  padding: 12px;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 10px;
}

.day-header {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #999;
  padding: 4px 0;
  text-transform: uppercase;
}

.day {
  text-align: center;
  padding: 8px 2px;
  font-family: var(--font-sans);
  font-size: 13px;
  border-radius: 4px;
  transition: all 0.2s;
  border: 1px solid var(--grey);
  color: #222;
}

.day.empty {
  background: transparent;
  border: none;
}

.day.start {
  background: var(--dark-green);
  color: white;
  font-weight: 600;
  border-color: var(--dark-green);
}

.day.holiday {
  background: var(--gold);
  color: var(--dark-green);
  font-weight: 600;
  border-color: var(--gold);
}

.day.break {
  background: #e8f5e9;
  color: var(--dark-green);
  border-color: #a5d6a7;
}

.day.end {
  background: var(--red);
  color: white;
  font-weight: 600;
  border-color: var(--red);
}

/* Dates Sidebar */
.dates-sidebar {
  background: white;
  border-radius: 7px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 100px;
}

.sidebar-header h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--dark-green);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--gold);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--grey);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: #666;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-dot.start { background: var(--dark-green); }
.legend-dot.holiday { background: var(--gold); }
.legend-dot.break { background: #e8f5e9; border: 1px solid #a5d6a7; }
.legend-dot.end { background: var(--red); }

.dates-list {
  display: flex;
  flex-direction: column;
}

.date-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s ease;
}

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

.date-marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.date-item.start .date-marker { background: var(--dark-green); }
.date-item.holiday .date-marker { background: var(--gold); }
.date-item.break .date-marker { background: #81c784; }
.date-item.end .date-marker { background: var(--red); }

.date-content { flex: 1; }

.date-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--dark-green);
  margin-bottom: 2px;
}

.date-date {
  font-family: var(--font-sans);
  font-size: 13px;
  color: #888;
}

.download-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--grey);
  text-align: center;
}

.download-section .btn {
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Hover highlight */
.day[data-event] { cursor: pointer; }

.day[data-event]:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 10;
  position: relative;
}

.date-item.highlighted {
  border-radius: 7px;
  margin: 0 -10px;
  padding: 14px 10px;
  transform: scale(1.02);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.date-item.start.highlighted,
.date-item.break.highlighted {
  background: var(--dark-green);
}
.date-item.start.highlighted .date-title,
.date-item.start.highlighted .date-date,
.date-item.break.highlighted .date-title,
.date-item.break.highlighted .date-date { color: white; }

.date-item.holiday.highlighted { background: var(--gold); }
.date-item.holiday.highlighted .date-title,
.date-item.holiday.highlighted .date-date { color: var(--dark-green); }

.date-item.end.highlighted { background: var(--red); }
.date-item.end.highlighted .date-title,
.date-item.end.highlighted .date-date { color: white; }

/* Responsive */
@media (max-width: 1400px) {
  .calendar-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1100px) {
  .calendar-layout {
    grid-template-columns: 1fr;
  }
  .dates-sidebar {
    position: static;
    order: -1;
  }
  .calendar-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .calendar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .calendar-grid-container { padding: 20px; }
  .dates-sidebar { padding: 20px; }
}

@media (max-width: 480px) {
  .calendar-grid { grid-template-columns: 1fr; }
  .legend { flex-direction: column; gap: 8px; }
}


/* ===== SOURCE: css/gradebook.css ===== */
/* teacher/css/gradebook.css */

:root {
  --classica-cream: #FBF9F7;
  --classica-ink: #2B261C;
  --classica-mid: #6F5C44;
  --classica-tan: #C6B5A1;
  --classica-gold: #F9A01B;
  --classica-danger: #C0392B;
}

body {
  background: var(--classica-cream);
}

 .gradebook-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0;
  border-bottom: 0;
}

.gradebook-header h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  color: var(--classica-ink);
  font-size: clamp(3.2rem, 9vw, 5rem);
  font-weight: 400;
  line-height: .92;
  margin: 0;
}

.gradebook-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: .75rem;
  width: min(520px, 100%);
}

.stat {
  background: #fff;
  border: 1px solid rgba(43,38,28,.07);
  border-radius: 16px;
  padding: 1rem;
  text-align: left;
}

.stat-number {
  display: block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 2.35rem;
  font-weight: 400;
  line-height: 1;
  color: var(--classica-ink);
}

.stat.need-grading .stat-number {
  color: var(--classica-danger);
}

.stat-label {
  display: block;
  margin-top: .35rem;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: .68rem;
  color: var(--classica-mid);
  text-transform: uppercase;
  letter-spacing: .075em;
}

.gradebook-filters {
  background: #fff;
  padding: .75rem;
  border: 1px solid rgba(43,38,28,.07);
  border-radius: 16px;
  margin-bottom: 1.25rem;
  box-shadow: none;
}

.filter-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  align-items: center;
}

.filter-form select {
  width: 100%;
  min-width: 0;
  padding: .8rem 1rem;
  border: 1px solid rgba(198,181,161,.85);
  border-radius: 12px;
  background: var(--classica-cream);
  color: var(--classica-ink);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: .9rem;
}

.assignments-table {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.assignments-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 .65rem;
}

.assignments-table th {
  background: transparent;
  color: var(--classica-mid);
  padding: .25rem 1rem .4rem;
  text-align: left;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.assignments-table td {
  background: #fff;
  padding: 1rem;
  border-bottom: 0;
  vertical-align: middle;
  border-top: 1px solid rgba(43,38,28,.07);
  border-bottom: 1px solid rgba(43,38,28,.07);
}

.assignments-table td:first-child {
  border-left: 1px solid rgba(43,38,28,.07);
  border-radius: 16px 0 0 16px;
}

.assignments-table td:last-child {
  border-right: 1px solid rgba(43,38,28,.07);
  border-radius: 0 16px 16px 0;
}

.assignments-table tr:hover td {
  background-color: #fffdfa;
}

.assignments-table tr.needs-grading td:first-child {
  box-shadow: inset 4px 0 0 var(--classica-danger);
}

.assignment-info h4 {
  margin: 0 0 .35rem 0;
  color: var(--classica-ink);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.1;
}

.assignment-type,
.points-possible,
.subject-tag,
.needs-grading-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: .24rem .6rem;
  border-radius: 999px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.15;
}

.assignment-type {
  background: rgba(111,92,68,.1);
  color: var(--classica-mid);
  margin-right: .35rem;
}

.points-possible {
  background: rgba(249,160,27,.14);
  color: #9a6100;
}

.section-info {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.section-name {
  font-weight: 600;
  color: var(--classica-ink);
}

.subject-tag {
  color: white;
  align-self: flex-start;
}

.due-date,
.assignment-date,
.student-count,
.completion-text,
.avg-percentage {
  font-weight: 700;
  color: var(--classica-ink);
}

.no-date,
.avg-points,
.no-grades {
  color: var(--classica-mid);
}

.completion-info {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.completion-bar {
  width: 110px;
  height: 7px;
  background: rgba(198,181,161,.32);
  border-radius: 999px;
  overflow: hidden;
}

.completion-fill {
  height: 100%;
  background: var(--classica-gold);
  transition: width 0.3s ease;
}

.needs-grading-badge {
  background: rgba(192,57,43,.1);
  color: var(--classica-danger);
}

.avg-grade,
.actions {
  text-align: left;
}

.avg-percentage {
  display: block;
}

.btn-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .65rem 1rem;
  background: var(--classica-ink);
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: .875rem;
  font-weight: 700;
  transition: transform .15s ease, background-color .15s ease;
}

.btn-grade:hover {
  background: #1f1a13;
  transform: translateY(-1px);
}

.no-assignments {
  padding: 3rem;
  text-align: center;
  color: var(--classica-mid);
  background: #fff;
  border: 1px solid rgba(43,38,28,.07);
  border-radius: 16px;
}

/* Responsive */
@media (max-width: 768px) {
  .gradebook-header {
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
  }
  
  .gradebook-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    width: 100%;
  }

  .stat {
    padding: .8rem .65rem;
    border-radius: 14px;
  }

  .stat-number {
    font-size: 1.8rem;
    text-align: center;
  }

  .stat-label {
    font-size: .58rem;
    text-align: center;
    letter-spacing: .055em;
  }
  
  .filter-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
  }
  
  .filter-form select {
	min-width: auto;
  }
  
  .assignments-table {
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .assignments-table table,
  .assignments-table thead,
  .assignments-table tbody,
  .assignments-table th,
  .assignments-table td,
  .assignments-table tr {
    display: block;
    width: 100%;
  }

  .assignments-table table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  .assignments-table thead {
    display: none;
  }

  .assignments-table tbody {
    display: grid;
    gap: 1rem;
  }

  .assignments-table tr {
    background: #fff;
    border: 1px solid rgba(43,38,28,.07);
    border-radius: 18px;
    box-shadow: none;
    overflow: hidden;
  }

  .assignments-table tr.needs-grading {
    border-left: 4px solid #e74c3c;
  }

  .assignments-table td {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    padding: .85rem 1rem;
    border: 0;
    border-bottom: 1px solid rgba(43,38,28,.06);
    border-radius: 0;
    box-shadow: none;
  }

  .assignments-table td:first-child,
  .assignments-table td:last-child {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .assignments-table td:last-child {
    border-bottom: 0;
  }

  .assignments-table td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .assignment-info h4 {
    font-size: 1.25rem;
    line-height: 1.1;
  }

  .completion-bar {
    width: 100%;
    max-width: 180px;
  }

  .avg-grade,
  .actions {
    text-align: left;
  }

  .btn-grade {
    width: 100%;
    text-align: center;
    padding: .75rem 1rem;
  }
}

/* Additional CSS for gradebook-detail.php */

.grade-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.back-link {
  color: var(--dark-green);
  text-decoration: none;
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: inline-block;
}

.back-link:hover {
  text-decoration: underline;
}

.assignment-info h1 {
  margin: 0 0 0.5rem 0;
  color: var(--dark-green);
}

.assignment-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.section-tag {
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  color: white;
  font-size: 0.8rem;
  font-weight: 500;
}

.grade-levels, .due-date, .points-possible {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.grade-stats {
  display: flex;
  gap: 2rem;
  text-align: center;
}

.grade-distribution {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.grade-distribution h3 {
  margin: 0 0 1rem 0;
  color: var(--dark-green);
}

.distribution-chart {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: end;
  height: 100px;
}

.grade-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.grade-letter {
  font-weight: bold;
  color: var(--dark-green);
}

.bar {
  width: 30px;
  height: 60px;
  background: var(--light-gray);
  border-radius: 4px 4px 0 0;
  position: relative;
  overflow: hidden;
}

.bar-fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: var(--dark-green);
  transition: height 0.3s ease;
}

.grade-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.grade-entry-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
}

.section-actions {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--light-gray);
  display: flex;
  gap: 1rem;
}

.btn-save-all {
  background: var(--success-green);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.btn-save-all:disabled {
  background: var(--light-gray);
  cursor: not-allowed;
}

.btn-bulk {
  background: var(--dark-green);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.grade-grid {
  display: flex;
  flex-direction: column;
}

.grid-header {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 1fr;
  background: var(--dark-green);
  color: white;
  font-weight: 600;
  padding: 1rem;
  gap: 1rem;
}

.grade-row {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 1fr;
  padding: 1rem;
  gap: 1rem;
  border-bottom: 1px solid var(--light-gray);
  align-items: center;
  transition: background-color 0.2s;
}

.grade-row:hover {
  background-color: #f8f9fa;
}

.grade-row.changed {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
}

.student-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.student-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.student-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-initials {
  width: 100%;
  height: 100%;
  background: var(--dark-green);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
}

.student-info {
  display: flex;
  flex-direction: column;
}

.student-name {
  font-weight: 500;
  color: var(--dark-green);
}

.student-nickname {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

.grade-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.grade-input {
  width: 80px;
  padding: 0.5rem;
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  text-align: center;
}

.grade-input:focus {
  outline: none;
  border-color: var(--dark-green);
}

.grade-percentage {
  font-size: 0.8rem;
  color: var(--text-muted);
  align-self: flex-start;
}

.feedback-input {
  width: 100%;
  min-height: 60px;
  padding: 0.5rem;
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  resize: vertical;
  font-family: inherit;
}

.feedback-input:focus {
  outline: none;
  border-color: var(--dark-green);
}

.status-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.grade-status {
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
}

.grade-status.graded {
  background: var(--success-green);
  color: white;
}

.grade-status.ungraded {
  background: var(--light-gray);
  color: var(--text-muted);
}

.graded-date {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Modal */
.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: white;
  margin: 15% auto;
  padding: 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  position: relative;
}

.close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-muted);
}

.close:hover {
  color: var(--dark-green);
}

.modal-content h3 {
  margin: 0 0 1.5rem 0;
  color: var(--dark-green);
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--light-gray);
  border-radius: 4px;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.form-actions button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.form-actions button[type="button"] {
  background: var(--light-gray);
  color: var(--text-muted);
}

.form-actions button[type="submit"] {
  background: var(--dark-green);
  color: white;
}

/* Responsive */
@media (max-width: 768px) {
  .grade-detail-header {
	flex-direction: column;
	gap: 1rem;
  }
  
  .assignment-meta {
	flex-direction: column;
	align-items: flex-start;
  }
  
  .grade-stats {
	align-self: stretch;
	justify-content: space-around;
  }
  
  .grid-header,
  .grade-row {
	grid-template-columns: 1fr;
	gap: 0.5rem;
  }
  
  .student-cell {
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--light-gray);
  }
}
/* Additional CSS for gradebook-student.php */

.student-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: white;
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.student-info-section {
  flex: 1;
}

.student-profile {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

.student-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.student-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-initials-large {
  width: 100%;
  height: 100%;
  background: var(--dark-green);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.8rem;
}

.student-details h1 {
  margin: 0 0 0.5rem 0;
  color: var(--dark-green);
}

.student-nickname {
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 0.25rem 0;
}

.family-name {
  color: var(--text-muted);
  margin: 0;
}

.progress-stats {
  display: flex;
  gap: 1.5rem;
  flex-shrink: 0;
}

.stat-card {
  text-align: center;
  padding: 1rem;
  min-width: 120px;
}

.stat-card.missing .stat-number {
  color: #e74c3c;
}

.letter-grade {
  display: block;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.parent-contact-section {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.parent-contact-section h3 {
  margin: 0 0 1rem 0;
  color: var(--dark-green);
}

.parent-contacts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.parent-contact,
.student-contact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 6px;
}

.parent-name {
  font-weight: 500;
  color: var(--dark-green);
}

.contact-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-message,
.btn-email {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background-color 0.2s;
}

.btn-message {
  background: var(--dark-green);
  color: white;
}

.btn-message:hover {
  background: var(--darker-green);
}

.btn-email {
  background: #6c757d;
  color: white;
}

.btn-email:hover {
  background: #5a6268;
}

.grade-trend-section {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.grade-trend-section h3 {
  margin: 0 0 1rem 0;
  color: var(--dark-green);
}

.trend-chart {
  height: 200px;
  position: relative;
}

.assignments-history {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.assignments-history h3 {
  margin: 0 0 1.5rem 0;
  color: var(--dark-green);
}

.assignments-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.assignment-item {
  border: 1px solid var(--light-gray);
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.assignment-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.assignment-item.ungraded {
  border-left: 4px solid #e74c3c;
}

.assignment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #f8f9fa;
}

.assignment-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.assignment-title h4 {
  margin: 0;
  color: var(--dark-green);
}

.assignment-grade {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.grade-display {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--dark-green);
}

.percentage-display {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.no-grade {
  color: var(--text-muted);
  font-style: italic;
}

.btn-grade-now {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  background: #e74c3c;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.btn-grade-now:hover {
  background: #c0392b;
}

.assignment-details {
  padding: 1rem 1.5rem;
}

.assignment-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.section-name {
  font-weight: 500;
  color: var(--dark-green);
}

.due-date,
.graded-date {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.assignment-feedback {
  margin-top: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 3px solid var(--dark-green);
}

.assignment-feedback strong {
  color: var(--dark-green);
}

.assignment-feedback p {
  margin: 0.5rem 0 0 0;
  color: var(--text-color);
}

/* Responsive */
@media (max-width: 768px) {
  .student-progress-header {
	flex-direction: column;
	gap: 2rem;
  }
  
  .student-profile {
	flex-direction: column;
	text-align: center;
	gap: 1rem;
  }
  
  .progress-stats {
	justify-content: center;
	flex-wrap: wrap;
  }
  
  .parent-contact,
  .student-contact {
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
  }
  
  .contact-actions {
	align-self: stretch;
	justify-content: flex-end;
  }
  
  .assignment-header {
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
  }
  
  .assignment-grade {
	align-items: flex-start;
  }
  
  .assignment-meta {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
  }
}

/* ===== SOURCE: css/subjects.css ===== */
.subjects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 1.5rem;
}

.subject-card {
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	border: 1px solid #e1e8ed;
	overflow: hidden;
	transition: all 0.3s ease;
}

.subject-card:hover {
	box-shadow: 0 8px 30px rgba(0,0,0,0.15);
	transform: translateY(-2px);
}

.subject-header {
	padding: 1.5rem;
	border-bottom: 1px solid #f1f3f4;
}

.subject-name {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--dark-green);
	margin: 0 0 0.5rem 0;
	font-family: 'Instrument Serif', Georgia, serif;
}

.subject-description {
	color: #666;
	font-size: 0.95rem;
	line-height: 1.4;
}

.enrichment-badge {
	background: linear-gradient(135deg, var(--gold), var(--tan));
	color: var(--dark-green);
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 0.8rem;
	font-weight: 600;
	margin-top: 0.5rem;
	display: inline-block;
}

.subject-grades {
	padding: 1rem 1.5rem;
	background: #f8f9fa;
}

.grade-label {
	font-weight: 600;
	color: var(--dark-green);
	margin-bottom: 0.5rem;
	display: block;
}

.grade-list {
	font-size: 0.9rem;
	color: #666;
}

.subject-actions {
	padding: 1rem 1.5rem;
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
}

.grade-assignment-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 0.5rem;
	margin-top: 1rem;
}

.grade-option {
	padding: 0.5rem;
	border: 1px solid #ddd;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s;
	text-align: center;
}

.grade-option:hover {
	background: var(--cream);
}

.grade-option input[type="checkbox"]:checked + span {
	font-weight: 600;
	color: var(--dark-green);
}

/* ===== SOURCE: css/resources.css ===== */
.resources-left {
	width: 250px;
}

/* Title editing styles */
.document-title, .answer-key-title {
	cursor: pointer;
	padding: 2px 4px;
	border-radius: 3px;
	transition: background-color 0.2s;
}

.document-title:hover, .answer-key-title:hover {
	background-color: #f3f4f6;
}

.document-title-input, .answer-key-title-input {
	min-width: 200px;
	font-weight: 500;
}

.document-title-container, .answer-key-title-container {
	display: flex;
	align-items: center;
	gap: 8px;
}
.resource-nav-btn.active {
	background-color: var(--secondary-color, #355946);
	color: white;
}

.resource-nav-btn {
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
}

.resource-nav-btn:hover {
	background-color: #f9fafb;
}

.resource-nav-btn.active:hover {
	background-color: var(--secondary-dark-color, #2d4a37);
}

.resources-thumb {
	width: 100%;
	border-radius: 5px;
	overflow: hidden;
}
.resources-doc-box {
	display: flex;
	gap: 10px;
	flex-direction: column;
	position: relative;
	box-sizing: border-box;
}

.video-item iframe {
	border-radius: 0;
}

#living-document-content {
	font-family: system-ui, -apple-system, sans-serif;
	line-height: 1.5;
}

#student-living-document-editor.ql-container {
	min-height: 500px;
}

#student-living-document-editor .ql-editor {
	min-height: 500px;
	cursor: text;
}

#student-living-document-editor .ql-editor.ql-blank::before {
	left: 15px;
	right: 15px;
}
.ql-editor {
	padding: 0;
	min-height: 500px;
}
.transition-gentle {
	transition: all 0.15s ease-in-out;
}

/* Loading states */
.loading {
	opacity: 0.6;
	pointer-events: none;
}
.mobile-back-btn { display: none; }
@media (max-width: 768px) {
	.flex.gap-6.min-h-screen {
		flex-direction: column;
		gap: 0;
	}
	
	.resources-left {
		width: 100%;
		position: fixed;
		top: 85px;
		left: 0;
		right: 0;
		z-index: 1000;
		background: white;
		border-bottom: 1px solid var(--border-color, #e5e7eb);
		transition: transform 0.3s ease;
		height: calc(100vh - 85px);
		overflow-y: auto;
	}
	
	.resources-left.mobile-hidden {
		transform: translateX(-100%);
	}
	
	.resources-left .sticky.top-6 {
		position: static;
		border-radius: 0;
		border: none;
		border-bottom: 1px solid var(--border-color, #e5e7eb);
	}
	
	.resources-left .bg-gray-50 {
		padding: 1rem;
	}
	
	.resources-left nav {
		padding: 0.5rem;
		max-height: 50vh;
		overflow-y: auto;
	}
	
	.flex-1 {
		width: 100%;
		padding-top: 0;
		margin-top: 0;
		transition: transform 0.3s ease;
		min-height: 100vh;
	}
	
	.mobile-content-view .flex-1 {
		transform: translateX(0);
	}
	
	.mobile-content-view .resources-left {
		transform: translateX(-100%);
	}
	
	.mobile-sidebar-view .flex-1 {
		transform: translateX(100%);
	}
	
	/* Mobile back button */
	.mobile-back-btn {
		display: none;
		position: fixed;
		top: 1rem;
		left: 1rem;
		z-index: 1001;
		background: white;
		border: 1px solid var(--border-color, #e5e7eb);
		border-radius: 0.5rem;
		padding: 0.5rem;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	}
	
	.mobile-content-view .mobile-back-btn {
		display: block;
	}
	
	/* Resource sections on mobile */
	.resource-section {
		margin: 0;
		border-radius: 0;
		border: none;
		min-height: 100vh;
		padding: 4rem 1rem 1rem;
	}
	
	/* Student grid responsive */
	.grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3 {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	
	/* Videos grid responsive */
	.grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3.gap-6 {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	
	/* Documents responsive */
	.resources-doc-box {
		flex-direction: row;
		max-width: 100%;
	}
	
	/* Living document editor */
	.living-document {
		min-height: 300px;
	}
	
	/* Form adjustments */
	.grid.grid-cols-1.md\\:grid-cols-3.gap-4 {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
	
	.grid.grid-cols-1.md\\:grid-cols-3.gap-4 .flex.gap-2 {
		grid-column: 1;
		margin-top: 0.5rem;
	}
}

/* Tablet adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
	.resources-left {
		width: 200px;
	}
	
	.grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3 {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3.gap-6 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Class dropdown styles */
.class-selector {
	position: relative;
	display: inline-block;
}

.class-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: white;
	border: 1px solid var(--border-color, #e5e7eb);
	border-radius: 0.5rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	max-height: 400px;
	overflow-y: auto;
	min-width: 300px;
}

.class-dropdown-item {
	padding: 0.75rem 1rem;
	cursor: pointer;
	border-bottom: 1px solid var(--border-color, #e5e7eb);
	transition: background-color 0.15s ease;
}

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

.class-dropdown-item:hover {
	background-color: #f9fafb;
}

.class-dropdown-item.current {
	background-color: var(--secondary-light, #f0f4f1);
	font-weight: 500;
}
.class-resource-card {
	@apply block bg-white rounded-lg border border-border hover:shadow-lg hover:border-secondary transition-all duration-200 cursor-pointer;
}

.class-resource-card:hover {
	transform: translateY(-2px);
}
h3.resource-class-title {
	font-size: 21px;
	line-height: 21px;
	margin: 0;
	font-weight: 600;
}
p.resource-class-subject {
	font-size: 12px;
	margin: 0;
}
.resource-class-button {
	padding: 5px 10px;
	font-size: 14px;
	background: var(--light-grey);
	border: 2px solid var(--light-green);
	border-radius: 20px;
	text-decoration: none;
	color: var(--light-green);
	transition: all 0.3s;
	animation-fill-mode: backwards;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.class-resource-card {
	background: white;
	border-radius: 5px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: all 0.2s ease;
}
.bg-secondary-light {
	background-color: var(--secondary-light, #f0f4f1);
}
.drag-active {
	border-color: var(--secondary-color, #355946) !important;
	background-color: var(--secondary-light, #f0f4f1) !important;
}
.resources-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	align-items: start;
}
button.resource-delete {
	position: absolute;
	bottom: 2px;
	right: 2px;
	color: var(--red);
}
.resource-meta-box {
	width: 100%;
}
.resource-open {
	font-size: 12px;
	margin-left: auto;
	padding: 2px 4px;
	border: 1px solid var(--gold);
	border-radius: 3px;
}

/* Reference URL Preview Styles */
.url-preview-container {
	transition: all 0.2s ease;
}

.url-preview-container:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.url-preview-iframe {
	border-radius: 4px;
	overflow: hidden;
}

@media (max-width: 768px) {
	.url-preview-container .flex {
		flex-direction: column;
	}
	
	.url-preview-container .flex-shrink-0 {
		width: 100%;
		height: 120px;
		flex-shrink: 1;
	}
	
	.url-preview-container .flex-1 {
		padding: 1rem;
	}
}

.resource-info {
	margin-bottom: 10px;
}

/* Resource Navigation Cards */
.resource-nav-card {
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	border: none;
	outline: none;
}

.resource-nav-card:hover {
	transform: translateY(-2px);
}

.resource-nav-card:active {
	transform: translateY(0);
}

/* Welcome section animations */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.resource-nav-card {
	animation: fadeInUp 0.6s ease-out;
	border: 1px solid var(--tan);
	color: var(--light-green);
}

.resource-nav-card:nth-child(1) { animation-delay: 0.1s; }
.resource-nav-card:nth-child(2) { animation-delay: 0.2s; }
.resource-nav-card:nth-child(3) { animation-delay: 0.3s; }
.resource-nav-card:nth-child(4) { animation-delay: 0.4s; }

/* Responsive grid adjustments for welcome cards */
@media (max-width: 1024px) {
	.grid.lg\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.grid.lg\:grid-cols-3,
	.grid.lg\:grid-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.icon-backpack {
	font-size: 60px;
}
.resource-nav-card h3 {
	font-size: 24px;
}
.resource-icon {
	width: 40px;
	margin: 0 auto 20px;
}
#documents-list {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

#documents-list .resources-doc-box,
#answer-keys-list .resources-doc-box {
	width: calc(33.333% - 10px);
	min-width: 200px;
	max-width: none;
}

@media (max-width: 1200px) {
	#documents-list .resources-doc-box,
	#answer-keys-list .resources-doc-box {
		width: calc(50% - 8px);
	}
}

@media (max-width: 768px) {
	#documents-list .resources-doc-box,
	#answer-keys-list .resources-doc-box {
		width: 100%;
	}
}

/* ===== SOURCE: css/events.css ===== */
/* Portal Events Calendar Styles */

/* Override for portal context */
.portal-calendar {
  padding: 30px 0;
  background: #ECF3F0;
}

.portal-calendar .calendar-layout {
  grid-template-columns: 1fr 320px;
}

/* Calendar Navigation */
.calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--gold);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: #f3f4f6;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--dark-green);
  text-decoration: none;
}

.btn-icon:hover {
  background: var(--dark-green);
  color: white;
}

.current-period {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--dark-green);
  font-family: 'Instrument Serif', Georgia, serif;
}

.view-selector {
  display: flex;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 4px;
}

.view-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
  text-decoration: none;
  color: #374151;
  font-size: 0.9rem;
}

.view-btn:hover {
  background: #e5e7eb;
}

.view-btn.active {
  background: var(--dark-green);
  color: white;
}

.btn-secondary {
  padding: 8px 16px;
  border: 1px solid var(--dark-green);
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  color: var(--dark-green);
  font-size: 0.9rem;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: var(--dark-green);
  color: white;
}

/* Month View Large */
.month-view-large {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.month-header-large {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--dark-green);
}

.month-header-large .day-header {
  padding: 12px;
  text-align: center;
  font-weight: 600;
  color: white;
  font-size: 0.9rem;
}

.month-grid-large {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.day-cell {
  min-height: 100px;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  flex-direction: column;
}

.day-cell:nth-child(7n) {
  border-right: none;
}

.day-cell:hover {
  background-color: #f8fafc;
}

.day-cell.empty {
  background-color: #fafafa;
  cursor: default;
}

.day-cell.today {
  background-color: #f0f7f1;
}

.day-cell.today .day-number {
  background: var(--dark-green);
  color: white;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.day-cell.has-event {
  background-color: #fffbeb;
}

.day-number {
  font-weight: 600;
  font-size: 0.9rem;
  color: #374151;
  margin-bottom: 6px;
}

.day-events {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.event-pill {
  font-size: 0.7rem;
  padding: 3px 6px;
  border-radius: 4px;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--dark-green);
  cursor: pointer;
  transition: opacity 0.2s;
}

.event-pill:hover {
  opacity: 0.85;
}

/* Event Modal */
.event-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
}

.event-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.event-modal {
  background: white;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  transform: scale(0.9);
  transition: transform 0.2s;
}

.event-modal-overlay.active .event-modal {
  transform: scale(1);
}

.event-modal-header {
  padding: 20px 20px 15px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
}

.event-modal-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--dark-green);
  margin: 0;
}

.event-modal-category {
  font-size: 0.8rem;
  padding: 3px 10px;
  border-radius: 12px;
  color: white;
  white-space: nowrap;
}

.event-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #999;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.event-modal-close:hover {
  color: #333;
}

.event-modal-body {
  padding: 20px;
}

.event-modal-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.event-modal-row:last-child {
  margin-bottom: 0;
}

.event-modal-row i {
  color: var(--dark-green);
  width: 18px;
  text-align: center;
  margin-top: 2px;
}

.event-modal-row span {
  color: #374151;
  font-size: 0.95rem;
}

.event-modal-description {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
  color: #555;
  font-size: 0.95rem;
  line-height: 1.5;
}

.event-pill.school { background: var(--dark-green); }
.event-pill.holiday { background: var(--gold); color: var(--dark-green); }
.event-pill.sports { background: #3b82f6; }
.event-pill.other { background: #6b7280; }
.event-pill.general { background: var(--dark-green); }

.more-events {
  font-size: 0.7rem;
  color: #6b7280;
  padding: 2px 0;
}

/* Year View */
.year-view {
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.year-view .calendar-month {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.year-view .month-header {
  padding: 8px;
  font-size: 0.85rem;
  display: block;
}

.year-view .month-grid {
  grid-template-columns: repeat(5, 1fr);
  padding: 6px;
  gap: 1px;
}

.year-view .day-header {
  font-size: 0.65rem;
  padding: 2px 0;
}

.year-view .day {
  font-size: 0.75rem;
  padding: 4px 2px;
  cursor: pointer;
}

.year-view .day.has-event {
  background: var(--gold);
  color: var(--dark-green);
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.year-view .day.has-event:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 10;
  position: relative;
}

.year-view .day.today {
  background: var(--dark-green);
  color: white;
  border-radius: 3px;
}

/* Sidebar Overrides for Portal */
.portal-calendar .dates-sidebar {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.portal-calendar .sidebar-header h2 {
  font-size: 1.3rem;
}

/* Event item styling */
.date-item.school .date-marker { background: var(--dark-green); }
.date-item.holiday .date-marker { background: var(--gold); }
.date-item.sports .date-marker { background: #3b82f6; }
.date-item.other .date-marker { background: #6b7280; }
.date-item.general .date-marker { background: var(--dark-green); }

.date-time {
  font-size: 0.85rem;
  color: #888;
}

.date-location {
  font-size: 0.85rem;
  color: #888;
  margin-top: 4px;
}

.date-location i {
  margin-right: 4px;
  color: var(--dark-green);
}

/* Clickable sidebar events */
.clickable-event {
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  border-radius: 8px;
  margin: 0 -10px;
  padding: 15px 10px !important;
}

.clickable-event:hover {
  background-color: #f0f7f1;
  transform: translateX(3px);
}

/* Legend colors */
.legend-dot.school { background: var(--dark-green); }
.legend-dot.holiday { background: var(--gold); }
.legend-dot.sports { background: #3b82f6; }
.legend-dot.other { background: #6b7280; }

/* Toggleable Legend Filter */
#legend-filter {
  background: white;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.legend-hint {
  font-size: 0.65rem;
  color: #999;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: 100%;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  margin: 0;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
  background: transparent;
}

.legend-item:hover {
  background: rgba(33, 59, 45, 0.08);
}

.legend-item.active {
  background: rgba(33, 59, 45, 0.1);
}

.legend-item .legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.legend-item span:not(.legend-dot) {
  flex: 1;
  font-size: 0.75rem;
  color: #374151;
}

.legend-item:not(.active) {
  opacity: 0.5;
}

.legend-item:not(.active) .legend-dot {
  opacity: 0.4;
}

.legend-reset {
  padding: 6px 10px;
  background: #f3f4f6;
  border: none;
  border-radius: 6px;
  font-size: 0.7rem;
  color: var(--dark-green);
  cursor: pointer;
  transition: all 0.2s;
  margin-left: auto;
}

.legend-reset:hover {
  background: var(--dark-green);
  color: white;
}

.no-events {
  padding: 30px 20px;
  text-align: center;
  color: #888;
}

/* Responsive */
@media (max-width: 1200px) {
  .year-view {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .portal-calendar .calendar-layout {
    grid-template-columns: 1fr;
  }

  .portal-calendar .dates-sidebar {
    order: -1;
    max-height: none;
  }

  .year-view {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .calendar-nav {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }

  .nav-left, .nav-right {
    justify-content: center;
  }

  .day-cell {
    min-height: 60px;
    padding: 4px;
  }

  .day-events {
    display: none;
  }

  .day-cell.has-event::after {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    margin-top: auto;
    align-self: center;
  }

  .year-view {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .view-selector {
    width: 100%;
    justify-content: center;
  }

  .view-btn {
    flex: 1;
    text-align: center;
  }

  .year-view {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Override calendar.css column layout for legend filter */
  #legend-filter {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* List View */
.list-view-container {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.list-view-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--gold);
}

.export-buttons {
  display: flex;
  gap: 10px;
}

.export-buttons .btn-secondary i {
  margin-right: 6px;
}

.month-section {
  margin-bottom: 30px;
}

.month-section:last-child {
  margin-bottom: 0;
}

.month-label {
  font-family: 'Instrument Serif', Georgia, serif;
  color: var(--dark-green);
  font-size: 1.1rem;
  padding: 10px 15px;
  background: #f8fafc;
  border-left: 4px solid var(--gold);
  margin: 0 0 15px 0;
  font-weight: 600;
}

.events-list {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.event-row {
  display: grid;
  grid-template-columns: 20% 1fr auto;
  gap: 15px;
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s;
}

.event-row:last-child {
  border-bottom: none;
}

.event-row:hover {
  background: #f8fafc;
}

.event-date-col {
  font-weight: 600;
  color: var(--dark-green);
  font-size: 0.9rem;
  padding: 0 10px 0 20px;
}

.event-info {
  min-width: 0;
}

.event-info .event-title {
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-meta {
  font-size: 0.85rem;
  color: #888;
  margin-top: 2px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.event-time-text {
  white-space: nowrap;
}

.event-location-text {
  white-space: nowrap;
}

.event-location-text i {
  margin-right: 4px;
  color: var(--dark-green);
}

.event-category-badge {
  padding: 2px 10px;
  border-radius: 25px;
  font-size: 0.75rem;
  color: white;
  white-space: nowrap;
  margin: 0 20px 0 0;
}

/* List View Responsive */
@media (max-width: 768px) {
  .list-view-header {
    justify-content: center;
  }

  .event-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .event-date-col {
    font-size: 0.85rem;
  }

  .event-category-badge {
    justify-self: start;
  }
}

@media (max-width: 480px) {
  .export-buttons {
    flex-direction: column;
    width: 100%;
  }

  .export-buttons .btn-secondary {
    width: 100%;
    text-align: center;
  }
}


/* ===== SOURCE: css/weekly-assignments.css ===== */
/* Weekly Assignments Interface - Figma Design Implementation */

.weekly-assignments-container {
	max-width: var(--portal-content-max);
	margin: 0 auto;
	padding: 2rem;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Week Header with Navigation */
.week-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 10px;
	background: none;
	gap: 10px;
}

.header-left {
	display: flex;
	flex-direction: row;
	gap: 25px;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
}

.week-title {
	font-size: 2.5rem;
	font-weight: 400;
	color: #333;
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.week-navigation {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.week-nav-btn {
	background: none;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
	border-radius: 6px;
	color: #666;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.week-nav-btn:hover {
	background: #f5f5f5;
	color: #333;
}

.week-display {
	font-size: 1.25rem;
	font-weight: 500;
	color: #333;
	min-width: 150px;
	text-align: center;
}

/* Section Dropdown Styles */
.section-selector {
	position: relative;
	background: white;
	padding: 0 10px;
	border-radius: 5px;
}

.section-dropdown-btn {
	cursor: pointer;
	display: flex;
	align-items: center;
	font-size: 1.25rem;
	font-weight: 500;
	color: #333;
	margin: 0;
	padding: 0.5rem 0;
	transition: color 0.2s ease;
}

.section-dropdown-btn:hover {
	color: #d4af37;
}

.section-dropdown-caret {
	transition: transform 0.2s ease;
}

.section-dropdown-btn.active .section-dropdown-caret {
	transform: rotate(180deg);
}

.section-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: white;
	border: 1px solid #e1e5e9;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	z-index: 50;
	max-height: 400px;
	min-width: 250px;
	overflow-y: auto;
}

.section-dropdown-item {
	padding: 0.75rem 1rem;
	cursor: pointer;
	border-bottom: 1px solid #f1f3f4;
	transition: background-color 0.15s ease;
}

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

.section-dropdown-item:hover {
	background-color: #f9fafb;
}

.section-title {
	font-size: 1.25rem;
	font-weight: 500;
	color: #333;
	margin: 0;
	display: flex;
	align-items: center;
}

.section-dropdown-class {
	color: black;
	letter-spacing: -0.5px;
	font-size: 15px;
	text-align: left;
}
span#current-section-name {
	font-size: 18px;
	letter-spacing: 0;
}

/* Publish Button */
.publish-btn {
	background-color: var(--dark-green);
	color: white;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: all 0.2s ease;
	box-shadow: 0 2px 4px rgba(212, 175, 55, 0.2);
}

.publish-btn:hover {
	background: linear-gradient(135deg, #c19b26 0%, #e5bd2e 100%);
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(212, 175, 55, 0.3);
}

.publish-btn:active {
	transform: translateY(0);
}

.publish-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* Hidden Controls */
.section-controls {
	display: none;
}

/* Section Selection Placeholder */
.section-selection-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
	background: #f8f9fa;
	border-radius: 8px;
	margin-bottom: 2rem;
}

.placeholder-content {
	text-align: center;
	max-width: 400px;
	padding: 2rem;
}

.placeholder-content h3 {
	margin: 0 0 0.5rem 0;
	color: #1f2937;
	font-size: 1.5rem;
	font-weight: 600;
}

.placeholder-content p {
	margin: 0;
	color: #6b7280;
	font-size: 1rem;
	line-height: 1.5;
}

/* Disabled Daily Sections */
.daily-sections.disabled {
	opacity: 0.5;
	pointer-events: none;
	user-select: none;
}

.daily-sections.disabled .daily-section {
	background: #f3f4f6;
}

.daily-sections.disabled .day-header {
	background: #e5e7eb;
}

.daily-sections.disabled input,
.daily-sections.disabled textarea,
.daily-sections.disabled select {
	background: #f9fafb;
	border-color: #e5e7eb;
	color: #9ca3af;
}

/* Daily Sections */
.daily-sections {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.daily-section {
	background: #f8f9fa;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.day-header {
	background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
	padding: 5px 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
}

.day-header h2 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: black;
	letter-spacing: 0;
}

.header-label {
	font-size: 1.1rem;
	font-weight: 600;
	color: #2c3e50;
	letter-spacing: 0.5px;
}

.day-content {
	padding: 2rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	background: white;
}

/* Left Column - Content */
.left-column {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.links-section h4 {
	font-size: 0.9rem;
	font-weight: 600;
	color: #666;
	margin: 0 0 1rem 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Right Column - Details and Uploads */
.right-column {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.details-section {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.uploads-section h4 {
	font-size: 0.9rem;
	font-weight: 600;
	color: #666;
	margin: 0 0 1rem 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Form Styling */
.form-group {
	margin-bottom: 0;
}

.form-group input,
.form-group textarea,
.form-group select {
	width: 100%;
	padding: 5px 10px;
	border: 1px solid #c5d0dc;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.95rem;
	background: white;
	transition: all 0.2s ease;
	box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
	outline: none;
	border-color: #d4af37;
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
	color: #9ca3af;
	font-style: normal;
}

.assignment-title-input {
	font-weight: 500;
	font-size: 1rem;
}

.assignment-description-input {
	resize: vertical;
	min-height: 100px;
}

.points-input {
	max-width: 120px;
	text-align: center;
}

.class-type-select {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 1.5em 1.5em;
	padding-right: 3rem;
	appearance: none;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* File Upload Drop Zone */
.file-drop-zone {
	border: 2px dashed #d1d5db;
	border-radius: 8px;
	padding: 10px;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
	background: #fafbfc;
}

.file-drop-zone:hover,
.file-drop-zone.drag-active {
	border-color: #d4af37;
	background: #fffbf0;
}

.drop-icon {
	color: #9ca3af;
	margin-bottom: 1rem;
	display: flex;
	justify-content: center;
}

.file-drop-zone.drag-active .drop-icon {
	color: #d4af37;
}

.drop-text {
	font-size: 0.95rem;
	color: #374151;
	font-weight: 500;
	margin-bottom: 0.5rem;
}

.drop-subtext {
	font-size: 0.8rem;
	color: #6b7280;
	line-height: 1.4;
}

/* Uploaded Files Display */
.uploaded-files {
	margin-top: 1rem;
}

.uploaded-file {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem;
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 6px;
	margin-bottom: 0.5rem;
}

.file-info {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.file-icon {
	color: #6b7280;
}

.file-details {
	display: flex;
	flex-direction: column;
}

.file-name {
	font-size: 0.9rem;
	font-weight: 500;
	color: #374151;
}

.file-size {
	font-size: 0.75rem;
	color: #6b7280;
}

.file-remove {
	background: none;
	border: none;
	color: #dc2626;
	cursor: pointer;
	padding: 0.25rem;
	border-radius: 4px;
	transition: background-color 0.2s ease;
}

.file-remove:hover {
	background: #fee2e2;
}

/* Auto-save Status */
.auto-save-status {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	background: rgba(33, 59, 45, 0.9);
	color: white;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	font-size: 0.85rem;
	font-weight: 500;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 100;
	pointer-events: none;
}

.auto-save-status.show {
	opacity: 1;
}

.auto-save-status.success {
	background: rgba(34, 197, 94, 0.9);
}

.auto-save-status.error {
	background: rgba(239, 68, 68, 0.9);
}

/* Responsive Design */
@media (max-width: 1024px) {
	.weekly-assignments-container {
		padding: 1rem;
	}
	
	.week-header {
		flex-direction: column;
		align-items: stretch;
		gap: 1.5rem;
	}
	
	.header-right {
		justify-content: center;
	}
	
	.week-title {
		font-size: 2rem;
	}
	
	.day-content {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	
	.day-header {
		padding: 1rem 1.5rem;
		flex-direction: column;
		gap: 0.5rem;
		text-align: center;
	}
	
	.day-header h2,
	.header-label {
		font-size: 1rem;
	}
}

@media (max-width: 768px) {
	.weekly-assignments-container {
		padding: 0.75rem;
	}
	
	.week-header {
		flex-direction: column;
		gap: 1rem;
		text-align: center;
	}
	
	.week-title {
		font-size: 1.75rem;
	}
	
	.week-navigation {
		gap: 0.75rem;
	}
	
	.week-display {
		font-size: 1rem;
		min-width: 150px;
	}
	
	.day-content {
		padding: 1.5rem;
		gap: 1.5rem;
	}
	
	.daily-sections {
		gap: 1.5rem;
	}
	
	.file-drop-zone {
		padding: 1.5rem;
	}
	
	.drop-text {
		font-size: 0.9rem;
	}
	
	.drop-subtext {
		font-size: 0.75rem;
	}
}

@media (max-width: 480px) {
	.week-title {
		font-size: 1.5rem;
	}
	
	.week-display {
		font-size: 0.9rem;
		min-width: 120px;
	}
	
	.day-content {
		padding: 1rem;
		gap: 1rem;
	}
	
	.file-drop-zone {
		padding: 1rem;
	}
	
	.form-group input,
	.form-group textarea,
	.form-group select {
		padding: 0.75rem;
		font-size: 0.9rem;
	}
}

/* Form Labels */
.form-label {
	display: block;
	font-size: 0.9rem;
	font-weight: 500;
	color: #555;
	margin-bottom: 0.5rem;
}

/* Class Type Validation */
.class-type-group {
	position: relative;
}


.class-type-select.validation-error {
	border-color: #dc3545 !important;
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
	animation: shake 0.5s ease-in-out;
}

.class-type-select.validation-error:focus {
	border-color: #dc3545 !important;
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Required field indicator */
.class-type-select option:first-child {
	color: #dc3545;
	font-weight: 500;
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
	20%, 40%, 60%, 80% { transform: translateX(2px); }
}

/* Multiple Assignment Forms */
.day-assignments-container {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.assignment-form {
	position: relative;
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
}

.assignment-form + .assignment-form {
	margin-top: 1rem;
}

.assignment-actions {
	position: absolute;
	top: 10px;
	right: 15px;
	z-index: 10;
}

.delete-assignment-btn {
	background: #ef4444;
	color: white;
	border: none;
	border-radius: 6px;
	padding: 0.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.delete-assignment-btn:hover {
	background: #dc2626;
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

.add-assignment-container {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
	padding-bottom: 1rem;
}

.add-assignment-btn {
	background: #f3f4f6;
	color: #6b7280;
	border: 2px dashed #d1d5db;
	border-radius: 8px;
	padding: 0.75rem 1.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	font-size: 0.9rem;
	transition: all 0.2s ease;
}

.add-assignment-btn:hover {
	background: #e5e7eb;
	color: #374151;
	border-color: #9ca3af;
}

.add-assignment-btn svg {
	transition: transform 0.2s ease;
}

.add-assignment-btn:hover svg {
	transform: rotate(90deg);
}

/* ===== SOURCE: app/assets/app.css ===== */
/* Classica Hub - App Stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:wght@400;500;600;700&family=Schibsted+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --cream: #FBF9F7;
    --dark: #2B261C;
    --gold: #F9A01B;
    --mid: #6F5C44;
    --tan: #C6B5A1;
    --dark-warm: #1E1A14;
    --sidebar-w: 240px;
    --danger: #C0392B;
    --success: #27AE60;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--school-font-body, 'Instrument Sans', sans-serif);
    background: var(--cream);
    color: var(--dark);
    min-height: 100vh;
}

h1, h2, h3, h4 { font-family: var(--school-font-heading, 'Instrument Serif', serif); font-weight: 400; }

.label, .nav-label, .stat-label, .meta {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mid);
}

/* Layout */
.app-layout { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
    width: var(--sidebar-w);
    background: var(--school-sidebar, var(--dark-warm));
    color: #fff;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
    transition: transform 0.3s;
}

.sidebar-logo {
    padding: 0;
    border-bottom: none;
}

.sidebar-logo img {
    height: 24px;
    filter: brightness(0) invert(1);
}

.sidebar-logo .logo-icon {
    display: none;
    height: 28px;
}

.sidebar-nav { flex: 1; padding: 1rem 0; overflow-y: auto; }

.nav-section {
    padding: 0.5rem 1.5rem 0.25rem;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.35);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.5rem;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.15s;
    border-left: 3px solid transparent;
    white-space: nowrap;
}

.nav-item:hover {
    color: #fff;
    background: rgba(255,255,255,0.05);
}

.nav-item.active {
    color: var(--school-accent, var(--gold));
    background: rgba(249,160,27,0.08);
    border-left-color: var(--school-accent, var(--gold));
}

.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; }
.nav-item.active svg { opacity: 1; }
.nav-item i[class*="ph-"] { font-size: 1.25rem; flex-shrink: 0; opacity: 0.7; line-height: 1; }
.nav-item.active i[class*="ph-"] { opacity: 1; }

.nav-item-signout { padding-left: 0; }

.sidebar-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: rgba(255,255,255,0.7);
    margin-top: 0.75rem;
}

.sidebar-user:hover { color: #fff; }

.user-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--mid);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

.user-avatar-img {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--mid);
}

.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 0.8125rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 0.6875rem; color: rgba(255,255,255,0.4); text-transform: capitalize; }

/* Unread badge (sidebar) */
.unread-badge {
    background: var(--gold);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 99px;
    margin-left: auto;
    line-height: 1.4;
    font-family: 'Schibsted Grotesk', sans-serif;
}

/* Main content */
.main-content {
    margin-left: var(--sidebar-w);
    flex: 1;
    padding: 2rem 2.5rem;
    min-height: 100vh;
}

.page-header {
    margin-bottom: 2rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.page-title {
    font-family: 'Instrument Serif', 'Crimson Text', serif;
    font-size: clamp(2.5rem, 5vw, 4.15rem);
    font-weight: 400;
    line-height: .95;
    letter-spacing: -.04em;
    color: var(--dark);
}

/* Page count - top right aligned to title bottom */
.page-count {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.875rem;
    color: var(--mid);
    white-space: nowrap;
    align-self: flex-end;
    padding-bottom: 0.35rem;
}

/* Page header actions (right side) */
.page-header-actions {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding-bottom: 0.35rem;
}

/* Cards */
.card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.card-title {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--dark);
}

/* Stats grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 1.25rem 1.5rem;
}

.stat-value {
    font-family: 'Instrument Serif', serif;
    font-size: 45px;
    color: var(--dark);
    line-height: 1.1;
}

.stat-label {
    margin-top: 0.25rem;
}

/* Stat value color variants */
.stat-value-present { color: #2E7D32; }
.stat-value-absent { color: #C62828; }
.stat-value-tardy { color: #F57F17; }
.stat-value-excused { color: #1565C0; }
.stat-value-remote { color: #757575; }

/* Grid layouts */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; }

/* List items */
.list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

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

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-primary { background: var(--school-accent, var(--gold)); color: #fff; }
.btn-primary:hover { background: var(--school-accent-dark, #e8920f); }
.btn-outline { background: transparent; border: 1px solid var(--tan); color: var(--dark); }
.btn-outline:hover { border-color: var(--mid); }

/* Badge */
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-gold { background: rgba(249,160,27,0.12); color: #b87300; }
.badge-green { background: rgba(39,174,96,0.12); color: #1e8449; }

/* Dashboard badge offset */
.badge-role-offset { position: relative; top: -1.5rem; }
.badge-inline-ml { margin-left: 0.5rem; }
.badge-attendance-ml { margin-left: 6px; }

/* Login page */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    padding: 2rem;
}

.login-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 3rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.06);
}

.login-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo img { height: 28px; }

.login-title {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

.login-subtitle {
    text-align: center;
    color: var(--mid);
    font-size: 0.875rem;
    margin-bottom: 2rem;
}

.form-group { margin-bottom: 1.25rem; }

.form-label {
    display: block;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mid);
    margin-bottom: 0.4rem;
}

.form-input {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid var(--tan);
    border-radius: 8px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.9375rem;
    color: var(--dark);
    background: var(--cream);
    transition: border-color 0.15s;
}

.form-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(249,160,27,0.12);
}

.form-select {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid var(--tan);
    border-radius: 8px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.9375rem;
    color: var(--dark);
    background: var(--cream);
    appearance: none;
    cursor: pointer;
}

.form-select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(249,160,27,0.12);
}

.btn-login {
    width: 100%;
    padding: 0.8rem;
    background: var(--school-accent, var(--gold));
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-login:hover { background: var(--school-accent-dark, #e8920f); }

.login-footer {
    text-align: center;
    margin-top: 1.5rem;
}

.login-footer a {
    color: var(--mid);
    font-size: 0.8125rem;
    text-decoration: none;
}

.login-footer a:hover { color: var(--gold); }
.btn-reset-demo {
    background: none;
    border: 1px solid var(--tan);
    border-radius: 4px;
    padding: 0.4rem 0.8rem;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.8125rem;
    color: var(--mid);
    cursor: pointer;
    transition: all 0.15s;
}
.btn-reset-demo:hover { border-color: var(--gold); color: var(--gold); }

/* Supplements grid */
.onboarding-supplements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.onboarding-supplement-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border: 2px solid rgba(198,181,161,0.3);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
}
.onboarding-supplement-card:hover {
    border-color: var(--tan);
}
.onboarding-supplement-card.selected {
    border-color: var(--gold);
    background: rgba(249,160,27,0.06);
}
.onboarding-supplement-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--dark);
}
.onboarding-supplement-subject {
    font-size: 0.75rem;
    color: var(--mid);
    margin-top: 2px;
}

/* Curriculum logos in onboarding */
.curriculum-logo {
    max-height: 60px;
    max-width: 140px;
    object-fit: contain;
}
.curriculum-icon-fallback {
    font-size: 2.5rem;
    color: var(--mid);
}

/* Curriculum card layout: logo centered, text at bottom */
.onboarding-curriculum-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-top: 1.5rem;
}
.onboarding-curriculum-card .curriculum-logo,
.onboarding-curriculum-card .curriculum-icon-fallback {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}
.onboarding-curriculum-name {
    margin-bottom: 2px;
}
.onboarding-curriculum-desc {
    margin-top: 0;
}

/* Step 5 wider + font grid 3 across */
.onboarding-branding-layout {
    max-width: 900px;
}
.onboarding-font-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

/* 6th font: Minimal (Inter) */
.font-minimal-heading { font-family: 'Inter', sans-serif; font-weight: 600; }
.font-minimal-body { font-family: 'Inter', sans-serif; font-weight: 400; }

/* Preview dashboard card */
.onboarding-preview-heading {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    color: var(--dark);
}
.onboarding-preview-stats {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.onboarding-preview-stat-card {
    flex: 1;
    background: rgba(0,0,0,0.03);
    border-radius: 6px;
    padding: 0.5rem;
    text-align: center;
}
.onboarding-preview-stat-num {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark);
}
.onboarding-preview-stat-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mid);
}
.onboarding-preview-logo img {
    max-height: 80px;
    max-width: 160px;
    object-fit: contain;
}

/* Launch curriculum logo */
.launch-curriculum-logo {
    max-height: 40px;
    max-width: 120px;
    object-fit: contain;
}

/* Reset demo spacing */
.btn-reset-demo + p { margin-top: 0.75rem; }

.alert {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.alert-error {
    background: rgba(192,57,43,0.08);
    color: var(--danger);
    border: 1px solid rgba(192,57,43,0.15);
}

/* Quick links */
.quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--dark);
    background: var(--cream);
    transition: all 0.15s;
    font-size: 0.8125rem;
    font-weight: 500;
}

.quick-link:hover { background: rgba(249,160,27,0.08); color: var(--gold); }

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

table thead th {
    background: var(--dark);
    color: #fff;
    padding: 0.75rem 1rem;
    text-align: left;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 5;
}

table tbody td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    vertical-align: middle;
}

table tbody tr:hover { background: rgba(249,160,27,0.04); }

table tbody tr:last-child td { border-bottom: none; }

.table-wrap {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.table-wrap table { margin: 0; }

/* Clickable table row */
.clickable-row { cursor: pointer; }

/* Tabs (course tabs, filter tabs) */
.tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 0;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
}

.tab {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--mid);
    background: rgba(0,0,0,0.03);
    white-space: nowrap;
    transition: all 0.15s;
    flex-shrink: 0;
}

.tab:hover { background: rgba(0,0,0,0.06); color: var(--dark); }

.tab.active {
    background: var(--gold);
    color: #fff;
    font-weight: 600;
}

/* Gradebook tab course name/code */
.tab-course-name {
    display: block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
.tab-course-code {
    display: block;
    font-size: 0.6875rem;
    font-weight: 400;
    opacity: 0.7;
    line-height: 1.2;
}

/* Gradebook subject tabs */
.gb-subject-tabs {
    margin-bottom: 0.5rem;
    border-bottom: 2px solid rgba(198,181,161,0.2);
}
.gb-subject-tab {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}
.gb-subject-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(198,181,161,0.2);
    border-radius: 10px;
    font-size: 0.625rem;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 4px;
}
.gb-subject-tab.active .gb-subject-count {
    background: var(--gold);
    color: #fff;
}
.gb-course-tabs {
    margin-bottom: 1rem;
}
.gb-course-tabs .tab {
    font-size: 0.8125rem;
}

/* Filter row - full width with gap */
.filter-row {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.filter-row > * { flex: 1; min-width: 120px; }
.filter-row > .filter-search { flex: 2; min-width: 200px; }
.filter-row > .filter-action { flex: 0 0 auto; min-width: auto; }

.filter-row .form-control { width: 100%; }

/* Filters (legacy) */
.filter-bar, .filters {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filter-label {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mid);
}

.form-control {
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--tan);
    border-radius: 4px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.875rem;
    color: var(--dark);
    background: #fff;
    transition: border-color 0.15s;
}

.form-control:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(249,160,27,0.12);
}

/* Grade cells */
.grade-cell { text-align: center; font-family: 'Schibsted Grotesk', sans-serif; font-size: 0.8125rem; }
.grade-cell.grade-a { color: #1e8449; }
.grade-cell.grade-b { color: #2471a3; }
.grade-cell.grade-c { color: var(--mid); }
.grade-cell.grade-d { color: #b87300; }
.grade-cell.grade-f { color: var(--danger); }

/* Display toggles (gradebook % / Letter / Points) */
.display-toggle {
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    cursor: pointer;
    border: 1px solid var(--tan);
    background: #fff;
    color: var(--mid);
    transition: all 0.15s;
}

.display-toggle.active {
    background: var(--dark);
    color: #fff;
    border-color: var(--dark);
}

.hidden { display: none !important; }

/* Stats row */
.stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.stats-row .stat-card { flex: 1; min-width: 140px; }

/* Course cards */
.course-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.15s;
    text-decoration: none;
    color: var(--dark);
}

.course-card:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* Course title - 30px */
.course-title {
    font-size: 30px;
    margin: 24px 0 12px;
}

.course-title i[class*="ph-"] { vertical-align: text-top; margin-right: 8px; font-size: 2.25rem; }

/* Subject color coding - subtle left border */
/* Subject color system - hue families from brand palette */
/* Languages (deep warm browns/ambers) */
.subject-latin         { --subject-color: #4E3D28; }
.subject-greek         { --subject-color: #5A4530; }
.subject-language_arts { --subject-color: #6B4F0A; }
.subject-spanish       { --subject-color: #7A5A18; }

/* Humanities (deep warm golds) */
.subject-history       { --subject-color: #6A5228; }
.subject-rhetoric      { --subject-color: #5C4830; }
.subject-logic         { --subject-color: #4F422C; }

/* Sciences/Math (deep blues) */
.subject-mathematics   { --subject-color: #2B4A6E; }
.subject-science       { --subject-color: #1E3D5E; }

/* Faith/Philosophy (deep golds) */
.subject-theology      { --subject-color: #6A5210; }

/* Arts (deep muted roses) */
.subject-fine_arts     { --subject-color: #6B3E3E; }
.subject-music         { --subject-color: #5E3A3A; }

/* Other */
.subject-physical_education { --subject-color: #2E5A4A; }
.subject-other         { --subject-color: var(--mid); }

/* Apply subject color to title, icon, and thead */
.course-title { color: var(--subject-color, var(--dark)); }
.course-title i[class*="ph-"] { color: var(--subject-color, var(--dark)); }
.subject-thead th { background: var(--subject-color, var(--dark)); }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--mid);
    font-size: 0.9375rem;
}

/* Subtitle */
.subtitle {
    color: var(--mid);
    font-size: 0.9375rem;
    margin-top: -1rem;
    margin-bottom: 1.5rem;
}

/* Badge variants */
.badge-red, .badge-danger { background: rgba(192,57,43,0.12); color: #922b21; }
.badge-blue { background: rgba(36,113,163,0.12); color: #1a5276; }
.badge-gray { background: rgba(0,0,0,0.06); color: var(--mid); }
.badge-active, .badge-enrolled { background: rgba(39,174,96,0.12); color: #1e8449; }
.badge-draft { background: rgba(0,0,0,0.06); color: var(--mid); }
.badge-archived { background: rgba(0,0,0,0.06); color: var(--mid); }

/* Utility classes */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.gap-8 { gap: 0.5rem; }
.gap-16 { gap: 1rem; }
.mb-8 { margin-bottom: 0.5rem; }
.mb-16 { margin-bottom: 1rem; }
.mb-24 { margin-bottom: 1.5rem; }
.text-sm { font-size: 0.8125rem; }
.text-muted { color: var(--mid); }
.text-center { text-align: center; }
.text-placeholder { color: var(--mid); font-size: 0.875rem; }

/* Button variants */
.btn-sm { padding: 0.35rem 0.85rem; font-size: 0.8125rem; }
.btn-secondary { background: #fff; border: 1px solid var(--tan); color: var(--dark); }
.btn-secondary:hover { border-color: var(--mid); }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--mid); }
.btn-ghost:hover { background: rgba(0,0,0,0.04); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #a93226; }
.btn-nowrap { white-space: nowrap; }

/* Attendance status badges */
.badge-present, .badge-green { background: rgba(39,174,96,0.12); color: #1e8449; }
.badge-absent, .badge-red { background: rgba(192,57,43,0.12); color: #922b21; }
.badge-tardy, .badge-gold { background: rgba(249,160,27,0.12); color: #b87300; }
.badge-excused, .badge-blue { background: rgba(36,113,163,0.12); color: #1a5276; }
.badge-remote { background: rgba(142,68,173,0.12); color: #6c3483; }

/* Attendance link - non-blue */
.attendance-link {
    color: var(--dark);
    text-decoration: none;
    font-weight: 500;
}
.attendance-link:hover { text-decoration: underline; }

/* Attendance radio center */
.attendance-radio-cell { text-align: center; vertical-align: middle; }
.attendance-radio-cell input[type="radio"] { margin: 0 auto; display: block; }
.attendance-notes { width: 100%; }

/* Attendance notes input */
.attendance-notes {
    padding: 4px 8px;
    font-size: 13px;
}

/* Attendance radio grid */
.attendance-grid input[type="radio"] { accent-color: var(--gold); }

/* Gradebook - sticky student col */
.gb-sticky-header {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--dark);
    min-width: 180px;
}

.gb-sticky-cell {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    font-weight: 600;
    font-size: 13px;
}

.gb-cell-center { text-align: center; cursor: pointer; font-size: 13px; }
.gb-assignment-header { text-align: center; min-width: 80px; font-size: 11px; line-height: 1.3; }
.gb-pts-sub { font-weight: 400; color: #999; }
.gb-avg-header { text-align: center; min-width: 80px; background: var(--mid); color: #fff; }
.gb-avg-cell { text-align: center; font-weight: 700; font-size: 14px; }

/* Gradebook average row - dark bg white text */
.avg-row td {
    background: var(--mid) !important;
    color: #fff !important;
    font-weight: 700;
}

/* Gradebook card no padding */
.card-flush { padding: 0; overflow: hidden; }

/* Gradebook table wrap scroll */
.gb-table-scroll { max-height: calc(100vh - 280px); overflow: auto; }

/* Gradebook student link */
.gb-student-link { color: var(--dark-warm); text-decoration: none; }
.gb-student-link:hover { text-decoration: underline; }

/* Gradebook submitted marker */
.gb-submitted { color: #1565C0; }
.gb-missing { color: #ccc; }

/* Gradebook inline edit input */
.gb-edit-input {
    width: 60px;
    padding: 4px 6px;
    text-align: center;
    font-size: 13px;
    margin: 0 auto;
}

/* Breadcrumbs */
.breadcrumb {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.8125rem;
    color: var(--mid);
    margin-bottom: 0.25rem;
}

.breadcrumb a { color: var(--gold); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { margin: 0 0.35rem; color: var(--tan); }

/* Detail stat boxes (side by side) */
.detail-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.detail-stats .stat-card { flex: 1; }

.teacher-name { font-size: 18px; margin-bottom: 4px; }
.parent-entry { margin-bottom: 12px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.flex-wrap { flex-wrap: wrap; }
.detail-stat-item { flex: 1; min-width: 200px; }
.detail-stat-value { font-size: 18px; font-weight: 600; }
.section-divider { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.08); }
.description-text { font-size: 14px; line-height: 1.6; }
.text-success { color: #2E7D32; }
.section-title { font-family: 'Instrument Serif', serif; font-size: 20px; }
.col-narrow { width: 80px; }
.col-feedback { width: 200px; }
.badge-inline-ml { margin-left: 4px; }
.parent-name { font-weight: 500; }
.card-header { font-family: 'Schibsted Grotesk', sans-serif; font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; color: var(--dark); display: flex; justify-content: space-between; }
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: rgba(249,160,27,0.06); }

/* Detail tables (view pages) */
.detail-table { box-shadow: none; }
.detail-label { width: 140px; font-weight: 600; color: var(--mid); }

/* Grid 4 column */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* Phosphor icon utilities */
.feature-disabled-icon-lg { font-size: 48px; color: var(--tan); }

.icon-sm { font-size: 16px; }

/* Lucide icons inline sizing */
/* Quick link icons */
.quick-link i[class*="ph-"] { font-size: 1.25rem; }

/* Export link */
a[href*="export"], .export-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--mid);
    font-size: 0.8125rem;
    text-decoration: none;
}

a[href*="export"]:hover, .export-link:hover { color: var(--gold); }

/* Save status text */
.save-status { font-size: 13px; color: #6B6560; align-self: center; }
.save-status-success { color: #2E7D32; }
.save-status-error { color: #C62828; }

/* Feature disabled state */
.feature-disabled { text-align: center; padding: 3rem; }
.feature-disabled-icon { font-size: 48px; color: var(--tan); }
.feature-disabled h3 { margin-top: 1rem; }
.feature-disabled p { margin-top: 0.5rem; }
.feature-disabled .btn { margin-top: 1rem; }

/* Student grid/card view */
.student-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.student-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 1.25rem;
    text-align: center;
    text-decoration: none;
    color: var(--dark);
    transition: all 0.15s;
    cursor: pointer;
}

.student-card:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.avatar-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--tan);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 auto 0.75rem;
}
img.avatar-circle.avatar-img {
    object-fit: cover;
    background: none;
}

.student-card-name { font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.25rem; }
.student-card-meta { font-size: 0.8125rem; color: var(--mid); }

/* View toggle buttons */
.view-toggle {
    display: inline-flex;
    border: 1px solid var(--tan);
    border-radius: 8px;
    overflow: hidden;
}

.view-toggle-btn {
    padding: 0.35rem 0.7rem;
    background: #fff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: var(--mid);
    transition: all 0.15s;
}

.view-toggle-btn.active {
    background: var(--dark);
    color: #fff;
}

/* Content wrapper for pages without card wrapping */
.content {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Calendar */
.cal-layout { display: flex; gap: 1.5rem; }
.cal-main { flex: 1; min-width: 0; }
.cal-sidebar { width: 300px; flex-shrink: 0; }

.cal-month-nav { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.cal-month-title { font-size: 40px; flex: 1; text-align: center; margin: 0; }

.cal-filters { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.cal-filter-btn {
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--tan);
    background: #fff;
    color: var(--mid);
    cursor: pointer;
    transition: all 0.15s;
}
.cal-filter-btn.active { border-color: transparent; color: #fff; }
.cal-filter-btn.cal-type-school.active { background: #5B7B6A; }
.cal-filter-btn.cal-type-class.active { background: #6A85A8; }
.cal-filter-btn.cal-type-assignment.active { background: #A8896A; }
.cal-filter-btn.cal-type-meeting.active { background: #8A7BA8; }
.cal-filter-btn.cal-type-holiday.active { background: #C4956A; }
.cal-filter-btn.cal-type-other.active { background: var(--mid); }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
}

.cal-dow {
    padding: 0.5rem;
    text-align: center;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mid);
    background: rgba(0,0,0,0.02);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.cal-day {
    min-height: 80px;
    padding: 0.4rem;
    border-right: 1px solid rgba(0,0,0,0.04);
    border-bottom: 1px solid rgba(0,0,0,0.04);
    cursor: pointer;
    transition: background 0.1s;
}
.cal-day:hover { background: rgba(249,160,27,0.04); }
.cal-day-empty { background: rgba(0,0,0,0.015); cursor: default; }
.cal-day-empty:hover { background: rgba(0,0,0,0.015); }
.cal-day-today { background: rgba(249,160,27,0.06); }
.cal-day-today .cal-day-num { color: var(--gold); font-weight: 700; }
.cal-day-selected { background: rgba(249,160,27,0.1); }

.cal-day-num {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--dark);
}

.cal-day-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.cal-day-event {
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
}

.cal-day-event-name {
    font-size: 0.65rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--dark);
}

.cal-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.cal-type-school .cal-dot { background: #5B7B6A; }
.cal-type-class .cal-dot { background: #6A85A8; }
.cal-type-assignment .cal-dot { background: #A8896A; }
.cal-type-meeting .cal-dot { background: #8A7BA8; }
.cal-type-holiday .cal-dot { background: #C4956A; }
.cal-type-other .cal-dot { background: var(--mid); }

.cal-dot-more {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.625rem;
    color: var(--mid);
    line-height: 8px;
}

.cal-sidebar-title {
    font-size: 24px;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cal-upcoming-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    text-decoration: none;
    color: var(--dark);
    transition: color 0.1s;
}
.cal-upcoming-item:hover { color: var(--gold); }
.cal-upcoming-item .cal-dot { margin-top: 5px; }
.cal-upcoming-info { flex: 1; min-width: 0; }
.cal-upcoming-title { font-size: 0.875rem; font-weight: 500; }
.cal-upcoming-meta { font-size: 0.75rem; color: var(--mid); margin-top: 2px; }

/* Calendar badges (view page) */
.cal-badge-school { background: rgba(91,123,106,0.12); color: #3d5a4a; }
.cal-badge-class { background: rgba(106,133,168,0.12); color: #4a6a8a; }
.cal-badge-assignment { background: rgba(168,137,106,0.12); color: #7a6240; }
.cal-badge-meeting { background: rgba(138,123,168,0.12); color: #5e5080; }
.cal-badge-holiday { background: rgba(196,149,106,0.12); color: #8a6030; }
.cal-badge-other { background: rgba(0,0,0,0.06); color: var(--mid); }

/* Calendar form */
.cal-form-full { width: 100%; }
.cal-textarea { resize: vertical; }
.cal-allday-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.cal-allday-label input { accent-color: var(--gold); }

/* Modal overlay */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 200;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active { display: flex; }

.modal-content {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.15);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.modal-header h3 { margin: 0; }

/* Report Card */
.report-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.report-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 2px solid var(--dark);
}

.report-card-school {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.report-card-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.report-card-logo-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--tan);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.75rem;
}

.report-card-school-name {
    font-size: 24px;
    margin: 0;
}

.report-card-school-sub {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mid);
    margin-top: 2px;
}

.report-card-term-info { text-align: right; }

.report-card-term-name {
    font-family: 'Instrument Serif', serif;
    font-size: 18px;
}

.report-card-term-dates {
    font-size: 0.8125rem;
    color: var(--mid);
    margin-top: 2px;
}

.report-card-term-year {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mid);
    margin-top: 4px;
}

.report-card-student-bar {
    display: flex;
    gap: 2rem;
    padding: 1rem 2rem;
    background: rgba(0,0,0,0.02);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.report-card-student-field { display: flex; flex-direction: column; }

.report-card-field-label {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mid);
}

.report-card-field-value {
    font-size: 0.9375rem;
    font-weight: 500;
    margin-top: 2px;
}

.report-card-section {
    padding: 1.25rem 2rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.report-card-section:last-child { border-bottom: none; }

.report-card-section-title {
    font-size: 18px;
    margin-bottom: 0.75rem;
}

.report-card-table { width: 100%; border-collapse: collapse; }

.report-card-table thead th {
    background: var(--dark);
    color: #fff;
    padding: 0.6rem 0.75rem;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
}

.report-card-table tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 0.875rem;
}

.report-card-table tfoot td {
    padding: 0.75rem;
    font-weight: 600;
    background: rgba(0,0,0,0.02);
    border-top: 2px solid var(--dark);
}

.report-card-gpa-row td { font-size: 0.875rem; }

.report-card-attendance {
    display: flex;
    gap: 2rem;
}

.report-card-att-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.report-card-att-value {
    font-family: 'Instrument Serif', serif;
    font-size: 28px;
    line-height: 1.1;
}

.report-card-att-label {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mid);
    margin-top: 4px;
}

.report-card-comments {
    min-height: 60px;
    padding: 0.75rem;
    background: rgba(0,0,0,0.02);
    border-radius: 8px;
}

.report-card-footer-bar {
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: rgba(0,0,0,0.02);
    border-top: 1px solid rgba(0,0,0,0.06);
}

.report-card-footer-field { display: flex; flex-direction: column; }

/* Print styles */
@media print {
    .sidebar, .page-header, .breadcrumb, .filter-row,
    .detail-stats, .nav-item, .btn, .modal-overlay { display: none !important; }

    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .report-card {
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .report-card-header { border-bottom: 3px solid #000; }
    .report-card-table thead th { background: #333 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .report-card-table tfoot td { border-top: 3px solid #000; }
    .badge { border: 1px solid #ccc; }

    body { background: #fff; }
    .app-layout { display: block; }
}

/* Analytics Charts */
.analytics-bar-chart { display: flex; flex-direction: column; gap: 0.6rem; }

.bar-row { display: flex; align-items: center; gap: 0.75rem; }
.bar-label {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mid);
    min-width: 72px;
    text-align: right;
    flex-shrink: 0;
}
.bar-track {
    flex: 1;
    height: 20px;
    background: rgba(0,0,0,0.04);
    border-radius: 4px;
    overflow: hidden;
}
.bar-track-inline { display: inline-block; width: 80px; height: 10px; vertical-align: middle; margin-right: 6px; }
.bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 2px;
}
.bar-fill-gold { background: var(--gold); }
.bar-fill-green { background: var(--success); }
.bar-fill-blue { background: #2471a3; }
.bar-fill-tan { background: var(--tan); }
.bar-fill-red { background: var(--danger); }
.bar-fill-dark { background: var(--dark); }
.bar-value {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dark);
    min-width: 36px;
    text-align: right;
    flex-shrink: 0;
}

/* Vertical bar chart */
.analytics-bar-chart-vertical {
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 1.25rem;
    height: 180px;
    padding-top: 1rem;
}
.vbar-col { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; flex: 1; height: 100%; }
.vbar-count {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dark);
}
.vbar-track {
    flex: 1;
    width: 100%;
    max-width: 48px;
    background: rgba(0,0,0,0.04);
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.vbar-fill {
    width: 100%;
    border-radius: 4px;
    transition: height 0.4s ease;
    min-height: 2px;
}
.vbar-label {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mid);
}

/* Stacked bar */
.analytics-stacked-bar {
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0,0,0,0.04);
}
.stacked-segment { transition: width 0.4s ease; min-width: 1px; }
.stacked-present { background: var(--success); }
.stacked-absent { background: var(--danger); }
.stacked-tardy { background: var(--gold); }
.stacked-excused { background: #2471a3; }

/* Legend */
.analytics-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.75rem; }
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    color: var(--mid);
}
.legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legend-dot-present { background: var(--success); }
.legend-dot-absent { background: var(--danger); }
.legend-dot-tardy { background: var(--gold); }
.legend-dot-excused { background: #2471a3; }

/* Big stat number */
.analytics-big-number {
    font-family: 'Instrument Serif', serif;
    font-size: 48px;
    color: var(--dark);
    line-height: 1.1;
}

/* At-risk rows */
.at-risk-severe td { background: rgba(192,57,43,0.06); }
.at-risk-moderate td { background: rgba(249,160,27,0.06); }

/* Trend indicators */
.analytics-trend-up { color: var(--success); font-size: 1.1rem; }
.analytics-trend-down { color: var(--danger); font-size: 1.1rem; }
.analytics-trend-stable { color: var(--mid); font-size: 1.1rem; }

/* Utility */
.mt-16 { margin-top: 1rem; }

/* ========================================
   Onboarding Wizard
   ======================================== */

.onboarding-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--cream);
}

.onboarding-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: #fff;
}

.onboarding-logo img {
    height: 35px;
}

.onboarding-exit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--mid);
    text-decoration: none;
    font-size: 0.8125rem;
    font-family: 'Schibsted Grotesk', sans-serif;
    transition: color 0.15s;
}

.onboarding-exit:hover { color: var(--dark); }

.onboarding-progress-wrap {
    padding: 1.5rem 0 0;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.onboarding-progress-bar {
    height: 6px;
    background: rgba(198,181,161,0.3);
    border-radius: 100px;
    overflow: hidden;
}

.onboarding-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold) 0%, #1a365d 100%);
    border-radius: 100px;
    transition: width 0.4s ease;
    width: 16.66%;
}

.onboarding-step-label {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mid);
    margin-top: 0.5rem;
    text-align: center;
}

.onboarding-body {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 2.5rem 6rem;
}

.onboarding-container {
    width: 100%;
    max-width: 900px;
}

.onboarding-step {
    display: none;
    animation: onboardFadeIn 0.35s ease;
}

.onboarding-step.active { display: block; }

@keyframes onboardFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.onboarding-step-icon {
    font-size: 3rem;
    color: var(--gold);
    margin-bottom: 0;
}

.onboarding-step-icon-launch {
    font-size: 4rem;
}

.onboarding-title-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 0.5rem;
}

.onboarding-title {
    font-family: 'Instrument Serif', serif;
    font-size: 4rem;
    font-weight: 400;
    color: var(--dark);
    margin-bottom: 0;
    line-height: 1.1;
}

.onboarding-subtitle {
    color: var(--mid);
    font-size: 1rem;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.onboarding-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.onboarding-form .form-group { margin-bottom: 1.25rem; }

.onboarding-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.onboarding-form-row-3 {
    grid-template-columns: 2fr 1fr 1fr;
}

.onboarding-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Curriculum cards */
.onboarding-curriculum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.onboarding-curriculum-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    background: #fff;
    border: 2px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    font-family: 'Instrument Sans', sans-serif;
}

.onboarding-curriculum-card i {
    font-size: 2rem;
    color: var(--mid);
    transition: color 0.2s;
}

.onboarding-curriculum-card:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 16px rgba(249,160,27,0.1);
}

.onboarding-curriculum-card:hover i { color: var(--gold); }

.onboarding-curriculum-card.selected {
    border-color: var(--gold);
    background: rgba(249,160,27,0.04);
    box-shadow: 0 4px 16px rgba(249,160,27,0.12);
}

.onboarding-curriculum-card.selected i { color: var(--gold); }

.onboarding-curriculum-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--dark);
}

.onboarding-curriculum-desc {
    font-size: 0.75rem;
    color: var(--mid);
    line-height: 1.4;
}

/* Courses step */
.onboarding-course-stage { margin-bottom: 1.5rem; }

.onboarding-course-stage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.onboarding-section-title {
    font-family: 'Instrument Serif', serif;
    font-size: 1.25rem;
    color: var(--dark);
}

.onboarding-course-toggle-all {
    display: flex;
    gap: 0.5rem;
}

.onboarding-course-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s;
}

.onboarding-course-item:hover { border-color: var(--gold); }

.onboarding-course-item input[type="checkbox"] {
    accent-color: var(--gold);
    margin-top: 4px;
    flex-shrink: 0;
}

.onboarding-course-info { flex: 1; min-width: 0; }
.onboarding-course-info strong { font-size: 0.9375rem; }

/* Import users step */
.onboarding-import-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.onboarding-import-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 2px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.onboarding-import-option i { font-size: 1.5rem; color: var(--mid); flex-shrink: 0; }
.onboarding-import-option strong { display: block; font-size: 0.9375rem; }

.onboarding-import-option:hover { border-color: var(--gold); }

.onboarding-import-option.selected {
    border-color: var(--gold);
    background: rgba(249,160,27,0.04);
}

.onboarding-import-option.selected i { color: var(--gold); }

.onboarding-csv-section { margin-bottom: 1.5rem; }

.onboarding-csv-section .onboarding-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 1.125rem;
}

.onboarding-template-link {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    color: var(--gold);
    text-decoration: none;
    margin-left: auto;
    font-weight: 500;
}

.onboarding-template-link:hover { text-decoration: underline; }

/* Dropzone */
.onboarding-dropzone {
    border: 2px dashed var(--tan);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(255,255,255,0.6);
}

.onboarding-dropzone:hover,
.onboarding-dropzone.dragover {
    border-color: var(--gold);
    background: rgba(249,160,27,0.04);
}

.onboarding-dropzone i {
    font-size: 2rem;
    color: var(--tan);
    display: block;
    margin-bottom: 0.5rem;
}

.onboarding-dropzone:hover i,
.onboarding-dropzone.dragover i { color: var(--gold); }

.onboarding-dropzone p {
    font-size: 0.9375rem;
    color: var(--mid);
    margin-bottom: 0.25rem;
}

.onboarding-csv-preview {
    margin-top: 1rem;
}

.onboarding-csv-preview .table-wrap {
    max-height: 200px;
    overflow-y: auto;
}

/* Logo dropzone */
.onboarding-logo-dropzone {
    padding: 1.5rem;
}

.onboarding-logo-dropzone img {
    max-width: 140px;
    max-height: 100px;
    object-fit: contain;
}

/* Branding layout */
.onboarding-branding-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.onboarding-branding-controls { display: flex; flex-direction: column; gap: 0; }
.onboarding-branding-controls .form-group { margin-bottom: 1.25rem; }

/* Color picker */
.onboarding-color-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.onboarding-color-row .form-group {
    text-align: center;
}
.onboarding-color-row .onboarding-color-hex {
    display: block;
    margin-top: 0.25rem;
}

.onboarding-color-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.onboarding-color-picker input[type="color"] {
    width: 48px;
    height: 40px;
    border: 1px solid var(--tan);
    border-radius: 8px;
    padding: 2px;
    cursor: pointer;
    background: #fff;
}

.onboarding-color-hex {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.8125rem;
    color: var(--mid);
    text-transform: uppercase;
}

/* Brand preview */
.onboarding-preview-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.08);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.onboarding-preview-header {
    padding: 1.5rem;
    text-align: center;
    background: #1a365d;
    transition: background-color 0.3s;
}

.onboarding-preview-logo {
    margin-bottom: 0.5rem;
}

.onboarding-preview-logo i { font-size: 2rem; color: #fff; }
.onboarding-preview-logo img { max-height: 40px; filter: brightness(0) invert(1); }

.onboarding-preview-school {
    color: #fff;
    font-family: 'Instrument Serif', serif;
    font-size: 2rem;
}

.onboarding-preview-body { padding: 1.5rem; }

.onboarding-preview-field {
    height: 36px;
    border: 1px solid var(--tan);
    border-radius: 6px;
    margin-bottom: 0.75rem;
    background: var(--cream);
}

.onboarding-preview-btn {
    width: 100%;
    padding: 0.65rem;
    background: #c9a227;
    color: #fff;
    border-radius: 8px;
    text-align: center;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 0.3s;
}

/* Launch step */
.onboarding-launch-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.onboarding-launch-stat {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 1.5rem;
    text-align: center;
}

.onboarding-launch-stat-value {
    font-family: 'Instrument Serif', serif;
    font-size: 2.5rem;
    color: var(--dark);
    line-height: 1.1;
}

.onboarding-launch-stat-value i { font-size: 2rem; color: var(--success); }

.onboarding-launch-stat-label {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mid);
    margin-top: 0.35rem;
}

.onboarding-launch-action { text-align: center; }

.onboarding-launch-btn {
    padding: 1rem 3rem;
    font-size: 1.125rem;
    border-radius: 12px;
}

.onboarding-launch-btn i { font-size: 1.25rem; }

/* Footer nav */
.onboarding-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 1rem 2.5rem;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.06);
    z-index: 50;
}

.onboarding-btn-back,
.onboarding-btn-next {
    min-width: 120px;
}

/* Confetti canvas */
#confettiCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    display: none;
}

#confettiCanvas.active { display: block; }

/* Onboarding: right-aligned Next button */
.onboarding-footer {
    justify-content: flex-end;
    gap: 1rem;
}

.onboarding-footer .onboarding-btn-back {
    margin-right: auto;
}

/* Onboarding: Course prefix hint */
.onboarding-course-prefix-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--mid);
    background: rgba(249,160,27,0.06);
    padding: 0.6rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.onboarding-course-prefix-hint i {
    color: var(--gold);
    font-size: 1rem;
    flex-shrink: 0;
}

/* Onboarding: Multi-curricula panel */
.onboarding-multi-panel {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
}

.onboarding-multi-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.onboarding-multi-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: background 0.15s;
}

.onboarding-multi-check:hover {
    background: rgba(249,160,27,0.04);
}

.onboarding-multi-check input[type="checkbox"] {
    accent-color: var(--gold);
}

/* Onboarding: Other curriculum panel */
.onboarding-other-panel {
    margin-top: 1.5rem;
}

/* Onboarding: Demo data sliders */
.onboarding-slider-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
}

.onboarding-slider {
    width: 100%;
    height: 6px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--tan);
    border-radius: 100px;
    outline: none;
    margin-top: 0.5rem;
}

.onboarding-slider::-webkit-slider-track {
    height: 6px;
    background: var(--tan);
    border-radius: 100px;
}

.onboarding-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--dark);
    border: 3px solid var(--gold);
    cursor: pointer;
    margin-top: -7px;
}

.onboarding-slider::-moz-range-track {
    height: 6px;
    background: var(--tan);
    border-radius: 100px;
    border: none;
}

.onboarding-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--dark);
    border: 3px solid var(--gold);
    cursor: pointer;
}

.onboarding-slider::-moz-range-progress {
    background: var(--gold);
    height: 6px;
    border-radius: 100px;
}

/* Onboarding: Font pairing grid */
.onboarding-font-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.onboarding-font-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: #fff;
    border: 2px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    font-family: inherit;
}

.onboarding-font-card:hover {
    border-color: var(--gold);
}

.onboarding-font-card.selected {
    border-color: var(--gold);
    background: rgba(249,160,27,0.04);
    box-shadow: 0 4px 16px rgba(249,160,27,0.12);
}

.onboarding-font-card-heading {
    font-size: 1.125rem;
    color: var(--dark);
    line-height: 1.3;
}

.onboarding-font-card-body {
    font-size: 0.75rem;
    color: var(--mid);
    line-height: 1.4;
}

/* Font preview classes */
.font-classic-heading { font-family: 'Instrument Serif', serif; }
.font-classic-body { font-family: 'Instrument Sans', sans-serif; }
.font-traditional-heading { font-family: 'Playfair Display', serif; }
.font-traditional-body { font-family: 'Source Sans 3', sans-serif; }
.font-modern-heading { font-family: 'DM Serif Display', serif; }
.font-modern-body { font-family: 'DM Sans', sans-serif; }
.font-elegant-heading { font-family: 'Cormorant Garamond', serif; }
.font-elegant-body { font-family: 'Proza Libre', sans-serif; }
.font-clean-heading { font-family: 'Libre Baskerville', serif; }
.font-clean-body { font-family: 'Nunito Sans', sans-serif; }

/* Onboarding: Launch logo */
.onboarding-launch-logo-wrap {
    text-align: center;
    margin-bottom: 1.5rem;
}

.onboarding-launch-logo {
    max-height: 80px;
    max-width: 200px;
    object-fit: contain;
}

/* Onboarding: 4-column launch stats */
.onboarding-launch-stats {
    grid-template-columns: repeat(4, 1fr);
}

/* Share demo button */
.btn-share-demo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: rgba(249,160,27,0.1);
    color: var(--gold);
    border: 1px solid rgba(249,160,27,0.25);
    border-radius: 8px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-share-demo:hover {
    background: rgba(249,160,27,0.18);
    border-color: var(--gold);
}

.btn-share-demo i {
    font-size: 1rem;
}

/* Spinning icon for loading state */
@keyframes phSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ph-spin { animation: phSpin 0.8s linear infinite; }

/* Responsive */
@media (max-width: 768px) {
    .onboarding-header { padding: 1rem 1.5rem; }
    .onboarding-progress-wrap { padding: 1rem 1.5rem 0; }
    .onboarding-body { padding: 1.5rem 1.5rem 5rem; }
    .onboarding-footer { padding: 1rem 1.5rem; }
    .onboarding-title { font-size: 1.75rem; }
    .onboarding-form-row { grid-template-columns: 1fr; }
    .onboarding-form-row-3 { grid-template-columns: 1fr; }
    .onboarding-curriculum-grid { grid-template-columns: 1fr 1fr; }
    .onboarding-branding-layout { grid-template-columns: 1fr; }
    .onboarding-launch-stats { grid-template-columns: 1fr 1fr; }
    .onboarding-font-grid { grid-template-columns: 1fr; }
    .onboarding-slider-group { grid-template-columns: 1fr; }
    .onboarding-multi-checks { grid-template-columns: 1fr; }
}

/* ========================================
   Settings / Branding
   ======================================== */

.settings-form .form-group { margin-bottom: 1.25rem; }
.settings-input { width: 100%; }
.settings-textarea { resize: vertical; min-height: 80px; }
.settings-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }

/* Logo preview */
.logo-preview-area {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    margin-bottom: 1rem;
    background: var(--cream);
    border-radius: 8px;
    padding: 1rem;
}

.logo-preview-img { max-height: 80px; max-width: 100%; object-fit: contain; }

.logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    color: var(--tan);
    font-size: 0.875rem;
}

.logo-placeholder i { font-size: 2rem; }

/* Upload zone */
.upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 2px dashed var(--tan);
    border-radius: 8px;
    background: rgba(249,160,27,0.03);
    cursor: pointer;
    transition: all 0.2s;
}

.upload-zone:hover,
.upload-zone.upload-zone-active {
    border-color: var(--gold);
    background: rgba(249,160,27,0.06);
}

.upload-zone i { font-size: 1.75rem; color: var(--gold); }
.upload-zone-text { font-size: 0.875rem; font-weight: 500; color: var(--dark); }
.upload-zone-hint { font-size: 0.75rem; color: var(--mid); }

.upload-progress {
    margin-top: 0.5rem;
    height: 4px;
    background: rgba(0,0,0,0.06);
    border-radius: 2px;
    overflow: hidden;
}

.upload-progress-bar {
    height: 100%;
    width: 100%;
    background: var(--gold);
    animation: uploadPulse 1s ease-in-out infinite;
}

@keyframes uploadPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Color picker */
.color-picker-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.color-picker-input {
    width: 48px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--tan);
    border-radius: 4px;
    cursor: pointer;
    background: none;
}

.color-picker-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker-input::-webkit-color-swatch { border: none; border-radius: 2px; }
.color-picker-input::-moz-color-swatch { border: none; border-radius: 2px; }

.color-hex-input {
    width: 100px;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

/* Branding preview card */
.branding-preview-card { box-shadow: 0 4px 24px rgba(0,0,0,0.06); }

.preview-section { margin-bottom: 1.25rem; }
.preview-section:last-child { margin-bottom: 0; }

.preview-label {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mid);
    margin-bottom: 0.5rem;
}

/* Preview: Login */
.preview-login {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
}

.preview-login-bar {
    padding: 0.75rem 1rem;
    color: #fff;
    font-family: 'Instrument Serif', serif;
    font-size: 0.9375rem;
}

.preview-login-body { padding: 0.75rem 1rem; background: #fff; }

.preview-login-field {
    height: 24px;
    background: var(--cream);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.preview-login-btn {
    padding: 0.35rem;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Preview: Sidebar */
.preview-sidebar {
    border-radius: 8px;
    overflow: hidden;
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
    padding: 0.5rem 0;
}

.preview-sidebar-logo {
    padding: 0.5rem 0.75rem;
    font-family: 'Instrument Serif', serif;
    font-size: 0.875rem;
    color: #fff;
    border-bottom: 2px solid;
    margin-bottom: 0.25rem;
}

.preview-sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
}

.preview-sidebar-item.active { color: #fff; }
.preview-sidebar-item i { font-size: 0.875rem; }

/* Preview: Report Card */
.preview-report {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
}

.preview-report-bar {
    padding: 0.75rem 1rem;
    color: #fff;
    border-bottom: 3px solid;
}

.preview-report-name {
    font-family: 'Instrument Serif', serif;
    font-size: 0.9375rem;
    display: block;
}

.preview-report-sub {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

/* Branding page extras */
.branding-image-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.branding-thumb-sm { width: 32px; height: 32px; object-fit: contain; border-radius: 4px; }
.branding-thumb-lg { max-width: 200px; max-height: 60px; object-fit: cover; border-radius: 6px; }

.preview-login-tagline {
    display: block;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.625rem;
    opacity: 0.7;
    margin-top: 2px;
}

.preview-typography {
    padding: 1rem;
    background: var(--cream);
    border-radius: 8px;
}

.preview-heading {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    color: var(--dark);
}

.preview-body-text {
    font-size: 0.8125rem;
    color: var(--mid);
    line-height: 1.5;
}

.preview-buttons {
    display: flex;
    gap: 0.5rem;
}

.preview-btn-sample {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}

.preview-btn-sample-outline {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1.5px solid;
    background: transparent;
}

/* Login page branded background */
.login-wrapper-branded {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.login-wrapper-branded .login-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
}

.login-banner {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
    margin-bottom: 1rem;
}

.login-tagline {
    text-align: center;
    color: var(--mid);
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
    font-style: italic;
}

/* Subdomain */
.subdomain-input-row {
    display: flex;
    align-items: center;
    gap: 0;
}

.subdomain-field {
    border-radius: 4px 0 0 4px;
    flex: 1;
}

.subdomain-suffix {
    padding: 0.5rem 0.85rem;
    background: rgba(0,0,0,0.04);
    border: 1px solid var(--tan);
    border-left: none;
    border-radius: 0 4px 4px 0;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.875rem;
    color: var(--mid);
    white-space: nowrap;
}

.subdomain-status {
    font-size: 0.8125rem;
    margin-top: 0.5rem;
    min-height: 1.25em;
}

.subdomain-status-success { color: var(--success); }
.subdomain-status-error { color: var(--danger); }
.subdomain-status-neutral { color: var(--mid); }

.subdomain-rules { margin-top: 0.5rem; }

.alert-subdomain-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    background: rgba(249,160,27,0.08);
    color: var(--mid);
    border: 1px solid rgba(249,160,27,0.15);
}

.alert-subdomain-warning i { font-size: 1.1rem; color: var(--gold); flex-shrink: 0; }

/* Toast (shared with features) */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    background: var(--success);
    z-index: 999;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s;
    pointer-events: none;
}

.toast.error { background: var(--danger); }
.toast.show { opacity: 1; transform: translateY(0); }

/* ========================================
   Teacher & Student Dashboard Components
   ======================================== */

/* Teacher courses grid */
.teacher-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

/* Course card enhancements for dashboard */
.course-card-name {
    font-family: 'Instrument Serif', serif;
    font-size: 1.25rem;
    color: var(--subject-color, var(--dark));
}

.course-card-code {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mid);
}

.course-card-meta-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.course-card-students {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--mid);
}

.course-card-students i { font-size: 1rem; }

.course-card-teacher {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--mid);
}

.course-card-teacher i { font-size: 1rem; }

/* Course card grade row (student dashboard) */
.course-card-grade-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.course-card-grade-letter {
    font-family: 'Instrument Serif', serif;
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1;
}

.course-card-grade-pct {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.8125rem;
    color: var(--mid);
}

/* Grade colors */
.grade-color-default { color: #999; }
.grade-color-a { color: #2E7D32; }
.grade-color-b { color: #1565C0; }
.grade-color-c { color: #F57F17; }
.grade-color-d { color: #E65100; }
.grade-color-f { color: #C62828; }

/* List item body layout */
.list-item-body { flex: 1; min-width: 0; }

.list-item-title {
    font-size: 0.875rem;
    font-weight: 500;
}

.list-item-meta {
    font-size: 0.75rem;
    color: var(--mid);
    margin-top: 2px;
}

.list-item-right {
    flex-shrink: 0;
    text-align: right;
}

.list-item-grade {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.list-item-score {
    font-size: 0.875rem;
    font-weight: 600;
}

.list-item-letter {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
}

/* Quick attendance grid (teacher) */
.quick-attendance-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quick-attendance-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.quick-attendance-item:last-child { border-bottom: none; }

.quick-attendance-name {
    font-size: 0.875rem;
    font-weight: 500;
}

.quick-attendance-code {
    font-size: 0.75rem;
    color: var(--mid);
}

/* Student welcome row */
.page-header-with-avatar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.student-header-avatar {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: 5px solid var(--school-primary, #1a365d);
    object-fit: cover;
    flex-shrink: 0;
}

/* Attendance summary counts (student) */
.attendance-summary-counts {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.75rem;
}

.attendance-summary-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.8125rem;
    color: var(--mid);
}

.attendance-summary-value {
    font-weight: 700;
    color: var(--dark);
}

/* ========================================
   Parent Dashboard Components
   ======================================== */

.parent-children-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.parent-child-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 1.5rem;
    text-decoration: none;
    color: var(--dark);
    transition: all 0.15s;
    display: block;
}

.parent-child-card:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.parent-child-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.parent-child-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.parent-child-name {
    font-size: 1.125rem;
    font-weight: 600;
}

.parent-child-meta {
    font-size: 0.8125rem;
    color: var(--mid);
}

.parent-child-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.parent-child-stat {
    text-align: center;
    padding: 0.75rem;
    background: var(--cream);
    border-radius: 8px;
}

.parent-child-stat-value {
    font-family: 'Instrument Serif', serif;
    font-size: 1.5rem;
    color: var(--dark);
    line-height: 1.1;
}

.parent-child-stat-label {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mid);
    margin-top: 0.25rem;
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; padding: 1.5rem; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .page-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .filter-row { flex-direction: column; }
    .report-card-header { flex-direction: column; gap: 1rem; }
    .report-card-term-info { text-align: left; }
    .report-card-student-bar { flex-wrap: wrap; gap: 1rem; }
    .report-card-attendance { flex-wrap: wrap; }
    .teacher-courses-grid { grid-template-columns: 1fr; }
    .parent-children-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .login-card { padding: 2rem 1.5rem; }
    .attendance-summary-counts { flex-wrap: wrap; }
}

/* ========================================
   Transcripts
   ======================================== */

.transcript-wrapper {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 2.5rem;
    margin-bottom: 1.5rem;
}

.transcript-document {
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Instrument Sans', sans-serif;
}

.transcript-header {
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--dark);
    margin-bottom: 1.5rem;
}

.transcript-school-logo {
    height: 48px;
    margin-bottom: 0.5rem;
}

.transcript-school-name {
    font-family: 'Instrument Serif', serif;
    font-size: 1.75rem;
    color: var(--dark);
    margin-bottom: 0.25rem;
}

.transcript-school-address {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    color: var(--mid);
    letter-spacing: 0.02em;
}

.transcript-title {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dark);
    margin-top: 1rem;
}

.transcript-student-info {
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: rgba(0,0,0,0.015);
}

.transcript-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
}

.transcript-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.transcript-info-label {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mid);
}

.transcript-info-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dark);
}

.transcript-year-block {
    margin-bottom: 1.5rem;
}

.transcript-year-title {
    font-family: 'Instrument Serif', serif;
    font-size: 1.125rem;
    color: var(--dark);
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--dark);
    margin-bottom: 0.5rem;
}

.transcript-term-label {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mid);
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.transcript-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
}

.transcript-table thead th {
    background: var(--dark);
    color: #fff;
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.transcript-table tbody td {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.transcript-table tfoot td {
    padding: 0.5rem 0.75rem;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    background: rgba(0,0,0,0.025);
    border-top: 1px solid rgba(0,0,0,0.12);
}

.transcript-center {
    text-align: center;
}

.transcript-term-summary td {
    font-weight: 500;
}

.transcript-cumulative {
    border: 2px solid var(--dark);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

.transcript-cumulative-title {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dark);
    margin-bottom: 0.75rem;
}

.transcript-cumulative-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.transcript-cumulative-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.transcript-cumulative-value {
    font-family: 'Instrument Serif', serif;
    font-size: 1.5rem;
    color: var(--dark);
}

.transcript-gpa-scale {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 4px;
}

.transcript-gpa-scale-title {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mid);
    margin-bottom: 0.35rem;
}

.transcript-gpa-scale-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.6875rem;
    color: var(--dark);
}

.transcript-signature {
    margin-top: 2.5rem;
    padding-top: 1rem;
}

.transcript-signature-line {
    display: flex;
    justify-content: space-between;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.8125rem;
    color: var(--dark);
}

.transcript-empty {
    text-align: center;
    padding: 2rem;
    color: var(--mid);
    font-size: 0.9375rem;
}

/* Print-only body for standalone print page */
.transcript-print-body {
    background: #fff;
    padding: 1.5rem;
    margin: 0;
}

/* Print styles */
@media print {
    .sidebar, .sidebar-footer, .page-header, .nav-item, .btn { display: none !important; }
    .main-content { margin-left: 0 !important; padding: 0 !important; }
    .transcript-wrapper { border: none; padding: 0; box-shadow: none; }

    .transcript-document { max-width: 100%; }

    .transcript-header { border-bottom: 2px solid #000; }
    .transcript-school-name { color: #000; }
    .transcript-title { color: #000; }
    .transcript-year-title { color: #000; border-bottom-color: #000; }
    .transcript-cumulative { border-color: #000; }

    .transcript-table thead th {
        background: #000 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .transcript-table tbody td { border-bottom: 1px solid #ccc; }

    body { font-size: 11pt; }

    .page-header-actions { display: none !important; }

    @page { margin: 0.75in; }
}

/* Demo Login */
.demo-login-home {
    text-align: center;
    margin-bottom: 1.5rem;
}

.demo-login-top-logo {
    height: 40px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.demo-login-top-logo:hover {
    opacity: 1;
}

.demo-login-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 2.5rem;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.06);
}
.demo-login-header {
    text-align: center;
    margin-bottom: 2rem;
}
.demo-login-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(249,160,27,0.1);
    color: var(--gold);
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 1rem;
}
.demo-login-school {
    font-family: 'Instrument Serif', serif;
    font-size: 2rem;
    font-weight: 400;
    color: var(--dark);
    margin-bottom: 0.5rem;
}
.demo-login-subtitle {
    color: var(--mid);
    font-size: 0.9375rem;
}
.demo-role-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.demo-role-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1rem;
    border: 2px solid rgba(198,181,161,0.3);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    text-align: center;
}
.demo-role-card:hover {
    border-color: var(--tan);
    transform: translateY(-1px);
}
.demo-role-card.selected {
    border-color: var(--gold);
    background: rgba(249,160,27,0.04);
}
.demo-role-icon {
    font-size: 2rem;
    color: var(--mid);
    margin-bottom: 0.5rem;
}
.demo-role-card.selected .demo-role-icon {
    color: var(--gold);
}
.demo-role-label {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--dark);
    margin-bottom: 2px;
}
.demo-role-email {
    font-size: 0.75rem;
    color: var(--mid);
}
.demo-login-btn {
    width: 100%;
}
.demo-login-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.demo-login-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(198,181,161,0.2);
}
.demo-real-login {
    font-size: 0.8125rem;
    color: var(--mid);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}
.demo-real-login:hover {
    color: var(--dark);
}
.demo-login-powered {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 1.5rem;
}
.demo-login-classica-logo {
    height: 16px;
}

@media (max-width: 540px) {
    .demo-login-card {
        padding: 1.5rem 1.25rem;
        margin: 0 0.75rem;
        border-radius: 12px;
    }
    .demo-login-school {
        font-size: 1.5rem;
    }
    .demo-login-subtitle {
        font-size: 0.85rem;
    }
    .demo-role-grid {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }
    .demo-role-card {
        flex-direction: row;
        padding: 1rem 1.25rem;
        gap: 0.75rem;
        text-align: left;
    }
    .demo-role-icon {
        font-size: 1.5rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .demo-role-label {
        font-size: 0.9375rem;
    }
    .demo-role-email {
        font-size: 0.75rem;
        word-break: break-all;
    }
    .demo-login-home img {
        height: 32px;
    }
}

/* Tuition Plan Cards */
.tuition-plan-card {
    background: #fff;
    border: 1px solid rgba(198,181,161,0.25);
    border-radius: 10px;
    padding: 1.25rem;
}
.tuition-plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.tuition-plan-header h3 {
    font-size: 1.0625rem;
    font-weight: 600;
}
.tuition-plan-amount {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 0.75rem;
}
.tuition-plan-details {
    font-size: 0.8125rem;
    color: var(--mid);
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 1rem;
}
.tuition-plan-actions {
    display: flex;
    gap: 0.5rem;
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}
.section-header h2 {
    font-family: 'Instrument Serif', serif;
    font-size: 1.375rem;
    font-weight: 400;
}

/* Application link */
.application-link {
    display: inline-block;
    background: rgba(198,181,161,0.15);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--mid);
    user-select: all;
}

/* Status action buttons */
.status-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.btn-success {
    background: #38a169;
    color: #fff;
    border: 1px solid #38a169;
}
.btn-success:hover { background: #2f855a; }
.btn-danger {
    background: #e53e3e;
    color: #fff;
    border: 1px solid #e53e3e;
}
.btn-danger:hover { background: #c53030; }
.badge-lg {
    font-size: 0.875rem;
    padding: 6px 14px;
}
.badge-orange {
    background: rgba(237,137,54,0.12);
    color: #c05621;
}

/* Detail grid */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.detail-card {
    background: #fff;
    border: 1px solid rgba(198,181,161,0.25);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.detail-card h3 {
    font-family: 'Instrument Serif', serif;
    font-size: 1.125rem;
    font-weight: 400;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(198,181,161,0.15);
    font-size: 0.9375rem;
}
.detail-row:last-child { border-bottom: none; }
.detail-label {
    color: var(--mid);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* ── Recent Grades Cards ── */
.recent-grades-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
@media (max-width: 900px) {
    .recent-grades-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .recent-grades-grid { grid-template-columns: repeat(2, 1fr); }
}
.grade-card {
    background: #fff;
    border: 1px solid rgba(198,181,161,0.2);
    border-radius: 10px;
    padding: 0.875rem;
    text-align: center;
    transition: box-shadow 0.15s;
}
.grade-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.grade-card-letter {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2px;
}
.grade-card-score {
    font-size: 0.8125rem;
    color: var(--mid);
    margin-bottom: 6px;
}
.grade-card-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.grade-card-meta {
    font-size: 0.75rem;
    color: var(--mid);
    margin-top: 2px;
}
.grade-color-a .grade-card-letter { color: #38a169; }
.grade-color-b .grade-card-letter { color: #3182ce; }
.grade-color-c .grade-card-letter { color: #d69e2e; }
.grade-color-d .grade-card-letter { color: #dd6b20; }
.grade-color-f .grade-card-letter { color: #e53e3e; }
.grade-card.grade-color-a { border: 1px solid #38a169; }
.grade-card.grade-color-b { border: 1px solid #3182ce; }
.grade-card.grade-color-c { border: 1px solid #d69e2e; }
.grade-card.grade-color-d { border: 1px solid #dd6b20; }
.grade-card.grade-color-f { border: 1px solid #e53e3e; }

/* Grade percentage badges */
.grade-pct-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid currentColor;
}
.grade-pct-badge-a { color: #38a169; border-color: #38a169; }
.grade-pct-badge-b { color: #3182ce; border-color: #3182ce; }
.grade-pct-badge-c { color: #d69e2e; border-color: #d69e2e; }
.grade-pct-badge-d { color: #dd6b20; border-color: #dd6b20; }
.grade-pct-badge-f { color: #e53e3e; border-color: #e53e3e; }

/* ── Student Grades Page ── */
.student-course-grade-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.student-course-avg {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.student-course-avg-letter {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
}
.student-course-avg-pct {
    font-size: 0.875rem;
    color: var(--mid);
}
.grade-a .student-course-avg-letter { color: #38a169; }
.grade-b .student-course-avg-letter { color: #3182ce; }
.grade-c .student-course-avg-letter { color: #d69e2e; }
.grade-d .student-course-avg-letter { color: #dd6b20; }
.grade-f .student-course-avg-letter { color: #e53e3e; }
.student-grades-table {
    width: 100%;
    font-size: 0.875rem;
}
.student-grades-table th {
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(198,181,161,0.2);
}
.student-grades-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(198,181,161,0.1);
}

/* ── Attendance Calendar (Student View) ── */
.att-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin: 1rem 0;
}
.att-cal-dow {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mid);
    padding: 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.att-cal-day {
    padding: 6px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(198,181,161,0.04);
    aspect-ratio: 2 / 1;
    min-height: auto;
}
.att-cal-empty {
    background: transparent;
}
.att-cal-num {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark);
}
.att-cal-today {
    background: rgba(249,160,27,0.08);
    border: 1px solid rgba(249,160,27,0.3);
}
.att-cal-weekend {
    background: rgba(198,181,161,0.08);
}
.att-cal-weekend .att-cal-num {
    color: var(--mid);
}
.att-cal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.att-cal-present { background: #38a169; }
.att-cal-absent { background: #e53e3e; }
.att-cal-tardy { background: #d69e2e; }
.att-cal-excused { background: #3182ce; }
.att-cal-legend {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    padding: 0.75rem 0;
    font-size: 0.8125rem;
    color: var(--mid);
}
.att-cal-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Calendar: Taller day cells ── */
.cal-day {
    min-height: 90px;
}

/* ── Parent Attendance Calendar ── */
.parent-att-month-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 0.5rem;
    text-align: center;
}
.parent-att-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.parent-att-dow {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mid);
    padding: 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.parent-att-day {
    aspect-ratio: 2 / 1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
}
.parent-att-day-default {
    background: #f5f5f5;
    color: #ccc;
}
.parent-att-day-present {
    background: #E8F5E9;
    color: #2E7D32;
}
.parent-att-day-absent {
    background: #FFEBEE;
    color: #C62828;
}
.parent-att-day-tardy {
    background: #FFF8E1;
    color: #F57F17;
}
.parent-att-day-excused {
    background: #E3F2FD;
    color: #1565C0;
}
.parent-att-day-weekend {
    background: transparent;
    color: #e0e0e0;
}
.parent-att-day-empty {
    background: transparent;
}
.parent-att-legend {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
    font-size: 0.6875rem;
    color: var(--mid);
}
.parent-att-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 3px;
}
.parent-att-legend-dot-present { background: #E8F5E9; }
.parent-att-legend-dot-absent { background: #FFEBEE; }
.parent-att-legend-dot-tardy { background: #FFF8E1; }
.parent-att-legend-dot-excused { background: #E3F2FD; }

/* ── Parent Dashboard Course Cards (stacked, centered) ── */
.parent-course-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.parent-course-card {
    background: var(--white, #fff);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease;
}
.parent-course-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.parent-course-card-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--dark);
}
.parent-course-card-code {
    font-size: 0.75rem;
    color: var(--mid);
}
.parent-course-card-grade {
    font-size: 1.125rem;
    font-weight: 700;
    margin-top: 0.25rem;
}
.parent-course-card-pct {
    font-size: 0.8125rem;
    color: var(--mid);
}

/* ── Parent Child Detail Page ── */
.parent-child-back {
    margin-bottom: 0.5rem;
}
.parent-child-back a {
    font-size: 0.8125rem;
    color: var(--mid);
    text-decoration: none;
}
.parent-child-back-link {
    display: inline-block;
    font-size: 0.875rem;
    color: var(--mid);
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.parent-child-back-link:hover {
    color: var(--dark);
}

.parent-child-header-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.parent-child-header-avatar {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--school-primary, #1a365d);
}

.parent-child-header-avatar-initials {
    background: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
}

.parent-child-header-grade {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--dark);
    margin-top: 0.375rem;
    text-align: center;
}

.parent-child-profile {
    display: none;
}
.parent-child-profile-avatar {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    font-family: 'Schibsted Grotesk', sans-serif;
}

.parent-child-profile-img {
    object-fit: cover;
    border: 3px solid var(--school-primary, #1a365d);
}
.parent-child-grade-level {
    font-size: 0.8125rem;
    color: var(--mid);
}
.parent-child-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.parent-sub-empty {
    color: var(--mid);
    font-size: 0.875rem;
}
.parent-sub-item {
    padding: 0.5rem 0;
    align-items: center;
}
.parent-sub-body {
    flex: 1;
}
.parent-sub-title {
    font-size: 0.875rem;
    font-weight: 500;
}
.parent-sub-course {
    font-size: 0.75rem;
    color: var(--mid);
}
.parent-sub-feedback {
    font-size: 0.75rem;
    color: var(--mid);
    margin-top: 4px;
    font-style: italic;
}
.parent-sub-score-col {
    text-align: right;
}
.parent-sub-score {
    font-weight: 700;
    font-size: 0.875rem;
}
.parent-sub-letter {
    font-size: 1rem;
    color: white;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
}
.parent-sub-letter.grade-bg-a { background: #2E7D32; }
.parent-sub-letter.grade-bg-b { background: #1565C0; }
.parent-sub-letter.grade-bg-c { background: #F9A825; }
.parent-sub-letter.grade-bg-d { background: #E65100; }
.parent-sub-letter.grade-bg-f { background: #C62828; }

/* ── Parent Grades Detail Page ── */
.parent-grades-back {
    margin-bottom: 0.5rem;
}
.parent-grades-back a {
    font-size: 0.8125rem;
    color: var(--mid);
    text-decoration: none;
}
.parent-grades-subtitle {
    font-size: 0.875rem;
    color: var(--mid);
    margin-bottom: 2rem;
}
.parent-grades-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.parent-grades-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mid);
}
.parent-grades-table th.text-center {
    text-align: center;
}
.parent-grades-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.parent-grades-table td.text-center {
    text-align: center;
}
.parent-grades-table .cat-name {
    font-weight: 500;
}
.parent-grades-table .cat-weight {
    color: var(--mid);
}
.parent-grades-table .assignment-name {
    font-weight: 500;
}
.parent-grades-table .assignment-missing {
    color: #C62828;
    font-size: 0.75rem;
    margin-left: 4px;
}
.parent-grades-table .cat-meta {
    color: var(--mid);
    font-size: 0.8125rem;
}
.parent-grades-table .grade-bold {
    font-weight: 700;
}
.parent-grades-empty {
    color: var(--mid);
    font-size: 0.875rem;
}

/* ─── Lesson Plans ─── */

.lesson-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.lesson-course-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lesson-course-selector label {
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
}

.lesson-course-selector select {
    min-width: 280px;
}

.term-legend {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.term-legend-item {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    font-family: 'Schibsted Grotesk', sans-serif;
}

.term-legend-item.term-q1 { background: #E3F2FD; color: #1565C0; }
.term-legend-item.term-q2 { background: #FFF3E0; color: #E65100; }
.term-legend-item.term-q3 { background: #E8F5E9; color: #2E7D32; }
.term-legend-item.term-q4 { background: #F3E5F5; color: #7B1FA2; }

.week-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.week-card {
    background: #fff;
    border: 1px solid #e0dcd6;
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: box-shadow 0.15s, border-color 0.15s;
    min-height: 140px;
}

.week-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.week-card.term-q1 { border-left: 3px solid #1565C0; }
.week-card.term-q2 { border-left: 3px solid #E65100; }
.week-card.term-q3 { border-left: 3px solid #2E7D32; }
.week-card.term-q4 { border-left: 3px solid #7B1FA2; }

.week-card.week-current {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(249, 160, 27, 0.25);
}

.week-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.week-number {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--mid);
}

.week-card-dates {
    font-size: 0.75rem;
    color: var(--mid);
}

.week-card-title {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
}

.week-card-meta {
    font-size: 0.75rem;
    color: var(--mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.week-card-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
    margin-top: auto;
}

.week-card-link:hover {
    text-decoration: underline;
}

.week-card-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.badge-current {
    background: var(--gold);
    color: #fff;
    font-size: 0.6875rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    font-family: 'Schibsted Grotesk', sans-serif;
}

.badge-draft { background: #e0dcd6; color: var(--mid); }
.badge-published { background: #E8F5E9; color: #2E7D32; }
.badge-archived { background: #f5f5f5; color: #9e9e9e; }
.badge-term { background: #E3F2FD; color: #1565C0; }

/* Week Editor */
.lesson-week-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.lesson-week-nav {
    display: flex;
    gap: 8px;
}

.lesson-week-info h2 {
    margin-bottom: 4px;
}

.lesson-week-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 0.875rem;
    color: var(--mid);
}

.lesson-section {
    margin-bottom: 20px;
    padding: 20px;
}

.lesson-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 1.125rem;
}

.lesson-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.lesson-section-header .lesson-section-title {
    margin-bottom: 0;
}

.lesson-notes-hint {
    font-size: 0.75rem;
    color: var(--mid);
    margin-bottom: 8px;
    font-style: italic;
}

/* Activity Items */
.activity-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 12px;
    background: var(--cream);
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid #e0dcd6;
}

.activity-drag {
    cursor: grab;
    color: var(--tan);
    padding-top: 6px;
}

.activity-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.activity-row-top {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.activity-type-select { max-width: 130px; }
.activity-day-select { max-width: 100px; }
.activity-duration { max-width: 80px; }

.activity-remove { color: var(--danger); }

/* Resource Items */
.resource-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 12px;
    background: var(--cream);
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid #e0dcd6;
}

.resource-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.resource-row-top,
.resource-row-bottom {
    display: flex;
    gap: 8px;
}

.resource-row-top select { max-width: 130px; }

/* Save Bar */
.lesson-save-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #e0dcd6;
    border-radius: 8px;
    margin-bottom: 40px;
    position: sticky;
    bottom: 16px;
    z-index: 10;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}

.lesson-status-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lesson-status-toggle label {
    font-weight: 600;
    font-size: 0.875rem;
}

.lesson-status-toggle select { max-width: 140px; }

.lesson-save-actions {
    display: flex;
    gap: 8px;
}

/* View Page */
.lesson-view-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.lesson-view-title {
    margin-bottom: 24px;
}

.lesson-view-title h2 {
    margin-bottom: 8px;
}

.lesson-view-meta {
    display: flex;
    gap: 16px;
    font-size: 0.875rem;
    color: var(--mid);
}

.lesson-view-activities {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lesson-view-activity {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--cream);
    border-radius: 6px;
}

.activity-type-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 16px;
    white-space: nowrap;
    font-family: 'Schibsted Grotesk', sans-serif;
}

.activity-type-read { background: #E3F2FD; color: #1565C0; }
.activity-type-discuss { background: #FFF3E0; color: #E65100; }
.activity-type-watch { background: #F3E5F5; color: #7B1FA2; }
.activity-type-do { background: #FBE9E7; color: #BF360C; }
.activity-type-narrate { background: #E8F5E9; color: #2E7D32; }
.activity-type-recite { background: #FCE4EC; color: #C2185B; }
.activity-type-write { background: #ECEFF1; color: #455A64; }
.activity-type-listen { background: #E0F7FA; color: #00838F; }
.activity-type-explore { background: #FFF8E1; color: #F9A825; }

.activity-content {
    flex: 1;
}

.activity-content strong {
    display: block;
    margin-bottom: 2px;
}

.activity-content p {
    font-size: 0.875rem;
    color: var(--mid);
    margin-top: 4px;
}

.activity-meta-info {
    display: flex;
    gap: 8px;
    align-items: center;
}

.activity-day {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mid);
}

.activity-duration-badge {
    font-size: 0.75rem;
    background: #e0dcd6;
    padding: 2px 8px;
    border-radius: 10px;
    color: var(--mid);
    white-space: nowrap;
}

.lesson-view-resources {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lesson-view-resource {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: var(--cream);
    border-radius: 6px;
}

.lesson-view-resource i {
    font-size: 1.25rem;
    color: var(--mid);
    margin-top: 2px;
}

/* Year Management */
.form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.form-row .form-group {
    flex: 1;
    min-width: 140px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    cursor: pointer;
}

.inline-form {
    display: inline;
}

.term-row {
    padding: 12px;
    background: var(--cream);
    border-radius: 6px;
    border: 1px solid #e0dcd6;
}

.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.alert-success {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #C8E6C9;
}

.alert-error {
    background: #FFEBEE;
    color: #C62828;
    border: 1px solid #FFCDD2;
}

.mb-16 { margin-bottom: 16px; }

.btn-outline {
    background: transparent;
    border: 1px solid #e0dcd6;
    color: var(--dark);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: background 0.15s;
}

.btn-outline:hover {
    background: var(--cream);
}

/* Print styles */
@media print {
    .sidebar, .lesson-week-nav, .lesson-save-bar,
    .lesson-week-actions, .lesson-view-header,
    .no-print { display: none !important; }
    .main-content { margin-left: 0 !important; padding: 0 !important; }
    .week-grid { grid-template-columns: repeat(5, 1fr); }
    .card { box-shadow: none; border: 1px solid #ccc; }
}

/* Honeypot - hidden from humans, visible to bots */
.hp-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   FILE MANAGER
   ───────────────────────────────────────────────────────────── */

/* Search bar */
.file-search-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}
.file-search-bar .search-input-wrap {
    position: relative;
    flex: 1;
    max-width: 400px;
}
.file-search-bar .search-input-wrap i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #94a3b8);
}
.file-search-bar .search-input-wrap input {
    padding-left: 2.25rem;
}

/* Toolbar */
.file-toolbar {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

/* File Grid */
.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.file-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.file-card:hover {
    border-color: var(--primary, #1a365d);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.file-card-icon {
    font-size: 2.5rem;
    color: var(--primary, #1a365d);
    text-align: center;
}
.file-card-info {
    flex: 1;
    min-width: 0;
}
.file-card-name {
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}
.file-card-meta {
    font-size: 0.75rem;
    color: var(--text-muted, #94a3b8);
}
.file-card-uploader {
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
    margin-top: 0.125rem;
}
.file-card-actions {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

/* File List View */
.file-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.file-list .file-card {
    flex-direction: row;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
}
.file-list .file-card-icon {
    font-size: 1.5rem;
    min-width: 2rem;
    text-align: center;
}
.file-list .file-card-info {
    flex: 1;
}
.file-list .file-card-name {
    margin-bottom: 0;
}

/* Upload Dropzone */
.upload-dropzone {
    border: 2px dashed var(--border-color, #e2e8f0);
    border-radius: 0.75rem;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.upload-dropzone:hover,
.upload-dropzone.dragover {
    border-color: var(--primary, #1a365d);
    background: var(--primary-light, #f0f4ff);
}
.upload-dropzone i {
    font-size: 3rem;
    color: var(--primary, #1a365d);
    display: block;
    margin-bottom: 0.75rem;
}
.upload-dropzone p {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}
.upload-hint {
    font-size: 0.8rem;
    color: var(--text-muted, #94a3b8);
}

/* Upload Progress */
.upload-progress-list {
    margin-top: 1rem;
}
.upload-progress-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    font-size: 0.875rem;
}
.upload-progress-item.success .upload-status { color: var(--success, #16a34a); }
.upload-progress-item.error .upload-status { color: var(--danger, #dc2626); }
.upload-file-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 1rem;
}

/* File Picker Component */
.file-picker {
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 0.5rem;
    padding: 1rem;
}
.file-picker-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.file-picker-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-muted, #f8fafc);
    border-radius: 0.375rem;
    font-size: 0.875rem;
}
.file-picker-item i { color: var(--primary, #1a365d); }
.file-picker-item .file-picker-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-picker-item .btn-remove {
    background: none;
    border: none;
    color: var(--danger, #dc2626);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1rem;
}

/* File Picker Modal */
.file-picker-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
}
.file-picker-modal.active { display: flex; }
.file-picker-modal-content {
    background: var(--card-bg, #fff);
    border-radius: 0.75rem;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 1.5rem;
}
.file-picker-browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}
.file-picker-browse-item {
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 0.5rem;
    padding: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s;
    font-size: 0.8rem;
}
.file-picker-browse-item:hover,
.file-picker-browse-item.selected {
    border-color: var(--primary, #1a365d);
    background: var(--primary-light, #f0f4ff);
}
.file-picker-browse-item i {
    font-size: 1.75rem;
    color: var(--primary, #1a365d);
    display: block;
    margin-bottom: 0.375rem;
}

/* Tabs */
.tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border-color, #e2e8f0);
    overflow-x: auto;
}
.tab {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary, #64748b);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--text-primary, #1e293b); }
.tab.active {
    color: var(--primary, #1a365d);
    border-bottom-color: var(--primary, #1a365d);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   CHANNELS — Slack-like Messaging System
   ═══════════════════════════════════════════════════════════ */

/* Override main-content padding for channels page */
.channels-app {
    display: flex;
    height: calc(100vh - 0px);
    margin: -2rem;
    overflow: hidden;
}

/* ── Left Panel: Channel Sidebar ── */
.channels-sidebar {
    width: 280px;
    min-width: 280px;
    background: #2B261C;
    color: #e8e0d4;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.channels-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1rem 0.75rem;
}

.channels-sidebar-header h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.channels-sidebar-actions {
    display: flex;
    gap: 0.25rem;
}

.channels-sidebar .btn-icon {
    color: #c4b89a;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: background 0.15s;
}

.channels-sidebar .btn-icon:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.channels-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    margin: 0 0.75rem 0.5rem;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #a09585;
}

.channels-search i {
    font-size: 0.875rem;
}

.channels-search input {
    border: none;
    background: transparent;
    color: #e8e0d4;
    font-size: 0.8125rem;
    width: 100%;
    outline: none;
}

.channels-search input::placeholder {
    color: #8a7d6b;
}

.channels-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 0.5rem;
}

.channels-section-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a7d6b;
    padding: 1rem 0.75rem 0.375rem;
}

.channel-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    margin-bottom: 1px;
}

.channel-item:hover {
    background: rgba(255,255,255,0.06);
}

.channel-item.active {
    background: rgba(249,160,27,0.15);
    color: #fff;
}

.channel-item-icon {
    font-size: 1rem;
    color: #8a7d6b;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.channel-item.active .channel-item-icon {
    color: #F9A01B;
}

.channel-item-info {
    flex: 1;
    min-width: 0;
}

.channel-item-name {
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-item.has-unread .channel-item-name {
    font-weight: 700;
    color: #fff;
}

.channel-item-preview {
    font-size: 0.6875rem;
    color: #8a7d6b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-unread-badge {
    background: #F9A01B;
    color: #1a1611;
    font-size: 0.6875rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    flex-shrink: 0;
}

.channels-sidebar-footer {
    padding: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.channels-directory-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    color: #c4b89a;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.8125rem;
    transition: background 0.12s;
}

.channels-directory-link:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}

/* ── Center Panel: Message Feed ── */
.channels-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    background: #fff;
}

.channels-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9e9588;
    gap: 0.75rem;
}

.channels-empty-state i {
    font-size: 3rem;
    color: #d4cdc2;
}

.channels-empty-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #5a5347;
    margin: 0;
}

.channels-empty-state p {
    margin: 0;
    font-size: 0.875rem;
}

.channels-feed {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.channels-feed-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #e8e2d9;
    background: #fff;
    gap: 0.75rem;
    flex-shrink: 0;
}

.channels-back-btn {
    display: none;
}

.channels-feed-title {
    flex: 1;
    min-width: 0;
}

.channels-feed-title h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: #2B261C;
}

.channels-feed-meta {
    font-size: 0.75rem;
    color: #9e9588;
}

.channels-feed-actions {
    display: flex;
    gap: 0.25rem;
}

.channels-feed-actions .btn-icon {
    color: #7a7265;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.channels-feed-actions .btn-icon:hover {
    background: #f0ebe4;
}

/* Messages area */
.channels-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.channels-messages-list {
    padding: 0 1.25rem;
}

/* Date divider */
.msg-date-divider {
    display: flex;
    align-items: center;
    margin: 1.25rem 0 0.75rem;
}

.msg-date-divider::before,
.msg-date-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e8e2d9;
}

.msg-date-divider span {
    padding: 0 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #9e9588;
    white-space: nowrap;
}

/* Message row */
.msg-row {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0;
    position: relative;
}

.msg-row:hover {
    background: #faf8f5;
    border-radius: 6px;
    margin: 0 -0.5rem;
    padding: 0.5rem;
}

.msg-row:hover .msg-actions {
    opacity: 1;
}

.msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #e8e2d9;
    color: #5a5347;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.msg-avatar.small {
    width: 28px;
    height: 28px;
    font-size: 0.625rem;
    border-radius: 6px;
}

.msg-body {
    flex: 1;
    min-width: 0;
}

.msg-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.125rem;
}

.msg-sender {
    font-weight: 700;
    font-size: 0.875rem;
    color: #2B261C;
}

.msg-role-tag {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1px 6px;
    border-radius: 3px;
}

.msg-role-admin { background: #fef3cd; color: #856404; }
.msg-role-teacher { background: #d4edda; color: #155724; }
.msg-role-student { background: #d1ecf1; color: #0c5460; }
.msg-role-parent { background: #e2d5f1; color: #4a2d7a; }

.msg-time {
    font-size: 0.6875rem;
    color: #b5ad9f;
}

.msg-edited {
    font-size: 0.6875rem;
    color: #b5ad9f;
    font-style: italic;
}

.msg-content {
    font-size: 0.875rem;
    color: #3d362d;
    line-height: 1.5;
    word-wrap: break-word;
}

.msg-content a {
    color: #b8860b;
    text-decoration: underline;
}

/* Reactions */
.msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

.msg-reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid #e8e2d9;
    background: #faf8f5;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.12s;
}

.msg-reaction-pill:hover {
    border-color: #F9A01B;
    background: #fef9f0;
}

.msg-reaction-pill.mine {
    border-color: #F9A01B;
    background: #fef3cd;
}

/* Thread link */
.msg-thread-link {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #b8860b;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    font-weight: 600;
}

.msg-thread-link:hover {
    text-decoration: underline;
}

/* Message actions (hover) */
.msg-actions {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    display: flex;
    gap: 0.125rem;
    opacity: 0;
    transition: opacity 0.12s;
    background: #fff;
    border: 1px solid #e8e2d9;
    border-radius: 6px;
    padding: 2px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.msg-actions button {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    color: #7a7265;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.msg-actions button:hover {
    background: #f0ebe4;
    color: #2B261C;
}

.msg-actions .msg-delete-btn:hover {
    background: #fde8e8;
    color: #c53030;
}

/* Typing indicator */
.channels-typing {
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
    color: #9e9588;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.typing-dots span {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #9e9588;
    margin: 0 1px;
    animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-4px); }
}

/* Message input */
.channels-input {
    padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid #e8e2d9;
    background: #fff;
    flex-shrink: 0;
}

.channels-input-bar {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    background: #f5f1eb;
    border: 1px solid #e0d9cf;
    border-radius: 12px;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
}

.channels-input-bar textarea {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: #2B261C;
    resize: none;
    outline: none;
    font-family: inherit;
    line-height: 1.5;
    max-height: 120px;
    min-height: 24px;
}

.channels-input-bar textarea::placeholder {
    color: #b5ad9f;
}

.channels-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: #F9A01B;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: background 0.15s;
    flex-shrink: 0;
}

.channels-send-btn:hover {
    background: #e08f17;
}

/* ── Right Panel: Details ── */
.channels-details {
    width: 300px;
    min-width: 300px;
    border-left: 1px solid #e8e2d9;
    background: #faf8f5;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.channels-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e8e2d9;
}

.channels-details-header h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: #2B261C;
}

.channels-details-header .btn-icon {
    color: #7a7265;
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.channels-details-body {
    padding: 1rem 1.25rem;
}

.channels-details-section {
    margin-bottom: 1.5rem;
}

.channels-details-section h4 {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #5a5347;
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.channels-count-badge {
    font-size: 0.6875rem;
    color: #9e9588;
    font-weight: 400;
}

.channels-members-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.member-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
}

.member-info {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.member-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #2B261C;
}

/* ── Thread Panel ── */
.channels-thread {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 380px;
    background: #fff;
    border-left: 1px solid #e8e2d9;
    display: flex;
    flex-direction: column;
    z-index: 10;
    box-shadow: -4px 0 12px rgba(0,0,0,0.06);
}

.channels-thread-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e8e2d9;
}

.channels-thread-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.channels-thread-header .btn-icon {
    color: #7a7265;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.channels-thread-parent {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #e8e2d9;
    background: #faf8f5;
}

.channels-thread-replies {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 1.25rem;
}

.channels-thread-input {
    border-top: 1px solid #e8e2d9;
}

/* ── Emoji Picker ── */
.emoji-picker {
    position: fixed;
    background: #fff;
    border: 1px solid #e8e2d9;
    border-radius: 10px;
    padding: 0.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 100;
}

.emoji-picker-grid {
    display: flex;
    gap: 0.25rem;
}

.emoji-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-btn:hover {
    background: #f0ebe4;
}

/* ── Modals ── */
.modal-overlay.channels-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.channels-modal {
    background: #fff;
    border-radius: 12px;
    width: 460px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e8e2d9;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.modal-header .btn-icon {
    color: #7a7265;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
}

.modal-body .channels-search {
    margin: 0 0 0.75rem;
    background: #f5f1eb;
}

.modal-body .channels-search input {
    color: #2B261C;
}

/* User results in modals */
.channels-user-results {
    max-height: 300px;
    overflow-y: auto;
}

.user-result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.12s;
}

.user-result-item:hover {
    background: #f5f1eb;
}

.user-result-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-result-info span:first-child {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Selected members chips */
.channels-selected-members {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.selected-member-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: #f0ebe4;
    border-radius: 16px;
    font-size: 0.8125rem;
}

.selected-member-chip button {
    border: none;
    background: none;
    cursor: pointer;
    color: #7a7265;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
}

/* Search results */
.channels-search-results {
    margin-top: 0.75rem;
}

.search-result-item {
    padding: 0.75rem;
    border-bottom: 1px solid #f0ebe4;
    cursor: pointer;
    border-radius: 6px;
}

.search-result-item:hover {
    background: #f5f1eb;
}

.search-result-channel {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #b8860b;
}

.search-result-sender {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #2B261C;
}

.search-result-content {
    font-size: 0.8125rem;
    color: #5a5347;
    margin: 0.25rem 0;
}

.search-result-time {
    font-size: 0.6875rem;
    color: #b5ad9f;
}

.channels-empty-msg {
    padding: 2rem;
    text-align: center;
    color: #9e9588;
    font-size: 0.875rem;
}

/* ── Directory Page ── */
.directory-page {
    padding: 0;
}

.directory-header {
    margin-bottom: 1.5rem;
}

.directory-filters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.directory-search-bar {
    margin: 0;
    background: #f5f1eb;
    max-width: 400px;
}

.directory-search-bar input {
    color: #2B261C;
}

.directory-role-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.directory-role-btn {
    padding: 0.375rem 1rem;
    border: 1px solid #e0d9cf;
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #5a5347;
    transition: all 0.12s;
}

.directory-role-btn:hover {
    border-color: #F9A01B;
    color: #F9A01B;
}

.directory-role-btn.active {
    background: #F9A01B;
    border-color: #F9A01B;
    color: #fff;
}

.directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.directory-card {
    background: #fff;
    border: 1px solid #e8e2d9;
    border-radius: 10px;
    padding: 1.5rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: box-shadow 0.15s;
}

.directory-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.directory-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #e8e2d9;
    color: #5a5347;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
}

.directory-card-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #2B261C;
}

.directory-dm-btn {
    margin-top: 0.5rem;
}

/* Form styling in modals */
.modal-body .form-group {
    margin-bottom: 1rem;
}

.modal-body .form-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
    color: #5a5347;
}

.modal-body .form-group input,
.modal-body .form-group select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e0d9cf;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #fff;
    color: #2B261C;
}

.modal-body .form-group input:focus,
.modal-body .form-group select:focus {
    outline: none;
    border-color: #F9A01B;
    box-shadow: 0 0 0 3px rgba(249,160,27,0.15);
}

.modal-body .btn-primary {
    width: 100%;
    padding: 0.625rem;
    background: #F9A01B;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.modal-body .btn-primary:hover {
    background: #e08f17;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .channels-app {
        position: relative;
    }

    .channels-sidebar {
        position: absolute;
        inset: 0;
        width: 100%;
        min-width: unset;
        z-index: 20;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    .channels-sidebar.show {
        transform: translateX(0);
    }

    .channels-main {
        width: 100%;
    }

    .channels-main.show .channels-feed,
    .channels-main.show .channels-empty-state {
        display: flex;
    }

    .channels-back-btn {
        display: flex;
    }

    .channels-details {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 15;
        width: 100%;
        min-width: unset;
    }

    .channels-thread {
        width: 100%;
    }

    .directory-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

/* Initial mobile state */
@media (max-width: 768px) {
    .channels-sidebar {
        transform: translateX(0);
    }
}

/* ─────────────────────────────────────────────────────────────
   HOUSES SYSTEM
   ───────────────────────────────────────────────────────────── */

/* Leaderboard */
.house-leaderboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.house-leaderboard-card {
    background: #fff;
    border-radius: 12px;
    border: 2px solid rgba(0,0,0,0.06);
    border-top: 4px solid var(--house-color, var(--mid));
    padding: 1.5rem;
    text-align: center;
    text-decoration: none;
    color: var(--dark);
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.house-leaderboard-card:hover {
    border-color: var(--house-color, var(--gold));
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.house-leaderboard-card.house-card-mine {
    border-color: var(--house-color, var(--gold));
    background: rgba(249,160,27,0.03);
}

.house-rank {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--house-color, var(--mid));
}

.house-card-icon {
    font-size: 2.5rem;
    color: var(--house-color, var(--mid));
    line-height: 1;
}

.house-card-name {
    font-family: 'Instrument Serif', serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--dark);
    margin: 0;
}

.house-card-points {
    font-family: 'Instrument Serif', serif;
    font-size: 2.5rem;
    color: var(--house-color, var(--dark));
    line-height: 1.1;
}

.house-card-points-label {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mid);
}

.house-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(0,0,0,0.06);
    border-radius: 100px;
    overflow: hidden;
    margin: 0.25rem 0;
}

.house-progress-fill {
    height: 100%;
    background: var(--house-color, var(--gold));
    border-radius: 100px;
    transition: width 0.4s ease;
}

.house-card-members {
    font-size: 0.8125rem;
    color: var(--mid);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.house-card-members i { font-size: 1rem; }

/* House dot (color indicator) */
.house-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--house-color, var(--mid));
    flex-shrink: 0;
}

/* Hero section */
.house-hero {
    background: linear-gradient(135deg, var(--house-color, #333) 0%, color-mix(in srgb, var(--house-color, #333) 70%, #000) 100%);
    border-radius: 12px;
    padding: 2rem 2.5rem;
    margin-bottom: 1.5rem;
    color: #fff;
}

.house-hero-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.house-hero-icon {
    font-size: 4rem;
    opacity: 0.9;
}

.house-hero-name {
    font-family: 'Instrument Serif', serif;
    font-size: 3rem;
    font-weight: 400;
    margin: 0;
    color: #fff;
}

.house-hero-motto {
    font-size: 1.125rem;
    opacity: 0.85;
    font-style: italic;
    margin-top: 0.25rem;
}

/* Members grid */
.house-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.house-member-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background 0.1s;
}

.house-member-item:hover { background: rgba(0,0,0,0.02); }

.house-member-leader {
    background: rgba(249,160,27,0.04);
    border: 1px solid rgba(249,160,27,0.15);
}

.house-member-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.house-member-info { min-width: 0; }

.house-member-name {
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.house-member-meta {
    font-size: 0.75rem;
    color: var(--mid);
}

.house-member-role {
    color: var(--gold);
    font-weight: 600;
}

/* Assign page */
.house-assign-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.house-assign-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.house-assign-item input[type="checkbox"] {
    accent-color: var(--gold);
}

.house-assign-select {
    width: auto;
    min-width: 120px;
}

/* Dashboard widget */
.house-widget {
    padding: 1rem 1.25rem;
}

.house-widget-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.house-widget-row:last-child { border-bottom: none; }

.house-widget-mine {
    background: rgba(249,160,27,0.04);
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
    margin: 0 -0.5rem;
}

.house-widget-rank {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--mid);
    min-width: 28px;
}

.house-widget-name {
    font-size: 0.8125rem;
    font-weight: 500;
    min-width: 80px;
}

.house-widget-bar {
    flex: 1;
    height: 6px;
    background: rgba(0,0,0,0.04);
    border-radius: 100px;
    overflow: hidden;
}

.house-widget-bar-fill {
    height: 100%;
    background: var(--house-color, var(--gold));
    border-radius: 100px;
    transition: width 0.4s ease;
}

.house-widget-pts {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--dark);
    min-width: 36px;
    text-align: right;
}

/* Responsive */
@media (max-width: 768px) {
    .house-leaderboard { grid-template-columns: repeat(2, 1fr); }
    .house-hero { padding: 1.5rem; }
    .house-hero-name { font-size: 2rem; }
    .house-hero-icon { font-size: 2.5rem; }
    .house-members-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .house-leaderboard { grid-template-columns: 1fr; }
}

/* ========================================
   SUPER ADMIN PANEL
   ======================================== */

/* Impersonation Banner */
.impersonation-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #8B5CF6, #A855F7);
    color: #fff;
    text-align: center;
    padding: 0.5rem 1rem;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.impersonation-banner a {
    color: #FDE68A;
    text-decoration: underline;
    margin-left: 0.5rem;
    font-weight: 700;
}
.impersonation-banner ~ .app-layout { margin-top: 2.25rem; }
.impersonation-banner ~ .app-layout .sidebar { top: 2.25rem; }

/* Super Admin Body */
.super-admin-body { background: #F5F3F0; }

/* Super Admin Sidebar */
.super-sidebar {
    background: #0F0D0A !important;
}
.super-sidebar .sidebar-logo {
    padding: 1.25rem 1rem;
}
.super-logo-text {
    font-family: 'Instrument Serif', serif;
    font-size: 1.25rem;
    color: #F9A01B;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.super-logo-text i { font-size: 1.4rem; }
.super-sidebar .nav-item.active {
    background: rgba(249, 160, 27, 0.15);
    color: #F9A01B;
}
.super-sidebar .nav-section {
    color: #6F5C44;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.75rem 1rem 0.25rem;
}

/* Platform Admin link in regular sidebar */
.nav-item-super {
    color: #F9A01B !important;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 0.25rem;
    padding-top: 0.75rem !important;
}

/* Super Admin Metrics Row */
.super-metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.super-stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border: 1px solid rgba(0,0,0,0.06);
}
.super-stat-card.super-stat-sm { padding: 1rem; }
.super-stat-card.super-stat-revenue {
    background: linear-gradient(135deg, #1E1A14, #2B261C);
    color: #fff;
}
.super-stat-card.super-stat-revenue .super-stat-label { color: #C6B5A1; }
.super-stat-icon {
    font-size: 1.5rem;
    color: var(--gold);
    margin-bottom: 0.25rem;
}
.super-stat-revenue .super-stat-icon { color: #F9A01B; }
.super-stat-value {
    font-family: 'Instrument Serif', serif;
    font-size: 2rem;
    line-height: 1.1;
}
.super-stat-sm .super-stat-value { font-size: 1.5rem; }
.super-stat-label {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mid);
}

/* Super Admin Grid */
.super-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 900px) {
    .super-grid-2 { grid-template-columns: 1fr; }
}

/* Super Admin Panel */
.super-panel {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 1.5rem;
}
.super-panel-title {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--dark);
}
.super-panel-title i { color: var(--gold); }
.super-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.super-panel-header .super-panel-title { margin-bottom: 0; }

/* Super Admin Table */
.super-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.super-table th {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mid);
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid rgba(0,0,0,0.08);
    font-weight: 600;
}
.super-table td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    vertical-align: middle;
}
.super-table tr:hover td { background: rgba(0,0,0,0.015); }
.super-table a { color: var(--dark); font-weight: 500; }
.super-table a:hover { color: var(--gold); }

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: 'Schibsted Grotesk', sans-serif;
}
.status-active { background: #D1FAE5; color: #065F46; }
.status-trialing { background: #DBEAFE; color: #1E40AF; }
.status-suspended { background: #FED7AA; color: #9A3412; }
.status-canceled { background: #FEE2E2; color: #991B1B; }
.status-past_due { background: #FEF3C7; color: #92400E; }

/* Plan Badges */
.plan-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: 'Schibsted Grotesk', sans-serif;
    background: #F3F4F6;
    color: #374151;
}
.plan-academy { background: #FEF3C7; color: #92400E; }
.plan-growth { background: #D1FAE5; color: #065F46; }
.plan-starter { background: #DBEAFE; color: #1E40AF; }
.plan-tutorials { background: #E0E7FF; color: #3730A3; }
.plan-hearth { background: #FCE7F3; color: #9D174D; }
.plan-trial { background: #F3F4F6; color: #6B7280; }
.plan-custom { background: #EDE9FE; color: #5B21B6; }

/* Activity Feed */
.activity-feed { display: flex; flex-direction: column; gap: 0.75rem; }
.activity-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.activity-action {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--dark);
    text-transform: capitalize;
}
.activity-action::before { content: ''; }
.activity-detail {
    font-size: 0.8rem;
    color: var(--mid);
    margin-top: 0.15rem;
}
.activity-school { color: var(--gold); font-weight: 500; }
.activity-user { font-weight: 500; }
.activity-time {
    font-size: 0.7rem;
    color: #9CA3AF;
    margin-top: 0.15rem;
}

/* Activity Timeline */
.activity-timeline { position: relative; }
.activity-date-header {
    font-family: 'Instrument Serif', serif;
    font-size: 1rem;
    color: var(--dark);
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.activity-date-header:first-child { margin-top: 0; }
.activity-timeline-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0;
}
.activity-timeline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    margin-top: 0.4rem;
    flex-shrink: 0;
}
.activity-timeline-content { flex: 1; }

/* Health Indicators */
.health-indicators {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.health-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}
.health-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.health-green { background: #10B981; }
.health-yellow { background: #F59E0B; }
.health-red { background: #EF4444; }

/* Super Admin Toolbar / Filters */
.super-toolbar {
    margin-bottom: 1.5rem;
}
.super-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.super-filters .form-input,
.super-filters .form-select {
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    font-size: 0.8rem;
    background: #fff;
    font-family: 'Instrument Sans', sans-serif;
}
.super-filters .form-input { min-width: 200px; }
.super-result-count {
    font-size: 0.8rem;
    color: var(--mid);
    margin-bottom: 0.75rem;
}

/* Super Admin Bulk Actions */
.super-bulk-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.06);
}

/* Super Admin Detail Page */
.super-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.super-detail-sub {
    font-size: 0.875rem;
    color: var(--mid);
    margin-bottom: 0.5rem;
}
.super-detail-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Inline forms */
.inline-form { display: inline; }

/* Feature Toggle */
.feature-flags-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.feature-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.feature-name {
    font-size: 0.8rem;
    font-weight: 500;
}
.toggle-btn {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    letter-spacing: 0.04em;
}
.toggle-on { background: #D1FAE5; color: #065F46; }
.toggle-off { background: #F3F4F6; color: #9CA3AF; }

/* Revenue Plan Breakdown */
.plan-breakdown { display: flex; flex-direction: column; gap: 0.75rem; }
.plan-row {
    display: grid;
    grid-template-columns: 80px 100px 80px 1fr;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
}
.plan-count { color: var(--mid); }
.plan-revenue { font-weight: 600; text-align: right; }
.plan-bar {
    height: 6px;
    background: #F3F4F6;
    border-radius: 3px;
    overflow: hidden;
}
.plan-bar-fill {
    height: 100%;
    background: var(--gold);
    border-radius: 3px;
    min-width: 2px;
}

/* Estimate List */
.estimate-list { display: flex; flex-direction: column; gap: 0.75rem; }
.estimate-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    font-size: 0.875rem;
}
.estimate-row span:last-child { font-weight: 600; }

/* Buttons for super admin */
.btn-warning {
    background: #F59E0B;
    color: #fff;
    border: none;
    cursor: pointer;
}
.btn-warning:hover { background: #D97706; }
.btn-success {
    background: #10B981;
    color: #fff;
    border: none;
    cursor: pointer;
}
.btn-success:hover { background: #059669; }
.btn-danger {
    background: #EF4444;
    color: #fff;
    border: none;
    cursor: pointer;
}
.btn-danger:hover { background: #DC2626; }
.btn-ghost {
    background: transparent;
    color: var(--mid);
    border: 1px solid rgba(0,0,0,0.12);
}
.btn-xs {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
    border-radius: 6px;
    background: #F3F4F6;
    border: none;
    cursor: pointer;
}
.btn-xs:hover { background: #E5E7EB; }

/* Alert */
.alert {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}
.alert-success { background: #D1FAE5; color: #065F46; }

/* Settings form elements */
.form-group {
    margin-bottom: 1rem;
}
.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--dark);
}
.form-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: 'Instrument Sans', sans-serif;
    resize: vertical;
}
.form-hint {
    display: block;
    font-size: 0.7rem;
    color: var(--mid);
    margin-top: 0.25rem;
}
.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.form-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.empty-state {
    text-align: center;
    color: var(--mid);
    padding: 2rem;
    font-size: 0.875rem;
}

/* ============================================
   AI ASSISTANT
   ============================================ */

/* Layout */
.ai-assistant-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    align-items: start;
}

/* Prompt Type Selector */
.ai-type-selector {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.ai-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 0.5rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mid);
}

.ai-type-card i {
    font-size: 1.25rem;
}

.ai-type-card:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.ai-type-card.active {
    border-color: var(--primary);
    background: var(--primary-light, rgba(var(--primary-rgb, 79, 70, 229), 0.06));
    color: var(--primary);
    font-weight: 600;
}

/* Form */
.ai-form {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
}

.ai-form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ai-form-fields .form-group:last-child {
    grid-column: 1 / -1;
}

.ai-optional {
    font-weight: 400;
    color: var(--mid);
    font-size: 0.75rem;
}

.ai-generate-btn {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.9375rem;
}

.ai-generate-btn i {
    margin-right: 0.25rem;
}

/* Loading */
.ai-loading {
    text-align: center;
    padding: 3rem 1rem;
}

.ai-loading-sparkle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-light, rgba(var(--primary-rgb, 79, 70, 229), 0.08));
    margin-bottom: 1rem;
    animation: ai-pulse 1.5s ease-in-out infinite;
}

.ai-loading-sparkle i {
    font-size: 1.75rem;
    color: var(--primary);
}

@keyframes ai-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.7; }
}

.ai-loading p {
    font-weight: 600;
    color: var(--dark);
    margin: 0;
}

.ai-loading-sub {
    font-weight: 400 !important;
    color: var(--mid) !important;
    font-size: 0.8125rem;
    margin-top: 0.25rem !important;
}

/* Results */
.ai-results {
    margin-top: 1.5rem;
}

.ai-result-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.ai-result-title {
    font-size: 1.125rem;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ai-result-title i {
    color: var(--primary);
}

.ai-result-overview {
    color: var(--mid);
    margin: 0;
    line-height: 1.6;
}

.ai-result-card h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--dark);
}

.ai-result-card h4 i {
    color: var(--primary);
}

.ai-result-list {
    margin: 0;
    padding-left: 1.25rem;
}

.ai-result-list li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
    color: var(--dark);
}

.ai-result-list-numbered {
    list-style: decimal;
}

/* Activity items in results */
.ai-activities-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ai-activity-item {
    padding: 0.75rem;
    background: var(--bg, #f8f9fa);
    border-radius: 8px;
}

.ai-activity-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
    flex-wrap: wrap;
}

.ai-activity-header strong {
    font-size: 0.875rem;
}

.ai-activity-day {
    font-size: 0.75rem;
    color: var(--mid);
    margin-left: auto;
}

.ai-activity-duration {
    font-size: 0.75rem;
    color: var(--mid);
    background: var(--white);
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
}

.ai-activity-item p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mid);
    line-height: 1.5;
}

/* Badge variants for activity types */
.badge-activity-read { background: #dbeafe; color: #1e40af; }
.badge-activity-discuss { background: #fce7f3; color: #9d174d; }
.badge-activity-watch { background: #e0e7ff; color: #3730a3; }
.badge-activity-do { background: #d1fae5; color: #065f46; }
.badge-activity-narrate { background: #fef3c7; color: #92400e; }
.badge-activity-recite { background: #ede9fe; color: #5b21b6; }
.badge-activity-write { background: #f3e8ff; color: #6b21a8; }
.badge-activity-listen { background: #cffafe; color: #155e75; }
.badge-activity-explore { background: #ecfccb; color: #3f6212; }

/* Resources in results */
.ai-resources-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ai-resource-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    flex-wrap: wrap;
}

.ai-resource-link {
    color: var(--primary);
}

/* Result actions */
.ai-result-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Error */
.ai-error {
    background: #fef2f2;
    color: #991b1b;
    padding: 1rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

/* History Panel */
.ai-history-panel {
    position: sticky;
    top: 1rem;
}

.ai-history-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--dark);
}

.ai-history-empty {
    font-size: 0.8125rem;
    color: var(--mid);
}

.ai-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ai-history-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.75rem;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.ai-history-item:hover {
    border-color: var(--primary);
}

.ai-history-item-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
}

.ai-history-type {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--primary);
}

.ai-history-item-text {
    font-size: 0.8125rem;
    color: var(--dark);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-history-item-meta {
    font-size: 0.6875rem;
    color: var(--mid);
    margin-top: 0.25rem;
}

/* AI Suggest button on lesson plan page */
.ai-suggest-btn {
    border-color: var(--primary);
    color: var(--primary);
}

.ai-suggest-btn:hover {
    background: var(--primary);
    color: var(--white);
}

/* Settings Page */
.ai-settings-section {
    margin-bottom: 1.5rem;
}

.ai-settings-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ai-settings-desc {
    color: var(--mid);
    font-size: 0.875rem;
    margin: 0 0 1rem;
}

/* Toggle */
.ai-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ai-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.ai-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ai-toggle-slider {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 100px;
    transition: 0.2s;
}

.ai-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.2s;
}

.ai-toggle input:checked + .ai-toggle-slider {
    background: var(--primary);
}

.ai-toggle input:checked + .ai-toggle-slider::before {
    transform: translateX(20px);
}

/* Worldview Grid */
.ai-worldview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.ai-worldview-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.375rem;
    padding: 1.25rem 1rem;
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--white);
}

.ai-worldview-card input[type="radio"] {
    display: none;
}

.ai-worldview-card i {
    font-size: 1.5rem;
    color: var(--mid);
}

.ai-worldview-card strong {
    font-size: 0.875rem;
}

.ai-worldview-card span {
    font-size: 0.75rem;
    color: var(--mid);
    line-height: 1.4;
}

.ai-worldview-card:hover {
    border-color: var(--primary);
}

.ai-worldview-card.active {
    border-color: var(--primary);
    background: var(--primary-light, rgba(var(--primary-rgb, 79, 70, 229), 0.04));
}

.ai-worldview-card.active i {
    color: var(--primary);
}

/* Stats */
.ai-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.ai-stat-card {
    text-align: center;
    padding: 1rem;
    background: var(--bg, #f8f9fa);
    border-radius: 10px;
}

.ai-stat-value {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark);
}

.ai-stat-label {
    font-size: 0.75rem;
    color: var(--mid);
    margin-top: 0.25rem;
}

.ai-settings-actions {
    margin-top: 1.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .ai-assistant-layout {
        grid-template-columns: 1fr;
    }
    .ai-type-selector {
        grid-template-columns: repeat(3, 1fr);
    }
    .ai-form-fields {
        grid-template-columns: 1fr;
    }
    .ai-worldview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ai-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ai-history-panel {
        position: static;
    }
}

@media (max-width: 480px) {
    .ai-type-selector {
        grid-template-columns: repeat(2, 1fr);
    }
    .ai-worldview-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   SCHOOL YEARS - Year Turnover System
   ============================================ */

/* Timeline */
.year-timeline {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 1.5rem 0;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.year-timeline-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    padding: 0 1rem;
}

.year-timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -0.5rem;
    top: 50%;
    width: 1.5rem;
    height: 2px;
    background: var(--border);
}

.year-timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
}

.year-timeline-item.year-active .year-timeline-dot {
    background: var(--green, #22c55e);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}

.year-timeline-item.year-archived .year-timeline-dot {
    background: var(--mid);
}

.year-timeline-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.year-timeline-name {
    font-weight: 600;
    font-size: 0.875rem;
}

/* Year Cards */
.year-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.year-card {
    background: var(--white, #fff);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    transition: box-shadow 0.2s;
}

.year-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.year-card-active {
    border-color: var(--green, #22c55e);
    border-width: 2px;
}

.year-card-archived {
    opacity: 0.7;
}

.year-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.year-card-name {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
}

.year-card-dates {
    font-size: 0.8125rem;
    color: var(--mid);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.year-card-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.year-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.year-stat-value {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1;
}

.year-stat-label {
    font-size: 0.6875rem;
    color: var(--mid);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.year-card-actions {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
}

/* Quick Links */
.year-quicklinks {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.year-quicklink {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--white, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--dark);
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.year-quicklink:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.year-quicklink i {
    font-size: 1.25rem;
}

/* Wizard Steps */
.wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2rem;
    padding: 1rem 0;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    position: relative;
}

.wizard-step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -1rem;
    top: 50%;
    width: 2rem;
    height: 2px;
    background: var(--border);
}

.wizard-step-active:not(:last-child)::after {
    background: var(--primary);
}

.wizard-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--border);
    color: var(--mid);
}

.wizard-step-active .wizard-step-num {
    background: var(--primary);
    color: white;
}

.wizard-step-done .wizard-step-num {
    background: var(--green, #22c55e);
    color: white;
}

.wizard-step-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mid);
}

.wizard-step-active .wizard-step-label {
    color: var(--dark);
}

/* Clone Results */
.clone-results {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}

.clone-result-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg, #f8f9fa);
    border-radius: 10px;
    min-width: 120px;
}

.clone-result-value {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--green, #22c55e);
    line-height: 1;
}

.clone-result-label {
    font-size: 0.75rem;
    color: var(--mid);
    margin-top: 0.25rem;
}

/* Clone Options */
.clone-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.clone-suboption {
    margin-left: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--border);
}

.clone-select-all {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

/* Clone Review */
.clone-review {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bg, #f8f9fa);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.review-row {
    font-size: 0.875rem;
}

/* Promote */
.promote-bulk-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.promote-select {
    min-width: 160px;
}

/* Compare */
.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.compare-stats {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
}

.compare-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.compare-stat-value {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.compare-stat-label {
    font-size: 0.75rem;
    color: var(--mid);
}

.compare-changes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.compare-change-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.compare-change-label {
    font-weight: 500;
}

.compare-change-value {
    font-weight: 600;
}

.text-green { color: var(--green, #22c55e); }
.text-red { color: var(--red, #ef4444); }

/* Last Year This Week Widget */
.lytw-widget {
    border-left: 3px solid var(--primary);
}

.lytw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.lytw-card {
    background: var(--bg, #f8f9fa);
    border-radius: 8px;
    padding: 1rem;
}

.lytw-course {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mid);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.lytw-title {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.375rem;
}

.lytw-meta {
    font-size: 0.8125rem;
    color: var(--mid);
    margin-bottom: 0.5rem;
}

.lytw-actions {
    display: flex;
    gap: 0.375rem;
}

/* Archive */
.archive-warning {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

.archive-info ul {
    margin: 0.5rem 0 1rem;
    padding-left: 1.25rem;
}

.archive-info li {
    margin-bottom: 0.375rem;
}

.archive-stats {
    display: flex;
    gap: 1.5rem;
}

/* Year View */
.year-view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.year-view-actions {
    display: flex;
    gap: 0.375rem;
}

/* Term Preview */
.term-week-preview {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.term-preview-item {
    font-size: 0.8125rem;
    color: var(--mid);
    padding: 0.25rem 0.75rem;
    background: var(--bg, #f8f9fa);
    border-radius: 6px;
}

/* Badge colors */
.badge-blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.badge-yellow {
    background: rgba(234, 179, 8, 0.1);
    color: #ca8a04;
}

.badge-red {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Responsive */
@media (max-width: 768px) {
    .year-cards { grid-template-columns: 1fr; }
    .compare-grid { grid-template-columns: 1fr; }
    .wizard-step-label { display: none; }
    .archive-warning { grid-template-columns: 1fr; }
    .year-quicklinks { flex-direction: column; }
    .lytw-grid { grid-template-columns: 1fr; }
}

/* ===== Parent Dashboard ===== */

.dashboard-date {
    color: var(--mid);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

/* Parent Dashboard - Child-Specific View */
.pd-child-selector {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.pd-child-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--mid);
    background: #fff;
    border: 1px solid var(--tan);
    transition: all 0.15s;
}

.pd-child-pill:hover {
    border-color: var(--gold);
    color: var(--dark);
}

.pd-child-pill--active {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
}

.pd-child-pill--active:hover {
    color: #fff;
}

.pd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.pd-date {
    color: var(--mid);
    font-size: 0.9rem;
}

.pd-grade-badge {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--cream);
    border: 1px solid var(--tan);
    border-radius: 6px;
    padding: 0.25rem 0.75rem;
    color: var(--mid);
}

.pd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (min-width: 960px) {
    .pd-grid {
        grid-template-columns: 65fr 35fr;
    }
}

.pd-main { display: flex; flex-direction: column; gap: 1.25rem; }
.pd-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }

.pd-view-link {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gold);
    text-decoration: none;
}

.pd-view-link:hover {
    text-decoration: underline;
}

.pd-empty {
    padding: 1.25rem 1rem;
    color: var(--mid);
    font-size: 0.9rem;
}

/* Announcements */
.pd-announcements-list {
    display: flex;
    flex-direction: column;
}

.pd-announcement-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.pd-announcement-item:last-child { border-bottom: none; }

.pd-announcement-subject {
    font-weight: 500;
    margin-bottom: 0.15rem;
}

.pd-announcement-meta {
    font-size: 0.8rem;
    color: var(--mid);
}

/* Assignment Items */
.pd-assignment-list {
    display: flex;
    flex-direction: column;
}

.pd-assignment-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.pd-assignment-item:last-child { border-bottom: none; }

.pd-assignment-check {
    color: var(--tan);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.pd-assignment-icon {
    color: var(--mid);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.pd-assignment-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.pd-assignment-title {
    font-weight: 500;
    font-size: 0.9rem;
}

.pd-assignment-course {
    font-size: 0.8rem;
    color: var(--mid);
}

.pd-assignment-due {
    font-size: 0.8rem;
    color: var(--mid);
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

.pd-assignment-item--overdue {
    color: var(--danger);
}

.pd-assignment-item--overdue .pd-assignment-course {
    color: var(--danger);
    opacity: 0.7;
}

/* Overdue Card */
.pd-overdue-card {
    border-left: 4px solid var(--danger);
    background: #fef6f5;
}

.pd-overdue-card .card-header h3 {
    color: var(--danger);
}

/* Grades */
.pd-grades-list {
    display: flex;
    flex-direction: column;
}

.pd-grade-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.pd-grade-item:last-child { border-bottom: none; }

.pd-grade-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.pd-grade-title {
    font-weight: 500;
    font-size: 0.9rem;
}

.pd-grade-course {
    font-size: 0.8rem;
    color: var(--mid);
}

.pd-grade-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.pd-grade-badge {
    font-weight: 700;
    font-size: 0.9rem;
}

.pd-grade-badge.grade-a { color: var(--success); }
.pd-grade-badge.grade-b { color: #1abc9c; }
.pd-grade-badge.grade-c { color: var(--gold); }
.pd-grade-badge.grade-d { color: #e67e22; }
.pd-grade-badge.grade-f { color: var(--danger); }

.pd-grade-pct {
    font-size: 0.8rem;
    color: var(--mid);
}

.pd-grade-date {
    font-size: 0.75rem;
    color: var(--tan);
}

/* Subjects */
.pd-subjects-list {
    display: flex;
    flex-direction: column;
}

.pd-subject-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    font-size: 0.9rem;
    cursor: default;
}

.pd-subject-item:last-child { border-bottom: none; }

.pd-subject-item i {
    color: var(--mid);
    font-size: 1.1rem;
}

/* Attendance */
.pd-attendance {
    text-align: center;
    padding: 1rem;
}

.pd-attendance-pct {
    font-family: 'Instrument Serif', serif;
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.pd-attendance-label {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mid);
    margin-bottom: 0.5rem;
}

.pd-attendance-details {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    font-size: 0.8rem;
    color: var(--mid);
}

/* Responsive */
@media (max-width: 959px) {
    .pd-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Sidebar Collapse + Accordion Submenus
   ======================================== */

/* Sidebar header with toggle */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-header .sidebar-logo {
    padding: 0;
    border-bottom: none;
}

.sidebar-toggle {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

/* Sidebar transitions */
.sidebar {
    transition: width 0.2s ease;
}

.main-content {
    /* no transition — prevents content shift on page load */
}

/* Collapsed sidebar (desktop) — auto-expand on hover */
.sidebar-collapsed .sidebar {
    width: 60px;
    overflow: hidden;
    transition: width 0.25s ease;
    z-index: 100;
}

.sidebar-collapsed .sidebar:hover {
    width: 220px;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}

.sidebar-collapsed .sidebar .nav-item span,
.sidebar-collapsed .sidebar .nav-submenu-chevron,
.sidebar-collapsed .sidebar .unread-badge,
.sidebar-collapsed .sidebar .nav-section,
.sidebar-collapsed .nav-submenu,
.sidebar-collapsed .sidebar-footer .user-info {
    display: none;
}

.sidebar-collapsed .sidebar:hover .nav-item span,
.sidebar-collapsed .sidebar:hover .nav-submenu-chevron,
.sidebar-collapsed .sidebar:hover .unread-badge,
.sidebar-collapsed .sidebar:hover .nav-section,
.sidebar-collapsed .sidebar:hover .nav-submenu,
.sidebar-collapsed .sidebar:hover .sidebar-footer .user-info {
    display: unset;
}

.sidebar-collapsed .sidebar:hover .nav-submenu {
    display: block;
    max-height: 0;
}

.sidebar-collapsed .sidebar:hover .nav-submenu.open {
    max-height: 500px;
}

.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding: 1.25rem 0.5rem;
}

.sidebar-collapsed .sidebar:hover .sidebar-header {
    justify-content: space-between;
    padding: 1.25rem 1rem;
}

.sidebar-collapsed .sidebar .logo-full {
    display: none;
}

.sidebar-collapsed .sidebar .logo-icon {
    display: block;
}

.sidebar-collapsed .sidebar:hover .logo-full {
    display: block;
}

.sidebar-collapsed .sidebar:hover .logo-icon {
    display: none;
}

.sidebar-collapsed .sidebar-toggle i::before {
    content: "\e148"; /* caret-right */
}

.sidebar-collapsed .sidebar .nav-item {
    justify-content: center;
    padding: 0.55rem 0;
    border-left: 3px solid transparent;
}

.sidebar-collapsed .sidebar:hover .nav-item {
    justify-content: flex-start;
    padding: 0.55rem 1rem 0.55rem 1.25rem;
}

.sidebar-collapsed .sidebar .nav-item i[class*="ph-"] {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.sidebar-collapsed .sidebar-footer {
    padding: 1rem 0.5rem;
}

.sidebar-collapsed .sidebar:hover .sidebar-footer {
    padding: 1rem;
}

.sidebar-collapsed .sidebar-footer .nav-item {
    justify-content: center;
    padding-left: 0;
}

.sidebar-collapsed .sidebar:hover .sidebar-footer .nav-item {
    justify-content: flex-start;
    padding-left: 1.25rem;
}

.sidebar-collapsed .sidebar-user {
    justify-content: center;
}

.sidebar-collapsed .sidebar:hover .sidebar-user {
    justify-content: flex-start;
}

.sidebar-collapsed .main-content {
    margin-left: 60px;
}

/* Accordion submenus */
.nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.nav-submenu.open {
    max-height: 500px;
}

.nav-submenu-item {
    display: block;
    padding: 0.4rem 1.5rem 0.4rem 2.75rem;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: color 0.15s, background 0.15s;
    border-left: 3px solid transparent;
}

.nav-submenu-item:hover {
    color: #fff;
    background: rgba(255,255,255,0.05);
}

.nav-submenu-item.active {
    color: var(--gold);
    border-left-color: var(--gold);
    background: rgba(249,160,27,0.06);
}

/* Submenu chevron */
.nav-submenu-chevron {
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0.5;
    transition: transform 0.2s ease;
}

.nav-submenu-chevron.rotated {
    transform: rotate(180deg);
}

/* Has-submenu: ensure badge + chevron spacing */
.nav-item.has-submenu {
    flex-wrap: nowrap;
}

/* Mobile top bar (hidden on desktop) */
.mobile-topbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: var(--dark-warm);
    z-index: 101;
    align-items: center;
    padding: 0 1rem;
}

.mobile-hamburger {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
}

.mobile-topbar-title {
    flex: 1;
    text-align: center;
    color: #fff;
    font-family: 'Instrument Serif', serif;
    font-size: 1.125rem;
    margin-right: 1.5rem; /* offset for hamburger centering */
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
}

.sidebar-overlay.active {
    display: block;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .mobile-topbar {
        display: flex;
    }

    .sidebar-toggle {
        display: none;
    }

    .sidebar {
        transform: translateX(-100%);
        z-index: 100;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        padding-top: calc(50px + 1.5rem);
    }

    /* Override collapsed state on mobile */
    .sidebar-collapsed .sidebar {
        width: var(--sidebar-w);
        transform: translateX(-100%);
    }

    .sidebar-collapsed .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-collapsed .sidebar .nav-item span,
    .sidebar-collapsed .sidebar .nav-submenu-chevron,
    .sidebar-collapsed .sidebar .unread-badge,
    .sidebar-collapsed .sidebar .nav-section,
    .sidebar-collapsed .nav-submenu,
    .sidebar-collapsed .sidebar-footer .user-info {
        display: revert;
    }

    .sidebar-collapsed .sidebar-header {
        justify-content: space-between;
        padding: 1.25rem 1.5rem;
    }

    .sidebar-collapsed .sidebar-header .sidebar-logo {
        display: block;
    }

    .sidebar-collapsed .sidebar .nav-item {
        justify-content: flex-start;
        padding: 0.6rem 1.5rem;
    }

    .sidebar-collapsed .sidebar-footer {
        padding: 1rem 1.5rem;
    }

    .sidebar-collapsed .main-content {
        margin-left: 0;
    }
}

/* ============================================
   Parent Lesson Plans
   ============================================ */

.parent-lessons-page { position: relative; }

/* Child selector pills */
.child-pills { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.child-pill {
    padding: 6px 16px;
    border-radius: 20px;
    background: #fff;
    border: 1.5px solid var(--tan);
    color: var(--dark);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}
.child-pill.active,
.child-pill:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}

/* Header */
.pl-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}
.pl-header h1 { margin-bottom: 8px; }
.pl-view-toggles { display: flex; gap: 0; }
.pl-view-btn {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    background: #fff;
    border: 1px solid var(--tan);
    color: var(--mid);
    text-decoration: none;
    transition: all 0.15s;
}
.pl-view-btn:first-child { border-radius: 6px 0 0 6px; }
.pl-view-btn:last-child { border-radius: 0 6px 6px 0; }
.pl-view-btn + .pl-view-btn { border-left: none; }
.pl-view-btn.active {
    background: var(--dark);
    color: #fff;
    border-color: var(--dark);
}

/* Progress circle */
.pl-progress-circle {
    position: relative;
    width: 72px;
    height: 72px;
}
.pl-progress-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pl-progress-bg {
    fill: none;
    stroke: var(--tan);
    stroke-width: 3;
    opacity: 0.3;
}
.pl-progress-fill {
    fill: none;
    stroke: var(--gold);
    stroke-width: 3;
    stroke-linecap: round;
}
.pl-progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.pl-progress-num { font-size: 14px; font-weight: 600; color: var(--dark); }
.pl-progress-label { font-size: 10px; color: var(--mid); text-transform: uppercase; letter-spacing: 0.05em; }

/* Date navigation */
.pl-date-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.pl-nav-arrow {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--tan);
    color: var(--dark);
    text-decoration: none;
    transition: background 0.15s;
}
.pl-nav-arrow:hover { background: var(--gold); color: #fff; }
.pl-date-range { font-family: 'Instrument Serif', serif; font-size: 20px; }
.pl-week-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--mid);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 4px;
}

/* Week layout: main + dock */
.pl-week-layout {
    display: flex;
    gap: 16px;
}
.pl-week-main { flex: 1; min-width: 0; }

/* Week grid */
.assignments-week-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.assignments-day-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.assignments-day-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--tan);
}
.assignments-day-header.is-today {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}
.assignments-day-num { font-family: 'Instrument Serif', serif; font-size: 22px; }
.assignments-day-name { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
.assignments-day-empty { padding: 12px 8px; font-size: 12px; color: var(--mid); opacity: 0.6; }

/* Assignment cards */
.assignment-card {
    background: #fff;
    border-radius: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
}
.assignment-card.assignment-done { opacity: 0.6; }
.assignment-card-subject {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--subject-color, var(--mid));
    margin-bottom: 2px;
}
.assignment-card-title { font-size: 14px; color: var(--dark); }
.assignment-card-check {
    position: absolute;
    top: 10px;
    right: 8px;
    font-size: 16px;
    color: var(--subject-color, var(--mid));
}
.assignment-card.assignment-done .assignment-card-check { color: var(--success); }

/* Large card (day view) */
.assignment-card-lg { padding: 16px; }
.assignment-card-lg .assignment-card-title { font-size: 16px; margin-bottom: 6px; }
.assignment-card-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.assignment-card-header-row .assignment-card-check { position: static; }
.assignment-card-desc { font-size: 13px; color: var(--mid); margin-bottom: 8px; line-height: 1.5; }
.assignment-card-meta { display: flex; gap: 16px; font-size: 12px; color: var(--mid); }
.assignment-card-meta i { margin-right: 2px; }

.pl-day-list { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }

/* Week Dock */
.week-dock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--tan);
    position: relative;
    flex-shrink: 0;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    scrollbar-width: thin;
}
.week-dock-item {
    width: 36px;
    height: 28px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease-out;
    text-decoration: none;
    color: var(--mid);
    background: transparent;
    flex-shrink: 0;
}
.week-dock-item.current {
    background: var(--gold);
    color: #fff;
    font-weight: 600;
}
.week-dock-item.selected {
    border: 2px solid var(--gold);
}
.week-dock-item.current.selected {
    border: 2px solid var(--dark);
}
.week-dock-tooltip {
    display: none;
    position: absolute;
    right: calc(100% + 8px);
    background: var(--dark);
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}

/* Mobile week strip */
.week-strip-mobile { display: none; }

/* Month grid */
.pl-month-grid { margin-top: 16px; }
.pl-month-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    margin-bottom: 4px;
}
.pl-month-day-label {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--mid);
    padding: 4px;
}
.pl-month-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}
.pl-month-cell {
    background: #fff;
    border: 1px solid var(--tan);
    border-radius: 4px;
    min-height: 64px;
    padding: 6px;
    text-decoration: none;
    color: var(--dark);
    transition: background 0.15s;
    display: flex;
    flex-direction: column;
}
.pl-month-cell:hover { background: #f5f0ea; }
.pl-month-cell.is-today { border-color: var(--gold); border-width: 2px; }
.pl-month-cell-blank { background: transparent; border-color: transparent; }
.pl-month-cell-num { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.pl-month-cell-dots { display: flex; gap: 3px; flex-wrap: wrap; }
.pl-month-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--subject-color, var(--mid));
}

.pl-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--mid);
    text-decoration: none;
    margin-bottom: 12px;
}
.pl-back-link:hover { color: var(--dark); }

/* Mobile */
@media (max-width: 768px) {
    .week-dock { display: none !important; }
    .week-strip-mobile {
        display: flex;
        overflow-x: auto;
        gap: 4px;
        padding: 8px 0;
        margin-bottom: 12px;
        -webkit-overflow-scrolling: touch;
    }
    .week-strip-mobile .week-dock-item { flex-shrink: 0; }
    .assignments-week-grid {
        grid-template-columns: 1fr;
    }
    .pl-month-body,
    .pl-month-header-row {
        grid-template-columns: repeat(7, 1fr);
        font-size: 11px;
    }
    .pl-month-cell { min-height: 44px; padding: 4px; }
}

/* Announcement dismiss */
.pd-announcement-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: opacity 0.25s ease, max-height 0.25s ease;
}

.pd-announcement-content {
    flex: 1;
    min-width: 0;
}

.pd-dismiss-btn {
    background: none;
    border: none;
    color: var(--tan);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    transition: color 0.15s ease, background 0.15s ease;
}

.pd-dismiss-btn:hover {
    color: var(--dark);
    background: rgba(0, 0, 0, 0.05);
}

.pd-dismiss-btn i {
    font-size: 0.85rem;
}

/* Announcements Archive */
.pd-announcements-archive {
    max-width: 800px;
}

.pd-archive-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.pd-back-link {
    color: var(--gold);
    text-decoration: none;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pd-back-link:hover {
    text-decoration: underline;
}

.pd-archive-count {
    color: var(--mid);
    font-size: 0.875rem;
}

.pd-archive-card {
    margin-bottom: 1rem;
}

.pd-archive-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.pd-archive-subject {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark);
    margin: 0;
}

.pd-archive-date {
    color: var(--mid);
    font-size: 0.8rem;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 1rem;
}

.pd-archive-sender {
    color: var(--mid);
    font-size: 0.8rem;
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pd-archive-body {
    color: var(--dark);
    font-size: 0.9rem;
    line-height: 1.6;
}

.pd-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.pd-page-btn {
    color: var(--gold);
    text-decoration: none;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pd-page-info {
    color: var(--mid);
    font-size: 0.875rem;
}

/* ============================================================
   Messages - CSS Classes (replaces inline styles)
   ============================================================ */

.msg-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.msg-filters {
    display: flex;
    gap: 0.5rem;
}

.msg-filters .btn-filter {
    font-size: 0.8125rem;
    padding: 0.4rem 0.75rem;
}

.msg-list {
    padding: 0;
}

.msg-empty {
    text-align: center;
    padding: 60px;
    color: var(--mid);
}

.msg-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    text-decoration: none;
    color: var(--dark);
    transition: background 0.15s;
}

.msg-item:hover {
    background: rgba(0,0,0,0.02);
}

.msg-item--unread {
    background: rgba(249,160,27,0.04);
}

.msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tan);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.8125rem;
    flex-shrink: 0;
    font-family: 'Schibsted Grotesk', sans-serif;
}

.msg-avatar--unread {
    background: var(--gold);
}

.msg-content {
    flex: 1;
    min-width: 0;
}

.msg-content-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.msg-sender {
    font-weight: 500;
    font-size: 0.875rem;
}

.msg-sender--unread {
    font-weight: 700;
}

.msg-role {
    font-size: 0.6875rem;
    color: var(--mid);
    text-transform: capitalize;
}

.msg-subject {
    font-size: 0.8125rem;
    color: var(--mid);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-subject--unread {
    font-weight: 600;
    color: var(--dark);
}

.msg-preview {
    font-size: 0.75rem;
    color: var(--mid);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-meta {
    text-align: right;
    flex-shrink: 0;
}

.msg-date {
    font-size: 0.75rem;
    color: var(--mid);
}

.msg-unread-badge {
    display: inline-block;
    margin-top: 4px;
    background: var(--gold);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 99px;
}


/* ============================================================
   Loading / Skeleton States
   ============================================================ */

@keyframes skeleton-shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
    background: linear-gradient(90deg, #e8e0d8 25%, #f0e9e2 50%, #e8e0d8 75%);
    background-size: 200px 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-text {
    height: 0.875rem;
    width: 100%;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, #e8e0d8 25%, #f0e9e2 50%, #e8e0d8 75%);
    background-size: 200px 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-text:last-child {
    width: 60%;
}

.skeleton-card {
    height: 120px;
    background: linear-gradient(90deg, #e8e0d8 25%, #f0e9e2 50%, #e8e0d8 75%);
    background-size: 200px 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}

.skeleton-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(90deg, #e8e0d8 25%, #f0e9e2 50%, #e8e0d8 75%);
    background-size: 200px 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.loading-spinner::after {
    content: '';
    width: 32px;
    height: 32px;
    border: 3px solid var(--tan);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.page-loading {
    position: fixed;
    inset: 0;
    background: rgba(251,249,247,0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.page-loading::after {
    content: '';
    width: 48px;
    height: 48px;
    border: 4px solid var(--tan);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}


/* ============================================================
   Accessibility
   ============================================================ */

.skip-nav {
    position: absolute;
    top: -100%;
    left: 1rem;
    background: var(--gold);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0 0 4px 4px;
    z-index: 10000;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s;
}

.skip-nav:focus {
    top: 0;
}

*:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.nav-item:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
    background: rgba(255,255,255,0.08);
}


/* ============================================================
   404 Page
   ============================================================ */

.error-404-icon {
    font-size: 4rem;
    color: var(--gold);
    margin: 1rem 0;
}


/* ============================================================
   Dark Mode
   ============================================================ */

@media not all and (prefers-color-scheme: dark) { /* dark mode disabled for now */
    :root:not([data-theme="light"]) {
        --cream: #1a1816;
        --dark: #F5F0EB;
        --mid: #A89880;
        --tan: #4A4035;
        --dark-warm: #141210;
    }

    :root:not([data-theme="light"]) body {
        background: #1a1816;
        color: #F5F0EB;
    }

    :root:not([data-theme="light"]) .card,
    :root:not([data-theme="light"]) .stat-card {
        background: #231f1b;
        border: 1px solid #3a3430;
    }

    :root:not([data-theme="light"]) .form-input,
    :root:not([data-theme="light"]) .form-select,
    :root:not([data-theme="light"]) textarea.form-input {
        background: #2a2520;
        border-color: #4A4035;
        color: #F5F0EB;
    }

    :root:not([data-theme="light"]) table thead {
        background: #231f1b;
    }

    :root:not([data-theme="light"]) table tbody tr {
        border-color: #3a3430;
    }

    :root:not([data-theme="light"]) table tbody tr:hover {
        background: #2a2520;
    }

    :root:not([data-theme="light"]) .page-loading {
        background: rgba(26,24,22,0.85);
    }

    :root:not([data-theme="light"]) .skeleton,
    :root:not([data-theme="light"]) .skeleton-text,
    :root:not([data-theme="light"]) .skeleton-card,
    :root:not([data-theme="light"]) .skeleton-circle {
        background: linear-gradient(90deg, #2a2520 25%, #3a3430 50%, #2a2520 75%);
        background-size: 200px 100%;
    }

    :root:not([data-theme="light"]) .msg-item {
        border-bottom-color: #3a3430;
    }

    :root:not([data-theme="light"]) .msg-item:hover {
        background: rgba(255,255,255,0.03);
    }

    :root:not([data-theme="light"]) .login-card {
        background: #231f1b;
        border-color: #3a3430;
    }

    :root:not([data-theme="light"]) .btn-outline {
        border-color: #4A4035;
        color: #F5F0EB;
    }
}

[data-theme="dark-disabled"] {
    --cream: #1a1816;
    --dark: #F5F0EB;
    --mid: #A89880;
    --tan: #4A4035;
    --dark-warm: #141210;
}

[data-theme="dark-disabled"] body,
body[data-theme="dark-disabled"] {
    background: #1a1816;
    color: #F5F0EB;
}

[data-theme="dark-disabled"] .card,
[data-theme="dark-disabled"] .stat-card {
    background: #231f1b;
    border: 1px solid #3a3430;
}

[data-theme="dark-disabled"] .form-input,
[data-theme="dark-disabled"] .form-select,
[data-theme="dark-disabled"] textarea.form-input {
    background: #2a2520;
    border-color: #4A4035;
    color: #F5F0EB;
}

[data-theme="dark-disabled"] table thead {
    background: #231f1b;
}

[data-theme="dark-disabled"] table tbody tr {
    border-color: #3a3430;
}

[data-theme="dark-disabled"] table tbody tr:hover {
    background: #2a2520;
}

[data-theme="dark-disabled"] .page-loading {
    background: rgba(26,24,22,0.85);
}

[data-theme="dark-disabled"] .skeleton,
[data-theme="dark-disabled"] .skeleton-text,
[data-theme="dark-disabled"] .skeleton-card,
[data-theme="dark-disabled"] .skeleton-circle {
    background: linear-gradient(90deg, #2a2520 25%, #3a3430 50%, #2a2520 75%);
    background-size: 200px 100%;
}

[data-theme="dark-disabled"] .msg-item {
    border-bottom-color: #3a3430;
}

[data-theme="dark-disabled"] .msg-item:hover {
    background: rgba(255,255,255,0.03);
}

[data-theme="dark-disabled"] .login-card {
    background: #231f1b;
    border-color: #3a3430;
}

[data-theme="dark-disabled"] .btn-outline {
    border-color: #4A4035;
    color: #F5F0EB;
}

[data-theme="dark-disabled"] .page-header {
    border-color: #3a3430;
}

[data-theme="dark-disabled"] .breadcrumb a {
    color: var(--mid);
}

[data-theme="dark-disabled"] .detail-table td {
    border-color: #3a3430;
}

[data-theme="dark-disabled"] .card-header {
    border-color: #3a3430;
}

/* Theme toggle button */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    width: 100%;
    text-align: left;
}

.theme-icon-dark { display: none; }
[data-theme="dark-disabled"] .theme-icon-light { display: none; }
[data-theme="dark-disabled"] .theme-icon-dark { display: inline; }


/* ============================================================
   Print Stylesheet - Gradebook
   ============================================================ */

@media print {
    .sidebar,
    .mobile-topbar,
    .sidebar-overlay,
    .page-header .btn,
    .skip-nav,
    .theme-toggle,
    .nav-item-signout,
    .impersonation-banner {
        display: none !important;
    }

    .app-layout {
        display: block !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }

    table {
        width: 100% !important;
        border-collapse: collapse;
    }

    table th,
    table td {
        border: 1px solid #ccc !important;
        padding: 4px 8px !important;
        font-size: 10pt;
    }

    table thead {
        background: #f0f0f0 !important;
    }

    .page-title::before {
        content: attr(data-school-name) " — ";
    }

    h1.page-title {
        font-size: 16pt;
        margin-bottom: 0.5rem;
    }

    a { color: #000 !important; text-decoration: none !important; }

    .badge { border: 1px solid #999; }
}


/* ============================================================
   Teacher Course Card Hover
   ============================================================ */

.course-card,
.teacher-courses-grid a {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.course-card:hover,
.teacher-courses-grid a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-color: var(--gold);
}

/* Dark mode disabled for now: keep the app light regardless of OS/browser preference. */
:root, html, body { color-scheme: light; }

/* ============================================================
   Force Light Dashboard Theme
   ============================================================
   Saints/Classica dashboard pages should stay light regardless of
   browser or OS dark-mode preference.
*/
:root,
:root:not([data-theme="light"]),
[data-theme="dark-disabled"] {
    --cream: #FBF9F7;
    --dark: #2B261C;
    --mid: #6F5C44;
    --tan: #C6B5A1;
    --dark-warm: #1E1A14;
    color-scheme: light;
}

html,
body,
:root:not([data-theme="light"]) body,
[data-theme="dark-disabled"] body,
body[data-theme="dark-disabled"] {
    background: var(--cream) !important;
    color: var(--dark) !important;
    color-scheme: light;
}

.main-content,
.app-layout {
    background: var(--cream) !important;
}

.card,
.stat-card,
.quick-link,
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .stat-card,
[data-theme="dark-disabled"] .card,
[data-theme="dark-disabled"] .stat-card {
    background: #fff !important;
    color: var(--dark) !important;
    border-color: rgba(0,0,0,0.06) !important;
}

.course-card {
    background: linear-gradient(135deg, #fff 0%, #faf4df 100%) !important;
    color: var(--dark) !important;
}

.page-title,
.card-title,
.stat-value,
.list-item-title,
.course-card-name {
    color: var(--dark) !important;
}

.list-item-meta,
.text-muted,
.stat-label,
.course-card-code,
.course-card-meta-row {
    color: var(--mid) !important;
}

/* ==========================================================
   Saints Portal Shell Overrides
   Formerly loaded from /app/assets/saints-shell.css.
   Kept here so the app shell has one local portal CSS file.
   ========================================================== */
:root {
    --cream: #fbf9f7;
    --dark: #213b2d;
    --gold: #e6c566;
    --mid: #6f776d;
    --tan: #d1bd89;
    --navy: #1a2744;
    --navy-light: #243456;
    --navy-muted: #2d3f5e;
    --brown: #3e2723;
    --brown-light: #5d4037;
    --brown-muted: #6d4c41;
    --dark-warm: #182a21;
    --school-primary: #213b2d;
    --school-accent: #e6c566;
    --school-accent-dark: #c9a94d;
    --school-sidebar: #213b2d;
    --school-font-heading: 'Instrument Serif', serif;
    --school-font-body: 'Instrument Sans', sans-serif;
}
:root { --sidebar-collapsed-w: 76px; --sidebar-expanded-w: 250px; }
.sidebar {
    width: var(--sidebar-collapsed-w) !important;
    overflow-x: hidden;
    transition: width .22s ease, box-shadow .22s ease;
}
.sidebar {
    z-index: 300;
}
.sidebar:hover,
.sidebar:focus-within {
    width: var(--sidebar-expanded-w) !important;
    box-shadow: 10px 0 30px rgba(0,0,0,.16);
}
.main-content {
    margin-left: var(--sidebar-collapsed-w) !important;
}
.sidebar-logo {
    padding: 1rem 0;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-logo img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    object-position: center;
    filter: none;
    display: block;
    flex: 0 0 auto;
}
.nav-section,
.user-info {
    width: 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transform: translateX(-6px);
    transition: opacity .16s ease, transform .16s ease, width .16s ease, max-width .16s ease;
    pointer-events: none;
}
.nav-item span,
.nav-item-signout span {
    width: 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transform: translateX(-6px);
    transition: opacity .16s ease, transform .16s ease, width .16s ease, max-width .16s ease;
    pointer-events: none;
}
.sidebar:hover .nav-item span,
.sidebar:focus-within .nav-item span,
.sidebar:hover .nav-item-signout span,
.sidebar:focus-within .nav-item-signout span {
    width: auto;
    max-width: 160px;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.sidebar:hover .nav-section,
.sidebar:focus-within .nav-section,
.sidebar:hover .user-info,
.sidebar:focus-within .user-info {
    width: auto;
    max-width: 170px;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.nav-section { padding-left: 1.5rem; }
.nav-item {
    justify-content: center;
    padding: .72rem 0;
    gap: 0;
}
.sidebar:hover .nav-item,
.sidebar:focus-within .nav-item {
    justify-content: flex-start;
    padding-left: 1.45rem;
    gap: .85rem;
}
.nav-item i[class*="ph-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.38rem;
    width: 28px;
    min-width: 28px;
    line-height: 1;
    text-align: center;
}
.sidebar-footer {
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sidebar:hover .sidebar-footer,
.sidebar:focus-within .sidebar-footer {
    align-items: stretch;
    padding-left: 1.25rem;
    padding-right: 1rem;
}
.sidebar-user { width: auto; justify-content: center; }
.sidebar:hover .sidebar-user,
.sidebar:focus-within .sidebar-user { width: 210px; justify-content: flex-start; }
.teacher-class-nav { margin-top:.65rem; }
.teacher-class-nav .nav-section { padding-top:.8rem; }
.nav-item-class span { font-size:.79rem; overflow:hidden; text-overflow:ellipsis; }
.nav-item-class .class-subject { display:none; }
.sidebar:hover .nav-item-class .class-subject,
.sidebar:focus-within .nav-item-class .class-subject { display:block; font-size:.66rem; color:rgba(255,255,255,.42); margin-top:.08rem; }
.nav-class-text { min-width:0; }
.sidebar:hover .nav-class-text,
.sidebar:focus-within .nav-class-text { display:block; }
.role-switcher-shell {
    width: 100%;
    margin-top: .75rem;
    padding: 0 .75rem;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .16s ease, max-height .16s ease;
}
.sidebar:hover .role-switcher-shell,
.sidebar:focus-within .role-switcher-shell {
    opacity: 1;
    max-height: 140px;
}
.role-switcher-label {
    display:block;
    font-family:'Schibsted Grotesk', sans-serif;
    font-size:.62rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.42);
    margin-bottom:.35rem;
}
.role-switcher-select {
    width:100%;
    border:1px solid rgba(230,197,102,.38);
    border-radius:10px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-family:'Instrument Sans', sans-serif;
    font-size:.85rem;
    padding:.55rem .65rem;
}
.role-switcher-select option { color:#213b2d; }
.role-switcher-note { color:rgba(255,255,255,.48); font-size:.68rem; margin-top:.35rem; line-height:1.25; }
.badge-role-offset { margin-top: -1rem; margin-bottom: 1.25rem; }
.list-item-title { font-weight: 600; }
.list-item-meta, .text-muted { color: var(--mid); }
.text-sm { font-size: .875rem; }
.mb-16 { margin-bottom: 1rem; }
.mb-24 { margin-bottom: 1.5rem; }
.mt-16 { margin-top: 1rem; }
.quick-links { display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: .75rem; }
.quick-link { display:flex; align-items:center; gap:.6rem; padding:.9rem 1rem; border:1px solid rgba(0,0,0,.07); border-radius:10px; text-decoration:none; color:var(--dark); background:#fff; }
.quick-link:hover { border-color: var(--school-accent); color: var(--school-primary); }
.course-card {
    display:block;
    background: linear-gradient(135deg, #fff 0%, #faf4df 100%);
    border:1px solid rgba(209,189,137,.62);
    border-radius:18px;
    padding:1.15rem;
    color:var(--dark);
    text-decoration:none;
    box-shadow: 0 14px 34px rgba(33,59,45,.045);
    overflow: hidden;
}
.course-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 42px rgba(33,59,45,.07);
    border-color: rgba(230,197,102,.9);
}
.card, .stat-card {
    border:1px solid rgba(209,189,137,.45);
    box-shadow: 0 14px 34px rgba(33,59,45,.04);
}
.stat-card {
    border-radius:18px;
    min-height: 132px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.stat-card-classes { background: linear-gradient(135deg, #fff 0%, rgba(53,89,70,.10) 100%); border-color: rgba(53,89,70,.32); }
.stat-card-students { background: linear-gradient(135deg, #fff 0%, rgba(36,52,86,.10) 100%); border-color: rgba(36,52,86,.32); }
.stat-card-grading { background: linear-gradient(135deg, #fff 0%, rgba(230,197,102,.24) 100%); border-color: rgba(230,197,102,.62); }
.stat-card-assignments { background: linear-gradient(135deg, #fff 0%, rgba(109,76,65,.11) 100%); border-color: rgba(109,76,65,.34); }
.stat-card-topline {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:.75rem;
}
.stat-kicker {
    font-family:'Schibsted Grotesk', sans-serif;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#4d5660;
}
.stat-pill {
    font-family:'Schibsted Grotesk', sans-serif;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    border-radius:999px;
    padding:.22rem .55rem;
    color:#213b2d;
    background:rgba(255,255,255,.62);
    box-shadow: inset 0 0 0 1px rgba(33,59,45,.05);
}
.stat-pill-classes { background:rgba(53,89,70,.12); color:#213b2d; }
.stat-pill-students { background:rgba(36,52,86,.12); color:#243456; }
.stat-pill-grading { background:rgba(230,197,102,.34); color:#6d5117; }
.stat-pill-assignments { background:rgba(109,76,65,.12); color:#6d4c41; }
.stat-card .stat-value { font-family:'Instrument Sans', sans-serif; font-weight:800; letter-spacing:-.04em; }
.stat-card .stat-label { text-transform:none; letter-spacing:0; font-size:.95rem; line-height:1.35; color:#59635c; }
.teacher-courses-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap:1rem; }
.course-card-name { font-weight:700; margin-bottom:.25rem; }
.course-card-code, .course-card-meta-row { color:var(--mid); font-size:.875rem; }
@media (max-width: 768px) {
    .sidebar,
    .sidebar:hover,
    .sidebar:focus-within {
        position: sticky !important;
        top: 0;
        bottom: auto;
        width: 100% !important;
        height: auto;
        min-height: 72px;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        z-index: 200;
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
    }
    .sidebar-logo { min-height: 72px; padding: .6rem .85rem; flex: 0 0 auto; }
    .sidebar-logo img { width: 52px; height: 52px; }
    .sidebar-nav {
        flex: 1 0 auto;
        display: flex;
        align-items: center;
        gap: .25rem;
        padding: .5rem .25rem;
        overflow-x: auto;
    }
    .nav-section, .sidebar-footer { display: none; }
    .nav-item,
    .sidebar:hover .nav-item,
    .sidebar:focus-within .nav-item {
        min-width: 54px;
        padding: .7rem .75rem;
        justify-content: center;
        gap: 0;
        border-left: 0;
        border-bottom: 3px solid transparent;
        border-radius: 10px;
    }
    .nav-item.active { border-left-color: transparent; border-bottom-color: var(--school-accent); }
    .nav-item span,
    .sidebar:hover .nav-item span,
    .sidebar:focus-within .nav-item span { display: none; }
    .main-content,
    .sidebar:hover ~ .main-content,
    .sidebar:focus-within ~ .main-content {
        margin-left: 0 !important;
        padding: 1.25rem;
    }
    .page-title { font-size: clamp(2.5rem, 5vw, 4.15rem); }
    .stats-grid, .grid-2, .grid-3, .teacher-courses-grid { grid-template-columns: 1fr !important; }
    .quick-links { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .quick-links { grid-template-columns: 1fr; }
    .main-content { padding: 1rem; }
}

/* Teacher class accordion navigation */
.teacher-class-nav { margin-top: .5rem; }
.teacher-class-group { margin: .1rem 0; }
.teacher-class-summary {
    list-style: none;
    cursor: pointer;
    position: relative;
}
.teacher-class-summary::-webkit-details-marker { display: none; }
.teacher-class-chevron {
    margin-left: auto;
    font-size: .95rem !important;
    opacity: .58;
    transition: transform .16s ease;
}
.teacher-class-group[open] .teacher-class-chevron { transform: rotate(180deg); }
.teacher-class-subnav {
    display: none;
    padding: .15rem 0 .35rem;
}
.sidebar:hover .teacher-class-subnav,
.sidebar:focus-within .teacher-class-subnav { display: block; }
.teacher-class-subitem {
    padding-top: .48rem !important;
    padding-bottom: .48rem !important;
    color: rgba(255,255,255,.56);
}
.teacher-class-subitem i[class*="ph-"] {
    font-size: 1.02rem;
    width: 22px;
    min-width: 22px;
}
.sidebar:hover .teacher-class-subitem,
.sidebar:focus-within .teacher-class-subitem { padding-left: 3rem; }
.nav-class-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-item-signout { margin-top: .75rem; }

/* Hide class accordion arrows while sidebar is collapsed; show them only when expanded. */
.teacher-class-chevron {
    display: none !important;
}
.sidebar:hover .teacher-class-chevron,
.sidebar:focus-within .teacher-class-chevron {
    display: inline-flex !important;
}

/* Class page header + horizontal Classica-style tabs */
.class-page-header {
    margin-top: -1.25rem;
    margin-bottom: 1.35rem;
    border-bottom: 1px solid rgba(33,59,45,.16);
    padding-bottom: 0;
}
.class-kicker {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: .45rem;
}
.class-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
}
.class-title {
    font-family: var(--school-font-heading, 'Instrument Serif', serif);
    font-size: clamp(2.6rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 1;
    color: var(--dark);
    margin: 0;
}
.class-meta { color: var(--mid); margin-top: .45rem; }
.class-status-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--mid);
    font-size: .9rem;
    white-space: nowrap;
    padding-bottom: .55rem;
}
.class-tabs {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    overflow-x: auto;
    margin-top: 1.35rem;
}
.class-tab {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .72rem 0 .82rem;
    color: #4e5a52;
    text-decoration: none;
    font-size: .9rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.class-tab:hover,
.class-tab.active {
    color: var(--school-accent-dark, #c9a94d);
    border-bottom-color: var(--school-accent, #e6c566);
}
.class-tab i { font-size: 1rem; }
.teacher-class-summary,
.teacher-class-chevron,
.teacher-class-subnav,
.teacher-class-subitem { display: none !important; }
@media (max-width: 768px) {
    .class-title-row { align-items: flex-start; flex-direction: column; }
    .class-status-row { padding-bottom: 0; }
    .class-tabs { gap: 1rem; }
}


/* ===== SOURCE: css/dashboard-main.css ===== */
/* Unified Dashboard/Admin Stylesheet */
:root {
  --font-heading: 'Instrument Serif', Georgia, serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-body: 'Source Sans Pro', sans-serif;
  --color-primary: #213b2d;
  --color-secondary: #e6c566;
  --color-accent: #6bbf59;
  --color-error: #dc3545;
  --color-success: #28a745;
  --color-warning: #e6c566;
  --color-border: #e1e8ed;
  --color-background: #f8f5ee;
  --border-radius: 4px;
  --border-radius-lg: 8px;
  --border-radius-full: 20px;
}

body, html {
  font-family: var(--font-body);
  background: var(--color-background);
  color: var(--color-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-primary);
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--border-radius);
  padding: 12px 24px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  transition: all 0.3s;
}
.btn-primary:hover {
  background: var(--color-accent);
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius);
  padding: 10px 22px;
  font-weight: 600;
  transition: all 0.3s;
}
.btn-secondary:hover {
  background: var(--color-secondary);
  color: #fff;
}

.btn-danger {
  background: var(--color-error);
  color: #fff;
  border: none;
  border-radius: var(--border-radius);
  padding: 10px 22px;
  font-weight: 600;
  transition: all 0.3s;
}
.btn-danger:hover {
  background: #a0522d;
}

.card, .section, .dashboard-main, .student-card, .family-card {
  /* background: #fff;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); */
  padding: 30px;
}

input, select, textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 16px;
  color: var(--color-primary);
  background: #fff;
  transition: border-color 0.3s, box-shadow 0.3s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(230, 197, 102, 0.25);
  outline: none;
}

label {
  font-weight: 500;
  color: var(--color-primary);
  font-family: var(--font-body);
}

.table, table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
th, td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
th {
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-secondary);
}

.success-message {
  background: rgba(40, 167, 69, 0.1);
  border-left: 4px solid var(--color-success);
  color: #155724;
  padding: 20px;
  border-radius: var(--border-radius);
  margin-bottom: 20px;
}

.error-message {
  background: rgba(220, 53, 69, 0.1);
  border-left: 4px solid var(--color-error);
  color: #721c24;
  padding: 20px;
  border-radius: var(--border-radius);
  margin-bottom: 20px;
}

/* Add more as needed for modals, badges, etc. */ 

/* ===== SOURCE: css/seo-pages.css ===== */
/* ===========================================
   SEO/AEO Landing Pages Styles
   =========================================== */

/* Featured Snippet / Direct Answer */
.direct-answer {
  background-color: var(--cream);
  border-left: 4px solid var(--gold);
  padding: 25px 30px;
  margin-bottom: 40px;
  font-size: 1.15rem;
  line-height: 1.7;
  border-radius: 0 5px 5px 0;
}

/* Breadcrumb */
.breadcrumb {
  padding: 15px 0;
  font-size: 0.85rem;
  color: #666;
}
.breadcrumb a {
  color: var(--dark-green);
  text-decoration: underline;
}
.breadcrumb a:hover {
  color: var(--gold);
}
.breadcrumb span {
  margin: 0 8px;
  color: #999;
}

/* SEO Page Banner (flush against sticky header) */
.seo-banner {
  background-color: var(--dark-green);
  color: var(--text-light);
  padding: 120px 0 60px;
  text-align: center;
  background-image: url('../images/banner-bg.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
}
.seo-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(33, 59, 45, 0.75);
}
.seo-banner .container {
  position: relative;
  z-index: 1;
}
.seo-banner h1 {
  font-size: 2.8rem;
  margin-bottom: 10px;
}
.seo-banner .subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  letter-spacing: 1px;
}

/* SEO Content Sections */
.seo-content {
  padding: 50px 0 80px;
}
.seo-content .content-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}
.seo-section {
  margin-bottom: 50px;
}
.seo-section h2 {
  color: var(--dark-green);
  font-size: 1.8rem;
  margin-bottom: 20px;
  position: relative;
}
.seo-section h2::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background-color: var(--gold);
  margin-top: 12px;
}
.seo-section h3 {
  color: var(--dark-green);
  font-size: 1.3rem;
  margin: 25px 0 12px;
}
.seo-section p {
  margin-bottom: 15px;
  line-height: 1.8;
}
.seo-section ul {
  margin: 15px 0 15px 20px;
}
.seo-section ul li {
  margin-bottom: 10px;
  line-height: 1.6;
}

/* Drive Time Box */
.drive-time-box {
  background: var(--white-green);
  border: 2px solid var(--light-green);
  border-radius: 8px;
  padding: 25px 30px;
  margin: 30px 0;
  display: flex;
  align-items: center;
  gap: 20px;
}
.drive-time-box .drive-icon {
  font-size: 2rem;
  color: var(--dark-green);
}
.drive-time-box .drive-details h3 {
  margin: 0 0 5px;
  font-size: 1.2rem;
  color: var(--dark-green);
}
.drive-time-box .drive-details p {
  margin: 0;
  color: #555;
}

/* Highlight Grid (for "What to Expect" or features) */
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 25px 0;
}
.highlight-card {
  background: var(--cream);
  padding: 25px;
  border-radius: 8px;
  text-align: center;
  border-top: 3px solid var(--gold);
}
.highlight-card i {
  font-size: 1.8rem;
  color: var(--dark-green);
  margin-bottom: 12px;
  display: block;
}
.highlight-card h4 {
  color: var(--dark-green);
  margin: 0 0 8px;
  font-size: 1rem;
}
.highlight-card p {
  font-size: 0.9rem;
  margin: 0;
  color: #555;
}

/* CTA Section */
.seo-cta {
  background-color: var(--gold);
  padding: 50px 0;
  text-align: center;
  margin-top: 40px;
}
.seo-cta h2 {
  color: var(--dark-green);
  font-size: 2rem;
  margin-bottom: 15px;
}
.seo-cta p {
  max-width: 600px;
  margin: 0 auto 25px;
  font-size: 1.05rem;
}
.seo-cta .btn {
  border-color: var(--dark-green);
  color: var(--dark-green);
  font-size: 1rem;
  padding: 14px 35px;
  margin: 0;
}
.seo-cta .btn:hover {
  background-color: var(--dark-green);
  color: var(--text-light);
  border-color: var(--dark-green);
}

/* Blog Styles */
.blog-meta {
  color: #777;
  font-size: 0.9rem;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.blog-meta span {
  margin-right: 20px;
}
.blog-meta i {
  margin-right: 5px;
  color: var(--dark-green);
}
.blog-content blockquote {
  border-left: 4px solid var(--gold);
  background: var(--cream);
  padding: 20px 25px;
  margin: 25px 0;
  font-style: italic;
  border-radius: 0 5px 5px 0;
}
.blog-tags {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}
.blog-tag {
  display: inline-block;
  background: var(--white-green);
  color: var(--dark-green);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  margin: 5px 5px 5px 0;
  border: 1px solid var(--light-green);
}

/* Responsive */
@media (max-width: 768px) {
  .seo-banner { padding: 100px 0 30px; }
  .seo-banner h1 { font-size: 2rem; }
  .seo-section h2 { font-size: 1.5rem; }
  .drive-time-box { flex-direction: column; text-align: center; }
  .highlight-grid { grid-template-columns: 1fr; }
  .seo-cta h2 { font-size: 1.6rem; }
}


/* ===== SOURCE: css/teacher-dashboard.css ===== */
/* Time Tracking Widget Styles */
.time-tracking-widget {
	background: white;
	border-radius: 7px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.time-status-display {
	text-align: left;
}

.status-indicator {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 5px;
	padding: 4px;
}

.status-indicator.active {
	background-color: #22c55e;
	animation: pulse 2s infinite;
}

.status-indicator.completed {
	background-color: #3b82f6;
}

.status-indicator.inactive {
	background-color: #6b7280;
}

.status-active {
	color: #155724;
	font-size: 11px;
	text-align: left;
	align-items: center;
	padding: 0;
	margin: 0;
	line-height: 11px;
	background: white;
}
.status-completed {
	background: white;
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.time-controls {
	padding: 10px;
	text-align: center;
}

.time-controls button {
	padding: 7px 30px;
	border: none;
	border-radius: 5px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	margin: 10px 0 0;
	color: white;
}
.time-controls button:hover {
	border: 0;
	background-color: black;
	color: white;
}
.btn-clock-in {
	background-color: var(--light-green);
}
.btn-clock-out {
	background-color: var(--red);
}

td.clock-td {
	padding: 0px 5px 0px 25px;
}
.clock-text {
	font-size: 11px;
}

.btn-success {
	background-color: #22c55e;
	color: white;
}

.btn-success:hover {
	background-color: #16a34a;
}

.btn-danger {
	background-color: #ef4444;
	color: white;
}

.btn-danger:hover {
	background-color: #dc2626;
}

.clock-header {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	line-height: 11px;
}

.elapsed-time {
	padding: 0;
	text-align: right;
	font-size: 11px;
	line-height: 11px;
	color: #374151;
}

.week-summary {
	padding: 0.5rem 1rem;
	text-align: center;
	color: #6b7280;
	font-size: 0.9rem;
}

.birthday-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.birthday-item {
	display: flex;
	align-items: center;
	padding: 0.75rem;
	border-radius: 7px;
	background: #f8f9fa;
	transition: all 0.3s ease;
}

.birthday-item.birthday-today {
	background: #fff3cd;
	border: 2px solid #ffc107;
}

.birthday-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 600;
	font-size: 0.9rem;
	margin-right: 0.75rem;
}

.birthday-name {
	font-weight: 600;
	color: var(--dark-green);
}

.birthday-meta {
	font-size: 0.8rem;
	color: #666;
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.birthday-today-badge {
	background: #ffc107;
	color: #000;
	padding: 0.2rem 0.5rem;
	border-radius: 7px;
	font-weight: 600;
}


/* Class sidebar accordion subnav */
.teacher-class-group { width: 100%; }
.nav-item-class { position: relative; }
.nav-item-class .class-caret {
    margin-left: auto;
    font-size: .82rem;
    opacity: 0;
    transform: rotate(-90deg);
    transition: opacity .16s ease, transform .16s ease;
}
.sidebar:hover .nav-item-class .class-caret,
.sidebar:focus-within .nav-item-class .class-caret { opacity: .72; }
.teacher-class-group.open .nav-item-class .class-caret { transform: rotate(0deg); }
.class-sidebar-subnav {
    display: none;
    padding: .15rem 0 .55rem 2.75rem;
    margin-top: -.1rem;
}
.sidebar:hover .class-sidebar-subnav,
.sidebar:focus-within .class-sidebar-subnav { display: block; }
.class-sidebar-subnav-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 2rem;
    padding: .22rem .65rem .22rem 0;
    color: rgba(255,255,255,.66);
    text-decoration: none;
    font-size: .82rem;
    line-height: 1.15;
    border-radius: .35rem;
}
.class-sidebar-subnav-item:hover,
.class-sidebar-subnav-item:focus {
    color: #fff;
}
.class-sidebar-subnav-item i {
    width: 1rem;
    min-width: 1rem;
    text-align: center;
    color: rgba(255,255,255,.46);
    font-size: .95rem;
}
.class-sidebar-subnav-item:hover i,
.class-sidebar-subnav-item:focus i { color: rgba(255,255,255,.82); }
.sidebar:not(:hover):not(:focus-within) .class-sidebar-subnav { display: none; }

/* Hide class accordion carets while sidebar is collapsed */
.sidebar:not(:hover):not(:focus-within) .nav-item-class .class-caret {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
}
.sidebar:hover .nav-item-class .class-caret,
.sidebar:focus-within .nav-item-class .class-caret {
    display: inline-flex !important;
    width: auto !important;
    min-width: auto !important;
    margin-left: auto !important;
}

/* Unified portal content width */
.main-content > .page-header,
.main-content > .class-page-header,
.main-content > .stats-grid,
.main-content > .grid-2,
.main-content > .card,
.main-content > .quick-links,
.main-content > .dashboard-header,
.main-content > .dashboard-content,
.main-content > .content,
.main-content > form,
.main-content > section,
.main-content > div:not(.page-header):not(.class-page-header) {
    max-width: var(--portal-content-max);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Portal-wide 1600px content lane */
:root { --portal-content-max: 1600px; }
.main-content {
    --portal-content-padding-x: 2.5rem;
}
.main-content > * {
    width: min(100%, var(--portal-content-max)) !important;
    max-width: var(--portal-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.main-content > script,
.main-content > style { width: auto !important; max-width: none !important; }
.class-page-header,
.page-header,
.dashboard-header,
.grade-filter,
.teachers-grid,
.stats-grid,
.grid-2,
.quick-links,
.card,
.content,
.dashboard-content,
.student-overview-card,
.assignment-layout,
.assignments-layout,
.class-detail-layout,
.teacher-dashboard-grid,
.parent-dashboard-grid {
    max-width: var(--portal-content-max) !important;
}
.teachers-grid,
.stats-grid,
.grid-2,
.assignment-layout,
.assignments-layout,
.class-detail-layout,
.teacher-dashboard-grid,
.parent-dashboard-grid {
    width: min(100%, var(--portal-content-max)) !important;
}
@media (max-width: 768px) {
    .main-content > * { width: 100% !important; }
}

/* Strong portal layout normalization: every main page section uses the same lane */
.main-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.main-content > :not(script):not(style) {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    width: 100% !important;
    max-width: var(--portal-content-max) !important;
}
.class-page-header,
.page-header,
.dashboard-header,
.dashboard-content,
.content,
.grade-filter,
.house-filter,
.filter-row,
.teachers-grid,
.teacher-students-grid,
.students-grid,
.assignments-grid,
.assignments-list,
.assignment-list,
.stats-grid,
.stats-row,
.grid-2,
.card-grid,
.quick-links,
.class-tabs,
.card,
.table-container,
.data-table,
.admin-table,
.form-container,
.settings-card,
.billing-card,
.parent-dashboard-section,
.teacher-dashboard-section {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: var(--portal-content-max) !important;
}

/* Teacher class pages: one uniform 1400px lane for header and body */
.teacher-class-page {
    width: 100% !important;
    max-width: var(--portal-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
}
.teacher-class-page > * {
    width: 100% !important;
    max-width: var(--portal-content-max) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}
.teacher-class-page .class-page-header,
.teacher-class-page .class-tabs,
.teacher-class-page .dashboard-header,
.teacher-class-page .grade-filter,
.teacher-class-page .teachers-grid,
.teacher-class-page .quick-links,
.teacher-class-page .card,
.teacher-class-page .grid-2,
.teacher-class-page .gradebook-header,
.teacher-class-page .gradebook-filters,
.teacher-class-page .gradebook-table,
.teacher-class-page .table-container {
    width: 100% !important;
    max-width: none !important;
}
.teacher-class-page .quick-links {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}
.teacher-class-page .teachers-grid {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
}

/* Keep teacher class sidebar open while a class is active */
body.sidebar-class-open .sidebar {
    width: var(--sidebar-expanded-w, 250px) !important;
    box-shadow: 10px 0 30px rgba(0,0,0,.12);
}
body.sidebar-class-open .main-content {
    margin-left: var(--sidebar-expanded-w, 250px) !important;
}
body.sidebar-class-open .sidebar .nav-item span,
body.sidebar-class-open .sidebar .nav-item-signout span,
body.sidebar-class-open .sidebar .nav-section,
body.sidebar-class-open .sidebar .user-info {
    width: auto !important;
    max-width: 170px !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
}
body.sidebar-class-open .sidebar .sidebar-user {
    width: 210px !important;
}
body.sidebar-class-open .sidebar .nav-item-class .class-caret {
    display: inline-flex !important;
    width: auto !important;
    min-width: auto !important;
    margin-left: auto !important;
    opacity: .72 !important;
}
body.sidebar-class-open .sidebar .class-sidebar-subnav {
    display: block !important;
}
body.sidebar-class-open .sidebar .role-switcher-shell {
    display: block;
}

/* ==========================================================
   Classica-style teacher class layout, Saint branded
   Applies only on teacher class pages with an active section.
   ========================================================== */
body.sidebar-class-open {
    --classica-sidebar-w: 252px;
    --classica-content-max: 1400px;
    --classica-green: #183f2c;
    --classica-green-2: #214d34;
    --classica-gold: #e6c566;
    --classica-cream: #fbf9f7;
    background: var(--classica-cream);
}
body.sidebar-class-open .app-layout {
    background: var(--classica-cream);
}
body.sidebar-class-open .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: var(--classica-sidebar-w) !important;
    min-width: var(--classica-sidebar-w) !important;
    max-width: var(--classica-sidebar-w) !important;
    background: var(--classica-green) !important;
    color: rgba(255,255,255,.78) !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transition: none !important;
}
body.sidebar-class-open .main-content {
    margin-left: var(--classica-sidebar-w) !important;
    padding: 2.25rem 3rem 4rem !important;
    min-height: 100vh !important;
    width: calc(100vw - var(--classica-sidebar-w)) !important;
    max-width: none !important;
    align-items: center !important;
    background: var(--classica-cream) !important;
}
body.sidebar-class-open .sidebar-logo {
    min-height: 120px !important;
    padding: 1.6rem 0 1.25rem !important;
}
body.sidebar-class-open .sidebar-logo img {
    width: 82px !important;
    height: auto !important;
}
body.sidebar-class-open .sidebar .nav-section,
body.sidebar-class-open .sidebar .user-info,
body.sidebar-class-open .sidebar .nav-item span,
body.sidebar-class-open .sidebar .nav-item-signout span {
    display: block !important;
    width: auto !important;
    max-width: 170px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}
body.sidebar-class-open .sidebar .nav-section {
    padding: 1rem 1.85rem .65rem !important;
    color: rgba(255,255,255,.42) !important;
    font-size: .72rem !important;
    letter-spacing: .16em !important;
}
body.sidebar-class-open .sidebar-nav {
    padding: .5rem 0 1.25rem !important;
}
body.sidebar-class-open .nav-item {
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 1.65rem !important;
    border-radius: 0 !important;
    color: rgba(255,255,255,.72) !important;
    background: transparent !important;
    gap: .85rem !important;
    font-size: .86rem !important;
}
body.sidebar-class-open .nav-item i[class*="ph-"] {
    width: 22px !important;
    min-width: 22px !important;
    font-size: 1.08rem !important;
    color: rgba(255,255,255,.58) !important;
    opacity: 1 !important;
}
body.sidebar-class-open .nav-item:hover {
    background: rgba(255,255,255,.045) !important;
    color: #fff !important;
}
body.sidebar-class-open .teacher-class-nav {
    margin-top: .55rem !important;
}
body.sidebar-class-open .teacher-class-group.open .nav-item-class {
    background: rgba(230,197,102,.12) !important;
    color: var(--classica-gold) !important;
    border-left: 4px solid var(--classica-gold) !important;
    padding-left: calc(1.65rem - 4px) !important;
}
body.sidebar-class-open .teacher-class-group.open .nav-item-class i,
body.sidebar-class-open .teacher-class-group.open .nav-item-class span {
    color: var(--classica-gold) !important;
}
body.sidebar-class-open .nav-item-class .class-caret {
    display: inline-flex !important;
    margin-left: auto !important;
    width: auto !important;
    min-width: auto !important;
    opacity: .85 !important;
    transform: rotate(-90deg) !important;
}
body.sidebar-class-open .teacher-class-group.open .nav-item-class .class-caret {
    transform: rotate(0deg) !important;
}
body.sidebar-class-open .class-sidebar-subnav {
    display: block !important;
    margin: 0 !important;
    padding: .35rem 0 .7rem 0 !important;
    background: rgba(0,0,0,.08) !important;
}
body.sidebar-class-open .class-sidebar-subnav-item {
    min-height: 36px !important;
    padding: 0 1.65rem 0 2.05rem !important;
    gap: .85rem !important;
    color: rgba(255,255,255,.74) !important;
    font-size: .84rem !important;
    border-radius: 0 !important;
}
body.sidebar-class-open .class-sidebar-subnav-item i {
    width: 22px !important;
    min-width: 22px !important;
    color: rgba(255,255,255,.55) !important;
    font-size: .98rem !important;
}
body.sidebar-class-open .class-sidebar-subnav-item:hover {
    color: #fff !important;
    background: rgba(255,255,255,.045) !important;
}
body.sidebar-class-open .teacher-class-page {
    width: min(100%, var(--classica-content-max)) !important;
    max-width: var(--classica-content-max) !important;
    margin: 0 auto !important;
    gap: 2rem !important;
}
body.sidebar-class-open .teacher-class-page > * {
    width: 100% !important;
    max-width: none !important;
}
body.sidebar-class-open .class-page-header {
    padding: 0 0 1.1rem !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(33,59,45,.14) !important;
    box-shadow: none !important;
}
body.sidebar-class-open .class-kicker {
    color: rgba(33,59,45,.58) !important;
    font-size: .72rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    margin-bottom: .25rem !important;
}
body.sidebar-class-open .class-title {
    font-family: 'Instrument Serif', serif !important;
    color: #173c2b !important;
    font-size: clamp(3rem, 5vw, 4.9rem) !important;
    line-height: .95 !important;
    font-weight: 400 !important;
    letter-spacing: -.035em !important;
}
body.sidebar-class-open .class-meta,
body.sidebar-class-open .class-status-row {
    color: rgba(33,59,45,.62) !important;
}
body.sidebar-class-open .class-tabs {
    margin-top: 1.55rem !important;
    gap: 1.35rem !important;
    border: 0 !important;
}
body.sidebar-class-open .class-tab {
    color: rgba(33,59,45,.66) !important;
    font-size: .83rem !important;
    padding: 0 0 .7rem !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
}
body.sidebar-class-open .class-tab.active {
    color: #173c2b !important;
    border-bottom-color: var(--classica-gold) !important;
}
body.sidebar-class-open .class-tab i {
    color: inherit !important;
}
body.sidebar-class-open .sidebar-footer {
    width: 100% !important;
    padding: 1.1rem 1.35rem !important;
    border-top: 1px solid rgba(255,255,255,.09) !important;
}
body.sidebar-class-open .sidebar-user {
    width: 100% !important;
    color: rgba(255,255,255,.78) !important;
}
body.sidebar-class-open .nav-item-signout {
    justify-content: center !important;
    padding: 0 !important;
    margin-top: .7rem !important;
}

/* Fix: active class pages should still use the collapsible sidebar */
body.sidebar-class-open {
    --classica-sidebar-collapsed-w: 76px;
    --classica-sidebar-w: 252px;
}
body.sidebar-class-open .sidebar {
    width: var(--classica-sidebar-collapsed-w) !important;
    min-width: var(--classica-sidebar-collapsed-w) !important;
    max-width: var(--classica-sidebar-collapsed-w) !important;
    transition: width .22s ease, box-shadow .22s ease !important;
}
body.sidebar-class-open .sidebar:hover,
body.sidebar-class-open .sidebar:focus-within {
    width: var(--classica-sidebar-w) !important;
    min-width: var(--classica-sidebar-w) !important;
    max-width: var(--classica-sidebar-w) !important;
    box-shadow: 10px 0 30px rgba(0,0,0,.14) !important;
}
body.sidebar-class-open .main-content {
    margin-left: var(--classica-sidebar-collapsed-w) !important;
    width: calc(100vw - var(--classica-sidebar-collapsed-w)) !important;
}
body.sidebar-class-open .sidebar:not(:hover):not(:focus-within) .nav-section,
body.sidebar-class-open .sidebar:not(:hover):not(:focus-within) .user-info,
body.sidebar-class-open .sidebar:not(:hover):not(:focus-within) .nav-item span,
body.sidebar-class-open .sidebar:not(:hover):not(:focus-within) .nav-item-signout span,
body.sidebar-class-open .sidebar:not(:hover):not(:focus-within) .class-caret,
body.sidebar-class-open .sidebar:not(:hover):not(:focus-within) .class-sidebar-subnav,
body.sidebar-class-open .sidebar:not(:hover):not(:focus-within) .role-switcher-shell {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    pointer-events: none !important;
}
body.sidebar-class-open .sidebar:not(:hover):not(:focus-within) .nav-item {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left-width: 0 !important;
}
body.sidebar-class-open .sidebar:hover .nav-section,
body.sidebar-class-open .sidebar:focus-within .nav-section,
body.sidebar-class-open .sidebar:hover .user-info,
body.sidebar-class-open .sidebar:focus-within .user-info,
body.sidebar-class-open .sidebar:hover .nav-item span,
body.sidebar-class-open .sidebar:focus-within .nav-item span,
body.sidebar-class-open .sidebar:hover .nav-item-signout span,
body.sidebar-class-open .sidebar:focus-within .nav-item-signout span {
    display: block !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: 170px !important;
    pointer-events: auto !important;
}
body.sidebar-class-open .sidebar:hover .class-caret,
body.sidebar-class-open .sidebar:focus-within .class-caret {
    display: inline-flex !important;
    opacity: .85 !important;
    width: auto !important;
    max-width: none !important;
}
body.sidebar-class-open .sidebar:hover .teacher-class-group.open .class-sidebar-subnav,
body.sidebar-class-open .sidebar:focus-within .teacher-class-group.open .class-sidebar-subnav {
    display: block !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: none !important;
    pointer-events: auto !important;
}

/* Requested class-page sidebar logo size */
body.sidebar-class-open .sidebar-logo img {
    width: 60px !important;
}

/* Smooth active class sidebar collapse/expand */
body.sidebar-class-open .sidebar {
    transition: width .24s cubic-bezier(.22, .61, .36, 1), min-width .24s cubic-bezier(.22, .61, .36, 1), max-width .24s cubic-bezier(.22, .61, .36, 1), box-shadow .24s ease !important;
    will-change: width;
}
body.sidebar-class-open .main-content {
    transition: margin-left .24s cubic-bezier(.22, .61, .36, 1), width .24s cubic-bezier(.22, .61, .36, 1) !important;
}
body.sidebar-class-open .sidebar .nav-item span,
body.sidebar-class-open .sidebar .nav-item-signout span,
body.sidebar-class-open .sidebar .nav-section,
body.sidebar-class-open .sidebar .user-info,
body.sidebar-class-open .sidebar .class-caret,
body.sidebar-class-open .sidebar .class-sidebar-subnav {
    transition: opacity .16s ease .08s, transform .18s ease .06s, max-width .22s ease !important;
}

/* Classica-style sidebar accordion: class click opens subnav in place only while expanded */
.sidebar:hover .teacher-class-group.open .class-sidebar-subnav,
.sidebar:focus-within .teacher-class-group.open .class-sidebar-subnav {
    display: block !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: none !important;
    pointer-events: auto !important;
}
.sidebar:not(:hover):not(:focus-within) .teacher-class-group.open .class-sidebar-subnav,
.sidebar:not(:hover):not(:focus-within).sidebar-accordion-active .teacher-class-group.open .class-sidebar-subnav {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    pointer-events: none !important;
}
.sidebar:hover .teacher-class-group:not(.open) .class-sidebar-subnav,
.sidebar:focus-within .teacher-class-group:not(.open) .class-sidebar-subnav {
    display: none !important;
}
.sidebar:hover .teacher-class-group.open .nav-item-class,
.sidebar:focus-within .teacher-class-group.open .nav-item-class {
    background: rgba(230,197,102,.12) !important;
    color: var(--classica-gold, #e6c566) !important;
}

/* Teacher dashboard: keep one consistent content lane */
.teacher-dashboard-page {
    width: min(100%, 1400px) !important;
    max-width: var(--portal-content-max) !important;
    margin: 0 auto !important;
}
.teacher-dashboard-page > * {
    width: 100% !important;
}
.teacher-dashboard-page .teacher-courses-grid,
.teacher-dashboard-page .grid-2,
.teacher-dashboard-page .dashboard-info-grid {
    width: 100% !important;
}
.teacher-dashboard-page .course-card-with-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: .9rem !important;
}
.teacher-dashboard-page .course-card-main {
    color: inherit !important;
    text-decoration: none !important;
}
.teacher-dashboard-page .course-card-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .55rem !important;
    padding-top: .85rem !important;
    border-top: 1px solid rgba(33, 59, 45, .10) !important;
}
.teacher-dashboard-page .course-card-actions a {
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem !important;
    padding: .42rem .62rem !important;
    border-radius: 999px !important;
    background: rgba(24, 63, 44, .06) !important;
    color: #183f2c !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.teacher-dashboard-page .course-card-actions a:hover {
    background: rgba(230, 197, 102, .22) !important;
}
.teacher-dashboard-page .dashboard-messages-card,
.teacher-dashboard-page .dashboard-calendar-card {
    min-height: 210px !important;
}

/* Fix teacher dashboard content being visually too narrow */
.main-content > .teacher-dashboard-page,
.teacher-dashboard-page {
    align-self: stretch !important;
    width: min(100%, 1400px) !important;
    max-width: var(--portal-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.teacher-dashboard-page .teacher-courses-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: none !important;
}
.teacher-dashboard-page .grid-2,
.teacher-dashboard-page .dashboard-info-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: none !important;
}
.teacher-dashboard-page .card,
.teacher-dashboard-page .course-card {
    width: 100% !important;
    max-width: none !important;
}
@media (max-width: 1200px) {
    .teacher-dashboard-page .teacher-courses-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
    .teacher-dashboard-page .teacher-courses-grid,
    .teacher-dashboard-page .grid-2,
    .teacher-dashboard-page .dashboard-info-grid { grid-template-columns: 1fr !important; }
}

/* Standardized wide portal content lane */
:root { --portal-content-max: none; }
.main-content {
    align-items: stretch !important;
}
.main-content > :not(script):not(style),
.class-page-header,
.page-header,
.dashboard-header,
.dashboard-content,
.content,
.grade-filter,
.house-filter,
.filter-row,
.teachers-grid,
.teacher-students-grid,
.students-modern,
.students-grid,
.assignments-grid,
.assignments-list,
.assignment-list,
.stats-grid,
.stats-row,
.grid-2,
.card-grid,
.quick-links,
.class-tabs,
.card,
.table-container,
.data-table,
.admin-table,
.form-container,
.settings-card,
.billing-card,
.parent-dashboard-section,
.teacher-dashboard-section {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
}

/* Saints Students page */
.students-modern {
	--saints-green: #183f2e;
	--saints-green-2: #285640;
	--saints-gold: #efe2bd;
	--saints-cream: #faf8f2;
	--saints-ink: #14221b;
	--saints-muted: #6d746f;
	--saints-line: #eee7db;
	font-family: 'Archivo', 'Source Sans Pro', system-ui, sans-serif;
	color: var(--saints-ink);
}
.students-modern a { color: inherit; }
.students-page-head {
	margin-bottom: 2rem !important;
}
.students-page-head h1 {
	font-family: 'Instrument Serif', 'Crimson Text', serif;
	font-size: clamp(2.5rem, 5vw, 4.15rem);
	font-weight: 400;
	line-height: .95;
	letter-spacing: -.04em;
	margin: 0 0 1rem;
	color: #17251d;
}
.students-breadcrumb {
	height: 18px;
	border-radius: 999px;
	background: #fbf1dd;
	color: #9d7b3b;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	padding: 0 .7rem;
	max-width: 100%;
}
.students-topline {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 1.35rem;
}
.students-actions {
	display: flex;
	gap: .65rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.students-btn {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	border: 1px solid var(--saints-line);
	background: white;
	color: #24372d;
	border-radius: 12px;
	padding: .75rem 1rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	box-shadow: 0 12px 30px rgba(30, 45, 36, .04);
}
.students-btn.primary {
	background: var(--saints-green);
	border-color: var(--saints-green);
	color: white;
}
.students-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}
.students-stat-card,
.students-panel,
.students-roster {
	background: rgba(255,255,255,.92);
	border: 1px solid rgba(238,231,219,.78);
	border-radius: 16px;
	box-shadow: 0 18px 45px rgba(29, 43, 35, .055);
}
.students-stat-card { padding: 1.2rem 1.35rem; min-height: 112px; }
.students-stat-card .kicker {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #535d57;
	margin-bottom: .75rem;
}
.students-stat-card .value {
	font-size: 2.35rem;
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: 1;
}
.students-stat-card .note { color: var(--saints-muted); font-size: .78rem; margin-top: .6rem; }
.students-panels { display: block; margin-bottom: 1.2rem; }
.students-panel { padding: 1.15rem; }
.students-panel h2 {
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0 0 .85rem;
	color: #34443a;
}
.students-filter-group { margin-bottom: 1rem; }
.students-filter-group:last-child { margin-bottom: 0; }
.students-filter-label { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #7b817d; margin-bottom: .55rem; }
.students-chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.students-chip-row.grade-row { flex-wrap: nowrap; align-items: center; gap: .28rem; }
.students-chip-row.grade-row .students-chip { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; padding-left: .38rem; padding-right: .38rem; font-size: .62rem; }
.students-chip.house-chip { display: inline-flex; align-items: center; gap: .38rem; padding-left: .45rem; }
.house-chip-logo { width: 22px; height: 22px; border-radius: 999px; object-fit: contain; background: #fff; border: 1px solid rgba(87,61,41,.12); }
.students-chip {
	border: 1px solid #e5ddd0;
	background: #fffdfa;
	border-radius: 999px;
	padding: .42rem .72rem;
	font-size: .73rem;
	font-weight: 700;
	color: #34443a;
	text-decoration: none;
}
.students-chip.active {
	background: var(--saints-green);
	border-color: var(--saints-green);
	color: white;
}
.students-chip.blue.active { background: #285f96; border-color: #285f96; }
.students-chip.purple.active { background: #6d4aa5; border-color: #6d4aa5; }
.students-search {
	position: relative;
	margin: 0 0 .8rem;
}
.students-search input {
	width: 100%;
	border: 1px solid #e8e0d4;
	border-radius: 14px;
	background: #fffdfa;
	padding: .9rem 1rem .9rem 2.45rem;
	font: inherit;
	font-weight: 600;
	outline: none;
}
.students-search i { position: absolute; top: 50%; left: .95rem; transform: translateY(-50%); color: #8b928d; }
.students-roster { overflow: hidden; }
.students-roster-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.15rem;
	border-bottom: 1px solid var(--saints-line);
}
.students-roster-head h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.students-roster-head span { color: var(--saints-muted); font-size: .8rem; }
.students-table-modern { width: 100%; border-collapse: collapse; }
.students-table-modern th {
	text-align: left;
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #858b87;
	font-weight: 800;
	padding: .85rem 1.15rem;
	background: #fffdfa;
	border-bottom: 1px solid var(--saints-line);
}
.students-table-modern td {
	padding: .95rem 1.15rem;
	border-bottom: 1px solid #f2ece3;
	vertical-align: middle;
	font-size: .86rem;
}
.students-table-modern tr:hover td { background: #fffdf8; }
.student-person { display: flex; align-items: center; gap: .75rem; }
.student-avatar {
	width: 36px; height: 36px; border-radius: 999px;
	background: #737a74; color: white;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: .72rem; font-weight: 800; letter-spacing: .04em;
	flex: 0 0 auto;
	overflow: hidden;
}
.student-avatar.has-photo { background: #f5efe3; }
.student-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.student-name-line { font-weight: 800; color: #1c2b22; }
.student-name-line a,
.student-compact-main h3 a { color: inherit; text-decoration: none; }
.student-name-line a:hover,
.student-compact-main h3 a:hover { color: #8a6a22; text-decoration: underline; text-underline-offset: 3px; }
.student-sub-line { color: var(--saints-muted); font-size: .74rem; margin-top: .1rem; }
.student-pill {
	display: inline-flex; align-items: center;
	border-radius: 999px;
	background: #f5efe3;
	color: #4f594f;
	padding: .24rem .52rem;
	font-size: .7rem; font-weight: 800;
}
.student-pill.house { background: #edf4ee; }
.student-pill.enrich { background: #f0eafa; color: #654696; }
.student-row-actions { display: flex; gap: .4rem; justify-content: flex-end; }
.student-row-actions a {
	border: 1px solid #e5ddd0;
	border-radius: 10px;
	padding: .42rem .62rem;
	font-size: .72rem;
	font-weight: 800;
	text-decoration: none;
	background: white;
	white-space: nowrap;
}
.empty-state-modern { padding: 2.5rem; text-align: center; color: var(--saints-muted); }
.success-message, .error-message {
	border-radius: 14px;
	padding: .9rem 1rem;
	margin-bottom: 1rem;
	font-weight: 700;
}
.success-message { background: #ecf7ef; color: #245a35; border: 1px solid #cfe8d5; }
.error-message { background: #fff0ed; color: #93402f; border: 1px solid #f1c9c0; }
@media (max-width: 1100px) {
	.students-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.students-panels { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.students-topline { flex-direction: column; }
	.students-actions { justify-content: flex-start; }
	.students-stats { grid-template-columns: 1fr; }
	.students-table-modern thead { display: none; }
	.students-table-modern tr { display: block; padding: .8rem 1rem; border-bottom: 1px solid var(--saints-line); }
	.students-table-modern td { display: block; border: 0; padding: .35rem 0; }
	.student-row-actions { justify-content: flex-start; }
}
.students-actions-col { text-align: right; }

/* Classica-style portal structure: shared content fills the main area */
.main-content {
    display: block !important;
    align-items: initial !important;
    padding: 2rem 2.5rem !important;
}
.main-content > .content,
.main-content > .page-header,
.main-content > .stats-grid,
.main-content > .quick-links,
.main-content > .grid-2,
.main-content > .card,
.main-content > .students-modern,
.main-content > .admin-dashboard-wide {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}
.main-content > style,
.main-content > script {
    width: auto !important;
    max-width: none !important;
}
@media (max-width: 768px) {
    .main-content { padding: 1.5rem !important; }
}
@media (max-width: 480px) {
    .main-content { padding: 1rem !important; }
}

/* Admin Dashboard: Classica-style full-width page structure */
.main-content > .admin-dashboard-section {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}
.admin-dashboard-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
}
.admin-dashboard-links {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: .75rem !important;
}
.admin-dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
}
@media (max-width: 1100px) {
    .admin-dashboard-stats,
    .admin-dashboard-links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
    .admin-dashboard-stats,
    .admin-dashboard-links,
    .admin-dashboard-grid { grid-template-columns: 1fr !important; }
}

/* Students: Classica-style full-width page structure */
.main-content > .students-modern {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
.students-modern > .students-page-head,
.students-modern > .students-stats,
.students-modern > .students-panels,
.students-modern > .students-search,
.students-modern > .students-roster {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Saints Portal shell contract: Classica-style fluid content with overlay sidebar */
:root {
    --saints-sidebar-collapsed-w: 76px;
    --saints-sidebar-expanded-w: 250px;
    --saints-content-x: clamp(1.5rem, 2.4vw, 2.5rem);
}
.app-layout {
    display: flex !important;
    min-height: 100vh !important;
}
.app-layout > .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--saints-sidebar-collapsed-w) !important;
    z-index: 300 !important;
}
.app-layout > .sidebar:hover,
.app-layout > .sidebar:focus-within {
    width: var(--saints-sidebar-expanded-w) !important;
}
.app-layout > .main-content,
.main-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: calc(100vw - var(--saints-sidebar-collapsed-w)) !important;
    max-width: none !important;
    margin-left: var(--saints-sidebar-collapsed-w) !important;
    padding: 2rem var(--saints-content-x) !important;
    display: block !important;
    align-items: initial !important;
    box-sizing: border-box !important;
}
.app-layout > .sidebar:hover ~ .main-content,
.app-layout > .sidebar:focus-within ~ .main-content {
    margin-left: var(--saints-sidebar-collapsed-w) !important;
    width: calc(100vw - var(--saints-sidebar-collapsed-w)) !important;
}
.main-content > :where(.page-header, .class-page-header, .stats-grid, .grid-2, .grid-3, .quick-links, .dashboard-header, .dashboard-content, .content, .card, section, form, .students-modern, .admin-dashboard-section, .families-grid, .families-list, .filter-bar, .layout-controls) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}
@media (max-width: 768px) {
    :root { --saints-content-x: .95rem; }
    .app-layout > .main-content,
    .main-content,
    .app-layout > .sidebar:hover ~ .main-content,
    .app-layout > .sidebar:focus-within ~ .main-content {
        width: 100vw !important;
        margin-left: 0 !important;
        padding: 1rem var(--saints-content-x) calc(5.75rem + env(safe-area-inset-bottom)) !important;
    }
}

/* Saints Portal buttons: refined dashboard actions from public styleguide */
:root {
    --saints-ui-font: 'Archivo', 'Instrument Sans', sans-serif;
    --saints-btn-border: rgba(33, 59, 45, .18);
    --saints-btn-border-hover: rgba(33, 59, 45, .34);
    --saints-btn-bg: rgba(255, 255, 255, .72);
    --saints-btn-bg-hover: rgba(242, 255, 248, .95);
}
.btn-primary,
.btn-secondary,
.btn-danger,
.students-btn,
.quick-link,
.action-buttons a,
.action-buttons button,
.teacher-stats a,
.teacher-stats button,
.form-actions button,
.form-actions a {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .45rem !important;
    border-radius: 999px !important;
    font-family: var(--saints-ui-font) !important;
    font-size: .86rem !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: .015em !important;
    text-transform: none !important;
    text-decoration: none !important;
    padding: .68rem 1.05rem !important;
    box-shadow: none !important;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}
.btn-secondary,
.students-btn,
.quick-link,
.teacher-stats a,
.teacher-stats button,
.action-buttons a.btn-secondary,
.action-buttons button.btn-secondary {
    color: var(--school-primary, #213b2d) !important;
    background: var(--saints-btn-bg) !important;
    border: 1px solid var(--saints-btn-border) !important;
}
.btn-secondary:hover,
.students-btn:hover,
.quick-link:hover,
.teacher-stats a:hover,
.teacher-stats button:hover,
.action-buttons a.btn-secondary:hover,
.action-buttons button.btn-secondary:hover {
    color: var(--school-primary, #213b2d) !important;
    background: var(--saints-btn-bg-hover) !important;
    border-color: var(--saints-btn-border-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 22px rgba(33, 59, 45, .07) !important;
}
.btn-primary,
.students-btn.primary,
.form-actions button[type="submit"] {
    color: #fff !important;
    background: var(--school-primary, #213b2d) !important;
    border: 1px solid var(--school-primary, #213b2d) !important;
}
.btn-primary:hover,
.students-btn.primary:hover,
.form-actions button[type="submit"]:hover {
    color: #fff !important;
    background: #355946 !important;
    border-color: #355946 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 26px rgba(33, 59, 45, .12) !important;
}
.btn-danger {
    color: #9f2f18 !important;
    background: rgba(204, 82, 47, .08) !important;
    border: 1px solid rgba(204, 82, 47, .22) !important;
}
.btn-danger:hover {
    color: #fff !important;
    background: #cc522f !important;
    border-color: #cc522f !important;
}
.teacher-stats {
    gap: .65rem !important;
}
.teacher-stats .btn-secondary,
.teacher-stats button.btn-secondary {
    min-width: 0 !important;
    padding-inline: 1.15rem !important;
}

/* Students roster views: rows + compact cards */
.students-roster-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .8rem;
    flex-wrap: wrap;
}
.students-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .22rem;
    border: 1px solid rgba(33, 59, 45, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
}
.students-view-btn {
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #5d6a62;
    cursor: pointer;
    font-family: var(--saints-ui-font, 'Instrument Sans', sans-serif);
    font-size: .78rem;
    font-weight: 800;
    padding: .45rem .8rem;
}
.students-view-btn.active {
    background: var(--school-primary, #213b2d);
    color: #fff;
}
.students-cards-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .85rem;
    padding: 1rem;
}
.students-roster[data-view="rows"] .students-cards-modern,
.students-roster[data-view="cards"] .students-table-modern {
    display: none !important;
}
.student-row.is-hidden,
.student-compact-card.is-hidden {
    display: none !important;
}
.student-compact-card {
    display: grid;
    gap: .85rem;
    align-content: space-between;
    min-height: 170px;
    border: 1px solid rgba(33, 59, 45, .10);
    border-radius: 18px;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 12px 30px rgba(33, 59, 45, .035);
}
.student-compact-main {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
}
.student-compact-main h3 {
    margin: 0;
    font-family: var(--saints-ui-font, 'Instrument Sans', sans-serif);
    font-size: 1rem;
    font-weight: 800;
    color: var(--school-primary, #213b2d);
}
.student-compact-main p {
    margin: .18rem 0 0;
    color: var(--saints-muted, #6f776d);
    font-size: .82rem;
}
.student-compact-meta {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}
@media (max-width: 760px) {
    .students-roster-head,
    .students-roster-tools {
        align-items: flex-start;
        justify-content: flex-start;
    }
    .students-cards-modern { grid-template-columns: 1fr; padding: .8rem; }
}

/* Class assignments: simpler class setup flow */
.current-classes,
.add-class-section {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 1.25rem !important;
    border: 1px solid rgba(33, 59, 45, .10) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: 0 16px 42px rgba(33, 59, 45, .045) !important;
    padding: 1.25rem !important;
}
.current-classes h2,
.add-class-section h2 {
    margin: 0 0 1rem !important;
    font-family: 'Instrument Serif', serif !important;
    font-size: clamp(1.8rem, 3vw, 2.45rem) !important;
    font-weight: 400 !important;
    letter-spacing: -.03em !important;
    color: var(--school-primary, #213b2d) !important;
}
.classes-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: .9rem !important;
}
.class-item {
    border: 1px solid rgba(33, 59, 45, .10) !important;
    border-radius: 18px !important;
    background: #fff !important;
    padding: 1rem !important;
    display: flex !important;
    gap: 1rem !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
}
.class-info h3 { margin: 0 0 .55rem !important; font-family: var(--saints-ui-font, 'Instrument Sans', sans-serif) !important; font-size: 1.02rem !important; font-weight: 800 !important; color: var(--school-primary, #213b2d) !important; }
.class-details { display: flex !important; flex-wrap: wrap !important; gap: .4rem !important; align-items: center !important; }
.subject-tag,
.grades-tag,
.enrollment-tag {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    border-radius: 999px !important;
    padding: .28rem .65rem !important;
    font-size: .74rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}
.subject-tag { color: #fff !important; }
.grades-tag,
.enrollment-tag { color: #213b2d !important; background: rgba(242, 255, 248, .95) !important; border: 1px solid rgba(33, 59, 45, .10) !important; }
.class-curriculum,
.class-description { margin: .7rem 0 0 !important; color: #5d6a62 !important; font-size: .9rem !important; line-height: 1.5 !important; }
.form-header { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 1rem !important; margin-bottom: 1rem !important; }
.add-class-form { display: grid !important; gap: 1rem !important; }
.add-class-form .form-row { display: grid !important; grid-template-columns: minmax(260px, .8fr) minmax(300px, 1.2fr) !important; gap: 1rem !important; align-items: start !important; }
.add-class-form label { color: var(--school-primary, #213b2d) !important; font-family: var(--saints-ui-font, 'Instrument Sans', sans-serif) !important; font-size: .8rem !important; font-weight: 800 !important; letter-spacing: .04em !important; text-transform: uppercase !important; }
.optional-label { color: #7a877f !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; }
.add-class-form input[type="text"],
.add-class-form textarea {
    width: 100% !important;
    border: 1px solid rgba(33, 59, 45, .16) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #213b2d !important;
    font: 500 .95rem/1.4 var(--saints-ui-font, 'Instrument Sans', sans-serif) !important;
    padding: .78rem .9rem !important;
}
.grade-checkboxes,
.subject-radios { display: flex !important; flex-wrap: wrap !important; gap: .45rem !important; }
.checkbox-label,
.radio-label { cursor: pointer !important; }
.checkbox-label input,
.radio-label input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; }
.checkbox-label span,
.subject-option {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(33, 59, 45, .14) !important;
    background: #fff !important;
    color: #213b2d !important;
    padding: .45rem .78rem !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}
.checkbox-label input:checked + span,
.radio-label input:checked + .subject-option {
    background: var(--school-primary, #213b2d) !important;
    border-color: var(--school-primary, #213b2d) !important;
    color: #fff !important;
}
.class-actions { display: flex !important; align-items: center !important; gap: .4rem !important; }
.btn-edit,
.btn-delete {
    border-radius: 999px !important;
    border: 1px solid rgba(33, 59, 45, .14) !important;
    background: #fff !important;
    color: #213b2d !important;
    min-height: 34px !important;
    padding: .42rem .72rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}
.btn-delete { color: #9f2f18 !important; border-color: rgba(204, 82, 47, .2) !important; }
@media (max-width: 900px) {
    .add-class-form .form-row { grid-template-columns: 1fr !important; }
    .class-item { flex-direction: column !important; }
}

/* Class assignments: small outlined subject chips with Saints palette */
.subject-radios {
    gap: .38rem !important;
}
.subject-option,
.subject-tag {
    --subject-color: var(--school-primary, #213b2d);
    background: color-mix(in srgb, var(--subject-color) 8%, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--subject-color) 42%, transparent) !important;
    color: var(--subject-color) !important;
    min-height: 30px !important;
    padding: .36rem .62rem !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .34rem !important;
    font-family: var(--saints-ui-font, 'Instrument Sans', sans-serif) !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
.subject-option i,
.subject-tag i {
    width: 16px !important;
    height: 16px !important;
    border: 1px solid color-mix(in srgb, var(--subject-color) 36%, transparent) !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .68rem !important;
    line-height: 1 !important;
    color: var(--subject-color) !important;
    background: rgba(255, 255, 255, .72) !important;
}
.radio-label input:checked + .subject-option {
    background: var(--subject-color) !important;
    border-color: var(--subject-color) !important;
    color: #fff !important;
}
.radio-label input:checked + .subject-option i {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .42) !important;
    background: rgba(255, 255, 255, .12) !important;
}
.class-details .subject-tag {
    font-size: .72rem !important;
}

/* Class assignments: Grade Levels and Subject columns should be equal width */
.add-class-form .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.grade-group,
.subject-group {
    min-width: 0 !important;
}
.grade-checkboxes,
.subject-radios {
    width: 100% !important;
    box-sizing: border-box !important;
}
@media (max-width: 900px) {
    .add-class-form .form-row {
        grid-template-columns: 1fr !important;
    }
}

/* Teachers page: compact class assignment subject chips */
.teacher-classes .class-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .42rem !important;
    align-items: center !important;
}
.teacher-classes .class-tag.subject-chip {
    --subject-color: var(--school-primary, #213b2d);
    display: inline-flex !important;
    align-items: center !important;
    gap: .34rem !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 30px !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--subject-color) 42%, transparent) !important;
    background: color-mix(in srgb, var(--subject-color) 8%, #fff) !important;
    color: var(--subject-color) !important;
    padding: .35rem .62rem !important;
    font-family: var(--saints-ui-font, 'Instrument Sans', sans-serif) !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-transform: none !important;
}
.teacher-classes .class-tag.subject-chip i {
    width: 16px !important;
    height: 16px !important;
    border: 1px solid color-mix(in srgb, var(--subject-color) 36%, transparent) !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .68rem !important;
    line-height: 1 !important;
    color: var(--subject-color) !important;
    background: rgba(255, 255, 255, .72) !important;
    flex: 0 0 auto !important;
}
.teacher-classes .class-tag.subject-chip span {
    color: inherit !important;
    white-space: nowrap !important;
}
.teacher-classes .class-tag.subject-chip em {
    color: color-mix(in srgb, var(--subject-color) 72%, #6f776d) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    opacity: .72 !important;
    white-space: nowrap !important;
}
.teacher-classes .class-tag.subject-chip small {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--subject-color) 14%, #fff) !important;
    color: var(--subject-color) !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
    opacity: 1 !important;
}
.teacher-actions .btn-small[href*="teacher-class-access.php"] {
    display: none !important;
}

/* Teachers page: photo modal trigger and compact card cleanup */
.teacher-photo-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 50%;
}
.teacher-photo-wrap:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}
.teacher-name {
    font-size: 24px;
}
.teacher-classes {
    margin-top: 0;
}

/* Teachers page: compact action buttons and edit modal */
.btn-small {
    line-height: 12px;
    background: white;
    border: 1px solid #aaa;
    padding: 5px 10px;
}
button.btn-small.danger {
    color: #cc522f;
    border: 1px solid #cc522f;
    line-height: 12px;
}
.teacher-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}
.edit-class-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.35rem 0 0.65rem;
}
.class-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #ddd;
    border-radius: 999px;
    padding: 5px 10px;
    background: #fafafa;
    font-size: 0.85rem;
    font-weight: 700;
}
.class-pill small,
.muted {
    color: #666;
    font-weight: 500;
}

/* Keep teacher profile photos perfectly square/circular */
.teacher-photo-wrap,
.teacher-photo-wrap .teacher-photo,
.teacher-photo-wrap .teacher-photo.placeholder,
.teacher-header > .teacher-photo,
.teacher-header > .teacher-photo.placeholder {
    aspect-ratio: 1 / 1;
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
    max-width: 80px;
    max-height: 80px;
    border-radius: 50%;
}
.teacher-photo-wrap .teacher-photo,
.teacher-header > .teacher-photo {
    display: block;
    object-fit: cover;
}

/* Teacher class chips link to the class detail page */
a.class-tag {
    text-decoration: none;
    cursor: pointer;
}
a.class-tag:hover {
    filter: brightness(0.96);
}

/* Saint class card refinements */
.class-card-header {
	align-items: flex-start !important;
	gap: 1rem;
}

.class-card-title,
.class-card-title a,
.assignment-title-row.class-card-title,
.assignment-title-compact.class-card-title {
	font-family: 'Instrument Sans', sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: -0.02em;
}

.class-card-meta-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .45rem;
	text-align: right;
	margin-left: auto;
	min-width: max-content;
}

.class-subject-pill {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	width: fit-content;
	border-radius: 999px;
	background: color-mix(in srgb, var(--subject-color, #355946) 13%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--subject-color, #355946) 32%, #ffffff);
	color: var(--subject-color, #355946);
	font-family: 'Instrument Sans', sans-serif;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1;
	padding: .38rem .65rem;
}

.class-subject-pill i {
	font-size: .95rem;
	line-height: 1;
}

.class-card-actions {
	align-items: center;
	justify-content: space-between;
	gap: .85rem;
}

.btn-answer-keys,
.btn-edit-class {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	min-height: 44px;
	padding: 0 1.15rem !important;
	border-radius: 999px !important;
	font-family: 'Instrument Sans', sans-serif;
	font-size: .95rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.btn-answer-keys {
	background: #f39c12 !important;
	border: 1px solid #d8870d !important;
	color: #fff !important;
}

.btn-edit-class {
	background: #fff !important;
	border: 1px solid #e1d8c8 !important;
	color: #213b2d !important;
	box-shadow: 0 8px 20px rgba(33, 59, 45, .06);
}

.btn-edit-class:hover {
	background: #fbfaf6 !important;
	color: #213b2d !important;
}

/* Saint correction: compact class-card controls */
.assignment-card .class-card-title,
.assignment-card .class-card-title a,
.assignment-card-compact .class-card-title,
.assignment-row .class-card-title {
	font-family: 'Instrument Sans', sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: -0.015em !important;
}

.assignment-card .class-subject-pill,
.assignment-card-compact .class-subject-pill,
.assignment-row .class-subject-pill {
	border-radius: 9px !important;
	padding: .28rem .5rem !important;
	font-size: .72rem !important;
	font-weight: 700 !important;
	gap: .25rem !important;
}

.assignment-card .class-subject-pill i,
.assignment-card-compact .class-subject-pill i,
.assignment-row .class-subject-pill i {
	display: inline-flex !important;
	font-size: .78rem !important;
	width: .85rem;
	justify-content: center;
}

.assignment-card .btn-answer-keys,
.assignment-card .btn-edit-class,
.assignment-card-compact .btn-answer-keys,
.assignment-card-compact .btn-edit-class,
.assignment-row .btn-answer-keys,
.assignment-row .btn-edit-class {
	min-height: 32px !important;
	height: 32px !important;
	padding: 0 .78rem !important;
	border-radius: 10px !important;
	font-size: .82rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	box-shadow: none !important;
}

.assignment-card .btn-answer-keys i,
.assignment-card-compact .btn-answer-keys i,
.assignment-row .btn-answer-keys i {
	font-size: .86rem !important;
}

/* Saint correction: requested compact Keys/Edit dimensions */
.assignment-card .btn-answer-keys,
.assignment-card .btn-edit-class,
.assignment-card-compact .btn-answer-keys,
.assignment-card-compact .btn-edit-class,
.assignment-row .btn-answer-keys,
.assignment-row .btn-edit-class {
	min-height: 25px !important;
	height: 25px !important;
	border-radius: 5px !important;
}

/* Saint correction: requested Keys/Edit font size */
.assignment-card .btn-answer-keys,
.assignment-card .btn-edit-class,
.assignment-card-compact .btn-answer-keys,
.assignment-card-compact .btn-edit-class,
.assignment-row .btn-answer-keys,
.assignment-row .btn-edit-class {
	font-size: 12px !important;
}


/* Saint correction: New Class button styling */
.btn-new-assignment {
	text-transform: none !important;
	border-radius: 999px !important;
	font-size: 13px !important;
}

/* Saint fix: keep Add Class modal usable on shorter screens */
#addModal.modal {
	overflow-y: auto;
	padding: 20px 12px;
}

#addModal .modal-content {
	margin: 0 auto !important;
	max-height: calc(100vh - 40px) !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
}

@media (max-height: 760px) {
	#addModal.modal {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	#addModal .modal-content {
		max-height: calc(100vh - 20px) !important;
	}
}

/* Saint fix: match Classes header action button typography */
.page-header .btn-secondary,
.page-header .btn-new-assignment {
	font-family: 'Instrument Sans', sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* Saint fix: flatten top filter bar */
.top-filter-bar {
	background: transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
	border: 0 !important;
}


/* Saint fix: align Classes header actions with title */
.page-header {
	align-items: flex-start !important;
}

.page-header > div:last-child {
	align-items: center !important;
	padding-top: .35rem;
}


/* Saint fix: align Classes filter search with first card */
body:has(#grid-layout.assignments-grid) .top-filter-bar > .px-4 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Saint profile refresh: admin student detail */
.student-profile-page {
	max-width: 1280px;
}

.student-profile-hero {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 28px;
	padding: 28px 32px;
	margin-bottom: 28px;
	border: 1px solid rgba(33, 59, 45, .12);
	border-left: 8px solid var(--student-house-color, var(--classica-gold, #d9b66f));
	border-radius: 18px;
	background:
		linear-gradient(135deg, rgba(255,255,255,.95), rgba(251,248,236,.92)),
		linear-gradient(135deg, var(--student-house-color, #d9b66f), #f4ead0);
	box-shadow: 0 16px 40px rgba(33, 59, 45, .10);
	overflow: hidden;
}

.student-profile-hero::after {
	content: '';
	position: absolute;
	right: -90px;
	top: -120px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--student-house-color, #d9b66f) 30%, transparent);
	pointer-events: none;
}

.student-profile-main,
.student-profile-side {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 20px;
}

.student-profile-avatar {
	width: 118px;
	height: 118px;
	border-radius: 999px;
	background: var(--dark-green, #213b2d);
	border: 5px solid #fff;
	box-shadow: 0 12px 30px rgba(33, 59, 45, .18);
	overflow: hidden;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.student-profile-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.student-profile-avatar span {
	font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
	font-size: 42px;
	color: #fff;
}

.student-profile-kicker {
	margin: 0 0 4px;
	font-family: var(--font-sans, 'Instrument Sans', sans-serif);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--student-house-color, #a88424);
}

.student-profile-copy h1 {
	margin: 0;
	font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
	font-size: clamp(34px, 4vw, 56px);
	font-weight: 400;
	line-height: .96;
	color: var(--dark-green, #213b2d);
}

.student-profile-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.student-profile-meta span,
.student-profile-house {
	border: 1px solid rgba(33, 59, 45, .12);
	border-radius: 999px;
	background: rgba(255,255,255,.78);
	padding: 7px 12px;
	font-family: var(--font-sans, 'Instrument Sans', sans-serif);
	font-size: 13px;
	font-weight: 700;
	color: var(--dark-green, #213b2d);
}

.student-profile-side {
	justify-content: flex-end;
	flex-wrap: wrap;
	max-width: 360px;
}

.student-profile-house-seal-frame {
	width: 64px;
	height: 64px;
	border: 2px solid var(--student-house-color, #d9b66f);
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	box-shadow: 0 10px 18px rgba(33,59,45,.14);
}

.student-profile-house-seal {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(2.35);
	transform-origin: center;
}

.student-profile-house {
	border-radius: 14px;
	padding: 10px 14px;
	background: #fff;
	min-width: 140px;
}

.student-profile-house span {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: #6f786f;
}

.student-profile-house strong {
	display: block;
	font-size: 15px;
	color: var(--dark-green, #213b2d);
}

.student-profile-back {
	border-radius: 999px !important;
	font-size: 12px !important;
	white-space: nowrap;
}

.student-profile-page .tabs {
	gap: 8px;
	border-bottom: 1px solid #e5e0d4;
	margin-bottom: 22px;
}

.student-profile-page .tab {
	border: 1px solid #e5e0d4;
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	background: #fff;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 700;
	text-transform: none;
}

.student-profile-page .tab.active {
	background: var(--classica-gold, #d9b66f);
	border-color: var(--classica-gold, #d9b66f);
	color: var(--dark-green, #213b2d);
}

.student-profile-page .form-section {
	border: 1px solid #ece6d8;
	border-radius: 16px;
	box-shadow: 0 10px 26px rgba(33, 59, 45, .06);
}

.student-profile-page .classes-grid {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

.student-profile-page .class-card {
	padding: 14px;
	border-radius: 14px;
	border-color: #e4dfd2;
	box-shadow: none;
}

.student-profile-page .class-card.enrolled {
	border-color: var(--classica-gold, #d9b66f);
	background: #fffaf0;
}

.student-profile-page .class-card label {
	align-items: flex-start;
	gap: 10px;
}

.student-profile-page .class-card input[type="checkbox"] {
	margin-top: 3px;
	accent-color: var(--dark-green, #213b2d);
}

.student-profile-page .classes-grid .class-title {
	font-family: var(--font-sans, 'Instrument Sans', sans-serif) !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.18 !important;
	color: var(--dark-green, #213b2d) !important;
	letter-spacing: 0 !important;
}

.student-profile-page .class-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.student-profile-page .class-meta-row span {
	border-radius: 999px;
	background: #f1eee5;
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 700;
	color: #516154;
}

.student-profile-page .class-teacher {
	margin-top: 8px;
	font-size: 12px !important;
	line-height: 1.3;
	color: #657067;
}

@media (max-width: 820px) {
	.student-profile-hero,
	.student-profile-main,
	.student-profile-side {
		align-items: flex-start;
		flex-direction: column;
	}

	.student-profile-side {
		max-width: none;
		width: 100%;
	}
}

/* Saint refresh: Students stat/filter controls */
.students-stat-card { min-height: 92px; }
.students-stat-card .note { display: none !important; }
.students-filter-panel { padding: 1rem 1.15rem; }
.students-filter-bar {
	display: flex;
	align-items: flex-end;
	gap: .85rem;
	width: 100%;
}
.students-select-filter {
	flex: 0 0 190px;
	min-width: 170px;
}
.students-select-filter label,
.students-filter-houses > .students-filter-label {
	display: block;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #7b817d;
	margin-bottom: .42rem;
}
.students-select-filter select {
	width: 100%;
	height: 38px;
	border: 1px solid #e5ddd0;
	border-radius: 999px;
	background: #fffdfa;
	padding: 0 2rem 0 .85rem;
	font-family: var(--font-sans, 'Instrument Sans', sans-serif);
	font-size: .78rem;
	font-weight: 750;
	color: #34443a;
	outline: none;
}
.students-select-filter select:focus {
	border-color: var(--saints-green, #213b2d);
	box-shadow: 0 0 0 3px rgba(33,59,45,.08);
}
.students-filter-houses {
	flex: 1 1 auto;
	min-width: 360px;
}
.students-filter-houses .students-chip-row {
	align-items: center;
	gap: .38rem;
}
.students-filter-houses .students-chip {
	padding-top: .38rem;
	padding-bottom: .38rem;
	font-size: .7rem;
}

@media (max-width: 1180px) {
	.students-filter-bar { align-items: stretch; flex-wrap: wrap; }
	.students-select-filter { flex: 1 1 210px; }
	.students-filter-houses { flex: 1 1 100%; min-width: 0; }
}

@media (max-width: 640px) {
	.students-select-filter { flex-basis: 100%; }
	.students-filter-houses .students-chip-row { gap: .32rem; }
}

/* Saint correction: class card title/header alignment */
.assignment-card .class-card-title,
.assignment-card .class-card-title a,
.assignment-card-compact .class-card-title,
.assignment-row .class-card-title {
	font-family: "Instrument Serif", Georgia, serif !important;
}

.class-card-header {
	align-items: center !important;
}

/* Saint fix: keep teacher edit modal usable on shorter screens */
#editModal.modal {
	overflow-y: auto;
	padding: 20px 12px;
}

#editModal .modal-content {
	margin: 0 auto !important;
	max-height: calc(100vh - 40px) !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
}

@media (max-height: 760px) {
	#editModal.modal {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	#editModal .modal-content {
		max-height: calc(100vh - 20px) !important;
	}
}

/* Saint correction: active subject colors for teacher modal class pills */
.edit-class-list .class-pill.subject-chip {
	border-color: color-mix(in srgb, var(--subject-color, #213b2d) 42%, transparent) !important;
	background: color-mix(in srgb, var(--subject-color, #213b2d) 9%, #fff) !important;
	color: var(--subject-color, #213b2d) !important;
	text-decoration: none;
}

.edit-class-list .class-pill.subject-chip small {
	color: color-mix(in srgb, var(--subject-color, #213b2d) 72%, #6f776d) !important;
}

/* Saint refresh: parent assignment detail */
.parent-assignment-detail-page {
	width: min(100%, 1180px) !important;
	max-width: 1180px !important;
	padding-top: clamp(1.1rem, 2vw, 2rem) !important;
	color: var(--dark-green, #213b2d);
}

.parent-assignment-detail-page .assignment-detail-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
	margin-bottom: 1rem;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.parent-assignment-detail-page .assignment-detail-header a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 .85rem;
	border: 1px solid rgba(33, 59, 45, .14);
	border-radius: 999px;
	background: rgba(255, 255, 255, .82);
	color: var(--dark-green, #213b2d) !important;
	font-family: var(--font-sans, 'Instrument Sans', sans-serif);
	font-size: .78rem;
	font-weight: 800;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(33, 59, 45, .05);
}

.parent-assignment-detail-page .assignment-detail-header a:hover {
	border-color: color-mix(in srgb, var(--subject-color, #355946) 36%, transparent);
	background: color-mix(in srgb, var(--subject-color, #355946) 7%, #fff);
}

.parent-assignment-detail-page .assignment-header {
	position: relative;
	margin-bottom: 1.25rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid rgba(33, 59, 45, .12);
	border-left: 8px solid var(--subject-color, #355946);
	border-radius: 18px;
	background:
		linear-gradient(135deg, rgba(255,255,255,.96), rgba(250,248,242,.94)),
		linear-gradient(135deg, color-mix(in srgb, var(--subject-color, #355946) 18%, #fff), #fff);
	box-shadow: 0 18px 42px rgba(33, 59, 45, .09);
	overflow: hidden;
}

.parent-assignment-detail-page .assignment-header-title {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: start;
}

.parent-assignment-detail-page .assignment-title-group {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem;
	min-width: 0;
	align-items: start;
}

.parent-assignment-detail-page .assignment-title-icon {
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: color-mix(in srgb, var(--subject-color, #355946) 10%, #fff);
	border: 1px solid color-mix(in srgb, var(--subject-color, #355946) 24%, transparent);
	font-size: 1.35rem;
}

.parent-assignment-detail-page .assignment-title-icon-glyph {
	display: block;
	font-family: Georgia, serif;
	font-size: 1.65rem;
	font-weight: 700;
	line-height: 1;
}

.parent-assignment-detail-page h1 {
	margin: 0 0 .45rem !important;
	color: var(--dark-green, #213b2d) !important;
	font-family: var(--font-serif, 'Instrument Serif', Georgia, serif) !important;
	font-size: clamp(2.1rem, 4vw, 3.65rem) !important;
	font-weight: 400 !important;
	line-height: .98 !important;
	letter-spacing: 0 !important;
	overflow-wrap: anywhere;
}

.parent-assignment-detail-page .assignment-header-title .text-text-secondary {
	margin: 0 !important;
	color: #64736a !important;
	font-family: var(--font-sans, 'Instrument Sans', sans-serif);
	font-size: .92rem;
	font-weight: 700;
}

.parent-assignment-detail-page .completion-toggle {
	display: flex;
	align-items: center;
	gap: .65rem;
	width: 100%;
	min-width: 164px;
	padding: .8rem .95rem;
	border: 1px solid rgba(33, 59, 45, .13);
	border-radius: 14px;
	background: #fff;
	color: var(--dark-green, #213b2d);
	font-family: var(--font-sans, 'Instrument Sans', sans-serif);
	font-weight: 850;
	box-shadow: 0 10px 24px rgba(33, 59, 45, .06);
}

.parent-assignment-detail-page .completion-status-text {
	line-height: 1.15;
}

.parent-assignment-detail-page .completion-checkbox {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	border-radius: 7px;
	border: 1px solid color-mix(in srgb, var(--subject-color, #355946) 42%, transparent);
}

.parent-assignment-detail-page .completion-checkbox.checked {
	background: var(--subject-color, #355946);
	border-color: var(--subject-color, #355946);
}

.parent-assignment-detail-page .completed-on {
	margin-top: .25rem;
	color: #6b746f;
	font-size: .72rem;
	font-weight: 700;
}

.parent-assignment-detail-page .assignment-meta-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .75rem;
	margin-top: 1.35rem;
}

.parent-assignment-detail-page .meta-item {
	padding: .85rem .95rem;
	border: 1px solid #eee7db;
	border-radius: 12px;
	background: rgba(255,255,255,.75);
	min-width: 0;
}

.parent-assignment-detail-page .meta-label {
	margin-bottom: .32rem;
	color: color-mix(in srgb, var(--subject-color, #355946) 72%, #7a5d20);
	font-family: var(--font-sans, 'Instrument Sans', sans-serif);
	font-size: .66rem;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.parent-assignment-detail-page .meta-value {
	color: var(--dark-green, #213b2d);
	font-family: var(--font-sans, 'Instrument Sans', sans-serif);
	font-size: .95rem;
	font-weight: 850;
	line-height: 1.25;
	text-transform: none;
	white-space: normal;
}

.parent-assignment-detail-page .assignment-content-description {
	margin-top: 1rem;
	padding: 1rem 1.1rem;
	border: 1px solid #eee7db;
	border-radius: 14px;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.75);
}

.parent-assignment-detail-page .assignment-description,
.parent-assignment-detail-page .assignment-instructions,
.parent-assignment-detail-page .assignment-resources {
	color: #34443a;
	font-family: var(--font-sans, 'Instrument Sans', sans-serif);
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.62;
	text-transform: none;
}

.parent-assignment-detail-page .assignment-description p:last-child,
.parent-assignment-detail-page .assignment-instructions p:last-child,
.parent-assignment-detail-page .assignment-resources p:last-child {
	margin-bottom: 0;
}

.parent-assignment-detail-page .assignment-description-intro,
.parent-assignment-detail-page .assignment-description-section {
	margin: 0 0 .8rem;
}

.parent-assignment-detail-page .assignment-description-section strong {
	color: var(--dark-green, #213b2d);
	font-weight: 900;
}

.parent-assignment-detail-page .assignment-media-section,
.parent-assignment-detail-page .feedback-section {
	margin-top: 1rem;
	margin-bottom: 1.25rem;
	padding: 1.1rem;
	border: 1px solid #eee7db;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(33, 59, 45, .06);
}

.parent-assignment-detail-page .media-grid {
	gap: 1rem;
}

.parent-assignment-detail-page .media-grid.two-columns {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.parent-assignment-detail-page .media-column h3,
.parent-assignment-detail-page .assignment-references h3,
.parent-assignment-detail-page .feedback-section h2 {
	margin: 0 0 .85rem;
	color: var(--dark-green, #213b2d);
	font-family: var(--font-sans, 'Instrument Sans', sans-serif) !important;
	font-size: .9rem;
	font-weight: 900;
	letter-spacing: .04em;
}

.parent-assignment-detail-page .video-container {
	border-radius: 12px;
	box-shadow: none;
	border: 1px solid #eee7db;
}

@media (max-width: 760px) {
	.parent-assignment-detail-page {
		padding-left: .85rem !important;
		padding-right: .85rem !important;
	}

	.parent-assignment-detail-page .assignment-detail-header,
	.parent-assignment-detail-page .assignment-header-title {
		grid-template-columns: 1fr;
		flex-direction: column;
		align-items: stretch;
	}

	.parent-assignment-detail-page .assignment-detail-header a {
		justify-content: center;
	}

	.parent-assignment-detail-page .assignment-title-group {
		grid-template-columns: 42px minmax(0, 1fr);
	}

	.parent-assignment-detail-page .assignment-title-icon {
		width: 42px;
		height: 42px;
		border-radius: 12px;
		font-size: 1.1rem;
	}

	.parent-assignment-detail-page h1 {
		font-size: 2.15rem !important;
	}

	.parent-assignment-detail-page .completion-toggle {
		width: 100%;
		min-width: 0;
	}

	.parent-assignment-detail-page .assignment-meta-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 430px) {
	.parent-assignment-detail-page .assignment-meta-grid {
		grid-template-columns: 1fr;
	}
}

/* Saint refinement: parent assignment detail as a focused assignment page */
.parent-assignment-detail-page .assignment-page-title {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	margin: .6rem 0 1.4rem;
	padding: .25rem 0 .95rem;
	border-bottom: 1px solid rgba(33, 59, 45, .1);
}

.parent-assignment-detail-page .assignment-kicker {
	margin-bottom: .3rem;
	color: color-mix(in srgb, var(--subject-color, #355946) 74%, #7a5d20);
	font-family: var(--font-sans, 'Instrument Sans', sans-serif);
	font-size: .72rem;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.parent-assignment-detail-page .assignment-title-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem .85rem;
	color: #5f6f65;
	font-family: var(--font-sans, 'Instrument Sans', sans-serif);
	font-size: .95rem;
	font-weight: 750;
}

.parent-assignment-detail-page .assignment-title-meta span + span::before {
	content: "";
	display: inline-block;
	width: .28rem;
	height: .28rem;
	margin-right: .85rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--subject-color, #355946) 52%, #d6c18b);
	vertical-align: middle;
}

.parent-assignment-detail-page .assignment-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
	gap: 1.1rem;
	align-items: start;
}

.parent-assignment-detail-page .assignment-main,
.parent-assignment-detail-page .assignment-sidebar {
	min-width: 0;
}

.parent-assignment-detail-page .assignment-sidebar {
	display: grid;
	gap: .9rem;
}

.parent-assignment-detail-page .assignment-panel {
	padding: clamp(1rem, 2vw, 1.35rem);
	border: 1px solid #eee7db;
	border-left: 1px solid #eee7db;
	border-radius: 14px;
	background: rgba(255,255,255,.92);
	box-shadow: 0 12px 30px rgba(33, 59, 45, .055);
}

.parent-assignment-detail-page .assignment-description-panel {
	min-height: 260px;
}

.parent-assignment-detail-page .assignment-section-heading {
	margin: 0 0 .75rem;
	color: var(--dark-green, #213b2d);
	font-family: var(--font-sans, 'Instrument Sans', sans-serif);
	font-size: .76rem;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.parent-assignment-detail-page .assignment-section-heading:not(:first-child) {
	margin-top: 1.35rem;
	padding-top: 1.1rem;
	border-top: 1px solid #eee7db;
}

.parent-assignment-detail-page .assignment-header {
	border-left: 1px solid rgba(33, 59, 45, .12);
}

.parent-assignment-detail-page .assignment-meta-panel .assignment-meta-grid {
	grid-template-columns: 1fr;
	gap: .65rem;
	margin-top: 0;
}

.parent-assignment-detail-page .assignment-meta-panel .meta-item {
	padding: 0 0 .7rem;
	border: 0;
	border-bottom: 1px solid #eee7db;
	border-radius: 0;
	background: transparent;
}

.parent-assignment-detail-page .assignment-meta-panel .meta-item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.parent-assignment-detail-page .assignment-content-description {
	margin-top: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.parent-assignment-detail-page .assignment-media-section,
.parent-assignment-detail-page .feedback-section {
	border-left: 1px solid #eee7db;
	border-radius: 14px;
}

.parent-assignment-detail-page .feedback-item {
	border-left: 0 !important;
}

@media (max-width: 900px) {
	.parent-assignment-detail-page .assignment-layout {
		grid-template-columns: 1fr;
	}

	.parent-assignment-detail-page .assignment-sidebar {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 760px) {
	.parent-assignment-detail-page .assignment-page-title {
		grid-template-columns: 42px minmax(0, 1fr);
	}
}