/* ===================================================================
   Tangent UI — ADOPTION LAYER
   -------------------------------------------------------------------
   tangent-ui.css defines new .tg-* components for pages we convert by
   hand. This file is the opposite approach: it restyles the classes the
   EXISTING ~70 merchant/admin pages already use, so they inherit the
   new look without touching a single Blade file.

   Load AFTER tangent-ui.css.

   Scope: everything lives under .dashboard-main-wrapper, which the
   shared master layout always renders. The public frontend, the login
   screen and print views are untouched.

   Conservative by design — type, colour, surfaces, spacing, radius.
   No layout/positioning changes, because that is what breaks pages
   you cannot individually retest.
   =================================================================== */

.dashboard-main-wrapper {
  background: var(--tg-bg);
  font-family: var(--tg-font);
  color: var(--tg-ink);
  -webkit-font-smoothing: antialiased;
}

.dashboard-main-wrapper h1,
.dashboard-main-wrapper h2,
.dashboard-main-wrapper h3,
.dashboard-main-wrapper h4,
.dashboard-main-wrapper h5,
.dashboard-main-wrapper h6,
.dashboard-main-wrapper .pageheader-title {
  font-family: var(--tg-font);
  letter-spacing: -.015em;
  color: var(--tg-ink);
}
.dashboard-main-wrapper .h3,
.dashboard-main-wrapper h3 { font-weight: 700; }

/* ---------- Cards ---------- */
.dashboard-main-wrapper .card {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-r-lg);
  box-shadow: none;
}
.dashboard-main-wrapper .card + .card { margin-top: 16px; }
.dashboard-main-wrapper .card-header {
  background: var(--tg-surface-alt);
  border-bottom: 1px solid var(--tg-line);
  border-radius: var(--tg-r-lg) var(--tg-r-lg) 0 0 !important;
  font-weight: 600;
  font-size: 14px;
  color: var(--tg-ink);
}
.dashboard-main-wrapper .card-footer {
  background: var(--tg-surface-alt);
  border-top: 1px solid var(--tg-line);
  border-radius: 0 0 var(--tg-r-lg) var(--tg-r-lg) !important;
}
/* the theme's coloured top borders read as noise at this density */
.dashboard-main-wrapper .card.border-3.border-top { border-top-width: 3px !important; }

/* ---------- Breadcrumb ---------- */
.dashboard-main-wrapper .breadcrumb {
  background: transparent;
  padding: 0 0 4px;
  margin-bottom: 10px;
  font-size: 12px;
}
.dashboard-main-wrapper .breadcrumb-link { color: var(--tg-ink-3); }
.dashboard-main-wrapper .breadcrumb-link:hover { color: var(--tg-primary); }
.dashboard-main-wrapper .breadcrumb-link.active,
.dashboard-main-wrapper .breadcrumb-item.active { color: var(--tg-ink); font-weight: 500; }

/* ---------- Tables ---------- */
.dashboard-main-wrapper .table {
  border-collapse: separate;
  border-spacing: 0;
  color: var(--tg-ink-2);
  font-size: 13px;
}
.dashboard-main-wrapper .table thead th {
  background: var(--tg-surface-alt);
  border: none;
  border-bottom: 1px solid var(--tg-line);
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tg-ink-4);
  white-space: nowrap;
  vertical-align: middle;
}
.dashboard-main-wrapper .table tbody td {
  border: none;
  border-bottom: 1px solid var(--tg-line-soft);
  padding: 13px 14px;
  vertical-align: middle;
}
.dashboard-main-wrapper .table tbody tr:last-child td { border-bottom: none; }
.dashboard-main-wrapper .table-hover tbody tr:hover,
.dashboard-main-wrapper .table tbody tr:hover { background: var(--tg-surface-alt); }
.dashboard-main-wrapper .table-bordered,
.dashboard-main-wrapper .table-bordered td,
.dashboard-main-wrapper .table-bordered th { border-color: var(--tg-line); }
.dashboard-main-wrapper .table strong { color: var(--tg-ink); }

/* ---------- Buttons ----------
   The theme sprays btn-warning / btn-danger / btn-secondary / btn-info
   across pages as decoration rather than meaning. Everything neutral
   collapses to one quiet button; only primary, success and danger keep
   a colour, so a red button on screen actually means "destructive". */
.dashboard-main-wrapper .btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--tg-r);
  padding: 8px 14px;
  box-shadow: none;
  line-height: 1.2;
}
.dashboard-main-wrapper .btn-sm { font-size: 12px; padding: 7px 12px; font-weight: 600; }
.dashboard-main-wrapper .btn-lg { font-size: 14px; padding: 11px 18px; }

