/* Refined Design System: Dark Grey + Dark Blue Focus, Improved Readability */
:root {
    /* Color Palette - Emphasizing White and Dark Grey */
    --primary-color: #20458c; /* Blue for primary actions/links */
    --primary-hover: #1a3a75;
    
    --grey-900: #111827; /* Deepest Grey / Near Black for strong accents/text */
    --grey-800: #1F2937; /* Dark Grey for less emphasis than 900 */
    --grey-700: #374151; /* Primary Dark Grey text */
    --grey-600: #4B5563; /* Secondary Dark Grey text */
    --grey-500: #6B7280; /* Tertiary Grey text / subtle borders */
    --grey-400: #9CA3AF; /* Lighter Grey for hints/borders */
    --grey-300: #D1D5DB; /* Light Grey for borders/separators */
    --grey-200: #E5E7EB; /* Very Light Grey for subtle backgrounds/dividers */
    --grey-100: #F3F4F6; /* Off-White for main page canvas */
    --grey-50: #F9FAFB;   /* Near White for light card headers etc. */

    --white: #FFFFFF;

    /* Status Colors */
    --success-color: #057A55; 
    --warning-color: #CA8A04; 
    --danger-color: #B91C1C;  

    /* Typography */
    --font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Base Text Colors */
    --text-primary: var(--grey-700); 
    --text-secondary: var(--grey-600);
    --text-tertiary: var(--grey-500);
    --text-link: var(--primary-color);
    --text-on-dark: var(--grey-100); 
    --text-on-primary-btn: var(--white);
    --text-dark-strong: var(--grey-900); /* For very prominent dark text */

    /* Background Colors */
    --bg-canvas: #f1f6ff; /* Main page background - light blue-white */
    --bg-content-primary: var(--white); /* Card backgrounds, primary content areas - pure white */
    --bg-content-secondary: var(--grey-50); /* Slightly off-white for subtle differentiation, like card footers/headers */
    --bg-elevated: var(--white);
    --bg-dark-accent: var(--grey-900); /* For header/footer - very dark grey */
    
    /* Borders and Separators */
    --border-color-light: var(--grey-300);
    --border-color-medium: var(--grey-400);
    --border-color-strong: var(--grey-500);
    --separator-color: var(--grey-200); /* Lighter separator */

    /* Radii */
    --border-radius-sm: 4px;
    --border-radius-md: 6px; /* Slightly reduced for a tighter look */
    --border-radius-lg: 10px;
    --border-radius-xl: 14px;
    --border-radius-pill: 9999px;

    /* Shadows - More subtle, layered feel */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.09), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --transition-fast: all 0.15s ease-in-out;
    --transition-std: all 0.2s ease-in-out; /* Slightly faster std transition */

    /* Spacing System (base 4px) */
    --space-1: 0.25rem; /* 4px */
    --space-2: 0.5rem;  /* 8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem;    /* 16px */
    --space-5: 1.25rem; /* 20px */
    --space-6: 1.5rem;  /* 24px */
    --space-8: 2rem;    /* 32px */
    --space-10: 2.5rem; /* 40px */
    --space-12: 3rem;   /* 48px */
    --space-16: 4rem;   /* 64px */

    /* Font Sizes (approx. Apple's dynamic type scale) */
    --font-size-caption2: 0.75rem;    /* 12px (increased min for readability) */
    --font-size-caption1: 0.8125rem;  /* 13px */
    --font-size-footnote: 0.875rem;   /* 14px */
    --font-size-subheadline: 0.9375rem;/* 15px */
    --font-size-callout: 1rem;        /* 16px */
    --font-size-body: 1rem;           /* 16px - Standard body */
    --font-size-headline: 1.0625rem;  /* 17px, bold */
    --font-size-title3: 1.25rem;      /* 20px */
    --font-size-title2: 1.5rem;       /* 24px */
    --font-size-title1: 1.875rem;     /* 30px */
    --font-size-large-title: 2.25rem; /* 36px */

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500; /* Primary interactive weight */
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* Reset and Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
    font-size: 100%; 
}

