/* tpsupport · Glass & tilt theme (stage 1: shell + shared components).
   Loaded last by php/partials/layout/_head.php so it wins over AdminLTE 4, AdminLTE 3.2
   and Bootstrap. Design source: docs/ui-mockups (variant C2).
   Light theme only for now; dark mode comes with the stack clean-up. */

:root {
  --tp-font: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --tp-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --tp-navy: #003b6f; --tp-navy-2: #002a50; --tp-navy-3: #001d38;
  --tp-yellow: #ffc20e; --tp-yellow-2: #d99f00;
  --tp-blue: #005298;
  --tp-bg: #e8eef6;
  --tp-surface: #ffffff; --tp-surface-2: #f5f8fb;
  --tp-glass: rgba(255,255,255,.78); --tp-glass-2: rgba(255,255,255,.5); --tp-glass-line: rgba(255,255,255,.8);
  --tp-line: #dfe6ee; --tp-line-strong: #c7d1dd; --tp-hover: rgba(0,82,152,.06);
  --tp-text: #0f1f33; --tp-text-2: #34465c; --tp-muted: #5d6e83;
  --tp-ok: #17803f; --tp-warn: #a86400; --tp-bad: #c3322d;
  --tp-r-card: 18px; --tp-r-ctl: 12px;
  --tp-shadow: 0 10px 30px rgba(0,30,60,.10), inset 0 1px 0 rgba(255,255,255,.55);
  --tp-shadow-pop: 0 24px 48px rgba(0,30,60,.25);
  --tp-side-w: 264px; --tp-side-r: 72px;
  --lte-sidebar-width: 264px;
  color-scheme: light;
}

/* ---------- page ---------- */
body {
  font-family: var(--tp-font) !important;
  color: var(--tp-text);
  background:
    radial-gradient(900px 600px at 85% -5%, rgba(0,82,152,.22), transparent 60%),
    radial-gradient(700px 520px at 10% 110%, rgba(255,194,14,.18), transparent 60%),
    var(--tp-bg) !important;
  background-attachment: fixed !important;
}
body a { color: var(--tp-blue); }
.app-wrapper { background: transparent; }
.app-main { background: transparent; }
.app-main .app-content { padding: 0 24px 32px; }
code, kbd, pre, samp, .font-monospace, .small-mono { font-family: var(--tp-mono); }
.table, .tabular-nums, td { font-variant-numeric: tabular-nums; }

