/*
 * SACCO Digital Operating System - custom styles.
 *
 * Plain CSS on purpose (no build step): the tech baseline is Bootstrap 5.3 +
 * AdminLTE 4 + vanilla JS, so this file is edited directly and served as-is -
 * no Node.js/npm/Vite required to develop or deploy this application.
 */

/* ---------------------------------------------------------------------------
 * Brand palette - single source of truth.
 *
 * Every color used anywhere in this file is derived from the eleven
 * variables below (either directly, or computed with color-mix()). Nothing
 * past this block should contain a hand-picked hex code: if a new
 * tint/shade is needed, derive it from one of these variables instead of
 * inventing a new literal.
 * ------------------------------------------------------------------------ */
:root {
    /* Named brand tokens - reference these (var(--sacco-*)) anywhere below,
       rather than repeating a hex value. */
    --sacco-navy: #123b5d;        /* Primary brand */
    --sacco-navy-dark: #0d2f4a;   /* Primary hover */
    --sacco-teal: #0f766e;        /* Secondary */
    --sacco-green: #15803d;       /* Success / Money In */
    --sacco-amber: #d97706;       /* Warning */
    --sacco-red: #dc2626;         /* Danger / Overdue */
    --sacco-blue: #2563eb;        /* Info */
    --sacco-bg: #f5f7fa;          /* Page background */
    --sacco-card-bg: #ffffff;     /* Card background */
    --sacco-text: #172033;        /* Main text */
    --sacco-text-muted: #64748b;  /* Secondary text */
    --sacco-border: #e2e8f0;      /* Borders */

    --sacco-radius: 0.6rem;
    --sacco-font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --bs-font-sans-serif: var(--sacco-font);

    /* Re-skin Bootstrap's own theme-color tokens from the brand tokens
       above, so every component built on them (buttons, links, active nav
       items, badges, focus rings, our own light-button "subtle" tokens)
       inherits the palette from one place instead of being patched
       component by component. */
    --bs-primary: var(--sacco-navy);
    --bs-primary-rgb: 18, 59, 93;
    --bs-primary-bg-subtle: color-mix(in srgb, var(--sacco-navy) 12%, white);
    --bs-primary-border-subtle: color-mix(in srgb, var(--sacco-navy) 30%, white);
    --bs-primary-text-emphasis: var(--sacco-navy-dark);

    --bs-secondary: var(--sacco-teal);
    --bs-secondary-rgb: 15, 118, 110;
    --bs-secondary-bg-subtle: color-mix(in srgb, var(--sacco-teal) 12%, white);
    --bs-secondary-border-subtle: color-mix(in srgb, var(--sacco-teal) 30%, white);
    --bs-secondary-text-emphasis: color-mix(in srgb, var(--sacco-teal) 80%, black);
    /* Bootstrap overloads "secondary" for muted body text too - keep that
       on the neutral gray, independent of the teal secondary brand color
       above. */
    --bs-secondary-color: var(--sacco-text-muted);
    --bs-secondary-color-rgb: 100, 116, 139;

    --bs-success: var(--sacco-green);
    --bs-success-rgb: 21, 128, 61;
    --bs-success-bg-subtle: color-mix(in srgb, var(--sacco-green) 12%, white);
    --bs-success-border-subtle: color-mix(in srgb, var(--sacco-green) 30%, white);
    --bs-success-text-emphasis: color-mix(in srgb, var(--sacco-green) 75%, black);

    --bs-warning: var(--sacco-amber);
    --bs-warning-rgb: 217, 119, 6;
    --bs-warning-bg-subtle: color-mix(in srgb, var(--sacco-amber) 15%, white);
    --bs-warning-border-subtle: color-mix(in srgb, var(--sacco-amber) 35%, white);
    --bs-warning-text-emphasis: color-mix(in srgb, var(--sacco-amber) 70%, black);

    --bs-danger: var(--sacco-red);
    --bs-danger-rgb: 220, 38, 38;
    --bs-danger-bg-subtle: color-mix(in srgb, var(--sacco-red) 12%, white);
    --bs-danger-border-subtle: color-mix(in srgb, var(--sacco-red) 30%, white);
    --bs-danger-text-emphasis: color-mix(in srgb, var(--sacco-red) 75%, black);

    --bs-info: var(--sacco-blue);
    --bs-info-rgb: 37, 99, 235;
    --bs-info-bg-subtle: color-mix(in srgb, var(--sacco-blue) 12%, white);
    --bs-info-border-subtle: color-mix(in srgb, var(--sacco-blue) 30%, white);
    --bs-info-text-emphasis: color-mix(in srgb, var(--sacco-blue) 75%, black);

    /* Neutral chrome: page background, card background, text, borders. */
    --bs-body-color: var(--sacco-text);
    --bs-emphasis-color: var(--sacco-text);
    --bs-body-bg: var(--sacco-card-bg);
    --bs-tertiary-bg: var(--sacco-bg);
    --bs-secondary-bg: color-mix(in srgb, var(--sacco-border) 60%, white);
    --bs-border-color: var(--sacco-border);
    --bs-border-color-translucent: var(--sacco-border);

    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: var(--sacco-navy-dark);
    --bs-link-hover-color-rgb: 13, 47, 74;
}

