/* ============================================================================
   DBIM Burgundy Skin — Mahashabari Loan Portal
   Inspired by DBIM (Digital Branding India Manual) Burgundy mode
   Pure UI layer. No JS dependencies. No PHP/SQL changes downstream.
   ============================================================================ */

/* --- Design tokens ------------------------------------------------------- */
:root {
    /* Brand — Burgundy palette */
    --dbim-primary:       #8B1538;
    --dbim-primary-dark:  #6B0F2A;
    --dbim-primary-light: #A03A55;
    --dbim-primary-soft:  #F5E6EB;
    --dbim-primary-tint:  #FAF2F4;

    /* Indian government accents */
    --dbim-saffron:    #FF9933;
    --dbim-white:      #FFFFFF;
    --dbim-green:      #138808;
    --dbim-navy:       #000080;
    --dbim-gold:       #FFB300;

    /* Surfaces */
    --dbim-bg:           #F6F4F1;   /* warm off-white page bg */
    --dbim-surface:      #FFFFFF;
    --dbim-surface-2:    #FAFAFA;
    --dbim-elevation-1:  0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
    --dbim-elevation-2:  0 6px 16px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
    --dbim-elevation-3:  0 16px 32px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.05);

    /* Text */
    --dbim-text:          #1B1B1B;
    --dbim-text-2:        #4A4A4A;
    --dbim-text-muted:    #757575;
    --dbim-text-on-dark:  #FFFFFF;

    /* Lines */
    --dbim-border:        #E2E1DD;
    --dbim-border-strong: #C4C2BE;

    /* Status */
    --dbim-success:    #15803D;
    --dbim-success-bg: #ECFDF5;
    --dbim-warning:    #B45309;
    --dbim-warning-bg: #FFF7E6;
    --dbim-danger:     #B91C1C;
    --dbim-danger-bg:  #FEF2F2;
    --dbim-info:       #1D4ED8;
    --dbim-info-bg:    #EFF6FF;

    /* Spacing */
    --dbim-sp-1:  4px;
    --dbim-sp-2:  8px;
    --dbim-sp-3:  12px;
    --dbim-sp-4:  16px;
    --dbim-sp-5:  20px;
    --dbim-sp-6:  24px;
    --dbim-sp-7:  32px;
    --dbim-sp-8:  40px;
    --dbim-sp-9:  48px;
    --dbim-sp-10: 64px;

    /* Radii */
    --dbim-radius-sm: 4px;
    --dbim-radius:    8px;
    --dbim-radius-lg: 12px;
    --dbim-radius-xl: 16px;

    /* Typography */
    --dbim-font: "Noto Sans", "Noto Sans Devanagari", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --dbim-text-xs:  12px;
    --dbim-text-sm:  13px;
    --dbim-text-md:  14px;
    --dbim-text-base:15px;
    --dbim-text-lg:  16px;
    --dbim-text-xl:  18px;
    --dbim-text-2xl: 20px;
    --dbim-text-3xl: 24px;
    --dbim-text-4xl: 28px;

    /* Layout */
    --dbim-container-max: 1320px;
}

/* --- Base layer (only inside the .dbim scope to avoid breaking legacy pages) */
.dbim, .dbim * {
    box-sizing: border-box;
}
.dbim {
    font-family: var(--dbim-font);
    font-size: var(--dbim-text-base);
    line-height: 1.55;
    color: var(--dbim-text);
    background: var(--dbim-bg);
}
.dbim h1, .dbim h2, .dbim h3, .dbim h4 {
    font-family: var(--dbim-font);
    color: var(--dbim-text);
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 var(--dbim-sp-3) 0;
}
.dbim h1 { font-size: var(--dbim-text-4xl); }
.dbim h2 { font-size: var(--dbim-text-3xl); }
.dbim h3 { font-size: var(--dbim-text-2xl); }
.dbim h4 { font-size: var(--dbim-text-xl); }

.dbim a {
    color: var(--dbim-primary);
    text-decoration: none;
}
.dbim a:hover { text-decoration: underline; }


/* ============================================================================
   GOV BANNER (top strip) — small India-tricolour-accented strip
   ============================================================================ */
.dbim-govbar {
    background: linear-gradient(90deg, var(--dbim-saffron) 0%, var(--dbim-saffron) 33%, var(--dbim-white) 33%, var(--dbim-white) 66%, var(--dbim-green) 66%, var(--dbim-green) 100%);
    height: 3px;
    width: 100%;
}
.dbim-govstrip {
    background: var(--dbim-primary-dark);
    color: var(--dbim-text-on-dark);
    font-size: var(--dbim-text-xs);
    padding: 6px 0;
}
.dbim-govstrip .container {
    max-width: var(--dbim-container-max);
    margin: 0 auto;
    padding: 0 var(--dbim-sp-6);
    display: flex; justify-content: space-between; align-items: center; gap: var(--dbim-sp-4);
}
.dbim-govstrip a { color: var(--dbim-text-on-dark); opacity: .9; }
.dbim-govstrip a:hover { opacity: 1; }


/* ============================================================================
   APP HEADER — logo + title + utilities
   ============================================================================ */
.dbim-appheader {
    background: var(--dbim-surface);
    border-bottom: 1px solid var(--dbim-border);
    box-shadow: var(--dbim-elevation-1);
    position: sticky; top: 0; z-index: 50;
}
.dbim-appheader .container {
    max-width: var(--dbim-container-max);
    margin: 0 auto;
    padding: var(--dbim-sp-3) var(--dbim-sp-6);
    display: flex; align-items: center; gap: var(--dbim-sp-5);
    flex-wrap: wrap;
}
.dbim-appheader .brand {
    display: flex; align-items: center; gap: var(--dbim-sp-3);
    text-decoration: none; color: inherit;
}
.dbim-appheader .brand img { height: 56px; width: auto; }
.dbim-appheader .brand .titles {
    line-height: 1.2;
}
.dbim-appheader .brand .titles .small {
    font-size: var(--dbim-text-xs);
    color: var(--dbim-text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.dbim-appheader .brand .titles .big {
    font-size: var(--dbim-text-xl);
    color: var(--dbim-primary-dark);
    font-weight: 700;
}
.dbim-appheader .spacer { flex: 1; }
.dbim-appheader .utilities {
    display: flex; align-items: center; gap: var(--dbim-sp-3);
    flex-wrap: wrap;
}
.dbim-appheader .user-chip {
    display: inline-flex; align-items: center; gap: var(--dbim-sp-2);
    padding: 6px 12px;
    background: var(--dbim-primary-soft);
    color: var(--dbim-primary-dark);
    border-radius: 999px;
    font-size: var(--dbim-text-sm);
    font-weight: 600;
}
.dbim-appheader .user-chip .icon { font-size: 18px; }


/* ============================================================================
   BUTTONS
   ============================================================================ */
.dbim-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--dbim-sp-2);
    padding: 9px 18px;
    border-radius: var(--dbim-radius);
    border: 1px solid transparent;
    background: var(--dbim-primary);
    color: var(--dbim-text-on-dark);
    font: 600 var(--dbim-text-md)/1 var(--dbim-font);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.dbim-btn:hover { background: var(--dbim-primary-dark); color: var(--dbim-text-on-dark); text-decoration: none; }
.dbim-btn:active { transform: translateY(1px); }

.dbim-btn-secondary {
    background: var(--dbim-surface);
    color: var(--dbim-primary);
    border-color: var(--dbim-primary);
}
.dbim-btn-secondary:hover { background: var(--dbim-primary-soft); color: var(--dbim-primary-dark); }

.dbim-btn-ghost {
    background: transparent;
    color: var(--dbim-text-2);
    border-color: var(--dbim-border-strong);
}
.dbim-btn-ghost:hover { background: var(--dbim-surface-2); color: var(--dbim-text); }

.dbim-btn-danger { background: var(--dbim-danger); }
.dbim-btn-danger:hover { background: #991B1B; }

.dbim-btn-success { background: var(--dbim-success); }
.dbim-btn-success:hover { background: #166534; }

.dbim-btn-sm { padding: 6px 12px; font-size: var(--dbim-text-sm); }
.dbim-btn-lg { padding: 12px 24px; font-size: var(--dbim-text-lg); }
.dbim-btn-icon { padding: 8px; }


/* ============================================================================
   PAGE CONTAINERS
   ============================================================================ */
.dbim-main {
    max-width: var(--dbim-container-max);
    margin: 0 auto;
    padding: var(--dbim-sp-7) var(--dbim-sp-6) var(--dbim-sp-10);
}
.dbim-breadcrumb {
    display: flex; align-items: center; gap: var(--dbim-sp-2);
    font-size: var(--dbim-text-sm);
    color: var(--dbim-text-muted);
    margin-bottom: var(--dbim-sp-4);
}
.dbim-breadcrumb a { color: var(--dbim-text-2); }
.dbim-breadcrumb .sep { color: var(--dbim-border-strong); }

.dbim-pagetitle {
    display: flex; align-items: center; justify-content: space-between; gap: var(--dbim-sp-4);
    margin-bottom: var(--dbim-sp-6);
    flex-wrap: wrap;
}
.dbim-pagetitle h1 {
    margin: 0;
    font-size: var(--dbim-text-3xl);
    color: var(--dbim-primary-dark);
}
.dbim-pagetitle .subtitle {
    color: var(--dbim-text-muted);
    font-size: var(--dbim-text-sm);
    margin-top: 4px;
}


/* ============================================================================
   SECTION BANDS — Burgundy accent bar above headings
   ============================================================================ */
.dbim-section-band {
    background: linear-gradient(90deg, var(--dbim-primary-dark) 0%, var(--dbim-primary) 100%);
    color: var(--dbim-text-on-dark);
    padding: 12px 20px;
    border-radius: var(--dbim-radius) var(--dbim-radius) 0 0;
    font-weight: 600;
    display: flex; align-items: center; gap: var(--dbim-sp-3);
    margin-top: var(--dbim-sp-7);
}
.dbim-section-band .icon { font-size: 20px; }


/* ============================================================================
   NUMBERED-DATA TILES (key metrics)
   ============================================================================ */
.dbim-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--dbim-sp-4);
    margin: 0 0 var(--dbim-sp-7) 0;
}
.dbim-tile {
    background: var(--dbim-surface);
    border: 1px solid var(--dbim-border);
    border-left: 4px solid var(--dbim-primary);
    border-radius: var(--dbim-radius);
    padding: var(--dbim-sp-5);
    text-decoration: none;
    color: inherit;
    display: flex; flex-direction: column; gap: 6px;
    box-shadow: var(--dbim-elevation-1);
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
    position: relative;
}
.dbim-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--dbim-elevation-2);
    border-left-color: var(--dbim-primary-dark);
    text-decoration: none;
}
.dbim-tile .label {
    font-size: var(--dbim-text-sm);
    color: var(--dbim-text-muted);
    font-weight: 500;
}
.dbim-tile .value {
    font-size: var(--dbim-text-4xl);
    font-weight: 700;
    color: var(--dbim-primary-dark);
    line-height: 1.05;
}
.dbim-tile .meta {
    font-size: var(--dbim-text-xs);
    color: var(--dbim-text-muted);
    margin-top: 4px;
}
.dbim-tile .icon-pill {
    position: absolute; top: 16px; right: 16px;
    width: 38px; height: 38px;
    background: var(--dbim-primary-soft);
    color: var(--dbim-primary-dark);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}
.dbim-tile.success { border-left-color: var(--dbim-success); }
.dbim-tile.success .value { color: var(--dbim-success); }
.dbim-tile.success .icon-pill { background: var(--dbim-success-bg); color: var(--dbim-success); }
.dbim-tile.warning { border-left-color: var(--dbim-warning); }
.dbim-tile.warning .value { color: var(--dbim-warning); }
.dbim-tile.warning .icon-pill { background: var(--dbim-warning-bg); color: var(--dbim-warning); }
.dbim-tile.info    { border-left-color: var(--dbim-info); }
.dbim-tile.info .value { color: var(--dbim-info); }
.dbim-tile.info .icon-pill { background: var(--dbim-info-bg); color: var(--dbim-info); }


/* ============================================================================
   CARDS — generic + beneficiary card
   ============================================================================ */
.dbim-card {
    background: var(--dbim-surface);
    border: 1px solid var(--dbim-border);
    border-radius: var(--dbim-radius);
    padding: var(--dbim-sp-5);
    box-shadow: var(--dbim-elevation-1);
}
.dbim-card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--dbim-sp-4);
    padding-bottom: var(--dbim-sp-3);
    margin-bottom: var(--dbim-sp-4);
    border-bottom: 1px solid var(--dbim-border);
}
.dbim-card-header h3 { margin: 0; font-size: var(--dbim-text-xl); }


/* Beneficiary list — replaces the wide horizontally-scrolling table */
.dbim-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dbim-sp-3);
}
@media (min-width: 900px)  { .dbim-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .dbim-list { grid-template-columns: 1fr 1fr 1fr; } }

.dbim-bcard {
    background: var(--dbim-surface);
    border: 1px solid var(--dbim-border);
    border-radius: var(--dbim-radius);
    padding: var(--dbim-sp-4);
    display: flex; flex-direction: column; gap: var(--dbim-sp-3);
    box-shadow: var(--dbim-elevation-1);
    transition: box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}
.dbim-bcard:hover {
    box-shadow: var(--dbim-elevation-2);
    border-color: var(--dbim-primary-light);
}
.dbim-bcard .row1 {
    display: flex; align-items: flex-start; gap: var(--dbim-sp-3);
}
.dbim-bcard .avatar {
    width: 44px; height: 44px;
    background: var(--dbim-primary-soft);
    color: var(--dbim-primary-dark);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: var(--dbim-text-lg);
    flex-shrink: 0;
}
.dbim-bcard .name-block { flex: 1; min-width: 0; }
.dbim-bcard .name {
    font-size: var(--dbim-text-lg);
    font-weight: 600;
    color: var(--dbim-text);
    line-height: 1.3;
    word-break: break-word;
}
.dbim-bcard .id {
    font-size: var(--dbim-text-xs);
    color: var(--dbim-text-muted);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    margin-top: 2px;
}
.dbim-bcard .actions {
    display: flex; gap: 6px; flex-shrink: 0;
}
.dbim-bcard .actions .iconbtn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    background: var(--dbim-surface-2);
    color: var(--dbim-text-2);
    border: 1px solid var(--dbim-border);
    text-decoration: none;
    transition: all .15s ease;
}
.dbim-bcard .actions .iconbtn:hover { background: var(--dbim-primary-soft); color: var(--dbim-primary-dark); border-color: var(--dbim-primary-light); }
.dbim-bcard .actions .iconbtn.danger:hover { background: var(--dbim-danger-bg); color: var(--dbim-danger); border-color: var(--dbim-danger); }

.dbim-bcard .grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    font-size: var(--dbim-text-sm);
}
.dbim-bcard .grid .k {
    color: var(--dbim-text-muted);
    font-size: var(--dbim-text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.3;
}
.dbim-bcard .grid .v {
    color: var(--dbim-text);
    font-weight: 500;
    word-break: break-word;
    line-height: 1.35;
}
.dbim-bcard .grid .v.muted { color: var(--dbim-text-muted); font-weight: 400; }
.dbim-bcard .footer-row {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px dashed var(--dbim-border);
    padding-top: var(--dbim-sp-3);
    margin-top: 2px;
    gap: var(--dbim-sp-3);
    flex-wrap: wrap;
}
.dbim-bcard .footer-row .dim {
    font-size: var(--dbim-text-xs);
    color: var(--dbim-text-muted);
}

/* Status pills inside cards */
.dbim-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--dbim-text-xs);
    font-weight: 600;
}
.dbim-pill.success { background: var(--dbim-success-bg); color: var(--dbim-success); }
.dbim-pill.warning { background: var(--dbim-warning-bg); color: var(--dbim-warning); }
.dbim-pill.danger  { background: var(--dbim-danger-bg);  color: var(--dbim-danger); }
.dbim-pill.info    { background: var(--dbim-info-bg);    color: var(--dbim-info); }
.dbim-pill.neutral { background: var(--dbim-surface-2);  color: var(--dbim-text-2); border: 1px solid var(--dbim-border); }


/* ============================================================================
   TOOLBAR (filters/search/sort/per-page above list)
   ============================================================================ */
.dbim-toolbar {
    background: var(--dbim-surface);
    border: 1px solid var(--dbim-border);
    border-radius: var(--dbim-radius);
    padding: var(--dbim-sp-4);
    margin-bottom: var(--dbim-sp-5);
    display: flex; align-items: center; gap: var(--dbim-sp-3); flex-wrap: wrap;
    box-shadow: var(--dbim-elevation-1);
}
.dbim-toolbar .count {
    font-size: var(--dbim-text-sm);
    color: var(--dbim-text-2);
}
.dbim-toolbar .count strong {
    color: var(--dbim-primary-dark);
    font-weight: 700;
    font-size: var(--dbim-text-lg);
    margin: 0 4px;
}
.dbim-toolbar .spacer { flex: 1; }
.dbim-toolbar .control {
    display: inline-flex; align-items: center; gap: var(--dbim-sp-2);
    font-size: var(--dbim-text-sm);
}
.dbim-toolbar .control label {
    color: var(--dbim-text-muted);
    font-weight: 500;
    margin: 0;
}
.dbim-toolbar select,
.dbim-toolbar input[type="text"],
.dbim-toolbar input[type="search"] {
    padding: 8px 12px;
    border: 1px solid var(--dbim-border-strong);
    border-radius: var(--dbim-radius-sm);
    font: 400 var(--dbim-text-sm)/1.4 var(--dbim-font);
    background: var(--dbim-surface);
    color: var(--dbim-text);
    min-height: 36px;
    box-shadow: none;
}
.dbim-toolbar select:focus,
.dbim-toolbar input:focus {
    outline: 2px solid var(--dbim-primary-light);
    outline-offset: 1px;
    border-color: var(--dbim-primary);
}


