/* ==========================================================================
   PharmaSaaS v3.0 Design System -- "Modern Clinical" (teal / blue)
   --------------------------------------------------------------------------
   Loaded on every page, right after Bootstrap 5.3 + Bootstrap Icons.
   Retints the stock Bootstrap blue to a teal->blue clinical palette and adds
   shared, brand-consistent polish (cards, tables, badges, buttons, forms,
   modals) plus small utility classes several pages already reference
   (icon-box, *-soft badges) so those keep working without local <style>
   blocks. No page markup needs to change for the retint to take effect --
   it works purely by overriding classes Bootstrap already ships, loaded
   after Bootstrap's own stylesheet so the cascade favors these rules.
   Individual pages may still add their own <style> block after this file
   to override anything page-specific -- that is expected and fine.
   ========================================================================== */

:root {
  /* Brand ramp: teal -> deep blue, used for every "primary" surface. */
  --brand-50:  #f0fdfa;
  --brand-100: #ccfbf1;
  --brand-200: #99f6e4;
  --brand-300: #5eead4;
  --brand-400: #2dd4bf;
  --brand-500: #14b8a6;
  --brand-600: #0d9488; /* primary */
  --brand-700: #0f766e; /* hover */
  --brand-800: #115e59; /* active */
  --brand-900: #134e4a; /* emphasis text */
  --brand-accent: #0369a1;      /* blue, used in gradients/accents */
  --brand-accent-dark: #075985;

  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --surface: #eef3f4;
  --surface-card: #ffffff;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-soft: 0 4px 14px rgba(15, 23, 42, .06);
  --shadow-med: 0 10px 30px rgba(15, 23, 42, .10);

  /* Bootstrap 5.3 does read these root-level tokens directly (subtle/
     emphasis utilities, links, focus ring), so overriding them retints
     that subset "for free" in addition to the explicit rules below. */
  --bs-primary: var(--brand-600);
  --bs-primary-rgb: 13, 148, 136;
  --bs-primary-text-emphasis: var(--brand-900);
  --bs-primary-bg-subtle: var(--brand-100);
  --bs-primary-border-subtle: var(--brand-300);
  --bs-link-color: var(--brand-600);
  --bs-link-color-rgb: 13, 148, 136;
  --bs-link-hover-color: var(--brand-700);
  --bs-link-hover-color-rgb: 15, 118, 110;
  --bs-focus-ring-color: rgba(13, 148, 136, .25);
}

html, body { background-color: var(--surface); }
body { color: var(--ink-900); -webkit-tap-highlight-color: transparent; }
a { color: var(--brand-600); }
a:hover, a:focus { color: var(--brand-700); }

/* ---------------------------------------------------------------------- *
 * Buttons -- Bootstrap 5.3 components read their OWN component-scoped
 * custom properties (--bs-btn-bg, --bs-btn-hover-bg, ...) rather than the
 * root --bs-primary token, so each variant is re-declared here. The plain
 * background-color/border-color lines are a belt-and-braces fallback for
 * any Bootstrap point release that resolves those differently.
 * ---------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--brand-600);
  --bs-btn-border-color: var(--brand-600);
  --bs-btn-hover-bg: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-800);
  --bs-btn-active-border-color: var(--brand-800);
  --bs-btn-disabled-bg: var(--brand-600);
  --bs-btn-disabled-border-color: var(--brand-600);
  --bs-btn-focus-shadow-rgb: 13, 148, 136;
  background-color: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
}
.btn-primary:hover, .btn-primary:focus { background-color: var(--brand-700) !important; border-color: var(--brand-700) !important; }
.btn-primary:active, .btn-primary.active { background-color: var(--brand-800) !important; border-color: var(--brand-800) !important; }

.btn-outline-primary {
  --bs-btn-color: var(--brand-600);
  --bs-btn-border-color: var(--brand-600);
  --bs-btn-hover-bg: var(--brand-600);
  --bs-btn-hover-border-color: var(--brand-600);
  --bs-btn-active-bg: var(--brand-700);
  --bs-btn-active-border-color: var(--brand-700);
  color: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active {
  background-color: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
  color: #fff !important;
}

.btn { border-radius: var(--radius-sm); font-weight: 500; }
.btn-sm { border-radius: 8px; }
.btn-lg { border-radius: 12px; }

/* ---- Text / bg / border utilities ---- */
.text-primary { color: var(--brand-600) !important; }
.bg-primary { background-color: var(--brand-600) !important; }
.border-primary { border-color: var(--brand-600) !important; }
.bg-primary-subtle { background-color: var(--brand-100) !important; }
.text-primary-emphasis { color: var(--brand-900) !important; }
.border-primary-subtle { border-color: var(--brand-300) !important; }
.link-primary { color: var(--brand-600) !important; }

