/* Color Palette from the image */
:root {
  --bg-primary: #f5f0e1;       /* Default page background */
  --bg-secondary: #d4c1a7;     /* Muted light brown (for table headers) */
  --bg-surface: #ffffff;      /* White for card backgrounds */
  
  --accent-primary: #a78e6c;   /* Medium brown (for buttons) */
  --accent-secondary: #7e9171; /* Desaturated olive green (for buttons) */
  --accent-tertiary: #ecb2ab;  /* Muted red (for student icons) */
  --accent-primary-hover: #8f7858;
  --accent-secondary-hover: #6b7b60;
  --accent-tertiary-hover: #e08d83;
  
  --chart-color-1: #9cb8d9;        /* Light Blue (for allSkillsChart) */
  --chart-color-2: #a7c7e7;        /* Lighter Blue (for anecdoteChart) */
  --chart-border-2: #6b93b9;       /* Darker Blue (for anecdoteChart) */
  --chart-color-3: rgba(52, 211, 153, 0.5); /* Green (for messagesChart) */
  --chart-border-3: rgba(5, 150, 105, 1);    /* Dark Green (for messagesChart) */

  --text-dark: #3a2e1f;        /* Very dark brown for main text */
  --text-light: #f7f2ea;       /* Light cream for text on dark backgrounds */
  
  --border-primary: #a78e6c;   /* Medium brown (for titles) */
  --border-secondary: #d4c1a7; /* Lighter brown for table borders */

  --admin-highlight: #fef08a;  /* Keeping the yellow for admin highlights */
}

[data-theme="ocean"] {
  --accent-primary: #0077b6;       /* Strong Blue */
  --accent-secondary: #00b4d8;     /* Cyan */
  --accent-tertiary: #48cae4;      /* Light Blue */
  --accent-primary-hover: #005f90;
  --accent-secondary-hover: #0096b7;
  --accent-tertiary-hover: #36b1c9;
  --chart-color-1: #00b4d8;
  --chart-color-2: #48cae4;
  --chart-border-2: #0077b6;
  --border-secondary: #89c2d9;
}

[data-theme="forest"] {
  --accent-primary: #4f772d;       /* Dark Green */
  --accent-secondary: #90a955;     /* Light Green */
  --accent-tertiary: #ecb2ab;      /* Pink (keep same) */
  --accent-primary-hover: #3f5f24;
  --accent-secondary-hover: #7b9248;
  --accent-tertiary-hover: #d88c82;
  --chart-color-1: #90a955;
  --chart-color-2: #c4d7a1;
  --chart-border-2: #4f772d;
  --border-secondary: #c4d7a1;
}

[data-theme="sunset"] {
  --accent-primary: #d95d39;       /* Orange */
  --accent-secondary: #c04a43;     /* Red */
  --accent-tertiary: #f0a202;      /* Yellow */
  --accent-primary-hover: #b34a2d;
  --accent-secondary-hover: #a23d37;
  --accent-tertiary-hover: #c98202;
  --chart-color-1: #f0a202;
  --chart-color-2: #fbc490;
  --chart-border-2: #d95d39;
  --border-secondary: #f6b48a;
}

/* NEW HELPER CLASSES FOR TAILWIND REPLACEMENT */
.header-bg { background-color: var(--accent-primary); }
.header-text { color: var(--text-light); }
.header-text-hover:hover { color: var(--bg-secondary); }

