* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--gradient-shell);
  font-family: var(--font-sans);
  color: var(--text);
  direction: rtl;
  overflow-x: hidden;
}

.master-shell {
  display: block;
  min-height: 100vh;
  padding-right: 0;                  /* مخفي افتراضياً — لا مسافة */
  transition: padding-right 0.30s cubic-bezier(0.4, 0, 0.2, 1);
}
.master-shell.sidebar-open {
  padding-right: var(--sidebar-w);   /* يفسح مكاناً عند الفتح */
}

.side-panel {
  position: fixed;
  right: calc(-1 * var(--sidebar-w));  /* مخفي خارج الشاشة */
  top: 0;
  height: 100vh;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border-soft);
  border-radius: 0;
  box-shadow: var(--shadow);
  overflow: hidden;    /* البار لا يتمرر — فقط .tree الداخلية تتمرر */
  z-index: 200;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  transition: right 0.30s cubic-bezier(0.4, 0, 0.2, 1);
}
.side-panel.mobile-open {
  right: 0 !important;
}

.side-panel .brand {
  position: sticky;
  top: 0;
  z-index: 5;
  flex-shrink: 0;
}

.brand {
  position: relative;
  overflow: hidden;
  padding: 20px;
  background: var(--gradient-brand);
  color: #fff;
}

.brand:after {
  content: 'ALMAJD';
  position: absolute;
  left: 13px;
  bottom: -23px;
  font-size: 78px;
  font-weight: 900;
  color: rgba(255,255,255,.055);
}

/* زر إغلاق البار */
.sidebar-close-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s, transform .15s;
  z-index: 2;
}
.sidebar-close-btn:hover {
  background: rgba(255,255,255,.25);
  transform: scale(1.08);
}

.brand .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(227,188,52,.15);
  border: 1px solid rgba(227,188,52,.38);
  color: #ffe58a;
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 8px;
}

.brand h1 {
  margin: 0;
  font-size: 21px;
  line-height: 1.38;
  font-weight: 900;
}

.brand p {
  margin: 8px 0 0;
  color: rgba(255,255,255,.76);
  font-size: 12px;
  line-height: 1.75;
}

.tree {
  padding: 15px;
  border-bottom: 1px solid var(--line);
}

.tree {
  border-bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;           /* يأخذ المساحة المتبقية داخل الـ flex sidebar */
  min-height: 0;     /* ضروري لـ flex children لمنع التمدد خارج الحاوي */
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}

.section-title:before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(227,188,52,.18);
  flex-shrink: 0;
}

.section-chevron {
  margin-right: auto;
  margin-left: 0;
  font-size: 11px;
  color: var(--muted);
  transition: transform var(--duration-fast) var(--ease-standard);
  flex-shrink: 0;
  line-height: 1;
}

.side-section.collapsed > .section-chevron { transform: rotate(-90deg); }
.side-section.collapsed > *:not(.section-title) { display: none !important; }
.side-section.collapsed { padding-bottom: 2px !important; }
.side-section .section-title { margin-bottom: 0; }

.field { margin-bottom: 9px; }
label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

input,
select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-family: inherit;
  font-weight: 800;
  color: var(--text);
  outline: none;
}

input:focus,
select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(35,220,213,.13);
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 9px;
}

.actions.triple { grid-template-columns: 1fr 1fr 1fr; }

button,
.btn {
  border: 0;
  border-radius: var(--radius-pill);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.primary {
  background: var(--gradient-accent);
  color: #10213d;
}

.secondary {
  background: var(--surface-2);
  color: var(--navy);
}

.dark {
  background: var(--navy);
  color: #fff;
}

.ghost {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--navy);
}

button:hover { transform: translateY(-1px); }

.search { margin-bottom: 10px; }

.nav-group {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  margin-bottom: 9px;
  overflow: hidden;
}

.nav-group-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 10px 11px;
  background: var(--surface-2);
  color: var(--navy);
  font-weight: 900;
  font-size: 12px;
}

.nav-group-head span {
  display: inline-flex;
  background: rgba(227,188,52,.18);
  color: #7a5b00;
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 10px;
}

.page-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
}

.page-btn {
  min-width: 33px;
  height: 30px;
  border-radius: 10px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--navy);
  font-size: 11px;
}

