/* Kemet POS — app-wide dark mode.
   Scoped entirely under html[data-app-theme="dark"]; light mode is untouched
   (no light-mode rules here — the existing app IS the light theme).
   Covers the Bootstrap/AdminLTE layer the app is actually built on (.box, .table,
   .form-control, .modal, DataTables, Select2) rather than the sparser Tailwind
   utility classes, which are used inconsistently for both surfaces and
   already-colored badges/buttons and are riskier to override blindly. */

html[data-app-theme="dark"] {
  background-color: #0d0e13;
  --app-bg: #0d0e13;
  --app-surface: #15161e;
  --app-surface-2: #1b1e29;
  --app-border: #262a38;
  --app-ink: #e7e9f3;
  --app-ink-soft: #a5aabd;
  --app-ink-faint: #6d7285;
  --app-accent: #5c8dff;
  --app-accent-soft: rgba(92, 141, 255, .16);
}

/* ---------- shell ----------
   Note: the app's real content wrapper is #scrollable-container / main.tw-bg-gray-100,
   NOT .content-wrapper (that class exists in the bundled AdminLTE CSS but the Blade
   layout never actually applies it — kept as a comment so this mistake isn't repeated). */
html[data-app-theme="dark"] body,
html[data-app-theme="dark"] main.tw-bg-gray-100,
html[data-app-theme="dark"] #scrollable-container {
  background-color: var(--app-bg) !important;
  color: var(--app-ink);
}
html[data-app-theme="dark"] .content-header h1,
html[data-app-theme="dark"] .content-header .tw-text-black,
html[data-app-theme="dark"] .content-header small {
  color: var(--app-ink);
}

/* ---------- boxes / panels / cards ---------- */
html[data-app-theme="dark"] .box,
html[data-app-theme="dark"] .panel,
html[data-app-theme="dark"] .panel-default,
html[data-app-theme="dark"] .well,
html[data-app-theme="dark"] .card {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
html[data-app-theme="dark"] .box-header,
html[data-app-theme="dark"] .panel-heading,
html[data-app-theme="dark"] .box-footer,
html[data-app-theme="dark"] .panel-footer {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-ink);
}
html[data-app-theme="dark"] .box-title {
  color: var(--app-ink);
}
html[data-app-theme="dark"] .box.box-solid > .box-header,
html[data-app-theme="dark"] .box-header.with-border {
  border-bottom-color: var(--app-border);
}

/* ---------- generic text ---------- */
html[data-app-theme="dark"] #scrollable-container,
html[data-app-theme="dark"] #scrollable-container p,
html[data-app-theme="dark"] #scrollable-container span,
html[data-app-theme="dark"] #scrollable-container td,
html[data-app-theme="dark"] #scrollable-container th,
html[data-app-theme="dark"] #scrollable-container label,
html[data-app-theme="dark"] #scrollable-container .tw-text-black,
html[data-app-theme="dark"] #scrollable-container .tw-text-gray-900,
html[data-app-theme="dark"] #scrollable-container .tw-text-gray-700 {
  color: var(--app-ink);
}
html[data-app-theme="dark"] #scrollable-container .text-muted,
html[data-app-theme="dark"] #scrollable-container .tw-text-gray-500,
html[data-app-theme="dark"] #scrollable-container .tw-text-gray-600,
html[data-app-theme="dark"] #scrollable-container .tw-text-gray-400,
html[data-app-theme="dark"] #scrollable-container small {
  color: var(--app-ink-soft);
}
html[data-app-theme="dark"] #scrollable-container .tw-bg-white,
html[data-app-theme="dark"] #scrollable-container .tw-bg-gray-50,
html[data-app-theme="dark"] #scrollable-container .tw-bg-gray-100 {
  background-color: var(--app-surface) !important;
}
html[data-app-theme="dark"] #scrollable-container .tw-border-gray-200,
html[data-app-theme="dark"] #scrollable-container .tw-border-gray-300 {
  border-color: var(--app-border) !important;
}
html[data-app-theme="dark"] a { color: var(--app-accent); }

