/* ============================================================
   ADMIN THEME PATCH — Table fixes, Dark/Light mode, Brand styling
   Append this to admin.css
   ============================================================ */

/* ── Sidebar nav: support two-line labels ── */
.admin-nav li {
    align-items: flex-start;
}

.admin-nav li .nav-label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.admin-nav li .nav-label small {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 400;
    margin-top: 2px;
}

.admin-nav li.active .nav-label small,
.admin-nav li:hover .nav-label small {
    color: #b0a090;
}

/* ── Suppliers Table ── */
#suppliersListView .table-container,
#purchasesListView .table-container {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

#suppliersListView table,
#purchasesListView table {
    min-width: 860px;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

#suppliersListView table th:nth-child(1),
#suppliersListView table td:nth-child(1) {
    width: 190px;
}

#suppliersListView table th:nth-child(2),
#suppliersListView table td:nth-child(2) {
    width: 160px;
}

#suppliersListView table th:nth-child(3),
#suppliersListView table td:nth-child(3) {
    width: 120px;
}

#suppliersListView table th:nth-child(4),
#suppliersListView table td:nth-child(4) {
    width: 170px;
}

#suppliersListView table th:nth-child(5),
#suppliersListView table td:nth-child(5) {
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#suppliersListView table th:nth-child(6),
#suppliersListView table td:nth-child(6) {
    width: 90px;
    text-align: right;
}

/* ── Purchases Table ── */
#purchasesListView table th:nth-child(1),
#purchasesListView table td:nth-child(1) {
    width: 90px;
}

#purchasesListView table th:nth-child(2),
#purchasesListView table td:nth-child(2) {
    width: 100px;
}

#purchasesListView table th:nth-child(3),
#purchasesListView table td:nth-child(3) {
    width: 160px;
}

#purchasesListView table th:nth-child(4),
#purchasesListView table td:nth-child(4) {
    width: 170px;
}

#purchasesListView table th:nth-child(5),
#purchasesListView table td:nth-child(5) {
    width: 100px;
    text-align: right;
}

#purchasesListView table th:nth-child(6),
#purchasesListView table td:nth-child(6) {
    width: 110px;
}

#purchasesListView table th:nth-child(7),
#purchasesListView table td:nth-child(7) {
    width: 90px;
}

#purchasesListView table th:nth-child(8),
#purchasesListView table td:nth-child(8) {
    width: 80px;
    text-align: right;
}

/* ── Expenses Table ── */
#expenses-section .table-container {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

#expenses-section table {
    min-width: 900px;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

#expenses-section table th:nth-child(1),
#expenses-section table td:nth-child(1) {
    width: 90px;
}

#expenses-section table th:nth-child(2),
#expenses-section table td:nth-child(2) {
    width: 100px;
}

#expenses-section table th:nth-child(3),
#expenses-section table td:nth-child(3) {
    width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#expenses-section table th:nth-child(4),
#expenses-section table td:nth-child(4) {
    width: 130px;
}

#expenses-section table th:nth-child(5),
#expenses-section table td:nth-child(5) {
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#expenses-section table th:nth-child(6),
#expenses-section table td:nth-child(6) {
    width: 120px;
}

#expenses-section table th:nth-child(7),
#expenses-section table td:nth-child(7) {
    width: 110px;
    text-align: right;
}

#expenses-section table th:nth-child(8),
#expenses-section table td:nth-child(8) {
    width: 90px;
    text-align: right;
}

/* Common table cell padding for these tables */
#suppliersListView table th,
#suppliersListView table td,
#purchasesListView table th,
#purchasesListView table td,
#expenses-section table th,
#expenses-section table td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid #f0f4f8;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

#suppliersListView table thead tr,
#purchasesListView table thead tr,
#expenses-section table thead tr {
    background: #f8f9fb;
}

#suppliersListView table th,
#purchasesListView table th,
#expenses-section table th {
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.4px;
}

#suppliersListView table tbody tr:hover,
#purchasesListView table tbody tr:hover,
#expenses-section table tbody tr:hover {
    background: #fdfaf9;
}