.btn {
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    text-transform: uppercase;
    transition: opacity 0.2s;
    color: var(--text-light);
}
.btn:hover { opacity: 0.9; }
.btn-primary { background-color: var(--accent-primary); }
.btn-secondary { background-color: var(--accent-secondary); }
.btn-tertiary { background-color: var(--accent-tertiary); }
.btn-neutral { background-color: #8c7a65; } /* Muted brown for neutral buttons */

.bg-blue-600 { background-color: var(--accent-primary) !important; }
.bg-blue-700 { background-color: var(--accent-primary-hover) !important; }
.hover\:bg-blue-700:hover { background-color: var(--accent-primary-hover) !important; }
.bg-green-600 { background-color: var(--accent-secondary) !important; }
.bg-green-700 { background-color: var(--accent-secondary-hover) !important; }
.hover\:bg-green-700:hover { background-color: var(--accent-secondary-hover) !important; }
.bg-yellow-600 { background-color: var(--accent-tertiary) !important; }
.bg-yellow-700 { background-color: var(--accent-tertiary-hover) !important; }
.hover\:bg-yellow-700:hover { background-color: var(--accent-tertiary-hover) !important; }


.student-avatar-bg { background-color: var(--accent-tertiary); }
.student-avatar-text { color: var(--text-dark); font-weight: bold; }
/* END OF NEW HELPER CLASSES */


/* General Body Styles */
body { 
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-primary); 
    color: var(--text-dark);
}

.login-background {
    background-image: url('/images/treebackground.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--bg-secondary);
}

/* Utility and Component Styles (Unchanged) */
.hidden { display: none; }
.modal-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex; justify-content: center; align-items: center;
    z-index: 60;
}
.skill-card {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border-color: var(--border-secondary); /* Added for new theme */
}
.skill-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
#anecdote-chart {
    cursor: pointer;
}

/* Stabilize chart sizes without JS resize loops */
#all-skills-chart,
#anecdote-chart,
#messages-chart {
  width: 100%;
  height: 320px; /* consistent default height */
  max-height: 420px;
}

/* Custom Design Classes (Updated with new colors) */
.dashboard-title {
    font-family: serif;
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
    color: var(--text-dark);
    border-bottom: 3px solid var(--border-primary);
    padding-bottom: 0.5rem;
    width: fit-content;
}

.section-title {
    color: var(--accent-tertiary);
    font-size: 1.5rem;
    font-weight: 600;
}

/* Rubric Table Styles (UPDATED) */
.rubric-table, .rubric-table-auto {
    border-collapse: collapse;
    width: 100%;
    /* This is the key change: forcing fixed layout lets us control widths */
    table-layout: fixed; 
}

.rubric-table th, .rubric-table td,
.rubric-table-auto th, .rubric-table-auto td {
    border: 1px solid var(--border-secondary);
    padding: 0.75rem; /* Slightly reduced padding for better fit */
    text-align: left;
    vertical-align: top;
    word-wrap: break-word; /* Ensures long words don't overflow */
    line-height: 1.4;      /* Improves readability of wrapped text */
}

.rubric-table th, 
.rubric-table-auto th {
    background-color: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.9rem; /* Make header text slightly smaller */
}

/* Give the first column of standard rubrics a bit more space */
.rubric-table .skill-label-cell {
    background-color: var(--bg-secondary);
    font-weight: 700;
    width: 20%; 
}

/* Give the first column of WIDE rubrics even MORE space */
.rubric-table-auto .skill-label-cell {
    background-color: var(--bg-secondary);
    font-weight: 700;
    width: 30%; /* This is the main fix for the "Behavior" column */
}

.rubric-table .admin-highlight,
.rubric-table-auto .admin-highlight {
    background-color: var(--admin-highlight) !important;
}

.rubric-table .admin-clickable,
.rubric-table-auto .admin-clickable {
     cursor: pointer;
}

#rubric-table-container {
    overflow-x: auto; /* Allows horizontal scrolling on small screens */
}

@media (min-width: 1280px) {
    .container {
        max-width: 1440px; /* Increases the max width from 1280px to 1440px */
    }
}

.bg-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); /* 40% black overlay */
    z-index: 1; /* Sits above the background */
}

/* --- RETRO HEADER & BUTTONS --- */

