/* ===== IMPORT FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

/* ===== GLOBAL VARIABLES ===== */
:root {
    /* Official AIM Brand Colors. Primary darkened from #b6d440 to #80BA2B
       (Apr 2026) — the lighter lime had poor contrast against white text in
       the sidebar and on filled buttons. The new shade keeps the same hue,
       just deeper, so existing greens elsewhere still feel related. */
    --color-primary: #80BA2B;        /* AIM Tennis Ball Green (deepened) */
    --color-primary-hover: #6ea024;
    --color-primary-light: #e8f5e9;
    --color-accent: #ffd700;         /* Tennis Ball Yellow */
    --color-accent-light: #fff9c4;

    /* Sidebar palette — lifted out of the .sidebar block so theme tweaks
       happen in one place. Deep green base + bright pill on active item. */
    --sidebar-bg-top:    #0d3d25;
    --sidebar-bg-bot:    #0a2e1a;
    --sidebar-text:      #e8f0e8;
    --sidebar-text-mute: rgba(232, 240, 232, 0.55);
    --sidebar-pill:      #80BA2B;
    --sidebar-pill-text: #0a2e1a;

    --color-text: #000000;           /* Black */
    --color-text-light: #666666;
    --color-text-lighter: #999999;

    --color-bg: #e3e3e3;             /* Off-white */
    --color-bg-white: #ffffff;       /* White */
    --color-border: #e0e0e0;

    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-info: #17a2b8;

    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Calibri', 'Arial', sans-serif;
    --border-radius: 8px;
    --border-radius-small: 4px;
    --box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    --box-shadow-small: 0 2px 4px rgba(0,0,0,0.1);

    --sidebar-width: 260px;
    --transition-speed: 0.3s;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}

/* ===== SIDEBAR LAYOUT =====
   Refreshed Apr 2026 — moved from a lime-green sidebar (white text on light
   green = low contrast) to a deep-green sidebar with cream text + a bright
   pill on the active nav item. Reads cleanly, feels modern, keeps the AIM
   brand green prominent without using it as the wallpaper. Inspired by
   Thor / Dency dashboard sidebars. */
.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, var(--sidebar-bg-top) 0%, var(--sidebar-bg-bot) 100%);
    color: var(--sidebar-text);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    box-shadow: 2px 0 16px rgba(0,0,0,0.18);
    z-index: 1000;
    /* Flex column: header + user pinned, nav fills + scrolls. No magic numbers. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-header,
.sidebar-user {
    flex-shrink: 0;
}

.sidebar-header {
    padding: 26px 20px 20px;
    text-align: center;
    position: relative;
}

/* Subtle accent line under the header — a single court-baseline stripe. */
.sidebar-header::after {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 1px;
    background: rgba(255,255,255,0.10);
}

.sidebar-logo-img {
    width: 76px;
    height: 76px;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 8px auto;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

.sidebar-subtitle {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    opacity: 0.85;
    color: var(--sidebar-text);
    font-family: var(--font-heading);
    font-weight: 600;
}

.sidebar-user {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.sidebar-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--sidebar-text);
    flex-shrink: 0;
    font-family: var(--font-heading);
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(128, 186, 43, 0.4);
}

.sidebar-avatar-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.sidebar-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    color: white;
    font-family: var(--font-heading);
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--sidebar-text);
    margin-bottom: 2px;
    font-family: var(--font-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: 11px;
    color: var(--sidebar-text-mute);
    font-family: var(--font-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.logout-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sidebar-text);
    opacity: 0.65;
    transition: all var(--transition-speed);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
    border-radius: 6px;
}

.logout-icon:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.08);
}

.sidebar-nav {
    padding: 12px 12px 24px;
    flex: 1 1 auto;
    min-height: 0;          /* allow flex item to shrink so overflow can scroll */
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-section {
    margin-bottom: 4px;
}

/* Section title is a small all-caps label that toggles its items.
   Muted by default so the bright section labels don't compete with
   the active pill below. */
.nav-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 14px 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-weight: 700;
    color: var(--sidebar-text-mute);
    font-family: var(--font-heading);
    background: transparent;
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: color 0.2s;
    text-align: left;
    box-sizing: border-box;
}

