/* --------- Fuente global --------- */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

/* =========================
  1) Tokens (CSS Variables)
   ========================= */
:root{
  /* colores base */
  --bg: #ffffff;
  --text: #212529;
  --muted: #6c757d;
  --accent: #0d6efd;
  --panel-border-color: #e7edfb;
  --panel-border-width: 1px;
  /* Tamaño de fuente */
  --font-base: 14px;
  /* radios / sombras */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* layout */
  --toggle-clearance: 28px;
  --sidebar-width-expanded: 240px;
  --sidebar-width-collapsed: 72px;

  /* shell app */
  --shell-content-bg: #ffffff;
  --shell-sidebar-bg: #f8f9fa;
  --shell-sidebar-text: #6c757d;
  --shell-sidebar-active: #0d6efd;
  --shell-sidebar-shadow: rgba(0,0,0,0.08) 0px 2px 8px;
  --shell-topbar-bg: #ffffff;
  --shell-topbar-border: #e4e9f4;
  --shell-topbar-shadow: rgba(0,0,0,0.02) 0 2px 6px;

  /* user menu */
  --user-toggle-bg: #ffffff;
  --user-toggle-border: #d8dfeb;
  --user-toggle-bg-hover: #f4f7ff;
  --user-menu-bg: #ffffff;
  --user-menu-border: #dbe3f1;
  --user-menu-hover: #f3f6ff;
  --avatar-fallback-bg: #e9eefb;
  --de-table-cell-bg: #ffffff;
  --de-table-header-bg: #fafafa;
  --de-table-height: calc(100dvh - 270px);
  --de-table-min-height: 340px;
  --de-table-max-height: calc(100dvh - 270px);
}

.balance-history-layout{
  display:grid;
  grid-template-columns:minmax(0, 3fr) minmax(280px, 1fr);
  gap:1rem;
  align-items:start;
}

.balance-history-chart{
  min-width:0;
}

.balance-history-sidebar{
  min-width:0;
  padding:0.9rem;
  border:1px solid var(--app-border, #e2e8f0);
  border-radius:0.9rem;
  background:var(--app-surface-soft, #f8fafc);
}

.balance-history-table-scroll{
  height:285px;
  max-height:285px;
  overflow-y:scroll;
  border:1px solid var(--app-border, #e2e8f0);
  border-radius:0.6rem;
  background:#fff;
}

.balance-history-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:0.78rem;
}

.balance-history-table th,
.balance-history-table td{
  padding:0.55rem;
  border-bottom:1px solid var(--app-border, #e2e8f0);
  overflow-wrap:anywhere;
  vertical-align:top;
}

.balance-history-table th{
  position:sticky;
  top:0;
  z-index:1;
  background:#f8fafc;
  text-align:left;
}

.balance-history-table th:nth-child(1){ width:35%; }
.balance-history-table th:nth-child(2){ width:38%; }
.balance-history-table th:nth-child(3){ width:27%; }

.cfg-role-help-wrap{
  position:relative;
  display:inline-flex;
  margin-left:6px;
  vertical-align:middle;
}

.cfg-role-help{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:6px;
  border-radius:50%;
  background:#e8efff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:700;
  line-height:1;
  cursor:default;
  vertical-align:middle;
}

.cfg-role-help-copy{
  display:none;
  position:absolute;
  z-index:2100;
  left:calc(100% + 8px);
  top:50%;
  width:max-content;
  max-width:300px;
  padding:0.45rem 0.6rem;
  border-radius:0.25rem;
  background:#212529;
  color:#fff;
  font-size:0.8rem;
  font-weight:400;
  line-height:1.3;
  transform:translateY(-50%);
  box-shadow:0 0.25rem 0.75rem rgba(0,0,0,.2);
  pointer-events:none;
}

.cfg-role-help-wrap:hover .cfg-role-help-copy,
.cfg-role-help-wrap:focus-within .cfg-role-help-copy{
  display:block;
}

@media (max-width: 900px){
  .balance-history-layout{ grid-template-columns:minmax(0, 1fr); }
  .balance-history-table-scroll{ max-height:240px; }
}

:root[data-app-theme="dark"]{
  --bg: #161a22;
  --text: #e8edf7;
  --muted: #9aa6bb;
  --panel-border-color: rgba(255,255,255,0.12);

  --shell-content-bg: #0f131b;
  --shell-sidebar-bg: #151b26;
  --shell-sidebar-text: #9aa6bb;
  --shell-sidebar-active: #6d83ff;
  --shell-sidebar-shadow: rgba(0,0,0,0.35) 0px 2px 10px;
  --shell-topbar-bg: #171e2a;
  --shell-topbar-border: rgba(255,255,255,0.12);
  --shell-topbar-shadow: rgba(0,0,0,0.28) 0 2px 8px;

  --user-toggle-bg: #1d2533;
  --user-toggle-border: #2e394d;
  --user-toggle-bg-hover: #273246;
  --user-menu-bg: #1a2331;
  --user-menu-border: #30415e;
  --user-menu-hover: #2a3750;
  --avatar-fallback-bg: #2b3750;
  --de-table-cell-bg: #1a2331;
  --de-table-header-bg: #1a2331;
}

/* =========================
   2) Tipografía global + Plotly
   ========================= */
html,
body{
  min-height:100%;
  margin:0;
}

html, body #root{
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  background: var(--shell-content-bg);
}

/* Global error experience.  This remains independent of any feature module so
   a failing callback cannot leave an empty or technical-looking screen. */
.error-page{
  position:relative;
  isolation:isolate;
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:2rem;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(45, 127, 249, 0.14) 0%, rgba(45, 127, 249, 0.05) 18%, transparent 34%),
    linear-gradient(270deg, rgba(44, 168, 143, 0.14) 0%, rgba(44, 168, 143, 0.05) 18%, transparent 34%),
    radial-gradient(circle at -8% 12%, rgba(13, 110, 253, 0.28), transparent 34%),
    radial-gradient(circle at 108% 92%, rgba(25, 135, 84, 0.24), transparent 30%),
    linear-gradient(160deg, #f7faff 0%, #ffffff 52%, #f4f7ff 100%);
  color:#1f2937;
}

.error-page-card{
  position:relative;
  z-index:1;
  width:min(100%, 580px);
  padding:clamp(2rem, 6vw, 4rem);
  border:1px solid rgba(169, 188, 221, .56);
  border-radius:1.25rem;
  background:rgba(255, 255, 255, .92);
  box-shadow:0 1.25rem 3rem rgba(18, 49, 96, .14);
  backdrop-filter:blur(8px);
  text-align:center;
}

.error-page-logo{ width:150px; max-width:72%; height:auto; margin:0 auto 2.5rem; }
.error-page-eyebrow{ margin-bottom:.75rem; color:#256bff; font-size:.72rem; font-weight:700; letter-spacing:.16em; }
.error-page h1{ margin:0; font-size:clamp(1.65rem, 4vw, 2.25rem); font-weight:700; }
.error-page-detail{ margin:1rem auto 1.75rem; max-width:440px; color:#526075; font-size:1rem; line-height:1.6; }
.error-page-button{ display:inline-block; padding:.7rem 1.15rem; border-radius:.6rem; background:#256bff; color:#fff; font-weight:700; text-decoration:none; box-shadow:0 .5rem 1rem rgba(37, 107, 255, .22); }
.error-page-button:hover,.error-page-button:focus{ background:#184ed7; color:#fff; }
.error-page-support{ margin:1.75rem auto 0; max-width:440px; color:#6b7280; font-size:.84rem; line-height:1.55; }
.error-page-reference{ display:inline-block; margin-top:.35rem; color:#374151; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.78rem; }
.error-page-maintenance .error-page-eyebrow{ color:#a26b00; }

.error-page-unexpected{
  background:
    radial-gradient(circle at -6% 8%, rgba(42, 110, 255, .34), transparent 35%),
    radial-gradient(circle at 106% 92%, rgba(42, 168, 143, .26), transparent 34%),
    linear-gradient(160deg, #0f151f 0%, #121a27 48%, #101826 100%);
  color:#f8fafc;
}
.error-page-unexpected .error-page-card{ border-color:rgba(232, 237, 247, .16); background:rgba(19, 30, 46, .92); box-shadow:0 1.5rem 3.5rem rgba(0, 0, 0, .32); }
.error-page-unexpected .error-page-eyebrow{ color:#8fb2ff; }
.error-page-unexpected .error-page-detail,.error-page-unexpected .error-page-support{ color:#cbd5e1; }
.error-page-unexpected .error-page-reference{ color:#e2e8f0; }
.error-page-unexpected .error-page-button{ background:#5d87ff; box-shadow:0 .5rem 1rem rgba(93, 135, 255, .24); }
.error-page-unexpected .error-page-button:hover,.error-page-unexpected .error-page-button:focus{ background:#7b9dff; }
.app-global-error{ display:none; position:fixed; z-index:20000; right:1rem; bottom:1rem; max-width:min(460px, calc(100vw - 2rem)); padding:1rem 1.15rem; border:1px solid #f3b4ba; border-radius:.75rem; background:#fff5f5; box-shadow:0 .75rem 2rem rgba(31,41,55,.2); color:#7f1d1d; line-height:1.5; }
.app-global-error.is-visible{ display:block; }
.app-global-error-reference{ display:inline-block; margin-left:.25rem; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.78rem; }
.app-global-error-content{ display:flex; align-items:flex-start; gap:.75rem; }
.app-global-error-copy{ min-width:0; flex:1 1 auto; }
.app-global-error-dismiss{ display:inline-flex; flex:0 0 2rem; align-items:center; justify-content:center; width:2rem; height:2rem; margin:-.35rem -.5rem 0 0; padding:0; border:0; border-radius:50%; color:#7f1d1d; background:transparent; font-size:1.5rem; line-height:1; }
.app-global-error-dismiss:hover,.app-global-error-dismiss:focus{ background:rgba(127,29,29,.10); outline:2px solid rgba(127,29,29,.28); outline-offset:2px; }

/* Bootstrap materializes button colors per component, so root --bs-primary
   alone cannot retheme controls that are already mounted. */
:root[data-brand-revision] .btn-primary:not(.app-user-toggle){
  --bs-btn-bg: var(--brand-accent, var(--accent));
  --bs-btn-border-color: var(--brand-accent, var(--accent));
  --bs-btn-hover-bg: var(--brand-accent-strong, var(--accent));
  --bs-btn-hover-border-color: var(--brand-accent-strong, var(--accent));
  --bs-btn-active-bg: var(--brand-accent-strong, var(--accent));
  --bs-btn-active-border-color: var(--brand-accent-strong, var(--accent));
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  background-color: var(--brand-accent, var(--accent)) !important;
  border-color: var(--brand-accent, var(--accent)) !important;
}

:root[data-brand-revision] .btn-outline-primary{
  --bs-btn-color: var(--brand-accent, var(--accent));
  --bs-btn-border-color: var(--brand-accent, var(--accent));
  --bs-btn-hover-bg: var(--brand-accent, var(--accent));
  --bs-btn-hover-border-color: var(--brand-accent, var(--accent));
  --bs-btn-active-bg: var(--brand-accent-strong, var(--accent));
  --bs-btn-active-border-color: var(--brand-accent-strong, var(--accent));
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  color: var(--brand-accent, var(--accent)) !important;
  border-color: var(--brand-accent, var(--accent)) !important;
}

:root[data-brand-revision] .btn-primary:not(.app-user-toggle):hover,
:root[data-brand-revision] .btn-primary:not(.app-user-toggle):focus,
:root[data-brand-revision] .btn-primary:not(.app-user-toggle):active,
:root[data-brand-revision] .btn-outline-primary:hover,
:root[data-brand-revision] .btn-outline-primary:focus,
:root[data-brand-revision] .btn-outline-primary:active{
  background-color: var(--brand-accent-strong, var(--accent)) !important;
  border-color: var(--brand-accent-strong, var(--accent)) !important;
}

:root[data-brand-revision] .btn-outline-primary:hover,
:root[data-brand-revision] .btn-outline-primary:focus,
:root[data-brand-revision] .btn-outline-primary:active{
  color: #fff !important;
}

/* ===== Tipografía en TODO: elementos nativos, Dash, DataTable, dropdowns ===== */
html, body,
button, input, optgroup, select, textarea,
.dash-table-container, .dash-spreadsheet,
.Select, .Select-control, .VirtualizedSelectOption,
.card, .navbar, .nav, .form-control, .btn {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* --------- Tamaño de letra general --------- */
html {
  font-size: var(--font-base);
}

.js-plotly-plot .plotly text { font-family: inherit; }

.plotly-like-header{
  background: transparent;
  border: none;
  padding: 6px 8px 0 8px; /* aire como Plotly arriba */
}

.plotly-like-title{
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  font-weight: 400 !important;   /* sin bold */
  font-size: 20px;               /* más compacto que 16px */
  line-height: 1.15;             /* altura mínima necesaria */
  letter-spacing: 0.2px;
  color: #2a3f5f;                /* como el title de Plotly */
  margin: 0;                     /* sin margen extra */
  padding: 0;                    /* sin padding extra */
  display: inline-block;         /* ocupa solo lo que necesita */
}

/* =========================
   3) Layout general / Grid / Cards
   ========================= */
.dashboard-grid{
  display: grid;
  grid-template-columns: minmax(0, 20fr) minmax(0, 40fr) minmax(0, 40fr);
  grid-template-rows: minmax(0, 3fr) minmax(0, 2.5fr) minmax(0, 2.5fr);
  grid-template-areas:
    "kpi_count sector map"
    "kpi_halo riesgo influencia"
    "favorability afinidad interaccion";
  gap: 0.75rem;
  overflow: hidden;
}
.dashboard-grid > *{ min-width: 0; min-height: 0; }

/* Overview updates several Plotly figures together.  Let their data paint
   immediately, then use a very short compositor-only settle motion on their
   cards.  This avoids the expensive per-chart animations that made filters
   and project changes feel serial, while still giving the eye a clear update
   cue. */
@media (prefers-reduced-motion: no-preference){
  body:not(.dashboard-loading) .dash-page .dash-item{
    animation: polaris-overview-settle 180ms cubic-bezier(.2,.72,.2,1) both;
  }

  @keyframes polaris-overview-settle{
    from{
      opacity: .82;
      transform: translateY(4px);
    }
    to{
      opacity: 1;
      transform: translateY(0);
    }
  }
}

:root[data-brand-revision] .dash-page #btn-clear.dash-clear-filters-button.btn-light,
.dash-page #btn-clear.dash-clear-filters-button.btn-light{
  --bs-btn-color: #1f2937;
  --bs-btn-bg: color-mix(in srgb, var(--brand-accent-soft, #e7f0ff) 64%, #ffffff);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #111827;
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-accent-soft, #e7f0ff) 82%, #ffffff);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #111827;
  --bs-btn-active-bg: color-mix(in srgb, var(--brand-accent-soft, #e7f0ff) 82%, #ffffff);
  --bs-btn-active-border-color: transparent;
  color: #1f2937 !important;
  background: color-mix(in srgb, var(--brand-accent-soft, #e7f0ff) 64%, #ffffff) !important;
  border: 0 !important;
  font-weight: 600;
  box-shadow: none;
}

:root[data-brand-revision] .dash-page #btn-clear.dash-clear-filters-button.btn-light:hover,
:root[data-brand-revision] .dash-page #btn-clear.dash-clear-filters-button.btn-light:focus,
:root[data-brand-revision] .dash-page #btn-clear.dash-clear-filters-button.btn-light:active,
.dash-page #btn-clear.dash-clear-filters-button.btn-light:hover,
.dash-page #btn-clear.dash-clear-filters-button.btn-light:focus,
.dash-page #btn-clear.dash-clear-filters-button.btn-light:active{
  color: #111827 !important;
  background: color-mix(in srgb, var(--brand-accent-soft, #e7f0ff) 82%, #ffffff) !important;
  border: 0 !important;
}

.dash-item-kpi-count{ grid-area: kpi_count; }
.dash-item-kpi-halo{ grid-area: kpi_halo; }
.dash-item-favorability{ grid-area: favorability; }
.dash-item-sector{ grid-area: sector; }
.dash-item-riesgo{ grid-area: riesgo; }
.dash-item-afinidad{ grid-area: afinidad; }
.dash-item-map{ grid-area: map; }
.dash-item-influencia{ grid-area: influencia; }
.dash-item-interaccion{ grid-area: interaccion; }

.panel-card{
  border: var(--panel-border-width) solid var(--panel-border-color);
  border-radius: var(--radius-md);
  background: var(--bg);
  overflow: hidden;
  contain: layout paint;
  min-width: 0;
}
.panel-card .card-body{ overflow: hidden; min-width: 0; }

/* Modifier para paneles que contienen DataTable pesada */
.panel-card.panel-allows-overflow,
.panel-card.panel-allows-overflow .card-body{
  overflow: visible;
  contain: none;
}

/* =========================
   4) Sidebar / Navegación
   ========================= */
#sidebar .sidebar-spacer{ height: var(--toggle-clearance); }

.sidebar-shell{
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.sidebar-brand{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0.9rem;
  min-width: 0;
}

.sidebar-brand-top{
  padding-top: 0.15rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--shell-topbar-border);
}

.sidebar-brand-footer{
  margin-top: auto;
  padding-top: 0.9rem;
  padding-bottom: 0.15rem;
  justify-content: center;
}

.sidebar-brand-img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.sidebar-brand-compact{
  display: none;
}

.sidebar-brand-top .sidebar-brand-full{
  max-width: 156px;
}

.sidebar-brand-footer .sidebar-brand-full{
  max-width: 114px;
  margin: 0 auto;
}

.sidebar-brand-top .sidebar-brand-compact{
  max-width: 34px;
}

.sidebar-brand-footer .sidebar-brand-compact{
  max-width: 24px;
  margin: 0 auto;
}

/* The neutral red-and-black palette owns a high-contrast shell identity. */
:root[data-brand-identity="red-black"] .sidebar-brand-top .sidebar-brand-full{
  content: url("/assets/polaris_logo_completo_rojo_letras_blancas_vector.svg");
}

:root[data-brand-identity="red-black"] .sidebar-brand-top .sidebar-brand-compact{
  content: url("/assets/polaris_isotipo_red_mate.svg");
}

:root[data-brand-identity="red-black"] .sidebar-brand-footer .sidebar-brand-full,
:root[data-brand-identity="red-black"] .sidebar-brand-footer .sidebar-brand-compact{
  content: url("/assets/aurora_isotipo_white.svg");
}

:root[data-brand-identity="red-black"] #sidebar-toggle-wrap #btn-toggle .bi{
  color: #fff;
}

:root[data-brand-identity="red-black"] .sidebar-brand-footer .sidebar-brand-full{
  content: url("/assets/Logo Aurora white.svg");
}

/* Aurora uses the same contrast-safe shell assets over its midnight palette. */
:root[data-brand-identity="aurora"] .sidebar-brand-top .sidebar-brand-full{
  content: url("/assets/polaris_logo_completo_azul_letras_blancas_vector.svg");
}

:root[data-brand-identity="aurora"] .sidebar-brand-top .sidebar-brand-compact{
  content: url("/assets/polaris_isotipo.svg");
}

:root[data-brand-identity="aurora"] .sidebar-brand-footer .sidebar-brand-full,
:root[data-brand-identity="aurora"] .sidebar-brand-footer .sidebar-brand-compact{
  content: url("/assets/aurora_isotipo_white.svg");
}

:root[data-brand-identity="aurora"] #sidebar-toggle-wrap #btn-toggle .bi{
  color: #fff;
}

:root[data-brand-identity="aurora"] .sidebar-brand-footer .sidebar-brand-full{
  content: url("/assets/Logo Aurora white.svg");
}

.sidebar-nav-wrap{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

#btn-toggle{
  width: 28px; height: 28px; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  pointer-events: auto;
}

#sidebar-toggle-wrap{
  pointer-events: none;
  width: 32px;
  left: 6px;
  opacity: 1 !important;
  visibility: visible !important;
}

#sidebar-toggle-wrap #btn-toggle .bi{
  font-size: 1.15rem;
  line-height: 1;
  color: #2c3246;
}

#btn-toggle:hover,
#btn-toggle:focus{
  background: transparent;
  box-shadow: none;
}

#sidebar .nav-pills .nav-link{
  border-radius: var(--radius-md);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
#sidebar .nav-pills .nav-link:not(.active){ color: var(--shell-sidebar-text); }
#sidebar .nav-pills .nav-link.active{ background: var(--shell-sidebar-active); color: #fff; }

#sidebar .menu-label{
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sidebar.sidebar-collapsed .menu-label{
  display: none !important;
}

#sidebar.sidebar-collapsed .sidebar-brand{
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

#sidebar.sidebar-collapsed .sidebar-brand-top{
  padding-bottom: 0.65rem;
}

#sidebar.sidebar-collapsed .sidebar-brand-footer{
  padding-top: 0.7rem;
}

#sidebar.sidebar-collapsed .sidebar-brand-full{
  display: none !important;
}

#sidebar.sidebar-collapsed .sidebar-brand-compact{
  display: block !important;
}

#sidebar.sidebar-expanded .menu-label{
  display: inline-block !important;
}

#sidebar.sidebar-collapsed .nav-pills .nav-link{
  display: flex;
  align-items: center;
  justify-content: center;
}

#sidebar.sidebar-collapsed .nav-pills .nav-link > div{
  width: 24px;
  min-width: 24px;
  justify-content: center !important;
  margin: 0 auto;
}

#sidebar.sidebar-collapsed .nav-pills .nav-link .bi{
  display: block;
  margin: 0 auto;
}

/* Cuando el sidebar está colapsado y quieres mostrar selección "ligera" */
.sidebar-collapsed .nav-pills .nav-link.active{
  background: var(--shell-topbar-bg); color: var(--text);
  border-left: 4px solid var(--accent);
  padding-left: calc(.75rem - 4px);
}

#sidebar.sidebar-collapsed .nav-pills .nav-link.active{
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: none !important;
  padding-left: 0 !important;
}

/* Quita el padding lateral del contenedor sidebar */
#sidebar .nav,
#sidebar .nav-pills{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#sidebar .nav-pills .nav-link{
  display: block;
  width: 100%;
}

/* =========================
   5) KPI (responsive con container queries)
   ========================= */
.kpi-card{ container-type: inline-size; min-width: 0; }
.kpi-number{ font-weight: 700; line-height: 1; }
.kpi-label{ color: var(--muted); }

@supports (width: 1cqw){
  .kpi-number{ font-size: clamp(1.6rem, 18cqw, 5rem); }
  .kpi-label{ font-size: clamp(.9rem, 6cqw, 1.5rem); }
}

/* =========================
   6) DataTable (global mínimo y seguro)
   ========================= */
.dash-table-container .dash-spreadsheet th{
  background: #fff;
}

/* =========================
   6.1) AG Grid del editor (#de-table)
   ========================= */
#de-table.de-ag-grid{
  --ag-font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ag-font-size: 12px;
  --ag-header-background-color: var(--de-table-header-bg, #fafafa);
  --ag-background-color: var(--de-table-cell-bg, #ffffff);
  --ag-odd-row-background-color: var(--de-table-cell-bg, #ffffff);
  --ag-row-hover-color: rgba(13, 110, 253, 0.04);
  --ag-border-color: rgba(0,0,0,0.08);
  --ag-header-column-separator-display: block;
  display: block !important;
}

#de-table.de-ag-grid .ag-root-wrapper{
  border: none !important;
  border-radius: 0;
}

#de-table.de-ag-grid .ag-header{
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

#de-table.de-ag-grid .ag-header-cell-resize{
  display: none !important;
}

#de-table.de-ag-grid .ag-header-cell-label{
  justify-content: center;
}

#de-table.de-ag-grid .ag-header-cell-text{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

#de-table.de-ag-grid .ag-floating-filter-input{
  font-size: 10px;
}

#de-table.de-ag-grid .ag-cell{
  padding: 6px;
  line-height: 1.25;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

#de-table.de-ag-grid .ag-cell-value{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#de-table.de-ag-grid .ag-cell.de-ag-select-cell .ag-cell-value,
#de-table.de-ag-grid .ag-cell.de-ag-halo-cell .ag-cell-value{
  display: block;
  -webkit-line-clamp: unset;
  white-space: nowrap;
}

#de-table.de-ag-grid .ag-cell.de-ag-photo-cell .ag-cell-value{
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-line-clamp: unset;
  white-space: normal;
  font-size: 30px;
  line-height: 1;
  color: #adb5bd;
}

#de-table.de-ag-grid .ag-cell.de-ag-photo-cell .ag-cell-value p{
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#de-table.de-ag-grid .ag-cell.de-ag-photo-cell .ag-cell-value img{
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  object-fit: cover;
}

#de-table.de-ag-grid .ag-cell-inline-editing{
  overflow: visible !important;
  z-index: 8;
}

#de-table.de-ag-grid .ag-cell-inline-editing .ag-cell-value{
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

#de-table.de-ag-grid .ag-popup-editor{
  z-index: 1400 !important;
  width: auto !important;
  max-width: min(92vw, 360px) !important;
}

#de-table.de-ag-grid .ag-popup-editor .ag-cell-edit-wrapper,
#de-table.de-ag-grid .ag-popup-editor .ag-picker-field-wrapper{
  width: auto !important;
  min-width: 0 !important;
  max-width: min(92vw, 360px) !important;
  height: auto !important;
}

#de-table.de-ag-grid .ag-popup-editor .ag-picker-field{
  width: auto !important;
  min-width: 0 !important;
  max-width: min(92vw, 360px) !important;
}

#de-table.de-ag-grid .ag-popup .ag-list-item,
#de-table.de-ag-grid .ag-popup .ag-rich-select-row{
  white-space: normal !important;
  line-height: 1.25 !important;
  height: auto !important;
  min-height: 34px !important;
  display: flex;
  align-items: center;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

#de-table.de-ag-grid .ag-popup .ag-list-item-value,
#de-table.de-ag-grid .ag-popup .ag-list-item-text,
#de-table.de-ag-grid .ag-popup .ag-rich-select-row span,
#de-table.de-ag-grid .ag-popup .ag-rich-select-row-text,
#de-table.de-ag-grid .ag-popup .ag-select-list-item span{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  display: block !important;
  line-height: 1.25 !important;
}

#de-table.de-ag-grid .ag-popup-editor .ag-picker-field-display{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.2 !important;
}

#de-table.de-ag-grid .ag-popup .ag-rich-select-list,
#de-table.de-ag-grid .ag-popup .ag-select-list{
  min-width: 200px !important;
  width: auto !important;
  max-width: min(92vw, 360px) !important;
}

#de-table.de-ag-grid .ag-popup .ag-list-viewport,
#de-table.de-ag-grid .ag-popup .ag-virtual-list-viewport{
  max-height: 260px !important;
}

#de-table.de-ag-grid .ag-popup .ag-select-list-item{
  height: auto !important;
  min-height: 34px !important;
  align-items: flex-start !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Evita tooltip nativo del span truncado al hover sin afectar click en item */
#de-table.de-ag-grid .ag-popup .ag-select-list-item span[title]{
  pointer-events: none !important;
}

#de-table.de-ag-grid .ag-cell.de-ag-name-cell .ag-cell-value{
  font-weight: 500;
}

#de-table.de-ag-grid .ag-cell.de-ag-bullet-cell .ag-cell-value,
#de-table.de-ag-grid .ag-cell.de-ag-social-cell .ag-cell-value{
  display: block !important;
  -webkit-line-clamp: unset !important;
  white-space: normal !important;
  overflow: hidden !important;
}

#de-table .de-ag-bullet-list{
  margin: 0;
  padding-left: 16px;
  list-style: disc;
  max-height: calc(1.2em * 3);
  overflow: hidden;
}

#de-table .de-ag-bullet-item{
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

#de-table .de-ag-social-icons{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  max-height: calc(1.2em * 3);
  overflow: hidden;
}

#de-table .de-ag-social-icon{
  font-size: 16px;
  color: #4f5b68;
}

#de-table .de-ag-social-more{
  font-size: 11px;
  color: #6c757d;
  font-weight: 600;
}

#de-table.de-ag-grid .ag-pinned-left-header,
#de-table.de-ag-grid .ag-pinned-left-cols-container{
  background: var(--de-table-cell-bg, #ffffff);
}

#de-table.de-ag-grid .ag-paging-panel{
  position: sticky;
  bottom: 0;
  background: var(--de-table-cell-bg, #ffffff);
  border-top: 1px solid rgba(0,0,0,0.08);
  z-index: 7;
}

#de-table .de-ag-photo-wrap{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#de-table .de-ag-photo-circle{
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
}

#de-table .de-ag-photo-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#de-table .de-ag-photo-icon{
  font-size: 40px;
  line-height: 1;
  color: #adb5bd;
}

/* =========================
   7) DataTable del editor (#de-table)
   - Todo lo específico del editor vive aquí
   ========================= */
#de-table .dash-spreadsheet-container{
  overflow-x: auto !important;
  overflow-y: auto !important;
  padding-bottom: 0;
  max-width: 100%;
  height: 100%;
  min-height: var(--de-table-min-height, 340px);
  max-height: var(--de-table-max-height, 100%);
}

#de-table .dash-spreadsheet th{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#de-table .dash-spreadsheet td{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
  background-color: var(--de-table-cell-bg, #ffffff) !important;
}

/* Mantiene truncado el texto normal sin recortar el menú de los dropdowns */
#de-table .dash-spreadsheet td:not(.dropdown) .dash-cell-value{
  display: -webkit-box;
  width: 100%;
  max-width: 100%;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: pre-line;
  line-height: 1.25;
  max-height: calc(1.25em * 3);
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* En celdas dropdown, no recortar el contenedor interno para que el menú se vea completo */
#de-table td.dropdown .dash-cell-value,
#de-table td .dash-cell-value.dropdown{
  display: block !important;
  max-height: 100% !important;
  -webkit-line-clamp: unset !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#de-table td.dropdown{
  overflow: hidden !important;
}

#de-table .dash-spreadsheet th{
  background-color: var(--de-table-header-bg, #fafafa) !important;
}

/* Unificar altura de encabezados en el editor (incluyendo columnas fijas) */
#de-table .dash-spreadsheet thead th {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.1;
}

/* Encabezados del Data Editor: una sola línea para evitar desalineación con columnas fijas */
#de-table .dash-spreadsheet th .column-header-name{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* Forzar alturas consistentes entre tabla fija y desplazable */
#de-table .dash-spreadsheet thead tr:first-child th{
  height: 20px !important;
  min-height: 20px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#de-table .dash-spreadsheet thead tr:nth-child(2) th{
  height: 14px !important;
  min-height: 14px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Fila de filtros compacta */
#de-table .dash-spreadsheet thead tr:nth-child(2) .dash-filter{
  display: flex;
  align-items: center;
  height: 12px;
}
#de-table .dash-spreadsheet thead tr:nth-child(2) .dash-filter input{
  height: 12px !important;
  min-height: 12px !important;
  line-height: 12px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 9px !important;
}

/* Columna de foto: usar SIEMPRE id=photo_md (markdown con ![](url)) */
#de-table th[data-dash-column="photo_md"],
#de-table td[data-dash-column="photo_md"]{
  text-align: center;
  vertical-align: middle;
  width: 50px; max-width: 48px;
}
#de-table td[data-dash-column="photo_md"] img{
  width: 40px; height: 40px; border-radius: 9999px; object-fit: cover; margin: 0 auto;
}
/* Evitar sort en header de foto si aplica */
#de-table th[data-dash-column="photo_md"]{ pointer-events: none; }

/* Máscara visual en Name para ocultar cualquier bleed de la tabla desplazable debajo */
#de-table td[data-dash-column="name"]{
  font-weight: 400 !important;
  background-color: var(--de-table-cell-bg, #ffffff) !important;
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.08);
}

#de-table th[data-dash-column="name"],
#de-table th[data-dash-column="photo_md"]{
  background-color: var(--de-table-header-bg, #fafafa) !important;
  box-shadow: none !important;
}

/* Zona fija del DataTable: solo fondo, sin forzar posicionamiento nativo de Dash */
#de-table .dash-fixed-content td,
#de-table .dash-fixed-column td{
  background-color: var(--de-table-cell-bg, #ffffff) !important;
}

#de-table .dash-fixed-content th,
#de-table .dash-fixed-column th{
  background-color: var(--de-table-header-bg, #fafafa) !important;
}

/* Data Editing — columna de FOTO (id=photo_md): sin "Aa" y sin caja de filtro */
#de-table th[data-dash-column="photo_md"] .dash-filter--case { 
  display: none !important; 
}

#de-table th[data-dash-column="photo_md"] .dash-filter input{
  pointer-events: none !important;
  opacity: .6;
}
/* Ni orden en la columna de foto (oculta ícono y área clicable) */
#de-table th[data-dash-column="photo_md"] .column-header--sort {
  display: none !important;              /* por si acaso, sin orden */
  pointer-events: none !important;
}

