/* ==========================================================================
    tables.css
    Shared Table Styles
    ========================================================================== */

/* ===============================
    Responsive Table Container
 =================================*/
.table-responsive{
    width:100%;
    margin-top:25px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
}

/* ===============================
    Main Table
 =================================*/
table{
    width:100%;
    min-width:600px;
    border-collapse:collapse;
    table-layout:auto;
    background:#fff;
    font-size:14px;
}

/* ===============================
    Table Header
 =================================*/
table thead th,
table tr:first-child th{
    background:#f8fafc;
    color:#475569;
    padding:12px 14px;
    text-align:left;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    border-bottom:2px solid var(--border);
}

/* ===============================
    Table Cells
 =================================*/
table td{
    padding:12px 14px;
    border-bottom:1px solid var(--border);
    font-size:13px;
    color:var(--text);
}

table tr:last-child td{border-bottom:none}
table tr:hover td{background:#f8fafc}

/* ===============================
    Subject Column
 =================================*/
.subject-col{
    text-align:left !important;
    white-space:normal !important;
    line-height:1.6;
    min-width:260px;
    max-width:520px;
    font-weight:500;
}

/* ===============================
    Zebra Stripe
 =================================*/
table tbody tr:nth-child(even) td{
    background:#f8fafc;
}

/* ===============================
    PASS / FAIL
 =================================*/
.pass{
    color:#0f8a32;
    font-weight:700;
}

.fail{
    color:#d32f2f;
    font-weight:700;
}

/* ==========================================================================
    tables.css
    Shared Table Styles
    - Generic `table` styles above apply to all result/search/result pages.
    - `.data-table` + `.table-scroll` are reusable classes for full database
      tables (admin panel look: phpMyAdmin / DataTables style).
    ========================================================================== */

/* ===============================
    Admin Full Table (legacy helpers kept for compatibility)
    =================================*/
.full-table{
    min-width:1800px;
}

.full-table th,
.full-table td{
    font-size:13px;
    padding:10px;
}
.admin-table{
    width:max-content;
    min-width:100%;
}

.admin-table th,
.admin-table td{
    padding:10px 14px;
    white-space:nowrap;
}
/* ===============================
    Admin Full-Table Wrapper (legacy)
    =================================*/
.full-table-scroll{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid var(--border);
    border-radius:12px;
    margin-top:18px;
}

/* ==========================================================================
    REUSABLE ADMIN DATA TABLE  (phpMyAdmin / DataTables style)
    Use markup:
      <div class="table-scroll">
        <table class="data-table"> ... </table>
      </div>
    - Full width of its container, horizontal scroll when needed.
    - Sticky header, zebra striping, hover, rounded borders.
    - Subject (and any .wrap-col) wraps naturally at spaces; every other
      column stays on a single line (white-space:nowrap).
    ========================================================================== */

/* Scroll wrapper: keeps the table to the container width and scrolls sideways */
.table-scroll{
    width:100%;
    margin-top:18px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:var(--shadow-sm);
    background:#fff;
}

/* The data table itself fills the wrapper width, never squeezes.
   Background is transparent so the watermark (z-index:0) remains visible
   behind the cells. The THEAD keeps an opaque green fill. */
table.data-table{
    width:100%;
    min-width:max-content;
    border-collapse:separate;
    border-spacing:0;
    table-layout:auto;
    background:transparent;
    font-size:14px;
    color:var(--text-soft);
}

/* Sticky professional header */
table.data-table thead th{
    position:sticky;
    top:0;
    z-index:2;
    background:var(--green);
    color:#fff;
    text-align:center;
    font-size:13px;
    font-weight:600;
    letter-spacing:.2px;
    padding:13px 14px;
    white-space:nowrap;
    vertical-align:middle;
    border-bottom:2px solid var(--green-dark);
}

/* Rounded corners on the first/last header cells */
table.data-table thead th:first-child{ border-top-left-radius:13px; }
table.data-table thead th:last-child { border-top-right-radius:13px; }

/* Cells: single line for all columns except subject/wrap columns.
   Transparent background so the watermark shows through; only a faint
   bottom border separates rows. */
table.data-table tbody td{
    padding:11px 14px;
    font-size:13px;
    text-align:center;
    white-space:nowrap;
    border-bottom:1px solid #eef2f0;
    vertical-align:middle;
    background:transparent;
}

/* Subject / long-text columns wrap naturally at word boundaries */
table.data-table td.wrap-col,
table.data-table td.subject-col{
    text-align:left;
    white-space:normal;
    word-break:break-word;
    min-width:260px;
    max-width:520px;
    line-height:1.5;
    font-weight:500;
}

/* Zebra striping — semi-transparent so the watermark stays visible */
table.data-table tbody tr:nth-child(even) td{ background:rgba(247,251,249,.72); }

/* Hover highlight */
table.data-table tbody tr:hover td{ background:#eafaf0; transition:background .2s ease; }

/* Last row bottom rounding */
table.data-table tbody tr:last-child td:first-child{ border-bottom-left-radius:13px; }
table.data-table tbody tr:last-child td:last-child { border-bottom-right-radius:13px; }

/* Reasonable column sizing so the table spans the page without cramming */
table.data-table th.col-sm, table.data-table td.col-sm{ width:90px;  min-width:90px;  }
table.data-table th.col-md, table.data-table td.col-md{ width:130px; min-width:130px; }
table.data-table th.col-lg, table.data-table td.col-lg{ width:200px; min-width:200px; }

/* ===============================
    Result Management Table
    =================================*/
.results-table{
    width:100%;
    border-collapse:collapse;
    margin-top:25px;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
}

.results-table th{
    background:var(--green);
    color:#fff;
    padding:13px;
    text-align:left;
}

.results-table td{
    padding:12px;
    border-bottom:1px solid var(--border);
}

.results-table tr:hover{
    background:var(--primary-light);
}

/* ===============================
    Status Badges
    =================================*/
.status-badge{
    display:inline-block;
    padding:5px 10px;
    border-radius:6px;
    font-size:12px;
    font-weight:600;
}

.status-active{
    background:#dcfce7;
    color:#166534;
}

.status-blocked{
    background:#fee2e2;
    color:#991b1b;
}

/* ===============================
    Pagination
    =================================*/
.pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:25px;
}

.pagination a,
.pagination span{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:40px;
    height:40px;
    padding:0 14px;
    border-radius:8px;
    border:1px solid var(--border);
    text-decoration:none;
    background:#fff;
    color:var(--green);
    font-weight:600;
    transition:.25s;
}

.pagination a:hover,
.pagination span.active{
    background:var(--green);
    color:#fff;
}

/* ===============================
    Upload Guide Table
    =================================*/
.result-type-hint{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
    table-layout:fixed;
}

.result-type-hint col.col-type{ width:18%; }
.result-type-hint col.col-sheet{ width:22%; }
.result-type-hint col.col-cols{ width:60%; }

.result-type-hint th{
    background:var(--green);
    color:#fff;
    padding:12px;
    text-align:left;
    word-break:break-word;
}

.result-type-hint td{
    padding:10px 12px;
    border-bottom:1px solid var(--border);
    word-break:break-word;
    overflow-wrap:anywhere;
}

/* ===============================
    Mobile
    =================================*/
@media (max-width:768px){

    table{
        min-width:600px;
        font-size:13px;
    }

    table th{
        font-size:13px;
        padding:10px;
    }

    table td{
        font-size:13px;
        padding:10px;
    }

    .subject-col{
        min-width:200px;
        max-width:320px;
    }

    /* Data tables keep readable header sizing on small screens;
       the wrapper handles horizontal scrolling. */
    table.data-table thead th{ padding:11px 10px; font-size:12px; }
    table.data-table tbody td{ padding:9px 10px; font-size:12px; }
    table.data-table td.wrap-col,
    table.data-table td.subject-col{ min-width:200px; max-width:300px; }

}