/*
 * WaestaPay design layer.
 *
 * Loaded after Bootstrap and app.css on every console page. It restyles the
 * shared building blocks (cards, tables, badges, buttons, forms, sidebar, top
 * bar) so every page gets the same finish without each template being rewritten.
 *
 * Direction: a calm financial ledger. Ink-navy navigation, a cool paper canvas,
 * one confident indigo accent, tabular numerals for every amount, and semantic
 * colour reserved for status (green settled, amber waiting, red failed).
 */

:root {
    --wp-ink: #0f172a;
    --wp-ink-2: #1e293b;
    --wp-text: #1f2937;
    --wp-muted: #64748b;
    --wp-line: #e6e9f0;
    --wp-canvas: #f4f6fb;
    --wp-surface: #ffffff;
    --wp-accent: #4f46e5;
    --wp-accent-hover: #4338ca;
    --wp-accent-soft: #eef0ff;
    --wp-good: #059669;
    --wp-good-soft: #e7f7f0;
    --wp-warn: #b45309;
    --wp-warn-soft: #fef3e2;
    --wp-bad: #dc2626;
    --wp-bad-soft: #fdecec;
    --wp-info: #0369a1;
    --wp-info-soft: #e6f3fb;
    --wp-radius: 14px;
    --wp-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .05);

    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4f46e5;
    --bs-link-hover-color: #4338ca;
    --bs-body-color: var(--wp-text);
    --bs-body-font-family: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-border-color: var(--wp-line);
}

body {
    font-family: var(--bs-body-font-family);
    font-size: .925rem;
    color: var(--wp-text);
    background: var(--wp-canvas);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01";
}

/* Money and figures line up in columns. */
.font-monospace, td.text-end, th.text-end, .metric-value, .stat-value, .fs-4.fw-bold, .fs-3.fw-bold, .fs-2.fw-bold {
    font-variant-numeric: tabular-nums;
}
.font-monospace { font-family: "Inter Variable", "Inter", ui-monospace, monospace !important; letter-spacing: -.005em; }

h1, h2, h3, h4, h5, h6 { color: var(--wp-ink); letter-spacing: -.012em; }
h3, .h3 { font-size: 1.45rem; font-weight: 700; }
h4, .h4 { font-size: 1.2rem; font-weight: 700; }
h5, .h5 { font-size: 1.08rem; font-weight: 650; }
h6, .h6 { font-weight: 650; }
.text-muted { color: var(--wp-muted) !important; }
a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ---------- Canvas and top bar ---------- */
.main-content { background: var(--wp-canvas); }
.main-content > .p-4 { padding: 1.75rem 2rem !important; max-width: 1560px; }
.main-content > .navbar {
    position: sticky; top: 0; z-index: 90;
    background: rgba(255, 255, 255, .88) !important;
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--wp-line) !important;
    min-height: 58px;
}
.main-content > .navbar .navbar-text {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 600; font-size: .85rem; color: var(--wp-ink);
    background: var(--wp-canvas); border: 1px solid var(--wp-line);
    padding: .3rem .8rem .3rem .45rem; border-radius: 999px;
}
.main-content > .navbar .navbar-text i {
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wp-accent-soft); color: var(--wp-accent); margin: 0 !important; font-size: .8rem;
}
.breadcrumb { font-size: .82rem; margin: 0 0 0 1rem; }
.breadcrumb-item a { color: var(--wp-muted); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--wp-accent); }
.breadcrumb-item.active { color: var(--wp-ink); font-weight: 600; }
#sidebarCollapseBtn, #sidebarToggle { border-color: var(--wp-line); color: var(--wp-muted); background: #fff; border-radius: 10px; }
#sidebarCollapseBtn:hover, #sidebarToggle:hover { color: var(--wp-accent); border-color: var(--wp-accent); background: var(--wp-accent-soft); }