/* ---------- tables (incl. DataTables) ---------- */
html[data-app-theme="dark"] .table {
  color: var(--app-ink);
}
html[data-app-theme="dark"] .table > thead > tr > th,
html[data-app-theme="dark"] .table > tbody > tr > td,
html[data-app-theme="dark"] .table > tbody > tr > th,
html[data-app-theme="dark"] .table-bordered,
html[data-app-theme="dark"] .table-bordered > thead > tr > th,
html[data-app-theme="dark"] .table-bordered > tbody > tr > td {
  border-color: var(--app-border);
}
html[data-app-theme="dark"] .table > thead > tr > th {
  background: var(--app-surface-2);
  color: var(--app-ink);
}
html[data-app-theme="dark"] .table > tbody > tr {
  background: var(--app-surface);
}
html[data-app-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
  background: var(--app-surface-2);
}
html[data-app-theme="dark"] .table-hover > tbody > tr:hover {
  background: var(--app-accent-soft);
}
html[data-app-theme="dark"] img[src$="/img/default.png"] {
  filter: invert(0.88);
  border-radius: 4px;
}
html[data-app-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-app-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-app-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-app-theme="dark"] .dataTables_wrapper .dataTables_paginate {
  color: var(--app-ink-soft);
}
html[data-app-theme="dark"] .dataTables_wrapper .dataTables_length select,
html[data-app-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background: var(--app-surface);
  color: var(--app-ink);
  border-color: var(--app-border);
}
html[data-app-theme="dark"] .paginate_button,
html[data-app-theme="dark"] .pagination > li > a,
html[data-app-theme="dark"] .pagination > li > span {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-ink) !important;
}
html[data-app-theme="dark"] .paginate_button.current,
html[data-app-theme="dark"] .pagination > .active > a {
  background: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
  color: #fff !important;
}
/* DataTables Buttons toolbar (copy/print/excel/csv) — this app's own JS strips the
   Bootstrap .btn/.btn-default classes off these at runtime, so they carry no
   background of their own; give them one explicitly regardless of that state. */
html[data-app-theme="dark"] .dt-buttons a,
html[data-app-theme="dark"] .dt-buttons button,
html[data-app-theme="dark"] .dt-button {
  background: var(--app-surface-2) !important;
  border: 1px solid var(--app-border) !important;
  color: var(--app-ink) !important;
}
html[data-app-theme="dark"] .dt-buttons a:hover,
html[data-app-theme="dark"] .dt-buttons button:hover,
html[data-app-theme="dark"] .dt-button:hover {
  background: var(--app-border) !important;
}
html[data-app-theme="dark"] ul.dt-button-collection.dropdown-menu {
  background: var(--app-surface);
  border-color: var(--app-border);
}
html[data-app-theme="dark"] div.dt-button-info {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-ink);
}
html[data-app-theme="dark"] div.dt-button-info h2 {
  background: var(--app-surface-2);
  border-color: var(--app-border);
  color: var(--app-ink);
}

html[data-app-theme="dark"] .paginate_button.disabled {
  color: var(--app-ink-faint) !important;
}

/* ---------- forms ---------- */
html[data-app-theme="dark"] .form-control,
html[data-app-theme="dark"] select.form-control,
html[data-app-theme="dark"] textarea.form-control,
html[data-app-theme="dark"] .input-group-addon {
  background-color: var(--app-surface-2);
  border-color: var(--app-border);
  color: var(--app-ink);
}
html[data-app-theme="dark"] .form-control::placeholder {
  color: var(--app-ink-faint);
}
html[data-app-theme="dark"] .form-control:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px var(--app-accent-soft);
}
html[data-app-theme="dark"] .form-control[disabled],
html[data-app-theme="dark"] .form-control[readonly],
html[data-app-theme="dark"] fieldset[disabled] .form-control {
  background-color: var(--app-surface);
  color: var(--app-ink-faint);
}
html[data-app-theme="dark"] .checkbox label,
html[data-app-theme="dark"] .radio label {
  color: var(--app-ink);
}

/* select2 */
html[data-app-theme="dark"] .select2-container--default .select2-selection--single,
html[data-app-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: var(--app-surface-2);
  border-color: var(--app-border);
}
html[data-app-theme="dark"] .select2-container--default .select2-selection__rendered {
  color: var(--app-ink);
}
html[data-app-theme="dark"] .select2-dropdown {
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-ink);
}
html[data-app-theme="dark"] .select2-search--dropdown .select2-search__field {
  background: var(--app-surface-2);
  border-color: var(--app-border);
  color: var(--app-ink);
}
html[data-app-theme="dark"] .select2-results__option {
  color: var(--app-ink);
}
html[data-app-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--app-accent);
}

/* ---------- buttons ---------- */
html[data-app-theme="dark"] .btn-default {
  background-color: var(--app-surface-2);
  border-color: var(--app-border);
  color: var(--app-ink);
}
html[data-app-theme="dark"] .btn-default:hover,
html[data-app-theme="dark"] .btn-default:focus {
  background-color: var(--app-border);
  color: var(--app-ink);
}

