/* ============================================
   Responsive Design for Clip Admin Portal
   Handles small screens, tablets, and high zoom levels (up to 150%)
   ============================================ */

/* Base responsive utilities */
.responsive-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

/* Responsive tables and grids */
.responsive-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

.responsive-table-wrapper table {
    min-width: 600px; /* Minimum width before horizontal scroll */
}

/* Card responsiveness */
.card {
    margin-bottom: 1rem;
}

.card-header {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.card-header .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Button responsiveness */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.btn {
    white-space: nowrap;
    min-width: auto;
}

/* Syncfusion Grid responsive wrapper */
.e-grid {
    width: 100% !important;
    overflow-x: auto !important;
}

.e-grid .e-gridheader,
.e-grid .e-gridcontent {
    overflow-x: auto !important;
}

/* Form responsiveness */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    flex: 1 1 auto;
    min-width: 200px;
}

/* Responsive spacing utilities */
.responsive-padding {
    padding: clamp(0.5rem, 2vw, 1rem);
}

.responsive-margin {
    margin: clamp(0.5rem, 2vw, 1rem);
}

/* ============================================
   Media Queries for Different Screen Sizes
   ============================================ */

/* Large tablets and small desktops (1024px and below) */
@media (max-width: 1024px) {
    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .card-header h3 {
        font-size: 1.25rem;
    }

    .btn {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }

    /* Stack buttons vertically on smaller screens */
    .card-header .button-group {
        flex-direction: column;
        width: 100%;
    }

    .card-header .button-group .btn {
        width: 100%;
    }
}

/* Tablets (768px and below) - This also handles 150% zoom on 1280px screens */
@media (max-width: 768px) {
    .card-header {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .card-header h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    /* Compact grid columns */
    .e-grid .e-headercell,
    .e-grid .e-rowcell {
        padding: 0.25rem !important;
        font-size: 0.875rem !important;
    }

    /* Reduce form field widths */
    .form-group {
        min-width: 100%;
        flex: 1 1 100%;
    }

    /* Alert messages */
    .alert {
        font-size: 0.875rem;
        padding: 0.5rem;
    }

    /* Modal dialogs */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
}

/* Mobile phones (576px and below) */
@media (max-width: 576px) {
    .card {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .card-header h3 {
        font-size: 1rem;
    }

    .btn {
        font-size: 0.813rem;
        padding: 0.25rem 0.5rem;
    }

    /* Stack all form elements */
    .form-row {
        flex-direction: column;
    }

    /* Reduce padding everywhere */
    .card-body {
        padding: 0.5rem;
    }

    /* Make badges smaller */
    .badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }

    /* Compact grid further */
    .e-grid .e-headercell,
    .e-grid .e-rowcell {
        font-size: 0.75rem !important;
        padding: 0.2rem !important;
    }
}

/* ============================================
   High DPI / Zoom Level Adjustments
   Specifically for 150% zoom on standard screens
   ============================================ */
@media (min-resolution: 144dpi) and (max-width: 1366px),
       (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1366px) {

    /* Reduce font sizes slightly at high zoom */
    body {
        font-size: 14px;
    }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }
    h5 { font-size: 1rem; }

    /* Compact spacing */
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .card-body {
        padding: 0.75rem;
    }

    /* Reduce button sizes */
    .btn {
        padding: 0.35rem 0.7rem;
        font-size: 0.875rem;
    }

    /* Make toolbar items wrap */
    .e-toolbar .e-toolbar-items {
        flex-wrap: wrap;
    }
}

/* ============================================
   Specific fixes for common admin scenarios
   ============================================ */

/* Radio button groups - make them stack on small screens */
@media (max-width: 768px) {
    .radio-group-container {
        flex-direction: column;
    }

    .radio-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .radio-label {
        margin-bottom: 0.5rem;
        width: 100%;
    }
}

/* Status badges - ensure they don't overflow */
.status-badges-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.badge-mini {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    white-space: nowrap;
}

