/* Toolbar row - filters + add buttons on same line */
#toolbar-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

#toolbar-row .object-tools {
    margin: 0;
    padding: 0;
}

/* Filter bar - horizontal dropdown at top */
#changelist-filter-bar {
    flex: 1;
    position: relative;
}

#filter-toggle-btn {
    background: #BF2E1A;
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}

#filter-toggle-btn:hover {
    background: #982517;
}

#filter-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    margin-top: 8px;
    padding: 12px 20px;
    background: var(--darkened-bg, #f5f0ef);
    border: 1px solid var(--border-color, #000);
    border-radius: 3px;
    position: absolute;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#filter-panel .filter-group {
    min-width: 140px;
    padding-left: 8px;
}

#filter-panel .filter-group h3 {
    font-size: 0.7rem;
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

#filter-panel .filter-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#filter-panel .filter-group li {
    font-size: 0.75rem;
    padding: 1px 0;
}

#filter-panel .filter-group li.selected a {
    font-weight: 700;
}

.filter-clear-btn {
    font-size: 0.75rem;
    color: #BF2E1A !important;
    font-weight: 600;
    padding-top: 4px;
    display: inline-block;
}

/* Remove the right-side filter sidebar */
#changelist #changelist-filter {
    display: none !important;
}

#changelist .filtered .changelist-form-container {
    margin-right: 0 !important;
}

/* Pagination prev/next buttons */
.paginator-btn {
    padding: 2px 8px;
    font-weight: 700;
}

/* ===== Light theme ===== */
:root,
[data-theme="light"],
html[data-theme="light"] {
    --primary: #BF2E1A !important;
    --secondary: #982517;
    --accent: #D4503F;
    --primary-fg: #fff !important;

    --header-color: #fff;
    --header-bg: #BF2E1A;
    --header-link-color: #fff;
    --breadcrumbs-fg: #fff;
    --breadcrumbs-link-fg: #fcc;
    --breadcrumbs-bg: #982517;
    --link-fg: #BF2E1A;
    --link-hover-color: #7A1D11;
    --link-selected-fg: #982517;
    --hairline-color: #000;
    --border-color: #000;
    --darkened-bg: #f5f0ef;
    --selected-bg: #fce8e5;
    --selected-row: #fce8e5;
    --button-fg: #fff;
    --button-bg: #BF2E1A;
    --button-hover-bg: #982517;
    --default-button-bg: #BF2E1A;
    --default-button-hover-bg: #982517;
    --close-button-bg: #6B1810;
    --close-button-hover-bg: #4A100B;
    --delete-button-bg: #333;
    --delete-button-hover-bg: #222;
    --object-tools-fg: #fff;
    --object-tools-bg: #BF2E1A;
    --object-tools-hover-bg: #982517;
    --body-fg: #000;
    --body-bg: #fff;
    --body-quiet-color: #000;
    --body-loud-color: #000;
}

/* Force light gray text to black */
[data-theme="light"] .quiet,
[data-theme="light"] .help,
[data-theme="light"] p.help,
[data-theme="light"] .form-row .help,
[data-theme="light"] .small.quiet,
:root .quiet,
:root .help,
:root p.help,
:root .form-row .help,
:root .small.quiet {
    color: #000 !important;
}

/* Site header text white */
#site-name a,
#site-name a:link,
#site-name a:visited {
    color: #fff !important;
}

/* Date/time picker background white */
[data-theme="light"] input[type="datetime-local"],
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"] {
    background-color: #fff;
    color: #000;
}

/* Dark theme filter bar */
html[data-theme="dark"] #filter-toggle-btn {
    background: #982517;
}

html[data-theme="dark"] #filter-toggle-btn:hover {
    background: #BF2E1A;
}

html[data-theme="dark"] #filter-panel {
    background: #2A2A2A;
    border-color: #333;
}

html[data-theme="dark"] .filter-clear-btn {
    color: #E8A49D !important;
}

/* Module headers - consistent across all sections */
#content-main .module h2,
#content-main .module caption,
.module h2,
.module caption {
    background: #BF2E1A;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.module h2 a.section:link,
.module h2 a.section:visited,
.module caption a:link,
.module caption a:visited,
#content-main caption a:link,
#content-main caption a:visited {
    color: #fff;
    font-weight: 400;
}