/* ---------- Sidebar ---------- */
.sidebar.bg-dark {
    background: linear-gradient(180deg, #0b1220 0%, #0f172a 55%, #111c33 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, .04);
}
.sidebar .nav-link {
    position: relative; color: #9fb0c8 !important; font-weight: 500; font-size: .875rem;
    padding: .55rem .85rem; border-radius: 10px; margin-bottom: 2px;
    transition: background .15s ease, color .15s ease;
}
.sidebar .nav-link .sidebar-icon, .sidebar .nav-link .bi { opacity: .85; width: 1.35rem; text-align: center; }
.sidebar .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff !important; }
.sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(99, 102, 241, .28), rgba(99, 102, 241, .10));
    color: #fff !important; font-weight: 600;
}
.sidebar .nav-link.active::before {
    content: ""; position: absolute; left: -8px; top: 22%; bottom: 22%; width: 3px;
    border-radius: 3px; background: #818cf8;
}
.sidebar .nav-link.active .bi { color: #a5b4fc; opacity: 1; }
.sidebar-section-label {
    font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: #5f7190; padding: 1.1rem .85rem .35rem;
}
.sidebar-section-divider { border-top: 1px solid rgba(255, 255, 255, .07); margin: .75rem .5rem; }
.sidebar .badge.rounded-pill { font-weight: 700; }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-radius);
    background: var(--wp-surface);
    box-shadow: var(--wp-shadow) !important;
}
.card.border-0 { border: 1px solid var(--wp-line) !important; }
.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--wp-line);
    padding: .95rem 1.25rem;
    border-radius: var(--wp-radius) var(--wp-radius) 0 0 !important;
}
.card-header h5, .card-header h6, .card-header strong { font-weight: 650; color: var(--wp-ink); }
.card-body { padding: 1.25rem; }
.card-body.p-0 { padding: 0 !important; }
.card-footer { background: transparent; border-top: 1px solid var(--wp-line); }
.stat-card, .metric-card {
    border: 1px solid var(--wp-line) !important;
    border-radius: var(--wp-radius);
    box-shadow: var(--wp-shadow) !important;
}
.stat-card:hover, .metric-card:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 10px 24px rgba(15, 23, 42, .08) !important; }
.stat-card .stat-icon { border-radius: 12px; }
.metric-card .metric-label, .card .small.text-muted.text-uppercase, .stat-label {
    font-size: .68rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--wp-muted);
}
.metric-card .metric-value { color: var(--wp-ink); font-weight: 700; letter-spacing: -.02em; }
/* Tinted summary cards (bg-primary bg-opacity-10 etc.) read as flat panels, not raw Bootstrap. */
.card[class*="bg-opacity-10"] { box-shadow: none !important; }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: #f7f8fd; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .8rem 1rem; border-bottom-color: var(--wp-line); }
.table thead th, .table-light th, .table > thead > tr > th {
    background: #f8f9fc !important;
    color: var(--wp-muted) !important;
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    border-bottom: 1px solid var(--wp-line) !important; white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover > tbody > tr { transition: background .12s ease; }
.table-responsive { border-radius: 0 0 var(--wp-radius) var(--wp-radius); }
.card > .table-responsive:first-child, .card > .card-body.p-0 > .table-responsive { border-radius: var(--wp-radius); }
td .fw-semibold + .small, td .fw-semibold + .text-muted { margin-top: 1px; }

/* ---------- Badges: soft tints instead of loud solid blocks ---------- */
.badge {
    font-weight: 600; font-size: .72rem; letter-spacing: .01em;
    padding: .34em .7em; border-radius: 999px;
}
.badge.bg-success { background: var(--wp-good-soft) !important; color: var(--wp-good) !important; }
.badge.bg-danger { background: var(--wp-bad-soft) !important; color: var(--wp-bad) !important; }
.badge.bg-warning { background: var(--wp-warn-soft) !important; color: var(--wp-warn) !important; }
.badge.bg-info { background: var(--wp-info-soft) !important; color: var(--wp-info) !important; }
.badge.bg-primary { background: var(--wp-accent-soft) !important; color: var(--wp-accent) !important; }
.badge.bg-secondary { background: #eef1f6 !important; color: #475569 !important; }
.badge.bg-light { background: #f1f4f9 !important; color: #334155 !important; border: 1px solid var(--wp-line); }
.badge.bg-dark { background: #e2e8f0 !important; color: var(--wp-ink) !important; }
.badge.rounded-pill.bg-warning, .sidebar .badge.bg-warning { background: #fbbf24 !important; color: #422006 !important; }
.sidebar .badge.bg-info { background: #7dd3fc !important; color: #082f49 !important; }
.status-pill { border-radius: 999px; font-weight: 600; font-size: .72rem; padding: .3em .75em; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: 10px; font-size: .875rem; padding: .5rem .95rem; transition: all .15s ease; }
.btn-sm { padding: .32rem .65rem; font-size: .8rem; border-radius: 8px; }
.btn-lg { border-radius: 12px; padding: .7rem 1.3rem; }
.btn-primary {
    --bs-btn-bg: var(--wp-accent); --bs-btn-border-color: var(--wp-accent);
    --bs-btn-hover-bg: var(--wp-accent-hover); --bs-btn-hover-border-color: var(--wp-accent-hover);
    --bs-btn-active-bg: #3730a3; --bs-btn-active-border-color: #3730a3;
    --bs-btn-focus-shadow-rgb: 79, 70, 229;
    box-shadow: 0 1px 2px rgba(79, 70, 229, .3);
}
.btn-outline-primary {
    --bs-btn-color: var(--wp-accent); --bs-btn-border-color: #c7cbf7;
    --bs-btn-hover-bg: var(--wp-accent); --bs-btn-hover-border-color: var(--wp-accent);
    --bs-btn-active-bg: var(--wp-accent-hover); --bs-btn-active-border-color: var(--wp-accent-hover);
}
.btn-outline-secondary { --bs-btn-color: #475569; --bs-btn-border-color: var(--wp-line); --bs-btn-hover-bg: #f1f4f9; --bs-btn-hover-color: var(--wp-ink); --bs-btn-hover-border-color: #cfd6e2; }
.btn-success { --bs-btn-bg: var(--wp-good); --bs-btn-border-color: var(--wp-good); --bs-btn-hover-bg: #047857; --bs-btn-hover-border-color: #047857; }
.btn-outline-success { --bs-btn-color: var(--wp-good); --bs-btn-border-color: #a7dfc8; --bs-btn-hover-bg: var(--wp-good); --bs-btn-hover-border-color: var(--wp-good); }
.btn-outline-warning { --bs-btn-color: var(--wp-warn); --bs-btn-border-color: #f3d29b; --bs-btn-hover-bg: #f59e0b; --bs-btn-hover-border-color: #f59e0b; --bs-btn-hover-color: #422006; }
.btn-outline-danger { --bs-btn-border-color: #f3b4b4; }
.btn-group-sm > .btn { border-radius: 8px; }
.btn:focus-visible, .form-control:focus, .form-select:focus { outline: 0; }

/* ---------- Forms ---------- */
.form-label { font-weight: 600; font-size: .8rem; color: #334155; margin-bottom: .35rem; }
.form-control, .form-select {
    border-radius: 10px; border-color: #d8dde8; padding: .55rem .8rem; font-size: .9rem; background-color: #fff;
}
.form-control-sm, .form-select-sm { border-radius: 8px; padding: .32rem .6rem; font-size: .82rem; }
.form-control:focus, .form-select:focus {
    border-color: #a5b4fc; box-shadow: 0 0 0 4px rgba(99, 102, 241, .14);
}
.form-control::placeholder { color: #a3adbf; }
.form-text { color: var(--wp-muted); font-size: .78rem; }
.input-group-text { background: #f8f9fc; border-color: #d8dde8; border-radius: 10px; color: var(--wp-muted); }
.form-check-input:checked { background-color: var(--wp-accent); border-color: var(--wp-accent); }
.form-switch .form-check-input { width: 2.3em; height: 1.2em; }

/* ---------- Alerts ---------- */
.alert { border: 1px solid transparent; border-radius: 12px; font-size: .88rem; }
.alert-success { background: var(--wp-good-soft); border-color: #bfe6d5; color: #065f46; }
.alert-danger { background: var(--wp-bad-soft); border-color: #f6c7c7; color: #991b1b; }
.alert-warning { background: var(--wp-warn-soft); border-color: #f4dcb0; color: #92400e; }
.alert-info { background: var(--wp-info-soft); border-color: #bfdff2; color: #075985; }

/* ---------- Tabs, pagination, dropdowns, modals ---------- */
.nav-tabs { border-bottom: 1px solid var(--wp-line); }
.nav-tabs .nav-link { color: var(--wp-muted); font-weight: 600; border: 0; border-bottom: 2px solid transparent; padding: .6rem 1rem; }
.nav-tabs .nav-link:hover { color: var(--wp-ink); border-color: #cbd5e1; }
.nav-tabs .nav-link.active { color: var(--wp-accent); border-color: var(--wp-accent); background: transparent; }
.nav-pills .nav-link { border-radius: 10px; font-weight: 600; color: var(--wp-muted); }
.nav-pills .nav-link.active { background: var(--wp-accent-soft); color: var(--wp-accent); }
.page-link { border-radius: 8px !important; margin: 0 2px; border-color: var(--wp-line); color: #475569; font-size: .85rem; }
.page-item.active .page-link { background: var(--wp-accent); border-color: var(--wp-accent); }
.dropdown-menu { border: 1px solid var(--wp-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .12); padding: .4rem; }
.dropdown-item { border-radius: 8px; font-size: .875rem; }
.modal-content { border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, .25); }
.modal-header, .modal-footer { border-color: var(--wp-line); }
.list-group-item { border-color: var(--wp-line); }
.progress { border-radius: 999px; background: #eef1f6; }
code { color: #be185d; background: #fdf2f8; padding: .1em .4em; border-radius: 6px; font-size: .85em; }
pre code { background: transparent; color: inherit; padding: 0; }
hr { border-color: var(--wp-line); opacity: 1; }

/* ---------- Empty states ---------- */
.text-center.py-5.text-muted, .text-center.py-4.text-muted {
    padding-top: 3rem !important; padding-bottom: 3rem !important;
}
.text-center.py-5.text-muted > .bi.fs-1, .text-center.py-4.text-muted > .bi.fs-1 {
    display: inline-flex !important; width: 64px; height: 64px; align-items: center; justify-content: center;
    border-radius: 18px; background: var(--wp-accent-soft); color: var(--wp-accent); font-size: 1.7rem !important; margin-bottom: 1rem !important;
}

/* ---------- Provider chips ---------- */
.provider-badge { border-radius: 999px; font-weight: 600; font-size: .74rem; padding: .28em .75em; }

/* ---------- Scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.sidebar-scroll { scrollbar-color: rgba(255, 255, 255, .18) transparent; }

/* ---------- Small screens ---------- */
@media (max-width: 767.98px) {
    .main-content > .p-4 { padding: 1rem !important; }
    .card-body { padding: 1rem; }
    h3, .h3 { font-size: 1.25rem; }
    .breadcrumb { display: none; }
}

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

/* ---------- KPI strip (dashboards) ---------- */
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.kpi-tile {
    border: 1px solid var(--wp-line); border-radius: var(--wp-radius); box-shadow: var(--wp-shadow);
    padding: 1rem 1.1rem; gap: .8rem; align-items: flex-start;
}
.kpi-tile .kpi-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 1.1rem; }
.kpi-tile .kpi-label { font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: var(--wp-muted); }
.kpi-tile .kpi-value { font-size: 1.4rem; letter-spacing: -.02em; color: var(--wp-ink); font-variant-numeric: tabular-nums; }
.kpi-tile .kpi-sub { font-size: .75rem; color: var(--wp-muted); }
.kpi-tile:hover { transform: translateY(-1px); }