/*
 * Looko.live — Admin Responsive Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * خط قرمز: هیچ استایلی در این فایل بدون media query نوشته نمی‌شود.
 * دسکتاپ (≥ 1024px) در هیچ شرایطی تغییر نمی‌کند.
 *
 * Breakpoint map:
 *   xs  → max-width: 479px   (موبایل عمودی کوچک)
 *   sm  → max-width: 767px   (موبایل / موبایل بزرگ)
 *   md  → max-width: 1023px  (تبلت)
 *   desktop → min-width: 1024px (دسکتاپ — دست‌نخورد)
 *
 * فاز ۰ — زیرساخت و آماده‌سازی  ✅
 * فاز ۱ — Shell و ناوبری اصلی  ✅
 * فاز ۲ — Page Header و جستجو  ✅
 * فاز ۳ — Tab Strip قابل scroll  ✅
 * فاز ۴ — جداول Card View  ✅
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════════════════════
   CSS Custom Properties اختصاصی موبایل
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ارتفاع نوار ناوبری پایین */
  --mbn-height: 62px;

  /* ارتفاع top bar ثابت در موبایل */
  --mobile-header-height: 54px;

  /* حداقل اندازه touch target — Apple HIG / Google Material */
  --touch-min: 44px;

  /* گوشه‌های bottom drawer */
  --drawer-radius: 22px 22px 0 0;

  /* safe area برای notch و home indicator (iOS) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);

  /* z-index لایه‌بندی */
  --z-mobile-header:   800;
  --z-mobile-nav:      900;
  --z-mobile-backdrop: 1000;
  --z-mobile-drawer:   1100;
  --z-mobile-modal-fs: 1200;
}


