/* =============================================================================
   Tetra Technology — Admin + Reports UI overhaul overrides  (LANE A)
   -----------------------------------------------------------------------------
   Loaded AFTER admin/css/style.css so these token-driven component standards win
   over the legacy admin theme. Consumes the canonical variables from
   public/assets/global/css/design-tokens.css (--ui-*). Additive & reversible:
   deleting this file restores the previous look.

   Canonical brand = NPK International green #2e7d32 with orange #f06018 accent.
   ========================================================================== */

/* ---- Admin shares the same NPK brand green as the storefront (unified by
   request). The admin user can still recolour everything via the "My Theme"
   feature, which overrides these. --- */
:root {
  --ui-brand: #2e7d32;
  --ui-brand-600: #276b2b;
  --ui-brand-700: #1f5723;
  --ui-brand-050: #e8f5e9;
  --ui-brand-100: #c8e6c9;
  --bs-primary: #2e7d32;
  --bs-primary-rgb: 46, 125, 50;
}

/* =============================================================================
   1. BUTTONS  (§3: radius, weight 600, brand primary, clear hover, touch height)
   ========================================================================== */
.btn {
  --bs-btn-border-radius: var(--ui-radius-sm);
  border-radius: var(--ui-radius-sm);
  font-weight: 600;
  font-size: var(--ui-fs-base);
  padding: 8px 14px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn i,
.btn .bi,
.btn .fa,
.btn .las,
.btn .la {
  margin-inline-end: 2px;
}
.btn.btn-sm {
  border-radius: var(--ui-radius-sm);
  font-size: var(--ui-fs-sm);
  padding: 6px 10px;
  font-weight: 600;
}
.btn.btn-lg {
  border-radius: var(--ui-radius);
}

/* Primary → brand */
.btn-primary {
  background-color: var(--ui-brand);
  border-color: var(--ui-brand);
  color: var(--ui-on-brand);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--ui-brand-700) !important;
  border-color: var(--ui-brand-700) !important;
  color: #fff !important;
}
.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 .2rem rgba(46, 125, 50,.35) !important;
}
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--ui-brand);
  border-color: var(--ui-brand);
  opacity: .55;
}

/* Outline primary → brand */
.btn-outline-primary {
  color: var(--ui-brand);
  border-color: var(--ui-brand);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
  background-color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  color: #fff !important;
}
.btn-outline-primary:focus {
  box-shadow: 0 0 0 .2rem rgba(46, 125, 50,.3);
}

/* Accent / warning buttons pick up the amber accent for a consistent scheme */
.btn-link {
  color: var(--ui-brand);
}

/* Touch targets on small screens */
@media (max-width: 767.98px) {
  .btn:not(.btn-sm):not(.btn-xs) {
    min-height: var(--ui-touch);
  }
}

/* =============================================================================
   2. CARDS  (§3: surface bg, 1px border, radius-lg, shadow-sm)
   ========================================================================== */
main.page-content .card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-sm);
}
main.page-content .card > .card-body {
  padding: 1.1rem 1.25rem;
}
main.page-content .card > .card-footer {
  border-top: 1px solid var(--ui-border);
}
.radius-10, .radius-15 {
  border-radius: var(--ui-radius-lg) !important;
}

/* =============================================================================
   3. FORMS  (§3: consistent height/padding/radius, brand focus ring)
   ========================================================================== */
.form-control,
.form-select {
  border-radius: var(--ui-radius-sm);
  border: 1px solid var(--ui-border-strong);
  color: var(--ui-text);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ui-brand) !important;
  box-shadow: 0 0 0 3px rgba(46, 125, 50,.15) !important;
}
.form-label,
label.form-label,
.col-form-label {
  font-weight: 600;
  font-size: var(--ui-fs-sm);
  color: var(--ui-heading);
}
.form-check-input:checked {
  background-color: var(--ui-brand);
  border-color: var(--ui-brand);
}
.form-check-input:focus {
  border-color: var(--ui-brand);
  box-shadow: 0 0 0 .2rem rgba(46, 125, 50,.25);
}
.form-switch .form-check-input:checked {
  background-color: var(--ui-brand);
  border-color: var(--ui-brand);
}
.input-group-text {
  border-radius: var(--ui-radius-sm);
  border-color: var(--ui-border-strong);
}

/* =============================================================================
   4. TABLES  (§3: readable header, zebra, hover, comfy padding + mobile scroll)
   ========================================================================== */
main.page-content .table > thead th {
  background: var(--ui-surface-2);
  color: var(--ui-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--ui-fs-xs);
  letter-spacing: .3px;
  border-bottom: 1px solid var(--ui-border);
}
main.page-content .table > tbody > tr:hover > td {
  background: var(--ui-brand-050);
}
main.page-content .table td,
main.page-content .table th {
  vertical-align: middle;
}