/* A dedicated neutral status color (e.g. "Inactive") that stays gray
   regardless of the teal secondary brand color used for buttons/badges. */
.text-bg-neutral {
    color: var(--sacco-text-muted) !important;
    background-color: color-mix(in srgb, var(--sacco-text-muted) 15%, white) !important;
}

body {
    font-family: var(--sacco-font);
    font-size: 0.95rem;
}

h1, h2, h3, h4, h5, h6, .brand-text {
    font-family: var(--sacco-font);
    font-weight: 700;
}

/* Buttons must be large enough for mobile / low-literacy use. */
.btn {
    min-height: 2.5rem;
    border-radius: var(--sacco-radius);
}

.btn-lg {
    min-height: 3.25rem;
    font-size: 1.05rem;
}

/* Forms usable with touch by default. Staff-facing data-entry screens can
   opt into the tighter Bootstrap ".form-control-sm/.form-select-sm" sizing
   for compact multi-column layouts - those are intentionally excluded
   here. */
.form-control:not(.form-control-sm),
.form-select:not(.form-select-sm) {
    min-height: 2.5rem;
}

.form-label {
    margin-bottom: 0.25rem;
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * Step wizard (multi-step forms: member registration, loan applications, ...)
 * Chevron "arrow" steps that touch edge-to-edge, like a shipment tracker.
 * ------------------------------------------------------------------------ */
.wizard-steps {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    border-radius: var(--sacco-radius);
    overflow: hidden;
}

.wizard-steps li {
    flex: 1;
    position: relative;
    text-align: center;
    padding: 0.6rem 0.75rem 0.6rem 1.75rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: default;
    transition: background-color .15s ease, color .15s ease;
}

.wizard-steps li:first-child {
    padding-left: 1rem;
}

/* The arrow "notch" cut into the left edge (transparent triangle showing the page background). */
.wizard-steps li:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 1.1rem solid transparent;
    border-bottom: 1.1rem solid transparent;
    border-left: 0.85rem solid var(--bs-body-bg);
    z-index: 1;
}

/* The arrow "point" projecting into the next step, in this step's own colour -
   this is what makes each step visually touch the next one. */
.wizard-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: -0.85rem;
    width: 0;
    height: 0;
    border-top: 1.1rem solid transparent;
    border-bottom: 1.1rem solid transparent;
    border-left: 0.85rem solid var(--bs-tertiary-bg);
    z-index: 2;
    transition: border-left-color .15s ease;
}

.wizard-steps li.active {
    background: var(--bs-primary);
    color: #fff;
}

.wizard-steps li.active:not(:last-child)::after {
    border-left-color: var(--bs-primary);
}

.wizard-steps li.completed {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
    cursor: pointer;
}

.wizard-steps li.completed:not(:last-child)::after {
    border-left-color: var(--bs-success-bg-subtle);
}

/* Big, obvious action tiles used on the dashboard and member portal
   ("Deposit Money", "Pay Loan", "Apply for Loan", ...). */
.action-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 0.5rem;
    text-align: center;
    text-decoration: none;
    border-radius: var(--sacco-radius);
    min-height: 6.5rem;
}

.action-tile i {
    font-size: 1.75rem;
}

/* Compact variant for tight widgets (the dashboard's Quick Actions card) -
   the full-size .action-tile stays as-is for the Cash Payments Pay/Receive
   front doors, which want big, obvious, easy-to-tap targets for a teller. */
.action-tile-sm {
    padding: 0.65rem 0.5rem;
    gap: 0.3rem;
    min-height: 4rem;
}

