/* assets/css/style.css - Refined Brand Theme, Balanced Palette & Print Stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&display=swap');

:root {
    /* Base Neutral Canvas & Surfaces (Soft, pleasing, zero eye-strain) */
    --bg: #F4F6F9;
    --surface: #FFFFFF;
    --sunk: #F8FAFC;
    --ink: #0F1D38;
    --muted: #5A6A85;
    --line: #E2E8F0;

    /* Primary Brand: Refined Teal / Light Blue from the logo */
    --brand: #168A91;
    --brand-hover: #12747A;
    --brand-dark: #0E595E;
    --brand-soft: #E9F6F7;
    --on-brand: #FFFFFF;

    /* Alias for existing petrol classes to seamlessly adopt the brand color */
    --petrol: #168A91;
    --petrol-2: #12747A;
    --on-petrol: #FFFFFF;

    /* Secondary Brand: Deep Royal Navy from the logo text & outer rings */
    --side: #0B2244;
    --side-surface: #0F2D59;
    --side-ink: #E2E8F0;
    --side-dim: #94A3B8;

    /* Accent Brand: Warm Subtle Gold from the logo wings */
    --gold: #D8980D;
    --gold-hover: #C28607;
    --gold-soft: #FEF7E8;
    --gold-border: #F6D88E;
    --amber: #D8980D;
    --amber-soft: #FEF7E8;

    /* Semantic Status (Soft, restrained, pleasing to the eyes) */
    --pass: #167A49;
    --pass-soft: #ECFDF3;
    --pass-border: #A6F4C5;
    --fail: #B42318;
    --fail-soft: #FEF3F2;
    --fail-border: #FECDCA;

    --focus: #168A91;
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--bg);
    color: var(--ink);
    font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

.brand-bg { background-color: var(--brand); }
.brand-text { color: var(--brand); }
.brand-border { border-color: var(--brand); }

.petrol-bg { background-color: var(--brand); }
.petrol-text { color: var(--brand); }
.petrol-border { border-color: var(--brand); }

.side-bg { background-color: var(--side); }

/* Table styling - Clean, soft, spacious */
.custom-table {
    width: 100%;
    border-collapse: collapse;
}
.custom-table th {
    background-color: var(--sunk);
    color: var(--muted);
    font-weight: 600;
    font-size: 12.5px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.custom-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    font-size: 13.5px;
}
.custom-table tr:last-child td {
    border-bottom: none;
}
.custom-table tbody tr:hover {
    background-color: rgba(248, 250, 252, 0.8);
}

/* Printable Paper Preview */
.paper-wrap {
    background: #EBF0F5;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--line);
    overflow-x: auto;
}
.paper {
    background: #FFFFFF;
    color: #0F1D38;
    padding: 36px 40px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(11, 34, 68, 0.06);
    max-width: 820px;
    margin: 0 auto;
}
.paper h2 {
    font-size: 22px;
    margin-bottom: 4px;
    color: #0B2244;
    font-weight: 800;
}
.paper .ph {
    border-bottom: 2px solid #0B2244;
    padding-bottom: 14px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}
.paper .org {
    font-weight: 800;
    font-size: 16px;
    color: #168A91;
    letter-spacing: -0.01em;
}
.paper table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 13px;
}
.paper th {
    background: #F1F5F9;
    color: #334155;
    border-bottom: 1px solid #CBD5E1;
    padding: 8px 10px;
    text-align: left;
}
.paper td {
    border-bottom: 1px solid #E2E8F0;
    padding: 8px 10px;
}
.paper .pq {
    margin: 0 0 18px;
    page-break-inside: avoid;
}
.paper .po {
    margin: 4px 0 0 24px;
}
.paper .po.key {
    color: #167A49;
    font-weight: 600;
}
.paper .lines {
    border-bottom: 1px solid #94A3B8;
    height: 28px;
    margin-top: 4px;
}
.paper .sig {
    display: flex;
    gap: 40px;
    margin-top: 48px;
}
.paper .sig div {
    flex: 1;
    border-top: 1px solid #64748B;
    padding-top: 6px;
    font-size: 12px;
    color: #64748B;
}
.paper .big {
    font-size: 28px;
    font-weight: 800;
}

/* Mobile Viewport Optimizations */
@media (max-width: 768px) {
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
    .paper {
        padding: 20px 16px;
    }
    .paper-wrap {
        padding: 12px 6px;
    }
    .custom-table th {
        padding: 8px 10px;
        font-size: 11.5px;
    }
    .custom-table td {
        padding: 10px 10px;
        font-size: 12.5px;
    }
}

@media print {
    body * {
        visibility: hidden !important;
    }
    #print-area, #print-area * {
        visibility: visible !important;
    }
    #print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }
    .no-print {
        display: none !important;
    }
}