/*! WiFiFlow App Styles — Dashboard Layout
 *  Replaces atlantis.min.css + improved-styling.css
 *  Works with Bootstrap 5.3 and design-tokens.css
 */

/* Notch / home-indicator safe areas (requires viewport-fit=cover on meta viewport) */
:root {
    --wf-safe-top: env(safe-area-inset-top, 0px);
    --wf-safe-bottom: env(safe-area-inset-bottom, 0px);
    --wf-header-stack: calc(var(--wf-header-height) + var(--wf-safe-top));
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--wf-font-family);
    font-size: var(--wf-font-size-base);
    line-height: var(--wf-line-height);
    color: var(--wf-text);
    background-color: var(--wf-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--wf-heading-weight);
    color: var(--wf-text);
    line-height: 1.3;
}

a {
    color: var(--wf-primary);
    text-decoration: none;
    transition: color var(--wf-transition);
}
a:hover { color: var(--wf-primary-hover); }

/* ── Wrapper Layout ── */
.wrapper {
    display: flex;
    min-height: 100vh;
    position: relative;
    max-width: 100%;
    overflow-x: clip;
}

/* ── Header / Navbar ── */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--wf-header-stack);
    box-sizing: border-box;
    padding-top: var(--wf-safe-top);
    z-index: 1030;
    display: flex;
    align-items: stretch;
    background: var(--wf-header-bg, #1e3a8a) !important;
    box-shadow: var(--wf-shadow-md);
    color: var(--wf-header-fg, #ffffff);
}

.logo-header {
    width: var(--wf-sidebar-width);
    display: flex;
    align-items: center;
    padding: 0 var(--wf-space-lg);
    background: var(--wf-header-bg, #1e3a8a) !important;
    flex-shrink: 0;
    min-width: 0;
    transition: width var(--wf-transition-slow);
}

.logo-header .logo {
    display: flex;
    align-items: center;
    gap: var(--wf-space-sm);
    color: var(--wf-header-fg);
    font-weight: 700;
    font-size: var(--wf-font-size-xl);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
}

.logo-header .logo img.navbar-brand {
    max-height: 36px;
    width: auto;
}

.logo-header .logo-text {
    color: var(--wf-header-fg);
    font-weight: 700;
    font-size: var(--wf-font-size-lg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(42vw, 12rem);
}

/* Bootstrap's .navbar defaults to flex-wrap: wrap, which pushed the topbar
   icons onto a second row and out of the fixed-height header on phones. */
.navbar-header {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
    padding: 0 var(--wf-space-lg);
}

.navbar-header > .container-fluid {
    flex-wrap: nowrap;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

/* The markup is .navbar-nav.topbar-nav inside .navbar-expand-lg, and
   Bootstrap only switches .navbar-nav to a row at the lg breakpoint. Below
   992px it stayed a column, so the bell and avatar stacked into a 140px tall
   list inside a 64px header and spilled over the page. Force a row. */
.navbar-header .topbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--wf-space-sm);
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
}

.navbar-header .topbar-nav .nav-link {
    color: color-mix(in srgb, var(--wf-header-fg) 80%, transparent);
    padding: var(--wf-space-sm) var(--wf-space-md);
    border-radius: var(--wf-radius-md);
    transition: all var(--wf-transition);
    position: relative;
    display: flex;
    align-items: center;
}

.navbar-header .topbar-nav .nav-link:hover,
.navbar-header .topbar-nav .nav-link:focus {
    color: var(--wf-header-fg);
    background: color-mix(in srgb, var(--wf-header-fg) 12%, transparent);
}

.navbar-header .topbar-nav .notification {
    position: absolute;
    top: 2px;
    right: 4px;
    background: var(--wf-danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Search */
.nav-search .form-control {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    border-radius: var(--wf-radius-full);
    padding: 0.4rem 1rem;
    font-size: var(--wf-font-size-sm);
    width: 220px;
    transition: all var(--wf-transition);
}
.nav-search .form-control::placeholder { color: rgba(255,255,255,0.5); }
.nav-search .form-control:focus {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.4);
    box-shadow: none;
    width: 280px;
}
.nav-search .btn-search {
    color: rgba(255,255,255,0.7);
    background: transparent;
    border: none;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* Notification dropdown */
.notif-box {
    width: 340px;
    max-height: 420px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-lg);
    box-shadow: var(--wf-shadow-xl);
    padding: 0;
    overflow: hidden;
}
.notif-box .dropdown-title {
    padding: var(--wf-space-md) var(--wf-space-lg);
    font-weight: 600;
    font-size: var(--wf-font-size-sm);
    color: var(--wf-text);
    border-bottom: 1px solid var(--wf-border);
    background: var(--wf-bg);
}
.notif-scroll {
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--wf-border) transparent;
}
.notif-center { padding: var(--wf-space-sm) 0; }
.notif-item {
    display: flex;
    padding: var(--wf-space-sm) var(--wf-space-lg);
    gap: var(--wf-space-md);
    align-items: flex-start;
    transition: background var(--wf-transition);
    cursor: pointer;
}
.notif-item:hover { background: var(--wf-bg); }
.notif-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--wf-font-size-sm);
}
.notif-icon.notif-success { background: var(--wf-success-bg); color: var(--wf-success); }
.notif-icon.notif-danger  { background: var(--wf-danger-bg);  color: var(--wf-danger); }
.notif-icon.notif-warning { background: var(--wf-warning-bg); color: var(--wf-warning); }
.notif-icon.notif-info    { background: var(--wf-info-bg);    color: var(--wf-info); }
.notif-content .block { font-size: var(--wf-font-size-sm); color: var(--wf-text); display: block; }
.notif-content .time  { font-size: var(--wf-font-size-xs); color: var(--wf-text-muted); }

/* User dropdown */
.dropdown-user { 
    width: 280px; 
    border-radius: var(--wf-radius-lg); 
    border: 1px solid var(--wf-border);
    box-shadow: var(--wf-shadow-xl);
    padding: 0;
    overflow: hidden;
}
.dropdown-user .user-box {
    display: flex;
    gap: var(--wf-space-md);
    align-items: center;
    padding: var(--wf-space-lg);
    background: var(--wf-bg);
    border-bottom: 1px solid var(--wf-border);
}
.dropdown-user .avatar-lg { width: 48px; height: 48px; flex-shrink: 0; }
.dropdown-user .avatar-lg img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--wf-radius-md); }
.dropdown-user .u-text h4 { font-size: var(--wf-font-size-sm); font-weight: 600; margin: 0; }
.dropdown-user .u-text p { font-size: var(--wf-font-size-xs); color: var(--wf-text-muted); margin: 0; }
.dropdown-user .dropdown-item {
    padding: var(--wf-space-sm) var(--wf-space-lg);
    font-size: var(--wf-font-size-sm);
    color: var(--wf-text-secondary);
    transition: all var(--wf-transition);
}
.dropdown-user .dropdown-item:hover {
    background: var(--wf-primary-bg);
    color: var(--wf-primary);
}
.dropdown-user .dropdown-user-scroll { max-height: 360px; overflow-y: auto; }
.profile-pic { display: flex; align-items: center; gap: var(--wf-space-sm); cursor: pointer; text-decoration: none; }
.avatar-sm { width: 36px; height: 36px; flex-shrink: 0; }
.avatar-sm img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); }

/* Toggle buttons */
.navbar-toggler,
.sidenav-toggler,
.topbar-toggler {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.8);
    padding: var(--wf-space-sm);
    border-radius: var(--wf-radius-md);
    cursor: pointer;
    font-size: 1.2rem;
    transition: all var(--wf-transition);
    display: none;
}
.navbar-toggler:hover,
.sidenav-toggler:hover,
.topbar-toggler:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.nav-toggle {
    display: none;
    align-items: center;
}
.btn-toggle {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.8);
    padding: var(--wf-space-sm);
    cursor: pointer;
    font-size: 1.2rem;
}

