/* =============================================================
   2026 DASHBOARD — PREMIUM STYLESHEET
   File   : 2026_dashboards/style.css
   Author : IQDigit ERP
   ============================================================= */

/* ===== DESIGN TOKENS ===== */
:root {
    --p: #4f46e5;
    --p2: #7c3aed;
    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #2563eb;
    --teal: #0d9488;
    --pink: #db2777;
    --orange: #ea580c;
    --sky: #0284c7;

    --bg: #f0f2ff;
    --surface: #fff;
    --surface2: #f5f6ff;
    --border: #e2e5f1;
    --text: #111827;
    --text2: #374151;
    --muted: #6b7280;

    --r: 14px;
    --rs: 8px;
    --ease: cubic-bezier(.4, 0, .2, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif !important;
}

/* ===== ANIMATED ACCENT BAR ===== */
.db26-accent-bar {
    height: 4px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed, #db2777, #ea580c, #d97706, #4f46e5);
    background-size: 400% 100%;
    animation: gradShift 5s linear infinite;
}

@keyframes gradShift {
    to {
        background-position: 400% 0;
    }
}

/* ===== WRAPPER ===== */
.db26-wrapper {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, .06), 0 16px 40px -10px rgba(79, 70, 229, .12);
}

/* ===== HEADER ===== */
.db26-header {
    background: var(--surface);
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}

.db26-header .db-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hdr-icon {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .9rem;
    box-shadow: 0 4px 10px rgba(79, 70, 229, .32);
    flex-shrink: 0;
}

.hdr-school {
    font-size: .58rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.hdr-name {
    font-size: .95rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.3px;
    line-height: 1.15;
}

.hdr-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hdr-badge {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: 3px 10px;
    font-size: .62rem;
    font-weight: 600;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.hdr-badge i {
    color: var(--p);
    font-size: .72rem;
}

/* ===== PILL TABS ===== */
.db26-tabs-wrap {
    background: var(--surface);
    padding: 7px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 3px;
    overflow-x: auto;
    scrollbar-width: none;
}

.db26-tabs-wrap::-webkit-scrollbar {
    display: none;
}

.db26-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 100px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: all .2s var(--ease);
    white-space: nowrap;
}

.db26-tab:hover {
    color: var(--p);
    background: rgba(79, 70, 229, .07);
    border-color: rgba(79, 70, 229, .15);
    text-decoration: none;
}

.db26-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(79, 70, 229, .3);
}

.db26-tab i {
    font-size: .75rem;
}

/* ===== FILTER BAR ===== */
.db26-filter-bar {
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    padding: 7px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-label {
    font-size: .62rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filter-label i {
    color: var(--p);
    font-size: .75rem;
}

.db26-filter-bar .form-control {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--rs);
    font-size: .74rem;
    font-weight: 500;
    padding: 4px 9px;
    height: auto;
    font-family: 'Inter', sans-serif !important;
    transition: border-color .2s;
}

.db26-filter-bar .form-control:focus {
    border-color: var(--p) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .15) !important;
    outline: none;
}

.filter-sep {
    font-size: .7rem;
    color: var(--muted);
    font-weight: 500;
}

.btn-go {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    border: none;
    border-radius: var(--rs);
    padding: 5px 18px;
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .3px;
    transition: all .2s var(--ease);
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(79, 70, 229, .25);
}

.btn-go:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(79, 70, 229, .38);
}

.period-quick {
    margin-left: auto;
    display: flex;
    gap: 2px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: 2px;
}

.quick-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    border-radius: 100px;
    padding: 3px 10px;
    font-size: .63rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s var(--ease);
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}

.quick-btn:hover {
    background: rgba(79, 70, 229, .08);
    color: var(--p);
}

.quick-btn.active {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    box-shadow: 0 2px 6px rgba(79, 70, 229, .28);
}

/* ===== ACADEMIC YEAR SELECTOR ===== */
.fy-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.fy-select {
    position: relative;
    background: linear-gradient(135deg, #eef0ff, #f5f3ff) !important;
    border: 1.5px solid #a5b4fc !important;
    border-left: 3px solid #4f46e5 !important;
    border-radius: var(--rs);
    font-size: .74rem !important;
    font-weight: 700 !important;
    color: #3730a3 !important;
    padding: 4px 10px !important;
    height: auto !important;
    font-family: 'Inter', sans-serif !important;
    cursor: pointer;
    min-width: 220px;
    max-width: 260px;
    box-shadow: 0 1px 6px rgba(79, 70, 229, .12);
    transition: border-color .2s, box-shadow .2s;
}

.fy-select:focus {
    outline: none !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .18) !important;
}

