/* Modern Color Palette (Restored for Navbar) */
:root {
  /* Navbar / Sidebar Colors (Restored Blue/Modern) */
  --nav-primary: #4361ee;
  --nav-secondary: #3f37c9;
  --nav-hover-bg: rgba(67, 97, 238, 0.1);
  --nav-text: #2b2d42;
  --sidebar-bg: rgba(255, 255, 255, 0.85);

  /* Wood Theme Colors (For Data/Tables/Cards) */
  --wood-dark: #3E2723;   /* Deep Brown for Headers */
  --wood-medium: #5D4037; /* Medium Brown */
  --wood-light: #D7CCC8;  /* Beige/Tan for Card Bodies */
  --wood-accent: #8D6E63;
  --page-bg-gradient-start: #A1887F;
  --page-bg-gradient-end: #4E342E;
}

body {
  font-family: "Roboto", "Cairo", sans-serif;
  /* Wood Gradient Background for Page */
  background: linear-gradient(135deg, var(--page-bg-gradient-start) 0%, var(--page-bg-gradient-end) 100%) !important;
  background-attachment: fixed;
  color: var(--wood-dark); /* Default text brown */
  min-height: 100vh;
}

/* Glassmorphism Sidebar (Restored Modern Blue Design) */
.offcanvas-md {
  background: var(--sidebar-bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.05);
}

.navbar-brand {
    font-weight: 700;
    color: var(--nav-primary) !important;
    font-size: 1.5rem;
    padding: 1.5rem 1rem;
    display: block;
    text-align: center;
}

#sidebar-nav .nav-link {
    color: var(--nav-text) !important;
    border-radius: 12px;
    padding: 12px 20px;
    margin: 4px 10px;
    font-weight: 500;
    transition: all 0.3s;
}

#sidebar-nav .nav-link:hover {
    background-color: var(--nav-hover-bg);
    color: var(--nav-primary) !important;
    transform: translateX(-5px);
}

#sidebar-nav .nav-link i {
    color: #8d99ae;
}
#sidebar-nav .nav-link:hover i {
    color: var(--nav-primary);
}

#sidebar-nav .nav-link.active {
    background: linear-gradient(135deg, var(--nav-primary), var(--nav-secondary));
    color: white !important;
    box-shadow: 0 4px 15px rgba(67, 97, 238, 0.35);
}
#sidebar-nav .nav-link.active i {
    color: white !important;
}

/* 
   WOOD THEME FOR DATA CONTAINERS (Cards & Tables) 
   Matching the reference image: Dark Header, Beige Body 
*/

.card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    background-color: var(--wood-light) !important; /* Beige Background */
    margin-bottom: 20px;
}

.card-header {
    background-color: var(--wood-dark) !important; /* Dark Brown Header */
    color: white !important;
    border-bottom: 3px solid var(--wood-medium);
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.card-header h3, .card-header h5 {
    color: white !important;
    margin: 0;
}

/* Tables */
.table {
    margin-bottom: 0;
    color: var(--wood-dark);
}

.table thead th {
    background-color: var(--wood-medium) !important; /* Medium Brown Headers */
    color: white !important;
    border: none;
    padding: 12px;
}

.table tbody tr {
    background-color: rgba(255,255,255,0.4); /* Semi-transparent rows on beige */
    transition: background-color 0.2s;
}

.table tbody tr:hover {
    background-color: rgba(255,255,255,0.7);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(62, 39, 35, 0.05); /* Slight brown tint for stripes */
}

/* Form Inputs within Cards */
.form-control, .form-select {
    border: 1px solid var(--wood-medium);
    background-color: rgba(255,255,255,0.9);
    color: var(--wood-dark);
}

.form-control:focus {
    border-color: var(--wood-dark);
    box-shadow: 0 0 0 0.25rem rgba(93, 64, 55, 0.25);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: #FDFBF7; /* Light headings on the dark page background? No, usually headings are inside cards or on top. */
}

/* Button Styling - Matching Wood Theme */
.btn-primary {
    background-color: var(--wood-medium);
    border-color: var(--wood-medium);
    color: white;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--wood-dark);
    border-color: var(--wood-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.btn-secondary {
    background-color: #8d99ae; /* Keep secondary neutral or make it lighter brown? keeping neutral for contrast */
    border-color: #8d99ae;
}

/* Animations & Hover Effects Restoration */
.card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    background-color: var(--wood-light) !important;
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ensure transition exists */
}

.card:hover {
    transform: translateY(-5px) !important; /* Force lift */
    box-shadow: 0 12px 25px rgba(0,0,0,0.2) !important;
}

/* Navbar Scrollbar & Text Visibility */
.sidebar-sticky {
    /* Hide scrollbar for Chrome, Safari and Opera */
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

.sidebar-sticky::-webkit-scrollbar {
    display: none;
}

#sidebar-nav .nav-link {
    color: #1a1a2e !important; /* Darker Text for better visibility */
    font-weight: 600; /* Bolder */
    border-radius: 12px;
    padding: 12px 20px;
    margin: 4px 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhance existing Nav Hover */
#sidebar-nav .nav-link:hover {
    background-color: rgba(67, 97, 238, 0.15); /* Slightly darker hover bg */
    color: var(--nav-primary) !important;
    transform: translateX(-5px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
/* Wood Theme Text Utilities */
.text-wood-dark {
    color: var(--wood-dark) !important;
}
.text-wood-medium {
    color: var(--wood-medium) !important;
}
.text-wood-light {
    color: var(--wood-light) !important;
}
.text-wood-accent {
    color: var(--wood-accent) !important;
}

/* Override chart colors if needed, but for now text classes. */