/* ---- Badges & alerts ---- */
.badge.bg-primary { background-color: var(--brand-600) !important; }
.badge { font-weight: 600; letter-spacing: .2px; padding: .42em .7em; border-radius: 999px; }
.alert-primary {
  background-color: var(--brand-100) !important;
  border-color: var(--brand-300) !important;
  color: var(--brand-900) !important;
}
.alert { border-radius: var(--radius-sm); border-width: 1px; }

/* ---- Forms ---- */
.form-control:focus, .form-select:focus {
  border-color: var(--brand-400) !important;
  box-shadow: 0 0 0 .25rem rgba(13, 148, 136, .18) !important;
}
.form-check-input:checked { background-color: var(--brand-600) !important; border-color: var(--brand-600) !important; }
.form-check-input:focus { border-color: var(--brand-400); box-shadow: 0 0 0 .2rem rgba(13, 148, 136, .18); }
.form-control, .form-select { border-radius: var(--radius-sm); border-color: #dfe5eb; }
.input-group-text { background-color: #eef2f5; border-color: #dfe5eb; }
.form-label { font-weight: 600; font-size: .87rem; color: var(--ink-700); }

/* ---- Nav pills / pagination / progress / list-group / dropdowns ---- */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--brand-600) !important; }
.page-link { color: var(--brand-600); }
.page-item.active .page-link { background-color: var(--brand-600) !important; border-color: var(--brand-600) !important; }
.page-link:focus { box-shadow: 0 0 0 .2rem rgba(13, 148, 136, .18); }
.progress-bar { background-color: var(--brand-600) !important; }
.list-group-item.active { background-color: var(--brand-600) !important; border-color: var(--brand-600) !important; }
.dropdown-item.active, .dropdown-item:active { background-color: var(--brand-600) !important; }
.spinner-border.text-primary, .spinner-grow.text-primary { color: var(--brand-600) !important; }
.table-primary { --bs-table-bg: var(--brand-100); }

/* ---------------------------------------------------------------------- *
 * Cards, tables, modals -- the "modern clinical" polish: soft shadows,
 * generous rounding, calmer table headers.
 * ---------------------------------------------------------------------- */