/* Menús de Select por encima de todo (editor) */
#de-table .VirtualizedSelectFocusedOption{
  z-index: 3000;
}

/* Data editor: sin resaltado especial de celda activa */
#de-table .dash-spreadsheet-container .dash-cell.focused,
#de-table .dash-spreadsheet-container .dash-cell.selected,
#de-table .dash-spreadsheet-container td.cell--selected,
#de-table .dash-spreadsheet-container td.cell--selected.focused{
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  background-color: var(--de-table-cell-bg, #ffffff) !important;
}

#de-table .dash-spreadsheet-container .dash-cell.focused .dash-cell-value,
#de-table .dash-spreadsheet-container .dash-cell.selected .dash-cell-value,
#de-table .dash-spreadsheet-container td.cell--selected .dash-cell-value,
#de-table .dash-spreadsheet-container td.cell--selected.focused .dash-cell-value{
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  background: transparent !important;
}

#de-table .dash-spreadsheet-container .dash-cell.focused::before,
#de-table .dash-spreadsheet-container .dash-cell.focused::after,
#de-table .dash-spreadsheet-container .dash-cell.selected::before,
#de-table .dash-spreadsheet-container .dash-cell.selected::after,
#de-table .dash-spreadsheet-container td.cell--selected::before,
#de-table .dash-spreadsheet-container td.cell--selected::after{
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

#de-table .dash-spreadsheet-container td{
  -webkit-tap-highlight-color: transparent !important;
}

#de-table td[data-dash-column="indexHALO"]{
  pointer-events: none !important;
}

/* =========================
   8) Utilidades
   ========================= */
.hidden{ display: none !important; }
.text-muted{ color: var(--muted); }
.rounded-lg{ border-radius: var(--radius-lg); }
.min-w-0{ min-width: 0; }

/* ===== Tipografía en TODO: elementos nativos, Dash, DataTable, dropdowns ===== */
html, body,
button, input, optgroup, select, textarea,
.dash-table-container, .dash-spreadsheet,
.Select, .Select-control, .VirtualizedSelectOption,
.card, .navbar, .nav, .form-control, .btn {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ===== Data Editing — Filtro: icono 'Aa' y placeholder ===== */
#de-table .dash-filter {
  font-family: inherit;
}
#de-table .dash-filter input::placeholder {
  /* oculta el texto 'filter data...' visualmente */
  color: transparent;
}
/* evita que el navegador muestre tooltip con el placeholder al hover/click */
#de-table .dash-filter input[placeholder] {
  -webkit-user-select: text;
  user-select: text;
}
#de-table .dash-filter input {
  /* desactiva posible title/tooltip por estilos del navegador */
  pointer-events: auto;
}

/* ===== Data Editing — Search dropdown same height as sm buttons ===== */
#de-wrapper .de-query-dd .Select-control{
  min-height: 31px !important;
  height: 31px !important;
}
#de-wrapper .de-query-dd .Select-placeholder,
#de-wrapper .de-query-dd .Select-value,
#de-wrapper .de-query-dd .Select-value-label{
  line-height: 29px !important;
}
#de-wrapper .de-query-dd .Select-input{
  height: 29px !important;
}
#de-wrapper .de-query-dd .Select-arrow-zone,
#de-wrapper .de-query-dd .Select-clear-zone{
  height: 29px !important;
}

.de-page{
  --de-toast-left: 12px;
}

.projects-page{
  --projects-toast-left: var(--app-toast-left, 16px);
}

#sidebar.sidebar-collapsed ~ #page-content .de-page{
  --de-toast-left: calc(48px + 20px);
}

#sidebar.sidebar-expanded ~ #page-content .de-page{
  --de-toast-left: calc(200px + 20px);
}

#de-save-toast,
#de-temp-save-toast{
  min-width: 0;
  width: min(420px, calc(100vw - var(--de-toast-left, 12px) - 16px));
  max-width: calc(100vw - var(--de-toast-left, 12px) - 16px);
}

/* ===== Overview: Tooltips ===== */

.tooltip.strategicChart1-tooltip .tooltip-inner {
  max-width: 400px !important;
  min-width: 400px !important;
  white-space: normal !important;
  text-align: justify !important;

  /* --- Añadido para conservar tipografía y color --- */
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 0.85rem !important;
  color: #fff !important;
  background-color: var(--brand-accent-strong, #0a58ca) !important;
  border: 1px solid var(--brand-accent, #0d6efd) !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.tooltip.strategicChart1-tooltip {
  --bs-tooltip-bg: var(--brand-accent-strong, #0a58ca);
  --bs-tooltip-color: #fff;
  z-index: 11050 !important;
}

.tooltip.dashboard-how-to-read-tooltip {
  z-index: 11050 !important;
}

.tooltip.dashboard-how-to-read-tooltip .tooltip-inner {
  max-width: 420px !important;
  min-width: min(360px, calc(100vw - 32px)) !important;
  white-space: normal !important;
  text-align: left !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
  color: #fff !important;
  border: 1px solid color-mix(in srgb, var(--brand-accent, #0d6efd) 55%, #ffffff) !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.tooltip.dashboard-how-to-read-tooltip .tooltip-inner > div + div {
  margin-top: 5px;
}

#tooltip-strategic {
  color: var(--brand-accent, #0d6efd) !important;
}

#people-strip {
  background-color: var(--brand-accent-soft, #e7f0ff);
  border: 1px solid color-mix(in srgb, var(--brand-accent, #0d6efd) 18%, transparent);
}

.tooltip.cfg-modal-tooltip {
  z-index: 11050 !important;
}

.tooltip.cfg-modal-tooltip .tooltip-inner {
  max-width: min(320px, 88vw) !important;
  white-space: normal !important;
  text-align: left !important;
}

@media (max-width: 768px) {
  .tooltip.cfg-modal-tooltip .tooltip-inner {
    max-width: 90vw !important;
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
  }
}

/* ===== Data Editing — estilo del 'Aa' (tipo de columna) ===== */
#de-table th:hover .column-header--sort,
#de-table th .column-header--sort:hover,
#de-table th .column-header--sort:focus {
  color: #0d6efd;               /* azul Bootstrap */
}

#de-table .dash-table-container,
#de-table .dash-spreadsheet {
  font-size: 12px !important;   
  line-height: 1.3;             /* mejor legibilidad en celdas */
}

#de-table .column-header--sort svg {
  transition: color .15s ease, opacity .15s ease;
}

/* Menor separación para aprovechar más alto útil */
#de-table {
  margin-top: 8px !important;
  display: flex;
  flex-direction: column;
  height: var(--de-table-height, calc(100dvh - 270px));
  min-height: var(--de-table-min-height, 340px);
  max-height: var(--de-table-max-height, calc(100dvh - 270px));
  overflow: hidden;
}

/* --- Anchos fijos por columna (solo CSS) --- */

/* Campos pequeños */
.dash-table-container th[data-dash-column="influencia"],
.dash-table-container td[data-dash-column="influencia"],
.dash-table-container th[data-dash-column="indexHALO"],
.dash-table-container td[data-dash-column="indexHALO"]{
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
}

/* Campos medianamente amplios */
.dash-table-container th[data-dash-column="name"],
.dash-table-container td[data-dash-column="name"],
.dash-table-container th[data-dash-column="sub_sector"],
.dash-table-container td[data-dash-column="sub_sector"],
.dash-table-container th[data-dash-column="org"],
.dash-table-container td[data-dash-column="org"],
.dash-table-container th[data-dash-column="riesgo"],
.dash-table-container td[data-dash-column="riesgo"],
.dash-table-container th[data-dash-column="work_location"],
.dash-table-container td[data-dash-column="work_location"]{
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
}

/* Campos largos */
.dash-table-container th[data-dash-column="sector"],
.dash-table-container td[data-dash-column="sector"],
.dash-table-container th[data-dash-column="socials"],
.dash-table-container td[data-dash-column="socials"],
.dash-table-container th[data-dash-column="espacio_geo"],
.dash-table-container td[data-dash-column="espacio_geo"],
.dash-table-container th[data-dash-column="riesgo"],
.dash-table-container td[data-dash-column="riesgo"]{
  width: 210px !important;
  min-width: 210px !important;
  max-width: 210px !important;
}

/* Campos medianamente largos */
.dash-table-container th[data-dash-column="afinidad"],
.dash-table-container td[data-dash-column="afinidad"],
.dash-table-container th[data-dash-column="role"],
.dash-table-container td[data-dash-column="role"],
.dash-table-container th[data-dash-column="favorability"],
.dash-table-container td[data-dash-column="favorability"],
.dash-table-container th[data-dash-column="intereses_personales"],
.dash-table-container td[data-dash-column="intereses_personales"],
.dash-table-container th[data-dash-column="strategic_interests"],
.dash-table-container td[data-dash-column="strategic_interests"]{
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
}

/* Campos muy largos */
.dash-table-container th[data-dash-column="socials"],
.dash-table-container td[data-dash-column="socials"],
.dash-table-container th[data-dash-column="work_history"],
.dash-table-container td[data-dash-column="work_history"],
.dash-table-container th[data-dash-column="education"],
.dash-table-container td[data-dash-column="education"],
.dash-table-container th[data-dash-column="email"],
.dash-table-container td[data-dash-column="email"],
.dash-table-container th[data-dash-column="occurence"],
.dash-table-container td[data-dash-column="occurence"],
.dash-table-container th[data-dash-column="trends_news"],
.dash-table-container td[data-dash-column="trends_news"]{
  width: 400px !important;
  min-width: 400px !important;
  max-width: 400px !important;
}

.dash-table-container th[data-dash-column="conexiones"],
.dash-table-container td[data-dash-column="conexiones"]{
  width: 600px !important;
  min-width: 600px !important;
  max-width: 600px !important;
}

/* Botón "Aa" del filtro: borde y texto en gris; fondo transparente */
.dash-table-container .dash-filter--case,
.dash-table-container .dash-filter--case:hover {
  color: #6c757d !important;         /* gris */
  border: 1px solid #6c757d !important;
  background: transparent !important;
}

/* Fallback robusto: si el header tiene icono de sort, invierte el flujo para que el icono quede a la derecha */
@supports selector(:has(*)) {
  .dash-table-container th:has(.column-header--sort) > div,
  .dash-table-container th:has(.sort) > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row-reverse !important;   /* título a la izq, flecha a la der */
    gap: 6px;
  }
}

/* ==== Estilo del botón del dropdown (DataTable) ==== */

.Select-menu-outer {
    display: block !important;
    z-index: 9999 !important;
}

/* Color de la flechita y borde del control */
#de-table .Select-control {
  /* border: 1px solid #6671f5 !important;  */
  /* border-radius: 4px !important; */
  transition: all .15s ease;
}

/* Cambia color de la flecha (caret) */
#de-table .Select-arrow-zone .Select-arrow {
  border-top-color: #6671f5 !important;      /* flechita azul */
}

/* Fondo y texto del menú */
#de-table .Select-menu-outer {
  background-color: #fff !important;
  color: #000 !important;                 
  font-family: inherit !important;
  border: 1px solid rgba(0,0,0,0.1);
  max-height: 280px !important;
  overflow-y: auto !important;
}

/* Dropdowns del editor siempre por encima de celdas/filas */
#de-table td .Select{
  position: relative;
  overflow: visible !important;
}

#de-table td .Select-control,
#de-table td .Select-menu-outer{
  overflow: visible !important;
}

/* Valor actual del dropdown: nunca traslapar, siempre elipsis dentro de su celda */
#de-table td.dropdown .Select-value,
#de-table td.dropdown .Select-placeholder,
#de-table td.dropdown .Select-value-label{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

#de-table td .Select.is-open{
  z-index: 40 !important;
}

#de-table td .Select.is-open .Select-menu-outer{
  position: fixed !important;
  top: -10000px !important;
  left: -10000px !important;
  bottom: auto !important;
  right: auto !important;
  min-width: 96px !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: 6000 !important;
}

/* Cada opción del menú */
#de-table .Select-option {
  color: #000 !important;                
  background-color: #fff !important;
}

/* Hover sobre el control (cuando el mouse entra) */
#de-table .Select-control:hover {
  border-color: #0029a8 !important;  
  /* box-shadow: 0 0 0 2px rgba(102,113,245,0.25); */
}

/* Hover sobre opción del menú */
#de-table .Select-option.is-focused {
  background-color: rgba(102,113,245,0.15) !important;
}

/* Opción seleccionada */
#de-table .Select-option.is-selected {
  background-color: rgba(102,113,245,0.25) !important;
  color: #000 !important;
}

/* Desactiva la "x" de clearable por si alguna columna no tiene clearable=False */
#de-table .Select-clear-zone {
  display: none !important;
}

/* ===== Wrap para dropdown de la columna Alignment ===== */
/* === Dropdown con texto largo (autoaltura manteniendo centrado) === */
#de-table td[data-dash-column="favorability"] .Select-control {
  min-height: 32px !important;
  height: auto !important;        /* Se expande según el texto */
  align-items: center !important; /* mantiene centrado verticalmente */
  flex-wrap: wrap !important;     /* permite salto de línea */
}

#de-table td[data-dash-column="favorability"] .Select-value,
#de-table td[data-dash-column="favorability"] .Select-value-label,
#de-table td[data-dash-column="favorability"] .Select-placeholder {
  white-space: normal !important; /* texto multilinea */
  line-height: 1.25 !important;   /* mejor legibilidad */
  height: auto !important;
  overflow: visible !important;
}

/* ===== Stakeholder Summary ===== */

/* KPIs (asegura letra) */
.kpi-card, .kpi-number, .kpi-label { font-family: inherit; }

.ss-wrap{
  display:grid;
  grid-template-columns: minmax(0, 23%) minmax(0, 75%);
  gap: 14px;
}
.ss-left, .ss-right{ min-width:0; display:flex; flex-direction:column; }
.ss-card{ border-radius:16px; padding:12px; border:1px solid rgba(0,0,0,0.06); }
.ss-left .ss-card-white:has(#ss-halo-chart){ min-width:0; overflow:hidden; }
#ss-halo-chart,
#ss-halo-chart .js-plotly-plot,
#ss-halo-chart .plot-container,
#ss-halo-chart .svg-container{
  width:100% !important;
  max-width:100% !important;
}
.ss-card-white{ background:#ffffff; box-shadow: rgba(0,0,0,0.04) 0 1px 2px ; font-size: var(--ss-card, 13px);}
.ss-card-light{ background:#f5f5f7; font-size: var(--ss-card, 13px);}
.ss-card-dark{ background:#111111; color:#fff; border-color: rgba(255,255,255,0.08); padding:16px; font-size: var(--ss-card, 13px);}
.ss-dark-title{ font-weight:600; font-size:14px; margin:0 0 8px 0; color:#fff;}
.ss-card-title{ font-weight:600; font-size:14px; margin:0 0 6px 0; color:#111;}
.ss-muted{ color:"black"; font-size:12px;}
.ss-h1{ font-weight:700; font-size:17px; color:#111; }
.ss-h2{ font-weight:400; font-size:13px; color:#111; opacity:.85; }
.ss-h3{ font-size:13px; color:#111; opacity:.9; }
.ss-link{ font-size:13px; color:#2a3f5f; }
.ss-profile-header{
  background: var(--brand-accent-soft, #E7F0FF) !important;
  border: 0 !important;
}
.ss-profile-header .ss-link{ color: var(--brand-accent, #0D6EFD); }
.ss-grid-2x2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.ss-pill{ 
  display:inline-block; 
  padding:8px 12px; 
  border-radius:999px; 
  font-size:11px; 
  font-weight: 400; 
}
.ss-pill-primary{
  background: var(--brand-accent, #0D6EFD);
  color: #ffffff;
}
.ss-pill-strong{
  background: var(--brand-accent-strong, #0A58CA);
  color: #ffffff;
}
.ss-pill-neutral{
  background: #E9ECEF;
  color: #111111;
}
/* Centro perfecto para la foto y tamaño compacto */
/* Contenedor de la foto en Summary */
.ss-photo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Botón PDF en esquina superior izquierda del bloque de la foto */
.ss-pdf-btn-summary {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 4px;
  font-size: 0.9rem;
  color: var(--brand-accent, #0D6EFD) !important;
  z-index: 2;
}

.ss-pdf-btn-summary:hover,
.ss-pdf-btn-summary:focus{
  color: var(--brand-accent-strong, #0A58CA) !important;
}

.ss-pdf-btn-summary .bi {
  font-size: 1.05rem;
}

/* El botón se mantiene estable; Dash muestra el pequeño indicador debajo
 * mientras la respuesta de dcc.Download está pendiente. */
.ss-pdf-export-control {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
}

.ss-pdf-export-control .ss-pdf-btn-summary {
  position: static;
}

.projects-pdf-export-control {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.polaris-pdf-inline-loader {
  position: absolute !important;
  top: calc(100% - 0.22rem);
  left: 50%;
  z-index: 3;
  pointer-events: none;
  transform: translateX(-50%) scale(0.58);
  transform-origin: top center;
  align-items: center;
  justify-content: center;
}

.ss-photo{
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: rgba(0,0,0,0.08) 0 2px 6px;
}
.ss-project-tags{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
}
.ss-project-tag{
  width:100%;
  display:block;
  padding:8px 12px;
  border-radius:999px;
  border:0 !important;
  background:var(--brand-accent-soft, #E7F0FF) !important;
  color:#111111 !important;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow: rgba(0,0,0,0.04) 0 1px 2px;
}
.ss-news-refresh.btn-link,
.ss-news-refresh.btn-link:hover,
.ss-news-refresh.btn-link:focus,
.ss-news-refresh.btn-link .bi{
  color: var(--brand-accent, #0D6EFD) !important;
}
/* Barra de redes en Summary */
.ss-socials{
  display:flex; 
  gap:8px; 
  align-items:center; 
  justify-content:flex-start;
  border: none;
  box-shadow: none;
}

/* Botoncitos minimalistas; puedes cambiar a circle si prefieres */
.ss-social{
  display:inline-grid; place-items:center;
  width:28px; height:28px;
  border-radius: 8px;
  background: #f1f3f5;
  color:#343a40;
  text-decoration:none;
  font-weight:600;              /* marcadito pero no enorme */
  font-size:12px;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.ss-social-icon {
  font-size: 1.1rem;   /* tamaño del icono */
  color: #374151;
  text-decoration: none;
}
/* .ss-social:hover{ transform: translateY(-1px); } */
.ss-social-icon:hover {
  color: #111827;
}

.dash-table-container .dropdown {
    position: static !important;
}

/* Data Editing: los dropdowns deben poder posicionar menú por encima de la tabla */
#de-table .dash-table-container .dropdown{
  position: relative !important;
}

/* Cards del Summary con scroll vertical responsivo (alto según viewport) */
/* 
  Responsive con viewport + límites razonables
  En pantallas muy chicas, nunca baja de min (ej. 140px).
  En pantallas normales, escala con el viewport (22vh, 26vh, etc.).
  En pantallas enormes, no crece infinito: se queda en max (ej. 320px). 
*/
.ss-scroll-y-1 {
  /* Bloques más grandes: Connections, Interests, etc. */
  max-height: clamp(160px, 20vh, 320px);
  overflow-y: auto;
}

.ss-scroll-y-2 {
  /* Bloques medianos: Education, Career path, News */
  max-height: clamp(140px, 16vh, 280px);
  overflow-y: auto;
}

.ss-scroll-y-3 {
  /* Bloques más compactos: texto corto o notas pequeñas */
  max-height: clamp(110px, 14vh, 220px);
  overflow-y: auto;
}

.ss-scroll-y-4 {
  /* Bloques muy compactos*/
  max-height: clamp(80px, 5vh, 150px);
  overflow-y: auto;
}

/* ===== Minutes ===== */

.compact-date {
    font-size: 13px !important;
    height: 22px !important;
    padding: 2px 4px !important;
}

.min-row-btn:hover {
  background-color: rgba(0, 0, 0, 0.04); /* gris muy sutil */
}

.min-del-btn {
  color: #0d6efd;              /* azul Bootstrap */
}

.min-del-btn:hover {
  background-color: #f1f3f5;   /* gris claro */
  color: #0b5ed7;              /* azul un poco más oscuro */
  transform: scale(1.2);       /* se agranda un poco */
}

.min-del-btn:active {
  transform: scale(1.1);       /* leve efecto de click */
}

/* Cambio de color en registro no seleccionado*/

/* Botón de fila: no toques color/fondo en foco */
.min-row-btn:focus,
.min-row-btn:focus-visible,
.min-row-btn:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Botón de borrar */
.min-del-btn:focus,
.min-del-btn:focus-visible,
.min-del-btn:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Item del listado: quita solo sombras al enfocarse,
   NO cambies color/fondo aquí */
.list-group-item:focus,
.list-group-item:focus-within,
.list-group-item:active {
  outline: none !important;
  box-shadow: none !important;
}

#infnet-path-allowed-toggle {
  text-decoration: none;
}

#infnet-path-allowed-toggle:hover {
  text-decoration: none;
}

/* Mantener compacto el control, sin crecer por los chips */
#infnet-path-allowed .Select-value {
  display: none;           /* Oculta cada chip seleccionado */
}

#infnet-path-allowed .Select-control {
  min-height: 32px;        /* Altura fija del control */
  max-height: 32px;
  overflow: hidden;        /* Por si algo intenta crecer */
}

/* Mantén el menú desplegable con scroll como ya lo tienes */
#infnet-path-allowed .Select-menu-outer {
  max-height: 220px;
  overflow-y: auto;
}

/* =========================
   Dashboard
========================= */
#dash-date-picker .DateInput_input {
  font-size: 14px;
  padding: 2px 4px;
  color:#000000;
}

#dash-date-picker .DateInput_input__focused {
  font-size: 14px;
}

/* =========================
   Projects
========================= */

/* Hace que el popup del calendario se pinte encima de cards/tables */
.SingleDatePicker_picker,
.DateRangePicker_picker {
  z-index: 3000 !important;
}

/* Evita que wrappers creen stacking context raro */
.SingleDatePicker,
.DatePickerSingle {
  position: relative;
  z-index: 2000;
}

.DateInput_input {
  font-size: 12px !important;
  padding: 4px 6px !important;
  height: 28px !important;
  line-height: 28px !important;
}

/* Bootstrap modal arriba de cualquier datepicker */
.modal {
  z-index: 10000 !important;
}
.modal-backdrop {
  z-index: 9990 !important;
}

.ss-news-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ss-news-title{
  font-weight: 700;
  font-size: 14px;
  color: rgba(0,0,0,0.85);
}

.ss-news-actions{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
}

.ss-news-icon-btn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  border-radius: 10px;
  color: rgba(0,0,0,0.72) !important;
}

#ss-news-modal .modal-dialog{
  max-width: min(1080px, calc(100vw - 40px)) !important;
  margin: 1.5rem auto !important;
}

#ss-news-modal .modal-content{
  border: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

#ss-news-modal .modal-header{
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: 1.1rem 1.25rem 0.9rem !important;
}

.ss-news-modal-heading{
  min-width: 0;
}

.ss-news-modal-status{
  display: block;
  margin-top: 0.2rem;
}

.ss-news-modal-refresh{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-self: flex-start;
}

#ss-news-modal .modal-body{
  padding: 0.95rem 1.25rem 1rem !important;
  max-height: min(72vh, 760px);
}

.ss-news-modal-content{
  min-height: 120px;
}

.ss-news-loader-shell{
  display: block;
  min-width: min(480px, calc(100vw - 56px));
  padding: 1rem 1.05rem;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247,248,250,0.98) 100%);
  box-shadow: 0 14px 34px rgba(15,23,42,0.10);
}

.ss-news-loader-text{
  min-width: 0;
}

.ss-news-loader-title{
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(15,23,42,0.92);
}

.ss-news-loader-copy{
  margin-top: 0.18rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(51,65,85,0.86);
}

.ss-news-loader-steps{
  margin: 0.55rem 0 0;
  padding-left: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(71,85,105,0.9);
  list-style: none;
}

.ss-news-loader-step{
  position: relative;
  padding-left: 1.4rem;
}

.ss-news-loader-step::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: rgba(148,163,184,0.9);
}

.ss-news-loader-step.is-active{
  color: rgba(15,23,42,0.94);
  font-weight: 600;
}

.ss-news-loader-step.is-active::before{
  background: rgba(15,23,42,0.94);
}

.ss-news-loader-step.is-done{
  color: rgba(22,101,52,0.92);
  font-weight: 500;
}

.ss-news-loader-step.is-done::before{
  content: "✓";
  top: 0.02rem;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: rgba(22,101,52,0.98);
  font-size: 0.88rem;
  font-weight: 700;
}

.ss-news-loader-step.is-upcoming{
  color: rgba(100,116,139,0.82);
}

.ss-news-loader-steps li + li{
  margin-top: 0.12rem;
}

.ss-news-markdown > ul > li:has(ul),
.ss-news-markdown > ul > li:has(ol),
.ss-news-markdown > ol > li:has(ul),
.ss-news-markdown > ol > li:has(ol){
  list-style-type: none;
}

.ss-news-markdown > ul > li:has(ul) > p:first-child,
.ss-news-markdown > ul > li:has(ol) > p:first-child,
.ss-news-markdown > ol > li:has(ul) > p:first-child,
.ss-news-markdown > ol > li:has(ol) > p:first-child{
  margin-left: 0.1rem;
  margin-bottom: 0.2rem;
}

#ss-news-modal .modal-footer{
  padding: 0.85rem 1.25rem 1.2rem !important;
  justify-content: flex-end !important;
}

@media (max-width: 430px), (max-width: 932px) and (max-height: 460px){
  #ss-news-modal .modal-dialog{
    margin: 0.35rem auto !important;
    max-width: calc(100vw - 10px) !important;
    height: calc(100dvh - 12px) !important;
  }

  #ss-news-modal .modal-content{
    max-height: calc(100dvh - 12px) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #ss-news-modal .modal-body{
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
  }

  #ss-news-modal .modal-footer{
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    background: #fff !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    gap: 0.45rem !important;
    flex-wrap: wrap !important;
  }

  #ss-news-modal .modal-footer .btn{
    flex: 1 1 auto !important;
    min-width: 120px !important;
  }

  .ss-news-header{
    align-items: flex-start;
    gap: 0.5rem;
  }

  .ss-news-actions{
    gap: 0.25rem;
  }

  #ss-news-modal .modal-header{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .ss-news-modal-refresh{
    align-self: flex-start;
    padding-left: 0 !important;
  }
}

#de-wrapper td[data-dash-column="photo_md"] {
  padding: 0 !important;
  vertical-align: middle !important;
}

#de-wrapper td[data-dash-column="photo_md"] .dash-cell-value {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  min-height: 40px;
  line-height: 1 !important;
}

#de-wrapper td[data-dash-column="photo_md"] p {
  margin: 0 !important;
}

#de-wrapper td[data-dash-column="photo_md"] img {
  display: block;
}

#de-wrapper td[data-dash-column="photo_md"] .de-photo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 40px;
  margin: 0;
  line-height: 1;
}

/* =========================
   9) Responsive App Shell
   ========================= */
:root{
  --bp-tablet: 1024px;
  --bp-mobile: 768px;
  --sidebar-width-tablet: 52px;
  --sidebar-width-mobile: 44px;
  --sidebar-width-responsive-expanded: 200px;
}

.app-topbar{
  gap: 10px;
  min-width: 0;
  justify-content: flex-start !important;
  flex-wrap: wrap;
  height: auto !important;
  min-height: 56px;
  row-gap: 6px;
}

.auth-topbar-hidden{
  display: none !important;
}

.app-topbar.auth-topbar-hidden{
  display: none !important;
}

.app-topbar,
#main-grid,
#page-right,
.app-people-pane,
.app-page-loader-parent,
.app-page-loader,
.app-page-loader-body,
#app-page-container{
  transition: opacity 0.18s ease, transform 0.18s ease;
}

#page-content{
  position: relative;
}

#app-shell{
  position: relative;
  min-height: 100vh;
  --app-toast-left: 16px;
}

#app-shell.auth-shell,
#app-shell.support-shell{
  --app-toast-left: 16px;
}

#app-shell:not(.auth-shell):not(.support-shell):has(#sidebar.sidebar-collapsed){
  --app-toast-left: calc(var(--sidebar-width-collapsed) + 20px);
}

#app-shell:not(.auth-shell):not(.support-shell):has(#sidebar.sidebar-expanded){
  --app-toast-left: calc(var(--sidebar-width-expanded) + 20px);
}

.app-page-loader-parent{
  height: 100%;
  min-height: 0;
}

.app-page-loader,
.app-page-loader-body{
  height: 100%;
  min-height: 0;
}

#page-right{
  position: relative;
  isolation: isolate;
}

.app-route-loader-overlay{
  position: absolute;
  inset: 0;
  z-index: 18;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.app-empty-workspace-overlay{
  position: absolute;
  inset: 0;
  z-index: 14;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(2px);
}

.app-startup-loader-overlay{
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(4px);
}

#app-shell.app-startup-loading .app-startup-loader-overlay,
#app-shell.app-workspace-loading .app-startup-loader-overlay,
#app-shell.app-workspace-pending .app-startup-loader-overlay{
  display: flex;
}

#app-shell.app-startup-loading #sidebar,
#app-shell.app-startup-loading #page-content,
#app-shell.app-startup-loading #sidebar-toggle-wrap,
#app-shell.app-workspace-loading #sidebar,
#app-shell.app-workspace-loading #page-content,
#app-shell.app-workspace-loading #sidebar-toggle-wrap,
#app-shell.app-workspace-pending #sidebar,
#app-shell.app-workspace-pending #page-content,
#app-shell.app-workspace-pending #sidebar-toggle-wrap{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#app-shell.app-startup-loading #sidebar,
#app-shell.app-startup-loading #page-content,
#app-shell.app-startup-loading #sidebar-toggle-wrap,
#app-shell.app-startup-loading .menu-label,
#app-shell.app-startup-loading .nav-link,
#app-shell.app-workspace-loading #sidebar,
#app-shell.app-workspace-loading #page-content,
#app-shell.app-workspace-loading #sidebar-toggle-wrap,
#app-shell.app-workspace-loading .menu-label,
#app-shell.app-workspace-loading .nav-link,
#app-shell.app-workspace-pending #sidebar,
#app-shell.app-workspace-pending #page-content,
#app-shell.app-workspace-pending #sidebar-toggle-wrap,
#app-shell.app-workspace-pending .menu-label,
#app-shell.app-workspace-pending .nav-link{
  transition: none !important;
}

.app-shell-loader{
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(102, 113, 245, 0.12);
  box-shadow: rgba(31, 41, 55, 0.12) 0 16px 48px;
  text-align: center;
}

.app-shell-loader-spinner{
  width: 34px;
  height: 34px;
  border: 3px solid rgba(102, 113, 245, 0.18);
  border-top-color: #6671f5;
  border-radius: 50%;
  animation: app-route-spinner 0.78s linear infinite;
}

.app-shell-loader-text{
  font-size: 0.95rem;
  font-weight: 600;
  color: #344054;
  letter-spacing: 0.01em;
  text-align: center;
}

