/* ==========================================================================
   Classic Theme — inspired by ctr4ever.joora.fr
   Activated by adding `theme-classic` to <html> and/or <body>.
   ========================================================================== */

html.theme-classic,
body.theme-classic {
    background: #000 url('../img/background_classic.jpg') left top repeat fixed !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

body.theme-classic * {
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body.theme-classic h1 { font-size: 14px !important; color: #ffcc00 !important; font-family: Arial, Helvetica, sans-serif !important; }
body.theme-classic h2 { font-size: 12px !important; color: #ffcc00 !important; font-family: Arial, Helvetica, sans-serif !important; }
body.theme-classic h3,
body.theme-classic h4,
body.theme-classic h5,
body.theme-classic h6 { font-size: 10px !important; color: #ffcc00 !important; font-family: Arial, Helvetica, sans-serif !important; }

body.theme-classic a {
    color: #ffcc00 !important;
    text-decoration: none !important;
}
body.theme-classic a:hover,
body.theme-classic a:focus {
    color: #fff !important;
    text-decoration: underline !important;
}

/* ---- Layout shell ---- */

body.theme-classic .content-wrapper,
body.theme-classic main,
body.theme-classic .container,
body.theme-classic .container-fluid {
    background: transparent !important;
    color: #fff !important;
}

body.theme-classic .mobile-header {
    background: #000 !important;
    border-bottom: 1px solid #ffcc00 !important;
}

/* ---- Sidebar / navigation ---- */
/* Recreate the original site's boxed menu (ctr4ever.joora.fr): each section is a
   bordered box with a filled header bar (the section title) over bordered item rows. */

body.theme-classic .sidebar,
body.theme-classic .sidebar-footer,
body.theme-classic .sidebar-header,
body.theme-classic nav {
    background: #000 !important;
    color: #fff !important;
    border-color: #ffcc00 !important;
}

body.theme-classic .sidebar-nav {
    padding: 6px !important;
}

/* Each nav section becomes a distinct box. */
body.theme-classic .sidebar-section {
    background: #000 !important;
    border: 1px solid #ffcc00 !important;
    margin-bottom: 8px !important;
}

/* Section title becomes a filled header bar. */
body.theme-classic .sidebar-section-title {
    background: #574f87 !important;
    color: #ffcc00 !important;
    font-size: 11px !important;
    font-weight: bold !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: normal !important;
    padding: 3px 6px !important;
    border-bottom: 1px solid #ffcc00 !important;
}

body.theme-classic .sidebar a,
body.theme-classic .sidebar .sidebar-collapse-toggle,
body.theme-classic .nav-link,
body.theme-classic .sidebar .nav-item {
    color: #fff !important;
    background: transparent !important;
}

/* Menu items read as bordered rows inside each box. */
body.theme-classic .sidebar-section .sidebar-link,
body.theme-classic .sidebar-section .sidebar-collapse-toggle {
    border: none !important;
    border-bottom: 1px solid #3d3866 !important;
    padding: 4px 8px !important;
}

body.theme-classic .sidebar-section .sidebar-link-nested {
    padding-left: 22px !important;
    background: #0a0a0a !important;
}

body.theme-classic .sidebar a:hover,
body.theme-classic .sidebar .sidebar-collapse-toggle:hover,
body.theme-classic .sidebar .sidebar-collapse-toggle:focus,
body.theme-classic .nav-link:hover,
body.theme-classic .nav-link.active,
body.theme-classic .sidebar a.active {
    color: #fff !important;
    background: #574f87 !important;
}

/* Logo links and the mobile menu toggle stay flat: no hover/focus fill. */
body.theme-classic .sidebar .sidebar-brand,
body.theme-classic .sidebar .sidebar-brand:hover,
body.theme-classic .sidebar .sidebar-brand:focus,
body.theme-classic .mobile-header-brand,
body.theme-classic .mobile-header-brand:hover,
body.theme-classic .mobile-header-brand:focus,
body.theme-classic button.sidebar-toggle,
body.theme-classic button.sidebar-toggle:hover,
body.theme-classic button.sidebar-toggle:focus {
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    text-decoration: none !important;
    outline: none !important;
}

/* ---- Tables ---- */

body.theme-classic table,
body.theme-classic .table {
    background: #574f87 !important;
    color: #fff !important;
    border-collapse: collapse !important;
    width: 100%;
    --bs-table-bg: #574f87 !important;
    --bs-table-color: #fff !important;
    --bs-table-striped-bg: #48426e !important;
    --bs-table-striped-color: #fff !important;
    --bs-table-hover-bg: #6a609e !important;
    --bs-table-hover-color: #fff !important;
    --bs-table-border-color: #3d3866 !important;
}

body.theme-classic thead,
body.theme-classic thead th,
body.theme-classic .table thead th,
body.theme-classic .table > thead {
    background: #3d3866 !important;
    color: #fff !important;
    border: 1px solid #3d3866 !important;
    font-weight: bold !important;
}

body.theme-classic tbody tr,
body.theme-classic .table tbody tr {
    background: #574f87 !important;
    color: #fff !important;
}

body.theme-classic tbody tr:nth-child(even),
body.theme-classic .table-striped tbody tr:nth-child(even) {
    background: #48426e !important;
    color: #fff !important;
}

body.theme-classic .table-striped tbody tr:nth-child(odd) {
    background: #574f87 !important;
    color: #fff !important;
}

body.theme-classic tbody tr:hover,
body.theme-classic .table-hover tbody tr:hover {
    background: #6a609e !important;
    color: #fff !important;
}

body.theme-classic td,
body.theme-classic .table td {
    border: 1px solid #3d3866 !important;
    padding: 3px 6px !important;
    color: #fff !important;
}

body.theme-classic th,
body.theme-classic .table th {
    border: 1px solid #3d3866 !important;
    padding: 3px 6px !important;
    color: #fff !important;
}

/* ---- Cards / panels ---- */
/* Dark panel with a yellow accent line separating header from body. */

body.theme-classic .card,
body.theme-classic .alert,
body.theme-classic .modal-content,
body.theme-classic .dropdown-menu,
body.theme-classic .list-group-item {
    background: #0a0a0a !important;
    color: #fff !important;
    border: 1px solid #ffcc00 !important;
}

body.theme-classic .card-body {
    background: transparent !important;
    color: #fff !important;
    border: 0 !important;
}

body.theme-classic .card-header,
body.theme-classic .modal-header {
    background: #1a1a1a !important;
    color: #fff !important;
    border: 0 !important;
    border-bottom: 2px solid #ffcc00 !important;
    font-weight: bold !important;
    text-align: center !important;
}

body.theme-classic .card-header h1,
body.theme-classic .card-header h2,
body.theme-classic .card-header h3,
body.theme-classic .card-header h4,
body.theme-classic .card-header h5,
body.theme-classic .card-header h6,
body.theme-classic .modal-header h1,
body.theme-classic .modal-header h2,
body.theme-classic .modal-header h3,
body.theme-classic .modal-header h4,
body.theme-classic .modal-header h5,
body.theme-classic .modal-header h6 {
    color: #ffcc00 !important;
}

body.theme-classic .card-footer {
    background: #1a1a1a !important;
    color: #fff !important;
    border: 0 !important;
    border-top: 2px solid #ffcc00 !important;
}

body.theme-classic .card .text-muted,
body.theme-classic .card .text-secondary,
body.theme-classic .card small,
body.theme-classic .card p,
body.theme-classic .card .card-title,
body.theme-classic .card .card-text {
    color: #fff !important;
}

body.theme-classic .card a {
    color: #ffcc00 !important;
    text-decoration: underline !important;
}
body.theme-classic .card a:hover {
    color: #fff !important;
}

/* ---- Forms / buttons ---- */

body.theme-classic .form-control,
body.theme-classic .form-select,
body.theme-classic input[type="text"],
body.theme-classic input[type="number"],
body.theme-classic input[type="password"],
body.theme-classic input[type="email"],
body.theme-classic select,
body.theme-classic textarea {
    /* background-color, not the shorthand: keeps the .form-select arrow image intact. */
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #574f87 !important;
}

body.theme-classic .form-control:hover,
body.theme-classic .form-control:focus,
body.theme-classic .form-select:hover,
body.theme-classic .form-select:focus,
body.theme-classic input:hover,
body.theme-classic input:focus,
body.theme-classic select:hover,
body.theme-classic select:focus,
body.theme-classic textarea:hover,
body.theme-classic textarea:focus {
    border-color: #ffcc00 !important;
    outline: none !important;
}

body.theme-classic .btn,
body.theme-classic button {
    background: #3d3866 !important;
    color: #fff !important;
    border: 1px solid #574f87 !important;
    font-weight: bold !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

body.theme-classic .btn:hover,
body.theme-classic .btn:focus,
body.theme-classic button:hover,
body.theme-classic button:focus {
    background: #574f87 !important;
    color: #fff !important;
    border-color: #ffcc00 !important;
}

body.theme-classic .btn-primary,
body.theme-classic .btn-success,
body.theme-classic .btn-danger,
body.theme-classic .btn-warning,
body.theme-classic .btn-info,
body.theme-classic .btn-secondary {
    background: #574f87 !important;
    color: #fff !important;
    border-color: #ffcc00 !important;
}

body.theme-classic .btn-primary:hover,
body.theme-classic .btn-success:hover,
body.theme-classic .btn-danger:hover,
body.theme-classic .btn-warning:hover,
body.theme-classic .btn-info:hover,
body.theme-classic .btn-secondary:hover {
    background: #6a609e !important;
}

/* Searchable select toggle (initSearchableSelects) is a <button class="form-select">:
   undo the generic button fill and keep a single, non-repeating arrow. */
body.theme-classic button.form-select,
body.theme-classic button.form-select:hover,
body.theme-classic button.form-select:focus,
body.theme-classic button.form-select[aria-expanded="true"] {
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23574f87' d='m0,1 2,2 2-2'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    color: #000 !important;
    border: 1px solid #574f87 !important;
}

body.theme-classic button.form-select:focus,
body.theme-classic button.form-select[aria-expanded="true"] {
    border-color: #ffcc00 !important;
}

/* Dropdown options are <button>s too: plain rows, not boxed buttons. */
body.theme-classic .dropdown-item,
body.theme-classic button.dropdown-item {
    background: transparent !important;
    color: #fff !important;
    border: 0 !important;
    text-decoration: none !important;
}

body.theme-classic .dropdown-item:hover,
body.theme-classic .dropdown-item:focus,
body.theme-classic button.dropdown-item:hover,
body.theme-classic button.dropdown-item:focus {
    background: #574f87 !important;
    color: #fff !important;
}

body.theme-classic .dropdown-item.active,
body.theme-classic button.dropdown-item.active {
    background: #3d3866 !important;
    color: #ffcc00 !important;
}

body.theme-classic .dropdown-item.disabled,
body.theme-classic button.dropdown-item.disabled {
    background: transparent !important;
    color: #999 !important;
}

/* Close buttons draw their X via background-image; the generic `button` fill wipes it. */
body.theme-classic .btn-close,
body.theme-classic .btn-close:hover,
body.theme-classic .btn-close:focus {
    background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat !important;
    border: 0 !important;
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.75;
}

body.theme-classic form button.btn-close {
    background-size: 0.6em auto !important;
}

body.theme-classic .btn-close:hover,
body.theme-classic .btn-close:focus {
    opacity: 1;
}

/* Link-buttons must not inherit the yellow underlined link style (incl. `.card a`). */
body.theme-classic a.btn,
body.theme-classic a.btn:hover,
body.theme-classic a.btn:focus,
body.theme-classic .card a.btn,
body.theme-classic .card a.btn:hover,
body.theme-classic .card a.btn:focus {
    color: #fff !important;
    text-decoration: none !important;
}

/* ---- Accordion ---- */

body.theme-classic .accordion-item {
    background: #0a0a0a !important;
    border: 1px solid #ffcc00 !important;
}

body.theme-classic .accordion-button {
    background: #1a1a1a !important;
    color: #ffcc00 !important;
    border: 0 !important;
    border-bottom: 1px solid #3d3866 !important;
}

body.theme-classic .accordion-button:hover,
body.theme-classic .accordion-button:focus {
    background: #574f87 !important;
    color: #fff !important;
    border-color: #3d3866 !important;
}

body.theme-classic .accordion-button:not(.collapsed) {
    background: #574f87 !important;
    color: #fff !important;
    border-bottom: 2px solid #ffcc00 !important;
}

body.theme-classic .accordion-button::after {
    filter: invert(1) brightness(1.2) !important;
}

body.theme-classic .accordion-body {
    background: #0a0a0a !important;
    color: #fff !important;
}

/* ---- Badges / pills ---- */

body.theme-classic .badge {
    background: #574f87 !important;
    color: #fff !important;
    border: 1px solid #ffcc00 !important;
}

/* ---- Pagination ---- */

body.theme-classic .page-link {
    background: #000 !important;
    color: #ffcc00 !important;
    border: 1px solid #ffcc00 !important;
}
body.theme-classic .page-item.active .page-link {
    background: #574f87 !important;
    color: #fff !important;
}

/* ---- Footer ---- */

body.theme-classic footer {
    background: #000 !important;
    color: #fff !important;
    border-top: 1px solid #ffcc00 !important;
}

body.theme-classic footer h6 {
    color: #ffcc00 !important;
}

body.theme-classic footer .text-muted,
body.theme-classic footer .text-secondary,
body.theme-classic .text-muted,
body.theme-classic .text-secondary {
    color: #fff !important;
}

/* ---- Hero logo ---- */

body.theme-classic .hero-logo {
    filter: none !important;
}

body.theme-classic .hero-glow {
    display: none !important;
}

.hero-logo-classic {
    display: none;
}

body.theme-classic .hero-logo-default {
    display: none;
}

body.theme-classic .hero-logo-classic {
    display: inline-block;
}

/* ---- Feature icons (home cards) ---- */

body.theme-classic .feature-icon {
    background: #ffcc00 !important;
    color: #000 !important;
    border-top: 1px solid #fff2a8 !important;
    border-left: 1px solid #fff2a8 !important;
    border-right: 1px solid #8a6a00 !important;
    border-bottom: 1px solid #8a6a00 !important;
}

/* Hero stats / lead text on classic theme should stay readable on black */
body.theme-classic .hero-title,
body.theme-classic .lead,
body.theme-classic .text-gradient {
    color: #ffcc00 !important;
    background: none !important;
    -webkit-text-fill-color: #ffcc00 !important;
}

/* ---- Theme switch always readable ---- */

body.theme-classic .form-switch .form-check-input {
    background-color: #fff !important;
    border-color: #574f87 !important;
}
body.theme-classic .form-switch .form-check-input:checked {
    background-color: #574f87 !important;
    border-color: #ffcc00 !important;
}