/* ═══════════════════════════════════════════════
   LIGHT MODE — Reports & Tax sections restyled
   to match website brand palette
═══════════════════════════════════════════════ */
body:not(.admin-dark-mode) #reports-section>div,
body:not(.admin-dark-mode) #tax-section>div {
    background: var(--bg-white) !important;
    border: 1px solid var(--secondary-color) !important;
    color: var(--text-dark) !important;
}

/* Report nav tabs – light mode */
body:not(.admin-dark-mode) .report-nav-tab {
    background: var(--bg-light) !important;
    border: 1px solid var(--secondary-color) !important;
    color: var(--text-light) !important;
}

body:not(.admin-dark-mode) .report-nav-tab.active {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: var(--text-dark) !important;
}

/* Report content panels – light mode */
body:not(.admin-dark-mode) #reportPLContent,
body:not(.admin-dark-mode) #reportBalanceContent,
body:not(.admin-dark-mode) #reportStockContent,
body:not(.admin-dark-mode) #reportOutstandingContent {
    background: var(--bg-white) !important;
    color: var(--text-dark) !important;
    border: 1px solid var(--secondary-color) !important;
    border-radius: 12px !important;
}

body:not(.admin-dark-mode) #reportPLContent *,
body:not(.admin-dark-mode) #reportBalanceContent *,
body:not(.admin-dark-mode) #reportStockContent *,
body:not(.admin-dark-mode) #reportOutstandingContent * {
    color: inherit !important;
    border-color: var(--secondary-color) !important;
}

body:not(.admin-dark-mode) #reportPLContent [style*="color: #00d284"],
body:not(.admin-dark-mode) #reportPLContent [style*="color:#00d284"],
body:not(.admin-dark-mode) #reportBalanceContent [style*="color: #00d284"] {
    color: #2d7a4f !important;
}

/* P&L summary rows – light mode highlight */
body:not(.admin-dark-mode) #reports-section [style*="background: #0a1628"],
body:not(.admin-dark-mode) #reports-section [style*="background:#0a1628"],
body:not(.admin-dark-mode) #reports-section [style*="background: #05291a"],
body:not(.admin-dark-mode) #reports-section [style*="background:#05291a"] {
    background: var(--primary-color) !important;
    border-color: var(--secondary-color) !important;
}

/* Tax section – light mode */
body:not(.admin-dark-mode) #tax-section .report-nav-tab,
body:not(.admin-dark-mode) #tax-section [class*="tax-tab"] {
    background: var(--bg-light) !important;
    border: 1px solid var(--secondary-color) !important;
    color: var(--text-light) !important;
}

body:not(.admin-dark-mode) #tax-section .report-nav-tab.active,
body:not(.admin-dark-mode) #tax-section [class*="tax-tab"].active {
    background: var(--accent-color) !important;
    color: var(--text-dark) !important;
}

body:not(.admin-dark-mode) #tax-section [style*="background: #111827"],
body:not(.admin-dark-mode) #tax-section [style*="background:#111827"],
body:not(.admin-dark-mode) #tax-section [style*="background: #0c1a0e"],
body:not(.admin-dark-mode) #tax-section [style*="background:#0c1a0e"],
body:not(.admin-dark-mode) #tax-section [style*="background: #090e1a"],
body:not(.admin-dark-mode) #tax-section [style*="background:#090e1a"],
body:not(.admin-dark-mode) #tax-section [style*="background: #0a1628"],
body:not(.admin-dark-mode) #tax-section [style*="background:#0a1628"] {
    background: var(--bg-light) !important;
    border-color: var(--secondary-color) !important;
}

body:not(.admin-dark-mode) #tax-section table thead {
    background: var(--primary-color) !important;
}

body:not(.admin-dark-mode) #tax-section table th {
    color: var(--text-dark) !important;
}

body:not(.admin-dark-mode) #tax-section table td {
    color: var(--text-dark) !important;
    border-color: var(--secondary-color) !important;
}