.polaris-resume-recovery{
  position: fixed;
  z-index: 5100;
  right: 24px;
  bottom: 24px;
  max-width: min(420px, calc(100vw - 40px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(36, 59, 102, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.2);
  color: #243b66;
}

.polaris-resume-recovery-message{
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.35;
  font-weight: 600;
}

.polaris-resume-recovery-action{
  flex: 0 0 auto;
  border: 0;
  border-radius: 9px;
  padding: 9px 13px;
  background: #1769ff;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.polaris-resume-recovery-action:hover,
.polaris-resume-recovery-action:focus-visible{
  background: #0d55d9;
}

.polaris-connectivity-notice{
  position:fixed;
  z-index:5200;
  bottom:24px;
  right:24px;
  max-width:min(460px, calc(100vw - 40px));
  padding:16px 18px;
  border:1px solid rgba(146, 64, 14, .28);
  border-radius:14px;
  background:rgba(255, 251, 235, .98);
  box-shadow:0 16px 42px rgba(15, 23, 42, .2);
  color:#78350f;
}

.polaris-connectivity-notice--online{
  border-color:rgba(21, 128, 61, .25);
  background:rgba(240, 253, 244, .98);
  color:#166534;
}

.polaris-connectivity-notice-title{
  display:block;
  font-size:.98rem;
  line-height:1.3;
}

.polaris-connectivity-notice-message{
  margin:5px 0 0;
  font-size:.92rem;
  line-height:1.42;
}

.polaris-connectivity-notice-action{
  margin-top:12px;
  border:1px solid currentColor;
  border-radius:9px;
  padding:7px 11px;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

.polaris-connectivity-notice-action:hover,
.polaris-connectivity-notice-action:focus-visible{
  background:rgba(22, 101, 52, .1);
}

@media (max-width: 640px){
  .polaris-resume-recovery{
    right: 14px;
    bottom: 14px;
    left: 14px;
    max-width: none;
    align-items: stretch;
    flex-direction: column;
  }

  .polaris-resume-recovery-action{
    width: 100%;
  }

  .polaris-connectivity-notice{
    bottom:14px;
    right:14px;
    left:14px;
    max-width:none;
  }
}

.cfg-section-loader{
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._dash-loading{
  display: none !important;
}

._dash-loading::before{
  content: none;
}

._dash-loading::after{
  content: none;
}

body.route-transitioning .app-page-loader-parent{
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

body.route-transitioning .app-route-loader-overlay{
  display: flex;
}

body.pp-awaiting-ready #main-grid.app-main-grid.with-people{
  /* Keep the final grid geometry while the people panel hydrates. Collapsing
     the column makes Plotly/Cytoscape measure against a temporary full-width
     pane, then appear shrunken after the people panel returns. */
}

body.pp-awaiting-ready #pp-container{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-8px);
}

body.data-editor-loading .app-route-loader-overlay{
  display: flex;
}

body.dashboard-loading .app-route-loader-overlay{
  display: flex;
}

body.summary-loading .app-route-loader-overlay{
  display: flex;
}

body.infnet-loading .app-route-loader-overlay{
  display: flex;
}

body.minutes-loading .app-route-loader-overlay{
  display: flex;
}

body.projects-loading .app-route-loader-overlay{
  display: flex;
}

body.data-editor-loading .app-page-loader-parent{
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

body.dashboard-loading .app-page-loader-parent{
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

body.summary-loading .app-page-loader-parent{
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

body.infnet-loading .app-page-loader-parent{
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

body.minutes-loading .app-page-loader-parent{
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

body.projects-loading .app-page-loader-parent{
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

/* A project switch is atomic: after choosing a project the selector cannot
   queue another switch until its complete editor is ready. */
body.projects-loading .project-bar .project-dd-wrap{
  pointer-events: none;
  user-select: none;
  opacity: 0.68;
}

.control-upload-dropzone{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 144px;
  padding: 18px 20px;
  border: 1.5px dashed rgba(102, 113, 245, 0.32);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(247, 248, 255, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
  text-align: center;
  cursor: pointer;
}

.control-upload-icon{
  font-size: 1.6rem;
  color: #3b5bfd;
}

.control-upload-title{
  font-size: 1rem;
  font-weight: 700;
  color: #24325b;
}

.control-upload-copy{
  max-width: 480px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #667085;
}

.control-upload-summary{
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(247, 248, 255, 0.96);
  border: 1px solid rgba(102, 113, 245, 0.12);
}

@keyframes app-route-spinner{
  to{
    transform: rotate(360deg);
  }
}

@keyframes de-save-progress-slide{
  0%{
    transform: translateX(-120%);
  }
  50%{
    transform: translateX(145%);
  }
  100%{
    transform: translateX(145%);
  }
}

body.app-signout-pending #app-shell{
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.app-logo-wrap{
  min-width: 0;
}

.app-topbar > *{
  min-width: 0;
}

.app-logo{
  height: 72px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.app-project-wrap,
.app-country-wrap,
.app-time-wrap,
.app-avatar-wrap{
  min-width: 0;
}

.app-project-wrap{
  flex: 0 1 clamp(260px, 30vw, 460px);
  max-width: min(100%, 460px);
}

.app-country-wrap{
  flex: 0 1 clamp(170px, 18vw, 280px);
  max-width: min(100%, 280px);
}

.app-country-wrap .country-bar{
  gap: 8px;
}

.app-country-wrap .country-dd-wrap{
  flex: 1 1 clamp(110px, 12vw, 190px);
  max-width: min(100%, 190px);
}

.app-time-wrap{
  flex: 0 1 auto !important;
  padding: 0 !important;
}

.app-topbar,
.app-time-wrap{
  overflow: visible;
}

.app-avatar-wrap{
  margin-left: auto;
  padding-right: 6px;
}

.app-user-toggle{
  border: 1px solid var(--shell-sidebar-text) !important;
  border-radius: 999px !important;
  background: var(--shell-sidebar-bg) !important;
  color: var(--shell-sidebar-text) !important;
  padding: 4px 8px !important;
}

.app-user-toggle:hover,
.app-user-toggle:focus{
  background: var(--shell-sidebar-bg) !important;
  color: var(--shell-sidebar-text) !important;
}

.app-user-toggle .app-avatar-name,
.app-user-toggle .app-avatar-space{
  color: var(--shell-sidebar-text) !important;
}

.app-user-toggle-inner{
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 230px;
}

.app-avatar-text{
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.1;
}

.app-avatar-img{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--avatar-fallback-bg);
  flex: 0 0 auto;
}

.app-avatar-name{
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 600;
}

.app-avatar-space{
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.70rem;
  font-weight: 500;
  color: var(--muted);
}

.app-user-dropdown .dropdown-menu{
  min-width: 250px;
  border-radius: 10px;
  background: var(--user-menu-bg);
  border: 1px solid var(--user-menu-border);
  box-shadow: rgba(0,0,0,0.14) 0 8px 20px;
}

.app-user-dropdown .dropdown-item{
  color: var(--text);
}

.app-user-dropdown .dropdown-item:hover,
.app-user-dropdown .dropdown-item:focus{
  background: var(--user-menu-hover);
  color: var(--text);
}

.app-user-dropdown .dropdown-item.text-danger{
  color: #dc3545 !important;
}

.app-user-menu-header-wrap{
  line-height: 1.25;
}

.app-user-menu-header{
  pointer-events: none;
}

.app-user-menu-name{
  font-weight: 700;
  font-size: 0.9rem;
}

.app-user-menu-email{
  font-size: 0.78rem;
  color: var(--muted);
}

.app-user-menu-role{
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.project-bar{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.project-bar .project-bar-label{
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

.project-bar .project-dd-wrap{
  flex: 1 1 clamp(220px, 26vw, 420px);
  min-width: 0;
  max-width: min(100%, 420px);
}

.project-bar .project-dd{
  width: 100% !important;
  min-width: 0;
}

.project-bar .project-dd .Select-control{
  height: 46px;
  min-height: 46px;
  border-radius: 14px;
  padding-left: 10px;
  padding-right: 16px;
}

.project-bar .project-dd .Select-value,
.project-bar .project-dd .Select-placeholder{
  padding-right: 40px;
  line-height: 44px;
}

.project-bar .project-dd .Select-placeholder,
.project-bar .project-dd .Select-value-label{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-bar .project-dd .Select-input{
  height: 44px;
  vertical-align: middle;
  padding-right: 40px;
}

.project-bar .project-dd .Select-arrow-zone,
.project-bar .project-dd .Select-clear-zone{
  width: 34px;
  vertical-align: middle;
}

.projects-header-row{
  flex-wrap: nowrap;
  align-items: center;
}

.projects-header-actions{
  margin-left: auto;
}

.timebar{
  flex-wrap: nowrap !important;
  white-space: nowrap;
  overflow: visible;
  align-items: center;
}

.timebar .timebar-label{
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.timebar.hidden{
  display: none !important;
}

.timebar .timebar-input{
  height: 36px;
}

.timebar .timebar-calendar{
  align-self: center;
}

#de-wrapper.de-page{
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  container-type: inline-size;
  container-name: data-editor;
}

#de-wrapper .de-table-loading-parent,
#de-wrapper .de-table-loading{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#de-wrapper .de-topbar{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

#de-wrapper .de-topbar-actions{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

#de-wrapper .de-query-wrap{
  min-width: 0;
  max-width: none;
  width: 100%;
}

#de-wrapper .de-save-progress-wrap{
  margin-bottom: 8px;
}

#de-wrapper .de-save-progress-card{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(191, 144, 0, 0.28);
  background: linear-gradient(135deg, rgba(255, 247, 224, 0.98), rgba(255, 251, 240, 0.98));
  box-shadow: 0 8px 20px rgba(145, 98, 0, 0.08);
}

#de-wrapper .de-save-progress-top{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#de-wrapper .de-save-progress-heading{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#de-wrapper .de-save-progress-title{
  font-weight: 700;
  color: #6f4e00;
  line-height: 1.2;
}

#de-wrapper .de-save-progress-copy{
  font-size: 0.88rem;
  color: rgba(72, 52, 6, 0.88);
  line-height: 1.35;
}

#de-wrapper .de-save-progress-bar{
  position: relative;
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: rgba(191, 144, 0, 0.14);
}

#de-wrapper .de-save-progress-bar::after{
  content: "";
  position: absolute;
  inset: 0;
  width: 38%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d6a21d, #f0c85d);
  animation: de-save-progress-slide 1.2s ease-in-out infinite;
}

#de-wrapper .de-save-progress-steps{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#de-wrapper .de-save-progress-step{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #7a5800;
  font-size: 0.8rem;
  font-weight: 600;
}

#de-wrapper .de-save-progress-step::before{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d6a21d;
  box-shadow: 0 0 0 3px rgba(214, 162, 29, 0.15);
}

#de-wrapper .de-topbar-action{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

/* The copy modal keeps its localized label while its server-side transaction
   runs; this spinner also prevents a second click from looking actionable. */
#de-copy-confirm.de-copy-confirm-btn.is-loading{
  cursor: progress;
  pointer-events: none;
}

#de-copy-confirm.de-copy-confirm-btn.is-loading::before{
  content: "";
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.45rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.1rem;
  animation: de-copy-confirm-spin 0.75s linear infinite;
}

@keyframes de-copy-confirm-spin{
  to{ transform: rotate(360deg); }
}

/* The editor's available width—not the browser window—controls this layout.
   This prevents a sidebar or narrow content pane from forcing six labels to
   overlap even when the viewport itself is wide. */
@container data-editor (min-width: 1500px){
  #de-wrapper .de-topbar{
    grid-template-columns: minmax(220px, 1.1fr) minmax(0, 1.9fr);
  }

  #de-wrapper .de-topbar-actions{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@container data-editor (max-width: 430px){
  #de-wrapper .de-topbar-actions{
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Data Editing actions are part of the workspace visual system, not Bootstrap's
   fixed success-color family. */
#de-wrapper #de-btn-add-actor{
  --bs-btn-bg: var(--brand-accent, var(--accent));
  --bs-btn-border-color: var(--brand-accent, var(--accent));
  --bs-btn-hover-bg: var(--brand-accent-strong, var(--accent));
  --bs-btn-hover-border-color: var(--brand-accent-strong, var(--accent));
  --bs-btn-active-bg: var(--brand-accent-strong, var(--accent));
  --bs-btn-active-border-color: var(--brand-accent-strong, var(--accent));
  background-color: var(--brand-accent, var(--accent)) !important;
  border-color: var(--brand-accent, var(--accent)) !important;
  color: #fff !important;
}

#de-wrapper #de-btn-add-actor:hover,
#de-wrapper #de-btn-add-actor:focus,
#de-wrapper #de-btn-add-actor:active{
  background-color: var(--brand-accent-strong, var(--accent)) !important;
  border-color: var(--brand-accent-strong, var(--accent)) !important;
  color: #fff !important;
}

#de-wrapper .de-social-editor-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#de-wrapper .de-social-row{
  display: grid;
  grid-template-columns: 34px minmax(150px, 185px) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

#de-wrapper .de-social-icon-badge{
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,0.12);
  color: #4f5b68;
  background: #f8f9fa;
}

#de-wrapper .de-social-icon-badge .bi{
  font-size: 15px;
}

#de-wrapper .de-social-remove-btn{
  min-width: 34px;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

#de-wrapper .de-social-network-dd .Select-control{
  min-height: 34px !important;
}

#de-wrapper .de-social-network-dd .Select-value,
#de-wrapper .de-social-network-dd .Select-placeholder,
#de-wrapper .de-social-network-dd .Select-value-label{
  line-height: 32px !important;
}

#de-wrapper .de-ag-grid-hide-empty{
  position: relative;
}

#de-wrapper .de-ag-grid-hide-empty .ag-root-wrapper{
  opacity: 0 !important;
  pointer-events: none !important;
}

#de-wrapper .de-ag-grid-hide-empty .ag-overlay-no-rows-wrapper,
#de-wrapper .de-ag-grid-hide-empty .ag-overlay-no-rows-center,
#de-wrapper .de-ag-grid-hide-empty .ag-paging-panel{
  display: none !important;
}

#de-table .dash-table-container{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}

#de-table .dash-spreadsheet-container{
  flex: 1 1 auto;
  height: 100% !important;
  min-height: var(--de-table-min-height, 340px) !important;
  max-height: var(--de-table-max-height, 100%) !important;
}

#de-table .previous-next-container{
  position: sticky;
  bottom: 0;
  z-index: 8;
  background: #fff;
  padding-top: 6px;
}

body.data-editor-paging-warmup #de-table .ag-paging-panel,
body.data-editor-paging-warmup #de-table .previous-next-container{
  opacity: 0 !important;
  pointer-events: none !important;
}

.dash-search-layout{
  display: flex;
  gap: 8px;
  height: 100%;
  min-height: 0;
}

.infnet-page .infnet-main-pane,
.infnet-page .infnet-main-pane .card,
.infnet-page .infnet-main-pane .card-body{
  height: 100%;
  min-height: 0;
}

.infnet-page .infnet-side-pane,
.infnet-page .infnet-side-pane .card,
.infnet-page .infnet-side-pane .card-body{
  height: 100%;
  min-height: 0;
}

.infnet-page .infnet-side-pane .card-body{
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.infnet-page #infnet-tabs-wrapper{
  height: 100%;
  min-height: 0;
}

.infnet-page #infnet-tabs-wrapper{
  display: flex;
  flex-direction: column;
}

.infnet-page #infnet-tabs{
  flex: 0 0 auto;
}

.infnet-page #infnet-tabs-wrapper.infnet-tabs-groups-only .nav-tabs{
  display: none;
}

.infnet-page #infnet-tabs-wrapper.infnet-tabs-groups-only > .tab-content{
  overflow: visible;
}

.infnet-page #infnet-tabs-wrapper > .tab-content{
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}

.infnet-page #infnet-tabs-wrapper > .tab-content > .tab-pane{
  height: 100%;
  min-height: 0;
}

.infnet-page #infnet-tabs-wrapper > .tab-content > .tab-pane.active{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.infnet-page #infnet-path-view{
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.infnet-page #infnet-compare-view{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.infnet-page #infnet-compare-table{
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.infnet-page .infnet-name-stack{
  max-width: 100%;
}

.infnet-page .infnet-name-main,
.infnet-page .infnet-name-sub{
  word-break: break-word;
  overflow-wrap: anywhere;
}

.infnet-page .infnet-name-main{
  font-size: 1.02rem;
  line-height: 1.22 !important;
}

.infnet-page .infnet-grouping-summary{
  min-height: 24px;
}

.infnet-page #infnet-grouping-arrange.btn-outline-primary:hover,
.infnet-page #infnet-grouping-arrange.btn-outline-primary:focus,
.infnet-page #infnet-grouping-arrange.btn-outline-primary:active{
  color: #fff !important;
}

.infnet-page .infnet-name-sub{
  font-size: 0.96rem;
  line-height: 1.24 !important;
}

.infnet-page .infnet-compare-row{
  font-size: 0.95rem;
  line-height: 1.3;
  align-items: start;
  column-gap: 12px;
}

.infnet-page .infnet-compare-header-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 12px;
}

.infnet-page .infnet-compare-person{
  width: 100%;
  min-width: 0;
  align-items: center;
}

.infnet-page .infnet-compare-person .infnet-name-stack{
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.infnet-page .infnet-compare-row-stacked{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 8px;
}

.infnet-page .infnet-compare-values{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}

.infnet-page .infnet-compare-label{
  white-space: normal;
  padding-right: 0;
  text-align: left;
}

.infnet-page .infnet-compare-cell{
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  padding-left: 0;
  text-align: left;
}

.infnet-page .infnet-compare-scroll{
  padding-bottom: 24px;
}

.infnet-page .infnet-graph-wrap{
  min-height: clamp(300px, 48vh, 680px);
  overflow: hidden;
}

.infnet-controls-row{
  display: flex !important;
  flex-wrap: nowrap;
  align-items: flex-start !important;
  align-content: flex-start;
  justify-content: flex-start;
  gap: clamp(0.9rem, 1.8vw, 1.35rem) !important;
  width: 100%;
}

.infnet-controls-stack{
  display: flex;
  flex: 0 1 19rem;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 12.5rem;
  max-width: 19rem;
}

.infnet-controls-side{
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(0.75rem, 1.3vw, 1rem);
  min-width: 0;
}

.infnet-page .infnet-control-linkmode{
  min-width: 0;
  width: clamp(12.5rem, 16vw, 15.75rem);
  max-width: 15.75rem;
  flex: 0 1 15.75rem;
}

.infnet-page .infnet-control-refresh{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.38rem;
  min-width: 0;
  width: clamp(12.25rem, 14vw, 14rem);
  max-width: 14rem;
  flex: 0 1 14rem;
}

.infnet-page .infnet-control-refresh .text-muted{
  font-size: 0.9rem !important;
  line-height: 1.1;
  white-space: nowrap;
}

.infnet-controls-actions{
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-left: auto;
}

.infnet-page .infnet-control-label-row{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1rem;
}

.infnet-page .infnet-control-help{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  line-height: 1;
  cursor: pointer;
}

.infnet-page .infnet-control-refresh #infnet-ri-full-refresh-trigger{
  width: 100%;
}

.infnet-page .infnet-control-refresh #infnet-ri-full-refresh-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  white-space: normal;
  line-height: 1.15;
  text-align: center;
}

/* Keep desktop network controls compact even when the shell sidebar is open. */
.infnet-controls-row{
  container-type: inline-size;
  flex-wrap: nowrap;
  gap: 0.55rem !important;
}

.infnet-controls-side{
  flex-wrap: nowrap;
  gap: 0.55rem;
}

.infnet-page .infnet-control-linkmode{
  flex: 0 1 13.25rem;
  width: 13.25rem;
  min-width: 12rem;
  max-width: 13.25rem;
}

.infnet-page .infnet-control-linkmode .Select-menu-outer{
  min-width: 100%;
}

.infnet-page .infnet-control-linkmode .VirtualizedSelectOption,
.infnet-page .infnet-control-linkmode .VirtualizedSelectFocusedOption{
  white-space: nowrap;
}

.infnet-page .infnet-control-refresh{
  flex: 0 1 10.25rem;
  width: 10.25rem;
  min-width: 9.5rem;
  max-width: 10.25rem;
}

.infnet-controls-actions{
  flex: 0 0 8.75rem;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  margin-left: auto;
}

.infnet-controls-actions .infnet-guide-trigger{
  order: 1;
}

.infnet-controls-actions #infnet-ri-mobile-status-wrap{
  order: 2;
  width: 100%;
}

.infnet-controls-actions .btn{
  width: 100%;
  min-height: 32px;
  padding: 0.35rem 0.5rem;
  font-size: 0.78rem;
  line-height: 1.05;
  white-space: nowrap;
}

.infnet-page .infnet-control-linkmode .Select-control{
  min-height: 34px;
}

.infnet-page .infnet-control-linkmode .Select-placeholder,
.infnet-page .infnet-control-linkmode .Select-value,
.infnet-page .infnet-control-linkmode .Select-input{
  line-height: 32px;
}

.infnet-page .infnet-control-linkmode .Select-value-label,
.infnet-page .infnet-control-linkmode .Select-placeholder{
  font-size: 0.84rem;
}

@container (max-width: 48rem){
  .infnet-controls-row{
    flex-wrap: wrap;
  }

  .infnet-controls-stack{
    flex: 0 0 100%;
    max-width: 16rem;
  }

  .infnet-controls-side{
    flex: 0 0 100%;
  }
}

