student-web-if-development-kit/groups/Tapops/css/repository/responsive.css

/* ===========================================
   Responsive — Tablet (≤1024px)
   =========================================== */

@media (max-width: 1024px) {
    .repo-dashboard-container {
        grid-template-columns: 1fr;
    }

    .repo-sidebar {
        display: none;
    }

    .mobile-category-control-group {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
    }

    /* Mobile: show dropdown */
    .filter-select-group {
        display: block;
    }

    /* Skeleton single bar on mobile */
    .filter-skeleton {
        flex-direction: column;
    }

    .filter-skeleton-item {
        height: 48px;
    }

    .filter-skeleton-item.short {
        display: none;
    }

    .filter-skeleton-item:not(.short) ~ .filter-skeleton-item:not(.short) {
        display: none;
    }

    .repo-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .search-container {
        max-width: 100%;
    }

    .filter-controls {
        justify-content: flex-start;
    }

    .control-group {
        flex: 1;
    }
}

/* ===========================================
   Responsive — Tablet / Large Phone (≤768px)
   =========================================== */

@media (max-width: 768px) {
    .documents-section {
        padding: 80px 16px;
    }

    .repo-content-header {
        gap: 20px;
        margin-bottom: 30px;
    }

    .repo-controls {
        padding: 16px;
        gap: 16px;
    }

    #doc-search {
        padding: 14px 14px 14px 44px;
        font-size: 0.88rem;
    }

    .filter-controls {
        flex-direction: column;
        gap: 12px;
    }

    .control-group {
        width: 100%;
    }

    .date-range-group {
        min-width: 0;
        position: relative;
    }

    body.date-picker-open {
        overflow: hidden;
    }

    body.date-picker-open .date-picker-backdrop {
        display: block;
        z-index: 998;
    }

    .date-picker-popover {
        /* Default mobile popover positioning inside media query is overridden below,
           but let's define the base transitions or layouts. */
    }

    @media (max-width: 768px) {
        .date-picker-popover {
            position: fixed;
            top: 50%;
            left: 50%;
            right: auto;
            transform: translate(-50%, -50%);
            width: calc(100% - 32px);
            max-width: 380px;
            max-height: 90vh;
            overflow-y: auto;
            border-radius: 12px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
            z-index: 999;
        }

        .date-picker-top-bar {
            justify-content: center;
        }

        .calendar-grids {
            gap: 0;
        }

        #right-calendar-pane {
            display: none;
        }

        .month-labels {
            gap: 0;
            justify-content: center;
            flex: 1;
        }

        #right-month-label {
            display: none;
        }

        .date-picker-body {
            flex-direction: column;
        }

        .presets-container {
            width: 100%;
            border-left: none;
            border-top: 1px solid var(--border-color);
            padding: 12px 16px;
        }

        .presets-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
            max-height: none;
        }

        .preset-btn {
            padding: 6px 10px;
            font-size: 0.75rem;
        }
    }

    .select-wrapper,
    #sort-filter-wrapper {
        min-width: 0;
        width: 100%;
    }

    /* Cards: 2-column when space permits, else single */
    .document-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
    }

    .document-card {
        padding: 22px;
    }

    .document-card:hover {
        transform: none;
    }

    .doc-type-icon {
        font-size: 1.8rem;
        margin-bottom: 14px;
    }

    .doc-title {
        font-size: 1rem;
    }

    .doc-meta {
        margin-bottom: 16px;
    }

    .doc-tags {
        margin-bottom: 14px;
    }

    .repo-main-content {
        min-height: 400px;
    }
}

/* ===========================================
   Responsive — Phone (≤480px)
   =========================================== */

@media (max-width: 480px) {
    .date-dd, .date-mm {
        width: 26px;
    }

    .date-yyyy {
        min-width: 38px;
    }

    .date-calendar-btn {
        padding-left: 4px;
        font-size: 0.82rem;
    }
}