/* ═══════════════════════════════════════════════
   LIGHT MODE — Create Invoice Modal restyled
   to match website brand palette
═══════════════════════════════════════════════ */
body:not(.admin-dark-mode) #createInvoiceModal .inv-modal-window,
body:not(.admin-dark-mode) #createInvoiceModal .inv-dark-theme-modal {
    background: var(--bg-light) !important;
    border: 1px solid var(--secondary-color) !important;
    color: var(--text-dark) !important;
}

body:not(.admin-dark-mode) #createInvoiceModal .inv-top-bar {
    background: var(--bg-white) !important;
    border-bottom: 1px solid var(--secondary-color) !important;
    color: var(--text-dark) !important;
}

body:not(.admin-dark-mode) #createInvoiceModal .inv-top-bar * {
    color: var(--text-dark) !important;
}

body:not(.admin-dark-mode) #createInvoiceModal .inv-creator-sidebar {
    background: var(--primary-color) !important;
    border-right: 1px solid var(--secondary-color) !important;
    color: var(--text-dark) !important;
}

body:not(.admin-dark-mode) #createInvoiceModal .inv-creator-sidebar * {
    color: var(--text-dark) !important;
    border-color: var(--secondary-color) !important;
}

body:not(.admin-dark-mode) #createInvoiceModal .inv-creator-sidebar input,
body:not(.admin-dark-mode) #createInvoiceModal .inv-creator-sidebar select,
body:not(.admin-dark-mode) #createInvoiceModal .inv-creator-sidebar textarea {
    background: var(--bg-white) !important;
    border: 1px solid var(--accent-color) !important;
    color: var(--text-dark) !important;
}

body:not(.admin-dark-mode) #createInvoiceModal .inv-items-panel {
    background: var(--bg-white) !important;
    color: var(--text-dark) !important;
}

body:not(.admin-dark-mode) #createInvoiceModal .inv-items-panel * {
    color: var(--text-dark) !important;
    border-color: var(--secondary-color) !important;
}

body:not(.admin-dark-mode) #createInvoiceModal .inv-items-panel input,
body:not(.admin-dark-mode) #createInvoiceModal .inv-items-panel select {
    background: var(--bg-light) !important;
    border: 1px solid var(--accent-color) !important;
    color: var(--text-dark) !important;
}

body:not(.admin-dark-mode) #createInvoiceModal .inv-items-table th {
    background: var(--primary-color) !important;
    color: var(--text-dark) !important;
}

body:not(.admin-dark-mode) #createInvoiceModal .inv-items-table td {
    border-color: var(--secondary-color) !important;
}

body:not(.admin-dark-mode) #createInvoiceModal [style*="background: #070b14"],
body:not(.admin-dark-mode) #createInvoiceModal [style*="background:#070b14"],
body:not(.admin-dark-mode) #createInvoiceModal [style*="background: #090e1a"],
body:not(.admin-dark-mode) #createInvoiceModal [style*="background:#090e1a"],
body:not(.admin-dark-mode) #createInvoiceModal [style*="background: #0c1222"],
body:not(.admin-dark-mode) #createInvoiceModal [style*="background:#0c1222"],
body:not(.admin-dark-mode) #createInvoiceModal [style*="background: #111827"],
body:not(.admin-dark-mode) #createInvoiceModal [style*="background:#111827"] {
    background: var(--bg-light) !important;
}

body:not(.admin-dark-mode) #createInvoiceModal [style*="color: #94a3b8"],
body:not(.admin-dark-mode) #createInvoiceModal [style*="color:#94a3b8"],
body:not(.admin-dark-mode) #createInvoiceModal [style*="color: #cbd5e1"],
body:not(.admin-dark-mode) #createInvoiceModal [style*="color:#cbd5e1"],
body:not(.admin-dark-mode) #createInvoiceModal [style*="color: #f8fafc"],
body:not(.admin-dark-mode) #createInvoiceModal [style*="color:#f8fafc"] {
    color: var(--text-dark) !important;
}

body:not(.admin-dark-mode) #createInvoiceModal [style*="border: 1px solid #1e293b"],
body:not(.admin-dark-mode) #createInvoiceModal [style*="border:1px solid #1e293b"],
body:not(.admin-dark-mode) #createInvoiceModal [style*="border-bottom: 1px solid #1e293b"],
body:not(.admin-dark-mode) #createInvoiceModal [style*="border-top: 1px solid #1e293b"] {
    border-color: var(--secondary-color) !important;
}

