/* Half-screen Optimization (Windows Key + Arrow) */
/* Targets viewports that are narrower than full desktop but wider than mobile */
@media (max-width: 1400px) and (min-width: 1025px) {

    /* 1. Sidebar Adjustment - COLLAPSED BY DEFAULT */
    .sidebar,
    nav.sidebar {
        width: 80px !important;
        overflow: hidden !important;
        transition: width 0.3s ease !important;
        /* Smooth expansion */
        z-index: 2000 !important;
        /* Ensure it stays above */
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    }

    /* 2. HOVER STATE - EXPAND TO SHOW TEXT */
    .sidebar:hover,
    nav.sidebar:hover {
        width: 260px !important;
        /* Expand to full width */
    }

    /* ------- DEFAULT STATE (Collapsed) ------- */

    /* Hide Text Content initially */
    .logo-text,
    .brand-title,
    .brand-subtitle,
    .user-info {
        display: none !important;
    }

    .nav-link span {
        display: none !important;
    }

    /* Center Alignments initially */
    .logo {
        justify-content: center !important;
        padding: 1.5rem 0 !important;
    }

    .logo svg {
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
    }

    .nav-link {
        justify-content: center !important;
        padding: 1rem 0 !important;
    }

    .nav-link svg {
        margin-right: 0 !important;
        width: 24px !important;
        height: 24px !important;
    }

    .user-profile {
        justify-content: center !important;
        padding: 1rem 0 !important;
    }

    .avatar {
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    /* ------- HOVER STATE (Expanded) overrides ------- */

    /* Show Text Content on Hover */
    .sidebar:hover .logo-text {
        display: flex !important;
        /* Restore flex column layout */
        margin-left: 10px !important;
    }

    .sidebar:hover .brand-title,
    .sidebar:hover .brand-subtitle,
    .sidebar:hover .user-info {
        display: block !important;
    }

    .sidebar:hover .nav-link span {
        display: inline-block !important;
        white-space: nowrap !important;
        /* Prevent text wrapping during anim */
    }

    /* Restore Alignments on Hover */
    .sidebar:hover .logo {
        justify-content: flex-start !important;
        padding: 1.5rem !important;
    }

    .sidebar:hover .logo svg {
        margin-right: 0 !important;
        /* Logo text has margin-left */
    }

    .sidebar:hover .nav-link {
        justify-content: flex-start !important;
        padding: 0.75rem 1.5rem !important;
    }

    .sidebar:hover .nav-link svg {
        margin-right: 12px !important;
        width: 20px !important;
        height: 20px !important;
    }

    .sidebar:hover .user-profile {
        justify-content: flex-start !important;
        padding: 1rem 1.5rem !important;
    }

    .sidebar:hover .avatar {
        margin-right: 10px !important;
    }

    /* Hide pin button always */
    #sidebar-pin-btn {
        display: none !important;
    }


    /* 3. Content Spacing */
    .section {
        padding: 1.5rem !important;
    }

    /* 4. Dashboard Grid Optimization */
    .dashboard-widgets {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .metric-value {
        font-size: 2rem !important;
        padding: 1rem !important;
    }

    /* 5. Form Grids (New Sale / Add Vehicle) */
    .form-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .form-group[style*="grid-column: span 4"] {
        grid-column: span 2 !important;
    }

    .form-group[style*="grid-column: span 2"] {
        grid-column: span 1 !important;
    }

    /* 6. Inventory Grid */
    .inventory-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
        gap: 1rem !important;
    }

    /* 7. Form Grid Dense Adaptation (ROBUST FIX) */
    /* Force strict 2-column layout */
    .form-grid-dense {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* NUCLEAR OPTION: Reset ALL children to take 1 column (50%) by default */
    /* This overrides any 'span 4' etc that was causing implicit track overflow */
    .form-grid-dense>div,
    .form-grid-dense>.form-group,
    .form-grid-dense>.form-full {
        grid-column: span 1 !important;
    }

    /* Restore Full Width (100%) ONLY for headers and truly large items */
    .form-grid-dense>.section-header,
    .form-grid-dense>.sa-header-full {
        grid-column: 1 / -1 !important;
    }

    /* Attempt to restore full width for intent-span-12 items if selector works */
    /* Using 1 / -1 guarantees it won't break grid if it matches */
    .form-grid-dense>[style*="span 12"],
    .form-grid-dense>[style*="span 11"],
    .form-grid-dense>[style*="span 10"],
    .form-grid-dense>[style*="span 9"],
    .form-grid-dense>[style*="span 8"],
    .form-grid-dense>[style*="span 7"] {
        grid-column: 1 / -1 !important;
    }

    /* Prevent Horizontal Overflow */
    .form-group input,
    .form-group select,
    .form-group textarea,
    .input-group,
    .form-full {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}