/* ========== SQVADRA MOBILE OPTIMIZATIONS ========== */
/* Conservative mobile styles - don't break Radzen layout */

/* Mobile: hide button text, show only icon */
@media (max-width: 768px) {
    .mobile-icon-only .rz-button-text {
        display: none !important;
    }
}

/* Prevent table overflow on ALL screen sizes */
.rz-grid-table {
    max-width: 100% !important;
}

/* Prevent flex items from overflowing their container on mobile.
   Flex items default to min-width: auto which allows them to expand to content size.
   This is the root cause of grids "escaping" their padded parent containers. */
@media (max-width: 768px) {
    .rz-stack {
        min-width: 0;
    }
}

/* ========== CONSERVATIVE TOUCH TARGETS ========== */

@media (max-width: 768px) {
    /* Only grid buttons */
    .rz-data-grid .rz-button.rz-button-sm,
    .rz-grid .rz-button.rz-button-sm {
        min-height: 36px !important;
        min-width: 36px !important;
        padding: 0.5rem !important;
    }

    /* iOS zoom prevention */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea {
        font-size: 16px !important;
    }
}

/* ========== FILTER DROPDOWNS ========== */

.filter-dropdown .rz-dropdown {
    border: none !important;
    background: transparent !important;
    min-width: 100px !important;
    box-shadow: none !important;
    min-height: auto !important;
    padding: 0 !important;
    height: auto !important;
}

.filter-dropdown .rz-dropdown .rz-dropdown-label.rz-inputtext {
    padding: 0 !important;
    min-height: auto !important;
    height: auto !important;
    line-height: normal !important;
    font-weight: 500 !important;
    color: var(--rz-text-color) !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.filter-dropdown .rz-dropdown .rz-dropdown-trigger {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.filter-dropdown .rz-dropdown:hover {
    background: transparent !important;
}

/* ========== DATA GRID MOBILE CARD VIEW ========== */
/*
 * Strategy: two RadzenDataGridColumns per grid:
 *   - sqv-dc (desktop column): visible on desktop, hidden on mobile
 *   - sqv-mc (mobile column): hidden on desktop, visible on mobile as card
 *
 * theme.css sets defaults (.sqv-mc { display: none }), media query here overrides.
 * On mobile, theme.css converts the table/tbody/tr to display:block so the table
 * always respects its parent's width without table-layout intrinsic width issues.
 */

@media (max-width: 768px) {
    /* Allow horizontal scroll on non-card-mode grid containers */
    .rz-data-grid:not(.sqv-rg),
    .rz-grid:not(.sqv-rg) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* sqv-rg uses mobile card mode — NO horizontal scroll, constrain to parent */
    .sqv-rg.rz-data-grid {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Remove padding ONLY from cards that directly wrap a data grid —
       so the grid goes edge-to-edge inside the card.
       All other cards (Dashboard, Detail, etc.) keep their natural padding. */
    .rz-card:has(.sqv-rg) {
        padding: 0 !important;
        overflow: hidden !important;
        min-width: 0 !important;  /* prevent flex item from expanding to content min-width (sum of column widths) */
    }

    .rz-data-grid {
        padding: 0 !important;
    }

    /* Hide table header row - columns are described in the mobile card template */
    .sqv-rg .rz-grid-table thead {
        display: none !important;
    }

    /* Hide desktop columns */
    .sqv-rg .sqv-dc {
        display: none !important;
    }

    /* Show mobile card column — display:block fills the block-layout row */
    .sqv-rg .sqv-mc {
        display: block !important;
        width: 100% !important;
    }

    /* Radzen wraps every td's content in <span class="rz-cell-data rz-text-truncate">.
     * rz-text-truncate adds white-space:nowrap + overflow:hidden + text-overflow:ellipsis,
     * which prevents card content (h6, span) from wrapping.
     * Reset it so the mobile card renders and wraps text normally. */
    .sqv-rg td.sqv-mc .rz-cell-data {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    /* Mobile card cell padding and overflow */
    .sqv-rg .rz-grid-table tbody tr td.sqv-mc {
        padding: 1rem !important;
        overflow: hidden !important;
        max-width: 100% !important;
    }

    /* Reduce padding specifically on the top photo/icon + info section.
     * NOTE: Radzen wraps td content in span.rz-cell-data, so we go through it. */
    .sqv-rg .rz-grid-table tbody tr td.sqv-mc .rz-cell-data > .rz-stack > .rz-stack:first-child {
        padding: 0.5rem 0 !important;
    }

    /* Force the card root stack to fill its container width */
    .sqv-rg .rz-grid-table tbody tr td.sqv-mc .rz-cell-data > .rz-stack {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Action buttons row: allow wrapping on narrow screens */
    .sqv-rg .rz-grid-table tbody tr td.sqv-mc .rz-cell-data > .rz-stack > .rz-stack:last-child {
        flex-wrap: wrap !important;
        gap: 0.375rem !important;
    }

    /* Action buttons: compact sizing */
    .sqv-rg .rz-grid-table tbody tr td.sqv-mc .rz-button {
        flex: 0 0 auto !important;
        min-width: 65px !important;
        padding: 0.375rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
}

/* ========== UTILITY CLASSES ========== */

@media (max-width: 768px) {
    .mobile-only { display: block !important; }
    .desktop-only { display: none !important; }
    .mobile-hidden { display: none !important; }
}

@media (min-width: 769px) {
    .mobile-only { display: none !important; }
    .desktop-only { display: block !important; }
    .mobile-hidden { display: block !important; }
}

/* ========== REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}