/* ===============================
   ROOT & BASE
=============================== */
:root {
    --bg0: #0d0f14;
    --bg1: #141a26;
    --card: rgba(255,255,255,.06);
    --card2: rgba(255,255,255,.08);
    --stroke: rgba(255,255,255,.12);
    --text: #eaeaf0;
    --muted: rgba(234,234,240,.7);
    --blue1: #2563eb;
    --blue2: #3b82f6;
    --green1: #16a34a;
    --green2: #22c55e;
    --orange1: #d97706;
    --orange2: #f59e0b;
    --red1: #b91c1c;
    --red2: #ef4444;
    --radius-lg: 18px;
    --radius-md: 14px;
    --shadow: 0 18px 45px rgba(0,0,0,.55);
}

/* ===============================
   HTML & BODY
=============================== */
html {
    font-size: 14px;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin: 0;
    background: radial-gradient(1200px 600px at 30% 0%, rgba(37,99,235,.15), transparent 60%), radial-gradient(900px 500px at 70% 10%, rgba(34,197,94,.10), transparent 55%), radial-gradient(circle at top, #1b2030, #0d0f14);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, sans-serif;
    overflow-x: hidden;
}

    /* Soft glass overlay */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background: radial-gradient(circle at top, rgba(255,255,255,.06), transparent 55%);
        pointer-events: none;
        z-index: -1;
    }

/* ===============================
   DASHBOARD WRAPPER (FULL SCREEN)
=============================== */
.dashboard-wrapper {
    width: 100%;
    min-height: 100vh;
    padding: clamp(20px, 3vw, 48px);
    box-sizing: border-box;
}

/* Sidebar-aware desktop layout */
@media (min-width: 992px) {
    .dashboard-wrapper {
        margin-left: 230px;
        width: calc(100% - 230px); /* ✅ correct */
    }
}

/* ===============================
   SIDEBAR
=============================== */
.sidebar {
    background: linear-gradient(180deg, #0b1224, #020617);
    color: #cbd5e1;
    box-shadow: 4px 0 28px rgba(0,0,0,.7);
    border-right: 1px solid rgba(255,255,255,.06);
}

    .sidebar a {
        color: #cbd5e1;
        text-decoration: none;
    }

        .sidebar a:hover {
            color: #fff;
        }

/* ===============================
   GLASS PANELS / CARDS
=============================== */
.card,
.glass,
.panel {
    background: var(--card);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}

.card-header,
.panel-header {
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ===============================
   KPI CARDS
=============================== */
.kpi-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: clamp(18px, 2vw, 28px);
    border-radius: 20px;
    min-height: 120px;
    box-shadow: 0 12px 35px rgba(0,0,0,.4);
}

.kpi-icon {
    font-size: clamp(30px, 3vw, 42px);
}

.kpi-label {
    font-size: 14px;
    opacity: .85;
}

.kpi-value {
    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 800;
}

.kpi-green {
    background: linear-gradient(135deg,var(--green2),var(--green1));
}

.kpi-orange {
    background: linear-gradient(135deg,var(--orange2),var(--orange1));
}

.kpi-red {
    background: linear-gradient(135deg,var(--red2),var(--red1));
}

.kpi-blue {
    background: linear-gradient(135deg,var(--blue2),var(--blue1));
}

/* ===============================
   CHART CONTAINERS
=============================== */
.chart-box {
    height: clamp(280px, 35vh, 420px);
}

/* ===============================
   TABLES
=============================== */
.table {
    background: transparent !important;
    color: #e5e7eb !important;
}

    .table th {
        background: rgba(255,255,255,.06) !important;
        color: #fff !important;
    }

    .table td {
        background: rgba(255,255,255,.035) !important;
        color: rgba(255,255,255,.86) !important;
    }

.table-hover tbody tr:hover {
    background: rgba(59,130,246,.12) !important;
}

/* ===============================
   MINI TABLES
=============================== */
.mini-table div {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 14px;
}

    .mini-table div:last-child {
        border-bottom: none;
    }

/* ===============================
   BADGES
=============================== */
.badge {
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 700;
}

.badge-low {
    background: var(--red2);
}

.badge-ok {
    background: var(--green2);
}

.badge-warn {
    background: var(--orange2);
    color: #111;
}

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

::-webkit-scrollbar-track {
    background: rgba(255,255,255,.04);
}

::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18);
    border-radius: 999px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,.28);
    }
.light-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 12px 35px rgba(0,0,0,.25);
    color: #111827;
}

    /* tables */
    .light-card table {
        background: white;
        color: #111827;
    }

    .light-card th {
        background: #f3f4f6;
        color: #111827;
        font-weight: 600;
    }

    .light-card td {
        background: white;
    }

    /* inputs */
    .light-card input,
    .light-card select,
    .light-card textarea {
        background: #ffffff !important;
        color: #111827 !important;
        border: 1px solid #d1d5db !important;
    }

    /* buttons inside light card */
    .light-card .btn {
        color: white;
    }
