/* ==========================================================================
   T3RMINAL — Brand layer (override)
   High-end corporate rebrand: Graphite + Emerald, light theme.
   Loaded AFTER /assets/css/app.css so these rules win the cascade.
   ========================================================================== */

:root {
    --brand-emerald: #059669;
    --brand-emerald-600: #059669;
    --brand-emerald-700: #047857;
    --brand-emerald-500: #10b981;
    --brand-emerald-tint: #ecfdf5;
    --brand-emerald-ring: rgba(5, 150, 105, 0.28);

    --brand-graphite: #14171c;   /* sidebar / dark panels */
    --brand-graphite-2: #1b1f26; /* elevated dark */
    --brand-graphite-3: #232833; /* borders on dark */

    --brand-page: #f6f7f8;       /* app background */
    --brand-card: #ffffff;
    --brand-border: #e6e8eb;
    --brand-ink: #0f1419;        /* headings */
    --brand-ink-2: #5b6470;      /* secondary text */
    --brand-radius: 14px;
}

/* ---- Typography polish -------------------------------------------------- */
body,
.font-Inter,
.font-inter {
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .card-title, .card-header .card-title {
    letter-spacing: -0.02em;
}

.card-title {
    font-weight: 600 !important;
    color: var(--brand-ink) !important;
}

/* ---- Page background ---------------------------------------------------- */
body {
    background-color: var(--brand-page);
}

/* ==========================================================================
   ACCENT — emerald replaces the old dashcode blue (#4669fa)
   ========================================================================== */

.bg-primary-500 { background-color: var(--brand-emerald-600) !important; }
.text-primary-500,
.text-primary-600 { color: var(--brand-emerald-600) !important; }
.border-primary-500 { border-color: var(--brand-emerald-600) !important; }
.ring-primary-500 { --tw-ring-color: var(--brand-emerald-600) !important; }
.hover\:bg-primary-600:hover { background-color: var(--brand-emerald-700) !important; }
.hover\:text-primary-500:hover { color: var(--brand-emerald-600) !important; }

/* Primary button */
.btn-primary {
    background-color: var(--brand-emerald-600) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.18) !important;
    --tw-ring-color: var(--brand-emerald-ring) !important;
    transition: background-color .15s ease, transform .06s ease, box-shadow .15s ease;
}
.btn-primary:hover { background-color: var(--brand-emerald-700) !important; }
.btn-primary:active { transform: translateY(1px); }

/* Outline primary */
.btn-outline-primary {
    color: var(--brand-emerald-700) !important;
    border-color: var(--brand-emerald-600) !important;
}
.btn-outline-primary:hover {
    background-color: var(--brand-emerald-600) !important;
    color: #fff !important;
}

/* Dark button -> refined graphite (used e.g. on the login CTA fallback) */
.btn-dark {
    background-color: var(--brand-graphite) !important;
    color: #fff !important;
}
.btn-dark:hover { background-color: #0b0e12 !important; }

/* Links that used the old blue */
a.text-primary-500,
.text-primary-500 a { color: var(--brand-emerald-700) !important; }

/* Buttons: unified radius + weight */
.btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

/* Secondary action: the old loud orange "Share Application Link" (btn-warning)
   becomes a sober neutral secondary that pairs with the emerald primary. */
.btn-warning {
    background-color: #ffffff !important;
    color: #374151 !important;
    border: 1px solid #d7dbe0 !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
}
.btn-warning:hover {
    background-color: #f4f6f8 !important;
    color: #111827 !important;
}
.btn-warning iconify-icon { color: var(--brand-emerald-600) !important; }

/* ==========================================================================
   CARDS + INPUTS — softer, more premium
   ========================================================================== */

.card {
    border-radius: var(--brand-radius) !important;
    border: 1px solid var(--brand-border) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06) !important;
}

.form-control {
    border-radius: 10px !important;
    border-color: #dfe2e6 !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--brand-emerald-600) !important;
    box-shadow: 0 0 0 3px var(--brand-emerald-ring) !important;
    outline: none !important;
}

/* Checkboxes / radios accent */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--brand-emerald-600); }

/* Status badge helper already emerald via bg-success; keep warning/danger */

/* ==========================================================================
   SIDEBAR — graphite with emerald active state
   ========================================================================== */

.sidebar-menus,
#sidebar_menus,
.sidebar-wrapper,
.logo-segment {
    background-color: var(--brand-graphite) !important;
}
.sidebar-wrapper {
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.logo-segment {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    height: 80px;
}

/* Monochrome logo on the graphite sidebar */
.logo-segment .black_logo,
.logo-segment img {
    filter: brightness(0) invert(1);
    opacity: 0.95;
    max-height: 40px;
    width: auto;
}

/* Remove the astronaut mascot / promo block at the bottom of the sidebar */
#sidebar_bottom_wizard { display: none !important; }

/* Pin the menu list to top and the support card to the bottom of the sidebar */
#sidebar_menus {
    display: flex !important;
    flex-direction: column;
}
#sidebar_menus .sidebar-menu { flex: 0 0 auto; }

/* Branded support card where the mascot used to be */
.sidebar-brand-card {
    margin: 24px 4px 8px;
    margin-top: auto;
    padding: 18px 16px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(16,185,129,0.10), rgba(255,255,255,0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
}
.sidebar-brand-card .sbc-icon {
    width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(16,185,129,0.16);
    color: #6ee7b7; font-size: 19px; margin-bottom: 12px;
}
.sidebar-brand-card .sbc-title {
    color: #eef2f6; font-size: 14px; font-weight: 600; margin: 0 0 4px;
}
.sidebar-brand-card .sbc-sub {
    color: #8b95a1; font-size: 12px; line-height: 17px; margin: 0 0 14px;
}
.sidebar-brand-card .sbc-btn {
    display: block; text-align: center;
    background: var(--brand-emerald-600); color: #fff !important;
    font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 9px;
    transition: background-color .15s ease;
}
.sidebar-brand-card .sbc-btn:hover { background: var(--brand-emerald-700); }
.sidebar-brand-card .sbc-meta {
    margin-top: 14px; display: flex; align-items: center; gap: 7px;
    color: #6b7482; font-size: 11px; letter-spacing: .04em;
}
.sidebar-brand-card .sbc-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand-emerald-500); box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}

/* Nav items — quiet by default, single clean highlight when active */
.navItem {
    border-radius: 8px !important;
    color: #97a0ab !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    transition: background-color .15s ease, color .15s ease;
}
.navItem:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #e6eaef !important;
}
.navItem .rt-chevron,
.navItem iconify-icon[icon*="chevron"] { opacity: .5; }

/* Active state: subtle emerald tint, emerald text, thin left accent.
   Applied to the current leaf item. */
.navItem.active {
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #6ee7b7 !important;
    position: relative;
}
.navItem.active::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    height: 46%;
    width: 3px;
    border-radius: 3px;
    background: var(--brand-emerald-500);
}
.navItem.active iconify-icon,
.navItem.active svg { color: #6ee7b7 !important; }

/* Parent item that only expands a submenu: keep it calm (no filled block,
   just emerald text) so the open submenu child carries the highlight. */
.menu-item-has-children > .navItem.active:not(.pl-8),
.navItem.active[onclick] {
    background-color: transparent !important;
    color: #cdd4dc !important;
}
.navItem.active[onclick]::before { display: none; }
.navItem.active[onclick] iconify-icon { color: #cdd4dc !important; }

/* Submenu container spacing */
#submenuMerchants .navItem,
[id^="submenu"] .navItem { font-size: 13px !important; }

/* ISO selector inside sidebar */
#sidebar_menus select {
    background-color: var(--brand-graphite-2) !important;
    border: 1px solid var(--brand-graphite-3) !important;
    border-radius: 8px !important;
}

/* ==========================================================================
   TOPBAR — clean, hairline separation
   ========================================================================== */

.app-header,
header.app-header,
.dashcode-app-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--brand-border) !important;
    box-shadow: none !important;
}