/* ============================================================================
   PAGINATION (DBIM-styled — overrides existing Bootstrap pagination)
   ============================================================================ */
.dbim-pagination {
    display: flex; justify-content: center; align-items: center;
    gap: 4px;
    margin: var(--dbim-sp-7) 0 var(--dbim-sp-4);
    flex-wrap: wrap;
}
.dbim-pagination a, .dbim-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px;
    border: 1px solid var(--dbim-border);
    background: var(--dbim-surface);
    color: var(--dbim-text-2);
    font: 500 var(--dbim-text-sm)/1 var(--dbim-font);
    border-radius: var(--dbim-radius-sm);
    text-decoration: none;
    transition: all .12s ease;
}
.dbim-pagination a:hover {
    background: var(--dbim-primary-soft);
    color: var(--dbim-primary-dark);
    border-color: var(--dbim-primary-light);
    text-decoration: none;
}
.dbim-pagination .current {
    background: var(--dbim-primary);
    color: var(--dbim-text-on-dark);
    border-color: var(--dbim-primary);
    font-weight: 700;
}
.dbim-pagination .disabled {
    color: var(--dbim-text-muted);
    background: var(--dbim-surface-2);
    cursor: not-allowed;
}


/* ============================================================================
   FOOTER
   ============================================================================ */
.dbim-footer {
    background: var(--dbim-primary-dark);
    color: var(--dbim-text-on-dark);
    margin-top: var(--dbim-sp-10);
    padding: var(--dbim-sp-6) 0 var(--dbim-sp-4);
}
.dbim-footer .container {
    max-width: var(--dbim-container-max);
    margin: 0 auto; padding: 0 var(--dbim-sp-6);
}
.dbim-footer h4 {
    color: var(--dbim-text-on-dark);
    font-size: var(--dbim-text-md);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: var(--dbim-sp-3);
    border-bottom: 1px solid rgba(255,255,255,.15);
    padding-bottom: var(--dbim-sp-2);
}
.dbim-footer .copyright {
    border-top: 1px solid rgba(255,255,255,.15);
    margin-top: var(--dbim-sp-5);
    padding-top: var(--dbim-sp-4);
    text-align: center;
    color: rgba(255,255,255,.85);
    font-size: var(--dbim-text-sm);
}


/* ============================================================================
   ALERTS / EMPTY STATES
   ============================================================================ */
.dbim-empty {
    background: var(--dbim-surface);
    border: 1px dashed var(--dbim-border-strong);
    border-radius: var(--dbim-radius);
    padding: var(--dbim-sp-8) var(--dbim-sp-6);
    text-align: center;
    color: var(--dbim-text-muted);
}
.dbim-empty .icon { font-size: 48px; color: var(--dbim-border-strong); margin-bottom: var(--dbim-sp-3); }
.dbim-empty .title { color: var(--dbim-text-2); font-size: var(--dbim-text-lg); font-weight: 600; }


/* ============================================================================
   ACCESSIBILITY — focus rings + skip link
   ============================================================================ */
.dbim a:focus-visible,
.dbim button:focus-visible,
.dbim .dbim-btn:focus-visible,
.dbim-bcard:focus-within {
    outline: 3px solid var(--dbim-gold);
    outline-offset: 2px;
}
.dbim-skip {
    position: absolute; left: -9999px;
}
.dbim-skip:focus {
    left: 12px; top: 12px;
    background: var(--dbim-primary);
    color: var(--dbim-text-on-dark);
    padding: 8px 14px;
    border-radius: 6px;
    z-index: 200;
}


/* ============================================================================
   ADMINLTE INFO-BOX RE-SKIN  (so dashboard.php needs ZERO HTML changes)
   ============================================================================ */

/* Container my_label spacer — DBIM main centers content */
body .my_label.container,
body .container.my_label {
    max-width: var(--dbim-container-max);
    margin: 0 auto var(--dbim-sp-9) auto !important;
    padding: var(--dbim-sp-7) var(--dbim-sp-6) 0;
    font-family: var(--dbim-font);
    background: transparent;
}

/* Section labels (<center><label class="bg-orange">) → DBIM section band */
body .container.my_label center label.bg-orange,
body .container.my_label center label[class*="bg-"],
.dbim-body center label[class*="bg-"] {
    display: block !important;
    background: linear-gradient(90deg, var(--dbim-primary-dark) 0%, var(--dbim-primary) 100%) !important;
    color: var(--dbim-text-on-dark) !important;
    padding: 12px 20px !important;
    border-radius: var(--dbim-radius) var(--dbim-radius) 0 0 !important;
    font-weight: 600 !important;
    font-size: var(--dbim-text-base) !important;
    text-align: left !important;
    margin: var(--dbim-sp-7) 0 var(--dbim-sp-3) 0 !important;
    box-shadow: var(--dbim-elevation-1);
    font-family: var(--dbim-font) !important;
    letter-spacing: 0.01em;
}
body .container.my_label center {
    display: block !important;
    text-align: left !important;
}

/* Row wrapper for tile clusters */
body .container.my_label > .row,
body .container.my_label .row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--dbim-sp-4) !important;
    margin: 0 !important;
}

/* Reset .pushable/.front transforms — DBIM uses its own hover */
body .pushable {
    outline-offset: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    text-decoration: none;
}
body .pushable .front,
body .pushable .info-box {
    transform: none !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
body .pushable:hover .info-box {
    transform: translateY(-2px) !important;
    box-shadow: var(--dbim-elevation-2);
}
body .pushable:active .info-box {
    transform: translateY(0) !important;
}

/* The info-box itself = DBIM tile */
body .info-box {
    background: var(--dbim-surface) !important;
    border: 1px solid var(--dbim-border) !important;
    border-left: 4px solid var(--dbim-primary) !important;
    border-radius: var(--dbim-radius) !important;
    padding: var(--dbim-sp-5) !important;
    min-height: auto !important;
    box-shadow: var(--dbim-elevation-1);
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--dbim-sp-3);
    color: var(--dbim-text) !important;
    font-family: var(--dbim-font);
    margin: 0 !important;
}

/* Color variants — only the LEFT BORDER + icon pill take the accent */
body .info-box.bg-red,
body .info-box.bg-orange,
body .info-box.bg-purple,
body .info-box.bg-gray,
body .info-box.bg-black,
body .info-box.bg-primary {
    border-left-color: var(--dbim-primary) !important;
}
body .info-box.bg-yellow,
body .info-box.bg-orange {
    border-left-color: var(--dbim-warning) !important;
}
body .info-box.bg-green {
    border-left-color: var(--dbim-success) !important;
}
body .info-box.bg-blue,
body .info-box.bg-aqua {
    border-left-color: var(--dbim-info) !important;
}

/* Icon → DBIM icon pill */
body .info-box .info-box-icon {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    border-radius: 50% !important;
    background: var(--dbim-primary-soft) !important;
    color: var(--dbim-primary-dark) !important;
    font-size: 20px !important;
    text-align: center !important;
    flex-shrink: 0;
    box-shadow: none !important;
    margin: 0 !important;
}
body .info-box.bg-yellow .info-box-icon,
body .info-box.bg-orange .info-box-icon {
    background: var(--dbim-warning-bg) !important;
    color: var(--dbim-warning) !important;
}
body .info-box.bg-green .info-box-icon {
    background: var(--dbim-success-bg) !important;
    color: var(--dbim-success) !important;
}
body .info-box.bg-blue .info-box-icon,
body .info-box.bg-aqua .info-box-icon {
    background: var(--dbim-info-bg) !important;
    color: var(--dbim-info) !important;
}

/* Info-box-content layout — vertical stack */
body .info-box .info-box-content {
    margin-left: 0 !important;
    padding: 0 !important;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Typography — bigger numbers, smaller label */
body .info-box .info-box-number {
    font-size: var(--dbim-text-2xl) !important;
    font-weight: 700 !important;
    color: var(--dbim-primary-dark) !important;
    line-height: 1.15 !important;
    word-break: break-word;
    display: block !important;
    margin: 0 !important;
}
body .info-box.bg-yellow .info-box-number,
body .info-box.bg-orange .info-box-number {
    color: var(--dbim-warning) !important;
}
body .info-box.bg-green .info-box-number {
    color: var(--dbim-success) !important;
}
body .info-box.bg-blue .info-box-number,
body .info-box.bg-aqua .info-box-number {
    color: var(--dbim-info) !important;
}
body .info-box .info-box-number + .info-box-text + .info-box-number {
    /* Second number (financial card pattern) */
    font-size: var(--dbim-text-xl) !important;
    margin-top: var(--dbim-sp-2) !important;
}
body .info-box .info-box-text {
    font-size: var(--dbim-text-sm) !important;
    color: var(--dbim-text-2) !important;
    font-weight: 500 !important;
    line-height: 1.35;
    margin: 0 !important;
    text-transform: none !important;
}

/* Marquee at top of dashboard — hide (handled by FIX 22) */
body .container.my_label .marquee_horizon { display: none !important; }


/* ============================================================================
   ADMINLTE BG-* LABEL RESETS  (bg-black, bg-blue etc. used elsewhere)
   ============================================================================ */
.dbim-body .bg-orange,
.dbim-body .bg-red,
.dbim-body .bg-green,
.dbim-body .bg-blue,
.dbim-body .bg-aqua,
.dbim-body .bg-yellow,
.dbim-body .bg-purple,
.dbim-body .bg-black,
.dbim-body .bg-gray {
    background-image: none;
}


/* ============================================================================
   LEGACY TABLE RE-SKIN  (lists shown via plain table.table or AdminLTE table)
   ============================================================================ */
.dbim-body .container > .section,
.dbim-body .box {
    background: var(--dbim-surface);
    border: 1px solid var(--dbim-border) !important;
    border-radius: var(--dbim-radius) !important;
    box-shadow: var(--dbim-elevation-1);
    margin-bottom: var(--dbim-sp-5) !important;
}
.dbim-body .box-header {
    background: var(--dbim-surface) !important;
    color: var(--dbim-text) !important;
    border-bottom: 1px solid var(--dbim-border) !important;
    border-radius: var(--dbim-radius) var(--dbim-radius) 0 0;
    padding: var(--dbim-sp-4) var(--dbim-sp-5) !important;
}
.dbim-body table.table {
    font-family: var(--dbim-font) !important;
    font-size: var(--dbim-text-sm) !important;
    color: var(--dbim-text);
}
.dbim-body table.table thead th,
.dbim-body #example thead th {
    background: var(--dbim-primary) !important;
    color: var(--dbim-text-on-dark) !important;
    font-weight: 600 !important;
    border: 1px solid var(--dbim-primary-dark) !important;
    padding: 10px 12px !important;
    text-transform: none !important;
}
.dbim-body table.table tbody tr:nth-child(even) td {
    background: var(--dbim-surface-2);
}
.dbim-body table.table tbody td {
    padding: 10px 12px !important;
    vertical-align: middle !important;
    border: 1px solid var(--dbim-border) !important;
}

/* DataTable wrapper polish */
.dbim-body .dataTables_wrapper {
    font-family: var(--dbim-font) !important;
}
.dbim-body .dataTables_wrapper .dataTables_filter input,
.dbim-body .dataTables_wrapper .dataTables_length select {
    padding: 6px 10px !important;
    border: 1px solid var(--dbim-border-strong) !important;
    border-radius: var(--dbim-radius-sm) !important;
    background: var(--dbim-surface);
    margin: 0 6px;
}
.dbim-body .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 4px 10px !important;
    margin: 0 2px;
    border-radius: var(--dbim-radius-sm) !important;
    border: 1px solid var(--dbim-border) !important;
    color: var(--dbim-text-2) !important;
    background: var(--dbim-surface) !important;
}
.dbim-body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dbim-body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--dbim-primary) !important;
    border-color: var(--dbim-primary) !important;
    color: var(--dbim-text-on-dark) !important;
}

/* AdminLTE btn re-skin */
.dbim-body .btn-info,
.dbim-body .btn-primary {
    background: var(--dbim-primary) !important;
    border-color: var(--dbim-primary) !important;
    color: var(--dbim-text-on-dark) !important;
    border-radius: var(--dbim-radius) !important;
}
.dbim-body .btn-info:hover,
.dbim-body .btn-primary:hover {
    background: var(--dbim-primary-dark) !important;
    border-color: var(--dbim-primary-dark) !important;
}
.dbim-body .btn-secondary {
    background: var(--dbim-surface) !important;
    color: var(--dbim-primary) !important;
    border: 1px solid var(--dbim-primary) !important;
}
.dbim-body .btn-danger {
    background: var(--dbim-danger) !important;
    border-color: var(--dbim-danger) !important;
}
.dbim-body .btn-success {
    background: var(--dbim-success) !important;
    border-color: var(--dbim-success) !important;
}


/* ============================================================================
   UI MODE TOGGLE (Classic ↔ New)
   ============================================================================ */
.dbim-ui-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px;
    border: 1px solid var(--dbim-border-strong);
    border-radius: 999px;
    background: var(--dbim-surface);
    color: var(--dbim-text-2);
    font-size: var(--dbim-text-xs);
    font-weight: 600;
    text-decoration: none !important;
    transition: all .15s ease;
    user-select: none;
    line-height: 1;
}
.dbim-ui-toggle:hover {
    border-color: var(--dbim-primary);
    color: var(--dbim-primary);
    background: var(--dbim-primary-soft);
}
.dbim-ui-toggle-label {
    color: var(--dbim-text-muted);
    font-weight: 700;
    letter-spacing: .04em;
}
.dbim-ui-toggle-track {
    position: relative;
    display: inline-block;
    width: 32px; height: 18px;
    background: #C4C2BE;
    border-radius: 999px;
    transition: background .15s ease;
}
.dbim-ui-toggle-track.on { background: var(--dbim-primary); }
.dbim-ui-toggle-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    transition: left .15s ease;
}
.dbim-ui-toggle-track.on .dbim-ui-toggle-thumb { left: 16px; }
.dbim-ui-toggle-state {
    color: var(--dbim-text);
    min-width: 42px;
}


/* ============================================================================
   CLEAN ALIGNMENT FIXES — common alignment pitfalls in the legacy markup
   ============================================================================ */

/* Reset legacy <center> usage that was being applied with text-align:center */
.dbim center { text-align: left; }

/* Bootstrap 3 row gutters — let DBIM tile grid handle spacing instead */
.dbim .row { margin: 0; }
.dbim .row > [class*="col-"] { padding: 0; }

/* AdminLTE .container my_label vs DBIM container */
body .container.my_label,
body .container.top_margin {
    margin-top: 0 !important;
    padding-top: var(--dbim-sp-5) !important;
}

/* Standardize all dbim cards/tiles to grid alignment instead of float */
.dbim-tile, .dbim-bcard, .dbim-card { float: none !important; }

/* Ensure breadcrumb wraps cleanly on narrow */
.dbim-breadcrumb { flex-wrap: wrap; }
.dbim-pagetitle { row-gap: var(--dbim-sp-3); }

/* Headers don't have extra <br>s pulling content down */
.dbim-appheader + br,
.dbim-govstrip + br,
.dbim-section-band + br { display: none; }

/* Fix the .dbim-toolbar wrap on narrow */
@media (max-width: 640px) {
    .dbim-toolbar { gap: 8px; }
    .dbim-toolbar .count { width: 100%; }
    .dbim-toolbar .control { flex: 1 1 45%; }
    .dbim-toolbar select { width: 100%; }
}