/* White clickable links inside dark tables */
.table a.party-link {
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none;
}

    .table a.party-link:hover {
        color: #22c55e !important; /* green hover */
        text-decoration: underline;
    }
/* ===========================
   FULL WHITE TRANSACTION PAGE
=========================== */
.white-page {
    background: #ffffff;
    color: #000000;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

    /* Headings */
    .white-page h3,
    .white-page h4,
    .white-page h5 {
        color: #000000;
        font-weight: 700;
    }

    /* Search box */
    .white-page input {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #000000 !important;
    }

    /* ===========================
   TABLE
=========================== */
    .white-page table {
        background: #ffffff;
        color: #000000;
        border-collapse: collapse;
    }

    .white-page th {
        background: #f2f2f2;
        color: #000000;
        border: 1px solid #000000;
        font-weight: 700;
    }

    .white-page td {
        background: #ffffff;
        color: #000000;
        border: 1px solid #000000;
    }

    /* Remove dark row striping */
    .white-page tbody tr:nth-child(even),
    .white-page tbody tr:nth-child(odd) {
        background: #ffffff !important;
    }

    /* Hover (optional) */
    .white-page tbody tr:hover {
        background: #f9f9f9;
    }

    /* ===========================
   TOTAL ROWS
=========================== */
    .white-page .total-row td {
        font-weight: 700;
        background: #f9f9f9;
    }

    /* Currency emphasis */
    .white-page .amount {
        font-weight: 700;
    }
/* =========================
   PARTY SUMMARY – WHITE CARD
========================= */
.party-white-card {
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(0,0,0,.25);
    color: #000000;
}

    /* TABLE */
    .party-white-card table {
        width: 100%;
        background: #ffffff;
        color: #000000;
        border-collapse: collapse;
    }

    .party-white-card th {
        background: #f2f2f2 !important;
        color: #000000 !important;
        font-weight: 700;
        border: 1px solid #000000 !important;
        text-align: center;
    }

    .party-white-card td {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #000000 !important;
        text-align: center;
    }

    /* REMOVE DARK/BLUE BADGES */
    .party-white-card .badge,
    .party-white-card .bg-primary,
    .party-white-card .bg-info,
    .party-white-card .bg-dark {
        background: transparent !important;
        color: #000000 !important;
        font-weight: 600;
        padding: 0;
    }

    /* ROW HOVER */
    .party-white-card tbody tr:hover {
        background: #f9f9f9 !important;
    }

    /* TOTAL ROW */
    .party-white-card tfoot tr {
        background: #f2f2f2 !important;
        font-weight: 700;
    }

    /* LINKS (Party Names) */
    .party-white-card a {
        color: #000000 !important;
        font-weight: 600;
        text-decoration: underline;
    }

        .party-white-card a:hover {
            color: #0d6efd !important;
        }
/* =========================
   PARTY SUMMARY - GRAND TOTAL ROW
========================= */
/* Force Name column to pure black */
#partySummaryTable td:first-child,
#partySummaryTable th:first-child {
    color: #000000 !important;
    font-weight: 600;
}

    /* If names are links */
    #partySummaryTable td:first-child a {
        color: #000000 !important;
        font-weight: 600;
        text-decoration: none;
    }

        #partySummaryTable td:first-child a:hover {
            text-decoration: underline;
        }
/* =========================
   STOCK HISTORY - GRAND TOTAL
========================= */
.stock-grand-total td {
    background: #ffffff !important;
    color: #000000 !important;
    font-weight: 800;
    font-size: 16px;
    border-top: 3px solid #000000 !important;
    border-bottom: 3px solid #000000 !important;
}

    /* Align label */
    .stock-grand-total td:first-child {
        text-align: right;
    }
.dashboard-container {
    margin-left: 240px; /* match sidebar */
    padding: 40px 60px;
    max-width: 1200px; /* makes it smaller */
    margin-right: auto;
    background: #f8f9fa; /* light background */
    min-height: 100vh;
    border-radius: 20px 0 0 0;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    color: #111;
}

.summary-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.summary-card {
    padding: 20px;
    border-radius: 12px;
    background: white; /* WHITE CARDS */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: 0.2s ease;
}

    .summary-card:hover {
        transform: translateY(-3px);
    }

.card-title {
    font-size: 14px;
    color: #6c757d;
}

.card-value {
    font-size: 20px;
    font-weight: 700;
    margin-top: 5px;
    color: #111;
}

/* Colored left border */
.sales {
    border-left: 4px solid #22c55e;
}

.purchases {
    border-left: 4px solid #3b82f6;
}

.expenses {
    border-left: 4px solid #ef4444;
}

.stock {
    border-left: 4px solid #facc15;
}

.chart-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.chart-card {
    background: white; /* WHITE CHART BOX */
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

    .chart-card h5 {
        margin-bottom: 15px;
        color: #111;
    }
options: {
    plugins:

{
    legend:

{
    labels:

{
    color: "#111"
}

}
}

,
scales: {
    x:

{
    ticks:

{
    color: "#111"
}

}

,
y: {
    ticks:

{
    color: "#111"
}

}
}
}