.nav-section-title:hover {
    color: var(--sidebar-text);
}

/* Chevron arrow */
.nav-section-title .toggle-chevron {
    flex-shrink: 0;
    transition: transform 0.25s ease;
    transform: rotate(0deg);
    opacity: 0.7;
}

/* Rotate chevron when section is open */
.nav-section.open .nav-section-title .toggle-chevron {
    transform: rotate(180deg);
}

/* Collapsible items wrapper — JS controls the height */
.nav-section-items {
    overflow: hidden;
    height: 0;
    transition: height 0.25s ease;
}

/* Nav items are rounded pills — wider hover area, clearer active state. */
.nav-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    margin: 1px 4px;
    color: var(--sidebar-text);
    text-decoration: none;
    border-radius: 10px;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 13.5px;
    font-family: var(--font-body);
    font-weight: 500;
}

.nav-item:hover {
    background-color: rgba(255,255,255,0.06);
}

/* The active state is the brand green pill with dark text — high contrast,
   intentional, and impossible to miss. */
.nav-item.active {
    background-color: var(--sidebar-pill);
    color: var(--sidebar-pill-text);
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(128, 186, 43, 0.25);
}

/* ICON SPACING — direct image styling */
.nav-icon-img {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    margin-right: 12px;
    opacity: 0.85;
    flex-shrink: 0;
    display: block;
    /* Cream-tinted icons by default — same hue as sidebar text. We invert
       on the active item so icons go dark on the pill. */
    filter: brightness(0) saturate(100%) invert(94%) sepia(7%) saturate(100%) brightness(98%);
}

.nav-item:hover .nav-icon-img {
    opacity: 1;
}

.nav-item.active .nav-icon-img {
    opacity: 1;
    /* Black-ish for the dark text on the green pill. */
    filter: brightness(0) saturate(100%);
}

/* Remove old .nav-icon styles if they exist */
.nav-icon {
    display: none;
}

/* Optional bottom-pinned footer slot. Currently unused (logout icon lives
   in the user row), but kept here so future "Collapse Sidebar" style
   buttons have a styled landing. */
.sidebar-footer {
    flex-shrink: 0;
    padding: 14px 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    background-color: var(--color-danger);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color var(--transition-speed);
    font-size: 13px;
    font-family: var(--font-body);
}

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

/* Scrollbar — slim, dark-friendly */
.sidebar-nav::-webkit-scrollbar {
    width: 5px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18);
    border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.35);
}
.sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }

/* ═════════ Personal Agenda Tracker (bottom of sidebar) ═════════════════════
   Two fitness-app-style oval pills with circular progress rings — open task
   count on the left, completion % on the right. The whole strip is a link
   to agenda.php. flex-shrink: 0 keeps it pinned below the scrolling nav. */
.sidebar-agenda {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    text-decoration: none;
    color: var(--sidebar-text);
}

.agenda-pill {
    flex: 1;
    min-width: 0;             /* allow shrink in narrow contexts */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 24px;       /* pill shape */
    transition: background 0.15s, border-color 0.15s;
}

.sidebar-agenda:hover .agenda-pill {
    background: rgba(128, 186, 43, 0.10);
    border-color: rgba(128, 186, 43, 0.35);
}

.agenda-pill-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    min-width: 0;
    overflow: hidden;
}

.agenda-pill-num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 15px;
    color: var(--sidebar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda-pill-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--sidebar-text-mute);
}

/* ── Progress ring ──
   Two concentric circles: the muted track underneath, the colored fill on
   top. The fill is rotated -90° via CSS so 0% starts at 12 o'clock and
   sweeps clockwise. stroke-dasharray + stroke-dashoffset are written
   inline by PHP so the arc length matches the percentage exactly. */
