/* ============================
   EduFindin Admin Panel — Responsive Overrides
   ============================ */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }
#root { width: 100%; max-width: 100vw; overflow-x: hidden; }

body, input, textarea, select, button { font-size: clamp(13px, 1.4vw, 15px); }

/* ─── Header ─── */
@media (max-width: 639px) {
  [data-admin-header] { padding: 12px 16px !important; }
  [data-admin-header] button:not([data-hamburger]) { min-height: 40px !important; }
}

/* ─── Sidebar ─── */
@media (max-width: 639px) {
  [data-admin-sidebar] {
    position: fixed !important;
    left: -280px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 260px !important;
    z-index: 1001 !important;
    transition: left 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
    min-height: 100vh !important;
    padding-top: calc(60px + var(--safe-top)) !important;
    display: block !important;
  }
  [data-admin-sidebar].open { left: 0 !important; }

  [data-admin-sidebar] [data-nav-item] {
    padding: 14px 20px !important;
    text-align: left !important;
  }

  div[style*="min-height: calc(100vh - 60px)"] {
    min-height: 100vh !important;
  }
}

@media (min-width: 640px) and (max-width: 1024px) {
  [data-admin-sidebar] {
    width: 60px !important;
    overflow: hidden !important;
    transition: width 0.25s ease !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
  [data-admin-sidebar] > div > span, [data-admin-sidebar] [data-label] {
    display: none !important;
  }
  [data-admin-sidebar]:hover { width: 240px !important; }
  [data-admin-sidebar]:hover > div > span, [data-admin-sidebar]:hover [data-label] {
    display: inline !important;
  }
  [data-admin-sidebar] > div {
    padding: 14px 18px !important;
    text-align: center !important;
    justify-content: center !important;
  }
  [data-admin-sidebar]:hover > div {
    padding: 14px 28px !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
}

/* Sidebar overlay */
[data-sidebar-overlay] {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
[data-sidebar-overlay].open { opacity: 1; visibility: visible; }

@media (max-width: 639px) {
  [data-sidebar-overlay] { display: block !important; }
}
@media (min-width: 640px) {
  [data-sidebar-overlay] { display: none !important; }
  [data-hamburger] { display: none !important; }
}

/* ─── Content Area ─── */
@media (max-width: 639px) {
  [data-admin-content] { padding: 12px !important; }
}
@media (min-width: 640px) and (max-width: 1024px) {
  [data-admin-content] { padding: 16px !important; }
}
@media (min-width: 1025px) {
  [data-admin-content] { padding: 28px !important; }
}

/* ─── Main layout - ensure sidebar is visible on desktop ─── */
@media (max-width: 639px) {
  div[style*="display: flex"] > [data-admin-sidebar] { display: block !important; }
}

/* ─── Stats Grid ─── */
@media (max-width: 639px) {
  [data-admin-grid="4"] { grid-template-columns: 1fr !important; gap: 10px !important; }
  [data-admin-grid="4"] > div { padding: 16px !important; }
  [data-admin-grid="4"] [style*="font-size: 38"] { font-size: 28px !important; }
}
@media (min-width: 640px) and (max-width: 1024px) {
  [data-admin-grid="4"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ─── Charts Grid 1fr 1fr ─── */
@media (max-width: 639px) {
  div[style*="gridTemplateColumns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  div[data-admin-chart] { height: 200px !important; }
  div[style*="gridTemplateColumns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ─── Page Title ─── */
@media (max-width: 639px) {
  [data-page-title] { font-size: 20px !important; margin-bottom: 12px !important; }
}

/* ─── Tables → Cards on Mobile ─── */
@media (max-width: 639px) {
  table[data-admin-responsive] thead { display: none !important; }
  table[data-admin-responsive] tbody, table[data-admin-responsive] tbody tr { display: block !important; }
  table[data-admin-responsive] tbody tr {
    border: 1px solid #2A2A3E !important;
    border-radius: 12px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    background: #1A1A2E !important;
  }
  table[data-admin-responsive] tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border: none !important;
    border-bottom: 1px solid #2A2A3E !important;
    gap: 8px !important;
    max-width: 100% !important;
  }
  table[data-admin-responsive] tbody td:last-child { border-bottom: none !important; }
  table[data-admin-responsive] tbody td::before {
    content: attr(data-label) !important;
    font-weight: 600 !important;
    color: #8888A0 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    flex-shrink: 0 !important;
  }
  table[data-admin-responsive] tbody td > * { text-align: right !important; }

  div[data-table-scroll] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px !important;
    padding: 0 12px !important;
  }
}
@media (min-width: 640px) and (max-width: 1024px) {
  div[data-table-scroll] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  div[data-table-scroll] table { min-width: 600px !important; }
}

/* ─── Forms ─── */
@media (max-width: 639px) {
  [data-admin-form-row] { flex-direction: column !important; }
  [data-admin-form-row] > * { width: 100% !important; }
  [data-admin-form-actions] { flex-direction: column !important; }
  [data-admin-form-actions] button { width: 100% !important; }
}

/* ─── Buttons ─── */
@media (max-width: 639px) {
  button, [role="button"], .btn, input[type="submit"] { min-height: 44px !important; }
}

/* ─── Search ─── */
@media (max-width: 639px) {
  [data-admin-search] { width: 100% !important; max-width: 100% !important; }
  [data-admin-filters] { flex-direction: column !important; gap: 10px !important; }
  [data-admin-filters] > * { width: 100% !important; }
}

/* ─── Modals ─── */
@media (max-width: 639px) {
  [data-admin-modal] {
    width: 95vw !important;
    max-height: 90vh !important;
    margin: 0 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 16px !important;
  }
  [data-admin-modal] [style*="display: flex"][style*="gap: 12"] {
    flex-direction: column !important;
  }
  [data-admin-modal] [style*="display: flex"][style*="gap: 12"] button {
    width: 100% !important;
  }
}
@media (min-width: 640px) and (max-width: 1024px) {
  [data-admin-modal] { width: 80vw !important; max-height: 85vh !important; }
}

/* ─── Access Request summary grid ─── */
@media (max-width: 639px) {
  div[style*="gridTemplateColumns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ─── Tabs ─── */
@media (max-width: 639px) {
  [data-admin-tabs] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
  [data-admin-tabs]::-webkit-scrollbar { display: none; }
  [data-admin-tabs] button { white-space: nowrap !important; flex-shrink: 0 !important; }
}

/* ─── Restoration items ─── */
@media (max-width: 639px) {
  [data-restore-items] { grid-template-columns: 1fr !important; }
}

/* ─── Security page ─── */
@media (max-width: 639px) {
  [data-security-section] { flex-direction: column !important; gap: 16px !important; }
  [data-security-section] > div { width: 100% !important; }
  div[style*="maxWidth: 500"] { max-width: 100% !important; }
  img[style*="width: 200"][style*="height: 200"] { width: 160px !important; height: 160px !important; }
}

/* ─── Login page ─── */
@media (max-width: 639px) {
  [data-admin-login] [style*="padding: 40"] { padding: 24px 20px !important; }
  [data-admin-login] { padding: 12px !important; }
  div[style*="maxWidth: 400"] { max-width: 100% !important; }
}

/* ─── Spacing adjustments ─── */
@media (max-width: 639px) {
  [data-mobile-padding] { padding-left: 12px !important; padding-right: 12px !important; }
  [data-mobile-stack] { flex-direction: column !important; }
  [data-mobile-stack] > * { width: 100% !important; }
}

/* ─── Stat Cards ─── */
@media (max-width: 639px) {
  [data-admin-stat] { padding: 16px !important; }
  [data-admin-stat-number] { font-size: 28px !important; }
}

/* ─── Fix any fixed-width elements ─── */
@media (max-width: 639px) {
  input[style*="width: 600"]:not([type="checkbox"]):not([type="radio"]),
  input[style*="width:600"]:not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important;
    max-width: 100% !important;
  }
  textarea[style*="width: 600"] { width: 100% !important; max-width: 100% !important; }
}

/* ─── Badges ─── */
@media (max-width: 639px) {
  [data-admin-badge] { font-size: 10px !important; padding: 3px 8px !important; }
  span[style*="padding: 4px 12px"][style*="border-radius: 20"] { font-size: 10px !important; padding: 3px 8px !important; }
}

/* ─── Sidebar nav items with labels on tablet ─── */
span[style*="display: flex"][style*="align-items: center"][style*="gap: 8"] {
  align-items: center !important;
}

/* ─── Users tab buttons on mobile ─── */
@media (max-width: 639px) {
  button[style*="padding: 12px 24px"][style*="border-radius: 8"] {
    padding: 10px 16px !important;
    font-size: 12px !important;
  }
}

/* ─── OTP input ─── */
@media (max-width: 639px) {
  input[style*="font-size: 24"][style*="letter-spacing: 6"] {
    font-size: 18px !important;
    letter-spacing: 4px !important;
  }
}