body {
    font-family: var(--font-family-sans);
    line-height: 1.6; /* Increased line-height for body text */
    font-weight: var(--font-weight-regular);
    color: var(--text-primary);
    background-color: var(--bg-canvas);
}

/* Links */
a {
    color: var(--text-link);
    text-decoration: none;
    transition: var(--transition-fast);
}
a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-sans);
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: var(--space-3); /* Slightly reduced bottom margin */
    font-weight: var(--font-weight-semibold); /* Default semibold for headings */
}

h1 { font-size: var(--font-size-large-title); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; }
h2 { font-size: var(--font-size-title1); font-weight: var(--font-weight-bold); letter-spacing: -0.018em; }
h3 { font-size: var(--font-size-title2); letter-spacing: -0.015em; }
h4 { font-size: var(--font-size-title3); letter-spacing: -0.01em; }
h5 { font-size: var(--font-size-headline); letter-spacing: -0.005em; }
h6 { font-size: var(--font-size-callout); }

p {
    font-size: var(--font-size-body);
    line-height: 1.7; /* Increased for paragraph readability */
    margin-bottom: var(--space-4);
    color: var(--text-secondary);
}
p.lead {
    font-size: var(--font-size-title3);
    color: var(--text-primary);
    font-weight: var(--font-weight-regular);
}


/* Container */
.container {
    width: 100%;
    max-width: 1120px; /* Slightly wider */
    margin: 0 auto;
    padding: 0 var(--space-6); /* 24px padding */
}

/* Header */
.main-header {
    background-color: var(--white);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color-light);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0;
    height: 64px; /* Slightly taller header */
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--text-dark-strong);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-title3);
}

.logo:hover {
    text-decoration: none;
}

/* Remove underlines from all hover states */
a:hover {
    text-decoration: none;
}

.btn:hover {
    text-decoration: none;
}

.nav-link:hover {
    text-decoration: none;
}

.logo i {
    color: var(--primary-color);
    font-size: 1.7rem;
}

/* Navigation */
.main-nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-2); /* Increased gap slightly */
    list-style: none;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-callout);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--border-radius-md);
    transition: var(--transition-fast);
}

.nav-link:hover {
    color: var(--primary-color);
    background-color: var(--grey-100);
    text-decoration: none;
}
.nav-link.active {
    color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
    background-color: var(--grey-200);
}

/* User Menu */
.user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-2); /* Reduced gap between auth buttons */
}

/* Specific spacing for auth buttons when not logged in */
.user-menu .btn + .btn {
    margin-left: var(--space-2); /* 8px spacing between Login and Sign Up buttons */
}

/* Global button spacing - add margin to buttons that are next to each other */
.btn + .btn,
.d-flex .btn + .btn,
.justify-content-end .btn + .btn,
.card-footer .btn + .btn,
.modal-body .btn + .btn {
    margin-left: var(--space-2); /* 8px spacing between any adjacent buttons */
}

.credits-display {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--grey-100);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--border-radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-footnote);
    color: var(--text-primary);
}

.credits-display i {
    color: var(--primary-color); /* Use primary for credit icon for pop */
    font-size: 1rem;
}

.user-dropdown {
    position: relative;
}

.user-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-callout);
}

.user-btn:hover {
    background-color: var(--grey-100);
    color: var(--primary-color);
}
.user-btn img.avatar {
    width: 32px; /* Slightly larger avatar */
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--grey-700); /* Subtle border for avatar */
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 240px; /* Wider dropdown */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-var(--space-1));
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s var(--transition-fast);
    z-index: 1100;
    padding: var(--space-2) 0; /* Padding around items */
}
.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s 0s;
}

.dropdown-header {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-caption1);
    color: var(--text-tertiary);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase; /* Uppercase header for distinction */
    letter-spacing: 0.05em;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    color: var(--text-primary);
    font-size: var(--font-size-callout);
    transition: var(--transition-fast);
}
.dropdown-item i {
    color: var(--text-secondary);
    width: 18px; /* Align icons */
    text-align: center;
    font-size: 1.1em;
}