.agenda-ring {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    transform: rotate(-90deg);
}
.agenda-ring-track {
    stroke: rgba(255,255,255,0.10);
    stroke-width: 3;
    fill: none;
}
.agenda-ring-fill {
    stroke: url(#agendaPurple);          /* defined inline in sidebar.php's first SVG */
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.4s ease;
}

/* ═════════ Task-completion celebration (celebration.js) ═══════════════════
   Tennis balls + colored confetti shoot up from below, drift sideways, and
   fade as they exit. Runs ~1.4–2 seconds, then the container is removed by
   JS — zero DOM debt afterwards. pointer-events: none means it can never
   block a click, so even if a piece is mid-animation when the coach reaches
   for the next task, the UI stays responsive. */
.aim-celebration {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.aim-cel-ball,
.aim-cel-confetti {
    position: absolute;
    bottom: -40px;
    left: var(--cel-x);
    animation: aim-cel-rise var(--cel-dur) ease-out var(--cel-delay) forwards;
    will-change: transform, opacity;        /* hint to compositor */
}

.aim-cel-ball {
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.aim-cel-confetti {
    width: 9px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

@keyframes aim-cel-rise {
    0%   { transform: translate(0, 0)                         rotate(0);                opacity: 1; }
    80%  {                                                                              opacity: 1; }
    100% { transform: translate(var(--cel-rx), -110vh)        rotate(var(--cel-rot));   opacity: 0; }
}

/* ── Fast-fact card ────────────────────────────────────────────────────────
   Pops up alongside the confetti with one random tennis fact pulled from
   tennis_facts.js. Sits near the top of the viewport so it doesn't cover
   the task list the coach was working in. pointer-events re-enabled on the
   card itself so the close button and Wikipedia citation link are clickable.

   The card slides in once and stays — the coach dismisses it with the ×
   button (top-right) or Escape. JS adds .aim-cel-fact--dismissing to
   trigger the fade-out animation, then removes the DOM node ~350ms later. */
.aim-cel-fact {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    width: clamp(280px, 90vw, 480px);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18),
                0 2px 8px  rgba(15, 23, 42, 0.08);
    padding: 18px 44px 16px 22px;          /* extra right pad clears × button */
    border-top: 4px solid var(--color-primary, #80BA2B);
    opacity: 0;
    animation: aim-cel-fact-in 600ms ease-out forwards;
}

/* × button. Lives in the top-right of the card. Sized for comfortable
   click/tap (28px) without dominating the layout. */
.aim-cel-fact-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9ca3af;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aim-cel-fact-close:hover,
.aim-cel-fact-close:focus {
    background: #f3f4f6;
    color: #1f2937;
    outline: none;
}

.aim-cel-fact-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary, #80BA2B);
    margin-bottom: 8px;
}

.aim-cel-fact-text {
    font-size: 15px;
    line-height: 1.5;
    color: #1f2937;
    margin-bottom: 12px;
}

.aim-cel-fact-cite {
    display: inline-block;
    font-size: 12px;
    color: #6b7280;
    text-decoration: none;
    border-bottom: 1px dotted #c7cdd6;
    padding-bottom: 1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.aim-cel-fact-cite:hover,
.aim-cel-fact-cite:focus {
    color: var(--color-primary, #80BA2B);
    border-bottom-color: var(--color-primary, #80BA2B);
    outline: none;
}

@keyframes aim-cel-fact-in {
    0%   { opacity: 0; transform: translateX(-50%) translateY(18px) scale(0.96); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1); }
}

/* Click-driven fade-out. The JS adds this class when the × button or Esc
   key is pressed, then removes the DOM element 350ms later. The
   animation-fill-mode: forwards locks the final keyframe state so there's
   no flicker between animation end and DOM removal. The compound selector
   bumps specificity above .aim-cel-fact--reduced so this animation always
   wins, even on reduced-motion. */
.aim-cel-fact.aim-cel-fact--dismissing {
    animation: aim-cel-fact-out 350ms ease-in forwards;
    pointer-events: none;
}
@keyframes aim-cel-fact-out {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.98); }
}

/* Reduced motion: skip the slide-in, plain quick fade. The dismiss path
   is the same — animation-name is overridden but the .aim-cel-fact
   selector wins on properties not set here, so it still uses the regular
   --dismissing class on close. */
.aim-cel-fact--reduced {
    animation: aim-cel-fact-fade-in 300ms ease-out forwards;
}
@keyframes aim-cel-fact-fade-in {
    0%   { opacity: 0; transform: translateX(-50%); }
    100% { opacity: 1; transform: translateX(-50%); }
}

/* On narrow phones, drop the side margins a touch so the card never
   touches the viewport edges. */
@media (max-width: 480px) {
    .aim-cel-fact {
        top: 70px;
        padding: 14px 38px 13px 16px;
    }
    .aim-cel-fact-text { font-size: 14px; }
    .aim-cel-fact-close { top: 6px; right: 6px; }
}

/* ===== MAIN CONTENT AREA ===== */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 30px;
    min-height: 100vh;
    background-color: var(--color-bg);
}

.page-header {
    margin-bottom: 30px;
}

.page-title {
    font-size: 32px;
    font-weight: 300;
    color: var(--color-text);
    margin-bottom: 8px;
    font-family: var(--font-heading);
}

.page-subtitle {
    color: var(--color-text-light);
    font-size: 16px;
    font-family: var(--font-body);
}

/* ===== DASHBOARD METRICS ===== */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.metric-card {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border-left: 4px solid var(--color-primary);
    transition: transform 0.3s, box-shadow 0.3s;
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.metric-card.accent {
    border-left-color: var(--color-accent);
}

.metric-card.success {
    border-left-color: var(--color-success);
}

.metric-card.info {
    border-left-color: var(--color-info);
}

.metric-label {
    font-size: 14px;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 600;
    font-family: var(--font-heading);
}

.metric-value {
    font-size: 42px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    margin-bottom: 8px;
    font-family: var(--font-heading);
}

.metric-subtext {
    font-size: 13px;
    color: var(--color-text-lighter);
    font-family: var(--font-body);
}

/* ===== CARDS ===== */
.card {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: var(--box-shadow);
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--color-border);
}

.card-title {
    font-size: 20px;
    font-weight: 300;
    color: var(--color-text);
    font-family: var(--font-heading);
}

.card-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-body);
}

