/* 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 --- */

/* --- Bootstrap Pagination Override --- */
/* Make active page use site purple instead of Bootstrap blue */
.pagination .page-item.active .page-link {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: white;
}

.pagination .page-link {
    color: var(--color-secondary);
}

.pagination .page-link:hover {
    color: var(--color-primary);
    background-color: #f3f0ff;
    border-color: var(--color-secondary);
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 0.25rem rgba(167, 139, 250, 0.25);
}
/* --- End Pagination Override --- */

/* --- Print Styles --- */
/* Hide print logo on screen */
.logo-print {
    display: none !important;
}

@media print {
    /* Reduce font size for print */
    body {
        font-size: 10pt !important;
    }

    h4 {
        font-size: 14pt !important;
    }

    h5 {
        font-size: 12pt !important;
    }

    h6 {
        font-size: 11pt !important;
    }

    /* Switch navbar to white background for printing */
    .navbar.bg-dark {
        background-color: #fff !important;
        border-bottom: 1px solid #ddd;
    }

    /* Swap logos for print */
    .logo-screen {
        display: none !important;
    }
    .logo-print {
        display: inline-block !important;
    }

    /* Hide elements not needed for printing */
    #sidebarMenu,
    .navbar-toggler,
    .navbar-collapse,
    #feedbackModal,
    .alert-dismissible .btn-close {
        display: none !important;
    }

    /* Make main content full width when printing */
    main.main-content-area {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 20px !important;
    }

    /* Ensure proper page breaks */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }

    table, figure, img {
        page-break-inside: avoid;
    }

    /* Ensure links are readable when printed */
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }

    /* Show URL after links in content area (optional - useful for legal docs) */
    .container a[href^="http"]:after,
    .container a[href^="mailto"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Don't show URL for internal navigation links */
    .container a[href^="/"]:after,
    footer a:after {
        content: none;
    }
}
/* --- End Print Styles --- */

/* --- CKEditor Table Styles --- */
/* Style tables in user-generated content areas to match Bootstrap tables.
   CKEditor outputs plain <table> elements without Bootstrap classes.
   These styles ensure consistent appearance for policy documents and other
   content areas that display HTML from CKEditor. */

/* Target tables in content containers */
.col-md-10 table:not(.table),
.main-content-area table:not(.table),
figure.table table,
.ck-content table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    border: 1px solid #dee2e6;
}

.col-md-10 table:not(.table) th,
.col-md-10 table:not(.table) td,
.main-content-area table:not(.table) th,
.main-content-area table:not(.table) td,
figure.table table th,
figure.table table td,
.ck-content table th,
.ck-content table td {
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    vertical-align: top;
}

.col-md-10 table:not(.table) thead th,
.main-content-area table:not(.table) thead th,
figure.table table thead th,
.ck-content table thead th {
    background-color: #f8f9fa;
    font-weight: bold;
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}

.col-md-10 table:not(.table) tbody tr:nth-of-type(odd),
.main-content-area table:not(.table) tbody tr:nth-of-type(odd),
figure.table table tbody tr:nth-of-type(odd),
.ck-content table tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Wrapper for responsive horizontal scroll */
figure.table {
    margin: 1rem 0;
    overflow-x: auto;
}
/* --- End CKEditor Table Styles --- */

/* --- Franchise Group Selector (Navbar) --- */
/* Dropdown selector for users with multiple franchise groups */
#franchiseGroupSelector {
    min-width: 180px;
    cursor: pointer;
}
/* --- End Franchise Group Selector --- */