/* ============================================================
   RESPONSIVE FIX — removes overrides that break existing styles
   Replace public/css/responsive.css with this
   ============================================================ */

/* Keep only layout/structural responsive rules
   Remove any rules that redefine .btn, colors, or base styles
   since those are already defined in your main CSS */

*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, iframe { max-width: 100%; }

/* ── Navbar hamburger (hidden on desktop) ────────────────────── */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #374151;
  border-radius: 2px;
  transition: all 0.25s;
}

/* Mobile nav panel */
.nav-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
}
.nav-mobile-menu.open { display: block; }
.nav-mobile-panel {
  position: fixed;
  top: 0; right: 0;
  width: min(280px, 85vw);
  height: 100vh;
  background: #fff;
  padding: 20px 0;
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.nav-mobile-menu.open .nav-mobile-panel { transform: translateX(0); }
.nav-mobile-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  border-bottom: 1px solid #f1f5f9;
}
.nav-mobile-panel a:hover { background: #f8fafc; }
.nav-mobile-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 16px;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 4px;
}

/* ── Note cards grid ─────────────────────────────────────────── */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* ── Form rows ───────────────────────────────────────────────── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ══════════════════════════════════════════════
   TABLET (max 768px)
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-links { display: none !important; }
  .nav-hamburger { display: flex !important; }

  .notes-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .form-row   { grid-template-columns: 1fr; gap: 0; }

  .auth-container { padding: 16px 12px 40px; }
  .auth-card.wide-card { max-width: 100%; }

  .viewer-page,
  .viewer-info { padding: 16px 12px; }


  .profile-container { padding: 16px 12px 40px; }
  .section-card { padding: 16px; }

  /* Admin tables scroll */
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ══════════════════════════════════════════════
   MOBILE (max 480px)
══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .notes-grid { grid-template-columns: 1fr; }

  .pdf-toolbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;
  }
  .pdf-toolbar #page-info { text-align: center; font-size: 12px; }


  h1 { font-size: 20px !important; }
  h2 { font-size: 17px !important; }

  /* Browse filter chips */
  .chips-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .chips-row::-webkit-scrollbar { display: none; }
}

/* ── Hero section button fix ────────────────────────────────── */
/* btn-outline on dark/purple backgrounds needs visible text+border */
.hero .btn-outline {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.8);
  color: #fff !important;
}
.hero .btn-outline:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
  color: #fff !important;
}
.hero .btn-primary {
  background: #fff;
  color: #4f46e5 !important;
}
.hero .btn-primary:hover {
  background: #f0f0ff;
}

/* ============================================================
   GLOBAL RESPONSIVE / POLISH LAYER
   (additive — only structural fixes, no colour or branding changes)
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;               /* no sideways page scroll from wide children */
  -webkit-font-smoothing: antialiased;
}
img { height: auto; }
pre { max-width: 100%; overflow-x: auto; }
table { max-width: 100%; }
button, .btn { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
button:disabled, .btn:disabled { cursor: not-allowed; opacity: .7; }

/* long words / URLs never push the layout wider than the screen */
.dashboard-container, .profile-container, .auth-card, .section-card { overflow-wrap: anywhere; }

/* ── Tablet and below: collapse fixed two-column / sidebar layouts ── */
@media (max-width: 900px) {
  [style*="grid-template-columns:360px 1fr"],
  [style*="grid-template-columns: 360px 1fr"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns:1fr 280px"],
  [style*="grid-template-columns: 1fr 280px"],
  [style*="grid-template-columns:1fr 260px"],
  [style*="grid-template-columns: 1fr 260px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 768px) {
  .dashboard-container { padding: 0 1rem; margin: 1.25rem auto; }
  .dashboard-header { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 1.25rem; }
  .dashboard-header h1, .dashboard-header h2 { font-size: 1.35rem; }
  .auth-card { padding: 1.75rem 1.25rem; }
  .auth-container { padding: 1rem 12px 2rem; min-height: auto; }
  .role-selector { flex-wrap: wrap; }

  /* 16px inputs stop iOS Safari zooming the page on focus */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select, textarea { font-size: 16px !important; }

  /* wide tables scroll inside their own box instead of the whole page */
  .table-scroll, .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 640px) {
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .dashboard-container { padding: 0 .75rem; }
  .btn { padding: .6rem 1.1rem; }
  .auth-card { padding: 1.5rem 1rem; border-radius: 14px; }
}

/* respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Inline icons (lucide) — replaces emoji across the site ── */
.ic {
  width: 1.1em; height: 1.1em;
  display: inline-block; vertical-align: -0.18em;
  flex-shrink: 0; stroke-width: 2;
}
svg.lucide.ic { width: 1.1em; height: 1.1em; }

/* ── Fix: global ".form-group input { width:100% }" was stretching radios/checkboxes ── */
.form-group input[type="radio"],
.form-group input[type="checkbox"] {
  width: auto; padding: 0; flex: 0 0 auto; margin: 0;
  accent-color: #4f46e5;
}
.form-group label:has(> input[type="radio"]),
.form-group label:has(> input[type="checkbox"]) { margin-bottom: 0; }
label > input[type="radio"] + div, label > input[type="checkbox"] + div { min-width: 0; }