/* Universal Mobile UI Scaling System */
/* This CSS provides scalable UI elements for ALL devices when in mobile view (≤768px) */
/* Desktop view (>768px) is completely unaffected on ALL devices */

/* NO DESKTOP PROTECTION - Allow scaling to work on all screen sizes */
/* This system works as an overlay on your existing desktop-on-mobile layout */
/* It only adjusts text/UI sizes for better mobile readability, keeps layout intact */

:root {
    /* Default scaling values - will be overridden by admin settings */
    /* These variables only affect mobile devices (≤768px) */
    --mobile-font-scale: 1.0;
    --mobile-heading-scale: 1.0;
    --mobile-body-scale: 1.0;
    --mobile-small-scale: 1.0;
    --mobile-button-scale: 1.0;
    --mobile-button-padding-scale: 1.0;
    --mobile-spacing-scale: 1.0;
    --mobile-icon-scale: 1.0;
    --mobile-input-scale: 1.0;
    --mobile-card-padding-scale: 1.0;
}

/* MOBILE & TABLET UI SCALING OVERLAY - Works on mobile devices and tablets with desktop layout */
/* This preserves your desktop-on-mobile layout but makes text/buttons more readable */
@media screen and (max-width: 1024px) {
    
    /* Text Scaling */
    .mobile-scalable-text,
    body, p, span, div, li, td, th {
        font-size: calc(1rem * var(--mobile-body-scale)) !important;
    }
    
    /* Heading Scaling */
    .mobile-scalable-heading,
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        font-size: calc(var(--bs-font-size, 1rem) * var(--mobile-heading-scale)) !important;
    }
    
    /* Small Text Scaling */
    .mobile-scalable-small,
    small, .small, .text-muted, .text-sm,
    .badge, .breadcrumb, .nav-link {
        font-size: calc(0.875rem * var(--mobile-small-scale)) !important;
    }
    
    /* Button Scaling */
    .mobile-scalable-button,
    .btn, button, input[type="submit"], input[type="button"] {
        font-size: calc(1rem * var(--mobile-button-scale)) !important;
        padding: calc(0.375rem * var(--mobile-button-padding-scale)) calc(0.75rem * var(--mobile-button-padding-scale)) !important;
    }
    
    .btn-lg {
        font-size: calc(1.25rem * var(--mobile-button-scale)) !important;
        padding: calc(0.5rem * var(--mobile-button-padding-scale)) calc(1rem * var(--mobile-button-padding-scale)) !important;
    }
    
    .btn-sm {
        font-size: calc(0.875rem * var(--mobile-button-scale)) !important;
        padding: calc(0.25rem * var(--mobile-button-padding-scale)) calc(0.5rem * var(--mobile-button-padding-scale)) !important;
    }
    
    /* Form Input Scaling */
    .mobile-scalable-input,
    .form-control, .form-select, input, textarea, select {
        font-size: calc(1rem * var(--mobile-input-scale)) !important;
        padding: calc(0.375rem * var(--mobile-spacing-scale)) calc(0.75rem * var(--mobile-spacing-scale)) !important;
    }
    
    /* Icon Scaling */
    .mobile-scalable-icon,
    .fas, .far, .fab, .fal, .fad,
    i[class*="fa-"], .icon {
        font-size: calc(1rem * var(--mobile-icon-scale)) !important;
    }
    
    /* Card Scaling */
    .mobile-scalable-card,
    .card-body {
        padding: calc(1rem * var(--mobile-card-padding-scale)) !important;
    }
    
    .card-header, .card-footer {
        padding: calc(0.75rem * var(--mobile-card-padding-scale)) calc(1rem * var(--mobile-card-padding-scale)) !important;
    }
    
    /* Spacing Scaling */
    .mobile-scalable-spacing {
        margin: calc(var(--bs-gutter-x, 1rem) * var(--mobile-spacing-scale)) !important;
        padding: calc(var(--bs-gutter-x, 1rem) * var(--mobile-spacing-scale)) !important;
    }
    
    /* Navigation Scaling */
    .navbar-brand {
        font-size: calc(1.25rem * var(--mobile-heading-scale)) !important;
    }
    
    .nav-link {
        font-size: calc(1rem * var(--mobile-body-scale)) !important;
        padding: calc(0.5rem * var(--mobile-spacing-scale)) calc(1rem * var(--mobile-spacing-scale)) !important;
    }
    
    /* Table Scaling */
    .table td, .table th {
        padding: calc(0.5rem * var(--mobile-spacing-scale)) !important;
        font-size: calc(0.875rem * var(--mobile-body-scale)) !important;
    }
    
    /* Alert Scaling */
    .alert {
        padding: calc(0.75rem * var(--mobile-spacing-scale)) calc(1rem * var(--mobile-spacing-scale)) !important;
        font-size: calc(1rem * var(--mobile-body-scale)) !important;
    }
    
    /* Modal Scaling */
    .modal-header, .modal-body, .modal-footer {
        padding: calc(1rem * var(--mobile-spacing-scale)) !important;
    }
    
    .modal-title {
        font-size: calc(1.25rem * var(--mobile-heading-scale)) !important;
    }
    
    /* Dropdown Scaling */
    .dropdown-item {
        padding: calc(0.25rem * var(--mobile-spacing-scale)) calc(1rem * var(--mobile-spacing-scale)) !important;
        font-size: calc(1rem * var(--mobile-body-scale)) !important;
    }
    
    /* Pagination Scaling */
    .page-link {
        padding: calc(0.375rem * var(--mobile-spacing-scale)) calc(0.75rem * var(--mobile-spacing-scale)) !important;
        font-size: calc(1rem * var(--mobile-body-scale)) !important;
    }
    
    /* Breadcrumb Scaling */
    .breadcrumb-item {
        font-size: calc(1rem * var(--mobile-body-scale)) !important;
    }
    
    /* List Group Scaling */
    .list-group-item {
        padding: calc(0.5rem * var(--mobile-spacing-scale)) calc(0.75rem * var(--mobile-spacing-scale)) !important;
        font-size: calc(1rem * var(--mobile-body-scale)) !important;
    }
    
    /* Progress Bar Scaling */
    .progress {
        height: calc(1rem * var(--mobile-spacing-scale)) !important;
    }
    
    /* Badge Scaling */
    .badge {
        padding: calc(0.25em * var(--mobile-spacing-scale)) calc(0.4em * var(--mobile-spacing-scale)) !important;
        font-size: calc(0.75em * var(--mobile-small-scale)) !important;
    }
    
    /* Tooltip Scaling */
    .tooltip .tooltip-inner {
        font-size: calc(0.875rem * var(--mobile-small-scale)) !important;
        padding: calc(0.25rem * var(--mobile-spacing-scale)) calc(0.5rem * var(--mobile-spacing-scale)) !important;
    }
    
    /* Popover Scaling */
    .popover-body {
        font-size: calc(0.875rem * var(--mobile-body-scale)) !important;
        padding: calc(0.5rem * var(--mobile-spacing-scale)) calc(0.75rem * var(--mobile-spacing-scale)) !important;
    }
    
    .popover-header {
        font-size: calc(1rem * var(--mobile-heading-scale)) !important;
        padding: calc(0.5rem * var(--mobile-spacing-scale)) calc(0.75rem * var(--mobile-spacing-scale)) !important;
    }
}