/* ── Sidebar ── */
.sidebar {
    position: fixed;
    top: var(--wf-header-stack);
    left: 0;
    bottom: 0;
    width: var(--wf-sidebar-width);
    background: var(--wf-surface);
    border-right: 1px solid var(--wf-border);
    z-index: 1020;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow var(--wf-transition-slow);
    display: flex;
    flex-direction: column;
}

.sidebar-wrapper {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--wf-border) transparent;
    padding: var(--wf-space-md) 0;
}

/* Sidebar user info */
.sidebar .user {
    display: flex;
    align-items: center;
    gap: var(--wf-space-md);
    padding: var(--wf-space-md) var(--wf-space-lg);
    margin-bottom: var(--wf-space-sm);
    border-bottom: 1px solid var(--wf-border-light);
}
.sidebar .user .avatar-sm { width: 40px; height: 40px; flex-shrink: 0; }
.sidebar .user .avatar-sm img,
.sidebar .user .avatar-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    border-radius: 50%; 
    border: 2px solid var(--wf-primary-bg);
}
.sidebar .user .info {
    flex: 1;
    min-width: 0;
}
.sidebar .user .user-name {
    font-weight: 600;
    font-size: var(--wf-font-size-sm);
    color: var(--wf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar .user .user-level {
    font-size: var(--wf-font-size-xs);
    color: var(--wf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sidebar navigation */
.sidebar .nav-primary {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar .nav-item > a {
    display: flex;
    align-items: center;
    gap: var(--wf-space-md);
    padding: 0.6rem var(--wf-space-lg);
    color: var(--wf-text-secondary);
    font-size: var(--wf-font-size-sm);
    font-weight: 500;
    border-radius: 0;
    transition: all var(--wf-transition);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.sidebar .nav-item > a i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    color: var(--wf-text-muted);
    flex-shrink: 0;
    transition: color var(--wf-transition);
}

.sidebar .nav-item > a p {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.sidebar .nav-item > a:hover {
    background: var(--wf-primary-bg);
    color: var(--wf-primary);
    border-left-color: var(--wf-primary-light);
}
.sidebar .nav-item > a:hover i {
    color: var(--wf-primary);
}

.sidebar .nav-item.active > a {
    background: var(--wf-primary-bg);
    color: var(--wf-primary);
    font-weight: 600;
    border-left-color: var(--wf-primary);
}
.sidebar .nav-item.active > a i {
    color: var(--wf-primary);
}

/* Submenu toggle caret */
.sidebar .submenu-toggle .caret {
    display: inline-block;
    margin-left: auto;
    font-size: 0;
}
.sidebar .submenu-toggle .caret::after {
    content: '\f078'; /* fa-chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.65rem;
    color: var(--wf-text-muted);
    transition: transform var(--wf-transition);
    display: inline-block;
}
.sidebar .submenu-toggle[aria-expanded="true"] .caret::after {
    transform: rotate(180deg);
}
.sidebar .has-submenu > a {
    border-left-color: transparent;
}

/* Collapsible submenu */
.sidebar .nav-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--wf-bg);
}
.sidebar .nav-submenu .nav-item > a {
    padding-left: calc(var(--wf-space-lg) + 20px + var(--wf-space-md));
    font-size: var(--wf-font-size-sm);
    border-left: 3px solid transparent;
}
.sidebar .nav-submenu .nav-item > a i {
    font-size: 0.8rem;
    width: 16px;
}
.sidebar .nav-submenu .nav-item.active > a {
    background: var(--wf-primary-bg);
    color: var(--wf-primary);
    font-weight: 600;
    border-left-color: var(--wf-primary);
}

/* Sidebar section labels */
.sidebar .nav-section {
    padding: var(--wf-space-lg) var(--wf-space-lg) var(--wf-space-xs);
    list-style: none;
}
.sidebar .nav-section h4,
.sidebar .nav-section .text-section {
    font-size: var(--wf-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--wf-text-muted);
    margin: 0;
}

/* Sidebar footer (minimize toggle) */
.sidebar-footer {
    border-top: 1px solid var(--wf-border-light);
    padding: var(--wf-space-sm) var(--wf-space-lg);
    display: none;  /* hidden on mobile, visible on desktop */
}
@media (min-width: 992px) {
    .sidebar-footer { display: block; }
}
.sidebar-footer .toggle-sidebar {
    background: none;
    border: none;
    color: var(--wf-text-muted);
    cursor: pointer;
    padding: var(--wf-space-xs) var(--wf-space-sm);
    border-radius: var(--wf-radius-sm);
    font-size: 1rem;
    transition: all var(--wf-transition);
    width: 100%;
    text-align: left;
}
.sidebar-footer .toggle-sidebar:hover {
    background: var(--wf-primary-bg);
    color: var(--wf-primary);
}

/* ── Main Panel ── */
.main-panel {
    flex: 1 1 auto;
    min-width: 0; /* flex items default to min-content and blow the page wide */
    width: auto;
    max-width: 100%;
    float: none;
    margin-left: var(--wf-sidebar-width);
    margin-top: var(--wf-header-stack);
    min-height: calc(100dvh - var(--wf-header-stack));
    display: flex;
    flex-direction: column;
    transition: margin-left var(--wf-transition-slow);
    background: var(--wf-bg);
    overflow-x: visible;
}

/* Templates that wrap {% block content %} in another .main-panel */
.main-panel .main-panel {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-top: 0;
    min-height: 0;
    float: none;
    overflow: visible;
}

.main-panel > .container,
.main-panel > .container-fluid,
.main-panel > .content,
.main-panel > .page-inner {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: none;
    padding: var(--wf-space-xl);
    overflow-x: visible;
}

.main-panel > .content > .page-inner,
.main-panel > .container-fluid > .page-inner,
.main-panel > .container > .page-inner {
    padding: 0;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.main-panel .page-inner > .row {
    width: 100%;
    max-width: none;
}

/* Form/detail pages: col-md-8 leaves an empty strip on wide screens */
@media (min-width: 992px) {
    .page-inner > .row > .col-md-8,
    .page-inner > .row > .col-md-8.mx-auto,
    .page-inner > .row > .col-md-10,
    .page-inner > .row > .col-md-10.mx-auto,
    .page-inner > .row > .offset-md-2.col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Bootstrap .container caps width on a few legacy pages — use full panel width */
.main-panel > .container {
    max-width: none;
}

.main-panel .table-responsive {
    max-width: 100%;
}
.main-panel .d-flex > .form-control {
    min-width: 0;
}

.wf-gateway-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
    gap: var(--wf-space-lg);
}
.wf-gateway-type-grid > .card {
    margin-bottom: 0;
    min-width: 0;
    position: relative;
}

/* ── Page Header / Title ── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--wf-space-sm) var(--wf-space-md);
    margin-bottom: var(--wf-space-xl);
}

.page-header .page-title {
    font-size: var(--wf-font-size-2xl);
    font-weight: 700;
    color: var(--wf-text);
    margin: 0;
}

/* Around 130 templates put the title, an optional subtitle paragraph and the
   breadcrumbs in .page-header as flat siblings. With space-between the three
   get flung to opposite ends of the row, which reads as a broken header.
   When a subtitle is present, give each element its own row instead. */
.page-header:has(> p) > .page-title,
.page-header:has(> p) > p,
.page-header:has(> p) > .breadcrumbs {
    flex: 0 0 100%;
    max-width: 100%;
}
.page-header > p {
    margin-bottom: 0;
    color: var(--wf-text-muted);
}
/* Trailing action buttons keep to the right on their own line. */
.page-header > .btn,
.page-header > a.btn,
.page-header > .page-header-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-header > .btn,
    .page-header > a.btn,
    .page-header > .page-header-actions {
        margin-left: 0;
    }
}

/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: var(--wf-font-size-sm);
    color: var(--wf-text-muted);
    list-style: none;
    padding: 0;
    margin: var(--wf-space-xs) 0 0;
}
.breadcrumbs li { display: flex; align-items: center; }
.breadcrumbs a { color: var(--wf-primary); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .separator { margin: 0 var(--wf-space-sm); font-size: 0.75rem; color: var(--wf-text-muted); }
.breadcrumbs .nav-home a { color: var(--wf-text-muted); }
.breadcrumbs .nav-home a:hover { color: var(--wf-primary); }

/* ── Cards ── */
.card {
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-lg);
    box-shadow: var(--wf-shadow-sm);
    margin-bottom: var(--wf-space-lg);
    transition: box-shadow var(--wf-transition);
}
.card:hover {
    box-shadow: var(--wf-shadow-md);
}
/* When the row declares its own gutters, or the card is stretched to fill the
   column, the card's own bottom margin would double the spacing. */
.row.g-2 > [class*="col-"] > .card,
.row.g-3 > [class*="col-"] > .card,
.row.g-4 > [class*="col-"] > .card,
.row.g-5 > [class*="col-"] > .card,
.row.gy-2 > [class*="col-"] > .card,
.row.gy-3 > [class*="col-"] > .card,
.row.gy-4 > [class*="col-"] > .card,
.card.h-100 {
    margin-bottom: 0;
}

/* Having removed the card margin above, the row now owns the gap to whatever
   follows it, otherwise a KPI row sits flush against the next section. Scoped
   to rows that actually hold cards so gutter rows of form fields inside a card
   body are left alone. An explicit mb-* utility still wins.               */
.row.g-2:has(> [class*="col-"] > .card),
.row.g-3:has(> [class*="col-"] > .card),
.row.g-4:has(> [class*="col-"] > .card),
.row.g-5:has(> [class*="col-"] > .card),
.row.gy-2:has(> [class*="col-"] > .card),
.row.gy-3:has(> [class*="col-"] > .card),
.row.gy-4:has(> [class*="col-"] > .card),
.row:has(> [class*="col-"] > .card.h-100) {
    margin-bottom: var(--wf-space-lg);
}
.card-header {
    padding: var(--wf-space-lg);
    border-bottom: 1px solid var(--wf-border-light);
    background: transparent;
}
.card-header .card-title {
    font-size: var(--wf-font-size-lg);
    font-weight: 600;
    color: var(--wf-text);
    margin: 0;
}
.card-body {
    padding: var(--wf-space-lg);
}
.card-footer {
    padding: var(--wf-space-md) var(--wf-space-lg);
    border-top: 1px solid var(--wf-border-light);
    background: var(--wf-bg);
    border-radius: 0 0 var(--wf-radius-lg) var(--wf-radius-lg);
}

/* Card loading state (replaces Atlantis .is-loading) */
.card.is-loading {
    position: relative;
    pointer-events: none;
}
.card.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.7);
    border-radius: var(--wf-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stat cards */
.card-stats {
    /* Tiles size their text against their own width, not the viewport, so a
       4-up grid on a tablet behaves like a narrow tile rather than a wide one. */
    container-type: inline-size;
}
.card-stats .card-body {
    display: flex;
    align-items: center;
    gap: var(--wf-space-lg);
}

/* The three markup variants in use all put the value in a plain <div> next to
   the icon. Flex items default to min-width:auto, so that div refuses to
   shrink and the currency value spills outside the card. */
.card-stats .card-body > .d-flex,
.card-stats .card-body > .numbers,
.card-stats .card-body > div:not(.icon-big) {
    flex: 1 1 auto;
    min-width: 0;
}
.card-stats .card-body .d-flex > *:not(.icon-big) {
    flex: 1 1 auto;
    min-width: 0;
}

/* Legacy Atlantis stat markup nests a grid (.row > .col-5 icon + .col-7.col-stats)
   inside the flex .card-body. Left alone the row never grows and the value column
   is starved, which wraps currency mid-digits. Collapse the grid so the icon takes
   its natural width and the value gets everything else. */
.card-stats .card-body > .row {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--wf-space-md);
}
.card-stats .card-body > .row > [class*="col-"] {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}
/* The icon is always the first column here; it must not be squeezed. */
.card-stats .card-body > .row > [class*="col-"]:first-child {
    flex: 0 0 auto;
}
.card-stats .card-body > .row > .col-stats,
.card-stats .card-body > .row > [class*="col-"]:last-child {
    flex: 1 1 auto;
}

.card-stats .icon-big {
    width: 56px;
    height: 56px;
    border-radius: var(--wf-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.card-stats .icon-big.icon-primary   { background: var(--wf-primary-bg); color: var(--wf-primary); }
.card-stats .icon-big.icon-success   { background: var(--wf-success-bg); color: var(--wf-success); }
.card-stats .icon-big.icon-warning   { background: var(--wf-warning-bg); color: var(--wf-warning); }
.card-stats .icon-big.icon-danger    { background: var(--wf-danger-bg);  color: var(--wf-danger); }
.card-stats .icon-big.icon-info      { background: var(--wf-info-bg);    color: var(--wf-info); }
.card-stats .icon-big.icon-secondary { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

.card-stats .numbers {
    flex: 1;
    min-width: 0;
}
.card-stats .numbers .card-category,
.card-stats .card-body .card-category {
    font-size: var(--wf-font-size-sm);
    color: var(--wf-text-muted);
    font-weight: 500;
    margin-bottom: var(--wf-space-xs);
    line-height: 1.35;
}
.card-stats .numbers .card-title,
.card-stats .card-body > .card-title,
.card-stats .card-body .numbers > .card-title {
    /* Scales down on narrow phones instead of wrapping a currency value. */
    font-size: clamp(1.15rem, 5.2vw, var(--wf-font-size-2xl));
    font-weight: 700;
    color: var(--wf-text);
    margin: 0;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    overflow-wrap: normal;
    word-break: normal;
}
/* Trailing "(₦x/mo after trial)" notes must not inflate the value line. */
.card-stats .card-title > small {
    display: block;
    font-size: var(--wf-font-size-xs);
    font-weight: 500;
    line-height: 1.35;
    margin-top: 2px;
}

/* Narrow tiles (a 4-up grid on a tablet, or 2-up on a phone) step the value
   and icon down so an eight-character currency figure still fits on one line.
   The clamp above remains the fallback where @container is unsupported. */
@container (max-width: 235px) {
    .card-stats .card-title,
    .card-stats .numbers .card-title,
    .card-stats .card-body .numbers > .card-title {
        font-size: 1.15rem;
    }
    .card-stats .icon-big {
        width: 44px;
        height: 44px;
        font-size: 1.15rem;
    }
    /* Trimmed so an eight-character currency value clears the icon on one
       line down to a 176px tile. */
    .card-stats .card-body {
        padding: var(--wf-space-md);
        gap: var(--wf-space-sm);
    }
}
@container (max-width: 190px) {
    .card-stats .card-title,
    .card-stats .numbers .card-title,
    .card-stats .card-body .numbers > .card-title {
        font-size: 1.02rem;
    }
    .card-stats .icon-big {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
    /* Every pixel counts here: trim the tile padding so the value keeps
       one line instead of breaking after the thousands separator. */
    .card-stats .card-body {
        padding: var(--wf-space-md) var(--wf-space-sm);
        gap: var(--wf-space-sm);
    }
    /* Templates space the icon from the text with .ms-3 in the modern markup
       and a row gap in the legacy markup. Both need trimming here. */
    .card-stats .card-body .d-flex > .ms-3 {
        margin-left: var(--wf-space-sm) !important;
    }
    .card-stats .card-body > .row {
        gap: var(--wf-space-sm);
    }
}

/* Headline currency figure (wallet balance, totals). Scales with the viewport
   and never wraps mid-number. Colour comes from Bootstrap text utilities. */
.wf-money {
    font-size: clamp(1.5rem, 6.5vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Buttons (extend Bootstrap 5) ── */
.btn {
    font-family: var(--wf-font-family);
    font-weight: 500;
    border-radius: var(--wf-radius-md);
    padding: 0.5rem 1.25rem;
    font-size: var(--wf-font-size-sm);
    transition: all var(--wf-transition);
}

.btn-primary {
    background: var(--wf-primary);
    border-color: var(--wf-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--wf-primary-hover);
    border-color: var(--wf-primary-hover);
}

.btn-accent {
    background: var(--wf-accent);
    border-color: var(--wf-accent);
    color: #fff;
}
.btn-accent:hover, .btn-accent:focus {
    background: var(--wf-accent-hover);
    border-color: var(--wf-accent-hover);
    color: #fff;
}

.btn-outline-primary {
    color: var(--wf-primary);
    border-color: var(--wf-primary);
}
.btn-outline-primary:hover {
    background: var(--wf-primary);
    color: #fff;
}

.btn-outline-danger {
    color: var(--wf-danger);
    border-color: var(--wf-danger);
}
.btn-outline-danger:hover {
    background: var(--wf-danger);
    color: #fff;
    border-color: var(--wf-danger);
}

.btn-outline-secondary {
    color: var(--wf-text-secondary);
    border-color: var(--wf-border);
}
.btn-outline-secondary:hover {
    background: var(--wf-bg-alt);
    color: var(--wf-text);
    border-color: var(--wf-border);
}

/* ── Tables ── */
.table {
    font-size: var(--wf-font-size-sm);
    color: var(--wf-text);
}
.table thead th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--wf-font-size-sm);
    letter-spacing: 0.5px;
    color: var(--wf-text-secondary);
    border-bottom: 2px solid var(--wf-border);
    padding: var(--wf-space-md);
    white-space: nowrap;
}
.table tbody td {
    padding: var(--wf-space-md);
    border-bottom: 1px solid var(--wf-border-light);
    vertical-align: middle;
    color: var(--wf-text);
}
.table-hover tbody tr:hover {
    background: var(--wf-bg);
}

/* Applied by app.js to bare <table> elements. Scrolls only on small screens
   so desktop keeps overflow: visible and in-cell dropdowns are not clipped. */
.wf-table-scroll { max-width: 100%; }
@media (max-width: 991.98px) {
    .wf-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive,
    .wf-table-scroll {
        scrollbar-width: thin;
    }
}

/* ── Forms (extend Bootstrap 5) ── */
.form-control, .form-select {
    font-family: var(--wf-font-family);
    font-size: var(--wf-font-size-base);
    border-color: var(--wf-border);
    border-radius: var(--wf-radius-md);
    padding: 0.5rem 0.875rem;
    color: var(--wf-text);
    transition: all var(--wf-transition);
}
.form-control:focus, .form-select:focus {
    border-color: var(--wf-primary-light);
    box-shadow: 0 0 0 3px var(--wf-primary-bg);
}
.form-control::placeholder {
    color: var(--wf-text-light);
}
.form-label {
    font-weight: 500;
    font-size: var(--wf-font-size-sm);
    color: var(--wf-text);
    margin-bottom: var(--wf-space-xs);
}

/* ── Alerts ── */
.alert {
    border-radius: var(--wf-radius-md);
    border: none;
    font-size: var(--wf-font-size-sm);
    padding: var(--wf-space-md) var(--wf-space-lg);
}
.alert-success { background: var(--wf-success-bg); color: var(--wf-success-text); border-left: 4px solid var(--wf-success); }
.alert-danger  { background: var(--wf-danger-bg);  color: var(--wf-danger-text);  border-left: 4px solid var(--wf-danger); }
.alert-warning { background: var(--wf-warning-bg); color: var(--wf-warning-text); border-left: 4px solid var(--wf-warning); }
.alert-info    { background: var(--wf-info-bg);    color: var(--wf-info-text);    border-left: 4px solid var(--wf-info); }

/* ── Badges ── */
.badge {
    font-weight: 600;
    font-size: var(--wf-font-size-xs);
    padding: 0.3em 0.65em;
    border-radius: var(--wf-radius-full);
}

/* ── Modals ── */
.modal-content {
    border: none;
    border-radius: var(--wf-radius-xl);
    box-shadow: var(--wf-shadow-xl);
}
.modal-header {
    border-bottom: 1px solid var(--wf-border-light);
    padding: var(--wf-space-lg);
}
.modal-body { padding: var(--wf-space-lg); }
.modal-footer {
    border-top: 1px solid var(--wf-border-light);
    padding: var(--wf-space-md) var(--wf-space-lg);
}

/* ── Footer ── */
.footer {
    padding: var(--wf-space-md) var(--wf-space-xl);
    border-top: 1px solid var(--wf-border);
    font-size: var(--wf-font-size-sm);
    color: var(--wf-text-muted);
    background: var(--wf-surface);
    margin-top: auto;
}
.footer .copyright {
    text-align: right;
}
.footer a { color: var(--wf-text-muted); }
.footer a:hover { color: var(--wf-primary); }

/* ── DataTables overrides ── */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    font-size: var(--wf-font-size-sm);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-md);
    padding: 0.35rem 0.75rem;
}
.dataTables_wrapper .dataTables_info {
    font-size: var(--wf-font-size-sm);
    color: var(--wf-text-muted);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--wf-radius-md);
    font-size: var(--wf-font-size-sm);
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .logo-header {
        width: auto;
        padding: 0 var(--wf-space-md);
        /* The sidebar is off-canvas here, so the brand block must be able to
           give up space rather than push the topbar icons off-screen. */
        flex-shrink: 1;
        overflow: hidden;
    }

    /* Tighter gutters leave room for the bell / theme / avatar trio. */
    .navbar-header {
        padding: 0 var(--wf-space-sm);
    }

    /* The avatar already identifies the user, and the name is repeated in
       the dropdown. */
    .navbar-header .profile-username,
    .navbar-header .profile-pic .op-7 {
        display: none;
    }

    .sidenav-toggler,
    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    .navbar-header .topbar-nav .nav-link {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }

    html.nav_open .sidebar {
        transform: translateX(0);
        box-shadow: var(--wf-shadow-xl);
    }

    .main-panel {
        margin-left: 0;
    }

    /* Overlay behind sidebar on mobile */
    html.nav_open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 1015;
    }

    .main-panel > .container,
    .main-panel > .container-fluid,
    .main-panel > .content {
        padding: var(--wf-space-md);
    }

    .main-panel > .content > .page-inner,
    .main-panel > .container-fluid > .page-inner,
    .main-panel > .container > .page-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Collapsed sidebar is desktop-only — never offset content on phones */
    .wrapper.sidebar_minimize .main-panel {
        margin-left: 0 !important;
    }
    .wrapper.sidebar_minimize .logo-header {
        width: auto !important;
    }
}

@media (max-width: 575.98px) {
    .main-panel > .container,
    .main-panel > .container-fluid,
    .main-panel > .content {
        padding-left: var(--wf-space-sm);
        padding-right: var(--wf-space-sm);
    }

    .page-header .page-title {
        font-size: var(--wf-font-size-xl);
    }

    .card-body { padding: var(--wf-space-md); }

    .logo-header .logo-text {
        max-width: min(38vw, 9rem);
        font-size: var(--wf-font-size-base);
    }
}

/* ── Mobile form responsiveness ──
   Scoped to forms and full-width content wrappers only.
   An earlier blanket version of this block matched every column inside
   ".page-inner .row", which flattened working KPI grids (even correct
   "col-sm-6 col-md-3" markup) into one oversized card per row on every
   page below 992px. Keep this list narrow.                              */
@media (max-width: 991.98px) {
    .page-inner form .row > [class*="col-sm-"],
    .page-inner form .row > [class*="col-md-"],
    .page-inner form .row > [class*="col-lg-"],
    .page-inner .row > [class*="col-"]:has(> form),
    .page-inner .col-md-8,
    .page-inner .col-md-8.mx-auto,
    .page-inner .col-md-8.offset-md-2,
    .page-inner .col-md-10.mx-auto,
    .page-inner .col-md-10.offset-md-1,
    .page-inner .col-lg-8.mx-auto,
    .page-inner .col-lg-6.mx-auto {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Nested form field columns — stack on small tablets */
    .page-inner form .card-body .col-md-6,
    .page-inner .card-body form .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* In a main/sidebar split the main column is already full width above,
       so the narrow companion column should stack rather than sit in a
       leftover strip. Scoped to that layout only, so 3-up and 4-up card
       grids keep their tablet columns.                                   */
    .page-inner .row:has(> .col-md-8) > .col-md-4,
    .page-inner .row:has(> .col-md-9) > .col-md-3,
    .page-inner .row:has(> .col-lg-8) > .col-lg-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ── KPI / stat grids below desktop ──
   Fixed column fractions leave holes: a row of three tiles at 50% each breaks
   as two plus a lone orphan, and a "col-md-3" row becomes four tiles too
   narrow for a currency value. Pack instead — fit as many ~170px tiles per
   row as the width allows and let the last row stretch to fill. Three tiles
   then sit on one row from about 600px up, with no orphan at any width.   */
@media (max-width: 991.98px) {
    .page-inner .row:has(> [class*="col-"] > .card-stats),
    .page-inner .row:has(> [class*="col-"] > .wf-stat-accent-card) {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: var(--wf-space-md);
        /* .row carries negative margins to cancel column gutters; the grid
           owns spacing now, and the negative top would ride up over the
           preceding heading. The bottom margin separates the tiles from the
           next section. */
        margin: 0 0 var(--wf-space-lg);
    }
    /* Bootstrap sizes and gutters the columns; the grid owns both now. */
    .page-inner .row:has(> [class*="col-"] > .card-stats) > [class*="col-"],
    .page-inner .row:has(> [class*="col-"] > .wf-stat-accent-card) > [class*="col-"] {
        flex: none;
        width: auto;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        margin-top: 0;
    }
    /* A deliberately full-width highlight tile spans the whole row. */
    .page-inner .row > .col-12:has(> .card-stats),
    .page-inner .row > .col-md-12:has(> .card-stats) {
        grid-column: 1 / -1;
    }

    /* Equal-height tiles, so a two-line value never leaves a short neighbour. */
    .page-inner .row:has(> [class*="col-"] > .card-stats) > [class*="col-"] > .card,
    .page-inner .row:has(> [class*="col-"] > .wf-stat-accent-card) > [class*="col-"] > .card {
        height: 100%;
        margin-bottom: 0;
    }
}

/* Four or more tiles read better as a deliberate two-column block than as
   three across with a straggler, so pin the track count on small screens.
   Filling whatever the last row leaves over is handled by initStatGridFill()
   in app.js, which is the only place the resolved track count is known; the
   odd-child rule below is the no-JS fallback for the common phone case.    */
@media (max-width: 767.98px) {
    .page-inner .row:has(> [class*="col-"] > .card-stats):has(> :nth-child(4)),
    .page-inner .row:has(> [class*="col-"] > .wf-stat-accent-card):has(> :nth-child(4)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .page-inner .row:has(> [class*="col-"] > .card-stats),
    .page-inner .row:has(> [class*="col-"] > .wf-stat-accent-card) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .page-inner .row:has(> [class*="col-"] > .card-stats) > [class*="col-"]:last-child:nth-child(odd),
    .page-inner .row:has(> [class*="col-"] > .wf-stat-accent-card) > [class*="col-"]:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    /* Reclaim width for the value: smaller icon tile on phones. */
    .card-stats .icon-big {
        width: 44px;
        height: 44px;
        font-size: 1.15rem;
    }
    .card-stats .card-body {
        gap: var(--wf-space-md);
    }
    .card-stats .card-body > .row {
        gap: var(--wf-space-sm);
    }
    .card-stats .numbers .card-category,
    .card-stats .card-body .card-category {
        font-size: var(--wf-font-size-xs);
    }
}

/* ── Mobile hardening ──
   Fixed-width chrome and wide content were pushing phones sideways.  */
@media (max-width: 575.98px) {
    /* Header dropdowns were hard-coded to 340px / 280px. */
    .notif-box,
    .dropdown-user {
        width: auto;
        min-width: 250px;
        max-width: calc(100vw - var(--wf-space-md) * 2);
    }

    .toast-container {
        left: var(--wf-space-sm);
        right: var(--wf-space-sm);
    }
    .toast-container > * { max-width: 100%; }

    .footer {
        padding: var(--wf-space-md);
        text-align: center;
    }
    /* The template lays this out with justify-content-between, which squeezes
       the long copyright line on a phone. Stack it instead. */
    .footer .container-fluid {
        flex-direction: column;
        align-items: center;
        gap: var(--wf-space-xs);
    }
    .footer .copyright { text-align: center; }
    .footer .nav { justify-content: center; }

    /* Banners that pair a message with a trailing action button. */
    .alert .d-flex.align-items-center,
    .alert .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: var(--wf-space-sm);
    }
    .alert .btn { white-space: normal; }

    /* Toolbars and segmented controls wrap instead of widening the page. */
    .page-inner .btn-group,
    .page-inner .btn-toolbar {
        flex-wrap: wrap;
    }

    .page-header .page-title { overflow-wrap: break-word; }
}

/* Nothing should be able to create a page-level horizontal scrollbar. */
@media (max-width: 991.98px) {
    .main-panel,
    .main-panel > .content,
    .main-panel > .container-fluid,
    .page-inner {
        max-width: 100%;
        min-width: 0;
    }
    .page-inner img,
    .page-inner canvas,
    .page-inner iframe {
        max-width: 100%;
    }
    .page-inner pre {
        max-width: 100%;
        overflow-x: auto;
    }
    /* Inline min-widths in templates must not win on a 390px screen. */
    .page-inner [style*="min-width"] {
        max-width: 100%;
    }
}

/* Ensure form groups have breathing room */
.page-inner .form-group {
    margin-bottom: 1.15rem;
}

/* Better touch targets for form controls on mobile */
@media (max-width: 767.98px) {
    .page-inner .form-control,
    .page-inner .form-select {
        min-height: 44px;
        font-size: 16px; /* prevents iOS zoom on focus */
    }

    .page-inner .btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }

    /* Stack form buttons vertically on phone */
    .page-inner .form-group > .btn,
    .page-inner .form-group > a.btn {
        display: block;
        width: 100%;
        margin-left: 0 !important;
        margin-bottom: 0.5rem;
    }

    /* Breadcrumbs: allow wrapping */
    .breadcrumbs {
        flex-wrap: wrap;
    }
}

/* ── Sidebar minimize (desktop only) ── */
@media (min-width: 992px) {
.wrapper.sidebar_minimize .sidebar {
    width: var(--wf-sidebar-mini-width);
}
.wrapper.sidebar_minimize .logo-header {
    width: var(--wf-sidebar-mini-width);
}
.wrapper.sidebar_minimize .main-panel {
    margin-left: var(--wf-sidebar-mini-width);
}
.wrapper.sidebar_minimize .sidebar .user .info,
.wrapper.sidebar_minimize .sidebar .nav-item > a p,
.wrapper.sidebar_minimize .sidebar .nav-section,
.wrapper.sidebar_minimize .sidebar .submenu-toggle .caret,
.wrapper.sidebar_minimize .sidebar .nav-submenu,
.wrapper.sidebar_minimize .sidebar-footer .toggle-sidebar i::before { content: '\f055'; } /* switch icon */
.wrapper.sidebar_minimize .sidebar .user .info,
.wrapper.sidebar_minimize .sidebar .nav-item > a p,
.wrapper.sidebar_minimize .sidebar .nav-section,
.wrapper.sidebar_minimize .sidebar .submenu-toggle .caret,
.wrapper.sidebar_minimize .sidebar .collapse.show {
    display: none !important;
}
.wrapper.sidebar_minimize .sidebar .nav-item > a {
    justify-content: center;
    padding: 0.75rem;
}
.wrapper.sidebar_minimize .sidebar .nav-item > a i {
    width: auto;
    font-size: 1.2rem;
}
.wrapper.sidebar_minimize .sidebar-footer .toggle-sidebar {
    text-align: center;
}

/* Expand on hover when minimized */
.wrapper.sidebar_minimize .sidebar:hover {
    width: var(--wf-sidebar-width);
}
.wrapper.sidebar_minimize .sidebar:hover .user .info,
.wrapper.sidebar_minimize .sidebar:hover .nav-item > a p,
.wrapper.sidebar_minimize .sidebar:hover .nav-section,
.wrapper.sidebar_minimize .sidebar:hover .submenu-toggle .caret {
    display: block !important;
}
.wrapper.sidebar_minimize .sidebar:hover .nav-item > a {
    justify-content: flex-start;
    padding: 0.6rem var(--wf-space-lg);
}
.wrapper.sidebar_minimize .sidebar:hover .nav-item > a i {
    width: 20px;
    font-size: 1rem;
}
.wrapper.sidebar_minimize .sidebar:hover .sidebar-footer .toggle-sidebar {
    text-align: left;
}
}

/* ── Scrollbar utility ── */
.scrollbar-outer,
.scrollbar-inner,
.scrollbar {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--wf-border) transparent;
}
.scrollbar-outer::-webkit-scrollbar,
.scrollbar-inner::-webkit-scrollbar,
.scrollbar::-webkit-scrollbar {
    width: 6px;
}
.scrollbar-outer::-webkit-scrollbar-thumb,
.scrollbar-inner::-webkit-scrollbar-thumb,
.scrollbar::-webkit-scrollbar-thumb {
    background: var(--wf-border);
    border-radius: 3px;
}

/* ── Toast notifications (replaces bootstrap-notify) ── */
.toast-container {
    position: fixed;
    top: calc(var(--wf-header-stack) + var(--wf-space-md));
    right: var(--wf-space-lg);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: var(--wf-space-sm);
}

/* ── Pagination ── */
.pagination .page-link {
    color: var(--wf-primary);
    border-color: var(--wf-border);
    font-size: var(--wf-font-size-sm);
    border-radius: var(--wf-radius-md);
    margin: 0 2px;
}
.pagination .page-item.active .page-link {
    background: var(--wf-primary);
    border-color: var(--wf-primary);
}

/* ── Dropdown menus ── */
.dropdown-menu {
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-lg);
    box-shadow: var(--wf-shadow-lg);
    font-size: var(--wf-font-size-sm);
    padding: var(--wf-space-sm) 0;
}
.dropdown-item {
    padding: 0.4rem var(--wf-space-lg);
    color: var(--wf-text-secondary);
    transition: all var(--wf-transition);
}
.dropdown-item:hover {
    background: var(--wf-primary-bg);
    color: var(--wf-primary);
}
.dropdown-divider {
    border-color: var(--wf-border-light);
    margin: var(--wf-space-sm) 0;
}

/* ── SweetAlert override to match design tokens ── */
.swal-overlay { background: rgba(0,0,0,0.4); }
.swal-modal { border-radius: var(--wf-radius-xl); font-family: var(--wf-font-family); }
.swal-title { font-weight: 700; color: var(--wf-text); }
.swal-text { color: var(--wf-text-secondary); font-size: var(--wf-font-size-sm); }
.swal-button {
    border-radius: var(--wf-radius-md);
    font-family: var(--wf-font-family);
    font-weight: 500;
}
.swal-button--confirm { background: var(--wf-primary); }
.swal-button--confirm:hover { background: var(--wf-primary-hover); }
.swal-button--cancel { background: var(--wf-bg); color: var(--wf-text); border: 1px solid var(--wf-border); }

/* ── Utility classes ── */
.text-primary   { color: var(--wf-primary) !important; }
.text-accent    { color: var(--wf-accent) !important; }
.text-success   { color: var(--wf-success) !important; }
.text-warning   { color: var(--wf-warning) !important; }
.text-danger    { color: var(--wf-danger) !important; }
.text-muted     { color: var(--wf-text-muted) !important; }
.bg-primary-50  { background: var(--wf-primary-bg) !important; }
.bg-success-50  { background: var(--wf-success-bg) !important; }
.bg-warning-50  { background: var(--wf-warning-bg) !important; }
.bg-danger-50   { background: var(--wf-danger-bg) !important; }

/* ── Dashboard stat icons (design tokens) ── */
.card-stats .wf-stat-icon {
    font-size: 1.75rem;
    line-height: 1;
}
.wf-stat-icon--customers { color: var(--wf-success); }
.wf-stat-icon--revenue { color: var(--wf-accent); }
.wf-stat-icon--plans { color: var(--wf-primary-light); }
.wf-stat-icon--wallet { color: var(--wf-info); }

/* ── Business admin “next steps” checklist ── */
.wf-next-steps {
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-lg);
    box-shadow: var(--wf-shadow-sm);
    background: linear-gradient(180deg, var(--wf-surface) 0%, var(--wf-bg-alt) 100%);
}
.wf-setup-steps { display: flex; flex-direction: column; gap: var(--wf-space-sm); }
.wf-setup-step {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wf-space-md);
    padding: var(--wf-space-md) var(--wf-space-lg);
    background: var(--wf-surface);
    border: 1px solid var(--wf-border-light);
    border-radius: var(--wf-radius-md);
}
.wf-setup-step.is-done {
    border-color: rgba(16, 185, 129, 0.35);
    background: var(--wf-success-bg);
}
.wf-setup-step__icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: var(--wf-radius-full);
    background: var(--wf-primary-bg);
    color: var(--wf-primary);
    font-weight: 700;
    font-size: var(--wf-font-size-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wf-setup-step.is-done .wf-setup-step__icon {
    background: var(--wf-success);
    color: #fff;
}
.wf-setup-step__body {
    flex: 1;
    min-width: 140px;
}

/* ── Tenant portal quick actions ── */
.wf-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--wf-space-md);
}
.wf-quick-actions .btn {
    min-height: 48px;
    font-weight: 600;
    border-radius: var(--wf-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar {
        transition: none !important;
    }
}

/* ── Theme toggle (header) ── */
[data-wf-theme-toggle] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: var(--wf-space-sm);
    border-radius: var(--wf-radius-md);
    color: rgba(255, 255, 255, 0.85) !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    cursor: pointer;
    transition: background var(--wf-transition), color var(--wf-transition);
    line-height: 1;
}
[data-wf-theme-toggle] i {
    font-size: 1.1rem;
    pointer-events: none;
}
[data-wf-theme-toggle]:hover,
[data-wf-theme-toggle]:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