@container (max-width: 34rem){
  .infnet-controls-side{
    flex-wrap: wrap;
  }

  .infnet-page .infnet-control-linkmode,
  .infnet-page .infnet-control-refresh{
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .infnet-controls-actions{
    width: 100%;
    flex-basis: 100%;
    flex-direction: row;
  }

  .infnet-controls-actions > *{
    flex: 1 1 0;
  }
}

.infnet-page .infnet-control-nodes,
.infnet-page .infnet-control-maxdeg{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.38rem;
  margin-bottom: 0;
  width: 100%;
}

.infnet-page .infnet-slider-label{
  margin: 0;
  line-height: 1.12;
  display: flex;
  align-items: center;
  white-space: nowrap;
  text-align: left;
}

.infnet-page .infnet-slider-control{
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
  max-width: none;
  min-height: 14px;
  padding-top: 0;
}

.infnet-page .infnet-slider-input{
  width: 100%;
  min-width: 0;
  height: 14px !important;
  min-height: 14px !important;
  padding: 0 !important;
}

.infnet-page .infnet-slider-control > div,
.infnet-page .infnet-slider-input > div{
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 14px;
  min-width: 0;
}

.infnet-page .infnet-slider-control .rc-slider,
.infnet-page .infnet-slider-input .rc-slider{
  width: 100%;
  min-width: 0;
  height: 14px;
  margin: 0 !important;
  padding-top: 0;
}

/* Network controls inherit the active tenant palette instead of Dash's blue. */
.infnet-page .infnet-slider-input .rc-slider-rail{
  height: 6px;
  background-color: color-mix(in srgb, #111 18%, transparent) !important;
}

.infnet-page .infnet-slider-input .rc-slider-track{
  height: 6px;
  background-color: var(--brand-accent-strong, #0A58CA) !important;
}

.infnet-page .infnet-slider-input .rc-slider-handle{
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border: 2px solid var(--brand-accent-strong, #0A58CA) !important;
  background-color: #fff !important;
  box-shadow: 0 1px 3px color-mix(in srgb, #111 24%, transparent);
}

.infnet-page .infnet-slider-input .rc-slider-handle:hover,
.infnet-page .infnet-slider-input .rc-slider-handle:focus,
.infnet-page .infnet-slider-input .rc-slider-handle:active{
  border-color: var(--brand-accent, #0D6EFD) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent, #0D6EFD) 18%, transparent) !important;
}

.infnet-page .infnet-guide-trigger{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: 0;
  min-height: 40px;
  padding-inline: 0.95rem;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid rgba(13, 110, 253, 0.18);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.12);
  align-self: start;
  margin-top: 0;
}

.infnet-page .infnet-ri-mobile-status-trigger{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 40px;
  padding-inline: 0.85rem;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid rgba(13, 110, 253, 0.18);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.12);
}

.infnet-page .infnet-ri-mobile-status-trigger:hover,
.infnet-page .infnet-ri-mobile-status-trigger:focus{
  background: #ffffff;
}

.infnet-page .infnet-guide-trigger:hover,
.infnet-page .infnet-guide-trigger:focus{
  background: #ffffff;
}

.popover.infnet-guide-popover{
  z-index: 11020 !important;
  max-width: min(420px, calc(100vw - 24px));
  border: 1px solid rgba(13, 110, 253, 0.12);
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.16);
}

.popover.infnet-guide-popover .popover-header{
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  padding: 0.75rem 0.95rem;
  font-weight: 700;
}

.popover.infnet-guide-popover .popover-body{
  padding: 0.9rem 0.95rem 0.95rem;
}

.infnet-guide-close{
  color: #5b667a !important;
  text-decoration: none !important;
  padding: 0 !important;
  line-height: 1;
}

.infnet-guide-panel{
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.infnet-guide-kicker{
  font-size: 0.72rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5b667a;
  font-weight: 700;
}

.infnet-guide-title{
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 700;
  color: #162033;
}

.infnet-guide-intro,
.infnet-guide-copy,
.infnet-guide-item-copy,
.infnet-guide-footnote{
  font-size: 0.84rem;
  line-height: 1.35;
  color: #52607a;
}

.infnet-guide-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
}

.infnet-guide-section{
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 0.1rem;
}

.infnet-guide-section-title{
  font-size: 0.88rem;
  line-height: 1.2;
  font-weight: 700;
  color: #1f2a44;
}

.infnet-guide-list{
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.infnet-guide-list-2col{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.9rem;
  row-gap: 0.55rem;
}

.infnet-guide-list-2col .infnet-guide-item{
  gap: 0.5rem;
}

.infnet-guide-list-2col .infnet-guide-marker{
  min-width: 24px;
}

.infnet-guide-list-2col .infnet-guide-item-label{
  line-height: 1.1;
}

.infnet-guide-item{
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.infnet-guide-marker{
  flex: 0 0 auto;
  min-width: 38px;
  display: flex;
  justify-content: center;
  padding-top: 2px;
}

.infnet-guide-dot{
  display: inline-block;
  width: 12px;
  height: 12px;
  min-width: 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(31, 42, 68, 0.08);
}

.infnet-guide-line{
  display: inline-block;
  width: 28px;
  height: 4px;
  border-radius: 999px;
}

.infnet-guide-symbol{
  font-size: 0.8rem;
  line-height: 1.1;
  font-weight: 700;
  color: #1f2a44;
  letter-spacing: 0.01em;
}

.infnet-guide-item-label{
  font-size: 0.84rem;
  line-height: 1.2;
  font-weight: 700;
  color: #1f2a44;
}

@media (max-width: 1220px){
  .infnet-controls-row{
    gap: 0.75rem !important;
  }

  .infnet-controls-stack,
  .infnet-controls-side,
  .infnet-page .infnet-control-linkmode,
  .infnet-page .infnet-control-refresh{
    min-width: 0;
  }

  .infnet-controls-actions{
    gap: 0.6rem;
  }

  .infnet-page .infnet-guide-trigger{
    align-self: flex-start;
    margin-top: 0;
  }

  .infnet-page .infnet-control-nodes,
  .infnet-page .infnet-control-maxdeg{
    gap: 0.26rem;
  }
}

@media (max-width: 920px){
  .infnet-controls-row{
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .infnet-controls-stack,
  .infnet-controls-side,
  .infnet-page .infnet-control-linkmode,
  .infnet-page .infnet-control-refresh{
    width: 100%;
    max-width: none;
  }

  .infnet-controls-side{
    flex-direction: column;
    gap: 0.75rem;
  }

  .infnet-controls-actions{
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }

  .infnet-page .infnet-control-refresh{
    flex: 0 0 auto;
  }

  .infnet-page .infnet-guide-trigger{
    margin-top: 0;
  }

}


.dashboard-grid .panel-card{
  min-height: 170px;
}

.dashboard-grid .kpi-number{
  line-height: 0.95;
  overflow-wrap: anywhere;
}

.summary-page,
.dash-page,
.infnet-page{
  height: calc(100dvh - 2.5rem - 56px) !important;
}

.summary-page{
  position: relative;
}

.summary-module-loader-overlay{
  position: absolute;
  inset: 0;
  z-index: 16;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.summary-page.summary-module-loading .summary-module-loader-overlay{
  display: flex;
}

.summary-page.summary-module-loading .summary-content{
  opacity: 0;
  pointer-events: none;
}

.minutes-page{
  --minutes-toast-left: 16px;
  height: calc(100dvh - 2.5rem - 56px) !important;
  min-height: 0;
  overflow: visible !important;
}

#sidebar.sidebar-collapsed ~ #page-content .minutes-page{
  --minutes-toast-left: calc(var(--sidebar-width-collapsed) + 20px);
}

#sidebar.sidebar-expanded ~ #page-content .minutes-page{
  --minutes-toast-left: calc(var(--sidebar-width-expanded) + 20px);
}

.minutes-page #min-content-wrap{
  min-height: 0;
  overflow: visible !important;
}

.minutes-page .minutes-top-grid{
  align-items: stretch !important;
}

.minutes-page .minutes-main-grid{
  overflow: visible !important;
}

.minutes-page .minutes-main-grid > div:first-child{
  position: relative;
  z-index: 40;
  overflow: visible !important;
}

.minutes-page .minutes-top-grid > .card{
  height: 100%;
  overflow: visible;
}

.minutes-page .minutes-top-grid > .card .card-body{
  height: 100%;
  overflow: visible;
}

.minutes-page .minutes-main-grid > div:nth-child(2){
  min-height: 0;
  position: relative;
  z-index: 1;
}

.minutes-page .minutes-main-grid > div:nth-child(2) .card{
  height: 100%;
}

.minutes-page .minutes-main-grid > div:nth-child(2) .card-body{
  min-height: 0;
  overflow: hidden;
}

.minutes-page #min-list{
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.minutes-entry-header{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.minutes-entry-avatar{
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(84, 66, 222, 0.18);
  border-radius: 50%;
  object-fit: cover;
  background: #f0efff;
}

.minutes-entry-avatar-fallback{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-accent, #5542de);
  font-size: 1rem;
}

.minutes-entry-project{
  margin-top: 5px;
  color: var(--bs-secondary-color);
  line-height: 1.2;
}

.minutes-toast{
  position: fixed;
  left: var(--minutes-toast-left, 16px);
  bottom: 16px;
  z-index: 9999;
  min-width: 0;
  width: min(420px, calc(100vw - var(--minutes-toast-left, 16px) - 16px));
  max-width: calc(100vw - var(--minutes-toast-left, 16px) - 16px);
}

.app-shell-toast{
  left: var(--app-toast-left, 16px);
  min-width: 0;
  width: min(420px, calc(100vw - var(--app-toast-left, 16px) - 16px));
  max-width: calc(100vw - var(--app-toast-left, 16px) - 16px);
}

.projects-weight-toast,
.projects-save-toast{
  min-width: 0;
  width: min(420px, calc(100vw - var(--projects-toast-left, 16px) - 16px));
  max-width: calc(100vw - var(--projects-toast-left, 16px) - 16px);
}

.projects-objective-filter{
  flex: 0 1 280px;
  min-width: 220px;
}

/* Projects uses the active tenant palette as a single visual system. */
.projects-page .projects-header-card .progress-bar,
.projects-page .projects-objective-card .progress-bar,
.projects-page .projects-kr-progress-slider-wrap .rc-slider-track{
  background: var(--brand-accent, #0d6efd) !important;
}

.projects-page .projects-objective-card{
  border-left: 10px solid var(--brand-accent-strong, #0a58ca) !important;
}

.projects-page .projects-kr-progress-slider-wrap .rc-slider-rail{
  background: color-mix(in srgb, var(--brand-accent-soft, #e7f0ff) 62%, #fff) !important;
}

.projects-page .projects-kr-progress-slider-wrap .rc-slider-handle{
  border-color: var(--brand-accent-strong, #0a58ca) !important;
  background: #fff !important;
  box-shadow: 0 1px 3px color-mix(in srgb, #111 24%, transparent) !important;
}

.projects-page .projects-kr-progress-slider-wrap .rc-slider-handle:hover,
.projects-page .projects-kr-progress-slider-wrap .rc-slider-handle:focus,
.projects-page .projects-kr-progress-slider-wrap .rc-slider-handle:active{
  border-color: var(--brand-accent, #0d6efd) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent, #0d6efd) 18%, transparent) !important;
}

.projects-page #projects-save{
  --bs-btn-bg: var(--brand-accent, #0d6efd);
  --bs-btn-border-color: var(--brand-accent, #0d6efd);
  --bs-btn-hover-bg: var(--brand-accent-strong, #0a58ca);
  --bs-btn-hover-border-color: var(--brand-accent-strong, #0a58ca);
  --bs-btn-active-bg: var(--brand-accent-strong, #0a58ca);
  --bs-btn-active-border-color: var(--brand-accent-strong, #0a58ca);
}

.projects-page #projects-export-pdf{
  color: var(--brand-accent, #0d6efd) !important;
}

.projects-page .projects-toolbar .btn-outline-primary:hover,
.projects-page .projects-toolbar .btn-outline-primary:focus,
.projects-page .projects-toolbar .btn-outline-primary:active,
.projects-page .projects-toolbar .btn-outline-primary:hover .bi,
.projects-page .projects-toolbar .btn-outline-primary:focus .bi,
.projects-page .projects-toolbar .btn-outline-primary:active .bi{
  color: #fff !important;
}

.projects-objective-inputs{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.projects-objective-field{
  flex: 1 1 260px;
  min-width: 0;
}

.projects-objective-countries{
  flex: 0 1 320px;
}

.projects-objective-country-hint{
  color: #6c757d;
  font-size: 0.78rem;
  line-height: 1.35;
  margin-top: 6px;
}

.projects-order-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.projects-order-group{
  border: 1px solid color-mix(in srgb, var(--brand-accent, #0d6efd) 18%, #fff);
  border-radius: 16px;
  background: color-mix(in srgb, var(--brand-accent-soft, #e7f0ff) 28%, #fff);
  padding: 14px;
}

.projects-order-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.projects-order-row-kr{
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--brand-accent, #0d6efd) 12%, #fff);
}

.projects-order-item-main{
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.projects-order-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand-accent-soft, #e7f0ff);
  color: var(--brand-accent-strong, #0a58ca);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.projects-order-badge-kr{
  min-width: 64px;
  background: color-mix(in srgb, var(--brand-accent-soft, #e7f0ff) 62%, #fff);
  color: var(--brand-accent-strong, #0a58ca);
}

.projects-order-label{
  min-width: 0;
  font-weight: 700;
  color: var(--bs-body-color, #1c2f54);
  line-height: 1.35;
  overflow-wrap: break-word;
}

.projects-order-children{
  margin-top: 10px;
  margin-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.projects-order-empty{
  margin-left: 4px;
  color: #6c7a96;
  font-size: 0.9rem;
}

.cfg-access-unsaved-toast{
  min-width: 0;
  width: min(420px, calc(100vw - var(--app-toast-left, 16px) - 16px));
  max-width: calc(100vw - var(--app-toast-left, 16px) - 16px);
}

.minutes-participants-dd .Select-control{
  min-height: 42px;
  border-radius: 10px;
  padding-block: 2px;
}

.minutes-participants-dd .Select-placeholder,
.minutes-participants-dd .Select-input input,
.minutes-participants-dd .Select-value-label{
  line-height: 1.25 !important;
}

.minutes-participants-dd .Select-menu-outer{
  z-index: 3500 !important;
  max-height: 260px !important;
}

.minutes-participants-dd .Select-option,
.minutes-participants-dd .VirtualizedSelectOption,
.minutes-participants-dd .VirtualizedSelectFocusedOption{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.minutes-participants-dd .Select--multi .Select-multi-value-wrapper{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.minutes-participants-dd .Select--multi .Select-value{
  max-width: 100%;
  margin: 2px 4px 2px 0;
  color: var(--brand-accent-strong, #0a58ca) !important;
  background-color: var(--brand-accent-soft, #e7f0ff) !important;
  border-color: color-mix(in srgb, var(--brand-accent, #0d6efd) 42%, #fff) !important;
}

.minutes-participants-dd .Select--multi .Select-value-label{
  color: var(--brand-accent-strong, #0a58ca) !important;
}

.minutes-participants-dd .Select--multi .Select-value-icon{
  color: var(--brand-accent, #0d6efd) !important;
  border-right-color: color-mix(in srgb, var(--brand-accent, #0d6efd) 34%, #fff) !important;
}

.minutes-participants-dd .Select--multi .Select-value-icon:hover{
  color: #fff !important;
  background-color: var(--brand-accent, #0d6efd) !important;
}

.minutes-participants-dd .Select--multi .Select-value-label{
  display: block;
  max-width: min(100%, 280px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#halo-questionnaire-tooltip-icon{
  color: var(--brand-accent-strong, #0a58ca) !important;
}

.tooltip.minutes-halo-tooltip .tooltip-inner{
  background-color: var(--brand-accent-strong, #0a58ca) !important;
  border-color: var(--brand-accent, #0d6efd) !important;
}

.tooltip.minutes-halo-tooltip{
  --bs-tooltip-bg: var(--brand-accent-strong, #0a58ca);
  --bs-tooltip-color: #fff;
}

.minutes-halo-dd{
  position: relative;
  z-index: 1;
}

.minutes-halo-dd .Select-control{
  min-height: 42px;
  border-radius: 10px;
}

.minutes-halo-dd.is-open{
  z-index: 3600;
}

.minutes-halo-dd .Select-menu-outer{
  z-index: 3600 !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  box-shadow: 0 14px 34px rgba(21, 30, 52, 0.12);
}

.minutes-halo-dd-up.is-open .Select-menu-outer{
  top: auto !important;
  bottom: calc(100% + 6px) !important;
}

.minutes-halo-dd .Select-option,
.minutes-halo-dd .VirtualizedSelectOption,
.minutes-halo-dd .VirtualizedSelectFocusedOption{
  white-space: normal !important;
  line-height: 1.24 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

@media (min-width: 1025px){
  .dash-page{
    height: calc(100dvh - 2.5rem - 56px - 2dvh) !important;
  }
}

@media (max-width: 1360px){
  /* Strategic Landscape switches to one column before the content rail gets
     too narrow.  Keeping its original 77%/23% split while the matrix has a
     fixed height left both the chart and the matching-stakeholders strip in
     the upper-left corner, wasting the rest of the module. */
  .dash-page #mode-search,
  .dash-page #mode-search .dash-search-layout{
    height: auto !important;
    min-height: 0 !important;
  }

  .dash-page #mode-search .dash-search-layout{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .dash-page #mode-search .dash-search-main,
  .dash-page #mode-search .dash-strategic-card{
    flex: 0 0 460px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 460px !important;
    min-height: 460px !important;
    max-height: 460px !important;
  }

  .dash-page #mode-search .dash-strategic-card{
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
  }

  .dash-page #mode-search #strategic_chart_1{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .dash-page #mode-search .dash-search-strip{
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  .dashboard-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto;
    grid-template-areas:
      "kpi_count kpi_halo"
      "sector sector"
      "map map"
      "favorability favorability"
      "riesgo influencia"
      "afinidad interaccion";
    height: auto !important;
    min-height: 100% !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
  }

  .dashboard-grid > div,
  .dashboard-grid .dash-item{
    min-height: 300px;
  }

  .dashboard-grid .kpi-number{
    font-size: clamp(2rem, 7.4vw, 4.6rem) !important;
  }

  .dashboard-grid .kpi-label{
    font-size: clamp(1rem, 2.2vw, 1.25rem) !important;
  }

  .dash-page{
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .infnet-page .infnet-compare-header-grid,
  .infnet-page .infnet-path-header-grid{
    font-size: 0.95rem;
  }

  .infnet-page .infnet-name-main{
    font-size: 0.95rem;
    line-height: 1.22 !important;
  }

  .infnet-page .infnet-name-sub{
    font-size: 0.9rem;
    line-height: 1.22 !important;
  }

  .infnet-page .infnet-compare-row{
    font-size: 0.93rem;
    line-height: 1.32;
  }
}

@media (max-width: 768px){
  .dash-page #mode-search .dash-search-main,
  .dash-page #mode-search .dash-strategic-card{
    flex-basis: 400px !important;
    height: 400px !important;
    min-height: 400px !important;
  }
}

@media (max-width: 1024px){
  #app-shell:not(.auth-shell):not(.support-shell):has(#sidebar.sidebar-collapsed){
    --app-toast-left: calc(var(--sidebar-width-tablet) + 20px);
  }

  #app-shell:not(.auth-shell):not(.support-shell):has(#sidebar.sidebar-expanded){
    --app-toast-left: calc(var(--sidebar-width-responsive-expanded) + 20px);
  }

  #sidebar.sidebar-collapsed ~ #page-content .minutes-page{
    --minutes-toast-left: calc(var(--sidebar-width-tablet) + 20px);
  }

  #sidebar.sidebar-expanded ~ #page-content .minutes-page{
    --minutes-toast-left: calc(var(--sidebar-width-responsive-expanded) + 20px);
  }

  #sidebar.sidebar-collapsed ~ #page-content .de-page{
    --de-toast-left: calc(var(--sidebar-width-tablet) + 20px);
  }

  #sidebar.sidebar-expanded ~ #page-content .de-page{
    --de-toast-left: calc(var(--sidebar-width-responsive-expanded) + 20px);
  }

  #sidebar-toggle-wrap{
    width: var(--sidebar-width-tablet);
  }

  #sidebar.sidebar-collapsed{
    width: var(--sidebar-width-tablet) !important;
    padding: 0.75rem 0.25rem !important;
  }

  #sidebar.sidebar-expanded{
    width: var(--sidebar-width-responsive-expanded) !important;
    padding: 0.75rem 0.25rem !important;
  }

  #sidebar .nav-pills .nav-link{
    font-size: 0.92rem !important;
    min-height: 40px;
    padding: 0.5rem 0.45rem !important;
  }

  #sidebar .nav-pills .nav-link .bi{
    font-size: 1.02rem !important;
  }

  #sidebar .menu-label{
    font-size: 0.92rem !important;
    line-height: 1.2;
  }

  #sidebar.sidebar-collapsed .menu-label{
    display: none !important;
  }

  #sidebar.sidebar-collapsed .nav-pills .nav-link{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.45rem 0 !important;
  }

  #sidebar.sidebar-expanded .menu-label{
    display: inline !important;
  }

  #sidebar.sidebar-collapsed ~ #page-content{
    margin-left: calc(var(--sidebar-width-tablet) + 8px) !important;
  }

  #sidebar.sidebar-expanded ~ #page-content{
    margin-left: calc(var(--sidebar-width-responsive-expanded) + 8px) !important;
  }

  #page-content{
    margin-left: calc(var(--sidebar-width-tablet) + 8px) !important;
    padding: 0.5rem !important;
  }

  .app-topbar{
    display: grid !important;
    grid-template-columns: minmax(190px, 1fr) minmax(150px, auto) auto;
    grid-template-areas:
      "project country avatar"
      "time time avatar";
    height: auto !important;
    align-items: center !important;
    padding: 8px !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.5rem !important;
  }

  .app-project-wrap{
    grid-area: project;
    margin-right: 0 !important;
    width: auto;
    max-width: 100%;
    flex: initial;
  }

  .app-country-wrap{
    grid-area: country;
    margin-right: 0 !important;
    width: auto;
    max-width: 100%;
    flex: initial;
    justify-self: start;
  }

  .project-bar{
    gap: 10px;
  }

  .project-bar .project-dd-wrap{
    flex-basis: clamp(180px, 32vw, 280px);
    max-width: 100%;
  }

  .app-country-wrap .country-dd-wrap{
    flex-basis: clamp(110px, 20vw, 180px);
    max-width: 100%;
  }

  .project-bar .project-dd .Select-control{
    height: 42px;
    min-height: 42px;
  }

  .project-bar .project-dd .Select-value,
  .project-bar .project-dd .Select-placeholder{
    line-height: 40px;
  }

  .project-bar .project-dd .Select-input{
    height: 40px;
  }

  .app-avatar-wrap{
    grid-area: avatar;
    justify-self: end;
    align-self: center;
    margin-left: 0;
  }

  .app-avatar-name{
    display: none;
  }

  .app-avatar-space{
    display: none;
  }

  .app-user-toggle{
    padding: 4px !important;
  }

  .app-time-wrap{
    grid-area: time;
    width: auto;
    padding: 0 !important;
    justify-self: start;
    flex: initial !important;
  }

  .app-logo{
    height: 54px !important;
  }

  .timebar{
    justify-content: flex-start;
    max-width: 100%;
  }

  .app-main-grid.with-people{
    grid-template-columns: 1fr !important;
    grid-template-rows: clamp(180px, 32dvh, 240px) minmax(0, 1fr) !important;
    gap: 0.5rem !important;
  }

  .app-main-grid.with-people #pp-container{
    height: clamp(180px, 32dvh, 240px) !important;
    max-height: clamp(180px, 32dvh, 240px) !important;
    align-self: start !important;
  }

  .app-main-grid.with-people #pp-container > div:first-child{
    height: 100% !important;
    max-height: 100% !important;
  }

  .app-main-grid.no-people{
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
  }

  .app-main-grid.no-people #pp-container{
    display: none !important;
  }

  #page-right{
    padding-left: 0 !important;
    padding-bottom: 0.5rem !important;
  }

  /* Data Editing: altura adaptable en tablet/phone para evitar que solo se vean encabezados */
  #de-wrapper.de-page{
    --de-table-height: calc(100dvh - 250px);
    --de-table-min-height: 280px;
    --de-table-max-height: calc(100dvh - 250px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #de-table .dash-spreadsheet-container{
    min-height: var(--de-table-min-height, 280px) !important;
    max-height: var(--de-table-max-height, 100%) !important;
    height: 100% !important;
    padding-bottom: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "kpi_count kpi_halo"
      "sector sector"
      "map map"
      "favorability favorability"
      "riesgo influencia"
      "afinidad interaccion";
    height: auto !important;
    overflow: auto;
  }

  .dashboard-grid > div{
    height: auto !important;
    min-height: 280px;
  }

  .dashboard-grid .kpi-number{
    font-size: clamp(2.2rem, 9vw, 4.2rem) !important;
  }

  .dashboard-grid .kpi-label{
    font-size: clamp(1.02rem, 2.8vw, 1.35rem) !important;
  }

  .dash-search-layout{
    flex-direction: column !important;
  }

  .dash-search-main,
  .dash-search-strip{
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .dash-strategic-card{
    margin-left: 0 !important;
  }

  .ss-wrap{
    grid-template-columns: 1fr !important;
  }

  .ss-grid-2x2{
    grid-template-columns: 1fr !important;
  }

  .minutes-main-grid{
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    padding-left: 0 !important;
    overflow: visible !important;
  }

  .minutes-top-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
  }

  .minutes-top-grid .card{
    min-height: 280px;
  }

  .minutes-page{
    height: auto !important;
    overflow: auto !important;
  }

  .minutes-page #min-content-wrap{
    height: auto !important;
    overflow: visible !important;
  }

  .minutes-page #min-list{
    max-height: none !important;
    overflow-y: visible !important;
  }

  .minutes-participants-dd .Select-control{
    min-height: 44px !important;
  }

  .minutes-participants-dd .Select-placeholder,
  .minutes-participants-dd .Select-input input,
  .minutes-participants-dd .Select-value-label,
  .minutes-participants-dd .Select-option,
  .minutes-participants-dd .VirtualizedSelectOption,
  .minutes-participants-dd .VirtualizedSelectFocusedOption{
    font-size: 12px !important;
    line-height: 1.22 !important;
  }

  .minutes-participants-dd .Select-menu-outer{
    max-height: 220px !important;
  }

  .minutes-participants-dd .Select--multi .Select-value-label{
    max-width: min(100%, 180px);
  }

  #infnet-right{
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(380px, 52dvh) auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  .infnet-main-pane{
    min-height: 380px;
  }

  .infnet-main-pane .card,
  .infnet-main-pane .card-body{
    height: 100% !important;
  }

  .infnet-page .infnet-graph-wrap{
    min-height: min(380px, 52dvh);
  }

  .infnet-side-pane,
  .infnet-side-pane .card{
    height: auto !important;
  }

  .infnet-shell{
    overflow: visible !important;
    height: auto !important;
  }

  .infnet-page{
    overflow: auto !important;
  }

  .infnet-page #infnet-compare-table{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: none !important;
  }

  .infnet-page #infnet-compare-view{
    overflow: hidden !important;
  }

  .infnet-page #infnet-path-view{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: none !important;
  }

  .infnet-controls-row{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start !important;
    align-content: flex-start;
    gap: 0.65rem !important;
  }

  .infnet-controls-stack{
    flex: 0 1 18rem;
    gap: 0.18rem;
    width: min(100%, 20rem);
    min-width: 0 !important;
    max-width: 20rem;
  }

  .infnet-controls-side{
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  .infnet-controls-row .infnet-control{
    min-width: 0 !important;
  }

  .infnet-page .infnet-control-linkmode{
    flex: 1 1 14rem;
    width: clamp(12rem, 28vw, 15rem);
    max-width: 15rem;
  }

  .infnet-page .infnet-control-refresh{
    flex: 0 1 13rem;
    width: clamp(11.5rem, 24vw, 13rem);
    max-width: 13rem;
  }

  .infnet-page .infnet-guide-trigger{
    align-self: flex-start !important;
  }

  .infnet-page .infnet-name-main{
    font-size: 0.9rem;
  }

  .infnet-page .infnet-name-sub{
    font-size: 0.84rem;
  }

  .infnet-page .infnet-compare-row{
    font-size: 0.88rem;
  }

  .projects-toolbar{
    flex-wrap: wrap;
  }

  .projects-header-row{
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .projects-header-actions{
    width: auto;
    justify-content: flex-end !important;
    margin-left: auto;
    white-space: nowrap;
  }

  .projects-objective-actions{
    padding-top: 0 !important;
    align-self: center !important;
  }

  .projects-objective-progress{
    min-width: 0 !important;
  }

  .projects-objective-top{
    flex-wrap: wrap;
  }

  .projects-objective-actions{
    padding-top: 0 !important;
    align-self: center !important;
  }

  .projects-objective-top > div{
    width: 100%;
    min-width: 0 !important;
  }

  #projects-weight-toast,
  #projects-save-toast{
    min-width: 0 !important;
    width: calc(100vw - var(--projects-toast-left, 12px) - 12px) !important;
    max-width: calc(100vw - var(--projects-toast-left, 12px) - 12px) !important;
    left: var(--projects-toast-left, 12px) !important;
    right: auto !important;
  }
}

@media (max-width: 920px){
  .infnet-controls-row{
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: stretch;
    gap: 0.08rem !important;
  }

  .infnet-controls-stack,
  .infnet-controls-side,
  .infnet-page .infnet-control-linkmode,
  .infnet-page .infnet-control-refresh{
    width: 100%;
    max-width: none;
  }

  .infnet-controls-stack{
    flex: 0 0 auto;
    gap: 0.24rem;
  }

  .infnet-controls-side{
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0.35rem;
  }

  .infnet-page .infnet-control-linkmode{
    flex: 0 0 auto;
  }

  .infnet-page .infnet-control-refresh{
    flex: 0 0 auto;
  }

  .infnet-page .infnet-guide-trigger{
    flex: 0 0 auto;
    align-self: flex-end;
  }
}

@media (max-width: 1024px) and (orientation: portrait){
  #sidebar.sidebar-collapsed{
    width: var(--sidebar-width-tablet) !important;
  }

  #sidebar.sidebar-collapsed ~ #page-content{
    margin-left: calc(var(--sidebar-width-tablet) + 8px) !important;
  }

  #sidebar.sidebar-expanded{
    width: min(76vw, 250px) !important;
    z-index: 1040 !important;
  }

  #sidebar.sidebar-expanded ~ #page-content{
    margin-left: calc(var(--sidebar-width-tablet) + 8px) !important;
  }

  #sidebar.sidebar-expanded ~ #page-content #main-grid,
  #sidebar.sidebar-expanded ~ #page-content .app-topbar{
    opacity: 0.14;
    pointer-events: none;
  }
}

@media (max-width: 1024px) and (orientation: landscape){
  #sidebar.sidebar-expanded{
    width: var(--sidebar-width-responsive-expanded) !important;
  }

  #sidebar.sidebar-expanded ~ #page-content{
    margin-left: calc(var(--sidebar-width-responsive-expanded) + 8px) !important;
  }

  .app-main-grid.with-people{
    grid-template-columns: minmax(190px, 24vw) minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    gap: 0.5rem !important;
  }

  .app-main-grid.with-people #pp-container{
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .app-main-grid.with-people #page-right{
    min-height: 0 !important;
    height: 100% !important;
    overflow: auto !important;
  }

  .projects-objective-top{
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .projects-objective-progress{
    flex: 1 1 auto;
    min-width: 260px !important;
  }

  .projects-objective-actions{
    align-self: center !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    white-space: nowrap;
  }
}

@media (min-width: 769px) and (max-width: 920px){
  #page-content{
    --app-topbar-label-col: 150px;
  }

  .app-main-grid.with-people{
    grid-template-columns: 1fr !important;
    grid-template-rows: clamp(156px, 28dvh, 210px) minmax(0, 1fr) !important;
    gap: 0.5rem !important;
  }

  .app-main-grid.with-people #pp-container{
    min-height: 0 !important;
    height: clamp(156px, 28dvh, 210px) !important;
    max-height: clamp(156px, 28dvh, 210px) !important;
    overflow: hidden !important;
    align-self: start !important;
  }

  .app-main-grid.with-people #pp-container > div:first-child{
    height: 100% !important;
    max-height: 100% !important;
  }

  .app-main-grid.with-people #page-right{
    min-height: 0 !important;
    height: 100% !important;
    overflow: auto !important;
  }

  .app-topbar{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "project avatar"
      "country avatar"
      "time avatar";
    gap: 8px !important;
  }

  .app-project-wrap{
    grid-area: project;
    width: auto;
    max-width: 100%;
    justify-self: start;
  }

  .app-country-wrap{
    grid-area: country;
    width: auto;
    max-width: 100%;
    justify-self: start;
  }

  .project-bar{
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    gap: 8px;
  }

  .project-bar .project-bar-label{
    padding-top: 0;
    justify-self: start;
  }

  .project-bar .project-dd-wrap{
    width: clamp(260px, 46vw, 420px);
    flex: 0 1 auto;
    max-width: 100%;
  }

  .app-country-wrap .country-dd-wrap{
    width: clamp(140px, 30vw, 220px);
    max-width: 100%;
  }

  .app-time-wrap{
    grid-area: time;
    width: auto;
    justify-self: start;
  }

  .app-avatar-wrap{
    grid-area: avatar;
    justify-self: end;
    margin-left: 0;
  }

  .timebar{
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content;
    max-width: 100%;
    gap: 8px !important;
  }

  .timebar .timebar-label{
    min-height: 40px;
  }

  .timebar .timebar-input{
    width: 132px !important;
    min-width: 132px !important;
  }
}

@media (min-width: 921px) and (max-width: 1400px){
  #sidebar.sidebar-expanded ~ #page-content .app-topbar{
    gap: 8px !important;
  }

  #sidebar.sidebar-expanded ~ #page-content .app-logo{
    height: 58px !important;
  }

  #sidebar.sidebar-expanded ~ #page-content .app-project-wrap{
    flex: 1 1 320px;
    max-width: min(32vw, 420px);
  }

  #sidebar.sidebar-expanded ~ #page-content .app-country-wrap{
    flex: 0 1 clamp(150px, 16vw, 230px);
    max-width: min(100%, 230px);
  }

  #sidebar.sidebar-expanded ~ #page-content .project-bar{
    gap: 8px;
  }

  #sidebar.sidebar-expanded ~ #page-content .project-bar .project-dd-wrap{
    flex-basis: clamp(210px, 24vw, 360px);
    max-width: min(100%, 360px);
  }

  #sidebar.sidebar-expanded ~ #page-content .app-country-wrap .country-dd-wrap{
    flex-basis: clamp(96px, 10vw, 150px);
    max-width: min(100%, 150px);
  }

  #sidebar.sidebar-expanded ~ #page-content .app-time-wrap{
    flex: 0 1 auto !important;
    padding: 0 4px !important;
  }

  #sidebar.sidebar-expanded ~ #page-content .timebar{
    gap: 6px !important;
  }

  #sidebar.sidebar-expanded ~ #page-content .timebar .timebar-label{
    font-size: 12px !important;
  }

  #sidebar.sidebar-expanded ~ #page-content .timebar .timebar-input{
    width: 132px !important;
    min-width: 132px !important;
  }

  #sidebar.sidebar-expanded ~ #page-content .app-avatar-name,
  #sidebar.sidebar-expanded ~ #page-content .app-avatar-space{
    display: none;
  }

  #sidebar.sidebar-expanded ~ #page-content .app-user-toggle{
    padding: 4px !important;
  }

  #sidebar.sidebar-expanded ~ #page-content .app-user-toggle-inner{
    max-width: 40px;
    gap: 0;
  }
}

/* This is the narrow desktop interval where the full identity control would
   wrap below the filters. Match the compact avatar treatment used on tablets. */
@media (min-width: 1025px) and (max-width: 1130px){
  .app-topbar{
    display: grid !important;
    grid-template-columns: minmax(190px, 1fr) minmax(150px, auto) auto;
    grid-template-areas:
      "project country avatar"
      "time time avatar";
    align-items: center !important;
    padding: 8px !important;
    row-gap: 6px;
  }

  .app-project-wrap{
    grid-area: project;
    margin-right: 0 !important;
    width: auto;
    max-width: 100%;
    flex: initial;
  }

  .app-country-wrap{
    grid-area: country;
    margin-right: 0 !important;
    width: auto;
    max-width: 100%;
    flex: initial;
    justify-self: start;
  }

  .app-time-wrap{
    grid-area: time;
    width: auto;
    padding: 0 !important;
    justify-self: start;
    flex: initial !important;
  }

  .app-avatar-wrap{
    grid-area: avatar;
    justify-self: end;
    align-self: center;
    margin-left: 0;
  }

  .app-avatar-name,
  .app-avatar-space{
    display: none !important;
  }

  .app-user-toggle{
    padding: 4px !important;
  }

  .app-user-toggle-inner{
    max-width: 40px;
    gap: 0;
  }
}

@supports selector(#main-grid:has(.dash-page)) {
  @media (max-width: 1280px){
    /* These pages need the shell to stack earlier because the main content is
       already dense, and keeping the people panel as a left rail clips it while
       the layout is shrinking horizontally. */
    #main-grid.app-main-grid.with-people:has(.dash-page),
    #main-grid.app-main-grid.with-people:has(.summary-page),
    #main-grid.app-main-grid.with-people:has(.minutes-page),
    #main-grid.app-main-grid.with-people:has(.infnet-page){
      grid-template-columns: 1fr !important;
      grid-template-rows: clamp(180px, 28dvh, 220px) minmax(0, 1fr) !important;
      gap: 0.5rem !important;
    }

    #main-grid.app-main-grid.with-people:has(.dash-page) #pp-container,
    #main-grid.app-main-grid.with-people:has(.summary-page) #pp-container,
    #main-grid.app-main-grid.with-people:has(.minutes-page) #pp-container,
    #main-grid.app-main-grid.with-people:has(.infnet-page) #pp-container{
      min-height: 0 !important;
      height: clamp(180px, 28dvh, 220px) !important;
      max-height: clamp(180px, 28dvh, 220px) !important;
      overflow: hidden !important;
      align-self: start !important;
    }

    #main-grid.app-main-grid.with-people:has(.dash-page) #pp-container > div:first-child,
    #main-grid.app-main-grid.with-people:has(.summary-page) #pp-container > div:first-child,
    #main-grid.app-main-grid.with-people:has(.minutes-page) #pp-container > div:first-child,
    #main-grid.app-main-grid.with-people:has(.infnet-page) #pp-container > div:first-child{
      height: 100% !important;
      max-height: 100% !important;
    }

    #main-grid.app-main-grid.with-people:has(.dash-page) #page-right,
    #main-grid.app-main-grid.with-people:has(.summary-page) #page-right,
    #main-grid.app-main-grid.with-people:has(.minutes-page) #page-right,
    #main-grid.app-main-grid.with-people:has(.infnet-page) #page-right{
      min-height: 0 !important;
      height: 100% !important;
      overflow: auto !important;
    }
  }
}

@supports selector(#main-grid:has(.infnet-page)) {
  @media (max-width: 1280px){
    /* Influence Network also needs its inner graph/detail split to stack earlier
       once the global people-panel shell is already stacked. */
    #main-grid.app-main-grid.with-people:has(.infnet-page) #infnet-right{
      grid-template-columns: 1fr !important;
      grid-template-rows: minmax(380px, 52dvh) auto !important;
      height: auto !important;
      overflow: visible !important;
    }

    #main-grid.app-main-grid.with-people:has(.infnet-page) .infnet-main-pane{
      min-height: 380px;
    }

    #main-grid.app-main-grid.with-people:has(.infnet-page) .infnet-main-pane .card,
    #main-grid.app-main-grid.with-people:has(.infnet-page) .infnet-main-pane .card-body{
      height: 100% !important;
    }

    #main-grid.app-main-grid.with-people:has(.infnet-page) .infnet-page .infnet-graph-wrap{
      min-height: min(380px, 52dvh);
    }

    #main-grid.app-main-grid.with-people:has(.infnet-page) .infnet-side-pane,
    #main-grid.app-main-grid.with-people:has(.infnet-page) .infnet-side-pane .card{
      height: auto !important;
    }

    #main-grid.app-main-grid.with-people:has(.infnet-page) .infnet-shell{
      overflow: visible !important;
      height: auto !important;
    }

    #main-grid.app-main-grid.with-people:has(.infnet-page) .infnet-page{
      overflow: auto !important;
    }

    #main-grid.app-main-grid.with-people:has(.infnet-page) .infnet-page #infnet-compare-table{
      overflow-y: auto !important;
      overflow-x: hidden !important;
      max-height: none !important;
    }

    #main-grid.app-main-grid.with-people:has(.infnet-page) .infnet-page #infnet-compare-view{
      overflow: hidden !important;
    }

    #main-grid.app-main-grid.with-people:has(.infnet-page) .infnet-page #infnet-path-view{
      overflow-y: auto !important;
      overflow-x: hidden !important;
      max-height: none !important;
    }
  }
}

@media (max-width: 768px){
  #page-content{
    --app-topbar-label-col: 150px;
  }

  #sidebar.sidebar-collapsed .sidebar-brand-top .sidebar-brand-compact{
    max-width: 26px;
  }

  #sidebar.sidebar-collapsed .sidebar-brand-footer .sidebar-brand-compact{
    max-width: 16px;
  }

  #de-table .dash-table-container,
  #de-table .dash-spreadsheet{
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  #de-table td .dash-cell-value{
    line-height: 1.2 !important;
  }

  #de-table.de-ag-grid{
    --ag-font-size: 11px;
  }

  #de-table th[data-dash-column="photo_md"],
  #de-table td[data-dash-column="photo_md"]{
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  #de-table td[data-dash-column="photo_md"] img{
    width: 34px !important;
    height: 34px !important;
  }

  #de-table .de-ag-photo-img{
    width: 100% !important;
    height: 100% !important;
  }

  #de-table.de-ag-grid .ag-cell.de-ag-photo-cell .ag-cell-value img{
    width: 34px !important;
    height: 34px !important;
  }

  #de-table .de-ag-photo-circle{
    width: 34px !important;
    height: 34px !important;
  }

  #sidebar-toggle-wrap{
    width: var(--sidebar-width-mobile);
  }

  #sidebar.sidebar-collapsed{
    width: var(--sidebar-width-mobile) !important;
  }

  #sidebar.sidebar-expanded{
    width: min(76vw, 240px) !important;
  }

  #sidebar.sidebar-collapsed .nav-pills .nav-link{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.45rem 0 !important;
  }

  #sidebar.sidebar-collapsed .nav-pills .nav-link.active{
    border-left: none !important;
    padding-left: 0 !important;
  }

  #sidebar.sidebar-collapsed .nav-pills .nav-link .bi{
    font-size: 1.02rem;
    line-height: 1;
  }

  #sidebar.sidebar-collapsed ~ #page-content{
    margin-left: calc(var(--sidebar-width-mobile) + 6px) !important;
  }

  #sidebar.sidebar-expanded ~ #page-content{
    margin-left: calc(var(--sidebar-width-mobile) + 6px) !important;
  }

  #sidebar.sidebar-expanded ~ #page-content #main-grid,
  #sidebar.sidebar-expanded ~ #page-content .app-topbar{
    opacity: 0.14;
    pointer-events: none;
  }

  #page-content{
    margin-left: calc(var(--sidebar-width-mobile) + 6px) !important;
    padding: 0.4rem !important;
  }

  #btn-toggle{
    width: 28px;
    height: 28px;
  }

  .app-topbar{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "project avatar"
      "country avatar"
      "time avatar";
    gap: 6px !important;
    padding: 6px !important;
  }

  .app-project-wrap{
    grid-area: project;
    width: auto;
    margin-right: 0 !important;
    flex: initial;
    max-width: 100%;
    justify-self: start;
  }

  .app-country-wrap{
    grid-area: country;
    width: auto;
    margin-right: 0 !important;
    flex: initial;
    max-width: 100%;
    justify-self: start;
  }

  .app-avatar-wrap{
    grid-area: avatar;
    justify-self: end;
    margin-left: 0;
  }

  .app-time-wrap{
    grid-area: time;
    width: auto;
    padding: 0 !important;
    flex: initial !important;
    justify-self: start;
  }

  .project-bar{
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    gap: 8px;
  }

  .project-bar .project-bar-label{
    padding-top: 0;
    justify-self: start;
  }

  .project-bar .project-dd-wrap,
  .project-bar .project-dd{
    width: auto !important;
    max-width: 100%;
  }

  .project-bar .project-dd-wrap{
    width: clamp(220px, 52vw, 360px) !important;
    flex: 0 1 auto;
  }

  .app-country-wrap .country-dd-wrap{
    width: clamp(136px, 34vw, 220px) !important;
    flex: 0 1 auto;
  }

  .project-bar .project-dd .Select-control{
    height: 40px;
    min-height: 40px;
    padding-left: 8px;
    padding-right: 14px;
  }

  .project-bar .project-dd .Select-value,
  .project-bar .project-dd .Select-placeholder,
  .project-bar .project-dd .Select-input{
    padding-right: 36px;
  }

  .project-bar .project-dd .Select-value,
  .project-bar .project-dd .Select-placeholder{
    line-height: 38px;
  }

  .project-bar .project-dd .Select-input{
    height: 38px;
  }

  .project-bar .project-dd .Select-arrow-zone,
  .project-bar .project-dd .Select-clear-zone{
    width: 30px;
  }

  .timebar{
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content;
    max-width: 100%;
    gap: 8px !important;
  }

  .timebar .timebar-label{
    min-height: 40px;
  }

  .timebar .timebar-input{
    width: 132px !important;
    min-width: 132px !important;
    height: 40px;
  }

  .timebar .timebar-calendar{
    justify-self: start;
  }

  .timebar .timebar-label{
    font-size: 12px;
  }

  .timebar .timebar-input{
    width: 116px !important;
    min-width: 116px !important;
  }

  .app-main-grid.with-people{
    grid-template-rows: minmax(156px, 22dvh) 1fr !important;
  }

  .dashboard-grid{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "kpi_count"
      "kpi_halo"
      "sector"
      "map"
      "favorability"
      "riesgo"
      "influencia"
      "afinidad"
      "interaccion";
    gap: 0.5rem !important;
  }

  .dashboard-grid > div{
    min-height: 260px;
  }

  .dashboard-grid .kpi-number{
    font-size: clamp(2.3rem, 11vw, 3.8rem) !important;
  }

  .dashboard-grid .kpi-label{
    font-size: clamp(1.02rem, 3.6vw, 1.25rem) !important;
  }

  .ss-photo{
    width: 120px;
    height: 120px;
  }

  .ss-scroll-y-1,
  .ss-scroll-y-2,
  .ss-scroll-y-3,
  .ss-scroll-y-4{
    max-height: none;
  }

  .minutes-main-grid{
    gap: 0.5rem !important;
  }

  #infnet-right{
    grid-template-rows: minmax(320px, 46dvh) auto !important;
  }

  .infnet-page .infnet-graph-wrap{
    min-height: min(320px, 46dvh);
  }

  .infnet-page #infnet-compare-table{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: none !important;
  }

  .infnet-page #infnet-compare-view{
    overflow: hidden !important;
  }

  .infnet-page #infnet-path-view{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: none !important;
  }

  .projects-header-row{
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .projects-header-actions{
    width: auto;
    justify-content: flex-end !important;
    margin-left: auto;
    white-space: nowrap;
  }

  #de-wrapper .de-social-row{
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas:
      "icon network"
      "url url"
      "remove remove";
    align-items: start;
  }

  #de-wrapper .de-social-row > :nth-child(1){ grid-area: icon; }
  #de-wrapper .de-social-row > :nth-child(2){ grid-area: network; }
  #de-wrapper .de-social-row > :nth-child(3){ grid-area: url; }
  #de-wrapper .de-social-row > :nth-child(4){ grid-area: remove; }
  #de-wrapper .de-social-row > :nth-child(4){
    justify-self: start;
    margin-top: 2px;
  }

  #de-wrapper.de-page{
    --de-table-height: calc(100dvh - 285px);
    --de-table-min-height: 220px;
    --de-table-max-height: calc(100dvh - 285px);
  }

  #de-table .dash-spreadsheet-container{
    min-height: var(--de-table-min-height, 220px) !important;
    max-height: var(--de-table-max-height, 100%) !important;
    height: 100% !important;
    padding-bottom: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
  }

  .tooltip.strategicChart1-tooltip .tooltip-inner{
    max-width: min(300px, 84vw) !important;
    min-width: 0 !important;
  }
}

