/* ============================================
   Mobile Editor Scaling System
   Activates at <= 600px to make all editor UIs
   comfortable for touch input on mobile devices.
   Desktop layout is unaffected.
   ============================================ */

@media (max-width: 600px) {

    /* --- Base Typography Scaling --- */
    body {
        font-size: 1.1rem;
    }

    /* --- Form Controls: Native + Syncfusion --- */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="url"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea,
    .e-input,
    .e-input-group .e-input,
    .e-textbox,
    .e-numerictextbox .e-input,
    .e-ddl .e-input,
    .e-dropdownlist .e-input,
    .e-combobox .e-input,
    .e-datepicker .e-input,
    .e-timepicker .e-input,
    .e-datetimepicker .e-input {
        min-height: 48px !important;
        font-size: 1rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    /* Syncfusion input wrapper height */
    .e-input-group,
    .e-input-group.e-control-wrapper {
        min-height: 48px !important;
    }

    /* Syncfusion input icons (calendar, dropdown arrow, etc.) */
    .e-input-group .e-input-group-icon,
    .e-input-group.e-control-wrapper .e-input-group-icon {
        min-height: 46px !important;
        min-width: 44px !important;
        font-size: 1.1rem !important;
    }

    /* --- Labels --- */
    .form-label,
    label,
    .e-float-text,
    .detail-card-label {
        font-size: 1rem !important;
        margin-bottom: 0.4rem;
    }

    /* --- Buttons: All Types --- */
    .btn,
    .e-btn,
    button[type="submit"],
    button[type="button"] {
        min-height: 44px;
        padding: 0.6rem 1rem !important;
        font-size: 1rem !important;
    }

    .btn-sm,
    .e-btn.e-small {
        min-height: 40px;
        padding: 0.45rem 0.75rem !important;
        font-size: 0.95rem !important;
    }

    /* Icon-only buttons in grids/tables (edit, delete, etc.) */
    .btn-sm i.bi,
    .btn i.bi,
    .e-btn .e-btn-icon,
    .btn-edit-wi,
    .btn-del-li {
        font-size: 1.1rem !important;
    }

    /* Ensure icon buttons have adequate tap targets */
    .btn-edit-wi,
    .btn-del-li,
    .btn-sm.btn-outline-danger,
    .btn-sm.btn-outline-primary,
    .btn-sm.btn-outline-secondary {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Form Spacing --- */
    .mb-3,
    .form-group {
        margin-bottom: 1rem !important;
    }

    .mb-4 {
        margin-bottom: 1.25rem !important;
    }

    /* --- Multi-Column Layouts: Stack Vertically --- */
    .row .col-md-6,
    .row .col-md-4,
    .row .col-md-3,
    .row .col-lg-6,
    .row .col-lg-4,
    .row .col-lg-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* --- Syncfusion Dialogs / Popups --- */
    .e-dialog,
    .e-dialog.e-popup,
    .e-adaptive-dialog,
    .e-responsive-dialog {
        font-size: 1rem !important;
    }

    .e-dialog .e-dlg-header {
        font-size: 1.1rem !important;
    }

    .e-dialog .e-dlg-content {
        font-size: 1rem !important;
        padding: 1rem !important;
    }

    .e-dialog .e-footer-content {
        padding: 0.75rem 1rem !important;
    }

    .e-dialog .e-footer-content .e-btn {
        min-height: 44px;
        padding: 0.5rem 1rem !important;
        font-size: 1rem !important;
    }

    /* Filter popup inputs */
    .e-filter-popup .e-input,
    .e-filter-popup .e-input-group .e-input,
    .e-flmenu .e-input,
    .e-flmenu .e-input-group .e-input {
        min-height: 44px !important;
        font-size: 1rem !important;
    }

    /* --- Syncfusion Dropdown Popup Lists --- */
    .e-popup .e-list-item,
    .e-popup .e-dropdownbase .e-list-item,
    .e-popup.e-popup-open .e-list-item {
        min-height: 44px !important;
        padding: 0.6rem 0.75rem !important;
        font-size: 1rem !important;
        line-height: 1.4;
    }

    /* --- Syncfusion Grid in Editor Context --- */
    .e-grid .e-rowcell {
        font-size: 0.95rem !important;
        padding: 0.6rem 0.75rem !important;
    }

    .e-grid .e-headercell .e-headercelldiv,
    .e-grid .e-headercell .e-headertext {
        font-size: 0.9rem !important;
    }

    .e-grid .e-rowcell .e-label {
        font-size: 0.9rem !important;
    }

    /* Grid action buttons */
    .e-grid .btn.btn-sm {
        min-width: 40px;
        min-height: 40px;
        padding: 0.35rem 0.5rem !important;
        font-size: 0.9rem !important;
    }

    /* --- Detail Cards --- */
    .detail-card-row {
        padding: 0.85rem 1rem;
    }

    .detail-card-label {
        font-size: 0.95rem !important;
    }

    .detail-card-value {
        font-size: 1rem !important;
    }

    /* --- Tree Inventory Editor --- */
    .ti-chip-select {
        font-size: 1rem !important;
        min-height: 44px;
    }

    .ti-chip-select .ti-chip {
        font-size: 0.9rem !important;
        padding: 0.35rem 0.6rem !important;
    }

    .ti-fab {
        width: 52px;
        height: 52px;
        font-size: 1.3rem;
    }

    /* --- Checkbox & Radio Scaling --- */
    .form-check-input {
        width: 1.25em;
        height: 1.25em;
        margin-top: 0.15em;
    }

    .form-check-label {
        font-size: 1rem;
        padding-left: 0.25rem;
    }

    .e-checkbox-wrapper .e-frame {
        width: 20px !important;
        height: 20px !important;
    }

    /* --- Modal Dialogs (Bootstrap) --- */
    .modal-body {
        font-size: 1rem;
        padding: 1.25rem;
    }

    .modal-footer .btn {
        min-height: 44px;
        font-size: 1rem !important;
    }

    .modal-title {
        font-size: 1.1rem;
    }

    /* --- Input Groups (search, password toggle, etc.) --- */
    .input-group .btn,
    .input-group .input-group-text {
        min-height: 48px;
        min-width: 44px;
        font-size: 1rem;
    }

    /* --- Pager Controls --- */
    .e-pager .e-numericitem,
    .e-pager .e-numericcontainer a {
        min-width: 40px;
        min-height: 40px;
        font-size: 0.95rem !important;
    }

    .e-pager .e-prevpage,
    .e-pager .e-nextpage,
    .e-pager .e-firstpage,
    .e-pager .e-lastpage {
        min-width: 44px;
        min-height: 44px;
    }

    /* --- Card Section Headers (h5, h6 inside cards) --- */
    .card-body h5,
    .card-body h6 {
        font-size: 1.1rem;
    }

    /* --- Tabulator Tables --- */
    .tabulator .tabulator-cell {
        font-size: 0.95rem !important;
        padding: 0.5rem 0.6rem !important;
    }

    .tabulator .tabulator-col-title {
        font-size: 0.9rem !important;
    }

    .tabulator .tabulator-cell .btn {
        min-height: 38px;
        min-width: 38px;
    }
}