/* ============================================
   responsive.css — Mobile Responsive & Hamburger Menu
   Fixed: Sidebar and hamburger z-index, proper closing behavior
   Includes fixes for Student, Lecturer, and Admin dashboards
   ============================================ */

/* ==================== Hamburger Menu Button ==================== */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  margin-right: 10px;
  z-index: 1002 !important;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.hamburger-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Desktop - hide hamburger */
@media (min-width: 769px) {
  .hamburger-btn {
    display: none !important;
  }
}

/* ==================== Sidebar Overlay ==================== */
.sidebar-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 1000 !important;
  display: none !important;
  cursor: pointer !important;
}

.sidebar-overlay.open {
  display: block !important;
}

/* ==================== Mobile Styles (up to 768px) ==================== */
@media (max-width: 768px) {
  
  /* Hamburger visible on mobile */
  .hamburger-btn {
    display: flex !important;
  }
  
  /* Dashboard grid becomes block on mobile */
  .dashboard-grid {
    display: block !important;
    position: relative;
  }
  
  /* Sidebar becomes fixed overlay on mobile */
  .dashboard-grid .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 1001 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    display: block !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2) !important;
    padding-top: 70px !important;
    background: var(--surface) !important;
    overflow-y: auto !important;
  }
  
  /* Sidebar open state */
  .dashboard-grid .sidebar.open {
    transform: translateX(0) !important;
  }
  
  /* Overlay visible when sidebar is open */
  .sidebar-overlay.open {
    display: block !important;
  }
  
  /* Main content full width on mobile */
  .dashboard-grid .main-content {
    width: 100% !important;
    padding: 16px !important;
    margin-left: 0 !important;
  }
  
  /* ==================== Topbar Styles (All Dashboards) ==================== */
  .topbar {
    padding: 8px 12px !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    position: sticky;
    top: 0;
    z-index: 1003 !important;
    background: #003087;
  }
  
  .topbar-logo {
    height: 32px !important;
    width: auto !important;
  }
  
  .topbar-logo-container {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }
  
  .tb-title {
    font-size: 13px !important;
    min-width: auto !important;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  
  /* Theme button */
  .theme-btn {
    display: flex !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }
  
  /* Sign out button */
  .tb-btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    color: white !important;
  }
  
  /* User info - hide text on mobile, show only avatar */
  .user-info .tb-user {
    display: none !important;
  }
  
  .user-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }
  
  /* Notification bell */
  .notification-bell {
    padding: 6px !important;
    font-size: 18px !important;
  }
  
  .notification-badge {
    top: -4px !important;
    right: -4px !important;
    font-size: 9px !important;
    padding: 2px 5px !important;
  }
  
  /* ==================== Stats Cards - 2 per row on tablet ==================== */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
  
  .stat-card {
    padding: 12px !important;
  }
  
  .stat-value {
    font-size: 24px !important;
  }
  
  .stat-label {
    font-size: 11px !important;
  }
  
  /* ==================== Course Cards - full width on mobile ==================== */
  .courses-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .course-card {
    padding: 14px !important;
  }
  
  .course-code {
    font-size: 16px !important;
  }
  
  .course-name {
    font-size: 13px !important;
  }
  
  .course-stats {
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 11px !important;
  }
  
  .course-buttons {
    flex-direction: column !important;
  }
  
  .course-buttons .btn {
    width: 100% !important;
  }
  
  /* ==================== Filter Bar - vertical on mobile ==================== */
  .filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  
  .filter-bar > div {
    min-width: 100% !important;
  }
  
  .filter-bar button {
    width: 100% !important;
  }
  
  /* ==================== Tables - horizontal scroll ==================== */
  .session-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  .session-table {
    min-width: 600px !important;
    font-size: 11px !important;
  }
  
  .session-table th,
  .session-table td {
    padding: 8px !important;
  }
  
  /* ==================== Timetable Grid ==================== */
  .timetable-grid {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  .timetable-grid table {
    min-width: 700px !important;
  }
  
  .timetable-grid th,
  .timetable-grid td {
    padding: 8px !important;
    font-size: 11px !important;
  }
  
  /* ==================== Notification Panel ==================== */
  .notification-panel {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 20px) !important;
    top: 70px !important;
    right: auto !important;
    max-height: 70vh !important;
  }
  
  /* ==================== Modal - full width on mobile ==================== */
  .modal-box {
    padding: 20px 16px !important;
    margin: 10px !important;
    max-width: calc(100% - 20px) !important;
  }
  
  /* ==================== Auth Card - full width on mobile ==================== */
  .auth-card {
    padding: 20px 16px !important;
    max-width: calc(100% - 20px) !important;
  }
  
  /* ==================== Forms - 2 columns become 1 on mobile ==================== */
  .two-col {
    grid-template-columns: 1fr !important;
  }
  
  /* ==================== Role Cards - 2 per row on mobile ==================== */
  .role-cards {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  
  .role-card {
    width: calc(50% - 10px) !important;
    min-width: 140px !important;
    max-width: 160px !important;
    padding: 16px 12px !important;
  }
  
  .role-icon {
    font-size: 28px !important;
  }
  
  .role-name {
    font-size: 13px !important;
  }
  
  .role-desc {
    font-size: 10px !important;
  }
  
  /* ==================== Landing Page Adjustments ==================== */
  .ug-logo {
    height: 60px !important;
  }
  
  .land-title {
    font-size: 22px !important;
  }
  
  .land-sub {
    font-size: 12px !important;
  }
  
  /* ==================== Report Charts ==================== */
  .report-chart {
    padding: 12px !important;
  }
  
  .chart-bar {
    margin: 6px 0 !important;
  }
  
  .chart-label {
    width: 100px !important;
    font-size: 10px !important;
  }
  
  /* ==================== Progress Bar ==================== */
  .progress-bar {
    height: 6px !important;
  }
  
  /* ==================== Alert Cards ==================== */
  .alert-card {
    padding: 12px !important;
    font-size: 12px !important;
  }
  
  /* ==================== Session Cards ==================== */
  .sess-card {
    padding: 12px !important;
  }
  
  .sc-hdr {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  /* ==================== Checked In Badge ==================== */
  .checked-in-badge {
    padding: 8px !important;
    font-size: 11px !important;
  }
  
  /* ==================== Message Cards ==================== */
  .message-card {
    padding: 12px !important;
  }
  
  .message-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  .message-content {
    font-size: 12px !important;
    padding: 8px !important;
  }
  
  /* ==================== Message Input Area ==================== */
  .message-input-area {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .message-input-area .fi {
    width: 100% !important;
    padding: 12px 14px !important;
  }
  
  .message-input-area .btn {
    width: 100% !important;
    padding: 12px !important;
  }
  
  /* ==================== Pagination ==================== */
  .pagination-bar {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  
  /* ==================== Recent Activity ==================== */
  .recent-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  
  /* ==================== Calendar Time Slots ==================== */
  .timetable-grid td {
    min-width: 60px !important;
  }
  
  /* ==================== Dashboard Sections ==================== */
  .dash-section h3 {
    font-size: 16px !important;
  }
}

/* ==================== Small Mobile (up to 480px) ==================== */
@media (max-width: 480px) {
  
  /* Stats Cards - 1 per row on small mobile */
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Theme button */
  .theme-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }
  
  .tb-title {
    font-size: 11px !important;
    max-width: 100px !important;
  }
  
  /* Role Cards - adjust for very small */
  .role-card {
    width: calc(50% - 8px) !important;
    min-width: 130px !important;
    padding: 12px 8px !important;
  }
  
  .role-icon {
    font-size: 24px !important;
  }
  
  .land-title {
    font-size: 18px !important;
  }
  
  /* Charts - vertical layout */
  .chart-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  .chart-label {
    width: auto !important;
  }
  
  /* Modal on very small screens */
  .modal-box {
    padding: 16px !important;
  }
  
  /* Buttons touch targets */
  .btn-sm {
    min-height: 40px !important;
  }
  
  /* Auth logo very small */
  .auth-ug-logo {
    height: 50px !important;
  }
}

/* ==================== Tablet Styles (769px - 1024px) ==================== */
@media (min-width: 769px) and (max-width: 1024px) {
  
  /* Adjust dashboard grid for tablet */
  .dashboard-grid {
    grid-template-columns: 260px 1fr;
  }
  
  /* Stats cards still 4 per row on tablet */
  .stats-grid {
    gap: 15px;
  }
  
  .stat-value {
    font-size: 28px;
  }
  
  /* Course cards grid for tablet */
  .courses-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  
  /* No hamburger on tablet */
  .hamburger-btn {
    display: none !important;
  }
  
  /* Sidebar normal on tablet */
  .dashboard-grid .sidebar {
    position: sticky !important;
    transform: none !important;
    display: block !important;
  }
  
  .sidebar-overlay {
    display: none !important;
  }
}

/* ==================== Landscape Mode for Mobile ==================== */
@media (max-width: 900px) and (orientation: landscape) {
  
  /* Adjust sidebar height for landscape */
  .dashboard-grid .sidebar {
    padding-top: 60px !important;
  }
  
  /* Keep stats cards 2 per row in landscape */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Adjust course cards in landscape */
  .courses-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  }
  
  /* Smaller padding in landscape */
  .main-content {
    padding: 12px !important;
  }
  
  /* Topbar smaller in landscape */
  .topbar {
    padding: 5px 12px !important;
  }
  
  .tb-title {
    font-size: 12px !important;
  }
  
  /* Sidebar height adjustment */
  .dashboard-grid .sidebar {
    height: 100vh !important;
    overflow-y: auto !important;
  }
}

/* ==================== Print Styles ==================== */
@media print {
  
  /* Hide navigation elements when printing */
  .topbar,
  .sidebar,
  .theme-fab,
  .notification-wrapper,
  .message-btn,
  .tb-btn,
  .hamburger-btn,
  .filter-bar button,
  .course-buttons,
  .sidebar-overlay {
    display: none !important;
  }
  
  /* Dashboard becomes block for printing */
  .dashboard-grid {
    display: block !important;
  }
  
  /* Main content takes full width */
  .main-content {
    padding: 0 !important;
  }
  
  /* Prevent page breaks inside cards */
  .stat-card,
  .course-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  
  /* Stats grid for print */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  
  /* Ensure white background for printing */
  body {
    background: white;
    color: black;
  }
  
  /* Table header styling */
  .session-table th {
    background: #003087;
    color: white;
  }
  
  /* Chart border for print */
  .report-chart {
    border: 1px solid #ddd;
  }
  
  /* Show all text in print */
  .badge {
    background: #eee !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
  }
}

/* ==================== Large Desktop (above 1400px) ==================== */
@media (min-width: 1400px) {
  
  /* Wider containers on large screens */
  .container, .pg {
    max-width: 1400px;
    margin: 0 auto;
  }
  
  /* Larger stats cards */
  .stat-value {
    font-size: 36px;
  }
  
  /* More columns for courses */
  .courses-grid {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  }
}

/* ==================== Utility Classes for Responsive ==================== */
.hide-on-mobile {
  display: block;
}

.show-on-mobile {
  display: none;
}

@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
  
  .show-on-mobile {
    display: block !important;
  }
  
  /* Text alignment on mobile */
  .text-center-mobile {
    text-align: center !important;
  }
  
  /* Full width buttons on mobile */
  .btn-full-mobile {
    width: 100% !important;
  }
}

/* ==================== Animation for Sidebar ==================== */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.sidebar-open-animation {
  animation: slideIn 0.3s ease forwards;
}

.sidebar-close-animation {
  animation: slideOut 0.3s ease forwards;
}

/* ==================== Touch-friendly adjustments ==================== */
@media (max-width: 768px) {
  /* Larger touch targets */
  .nav-item,
  .btn,
  .tb-btn,
  .hamburger-btn,
  .notification-bell {
    min-height: 44px;
  }
  
  .nav-item {
    padding: 12px !important;
  }
  
  /* Better spacing for touch */
  .course-buttons .btn {
    padding: 10px !important;
  }
  
  /* Adjust spacing for forms */
  .field {
    margin-bottom: 16px !important;
  }
  
  .fi {
    padding: 12px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  /* Modal actions full width on touch */
  .modal-actions {
    flex-direction: column !important;
  }
  
  .modal-actions .btn {
    width: 100% !important;
    max-width: none !important;
    margin: 5px 0 !important;
  }
}