/* /static/css/base.css */

/* 
  This file centralizes the core design tokens for the application,
  such as colors, fonts, and spacing. Using CSS variables (--variable-name)
  allows for easy theming and ensures consistency across all components.
*/

:root {
    /* Color Palette: Confident Corporate Navy & Slate (No Purple/Indigo) */
    --primary-color: #1D4ED8; /* Royal Blue - projects strong corporate confidence */
    --primary-color-dark: #1E3A8A; /* Royal Navy for hover/active states */
    --secondary-color: #475569; /* Slate Gray */
    --success-color: #10B981; /* Confident Emerald Green */
    --danger-color: #EF4444; /* Confident Coral/Red */
    --warning-color: #F59E0B; /* Golden Amber */
    --info-color: #06B6D4; /* Tech Cyan */
    --light-gray: #F8FAFC; /* Slate Light backdrop */
    --medium-gray: #E2E8F0; /* Soft slate border */
    --dark-gray: #0F172A; /* Deep navy/slate for dark text/elements */
    --text-color: #1E293B; /* Slate 800 for high-contrast body text */
    --text-color-light: #64748B; /* Slate 500 for secondary text */
    --background-color: #FFFFFF;
    --border-color: #E2E8F0;

    /* Logo Brand lambda gradients & badge background */
    --brand-badge-bg-1: #F1F5F9;
    --brand-badge-bg-2: #E2E8F0;
    --brand-lambda-main-1: #64748B; /* Subtle Slate Gray */
    --brand-lambda-main-2: #475569;
    --brand-lambda-support-1: #94A3B8;
    --brand-lambda-support-2: #64748B;

    /* Previous Confident Indigo Palette (Commented out)
    --primary-color: #4F46E5;
    --primary-color-dark: #3730A3;
    --secondary-color: #475569;
    --success-color: #10B981;
    --danger-color: #EF4444;
    --warning-color: #F59E0B;
    --info-color: #06B6D4;
    --light-gray: #F8FAFC;
    --medium-gray: #E2E8F0;
    --dark-gray: #0F172A;
    --text-color: #1E293B;
    --text-color-light: #64748B;
    --background-color: #FFFFFF;
    --border-color: #E2E8F0;
    */

    /* Original Pale Slate Palette (Commented out)
    --primary-color: #4A5568;
    --primary-color-dark: #2D3748;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-gray: #f8f9fa;
    --medium-gray: #e0e0e0;
    --dark-gray: #343a40;
    --text-color: #333;
    --text-color-light: #666;
    --background-color: #ffffff;
    --border-color: #e0e0e0;
    */

    /* Typography */
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 0.8rem; /* 16px */
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* Spacing & Sizing */
    --spacing-sm: 0.5rem;  /* 8px */
    --spacing-md: 1rem;    /* 16px */
    --spacing-lg: 1.5rem;  /* 24px */
    --spacing-xl: 2rem;    /* 32px */

    /* Borders & Shadows */
    --border-radius: 8px;
    --border-width: 1px;
    --box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* A modern CSS reset for consistent box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-sans-serif);
    color: var(--text-color);
    background-color: var(--light-gray);
    margin: 0;
}

.page-container {
    display: flex;
    /* Add padding to prevent content from hiding behind the fixed header */
    padding-top: 50px;
}

.main-content {
    flex-grow: 1; /* Allows the main content to fill the remaining space */
    padding: var(--spacing-lg);
    position: relative; /* Establishes a positioning context for absolute children */
    overflow-y: auto; /* Adds a scrollbar if content overflows */
    height: calc(100vh - 50px); /* Full height minus header */
}

/* Slim top loading bar for main content swaps */
.main-content::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, color-mix(in srgb, var(--primary-color) 15%, transparent), var(--primary-color) 50%, color-mix(in srgb, var(--primary-color) 15%, transparent));
    box-shadow: 0 1px 6px color-mix(in srgb, var(--primary-color) 50%, transparent), 0 0 4px color-mix(in srgb, var(--primary-color) 30%, transparent);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s ease;
    transform: scaleX(0);
}

/* Offset progress bar starting point to align with sidebar */
body:has(.sidenav) .main-content::before {
    left: var(--sidebar-width);
    transition: left var(--sidebar-transition);
}

/* Trigger animation when HTMX is loading new content */
.main-content.main-loading::before {
    opacity: 1;
    animation: htmx-loading-bar 1.5s infinite linear;
}

@keyframes htmx-loading-bar {
    0% {
        transform: scaleX(0);
        transform-origin: left;
    }
    50% {
        transform: scaleX(1);
        transform-origin: left;
    }
    50.01% {
        transform: scaleX(1);
        transform-origin: right;
    }
    100% {
        transform: scaleX(0);
        transform-origin: right;
    }
}

.content-container {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}

.main-content-full {
    padding: var(--spacing-lg);
    /* Add top padding to account for the fixed header height */
    padding-top: calc(50px + var(--spacing-lg));
}

/* Remove the extra top padding when the page has no header (e.g., login/signup pages) */
body.no-header .page-container {
    padding-top: 0;
}
body.no-header .main-content-full {
    padding-top: var(--spacing-lg);
}

/* --- Header Styles --- */
.main-header {
    /* These properties make the header a full-width flex container */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    background-color: var(--primary-color);
    padding: 0 var(--spacing-xl);
    box-shadow: var(--box-shadow);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 100;
}

.header-logo a {
    color: #fff;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
}

.brand-logo-svg {
    height: 1.75rem;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.main-header .brand-logo-svg {
    --brand-badge-bg-1: rgba(255, 255, 255, 0.08);
    --brand-badge-bg-2: rgba(255, 255, 255, 0.04);
    --brand-lambda-main-1: #F8FAFC;
    --brand-lambda-main-2: #CBD5E1;
    --brand-lambda-support-1: #E2E8F0;
    --brand-lambda-support-2: #94A3B8;
}

.auth-image-panel .brand-logo-svg {
    --brand-badge-bg-1: rgba(255, 255, 255, 0.08);
    --brand-badge-bg-2: rgba(255, 255, 255, 0.04);
    --brand-lambda-main-1: #F8FAFC;
    --brand-lambda-main-2: #CBD5E1;
    --brand-lambda-support-1: #E2E8F0;
    --brand-lambda-support-2: #94A3B8;
}

.sidenav-brand .brand-logo-svg {
    height: 2.15rem;
}

.auth-image-panel h2 .brand-logo-svg {
    height: 3.8rem;
}

.header-user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: #fff;
}

.user-email {
    font-size: 0.85rem;
}

/* --- Centralized Button Styles --- */
.btn {
    display: inline-block;
    font-weight: var(--font-weight-bold);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: var(--border-width) solid transparent;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-base);
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}

.btn-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary:hover {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
}

.btn-secondary {
    color: #fff;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.btn-secondary:hover {
    background-color: #5a6268; /* Darker gray */
    border-color: #545b62;
}

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

.btn-success {
    color: #fff;
    background-color: var(--success-color);
    border-color: var(--success-color);
}
.btn-success:hover {
    background-color: #218838; /* Darker green */
    border-color: #1e7e34;
}

.btn-danger {
    color: #fff;
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}
.btn-danger:hover {
    background-color: #c82333; /* Darker red */
    border-color: #bd2130;
}

.btn-logout {
    color: var(--primary-color);
    background-color: #fff;
    border-color: #fff;
    padding: 0.35rem 0.75rem; /* Slimmer padding for header button */
    font-size: 0.9rem;
}
.btn-logout:hover {
    background-color: var(--light-gray);
}