/* =========================================
   0. COLOR PALETTE (CSS VARIABLES)
   ========================================= */
:root {
    /* Chart palette (shared with colors.js) */
    --palette-teal:       #00b18b;
    --palette-cyan:       #0bbbbb;
    --palette-aqua:       #1ae3e1;
    --palette-sky-blue:   #2ad8fc;
    --palette-blue:       #3cacfd;
    --palette-lavender:   #9ebcda;
    --palette-tan:        #dabc9e;
    --palette-orange:     #fd8d3c;
    --palette-red-orange: #fc4e2a;
    --palette-red:        #e31a1c;
    --palette-dark-red:   #bb0b0b;
    --palette-crimson:    #b10026;

    /* UTD Color Pallete */
    --color-sage-green: #499987;
    --color-forest-dark: #12584c;
    --color-bronze: #cb762d;
    --color-gold-sand:  #eebc59;
    --color-moss-light: #88be95;
    --color-ivory: #ffffff;
    --color-terracotta: #cb492d;

    /* Major UI tokens*/
    --sidebar-color: #eebc59;
    --utd-orange:      #E87500;
    --sidebar-hover-color: #88be95;
    --background-color: #88be95;
    --title-text: #ffffff;
    --main-header: #ffffff;

    /* Minor UI tokens */
    --bg-page:         #f4f6f8;
    --bg-card:         #ffffff;
    --text-primary:    #2c3e50;
    --text-secondary:  #7f8c8d;
    --text-muted:      #51616f;
    --text-sidebar:    var(--text-primary);
    --border-light:    #e1e4e8;
    --accent-blue:     var(--palette-blue);
    --accent-teal:     var(--palette-teal);
    --accent-red:      var(--palette-red);

    /* Credits Tokens*/
    --person-icon-border-color: #f2ad23;
    --credits-pics-border-color: #f2ad23;
}

/* =========================================
   1. GLOBAL RESET & BASIC SETUP
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-page);
    height: 100vh;
    overflow: hidden;
}

/* =========================================
   2. MAIN LAYOUT (SIDEBAR + CONTENT)
   ========================================= */
.container {
    display: flex;
    height: 100%;
}

.sidebar {
    width: 250px;
    background-color: var(--sidebar-color);
    color: white;
    display: flex;
    flex-direction: column;
    padding: 20px;
    flex-shrink: 0;
}

.sidebar h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 15px;
    color: var(--title-text); 
}

.sidebar ul {
    list-style: none;
}

.sidebar ul li {
    margin-bottom: 10px;
}

.sidebar a {
    text-decoration: none;
    color: var(--text-sidebar);
    font-size: 18px;
    display: block;
    padding: 12px 15px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.sidebar a:hover, .sidebar a.active {
    background-color: var(--sidebar-hover-color);
    color: var(--bg-card);
    padding-left: 20px;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 20px;
    text-align: center;
}

.utd-logo {
    width: 100%;
    max-width: 180px;
    height: auto;
    opacity: 0.9;
}

.main-content {
    flex: 1;
    padding: 40px;
    overflow-y: auto; /* Allows scrolling ONLY inside the content area */
    background-color: var(--background-color);
}

header {
    margin-bottom: 30px;
}

header h1 {
    font-size: 32px;
    color: var(--main-header);
    margin-bottom: 5px;
}

header p {
    color: #ffffff;
    font-size: 16px;
}

/* =========================================
   3. CHART CARDS & GRID
   ========================================= */
.charts-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-bottom: 50px;
}

.chart-card {
    background-color: var(--bg-card);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.05);
    padding: 25px;
    border: 1px solid var(--border-light);
    margin-bottom: 100px; /* Gap Between Graph Cards*/
}

.chart-card h3 {
    margin-bottom: 20px;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    border-left: 5px solid var(--accent-blue);
    padding-left: 10px;
}
.year-header {
    margin: 14px 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.mt-4 {
    margin-top: 18px;
}

/* =========================================
   4. SPECIFIC CHART DIMENSIONS
   ========================================= */
#chart_Operating_Revenue25, #chart_Operating_Revenue26, #chart_Operating_RevenueChange26,
#chart_Non-operating_Revenue25, #chart_Non-operating_Revenue26, #chart_Non-operating_RevenueChange26,
#chart_Expense25, #chart_Expense26, #chart_ExpenseChange26,
#chart_ecs_Expense,
#housingChart, #urecChart, #parkingChart,
#chart_StudentFeesTotals, #chart_StudentFeesOverview, #chart_MandatoryFeeBreakdown, #chart_ProgramFeesBreakdown,
#chart_AHT_Revenue,
#treemapChart {
    width: 100%;
    height: 500px;
}

#chart_budget_over_time_operating_revenue,
#chart_budget_over_time_non_operating_revenue, #chart_budget_over_time_expense{
    width: 100%;
    height: 1300px;
}
#chart_StudentFeesTotals { height: 520px; }
#chart_StudentFeesOverview { height: 520px; }
#chart_MandatoryFeeBreakdown { height: 720px; }
#chart_ProgramFeesBreakdown { height: 980px; }

.fees-table-wrap {
    overflow-x: auto;
}

.fees-table {
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    min-width: 520px;
}

.fees-row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 20px;
    padding: 10px 14px;
    border-top: 1px solid #eef1f4;
    font-size: 14px;
    color: var(--text-primary);
}

.fees-head {
    border-top: 0;
    background: #f7f9fb;
    font-weight: 700;
}

.fees-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fees-section {
    background: #fbfdff;
    font-weight: 700;
}

.fees-sub {
    padding-left: 34px;
    color: var(--text-muted);
}

