/***********************************************************************
 * File: tables.css
 * Module: Design System
 * Purpose:
 * Defines the standard table styles used throughout the
 * AI Governance application.
 *
 * Dependencies:
 * - style.css
 * - layout.css
 *
 * Technical Notes:
 * Provides a clean, readable presentation for data tables.
 * Designed primarily for desktop and tablet viewing.
 *
 * Future Enhancements:
 * - Sortable columns
 * - Sticky headers
 * - Pagination controls
 * - Row selection
 * - Export styling
 *
 * Build:
 * AI Governance Build 2 MVP/V1
 *
 * Version:
 * 2.0.0
 ***********************************************************************/


/* ===========================================================
   TABLE CONTAINER
   =========================================================== */

.ag-table-container {

    width: 100%;

    overflow-x: auto;

    margin-bottom: var(--ag-space-lg);

}


/* ===========================================================
   TABLE
   =========================================================== */

.ag-table {

    width: 100%;

    border-collapse: collapse;

    background: var(--ag-surface);

    border: 1px solid var(--ag-border);

}


/* ===========================================================
   TABLE HEADER
   =========================================================== */

.ag-table thead {

    background: #EEF2F6;

}

.ag-table th {

    text-align: left;

    padding: 1rem;

    font-weight: 600;

    color: var(--ag-primary);

    border-bottom: 1px solid var(--ag-border);

    white-space: nowrap;

}


/* ===========================================================
   TABLE BODY
   =========================================================== */

.ag-table td {

    padding: 0.9rem 1rem;

    border-bottom: 1px solid var(--ag-border);

    vertical-align: top;

}


/* ===========================================================
   ROW HOVER
   =========================================================== */

.ag-table tbody tr:hover {

    background: #F8FAFC;

}


/* ===========================================================
   ALTERNATE ROWS
   =========================================================== */

.ag-table tbody tr:nth-child(even) {

    background: #FCFCFD;

}


/* ===========================================================
   LAST ROW
   =========================================================== */

.ag-table tbody tr:last-child td {

    border-bottom: none;

}


/* ===========================================================
   NUMERIC DATA
   =========================================================== */

.ag-number {

    text-align: right;

    white-space: nowrap;

}





/* ===========================================================
   TABLE ACTIONS
   =========================================================== */

.ag-table-actions {

    white-space: nowrap;

}

.ag-table-actions a {

    margin-right: 0.75rem;

    font-weight: 500;

}


/* ===========================================================
   EMPTY TABLE MESSAGE
   =========================================================== */

.ag-table-empty {

    text-align: center;

    padding: 3rem;

    color: var(--ag-text-light);

}


/* ===========================================================
   COMPACT TABLE
   =========================================================== */

.ag-table-compact th,

.ag-table-compact td {

    padding: 0.6rem 0.75rem;

}


/* ===========================================================
   TABLE CAPTION
   =========================================================== */

.ag-table-caption {

    margin-bottom: 0.75rem;

    font-weight: 600;

    color: var(--ag-primary);

}