/* ============================================================
   VGuard Rishta - Light / Dark / Auto theme overlay
   Loaded after all other stylesheets so these rules win the
   cascade without needing !important on most selectors.
   Toggle target: html[data-theme="light"|"dark"]
   ============================================================ */

:root {
    --vg-bg: #f7f7f7;
    --vg-surface: #ffffff;
    --vg-surface-alt: #f8f8f8;
    --vg-text: #333333;
    --vg-text-muted: #7a7a7a;
    --vg-border: #ebebeb;
    --vg-input-bg: #ffffff;
    --vg-input-border: #ced4da;
    --vg-input-text: #495057;
    --vg-table-stripe: #f9f9f9;
    --vg-shadow: rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] {
    --vg-bg: #14171c;
    --vg-surface: #1e232b;
    --vg-surface-alt: #262c36;
    --vg-text: #dcdfe4;
    --vg-text-muted: #a3aab5;
    --vg-border: #343b46;
    --vg-input-bg: #262c36;
    --vg-input-border: #454d59;
    --vg-input-text: #e6e9ee;
    --vg-table-stripe: #232a33;
    --vg-shadow: rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] body.app-body,
html:not([data-theme]) body.app-body {
    background-color: var(--vg-bg);
}

html[data-theme="dark"] body.app-body,
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .blog-area,
html[data-theme="dark"] .container-fluid,
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] label,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 {
    color: var(--vg-text);
}

/* Cards / boxes / panels.
   .info-box_1 / .box also carry decorative gradient modifiers (.nf1-.nf4, .nflink)
   with !important background-image - those must keep their gradient in both themes,
   so they're excluded here. Their content wrapper (.info-box-content / .box-content)
   is intentionally left transparent (never given a background of its own) so it never
   paints over that gradient. */
html[data-theme="dark"] .well,
html[data-theme="dark"] .well2,
html[data-theme="dark"] .box:not(.nf1):not(.nf2):not(.nf3):not(.nf4):not(.nflink),
html[data-theme="dark"] .info-box_1:not(.nf1):not(.nf2):not(.nf3):not(.nf4):not(.nflink),
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .loyaltyprogram,
html[data-theme="dark"] .midhead,
html[data-theme="dark"] .carrd1,
html[data-theme="dark"] figure.mybox {
    background-color: var(--vg-surface);
    color: var(--vg-text);
    border-color: var(--vg-border);
}

html[data-theme="dark"] .info-box-content,
html[data-theme="dark"] .box-content {
    color: var(--vg-text);
}

html[data-theme="dark"] .nf1 .info-box-content,
html[data-theme="dark"] .nf2 .info-box-content,
html[data-theme="dark"] .nf3 .info-box-content,
html[data-theme="dark"] .nf4 .info-box-content,
html[data-theme="dark"] .nflink .info-box-content,
html[data-theme="dark"] .nf1 .info-box-content *,
html[data-theme="dark"] .nf2 .info-box-content *,
html[data-theme="dark"] .nf3 .info-box-content *,
html[data-theme="dark"] .nf4 .info-box-content *,
html[data-theme="dark"] .nflink .info-box-content * {
    color: #000;
}

html[data-theme="dark"] .panel-default > .panel-heading,
html[data-theme="dark"] .panel-title > a,
html[data-theme="dark"] .panel-title > a:hover {
    background-color: var(--vg-surface-alt);
    color: var(--vg-text);
    border-color: var(--vg-border);
}

html[data-theme="dark"] .panel-group .panel,
html[data-theme="dark"] .panel-body {
    border-color: var(--vg-border);
}

/* .white-bg hardcodes "background: #f7f7f7 !important" in default.css,
   so beating it also needs !important here (our higher-specificity selector
   still wins the tie-break against that single-class rule). */
html[data-theme="dark"] .white-bg {
    background: var(--vg-surface) !important;
    color: var(--vg-text);
}

/* Tables */
html[data-theme="dark"] table,
html[data-theme="dark"] .table,
html[data-theme="dark"] table.dataTable {
    background-color: var(--vg-surface);
    color: var(--vg-text);
}

html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] table.dataTable tbody td {
    border-color: var(--vg-border);
    color: var(--vg-text);
}

/* The DataTables CDN stylesheet gives every tbody row its own explicit
   "background-color: #fff", not just the odd/stripe rows - that row-level
   background paints over the <table>'s own background, so "even" rows were
   staying white after a search finished. Force every row dark first, the
   more specific .odd/.stripe rule below still layers the stripe tone on top. */
