/* ===============================
   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 STYLE
========================= */

.party-white-card {
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(0,0,0,.25);
    color: #000000;
}

    /* =========================
   TABLE BASE
========================= */

    .party-white-card table {
        width: 100%;
        background: #ffffff;
        border-collapse: collapse;
    }

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

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

/* =========================
   PARTY NAME COLUMN (FIRST COLUMN)
========================= */

#partySummaryTable th:first-child,
#partySummaryTable td:first-child {
    color: #000000;
    font-weight: 600;
    text-align: left; /* looks cleaner */
    padding-left: 10px;
}

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

        #partySummaryTable td:first-child a:hover {
            color: #0d6efd;
            text-decoration: underline;
        }

/* =========================
   REMOVE BADGE COLORS
========================= */

.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;
}

/* =========================
   TOTAL ROW
========================= */

.party-white-card tfoot tr {
    background: #f2f2f2;
    font-weight: 700;
}
<style >
/* Target ONLY first column */
#partySummaryTable tbody td:first-child,
#partySummaryTable thead th:first-child {
    background-color: #000 !important;
    color: #fff !important;
    font-weight: 600;
}

</style >
/* =========================
   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"
}

}
}
}
.modal {
    align-items: flex-start !important;
}

.modal-dialog {
    margin-top: 60px;
}
.product-popover {
    position: fixed !important;
    top: 100px !important;
    left: 50% !important;
    transform: translateX(-50%);
    width: 450px;
    z-index: 9999;
}
/* =========================
   DARK TAX MODAL
========================= */

#addTaxTypeModal .modal-content {
    background: #111827; /* dark background */
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.1);
}

#addTaxTypeModal .modal-header {
    background: #000000; /* PURE BLACK header */
    border-bottom: 1px solid rgba(255,255,255,.15);
}

#addTaxTypeModal .modal-title {
    color: #ffffff;
}

#addTaxTypeModal .modal-body {
    background: #111827;
}

#addTaxTypeModal .modal-footer {
    background: #111827;
    border-top: 1px solid rgba(255,255,255,.1);
}

/* Input styling */
#addTaxTypeModal input {
    background: #1f2937;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.2);
}

    #addTaxTypeModal input::placeholder {
        color: rgba(255,255,255,.5);
    }

/* Close button (X) white */
#addTaxTypeModal .btn-close {
    filter: invert(1);
}
.transaction-card {
    background: #121212; /* Dark background */
    color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
}

    .transaction-card table {
        color: #ffffff;
    }

    .transaction-card thead th {
        background: #1f1f1f;
        color: #ffffff;
        border-color: #333;
    }

    .transaction-card td {
        background: #181818;
        border-color: #333;
    }

    .transaction-card tbody tr:hover {
        background: #222;
    }

    .transaction-card tfoot tr {
        background: #1f1f1f;
        color: #22c55e;
        font-weight: 700;
    }
/* ============================= */
/* Combined Stock Dark Theme Fix */
/* ============================= */

.combined-stock-card {
    background: #111827 !important; /* Dark background */
    color: #f3f4f6 !important; /* Light text */
    border-radius: 12px;
    border: 1px solid #1f2937;
}

    /* Table header */
    .combined-stock-card table thead {
        background-color: #1f2937 !important;
        color: #ffffff !important;
    }

    /* Table rows */
    .combined-stock-card table tbody tr {
        background-color: #111827 !important;
        color: #e5e7eb !important;
    }

    /* Table borders */
    .combined-stock-card table td,
    .combined-stock-card table th {
        border-color: #374151 !important;
    }

    /* Inputs */
    .combined-stock-card input,
    .combined-stock-card select {
        background-color: #1f2937 !important;
        color: #ffffff !important;
        border: 1px solid #374151 !important;
    }

        /* Search box */
        .combined-stock-card input::placeholder {
            color: #9ca3af;
        }
.grand-total-row {
    background-color: #1f2937 !important;
    font-weight: bold;
    color: #ffffff !important;
}
/* FORCE TOTAL ROW BLACK */
table tfoot tr td {
    background: #000000 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px;
    border-top: 2px solid #2563eb !important;
}

table tfoot tr {
    background: #000000 !important;
}
/* ===== PROFIT & LOSS TABLE DARK MODE ===== */

.profit-table-wrapper {
    background: #0d1117;
    border-radius: 12px;
    padding: 15px;
}

.profit-table {
    width: 100%;
    border-collapse: collapse;
    background: #0f172a;
    color: #f1f5f9;
}

    .profit-table thead {
        background: #111827;
    }

    .profit-table th {
        color: #60a5fa;
        font-weight: 600;
        text-align: center;
        padding: 12px;
        border-bottom: 1px solid #1f2937;
    }

    .profit-table td {
        padding: 12px;
        text-align: center;
        border-bottom: 1px solid #1f2937;
    }

    .profit-table tbody tr:hover {
        background: #1e293b;
    }

/* Negative profit */
.loss {
    color: #ef4444;
    font-weight: 600;
}

/* Positive profit */
.profit {
    color: #22c55e;
    font-weight: 600;
}
.product-wrapper {
    position: relative;
    width: 100%;
}

.product-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    width: 100%;
    background: #111827; /* dark background */
    border: 1px solid #374151; /* dark border */
    border-radius: 6px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 99999;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

