/* MASAR 360 — UI360 program: module rail + contextual-nav search/empty
   states. Net-new selectors only (.module-rail/.module-nav-* did not
   exist before) -- ordinary cascade applies, nothing here depends on
   load order. Every value below is a real ds/tokens.css custom property
   (spacing/radius/shadow/typography/motion/domain-color scales already
   defined and validated there) -- no new ad hoc constants. The one
   pre-existing rule that genuinely needed to change (.ds-sidebar's
   mobile inset, to make room for the rail beside it) was edited in
   place in ds/components.css itself, not overridden from here.

   Density/proportions adapted from اكتفاء's own rail (measured: ~76px
   rail, 40x40 icon badges, 6px icon radius) -- MASAR's own token values
   (--rail-width/--rail-icon-size/--rail-icon-radius, ds/tokens.css) land
   within a few px of that on purpose; colors are MASAR's own --domain-*
   ramp, never اكتفاء's literal brand hex.

   UI-R7 (2026-09-17): real bug reported live -- the compact rail's fixed
   72px width visibly clipped every module label longer than a couple of
   words ("الموارد البشرية"/"الأسطول والنقل"/"التقارير والأرشيف" all
   rendered with a mid-word "..." cut, via the old .module-rail-label's
   own overflow:hidden;text-overflow:ellipsis). Per the explicit
   requirement, compact mode now never shows a partial label at all --
   .module-rail-label is hidden outright there (title= on the button,
   already present, is the only affordance needed, same convention as
   ds/components.css's .ds-sidebar.is-collapsed) -- and an explicit
   .is-expanded state (toggled by uiux-commercial.js's
   renderModuleRail()/saveRailExpandedState(), one real <button>, not a
   hover trigger -- hover-only expansion is unusable on touch and would
   make the forbidden "jumpy layout"/"content pushed unpredictably"
   unavoidable) widens the SAME rail to reveal the full label next to
   its icon. One canonical rail markup for both states; only CSS + one
   class toggle differ. Desktop-only: the mobile media query below
   forces the compact width and hides the toggle regardless of
   .is-expanded, so mobile keeps using the existing off-canvas drawer
   unchanged. */