html[data-theme="dark"] .table > tbody > tr,
html[data-theme="dark"] table.dataTable > tbody > tr {
    background-color: var(--vg-surface);
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
html[data-theme="dark"] table.dataTable tbody tr.odd {
    background-color: var(--vg-table-stripe);
}

/* DataTables' own CDN stylesheet (jquery.dataTables.min.css) sets a fixed
   light hover background (e.g. #f5f5f5/#eee) with no !important, since the
   "hover" class it adds isn't something we control. Combined with our dark-mode
   text color that background makes hovered rows unreadable, so force a dark
   hover background here regardless of which hover class/selector applied it. */
html[data-theme="dark"] .table-hover > tbody > tr:hover,
html[data-theme="dark"] .table tbody tr:hover,
html[data-theme="dark"] table tbody tr:hover,
html[data-theme="dark"] table.dataTable tbody tr:hover,
html[data-theme="dark"] table.dataTable.hover tbody tr:hover,
html[data-theme="dark"] table.dataTable.display tbody tr:hover {
    background-color: var(--vg-surface-alt) !important;
    color: var(--vg-text) !important;
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > td,
html[data-theme="dark"] .table tbody tr:hover > td,
html[data-theme="dark"] table tbody tr:hover > td,
html[data-theme="dark"] table.dataTable tbody tr:hover > td {
    color: var(--vg-text) !important;
}

html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > thead > tr > th,
html[data-theme="dark"] .table-bordered > tbody > tr > td {
    border-color: var(--vg-border);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: var(--vg-text);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--vg-surface);
    border-color: var(--vg-border);
    color: var(--vg-text) !important;
}

/* DataTables' "processing" overlay (shown while an AJAX search is in flight)
   ships a white/semi-transparent gradient background from its own CDN
   stylesheet - that's the white flash seen mid-search in dark mode. */
html[data-theme="dark"] .dataTables_processing {
    background: var(--vg-surface) !important;
    background-image: none !important;
    color: var(--vg-text) !important;
    opacity: 0.95;
}

/* Forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-control1,
html[data-theme="dark"] select.form-control2,
html[data-theme="dark"] select.form-control3,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="date"] {
    background-color: var(--vg-input-bg);
    color: var(--vg-input-text);
    border-color: var(--vg-input-border);
}

/* A <select>'s own background-color isn't reliably picked up by its native
   dropdown popup (Chromium/Windows in particular) - the popup can stay
   light while the <option> text inherits our dark-mode (near-white) color,
   making every option unreadable. Style <option> explicitly so the popup
   itself is dark too. */
html[data-theme="dark"] select option {
    background-color: var(--vg-input-bg);
    color: var(--vg-input-text);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .form-control1::placeholder {
    color: var(--vg-text-muted);
}

html[data-theme="dark"] .chosen-container-single .chosen-single,
html[data-theme="dark"] .chosen-container .chosen-drop,
html[data-theme="dark"] .chosen-container .chosen-results {
    background-color: var(--vg-input-bg);
    color: var(--vg-input-text);
    border-color: var(--vg-input-border);
}

html[data-theme="dark"] .bootstrap-select .dropdown-toggle,
html[data-theme="dark"] .bootstrap-select .dropdown-menu {
    background-color: var(--vg-input-bg);
    color: var(--vg-input-text);
    border-color: var(--vg-input-border);
}

/* Buttons - .btn-default ships from bootstrap.min.css with a hardcoded white
   background/dark text and no theme awareness, so every Cancel/Close/Reset
   button using it (across every modal in the app, not just Part Master) stayed
   a bright white rectangle against the dark background. */
html[data-theme="dark"] .btn-default {
    background-color: var(--vg-surface-alt);
    color: var(--vg-text);
    border-color: var(--vg-border);
}

html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-default:focus,
html[data-theme="dark"] .btn-default.focus {
    background-color: var(--vg-surface);
    color: var(--vg-text);
    border-color: var(--vg-input-border);
}

/* Dropdowns / modals / breadcrumbs / pagination */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    background-color: var(--vg-surface);
    color: var(--vg-text);
    border-color: var(--vg-border);
}

html[data-theme="dark"] .dropdown-menu > li > a {
    color: var(--vg-text);
}

html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus {
    background-color: var(--vg-surface-alt);
    color: var(--vg-text);
}

html[data-theme="dark"] .breadcrumbs > ul > li > a {
    color: var(--vg-text);
}

html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
    background-color: var(--vg-surface);
    color: var(--vg-text);
    border-color: var(--vg-border);
}

/* This app actually renders bootstrap-datepicker (its script loads after
   jquery-ui's and overwrites $.fn.datepicker), which uses .datepicker/.day/.old/
   .new/.disabled markup - not jquery-ui's .ui-datepicker. Its own hover rules
   (td.day:hover, span:hover, prev/next/switch:hover) paint a plain #eee
   background with no text color, so they inherited our dark-mode light text
   from the shared .dropdown-menu class - light-on-light, unreadable on hover. */
html[data-theme="dark"] .datepicker {
    background-color: var(--vg-surface);
    color: var(--vg-text);
    border-color: var(--vg-border);
}