@media (max-width: 1100px) and (max-height: 650px){
  #sidebar.sidebar-expanded .sidebar-brand-footer{
    display: none !important;
  }

  #sidebar.sidebar-expanded .sidebar-brand-top .sidebar-brand-full{
    max-width: 132px;
  }

  .app-main-grid.with-people{
    grid-template-columns: 1fr !important;
    grid-template-rows: clamp(128px, 24dvh, 170px) minmax(0, 1fr) !important;
    gap: 0.5rem !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .app-main-grid.with-people #pp-container{
    min-height: 0 !important;
    height: clamp(128px, 24dvh, 170px) !important;
    max-height: clamp(128px, 24dvh, 170px) !important;
    overflow: hidden !important;
    align-self: start !important;
  }

  .app-main-grid.with-people #pp-container > div:first-child{
    height: 100% !important;
    max-height: 100% !important;
  }

  .app-main-grid.with-people #page-right{
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  #sidebar.sidebar-collapsed .sidebar-brand-top .sidebar-brand-compact{
    max-width: 22px;
  }

  #sidebar.sidebar-collapsed .sidebar-brand-footer{
    display: none !important;
  }
}

@media (max-width: 560px){
  #page-content{
    --app-topbar-label-col: 132px;
  }

  .project-bar{
    gap: 6px;
  }

  .project-bar .project-bar-label{
    padding-top: 0;
  }

  .project-bar .project-dd-wrap{
    flex-basis: auto;
  }

  .timebar{
    gap: 6px !important;
  }
}

@media (max-width: 768px) and (orientation: portrait){
  #de-wrapper.de-page{
    --de-table-height: calc(100dvh - 275px);
    --de-table-min-height: 240px;
    --de-table-max-height: calc(100dvh - 275px);
  }

  #de-table th[data-dash-column="name"],
  #de-table td[data-dash-column="name"]{
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
  }

  #de-table td[data-dash-column="name"] .dash-cell-value{
    font-size: 10.5px !important;
  }

  #de-table th[data-dash-column="role"],
  #de-table td[data-dash-column="role"]{
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait){
  #de-wrapper.de-page{
    --de-table-height: calc(100dvh - 235px);
    --de-table-min-height: 520px;
    --de-table-max-height: calc(100dvh - 235px);
  }
}

@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape){
  #de-wrapper.de-page{
    --de-table-height: calc(100dvh - 220px);
    --de-table-min-height: 280px;
    --de-table-max-height: calc(100dvh - 220px);
  }
}

@media (max-width: 932px) and (orientation: landscape){
  #de-wrapper.de-page{
    --de-table-height: calc(100dvh - 205px);
    --de-table-min-height: 180px;
    --de-table-max-height: calc(100dvh - 205px);
  }

  #de-wrapper .de-topbar{
    gap: 6px;
  }
}

/* iPhone base typography (portrait + landscape) */
@media (max-width: 430px), (max-width: 932px) and (max-height: 460px){
  #sidebar.sidebar-expanded .sidebar-brand-top .sidebar-brand-full{
    max-width: 118px;
  }

  #sidebar.sidebar-expanded .sidebar-brand-footer{
    display: none !important;
  }

  .app-main-grid.with-people{
    grid-template-rows: clamp(118px, 22dvh, 148px) minmax(0, 1fr) !important;
  }

  .app-main-grid.with-people #pp-container{
    height: clamp(118px, 22dvh, 148px) !important;
    max-height: clamp(118px, 22dvh, 148px) !important;
    align-self: start !important;
  }

  .app-main-grid.with-people #pp-container > div:first-child{
    height: 100% !important;
    max-height: 100% !important;
  }

  #sidebar.sidebar-collapsed .sidebar-brand-top{
    padding-bottom: 0.4rem;
  }

  #sidebar.sidebar-collapsed .sidebar-brand-top .sidebar-brand-compact{
    max-width: 20px;
  }

  #sidebar.sidebar-collapsed .sidebar-brand-footer{
    display: none !important;
  }

  #de-wrapper.de-page{
    --de-table-height: calc(100dvh - 210px);
    --de-table-min-height: 180px;
    --de-table-max-height: calc(100dvh - 210px);
  }

  #page-content,
  #main-grid,
  #page-right,
  .dash-page,
  .summary-page,
  .minutes-page,
  .projects-page,
  .infnet-page,
  .config-page,
  #de-wrapper.de-page,
  #pp-container{
    font-size: 10px !important;
  }

  button,
  .btn,
  .btn-sm,
  .btn-lg,
  .dropdown-item,
  .dropdown-menu{
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  .form-control,
  input,
  textarea,
  select,
  .Select-control,
  .Select-placeholder,
  .Select-value-label,
  .Select-input input,
  .Select-option,
  .VirtualizedSelectOption,
  .VirtualizedSelectFocusedOption{
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  /* Dropdowns con nombres de personas: Data Editing + Influence Network */
  #de-query .Select-control,
  #infnet-search .Select-control,
  #infnet-grouping-mode .Select-control,
  #infnet-compare-b .Select-control,
  #infnet-path-b .Select-control,
  #infnet-path-allowed .Select-control{
    font-size: 10px !important;
    min-height: 30px !important;
  }

  #de-query .Select-placeholder,
  #de-query .Select-value-label,
  #de-query .Select-input input,
  #infnet-search .Select-placeholder,
  #infnet-search .Select-value-label,
  #infnet-search .Select-input input,
  #infnet-grouping-mode .Select-placeholder,
  #infnet-grouping-mode .Select-value-label,
  #infnet-grouping-mode .Select-input input,
  #infnet-compare-b .Select-placeholder,
  #infnet-compare-b .Select-value-label,
  #infnet-compare-b .Select-input input,
  #infnet-path-b .Select-placeholder,
  #infnet-path-b .Select-value-label,
  #infnet-path-b .Select-input input,
  #infnet-path-allowed .Select-placeholder,
  #infnet-path-allowed .Select-value-label,
  #infnet-path-allowed .Select-input input{
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  #de-query .Select-menu-outer,
  #infnet-search .Select-menu-outer,
  #infnet-grouping-mode .Select-menu-outer,
  #infnet-compare-b .Select-menu-outer,
  #infnet-path-b .Select-menu-outer,
  #infnet-path-allowed .Select-menu-outer,
  #de-query .VirtualizedSelectOption,
  #infnet-search .VirtualizedSelectOption,
  #infnet-grouping-mode .VirtualizedSelectOption,
  #infnet-compare-b .VirtualizedSelectOption,
  #infnet-path-b .VirtualizedSelectOption,
  #infnet-path-allowed .VirtualizedSelectOption,
  #de-query .VirtualizedSelectFocusedOption,
  #infnet-search .VirtualizedSelectFocusedOption,
  #infnet-grouping-mode .VirtualizedSelectFocusedOption,
  #infnet-compare-b .VirtualizedSelectFocusedOption,
  #infnet-path-b .VirtualizedSelectFocusedOption,
  #infnet-path-allowed .VirtualizedSelectFocusedOption{
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  .project-bar .project-bar-label,
  .project-bar .project-dd .Select-control,
  .project-bar .project-dd .Select-placeholder,
  .project-bar .project-dd .Select-value-label,
  .timebar .timebar-label,
  .timebar .timebar-input{
    font-size: 10px !important;
  }

  .project-bar .project-dd .Select-control{
    height: 40px !important;
    min-height: 40px !important;
  }

  .project-bar .project-dd .Select-value,
  .project-bar .project-dd .Select-placeholder,
  .project-bar .project-dd .Select-value-label{
    line-height: 38px !important;
  }

  .project-bar .project-dd .Select-input{
    height: 38px !important;
  }

  #pp-open-strategic,
  #pp-open-strategic span,
  #pp-list .pp-row-btn{
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  #pp-list .pp-row-btn small{
    font-size: 9px !important;
    line-height: 1.12 !important;
  }

  .pp-search-suggestion-name{
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  .pp-search-suggestion-subtitle{
    font-size: 9px !important;
    line-height: 1.12 !important;
  }

  .infnet-page .infnet-name-main,
  .infnet-page .infnet-compare-row{
    font-size: 10px !important;
  }

  .infnet-page .infnet-name-sub{
    font-size: 9px !important;
  }

  #de-table .dash-table-container,
  #de-table .dash-spreadsheet,
  #de-table td .dash-cell-value{
    font-size: 10px !important;
    line-height: 1.14 !important;
  }

  #de-table.de-ag-grid{
    --ag-font-size: 10px;
  }

  /* Mantener jerarquía visual en elementos de énfasis */
  .plotly-like-title,
  .card-title,
  .projects-header-card .text-muted{
    font-size: 11px !important;
  }

  .dashboard-grid .kpi-number{
    font-size: clamp(20px, 8vw, 28px) !important;
    line-height: 1.02 !important;
  }

  .dashboard-grid .kpi-label{
    font-size: 11px !important;
  }
}

/* Overview: when the viewport no longer has room for the three-column
   dashboard, keep the KPIs informative without letting them dominate the
   canvas.  The two compact cards form a 20% rail and the sector treemap uses
   the remaining visual weight. */
@media (min-width: 769px) and (max-width: 1360px){
  .dashboard-grid{
    grid-template-columns: minmax(160px, 20%) minmax(0, 1fr) !important;
    grid-template-rows: repeat(2, 150px) !important;
    grid-auto-rows: minmax(300px, auto) !important;
    grid-template-areas:
      "kpi_count sector"
      "kpi_halo sector"
      "map map"
      "favorability favorability"
      "riesgo riesgo"
      "influencia influencia"
      "afinidad afinidad"
      "interaccion interaccion";
  }

  .dashboard-grid > .dash-item-kpi-count,
  .dashboard-grid > .dash-item-kpi-halo{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch;
  }

  .dashboard-grid > .dash-item-kpi-count > .panel-card,
  .dashboard-grid > .dash-item-kpi-halo > .panel-card{
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .dashboard-grid > .dash-item-sector{
    min-height: 300px;
  }

  .dashboard-grid > .dash-item-kpi-count .kpi-number,
  .dashboard-grid > .dash-item-kpi-halo .kpi-number{
    font-size: clamp(2rem, 5vw, 3.6rem) !important;
  }

  .dashboard-grid > .dash-item-kpi-count .kpi-label,
  .dashboard-grid > .dash-item-kpi-halo .kpi-label{
    font-size: clamp(0.82rem, 1.65vw, 1.05rem) !important;
  }
}

/* On phones, place both KPIs in a compact first row.  The treemap follows
   immediately, rather than being pushed below two mostly empty cards. */
@media (max-width: 768px){
  .dashboard-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: 118px !important;
    grid-auto-rows: minmax(280px, auto) !important;
    grid-template-areas:
      "kpi_count kpi_halo"
      "sector sector"
      "map map"
      "favorability favorability"
      "riesgo riesgo"
      "influencia influencia"
      "afinidad afinidad"
      "interaccion interaccion";
  }

  .dashboard-grid > .dash-item-kpi-count,
  .dashboard-grid > .dash-item-kpi-halo{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch;
  }

  .dashboard-grid > .dash-item-kpi-count > .panel-card,
  .dashboard-grid > .dash-item-kpi-halo > .panel-card{
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .dashboard-grid > .dash-item-kpi-count .kpi-number,
  .dashboard-grid > .dash-item-kpi-halo .kpi-number{
    font-size: clamp(1.65rem, 8vw, 2.4rem) !important;
  }

  .dashboard-grid > .dash-item-kpi-count .kpi-label,
  .dashboard-grid > .dash-item-kpi-halo .kpi-label{
    font-size: clamp(0.7rem, 2.8vw, 0.9rem) !important;
    line-height: 1.18 !important;
  }

  .dashboard-grid > .dash-item-sector{
    min-height: 280px !important;
  }
}

.pp-search-suggestions-menu{
  position: absolute;
  top: calc(100% - 8px);
  left: 0;
  right: 0;
  z-index: 1100;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.pp-search-shell{
  position: relative;
  margin-bottom: 8px;
}

.pp-search-shell:not(:focus-within) .pp-search-suggestions-menu{
  display: none;
}

/* Keep the sorting control fully inside the People Panel search field. */
.pp-search-shell .input-group{
  align-items: stretch;
}

.pp-search-shell .input-group > .pp-search-field-wrap{
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  position: relative;
}

.pp-search-field-wrap > #pp-search-input{
  width: 100%;
  min-width: 0;
  height: 100%;
  border-radius: 0;
}

#pp-sort-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  line-height: 1;
  vertical-align: middle;
}

.pp-search-suggestion{
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}

.pp-search-suggestion + .pp-search-suggestion{
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.pp-search-suggestion:hover,
.pp-search-suggestion:focus-visible{
  background: #eef4ff;
  outline: none;
}

.pp-search-suggestion-name{
  font-size: 13px;
  font-weight: 700;
  color: #172033;
  line-height: 1.2;
}

.pp-search-suggestion-subtitle{
  font-size: 11px;
  color: #5b6577;
  line-height: 1.25;
}

/* iPhone portrait */
@media (max-width: 430px){
  #de-table.de-ag-grid .ag-popup-editor{
    max-width: min(86vw, 320px) !important;
  }

  #de-table.de-ag-grid .ag-popup-editor .ag-cell-edit-wrapper,
  #de-table.de-ag-grid .ag-popup-editor .ag-picker-field-wrapper{
    width: auto !important;
    min-width: 0 !important;
    max-width: min(86vw, 320px) !important;
  }

  #de-table.de-ag-grid .ag-popup .ag-select-list,
  #de-table.de-ag-grid .ag-popup .ag-rich-select-list{
    min-width: 180px !important;
    max-width: min(86vw, 320px) !important;
  }

  #de-table.de-ag-grid .ag-paging-panel{
    padding: 4px 6px !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  #de-table.de-ag-grid .ag-paging-panel > *{
    margin: 0 !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  #de-table.de-ag-grid .ag-paging-description{
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  #de-table.de-ag-grid .ag-paging-row-summary-panel,
  #de-table.de-ag-grid .ag-paging-page-summary-panel{
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    white-space: nowrap !important;
  }

  #de-table.de-ag-grid .ag-paging-row-summary-panel{
    display: none !important;
  }

  #de-table.de-ag-grid .ag-paging-button{
    min-width: 18px !important;
    width: 18px !important;
    height: 18px !important;
  }

  /* Oculta first/last en pantallas muy estrechas para reducir saltos de línea. */
  #de-table.de-ag-grid .ag-paging-button[aria-label="First Page"],
  #de-table.de-ag-grid .ag-paging-button[aria-label="Last Page"]{
    display: none !important;
  }

  #sidebar-toggle-wrap{
    width: 38px !important;
  }

  #sidebar.sidebar-collapsed{
    width: 38px !important;
    padding: 0.62rem 0.14rem !important;
  }

  #sidebar.sidebar-expanded{
    width: min(70vw, 195px) !important;
  }

  #sidebar.sidebar-collapsed ~ #page-content,
  #sidebar.sidebar-expanded ~ #page-content,
  #page-content{
    margin-left: calc(38px + 6px) !important;
  }

  #sidebar .nav-pills .nav-link{
    font-size: 10px !important;
    min-height: 34px !important;
    padding: 0.36rem 0.24rem !important;
  }

  #sidebar .menu-label{
    font-size: 10px !important;
    line-height: 1.14 !important;
  }

  #sidebar .nav-pills .nav-link .bi{
    font-size: 12px !important;
  }

  #sidebar.sidebar-collapsed .nav-pills .nav-link{
    min-height: 32px !important;
    padding: 0.32rem 0 !important;
  }

  #sidebar.sidebar-collapsed .menu-label{
    display: none !important;
  }
}

/* iPhone landscape */
@media (max-width: 932px) and (max-height: 460px){
  #sidebar-toggle-wrap{
    width: 38px !important;
  }

  #sidebar.sidebar-collapsed{
    width: 38px !important;
    padding: 0.5rem 0.14rem !important;
  }

  #sidebar.sidebar-expanded{
    width: min(62vw, 190px) !important;
  }

  #sidebar.sidebar-collapsed ~ #page-content,
  #sidebar.sidebar-expanded ~ #page-content,
  #page-content{
    margin-left: calc(38px + 6px) !important;
  }

  #sidebar .nav-pills .nav-link{
    font-size: 10px !important;
    min-height: 32px !important;
    padding: 0.32rem 0.2rem !important;
  }

  #sidebar .menu-label{
    font-size: 10px !important;
    line-height: 1.12 !important;
  }

  #sidebar .nav-pills .nav-link .bi{
    font-size: 12px !important;
  }

  #sidebar.sidebar-collapsed .nav-pills .nav-link{
    min-height: 30px !important;
    padding: 0.3rem 0 !important;
  }

  #sidebar.sidebar-collapsed .menu-label{
    display: none !important;
  }
}

@media (max-width: 430px), (max-width: 932px) and (max-height: 460px){
  #de-new-modal .modal-dialog,
  #de-new-social-modal .modal-dialog,
  #de-long-modal .modal-dialog,
  #de-photo-modal .modal-dialog{
    margin: 0.35rem auto !important;
    max-width: calc(100vw - 10px) !important;
    height: calc(100dvh - 12px) !important;
  }

  #de-new-modal .modal-content,
  #de-new-social-modal .modal-content,
  #de-long-modal .modal-content,
  #de-photo-modal .modal-content{
    max-height: calc(100dvh - 12px) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #de-new-modal .modal-body,
  #de-new-social-modal .modal-body,
  #de-long-modal .modal-body,
  #de-photo-modal .modal-body{
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
  }

  #de-new-modal .modal-footer,
  #de-new-social-modal .modal-footer,
  #de-long-modal .modal-footer,
  #de-photo-modal .modal-footer{
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    background: #fff !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    gap: 0.45rem !important;
    flex-wrap: wrap !important;
  }

  #de-new-modal .modal-footer .btn,
  #de-new-social-modal .modal-footer .btn,
  #de-long-modal .modal-footer .btn,
  #de-photo-modal .modal-footer .btn{
    flex: 1 1 auto !important;
    min-width: 120px !important;
  }
}

/* =========================
   10) Settings Module
   ========================= */
.config-page .card{
  border: 1px solid var(--panel-border-color);
  background: var(--bg);
}

