/* =========================================================================
   Cherry Master-Tool look for the portal (2026-11-08).
   Same palette and shapes as the Master-Tool / Cherry ECU Logger desktop UI:
     #1A1A1A rail/header/status   #252525 page   #2E2E2E cards   #1C1C1C fields
     #444444 lines   #555555 field borders   #CC3333 / #E04A4A red   #EDEDED text   #A8A8A8 muted
   Square corners, flat buttons, red ALL-CAPS section labels, red rule under the header.
   Loaded LAST in every layout; every rule is scoped to body.dark-mode so it outranks custom.css.
   Revert: remove the <link> to this file from resources/views/layouts/*.blade.php.
   ========================================================================= */

body.dark-mode {
    --mt-rail: #1A1A1A; --mt-bg: #252525; --mt-card: #2E2E2E; --mt-field: #1C1C1C;
    --mt-line: #444444; --mt-border: #555555; --mt-hover: #2C2C2C; --mt-sel: #2A2A2A;
    --mt-red: #CC3333; --mt-red-hi: #E04A4A; --mt-text: #EDEDED; --mt-body: #D8D8D8;
    --mt-muted: #A8A8A8; --mt-dim: #6E6E6E;
    --bs-body-bg: #252525; --bs-body-color: #EDEDED; --bs-border-color: #444444;
    --bs-secondary-bg: #2E2E2E; --bs-tertiary-bg: #2E2E2E; --bs-dark: #1A1A1A; --bs-light: #2E2E2E;
    --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0;
    color: var(--mt-text);
}