html[data-theme="dark"] .datepicker table tr td,
html[data-theme="dark"] .datepicker table tr th,
html[data-theme="dark"] .datepicker .datepicker-switch,
html[data-theme="dark"] .datepicker .prev,
html[data-theme="dark"] .datepicker .next {
    color: var(--vg-text);
}

html[data-theme="dark"] .datepicker table tr td.day:hover,
html[data-theme="dark"] .datepicker table tr td span:hover,
html[data-theme="dark"] .datepicker .datepicker-switch:hover,
html[data-theme="dark"] .datepicker .prev:hover,
html[data-theme="dark"] .datepicker .next:hover,
html[data-theme="dark"] .datepicker tfoot tr th:hover {
    background: var(--vg-surface-alt) !important;
    color: var(--vg-text) !important;
}

html[data-theme="dark"] .datepicker table tr td.new,
html[data-theme="dark"] .datepicker table tr td.old,
html[data-theme="dark"] .datepicker table tr td span.new,
html[data-theme="dark"] .datepicker table tr td span.old {
    color: var(--vg-text-muted);
}

html[data-theme="dark"] .datepicker table tr td.disabled,
html[data-theme="dark"] .datepicker table tr td.disabled:hover {
    background: transparent !important;
    color: var(--vg-text-muted) !important;
}

html[data-theme="dark"] .datepicker-dropdown:after {
    border-bottom-color: var(--vg-surface);
}

html[data-theme="dark"] .datepicker-dropdown.datepicker-orient-top:after {
    border-top-color: var(--vg-surface);
}

/* Report generation UI: the "please wait" progress modal, the pre-search
   "select filters" overlay, and the skeleton-row shimmer (see _AdminLayout.cshtml's
   inline <style> block). That block is defined in <body>, after theme.css's <link>
   in <head>, so without dark rules of our own it would win on source order for any
   tied specificity - these selectors add the [data-theme="dark"] prefix so they
   win on specificity instead, regardless of where in the document they sit. */
html[data-theme="dark"] #report-progress-box {
    background: var(--vg-surface);
    color: var(--vg-text);
}

/* Admin/Operations.cshtml's own inline <style> block ("Manage Role Permissions"
   panel) hardcodes a light-gray panel background the same way - same fix. */
html[data-theme="dark"] #permPanel {
    background: var(--vg-surface-alt);
    border-color: var(--vg-border);
    color: var(--vg-text);
}

html[data-theme="dark"] #permPanel h5 {
    color: var(--vg-text);
}

html[data-theme="dark"] #report-progress-box h5,
html[data-theme="dark"] #report-progress-meta {
    color: var(--vg-text);
}

html[data-theme="dark"] #report-progress-bar-wrap {
    background: var(--vg-surface-alt);
}

html[data-theme="dark"] .report-search-overlay {
    background: rgba(20, 23, 28, 0.78);
}

html[data-theme="dark"] .report-search-overlay span {
    background: var(--vg-surface);
    border-color: var(--vg-border);
    color: var(--vg-text);
}

html[data-theme="dark"] .skeleton-cell {
    background: linear-gradient(90deg, var(--vg-surface-alt) 25%, var(--vg-border) 50%, var(--vg-surface-alt) 75%);
    background-size: 200% 100%;
}

html[data-theme="dark"] .skeleton-row td {
    border-bottom-color: var(--vg-border) !important;
}

/* Part Master page (Admin/PartMaster.cshtml) - its own inline <style> block
   hardcodes light colors (white panels, light-gray hover/selected states,
   muted text) for the 3-column browser, badges, global search and history
   modal, none of which theme.css knew about before. .pm-col-head keeps its
   orange brand background/white text in both themes intentionally. */
html[data-theme="dark"] .pm-browser-wrap {
    background: var(--vg-surface);
    border-color: var(--vg-border);
}

html[data-theme="dark"] .pm-col {
    border-color: var(--vg-border);
}

html[data-theme="dark"] .pm-list-search {
    background: var(--vg-surface-alt);
    border-color: var(--vg-border);
}

html[data-theme="dark"] .pm-list-item {
    border-color: var(--vg-border);
}

html[data-theme="dark"] .pm-list-item:hover {
    background: var(--vg-surface-alt);
}

html[data-theme="dark"] .pm-list-item.selected {
    background: rgba(230, 126, 34, .18);
}

html[data-theme="dark"] .pm-item-name,
html[data-theme="dark"] .pm-search-item-title {
    color: var(--vg-text);
}

html[data-theme="dark"] .pm-item-code {
    background: var(--vg-surface-alt);
    color: var(--vg-text-muted);
}

