/* Layout Variation System */
.layout-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Test border removed - was causing visual confusion */

.layout-switcher select {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    font-size: 14px;
    min-width: 160px;
}

/* Base improvements for all layouts - UNIVERSAL TABLE FIXES */
body.layout-base {
    line-height: 1.6 !important;
    transition: all 0.3s ease !important;
}

/* Universal table improvements that apply to ALL layouts */
body.layout-base .quote-table {
    font-size: 12px !important;
    table-layout: fixed !important;
    display: table !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

/* Ensure table structure is maintained across browsers */
body.layout-base .quote-table thead {
    display: table-header-group !important;
}

body.layout-base .quote-table tbody {
    display: table-row-group !important;
}

body.layout-base .quote-table tr {
    display: table-row !important;
}

body.layout-base .quote-table th,
body.layout-base .quote-table td {
    display: table-cell !important;
}

body.layout-base .quote-table th,
body.layout-base .quote-table td {
    vertical-align: middle !important;
    transition: all 0.3s ease !important;
    /* Removed overflow:hidden and text-overflow:ellipsis that were breaking table layout */
}

/* Universal column width fixes - ensure ACTION column is visible */
body.layout-base .quote-table colgroup col:nth-child(8) { 
    width: 8% !important; /* ACTION column - make it bigger by default */
}

/* Universal input and select styling */
body.layout-base .quote-table input,
body.layout-base .quote-table select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid #d1d5db !important;
    border-radius: 3px !important;
}

/* Universal button styling for action column */
body.layout-base .quote-table button {
    white-space: nowrap !important;
    /* Removed overflow:hidden and text-overflow:ellipsis for buttons */
    border-radius: 3px !important;
    border: 1px solid #ccc !important;
    background: #f8f9fa !important;
    cursor: pointer !important;
}

body.layout-base .quote-table button:hover {
    background: #e9ecef !important;
}

/* Universal text wrapping for description columns */
body.layout-base .quote-table td:nth-child(2),
body.layout-base .quote-table td:nth-child(3) {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-overflow: initial !important;
}

/* Universal right-align for numeric columns */
body.layout-base .quote-table td:nth-child(5),
body.layout-base .quote-table td:nth-child(6),
body.layout-base .quote-table td:nth-child(7) {
    text-align: right !important;
}

