/* Mobile Panel 1 - Basic Salary Redesign (Compact Inline Layout) */
/* Based on salary_calculator_mockup.html design */

@media (max-width: 768px) {
    /* Font size hierarchy for section titles */
    /* Annual Package - keep original larger size (20px from mockup) */
    .sidebar .input-section:first-child .section-title {
        font-size: 20px !important;
        font-weight: 600 !important;
    }

    /* Basic Salary, Pension, and other section titles - smaller unified size */
    .sidebar .input-section .section-title {
        font-size: 16px !important;
        font-weight: 500 !important;
    }

    /* Deduct Bonus and RSU toggle text - same size as Basic Salary/Pension */
    .bonus-rsu-toggle .toggle-text {
        font-size: 16px !important;
        font-weight: 500 !important;
    }

    /* Basic Salary Section - Inline Layout */
    .sidebar .input-section .basic-toggle {
        display: none !important;
    }

    .sidebar .input-section .basic-input-container {
        padding: 0;
    }

    /* Hide absolute input group completely */
    #absoluteGroup {
        display: none !important;
    }

    /* Restructure percentage group for inline layout */
    #percentGroup {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 4px 0;
    }

    /* Left side - Label and values */
    .percentage-container {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
    }

    /* Values display - percentage and amount on same line */
    .basic-salary-display {
        display: flex !important;
        align-items: baseline !important;
        gap: 8px !important;
        width: 100%;
    }

    /* Percentage display - same size as amount */
    .percentage-display {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #007AFF !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Amount display */
    .basic-amount-display {
        font-size: 14px !important;
        color: #888 !important;
        margin-top: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Right side - Slider */
    .basic-slider-container {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-width: 120px !important;
    }

    /* Compact inline slider */
    .basic-slider {
        width: 120px !important;
        height: 4px !important;
        border-radius: 2px !important;
        background: var(--color-border, #333) !important;
        outline: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        cursor: pointer !important;
        margin: 0 !important;
    }

    .basic-slider::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        background: #007AFF !important;
        cursor: pointer !important;
        border: 2px solid white !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
    }

    .basic-slider::-moz-range-thumb {
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        background: #007AFF !important;
        cursor: pointer !important;
        border: 2px solid white !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
    }

    /* Remove any default slider track styling */
    .basic-slider::-webkit-slider-runnable-track {
        background: transparent !important;
        border: none !important;
    }

    .basic-slider::-moz-range-track {
        background: transparent !important;
        border: none !important;
    }
}