/* Wide-table horizontal scroll on small screens. Applies to the common Bootstrap
   wrapper and the report/order .of-table-wrap so pages never overflow the body. */
@media (max-width: 991.98px) {
  .table-responsive,
  .table-responsive-sm,
  .table-responsive-md,
  .of-table-wrap,
  .ui-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =============================================================================
   5. AJAX-LIST ENGINE  (of-list-card / of-table) — restyle appearance only.
   Class names, data-attrs and markup are untouched (per golden rule #3).
   ========================================================================== */
.of-list-card {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-sm);
  background: var(--ui-surface);
}
/* header background comes from theme-vars (--app-card-head-bg) — keep it there */
.of-filter .form-control,
.of-filter .form-select {
  border-radius: var(--ui-radius-sm);
  border-color: var(--ui-border-strong);
}
.of-filter .form-control:focus,
.of-filter .form-select:focus {
  border-color: var(--ui-brand);
  box-shadow: 0 0 0 3px rgba(46, 125, 50,.15);
}
.of-table-wrap {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius);
}
table.of-table thead th {
  background: var(--ui-surface-2);
  color: var(--ui-muted);
  border-bottom-color: var(--ui-border);
}
table.of-table thead th[data-sort]:hover {
  color: var(--ui-brand);
  background: var(--ui-brand-050);
}
table.of-table tbody td {
  border-bottom-color: var(--ui-border);
}
table.of-table tbody tr:hover td {
  background: var(--ui-brand-050);
}
table.of-table tbody tr:nth-child(even) td {
  background: var(--ui-surface-2);
}
table.of-table tbody tr:nth-child(even):hover td {
  background: var(--ui-brand-050);
}
.of-link {
  color: var(--ui-brand);
}
.of-action-btn {
  border-color: var(--ui-border-strong);
  color: var(--ui-text);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
}
.of-action-btn:hover {
  border-color: var(--ui-brand);
  color: var(--ui-brand);
  background: var(--ui-brand-050);
}
.of-action-btn:focus {
  box-shadow: 0 0 0 3px rgba(46, 125, 50,.15);
}
.of-action-menu {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
}
.of-pill-primary {
  background: var(--ui-brand-050);
  color: var(--ui-brand-700);
}

/* =============================================================================
   6. STATUS / BADGES / ALERTS  (map to status tokens)
   ========================================================================== */
.badge.bg-primary,
.badge.badge-primary { background-color: var(--ui-brand) !important; }
.text-primary { color: var(--ui-brand) !important; }
.bg-primary   { background-color: var(--ui-brand) !important; }
.border-primary { border-color: var(--ui-brand) !important; }
a { color: var(--ui-brand); }
a:hover { color: var(--ui-brand-700); }
/* keep nav / dropdown / menu anchors neutral (they set their own colours) */
.navbar a, .dropdown-item, .nav-link, .metismenu a, .breadcrumb a,
.page-link, .btn { color: inherit; }