/* ---------- sidebar ---------- */
.app-sidebar.tp-side { background: transparent; box-shadow: none; padding-right: 7px; border: 0; }
.app-sidebar.tp-side::before { content: ""; position: absolute; inset: 0; border-radius: 0 var(--tp-side-r) 0 0; background: linear-gradient(180deg, var(--tp-yellow), var(--tp-yellow-2)); z-index: -1; }
@media (min-width: 992px) {
  .sidebar-expand-lg .app-sidebar.tp-side { position: sticky; top: 0; height: 100vh; max-height: 100vh; align-self: start; }
}
.tp-side-in {
  position: relative; height: 100%; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
  color: #d6e2f0; background: linear-gradient(170deg, var(--tp-navy) 0%, var(--tp-navy-2) 55%, var(--tp-navy-3) 100%);
  border-radius: 0 var(--tp-side-r) 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 6px 0 24px rgba(0,20,40,.25);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.tp-brand { position: sticky; top: 0; z-index: 1; display: grid; gap: 4px; padding: 28px 24px 22px; margin-bottom: -6px; text-decoration: none;
  background: linear-gradient(180deg, var(--tp-navy) calc(100% - 18px), transparent); }
.tp-brand img { width: 138px; height: auto; }
.tp-brand span { font: 600 11px var(--tp-font); letter-spacing: .16em; text-transform: uppercase; color: var(--tp-yellow); }
.tp-side-search { display: flex; align-items: center; gap: 10px; margin: 4px 16px 8px; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(255,255,255,.78); font: inherit; font-size: .92rem; cursor: pointer; text-align: left; }
.tp-side-search:hover { background: rgba(255,255,255,.1); color: #fff; }
.tp-side-search span { flex: 1; }
.tp-side-search kbd, .tp-cmdk kbd, .tp-palette kbd { font: 600 11px var(--tp-mono); padding: 1px 6px; border-radius: 5px; border: 1px solid rgba(0,0,0,.15); border-bottom-width: 2px; background: rgba(255,255,255,.6); color: var(--tp-text-2); box-shadow: none; }
.tp-side-search kbd { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.75); }
.tp-nav { flex: 1; padding: 0 12px 12px; }
.tp-nav-group { margin-top: 8px; }
.tp-nav-h { font: 600 10.5px var(--tp-font); letter-spacing: .14em; text-transform: uppercase; color: rgba(214,226,240,.5); padding: 10px 12px 4px; }
.tp-nav-i { position: relative; display: flex; align-items: center; gap: 11px; padding: 7px 12px; border-radius: 12px; color: #d6e2f0 !important; text-decoration: none; font-size: .93rem; line-height: 1.3; }
.tp-nav-i > i { font-size: 1.05rem; width: 18px; text-align: center; opacity: .85; }
.tp-nav-i > span { flex: 1; min-width: 0; }
.tp-nav-i:hover { background: rgba(255,255,255,.07); color: #fff !important; }
.tp-nav-i:focus-visible { outline: 2px solid var(--tp-yellow); outline-offset: 1px; }
.tp-nav-i.is-active { color: #fff !important; font-weight: 600; background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(0,0,0,.25); }
.tp-nav-i.is-active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--tp-yellow); box-shadow: 0 0 12px var(--tp-yellow); }
.tp-nav-i.is-active > i { color: var(--tp-yellow); opacity: 1; }
.tp-tag-admin { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; border: 1px solid currentColor; color: #93a8c2; opacity: .75; }
.tp-side-foot { position: sticky; bottom: 0; z-index: 1; margin-top: auto; padding: 22px 16px 20px;
  background: linear-gradient(180deg, transparent, var(--tp-navy-3) 18px); }
.tp-env { display: flex; align-items: center; gap: 8px; font: 700 11px var(--tp-mono); letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border-radius: 10px; }
.tp-env .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 25%, transparent); }
.tp-env.is-prod { color: var(--tp-yellow); background: rgba(255,194,14,.12); }
.tp-env.is-dev { color: #ff8f86; background: rgba(240,90,80,.14); }

/* ---------- header ---------- */
.app-header.tp-top { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 24px; background: rgba(232,238,246,.72); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid rgba(255,255,255,.7); z-index: 1039; }
.tp-icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--tp-glass-line); background: var(--tp-glass); color: var(--tp-text); box-shadow: var(--tp-shadow); cursor: pointer; font-size: 1.2rem; }
.tp-icon-btn:hover { background: #fff; }
.tp-trail { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .9rem; color: var(--tp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-trail span { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .75rem; color: var(--tp-blue); }
.tp-trail i { font-size: .7rem; }
.tp-trail a { color: var(--tp-text); font-weight: 600; text-decoration: none; }
.tp-cmdk { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 1 400px; min-width: 0; height: 40px; padding: 0 10px 0 14px; border-radius: 12px; border: 1px solid var(--tp-glass-line); background: var(--tp-glass); box-shadow: var(--tp-shadow); color: var(--tp-muted); font: inherit; font-size: .92rem; cursor: pointer; }
.tp-cmdk:hover { background: #fff; color: var(--tp-text); }
.tp-cmdk span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-user-btn { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--tp-glass-line); background: var(--tp-glass); box-shadow: var(--tp-shadow); color: var(--tp-text) !important; text-decoration: none; font-weight: 600; font-size: .9rem; }
.tp-user-btn .bi-chevron-down { font-size: .7rem; color: var(--tp-muted); }
.user-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--tp-blue), var(--tp-navy)); color: #fff; font-weight: 700; line-height: 1; text-transform: uppercase; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-avatar-sm { width: 2rem; height: 2rem; font-size: .75rem; box-shadow: 0 0 0 2px var(--tp-yellow); }
.user-avatar-lg { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
@media (max-width: 991.98px) {
  .app-header.tp-top { padding: 8px 16px; gap: 10px; }
  .tp-cmdk { flex: 0 0 40px; width: 40px; padding: 0; justify-content: center; }
  .tp-cmdk span, .tp-cmdk kbd { display: none; }
  .tp-user-name, .tp-user-btn .bi-chevron-down { display: none; }
  .tp-user-btn { padding: 3px; }
  .app-main .app-content { padding: 0 12px 24px; }
}
@media (min-width: 992px) { .tp-menu-btn { display: none; } }

/* ---------- search palette ---------- */
.tp-palette { position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgba(0,26,50,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tp-palette-box { width: min(640px, 100%); border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.92); border: 1px solid var(--tp-glass-line); box-shadow: var(--tp-shadow-pop); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.tp-palette-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--tp-line); font-size: 1.1rem; color: var(--tp-muted); }
.tp-palette-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 1.05rem var(--tp-font); color: var(--tp-text); }
.tp-palette-scope { display: flex; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--tp-line); overflow-x: auto; }
.tp-chip { border: 1px solid var(--tp-line-strong); background: #fff; color: var(--tp-text-2); border-radius: 999px; padding: 3px 12px; font: 500 .84rem var(--tp-font); white-space: nowrap; cursor: pointer; }
.tp-chip.is-on { background: var(--tp-navy); border-color: var(--tp-navy); color: #fff; }
.tp-palette-res { padding: 6px; max-height: 52vh; overflow: auto; }
.tp-pr-h { font: 700 .7rem var(--tp-font); letter-spacing: .08em; text-transform: uppercase; color: var(--tp-muted); padding: 10px 10px 4px; }
.tp-pr { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; color: var(--tp-text) !important; text-decoration: none; }
.tp-pr > i { color: var(--tp-blue); }
.tp-pr span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-pr small { color: var(--tp-muted); margin-left: 6px; }
.tp-pr.is-on, .tp-pr:hover { background: var(--tp-hover); }
.tp-pr-empty { padding: 18px 12px; color: var(--tp-muted); text-align: center; }
.tp-palette-foot { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 16px; border-top: 1px solid var(--tp-line); font-size: .78rem; color: var(--tp-muted); }

/* ---------- page title (each page's own h3 in .app-content-header) ---------- */
.app-main .app-content-header { padding: 22px 24px 10px; }
.app-content-header h3, .app-content-header .h3 { font: 800 clamp(1.5rem, 2.6vw, 2.1rem)/1.15 var(--tp-font); font-stretch: 86%; letter-spacing: -.01em; color: var(--tp-text); }
.app-content-header h3 small { font-size: .5em; font-weight: 500; font-stretch: 100%; color: var(--tp-muted); }
.app-content-header .breadcrumb { display: none; } /* the header trail replaces these */
@media (max-width: 991.98px) { .app-main .app-content-header { padding: 16px 12px 6px; } }

/* ---------- cards: frosted glass ---------- */
.app-main .card {
  background: var(--tp-glass) !important;
  border: 1px solid var(--tp-glass-line) !important;
  border-radius: var(--tp-r-card) !important;
  box-shadow: var(--tp-shadow) !important;
  color: var(--tp-text);
  /* no backdrop-filter here: it would make a card the containing block for any
     position:fixed child, and several pages keep their Bootstrap modals inside cards */
}
.app-main .card.card-outline, .app-main .card[class*="card-outline"] { border-top: 1px solid var(--tp-glass-line) !important; }
.app-main .card > .card-header:not([class*="bg-"]) { background: transparent !important; border-bottom: 1px solid var(--tp-line) !important; padding: 14px 20px; border-radius: var(--tp-r-card) var(--tp-r-card) 0 0 !important; color: var(--tp-text) !important; }
.app-main .card-title { font-weight: 700; font-size: 1.05rem; color: var(--tp-text); }
.app-main .card-body { padding: 18px 20px; }
.app-main .card > .card-footer { background: var(--tp-glass-2) !important; border-top: 1px solid var(--tp-line) !important; border-radius: 0 0 var(--tp-r-card) var(--tp-r-card) !important; }
/* the dashboard's plain "border rounded p-3" tiles */
.app-main .border.rounded.p-3 { background: var(--tp-glass); border: 1px solid var(--tp-glass-line) !important; border-radius: var(--tp-r-card) !important; box-shadow: var(--tp-shadow); }

/* ---------- tilt (JS in assets/js/tp-glass.js) ---------- */
[data-tilt] { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; will-change: transform; position: relative; }
[data-tilt].is-tilting { transition: transform .06s linear, box-shadow .2s; box-shadow: 0 30px 50px rgba(0,30,60,.2), inset 0 1px 0 rgba(255,255,255,.5) !important; }
[data-tilt]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.45), transparent 45%); mix-blend-mode: soft-light; }
[data-tilt].is-tilting::after { opacity: 1; }

