/* =========================================================
   PSP Admin — app-specific tweaks over Tabler
   Tabler drives the design system; this file only adds the
   font, the brand mark, and a few app helpers.
   ========================================================= */

:root {
  --tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
}

/* Always reserve the vertical scrollbar's space so the page width doesn't jump when content height
   changes (e.g. switching wizard tabs where one pane needs a scrollbar and the other doesn't). */
html {
  scrollbar-gutter: stable;
}

body {
  font-family: var(--tblr-font-sans-serif);
}

/* Wider container for merchant pages (sidebar + wide datagrids). Capped so it never sprawls on
   ultra-wide monitors, but noticeably roomier than container-xl (~1320px). */
.container-wide {
  width: 100%;
  max-width: 1720px;
  margin-inline: auto;
  padding-inline: var(--tblr-page-padding-x, 1rem);
}
/* Tabler only flex-rows its known container classes inside the navbar; teach it about ours,
   otherwise the brand / nav / user chip stack vertically. */
.navbar > .container-wide {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}

/* Required-field marker: add class "required" to a .form-label to show a red asterisk. */
.form-label.required::after {
  content: " *";
  color: var(--tblr-danger, #d63939);
  font-weight: 600;
}

/* Merchant logo upload — dashed dropzone that previews the image (or initials). */
.logo-dropzone {
  width: 100%;
  min-height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--tblr-border-color, #ced4da);
  border-radius: 12px;
  background-color: var(--tblr-bg-surface-secondary, #f8fafc);
  background-size: cover;
  background-position: center;
  color: var(--tblr-secondary, #6c757d);
  font-weight: 600;
  font-size: 1.75rem;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.logo-dropzone:hover {
  border-color: var(--tblr-primary, #206bc4);
  color: var(--tblr-primary, #206bc4);
  background-color: var(--tblr-primary-lt, #eaf1fb);
}
/* When it holds an image or initials, drop the dashed frame for a clean tile. */
.logo-dropzone.is-filled {
  border-style: solid;
  border-color: var(--tblr-border-color, #ced4da);
  color: #fff;
}

/* Sidebar brand lockup */
.navbar-brand .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 6px;
  background: var(--tblr-primary, #206bc4);
  color: #fff;
  font-size: 0.95rem;
}
.navbar-brand a { color: inherit; }

/* Financial figures line up and read as data */
.font-tabular,
.amount,
.currency-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Monospace ids/codes stay compact and legible */
code {
  font-size: 0.85em;
}

/* ---------------------------------------------------------
   Compat layer: map the handful of custom classes the views
   still use (from the retired list.css/forms.css) onto a
   Tabler-compatible look, so pages stay polished without
   editing every view. Phase 2 migrates these to native
   Tabler components per page.
   --------------------------------------------------------- */

.dd-mono,
.list-mono {
  font-family: var(--tblr-font-monospace, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.8125rem;
}

/* Status pills — soft-filled, the fintech "status" cue */
.dd-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.dd-pill--success { background: #eaf7ec; color: #25943a; }
.dd-pill--info    { background: #e9f3fb; color: #2f80c9; }
.dd-pill--warning { background: #fff4e0; color: #b5750a; }
.dd-pill--danger  { background: #fceaea; color: #b52d2d; }
.dd-pill--neutral,
.dd-pill--na      { background: #f1f3f5; color: #5c6873; }

/* Subtitle under a page title */
.page-subtitle {
  color: var(--tblr-secondary, #667382);
  font-size: 0.875rem;
  margin: 0.25rem 0 0;
}

/* Page title icon spacing */
.page-title i { margin-right: 0.4rem; }

/* Sidebar section headings (aligned with the nav links above/below them) */
.navbar-vertical .nav-heading {
  padding: 0.85rem 1rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a93a2;
  list-style: none;
}

/* In-page breadcrumb (compat for the retired list/forms css) */
.page-breadcrumb { margin-top: 0.35rem; }
.breadcrumb-modern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--tblr-secondary, #667382);
}
.breadcrumb-modern li { display: inline-flex; align-items: center; }
.breadcrumb-modern a { color: var(--tblr-primary, #206bc4); text-decoration: none; }
.breadcrumb-modern a:hover { text-decoration: underline; }
.breadcrumb-modern .active { color: var(--tblr-secondary, #667382); }
.breadcrumb-modern i { font-size: 0.72rem; opacity: 0.55; }

/* Form sections (compat for the retired forms.css) */
.co-section { margin-bottom: 1.5rem; }
.co-section-head {
  font-weight: 600;
  font-size: 0.95rem;
  color: #1d273b;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
}
.co-section-head i { margin-right: 0.4rem; color: var(--tblr-primary, #206bc4); }

/* Contextual merchant left menu: follows scroll on tall pages */
.merchant-nav {
  position: sticky;
  top: 1rem;
}
.merchant-nav .list-group-item i { width: 1.15rem; text-align: center; opacity: 0.85; }
@media (max-width: 767.98px) {
  .merchant-nav { position: static; }
}

/* ------------------------------------------------------------------------------------------------
   Toasts (Views/Shared/_Toast.cshtml + js/toast.js).

   Tabler's .toast-container is position:absolute; the utility classes on the element make it fixed.
   What is left is the width (Tabler's 350px is tight for a problem `detail` plus a cor_ id), the
   entrance, and the fade js/toast.js triggers on dismissal.
   ------------------------------------------------------------------------------------------------ */
.toast-app {
  --tblr-toast-max-width: 26rem;
  --tblr-toast-bg: var(--tblr-body-bg, #fff);
  border-left-width: 3px;
  animation: toast-in 0.18s ease-out;
}
.toast-app .toast-body { word-break: break-word; }
.toast-app .toast-ids {
  font-size: 0.6875rem;
  line-height: 1.5;
}
.toast-app .toast-ids code { font-size: 0.6875rem; }

.toast-app.toast-leaving {
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.2s linear, transform 0.2s ease-in;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .toast-app { animation: none; }
  .toast-app.toast-leaving { transition: none; }
}

/* Merchant sidebar — collapsible Configuration groups.
   The group header is a Bootstrap collapse toggle, so its state is readable from aria-expanded
   and nothing here needs JavaScript. */
.merchant-nav-group { cursor: pointer; font-weight: 500; }
.merchant-nav-group:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: -2px; }

/* The caret follows the group, pointing down when open. Sized against the row rather than the
   icon column so it sits flush right and does not inherit the 1.15rem icon width above. */
.merchant-nav-group .merchant-nav-caret {
    width: auto;
    opacity: 0.55;
    transition: transform 0.15s ease-in-out;
}
.merchant-nav-group[aria-expanded="false"] .merchant-nav-caret { transform: rotate(-90deg); }

/* Sub-items are indented so the group they belong to is obvious when several are open at once. */
.merchant-nav-sub .list-group-item { padding-left: 2rem; font-size: 0.875rem; }