/* WiFiLinker - Main Stylesheet */

/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
}

/* Glass Effect */
.glass-effect {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

/* QR Code - Hide duplicate (QRCode.js generates both canvas and img) */
#qrcode img {
    display: none;
}

#qrcode canvas {
    display: block;
}

/* ================================
   Print Styles
   ================================ */
@media print {
    /* Hide everything first */
    body,
    body * {
        visibility: hidden;
        margin: 0;
        padding: 0;
    }

    /* Reset page */
    html, body {
        background: white !important;
        width: 100%;
        height: 100%;
    }

    /* Hide non-print elements */
    .no-print,
    header,
    nav,
    footer,
    section:not(#printableArea),
    aside > div:first-child,
    aside > p {
        display: none !important;
    }

    /* Show and style printable area */
    #printableArea,
    #printableArea * {
        visibility: visible;
    }

    #printableArea {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 350px;
        height: auto;
        margin: 0;
        padding: 32px;
        box-shadow: none;
        border: 2px solid #1e293b;
        border-radius: 20px;
        background: white !important;
    }

    /* Hide QR placeholder when printing */
    #qr-placeholder {
        display: none !important;
    }

    /* QR code styling */
    #qrcode {
        opacity: 1 !important;
    }

    /* Show only canvas, hide img (QRCode.js generates both) */
    #qrcode canvas {
        display: block !important;
        margin: 0 auto;
    }

    #qrcode img {
        display: none !important;
    }

    /* Typography adjustments for print */
    #printableArea h2 {
        font-size: 22px !important;
        color: #0f172a !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #display-ssid {
        font-size: 16px !important;
        color: #0f172a !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #display-password {
        font-size: 16px !important;
        color: white !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Network name box */
    #printableArea .bg-slate-50 {
        background: #f8fafc !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Password box - preserve dark background */
    #printableArea .bg-slate-900 {
        background: #0f172a !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* WiFi icon container */
    .wifi-icon-container {
        background: #0f172a !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* QR code border */
    #printableArea .border-4 {
        border-color: #0f172a !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Instructions text */
    #printableArea > p {
        font-size: 10px !important;
        color: #94a3b8 !important;
    }

    /* Watermark */
    .print-watermark {
        font-size: 8px !important;
        color: #cbd5e1 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Page setup for printing */
@page {
    size: A4;
    margin: 15mm;
}