.dashboard-main-wrapper .btn-primary {
  background: var(--tg-primary);
  border-color: var(--tg-primary);
  color: #fff;
  font-weight: 600;
}
.dashboard-main-wrapper .btn-primary:hover,
.dashboard-main-wrapper .btn-primary:focus {
  background: var(--tg-primary-dk);
  border-color: var(--tg-primary-dk);
}

.dashboard-main-wrapper .btn-secondary,
.dashboard-main-wrapper .btn-info,
.dashboard-main-wrapper .btn-light,
.dashboard-main-wrapper .btn-dark {
  background: var(--tg-surface);
  border-color: #cbd5e1;
  color: var(--tg-ink-2);
}
.dashboard-main-wrapper .btn-secondary:hover,
.dashboard-main-wrapper .btn-info:hover,
.dashboard-main-wrapper .btn-light:hover,
.dashboard-main-wrapper .btn-dark:hover {
  background: var(--tg-surface-alt);
  border-color: var(--tg-ink-4);
  color: var(--tg-ink);
}

.dashboard-main-wrapper .btn-success {
  background: var(--tg-ok);
  border-color: var(--tg-ok);
  color: #fff;
  font-weight: 600;
}
.dashboard-main-wrapper .btn-success:hover { background: #047857; border-color: #047857; }

.dashboard-main-wrapper .btn-warning {
  background: var(--tg-warn);
  border-color: var(--tg-warn);
  color: var(--tg-ink);
  font-weight: 600;
}
.dashboard-main-wrapper .btn-warning:hover { background: #f59e0b; border-color: #f59e0b; }

.dashboard-main-wrapper .btn-danger {
  background: var(--tg-danger);
  border-color: var(--tg-danger);
  color: #fff;
  font-weight: 600;
}
.dashboard-main-wrapper .btn-danger:hover { background: #991b1b; border-color: #991b1b; }

.dashboard-main-wrapper .btn-outline-primary {
  color: var(--tg-primary); border-color: var(--tg-primary); background: transparent;
}
.dashboard-main-wrapper .btn-outline-primary:hover {
  background: var(--tg-primary); color: #fff;
}
.dashboard-main-wrapper .btn-outline-secondary {
  color: var(--tg-ink-2); border-color: #cbd5e1; background: var(--tg-surface);
}
.dashboard-main-wrapper .btn-outline-secondary:hover {
  background: var(--tg-surface-alt); border-color: var(--tg-ink-4); color: var(--tg-ink);
}
.dashboard-main-wrapper .btn-outline-secondary.active,
.dashboard-main-wrapper .btn-group .btn.active {
  background: var(--tg-primary); border-color: var(--tg-primary); color: #fff;
}

/* ---------- Forms ---------- */
.dashboard-main-wrapper .form-control,
.dashboard-main-wrapper select.form-control,
.dashboard-main-wrapper textarea.form-control {
  font-family: inherit;
  font-size: 13px;
  color: var(--tg-ink);
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: 8px;
  box-shadow: none;
  padding: 9px 11px;
  height: auto;
}
.dashboard-main-wrapper .form-control:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.dashboard-main-wrapper label {
  font-size: 12px;
  font-weight: 600;
  color: var(--tg-ink-3);
  margin-bottom: 5px;
}
.dashboard-main-wrapper .form-group { margin-bottom: 14px; }
.dashboard-main-wrapper .invalid-feedback,
.dashboard-main-wrapper .text-danger { font-size: 12px; }

/* select2 — used on most merchant forms */
.dashboard-main-wrapper .select2-container--default .select2-selection--single,
.dashboard-main-wrapper .select2-container--default .select2-selection--multiple {
  border: 1px solid var(--tg-line);
  border-radius: 8px;
  min-height: 38px;
}
.dashboard-main-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px;
  color: var(--tg-ink);
  font-size: 13px;
}
.dashboard-main-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }

/* ---------- Badges → pills ---------- */
.dashboard-main-wrapper .badge {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 4px 10px;
  border-radius: 20px;
}
/* Waiting states read amber, not alarm-red. Red is reserved for
   genuinely wrong: failed, returned, overdue. */
.dashboard-main-wrapper .badge-warning,
.dashboard-main-wrapper .badge-pending  { background: #fef3c7; color: #92400e; }
.dashboard-main-wrapper .badge-success  { background: #d1fae5; color: #065f46; }
.dashboard-main-wrapper .badge-danger   { background: #fee2e2; color: #991b1b; }
.dashboard-main-wrapper .badge-primary,
.dashboard-main-wrapper .badge-info     { background: #dbeafe; color: #1e40af; }
.dashboard-main-wrapper .badge-secondary,
.dashboard-main-wrapper .badge-light,
.dashboard-main-wrapper .badge-dark     { background: var(--tg-line-soft); color: #475569; }

/* ---------- List groups (statements, profile panels) ---------- */
.dashboard-main-wrapper .list-group-item {
  border-color: var(--tg-line);
  font-size: 13px;
  padding: 11px 14px;
  color: var(--tg-ink-2);
}
.dashboard-main-wrapper .list-group-item:first-child { border-radius: var(--tg-r) var(--tg-r) 0 0; }
.dashboard-main-wrapper .list-group-item:last-child  { border-radius: 0 0 var(--tg-r) var(--tg-r); }
.dashboard-main-wrapper .profile-list-group-item .font-weight-bold { color: var(--tg-ink); }

/* ---------- Dropdowns ---------- */
.dashboard-main-wrapper .dropdown-menu {
  border: 1px solid var(--tg-line);
  border-radius: 10px;
  box-shadow: var(--tg-shadow-lg);
  padding: 5px;
  font-size: 13px;
}
.dashboard-main-wrapper .dropdown-item {
  border-radius: var(--tg-r-sm);
  padding: 8px 11px;
  color: var(--tg-ink-2);
}
.dashboard-main-wrapper .dropdown-item:hover {
  background: var(--tg-line-soft);
  color: var(--tg-ink);
}

/* ---------- Modals ---------- */
.dashboard-main-wrapper .modal-content,
.modal .modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15,23,42,.35);
}
.modal .modal-header {
  border-bottom: 1px solid var(--tg-line);
  padding: 16px 20px;
}
.modal .modal-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.modal .modal-footer { border-top: 1px solid var(--tg-line); padding: 14px 20px; }

/* ---------- Pagination ---------- */
.dashboard-main-wrapper .pagination { font-size: 13px; }
.dashboard-main-wrapper .page-link {
  color: var(--tg-ink-2);
  border-color: var(--tg-line);
  padding: 7px 12px;
}
.dashboard-main-wrapper .page-link:hover { background: var(--tg-surface-alt); color: var(--tg-ink); }
.dashboard-main-wrapper .page-item.active .page-link {
  background: var(--tg-primary);
  border-color: var(--tg-primary);
  color: #fff;
}

/* ---------- Nav tabs (Orders / Previous / Recurring) ---------- */
.dashboard-main-wrapper .nav-tabs { border-bottom: 1px solid var(--tg-line); }
.dashboard-main-wrapper .nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--tg-ink-3);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
}
.dashboard-main-wrapper .nav-tabs .nav-link:hover { color: var(--tg-ink); border-color: transparent; }
.dashboard-main-wrapper .nav-tabs .nav-link.active {
  color: var(--tg-primary-dk);
  background: transparent;
  border-bottom-color: var(--tg-primary);
}

/* ---------- Alerts ---------- */
.dashboard-main-wrapper .alert {
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-r);
  font-size: 13px;
}
.dashboard-main-wrapper .alert-success { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
.dashboard-main-wrapper .alert-danger  { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.dashboard-main-wrapper .alert-warning { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.dashboard-main-wrapper .alert-info    { background: #dbeafe; border-color: #93c5fd; color: #1e40af; }

/* ---------- Past-due rows ----------
   Restores the loud treatment for genuinely late orders. Any page can
   opt in by putting .tg-overdue on the <tr>; the legacy inline red
   background the old views used is matched here so those keep working
   even before conversion. */
.dashboard-main-wrapper tr.tg-overdue > td {
  background: #fff1f1 !important;
  font-weight: 600;
}
.dashboard-main-wrapper tr.tg-overdue > td:first-child {
  box-shadow: inset 4px 0 0 0 #d32f2f;
}

/* ---------- Checkboxes ---------- */
.dashboard-main-wrapper input[type="checkbox"],
.dashboard-main-wrapper input[type="radio"] { accent-color: var(--tg-primary); }

/* ---------- Footer ---------- */
.dashboard-main-wrapper .footer,
.dashboard-main-wrapper .footer-text {
  background: transparent;
  color: var(--tg-ink-4);
  font-size: 12px;
}

/* ---------- Print: never let the new chrome bleed into labels ------- */
@media print {
  .dashboard-main-wrapper { background: #fff; }
  .dashboard-main-wrapper .card { border: none; }
}