.dropdown-item:hover {
    background-color: var(--grey-100); /* Lighter hover for dropdown items */
    color: var(--primary-color); /* Accent color on hover */
}
.dropdown-divider {
    height: 1px;
    background-color: var(--separator-color);
    margin: var(--space-2) 0;
}

/* Main Content Area */
.main-content {
    padding-top: var(--space-8);
    padding-bottom: var(--space-16);
    min-height: calc(100vh - 128px); /* header (64) + footer (approx 64) */
}

/* Page Headers within content */
.page-title-container { 
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
}
.page-title-container h1 {
    font-size: var(--font-size-title1); /* Reduced from large-title for page content */
    margin-bottom: var(--space-1);
    font-weight: var(--font-weight-bold);
}
.page-title-container p.subtitle {
    font-size: var(--font-size-title3);
    color: var(--text-secondary);
    margin-top: var(--space-1);
    margin-bottom: 0;
    font-weight: var(--font-weight-regular);
}


/* Flash Messages */
.flash-container {
    position: fixed;
    top: var(--space-5); 
    right: var(--space-5); 
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 400px;
}

.flash-message {
    display: flex;
    align-items: flex-start; 
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    color: var(--white); 
    font-size: var(--font-size-callout);
    animation: flashSlideIn 0.3s ease-out;
}
.flash-message i { 
    font-size: 1.25rem;
    margin-top: 1px; 
}

.flash-success { background-color: var(--success-color); color: var(--white); }
.flash-error { background-color: var(--danger-color); color: var(--white); border: 1px solid color-mix(in srgb, var(--danger-color) 80%, black); }
.flash-info { background-color: var(--primary-color); color: var(--white); }
.flash-warning { background-color: var(--warning-color); color: var(--grey-900); } /* Dark text on yellow */

.flash-content {
    flex-grow: 1;
}
.flash-title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-1);
}

.flash-close {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.8;
    cursor: pointer;
    padding: var(--space-1);
    margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2) + var(--space-1)) 0 0; /* Fine-tune position */
    transition: var(--transition-fast);
}
.flash-close:hover { opacity: 1; }

@keyframes flashSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4); 
    border: 1px solid transparent;
    border-radius: var(--border-radius-md);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-callout); 
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-std); /* Standard transition for buttons */
    line-height: 1.4; /* Improved line height for buttons */
    white-space: nowrap;
}
.btn i {
    font-size: 1.1em; /* Relative to button font size */
    line-height: 1; /* Prevent icon from affecting button height */
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--text-on-primary-btn);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-xs);
}
.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Standard Button (Grey, for secondary actions) */
.btn-standard {
    background-color: var(--grey-200);
    color: var(--text-primary);
    border-color: var(--grey-300);
}
.btn-standard:hover {
    background-color: var(--grey-300);
    border-color: var(--grey-400);
    color: var(--text-primary);
}