.card-link:hover {
    text-decoration: underline;
}

/* ===== ACTIVITY LIST ===== */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: var(--border-radius-small);
    border-left: 3px solid var(--color-primary);
}

.activity-content {
    flex: 1;
}

.activity-text {
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 4px;
    font-family: var(--font-body);
}

.activity-meta {
    font-size: 12px;
    color: var(--color-text-lighter);
    font-family: var(--font-body);
}

/* ===== BADGES ===== */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-body);
}

.badge-primary {
    background-color: var(--color-primary);
    color: #000;
}

.badge-accent {
    background-color: var(--color-accent);
    color: var(--color-text);
}

.badge-success {
    background-color: var(--color-success);
    color: white;
}

.badge-warning {
    background-color: var(--color-warning);
    color: var(--color-text);
}

.badge-danger {
    background-color: var(--color-danger);
    color: white;
}

.badge-info {
    background-color: var(--color-info);
    color: white;
}

.ap-badge {
    background-color: #007bff;
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 5px;
}

/* ===== GRADE COLORS ===== */
.grade-a { color: var(--color-success); font-weight: 600; }
.grade-b { color: var(--color-info); font-weight: 600; }
.grade-c { color: var(--color-warning); font-weight: 600; }
.grade-d { color: #fd7e14; font-weight: 600; }
.grade-f { color: var(--color-danger); font-weight: 600; }
.grade-miss { color: #6c757d; font-style: italic; }

/* ===== BUTTONS ===== */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all var(--transition-speed);
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-family: var(--font-body);
}

.btn-primary {
    background-color: var(--color-primary);
    color: #000;
}

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

.btn-accent {
    background-color: var(--color-accent);
    color: var(--color-text);
}

.btn-accent:hover {
    background-color: #e6c200;
}

.btn-danger {
    background-color: var(--color-danger);
    color: white;
}

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

.btn-full {
    width: 100%;
}

.btn-large {
    padding: 14px 30px;
    font-size: 16px;
}

/* ===== TABLES ===== */
table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

th {
    background-color: #f8f9fa;
    color: var(--color-text);
    font-weight: 600;
    font-size: 13px;
}

tr:hover {
    background-color: #f8f9fa;
}

/* ===== FORMS ===== */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-text);
    font-size: 14px;
    font-family: var(--font-body);
}

