/* === NEW PRINT CSS - PAGE-SPECIFIC HANDLING === */

@page {
    size: landscape;
    margin: 0.5cm;
}

@media print {
    /* CRITICAL: Force tables to be visible - FIRST RULE */
    div.table { display: flex !important; visibility: visible !important; opacity: 1 !important; }
    
    /* Hide blueprint grid overlay during printing */
    .grid-overlay { display: none !important; }
    /* Hide per-table chair +/- controls in print */
    .chair-controls { display: none !important; }

    /* Hide edit/resize UI controls in print (custom equipment + room view handles) */
    #layout-canvas .resize-handle,
    #layout-canvas .rotate-handle,
    #layout-canvas .handle,
    #layout-canvas .rotation-connector,
    #layout-canvas .rotation-handle,
    #layout-canvas .ghost-outline {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    /* Remove grid background patterns - ONLY from canvas, not from tables */
    #layout-canvas, #blueprint-canvas {
        background-image: none !important;
        background: transparent !important;
    }

    /* Ensure the printable area is still white (background belongs on container, not the top layer) */
    .canvas-container {
        background: white !important;
    }
    
    /* Hide blueprint size labels from print */
    .blueprint-object-bg .size,
    .blueprint-element .size {
        display: none !important;
    }
    /* --- General Page Layout --- */
    body, .container {
        background-color: white !important;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none !important;
    }
    
    /* Remove all shadows and force black/white colors */
    *, *::before, *::after {
        box-shadow: none !important;
        text-shadow: none !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* Global color override - force text to grayscale but not backgrounds */
    body, p, span, div, h1, h2, h3, h4, h5, h6, label, input, select {
        color: #000 !important;
    }
    

    /* Maintain navigation active link style in print */
    nav li.active a {
        color: #0066cc;
        font-weight: bold;
        border-bottom: 2px solid #0066cc;
    }

    /* --- Canvas Container --- */
    /* Baseline container (no fixed size here) */
    .canvas-container {
        width: 100% !important;
        height: auto !important;
        margin: 0 auto;
        border: none;
        overflow: visible;
        box-sizing: border-box;
    }

    /* Hide UI elements not needed for printing - UNIVERSAL */
    header, footer, nav, .sidebar, .toolbar, .blueprint-controls,
    button:not(.table):not(.table *), .modal, .form-group:not(.print-info), .no-print,
    .notification-container, .notification,
    .timestamp, .page-timestamp, .print-timestamp, .date-time,
    .page-border, .print-border, .page-frame, .outer-border,
    .layout-designer-shell > *:not(.layout-body),
    .layout-body > *:not(.canvas-section):not(.canvas-panel),
    body.page-layout-designer .layout-designer-main > *:not(.canvas-area),
    body.page-layout-designer .canvas-area > *:not(.canvas-section) {
        display: none !important;
    }

    /* Saved Layouts uses .canvas-area too; keep its structure visible in print */
    body.page-saved-layouts .canvas-area > *:not(.canvas-panel) {
        display: none !important;
    }

    .trial-banner {
        display: none !important;
    }
    
    /* LAYOUT PAGE PRINT FIX - Force visibility of all containers */
    body.page-layout-designer .container,
    body.page-layout-designer .layout-designer-main,
    body.page-layout-designer .canvas-area,
    body.page-layout-designer .canvas-section,
    body.page-layout-designer .canvas-container,
    body.page-layout-designer #blueprint-layer,
    body.page-layout-designer #layout-canvas {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Show event info header in print for layout page */
    body.page-layout-designer .canvas-section .event-info-print {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Force blueprint elements visible on layout page */
    body.page-layout-designer .blueprint-room,
    body.page-layout-designer .blueprint-bar,
    body.page-layout-designer .blueprint-door,
    body.page-layout-designer .blueprint-object-bg {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        border: 2px solid #000 !important;
    }
    
    /* SIMPLE TABLE FIX - Force tables to be visible */
    div.table {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        z-index: 1000 !important;
        background: white !important;
        border: 2px solid black !important;
    }

    main {
        width: 100%;
        margin: 0;
        padding: 0; /* maximize printable width */
        box-sizing: border-box;
        display: block !important; /* Override grid layout */
        page-break-inside: avoid;
        page-break-after: avoid;
    }
    
    /* Special handling for saved-layouts page */
    main.page-layout {
        display: block !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
    }
    
    /* Saved Layouts page print styles */
    .saved-layouts-shell {
        display: block !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .saved-layouts-shell > *:not(.saved-canvas) {
        display: none !important;
    }
    
    .saved-canvas {
        display: block !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        min-height: auto !important;
    }
    
    .saved-canvas .canvas-container {
        display: block !important;
        background: white !important;
        border: 1px solid #000 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }
    
    #layout-canvas {
        display: block !important;
        background: transparent !important;
        background-image: none !important;
    }
    
    #blueprint-layer {
        display: block !important;
        z-index: 1 !important; /* Below layout items */
    }
    
    /* Force blueprint elements to have transparent backgrounds but keep borders visible */
    #blueprint-layer > div,
    #blueprint-layer > *,
    .blueprint-element,
    [class^="blueprint-"],
    .blueprint-room,
    .blueprint-bar,
    .blueprint-door,
    .blueprint-wall,
    .blueprint-fixed-table,
    .blueprint-stairs,
    .blueprint-circle,
    .blueprint-label,
    .blueprint-no-layout {
        background-color: transparent !important;
        background: transparent !important;
        visibility: visible !important;
        display: block !important;
    }
    
    /* Ensure room outline border is visible */
    .blueprint-room {
        border: 2px solid #000 !important;
    }
    
    /* Ensure bar and doors are visible with borders */
    .blueprint-bar,
    .blueprint-door {
        border: 2px solid #000 !important;
        display: flex !important;
        visibility: visible !important;
    }
    
    /* Ensure layout items appear above blueprint in print */
    .table, .equipment, .note, .seating-group {
        z-index: 10 !important;
    }

    .main-content {
        width: 100%;
        margin: 0;
        padding: 0;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        page-break-after: avoid !important;
    }
    
    /* Ensure page does not clip content/borders */
    html, body {
        height: auto;
        overflow: visible;
    }

    /* --- Page-Specific Containers --- */
    .layout-container, .blueprint-container {
        display: block !important;
    }
    
    /* Event info print header - show print-only version at top, hide bottom one */
    .event-info-print.print-only {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 1rem !important;
        margin: 0 0 0.15cm 0 !important;
        padding: 0.2cm 0 !important;
        text-align: center;
        border: none !important;
        border-bottom: 1px solid #333 !important;
        border-radius: 0 !important;
        page-break-after: avoid !important;
        background: white !important;
        background-color: white !important;
        font-size: 9pt !important;
    }
    
    .event-info-print.print-only .info-item {
        display: inline !important;
        white-space: nowrap !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
    }
    
    /* Force all event info text to black in print */
    .event-info-print.print-only,
    .event-info-print.print-only *,
    .event-info-print.print-only strong,
    .event-info-print.print-only span,
    .event-info-print.print-only .info-item {
        color: #000 !important;
    }
    
    /* Hide the bottom event info (screen version) in print */
    .event-info-print:not(.print-only) {
        display: none !important;
    }
    
    .event-info-print h2 {
        margin: 0 0 0.15cm 0;
        font-size: 14pt;
        color: #000 !important;
    }
    
    .event-info-print p {
        margin: 0 0 0.1cm 0;
        font-size: 10pt; /* smaller to save space */
        color: #000 !important;
    }
    
    .event-info-print p * {
        color: #000 !important;
    }
    
    /* Event details header */
    @page {
        size: landscape;
        margin: 0.2cm;
    }

    html, body {
        margin: 0 !important;
        padding: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        border: none !important;
        background: white !important;
    }

    .event-details-header {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.3rem !important;
        margin-bottom: 0.2rem !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0.2rem 0 !important;
        background: white !important;
        box-shadow: none !important;
    }
    
    .event-detail {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        font-size: 0.75rem;
    }
    
    .event-detail label {
        font-weight: bold;
    }
    
    .event-detail input,
    .event-detail select {
        border: none;
        background: none;
        padding: 0;
        font-size: 0.8rem;
    }
    
    /* Legacy event info print styles */
    .event-info-print, .blueprint-header-print {
        margin-bottom: 0.5rem;
        border-bottom: 1px solid #333;
        padding-bottom: 0.5rem;
    }

    .event-info-print h2, .blueprint-header-print h2 {
        font-size: 1.2rem;
        margin: 0 0 0.3rem 0;
    }

    .event-info-print p, .blueprint-header-print p {
        font-size: 0.9rem;
        margin: 0.15rem 0;
    }

    /* --- Canvas and Layout Area --- */
    .canvas-section {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0.2cm !important;
        border: none !important;
        border-radius: 0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        page-break-after: avoid !important;
        page-break-before: avoid !important;
        overflow: visible !important;
        box-sizing: border-box;
        box-shadow: none !important;
        background: transparent !important;
    }
    
    /* Hide quick tips and other content after canvas */
    .canvas-section ~ *,
    .quick-tips {
        display: none !important;
    }

    /* === PAGE-SPECIFIC: SAVED LAYOUTS PAGE === */
    body.page-saved-layouts .canvas-container {
        width: 85% !important;
        max-width: none !important;
        aspect-ratio: 1000 / 700 !important;
        height: auto !important;
        max-height: 78vh !important;
        margin: 0 auto !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        position: relative !important;
        border: none !important;
        background: white !important;
        overflow: visible !important;
        box-sizing: content-box !important;
    }
    
    /* === PAGE-SPECIFIC: LAYOUT DESIGNER PAGE === */
    body.page-layout-designer .canvas-container {
        width: 85% !important;
        max-width: none !important;
        aspect-ratio: 1000 / 700 !important;
        height: auto !important;
        max-height: 78vh !important;
        margin: 0 auto !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        position: relative !important;
        border: none !important;
        background: white !important;
        overflow: visible !important;
        box-sizing: content-box !important;
    }
    
    /* Scale canvas layers by 90% and add border directly to canvas */
    body.page-saved-layouts #layout-canvas,
    body.page-saved-layouts #blueprint-canvas,
    body.page-layout-designer #layout-canvas,
    body.page-layout-designer #blueprint-canvas {
        overflow: visible !important;
        transform: scale(0.9) !important;
        transform-origin: top left !important;
        border: 2px solid #000 !important;
        box-sizing: border-box !important;
    }
    
    body.page-saved-layouts #blueprint-layer,
    body.page-layout-designer #blueprint-layer {
        overflow: visible !important;
        transform: scale(0.9) !important;
        transform-origin: top left !important;
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 1000px !important;
        height: 700px !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }
    
    /* Ensure all blueprint children are visible in print */
    body.page-saved-layouts #blueprint-layer > *,
    body.page-layout-designer #blueprint-layer > *,
    .blueprint-object-bg,
    [class*="bp-bg-"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        border: 2px solid #000 !important;
        background: transparent !important;
    }
    
    /* Room outline - target by class */
    .bp-bg-room,
    .blueprint-object-bg.bp-bg-room {
        border: 2px solid #000 !important;
        background: transparent !important;
    }
    
    /* Bar styling */
    .bp-bg-bar,
    .blueprint-object-bg.bp-bg-bar {
        border: 2px solid #000 !important;
        background: #fff !important;
    }
    
    /* Door styling */
    .bp-bg-door,
    .blueprint-object-bg.bp-bg-door {
        border: 2px solid #000 !important;
        background: #fff !important;
    }
    
    /* === DEBUG MODE - All debug features disabled === */
    /* Debug version number removed from print output */
    
    /* Yellow debug label commented out */
    /*
    body.page-saved-layouts .canvas-container::before,
    body.page-layout-designer .canvas-container::before {
        content: "Canvas: 85% width, 78vh max-height | Scale: 0.9 (90%) | Box-sizing: content-box | v12.0" !important;
        position: absolute !important;
        top: -30px !important;
        left: 0 !important;
        background: yellow !important;
        color: black !important;
        padding: 5px 10px !important;
        font-size: 10pt !important;
        font-weight: bold !important;
        z-index: 10000 !important;
        border: 2px solid red !important;
    }
    */
    
    /* Debug outlines commented out - keeping version number only */
    /*
    body.page-saved-layouts .canvas-section::after,
    body.page-layout-designer .canvas-section::after {
        content: "Canvas Section: Padding 0.2cm | Page margin: 0.5cm" !important;
        position: absolute !important;
        bottom: -30px !important;
        left: 0 !important;
        background: lime !important;
        color: black !important;
        padding: 5px 10px !important;
        font-size: 10pt !important;
        font-weight: bold !important;
        z-index: 10000 !important;
        border: 2px solid blue !important;
    }
    
    body.page-saved-layouts .canvas-container,
    body.page-layout-designer .canvas-container {
        outline: 3px dashed red !important;
        outline-offset: -3px !important;
    }
    
    body.page-saved-layouts .canvas-section,
    body.page-layout-designer .canvas-section {
        outline: 3px dashed blue !important;
        outline-offset: -3px !important;
    }
    */

    .canvas-panel {
        position: relative !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Saved Layouts New Structure Support */
    .main-layout,
    .content-area,
    .canvas-area {
        display: block !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        box-shadow: none !important;
    }

    /* UNIVERSAL STRUCTURE - Works for both Layout Designer and Saved Layouts */
    .layout-designer-shell,
    .saved-layouts-shell,
    .layout-body,
    .saved-canvas,
    .canvas-area {
        display: block !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .event-details-header {
        display: none !important;
    }

    /* Show canvas section and event info on both pages */
    .canvas-section,
    /* Force canvas-panel to use flexbox for print ordering */
    .canvas-panel {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }
    
    .event-info-print {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        order: -1 !important; /* Move to top in print */
        margin: 0 0 0.15cm 0 !important;
        padding: 0.2cm 0 !important;
        text-align: center !important;
        border: none !important;
        border-bottom: 1px solid #333 !important;
        border-radius: 0 !important;
        background: white !important;
    }
    
    .event-info-print .info-item {
        background: transparent !important;
        border: none !important;
        padding: 0 0.5rem !important;
    }

    footer,
    .site-footer,
    .page-footer,
    .footer,
    #footer,
    .bottom-strip,
    .navbar-bottom,
    .breadcrumb,
    .bread-crumb,
    .site-info,
    .page-info,
    .nav-bottom,
    .footer-links,
    .print-footer,
    .page-bottom,
    .legal-links,
    .utility-bar,
    .navigation-bar-bottom,
    .powered-by,
    .site-credit {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    /* Border overlay removed - using direct border on container instead */

    /* Scale content layers to match container */
    #layout-canvas, #blueprint-canvas, #blueprint-layer {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 1000px !important; height: 700px !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        transform-origin: top left !important;
        transform: none !important;
    }

    /* --- PRINT FIXES --- */
    
    /* Make sure the main canvas is visible */
    #layout-canvas, #blueprint-canvas, #blueprint-layer {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important; /* Remove scaling to match screen size */
        transform-origin: top left !important;
    }

    /* Blueprint layer BELOW tables */
    #blueprint-layer {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;     /* low */
        background: transparent !important;
        overflow: visible !important;
    }

    /* Tables ABOVE blueprint */
    div.table {
        position: absolute !important;
        z-index: 10 !important;    /* higher */
        border: 2px solid #000 !important;
        background: #fff !important;
        color: #000 !important;
        display: flex !important;          /* flexbox to center */
        align-items: center !important;    /* vertical center */
        justify-content: center !important;/* horizontal center */
        text-align: center !important;
        transform-origin: center center !important;
    }

    /* Round tables keep text centered */
    div.table.round {
        border-radius: 50% !important;
    }

    /* Blueprint objects - proper styling */
    #blueprint-layer .blueprint-wall,
    #blueprint-layer [class*="blueprint-wall"] {
        background: #000 !important;  /* walls are black */
        color: #fff !important;
        border: 1px solid #000 !important;
        z-index: 1 !important;
    }
    
    #blueprint-layer .blueprint-door,
    #blueprint-layer [class*="blueprint-door"] {
        background: #fff !important;  /* doors are white */
        color: #000 !important;
        border: 2px solid #000 !important;
        z-index: 1 !important;
    }
    
    #blueprint-layer .blueprint-stairs,
    #blueprint-layer [class*="blueprint-stairs"] {
        background: #fff !important;  /* stairs are white */
        color: #000 !important;
        border: 1px solid #000 !important;
        z-index: 1 !important;
    }
    
    #blueprint-layer .blueprint-bar,
    #blueprint-layer [class*="blueprint-bar"] {
        background: #fff !important;  /* bars are white */
        color: #000 !important;
        border: 1px solid #000 !important;
        z-index: 1 !important;
    }
    
    #blueprint-layer .blueprint-fixed-table,
    #blueprint-layer [class*="blueprint-fixed-table"] {
        background: #fff !important;  /* fixed tables are white */
        color: #000 !important;
        border: 2px solid #000 !important;
        z-index: 1 !important;
    }

    /* Labels inside blueprint stay visible */
    #blueprint-layer .blueprint-label,
    #blueprint-layer [class*="blueprint-label"] {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #000 !important;
        z-index: 2 !important;
    }

    .canvas-placeholder {
        display: none !important;
    }

    /* --- Object Styles - Force Black and White --- */
    .table, .equipment, .note {
        border-color: #000 !important;
        color: #000 !important;
        background-color: white !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    /* Force all blueprint elements to have transparent backgrounds so layout items show through */
    .blueprint-object-bg { 
        opacity: 1 !important; 
        border: 2px solid #000 !important; 
        background: transparent !important;
        background-color: transparent !important;
        display: block !important;
        visibility: visible !important;
        z-index: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Specific blueprint element overrides - PRINT ONLY */
    .blueprint-wall, [class*="blueprint-wall"] {
        background-color: #000 !important;
        border-color: #000 !important;
        color: white !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
    }
    
    .blueprint-door, [class*="blueprint-door"] {
        background-color: white !important;
        border: 2px solid #000 !important;
        color: #000 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
    }
    
    .blueprint-fixed-table, [class*="blueprint-fixed-table"] {
        background-color: white !important;
        border: 2px solid #000 !important;
        color: #000 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
    }
    
    .blueprint-no-layout, [class*="blueprint-no-layout"] {
        background-color: #f0f0f0 !important;
        border: 2px solid #000 !important;
        color: #000 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
    }
    
    .blueprint-stairs, [class*="blueprint-stairs"],
    .blueprint-bar, [class*="blueprint-bar"],
    .blueprint-label, [class*="blueprint-label"] {
        background-color: white !important;
        border: 2px solid #000 !important;
        color: #000 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
    }
    
    /* Equipment and notes above blueprint but below tables */
    .equipment,
    .note {
        z-index: 5 !important;
    }
    
    /* Preserve round table styling in print */
    .table.round,
    .table[style*="border-radius: 50%"] {
        border-radius: 50% !important;
    }
    
    /* Force labels/text to print crisp black and ensure visibility */
    .table-size, .table-chairs,
    .object-label, .blueprint-object-bg .label,
    .equipment-name, .equipment-size,
    .note { 
        color: #000 !important; 
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* SIMPLE TABLE CONTENT */
    div.table * {
        color: black !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Hide size badges in print (avoid numbers like 10 on walls) */
    .blueprint-object-bg .size { display: none !important; }
    
    /* CRITICAL: Force canvas-container to show border as room outline */
    .canvas-container {
        border: 2px solid #000 !important;
        position: relative !important;
        background: white !important;
    }
    
    /* Force blueprint layer visible */
    #blueprint-layer,
    .blueprint-layer {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
        overflow: visible !important;
    }
    
    /* Force all blueprint children visible with borders */
    #blueprint-layer > div,
    .blueprint-layer > div,
    .blueprint-object-bg {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        border: 2px solid #000 !important;
        background: transparent !important;
    }
    
    /* Bar and door should have white background */
    .bp-bg-bar,
    .bp-bg-door,
    [class*="bp-bg-bar"],
    [class*="bp-bg-door"] {
        background: white !important;
        border: 2px solid #000 !important;
    }
}