/* Compact & Responsive Aesthetics */
:root {
    --brand-color: #2b6cb0;
    --brand-hover: #2c5282;
    --border-soft: #cbd5e1;
}

/* Subtle modernizing of existing compact inputs */
input[type="text"], input[type="number"], select {
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

input[type="text"]:focus, input[type="number"]:focus, select:focus {
    outline: none;
    border-color: var(--brand-color);
    box-shadow: 0 0 0 2px rgba(43, 108, 176, 0.2);
}

/* Button enhancements without changing their compact size */
button {
    border-radius: 4px;
    transition: transform 0.1s, box-shadow 0.15s;
}
button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Modal and dialog subtle shadow upgrade */
.modal-content {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 992px) {
    .container {
        padding: 10px !important;
    }
}

@media (max-width: 768px) {
    /* Global safe area for FAB */
    body {
        padding-bottom: 80px !important;
    }

    /* Redundant Action Buttons Hide */
    .redundant-action-btn { 
        display: none !important; 
    }
    .hide-on-mobile { 
        display: none !important; 
    }

    /* Base layout handling */
    .control-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    
    .control-row > div {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
    }
    
    /* 1. Top Search & Filter Area (3x3 Grid) */
    
    #left-group-filters .control-group {
        width: auto !important;
        margin: 0 !important;
    }
    #left-group-filters input, #left-group-filters select, #left-group-filters button {
        width: 100% !important;
        font-size: 11px !important;
        padding: 4px 2px !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
    
    /* Hide labels in left filters */
    #left-group-filters .control-group label {
        display: none !important;
    }
    
    /* Mobile Row 2 Grid (Category, Cert, Agent Combo) */
    #mobile-row-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 2fr !important;
        gap: 4px !important;
        width: 100% !important;
        margin-top: 4px !important;
    }
    #mobile-row-2 .control-group label {
        display: none !important;
    }
    #mobile-row-2 input, #mobile-row-2 select {
        width: 100% !important;
        font-size: 11px !important;
        padding: 4px 2px !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
    
    /* Agent Search Combo (Input + 2 Buttons) styling on mobile */
    #agentSearchCombo {
        display: flex !important;
        flex-direction: row !important;
        gap: 2px !important;
        width: 100% !important;
        align-items: stretch !important;
    }
    #agentSearchCombo .agent-input-group {
        flex: 1 !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    #agentSearchCombo .agent-btn-group {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
    #agentSearchCombo button {
        padding: 4px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
        height: 100% !important;
        min-width: 0 !important;
    }

    /* 2. Core Price Adjustment Panels */
    #price-panels-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    #price-panels-container .parameter-section-wrapper {
        width: 49% !important;
        flex: 1 !important;
        min-width: 0 !important; /* prevent overflow */
    }
    /* fix squished form controls */
    #price-panels-container .settings-content {
        display: grid !important;
        grid-template-columns: 30% 35% 35% !important;
        gap: 6px 2px !important;
        padding: 6px 2px !important;
        align-items: center !important;
    }
    #price-panels-container .settings-content h4 {
        font-size: 10px !important;
        padding: 0 !important;
    }
    #price-panels-container .settings-content label {
        font-size: 9px !important;
        padding: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #price-panels-container input[type="number"] {
        min-width: 0 !important;
        width: 100% !important;
        font-size: 10px !important;
        padding: 2px !important;
    }
    .sp-rule-header-label { font-size: 9px !important; }

    /* 4. Bottom Stats & Multi-select */
    .status-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 8px !important;
        width: 100% !important;
        background-color: #f8f9fa !important;
        border-radius: 6px !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }
    .status-bar::-webkit-scrollbar {
        display: none !important;
    }
    .status-bar * {
        white-space: nowrap !important;
        font-size: 12px !important;
    }
    .status-bar input[type="radio"], .status-bar input[type="checkbox"] {
        transform: scale(0.85);
        margin: 0 2px !important;
    }
    #topPackingFeeInput {
        width: 24px !important;
        padding: 0 !important;
    }
    .packing-label {
        font-size: 11px !important;
    }

    .optional-columns {
        gap: 6px !important;
        padding: 4px !important;
    }
    .optional-columns-checkboxes {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        align-items: center !important;
        overflow-x: auto !important;
    }
    .optional-columns-checkboxes > span {
        font-size: 10px !important;
        margin-right: 2px !important;
    }
    .optional-columns-checkboxes .checkbox-group {
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 1px !important;
    }
    .optional-columns-checkboxes .checkbox-group label {
        font-size: 10px !important;
        white-space: nowrap !important;
    }
    .optional-columns-checkboxes .checkbox-group input[type="checkbox"] {
        width: 11px !important;
        height: 11px !important;
        margin: 0 !important;
    }
    .show-on-mobile-inline {
        display: inline !important;
    }
    
    .dev-module {
        background-color: #e2e8f0 !important;
        border-radius: 4px !important;
        padding: 2px 6px !important;
        gap: 6px !important;
    }

    /* Document Headers */
    .company-header .company-name {
        font-size: 14px !important;
        margin-bottom: 2px !important;
    }
    .company-header .company-subtitle {
        display: none !important;
    }
    .company-header .quotation-info {
        font-size: 11px !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    /* Table horizontal scrolling for mobile */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-top: 10px;
        border-radius: 6px;
    }

    /* Status bar single-line logic */
    .desktop-text { display: none !important; }
    .mobile-text { display: inline !important; font-size: 11px !important; }
    .status-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        gap: 4px !important;
        justify-content: flex-start !important;
    }
    .status-bar .client-type-toggle {
        gap: 2px !important;
        margin-right: 4px !important;
    }
    .status-bar label {
        gap: 1px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }
    #topPackingFeeInput {
        width: 22px !important;
        height: 16px !important;
        font-size: 10px !important;
        padding: 0 !important;
    }
    #showAllWrap {
        margin-left: 2px !important;
        gap: 1px !important;
    }


    .styled-group {
        padding: 2px 6px !important;
        border-radius: 4px !important;
        gap: 4px !important;
    }


    /* Match font sizes on mobile for all styled groups and dev module */
    .styled-group label, 
    .styled-group input, 
    .styled-group span,
    .dev-module label, 
    .dev-module input, 
    .dev-module {
        font-size: 11px !important;
    }
    
    /* Make sure checkboxes are appropriately scaled */
    .styled-group input[type="checkbox"], 
    .dev-module input[type="checkbox"] {
        transform: scale(0.85);
        margin-right: 2px !important;
    }
    
    /* Specific adjustment for debug module inputs */
    #randomProductInput {
        width: 35px !important;
        height: 16px !important;
        font-size: 10px !important;
        padding: 0 2px !important;
    }


    /* Dev module absolute positioning on mobile */
    
    
    
    /* Hide randomProductContainer by default on mobile, show when debug is checked */
    #randomProductContainer {
        display: none !important;
    }
    .dev-module:has(#debugModeCheckbox:checked) #randomProductContainer {
        display: inline-flex !important;
    }


    /* 45% widths for specific inputs on mobile */
    #categoryGroup, #certGroup, .agent-input-group {
        width: 45% !important;
        flex: 0 0 45% !important;
    }
    #categoryFilterInput, #certificateSelect, #countryInput {
        width: 100% !important;
    }


    /* Make ALL and Cert inputs wider and share a line with same gap */
    

    /* Hide Country input and Search button on mobile */
    .agent-input-group:has(#countryInput),
    .agent-btn-group:has(#searchCountryBtn) {
        display: none !important;
    }


    /* --- Mobile Unified Top Filters Grid --- */
    #topFiltersRow {
        display: grid !important;
        grid-template-columns: 1fr 1fr 2fr !important;
        gap: 6px 4px !important;
        width: 100% !important;
    }
    #topFiltersRow > .desktop-row-1,
    #topFiltersRow > .desktop-row-2 {
        display: contents !important;
    }
    #left-group-filters .control-group,
    #categoryGroup,
    #certGroup {
        width: 100% !important;
        flex: none !important;
        margin: 0 !important;
    }
    #categoryGroup select, 
    #certGroup select {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Third column container left align */
    #agentSearchCombo {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }

    /* --- Mobile Panels --- */
    #price-panels-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }
    #price-panels-container .parameter-section-wrapper {
        width: 49% !important;
        flex: 1 !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
        font-size: 13px !important;
        padding: 4px 0 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

}