.btn-success { background-color: var(--success-color); color: var(--white); border-color: var(--success-color); }
.btn-success:hover { background-color: color-mix(in srgb, var(--success-color) 85%, black); border-color: color-mix(in srgb, var(--success-color) 85%, black); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn-danger { background-color: var(--danger-color); color: var(--white); border-color: var(--danger-color); }
.btn-danger:hover { background-color: color-mix(in srgb, var(--danger-color) 85%, black); border-color: color-mix(in srgb, var(--danger-color) 85%, black); transform: translateY(-1px); box-shadow: var(--shadow-sm); }


.btn-outline-primary {
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.btn-outline-secondary {
    background-color: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color-medium);
}
.btn-outline-secondary:hover {
    background-color: var(--grey-100);
    color: var(--text-primary);
    border-color: var(--grey-500);
}


.btn-link {
    background: none;
    border: none;
    color: var(--text-link);
    padding: 0;
    font-weight: var(--font-weight-medium); /* Link buttons can be medium weight */
    font-size: var(--font-size-callout);
}
.btn-link:hover {
    text-decoration: underline;
    color: var(--primary-hover);
}

.btn-lg {
    padding: var(--space-3) var(--space-5); 
    font-size: var(--font-size-body); 
}
.btn-sm {
    padding: var(--space-1) var(--space-3); 
    font-size: var(--font-size-footnote); 
    border-radius: var(--border-radius-sm);
}
.btn-icon { 
    padding: var(--space-2);
}


/* Cards */
.card {
    background-color: var(--bg-content-primary); /* Ensure cards are white */
    border: 1px solid var(--border-color-light); /* Light border */
    border-radius: var(--border-radius-xl); 
    box-shadow: var(--shadow-sm); 
    overflow: hidden; 
    transition: var(--transition-std);
    margin-bottom: var(--space-6);
}

.card:hover {
    border-color: var(--border-color-medium); /* Subtle border change on hover */
}

.card-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--separator-color); /* Use lighter separator */
    background-color: var(--bg-content-secondary); /* Subtle light grey for headers */
}
.card-header h3, .card-header h4 {
    margin-bottom: 0;
    font-size: var(--font-size-title3);
    font-weight: var(--font-weight-medium); /* Medium weight for card titles */
}

.card-body {
    padding: var(--space-5);
}
.card-body p:last-child {
    margin-bottom: 0;
}

.card-footer {
    padding: var(--space-3) var(--space-5); 
    border-top: 1px solid var(--separator-color); /* Use lighter separator */
    background-color: var(--bg-content-secondary);  /* Subtle light grey for footers */
    display: flex;
    justify-content: flex-end; 
    gap: var(--space-3);
}
.card-footer p:last-child {
    margin-bottom: 0;
}

/* Forms */
.form-group {
    margin-bottom: var(--space-5);
}

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-callout);
    color: var(--text-primary);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color-medium); /* More visible border */
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-body);
    transition: var(--transition-fast);
    background-color: var(--bg-content-primary);
    color: var(--text-primary);
    line-height: 1.5;
}
.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--grey-500); /* Using a defined grey for placeholder */
    opacity: 1;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent); /* Slightly stronger focus ring */
}

.form-textarea {
    min-height: 100px; /* Reduced min height */
    resize: vertical;
}

.form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3); /* Increased margin for checkbox groups */
}
.form-check-input {
    appearance: none;
    width: 18px; /* Standardized size */
    height: 18px;
    border: 1px solid var(--border-color-strong); /* Stronger border for checkbox */
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    position: relative;
    top: -1px; 
    background-color: var(--white);
}
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.form-check-input:checked::before {
    content: '\2713'; 
    display: block;
    text-align: center;
    color: white;
    font-size: 12px;
    line-height: 16px;
}
.form-check-input[type="radio"] {
    border-radius: 50%;
}
.form-check-input[type="radio"]:checked::before {
    content: '';
    display: block;
    width: 8px; /* Smaller inner circle for radio */
    height: 8px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.form-check-label {
    font-size: var(--font-size-body);
    color: var(--text-secondary);
    cursor: pointer;
    margin-bottom: 0;
    padding-top: 2px; /* Align with checkbox */
}
.form-help-text {
    font-size: var(--font-size-footnote);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

/* Upload Area */
.upload-area {
    border: 2px dashed var(--border-color-medium);
    border-radius: var(--border-radius-lg);
    padding: var(--space-8) var(--space-5);
    text-align: center;
    transition: var(--transition-std);
    cursor: pointer;
    background-color: var(--grey-50); /* Lighter than secondary content bg */
}

.upload-area:hover,
.upload-area.dragover {
    border-color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color) 8%, var(--grey-50));
}

.upload-icon {
    font-size: 2.5rem; /* Slightly smaller */
    color: var(--grey-500);
    margin-bottom: var(--space-3);
    transition: var(--transition-fast);
}

.upload-area:hover .upload-icon,
.upload-area.dragover .upload-icon {
    color: var(--primary-color);
}
.upload-area p {
    font-size: var(--font-size-callout);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}
.upload-area .btn {
    margin-top: var(--space-4);
}