html[data-theme="dark"] .pm-item-meta,
html[data-theme="dark"] .pm-chevron,
html[data-theme="dark"] .pm-empty-hint,
html[data-theme="dark"] .pm-parts-placeholder,
html[data-theme="dark"] .pm-parts-placeholder i,
html[data-theme="dark"] .pm-global-search-icon,
html[data-theme="dark"] .pm-global-search-clear,
html[data-theme="dark"] .pm-search-item-path,
html[data-theme="dark"] .pm-search-empty,
html[data-theme="dark"] .pm-search-hint,
html[data-theme="dark"] .pm-coming-soon,
html[data-theme="dark"] .pm-coming-soon i {
    color: var(--vg-text-muted);
}

html[data-theme="dark"] .pm-global-search-clear:hover {
    color: var(--vg-text);
}

html[data-theme="dark"] .pm-badge-active {
    background: rgba(39, 174, 96, .18);
    color: #2ecc71;
}

html[data-theme="dark"] .pm-badge-inactive {
    background: var(--vg-surface-alt);
    color: var(--vg-text-muted);
}

html[data-theme="dark"] .pm-action-btn {
    color: var(--vg-text-muted);
}

html[data-theme="dark"] .pm-action-btn:hover {
    background: var(--vg-surface-alt);
    color: var(--vg-text);
}

html[data-theme="dark"] .pm-context {
    background: var(--vg-surface-alt);
    color: var(--vg-text);
}

html[data-theme="dark"] .pm-global-search-results {
    background: var(--vg-surface);
    border-color: var(--vg-border);
}

html[data-theme="dark"] .pm-search-item {
    border-color: var(--vg-border);
}

html[data-theme="dark"] .pm-search-item:hover,
html[data-theme="dark"] .pm-search-item.active {
    background: var(--vg-surface-alt);
}

/* Global search result-type tags ("Part"/"Category"/"Subcat") - pastel light
   backgrounds that stayed bright/unthemed against the dark dropdown. Kept the
   same brand hues as light mode, just deepened to sit on a dark surface. */
html[data-theme="dark"] .pm-search-type-part { background: rgba(41, 128, 185, .22); color: #5dade2; }
html[data-theme="dark"] .pm-search-type-cat  { background: rgba(230, 126, 34, .22); color: #f0a860; }
html[data-theme="dark"] .pm-search-type-sub  { background: rgba(39, 174, 96, .22);  color: #2ecc71; }

/* Higher specificity than the page's own ".dataTables_wrapper .dataTables_length
   select" rule (2 classes + tag), so this wins regardless of cascade order. */
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--vg-input-bg);
    color: var(--vg-input-text);
    border-color: var(--vg-input-border);
}

html[data-theme="dark"] .pm-history-thead {
    background: var(--vg-surface-alt);
}

/* Program Selector row uses the shared ".callwell" class (style.css), which
   hardcodes a light-gray background (#e4e4e4) with no theme awareness. Scoped
   to this page's own ".pm-program-row" class (added alongside .callwell in the
   markup) rather than overriding .callwell itself, since that class is reused
   by unrelated forms elsewhere in the app. */
html[data-theme="dark"] .pm-program-row {
    background-color: var(--vg-surface-alt) !important;
    border-color: var(--vg-border);
}

html[data-theme="dark"] .pm-history-old {
    color: var(--vg-text-muted);
}

@keyframes pmRowFlashDark {
    0%   { background-color: rgba(255, 193, 7, .35); }
    100% { background-color: transparent; }
}

html[data-theme="dark"] .pm-row-highlight {
    animation-name: pmRowFlashDark;
}

/* SalePerson/QRTransactionReport.cshtml - its own inline <style> block hardcodes
   a light search-controls panel and a white entries dropdown (both with
   !important, so the override here needs !important too to win the tie). The
   blue (#007bff) accent borders are intentional brand styling kept in both themes. */
html[data-theme="dark"] .search-controls-row {
    background: var(--vg-surface-alt);
    border-color: var(--vg-border);
}

html[data-theme="dark"] .dataTables_length select,
html[data-theme="dark"] #custom-entries-select {
    background-color: var(--vg-input-bg) !important;
    color: var(--vg-input-text) !important;
}

html[data-theme="dark"] .dataTables_filter label,
html[data-theme="dark"] .dataTables_length label {
    color: var(--vg-text) !important;
}

html[data-theme="dark"] .datatable-controls-container,
html[data-theme="dark"] #custom-datatable-controls {
    border-color: var(--vg-border);
}

/* Scrollbar (WebKit) */
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--vg-surface-alt);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--vg-border);
}

/* Smooth transition between themes */
body.app-body,
.wrapper,
.well, .well2, .box, .box-content, .info-box_1, .info-box-content, .panel, .panel-body,
.table, table, .form-control, .form-control1 {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* ---- Theme toggle control ---- */
.theme-toggle-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

.theme-toggle-btn .fa {
    font-size: 15px;
}