/**
 * Global Glass Navy — apply dashboard Stitch theme to all app screens
 * (Bootstrap cards, tables, forms, modals, DataTables, Select2).
 * Depends on tokens from stitch-dashboard.css on html.theme-* .ipay-twin body.
 */

/* ---- Light tokens (pages that never hit dashboard-only rules) ---- */
html.theme-light.ipay-twin body {
  --st-bg: #eef2f8;
  --st-bg-deep: #e2e8f0;
  --st-surface: rgba(255, 255, 255, 0.72);
  --st-surface-solid: #ffffff;
  --st-surface-2: rgba(241, 245, 249, 0.9);
  --st-border: rgba(15, 23, 42, 0.1);
  --st-border-strong: rgba(15, 23, 42, 0.16);
  --st-text: #0f172a;
  --st-text-muted: #64748b;
  --st-text-dim: #94a3b8;
  --st-cyan: #0891b2;
  --st-blue: #2563eb;
  --st-blue-600: #1d4ed8;
  --st-emerald: #059669;
  --st-amber: #d97706;
  --st-rose: #e11d48;
  --st-radius: 16px;
  --st-glass-blur: blur(20px) saturate(160%);
  --fx-white: rgba(255, 255, 255, 0.82);
  --fx-snow: rgba(15, 23, 42, 0.03);
  --fx-border: rgba(15, 23, 42, 0.1);
  --fx-muted: #64748b;
  --fx-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  color: var(--st-text);
  background: var(--st-bg) !important;
}

html.theme-light.ipay-twin body #tt-main {
  position: relative;
  background:
    radial-gradient(650px 650px at -10% -20%, rgba(8, 145, 178, 0.1), transparent 55%),
    radial-gradient(500px 500px at 90% 10%, rgba(37, 99, 235, 0.08), transparent 50%),
    var(--st-bg) !important;
}

html.theme-light.ipay-twin body #layout-wrapper,
html.theme-light.ipay-twin body .page-content,
html.theme-light.ipay-twin body .main-content {
  background: transparent !important;
}

/* ---- Shared glass surfaces (dark + light) ---- */
html.ipay-twin body .card,
html.ipay-twin body .card.bg-white,
html.ipay-twin body .bg-white {
  background: var(--st-surface, var(--fx-white)) !important;
  border: 1px solid var(--st-border, var(--fx-border)) !important;
  border-radius: var(--st-radius, 16px) !important;
  box-shadow: var(--fx-shadow, none) !important;
  color: var(--st-text, inherit) !important;
  backdrop-filter: var(--st-glass-blur, none);
  -webkit-backdrop-filter: var(--st-glass-blur, none);
}

/* Light: match dashboard frosted glass (not flat Bootstrap white) */
html.theme-light.ipay-twin body .card,
html.theme-light.ipay-twin body .card.bg-white {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.78)) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

html.theme-light.ipay-twin body #tt-topbar {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: var(--st-glass-blur);
  -webkit-backdrop-filter: var(--st-glass-blur);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html.ipay-twin body .card-header,
html.ipay-twin body .card-title,
html.ipay-twin body .card-body,
html.ipay-twin body .card-footer {
  background: transparent !important;
  color: var(--st-text, inherit) !important;
  border-color: var(--st-border, var(--fx-border)) !important;
}

html.ipay-twin body .card-header {
  border-bottom: 1px solid var(--st-border, var(--fx-border)) !important;
}

html.ipay-twin body h1,
html.ipay-twin body h2,
html.ipay-twin body h3,
html.ipay-twin body h4,
html.ipay-twin body h5,
html.ipay-twin body h6,
html.ipay-twin body .page-title-box h4,
html.ipay-twin body label {
  color: var(--st-text, inherit);
}

html.ipay-twin body .text-muted,
html.ipay-twin body .form-text {
  color: var(--st-text-muted, #64748b) !important;
}

/* Tables */
html.ipay-twin body .table,
html.ipay-twin body table.dataTable {
  color: var(--st-text) !important;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--fx-snow);
  --bs-table-hover-bg: rgba(79, 172, 254, 0.08);
  --bs-table-border-color: var(--st-border);
}

html.ipay-twin body .table thead th,
html.ipay-twin body table.dataTable thead th {
  background: var(--st-surface-2, rgba(22, 37, 74, 0.35)) !important;
  color: var(--st-text-muted) !important;
  border-color: var(--st-border) !important;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}

html.ipay-twin body .table td,
html.ipay-twin body table.dataTable tbody td {
  border-color: var(--st-border) !important;
  background: transparent !important;
  vertical-align: middle;
}

html.theme-dark.ipay-twin body .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(255, 255, 255, 0.03);
  color: var(--st-text);
}

