/* ==================================================
   📄 PROPOKIT GENERAL PAGE LAYOUT STYLES
   ================================================== */

/* ==================================================
   MAIN PAGE CONTAINERS
   ================================================== */

/* A4 page (e.g. Company Intro): fixed single-page height */
.a4-page {
    width: 210mm;
    max-width: 210mm;
    height: 297mm;
    padding: -5mm;
    padding-top: 10mm;
    padding-bottom: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background-color: white;
    margin: 30px auto 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    page-break-inside: avoid;
    page-break-after: avoid;
    page-break-before: avoid;
    transform-origin: top center;
}

/* Cover page: #page-content > .container gets fixed height (single page) */
#page-content > .container {
    width: 210mm;
    max-width: 210mm;
    height: 297mm;
    padding: -5mm;
    padding-top: 10mm;
    padding-bottom: 80px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background-color: white;
    margin: 30px auto 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    page-break-inside: avoid;
    page-break-after: avoid;
    page-break-before: avoid;
    transform-origin: top center;
}

/* Products page: exact same size as Cover page (210mm × 297mm) – one page frame */
#page-content > .page-container {
    width: 210mm;
    max-width: 210mm;
    height: 297mm;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    page-break-after: auto;
    overflow: hidden;
}

/* Inner .container: fills page; product list scrolls inside */
#page-content > .page-container > .container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    background: transparent;
    margin: 0 auto;
    padding: 0;
}

/* Main content area layout - scrollable so modal save/close preserves position */
#page-content {
    display: flex;
    justify-content: center;
    padding-top: calc(60px + 20px);
    padding-bottom: 50px;
    margin-left: 0px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Products, Scope of Work, Price Summary: align page to top (same level when switching tabs) */
#page-content:has(.page-container),
#page-content:has(.sow-wrapper),
#page-content:has(.obj-wrapper),
#page-content:has(.ps-wrapper) {
    overflow-x: hidden;
    align-items: flex-start;
}

/* Print: content uses full area inside @page margins */
@media print {
    /* Page setup */
    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    body,
    #page-content {
        justify-content: flex-start !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* All page containers fill the printable area */
    #page-content > .page-container,
    #page-content > .sow-page-container,
    #page-content > .sow-wrapper > .sow-page-container,
    #page-content > .obj-wrapper > .obj-page-container,
    #page-content > .container,
    .a4-page {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        min-height: 100vh !important;
        box-shadow: none !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        page-break-inside: avoid !important;
    }
}

/* ==================================================
   UNIFIED PAGE HEADER ICON/LOGO POSITIONING
   Ensures consistent placement across all pages
   Uses CSS variables from css-variables.css for easy customization
   ================================================== */

