/*
 * Dark mode override layer for AdminLTE 3 / Bootstrap 4.
 * Scoped entirely under html.dark-mode so it is opt-in and loads after
 * adminlte.min.css, relying on cascade order (with !important only where
 * AdminLTE's own utility classes would otherwise win on specificity).
 * Toggled by public/js/dark-mode.js via #darkModeToggle.
 */

html.dark-mode {
    --dm-bg: #12161c;
    --dm-surface: #1b212a;
    --dm-surface-alt: #232b36;
    --dm-border: #323c49;
    --dm-text: #e7ebee;
    --dm-text-muted: #9fadba;
    --dm-link: #6fa8ff;
}

/* Layout shell */
html.dark-mode body,
html.dark-mode .content-wrapper,
html.dark-mode .wrapper {
    background-color: var(--dm-bg);
    color: var(--dm-text);
}

html.dark-mode .content-wrapper {
    background-color: var(--dm-bg) !important;
}

/* Navbar (top bar stays "light" AdminLTE classes, so override explicitly) */
html.dark-mode .main-header.navbar {
    background-color: var(--dm-surface) !important;
    border-bottom: 1px solid var(--dm-border);
}

html.dark-mode .main-header.navbar .nav-link,
html.dark-mode .main-header.navbar .nav-link > i {
    color: var(--dm-text) !important;
}

html.dark-mode .navbar-search-block .form-control {
    background-color: var(--dm-surface-alt);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

/* Footer */
html.dark-mode .main-footer {
    background-color: var(--dm-surface);
    border-top: 1px solid var(--dm-border);
    color: var(--dm-text-muted);
}

/* Cards */
html.dark-mode .card {
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border-color: var(--dm-border);
}

html.dark-mode .card-header,
html.dark-mode .card-footer {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html.dark-mode .card-title {
    color: var(--dm-text);
}

html.dark-mode .card.card-outline {
    background-color: var(--dm-surface);
}

/* Dashboard widgets */
html.dark-mode .small-box {
    background-color: var(--dm-surface);
    color: var(--dm-text);
}

html.dark-mode .small-box > .small-box-footer {
    background: rgba(255, 255, 255, .05);
    color: var(--dm-text-muted);
}

html.dark-mode .info-box {
    background-color: var(--dm-surface);
    color: var(--dm-text);
}

html.dark-mode .info-box .info-box-icon {
    background: rgba(255, 255, 255, .08);
}

/* Generic bg/text utility overrides used throughout the views */
html.dark-mode .bg-white,
html.dark-mode .bg-light {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

/*
 * AdminLTE forces `.bg-light > a` / `.bg-white > a` to a dark navy text
 * color (#1f2d3d) with !important, for readability on their light
 * backgrounds. Once we repaint those backgrounds dark above, that same
 * navy text becomes nearly invisible (e.g. the Cancel link in a
 * card-footer.bg-light). Override the link color to match.
 */
html.dark-mode .bg-white > a,
html.dark-mode .bg-light > a {
    color: var(--dm-text) !important;
}

html.dark-mode .text-dark {
    color: var(--dm-text) !important;
}

html.dark-mode .text-muted {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .text-secondary {
    color: var(--dm-text-muted) !important;
}

html.dark-mode a {
    color: var(--dm-link);
}

html.dark-mode hr,
html.dark-mode .border,
html.dark-mode .border-top,
html.dark-mode .border-bottom,
html.dark-mode .border-left,
html.dark-mode .border-right {
    border-color: var(--dm-border) !important;
}

/* Tables */
html.dark-mode .table {
    color: var(--dm-text);
    border-color: var(--dm-border);
}

html.dark-mode .table thead th,
html.dark-mode .table td,
html.dark-mode .table th {
    border-color: var(--dm-border);
}

html.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, .03);
}

html.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, .06);
    color: var(--dm-text);
}

html.dark-mode .table-bordered,
html.dark-mode .table-bordered td,
html.dark-mode .table-bordered th {
    border-color: var(--dm-border);
}

