/*
 * THE SLICE CAFE & BAKERY
 * Full Redesign — Visiting Card Theme
 * "A moment to savor."
 *
 * Aesthetic: Warm coastal parchment — aged paper, ocean blue, dark driftwood
 */

/* ========================================
   GOOGLE FONTS IMPORT
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ========================================
   COLOR TOKENS — use ONLY these
   ======================================== */
:root {
  /* Backgrounds */
  --cream:        #F5F1E8;   /* page background */
  --parchment:    #FAF8F2;   /* cards, inputs, panels */
  --border:       #D6CCB8;   /* all borders and dividers */

  /* Ocean blue — from card's left panel */
  --ocean:        #5A8F9E;   /* active nav, icon bg, primary accent */
  --ocean-dark:   #3D7A8A;   /* links, icon color, button borders */
  --ocean-deep:   #2C3E45;   /* dark module card header */

  /* Brown/earth tones — from card typography */
  --espresso:     #2C2826;   /* sidebar background, page headings */
  --driftwood:    #6B5B45;   /* warm module headers */
  --rust:         #8A4A3A;   /* POS / action module headers */
  --slate:        #4A6070;   /* secondary module headers */
  --stone:        #5A5248;   /* neutral module headers */

  /* Text */
  --text-primary:   #2C2826;
  --text-secondary: #5A5248;
  --text-muted:     #7A8A82;
  --text-on-dark:   #F5F1E8;
  --text-accent:    #3D7A8A;

  /* Fonts */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

/* ========================================
   GLOBAL RESET & BASE STYLES
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: var(--cream);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 16px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ALL headings use Cormorant Garamond */
h1, h2, h3, h4, h5, h6,
.navbar-brand,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
  font-family: var(--font-heading) !important;
  color: var(--espresso);
  letter-spacing: 0.04em;
  font-weight: 500;
}

h1 { font-size: 34px; letter-spacing: 0.06em; }
h2 { font-size: 30px; letter-spacing: 0.06em; }
h3 { font-size: 26px; letter-spacing: 0.05em; }
h4 { font-size: 22px; letter-spacing: 0.05em; }
h5 { font-size: 18px; letter-spacing: 0.04em; }
h6 { font-size: 16px; letter-spacing: 0.04em; }

p, li, td, label, input, select, textarea, button, span, div {
  font-family: var(--font-body) !important;
}

/* :not(.btn) matters. Most "buttons" in this app are <a class="btn ...">, and a bare
   `a` rule beats the .btn-* colour on specificity ties - so the link blue was landing
   on top of a button's own background (blue-on-blue, 1.36:1). Buttons colour themselves. */
a:not(.btn) {
  color: var(--ocean-dark);
  text-decoration: none;
  transition: all 0.3s ease;
}

a:not(.btn):hover {
  color: var(--ocean);
  text-decoration: none;
}

/* Ensure all text content is visible */
strong, b {
  color: inherit;
  font-weight: 600;
}

em, i:not(.fa):not(.fas):not(.far):not(.fab) {
  font-style: italic;
  color: inherit;
}

/* Numbers should always be visible */
td, th, p, span, div {
  color: inherit;
}

/* Force visibility of all table content */
.table td,
.table th {
  color: var(--text-primary) !important;
}

.table thead th {
  color: var(--text-on-dark) !important;
}

.table-responsive table td,
.table-responsive table th {
  color: var(--text-primary) !important;
}

.table-responsive table thead th {
  color: var(--text-on-dark) !important;
}

/* ========================================
   TOP NAVBAR
   ======================================== */
.navbar {
  background-color: var(--cream) !important;
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
  box-shadow: 0 1px 3px rgba(44, 40, 38, 0.05);
}

.navbar-brand {
  font-family: var(--font-heading) !important;
  font-size: 22px;
  color: var(--espresso) !important;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.navbar-text {
  color: var(--text-primary) !important;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
}

.navbar .btn-outline-light {
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  background: transparent !important;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 500;
}

.navbar .btn-outline-light:hover {
  background: var(--parchment) !important;
  color: var(--espresso) !important;
  border-color: var(--ocean) !important;
}

#menu-toggle {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--espresso) !important;
}

#menu-toggle:hover {
  background: var(--parchment) !important;
}

/* Logo sizing */
.brand-logo {
  max-height: 80px;
  width: auto;
  margin-right: 15px;
}

/* ========================================
   SIDEBAR
   ======================================== */
#wrapper {
  display: flex;
  width: 100%;
  flex: 1;
}

#sidebar-wrapper {
  width: 190px;
  min-height: calc(100vh - 56px);
  background: var(--espresso);
  transition: margin 0.25s ease-out;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  border-right: 1px solid rgba(214, 204, 184, 0.2);
}

/* Brand section in sidebar */
#sidebar-wrapper .sidebar-heading {
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(214, 204, 184, 0.15);
  text-align: left;
}

#sidebar-wrapper .sidebar-heading .brand-name {
  font-family: var(--font-heading);
  font-size: 18px;
  letter-spacing: 0.14em;
  color: var(--text-on-dark);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

#sidebar-wrapper .sidebar-heading .brand-subtitle {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #7A9EAD;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

#sidebar-wrapper .sidebar-heading .brand-tagline {
  font-family: var(--font-heading);
  font-size: 12px;
  color: #7A9EAD;
  font-style: italic;
  display: block;
  letter-spacing: 0.02em;
}

/* Nav group labels */
#sidebar-wrapper .nav-group-label {
  font-family: var(--font-body);
  font-size: 10px;
  color: #5A7A88;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 16px 6px;
  font-weight: 600;
}

/* Nav items */
#sidebar-wrapper .list-group {
  width: 100%;
}

#sidebar-wrapper .list-group-item {
  border: none;
  background-color: transparent;
  color: #A8BFC7;
  padding: 8px 16px;
  transition: all 0.3s;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.02em;
  border-radius: 0;
}

#sidebar-wrapper .list-group-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-on-dark);
}

#sidebar-wrapper .list-group-item.active {
  background-color: var(--ocean);
  color: var(--text-on-dark);
  font-weight: 500;
  border-left: none;
}

#sidebar-wrapper .list-group-item i,
#sidebar-wrapper .list-group-item svg {
  width: 16px;
  margin-right: 10px;
  font-size: 13px;
  opacity: 0.8;
}

/* Collapsible group headers (Staff Management, Other Masters) carry a trailing chevron.
   The sidebar is only 190px and the item is a plain block, so a float-end chevron that
   does not fit on the line gets pushed onto a second row. Lay the header out as a flex
   row instead: label takes the slack, chevron sits at the end, both stay on one line. */