/* All buttons - consistent red with white text */
.button, input[type=submit], input[type=button],
.submit-row input, a.button,
.object-tools a:link, .object-tools a:visited {
    background-color: #BF2E1A !important;
    color: #fff !important;
}

.button:hover, input[type=submit]:hover, input[type=button]:hover,
.submit-row input:hover, a.button:hover,
.object-tools a:hover, .object-tools a:focus {
    background-color: #982517 !important;
    color: #fff !important;
}

.button.default, input[type=submit].default, .submit-row input.default {
    background: #BF2E1A !important;
    color: #fff !important;
}

.button.default:hover, input[type=submit].default:hover, .submit-row input.default:hover {
    background: #982517 !important;
    color: #fff !important;
}

/* Table text smaller */
#result_list table,
#result_list table td,
#result_list table th,
#result_list table input,
#result_list table select,
#result_list table textarea,
#result_list table a,
#changelist-form table td,
#changelist-form table th,
#changelist-form table input,
#changelist-form table select,
#changelist-form table a {
    font-size: 0.7rem !important;
}

/* Kill any remaining blue - selected rows, active filters, related sidebar */
#changelist-filter li.selected a {
    color: #BF2E1A;
}

#content-related .module h2 {
    border-bottom-color: #000;
}

.selector-chosen h2 {
    background: #BF2E1A;
    color: #fff;
}

/* Form inputs full width */
.form-row input[type="text"],
.form-row input[type="url"],
.form-row input[type="email"],
.form-row input[type="number"],
.form-row textarea,
.form-row select {
    width: 100%;
    box-sizing: border-box;
}

/* Flatpickr custom styling */
.flatpickr-calendar {
    border: 1px solid #000 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #BF2E1A !important;
    border-color: #BF2E1A !important;
    color: #fff !important;
}

.flatpickr-day:hover {
    background: #fce8e5 !important;
    border-color: #fce8e5 !important;
}

.flatpickr-day.today {
    border-color: #BF2E1A !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #BF2E1A !important;
}

.flatpickr-datetime {
    border: 1px solid #000;
}

/* Calendar */
.calendarbox .calendarnav-previous,
.calendarbox .calendarnav-next {
    background: #BF2E1A;
}

.calendar td.selected a {
    background: #BF2E1A;
    color: #fff;
}

/* Submit row buttons */
.submit-row input[type="submit"],
.submit-row a.button {
    background: #BF2E1A;
    color: #fff;
}

.submit-row input[type="submit"]:hover,
.submit-row a.button:hover {
    background: #982517;
}


/* ===== Dark theme ===== */
html[data-theme="dark"] {
    --primary: #BF2E1A !important;
    --primary-fg: #fff !important;
    --header-color: #fff;
    --header-bg: #BF2E1A;
    --header-link-color: #fff;
    --breadcrumbs-fg: #fff;
    --breadcrumbs-link-fg: #fff;
    --breadcrumbs-bg: #D4503F;
    --link-fg: #E8A49D;
    --link-hover-color: #F2C4BF;
    --link-selected-fg: #E8A49D;
    --hairline-color: #222;
    --border-color: #333;
    --darkened-bg: #2A2A2A;
    --selected-bg: #3D1A15;
    --selected-row: #3D1A15;
    --button-fg: #fff;
    --button-bg: #982517;
    --button-hover-bg: #BF2E1A;
    --default-button-bg: #982517;
    --default-button-hover-bg: #BF2E1A;
    --close-button-bg: #333;
    --close-button-hover-bg: #444;
    --delete-button-bg: #333;
    --delete-button-hover-bg: #444;
    --object-tools-fg: #fff;
    --object-tools-bg: #982517;
    --object-tools-hover-bg: #BF2E1A;
    --body-fg: #eee;
    --body-bg: #1a1a1a;
    --body-quiet-color: #ccc;
    --body-loud-color: #fff;
}

/* Header - all text white */
html[data-theme="dark"] #header {
    color: #fff;
}

html[data-theme="dark"] #site-name a,
html[data-theme="dark"] #site-name a:link,
html[data-theme="dark"] #site-name a:visited {
    color: #fff !important;
}

html[data-theme="dark"] #user-tools,
html[data-theme="dark"] #user-tools a,
html[data-theme="dark"] #user-tools button {
    color: #fff;
}