.action-tile-sm i {
    font-size: 1.15rem;
}

.action-tile-sm span {
    font-size: 0.72rem;
}

/* "What needs attention" widget items are always clickable. */
.attention-item {
    cursor: pointer;
}

/* Money is always right-aligned and tabular for readability. */
.money {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.money-negative {
    color: var(--bs-danger);
}

/* ---------------------------------------------------------------------------
 * Filled buttons (.btn-primary/.btn-success/...): Bootstrap's compiled CSS
 * bakes each button variant's colours - including hover/active/focus - as
 * literal hex values into per-component --bs-btn-* custom properties at
 * build time (see button-variant() in Bootstrap's source). They do NOT
 * reference --bs-primary/--bs-success/etc., so overriding those theme
 * variables alone re-skins badges (.text-bg-primary correctly uses
 * rgba(var(--bs-primary-rgb))) but silently leaves every filled button
 * rendering Bootstrap's default blue/green/red/amber/cyan. Re-point every
 * state at our own palette, computed from it via color-mix() rather than
 * hand-picked shades.
 * ------------------------------------------------------------------------ */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-disabled-color: var(--bs-btn-color);
}

.btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); }
.btn-secondary { --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-disabled-bg: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); }
.btn-success { --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-disabled-bg: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); --bs-btn-focus-shadow-rgb: var(--bs-success-rgb); }
.btn-danger { --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-disabled-bg: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb); }
.btn-warning { --bs-btn-bg: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-disabled-bg: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning); --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb); --bs-btn-color: #1f1300; }
.btn-info { --bs-btn-bg: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-disabled-bg: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); --bs-btn-focus-shadow-rgb: var(--bs-info-rgb); }

.btn-primary:hover, .btn-primary:focus { --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, black); }
.btn-secondary:hover, .btn-secondary:focus { --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 80%, black); }
.btn-success:hover, .btn-success:focus { --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 80%, black); }
.btn-danger:hover, .btn-danger:focus { --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger) 80%, black); }
.btn-warning:hover, .btn-warning:focus { --bs-btn-hover-bg: color-mix(in srgb, var(--bs-warning) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-warning) 80%, black); }
.btn-info:hover, .btn-info:focus { --bs-btn-hover-bg: color-mix(in srgb, var(--bs-info) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-info) 80%, black); }

.btn-primary:active { --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 75%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 70%, black); }
.btn-secondary:active { --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 75%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 70%, black); }
.btn-success:active { --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 75%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 70%, black); }
.btn-danger:active { --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) 75%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger) 70%, black); }
.btn-warning:active { --bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) 75%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) 70%, black); }
.btn-info:active { --bs-btn-active-bg: color-mix(in srgb, var(--bs-info) 75%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-info) 70%, black); }

/* ---------------------------------------------------------------------------
 * Flatter "light" buttons instead of heavy bordered outline buttons, and a
 * much lighter card shadow than AdminLTE's default (which reads as heavy
 * once several cards are stacked down a page).
 * ------------------------------------------------------------------------ */
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
    border-color: transparent;
}

/* A flat, backgroundless small toolbar button (list-page export actions:
   Copy/CSV/Excel/PDF/Print). Unlike AdminLTE's own .btn-tool, this has no
   negative margin baked in, so it behaves in a normal flex row rather than
   only a card-header. */
.btn-flat {
    background: transparent;
    border-color: transparent;
    color: var(--bs-secondary-color);
    padding: 0.2rem 0.5rem;
    min-height: 0;
}

.btn-flat:hover,
.btn-flat:focus {
    background: var(--bs-tertiary-bg);
    border-color: transparent;
    color: var(--bs-primary);
}