.product-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #e5e7eb; /* light text */
    border-bottom: 1px solid #1f2937;
}

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

    .product-item:hover,
    .product-item.active {
        background: #2563eb; /* highlight blue */
        color: #ffffff;
    }

#purchaseTable td {
    position: relative;
    overflow: visible !important;
}
.product-wrapper {
    position: relative;
}

.product-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #1f2937; /* dark background */
    border: 1px solid #374151; /* dark border */
    max-height: 200px;
    overflow-y: auto;
    z-index: 9999;
    display: none;
    border-radius: 6px;
}

    .product-dropdown div {
        padding: 8px 12px;
        cursor: pointer;
        color: #ffffff; /* white text */
        font-size: 14px;
    }

        .product-dropdown div:hover {
            background: #374151; /* hover dark gray */
        }

    /* optional scrollbar styling */
    .product-dropdown::-webkit-scrollbar {
        width: 6px;
    }

    .product-dropdown::-webkit-scrollbar-thumb {
        background: #4b5563;
        border-radius: 3px;
    }
/* Wrapper */
.expense-item-wrapper {
    position: relative;
    width: 100%;
}

.expense-input-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.expense-item-input {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.add-expense-item {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    white-space: nowrap;
}

.expense-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    width: 100%;
    background: #111;
    border: 1px solid #333;
    max-height: 220px;
    overflow-y: auto;
    z-index: 99999;
    display: none;
    border-radius: 6px;
}

    .expense-dropdown div {
        padding: 8px 10px;
        cursor: pointer;
        color: white;
    }

        .expense-dropdown div:hover {
            background: #2b2b2b;
        }

table, td, tr {
    overflow: visible !important;
}

/* CRITICAL: allow dropdown to overflow table */
table, td, tr {
    overflow: visible !important;
}

/* Optional: prevent clipping from parent containers */
.card, .container, .row {
    overflow: visible !important;
}
/* =========================
   FORCE BLACK & WHITE MODE
========================= */

/* TABLES */
.table,
table {
    background: #000 !important;
    color: #fff !important;
}

    .table th,
    table th {
        background: #111 !important;
        color: #fff !important;
    }

    .table td,
    table td {
        background: #000 !important;
        color: #fff !important;
    }

/* REMOVE ALL ROW COLORS */
.table-hover tbody tr:hover {
    background: #222 !important;
}

/* REMOVE STRIPES */
table tbody tr:nth-child(even),
table tbody tr:nth-child(odd) {
    background: #000 !important;
}

/* TOTAL ROW */
table tfoot tr,
table tfoot td {
    background: #000 !important;
    color: #fff !important;
}

/* BADGES */
.badge,
.badge-low,
.badge-ok,
.badge-warn {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid #555;
}

/* LINKS */
.table a,
.party-link {
    color: #fff !important;
}

    .table a:hover {
        color: #ccc !important;
    }

/* CARDS */
.card,
.panel,
.transaction-card,
.combined-stock-card {
    background: #000 !important;
    color: #fff !important;
}

/* REMOVE GREEN TEXT */
.profit,
.loss {
    color: #fff !important;
}

/* REMOVE KPI COLORS */
.kpi-green,
.kpi-blue,
.kpi-red,
.kpi-orange {
    background: #000 !important;
    border: 1px solid #333;
}

/* REMOVE ANY CUSTOM GREEN/BLUE */
[class*="success"],
[class*="primary"],
[class*="info"],
[class*="warning"] {
    background: #000 !important;
    color: #fff !important;
}
/* 🔥 FORCE ALL TABLE ROWS BLACK */
table tbody tr {
    background-color: #000 !important;
    color: #fff !important;
}

    /* REMOVE GREY STRIPES COMPLETELY */
    table tbody tr:nth-child(even),
    table tbody tr:nth-child(odd) {
        background-color: #000 !important;
    }

    /* FIX HIGHLIGHTED ROW (SELECTED / ACTIVE) */
    table tbody tr.table-success,
    table tbody tr.table-active,
    table tbody tr.bg-success,
    table tbody tr.bg-light {
        background-color: #000 !important;
        color: #fff !important;
    }

    /* OPTIONAL: CLEAN HOVER */
    table tbody tr:hover {
        background-color: #111 !important;
    }
.product-wrapper {
    position: relative;
    width: 100%;
}

.product-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    border: 1px solid #ccc;
    max-height: 220px;
    overflow-y: auto;
    display: none;
    box-sizing: border-box;
}

    .product-dropdown div {
        padding: 8px 10px;
        cursor: pointer;
        color: #000;
        background: #fff;
    }

        .product-dropdown div:hover {
            background: #f2f2f2;
        }
.global-ai-box {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 340px;
    max-width: calc(100vw - 24px);
    background: #0f172a;
    color: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.12);
    z-index: 99999;
    overflow: hidden;
}

.global-ai-header {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
}

.global-ai-title {
    font-weight: 800;
    font-size: .98rem;
}

.global-ai-subtitle {
    color: #94a3b8;
    font-size: .8rem;
    margin-top: 2px;
}

.global-ai-body {
    padding: 14px 16px 16px;
}

.global-ai-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 10px;
}

.global-ai-status {
    margin-top: 10px;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: .86rem;
    background: rgba(255,255,255,.06);
    color: #e2e8f0;
    display: none;
}

    .global-ai-status.show {
        display: block;
    }
<style >
.calc-flash {
    outline: 2px solid #22c55e;
    box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.25);
    transition: all 0.2s ease;
}

</style >