/* --------------------------------------------------------- */
/*  SETTINGS BUTTON + PANEL (COMMON FOR ALL PAGES)           */
/* --------------------------------------------------------- */


.settings-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
    background: #333;
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
}

.settings-panel {
    position: fixed;
    bottom: 90px;
    right: 25px;
    width: 170px;
    background: #1a1a1a;
    color: white;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid #444;
    display: none;
    z-index: 9999;
}

.settings-option {
    width: 100%;
    padding: 6px;
    background: #333;
    border: none;
    color: white;
    border-radius: 5px;
    margin-bottom: 8px;
    cursor: pointer;
}
.settings-option:hover {
    background: #555;
}

/* --------------------------------------------------------- */
/*  UNIVERSAL DARK MODE                                      */
/* --------------------------------------------------------- */

.dark-mode,
.dark-mode body,
.dark-mode html {
    background: #111 !important;
    color: #e6e6e6 !important;
}

/* Universal text override */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode p,
.dark-mode label,
.dark-mode span,
.dark-mode small,
.dark-mode .title-text {
    color: #fff !important;
}

/* Layout (Bootstrap + custom) */
.dark-mode .container,
.dark-mode .container-fluid,
.dark-mode .row,
.dark-mode [class*="col-"],
.dark-mode .section,
.dark-mode .wrapper,
.dark-mode .banner {
    background: #111 !important;
    color: #eee !important;
}

/* Cards, panels, form blocks */
.dark-mode .card,
.dark-mode .card-body,
.dark-mode .card-header,
.dark-mode .panel,
.dark-mode .panel-body,
.dark-mode .signup-form,
.dark-mode .content-box,
.dark-mode .box,
.dark-mode form,
.dark-mode form * {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #333 !important;
}

/* Inputs */
.dark-mode input,
.dark-mode select,
.dark-mode textarea,
.dark-mode .form-control {
    background: #222 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #bfbfbf !important;
}

/* Navbar + Header */
.dark-mode .navbar,
.dark-mode nav,
.dark-mode header,
.dark-mode #header-section,
.dark-mode .top-bar {
    background: #111 !important;
    border-bottom: 1px solid #333 !important;
    color: #fff !important;
}

/* Footer */
.dark-mode footer,
.dark-mode #footerDiv {
    background: #111 !important;
    color: #ccc !important;
    border-top: 1px solid #333 !important;
}

/* Buttons */
.dark-mode .btn,
.dark-mode button,
.dark-mode input[type=button],
.dark-mode input[type=submit] {
    background: #0d6efd !important;
    color: #fff !important;
    border: none !important;
}

.dark-mode .btn:hover,
.dark-mode button:hover {
    background: #0b5ed7 !important;
}

/* Tables */
.dark-mode table,
.dark-mode .table {
    background: #1a1a1a !important;
    color: #fff !important;
}

.dark-mode th,
.dark-mode td {
    background: #222 !important;
    color: #eee !important;
    border-color: #444 !important;
}

/* Modals */
.dark-mode .modal-content,
.dark-mode .modal-body,
.dark-mode .modal-header,
.dark-mode .modal-footer {
    background: #1a1a1a !important;
    color: #fff !important;
    border: 1px solid #333 !important;
}

/* Alerts */
.dark-mode .alert {
    background: #333 !important;
    color: #fff !important;
    border-color: #555 !important;
}

/* Links */
.dark-mode a {
    color: #4da6ff !important;
}

/* HR */
.dark-mode hr {
    border-top: 1px solid #333 !important;
}

/* Fix Signup Form Card */
.dark-mode .signup-form {
    background: #1b1b1b !important;
    border: 1px solid #333 !important;
}

.dark-mode .signup-form hr {
    border-top: 1px solid #333 !important;
}

/* Image brightness */
.dark-mode img {
    filter: brightness(75%) !important;
}
.theme-yellow,
.theme-yellow body,
.theme-yellow html {
    background-color: #fff6c4 !important;
    color: #3e3200 !important;
}

/* MAIN PAGE BACKGROUNDS */
.theme-yellow .banner,
.theme-yellow .container,
.theme-yellow .container-fluid,
.theme-yellow .row,
.theme-yellow [class*="col-"],
.theme-yellow .grid-margin,
.theme-yellow .grid-margin-lg-0,
.theme-yellow .wrapper,
.theme-yellow .section,
.theme-yellow #header-section {
    background-color: #fff6c4 !important;
    color: #3e3200 !important;
}