.btn-outline-secondary { background-color: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis); }
.btn-outline-primary { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.btn-outline-success { background-color: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.btn-outline-danger { background-color: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.btn-outline-warning { background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.btn-outline-info { background-color: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }

.btn-outline-secondary:hover, .btn-outline-secondary:focus,
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-success:hover, .btn-outline-success:focus,
.btn-outline-danger:hover, .btn-outline-danger:focus,
.btn-outline-warning:hover, .btn-outline-warning:focus,
.btn-outline-info:hover, .btn-outline-info:focus {
    border-color: transparent;
    filter: brightness(0.96);
}

.card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* ---------------------------------------------------------------------------
 * Shell chrome: navbar, sidebar, page header.
 * ------------------------------------------------------------------------ */
.sacco-navbar {
    background: var(--bs-body-bg) !important;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sacco-sidebar {
    background: linear-gradient(195deg, var(--sacco-navy) 0%, var(--sacco-navy-dark) 120%) !important;
}

/* AdminLTE's own .sidebar-brand hardcodes a single-line height with
   white-space: nowrap and overflow: hidden - fine for a short brand, but
   it silently clips any SACCO name too long for one line (this is a real
   name that shipped clipped: "... SACCO, LOANS & GROUPS S..."). Every
   SACCO using this app sets its own name, so the brand bar has to cope
   with anything from a five-letter name to a full registered society
   name, not just the one that happened to be tested first. */
.sacco-sidebar .sidebar-brand {
    height: auto;
    min-height: 3.5rem;
    padding-block: 0.6rem;
    overflow: visible;
    white-space: normal;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sacco-sidebar .sidebar-brand .brand-link {
    align-items: center;
    width: 100%;
}

.sacco-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    margin-right: 0.6rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--sacco-navy), var(--sacco-teal));
    color: #fff;
    font-size: 1.05rem;
}

/* The wordmark: tight leading and a touch of letter-spacing reads as a
   logo rather than a line of clipped body text, and wraps onto a second
   line instead of being cut off. */
.sacco-sidebar .brand-text {
    display: -webkit-box;
    overflow: hidden;
    font-size: 1.05rem;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.sacco-sidebar .brand-text.brand-text-sm {
    font-size: 0.82rem;
}

.sacco-sidebar .brand-text.brand-text-xs {
    font-size: 0.68rem;
    letter-spacing: 0.02em;
}

.sacco-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sacco-navy), var(--sacco-teal));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.sacco-content-header {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    margin-bottom: 0.5rem;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

/* A soft, cool-tinted content backdrop instead of stark white behind the cards. */
.app-main {
    background: var(--bs-tertiary-bg);
}

/* ---------------------------------------------------------------------------
 * Guest shell (login, forced password change): a branded split panel instead
 * of a plain centered card on a flat background.
 * ------------------------------------------------------------------------ */
.sacco-guest-body {
    margin: 0;
    background: var(--bs-tertiary-bg);
}

.sacco-guest-shell {
    display: flex;
    min-height: 100vh;
}

.sacco-guest-brand {
    flex: 1 1 45%;
    max-width: 560px;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #fff;
    background: linear-gradient(195deg, var(--sacco-navy) 0%, var(--sacco-navy-dark) 120%);
    position: relative;
    overflow: hidden;
}

.sacco-guest-brand::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--sacco-teal) 45%, transparent), transparent 55%),
                radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--sacco-green) 35%, transparent), transparent 50%);
    pointer-events: none;
}

.sacco-guest-brand > div {
    position: relative;
    z-index: 1;
}

.sacco-guest-quote {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    border-left: 3px solid var(--bs-primary);
    padding-left: 1rem;
}

.sacco-guest-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bs-body-bg);
}

.sacco-brand-mark-lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.75rem;
    border-radius: 1rem;
}

/* A product name/type shown inline in a table or card that links through to
   that product's own admin page (e.g. a savings/loan/share product from a
   member's account list) - teal reads as a link accent against the white
   card backgrounds these are used on, darkening on hover for feedback. */
.product-link {
    color: var(--sacco-teal);
    text-decoration: none;
    font-weight: 600;
}

.product-link:hover,
.product-link:focus {
    color: var(--sacco-navy-dark);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Mobile "row card" list: on phones/small tablets, a data table's rows
 * render as this instead of a horizontally-scrolling <table> - every column
 * still shown, just reflowed into a vertical label/value layout instead of
 * requiring a sideways scroll. Pair with the .row-card-table-wrap /
 * .row-card-list display toggle below. All values live in the markup
 * already (no data duplication beyond the two layouts themselves).
 * Toggle which one is shown with plain Bootstrap utilities on the wrapper:
 * the table wrapper gets "d-none d-md-block", the card list gets "d-md-none".
 * ------------------------------------------------------------------------ */
.row-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.row-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--sacco-border);
    border-radius: 0.75rem;
    padding: 1rem;
}

.row-card.row-card-clickable {
    cursor: pointer;
}

