/* ================================================================
 * 📄 File: responsive.css
 * 📍 Path: /assets/css/responsive.css
 * 🎯 Purpose: Final responsive grid & fluid font-scaling for MCQuizXam
 * 🌐 Created: Oct 2025 — copy-paste ready
 * ================================================================ */

/* -------------------------
   0) BASE / FLUID TYPOGRAPHY
   - Uses clamp() for fluid scaling between mobile and desktop
--------------------------*/
:root{
  --fs-xs: clamp(12px, 1.8vw, 13px);
  --fs-sm: clamp(13px, 2.0vw, 14px);
  --fs-md: clamp(14px, 2.2vw, 15px);
  --fs-lg: clamp(16px, 2.6vw, 18px);
  --fs-xl: clamp(20px, 3.4vw, 24px);

  --container-max: 1280px;
  --gutter: 16px;
}

/* Apply fluid base font-size for html (affects rem) */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }

/* Body scales using clamp fallback values above */
body { font-size: var(--fs-md); }

/* Headings */
h1 { font-size: var(--fs-xl); margin: 0 0 .5rem; line-height: 1.12; }
h2 { font-size: clamp(18px,2.8vw,20px); margin:0 0 .4rem; line-height:1.18; }
h3 { font-size: var(--fs-lg); margin:0 0 .35rem; }
h4,h5,h6 { font-size: var(--fs-sm); margin:0 0 .25rem; }