/* Empty state vertical centering */
.dbim-empty { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Tile inner alignment */
.dbim-tile { justify-content: space-between; min-height: 110px; }
.dbim-tile .value { word-break: break-all; }

/* When a tile contains a long PHP-generated value, allow wrap */
.dbim-tile .value > * { display: inline; }

/* Card grid alignment with consistent vertical rhythm */
.dbim-list { align-items: start; }
.dbim-bcard { height: 100%; }

/* Avoid scroll bars on narrow screens */
.dbim-main { overflow-x: hidden; }

/* AdminLTE .info-box old margin reset */
body .container.my_label .row { margin: 0 0 var(--dbim-sp-5) 0 !important; }
body .info-box { width: 100% !important; min-height: 110px !important; }


/* ============================================================================
   FORMS (clean defaults — used by login + add/edit pages)
   ============================================================================ */
.dbim-form {
    background: var(--dbim-surface);
    border: 1px solid var(--dbim-border);
    border-radius: var(--dbim-radius-lg);
    box-shadow: var(--dbim-elevation-2);
    padding: var(--dbim-sp-7);
    max-width: 460px;
    margin: 40px auto;
}
.dbim-form .dbim-form-head {
    text-align: center;
    padding-bottom: var(--dbim-sp-5);
    margin-bottom: var(--dbim-sp-5);
    border-bottom: 1px solid var(--dbim-border);
}
.dbim-form .dbim-form-head .icon {
    width: 64px; height: 64px;
    background: var(--dbim-primary-soft);
    color: var(--dbim-primary-dark);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px;
    margin-bottom: var(--dbim-sp-3);
}
.dbim-form .dbim-form-head h2 {
    font-size: var(--dbim-text-2xl);
    color: var(--dbim-primary-dark);
    margin: 0;
}
.dbim-form .dbim-form-head .sub {
    color: var(--dbim-text-muted);
    font-size: var(--dbim-text-sm);
    margin-top: 4px;
}
.dbim-field {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: var(--dbim-sp-4);
}
.dbim-field label {
    font-size: var(--dbim-text-sm);
    font-weight: 600;
    color: var(--dbim-text);
    display: flex; align-items: center; gap: 6px;
    margin: 0;
}
.dbim-field label .material-icons { font-size: 16px; color: var(--dbim-text-muted); }
.dbim-input,
.dbim-field input[type="text"],
.dbim-field input[type="email"],
.dbim-field input[type="tel"],
.dbim-field input[type="password"],
.dbim-field input[type="number"],
.dbim-field input[type="date"],
.dbim-field select,
.dbim-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--dbim-border-strong);
    border-radius: var(--dbim-radius);
    font: 400 var(--dbim-text-base)/1.4 var(--dbim-font);
    background: var(--dbim-surface);
    color: var(--dbim-text);
    transition: border-color .15s ease, box-shadow .15s ease;
    box-shadow: none;
}
.dbim-input:focus,
.dbim-field input:focus,
.dbim-field select:focus,
.dbim-field textarea:focus {
    outline: none;
    border-color: var(--dbim-primary);
    box-shadow: 0 0 0 3px rgba(139,21,56,.12);
}
.dbim-form-foot {
    margin-top: var(--dbim-sp-5);
    text-align: center;
    font-size: var(--dbim-text-sm);
    color: var(--dbim-text-muted);
}
.dbim-form-foot a { color: var(--dbim-primary); font-weight: 600; }
.dbim-form .alert-login {
    background: var(--dbim-danger-bg);
    color: var(--dbim-danger);
    border-left: 3px solid var(--dbim-danger);
    padding: 10px 14px;
    border-radius: var(--dbim-radius-sm);
    font-size: var(--dbim-text-sm);
    margin-bottom: var(--dbim-sp-4);
}


/* ============================================================================
   DASHBOARD-NEW LAYOUT — minimalist
   ============================================================================ */
.dbim-hero {
    background: linear-gradient(135deg, var(--dbim-primary-dark) 0%, var(--dbim-primary) 60%, var(--dbim-primary-light) 100%);
    color: var(--dbim-text-on-dark);
    border-radius: var(--dbim-radius-lg);
    padding: var(--dbim-sp-7) var(--dbim-sp-7);
    margin-bottom: var(--dbim-sp-6);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--dbim-sp-5);
    flex-wrap: wrap;
    box-shadow: var(--dbim-elevation-2);
}
.dbim-hero h1 {
    color: var(--dbim-text-on-dark);
    font-size: var(--dbim-text-3xl);
    margin: 0;
}
.dbim-hero .greeting {
    font-size: var(--dbim-text-sm);
    opacity: .85;
    margin: 0;
}
.dbim-hero .role {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: rgba(255,255,255,.18);
    border-radius: 999px;
    font-size: var(--dbim-text-xs);
    font-weight: 600;
    margin-top: 4px;
}
.dbim-hero .hero-aside {
    display: flex; gap: var(--dbim-sp-3); flex-wrap: wrap;
}
.dbim-hero .hero-action {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    background: rgba(255,255,255,.12);
    color: var(--dbim-text-on-dark);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--dbim-radius);
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
}
.dbim-hero .hero-action:hover {
    background: rgba(255,255,255,.22);
    color: var(--dbim-text-on-dark);
    text-decoration: none;
}

.dbim-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--dbim-sp-4);
    margin-bottom: var(--dbim-sp-7);
}
.dbim-kpi {
    background: var(--dbim-surface);
    border: 1px solid var(--dbim-border);
    border-radius: var(--dbim-radius);
    padding: var(--dbim-sp-5);
    box-shadow: var(--dbim-elevation-1);
    display: flex; flex-direction: column; gap: 4px;
    position: relative; overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, box-shadow .15s ease;
}
.dbim-kpi:hover { transform: translateY(-2px); box-shadow: var(--dbim-elevation-2); text-decoration: none; color: inherit; }
.dbim-kpi .kpi-label {
    font-size: var(--dbim-text-xs);
    color: var(--dbim-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}
.dbim-kpi .kpi-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--dbim-primary-dark);
    line-height: 1.1;
}
.dbim-kpi .kpi-sub {
    font-size: var(--dbim-text-xs);
    color: var(--dbim-text-muted);
    margin-top: 2px;
}
.dbim-kpi .kpi-icon {
    position: absolute; top: 14px; right: 14px;
    width: 36px; height: 36px;
    background: var(--dbim-primary-soft);
    color: var(--dbim-primary-dark);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    opacity: .8;
}
.dbim-kpi.green .kpi-value { color: var(--dbim-success); }
.dbim-kpi.green .kpi-icon  { background: var(--dbim-success-bg); color: var(--dbim-success); }
.dbim-kpi.warn  .kpi-value { color: var(--dbim-warning); }
.dbim-kpi.warn  .kpi-icon  { background: var(--dbim-warning-bg); color: var(--dbim-warning); }
.dbim-kpi.info  .kpi-value { color: var(--dbim-info); }
.dbim-kpi.info  .kpi-icon  { background: var(--dbim-info-bg); color: var(--dbim-info); }

.dbim-twocol {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--dbim-sp-5);
    margin-bottom: var(--dbim-sp-7);
}
@media (max-width: 900px) { .dbim-twocol { grid-template-columns: 1fr; } }

.dbim-block {
    background: var(--dbim-surface);
    border: 1px solid var(--dbim-border);
    border-radius: var(--dbim-radius);
    box-shadow: var(--dbim-elevation-1);
    overflow: hidden;
}
.dbim-block-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--dbim-sp-4) var(--dbim-sp-5);
    background: var(--dbim-primary-tint);
    border-bottom: 1px solid var(--dbim-border);
}
.dbim-block-head h3 {
    margin: 0;
    font-size: var(--dbim-text-lg);
    color: var(--dbim-primary-dark);
    display: flex; align-items: center; gap: 8px;
}
.dbim-block-head h3 .material-icons { font-size: 20px; color: var(--dbim-primary); }
.dbim-block-head .view-all {
    font-size: var(--dbim-text-sm);
    color: var(--dbim-primary);
    font-weight: 600;
    text-decoration: none;
}
.dbim-block-body { padding: var(--dbim-sp-4) var(--dbim-sp-5); }

/* Quick action buttons grid */
.dbim-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--dbim-sp-3);
}
.dbim-qa {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: var(--dbim-sp-4);
    border: 1px solid var(--dbim-border);
    border-radius: var(--dbim-radius);
    background: var(--dbim-surface);
    color: var(--dbim-text);
    text-decoration: none;
    transition: all .15s ease;
}
.dbim-qa:hover {
    border-color: var(--dbim-primary);
    background: var(--dbim-primary-tint);
    color: var(--dbim-primary-dark);
    text-decoration: none;
}
.dbim-qa .qa-icon {
    width: 36px; height: 36px;
    background: var(--dbim-primary-soft);
    color: var(--dbim-primary-dark);
    border-radius: var(--dbim-radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.dbim-qa .qa-title { font-weight: 600; font-size: var(--dbim-text-sm); }
.dbim-qa .qa-sub   { font-size: var(--dbim-text-xs); color: var(--dbim-text-muted); }

/* Pending tasks list */
.dbim-tasklist { list-style: none; padding: 0; margin: 0; }
.dbim-tasklist li {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--dbim-border);
}
.dbim-tasklist li:last-child { border-bottom: 0; }
.dbim-tasklist .task-icon {
    width: 36px; height: 36px;
    background: var(--dbim-primary-soft);
    color: var(--dbim-primary-dark);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.dbim-tasklist .task-text { flex: 1; min-width: 0; }
.dbim-tasklist .task-text .title {
    font-size: var(--dbim-text-sm);
    color: var(--dbim-text);
    font-weight: 500;
}
.dbim-tasklist .task-text .meta {
    font-size: var(--dbim-text-xs);
    color: var(--dbim-text-muted);
}
.dbim-tasklist .task-count {
    background: var(--dbim-primary);
    color: var(--dbim-text-on-dark);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: var(--dbim-text-xs);
    font-weight: 700;
    min-width: 28px;
    text-align: center;
}
.dbim-tasklist .task-count.zero {
    background: var(--dbim-surface-2);
    color: var(--dbim-text-muted);
    border: 1px solid var(--dbim-border);
}


/* ============================================================================
   DASHBOARD-CLASSIC LAYOUT — same content, properly aligned
   ============================================================================ */
.dbim-classic-section {
    margin-bottom: var(--dbim-sp-8);
}
.dbim-classic-section-band {
    background: linear-gradient(90deg, var(--dbim-primary-dark) 0%, var(--dbim-primary) 100%);
    color: var(--dbim-text-on-dark);
    padding: 10px 18px;
    border-radius: var(--dbim-radius) var(--dbim-radius) 0 0;
    font-weight: 600;
    font-size: var(--dbim-text-base);
    display: flex; align-items: center; gap: 10px;
    box-shadow: var(--dbim-elevation-1);
}
.dbim-classic-section-band .material-icons { font-size: 20px; }
.dbim-classic-section-grid {
    background: var(--dbim-surface);
    border: 1px solid var(--dbim-border);
    border-top: 0;
    border-radius: 0 0 var(--dbim-radius) var(--dbim-radius);
    padding: var(--dbim-sp-5);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--dbim-sp-4);
}
.dbim-ctile {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px;
    background: var(--dbim-surface);
    border: 1px solid var(--dbim-border);
    border-left: 4px solid var(--dbim-primary);
    border-radius: var(--dbim-radius);
    text-decoration: none;
    color: inherit;
    transition: all .15s ease;
    min-height: 90px;
}
.dbim-ctile:hover {
    text-decoration: none;
    color: inherit;
    box-shadow: var(--dbim-elevation-2);
    transform: translateY(-2px);
    border-left-color: var(--dbim-primary-dark);
}
.dbim-ctile.tone-warn    { border-left-color: var(--dbim-warning); }
.dbim-ctile.tone-success { border-left-color: var(--dbim-success); }
.dbim-ctile.tone-info    { border-left-color: var(--dbim-info); }
.dbim-ctile.tone-muted   { border-left-color: var(--dbim-border-strong); }

.dbim-ctile .icon-circle {
    width: 40px; height: 40px;
    background: var(--dbim-primary-soft);
    color: var(--dbim-primary-dark);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}
.dbim-ctile.tone-warn    .icon-circle { background: var(--dbim-warning-bg); color: var(--dbim-warning); }
.dbim-ctile.tone-success .icon-circle { background: var(--dbim-success-bg); color: var(--dbim-success); }
.dbim-ctile.tone-info    .icon-circle { background: var(--dbim-info-bg);    color: var(--dbim-info); }
.dbim-ctile.tone-muted   .icon-circle { background: var(--dbim-surface-2);  color: var(--dbim-text-2); }

.dbim-ctile .ctile-content { flex: 1; min-width: 0; }
.dbim-ctile .ctile-label {
    font-size: var(--dbim-text-sm);
    color: var(--dbim-text-muted);
    line-height: 1.3;
    margin-bottom: 4px;
}
.dbim-ctile .ctile-value {
    font-size: var(--dbim-text-2xl);
    font-weight: 700;
    color: var(--dbim-primary-dark);
    line-height: 1.1;
    word-break: break-word;
}
.dbim-ctile.tone-warn    .ctile-value { color: var(--dbim-warning); }
.dbim-ctile.tone-success .ctile-value { color: var(--dbim-success); }
.dbim-ctile.tone-info    .ctile-value { color: var(--dbim-info); }
.dbim-ctile .ctile-meta {
    font-size: var(--dbim-text-xs);
    color: var(--dbim-text-muted);
    margin-top: 4px;
}


/* ============================================================================
   PRINT
   ============================================================================ */
@media print {
    .dbim-appheader, .dbim-govbar, .dbim-govstrip, .dbim-footer, .dbim-toolbar, .dbim-pagination, .dbim-bcard .actions {
        display: none !important;
    }
    .dbim-bcard {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #999;
    }
}
/* ============================================================================
   DBIM Patch 1 — Bug fixes from 2026-05-20 live audit
   ============================================================================ */

/* ────────────────────────────────────────────────────────────────────────
   1. BUTTON COLORS — `.dbim a` was overriding `.dbim-btn` text color
      (made buttons display burgundy-text on burgundy-bg → invisible)
   ──────────────────────────────────────────────────────────────────────── */
.dbim a.dbim-btn,
.dbim .dbim-btn {
    color: var(--dbim-text-on-dark) !important;
}
.dbim a.dbim-btn:hover,
.dbim .dbim-btn:hover {
    color: var(--dbim-text-on-dark) !important;
}
.dbim a.dbim-btn-secondary,
.dbim .dbim-btn-secondary {
    color: var(--dbim-primary) !important;
}
.dbim a.dbim-btn-secondary:hover,
.dbim .dbim-btn-secondary:hover {
    color: var(--dbim-primary-dark) !important;
}
.dbim a.dbim-btn-ghost,
.dbim .dbim-btn-ghost {
    color: var(--dbim-text-2) !important;
}
.dbim a.dbim-btn-ghost:hover,
.dbim .dbim-btn-ghost:hover {
    color: var(--dbim-text) !important;
}
.dbim a.dbim-btn-danger,
.dbim .dbim-btn-danger,
.dbim a.dbim-btn-success,
.dbim .dbim-btn-success {
    color: var(--dbim-text-on-dark) !important;
}
/* Hero action buttons too */
.dbim .hero-action,
.dbim a.hero-action {
    color: var(--dbim-text-on-dark) !important;
}
/* Quick actions */
.dbim .dbim-qa,
.dbim a.dbim-qa { color: var(--dbim-text) !important; }
.dbim .dbim-qa:hover,
.dbim a.dbim-qa:hover { color: var(--dbim-primary-dark) !important; }


/* ────────────────────────────────────────────────────────────────────────
   2. `.title` BACKGROUND — AdminLTE legacy `#003366` blue was bleeding into
      DBIM tasklist titles and beneficiary card names
   ──────────────────────────────────────────────────────────────────────── */
.dbim .title,
.dbim-tasklist .title,
.dbim-bcard .title,
.dbim-empty .title,
.dbim-block .title,
.dbim-form .title,
.lcard .title,
.dbim-pagetitle .title {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    text-shadow: none !important;
}
.dbim-tasklist .title {
    color: var(--dbim-text) !important;
    font-weight: 500 !important;
}
.dbim-empty .title {
    color: var(--dbim-text-2) !important;
    font-weight: 600 !important;
}
/* Also reset .meta / .name / .sub / .label that may collide with AdminLTE */
.dbim .meta,
.dbim-tasklist .meta,
.dbim-bcard .meta,
.dbim-block .meta {
    background: transparent !important;
    color: var(--dbim-text-muted) !important;
}
.dbim .name,
.dbim-bcard .name {
    background: transparent !important;
    color: var(--dbim-text) !important;
}


/* ────────────────────────────────────────────────────────────────────────
   3. `.kpi-label` `.label` `.subtitle` `.sub` — AdminLTE bleeds these too
   ──────────────────────────────────────────────────────────────────────── */
.dbim .kpi-label,
.dbim .ctile-label,
.dbim .qa-title,
.dbim .qa-sub {
    background: transparent !important;
    text-shadow: none !important;
}
.dbim-block .subtitle,
.dbim-pagetitle .subtitle,
.lcard-head .subtitle {
    background: transparent !important;
    color: var(--dbim-text-muted) !important;
}


/* ────────────────────────────────────────────────────────────────────────
   4. LEGACY INFO-BOX layouts — fix grid so tiles align cleanly on
      report_dashboard.php / branch_offices.php / similar pages
   ──────────────────────────────────────────────────────────────────────── */
/* Apply DBIM tile grid to ANY .row that contains AdminLTE pushable tiles,
   not just rows directly inside .container.my_label */
.dbim-body .row:has(.pushable),
.dbim-body .container .row:has(> .pushable),
.dbim-body .container.my_label > .row,
.dbim-body .container.my_label .row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: var(--dbim-sp-4) !important;
    margin: 0 0 var(--dbim-sp-5) 0 !important;
    align-items: stretch !important;
}
/* Make every pushable card fill its grid cell evenly */
.dbim-body .pushable,
.dbim-body a.pushable,
.dbim-body .col-md-12.pushable,
.dbim-body .col-md-6.pushable,
.dbim-body .col-md-4.pushable,
.dbim-body .col-md-3.pushable {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* For .col-md-12 spanning full row */
.dbim-body .row > a.col-md-12.pushable {
    grid-column: 1 / -1;
}
.dbim-body .info-box {
    height: 100% !important;
}


/* ────────────────────────────────────────────────────────────────────────
   5. FLOATING SCROLL ARROWS on legacy beneficiaries / scrollable pages
      — were appearing mid-page on the right
   ──────────────────────────────────────────────────────────────────────── */
.dbim-body div[style*="position:fixed"][style*="right:0"][style*="z-index"],
.dbim-body div[style*="position: fixed"][style*="right:0"][style*="z-index"] {
    bottom: 16px !important;
    top: auto !important;
    right: 16px !important;
    background: var(--dbim-surface) !important;
    padding: 6px !important;
    border-radius: 999px !important;
    box-shadow: var(--dbim-elevation-2) !important;
    display: flex !important;
    gap: 4px !important;
}
.dbim-body div[style*="position:fixed"] button[onclick*="scrollHor"],
.dbim-body div[style*="position: fixed"] button[onclick*="scrollHor"] {
    width: 32px !important; height: 32px !important;
    border: 1px solid var(--dbim-border) !important;
    background: var(--dbim-surface) !important;
    color: var(--dbim-text-2) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
}
.dbim-body div[style*="position:fixed"] button[onclick*="scrollHor"]:hover {
    background: var(--dbim-primary-soft) !important;
    color: var(--dbim-primary-dark) !important;
}


/* ────────────────────────────────────────────────────────────────────────
   6. LEGACY BREADCRUMB / .form-group-with-buttons-at-top — common pattern
      where breadcrumb + add-button overlap because of float
   ──────────────────────────────────────────────────────────────────────── */
.dbim-body .box .form-group {
    margin: 0 0 var(--dbim-sp-3) 0 !important;
}
.dbim-body .box .form-group .col-sm-12 {
    padding: 0 !important;
    display: flex !important;
    gap: var(--dbim-sp-2) !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}
.dbim-body .box-header {
    padding: var(--dbim-sp-3) var(--dbim-sp-4) !important;
}
.dbim-body .box-header > a[style*="float:right"],
.dbim-body .box-header > .btn[style*="float:right"] {
    float: none !important;
    margin-left: auto !important;
}
.dbim-body .box-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: var(--dbim-sp-2);
}


