/* Dashboard responsive corrections: retain the compact rail until the content can
   support a full sidebar and four KPI cards without intrinsic-width overflow. */
.shell--refresh .ov-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 1rem;
}
.shell--refresh .ov-header-left { min-width: 0; }
.shell--refresh .ov-header-right {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  justify-content: end;
  gap: 1rem;
  min-width: 0;
}
.shell--refresh .ov-system-status { min-width: 0; }
.shell--refresh .ov-status-indicator { min-width: 0; }
.shell--refresh .ov-btn-primary { white-space: nowrap; }

/* Equal minmax tracks remove the grid item's min-content width as a source of page overflow. */
.shell--refresh .ov-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.shell--refresh .ov-kpi-card,
.shell--refresh .ov-kpi-header,
.shell--refresh .ov-kpi-bottom,
.shell--refresh .ov-kpi-meta {
  min-width: 0;
}
.shell--refresh .ov-kpi-label { overflow-wrap: anywhere; }
.shell--refresh .ov-kpi-value { font-variant-numeric: tabular-nums; }

/* Keep the left rail compact through 1439px; the full rail returns once its
   240px width still leaves room for four readable KPI cards. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .shell--refresh:not(:has(.ex-page)) {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .shell--refresh .shell-side {
    position: sticky !important;
    top: 0;
    z-index: 70 !important;
    width: 72px !important;
    min-width: 72px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: calc(1rem + env(safe-area-inset-top)) .45rem calc(1rem + env(safe-area-inset-bottom));
    overflow-x: visible;
    overflow-y: auto;
  }
  .shell--refresh .brand-row { justify-content: center; padding: .25rem 0; margin-bottom: .8rem; }
  .shell--refresh .brand-row .brand { justify-content: center; gap: 0; }
  .shell--refresh .brand-row .brand > span,
  .shell--refresh .shell-nav-title,
  .shell--refresh .shell-plan,
  .shell--refresh .shell-collapse-btn { display: none; }
  .shell--refresh .shell-nav { gap: .8rem; }
  .shell--refresh .shell-nav-group { gap: .25rem; }
  .shell--refresh .shell-nav a { justify-content: center; min-height: 44px; padding: .62rem .35rem; }
  .shell--refresh .shell-nav a > span,
  .shell--refresh .shell-nav a > em,
  .shell--refresh .shell-nav a[aria-current=page]::before { display: none; }
  .shell--refresh .shell-upgrade-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    padding-top: .5rem;
  }
  .shell--refresh .shell-upgrade-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0 auto;
    padding: 0;
    border-radius: 12px;
    background: #eaf2ff;
    text-decoration: none;
  }
  .shell--refresh .shell-upgrade-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #2563eb;
    color: #fff;
  }
  .shell--refresh .shell-upgrade-text,
  .shell--refresh .shell-upgrade-arrow { display: none !important; }
  .shell--refresh .shell-body { min-width: 0; min-height: 100dvh; overflow-x: clip; }
  .shell--refresh .shell-top { min-height: 64px; padding: 0 1rem !important; gap: .6rem !important; }
  .shell--refresh .shell-burger { display: flex; flex: none; width: 44px; height: 44px; }
  .shell--refresh .shell-context { display: none; }
  .shell--refresh .shell-search { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; }
  .shell--refresh .shell-top-actions { gap: .4rem; min-width: 0; }
  .shell--refresh .shell-bell { width: 44px; height: 44px; }
  .shell--refresh .shell-user-info,
  .shell--refresh .shell-user-chevron { display: none; }
  .shell--refresh .shell-user-btn { min-width: 44px; min-height: 44px; padding: .28rem; }
  .shell--refresh .shell-lang .language select { width: auto; min-width: 3.75rem; min-height: 44px; }
  .shell--refresh.shell-nav-open .shell-side {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 70 !important;
    width: 240px !important;
    min-width: 240px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: calc(1rem + env(safe-area-inset-top)) .85rem calc(1rem + env(safe-area-inset-bottom));
    transform: none !important;
  }
  .shell--refresh.shell-nav-open .brand-row { justify-content: space-between; padding: .25rem .25rem .25rem .65rem; }
  .shell--refresh.shell-nav-open .brand-row .brand { justify-content: flex-start; gap: .65rem; }
  .shell--refresh.shell-nav-open .brand-row .brand > span,
  .shell--refresh.shell-nav-open .shell-nav-title,
  .shell--refresh.shell-nav-open .shell-plan { display: flex; }
  .shell--refresh.shell-nav-open .shell-collapse-btn { display: flex; }
  .shell--refresh.shell-nav-open .shell-nav a { justify-content: flex-start; padding: .55rem .75rem; }
  .shell--refresh.shell-nav-open .shell-nav a > span,
  .shell--refresh.shell-nav-open .shell-nav a > em { display: inline; }
  .shell--refresh.shell-nav-open .shell-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: block;
    background: rgba(15, 23, 42, .08) !important;
  }
  .shell--refresh.shell-nav-open .shell-upgrade-wrap { display: block; width: 100%; padding-top: 1rem; }
  .shell--refresh.shell-nav-open .shell-upgrade-card {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: .75rem .85rem;
    border-radius: 14px;
  }
  .shell--refresh.shell-nav-open .shell-upgrade-icon { width: 36px; height: 36px; border-radius: 10px; }
  .shell--refresh.shell-nav-open .shell-upgrade-text,
  .shell--refresh.shell-nav-open .shell-upgrade-arrow { display: flex !important; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .shell--refresh .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .shell--refresh .ov-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Keep the desktop chart aligned with the full right rail so the next section
   begins directly below both columns without a blank band. */