.page-btn.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(227,188,52,.25);
}

.page-btn.filtered { display: none; }

.tree-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 12px;
  text-align: center;
}

.workspace { min-width: 0; padding: 18px; width: 100%; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.current-title {
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}

.current-title strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

.current-title span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

.top-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  align-items: center;
}

.tb-group {
  display: flex;
  gap: 4px;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 3px 5px;
  min-width: 0;
}

.tb-group button {
  border-radius: 9px !important;
  font-size: 11px !important;
  padding: 6px 10px !important;
}

.tb-sep {
  width: 1px;
  height: 22px;
  background: var(--border-soft);
  border-radius: 1px;
  flex-shrink: 0;
}

.book { padding-bottom: 30px; }

.status-line {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 30;
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--gradient-brand);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 9px 13px;
  box-shadow: var(--shadow-md);
  font-size: 11px;
  font-weight: 800;
}

.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 23px;
  height: 22px;
  border-radius: 7px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.18);
  color: #ffe58a;
  font-weight: 900;
}

/* A4 page-host contract: one coordinate system for every page (mounted or lazy).
   This prevents RTL from right-aligning fixed-width hosts and guarantees a visible page gap. */
almajd-page {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 297mm;
  height: 210mm;
  min-width: 297mm;
  min-height: 210mm;
  margin: 18px auto;
  flex: 0 0 auto;
}


body[data-view="wide"] .master-shell { grid-template-columns: 0 minmax(0, 1fr); }
body[data-view="wide"] .side-panel { display: none; }
body[data-view="wide"] .workspace { max-width: none; }
body[data-view="compact"] almajd-page {
  transform: scale(.82);
  transform-origin: top center;
  margin-bottom: -36mm;
}

.print-note { display: none; }
body.print-current almajd-page:not(.print-target) { display: none !important; }

@media (max-width: 1100px) {
  .master-shell { grid-template-columns: 1fr; }
  .side-panel {
    position: relative;
    top: auto;
    height: auto;
  }
  .topbar { top: 0; }
  .status-line {
    position: static;
    margin: 10px 0 0;
    border-radius: 16px;
    justify-content: center;
  }
  .book { overflow-y: auto; overflow-x: hidden; }
}

@page {
  size: A4 landscape;
  margin: 0;
}

@media print {
  html, body {
    width: 297mm;
    background: var(--surface) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .master-shell {
    display: block;
    padding: 0;
  }

  .side-panel,
  .topbar,
  .status-line,
  .print-note {
    display: none !important;
  }

  .workspace,
  .book {
    display: block;
    padding: 0;
    margin: 0;
  }

  .book { overflow: visible; }

  almajd-page {
    break-after: page;
    page-break-after: always;
    margin: 0 !important;
    transform: none !important;
    height: 210mm !important;
    width: 297mm !important;
    overflow: hidden !important;
  }

  almajd-page:last-of-type {
    break-after: auto;
    page-break-after: auto;
  }

  body.print-current almajd-page:not(.print-target) {
    display: none !important;
  }
}

/* Narrow-screen A4 safety: never crop a fixed-width plan page.
   Below 1180px the workspace becomes horizontally scrollable instead of hiding the page edge. */
@media screen and (max-width: 1180px) {
  .workspace {
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  .book {
    width: max-content;
    min-width: 100%;
    padding-inline: 12px;
    overflow: visible !important;
    direction: ltr;
  }
  .book > almajd-page {
    direction: rtl;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}

@media print {
  /* Screen-only effects add large raster layers to Chromium print preview. */
  .master-shell,
  .workspace,
  .book,
  almajd-page {
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
  }
}
@media screen and (max-width: 1180px) {
  .workspace { direction: ltr; }
  .book { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Table-mode toolbar feedback */
#tableModeBtn[aria-pressed="true"],
#tableModeBtn.mode-active {
  background:linear-gradient(135deg,#0f766e,#14b8a6)!important;
  border-color:#0f766e!important;
  color:#fff!important;
  box-shadow:0 6px 16px rgba(15,118,110,.20);
}
#tableModeBtn.mode-unavailable:not([aria-pressed="true"]) { opacity:.72; }