/* Invoice totals area */
body:not(.admin-dark-mode) #createInvoiceModal .inv-totals-area,
body:not(.admin-dark-mode) #createInvoiceModal [style*="background: #0a1628"] {
    background: var(--primary-color) !important;
    border-color: var(--secondary-color) !important;
}

/* Invoice action bar */
body:not(.admin-dark-mode) #createInvoiceModal .inv-action-bar,
body:not(.admin-dark-mode) #invSaveNewCustomerBanner {
    background: var(--bg-white) !important;
    border-top: 1px solid var(--secondary-color) !important;
    color: var(--text-dark) !important;
}

/* ═══════════════════════════════════════════════
   DARK MODE — body.admin-dark-mode
═══════════════════════════════════════════════ */
body.admin-dark-mode {
    --bg-white: #111827;
    --bg-light: #0f172a;
    --text-dark: #f1f5f9;
    --text-light: #94a3b8;
    --secondary-color: #1e293b;
    --primary-color: #1a2235;
    --accent-color: #2d3f56;
}

body.admin-dark-mode .admin-body,
body.admin-dark-mode {
    background-color: #0f172a;
    color: #f1f5f9;
}

body.admin-dark-mode .admin-sidebar {
    background-color: #070b14;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    border-right: 1px solid #1e293b;
}

body.admin-dark-mode .admin-logo {
    border-bottom-color: #1e293b;
    color: #f1f5f9;
}

body.admin-dark-mode .admin-nav li {
    color: #94a3b8;
}

body.admin-dark-mode .admin-nav li:hover,
body.admin-dark-mode .admin-nav li.active {
    background-color: #0c1527;
    color: #f1f5f9;
    border-left-color: #d1bfae;
}

body.admin-dark-mode .admin-nav li .nav-label small {
    color: #4a6080;
}

body.admin-dark-mode .admin-header {
    background-color: #090e1a;
    border-bottom: 1px solid #1e293b;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

body.admin-dark-mode .admin-header h2 {
    color: #f1f5f9;
}

body.admin-dark-mode .admin-profile {
    color: #94a3b8;
}

body.admin-dark-mode .admin-profile i {
    color: #f1f5f9;
}

body.admin-dark-mode .admin-content {
    background-color: #0f172a;
}

/* Stat cards */
body.admin-dark-mode .stat-card {
    background-color: #111827;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

body.admin-dark-mode .stat-info h4 {
    color: #94a3b8;
}

body.admin-dark-mode .stat-icon {
    background-color: #1e293b;
    color: #d1bfae;
}

/* Table containers */
body.admin-dark-mode .table-container {
    background-color: #111827;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

body.admin-dark-mode .admin-table th,
body.admin-dark-mode .admin-table td {
    border-bottom-color: #1e293b;
}

body.admin-dark-mode .admin-table th {
    background-color: #0c1527;
    color: #94a3b8;
}

body.admin-dark-mode .admin-table td {
    color: #f1f5f9;
}

body.admin-dark-mode .admin-table tbody tr:hover {
    background-color: #0c1527;
}

/* Supplier, Purchases, Expenses tables in dark mode */
body.admin-dark-mode #suppliersListView .table-container,
body.admin-dark-mode #purchasesListView .table-container,
body.admin-dark-mode #expenses-section .table-container {
    background: #111827;
    border: 1px solid #1e293b;
}

body.admin-dark-mode #suppliersListView table thead tr,
body.admin-dark-mode #purchasesListView table thead tr,
body.admin-dark-mode #expenses-section table thead tr {
    background: #0c1527;
}

body.admin-dark-mode #suppliersListView table th,
body.admin-dark-mode #purchasesListView table th,
body.admin-dark-mode #expenses-section table th {
    color: #94a3b8;
    border-bottom-color: #1e293b;
}

body.admin-dark-mode #suppliersListView table td,
body.admin-dark-mode #purchasesListView table td,
body.admin-dark-mode #expenses-section table td {
    color: #e2e8f0;
    border-bottom-color: #1a2235;
}

