/* LEFT PANEL */

/* 1. Main Sidebar Background */
.md\:fixed .flex-grow.overflow-y-auto {
    background-color: #8b0101 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 2. Top Company Header Area */
.md\:fixed .h-16.border-b {
    background-color: #8b0101 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 3. Text & Icons (Making them white for contrast) */
.md\:fixed nav span, 
.md\:fixed .truncate,
.md\:fixed nav svg {
    color: #ffffff !important;
}

/* Force SVG paths and lines to be white */
.md\:fixed nav svg path, 
.md\:fixed nav svg line, 
.md\:fixed nav svg polyline, 
.md\:fixed nav svg circle {
    stroke: #ffffff !important;
}

/* Fix for icons that use "fill" instead of "stroke" */
.md\:fixed nav svg path[fill], 
.md\:fixed nav svg circle[fill] {
    fill: #ffffff !important;
    stroke: none !important;
}

/* 4. Hover Effects */
.md\:fixed .hover\:bg-gray-700:hover,
.md\:fixed nav a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* 5. Active Link Highlight (The vertical bar on the left) */
.md\:fixed .border-l-4 {
    border-left-color: #ffffff !important;
}



/* TOP PANEL */
/* 1. The Main Background */
[data-cy="topNavbar"] {
    background-color: #8b0101 !important;
}

/* 2. Text (Dashboard title and Search text) */
[data-cy="topNavbar"] h2,
[data-cy="topNavbar"] p {
    color: #ffffff !important;
}

/* 3. Icons (The + button, Bell, Search icon, etc.) */
/* This targets the SVG container and all internal paths/shapes */
[data-cy="topNavbar"] svg,
[data-cy="topNavbar"] svg * {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* 4. Borders (Quick Popover button and Search container) */
[data-cy="topNavbar"] button,
[data-cy="topNavbar"] .hidden.lg\:flex.items-center.border,
[data-cy="topNavbar"] .flex.items-center.border.px-1\.5 {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* 5. The "Ctrl+K" shortcut badge */
[data-cy="topNavbar"] .flex.items-center.border.px-1\.5 p {
    color: rgba(255, 255, 255, 0.8) !important;
}
/* Fix the Quick Add (+) button: Remove the white background */
[data-cy="quickPopoverButton"] {
    background-color: transparent !important;
    background-image: none !important;
    /* This makes the border a subtle white so it looks like a clean outline button */
    border-color: rgba(255, 255, 255, 0.5) !important; 
}

/* Ensure the plus icon is white and visible */
[data-cy="quickPopoverButton"] svg,
[data-cy="quickPopoverButton"] svg path {
    fill: #ffffff !important;
    stroke: none !important; /* The + icon uses fill, not stroke */
}

/* Add a hover effect so it feels like a button */
[data-cy="quickPopoverButton"]:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}



/* CENTER PANEL */
/* 1. PRIMARY BUTTON (e.g., "New Product") */
/* Targets the main action button using its specific blue background color */
main.flex-1 a[style*="background-color: rgb(47, 125, 195)"] {
    background-color: #8b0101 !important;
    border-color: #8b0101 !important;
    color: #ffffff !important;
}

/* 2. SECONDARY BUTTONS ("Columns" and "Import") */
/* These currently have white/gray backgrounds; we'll give them a red outline style */
main.flex-1 button[style*="background-color: white"], 
main.flex-1 .sc-euHrWb.jEusft {
    border-color: #8b0101 !important;
    background-color: transparent !important;
    color: #8b0101 !important;
}

/* Fix Icons inside Columns/Import buttons to match the red text */
main.flex-1 button svg *, 
main.flex-1 .sc-euHrWb svg * {
    stroke: #8b0101 !important;
    fill: none !important; /* Most secondary icons here are stroke-based */
}

/* Special fix for the Import icon which uses 'fill' */
main.flex-1 .sc-euHrWb svg path {
    fill: #8b0101 !important;
}


/* ACTION BUTTONS */
/* 1. THE BUTTON: Text, Background, and Border */
button[data-cy="chevronDownButton"] {
    background-color: #8b0101 !important;
    border-color: #8b0101 !important;
    color: #ffffff !important;
}

/* 2. THE TEXT: Force it to stay white */
button[data-cy="chevronDownButton"] span {
    color: #ffffff !important;
}

/* 3. THE ARROW: Force the SVG stroke to white globally */
/* We target the polyline inside the SVG to ensure the "V" shape is white */
button[data-cy="chevronDownButton"] svg polyline {
    stroke: #ffffff !important;
    stroke-width: 3px !important;
}

/* 4. THE HOVER: Kill the white background and gray border */
/* We must target the classes specifically to beat the Tailwind hover: utility */
button[data-cy="chevronDownButton"].hover\:bg-white:hover {
    background-color: #a30101 !important; /* Slightly lighter red on hover */
    border-color: #a30101 !important;
    color: #ffffff !important;
}

/* Ensure the arrow stays white during the hover transition */
button[data-cy="chevronDownButton"]:hover svg polyline {
    stroke: #ffffff !important;
}

/* 5. THE POP-OUT MENU: The actual dropdown content */
/* This targets the container that appears when 'aria-expanded' is true */
[id^="headlessui-menu-items"],
div[role="menu"] {
    background-color: #ffffff !important; /* Keeping menu white for legibility */
    border: 1px solid #8b0101 !important;
}

/* Change the text color of the items inside that menu to your red */
div[role="menu"] button, 
div[role="menu"] a {
    color: #8b0101 !important;
}



/* ACTION BUTTON MENU */
/* 1. THE MENU CONTAINER */
[data-tippy-root] .sc-jBIHhB {
    background-color: #8b0101 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 2. THE ICONS: Kill the background boxes */
/* This targets the 'transparent' layer often found in these SVGs */
[data-tippy-root] svg path[fill="none"],
[data-tippy-root] svg rect[fill="none"],
[data-tippy-root] svg [style*="fill: none"] {
    display: none !important;
}

/* 3. THE ICONS: Color only the actual artwork */
/* We target 'path' and 'circle' specifically so we don't hit the SVG background */
[data-tippy-root] svg path:not([fill="none"]),
[data-tippy-root] svg circle,
[data-tippy-root] svg polygon {
    fill: #ffffff !important;
    stroke: none !important;
}

/* 4. THE ICONS: Fix for stroke-based icons (like the + in Enter Payment) */
[data-tippy-root] svg[stroke="currentColor"] {
    stroke: #ffffff !important;
}

/* 5. THE TEXT: Ensure labels are crisp white */
[data-tippy-root] .ml-2,
[data-tippy-root] a,
[data-tippy-root] button {
    color: #ffffff !important;
}

/* 6. THE HOVER: Subtle highlight for the selected row */
[data-tippy-root] a:hover,
[data-tippy-root] button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* 7. CLEAN UP THE DIVIDERS */
[data-tippy-root] .border-b {
    border-color: rgba(255, 255, 255, 0.15) !important;
}





/* DASHBOARD DAY/WEEK/MONTH SELECTOR */
/* 1. THE MAIN CONTAINER */
/* Restore the light border and subtle background */
.flex.rounded-lg.overflow-hidden.border.shadow-sm {
    border-color: rgba(9, 9, 11, 0.15) !important;
    background-color: #ffffff !important;
}

/* 2. THE BUTTONS (Day, Week, Month) */
/* Force them back to dark text and white background by default */
.sc-jJhUpn {
    background-color: #ffffff !important;
    color: rgb(42, 48, 61) !important;
    border-color: rgba(9, 9, 11, 0.15) !important;
    transition: all 0.2s ease;
}

/* 3. THE ACTIVE STATE (The selected one) */
/* Invoice Ninja changes the second class (e.g., fFdxqk) when active */
/* We target the one where the inline style is white text */
.sc-jJhUpn[style*="color: rgb(255, 255, 255)"],
.sc-jJhUpn.fFdxqk {
    background-color: #8b0101 !important;
    color: #ffffff !important;
}

/* 4. HOVER STATE */
/* Give the unselected buttons a light gray hover instead of red */
.sc-jJhUpn:not([style*="color: rgb(255, 255, 255)"]):hover {
    background-color: #f4f4f5 !important;
    color: rgb(42, 48, 61) !important;
}