/* ── Dark theme component polish ── */
[data-theme="dark"] body {
    background-color: var(--wf-bg);
    color: var(--wf-text);
}

[data-theme="dark"] .main-panel .card.is-loading::after {
    background: rgba(15, 23, 42, 0.72);
}

[data-theme="dark"] .main-panel .bg-light,
[data-theme="dark"] .main-panel pre.bg-light,
[data-theme="dark"] .main-panel .table-light,
[data-theme="dark"] .main-panel thead.table-light,
[data-theme="dark"] .main-panel .table-light > :not(caption) > * > * {
    --bs-table-bg: var(--wf-bg-alt);
    --bs-table-color: var(--wf-text);
    --bs-table-striped-bg: var(--wf-bg-alt);
    --bs-table-hover-bg: var(--wf-bg-alt);
    background-color: var(--wf-bg-alt) !important;
    color: var(--wf-text-secondary) !important;
}

[data-theme="dark"] .main-panel code {
    color: #fda4af;
}

[data-theme="dark"] .main-panel pre.bg-light code,
[data-theme="dark"] .main-panel pre code {
    color: var(--wf-text-secondary);
}

[data-theme="dark"] .modal-content {
    background: var(--wf-surface);
    border-color: var(--wf-border);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--wf-border);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
    background: var(--wf-bg-alt);
    border-color: var(--wf-border);
    color: var(--wf-text);
}