body.admin-dark-mode #suppliersListView table tbody tr:hover,
body.admin-dark-mode #purchasesListView table tbody tr:hover,
body.admin-dark-mode #expenses-section table tbody tr:hover {
    background: #0c1527;
}

/* Search inputs in dark mode */
body.admin-dark-mode #supplierSearchInput,
body.admin-dark-mode #expenseSearchInput,
body.admin-dark-mode #expenseCategoryFilter {
    background: #0f172a;
    border-color: #1e293b;
    color: #f1f5f9;
}

body.admin-dark-mode #supplierSearchInput::placeholder,
body.admin-dark-mode #expenseSearchInput::placeholder {
    color: #475569;
}

/* Section headings */
body.admin-dark-mode .admin-section h3,
body.admin-dark-mode .admin-section h4 {
    color: #f1f5f9;
}

body.admin-dark-mode .section-header h3 {
    color: #f1f5f9;
}

/* Expense summary cards */
body.admin-dark-mode #expenses-section .stat-card {
    background: #111827;
}

/* Form modals in dark mode — keep existing dark style */
body.admin-dark-mode .modal-overlay {
    background: rgba(0, 0, 0, 0.75);
}

body.admin-dark-mode .modal-content {
    background: #111827;
    border: 1px solid #1e293b;
    color: #f1f5f9;
}

body.admin-dark-mode .modal-content h3 {
    color: #f1f5f9;
}

body.admin-dark-mode .modal-content label {
    color: #94a3b8;
}

body.admin-dark-mode .modal-content input,
body.admin-dark-mode .modal-content select,
body.admin-dark-mode .modal-content textarea {
    background: #070b14;
    border-color: #1e293b;
    color: #f1f5f9;
}

/* Btn styles in dark */
body.admin-dark-mode .btn-secondary {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}

/* Reports & Tax already dark-themed — in dark mode they look fine naturally */

/* ── Dark Mode Theme Toggle Button ── */
#themeToggleBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    background: #f1f5f9;
    color: #1e293b;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: var(--font-body);
}

#themeToggleBtn:hover {
    background: var(--secondary-color);
    border-color: var(--accent-color);
}

body.admin-dark-mode #themeToggleBtn {
    background: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}

body.admin-dark-mode #themeToggleBtn:hover {
    background: #263348;
}

/* ── Sidebar two-line items: dark mode small sub-label ── */
body.admin-dark-mode .admin-nav li small {
    color: #4a6080 !important;
    opacity: 1 !important;
}
body.admin-dark-mode .admin-nav li.active small,
body.admin-dark-mode .admin-nav li:hover small {
    color: #7a9ab8 !important;
}

/* ── Dark mode: general text inside admin sections ── */
body.admin-dark-mode .admin-section p,
body.admin-dark-mode .admin-section span,
body.admin-dark-mode .admin-section label,
body.admin-dark-mode .admin-section div {
    color: inherit;
}

/* Expense summary card text in dark mode */
body.admin-dark-mode #expenses-section [style*="color: #64748b"],
body.admin-dark-mode #expenses-section [style*="color:#64748b"] {
    color: #94a3b8 !important;
}
body.admin-dark-mode #expenses-section [style*="color: #1e293b"],
body.admin-dark-mode #expenses-section [style*="color:#1e293b"] {
    color: #f1f5f9 !important;
}

/* Supplier section description text */
body.admin-dark-mode #suppliers-section p,
body.admin-dark-mode #suppliers-section [style*="color: #64748b"] {
    color: #94a3b8 !important;
}

/* Filter inputs dark mode — force any inline bg */
body.admin-dark-mode input[type="text"],
body.admin-dark-mode input[type="number"],
body.admin-dark-mode input[type="date"],
body.admin-dark-mode input[type="email"],
body.admin-dark-mode select,
body.admin-dark-mode textarea {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
    color: #f1f5f9 !important;
}
body.admin-dark-mode input::placeholder,
body.admin-dark-mode textarea::placeholder {
    color: #475569 !important;
}