/* Class cards - make them responsive */
.class-card-compact {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .class-card-compact {
        flex-direction: column;
    }

    .drag-handle {
        display: none; /* Hide drag handle on very small screens */
    }
}

/* Print button - hide on very small screens if space is tight */
@media (max-width: 576px) {
    .btn-print-label {
        display: none;
    }

    .btn i.fa-print {
        margin-right: 0 !important;
    }
}

/* Ensure Syncfusion components respect container width */
.e-control {
    max-width: 100%;
}

.e-input-group {
    max-width: 100%;
}

/* ============================================
   AdminHome - Dropdown selector bar and tabs responsive
   ============================================ */

/* Fix traffic lights overflow issue */
.grid-lights {
    overflow: visible !important;
    min-width: fit-content !important;
}

/* ============================================
   Mobile Content Visibility Fix
   On mobile, make sticky headers scroll away to show content
   ============================================ */

@media (max-width: 768px) {
    /* Make headers scroll away on mobile instead of sticky */
    .grid-admin-header,
    .control-container > div:nth-child(1),
    .control-container > div:nth-child(2),
    .tab-control {
        position: relative !important;
        top: auto !important;
    }

    /* Ensure content wrapper takes available space */
    .content-wrapper {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }

    /* Ensure main content is visible and scrollable */
    .main-content {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px !important;
        min-height: 300px !important;
    }

    /* Ensure control-container allows scrolling */
    .control-container {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
    }
}

/* Make dropdown selector bar wrap on mobile */
@media (max-width: 768px) {
    /* Selector bar - allow wrapping */
    .control-container > div:nth-child(2) {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    /* Individual dropdown containers */
    .control-container > div:nth-child(2) > div {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }

    /* Dropdowns full width on mobile */
    .control-container > div:nth-child(2) select {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* Stats container */
    .control-container > div:nth-child(2) > div:last-child {
        margin-left: 0 !important;
        flex: 1 1 100% !important;
        text-align: center !important;
    }
}

/* Make tabs wrap on mobile */
@media (max-width: 768px) {
    .tab-control {
        flex-wrap: wrap !important;
        gap: 5px !important;
        padding: 8px !important;
    }

    .tab-button {
        flex: 1 1 calc(50% - 5px) !important;
        min-width: calc(50% - 5px) !important;
        font-size: 0.813rem !important;
        padding: 8px 4px !important;
        text-align: center !important;
    }
}

/* Even smaller screens - stack tabs vertically */
@media (max-width: 480px) {
    .tab-button {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }
}

/* ============================================
   EditClass - Syncfusion Tab responsive (Class edit sub-tabs)
   ============================================ */

@media (max-width: 768px) {
    /* Make Syncfusion tab headers wrap on mobile */
    .e-tab .e-tab-header {
        overflow-x: auto !important;
        flex-wrap: wrap !important;
    }

    .e-tab .e-tab-header .e-toolbar-items {
        flex-wrap: wrap !important;
    }

    .e-tab .e-tab-header .e-toolbar-item {
        flex: 1 1 auto !important;
        min-width: fit-content !important;
    }

    /* Compact tab header text on mobile */
    .e-tab .e-tab-header .e-tab-text {
        font-size: 0.875rem !important;
        padding: 0.5rem !important;
    }
}

/* Very small screens - make tabs even more compact */
@media (max-width: 576px) {
    .e-tab .e-tab-header .e-tab-text {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.5rem !important;
    }
}

/* ============================================
   Utility classes for manual responsive control
   ============================================ */
.hide-mobile {
    display: block;
}

.show-mobile {
    display: none;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }
}

/* Responsive text sizing */
.text-responsive {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

.heading-responsive {
    font-size: clamp(1.25rem, 3vw, 2rem);
}

/* Prevent horizontal overflow */
* {
    max-width: 100%;
}

table {
    max-width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}