/*
 * Holyprices POS - shared modern theme
 * Reskins the existing Bootstrap / Material-Design-Components classes
 * (.btn, .form-control, .card, .table, .modal, .mdc-drawer, .mdc-top-app-bar ...)
 * that every page already uses, so loading this one file updates the
 * whole app. No page markup needs to change to pick up the new look.
 *
 * Dark mode: everything below reads colors from the CSS variables in
 * :root. Toggling <html data-theme="dark"> swaps those variables (see
 * the block at the bottom), so components stay dark-mode-aware simply
 * by using var(--xxx) instead of hardcoded colors.
 */

:root {
  --brand-start: #4f46e5;
  --brand-end: #7c3aed;
  --ink: #1e1b2e;
  --muted: #6b7280;
  --field-bg: #f5f5f9;
  --field-border: #e6e6ee;
  --surface: #ffffff;
  --body-bg: #e9eaef;
  --sidebar-from: #1e1b2e;
  --sidebar-to: #14121f;
  --radius: 12px;
  --shadow-sm: 0 2px 8px rgba(30, 27, 46, 0.06);
  --shadow-md: 0 10px 24px -8px rgba(30, 27, 46, 0.12);
}

body {
  background: var(--body-bg) !important;
  color: var(--ink);
}

/* ===== Buttons ===== */
.btn {
  border-radius: var(--radius) !important;
  font-weight: 500;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end)) !important;
  border: none !important;
  box-shadow: 0 6px 16px -6px rgba(79, 70, 229, 0.5);
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end)) !important;
  box-shadow: 0 10px 20px -6px rgba(79, 70, 229, 0.55);
}

.fab-button,
.btn-light {
  border-radius: 8px !important;
  transition: transform 0.15s ease, background 0.2s ease;
}

.fab-button:hover,
.btn-light:hover {
  transform: translateY(-1px);
}

/* Small pill button used for secondary actions, e.g. the login "Reset" trigger */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--field-border);
  background: var(--field-bg);
  color: var(--brand-start);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 999px;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-pill:hover {
  background: var(--surface);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  color: var(--brand-start);
}

/* ===== Forms ===== */
.form-control,
.form-select,
textarea {
  border-radius: 10px !important;
  border: 1.5px solid var(--field-border) !important;
  background-color: var(--field-bg) !important;
  color: var(--ink) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.form-control:focus,
.form-select:focus,
textarea:focus {
  border-color: var(--brand-start) !important;
  background-color: var(--surface) !important;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1) !important;
}

/* Bootstrap hardcodes placeholder text to a fixed gray, same issue as
   .text-muted earlier - make it theme-aware too. */
.form-control::placeholder,
textarea::placeholder {
  color: var(--muted) !important;
  opacity: 1;
}

/* Password-visibility toggle buttons (input-group), e.g. on the login,
   employee, and profile password fields. Bootstrap hardcodes
   .btn-outline-secondary to a fixed gray - make it theme-aware, and undo
   the global .btn border-radius above on the edge that touches the input,
   since Bootstrap's own input-group corner-squaring isn't !important and
   was losing to it (leaving a visible rounded gap where they should be flush). */
.input-group .btn-outline-secondary {
  color: var(--muted) !important;
  border-color: var(--field-border) !important;
  background-color: var(--field-bg) !important;
}

.input-group .btn-outline-secondary:hover,
.input-group .btn-outline-secondary:focus {
  color: var(--ink) !important;
  background-color: var(--surface) !important;
  border-color: var(--brand-start) !important;
}

.input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group > .btn:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: -1.5px;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-radius: 10px !important;
  border: 1.5px solid var(--field-border) !important;
  background-color: var(--field-bg) !important;
}

.select2-container--default .select2-selection__rendered {
  color: var(--ink) !important;
}

.select2-dropdown {
  background-color: var(--surface) !important;
  border-color: var(--field-border) !important;
}

.select2-container--default .select2-results__option {
  color: var(--ink);
}

.select2-search__field {
  background-color: var(--field-bg) !important;
  color: var(--ink) !important;
}

/* ===== Cards ===== */
.card,
.mdc-card,
.info-card {
  background-color: var(--surface);
  color: var(--ink);
  border-radius: var(--radius) !important;
  border: 1px solid var(--field-border) !important;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-icon-wrapper {
  margin-right: 15px;
}

/* ===== Tables ===== */
.table {
  color: var(--ink);
}

/* The legacy vendor stylesheet hardcodes cell text to #212121/#757575 via
   `.table tbody tr td` / `.table thead tr th` - selectors more specific than
   the plain `.table`/`.table th` rules above, so they were winning outright
   regardless of theme. Match that same specificity (not !important, so an
   intentional inline style="color:..." on a specific cell, e.g. low-stock
   alert rows, still wins as expected). */
.table thead th,
.table thead tr th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--field-border);
}