/* ═══════════════════════════════════════════════════════════════════════════
   md — تبلت و موبایل (≤ 1023px)
   فاز ۱: Shell و ناوبری اصلی
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* ── ۱.۲ Top Bar — تبدیل hamburger به top bar کامل ──────────────────── */

  .admin-nav-toggle {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: var(--mobile-header-height);
    padding-top: var(--safe-top);
    border-radius: 0;
    background: rgba(12,10,24,.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 2px 16px rgba(0,0,0,.28);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-right: 1rem;
    padding-left: 1rem;
    gap: .75rem;
    z-index: var(--z-mobile-header);
  }

  .admin-nav-toggle i {
    font-size: 1.05rem;
    flex-shrink: 0;
  }

  /* عنوان برنامه در وسط top bar */
  .mobile-top-bar-title {
    flex: 1;
    text-align: center;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── ۱.۱ App Main — فضای بالا و پایین برای نوارها ──────────────────── */

  .app-main {
    padding-top: calc(var(--mobile-header-height) + var(--safe-top) + 1rem);
    padding-bottom: calc(var(--mbn-height) + var(--safe-bottom) + 1rem);
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .modal-overlay {
    z-index: var(--z-mobile-modal-fs);
    padding: 1rem 1rem calc(var(--mbn-height) + var(--safe-bottom) + 1rem);
  }

  .modal {
    max-height: calc(100vh - var(--mobile-header-height) - var(--safe-top) - var(--mbn-height) - var(--safe-bottom) - 2rem);
  }

  /* ── ۱.۳ Sidebar Overlay بهبودیافته ─────────────────────────────────── */

  .app-nav {
    width: min(88vw, 300px);
    padding-top: calc(var(--safe-top) + .5rem);
    box-shadow: -12px 0 40px rgba(0,0,0,.45);
    transition: transform 0.28s cubic-bezier(.32,.72,0,1);
    z-index: var(--z-mobile-modal-fs);
  }

  .app-nav-backdrop {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: calc(var(--z-mobile-modal-fs) - 1);
  }

  .nav-mobile-close {
    width: var(--touch-min);
    height: var(--touch-min);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── ۱.۱ Bottom Navigation Bar ──────────────────────────────────────── */

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: var(--z-mobile-nav);
    height: calc(var(--mbn-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: rgba(12,10,24,.86);
    border-top: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -4px 20px rgba(0,0,0,.22);
    align-items: stretch;
    justify-content: space-around;
  }

  .mbn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-dim);
    text-decoration: none;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .01em;
    transition: color .18s ease;
    min-height: var(--touch-min);
    position: relative;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
  }

  .mbn-item i {
    font-size: 1.12rem;
    transition: transform .18s ease;
    line-height: 1;
  }

  .mbn-item.active { color: var(--accent); }
  .mbn-item.active i { transform: translateY(-1px); }

  /* نقطه active زیر آیکون */
  .mbn-item.active::after {
    content: '';
    position: absolute;
    bottom: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
  }

  /* ── ۱.۱ More Drawer (Bottom Sheet) ─────────────────────────────────── */

  .mbn-more-drawer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-mobile-drawer);
  }

  .mbn-more-drawer.open { display: block; }

  .mbn-more-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  .mbn-more-sheet {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--surface);
    border-radius: var(--drawer-radius);
    border: 1px solid rgba(255,255,255,.08);
    border-bottom: none;
    padding: 0 0 calc(1.25rem + var(--safe-bottom));
    animation: mbnSlideUp .26s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 -8px 40px rgba(0,0,0,.38);
  }

  @keyframes mbnSlideUp {
    from { transform: translateY(100%); opacity: .4; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  /* drag handle */
  .mbn-more-handle {
    width: 38px;
    height: 4px;
    background: rgba(255,255,255,.14);
    border-radius: 2px;
    margin: .75rem auto 1.1rem;
  }

  .mbn-more-section-label {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 0 1.35rem .45rem;
    opacity: .6;
  }

  .mbn-more-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .82rem 1.35rem;
    color: var(--text);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    transition: background .15s ease;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: right;
    font-family: var(--font);
  }

  .mbn-more-item i {
    color: var(--text-dim);
    font-size: 1.05rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
  }

  .mbn-more-item:active,
  .mbn-more-item:hover { background: var(--surface2); }

  .mbn-more-item--danger { color: var(--danger); }
  .mbn-more-item--danger i { color: var(--danger); }

  .mbn-more-divider {
    height: 1px;
    background: rgba(255,255,255,.06);
    margin: .3rem 0;
  }

  /* ── Toast — بالاتر از bottom nav و هر مودال/درای‌ور تمام‌صفحه ───────── */
  .toast {
    bottom: calc(var(--mbn-height) + var(--safe-bottom) + .75rem);
    z-index: 2147483647;
  }

  /* ══════════════════════════════════════════════════════════════════════════
     فاز ۷ — اصلاحات اختصاصی هر صفحه (md ≤ 1023px)
     ══════════════════════════════════════════════════════════════════════════ */

  /* ── تبلت: overview grid 3 ستون → 2 ستون ─── */
  .overview-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── تبلت: schedule 2col → 1col ─────────────── */
  .schedule-two-col { grid-template-columns: 1fr !important; }

  /* ── تبلت: day chips کمی کوچک‌تر ──────────── */
  .schedule-day-chip span {
    min-width: 52px;
    font-size: .78rem;
  }

  /* ── تبلت: settings section padding کمتر ─── */
  .settings-section { border-radius: 12px; }

  /* ══════════════════════════════════════════════════════════════════════════
     فاز ۸ — Touch Targets و scroll بهتر
     ══════════════════════════════════════════════════════════════════════════ */

  /* همه دکمه‌های inline جدول */
  .btn-inline,
  .btn-ghost,
  .btn-primary,
  .btn-danger {
    min-height: var(--touch-min);
  }

  /* overscroll روی modal ها */
  .modal {
    overscroll-behavior: contain;
  }

  /* momentum scroll روی iOS */
  .table-wrap,
  .app-main,
  .modal,
  .nav-links-wrap {
    -webkit-overflow-scrolling: touch;
  }

}


