/* static/css/always_lunes_admin.css */

:root {
    --alwayslunes-yellow: #f4c01d; 

    /* 1. Core Variable Overrides (Needed for framework base) */
    --primary: var(--alwayslunes-yellow); 
    --link-color: var(--alwayslunes-yellow); 
}

/* 2. HIGH SPECIFICITY AND !IMPORTANT OVERRIDES */

/* Universal Links, Icons, and Text */
a, .text-primary, .fas.fa-star {
    color: var(--alwayslunes-yellow) !important;
}

/* Sidebar Active/Hover State Text */
.nav-pills .nav-link.active, 
.nav-pills .show > .nav-link,
.nav-sidebar .nav-item .nav-link:hover {
    background-color: #2e2e2e !important; /* Keep background dark grey */
    color: var(--alwayslunes-yellow) !important; /* Force text to be yellow */
}

/* Primary Buttons (Force yellow background) */
.btn-primary, 
.bg-primary {
    background-color: var(--alwayslunes-yellow) !important;
    border-color: var(--alwayslunes-yellow) !important;
    color: #1a1a1a !important; /* Ensure text on yellow buttons is dark */
}

/* Focus and Hover State for Primary Buttons */
.btn-primary:hover, .btn-primary:focus {
    background-color: #e0ac1a !important; 
    border-color: #e0ac1a !important;
}

/* --- Your existing background overrides (Keep these for black/grey) --- */
.app-header {
    background-color: #0d0d0d !important;
    color: #FFFFFF !important;
}
.content-wrapper, 
body, 
.main-footer {
    background-color: #262626 !important; 
    color: #FFFFFF;
}

/* 2. LOGO SIZING FIX (Should still be present) */
.app-header .logo-switch img {
    height: 35px;           
    width: auto !important; 
    max-width: 100%;        
}

/* 3. HEADER AND TITLE POSITIONING */

/* Ensure the title is always in the dark background content header */
.content-header h1 {
    color: #FFFFFF !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
}

/* Hide the redundant title that Jazzmin places inside the light-gray card */
.card-header .card-title {
    display: none !important;
}

/* Ensure the breadcrumbs stay visible and clean above/beside the title */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
}

/* Optional: Add a little breathing room between title and tabs */
.content-wrapper > .content {
    padding-top: 15px !important;
}

/* Fix invisible text in permission select boxes */
.selector select option, 
.selector-available select option, 
.selector-chosen select option {
    color: #333333 !important; /* Dark text */
    background-color: #ffffff !important; /* White background */
}

/* Force the select input itself to respect these colors */
select[multiple] {
    color: #333333 !important;
    background-color: #ffffff !important;
}


/* Hide "Today" and the pipe | but KEEP the calendar icon */
.datetimeshortcuts {
    font-size: 0 !important;
}

.datetimeshortcuts a[id^="calendarlink"] {
    font-size: 14px !important; /* Restore icon size */
    display: inline-block !important;
    vertical-align: middle;
    margin-left: 5px;
}

.datetimeshortcuts a:not([id^="calendarlink"]) {
    display: none !important; /* Hides 'Today' and 'Now' */
}

/* Container for the date input and shortcuts */
.field-start_date .form-row, 
.field-end_date .form-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

/* Ensure the input box doesn't take the full width */
.vDateField {
    display: inline-block !important;
    margin-right: 8px !important;
    margin-bottom: 0 !important;
}

/* Position the calendar icon container to the right */
.datetimeshortcuts {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0 !important; /* Hides 'Today' text */
    margin-top: 0 !important;
}

/* Force the clickable yellow icon to appear */
.datetimeshortcuts a[id^="calendarlink"] {
    display: inline-block !important;
    visibility: visible !important;
    cursor: pointer !important;
    font-size: 18px !important;
}

/* --- SIDEBAR: section names read as headers, items sit under them --- */
.nav-sidebar > .nav-item.has-treeview {
    margin-top: 14px;
}
.nav-sidebar > .nav-item.has-treeview:first-child {
    margin-top: 4px;
}
.nav-sidebar > .nav-item.has-treeview > .nav-link {
    border-bottom: 1px solid #3a3a3a;
    border-radius: 0 !important;
    padding-bottom: 6px;
}
.nav-sidebar > .nav-item.has-treeview > .nav-link p {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    color: var(--alwayslunes-yellow);
}
.nav-sidebar > .nav-item.has-treeview > .nav-link > .nav-icon {
    color: var(--alwayslunes-yellow);
}
.nav-sidebar .nav-treeview {
    padding-top: 4px;
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    padding-left: 1.6rem;
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link p {
    font-weight: 400;
    font-size: 0.88rem;
    color: #cfcfcf;
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link .nav-icon {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Phones: the side menu opens from ☰, so say it: "Menu" next to the bars */
@media (max-width: 991.98px) {
  .main-header [data-widget="pushmenu"]::after { content: " Menu"; font-weight: 700; font-size: 15px; }
}