/* ---------- modals ---------- */
html[data-app-theme="dark"] .modal-content {
  background-color: var(--app-surface);
  color: var(--app-ink);
  border: 1px solid var(--app-border);
}
html[data-app-theme="dark"] .modal-header,
html[data-app-theme="dark"] .modal-footer {
  border-color: var(--app-border);
}
html[data-app-theme="dark"] .modal-title {
  color: var(--app-ink);
}
html[data-app-theme="dark"] .close {
  color: var(--app-ink);
  opacity: .6;
  text-shadow: none;
}
html[data-app-theme="dark"] .close:hover { opacity: 1; }

/* ---------- dropdowns / nav / misc ---------- */
html[data-app-theme="dark"] .dropdown-menu {
  background-color: var(--app-surface);
  border-color: var(--app-border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
html[data-app-theme="dark"] .dropdown-menu > li > a {
  color: var(--app-ink);
}
html[data-app-theme="dark"] .dropdown-menu > li > a:hover,
html[data-app-theme="dark"] .dropdown-menu > li > a:focus {
  background-color: var(--app-surface-2);
  color: var(--app-ink);
}
html[data-app-theme="dark"] .dropdown-menu .divider {
  background-color: var(--app-border);
}
html[data-app-theme="dark"] .nav-tabs {
  border-bottom-color: var(--app-border);
}
html[data-app-theme="dark"] .nav-tabs > li > a {
  color: var(--app-ink-soft);
}
html[data-app-theme="dark"] .nav-tabs > li.active > a,
html[data-app-theme="dark"] .nav-tabs > li.active > a:hover,
html[data-app-theme="dark"] .nav-tabs > li.active > a:focus {
  background-color: var(--app-surface);
  border-color: var(--app-border) var(--app-border) transparent;
  color: var(--app-ink);
}
/* AdminLTE's ".nav-tabs-custom" tabbed-box widget — a separate component from
   plain .nav-tabs above (used for the tab headers on list pages e.g. products). */
html[data-app-theme="dark"] .nav-tabs-custom {
  background: var(--app-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
html[data-app-theme="dark"] .nav-tabs-custom > .nav-tabs {
  border-bottom-color: var(--app-border);
}
html[data-app-theme="dark"] .nav-tabs-custom > .nav-tabs > li > a {
  color: var(--app-ink-soft);
}
html[data-app-theme="dark"] .nav-tabs-custom > .nav-tabs > li > a:hover {
  color: var(--app-ink);
}
html[data-app-theme="dark"] .nav-tabs-custom > .nav-tabs > li.disabled > a {
  color: var(--app-ink-faint);
}
html[data-app-theme="dark"] .nav-tabs-custom > .nav-tabs > li.header {
  color: var(--app-ink);
}
html[data-app-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active > a {
  background-color: var(--app-surface) !important;
  color: var(--app-ink) !important;
  border-left-color: var(--app-border) !important;
  border-right-color: var(--app-border) !important;
}
html[data-app-theme="dark"] .nav-tabs-custom > .tab-content {
  background: var(--app-surface) !important;
}

html[data-app-theme="dark"] hr {
  border-color: var(--app-border);
}
html[data-app-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--app-bg);
}
html[data-app-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--app-border);
}

/* ---------- home / manager dashboard (resources/views/home/index.blade.php) ----------
   This page ships its own large hand-written <style> block with hardcoded gradients
   per KPI/report/payment card, independent of the .box/.table layer above. */
html[data-app-theme="dark"] .manager-dashboard-shell {
  background:
    linear-gradient(180deg, rgba(92, 141, 255, .10) 0, rgba(92, 141, 255, 0) 240px),
    var(--app-bg) !important;
}
html[data-app-theme="dark"] .manager-dashboard-header {
  background: linear-gradient(135deg, var(--app-surface) 0, var(--app-surface-2) 100%) !important;
  border-bottom-color: var(--app-border) !important;
}
/* Light-mode accents (sky-500, rose-500, ...) are tuned for a white background —
   placed straight on near-black they read as a harsh, inverted "negative" image.
   Swap each accent var for its Tailwind 400 shade (softer, made for dark grounds)
   and tint every card with a faint wash of its OWN accent instead of one flat
   slab, so cards keep their individual identity instead of turning uniform. */
html[data-app-theme="dark"] .manager-kpi-sky { --manager-kpi-accent: #38bdf8; }
html[data-app-theme="dark"] .manager-kpi-emerald { --manager-kpi-accent: #34d399; }
html[data-app-theme="dark"] .manager-kpi-amber { --manager-kpi-accent: #fbbf24; }
html[data-app-theme="dark"] .manager-kpi-rose { --manager-kpi-accent: #fb7185; }
html[data-app-theme="dark"] .manager-kpi-indigo { --manager-kpi-accent: #818cf8; }
html[data-app-theme="dark"] .manager-kpi-cyan { --manager-kpi-accent: #22d3ee; }
html[data-app-theme="dark"] .manager-kpi-lime { --manager-kpi-accent: #a3e635; }
html[data-app-theme="dark"] .manager-kpi-orange { --manager-kpi-accent: #fb923c; }
html[data-app-theme="dark"] .manager-section-card-payments { --manager-section-accent: #34d399; }
html[data-app-theme="dark"] .manager-section-card-sales { --manager-section-accent: #38bdf8; }
html[data-app-theme="dark"] .manager-section-card-reports { --manager-section-accent: #a78bfa; }
html[data-app-theme="dark"] .manager-section-card-attention { --manager-section-accent: #fbbf24; }
html[data-app-theme="dark"] .manager-section-card-branch { --manager-section-accent: #818cf8; }
html[data-app-theme="dark"] .manager-section-card-summary { --manager-section-accent: #94a3b8; }
html[data-app-theme="dark"] .manager-payment-card-0 { --manager-payment-accent: #34d399; }
html[data-app-theme="dark"] .manager-payment-card-1 { --manager-payment-accent: #38bdf8; }
html[data-app-theme="dark"] .manager-payment-card-2 { --manager-payment-accent: #fbbf24; }
html[data-app-theme="dark"] .manager-payment-card-3 { --manager-payment-accent: #818cf8; }
html[data-app-theme="dark"] .manager-payment-card-4 { --manager-payment-accent: #fb7185; }
html[data-app-theme="dark"] .manager-report-sample-card-sky { --manager-report-color: #38bdf8; }
html[data-app-theme="dark"] .manager-report-sample-card-amber { --manager-report-color: #fbbf24; }
html[data-app-theme="dark"] .manager-report-sample-card-rose { --manager-report-color: #fb7185; }
html[data-app-theme="dark"] .manager-report-sample-card-emerald { --manager-report-color: #34d399; }

html[data-app-theme="dark"] .manager-kpi-card {
  background: color-mix(in srgb, var(--manager-kpi-accent, var(--app-accent)) 9%, var(--app-surface)) !important;
  border-color: var(--app-border) !important;
}
html[data-app-theme="dark"] .manager-section-card {
  background: color-mix(in srgb, var(--manager-section-accent, var(--app-accent)) 6%, var(--app-surface)) !important;
  border-color: var(--app-border) !important;
}
html[data-app-theme="dark"] .manager-payment-card {
  background: color-mix(in srgb, var(--manager-payment-accent, var(--app-accent)) 8%, var(--app-surface)) !important;
  border-color: var(--app-border) !important;
}
html[data-app-theme="dark"] .manager-report-sample-card {
  background: color-mix(in srgb, var(--manager-report-color, var(--app-accent)) 9%, var(--app-surface)) !important;
  border-color: var(--app-border) !important;
}
html[data-app-theme="dark"] .manager-summary-item {
  background: var(--app-surface) !important;
  border-color: var(--app-border) !important;
}
html[data-app-theme="dark"] .manager-report-sample-icon,
html[data-app-theme="dark"] .manager-report-sample-action {
  background: var(--manager-report-color, var(--app-accent)) !important;
  color: #0d0e13 !important;
}
html[data-app-theme="dark"] .manager-empty-box {
  background: var(--app-surface-2) !important;
  border-color: var(--app-border) !important;
  color: var(--app-ink-soft) !important;
}
html[data-app-theme="dark"] .manager-dashboard-table > thead > tr > th {
  background: var(--app-surface-2) !important;
  color: var(--app-ink-soft) !important;
}
html[data-app-theme="dark"] .manager-report-sample-row {
  background: rgba(255, 255, 255, .04) !important;
  border-color: var(--app-border) !important;
}
html[data-app-theme="dark"] .manager-payment-track {
  background: var(--app-border) !important;
}
html[data-app-theme="dark"] .manager-kpi-label,
html[data-app-theme="dark"] .manager-kpi-value,
html[data-app-theme="dark"] .manager-report-sample-title,
html[data-app-theme="dark"] .manager-report-sample-name,
html[data-app-theme="dark"] .manager-stock-product,
html[data-app-theme="dark"] .manager-payment-amount,
html[data-app-theme="dark"] .manager-summary-item strong,
html[data-app-theme="dark"] .manager-header-content h1,
html[data-app-theme="dark"] .manager-header-content .tw-text-gray-900,
html[data-app-theme="dark"] #manager_dashboard .tw-text-gray-900 {
  color: var(--app-ink) !important;
}
html[data-app-theme="dark"] .manager-kpi-change,
html[data-app-theme="dark"] .manager-payment-title,
html[data-app-theme="dark"] .manager-payment-percent,
html[data-app-theme="dark"] .manager-report-sample-meta,
html[data-app-theme="dark"] .manager-stock-meta,
html[data-app-theme="dark"] .manager-summary-item span,
html[data-app-theme="dark"] #manager_dashboard .tw-text-gray-500 {
  color: var(--app-ink-soft) !important;
}
/* attention / decision tone cards keep their semantic colour but darken the wash */
html[data-app-theme="dark"] .manager-tone-danger { background: rgba(225, 29, 72, .12) !important; }
html[data-app-theme="dark"] .manager-tone-warning { background: rgba(217, 119, 6, .12) !important; }
html[data-app-theme="dark"] .manager-tone-info { background: rgba(37, 99, 235, .14) !important; }
html[data-app-theme="dark"] .manager-attention-danger { background: rgba(225, 29, 72, .12) !important; color: #fb7185 !important; }
html[data-app-theme="dark"] .manager-attention-warning { background: rgba(217, 119, 6, .12) !important; color: #fbbf24 !important; }
html[data-app-theme="dark"] .manager-attention-success { background: rgba(5, 150, 105, .14) !important; color: #34d399 !important; }
html[data-app-theme="dark"] .manager-attention-info { background: rgba(37, 99, 235, .14) !important; color: #60a5fa !important; }

/* icon badges use literal tw-bg-*-100/tw-text-*-700 pairs (not CSS vars) —
   swap the pastel-100 wash + 700 shade for a translucent wash + 400 shade each */
html[data-app-theme="dark"] #manager_dashboard .tw-bg-sky-100 { background-color: rgba(56, 189, 248, .16) !important; }
html[data-app-theme="dark"] #manager_dashboard .tw-text-sky-700 { color: #38bdf8 !important; }
html[data-app-theme="dark"] #manager_dashboard .tw-bg-amber-100 { background-color: rgba(251, 191, 36, .16) !important; }
html[data-app-theme="dark"] #manager_dashboard .tw-text-amber-700 { color: #fbbf24 !important; }
html[data-app-theme="dark"] #manager_dashboard .tw-bg-rose-100 { background-color: rgba(251, 113, 133, .16) !important; }
html[data-app-theme="dark"] #manager_dashboard .tw-text-rose-700 { color: #fb7185 !important; }
html[data-app-theme="dark"] #manager_dashboard .tw-bg-emerald-100 { background-color: rgba(52, 211, 153, .16) !important; }
html[data-app-theme="dark"] #manager_dashboard .tw-text-emerald-700 { color: #34d399 !important; }
html[data-app-theme="dark"] #manager_dashboard .tw-bg-indigo-100 { background-color: rgba(129, 140, 248, .16) !important; }
html[data-app-theme="dark"] #manager_dashboard .tw-text-indigo-700 { color: #818cf8 !important; }
html[data-app-theme="dark"] #manager_dashboard .tw-bg-cyan-100 { background-color: rgba(34, 211, 238, .16) !important; }
html[data-app-theme="dark"] #manager_dashboard .tw-text-cyan-700 { color: #22d3ee !important; }
html[data-app-theme="dark"] #manager_dashboard .tw-bg-orange-100 { background-color: rgba(251, 146, 60, .16) !important; }
html[data-app-theme="dark"] #manager_dashboard .tw-text-orange-700 { color: #fb923c !important; }
html[data-app-theme="dark"] #manager_dashboard .tw-bg-lime-100 { background-color: rgba(163, 230, 53, .16) !important; }
html[data-app-theme="dark"] #manager_dashboard .tw-text-lime-700 { color: #a3e635 !important; }
html[data-app-theme="dark"] #manager_dashboard .tw-bg-violet-100 { background-color: rgba(167, 139, 250, .16) !important; }
html[data-app-theme="dark"] #manager_dashboard .tw-text-violet-700 { color: #a78bfa !important; }

/* ---------- app-wide theme toggle button (topbar) ---------- */
.app-theme-toggle {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid transparent;
  background: rgba(255, 255, 255, .15); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, transform .15s;
}
.app-theme-toggle:hover { background: rgba(255, 255, 255, .25); transform: scale(1.06); }
.app-theme-toggle svg { width: 18px; height: 18px; }