/* ---------- tables ---------- */
.app-main .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(0,59,111,.03); --bs-table-hover-bg: var(--tp-hover); background: transparent; color: var(--tp-text); }
.app-main .table > thead > tr > th, .app-main .table thead th { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tp-muted); background: var(--tp-glass-2) !important; border-bottom: 1px solid var(--tp-line) !important; white-space: nowrap; }
.app-main .table td, .app-main .table th { border-color: var(--tp-line); vertical-align: middle; }
.app-main .table-light, .app-main .thead-light th { --bs-table-bg: transparent; }

/* ---------- controls ---------- */
.app-main .btn { border-radius: var(--tp-r-ctl); font-weight: 600; }
.app-main .btn-warning, .btn-warning { background: linear-gradient(180deg, #ffd54a, var(--tp-yellow)) !important; border-color: rgba(217,159,0,.55) !important; color: #0f1f33 !important; box-shadow: 0 6px 16px rgba(255,194,14,.3), inset 0 1px 0 rgba(255,255,255,.6); }
.app-main .btn-primary, .btn-primary { background: var(--tp-blue) !important; border-color: var(--tp-blue) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(0,82,152,.22); }
.app-main .btn-primary:hover { background: var(--tp-navy) !important; }
.app-main .btn-outline-secondary, .app-main .btn-light, .app-main .btn-default { background: var(--tp-glass) !important; border-color: var(--tp-line-strong) !important; color: var(--tp-text) !important; }
.app-main .form-control, .app-main .form-select, .app-main .custom-select { border-radius: var(--tp-r-ctl); border-color: var(--tp-line-strong); background-color: rgba(255,255,255,.75); }
.app-main .form-control:focus, .app-main .form-select:focus { border-color: var(--tp-blue); box-shadow: 0 0 0 3px rgba(0,82,152,.15); background-color: #fff; }
.app-main .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.app-main .input-group > .btn:last-child, .app-main .input-group > .input-group-append > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.app-main .badge { border-radius: 999px; font-weight: 600; letter-spacing: .01em; }
.app-main .alert { border-radius: 14px; border-width: 1px; }
.app-main .nav-tabs { border-bottom-color: var(--tp-line); }
.app-main .nav-tabs .nav-link { border-radius: 12px 12px 0 0; color: var(--tp-text-2); }
.app-main .nav-tabs .nav-link.active { background: var(--tp-glass); border-color: var(--tp-line) var(--tp-line) transparent; color: var(--tp-text); font-weight: 600; }
.app-main .nav-pills .nav-link { border-radius: 12px; color: var(--tp-text-2); }
.app-main .nav-pills .nav-link.active { background: var(--tp-navy); color: #fff; }
.dropdown-menu { border-radius: 14px; border: 1px solid var(--tp-line); box-shadow: var(--tp-shadow-pop) !important; padding: 6px; }
.dropdown-item { border-radius: 10px; }
.dropdown-item.active, .dropdown-item:active { background: var(--tp-navy); }
.modal-content { border-radius: 20px; border: 1px solid var(--tp-glass-line); box-shadow: var(--tp-shadow-pop); }

/* ---------- footer ---------- */
.app-footer { background: transparent !important; border-top: 0 !important; color: var(--tp-muted); padding: 14px 24px 22px; }

@media (prefers-reduced-motion: reduce) {
  [data-tilt], .tp-palette { transition: none !important; }
}

/* badges inside a page title (e.g. Peach "Live · prod data") keep badge size */
.app-main .app-content-header h3 .badge { font-size: .8rem; font-weight: 700; font-stretch: 100%; letter-spacing: .02em; vertical-align: middle; padding: .4em .8em; }
/* phones: the opened menu sits above the sticky header */
@media (max-width: 991.98px) { .app-sidebar.tp-side { z-index: 1045; } }

/* ---------- shared components (stage 3; JS in tp-glass.js) ---------- */
.tp-toasts { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 2100; display: grid; gap: 10px; width: min(400px, calc(100% - 32px)); }
.tp-toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 14px; background: rgba(255,255,255,.95); border: 1px solid var(--tp-line); border-left: 5px solid var(--tone); box-shadow: var(--tp-shadow-pop); color: var(--tp-text); font-size: .93rem; animation: tp-in .2s ease-out; transition: opacity .25s, transform .25s; }
.tp-toast > i { color: var(--tone); font-size: 1.1rem; margin-top: 1px; }
.tp-toast span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tp-toast button { border: 0; background: none; color: var(--tp-muted); padding: 0 2px; cursor: pointer; }
.tp-toast.is-out { opacity: 0; transform: translateY(6px); }
.tp-toast.is-ok { --tone: var(--tp-ok); } .tp-toast.is-info { --tone: var(--tp-blue); } .tp-toast.is-warn { --tone: var(--tp-warn); } .tp-toast.is-bad { --tone: var(--tp-bad); }
@keyframes tp-in { from { opacity: 0; transform: translateY(8px); } }

.tp-modal { position: fixed; inset: 0; z-index: 2050; display: grid; place-items: center; padding: 16px; background: rgba(0,26,50,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tp-modal-box { width: min(480px, 100%); border-radius: 20px; background: #fff; box-shadow: var(--tp-shadow-pop); overflow: hidden; color: var(--tp-text); animation: tp-in .18s ease-out; }
.tp-modal-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 8px; }
.tp-modal-head h2 { font: 700 1.1rem/1.3 var(--tp-font); margin: 0; }
.tp-modal-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem; }
.tp-modal-ic.is-bad { color: var(--tp-bad); background: #fce6e5; } .tp-modal-ic.is-info { color: var(--tp-blue); background: #e6eff9; }
.tp-modal-body { padding: 4px 22px 16px 74px; color: var(--tp-text-2); font-size: .95rem; max-height: 50vh; overflow: auto; }
.tp-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; background: var(--tp-surface-2); border-top: 1px solid var(--tp-line); flex-wrap: wrap; }
.tp-modal-foot .btn { border-radius: var(--tp-r-ctl); font-weight: 600; min-width: 96px; }

.btn.tp-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.tp-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.1em; height: 1.1em; margin: -.55em 0 0 -.55em; border: 2px solid #0f1f33; border-right-color: transparent; border-radius: 50%; animation: tp-spin .7s linear infinite; }
.btn-primary.tp-busy::after, .btn-danger.tp-busy::after, .btn-success.tp-busy::after { border-color: #fff; border-right-color: transparent; }
@keyframes tp-spin { to { transform: rotate(360deg); } }
.tp-spin { display: inline-block; animation: tp-spin 1s linear infinite; }

table[data-tp-sort] thead th:not([data-tp-nosort]) { cursor: pointer; user-select: none; }
table[data-tp-sort] thead th:not([data-tp-nosort])::after { content: "\2195"; margin-left: 4px; opacity: .3; font-size: .9em; }
table[data-tp-sort] thead th[aria-sort="ascending"]::after { content: "\2191"; opacity: 1; color: var(--tp-blue); }
table[data-tp-sort] thead th[aria-sort="descending"]::after { content: "\2193"; opacity: 1; color: var(--tp-blue); }
@media (prefers-reduced-motion: reduce) { .tp-toast, .tp-modal-box, .tp-spin, .btn.tp-busy::after { animation: none !important; } }

/* ---------- dashboard (stage 4) ---------- */
.app-main .card.tp-dash { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.app-main .card.tp-dash > .card-header { border: 0 !important; padding: 0 0 6px !important; }
.app-main .card.tp-dash > .card-body { padding: 8px 0 0; }
.tp-dash .nav-tabs { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--tp-glass-line); border-radius: 14px; background: var(--tp-glass-2); }
.tp-dash .nav-tabs .nav-link { border: 0 !important; border-radius: 10px !important; padding: 6px 16px; font-weight: 600; color: var(--tp-text-2); margin: 0; }
.tp-dash .nav-tabs .nav-link.active { background: #fff !important; color: var(--tp-text); box-shadow: 0 4px 12px rgba(0,30,60,.12); }
.tp-dash h6 { font: 700 1.05rem var(--tp-font); font-stretch: 90%; color: var(--tp-text) !important; margin: 18px 0 10px !important; }
.tp-dash .tab-pane iframe { border-radius: var(--tp-r-card); background: #fff; box-shadow: var(--tp-shadow); }
.app-main .app-content-header p.text-muted { margin-top: 4px; }

/* ---------- sign-in, register, password pages (body.login-page) ---------- */
body.login-page {
  background:
    radial-gradient(900px 700px at 85% 5%, rgba(40,120,210,.55), transparent 60%),
    radial-gradient(700px 600px at 5% 100%, rgba(255,194,14,.32), transparent 60%),
    linear-gradient(160deg, #002a50, #001428) !important;
  background-attachment: fixed !important;
  min-height: 100vh; display: grid; place-items: center; padding: 32px 16px;
  /* Fixed column: a content-sized one made the box's width follow its contents
     (register.php shows or hides fields per registration type). */
  grid-template-columns: min(420px, 100%); justify-content: center;
}
body.login-page .login-box, body.login-page .register-box { width: 100%; margin: 0; }
body.login-page .card {
  background: #fff !important; border: 1px solid rgba(255,255,255,.7) !important; border-radius: 24px !important;
  box-shadow: 0 30px 60px rgba(0,10,30,.45), 0 0 0 6px rgba(255,255,255,.08) !important; overflow: hidden;
}
body.login-page .card-header { background: transparent !important; border-bottom: 0 !important; padding: 30px 30px 0 !important; }
body.login-page .card-header img { margin-bottom: 4px !important; }
body.login-page .card-body { padding: 18px 30px 28px !important; }
body.login-page .login-box-msg, body.login-page .register-box-msg { padding: 0 !important; font: 800 1.6rem/1.2 var(--tp-font); font-stretch: 86%; color: var(--tp-text); text-align: left !important; margin-bottom: 16px; }
body.login-page .form-control { border-radius: var(--tp-r-ctl) 0 0 var(--tp-r-ctl); border-color: var(--tp-line-strong); }
body.login-page .input-group-text { border-radius: 0 var(--tp-r-ctl) var(--tp-r-ctl) 0; background: var(--tp-surface-2); color: var(--tp-muted); border-color: var(--tp-line-strong); }
body.login-page .form-control:focus { border-color: var(--tp-blue); box-shadow: 0 0 0 3px rgba(0,82,152,.15); }
body.login-page .btn-primary { background: linear-gradient(180deg, #ffd54a, var(--tp-yellow)) !important; border-color: rgba(217,159,0,.55) !important; color: #0f1f33 !important; font-weight: 700; padding: .7rem; border-radius: var(--tp-r-ctl); box-shadow: 0 8px 20px rgba(255,194,14,.35), inset 0 1px 0 rgba(255,255,255,.6); }
body.login-page .alert { border-radius: 14px; }
body.login-page a { color: var(--tp-blue); }
.tp-auth-env { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tp-line); font-size: .85rem; color: var(--tp-muted); }
.tp-auth-env b { font: 700 11px var(--tp-mono); letter-spacing: .08em; padding: 3px 7px; border-radius: 6px; }
.tp-auth-env b.is-prod { background: var(--tp-yellow); color: #0f1f33; } .tp-auth-env b.is-dev { background: #f05a50; color: #fff; }

/* ---------- seller setup results (partials/seller-setup/_setupResults_render.php) ---------- */
.tp-setup-sum { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tp-results { list-style: none; margin: 0 0 12px; padding: 0; }
.tp-results li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--tp-line); }
.tp-results li:last-child { border-bottom: 0; }
.tp-results-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; color: var(--tone); background: var(--tone-bg); }
.tp-results-name { flex: 1; min-width: 0; font-weight: 600; }
.tp-results-badge { font-size: .78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; color: var(--tone); background: var(--tone-bg); white-space: nowrap; }
.tp-results li.is-ok   { --tone: var(--tp-ok);   --tone-bg: #e0f3e7; }
.tp-results li.is-bad  { --tone: var(--tp-bad);  --tone-bg: #fce6e5; }
.tp-results li.is-warn { --tone: var(--tp-warn); --tone-bg: #fff1d3; }
.tp-results li.is-mute { --tone: #6b7a8c;        --tone-bg: #eaeef3; }
.tp-results-seller { font: 700 .95rem var(--tp-font); margin: 14px 0 4px; }

/* coloured card headers (e.g. Peach "Charged, no tickets" bg-danger) keep their colour and white text */
.app-main .card > .card-header[class*="bg-"] { border-radius: var(--tp-r-card) var(--tp-r-card) 0 0 !important; border-bottom: 0 !important; padding: 14px 20px; }
.app-main .card > .card-header[class*="bg-"] .card-title { color: inherit; }

/* ---------- status borders on glass cards (Peach KPIs and anything using border-*) ---------- */
.app-main .card.border-danger  { box-shadow: inset 0 4px 0 var(--tp-bad), var(--tp-shadow) !important; }
.app-main .card.border-warning { box-shadow: inset 0 4px 0 var(--tp-yellow-2), var(--tp-shadow) !important; }
.app-main .card.border-success { box-shadow: inset 0 4px 0 var(--tp-ok), var(--tp-shadow) !important; }
.app-main .card.border-primary { box-shadow: inset 0 4px 0 var(--tp-blue), var(--tp-shadow) !important; }
.pa-root .pa-kpi .pa-kpi-value { font: 800 1.7rem/1.15 var(--tp-font); font-stretch: 86%; }
.pa-root .pa-kpi .pa-kpi-label { font-weight: 700; }