/* CACHE_BUST_20260201_1937 */

/* =============================================================================
 * OmniShield Hub — Core UI CSS (Single Source of Truth)
 * Themes: dark (default) + light
 * ============================================================================= */

/* ------------------------------
   THEME TOKENS
-------------------------------- */

/* Default = DARK */
:root,
html[data-theme="dark"]{
  /* Brand */
  --os-brand:#11435d;
  --os-brand2:#1c7499;
  --os-accent:#5bbecc;
  --os-warn:#f3b412;

  /* Surfaces */
  --os-bg:#0b1220;
  --os-surface:#0e1726;
  --os-card:#111f33;

  /* Text hierarchy */
  --os-text-strong:#f8fafc;
  --os-text-main:#e5e7eb;
  --os-text-muted:#cbd5e1;
  --os-text-dim:#94a3b8;

  /* Links (mata o “azul/roxo do browser”) */
  --os-link:#9dd7e6;
  --os-link-hover:#cffafe;

  /* Borders */
  --os-border: rgba(255,255,255,.10);
  --os-border-2: rgba(255,255,255,.14);

  /* Radius */
  --os-radius:16px;

  /* Tables */
  --os-table-th-bg: rgba(255,255,255,.04);
  --os-table-row-hover: rgba(255,255,255,.04);

  /* Form controls */
  --os-control-bg: rgba(255,255,255,.06);
  --os-control-bg-focus: rgba(255,255,255,.08);
  --os-control-border: var(--os-border-2);
  --os-control-border-focus: rgba(91,190,204,.55);
  --os-control-shadow-focus: 0 0 0 3px rgba(91,190,204,.18);

  /* Chips / badges */
  --os-chip-bg: rgba(255,255,255,.08);
  --os-chip-border: var(--os-border);

  /* Aliases (LEGADO: não quebra templates antigos) */
  --os-primary: var(--os-accent);
  --os-text: var(--os-text-main);
  --os-text-2: var(--os-text-muted);
  --os-muted: var(--os-text-muted);
  --os-dim: var(--os-text-dim);
  --os-accent-soft: var(--os-link);
}

/* LIGHT THEME */
html[data-theme="light"]{
  --os-brand:#11435d;
  --os-brand2:#1c7499;
  --os-accent:#1c7499;
  --os-warn:#b7791f;

  --os-bg:#f5f7fb;
  --os-surface:#eef2f7;
  --os-card:#ffffff;

  --os-text-strong:#0f172a;
  --os-text-main:#111827;
  --os-text-muted:#475569;
  --os-text-dim:#64748b;

  --os-link:#0b5ea8;
  --os-link-hover:#063d6e;

  --os-border: rgba(15,23,42,.12);
  --os-border-2: rgba(15,23,42,.18);

  --os-table-th-bg: rgba(15,23,42,.04);
  --os-table-row-hover: rgba(15,23,42,.03);

  --os-control-bg: rgba(15,23,42,.03);
  --os-control-bg-focus: rgba(15,23,42,.05);
  --os-control-border: var(--os-border-2);
  --os-control-border-focus: rgba(28,116,153,.55);
  --os-control-shadow-focus: 0 0 0 3px rgba(28,116,153,.14);

  --os-chip-bg: rgba(15,23,42,.05);
  --os-chip-border: var(--os-border);

  /* Aliases (LEGADO) */
  --os-primary: var(--os-accent);
  --os-text: var(--os-text-main);
  --os-text-2: var(--os-text-muted);
  --os-muted: var(--os-text-muted);
  --os-dim: var(--os-text-dim);
  --os-accent-soft: var(--os-link);
}

/* ------------------------------
   BASE
-------------------------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body.os-body{
  margin:0;
  background: var(--os-bg);
  color: var(--os-text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
}

/* Links: sem roxo/azul padrão */
a, a:visited{
  color: var(--os-link);
  text-decoration: none;
}
a:hover{
  color: var(--os-link-hover);
  text-decoration: underline;
}

/* Hierarquia de texto */
.os-card__title,
.os-section-title{ color: var(--os-text-strong); }

.os-card__subtitle,
.os-muted,
.os-description{ color: var(--os-text-muted); }

.os-meta,
.os-k,
.os-table thead th{ color: var(--os-text-dim); }

/* ------------------------------
   SHELL / LAYOUT
-------------------------------- */
.os-shell{ display:flex; min-height:100vh; }

.os-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.os-content{
  background: linear-gradient(180deg, var(--os-surface) 0%, var(--os-bg) 100%);
  padding: 18px;
}

/* ------------------------------
   SIDEBAR
-------------------------------- */
.os-sidebar{
  width: 290px;
  height: 100vh;
  position: sticky;
  top: 0;
  transition: width .18s ease;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;

  background: linear-gradient(180deg, rgba(17,67,93,.98), rgba(11,18,32,.98));
  border-right: 1px solid var(--os-border);
  padding: 16px;

  display:flex;
  flex-direction:column;
  gap:16px;
}

.os-sidebar__brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding: 10px;
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius);
  background: rgba(0,0,0,.15);
}

.os-logo{
  width:42px;height:42px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  display:grid;place-items:center;
  font-weight:800;
  color: var(--os-text-strong);
}

.os-brandtext{ display:flex; flex-direction:column; gap:2px; }
.os-brandname{ font-weight:800; letter-spacing:.2px; color: var(--os-text-strong); }
.os-brandtag{ font-size:12px; color: var(--os-text-dim); }

/* Navigation */
.os-nav{
  display:flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction:column;
  gap:6px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.os-sidebar::-webkit-scrollbar,
.os-nav::-webkit-scrollbar{
  width: 10px;
}

.os-sidebar::-webkit-scrollbar-thumb,
.os-nav::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.16);
  border-radius: 999px;
}

.os-sidebar::-webkit-scrollbar-track,
.os-nav::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
}

.os-navlink, .os-navitem, .os-navgrp__btn{
  width:100%;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--os-text-main);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px;
  background: transparent;
  cursor:pointer;
}

.os-navlink:hover, .os-navitem:hover, .os-navgrp__btn:hover{
  background: rgba(255,255,255,.08);
  border-color: var(--os-border-2);
}

.os-navlink.is-active, .os-navitem.is-active, .os-navgrp__btn.is-active{
  background: rgba(91,190,204,.22);
  border-color: rgba(91,190,204,.45);
}

.os-ico{ width:20px; display:grid; place-items:center; opacity:.95; }
.os-label{ flex:1; }
.os-caret{ opacity:.7; }

.os-navgrp__children{
  margin-left: 12px;
  padding-left: 10px;
  border-left: 1px solid var(--os-border);
  display:none;
  gap:6px;
  flex-direction:column;
}
.os-navgrp.is-open .os-navgrp__children{ display:flex; }

.os-sidebar__foot{
  margin-top: 10px;
  border-top: 1px solid var(--os-border);
  padding-top: 12px;
  flex: 0 0 auto;
}

.os-user{ display:flex; gap:10px; align-items:center; }
.os-user__avatar{
  width:38px;height:38px;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  display:grid;place-items:center;
}
.os-user__name{ font-weight:700; font-size:14px; color: var(--os-text-strong); }
.os-user__hint{ color:var(--os-text-dim); font-size:12px; }

/* Sidebar collapse */
body.os-sidebar-collapsed .os-sidebar{ width: 84px; }
body.os-sidebar-collapsed .os-sidebar .os-label{ display:none !important; }
body.os-sidebar-collapsed .os-sidebar .os-navlink{ justify-content:center; }

/* ------------------------------
   MAIN FRAME / WIDTH GOVERNANCE
-------------------------------- */
:root{
  --os-shell-gutter: 18px;
  --os-content-max-width: 1260px;
}

.os-content{
  padding: 18px var(--os-shell-gutter) 24px;
}

.os-content-frame{
  width: min(100%, var(--os-content-max-width));
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.os-content-frame > *{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.os-content-frame .container{
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.os-content-frame iframe,
.os-content-frame table,
.os-content-frame .table-responsive,
.os-content-frame .os-card,
.os-content-frame .os-page,
.os-content-frame .os-container{
  max-width: 100%;
}

/* ------------------------------
   TOPBAR
-------------------------------- */
.os-topbar{
  height:64px;
  border-bottom: 1px solid var(--os-border);
  display:flex;
  align-items:center;
  padding: 0 var(--os-shell-gutter);
  background: rgba(0,0,0,.22);
}

.os-topbar__inner{
  width:min(100%, var(--os-content-max-width));
  margin:0 auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.os-topbar__left{ display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; }
.os-topbar__title{ font-weight:800; color: var(--os-text-strong); min-width:0; }

.os-topbar__right{ display:flex; align-items:center; gap:10px; min-width:0; flex:0 1 auto; justify-content:flex-end; flex-wrap:wrap; }

.os-iconbtn{
  width:40px;height:40px;
  border-radius: 14px;
  border: 1px solid var(--os-border);
  background: rgba(255,255,255,.06);
  color: var(--os-text-main);
  cursor:pointer;
}
.os-iconbtn:hover{
  background: rgba(255,255,255,.10);
  border-color: var(--os-border-2);
}

/* ------------------------------
   CARDS
-------------------------------- */
.os-card{
  background: var(--os-card);
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius);
}

.os-card__body{ padding: 18px; }

.os-card__header{
  padding: 18px 18px 10px 18px;
  border-bottom: 1px solid var(--os-border);
}

.os-card__title{
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: var(--os-text-strong);
}

.os-card__subtitle{
  margin: 6px 0 0 0;
  font-size: 14px;
  color: var(--os-text-muted);
}

/* ------------------------------
   BUTTONS / BADGES
-------------------------------- */
.os-badge{
  border: 1px solid var(--os-border);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--os-text-main);
  background: rgba(255,255,255,.08);
}

.os-badge--env{
  background: rgba(243,180,18,.10);
  border-color: rgba(243,180,18,.35);
  color: #ffe6a6;
}

.os-btn{
  border: 1px solid var(--os-border);
  background: rgba(255,255,255,.06);
  color: var(--os-text-main);
  border-radius: 12px;
  padding: 10px 12px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
.os-btn:hover{
  background: rgba(255,255,255,.10);
  border-color: var(--os-border-2);
}

.os-btn--primary{
  background: rgba(91,190,204,.20);
  border-color: rgba(91,190,204,.45);
}
.os-btn--primary:hover{ background: rgba(91,190,204,.28); }

/* ------------------------------
   FORM CONTROLS (OFICIAL)
-------------------------------- */
.os-input,
.os-select,
.os-textarea,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea{
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px !important;
  background: var(--os-control-bg);
  border: 1px solid var(--os-control-border);
  color: var(--os-text-main);
  padding: 10px 12px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.os-input:focus,
.os-select:focus,
.os-textarea:focus,
input:focus,
select:focus,
textarea:focus{
  outline: none;
  border-color: var(--os-control-border-focus);
  box-shadow: var(--os-control-shadow-focus);
  background: var(--os-control-bg-focus);
}

/* dropdown options: legível no Windows/Chrome */
.os-select option,
.os-select optgroup,
select option,
select optgroup,
.form-select option,
.form-select optgroup,
.form-control option,
.form-control optgroup{
  color: #0b1220 !important;
  background: #ffffff !important;
}

.os-select option:checked,
select option:checked,
.form-select option:checked,
.form-control option:checked{
  color: #ffffff !important;
  background: #11435d !important;
}

/* readonly/disabled */
input[readonly],
input[disabled],
select[disabled]{
  opacity: .75;
  cursor: not-allowed;
}

/* checkbox */
.os-check{ width: 18px; height: 18px; }
input[type="checkbox"]{ accent-color: var(--os-primary); }

/* textarea expansivo */
.os-textarea{ resize: vertical; line-height: 1.4; }

/* ------------------------------
   TABLES (OFICIAL)
-------------------------------- */
.os-table-wrap{
  overflow:auto;
  border-radius: var(--os-radius);
  border:1px solid var(--os-border);
}

.os-table{
  width:100%;
  border-collapse: collapse;
  background: var(--os-card);
  color: var(--os-text-main);
}

.os-table th, .os-table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--os-border);
}

.os-table th{
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--os-table-th-bg);
  color: var(--os-text-dim);
}

.os-table tr:hover td{
  background: var(--os-table-row-hover);
}

/* destaque controlado */
.os-table tbody td strong{
  color: var(--os-link);
  font-weight: 650;
}

/* ------------------------------
   PORTAL MODULE CARDS
-------------------------------- */
.os-portal-module h3{
  color: var(--os-text-strong);
  font-weight: 800;
}
.os-portal-module p{
  color: var(--os-text-muted);
}
.os-portal-module .os-meta{
  color: var(--os-text-dim);
  font-size: 12px;
}

/* ------------------------------
   UTILS
-------------------------------- */
.os-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .85em;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--os-border);
  padding: 2px 6px;
  border-radius: 10px;
}
/* =========================================================
   OmniShield Layout Shell (fix topbar + scroll content)
   ========================================================= */

/* Ajuste os valores se seu layout usar outras medidas */
:root{
  --os-sidebar-w: 280px;
  --os-topbar-h: 64px;

  --os-text: rgba(255,255,255,.92);
  --os-muted: rgba(255,255,255,.68);

  --os-card-bg: rgba(255,255,255,.04);
  --os-card-bd: rgba(255,255,255,.10);

  --os-brand: #11435d;
  --os-accent: #5bbecc;
}

