/*
 * Dark / night theme for UBCP
 * ---------------------------------------------------------------------------
 * Hand-authored overrides scoped under html[data-theme="dark"]. This file is
 * loaded on every page but only takes effect when the data-theme attribute is
 * set to "dark" (see includes/theme-head.blade.php + js/theme-toggle.js).
 *
 * It deliberately does NOT touch the compiled SASS bundle (css/app.css), so a
 * future `npm run prod` will not overwrite it. If you later want to fold these
 * rules into the SASS source, copy them into resources/sass/_custom.scss.
 */

html[data-theme="dark"] {
    --d-bg: #15181c;        /* page background            */
    --d-surface: #1e2228;   /* cards, navbar, footer-ish  */
    --d-surface-2: #262b32; /* inputs, hovers, dropdowns  */
    --d-border: #323841;    /* borders / dividers         */
    --d-text: #d7dade;      /* primary text               */
    --d-muted: #9aa0a8;     /* muted / secondary text     */
    --d-link: #5aa6f0;      /* links                      */
    --d-accent: #2d78a5;    /* brand blue (matches app)   */
    color-scheme: dark;
    background-color: #15181c; /* covers layouts that hardcode html bg (e.g. error page) */
}

/* Smooth the flip between modes */
html[data-theme="dark"] body,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .dropdown-menu {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* ------------------------------------------------------------------ base -- */
html[data-theme="dark"] body {
    background-color: var(--d-bg);
    color: var(--d-text);
}

/* Exclude .btn so button labels keep their own (white/dark) text colour. */
html[data-theme="dark"] a:not(.btn),
html[data-theme="dark"] a:not(.btn):hover,
html[data-theme="dark"] a:not(.btn):active {
    color: var(--d-link);
}

html[data-theme="dark"] hr {
    border-top-color: var(--d-border);
}

html[data-theme="dark"] code {
    color: #e685b5;
    background-color: var(--d-surface-2);
}
html[data-theme="dark"] pre {
    color: var(--d-text);
}

/* ------------------------------------------------------------ surfaces --- */
html[data-theme="dark"] .bg-white {
    background-color: var(--d-surface) !important;
    color: var(--d-text);
}
html[data-theme="dark"] .bg-light {
    background-color: var(--d-surface-2) !important;
    color: var(--d-text);
}
html[data-theme="dark"] .jumbotron {
    background-color: var(--d-surface-2);
    color: var(--d-text);
}
/* Comment bubbles etc. — the default #e0dddd94 is too light to read on dark. */
html[data-theme="dark"] .bg-medium-gray {
    background-color: #66646494 !important;
}

/* ------------------------------------------------------------- navbar ---- */
/* Logo swap: show the light logo by default, the dark-mode logo when active. */
.logo-dark { display: none; }
html[data-theme="dark"] .logo-light { display: none; }
html[data-theme="dark"] .logo-dark { display: inline-block; }

html[data-theme="dark"] .navbar.bg-white {
    background-color: var(--d-surface) !important;
}
html[data-theme="dark"] .navbar-light .navbar-brand,
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link {
    color: var(--d-text);
}
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover,
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link:focus,
html[data-theme="dark"] .navbar-light .navbar-nav .show > .nav-link {
    color: #ffffff;
}
html[data-theme="dark"] .navbar-light .navbar-toggler {
    border-color: var(--d-border);
}
/* Light-stroke hamburger icon for the dark navbar */
html[data-theme="dark"] .navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --------------------------------------------------------------- cards --- */
html[data-theme="dark"] .card {
    background-color: var(--d-surface);
    border-color: var(--d-border);
    color: var(--d-text);
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--d-border);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* ----------------------------------------------------------- dropdowns --- */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--d-surface-2);
    border-color: var(--d-border);
    color: var(--d-text);
}
html[data-theme="dark"] .dropdown-item {
    color: var(--d-text);
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--d-surface);
    color: #ffffff;
}
html[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--d-border);
}
html[data-theme="dark"] .dropdown-item .text-gray-400 {
    color: var(--d-muted) !important;
}

/* -------------------------------------------------------------- tables --- */
html[data-theme="dark"] .table {
    color: var(--d-text);
}
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table thead th {
    border-color: var(--d-border);
}
html[data-theme="dark"] .table th > a {
    color: var(--d-text);
}
html[data-theme="dark"] .table .thead-light th {
    background-color: var(--d-surface-2);
    color: var(--d-text);
    border-color: var(--d-border);
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}
/* DataTables (CDN CSS) paints every row #fff; darken the .even rows + the
   shaded sorted column so striping reads correctly in dark mode. */
html[data-theme="dark"] table.dataTable tbody tr {
    background-color: transparent;
}
html[data-theme="dark"] table.dataTable tbody tr.even,
html[data-theme="dark"] table.dataTable tbody tr.even > .sorting_1,
html[data-theme="dark"] table.dataTable tbody tr.even > .sorting_2,
html[data-theme="dark"] table.dataTable tbody tr.even > .sorting_3 {
    background-color: #3d3d3d;
}
html[data-theme="dark"] table.dataTable tbody tr.odd > .sorting_1,
html[data-theme="dark"] table.dataTable tbody tr.odd > .sorting_2,
html[data-theme="dark"] table.dataTable tbody tr.odd > .sorting_3 {
    background-color: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--d-text);
}
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered th,
html[data-theme="dark"] .table-bordered td {
    border-color: var(--d-border);
}