/* Progress Bar */
.progress {
    width: 100%;
    height: 10px; /* Slightly thicker */
    background-color: var(--grey-200);
    border-radius: var(--border-radius-pill);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
    border-radius: var(--border-radius-pill);
}
.progress-bar.success { background-color: var(--success-color); }
.progress-bar.danger { background-color: var(--danger-color); }
.progress-bar.warning { background-color: var(--warning-color); }


/* Status Badges / Pills */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3); /* More padding for readability */
    border-radius: var(--border-radius-pill);
    font-size: var(--font-size-caption1);
    font-weight: var(--font-weight-medium);
    text-transform: capitalize; /* Capitalize for softer look than uppercase */
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.badge-success { background-color: color-mix(in srgb, var(--success-color) 15%, transparent); color: var(--success-color); }
.badge-danger { background-color: color-mix(in srgb, var(--danger-color) 15%, transparent); color: var(--danger-color); }
.badge-warning { background-color: color-mix(in srgb, var(--warning-color) 20%, transparent); color: var(--warning-color); }
.badge-info { background-color: color-mix(in srgb, var(--primary-color) 15%, transparent); color: var(--primary-color); }
.badge-gray { background-color: var(--grey-200); color: var(--grey-700); }
.badge-outline {
    background-color: transparent;
    border: 1px solid currentColor;
    padding: calc(var(--space-1) - 1px) calc(var(--space-3) - 1px); /* Adjust padding for border */
}


/* Tables */
.table-container {
    overflow-x: auto;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-lg);
    background-color: var(--bg-content-primary);
    box-shadow: var(--shadow-xs);
}
.table {
    width: 100%;
    border-collapse: collapse; 
    font-size: var(--font-size-callout);
}

.table th,
.table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border-color-light);
    vertical-align: middle;
}
.table td {
    color: var(--text-secondary);
}

.table th {
    background-color: var(--bg-content-secondary); /* Lighter grey for table headers */
    font-weight: var(--font-weight-medium); 
    color: var(--text-primary);
    white-space: nowrap;
    text-transform: capitalize;
}
.table thead th {
    border-bottom-width: 1px; /* Standard border for thead */
    border-bottom-color: var(--border-color-medium);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr:hover {
    background-color: var(--grey-100); /* Off-white hover for table rows */
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-content-secondary); /* Subtle stripe */
}
.table-striped tbody tr:nth-of-type(odd):hover {
    background-color: var(--grey-100);
}

/* Footer */
.main-footer {
    background-color: var(--bg-dark-accent);
    color: var(--grey-400);
    margin-top: var(--space-12);
    padding: var(--space-8) 0;
    font-size: var(--font-size-footnote);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-6);
}

.footer-section h4 {
    color: var(--white);
    margin-bottom: var(--space-3);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-callout);
}

.footer-section ul {
    list-style: none;
}
.footer-section ul li {
    margin-bottom: var(--space-2);
}
.footer-section a {
    color: var(--grey-400);
    text-decoration: none;
    transition: var(--transition-fast);
}
.footer-section a:hover {
    color: var(--white);
    text-decoration: underline;
}

.footer-bottom {
    border-top: 1px solid var(--grey-800);
    padding-top: var(--space-6);
    margin-top: var(--space-8);
    text-align: center;
    color: var(--grey-500);
    font-size: var(--font-size-caption1);
}
.footer-bottom p {
    font-size: var(--font-size-caption1);
    color: inherit;
    margin-bottom: 0;
}


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

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.modal-content {
    position: relative;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 2001;
    animation: modalSlideIn 0.2s ease-out;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-color-light);
}

.modal-title {
    margin: 0;
    font-size: var(--font-size-title3);
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-1);
    line-height: 1;
    transition: var(--transition-fast);
}

.modal-close-btn:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: var(--space-5);
}

