/* ============================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ============================================ */

/* Tablet and below (768px and below) */
@media (max-width: 768px) {
    /* Dashboard Layout */
    .dashboard-layout {
        position: relative;
    }
    
    /* Sidebar - Hidden by default on mobile, shown when toggled */
    .sidebar {
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        height: 100vh;
        z-index: 1500;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    /* Main Content - Full width on mobile */
    .main-content {
        width: 100%;
        margin-right: 0;
    }
    
    /* Topbar - Adjust padding and height */
    .topbar {
        padding: 0 0.75rem;
        height: 56px;
        gap: 0.5rem;
    }
    
    /* Hide search on mobile */
    .topbar-search {
        display: none !important;
    }
    
    .topbar-actions {
        gap: 0.375rem;
        flex: 1;
        justify-content: flex-end;
    }
    
    /* Quick Actions Button */
    .topbar-quick-actions-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.875rem !important;
        padding: 0 !important;
    }
    
    /* Topbar Icons - Smaller on mobile */
    .topbar-icon {
        padding: 0.375rem !important;
        font-size: 0.875rem !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }
    
    /* User Menu Button */
    .topbar-user {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }
    
    /* Notifications Badge - Smaller */
    .notification-badge {
        width: 14px !important;
        height: 14px !important;
        font-size: 0.5625rem !important;
        top: -1px !important;
        left: -1px !important;
    }
    
    /* Dropdowns - Full width on mobile */
    .topbar-quick-actions-dropdown,
    .topbar-notifications-dropdown,
    .topbar-user-dropdown {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        border-right: none !important;
        border-left: none !important;
    }
    
    .topbar-notifications-dropdown {
        top: calc(100% + 0.25rem) !important;
    }
    
    .topbar-user-dropdown {
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    /* Content Area - Adjust padding */
    .content-area {
        padding: 1rem;
    }
    
    /* Sidebar Header - Smaller padding */
    .sidebar-header {
        padding: 1rem;
    }
    
    .sidebar-logo h2 {
        font-size: 1.125rem;
    }
    
    .sidebar-welcome .welcome-name {
        font-size: 1rem;
    }
    
    .sidebar-stats {
        padding: 0.75rem;
    }
    
    .sidebar-stats .stats-number {
        font-size: 1.5rem;
    }
    
    /* Sidebar Nav - Adjust padding */
    .sidebar-nav {
        padding: 0.75rem;
    }
    
    .nav-item {
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .nav-subitem {
        padding: 0.5rem 0.75rem 0.5rem 2rem;
        font-size: 0.8125rem;
    }
    
    /* Cards - Full width on mobile */
    .card {
        margin-bottom: 1rem;
    }
    
    /* Stats Grid - Two columns on mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }
    
    /* Stats Container - Two columns on mobile */
    #stats-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }
    
    /* Stat Cards - Smaller padding on mobile */
    .stat-card {
        padding: 1rem;
    }
    
    .stat-info .stat-value {
        font-size: 1.75rem;
    }
    
    .stat-info .stat-title {
        font-size: 1.125rem;
    }
    
    .stat-icon {
        width: 48px;
        height: 48px;
    }
    
    /* Forms - Full width inputs */
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-input {
        font-size: 0.875rem;
    }
    
    /* Buttons - Full width on mobile when needed */
    .btn {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Tables - Horizontal scroll on mobile */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 600px;
        font-size: 0.8125rem;
    }
    
    table th,
    table td {
        padding: 0.5rem 0.375rem;
        white-space: nowrap;
    }
    
    /* Modals - Full screen on mobile */
    .modal-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
        height: 100vh;
    }
    
    .modal-header {
        padding: 1rem;
    }
    
    .modal-header h3 {
        font-size: 1.25rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    /* Course Header - Stack on mobile */
    .course-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .course-header-content {
        width: 100%;
    }
    
    .course-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .course-actions .btn {
        flex: 1;
        min-width: calc(50% - 0.375rem);
    }
    
    /* Course Title - Smaller on mobile */
    .course-title {
        font-size: 1.75rem !important;
    }
    
    .course-description {
        font-size: 1rem !important;
    }
    
    /* Content Header */
    .content-header h1 {
        font-size: 1.5rem;
    }
    
    .content-header p {
        font-size: 0.875rem;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    /* Topbar - Even smaller */
    .topbar {
        padding: 0 0.5rem;
        height: 52px;
        gap: 0.25rem;
    }
    
    /* Hide search on small mobile */
    .topbar-search {
        display: none !important;
    }
    
    .topbar-actions {
        gap: 0.25rem;
    }
    
    /* Quick Actions Button - Smaller */
    .topbar-quick-actions-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8125rem !important;
        padding: 0 !important;
    }
    
    /* Topbar Icons - Even smaller */
    .topbar-icon {
        padding: 0.3125rem !important;
        font-size: 0.8125rem !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
    
    /* User Menu Button - Smaller */
    .topbar-user {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
    
    /* Notifications Badge - Even smaller */
    .notification-badge {
        width: 12px !important;
        height: 12px !important;
        font-size: 0.5rem !important;
        top: -1px !important;
        left: -1px !important;
    }
    
    /* Hide comment button on very small screens */
    .topbar-icon[onclick*="alert"] {
        display: none !important;
    }
    
    /* Dropdowns - Full width on small mobile */
    .topbar-quick-actions-dropdown,
    .topbar-notifications-dropdown,
    .topbar-user-dropdown {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        border-right: none !important;
        border-left: none !important;
        min-width: auto !important;
    }
    
    .topbar-quick-actions-dropdown {
        top: calc(100% + 0.25rem) !important;
    }
    
    .topbar-notifications-dropdown {
        top: calc(100% + 0.25rem) !important;
    }
    
    .topbar-user-dropdown {
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    /* Quick Actions Dropdown Items - Smaller padding */
    .topbar-quick-actions-dropdown-item {
        padding: 0.75rem 0.875rem !important;
        font-size: 0.875rem !important;
    }
    
    /* User Dropdown - Smaller padding */
    .topbar-user-dropdown > div {
        padding: 0.5rem !important;
    }
    
    .topbar-user-dropdown a,
    .topbar-user-dropdown button {
        padding: 0.625rem 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Notifications Dropdown - Smaller */
    .topbar-notifications-dropdown > div:first-child {
        padding: 0.75rem !important;
    }
    
    .topbar-notifications-dropdown h3 {
        font-size: 0.9375rem !important;
    }
    
    /* Content Area - Smaller padding */
    .content-area {
        padding: 0.75rem;
    }
    
    /* Sidebar - Slightly narrower */
    .sidebar {
        width: 260px;
    }
    
    /* Cards - Smaller padding */
    .card {
        padding: 1rem;
    }
    
    /* DataViewManager Cards - Even smaller on small mobile */
    .data-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.375rem !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Fix card overflow on small mobile */
    .data-grid > div {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 0.625rem !important;
    }
    
    /* Fix all inline styles in cards on small mobile */
    .data-grid > div[style*="padding: 1.25rem"],
    .data-grid > div[style*="padding: 0.75rem"] {
        padding: 0.625rem !important;
    }
    
    .data-grid > div > div[style*="gap: 1rem"] {
        gap: 0.375rem !important;
    }
    
    .data-grid > div > div[style*="gap: 0.75rem"] {
        gap: 0.375rem !important;
    }
    
    .data-grid > div > div[style*="gap: 0.5rem"] {
        gap: 0.25rem !important;
    }
    
    .data-grid > div > div[style*="padding: 0.75rem"] {
        padding: 0.375rem !important;
    }
    
    .data-grid > div > div[style*="margin-bottom: 1rem"] {
        margin-bottom: 0.625rem !important;
    }
    
    .data-view-card {
        padding: 0.625rem !important;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    /* Fix flex containers inside cards */
    .data-view-card > div[style*="display: flex"] {
        gap: 0.375rem !important;
    }
    
    /* Fix avatar sizes on small mobile */
    .data-view-card > div[style*="width: 56px"],
    .data-view-card > div[style*="width: 40px"] {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.875rem !important;
    }
    
    /* Fix grid inside cards */
    .data-view-card > div[style*="grid-template-columns"] {
        gap: 0.375rem !important;
        padding: 0.375rem !important;
    }
    
    /* Course cards - Fix info grid on small mobile */
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.25rem !important;
        padding: 0.5rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div {
        padding: 0 !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div[style*="border-right"] {
        border-right: 1px solid var(--border-color) !important;
        border-left: 1px solid var(--border-color) !important;
        padding: 0 0.25rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 0.6875rem"] {
        font-size: 0.5625rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 1.125rem"] {
        font-size: 0.75rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 1.125rem"] i,
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size"] i {
        font-size: 0.625rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="gap: 0.375rem"] {
        gap: 0.125rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div[style*="border-right"] {
        padding: 0 0.1875rem !important;
    }
    
    .data-view-card-title {
        font-size: 0.75rem;
    }
    
    .data-view-card-subtitle {
        font-size: 0.625rem;
    }
    
    .data-view-card-actions {
        display: none !important;
    }
    
    /* Hide buttons container in cards on small mobile */
    .data-grid > div > div[style*="display: flex"][style*="gap: 0.5rem"]:last-child {
        display: none !important;
    }
    
    /* Hide all action links/buttons in cards */
    .data-grid > div a[href*="/students/"],
    .data-grid > div a[href*="/trainers/"],
    .data-grid > div a[href*="/courses/"],
    .data-grid > div button {
        display: none !important;
    }
    
    /* Alternative: Hide last flex container in each card */
    .data-grid > div > div:last-of-type[style*="display: flex"] {
        display: none !important;
    }
    
    /* Fix text overflow */
    .data-view-card h3 {
        font-size: 0.8125rem !important;
    }
    
    .data-view-card p {
        font-size: 0.6875rem !important;
    }
    
    /* Buttons - Smaller */
    .btn {
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
    }
    
    /* Course Title - Even smaller */
    .course-title {
        font-size: 1.5rem !important;
    }
    
    /* Forms - Smaller inputs */
    .form-input {
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    /* Tables - Smaller font */
    table {
        font-size: 0.75rem;
    }
    
    table th,
    table td {
        padding: 0.375rem 0.25rem;
    }
    
    /* Modals - Full screen */
    .modal-header {
        padding: 0.875rem;
    }
    
    .modal-header h3 {
        font-size: 1.125rem;
    }
    
    .modal-body {
        padding: 0.875rem;
    }
    
    /* Course Actions - Stack vertically */
    .course-actions {
        flex-direction: column;
    }
    
    .course-actions .btn {
        width: 100%;
        min-width: 100%;
    }
}

/* Large Mobile / Small Tablet (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    /* Topbar - Medium size */
    .topbar {
        padding: 0 1rem;
        height: 60px;
        gap: 0.5rem;
    }
    
    /* Hide search on large mobile */
    .topbar-search {
        display: none !important;
    }
    
    .topbar-actions {
        gap: 0.5rem;
    }
    
    /* Quick Actions Button */
    .topbar-quick-actions-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
        padding: 0 !important;
    }
    
    /* Topbar Icons */
    .topbar-icon {
        padding: 0.5rem !important;
        font-size: 1rem !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
    
    /* User Menu Button */
    .topbar-user {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
    
    /* Notifications Badge */
    .notification-badge {
        width: 16px !important;
        height: 16px !important;
        font-size: 0.625rem !important;
    }
    
    /* Dropdowns - Better positioning on large mobile */
    .topbar-quick-actions-dropdown {
        left: auto !important;
        right: 0 !important;
        width: 280px !important;
        max-width: 90vw !important;
        border-radius: 0.75rem !important;
    }
    
    .topbar-notifications-dropdown {
        left: auto !important;
        right: 0 !important;
        width: 360px !important;
        max-width: 90vw !important;
        border-radius: 0.75rem !important;
    }
    
    .topbar-user-dropdown {
        left: auto !important;
        right: 0 !important;
        width: 280px !important;
        max-width: 90vw !important;
        border-radius: 0.75rem !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
    }
    
    #stats-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
    }
    
    .stat-card {
        padding: 1.25rem;
    }
    
    .stat-info .stat-value {
        font-size: 2rem;
    }
    
    .stat-info .stat-title {
        font-size: 1.25rem;
    }
    
    /* DataViewManager Cards - Two columns with better spacing */
    .data-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Fix card overflow on large mobile */
    .data-grid > div {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    /* Fix all inline styles in cards on large mobile */
    .data-grid > div[style*="padding: 1.25rem"] {
        padding: 1rem !important;
    }
    
    .data-grid > div > div[style*="gap: 1rem"] {
        gap: 0.75rem !important;
    }
    
    .data-grid > div > div[style*="gap: 0.75rem"] {
        gap: 0.625rem !important;
    }
    
    .data-grid > div > div[style*="padding: 0.75rem"] {
        padding: 0.625rem !important;
    }
    
    .data-view-card {
        padding: 1rem !important;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    /* Fix flex containers inside cards */
    .data-view-card > div[style*="display: flex"] {
        gap: 0.75rem !important;
    }
    
    /* Fix avatar sizes on large mobile */
    .data-view-card > div[style*="width: 56px"] {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.125rem !important;
    }
    
    /* Fix grid inside cards */
    .data-view-card > div[style*="grid-template-columns"] {
        gap: 0.625rem !important;
        padding: 0.625rem !important;
    }
    
    /* Course cards - Fix info grid on large mobile */
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
        padding: 0.75rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div {
        padding: 0 !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div[style*="border-right"] {
        border-right: 1px solid var(--border-color) !important;
        border-left: 1px solid var(--border-color) !important;
        padding: 0 0.5rem !important;
    }
    
    .data-view-card-title {
        font-size: 0.9375rem;
    }
    
    .data-view-card-subtitle {
        font-size: 0.8125rem;
    }
    
    .data-view-card-actions {
        display: none !important;
    }
    
    /* Hide buttons container in cards on large mobile */
    .data-grid > div > div[style*="display: flex"][style*="gap: 0.5rem"]:last-child {
        display: none !important;
    }
    
    /* Hide all action links/buttons in cards */
    .data-grid > div a[href*="/students/"],
    .data-grid > div a[href*="/trainers/"],
    .data-grid > div a[href*="/courses/"],
    .data-grid > div button {
        display: none !important;
    }
    
    /* Alternative: Hide last flex container in each card */
    .data-grid > div > div:last-of-type[style*="display: flex"] {
        display: none !important;
    }
    
    .course-actions .btn {
        flex: 1;
        min-width: calc(50% - 0.375rem);
    }
}

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        width: 240px;
    }
    
    .topbar-search {
        max-width: 300px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .course-actions .btn {
        flex: 1;
        min-width: calc(50% - 0.375rem);
    }
}

/* Login/Signup Pages - Mobile Responsive */
@media (max-width: 768px) {
    .login-page {
        flex-direction: column;
        min-height: 100vh;
    }
    
    .login-left {
        display: none;
    }
    
    .login-right {
        width: 100%;
        padding: 1.5rem;
        min-height: 100vh;
        justify-content: flex-start;
        padding-top: 2rem;
    }
    
    .login-card {
        padding: 1.5rem;
        max-width: 100%;
        margin: 0;
        border-radius: 0.75rem;
    }
    
    .login-logo h1 {
        font-size: 1.5rem !important;
    }
    
    .login-logo p {
        font-size: 0.875rem;
    }
    
    .login-logo-icon {
        width: 56px;
        height: 56px;
    }
    
    .login-logo-icon i {
        font-size: 1.75rem;
    }
    
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-label {
        font-size: 0.875rem;
    }
    
    .form-input {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
    
    .btn-primary,
    .btn-outline {
        width: 100%;
        padding: 0.875rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .login-right {
        padding: 1rem;
        padding-top: 1.5rem;
    }
    
    .login-card {
        padding: 1.25rem;
    }
    
    .login-logo h1 {
        font-size: 1.25rem !important;
    }
    
    .form-input {
        padding: 0.625rem;
        font-size: 0.8125rem;
    }
    
    .btn-primary,
    .btn-outline {
        padding: 0.75rem;
        font-size: 0.8125rem;
    }
}

/* Schedule Calendar Views - Mobile Responsive */
@media (max-width: 768px) {
    /* Weekly Calendar */
    .calendar-week-table {
        font-size: 0.75rem;
    }
    
    .calendar-week-table th,
    .calendar-week-table td {
        padding: 0.25rem;
        min-height: 40px;
    }
    
    .calendar-slot-item {
        padding: 0.25rem;
        font-size: 0.7rem;
    }
    
    /* Monthly Calendar */
    .calendar-month-grid {
        grid-template-columns: repeat(7, 1fr);
        gap: 0.25rem;
    }
    
    .calendar-month-day {
        min-height: 60px;
        padding: 0.25rem;
    }
    
    .calendar-month-day-number {
        font-size: 0.75rem;
    }
    
    /* Daily Calendar */
    .calendar-daily-list {
        gap: 0.5rem;
    }
    
    .calendar-daily-item {
        padding: 0.75rem;
    }
}

/* Course Detail Page - Mobile Responsive */
@media (max-width: 768px) {
    .course-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .course-header-content {
        width: 100%;
    }
    
    .course-title-section {
        width: 100%;
    }
    
    .course-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .course-actions .btn {
        flex: 1;
        min-width: calc(50% - 0.25rem);
        font-size: 0.8125rem;
        padding: 0.625rem 0.75rem;
    }
    
    .course-actions .btn span {
        display: none;
    }
    
    .course-actions .btn i {
        margin: 0;
    }
}

/* Student/Trainer Lists - Mobile Responsive */
@media (max-width: 768px) {
    /* List Header */
    .list-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .list-header h1 {
        font-size: 1.5rem;
    }
    
    .list-header .btn {
        width: 100%;
    }
    
    /* Stats Container - Two columns on mobile */
    #stats-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }
    
    /* Stat Cards - Even smaller on small mobile */
    .stat-card {
        padding: 0.875rem;
    }
    
    .stat-info .stat-value {
        font-size: 1.5rem;
    }
    
    .stat-info .stat-title {
        font-size: 1rem;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
    }
    
    /* DataViewManager Cards - Two columns on mobile */
    .data-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Fix card overflow on mobile */
    .data-grid > div {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 0.75rem !important;
    }
    
    /* Fix all inline styles in cards */
    .data-grid > div[style*="padding: 1.25rem"] {
        padding: 0.75rem !important;
    }
    
    .data-grid > div > div[style*="gap: 1rem"] {
        gap: 0.5rem !important;
    }
    
    .data-grid > div > div[style*="gap: 0.75rem"] {
        gap: 0.5rem !important;
    }
    
    .data-grid > div > div[style*="gap: 0.5rem"] {
        gap: 0.375rem !important;
    }
    
    .data-grid > div > div[style*="padding: 0.75rem"] {
        padding: 0.5rem !important;
    }
    
    .data-grid > div > div[style*="margin-bottom: 1rem"] {
        margin-bottom: 0.75rem !important;
    }
    
    .data-view-card {
        padding: 0.75rem !important;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    /* Fix flex containers inside cards */
    .data-view-card > div[style*="display: flex"] {
        gap: 0.5rem !important;
    }
    
    /* Fix avatar sizes on mobile */
    .data-view-card > div[style*="width: 56px"] {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }
    
    /* Fix grid inside cards */
    .data-view-card > div[style*="grid-template-columns"] {
        gap: 0.5rem !important;
        padding: 0.5rem !important;
    }
    
    /* Course cards - Fix info grid on mobile */
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.375rem !important;
        padding: 0.625rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div {
        padding: 0 !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div[style*="border-right"] {
        border-right: 1px solid var(--border-color) !important;
        border-left: 1px solid var(--border-color) !important;
        padding: 0 0.375rem !important;
    }
    
    /* Course cards info - Smaller fonts on mobile */
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 0.6875rem"] {
        font-size: 0.625rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 1.125rem"] {
        font-size: 0.9375rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 1.125rem"] i {
        font-size: 0.75rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="gap: 0.375rem"] {
        gap: 0.25rem !important;
    }
    
    .data-view-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .data-view-card-actions {
        display: none !important;
    }
    
    /* Hide buttons container in cards on mobile - last div with flex and gap 0.5rem */
    .data-grid > div > div[style*="display: flex"][style*="gap: 0.5rem"]:last-child {
        display: none !important;
    }
    
    /* Hide all action links/buttons in cards */
    .data-grid > div a[href*="/students/"],
    .data-grid > div a[href*="/trainers/"],
    .data-grid > div a[href*="/courses/"],
    .data-grid > div button {
        display: none !important;
    }
    
    /* Alternative: Hide last flex container in each card */
    .data-grid > div > div:last-of-type[style*="display: flex"] {
        display: none !important;
    }
    
    .data-view-card-title {
        font-size: 0.8125rem;
    }
    
    .data-view-card-subtitle {
        font-size: 0.6875rem;
    }
    
    /* Fix text overflow */
    .data-view-card h3,
    .data-view-card p {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }
}

/* Forms - Mobile Responsive */
@media (max-width: 768px) {
    /* Form Grid - Single column on mobile */
    form > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Form Groups */
    .form-group {
        margin-bottom: 1rem;
    }
    
    /* Form Labels */
    .form-label {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }
    
    /* Form Inputs */
    .form-input,
    select.form-input,
    textarea.form-input {
        width: 100%;
        padding: 0.75rem;
        font-size: 0.875rem;
    }
    
    /* Form Buttons */
    .form-actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .form-actions .btn {
        width: 100%;
    }
}

/* Utility Classes for Responsive */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }
    
    .mobile-full-width {
        width: 100% !important;
    }
    
    .mobile-stack {
        flex-direction: column !important;
    }
}

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

/* ============================================
   ADDITIONAL RESPONSIVE BREAKPOINTS FOR COURSE CARDS
   ============================================ */

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    /* Course cards info - Very small on tiny screens */
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] {
        gap: 0.1875rem !important;
        padding: 0.4375rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 0.6875rem"],
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 0.625rem"],
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 0.5625rem"] {
        font-size: 0.5rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 1.125rem"],
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 0.875rem"],
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 0.75rem"] {
        font-size: 0.6875rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size"] i {
        font-size: 0.5625rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="gap: 0.375rem"],
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="gap: 0.1875rem"],
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="gap: 0.125rem"] {
        gap: 0.125rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div[style*="border-right"] {
        padding: 0 0.125rem !important;
    }
    
    /* Cards padding */
    .data-grid > div {
        padding: 0.4375rem !important;
    }
    
    /* Stats grid - Smaller gap */
    .stats-grid,
    #stats-container {
        gap: 0.4375rem !important;
    }
    
    /* Stat cards - Smaller */
    .stat-card {
        padding: 0.625rem !important;
    }
    
    .stat-info .stat-value {
        font-size: 1.125rem !important;
    }
    
    .stat-info .stat-title {
        font-size: 0.8125rem !important;
    }
    
    .stat-icon {
        width: 36px !important;
        height: 36px !important;
    }
}

/* Small Mobile (361px - 400px) */
@media (min-width: 361px) and (max-width: 400px) {
    /* Course cards info - Small */
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] {
        gap: 0.25rem !important;
        padding: 0.5rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 0.6875rem"] {
        font-size: 0.5625rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 1.125rem"] {
        font-size: 0.75rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size"] i {
        font-size: 0.625rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="gap: 0.375rem"] {
        gap: 0.1875rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div[style*="border-right"] {
        padding: 0 0.25rem !important;
    }
}

/* Medium Mobile (401px - 480px) */
@media (min-width: 401px) and (max-width: 480px) {
    /* Course cards info - Medium size */
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] {
        gap: 0.3125rem !important;
        padding: 0.5625rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 0.6875rem"] {
        font-size: 0.59375rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 1.125rem"] {
        font-size: 0.8125rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size"] i {
        font-size: 0.6875rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="gap: 0.375rem"] {
        gap: 0.25rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div[style*="border-right"] {
        padding: 0 0.3125rem !important;
    }
}

/* Medium-Large Mobile (481px - 600px) */
@media (min-width: 481px) and (max-width: 600px) {
    /* Course cards info - Slightly larger */
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] {
        gap: 0.4375rem !important;
        padding: 0.6875rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 0.6875rem"] {
        font-size: 0.625rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 1.125rem"] {
        font-size: 0.9375rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size"] i {
        font-size: 0.75rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="gap: 0.375rem"] {
        gap: 0.3125rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div[style*="border-right"] {
        padding: 0 0.4375rem !important;
    }
}

/* Large Mobile (601px - 768px) */
@media (min-width: 601px) and (max-width: 768px) {
    /* Course cards info - Normal size for large mobile */
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] {
        gap: 0.5rem !important;
        padding: 0.75rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 0.6875rem"] {
        font-size: 0.65625rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 1.125rem"] {
        font-size: 1rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size"] i {
        font-size: 0.8125rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="gap: 0.375rem"] {
        gap: 0.375rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div[style*="border-right"] {
        padding: 0 0.5rem !important;
    }
}

/* ============================================
   ADDITIONAL RESPONSIVE BREAKPOINTS
   ============================================ */

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    /* Course cards info - Very small on tiny screens */
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] {
        gap: 0.1875rem !important;
        padding: 0.4375rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 0.6875rem"],
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 0.625rem"] {
        font-size: 0.5rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 1.125rem"],
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 0.875rem"] {
        font-size: 0.6875rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size"] i {
        font-size: 0.5625rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="gap: 0.375rem"],
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="gap: 0.1875rem"] {
        gap: 0.125rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div[style*="border-right"] {
        padding: 0 0.125rem !important;
    }
    
    /* Cards padding */
    .data-grid > div {
        padding: 0.4375rem !important;
    }
    
    /* Stats grid - Smaller gap */
    .stats-grid,
    #stats-container {
        gap: 0.4375rem !important;
    }
    
    /* Stat cards - Smaller */
    .stat-card {
        padding: 0.625rem !important;
    }
    
    .stat-info .stat-value {
        font-size: 1.125rem !important;
    }
    
    .stat-info .stat-title {
        font-size: 0.8125rem !important;
    }
    
    .stat-icon {
        width: 36px !important;
        height: 36px !important;
    }
}

/* Small Mobile (361px - 400px) */
@media (min-width: 361px) and (max-width: 400px) {
    /* Course cards info - Small */
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] {
        gap: 0.25rem !important;
        padding: 0.5rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 0.6875rem"] {
        font-size: 0.5625rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 1.125rem"] {
        font-size: 0.75rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size"] i {
        font-size: 0.625rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="gap: 0.375rem"] {
        gap: 0.1875rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div[style*="border-right"] {
        padding: 0 0.25rem !important;
    }
}

/* Medium Mobile (401px - 480px) */
@media (min-width: 401px) and (max-width: 480px) {
    /* Course cards info - Medium size */
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] {
        gap: 0.3125rem !important;
        padding: 0.5625rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 0.6875rem"] {
        font-size: 0.59375rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 1.125rem"] {
        font-size: 0.8125rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size"] i {
        font-size: 0.6875rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="gap: 0.375rem"] {
        gap: 0.25rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div[style*="border-right"] {
        padding: 0 0.3125rem !important;
    }
}

/* Medium-Large Mobile (481px - 600px) */
@media (min-width: 481px) and (max-width: 600px) {
    /* Course cards info - Slightly larger */
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] {
        gap: 0.4375rem !important;
        padding: 0.6875rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 0.6875rem"] {
        font-size: 0.625rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 1.125rem"] {
        font-size: 0.9375rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size"] i {
        font-size: 0.75rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="gap: 0.375rem"] {
        gap: 0.3125rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div[style*="border-right"] {
        padding: 0 0.4375rem !important;
    }
}

/* Large Mobile (601px - 768px) */
@media (min-width: 601px) and (max-width: 768px) {
    /* Course cards info - Normal size for large mobile */
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] {
        gap: 0.5rem !important;
        padding: 0.75rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 0.6875rem"] {
        font-size: 0.65625rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size: 1.125rem"] {
        font-size: 1rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="font-size"] i {
        font-size: 0.8125rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div > div[style*="gap: 0.375rem"] {
        gap: 0.375rem !important;
    }
    
    .data-grid > div > div[style*="grid-template-columns: repeat(3"] > div[style*="border-right"] {
        padding: 0 0.5rem !important;
    }
}