/* Breadcrumbs - lighter red bar, white text */
html[data-theme="dark"] #breadcrumbs {
    background: #D4503F;
    color: #fff;
}

html[data-theme="dark"] #breadcrumbs a {
    color: #fff;
}

/* Links */
html[data-theme="dark"] a:link,
html[data-theme="dark"] a:visited {
    color: #E8A49D;
}

html[data-theme="dark"] a:hover {
    color: #F2C4BF;
}

/* Table rows - alternating dark grays */
html[data-theme="dark"] #result_list tbody tr:nth-child(odd) {
    background: #1a1a1a;
}

html[data-theme="dark"] #result_list tbody tr:nth-child(even) {
    background: #242424;
}

html[data-theme="dark"] #result_list tbody tr:hover {
    background: #3D1A15;
}

/* Module headers - dark theme consistent */
html[data-theme="dark"] .module h2,
html[data-theme="dark"] .module caption,
html[data-theme="dark"] #content-main .module h2,
html[data-theme="dark"] #content-main .module caption {
    background: #BF2E1A !important;
    color: #fff !important;
    font-weight: 400;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

html[data-theme="dark"] .module h2 a.section:link,
html[data-theme="dark"] .module h2 a.section:visited,
html[data-theme="dark"] .module caption a:link,
html[data-theme="dark"] .module caption a:visited,
html[data-theme="dark"] #content-main caption a:link,
html[data-theme="dark"] #content-main caption a:visited {
    color: #fff !important;
    font-weight: 400;
}

/* Current tab / active nav - red instead of blue */
html[data-theme="dark"] .viewlink.is-selected,
html[data-theme="dark"] .selected a,
html[data-theme="dark"] #changelist-filter li.selected a,
html[data-theme="dark"] .actions select,
html[data-theme="dark"] #changelist-filter h3 {
    color: #E8A49D;
}

/* All buttons - consistent darker red with white text */
html[data-theme="dark"] .button,
html[data-theme="dark"] input[type=submit],
html[data-theme="dark"] input[type=button],
html[data-theme="dark"] .submit-row input,
html[data-theme="dark"] a.button,
html[data-theme="dark"] .object-tools a:link,
html[data-theme="dark"] .object-tools a:visited {
    background-color: #982517 !important;
    color: #fff !important;
}

html[data-theme="dark"] .button:hover,
html[data-theme="dark"] input[type=submit]:hover,
html[data-theme="dark"] input[type=button]:hover,
html[data-theme="dark"] .submit-row input:hover,
html[data-theme="dark"] a.button:hover,
html[data-theme="dark"] .object-tools a:hover,
html[data-theme="dark"] .object-tools a:focus {
    background-color: #BF2E1A !important;
    color: #fff !important;
}

/* Form inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: #2A2A2A;
    color: #eee;
    border-color: #333;
}

html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"] {
    background-color: #2A2A2A;
    color: #eee;
}

/* Dark theme flatpickr */
html[data-theme="dark"] .flatpickr-calendar {
    background: #2A2A2A !important;
    border-color: #444 !important;
}

html[data-theme="dark"] .flatpickr-months,
html[data-theme="dark"] .flatpickr-weekdays,
html[data-theme="dark"] .flatpickr-month {
    background: #333 !important;
    color: #eee !important;
}

html[data-theme="dark"] .flatpickr-weekday {
    color: #ccc !important;
}

html[data-theme="dark"] .flatpickr-day {
    color: #eee !important;
}

html[data-theme="dark"] .flatpickr-day:hover {
    background: #3D1A15 !important;
    border-color: #3D1A15 !important;
}

html[data-theme="dark"] .flatpickr-day.selected,
html[data-theme="dark"] .flatpickr-day.selected:hover {
    background: #BF2E1A !important;
    border-color: #BF2E1A !important;
    color: #fff !important;
}

html[data-theme="dark"] .flatpickr-day.today {
    border-color: #BF2E1A !important;
}

html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
html[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
    fill: #eee !important;
}

html[data-theme="dark"] .flatpickr-time input,
html[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
    color: #eee !important;
    background: #2A2A2A !important;
}

html[data-theme="dark"] .flatpickr-day.prevMonthDay,
html[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: #666 !important;
}

html[data-theme="dark"] .flatpickr-current-month input.cur-year,
html[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months {
    color: #eee !important;
    background: transparent !important;
}