.cfg-section-title{
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.cfg-info-heading{
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.cfg-info-btn{
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cfg-info-btn:hover,
.cfg-info-btn:focus{
  color: var(--text);
}

.cfg-support-grid,
.cfg-security-grid{
  align-items: stretch;
}

.cfg-support-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 18px;
  align-items: stretch;
}

.cfg-support-panel{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--panel-border-color);
  border-radius: 18px;
  background: var(--section-bg);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.cfg-support-form-panel{
  height: 100%;
}

.cfg-support-status-panel{
  min-width: 0;
}

.cfg-support-copy{
  margin: -0.2rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.cfg-support-note{
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.cfg-support-meta-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cfg-support-field{
  margin-bottom: 0;
  min-width: 0;
}

.cfg-support-field .form-label{
  font-weight: 600;
  margin-bottom: 0.38rem;
}

.cfg-support-field-grow{
  flex: 1 1 auto;
}

.cfg-support-field textarea{
  resize: vertical;
}

.cfg-support-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 2px;
}

.cfg-support-actions > :first-child{
  flex: 1 1 auto;
  min-width: 0;
}

.cfg-support-submit{
  min-width: 170px;
  white-space: nowrap;
  align-self: flex-end;
}

.cfg-support-status-table{
  flex: 1 1 auto;
  min-height: 220px;
}

.cfg-security-block{
  min-width: 0;
}

.cfg-scroll-panel{
  max-height: 360px;
  overflow: auto;
  padding-right: 0.2rem;
}

.cfg-scroll-panel .cfg-users-table{
  margin-bottom: 0;
}

.cfg-ticket-row{
  cursor: pointer;
}

.cfg-ticket-row:hover td{
  background: #f7faff;
}

.cfg-ticket-detail-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.cfg-ticket-detail-item,
.cfg-ticket-detail-block{
  padding: 12px 14px;
  border: 1px solid #e6edf8;
  border-radius: 14px;
  background: #fbfdff;
}

.cfg-ticket-detail-label{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6c7ea2;
  margin-bottom: 6px;
}

.cfg-ticket-detail-value{
  color: #203354;
  font-size: 0.98rem;
  line-height: 1.45;
}

.cfg-ticket-detail-note{
  white-space: pre-wrap;
  word-break: break-word;
}

:root[data-app-theme="dark"] .cfg-ticket-row:hover td{
  background: rgba(124, 168, 255, 0.08);
}

:root[data-app-theme="dark"] .cfg-ticket-detail-item,
:root[data-app-theme="dark"] .cfg-ticket-detail-block{
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
}

:root[data-app-theme="dark"] .cfg-ticket-detail-label{
  color: #9db2d6;
}

:root[data-app-theme="dark"] .cfg-ticket-detail-value{
  color: #e7eefc;
}

.control-console-log{
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #e7edfb;
  border-radius: 14px;
  background: #f8fbff;
  color: #243a63;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 12px;
  line-height: 1.5;
  max-height: 280px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

:root[data-app-theme="dark"] .control-console-log{
  border-color: rgba(255,255,255,0.12);
  background: #121924;
  color: #d9e5fb;
}

.cfg-pagination-bar{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.cfg-page-indicator{
  min-width: 112px;
  text-align: center;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
}

.cfg-page-btn{
  min-width: 92px;
}

.support-center-page{
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 20px 28px;
}

.support-center-hero{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 28px;
  border-radius: 22px;
  border: 1px solid var(--panel-border-color);
  background:
    radial-gradient(circle at top right, rgba(92, 112, 255, 0.18), transparent 42%),
    linear-gradient(135deg, #ffffff 0%, #f6f9ff 100%);
  box-shadow: 0 18px 36px rgba(18, 38, 63, 0.06);
}

.support-center-eyebrow{
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #5c70ff;
  margin-bottom: 6px;
}

.support-center-title{
  margin: 0;
  font-size: 1.85rem;
  font-weight: 700;
  color: #16213f;
}

.support-center-subtitle{
  margin: 10px 0 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.55;
}

.support-center-refresh-btn{
  min-width: 148px;
  white-space: nowrap;
}

.support-center-hero-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.support-center-back-btn{
  min-width: 168px;
  white-space: nowrap;
}

.support-center-toolbar{
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 14px;
  align-items: end;
}

.support-center-toolbar-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.support-center-toolbar-field-grow{
  min-width: 0;
}

.support-center-toolbar-label,
.support-center-field-label{
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #5d6885;
  margin: 0;
}

.support-center-search,
.support-center-note{
  width: 100%;
  border: 1px solid var(--panel-border-color);
  border-radius: 14px;
  background: #fff;
  color: #243252;
  padding: 11px 12px;
  font-size: 0.95rem;
  box-shadow: inset 0 1px 2px rgba(20, 33, 61, 0.03);
}

.support-center-note{
  min-height: 96px;
  resize: vertical;
}

.support-center-loader{
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--panel-border-color);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,249,255,0.98) 100%);
}

.support-center-metrics{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.support-center-metric-card{
  padding: 15px 16px;
  border-radius: 18px;
  border: 1px solid var(--panel-border-color);
  background: #fff;
  box-shadow: 0 8px 24px rgba(18, 38, 63, 0.05);
}

.support-center-metric-label{
  font-size: 0.78rem;
  font-weight: 700;
  color: #66728d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.support-center-metric-value{
  margin-top: 8px;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
  color: #18284a;
}

.support-center-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.support-center-card{
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid var(--panel-border-color);
  background: #fff;
  box-shadow: 0 12px 28px rgba(18, 38, 63, 0.05);
}

.support-center-card-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.support-center-card-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.support-center-chip{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #edf2ff;
  color: #2542b3;
  font-size: 0.8rem;
  font-weight: 700;
}

.support-center-chip-muted{
  background: #f4f6fb;
  color: #5f6b86;
}

.support-center-badge{
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.support-center-badge-open{
  background: #eef3ff;
  color: #2351c3;
}

.support-center-badge-in-progress{
  background: #fff3e4;
  color: #ab5e06;
}

.support-center-badge-waiting-on-client{
  background: #fff4ec;
  color: #b4631b;
}

.support-center-badge-resolved{
  background: #e8f8f0;
  color: #1c7a47;
}

.support-center-badge-closed{
  background: #eff2f7;
  color: #5f6b86;
}

.support-center-kpi-btn{
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

.support-center-kpi-btn .control-metric-card{
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.support-center-kpi-btn:hover .control-metric-card,
.support-center-kpi-btn.is-active .control-metric-card{
  border-color: rgba(44, 95, 204, 0.26);
  box-shadow: 0 10px 20px rgba(44, 95, 204, 0.08);
}

.support-center-kpi-btn.is-active .control-metric-card{
  transform: translateY(-1px);
}

.support-center-card-title{
  margin: 0 0 8px;
  font-size: 1.12rem;
  font-weight: 700;
  color: #18284a;
}

.support-center-card-meta{
  font-size: 0.88rem;
  color: #6a768f;
}

.support-center-card-body{
  margin: 10px 0 0;
  white-space: pre-wrap;
  color: #33415d;
  line-height: 1.55;
}

.support-center-card-details{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.projects-kr-summary{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.projects-kr-table{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.projects-kr-grid{
  min-width: 1080px;
  table-layout: fixed;
}

.projects-kr-grid > tbody > tr:hover > *{
  background-color: transparent !important;
}

.projects-kr-grid td{
  vertical-align: middle;
}

.projects-kr-grid th{
  vertical-align: top;
}

.projects-kr-progress-cell{
  vertical-align: top;
  padding-top: 28px !important;
}

.projects-kr-grid th:nth-child(3){
  white-space: nowrap;
}

.projects-kr-main{
  font-weight: 700;
  color: var(--bs-body-color, #17284a);
  line-height: 1.4;
}

.projects-kr-meta-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(110px, 0.55fr) minmax(120px, 0.6fr);
  gap: 10px;
}

.projects-kr-meta-item{
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand-accent-soft, #e7f0ff) 30%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-accent, #0d6efd) 15%, #fff);
}

.projects-kr-meta-label{
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-accent-strong, #0a58ca);
  margin-bottom: 4px;
}

.projects-kr-meta-value{
  color: var(--bs-body-color, #243858);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: break-word;
}

.projects-kr-progress-block{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  min-width: 280px;
  min-height: 100%;
}

.projects-kr-progress-top{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

.projects-kr-progress-heading{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.projects-kr-progress-label{
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-accent-strong, #0a58ca);
}

.projects-kr-progress-value{
  color: var(--brand-accent-strong, #0a58ca);
  font-weight: 700;
  min-width: 0;
  text-align: left;
}

.projects-kr-progress-controls{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px;
  min-width: 280px;
  width: 100%;
}

.projects-kr-progress-slider-wrap{
  min-width: 150px;
  padding-top: 2px;
}

.projects-kr-progress-slider-wrap > div{
  width: 100%;
  min-width: 0;
}

.projects-kr-progress-slider-wrap .rc-slider{
  width: 100%;
  margin: 0;
}

.projects-kr-progress-input{
  min-height: 32px;
  height: 32px;
  padding: 2px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.1;
  align-self: start;
  margin-top: -14px;
}

.projects-kr-halo-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  height: 100%;
}

.projects-halo-badge{
  display: inline-block;
  min-width: 62px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--brand-accent-strong, #0a58ca);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.projects-halo-badge--very-high{
  background: #0f7a3d;
}

.projects-halo-badge--high{
  background: #20a55a;
}

.projects-halo-badge--medium{
  background: #e6a700;
  color: #1c2f54;
}

.projects-halo-badge--low{
  background: #e36d22;
}

.projects-halo-badge--very-low{
  background: #c6302c;
}

.projects-halo-badge--unknown{
  background: var(--bs-secondary-bg, #6c757d);
}

.projects-kr-edit-btn{
  white-space: nowrap;
}

.projects-kr-modal-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.projects-kr-modal-field{
  min-width: 0;
}

:root[data-app-theme="dark"] .projects-kr-main{
  color: #edf3ff;
}

:root[data-app-theme="dark"] .projects-order-group{
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}

:root[data-app-theme="dark"] .projects-order-row-kr{
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.08);
}

:root[data-app-theme="dark"] .projects-order-badge{
  background: rgba(124, 168, 255, 0.12);
  color: #cfe0ff;
}

:root[data-app-theme="dark"] .projects-order-badge-kr{
  background: rgba(255,255,255,0.05);
  color: #aebfdf;
}

:root[data-app-theme="dark"] .projects-order-label{
  color: #edf3ff;
}

:root[data-app-theme="dark"] .projects-order-empty{
  color: #9db0cf;
}

:root[data-app-theme="dark"] .projects-kr-meta-item{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}

:root[data-app-theme="dark"] .projects-kr-meta-label,
:root[data-app-theme="dark"] .projects-kr-progress-label{
  color: #9db0cf;
}

:root[data-app-theme="dark"] .projects-kr-meta-value{
  color: #edf3ff;
}

.support-center-detail{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f8faff;
  border: 1px solid #e6edff;
}

.support-center-detail-label{
  font-size: 0.74rem;
  font-weight: 700;
  color: #73819f;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.support-center-detail-value{
  font-size: 0.93rem;
  color: #1f2f4e;
  word-break: break-word;
}

.support-center-card-controls{
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.support-center-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.support-center-field-grow{
  min-width: 0;
}

.support-center-inline-dropdown{
  min-width: 0;
}

.support-center-action{
  display: flex;
  align-items: flex-end;
}

.support-center-save-btn{
  min-width: 156px;
  white-space: nowrap;
}

.support-center-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 260px;
  padding: 24px;
  border-radius: 20px;
  border: 1px dashed #cfd7eb;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  text-align: center;
}

.support-center-empty-title{
  font-size: 1rem;
  font-weight: 700;
  color: #223251;
}

.support-center-empty-copy{
  max-width: 460px;
  color: #6e7892;
  line-height: 1.55;
}

.workspace-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 320px;
  width: min(640px, 100%);
  padding: 28px;
  border-radius: 22px;
  border: 1px dashed #cfd7eb;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  text-align: center;
  box-shadow: 0 12px 32px rgba(24, 39, 75, 0.08);
}

.workspace-empty-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: #eef4ff;
  color: #274171;
  font-size: 1.7rem;
}

.workspace-empty-title{
  font-size: 1.15rem;
  font-weight: 700;
  color: #223251;
}

.workspace-empty-copy{
  max-width: 520px;
  color: #5f6f8d;
  line-height: 1.6;
}

.workspace-empty-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 4px;
}

.workspace-empty-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 172px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.workspace-empty-btn:hover{
  transform: translateY(-1px);
  text-decoration: none;
}

.workspace-empty-btn-primary{
  background: #111827;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.18);
}

.workspace-empty-btn-primary:hover{
  color: #ffffff;
  background: #1f2937;
}

.workspace-empty-btn-secondary{
  background: #f3f4f6;
  color: #223251;
  border: 1px solid #d7dfef;
}

.workspace-empty-btn-secondary:hover{
  color: #223251;
  background: #eef2f7;
}

.workspace-empty-note{
  max-width: 520px;
  color: #7a859c;
  font-size: 0.92rem;
  line-height: 1.55;
}

/* Workspace CSV import: make drag-and-drop discoverable and distinguish the
   file's headers from Polaris destination fields. */
.ws-bi-upload-dropzone{
  width: 100%;
  max-width: 640px;
  border: 1.5px dashed #9db7eb;
  border-radius: 14px;
  background: #f8fbff;
  color: #223251;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.ws-bi-upload-dropzone:hover{
  border-color: var(--brand-accent, #1677ff);
  background: #f1f7ff;
  box-shadow: 0 8px 20px rgba(22, 119, 255, .10);
}

.ws-bi-upload-dropzone-copy{
  min-height: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 18px;
  text-align: center;
}

.ws-bi-upload-icon{
  color: var(--brand-accent, #1677ff);
  font-size: 1.45rem;
}

.ws-bi-source-column{
  overflow-wrap: anywhere;
  color: #33476d;
  font-size: .95rem;
}

/* Durable import/RI status uses verified milestones, not estimated percentages. */
.workspace-import-readiness-steps{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .85rem;
  margin-top: .65rem;
}

.workspace-import-readiness-step{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .84rem;
  white-space: nowrap;
}

.workspace-import-readiness-step.is-complete{ color: #16734d; }
.workspace-import-readiness-step.is-active{ color: #0b63ce; font-weight: 650; }
.workspace-import-readiness-step.is-active .bi{ animation: workspace-import-spin 1.4s linear infinite; }
.workspace-import-readiness-step.is-pending{ color: #75839a; }
.workspace-import-readiness-step.is-attention{ color: #9a6700; font-weight: 650; }

.workspace-import-readiness--compact{
  padding: .65rem .75rem;
}

.workspace-import-readiness--compact .workspace-import-readiness-steps{
  gap: .35rem .65rem;
}

.workspace-import-readiness--compact .workspace-import-readiness-step{
  font-size: .78rem;
}

.projects-import-readiness .alert{
  margin-bottom: .75rem;
}

.cfg-project-import-readiness-list .workspace-import-readiness{
  margin-bottom: .6rem;
}

@keyframes workspace-import-spin{
  to{ transform: rotate(360deg); }
}

@media (max-width: 1200px){
  .support-center-metrics{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .support-center-card-controls{
    grid-template-columns: 1fr;
  }

  .support-center-action{
    justify-content: flex-start;
  }
}

@media (max-width: 860px){
  .support-center-page{
    padding: 12px 12px 24px;
  }

  .support-center-hero{
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }

  .support-center-hero-actions{
    width: 100%;
    justify-content: flex-start;
  }

  .support-center-toolbar{
    grid-template-columns: 1fr;
  }

  .support-center-metrics{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .support-center-card-details{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px){
  .support-center-metrics{
    grid-template-columns: 1fr;
  }

  .support-center-card{
    padding: 16px;
  }

  .support-center-card-header{
    flex-direction: column;
  }

  .support-center-back-btn,
  .support-center-save-btn,
  .support-center-refresh-btn{
    width: 100%;
  }
}

/* =========================
   11) Control Center
   ========================= */
.control-shell{
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  min-height: calc(100vh - 2.5rem);
}

.control-shell-sidebar{
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 18px;
  border-radius: 28px;
  border: 1px solid rgba(25, 50, 91, 0.08);
  background:
    radial-gradient(circle at top left, rgba(76, 111, 255, 0.18), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);
  box-shadow: 0 18px 44px rgba(15, 35, 71, 0.08);
}

.control-shell-brand-title{
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #17264a;
}

.control-shell-brand-subtitle{
  margin-top: 2px;
  font-size: 0.86rem;
  color: #62708b;
}

.control-shell-chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.control-shell-chip{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eaf0ff;
  color: #2448c7;
  font-size: 0.78rem;
  font-weight: 700;
}

.control-shell-chip-muted{
  background: #f2f5fb;
  color: #67738f;
}

.control-shell-operator-card{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(25, 50, 91, 0.08);
  background: rgba(255, 255, 255, 0.82);
}

.control-shell-operator-label{
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6f7d98;
}

.control-shell-operator-name{
  font-size: 0.98rem;
  font-weight: 700;
  color: #17264a;
}

.control-shell-operator-email{
  font-size: 0.84rem;
  color: #5f6d88;
  word-break: break-word;
}

.control-shell-nav{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.control-shell-nav-link{
  text-decoration: none;
  color: inherit;
}

.control-shell-nav-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  color: #43516f;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.control-shell-nav-link:hover .control-shell-nav-row{
  background: rgba(47, 92, 255, 0.08);
  color: #183487;
  transform: translateX(2px);
}

.control-shell-nav-link.is-active .control-shell-nav-row{
  background: linear-gradient(135deg, #256bff 0%, #4b80ff 100%);
  color: #fff;
  box-shadow: 0 14px 24px rgba(37, 107, 255, 0.28);
}

.control-shell-nav-icon{
  font-size: 1rem;
  width: 18px;
  text-align: center;
}

.control-shell-nav-label{
  font-size: 0.95rem;
  font-weight: 700;
}

.control-shell-sidebar-footer{
  margin-top: auto;
}

.control-shell-back-btn{
  width: 100%;
  border-radius: 16px;
}

.control-shell-main{
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.control-shell-topbar{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, auto);
  gap: 16px;
  align-items: end;
  padding: 24px 26px;
  border-radius: 28px;
  border: 1px solid rgba(25, 50, 91, 0.08);
  background:
    radial-gradient(circle at top right, rgba(47, 92, 255, 0.16), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  box-shadow: 0 18px 44px rgba(15, 35, 71, 0.08);
}

.control-shell-eyebrow{
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: #2d5cff;
  margin-bottom: 8px;
}

.control-shell-title{
  margin: 0;
  font-size: 2rem;
  line-height: 1.05;
  font-weight: 800;
  color: #162547;
}

.control-shell-subtitle{
  margin: 10px 0 0;
  max-width: 760px;
  color: #65718c;
  font-size: 0.98rem;
  line-height: 1.6;
}

.control-shell-tools{
  display: grid;
  grid-template-columns: minmax(220px, 320px) auto;
  gap: 12px;
  align-items: center;
}

.control-shell-search{
  border-radius: 16px;
}

.control-shell-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.control-shell-ghost-btn,
.control-shell-primary-btn,
.control-inline-btn{
  border-radius: 16px;
  white-space: nowrap;
}

.control-shell-content{
  min-width: 0;
}

.control-view-stack{
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.control-metric-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.control-metric-card{
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(25, 50, 91, 0.08);
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 35, 71, 0.05);
}

.control-metric-card.tone-warning{
  background: linear-gradient(180deg, #fff8ef 0%, #ffffff 100%);
}

.control-metric-card.tone-success{
  background: linear-gradient(180deg, #f1fbf6 0%, #ffffff 100%);
}

.control-metric-label{
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #68748f;
  text-transform: uppercase;
}

.control-metric-value{
  margin-top: 10px;
  font-size: 1.72rem;
  line-height: 1;
  font-weight: 800;
  color: #17264a;
}

.control-two-col,
.control-audit-grid,
.control-onb-grid{
  display: grid;
  gap: 16px;
}

.cc-tenants-top-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 0.65fr);
  align-items: start;
}

.control-two-col{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.control-audit-grid{
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  align-items: stretch;
}

.control-onb-grid{
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  align-items: start;
}

.control-panel{
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px;
  border-radius: 24px;
  border: 1px solid rgba(25, 50, 91, 0.08);
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  box-shadow: 0 14px 30px rgba(15, 35, 71, 0.05);
}

.control-panel-stretch{
  height: 100%;
}

.control-panel-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.control-panel-eyebrow{
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: #2b61ff;
  margin-bottom: 6px;
}

.control-panel-title{
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.2;
  font-weight: 800;
  color: #17264a;
}

.control-panel-body{
  min-width: 0;
}

.control-panel-loader{
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 24px;
  border: 1px dashed #d7deef;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
}

.control-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control-list-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(25, 50, 91, 0.07);
}

.control-list-row-button{
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.control-list-row-button:hover{
  transform: translateY(-1px);
  border-color: rgba(37, 107, 255, 0.22);
  box-shadow: 0 12px 22px rgba(37, 107, 255, 0.08);
}

.control-list-row-button.is-selected{
  border-color: rgba(37, 107, 255, 0.28);
  box-shadow: 0 14px 28px rgba(37, 107, 255, 0.12);
}

.control-list-copy{
  min-width: 0;
}

.control-list-title{
  font-size: 0.98rem;
  line-height: 1.3;
  font-weight: 700;
  color: #1a294d;
}

.control-list-subtitle{
  margin-top: 4px;
  color: #6a7691;
  font-size: 0.88rem;
  line-height: 1.5;
}

.control-list-side{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.control-list-meta{
  color: #6a7691;
  font-size: 0.8rem;
  font-weight: 600;
}

.control-inline-progress{
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  color: #6a7691;
  font-size: 0.8rem;
  font-weight: 600;
}

.control-inline-progress-live{
  display: inline-flex;
  align-items: center;
}

/* Profile saving copy is rendered with the active server locale.  Toggle it
   from the button's Dash `running` state so it is visible immediately without
   replacing its localized children with a hard-coded client string. */
#cfg-profile-save-progress{
  display: none;
}

.cfg-profile-fields:has(#cfg-profile-save:disabled) #cfg-profile-save-progress{
  display: inline-flex;
}

.control-status-pill,
.control-actor-pill{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef3ff;
  color: #2746b6;
  font-size: 0.78rem;
  font-weight: 700;
}

.control-actor-pill{
  background: #f4f7fc;
  color: #5c6985;
}

.control-status-pill.is-info{
  background: #eef3ff;
  color: #2746b6;
}

.control-status-pill.is-success{
  background: #eefbf5;
  color: #23724a;
}

.control-status-pill.is-warning{
  background: #fff6e8;
  color: #aa6214;
}

.control-status-pill.is-danger{
  background: #fff1f1;
  color: #b53b3b;
}

.control-status-pill.is-muted{
  background: #f4f7fc;
  color: #5c6985;
}

.control-empty-copy{
  color: #6b7893;
  line-height: 1.6;
}

.control-detail-stack{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.control-detail-block{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(25, 50, 91, 0.07);
}

.control-detail-split-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
  gap: 18px;
  align-items: start;
}

.control-detail-split-pane{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.control-detail-split-pane-cta{
  justify-content: space-between;
}

.control-detail-kicker{
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: #60708b;
}

.control-detail-headline{
  font-size: 1.15rem;
  line-height: 1.25;
  font-weight: 800;
  color: #17264a;
}

.control-detail-headline.small{
  font-size: 1rem;
}

.control-detail-subtitle{
  color: #69758f;
  line-height: 1.5;
}

.control-detail-copy{
  color: #4b5a78;
  line-height: 1.65;
}

.control-detail-inline{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(25, 50, 91, 0.08);
}

.control-detail-key{
  color: #62708b;
  font-size: 0.84rem;
  font-weight: 700;
}

.control-detail-value{
  color: #1b2b4f;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: right;
}

.control-detail-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.control-detail-list-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(25, 50, 91, 0.06);
}

.control-inline-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 6px;
}

.control-inline-feedback{
  min-height: 0;
}

.control-inline-progress-wrap{
  min-height: 24px;
}

.control-inline-progress{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #37507d;
  font-size: 0.92rem;
  font-weight: 600;
}

.control-inline-progress-copy{
  line-height: 1.2;
}

.control-inline-progress-spinner{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(62, 106, 193, 0.18);
  border-top-color: #2c5fcc;
  animation: control-inline-spin 0.7s linear infinite;
  flex: 0 0 auto;
}

@keyframes control-inline-spin{
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.control-inline-split{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.control-compact-panel{
  gap: 10px;
  padding: 14px 16px;
  min-width: 340px;
  flex: 1 1 420px;
  max-width: 560px;
}

.control-slider{
  padding: 4px 6px 0;
}

.control-compact-panel .rc-slider-mark-text{
  font-size: 0.76rem;
  color: #6a7691;
}

.control-code-inline{
  font-family: "SFMono-Regular", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
}

.control-provisioning-note{
  min-height: 120px;
  width: 100%;
}

.control-timeline{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control-timeline-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(25, 50, 91, 0.07);
}

.control-timeline-main{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.control-timeline-index{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #eef3ff;
  color: #2349be;
  font-size: 0.82rem;
  font-weight: 800;
}

.control-event-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control-event-row{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(25, 50, 91, 0.07);
}

.control-steps-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.control-step-card{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(25, 50, 91, 0.08);
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 35, 71, 0.04);
}

.control-step-card.is-active{
  border-color: rgba(37, 107, 255, 0.32);
  box-shadow: 0 12px 22px rgba(37, 107, 255, 0.09);
}

.control-step-card.is-complete{
  background: linear-gradient(180deg, #f1fbf6 0%, #ffffff 100%);
}

.control-step-number{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef3ff;
  color: #2349be;
  font-size: 0.82rem;
  font-weight: 800;
}

.control-step-label{
  font-size: 0.86rem;
  line-height: 1.35;
  font-weight: 700;
  color: #203257;
}

.control-progress{
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
}

.control-progress .progress-bar{
  background: linear-gradient(90deg, #256bff 0%, #5d87ff 100%);
}

.control-onb-main{
  min-width: 0;
}

.control-onb-section{
  display: none;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(25, 50, 91, 0.08);
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  box-shadow: 0 12px 28px rgba(15, 35, 71, 0.05);
}

.control-radio-group .form-check{
  margin-bottom: 8px;
}

.control-help-copy{
  color: #68748f;
  line-height: 1.6;
}

.control-onb-summary-panel{
  position: sticky;
  top: 0;
}

.control-onb-footer{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 1320px){
  .control-shell{
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .control-steps-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px){
  .control-shell{
    grid-template-columns: 1fr;
  }

  .control-shell-sidebar{
    position: static;
  }

  .control-shell-topbar{
    grid-template-columns: 1fr;
  }

  .control-shell-tools{
    grid-template-columns: 1fr;
  }

  .control-shell-actions{
    justify-content: flex-start;
  }

  .control-inline-split{
    align-items: stretch;
  }

  .control-metric-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-audit-grid,
  .control-onb-grid,
  .control-two-col,
  .cc-tenants-top-grid{
    grid-template-columns: 1fr;
  }

  .control-onb-summary-panel{
    position: static;
  }
}

@media (max-width: 720px){
  .control-shell-topbar{
    padding: 20px;
  }

  .control-shell-title{
    font-size: 1.55rem;
  }

  .control-metric-grid,
  .control-steps-grid{
    grid-template-columns: 1fr;
  }

  .control-detail-split-grid{
    grid-template-columns: 1fr;
  }

  .control-list-row,
  .control-detail-inline{
    flex-direction: column;
    align-items: flex-start;
  }

  .control-list-side{
    align-items: flex-start;
  }

  .control-onb-footer{
    justify-content: stretch;
  }

  .control-onb-footer .btn{
    width: 100%;
  }
}

/* Ensure settings tooltips render above modal layers and are not clipped */
#cfg-new-user-modal .modal-content,
#cfg-new-user-modal .modal-body{
  overflow: visible;
}

.cfg-avatar-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cfg-avatar-preview{
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--panel-border-color);
  background: #f3f6ff;
}

.cfg-profile-layout{
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.cfg-settings-top-grid{
  display: grid;
  /* Do not give the cards fixed minimum widths: Settings lives beside the
     application sidebar, so the available canvas is narrower than the window.
     minmax(0, …) lets both cards shrink without creating a horizontal page
     scroll; the breakpoint below stacks them before their contents get tight. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.cfg-profile-card,
.cfg-branding-card{
  height: 100%;
}

.cfg-branding-card .card-body{
  display: flex;
  flex-direction: column;
}

.cfg-profile-side{
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cfg-profile-main{
  min-width: 0;
}

.cfg-profile-fields{
  display: grid;
  gap: 13px;
}

.cfg-profile-field .form-label{
  margin-bottom: 6px;
  font-size: 0.82rem;
  font-weight: 700;
}

.cfg-profile-role-emphasis{
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
}

.cfg-profile-tenant-indicator{
  width: 220px;
  max-width: 100%;
  border: 1px solid var(--panel-border-color);
  border-radius: 12px;
  background: var(--section-bg);
  padding: 0.5rem 0.65rem;
  text-align: center;
}

.cfg-profile-tenant-label{
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.cfg-profile-tenant-value{
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 0.2rem;
  line-height: 1.2;
  color: var(--text);
}

.cfg-profile-upload-btn{
  width: 220px;
  max-width: 100%;
}

.cfg-profile-side #cfg-profile-upload-feedback{
  min-height: 1.1rem;
  text-align: center;
}

.cfg-profile-save-btn{
  width: auto;
  min-width: 132px;
  max-width: 170px;
  align-self: flex-end;
  margin-left: auto;
}

.cfg-branding-card{
  border-color: var(--panel-border-color);
}

.cfg-branding-intro{
  max-width: 760px;
  color: var(--muted);
  margin: -0.3rem 0 1rem;
}

.cfg-branding-modal-intro{
  color: var(--muted);
  margin-bottom: 1rem;
}

.cfg-branding-modal-section-title{
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.cfg-branding-modal-section-copy{
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
  margin-bottom: 0.9rem;
}

.cfg-branding-modal .modal-footer{
  align-items: center;
}

.cfg-branding-modal #cfg-branding-status{
  min-height: 1.25rem;
}

.cfg-branding-preset-panel{
  display: grid;
  grid-template-columns: minmax(230px, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: end;
  padding: 14px;
  margin-bottom: 16px;
  border: 1px solid var(--panel-border-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-accent-soft, #e7f0ff) 34%, var(--section-bg, var(--bg)));
}

.cfg-branding-preset-control .form-label{
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 7px;
}

.cfg-branding-preset-help{
  display: flex;
  gap: 8px;
  flex-direction: column;
  padding-bottom: 2px;
}

.cfg-branding-preset-kicker{
  color: var(--brand-accent-strong, var(--accent));
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cfg-branding-preset-copy{
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.4;
}

.cfg-branding-group{
  padding: 16px;
  margin-top: 12px;
  border: 1px solid var(--panel-border-color);
  border-radius: 12px;
  background: var(--section-bg, var(--bg));
}

.cfg-branding-form-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cfg-branding-field{
  min-width: 0;
  border: 1px solid var(--panel-border-color);
  border-radius: 8px;
  background: var(--shell-content-bg, var(--bg));
  padding: 11px;
}

.cfg-branding-field-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin-bottom: 9px;
}

.cfg-branding-field .form-label{
  font-size: 0.8rem;
  font-weight: 700;
  min-width: 0;
}

.cfg-branding-hex{
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.cfg-branding-field input[type="color"]{
  width: 100%;
  min-height: 34px;
  border-radius: 7px;
  cursor: pointer;
}

.cfg-branding-field-help{
  display: block;
  min-height: 2.5em;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

.cfg-branding-preview{
  display: grid;
  grid-template-columns: minmax(145px, 0.7fr) minmax(0, 2.1fr);
  gap: 0;
  width: 100%;
  max-width: 820px;
  overflow: hidden;
  border: 1px solid var(--panel-border-color);
  border-radius: 14px;
  background: var(--shell-content-bg, var(--bg));
  box-shadow: rgba(20, 35, 55, 0.05) 0 8px 22px;
}

.cfg-branding-preview-sidebar{
  min-height: 172px;
  padding: 16px 12px;
  color: var(--cfg-preview-sidebar-text, #fff);
  background: var(--cfg-preview-sidebar-bg, #111827);
}

.cfg-branding-preview-brand{
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.cfg-branding-preview-nav{
  margin-top: 22px;
  border-radius: 7px;
  padding: 8px;
  background: var(--cfg-preview-sidebar-active, #0d6efd);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
}

.cfg-branding-preview-nav-muted{
  margin-top: 9px;
  padding: 0 8px;
  color: inherit;
  font-size: 0.74rem;
  opacity: 0.82;
}

.cfg-branding-preview-panel{
  min-width: 0;
  padding: 16px;
}

.cfg-branding-preview-kicker{
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cfg-branding-preview-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.cfg-branding-preview-title{
  font-size: 0.95rem;
  font-weight: 700;
}

.cfg-branding-preview-content{
  display: grid;
  grid-template-columns: minmax(116px, 0.85fr) minmax(0, 1.4fr);
  gap: 10px;
  margin-top: 14px;
}

.cfg-branding-preview-metric-card,
.cfg-branding-preview-chart-card{
  min-height: 72px;
  padding: 11px;
  border: 1px solid var(--panel-border-color);
  border-radius: 9px;
  background: var(--shell-content-bg, var(--bg));
}

.cfg-branding-preview-metric-card{
  border-left: 3px solid var(--cfg-preview-accent, #0d6efd);
}

.cfg-branding-preview-metric{
  color: var(--cfg-preview-accent, #0d6efd);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
}

.cfg-branding-preview-metric-label,
.cfg-branding-preview-chart-label{
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.cfg-branding-preview-metric-label{
  margin-top: 7px;
}

.cfg-branding-preview-bars{
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-top: 7px;
}

.cfg-branding-preview-bars span{
  flex: 1 1 0;
  min-width: 0;
  height: 7px;
  border-radius: 999px;
}

.cfg-branding-preview-bars span:nth-child(1){ background: var(--brand-chart-1, #b5c4ff); }
.cfg-branding-preview-bars span:nth-child(2){ background: var(--brand-chart-2, #6a8eff); }
.cfg-branding-preview-bars span:nth-child(3){ background: var(--brand-chart-3, #235eff); }
.cfg-branding-preview-bars span:nth-child(4){ background: var(--brand-chart-4, #003df5); }
.cfg-branding-preview-bars span:nth-child(5){ background: var(--brand-chart-5, #0029a8); }

.cfg-branding-preview-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.cfg-branding-preview-action{
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--cfg-preview-accent-soft, #e7f0ff);
  color: var(--cfg-preview-accent, #0d6efd);
  font-size: 0.7rem;
  font-weight: 700;
}

.cfg-branding-preview-scale{
  display: flex;
  gap: 4px;
}

.cfg-branding-preview-scale span{
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.cfg-branding-preview-scale span:nth-child(1){ background: var(--brand-chart-1, #b5c4ff); }
.cfg-branding-preview-scale span:nth-child(2){ background: var(--brand-chart-2, #6a8eff); }
.cfg-branding-preview-scale span:nth-child(3){ background: var(--brand-chart-3, #235eff); }
.cfg-branding-preview-scale span:nth-child(4){ background: var(--brand-chart-4, #003df5); }
.cfg-branding-preview-scale span:nth-child(5){ background: var(--brand-chart-5, #0029a8); }
}

.cfg-branding-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 14px;
}

.cfg-panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0.5rem;
}

.cfg-panel-head-left{
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.cfg-panel-head-actions{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.cfg-users-table th{
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cfg-name-sort-btn{
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  margin-left: 0.35rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cfg-name-sort-btn .bi{
  font-size: 0.82rem;
}

.cfg-name-sort-btn:hover,
.cfg-name-sort-btn:focus{
  color: #4a5568;
}

.cfg-member-search-col{
  min-width: 220px;
  max-width: 300px;
}

.cfg-member-search-col .cfg-member-search-dropdown{
  width: 100%;
}

.cfg-project-filter-col{
  min-width: 180px;
  max-width: 240px;
}

.cfg-project-filter-col .Select-control{
  min-height: 36px;
  height: 36px;
}

/* Project names are user-authored and may be substantially longer than a
   normal Select option. Dash virtualizes options at `optionHeight`, so the
   menu needs a matching, two-line-safe row instead of allowing its text to
   spill into the following option. */
.cfg-project-filter-col .Select-menu-outer{
  min-width: min(420px, calc(100vw - 3rem));
  max-height: 312px !important;
  overflow-y: auto !important;
  z-index: 3600 !important;
}

.cfg-project-filter-col .Select-option,
.cfg-project-filter-col .VirtualizedSelectOption,
.cfg-project-filter-col .VirtualizedSelectFocusedOption{
  display: flex !important;
  align-items: center;
  box-sizing: border-box;
  height: 52px !important;
  padding: 6px 12px !important;
  white-space: normal !important;
  overflow: hidden !important;
  line-height: 1.25 !important;
}

.cfg-project-filter-col .Select-value-label,
.cfg-project-filter-col .Select-placeholder{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cfg-users-table{
  width: 100%;
  table-layout: auto;
}

.cfg-users-table .cfg-inline-dropdown{
  min-width: 132px;
}

.cfg-users-table td{
  vertical-align: middle;
  word-break: normal;
  overflow-wrap: normal;
}

.cfg-exact-change-table{
  --bs-table-border-color: rgba(25, 50, 91, 0.08);
  width: 100%;
  min-width: 720px;
  table-layout: fixed;
  border-color: rgba(25, 50, 91, 0.08) !important;
}

.cfg-exact-change-table th,
.cfg-exact-change-table td{
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  border-color: rgba(25, 50, 91, 0.08) !important;
}

.cfg-exact-change-table thead th:nth-child(1),
.cfg-exact-change-table tbody td:nth-child(1){
  width: 160px;
  min-width: 160px;
}

.cfg-exact-change-table thead th:nth-child(2),
.cfg-exact-change-table thead th:nth-child(3),
.cfg-exact-change-table tbody td:nth-child(2),
.cfg-exact-change-table tbody td:nth-child(3){
  min-width: 260px;
}

.cfg-users-table th.cfg-col-role,
.cfg-users-table th.cfg-col-status,
.cfg-users-table th.cfg-col-actions{
  text-align: left;
}

.cfg-users-table td.cfg-col-role,
.cfg-users-table td.cfg-col-status{
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

.cfg-users-table td.cfg-col-actions,
.cfg-users-table th.cfg-col-actions{
  padding-left: 0.35rem;
  padding-right: 0.5rem;
}

.cfg-actions-wrap{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.42rem;
}

.cfg-action-btn{
  font-size: 0.96rem;
  line-height: 1.2;
  padding: 0.38rem 0.72rem;
  white-space: nowrap;
}

.cfg-action-icon-btn{
  min-width: 38px;
  width: 38px;
  padding-left: 0;
  padding-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cfg-action-icon-btn .bi{
  font-size: 0.95rem;
  line-height: 1;
}

.cfg-action-save-btn{
  background-color: #fff !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}

.cfg-action-save-btn .bi{
  color: var(--bs-primary);
}

.cfg-action-save-btn:hover,
.cfg-action-save-btn:focus,
.cfg-action-save-btn:active,
.cfg-action-save-btn.active{
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

.cfg-action-save-btn:hover .bi,
.cfg-action-save-btn:focus .bi,
.cfg-action-save-btn:active .bi,
.cfg-action-save-btn.active .bi{
  color: #fff;
}

.cfg-access-reset-btn{
  color: #111 !important;
}

.cfg-access-reset-btn:hover,
.cfg-access-reset-btn:focus,
.cfg-access-reset-btn:active{
  color: #111 !important;
}

.cfg-users-table .cfg-inline-dropdown .Select-control{
  min-height: 40px;
  height: 40px;
  font-size: 0.96rem;
}

.cfg-users-table .cfg-inline-dropdown .Select-placeholder,
.cfg-users-table .cfg-inline-dropdown .Select-value{
  height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 12px;
  padding-right: 34px;
  line-height: 1.2;
}

.cfg-users-table .cfg-inline-dropdown .Select-value-label{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2;
  text-align: left;
  width: 100%;
}

.cfg-users-table .cfg-inline-dropdown .Select-arrow-zone{
  width: 32px;
}

.cfg-users-table .cfg-col-role{
  min-width: 228px;
  width: 228px;
}

.cfg-users-table .cfg-col-role .cfg-inline-dropdown{
  min-width: 124px;
}

.cfg-users-table .cfg-col-status{
  min-width: 140px;
  width: 140px;
}

.cfg-users-table .cfg-col-status .cfg-inline-dropdown{
  min-width: 124px;
}

.cfg-users-table .cfg-col-actions{
  min-width: 112px;
  width: 112px;
}

.cfg-users-table .cfg-col-name{
  width: 260px;
}

.cfg-users-table .cfg-col-email{
  width: auto;
  overflow-wrap: normal;
  word-break: normal;
}

.cfg-admins-table .cfg-col-name{
  width: 31%;
  min-width: 150px;
}

.cfg-admins-table .cfg-col-email{
  width: 47%;
  min-width: 230px;
  overflow-wrap: anywhere;
}

.cfg-admins-table .cfg-col-status{
  width: 92px;
  min-width: 92px;
}

.cfg-admins-table .cfg-col-actions{
  width: 86px;
  min-width: 86px;
}

.cfg-admin-status-wrap{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.cfg-admin-status-wrap .form-check{
  margin-bottom: 0;
}

.cfg-admin-status-wrap .form-check-input{
  cursor: pointer;
}

.cfg-project-members-table .cfg-col-name{
  width: 25%;
  min-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
}

.cfg-project-members-table .cfg-col-email{
  width: auto;
  min-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
}

.cfg-project-members-table th.cfg-col-name,
.cfg-project-members-table th.cfg-col-email{
  white-space: nowrap;
}

.cfg-project-members-table .cfg-col-status{
  width: 92px;
  min-width: 92px;
}

.cfg-project-members-table .cfg-col-actions{
  width: 86px;
  min-width: 86px;
}

.cfg-project-members-table{
  min-width: 860px;
}

.cfg-access-card{
  margin-top: 1.5rem;
}

.cfg-project-management-card{
  margin-top: 1.5rem;
}

.cfg-project-management-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cfg-project-summary-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem;
}

.cfg-project-summary-item{
  min-width: 0;
  border: 1px solid var(--border, #dbe4f4);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  background: var(--surface, #fff);
}

.cfg-project-summary-name{
  font-weight: 700;
  color: var(--text, #1f2937);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.7rem;
}

.cfg-project-summary-metric{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.86rem;
}

.cfg-project-summary-metric + .cfg-project-summary-metric{
  margin-top: 0.38rem;
}

.cfg-project-summary-label{
  color: var(--muted, #687385);
}

.cfg-project-summary-value{
  color: var(--text, #1f2937);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1200px){
  .cfg-users-table .cfg-col-name{
    width: 220px;
  }

  .cfg-users-table .cfg-col-role{
    min-width: 212px;
    width: 212px;
  }

  .cfg-users-table .cfg-col-role .cfg-inline-dropdown{
    min-width: 120px;
  }

  .cfg-users-table .cfg-col-status{
    min-width: 128px;
    width: 128px;
  }

  .cfg-users-table .cfg-col-status .cfg-inline-dropdown{
    min-width: 116px;
  }

  .cfg-users-table .cfg-col-actions{
    min-width: 108px;
    width: 108px;
  }

  .cfg-admins-table .cfg-col-status{
    min-width: 88px;
    width: 88px;
  }

  .cfg-admins-table .cfg-col-actions{
    min-width: 84px;
    width: 84px;
  }

  .cfg-project-members-table .cfg-col-name{
    min-width: 146px;
  }

  .cfg-project-members-table .cfg-col-email{
    min-width: 220px;
  }

  .cfg-project-members-table .cfg-col-status{
    min-width: 84px;
    width: 84px;
  }

  .cfg-project-members-table .cfg-col-actions{
    min-width: 84px;
    width: 84px;
  }

  .cfg-actions-wrap{
    flex-wrap: wrap;
  }

  .cfg-member-search-col{
    min-width: 200px;
    max-width: 260px;
  }

  .cfg-project-filter-col{
    min-width: 170px;
    max-width: 220px;
  }
}

@media (max-width: 1500px){
  .cfg-settings-top-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 992px){
  .projects-kr-grid{
    min-width: 980px;
  }

  .projects-kr-modal-grid{
    grid-template-columns: 1fr;
  }

  .projects-kr-meta-grid{
    grid-template-columns: minmax(0, 1fr);
  }

  .projects-kr-progress-block{
    min-width: 0;
  }

  .projects-kr-progress-top{
    flex-wrap: wrap;
  }

  .projects-kr-edit-btn{
    width: 100%;
  }

  .projects-order-row{
    flex-wrap: wrap;
  }

  .projects-order-row > .btn-group{
    width: 100%;
  }

  .projects-order-row > .btn-group .btn{
    flex: 1 1 0;
  }

  .cfg-support-layout{
    grid-template-columns: 1fr;
  }

  .cfg-support-meta-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cfg-support-panel{
    padding: 16px;
  }

  .cfg-scroll-panel{
    max-height: 320px;
  }

  .cfg-pagination-bar{
    justify-content: space-between;
  }

  .cfg-profile-layout{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .cfg-branding-form-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cfg-branding-preset-panel{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cfg-branding-preview{
    grid-template-columns: 1fr;
  }

  .cfg-profile-side{
    align-items: center;
  }

  .cfg-profile-upload-btn{
    min-width: 0;
  }

  .cfg-profile-save-btn{
    width: auto;
    min-width: 132px;
    max-width: 170px;
    align-self: flex-end;
    margin-left: auto;
  }

  .cfg-panel-head{
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .cfg-panel-head-actions{
    width: 100%;
    justify-content: flex-start;
  }

  .cfg-project-management-head{
    flex-wrap: wrap;
  }

  .cfg-member-search-col{
    min-width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
  }

  .cfg-project-filter-col{
    min-width: 100%;
    max-width: 100%;
  }

  .cfg-users-table{
    min-width: 0;
  }

  .cfg-users-table .cfg-col-name,
  .cfg-users-table .cfg-col-email,
  .cfg-users-table .cfg-col-role,
  .cfg-users-table .cfg-col-status,
  .cfg-users-table .cfg-col-actions{
    width: auto !important;
    min-width: 0 !important;
  }

  .cfg-users-table colgroup,
  .cfg-users-table thead{
    display: none;
  }

  .cfg-users-table tbody tr{
    display: block;
    border: 1px solid var(--panel-border-color);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.58);
  }

  .cfg-users-table tbody td{
    display: grid;
    grid-template-columns: minmax(84px, 110px) minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    border-top: none !important;
    padding: 6px 0;
  }

  .cfg-users-table tbody td::before{
    content: attr(data-label);
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
    line-height: 1.25;
  }

  .cfg-users-table tbody td.cfg-col-actions{
    align-items: center;
  }

  .cfg-users-table tbody td.cfg-col-email{
    overflow-wrap: anywhere;
  }

  .cfg-exact-change-table{
    min-width: 680px;
  }

  .cfg-exact-change-table colgroup,
  .cfg-exact-change-table thead{
    display: table-header-group !important;
  }

  .cfg-exact-change-table tbody tr{
    display: table-row !important;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    background: transparent;
  }

  .cfg-exact-change-table tbody td{
    display: table-cell !important;
    grid-template-columns: none;
    gap: 0;
    border-top: 1px solid rgba(25, 50, 91, 0.08) !important;
    padding: 0.75rem 0.45rem;
  }

  .cfg-exact-change-table tbody td::before{
    content: none !important;
  }

  .cfg-project-members-table tbody td.cfg-col-name,
  .cfg-project-members-table tbody td.cfg-col-email{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: normal;
    word-break: normal;
  }

  .cfg-project-members-table{
    min-width: 760px;
    table-layout: auto;
  }

  .cfg-project-members-table colgroup{
    display: table-column-group;
  }

  .cfg-project-members-table thead{
    display: table-header-group;
  }

  .cfg-project-members-table tbody tr{
    display: table-row;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    background: transparent;
  }

  .cfg-project-members-table tbody td{
    display: table-cell;
    grid-template-columns: none;
    gap: 0;
    border-top: 1px solid var(--panel-border-color) !important;
    padding: 0.75rem 0.45rem;
    overflow-wrap: normal;
    word-break: normal;
  }

  .cfg-project-members-table tbody td::before{
    content: none;
  }

  .cfg-project-members-table tbody td.cfg-col-name,
  .cfg-project-members-table tbody td.cfg-col-email{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cfg-admin-status-wrap{
    width: 100%;
  }

  .cfg-users-table .cfg-inline-dropdown{
    min-width: 0;
    width: 100%;
  }

  .cfg-users-table .cfg-col-role .cfg-inline-dropdown,
  .cfg-users-table .cfg-col-status .cfg-inline-dropdown{
    min-width: 0 !important;
    width: 100% !important;
  }

  .cfg-users-table tbody td .cfg-inline-dropdown{
    justify-self: stretch;
    max-width: 100%;
  }

  .cfg-users-table .cfg-inline-dropdown .Select-control{
    font-size: 0.93rem;
  }

  .cfg-actions-wrap{
    justify-content: flex-start;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .cfg-action-btn{
    font-size: 0.92rem;
    padding: 0.34rem 0.64rem;
    width: 100%;
    margin: 0 !important;
  }

  .cfg-action-icon-btn{
    width: 100%;
    min-width: 0;
  }

  .cfg-users-table td.cfg-empty-row{
    display: block;
    padding: 8px 0;
    border: none !important;
  }

  .cfg-users-table td.cfg-empty-row::before{
    content: none;
  }
}

.config-page .toast{
  position: fixed;
  left: var(--app-toast-left, 16px);
  bottom: 16px;
  z-index: 9999;
}

@media (max-width: 576px){
  #app-shell:not(.auth-shell):not(.support-shell):has(#sidebar.sidebar-collapsed){
    --app-toast-left: calc(var(--sidebar-width-mobile) + 12px);
  }

  #app-shell:not(.auth-shell):not(.support-shell):has(#sidebar.sidebar-expanded){
    --app-toast-left: calc(min(76vw, 240px) + 12px);
  }

  #sidebar.sidebar-collapsed ~ #page-content .minutes-page{
    --minutes-toast-left: calc(var(--sidebar-width-mobile) + 12px);
  }

  #sidebar.sidebar-expanded ~ #page-content .minutes-page{
    --minutes-toast-left: calc(min(76vw, 240px) + 12px);
  }

  #sidebar.sidebar-collapsed ~ #page-content .de-page{
    --de-toast-left: calc(var(--sidebar-width-mobile) + 12px);
  }

  #sidebar.sidebar-expanded ~ #page-content .de-page{
    --de-toast-left: calc(min(76vw, 240px) + 12px);
  }

  .projects-kr-grid{
    min-width: 0;
    table-layout: auto;
  }

  .projects-kr-grid thead{
    display: none;
  }

  .projects-kr-grid tbody{
    display: block;
  }

  .projects-kr-grid tbody tr{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "details details"
      "progress progress"
      "halo actions";
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid rgba(25, 50, 91, 0.08);
  }

  .projects-kr-grid tbody td{
    display: block;
    border: none;
    padding: 0;
  }

  .projects-kr-grid tbody td:nth-child(1){
    grid-area: details;
  }

  .projects-kr-grid tbody td:nth-child(2){
    grid-area: progress;
  }

  .projects-kr-progress-cell{
    padding-top: 0 !important;
  }

  .projects-kr-grid tbody td:nth-child(3){
    grid-area: halo;
  }

  .projects-kr-grid tbody td:nth-child(4){
    grid-area: actions;
    justify-self: end;
  }

  .projects-kr-meta-label{
    font-size: 0.68rem;
  }

  .projects-kr-meta-value{
    font-size: 0.88rem;
  }

  .projects-kr-progress-top{
    align-items: center;
  }

  .projects-order-children{
    margin-left: 0;
  }

  .projects-order-badge{
    min-width: 82px;
  }

  .projects-kr-halo-wrap{
    justify-content: flex-start;
    align-items: center;
  }

  .projects-kr-progress-controls{
    min-width: 0;
  }

  .projects-kr-progress-slider-wrap{
    min-width: 0;
  }

  .cfg-scroll-panel{
    max-height: 280px;
  }

  .cfg-support-meta-grid{
    grid-template-columns: 1fr;
  }

  .cfg-support-panel{
    padding: 14px;
    border-radius: 16px;
  }

  .cfg-support-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .cfg-support-submit{
    width: 100%;
  }

  .cfg-pagination-bar{
    flex-wrap: wrap;
    gap: 8px;
  }

  .cfg-page-indicator{
    width: 100%;
    order: -1;
  }

  .cfg-page-btn{
    flex: 1 1 0;
    min-width: 0;
  }

  .cfg-inbox-note{
    min-width: 0;
    width: 100%;
  }

  .cfg-access-unsaved-toast{
    width: calc(100vw - var(--app-toast-left, 12px) - 12px);
    max-width: calc(100vw - var(--app-toast-left, 12px) - 12px);
  }

  #de-save-toast,
  #de-temp-save-toast{
    width: calc(100vw - var(--de-toast-left, 12px) - 12px);
    max-width: calc(100vw - var(--de-toast-left, 12px) - 12px);
  }

  .minutes-toast{
    width: calc(100vw - var(--minutes-toast-left, 12px) - 12px);
    max-width: calc(100vw - var(--minutes-toast-left, 12px) - 12px);
  }

  .app-shell-toast{
    width: calc(100vw - var(--app-toast-left, 12px) - 12px);
    max-width: calc(100vw - var(--app-toast-left, 12px) - 12px);
  }
}

@media (max-width: 576px){
  .cfg-avatar-preview{
    width: 108px;
    height: 108px;
  }

  .cfg-profile-upload-btn{
    width: 100%;
  }
}

/* =========================
   11) Dark Mode Overrides
   ========================= */
:root[data-app-theme="dark"] #page-content{
  background: var(--shell-content-bg);
}

:root[data-app-theme="dark"] .panel-card,
:root[data-app-theme="dark"] .panel-card .card-body{
  background: #1a2331 !important;
  border-color: rgba(232,237,247,0.12) !important;
  color: #e8edf7 !important;
  box-shadow: none !important;
}

:root[data-app-theme="dark"] .plotly-like-title{
  color: #e8edf7 !important;
}

:root[data-app-theme="dark"] .dash-page .kpi-number,
:root[data-app-theme="dark"] .dash-page .kpi-label{
  color: #e8edf7 !important;
}

:root[data-app-theme="dark"] .dash-page .dash-item-kpi-count .panel-card{
  background: #0f1725 !important;
}

:root[data-app-theme="dark"] .dash-page .dash-item-kpi-halo .panel-card{
  background: #1a2331 !important;
}

:root[data-app-theme="dark"] .ss-card,
:root[data-app-theme="dark"] .ss-card-white,
:root[data-app-theme="dark"] .ss-card-light{
  background: #1a2331 !important;
  border-color: rgba(232,237,247,0.12) !important;
  color: #e8edf7 !important;
  box-shadow: none !important;
}

:root[data-app-theme="dark"] .ss-card-dark{
  background: #0f1725 !important;
}

:root[data-app-theme="dark"] .ss-profile-header{
  background: color-mix(in srgb, var(--brand-accent-strong, #0A58CA) 38%, #1a2331) !important;
  border: 0 !important;
}

:root[data-app-theme="dark"] .ss-project-tag{
  color: #e8edf7 !important;
}

:root[data-app-theme="dark"] .ss-card-title,
:root[data-app-theme="dark"] .ss-dark-title,
:root[data-app-theme="dark"] .ss-h1,
:root[data-app-theme="dark"] .ss-h2,
:root[data-app-theme="dark"] .ss-h3,
:root[data-app-theme="dark"] .ss-link,
:root[data-app-theme="dark"] .ss-muted{
  color: #e8edf7 !important;
  opacity: 1 !important;
}

:root[data-app-theme="dark"] .ss-social{
  background: #273246 !important;
  color: #e8edf7 !important;
}

:root[data-app-theme="dark"] .ss-social-icon{
  color: #e8edf7 !important;
}

:root[data-app-theme="dark"] #de-wrapper.de-page{
  color: #e8edf7;
}

:root[data-app-theme="dark"] #de-table.de-ag-grid{
  --ag-background-color: #1a2331;
  --ag-odd-row-background-color: #1a2331;
  --ag-header-background-color: #1a2331;
  --ag-foreground-color: #e8edf7;
  --ag-border-color: rgba(232,237,247,0.16);
  --ag-row-hover-color: rgba(232,237,247,0.08);
}

:root[data-app-theme="dark"] #de-table .dash-spreadsheet-inner table{
  background: #111a28 !important;
}

:root[data-app-theme="dark"] #de-table .dash-spreadsheet-inner th,
:root[data-app-theme="dark"] #de-table .dash-spreadsheet-inner td{
  background: #1a2331 !important;
  color: #e8edf7 !important;
  border-color: rgba(232,237,247,0.14) !important;
}

:root[data-app-theme="dark"] #de-table .dash-filter input{
  background: #0f1725 !important;
  color: #e8edf7 !important;
  border-color: rgba(232,237,247,0.24) !important;
}

:root[data-app-theme="dark"] #de-table .Select-control,
:root[data-app-theme="dark"] #de-wrapper .Select-control{
  background: #1a2331 !important;
  border-color: rgba(232,237,247,0.20) !important;
  color: #e8edf7 !important;
}

:root[data-app-theme="dark"] #de-table .Select-menu-outer,
:root[data-app-theme="dark"] #de-wrapper .Select-menu-outer{
  background: #1a2331 !important;
  border-color: rgba(232,237,247,0.20) !important;
}

:root[data-app-theme="dark"] #de-table .VirtualizedSelectOption,
:root[data-app-theme="dark"] #de-wrapper .VirtualizedSelectOption{
  background: #1a2331 !important;
  color: #e8edf7 !important;
}

:root[data-app-theme="dark"] #de-table .VirtualizedSelectFocusedOption,
:root[data-app-theme="dark"] #de-wrapper .VirtualizedSelectFocusedOption{
  background: #273246 !important;
  color: #e8edf7 !important;
}

:root[data-app-theme="dark"] .infnet-page .card,
:root[data-app-theme="dark"] .minutes-page .card,
:root[data-app-theme="dark"] .projects-page .card,
:root[data-app-theme="dark"] .config-page .card{
  background: #1a2331 !important;
  border-color: rgba(232,237,247,0.12) !important;
  color: #e8edf7 !important;
}

:root[data-app-theme="dark"] .cfg-avatar-preview{
  background: #273246;
  border-color: rgba(232,237,247,0.20);
}

/* =========================
   Auth Gateway
   ========================= */
.auth-gateway-page{
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  width: 100%;
  max-width: 100%;
  padding:
    max(0.75rem, env(safe-area-inset-top))
    max(0.75rem, env(safe-area-inset-right))
    max(0.75rem, env(safe-area-inset-bottom))
    max(0.75rem, env(safe-area-inset-left));
  border-radius: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    linear-gradient(90deg, rgba(45, 127, 249, 0.14) 0%, rgba(45, 127, 249, 0.05) 18%, transparent 34%),
    linear-gradient(270deg, rgba(44, 168, 143, 0.14) 0%, rgba(44, 168, 143, 0.05) 18%, transparent 34%),
    radial-gradient(circle at -8% 12%, rgba(13, 110, 253, 0.28), transparent 34%),
    radial-gradient(circle at 108% 92%, rgba(25, 135, 84, 0.24), transparent 30%),
    linear-gradient(160deg, #f7faff 0%, #ffffff 52%, #f4f7ff 100%);
}

.auth-bg-glow{
  position: absolute;
  width: clamp(280px, 38vw, 520px);
  height: clamp(280px, 38vw, 520px);
  border-radius: 999px;
  filter: blur(54px);
  opacity: 0.3;
  pointer-events: none;
}

.auth-bg-glow-a{
  top: clamp(-160px, -16vw, -52px);
  left: clamp(-140px, -14vw, -36px);
  background: #2d7ff9;
}

.auth-bg-glow-b{
  right: clamp(-170px, -16vw, -64px);
  bottom: clamp(-180px, -18vw, -72px);
  background: #2ca88f;
}

.auth-gateway-shell{
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: calc(100dvh - max(1.5rem, calc(env(safe-area-inset-top) + env(safe-area-inset-bottom) + 1.5rem)));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.35rem, 2vh, 1.15rem) 0;
}

.auth-gateway-card{
  width: min(760px, 100%);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(112, 139, 180, 0.2);
  border-radius: 28px;
  box-shadow: 0 24px 64px rgba(23, 38, 60, 0.12);
  padding: 2.6rem 2.3rem 1.7rem;
  backdrop-filter: blur(8px);
  margin: 0 auto;
}

.auth-brand{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.auth-brand-logo{
  height: auto;
  object-fit: contain;
}

.auth-brand-logo-polaris{
  width: min(400px, 72vw);
}

.auth-brand-signoff{
  color: #5f7392;
  font-size: 1rem;
  line-height: 1.45;
  text-align: center;
}

.auth-title{
  margin: 0;
}

.auth-title-sr{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.auth-description{
  margin-top: 1.2rem;
  margin-bottom: 0;
  color: #365277;
  font-size: clamp(1.05rem, 1.55vw, 1.2rem);
  line-height: 1.5;
  text-align: left;
}

.auth-local-form,
.auth-cognito-block{
  margin-top: 1.5rem;
}

.auth-login-label{
  font-size: 0.86rem;
  color: #233b57;
  font-weight: 600;
}

.auth-login-input,
.auth-login-dropdown .Select-control{
  border-radius: 10px;
}

.auth-primary-btn{
  min-height: 0;
  border-radius: 22px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.78rem 1.6rem;
  box-shadow: 0 18px 32px rgba(13, 110, 253, 0.18);
}

.auth-login-feedback{
  margin-top: 0.65rem;
  min-height: 1.2rem;
  font-size: 0.82rem;
}

.auth-login-feedback--warning{
  min-height: auto;
  margin-top: 1rem;
  padding: 0.7rem 0.85rem;
  color: #724d00;
  background: #fff7df;
  border: 1px solid #ebc76a;
  border-radius: 10px;
  font-weight: 600;
  line-height: 1.45;
}

.auth-language-switcher{
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  margin: 1rem auto 1.25rem;
}

.auth-brand-meta{
  position: relative;
  width: 100%;
  min-height: 1.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-language-choice{
  min-width: 2.2rem;
  padding: 0.22rem 0.42rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  border-radius: 6px;
}

.auth-language-switcher-brand{
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  margin: 0;
  transform: translateY(-50%);
}

.auth-selector-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.auth-language-switcher-selector{
  margin: 0;
}

.auth-session-note{
  margin-top: 0.55rem;
  color: #5f7188;
  font-size: 0.82rem;
}

.auth-dev-hint{
  margin-top: 0.35rem;
  color: #5f7188;
  font-size: 0.78rem;
}

.auth-divider{
  margin: 0 0 1.25rem;
  border-color: rgba(71, 96, 132, 0.2);
}

.auth-help-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.auth-help-title{
  font-size: 0.86rem;
  color: #5f7392;
  margin-bottom: 0.45rem;
  font-weight: 700;
}

.auth-link{
  font-size: 0.98rem;
  font-weight: 700;
  color: #0d6efd;
  text-decoration: none;
}

.auth-link:hover{
  text-decoration: underline;
}

.auth-legal{
  margin-top: 1.35rem;
  margin-bottom: 0;
  color: #6a7f98;
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (max-width: 767px){
  #app-shell:has(#main-grid.app-main-grid.no-people) .app-mobile-people-toggle{
    display: none !important;
  }

  .auth-gateway-page{
    min-height: 100dvh;
    padding:
      max(1rem, env(safe-area-inset-top))
      max(1rem, env(safe-area-inset-right))
      max(1.1rem, env(safe-area-inset-bottom))
      max(1rem, env(safe-area-inset-left));
    border-radius: 0;
  }

  .auth-gateway-card{
    width: min(92vw, 380px);
    padding: 1.15rem 0.95rem 0.95rem;
    border-radius: 18px;
  }

  .auth-brand{
    gap: 0.28rem;
  }

  .auth-brand-logo-polaris{
    width: min(220px, 62vw);
  }

  .auth-brand-signoff{
    font-size: 0.86rem;
  }

  .auth-description{
    margin-top: 0.85rem;
    font-size: 0.92rem;
    line-height: 1.42;
  }

  .auth-primary-btn{
    min-height: 0;
    border-radius: 16px;
    padding: 0.66rem 1.05rem;
    font-size: 0.95rem;
  }

  .auth-help-grid{
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
  }

  .auth-divider{
    margin: 0 0 0.95rem;
  }

  .auth-language-switcher{
    margin: 0.85rem auto 1.05rem;
  }

  .auth-language-switcher-brand{
    position: static;
    margin: 0.38rem auto 0;
    transform: none;
  }

  .auth-selector-meta{
    align-items: flex-start;
  }

  .auth-help-title{
    font-size: 0.8rem;
  }

  .auth-link{
    font-size: 0.88rem;
  }

  .auth-legal{
    margin-top: 1rem;
    font-size: 0.74rem;
  }
}

:root[data-app-theme="dark"] .auth-gateway-page{
  background:
    linear-gradient(90deg, rgba(33, 112, 249, 0.18) 0%, rgba(33, 112, 249, 0.06) 18%, transparent 34%),
    linear-gradient(270deg, rgba(42, 168, 143, 0.16) 0%, rgba(42, 168, 143, 0.06) 18%, transparent 34%),
    radial-gradient(circle at -8% 12%, rgba(33, 112, 249, 0.34), transparent 36%),
    radial-gradient(circle at 108% 92%, rgba(42, 168, 143, 0.28), transparent 32%),
    linear-gradient(160deg, #0f151f 0%, #121a27 48%, #101826 100%);
}

:root[data-app-theme="dark"] .auth-gateway-card{
  background: rgba(19, 30, 46, 0.92);
  border-color: rgba(232, 237, 247, 0.14);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.4);
}

:root[data-app-theme="dark"] .auth-brand-signoff,
:root[data-app-theme="dark"] .auth-description,
:root[data-app-theme="dark"] .auth-help-title,
:root[data-app-theme="dark"] .auth-dev-hint,
:root[data-app-theme="dark"] .auth-legal,
:root[data-app-theme="dark"] .auth-login-label,
:root[data-app-theme="dark"] .auth-session-note{
  color: #b8c6dc;
}

:root[data-app-theme="dark"] .auth-link{
  color: #7eb4ff;
}

html:has(.auth-gateway-page),
body:has(.auth-gateway-page),
#app-shell.auth-shell,
#app-shell.auth-shell #page-content,
#app-shell.auth-shell #main-grid,
#app-shell.auth-shell #page-right,
#app-shell.auth-shell #app-page-container{
  background:
    linear-gradient(90deg, rgba(45, 127, 249, 0.14) 0%, rgba(45, 127, 249, 0.05) 18%, transparent 34%),
    linear-gradient(270deg, rgba(44, 168, 143, 0.14) 0%, rgba(44, 168, 143, 0.05) 18%, transparent 34%),
    radial-gradient(circle at -8% 12%, rgba(13, 110, 253, 0.28), transparent 34%),
    radial-gradient(circle at 108% 92%, rgba(25, 135, 84, 0.24), transparent 30%),
    linear-gradient(160deg, #f7faff 0%, #ffffff 52%, #f4f7ff 100%) !important;
}

#app-shell.auth-shell #page-content,
#app-shell.auth-shell #sidebar.sidebar-collapsed ~ #page-content,
#app-shell.auth-shell #sidebar.sidebar-expanded ~ #page-content{
  margin-left: 0 !important;
  padding: 0 !important;
}

#app-shell.auth-shell #page-right,
#app-shell.auth-shell .app-page-loader-parent,
#app-shell.auth-shell .app-page-loader,
#app-shell.auth-shell .app-page-loader-body,
#app-shell.auth-shell #app-page-container{
  min-width: 0 !important;
  width: 100% !important;
}

:root[data-app-theme="dark"]:has(.auth-gateway-page),
:root[data-app-theme="dark"] body:has(.auth-gateway-page),
:root[data-app-theme="dark"] #app-shell.auth-shell,
:root[data-app-theme="dark"] #app-shell.auth-shell #page-content,
:root[data-app-theme="dark"] #app-shell.auth-shell #main-grid,
:root[data-app-theme="dark"] #app-shell.auth-shell #page-right,
:root[data-app-theme="dark"] #app-shell.auth-shell #app-page-container{
  background:
    linear-gradient(90deg, rgba(33, 112, 249, 0.18) 0%, rgba(33, 112, 249, 0.06) 18%, transparent 34%),
    linear-gradient(270deg, rgba(42, 168, 143, 0.16) 0%, rgba(42, 168, 143, 0.06) 18%, transparent 34%),
    radial-gradient(circle at -8% 12%, rgba(33, 112, 249, 0.34), transparent 36%),
    radial-gradient(circle at 108% 92%, rgba(42, 168, 143, 0.28), transparent 32%),
    linear-gradient(160deg, #0f151f 0%, #121a27 48%, #101826 100%) !important;
}

/* Influence Network: preserve usable graph geometry as the shell changes width. */
.infnet-page #infnet-right,
.infnet-page .infnet-main-pane,
.infnet-page .infnet-side-pane,
.infnet-page .infnet-main-pane .card,
.infnet-page .infnet-main-pane .card-body,
.infnet-page .infnet-side-pane .card,
.infnet-page .infnet-side-pane .card-body{
  min-width: 0;
}

.infnet-page .infnet-control-linkmode .Select-value-label,
.infnet-page .infnet-control-linkmode .Select-placeholder,
.infnet-page .infnet-control-label-row{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.infnet-page .infnet-control-refresh #infnet-ri-full-refresh-btn{
  background-color: var(--brand-accent-strong, #0A58CA) !important;
  border-color: var(--brand-accent-strong, #0A58CA) !important;
  color: #FFFFFF !important;
}

.infnet-page .infnet-control-refresh #infnet-ri-full-refresh-btn:hover,
.infnet-page .infnet-control-refresh #infnet-ri-full-refresh-btn:focus,
.infnet-page .infnet-control-refresh #infnet-ri-full-refresh-btn:active{
  background-color: var(--brand-accent, #0D6EFD) !important;
  border-color: var(--brand-accent, #0D6EFD) !important;
  color: #FFFFFF !important;
}

.infnet-page .infnet-control-refresh #infnet-ri-full-refresh-btn .bi,
.infnet-page .infnet-control-refresh #infnet-ri-full-refresh-btn span{
  color: inherit !important;
}

/* Relationship Intelligence reflows metrics before labels lose whole words. */
.infnet-ri-insight-card{
  container-type: inline-size;
  min-width: 0;
}

.infnet-ri-card-header{
  min-width: 0;
}

.infnet-ri-metrics{
  min-width: 0;
}

.infnet-ri-metric-chip{
  min-width: 0;
}

.infnet-ri-metric-label,
.infnet-ri-metric-label > span{
  min-width: 0;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

@container (max-width: 28rem){
  .infnet-ri-metrics{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .infnet-ri-metric-chip:last-child{
    grid-column: 1 / -1;
  }
}

@container (max-width: 18rem){
  .infnet-ri-metrics{
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .infnet-ri-metric-chip:last-child{
    grid-column: auto;
  }
}

@media (min-width: 921px){
  .infnet-page .infnet-slider-label,
  .infnet-page .infnet-control-linkmode > .text-muted,
  .infnet-page .infnet-control-refresh .text-muted{
    font-size: 0.76rem !important;
    line-height: 1.1;
  }

  .infnet-page .infnet-control-linkmode > .text-muted{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .infnet-controls-row{
    display: grid !important;
    grid-template-columns: minmax(5.5rem, 1.2fr) minmax(6.5rem, 1fr) minmax(6rem, 0.9fr) minmax(8.75rem, 9.5rem);
    align-items: start !important;
    gap: 0.45rem !important;
    min-width: 0;
  }

  .infnet-controls-stack{
    grid-column: 1;
    width: auto !important;
    min-width: 0 !important;
    max-width: none;
  }

  .infnet-controls-side{
    display: contents;
  }

  .infnet-page .infnet-control-linkmode,
  .infnet-page .infnet-control-refresh{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none;
  }

  .infnet-page .infnet-control-linkmode{
    grid-column: 2;
  }

  .infnet-page .infnet-control-refresh{
    grid-column: 3;
  }

  .infnet-controls-actions{
    grid-column: 4;
    flex-direction: column;
    align-items: stretch;
    width: 100% !important;
    min-width: 0;
    margin-left: 0;
  }

  .infnet-page .infnet-control-linkmode .Select-control{
    min-height: 32px;
  }

  .infnet-page .infnet-control-linkmode .Select-placeholder,
  .infnet-page .infnet-control-linkmode .Select-value,
  .infnet-page .infnet-control-linkmode .Select-input{
    line-height: 30px;
  }

  .infnet-page .infnet-control-linkmode .Select-value-label,
  .infnet-page .infnet-control-linkmode .Select-placeholder,
  .infnet-page .infnet-control-refresh .text-muted,
  .infnet-page .infnet-control-label-row{
    font-size: 0.76rem !important;
  }

  .infnet-page .infnet-control-linkmode .VirtualizedSelectOption,
  .infnet-page .infnet-control-linkmode .VirtualizedSelectFocusedOption{
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    padding: 0.42rem 0.6rem !important;
  }

  .infnet-controls-actions .btn,
  .infnet-page .infnet-control-refresh #infnet-ri-full-refresh-btn{
    min-height: 32px;
    padding: 0.3rem 0.35rem;
    font-size: 0.74rem;
    line-height: 1.08;
  }
}

@media (min-width: 921px) and (max-width: 1280px){
  /* Tablet and narrow notebook widths cannot sustain the people rail, graph,
     and detail panel together. Keep the people panel as a short top row so
     Influence receives a full-width workspace below it. */
  #main-grid.app-main-grid.with-people.infnet-route-grid{
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: clamp(180px, 28dvh, 220px) minmax(0, 1fr) !important;
    height: 100% !important;
    gap: 0.5rem !important;
  }

  #main-grid.app-main-grid.with-people.infnet-route-grid #pp-container{
    height: clamp(180px, 28dvh, 220px) !important;
    max-height: clamp(180px, 28dvh, 220px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #main-grid.app-main-grid.with-people.infnet-route-grid #page-right{
    height: 100% !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  #main-grid.app-main-grid.with-people.infnet-route-grid #infnet-right{
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: clamp(380px, 58dvh, 620px) auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  #main-grid.app-main-grid.with-people.infnet-route-grid .infnet-main-pane{
    height: clamp(380px, 58dvh, 620px) !important;
    min-height: 0;
  }

  #main-grid.app-main-grid.with-people.infnet-route-grid .infnet-main-pane .card,
  #main-grid.app-main-grid.with-people.infnet-route-grid .infnet-main-pane .card-body{
    height: 100% !important;
  }

  #main-grid.app-main-grid.with-people.infnet-route-grid .infnet-page .infnet-graph-wrap{
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #main-grid.app-main-grid.with-people.infnet-route-grid #infnet-graph{
    min-height: 0 !important;
    height: 100% !important;
  }

  #main-grid.app-main-grid.with-people.infnet-route-grid .infnet-side-pane,
  #main-grid.app-main-grid.with-people.infnet-route-grid .infnet-side-pane .card{
    height: auto !important;
  }

  #main-grid.app-main-grid.with-people.infnet-route-grid .infnet-shell,
  #main-grid.app-main-grid.with-people.infnet-route-grid .infnet-page{
    height: auto !important;
    overflow: visible !important;
  }
}

/* Global context selectors
   ------------------------
   The normal toolbar is reserved for generous desktop widths. From 1183px
   down, one floating control panel prevents wrapping and keeps its context
   controls together. */
.app-mobile-controls{
  display: none;
}

.app-mobile-controls-toggle{
  display: none;
}

.app-global-controls-group{
  display: contents;
}

.app-mobile-controls-sheet-title{
  display: none;
}

@media (max-width: 1183px){
  .app-topbar{
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "controls avatar" !important;
    align-items: center !important;
    min-height: 52px;
  }

  .app-mobile-controls{
    display: block;
    grid-area: controls;
    min-width: 0;
    position: static;
  }

  .app-mobile-controls-toggle{
    position: fixed;
    top: max(14px, calc(env(safe-area-inset-top) + 12px));
    left: max(64px, calc(env(safe-area-inset-left) + 12px));
    z-index: 1062;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    max-width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(34, 40, 49, 0.1);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text);
    box-shadow: 0 10px 28px rgba(20, 27, 40, 0.22);
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1;
    appearance: none;
    user-select: none;
  }

  /* When the navigation rail is open, keep the trigger and its panel in
     the remaining page area instead of laying them on top of the rail. */
  #sidebar.sidebar-expanded ~ #page-content .app-mobile-controls-toggle,
  #sidebar.sidebar-expanded ~ #page-content #app-mobile-controls.is-open ~ .app-global-controls-group{
    left: calc(var(--sidebar-width-expanded) + 16px);
  }

  @media (max-width: 1024px) and (orientation: landscape){
    #sidebar.sidebar-expanded ~ #page-content .app-mobile-controls-toggle,
    #sidebar.sidebar-expanded ~ #page-content #app-mobile-controls.is-open ~ .app-global-controls-group{
      left: calc(var(--sidebar-width-responsive-expanded) + 16px);
    }
  }

  @media (max-width: 1024px) and (orientation: portrait){
    #sidebar.sidebar-expanded ~ #page-content .app-mobile-controls-toggle,
    #sidebar.sidebar-expanded ~ #page-content #app-mobile-controls.is-open ~ .app-global-controls-group{
      left: min(calc(76vw + 12px), 262px, calc(100vw - 172px));
    }
  }

  .app-mobile-controls-toggle::after{
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.16s ease;
  }

  .app-mobile-controls.is-open + .app-mobile-controls-toggle::after{
    transform: rotate(225deg) translate(-2px, -1px);
  }

  .app-mobile-controls-toggle:focus-visible{
    outline: 3px solid rgba(207, 0, 15, 0.28);
    outline-offset: 2px;
  }

  .app-mobile-controls.is-open::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(22, 28, 39, 0.42);
    backdrop-filter: blur(2px);
  }

  .app-global-controls-group{
    display: none !important;
  }

  #app-mobile-controls.is-open ~ .app-global-controls-group{
    position: fixed;
    z-index: 1051;
    top: max(80px, calc(env(safe-area-inset-top) + 74px));
    right: max(14px, calc(env(safe-area-inset-right) + 12px));
    left: max(64px, calc(env(safe-area-inset-left) + 12px));
    display: flex !important;
    flex-direction: column;
    gap: 18px;
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 100px);
    padding: 20px;
    overflow: visible;
    border: 1px solid rgba(34, 40, 49, 0.1);
    border-radius: 20px;
    background: linear-gradient(160deg, #ffffff 0%, #fafbfe 100%);
    box-shadow: 0 18px 52px rgba(12, 18, 28, 0.28);
  }

  .app-mobile-controls-sheet-title{
    display: block;
    color: var(--text);
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: 0.01em;
  }

  .app-global-controls-group .app-project-wrap:not(.hidden),
  .app-global-controls-group .app-country-wrap:not(.hidden),
  .app-global-controls-group .app-time-wrap{
    display: block !important;
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
    /* These elements are grid items in the normal responsive topbar. Reset
       their named areas before placing them in the modal grid. */
    grid-area: auto !important;
    justify-self: stretch !important;
    align-self: start !important;
    margin: 0 !important;
  }

  .app-global-controls-group .project-bar{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100% !important;
  }

  .app-global-controls-group .project-bar-label{
    color: var(--muted);
    font-size: 0.78rem !important;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .app-global-controls-group .project-bar .project-dd-wrap,
  .app-global-controls-group .country-dd-wrap{
    flex: 1 1 auto;
    max-width: none;
    width: 100% !important;
  }

  .app-global-controls-group .timebar{
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .app-global-controls-group .timebar-label{
    flex: 0 0 100% !important;
    color: var(--muted);
    font-size: 0.78rem !important;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  /* Medium widths retain a compact two-column control panel. */
  @media (min-width: 560px){
    #app-mobile-controls.is-open ~ .app-global-controls-group{
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: 18px;
      row-gap: 16px;
      align-content: start;
    }

    .app-mobile-controls-sheet-title,
    .app-global-controls-group .app-project-wrap:not(.hidden){
      grid-column: 1 / -1 !important;
    }

    .app-global-controls-group .app-country-wrap:not(.hidden){
      grid-column: 1 !important;
    }

    .app-global-controls-group .app-time-wrap{
      grid-column: 2 !important;
    }
  }

  /* A small desktop/tablet panel has enough horizontal space for a single
     control row, avoiding the intermediate topbar wrapping issue. */
  @media (min-width: 900px){
    #app-mobile-controls.is-open ~ .app-global-controls-group{
      grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr) minmax(0, 1fr);
    }

    .app-global-controls-group .app-project-wrap:not(.hidden){
      grid-column: 1 !important;
    }

    .app-global-controls-group .app-country-wrap:not(.hidden){
      grid-column: 2 !important;
    }

    .app-global-controls-group .app-time-wrap{
      grid-column: 3 !important;
    }
  }

  /* React Dates otherwise anchors the picker to the input, which can send it
     below a short viewport. Centre it above the panel and normalize its
     typography to the size of Polaris' selectors. */
  body:has(#app-mobile-controls.is-open) .SingleDatePicker_picker{
    position: fixed !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    z-index: 1065 !important;
    max-width: calc(100vw - 32px);
    transform: translate(-50%, -50%);
    box-shadow: 0 18px 52px rgba(12, 18, 28, 0.28);
  }

  body:has(#app-mobile-controls.is-open) .CalendarMonth_caption{
    font-size: 16px !important;
  }

  body:has(#app-mobile-controls.is-open) .DayPicker_weekHeader_li{
    font-size: 12px !important;
  }

  body:has(#app-mobile-controls.is-open) .CalendarDay{
    font-size: 13px !important;
  }

  @media (max-width: 480px){
    body:has(#app-mobile-controls.is-open) .SingleDatePicker_picker{
      transform: translate(-50%, -50%) scale(0.88);
      transform-origin: center;
    }
  }

  .app-avatar-wrap{
    align-self: center;
  }

  body:has(#app-mobile-controls.is-open){
    overflow: hidden;
  }
}

/* Keep the Strategic Landscape's fixed matrix immediately followed by its
   matching-stakeholders strip.  The broader tablet rule above makes both
   columns flex-grow; that leaves an empty remainder beneath the matrix after
   its height has been intentionally fixed for Plotly. */
@media (max-width: 1024px){
  .dash-page #mode-search,
  .dash-page #mode-search .dash-search-layout{
    height: auto !important;
    min-height: 0 !important;
  }

  .dash-page #mode-search .dash-search-layout{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .dash-page #mode-search .dash-search-main,
  .dash-page #mode-search .dash-strategic-card{
    flex: 0 0 360px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
  }

  .dash-page #mode-search .dash-search-main{
    padding: 0 !important;
  }

  .dash-page #mode-search .dash-search-strip{
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 768px){
  .dash-page #mode-search .dash-search-main,
  .dash-page #mode-search .dash-strategic-card{
    flex-basis: 400px !important;
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
  }
}

/* Phone People Panel drawer
   -------------------------
   The actor list remains a desktop rail. On phones it is a deliberate,
   full-screen task opened from the shell, so the active module receives the
   viewport and the panel does not render a source page until it is requested. */
.app-mobile-people-toggle,
.pp-mobile-close,
.pp-desktop-collapse{
  display: none;
}

/* Desktop stakeholder rail
   ------------------------
   Keep the existing people-panel DOM mounted when it is collapsed so opening
   it is immediate and never triggers another actor query. The rail intentionally
   leaves a compact, scrollable set of recognizable avatars while giving the
   active module virtually all of the available width. */
@media (min-width: 1184px){
  /* Utilities remain at the far edge in every module. The optional Strategic
     Landscape action is independently centered, so hiding it does not
     relocate Collapse or Help. */
  #pp-container .pp-panel-actions{
    display: flex !important;
    position: relative !important;
    padding-right: 0 !important;
    width: 100%;
  }

  #pp-container .pp-panel-tools{
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-width: 0;
    height: 28px;
    flex: 0 0 auto !important;
    gap: 4px;
    justify-content: flex-start !important;
  }

  #pp-container #pp-open-strategic-wrap{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed{
    gap: 0.5rem !important;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-container{
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    overflow: hidden !important;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-container > div,
  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-container > div > div{
    min-width: 0 !important;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-container > div > div{
    padding: 8px 6px !important;
    background: #fff !important;
    border: 1px solid color-mix(in srgb, var(--panel-border-color, #e0e6f6) 86%, transparent) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(27, 42, 86, 0.08);
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-reset,
  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-open-strategic-wrap,
  #main-grid.app-main-grid.with-people.people-panel-collapsed .pp-mobile-close,
  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-help-info,
  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-help-tooltip,
  #main-grid.app-main-grid.with-people.people-panel-collapsed .pp-search-shell,
  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-pagination{
    display: none !important;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed .pp-desktop-collapse{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border: 1px solid var(--panel-border-color, #e0e6f6);
    border-radius: 10px;
    color: var(--brand-accent, #0d6efd);
    background: #fff;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed .pp-desktop-collapse > i{
    transform: rotate(180deg);
  }

  /* On the vertical compact rail, the only visible utility is the expand
     control. Center it rather than inheriting the expanded panel's right-edge
     control alignment. The 1184–1280 horizontal tray overrides this below. */
  @media (min-width: 1281px){
    #main-grid.app-main-grid.with-people.people-panel-collapsed .pp-panel-actions{
      grid-template-columns: 1fr !important;
      width: 100% !important;
      padding-right: 0 !important;
    }

    #main-grid.app-main-grid.with-people.people-panel-collapsed .pp-panel-tools{
      position: static !important;
      top: auto !important;
      right: auto !important;
      width: 34px !important;
      min-width: 34px !important;
      flex: 0 0 34px !important;
      margin: 0 auto !important;
      transform: none;
    }
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-list{
    padding-top: 2px;
    overflow-x: hidden !important;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-list .pp-row-btn{
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px !important;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-list .pp-row-btn > div{
    justify-content: center !important;
    padding: 3px !important;
    border: 0 !important;
    background: transparent !important;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-list .pp-row-btn > div > :not(:first-child){
    display: none !important;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-list .polaris-avatar-img{
    width: 42px !important;
    height: 42px !important;
    border: 2px solid transparent !important;
    box-shadow: 0 2px 8px rgba(27, 42, 86, 0.12);
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-list .pp-row-btn:focus-visible .polaris-avatar-img,
  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-list .pp-row-btn:hover .polaris-avatar-img{
    border-color: var(--brand-accent, #0d6efd) !important;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-list .pp-row-btn > div[style*="background-color: rgb(0, 0, 0)"],
  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-list .pp-row-btn > div[style*="backgroundColor"]{
    border-radius: 50% !important;
  }

  #pp-container:not(.desktop-collapsed) .pp-desktop-collapse{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    border-color: transparent;
    color: #6c757d;
  }
}

/* Between tablet landscape and a full desktop rail, a horizontal actor tray
   uses the available width much better than a tall, mostly empty column. */
@media (min-width: 1184px) and (max-width: 1280px){
  #main-grid.app-main-grid.with-people.people-panel-collapsed{
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 72px minmax(0, 1fr) !important;
    gap: 0.5rem !important;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-container{
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed #page-right{
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: auto !important;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-container > div,
  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-container > div > div{
    width: 100% !important;
    height: 100% !important;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-container > div > div{
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center;
    gap: 8px;
    padding: 6px 8px !important;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed .pp-panel-actions{
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-columns: 1fr !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed .pp-panel-tools{
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    height: 100% !important;
    justify-content: center !important;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-list{
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-list-rows{
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: max-content;
    min-width: 100%;
    height: 100%;
  }

  #main-grid.app-main-grid.with-people.people-panel-collapsed #pp-list .pp-row-btn{
    flex: 0 0 48px !important;
    width: 48px !important;
    margin: 0 !important;
  }

  /* The compact tray sits above the module, so its affordance points down
     toward the expanded people panel rather than sideways. */
  #main-grid.app-main-grid.with-people.people-panel-collapsed .pp-desktop-collapse > i{
    transform: rotate(-90deg);
  }

  /* When the full panel is stacked above the module, its collapse affordance
     points back up to the compact horizontal tray. */
  #pp-container:not(.desktop-collapsed) .pp-desktop-collapse > i{
    transform: rotate(90deg);
  }
}

/* Also applies while a responsive drawer is becoming the desktop rail. */
.pp-drawer-loader{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 180px;
  height: 100%;
  color: var(--muted, #53627c);
  font-size: 0.92rem;
  font-weight: 650;
}

.pp-drawer-loader-spinner{
  width: 22px;
  height: 22px;
  border: 3px solid color-mix(in srgb, var(--brand-accent, #0d6efd) 20%, transparent);
  border-top-color: var(--brand-accent, #0d6efd);
  border-radius: 50%;
  animation: app-route-spinner 0.78s linear infinite;
}

@media (max-width: 1183px){
  #app-shell:has(#main-grid.app-main-grid.no-people) .app-mobile-people-toggle{
    display: none !important;
  }

  .app-mobile-people-toggle{
    position: fixed;
    z-index: 1062;
    top: max(14px, calc(env(safe-area-inset-top) + 12px));
    /* Keep a deliberate but compact lane after the context-controls trigger. */
    left: max(184px, calc(env(safe-area-inset-left) + 132px));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid var(--brand-accent, #0d6efd);
    border-radius: 999px;
    color: #fff;
    background: var(--brand-accent, #0d6efd);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-accent, #0d6efd) 28%, transparent);
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1;
  }

  /* Match the context trigger exactly: equal height, top edge, and rhythm. */
  .app-mobile-controls-toggle{
    top: max(14px, calc(env(safe-area-inset-top) + 12px));
    min-height: 36px;
    height: 36px;
    gap: 5px;
    padding: 0 9px;
    font-size: 0.78rem;
  }

  /* At the most constrained widths, preserving separate, tappable icon
     buttons is clearer than allowing either control to collide with the user
     menu. Accessible labels and native titles remain available. */
  @media (max-width: 380px){
    .app-mobile-controls-toggle,
    .app-mobile-people-toggle{
      width: 36px;
      min-width: 36px;
      padding: 0;
      justify-content: center;
      gap: 0;
    }

    .app-mobile-controls-label,
    .app-mobile-people-label,
    .app-mobile-controls-toggle::after{
      display: none;
    }

    .app-mobile-people-toggle{
      left: max(108px, calc(env(safe-area-inset-left) + 56px));
    }
  }

  #sidebar.sidebar-expanded ~ #page-content .app-mobile-people-toggle{
    left: calc(var(--sidebar-width-expanded) + 154px);
  }

  @media (max-width: 1024px) and (orientation: landscape){
    #sidebar.sidebar-expanded ~ #page-content .app-mobile-people-toggle{
      left: calc(var(--sidebar-width-responsive-expanded) + 154px);
    }
  }

  @media (max-width: 1024px) and (orientation: portrait){
    #sidebar.sidebar-expanded ~ #page-content .app-mobile-people-toggle{
      left: min(calc(76vw + 154px), calc(100vw - 122px));
    }
  }

  #main-grid.app-main-grid.with-people{
    grid-template-rows: minmax(0, 1fr) !important;
  }

  /* The panel is absent from grid flow while closed, so the active module
     owns the full visible row instead of being left in an implicit second row. */
  #main-grid.app-main-grid.with-people:has(#pp-container:not(.mobile-open)){
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  #main-grid.app-main-grid.with-people:has(#pp-container:not(.mobile-open)) #page-right{
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: auto !important;
  }

  #main-grid.app-main-grid.with-people #pp-container:not(.mobile-open){
    display: none !important;
  }

  #main-grid.app-main-grid.with-people #pp-container.mobile-open{
    position: fixed;
    z-index: 1070;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    overflow: hidden !important;
    background: var(--shell-content-bg, #fff);
  }

  #main-grid.app-main-grid.with-people #pp-container.mobile-open > div,
  #main-grid.app-main-grid.with-people #pp-container.mobile-open > div > div{
    width: 100%;
    height: 100% !important;
    max-height: none !important;
  }

  #main-grid.app-main-grid.with-people #pp-container.mobile-open #pp-list{
    min-height: 0;
    max-height: none;
  }

  #pp-container.mobile-open .pp-mobile-close{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 6px;
    border-color: var(--panel-border-color, #e0e6f6);
  }

  body:has(#pp-container.mobile-open){
    overflow: hidden;
  }
}

/* iOS Safari enlarges the page when a text control smaller than 16px gets
   focus.  The compact mobile type scale above must never apply to an editable
   control: dropdowns in Dash use an inner input, even when their visible
   label is styled separately.  Keeping this input at 16px preserves the
   browser zoom level and lets the option list remain in view. */
@media (max-width: 768px){
  input,
  textarea,
  select,
  .Select-input input{
    font-size: 16px !important;
  }

  /* These selectors previously applied the compact 10/12px scale with a
     higher specificity.  Search inputs must stay at 16px or iOS Safari will
     zoom the entire page as soon as the keyboard opens. */
  #de-query .Select-input input,
  #infnet-search .Select-input input,
  #infnet-compare-b .Select-input input,
  #infnet-path-b .Select-input input,
  #infnet-path-allowed .Select-input input,
  .minutes-participants-dd .Select-input input{
    font-size: 16px !important;
  }

  /* Person pickers are normally in the lower half of their mobile panels.
     Use React Select's native absolute positioning, but open the option list
     above the field so it stays visible when the keyboard occupies the lower
     part of the screen.  Avoid fixed positioning: it drifts under Safari's
     mobile viewport as its address bar changes. */
  #infnet-search .Select.is-open .Select-menu-outer,
  #infnet-compare-b .Select.is-open .Select-menu-outer,
  #infnet-path-b .Select.is-open .Select-menu-outer,
  #infnet-path-allowed .Select.is-open .Select-menu-outer,
  .minutes-participants-dd .Select.is-open .Select-menu-outer{
    top: auto !important;
    bottom: calc(100% + 4px) !important;
    height: min(220px, 32dvh) !important;
    max-height: min(220px, 32dvh) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 3600 !important;
  }

  /* The right-hand Influence panel used to clip its own Select menu.  On a
     phone that leaves only one row visible (or none for the top search).
     Let an open menu paint over the graph/card and retain its native scroll. */
  .infnet-page .infnet-side-pane:has(.Select.is-open),
  .infnet-page .infnet-side-pane .card:has(.Select.is-open),
  .infnet-page .infnet-side-pane .card-header:has(.Select.is-open),
  .infnet-page .infnet-side-pane .card-body:has(.Select.is-open),
  .infnet-page #infnet-compare-view:has(.Select.is-open),
  .infnet-page #infnet-path-view:has(.Select.is-open){
    overflow: visible !important;
  }

  .infnet-page .infnet-side-pane .card:has(.Select.is-open){
    position: relative;
    z-index: 3700;
  }

  #infnet-search .Select-menu,
  #infnet-compare-b .Select-menu,
  #infnet-path-b .Select-menu,
  #infnet-path-allowed .Select-menu,
  .minutes-participants-dd .Select-menu{
    max-height: inherit !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Compare sits above a large, usable part of the panel.  Opening downward
     keeps more results visible than placing this particular menu over the
     tab strip, while Path continues to use the space above its field. */
  #infnet-compare-b .Select.is-open .Select-menu-outer{
    top: calc(100% + 4px) !important;
    bottom: auto !important;
  }

  #infnet-search .Select-option,
  #infnet-search .VirtualizedSelectOption,
  #infnet-search .VirtualizedSelectFocusedOption,
  #infnet-compare-b .Select-option,
  #infnet-compare-b .VirtualizedSelectOption,
  #infnet-compare-b .VirtualizedSelectFocusedOption,
  #infnet-path-b .Select-option,
  #infnet-path-b .VirtualizedSelectOption,
  #infnet-path-b .VirtualizedSelectFocusedOption,
  #infnet-path-allowed .Select-option,
  #infnet-path-allowed .VirtualizedSelectOption,
  #infnet-path-allowed .VirtualizedSelectFocusedOption,
  .minutes-participants-dd .Select-option,
  .minutes-participants-dd .VirtualizedSelectOption,
  .minutes-participants-dd .VirtualizedSelectFocusedOption{
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  /* Keep the network as the default phone canvas.  The people workspace is
     invoked from the icon and rendered as a separate full-screen task. */
  .infnet-page .infnet-graph-wrap{
    position: relative;
  }

  .infnet-page .infnet-mobile-explorer-trigger{
    /* Pair this with the reading guide: both graph actions start immediately
       below the connection controls, one on each side of the workspace. */
    position: fixed;
    top: 140px;
    right: 12px;
    z-index: 1058;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--brand-accent, #0d6efd);
    border-radius: 50%;
    color: #fff;
    background: var(--brand-accent, #0d6efd);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-accent, #0d6efd) 30%, transparent);
    font-size: 0.96rem;
    line-height: 1;
    transform: none;
  }

  /* The reading guide belongs to the graph.  Keep it in the upper-left corner
     of the graph workspace, below the connection controls, rather than
     overlapping the Connection Type field. */
  .infnet-page .infnet-guide-trigger{
    position: fixed;
    top: 140px;
    right: auto;
    left: 12px;
    z-index: 11019;
    display: inline-flex !important;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0 !important;
    border-radius: 50%;
  }

  .infnet-page .infnet-guide-trigger .me-2{
    margin-right: 0 !important;
  }

  .infnet-page .infnet-guide-trigger .infnet-guide-label{
    display: none;
  }

  /* The sheet covers this control while it is open.  Do not set it to
     display:none: Safari can leave that button's compositor layer hidden
     after closing the sheet until an unrelated screen repaint occurs. */

  .infnet-page .infnet-mobile-explorer-trigger span{
    display: none;
  }

  .infnet-page #infnet-side-pane{
    display: none !important;
  }

  .infnet-page #infnet-side-pane.infnet-mobile-explorer-open{
    position: fixed;
    z-index: 1080;
    inset: 0;
    display: flex !important;
    flex-direction: column;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    background: var(--shell-content-bg, #fff);
  }

  .infnet-page #infnet-side-pane.infnet-mobile-explorer-open .panel-card,
  .infnet-page #infnet-side-pane.infnet-mobile-explorer-open .card-body,
  .infnet-page #infnet-side-pane.infnet-mobile-explorer-open #infnet-tabs-wrapper,
  .infnet-page #infnet-side-pane.infnet-mobile-explorer-open #infnet-tabs-wrapper > .tab-content,
  .infnet-page #infnet-side-pane.infnet-mobile-explorer-open #infnet-tabs-wrapper > .tab-content > .tab-pane{
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .infnet-page #infnet-side-pane.infnet-mobile-explorer-open .panel-card{
    flex: 1 0 auto;
    box-shadow: none !important;
  }

  .infnet-page #infnet-side-pane.infnet-mobile-explorer-open #infnet-compare-view,
  .infnet-page #infnet-side-pane.infnet-mobile-explorer-open #infnet-path-view{
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  .infnet-page #infnet-side-pane.infnet-mobile-explorer-open #infnet-compare-table{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .infnet-page #infnet-side-pane.infnet-mobile-explorer-open .Select.is-open .Select-menu-outer{
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    height: min(280px, 42dvh) !important;
    max-height: min(280px, 42dvh) !important;
  }

  .infnet-page #infnet-side-pane.infnet-mobile-explorer-open .infnet-mobile-explorer-close{
    position: sticky;
    top: 0;
    z-index: 3701;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
    padding: 0;
    border: 1px solid rgba(34, 40, 49, 0.14);
    border-radius: 50%;
    color: var(--text, #20252b);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 18px rgba(20, 27, 40, 0.12);
    font-size: 1rem;
  }

  body:has(#infnet-side-pane.infnet-mobile-explorer-open){
    overflow: hidden;
  }
}

/* Phone tooltip and Influence Network layering
   --------------------------------------------
   A desktop tooltip was forced to 400px wide.  That exceeds the usable
   content width beside Polaris' compact rail and makes Popper paint outside
   the viewport.  Keep the copy readable, but let the available viewport set
   the width on a phone. */
@media (max-width: 768px){
  .tooltip.strategicChart1-tooltip,
  .tooltip.dashboard-how-to-read-tooltip,
  .tooltip.minutes-halo-tooltip{
    /* A phone may have only ~340px to the right (or left) of the trigger.
       A wider desktop-style tooltip cannot be repositioned by Popper without
       being clipped, so retain a readable measure that can safely flip. */
    max-width: min(300px, calc(100vw - var(--sidebar-width-tablet, 52px) - 20px)) !important;
  }

  .tooltip.strategicChart1-tooltip .tooltip-inner,
  .tooltip.dashboard-how-to-read-tooltip .tooltip-inner,
  .tooltip.minutes-halo-tooltip .tooltip-inner{
    width: auto !important;
    min-width: 0 !important;
    max-width: min(300px, calc(100vw - var(--sidebar-width-tablet, 52px) - 20px)) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
  }

  /* These actions must belong to the graph, not to the browser viewport.
     Fixed positioning made them remain over the Relationship Intelligence
     refresh control after the page scrolled. */
  .infnet-page .infnet-main-pane .infnet-graph-wrap{
    position: relative !important;
  }

  .infnet-page .infnet-mobile-explorer-trigger{
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 12 !important;
  }

  .infnet-page .infnet-guide-trigger{
    position: static !important;
    align-self: flex-start !important;
    margin: 0 !important;
    z-index: auto !important;
  }

  .infnet-page .infnet-controls-actions{
    width: 100%;
    justify-content: flex-start;
    margin: 0 !important;
  }

  /* A connection-mode menu is the foreground interaction.  It should always
     paint above the graph actions and the guide button. */
  .infnet-page .infnet-control-linkmode,
  .infnet-page .infnet-control-linkmode:has(.Select.is-open){
    position: relative;
    z-index: 3800 !important;
  }

  .infnet-page .infnet-control-linkmode .Select-menu-outer{
    z-index: 3801 !important;
  }
}

/* The entry point and close action are exclusively for the phone layout. */
.infnet-mobile-explorer-trigger,
.infnet-mobile-explorer-close{
  display: none;
}

/* Phone Influence workspace
   --------------------------
   Work within Polaris' visible content rectangle, not the full browser
   viewport.  The controls remain available above and the navigation rail
   remains visible at the left; only the module's person tools are replaced. */
@media (max-width: 768px){
  #main-grid.app-main-grid.with-people:has(.infnet-page) .infnet-page,
  #main-grid.app-main-grid.with-people:has(.infnet-page) .infnet-shell,
  #main-grid.app-main-grid.with-people:has(.infnet-page) #infnet-right,
  #main-grid.app-main-grid.with-people:has(.infnet-page) .infnet-main-pane,
  #main-grid.app-main-grid.with-people:has(.infnet-page) .infnet-main-pane > .card,
  #main-grid.app-main-grid.with-people:has(.infnet-page) .infnet-main-pane > .card > .card-body,
  .infnet-page .infnet-shell,
  .infnet-page #infnet-right,
  .infnet-page .infnet-main-pane,
  .infnet-page .infnet-main-pane > .card,
  .infnet-page .infnet-main-pane > .card > .card-body{
    height: 100% !important;
    min-height: 0 !important;
  }

  #main-grid.app-main-grid.with-people:has(.infnet-page) .infnet-shell,
  .infnet-page .infnet-shell{
    overflow: hidden !important;
  }

  #main-grid.app-main-grid.with-people:has(.infnet-page) #infnet-right,
  .infnet-page #infnet-right{
    grid-template-rows: minmax(0, 1fr) 0 !important;
    overflow: hidden !important;
  }

  .infnet-page .infnet-main-pane .infnet-graph-wrap{
    flex: 1 1 auto !important;
    height: auto !important;
    /* Keep the primary canvas large enough to use the phone's remaining
       visual viewport, including the space Safari otherwise leaves blank. */
    min-height: clamp(360px, calc(100dvh - 14rem), 720px) !important;
  }

  .infnet-page .infnet-main-pane #infnet-graph{
    height: 100% !important;
    min-height: 0 !important;
  }

  /* The outer page reserves a 52px compact rail on a phone.  Start the sheet
     beneath the two fixed shell actions instead of covering them, and keep it
     inside the content area rather than underneath the rail. */
  .infnet-page #infnet-side-pane.infnet-mobile-explorer-open{
    top: max(64px, calc(env(safe-area-inset-top) + 62px));
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: calc(var(--sidebar-width-tablet) + 8px);
    width: auto !important;
    height: auto !important;
    padding: 8px !important;
    z-index: 1057;
    border: 1px solid rgba(35, 74, 142, 0.12);
    border-radius: 18px 18px 12px 12px;
    box-shadow: 0 16px 38px rgba(16, 24, 40, 0.16);
  }

  /* Only editable controls need 16px for iOS focus behavior.  Person labels
     and suggestions use the compact Data Editing scale while their 44px
     touch targets stay unchanged. */
  #infnet-search .Select-placeholder,
  #infnet-search .Select-value-label,
  #infnet-compare-b .Select-placeholder,
  #infnet-compare-b .Select-value-label,
  #infnet-path-b .Select-placeholder,
  #infnet-path-b .Select-value-label,
  #infnet-path-allowed .Select-placeholder,
  #infnet-path-allowed .Select-value-label{
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  #infnet-search .Select-option,
  #infnet-search .VirtualizedSelectOption,
  #infnet-search .VirtualizedSelectFocusedOption,
  #infnet-compare-b .Select-option,
  #infnet-compare-b .VirtualizedSelectOption,
  #infnet-compare-b .VirtualizedSelectFocusedOption,
  #infnet-path-b .Select-option,
  #infnet-path-b .VirtualizedSelectOption,
  #infnet-path-b .VirtualizedSelectFocusedOption,
  #infnet-path-allowed .Select-option,
  #infnet-path-allowed .VirtualizedSelectOption,
  #infnet-path-allowed .VirtualizedSelectFocusedOption{
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .infnet-page #infnet-side-pane.infnet-mobile-explorer-open .infnet-mobile-explorer-close{
    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;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
  }
}

/* Restore the established graph-action positions in the normal network view.
   Relationship Intelligence is the sole exception: its refresh controls use
   this same vertical area, so its guide is hidden and its explorer action is
   anchored to the graph instead. */
@media (max-width: 768px){
  .infnet-page .infnet-guide-trigger{
    position: fixed !important;
    top: 140px !important;
    left: 12px !important;
    right: auto !important;
    z-index: 1058 !important;
  }

  .infnet-page .infnet-mobile-explorer-trigger{
    position: fixed !important;
    top: 140px !important;
    right: 12px !important;
    z-index: 1058 !important;
  }

  /* Keep the two graph actions compact in every connection mode.  They are
     regular controls now, not floating graph decorations, so the canvas can
     begin immediately after this 38px row. */
  .infnet-page .infnet-controls-side .infnet-control-linkmode{
    order: 1;
  }

  .infnet-page .infnet-controls-actions{
    order: 2;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
    grid-template-rows: 38px !important;
    align-items: center !important;
    align-content: start !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px !important;
    margin: 0 !important;
    gap: .75rem !important;
  }

  .infnet-page .infnet-controls-actions .infnet-guide-trigger,
  .infnet-page .infnet-controls-actions .infnet-mobile-explorer-trigger{
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: auto !important;
    display: inline-flex !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    align-self: center !important;
    margin: 0 !important;
    order: initial !important;
  }

  .infnet-page .infnet-controls-actions .infnet-guide-trigger{
    grid-column: 1 !important;
  }

  .infnet-page .infnet-controls-actions .infnet-mobile-explorer-trigger{
    grid-column: 3 !important;
  }

  /* In Relationship Intelligence, keep both auxiliary actions with the
     controls.  This state comes from Dash rather than the refresh-control
     visibility, so the actions remain available to non-admin users too. */
  .infnet-page .infnet-controls-actions.infnet-ri-actions{
    order: 2;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
    grid-template-rows: 38px !important;
    align-items: center !important;
    align-content: start !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px !important;
    margin: 0 !important;
    gap: .75rem !important;
  }

  /* The inline refresh condition and green status alert already expose this
     information in RI.  Keeping its extra trigger here consumes the action
     row and can push the two primary actions out of the visible width. */
  .infnet-page .infnet-controls-actions.infnet-ri-actions #infnet-ri-mobile-status-wrap{
    display: none !important;
  }

  .infnet-page .infnet-controls-side:has(.infnet-controls-actions.infnet-ri-actions) .infnet-control-linkmode{
    order: 1;
  }

  .infnet-page .infnet-controls-side:has(.infnet-controls-actions.infnet-ri-actions) .infnet-control-refresh{
    order: 3;
  }

  .infnet-page .infnet-controls-actions.infnet-ri-actions .infnet-guide-trigger,
  .infnet-page .infnet-controls-actions.infnet-ri-actions .infnet-mobile-explorer-trigger{
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: auto !important;
    display: inline-flex !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    align-self: center !important;
    margin: 0 !important;
    order: initial !important;
  }

  .infnet-page .infnet-controls-actions.infnet-ri-actions .infnet-guide-trigger{
    grid-column: 1 !important;
  }

  .infnet-page .infnet-controls-actions.infnet-ri-actions .infnet-mobile-explorer-trigger{
    grid-column: 3 !important;
  }

  /* The dropdown remains the foreground surface whenever it is open. */
  .infnet-page .infnet-control-linkmode:has(.Select.is-open),
  .infnet-page .infnet-control-linkmode .Select-menu-outer{
    z-index: 3801 !important;
  }
}