/* The sole owner of application geometry and role navigation presentation.
   Role visibility and actions remain owned by the existing authorization/routing code.
   One director nav element changes form; no resize or connectivity JS is involved. */
:root {
  --shell-content-max: 1420px;
  --shell-safe: clamp(12px, 1.8vw, 48px);
  --shell-gap: clamp(12px, 1.2vw, 24px);
  --shell-navigation: 76px;
  --forum-mis-visual-bottom: 0px;
}
#applicationShell { min-inline-size: 0; }
#applicationContent {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: calc(var(--shell-content-max) + 2 * var(--shell-safe));
  min-inline-size: 0;
  margin: 0 auto;
  padding: 22px var(--shell-safe) 36px;
  container: app-content / inline-size;
}
#applicationContent > .screen { min-inline-size: 0; max-inline-size: 100%; }
#directorateGlobalFooter, #employeeBottomNav { display: none; }
#directorateGlobalFooter[hidden], #employeeBottomNav.hidden { display: none; }
#directorateGlobalFooter button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-inline-size: 0; min-block-size: 48px; padding: 8px;
  border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
#directorateGlobalFooter svg {
  inline-size: 24px; block-size: 24px; flex: 0 0 24px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
#directorateGlobalFooter span { font-size: 13px; font-weight: 800; line-height: 1.5; }
#directorateGlobalFooter button.active { background: #104b80; color: #fff; border-color: #a5cce8; }
#directorateGlobalFooter button:hover { background: #183e59; color: #fff; }
#directorateGlobalFooter button:focus-visible { outline: 3px solid #e9c875; outline-offset: -3px; }

/* 76px navigation + gutters leaves >= 640px at the compact boundary.
   A full 208px sidebar begins only when >= 1200px can remain for content. */
@media (min-width: 761px) {
  html.forum-mis-director-chrome #applicationShell.directorateMode {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--shell-navigation);
    grid-template-rows: auto 1fr;
    grid-template-areas: "header navigation" "content navigation";
    align-items: start; column-gap: var(--shell-gap);
    padding-inline: var(--shell-safe);
    max-inline-size: calc(var(--shell-content-max) + var(--shell-navigation) + var(--shell-gap) + 2 * var(--shell-safe));
    margin-inline: auto;
  }
  #applicationShell.directorateMode > header {
    grid-area: header; min-inline-size: 0; inline-size: 100%;
    max-inline-size: var(--shell-content-max); margin: 12px auto 0;
    position: relative; inset: auto;
  }
  #applicationShell.directorateMode > #applicationContent {
    grid-area: content; max-inline-size: var(--shell-content-max);
    padding-inline: 0;
  }
  html.forum-mis-director-chrome #directorateGlobalFooter:not([hidden]) {
    grid-area: navigation; position: sticky; top: 12px; align-self: start;
    display: flex; flex-direction: column; gap: 8px;
    inline-size: 100%; max-block-size: calc(100dvh - 24px);
    overflow-y: auto; margin-block: 12px; padding: 12px 8px;
    border: 1px solid #23465d; border-radius: 14px;
    background: #0a2031; color: #eef6fa;
    box-shadow: 0 8px 22px #0518261f;
    direction: rtl; z-index: 20;
  }
  #directorateGlobalFooter::before {
    content: ""; display: block; flex: 0 0 48px; margin-block-end: 6px;
    background: url("./basra-mis-mark.svg") center / contain no-repeat;
  }
  #directorateGlobalFooter button { flex: 0 0 auto; }
  /* Text remains in the accessibility tree. Native title provides a tooltip. */
  #directorateGlobalFooter span {
    position: absolute; inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  #applicationContent .activityRegistry:not([data-operational-phone]),
  #applicationContent .reportRegistry:not([data-operational-phone]) {
    overflow-x: auto; max-inline-size: 100%;
  }
}
@media (min-width: 1536px) {
  :root { --shell-navigation: 208px; }
  #directorateGlobalFooter button { justify-content: flex-start; padding-inline: 12px; }
  #directorateGlobalFooter span {
    position: static; inline-size: auto; block-size: auto;
    overflow: visible; clip-path: none; white-space: normal;
  }
}
/* Component density follows its real content region, independent of the rail. */
@container app-content (min-width: 761px) and (max-width: 1000px) {
  #activities .employeePageHero, #reports .employeePageHero { flex-wrap: wrap; }
  #activities .employeePageActions, #reports .employeePageActions { flex-wrap: wrap; max-inline-size: 100%; }
}
@media (max-width: 760px) {
  :root { --shell-safe: 10px; }
  #applicationContent {
    padding: 12px max(10px, env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  #employeeBottomNav:not(.hidden),
  html.forum-mis-director-chrome #directorateGlobalFooter:not([hidden]) {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; bottom: var(--forum-mis-visual-bottom); z-index: 120;
    box-sizing: border-box; direction: rtl;
    padding: 7px max(6px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    background: #fff; color: #334e63;
    box-shadow: 0 -8px 25px #0d2d4918;
    overscroll-behavior: none; backface-visibility: hidden;
  }
  #employeeBottomNav:not(.hidden) { inset-inline: 0; border-top: 1px solid #dbe3ea; }
  html.forum-mis-director-chrome #directorateGlobalFooter:not([hidden]) {
    inset-inline: 8px; border: 1px solid #d4dde4; border-radius: 17px;
  }
  #directorateGlobalFooter button, #employeeBottomNav button {
    display: grid; place-items: center; align-content: center; gap: 3px;
    min-inline-size: 0; min-block-size: 49px; padding: 4px;
    border: 0; border-radius: 11px; background: transparent; color: #334e63;
  }
  #directorateGlobalFooter span, #employeeBottomNav button small {
    display: block; font-size: clamp(9px, 2.7vw, 12px); font-weight: 800;
    line-height: 1.2; margin-block-start: 4px;
  }
  #directorateGlobalFooter svg { inline-size: 20px; block-size: 20px; }
  #employeeBottomNav button span { display: block; font-size: clamp(18px, 5vw, 21px); line-height: 1; }
  #employeeBottomNav button.active, #directorateGlobalFooter button.active { background: #edf5fb; color: #164b72; }
  #employeeBottomNav .navPrimary { background: var(--blue); color: #fff; transform: translateY(-5px); box-shadow: 0 7px 18px #1d659a35; }
}