/* ══════════════════════════════════════════
   مِداد v4 — Responsive Styles
══════════════════════════════════════════ */

/* ── Tablet (< 1024px) ── */
@media (max-width: 1023px) {
  :root { --raside-w: 0px; }

  .app-shell {
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-areas: "sidebar main";
  }
  .r-aside { display: none; }
  .main-content { padding: var(--sp5) var(--sp4); }
}

/* ── Mobile landscape (< 768px) ── */
@media (max-width: 767px) {
  :root {
    --sidebar-w: 0px;
    --topbar-h: 52px;
  }

  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "main";
  }

  /* Sidebar becomes drawer */
  .sidebar {
    position: fixed;
    top: var(--topbar-h); right: -100%;
    width: 260px;
    height: calc(100vh - var(--topbar-h));
    z-index: 91;
    transition: right var(--tr2);
    box-shadow: var(--sh3);
    border-left: none;
    border-right: 1px solid var(--border);
  }
  .sidebar.open { right: 0; }
  /* sidebar-overlay visibility is controlled by JS toggleSidebar() only */

  .hamburger { display: flex; }
  .nav-search { max-width: 180px; margin: 0 var(--sp2); }
  .nav-search input { font-size: .8rem; }

  .main-content { padding: var(--sp4) var(--sp3); }

  /* Write modal fullscreen on tablet/mobile */
  .modal-write {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    top: 0; left: 0;
    transform: none;
    border-radius: 0;
  }

  /* Profile */
  .profile-stats { gap: var(--sp4); }
  .p-stat strong { font-size: .95rem; }

  /* Admin - stack layout */
  .admin-layout { grid-template-columns: 1fr; gap: 12px; }
  .admin-sidebar {
    position: static;
    display: flex; flex-wrap: wrap; gap: 0;
    border-radius: var(--r3);
    overflow-x: auto;
  }
  .admin-nav-item {
    flex: 0 0 auto;
    border-bottom: none;
    border-left: 1px solid var(--border);
    padding: 10px 14px;
    white-space: nowrap;
  }
  .admin-nav-item:first-child { border-radius: var(--r3) 0 0 var(--r3); }
  .admin-nav-item:last-child  { border-left: none; border-radius: 0 var(--r3) var(--r3) 0; }
  .admin-nav-item.active { border-right: none; border-bottom: 3px solid var(--accent); }
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Feed */
  .feed-bar { gap: var(--sp2); }
  .cat-filter-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .cat-filter-bar::-webkit-scrollbar { height: 3px; }

  /* Cards */
  .a-card-img { height: 140px; }

  /* Leaderboard */
  .lb-row { padding: 10px var(--sp3); gap: var(--sp2); }

  /* Modals */
  .modal {
    width: calc(100vw - 24px);
    padding: var(--sp5) var(--sp4);
    max-height: calc(100vh - 24px);
  }
  .modal-sm { width: calc(100vw - 24px); }
  .form-grid { grid-template-columns: 1fr; }

  /* Article */
  .article-title { font-size: 1.4rem; }
  .article-meta { gap: 8px; }

  /* Comments */
  .comment.reply { margin-right: 24px; }

  /* Nav */
  .writeNavBtn span { display: none; }
  .nav-actions { gap: 4px; }
}

/* ── Small mobile (< 480px) ── */
@media (max-width: 479px) {
  .nav-search { display: none; }
  .brand span { display: none; }

  .article-actions { gap: 4px; }
  .act-btn { padding: 6px 10px; font-size: .76rem; }

  .profile-header { padding: 0 var(--sp3) var(--sp4); }
  .profile-avatar { width: 64px; height: 64px; }
  .profile-name { font-size: 1rem; }

  .write-header { padding: 10px 12px 8px; }
  .write-title-input { font-size: 1.15rem; }
  .write-meta-row { gap: 5px; }
  .editor-toolbar { gap: 1px; padding: 4px 8px; overflow-x: auto; flex-wrap: nowrap; }
  .tb-btn { min-width: 28px; height: 28px; }
  .editor-textarea { padding: 14px; font-size: .9rem; }
  .write-footer { padding: 8px 12px; }
  .editor-tabs { padding: 0 10px; overflow-x: auto; }
  .ed-tab { padding: 8px 10px; font-size: .75rem; }
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .country-block-form-grid { grid-template-columns: 1fr !important; }

  .tb-btn { width: 26px; height: 25px; font-size: .76rem; }

  .lb-header h1 { font-size: 1.5rem; }
  .data-table { font-size: .78rem; }
  .data-table th, .data-table td { padding: 8px 10px; }
}

/* ── Print ── */
@media print {
  .topbar, .sidebar, .r-aside, .article-actions,
  .comments-section, .quote-popup, .toast-container { display: none !important; }
  .app-shell { display: block; margin-top: 0; }
  .main-content { padding: 0; border: none; }
  .article-prose { font-size: 12pt; }
}

/* ── High contrast / reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}