/* ===========================================================================
   THE CONSOLE SHELL — one navigation, shipped in both systems.

   This file is IDENTICAL in sys1-yard-console and sys3-hris.

   TWO FIXED PIECES. The mark, the eight areas and the way out are a bar
   across the top that never moves. The screens of the area you are in are a
   column on the left, with the screen's own classifications beneath them.

   They were one column for an hour, and the Yard proved why that cannot
   work: ten screens under it pushed the eight areas up the page, so moving
   between areas meant scrolling back to find them. What must stay reachable
   goes in the bar; what changes with the area goes in the column.

   Colours come from theme.css, which is also the same file in both systems.
   Nothing here hard-codes one.

   Every rule a menu needs is here. Nothing in nav-shell.js carries a style
   attribute: the yard console serves style-src without 'unsafe-inline', and
   an inline style would be dropped there and honoured in the HRIS — the worst
   of both.
   =========================================================================== */

:root { --cict-top-h: 54px; }

/* --- the bar that never moves ------------------------------------------- */

.cict-top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 4px 14px;
  min-height: var(--cict-top-h); padding: 6px 18px;
  background: var(--card, #fff);
  border-bottom: 1px solid var(--line, #dfe3ec);
  font-size: 14px;
}

.cict-logo { display: block; line-height: 0; flex: 0 0 auto; }
.cict-logo img { height: 38px; width: auto; display: block; }

.cict-areas {
  display: flex; gap: 2px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.cict-areas::-webkit-scrollbar { display: none; }
.cict-areas a {
  padding: 7px 11px; border-radius: 6px; white-space: nowrap;
  color: var(--ink-soft, #5a6478); text-decoration: none;
  font-weight: 600; line-height: 1.2;
}
.cict-areas a:hover {
  background: var(--line-soft, #eef1f6); color: var(--ink, #141a2b);
}
.cict-areas a[aria-current] {
  background: var(--accent-wash, #e7ecf8); color: var(--accent, #17275c);
}

.cict-who {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  margin-left: auto; font-size: 12px; color: var(--ink-soft, #5a6478);
  text-align: right;
}
.cict-me {
  color: var(--ink, #141a2b); font-weight: 600; text-decoration: none;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.cict-me:hover { text-decoration: underline; }
.cict-role { color: var(--ink-faint, #8b93a5); white-space: nowrap; }
.cict-out {
  font: inherit; font-size: 12px; padding: 6px 11px; cursor: pointer;
  color: var(--ink, #141a2b); background: var(--card, #fff);
  border: 1px solid var(--line, #dfe3ec); border-radius: 6px;
}
.cict-out:hover { border-color: var(--ink-faint, #8b93a5); }

/* --- the column that changes with the area ------------------------------ */

.cict-side {
  width: 212px; flex: 0 0 212px; box-sizing: border-box;
  align-self: start;
  position: sticky; top: var(--cict-top-h);
  max-height: calc(100vh - var(--cict-top-h)); overflow-y: auto;
  padding: 16px 12px 24px;
  border-right: 1px solid var(--line, #dfe3ec);
  font-size: 14px; scrollbar-width: thin;
}
/* An area with one screen and a page with no rail leaves an empty column,
   and an empty column is a hole rather than nothing. */
.cict-side.cict-empty { display: none; }

.cict-heading {
  margin: 0 0 8px 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint, #8b93a5);
}

.cict-screens { display: flex; flex-direction: column; gap: 1px; }
.cict-screens a {
  display: block; padding: 7px 10px; border-radius: 6px;
  color: var(--ink-soft, #5a6478); text-decoration: none;
  font-size: 13px; font-weight: 500; line-height: 1.3;
}
.cict-screens a:hover {
  background: var(--line-soft, #eef1f6); color: var(--ink, #141a2b);
}
.cict-screens a[aria-current] {
  background: var(--accent-wash, #e7ecf8); color: var(--accent, #17275c);
  font-weight: 650;
}
.cict-areas a:focus-visible, .cict-screens a:focus-visible,
.cict-who a:focus-visible {
  outline: 2px solid var(--accent, #17275c); outline-offset: 1px;
}

/* A link that leaves this system for the other one. Once the two sit on one
   domain there is no origin to cross and the marker is not drawn at all —
   which is the honest behaviour, not a cosmetic one. */
.cict-areas a[data-away]::after,
.cict-screens a[data-away]::after {
  content: '\2197'; font-size: 10px; margin-left: 4px; vertical-align: super;
  color: var(--ink-faint, #8b93a5);
}

/* The screen's own rail, now the foot of this column. */
.cict-rail {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line, #dfe3ec);
}
.cict-rail:empty { display: none; }
.cict-side > .cict-rail:first-child {
  margin-top: 0; padding-top: 0; border-top: 0;
}

/* On a phone neither piece is pinned: 212px of column on a 375px screen
   leaves no room for the thing somebody came to read, and a bar that eats a
   fifth of the height is worse than one that scrolls away. */
@media (max-width: 860px) {
  .cict-top {
    position: static; flex-wrap: wrap; gap: 6px 8px; padding: 6px 12px;
  }
  .cict-logo img { height: 30px; }
  .cict-areas { order: 3; flex: 1 0 100%; }
  .cict-areas a { padding: 6px 9px; }
  .cict-who { gap: 8px; }
  .cict-role { display: none; }
  .cict-me { max-width: 120px; }

  .cict-side {
    /* 0 for grow, not 1: the shell is a column here, so a growing item
       stretches down the page and puts a hole between the menu and the thing
       somebody came to read. */
    width: 100%; flex: 0 0 auto; position: static; max-height: none;
    border-right: 0; border-bottom: 1px solid var(--line, #dfe3ec);
    padding: 10px 14px 12px;
  }
  .cict-heading { margin: 0 0 4px 2px; }
  .cict-screens {
    flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none; gap: 2px;
  }
  .cict-screens::-webkit-scrollbar { display: none; }
  .cict-screens a { white-space: nowrap; }
  /* The classifications become a strip too. Stacked, COMPANY and ON THE
     BOOKS put 700px between the top of the phone and the first row of the
     list somebody opened the screen to read. */
  .cict-rail { margin-top: 10px; padding-top: 10px;
               display: flex; flex-direction: row; gap: 6px;
               overflow-x: auto; scrollbar-width: none; }
  .cict-rail::-webkit-scrollbar { display: none; }
  .cict-rail h3 { display: none; }
  .cict-rail a { padding: 6px 10px; white-space: nowrap; }
  .cict-rail a .n { margin-left: 6px; }
}