/* NUNCA deixe o body rolar no dashboard */
body.os-body{
  height: 100vh;
  overflow: hidden;
}

/* Wrapper padrão */
.os-shell{
  height: 100vh;
  width: 100%;
}

/* Sidebar fixa e rolável */
.os-sidebar{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--os-sidebar-w);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 40;
}

/* Área principal ao lado da sidebar */
.os-main{
  margin-left: var(--os-sidebar-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0; /* evita “empurrar” layouts */
}

/* Topbar fixa (não rola) */
.os-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--os-topbar-h);
  min-height: var(--os-topbar-h);
}

/* Conteúdo central: ÚNICO lugar que rola */
.os-content{
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* =========================================================
   Tabs (Empresa A/B/C/D...) — padrão OmniShield
   ========================================================= */

.os-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.os-tab{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--os-card-bd);
  background: rgba(255,255,255,.03);
  color: var(--os-muted);
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.os-tab:hover{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--os-text);
}

.os-tab.is-active{
  border-color: rgba(91,190,204,.55);
  background: rgba(91,190,204,.10);
  color: var(--os-text);
}

/* (Opcional) mini-badge da tab */
.os-tab__pill{
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
}
/* =========================================================
   OmniShield Shell: topbar fixa + sidebar fixa + conteúdo scroll
   (se algo “subiu” junto, é aqui que conserta)
   ========================================================= */
:root{
  --os-topbar-h: 64px;
  --os-sidebar-w: 280px;

  --os-text-strong: #eaf2ff;
  --os-text: #cfe1ff;
  --os-text-muted: rgba(207,225,255,.72);

  --os-link: #7dd3fc;
  --os-link-hover: #a5f3fc;

  --os-card-bg: rgba(255,255,255,.035);
  --os-card-border: rgba(255,255,255,.08);
  --os-field-bg: rgba(255,255,255,.06);
  --os-field-border: rgba(255,255,255,.14);
  --os-field-border-focus: rgba(91,190,204,.55);
}

.os-body{
  overflow: hidden; /* evita scroll do body inteiro */
}

/* Ajuste o seletor conforme seu HTML base:
   Se seu layout usa .os-topbar/.os-sidebar/.os-main, isso já resolve. */
.os-topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--os-topbar-h);
  z-index: 50;
}

.os-sidebar{
  position: fixed;
  top: var(--os-topbar-h);
  left: 0;
  width: var(--os-sidebar-w);
  height: calc(100vh - var(--os-topbar-h));
  overflow: auto;
  z-index: 40;
}

.os-main{
  margin-left: var(--os-sidebar-w);
  padding-top: var(--os-topbar-h);
  height: 100vh;
  overflow: auto; /* scroll só no conteúdo central */
}

/* =========================================================
   Empresa Form (abas + form)
   ========================================================= */
.os-empresa-card{
  background: var(--os-card-bg);
  border: 1px solid var(--os-card-border);
}

.os-empresa-tabs{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.os-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--os-card-border);
  background: rgba(255,255,255,.03);
  color: var(--os-text);
  text-decoration: none;
  user-select: none;
}

.os-pill:hover{
  border-color: rgba(125,211,252,.35);
  color: var(--os-link-hover);
}

.os-pill.is-active{
  border-color: rgba(91,190,204,.55);
  background: rgba(91,190,204,.10);
  color: var(--os-text-strong);
}