/* ==========================================================================
   LOGIN — corporate split screen
   ========================================================================== */

.loginwrapper .left-column {
    background-color: var(--brand-graphite) !important;
    background-image:
        radial-gradient(1200px 400px at 15% -10%, rgba(5, 150, 105, 0.20), transparent 60%),
        radial-gradient(900px 500px at 90% 110%, rgba(16, 185, 129, 0.12), transparent 55%);
    position: relative;
}
.loginwrapper .left-column h4 {
    color: #ffffff !important;
    font-size: 34px !important;
    line-height: 42px !important;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.loginwrapper .left-column h4 span { color: #6ee7b7 !important; }

.brand-login-panel {
    position: relative;
    z-index: 2;
    max-width: 460px;
    padding: 72px 0 0 72px;
    color: #cbd3dd;
}
.brand-login-panel .brand-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6ee7b7;
    margin-bottom: 22px;
}
.brand-login-panel .brand-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--brand-emerald-500);
    display: inline-block;
}
.brand-login-panel .brand-lead {
    font-size: 34px;
    line-height: 42px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 16px;
}
.brand-login-panel .brand-sub {
    font-size: 15px;
    line-height: 24px;
    color: #93a0ad;
    max-width: 380px;
}
.brand-login-panel .brand-features {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.brand-login-panel .brand-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #cbd3dd;
}
.brand-login-panel .brand-feature iconify-icon {
    color: #6ee7b7;
    font-size: 18px;
}
.brand-login-logo { height: 34px; width: auto; margin-bottom: 40px; filter: brightness(0) invert(1); }

/* Right column form */
.auth-box h4 { font-weight: 600 !important; letter-spacing: -0.02em; }
.loginwrapper .right-column { background-color: #ffffff; }
.auth-footer { color: #9aa3af; font-size: 12px; letter-spacing: .02em; }

/* Make the sign-in CTA emerald even if it keeps btn-dark */
.auth-box form .btn-dark {
    background-color: var(--brand-emerald-600) !important;
}
.auth-box form .btn-dark:hover {
    background-color: var(--brand-emerald-700) !important;
}

/* ==========================================================================
   TABLES — consistent, aligned, calm (applies to every internal page)
   ========================================================================== */

.card-body { padding: 1.25rem 1.5rem 1.5rem !important; }

table thead th,
.table-th {
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    font-weight: 600 !important;
    color: #8a94a1 !important;
    padding: 12px 16px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--brand-border) !important;
    text-align: left;
    white-space: nowrap;
}

table tbody td,
.table-td {
    padding: 14px 16px !important;
    font-size: 14px !important;
    color: #303840 !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f0f2f4 !important;
}

table tbody tr {
    transition: background-color .12s ease;
}
table tbody tr:hover {
    background-color: #fafbfc !important;
}
table tbody tr:last-child td { border-bottom: 0 !important; }

/* Status pills / badges */
.badge, .status-badge {
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: .01em;
    padding: 4px 12px !important;
}

/* Pagination — align + brand */
.pagination,
nav[role="navigation"] .pagination { gap: 4px; }
.pagination li > *,
.pagination a,
.pagination span {
    border-radius: 8px !important;
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--brand-border) !important;
    color: #4b5563 !important;
    background: #fff !important;
    font-size: 13px;
}
.pagination .active > *,
.pagination li.active span,
.pagination .active a {
    background: var(--brand-graphite) !important;
    border-color: var(--brand-graphite) !important;
    color: #fff !important;
}

/* Select / "Show N Entries" + Search inputs alignment */
select.form-control, .dataTables_length select {
    border-radius: 8px !important;
    border: 1px solid #dfe2e6 !important;
    padding: 0 30px 0 12px !important;   /* no vertical padding → center via line-height */
    height: 42px;
    min-height: 42px;
    line-height: 40px !important;
}

/* Breadcrumb current + links */
.breadcrumb a, .text-primary-500 { color: var(--brand-emerald-700) !important; }

/* ==========================================================================
   DASHBOARD — metric cards harmonized
   ========================================================================== */

/* Neutralize the old pastel metric-card tints (cyan / peach / purple) */
.bg-\[\#E5F9FF\],
.bg-\[\#FFEDE5\],
.bg-\[\#EAE5FF\] {
    background-color: #f4f7f6 !important;
    border: 1px solid var(--brand-border);
}

/* Metric numbers + labels */
.card .text-slate-900, .card .text-2xl { color: var(--brand-ink) !important; }

/* Section footer link */
footer .text-primary-500, .site-footer a { color: var(--brand-emerald-700) !important; }

/* ==========================================================================
   MERCHANT APPLICATION WIZARD (public)
   ========================================================================== */

.maw-topbar {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 22px 16px 4px; flex-wrap: wrap;
}
.maw-topbar .maw-logo { height: 34px; width: auto; }
.maw-topbar-tag {
    font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--brand-emerald-700); background: var(--brand-emerald-tint);
    padding: 4px 12px; border-radius: 999px;
}
.maw-wrap { max-width: 560px; margin: 20px auto 48px; padding: 0 16px; }
.maw-wrap-internal { margin-top: 4px; }
.maw-card {
    background: #fff; border: 1px solid var(--brand-border); border-radius: 18px;
    box-shadow: 0 8px 40px rgba(16, 24, 40, 0.08); padding: 28px 26px 30px;
}
.maw-progress-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.maw-step-label { font-size: 13px; font-weight: 600; color: var(--brand-ink-2); }
.maw-pct { font-size: 13px; font-weight: 700; color: var(--brand-emerald-700); }
.maw-progress-track { height: 6px; background: #eef1f3; border-radius: 999px; overflow: hidden; margin-bottom: 26px; }
.maw-progress-bar { height: 100%; background: var(--brand-emerald-600); border-radius: 999px; transition: width .3s ease; }

.maw-head { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.maw-head.mt-6 { margin-top: 28px; }
.maw-ic {
    width: 40px; height: 40px; border-radius: 11px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-emerald-tint); color: var(--brand-emerald-700); font-size: 20px;
}
.maw-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--brand-ink); margin: 0; }
.maw-sub { font-size: 13px; color: var(--brand-ink-2); margin: 2px 0 0; }