/* --------------------------------------------------------------- forms --- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .custom-file-label {
    background-color: var(--d-surface-2);
    border-color: var(--d-border);
    color: var(--d-text);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus {
    background-color: var(--d-surface-2);
    color: var(--d-text);
    border-color: #3d6fa5;
    box-shadow: 0 0 0 0.2rem rgba(45, 120, 165, 0.25);
}
html[data-theme="dark"] .form-control::placeholder {
    color: var(--d-muted);
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: #1b1f24;
}
html[data-theme="dark"] .input-group-text {
    background-color: var(--d-surface);
    border-color: var(--d-border);
    color: var(--d-muted);
}

/* ---------------------------------------------------------- list groups -- */
html[data-theme="dark"] .list-group-item {
    background-color: var(--d-surface);
    border-color: var(--d-border);
    color: var(--d-text);
}
html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--d-surface-2);
    color: #ffffff;
}

/* --------------------------------------------------- modals / popovers --- */
html[data-theme="dark"] .modal-content {
    background-color: var(--d-surface);
    color: var(--d-text);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--d-border);
}
html[data-theme="dark"] .close {
    color: var(--d-text);
    text-shadow: none;
}
html[data-theme="dark"] .close:hover {
    color: #ffffff;
}
html[data-theme="dark"] .popover {
    background-color: var(--d-surface-2);
    border-color: var(--d-border);
}
html[data-theme="dark"] .popover-body {
    color: var(--d-text);
}
html[data-theme="dark"] .tooltip-inner {
    background-color: var(--d-surface-2);
    color: var(--d-text);
}

/* ----------------------------------------------------------- pagination -- */
html[data-theme="dark"] .page-link {
    background-color: var(--d-surface);
    border-color: var(--d-border);
    color: var(--d-link);
}
html[data-theme="dark"] .page-link:hover {
    background-color: var(--d-surface-2);
    border-color: var(--d-border);
}
html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--d-surface);
    border-color: var(--d-border);
    color: var(--d-muted);
}
html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--d-accent);
    border-color: var(--d-accent);
    color: #ffffff;
}

/* ------------------------------------------------------------ nav tabs --- */
html[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--d-border);
}
html[data-theme="dark"] .nav-tabs .nav-link:hover,
html[data-theme="dark"] .nav-tabs .nav-link:focus {
    border-color: var(--d-border) var(--d-border) var(--d-border);
}
html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--d-surface);
    border-color: var(--d-border) var(--d-border) var(--d-surface);
    color: var(--d-text);
}

/* ----------------------------------------------------------- utilities --- */
html[data-theme="dark"] .text-dark {
    color: var(--d-text) !important;
}
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary {
    color: var(--d-muted) !important;
}
html[data-theme="dark"] .text-black-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}
html[data-theme="dark"] .text-gray-400 {
    color: var(--d-muted) !important;
}
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-right,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left {
    border-color: var(--d-border) !important;
}
html[data-theme="dark"] .breadcrumb {
    background-color: var(--d-surface-2);
}
html[data-theme="dark"] .badge-light {
    background-color: var(--d-surface-2);
    color: var(--d-text);
}

/* -------------------------------------------------------------- buttons -- */
html[data-theme="dark"] .btn-light {
    background-color: var(--d-surface-2);
    border-color: var(--d-border);
    color: var(--d-text);
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-light:focus {
    background-color: var(--d-surface);
    color: #ffffff;
}
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-dark {
    color: var(--d-text);
    border-color: var(--d-border);
}
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-dark:hover {
    background-color: var(--d-surface-2);
    color: #ffffff;
}

/* -------------------------------------------------------------- alerts --- */
html[data-theme="dark"] .alert-success {
    background-color: #10301f;
    border-color: #1c5236;
}
html[data-theme="dark"] .alert-danger {
    background-color: #3a1619;
    border-color: #6e2630;
}
html[data-theme="dark"] .alert-info {
    background-color: #0f2a36;
    border-color: #1d4f63;
}
html[data-theme="dark"] .alert-warning {
    background-color: #3a2e10;
    border-color: #6b551d;
}
html[data-theme="dark"] .alert-link {
    color: inherit;
    text-decoration: underline;
}

/* ---------------------------------------- jQuery UI autocomplete (search) - */
html[data-theme="dark"] .ui-menu,
html[data-theme="dark"] .ui-widget-content {
    background: var(--d-surface-2);
    border-color: var(--d-border);
    color: var(--d-text);
}
html[data-theme="dark"] .ui-menu .ui-menu-item-wrapper {
    color: var(--d-text);
}
html[data-theme="dark"] .ui-menu .ui-menu-item-wrapper.ui-state-active,
html[data-theme="dark"] .ui-state-active {
    background: var(--d-accent);
    border-color: var(--d-accent);
    color: #ffffff;
}

/* -------------------------------------------------------- theme toggle --- */
.theme-toggle {
    color: inherit;
    text-decoration: none !important;
    cursor: pointer;
}
.theme-toggle:hover,
.theme-toggle:focus {
    color: #f0ad4e;
}
html[data-theme="dark"] .theme-toggle {
    color: var(--d-text);
}
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:focus {
    color: #ffd479;
}