:root{--ss-navy:#0B2D5B;--ss-deep:#071E3A;--ss-yellow:#FFC107;--ss-green:#00B050;--ss-ink:#10233b;--ss-muted:#64748b;--ss-bg:#f4f7fb}
.offline-page{background:var(--ss-bg);min-height:70vh;padding:42px 0 80px}.offline-shell{max-width:1180px;margin:auto;padding:0 18px}.offline-hero{background:linear-gradient(135deg,var(--ss-deep),var(--ss-navy));border-radius:24px;padding:38px;color:#fff;position:relative;overflow:hidden;box-shadow:0 20px 50px #071e3a22}.offline-hero:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-100px;top:-100px;background:#ffc10722}.offline-hero h1{font-size:clamp(32px,5vw,58px);line-height:1.04;margin:10px 0 14px}.offline-hero p{max-width:760px;color:#dbe7f5;line-height:1.7}.offline-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;margin-top:22px}.offline-card{background:#fff;border:1px solid #dce6f0;border-radius:20px;padding:24px;box-shadow:0 12px 35px #0b2d5b0d}.offline-card h2{color:var(--ss-navy);margin:0 0 6px}.offline-form{display:grid;gap:15px}.offline-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.offline-form label{display:grid;gap:7px;font-weight:700;font-size:14px;color:var(--ss-ink)}.offline-form input,.offline-form select{width:100%;box-sizing:border-box;border:1px solid #cbd8e6;border-radius:12px;padding:13px 14px;font:inherit;background:#fff}.date-row{display:flex;gap:8px;align-items:center}.date-row button{border:1px solid #d2dfeb;background:#f7f9fc;border-radius:10px;padding:9px 11px;cursor:pointer}.batch-grid{display:grid;gap:10px;margin-top:8px}.batch-card{border:1px solid #dce5ee;border-radius:15px;padding:15px;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:8px;background:#fff}.batch-card.active{border:2px solid var(--ss-yellow);box-shadow:0 0 0 3px #ffc10722}.batch-card.full{opacity:.52;cursor:not-allowed}.batch-card strong{color:var(--ss-navy)}.batch-meta{font-size:12px;color:var(--ss-muted)}.seat-pill{align-self:center;border-radius:999px;padding:7px 10px;background:#eef8f1;color:#067b3d;font-size:12px;font-weight:800}.seat-pill.full{background:#fff1f1;color:#b42318}.offline-submit{border:0;background:linear-gradient(135deg,#ffc107,#ffca28);color:#071e3a;font-weight:900;border-radius:13px;padding:15px 18px;cursor:pointer;font-size:15px}.offline-message{min-height:22px;font-size:14px}.offline-message.error{color:#b42318}.offline-message.ok{color:#087f46}.offline-success{text-align:center}.appointment{font-size:38px;letter-spacing:8px;color:var(--ss-navy);font-weight:900;background:#fff8d8;border:1px dashed #e0ad00;padding:15px;border-radius:14px;margin:14px 0}.qr-box{display:grid;place-items:center;margin:15px auto}.qr-box img{max-width:270px;width:100%;border:10px solid #fff;box-shadow:0 8px 30px #0b2d5b18}.notice{padding:13px 15px;border-radius:12px;background:#f5f9ff;border:1px solid #dce8f5;color:#334e68;font-size:13px;line-height:1.6}.steps{display:grid;gap:12px}.step{display:flex;gap:12px;align-items:flex-start}.step b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ss-navy);color:#fff;flex:0 0 30px}.staff-page{background:#eef3f8}.staff-top{display:flex;justify-content:space-between;gap:15px;align-items:center;flex-wrap:wrap}.staff-actions{display:flex;gap:9px;flex-wrap:wrap}.staff-btn{border:0;border-radius:11px;padding:11px 14px;font-weight:800;cursor:pointer;background:var(--ss-yellow);color:#071e3a}.staff-btn.dark{background:var(--ss-navy);color:#fff}.staff-btn.ghost{background:#fff;border:1px solid #ccd9e7}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}.metric{background:#fff;border:1px solid #dce5ee;border-radius:16px;padding:17px}.metric span{display:block;color:var(--ss-muted);font-size:12px}.metric strong{font-size:28px;color:var(--ss-navy)}.staff-table{width:100%;border-collapse:collapse}.staff-table th,.staff-table td{padding:11px;border-bottom:1px solid #e6edf3;text-align:left;font-size:13px}.staff-table th{color:#60758a;background:#f8fafc}.status{display:inline-flex;padding:5px 8px;border-radius:999px;background:#eef2f7;font-size:11px;font-weight:800}.status.attended{background:#e8f8ef;color:#087f46}.status.booked{background:#fff7d6;color:#806000}.scan-box{display:grid;grid-template-columns:1fr auto;gap:10px}.scan-box input{padding:13px;border:1px solid #cbd8e6;border-radius:12px}.student-booking{display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:center;padding:15px;border:1px solid #dce5ee;border-radius:15px;margin:10px 0}.student-booking .appt{font-weight:900;color:var(--ss-navy);letter-spacing:3px}.small{font-size:12px;color:var(--ss-muted)}@media(max-width:800px){.offline-grid{grid-template-columns:1fr}.offline-form-grid{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr 1fr}.student-booking{grid-template-columns:1fr}.offline-hero{padding:28px 22px}}@media(max-width:480px){.metric-grid{grid-template-columns:1fr}.offline-page{padding-top:22px}.offline-card{padding:18px}}

/* ==========================================================
   STOCKSKILL ATTENDANCE DETAILS VISIBILITY FIX
   ========================================================== */

#bookingCard {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}

#bookingCard .attendance-booking-card {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;

    box-sizing: border-box !important;
    position: relative !important;

    background: #F8FBFF !important;
    color: #0B2D5B !important;

    border: 1px solid #D7E3F1 !important;
    border-radius: 18px !important;

    padding: 24px !important;
    margin: 0 !important;

    visibility: visible !important;
    opacity: 1 !important;
}

#bookingCard .attendance-booking-card h3 {
    display: block !important;
    color: #0B2D5B !important;
    font-size: 22px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#bookingCard .attendance-booking-card p {
    display: block !important;
    color: #0B2D5B !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#bookingCard .attendance-booking-card p strong {
    color: #0B2D5B !important;
    font-weight: 800 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#bookingCard .attendance-booking-card .status {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    min-height: 24px !important;

    margin-top: 14px !important;
    padding: 4px 10px !important;

    visibility: visible !important;
    opacity: 1 !important;
}

