/* ============================
   EduFindin — Responsive Overrides
   ============================ */

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

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

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

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

/* ─── ALL max-width containers on mobile ─── */
@media (max-width: 639px) {
  [style*="maxWidth: 1128"],
  [style*="max-width: 1128"],
  [style*="maxWidth: 1200"],
  [style*="max-width: 1200"],
  [style*="maxWidth: 900"],
  [style*="max-width: 900"],
  [style*="maxWidth: 860"],
  [style*="max-width: 860"],
  [style*="maxWidth: 680"],
  [style*="max-width: 680"] {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ─── Remove fixed flex-basis on mobile children ─── */
@media (max-width: 639px) {
  [style*="flex:"] {
    flex-basis: auto !important;
  }
}

/* ─── Nav Responsive ─── */
@media (max-width: 1024px) {
  [data-desktop-nav] { display: none !important; }
  [data-mobile-nav] { display: flex !important; }
}
@media (min-width: 1025px) {
  [data-mobile-nav] { display: none !important; }
  [data-desktop-nav] { display: flex !important; }
}

/* Hamburger */
[data-mobile-menu-overlay] {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
[data-mobile-menu-overlay].active { opacity: 1; visibility: visible; }

[data-mobile-menu-panel] {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding-bottom: var(--safe-bottom);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
  max-height: 85vh; overflow-y: auto;
}
[data-mobile-menu-panel].active { transform: translateY(0); }

/* ─── Navigation bar padding on mobile ─── */
@media (max-width: 639px) {
  nav > div > [style*="gap: 12"] {
    gap: 6px !important;
  }
  nav img[style*="height: 32"] {
    height: 28px !important;
  }
}

/* ─── Home Page ─── */
@media (max-width: 639px) {
  [data-home-search] { padding: 4px !important; gap: 4px !important; flex-direction: row !important; }
  [data-home-search] > div:first-child { flex: 0 0 80px !important; min-width: 0 !important; padding: 0 4px !important; border-right: none !important; }
  [data-home-search] > div:first-child input { font-size: 12px !important; min-width: 0 !important; }
  [data-home-search] > div:nth-child(2) { flex: 1 !important; min-width: 0 !important; padding: 0 4px !important; }
  [data-home-search] > div:nth-child(2) input { font-size: 12px !important; }
  [data-home-search] input { width: 100% !important; }
  [data-home-search] button { padding: 8px 12px !important; font-size: 12px !important; min-height: 36px !important; white-space: nowrap !important; flex-shrink: 0 !important; }
  [data-home-sidebar] { display: none !important; }
  [data-home-main] { max-width: 100% !important; padding: 12px !important; grid-template-columns: 1fr !important; }
  [data-stream-filter] { flex-wrap: wrap !important; padding: 8px 12px !important; gap: 6px !important; }
  [data-stream-filter] span[style*="font-size: 12"] { font-size: 11px !important; }
  [data-stream-filter] button { font-size: 11px !important; padding: 4px 12px !important; min-height: 32px !important; }
  /* Hero section */
  div[style*="padding: 48px 20px 40px"] { padding: 28px 12px 24px !important; }
  h1[style*="font-size: 34"] { font-size: clamp(22px, 6vw, 28px) !important; }
}
@media (min-width: 640px) and (max-width: 1024px) {
  [data-home-sidebar] { display: none !important; }
  [data-home-main] { max-width: 100% !important; padding: 16px !important; grid-template-columns: 1fr !important; }
}

/* ─── Collapsible leaderboard on mobile/tablet ( < 1025px ) ─── */
@media (max-width: 1024px) {
  [data-lb-collapse] > div:first-child { display: flex !important; }
}

/* ─── Card component mobile ─── */
@media (max-width: 639px) {
  .card { padding: 12px !important; }
  .card[style*="padding: 20"] { padding: 12px !important; }
  .card[style*="padding: 48"] { padding: 24px 16px !important; }
}

/* ─── Profile Page ─── */
@media (max-width: 639px) {
  [data-profile-actions] { flex-direction: column !important; gap: 6px !important; }
  [data-profile-actions] button { width: 100% !important; }
  [data-profile-cover] { height: 70px !important; }
  [data-profile-sidebar] { display: none !important; }
  [data-profile-content] { max-width: 100% !important; padding: 10px !important; grid-template-columns: 1fr !important; }
  [data-profile-tabs] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  [data-profile-tabs]::-webkit-scrollbar { display: none; }
  /* Avatar on profile */
  div[style*="margin-top: -52"] { margin-top: -24px !important; margin-bottom: 8px !important; }
  img[style*="width: 140"][style*="height: 140"] { width: 64px !important; height: 64px !important; border-width: 3px !important; border-radius: 12px !important; }
  div[style*="width: 140"][style*="height: 140"] { width: 64px !important; height: 64px !important; font-size: 22px !important; border-width: 3px !important; border-radius: 12px !important; }
  /* Profile name */
  h1[style*="font-size: 24"] { font-size: 16px !important; }
  /* Profile subtitle/about */
  div[style*="font-size: 14"][style*="line-height: 1.5"] { font-size: 12px !important; margin: 4px 0 2px !important; }
  /* About grid 1fr 1fr */
  div[style*="gridTemplateColumns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* Edit profile button area */
  div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] { flex-direction: column !important; }
  /* Profile section padding */
  div[style*="padding: 0 28px"] { padding: 0 12px !important; }
  /* Profile badges row */
  div[style*="gap: 6"][style*="flex-wrap: wrap"][style*="margin-bottom: 10"] { gap: 4px !important; }
  /* Profile additional info rows */
  div[style*="display: flex"][style*="align-items: center"][style*="gap: 8"][style*="margin-bottom: 10"] { font-size: 12px !important; gap: 4px !important; }
  /* Profile tabs buttons */
  [data-profile-tabs] button { padding: 10px 14px !important; font-size: 12px !important; }
}
@media (min-width: 640px) and (max-width: 1024px) {
  [data-profile-sidebar] { display: none !important; }
  [data-profile-content] { max-width: 100% !important; grid-template-columns: 1fr !important; }
}

/* ─── Dashboard ─── */
@media (max-width: 639px) {
  [data-grid="6"] { grid-template-columns: repeat(3,1fr) !important; gap: 6px !important; }
  [data-grid="6"] > div { padding: 8px 4px !important; }
  [data-grid="6"] [style*="font-size: 24"] { font-size: 14px !important; }
  [data-grid="6"] [style*="font-size: 11"] { font-size: 9px !important; }
  [data-grid="6"] [style*="font-size: 12"] { font-size: 10px !important; }
  [data-grid="6"] [style*="width: 42"][style*="height: 42"] { width: 20px !important; height: 20px !important; font-size: 10px !important; border-radius: 6px !important; }
  [data-grid="6"] [style*="width: 42"][style*="height: 42"] + div[style*="margin-top: 10"] { display: none !important; }
  [data-grid="6"] [style*="margin-top: 10"] { display: none !important; }
  [data-grid="6"] [style*="margin: 0 auto 10"] { margin: 0 auto 6px !important; }
  [data-grid="4"] { grid-template-columns: 1fr !important; }
  [data-grid="3"] { grid-template-columns: 1fr !important; }
  [data-grid="2"] { grid-template-columns: 1fr !important; }
  div[style*="maxWidth: 1200"] { max-width: 100% !important; padding: 12px !important; }
  /* Dashboard sidebar nav hiding */
  div[style*="padding: 8px 16px"][style*="border-radius: 10"] { padding: 6px 12px !important; font-size: 12px !important; }
  /* Dashboard action buttons (Edit/View Profile) */
  [data-dash-actions] { flex-direction: column !important; gap: 6px !important; }
  [data-dash-actions] button { width: 100% !important; justify-content: center !important; }
}
@media (min-width: 640px) and (max-width: 1024px) {
  [data-grid="6"] { grid-template-columns: repeat(3, 1fr) !important; }
  [data-grid="4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-grid="3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-drawer="std"] { padding: 16px !important; }
  [data-drawer-tabs] { flex-wrap: wrap !important; }
  [data-drawer-tabs] button { flex: 1 1 auto !important; font-size: 10px !important; padding: 6px 8px !important; }
  [data-student-grid] { grid-template-columns: 1fr !important; }
}
@media (max-width: 639px) {
  [data-drawer="std"] { padding: 12px !important; }
  [data-drawer-header] { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
  [data-drawer-header] h4 { font-size: 14px !important; flex-wrap: wrap !important; }
  [data-drawer-close] { align-self: flex-end !important; }
  [data-drawer-tabs] { flex-wrap: wrap !important; gap: 4px !important; }
  [data-drawer-tabs] button { flex: 1 1 calc(50% - 4px) !important; font-size: 10px !important; padding: 7px 4px !important; white-space: nowrap !important; }
  [data-student-grid] { grid-template-columns: 1fr !important; }
  [data-drawer-outer] { padding: 12px !important; }
  [data-posts-grid] { grid-template-columns: 1fr !important; gap: 6px !important; }
  [data-posts-grid] > div { padding: 8px !important; }
  [data-posts-grid] [style*="font-size: 18"] { font-size: 14px !important; }
  [data-form-grid-2] { grid-template-columns: 1fr !important; gap: 0 !important; }
  [data-form-grid-2] > div { margin-bottom: 8px !important; }
}

/* ─── Forms ─── */
@media (max-width: 639px) {
  [data-form-row] { flex-direction: column !important; }
  [data-form-row] > * { width: 100% !important; }
  [data-form-actions] { flex-direction: column-reverse !important; }
  [data-form-actions] button { width: 100% !important; }
  /* Edit profile section */
  div[style*="padding: 24"][style*="border-radius: 8"] { padding: 16px !important; }
}

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

/* ─── Modals ─── */
@media (max-width: 639px) {
  [data-modal] { width: 95vw !important; max-height: 90vh !important; margin: 0 auto !important; border-radius: 16px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  [data-modal-overlay] { align-items: flex-end !important; padding: 0 !important; }
}
@media (min-width: 640px) and (max-width: 1024px) {
  [data-modal] { width: 80vw !important; max-height: 85vh !important; }
}

/* ─── Tables → Cards on Mobile ─── */
@media (max-width: 639px) {
  table[data-responsive] thead { display: none !important; }
  table[data-responsive] tbody, table[data-responsive] tbody tr { display: block !important; }
  table[data-responsive] tbody tr { border: 1px solid #E4E6EB !important; border-radius: 12px !important; padding: 12px !important; margin-bottom: 12px !important; background: #fff !important; }
  table[data-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 #F0F2F5 !important; gap: 8px !important; }
  table[data-responsive] tbody td:last-child { border-bottom: none !important; }
  table[data-responsive] tbody td::before { content: attr(data-label) !important; font-weight: 600 !important; color: #5B6770 !important; font-size: 12px !important; flex-shrink: 0 !important; }
  table[data-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: 650px !important; }
}

/* ─── Search / Filters ─── */
@media (max-width: 639px) {
  [data-search-filters] { flex-direction: column !important; gap: 10px !important; }
  [data-search-filters] > * { width: 100% !important; }
  [data-search-filters] span[style*="margin-left: auto"] { margin-left: 0 !important; }
}

/* ─── Edit Profile Tabs ─── */
@media (max-width: 639px) {
  [data-edit-tabs] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  [data-edit-tabs]::-webkit-scrollbar { display: none; }
  [data-edit-tabs] button { font-size: 12px !important; padding: 8px 12px !important; }
}

/* ─── EditProfile tab content (mobile fixes) ─── */
@media (max-width: 639px) {
  /* Collapse 3-col grids to 1 col */
  div[style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* Collapse 2-col grids to 1 col */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 16"] { grid-template-columns: 1fr !important; }
  /* Wrap flex rows with space-between to prevent overlap */
  div[style*="display: flex"][style*="justify-content: space-between"][style*="align-items:"] { flex-wrap: wrap !important; gap: 6px !important; }
  /* Add horizontal scroll to list containers */
  div[style*="max-height: 450"][style*="overflow: auto"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  div[style*="max-height: 400"][style*="overflow: auto"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* Reduce card padding further */
  div[style*="padding: 24"][style*="border-radius: 8"] { padding: 12px !important; }
  /* Reduce margins and spacing inside tab cards */
  h3[style*="margin-bottom: 12"] { font-size: 14px !important; margin-bottom: 8px !important; }
  /* Fix credential edit form: stack inputs */
  div[style*="align-items: flex-end"][style*="gap: 8"]:not([style*="justify-content"]) { flex-wrap: wrap !important; }
  div[style*="align-items: flex-end"][style*="gap: 8"] > div { flex: 1 1 100% !important; }
  /* Overflow handling for student detail text */
  div[style*="font-size: 11"][style*="color: rgb"]:not([style*="background"]) { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  /* Make PhoneList 1 col */
  div[style*="flex-direction: column"][style*="gap: 6"] input { font-size: 13px !important; }
  /* Reduce input padding inside tab forms */
  input[style*="padding: 10px"][style*="border-radius: 4"]:not([type="file"]) { padding: 8px !important; font-size: 12px !important; }
  select[style*="padding: 10px"][style*="border-radius: 4"] { padding: 8px !important; font-size: 12px !important; }
  /* Fix teacher search results layout */
  div[style*="display: flex"][style*="gap: 10"][style*="background:"] > button { flex-shrink: 0 !important; }
}

/* ─── Drawers ─── */
@media (max-width: 639px) {
  [data-drawer] { width: 90vw !important; max-width: 90vw !important; }
}
@media (min-width: 640px) and (max-width: 1024px) {
  [data-drawer] { width: 60vw !important; max-width: 60vw !important; }
}

/* ─── Charts ─── */
@media (max-width: 639px) {
  [data-chart] { height: 200px !important; }
}
@media (min-width: 640px) and (max-width: 1024px) {
  [data-chart] { height: 250px !important; }
}

/* ─── Safe Areas ─── */
@supports (padding: env(safe-area-inset-bottom)) {
  body { padding-bottom: env(safe-area-inset-bottom); padding-top: env(safe-area-inset-top); }
}

/* ─── Landscape ─── */
@media (max-height: 480px) and (orientation: landscape) {
  [data-modal] { max-height: 85vh !important; overflow-y: auto !important; }
  [data-mobile-menu-panel] { max-height: 80vh !important; }
  [data-profile-cover] { height: 70px !important; }
}

/* ─── Job Board ─── */
@media (max-width: 639px) {
  div[style*="padding: 40px 20px 32px"] { padding: 24px 12px 20px !important; }
  h1[style*="font-size: 30"] { font-size: 22px !important; }
}

/* ─── Login / Register ─── */
@media (max-width: 639px) {
  div[style*="padding: 28"][style*="border-radius: 14"] { padding: 20px 16px !important; }
  div[style*="min-height: 100vh"][style*="display: flex"][style*="align-items: center"] { padding: 12px !important; }
  div[style*="maxWidth: 420"] { max-width: 100% !important; }
  img[style*="height: 104"] { height: 72px !important; }
  h1[style*="font-size: 28"] { font-size: 22px !important; }
}
@media (max-width: 380px) {
  button[style*="flex: 1"][style*="font-size: 12"] { font-size: 11px !important; padding: 8px 2px !important; }
}

/* ─── Comments ─── */
@media (max-width: 639px) {
  [data-comment-input] { flex-direction: column !important; }
  [data-comment-input] input { width: 100% !important; }
}

/* ─── Edit Profile Avatar section ─── */
@media (max-width: 639px) {
  div[style*="display: flex"][style*="align-items: center"][style*="gap: 16"][style*="margin-bottom: 16"] { flex-direction: column !important; align-items: flex-start !important; }
  div[style*="width: 120"][style*="height: 120"] { width: 72px !important; height: 72px !important; font-size: 28px !important; }
}

/* ─── EditProfile form compaction ─── */
@media (max-width: 639px) {
  div[style*="height: 140"][style*="border-radius: 8"] { height: 90px !important; }
  div[style*="padding: 24"][style*="border-radius: 8"] { padding: 14px !important; }
  div[style*="margin-bottom: 16"]:not([data-grid]) { margin-bottom: 10px !important; }
  div[style*="margin-bottom: 14"] { margin-bottom: 8px !important; }
  div[style*="margin-bottom: 12"] { margin-bottom: 8px !important; }
  div[style*="padding-top: 16"][style*="border-top"] { padding-top: 10px !important; }
  label[style*="display: block"] { font-size: 12px !important; }
  input[style*="padding: 10px 12px"], textarea[style*="padding: 10px 12px"] { padding: 7px 10px !important; font-size: 13px !important; }
  select[style*="padding: 10px"] { padding: 7px 10px !important; font-size: 13px !important; }
  div[style*="padding: 8px 16px"][style*="border-radius: 20"] { font-size: 12px !important; }
}

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

/* ─── Dashboard header / profile section compaction ─── */
@media (max-width: 639px) {
  div[style*="padding: 24px"]:not([data-grid]) > div[style*="display: flex"][style*="gap: 16"] img[style*="width: 72"],
  div[style*="padding: 24px"]:not([data-grid]) img[style*="width: 72"] { width: 56px !important; height: 56px !important; }
  div[style*="padding: 24px"]:not([data-grid]) h1[style*="font-size: 20"] { font-size: 16px !important; }
  div[style*="padding: 24px"]:not([data-grid]) div[style*="font-size: 13"] { font-size: 12px !important; }
  div[style*="padding: 24px"]:not([data-grid]) div[style*="font-size: 12"] { font-size: 11px !important; }
}

/* ─── Dashboard inner content compaction ─── */
@media (max-width: 639px) {
  div[style*="maxWidth: 1200"][style*="padding: 24"] { padding: 12px !important; }
}

/* ─── Institute Cards (HomePage) ─── */
@media (max-width: 639px) {
  div[style*="gap: 16"][style*="cursor: pointer"] > div[style*="flexShrink: 0"] { display: none !important; }
  div[style*="gap: 16"][style*="cursor: pointer"] img[style*="width: 60"] { width: 44px !important; height: 44px !important; font-size: 14px !important; }
}

/* ─── Teacher Results on Home ─── */
@media (max-width: 639px) {
  div[style*="gap: 16"][style*="align-items: center"] img[style*="width: 50"] { width: 36px !important; height: 36px !important; }
}

/* ─── Table → Cards on Mobile ─── */
@media (max-width: 639px) {
  table[data-responsive] thead { display: none !important; }
  table[data-responsive] tbody, table[data-responsive] tbody tr { display: block !important; width: 100% !important; }
  table[data-responsive] tbody tr {
    border: 1px solid #E0E0E0 !important;
    border-radius: 10px !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  }
  table[data-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 #EAEAEA !important;
    gap: 8px !important;
    max-width: 100% !important;
  }
  table[data-responsive] tbody td:last-child { border-bottom: none !important; }
  table[data-responsive] tbody td::before {
    content: attr(data-label) !important;
    font-weight: 600 !important;
    color: #666 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    flex-shrink: 0 !important;
  }
  table[data-responsive] tbody td > * { text-align: right !important; }
}

/* ─── Table scroll container ─── */
@media (max-width: 639px) {
  [data-table-scroll] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px !important;
    padding: 0 12px !important;
  }
}

/* ─── All flex containers with nowrap ─── */
@media (max-width: 639px) {
  div[style*="display: flex"][style*="flexWrap: nowrap"] { flex-wrap: wrap !important; }
  /* But restore nowrap for horizontal scroll areas */
  [data-edit-tabs], [data-profile-tabs], [data-admin-tabs] { flex-wrap: nowrap !important; }
  /* Stream filter should wrap on mobile */
  [data-stream-filter] { overflow: visible !important; flex-wrap: wrap !important; }
}

/* ─── Spacing fixes for any element using px-based widths ─── */
@media (max-width: 639px) {
  [style*="width:"][style*="px"]:not(img):not(svg):not([style*="width: 100%"]):not([style*="width:100%"]) {
    max-width: 100% !important;
  }
}