/* ==================================================
   🌍 PROPOKIT GLOBAL STYLES & LAYOUT
   ================================================== */

/* AI NOTE: This section defines the base styling and CSS custom properties
   that control the entire application's appearance. All other styles inherit from here. */

/* Main body styling with CSS custom properties for theming */
body {
    background-color: #F0F2F5;
    --corner-radius: 0;           /* Default corner radius for elements */
    --corner-radius-image: 0;     /* Default corner radius for images */
}

/* Hide scrollbars globally */
::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: transparent;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ==================================================
   PRINT STYLES
   ================================================== */

/* Print styles */
@media print {
    /* Page margins – minimal margins for maximum content area */
    @page {
        size: A4;
        margin: 5mm; /* Same on all sides */
    }

    /* CRITICAL: Force all colors to print exactly as on screen */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* CRITICAL: Override body visibility: hidden (from FOUC prevention) – nothing prints without this */
    html, body {
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    html, body {
        background-color: white !important;
        background-image: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Prevent dark box on last/second-to-last page – ensure all wrappers are white */
    #main-content-area,
    .main-content,
    main,
    #page-content {
        background-color: white !important;
        background-image: none !important;
    }

    /* Hide all UI elements - header, sidebar, menus, side buttons (clean print) */
    .no-print,
    .no-print-on-paper,
    #top-application-header,
    header,
    #main-sidebar,
    aside,
    .sidebar,
    .floating-buttons,
    .action-fab,
    .vertical-nav-button,
    #productsPrintButton,
    #changeLogoButton,
    #epicAddProductButton,
    #addDividerButton,
    #applyDiscountButton,
    #laborCostButton,
    #adjustTaxButton,
    #applyDownPaymentButton,
    #openFirebaseExplorerModal,
    #cleanProjectButton,
    .company-intro-fab,
    .company-intro-fabs,
    .style-menu,
    .propokit-style-menu,
    .propokit-menu-controls,
    .header-divider,
    .zoom-controls,
    .style-menu-footer,
    #user-profile-menu,
    .auth-section {
        display: none !important;
        visibility: hidden !important;
    }

    /* Ensure modals are visible when printing (if needed) */
    .modal {
        display: none !important; /* Modals should be hidden in print, but accessible when open */
    }

    .modal.show,
    .modal.in {
        display: block !important; /* Show modal if it's open during print */
    }

    .print-only {
        display: block !important;
    }

    /* Let document grow so Products page can flow to multiple printed pages */
    html, body {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* Show only page content – ensure it prints */
    #page-content {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        position: relative !important;
    }
    /* Single-page views (Cover, Company Intro): one page height */
    #page-content:not(:has(.page-container)) {
        height: 100% !important;
    }
    /* Products page: allow content to flow to multiple print pages */
    #page-content:has(.page-container) {
        height: auto !important;
        min-height: auto !important;
    }

    /* Page content containers – use full width inside @page margins */
    #page-content > .container,
    #page-content > .a4-page,
    #page-content > .ps-wrapper,
    #page-content .container,
    #page-content .a4-page,
    #page-content .ps-page {
        display: block !important;
        visibility: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        transform: none !important;
        transform-origin: top center !important;
        position: relative !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Products page: paginate to next page when more items – no max-height */
    #page-content > .page-container,
    #page-content > .page-container > .container {
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        height: auto !important;
        page-break-inside: auto !important;
        display: block !important;
    }

    /* Remove zoom transforms but preserve positioning transforms */
    /* Only remove scale transforms used for zoom, not translate/positioning */
    #page-content .container[style*="scale"],
    #page-content .a4-page[style*="scale"],
    #page-content .page-container[style*="scale"],
    #page-content .ps-page[style*="scale"] {
        transform: none !important;
    }

    /* Preserve positioning for QR codes and other positioned elements */
    .qr-code-display-area,
    .qr-code-wrapper,
    .qr-code-container {
        position: relative !important;
        transform: none !important;
        display: flex !important;
    }

    /* Ensure QR codes maintain their layout in print */
    .qr-code-display-area {
        justify-content: flex-start !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        width: fit-content !important;
        max-width: 100% !important;
    }
}

/* ==================================================
   PDF EXPORT STYLES - Position content higher
   ================================================== */

/* When exporting to PDF, position content with small top margin */
body.pdf-exporting #page-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.pdf-exporting #page-content .container,
body.pdf-exporting #page-content .a4-page,
body.pdf-exporting #page-content .page-container {
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(0) !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 206mm !important; /* A4 width (210mm) minus left/right margins (4mm) */
    max-width: 206mm !important;
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    max-height: 293mm !important; /* A4 height (297mm) minus top/bottom margins (4mm) */
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Hide elements when printing class is added */
body.printing .no-print,
body.printing #top-application-header,
body.printing header,
body.printing #main-sidebar,
body.printing aside,
body.printing .sidebar,
body.printing .floating-buttons,
body.printing .action-fab,
body.printing .company-intro-fab,
body.printing .company-intro-fabs,
body.printing .style-menu,
body.printing .propokit-style-menu,
body.printing .propokit-menu-controls,
body.printing .header-divider,
body.printing .zoom-controls,
body.printing .style-menu-footer,
body.printing #user-profile-menu,
body.printing .auth-section {
    display: none !important;
    visibility: hidden !important;
}

/* Authentication Status Indicator */
.auth-status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    margin-left: 12px;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #856404;
    transition: all 0.3s ease;
}

.auth-status-indicator i {
    font-size: 10px;
}

.auth-status-indicator.firebase-mode {
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 28, 0.3);
    color: #155724;
}

.auth-status-indicator.local-mode {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #856404;
}

.auth-status-indicator.error-mode {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #721c24;
}