.fy-select:hover {
    border-color: #6366f1 !important;
    box-shadow: 0 2px 10px rgba(79, 70, 229, .18) !important;
}

/* ===== CONTENT AREA ===== */
.db26-content {
    background: var(--bg);
    min-height: 350px;
    padding: 16px;
}

/* ===== GROUP SECTION LABEL ===== */
.db26-group-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

.gl-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gl-text {
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
}

.db26-group-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ===== STAT CARDS ===== */
.db26-stat-card {
    background: var(--surface);
    border-radius: 11px;
    padding: 13px 14px 11px 16px;
    position: relative;
    overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 3px 10px rgba(0, 0, 0, .04);
    border: 1px solid transparent;
}

.db26-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .09);
}

/* Left accent stripe */
.db26-stat-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 14px 0 0 14px;
}

/* Top-right blob */
.db26-stat-card::before {
    content: '';
    position: absolute;
    top: -24px;
    right: -24px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    opacity: .07;
}

/* Colour variants */
.c-indigo::after,
.c-indigo::before {
    background: #4f46e5;
}

.c-indigo:hover {
    border-color: rgba(79, 70, 229, .18);
}

.c-purple::after,
.c-purple::before {
    background: #7c3aed;
}

.c-purple:hover {
    border-color: rgba(124, 58, 237, .18);
}

.c-emerald::after,
.c-emerald::before {
    background: #059669;
}

.c-emerald:hover {
    border-color: rgba(5, 150, 105, .18);
}

.c-rose::after,
.c-rose::before {
    background: #dc2626;
}

.c-rose:hover {
    border-color: rgba(220, 38, 38, .18);
}

.c-amber::after,
.c-amber::before {
    background: #d97706;
}

.c-amber:hover {
    border-color: rgba(217, 119, 6, .18);
}

.c-blue::after,
.c-blue::before {
    background: #2563eb;
}

.c-blue:hover {
    border-color: rgba(37, 99, 235, .18);
}

.c-teal::after,
.c-teal::before {
    background: #0d9488;
}

.c-teal:hover {
    border-color: rgba(13, 148, 136, .18);
}

.c-pink::after,
.c-pink::before {
    background: #db2777;
}

.c-pink:hover {
    border-color: rgba(219, 39, 119, .18);
}

.c-orange::after,
.c-orange::before {
    background: #ea580c;
}

.c-orange:hover {
    border-color: rgba(234, 88, 12, .18);
}

.c-sky::after,
.c-sky::before {
    background: #0284c7;
}

.c-sky:hover {
    border-color: rgba(2, 132, 199, .18);
}

/* Card Icons */
.sc-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    color: #fff;
    margin-bottom: 0px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.sc-trow {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
}