/* ────────────────────────────────────────────────────────────────────────
   7. DataTable wrapper — was floating above the actual table because of
      AdminLTE box wrapping
   ──────────────────────────────────────────────────────────────────────── */
.dbim-body .dataTables_wrapper {
    width: 100% !important;
    padding: 0 var(--dbim-sp-2) !important;
}
.dbim-body .dataTables_length,
.dbim-body .dataTables_filter {
    margin: var(--dbim-sp-2) 0 !important;
    padding: 0 !important;
}
.dbim-body .dataTables_filter { text-align: right !important; }
.dbim-body .dataTables_filter label,
.dbim-body .dataTables_length label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    color: var(--dbim-text-2) !important;
}
.dbim-body .dataTables_info,
.dbim-body .dataTables_paginate {
    margin-top: var(--dbim-sp-3) !important;
}


/* ────────────────────────────────────────────────────────────────────────
   8. AdminLTE `.box` consistent card styling
   ──────────────────────────────────────────────────────────────────────── */
.dbim-body .box {
    background: var(--dbim-surface) !important;
    border-radius: var(--dbim-radius) !important;
    box-shadow: var(--dbim-elevation-1) !important;
    border: 1px solid var(--dbim-border) !important;
    border-top: 1px solid var(--dbim-border) !important;
    padding: var(--dbim-sp-3) !important;
    margin-bottom: var(--dbim-sp-5) !important;
}
.dbim-body .box-body {
    padding: var(--dbim-sp-2) 0 !important;
}


/* ────────────────────────────────────────────────────────────────────────
   9. KPI tiles wrapping — ensure they fill nicely (5 across at 1440)
   ──────────────────────────────────────────────────────────────────────── */
.dbim-kpis {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: var(--dbim-sp-4) !important;
}
.dbim-kpi { min-height: 130px; }


/* ────────────────────────────────────────────────────────────────────────
   10. Header brand — tighten layout so logo image + text aren't competing
   ──────────────────────────────────────────────────────────────────────── */
.dbim-appheader .brand {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-shrink: 0;
}
.dbim-appheader .brand img {
    height: 56px !important;
    width: auto !important;
    object-fit: contain !important;
}
.dbim-appheader .brand .titles { line-height: 1.2; }
.dbim-appheader .brand .titles .small {
    font-size: var(--dbim-text-xs) !important;
    color: var(--dbim-text-muted) !important;
    letter-spacing: 0;
    text-transform: none !important;
    max-width: 380px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dbim-appheader .brand .titles .big {
    font-size: var(--dbim-text-lg) !important;
    color: var(--dbim-primary-dark) !important;
    font-weight: 700;
}


/* ────────────────────────────────────────────────────────────────────────
   11. AdminLTE form-group label colors — were rendering as dark blue
   ──────────────────────────────────────────────────────────────────────── */
.dbim-body .form-group label,
.dbim-body .control-label {
    color: var(--dbim-text) !important;
    background: transparent !important;
    text-shadow: none !important;
}


/* ────────────────────────────────────────────────────────────────────────
   12a. HEADER BRAND — remove redundancy. The Shabari header_logo.png image
       already carries the Marathi "शबरी आदिवासी वित्त व विकास महामंडळ" text,
       so the `.titles .small` line was duplicate. Keep only the English
       app tagline.
   ──────────────────────────────────────────────────────────────────────── */
.dbim-appheader .brand .titles .small { display: none !important; }
.dbim-appheader .brand .titles .big {
    font-size: var(--dbim-text-xl) !important;
    line-height: 1.15;
}
.dbim-appheader .brand img[alt*="emblem"] {
    height: 52px !important;
}
.dbim-appheader .brand img[alt*="Logo"],
.dbim-appheader .brand img[alt*="Shabari"] {
    height: 56px !important;
}
.dbim-appheader .brand .titles {
    border-left: 1px solid var(--dbim-border);
    padding-left: 14px;
    margin-left: 4px;
}
.dbim-appheader .container {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    gap: var(--dbim-sp-4) !important;
}
.dbim-appheader .utilities {
    gap: var(--dbim-sp-2) !important;
}


/* ────────────────────────────────────────────────────────────────────────
   13. POLISH — KPI tile typography + value sizing
   ──────────────────────────────────────────────────────────────────────── */
.dbim-kpi .kpi-value {
    font-size: 30px !important;
    margin-top: 6px;
}
.dbim-kpi .kpi-label {
    font-size: var(--dbim-text-xs) !important;
}
.dbim-kpi .kpi-sub {
    color: var(--dbim-text-muted) !important;
    background: transparent !important;
}


/* ────────────────────────────────────────────────────────────────────────
   14. HERO action button visibility (.hero-action has its own bg/color
       but with !important on .dbim a from cascade conflict)
   ──────────────────────────────────────────────────────────────────────── */
.dbim .dbim-hero .hero-action {
    color: var(--dbim-text-on-dark) !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.30) !important;
}
.dbim .dbim-hero .hero-action:hover {
    background: rgba(255,255,255,.22) !important;
    color: var(--dbim-text-on-dark) !important;
}


/* ────────────────────────────────────────────────────────────────────────
   15. PENDING TASKS list spacing fix
   ──────────────────────────────────────────────────────────────────────── */
.dbim-tasklist li .task-text { background: transparent !important; }
.dbim-tasklist li .task-text * { background: transparent !important; }
.dbim-tasklist li {
    background: transparent !important;
}


/* ────────────────────────────────────────────────────────────────────────
   16. Misc — anchor text inside cards should inherit, not get burgundy
   ──────────────────────────────────────────────────────────────────────── */
.dbim-tile,
.dbim-bcard,
.dbim-ctile,
.dbim-kpi,
.dbim-qa {
    /* These already set color: inherit on their <a> form,
       but reinforce here for safety */
    text-decoration: none !important;
}
.dbim a.dbim-tile,
.dbim a.dbim-kpi,
.dbim a.dbim-ctile,
.dbim a.dbim-qa {
    color: inherit !important;
}
.dbim a.dbim-tile:hover,
.dbim a.dbim-kpi:hover,
.dbim a.dbim-qa:hover {
    color: inherit !important;
    text-decoration: none !important;
}

/* ────────────────────────────────────────────────────────────────────────
   18. Legacy form/report pages — fix narrow centered column layout.
       Targets pages like old_loan_recovery_report.php where Bootstrap 3
       col-md-4 + empty offset cols cause content to collapse to ~250px.
   ──────────────────────────────────────────────────────────────────────── */

/* Rows that DON'T contain tiles — restore as block, not grid */
.dbim-body .container .row:not(:has(.pushable)):not(:has(.info-box)):not(:has(.box)):not(:has(.small-box)),
.dbim-body .container.my_label .row:not(:has(.pushable)):not(:has(.info-box)):not(:has(.box)):not(:has(.small-box)) {
    display: block !important;
    grid-template-columns: none !important;
    max-width: 760px;
    margin: 24px auto !important;
    padding: 0 !important;
}

/* Hide empty offset/spacer columns */
.dbim-body .container .row:not(:has(.pushable)):not(:has(.info-box)):not(:has(.box)):not(:has(.small-box)) > [class*="col-"]:empty,
.dbim-body .container.my_label .row:not(:has(.pushable)):not(:has(.info-box)):not(:has(.box)):not(:has(.small-box)) > [class*="col-"]:empty {
    display: none !important;
}

/* The form/content column — full width, styled as a DBIM card */
.dbim-body .container .row:not(:has(.pushable)):not(:has(.info-box)):not(:has(.box)):not(:has(.small-box)) > [class*="col-"]:not(:empty),
.dbim-body .container.my_label .row:not(:has(.pushable)):not(:has(.info-box)):not(:has(.box)):not(:has(.small-box)) > [class*="col-"]:not(:empty) {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    padding: 0 !important;
}