/* All page headers - consistent base structure */
#fixed-product-list-header,
.sow-header-block,
.obj-header-block,
.ps-header {
    position: relative !important;
    width: 100% !important;
    min-height: var(--page-header-min-height, 90px) !important;
    padding: var(--page-header-padding, 8px) !important;
    background-color: #ffffff !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* All logo containers - EXACT same positioning */
#fixed-product-list-header .logo-container,
.sow-logo-container,
.obj-logo-container,
.ps-logo-cell {
    display: inline-block !important;
    position: absolute !important;
    top: var(--page-header-logo-top, 8px) !important;
    left: var(--page-header-logo-left, 8px) !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
}

/* All logos - consistent sizing */
#fixed-product-list-header .logo,
.sow-logo,
.obj-logo,
.ps-logo {
    max-width: var(--header-logo-max-width, 140px) !important;
    max-height: var(--header-logo-max-height, 90px) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* All page titles - EXACT same positioning (centered) */
#fixed-product-list-header .header-title-block,
.sow-header-block h3.sow-title,
.obj-header-block h3.obj-title,
.ps-title-cell {
    position: absolute !important;
    top: var(--page-header-title-top, 45px) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
    text-align: center !important;
}

/* All customer name containers - EXACT same positioning (bottom-right) */
#fixed-product-list-header .customer-name-container,
.sow-customer-name-container,
.obj-customer-name-container,
.ps-customer-cell {
    position: absolute !important;
    bottom: var(--page-header-customer-bottom, 4px) !important;
    right: var(--page-header-customer-right, 8px) !important;
    left: auto !important;
    top: auto !important;
    text-align: right !important;
    z-index: 2 !important;
}

/* All "Specially crafted for" text - same style on every page (Quote Summary, SOW, Objectives, Products) */
.ps-customer-cell .ps-customer-name,
.ps-customer-cell #ps-customer-name,
#ps-customer-name {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #333 !important;
    margin: 0 !important;
    display: block !important;
    text-align: right !important;
}

/* All header divider lines - consistent margin to clear logo */
#fixed-product-list-header hr,
.sow-header-block hr,
.obj-header-block hr,
.ps-header hr {
    margin: var(--page-header-hr-margin-top, 100px) 0 0 0 !important;
    border: none !important;
    border-top: 1px solid #dee2e6 !important;
    width: 100% !important;
}

/* ==================================================
   GENERAL IMAGE STYLING
   ================================================== */

/* General image styling for all pages */
img {
    max-width: 100%;
    max-height: none;
    height: auto;
    width: auto;
    page-break-inside: avoid;
    margin: 0 auto;
    display: block;
    object-fit: contain;
    object-position: center;
}

/* General image styling */
img {
    object-fit: cover;
    background-color: transparent !important;
}

/* ==================================================
   CORNER STYLE CONTROLS
   ================================================== */

.corner-style-controls {
    position: relative;
    display: inline-block;
}

.corner-style-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 120px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.corner-style-controls:hover .corner-style-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.corner-style-option {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
}

.corner-style-option:last-child {
    border-bottom: none;
}

.corner-style-option:hover {
    background-color: #f9fafb;
}

.corner-style-option i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

.corner-style-option span {
    font-size: 14px;
    color: #374151;
}

/* ==================================================
   BUTTON CONTAINER STYLING
   ================================================== */

.button-container {
    background: var(--button-bg-color);
    border: 1px solid var(--brand-primary);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    margin-top: -80px;
    margin-bottom: 10px;
    width: 100%;
    background: var(--button-bg-color, white);
    z-index: 1000;
    padding: 20px 0;
    border-radius: var(--corner-radius, 0);
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.button-divider {
    height: 1px;
    background-color: #cccccc;
    margin-top: 30px;
}

.hide-on-modal {
    display: none;
}

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

/* Mobile responsiveness for all pages */
@media (max-width: 768px) {
    .a4-page, .container {
        width: 100%;
        height: auto;
        margin: 10px auto;
        padding: 15mm 5mm;
        box-shadow: none;
    }

    #page-content {
        padding-top: calc(50px + 15px);
        padding-bottom: 40px;
    }
}

@media (max-width: 480px) {
    .a4-page, .container {
        padding: 10mm 3mm;
    }

    #page-content {
        padding-top: calc(40px + 10px);
        padding-bottom: 30px;
    }
}

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

@media print {
    /* Page margins: minimal for maximum content area */
    @page {
        size: A4;
        margin: 5mm; /* Same on all sides - consistent with global */
    }

    /* Content uses full printable area (A4 minus margins) – white bg prevents dark box */
    #page-content {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        background: white !important;
        background-image: none !important;
    }

    /* Single-page views (Cover, Company Intro): fit A4 printable area */
    .a4-page, #page-content > .container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        page-break-after: auto !important;
        page-break-before: avoid !important;
        page-break-inside: avoid !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        background: white !important;
    }

    /* Products page: block layout, no max-height – content flows to page 2, 3, etc. when more items */
    #page-content > .page-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none;
        page-break-after: auto !important;
        page-break-before: avoid !important;
        page-break-inside: auto !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Allow Products page to paginate – content breaks onto next page when it overflows */
    #page-content > .page-container,
    #page-content > .page-container > .container,
    #page-content > .page-container #productList,
    #page-content > .page-container #productList * {
        page-break-inside: auto !important;
    }

    /* Single-page content: avoid breaking inside elements */
    #page-content:not(:has(.page-container)) * {
        page-break-inside: avoid !important;
    }
}

/* PDF single page class - prevents page breaks during PDF generation */
.pdf-single-page {
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
    page-break-before: avoid !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* PDF export clone - off-screen rendering for invisible export */
.pdf-export-clone {
    visibility: visible !important;
    opacity: 1 !important;
}