.card {
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.card-header {
  background-color: #fff;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  border-radius: var(--radius) var(--radius) 0 0 !important;
  font-weight: 600;
}
.shadow-sm { box-shadow: var(--shadow-soft) !important; }

.table { --bs-table-hover-bg: var(--brand-50); }
.table thead th {
  background-color: #f8fafb;
  color: var(--ink-700);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700;
  border-bottom-width: 1px;
  white-space: nowrap;
}
.table > :not(caption) > * > * { padding: .75rem .9rem; vertical-align: middle; }
.table-responsive { border-radius: var(--radius); }

.modal-content { border-radius: var(--radius-lg); border: none; box-shadow: var(--shadow-med); }
.modal-header { border-bottom: 1px solid rgba(15, 23, 42, .06); }
.modal-footer { border-top: 1px solid rgba(15, 23, 42, .06); }

/* ---------------------------------------------------------------------- *
 * Shared utility classes some pages already reference locally (dashboard
 * stat tiles, etc.) -- defined globally here so every page can use them,
 * and any page-local <style> block loaded after this one still wins.
 * ---------------------------------------------------------------------- */
.icon-box {
  width: 50px; height: 50px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.bg-blue-soft   { background-color: #e0f2fe; color: #0369a1; }
.bg-teal-soft   { background-color: var(--brand-100); color: var(--brand-700); }
.bg-green-soft  { background-color: #dcfce7; color: #16a34a; }
.bg-orange-soft { background-color: #ffedd5; color: #ea580c; }
.bg-red-soft    { background-color: #fee2e2; color: #dc2626; }
.bg-purple-soft { background-color: #ede9fe; color: #7c3aed; }

.brand-gradient { background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-accent) 100%) !important; }

/* ---- Scrollbar polish (WebKit / Blink; harmless no-op elsewhere) ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---------------------------------------------------------------------- *
 * PWA standalone-mode niceties: when launched from the home screen (no
 * browser chrome), give room for the device status bar / notch instead of
 * content sitting flush under it.
 * ---------------------------------------------------------------------- */
@media (display-mode: standalone) {
  .navbar.fixed-top { padding-top: env(safe-area-inset-top, 0px); }
  .bottom-nav, .sa-bottom-nav { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Small screens: comfortable tap targets, tighter headings ---- */
@media (max-width: 767px) {
  .btn { min-height: 38px; }
  h1, .h1 { font-size: 1.5rem; }
  h4, .h4 { font-size: 1.15rem; }

  /* Page-header rows (title + a cluster of action buttons, both inside a
     single `d-flex justify-content-between` row with no wrap) are used
     across most list pages (Customers, Suppliers, Purchases, Purchase
     Orders, Stock Transfer, Branches, ...). With no wrap allowed, a title
     next to 2-3 buttons has nowhere to shrink to on a narrow phone except
     collapsing to one word per line while the buttons crowd the rest of
     the row. Letting the row wrap drops the button cluster onto its own
     line under the title instead, which is the standard mobile pattern. */
  .d-flex.justify-content-between.mb-3 {
    flex-wrap: wrap;
    row-gap: 0.75rem;
  }
  .d-flex.justify-content-between.mb-3 > .d-flex.gap-2 {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
}

/* ---- Print: hide navigation chrome and any element marked .no-print ---- */
@media print {
  .sidebar, .sa-sidebar, .bottom-nav, .sa-bottom-nav, .navbar.fixed-top, .no-print {
    display: none !important;
  }
  body { padding: 0 !important; background: #fff !important; }
}

/* ==========================================================================
   Dark mode -- toggled via a `data-theme="dark"` attribute on <html>,
   applied immediately on load (before paint) by a small inline script in
   includes/pwa_head.php, and flipped at runtime by toggleTheme() in
   navbar.php. Persisted per-browser via localStorage, since this is a real
   deployed app (not an in-conversation preview) where that's reliable.
   Covers the surfaces used across every page -- body, cards, tables, forms,
   modals, dropdowns, and the sidebar/bottom-nav chrome (which was already
   dark in light mode and just gets a couple of tweaks here).
   ========================================================================== */
:root[data-theme="dark"] {
  --surface: #0b1220;
  --surface-card: #101a2c;
  --ink-900: #e5e9f0;
  --ink-700: #b6c0d1;
  --ink-500: #8593a8;
}
:root[data-theme="dark"] html,
:root[data-theme="dark"] body { background-color: var(--surface) !important; color: var(--ink-900); }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .list-group-item {
  background-color: var(--surface-card);
  border-color: rgba(255,255,255,.08);
  color: var(--ink-900);
}
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer {
  background-color: var(--surface-card);
  border-color: rgba(255,255,255,.08);
  color: var(--ink-900);
}
:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .navbar.bg-white { background-color: var(--surface-card) !important; }
:root[data-theme="dark"] .text-dark { color: var(--ink-900) !important; }
:root[data-theme="dark"] .text-muted { color: var(--ink-500) !important; }
:root[data-theme="dark"] .table { color: var(--ink-900); --bs-table-bg: transparent; }
:root[data-theme="dark"] .table thead th {
  background-color: rgba(255,255,255,.04);
  color: var(--ink-700);
  border-color: rgba(255,255,255,.08);
}
:root[data-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: rgba(255,255,255,.06); }
:root[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(255,255,255,.04); color: var(--ink-900); }
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
  background-color: #0d1626;
  border-color: rgba(255,255,255,.14);
  color: var(--ink-900);
}
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus { background-color: #0d1626; color: var(--ink-900); }
:root[data-theme="dark"] .form-control::placeholder { color: var(--ink-500); }
:root[data-theme="dark"] .input-group-text { background-color: #0d1626; border-color: rgba(255,255,255,.14); color: var(--ink-700); }
:root[data-theme="dark"] .dropdown-menu { background-color: var(--surface-card); border-color: rgba(255,255,255,.1); }
:root[data-theme="dark"] .dropdown-item { color: var(--ink-900); }
:root[data-theme="dark"] .dropdown-item:hover, :root[data-theme="dark"] .dropdown-item:focus { background-color: rgba(255,255,255,.06); color: var(--ink-900); }
:root[data-theme="dark"] hr,
:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom { border-color: rgba(255,255,255,.1) !important; }
:root[data-theme="dark"] .btn-outline-secondary { color: var(--ink-700); border-color: rgba(255,255,255,.25); }
:root[data-theme="dark"] .btn-outline-secondary:hover { background-color: rgba(255,255,255,.08); color: var(--ink-900); }
:root[data-theme="dark"] .btn-light { background-color: #16233a; border-color: rgba(255,255,255,.1); color: var(--ink-900); }
:root[data-theme="dark"] .bottom-nav,
:root[data-theme="dark"] .sa-bottom-nav {
  background: rgba(16, 26, 44, .95) !important;
  border-color: rgba(255,255,255,.08);
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #33415a; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #47597a; }