/* ---------------------------------------------------------------------------
 * Application shell: RTL sidebar on the right, topbar, scrolling page area.
 * ------------------------------------------------------------------------ */

/* The first track is the inline-start edge, which in this RTL document is the
   right-hand side — so the sidebar track is declared first and the sidebar
   takes it. Order matters beyond appearance: grid auto-placement only ever
   moves forward, so if the sidebar (first in the DOM) claimed the second
   column, the main column could no longer fit beside it and would be pushed
   onto a second row, one full screen below the fold. */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

/* ==================== SIDEBAR (inline-start = right in RTL) ==================== */

.sidebar {
  grid-column: 1;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 40;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-brand .mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sidebar-brand .name {
  font-weight: 800;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.4px;
  line-height: 1.3;
}
.sidebar-brand .sub {
  font-size: var(--fs-xs);
  color: #7f92ab;
  font-weight: 600;
}

.sidebar-nav {
  padding: 10px 10px 24px;
  flex: 1;
}

.nav-group-label {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.08em;
  padding: 16px 12px 6px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: var(--fs-base);
  font-weight: 600;
  transition: background var(--transition), color var(--transition);
  margin-bottom: 2px;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: start;
  font-family: var(--font-ar);
}
.nav-link:hover {
  background: var(--sidebar-hover);
  color: #fff;
  text-decoration: none;
}
.nav-link.active {
  background: var(--accent);
  color: var(--sidebar-text-active);
}
.nav-link .icon { flex-shrink: 0; opacity: 0.9; }
.nav-link .count {
  margin-inline-start: auto;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10px;
  color: #64748b;
}

/* ==================== MAIN COLUMN ==================== */

.main-col {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  height: var(--topbar-height);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-6);
  position: sticky;
  top: 0;
  z-index: 30;
}

.topbar h1 {
  font-size: var(--fs-lg);
  font-weight: 700;
  white-space: nowrap;
}

.topbar-page-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 500;
}

.topbar-spacer { flex: 1; }

.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-pill);
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

.topbar-user .who { line-height: 1.25; }
.topbar-user .who .n { font-size: var(--fs-sm); font-weight: 700; color: var(--text-heading); }
.topbar-user .who .r { font-size: 10px; color: var(--text-muted); font-weight: 600; }

.page {
  padding: var(--space-6);
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  flex: 1;
}

.page-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.page-header .titles { flex: 1; min-width: 220px; }
.page-header h2 { font-size: var(--fs-xl); margin-bottom: 2px; }
.page-header .desc { font-size: var(--fs-base); color: var(--text-secondary); }
.page-header .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ==================== RESPONSIVE ==================== */

.sidebar-toggle { display: none; }
.sidebar-scrim { display: none; }

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    grid-column: 1;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--sidebar-width);
    transform: translateX(100%);
    transition: transform 200ms ease;
  }
  /* The drawer sits on the right, matching the desktop sidebar: in RTL,
     inset-inline-start is the right edge. Transforms are physical and are not
     mirrored by direction, so translateX(100%) pushes it right — off-screen —
     and 0 brings it back. */
  .app-shell.nav-open .sidebar { transform: translateX(0); }
  .app-shell.nav-open .sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 35;
  }
  .main-col { grid-column: 1; }
  .sidebar-toggle { display: inline-flex; }
  .page { padding: var(--space-4); }
  .topbar { padding: 0 var(--space-4); }
}