/* ============================================================
   MMSWEB modern theme
   Brand: deep green (matches login panel gradient) + mint accent
   Applied as an override layer on top of Bootstrap 5.1
   ============================================================ */

:root {
  --mms-green-950: #0d2c20;
  --mms-green-900: #123a2b;
  --mms-green-800: #17492f;
  --mms-green-700: #1d5c44;
  --mms-green-600: #2e7d5b;
  --mms-green-500: #3d9670;
  --mms-green-100: #e2f2ea;
  --mms-green-50:  #f0f7f3;
  --mms-mint:      #8fd6b5;
  --mms-ink:       #1c2b24;
  --mms-muted:     #64748b;
  --mms-surface:   #ffffff;
  --mms-body-bg:   #f3f6f4;
  --mms-border:    #dfe6e2;
  --mms-radius:    .75rem;
  --mms-radius-sm: .5rem;
  --mms-shadow-sm: 0 1px 2px rgba(13, 44, 32, .06);
  --mms-shadow:    0 8px 24px rgba(13, 44, 32, .08);
  --mms-focus-ring: 0 0 0 .25rem rgba(46, 125, 91, .25);
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  background-color: var(--mms-body-bg);
  color: var(--mms-ink);
  font-family: "Segoe UI Variable Text", "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Map Tabler's theme color to the brand green */
:root,
[data-bs-theme="light"] {
  --tblr-primary: var(--mms-green-600);
  --tblr-primary-rgb: 46, 125, 91;
  --tblr-link-color: var(--mms-green-600);
  --tblr-link-hover-color: var(--mms-green-700);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Segoe UI Variable Display", "Inter", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--mms-ink);
}

a {
  color: var(--mms-green-600);
}

a:hover {
  color: var(--mms-green-700);
}

/* ---------- Focus ring (brand green) ---------- */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus, .form-select:focus {
  box-shadow: var(--mms-focus-ring);
}

/* ---------- Sidebar (Tabler vertical navbar) ---------- */
.app-sidebar {
  background: linear-gradient(180deg, var(--mms-green-950) 0%, var(--mms-green-900) 45%, var(--mms-green-800) 100%) !important;
  box-shadow: 2px 0 14px rgba(13, 44, 32, .22);
}

.app-sidebar .navbar-brand a {
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
}

.app-sidebar .navbar-brand a:hover {
  color: var(--mms-mint);
}

.app-sidebar .nav-link {
  color: rgba(255, 255, 255, .8);
  font-weight: 500;
  border-radius: var(--mms-radius-sm);
  transition: background-color .15s ease, color .15s ease;
}

.app-sidebar .nav-link:hover,
.app-sidebar .nav-link:focus,
.app-sidebar .nav-link.active,
.app-sidebar .nav-item.show > .nav-link {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
}

.app-sidebar .nav-link-icon i {
  font-size: 1.15rem;
}

.app-sidebar .dropdown-menu {
  background: rgba(255, 255, 255, .04);
  border: 0;
  box-shadow: none;
}

.app-sidebar .dropdown-item {
  color: rgba(255, 255, 255, .75);
}

.app-sidebar .dropdown-item:hover,
.app-sidebar .dropdown-item:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, .08);
}

.app-sidebar .dropdown-header {
  color: var(--mms-mint);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.app-sidebar .dropdown-divider {
  border-color: rgba(255, 255, 255, .12);
}

/* ---------- Topbar ---------- */
.app-topbar {
  background: var(--mms-surface);
  border-bottom: 1px solid var(--mms-border);
  min-height: 3.25rem;
}

.app-brand-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: #fff;
  border-radius: .5rem;
  padding: 2px;
}

/* ---------- Dropdown menus ---------- */
.dropdown-menu {
  border: 1px solid var(--mms-border);
  border-radius: var(--mms-radius);
  box-shadow: var(--mms-shadow);
  padding: .5rem;
}

.dropdown-item {
  border-radius: var(--mms-radius-sm);
  padding: .45rem .75rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--mms-green-50);
  color: var(--mms-green-800);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--mms-green-600);
  color: #fff;
}