/* The specific retro colors */
.btn-retro-orange { background-color: #D98C2D; color: white; }
.btn-retro-orange:hover { background-color: #b87523; }

.btn-retro-brown { background-color: #A85D26; color: white; }
.btn-retro-brown:hover { background-color: #8a4b1e; }

.btn-retro-olive { background-color: #7A7D37; color: white; }
.btn-retro-olive:hover { background-color: #62642b; }

/* The School Name Header with the curved hook */
.retro-header-container {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 30px;
    display: inline-block;
    width: 100%;
}

.retro-header-text {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 4rem;
    color: #6B5E36; /* Dark Olive/Brown text */
    line-height: 1;
}

/* The line that goes under and curves up */
.retro-underline-hook {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 98%;
    height: 20px;
    border-bottom: 3px solid #8F8663;
    border-right: 3px solid #8F8663;
    border-bottom-right-radius: 20px;
    pointer-events: none;
}

/* --- MANAGEMENT DASHBOARD VIEW --- */
.management-view {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(155, 173, 191, 0.15), rgba(167, 142, 108, 0.12));
    padding: 3rem 1.5rem;
}

.management-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.management-header {
    width: auto;
    margin: 0 auto 10px auto;
    text-align: center;
}

.management-header .retro-underline-hook {
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
}

.management-add-btn {
    background-color: #9BADBF;
    color: #fff;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1.1rem 3rem;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.management-add-btn:hover {
    background-color: #8b9fb5;
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.15);
}

.management-add-btn:active {
    transform: translateY(0);
}

.management-footer-text {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    color: #A78E6c;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
}

/* --- RETRO DASHBOARD UPDATES --- */

/* 1. Grade Circle (Red/Brown) */
.student-grade-circle {
    width: 55px;
    height: 55px;
    background-color: #c04a43; /* Matches the 'Types of Assessment' brown */
    border-radius: 50%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    font-size: 1.2rem;
    margin: 0 auto 0.5rem auto; /* Center and add spacing below */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

/* Hover effect for interactivity */
.student-grade-wrapper:hover .student-grade-circle {
    transform: scale(1.1);
    background-color: #a23d37;
}

/* 2. Student Name Text */
.student-name-retro {
    color: #c04a43;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.2;
    overflow-wrap: break-word;
}

/* 3. Wrapper for the grid item */
.student-grade-wrapper {
    display: flex;
    flex-col;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 5px;
}

/* 4. Ensure the charts fit transparently */
.chart-card-transparent {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.btn-retro-orange { background-color: #D98C2D; color: white; }
.btn-retro-orange:hover { background-color: #b87523; }

.btn-retro-brown { background-color: #A85D26; color: white; }
.btn-retro-brown:hover { background-color: #8a4b1e; }

.btn-retro-olive { background-color: #7A7D37; color: white; }
.btn-retro-olive:hover { background-color: #62642b; }

/* The School Name Header with the curved hook */
.retro-header-container {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 30px;
    display: inline-block;
    width: 100%;
}

.retro-header-text {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 4rem;
    color: #6B5E36; /* Dark Olive/Brown text */
    line-height: 1;
}

/* The line that goes under and curves up */
.retro-underline-hook {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 98%;
    height: 20px;
    border-bottom: 3px solid #8F8663;
    border-right: 3px solid #8F8663;
    border-bottom-right-radius: 20px;
    pointer-events: none;
}

/* --- STUDENT CIRCLES --- */
.student-grade-circle {
    width: 55px;
    height: 55px;
    background-color: #c04a43; 
    border-radius: 50%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    font-size: 1.2rem;
    margin: 0 auto 0.5rem auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.student-grade-wrapper:hover .student-grade-circle {
    transform: scale(1.1);
    background-color: #a23d37;
}

.student-name-retro {
    color: #c04a43;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.2;
    overflow-wrap: break-word;
}

.student-grade-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 5px;
}

.chart-card-transparent {
    background: transparent;
    box-shadow: none;
    padding: 0;
}