:root {
    --primary: #1a237e;
    --accent: #c62828;
    --text: #333;
    --border: #ddd;
    --bg: #f5f5f5;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 20px;
}

/* --- Controls (Screen Only) --- */
.controls {
    max-width: 210mm;
    margin: 0 auto 20px;
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.controls h2 {
    margin: 0;
    color: var(--primary);
    font-size: 1.2rem;
}

.btn {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: background 0.2s;
}

.btn:hover {
    background-color: #0d1655;
}

.btn-secondary {
    background-color: #555;
}

/* --- Page Layout (A4) --- */
.page {
    width: 210mm;
    min-height: 297mm;
    padding: 15mm;
    margin: 0 auto 10mm;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    position: relative;
}

/* --- Header --- */
.header {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 15px;
}

.header-logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 10px;
}

.logo-img {
    height: 50px;
    width: auto;
}

.conf-title {
    font-family: 'Cinzel', serif;
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
    margin: 5px 0;
    text-transform: uppercase;
}

.conf-details {
    font-size: 11px;
    color: #555;
    margin-top: 5px;
}

.sheet-title {
    font-size: 16px;
    color: var(--accent);
    margin: 10px 0 0;
    font-weight: 700;
    text-decoration: underline;
    text-transform: uppercase;
}

/* --- Table --- */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

th,
td {
    border: 1px solid black;
    padding: 6px;
    text-align: left;
    vertical-align: middle;
}

th {
    background-color: #f0f0f0;
    font-weight: 700;
    color: #000;
    text-align: center;
}

/* Column Widths */
.col-sl {
    width: 35px;
    text-align: center;
}

.col-id {
    width: 90px;
    font-family: monospace;
    font-weight: bold;
}

.col-presenter {
    width: 20%;
}

.col-title {}

.col-remarks {
    width: 80px;
}

.col-sign {
    width: 80px;
}

.col-actions {
    width: 140px;
    text-align: center;
}

/* Screen only */

/* Action Buttons within Table */
.action-btn {
    display: inline-block;
    padding: 4px 8px;
    margin: 2px;
    border-radius: 4px;
    color: white;
    text-decoration: none;
    font-size: 10px;
    cursor: pointer;
}

.btn-cert {
    background-color: #2e7d32;
}

.btn-feed {
    background-color: var(--accent);
}

/* --- Print Styles --- */
@media print {
    body {
        margin: 0;
        padding: 0;
        background: none;
    }

    .controls,
    .col-actions {
        display: none !important;
        /* Hide controls and Action column */
    }

    /* If we used .col-actions for the last column, we need to make sure we don't hide Signature if it's not last in HTML but styled differently. 
       Let's assume Action is the LAST column in HTML structure. */

    .page {
        margin: 0;
        box-shadow: none;
        width: 100%;
        padding: 5mm;
        border: none;
        display: block;
        /* Ensure block layout */
    }

    table {
        width: 100%;
    }

    thead {
        display: table-header-group;
        /* Repeat header on every page */
    }

    tfoot {
        display: table-footer-group;
    }

    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    /* Ensure backgrounds print */
    th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}