.table td,
.table th,
.table tbody tr td,
.table tbody tr th {
  color: var(--ink);
  border-color: var(--field-border);
}

.table tbody tr:hover {
  background-color: var(--field-bg);
  color: var(--ink);
}

/* Bootstrap's striped/hover/active row styling isn't driven by plain colors -
   it reads these CSS variables (defaulting to near-black text + a black
   overlay, meant for a white table). Redefine them so striping/hover lighten
   a dark table instead of darkening it into unreadable black-on-black rows. */
[data-theme="dark"] .table {
  --bs-table-striped-color: var(--ink);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
  --bs-table-hover-color: var(--ink);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-table-active-color: var(--ink);
  --bs-table-active-bg: rgba(255, 255, 255, 0.08);
}

/* The vendor stylesheet ALSO hardcodes its own separate #EEEEEE background
   directly on striped/hover rows (independent of the Bootstrap variables
   above), so it survives untouched even after the fix above - odd rows kept
   a light-gray background in dark mode while the text on top of it went
   light too, killing contrast. Neutralize it here. */
[data-theme="dark"] .table.table-striped tbody tr:nth-child(odd) {
  background: var(--field-bg);
}

/* Bootstrap's contextual row classes (.table-warning, .table-light and the
   rest) are built for a white table: each pins a pale pastel background plus
   a hardcoded `color: #000` on the <tr>. In dark mode the pastel survives
   while this file repaints body text light, so rows ended up light-on-pale -
   the stock movement report's "unrecorded adjustment" row was effectively
   unreadable. Repaint them as a translucent tint of the same hue over the
   dark surface, so the colour still carries its meaning but the text is
   ordinary light-on-dark.

   The !important and the cell-level selector are both needed: Bootstrap
   5.1.3 paints the cell with `background-color: var(--bs-table-bg)` and an
   `inset 0 0 0 9999px var(--bs-table-accent-bg)` box-shadow for striping,
   which would otherwise sit on top of anything set here. */
[data-theme="dark"] .table > :not(caption) > tr.table-primary > *,
[data-theme="dark"] .table > :not(caption) > tr.table-secondary > *,
[data-theme="dark"] .table > :not(caption) > tr.table-success > *,
[data-theme="dark"] .table > :not(caption) > tr.table-danger > *,
[data-theme="dark"] .table > :not(caption) > tr.table-warning > *,
[data-theme="dark"] .table > :not(caption) > tr.table-info > *,
[data-theme="dark"] .table > :not(caption) > tr.table-light > * {
  /* No !important on the colour: this selector already out-specifies both
     Bootstrap's cell rule and this file's own `[data-theme="dark"] td`, and
     leaving it off lets text utilities still win - so a negative balance in
     one of these rows keeps its .text-danger red. */
  color: var(--ink);
  box-shadow: none !important;
}

[data-theme="dark"] .table > :not(caption) > tr.table-primary > * {
  background-color: rgba(99, 102, 241, 0.22) !important;
}
[data-theme="dark"] .table > :not(caption) > tr.table-secondary > * {
  background-color: rgba(148, 163, 184, 0.18) !important;
}
[data-theme="dark"] .table > :not(caption) > tr.table-success > * {
  background-color: rgba(34, 197, 94, 0.18) !important;
}
[data-theme="dark"] .table > :not(caption) > tr.table-danger > * {
  background-color: rgba(239, 68, 68, 0.20) !important;
}
[data-theme="dark"] .table > :not(caption) > tr.table-warning > * {
  background-color: rgba(245, 158, 11, 0.22) !important;
}
[data-theme="dark"] .table > :not(caption) > tr.table-info > * {
  background-color: rgba(14, 165, 233, 0.18) !important;
}
[data-theme="dark"] .table > :not(caption) > tr.table-light > * {
  background-color: rgba(255, 255, 255, 0.07) !important;
}

/* Those rows carry small muted captions (the adjustment note, the "incl. +N"
   hint). text-muted resolves to a dark gray that disappears against the tint,
   so lift it to something readable on the dark row. */
