/* ============================================================
   John Becker Airport – DC X-Ray System
   Main Stylesheet
   ============================================================ */

/* ---------- Variables ---------- */
:root {
    --blue-primary : #1565C0;
    --blue-light   : #1976D2;
    --blue-bg      : #E3F2FD;
    --green-primary: #2E7D32;
    --green-light  : #43A047;
    --red-primary  : #C62828;
    --gray-bg      : #F4F6FA;
    --sidebar-w    : 220px;
    --header-h     : 64px;
    --white        : #FFFFFF;
    --border       : #E0E0E0;
    --text         : #212121;
    --text-muted   : #757575;
    --radius       : 12px;
    --shadow       : 0 2px 12px rgba(0,0,0,.08);
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background : var(--gray-bg);
    color      : var(--text);
    font-size  : 15px;
    line-height: 1.5;
}
a { color: var(--blue-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* ============================================================
   AUTH PAGES (Login / Register)
   ============================================================ */
.auth-bg {
    min-height: 100vh;
    display   : flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #B3D9FF 0%, #E8F5E9 60%, #D1C4E9 100%);
    padding   : 20px;
    position  : relative;
    overflow  : hidden;
}
.auth-bg::before, .auth-bg::after {
    content : '';
    position: absolute;
    border-radius: 50%;
    opacity : .45;
}
.auth-bg::before {
    width : 420px; height: 420px;
    background: radial-gradient(circle, #64B5F6, transparent 70%);
    top: -100px; left: -80px;
}
.auth-bg::after {
    width : 360px; height: 360px;
    background: radial-gradient(circle, #A5D6A7, transparent 70%);
    bottom: -80px; right: -60px;
}
.auth-card {
    background   : var(--white);
    border-radius: 20px;
    box-shadow   : 0 8px 40px rgba(0,0,0,.12);
    padding      : 44px 40px 36px;
    width        : 100%;
    max-width    : 420px;
    position     : relative;
    z-index      : 1;
}
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo img { width: 80px; }
.auth-logo .brand-name {
    font-size  : 22px;
    font-weight: 800;
    color      : var(--blue-primary);
    letter-spacing: 1px;
    display    : block;
    margin-top : 8px;
}
.auth-logo .brand-sub {
    font-size  : 11px;
    font-weight: 600;
    color      : var(--text-muted);
    letter-spacing: 3px;
}
.auth-title {
    font-size  : 22px;
    font-weight: 700;
    color      : var(--text);
    text-align : center;
    margin-bottom: 4px;
}
.auth-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 28px;
}
.input-icon-wrap {
    position     : relative;
    margin-bottom: 16px;
}
.input-icon-wrap .icon-left {
    position : absolute;
    left     : 14px;
    top      : 50%;
    transform: translateY(-50%);
    color    : var(--text-muted);
    font-size: 16px;
}
.input-icon-wrap .icon-right {
    position : absolute;
    right    : 14px;
    top      : 50%;
    transform: translateY(-50%);
    color    : var(--text-muted);
    cursor   : pointer;
    font-size: 16px;
    background: none;
    border   : none;
    padding  : 0;
}
.input-icon-wrap input {
    width        : 100%;
    padding      : 13px 42px;
    border       : 1.5px solid var(--border);
    border-radius: 10px;
    font-size    : 14px;
    outline      : none;
    transition   : border-color .2s;
}
.input-icon-wrap input:focus { border-color: var(--blue-primary); }
.btn-login {
    width        : 100%;
    padding      : 14px;
    background   : var(--blue-primary);
    color        : var(--white);
    font-size    : 15px;
    font-weight  : 700;
    letter-spacing: 1.5px;
    border       : none;
    border-radius: 10px;
    cursor       : pointer;
    transition   : background .2s, transform .1s;
    margin-top   : 6px;
}
.btn-login:hover  { background: var(--blue-light); }
.btn-login:active { transform: scale(.98); }
.auth-footer {
    text-align : center;
    margin-top : 20px;
    font-size  : 13px;
    color      : var(--text-muted);
}
.auth-copyright {
    position  : absolute;
    bottom    : 20px;
    left      : 50%;
    transform : translateX(-50%);
    font-size : 13px;
    color     : #555;
    white-space: nowrap;
    display   : flex;
    align-items: center;
    gap       : 8px;
}
.auth-copyright .dot {
    width : 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.dot-blue  { background: var(--blue-primary); }
.dot-green { background: var(--green-primary); }
.forgot-link {
    display   : block;
    text-align: right;
    font-size : 13px;
    color     : var(--blue-primary);
    margin-bottom: 18px;
    margin-top: -8px;
}

/* ============================================================
   LAYOUT – Sidebar + Content
   ============================================================ */
.layout { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
    width     : var(--sidebar-w);
    background: var(--white);
    box-shadow: 2px 0 8px rgba(0,0,0,.07);
    display   : flex;
    flex-direction: column;
    position  : fixed;
    top       : 0; left: 0; bottom: 0;
    z-index   : 100;
    transition: transform .3s ease;
}
.sidebar-logo {
    padding   : 24px 20px 20px;
    border-bottom: 1px solid var(--border);
    display   : flex;
    align-items: center;
    gap       : 10px;
}
.sidebar-logo img { width: 46px; }
.sidebar-logo .logo-text .name {
    font-size  : 13px;
    font-weight: 800;
    color      : var(--blue-primary);
    line-height: 1.2;
}
.sidebar-logo .logo-text .sub {
    font-size  : 9px;
    font-weight: 600;
    letter-spacing: 2px;
    color      : var(--text-muted);
}
.sidebar-nav {
    flex   : 1;
    padding: 16px 0;
    overflow-y: auto;
}
.nav-item {
    display    : flex;
    align-items: center;
    gap        : 12px;
    padding    : 12px 20px;
    color      : var(--text-muted);
    font-size  : 14px;
    font-weight: 500;
    cursor     : pointer;
    transition : background .15s, color .15s;
    text-decoration: none;
    border-radius: 0;
    margin     : 2px 8px;
    border-radius: 8px;
}
.nav-item i { font-size: 18px; width: 22px; text-align: center; }
.nav-item:hover, .nav-item.active {
    background: var(--blue-bg);
    color     : var(--blue-primary);
    text-decoration: none;
}
.nav-item.active { font-weight: 600; }
.sidebar-bottom {
    padding      : 16px 8px;
    border-top   : 1px solid var(--border);
}
.nav-item.logout { color: #E53935; }
.nav-item.logout:hover { background: #FFEBEE; color: #C62828; }

/* Main Content */
.main-wrap {
    margin-left: var(--sidebar-w);
    flex       : 1;
    display    : flex;
    flex-direction: column;
    min-height : 100vh;
}

/* Header */
.top-header {
    height     : var(--header-h);
    background : var(--white);
    box-shadow : 0 1px 6px rgba(0,0,0,.07);
    display    : flex;
    align-items: center;
    justify-content: space-between;
    padding    : 0 28px;
    position   : sticky;
    top        : 0;
    z-index    : 99;
}
.header-left { display: flex; align-items: center; gap: 14px; }
.hamburger {
    display   : none;
    background: none;
    border    : none;
    font-size : 22px;
    cursor    : pointer;
    color     : var(--text);
    padding   : 4px 8px;
}
.header-user {
    display    : flex;
    align-items: center;
    gap        : 10px;
    cursor     : pointer;
    position   : relative;
}
.header-user .avatar {
    width        : 38px; height: 38px;
    border-radius: 50%;
    background   : var(--blue-bg);
    display      : flex;
    align-items  : center;
    justify-content: center;
    color        : var(--blue-primary);
    font-size    : 20px;
}
.header-user .user-info .name {
    font-weight: 600;
    font-size  : 14px;
    line-height: 1.2;
}
.header-user .user-info .role {
    font-size: 12px;
    color    : var(--text-muted);
}
.user-dropdown {
    position  : absolute;
    top       : 110%;
    right     : 0;
    background: var(--white);
    border    : 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    min-width : 160px;
    z-index   : 200;
    overflow  : hidden;
    display   : none;
}
.user-dropdown.show { display: block; }
.user-dropdown a {
    display    : flex;
    align-items: center;
    gap        : 10px;
    padding    : 11px 16px;
    color      : var(--text);
    font-size  : 14px;
    transition : background .15s;
}
.user-dropdown a:hover { background: var(--gray-bg); text-decoration: none; }
.user-dropdown .divider { border-top: 1px solid var(--border); }

/* Content Area */
.content-area {
    flex   : 1;
    padding: 28px;
}
.page-title {
    font-size  : 26px;
    font-weight: 800;
    color      : var(--blue-primary);
    margin-bottom: 4px;
}
.page-subtitle { color: var(--text-muted); font-size: 14px; }
.breadcrumb-bar {
    font-size: 13px;
    color    : var(--text-muted);
    margin-bottom: 20px;
}
.breadcrumb-bar a { color: var(--text-muted); }
.breadcrumb-bar a:hover { color: var(--blue-primary); }

/* Footer */
.site-footer {
    text-align: center;
    padding   : 16px;
    font-size : 13px;
    color     : var(--text-muted);
    border-top: 1px solid var(--border);
    background: var(--white);
}

/* ============================================================
   CARDS
   ============================================================ */
.card-custom {
    background   : var(--white);
    border-radius: var(--radius);
    box-shadow   : var(--shadow);
    border       : 1px solid var(--border);
}
.card-body-custom { padding: 24px; }

/* Dashboard check cards */
.check-card {
    background   : var(--white);
    border-radius: 16px;
    box-shadow   : var(--shadow);
    border       : 1px solid var(--border);
    padding      : 32px 24px;
    text-align   : center;
    transition   : transform .2s, box-shadow .2s;
}
.check-card:hover {
    transform : translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
.check-card .card-icon {
    width        : 100px; height: 100px;
    border-radius: 50%;
    margin       : 0 auto 20px;
    display      : flex;
    align-items  : center;
    justify-content: center;
    overflow     : hidden;
}
.check-card .card-icon.blue { background: #E3F2FD; }
.check-card .card-icon.green { background: #E8F5E9; }
.check-card .card-icon img { width: 64px; height: 64px; object-fit: contain; }
.check-card .card-title {
    font-size  : 18px;
    font-weight: 700;
    color      : var(--blue-primary);
    margin-bottom: 10px;
}
.check-card .card-desc {
    font-size    : 14px;
    color        : var(--text-muted);
    margin-bottom: 24px;
    min-height   : 44px;
}
.btn-pilih {
    display      : inline-flex;
    align-items  : center;
    gap          : 8px;
    padding      : 12px 32px;
    border       : none;
    border-radius: 10px;
    font-size    : 14px;
    font-weight  : 700;
    letter-spacing: 1px;
    cursor       : pointer;
    text-decoration: none;
    transition   : opacity .2s, transform .1s;
}
.btn-pilih:hover { opacity: .88; text-decoration: none; }
.btn-pilih:active { transform: scale(.97); }
.btn-pilih.blue  { background: var(--blue-primary); color: var(--white); }
.btn-pilih.green { background: var(--green-primary); color: var(--white); }

/* ============================================================
   FORM STYLES
   ============================================================ */
.form-section {
    background   : var(--white);
    border-radius: var(--radius);
    box-shadow   : var(--shadow);
    border       : 1px solid var(--border);
    padding      : 24px;
    margin-bottom: 20px;
}
.form-section-title {
    font-size    : 15px;
    font-weight  : 600;
    color        : var(--text-muted);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.form-label-custom {
    font-size  : 13px;
    font-weight: 600;
    color      : var(--text);
    margin-bottom: 6px;
    display    : block;
}
.form-control-custom {
    width        : 100%;
    padding      : 10px 14px;
    border       : 1.5px solid var(--border);
    border-radius: 8px;
    font-size    : 14px;
    outline      : none;
    transition   : border-color .2s;
    background   : var(--white);
    color        : var(--text);
}
.form-control-custom:focus { border-color: var(--blue-primary); }
.form-control-custom[readonly] { background: #F9F9F9; }
select.form-control-custom { cursor: pointer; }

/* Hasil buttons */
.hasil-group {
    display: flex;
    gap    : 12px;
    flex-wrap: wrap;
}
.hasil-btn {
    display      : flex;
    align-items  : center;
    gap          : 8px;
    padding      : 11px 28px;
    border       : 2px solid var(--border);
    border-radius: 10px;
    font-size    : 15px;
    font-weight  : 600;
    cursor       : pointer;
    background   : var(--white);
    color        : var(--text-muted);
    transition   : all .2s;
}
.hasil-btn.pass { border-color: var(--green-primary); color: var(--green-primary); }
.hasil-btn.pass.selected { background: var(--green-primary); color: var(--white); }
.hasil-btn.fail { border-color: var(--red-primary); color: var(--red-primary); }
.hasil-btn.fail.selected { background: var(--red-primary); color: var(--white); }

/* Signature pad */
.sig-pad-wrapper {
    border       : 1.5px solid var(--border);
    border-radius: 8px;
    background   : #FAFAFA;
    position     : relative;
}
.sig-pad-wrapper canvas { display: block; width: 100%; cursor: crosshair; }
.sig-clear-btn {
    position  : absolute;
    top       : 8px; right: 8px;
    background: rgba(255,255,255,.9);
    border    : 1px solid var(--border);
    border-radius: 6px;
    font-size : 12px;
    padding   : 3px 10px;
    cursor    : pointer;
    color     : var(--text-muted);
}
.sig-clear-btn:hover { color: var(--red-primary); }

/* Action buttons */
.form-actions {
    display        : flex;
    justify-content: flex-end;
    gap            : 12px;
    padding-top    : 10px;
}
.btn-batal {
    padding      : 11px 28px;
    background   : var(--white);
    border       : 1.5px solid var(--border);
    border-radius: 8px;
    font-size    : 14px;
    font-weight  : 600;
    cursor       : pointer;
    color        : var(--text-muted);
    transition   : background .2s;
}
.btn-batal:hover { background: var(--gray-bg); }
.btn-simpan {
    padding      : 11px 32px;
    background   : var(--blue-primary);
    border       : none;
    border-radius: 8px;
    font-size    : 14px;
    font-weight  : 700;
    cursor       : pointer;
    color        : var(--white);
    transition   : background .2s;
}
.btn-simpan:hover { background: var(--blue-light); }

/* ============================================================
   DIAGRAM
   ============================================================ */
.diagram-section { }
.diagram-title {
    background   : #555;
    color        : var(--white);
    font-size    : 16px;
    font-weight  : 700;
    text-align   : center;
    padding      : 8px 16px;
    border-radius: 8px 8px 0 0;
}
.diagram-container {
    position     : relative;
    width        : 100%;
    border       : 2px solid #555;
    border-top   : none;
    border-radius: 0 0 8px 8px;
    overflow     : hidden;
    background   : #555;
    user-select  : none;
}
.diagram-img {
    width  : 100%;
    height : auto;
    display: block;
}
.cb {
    position      : absolute;
    border        : 2.5px solid rgba(255,255,255,.9);
    border-radius : 5px;
    background    : rgba(255,255,255,.70);
    cursor        : pointer;
    display       : flex;
    align-items   : center;
    justify-content: center;
    font-size     : clamp(8px, 1.1vw, 16px);
    font-weight   : 800;
    z-index       : 10;
    transition    : background .12s, border-color .12s;
    box-shadow    : 0 1px 4px rgba(0,0,0,.45);
    color         : transparent;
}
.cb:hover { border-color: var(--blue-primary); background: rgba(255,255,255,.95); }
.cb-pass {
    background  : rgba(46,125,50,.88) !important;
    border-color: #1B5E20 !important;
    color       : #fff !important;
}
.cb-fail {
    background  : rgba(198,40,40,.88) !important;
    border-color: #7F0000 !important;
    color       : #fff !important;
}

/* ============================================================
   TABLE / HISTORY
   ============================================================ */
.table-custom {
    width          : 100%;
    border-collapse: collapse;
    font-size      : 14px;
}
.table-custom th {
    background  : #F0F4FF;
    color       : var(--blue-primary);
    font-weight : 600;
    padding     : 12px 14px;
    text-align  : left;
    border-bottom: 2px solid var(--border);
    white-space : nowrap;
}
.table-custom td {
    padding    : 11px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table-custom tr:last-child td { border-bottom: none; }
.table-custom tr:hover td { background: var(--gray-bg); }
.badge-pass {
    display      : inline-block;
    padding      : 3px 14px;
    background   : #E8F5E9;
    color        : var(--green-primary);
    border-radius: 20px;
    font-size    : 12px;
    font-weight  : 700;
}
.badge-fail {
    display      : inline-block;
    padding      : 3px 14px;
    background   : #FFEBEE;
    color        : var(--red-primary);
    border-radius: 20px;
    font-size    : 12px;
    font-weight  : 700;
}
.badge-kabin {
    display      : inline-block;
    padding      : 2px 10px;
    background   : var(--blue-bg);
    color        : var(--blue-primary);
    border-radius: 20px;
    font-size    : 12px;
    font-weight  : 600;
}
.badge-bagasi {
    display      : inline-block;
    padding      : 2px 10px;
    background   : #E8F5E9;
    color        : var(--green-primary);
    border-radius: 20px;
    font-size    : 12px;
    font-weight  : 600;
}
.btn-action {
    display      : inline-flex;
    align-items  : center;
    gap          : 5px;
    padding      : 5px 12px;
    border       : 1px solid var(--border);
    border-radius: 6px;
    font-size    : 13px;
    cursor       : pointer;
    background   : var(--white);
    color        : var(--text);
    transition   : background .15s;
    text-decoration: none;
}
.btn-action:hover { background: var(--gray-bg); text-decoration: none; }
.btn-action.danger { color: var(--red-primary); border-color: #FFCDD2; }
.btn-action.danger:hover { background: #FFEBEE; }
.btn-action.primary { color: var(--blue-primary); border-color: #BBDEFB; }
.btn-action.primary:hover { background: var(--blue-bg); }

/* Stat cards */
.stat-card {
    background   : var(--white);
    border-radius: var(--radius);
    box-shadow   : var(--shadow);
    padding      : 20px 24px;
    border-left  : 4px solid var(--blue-primary);
}
.stat-card.green { border-left-color: var(--green-primary); }
.stat-card.red   { border-left-color: var(--red-primary); }
.stat-card.yellow{ border-left-color: #F9A825; }
.stat-label { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.stat-value { font-size: 32px; font-weight: 800; color: var(--text); }

/* Alert */
.alert-custom {
    padding      : 12px 16px;
    border-radius: 8px;
    font-size    : 14px;
    margin-bottom: 16px;
    display      : flex;
    align-items  : center;
    gap          : 10px;
}
.alert-error   { background: #FFEBEE; color: var(--red-primary);   border: 1px solid #FFCDD2; }
.alert-success { background: #E8F5E9; color: var(--green-primary); border: 1px solid #C8E6C9; }
.alert-info    { background: var(--blue-bg); color: var(--blue-primary); border: 1px solid #BBDEFB; }

/* Overlay for mobile sidebar */
.sidebar-overlay {
    display   : none;
    position  : fixed;
    inset     : 0;
    background: rgba(0,0,0,.35);
    z-index   : 99;
}
.sidebar-overlay.active { display: block; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Prevent any body-level horizontal scroll */
html { overflow-x: hidden; }

/* Let flex/grid children shrink below content size */
.main-wrap, .content-area { min-width: 0; overflow-x: hidden; }

/* ── Utility: responsive form grid ── */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 16px;
}

/* ── Utility: responsive filter row ── */
.filter-row {
    display  : flex;
    flex-wrap: wrap;
    gap      : 12px;
    align-items: flex-end;
}
.filter-row > div { flex: 1 1 140px; min-width: 0; }
.filter-row .filter-actions { flex: none; display: flex; gap: 8px; }

/* ── Responsive table – card layout on mobile ── */
@media (max-width: 700px) {
    .table-responsive-card { border-spacing: 0; }
    .table-responsive-card thead { display: none; }
    .table-responsive-card tbody tr {
        display      : block;
        border       : 1px solid var(--border);
        border-radius: 10px;
        margin-bottom: 12px;
        background   : var(--white);
        overflow     : hidden;
    }
    .table-responsive-card tbody td {
        display        : flex;
        justify-content: space-between;
        align-items    : center;
        padding        : 9px 14px;
        border-bottom  : 1px solid #F0F0F0;
        font-size      : 13px;
        gap            : 10px;
        min-height     : 38px;
        flex-wrap      : wrap;
    }
    .table-responsive-card tbody td:last-child { border-bottom: none; }
    .table-responsive-card tbody td::before {
        content       : attr(data-label);
        font-weight   : 700;
        color         : var(--text-muted);
        font-size     : 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-width     : 70px;
        flex-shrink   : 0;
    }
    .table-responsive-card tbody td.td-aksi {
        flex-direction: column;
        align-items   : flex-start;
        gap           : 6px;
    }
    .table-responsive-card tbody td.td-aksi::before { min-width: unset; }
    .table-responsive-card tbody td[data-label=""] { display: none; }
    /* Empty state row */
    .table-responsive-card tbody td[colspan] {
        justify-content: center;
        flex-direction : column;
        text-align     : center;
    }
    .table-responsive-card tbody td[colspan]::before { display: none; }
}

/* ── Tablet & below (900px) ── */
@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .main-wrap {
        margin-left: 0;
    }
    .hamburger { display: block; }
    .content-area { padding: 18px; }
    .top-header { padding: 0 18px; }
    .auth-card { padding: 32px 24px; }
    /* Stat grid: 2 per row on tablet */
    .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Small mobile (576px) ── */
@media (max-width: 576px) {
    .page-title { font-size: 21px; }
    .form-section { padding: 14px; }
    .content-area { padding: 10px; }
    .form-actions { flex-direction: column-reverse; }
    .btn-batal, .btn-simpan { width: 100%; text-align: center; justify-content: center; }
    .check-card { padding: 20px 14px; }
    .cb { font-size: 10px; }

    /* Filter row: stack fully */
    .filter-row > div { flex: 1 1 100%; }
    .filter-row .filter-actions { width: 100%; }
    .filter-row .filter-actions a,
    .filter-row .filter-actions button { flex: 1; text-align: center; justify-content: center; }

    /* Remove min-width from form controls & selects */
    .form-control-custom,
    select.form-control-custom { min-width: 0 !important; width: 100%; }

    /* Stat grid: 2 per row on mobile */
    .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Sig grid: stack on mobile */
    .sig-grid { grid-template-columns: 1fr !important; }

    /* Auth card */
    .auth-card { padding: 24px 16px; }
    .auth-copyright { font-size: 12px; }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    .sidebar, .top-header, .form-actions, .breadcrumb-bar,
    .hamburger, .sidebar-overlay, .no-print { display: none !important; }
    .main-wrap { margin-left: 0 !important; }
    .content-area { padding: 0 !important; }
    body { background: white; }
    .form-section, .card-custom {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }
    .diagram-container { break-inside: avoid; }
    .cb {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .cb-pass { background: #2E7D32 !important; }
    .cb-fail { background: #C62828 !important; }
    .print-header { display: block !important; }
}

.print-header { display: none; }