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

/* ==========================================================================
   1. FONT IMPORT & CSS VARIABLES (FROM PROFILE.CSS)
   ========================================================================== */

   @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

   :root {
     /* Professional color palette */
     --primary: #0069d9;
     --primary-dark: #004182;
     --primary-light: #e8f1fb;
     --neutral-50: #f9fafb;
     --neutral-100: #f3f4f6;
     --neutral-200: #e5e7eb;
     --neutral-300: #d1d5db;
     --neutral-400: #9ca3af;
     --neutral-500: #6b7280;
     --neutral-600: #4b5563;
     --neutral-700: #374151;
     --neutral-800: #1f2937;
     --neutral-900: #111827;
     --success: #059669;
     --error: #dc2626;
     --warning: #f59e0b; /* Assuming #ffd700 from navbar maps to warning or a new --accent-gold variable */
     --accent-gold: #ffd700; /* New variable for clarity if #ffd700 is specific */
   
     /* Spacing system */
     --space-1: 4px;
     --space-2: 8px;
     --space-3: 12px;
     --space-4: 16px;
     --space-5: 20px;
     --space-6: 24px;
     --space-8: 32px;
     --space-navbar-item-padding-y: 0.8rem; /* For navbar consistency */
     --space-navbar-item-padding-x: 1.2rem;
   
     /* Typography */
     --text-xs: 12px;
     --text-sm: 14px;
     --text-md: 16px;
     --text-lg: 18px;
     --text-xl: 20px;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
   
     /* Shadows */
     --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
   
     /* Borders */
     --radius-sm: 4px;
     --radius-md: 6px;
     --radius-lg: 8px;
     --radius-full: 9999px;
     --border-width-base: 1px; /* Common border width */
   }
   
   
   /* ==========================================================================
      2. GLOBAL BODY & HTML STYLES
      ========================================================================== */
   
   html {
     box-sizing: border-box;
   }
   
   *,
   *::before,
   *::after {
     box-sizing: inherit;
   }
   
   body {
     font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     font-size: var(--text-sm);
     line-height: 1.5;
     color: var(--neutral-800);
     background-color: var(--neutral-100); /* Updated from profile.css */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     overflow-x: hidden; /* Prevent horizontal scrolling */
   }
   
   /* ==========================================================================
      3. LAYOUT COMPONENTS (Main, Footer)
      ========================================================================== */
   
   main {
     flex: 1;
     padding: var(--space-5) 0; /* Using spacing variable */
   }
   
   .main-content { /* For primary content blocks on pages */
     background: white; /* Simpler background, more professional */
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-md);
     padding: var(--space-5); /* Using spacing variable */
     margin-bottom: var(--space-5); /* Using spacing variable */
   }
   
   footer {
     background-color: var(--neutral-800); /* Darker neutral for footer */
     color: var(--neutral-200); /* Lighter text on dark background */
     padding: var(--space-3) 0; /* Using spacing variable */
     width: 100%;
     position: relative; /* Keep if needed for specific footer designs */
     text-align: center; /* Good default for footers */
   }
   
   /* ==========================================================================
      4. COMMON UI ELEMENTS (Cards, Buttons - Overriding/Defining for Bootstrap)
      ========================================================================== */
   
   .card {
     background-color: white; /* or var(--neutral-50) for a very light grey */
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-sm); /* Subtle shadow by default */
     border: var(--border-width-base) solid var(--neutral-200); /* Light border */
     transition: box-shadow 0.3s ease, transform 0.3s ease;
   }
   
   .card:hover {
     transform: translateY(-3px); /* Slight lift */
     box-shadow: var(--shadow-md); /* More prominent shadow on hover */
   }
   
   .card-header { /* General card header styling */
     background-color: var(--neutral-50); /* Very light grey, almost white */
     color: var(--neutral-900);
     padding: var(--space-3) var(--space-4);
     border-bottom: var(--border-width-base) solid var(--neutral-200);
     border-top-left-radius: var(--radius-lg); /* Match card's radius */
     border-top-right-radius: var(--radius-lg);
     font-size: var(--text-lg);
     font-weight: var(--font-weight-medium);
   }
   
   .btn { /* Base for all buttons, if you want to override Bootstrap defaults more broadly */
     font-weight: var(--font-weight-medium);
     border-radius: var(--radius-md);
     padding: var(--space-2) var(--space-4);
     transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
   }
   
   .btn-primary {
     background-color: var(--primary) !important; /* Keep important if strictly needed to override Bootstrap */
     border: var(--border-width-base) solid var(--primary) !important;
     color: white !important;
   }
   
   .btn-primary:hover,
   .btn-primary:focus {
     background-color: var(--primary-dark) !important;
     border-color: var(--primary-dark) !important;
     color: white !important;
     box-shadow: var(--shadow-sm);
   }
   
   .btn-secondary {
     background-color: var(--neutral-600) !important;
     border: var(--border-width-base) solid var(--neutral-600) !important;
     color: white !important;
   }
   
   .btn-secondary:hover,
   .btn-secondary:focus {
     background-color: var(--neutral-700) !important;
     border-color: var(--neutral-700) !important;
     color: white !important;
     box-shadow: var(--shadow-sm);
   }
   
   
   /* ==========================================================================
      5. NAVBAR STYLES
      ========================================================================== */
   
   nav.navbar {
     margin-top: 0;
     padding-top: 0; /* Adjusted padding */
     padding-bottom: 0; /* Adjusted padding */
     background-color: var(--primary) !important; /* Using CSS variable */
     box-shadow: var(--shadow-sm); /* Subtle shadow for navbar */
   }
   
   .navbar.navbar-expand-lg.navbar-light.bg-light {
     background-color: var(--primary) !important;
   }
   
   .navbar .container-fluid {
     padding-left: var(--space-4); /* Consistent padding */
     padding-right: var(--space-4);
   }
   
   .navbar-collapse { 
     background-color: var(--primary) !important;
     padding: 0 var(--space-4); /* Consistent padding */
   }
   
   .navbar-brand {
     color: var(--accent-gold) !important;
     font-weight: var(--font-weight-semibold); /* Slightly bolder for brand */
     padding: var(--space-navbar-item-padding-y) var(--space-navbar-item-padding-x);
     font-size: var(--text-lg); /* Brand font size */
   }
   
   .navbar-nav .nav-link {
     color: var(--neutral-100) !important; /* Light color for text on primary bg */
     font-weight: var(--font-weight-medium);
     padding: var(--space-navbar-item-padding-y) var(--space-navbar-item-padding-x);
     transition: color 0.3s ease, background-color 0.3s ease;
     position: relative;
     border-radius: var(--radius-sm); /* Slight rounding for hover effect */
   }
   
   .navbar-nav .nav-link:hover,
   .navbar-nav .nav-link:focus,
   .navbar-nav .nav-link.active { /* Style active links similarly to hover */
     color: white !important; /* Brighter on hover/active */
     background-color: rgba(255, 255, 255, 0.1); /* Subtle background on hover */
   }
   
   .navbar-nav .nav-link::after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     bottom: calc(var(--space-navbar-item-padding-y) / 2 - 5px); /* Adjust position */
     left: 50%;
     background-color: var(--accent-gold);
     transition: width 0.3s ease;
     transform: translateX(-50%);
   }
   
   .navbar-nav .nav-link:hover::after,
   .navbar-nav .nav-link.active::after {
     width: 60%;
   }
   
   .navbar-toggler {
     background-color: transparent; /* Cleaner toggler */
     border: var(--border-width-base) solid rgba(255, 255, 255, 0.5); /* Light border for toggler */
     margin: var(--space-2); /* Consistent margin */
   }
   .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* White toggler icon */
   }
   
   
   /* ==========================================================================
      6. UTILITIES & ANIMATIONS
      ========================================================================== */
   
   
   /* Form controls general */
   input[type="text"],
   input[type="password"],
   input[type="email"],
   input[type="number"],
   input[type="date"],
   textarea,
   select {
     border: 1px solid var(--neutral-300);
     border-radius: var(--radius-sm);
     padding: var(--space-2) var(--space-3);
     font-size: var(--text-sm);
     color: var(--neutral-800);
     background-color: white; /* Or var(--neutral-50) */
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
   }
   
   input[type="text"]:focus,
   input[type="password"]:focus,
   input[type="email"]:focus,
   input[type="number"]:focus,
   input[type="date"]:focus,
   textarea:focus,
   select:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(0, 105, 217, 0.1); /* Using the RGB of --primary */
   }
   
   /* Placeholder styling */
   ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
     color: var(--neutral-400);
     opacity: 1; /* Firefox */
   }
   
   :-ms-input-placeholder { /* Internet Explorer 10-11 */
     color: var(--neutral-400);
   }
   
   ::-ms-input-placeholder { /* Microsoft Edge */
     color: var(--neutral-400);
   }

    /* For tablets and smaller devices */
    @media (max-width: 991.98px) {
        main .container {
            padding-left: var(--space-4);
            padding-right: var(--space-4);
        }

        .main-content {
            padding: var(--space-4);
        }

        .navbar-collapse {
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            margin-top: var(--space-2);
        }
    }

    /* For mobile phones */
    @media (max-width: 575.98px) {
        body {
            font-size: calc(var(--text-sm) + 1px); /* Slightly larger base font on mobile */
        }
        
        main {
            padding-top: var(--space-3);
        }

        .main-content {
            padding: var(--space-3);
        }

        .card-header {
            padding: var(--space-3);
            font-size: var(--text-md);
        }

        h2 {
            font-size: var(--text-lg);
        }
    }