/* Custom Admin UI Tweaks */
:root {
    --brand-darkblue-header: #020c1b;
    --brand-darkblue-main: #0a192f;
    --brand-darkblue-card: #112240;
    --brand-red: #cc0000;
    --brand-red-hover: #990000;
    --brand-black: #000000;
    --brand-white: #ffffff;
    --brand-lightgrey: #e6e6e6;
    /* Used sparingly as an off-white when needed */
}

/* Force Bootstrap 5 Variables to our Dark Theme Colors */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"],
body {
    --bs-body-bg: #0a192f !important;
    --bs-body-bg-rgb: 10, 25, 47 !important;
    --bs-tertiary-bg: #0a192f !important;
    --bs-tertiary-bg-rgb: 10, 25, 47 !important;
    --bs-secondary-bg: #112240 !important;
    --bs-secondary-bg-rgb: 17, 34, 64 !important;
    --bs-heading-color: #ffffff !important;
    --bs-body-color: #ffffff !important;
}

/* --- 1. OVERALL BACKGROUNDS & TEXT --- */
body,
html,
.wrapper,
.app-wrapper,
.content-wrapper,
.app-main,
.app-content,
.main-footer,
.content-header,
.app-content-header,
.content,
.bg-body-tertiary,
.bg-body,
.bg-body-secondary {
    background-color: var(--brand-darkblue-main) !important;
    color: var(--brand-white) !important;
}

/* Headings and titles on the main background */
h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item.active {
    color: var(--brand-white) !important;
}

/* --- 2. CARDS & PANELS --- */
.card,
.info-box,
.small-box,
.card-header,
.card-body,
.card-footer,
#changelist-filter {
    background-color: var(--brand-darkblue-card) !important;
    color: var(--brand-white) !important;
    border-color: var(--brand-darkblue-header) !important;
}

/* Dropdown menu backgrounds */
.dropdown-menu {
    background-color: var(--brand-white) !important;
    color: var(--brand-black) !important;
}

.dropdown-item {
    color: var(--brand-black) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--brand-darkblue-card) !important;
    color: var(--brand-white) !important;
}

/* --- 3. FORM INPUTS & DROPDOWNS (Explicitly White with Black Text) --- */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="file"],
textarea,
select,
select.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown,
.select2-search__field {
    background-color: var(--brand-white) !important;
    color: var(--brand-black) !important;
    border: 1px solid var(--brand-darkblue-header) !important;
}

/* Option tags inside selects */
select option,
.select2-results__option {
    background-color: var(--brand-white) !important;
    color: var(--brand-black) !important;
}

/* Highlighted option in Select2 */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--brand-red) !important;
    color: var(--brand-white) !important;
}

/* Input group add-ons (like the search icon box) */
.input-group-text,
.search-button {
    background-color: var(--brand-lightgrey) !important;
    color: var(--brand-black) !important;
    border: 1px solid var(--brand-darkblue-header) !important;
}

/* --- 4. HEADER / NAVBAR --- */
.main-header,
.app-header,
.main-header .navbar,
.app-header.navbar,
.main-header .nav-link,
.app-header .nav-link,
.navbar-white,
.navbar-light {
    background-color: var(--brand-darkblue-header) !important;
    color: var(--brand-white) !important;
    border-bottom: 1px solid var(--brand-black) !important;
}

.main-sidebar,
.app-sidebar,
.brand-link {
    background-color: var(--brand-darkblue-header) !important;
    color: var(--brand-white) !important;
}

/* Fix long brand text truncation (CHUKA UNIVERSITY CISCO Network Academy) */
.brand-link {
    white-space: normal !important;
    height: auto !important;
    min-height: 50px;
    display: flex !important;
    align-items: center !important;
    padding: 10px 15px !important;
}