/* ═══════════════════════════════════════════════════════════════════════════
   sm — موبایل (≤ 767px)
   فاز ۲: Page Header، فاز ۳: Tab Strip، فاز ۴: Table Card View
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ══════════════════════════════════════════════════════════════════════════
     فاز ۲ — Page Header و جستجو
     ══════════════════════════════════════════════════════════════════════════ */

  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    margin-bottom: 1.1rem;
  }

  /* عنوان + زیرعنوان */
  .page-title { font-size: 1.1rem; }
  .page-subtitle,
  .reports-page-subtitle,
  .files-page-subtitle { font-size: .8rem; line-height: 1.65; margin-top: .25rem; }

  /* ردیف دکمه‌ها: search + action */
  .page-header-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem;
    align-items: center;
    width: 100%;
  }

  .page-header-search {
    min-width: 0;
    width: 100%;
    max-width: none;
  }

  /* اگر دکمه اصلی تنها یا آخرین عنصر بود → پهن شود */
  .page-header-actions > .btn-primary:only-child,
  .page-header-actions > .btn:only-child {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }

  /* گروه دکمه‌ها (کاربران: تیم جدید + کاربر جدید) */
  .page-cta-group {
    display: flex;
    gap: .45rem;
    grid-column: 1 / -1;
    width: 100%;
  }
  .page-cta-group .btn {
    flex: 1;
    justify-content: center;
    min-height: var(--touch-min);
  }

  /* overview cards: ۳ ستون در sm */
  .overview-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
  }
  .overview-card {
    padding: .75rem .9rem;
    gap: .55rem;
  }
  .overview-icon {
    width: 36px; height: 36px; font-size: .95rem;
  }
  .overview-label { font-size: .65rem; }
  .overview-value { font-size: 1.3rem; }

  /* ══════════════════════════════════════════════════════════════════════════
     فاز ۳ — Tab Strip قابل scroll
     ══════════════════════════════════════════════════════════════════════════ */

  .tab-strip {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: .4rem;
    padding-bottom: 3px;
    /* محو شدن انتها در RTL — fade سمت چپ */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem);
    mask-image: linear-gradient(to right, transparent, #000 2.5rem);
  }
  .tab-strip::-webkit-scrollbar { display: none; }

  .tab-btn {
    scroll-snap-align: start;
    flex-shrink: 0;
    font-size: .78rem;
    padding: .48rem .9rem;
    white-space: nowrap;
    min-height: var(--touch-min);
  }

  /* count badge در تب کوچک‌تر */
  .tab-count {
    font-size: .65rem;
    padding: .05rem .3rem;
  }

  /* ══════════════════════════════════════════════════════════════════════════
     فاز ۴ — جداول → Card View
     شامل: rooms, users, files, schedules, reports
     استراتژی: هر tr → کارت، nth-child برای label ها
     ══════════════════════════════════════════════════════════════════════════ */

  /* ── Base: تبدیل table به block ────────────────────────────────────────── */

  /* فقط جداول اصلی صفحه — نه modal tables */
  .table-wrap:not(.reports-modal-table-wrap) {
    overflow-x: visible;
    border-radius: 0;
    border: none;
    background: transparent;
  }
  .table-wrap:not(.reports-modal-table-wrap) table {
    display: block;
    border: none;
    border-radius: 0;
  }
  .table-wrap:not(.reports-modal-table-wrap) thead {
    display: none;
  }
  .table-wrap:not(.reports-modal-table-wrap) tbody {
    display: flex;
    flex-direction: column;
    gap: .65rem;
  }

  /* هر ردیف → کارت */
  .table-wrap:not(.reports-modal-table-wrap) tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: .85rem 1rem;
    gap: 0;
    transition: border-color .15s;
  }
  .table-wrap:not(.reports-modal-table-wrap) tbody tr:hover {
    border-color: rgba(139,92,246,.3);
  }

  /* هر TD به یک ردیف label-value */
  .table-wrap:not(.reports-modal-table-wrap) tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .28rem 0;
    border: none !important;
    font-size: .82rem;
    min-height: 0;
    line-height: 1.55;
  }

  /* label از قبل از TD (via nth-child) */
  .table-wrap:not(.reports-modal-table-wrap) tbody td.has-label {
    gap: .5rem;
  }
  .table-wrap:not(.reports-modal-table-wrap) tbody td.has-label::before {
    content: attr(data-label);
    color: var(--text-dim);
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
    min-width: 68px;
    text-align: right;
  }

  /* آخرین TD = ردیف اکشن‌ها */
  .table-wrap:not(.reports-modal-table-wrap) tbody td:last-child,
  .table-wrap:not(.reports-modal-table-wrap) tbody td.td-actions {
    border-top: 1px solid rgba(255,255,255,.055) !important;
    margin-top: .4rem;
    padding-top: .6rem;
    justify-content: flex-start;
    gap: .35rem;
    flex-wrap: wrap;
  }

  /* placeholder row */
  .table-wrap:not(.reports-modal-table-wrap) tbody tr td[colspan] {
    width: 100%;
    justify-content: center;
    border-top: none !important;
    margin-top: 0;
    padding: 1.5rem;
  }

  /* ── جدول اتاق‌ها ──────────────────────────────────────────────────────── */

  /* col 1: تصویر کوچک + col 2: نام اتاق — در یک ردیف header */
  .table-wrap tbody tr td:has(.room-thumb) {
    width: 52px;
    flex-shrink: 0;
    flex-grow: 0;
    padding-left: .75rem;
    padding-bottom: .6rem;
    align-self: flex-start;
  }
  .room-thumb { width: 44px; height: 44px; border-radius: 10px; }
  .room-thumb-empty { width: 44px; height: 44px; border-radius: 10px; font-size: .9rem; }

  .table-wrap tbody tr td.room-name-cell {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: .6rem;
    border-bottom: 1px solid rgba(255,255,255,.055) !important;
    margin-bottom: .1rem;
  }

  .table-wrap tbody tr td.room-desc-cell::before { content: "توضیحات"; }
  .table-wrap tbody tr td.room-desc-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
  }
  .room-description { font-size: .78rem; line-height: 1.55; }

  /* creator, status, members: label via nth-child — rooms table */
  .table-wrap tbody tr:has(.room-thumb) td:nth-child(4)::before { content: "سازنده"; }
  .table-wrap tbody tr:has(.room-thumb) td:nth-child(5)::before { content: "وضعیت"; }
  .table-wrap tbody tr:has(.room-thumb) td:nth-child(6)::before { content: "اعضا"; }
  .table-wrap tbody tr:has(.room-thumb) td:nth-child(4),
  .table-wrap tbody tr:has(.room-thumb) td:nth-child(5),
  .table-wrap tbody tr:has(.room-thumb) td:nth-child(6) {
    gap: .5rem;
    font-size: .8rem;
  }
  .table-wrap tbody tr:has(.room-thumb) td:nth-child(4)::before,
  .table-wrap tbody tr:has(.room-thumb) td:nth-child(5)::before,
  .table-wrap tbody tr:has(.room-thumb) td:nth-child(6)::before {
    color: var(--text-dim);
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
    min-width: 58px;
    text-align: right;
  }
  .room-member-count {
    flex-direction: row;
    gap: .3rem;
  }
  .room-member-count strong { font-size: .88rem; }
  /* creator cell: stack layout */
  .table-wrap tbody tr:has(.room-thumb) td:nth-child(4) {
    align-items: center;
    flex-wrap: wrap;
  }
  .room-creator-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
  }

  /* ── جدول کاربران ──────────────────────────────────────────────────────── */

  /* col 1: avatar — کوچک، فلوت چپ */
  .table-wrap tbody tr td:has(.avatar-action) {
    width: 48px;
    flex-shrink: 0;
    flex-grow: 0;
    padding-left: .7rem;
    align-self: flex-start;
  }
  .avatar-action { width: 38px; height: 38px; }

  /* col 2: identity cell — header */
  .table-wrap tbody tr td:has(.user-name-cell),
  .table-wrap tbody tr td:has(.user-identity-cell) {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: .6rem;
    border-bottom: 1px solid rgba(255,255,255,.055) !important;
    margin-bottom: .1rem;
  }

  /* users col 3,4,5,6: labeled */
  .users-table td:nth-child(3)::before { content: "فعالیت"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 58px; flex-shrink: 0; text-align: right; }
  .users-table td:nth-child(4)::before { content: "سمت"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 58px; flex-shrink: 0; text-align: right; }
  .users-table td:nth-child(5)::before { content: "نقش"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 58px; flex-shrink: 0; text-align: right; }
  .users-table td:nth-child(6)::before { content: "وضعیت"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 58px; flex-shrink: 0; text-align: right; }
  .users-table td:nth-child(3),
  .users-table td:nth-child(4),
  .users-table td:nth-child(5),
  .users-table td:nth-child(6) { gap: .5rem; }

  /* ── جدول فایل‌ها ──────────────────────────────────────────────────────── */

  /* col 1: file info — header, full width */
  .files-table td:nth-child(1) {
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    gap: .65rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid rgba(255,255,255,.055) !important;
    margin-bottom: .05rem;
  }
  .files-table td:nth-child(2)::before { content: "اتاق"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 42px; flex-shrink: 0; text-align: right; }
  .files-table td:nth-child(3)::before { content: "حجم"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 42px; flex-shrink: 0; text-align: right; }
  .files-table td:nth-child(4)::before { content: "مدت"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 42px; flex-shrink: 0; text-align: right; }
  .files-table td:nth-child(5)::before { content: "آپلودکننده"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 42px; flex-shrink: 0; text-align: right; }
  .files-table td:nth-child(6)::before { content: "تاریخ"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 42px; flex-shrink: 0; text-align: right; }
  .files-table td:nth-child(2),
  .files-table td:nth-child(3),
  .files-table td:nth-child(4),
  .files-table td:nth-child(5),
  .files-table td:nth-child(6) { gap: .5rem; }

  /* ── جدول زمان‌بندی ────────────────────────────────────────────────────── */

  /* col 1: عنوان — header */
  .table-wrap:not(.reports-modal-table-wrap) table:not(.users-table):not(.files-table) tbody tr td:nth-child(1):not(.room-name-cell):not(:has(.room-thumb)):not(:has(.avatar-action)):not(.reports-date-cell):not(:has(.reports-room-cell)) {
    font-weight: 700;
    font-size: .88rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid rgba(255,255,255,.055) !important;
    margin-bottom: .05rem;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  /* schedules-specific labels */
  .table-wrap tbody tr td:nth-child(2):has(.text-dim)::before { content: "اتاق"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 58px; flex-shrink: 0; text-align: right; }

  /* ── جدول گزارش‌ها ─────────────────────────────────────────────────────── */

  .reports-table tbody tr td:nth-child(1) {
    font-weight: 700;
    font-size: .88rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid rgba(255,255,255,.055) !important;
    margin-bottom: .05rem;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }
  .reports-table td:nth-child(2)::before { content: "تاریخ"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 58px; flex-shrink: 0; text-align: right; }
  .reports-table td:nth-child(3)::before { content: "شروع"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 58px; flex-shrink: 0; text-align: right; }
  .reports-table td:nth-child(4)::before { content: "پایان"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 58px; flex-shrink: 0; text-align: right; }
  .reports-table td:nth-child(5)::before { content: "مدت"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 58px; flex-shrink: 0; text-align: right; }
  .reports-table td:nth-child(6)::before { content: "اوج حاضرین"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 58px; flex-shrink: 0; text-align: right; }
  .reports-table td:nth-child(7)::before { content: "ضبط"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 58px; flex-shrink: 0; text-align: right; }
  .reports-table td:nth-child(2),
  .reports-table td:nth-child(3),
  .reports-table td:nth-child(4),
  .reports-table td:nth-child(5),
  .reports-table td:nth-child(6),
  .reports-table td:nth-child(7) { gap: .5rem; }
  /* ستون‌های ویدیو، صوت، کیفیت در sm مخفی */
  .reports-table td:nth-child(8),
  .reports-table td:nth-child(9),
  .reports-table td:nth-child(10) { display: none; }

  /* ── جدول تیم‌ها ────────────────────────────────────────────────────────── */

  .teams-table td:nth-child(1) {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: .65rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid rgba(255,255,255,.055) !important;
    margin-bottom: .05rem;
  }
  .teams-table td:nth-child(2)::before { content: "مدیر"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 40px; flex-shrink: 0; text-align: right; }
  .teams-table td:nth-child(3)::before { content: "اعضا"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 40px; flex-shrink: 0; text-align: right; }
  .teams-table td:nth-child(4)::before { content: "وضعیت"; color: var(--text-dim); font-size: .7rem; font-weight: 700; min-width: 40px; flex-shrink: 0; text-align: right; }
  .teams-table td:nth-child(2),
  .teams-table td:nth-child(3),
  .teams-table td:nth-child(4) { gap: .5rem; }

  /* ── اکشن‌های اتاق — در کارت wrap شوند ─────────────────────────────────── */
  .room-actions {
    flex-wrap: wrap;
    gap: .3rem;
  }
  .icon-action {
    width: var(--touch-min);
    height: var(--touch-min);
    border-radius: 10px;
  }

  /* ── اکشن‌های کاربران ──────────────────────────────────────────────────── */
  .table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
  }
  .table-actions .btn {
    flex: 1;
    min-height: var(--touch-min);
    justify-content: center;
    padding: .45rem .65rem;
    font-size: .78rem;
  }

  /* files-toolbar: stack در sm */
  .files-toolbar {
    flex-direction: column;
    gap: .55rem;
    align-items: stretch;
  }
  .files-search-field,
  .files-room-filter { width: 100%; min-width: 0; }

  /* files-upload-panel: stack */
  .files-upload-panel { flex-direction: column; align-items: stretch; }
  .files-upload-row { grid-template-columns: 1fr; gap: .55rem; }
  .files-pick-btn { width: 100%; justify-content: center; }

  /* reports filter */
  .reports-filters-card .filter-row {
    flex-direction: column;
    gap: .6rem;
    align-items: stretch;
  }
  .reports-filters-card .field {
    width: 100%;
  }
  .reports-filters-card select,
  .reports-filters-card input[type="date"] {
    width: 100%;
    min-height: var(--touch-min);
    font-size: 1rem;
  }


  /* ══════════════════════════════════════════════════════════════════════════
     فاز ۵ — فرم‌ها و Input ها
     ══════════════════════════════════════════════════════════════════════════ */

  /* field-row: label بالا، input پایین — override از rooms.css */
  .field-row {
    flex-direction: column !important;
    gap: 0 !important;
    margin-bottom: .75rem;
  }

  .field-row .field-lbl {
    width: 100% !important;
    border-radius: 0 10px 0 0 !important;  /* RTL: گوشه بالا-راست و بالا-چپ */
    border-radius: 10px 10px 0 0 !important;
    border-bottom: none !important;
    padding: .45rem .85rem .35rem !important;
    font-size: .72rem;
    min-height: auto !important;
    justify-content: flex-start;
    align-items: center;
  }

  .field-row .field-ctrl input,
  .field-row .field-ctrl select,
  .field-row .field-ctrl textarea {
    border-radius: 0 0 10px 10px !important;
    border-right: 1px solid var(--border) !important;
    border-top: none !important;
    font-size: 1rem !important;  /* جلوگیری از zoom روی iOS */
    min-height: var(--touch-min) !important;
  }

  .field-row .field-ctrl textarea {
    min-height: 80px !important;
    border-radius: 0 0 10px 10px !important;
  }

  /* field-split: ۲ ستون → ۱ ستون */
  .field-split {
    grid-template-columns: 1fr !important;
  }

  /* toggle در فرم‌ها: row بماند (طبیعی‌تر) */
  .field-row--toggle {
    flex-direction: row !important;
    align-items: center !important;
    gap: .85rem !important;
  }

  /* همه input ها touch-friendly */
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="tel"],
  input[type="date"],
  input[type="email"],
  select,
  textarea {
    font-size: 1rem;
    min-height: var(--touch-min);
  }

  /* ══════════════════════════════════════════════════════════════════════════
     فاز ۶ — Modal ها: Bottom Sheet و Full Screen
     ══════════════════════════════════════════════════════════════════════════ */

  /* ── ۶.۱ modal overlay: align bottom برای bottom sheets ─────────────── */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  /* ── ۶.۲ همه modal های ساده → bottom sheet ──────────────────────────── */
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0 !important;
    border-bottom: none !important;
    padding: 1.25rem 1.25rem calc(1.5rem + var(--safe-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    animation: adminModalUp .26s cubic-bezier(.32,.72,0,1);
  }

  @keyframes adminModalUp {
    from { transform: translateY(30%); opacity: .5; }
    to   { transform: translateY(0);   opacity: 1; }
  }

  /* handle بالای modal */
  .modal::before {
    content: '';
    display: block;
    width: 38px;
    height: 4px;
    background: rgba(255,255,255,.14);
    border-radius: 2px;
    margin: -.5rem auto 1.1rem;
  }

  .modal-title {
    margin-bottom: 1rem;
  }

  /* ── ۶.۳ Room Editor Modal → Full Screen با تب ──────────────────────── */
  .modal-overlay:has(.modal-room-editor) {
    padding: 0;
    align-items: stretch;
  }

  .modal-room-editor {
    max-width: 100% !important;
    max-height: 100dvh !important;
    height: 100dvh;
    border-radius: 0 !important;
    padding: 0 !important;
    animation: none !important;
    margin: 0;
    overflow: hidden;
  }

  .modal-room-editor::before { display: none !important; }

  /* head modal */
  .room-editor-head {
    padding: .75rem 1.1rem .6rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
  }
  .room-editor-head .modal-title { font-size: 1rem; margin-bottom: .1rem; }
  .room-editor-head-sub { font-size: .72rem; }

  /* Tab bar */
  .room-editor-tab-bar {
    display: flex;
    background: var(--surface);
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
  }

  .room-editor-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .75rem .5rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-dim);
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    font-family: var(--font);
    min-height: var(--touch-min);
  }

  .room-editor-tab i { font-size: .88rem; }

  .room-editor-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  /* shell → column, each pane fills viewport */
  .room-editor-shell {
    display: block !important;
    height: calc(100dvh - var(--mobile-header-height) - 48px - 56px - var(--safe-bottom)) !important;
    overflow: hidden;
  }

  /* pane‌های غیرفعال مخفی */
  .room-editor-pane { display: none !important; }
  .room-editor-pane.tab-active {
    display: flex !important;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  /* actions در انتهای modal */
  .room-editor-actions {
    position: sticky;
    bottom: 0;
    background: rgba(14,16,24,.97) !important;
    padding: .75rem 1rem calc(.75rem + var(--safe-bottom)) !important;
    border-top: 1px solid rgba(255,255,255,.07);
    margin-top: 0 !important;
  }

  /* ── ۶.۴ Members Modal → Full Screen با دو پنل قابل‌swap ────────────── */
  .modal-overlay:has(.modal-members) {
    padding: 0;
    align-items: stretch;
  }

  .modal-members {
    max-width: 100% !important;
    max-height: 100dvh !important;
    height: 100dvh;
    border-radius: 0 !important;
    padding: 1rem 1rem 0 !important;
    animation: none !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .modal-members::before { display: none !important; }

  .members-modal-shell {
    flex: 1;
    min-height: 0;
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: hidden;
  }

  /* تب‌های members modal */
  .members-tab-bar {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,.07);
    margin-bottom: .65rem;
    flex-shrink: 0;
  }

  .members-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .65rem .5rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-dim);
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
    font-family: var(--font);
    min-height: var(--touch-min);
    transition: color .15s, border-color .15s;
  }

  .members-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

  .members-pane {
    display: none !important;
    flex: 1;
    height: auto;
    min-height: 0;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .members-pane.tab-active {
    display: flex !important;
    flex-direction: column;
  }

  .members-modal-actions {
    flex-shrink: 0;
    padding-bottom: calc(.75rem + var(--safe-bottom));
    border-top: 1px solid rgba(255,255,255,.07);
    padding-top: .75rem;
    margin-top: auto;
  }

  /* ── ۶.۵ Modal Actions → محور عمودی در xs ──────────────────────────── */
  .modal-actions {
    gap: .5rem;
    flex-wrap: wrap;
  }

}  /* end @media 767px */