.fees-total {
    background: #f7f9fb;
    font-weight: 800;
}

/* =========================================
   5. CREDITS PAGE STYLING
   ========================================= */
.credits-content {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding-bottom: 50px;
}

.credits-section {
    background-color: var(--bg-card);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.05);
    padding: 30px;
    border: 1px solid var(--border-light);
}

.credits-section h2 {
    color: var(--text-primary);
    font-size: 24px;
    margin-bottom: 25px;
    border-left: 5px solid var(--accent-blue);
    padding-left: 15px;
}

.people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.person-card {
    text-align: center;
    padding: 10px;
    padding-left: 20px;
    border-left: 8px solid var(--accent-blue);
    margin-bottom: 15px;
}

.person-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 15px;
    border: 3px solid var(--person-icon-border-color);
}

.person-card h3 {
    color: var(--text-primary);
    font-size: 18px;
    margin-bottom: 5px;
}

.person-card .role {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
}

.tech-list ul {
    list-style: none;
    padding-left: 0;
}

.tech-list li {
    padding: 12px 15px;
    margin-bottom: 10px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid var(--accent-teal);
    color: var(--text-primary);
    font-size: 15px;
}

.tech-list strong {
    color: var(--text-primary);
    font-weight: 600;
}

.tech-list a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.tech-list a:hover {
    color: var(--accent-blue);
    text-decoration: underline;
}

.error {
    color: var(--accent-red);
    font-style: italic;
    padding: 20px;
    text-align: center;
}

/* Specific styling for the logo icons */
.link-icon {
    width: 240px;          /* Limits the actual size of the image */
    height: auto;         /* Maintains the aspect ratio */
    padding: 10px;        /* Creates space inside the clickable area */
    margin-right: 15px;   /* Creates space between multiple icons */
    object-fit: contain;  /* Ensures the logo isn't stretched */
}

.link-icon:hover {
    transform: scale(1.1); /* Slightly enlarges the logo, like the gavel */
    filter: brightness(1.2); /* Makes the logo pop slightly on hover */
}

/* Container to handle overall alignment */
.link-images, .pictures-grid {
    padding: 10px 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* Styling for headers when they aren't inside white boxes */
.transparent-header {
    color: white; /* Or var(--sidebar-color) if you prefer the dark green */
    margin-bottom: 20px;
    font-size: 24px;
    border-left: 5px solid white;
    padding-left: 15px;
}

.credits-flex-container {
    display: flex;
    gap: 80px;             /* Space between the IG logo and the penguin */
    align-items: center;   /* Aligns the logo and the image vertically at their centers */
    margin-top: 30px;
}

/* Update this section in styles.css */
.gallery-img {
    width: 300px;          /* Match the width of your IG logo */
    height: 300px;         /* Optional: Set a fixed height for a perfect square */
    border-radius: 8px;    /* Keeps the rounded corners */
    border: 2px solid var(--credits-pics-border-color); /* Maintains the UTD branding border */
    object-fit: cover;     /* Ensures the penguin isn't stretched even if you change dimensions */
    transition: transform 0.3s ease; /* Keeps the hover effect smooth */
}

.gallery-img:hover {
    transform: scale(1.05); /* Subtle zoom when hovering */
}

/* =========================================
   6. MOBILE RESPONSIVENESS (Media Queries)
   ========================================= */

@media screen and (max-width: 768px) {
    /* 1. Change layout from side-by-side to vertical stack */
    .container {
        flex-direction: column;
        overflow-y: auto;
    }

    body {
        overflow-y: auto; /* Allow the entire page to scroll on mobile */
    }

    /* 2. Make the sidebar a top navigation bar */
    .sidebar {
        width: 100%;
        height: auto;
        padding: 15px;
        position: relative;
    }

    .sidebar h2 {
        margin-bottom: 15px;
        font-size: 20px;
    }

    /* Horizontal scroll for menu items if they are too long */
    .sidebar ul {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 10px;
    }

    .sidebar ul li {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .sidebar a {
        font-size: 14px;
        padding: 8px 12px;
        white-space: nowrap;
    }

    /* Hide the gavel logo on small mobile screens to save space */
    .sidebar-footer {
        display: none;
    }

    /* 3. Adjust Main Content padding */
    .main-content {
        padding: 20px;
        overflow-y: visible; /* Let the container handle scrolling */
    }

    header h1 {
        font-size: 24px;
    }

    /* 4. Make charts fit mobile screens */
    .chart-card {
        padding: 15px;
    }

    /* Adjust height of specific charts for mobile viewing */
    #chart_Operating_Revenue26, #chart_Non-operating_Revenue26, #chart_Expense26,
    #housingChart, #urecChart, #parkingChart, #treemapChart {
        height: 400px; /* Slightly shorter for mobile */
    }

    /* Ensure complex charts like BOT have enough room */
    #chart_budget_over_time_operating_revenue,
    #chart_budget_over_time_non_operating_revenue, 
    #chart_budget_over_time_expense {
        height: 800px;
    }

    /* 5. Responsive Credits and Photos */
    .people-grid {
        grid-template-columns: 1fr; /* Single column for headshots */
    }

    .credits-flex-container {
        flex-direction: column;
        gap: 30px;
    }

    .gallery-img {
        width: 100%; /* Photos take full width of card */
        height: auto;
    }

    .link-icon {
        width: 150px; /* Scale down Instagram/Logo icons */
    }

    /* 6. Ensure the data table can scroll horizontally */
    .fees-table-wrap {
        margin: 0 -15px; /* Pull to edges */
        padding: 0 15px;
    }
    
    .fees-row {
        font-size: 12px; /* Smaller text for compact view */
    }
}