/* If the inner column has form-like content, render as a card */
.dbim-body .container .row:not(:has(.pushable)):not(:has(.info-box)):not(:has(.box)):not(:has(.small-box)) > [class*="col-"]:has(input, select, textarea, form, .form-group),
.dbim-body .container.my_label .row:not(:has(.pushable)):not(:has(.info-box)):not(:has(.box)):not(:has(.small-box)) > [class*="col-"]:has(input, select, textarea, form, .form-group) {
    background: var(--dbim-surface, #ffffff) !important;
    border: 1px solid var(--dbim-border, #e5e7eb) !important;
    border-radius: var(--dbim-radius-lg, 12px) !important;
    box-shadow: var(--dbim-elevation-2, 0 4px 12px rgba(0,0,0,.06)) !important;
    padding: 24px 28px !important;
}

/* Inputs in those forms — proper width + DBIM styling */
.dbim-body .container .row [class*="col-"] input[type="date"],
.dbim-body .container .row [class*="col-"] input[type="text"],
.dbim-body .container .row [class*="col-"] input[type="email"],
.dbim-body .container .row [class*="col-"] input[type="number"],
.dbim-body .container .row [class*="col-"] input[type="tel"],
.dbim-body .container .row [class*="col-"] select,
.dbim-body .container .row [class*="col-"] textarea,
.dbim-body .container.my_label .row [class*="col-"] input[type="date"],
.dbim-body .container.my_label .row [class*="col-"] input[type="text"],
.dbim-body .container.my_label .row [class*="col-"] input[type="email"],
.dbim-body .container.my_label .row [class*="col-"] input[type="number"],
.dbim-body .container.my_label .row [class*="col-"] input[type="tel"],
.dbim-body .container.my_label .row [class*="col-"] select,
.dbim-body .container.my_label .row [class*="col-"] textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    border: 1px solid var(--dbim-border, #d1d5db) !important;
    border-radius: var(--dbim-radius-sm, 8px) !important;
    background: var(--dbim-surface-2, #fafafa) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
}

/* Labels above inputs */
.dbim-body .container .row [class*="col-"] label,
.dbim-body .container.my_label .row [class*="col-"] label {
    display: block !important;
    font-weight: 600 !important;
    color: var(--dbim-text, #1f2937) !important;
    margin-bottom: 6px !important;
    font-size: 13px !important;
}

/* Heading row above the form (title bar + home icon) */
.dbim-body .container > .row:first-child:has(a[href*="dashboard"], a[href="index.php"], a[href="home.php"]),
.dbim-body .container.my_label > .row:first-child:has(a[href*="dashboard"], a[href="index.php"], a[href="home.php"]) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    max-width: 100% !important;
    margin: 16px auto 20px !important;
    padding: 0 24px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.dbim-body .container > .row:first-child:has(a[href*="dashboard"]) > [class*="col-"],
.dbim-body .container.my_label > .row:first-child:has(a[href*="dashboard"]) > [class*="col-"] {
    width: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Filter Data / Submit buttons in legacy forms */
.dbim-body .container .row input[type="submit"],
.dbim-body .container .row button[type="submit"],
.dbim-body .container.my_label .row input[type="submit"],
.dbim-body .container.my_label .row button[type="submit"] {
    background: var(--dbim-primary, #8B1538) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 24px !important;
    border-radius: var(--dbim-radius-sm, 8px) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background .15s ease !important;
}
.dbim-body .container .row input[type="submit"]:hover,
.dbim-body .container .row button[type="submit"]:hover {
    background: var(--dbim-primary-dark, #6e0f2a) !important;
}

/* Tables that appear after filter — full width, scroll wrapper */
.dbim-body .container .row table.table,
.dbim-body .container.my_label .row table.table {
    width: 100% !important;
    margin-top: 16px !important;
    border-collapse: collapse !important;
    background: var(--dbim-surface, #fff) !important;
    border-radius: var(--dbim-radius-md, 10px) !important;
    overflow: hidden !important;
    box-shadow: var(--dbim-elevation-1, 0 1px 3px rgba(0,0,0,.05)) !important;
}
.dbim-body .container .row table.table th,
.dbim-body .container.my_label .row table.table th {
    background: var(--dbim-primary-50, #fbe9ee) !important;
    color: var(--dbim-primary-dark, #6e0f2a) !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--dbim-primary, #8B1538) !important;
    text-align: left !important;
}
.dbim-body .container .row table.table td,
.dbim-body .container.my_label .row table.table td {
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--dbim-border-subtle, #f0f0f0) !important;
    font-size: 13px !important;
    color: var(--dbim-text, #1f2937) !important;
}

/* ────────────────────────────────────────────────────────────────────────
   19. AdminLTE legacy .box pages (FIX 27)
       Earlier .row grid rules cause squeeze when row only has 1 child.
       Reset rows-with-box/table/single-content to block flow and
       render .box as a proper DBIM card.
   ──────────────────────────────────────────────────────────────────────── */

/* Rows that contain a .box, .small-box, table, or are single-column wrappers
   should NOT be grid. Force block + full width. (specificity beats the
   earlier `body .container.my_label .row` rule via body+!important.) */
body.dbim-body .container .row:has(> .col-xs-12 > .box),
body.dbim-body .container .row:has(> [class*="col-"] > .box),
body.dbim-body .container .row:has(> [class*="col-"] > table),
body.dbim-body .container .row:has(> [class*="col-"] > .box-body),
body.dbim-body .container.my_label .row:has(> .col-xs-12 > .box),
body.dbim-body .container.my_label .row:has(> [class*="col-"] > .box),
body.dbim-body .container.my_label .row:has(> [class*="col-"] > table),
body.dbim-body .container.my_label .row:has(> [class*="col-"] > .box-body) {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    margin: 0 0 var(--dbim-sp-5) 0 !important;
}

/* The single column inside such a row should be full width */
body.dbim-body .container .row:has(> [class*="col-"] > .box) > [class*="col-"],
body.dbim-body .container.my_label .row:has(> [class*="col-"] > .box) > [class*="col-"],
body.dbim-body .container .row:has(> [class*="col-"] > table) > [class*="col-"],
body.dbim-body .container.my_label .row:has(> [class*="col-"] > table) > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Style .box as a DBIM card */
body.dbim-body .box {
    background: var(--dbim-surface, #ffffff) !important;
    border: 1px solid var(--dbim-border, #e5e7eb) !important;
    border-radius: var(--dbim-radius-lg, 12px) !important;
    box-shadow: var(--dbim-elevation-2, 0 4px 12px rgba(0,0,0,.06)) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
body.dbim-body .box > .form-group:first-child {
    background: linear-gradient(90deg, var(--dbim-primary-soft, #fbe9ee) 0%, var(--dbim-surface, #fff) 100%) !important;
    margin: 0 !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--dbim-border, #e5e7eb) !important;
}
body.dbim-body .box > .form-group:first-child > .col-sm-12 {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
}
body.dbim-body .box .box-header {
    padding: 12px 20px !important;
    border-bottom: 1px solid var(--dbim-border-subtle, #f0f0f0) !important;
}
body.dbim-body .box .box-body {
    padding: 20px !important;
}

/* Inner form.row inside .box-body — render fields inline as flex */
body.dbim-body .box .box-body form.row,
body.dbim-body .box .box-body > form,
body.dbim-body .box-body form[method="post"].row {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 14px !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
}
body.dbim-body .box .box-body form.row > .form-group,
body.dbim-body .box .box-body form.row > [class*="col-"],
body.dbim-body .box-body form[method="post"].row > .form-group,
body.dbim-body .box-body form[method="post"].row > [class*="col-"] {
    flex: 1 1 200px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    min-width: 180px !important;
}
body.dbim-body .box .box-body form.row > .form-group label,
body.dbim-body .box .box-body form.row > [class*="col-"] label {
    display: block !important;
    font-weight: 600 !important;
    color: var(--dbim-text, #1f2937) !important;
    margin: 0 0 6px 0 !important;
    font-size: 13px !important;
}
body.dbim-body .box .box-body form.row .form-control,
body.dbim-body .box .box-body form.row input,
body.dbim-body .box .box-body form.row select,
body.dbim-body .box .box-body form.row textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 9px 12px !important;
    border: 1px solid var(--dbim-border, #d1d5db) !important;
    border-radius: var(--dbim-radius-sm, 8px) !important;
    background: var(--dbim-surface, #fff) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    height: auto !important;
    box-shadow: none !important;
}
body.dbim-body .box .box-body form.row input[type="submit"],
body.dbim-body .box .box-body form.row button[type="submit"] {
    background: var(--dbim-primary, #8B1538) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    width: auto !important;
    flex: 0 0 auto !important;
}
body.dbim-body .box .box-body form.row input[type="submit"]:hover,
body.dbim-body .box .box-body form.row button[type="submit"]:hover {
    background: var(--dbim-primary-dark, #6e0f2a) !important;
}

/* Tables inside .box-body — full width, clean styling */
body.dbim-body .box .box-body table,
body.dbim-body .box .box-body table.table {
    width: 100% !important;
    margin: 16px 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
    font-size: 13px !important;
}
body.dbim-body .box .box-body table th,
body.dbim-body .box .box-body table.table th {
    background: var(--dbim-primary-soft, #fbe9ee) !important;
    color: var(--dbim-primary-dark, #6e0f2a) !important;
    padding: 10px 12px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--dbim-primary, #8B1538) !important;
    text-align: left !important;
}
body.dbim-body .box .box-body table td,
body.dbim-body .box .box-body table.table td {
    padding: 9px 12px !important;
    border-bottom: 1px solid var(--dbim-border-subtle, #f0f0f0) !important;
    color: var(--dbim-text, #1f2937) !important;
}
body.dbim-body .box .box-body table.table-striped tbody tr:nth-child(odd) {
    background: var(--dbim-surface-2, #fafafa) !important;
}
body.dbim-body .box .box-body table tfoot th {
    background: var(--dbim-surface-2, #fafafa) !important;
    color: var(--dbim-text, #1f2937) !important;
    border-top: 2px solid var(--dbim-border-strong, #cbd5e1) !important;
    border-bottom: none !important;
}

/* Export buttons row at bottom of report pages */
body.dbim-body .box > div:last-child:has(button[onclick*="doExport"]) {
    padding: 14px 20px !important;
    background: var(--dbim-surface-2, #fafafa) !important;
    border-top: 1px solid var(--dbim-border, #e5e7eb) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    font-weight: 600 !important;
    color: var(--dbim-text-2, #4b5563) !important;
}
body.dbim-body .box > div:last-child:has(button[onclick*="doExport"]) button {
    padding: 7px 14px !important;
    font-size: 12px !important;
    border-radius: var(--dbim-radius-sm, 8px) !important;
}

/* dataTables wrapper inside .box-body */
body.dbim-body .box .box-body .dataTables_wrapper {
    width: 100% !important;
    overflow-x: auto !important;
}

/* Center texts inside .box-body — restore as block but not text-align:center */
body.dbim-body .box .box-body > center,
body.dbim-body .box .box-body center {
    display: block !important;
    text-align: center !important;
    color: var(--dbim-text-2, #4b5563) !important;
    font-size: 13px !important;
    padding: 8px 0 !important;
    margin: 0 !important;
}

/* Make container full width on legacy report pages (don't let bootstrap shrink it) */
body.dbim-body .container.my_label,
body.dbim-body .my_label.container {
    max-width: var(--dbim-container-max, 1280px) !important;
    width: 100% !important;
}

/* ════════════════════════════════════════════════════════════════════════
   DBIM REPORT CARD COMPONENT (used by rebuilt legacy report pages)
   ════════════════════════════════════════════════════════════════════════ */
.dbim-report-shell {
    max-width: var(--dbim-container-max, 1280px);
    margin: 0 auto;
    padding: 24px 20px 48px;
}
.dbim-report-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.dbim-report-breadcrumb .home-link {
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--dbim-primary-soft, #fbe9ee);
    color: var(--dbim-primary-dark, #6e0f2a);
    text-decoration: none;
    transition: all .15s ease;
    border: 1px solid var(--dbim-border, #e5e7eb);
}
.dbim-report-breadcrumb .home-link:hover {
    background: var(--dbim-primary, #8B1538);
    color: #fff;
    transform: translateY(-1px);
}
.dbim-report-breadcrumb .title-pill {
    padding: 8px 18px;
    background: linear-gradient(90deg, var(--dbim-primary, #8B1538) 0%, var(--dbim-primary-dark, #6e0f2a) 100%);
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 6px rgba(139,21,56,.18);
}

/* Card shell — new mode = lighter, classic mode = framed */
.dbim-report-card {
    background: var(--dbim-surface, #ffffff);
    border: 1px solid var(--dbim-border, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,.05);
    overflow: hidden;
}
html[data-ui-mode="classic"] .dbim-report-card {
    border-width: 2px;
    border-color: var(--dbim-border-strong, #cbd5e1);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.dbim-report-card .info-strip {
    padding: 12px 24px;
    background: var(--dbim-surface-2, #f9fafb);
    border-bottom: 1px solid var(--dbim-border-subtle, #f0f0f0);
    color: var(--dbim-text-2, #4b5563);
    font-size: 13px;
    text-align: center;
}

/* Filter form */
.dbim-report-filter {
    padding: 20px 24px;
    background: var(--dbim-surface, #fff);
    border-bottom: 1px solid var(--dbim-border-subtle, #f0f0f0);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}
.dbim-report-filter .field {
    flex: 1 1 200px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dbim-report-filter .field > label {
    font-size: 12px;
    font-weight: 600;
    color: var(--dbim-text, #1f2937);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.dbim-report-filter .field input,
.dbim-report-filter .field select,
.dbim-report-filter .field textarea {
    padding: 10px 12px;
    border: 1px solid var(--dbim-border, #d1d5db);
    border-radius: 8px;
    background: var(--dbim-surface, #fff);
    font-size: 14px;
    color: var(--dbim-text, #1f2937);
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dbim-report-filter .field input:focus,
.dbim-report-filter .field select:focus,
.dbim-report-filter .field textarea:focus {
    outline: none;
    border-color: var(--dbim-primary, #8B1538);
    box-shadow: 0 0 0 3px rgba(139,21,56,.10);
}
.dbim-report-filter .actions {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
}
.dbim-report-filter .btn-apply {
    padding: 10px 24px;
    background: var(--dbim-primary, #8B1538);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
    height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dbim-report-filter .btn-apply:hover {
    background: var(--dbim-primary-dark, #6e0f2a);
    transform: translateY(-1px);
}
.dbim-report-filter .btn-reset {
    padding: 10px 18px;
    background: var(--dbim-surface, #fff);
    color: var(--dbim-text-2, #4b5563);
    border: 1px solid var(--dbim-border, #d1d5db);
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    height: 42px;
    display: inline-flex;
    align-items: center;
}
.dbim-report-filter .btn-reset:hover {
    background: var(--dbim-surface-2, #fafafa);
    border-color: var(--dbim-border-strong, #cbd5e1);
}

/* Table region */
.dbim-report-table-wrap {
    padding: 20px 24px;
    overflow-x: auto;
}
.dbim-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--dbim-text, #1f2937);
    background: var(--dbim-surface, #fff);
}
.dbim-report-table thead th {
    padding: 12px 14px;
    background: linear-gradient(180deg, var(--dbim-primary-soft, #fbe9ee) 0%, #f5d6df 100%);
    color: var(--dbim-primary-dark, #6e0f2a);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 2px solid var(--dbim-primary, #8B1538);
    position: sticky;
    top: 0;
    z-index: 1;
}
.dbim-report-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--dbim-border-subtle, #f0f0f0);
    vertical-align: middle;
}
.dbim-report-table tbody tr:nth-child(odd) td {
    background: var(--dbim-surface-2, #fafafa);
}
.dbim-report-table tbody tr:hover td {
    background: var(--dbim-primary-soft, #fbe9ee);
}
.dbim-report-table tfoot th,
.dbim-report-table tfoot td {
    padding: 12px 14px;
    background: var(--dbim-surface-2, #fafafa);
    color: var(--dbim-text, #1f2937);
    font-weight: 700;
    border-top: 2px solid var(--dbim-border-strong, #cbd5e1);
}

/* Export strip */
.dbim-report-exports {
    padding: 16px 24px;
    background: var(--dbim-surface-2, #f9fafb);
    border-top: 1px solid var(--dbim-border, #e5e7eb);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dbim-report-exports .label {
    font-weight: 600;
    color: var(--dbim-text-2, #4b5563);
    margin-right: 6px;
    font-size: 13px;
}
.dbim-report-exports button,
.dbim-report-exports .exp-btn {
    padding: 7px 14px;
    background: var(--dbim-surface, #fff);
    border: 1px solid var(--dbim-border, #d1d5db);
    color: var(--dbim-text, #1f2937);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all .12s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.dbim-report-exports button:hover {
    border-color: var(--dbim-primary, #8B1538);
    color: var(--dbim-primary-dark, #6e0f2a);
    background: var(--dbim-primary-soft, #fbe9ee);
}
.dbim-report-exports .exp-pdf:hover { color: #c0392b; border-color: #c0392b; background: #fce8e6; }
.dbim-report-exports .exp-excel:hover, .dbim-report-exports .exp-xlsx:hover { color: #1f7244; border-color: #27ae60; background: #e8f8ef; }
.dbim-report-exports .exp-csv:hover, .dbim-report-exports .exp-tsv:hover { color: #2c3e50; border-color: #34495e; background: #ecf0f1; }

/* Horizontal scroll pill (replaces old fixed arrows) */
.dbim-report-scrollnav {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--dbim-surface, #fff);
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    display: flex;
    gap: 4px;
    z-index: 90;
    border: 1px solid var(--dbim-border, #e5e7eb);
}
.dbim-report-scrollnav button {
    width: 36px; height: 36px;
    border: none;
    background: var(--dbim-surface-2, #f9fafb);
    color: var(--dbim-text-2, #4b5563);
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .12s ease;
}
.dbim-report-scrollnav button:hover {
    background: var(--dbim-primary, #8B1538);
    color: #fff;
}

/* Hide AdminLTE leftover fixed buttons from any old in-page markup */
.dbim-body .dbim-report-shell ~ div[style*="position:fixed"][style*="z-index:99"],
.dbim-body .dbim-report-shell ~ div[style*="position: fixed"][style*="z-index: 99"] {
    display: none !important;
}

/* Responsive */
@media (max-width: 700px) {
    .dbim-report-shell { padding: 12px 12px 32px; }
    .dbim-report-filter, .dbim-report-table-wrap, .dbim-report-exports { padding: 14px 14px; }
    .dbim-report-table thead th, .dbim-report-table tbody td { padding: 9px 8px; font-size: 12px; }
    .dbim-report-filter .field { flex: 1 1 100%; min-width: 0; }
    .dbim-report-filter .actions { width: 100%; }
    .dbim-report-filter .btn-apply { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════════
   DBIM CARD-GRID LANDING (e.g. c39_schemes.php, mis_reports_kas.php)
   Replaces AdminLTE box-success/box-danger card grid.
   ════════════════════════════════════════════════════════════════════════ */
.dbim-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.dbim-landing-tile {
    display: grid;
    grid-template-columns: 56px 1fr 24px;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--dbim-surface, #ffffff);
    border: 1px solid var(--dbim-border, #e5e7eb);
    border-left: 4px solid var(--dbim-primary, #8B1538);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    text-decoration: none;
    color: var(--dbim-text, #1f2937);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dbim-landing-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    border-color: var(--dbim-primary, #8B1538);
    color: var(--dbim-primary-dark, #6e0f2a);
}
.dbim-landing-tile .tile-icon {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: var(--dbim-primary-soft, #fbe9ee);
    color: var(--dbim-primary-dark, #6e0f2a);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dbim-landing-tile .tile-icon .material-icons {
    font-size: 28px;
}
.dbim-landing-tile .tile-text { min-width: 0; }
.dbim-landing-tile .tile-title {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    color: var(--dbim-text, #1f2937);
    margin-bottom: 4px;
}
.dbim-landing-tile .tile-desc {
    font-size: 13px;
    color: var(--dbim-text-2, #4b5563);
    line-height: 1.4;
}
.dbim-landing-tile .tile-arrow {
    color: var(--dbim-text-muted, #9ca3af);
    font-size: 20px;
    transition: transform .15s ease, color .15s ease;
}
.dbim-landing-tile:hover .tile-arrow {
    transform: translateX(4px);
    color: var(--dbim-primary, #8B1538);
}

/* Accent variants */
.dbim-landing-tile.tile-success { border-left-color: #16a34a; }
.dbim-landing-tile.tile-success .tile-icon { background: #dcfce7; color: #166534; }
.dbim-landing-tile.tile-danger  { border-left-color: #dc2626; }
.dbim-landing-tile.tile-danger  .tile-icon { background: #fee2e2; color: #991b1b; }
.dbim-landing-tile.tile-info    { border-left-color: #0284c7; }
.dbim-landing-tile.tile-info    .tile-icon { background: #e0f2fe; color: #075985; }
.dbim-landing-tile.tile-warning { border-left-color: #d97706; }
.dbim-landing-tile.tile-warning .tile-icon { background: #fef3c7; color: #92400e; }
.dbim-landing-tile.tile-primary { border-left-color: var(--dbim-primary, #8B1538); }
.dbim-landing-tile.tile-primary .tile-icon { background: var(--dbim-primary-soft, #fbe9ee); color: var(--dbim-primary-dark, #6e0f2a); }

@media (max-width: 640px) {
    .dbim-card-grid { grid-template-columns: 1fr; }
    .dbim-landing-tile { padding: 14px 16px; grid-template-columns: 48px 1fr 20px; gap: 12px; }
    .dbim-landing-tile .tile-icon { width: 48px; height: 48px; }
}

/* ════════════════════════════════════════════════════════════════════════
   FIX 28: LEGACY .form-horizontal PAGE RE-SKIN
   Applies to add_/update_/view_/*_verification/changepass/payment_history.
   Pure CSS — no markup changes — protects data-submission logic.
   ════════════════════════════════════════════════════════════════════════ */

/* The container_my_label wrapper on these form pages */
body.dbim-body .container.my_label:has(.form-horizontal),
body.dbim-body div#scroll_container.container.my_label:has(.form-horizontal) {
    max-width: var(--dbim-container-max, 1280px) !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 24px 20px !important;
    overflow: visible !important;
}

/* The outer .row > .col-xs-12 > .box wrapper — reset grid squeeze, render as DBIM card */
body.dbim-body .container.my_label:has(.form-horizontal) > section.content > .row,
body.dbim-body .container.my_label .row:has(.form-horizontal) {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}
body.dbim-body .container.my_label:has(.form-horizontal) > section.content > .row > [class*="col-"],
body.dbim-body .container.my_label .row:has(.form-horizontal) > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* The .box itself styled as DBIM card */
body.dbim-body .box:has(.form-horizontal),
body.dbim-body .box:has(form) {
    background: var(--dbim-surface, #ffffff) !important;
    border: 1px solid var(--dbim-border, #e5e7eb) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.05) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* First .form-group inside .box = breadcrumb row (home + back + title pill) */
body.dbim-body .box > .form-group:first-of-type {
    background: linear-gradient(90deg, var(--dbim-primary-soft, #fbe9ee) 0%, #fff 100%) !important;
    padding: 16px 24px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--dbim-border, #e5e7eb) !important;
}
body.dbim-body .box > .form-group:first-of-type > .col-sm-12 {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}
body.dbim-body .box > .form-group:first-of-type .btn-info,
body.dbim-body .box > .form-group:first-of-type .btn-secondary {
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all .15s ease !important;
}
body.dbim-body .box > .form-group:first-of-type .btn-info {
    background: var(--dbim-primary-soft, #fbe9ee) !important;
    color: var(--dbim-primary-dark, #6e0f2a) !important;
    border: 1px solid var(--dbim-border, #e5e7eb) !important;
}
body.dbim-body .box > .form-group:first-of-type .btn-info:hover {
    background: var(--dbim-primary, #8B1538) !important;
    color: #fff !important;
}
body.dbim-body .box > .form-group:first-of-type .btn-secondary {
    background: linear-gradient(90deg, var(--dbim-primary, #8B1538), var(--dbim-primary-dark, #6e0f2a)) !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 18px !important;
    border-radius: 999px !important;
    pointer-events: none !important;
}

/* The "page title" <center><label><h2 style="color:red"> hack — restyle to clean DBIM heading */
body.dbim-body .box center {
    display: block !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 12px 24px 0 !important;
    background: transparent !important;
}
body.dbim-body .box center label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.dbim-body .box center label h2 {
    color: var(--dbim-text, #1f2937) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    border-bottom: 2px solid var(--dbim-primary-soft, #fbe9ee) !important;
    display: inline-block !important;
}
body.dbim-body .box center > br:first-of-type { display: none !important; }

/* The form itself — pad out box body */
body.dbim-body .box .form-horizontal {
    padding: 16px 24px 24px !important;
    margin: 0 !important;
    display: block !important;
}

/* Each .form-group row */
body.dbim-body .form-horizontal .form-group {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    gap: 12px !important;
}

/* Label column — always 200px wide on desktop, full-width on mobile */
body.dbim-body .form-horizontal .form-group > .control-label,
body.dbim-body .form-horizontal .form-group > label.control-label {
    flex: 0 0 200px !important;
    max-width: 200px !important;
    text-align: left !important;
    padding: 10px 0 0 0 !important;
    margin: 0 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--dbim-text, #1f2937) !important;
    line-height: 1.4 !important;
}
body.dbim-body .form-horizontal .form-group > .control-label span[style*="color:red"] {
    color: var(--dbim-danger, #dc2626) !important;
    font-weight: 700 !important;
}

/* Input column — flex fill */
body.dbim-body .form-horizontal .form-group > [class*="col-sm-"]:not(.col-sm-2):not(.control-label),
body.dbim-body .form-horizontal .form-group > [class*="col-md-"]:not(.col-md-2):not(.control-label) {
    flex: 1 1 280px !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
}

/* When col-sm-12 used full-width (no label paired), spread full row */
body.dbim-body .form-horizontal .form-group > .col-sm-12:only-child {
    flex: 1 1 100% !important;
    max-width: 100% !important;
}

/* Form controls inside */
body.dbim-body .form-horizontal .form-control,
body.dbim-body .form-horizontal input[type="text"],
body.dbim-body .form-horizontal input[type="email"],
body.dbim-body .form-horizontal input[type="tel"],
body.dbim-body .form-horizontal input[type="number"],
body.dbim-body .form-horizontal input[type="password"],
body.dbim-body .form-horizontal input[type="date"],
body.dbim-body .form-horizontal input[type="file"],
body.dbim-body .form-horizontal select,
body.dbim-body .form-horizontal textarea {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px !important;
    height: auto !important;
    border: 1px solid var(--dbim-border, #d1d5db) !important;
    border-radius: 8px !important;
    background: var(--dbim-surface, #fff) !important;
    color: var(--dbim-text, #1f2937) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
body.dbim-body .form-horizontal .form-control:focus,
body.dbim-body .form-horizontal input:focus,
body.dbim-body .form-horizontal select:focus,
body.dbim-body .form-horizontal textarea:focus {
    outline: none !important;
    border-color: var(--dbim-primary, #8B1538) !important;
    box-shadow: 0 0 0 3px rgba(139,21,56,.10) !important;
}
body.dbim-body .form-horizontal .form-control[disabled],
body.dbim-body .form-horizontal input[disabled],
body.dbim-body .form-horizontal select[disabled],
body.dbim-body .form-horizontal textarea[disabled] {
    background: var(--dbim-surface-2, #fafafa) !important;
    color: var(--dbim-text-2, #4b5563) !important;
    cursor: not-allowed !important;
}

/* File input row */
body.dbim-body .form-horizontal input[type="file"] {
    padding: 6px 8px !important;
    background: var(--dbim-surface-2, #fafafa) !important;
}

/* Submit buttons inside form */
body.dbim-body .form-horizontal .btn-primary,
body.dbim-body .form-horizontal button[type="submit"],
body.dbim-body .form-horizontal input[type="submit"] {
    background: var(--dbim-primary, #8B1538) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background .15s ease, transform .15s ease !important;
    box-shadow: 0 2px 6px rgba(139,21,56,.18) !important;
}
body.dbim-body .form-horizontal .btn-primary:hover,
body.dbim-body .form-horizontal button[type="submit"]:hover,
body.dbim-body .form-horizontal input[type="submit"]:hover {
    background: var(--dbim-primary-dark, #6e0f2a) !important;
    transform: translateY(-1px) !important;
}
body.dbim-body .form-horizontal .btn-success {
    background: #16a34a !important;
    border: none !important;
    color: #fff !important;
    padding: 10px 22px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}
body.dbim-body .form-horizontal .btn-danger {
    background: #dc2626 !important;
    border: none !important;
    color: #fff !important;
    padding: 10px 22px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}
body.dbim-body .form-horizontal .btn-warning {
    background: #d97706 !important;
    border: none !important;
    color: #fff !important;
    padding: 10px 22px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

/* Offset button rows (col-sm-offset-2 col-sm-10 etc.) — restyle as action bar */
body.dbim-body .form-horizontal .form-group:has(.col-sm-offset-2),
body.dbim-body .form-horizontal .form-group:has([class*="offset"]) {
    margin-top: 8px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--dbim-border-subtle, #f0f0f0) !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}
body.dbim-body .form-horizontal .form-group:has(.col-sm-offset-2) > [class*="col-"],
body.dbim-body .form-horizontal .form-group:has([class*="offset"]) > [class*="col-"] {
    flex: 0 0 auto !important;
    width: auto !important;
}

/* Old "uneditable-input" / static text wrapper */
body.dbim-body .form-horizontal .uneditable-input,
body.dbim-body .form-horizontal p.form-control-static {
    padding: 10px 12px !important;
    background: var(--dbim-surface-2, #fafafa) !important;
    border: 1px solid var(--dbim-border-subtle, #f0f0f0) !important;
    border-radius: 8px !important;
    min-height: 38px !important;
    color: var(--dbim-text, #1f2937) !important;
    font-size: 14px !important;
}

/* Image previews in view_beneficiary etc. */
body.dbim-body .form-horizontal img,
body.dbim-body .form-horizontal .img-thumbnail {
    max-width: 240px !important;
    height: auto !important;
    border: 1px solid var(--dbim-border, #e5e7eb) !important;
    border-radius: 8px !important;
    padding: 4px !important;
    background: var(--dbim-surface, #fff) !important;
}

/* Help text under inputs */
body.dbim-body .form-horizontal .help-block,
body.dbim-body .form-horizontal small.text-muted {
    color: var(--dbim-text-muted, #9ca3af) !important;
    font-size: 12px !important;
    margin-top: 4px !important;
    display: block !important;
}

/* Alerts inside forms */
body.dbim-body .form-horizontal .alert {
    padding: 12px 14px !important;
    border-radius: 8px !important;
    margin-bottom: 14px !important;
    border: 1px solid transparent !important;
    font-size: 14px !important;
}
body.dbim-body .form-horizontal .alert-danger {
    background: #fee2e2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}
body.dbim-body .form-horizontal .alert-success {
    background: #dcfce7 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}
body.dbim-body .form-horizontal .alert-info {
    background: #e0f2fe !important;
    border-color: #bae6fd !important;
    color: #075985 !important;
}
body.dbim-body .form-horizontal .alert-warning {
    background: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

/* Tables inside form pages (e.g. payment history shows past payments) */
body.dbim-body .box .form-horizontal table,
body.dbim-body .box table.table {
    width: 100% !important;
    margin: 12px 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
}
body.dbim-body .box table.table th {
    background: var(--dbim-primary-soft, #fbe9ee) !important;
    color: var(--dbim-primary-dark, #6e0f2a) !important;
    padding: 10px 12px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--dbim-primary, #8B1538) !important;
    text-align: left !important;
    font-size: 13px !important;
}
body.dbim-body .box table.table td {
    padding: 9px 12px !important;
    border-bottom: 1px solid var(--dbim-border-subtle, #f0f0f0) !important;
    color: var(--dbim-text, #1f2937) !important;
    font-size: 13px !important;
}

/* Section headers within forms (sometimes <h3> or <hr> + <h4>) */
body.dbim-body .form-horizontal h3,
body.dbim-body .form-horizontal h4 {
    margin: 20px 0 12px 0 !important;
    padding: 8px 0 !important;
    color: var(--dbim-primary-dark, #6e0f2a) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--dbim-primary-soft, #fbe9ee) !important;
    width: 100% !important;
}
body.dbim-body .form-horizontal hr {
    border: 0 !important;
    border-top: 1px solid var(--dbim-border-subtle, #f0f0f0) !important;
    margin: 20px 0 !important;
}

/* Multi-step pagination header (add_beneficiary_shg_step1/2/3 etc.) */
body.dbim-body .container.my_label .pagination,
body.dbim-body .container.my_label .nav-tabs {
    display: flex !important;
    list-style: none !important;
    padding: 0 24px 0 !important;
    margin: 0 0 16px 0 !important;
    gap: 6px !important;
    border-bottom: 1px solid var(--dbim-border, #e5e7eb) !important;
}
body.dbim-body .container.my_label .pagination > li > a {
    padding: 8px 16px !important;
    background: var(--dbim-surface, #fff) !important;
    color: var(--dbim-text-2, #4b5563) !important;
    border: 1px solid var(--dbim-border, #e5e7eb) !important;
    border-radius: 8px 8px 0 0 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}
body.dbim-body .container.my_label .pagination > li.active > a {
    background: var(--dbim-primary, #8B1538) !important;
    color: #fff !important;
    border-color: var(--dbim-primary, #8B1538) !important;
}

/* Responsive */
@media (max-width: 768px) {
    body.dbim-body .form-horizontal .form-group {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    body.dbim-body .form-horizontal .form-group > .control-label {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        padding: 0 0 4px 0 !important;
    }
    body.dbim-body .form-horizontal .form-group > [class*="col-"] {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
    body.dbim-body .box > .form-group:first-of-type {
        padding: 12px 14px !important;
    }
    body.dbim-body .box .form-horizontal {
        padding: 12px 14px 18px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   FIX 30: DEVANAGARI TEXT CLIPPING — give Marathi characters proper
   vertical breathing room everywhere. NEVER use overflow:hidden on text.
   ════════════════════════════════════════════════════════════════════════ */

/* Site-wide line-height fix — Devanagari matras need >=1.55 */
body.dbim-body {
    line-height: 1.6 !important;
}

/* But Material Icons should stay tight (they have no descenders) */
body.dbim-body .material-icons {
    line-height: 1 !important;
    vertical-align: middle;
}

/* ─── Title pill / breadcrumb chip ───────────────────────────────── */
body.dbim-body .dbim-report-breadcrumb .title-pill,
body.dbim-body .dbim-report-breadcrumb .home-link {
    line-height: 1.6 !important;
    height: auto !important;
    min-height: 40px !important;
    padding: 8px 18px !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
}
body.dbim-body .dbim-report-breadcrumb .home-link {
    padding: 0 !important;
    width: 40px !important;
}

/* ─── .box page-title <h2> (the "अर्ज भरा" heading in screenshot) ─── */
body.dbim-body .box center label h2 {
    line-height: 1.6 !important;
    padding: 4px 4px 10px 4px !important;
    margin: 0 0 4px 0 !important;
    overflow: visible !important;
    border-bottom: 2px solid var(--dbim-primary-soft, #fbe9ee) !important;
    display: inline-block !important;
    color: var(--dbim-primary-dark, #6e0f2a) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
}
body.dbim-body .box center {
    overflow: visible !important;
    padding: 16px 24px 8px !important;
}
body.dbim-body .box center label {
    overflow: visible !important;
    line-height: 1.6 !important;
    padding-bottom: 4px !important;
}

/* ─── Form inputs / selects (the scheme dropdown that's clipped) ─── */
body.dbim-body .form-horizontal .form-control,
body.dbim-body .form-horizontal input[type="text"],
body.dbim-body .form-horizontal input[type="email"],
body.dbim-body .form-horizontal input[type="tel"],
body.dbim-body .form-horizontal input[type="number"],
body.dbim-body .form-horizontal input[type="password"],
body.dbim-body .form-horizontal input[type="date"],
body.dbim-body .form-horizontal select,
body.dbim-body .form-horizontal textarea,
body.dbim-body .dbim-report-filter .field input,
body.dbim-body .dbim-report-filter .field select,
body.dbim-body .dbim-report-filter .field textarea {
    line-height: 1.6 !important;
    padding: 12px 14px !important;
    min-height: 46px !important;
    height: auto !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Selects specifically — Devanagari options need more vertical room */
body.dbim-body .form-horizontal select,
body.dbim-body .dbim-report-filter .field select,
body.dbim-body select {
    padding: 10px 36px 10px 14px !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--dbim-text-2, #4b5563) 50%),
        linear-gradient(135deg, var(--dbim-text-2, #4b5563) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
body.dbim-body select option {
    padding: 8px 12px !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
}

/* Labels (control-label) — Marathi labels like "योजनेचे नाव" need room */
body.dbim-body .form-horizontal .form-group > .control-label,
body.dbim-body .form-horizontal .form-group > label.control-label,
body.dbim-body .dbim-report-filter .field > label {
    line-height: 1.6 !important;
    padding: 12px 0 0 0 !important;
    font-size: 13px !important;
    overflow: visible !important;
    word-wrap: break-word !important;
    white-space: normal !important;
}

/* ─── Table cells (Marathi names in tables also need breathing room) ─── */
body.dbim-body .dbim-report-table tbody td,
body.dbim-body .dbim-report-table thead th,
body.dbim-body .dbim-report-table tfoot th,
body.dbim-body .dbim-report-table tfoot td,
body.dbim-body .box table.table th,
body.dbim-body .box table.table td {
    line-height: 1.6 !important;
    padding: 12px 14px !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: break-word !important;
}

/* ─── Buttons containing Marathi text ──────────────────────────────── */
body.dbim-body .btn,
body.dbim-body button,
body.dbim-body .dbim-btn,
body.dbim-body .dbim-report-exports button,
body.dbim-body .dbim-report-filter .btn-apply,
body.dbim-body .form-horizontal .btn-primary,
body.dbim-body .form-horizontal button[type="submit"],
body.dbim-body .form-horizontal input[type="submit"] {
    line-height: 1.4 !important;
    min-height: 40px !important;
    padding: 9px 18px !important;
    height: auto !important;
    overflow: visible !important;
    white-space: normal !important;
}

/* Navigation buttons in box header (home + back + title) */
body.dbim-body .box > .form-group:first-of-type .btn-info,
body.dbim-body .box > .form-group:first-of-type .btn-secondary {
    line-height: 1.4 !important;
    min-height: 40px !important;
    padding: 8px 16px !important;
    overflow: visible !important;
    white-space: normal !important;
}
body.dbim-body .box > .form-group:first-of-type .btn-info {
    min-width: 40px !important;
    width: auto !important;
    padding: 8px 12px !important;
}

/* DBIM landing tiles — Marathi titles need full height */
body.dbim-body .dbim-landing-tile {
    align-items: center !important;
    padding: 18px 22px !important;
}
body.dbim-body .dbim-landing-tile .tile-title {
    line-height: 1.5 !important;
    padding-bottom: 2px !important;
    overflow: visible !important;
}
body.dbim-body .dbim-landing-tile .tile-desc {
    line-height: 1.5 !important;
    overflow: visible !important;
}

/* DBIM card tiles (dashboard KPIs etc.) */
body.dbim-body .dbim-tile,
body.dbim-body .dbim-bcard {
    overflow: visible !important;
}
body.dbim-body .dbim-tile .label,
body.dbim-body .dbim-tile .value,
body.dbim-body .info-box .info-box-text,
body.dbim-body .info-box .info-box-number {
    line-height: 1.5 !important;
    overflow: visible !important;
}

/* Removal of overflow:hidden anywhere on text-bearing containers */
body.dbim-body .dbim-report-card,
body.dbim-body .dbim-report-shell,
body.dbim-body .box,
body.dbim-body .form-horizontal,
body.dbim-body .container.my_label {
    overflow: visible !important;
}

/* But keep table-wrap horizontal scroll */
body.dbim-body .dbim-report-table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* Header brand text (शबरी आदिवासी ... if visible) needs room */
body.dbim-body .brand .titles,
body.dbim-body .brand h1,
body.dbim-body .brand h2 {
    line-height: 1.5 !important;
    overflow: visible !important;
}

/* UI toggle widget — keep it tight (Latin only labels) */
body.dbim-body .dbim-ui-toggle,
body.dbim-body .dbim-ui-toggle-label,
body.dbim-body .dbim-ui-toggle-state {
    line-height: 1 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   FIX 31: TABLE → CARDS for wide reports
   When a .dbim-report-table has the .dbim-card-mode class (added by JS in
   header.php when columns > 4) OR viewport is narrow, render rows as cards.
   ════════════════════════════════════════════════════════════════════════ */

/* Card-mode default trigger when many columns OR narrow screen */
.dbim-report-table.dbim-card-mode,
.dbim-report-table.dbim-card-mode thead,
.dbim-report-table.dbim-card-mode tbody,
.dbim-report-table.dbim-card-mode tr,
.dbim-report-table.dbim-card-mode td,
.dbim-report-table.dbim-card-mode th {
    display: block !important;
}

/* Hide thead and tfoot (we use data-label instead) */
.dbim-report-table.dbim-card-mode > thead,
.dbim-report-table.dbim-card-mode > tfoot {
    display: none !important;
}

/* Body is a responsive grid */
.dbim-report-table.dbim-card-mode > tbody {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px !important;
    padding: 4px !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Each row = card */
.dbim-report-table.dbim-card-mode > tbody > tr {
    display: block !important;
    background: var(--dbim-surface, #ffffff) !important;
    border: 1px solid var(--dbim-border, #e5e7eb) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
    padding: 14px 16px !important;
    transition: box-shadow .15s ease, transform .15s ease !important;
    border-left: 4px solid var(--dbim-primary, #8B1538) !important;
    overflow: visible !important;
}
.dbim-report-table.dbim-card-mode > tbody > tr:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
    transform: translateY(-1px) !important;
}

/* Override the zebra-striping from table mode */
.dbim-report-table.dbim-card-mode > tbody > tr:nth-child(odd) {
    background: var(--dbim-surface, #ffffff) !important;
}
.dbim-report-table.dbim-card-mode > tbody > tr:nth-child(odd) > td {
    background: transparent !important;
}

/* Each <td> = labeled field */
.dbim-report-table.dbim-card-mode > tbody > tr > td {
    display: grid !important;
    grid-template-columns: 130px 1fr !important;
    gap: 8px !important;
    align-items: baseline !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid var(--dbim-border-subtle, #f0f0f0) !important;
    background: transparent !important;
    line-height: 1.55 !important;
    word-break: break-word !important;
    text-align: left !important;
    width: auto !important;
    white-space: normal !important;
    color: var(--dbim-text, #1f2937) !important;
    font-size: 13px !important;
}
.dbim-report-table.dbim-card-mode > tbody > tr > td:last-child {
    border-bottom: none !important;
}

/* First column (the row number/index) — make it the card title */
.dbim-report-table.dbim-card-mode > tbody > tr > td:first-child {
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    padding: 4px 0 10px 0 !important;
    margin-bottom: 6px !important;
    border-bottom: 2px solid var(--dbim-primary-soft, #fbe9ee) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--dbim-primary-dark, #6e0f2a) !important;
    background: transparent !important;
}
.dbim-report-table.dbim-card-mode > tbody > tr > td:first-child::before {
    content: "#" !important;
    color: var(--dbim-text-muted, #9ca3af) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

/* Pseudo-element for the field label */
.dbim-report-table.dbim-card-mode > tbody > tr > td[data-label]::before {
    content: attr(data-label) !important;
    font-weight: 600 !important;
    color: var(--dbim-text-2, #4b5563) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    line-height: 1.5 !important;
    padding-right: 8px !important;
    white-space: normal !important;
    word-break: break-word !important;
}

/* If a TD wraps an <a>/<button>/action (icon-only), tighten it */
.dbim-report-table.dbim-card-mode > tbody > tr > td:has(> a[class*="btn"]:only-child),
.dbim-report-table.dbim-card-mode > tbody > tr > td:has(> button:only-child),
.dbim-report-table.dbim-card-mode > tbody > tr > td:has(> i.fa:only-child) {
    grid-template-columns: 1fr !important;
}
.dbim-report-table.dbim-card-mode > tbody > tr > td:has(> a[class*="btn"]:only-child)::before,
.dbim-report-table.dbim-card-mode > tbody > tr > td:has(> button:only-child)::before {
    display: none !important;
}
.dbim-report-table.dbim-card-mode > tbody > tr > td a.btn,
.dbim-report-table.dbim-card-mode > tbody > tr > td button.btn {
    width: 100% !important;
    text-align: center !important;
    margin-top: 4px !important;
}

/* Status/total row inside tfoot — if needed, show as summary card below grid */
.dbim-report-table.dbim-card-mode + .dbim-report-summary {
    margin-top: 16px !important;
    padding: 14px 18px !important;
    background: var(--dbim-surface-2, #f9fafb) !important;
    border: 1px solid var(--dbim-border-strong, #cbd5e1) !important;
    border-radius: 10px !important;
    display: flex !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
    font-weight: 600 !important;
    color: var(--dbim-text, #1f2937) !important;
}

/* Adapt to narrow screens — single column cards */
@media (max-width: 700px) {
    .dbim-report-table.dbim-card-mode > tbody {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .dbim-report-table.dbim-card-mode > tbody > tr {
        padding: 12px 14px !important;
    }
    .dbim-report-table.dbim-card-mode > tbody > tr > td {
        grid-template-columns: 1fr !important;
        gap: 2px !important;
    }
    .dbim-report-table.dbim-card-mode > tbody > tr > td[data-label]::before {
        padding-right: 0 !important;
    }
}

/* Force card-mode on narrow viewport even without JS-added class */
@media (max-width: 1100px) {
    .dbim-report-table:not(.no-card-mode) thead,
    .dbim-report-table:not(.no-card-mode) tfoot {
        display: none !important;
    }
    .dbim-report-table:not(.no-card-mode),
    .dbim-report-table:not(.no-card-mode) tbody,
    .dbim-report-table:not(.no-card-mode) tr,
    .dbim-report-table:not(.no-card-mode) td {
        display: block !important;
    }
    .dbim-report-table:not(.no-card-mode) tbody {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .dbim-report-table:not(.no-card-mode) > tbody > tr {
        background: var(--dbim-surface, #fff) !important;
        border: 1px solid var(--dbim-border, #e5e7eb) !important;
        border-left: 4px solid var(--dbim-primary, #8B1538) !important;
        border-radius: 10px !important;
        padding: 12px 14px !important;
    }
    .dbim-report-table:not(.no-card-mode) > tbody > tr > td {
        padding: 5px 0 !important;
        border-bottom: 1px solid var(--dbim-border-subtle, #f0f0f0) !important;
        font-size: 13px !important;
    }
    .dbim-report-table:not(.no-card-mode) > tbody > tr > td[data-label]::before {
        content: attr(data-label) ": " !important;
        font-weight: 700 !important;
        color: var(--dbim-text-2, #4b5563) !important;
        margin-right: 4px !important;
        text-transform: none !important;
    }
}

/* View toggle button (table <-> cards) inside report card header */
.dbim-view-toggle {
    display: inline-flex;
    background: var(--dbim-surface-2, #f9fafb);
    border: 1px solid var(--dbim-border, #e5e7eb);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    margin-left: auto;
}
.dbim-view-toggle button {
    background: transparent !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--dbim-text-2, #4b5563) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    line-height: 1 !important;
    min-height: 28px !important;
}
.dbim-view-toggle button.active {
    background: var(--dbim-primary, #8B1538) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(139,21,56,.2) !important;
}
.dbim-view-toggle button .material-icons {
    font-size: 16px !important;
}

/* ════════════════════════════════════════════════════════════════════════
   FIX 32: CARD POLISH + FULL-SCREEN TABLE
   - tighter spacing
   - "Show more" collapse for fields beyond #4
   - table view = full-bleed report shell
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Tighter card spacing ─────────────────────────────────────────── */
.dbim-report-table.dbim-card-mode > tbody {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 10px !important;
    padding: 2px !important;
}
.dbim-report-table.dbim-card-mode > tbody > tr {
    padding: 10px 14px 12px !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
.dbim-report-table.dbim-card-mode > tbody > tr > td {
    grid-template-columns: 100px 1fr !important;
    gap: 6px !important;
    padding: 4px 0 !important;
    border-bottom: 1px dotted var(--dbim-border-subtle, #f0f0f0) !important;
    font-size: 13px !important;
}
.dbim-report-table.dbim-card-mode > tbody > tr > td[data-label]::before {
    font-size: 10.5px !important;
    letter-spacing: 0.04em !important;
    line-height: 1.4 !important;
    padding-right: 4px !important;
    color: var(--dbim-text-muted, #9ca3af) !important;
}
.dbim-report-table.dbim-card-mode > tbody > tr > td:first-child {
    padding: 2px 0 7px 0 !important;
    margin-bottom: 4px !important;
    border-bottom: 1.5px solid var(--dbim-primary-soft, #fbe9ee) !important;
    font-size: 13.5px !important;
}

/* ─── Show More / Show Less collapse ───────────────────────────────── */
.dbim-report-table.dbim-card-mode > tbody > tr > td.dbim-card-extra {
    display: none !important;
}
.dbim-report-table.dbim-card-mode > tbody > tr.expanded > td.dbim-card-extra {
    display: grid !important;
}
.dbim-report-table.dbim-card-mode > tbody > tr > button.dbim-card-more {
    margin-top: 8px !important;
    width: 100% !important;
    padding: 7px 10px !important;
    background: var(--dbim-primary-soft, #fbe9ee) !important;
    color: var(--dbim-primary-dark, #6e0f2a) !important;
    border: 1px dashed var(--dbim-primary, #8B1538) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    line-height: 1 !important;
    min-height: 32px !important;
    transition: all .15s ease !important;
}
.dbim-report-table.dbim-card-mode > tbody > tr > button.dbim-card-more:hover {
    background: var(--dbim-primary, #8B1538) !important;
    color: #fff !important;
    border-style: solid !important;
}
.dbim-report-table.dbim-card-mode > tbody > tr > button.dbim-card-more .material-icons {
    font-size: 16px !important;
}

/* Don't display the button itself like a card cell */
.dbim-report-table.dbim-card-mode > tbody > tr > button.dbim-card-more::before {
    content: none !important;
}

/* ─── Full-screen table mode ───────────────────────────────────────── */
.dbim-report-shell.table-mode {
    max-width: 100% !important;
    padding: 20px 12px 40px !important;
}
.dbim-report-shell.table-mode .dbim-report-card {
    max-width: 100% !important;
    border-radius: 12px !important;
}
.dbim-report-shell.table-mode .dbim-report-table-wrap {
    padding: 16px 18px !important;
    overflow-x: auto !important;
}
.dbim-report-shell.table-mode .dbim-report-table {
    width: 100% !important;
    min-width: 900px !important; /* horizontal scroll if window too narrow */
    font-size: 12.5px !important;
}
.dbim-report-shell.table-mode .dbim-report-table thead th {
    padding: 9px 8px !important;
    font-size: 10.5px !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
    white-space: normal !important;
    word-break: break-word !important;
}
.dbim-report-shell.table-mode .dbim-report-table tbody td,
.dbim-report-shell.table-mode .dbim-report-table tfoot th,
.dbim-report-shell.table-mode .dbim-report-table tfoot td {
    padding: 8px 8px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
    white-space: normal !important;
}

/* Allow extra-wide table on viewports >1400 to use breakout layout */
@media (min-width: 1500px) {
    .dbim-report-shell.table-mode {
        margin-left: calc(50% - 50vw + 20px) !important;
        margin-right: calc(50% - 50vw + 20px) !important;
        max-width: calc(100vw - 40px) !important;
    }
}

/* Always keep card-mode width within shell on narrow screens */
@media (max-width: 1100px) {
    .dbim-report-shell.table-mode {
        margin: 0 !important;
        padding: 16px 12px 32px !important;
    }
}

/* ─── View toggle UI badge for "more available" hint ──────────────── */
.dbim-view-toggle button.has-more::after {
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    background: #fbbf24 !important;
    border-radius: 50% !important;
    margin-left: 4px !important;
    box-shadow: 0 0 0 2px #fff !important;
}

/* ════════════════════════════════════════════════════════════════════════
   FIX 33: UNIVERSAL TABLE → CARDS
   Generic rules using table.dbim-card-mode (works for ANY table site-wide,
   not just .dbim-report-table from rebuilt pages).
   ════════════════════════════════════════════════════════════════════════ */

/* Generic card-mode trigger */
body.dbim-body table.dbim-card-mode,
body.dbim-body table.dbim-card-mode thead,
body.dbim-body table.dbim-card-mode tbody,
body.dbim-body table.dbim-card-mode tr,
body.dbim-body table.dbim-card-mode td,
body.dbim-body table.dbim-card-mode th {
    display: block !important;
}
body.dbim-body table.dbim-card-mode > thead,
body.dbim-body table.dbim-card-mode > tfoot {
    display: none !important;
}
body.dbim-body table.dbim-card-mode {
    border: none !important;
    background: transparent !important;
    width: 100% !important;
}
body.dbim-body table.dbim-card-mode > tbody {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 10px !important;
    padding: 2px !important;
    margin: 0 !important;
    background: transparent !important;
}
body.dbim-body table.dbim-card-mode > tbody > tr {
    display: block !important;
    background: var(--dbim-surface, #ffffff) !important;
    border: 1px solid var(--dbim-border, #e5e7eb) !important;
    border-left: 4px solid var(--dbim-primary, #8B1538) !important;
    border-radius: 10px !important;
    padding: 10px 14px 12px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
    overflow: visible !important;
    transition: box-shadow .15s ease, transform .15s ease !important;
}
body.dbim-body table.dbim-card-mode > tbody > tr:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
    transform: translateY(-1px) !important;
}
body.dbim-body table.dbim-card-mode > tbody > tr:nth-child(odd),
body.dbim-body table.dbim-card-mode > tbody > tr:nth-child(odd) > td {
    background: transparent !important;
}
body.dbim-body table.dbim-card-mode > tbody > tr > td {
    display: grid !important;
    grid-template-columns: 100px 1fr !important;
    gap: 6px !important;
    align-items: baseline !important;
    padding: 4px 0 !important;
    border-bottom: 1px dotted var(--dbim-border-subtle, #f0f0f0) !important;
    background: transparent !important;
    line-height: 1.55 !important;
    word-break: break-word !important;
    text-align: left !important;
    width: auto !important;
    white-space: normal !important;
    color: var(--dbim-text, #1f2937) !important;
    font-size: 13px !important;
}
body.dbim-body table.dbim-card-mode > tbody > tr > td:last-child {
    border-bottom: none !important;
}
body.dbim-body table.dbim-card-mode > tbody > tr > td:first-child {
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    padding: 2px 0 7px 0 !important;
    margin-bottom: 4px !important;
    border-bottom: 1.5px solid var(--dbim-primary-soft, #fbe9ee) !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    color: var(--dbim-primary-dark, #6e0f2a) !important;
    background: transparent !important;
}
body.dbim-body table.dbim-card-mode > tbody > tr > td:first-child::before {
    content: "#" !important;
    color: var(--dbim-text-muted, #9ca3af) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}
body.dbim-body table.dbim-card-mode > tbody > tr > td[data-label]::before {
    content: attr(data-label) !important;
    font-weight: 600 !important;
    color: var(--dbim-text-muted, #9ca3af) !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1.4 !important;
    padding-right: 4px !important;
    white-space: normal !important;
    word-break: break-word !important;
}
body.dbim-body table.dbim-card-mode > tbody > tr > td:has(> a[class*="btn"]:only-child),
body.dbim-body table.dbim-card-mode > tbody > tr > td:has(> button:only-child),
body.dbim-body table.dbim-card-mode > tbody > tr > td:has(> i.fa:only-child) {
    grid-template-columns: 1fr !important;
}
body.dbim-body table.dbim-card-mode > tbody > tr > td:has(> a[class*="btn"]:only-child)::before,
body.dbim-body table.dbim-card-mode > tbody > tr > td:has(> button:only-child)::before {
    display: none !important;
}
body.dbim-body table.dbim-card-mode > tbody > tr > td.dbim-card-extra {
    display: none !important;
}
body.dbim-body table.dbim-card-mode > tbody > tr.expanded > td.dbim-card-extra {
    display: grid !important;
}
body.dbim-body table.dbim-card-mode > tbody > tr > button.dbim-card-more {
    margin-top: 8px !important;
    width: 100% !important;
    padding: 7px 10px !important;
    background: var(--dbim-primary-soft, #fbe9ee) !important;
    color: var(--dbim-primary-dark, #6e0f2a) !important;
    border: 1px dashed var(--dbim-primary, #8B1538) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    line-height: 1 !important;
    min-height: 32px !important;
    transition: all .15s ease !important;
}
body.dbim-body table.dbim-card-mode > tbody > tr > button.dbim-card-more:hover {
    background: var(--dbim-primary, #8B1538) !important;
    color: #fff !important;
    border-style: solid !important;
}
body.dbim-body table.dbim-card-mode > tbody > tr > button.dbim-card-more .material-icons {
    font-size: 16px !important;
}
body.dbim-body table.dbim-card-mode > tbody > tr > button.dbim-card-more::before {
    content: none !important;
}

/* Generic toggle wrapper — when toggle is injected outside .dbim-report-card */
body.dbim-body .dbim-table-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 8px 0 12px !important;
    flex-wrap: wrap !important;
}
body.dbim-body .dbim-table-toolbar .dbim-view-toggle {
    margin-left: 0 !important;
}

/* Make legacy tables stretch full-width when in table mode */
body.dbim-body .box .table:not(.dbim-card-mode),
body.dbim-body .form-horizontal table:not(.dbim-card-mode) {
    width: 100% !important;
}

/* Narrow viewport — force any data table to card mode */
@media (max-width: 1100px) {
    body.dbim-body .box table:not(.no-card-mode):not(.dbim-card-mode) thead,
    body.dbim-body .box table:not(.no-card-mode):not(.dbim-card-mode) tfoot {
        display: none !important;
    }
    body.dbim-body .box table:not(.no-card-mode):not(.dbim-card-mode),
    body.dbim-body .box table:not(.no-card-mode):not(.dbim-card-mode) tbody,
    body.dbim-body .box table:not(.no-card-mode):not(.dbim-card-mode) tr,
    body.dbim-body .box table:not(.no-card-mode):not(.dbim-card-mode) td {
        display: block !important;
    }
    body.dbim-body .box table:not(.no-card-mode):not(.dbim-card-mode) tbody {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    body.dbim-body .box table:not(.no-card-mode):not(.dbim-card-mode) > tbody > tr {
        background: var(--dbim-surface, #fff) !important;
        border: 1px solid var(--dbim-border, #e5e7eb) !important;
        border-left: 4px solid var(--dbim-primary, #8B1538) !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
    }
    body.dbim-body .box table:not(.no-card-mode):not(.dbim-card-mode) > tbody > tr > td {
        padding: 4px 0 !important;
        border-bottom: 1px dotted var(--dbim-border-subtle, #f0f0f0) !important;
        font-size: 13px !important;
    }
    body.dbim-body .box table:not(.no-card-mode):not(.dbim-card-mode) > tbody > tr > td[data-label]::before {
        content: attr(data-label) ": " !important;
        font-weight: 700 !important;
        color: var(--dbim-text-2, #4b5563) !important;
        margin-right: 4px !important;
        text-transform: none !important;
    }
}

@media (max-width: 700px) {
    body.dbim-body table.dbim-card-mode > tbody {
        grid-template-columns: 1fr !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   FIX 34: Title-pill clickable — remove pointer-events:none, add hover
   ════════════════════════════════════════════════════════════════════════ */
body.dbim-body .box > .form-group:first-of-type .btn-secondary,
body.dbim-body .dbim-report-breadcrumb .title-pill {
    pointer-events: auto !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
body.dbim-body .box > .form-group:first-of-type .btn-secondary:hover,
body.dbim-body .dbim-report-breadcrumb a.title-pill:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(139,21,56,.28) !important;
    background: linear-gradient(90deg, var(--dbim-primary-dark, #6e0f2a), var(--dbim-primary, #8B1538)) !important;
    color: #fff !important;
}

/* When title-pill is downgraded to non-interactive (no parent page) */
body.dbim-body .box > .form-group:first-of-type .btn-secondary.dbim-pill-static,
body.dbim-body .dbim-report-breadcrumb .title-pill.dbim-pill-static {
    cursor: default !important;
    pointer-events: none !important;
}
body.dbim-body .box > .form-group:first-of-type .btn-secondary.dbim-pill-static:hover,
body.dbim-body .dbim-report-breadcrumb .title-pill.dbim-pill-static:hover {
    transform: none !important;
    box-shadow: 0 2px 6px rgba(139,21,56,.18) !important;
    background: linear-gradient(90deg, var(--dbim-primary, #8B1538), var(--dbim-primary-dark, #6e0f2a)) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   FIX 36: DataTables Bootstrap rows — restore full-width layout
   The narrow-form rule (FIX 18) incorrectly matches DataTables-generated
   .row elements inside .dataTables_wrapper because those rows don't
   contain .box/.pushable/.info-box/.small-box. This collapses the table
   container to max-width:760px and applies 32px card-padding.
   Override: force all .dataTables_wrapper > .row children full-width,
   strip card styling and restore transparent block layout.
   ════════════════════════════════════════════════════════════════════════ */
body.dbim-body .dataTables_wrapper > .row {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 4px 0 !important;
    padding: 0 !important;
    float: none !important;
}
body.dbim-body .dataTables_wrapper > .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* DataTables length + filter controls — light inline flex row */
body.dbim-body .dataTables_wrapper .dataTables_length,
body.dbim-body .dataTables_wrapper .dataTables_filter {
    display: inline-block !important;
    padding: 4px 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: auto !important;
    max-width: none !important;
}
body.dbim-body .dataTables_wrapper .dataTables_filter {
    float: right !important;
}
body.dbim-body .dataTables_wrapper .dataTables_length {
    float: left !important;
}

/* Clear floats after length/filter row */
body.dbim-body .dataTables_wrapper > .row:first-child::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}


/* ════════════════════════════════════════════════════════════════════════
   FIX 37: DataTables Bootstrap rows — correct specificity override (v2)
   FIX 36 had specificity (0,3,1) but the narrow-form rule (FIX 18) has
   (0,7,0) for the .row rule and (0,9,0) for the .col-*:has(input) rule.
   When both sides use !important, higher specificity wins. FIX 37 adds
   the same four :not(:has()) pseudo-classes to reach (0,7,1) and (0,9,1),
   guaranteeing these rules beat the narrow-form rule while being
   precisely scoped to only .dataTables_wrapper > .row descendants.
   ════════════════════════════════════════════════════════════════════════ */

/* Row rule override: (0,7,1) beats narrow-form (0,7,0) */
body.dbim-body .dataTables_wrapper > .row:not(:has(.pushable)):not(:has(.info-box)):not(:has(.box)):not(:has(.small-box)) {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    float: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Column card-padding override: (0,9,1) beats narrow-form (0,9,0) */
body.dbim-body .dataTables_wrapper > .row:not(:has(.pushable)):not(:has(.info-box)):not(:has(.box)):not(:has(.small-box)) > [class*="col-"]:has(input, select, textarea, form, .form-group) {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   FIX 38: Table-view layout — replace fragile viewport breakout with
   predictable in-container horizontal scroll, and keep the Cards/Table
   toggle + DataTables controls visible.
   PROBLEM: FIX 32 "full-screen table mode" used
     @media(min-width:1500px){ .table-mode{ margin: calc(50% - 50vw + 20px) } }
   which produced ~-304px left/right margins, shifting wide (18-col) report
   tables off BOTH screen edges (columns clipped: "Branch"->"anch",
   "Pincode"->"Pincod") and leaving the toolbar area blank.
   FIX: neutralise the breakout; the report shell stays inside its normal
   container and the .dbim-report-table-wrap scrolls horizontally.
   ════════════════════════════════════════════════════════════════════════ */

/* Kill the negative-margin breakout at all widths */
body.dbim-body .dbim-report-shell.table-mode {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 16px 16px 40px !important;
}
@media (min-width: 1500px) {
    body.dbim-body .dbim-report-shell.table-mode {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
    }
}

/* The card holds the scroll area; never let it clip the toolbar above */
body.dbim-body .dbim-report-shell.table-mode .dbim-report-card {
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
}

/* The table wrapper is the horizontal scroll container */
body.dbim-body .dbim-report-table-wrap,
body.dbim-body .dbim-report-shell.table-mode .dbim-report-table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Wide report tables keep a sensible min-width so columns don't crush;
   the wrap scrolls instead of clipping. */
body.dbim-body .dbim-report-shell.table-mode .dbim-report-table {
    min-width: 1100px !important;
    width: max-content !important;
    max-width: none !important;
}

/* Keep the Cards/Table toggle + DataTables length/filter controls visible
   and above the table in table mode (they were rendering into a blank strip) */
body.dbim-body .dbim-table-toolbar,
body.dbim-body .dbim-report-shell.table-mode .dbim-table-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 5 !important;
    margin-bottom: 10px !important;
    min-height: 36px !important;
}
body.dbim-body .dbim-view-toggle {
    flex: 0 0 auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* DataTables length + filter controls stay visible in table mode */
body.dbim-body .dbim-report-shell.table-mode .dataTables_length,
body.dbim-body .dbim-report-shell.table-mode .dataTables_filter {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   FIX 39: Legacy report grids (.container.my_label) — remove phantom empty
   first cell + stop card-title clipping.
   CAUSE: DBIM skins legacy AdminLTE info-box pages by turning .row into a
   CSS grid. Bootstrap's .row clearfix ::before/::after (content:" ";
   display:table) then become real grid items and occupy the first (and an
   extra) cell, pushing the first card to column 2 and leaving a blank slot.
   FIX: neutralise those pseudo-elements; also let .info-box-text wrap so
   long report names ("Committee Verification (Approved) Report") aren't cut.
   ════════════════════════════════════════════════════════════════════════ */
body.dbim-body .container.my_label .row::before,
body.dbim-body .container.my_label .row::after {
    content: none !important;
    display: none !important;
}
body.dbim-body .container.my_label .info-box-text {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.4 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   FIX 40: Shared analytics-report styles (KPI cards, chips, chart grid).
   Used by *_beneficiary_report and recovery/charges reports via the
   .nbr-analytics wrapper. Display-only.
   ════════════════════════════════════════════════════════════════════════ */
.nbr-analytics .nbr-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.nbr-analytics .nbr-kpi{background:#fff;border:1px solid #ecdfe5;border-left:4px solid #8B1538;border-radius:10px;padding:12px 14px}
.nbr-analytics .nbr-kpi .k{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#9b6b7c}
.nbr-analytics .nbr-kpi .v{font-size:20px;font-weight:800;color:#8B1538;margin-top:4px}
.nbr-analytics .nbr-kpi.green{border-left-color:#1B7A3D}.nbr-analytics .nbr-kpi.green .v{color:#1B7A3D}
.nbr-analytics .nbr-kpi.amber{border-left-color:#B8860B}.nbr-analytics .nbr-kpi.amber .v{color:#B8860B}
.nbr-analytics .nbr-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.nbr-analytics .nbr-chip{background:#faf6f8;border:1px solid #ecdfe5;border-radius:8px;padding:8px 10px;text-align:center}
.nbr-analytics .nbr-chip .v{font-size:18px;font-weight:800;color:#8B1538}
.nbr-analytics .nbr-chip .k{font-size:10px;color:#9b6b7c}
.nbr-analytics .nbr-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nbr-analytics .nbr-cc{background:#fff;border:1px solid #ecdfe5;border-radius:12px;padding:12px 14px}
.nbr-analytics .nbr-cc h4{margin:0 0 8px;font-size:13px;color:#5b2030}
.nbr-analytics .nbr-cc .cwrap{position:relative;height:260px}
@media(max-width:900px){.nbr-analytics .nbr-kpis,.nbr-analytics .nbr-chips{grid-template-columns:repeat(2,1fr)}.nbr-analytics .nbr-charts{grid-template-columns:1fr}}


/* ════════════════════════════════════════════════════════════════════════
   FIX 41: (a) Hide the "Show N more" button outside card mode (it was
   appended to every <tr> and leaked into the Table view).
   (b) Card redesign — cleaner header strip, label/value layout, hover.
   ════════════════════════════════════════════════════════════════════════ */

/* (a) Only show the card "Show more" button in card mode */
body.dbim-body .dbim-report-table:not(.dbim-card-mode) button.dbim-card-more,
body.dbim-body table:not(.dbim-card-mode) button.dbim-card-more {
    display: none !important;
}

/* (b) ── Card redesign ──────────────────────────────────────────────── */
body.dbim-body .dbim-report-table.dbim-card-mode > tbody {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 16px !important;
    padding: 4px !important;
}
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr {
    padding: 0 !important;
    border: 1px solid #ecdfe5 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(139,21,56,.06) !important;
    overflow: hidden !important;
    background: #fff !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 22px rgba(139,21,56,.14) !important;
    border-color: #8B1538 !important;
}
/* generic field row */
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td {
    grid-template-columns: 120px 1fr !important;
    gap: 10px !important;
    align-items: baseline !important;
    padding: 9px 16px !important;
    margin: 0 !important;
    border-bottom: 1px solid #f4eef0 !important;
    font-size: 13px !important;
}
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td:nth-child(even) {
    background: #fcf9fa !important;
}
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td[data-label]::before {
    content: attr(data-label) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    color: #9b6b7c !important;
    align-self: center !important;
}
/* card header strip = first cell (the # / index) */
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td:first-child {
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    padding: 11px 16px !important;
    margin: 0 0 2px 0 !important;
    background: linear-gradient(90deg,#8B1538,#a83055) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    letter-spacing: .02em !important;
    border-bottom: none !important;
}
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td:first-child::before {
    content: "#" !important;
    color: rgba(255,255,255,.7) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
/* action buttons inside cards (info icon etc.) */
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn,
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td button.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important; height: 30px !important;
    border-radius: 8px !important;
    margin: 0 2px !important;
}
/* show-more button polish */
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > button.dbim-card-more {
    margin: 6px 12px 12px !important;
    width: calc(100% - 24px) !important;
    background: #fff !important;
    color: #8B1538 !important;
    border: 1px solid #e7d5dc !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > button.dbim-card-more:hover {
    background: #8B1538 !important;
    color: #fff !important;
    border-color: #8B1538 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   FIX 42: Report-card "info" button -> compact inline "View" chip.
   The original <a class="btn btn-info"><i class="fa fa-info"></i></a> rendered
   as a barely-visible thin icon on its own row (wasting vertical space).
   Make the cell flex so value + button sit on one line, and turn the button
   into a clear right-aligned "View" chip.
   ════════════════════════════════════════════════════════════════════════ */
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td:has(a.btn) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td:has(a.btn)::before {
    flex: 0 0 110px !important;
    margin: 0 !important;
}
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn-info,
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 3px 10px !important;
    margin: 0 0 0 auto !important;     /* push chip to the right */
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    background: var(--dbim-primary-soft, #fbe9ee) !important;
    color: var(--dbim-primary, #8B1538) !important;
    border: 1px solid #f0d3dd !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn-info:hover,
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn:hover {
    background: var(--dbim-primary, #8B1538) !important;
    color: #fff !important;
    border-color: var(--dbim-primary, #8B1538) !important;
}
/* hide the thin FA icon, show a clear label */
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn-info i.fa,
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn i.fa {
    display: none !important;
}
/* FIX 43: label card action buttons by their real icon (was all "View"),
   and colour the chip by button class. */
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn::after { content: "Open" !important; }
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn:has(i.fa-info)::after { content: "View" !important; }
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn:has(i.fa-print)::after { content: "Letter" !important; }
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn:has(i.fa-pencil)::after { content: "Edit" !important; }
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn:has(i.fa-check)::after { content: "Approve" !important; }
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn:has(i.fa-handshake-o)::after { content: "Schedule" !important; }
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn:has(i.fa-reply)::after { content: "Return" !important; }
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn:has(i.fa-trash)::after,
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn:has(i.fa-times)::after { content: "Delete" !important; }
/* colour chips by class */
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn-success { background:#e8f5ec !important; color:#1B7A3D !important; border-color:#bfe3cc !important; }
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn-success:hover { background:#1B7A3D !important; color:#fff !important; }
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn-warning { background:#fdf3e0 !important; color:#9a6b00 !important; border-color:#f0dcae !important; }
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn-warning:hover { background:#B8860B !important; color:#fff !important; }
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn-danger { background:#fdeaec !important; color:#B00020 !important; border-color:#f3c2c9 !important; }
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn-danger:hover { background:#B00020 !important; color:#fff !important; }
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn-primary { background:#eaf0fb !important; color:#2563eb !important; border-color:#cdddf7 !important; }
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td a.btn-primary:hover { background:#2563eb !important; color:#fff !important; }


/* FIX 45: friendly DataTables empty-state */
body.dbim-body td.dataTables_empty{padding:34px 16px !important;text-align:center !important;}
.dbim-dt-empty{display:flex;flex-direction:column;align-items:center;gap:8px;color:#9b6b7c;font-size:14px}
.dbim-dt-empty .material-icons{font-size:40px;color:#d8b9c5}


/* FIX 45b: empty-state row must not render as a card (no # header) */
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr:has(td.dataTables_empty){
    display:block !important; background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; overflow:visible !important;
}
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr:has(td.dataTables_empty):hover{ transform:none !important; box-shadow:none !important; }
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td.dataTables_empty{
    display:block !important; background:#fff !important; color:#9b6b7c !important;
    border:1px dashed #e0c5d0 !important; border-radius:12px !important;
    grid-template-columns:none !important; margin:0 !important;
}
body.dbim-body .dbim-report-table.dbim-card-mode > tbody > tr > td.dataTables_empty::before{ content:none !important; display:none !important; }



/* ============================================================================
   FIX 46 — Footer govt/partner logo strip (white chips on the dark footer)
   ============================================================================ */
.dbim-footer-logos{
    display:flex; flex-wrap:wrap; gap:14px;
    justify-content:center; align-items:center;
    padding-bottom: var(--dbim-sp-4);
    margin-bottom: var(--dbim-sp-2);
}
.dbim-footer-logos img{
    height:48px; width:auto;
    background:#fff; border-radius:10px;
    padding:6px 12px;
    box-shadow:0 2px 10px rgba(0,0,0,.20);
}
@media (max-width:600px){ .dbim-footer-logos img{ height:40px; padding:5px 9px; } }

/* FIX 46b — keep the footer copyright consistent with the burgundy footer
   (legacy front CSS painted .copyright orange; neutralize it inside dbim-footer) */
.dbim-footer .copyright{ background:transparent !important; }


/* ============================================================================
   FIX 47 — Compact app header (admin + public) so utility buttons fit neatly
   ============================================================================ */
.dbim-appheader .container{ padding-top:8px !important; padding-bottom:8px !important; column-gap:14px !important; row-gap:8px !important; }
.dbim-appheader .brand img{ height:42px !important; }
.dbim-appheader .brand img[alt*="emblem"]{ height:40px !important; }
.dbim-appheader .brand .titles{ padding-left:12px !important; margin-left:2px !important; }
.dbim-appheader .utilities{ gap:8px !important; justify-content:flex-end !important; row-gap:8px !important; }
.dbim-appheader .utilities .dbim-btn{ padding:7px 12px !important; font-size:12.5px !important; }
.dbim-appheader .user-chip{ padding:5px 11px !important; font-size:12.5px !important; }

/* FIX 47b — right-align header utilities so they sit neatly (esp. when wrapped) */
.dbim-appheader .spacer{ display:none !important; }
.dbim-appheader .utilities{ margin-left:auto !important; }