/* ========================================
   RUDDHAACONNECT - TABLES
   ======================================== */

@import url('variables.css');

.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.table th {
    padding: 10px;
    background: #f8f8f8;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1.5px solid #ddd;
    color: #333;
}

.table td {
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    color: #333;
}

.table tbody tr:hover {
    background: #f9f9f9;
}

.table tbody tr.selected {
    background: rgba(var(--primary-color-rgb), 0.05);
}

/* FIX: at least 10 content pages (about.html, cash-flow-report.html,
   data-import.html, hr-masters.html, onboarding.html, pl-report.html,
   preferences.html, settings.html, stock-in.html, templates.html)
   use class="data-table" for their tables — a name that never
   existed anywhere, so every one of them rendered as an unstyled
   browser-default table. Aliased to .table's existing rules rather
   than duplicated, so this one fix covers every page using either
   name and they can never drift apart later. */
.data-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.data-table th { padding: 10px; background: #f8f8f8; text-align: left; font-size: 12px; font-weight: 700; border-bottom: 1.5px solid #ddd; color: #333; }
.data-table td { padding: 10px; border-bottom: 1px solid #f0f0f0; font-size: 13px; color: #333; }
.data-table tbody tr:hover { background: #f9f9f9; }
.data-table tbody tr.selected { background: rgba(var(--primary-color-rgb), 0.05); }

/* ══ RESPONSIVE TABLE ══ */
.table-responsive {
    overflow-x: auto;
}

.table-responsive table {
    min-width: 100%;
}

/* ══ TABLE ACTIONS ══ */
.table-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.action-btn {
    padding: 4px 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: #666;
    transition: color 0.2s;
    border-radius: 4px;
}

.action-btn:hover {
    background: #f0f0f0;
    color: var(--primary-color);
}

.action-btn.delete:hover {
    color: #e53935;
}

.action-btn.edit:hover {
    color: var(--primary-color);
}

/* ══ TABLE TOOLBAR ══ */
.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.table-search {
    flex: 1;
    min-width: 200px;
}

.table-filters {
    display: flex;
    gap: 8px;
}

.table-stats {
    font-size: 12px;
    color: #666;
}

/* ══ SORTING ══ */
.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    position: relative;
}

.sortable:hover {
    color: var(--primary-color);
}

.sortable::after {
    content: ' ⇅';
    opacity: 0.3;
    margin-left: 4px;
}

.sortable.asc::after {
    content: ' ↑';
    opacity: 1;
    color: var(--primary-color);
}

.sortable.desc::after {
    content: ' ↓';
    opacity: 1;
    color: var(--primary-color);
}

/* ══ PAGINATION ══ */
.pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 16px;
}

.pagination-btn {
    padding: 6px 10px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    border-radius: 4px;
    font-size: 12px;
    transition: all 0.2s;
}

.pagination-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.pagination-btn.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ══ AMOUNT COLUMNS ══ */
.amt {
    text-align: right;
    font-weight: 700;
    color: var(--primary-color);
    font-family: monospace;
}

.amt.negative {
    color: #e53935;
}

.amt.positive {
    color: #4caf50;
}

/* ══ STATUS BADGE ══ */
.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.badge.success {
    background: #d4edda;
    color: #155724;
}

.badge.danger {
    background: #f8d7da;
    color: #721c24;
}

.badge.warning {
    background: #fff3cd;
    color: #856404;
}

.badge.info {
    background: #d1ecf1;
    color: #0c5460;
}

/* Project status badges (pm-settings.html's status reference table) */
.badge.draft {
    background: #e9ecef;
    color: #495057;
}
.badge.on_hold {
    background: #fff3cd;
    color: #856404;
}
.badge.closing {
    background: #ffe5d0;
    color: #a35b00;
}
.badge.closed {
    background: #e2e3e5;
    color: #383d41;
}
.badge.cancelled {
    background: #f8d7da;
    color: #842029;
}

/* FIX: used across General Ledger, Trial Balance, Balance Sheet,
   Profit & Loss, and the Journal Entries list — a shared "report
   card" convention for financial statements, never defined anywhere. */
.report-card {
    background: var(--card-color, #fff);
    border: 1px solid #eef0f4;
    border-radius: 10px;
    padding: 18px 20px;
}
.report-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--heading-color, #1a2233);
    margin-bottom: 12px;
}
.total-row td {
    font-weight: 700;
    border-top: 2px solid #333;
}
.debit-col, .debit-amt {
    text-align: right;
    color: #1a2233;
}
.credit-col, .credit-amt {
    text-align: right;
    color: #1a2233;
}
.je-no {
    font-weight: 700;
    color: var(--primary-color, #1f6bff);
}
.balanced {
    color: #1a8843;
    font-size: 13px;
    font-weight: 600;
}
.unbalanced {
    color: #c0392b;
    font-size: 13px;
    font-weight: 600;
}