.required {
    color: var(--color-danger);
    margin-left: 3px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-small);
    font-size: 14px;
    font-family: var(--font-body);
    transition: border-color var(--transition-speed);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
    padding: 20px;
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-small);
}

.filters > div {
    display: flex;
    flex-direction: column;
}

.filters > div:last-child {
    justify-content: flex-end;
}

.filters button,
.filters .btn {
    align-self: flex-start;
}

/* Filter button group - side by side */
.filter-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.filter-buttons .btn,
.filter-buttons button {
    margin: 0;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: var(--border-radius-small);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    font-family: var(--font-body);
    transition: background-color var(--transition-speed);
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* ===== MESSAGES ===== */
.message {
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: var(--border-radius-small);
    font-size: 14px;
    font-family: var(--font-body);
}

.success {
    background-color: #d4edda;
    color: #155724;
    border-left: 4px solid var(--color-success);
}

.error {
    background-color: #f8d7da;
    color: #721c24;
    border-left: 4px solid var(--color-danger);
}

.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-left: 4px solid var(--color-info);
}

.warning {
    background-color: #fff3cd;
    color: #856404;
    border-left: 4px solid var(--color-warning);
}

/* ===== UTILITY CLASSES ===== */
.no-data {
    text-align: center;
    padding: 40px;
    color: var(--color-text-light);
    background-color: #f8f9fa;
    border-radius: var(--border-radius);
    font-family: var(--font-body);
}

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

.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }

.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }

/* ===== SECTION DIVIDERS ===== */
.section-divider {
    background-color: var(--color-primary);
    color: #000;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 16px;
    border-radius: var(--border-radius-small);
    margin-bottom: 15px;
    font-family: var(--font-heading);
}

/* ===== STUDENT HEADER ===== */
.student-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: #000;
    padding: 25px;
    border-radius: var(--border-radius);
    margin-bottom: 25px;
}

.student-header h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #000;
    font-family: var(--font-heading);
    font-weight: 300;
}

.student-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    font-size: 14px;
}

.detail-item {
    display: flex;
    flex-direction: column;
}

.detail-label {
    font-weight: 600;
    opacity: 0.9;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-heading);
}

.detail-value {
    font-size: 18px;
    margin-top: 5px;
    font-family: var(--font-body);
}

.gpa-display {
    background-color: rgba(255,255,255,0.2);
    padding: 15px;
    border-radius: 6px;
    text-align: center;
}

.gpa-number {
    font-size: 36px;
    font-weight: bold;
}

/* ===== STUDENT PHOTOS ===== */
.student-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-primary);
    display: block;
}

.student-photo-wrapper {
    position: relative;
    display: inline-block;
}

.student-photo-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 18px;
    font-family: var(--font-heading);
}

/* ===== MOBILE MENU TOGGLE ===== */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1001;
    background: var(--color-primary);
    border: none;
    border-radius: 8px;
    width: 50px;
    height: 50px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: #000;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Show mobile menu toggle */
    .mobile-menu-toggle {
        display: flex;
    }

    /* Hide sidebar by default on mobile */
    .sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        width: 280px;
        height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease;
    }

    /* Show sidebar when open */
    .sidebar.sidebar-open {
        left: 0;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    }

    /* Overlay when sidebar is open */
    body.sidebar-mobile-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    /* Main content takes full width on mobile */
    .main-content {
        margin-left: 0;
        padding: 80px 20px 20px 20px; /* Extra top padding for menu button */
        width: 100%;
    }

    /* Adjust grid layouts for mobile */
    .metrics-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Make tables responsive */
    .data-table {
        overflow-x: auto;
    }

    /* Adjust page header for mobile */
    .page-header {
        flex-direction: column;
        gap: 15px;
    }

    .add-btn {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 100;
    }

    .page-header-actions {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 100;
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .page-header-actions .add-btn,
    .page-header-actions .delete-btn {
        position: static;
    }
}