.dropdown-header {
  color: var(--mms-green-600);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.dropdown-divider {
  border-color: var(--mms-border);
  opacity: 1;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--mms-radius-sm);
  font-weight: 500;
}

.btn-primary {
  background-color: var(--mms-green-600);
  border-color: var(--mms-green-600);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--mms-green-700);
  border-color: var(--mms-green-700);
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--mms-green-800);
  border-color: var(--mms-green-800);
}

.btn-outline-primary {
  color: var(--mms-green-600);
  border-color: var(--mms-green-600);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
  background-color: var(--mms-green-600);
  border-color: var(--mms-green-600);
  color: #fff;
}

.btn-link {
  color: var(--mms-green-600);
}

.btn-link:hover {
  color: var(--mms-green-700);
}

/* ---------- Rebrand Bootstrap "primary" helpers ---------- */
.text-primary {
  color: var(--mms-green-600) !important;
}

.bg-primary {
  background-color: var(--mms-green-600) !important;
}

.border-primary {
  border-color: var(--mms-green-600) !important;
}

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

.progress-bar {
  background-color: var(--mms-green-600);
}

.list-group-item.active {
  background-color: var(--mms-green-600);
  border-color: var(--mms-green-600);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--mms-green-600);
}

.page-link {
  color: var(--mms-green-600);
  border-radius: var(--mms-radius-sm);
}

.page-item.active .page-link {
  background-color: var(--mms-green-600);
  border-color: var(--mms-green-600);
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
  border-radius: var(--mms-radius-sm);
  border-color: var(--mms-border);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--mms-green-500);
}

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

.form-label {
  font-weight: 500;
  color: #33413a;
}

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--mms-border);
  border-radius: var(--mms-radius);
  box-shadow: var(--mms-shadow-sm);
}

.card-header {
  background-color: var(--mms-surface);
  border-bottom: 1px solid var(--mms-border);
  border-top-left-radius: var(--mms-radius) !important;
  border-top-right-radius: var(--mms-radius) !important;
  font-weight: 600;
}

/* ---------- Tables ---------- */
.table {
  --bs-table-hover-bg: var(--mms-green-50);
  background-color: var(--mms-surface);
  border-color: var(--mms-border);
  border-radius: var(--mms-radius);
  overflow: hidden;
  box-shadow: var(--mms-shadow-sm);
}

.table > thead {
  background-color: var(--mms-green-50);
}

.table > thead th {
  color: var(--mms-green-800);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--mms-border);
  padding-top: .7rem;
  padding-bottom: .7rem;
  white-space: nowrap;
}

.table > tbody td {
  vertical-align: middle;
  border-color: #ecf1ee;
}

.table > tbody tr:hover {
  background-color: var(--mms-green-50);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-striped-bg: #f8faf9;
}

.table-responsive {
  border-radius: var(--mms-radius);
}

/* ---------- Alerts / badges ---------- */
.alert {
  border-radius: var(--mms-radius);
  border: 0;
  box-shadow: var(--mms-shadow-sm);
}

.badge {
  border-radius: .45rem;
  font-weight: 600;
}

/* ---------- Modals ---------- */
.modal-content {
  border: 0;
  border-radius: var(--mms-radius);
  box-shadow: var(--mms-shadow);
}

/* ---------- Footer ---------- */
.footer {
  color: var(--mms-muted);
  font-size: .85rem;
  padding: 1rem 0;
  border-top: 1px solid var(--mms-border) !important;
  background-color: var(--mms-surface);
}

.footer a {
  color: var(--mms-muted);
}

.footer a:hover {
  color: var(--mms-green-700);
}

/* ---------- Print: chrome hidden, content only ---------- */
@media print {
  .app-sidebar,
  .app-topbar,
  .footer {
    display: none !important;
  }

  body {
    background: #fff;
  }
}

/* ---------- Existing brand/receipt image helpers ---------- */
.dashboard-brand-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border: 1px solid var(--mms-border);
  border-radius: var(--mms-radius-sm);
  background: #fff;
}

.receipt-brand-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.receipt-seal-image {
  max-width: 130px;
  max-height: 92px;
  object-fit: contain;
}

.receipt-signature-image {
  max-width: 170px;
  max-height: 64px;
  object-fit: contain;
}