/* Forms */
html.dark-mode .form-control,
html.dark-mode .custom-select,
html.dark-mode .input-group-text {
    background-color: var(--dm-surface-alt);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html.dark-mode .form-control:focus {
    background-color: var(--dm-surface-alt);
    color: var(--dm-text);
}

html.dark-mode .form-control::placeholder {
    color: var(--dm-text-muted);
}

html.dark-mode .form-control[disabled],
html.dark-mode .form-control[readonly] {
    background-color: var(--dm-surface);
    opacity: .8;
}

/*
 * Chrome/Edge/Safari autofill (e.g. a saved login email/password) paints
 * its own yellow background and forces near-black text via
 * -webkit-text-fill-color, ignoring background-color entirely. That
 * combination is unreadable against our dark theme, so override both
 * with the standard inset box-shadow trick.
 */
html.dark-mode .form-control:-webkit-autofill,
html.dark-mode .form-control:-webkit-autofill:hover,
html.dark-mode .form-control:-webkit-autofill:focus,
html.dark-mode .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--dm-surface-alt) inset;
    box-shadow: 0 0 0 1000px var(--dm-surface-alt) inset;
    -webkit-text-fill-color: var(--dm-text);
    caret-color: var(--dm-text);
    transition: background-color 5000s ease-in-out 0s;
}

/* Select2 (select2-bootstrap4 theme) */
html.dark-mode .select2-container--bootstrap4 .select2-selection {
    background-color: var(--dm-surface-alt);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html.dark-mode .select2-container--bootstrap4 .select2-selection__rendered {
    color: var(--dm-text);
}

html.dark-mode .select2-dropdown {
    background-color: var(--dm-surface-alt);
    border-color: var(--dm-border);
}

html.dark-mode .select2-container--bootstrap4 .select2-results__option {
    color: var(--dm-text);
}

html.dark-mode .select2-container--bootstrap4 .select2-results__option--highlighted {
    background-color: var(--dm-link);
}

/* Buttons that rely on light/dark neutral colors nearly invisible against
   a dark background (Bootstrap's own near-black outline-dark, or grays) */
html.dark-mode .btn-default,
html.dark-mode .btn-light,
html.dark-mode .btn-outline-secondary,
html.dark-mode .btn-outline-dark {
    background-color: var(--dm-surface-alt);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html.dark-mode .btn-outline-secondary:hover,
html.dark-mode .btn-outline-dark:hover {
    background-color: var(--dm-border);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

/* Badges kept legible on dark surfaces */
html.dark-mode .badge-light,
html.dark-mode .badge-secondary {
    background-color: var(--dm-surface-alt);
    color: var(--dm-text);
}

/* Dropdowns */
html.dark-mode .dropdown-menu {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html.dark-mode .dropdown-item {
    color: var(--dm-text);
}

html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
    background-color: var(--dm-surface-alt);
    color: var(--dm-text);
}

html.dark-mode .dropdown-divider {
    border-color: var(--dm-border);
}

/* Modals */
html.dark-mode .modal-content {
    background-color: var(--dm-surface);
    color: var(--dm-text);
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    border-color: var(--dm-border);
}

html.dark-mode .close {
    color: var(--dm-text);
    text-shadow: none;
}

/* Nav tabs / pills (used in TD review sidebar and detail pages) */
html.dark-mode .nav-tabs {
    border-color: var(--dm-border);
}

html.dark-mode .nav-tabs .nav-link {
    color: var(--dm-text-muted);
}

html.dark-mode .nav-tabs .nav-link.active {
    background-color: var(--dm-surface);
    border-color: var(--dm-border) var(--dm-border) var(--dm-surface);
    color: var(--dm-text);
}

html.dark-mode .nav-pills .nav-link {
    color: var(--dm-text-muted);
}

html.dark-mode .nav-pills .nav-link.active {
    color: #fff;
}

/* Breadcrumbs / pagination */
html.dark-mode .breadcrumb {
    background-color: transparent;
}

html.dark-mode .page-link {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html.dark-mode .page-item.disabled .page-link {
    background-color: var(--dm-surface);
    color: var(--dm-text-muted);
}

/* XML / EDI previews rendered as <pre>/<code> */
html.dark-mode pre,
html.dark-mode code {
    background-color: var(--dm-surface-alt);
    color: var(--dm-text);
    border-color: var(--dm-border);
}

/* Alerts keep their semantic color but need a darker tint to stay readable */
html.dark-mode .alert-light {
    background-color: var(--dm-surface-alt);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

/* Login / register cards sit on a photo background; keep them readable */
html.dark-mode .login-box .card,
html.dark-mode .register-box .card {
    background-color: var(--dm-surface);
}

/* ---------------------------------------------------------------------
 * Responsive fixes (apply regardless of theme)
 * ------------------------------------------------------------------- */

/* Stowage bay grid: fixed-width columns need their own scroll container
   instead of overflowing the page on narrow viewports. */
.bay-grid-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
}

@media (max-width: 575.98px) {
    .content-wrapper > .content-header .container-fluid,
    .content-wrapper > .content > .container-fluid {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}