[data-theme="dark"] .table > :not(caption) > tr.table-primary .text-muted,
[data-theme="dark"] .table > :not(caption) > tr.table-secondary .text-muted,
[data-theme="dark"] .table > :not(caption) > tr.table-success .text-muted,
[data-theme="dark"] .table > :not(caption) > tr.table-danger .text-muted,
[data-theme="dark"] .table > :not(caption) > tr.table-warning .text-muted,
[data-theme="dark"] .table > :not(caption) > tr.table-info .text-muted,
[data-theme="dark"] .table > :not(caption) > tr.table-light .text-muted {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* ===== Sidebar menu alignment =====
   Every label in the drawer must start at the same x, whatever icon sits in
   front of it. The vendor rule gives the icon a font-size and a right margin
   but no width, and Material Icons ligatures have very different advance
   widths - receipt_long and local_shipping are much wider than home or
   payments - so each label was landing at its own indent.

   Same selector depth as the vendor rule it corrects, and theme.css loads
   after it, so this wins without !important. */
.mdc-drawer .mdc-drawer__content .mdc-drawer-menu .mdc-drawer-item .mdc-drawer-link,
.mdc-drawer .mdc-drawer__content .mdc-drawer-menu .mdc-drawer-item .mdc-expansion-panel-link {
  display: flex;
  align-items: center;
}

.mdc-drawer .mdc-drawer__content .mdc-drawer-menu .mdc-drawer-item .mdc-drawer-link i.mdc-drawer-item-icon,
.mdc-drawer .mdc-drawer__content .mdc-drawer-menu .mdc-drawer-item .mdc-expansion-panel-link i.mdc-drawer-item-icon {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  margin-right: 0.75rem;
  text-align: center;
}

/* The chevron on a dropdown stays pinned to the right edge rather than
   sitting immediately after the label. */
.mdc-drawer .mdc-drawer__content .mdc-drawer-menu .mdc-drawer-item .mdc-drawer-link .mdc-drawer-arrow,
.mdc-drawer .mdc-drawer__content .mdc-drawer-menu .mdc-drawer-item .mdc-expansion-panel-link .mdc-drawer-arrow {
  margin-left: auto;
}

/* ===== Modals & dropdown menus ===== */
.modal-content,
.mdc-menu-surface,
.dropdown-menu {
  background-color: var(--surface);
  color: var(--ink);
}

.modal-content {
  border-radius: var(--radius) !important;
  border: none;
  box-shadow: var(--shadow-md);
}

.modal-header,
.modal-footer {
  border-color: var(--field-border);
}

/* Bootstrap's close icon is a dark SVG; invert it so it stays visible on a dark modal */
[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.text-dark {
  color: var(--ink) !important;
}

/* Bootstrap hardcodes .text-muted to a fixed gray that ignores our --muted
   token, so it stays exactly as legible/illegible in both themes instead
   of adapting like the rest of the app's muted text. */
.text-muted {
  color: var(--muted) !important;
}

/* ===== Alerts ===== */
.alert {
  border-radius: 10px;
  border: none;
}

/* ===== Sidebar (navigation.html) ===== */
.mdc-drawer {
  background: linear-gradient(180deg, var(--sidebar-from), var(--sidebar-to)) !important;
}

.mdc-drawer__header .brand-logo h3 {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mdc-drawer a,
.dropdown-btn {
  display: block;
  width: calc(100% - 20px);
  margin: 2px 10px;
  padding: 6px 8px 6px 16px;
  border: none;
  border-radius: 10px;
  background: none;
  color: #fff;
  text-align: left;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  outline: none;
}

.mdc-drawer a:hover,
.dropdown-btn:hover,
.dropdown-container a:hover {
  color: #f1f1f1;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* The vendor stylesheet locks nav rows to a fixed height:40px meant for
   single-line labels - its selector is far more specific than .mdc-drawer a
   above, so it always won regardless. A long label (e.g. "Item Return &
   Exchange") wraps to 2 lines but stays clipped to that 40px box, visually
   overlapping the next sidebar item below it. Match that same selector so
   the row can grow to fit wrapped text instead of overflowing into its
   neighbor. */
.mdc-drawer .mdc-drawer__content .mdc-drawer-menu .mdc-drawer-item .mdc-drawer-link,
.mdc-drawer .mdc-drawer__content .mdc-drawer-menu .mdc-drawer-item .mdc-expansion-panel-link {
  height: auto;
  min-height: 40px;
  line-height: 1.3;
  white-space: normal;
  padding-top: 8px;
  padding-bottom: 8px;
}

.mdc-drawer .mdc-drawer__content .mdc-drawer-menu .mdc-drawer-item .mdc-drawer-link i,
.mdc-drawer .mdc-drawer__content .mdc-drawer-menu .mdc-drawer-item .mdc-expansion-panel-link i {
  flex-shrink: 0;
}

.mdc-button__icon {
  margin-right: 5px;
}

/* Active dropdown button (sidebar "Payments" toggle only - ".active" alone
   also matches Bootstrap pagination/list-group active states across the
   app, which should keep their own styling). */
.dropdown-btn.active {
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end)) !important;
  color: #fff;
}

/* Payments submenu: hidden until the dropdown button toggles it open (see navigation.html script) */
.dropdown-container {
  display: none;
  background-color: transparent !important;
  padding-left: 8px;
}

.dropdown-container .mdc-drawer-item {
  margin-left: 16px;
}

/* ===== Topbar (topNavigation.html) ===== */
.mdc-top-app-bar {
  background-color: var(--surface) !important;
  box-shadow: var(--shadow-sm) !important;
}

.mdc-top-app-bar .user-name {
  color: var(--ink);
  font-weight: 500;
}

/* The vendor stylesheet hardcodes the hamburger icon and profile button/name
   to #000 via selectors more specific than the rules above, so they always
   won regardless of theme - invisible on the topbar's dark background in
   dark mode. Match that same specificity so this actually applies. */
.mdc-top-app-bar .mdc-top-app-bar__navigation-icon {
  color: var(--ink);
}

.mdc-top-app-bar .mdc-top-app-bar__section-right .menu-button-container button,
.mdc-top-app-bar .mdc-top-app-bar__section-right button button {
  color: var(--ink);
}

.mdc-top-app-bar .mdc-top-app-bar__section-right .menu-profile button .user-name {
  color: var(--ink);
}

@media (max-width: 768px) {
  .language-toggle.hidden {
    display: none;
  }
}

/* Language switch: a simple two-way pill instead of a full dropdown */
.lang-switch {
  display: inline-flex;
  background: var(--field-bg);
  border: 1.5px solid var(--field-border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  margin-right: 10px;
}

.lang-option {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-option.active {
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
  color: #fff;
}

.lang-option:not(.active):hover {
  color: var(--ink);
}

/* Dark mode toggle button, used in the topbar and on the login page */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--field-border);
  background: var(--field-bg);
  color: var(--muted);
  cursor: pointer;
  margin-right: 10px;
  font-size: 1.05rem;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.theme-toggle-btn:hover {
  color: var(--ink);
  transform: translateY(-1px);
}

/* ===== Page content background ===== */
/* Same #e9eaef the vendor theme already paints here, just read from the
   variable so dark mode can repaint it without touching that vendor file. */
.body-wrapper .main-wrapper .page-wrapper {
  background: var(--body-bg) !important;
}

/* Bootstrap's white/light utility backgrounds, used throughout page content
   for panels and list items - repainted from the same surface token. */
.bg-white,
.bg-light,
.list-group-item,
.dropdown-item {
  background-color: var(--surface) !important;
  color: var(--ink);
  border-color: var(--field-border);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--field-bg) !important;
  color: var(--ink);
}

/* ===== Dark theme ===== */
[data-theme="dark"] {
  --ink: #e7e6f0;
  --muted: #9a93ad;
  --field-bg: #241f33;
  --field-border: #383054;
  --surface: #1c1830;
  --body-bg: #100e1c;
}

/* Dark-mode text safety net: the legacy Material Admin vendor stylesheet
   hardcodes near-black text on many headings/labels/table cells that never
   expected a dark background. Repaint plain text elements everywhere.
   Scoped to h1-h6/p/label/li/small/strong/b/th/td/span only, so it never
   touches .btn/.badge/.alert/.lang-option/.theme-toggle-btn/nav links -
   those are separate elements (mostly <button>/<a>) with their own
   explicit, already theme-aware color rules elsewhere in this file. An
   earlier version of this rule "protected" those elements with an extra
   `color: inherit` override, which backfired: <button> elements don't
   inherit color from their parent by default in browsers, so it silently
   broke the language pill and theme toggle instead of protecting them. */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] p,
[data-theme="dark"] label,
[data-theme="dark"] li,
[data-theme="dark"] small,
[data-theme="dark"] strong,
[data-theme="dark"] b,
[data-theme="dark"] th,
[data-theme="dark"] td,
[data-theme="dark"] span:not(.badge):not(.mdi):not([class*="mdc-switch"]) {
  color: var(--ink);
}