.shell--refresh .ov-chart-card,
.shell--refresh .ov-side-column { min-width: 0; }
@media (min-width: 1280px) {
  .shell--refresh .ov-analytics-section { align-items: stretch; }
  .shell--refresh .ov-chart-card,
  .shell--refresh .ov-side-column { align-self: stretch; }
}
.shell--refresh .ov-side-column > .ov-card:last-child .ov-card-head {
  flex-wrap: nowrap;
  gap: .4rem;
  min-width: 0;
}
.shell--refresh .ov-side-column > .ov-card:last-child .ov-card-head h2 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: clamp(.82rem, .95vw, 1.05rem);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shell--refresh .ov-side-column > .ov-card:last-child .ov-card-link {
  flex: 0 0 auto;
  font-size: clamp(.72rem, .8vw, .85rem);
  white-space: nowrap;
}

/* Preserve all campaign columns on tablets; the wrapper owns any horizontal scroll. */
.shell--refresh .ov-campaigns-card,
.shell--refresh .ov-desktop-table { min-width: 0; max-width: 100%; }
.shell--refresh .ov-desktop-table {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--t-border) transparent;
}
.shell--refresh .ov-table { width: 100%; min-width: 820px; }
.shell--refresh .ov-table th,
.shell--refresh .ov-table td { white-space: nowrap; }
.shell--refresh .ov-desktop-table:focus-visible {
  outline: 2px solid var(--t-primary);
  outline-offset: 2px;
}
.shell--refresh .ov-desktop-table::-webkit-scrollbar { height: 6px; }
.shell--refresh .ov-desktop-table::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--t-border); }

@media (max-width: 767px) {
  .shell--refresh .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell--refresh .ov-header { grid-template-columns: minmax(0, 1fr); }
  .shell--refresh .ov-header-right {
    grid-template-columns: minmax(0, 1fr) max-content;
    justify-content: stretch;
    gap: .5rem;
    width: 100%;
  }
  .shell--refresh .ov-system-status { align-items: flex-start; text-align: left; }
  .shell--refresh .ov-status-indicator,
  .shell--refresh .ov-status-time { max-width: 100%; }
  .shell--refresh .ov-analytics-section { grid-template-columns: minmax(0, 1fr); }
  .shell--refresh .ov-side-column { width: 100%; }
}

@media (max-width: 360px) {
  .shell--refresh .ov-header-right { grid-template-columns: minmax(0, 1fr); }
  .shell--refresh .ov-system-status { width: 100%; }
  .shell--refresh .ov-btn-primary { justify-self: end; }
}

@media (max-width: 560px) {
  .shell--refresh .shell-tabs a {
    position: relative;
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    padding: .3rem .1rem;
  }
  /* Keep each item's full accessible name in the tree while removing clipped labels. */
  .shell--refresh .shell-tabs a span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .shell--refresh .shell-tabs a[aria-current=page] span,
  .shell--refresh .shell-tabs a:hover span,
  .shell--refresh .shell-tabs a:focus-visible span {
    z-index: 2;
    left: 50%;
    bottom: calc(100% + .45rem);
    width: max-content;
    max-width: min(76vw, 14rem);
    height: auto;
    margin: 0;
    padding: .42rem .62rem;
    clip: auto;
    clip-path: none;
    overflow: visible;
    transform: translateX(-50%);
    border: 1px solid var(--t-border);
    border-radius: .6rem;
    background: var(--t-sidebar-bg);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .14);
    color: var(--t-text);
    font-size: .72rem;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
  .shell--refresh .shell-tabs a:first-child[aria-current=page] span,
  .shell--refresh .shell-tabs a:first-child:hover span,
  .shell--refresh .shell-tabs a:first-child:focus-visible span {
    left: 0;
    transform: none;
  }
  .shell--refresh .shell-tabs a:last-child[aria-current=page] span,
  .shell--refresh .shell-tabs a:last-child:hover span,
  .shell--refresh .shell-tabs a:last-child:focus-visible span {
    right: 0;
    left: auto;
    transform: none;
  }
}