/* CARDS / BOXES / FORMS */
.theme-yellow .card,
.theme-yellow .signup-form,
.theme-yellow .panel,
.theme-yellow .panel-body,
.theme-yellow form,
.theme-yellow form * {
    background-color: #fff2a8 !important;
    color: #3e3200 !important;
    border-color: #e6c400 !important;
}

/* INPUTS */
.theme-yellow input,
.theme-yellow select,
.theme-yellow textarea,
.theme-yellow .form-control {
    background-color: #fff8d7 !important;
    color: #3e3200 !important;
    border-color: #d8b400 !important;
}

/* BUTTONS */
.theme-yellow button,
.theme-yellow .btn,
.theme-yellow input[type=submit],
.theme-yellow input[type=button] {
    background-color: #ffcb00 !important;
    color: #3e3200 !important;
}

/* LINKS */
.theme-yellow a {
    color: #3e3200 !important;
}

/* MODALS */
.theme-yellow .modal-content,
.theme-yellow .modal-header,
.theme-yellow .modal-body,
.theme-yellow .modal-footer {
    background-color: #fff3b5 !important;
    color: #3e3200 !important;
    border-color: #d8b400 !important;
}
.theme-blue,
.theme-blue body,
.theme-blue html {
    background-color: #e6f1ff !important;
    color: #002a60 !important;
}

/* MAIN PAGE BACKGROUNDS */
.theme-blue .banner,
.theme-blue .container,
.theme-blue .container-fluid,
.theme-blue .row,
.theme-blue [class*="col-"],
.theme-blue .grid-margin,
.theme-blue .grid-margin-lg-0,
.theme-blue .wrapper,
.theme-blue .section,
.theme-blue #header-section {
    background-color: #d6e7ff !important;
    color: #002a60 !important;
}

/* CARDS / BOXES / FORMS */
.theme-blue .card,
.theme-blue .signup-form,
.theme-blue .panel,
.theme-blue .panel-body,
.theme-blue form,
.theme-blue form * {
    background-color: #cfe3ff !important;
    color: #002a60 !important;
    border-color: #7db7ff !important;
}

/* INPUTS */
.theme-blue input,
.theme-blue select,
.theme-blue textarea,
.theme-blue .form-control {
    background-color: #f3f9ff !important;
    color: #002a60 !important;
    border-color: #7db7ff !important;
}

/* BUTTONS */
.theme-blue button,
.theme-blue .btn,
.theme-blue input[type=submit],
.theme-blue input[type=button] {
    background-color: #3b82f6 !important;
    color: white !important;
}

/* LINKS */
.theme-blue a {
    color: #002a60 !important;
}

/* MODALS */
.theme-blue .modal-content,
.theme-blue .modal-header,
.theme-blue .modal-body,
.theme-blue .modal-footer {
    background-color: #d6e7ff !important;
    color: #002a60 !important;
    border-color: #7db7ff !important;
}
.theme-red,
.theme-red body,
.theme-red html {
    background-color: #ffe1e1 !important;
    color: #5a0000 !important;
}

/* MAIN PAGE BACKGROUNDS */
.theme-red .banner,
.theme-red .container,
.theme-red .container-fluid,
.theme-red .row,
.theme-red [class*="col-"],
.theme-red .grid-margin,
.theme-red .grid-margin-lg-0,
.theme-red .wrapper,
.theme-red .section,
.theme-red #header-section {
    background-color: #ffd4d4 !important;
    color: #5a0000 !important;
}

/* CARDS / BOXES / FORMS */
.theme-red .card,
.theme-red .signup-form,
.theme-red .panel,
.theme-red .panel-body,
.theme-red form,
.theme-red form * {
    background-color: #ffc9c9 !important;
    color: #5a0000 !important;
    border-color: #cc7070 !important;
}

/* INPUTS */
.theme-red input,
.theme-red select,
.theme-red textarea,
.theme-red .form-control {
    background-color: #ffeaea !important;
    color: #5a0000 !important;
    border-color: #cc7070 !important;
}

/* BUTTONS */
.theme-red button,
.theme-red .btn,
.theme-red input[type=submit],
.theme-red input[type=button] {
    background-color: #e74c3c !important;
    color: white !important;
}

/* LINKS */
.theme-red a {
    color: #5a0000 !important;
}

/* MODALS */
.theme-red .modal-content,
.theme-red .modal-header,
.theme-red .modal-body,
.theme-red .modal-footer {
    background-color: #ffc9c9 !important;
    color: #5a0000 !important;
    border-color: #cc7070 !important;
}