#bookingCard .attendance-booking-card .attendance-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin-top: 18px !important;
    overflow: visible !important;
}

#bookingCard .attendance-booking-card .attendance-actions button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;

    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 768px) {

    #bookingCard .attendance-booking-card {
        padding: 18px !important;
        border-radius: 15px !important;
    }

    #bookingCard .attendance-booking-card h3 {
        font-size: 20px !important;
    }

    #bookingCard .attendance-booking-card p {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    #bookingCard .attendance-booking-card .attendance-actions {
        flex-direction: column !important;
    }

    #bookingCard .attendance-booking-card .attendance-actions button {
        width: 100% !important;
    }
}


/* ==========================================================
   STOCKSKILL ATTENDANCE BOOKING DETAILS FIX V16
   Appointment ID lookup text visibility
   ========================================================== */

#bookingCard {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
}

#bookingCard > *,
#bookingCard .offline-card,
#bookingCard .attendance-booking-card,
#bookingCard .booking-card {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;

    color: #0B2D5B !important;
    -webkit-text-fill-color: #0B2D5B !important;
}

/* FORCE ALL INFORMATION TEXT */
#bookingCard h1,
#bookingCard h2,
#bookingCard h3,
#bookingCard h4,
#bookingCard h5,
#bookingCard p,
#bookingCard span,
#bookingCard label,
#bookingCard strong,
#bookingCard b,
#bookingCard div {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;

    color: #0B2D5B !important;
    -webkit-text-fill-color: #0B2D5B !important;
}

/* Student name */
#bookingCard h3 {
    display: block !important;

    color: #0B2D5B !important;
    -webkit-text-fill-color: #0B2D5B !important;

    font-size: 24px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;

    margin: 0 0 14px !important;
    padding: 0 !important;

    height: auto !important;
    max-height: none !important;

    overflow: visible !important;
}

/* Student information */
#bookingCard p {
    display: block !important;

    color: #0B2D5B !important;
    -webkit-text-fill-color: #0B2D5B !important;

    font-size: 15px !important;
    line-height: 1.8 !important;

    margin: 0 !important;
    padding: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
    white-space: normal !important;
}

/* Labels */
#bookingCard p strong,
#bookingCard p b {
    color: #0B2D5B !important;
    -webkit-text-fill-color: #0B2D5B !important;
    font-weight: 800 !important;
}

/* Status badge keeps its own status color */
#bookingCard .status {
    display: inline-flex !important;

    width: auto !important;
    height: auto !important;

    opacity: 1 !important;
    visibility: visible !important;

    -webkit-text-fill-color: currentColor !important;

    margin-top: 14px !important;
    padding: 4px 10px !important;
}

/* Confirmation / notice box */
#bookingCard .notice {
    display: block !important;

    color: #34506F !important;
    -webkit-text-fill-color: #34506F !important;

    background: #F4F8FC !important;

    opacity: 1 !important;
    visibility: visible !important;

    height: auto !important;
    max-height: none !important;

    overflow: visible !important;

    line-height: 1.6 !important;
}

/* Buttons */
#bookingCard button {
    opacity: 1 !important;
    visibility: visible !important;

    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;

    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;

    overflow: visible !important;
}

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

    #bookingCard h3 {
        font-size: 21px !important;
    }

    #bookingCard p {
        font-size: 14px !important;
        line-height: 1.75 !important;
    }
}