#sidebar-wrapper .list-group-item[data-bs-toggle="collapse"] {
  display: flex;
  align-items: center;
}

#sidebar-wrapper .list-group-item[data-bs-toggle="collapse"] .fa-chevron-down {
  float: none !important;   /* beats .float-end; a float would leave the flex row */
  margin-top: 0 !important; /* beats .mt-1, which the float needed and flex does not */
  margin-right: 0;
  margin-left: auto;        /* pin it to the far edge, whatever the label's length */
}

#sidebar-wrapper .list-group-item.active i,
#sidebar-wrapper .list-group-item.active svg {
  opacity: 1;
}

/* Sidebar scrollbar */
#sidebar-wrapper::-webkit-scrollbar {
  width: 5px;
}

#sidebar-wrapper::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

#sidebar-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

#sidebar-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Sidebar toggle */
#wrapper.toggled #sidebar-wrapper {
  margin-left: -190px;
}

@media (max-width: 768px) {
  #sidebar-wrapper {
    margin-left: -190px;
  }
  #wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
  }
}

/* ========================================
   PAGE CONTENT
   ======================================== */
#page-content-wrapper {
  flex: 1;
  min-width: 0;
  background-color: var(--cream);
}

#page-content-wrapper main {
  flex: 1;
  padding: 20px;
}