.maw-label {
    display: block; font-size: 13px; font-weight: 600; color: #384049;
    margin: 16px 0 6px; letter-spacing: -0.01em;
}
.maw-step .form-control { width: 100%; border-radius: 10px !important; }
.maw-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 520px) {
    .maw-2col { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.maw-hint { font-size: 12px; color: #97a0ab; margin: 6px 0 0; }
.maw-note {
    margin: 18px 0 20px; font-size: 12.5px; color: #7a6a2f;
    background: #fdf6e3; border: 1px solid #f2e5b8; border-radius: 9px; padding: 9px 12px;
}
.maw-badge {
    display: inline-block; font-size: 11px; font-weight: 700; color: var(--brand-emerald-700);
    background: var(--brand-emerald-tint); border-radius: 999px; padding: 2px 8px; margin-left: 6px;
}
.maw-optional { font-size: 11px; font-weight: 600; color: #b98900; background: #fdf3d6; border-radius: 999px; padding: 2px 8px; margin-left: 6px; }

.maw-toggle-box { background: #f7f9fa; border: 1px solid var(--brand-border); border-radius: 12px; padding: 14px 16px; margin-top: 16px; }
.maw-toggle-q { font-size: 14px; font-weight: 600; color: var(--brand-ink); margin: 0 0 10px; }
.maw-radio { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: #384049; margin-right: 20px; cursor: pointer; }
.maw-radio input { accent-color: var(--brand-emerald-600); }

.maw-slider-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--brand-ink-2); margin: 6px 0 8px; }
.maw-slider-row b { color: var(--brand-ink); }
.maw-range { width: 100%; accent-color: var(--brand-emerald-600); }
.maw-presets { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 14px; }
.maw-preset {
    border: 1px solid var(--brand-border); background: #fff; border-radius: 11px; padding: 12px 6px;
    font-size: 13px; font-weight: 600; color: #384049; cursor: pointer; line-height: 1.25; transition: all .12s ease;
}
.maw-preset:hover { border-color: var(--brand-emerald-600); color: var(--brand-emerald-700); background: var(--brand-emerald-tint); }

.maw-btn {
    width: 100%; background: var(--brand-emerald-600); color: #fff; border: 0; border-radius: 12px;
    padding: 15px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 22px; transition: background-color .15s ease;
}
.maw-btn:hover { background: var(--brand-emerald-700); }
.maw-btn:disabled { opacity: .6; cursor: default; }
.maw-btn-green { background: #15803d; }
.maw-btn-green:hover { background: #166534; }
.maw-btn-ghost { background: #fff; border: 1px solid var(--brand-border); border-radius: 12px; padding: 15px 22px; font-weight: 600; color: #384049; cursor: pointer; margin-top: 22px; }
.maw-actions { display: flex; gap: 12px; }
.maw-actions .maw-btn { flex: 1; }
.maw-invalid { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.15) !important; }
.maw-toggle-box.maw-invalid { box-shadow: none !important; background: #fdf3f3; }
.maw-error { display: block; margin: 6px 0 0; font-size: 12.5px; font-weight: 500; color: #dc2626; }

.maw-inline-btn { float: right; font-size: 12px; font-weight: 600; color: var(--brand-emerald-700); background: none; border: 0; cursor: pointer; }

/* Pre-qual result */
.maw-result { text-align: center; padding: 20px 0 6px; }
.maw-check {
    width: 84px; height: 84px; border-radius: 50%; background: var(--brand-emerald-tint);
    color: #15803d; font-size: 44px; display: flex; align-items: center; justify-content: center; margin: 8px auto 22px;
}
.maw-result-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--brand-ink); margin: 0 0 14px; line-height: 1.2; }
.maw-result-text { font-size: 14.5px; color: var(--brand-ink-2); line-height: 1.6; max-width: 400px; margin: 0 auto 8px; }
.maw-secure { font-size: 12px; color: #97a0ab; margin-top: 16px; }
.maw-secure iconify-icon { vertical-align: -2px; }

/* SSN masked field */
.maw-ssn-wrap { position: relative; }
.maw-ssn-wrap .form-control { padding-right: 38px !important; letter-spacing: 2px; }
.maw-ssn-lock {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: #9aa3af; font-size: 17px; pointer-events: none;
}

/* ==========================================================================
   STEP WIZARD (New Merchant create form) — recolor dashcode blue → emerald
   ========================================================================== */

/* Inactive steps */
.wizard-step:not(.active) .number-box {
    background-color: #fff !important;
    color: var(--brand-emerald-700) !important;
    --tw-ring-color: var(--brand-emerald-600) !important;
}
.wizard-step:not(.active) .circle-box { color: var(--brand-emerald-700) !important; }
.wizard-step:not(.active) .bar-line { background-color: #d7f0e5 !important; }
.wizard-step:not(.passed) .bar-line2 { background-color: #d7f0e5 !important; }

/* Active / passed steps */
.wizard-step.active .number-box,
.wizard-step.passed .number-box {
    background-color: var(--brand-emerald-600) !important;
    color: #fff !important;
    --tw-ring-color: var(--brand-emerald-600) !important;
}
.wizard-step.active .bar-line,
.wizard-step.passed .bar-line,
.wizard-step.active .bar-line2,
.wizard-step.passed .bar-line2 { background-color: var(--brand-emerald-600) !important; }
.wizard-step.active .circle-box,
.wizard-step.passed .circle-box { color: var(--brand-emerald-700) !important; }

/* Breadcrumb links on this page */
.wizard .text-primary-500 { color: var(--brand-emerald-700) !important; }

/* ---- Modern, contained layout ------------------------------------------- */
/* Contain the whole card so the form doesn't float in a huge empty page. */
.wizard.card { max-width: 860px !important; margin-left: auto; margin-right: auto; }
.wizard.card .wizard-steps { max-width: 760px; margin-left: auto; margin-right: auto; }
.wizard.card .wizard-form,
.wizard.card .wizard-form-step { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; }
.wizard.card .wizard-form { margin-top: 26px; }
.wizard.card .card-header { max-width: 760px; margin-left: auto; margin-right: auto; }
.wizard.card .wizard-form-step { display: block; }
.wizard.card .wizard-form-step.hidden { display: none !important; }

/* Convert the legacy right-aligned-label rows to clean top-label fields
   so related fields can sit side by side in a grid. */
.wizard.card .input-area { display: block !important; margin-bottom: 0 !important; }
.wizard.card .input-area > label {
    min-width: 0 !important; text-align: left !important; padding-right: 0 !important;
    display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--brand-ink);
}
.wizard.card .input-area input.form-control,
.wizard.card .input-area select.form-control { max-width: none !important; width: 100%; }
.wizard.card .input-area .flex.flex-col,
.wizard.card .input-area .flex.items-center { width: 100%; max-width: none !important; }

/* Field grids used inside the edit wizard steps */
.ewz-grid,
.ewz-step-grid,
#varsheet-area { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; align-items: start; }
.ewz-full,
.ewz-step-grid > h4,
.ewz-step-grid > span,
.ewz-step-grid > .input-area.items-center,
.ewz-step-grid > #varsheet-area,
.ewz-step-grid > #discount_interchange,
.ewz-step-grid > #flat_rate_interchange { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .ewz-grid, .ewz-step-grid, #varsheet-area { grid-template-columns: 1fr; }
}
/* Center each step label under its own circle in a fixed-width box that is
   allowed to wrap — this keeps the end labels from running off the card edge
   and the rows lined up even when one label is two lines. */
.wizard.card .wizard-steps { max-width: 700px; margin-bottom: 18px; }
.wizard-step { position: relative; }
.wizard-step .circle-box {
    position: absolute; top: calc(100% + 6px); left: 22px; transform: translateX(-50%);
    width: 150px; text-align: center;
}
.wizard-step .circle-box span {
    display: block; width: auto !important; white-space: normal;
    line-height: 1.25; min-height: 2.4em;
}
/* Generous clearance so the centered step title never meets the labels. */
.wizard.card .wizard-form { margin-top: 84px !important; }

/* The active step's section title → centered header with a divider, so it
   reads as a title and never collides with the stepper labels. */
.wizard.card .wizard-form-step h4:first-of-type {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 18px !important;
    font-weight: 700;
    color: var(--brand-ink);
    letter-spacing: -0.01em;
    margin: 0 0 22px !important;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--brand-border);
}
/* Secondary sub-headings inside a step (e.g. "Pin Debit") stay left + plain */
.wizard.card .wizard-form-step h4:not(:first-of-type) {
    grid-column: 1 / -1; text-align: left; font-size: 15px !important; font-weight: 700;
    border: 0; padding: 0; margin: 10px 0 0 !important;
}

/* Radio groups: give the label breathing room and space the options out */
.wizard.card .input-area.items-center > label { margin-bottom: 12px; }
.wizard.card .basicRadio label { gap: 8px; padding: 4px 0; }
.wizard.card .basicRadio label > span:last-child { line-height: 1.2; }

/* Custom radios (dashcode .basicRadio hides the input + styles a span) */
.basicRadio input:checked + span,
.primary-radio input:checked + span {
    background-color: var(--brand-emerald-600) !important;
    --tw-ring-color: var(--brand-emerald-600) !important;
    border-color: #fff !important;
}
.basicRadio label, .primary-radio label { align-items: center; gap: 8px; }
.basicRadio span:first-of-type { border-color: #cbd5e1 !important; }

/* Radio option groups: neat rows, aligned, wrap nicely */
.wizard-form .basicRadio { display: inline-flex; }
.wizard-form .input-area.items-center .space-x-7 { gap: 20px; row-gap: 10px; }

/* Top-aligned labels + full-width fields (kills the right-side white gaps) */
.wizard-form .input-area {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin-bottom: 18px;
}
.wizard-form .input-area > label {
    min-width: 0 !important;
    width: auto !important;
    text-align: left !important;
    padding-right: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #384049 !important;
    margin-bottom: 2px;
}
.wizard-form .input-area input:not([type="radio"]):not([type="checkbox"]),
.wizard-form .input-area select,
.wizard-form .input-area textarea {
    max-width: 100% !important;
    width: 100% !important;
}
.wizard-form .input-area .form-control { border-radius: 10px !important; }

/* Radio / checkbox groups: modern, inline, emerald */
.wizard-form input[type="radio"],
.wizard-form input[type="checkbox"] {
    accent-color: var(--brand-emerald-600);
    width: 16px; height: 16px; cursor: pointer;
}
.wizard-form .input-area.items-center { flex-direction: row !important; align-items: center !important; flex-wrap: wrap; }
.wizard-form .input-area.items-center > label:first-child { min-width: 170px !important; }

/* Slimmer, modern stepper */
.wizard-step .number-box {
    width: 36px !important; height: 36px !important;
    min-width: 36px !important; font-size: 13px !important;
}
.wizard-step .number-box .no-icon { font-size: 18px !important; }
.wizard-step .bar-line, .wizard-step .bar-line2 { height: 2px !important; }
.wizard-step .circle-box span { font-size: 12.5px !important; font-weight: 600 !important; }

/* Section sub-titles inside steps */
.wizard-form-step > .text-lg,
.wizard-form-step h4 { font-size: 15px !important; font-weight: 700 !important; color: var(--brand-ink) !important; }

/* Nav buttons row */
.wizard-form .prev-button {
    background: #fff !important; border: 1px solid var(--brand-border) !important;
    color: #4b5563 !important;
}
.wizard-form .prev-button:hover { background: #f4f6f8 !important; }

/* ==========================================================================
   NEW MERCHANT wizard (rebuilt, reuses .maw-* base)
   ========================================================================== */
.nmw-wrap { max-width: 680px; margin: 8px auto 48px; padding: 0 16px; }
.nmw-nav { justify-content: space-between !important; }
.nmw-cond { border-left: 2px solid #bfe8d4; padding-left: 14px; margin: 6px 0 4px; }
.nmw-radio-row { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.maw-radio-block { display: flex; margin-top: 10px; }
.nmw-subhead { font-size: 14px; font-weight: 700; color: var(--brand-ink); margin: 24px 0 8px; }
.nmw-total { font-weight: 600; color: var(--brand-ink); margin-top: 14px; }
.nmw-total span { color: var(--brand-emerald-700); }
.nmw-inline-amt { display: inline-flex; align-items: center; gap: 6px; }
.nmw-errors {
    background: #fceeee; border: 1px solid #f3c9c9; color: #a12b2b;
    border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px;
    display: flex; gap: 8px; align-items: center;
}

/* Row action pills (merchant list) */
.mchip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--brand-border); background: #fff; color: #374151;
    cursor: pointer; transition: background-color .12s ease, border-color .12s ease, color .12s ease;
    white-space: nowrap;
}
.mchip:hover { background: #f4f6f8; }
.mchip iconify-icon { font-size: 15px; }
.mchip-term { color: var(--brand-emerald-700); border-color: #bfe8d4; background: var(--brand-emerald-tint); }
.mchip-term:hover { background: #d5f2e4; }
.mchip-more { padding: 6px 9px; color: #6b7280; }
.mchip-edit { color: var(--brand-ink); }

/* Pretty action dropdown menu (applications, resellers, merchants) */
.otf-menu {
    min-width: 200px; background: #fff; padding: 6px;
    border: 1px solid var(--brand-border);
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.16);
    overflow: hidden;
}
.otf-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 12px; border-radius: 9px; font-size: 13px; font-weight: 500;
    color: #374151; text-align: left; background: none; border: 0; cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.otf-menu-item iconify-icon { font-size: 17px; color: #9aa3af; }
.otf-menu-item:hover { background: #f4f6f8; color: var(--brand-ink); }
.otf-menu-ok:hover { background: var(--brand-emerald-tint); color: var(--brand-emerald-700); }
.otf-menu-ok:hover iconify-icon { color: var(--brand-emerald-700); }
.otf-menu-warn:hover { background: #fdf3d6; color: #b45309; }
.otf-menu-warn:hover iconify-icon { color: #b45309; }
.otf-menu-danger:hover { background: #fde8e8; color: #c0392b; }
.otf-menu-danger:hover iconify-icon { color: #c0392b; }

/* Merchant result (success) screen */
.res-wrap { max-width: 560px; margin: 32px auto; padding: 0 16px; }
.res-card {
    background: #fff; border: 1px solid var(--brand-border); border-radius: 18px;
    box-shadow: 0 8px 40px rgba(16, 24, 40, 0.08); padding: 36px 30px 30px; text-align: center;
}
.res-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--brand-ink); margin: 6px 0 8px; }
.res-sub { font-size: 14.5px; color: var(--brand-ink-2); line-height: 1.6; margin: 0 auto 22px; max-width: 420px; }
.res-info { background: #f7f9fa; border: 1px solid var(--brand-border); border-radius: 14px; padding: 6px 16px; margin-bottom: 20px; text-align: left; }
.res-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #eef1f3; }
.res-row:last-child { border-bottom: 0; }
.res-k { font-size: 13px; font-weight: 600; color: var(--brand-ink-2); display: inline-flex; align-items: center; gap: 8px; }
.res-k iconify-icon { color: var(--brand-emerald-600); font-size: 17px; }
.res-v { font-size: 15px; font-weight: 700; color: var(--brand-ink); }
.res-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }

/* Toast notifications */
#otf-toasts {
    position: fixed; top: 20px; right: 20px; z-index: 9999;
    display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.otf-toast {
    pointer-events: auto; display: flex; align-items: center; gap: 10px;
    min-width: 280px; max-width: 420px; padding: 13px 14px;
    background: #fff; border: 1px solid var(--brand-border); border-left: 4px solid #9aa3af;
    border-radius: 12px; box-shadow: 0 10px 30px rgba(16, 24, 40, 0.14);
    font-size: 14px; color: var(--brand-ink);
    transform: translateX(120%); opacity: 0; transition: transform .25s ease, opacity .25s ease;
}
.otf-toast.show { transform: translateX(0); opacity: 1; }
.otf-toast-ic { width: 20px; height: 20px; flex: none; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.otf-toast-msg { flex: 1; line-height: 1.4; }
.otf-toast-x { border: 0; background: none; color: #9aa3af; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.otf-toast-x:hover { color: #4b5563; }
.otf-toast-success { border-left-color: var(--brand-emerald-600); }
.otf-toast-success .otf-toast-ic { stroke: var(--brand-emerald-600); }
.otf-toast-error { border-left-color: #dc2626; }
.otf-toast-error .otf-toast-ic { stroke: #dc2626; }
.otf-toast-warning { border-left-color: #d97706; }
.otf-toast-warning .otf-toast-ic { stroke: #d97706; }

/* ==========================================================================
   FIXES for the emerald override bleeding into tinted badges / boxes
   ========================================================================== */
/* Status badges used `bg-primary-500 bg-opacity-25` → my solid override made
   them solid. Restore the subtle tint + emerald text. */
.bg-primary-500.bg-opacity-25,
.bg-primary-500[class*="bg-opacity-["] {
    background-color: var(--brand-emerald-tint) !important;
}
.text-primary-500.bg-primary-500 { color: var(--brand-emerald-700) !important; }

/* Compact status pills inside tables (no more full-width ovals) */
table td [class*="rounded-[999px]"] {
    width: auto !important; min-width: 0 !important; display: inline-block;
    padding: 3px 12px !important; font-weight: 600;
}

/* ==========================================================================
   MODERNIZE legacy forms (right-aligned labels -> top labels, full width)
   Applies to the old dashcode forms (reseller, edit, applications).
   The rebuilt wizards use .maw-* / .nmw-* so they're unaffected.
   ========================================================================== */
.card form .input-area:not(.items-center) {
    flex-direction: column !important; align-items: stretch !important;
    gap: 6px !important; margin-bottom: 16px;
}
.card form .input-area > label {
    min-width: 0 !important; width: auto !important;
    text-align: left !important; padding-right: 0 !important;
    font-size: 13px !important; font-weight: 600 !important; color: #384049 !important;
}
.card form .input-area.items-center { flex-wrap: wrap; }
.card form .input-area input:not([type="radio"]):not([type="checkbox"]),
.card form .input-area select,
.card form .input-area textarea {
    max-width: 100% !important; width: 100% !important;
}

/* The reseller "create sub-resellers" highlighted box */
.bg-primary-500.bg-opacity-\[14\%\] {
    background-color: var(--brand-emerald-tint) !important;
    border: 1px solid #bfe8d4 !important;
}
.bg-primary-500.bg-opacity-\[14\%\] label,
.bg-primary-500.bg-opacity-\[14\%\] small { color: #0f5132 !important; }

/* ==========================================================================
   Terminals (per-merchant) — card list + Push APK modal
   ========================================================================== */
.term-list { display: flex; flex-direction: column; gap: 10px; }
.term-card {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px;
    border: 1px solid var(--brand-border); border-radius: 12px; padding: 14px 16px; background: #fff;
}
.term-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.term-ic {
    width: 40px; height: 40px; flex: none; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: #f3f5f7; color: #5b6470; font-size: 20px;
}
.term-model { font-size: 14.5px; font-weight: 700; color: var(--brand-ink); }
.term-tid { font-size: 12px; font-weight: 600; color: #8a94a1; margin-left: 8px; font-family: ui-monospace, monospace; }
.term-meta { font-size: 12.5px; color: var(--brand-ink-2); margin-top: 2px; }
.term-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.term-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.term-await { font-size: 12.5px; color: #9aa3af; display: inline-flex; align-items: center; gap: 5px; }
.term-serial-form { display: flex; align-items: center; gap: 8px; }
.term-serial-form .form-control { width: 180px; }
@media (max-width: 680px) {
    .term-card { grid-template-columns: minmax(0, 1fr); }
    .term-actions, .term-status-col { justify-self: start; }
    .term-actions { flex-wrap: wrap; justify-content: flex-start; }
    .term-serial-form { flex: 1 1 100%; }
    .term-serial-form .form-control { width: 100%; }
}

/* Row hover on list tables — subtle highlight so rows feel interactive. */
.dashcode-data-table tbody tr,
#data-table-filter tbody tr { transition: background-color .1s ease; }
.dashcode-data-table tbody tr:hover td,
#data-table-filter tbody tr:hover td { background: #f8fafc !important; }

/* Emerald focus ring on form fields across the platform. */
.form-control:focus,
.form-control:focus-visible {
    border-color: var(--brand-emerald-500) !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12) !important;
    outline: none !important;
}

/* ---- Select2 dropdowns: match the brand (was default blue + clunky) ----- */
.select2-container--default .select2-selection--single {
    height: 42px !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;            /* vertically center in the 42px box */
    padding-left: 0 !important; padding-right: 18px !important;
    color: var(--brand-ink); font-size: 14px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9aa3af; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; right: 10px !important; }
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--brand-emerald-500) !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12) !important;
}
/* Dropdown panel */
.select2-dropdown {
    border: 1px solid var(--brand-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.14);
    overflow: hidden; padding: 6px;
}
.select2-container--open .select2-dropdown--below { margin-top: 6px; }
.select2-container--open .select2-dropdown--above { margin-bottom: 6px; }
/* Search box inside the dropdown */
.select2-search--dropdown { padding: 4px !important; }
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--brand-border) !important;
    border-radius: 8px !important; padding: 8px 10px !important;
    font-size: 14px; outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--brand-emerald-500) !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12) !important;
}
/* Options */
.select2-container--default .select2-results__option {
    border-radius: 8px !important; padding: 8px 10px !important; font-size: 14px !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background-color: var(--brand-emerald-tint) !important;
    color: var(--brand-emerald-700) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #f1f5f9 !important; color: var(--brand-ink) !important;
}

/* ---- Merchant Application form (#storeForm) polish ---------------------- */
#storeForm .card { margin-bottom: 18px; }
#storeForm .card-header {
    border-bottom: 1px solid var(--brand-border);
    padding-bottom: 14px; margin-bottom: 6px;
}
#storeForm .card-title {
    font-size: 18px !important; font-weight: 700 !important;
    color: var(--brand-ink) !important; letter-spacing: -0.01em;
}
/* Labels: readable, consistent weight/colour (they were thin + pale). */
#storeForm label { font-weight: 500; color: #475569; }
#storeForm .error-text { font-weight: 500; }
/* A touch more breathing room between stacked fields. */
#storeForm .space-y-5 > * + * { margin-top: 18px; }

/* DataTables toolbar selects (Show N entries / Status filter): give the
   dropdown arrow room and separate the control from the text beside it. */
.dataTables_length select,
.dataTables_length .form-control,
.custom-filter select,
#filterStatus {
    padding-right: 30px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    min-width: 72px;
}

/* Generic modal */
.otf-modal { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 16px; }
.otf-modal[hidden] { display: none !important; }
.otf-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 20, 25, 0.5); }
.otf-modal-card {
    position: relative; background: #fff; border-radius: 16px; width: 100%; max-width: 520px;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.28); overflow: hidden;
    max-height: 90vh; display: flex; flex-direction: column;
}
.otf-modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 12px; }
.otf-modal-title { font-size: 17px; font-weight: 700; color: var(--brand-ink); margin: 0; }
.otf-modal-sub { font-size: 12.5px; color: var(--brand-ink-2); margin: 2px 0 0; font-family: ui-monospace, monospace; }
.otf-modal-x { border: 0; background: none; font-size: 24px; line-height: 1; color: #9aa3af; cursor: pointer; }
.otf-modal-x:hover { color: #4b5563; }
.otf-modal-body { padding: 4px 22px 22px; overflow-y: auto; }
.otf-modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 22px; }
/* Normalize modal buttons so submit + cancel match (the wizard .maw-btn
   carries a margin-top/full-width meant for the stepper, not modals). */
.otf-modal-actions .maw-btn,
.otf-modal-actions .maw-btn-ghost {
    margin-top: 0 !important; width: auto; padding: 11px 20px;
    font-size: 14px; font-weight: 600; border-radius: 10px; line-height: 1.2;
}

/* Required-field asterisk */
.req-star { color: #dc2626; font-weight: 700; margin-left: 2px; }

/* Dashboard period segmented control */
.dash-period {
    display: inline-flex; background: #eef1f3; border-radius: 10px; padding: 3px; gap: 2px;
}
.dash-period .dp {
    font-size: 13px; font-weight: 600; color: #5b6470; padding: 7px 15px; border-radius: 8px;
    cursor: pointer; border: 0; background: transparent; transition: all .12s ease; text-decoration: none;
}
.dash-period .dp:hover { color: #1f2937; }
.dash-period .dp.active {
    background: #fff; color: var(--brand-emerald-700);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10);
}

/* Dashboard KPI cards */
.dkpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 20px;
}
.dkpi {
    background: #fff; border: 1px solid var(--brand-border); border-radius: 14px;
    padding: 18px; display: flex; align-items: center; gap: 14px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    position: relative;
}
/* Clickable KPI cards (anchors): subtle lift + arrow affordance */
a.dkpi { text-decoration: none; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
a.dkpi:hover {
    border-color: #bfe8d4;
    box-shadow: 0 8px 22px rgba(16,24,40,.08);
    transform: translateY(-1px);
}
.dkpi-go {
    position: absolute; top: 14px; right: 14px; font-size: 16px; color: #c3cad3;
    opacity: 0; transform: translateX(-4px); transition: opacity .12s ease, transform .12s ease, color .12s ease;
}
a.dkpi:hover .dkpi-go { opacity: 1; transform: translateX(0); color: var(--brand-emerald-600); }
.dkpi-wide { grid-column: span 2; }
@media (max-width: 640px) { .dkpi-wide { grid-column: span 1; } }
.dkpi-ic {
    width: 42px; height: 42px; flex: none; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-emerald-tint); color: var(--brand-emerald-700); font-size: 21px;
}
.dkpi-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #8a94a1; }
.dkpi-value { display: block; font-size: 24px; font-weight: 700; color: var(--brand-ink); letter-spacing: -0.02em; margin-top: 2px; }
.dkpi-track { height: 6px; background: #eef1f3; border-radius: 999px; overflow: hidden; margin-top: 10px; }
.dkpi-bar { height: 100%; background: var(--brand-emerald-600); border-radius: 999px; }

/* Terminals module — stat cards */
.tstat {
    background: #fff; border: 1px solid var(--brand-border); border-radius: 14px;
    padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
}
.tstat-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a94a1; }
.tstat-value { font-size: 26px; font-weight: 700; color: var(--brand-ink); letter-spacing: -0.02em; }

/* Global terminals grouped by merchant */
.tgroup-list { display: flex; flex-direction: column; gap: 16px; }
/* Accordion toggle */
.tacc-head { cursor: pointer; user-select: none; }
.tacc-chevron { font-size: 16px; color: #9aa3af; transition: transform .15s ease; flex: none; }
.tacc.open .tacc-chevron { transform: rotate(90deg); }
.tgroup { border: 1px solid var(--brand-border); border-radius: 14px; overflow: hidden; }
.tgroup-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; background: var(--brand-emerald-tint); border-bottom: 1px solid var(--brand-border);
}
.tgroup-ident { display: flex; align-items: center; gap: 12px; }
.tgroup-avatar {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-emerald); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.tgroup-name { font-weight: 700; color: var(--brand-ink); font-size: 15px; }
.tgroup-sub { font-size: 12.5px; color: var(--brand-ink-2); }
.tgroup table { width: 100%; }
.tgroup .table-th { padding-left: 18px; padding-right: 18px; }
.tgroup .table-td { padding-left: 18px; padding-right: 18px; }

/* Business age chip */
.maw-age {
    margin: 8px 0 0; display: inline-block; font-size: 13px; font-weight: 600;
    color: var(--brand-emerald-700); background: var(--brand-emerald-tint);
    border: 1px solid #bfe8d4; border-radius: 999px; padding: 5px 12px;
}

/* Analyzing state */
.maw-loading { text-align: center; padding: 44px 0 30px; }
.maw-spinner {
    width: 54px; height: 54px; margin: 0 auto 22px; border-radius: 50%;
    border: 4px solid #e6eef0; border-top-color: var(--brand-emerald-600);
    animation: maw-spin 0.8s linear infinite;
}
@keyframes maw-spin { to { transform: rotate(360deg); } }
.maw-loading-title { font-size: 18px; font-weight: 700; color: var(--brand-ink); margin: 0 0 6px; letter-spacing: -0.01em; }
.maw-loading-sub { font-size: 13.5px; color: var(--brand-ink-2); margin: 0; }

/* Trust box (KYC top) */
.maw-trust {
    display: flex; gap: 12px; align-items: flex-start; background: var(--brand-emerald-tint);
    border: 1px solid #bfe8d4; border-radius: 12px; padding: 14px 16px; margin-bottom: 22px;
}
.maw-trust iconify-icon { color: var(--brand-emerald-700); font-size: 22px; flex: none; }
.maw-trust b { font-size: 14px; color: #0f5132; }
.maw-trust span { font-size: 12.5px; color: #3d7a5c; }

/* ==========================================================================
   TOPBAR — refined search + height
   ========================================================================== */

.app-header { height: 72px !important; }
.app-header input[type="text"],
.app-header input[type="search"],
.app-header .form-control {
    background-color: #f3f5f7 !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    height: 42px !important;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.app-header input[type="text"]:focus,
.app-header input[type="search"]:focus,
.app-header .form-control:focus {
    background-color: #fff !important;
    border-color: var(--brand-emerald-600) !important;
    box-shadow: 0 0 0 3px var(--brand-emerald-ring) !important;
}

/* ==========================================================================
   LIST TOOLBAR — "Show N Entries", Status, Search row
   ========================================================================== */

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: 8px; }
.dataTables_wrapper label {
    font-size: 13px !important;
    color: #6b7280 !important;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dataTables_wrapper .dataTables_filter input {
    border-radius: 8px !important;
    border: 1px solid #dfe2e6 !important;
    height: 38px;
    padding: 6px 12px !important;
    margin-left: 8px;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--brand-emerald-600) !important;
    box-shadow: 0 0 0 3px var(--brand-emerald-ring) !important;
    outline: none !important;
}

/* Empty state */
.dataTables_empty,
td.dataTables_empty {
    color: #9aa3af !important;
    font-size: 14px !important;
    padding: 32px 16px !important;
    text-align: center !important;
}

/* ==========================================================================
   ACTION DROPDOWN ( ⋮ ) — refined popover
   ========================================================================== */

.dropdown-menu {
    border-radius: 12px !important;
    border: 1px solid var(--brand-border) !important;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.12) !important;
    padding: 6px !important;
    overflow: hidden;
}
.dropdown-menu li > a,
.dropdown-menu li > form > button {
    border-radius: 8px !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    transition: background-color .12s ease, color .12s ease;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > form > button:hover {
    background-color: #f3f5f7 !important;
}
.dropdown-menu .btn-delete:hover { color: #dc2626 !important; }

/* ==========================================================================
   PAGE HEADERS — title + breadcrumb rhythm
   ========================================================================== */

.card-title { font-size: 18px !important; }
.breadcrumb, ul.m-0.p-0.list-none { align-items: center; }

/* Header action buttons: consistent height (but never override .hidden,
   and don't fight Tailwind's responsive `hidden md:block` utilities) */
.btn:not(.hidden) { min-height: 42px; }

/* ==========================================================================
   Utility gaps: the admin layout only ships the precompiled theme CSS, so the
   few Tailwind utilities the migrated views rely on that it lacks live here.
   ========================================================================== */
.gap-1 { gap: 0.25rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-y-2 { row-gap: 0.5rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mt-3\.5 { margin-top: 0.875rem; }
.py-\[7px\] { padding-top: 7px; padding-bottom: 7px; }
.text-\[13px\] { font-size: 13px; }
.text-5xl { font-size: 3rem; line-height: 1; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.overflow-auto { overflow: auto; }
.opacity-60 { opacity: 0.6; }
.max-h-\[150px\] { max-height: 150px; }
.max-h-\[160px\] { max-height: 160px; }
.max-h-\[300px\] { max-height: 300px; }
.max-h-\[320px\] { max-height: 320px; }
@media (min-width: 640px) {
    .sm\:col-span-2 { grid-column: span 2 / span 2; }
}

/* Toggle switches keep the theme's blue through `peer-checked:bg-primary-500`; use the brand accent. */
.peer:checked ~ .peer-checked\:bg-primary-500 { background-color: var(--brand-emerald-600) !important; }

/* Horizontal form rows (x-form.row / x-form.label): the label column only exists from tablet width up. */
@media (min-width: 768px) {
    .form-row-label { min-width: var(--label-width, 15rem); }
}
@media (max-width: 767px) {
    .input-area.flex { flex-direction: column; align-items: stretch; }
    .form-row-label { text-align: left !important; }
}

/* Device order line of the merchant terminals page: model grows, quantity and remove keep their size. */
.device-line { display: flex; gap: 12px; align-items: flex-start; }
.device-line-model { flex: 1 1 auto; min-width: 0; }
.device-line-qty { flex: 0 0 90px; }
@media (max-width: 480px) {
    .device-line { flex-wrap: wrap; }
    .device-line-model { flex-basis: 100%; }
    .device-line-qty { flex: 1 1 auto; }
}

/* Standard / Express license prices of the reseller form: a row from tablet width up, stacked below. */
.license-prices { display: flex; flex-direction: row; align-items: center; gap: 8px; width: 100%; }
@media (max-width: 767px) {
    .license-prices { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Responsive tables.
   - Phones (<768px): every <table class="table-cards"> row becomes a card. Cells carry
     data-label (the column heading), printed as the caption of each line; cells without
     it (actions, empty state) span the full card width.
   - Tablets and small desktops (768-1439px): still a table, but tighter, and the row
     buttons (.row-action) move into the row's "more" menu (.row-action-menu entries).
   ========================================================================== */
.table-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 16px; }
.table-toolbar-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.otf-menu li:has(> .row-action-menu) { display: none; }
.row-actions-compact { display: none; }

@media (min-width: 768px) and (max-width: 1439px) {
    .row-action { display: none !important; }
    .otf-menu li:has(> .row-action-menu) { display: list-item; }
    .row-actions-compact { display: block; }
    table.table-cards thead th,
    table.table-cards tbody td { padding-left: 10px !important; padding-right: 10px !important; }
}

@media (max-width: 767px) {
    .table-toolbar,
    .table-toolbar-filters { flex-direction: column; align-items: stretch; justify-content: flex-start; }
    .table-toolbar-filters > label { justify-content: space-between; width: 100%; }
    .table-toolbar-filters .form-control { flex: 1 1 auto; min-width: 0; width: 100% !important; max-width: 220px; }
    .table-toolbar-filters input.form-control { max-width: none; }

    .table-shell { margin-left: 0 !important; margin-right: 0 !important; overflow: visible !important; }
    .table-shell > div,
    .table-shell > div > div { display: block; overflow: visible !important; }

    table.table-cards,
    table.table-cards tbody,
    table.table-cards tr,
    table.table-cards td { display: block; width: 100%; }
    table.table-cards { table-layout: auto; border: 0; }
    table.table-cards thead { display: none; }
    table.table-cards tbody { background: transparent !important; }
    table.table-cards tbody > * + * { border-top-width: 0; }

    table.table-cards tr {
        margin-bottom: 12px;
        padding: 6px 0;
        background: var(--brand-card);
        border: 1px solid var(--brand-border);
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(15, 20, 25, 0.04);
    }
    .dark table.table-cards tr { background: #1e293b; border-color: #334155; }

    table.table-cards td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 8px 16px !important;
        min-height: 38px;
        text-align: right;
        border: 0 !important;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    table.table-cards td[data-label]::before {
        content: attr(data-label);
        flex: none;
        max-width: 45%;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        text-align: left;
        color: var(--brand-ink-2);
    }
    table.table-cards td[data-label] + td[data-label] { border-top: 1px dashed var(--brand-border) !important; }
    .dark table.table-cards td[data-label] + td[data-label] { border-color: #334155 !important; }
    table.table-cards td:not([data-label]) { justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--brand-border) !important; }
    table.table-cards td:not([data-label]):first-child { border-top: 0 !important; }
    table.table-cards td:not([data-label]):empty { display: none; }
    table.table-cards td[colspan] { justify-content: center; text-align: center; }

    .tacc-body table.table-cards { min-width: 0; }
    .tacc-body table.table-cards tr { margin: 8px; width: auto; }
}

/* Auth forms: keep the label's own casing (Spanish copy is sentence case) and only raise its first letter. */
.auth-box form .btn { text-transform: none; }
.auth-box form .btn::first-letter { text-transform: uppercase; }
.form-label { text-transform: none; }

/* Collapsed sidebar must not leave its 1px border on screen. */
.sidebar-wrapper.menu-hide { border-right: 0; box-shadow: none; }

/* Copy is written in sentence case (Spanish especially): the theme's Title Case transform mangles it. */
.card-title, .btn { text-transform: none; }
.btn:not(.btn-sm)::first-letter { text-transform: uppercase; }

/* ==========================================================================
   Off-canvas sidebar (below 1024px: phones and tablets):
   a drawer that slides over the page, with a dimmed backdrop and a visible
   close button. `menu-hide` (toggled by the theme JS) is the closed state.
   `left` is animated instead of `transform` because the backdrop is a fixed
   child of the sidebar and a transform would turn the sidebar into its
   containing block.
   ========================================================================== */
@media (max-width: 1023px) {
    .app-wrapper .sidebar-wrapper {
        width: min(300px, 86vw);
        left: 0;
        overflow: visible;
        visibility: visible;
        box-shadow: 0 0 48px rgba(0, 0, 0, 0.45);
        transition: none;
    }
    .drawer-ready .app-wrapper .sidebar-wrapper { transition: left .28s cubic-bezier(.32, .72, 0, 1), visibility 0s linear 0s; }
    .app-wrapper .sidebar-wrapper.menu-hide {
        width: min(300px, 86vw);
        left: max(-300px, -86vw);
        visibility: hidden;
        box-shadow: none;
    }
    .drawer-ready .app-wrapper .sidebar-wrapper.menu-hide { transition: left .28s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .28s; }

    .sidebar-wrapper #bodyOverlay { left: 0; background-color: rgba(15, 20, 25, 0.55); animation: drawer-fade .2s ease-out; }
    @keyframes drawer-fade { from { opacity: 0; } to { opacity: 1; } }

    .sidebar-wrapper .logo-segment { position: sticky; z-index: 60; justify-content: flex-start; padding: 0 56px 0 20px; }
    .sidebar-wrapper .logo-segment > a { justify-content: flex-start; }
    .sidebar-wrapper .sidebarCloseIcon {
        position: absolute;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.06);
        transition: background-color .15s ease;
    }
    .sidebar-wrapper .sidebarCloseIcon:hover { background: rgba(255, 255, 255, 0.12); }
    .sidebar-wrapper .sidebarCloseIcon iconify-icon { color: #e6eaef !important; font-size: 20px; }
}

/* ==========================================================================
   Sidebar navigation — calmer selected states.
   Only the current page is highlighted (tinted block + a thin bar flush with
   the block's left edge); a group that just expands (href="#") stays plain and
   shows a chevron that turns down while open, its children hang off a guide line.
   ========================================================================== */
#sidebar_menus .navItem { margin: 2px 0; }
#sidebar_menus .navItem .icon-arrow { display: none; }
#sidebar_menus .navItem[href="#"] .icon-arrow { display: inline-flex; transition: transform .2s ease; }
#sidebar_menus .navItem[href="#"]:has(+ div:not([style*="display: none"])) .icon-arrow { transform: rotate(90deg); }

#sidebar_menus .navItem.active::before {
    left: 0;
    height: 55%;
    border-radius: 0 3px 3px 0;
}
#sidebar_menus .navItem[href="#"].active {
    background-color: transparent !important;
    color: #f1f4f7 !important;
}
#sidebar_menus .navItem[href="#"].active::before { display: none; }

#sidebar_menus .navItem[href="#"] + div {
    margin: 2px 0 6px 20px;
    padding-left: 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}
#sidebar_menus .navItem[href="#"] + div .navItem { padding-left: 14px !important; }

/* Terminals filters: one filter per row on phones, except the date range which shares a row. */
@media (max-width: 767px) {
    .terminal-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .terminal-filters > div { grid-column: 1 / -1; min-width: 0; margin-left: 0; }
    .terminal-filters > .terminal-filter-date { grid-column: auto; }
    .terminal-filters .form-control,
    .terminal-filters #filterStatus { width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
    .terminal-filters > div:last-child .form-control { flex: 1 1 auto; }
}

/* Below the drawer breakpoint the sidebar is off-canvas, so the page never reserves room for it.
   (The theme JS only drops these margins after load, which made the page jump on every refresh
   and let charts measure their container too narrow.) */
@media (max-width: 1023px) {
    #content_wrapper,
    .app-header,
    .site-footer { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Dashboard period control: full width on phones, equal-width tabs that scroll rather than overflow the page. */
@media (max-width: 767px) {
    .dash-period { display: flex; width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .dash-period::-webkit-scrollbar { display: none; }
    .dash-period .dp { flex: 1 0 auto; white-space: nowrap; text-align: center; padding: 7px 12px; }
    .dash-period:only-child { min-width: 0; }
}

/* ==========================================================================
   Desktop (1024px and up): the sidebar is always visible. The theme JS still
   closes it below 1281px (adds `menu-hide` / `margin-0` and shows the toggle
   buttons), so the visible state is enforced here.
   ========================================================================== */
@media (min-width: 1024px) {
    .app-wrapper .sidebar-wrapper,
    .app-wrapper .sidebar-wrapper.menu-hide {
        width: 248px;
        left: 0;
        overflow: visible;
        visibility: visible;
        border-right: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04);
    }
    .app-header.margin-0,
    #content_wrapper.margin-0,
    .site-footer.margin-0 { margin-left: 248px !important; }
    .smallDeviceMenuController,
    .sidebarCloseIcon,
    #bodyOverlay,
    .app-header .mobile-logo { display: none !important; }
}

/* ==========================================================================
   Buttons on phones: action groups stack and every button spans the full width
   of the fields above it, so edges line up with the inputs.
   ========================================================================== */
@media (max-width: 767px) {
    .actions-stack,
    .page-actions,
    .res-actions,
    .board-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
    .actions-stack > *,
    .page-actions > *,
    .res-actions > *,
    .board-actions > * { width: 100%; margin-top: 0; }
    .actions-stack .btn, .actions-stack .mchip,
    .page-actions .btn, .page-actions .mchip,
    .res-actions .btn,
    .board-actions .btn { width: 100%; justify-content: center; }
    .form-submit { float: none; width: 100%; }

    .otf-modal-actions > *,
    .maw-actions > * { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 480px) {
    .device-line-qty { flex: 1 1 0; min-width: 0; }
}

/* Pagination: numbered pages from tablet width; phones get "previous · Page X of Y · next" so long lists never overflow. */
.pagination-summary { display: none; }
@media (max-width: 767px) {
    .pagination-nav { width: 100%; }
    .pagination-nav ul { width: 100%; justify-content: space-between; }
    .pagination-page { display: none; }
    .pagination-summary { display: block; }
}

/* Shopping cart lines (gear cart). Wide: image + text on the left, quantity / prices / remove on the right.
   Phones: a card per product, image on top, text underneath, then quantity and price on one row. */
.cart-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--brand-border); }
.cart-line-product { display: flex; align-items: center; gap: 16px; flex: 1 1 200px; min-width: 200px; }
.cart-line-img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.cart-line-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-line-controls { display: flex; align-items: center; gap: 14px; }
.cart-line-qty { display: flex; align-items: center; gap: 8px; }
.cart-line-prices { display: flex; flex-direction: column; align-items: flex-end; min-width: 76px; }
.cart-line-remove { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; line-height: 1; }
@media (max-width: 767px) {
    .cart-line { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 16px; margin-bottom: 12px; background: var(--brand-card); border: 1px solid var(--brand-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 20, 25, 0.04); }
    .cart-line-product { flex-direction: column; text-align: center; min-width: 0; gap: 12px; }
    .cart-line-img { width: 112px; height: 112px; }
    .cart-line-info { align-items: center; }
    .cart-line-controls { justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--brand-border); }
    .cart-line-qty button { width: 36px; height: 36px; }
    .cart-line-qty input { height: 36px; }
    .cart-line-prices { margin-left: auto; }
    .cart-lines { padding-left: 0; padding-right: 0; }
}

/* Row buttons inside phone cards share the card width (the "more" menu and icon-only buttons keep their size). */
@media (max-width: 767px) {
    table.table-cards td:not([data-label]) > div { width: 100%; justify-content: stretch; }
    table.table-cards td:not([data-label]) .mchip:has(span):not(.mchip-more) { flex: 1 1 0; justify-content: center; }
}

/* Success cards have an inline width of 42rem: never wider than the screen; send-email buttons match the other actions on phones. */
.success-card { max-width: 100%; }
@media (max-width: 767px) {
    button[data-send-email] { width: 100%; }
}
@media (max-width: 767px) {
    .success-card { text-align: center; }
    .success-card h1 { font-size: 1.75rem; line-height: 2.25rem; }
    .success-card small { font-size: 1rem; }
}

/* Ad-hoc modals: footer buttons share the width on phones. */
@media (max-width: 767px) {
    .modal-actions-equal > * { flex: 1 1 0; min-width: 0; }
}