.c-indigo .sc-icon {
    background: linear-gradient(135deg, #4f46e5, #818cf8);
    box-shadow: 0 3px 8px rgba(79, 70, 229, .32);
}

.c-purple .sc-icon {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    box-shadow: 0 3px 8px rgba(124, 58, 237, .32);
}

.c-emerald .sc-icon {
    background: linear-gradient(135deg, #059669, #34d399);
    box-shadow: 0 3px 8px rgba(5, 150, 105, .32);
}

.c-rose .sc-icon {
    background: linear-gradient(135deg, #dc2626, #f87171);
    box-shadow: 0 3px 8px rgba(220, 38, 38, .32);
}

.c-amber .sc-icon {
    background: linear-gradient(135deg, #d97706, #fbbf24);
    box-shadow: 0 3px 8px rgba(217, 119, 6, .32);
}

.c-blue .sc-icon {
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    box-shadow: 0 3px 8px rgba(37, 99, 235, .32);
}

.c-teal .sc-icon {
    background: linear-gradient(135deg, #0d9488, #2dd4bf);
    box-shadow: 0 3px 8px rgba(13, 148, 136, .32);
}

.c-pink .sc-icon {
    background: linear-gradient(135deg, #db2777, #f472b6);
    box-shadow: 0 3px 8px rgba(219, 39, 119, .32);
}

.c-orange .sc-icon {
    background: linear-gradient(135deg, #ea580c, #fb923c);
    box-shadow: 0 3px 8px rgba(234, 88, 12, .32);
}

.c-sky .sc-icon {
    background: linear-gradient(135deg, #0284c7, #38bdf8);
    box-shadow: 0 3px 8px rgba(2, 132, 199, .32);
}

.sc-label {
    font-size: .6rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 0px;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

.sc-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    margin-bottom: 3px;
    letter-spacing: -1px;
    position: relative;
    z-index: 1;
}

.sc-sub {
    font-size: .6rem;
    color: var(--muted);
    position: relative;
    z-index: 1;
}

/* Attendance mini breakdown */
.att-values {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 3px;
    position: relative;
    z-index: 1;
}

.av-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.av-num {
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.1;
}

.av-lbl {
    font-size: .48rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.att-values .sep {
    color: #e2e5f1;
    font-size: .9rem;
    align-self: center;
}

/* ===== SECTION CARDS ===== */
.db26-section-card {
    background: var(--surface);
    border-radius: 11px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 3px 10px rgba(0, 0, 0, .04);
    border: 1px solid var(--border);
    transition: box-shadow .25s var(--ease);
}

.db26-section-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

.sec-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to right, var(--surface), var(--surface2));
}

.sec-title {
    font-size: .78rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 7px;
}

.sec-title i {
    font-size: .82rem;
}

.sec-badge {
    font-size: .6rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 100px;
    background: rgba(79, 70, 229, .1);
    color: var(--p);
}

.sec-body {
    padding: 14px 16px;
}

.db26-chart-wrap {
    position: relative;
    width: 100%;
}

/* ===== TABLE ===== */
.db26-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .76rem;
}

.db26-table thead tr {
    background: var(--surface2);
}

.db26-table thead th {
    padding: 8px 12px;
    color: #fff!important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .59rem;
    letter-spacing: .8px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.db26-table tbody tr {
    border-bottom: 1px solid #f1f3fb;
    transition: background .15s;
}

.db26-table tbody tr:last-child {
    border-bottom: none;
}

.db26-table tbody tr:hover {
    background: #f5f5ff;
}

.db26-table tbody td {
    padding: 8px 12px;
    color: var(--text2);
    vertical-align: middle;
}

.db26-table tfoot tr {
    background: #f3f4ff;
    border-top: 2px solid var(--border);
}

.db26-table tfoot td {
    padding: 8px 12px;
    color: var(--text);
    font-weight: 800;
    font-size: .78rem;
}

.row-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--surface2);
    border: 1px solid var(--border);
    font-size: .6rem;
    font-weight: 700;
    color: var(--muted);
}

/* ===== PROGRESS BARS ===== */
.pbar-wrap {
    height: 6px;
    background: #eef0fb;
    border-radius: 10px;
    overflow: hidden;
    flex: 1;
}

.pbar {
    height: 100%;
    border-radius: 10px;
    transition: width .8s var(--ease);
}

/* ===== STATUS BADGES ===== */
.db26-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .2px;
}

.db26-badge.present {
    background: #d1fae5;
    color: #065f46;
}

.db26-badge.absent {
    background: #fee2e2;
    color: #991b1b;
}

.db26-badge.leave {
    background: #fef3c7;
    color: #92400e;
}

.db26-badge.late {
    background: #dbeafe;
    color: #1e40af;
}

.db26-badge.halfd {
    background: #fce7f3;
    color: #9d174d;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c7cbea;
    border-radius: 10px;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(.94);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.db26-stat-card {
    animation: fadeUp .38s var(--ease) both;
}

.db26-section-card {
    animation: scaleIn .4s var(--ease) both;
}

/* Stagger delays */
.col-xl-3:nth-child(1) .db26-stat-card,
.col-xl-2:nth-child(1) .db26-stat-card,
.col-md-6:nth-child(1) .db26-stat-card {
    animation-delay: .02s;
}

.col-xl-3:nth-child(2) .db26-stat-card,
.col-xl-2:nth-child(2) .db26-stat-card,
.col-md-6:nth-child(2) .db26-stat-card {
    animation-delay: .07s;
}

.col-xl-3:nth-child(3) .db26-stat-card,
.col-xl-2:nth-child(3) .db26-stat-card,
.col-md-6:nth-child(3) .db26-stat-card {
    animation-delay: .12s;
}

.col-xl-3:nth-child(4) .db26-stat-card,
.col-xl-2:nth-child(4) .db26-stat-card,
.col-md-6:nth-child(4) .db26-stat-card {
    animation-delay: .17s;
}

.col-xl-3:nth-child(5) .db26-stat-card,
.col-xl-2:nth-child(5) .db26-stat-card {
    animation-delay: .22s;
}

.col-xl-3:nth-child(6) .db26-stat-card,
.col-xl-2:nth-child(6) .db26-stat-card {
    animation-delay: .27s;
}

.col-xl-7 .db26-section-card,
.col-xl-8 .db26-section-card {
    animation-delay: .1s;
}

.col-xl-5 .db26-section-card,
.col-xl-4 .db26-section-card {
    animation-delay: .18s;
}

.col-12 .db26-section-card {
    animation-delay: .24s;
}

/* ===== CREATE BUTTON & DROPDOWN ===== */
.db26-create-wrap {
    position: relative;
}

.db26-create-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 8px 18px 8px 14px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .22s var(--ease);
    box-shadow: 0 4px 14px rgba(79, 70, 229, .38);
    position: relative;
    overflow: hidden;
}

.db26-create-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .15), transparent);
    opacity: 0;
    transition: opacity .2s;
}

.db26-create-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 22px rgba(79, 70, 229, .48);
}