/* Forms */
html.ipay-twin body .form-control,
html.ipay-twin body .form-select,
html.ipay-twin body input.form-control,
html.ipay-twin body textarea.form-control,
html.ipay-twin body select.form-control {
  background: var(--st-surface-2, #fff) !important;
  border: 1px solid var(--st-border) !important;
  color: var(--st-text) !important;
  border-radius: 12px !important;
}

html.ipay-twin body .form-control:focus,
html.ipay-twin body .form-select:focus {
  border-color: var(--st-cyan, #00f2fe) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 242, 254, 0.15) !important;
}

html.ipay-twin body .form-control::placeholder {
  color: var(--st-text-dim) !important;
}

html.theme-dark.ipay-twin body .input-group-text {
  background: var(--st-surface-solid) !important;
  border-color: var(--st-border) !important;
  color: var(--st-text-muted) !important;
}

/* Buttons */
html.ipay-twin body .btn-primary {
  background: linear-gradient(135deg, var(--st-blue, #4facfe), var(--st-cyan, #00f2fe)) !important;
  border: none !important;
  color: #04101f !important;
  font-weight: 700;
  border-radius: 12px !important;
}

html.ipay-twin body .btn-secondary,
html.ipay-twin body .btn-light,
html.ipay-twin body .btn-outline-secondary {
  background: var(--st-surface-2) !important;
  border: 1px solid var(--st-border) !important;
  color: var(--st-text) !important;
  border-radius: 12px !important;
}

html.ipay-twin body .btn-outline-primary {
  border-color: var(--st-cyan) !important;
  color: var(--st-cyan) !important;
  background: transparent !important;
  border-radius: 12px !important;
}

/* Modals / dropdowns */
html.ipay-twin body .modal-content {
  background: var(--st-surface-solid, #0b1326) !important;
  border: 1px solid var(--st-border) !important;
  color: var(--st-text) !important;
  border-radius: var(--st-radius) !important;
  backdrop-filter: var(--st-glass-blur);
}

html.ipay-twin body .modal-header,
html.ipay-twin body .modal-footer {
  border-color: var(--st-border) !important;
}

html.ipay-twin body .dropdown-menu {
  background: var(--st-surface-solid) !important;
  border: 1px solid var(--st-border) !important;
  color: var(--st-text) !important;
}

html.ipay-twin body .dropdown-item {
  color: var(--st-text) !important;
}

html.ipay-twin body .dropdown-item:hover,
html.ipay-twin body .dropdown-item:focus {
  background: rgba(79, 172, 254, 0.12) !important;
  color: var(--st-cyan) !important;
}

/* DataTables chrome */
html.ipay-twin body .dataTables_wrapper .dataTables_length,
html.ipay-twin body .dataTables_wrapper .dataTables_filter,
html.ipay-twin body .dataTables_wrapper .dataTables_info,
html.ipay-twin body .dataTables_wrapper .dataTables_paginate {
  color: var(--st-text-muted) !important;
}

html.ipay-twin body .dataTables_wrapper .dataTables_filter input {
  background: var(--st-surface-2) !important;
  border: 1px solid var(--st-border) !important;
  color: var(--st-text) !important;
  border-radius: 10px;
}

html.ipay-twin body .page-link {
  background: var(--st-surface) !important;
  border-color: var(--st-border) !important;
  color: var(--st-text) !important;
}

html.ipay-twin body .page-item.active .page-link {
  background: linear-gradient(135deg, var(--st-blue), var(--st-cyan)) !important;
  border-color: transparent !important;
  color: #04101f !important;
}

/* Select2 */
html.ipay-twin body .select2-container--default .select2-selection--single,
html.ipay-twin body .select2-container--default .select2-selection--multiple {
  background: var(--st-surface-2) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: 12px !important;
  min-height: 38px;
}

html.ipay-twin body .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--st-text) !important;
}

html.ipay-twin body .select2-dropdown {
  background: var(--st-surface-solid) !important;
  border: 1px solid var(--st-border) !important;
  color: var(--st-text) !important;
}

html.ipay-twin body .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: rgba(79, 172, 254, 0.2) !important;
  color: var(--st-cyan) !important;
}

/* Nav tabs / pills on inner pages */
html.ipay-twin body .nav-tabs {
  border-color: var(--st-border) !important;
}

html.ipay-twin body .nav-tabs .nav-link {
  color: var(--st-text-muted) !important;
  border-radius: 10px 10px 0 0 !important;
}

html.ipay-twin body .nav-tabs .nav-link.active {
  background: var(--st-surface) !important;
  border-color: var(--st-border) var(--st-border) transparent !important;
  color: var(--st-cyan) !important;
}

/* Breadcrumb / page title strip (non-twin topbar pages) */
html.ipay-twin body .page-title-box {
  color: var(--st-text);
}

html.theme-dark.ipay-twin body .bg-soft-primary,
html.theme-dark.ipay-twin body .alert-light {
  background: var(--st-surface-2) !important;
  color: var(--st-text) !important;
  border-color: var(--st-border) !important;
}

/* Footer */
html.ipay-twin body .footer {
  background: transparent !important;
  color: var(--st-text-muted) !important;
  border-top: 1px solid var(--st-border) !important;
}