.row-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.row-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    background: var(--bs-tertiary-bg);
    color: var(--sacco-text-muted);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.row-card-heading {
    min-width: 0;
    flex: 1;
}

.row-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.1rem;
}

.row-card-subtitle {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-card-menu {
    flex-shrink: 0;
    color: var(--sacco-text-muted);
}

.row-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1rem;
}

.row-card-field {
    min-width: 0;
}

.row-card-field-label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sacco-text-muted);
    margin-bottom: 0.2rem;
}

.row-card-field-value {
    font-size: 0.85rem;
    font-weight: 600;
}

.row-card-footer {
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--sacco-border);
}

/* Member Portal (spec 44) - reuses the staff AdminLTE shell verbatim
   (.sacco-sidebar/.sacco-navbar/.sacco-content-header etc., defined below)
   rather than a bespoke portal-only layout, so no portal-specific chrome
   CSS lives here. */

/* Dashboard mini stat cards (Members/Loans/Savings/Shares quick totals). A
   subtle diagonal gradient (computed from the same --bs-* tokens every
   other component reads, never a hand-picked hex) plus a colour-matched
   shadow and hover lift give these real depth instead of a flat block of
   colour; the oversized ghost icon is the anchor that makes each card
   instantly identifiable at a glance, same job as the small icon badge
   but readable from across the room. */
.stats-card-mini {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--sacco-radius);
    color: #fff;
    height: 100%;
    box-shadow: 0 4px 14px -4px rgba(var(--stats-card-shadow-rgb, 0, 0, 0), 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.stats-card-mini:hover,
a.stats-card-mini:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px -6px rgba(var(--stats-card-shadow-rgb, 0, 0, 0), 0.45);
    color: #fff;
}

.stats-card-mini.bg-info { background: linear-gradient(135deg, var(--bs-info) 0%, color-mix(in srgb, var(--bs-info) 65%, black) 100%) !important; --stats-card-shadow-rgb: var(--bs-info-rgb); }
.stats-card-mini.bg-success { background: linear-gradient(135deg, var(--bs-success) 0%, color-mix(in srgb, var(--bs-success) 65%, black) 100%) !important; --stats-card-shadow-rgb: var(--bs-success-rgb); }
.stats-card-mini.bg-warning { background: linear-gradient(135deg, var(--bs-warning) 0%, color-mix(in srgb, var(--bs-warning) 65%, black) 100%) !important; --stats-card-shadow-rgb: var(--bs-warning-rgb); }
.stats-card-mini.bg-danger { background: linear-gradient(135deg, var(--bs-danger) 0%, color-mix(in srgb, var(--bs-danger) 65%, black) 100%) !important; --stats-card-shadow-rgb: var(--bs-danger-rgb); }

.stats-card-mini-ghost-icon {
    position: absolute;
    right: -0.75rem;
    bottom: -1rem;
    font-size: 4.5rem;
    opacity: 0.15;
    line-height: 1;
    pointer-events: none;
}

.stats-card-mini-inner {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
}

.stats-card-mini-icon {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.stats-card-mini-info {
    min-width: 0;
    flex: 1;
}

.stats-card-mini-number {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.stats-card-mini-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.9;
}

/* Thin progress bars used throughout the dashboard's breakdown cards. */
.progress-xxs {
    height: 4px;
    border-radius: 10px;
}

.progress-xxs .progress-bar {
    border-radius: 10px;
}

.progress-xs {
    height: 6px;
    border-radius: 10px;
}

.progress-xs .progress-bar {
    border-radius: 10px;
}

/* Compact colored stat cards used across dashboards and module summary
   rows (Loans, Fees & Charges, etc). Kept to a fixed min-height so cards
   in the same row stay the same size regardless of content length, and
   the inner text is padded clear of the absolutely-positioned icon so
   long currency values never overlap it. */
.small-box {
    border-radius: 4px;
    position: relative;
    display: block;
    overflow: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.125);
    color: #fff;
    min-height: 80px;
}

.small-box .inner {
    padding: 8px 44px 6px 10px;
}

.small-box .inner h6 {
    font-size: .7rem;
    text-transform: uppercase;
    opacity: .85;
}

.small-box .inner h4 {
    font-size: 1.15rem;
    word-break: break-word;
    margin-bottom: 2px;
}

.small-box .icon {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 0;
    font-size: 32px;
    color: rgba(255, 255, 255, 0.3);
}