.db26-create-btn:hover::before {
    opacity: 1;
}

.db26-create-btn:active {
    transform: translateY(0);
}

.db26-create-btn .plus-ring {
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, .22);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
    transition: transform .3s var(--ease);
}

.db26-create-btn.open .plus-ring {
    transform: rotate(45deg);
}

.db26-create-btn .caret {
    font-size: .65rem;
    margin-left: 2px;
    transition: transform .22s var(--ease);
    opacity: .8;
}

.db26-create-btn.open .caret {
    transform: rotate(180deg);
}

/* Dropdown panel */
.db26-create-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 240px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(79, 70, 229, .14), 0 2px 8px rgba(0, 0, 0, .08);
    z-index: 9999;
    opacity: 0;
    transform: translateY(-10px) scale(.97);
    pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
    overflow: hidden;
}

.db26-create-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.db26-dd-header {
    padding: 12px 16px 8px;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
}

.db26-dd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--text2);
    font-size: .8rem;
    font-weight: 500;
    transition: background .15s;
    cursor: pointer;
    border-bottom: 1px solid #f5f6ff;
}

.db26-dd-item:last-child {
    border-bottom: none;
}

.db26-dd-item:hover {
    background: #f5f5ff;
    color: var(--p);
    text-decoration: none;
}

.db26-dd-item:hover .dd-icon {
    transform: scale(1.12);
}

.dd-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    color: #fff;
    flex-shrink: 0;
    transition: transform .2s var(--ease);
}

.dd-icon.i1 {
    background: linear-gradient(135deg, #4f46e5, #818cf8);
}

.dd-icon.i2 {
    background: linear-gradient(135deg, #059669, #34d399);
}

.dd-icon.i3 {
    background: linear-gradient(135deg, #dc2626, #f87171);
}

.dd-icon.i4 {
    background: linear-gradient(135deg, #d97706, #fbbf24);
}

.dd-icon.i5 {
    background: linear-gradient(135deg, #0d9488, #2dd4bf);
}

.dd-icon.i6 {
    background: linear-gradient(135deg, #db2777, #f472b6);
}

.dd-icon.i7 {
    background: linear-gradient(135deg, #2563eb, #60a5fa);
}

.dd-icon.i8 {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
}

.dd-label {
    flex: 1;
}

.dd-label strong {
    display: block;
    font-size: .79rem;
    font-weight: 600;
    color: var(--text);
}

.dd-label span {
    font-size: .67rem;
    color: var(--muted);
}

.dd-arrow {
    font-size: .7rem;
    color: #c7cbea;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .sc-value {
        font-size: 1.2rem !important;
        letter-spacing: -.8px !important;
    }

    .hdr-right {
        display: none;
    }

    .period-quick {
        display: none;
    }

    .db26-content {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .sc-value {
        font-size: 1rem !important;
    }

    .db26-stat-card {
        padding: 10px 10px 9px 14px;
    }
}