/* Utility classes for manual scaling control */
@media (max-width: 768px) {
    .mobile-text-xs { font-size: calc(0.75rem * var(--mobile-small-scale)) !important; }
    .mobile-text-sm { font-size: calc(0.875rem * var(--mobile-small-scale)) !important; }
    .mobile-text-base { font-size: calc(1rem * var(--mobile-body-scale)) !important; }
    .mobile-text-lg { font-size: calc(1.125rem * var(--mobile-body-scale)) !important; }
    .mobile-text-xl { font-size: calc(1.25rem * var(--mobile-heading-scale)) !important; }
    .mobile-text-2xl { font-size: calc(1.5rem * var(--mobile-heading-scale)) !important; }
    .mobile-text-3xl { font-size: calc(1.875rem * var(--mobile-heading-scale)) !important; }
    
    .mobile-p-1 { padding: calc(0.25rem * var(--mobile-spacing-scale)) !important; }
    .mobile-p-2 { padding: calc(0.5rem * var(--mobile-spacing-scale)) !important; }
    .mobile-p-3 { padding: calc(1rem * var(--mobile-spacing-scale)) !important; }
    .mobile-p-4 { padding: calc(1.5rem * var(--mobile-spacing-scale)) !important; }
    .mobile-p-5 { padding: calc(3rem * var(--mobile-spacing-scale)) !important; }
    
    .mobile-m-1 { margin: calc(0.25rem * var(--mobile-spacing-scale)) !important; }
    .mobile-m-2 { margin: calc(0.5rem * var(--mobile-spacing-scale)) !important; }
    .mobile-m-3 { margin: calc(1rem * var(--mobile-spacing-scale)) !important; }
    .mobile-m-4 { margin: calc(1.5rem * var(--mobile-spacing-scale)) !important; }
    .mobile-m-5 { margin: calc(3rem * var(--mobile-spacing-scale)) !important; }
}

/* Animation for smooth scaling transitions */
@media (max-width: 768px) {
    * {
        transition: font-size 0.3s ease, padding 0.3s ease, margin 0.3s ease !important;
    }
}