/* منظّمي — إطار الحاسب والآيباد (خطة توحيد الواجهة، المرحلة 2): الشريط الجانبي ≥1024، الشريط العائم 768–1023، عمود المحتوى، hover، اللوح بطاقة عائمة.
   أصله النموذج المعتمد design-reference/desktop/prototype.css كما هو (قواعد الترحيب في onboarding.css). القيم من متغيرات base.css فقط. */

.side-nav { display: none; }

/* رابط التخطي: مخفي حتى يصله التركيز بلوحة المفاتيح */
.skip-link {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 500;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--accent-primary);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; outline: none; box-shadow: var(--focus-ring); }

/* ══ الحاسب ≥1024: شريط جانبي على نمط iPadOS بدل الترويسة ══ */
@media (min-width: 1024px) {
  .global-header, .mobile-nav { display: none; }
  body { padding-inline-start: var(--side-w); }
  main {
    max-width: calc(var(--content-max) + 2 * var(--space-8));
    padding: var(--space-12) var(--space-8) var(--space-16);
  }
  main.is-wide { max-width: calc(var(--content-wide) + 2 * var(--space-8)); }
  #app-root h1.type-h1, #app-root h1.type-display { font-size: var(--fs-display); line-height: 1.15; }

  .side-nav {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 90;
    width: var(--side-w);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-8) var(--space-3) var(--space-6);
    overflow-y: auto;
    border-inline-end: 1px solid var(--border-subtle);
    background-color: var(--glass-bg);
    -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
    backdrop-filter: saturate(180%) blur(var(--glass-blur));
  }
  .side-brand { padding-inline: var(--space-3); font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.01em; }
  .side-search { margin: 0; }
  .side-search .form-control { height: var(--control-h-sm); border-radius: var(--radius-md); background-color: var(--muted-bg); border-color: transparent; }
  .side-group { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .side-caption { padding: 0 var(--space-3) var(--space-1); font-size: var(--fs-caption); font-weight: 600; color: var(--text-muted); }
  .side-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--side-item-h);
    padding-inline: var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-callout);
    font-weight: 500;
    text-decoration: none;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease-out);
  }
  .side-search .form-control:focus { border-color: var(--accent-primary); background-color: var(--bg-surface-1); } /* مؤشر تركيز مرئي (WCAG 2.4.7) */
  .side-item svg { flex-shrink: 0; color: var(--accent-primary); }
  .side-item.active { background-color: var(--accent-subtle-bg); color: var(--accent-primary); font-weight: 600; }
  .side-foot { margin-top: auto; }

  /* اللوح السفلي بطاقة عائمة في الوسط */
  .sheet-panel { max-width: var(--sheet-max-w); margin-inline: auto; }
  .toast-container { inset-inline: var(--side-w) 0; }
}

/* الإشعار العائم: في أسفل الوسط لا في الزاوية (المرحلة 3)؛ على الآيباد فوق الشريط العائم كما في الجوال */
@media (min-width: 768px) {
  .toast-container { align-items: center; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .toast-container { inset-inline: var(--space-4); inset-block-end: calc(100px + env(safe-area-inset-bottom)); }
}
/* شريط تمرير رفيع بألوان النظام للأجهزة بمؤشر (بند المرحلة 2) */
@media (hover: hover) and (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .side-item:hover:not(.active), .list-row:hover, .file-row:hover, .week-row:hover { background-color: var(--muted-bg); }
}

/* ══ الآيباد 768–1023 (iPadOS عمودي): شريط الجوال الزجاجي العائم في الأسفل، والمحتوى في عمود 720 ══
   في التنفيذ: وسّع استعلامات الجوال الخاصة بالشريط (max-width: 767px) إلى 1023 بدل تكرارها. */
@media (min-width: 768px) and (max-width: 1023px) {
  .global-header { display: none; }
  .mobile-nav { display: block; padding-block-end: calc(var(--space-4) + env(safe-area-inset-bottom)); }
  .mobile-nav-list { max-width: var(--float-nav-max-w); height: var(--float-nav-h); margin-inline: auto; align-items: center; padding: 0 6px; border-radius: var(--radius-pill); }
  .mobile-nav-item { gap: 3px; font-size: var(--fs-micro); }
  .mobile-nav-item svg { width: 22px; height: 22px; padding: 4px 15px; }
  .mobile-nav-item.active svg { background-color: var(--accent-subtle-bg); }
  button.mobile-nav-item { border: none; background: transparent; font-family: inherit; cursor: pointer; }
  main {
    max-width: calc(var(--content-max) + 2 * var(--space-8));
    padding: var(--space-10) var(--space-8) calc(120px + env(safe-area-inset-bottom));
  }
  #app-root h1.type-h1, #app-root h1.type-display { font-size: var(--fs-display); line-height: 1.15; }
}