/* Page titles */
.container-fluid h2,
.container h2 {
  font-family: var(--font-heading);
  color: var(--espresso);
  font-size: 30px;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.text-muted {
  color: var(--text-muted) !important;
  font-family: var(--font-body);
  font-size: 14px;
  font-style: italic;
}

/* ========================================
   CARDS
   ======================================== */

/* Quick-access cards (top row) */
.card {
  background: var(--parchment);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(44, 40, 38, 0.08);
  overflow: hidden;
}

/* HOVER EFFECTS REMOVED - Keep cards static */
.card:hover {
  box-shadow: 0 1px 3px rgba(44, 40, 38, 0.08);
  transform: none;
}

/* Quick-access card. The theme flattens Bootstrap's coloured cards to parchment;
   every bg-* variant must be listed here, or it keeps Bootstrap's dark background
   while the text is styled for a light one - which renders the title unreadable. */
.card.bg-primary,
.card.bg-success,
.card.bg-info,
.card.bg-warning,
.card.bg-danger,
.card.bg-dark,
.card.bg-secondary {
  background: var(--parchment) !important;
  border: 1px solid var(--border);
  color: var(--text-primary) !important;
}

.card.bg-primary .card-title,
.card.bg-success .card-title,
.card.bg-info .card-title,
.card.bg-warning .card-title,
.card.bg-danger .card-title,
.card.bg-dark .card-title,
.card.bg-secondary .card-title {
  font-family: var(--font-heading);
  letter-spacing: 0.06em;
  color: var(--espresso) !important;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* Bootstrap's .text-white on a flattened card would be white-on-parchment.
   Force card text back to the readable dark tone. */
.card.bg-danger.text-white,
.card.bg-dark.text-white,
.card.bg-secondary.text-white,
.card.bg-primary.text-white,
.card.bg-success.text-white,
.card.bg-info.text-white,
.card.bg-danger .text-white,
.card.bg-dark .text-white,
.card.bg-secondary .text-white {
  color: var(--text-primary) !important;
}

/* The decorative 32px icon chip on module dashboard cards.
   Scoped to Font Awesome (.fa*) on purpose: it used to match ANY <i> in a coloured
   card title, which caught the small inline "open link" arrows (`bi bi-...`) on the
   stock summary tiles and blew each one up into an empty pale 32x32 box - the white
   square next to "Expiring Soon". A Bootstrap Icon there stays an inline glyph. */
.card.bg-primary .card-title i[class*="fa-"],
.card.bg-success .card-title i[class*="fa-"],
.card.bg-info .card-title i[class*="fa-"],
.card.bg-warning .card-title i[class*="fa-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #E8F0F3;
  color: var(--ocean-dark);
  border-radius: 6px;
  font-size: 16px;
}

/* Inline Bootstrap Icons in a card title: small glyph, inherit the title's colour.
   The theme sets the heading font family on <i>, which kills the icon font and stops
   the glyph rendering, so restore it. */
.card .card-title i[class^="bi-"],
.card .card-title i[class*=" bi-"] {
  font-family: "bootstrap-icons" !important;
  font-size: 0.8em;
  opacity: 0.75;
  background: none;
  width: auto;
  height: auto;
}

.card.bg-primary .card-text,
.card.bg-success .card-text,
.card.bg-info .card-text,
.card.bg-warning .card-text {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted) !important;
  margin-bottom: 12px;
}

.card.bg-primary .btn,
.card.bg-success .btn,
.card.bg-info .btn,
.card.bg-warning .btn {
  border: 1px solid var(--ocean) !important;
  color: var(--ocean-dark) !important;
  background: transparent !important;
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  text-transform: none;
}

.card.bg-primary .btn:hover,
.card.bg-success .btn:hover,
.card.bg-info .btn:hover,
.card.bg-warning .btn:hover {
  background: transparent !important;
  border-color: var(--ocean-dark) !important;
}

.card-header {
  padding: 10px 14px;
  border-bottom: none;
  border-radius: 10px 10px 0 0 !important;
}

.card-header h5,
.card-header h6,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4 {
  color: var(--espresso) !important;
  font-family: var(--font-heading) !important;
  letter-spacing: 0.08em;
  font-size: 15px;
  margin: 0;
  font-weight: 500;
}

/* The light-on-dark colour only holds when the header actually HAS a dark background.
   Applied unconditionally it painted every plain card-header's title near-white on a
   cream card - invisible. That is why the two sales-analysis charts looked untitled. */
.card-header[class*="bg-"] h1,
.card-header[class*="bg-"] h2,
.card-header[class*="bg-"] h3,
.card-header[class*="bg-"] h4,
.card-header[class*="bg-"] h5,
.card-header[class*="bg-"] h6 {
  color: var(--text-on-dark) !important;
}

.card-header i {
  color: var(--ocean-deep) !important;
  margin-right: 8px;
  font-size: 14px;
}

/* Same as the headings above: pale icons only read on a dark header. */
.card-header[class*="bg-"] i {
  color: rgba(245, 241, 232, 0.7) !important;
}

/* Module card header colors — exact assignments */
.card-header.bg-primary {
  background-color: var(--driftwood) !important; /* Catalog Management */
}

.card-header.bg-success {
  background-color: var(--ocean) !important; /* Purchase Management */
}

.card-header.bg-info {
  background-color: var(--slate) !important; /* Kitchen Production */
}

.card-header.bg-secondary {
  background-color: var(--ocean-deep) !important; /* Stock Management */
}

.card-header.bg-danger {
  background-color: var(--rust) !important; /* Point of Sale, Returns & Voids */
}

.card-header.bg-warning {
  background-color: var(--stone) !important; /* Staff Management */
}

.card-header.bg-dark {
  background-color: var(--driftwood) !important; /* Bulk Orders */
}

.card-header[style*="6f42c1"] {
  background-color: var(--stone) !important; /* Reports & Analytics */
}

/* Card body */
.card-body {
  background: var(--parchment);
  padding: 12px 14px;
}

.card-body p,
.card-body li {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.card-body a,
.card-body .list-unstyled a {
  color: var(--ocean-dark);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.card-body a:hover {
  color: var(--ocean);
}

.card-body small {
  color: var(--text-muted);
  font-size: 12px;
}

.card-body table td,
.card-body table th {
  color: var(--text-primary) !important;
}

.card-body table thead th {
  color: var(--text-on-dark) !important;
}

.card-body .table td,
.card-body .table th {
  color: var(--text-primary) !important;
}

.card-body .table thead th {
  color: var(--text-on-dark) !important;
}

/* Card hover effects removed */

/* ========================================
   BUTTONS
   ======================================== */
.btn {
  font-family: var(--font-body);
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  letter-spacing: 0.04em;
  font-weight: 500;
  border: 1px solid transparent;
}

/* The transparent border above is meant for solid buttons, which paint their own edge.
   An outline button IS its border, so it was rendering as bare text with nothing to
   click. Restore the edge only - Bootstrap still supplies the colour. */
.btn[class*="btn-outline-"] {
  border-color: currentColor;
}

.btn-primary {
  background-color: var(--ocean) !important;
  border-color: var(--ocean) !important;
  color: var(--text-on-dark) !important;
}

.btn-primary:hover {
  background-color: var(--ocean-dark) !important;
  border-color: var(--ocean-dark) !important;
}

.btn-secondary {
  background-color: var(--stone) !important;
  border-color: var(--stone) !important;
  color: var(--text-on-dark) !important;
}

.btn-secondary:hover {
  background-color: var(--espresso) !important;
}

.btn-success {
  background-color: var(--slate) !important;
  border-color: var(--slate) !important;
  color: var(--text-on-dark) !important;
}

.btn-success:hover {
  background-color: #3D5560 !important;
}

.btn-danger {
  background-color: var(--rust) !important;
  border-color: var(--rust) !important;
  color: var(--text-on-dark) !important;
}

.btn-danger:hover {
  background-color: #6F3A2E !important;
}

.btn-light {
  background-color: var(--parchment) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

.btn-light:hover {
  background-color: var(--cream) !important;
}

.btn-dark {
  background-color: var(--espresso) !important;
  border-color: var(--espresso) !important;
  color: var(--text-on-dark) !important;
}

.btn-dark:hover {
  background-color: #1F1C1A !important;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-lg {
  padding: 12px 24px;
  font-size: 16px;
}

/* ========================================
   FORMS
   ======================================== */
.form-control,
.form-select {
  font-family: var(--font-body);
  background-color: var(--parchment) !important;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-primary) !important;
  transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--parchment) !important;
  border-color: var(--ocean);
  box-shadow: 0 0 0 3px rgba(90, 143, 158, 0.1);
  outline: none;
  color: var(--text-primary) !important;
}

.form-select option {
  background-color: var(--parchment);
  color: var(--text-primary);
  padding: 8px;
}

.form-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.form-text {
  font-size: 12px;
  color: var(--text-muted);
}

.form-check-input:checked {
  background-color: var(--ocean);
  border-color: var(--ocean);
}

/* ========================================
   TABLES
   ======================================== */
.table {
  font-family: var(--font-body);
  font-size: 14px;
  border-color: var(--border);
}

.table thead th {
  background-color: var(--ocean-deep);
  color: var(--text-on-dark) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
  border: none;
  padding: 12px;
}

.table thead th:hover {
  background-color: var(--ocean-deep) !important;
  color: var(--text-on-dark) !important;
}

.table thead th a {
  color: var(--text-on-dark) !important;
}

.table thead th a:hover {
  color: var(--text-on-dark) !important;
  text-decoration: underline;
}

.table thead th i,
.table thead th svg {
  color: var(--text-on-dark) !important;
}

.table tbody tr {
  background-color: var(--parchment);
  border-bottom: 1px solid var(--border);
}

/* HOVER EFFECTS REMOVED - Keep tables static */
.table tbody tr:hover {
  background-color: var(--parchment);
}

.table tbody tr:hover td {
  color: var(--text-primary) !important;
}

.table tbody td {
  padding: 10px 12px;
  color: var(--text-primary) !important;
  vertical-align: middle;
}

/* :not(.btn) on both: an action button in a table cell (<a class="btn btn-info">View</a>)
   sits on its OWN coloured background and colours its own label. These rules used to
   repaint it with the body/link colour, which is how "View" ended up blue-on-blue at
   1.36:1. Leave buttons - and anything inside them - to the .btn-* rules. */
.table tbody td *:not(.btn) {
  color: var(--text-primary) !important;
}

.table tbody td a:not(.btn) {
  color: var(--ocean-dark) !important;
}

/* ...and re-assert the label colour for a button's own contents (icons, spans), which
   the rule above would otherwise repaint dark on the button's coloured background. */
.table tbody td .btn,
.table tbody td .btn * {
  color: var(--text-on-dark) !important;
}

.table tbody td .badge {
  color: var(--text-on-dark) !important;
  background-color: var(--ocean-deep) !important;
}

.table tbody td strong,
.table tbody td b {
  color: var(--text-primary) !important;
}

/* Specific fix for numeric values in tables */
.table tbody td:nth-last-child(1),
.table tbody td:nth-last-child(2),
.table tbody td:nth-last-child(3) {
  color: var(--text-primary) !important;
  font-weight: 500;
}

.table tbody td i,
.table tbody td svg {
  color: var(--text-primary) !important;
}

.table tbody td .text-success {
  color: #4A6070 !important;
}

.table tbody td .text-warning {
  color: #8A6A3A !important;
}

.table tbody td .text-danger {
  color: #8A4A3A !important;
}

.table tbody td .text-muted {
  color: var(--text-muted) !important;
}

/* ========================================
   ALERTS & BADGES
   ======================================== */
.alert {
  font-family: var(--font-body);
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background-color: var(--parchment);
}

.alert-info {
  background-color: #E8F0F3;
  border-color: var(--ocean);
  color: var(--ocean-dark);
}

.alert-success {
  background-color: #E8F0EB;
  border-color: var(--slate);
  color: #3D5560;
}

.alert-warning {
  background-color: #FBF3E8;
  border-color: var(--driftwood);
  color: var(--stone);
}

.alert-danger {
  background-color: #F9EDE8;
  border-color: var(--rust);
  color: var(--rust);
}

.badge {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.badge.bg-primary {
  background-color: var(--ocean) !important;
}

.badge.bg-success {
  background-color: var(--slate) !important;
}

.badge.bg-warning {
  background-color: var(--driftwood) !important;
  color: var(--text-on-dark) !important;
}

.badge.bg-danger {
  background-color: var(--rust) !important;
}

.badge.bg-info {
  background-color: var(--ocean-dark) !important;
}

.badge.bg-secondary {
  background-color: var(--stone) !important;
}

/* ========================================
   FOOTER
   ======================================== */
footer {
  background-color: var(--espresso) !important;
  color: var(--text-on-dark) !important;
  padding: 16px 0;
  margin-top: auto;
  border-top: 1px solid rgba(214, 204, 184, 0.2);
}

footer p {
  color: var(--text-on-dark) !important;
  font-family: var(--font-body);
  font-size: 13px;
  margin: 0;
}

footer .small {
  font-size: 12px;
  color: #A8BFC7 !important;
}

/* ========================================
   MESSAGES (Django messages framework)
   ======================================== */
.alert-dismissible .btn-close {
  filter: none;
  opacity: 0.5;
}

.alert-dismissible .btn-close:hover {
  opacity: 1;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.text-primary {
  color: var(--ocean) !important;
}

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

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

.text-success {
  color: #4A6070 !important;
}

.text-warning {
  color: #8A6A3A !important;
}

.text-danger {
  color: #8A4A3A !important;
}

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

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

.text-white,
.text-light {
  color: var(--text-on-dark) !important;
}


/* Solid theme colours for Bootstrap's background utilities.
   Excluded when a .bg-opacity-* modifier is present: those ask for a faint TINT
   (Bootstrap builds it from rgba + --bs-bg-opacity), and a hard background-color
   here ignores that variable and paints a solid slab instead. Stock cards use
   `bg-danger bg-opacity-10` for a pale alert wash, and the slab turned their dark
   body text into black-on-dark-red. The tints are defined just below. */
.bg-primary:not([class*="bg-opacity"]) {
  background-color: var(--ocean) !important;
}

.bg-secondary:not([class*="bg-opacity"]) {
  background-color: var(--stone) !important;
}

.bg-success:not([class*="bg-opacity"]) {
  background-color: var(--slate) !important;
}

.bg-warning:not([class*="bg-opacity"]) {
  background-color: var(--driftwood) !important;
}

.bg-danger:not([class*="bg-opacity"]) {
  background-color: var(--rust) !important;
}

.bg-info:not([class*="bg-opacity"]) {
  background-color: var(--ocean) !important;
}

/* Faint theme-coloured washes, keeping dark body text readable on top. */
.bg-primary[class*="bg-opacity"] { background-color: rgba(90, 143, 158, 0.12) !important; }
.bg-info[class*="bg-opacity"]    { background-color: rgba(90, 143, 158, 0.12) !important; }
.bg-secondary[class*="bg-opacity"] { background-color: rgba(90, 82, 72, 0.10) !important; }
.bg-success[class*="bg-opacity"] { background-color: rgba(74, 96, 112, 0.12) !important; }
.bg-warning[class*="bg-opacity"] { background-color: rgba(107, 91, 69, 0.14) !important; }
.bg-danger[class*="bg-opacity"]  { background-color: rgba(138, 74, 58, 0.12) !important; }
.bg-dark[class*="bg-opacity"]    { background-color: rgba(44, 62, 69, 0.10) !important; }

/* Text on a wash is dark, not cream - the wash is a light background. */
[class*="bg-opacity"],
[class*="bg-opacity"] h1, [class*="bg-opacity"] h2, [class*="bg-opacity"] h3,
[class*="bg-opacity"] h4, [class*="bg-opacity"] h5, [class*="bg-opacity"] h6,
[class*="bg-opacity"] p,  [class*="bg-opacity"] span:not(.badge),
[class*="bg-opacity"] strong, [class*="bg-opacity"] small {
  color: var(--text-primary) !important;
}

.border {
  border-color: var(--border) !important;
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
  body {
    background-color: white;
  }

  .navbar,
  #sidebar-wrapper,
  footer,
  .btn,
  #menu-toggle {
    display: none !important;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ddd;
  }

  #page-content-wrapper {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--cream);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--stone);
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
  h1 { font-size: 26px; }
  h2 { font-size: 22px; }
  h3 { font-size: 20px; }

  .card-body {
    padding: 10px;
  }

  .table {
    font-size: 13px;
  }

  #page-content-wrapper main {
    padding: 12px;
  }
}

/* ========================================
   CRITICAL FIX: ENSURE ALL TABLE TEXT IS VISIBLE
   ======================================== */
/* This must be at the end to override everything */
table td,
table th,
.table td,
.table th,
.table tbody td,
.table tbody th,
.table-responsive td,
.table-responsive th {
  color: var(--text-primary) !important;
  opacity: 1 !important;
}

/* EXCEPT for colored alert rows - they have their own colors */
.table tbody tr.table-danger td,
.table tbody tr.table-danger th,
.table tbody tr.table-warning td,
.table tbody tr.table-warning th,
.table tbody tr.table-success td,
.table tbody tr.table-success th,
.table tbody tr.table-dark td,
.table tbody tr.table-dark th {
  /* These will be colored by the stock alert styles below */
  color: inherit !important;
}

/* Default dark headers. The .table-light opt-out is handled at the end of this
   file - do not re-add it here, or light headers get painted dark again. */
table thead:not(.table-light) th,
.table thead:not(.table-light) th,
.table-responsive thead:not(.table-light) th {
  color: var(--text-on-dark) !important;
  background-color: var(--ocean-deep) !important;
  opacity: 1 !important;
}

/* Ensure numeric columns are always visible */
table td:last-child,
table td:nth-last-child(2),
table td:nth-last-child(3),
.table td:last-child,
.table td:nth-last-child(2),
.table td:nth-last-child(3) {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* Override any Bootstrap or other framework styles.
   Scoped to tbody/tfoot: this used to match `> * >` (every section, thead included)
   and so painted header cells with the dark body colour.

   The :not() guards belong on the ROW, not the cell. Bootstrap puts .table-dark and
   .table-danger on the <tr>; a <td> never carries one, so testing the cell meant every
   :not() passed and this rule painted dark text into dark rows too - the overdue cake
   row rendered #2C2826 on #343A40, a ratio of 1.27, i.e. invisible. It also outweighs
   the tr.table-dark rules further down (more classes = higher specificity), so it wins
   even though they come later. Guard the row and the dark-row rules can do their job. */
.table > tbody > tr:not(.table-danger):not(.table-warning):not(.table-success):not(.table-dark) > *,
.table > tfoot > tr:not(.table-danger):not(.table-warning):not(.table-success):not(.table-dark) > * {
  color: var(--text-primary) !important;
}

.table > thead > * > * {
  color: var(--text-on-dark) !important;
}

/* But NOT for alert row cells */
.table > tbody > tr.table-danger > *,
.table > tbody > tr.table-warning > *,
.table > tbody > tr.table-success > *,
.table > tbody > tr.table-dark > * {
  color: inherit !important;
}

/* Bootstrap's .table-light on a body/foot section: keep it dark to match the
   theme. Light *headers* are the deliberate opt-out and are styled at the end
   of this file, so thead is excluded here. */
tbody.table-light,
tfoot.table-light {
  background-color: var(--ocean-deep) !important;
  color: var(--text-on-dark) !important;
}

/* Ensure tfoot is also visible */
.table tfoot td,
.table tfoot th,
tfoot.table-light td,
tfoot.table-light th {
  color: var(--text-primary) !important;
  background-color: var(--parchment) !important;
  font-weight: 600 !important;
}

/* Force visibility for all text content within table cells */
.table td *,
.table th *,
table td *,
table th * {
  color: inherit !important;
}

/* Specific fix for text-end aligned cells (numeric values).
   Body cells only - a right-aligned HEADER sits on the dark background and must stay
   light. Scoping these to tbody is what stops them overriding the header colour. */
.table tbody td.text-end,
.table tbody th.text-end,
table tbody td.text-end,
table tbody th.text-end {
  color: var(--text-primary) !important;
}

/* Ensure strong/bold text in tables is visible.
   Body cells only - bold text in a HEADER is on the dark background and must stay light. */
.table tbody td strong,
.table tbody th strong,
.table tbody td b,
.table tbody th b,
table tbody td strong,
table tbody th strong,
table tbody td b,
table tbody th b {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

/* Fix for bordered tables (body cells only - headers are handled at the end of this file) */
.table-bordered td,
.table-bordered tbody th {
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

.table-bordered thead td,
.table-bordered thead th {
  color: var(--text-on-dark) !important;
}

/* ========================================
   STOCK ALERT TABLE ROW COLORS
   CRITICAL: These MUST override all other table styles
   ======================================== */
/* Red - Low Stock (Critical) */
tr.table-danger,
tr.table-danger td,
tr.table-danger th,
tbody tr.table-danger,
tbody tr.table-danger td,
tbody tr.table-danger th,
.table tbody tr.table-danger,
.table tbody tr.table-danger td,
.table tbody tr.table-danger th,
.table-danger,
.table-danger > th,
.table-danger > td,
tbody > tr.table-danger,
tbody > tr.table-danger > td,
tbody > tr.table-danger > th {
  background-color: #F8D7DA !important; /* Light red background */
  border-color: #F5C2C7 !important;
}

tr.table-danger td,
tr.table-danger th,
tr.table-danger td *,
tr.table-danger th *,
.table-danger td,
.table-danger th,
tbody > tr.table-danger td,
tbody > tr.table-danger th,
.table tbody tr.table-danger td,
.table tbody tr.table-danger th {
  color: #842029 !important; /* Dark red text */
}

tr.table-danger td strong,
tr.table-danger th strong,
.table-danger td strong,
.table-danger th strong,
tbody > tr.table-danger td strong,
tbody > tr.table-danger th strong {
  color: #842029 !important;
  font-weight: 600 !important;
}

/* Yellow - Warning Stock Level */
tr.table-warning,
tr.table-warning td,
tr.table-warning th,
tbody tr.table-warning,
tbody tr.table-warning td,
tbody tr.table-warning th,
.table tbody tr.table-warning,
.table tbody tr.table-warning td,
.table tbody tr.table-warning th,
.table-warning,
.table-warning > th,
.table-warning > td,
tbody > tr.table-warning,
tbody > tr.table-warning > td,
tbody > tr.table-warning > th {
  background-color: #FFF3CD !important; /* Light yellow background */
  border-color: #FFE69C !important;
}

tr.table-warning td,
tr.table-warning th,
tr.table-warning td *,
tr.table-warning th *,
.table-warning td,
.table-warning th,
tbody > tr.table-warning td,
tbody > tr.table-warning th,
.table tbody tr.table-warning td,
.table tbody tr.table-warning th {
  color: #664D03 !important; /* Dark yellow/brown text */
}

tr.table-warning td strong,
tr.table-warning th strong,
.table-warning td strong,
.table-warning th strong,
tbody > tr.table-warning td strong,
tbody > tr.table-warning th strong {
  color: #664D03 !important;
  font-weight: 600 !important;
}

/* Green - Healthy Stock */
tr.table-success,
tr.table-success td,
tr.table-success th,
tbody tr.table-success,
tbody tr.table-success td,
tbody tr.table-success th,
.table tbody tr.table-success,
.table tbody tr.table-success td,
.table tbody tr.table-success th,
.table-success,
.table-success > th,
.table-success > td,
tbody > tr.table-success,
tbody > tr.table-success > td,
tbody > tr.table-success > th {
  background-color: #D1E7DD !important; /* Light green background */
  border-color: #BADBCC !important;
}

tr.table-success td,
tr.table-success th,
tr.table-success td *,
tr.table-success th *,
.table-success td,
.table-success th,
tbody > tr.table-success td,
tbody > tr.table-success th,
.table tbody tr.table-success td,
.table tbody tr.table-success th {
  color: #0F5132 !important; /* Dark green text */
}

tr.table-success td strong,
tr.table-success th strong,
.table-success td strong,
.table-success th strong,
tbody > tr.table-success td strong,
tbody > tr.table-success th strong {
  color: #0F5132 !important;
  font-weight: 600 !important;
}

/* Black - Has Expired Batches */
tr.table-dark,
tr.table-dark td,
tr.table-dark th,
tbody tr.table-dark,
tbody tr.table-dark td,
tbody tr.table-dark th,
.table tbody tr.table-dark,
.table tbody tr.table-dark td,
.table tbody tr.table-dark th,
.table-dark,
.table-dark > th,
.table-dark > td,
tbody > tr.table-dark,
tbody > tr.table-dark > td,
tbody > tr.table-dark > th {
  background-color: #343A40 !important; /* Dark gray/black background */
  border-color: #454D55 !important;
}

tr.table-dark td,
tr.table-dark th,
tr.table-dark td *,
tr.table-dark th *,
tr.table-dark .text-muted,
tr.table-dark small,
.table-dark td,
.table-dark th,
tbody > tr.table-dark td,
tbody > tr.table-dark th,
.table tbody tr.table-dark td,
.table tbody tr.table-dark th,
.table-dark td strong,
.table-dark th strong,
tbody > tr.table-dark td strong,
tbody > tr.table-dark th strong,
.table-dark .text-muted,
.table-dark small,
tbody > tr.table-dark .text-muted,
tbody > tr.table-dark small {
  color: #F8F9FA !important; /* White text */
  font-weight: 500 !important;
}

/* Ensure badges in colored rows are visible */
.table-danger .badge,
.table-warning .badge,
.table-success .badge,
.table-dark .badge,
tbody > tr.table-danger .badge,
tbody > tr.table-warning .badge,
tbody > tr.table-success .badge,
tbody > tr.table-dark .badge {
  opacity: 1 !important;
}

/* Hover effect for colored table rows */
.table-hover tbody tr.table-danger:hover,
.table-hover tbody tr.table-warning:hover,
.table-hover tbody tr.table-success:hover {
  filter: brightness(0.95);
}

.table-hover tbody tr.table-dark:hover {
  filter: brightness(1.2);
}

/* ========================================
   TABLE HEADERS - single source of truth
   Everything above fights over these; these two rules settle it.

   Default: cream text on the deep ocean background.
   The .table-light opt-out sits on the <thead>, so it must be matched there -
   a <th> never carries that class, which is why a :not(.table-light) test on
   the <th> itself always passed and painted light headers white-on-white.
   ======================================== */
table thead:not(.table-light) th,
.table thead:not(.table-light) th,
.table > thead:not(.table-light) > tr > th {
  background-color: var(--ocean-deep) !important;
  color: var(--text-on-dark) !important;
  opacity: 1 !important;
}

/* Opt-out: light headers, dark text. */
table thead.table-light th,
.table thead.table-light th,
.table > thead.table-light > tr > th {
  background-color: #f8f9fa !important;  /* Bootstrap's light gray */
  color: #212529 !important;             /* Dark text */
  border-color: var(--border) !important;
  opacity: 1 !important;
}

/* ========================================
   MOBILE & TABLET RESPONSIVE STYLES
   Applied only on screens < 1920px
   Desktop view (≥1920px) remains unchanged
   Optimized for touch devices like Samsung Tab A11
   ======================================== */

/* Tablet & Mobile: Sidebar improvements */
@media (max-width: 1919.98px) {
  /* On tablet and below, sidebar should be hidden by default */
  #sidebar-wrapper {
    position: fixed;
    z-index: 1000;
    margin-left: -190px;
  }

  #wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
  }

  /* Add overlay when sidebar is open on mobile */
  #wrapper.toggled::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  /* Page content should take full width */
  #page-content-wrapper {
    width: 100%;
  }
}

/* Mobile only: Reduce navbar branding size */
@media (max-width: 767.98px) {
  .navbar-brand {
    font-size: 18px !important;
  }

  .brand-logo {
    max-height: 50px !important;
    margin-right: 10px !important;
  }

  .navbar-text {
    display: none !important;
  }

  /* Reduce padding on page content */
  #page-content-wrapper main {
    padding: 15px 10px !important;
  }

  /* Reduce heading sizes on mobile */
  h1 { font-size: 26px !important; }
  h2 { font-size: 24px !important; }
  h3 { font-size: 20px !important; }
  h4 { font-size: 18px !important; }
}

/* Tables: keep rows to a single line and let the table scroll sideways instead.
   nowrap is what stops a long product name wrapping to 2-3 lines and tripling the row
   height, so it belongs on every size, not just mobile - .table-responsive already
   gives the horizontal scroll that makes it safe. (The font shrink and column hiding
   below it really are mobile-only: they used to fire at 1919.98px, i.e. on every
   laptop under a 1080p monitor.) */
.table th,
.table td {
  padding: 6px 8px !important;
  white-space: nowrap;
}

/* ...except a column explicitly marked wrappable. A long product name is the one thing
   worth spending two lines on: forcing it onto one made the table wide enough to push
   the Actions buttons off-screen, so reaching Edit meant scrolling sideways first. */
.table th.col-wrap,
.table td.col-wrap {
  white-space: normal;
  min-width: 160px;
}

@media (max-width: 767.98px) {
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  /* Hide less important columns on mobile */
  .mobile-hide {
    display: none !important;
  }

  /* Make table text smaller on mobile to fit better */
  .table {
    font-size: 13px !important;
  }
}

/* Action Buttons: Stack/wrap on mobile/tablet */
@media (max-width: 767.98px) {
  /* Button groups should wrap */
  .d-flex.gap-2,
  .d-flex.gap-3,
  .btn-group,
  .d-flex.mb-3 {
    flex-wrap: wrap !important;
  }

  /* Full width buttons on mobile */
  .btn-group-mobile-stack .btn {
    width: 100% !important;
    margin-bottom: 8px !important;
  }
}

@media (max-width: 767.98px) {
  /* All buttons full width on mobile unless in specific layout */
  .mb-3 .btn,
  .d-flex .btn {
    font-size: 14px !important;
    padding: 8px 12px !important;
  }
}

/* Forms: Collapse to single column on mobile */
@media (max-width: 767.98px) {
  /* All multi-column forms become single column */
  .row.g-3 > [class*='col-'],
  .row.mb-3 > [class*='col-'],
  .row > .col-md-6,
  .row > .col-md-4,
  .row > .col-md-3,
  .row > .col-lg-6,
  .row > .col-lg-4,
  .row > .col-lg-3 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Full width inputs */
  .form-control,
  .form-select,
  input,
  select,
  textarea {
    width: 100% !important;
  }
}

/* Search & Filter Bars: Stack vertically on mobile */
@media (max-width: 767.98px) {
  /* Filter forms should stack */
  .row.mb-3 > div,
  .d-flex.align-items-center > div,
  .filter-bar > div {
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  /* Search inputs full width */
  .d-flex.mb-3 input[type="text"],
  .d-flex.mb-3 input[type="search"],
  .d-flex.mb-3 select {
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  /* Filter buttons full width */
  .d-flex.mb-3 .btn {
    width: 100% !important;
  }
}

/* Dashboard Cards: Responsive grid
   Upper bound was 1919.98px, which is not "tablet" - it forced col-md-3/col-md-4 to
   50% width on every laptop and desktop below a 1080p monitor. Three col-md-4 stat
   cards therefore wrapped 2-then-1 (with a dead gap) instead of sitting 3-across, on
   the very screens Bootstrap's own grid already handles. Cap it at the tablet range
   and let col-md-* mean what it says on desktop. */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Tablet: 2 columns */
  .row > .col-md-3,
  .row > .col-lg-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .row > .col-md-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

@media (max-width: 767.98px) {
  /* Mobile: 1 column */
  .row > [class*='col-'] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 15px !important;
  }

  /* Card body padding reduction */
  .card-body {
    padding: 15px !important;
  }

  /* Stat cards: reduce font sizes */
  .card-body h2,
  .card-body .display-4,
  .card-body .display-5 {
    font-size: 28px !important;
  }
}

/* POS Screen: Special responsive handling
   Same 1919.98px problem, and this one was not even scoped to the POS screen: it hit
   every .col-md-4 in the app on any sub-1080p display. Tablet range only. */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Make POS product grid 2 columns on tablet */
  .row > .col-md-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

@media (max-width: 767.98px) {
  /* Make POS product grid 1 column on mobile */
  .row > .col-md-4,
  .row > .col-sm-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Cart sidebar becomes full width bottom section on mobile */
  .sticky-top {
    position: relative !important;
    top: auto !important;
  }
}

/* Pagination: Stack on mobile */
@media (max-width: 767.98px) {
  .pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .pagination .page-item {
    margin-bottom: 5px !important;
  }
}

/* Modal: Full screen on mobile */
@media (max-width: 767.98px) {
  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
  }

  .modal-content {
    border-radius: 0 !important;
    min-height: 100vh !important;
  }
}

/* Utility classes for responsive visibility */
@media (max-width: 767.98px) {
  .mobile-hide {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }
}

/* Table action buttons on mobile */
@media (max-width: 767.98px) {
  .table .btn-sm {
    padding: 4px 8px !important;
    font-size: 12px !important;
  }

  /* Stack action buttons in tables */
  .table .btn-group-sm {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
}

/* ============================================================================
   TABLE HEADERS - SINGLE SOURCE OF TRUTH
   ============================================================================
   This block is deliberately LAST in the file and matches every shape a header
   cell can take, because earlier rules in this stylesheet target `th.text-end`,
   `th strong` and `th *` and would otherwise paint header text dark-on-dark.

   Any new table anywhere in the app gets a readable header automatically:
   a dark background needs light text, and that is decided here and nowhere else.

   DO NOT add `th` colour rules elsewhere in this file. Add them here.
   ============================================================================ */

/* Default: dark header, light text. */
table thead:not(.table-light) th,
table thead:not(.table-light) th *,
.table thead:not(.table-light) th,
.table thead:not(.table-light) th *,
.table > thead:not(.table-light) > tr > th,
.table > thead:not(.table-light) > tr > th *,
.table-responsive thead:not(.table-light) th,
.table-responsive thead:not(.table-light) th *,
.card-body table thead:not(.table-light) th,
.card-body table thead:not(.table-light) th *,
.card-body .table thead:not(.table-light) th,
.card-body .table thead:not(.table-light) th * {
  color: var(--text-on-dark) !important;
  opacity: 1 !important;
}

/* The header background is what makes the light text necessary. */
table thead:not(.table-light) th,
.table thead:not(.table-light) th,
.table > thead:not(.table-light) > tr > th,
.table-responsive thead:not(.table-light) th,
.card-body .table thead:not(.table-light) th {
  background-color: var(--ocean-deep) !important;
}

/* Opt-out: .table-light on the <thead> gives a light header with dark text. */
table thead.table-light th,
table thead.table-light th *,
.table thead.table-light th,
.table thead.table-light th *,
.table > thead.table-light > tr > th,
.table > thead.table-light > tr > th *,
.card-body .table thead.table-light th,
.card-body .table thead.table-light th * {
  color: #212529 !important;
  opacity: 1 !important;
}

table thead.table-light th,
.table thead.table-light th,
.table > thead.table-light > tr > th {
  background-color: #f8f9fa !important;
  border-color: var(--border) !important;
}

/* ============================================================================
   PORTRAIT TABLET (768px - 991px) - e.g. Samsung Galaxy Tab A11 held upright
   ============================================================================
   The mobile rules above stop at 767.98px, so a 800px-wide tablet in portrait
   fell through to the desktop layout: filter bars stayed on one cramped row and
   date/search inputs were squeezed to unusable widths. Bootstrap's own col-md-*
   grid handles landscape (>=992px) correctly, so only this band needs help.
   ============================================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {

  /* Filter bars: give each control a full row rather than a squeezed column. */
  .card-body > form.row > [class*='col-'],
  form.row.g-3 > [class*='col-'] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 10px;
  }

  /* Buttons in a filter bar sit side by side, not stacked. */
  .card-body > form.row > .d-flex,
  form.row.g-3 > .d-flex {
    gap: 8px;
  }

  /* Comfortable tap targets. */
  .form-control,
  .form-select,
  .ts-control {
    min-height: 44px;
    font-size: 15px;
  }

  .btn {
    min-height: 44px;
  }

  /* Report KPI cards: 2 across rather than 5 squeezed into a row. */
  .row.row-cols-lg-5 > .col,
  .row.row-cols-lg-4 > .col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* ========================================
   DARK SURFACES - single source of truth (keep last in this file)

   The rule: a dark background NEVER carries dark text. Anywhere the theme paints
   --ocean-deep (#2C3E45) or Bootstrap's .table-dark (#343A40), everything sitting on
   it - cells, nested <strong>/<small>/<span>, links - is light.

   This has to live at the very end. The body-text rules above (`.table tbody td strong`,
   `.table tbody td :not(.btn)`, ...) each carry !important and out-specify the
   tr.table-dark rules, so they were repainting nested text dark inside a dark row: the
   overdue cake row and the expired stock row rendered #2C2826 on #343A40 - a 1.27:1
   ratio, i.e. invisible. Being last, and matching the row rather than the cell, settles
   it for every table on every page rather than one screen at a time.

   .btn is exempt: a button sits on its own background and colours its own label.
   ======================================== */
.table > tbody > tr.table-dark > *,
.table > tbody > tr.table-dark > * :not(.btn):not(.badge),
tr.table-dark > td,
tr.table-dark > th,
tr.table-dark > td :not(.btn):not(.badge),
tr.table-dark > th :not(.btn):not(.badge) {
  color: var(--text-on-dark) !important;
}

/* Muted/secondary text on a dark row: still light, just softer. */
.table > tbody > tr.table-dark > * .text-muted,
tr.table-dark > td .text-muted,
tr.table-dark > td small,
tr.table-dark > th small {
  color: rgba(245, 241, 232, 0.75) !important;
}

/* Links on a dark row have to clear the dark background too - the theme's --ocean-dark
   link colour is 2.38:1 on #343A40. */
.table > tbody > tr.table-dark > * a:not(.btn),
tr.table-dark > td a:not(.btn),
tr.table-dark > th a:not(.btn) {
  color: #9FD3E0 !important;
}

/* ========================================
   BOOTSTRAP CYAN / GOLD - readable text (keep last)

   .btn-info (#0dcaf0) and .btn-warning (#ffc107) are LIGHT backgrounds. Bootstrap pairs
   them with dark text for exactly that reason, but the theme's generic rules paint button
   labels cream (--text-on-dark) and table links teal (--ocean-dark), which lands light-on-
   light: "View" was 1.74:1 on cyan, "View All Stock" 2.96:1 on gold.

   Their outline variants are worse. There the cyan/gold IS the text, sitting on the white
   card: "Permissions" measured 1.96:1 and "Deactivate" 1.63:1 - effectively unreadable.

   The fills are deliberately untouched - Add Ingredient stays Bootstrap cyan, Add Resale
   Item stays gold, exactly as on live. Only the text on them changes.
   ======================================== */

/* Solid cyan/gold: dark label, as Bootstrap intends. Wins over the theme's cream-label
   rules (including `.table tbody td .btn *`), so it has to out-specify them. */
.btn-info,
.btn-info *,
.btn-warning,
.btn-warning *,
.table tbody td .btn-info,
.table tbody td .btn-info *,
.table tbody td .btn-warning,
.table tbody td .btn-warning * {
  color: #1F2933 !important;
}

/* Outline cyan/gold: the pale hue is the text, so darken it to a readable member of the
   same family. Border keeps the lighter tone, so the button still reads as cyan/gold.
   The `.table tbody td ...` copies are not redundant: `.table tbody td .btn *` paints every
   button in a table cell cream and out-specifies a bare `.btn-outline-info`, which is where
   these buttons actually live (the Permissions/Deactivate column). */
.btn-outline-info,
.btn-outline-info *,
.table tbody td .btn-outline-info,
.table tbody td .btn-outline-info * {
  color: #0A6C7E !important;      /* darkened cyan - 5.6:1 on white */
  border-color: #0dcaf0 !important;
}

.btn-outline-warning,
.btn-outline-warning *,
.table tbody td .btn-outline-warning,
.table tbody td .btn-outline-warning * {
  color: #7A5B00 !important;      /* darkened gold - 5.9:1 on white */
  border-color: #ffc107 !important;
}

/* A shade deeper than --ocean-dark (#3D7A8A), which lands at 4.55:1 on parchment - it
   passes, but only just, and drops below on the card tints. #356B79 is the same teal at
   5.6:1 with margin to spare. Outline buttons only; the palette variable is untouched. */
.btn-outline-primary,
.btn-outline-primary *,
.table tbody td .btn-outline-primary,
.table tbody td .btn-outline-primary * {
  color: #356B79 !important;
  border-color: #356B79 !important;
}

/* The remaining outline variants have the same problem - no colour of their own here, so
   Bootstrap's `.btn { color: var(--bs-btn-color) }` resolves to cream and they render
   cream-on-white (the "Activate" button was 1.13:1). Give each a readable member of its own
   family, so every outline button in the app is covered rather than the three seen so far. */
.btn-outline-success,
.btn-outline-success *,
.table tbody td .btn-outline-success,
.table tbody td .btn-outline-success * {
  color: #1F6F43 !important;      /* green - 5.5:1 on white */
  border-color: #1F6F43 !important;
}

.btn-outline-danger,
.btn-outline-danger *,
.table tbody td .btn-outline-danger,
.table tbody td .btn-outline-danger * {
  color: var(--rust) !important;  /* #8A4A3A - 5.9:1 on white */
  border-color: var(--rust) !important;
}

.btn-outline-secondary,
.btn-outline-secondary *,
.table tbody td .btn-outline-secondary,
.table tbody td .btn-outline-secondary * {
  color: var(--stone) !important; /* #5A5248 - 7.4:1 on white */
  border-color: var(--stone) !important;
}

/* .btn-outline-light is deliberately absent: it is the Logout button, which sits on a dark
   navbar and is already styled for it. Darkening it would be the same mistake in reverse. */
.btn-outline-dark,
.btn-outline-dark * {
  color: var(--espresso) !important;
}

.btn-outline-success:hover,
.btn-outline-success:hover * {
  background-color: #1F6F43 !important;
  color: var(--text-on-dark) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:hover * {
  background-color: var(--rust) !important;
  color: var(--text-on-dark) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:hover * {
  background-color: var(--stone) !important;
  color: var(--text-on-dark) !important;
}

.btn-outline-info:hover,
.btn-outline-info:hover * {
  background-color: #0dcaf0 !important;
  color: #1F2933 !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:hover * {
  background-color: #ffc107 !important;
  color: #1F2933 !important;
}

/* No badge rule here on purpose. Unlike the buttons, .badge.bg-info and .badge.bg-warning
   are already re-coloured by this theme to DARK surfaces (--ocean-dark, --driftwood) with
   cream text, so they are not the light-background case the buttons are. Forcing dark text
   onto them puts dark on dark: the "Sales Stock" and "3 items" badges dropped to 1.32:1. */

.btn-outline-primary:hover,
.btn-outline-primary:hover * {
  background-color: #356B79 !important;
  border-color: #356B79 !important;
  color: var(--text-on-dark) !important;
}