.brand-text {
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    font-size: 0.85rem !important;
    /* Slightly smaller to fit nicely */
    line-height: 1.3 !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.nav-sidebar .nav-link p,
.nav-sidebar .nav-link i {
    color: var(--brand-white) !important;
}

.nav-sidebar .nav-item.menu-open>.nav-link,
.nav-sidebar .nav-link.active,
.sidebar-menu .nav-item.menu-open>.nav-link,
.sidebar-menu .nav-link.active,
[data-bs-theme="dark"] .sidebar-menu .nav-link.active,
[data-bs-theme="light"] .sidebar-menu .nav-link.active {
    background-color: var(--brand-darkblue-card) !important;
    color: var(--brand-white) !important;
}

/* Header Text (Dashboard Title & Breadcrumbs) */
.content-header,
.app-content-header,
.content-wrapper>.content-header,
.content-wrapper>.app-content-header,
.content-header.bg-white,
.app-content-header.bg-white,
.content-header.bg-light,
.app-content-header.bg-light,
.theme-darkly .app-content-header,
[data-bs-theme="dark"] .app-content-header {
    background-color: var(--brand-darkblue-main) !important;
    border: none !important;
}

.content-header h1,
.app-content-header h1,
.content-header h3,
.app-content-header h3,
.content-header .col-sm-6 h1,
.app-content-header .col-sm-6 h1,
.app-content-header .col-sm-6 h3 {
    color: var(--brand-white) !important;
}

.breadcrumb,
.breadcrumb.float-sm-right,
.content-header .breadcrumb,
.app-content-header .breadcrumb {
    background-color: transparent !important;
}

.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item.active,
.content-header .breadcrumb-item,
.content-header .breadcrumb-item a,
.app-content-header .breadcrumb-item,
.app-content-header .breadcrumb-item a,
.nav-link,
.nav-item {
    color: var(--brand-white) !important;
}

/* --- 5. BUTTONS AND LINKS --- */
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-default {
    background-color: var(--brand-red) !important;
    color: var(--brand-white) !important;
    border-color: var(--brand-red) !important;
    font-weight: bold !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-default:hover {
    background-color: var(--brand-red-hover) !important;
    color: var(--brand-white) !important;
    border-color: var(--brand-red-hover) !important;
}

a {
    color: var(--brand-white);
}

a:hover {
    color: var(--brand-red);
}

.text-dark {
    color: var(--brand-white) !important;
}

/* --- 6. SECONDARY TEXT (Help text, hints) --- */
.help-text,
.form-text,
.text-muted,
.description,
.help-block,
.help {
    color: var(--brand-lightgrey) !important;
    font-size: 0.85rem;
}

/* --- 7. TABLES & UI PIECES --- */
table th,
table td,
.table {
    color: var(--brand-white) !important;
    border-color: var(--brand-darkblue-header) !important;
}

table.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, .05) !important;
}

/* Fix for white backgrounds causing white-on-white text */
.bg-white,
.bg-light,
.info-box.bg-white,
.info-box.bg-light {
    background-color: var(--brand-white) !important;
    color: var(--brand-black) !important;
}

.bg-white h1,
.bg-white h2,
.bg-white h3,
.bg-white h4,
.bg-white h5,
.bg-white h6,
.bg-white p,
.bg-white span,
.bg-white a,
.bg-white div,
.bg-light h1,
.bg-light h2,
.bg-light h3,
.bg-light h4,
.bg-light h5,
.bg-light h6,
.bg-light p,
.bg-light span,
.bg-light a,
.bg-light div {
    color: var(--brand-black) !important;
}

.bg-white a:hover,
.bg-light a:hover {
    color: var(--brand-red) !important;
}

/* ---------- PRESERVED LAYOUT FIXES ---------- */
/* Add horizontal slider for long content areas */
.card-body,
.form-content,
.inline-group,
.table-responsive,
.selector {
    overflow-x: auto !important;
}