body.modal-open {
    overflow: hidden;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-regular { font-weight: var(--font-weight-regular) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }

.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-link-color { color: var(--text-link) !important; } /* If primary color is used for more than links */
.text-success { color: var(--success-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-white { color: var(--white) !important; }
.text-grey-900 { color: var(--grey-900) !important; }
.text-grey-700 { color: var(--grey-700) !important; }
.text-grey-600 { color: var(--grey-600) !important; }
.text-grey-500 { color: var(--grey-500) !important; }


/* Spacing utilities */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }

.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-8 { margin-top: var(--space-8) !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: var(--space-5) !important; }
.p-6 { padding: var(--space-6) !important; }

.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }

.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end { justify-content: flex-end !important; }

.flex-column { flex-direction: column !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.w-100 { width: 100% !important; }

/* Mobile Navigation Styles - Hidden by default, shown only on mobile */
.mobile-header-right {
    display: none !important; /* Hidden by default with !important */
    align-items: center;
    gap: var(--space-3);
}

.mobile-menu-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    padding: var(--space-2);
    cursor: pointer;
    transition: var(--transition-fast);
    border-radius: var(--border-radius-sm);
}

.mobile-menu-toggle:hover {
    color: var(--primary-color);
    background-color: var(--grey-100);
}

.mobile-nav {
    display: none !important; /* Hidden by default with !important */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--white);
    border-top: 1px solid var(--border-color-light);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s var(--transition-fast);
    z-index: 1000;
}

.mobile-nav.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s 0s;
}

.mobile-nav-content {
    padding: var(--space-4) 0;
}

.mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav .nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-callout);
    transition: var(--transition-fast);
    border-radius: 0;
}

.mobile-nav .nav-link:hover,
.mobile-nav .nav-link.active {
    color: var(--primary-color);
    background-color: var(--grey-100);
}

.mobile-nav .nav-link i {
    width: 20px;
    text-align: center;
    color: var(--text-tertiary);
}

.mobile-nav .nav-link:hover i,
.mobile-nav .nav-link.active i {
    color: var(--primary-color);
}

.mobile-nav-divider {
    height: 1px;
    background-color: var(--border-color-light);
    margin: var(--space-3) var(--space-6);
}

/* Responsive Design Adjustments */
@media (max-width: 992px) { /* Adjustments for smaller desktops / larger tablets */
    .container {
        max-width: 960px;
        padding: 0 var(--space-5);
    }
}

@media (max-width: 768px) {
    /* Hide desktop navigation and show mobile navigation */
    .main-nav {
        display: none !important;
    }
    
    .user-menu {
        display: none !important;
    }
    
    .mobile-header-right {
        display: flex !important;
    }
    
    .mobile-nav {
        display: block !important;
    }
    
    /* Ensure desktop navigation is completely hidden */
    .header-content .main-nav,
    .header-content .user-menu {
        display: none !important;
    }
    
    .header-content {
        justify-content: space-between; /* Logo on left, mobile controls on right */
        padding: var(--space-3) 0;
    }
    
    .logo {
        font-size: var(--font-size-title2); /* Slightly smaller logo on tablet */
    }

    h1 { font-size: var(--font-size-title1); }
    h2 { font-size: var(--font-size-title2); }
    h3 { font-size: var(--font-size-title3); }

    .container {
        padding: 0 var(--space-4); 
    }

    .flash-container {
        left: var(--space-4);
        right: var(--space-4);
        top: var(--space-4);
        max-width: none;
    }

    .footer-content {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--space-4);
    }
}

@media (max-width: 992px) {
    /* Hide username text on smaller desktop screens */
    .user-btn span {
        display: none;
    }
}

@media (max-width: 576px) { 
    body {
        font-size: 100%; /* Reset to 100% for mobile, adjust individual elements */
    }
    h1 { font-size: var(--font-size-title2); } 
    h2 { font-size: var(--font-size-title3); }
    h3 { font-size: var(--font-size-headline); }

    .container {
        padding: 0 var(--space-3); /* Further reduce padding */
    }

    .mobile-header-right .credits-display {
        font-size: var(--font-size-caption1);
        padding: var(--space-1) var(--space-2);
    }

    .card-header,
    .card-body,
    .card-footer {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .table th,
    .table td {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-footnote);
    }
}