/* Utility type classes */
.text-sm { font-size: var(--fs-sm); }
.text-md { font-size: var(--fs-md); }
.text-lg { font-size: var(--fs-lg); }
.lead { font-size: clamp(15px,2.2vw,16px); color: #4a4a4a; }

/* -------------------------
   1) RESPONSIVE CONTAINER & GRID
--------------------------*/
.container {
  width: min(var(--container-max), calc(100% - 32px));
  margin: 0 auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

/* Flexible grid: use gap and auto-fit for cards */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* Simple responsive helper for cards (alternative) */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

/* -------------------------
   2) SIDEBAR & MAIN LAYOUT HELPERS
   Keep in sync with style-dashboard variables
--------------------------*/
@media (min-width: 1200px) {
  /* desktop: two-column with fixed sidebar width handled by existing CSS */
  .mcqxam-main-area { padding: 18px; }
}

@media (max-width: 1199px) {
  .mcqxam-main-area { padding: 14px; }
}

/* Mobile: ensure sidebar overlays and main content full width */
@media (max-width: 992px) {
  .mcqxam-main-area { margin-left: 0 !important; padding: 12px; }
  .mcqxam-sidebar { left: -260px; } /* toggle opens it */
  body.mcqxam-sidebar-open .mcqxam-sidebar { left: 0; }
}

/* -------------------------
   3) NAV / HEADER / FOOTER ADJUSTMENTS
--------------------------*/
.mcqxam-header-inner, .mcqxam-header-dash-inner {
  padding-left: 12px;
  padding-right: 12px;
}

/* Collapsible menu icon visibility on small screens */
@media (max-width: 768px) {
  .header-right { display: none; } /* show via offcanvas or hamburger */
  .mcqxam-site-name { font-size: clamp(14px,3.2vw,16px); }
}

/* Footer compact */
@media (max-width: 480px) {
  .mcqxam-footer { font-size: 13px; padding: 6px 8px; }
}

/* -------------------------
   4) TABLE RESPONSIVE (wrap into scroll container)
--------------------------*/
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px; /* prevents too narrow cells; server returns simplified markup when needed */
}

/* Compact table cells on small screens */
@media (max-width: 768px) {
  .mcq-table th, .mcq-table td { padding: 8px 10px; font-size: var(--fs-sm); }
  .modal-data-table th, .modal-data-table td { padding: 6px 8px; font-size: 12.5px; }
}

/* ================================================================
 * 📋 TABLE DESIGN – Sticky Header + Mobile Card View (Final)
 * ================================================================ */

.table-responsive {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  scrollbar-width: thin;
}
.table-responsive::-webkit-scrollbar {
  height: 6px;
}
.table-responsive::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

/* ✅ Table base */
.mcq-table {
  width: 100%;
  min-width: 1000px;
  border-collapse: collapse;
  border-spacing: 0;
  background: #fff;
  table-layout: auto;
}

/* 🧭 Header */
.mcq-table thead th {
  background: linear-gradient(135deg, #0073aa, #005f8d);
  color: #fff;
  padding: 12px 10px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
  border-bottom: 2px solid #005f8d;
}
.mcq-table thead th:first-child { border-top-left-radius: 10px; }
.mcq-table thead th:last-child { border-top-right-radius: 10px; }

/* 🧾 Rows */
.mcq-table tbody tr {
  transition: background 0.15s ease;
}
.mcq-table tbody tr:nth-child(even) { background: #f9fbfd; }
.mcq-table tbody tr:hover { background: #e9f6ff; }
.mcq-table td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #333;
  vertical-align: middle;
}
.mcq-table td small { font-size: 12px; color: #777; }
.mcq-table td b { color: #222; }

/* 🎯 Status Tags */
.mcq-table .status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: capitalize;
}
.status.published { background: #e8f8f1; color: #27ae60; border: 1px solid #b8e5cf; }
.status.draft { background: #fff5d6; color: #f39c12; border: 1px solid #f1d394; }
.status.expired { background: #fdecea; color: #e74c3c; border: 1px solid #f3b1a9; }

/* ⚙️ Action Buttons */
.mcq-table .btn {
  padding: 5px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: 0.2s;
}
.mcq-table .btn.edit { background: #3498db; color: #fff; }
.mcq-table .btn.delete { background: #e74c3c; color: #fff; margin-left: 5px; }
.mcq-table .btn.edit:hover { background: #2980b9; }
.mcq-table .btn.delete:hover { background: #c0392b; }

/* ================================================================
 * 📱 RESPONSIVE FIXES
 * ================================================================ */

/* Tablet (horizontal scroll + visible header) */
@media (max-width: 768px) {
  .mcq-table { min-width: 850px; }
  .mcq-table thead {
    display: table-header-group !important;
    position: relative !important;
    z-index: 5;
  }
}




/* -------------------------
   5) FORMS & INPUTS RESPONSIVE
--------------------------*/
.form-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
.form-row .full { grid-column: 1 / -1; }

@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; }
  .mcqxam-modal-body input, .mcqxam-modal-body select, .mcqxam-modal-body textarea {
    font-size: var(--fs-sm);
  }
}

/* Buttons full width on small screens */
@media (max-width: 480px) {
  .btn { width: 100%; display: inline-block; text-align: center; }
  .btn.small { width: auto; }
}

/* -------------------------
   6) IMAGES / MEDIA
--------------------------*/
.responsive-img, img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* avatar sizes responsive */
.profile-avatar img { width: clamp(40px,6vw,70px); height: clamp(40px,6vw,70px); }

/* -------------------------
   7) UTILITIES (visibility, spacing helpers)
--------------------------*/
.u-hidden { display: none !important; }
.u-visible { display: block !important; }

.mt-1 { margin-top: 6px; } .mt-2 { margin-top: 10px; } .mt-3 { margin-top: 16px; }
.mb-1 { margin-bottom: 6px; } .mb-2 { margin-bottom: 10px; } .mb-3 { margin-bottom: 16px; }

.p-1 { padding: 6px; } .p-2 { padding: 10px; } .p-3 { padding: 14px; }

/* Truncate utility */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Center helpers */
.center { display:flex; align-items:center; justify-content:center; }

/* -------------------------
   8) SKELETONS (responsive counts)
--------------------------*/
.skeleton-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
}
.skeleton-box { height: 86px; background: linear-gradient(90deg,#f3f4f6,#eef2f6); border-radius:8px; }

/* -------------------------
   9) MOTION / ACCESSIBILITY
   Respect prefers-reduced-motion
--------------------------*/
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* -------------------------
 10) SMALL DEV FIXES (prevent horizontal overflow)
--------------------------*/
html, body { max-width: 100%; overflow-x: hidden; }

/* Ensure modals never exceed viewport height on small devices */
.mcqxam-modal-content { max-height: calc(100vh - 96px); }

/* -------------------------
 11) PRINT (basic)
--------------------------*/
@media print {
  body { color: #000; background: #fff; }
  .mcqxam-header, .mcqxam-footer, .mcqxam-sidebar, .overlay, #ui-toast-container { display: none !important; }
  .mcqxam-main-area { margin: 0; padding: 0; }
  .mcq-table { font-size: 12px; }
}

/* ================================================================
   End of responsive.css — paste this file into /assets/css/
   Make sure this file is enqueued after other component CSS so overrides apply.
 * ================================================================ */