.module-rail{
  width:var(--rail-width); flex:none; display:flex; flex-direction:column; align-items:stretch;
  background:var(--brand-ink); border-inline-end:1px solid var(--border-hairline);
  position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:hidden;
  z-index:calc(var(--z-nav) + 1); padding:var(--space-3) 0;
  scrollbar-width:thin;
  transition:width var(--duration-base) var(--ease-standard);
}
.module-rail.is-expanded{ width:var(--rail-width-expanded); }
.module-rail-btn{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:0; cursor:pointer; padding:var(--space-2) 4px; margin:0 var(--space-2) var(--space-2);
  border-radius:var(--radius-md); color:rgba(238,243,247,.68);
  font:var(--fw-helper) var(--fs-helper)/1.25 var(--font-ui);
  transition:background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.module-rail-btn:hover{ background:rgba(238,243,247,.08); color:#fff; }
.module-rail-btn:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--brand-ink), 0 0 0 4px var(--brand-primary); }
.module-rail-btn.active{ color:#fff; }
.module-rail.is-expanded .module-rail-btn.active{ background:rgba(238,243,247,.1); }
.module-rail-icon{
  width:var(--rail-icon-size); height:var(--rail-icon-size); flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--rail-icon-radius); background:rgba(238,243,247,.12); color:#fff;
  transition:background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.module-rail-btn:hover .module-rail-icon{ transform:translateY(-1px); }
.module-rail-icon .ds-icon, .module-rail-icon svg{ width:20px; height:20px; }
/* Compact (default): no label at all -- never a clipped partial word.
   title= on the button is the accessible name/tooltip in this state. */
.module-rail-label{ display:none; }
.module-rail.is-expanded .module-rail-btn{
  flex-direction:row; justify-content:flex-start; gap:var(--space-3);
  padding:var(--space-2) var(--space-3); margin:0 var(--space-2) var(--space-1);
}
.module-rail.is-expanded .module-rail-btn:hover .module-rail-icon{ transform:none; }
.module-rail.is-expanded .module-rail-label{
  display:block; flex:1; min-width:0; text-align:start; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
html[data-sidebar-tone="light"] .module-rail{ background:linear-gradient(180deg,var(--sidebar-bg,#fff) 0%,color-mix(in srgb,var(--sidebar-bg,#fff) 96%,#000) 100%); border-inline-end:1px solid var(--border-hairline); }
html[data-sidebar-tone="light"] .module-rail-btn{ color:var(--text-secondary); }
html[data-sidebar-tone="light"] .module-rail-btn:hover{ background:var(--surface-sunken); color:var(--text-primary); }
html[data-sidebar-tone="light"] .module-rail-btn.active{ color:var(--text-primary); }
html[data-sidebar-tone="light"] .module-rail.is-expanded .module-rail-btn.active{ background:var(--surface-sunken); }
html[data-sidebar-tone="light"] .module-rail-icon{ background:var(--surface-sunken); color:var(--text-primary); }

/* The one explicit expand/collapse control -- a real, always-visible,
   keyboard-reachable <button> (never hover-only), pinned to the rail's
   own bottom via margin-top:auto regardless of how many module tiles
   scroll above it. Same visual language as .module-rail-btn (reuses its
   icon-box sizing) rather than a bespoke control. */
.module-rail-toggle{
  display:flex; align-items:center; gap:var(--space-3); margin:auto var(--space-2) 0;
  background:none; border:0; border-top:1px solid rgba(238,243,247,.12); cursor:pointer;
  padding:var(--space-3); color:rgba(238,243,247,.68);
  font:var(--fw-helper) var(--fs-helper)/1.25 var(--font-ui);
  transition:background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.module-rail-toggle:hover{ background:rgba(238,243,247,.08); color:#fff; }
.module-rail-toggle:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--brand-ink), 0 0 0 4px var(--brand-primary); }
.module-rail-toggle-icon{ display:flex; flex:none; width:var(--rail-icon-size); align-items:center; justify-content:center; transition:transform var(--duration-base) var(--ease-standard); }
.module-rail-toggle-icon svg{ width:18px; height:18px; }
.module-rail.is-expanded .module-rail-toggle-icon{ transform:rotate(180deg); }
.module-rail.is-expanded .module-rail-toggle .module-rail-label{ display:block; }
html[data-sidebar-tone="light"] .module-rail-toggle{ color:var(--text-secondary); border-top-color:var(--border-hairline); }
html[data-sidebar-tone="light"] .module-rail-toggle:hover{ background:var(--surface-sunken); color:var(--text-primary); }

/* Contextual nav's own module-scoped search box, matching اكتفاء's
   per-module "ابحث" field -- lives inside #nav, above the active
   module's own page list. */
.module-nav-search{
  display:flex; align-items:center; gap:var(--space-2); height:var(--contextnav-search-height);
  margin:0 0 var(--space-2); padding:0 var(--space-3); border-radius:var(--radius-md);
  background:rgba(238,243,247,.08); transition:background var(--duration-fast) var(--ease-standard);
}
.module-nav-search:focus-within{ background:rgba(238,243,247,.14); box-shadow:0 0 0 1px rgba(238,243,247,.25) inset; }
.module-nav-search .ds-icon{ color:rgba(238,243,247,.55); flex:none; width:16px; height:16px; }
.module-nav-search input{
  flex:1; min-width:0; background:none; border:0; outline:0; color:#fff;
  font:var(--fw-body) var(--fs-body)/1.3 var(--font-ui);
}
.module-nav-search input::placeholder{ color:rgba(238,243,247,.48); }
html[data-sidebar-tone="light"] .module-nav-search{ background:var(--surface-sunken); }
html[data-sidebar-tone="light"] .module-nav-search:focus-within{ background:var(--surface-2); box-shadow:0 0 0 1px var(--border-strong) inset; }
html[data-sidebar-tone="light"] .module-nav-search .ds-icon{ color:var(--text-muted); }
html[data-sidebar-tone="light"] .module-nav-search input{ color:var(--text-primary); }
html[data-sidebar-tone="light"] .module-nav-search input::placeholder{ color:var(--text-muted); }
.module-nav-empty{ padding:var(--space-4) var(--space-3); color:rgba(238,243,247,.5); font:var(--fw-helper) var(--fs-helper)/1.4 var(--font-ui); text-align:center; }
html[data-sidebar-tone="light"] .module-nav-empty{ color:var(--text-muted); }

@media (prefers-reduced-motion:reduce){
  .module-rail, .module-rail-toggle-icon, .module-rail-icon{ transition:none; }
}

@media (max-width:1023px){
  .module-rail{
    position:fixed; inset-block:0; inset-inline-start:0; width:var(--rail-width);
    transform:translateX(-100%); transition:transform var(--duration-base) var(--ease-standard);
    z-index:var(--z-mobile-nav);
  }
  [dir="rtl"] .module-rail{ transform:translateX(100%); }
  .module-rail.is-open{ transform:none; }
  /* Mobile keeps the canonical off-canvas drawer only -- the desktop
     expand/collapse concept does not apply here at all (never a second,
     compressed "mini mobile rail"), so width/label always stay at the
     compact values regardless of any saved .is-expanded preference, and
     the explicit toggle control (redundant with the drawer's own
     open/close affordance) is hidden. */
  .module-rail.is-expanded{ width:var(--rail-width); }
  .module-rail.is-expanded .module-rail-btn{ flex-direction:column; justify-content:center; gap:4px; padding:var(--space-2) 4px; margin:0 var(--space-2) var(--space-2); }
  .module-rail.is-expanded .module-rail-label{ display:none; }
  .module-rail-toggle{ display:none; }
}