/* Universal header styling */
body.layout-base .quote-table th {
    font-weight: 600 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Universal footer improvements - completely restructure for subtotal positioning */
body.layout-base .section-footer {
    display: grid !important;
    grid-template-columns: 1fr auto !important; /* Button takes available space, subtotal auto-sizes */
    grid-template-areas: "button subtotal" !important;
    align-items: center !important;
    gap: 2rem !important;
    padding: 1rem 1.5rem !important;
    position: relative !important;
    min-height: 70px !important;
    overflow: visible !important;
    background: transparent !important;
}

/* Add Item button positioning in grid */
body.layout-base .add-row-btn {
    grid-area: button !important;
    width: auto !important;
    max-width: 250px !important;
    min-width: 150px !important;
    justify-self: start !important;
}

/* Subtotal positioning in grid - simpler approach */
body.layout-base .subtotal {
    grid-area: subtotal !important;
    justify-self: end !important; /* Align to the right side of grid */
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    color: #000000 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    width: auto !important;
    min-width: fit-content !important;
    text-align: right !important;
    display: block !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(220, 38, 38, 0.2) !important;
    position: relative !important; /* Use normal positioning within grid */
}

/* Ensure subtotal span grows properly and displays full numbers */
body.layout-base .subtotal span {
    display: inline-block !important;
    min-width: fit-content !important;
    width: auto !important; /* Allow span to grow with content */
    overflow: visible !important;
    white-space: nowrap !important;
    font-family: Arial, sans-serif !important; /* Consistent Arial font */
    font-size: 1rem !important;
    letter-spacing: 0.025em !important;
    text-align: right !important;
    direction: ltr !important; /* Ensure left-to-right text direction */
}

/* Fix any potential CSS text-overflow issues */
body.layout-base .subtotal,
body.layout-base .subtotal * {
    text-overflow: clip !important;
    overflow: visible !important;
    max-width: none !important;
    width: auto !important;
}

/* Ensure footer has enough space */
body.layout-base .section-footer {
    min-height: 60px !important;
    flex-wrap: nowrap !important;
}

/* Fix discount input width - increase by 50% */
body.layout-base .discount-input {
    width: 120px !important; /* Increased from 80px (50% increase) */
    min-width: 120px !important;
    max-width: 150px !important;
}

/* Ensure discount input group has enough space */
body.layout-base .discount-input-group {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
}

/* Improve discount section layout */
body.layout-base .discount-section {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex-shrink: 0 !important;
}

/* Add visible background changes for immediate feedback */
body.layout-compact {
    background-color: #fafbfc !important;
}

body.layout-spacious {
    background-color: #f8fafc !important;
}

body.layout-vertical {
    background-color: #f1f5f9 !important;
}

/* Style 1 (formerly Compact Professional) */
body.layout-compact {
    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
}

/* Fix column widths for better readability */
body.layout-compact .quote-table colgroup col:nth-child(1) { width: 6% !important; }   /* CODE - smaller */
body.layout-compact .quote-table colgroup col:nth-child(2) { width: 22% !important; }  /* DESCRIPTION */
body.layout-compact .quote-table colgroup col:nth-child(3) { width: 20% !important; }  /* ITEM NAME */
body.layout-compact .quote-table colgroup col:nth-child(4) { width: 10% !important; }  /* CATEGORY */
body.layout-compact .quote-table colgroup col:nth-child(5) { width: 5% !important; }   /* QTY */
body.layout-compact .quote-table colgroup col:nth-child(6) { width: 10% !important; }  /* UNIT PRICE */
body.layout-compact .quote-table colgroup col:nth-child(7) { width: 10% !important; }  /* TOTAL */
body.layout-compact .quote-table colgroup col:nth-child(8) { width: 7% !important; }   /* ACTION - bigger */

body.layout-compact .quote-table th {
    padding: 8px 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    background: #f1f3f4 !important;
    border-bottom: 2px solid #dadce0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

body.layout-compact .quote-table td {
    padding: 6px 4px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    vertical-align: middle !important;
}

/* Specific styling for different cell types */
body.layout-compact .quote-table td input,
body.layout-compact .quote-table td select {
    font-size: 11px !important;
    padding: 3px 5px !important;
    height: auto !important;
    min-height: 24px !important;
}

/* Action column buttons */
body.layout-compact .quote-table td button {
    font-size: 10px !important;
    padding: 2px 6px !important;
    min-width: auto !important;
}

/* Code column - smaller font */
body.layout-compact .quote-table td:nth-child(1) {
    font-size: 10px !important;
    font-family: Arial, sans-serif !important;
}

/* Description and Item Name - allow wrapping */
body.layout-compact .quote-table td:nth-child(2),
body.layout-compact .quote-table td:nth-child(3) {
    white-space: normal !important;
    word-wrap: break-word !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

/* Numeric columns - right align */
body.layout-compact .quote-table td:nth-child(5),
body.layout-compact .quote-table td:nth-child(6),
body.layout-compact .quote-table td:nth-child(7) {
    text-align: right !important;
    font-family: Arial, sans-serif !important;
    font-size: 11px !important;
}

body.layout-compact .quote-block {
    margin-bottom: 20px !important;
    border-radius: 6px !important;
}

body.layout-compact .quote-block header {
    padding: 12px 16px !important;
    background: #f8f9fa !important;
}

body.layout-compact .quote-block header h3 {
    font-size: 16px !important;
    margin: 0 !important;
}

/* Style 1 - Compact discount field styling */
body.layout-compact .discount-input {
    font-size: 12px !important;
    padding: 0.4rem !important;
}

/* Style 2 (formerly Spacious Modern) */
body.layout-spacious {
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Fix column widths for spacious layout */
body.layout-spacious .quote-table colgroup col:nth-child(1) { width: 7% !important; }   /* CODE */
body.layout-spacious .quote-table colgroup col:nth-child(2) { width: 24% !important; }  /* DESCRIPTION */
body.layout-spacious .quote-table colgroup col:nth-child(3) { width: 22% !important; }  /* ITEM NAME */
body.layout-spacious .quote-table colgroup col:nth-child(4) { width: 12% !important; }  /* CATEGORY */
body.layout-spacious .quote-table colgroup col:nth-child(5) { width: 6% !important; }   /* QTY */
body.layout-spacious .quote-table colgroup col:nth-child(6) { width: 10% !important; }  /* UNIT PRICE */
body.layout-spacious .quote-table colgroup col:nth-child(7) { width: 10% !important; }  /* TOTAL */
body.layout-spacious .quote-table colgroup col:nth-child(8) { width: 9% !important; }   /* ACTION */

body.layout-spacious .quote-table th {
    padding: 12px 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    background: #fafbfc !important;
    border-bottom: 2px solid #e9ecef !important;
    letter-spacing: 0.025em !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

body.layout-spacious .quote-table td {
    padding: 10px 8px !important;
    border-bottom: 1px solid #f1f3f4 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
}

/* Spacious layout specific cell styling */
body.layout-spacious .quote-table td input,
body.layout-spacious .quote-table td select {
    font-size: 12px !important;
    padding: 4px 6px !important;
    min-height: 28px !important;
}

body.layout-spacious .quote-table td:nth-child(2),
body.layout-spacious .quote-table td:nth-child(3) {
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.3 !important;
}

body.layout-spacious .quote-table td:nth-child(5),
body.layout-spacious .quote-table td:nth-child(6),
body.layout-spacious .quote-table td:nth-child(7) {
    text-align: right !important;
    font-family: Arial, sans-serif !important;
}

body.layout-spacious .quote-block {
    margin-bottom: 32px !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

body.layout-spacious .quote-block header {
    padding: 20px 24px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%) !important;
}

body.layout-spacious .quote-block header h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

body.layout-spacious input,
body.layout-spacious select {
    padding: 10px 12px !important;
    border-radius: 6px !important;
    border: 1.5px solid #d1d5db !important;
    font-size: 14px !important;
}

/* Style 2 - Spacious discount field styling */
body.layout-spacious .discount-input {
    font-size: 14px !important;
    padding: 0.6rem !important;
    border-radius: 6px !important;
}

/* Style 3 (formerly Vertical Dense) */
body.layout-vertical {
    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
}

/* Fix column widths for vertical layout */
body.layout-vertical .quote-table colgroup col:nth-child(1) { width: 6% !important; }   /* CODE */
body.layout-vertical .quote-table colgroup col:nth-child(2) { width: 23% !important; }  /* DESCRIPTION */
body.layout-vertical .quote-table colgroup col:nth-child(3) { width: 21% !important; }  /* ITEM NAME */
body.layout-vertical .quote-table colgroup col:nth-child(4) { width: 11% !important; }  /* CATEGORY */
body.layout-vertical .quote-table colgroup col:nth-child(5) { width: 6% !important; }   /* QTY */
body.layout-vertical .quote-table colgroup col:nth-child(6) { width: 11% !important; }  /* UNIT PRICE */
body.layout-vertical .quote-table colgroup col:nth-child(7) { width: 11% !important; }  /* TOTAL */
body.layout-vertical .quote-table colgroup col:nth-child(8) { width: 11% !important; }  /* ACTION */

body.layout-vertical .quote-table {
    border-spacing: 0 2px !important;
    border-collapse: separate !important;
}

body.layout-vertical .quote-table th {
    padding: 10px 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    background: #2563eb !important;
    color: white !important;
    text-align: center !important;
    border: none !important;
    line-height: 1.2 !important;
}

body.layout-vertical .quote-table td {
    padding: 8px 6px !important;
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-left: none !important;
    border-right: none !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    vertical-align: middle !important;
}

/* Vertical layout specific styling */
body.layout-vertical .quote-table td input,
body.layout-vertical .quote-table td select {
    font-size: 11px !important;
    padding: 3px 5px !important;
    min-height: 24px !important;
}

body.layout-vertical .quote-table td:nth-child(2),
body.layout-vertical .quote-table td:nth-child(3) {
    white-space: normal !important;
    word-wrap: break-word !important;
    font-size: 11px !important;
}

body.layout-vertical .quote-table td:nth-child(5),
body.layout-vertical .quote-table td:nth-child(6),
body.layout-vertical .quote-table td:nth-child(7) {
    text-align: right !important;
    font-family: Arial, sans-serif !important;
    font-size: 11px !important;
}

body.layout-vertical .quote-table tbody tr:first-child td {
    border-top: 2px solid #2563eb !important;
}

body.layout-vertical .quote-table tbody tr td:first-child {
    border-left: 2px solid #2563eb !important;
}

body.layout-vertical .quote-table tbody tr td:last-child {
    border-right: 2px solid #2563eb !important;
}

body.layout-vertical .quote-block {
    margin-bottom: 28px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
}

body.layout-vertical .quote-block header {
    padding: 16px 20px !important;
    background: #f3f4f6 !important;
    border-bottom: 2px solid #e5e7eb !important;
}

body.layout-vertical .quote-block header h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 !important;
}

/* Style 3 - Vertical discount field styling */
body.layout-vertical .discount-input {
    font-size: 13px !important;
    padding: 0.5rem !important;
    border: 2px solid #2563eb !important;
    font-weight: 600 !important;
}

body.layout-vertical .discount-input:focus {
    border-color: #1d4ed8 !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
}

/* Responsive adjustments for all layouts */
@media (max-width: 768px) {
    .layout-switcher {
        position: relative;
        top: auto;
        right: auto;
        margin-bottom: 20px;
        width: 100%;
        text-align: center;
    }
    
    .layout-spacious .quote-table th,
    .layout-spacious .quote-table td {
        padding: 12px 8px;
    }
    
    .layout-spacious .quote-block {
        margin-bottom: 20px;
    }
    
    .layout-spacious .quote-block header {
        padding: 16px 20px;
    }
    
    /* Mobile adjustments for subtotal positioning */
    body.layout-base .section-footer {
        padding-right: 5rem !important; /* Less padding on mobile */
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }
    
    body.layout-base .subtotal {
        position: static !important; /* Use normal flow on mobile */
        transform: none !important;
        text-align: right !important;
        order: 2 !important; /* Show after button */
        margin-top: 0.5rem !important;
        padding: 0.5rem !important;
        font-size: 1rem !important;
    }
    
    body.layout-base .add-row-btn {
        order: 1 !important; /* Show before subtotal */
        width: 100% !important;
        max-width: none !important;
    }
}