/* =========================================================
   TABLES.CSS – GLOBAL TABLE SYSTEM
   Used by: customers, items, jobcards, reports
========================================================= */
/*
RULE:
Only global, reusable table behaviour lives here.
Feature-specific table behaviour MUST stay with the feature.
*/



/* ========== BASE TABLE ========== */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

th, td {
    padding: 10px 12px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    vertical-align: top;
    line-height: 1.2;
}

/* ========== COLUMN SIZES (DESKTOP) ========== */
.col-qty { width: 60px; }
.col-unit { width: 120px; white-space: nowrap; }
.col-actions { width: 90px; text-align: right; }
.col-notes { width: auto; }

/* ========== ACTION LINKS ========== */
.material-actions a {
    display: inline-block;
    text-decoration: underline;
    cursor: pointer;
}

/* ========== MOBILE BEHAVIOR ========== */
@media (max-width: 600px) {

    .col-notes { display: none; }

    .col-qty { width: 50px; }
    .col-unit { width: 70px; text-align: right; }
    .col-actions { width: 80px; text-align: right; }

    .material-actions a {
        display: block;
        font-size: 13px;
        line-height: 1.4;
    }
}

/* =========================================================
   ZONE 4 – TABLES & REPORTS
========================================================= */

.data-table .col-qty {
    width: 60px;
}

.data-table .col-unit {
    width: 120px;
}

.data-table .col-actions {
    width: 60px;
    text-align: center;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* 🔥 THIS IS THE REAL FIX */
}

.data-table th,
.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
}

/* 🔑 THIS IS THE FIX */
.data-table th {
    text-align: left;
    line-height: 1.2;
}

.data-table td {
    line-height: 1.2;
}

.data-table td small {
    display: block;
    margin-top: 2px;
    color: #666;
}

@media (max-width: 600px) {
    .col-address {
        display: none;
    }
}

/* =========================================
   MATERIALS – TABLE STABILITY (REQUIRED)
========================================= */

.materials-table {
    width: 100%;
    table-layout: fixed; /* 👈 THIS IS CRITICAL */
}

.materials-table th,
.materials-table td {
    box-sizing: border-box;
}

/* Mobile-specific column sizing */
@media (max-width: 600px) {

    .materials-table .col-qty {
        width: 50px;
    }

    .materials-table .col-unit {
        width: 70px;
        text-align: right;
        white-space: nowrap;
    }

    .materials-table .col-actions {
        width: 80px;            /* 👈 THIS SAVES THE COLUMN */
        text-align: right;
        white-space: nowrap;
    }

    .material-actions a {
        display: block;
        font-size: 13px;
        line-height: 1.4;
        text-decoration: underline;
    }
}

@media (max-width: 600px) {

    /* Align UNIT header with UNIT values */
    .materials-table th.col-unit {
        text-align: right;
        padding-right: 12px;
    }

}

/* =========================================
   ASSETS – TABLE STABILITY
========================================= */

.assets-table {
    width: 100%;
    table-layout: fixed; /* 🔑 critical */
}

.assets-table th,
.assets-table td {
    box-sizing: border-box;
}

/* Desktop sizing */
.assets-table .col-item {
    width: auto;
}

.assets-table .col-unit {
    width: 160px;
    white-space: nowrap;
}

.assets-table .col-actions {
    width: 80px;
    text-align: right;
    white-space: nowrap;
}

/* Action links */
.asset-actions a {
    display: inline-block;
    text-decoration: underline;
    cursor: pointer;
}