.os-pill.is-disabled{
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.os-pill__k{
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

.os-pill__v{
  font-weight: 600;
}
/* OmniShield Pills container (header KPIs) */
.os-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

/* Pill não pode quebrar linha dentro (mata o "Por / página") */
.os-pill{
  white-space: nowrap;
  line-height: 1;
}
/* Header KPIs: Registros / Filtro / Por página */
.os-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.os-pills .os-pill{
  white-space:nowrap;
  max-width:100%;
}

.os-pill__v{
  overflow:hidden;
  text-overflow:ellipsis;
}


.os-empresa-section{
  margin-top: 14px;
}

.os-empresa-section__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.os-empresa-section__title{
  font-weight: 800;
  color: var(--os-text-strong);
}

.os-empresa-section__rule{
  color: var(--os-text-muted);
  font-size: .92rem;
}

.os-subcard{
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  margin-top: 12px;
}

.os-subcard--dashed{
  border-style: dashed;
}

/* Form básico: garante largura “colada no card” e inputs expansivos */
.os-form input[type="text"],
.os-form input[type="email"],
.os-form input[type="number"],
.os-form input[type="search"],
.os-form input[type="tel"],
.os-form input[type="url"],
.os-form textarea,
.os-form select{
  width: 100%;
  box-sizing: border-box;
  background: var(--os-field-bg);
  border: 1px solid var(--os-field-border);
  color: var(--os-text-strong);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}

.os-form textarea{
  min-height: 96px;
  resize: vertical;
}

.os-form input:focus,
.os-form textarea:focus,
.os-form select:focus{
  border-color: var(--os-field-border-focus);
  box-shadow: 0 0 0 3px rgba(91,190,204,.12);
}

.os-label{
  display: block;
  margin-bottom: 6px;
  color: var(--os-text);
  font-weight: 650;
}

.os-help{
  margin-top: 6px;
  color: var(--os-text-muted);
  font-size: .9rem;
}

.os-field-error{
  margin-top: 6px;
  color: #ffb4b4;
  font-size: .92rem;
}

.os-checkrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.os-checkrow__text{
  color: var(--os-text-muted);
}

/* Grid helper (se você já tiver, ótimo; se não, isso salva) */
/* OmniShield Grid System */
.os-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

/* Colunas */
.os-col-12{ grid-column: span 12; }
.os-col-8{  grid-column: span 8; }
.os-col-6{  grid-column: span 6; }
.os-col-4{  grid-column: span 4; }
.os-col-3{  grid-column: span 3; }

/* 🔥 BREAKPOINT CRÍTICO — mata sobreposição */
@media (max-width: 1200px){
  .os-col-8,
  .os-col-6,
  .os-col-4,
  .os-col-3{
    grid-column: span 12;
  }
}


.os-col-center{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* =========================================================
   Sidebar collapse: conteúdo acompanha (sem “buraco” na esquerda)
   Requisito: sidebar.js deve alternar a classe no <body>
   body.os-sidebar-collapsed
   ========================================================= */

:root{
  --os-sidebar-w: 280px;     /* aberto */
  --os-sidebar-w-collapsed: 76px; /* fechado */
}

/* estado normal */
.os-main{
  margin-left: var(--os-sidebar-w);
  transition: margin-left .18s ease;
}

.os-sidebar{
  width: var(--os-sidebar-w);
  transition: width .18s ease;
}

/* estado colapsado */
.os-body.os-sidebar-collapsed .os-sidebar{
  width: var(--os-sidebar-w-collapsed);
}

.os-body.os-sidebar-collapsed .os-main{
  margin-left: var(--os-sidebar-w-collapsed);
}

/* opcional: se você quiser que “feche de verdade” (0px), use isto no lugar:
.os-body.os-sidebar-collapsed .os-sidebar{ width: 0; }
.os-body.os-sidebar-collapsed .os-main{ margin-left: 0; }
*/

/* garante que o container interno ocupe 100% do os-main */
.os-page{
  width: 100%;
  max-width: 100%;
}
/* =========================================================
   OmniShield Enterprise Sidebar Collapse (76px + tooltips)
   ========================================================= */

:root{
  --os-sidebar-w: 280px;          /* aberto */
  --os-sidebar-w-collapsed: 76px; /* fechado */
}

/* base layout */
.os-sidebar{
  width: var(--os-sidebar-w);
  transition: width .18s ease;
  overflow: hidden; /* essencial pra cortar texto no collapse */
}

.os-main{
  margin-left: var(--os-sidebar-w);
  transition: margin-left .18s ease;
}

/* collapse state */
.os-body.os-sidebar-collapsed .os-sidebar{
  width: var(--os-sidebar-w-collapsed);
}

.os-body.os-sidebar-collapsed .os-main{
  margin-left: var(--os-sidebar-w-collapsed);
}

/* =========================================================
   Nav item structure
   Esperado:
   .os-nav__link { .os-nav__icon + .os-nav__text }
   ========================================================= */

.os-nav__link{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.os-nav__icon{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  flex: 0 0 40px;
}

.os-nav__text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* estado colapsado: some o texto, centraliza */
.os-body.os-sidebar-collapsed .os-nav__link{
  justify-content: center;
  padding: 10px 8px;
  gap: 0;
}

.os-body.os-sidebar-collapsed .os-nav__text{
  display: none;
}

/* opcional: esconda também setinhas/chevrons de dropdown no collapse */
.os-body.os-sidebar-collapsed .os-nav__chevron,
.os-body.os-sidebar-collapsed .os-nav__meta{
  display: none !important;
}

/* melhora o foco via teclado */
.os-nav__link:focus-visible{
  outline: 2px solid rgba(91,190,204,.55);
  outline-offset: 2px;
}

/* se você tiver labels/grupos (tipo "Portal", "Governança") */
.os-body.os-sidebar-collapsed .os-nav__section-title{
  display: none;
}
/* ===========================
   Sidebar brand minimal (collapse)
   =========================== */

/* quando colapsar: some texto da marca e centraliza logo */
body.os-sidebar-collapsed .os-sidebar__brand{
  justify-content: center;
  padding: 14px 10px;
}

body.os-sidebar-collapsed .os-sidebar__brand .os-brandtext{
  display: none;
}

body.os-sidebar-collapsed .os-sidebar__brand .os-logo{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

/* opcional: reduz altura do cabeçalho */
body.os-sidebar-collapsed .os-sidebar__brand{
  min-height: 64px;
}
/* ===========================
   Sidebar user minimal (collapse)
   =========================== */

body.os-sidebar-collapsed .os-sidebar__foot{
  padding: 10px 8px;
}

body.os-sidebar-collapsed .os-user{
  display: grid;
  place-items: center;
  gap: 0;
}

body.os-sidebar-collapsed .os-user__meta{
  display: none;
}

/* avatar central e com tamanho consistente */
body.os-sidebar-collapsed .os-user__avatar{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
/* OmniShield Toolbar (filters + per_page) */
.os-toolbar{
  margin: 12px 0 14px;
}

.os-toolbar__form{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;             /* <-- mata sobreposição */
}

.os-toolbar__left,
.os-toolbar__right{
  display:flex;
  gap:12px;
  flex-wrap:wrap;             /* <-- mata sobreposição */
  align-items:flex-end;
}

.os-toolbar__left{ flex: 1 1 360px; min-width: 260px; }
.os-toolbar__right{ flex: 0 1 auto; }

.os-field{ min-width: 240px; }
.os-field--sm{ min-width: 160px; }
.os-label{ display:block; margin-bottom:6px; }

/* Importantíssimo: inputs dentro de flex precisam poder encolher */
.os-toolbar input.form-control,
.os-toolbar select.form-control{
  min-width: 0;
}
.os-pagination-bar{
  margin-top: 14px;
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}
.os-card__header{
  overflow: visible; /* evita cortar pills quando quebra linha */
}

/* =========================================================
   OmniShield - form controls (anti "monstro branco")
   Scope: dentro de .os-page
========================================================= */
.os-page .os-input,
.os-page .form-control.os-input {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(240, 248, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 0.55rem 0.9rem;
}

.os-page .os-input::placeholder {
  color: rgba(240, 248, 255, 0.55);
}

.os-page .os-input:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(91, 190, 204, 0.55);
  box-shadow: 0 0 0 0.2rem rgba(91, 190, 204, 0.18);
  outline: 0;
}

/* botões com cara OmniShield */
.os-page .btn.os-btn {
  border-radius: 14px;
  padding: 0.5rem 0.95rem;
  font-weight: 600;
}

/* opcional: suaviza outline padrão do bootstrap */
.os-page .btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(91, 190, 204, 0.18);
}
.os-th-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.os-sort {
  display: inline-flex;
  flex-direction: column;
  margin-left: 6px;
  font-size: 0.75rem;
  opacity: 0.6;
}

.os-th-sortable:hover .os-sort {
  opacity: 1;
}
/* =========================================================
   OmniShield - QR Code 2FA
========================================================= */
.qr-card{
  background:#ffffff;
  padding:20px;
  display:inline-block;
  border-radius:14px;
}

.qr-card img{
  display:block;
}

.os-topbar .os-badge--env {
    background: #1c7499;
    color: yellow;
    border: 3px solid rgb(22, 201, 22);
}

.os-public-body {
    background: #02122d;
    color: #ffffff;
    min-height: 100vh;
}

.os-public-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.os-public-container {
    width: 100%;
    max-width: 520px;
}

.os-auth-card {
    background: rgba(10, 24, 52, 0.92);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.os-auth-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.os-auth-subtitle {
    color: rgba(255,255,255,0.8);
    margin-bottom: 24px;
}

.os-auth-card input[type="text"],
.os-auth-card input[type="password"],
.os-auth-card input[type="email"] {
    width: 100%;
    min-height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: #ffffff;
    color: #111827;
    padding: 10px 14px;
}

.os-auth-card label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.os-alert {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.os-alert-danger {
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.35);
    color: #ffd4da;
}
/* HERO */

.os-hero {
    background: linear-gradient(135deg, #0b2c3d 0%, #11435d 40%, #1c7499 100%);
    padding: 60px 30px;
    border-radius: 20px;
    color: #fff;
}

.os-hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.os-hero-text {
    max-width: 600px;
}

.os-hero-tagline {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 16px 0;
    color: #5bbecc;
}

.os-hero-sub {
    opacity: 0.9;
    line-height: 1.6;
}

.os-hero-visual img {
    width: 260px;
    filter: drop-shadow(0 12px 30px rgba(0,0,0,0.4));
}

/* ENTRY / LOGIN */

.os-entry-header,
.os-login-header {
    text-align: center;
    margin-bottom: 18px;
    width: 100%;
    max-width: 100%;
}

.os-entry-logo,
.os-login-logo {
    width: 56px;
    max-width: 56px;
    height: auto;
    margin-bottom: 10px;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
    display: inline-block;
}

.os-entry-tagline,
.os-login-tagline {
    margin: 0 0 6px 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #5bbecc;
}

.os-entry-sub,
.os-login-sub {
    display: block;
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.4;
    color: #b8c7d6;
}

/* CONTEXTO */

.os-context-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.os-context-seal {
    font-size: 0.85rem;
    color: #5bbecc;
    background: rgba(91,190,204,0.1);
    padding: 8px 12px;
    border-radius: 10px;
}

/* FOOTER */

.os-footer {
    margin-top: 60px;
    padding: 20px;
    text-align: center;
    background: #0b2c3d;
    color: #9fbac7;
    font-size: 0.9rem;
}

.os-login-header {
    text-align: center;
    margin-bottom: 18px;
    width: 20px;
    max-width: 20px;
}

.os-login-logo {
    width: 50px;
    max-width: 50px;
    height: auto;
    margin-bottom: 10px;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
}

.os-title-xl {
    margin: 0 0 6px 0;
    font-size: 1.35rem;
    line-height: 1.15;
}



.os-form-group {
    margin-bottom: 12px;
}

.os-form-group label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.78rem;
    font-weight: 600;
}

.os-form-group input {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 8px;
    box-sizing: border-box;
}

.os-actions {
    margin-top: 10px;
}

.os-btn.os-btn-primary {
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 8px;
}
.os-auth-card,
.auth-card,
.login-card {
    max-width: 340px;
    padding: 18px 16px;
    border-radius: 14px;
}

/* === OVERRIDE FINAL LOGIN OMNISHIELD === */
.os-login-header {
    text-align: center !important;
    margin-bottom: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
}

.os-login-logo {
    width: 56px !important;
    max-width: 56px !important;
    height: auto !important;
    margin-bottom: 10px !important;
    display: inline-block !important;
}

.os-auth-card,
.auth-card,
.login-card {
    max-width: 340px !important;
    padding: 18px 16px !important;
}
/* ===== LOGIN OMNISHIELD LIMPO E CENTRAL ===== */

.os-login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background:
        radial-gradient(circle at top, rgba(28, 116, 153, 0.22), transparent 35%),
        linear-gradient(180deg, #03152b 0%, #041a35 100%);
}

.os-login-card {
    width: 100%;
    max-width: 500px;
    background: linear-gradient(180deg, #08244a 0%, #061c3a 100%);
    border: 1px solid rgba(91, 190, 204, 0.18);
    border-radius: 18px;
    padding: 28px 24px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.os-login-header {
    text-align: center;
    margin-bottom: 22px;
    width: 100%;
    max-width: 100%;
}

.os-login-logo {
    width: 84px;
    max-width: 84px;
    height: auto;
    display: inline-block;
    margin: 0 0 12px 0;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}

.os-login-title {
    margin: 0 0 10px 0;
    font-size: 2rem;
    line-height: 1.1;
    color: #ffffff;
    font-weight: 800;
}

.os-login-tagline {
    margin: 0 0 12px 0;
    color: #7fd6e2;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
}

.os-login-sub {
    margin: 0;
    color: #d7e3ef;
    font-size: 0.84rem;
    line-height: 1.5;
}

.os-login-form {
    margin-top: 10px;
}

.os-form-group {
    margin-bottom: 14px;
}

.os-form-group label {
    display: block;
    margin-bottom: 6px;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
}

.os-form-group input {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(127, 214, 226, 0.20);
    background: #f3f7fb;
    color: #0f172a;
    padding: 10px 14px;
    font-size: 1rem;
    outline: none;
}

.os-form-group input:focus {
    border-color: #5bbecc;
    box-shadow: 0 0 0 3px rgba(91, 190, 204, 0.20);
}

.os-actions {
    margin-top: 18px;
}

.os-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
}

.os-btn-primary {
    background: linear-gradient(90deg, #11435d 0%, #1c7499 100%);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(17, 67, 93, 0.28);
}

.os-btn-primary:hover {
    filter: brightness(1.05);
}

.os-alert-danger {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(220, 53, 69, 0.12);
    color: #ffd6db;
    border: 1px solid rgba(220, 53, 69, 0.22);
}

.os-field-error {
    margin-top: 6px;
    color: #ffd6db;
    font-size: 0.82rem;
}

/* mata qualquer imagem/banner gigante herdado de regra anterior */
.os-login-card img:not(.os-login-logo) {
    display: none !important;
}

.two-factor-auth img:not(.os-login-logo),
.auth-card img:not(.os-login-logo),
.login-card img:not(.os-login-logo) {
    display: none !important;
    max-width: 0 !important;
    max-height: 0 !important;
}

.two-factor-auth [style*="background-image"],
.auth-card [style*="background-image"],
.login-card [style*="background-image"] {
    background-image: none !important;
}

.os-topbar__title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.os-topbar__version{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:999px;border:1px solid rgba(103,199,255,.24);background:rgba(103,199,255,.08);color:#9fdcff;font-size:.74rem;font-weight:800;letter-spacing:.03em}
.os-topbar__action-btn.os-btn{width:auto !important;min-height:36px;padding:0 10px;border-radius:12px;font-size:.9rem;display:inline-flex;align-items:center;gap:6px}
.os-topbar__company-badge{text-decoration:none;display:inline-flex;align-items:center;gap:6px}

input[type="file"].form-control.os-input,
.os-page input[type="file"].form-control.os-input{
    padding: 8px 10px 8px 12px;
    min-height: 56px;
}

input[type="file"].form-control.os-input::file-selector-button,
.os-page input[type="file"].form-control.os-input::file-selector-button{
    margin-right: 14px;
    border: 1px solid rgba(91,190,204,.24);
    background: linear-gradient(90deg, #11435d 0%, #1c7499 100%);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(17,67,93,.24);
}

input[type="file"].form-control.os-input:hover::file-selector-button,
.os-page input[type="file"].form-control.os-input:hover::file-selector-button{
    filter: brightness(1.06);
}


/* === v13 detail readability patch === */
.os-badge--info{background:rgba(28,116,153,.18);border-color:rgba(91,190,204,.34);color:#dff7ff;font-weight:700}
.os-badge--success{background:rgba(34,197,94,.16);border-color:rgba(74,222,128,.30);color:#d7ffe6;font-weight:700}
.os-badge--warning{background:rgba(243,180,18,.16);border-color:rgba(243,180,18,.30);color:#ffe8ab;font-weight:700}
.os-badge--danger{background:rgba(190,24,93,.16);border-color:rgba(244,114,182,.30);color:#ffd5e7;font-weight:700}

.os-detail-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.os-detail-header__main{min-width:0}
.os-detail-header__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.os-card-body{padding:18px}
.os-page-title--tight{margin:0}
.os-page-subtitle--tight{margin-top:4px}
.os-h4--tight{margin-bottom:8px}
.os-detail-caption{margin:6px 0 0;color:var(--os-text-dim)}
.os-section-block{margin-top:14px}
.os-section-block-sm{margin-top:16px}
.os-detail-actions-row{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.os-help--block{margin-top:10px}
.os-list-clean{margin:0;padding-left:18px;color:var(--os-text-main)}
.os-list-clean li + li{margin-top:6px}

.os-kv{display:grid;grid-template-columns:1fr;gap:12px;margin-top:10px}
.os-kv--inline{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.os-kv-item{display:flex;flex-direction:column;gap:6px;padding:13px 14px;border:1px solid rgba(91,190,204,.14);border-radius:14px;background:linear-gradient(180deg,rgba(19,39,69,.90),rgba(12,28,51,.96));min-width:0;box-shadow:0 10px 24px rgba(3,10,20,.12)}
.os-kv-item--wide{grid-column:1/-1}
.os-k{display:block;font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#90adc9;margin:0}
.os-v{display:block;font-size:1rem;line-height:1.45;font-weight:600;color:#f5f9ff;word-break:break-word;overflow-wrap:anywhere;min-width:0}
.os-v .os-badge{display:inline-flex;align-items:center}
.os-link--strong{color:#9fe8f7;font-weight:800}
.os-link--strong:hover{color:#d8fbff}
.os-table-tenant-detail thead th{white-space:nowrap}
.os-table-tenant-detail td,.os-table-tenant-detail th{vertical-align:middle}

@media (max-width: 768px){
  .os-kv--inline{grid-template-columns:1fr}
  .os-detail-header__actions{width:100%}
}

.os-topbar__right > *{
  flex:0 0 auto;
}

@media (max-width: 1280px){
  .os-topbar__right{ gap:8px; }
}

@media (max-width: 980px){
  :root{ --os-shell-gutter: 14px; }
  .os-topbar{ height:auto; min-height:var(--os-topbar-h); padding-block:10px; }
  .os-topbar__inner{ align-items:flex-start; flex-direction:column; }
  .os-topbar__right{ width:100%; }
}

.os-topbar__back-btn,
.os-offtopbar__back-btn {
  white-space: nowrap;
}


/* Fase 17.18.2-A — Hub Auth Mobile Responsive
   Objetivo: impedir que o layout de dashboard/sidebar contamine login, 2FA e recovery.
*/
body.os-auth-mobile-safe {
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.os-auth-mobile-safe .os-shell {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 100vh !important;
}

body.os-auth-mobile-safe .os-main {
  margin-left: 0 !important;
  padding-top: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  display: block !important;
}

body.os-auth-mobile-safe .os-content {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow: visible !important;
  padding: 24px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at top, rgba(28,116,153,.22), transparent 35%),
    linear-gradient(180deg, #03152b 0%, #041a35 100%) !important;
}

body.os-auth-mobile-safe .os-auth-wrap {
  width: min(100%, 760px) !important;
  max-width: min(760px, 100%) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.os-auth-mobile-safe .os-auth-card {
  width: 100% !important;
  max-width: 760px !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

body.os-auth-mobile-safe .os-auth-card form,
body.os-auth-mobile-safe .os-form-group,
body.os-auth-mobile-safe .os-password-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body.os-auth-mobile-safe input,
body.os-auth-mobile-safe select,
body.os-auth-mobile-safe textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.os-auth-mobile-safe .os-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
}

body.os-auth-mobile-safe .os-actions .os-btn,
body.os-auth-mobile-safe button.os-btn,
body.os-auth-mobile-safe a.os-btn {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 46px !important;
  white-space: normal !important;
  text-align: center !important;
}

body.os-auth-mobile-safe .os-muted,
body.os-auth-mobile-safe .os-alert,
body.os-auth-mobile-safe .os-field-error {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

@media (max-width: 768px) {
  body.os-auth-mobile-safe .os-content {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 16px 12px 28px 12px !important;
  }

  body.os-auth-mobile-safe .os-auth-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.os-auth-mobile-safe .os-auth-card {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }

  body.os-auth-mobile-safe .os-title-xl {
    font-size: 1.45rem !important;
    line-height: 1.15 !important;
  }

  body.os-auth-mobile-safe .os-alert {
    font-size: .92rem !important;
    line-height: 1.45 !important;
  }

  body.os-auth-mobile-safe .os-auth-card > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.os-auth-mobile-safe .os-auth-card > div:first-child > div {
    width: 100% !important;
  }

  body.os-auth-mobile-safe .os-auth-card > div:first-child a.os-btn {
    width: 100% !important;
  }
}

@media (max-width: 420px) {
  body.os-auth-mobile-safe .os-content {
    padding: 12px 10px 24px 10px !important;
  }

  body.os-auth-mobile-safe .os-auth-card {
    padding: 18px 14px !important;
  }

  body.os-auth-mobile-safe .os-title-xl {
    font-size: 1.28rem !important;
  }
}


/* Fase 17.18.2-B — Hub Mobile Shell Topbar Sidebar
   Objetivo: sidebar como rail/offcanvas, topbar sem sobreposição e conteúdo sem overflow horizontal.
*/
@media (max-width: 768px) {
  :root {
    --os-sidebar-mobile-rail: 76px;
    --os-sidebar-mobile-open: min(82vw, 320px);
    --os-shell-gutter: 12px;
  }

  body.os-body {
    height: 100vh !important;
    overflow: hidden !important;
  }

  .os-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
    display: block !important;
  }

  .os-sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: var(--os-sidebar-mobile-rail) !important;
    max-width: var(--os-sidebar-mobile-rail) !important;
    height: 100vh !important;
    z-index: 90 !important;
    padding: 12px 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-shadow: 12px 0 32px rgba(0,0,0,.20) !important;
  }

  /* Estado aberto no mobile: vira overlay/offcanvas e NÃO empurra conteúdo */
  body.os-body:not(.os-sidebar-collapsed) .os-sidebar {
    width: var(--os-sidebar-mobile-open) !important;
    max-width: var(--os-sidebar-mobile-open) !important;
    padding: 16px !important;
    box-shadow: 24px 0 60px rgba(0,0,0,.48) !important;
  }

  /* Estado fechado no mobile: trilho compacto de ícones */
  body.os-body.os-sidebar-collapsed .os-sidebar {
    width: var(--os-sidebar-mobile-rail) !important;
    max-width: var(--os-sidebar-mobile-rail) !important;
    padding: 12px 8px !important;
  }

  body.os-body.os-sidebar-collapsed .os-sidebar .os-brandtext,
  body.os-body.os-sidebar-collapsed .os-sidebar .os-label,
  body.os-body.os-sidebar-collapsed .os-sidebar .os-caret,
  body.os-body.os-sidebar-collapsed .os-sidebar .os-user__meta {
    display: none !important;
  }

  body.os-body.os-sidebar-collapsed .os-sidebar .os-sidebar__brand,
  body.os-body.os-sidebar-collapsed .os-sidebar .os-navlink,
  body.os-body.os-sidebar-collapsed .os-sidebar .os-navgrp__btn,
  body.os-body.os-sidebar-collapsed .os-sidebar .os-user {
    justify-content: center !important;
  }

  .os-main,
  body.os-body.os-sidebar-collapsed .os-main,
  body.os-body:not(.os-sidebar-collapsed) .os-main {
    margin-left: var(--os-sidebar-mobile-rail) !important;
    width: calc(100% - var(--os-sidebar-mobile-rail)) !important;
    max-width: calc(100% - var(--os-sidebar-mobile-rail)) !important;
    min-width: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .os-topbar {
    position: sticky !important;
    top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 10px !important;
    z-index: 70 !important;
  }

  .os-topbar__inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .os-topbar__left {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .os-topbar__title {
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }

  .os-topbar__version {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: .70rem !important;
  }

  .os-topbar__right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .os-topbar__right > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .os-topbar__right .os-badge {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .os-topbar__right form {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .os-topbar__right .os-btn,
  .os-topbar__right .os-iconbtn,
  .os-topbar__action-btn.os-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    min-height: 42px !important;
  }

  .os-topbar__feedback-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .os-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px !important;
  }

  .os-content-frame {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .os-content-frame > *,
  .os-page,
  .os-card,
  .os-container,
  .container {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .os-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .os-col-12,
  .os-col-8,
  .os-col-6,
  .os-col-4,
  .os-col-3 {
    grid-column: 1 / -1 !important;
  }

  .table-responsive,
  .os-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }
}

@media (max-width: 420px) {
  :root {
    --os-sidebar-mobile-rail: 64px;
  }

  .os-sidebar {
    padding: 10px 6px !important;
  }

  .os-logo,
  .os-user__avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  .os-topbar {
    padding: 8px !important;
  }

  .os-content {
    padding: 10px 8px !important;
  }

  .os-topbar__right {
    grid-template-columns: 1fr !important;
  }
}


/* Fase 17.18.2-B.1 — Mobile Sidebar Close Governance
   Sidebar mobile abre/fecha por classe explícita e nunca fica presa aberta.
*/
.os-sidebar-backdrop {
  display: none;
}

@media (max-width: 768px) {
  body.os-body {
    overflow: hidden !important;
  }

  body.os-body .os-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    z-index: 120 !important;
    transition: width .18s ease, max-width .18s ease, box-shadow .18s ease !important;
  }

  body.os-body:not(.os-sidebar-mobile-open) .os-sidebar {
    width: var(--os-sidebar-mobile-rail, 76px) !important;
    max-width: var(--os-sidebar-mobile-rail, 76px) !important;
    overflow-x: hidden !important;
  }

  body.os-body.os-sidebar-mobile-open .os-sidebar {
    width: min(82vw, 320px) !important;
    max-width: min(82vw, 320px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-shadow: 24px 0 60px rgba(0,0,0,.55) !important;
  }

  body.os-body:not(.os-sidebar-mobile-open) .os-sidebar .os-brandtext,
  body.os-body:not(.os-sidebar-mobile-open) .os-sidebar .os-label,
  body.os-body:not(.os-sidebar-mobile-open) .os-sidebar .os-caret,
  body.os-body:not(.os-sidebar-mobile-open) .os-sidebar .os-user__meta {
    display: none !important;
  }

  body.os-body:not(.os-sidebar-mobile-open) .os-sidebar .os-sidebar__brand,
  body.os-body:not(.os-sidebar-mobile-open) .os-sidebar .os-navlink,
  body.os-body:not(.os-sidebar-mobile-open) .os-sidebar .os-navgrp__btn,
  body.os-body:not(.os-sidebar-mobile-open) .os-sidebar .os-user {
    justify-content: center !important;
  }

  body.os-body .os-main,
  body.os-body.os-sidebar-mobile-open .os-main,
  body.os-body:not(.os-sidebar-mobile-open) .os-main {
    margin-left: var(--os-sidebar-mobile-rail, 76px) !important;
    width: calc(100% - var(--os-sidebar-mobile-rail, 76px)) !important;
    max-width: calc(100% - var(--os-sidebar-mobile-rail, 76px)) !important;
    min-width: 0 !important;
  }

  .os-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 110;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(0,0,0,.46);
    cursor: pointer;
  }

  body.os-body.os-sidebar-mobile-open .os-sidebar-backdrop {
    display: block !important;
  }

  body.os-body.os-sidebar-mobile-open .os-sidebar {
    z-index: 121 !important;
  }
}

@media (max-width: 420px) {
  body.os-body .os-main,
  body.os-body.os-sidebar-mobile-open .os-main,
  body.os-body:not(.os-sidebar-mobile-open) .os-main {
    margin-left: var(--os-sidebar-mobile-rail, 64px) !important;
    width: calc(100% - var(--os-sidebar-mobile-rail, 64px)) !important;
    max-width: calc(100% - var(--os-sidebar-mobile-rail, 64px)) !important;
  }
}


/* Fase 17.18.2-C — Mobile Topbar Compact Lists
   Objetivo: topbar não sobrepor conteúdo e listagens não esmagarem a tela.
*/
@media (max-width: 768px) {
  body.os-body .os-main {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.os-body .os-topbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 60 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 8px 10px 8px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(3, 12, 28, .96) !important;
    backdrop-filter: blur(12px) !important;
  }

  body.os-body .os-topbar__inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  body.os-body .os-topbar__left {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    gap: 8px !important;
    align-items: center !important;
  }

  body.os-body .os-topbar__left .os-iconbtn {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
  }

  body.os-body .os-topbar__title {
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  body.os-body .os-topbar__title strong,
  body.os-body .os-topbar__title span:first-child {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }

  body.os-body .os-topbar__version {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding: 4px 8px !important;
    font-size: .70rem !important;
    line-height: 1.1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.os-body .os-topbar__right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  body.os-body .os-topbar__right > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.os-body .os-topbar__right .os-badge {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 38px !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.os-body .os-topbar__right .os-btn,
  body.os-body .os-topbar__right .os-iconbtn,
  body.os-body .os-topbar__right button,
  body.os-body .os-topbar__right a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.os-body .os-topbar__right form {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.os-body .os-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 10px 24px 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body.os-body .os-card,
  body.os-body .os-panel,
  body.os-body .os-content-frame,
  body.os-body .os-page,
  body.os-body main {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  body.os-body table {
    min-width: 640px !important;
  }

  body.os-body .table-responsive,
  body.os-body .os-table-wrap,
  body.os-body .os-list-table-wrap,
  body.os-body .os-standard-table-wrap,
  body.os-body .os-card:has(table) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.os-body th,
  body.os-body td {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  body.os-body input,
  body.os-body select,
  body.os-body textarea {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.os-body .os-filterbar,
  body.os-body .os-toolbar,
  body.os-body .os-list-toolbar,
  body.os-body .os-search-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 420px) {
  body.os-body .os-topbar {
    padding: 8px 6px 10px 6px !important;
  }

  body.os-body .os-topbar__right {
    grid-template-columns: 1fr !important;
  }

  body.os-body .os-topbar__right .os-badge {
    grid-column: auto !important;
  }

  body.os-body .os-content {
    padding: 10px 8px 24px 8px !important;
  }

  body.os-body table {
    min-width: 580px !important;
  }
}


/* Fase 17.18.2-D — Mobile Task First MTA
   Decisão UX: no mobile, a página não rola horizontalmente.
   Sidebar vira overlay puro; acesso ao MTA vira card/botão prioritário.
*/
@media (max-width: 768px) {
  body.os-body {
    overflow: hidden !important;
  }

  body.os-body .os-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Sidebar mobile: escondida por padrão, sem rail fixo roubando largura. */
  body.os-body .os-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(88vw, 340px) !important;
    max-width: min(88vw, 340px) !important;
    height: 100vh !important;
    z-index: 130 !important;
    transform: translateX(-105%) !important;
    transition: transform .18s ease !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.os-body.os-sidebar-mobile-open .os-sidebar {
    transform: translateX(0) !important;
    box-shadow: 24px 0 64px rgba(0,0,0,.58) !important;
  }

  body.os-body .os-main,
  body.os-body.os-sidebar-collapsed .os-main,
  body.os-body.os-sidebar-mobile-open .os-main,
  body.os-body:not(.os-sidebar-mobile-open) .os-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.os-body .os-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 12px 10px 28px 10px !important;
  }

  body.os-body .os-content-frame {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.os-body .os-topbar {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.os-body .os-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 120;
    border: 0;
    background: rgba(0,0,0,.48);
  }

  body.os-body.os-sidebar-mobile-open .os-sidebar-backdrop {
    display: block !important;
  }

  body.os-body.os-sidebar-mobile-open .os-sidebar {
    z-index: 131 !important;
  }

  /* Cards mobile substituem a tabela para a tarefa principal: Entrar no MTA. */
  .os-mobile-tenant-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .os-mobile-tenant-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(103,199,255,.18) !important;
    background: rgba(8, 29, 58, .82) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.22) !important;
  }

  .os-mobile-tenant-card--ready {
    border-color: rgba(55,214,122,.32) !important;
    background:
      linear-gradient(180deg, rgba(55,214,122,.10), rgba(8,29,58,.82)) !important;
  }

  .os-mobile-tenant-card__header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .os-mobile-tenant-card__title {
    margin: 0 0 4px 0 !important;
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    color: var(--os-text-strong, #eaf3ff) !important;
    overflow-wrap: anywhere !important;
  }

  .os-mobile-tenant-card__meta {
    margin: 0 !important;
    font-size: .92rem !important;
    line-height: 1.35 !important;
    color: var(--os-text-muted, #aab7c9) !important;
    overflow-wrap: anywhere !important;
  }

  .os-mobile-tenant-card__actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 14px !important;
    width: 100% !important;
  }

  .os-mobile-tenant-card__actions .os-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .os-mobile-primary-action {
    font-size: 1rem !important;
    font-weight: 900 !important;
    min-height: 52px !important;
  }

  /* A tabela desktop continua disponível para desktop; no mobile, card operacional é superior. */
  .os-desktop-table-wrap {
    display: none !important;
  }

  .os-portal-inline-actions {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .os-portal-inline-actions label,
  .os-portal-inline-actions input,
  .os-portal-inline-actions select,
  .os-portal-inline-actions button,
  .os-portal-inline-actions .os-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .os-portal-card,
  .os-portal-shell,
  .os-portal-grid,
  .os-portal-hero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .os-portal-card__title,
  .os-portal-hero__title {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.15 !important;
  }
}

@media (min-width: 769px) {
  .os-mobile-tenant-list {
    display: none !important;
  }
}

@media (max-width: 420px) {
  body.os-body .os-content {
    padding: 10px 8px 26px 8px !important;
  }

  .os-mobile-tenant-card {
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .os-mobile-primary-action {
    min-height: 50px !important;
  }
}

/* Fase 17.18.3-D — HUB Mobile Topbar Icon Only Single Line */
@media (max-width: 768px) {
  body.hub-body .os-topbar,
  body.dashboard-body .os-topbar,
  body .os-topbar {
    padding: 8px 10px !important;
  }

  body.hub-body .os-topbar__inner,
  body.dashboard-body .os-topbar__inner,
  body .os-topbar__inner,
  body.hub-body .os-topbar__content,
  body.dashboard-body .os-topbar__content,
  body .os-topbar__content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  body.hub-body .os-topbar__left,
  body.dashboard-body .os-topbar__left,
  body .os-topbar__left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  body.hub-body .os-topbar__title,
  body.dashboard-body .os-topbar__title,
  body .os-topbar__title,
  body.hub-body .os-topbar__page-title,
  body.dashboard-body .os-topbar__page-title,
  body .os-topbar__page-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    line-height: 1.1 !important;
  }

  body.hub-body .os-topbar__subtitle,
  body.dashboard-body .os-topbar__subtitle,
  body .os-topbar__subtitle,
  body.hub-body .os-topbar__context,
  body.dashboard-body .os-topbar__context,
  body .os-topbar__context,
  body.hub-body .os-badge,
  body.dashboard-body .os-badge,
  body .os-badge {
    display: none !important;
  }

  body.hub-body .os-topbar__right,
  body.dashboard-body .os-topbar__right,
  body .os-topbar__right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    margin-top: 0 !important;
  }

  body.hub-body .os-topbar__right .os-btn,
  body.hub-body .os-topbar__right .os-iconbtn,
  body.hub-body .os-topbar__right button,
  body.hub-body .os-topbar__right a,
  body.dashboard-body .os-topbar__right .os-btn,
  body.dashboard-body .os-topbar__right .os-iconbtn,
  body.dashboard-body .os-topbar__right button,
  body.dashboard-body .os-topbar__right a,
  body .os-topbar__right .os-btn,
  body .os-topbar__right .os-iconbtn,
  body .os-topbar__right button,
  body .os-topbar__right a {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
  }

  body.hub-body .os-topbar__right .os-btn svg,
  body.hub-body .os-topbar__right .os-iconbtn svg,
  body.hub-body .os-topbar__right button svg,
  body.hub-body .os-topbar__right a svg,
  body.dashboard-body .os-topbar__right .os-btn svg,
  body.dashboard-body .os-topbar__right .os-iconbtn svg,
  body.dashboard-body .os-topbar__right button svg,
  body.dashboard-body .os-topbar__right a svg,
  body .os-topbar__right .os-btn svg,
  body .os-topbar__right .os-iconbtn svg,
  body .os-topbar__right button svg,
  body .os-topbar__right a svg,
  body .os-topbar__right i,
  body .os-topbar__right .os-icon {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  body.hub-body .os-topbar__right .os-label,
  body.dashboard-body .os-topbar__right .os-label,
  body .os-topbar__right .os-label,
  body.hub-body .os-topbar__right .btn-label,
  body.dashboard-body .os-topbar__right .btn-label,
  body .os-topbar__right .btn-label,
  body.hub-body .os-topbar__right .button-label,
  body.dashboard-body .os-topbar__right .button-label,
  body .os-topbar__right .button-label {
    display: none !important;
  }
}


/* Fase 17.18.3-D.1 — HUB Mobile Topbar Single Line Hardfix
   Hub mobile: hamburger + título + ações icon-only em uma única linha.
*/
@media (max-width: 768px) {
  body.os-body:not(.os-auth-mobile-safe) .os-topbar {
    position: relative !important;
    top: auto !important;
    z-index: 70 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 10px !important;
    background: rgba(3, 12, 28, .96) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-topbar__inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-topbar__left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-topbar__left .os-iconbtn {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    border-radius: 14px !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 1rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title > *:not(.os-topbar__version),
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-topbar__version {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 3px 8px !important;
    font-size: .66rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* No mobile, username/badges saem da topbar para liberar área útil. */
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right .os-badge,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__company-badge {
    display: none !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right form {
    display: inline-flex !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    margin: 0 !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right .os-btn,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right .os-iconbtn,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right button,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right a {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right .os-btn i,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right .os-iconbtn i,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right button i,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right a i,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right .os-btn svg,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right .os-iconbtn svg,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right button svg,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right a svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
    display: inline-flex !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-content {
    padding-top: 10px !important;
  }
}

@media (max-width: 420px) {
  body.os-body:not(.os-auth-mobile-safe) .os-topbar {
    padding: 7px 8px !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-topbar__left .os-iconbtn,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right form,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right .os-btn,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right .os-iconbtn,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right button,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right a {
    flex-basis: 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 13px !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right {
    gap: 5px !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title {
    font-size: .95rem !important;
  }
}

/* Fase 17.18.3-D.2 — HUB Hide Version On Mobile
   Versionamento/release marker permanece no desktop.
   No mobile, sai da topbar para liberar área útil.
*/
@media (max-width: 768px) {
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__version,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__release,
  body.os-body:not(.os-auth-mobile-safe) .os-release-marker,
  body.os-body:not(.os-auth-mobile-safe) .os-version,
  body.os-body:not(.os-auth-mobile-safe) [data-os-release-marker],
  body.os-body:not(.os-auth-mobile-safe) [data-release-marker] {
    display: none !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title {
    gap: 0 !important;
  }
}


/* Fase 17.18.3-D.3 — HUB Hide Mobile Version Hardfix
   O release marker do Hub pode aparecer como pill/badge dentro do título.
   No mobile, esconder versionamento e preservar apenas o título operacional.
*/
@media (max-width: 768px) {
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title .os-topbar__version,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title .os-topbar__release,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title .os-release-marker,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title .os-version,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title .os-badge,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title .badge,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title .pill,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title .os-pill,
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title [class*="version"],
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title [class*="release"],
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title [class*="marker"],
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title [class*="badge"],
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title [class*="pill"],
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title [data-os-release-marker],
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title [data-release-marker] {
    display: none !important;
  }

  /* Caso o versionamento esteja como segundo elemento direto do título. */
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title > :not(:first-child) {
    display: none !important;
  }

  /* Preserva o primeiro elemento/título em linha única. */
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title > :first-child {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    gap: 0 !important;
  }
}

/* Fase 17.18.3-E — HUB Release Marker Private
   Release marker técnico removido da topbar pública.
   Em DEBUG, aparece apenas no rodapé da sidebar.
*/
.os-topbar .os-topbar__version,
.os-topbar .os-release-marker,
.os-topbar [data-os-release-marker],
.os-topbar [data-release-marker] {
  display: none !important;
}

.os-dev-release-marker {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(103, 199, 255, .18);
  background: rgba(103, 199, 255, .08);
  color: rgba(214, 232, 255, .72);
  font-size: 11px;
  line-height: 1.25;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .os-dev-release-marker {
    display: none !important;
  }
}

/* Fase 17.18.3-F — HUB Top Header Gap Collapse
   Remove a faixa preta acima da barra de ação no desktop e no mobile.
*/

html, body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body .os-app-shell,
body .os-shell,
body .os-layout,
body .os-page-shell,
body .os-main-shell {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body .os-main,
body .os-main-content,
body main,
body .content,
body .page-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body .os-topbar,
body .os-page-topbar,
body .os-commandbar,
body .os-toolbar {
  margin-top: 0 !important;
  padding-top: 8px !important;
  min-height: auto !important;
}

body .os-topbar + *,
body .os-page-topbar + *,
body .os-commandbar + * {
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  body .os-topbar,
  body .os-page-topbar,
  body .os-commandbar,
  body .os-toolbar {
    padding-top: max(4px, env(safe-area-inset-top, 0px)) !important;
    margin-top: 0 !important;
  }

  body .os-main,
  body .os-main-content,
  body main,
  body .content,
  body .page-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* Fase 17.18.3-F.1 — HUB Topbar Clean No Overlap
   Remove versionamento público, reduz faixa superior e impede sobreposição com o conteúdo.
*/

/* Versionamento técnico não aparece na topbar em nenhum viewport. */
body.os-body .os-topbar .os-topbar__version,
body.os-body .os-topbar .os-release-marker,
body.os-body .os-topbar .os-version,
body.os-body .os-topbar [class*="release"],
body.os-body .os-topbar [class*="version"],
body.os-body .os-topbar [data-os-release-marker],
body.os-body .os-topbar [data-release-marker] {
  display: none !important;
}

/* Topbar sem faixa preta inútil acima. */
body.os-body:not(.os-auth-mobile-safe) .os-topbar {
  top: 0 !important;
  margin-top: 0 !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: auto !important;
}

/* Mantém o conteúdo abaixo da topbar, sem sobreposição. */
body.os-body:not(.os-auth-mobile-safe) .os-main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.os-body:not(.os-auth-mobile-safe) .os-content {
  padding-top: 14px !important;
}

/* Desktop: evita colisão visual de badges/usuário/data com a topbar. */
@media (min-width: 769px) {
  body.os-body:not(.os-auth-mobile-safe) .os-topbar__inner {
    min-height: 44px !important;
    align-items: center !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-topbar__right {
    align-items: center !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-content {
    padding-top: 16px !important;
  }
}

/* Mobile: topbar enxuta em uma linha. */
@media (max-width: 768px) {
  body.os-body:not(.os-auth-mobile-safe) .os-topbar {
    padding-top: max(4px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 6px !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-topbar__title > :not(:first-child) {
    display: none !important;
  }

  body.os-body:not(.os-auth-mobile-safe) .os-content {
    padding-top: 10px !important;
  }
}

/* Fase 17.18.3-G.1 — HUB Offtenant Release Marker Removed */
.os-offtopbar__version,
.os-offtopbar [class*="release"],
.os-offtopbar [class*="version"],
.os-offtopbar [data-release-marker],
.os-offtopbar [data-os-release-marker] {
  display: none !important;
}

/* Fase 17.18.3-H — OmniShield Unified Institutional Topbar
   Hub, MTA e satélites devem parecer áreas da mesma plataforma.
   Ordem padrão: marca -> usuário -> relógio -> ações.
*/

.os-topbar--unified,
body.os-body .os-topbar--unified,
body.mta-body .os-topbar--unified {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 6px 14px !important;
  min-height: 56px !important;
  background: rgba(3, 12, 28, .98) !important;
  border-bottom: 1px solid rgba(103, 199, 255, .12) !important;
  box-shadow: none !important;
}

.os-topbar__inner--unified {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

.os-topbar__left--unified,
.os-topbar__right--unified {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

.os-topbar__left--unified {
  gap: 10px !important;
  flex: 1 1 auto !important;
}

.os-topbar__right--unified {
  gap: 8px !important;
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 0 !important;
}

.os-topbar__menu,
.os-topbar--unified .os-iconbtn,
.os-topbar--unified .os-topbar__action {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.045) !important;
  color: #f4f8ff !important;
  text-decoration: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

.os-topbar--unified .os-iconbtn i,
.os-topbar--unified .os-topbar__action i,
.os-topbar__menu i {
  font-size: 18px !important;
  line-height: 1 !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.os-topbar__brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  text-decoration: none !important;
  color: #f4f8ff !important;
}

.os-topbar__brand-mark {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(103,199,255,.12) !important;
  border: 1px solid rgba(103,199,255,.18) !important;
  color: #f4f8ff !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
}

.os-topbar__brand-text {
  min-width: 0 !important;
  max-width: 100% !important;
  display: inline-flex !important;
  flex-direction: column !important;
}

.os-topbar__brand-title {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 1.02rem !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  color: #f4f8ff !important;
}

.os-topbar__chip {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  background: rgba(255,255,255,.04) !important;
  color: #f4f8ff !important;
  font-size: .86rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.os-topbar__chip i {
  font-size: 15px !important;
  line-height: 1 !important;
}

.os-topbar__logout-form {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
}

.os-topbar__action--danger {
  background: rgba(154, 42, 57, .92) !important;
  border-color: rgba(244, 107, 125, .30) !important;
}

/* Remove lixo técnico/operacional da topbar pública. */
.os-topbar--unified .os-topbar__version,
.os-topbar--unified .os-release-marker,
.os-topbar--unified .mta-release-marker,
.os-topbar--unified [class*="release"],
.os-topbar--unified [class*="version"],
.os-topbar--unified [data-release-marker],
.os-topbar--unified [data-os-release-marker],
.os-topbar--unified .os-badge:not(.os-topbar__chip) {
  display: none !important;
}

/* Conteúdo abaixo da topbar sem sobreposição. */
body.os-body .os-content,
body.mta-body .os-content,
body.mta-body .mta-content {
  padding-top: 14px !important;
}

/* Desktop compacto. */
@media (min-width: 769px) {
  .os-topbar--unified {
    min-height: 56px !important;
  }
}

/* Mobile: mantém identidade, usuário e relógio como ícones quando apertar. */
@media (max-width: 768px) {
  .os-topbar--unified,
  body.os-body .os-topbar--unified,
  body.mta-body .os-topbar--unified {
    padding: max(4px, env(safe-area-inset-top, 0px)) 8px 6px 8px !important;
    min-height: 50px !important;
  }

  .os-topbar__inner--unified {
    gap: 8px !important;
    min-height: 42px !important;
  }

  .os-topbar__left--unified {
    gap: 8px !important;
    flex: 1 1 auto !important;
  }

  .os-topbar__right--unified {
    gap: 6px !important;
    flex: 0 0 auto !important;
  }

  .os-topbar__brand-mark {
    display: none !important;
  }

  .os-topbar__brand-title {
    font-size: .98rem !important;
    max-width: 34vw !important;
  }

  .os-topbar__menu,
  .os-topbar--unified .os-iconbtn,
  .os-topbar--unified .os-topbar__action {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 13px !important;
  }

  .os-topbar__chip {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    border-radius: 13px !important;
  }

  .os-topbar__chip-text {
    display: none !important;
  }

  body.os-body .os-content,
  body.mta-body .os-content,
  body.mta-body .mta-content {
    padding-top: 10px !important;
  }
}

@media (max-width: 420px) {
  .os-topbar__brand-title {
    max-width: 30vw !important;
    font-size: .92rem !important;
  }

  .os-topbar__right--unified {
    gap: 5px !important;
  }

  .os-topbar__menu,
  .os-topbar--unified .os-iconbtn,
  .os-topbar--unified .os-topbar__action,
  .os-topbar__chip {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }
}

/* Fase 17.18.3-I — OmniShield Unified Institutional Sidebar
   Sidebar padronizada: navegação estrutural, sem slogan/topo conceitual e sem status de rodapé.
*/

.os-sidebar {
  background: rgba(4, 19, 39, .98) !important;
  border-right: 1px solid rgba(103,199,255,.12) !important;
}

.os-sidebar__brand,
.os-brand,
.os-sidebar-brand {
  min-height: 70px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  background: rgba(103,199,255,.08) !important;
  border: 1px solid rgba(103,199,255,.14) !important;
}

.os-sidebar__brand .os-logo,
.os-brand .os-logo,
.os-sidebar-brand .os-logo {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
}

.os-sidebar__brand .os-brandtext,
.os-brand .os-brandtext,
.os-sidebar-brand .os-brandtext {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.os-sidebar__brand .os-brandtext strong,
.os-brand .os-brandtext strong,
.os-sidebar-brand .os-brandtext strong,
.os-sidebar__brand-title,
.os-brand-title {
  font-size: .98rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  color: #f4f8ff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Remove slogans/subtítulos conceituais divergentes no topo da sidebar. */
.os-sidebar__brand .os-brandtext span:not(:first-child),
.os-brand .os-brandtext span:not(:first-child),
.os-sidebar-brand .os-brandtext span:not(:first-child),
.os-sidebar__tagline,
.os-sidebar__subtitle,
.os-sidebar__caption,
.os-brand-subtitle,
.os-brand-caption,
.os-brand-tagline {
  display: none !important;
}

/* Remove status conceitual de rodapé da sidebar em produção/uso normal. */
.os-sidebar__status,
.os-sidebar__context-status,
.os-sidebar__footer-status,
.os-sidebar__footer-note,
.os-sidebar__operation-status,
.os-sidebar [class*="operation-status"],
.os-sidebar [class*="context-status"] {
  display: none !important;
}

/* O release marker DEV, quando existir, continua discreto e só em DEBUG pelo template. */
.os-dev-release-marker {
  margin-top: 12px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(103,199,255,.18) !important;
  background: rgba(103,199,255,.08) !important;
  color: rgba(214,232,255,.72) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 768px) {
  .os-sidebar__brand,
  .os-brand,
  .os-sidebar-brand {
    min-height: 64px !important;
    padding: 12px !important;
  }

  .os-dev-release-marker {
    display: none !important;
  }
}

/* Fase 17.18.3-H.1 — Unified Topbar Hardfix
   Topbar global única: marca -> usuário -> relógio -> ações.
   Remove metadados duplicados abaixo da topbar quando existirem.
*/

.os-topbar--unified {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 6px 14px !important;
  min-height: 56px !important;
  background: rgba(3, 12, 28, .98) !important;
  border-bottom: 1px solid rgba(103, 199, 255, .12) !important;
}

.os-topbar__inner--unified {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 44px !important;
  flex-wrap: nowrap !important;
}

.os-topbar__left--unified,
.os-topbar__right--unified {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

.os-topbar__left--unified {
  gap: 10px !important;
  flex: 1 1 auto !important;
}

.os-topbar__right--unified {
  gap: 8px !important;
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
}

.os-topbar__brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  color: #f4f8ff !important;
  text-decoration: none !important;
}

.os-topbar__brand-mark {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(103,199,255,.12) !important;
  border: 1px solid rgba(103,199,255,.18) !important;
  color: #f4f8ff !important;
  font-weight: 900 !important;
}

.os-topbar__brand-title {
  display: block !important;
  max-width: 240px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 1.02rem !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
}

.os-topbar--unified .os-iconbtn,
.os-topbar--unified .os-topbar__action,
.os-topbar__menu {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.045) !important;
  color: #f4f8ff !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.os-topbar--unified .os-iconbtn i,
.os-topbar--unified .os-topbar__action i,
.os-topbar__menu i {
  font-size: 18px !important;
  line-height: 1 !important;
}

.os-topbar__chip {
  height: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  background: rgba(255,255,255,.04) !important;
  color: #f4f8ff !important;
  font-size: .86rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.os-topbar__logout-form {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
}

.os-topbar__action--danger {
  background: rgba(154, 42, 57, .92) !important;
  border-color: rgba(244, 107, 125, .30) !important;
}

/* Topbar pública sem versionamento ou badges técnicos. */
.os-topbar--unified .os-topbar__version,
.os-topbar--unified .os-release-marker,
.os-topbar--unified .mta-release-marker,
.os-topbar--unified [class*="release"],
.os-topbar--unified [class*="version"],
.os-topbar--unified [data-release-marker],
.os-topbar--unified [data-os-release-marker],
.os-topbar--unified .os-badge:not(.os-topbar__chip) {
  display: none !important;
}

/* Esconde blocos duplicados de usuário/data abaixo da topbar.
   Eles eram úteis antes da topbar institucional; agora viraram ruído. */
.os-session-strip,
.os-user-clock-strip,
.os-runtime-strip,
.os-identity-strip,
.os-page-meta-strip,
.os-context-strip,
.os-dashboard-meta,
.os-current-user-box,
.os-current-user-card,
.os-user-date-card,
.os-page-user-meta,
.os-page-runtime-meta,
.os-page-header-meta,
.os-meta-toolbar,
.os-meta-panel {
  display: none !important;
}

/* Se algum container tiver chips redundantes imediatamente após a topbar, neutraliza. */
.os-topbar--unified + .os-session-strip,
.os-topbar--unified + .os-user-clock-strip,
.os-topbar--unified + .os-runtime-strip,
.os-topbar--unified + .os-identity-strip,
.os-topbar--unified + .os-page-meta-strip {
  display: none !important;
}

body.os-body .os-content,
body.mta-body .os-content,
body.mta-body .mta-content {
  padding-top: 14px !important;
}

@media (max-width: 768px) {
  .os-topbar--unified {
    padding: max(4px, env(safe-area-inset-top, 0px)) 8px 6px 8px !important;
    min-height: 50px !important;
  }

  .os-topbar__inner--unified {
    gap: 8px !important;
    min-height: 42px !important;
  }

  .os-topbar__left--unified {
    gap: 8px !important;
  }

  .os-topbar__right--unified {
    gap: 6px !important;
  }

  .os-topbar__brand-mark {
    display: none !important;
  }

  .os-topbar__brand-title {
    max-width: 34vw !important;
    font-size: .98rem !important;
  }

  .os-topbar--unified .os-iconbtn,
  .os-topbar--unified .os-topbar__action,
  .os-topbar__menu,
  .os-topbar__chip {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    border-radius: 13px !important;
  }

  .os-topbar__chip-text {
    display: none !important;
  }

  body.os-body .os-content,
  body.mta-body .os-content,
  body.mta-body .mta-content {
    padding-top: 10px !important;
  }
}

/* Fase 17.18.3-I.1 — OmniShield Sidebar Institutional Hardfix
   Sidebar é navegação estrutural. Sem slogan, subtítulo ou status conceitual.
*/

/* Topo da sidebar: visual institucional único. */
.os-sidebar .os-brand,
.os-sidebar .os-sidebar__brand,
.os-sidebar .os-sidebar-brand,
.os-sidebar [class*="brand-card"],
.os-sidebar [class*="brandBox"],
.os-sidebar [class*="brand-box"] {
  background: rgba(103,199,255,.08) !important;
  border: 1px solid rgba(103,199,255,.14) !important;
  border-radius: 18px !important;
}

/* Esconde subtítulos/slogans dentro da marca da sidebar. */
.os-sidebar .os-brand small,
.os-sidebar .os-brand p,
.os-sidebar .os-brand .muted,
.os-sidebar .os-brand .subtitle,
.os-sidebar .os-brand .caption,
.os-sidebar .os-brand .tagline,
.os-sidebar .os-sidebar__brand small,
.os-sidebar .os-sidebar__brand p,
.os-sidebar .os-sidebar__brand .muted,
.os-sidebar .os-sidebar__brand .subtitle,
.os-sidebar .os-sidebar__brand .caption,
.os-sidebar .os-sidebar__brand .tagline,
.os-sidebar [class*="brand"] small,
.os-sidebar [class*="brand"] p,
.os-sidebar [class*="brand"] [class*="subtitle"],
.os-sidebar [class*="brand"] [class*="caption"],
.os-sidebar [class*="brand"] [class*="tagline"],
.os-sidebar [class*="brand"] [class*="description"] {
  display: none !important;
}

/* Em brandtext, mantém o primeiro texto forte e remove linhas secundárias. */
.os-sidebar .os-brandtext span + span,
.os-sidebar .os-brandtext small,
.os-sidebar .os-brandtext p,
.os-sidebar .os-brandtext .muted {
  display: none !important;
}

/* Remove rodapés conceituais/status operacionais. */
.os-sidebar__status,
.os-sidebar__context-status,
.os-sidebar__footer-status,
.os-sidebar__footer-note,
.os-sidebar__operation-status,
.os-sidebar [class*="operation-status"],
.os-sidebar [class*="context-status"],
.os-sidebar [class*="governed-status"],
.os-sidebar [class*="governanca-status"],
.os-sidebar [class*="status-card"],
.os-sidebar [class*="footer-note"],
.os-sidebar [class*="footer-status"] {
  display: none !important;
}

/* Preserva explicitamente ações úteis de rodapé. */
.os-sidebar a[href*="hub"],
.os-sidebar a[href*="feedback"],
.os-sidebar button[data-os-feedback-open] {
  display: flex !important;
}

/* Release marker DEV continua permitido, mas só pelo template em DEBUG. */
.os-dev-release-marker {
  margin-top: 12px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(103,199,255,.18) !important;
  background: rgba(103,199,255,.08) !important;
  color: rgba(214,232,255,.72) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 768px) {
  .os-dev-release-marker {
    display: none !important;
  }
}



/* Fase 17.18.3-L — Hub Header/Sidebar Institutional Alignment
   Topbar global acima da sidebar; sidebar limpa; usuário fica no rodapé da sidebar;
   topbar troca username por e-mail e comunicações com contadores.
*/
body.os-body .os-topbar--unified {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  z-index: 1000 !important;
}

body.os-body .os-sidebar {
  top: var(--os-topbar-h, 64px) !important;
  height: calc(100vh - var(--os-topbar-h, 64px)) !important;
  padding-top: 14px !important;
}

body.os-body .os-main {
  padding-top: var(--os-topbar-h, 64px) !important;
}

body.os-body .os-sidebar .os-sidebar__brand,
body.os-body .os-sidebar .os-brand,
body.os-body .os-sidebar .os-sidebar-brand {
  display: none !important;
}

body.os-body .os-nav--institutional {
  padding-top: 0 !important;
}

.os-topbar__chip--email,
.os-topbar__chip--comms {
  text-decoration: none !important;
  cursor: pointer !important;
}

.os-topbar__chip--email:hover,
.os-topbar__chip--comms:hover {
  background: rgba(103,199,255,.10) !important;
  border-color: rgba(103,199,255,.30) !important;
}

.os-topbar__count {
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(91,190,204,.18) !important;
  border: 1px solid rgba(91,190,204,.32) !important;
  color: #f4f8ff !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.os-topbar__chip--user,
.os-system-banner,
.os-alert--info:has(strong) {
  display: none !important;
}

@media (max-width: 768px) {
  .os-topbar__chip--email .os-topbar__chip-text,
  .os-topbar__chip--comms .os-topbar__chip-text,
  .os-topbar__chip--clock .os-topbar__chip-text {
    display: none !important;
  }

  .os-topbar__count {
    position: absolute !important;
    right: -5px !important;
    top: -5px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: .66rem !important;
  }

  .os-topbar__chip--email,
  .os-topbar__chip--comms,
  .os-topbar__chip--clock {
    position: relative !important;
  }
}




/* Fase 17.18.3-M — Hub topbar right actions + render/horizontal overflow fix
   Corrige os efeitos colaterais da 17.18.3-L:
   - topbar global ocupa toda a largura sem gerar rolagem horizontal;
   - marca/toggle ficam à esquerda;
   - e-mail, comunicações, horário, voltar, feedback e sair ficam à direita;
   - off-tenant usa a mesma topbar global;
   - conteúdo volta a renderizar no fluxo correto ao lado da sidebar.
*/
:root {
  --os-topbar-h: 64px;
  --os-sidebar-w: 280px;
}

html,
body.os-body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.os-body .os-shell {
  min-height: 100vh !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.os-body .os-topbar--hub-global,
body.os-body .os-topbar--unified {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: var(--os-topbar-h, 64px) !important;
  min-height: var(--os-topbar-h, 64px) !important;
  padding: 0 14px !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  background: rgba(3, 12, 28, .96) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(12px) !important;
  box-sizing: border-box !important;
}

body.os-body .os-topbar--hub-global .os-topbar__inner,
body.os-body .os-topbar--unified .os-topbar__inner,
body.os-body .os-topbar__inner--unified {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

body.os-body .os-topbar__left--unified {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 46vw !important;
}

body.os-body .os-topbar__brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  text-decoration: none !important;
  color: #f4f8ff !important;
  white-space: nowrap !important;
}

body.os-body .os-topbar__brand-mark {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(20, 55, 90, .72) !important;
  border: 1px solid rgba(103,199,255,.18) !important;
  color: #f4f8ff !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
}

body.os-body .os-topbar__brand-title {
  color: #f4f8ff !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.os-body .os-topbar__right--unified {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}

body.os-body .os-topbar__chip,
body.os-body .os-topbar__right--unified .os-iconbtn,
body.os-body .os-topbar__right--unified button,
body.os-body .os-topbar__right--unified a {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 42px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

body.os-body .os-topbar__logout-form {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

body.os-body .os-topbar__chip--user,
body.os-body .os-system-banner,
body.os-body .os-offtopbar {
  display: none !important;
}

body.os-body .os-sidebar {
  position: fixed !important;
  top: var(--os-topbar-h, 64px) !important;
  left: 0 !important;
  width: var(--os-sidebar-w, 280px) !important;
  height: calc(100vh - var(--os-topbar-h, 64px)) !important;
  padding-top: 14px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 900 !important;
  box-sizing: border-box !important;
}

body.os-body .os-main {
  margin-left: var(--os-sidebar-w, 280px) !important;
  padding-top: var(--os-topbar-h, 64px) !important;
  width: auto !important;
  max-width: none !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  box-sizing: border-box !important;
}

body.os-body .os-content {
  width: 100% !important;
  max-width: 100% !important;
  min-height: calc(100vh - var(--os-topbar-h, 64px)) !important;
  padding: 18px var(--os-shell-gutter, 18px) 24px !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  box-sizing: border-box !important;
}

body.os-body .os-content-frame {
  width: 100% !important;
  max-width: var(--os-content-max-width, 1260px) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

body.os-sidebar-collapsed .os-main {
  margin-left: 84px !important;
}

body.os-sidebar-collapsed .os-sidebar {
  width: 84px !important;
}

body.os-body .os-footer {
  display: none !important;
}

@media (max-width: 980px) {
  body.os-body .os-topbar__brand-title,
  body.os-body .os-topbar__chip--email .os-topbar__chip-text,
  body.os-body .os-topbar__chip--comms .os-topbar__chip-text,
  body.os-body .os-topbar__chip--clock .os-topbar__chip-text {
    display: none !important;
  }

  body.os-body .os-topbar__left--unified {
    max-width: none !important;
  }

  body.os-body .os-topbar__right--unified {
    gap: 6px !important;
  }
}

@media (max-width: 768px) {
  body.os-body .os-topbar--hub-global,
  body.os-body .os-topbar--unified {
    padding: 0 8px !important;
  }

  body.os-body .os-sidebar {
    transform: translateX(-100%);
    transition: transform .18s ease;
  }

  body.os-body.os-sidebar-open .os-sidebar {
    transform: translateX(0);
  }

  body.os-body .os-main,
  body.os-sidebar-collapsed .os-main {
    margin-left: 0 !important;
  }

  body.os-body .os-content {
    padding: 14px 10px 22px !important;
  }
}




/* Fase 17.18.3-N — Hub layout clearance + sidebar full collapse
   Correção complementar da 17.18.3-M:
   - conteúdo com respiro superior real abaixo da topbar fixa;
   - ícones da sidebar com grade única;
   - sidebar recolhida totalmente, sem trilho residual;
   - topbar continua global e independente da sidebar.
*/
:root {
  --os-topbar-h: 64px;
  --os-sidebar-w: 280px;
  --os-content-top-clearance: 28px;
}

body.os-body,
body.os-body * {
  box-sizing: border-box;
}

/* Topbar global sempre acima, sem ocupar espaço do fluxo. */
body.os-body .os-topbar--hub-global,
body.os-body .os-topbar--unified {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--os-topbar-h, 64px) !important;
  min-height: var(--os-topbar-h, 64px) !important;
  z-index: 1200 !important;
}

/* O shell e o main precisam compensar a topbar fixa. */
body.os-body .os-shell {
  padding-top: 0 !important;
  min-height: 100vh !important;
}

body.os-body .os-main {
  margin-left: var(--os-sidebar-w, 280px) !important;
  padding-top: var(--os-topbar-h, 64px) !important;
  min-height: 100vh !important;
  transition: margin-left .22s ease !important;
}

body.os-body .os-content {
  padding-top: var(--os-content-top-clearance, 28px) !important;
  padding-left: var(--os-shell-gutter, 18px) !important;
  padding-right: var(--os-shell-gutter, 18px) !important;
  padding-bottom: 28px !important;
  min-height: calc(100vh - var(--os-topbar-h, 64px)) !important;
}

body.os-body .os-content-frame {
  margin-top: 0 !important;
  min-width: 0 !important;
}

/* Proteção para páginas antigas que usam containers próprios e ficavam coladas na topbar. */
body.os-body .os-page,
body.os-body .hub-page,
body.os-body .dashboard-page,
body.os-body .os-container,
body.os-body .os-dashboard,
body.os-body .os-list-page,
body.os-body .os-form-page,
body.os-body .os-detail-page {
  scroll-margin-top: calc(var(--os-topbar-h, 64px) + 18px) !important;
}

body.os-body .os-content-frame > :first-child {
  margin-top: 0 !important;
}

/* Sidebar estrutural abaixo da topbar. */
body.os-body .os-sidebar {
  position: fixed !important;
  top: var(--os-topbar-h, 64px) !important;
  left: 0 !important;
  width: var(--os-sidebar-w, 280px) !important;
  height: calc(100vh - var(--os-topbar-h, 64px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 1000 !important;
  transition: transform .22s ease, width .22s ease, opacity .18s ease !important;
}

/* Recolhimento total: sem mini-sidebar, sem trilho, sem ícones órfãos. */
body.os-body.os-sidebar-collapsed .os-sidebar {
  transform: translateX(-105%) !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-right: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

body.os-body.os-sidebar-collapsed .os-main {
  margin-left: 0 !important;
}

body.os-body.os-sidebar-collapsed .os-content {
  padding-left: max(var(--os-shell-gutter, 18px), 18px) !important;
}

/* Ícones da sidebar: grade única e comportamento previsível. */
body.os-body .os-sidebar .os-nav,
body.os-body .os-sidebar .os-nav--institutional {
  padding-inline: 14px !important;
}

body.os-body .os-sidebar .os-navlink,
body.os-body .os-sidebar .os-navgrp__btn,
body.os-body .os-sidebar .os-navitem {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  border-radius: 13px !important;
  line-height: 1.1 !important;
}

body.os-body .os-sidebar .os-ico {
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 22px !important;
  color: rgba(142, 220, 255, .92) !important;
}

body.os-body .os-sidebar .os-ico i,
body.os-body .os-sidebar .os-navlink i,
body.os-body .os-sidebar .os-navgrp__btn i,
body.os-body .os-sidebar .os-navitem i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

body.os-body .os-sidebar .os-label,
body.os-body .os-sidebar .os-nav__text {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.os-body .os-sidebar .os-caret {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  min-width: 18px !important;
}

body.os-body .os-sidebar .os-navgrp__children {
  padding-left: 12px !important;
  margin-top: 6px !important;
}

body.os-body .os-sidebar .os-navgrp__children .os-navitem {
  min-height: 40px !important;
  padding-left: 20px !important;
}

/* Backdrop só aparece em modo mobile aberto. */
body.os-body .os-sidebar-backdrop {
  display: none !important;
}

@media (max-width: 980px) {
  :root {
    --os-sidebar-w: 280px;
  }

  body.os-body .os-sidebar {
    transform: translateX(-105%) !important;
    width: min(86vw, 300px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.os-body.os-sidebar-mobile-open .os-sidebar {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.os-body .os-main,
  body.os-body.os-sidebar-collapsed .os-main,
  body.os-body:not(.os-sidebar-collapsed) .os-main {
    margin-left: 0 !important;
  }

  body.os-body.os-sidebar-mobile-open .os-sidebar-backdrop {
    display: block !important;
    position: fixed !important;
    inset: var(--os-topbar-h, 64px) 0 0 0 !important;
    z-index: 950 !important;
    background: rgba(0,0,0,.34) !important;
  }
}

@media (max-width: 768px) {
  :root {
    --os-topbar-h: 56px;
    --os-content-top-clearance: 18px;
  }

  body.os-body .os-content {
    padding-top: var(--os-content-top-clearance, 18px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.os-body .os-topbar__brand-title {
    max-width: 38vw !important;
  }
}




/* Fase 17.18.3-O — Hub topbar clearance + sidebar icon rail
   Correção complementar da 17.18.3-N:
   - elimina sobreposição remanescente da topbar fixa sobre o conteúdo;
   - sidebar recolhida vira trilho de ícones, não desaparece;
   - submenus, textos, carets e metadados somem no modo recolhido;
   - conteúdo acompanha a largura real da sidebar expandida/recolhida.
*/
:root {
  --os-topbar-h: 64px;
  --os-topbar-content-gap: 34px;
  --os-sidebar-w: 280px;
  --os-sidebar-collapsed-w: 84px;
}

body.os-body {
  overflow-x: hidden !important;
}

/* A topbar continua global, fixa e acima de tudo. */
body.os-body .os-topbar--hub-global,
body.os-body .os-topbar--unified {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--os-topbar-h, 64px) !important;
  min-height: var(--os-topbar-h, 64px) !important;
  z-index: 1400 !important;
}

/* Respiro real: compensa topbar + folga. Isso mata a sobreposição residual. */
body.os-body .os-main {
  margin-left: var(--os-sidebar-w, 280px) !important;
  padding-top: calc(var(--os-topbar-h, 64px) + var(--os-topbar-content-gap, 34px)) !important;
  min-height: 100vh !important;
  transition: margin-left .22s ease !important;
}

body.os-body .os-content {
  padding-top: 0 !important;
  padding-left: var(--os-shell-gutter, 18px) !important;
  padding-right: var(--os-shell-gutter, 18px) !important;
  padding-bottom: 28px !important;
  min-height: calc(100vh - var(--os-topbar-h, 64px) - var(--os-topbar-content-gap, 34px)) !important;
}

body.os-body .os-content-frame {
  margin-top: 0 !important;
  min-width: 0 !important;
}

body.os-body .os-content-frame > :first-child,
body.os-body .os-page > :first-child,
body.os-body .hub-page > :first-child,
body.os-body .dashboard-page > :first-child {
  margin-top: 0 !important;
}

body.os-body .os-page,
body.os-body .hub-page,
body.os-body .dashboard-page,
body.os-body .os-container,
body.os-body .os-dashboard,
body.os-body .os-list-page,
body.os-body .os-form-page,
body.os-body .os-detail-page {
  scroll-margin-top: calc(var(--os-topbar-h, 64px) + var(--os-topbar-content-gap, 34px) + 16px) !important;
}

/* Sidebar expandida. */
body.os-body .os-sidebar {
  position: fixed !important;
  top: var(--os-topbar-h, 64px) !important;
  left: 0 !important;
  width: var(--os-sidebar-w, 280px) !important;
  min-width: var(--os-sidebar-w, 280px) !important;
  max-width: var(--os-sidebar-w, 280px) !important;
  height: calc(100vh - var(--os-topbar-h, 64px)) !important;
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 1100 !important;
  transition: width .22s ease, min-width .22s ease, max-width .22s ease !important;
}

/* Recolhido: trilho de ícones. Não some. Não deixa submenu aberto. */
body.os-body.os-sidebar-collapsed .os-sidebar {
  transform: translateX(0) !important;
  width: var(--os-sidebar-collapsed-w, 84px) !important;
  min-width: var(--os-sidebar-collapsed-w, 84px) !important;
  max-width: var(--os-sidebar-collapsed-w, 84px) !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow-x: hidden !important;
}

body.os-body.os-sidebar-collapsed .os-main {
  margin-left: var(--os-sidebar-collapsed-w, 84px) !important;
}

/* No modo recolhido ficam somente ícones principais. */
body.os-body.os-sidebar-collapsed .os-sidebar .os-label,
body.os-body.os-sidebar-collapsed .os-sidebar .os-nav__text,
body.os-body.os-sidebar-collapsed .os-sidebar .os-caret,
body.os-body.os-sidebar-collapsed .os-sidebar .os-navgrp__children,
body.os-body.os-sidebar-collapsed .os-sidebar .os-user__meta,
body.os-body.os-sidebar-collapsed .os-sidebar .os-dev-release-marker {
  display: none !important;
}

body.os-body.os-sidebar-collapsed .os-sidebar .os-nav,
body.os-body.os-sidebar-collapsed .os-sidebar .os-nav--institutional {
  padding-inline: 0 !important;
}

body.os-body.os-sidebar-collapsed .os-sidebar .os-navgrp,
body.os-body.os-sidebar-collapsed .os-sidebar .os-navlink,
body.os-body.os-sidebar-collapsed .os-sidebar .os-navgrp__btn,
body.os-body.os-sidebar-collapsed .os-sidebar .os-navitem {
  width: 100% !important;
  min-width: 0 !important;
}

body.os-body.os-sidebar-collapsed .os-sidebar .os-navlink,
body.os-body.os-sidebar-collapsed .os-sidebar .os-navgrp__btn,
body.os-body.os-sidebar-collapsed .os-sidebar .os-navitem {
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  min-height: 48px !important;
  border-radius: 14px !important;
}

body.os-body.os-sidebar-collapsed .os-sidebar .os-ico {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  flex: 0 0 24px !important;
  margin: 0 auto !important;
}

body.os-body.os-sidebar-collapsed .os-sidebar .os-ico i,
body.os-body.os-sidebar-collapsed .os-sidebar .os-navlink i,
body.os-body.os-sidebar-collapsed .os-sidebar .os-navgrp__btn i,
body.os-body.os-sidebar-collapsed .os-sidebar .os-navitem i {
  width: 22px !important;
  height: 22px !important;
  font-size: 19px !important;
  line-height: 1 !important;
}

body.os-body.os-sidebar-collapsed .os-sidebar .os-sidebar__foot {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.os-body.os-sidebar-collapsed .os-sidebar .os-user {
  justify-content: center !important;
  padding: 0 !important;
  min-height: 48px !important;
}

body.os-body.os-sidebar-collapsed .os-sidebar .os-user__avatar {
  margin: 0 auto !important;
}

/* Segurança: grupos recolhidos nunca devem vazar filhos abertos. */
body.os-body.os-sidebar-collapsed .os-sidebar [data-os-children] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Mobile: sidebar volta ao padrão overlay; recolhimento por trilho é desktop. */
@media (max-width: 980px) {
  body.os-body .os-main,
  body.os-body.os-sidebar-collapsed .os-main {
    margin-left: 0 !important;
    padding-top: calc(var(--os-topbar-h, 64px) + 18px) !important;
  }

  body.os-body .os-sidebar,
  body.os-body.os-sidebar-collapsed .os-sidebar {
    width: min(86vw, 300px) !important;
    min-width: 0 !important;
    max-width: min(86vw, 300px) !important;
    transform: translateX(-105%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.os-body.os-sidebar-mobile-open .os-sidebar,
  body.os-body.os-sidebar-open .os-sidebar {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}



/* Fase 17.18.3-P — Hub topbar clearance definitivo + shell fixo
   Correção complementar da 17.18.3-O:
   - topbar permanece fixa, global e sem participar do fluxo do conteúdo;
   - sidebar começa abaixo da topbar;
   - área principal vira viewport fixa entre topbar/sidebar;
   - o respiro superior passa para o conteúdo rolável, não para .os-main;
   - evita sobreposição residual em Agenda, Portal MTA e páginas com heros/cards próprios.
*/
:root {
  --os-topbar-h: 64px;
  --os-sidebar-w: 280px;
  --os-sidebar-collapsed-w: 84px;
  --os-content-safe-top: 28px;
  --os-content-safe-x: 18px;
  --os-content-safe-bottom: 32px;
}

body.os-body {
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

body.os-body .os-shell {
  position: relative !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  display: block !important;
}

body.os-body .os-topbar,
body.os-body .os-topbar--hub-global,
body.os-body .os-topbar--unified {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  height: var(--os-topbar-h, 64px) !important;
  min-height: var(--os-topbar-h, 64px) !important;
  max-height: var(--os-topbar-h, 64px) !important;
  z-index: 1600 !important;
}

body.os-body .os-sidebar {
  position: fixed !important;
  top: var(--os-topbar-h, 64px) !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--os-sidebar-w, 280px) !important;
  min-width: var(--os-sidebar-w, 280px) !important;
  max-width: var(--os-sidebar-w, 280px) !important;
  height: calc(100vh - var(--os-topbar-h, 64px)) !important;
  max-height: calc(100vh - var(--os-topbar-h, 64px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 1200 !important;
}

/* O ponto crítico: main não recebe padding-top; ela começa abaixo da topbar. */
body.os-body .os-main {
  position: fixed !important;
  top: var(--os-topbar-h, 64px) !important;
  left: var(--os-sidebar-w, 280px) !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  transition: left .22s ease !important;
}

body.os-body.os-sidebar-collapsed .os-main {
  left: var(--os-sidebar-collapsed-w, 84px) !important;
}

body.os-body.os-sidebar-collapsed .os-sidebar {
  width: var(--os-sidebar-collapsed-w, 84px) !important;
  min-width: var(--os-sidebar-collapsed-w, 84px) !important;
  max-width: var(--os-sidebar-collapsed-w, 84px) !important;
}

/* O scroll fica aqui. O respiro real também. */
body.os-body .os-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: var(--os-content-safe-top, 28px) var(--os-content-safe-x, 18px) var(--os-content-safe-bottom, 32px) var(--os-content-safe-x, 18px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-padding-top: var(--os-content-safe-top, 28px) !important;
}

body.os-body .os-content-frame {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Blindagem contra templates antigos que tentem subir hero/card até a topbar. */
body.os-body .os-content-frame > :first-child,
body.os-body .os-page:first-child,
body.os-body .hub-page:first-child,
body.os-body .dashboard-page:first-child,
body.os-body .agenda-shell:first-child,
body.os-body .agenda-hero:first-child,
body.os-body .agenda-page-header:first-child {
  margin-top: 0 !important;
}

body.os-body .agenda-shell,
body.os-body .hub-page,
body.os-body .os-page,
body.os-body .dashboard-page,
body.os-body .os-container,
body.os-body .os-dashboard,
body.os-body .os-list-page,
body.os-body .os-form-page,
body.os-body .os-detail-page {
  scroll-margin-top: var(--os-content-safe-top, 28px) !important;
}

/* Segurança visual: nada de conteúdo por baixo da topbar. */
body.os-body .os-content::before {
  content: "";
  display: table;
  clear: both;
}

/* Mobile: volta ao fluxo seguro e evita viewport fixa agressiva. */
@media (max-width: 980px) {
  body.os-body {
    overflow: hidden !important;
  }

  body.os-body .os-main,
  body.os-body.os-sidebar-collapsed .os-main {
    position: fixed !important;
    top: var(--os-topbar-h, 64px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.os-body .os-content {
    padding: 18px 12px 28px 12px !important;
  }

  body.os-body .os-sidebar,
  body.os-body.os-sidebar-collapsed .os-sidebar {
    top: var(--os-topbar-h, 64px) !important;
    height: calc(100vh - var(--os-topbar-h, 64px)) !important;
  }
}

/* === PHASE17_18_3T_SIDEBAR_PORTAL_FLYOUT_START === */
/*
  Fase 17.18.3-T — Portal externo real para submenus do trilho recolhido.
  O submenu não é mais renderizado dentro da sidebar. Ele é criado no <body>,
  posicionado ao lado do trilho e fechado ao clicar fora, pressionar Esc ou
  abrir outro pai.
*/
#os-sidebar-rail-portal {
  position: fixed !important;
  z-index: 99999 !important;
  display: none !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 292px !important;
  max-width: calc(100vw - 110px) !important;
  max-height: calc(100vh - 96px) !important;
  padding: 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(103, 199, 255, .34) !important;
  background: rgba(6, 18, 33, .992) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.04) inset !important;
  backdrop-filter: blur(14px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#os-sidebar-rail-portal.is-open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#os-sidebar-rail-portal .os-rail-portal__title {
  margin: 0 0 6px 0 !important;
  padding: 4px 8px 10px !important;
  border-bottom: 1px solid rgba(103,199,255,.18) !important;
  color: rgba(230,244,255,.98) !important;
  font-size: .79rem !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

#os-sidebar-rail-portal .os-rail-portal__link {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 10px 12px !important;
  border-radius: 13px !important;
  color: rgba(225,240,255,.94) !important;
  background: rgba(255,255,255,.028) !important;
  border: 1px solid rgba(103,199,255,.08) !important;
  text-decoration: none !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
}

#os-sidebar-rail-portal .os-rail-portal__link:hover,
#os-sidebar-rail-portal .os-rail-portal__link:focus-visible {
  color: #ffffff !important;
  background: rgba(103,199,255,.16) !important;
  border-color: rgba(103,199,255,.30) !important;
  outline: none !important;
}

#os-sidebar-rail-portal .os-rail-portal__link.is-active {
  color: #ffffff !important;
  background: rgba(28,116,153,.78) !important;
  border-color: rgba(103,199,255,.36) !important;
}

#os-sidebar-rail-portal .os-rail-portal__ico,
#os-sidebar-rail-portal .os-ico {
  flex: 0 0 22px !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  color: #8fddff !important;
}

#os-sidebar-rail-portal .os-rail-portal__label {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body.os-body.os-sidebar-collapsed .os-sidebar .os-navgrp.os-rail-parent-active > [data-os-toggle],
body.os-body.os-sidebar-collapsed .os-sidebar .os-navgrp.os-rail-parent-active > .os-navgrp__btn,
body.os-sidebar-collapsed .os-sidebar .os-navgrp.os-rail-parent-active > [data-os-toggle],
body.os-sidebar-collapsed .os-sidebar .os-navgrp.os-rail-parent-active > .os-navgrp__btn {
  background: rgba(103,199,255,.18) !important;
  border-color: rgba(103,199,255,.46) !important;
  box-shadow: 0 0 0 1px rgba(103,199,255,.16) inset, 0 12px 28px rgba(0,0,0,.25) !important;
}

body.os-body.os-sidebar-collapsed .os-sidebar .os-navgrp > [data-os-children],
body.os-body.os-sidebar-collapsed .os-sidebar .os-navgrp > .os-navgrp__children,
body.os-sidebar-collapsed .os-sidebar .os-navgrp > [data-os-children],
body.os-sidebar-collapsed .os-sidebar .os-navgrp > .os-navgrp__children {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
/* === PHASE17_18_3T_SIDEBAR_PORTAL_FLYOUT_END === */


/* === PHASE17_20_B13_1_SIDEBAR_VISIBILITY_BEGIN === */
/* Correção UX: submenus extensos não podem ficar cortados visualmente. */
.os-sidebar,
.os-sidebar .os-nav,
.os-sidebar .os-nav--institutional,
.os-sidebar .os-navgrp {
  overflow: visible !important;
}

.os-sidebar {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  overscroll-behavior: contain !important;
}

.os-sidebar .os-navgrp__children,
.os-sidebar [data-os-children] {
  max-height: calc(100vh - 170px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px !important;
  scrollbar-width: thin !important;
  position: relative !important;
  z-index: 30 !important;
}

.os-sidebar .os-navgrp__children::-webkit-scrollbar,
.os-sidebar [data-os-children]::-webkit-scrollbar {
  width: 6px !important;
}

.os-sidebar .os-navgrp__children::-webkit-scrollbar-thumb,
.os-sidebar [data-os-children]::-webkit-scrollbar-thumb {
  background: rgba(103, 199, 255, .34) !important;
  border-radius: 999px !important;
}
/* === PHASE17_20_B13_1_SIDEBAR_VISIBILITY_END === */


/* === PHASE17_20_B13_1_1_SIDEBAR_SCROLL_BEGIN === */
/* Correção executiva: submenu longo precisa ser acessível em zoom 100%.
   O scroll pertence à navegação lateral, não ao body nem a cada submenu isolado. */
body.os-body .os-sidebar {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: calc(100vh - var(--os-topbar-h, 64px)) !important;
  max-height: calc(100vh - var(--os-topbar-h, 64px)) !important;
}

body.os-body .os-sidebar .os-nav,
body.os-body .os-sidebar .os-nav--institutional {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  padding-bottom: 112px !important;
  scroll-padding-top: 16px !important;
  scroll-padding-bottom: 128px !important;
}

body.os-body .os-sidebar .os-navgrp {
  overflow: visible !important;
  flex: 0 0 auto !important;
}

body.os-body .os-sidebar .os-navgrp__children,
body.os-body .os-sidebar [data-os-children] {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  padding-right: 0 !important;
  scrollbar-width: auto !important;
}

body.os-body .os-sidebar .os-sidebar__foot {
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 60 !important;
  margin-top: 10px !important;
  background: linear-gradient(180deg, rgba(4,19,39,.82), rgba(4,19,39,.98) 42%) !important;
  box-shadow: 0 -12px 22px rgba(2, 8, 19, .48) !important;
}

body.os-body .os-sidebar .os-nav::-webkit-scrollbar,
body.os-body .os-sidebar .os-nav--institutional::-webkit-scrollbar {
  width: 8px !important;
}

body.os-body .os-sidebar .os-nav::-webkit-scrollbar-thumb,
body.os-body .os-sidebar .os-nav--institutional::-webkit-scrollbar-thumb {
  background: rgba(103, 199, 255, .34) !important;
  border-radius: 999px !important;
}
/* === PHASE17_20_B13_1_1_SIDEBAR_SCROLL_END === */


/* === PHASE17_20_B13_1_2_SIDEBAR_PORTAL_VIEWPORT_BEGIN === */
/* Correção específica do flyout do trilho recolhido.
   O portal externo precisa respeitar a viewport real, com rolagem interna. */
#os-sidebar-rail-portal {
  box-sizing: border-box !important;
  max-height: calc(100vh - var(--os-topbar-h, 64px) - 28px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

#os-sidebar-rail-portal::-webkit-scrollbar {
  width: 8px !important;
}

#os-sidebar-rail-portal::-webkit-scrollbar-thumb {
  background: rgba(103, 199, 255, .34) !important;
  border-radius: 999px !important;
}

#os-sidebar-rail-portal::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .05) !important;
  border-radius: 999px !important;
}

#os-sidebar-rail-portal .os-rail-portal__link {
  flex: 0 0 auto !important;
}
/* === PHASE17_20_B13_1_2_SIDEBAR_PORTAL_VIEWPORT_END === */