/* static/css/style.css */

/* Define your color palette as CSS Custom Properties (variables) */
:root {
    --color-primary: #1a1625;      /* Deep Purple */
    --color-secondary: #a78bfa;    /* Light Purple */
    --color-accent: #e95642;      /* Bright Coral */
    --color-light: #FAFAFA;        /* Off-White */
    --color-dark: #222222;        /* Dark Charcoal */
    --color-med: #3b3b3b;        /* Grey */
  
    /* Optional: You could directly override Bootstrap's theme colors here too */
    /* --bs-primary: var(--color-primary); */
    /* --bs-secondary: var(--color-secondary); */
    /* --bs-body-color: var(--color-dark); */
    /* --bs-body-bg: var(--color-light); */
    --bs-link-color: var(--color-secondary);
    --bs-link-hover-color: var(--color-accent);
  }
  

html, body {
    height: 100%; /* Ensure html and body can fill height */
}

body {
    margin: 0;
    padding: 0;
    /* Change background to match navbar/sidebar */
    color: var(--color-dark); 
    background-color: var(--color-light);
    /* background-color: #212529; Bootstrap standard dark color */
    font-family: sans-serif;
    /* No global padding/margin needed now */
}

/* Style for the main content column */
main.main-content-area {
    background-color: #ffffff; /* White background for content */
    min-height: calc(100vh - 56px); /* Calculate min height minus approx navbar height */
    /* Or simply ensure content pushes footer down */
}

header h1 {
    color: var(--color-primary); /* Changed from navy to deep purple */
}

/* --- Navbar Styling --- */
/* Target the specific navbar class from base.html */
.navbar.bg-dark { /* Override Bootstrap's default dark background */
    /* background-color: var(--color-light) !important;  */
  }
  
  /* Ensure navbar text/links are readable on the new background */
  .navbar.navbar-dark .navbar-brand,
  .navbar.navbar-dark .navbar-nav .nav-link,
  .navbar.navbar-dark .navbar-text {
    color: rgba(255, 255, 255, 0.9); /* Light color for text */
  }
  
  .navbar.navbar-dark .navbar-nav .nav-link:hover,
  .navbar.navbar-dark .navbar-nav .nav-link:focus {
    color: #ffffff; /* Full white on hover/focus */
  }
  
  .navbar.navbar-dark .navbar-nav .nav-link.active {
    color: #ffffff; /* Full white for active link */
    font-weight: bold; /* Example: make active link bold */
  }

/* --- Sidebar Styling (Example, assuming you want to change it) --- */
/* Target the specific sidebar class/id from base.html */
#sidebarMenu.bg-dark {
    background-color: var(--color-med) !important;
 }
 /* Adjust sidebar link colors if needed based on new background */
 #sidebarMenu .nav-link {
   color: rgba(255, 255, 255, 0.899); /* Example light color */
 }
 #sidebarMenu .nav-link:hover,
 #sidebarMenu .nav-link:focus {
   color: var(--color-accent);
 }
 #sidebarMenu .nav-link.active {
    /* color: #ffffff; */
 }
 #sidebarMenu .sidebar-heading {
    /* color: rgba(255, 255, 255, 0.5); */ /* Example for muted headings */
 }

 /* --- Button Styling (Overriding Bootstrap Variables) --- */
.btn-primary {
    --bs-btn-color: var(--color-light); /* Text Color (Off-white) */
    --bs-btn-bg: var(--color-primary); /* Background (Deep Purple) */
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-light);
    --bs-btn-hover-bg: #2a1f3d; /* Darker Deep Purple */
    --bs-btn-hover-border-color: #241a35; /* Slightly darker */
    --bs-btn-active-color: var(--color-light);
    --bs-btn-active-bg: #241a35;
    --bs-btn-active-border-color: #1e152d;
    --bs-btn-disabled-color: var(--color-light);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: 26, 22, 37; /* RGB for Deep Purple for focus ring */
  }
  
  .btn-secondary {
    --bs-btn-color: var(--color-primary); /* Text Color (Deep Purple) */
    --bs-btn-bg: var(--color-secondary); /* Background (Light Purple) */
    --bs-btn-border-color: var(--color-secondary);
    --bs-btn-hover-color: var(--color-primary);
    --bs-btn-hover-bg: #9674f4; /* Darker Light Purple */
    --bs-btn-hover-border-color: #8b68f0; /* Slightly darker */
    --bs-btn-active-color: var(--color-primary);
    --bs-btn-active-bg: #8b68f0;
    --bs-btn-active-border-color: #815cec;
    --bs-btn-disabled-color: var(--color-primary);
    --bs-btn-disabled-bg: var(--color-secondary);
    --bs-btn-disabled-border-color: var(--color-secondary);
    --bs-btn-focus-shadow-rgb: 167, 139, 250; /* RGB for Light Purple */
  }
  
  /* Example using Accent for Danger buttons */
  .btn-danger {
    --bs-btn-color: var(--color-light);
    --bs-btn-bg: var(--color-accent); /* Background (Bright Coral) */
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-hover-color: var(--color-light);
    --bs-btn-hover-bg: #d44a38; /* Darker Coral */
    --bs-btn-hover-border-color: #c74533; /* Slightly darker */
    --bs-btn-active-color: var(--color-light);
    --bs-btn-active-bg: #c74533;
    --bs-btn-active-border-color: #bb4030;
    --bs-btn-disabled-color: var(--color-light);
    --bs-btn-disabled-bg: var(--color-accent);
    --bs-btn-disabled-border-color: var(--color-accent);
    --bs-btn-focus-shadow-rgb: 233, 86, 66; /* RGB for Bright Coral */
  }
  
  
  /* --- Default Link Styling --- */
  a, .btn-link { /* Apply to standard links and link-styled buttons */
     color: var(--color-primary);
     text-decoration: none; /* Remove default underline if desired */
  }
  a:hover, .btn-link:hover {
     color: var(--color-secondary);
     text-decoration: underline; /* Add underline on hover */
  }

/* --- Sidebar Width Adjustment --- */
/* Apply from medium screens (md breakpoint: 768px) and up */
@media (min-width: 768px) { /* <-- Changed from 992px */

  /* Target the sidebar by its ID and BS class for specificity */
  #sidebarMenu.col-lg-2, /* Apply even if lg class is present */
  #sidebarMenu.col-md-3 { /* Apply overriding md class too */
    /* Override the width % set by BS columns */
    width: 180px !important; /* Set desired fixed width - ADJUST AS NEEDED */
    /* Also override the flex-basis typically set by column classes */
    flex: 0 0 180px !important; /* Ensure flex-basis matches width */

    /* Optional: Smooth transition */
    transition: width 0.2s ease-in-out, flex 0.2s ease-in-out;
  }

  /* Target the main content area using its class and BS class */
  /* Adjust based on new sidebar width applied from md up */
  main.main-content-area.col-lg-10, /* Apply even if lg class is present */
  main.main-content-area.col-md-9 {  /* Apply overriding md class too */
     /* Override the width % set by BS columns */
     /* Calculate the remaining width */
     width: calc(100% - 180px) !important; /* Match the sidebar width here too */

     /* We might still need to handle the left margin if ms-sm-auto is causing issues */
     /* If content is still under sidebar, uncomment and adjust this: */
     /* margin-left: 180px !important; */

  }

}
/* --- End Sidebar Width Adjustment --- */