.alert-success { --bs-alert-color: var(--ui-success-fg); --bs-alert-bg: var(--ui-success-bg); --bs-alert-border-color: #bbf7d0; }
.alert-danger  { --bs-alert-color: var(--ui-danger-fg);  --bs-alert-bg: var(--ui-danger-bg);  --bs-alert-border-color: #fbcaca; }
.alert-warning { --bs-alert-color: var(--ui-warning-fg); --bs-alert-bg: var(--ui-warning-bg); --bs-alert-border-color: #fde9ab; }
.alert-info    { --bs-alert-color: var(--ui-info-fg);    --bs-alert-bg: var(--ui-info-bg);    --bs-alert-border-color: #bae6fd; }

/* =============================================================================
   7. PAGINATION / NAV-PILLS / PROGRESS → brand
   ========================================================================== */
.page-item.active .page-link {
  background-color: var(--ui-brand);
  border-color: var(--ui-brand);
  color: #fff;
}
.page-link {
  color: var(--ui-brand);
}
.page-link:hover {
  color: var(--ui-brand-700);
  background-color: var(--ui-brand-050);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--ui-brand);
}
.progress-bar { background-color: var(--ui-brand); }

/* =============================================================================
   8. MOBILE OFF-CANVAS SIDEBAR BACKDROP
   ========================================================================== */
.app-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  z-index: 15;            /* below the 260px sidebar (z-index:16) */
}
@media (max-width: 1024px) {
  .wrapper.toggled .app-sidebar-overlay {
    display: block;
  }
}

/* =============================================================================
   9. DARK MODE — extend coverage to everything restyled above
   ========================================================================== */
[data-bs-theme="dark"] main.page-content .card {
  background: var(--ui-surface);
  border-color: var(--ui-border);
}
[data-bs-theme="dark"] main.page-content .card > .card-body,
[data-bs-theme="dark"] main.page-content .card > .card-footer {
  background: var(--ui-surface);
  color: var(--ui-text);
  border-color: var(--ui-border);
}
[data-bs-theme="dark"] main.page-content .table > thead th {
  background: var(--ui-bg);
  color: var(--ui-muted);
  border-color: var(--ui-border);
}
[data-bs-theme="dark"] main.page-content .table,
[data-bs-theme="dark"] main.page-content .table td,
[data-bs-theme="dark"] main.page-content .table th {
  color: var(--ui-text);
  border-color: var(--ui-border);
}
[data-bs-theme="dark"] main.page-content .table > tbody > tr:hover > td {
  background: var(--ui-surface-2);
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background: var(--ui-bg);
  color: var(--ui-heading);
  border-color: var(--ui-border);
}
[data-bs-theme="dark"] .input-group-text {
  background: var(--ui-surface-2);
  color: var(--ui-text);
  border-color: var(--ui-border);
}
[data-bs-theme="dark"] .of-list-card,
[data-bs-theme="dark"] .of-table-wrap,
[data-bs-theme="dark"] .of-action-menu,
[data-bs-theme="dark"] .of-card {
  background: var(--ui-surface);
  border-color: var(--ui-border);
}
[data-bs-theme="dark"] table.of-table thead th {
  background: var(--ui-bg);
  color: var(--ui-muted);
  border-color: var(--ui-border);
}
[data-bs-theme="dark"] table.of-table tbody td {
  border-color: var(--ui-border);
  color: var(--ui-text);
}
[data-bs-theme="dark"] table.of-table tbody tr:nth-child(even) td {
  background: var(--ui-surface-2);
}
[data-bs-theme="dark"] table.of-table tbody tr:hover td,
[data-bs-theme="dark"] table.of-table tbody tr:nth-child(even):hover td {
  background: var(--ui-surface-2);
}
[data-bs-theme="dark"] .of-action-btn {
  background: var(--ui-bg);
  color: var(--ui-text);
  border-color: var(--ui-border);
}
[data-bs-theme="dark"] .page-link {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  color: var(--ui-brand-100);
}
[data-bs-theme="dark"] .page-link:hover {
  background: var(--ui-surface-2);
}
[data-bs-theme="dark"] .page-item.active .page-link {
  background: var(--ui-brand);
  border-color: var(--ui-brand);
  color: #fff;
}
[data-bs-theme="dark"] .breadcrumb,
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary {
  color: var(--ui-muted) !important;
}
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end {
  border-color: var(--ui-border) !important;
}
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light {
  background-color: var(--ui-surface) !important;
  color: var(--ui-text);
}

/* =============================================================================
   10. RESPONSIVE SAFETY — never let the page body scroll sideways
   ========================================================================== */
@media (max-width: 767.98px) {
  main.page-content {
    padding: 1rem;
  }
}

/* =============================================================================
   11. DARK-MODE — order/quotation/requisition entry-form surfaces (audit P1)
   form-styles.blade.php hardcodes light surfaces (#fff / #f9fafb / #fafafe) with
   no dark override. These token-driven rules win by specificity so entry forms
   stay legible in dark mode. (Complements the .of-card rule in §9 above.)
   ========================================================================== */
[data-bs-theme="dark"] .of-summary { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); }
[data-bs-theme="dark"] .of-card__body { color: var(--ui-text); }
[data-bs-theme="dark"] .of-items thead th { background: var(--ui-surface-2); color: var(--ui-muted); border-color: var(--ui-border); }
[data-bs-theme="dark"] .of-items td,
[data-bs-theme="dark"] .of-items th { border-color: var(--ui-border); color: var(--ui-text); }
[data-bs-theme="dark"] .of-items tbody tr:hover { background: var(--ui-surface-2); }
[data-bs-theme="dark"] .of-control,
[data-bs-theme="dark"] .form-control.of-control,
[data-bs-theme="dark"] .form-select.of-control { background: var(--ui-bg); color: var(--ui-text); border-color: var(--ui-border); }

/* =============================================================================
   12. REPORT SCREEN TABLES  (report/** only) — adopt the of-table skin
   -----------------------------------------------------------------------------
   Report list/summary tables historically shipped plain Bootstrap
   `table table-striped table-bordered`, whose heavy full-grid borders + grey
   Bootstrap striping made them look detached from the modern of-table lists.
   The `.report-table` class (added on report SCREEN tables ONLY — the print /
   mpdf partials under report/print/** keep their fixed-width styling and are NOT
   touched) gives them the same treatment as §4/§5: neutral header
   (--ui-surface-2 bg, --ui-muted uppercase label), zebra rows (--ui-surface-2),
   brand-tinted hover, clean single-line row separators, comfy padding and a
   token-aligned emphasis for total / section rows. `box-shadow: none` on the
   relevant cells neutralises Bootstrap contextual classes (table-light /
   table-primary / table-secondary) so their tint follows the tokens instead.
   ========================================================================== */
main.page-content table.report-table {
  --bs-table-bg: transparent;
  width: 100%;
  margin: 0;
  font-size: .85rem;
  color: var(--ui-text);
}

/* Header — neutral surface + muted uppercase label (mirrors of-table). */
main.page-content table.report-table > thead > tr > th,
main.page-content table.report-table > thead > tr > td {
  background: var(--ui-surface-2);
  color: var(--ui-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .4px;
  white-space: nowrap;
  padding: .7rem .75rem;
  border-top: 0;
  border-bottom: 1px solid var(--ui-border);
  box-shadow: none;
  vertical-align: middle;
}

/* Body cells — single bottom separator, comfy padding, no vertical grid. */
main.page-content table.report-table > tbody > tr > td,
main.page-content table.report-table > tbody > tr > th {
  padding: .6rem .75rem;
  border-top: 0;
  border-bottom: 1px solid var(--ui-border);
  background-color: transparent;
  vertical-align: middle;
}

/* Zebra + hover (light). Dark variants live in §13. */
main.page-content table.report-table > tbody > tr:nth-child(even) > td,
main.page-content table.report-table > tbody > tr:nth-child(even) > th {
  background-color: var(--ui-surface-2);
}
main.page-content table.report-table > tbody > tr:hover > td,
main.page-content table.report-table > tbody > tr:hover > th {
  background-color: var(--ui-brand-050);
}

/* Totals footer — emphasised, token surface, separated by a heavier top rule. */
main.page-content table.report-table > tfoot > tr > th,
main.page-content table.report-table > tfoot > tr > td {
  background: var(--ui-surface-2);
  color: var(--ui-heading);
  font-weight: 700;
  padding: .6rem .75rem;
  border-top: 2px solid var(--ui-border);
  border-bottom: 0;
  box-shadow: none;
}

/* Bootstrap contextual rows (total / section headers) → token-aligned tints. */
main.page-content table.report-table tr.table-primary > * {
  background-color: var(--ui-brand-050);
  color: var(--ui-brand-700);
  box-shadow: none;
}
main.page-content table.report-table tr.table-secondary > *,
main.page-content table.report-table > tbody > tr.table-light > * {
  background-color: var(--ui-surface-2);
  color: var(--ui-heading);
  box-shadow: none;
}

/* =============================================================================
   13. REPORT SCREEN TABLES — dark mode
   ========================================================================== */
[data-bs-theme="dark"] main.page-content table.report-table {
  color: var(--ui-text);
}
[data-bs-theme="dark"] main.page-content table.report-table > thead > tr > th,
[data-bs-theme="dark"] main.page-content table.report-table > thead > tr > td {
  background: var(--ui-bg);
  color: var(--ui-muted);
  border-color: var(--ui-border);
}
[data-bs-theme="dark"] main.page-content table.report-table > tbody > tr > td,
[data-bs-theme="dark"] main.page-content table.report-table > tbody > tr > th {
  border-color: var(--ui-border);
  color: var(--ui-text);
}
[data-bs-theme="dark"] main.page-content table.report-table > tbody > tr:nth-child(even) > td,
[data-bs-theme="dark"] main.page-content table.report-table > tbody > tr:nth-child(even) > th {
  background-color: var(--ui-surface-2);
}
[data-bs-theme="dark"] main.page-content table.report-table > tbody > tr:hover > td,
[data-bs-theme="dark"] main.page-content table.report-table > tbody > tr:hover > th {
  background-color: var(--ui-surface-2);
}
[data-bs-theme="dark"] main.page-content table.report-table > tfoot > tr > th,
[data-bs-theme="dark"] main.page-content table.report-table > tfoot > tr > td {
  background: var(--ui-bg);
  color: var(--ui-heading);
  border-color: var(--ui-border);
}
[data-bs-theme="dark"] main.page-content table.report-table tr.table-primary > * {
  background-color: var(--ui-surface-2);
  color: var(--ui-heading);
}
[data-bs-theme="dark"] main.page-content table.report-table tr.table-secondary > *,
[data-bs-theme="dark"] main.page-content table.report-table > tbody > tr.table-light > * {
  background-color: var(--ui-bg);
  color: var(--ui-heading);
}

/* =============================================================================
   14. BACK-TO-TOP — legacy admin/css/style.css hardcodes Bootstrap blue;
   repoint to the brand so it matches the rest of the chrome.
   ========================================================================== */
.back-to-top {
  background-color: var(--ui-brand) !important;
}