[data-theme="dark"] .page-link {
    background: var(--wf-surface);
    border-color: var(--wf-border);
    color: var(--wf-text-secondary);
}

[data-theme="dark"] .page-item.active .page-link {
    background: var(--wf-primary);
    border-color: var(--wf-primary);
    color: #fff;
}

[data-theme="dark"] .page-item.disabled .page-link {
    background: var(--wf-bg-alt);
    color: var(--wf-text-muted);
}

[data-theme="dark"] html.nav_open::after {
    background: rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .dropdown-menu {
    background: var(--wf-surface);
    border-color: var(--wf-border);
    color: var(--wf-text);
}

[data-theme="dark"] .dropdown-item {
    color: var(--wf-text-secondary);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background: var(--wf-primary-bg);
    color: var(--wf-primary);
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--wf-border);
}

[data-theme="dark"] .nav-tabs {
    border-color: var(--wf-border);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--wf-text-muted);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--wf-border);
    color: var(--wf-text);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background: var(--wf-surface);
    border-color: var(--wf-border) var(--wf-border) var(--wf-surface);
    color: var(--wf-text);
}

[data-theme="dark"] .list-group-item {
    background: var(--wf-surface);
    border-color: var(--wf-border);
    color: var(--wf-text);
}

[data-theme="dark"] .table {
    --bs-table-color: var(--wf-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--wf-border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-striped-color: var(--wf-text);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-color: var(--wf-text);
    color: var(--wf-text);
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] .thead-light th {
    background: var(--wf-bg-alt);
    color: var(--wf-text-secondary);
    border-color: var(--wf-border);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--wf-bg);
    border-color: var(--wf-border);
    color: var(--wf-text);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: var(--wf-bg);
    border-color: var(--wf-primary);
    color: var(--wf-text);
    box-shadow: 0 0 0 3px var(--wf-primary-bg);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--wf-text-muted);
}

