/* ORDOX HUB — CALL CENTER UI, V4.9.3 MULTI-ROLE
 * ============================================================================
 *
 * THE VISUAL IDENTITY IS FROZEN. This stylesheet adds no palette, no font and
 * no design system. Every colour below is one of the variables the production
 * shell already declares in ui/index.html:9 —
 *
 *     --bg --bg2 --sidebar --card --card2 --blue --blue2 --green
 *     --text --muted --border --pink
 *
 * There is no hard-coded hex outside of rgba() shadows and state tints derived
 * from those same hues, exactly as the existing .hero-card and .notice rules
 * already do. The logo is never referenced, recoloured or replaced. The result
 * is the same ORDOX Hub product with a modern phone panel in it.
 *
 * SCOPING. Every selector starts with .occ- or #occ-. Nothing here can reach a
 * production element, so removing the one <link> tag in the patch removes this
 * file's entire effect with no side effects.
 *
 * Section 9 is the one place that affects shell elements, and it still obeys
 * that rule: it styles .occ-host* classes that ordox-callcenter.js ADDS to those
 * elements at runtime. No production id or class is ever used as a selector, no
 * shell markup is edited, and a shell element with no .occ-host* class on it is
 * untouched. Remove the two tags and both halves disappear together.
 *
 * NO EXTERNAL DEPENDENCY. No CDN, no icon font, no web font. The icons in the
 * markup are inline SVG or plain Unicode already used by the shell.
 *
 * VERTICAL BUDGET — the reason this file is shaped the way it is:
 *
 *     dock, IDLE                       ~56 px    one row
 *     dock, ACTIVE + collapsed        ~104 px    two rows   (brief: 80-140)
 *     dock, ACTIVE + expanded         ~405 px    pad open on request, and
 *                                     ~385 px    on a viewport <= 820 px tall
 *     shell hero band, compacted       ~78 px    was ~126 px; hidden entirely
 *                                                while one of our views is open
 *
 * No rule in this file reserves height for a call that does not exist: IDLE has
 * no second row, the side column has no min-height, and the dial pad is not in
 * the document at all until it is opened.
 */

/* ---------------------------------------------------------------------------
   1. THE CALL CENTER DOCK
   Sits at the top of the main column, above whatever view is showing. It is
   position:sticky rather than fixed so it never covers the operator workspace
   and never traps a scroll on a small screen.
--------------------------------------------------------------------------- */

.occ-dock{
  position: sticky;
  top: 0;
  z-index: 40;
  /* The dock is a sibling of .topbar inside .main, so it carries the horizontal
     inset that .dashboard gets from its own padding and lines up with the work
     area below it. Bottom margin is 0: .dashboard's 24px top padding is already
     the gap. */
  margin: 12px 32px 0;
  background: linear-gradient(120deg, var(--card) 0%, var(--bg2) 60%, var(--bg) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  overflow: hidden;
}

/* IDLE and ACTIVE are different states, so they are also different objects: the
   live dock gains a second row, and a border the idle one does not have. The
   accent is the shell's own blue, and it marks the DOCK, never the device
   connection and never the Ordox command state — those keep their own pills. */
.occ-dock.occ-dock-live{
  border-color: rgba(47,107,255,.42);
  box-shadow: 0 10px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(47,107,255,.18);
}

/* The always-visible strip, and the ONLY primary representation of the current
   call. One row when idle, two when a call is live. There is no min-height: the
   bar is exactly as tall as the rows it actually contains. */
.occ-dock-bar{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 14px;
}

.occ-bar-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 34px;
}

/* Row 2 exists only while a call does, so IDLE and ACTIVE are different shapes
   rather than the same shape with different words. */
.occ-bar-ctl{
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.occ-device-chip{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2px;
  white-space: nowrap;
  color: var(--text);
}
.occ-device-chip .occ-ico{ width: 15px; height: 15px; opacity: .85; flex: 0 0 auto }
.occ-device-name{ max-width: 190px; overflow: hidden; text-overflow: ellipsis }

.occ-bar-sep{
  width: 1px; height: 20px; flex: 0 0 auto;
  background: var(--border);
}

/* Direction is detail, not a state. It must never be mistaken for one of the
   three pills, so it gets no dot, no tint and no pill shape. */
.occ-dir{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--muted);
  white-space: nowrap;
}