/* ═══════════════════════════════════════════════════════════════════════════
   xs — موبایل کوچک (≤ 479px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 479px) {

  /* ── فاز ۲ xs: overview ۱ ستون ─────────────────────────────────────────── */
  .overview-grid {
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
  }
  .overview-card {
    flex-direction: column;
    align-items: flex-start;
    padding: .75rem .85rem;
  }
  .overview-value { font-size: 1.1rem; }

  /* ── فاز ۲ xs: header title کوچک‌تر ────────────────────────────────────── */
  .page-title { font-size: 1rem; }

  /* ── فاز ۳ xs: تب‌های کوچک‌تر ───────────────────────────────────────────── */
  .tab-btn {
    font-size: .72rem;
    padding: .42rem .7rem;
  }

  /* ── فاز ۴ xs: مخفی کردن ستون‌های کم‌اهمیت ─────────────────────────────── */

  /* در کارت کاربر: فعالیت‌ها مخفی (کمتر مهم در xs) */
  .users-table td:nth-child(3) { display: none; }

  /* در کارت گزارش: مدت + ضبط مخفی */
  .reports-table td:nth-child(5),
  .reports-table td:nth-child(7) { display: none; }


  /* ── فاز ۶ xs: modal actions عمودی ─────────────────────────────────────── */
  .modal-actions {
    flex-direction: column-reverse;
    gap: .45rem;
  }

  .modal-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: var(--touch-min);
  }

  /* ── فاز ۷ xs: schedule day chips ──────────────────────────────────────── */
  .schedule-day-chip span {
    min-width: calc((100vw - 4rem) / 7 - .35rem);
    font-size: .7rem;
    padding: 0;
  }

  /* ── فاز ۸ xs: touch targets ────────────────────────────────────────────── */
  .btn-inline {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .member-remove {
    width: var(--touch-min) !important;
    height: var(--touch-min) !important;
  }

}


/* ═══════════════════════════════════════════════════════════════════════════
   desktop guard — المان‌های موبایل در دسکتاپ مخفی می‌مانند
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .mobile-bottom-nav,
  .mbn-more-drawer,
  .mobile-top-bar-title {
    display: none !important;
  }
}

@media (min-width: 768px) {
  /* tab bar های موبایل در تبلت و دسکتاپ مخفی */
  .room-editor-tab-bar,
  .members-tab-bar,
  .members-tab-count {
    display: none !important;
  }

  /* پنل‌ها در تبلت همیشه نمایش داشته باشند */
  .room-editor-pane,
  .members-pane {
    display: flex !important;
  }
}