/* Ensure selector widgets don't break layout */
.selector {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.selector-available,
.selector-chosen {
    min-width: 300px !important;
    flex: 1 !important;
}

.selector-available h2,
.selector-chosen h2 {
    color: var(--brand-white) !important;
    font-weight: bold;
    background: var(--brand-darkblue-header) !important;
    font-size: 1rem !important;
    padding: 8px !important;
}

.selector-available .selector-chooseall,
.selector-chosen .selector-clearall,
.selector-available select,
.selector-chosen select {
    color: var(--brand-black) !important;
    background-color: var(--brand-white) !important;
    border: 1px solid var(--brand-darkblue-header) !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    font-weight: bold !important;
}

.selector-available .selector-chooseall,
.selector-chosen .selector-clearall {
    color: var(--brand-white) !important;
    background-color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
}

.selector-available .selector-chooseall:hover,
.selector-chosen .selector-clearall:hover {
    background-color: var(--brand-red-hover) !important;
}

/* ---------- PRESERVED ANIMATIONS ---------- */
@keyframes slow-glow {
    0% {
        box-shadow: 0 0 5px rgba(204, 0, 0, 0.2);
        border-color: rgba(204, 0, 0, 0.3);
    }

    50% {
        box-shadow: 0 0 20px rgba(204, 0, 0, 0.6);
        border-color: rgba(204, 0, 0, 1);
    }

    100% {
        box-shadow: 0 0 5px rgba(204, 0, 0, 0.2);
        border-color: rgba(204, 0, 0, 0.3);
    }
}

@keyframes pulse-dot-anim {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
        box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.7);
    }

    70% {
        transform: scale(1.2);
        opacity: 1;
        box-shadow: 0 0 0 10px rgba(204, 0, 0, 0);
    }

    100% {
        transform: scale(0.9);
        opacity: 0.8;
        box-shadow: 0 0 0 0 rgba(204, 0, 0, 0);
    }
}

.blink-notification {
    animation: slow-glow 3s infinite ease-in-out;
}

.btn-blink {
    position: relative;
    animation: slow-glow 2s infinite ease-in-out !important;
    border-width: 2px !important;
}

.pulse-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--brand-red);
    border-radius: 50%;
    margin-right: 8px;
    animation: pulse-dot-anim 1.5s infinite;
    vertical-align: middle;
}

.pulse-dot-large {
    width: 14px;
    height: 14px;
}

/* =========================================================================
   NUCLEAR OVERRIDES for Stubborn White Backgrounds in AdminLTE v4
   ========================================================================= */

/* The Breadcrumb and Header background */
html body .app-wrapper .app-main .app-content-header,
html body.theme-darkly .app-wrapper .app-main .app-content-header,
[data-bs-theme="dark"] .app-content-header,
[data-bs-theme="light"] .app-content-header,
.app-content-header,
.app-wrapper .app-main>.app-content-header {
    background-color: var(--brand-darkblue-header, #0a192f) !important;
    background: var(--brand-darkblue-header, #0a192f) !important;
}

div.app-content-header {
    background-color: #0a192f !important;
}

/* Breadcrumb wrapper, in case it inherits white */
.app-content-header .container-fluid,
.app-content-header .row,
.app-content-header .breadcrumb {
    background: transparent !important;
    background-color: transparent !important;
}

/* Fix text for these sections again just in case */
.app-content-header h1,
.app-content-header h2,
.app-content-header h3,
.app-content-header h4,
.app-content-header h5,
.app-content-header h6,
.app-content-header .breadcrumb-item,
.app-content-header .breadcrumb-item a,
.app-content-header .breadcrumb-item.active {
    color: #ffffff !important;
}

.app-content-header .breadcrumb-item+.breadcrumb-item::before {
    color: #aaaaaa !important;
}

/* Date & Time Picker Icon Styling */
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
    background-color: #87ceea !important; /* brand-lightblue */
    padding: 4px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    filter: brightness(0.9) !important;
    transition: all 0.2s ease !important;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    background-color: #ffffff !important;
    filter: brightness(1) !important;
    transform: scale(1.1);
}

/* --- 8. ACADEMY DASHBOARD ANIMATIONS --- */
@keyframes pulse-teal {
    0% { box-shadow: 0 0 0 0 rgba(10, 178, 142, 0.7); border-color: rgba(10, 178, 142, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(10, 178, 142, 0); border-color: rgba(10, 178, 142, 1); }
    100% { box-shadow: 0 0 0 0 rgba(10, 178, 142, 0); border-color: rgba(10, 178, 142, 0.4); }
}

@keyframes pulse-subtle {
    0% { border-color: rgba(255, 255, 255, 0.05); }
    50% { border-color: rgba(10, 178, 142, 0.3); }
    100% { border-color: rgba(255, 255, 255, 0.05); }
}

.pulse-teal-btn {
    animation: pulse-teal 2s infinite ease-in-out;
}

.pulse-subtle {
    animation: pulse-subtle 3s infinite ease-in-out;
}

/* Ticket & Dashboard Refactors */
.ticket-reply-area {
    min-height: 52px;
    max-height: 150px;
}

.progress-svg-path {
    transition: stroke-dasharray 1.5s ease-in-out;
}