.occ-idle-text{ font-size: 12px; color: var(--muted) }

.occ-multi{
  font-size: 10.5px;
  font-weight: 600;
  color:#34D399;
  white-space: nowrap;
}

.occ-spacer{ flex: 1 1 auto; min-width: 8px }

.occ-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
}
.occ-toggle:hover{ border-color: var(--blue) }
.occ-toggle .occ-chev{ transition: transform .18s ease; display: inline-block }
.occ-dock.occ-expanded .occ-toggle .occ-chev{ transform: rotate(180deg) }

.occ-dock-body{ display: none; padding: 0 14px 14px }
.occ-dock.occ-expanded .occ-dock-body{ display: block }

/* ---------------------------------------------------------------------------
   2. THE THREE INDEPENDENT STATES
   Device connection, call state and Ordox command state are rendered as three
   separate pills that are never merged into one indicator. A disconnected
   device and a disabled phone look different because they ARE different.
--------------------------------------------------------------------------- */

.occ-states{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap }

.occ-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--muted);
  white-space: nowrap;
}
.occ-pill .occ-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.occ-pill-label{ opacity: .65; font-weight: 600 }

.occ-pill.occ-ok{      color:#34D399; border-color: rgba(16,185,129,.32); background: rgba(16,185,129,.12) }
.occ-pill.occ-live{    color:#6EA8FE; border-color: rgba(47,107,255,.32); background: rgba(47,107,255,.12) }
.occ-pill.occ-warn{    color:#F0AF4C; border-color: rgba(245,158,11,.32); background: rgba(245,158,11,.12) }
.occ-pill.occ-bad{     color:#FF5A79; border-color: rgba(232,61,122,.32); background: rgba(232,61,122,.12) }
.occ-pill.occ-idle{    color: var(--muted) }

/* A ringing call pulses. Reduced-motion users get a static pill. */
.occ-pill.occ-ring{ animation: occ-pulse 1.1s ease-in-out infinite }
@keyframes occ-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
@media (prefers-reduced-motion: reduce){
  .occ-pill.occ-ring{ animation: none }
}

.occ-timer{
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .5px;
  color: var(--text);
}

.occ-live-number{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* ---------------------------------------------------------------------------
   3. PHONE CONTROLS
--------------------------------------------------------------------------- */

.occ-controls{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap }

.occ-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.occ-btn:hover:not(:disabled){ border-color: var(--blue) }
.occ-btn:focus-visible{ outline: 2px solid var(--blue); outline-offset: 2px }
.occ-btn:disabled{ opacity: .42; cursor: not-allowed }

.occ-btn-call{ background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.38); color:#34D399 }
.occ-btn-call:hover:not(:disabled){ background: rgba(16,185,129,.24); border-color:#10B981 }
.occ-btn-end{ background: rgba(232,61,122,.16); border-color: rgba(232,61,122,.38); color:#FF5A79 }
.occ-btn-end:hover:not(:disabled){ background: rgba(232,61,122,.24); border-color: var(--pink) }
.occ-btn-answer{ background: rgba(47,107,255,.16); border-color: rgba(47,107,255,.38); color:#6EA8FE }
.occ-btn.occ-on{ background: rgba(47,107,255,.22); border-color: var(--blue); color:#9CC2FF }

/* A control that exists in the design but is NOT supported by this build is
   drawn dimmed and permanently disabled, with the reason in its tooltip and in
   its accessible name. It is never drawn as if it would work. */
.occ-btn.occ-unsupported{ opacity: .3; cursor: not-allowed }

.occ-btn .occ-ico{ width: 15px; height: 15px; flex: 0 0 auto }
.occ-btn-label{ white-space: nowrap }

/* ---------------------------------------------------------------------------
   4. THE DIAL PAD
--------------------------------------------------------------------------- */

.occ-phone{
  display: grid;
  grid-template-columns: minmax(200px, 238px) 1fr;
  gap: 14px;
  align-items: start;
}

.occ-dialer{
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}

.occ-numrow{ display: flex; gap: 7px; align-items: center; margin-bottom: 8px }

.occ-num{
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-align: center;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.occ-num::placeholder{ color: var(--muted); font-weight: 500; letter-spacing: .5px; font-size: 12px }
.occ-num:focus{ outline: none; border-color: var(--blue) }

.occ-back{
  width: 38px; height: 38px; flex: 0 0 auto;
  font-size: 16px; color: var(--muted);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer;
}
.occ-back:hover{ color: var(--text); border-color: var(--blue) }

.occ-pad{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px }

.occ-key{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 40px;
  font-family: inherit;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.occ-key:hover{ background: var(--card2); border-color: var(--blue) }
.occ-key:active{ background: var(--blue2) }
.occ-key:focus-visible{ outline: 2px solid var(--blue); outline-offset: 2px }
.occ-key-digit{ font-size: 17px; font-weight: 700; line-height: 1 }
.occ-key-letters{
  font-size: 8px; font-weight: 700; letter-spacing: 1.4px;
  color: var(--muted); margin-top: 2px; height: 9px;
}

.occ-dial-actions{ display: flex; gap: 8px; margin-top: 8px }
.occ-dial-actions .occ-btn{ flex: 1 1 auto; min-height: 36px }

/* ---------------------------------------------------------------------------
   5. THE SIDE COLUMN OF THE EXPANDED PANEL

   Device picker, request feedback, call DETAIL and the ORDOX enable/disable
   control. It deliberately does NOT contain the number, the call state, the
   timer or the call controls — those are in the bar, once. There is no
   min-height here: an empty side column takes no space at all.
--------------------------------------------------------------------------- */

.occ-side{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-content: start;
}

.occ-detail{
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 11px;
  display: grid;
  gap: 2px;
}

.occ-power-row{ margin-top: 2px }

.occ-device-row{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.occ-select{
  height: 34px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  max-width: 260px;
}
.occ-select:focus{ outline: none; border-color: var(--blue) }

.occ-hint{ font-size: 11px; color: var(--muted); line-height: 1.5 }
.occ-hint.occ-bad-text{ color:#FF5A79 }
.occ-hint.occ-ok-text{ color:#34D399 }

/* Transient result of a real API call: loading, success, failure, 403. Never
   shown for an action that was not actually attempted. */
.occ-flash{
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--muted);
}
.occ-flash.occ-f-ok{   color:#34D399; border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.1) }
.occ-flash.occ-f-err{  color:#FF5A79; border-color: rgba(232,61,122,.3); background: rgba(232,61,122,.1) }
.occ-flash.occ-f-warn{ color:#F0AF4C; border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.1) }
.occ-flash.occ-f-busy{ color:#6EA8FE; border-color: rgba(47,107,255,.3); background: rgba(47,107,255,.1) }

/* ---------------------------------------------------------------------------
   6. CALL CENTER VIEWS (history, missed, operators, roles)
   These reuse the shell's own .view / .panel / .table conventions so they look
   native. Only layout details that do not exist in the shell are defined here.
--------------------------------------------------------------------------- */

.occ-view{ display: none }
.occ-view.occ-active-view{ display: block }

.occ-panel{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
.occ-panel-head{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.occ-panel-head h3{ font-size: 15px; font-weight: 700 }
.occ-panel-sub{ font-size: 11px; color: var(--muted); margin-top: 2px }

.occ-filters{ display: flex; gap: 6px; flex-wrap: wrap; align-items: center }
.occ-chip{
  padding: 5px 12px;
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
}
.occ-chip:hover{ color: var(--text); border-color: var(--blue) }
.occ-chip.occ-chip-on{ color:#9CC2FF; border-color: var(--blue); background: rgba(47,107,255,.16) }

.occ-search{
  height: 32px; padding: 0 10px; min-width: 160px;
  font-family: inherit; font-size: 12px;
  color: var(--text); background: var(--card2);
  border: 1px solid var(--border); border-radius: 9px;
}
.occ-search:focus{ outline: none; border-color: var(--blue) }

.occ-table-wrap{ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch }
.occ-table{ width: 100%; border-collapse: collapse; font-size: 12px; min-width: 620px }
.occ-table th{
  text-align: left; padding: 9px 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.occ-table td{ padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle }
.occ-table tr:last-child td{ border-bottom: 0 }
.occ-table tbody tr:hover{ background: var(--card2) }
.occ-num-cell{ font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap }
.occ-muted{ color: var(--muted) }

.occ-tag{
  display: inline-block; padding: 2px 8px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
  border-radius: 20px; border: 1px solid var(--border);
  background: var(--card2); color: var(--muted); white-space: nowrap;
}
.occ-tag.occ-t-ans{  color:#34D399; border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.1) }
.occ-tag.occ-t-miss{ color:#FF5A79; border-color: rgba(232,61,122,.3); background: rgba(232,61,122,.1) }
.occ-tag.occ-t-out{  color:#6EA8FE; border-color: rgba(47,107,255,.3); background: rgba(47,107,255,.1) }
.occ-tag.occ-t-unk{  color:#F0AF4C; border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.1) }

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

.occ-cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px }
.occ-card{
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px;
}
.occ-card-head{ display: flex; align-items: center; gap: 8px; margin-bottom: 9px }
.occ-card-name{ font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.occ-kv{ display: flex; justify-content: space-between; gap: 10px; font-size: 11px; padding: 3px 0 }
.occ-kv span:first-child{ color: var(--muted) }
.occ-kv span:last-child{ font-weight: 700; text-align: right }

/* ---------------------------------------------------------------------------
   7. SIDEBAR ENTRIES
   Cloned from the shell's own .nav-item so they are visually identical; only
   the section caption is new.
--------------------------------------------------------------------------- */

.occ-nav-caption{
  padding: 14px 14px 5px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--muted); opacity: .7;
}

/* ---------------------------------------------------------------------------
   7b. MONITORING EXTRAS
--------------------------------------------------------------------------- */

.occ-hint.occ-warn-text{ color:#FBBF24 }

/* Scope totals. Server-computed and summed from the same scoped rows below,
   so the header can never disagree with the cards it sits above. */
.occ-totals{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px 18px;
  background: var(--card2); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 14px; margin-bottom: 14px;
}

.occ-card-call{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 9px; margin-bottom: 9px;
  border-radius: 8px;
  background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.3);
}

/* Our views sit in the same scroll context as the shell's own, so they need the
   same top spacing and nothing else. */
#occ-views{ display: block }
#occ-views .occ-view{ display: none }
#occ-views .occ-view.occ-active-view{ display: block }
.occ-view-flash{ margin-bottom: 12px }

/* ---------------------------------------------------------------------------
   8. RESPONSIVE
   The operator layout is TOP = Call Center, BOTTOM = workspace. The workspace
   must keep the space; the dock must never grow to fill the screen.

   The two reference targets are 1920x1080 and 1366x768 at 100% zoom. 1366x768
   is the tight one: 768 - topbar(69) - dock(104 active, collapsed) - shell
   padding and hero band leaves roughly 480px of work area, which is why the
   pad is sized by viewport HEIGHT below and not only by width.
--------------------------------------------------------------------------- */

@media (max-width: 1280px){
  .occ-phone{ grid-template-columns: minmax(190px, 220px) 1fr; gap: 12px }
}

@media (max-width: 1040px){
  .occ-phone{ grid-template-columns: 1fr }
  .occ-side{ gap: 8px }
}

@media (max-width: 720px){
  .occ-dock{ position: static; margin: 0 12px 10px }
  .occ-dock-bar{ padding: 8px 11px }
  .occ-bar-row{ gap: 8px }
  .occ-live-number{ max-width: 150px }
  .occ-device-name{ max-width: 110px }
  .occ-dock-body{ padding: 0 11px 11px }
  .occ-btn-label{ display: none }        /* icon-only, accessible name kept on the button */
  .occ-btn{ padding: 8px 11px }
  .occ-panel{ padding: 12px }
  .occ-select{ max-width: 100% }
}

/* 1366x768 and every laptop shorter than it: shave the pad rather than let the
   expanded dock eat the workspace. The collapsed bar is unaffected. */
@media (max-height: 820px){
  .occ-key{ height: 36px }
  .occ-key-letters{ font-size: 7.5px; margin-top: 1px; height: 8px }
  .occ-num{ height: 36px }
  .occ-back{ width: 36px; height: 36px }
}

/* Short viewports: an expanded dock could otherwise push the workspace off
   screen entirely. Cap it and let it scroll internally instead. */
@media (max-height: 620px){
  .occ-dock-body{ max-height: 46vh; overflow-y: auto }
}

/* ---------------------------------------------------------------------------
   9. HOST COOPERATION — the shell's own rows, without editing the shell

   ui/index.html renders .hero-cards immediately above every view: four cards at
   min-height 106px plus a 20px margin, i.e. a ~126px band that sits between the
   topbar and the work area on every screen. One of those cards,
   #dashboardLiveCallCard ("Телефон"), restates the live call that our bar
   already shows — the third copy of one call.

   The shell is read-only, so ordox-callcenter.js ADDS the .occ-host* classes
   below to those elements at runtime and this section styles only those
   classes. No production id or class is used as a selector here; a shell
   element without an .occ-host* class is untouched; the shell's own
   renderDashboardLiveCall() keeps writing to the hidden card exactly as before,
   so no call-state processing is removed — only its duplicate rendering.

   SPECIFICITY NOTE, and the reason for the compound selectors and the two
   !important flags: the patch inserts our <link> BEFORE the shell's inline
   <style>, so a rule of equal specificity loses on source order. Compound
   selectors (.occ-host .occ-host-herocard, 0-2-0) beat the shell's single-class
   rules (.hero-card, 0-1-0) regardless of order. The two display:none rules
   additionally have to beat an INLINE style, because setUserAccess() assigns
   heroCall.style.display directly — only !important can do that.
--------------------------------------------------------------------------- */

/* The duplicate "Телефон" card: hidden visually, kept in the DOM and kept
   up to date by the shell. Removing our two tags brings it straight back. */
.occ-host-dup{ display: none !important }

/* While one of our full-screen work views is open, the hero row is overview
   furniture and every one of its destinations is also in the sidebar. Applied
   to the row itself, not inherited from .occ-host, so it also works for an
   admin who has view access but no dock. */
.occ-host-rowhide{ display: none !important }

/* The duplicate card no longer occupies a track, so the row is packed left and
   each card is capped instead of stretching to fill the width the hidden card
   gave up. Four tracks, exactly as the shell intends; empty ones collapse. */
.occ-host .occ-host-heroes{
  grid-template-columns: repeat(4, minmax(0, 300px));
  justify-content: start;
  gap: 12px;
  margin-bottom: 14px;
}

/* --- The cards themselves ----------------------------------------------------
   These cards are laid out TWO different ways depending on what the shell has
   done, and both have to be handled:
     * .hero-card in the stylesheet is display:grid, but
     * applyAccess() assigns card.style.display = 'block' | 'none' inline as a
       permission gate, and an inline style wins — so in practice a permitted
       card is a BLOCK, its grid-template-* are inert, and its children stack.
       That stacking (icon 58 + title + description + CTA) is what makes the
       band ~126px tall.
   The block path is fixed with a float, the grid path with grid-row. Each set
   of declarations is inert on the other path, so neither has to win.

   NOTHING here touches `display`. Forcing it would override the permission gate
   and could reveal a card applyAccess() had hidden — visibility is the shell's
   decision and stays the shell's decision.

   The cards keep their gradients, borders, glow, hover lift and icons — the
   frozen visual language — and lose only the static one-line description, which
   is decoration, not status. The live "Активна" CTA is kept. */
.occ-host .occ-host-herocard{
  min-height: 0;
  padding: 11px 14px;
  grid-template-columns: 38px minmax(0,1fr) auto;
  grid-template-rows: auto;
  column-gap: 12px;
}
.occ-host .occ-host-herocard > p{ display: none }
.occ-host .occ-host-herocard > h3{
  grid-row: 1;
  align-self: center;
  display: inline-block;            /* block path: share the line with the CTA */
  vertical-align: middle;
  margin-right: 10px;
  font-size: 14px;
}
.occ-host .occ-host-herocard .icon-wrap{
  grid-row: 1;
  float: left;                      /* block path: inert inside a grid */
  width: 38px; height: 38px;
  border-radius: 12px;
  margin-right: 12px;
}
.occ-host .occ-host-herocard .icon-wrap svg{ width: 19px; height: 19px }
.occ-host .occ-host-herocard .icon-wrap:after{ inset: 4px; border-radius: 9px }
.occ-host .occ-host-herocard .cta{
  grid-row: 1;
  display: inline-flex;             /* block path: hug content, do not take a row */
  vertical-align: middle;
  padding: 5px 9px;
  font-size: 9.5px;
}

@media (max-width: 1180px){
  .occ-host .occ-host-heroes{ grid-template-columns: repeat(4, minmax(0, 240px)) }
}

/* At 600px and below the shell forces the row to a single column with
   !important. That is the right answer on a phone and is left alone. */

/* ---------------------------------------------------------------------------
   10. PRINT
--------------------------------------------------------------------------- */

/* Printing a call list should not print the phone panel. */
@media print{
  .occ-dock, .occ-nav-caption{ display: none !important }
}

/* ---------------------------------------------------------------------------
   11. OPERATOR SCOPE EDITOR  (additive — V4.9.3 admin→operator monitoring scope)

   The control a super admin uses to answer "which operators may this admin
   watch?". It sits inside the existing Роли и права table cell and reuses the
   existing .occ-select and .occ-hint styling, so it inherits the theme rather
   than introducing a second visual language. Nothing above this block is
   touched; deleting this block degrades the picker to unstyled controls that
   still work.
--------------------------------------------------------------------------- */

.occ-scope{ margin-top: 8px; display: flex; flex-direction: column; gap: 6px }

.occ-scope .occ-scope-type{ width: 100%; max-width: 210px }

/* Bounded height on purpose: a long operator list must not push the rest of
   the table off screen. It scrolls; it is never truncated. */
.occ-scope-list{
  max-height: 168px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.occ-scope-list[hidden]{ display: none }

.occ-scope-item{
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.4;
}
.occ-scope-item:hover{ background: var(--card) }
.occ-scope-item input{ flex: none; cursor: pointer; margin: 0 }

/* First name + last name. This is the identity axis the scope is chosen by. */
.occ-scope-name{ color: var(--text); font-weight: 600 }

/* Username / email only. The user id is in the row's title attribute, and a
   deviceId appears nowhere in this control at all. */
.occ-scope-sub{ color: var(--muted); font-size: 11px; margin-left: auto }

.occ-scope-save{ align-self: flex-start }

@media print{
  .occ-scope{ display: none !important }
}

/* ORDOX V4.9.3 — compact Roles & Rights rows */
.occ-table td {
  vertical-align: middle;
}

.occ-scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  vertical-align: middle;
  flex-wrap: nowrap;
}

.occ-scope-type {
  width: auto;
  min-width: 150px;
  margin: 0;
}

.occ-scope-save {
  width: auto;
  margin: 0;
  white-space: nowrap;
}

.occ-scope-list {
  position: absolute;
  z-index: 50;
  margin-top: 42px;
  padding: 10px;
  min-width: 260px;
  max-height: 260px;
  overflow-y: auto;
  border-radius: 10px;
  background: #111a32;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.occ-scope-list[hidden] {
  display: none !important;
}

/* ORDOX V4.9.3 — scope controls strictly on one row */
.occ-scope {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin: 0 0 0 6px !important;
  position: relative;
  white-space: nowrap;
}

.occ-scope-type {
  display: inline-block !important;
  width: 150px !important;
  min-width: 150px !important;
  margin: 0 !important;
  flex: 0 0 150px;
}

.occ-scope-save {
  display: inline-block;
  width: auto !important;
  margin: 0 !important;
  flex: 0 0 auto;
  white-space: nowrap !important;
}

/* hidden still means hidden until a scope is changed */
.occ-scope-save[hidden] {
  display: none !important;
}

/* operator picker floats below; it must never increase row height */
.occ-scope-list {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: 6px !important;
  z-index: 100;
}

/* ORDOX — keep dial panel open switch */
.occ-pin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 9px;
  background: rgba(15,23,42,.72);
  color: #94a3b8;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.occ-pin-toggle:hover {
  border-color: rgba(59,130,246,.55);
  color: #e2e8f0;
}

.occ-pin-switch {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: #334155;
  transition: background .15s ease;
}

.occ-pin-switch > span {
  position: absolute;
  width: 12px;
  height: 12px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}

.occ-pin-toggle.is-on {
  color: #5eead4;
  border-color: rgba(20,184,166,.42);
  background: rgba(13,148,136,.10);
}

.occ-pin-toggle.is-on .occ-pin-switch {
  background: #14b8a6;
}

.occ-pin-toggle.is-on .occ-pin-switch > span {
  transform: translateX(12px);
}