/* ============================================================
   Page layout & app shell
   ============================================================ */

#app { height: 100vh; overflow: hidden; }

/* ---- Login ---- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  background:
    radial-gradient(1200px 600px at 15% -10%, var(--wine-50), transparent),
    radial-gradient(900px 500px at 110% 110%, var(--rose-100), transparent),
    var(--cream);
}
.login-card {
  width: 100%; max-width: 420px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-10) var(--sp-8);
  box-shadow: var(--shadow-md);
}
.login-logo { width: 96px; height: 96px; margin: 0 auto var(--sp-4); display: block; }
.login-title { font-size: var(--fs-2xl); text-align: center; color: var(--wine-700); }
.login-sub { text-align: center; color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-2); }
.login-form { margin-top: var(--sp-8); }
.login-lang-row { display: flex; justify-content: center; margin-top: var(--sp-6); }

/* ---- App shell ---- */
.shell { display: flex; height: 100vh; }
.shell-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.shell-content { flex: 1; overflow-y: auto; padding: var(--sp-6); }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); flex-wrap: wrap; gap: var(--sp-3); }
.page-header h1 { font-size: var(--fs-xl); font-family: var(--font-display-lat); color: var(--wine-700); }
html[lang="ar"] .page-header h1 { font-family: var(--font-display-ar); }
.page-header-actions { display: flex; gap: var(--sp-3); }

/* ---- Grids ---- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-5); }
.dash-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-5); }
.tab-row { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); overflow-x: auto; scrollbar-width: none; }
.tab-row::-webkit-scrollbar { display: none; }
.tab-item { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex-shrink: 0; }
.tab-item.is-active { color: var(--wine-700); border-bottom-color: var(--wine-700); }
.filter-bar { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: end; margin-bottom: var(--sp-5); }
.filter-bar .field { margin-bottom: 0; min-width: 160px; }

/* ---- Employee (mobile) shell ---- */
.emp-shell .shell-content { padding-bottom: calc(var(--bottomnav-h) + var(--sp-6)); }

@media (max-width: 980px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid, .dash-grid-2 { grid-template-columns: 1fr; }
}

/* Employee-role app is mobile-first regardless of viewport */
.role-employee .sidebar { display: none; }
.role-employee .bottom-nav { display: flex; }
.role-employee .shell-content { padding: var(--sp-4); max-width: 560px; margin: 0 auto; width: 100%; }
.role-employee .topbar { padding: 0 var(--sp-4); }

@media (max-width: 860px) {
  .role-admin .sidebar { position: fixed; inset-inline-start: 0; top: 0; bottom: 0; z-index: 30; transform: translateX(-100%); transition: transform .2s ease; }
  html[dir="rtl"] .role-admin .sidebar { transform: translateX(100%); }
  .role-admin .sidebar.is-open,
  html[dir="rtl"] .role-admin .sidebar.is-open { transform: none; }
  .menu-toggle-btn { display: flex; }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(42,27,32,.4);
    z-index: 25; opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .sidebar-backdrop.is-visible { opacity: 1; pointer-events: auto; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .user-chip-text { display: none; }
  .topbar { padding: 0 var(--sp-4); }
  .topbar-title { font-size: var(--fs-md); }
}

@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr; }
  .login-card { padding: var(--sp-8) var(--sp-5); }
  .filter-bar .field { min-width: 130px; flex: 1; }
}

/* ---- Print (A4 reports) ---- */
@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { position: absolute; inset: 0; padding: 12mm; }
  @page { size: A4; margin: 10mm; }
}