/* ---- typography (never touches icon fonts: .ni / .fa / .icon keep their own) ---- */
body.dark-mode,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
body.dark-mode .title, body.dark-mode .nk-block-title, body.dark-mode .lead, body.dark-mode p, body.dark-mode label,
body.dark-mode .btn, body.dark-mode .form-control, body.dark-mode .form-select, body.dark-mode .table,
body.dark-mode .nk-menu-text, body.dark-mode .dropdown-item, body.dark-mode .nk-tb-list, body.dark-mode .badge,
body.dark-mode a {
    font-family: "Segoe UI", "Inter", Arial, sans-serif !important;
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4,
body.dark-mode .nk-block-title, body.dark-mode .page-title {
    color: var(--mt-text) !important; font-weight: 600; letter-spacing: 0;
}
body.dark-mode .nk-block-des, body.dark-mode .nk-block-des p, body.dark-mode .text-soft,
body.dark-mode .sub-text, body.dark-mode .text-muted, body.dark-mode .lead-text span {
    color: var(--mt-muted) !important;
}
/* DashLite's blue-grey (#8094ae / #b6c6e3) and purple primary (#6576ff) -> Master-Tool greys and red */
body.dark-mode .text-base, body.dark-mode .text-body, body.dark-mode .link-text, body.dark-mode .list-group-item,
body.dark-mode .nav-tabs .nav-link, body.dark-mode .popover-body, body.dark-mode .link-list-plain a,
body.dark-mode .link-list-opt a, body.dark-mode .channel-list a, body.dark-mode .chat-from .name,
body.dark-mode .nk-reply-meta-info .who, body.dark-mode .user-plan-title, body.dark-mode .lead-text {
    color: var(--mt-body) !important;
}
body.dark-mode .text-muted, body.dark-mode .nk-tb-list .tb-lead-sub, body.dark-mode .nk-tb-list .tb-amount-sub,
body.dark-mode .link-list a, body.dark-mode .link-list-menu a, body.dark-mode .list-plain a, body.dark-mode .link-dark,
body.dark-mode .toast-header, body.dark-mode .user-contacts li .icon, body.dark-mode .nk-reply-tools .date,
body.dark-mode .nk-opt-item-name, body.dark-mode .list-step li.list-step-done, body.dark-mode .user-info .sub-text,
body.dark-mode .user-status, body.dark-mode .date, body.dark-mode .time, body.dark-mode .text-info,
body.dark-mode .icon[class*=bg-light], body.dark-mode .user-avatar[class*=-light] {
    color: var(--mt-muted) !important;
}
body.dark-mode .text-primary, body.dark-mode .link-primary { color: var(--mt-red-hi) !important; }
body.dark-mode .bg-primary, body.dark-mode .badge.bg-primary, body.dark-mode .user-avatar.bg-primary {
    background-color: var(--mt-red) !important; border-color: var(--mt-red) !important; color: #FFFFFF !important;
}
body.dark-mode a:not(.btn):not(.nk-menu-link):not(.dropdown-item) { color: var(--mt-red-hi); }
body.dark-mode a:not(.btn):not(.nk-menu-link):not(.dropdown-item):hover { color: #FF7A7A; }

/* ---- surfaces ---- */
body.dark-mode, body.dark-mode .nk-body, body.dark-mode .nk-app-root, body.dark-mode .nk-main,
body.dark-mode .nk-wrap, body.dark-mode .nk-content, body.dark-mode .nk-content-body,
body.dark-mode .nk-content-wrap {
    background-color: var(--mt-bg) !important;
}
body.dark-mode .nk-sidebar, body.dark-mode .nk-sidebar-head, body.dark-mode .nk-sidebar-element,
body.dark-mode .nk-header, body.dark-mode .nk-footer, body.dark-mode .nk-aside {
    background-color: var(--mt-rail) !important;
    border-color: #333333 !important;
}
body.dark-mode .nk-header { border-bottom: 2px solid var(--mt-red) !important; box-shadow: none !important; }
body.dark-mode .nk-sidebar { border-right: 1px solid #333333 !important; box-shadow: none !important; }
body.dark-mode .nk-footer { border-top: 1px solid #333333 !important; }

body.dark-mode .card, body.dark-mode .card-bordered, body.dark-mode .card-inner, body.dark-mode .card-preview,
body.dark-mode .modal-content, body.dark-mode .modal-header, body.dark-mode .modal-footer,
body.dark-mode .popover, body.dark-mode .popover-body, body.dark-mode .popover-header, body.dark-mode .toast,
body.dark-mode .offcanvas, body.dark-mode .accordion-item, body.dark-mode .accordion-button,
body.dark-mode .list-group-item, body.dark-mode .nav-tabs-card, body.dark-mode .tab-content,
body.dark-mode .nk-msg-aside, body.dark-mode .nk-msg-body, body.dark-mode .nk-msg-head,
body.dark-mode .nk-reply-form, body.dark-mode .nk-reply-header, body.dark-mode .nk-reply-meta,
body.dark-mode .nk-chat-aside, body.dark-mode .nk-chat-body, body.dark-mode .nk-ibx-head,
body.dark-mode .nk-ibx-aside, body.dark-mode .nk-msg-profile-toggle {
    background-color: var(--mt-card) !important;
}
body.dark-mode .card, body.dark-mode .card-bordered, body.dark-mode .modal-content, body.dark-mode .popover,
body.dark-mode .accordion-item, body.dark-mode .list-group-item, body.dark-mode .dropdown-menu,
body.dark-mode .card-inner, body.dark-mode .modal-header, body.dark-mode .modal-footer,
body.dark-mode .nk-block-head, body.dark-mode .table, body.dark-mode .table th, body.dark-mode .table td,
body.dark-mode .nk-tb-item, body.dark-mode .nk-tb-head, body.dark-mode .nav-tabs, body.dark-mode .nav-tabs .nav-link,
body.dark-mode hr, body.dark-mode .divider, body.dark-mode .link-list-plain li + li,
body.dark-mode .nk-reply-header, body.dark-mode .nk-reply-form {
    border-color: var(--mt-line) !important;
}
body.dark-mode .card, body.dark-mode .card-bordered { border: 1px solid var(--mt-line) !important; box-shadow: none !important; }

/* ---- square corners everywhere (the Master-Tool is flat and square) ---- */
body.dark-mode .card, body.dark-mode .card-inner, body.dark-mode .btn, body.dark-mode .form-control,
body.dark-mode .form-select, body.dark-mode .input-group-text, body.dark-mode .modal-content,
body.dark-mode .dropdown-menu, body.dark-mode .badge, body.dark-mode .alert, body.dark-mode .popover,
body.dark-mode .toast, body.dark-mode .nk-menu-link, body.dark-mode .page-link, body.dark-mode .nav-link,
body.dark-mode .accordion-item, body.dark-mode .accordion-button, body.dark-mode .list-group-item,
body.dark-mode .progress, body.dark-mode .progress-bar, body.dark-mode .dropify-wrapper,
body.dark-mode select, body.dark-mode textarea, body.dark-mode .nk-quick-nav-icon:before {
    border-radius: 0 !important;
}

/* ---- section labels: red, small, ALL CAPS (Master-Tool card headings) ---- */
body.dark-mode .card-title .title, body.dark-mode .card-title h6, body.dark-mode .card-title-group .title,
body.dark-mode .overline-title, body.dark-mode .nk-menu-heading .overline-title,
body.dark-mode .card-head .title, body.dark-mode .modal-title {
    color: var(--mt-red-hi) !important;
    font-size: 12px !important; font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: .06em;
}

/* ---- navigation rail ---- */
body.dark-mode .nk-menu-link { color: var(--mt-muted) !important; border-left: 3px solid transparent; }
body.dark-mode .nk-menu-link .nk-menu-icon, body.dark-mode .nk-menu-link .icon { color: var(--mt-muted) !important; }
body.dark-mode .nk-menu-link:hover, body.dark-mode .nk-menu-sub .nk-menu-link:hover {
    background-color: var(--mt-hover) !important; color: var(--mt-text) !important;
}
body.dark-mode .nk-menu-item.active > .nk-menu-link, body.dark-mode .nk-menu-item.current-menu > .nk-menu-link,
body.dark-mode .nk-menu-sub .active > .nk-menu-link {
    background-color: var(--mt-sel) !important; color: var(--mt-text) !important;
    border-left: 3px solid var(--mt-red) !important;
}
body.dark-mode .nk-menu-item.active > .nk-menu-link .icon,
body.dark-mode .nk-menu-item.active > .nk-menu-link .nk-menu-icon { color: var(--mt-red-hi) !important; }

/* ---- buttons: flat; primary = red, normal = dark with a 1 px edge ---- */
body.dark-mode .btn { font-weight: 700 !important; box-shadow: none !important; }
body.dark-mode .btn-primary, body.dark-mode .btn-danger, body.dark-mode .btn-cherry, body.dark-mode .bg-cherry.btn {
    background-color: var(--mt-red) !important; border: 1px solid var(--mt-red) !important; color: #FFFFFF !important;
}
body.dark-mode .btn-primary:hover, body.dark-mode .btn-danger:hover, body.dark-mode .btn-cherry:hover,
body.dark-mode .btn-primary:focus, body.dark-mode .btn-danger:focus, body.dark-mode .btn-cherry:focus {
    background-color: #E04848 !important; border-color: #E04848 !important;
}
body.dark-mode .btn-primary:disabled, body.dark-mode .btn-danger:disabled, body.dark-mode .btn-cherry:disabled {
    background-color: #4A2626 !important; border-color: #4A2626 !important; color: #9A7A7A !important;
}
body.dark-mode .btn-secondary, body.dark-mode .btn-light, body.dark-mode .btn-dark, body.dark-mode .btn-white,
body.dark-mode .btn-outline-light, body.dark-mode .btn-outline-secondary, body.dark-mode .btn-outline-primary,
body.dark-mode .btn-dim, body.dark-mode .btn-outline-dark {
    background-color: var(--mt-field) !important; border: 1px solid var(--mt-border) !important; color: var(--mt-text) !important;
}
body.dark-mode .btn-secondary:hover, body.dark-mode .btn-light:hover, body.dark-mode .btn-dark:hover,
body.dark-mode .btn-white:hover, body.dark-mode .btn-outline-light:hover, body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-primary:hover, body.dark-mode .btn-dim:hover, body.dark-mode .btn-outline-dark:hover {
    background-color: #383838 !important;
}

/* ---- fields ---- */
body.dark-mode .form-control, body.dark-mode .form-select, body.dark-mode .input-group-text,
body.dark-mode textarea, body.dark-mode select, body.dark-mode input[type="text"], body.dark-mode input[type="email"],
body.dark-mode input[type="password"], body.dark-mode input[type="number"], body.dark-mode input[type="search"] {
    background-color: var(--mt-field) !important; border: 1px solid var(--mt-border) !important;
    color: var(--mt-text) !important;
}
body.dark-mode .form-control:focus, body.dark-mode .form-select:focus, body.dark-mode textarea:focus,
body.dark-mode select:focus, body.dark-mode input:focus {
    border-color: var(--mt-red) !important; box-shadow: none !important;
}
body.dark-mode .dataTables_filter input, body.dark-mode .dataTables_length select {
    background-color: var(--mt-field) !important; border: 1px solid var(--mt-border) !important;
    color: var(--mt-text) !important; border-radius: 0 !important;
}
body.dark-mode code { color: var(--mt-body); background: transparent; }
body.dark-mode .form-control::placeholder { color: var(--mt-dim) !important; }
body.dark-mode .form-label, body.dark-mode .form-group label { color: var(--mt-muted) !important; }

/* ---- tables ---- */
body.dark-mode .table thead, body.dark-mode .table thead th, body.dark-mode .nk-tb-head,
body.dark-mode .nk-tb-head .nk-tb-col {
    background-color: var(--mt-field) !important; color: var(--mt-muted) !important;
    font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
}
/* Bootstrap 5.3 paints table cells with an inset box-shadow of --bs-table-bg-type, not background-color */
body.dark-mode .table-light, body.dark-mode .table-dark, body.dark-mode thead.thead-dark {
    --bs-table-bg: #1C1C1C; --bs-table-color: #A8A8A8; --bs-table-border-color: #444444;
}
body.dark-mode .table .table-light th, body.dark-mode .table .table-light td, body.dark-mode .table thead th,
body.dark-mode .table > thead > tr > *, body.dark-mode .table-dark > :not(caption) > * > *,
body.dark-mode thead.table-dark th, body.dark-mode thead.thead-dark th {
    --bs-table-bg-type: #1C1C1C; --bs-table-accent-bg: transparent; box-shadow: none !important;
    background-color: var(--mt-field) !important; color: var(--mt-muted) !important;
    border-color: var(--mt-line) !important;
}
body.dark-mode .table > tbody > tr > * { --bs-table-bg-type: transparent; box-shadow: none !important; color: var(--mt-body); }
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #292929 !important; }
body.dark-mode .table-hover tbody tr:hover, body.dark-mode .nk-tb-item:hover { background-color: var(--mt-hover) !important; }

/* ---- dropdowns, tabs, pagination, highlighted items ---- */
body.dark-mode .dropdown-menu, body.dark-mode .dropdown-inner { background-color: var(--mt-sel) !important; }
body.dark-mode .dropdown-item:hover, body.dark-mode .dropdown-item:focus, body.dark-mode .dropdown-item.active,
body.dark-mode .list-group-item.active, body.dark-mode .channel-list a.active {
    background-color: var(--mt-red) !important; color: #FFFFFF !important;
}
body.dark-mode .nav-tabs .nav-link.active, body.dark-mode .nav-pills .nav-link.active,
body.dark-mode .accordion-button:not(.collapsed) {
    background-color: var(--mt-sel) !important; color: var(--mt-text) !important;
    border-bottom: 2px solid var(--mt-red) !important;
}
body.dark-mode .pagination .page-link { background-color: var(--mt-field) !important; border-color: var(--mt-border) !important; color: var(--mt-text) !important; }
body.dark-mode .pagination .page-item.active .page-link { background-color: var(--mt-red) !important; border-color: var(--mt-red) !important; }

/* ---- alerts, badges, progress ---- */
body.dark-mode .alert { border-width: 0 0 0 3px !important; border-style: solid !important; background-color: var(--mt-card) !important; }
body.dark-mode .alert-warning { border-color: #E0A030 !important; color: #F0C060 !important; }
body.dark-mode .alert-danger  { border-color: var(--mt-red) !important; color: #FF8A8A !important; }
body.dark-mode .alert-success { border-color: #6FDF6F !important; color: #8FEF8F !important; }
body.dark-mode .alert-info, body.dark-mode .alert-primary { border-color: var(--mt-muted) !important; color: var(--mt-body) !important; }
body.dark-mode .progress { background-color: var(--mt-field) !important; border: 1px solid var(--mt-line); }
body.dark-mode .progress-bar { background-color: var(--mt-red) !important; }
body.dark-mode .badge-dim.bg-success { background-color: #23351F !important; border-color: #23351F !important; color: #6FDF6F !important; }

/* ---- standalone 404 page ---- */
body.dark-mode .error-container {
    background: var(--mt-card) !important; border: 1px solid var(--mt-line); border-radius: 0 !important; box-shadow: none !important;
}
body.dark-mode .error-code { color: var(--mt-red) !important; text-shadow: none !important; }
body.dark-mode .error-message { color: var(--mt-text) !important; }

/* ---- chat bubbles (Chatify / ticket thread) ---- */
body.dark-mode .sender_msg { background: var(--mt-rail) !important; }

/* ---- page scrollbar like the Master-Tool. Only the root: simplebar containers hide theirs on purpose ---- */
html:has(body.dark-mode) { scrollbar-color: #444444 #1C1C1C; }

/* ---- selection ---- */
body.dark-mode ::selection { background: var(--mt-red); color: #FFFFFF; }