[data-theme="dark"] .card-stats .icon-big.icon-secondary {
    background: rgba(167, 139, 250, 0.18);
    color: #a78bfa;
}

[data-theme="dark"] .swal-modal {
    background: var(--wf-surface);
}

[data-theme="dark"] .swal-title {
    color: var(--wf-text);
}

[data-theme="dark"] .swal-text {
    color: var(--wf-text-secondary);
}

[data-theme="dark"] .swal-button--cancel {
    background: var(--wf-bg-alt);
    color: var(--wf-text);
    border-color: var(--wf-border);
}

[data-theme="dark"] .text-muted {
    color: var(--wf-text-muted, #a8b6c8) !important;
}

[data-theme="dark"] .main-header,
[data-theme="dark"] .logo-header,
[data-bs-theme="dark"] .main-header,
[data-bs-theme="dark"] .logo-header {
    background: var(--wf-header-bg, #0f172a) !important;
    color: var(--wf-header-fg, #f8fafc);
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body {
    color: var(--wf-text) !important;
}

[data-theme="dark"] .text-secondary {
    color: var(--wf-text-secondary) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--wf-surface) !important;
}

[data-theme="dark"] .bg-light,
[data-theme="dark"] .text-bg-light {
    background-color: var(--wf-bg-alt) !important;
    color: var(--wf-text) !important;
}

[data-theme="dark"] .text-bg-secondary {
    background-color: var(--wf-bg-alt) !important;
    color: var(--wf-text-secondary) !important;
}

[data-theme="dark"] .bg-warning,
[data-theme="dark"] .card-header.bg-warning {
    background-color: var(--wf-warning-bg) !important;
    color: var(--wf-warning-text) !important;
}

[data-theme="dark"] .card-header.bg-warning .card-title {
    color: var(--wf-warning-text);
}

[data-theme="dark"] .btn-outline-primary {
    color: var(--wf-primary);
    border-color: var(--wf-primary);
}

[data-theme="dark"] .btn-outline-primary:hover {
    background: var(--wf-primary);
    color: #0f172a;
}

[data-theme="dark"] .btn-outline-danger {
    color: var(--wf-danger);
    border-color: var(--wf-danger);
}

[data-theme="dark"] .btn-outline-danger:hover {
    background: var(--wf-danger);
    color: #0f172a;
    border-color: var(--wf-danger);
}

[data-theme="dark"] .btn-outline-secondary {
    color: var(--wf-text-secondary);
    border-color: var(--wf-border);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: var(--wf-bg-alt);
    color: var(--wf-text);
}

[data-theme="dark"] .table tbody td,
[data-theme="dark"] .table tbody th {
    color: var(--wf-text);
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
    border-color: var(--wf-border) !important;
}

/* ── Theme-aware dashboard widgets ── */
.wf-contact-panel { border: none; overflow: hidden; }
.wf-contact-panel__header {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 60%, #075E54 100%);
    border: none;
    padding: 18px 24px;
    color: #fff;
}
.wf-contact-panel__header .card-title { color: #fff; font-weight: 700; }
.wf-contact-panel__header-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
    color: #fff;
    font-size: 24px;
}
.wf-contact-panel__subtitle { color: rgba(255, 255, 255, 0.8); }
.wf-contact-panel__edit-btn {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 5px 16px;
    font-size: 0.82rem;
    white-space: nowrap;
}
.wf-contact-panel__edit-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.3); }
.wf-contact-panel__body {
    padding: 20px 24px;
    background: var(--wf-bg-alt);
}
.wf-contact-tile {
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    box-shadow: var(--wf-shadow-sm);
    border-radius: var(--wf-radius-md);
}
.wf-contact-tile__title { color: var(--wf-text); font-weight: 700; letter-spacing: 0.3px; }
.wf-contact-tile__title--wa { color: var(--wf-accent); }
.wf-contact-tile__title--call { color: var(--wf-primary); }
.wf-contact-tile__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 14px;
    color: #fff;
    font-size: 18px;
}
.wf-contact-tile__icon--wa { background: linear-gradient(135deg, #25D366, #128C7E); }
.wf-contact-tile__icon--call { background: linear-gradient(135deg, var(--wf-primary-light), var(--wf-primary)); }
.wf-contact-btn-wa {
    background: #25D366;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.78rem;
}
.wf-contact-btn-wa:hover { color: #fff; background: #128C7E; }
.wf-contact-btn-call {
    background: var(--wf-primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.78rem;
}
.wf-contact-btn-call:hover { color: #fff; background: var(--wf-primary-hover); }
.wf-contact-empty-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--wf-accent-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    color: #25D366;
    font-size: 28px;
}
.wf-contact-empty-title { color: var(--wf-text); font-weight: 600; }

.wf-gateway-card {
    cursor: pointer;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-lg);
    box-shadow: var(--wf-shadow-sm);
    transition: border-color var(--wf-transition), box-shadow var(--wf-transition);
    background: var(--wf-surface);
}
.wf-gateway-card:hover { border-color: var(--wf-primary); }
.wf-gateway-title { font-size: 16px; color: var(--wf-text); }
.wf-gateway-hint { font-size: 12px; color: var(--wf-text-muted); font-weight: 400; }
.wf-gateway-fee { font-size: 12px; color: var(--wf-danger); font-weight: 600; margin-top: 4px; }
.wf-gateway-fee-sm { font-size: 11px; color: var(--wf-danger); font-weight: 600; margin-top: 4px; }

.wf-section-rule {
    flex: 1;
    height: 2px;
    background: var(--wf-border);
}

.wf-provider-card {
    cursor: pointer;
    border: 2px solid var(--wf-border);
    border-radius: var(--wf-radius-lg);
    padding: 20px 16px;
    text-align: center;
    background: var(--wf-surface);
    transition: border-color var(--wf-transition), background var(--wf-transition);
    color: var(--wf-text);
}
.wf-provider-card.is-selected {
    border-color: var(--wf-primary);
    background: var(--wf-primary-bg);
}
.wf-provider-card__hint { font-size: 0.82rem; color: var(--wf-text-muted); }

.wf-stat-accent-card {
    border-left: 4px solid var(--wf-primary);
}
.wf-stat-accent-card--success { border-left-color: var(--wf-success); }
.wf-stat-accent-card--info { border-left-color: var(--wf-info); }
.wf-stat-accent-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--wf-primary-bg);
    color: var(--wf-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wf-stat-accent-card--success .wf-stat-accent-icon {
    background: var(--wf-success-bg);
    color: var(--wf-success);
}
.wf-stat-accent-card--info .wf-stat-accent-icon {
    background: var(--wf-info-bg);
    color: var(--wf-info);
}

.wf-custom-check .form-check-label::before {
    border-color: var(--wf-border);
    background: var(--wf-surface);
}
.wf-custom-check .form-check-input:checked + .form-check-label::before {
    background: var(--wf-primary);
    border-color: var(--wf-primary);
}

/* Floating theme toggle for pages without a header control */
.wf-theme-fab {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--wf-border);
    background: var(--wf-surface);
    color: var(--wf-text);
    box-shadow: var(--wf-shadow-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.wf-theme-fab:hover,
.wf-theme-fab:focus-visible {
    background: var(--wf-primary-bg);
    color: var(--wf-primary);
    outline: none;
}

/* ════════════════════════════════════════════════════════════════════════
   LEGACY MARKUP COMPATIBILITY
   The dashboard templates were written against the Atlantis theme and
   Bootstrap 4. Both are gone; these classes are still in ~190 templates.
   Styling them here keeps every page rendering correctly without a
   190-file rewrite. Prefer the modern equivalents in new markup.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Atlantis leftovers ── */
.card-round { border-radius: var(--wf-radius-lg); }
.col-stats { min-width: 0; }

.card-stats.card-primary,
.card-stats.card-success,
.card-stats.card-info,
.card-stats.card-warning,
.card-stats.card-danger {
    color: #fff;
    border: none;
}
.card-stats.card-primary { background: var(--wf-primary); }
.card-stats.card-success { background: var(--wf-success); }
.card-stats.card-info    { background: var(--wf-info); }
.card-stats.card-warning { background: var(--wf-warning); }
.card-stats.card-danger  { background: var(--wf-danger); }
.card-stats.card-primary .card-title,
.card-stats.card-success .card-title,
.card-stats.card-info .card-title,
.card-stats.card-warning .card-title,
.card-stats.card-danger .card-title,
.card-stats.card-primary .card-category,
.card-stats.card-success .card-category,
.card-stats.card-info .card-category,
.card-stats.card-warning .card-category,
.card-stats.card-danger .card-category {
    color: #fff;
}
.card-stats.card-primary .icon-big,
.card-stats.card-success .icon-big,
.card-stats.card-info .icon-big,
.card-stats.card-warning .icon-big,
.card-stats.card-danger .icon-big {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* ── Bootstrap 4 → 5 shims ── */
.btn-block {
    display: block;
    width: 100%;
}
.btn-block + .btn-block { margin-top: var(--wf-space-sm); }

.badge-pill { border-radius: var(--wf-radius-full); }
.badge.badge-primary   { background: var(--wf-primary); color: #fff; }
.badge.badge-secondary { background: var(--wf-text-muted); color: #fff; }
.badge.badge-success   { background: var(--wf-success); color: #fff; }
.badge.badge-danger    { background: var(--wf-danger); color: #fff; }
.badge.badge-warning   { background: var(--wf-warning); color: #1f2937; }
.badge.badge-info      { background: var(--wf-info); color: #fff; }
.badge.badge-light     { background: var(--wf-bg-alt); color: var(--wf-text); }
.badge.badge-dark      { background: var(--wf-text); color: var(--wf-surface); }

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.form-row > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

.font-weight-bold { font-weight: 700; }
.font-weight-normal { font-weight: 400; }
.font-italic { font-style: italic; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.float-left { float: left; }
.float-right { float: right; }

.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 1rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 1rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 1rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 1rem; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* BS4 dismiss button (".close") — style like Bootstrap 5's .btn-close */
.alert > .close,
.modal-header > .close,
.card-header > .close {
    float: right;
    background: transparent;
    border: 0;
    font-size: 1.35rem;
    line-height: 1;
    padding: 0 0.25rem;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
}
.alert > .close:hover,
.modal-header > .close:hover,
.card-header > .close:hover { opacity: 1; }

/* BS4 custom form controls */
.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.9rem;
}
.custom-control-input {
    position: absolute;
    left: 0;
    z-index: 1;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.18rem 0 0 0;
    opacity: 0;
}
.custom-control-label {
    position: relative;
    margin-bottom: 0;
    cursor: pointer;
}
.custom-control-label::before {
    content: "";
    position: absolute;
    top: 0.18rem;
    left: -1.9rem;
    width: 1.15rem;
    height: 1.15rem;
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
}
.custom-switch .custom-control-label::before {
    width: 2rem;
    border-radius: var(--wf-radius-full);
}
.custom-control-input:checked ~ .custom-control-label::before {
    background: var(--wf-primary);
    border-color: var(--wf-primary);
}
.custom-control-input:checked ~ .custom-control-label::after {
    content: "";
    position: absolute;
    top: 0.38rem;
    left: -1.55rem;
    width: 0.4rem;
    height: 0.7rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    top: 0.35rem;
    left: -1.05rem;
    width: 0.7rem;
    height: 0.7rem;
    border: none;
    border-radius: 50%;
    background: #fff;
    transform: none;
}
.custom-control-input:focus-visible ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px var(--wf-primary-bg);
}

.custom-file,
.custom-file-input { width: 100%; }
.custom-file-label {
    display: block;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-md);
    background: var(--wf-surface);
    color: var(--wf-text-secondary);
    font-size: var(--wf-font-size-sm);
}
.custom-select {
    display: block;
    width: 100%;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-md);
    background: var(--wf-surface);
    color: var(--wf-text);
}

/* ── Business admin feature hub ── */
.wf-feature-hub {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
.wf-feature-tile {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-md);
    background: var(--wf-bg);
    color: var(--wf-text);
    text-decoration: none;
    transition: border-color var(--wf-transition), box-shadow var(--wf-transition), transform var(--wf-transition);
    min-height: 100%;
}
.wf-feature-tile:hover {
    color: var(--wf-text);
    border-color: var(--wf-primary-light);
    box-shadow: var(--wf-shadow-sm, 0 4px 12px rgba(30, 58, 138, 0.08));
    transform: translateY(-1px);
}
.wf-feature-tile__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--wf-radius-md);
    background: var(--wf-primary-bg);
    color: var(--wf-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wf-feature-tile__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.wf-feature-tile__label {
    font-weight: 600;
    font-size: var(--wf-font-size-sm);
    line-height: 1.3;
}
.wf-feature-tile__hint {
    font-size: 0.75rem;
    color: var(--wf-text-muted);
    line-height: 1.35;
}