/*
 * One.Ceremony unified panel foundation.
 * This file is the single visual source of truth for the /panel shell.
 */

.oc-panel-shell {
  --oc-shell-topbar-height: 64px;
  --oc-shell-sidebar-width: 256px;
  --oc-shell-sidebar-collapsed-width: 64px;
  --oc-shell-content-padding-x: 24px;
  --oc-shell-content-padding-y: 24px;
  --oc-shell-surface: var(--card);
  --oc-dashboard-gap: 1.5rem;
  --oc-dashboard-kpi-gap: 1.5rem;
  --oc-dashboard-kpi-min-height: 160px;
  --oc-dashboard-card-radius: 12px;
  --oc-dashboard-card-padding: 1.5rem;
  --oc-dashboard-body-gap: 1.5rem;
  --oc-dashboard-body-min-height: 280px;
  --oc-dashboard-approval-min-height: 108px;
  --oc-dashboard-approval-padding: 1.5rem;
  --oc-dashboard-header-title-size: 1.875rem;
  --oc-dashboard-header-title-letter-spacing: -0.02em;
  --oc-dashboard-header-description-margin-top: 0.36rem;
  --oc-dashboard-header-description-size: 0.875rem;
  --oc-dashboard-header-description-color: color-mix(in srgb, var(--text-gray-600) 88%, #9aa7bf 12%);
  --oc-dashboard-kpi-card-gap: 0.5rem;
  --oc-dashboard-kpi-icon-size: 48px;
  --oc-dashboard-kpi-icon-radius: 12px;
  --oc-dashboard-kpi-icon-glyph-size: 24px;
  --oc-dashboard-kpi-value-size: 1.875rem;
  --oc-dashboard-kpi-attention-meta-color: color-mix(in srgb, var(--warning) 82%, #7c4a00 18%);
  --oc-dashboard-kpi-tone-primary-color: var(--primary);
  --oc-dashboard-kpi-tone-primary-background: color-mix(in srgb, var(--primary-light) 72%, var(--card) 28%);
  --oc-dashboard-kpi-tone-warning-color: color-mix(in srgb, var(--warning) 82%, #7c4a00 18%);
  --oc-dashboard-kpi-tone-warning-background: color-mix(in srgb, var(--warning-light) 66%, var(--card) 34%);
  --oc-dashboard-kpi-tone-info-color: color-mix(in srgb, var(--info) 78%, var(--primary-dark) 22%);
  --oc-dashboard-kpi-tone-info-background: color-mix(in srgb, var(--info-light) 64%, var(--card) 36%);
  --oc-dashboard-kpi-tone-mint-color: color-mix(in srgb, var(--success) 78%, var(--primary-dark) 22%);
  --oc-dashboard-kpi-tone-mint-background: color-mix(in srgb, var(--success-light) 66%, var(--card) 34%);
  --oc-dashboard-kpi-tone-neutral-color: var(--text-gray-700);
  --oc-dashboard-kpi-tone-neutral-background: color-mix(in srgb, var(--accent) 80%, var(--card) 20%);
  --oc-dashboard-body-primary-column: 1.68fr;
  --oc-dashboard-approval-icon-size: 34px;
  --oc-dashboard-focus-outline-color: color-mix(in srgb, var(--primary) 56%, #ffffff 44%);
  --oc-dashboard-card-border-color: color-mix(in srgb, var(--border) 94%, var(--primary) 6%);
  --oc-dashboard-card-shadow: 0 1px 1px rgb(15 23 42 / 0.04);
  --oc-dashboard-kpi-trend-size: 12px;
  --oc-dashboard-kpi-trend-color: #58c4cc;
  --oc-dashboard-section-icon-size: 20px;
  --oc-dashboard-storage-caption-margin-top: 0.52rem;
  --oc-dashboard-progress-height: 12px;
  --oc-dashboard-progress-background: color-mix(in srgb, var(--primary) 12%, var(--oc-mix-surface) 88%);
  --oc-dashboard-progress-fill: linear-gradient(90deg, var(--primary), var(--primary-dark));
  --oc-dashboard-storage-kpis-margin-top: 0.84rem;
  --oc-dashboard-storage-kpi-gap: 0.52rem;
  --oc-dashboard-storage-kpi-radius: 8px;
  --oc-dashboard-storage-kpi-padding: 0.75rem;
  --oc-dashboard-storage-kpi-background: color-mix(in srgb, var(--accent) 80%, var(--card) 20%);
  --oc-dashboard-storage-kpi-border-color: color-mix(in srgb, var(--border) 88%, var(--primary) 12%);
  --oc-dashboard-storage-kpi-small-size: 0.75rem;
  --oc-dashboard-storage-kpi-strong-size: 0.95rem;
  --oc-dashboard-list-item-min-height: 64px;
  --oc-dashboard-list-item-radius: 12px;
  --oc-dashboard-list-item-padding: 1rem;
  --oc-dashboard-list-item-gap: 1rem;
  --oc-dashboard-list-item-border-color: color-mix(in srgb, var(--border) 94%, var(--primary) 6%);
  --oc-dashboard-list-item-background: color-mix(in srgb, var(--card) 94%, var(--accent) 6%);
  --oc-dashboard-list-item-hover-background: color-mix(in srgb, var(--accent) 74%, var(--card) 26%);
  --oc-dashboard-list-item-hover-border-color: color-mix(in srgb, var(--primary) 18%, transparent);
  --oc-dashboard-list-item-title-size: 0.95rem;
  --oc-dashboard-list-item-meta-size: 0.8rem;
  --oc-dashboard-breakdown-photo-color: #3699ff;
  --oc-dashboard-breakdown-video-color: #ffa800;
  --oc-dashboard-breakdown-other-color: #1bc5bd;
  --oc-dashboard-approval-title-size: 1rem;
  --oc-dashboard-approval-body-size: 0.875rem;
  --oc-dashboard-approval-action-margin-top: 0.75rem;
  --oc-dashboard-approval-warning-icon-color: color-mix(in srgb, var(--warning) 82%, #7c4a00 18%);
  --oc-dashboard-approval-warning-icon-background: color-mix(in srgb, var(--warning-light) 52%, var(--oc-mix-surface) 48%);
  --oc-dashboard-approval-healthy-icon-color: color-mix(in srgb, var(--success) 78%, #0f5132 22%);
  --oc-dashboard-approval-healthy-icon-background: color-mix(in srgb, var(--success-light) 48%, var(--oc-mix-surface) 52%);
  --oc-topbar-search-width: min(448px, 100%);
  --oc-topbar-search-height: 36px;
  --oc-topbar-search-radius: 8px;
  --oc-topbar-control-gap: 8px;
  --oc-topbar-icon-button-size: 32px;
  --oc-topbar-icon-radius: 8px;
  --oc-topbar-user-min-height: 44px;
  --oc-topbar-user-max-width: 320px;
  --oc-topbar-user-radius: 8px;
  --oc-topbar-avatar-size: 32px;
  --oc-topbar-avatar-font-size: 0.75rem;
  --oc-topbar-avatar-letter-spacing: 0.01em;
  --oc-topbar-avatar-background: #e1f0ff;
  --oc-topbar-avatar-color: #3699ff;
  --oc-topbar-profile-popover-width: min(320px, calc(100vw - 20px));
  --oc-topbar-popover-border-color: #eff2f5;
  --oc-topbar-popover-shadow: 0 24px 48px rgb(15 23 42 / 0.2), 0 8px 20px rgb(15 23 42 / 0.12);
  --oc-topbar-popover-header-border-color: #eff2f5;
  --oc-topbar-popover-header-background: #ffffff;
  --oc-topbar-profile-header-border-color: #eff2f5;
  --oc-topbar-profile-header-background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  --oc-topbar-profile-header-avatar-color: #fff;
  --oc-topbar-profile-menu-item-min-height: 52px;
  --oc-topbar-profile-menu-item-radius: 0;
  --oc-topbar-profile-menu-item-padding: 12px 16px;
  --oc-topbar-profile-menu-item-gap: 12px;
  --oc-topbar-profile-menu-item-hover-background: #f3f6f9;
  --oc-topbar-profile-menu-separator-color: #eff2f5;
  --oc-topbar-profile-menu-logout-border-color: #f1d5da;
  --oc-topbar-profile-menu-logout-background: #fff;
  --oc-topbar-profile-menu-logout-hover-background: #fff7f8;
  --oc-topbar-profile-menu-icon-size: 36px;
  --oc-topbar-profile-menu-icon-radius: 8px;
  --oc-topbar-profile-menu-icon-background: #f3f6f9;
  --oc-topbar-profile-menu-icon-color: #7e8299;
  --oc-topbar-profile-menu-primary-icon-background: #e1f0ff;
  --oc-topbar-profile-menu-primary-icon-color: #3699ff;
  --oc-topbar-profile-menu-logout-icon-background: #f3f6f9;
  --oc-topbar-profile-menu-logout-icon-color: #5f708a;
  --oc-topbar-profile-menu-label-size: 0.87rem;
  --oc-topbar-profile-menu-description-size: 0.71rem;
  --oc-topbar-dark-shell-surface: color-mix(in srgb, var(--card) 90%, #0f172a 10%);
  --oc-topbar-dark-border-color: color-mix(in srgb, var(--border) 84%, #0f172a 16%);
  --oc-topbar-dark-search-border-color: color-mix(in srgb, var(--input-border) 84%, #0f172a 16%);
  --oc-topbar-dark-search-background: color-mix(in srgb, var(--accent) 86%, #0f172a 14%);
  --oc-topbar-dark-control-border-color: color-mix(in srgb, var(--border) 86%, #0f172a 14%);
  --oc-topbar-dark-control-background: color-mix(in srgb, var(--card) 90%, #0f172a 10%);
  --oc-topbar-dark-control-hover-background: color-mix(in srgb, var(--accent) 78%, #0f172a 22%);
  --oc-topbar-dark-avatar-background: color-mix(in srgb, var(--primary-light) 42%, #0f172a 58%);
  --oc-topbar-dark-avatar-color: color-mix(in srgb, var(--primary-light) 78%, #e2e8f0 22%);
  --oc-topbar-dark-avatar-border-color: color-mix(in srgb, var(--primary) 42%, #0f172a 58%);
  --oc-topbar-dark-popover-background: color-mix(in srgb, var(--card) 90%, #0f172a 10%);
  --oc-topbar-dark-popover-border-color: color-mix(in srgb, var(--border) 88%, #0f172a 12%);
  --oc-topbar-dark-popover-shadow: 0 24px 50px rgb(2 6 23 / 0.58), 0 6px 14px rgb(2 6 23 / 0.35);
  --oc-topbar-dark-popover-header-border-color: color-mix(in srgb, var(--border) 78%, #0f172a 22%);
  --oc-topbar-dark-popover-header-background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 48%, #0f172a 52%) 0%,
    color-mix(in srgb, var(--card) 80%, #0f172a 20%) 100%
  );
  --oc-topbar-dark-popover-footer-border-color: color-mix(in srgb, var(--border) 78%, #0f172a 22%);
  --oc-topbar-dark-popover-footer-background: color-mix(in srgb, var(--card) 84%, #0f172a 16%);
  --oc-topbar-dark-menu-hover-background: color-mix(in srgb, var(--accent) 56%, #0f172a 44%);
  --oc-topbar-dark-menu-hover-border-color: color-mix(in srgb, var(--primary) 24%, #0f172a 76%);
  --oc-topbar-dark-profile-item-hover-background: color-mix(in srgb, var(--accent) 58%, #0f172a 42%);
  --oc-topbar-dark-profile-item-hover-border-color: color-mix(in srgb, var(--primary) 22%, #0f172a 78%);
  --oc-topbar-dark-profile-icon-background: color-mix(in srgb, var(--accent) 62%, #0f172a 38%);
  --oc-topbar-dark-profile-icon-color: color-mix(in srgb, var(--text-gray-700) 82%, #e2e8f0 18%);
  --oc-topbar-dark-profile-separator-color: color-mix(in srgb, var(--border) 78%, #0f172a 22%);
  --oc-sidebar-status-margin: auto 12px 12px;
  --oc-sidebar-status-padding: 11px;
  --oc-sidebar-status-radius: 12px;
  --oc-sidebar-status-gap: 8px;
  --oc-sidebar-status-border-color: #d7e5f7;
  --oc-sidebar-status-background: linear-gradient(168deg, #f7fbff 0%, #edf4ff 100%);
  --oc-sidebar-status-unavailable-border-color: color-mix(in srgb, var(--border) 86%, var(--primary) 14%);
  --oc-sidebar-status-unavailable-background: linear-gradient(170deg, #f7faff 0%, #edf3ff 100%);
  --oc-sidebar-status-head-gap: 9px;
  --oc-sidebar-status-icon-size: 20px;
  --oc-sidebar-status-icon-color: #2d7eea;
  --oc-sidebar-status-icon-background: #e8f1ff;
  --oc-sidebar-status-icon-glyph-size: 13px;
  --oc-sidebar-status-title-size: 0.79rem;
  --oc-sidebar-status-title-color: #2f4364;
  --oc-sidebar-status-subtitle-size: 0.66rem;
  --oc-sidebar-status-subtitle-color: #6c7f9c;
  --oc-sidebar-progress-height: 6px;
  --oc-sidebar-progress-background: #dce8f8;
  --oc-sidebar-progress-fill: linear-gradient(90deg, #4a9dff, #2f7ef0);
  --oc-sidebar-status-metrics-gap: 0.55rem;
  --oc-sidebar-status-metrics-size: 0.67rem;
  --oc-sidebar-status-metrics-color: #647a9a;
  --oc-sidebar-status-usage-color: #2f4364;
  --oc-sidebar-status-percent-color: #2f7ef0;
  --oc-sidebar-status-unavailable-value-color: #4f6b9a;
  --oc-sidebar-status-link-min-height: 32px;
  --oc-sidebar-status-link-radius: 9px;
  --oc-sidebar-status-link-border-color: #4a9dff;
  --oc-sidebar-status-link-background: #4a9dff;
  --oc-sidebar-status-link-color: #fff;
  --oc-sidebar-status-link-size: 0.73rem;
  --oc-sidebar-status-link-hover-border-color: #2f7ef0;
  --oc-sidebar-status-link-hover-background: #2f7ef0;
  --oc-sidebar-brandbar-padding-x: 12px;
  --oc-sidebar-brand-gap: 10px;
  --oc-sidebar-brand-mark-size: 32px;
  --oc-sidebar-brand-mark-radius: 11px;
  --oc-sidebar-brand-mark-glyph-size: 16px;
  --oc-sidebar-brand-title-size: 0.9rem;
  --oc-sidebar-brand-subtitle-size: 0.69rem;
  --oc-sidebar-modules-padding: 8px 10px 8px;
  --oc-sidebar-module-list-gap: 6px;
  --oc-sidebar-module-link-min-height: 36px;
  --oc-sidebar-module-link-radius: 11px;
  --oc-sidebar-module-link-padding: 7px 9px;
  --oc-sidebar-module-link-gap: 10px;
  --oc-sidebar-module-link-font-size: 0.8rem;
  --oc-sidebar-module-icon-size: 18px;
  --oc-sidebar-module-icon-glyph-size: 16px;
  --oc-sidebar-nav-wrap-gap: 5px;
  --oc-sidebar-nav-wrap-padding: 8px 10px;
  --oc-sidebar-nav-scrollbar-size: 8px;
  --oc-sidebar-section-title-font-size: 0.64rem;
  --oc-sidebar-section-title-letter-spacing: 0.08em;
  --oc-sidebar-nav-gap: 4px;
  --oc-sidebar-nav-item-min-height: 40px;
  --oc-sidebar-nav-item-padding: 7px 8px;
  --oc-sidebar-nav-item-radius: 11px;
  --oc-sidebar-nav-item-gap: 9px;
  --oc-sidebar-nav-item-color: #5f6f86;
  --oc-sidebar-nav-item-hover-color: #334155;
  --oc-sidebar-nav-item-indicator-width: 2px;
  --oc-sidebar-nav-icon-size: 22px;
  --oc-sidebar-nav-icon-radius: 9px;
  --oc-sidebar-nav-icon-glyph-size: 13px;
  --oc-sidebar-nav-label-font-size: 0.79rem;
  --oc-sidebar-nav-label-font-weight: 620;
  --oc-sidebar-nav-badge-min-width: 17px;
  --oc-sidebar-nav-badge-size: 17px;
  --oc-sidebar-nav-badge-padding-x: 5px;
  --oc-sidebar-nav-badge-font-size: 0.64rem;
  --oc-sidebar-nav-badge-background: color-mix(in srgb, var(--warning) 78%, #f59e0b 22%);
  --oc-sidebar-nav-badge-shadow: 0 1px 4px color-mix(in srgb, var(--warning) 34%, transparent);
  --oc-sidebar-collapsed-inline-padding: 8px;
  --oc-sidebar-collapsed-icon-size: 26px;
  --oc-form-invalid-border-color: color-mix(in srgb, var(--destructive) 64%, var(--input-border) 36%);
  --oc-form-invalid-shadow: 0 0 0 1px color-mix(in srgb, var(--destructive) 24%, transparent);
  --oc-form-error-color: color-mix(in srgb, var(--destructive) 76%, var(--text-dark) 24%);
  --oc-form-summary-border-color: color-mix(in srgb, var(--destructive) 28%, transparent);
  --oc-form-summary-background: color-mix(in srgb, var(--destructive-light) 72%, var(--card) 28%);
  --oc-form-summary-hover-background: color-mix(in srgb, var(--destructive-light) 84%, var(--card) 16%);
  --oc-form-summary-title-color: color-mix(in srgb, var(--destructive) 82%, var(--text-dark) 18%);
  --oc-form-summary-label-color: color-mix(in srgb, var(--destructive) 88%, var(--text-dark) 12%);
  --oc-form-summary-message-color: color-mix(in srgb, var(--destructive) 74%, var(--text-dark) 26%);
  --oc-dialog-z-base: 62000;
  --oc-dialog-z-shield: 61990;

  position: relative;
  display: flex;
  width: 100%;
  min-height: 100vh;
  background: var(--background);
  color: var(--text-dark);
  overflow: hidden;
  isolation: isolate;
}

.oc-panel-shell * {
  box-sizing: border-box;
}

.oc-panel-shell .oc-main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 100vh;
  width: 100%;
  max-width: none;
  margin: 0;
  margin-left: var(--oc-shell-sidebar-width);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: margin-left 180ms ease;
}

.oc-panel-shell .oc-main.with-sidebar {
  margin-left: var(--oc-shell-sidebar-width);
}

.oc-panel-shell .oc-main.with-collapsed-sidebar {
  margin-left: var(--oc-shell-sidebar-collapsed-width);
}

.oc-panel-shell .panel-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--oc-shell-sidebar-width);
  height: 100vh;
  padding-top: var(--oc-shell-topbar-height);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  z-index: 2200;
  transition: width 180ms ease, transform 180ms ease;
  overflow: visible;
  will-change: width, transform;
}

.oc-panel-shell .panel-sidebar.is-open {
  transform: translateX(0);
}

.oc-panel-shell .panel-sidebar.is-hidden {
  transform: translateX(-108%);
}

.oc-panel-shell .panel-sidebar .oc-sidebar__brandbar {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--oc-shell-topbar-height);
  min-height: var(--oc-shell-topbar-height);
  padding: 0 var(--oc-sidebar-brandbar-padding-x, 12px);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--sidebar-border);
  background: var(--sidebar);
}

.oc-panel-shell .panel-sidebar .oc-sidebar__brand {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--oc-sidebar-brand-gap, 10px);
  text-decoration: none;
  color: inherit;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__brand-mark {
  width: var(--oc-sidebar-brand-mark-size, 34px);
  height: var(--oc-sidebar-brand-mark-size, 34px);
  flex: 0 0 var(--oc-sidebar-brand-mark-size, 34px);
  border-radius: var(--oc-sidebar-brand-mark-radius, 11px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  box-shadow: 0 8px 16px color-mix(in srgb, var(--primary) 30%, transparent);
}

.oc-panel-shell .panel-sidebar .oc-sidebar__brand-mark .one-svg {
  width: var(--oc-sidebar-brand-mark-glyph-size, 16px);
  height: var(--oc-sidebar-brand-mark-glyph-size, 16px);
}

.oc-panel-shell .panel-sidebar .oc-sidebar__brand-text {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__brand-text strong {
  display: block;
  font-size: var(--oc-sidebar-brand-title-size, 0.95rem);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
  letter-spacing: -0.01em;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__brand-text small {
  display: block;
  font-size: var(--oc-sidebar-brand-subtitle-size, 0.69rem);
  color: var(--text-gray-600);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__modules {
  padding: var(--oc-sidebar-modules-padding, 8px 10px 8px);
  border-bottom: 1px solid color-mix(in srgb, var(--sidebar-border) 78%, transparent);
}

.oc-panel-shell .panel-sidebar .oc-sidebar__module-list {
  display: grid;
  gap: var(--oc-sidebar-module-list-gap, 6px);
}

.oc-panel-shell .panel-sidebar .oc-sidebar__module-link {
  min-height: var(--oc-sidebar-module-link-min-height, 38px);
  border: 1px solid transparent;
  border-radius: var(--oc-sidebar-module-link-radius, 11px);
  padding: var(--oc-sidebar-module-link-padding, 7px 9px);
  display: inline-flex;
  align-items: center;
  gap: var(--oc-sidebar-module-link-gap, 10px);
  color: var(--sidebar-foreground);
  text-decoration: none;
  font-size: var(--oc-sidebar-module-link-font-size, 0.8rem);
  font-weight: 600;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__module-link:hover {
  background: color-mix(in srgb, var(--sidebar-active-bg) 58%, var(--oc-mix-surface) 42%);
  border-color: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--text-dark);
}

.oc-panel-shell .panel-sidebar .oc-sidebar__module-link.is-active {
  background: var(--sidebar-active-bg);
  border-color: color-mix(in srgb, var(--primary) 26%, transparent);
  color: var(--sidebar-primary);
}

.oc-panel-shell .panel-sidebar .oc-sidebar__module-icon {
  width: var(--oc-sidebar-module-icon-size, 18px);
  height: var(--oc-sidebar-module-icon-size, 18px);
  flex: 0 0 var(--oc-sidebar-module-icon-size, 18px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__module-icon .one-svg {
  width: var(--oc-sidebar-module-icon-glyph-size, 16px);
  height: var(--oc-sidebar-module-icon-glyph-size, 16px);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__nav-wrap {
  display: grid;
  align-content: start;
  gap: var(--oc-sidebar-nav-wrap-gap, 6px);
  padding: var(--oc-sidebar-nav-wrap-padding, 24px 16px);
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-gray-500) 35%, transparent) transparent;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__nav-wrap::-webkit-scrollbar {
  width: var(--oc-sidebar-nav-scrollbar-size, 8px);
}

.oc-panel-shell .panel-sidebar .oc-sidebar__nav-wrap::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-gray-500) 30%, transparent);
  border-radius: 999px;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__section-title {
  margin: 0;
  padding: 0 6px;
  font-size: var(--oc-sidebar-section-title-font-size, 0.64rem);
  letter-spacing: var(--oc-sidebar-section-title-letter-spacing, 0.08em);
  text-transform: uppercase;
  color: var(--text-gray-600);
  font-weight: 700;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__nav {
  display: grid;
  gap: var(--oc-sidebar-nav-gap, 6px);
  min-width: 0;
}

.oc-panel-shell .panel-sidebar .app-nav-item {
  min-height: var(--oc-sidebar-nav-item-min-height, 48px);
  padding: var(--oc-sidebar-nav-item-padding, 12px 16px);
  border-radius: var(--oc-sidebar-nav-item-radius, 8px);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--oc-sidebar-nav-item-gap, 12px);
  min-width: 0;
  text-decoration: none;
  color: var(--oc-sidebar-nav-item-color, #5f6f86);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  position: relative;
}

.oc-panel-shell .panel-sidebar .app-nav-item:hover {
  background: color-mix(in srgb, var(--sidebar-active-bg) 50%, transparent);
  border-color: transparent;
  color: var(--sidebar-foreground);
}

.oc-panel-shell .panel-sidebar .app-nav-item--active {
  background: var(--sidebar-active-bg);
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  color: var(--sidebar-primary);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
}

.oc-panel-shell .panel-sidebar .app-nav-item__indicator {
  width: var(--oc-sidebar-nav-item-indicator-width, 2px);
  align-self: stretch;
  border-radius: 999px;
  background: transparent;
}

.oc-panel-shell .panel-sidebar .app-nav-item--active .app-nav-item__indicator {
  background: var(--sidebar-primary);
}

/* Remove indicator for parity with UI source. */
.oc-panel-shell .panel-sidebar .app-nav-item__indicator {
  display: none !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item::before,
.oc-panel-shell .panel-sidebar .app-nav-item::after {
  content: none !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item {
  border-left: 0 !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item__icon {
  width: var(--oc-sidebar-nav-icon-size, 32px);
  height: var(--oc-sidebar-nav-icon-size, 32px);
  flex: 0 0 var(--oc-sidebar-nav-icon-size, 32px);
  border-radius: var(--oc-sidebar-nav-icon-radius, 8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: color-mix(in srgb, var(--sidebar-foreground) 86%, #0f172a 14%);
}

.oc-panel-shell .panel-sidebar .app-nav-item--active .app-nav-item__icon {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-primary);
}

/* Force icon container size/colors for parity. */
.oc-panel-shell .panel-sidebar .app-nav-item__icon {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  border-radius: 8px !important;
  background: transparent !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item__icon .one-svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item--active .app-nav-item__icon {
  background: #e1f0ff !important;
  color: #3699ff !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item__icon .one-svg {
  width: var(--oc-sidebar-nav-icon-glyph-size, 16px);
  height: var(--oc-sidebar-nav-icon-glyph-size, 16px);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.oc-panel-shell .panel-sidebar .app-nav-item__label {
  min-width: 0;
  flex: 1 1 auto;
  font-size: var(--oc-sidebar-nav-label-font-size, 0.875rem);
  font-weight: var(--oc-sidebar-nav-label-font-weight, 500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oc-panel-shell .panel-sidebar .app-nav-item__badge {
  min-width: var(--oc-sidebar-nav-badge-min-width, 20px);
  height: var(--oc-sidebar-nav-badge-size, 20px);
  border-radius: 999px;
  padding: 0 var(--oc-sidebar-nav-badge-padding-x, 6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--oc-sidebar-nav-badge-font-size, 0.75rem);
  font-weight: 700;
  background: var(--oc-sidebar-nav-badge-background, color-mix(in srgb, var(--warning) 78%, #f59e0b 22%));
  color: #fff;
  box-shadow: var(--oc-sidebar-nav-badge-shadow, 0 1px 4px color-mix(in srgb, var(--warning) 34%, transparent));
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status {
  margin: var(--oc-sidebar-status-margin, auto 16px 16px);
  padding: var(--oc-sidebar-status-padding, 16px);
  border-radius: var(--oc-sidebar-status-radius, 12px);
  border: 1px solid var(--oc-sidebar-status-border-color, var(--sidebar-border));
  background: var(--oc-sidebar-status-background, var(--sidebar-active-bg));
  box-shadow: none;
  display: grid;
  gap: var(--oc-sidebar-status-gap, 12px);
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status.is-unavailable {
  border-color: var(--oc-sidebar-status-unavailable-border-color, var(--sidebar-border));
  background: var(--oc-sidebar-status-unavailable-background, var(--sidebar-active-bg));
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status-head {
  display: flex;
  align-items: center;
  gap: var(--oc-sidebar-status-head-gap, 12px);
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status-icon {
  width: var(--oc-sidebar-status-icon-size, 36px);
  height: var(--oc-sidebar-status-icon-size, 36px);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--oc-sidebar-status-icon-color, var(--primary));
  background: var(--oc-sidebar-status-icon-background, var(--primary-light));
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status-icon .one-svg {
  width: var(--oc-sidebar-status-icon-glyph-size, 16px);
  height: var(--oc-sidebar-status-icon-glyph-size, 16px);
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status-icon.is-success {
  background: color-mix(in srgb, var(--success) 20%, transparent);
  color: var(--success);
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status-head strong {
  display: block;
  font-size: var(--oc-sidebar-status-title-size, 0.75rem);
  font-weight: 600;
  color: var(--oc-sidebar-status-title-color, var(--sidebar-foreground));
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status-head small {
  display: block;
  margin-top: 1px;
  font-size: var(--oc-sidebar-status-subtitle-size, 0.75rem);
  color: var(--oc-sidebar-status-subtitle-color, var(--text-gray-600));
}

.oc-panel-shell .panel-sidebar .oc-sidebar__progress {
  width: 100%;
  height: var(--oc-sidebar-progress-height, 6px);
  border-radius: 999px;
  background: var(--oc-sidebar-progress-background, #dce8f8);
  overflow: hidden;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--oc-sidebar-progress-fill, linear-gradient(90deg, #4a9dff, #2f7ef0));
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oc-sidebar-status-metrics-gap, 0.55rem);
  font-size: var(--oc-sidebar-status-metrics-size, 0.67rem);
  color: var(--oc-sidebar-status-metrics-color, #647a9a);
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status-usage {
  font-weight: 600;
  color: var(--oc-sidebar-status-usage-color, #2f4364);
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status-percent {
  font-weight: 700;
  color: var(--oc-sidebar-status-percent-color, #2f7ef0);
  letter-spacing: -0.01em;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status.is-unavailable .oc-sidebar__status-percent,
.oc-panel-shell .panel-sidebar .oc-sidebar__status.is-unavailable .oc-sidebar__status-usage {
  color: var(--oc-sidebar-status-unavailable-value-color, #4f6b9a);
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--oc-sidebar-status-link-min-height, 32px);
  border-radius: var(--oc-sidebar-status-link-radius, 9px);
  border: 1px solid var(--oc-sidebar-status-link-border-color, #4a9dff);
  background: var(--oc-sidebar-status-link-background, #4a9dff);
  color: var(--oc-sidebar-status-link-color, #fff);
  text-decoration: none;
  font-size: var(--oc-sidebar-status-link-size, 0.73rem);
  font-weight: 700;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status-link:hover {
  background: var(--oc-sidebar-status-link-hover-background, #2f7ef0);
  border-color: var(--oc-sidebar-status-link-hover-border-color, #2f7ef0);
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.oc-panel-shell .panel-topbar,
.oc-panel-shell .oc-topbar {
  position: sticky;
  top: 0;
  min-height: var(--oc-shell-topbar-height);
  height: var(--oc-shell-topbar-height);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--oc-shell-surface);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
  z-index: 2520;
  overflow: visible;
  pointer-events: auto;
}

.oc-panel-shell .panel-topbar .oc-topbar__left {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.oc-panel-shell .panel-topbar .panel-topbar-left {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.oc-panel-shell .panel-topbar .panel-topbar-brand-slot,
.oc-panel-shell .panel-topbar .panel-topbar-toggle-slot {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.oc-panel-shell .panel-topbar .panel-topbar-brand-slot {
  order: 0;
}

.oc-panel-shell .panel-topbar .panel-topbar-toggle-slot {
  order: 1;
  margin-left: 0;
  margin-right: 0;
  margin-left: 2px;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  box-shadow: 0 10px 20px rgb(54 153 255 / 0.25);
}

.oc-panel-shell .panel-topbar .oc-topbar__brand-mark .one-svg {
  width: 20px;
  height: 20px;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand-text {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand-text strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.05;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand-text small {
  display: block;
  font-size: 0.75rem;
  color: var(--text-gray-500);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oc-panel-shell .panel-topbar .oc-topbar__middle {
  min-width: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.oc-panel-shell .panel-topbar .oc-topbar__search {
  position: relative;
  width: var(--oc-topbar-search-width, min(428px, 100%));
  max-width: 100%;
  pointer-events: auto;
}

.oc-panel-shell .panel-topbar .oc-topbar__search .one-svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  color: var(--text-gray-500);
  transform: translateY(-50%);
  pointer-events: none;
}

.oc-panel-shell .panel-topbar .oc-topbar__search input {
  width: 100%;
  height: var(--oc-topbar-search-height, 36px);
  border: 1px solid var(--input-border);
  border-radius: var(--oc-topbar-search-radius, 8px);
  padding: 0 12px 0 40px;
  background: var(--accent);
  color: var(--text-gray-800);
  font-size: 0.875rem;
  pointer-events: auto;
}

.oc-panel-shell .panel-topbar .oc-topbar__search input::placeholder {
  color: var(--text-gray-500);
}

.oc-panel-shell .panel-topbar .oc-topbar__search input:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 40%, var(--input-border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.oc-panel-shell .panel-topbar .oc-topbar__right {
  position: relative;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: var(--oc-topbar-control-gap, 7px);
  min-width: 0;
  isolation: isolate;
  pointer-events: auto;
}

.oc-panel-shell .panel-topbar .icon-btn,
.oc-panel-shell .panel-topbar .oc-topbar__user,
.oc-panel-shell .panel-topbar .oc-topbar-popover,
.oc-panel-shell .panel-topbar .oc-topbar-popover * {
  pointer-events: auto;
}

.oc-panel-shell .panel-topbar,
.oc-panel-shell .oc-topbar {
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 16px !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand-mark {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 20px rgb(54 153 255 / 0.25) !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand-mark .one-svg {
  width: 20px !important;
  height: 20px !important;
}

.oc-panel-shell .panel-topbar .icon-btn {
  width: var(--oc-topbar-icon-button-size, 32px);
  height: var(--oc-topbar-icon-button-size, 32px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--oc-topbar-icon-radius, 8px);
  border: 0;
  background: transparent;
  color: var(--text-gray-700);
  box-shadow: none;
  transition: background-color 140ms ease, color 140ms ease;
  cursor: pointer;
}

.oc-panel-shell .panel-topbar .icon-btn:hover {
  background: var(--accent);
  color: var(--text-dark);
}

.oc-panel-shell .panel-topbar .icon-btn.is-open,
.oc-panel-shell .panel-topbar .icon-btn.is-active {
  background: var(--accent);
  color: var(--text-dark);
}

.oc-panel-shell .panel-topbar .icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
}

.oc-panel-shell .panel-topbar .icon-btn .one-svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.oc-panel-shell .panel-topbar .oc-dot {
  position: absolute;
  top: 6px;
  right: 5px;
  min-width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--destructive);
  box-shadow: 0 0 0 2px var(--card);
}

.oc-panel-shell .panel-topbar .oc-dot--count {
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--oc-sidebar-status-link-color, #fff);
}

.oc-panel-shell .panel-topbar .oc-topbar__user {
  min-height: var(--oc-topbar-user-min-height, 44px);
  max-width: var(--oc-topbar-user-max-width, 320px);
  margin-left: 8px;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 8px 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  color: var(--text-gray-800);
  cursor: pointer;
  box-shadow: none;
  transition: background-color 140ms ease;
}

.oc-panel-shell .panel-topbar .oc-topbar__user:hover {
  background: var(--accent);
}

.oc-panel-shell .panel-topbar .oc-topbar__user.is-open {
  background: var(--accent);
}

.oc-panel-shell .panel-topbar .oc-topbar__avatar {
  width: var(--oc-topbar-avatar-size, 32px);
  height: var(--oc-topbar-avatar-size, 32px);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--oc-topbar-avatar-background, #e1f0ff);
  color: var(--oc-topbar-avatar-color, #3699ff);
  border: 0;
  font-size: var(--oc-topbar-avatar-font-size, 0.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--oc-topbar-avatar-letter-spacing, 0.01em);
  flex: 0 0 var(--oc-topbar-avatar-size, 32px);
}

.oc-panel-shell .panel-topbar .oc-topbar__avatar .one-svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.oc-panel-shell .panel-topbar .oc-topbar__user-meta {
  min-width: 0;
  display: grid;
  gap: 1px;
  text-align: left;
}

.oc-panel-shell .panel-topbar .oc-topbar__user-meta strong {
  display: block;
  font-size: 0.875rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oc-panel-shell .panel-topbar .oc-topbar__user-meta small {
  display: block;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--text-gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oc-panel-shell .panel-topbar .oc-topbar__user > .one-svg,
.oc-panel-shell .panel-topbar .oc-topbar__user > span > .one-svg {
  width: 16px;
  height: 16px;
  color: var(--text-gray-500);
  flex: 0 0 16px;
}

.oc-panel-shell .panel-topbar .oc-topbar-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  border: 1px solid var(--oc-topbar-popover-border-color, #dbe4f2);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--oc-topbar-popover-shadow, 0 20px 40px rgb(15 23 42 / 0.16), 0 6px 16px rgb(15 23 42 / 0.08));
  overflow: hidden;
  z-index: 2705;
}

.oc-panel-shell .panel-topbar .oc-topbar-popover--notifications {
  width: min(390px, calc(100vw - 24px));
}

.oc-panel-shell .panel-topbar .oc-topbar-popover--profile {
  width: min(336px, calc(100vw - 24px));
}

.oc-panel-shell .panel-topbar .panel-profile-popover {
  width: var(--oc-topbar-profile-popover-width, min(320px, calc(100vw - 20px)));
  border-radius: 18px;
  overflow: hidden;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px 12px;
  border-bottom: 1px solid var(--oc-topbar-profile-header-border-color, #e5ecf7);
  background: var(--oc-topbar-profile-header-background, linear-gradient(180deg, #ffffff 0%, #f6faff 100%));
}

.oc-panel-shell .panel-topbar .panel-profile-header__avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--oc-topbar-profile-header-avatar-color, #fff);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--primary) 28%, transparent);
}

.oc-panel-shell .panel-topbar .panel-profile-header__avatar .one-svg {
  width: 18px;
  height: 18px;
}

.oc-panel-shell .panel-topbar .panel-profile-header__identity {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.oc-panel-shell .panel-topbar .panel-profile-header__identity h3 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.oc-panel-shell .panel-topbar .panel-profile-header__identity p {
  margin: 0;
  font-size: 0.73rem;
  color: var(--text-gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oc-panel-shell .panel-topbar .panel-profile-role-pill {
  justify-self: start;
  margin-top: 2px;
}

.oc-panel-shell .panel-topbar .panel-profile-menu {
  display: grid;
  gap: 0;
  padding: 8px 0 9px;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__item {
  width: 100%;
  margin-inline: 0;
  min-height: var(--oc-topbar-profile-menu-item-min-height, 56px);
  border: 0;
  border-radius: var(--oc-topbar-profile-menu-item-radius, 0);
  padding: var(--oc-topbar-profile-menu-item-padding, 11px 18px);
  display: inline-flex;
  align-items: center;
  gap: var(--oc-topbar-profile-menu-item-gap, 12px);
  text-decoration: none;
  color: var(--text-gray-800);
  background: transparent;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__item + .panel-profile-menu__item:not(.panel-profile-menu__item--separated):not(.panel-profile-menu__item--logout) {
  border-top: 1px solid color-mix(in srgb, var(--oc-topbar-profile-menu-separator-color, #e5ecf7) 88%, transparent);
}

.oc-panel-shell .panel-topbar .panel-profile-menu__item:hover {
  background: var(--oc-topbar-profile-menu-item-hover-background, #f3f7ff);
  border-color: transparent;
  color: var(--text-dark);
}

.oc-panel-shell .panel-topbar .panel-profile-menu__item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
}

.oc-panel-shell .panel-topbar .panel-profile-menu__item--logout {
  color: var(--text-gray-800);
  width: 100%;
  margin: 0;
  min-height: 54px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  padding: 10px 14px;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__item--separated {
  border-top: 0;
  margin-top: 0;
  padding-top: 12px;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__item--logout:hover {
  background: color-mix(in srgb, var(--destructive-light) 34%, var(--card) 66%);
  border-color: transparent;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__icon {
  width: var(--oc-topbar-profile-menu-icon-size, 36px);
  height: var(--oc-topbar-profile-menu-icon-size, 36px);
  flex: 0 0 var(--oc-topbar-profile-menu-icon-size, 36px);
  border-radius: var(--oc-topbar-profile-menu-icon-radius, 10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--oc-topbar-profile-menu-icon-background, #eef3fa);
  color: var(--oc-topbar-profile-menu-icon-color, #5f708a);
}

.oc-panel-shell .panel-topbar .panel-profile-menu__item--primary .panel-profile-menu__icon {
  background: var(--oc-topbar-profile-menu-primary-icon-background, #e9f1ff);
  color: var(--oc-topbar-profile-menu-primary-icon-color, #2f7ef0);
}

.oc-panel-shell .panel-topbar .panel-profile-menu__item--logout .panel-profile-menu__icon {
  background: var(--oc-topbar-profile-menu-logout-icon-background, #eef3fa);
  color: var(--oc-topbar-profile-menu-logout-icon-color, #5f708a);
}

.oc-panel-shell .panel-topbar .panel-profile-menu__item--logout .panel-profile-menu__label {
  color: var(--text-dark);
}

.oc-panel-shell .panel-topbar .panel-profile-menu__icon .one-svg {
  width: 14px;
  height: 14px;
}

/* Defensive sizing:
   keep OneSvg dimensions stable even when global utility styles target `svg`. */
.oc-panel-shell .panel-topbar .icon-btn .one-svg,
.oc-panel-shell .panel-topbar .oc-topbar__user .one-svg,
.oc-panel-shell .panel-topbar .oc-topbar__avatar .one-svg,
.oc-panel-shell .panel-topbar .panel-profile-header__avatar .one-svg,
.oc-panel-shell .panel-topbar .panel-profile-menu__icon .one-svg {
  display: block;
  flex: 0 0 auto;
}

.oc-panel-shell .panel-topbar .icon-btn .one-svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__icon .one-svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__icon > svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__avatar .one-svg {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
}

.oc-panel-shell .panel-topbar .panel-profile-header__avatar .one-svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__text {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__label {
  font-size: var(--oc-topbar-profile-menu-label-size, 0.87rem);
  font-weight: 650;
  line-height: 1.14;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__text small {
  font-size: var(--oc-topbar-profile-menu-description-size, 0.71rem);
  color: var(--text-gray-600);
  line-height: 1.25;
}

.oc-panel-shell .panel-topbar .oc-topbar-popover > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--oc-topbar-popover-header-border-color, #e5ecf7);
  background: var(--oc-topbar-popover-header-background, #f8fbff);
}

.oc-panel-shell .panel-topbar .oc-topbar-popover > header h3 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.oc-panel-shell .panel-topbar .oc-topbar-popover > header p {
  margin: 4px 0 0;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-gray-600);
}

.oc-panel-shell .panel-topbar .oc-topbar-popover__body {
  max-height: min(430px, calc(100vh - var(--oc-shell-topbar-height) - 36px));
  overflow: auto;
  padding: 10px 10px;
}

.oc-panel-shell .panel-topbar .oc-topbar-popover__body p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-gray-700);
}

.oc-panel-shell .panel-topbar .oc-topbar-popover > footer {
  border-top: 1px solid color-mix(in srgb, var(--border) 84%, var(--primary) 16%);
  padding: 10px 12px 11px;
  background: color-mix(in srgb, var(--card) 88%, var(--accent) 12%);
  display: flex;
  justify-content: flex-end;
}

.oc-panel-shell .panel-topbar .oc-topbar-popover > footer :is(button, a) {
  min-height: 36px;
}

.oc-panel-shell .panel-topbar .oc-role-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  background: color-mix(in srgb, var(--primary-light) 74%, var(--oc-mix-surface) 26%);
  color: var(--primary-dark);
  font-size: 0.67rem;
  font-weight: 700;
  padding: 0 9px;
}

.oc-panel-shell .panel-topbar .oc-topbar-menu {
  display: grid;
  padding: 9px;
  gap: 4px;
}

.oc-panel-shell .panel-topbar .oc-topbar-menu a {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 11px;
  text-decoration: none;
  color: var(--text-gray-700);
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.oc-panel-shell .panel-topbar .oc-topbar-menu a:hover {
  background: color-mix(in srgb, var(--accent) 78%, var(--card) 22%);
  border-color: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--text-dark);
}

.oc-panel-shell .theme-icon--sun {
  display: none;
}

.dark .oc-panel-shell .theme-icon--sun {
  display: inline-block;
}

.dark .oc-panel-shell .theme-icon--moon {
  display: none;
}

.dark .oc-panel-shell {
  --oc-shell-surface: var(--oc-topbar-dark-shell-surface);
}

.dark .oc-panel-shell .panel-topbar,
.dark .oc-panel-shell .oc-topbar {
  border-bottom-color: var(--oc-topbar-dark-border-color);
}

.dark .oc-panel-shell .panel-topbar .oc-topbar__search input {
  border-color: var(--oc-topbar-dark-search-border-color);
  background: var(--oc-topbar-dark-search-background);
  color: var(--text-gray-800);
}

.dark .oc-panel-shell .panel-topbar .oc-topbar__search input::placeholder {
  color: var(--text-gray-600);
}

.dark .oc-panel-shell .panel-topbar .icon-btn,
.dark .oc-panel-shell .panel-topbar .oc-topbar__user {
  border-color: var(--oc-topbar-dark-control-border-color);
  background: var(--oc-topbar-dark-control-background);
}

.dark .oc-panel-shell .panel-topbar .icon-btn:hover,
.dark .oc-panel-shell .panel-topbar .oc-topbar__user:hover {
  background: var(--oc-topbar-dark-control-hover-background);
}

.dark .oc-panel-shell .panel-topbar .oc-topbar__avatar {
  background: var(--oc-topbar-dark-avatar-background);
  color: var(--oc-topbar-dark-avatar-color);
  border-color: var(--oc-topbar-dark-avatar-border-color);
}

.dark .oc-panel-shell .panel-topbar .oc-topbar-popover {
  background: var(--oc-topbar-dark-popover-background);
  border-color: var(--oc-topbar-dark-popover-border-color);
  box-shadow: var(--oc-topbar-dark-popover-shadow);
}

.dark .oc-panel-shell .panel-topbar .oc-topbar-popover > header {
  border-bottom-color: var(--oc-topbar-dark-popover-header-border-color);
  background: var(--oc-topbar-dark-popover-header-background);
}

.dark .oc-panel-shell .panel-topbar .oc-topbar-popover > footer {
  border-top-color: var(--oc-topbar-dark-popover-footer-border-color);
  background: var(--oc-topbar-dark-popover-footer-background);
}

.dark .oc-panel-shell .panel-topbar .oc-topbar-menu a:hover {
  background: var(--oc-topbar-dark-menu-hover-background);
  border-color: var(--oc-topbar-dark-menu-hover-border-color);
}

.dark .oc-panel-shell .panel-topbar .panel-profile-menu__item:hover {
  background: var(--oc-topbar-dark-profile-item-hover-background);
  border-color: var(--oc-topbar-dark-profile-item-hover-border-color);
}

.dark .oc-panel-shell .panel-topbar .panel-profile-menu__icon {
  background: var(--oc-topbar-dark-profile-icon-background);
  color: var(--oc-topbar-dark-profile-icon-color);
}

.dark .oc-panel-shell .panel-topbar .panel-profile-menu__item--logout .panel-profile-menu__icon {
  background: var(--oc-topbar-dark-profile-icon-background);
  color: var(--oc-topbar-dark-profile-icon-color);
}

.dark .oc-panel-shell .panel-topbar .panel-profile-menu__item--logout .panel-profile-menu__label {
  color: var(--text-gray-800);
}

.dark .oc-panel-shell .panel-topbar .panel-profile-menu__item--separated {
  border-top-color: var(--oc-topbar-dark-profile-separator-color);
}

.dark .oc-panel-shell .panel-topbar .panel-profile-menu__item--logout {
  border-color: color-mix(in srgb, var(--destructive) 34%, var(--oc-topbar-dark-profile-separator-color) 66%);
  background: color-mix(in srgb, var(--card) 86%, #0f172a 14%);
}

.dark .oc-panel-shell .panel-topbar .panel-profile-menu__item--logout:hover {
  background: color-mix(in srgb, var(--destructive) 16%, var(--card) 84%);
}

.dark .oc-panel-shell .panel-topbar .panel-profile-menu__text small,
.dark .oc-panel-shell .panel-topbar .panel-profile-header__identity p {
  color: var(--text-gray-500);
}

.dark .oc-panel-shell .panel-sidebar .oc-sidebar__status {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
}

.dark .oc-panel-shell .panel-sidebar .oc-sidebar__status.is-unavailable {
  border-color: color-mix(in srgb, var(--border) 78%, #0f172a 22%);
  background: color-mix(in srgb, var(--accent) 72%, #0f172a 28%);
}

.oc-panel-shell .panel-content {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding: var(--oc-shell-content-padding-y) var(--oc-shell-content-padding-x);
  background: var(--background);
  z-index: auto;
}

.oc-panel-shell .panel-content > .panel-app-container,
.oc-panel-shell .panel-content > .panel-module-host {
  width: 100%;
  min-width: 0;
}

.oc-panel-shell .panel-app-container,
.oc-panel-shell .panel-module-host {
  display: grid;
  gap: 1.5rem;
}

.oc-panel-shell .panel-home {
  display: grid;
  gap: 1rem;
}

.oc-panel-shell .panel-home-head h1 {
  margin: 0;
  font-size: clamp(1.72rem, 2.2vw, 2.18rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.oc-panel-shell .panel-home-head p {
  margin: 0.4rem 0 0;
  color: var(--text-gray-700);
  font-size: 0.92rem;
}

.oc-panel-shell .panel-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.oc-panel-shell .panel-home-card {
  display: grid;
  gap: 0.65rem;
  align-content: start;
}

.oc-panel-shell .panel-home-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary-light) 72%, var(--oc-mix-surface) 28%);
  color: var(--primary-dark);
}

.oc-panel-shell .panel-home-icon .panel-icon-svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Dashboard global fallback:
   keeps portal/management dashboard structure styled even if scoped CSS bundle is delayed. */
.oc-panel-shell .panel-content :is(.portal-dashboard-v2, .management-dashboard-v2) {
  display: grid;
  gap: var(--oc-dashboard-gap, 1.18rem);
}

.oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpis, .management-dashboard-v2__kpis) {
  display: grid;
  gap: var(--oc-dashboard-kpi-gap, 0.96rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpi-card, .management-dashboard-v2__kpi-card, .oc-dashboard-kpi-card) {
  border: 1px solid var(--oc-dashboard-card-border-color, color-mix(in srgb, var(--border) 94%, var(--primary) 6%));
  border-radius: var(--oc-dashboard-card-radius, 14px);
  background: var(--card);
  min-height: var(--oc-dashboard-kpi-min-height, 172px);
  padding: var(--oc-dashboard-card-padding, 1.08rem 1.14rem);
  display: grid;
  align-content: start;
  gap: var(--oc-dashboard-kpi-card-gap, 0.42rem);
  box-shadow: var(--oc-dashboard-card-shadow, 0 1px 2px rgb(15 23 42 / 0.04));
}

.oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpi-head, .management-dashboard-v2__kpi-head, .oc-dashboard-kpi-card__head) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpi-icon, .management-dashboard-v2__kpi-icon, .oc-dashboard-kpi-card__icon) {
  width: var(--oc-dashboard-kpi-icon-size, 34px);
  height: var(--oc-dashboard-kpi-icon-size, 34px);
  border-radius: var(--oc-dashboard-kpi-icon-radius, 10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-light) 72%, var(--card) 28%);
}

.oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpi-icon .one-svg, .management-dashboard-v2__kpi-icon .one-svg, .oc-dashboard-kpi-card__icon .one-svg) {
  width: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  height: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  inline-size: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  block-size: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  min-width: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  min-height: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  max-width: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  max-height: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  max-inline-size: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  max-block-size: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  aspect-ratio: 1 / 1 !important;
  display: block;
  flex: 0 0 auto;
}

.oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpi-icon, .management-dashboard-v2__kpi-icon, .oc-dashboard-kpi-card__icon) > svg {
  width: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  height: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  inline-size: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  block-size: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  min-width: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  min-height: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  max-width: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  max-height: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  max-inline-size: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  max-block-size: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  aspect-ratio: 1 / 1 !important;
  display: block;
  flex: 0 0 auto;
}

/* Alias kept for validation-gate compatibility. */
.oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpi-icon, .management-dashboard-v2__kpi-icon) > svg {
  width: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  height: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
}

.oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpi-trend, .management-dashboard-v2__kpi-trend, .oc-dashboard-kpi-card__trend) {
  width: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  height: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  inline-size: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  block-size: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  min-width: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  min-height: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  max-width: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  max-height: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  max-inline-size: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  max-block-size: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  aspect-ratio: 1 / 1 !important;
  display: block;
  flex: 0 0 auto;
  color: var(--oc-dashboard-kpi-trend-color, #58c4cc);
  transform: rotate(-32deg);
  opacity: 0.78;
}

.oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpi-head, .management-dashboard-v2__kpi-head, .oc-dashboard-kpi-card__head) > svg {
  width: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  height: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  inline-size: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  block-size: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  min-width: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  min-height: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  max-width: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  max-height: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  max-inline-size: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  max-block-size: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  aspect-ratio: 1 / 1 !important;
  display: block;
  flex: 0 0 auto;
  color: var(--oc-dashboard-kpi-trend-color, #58c4cc);
  transform: rotate(-32deg);
  opacity: 0.78;
}

/* Alias kept for validation-gate compatibility. */
.oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpi-head, .management-dashboard-v2__kpi-head) > svg {
  width: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  height: var(--oc-dashboard-kpi-trend-size, 12px) !important;
}

.oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpi-head, .management-dashboard-v2__kpi-head, .oc-dashboard-kpi-card__head) > .one-svg {
  width: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  height: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  inline-size: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  block-size: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  min-width: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  min-height: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  max-width: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  max-height: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  max-inline-size: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  max-block-size: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  aspect-ratio: 1 / 1 !important;
  display: block;
  flex: 0 0 auto;
  color: var(--oc-dashboard-kpi-trend-color, #58c4cc);
  transform: rotate(-32deg);
  opacity: 0.78;
}

.oc-panel-shell .panel-content :is(.portal-dashboard-v2__approval-icon .one-svg, .management-dashboard-v2__approval-icon .one-svg) {
  width: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  height: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  inline-size: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  block-size: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  min-width: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  min-height: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  max-width: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  max-height: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  max-inline-size: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  max-block-size: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  aspect-ratio: 1 / 1 !important;
  display: block;
  flex: 0 0 auto;
}

.oc-panel-shell .panel-content :is(.portal-dashboard-v2__approval-icon, .management-dashboard-v2__approval-icon) > svg {
  width: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  height: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  inline-size: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  block-size: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  min-width: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  min-height: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  max-width: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  max-height: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  max-inline-size: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  max-block-size: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  aspect-ratio: 1 / 1 !important;
  display: block;
  flex: 0 0 auto;
}

.oc-panel-shell .panel-content :is(.portal-dashboard-v2__approval-icon, .management-dashboard-v2__approval-icon) > .one-svg {
  width: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  height: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  inline-size: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  block-size: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  min-width: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  min-height: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  max-width: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  max-height: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  max-inline-size: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  max-block-size: var(--oc-dashboard-approval-icon-glyph-size, 16px) !important;
  aspect-ratio: 1 / 1 !important;
  display: block;
  flex: 0 0 auto;
}

/* Defensive clamp:
   Prevent external utility styles from scaling KPI svg glyphs to card width. */
.oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpi-card, .management-dashboard-v2__kpi-card, .oc-dashboard-kpi-card) :is(svg, .one-svg) {
  width: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  height: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  min-width: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  min-height: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  max-width: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  max-height: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  inline-size: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  block-size: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  max-inline-size: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  max-block-size: var(--oc-dashboard-kpi-icon-glyph-size, 16px) !important;
  flex: 0 0 auto !important;
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__kpi-icon,
  .portal-dashboard-v2__kpi-head,
  .portal-dashboard-v2__approval-icon,
  .management-dashboard-v2__kpi-icon,
  .management-dashboard-v2__kpi-head,
  .management-dashboard-v2__approval-icon
) :is(path, circle, rect, line, polyline, polygon) {
  vector-effect: non-scaling-stroke;
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__kpi-head > .portal-dashboard-v2__kpi-trend,
  .portal-dashboard-v2__kpi-head > .one-svg.portal-dashboard-v2__kpi-trend,
  .management-dashboard-v2__kpi-head > .management-dashboard-v2__kpi-trend,
  .management-dashboard-v2__kpi-head > .one-svg.management-dashboard-v2__kpi-trend
) {
  width: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  height: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  min-width: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  min-height: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  max-width: var(--oc-dashboard-kpi-trend-size, 12px) !important;
  max-height: var(--oc-dashboard-kpi-trend-size, 12px) !important;
}

.oc-panel-shell .panel-content .portal-dashboard-v2__body-grid {
  display: grid;
  gap: var(--oc-dashboard-body-gap, 1.02rem);
  grid-template-columns: minmax(0, var(--oc-dashboard-body-primary-column, 1.68fr)) minmax(0, 1fr);
}

.oc-panel-shell .panel-content .management-dashboard-v2__body-grid {
  display: grid;
  gap: var(--oc-dashboard-body-gap, 1.02rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__storage,
  .portal-dashboard-v2__recent-events,
  .management-dashboard-v2__tenants-card,
  .management-dashboard-v2__storage-card,
  .management-dashboard-v2__activity-card,
  .portal-dashboard-v2__approval-alert,
  .management-dashboard-v2__approval-alert,
  .oc-dashboard-storage-card,
  .oc-dashboard-feed-card,
  .one-dashboard-approval-alert
) {
  border: 1px solid var(--oc-dashboard-card-border-color, color-mix(in srgb, var(--border) 94%, var(--primary) 6%));
  border-radius: var(--oc-dashboard-card-radius, 14px);
  background: var(--card);
  box-shadow: var(--oc-dashboard-card-shadow, 0 1px 2px rgb(15 23 42 / 0.04));
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__storage,
  .portal-dashboard-v2__recent-events,
  .management-dashboard-v2__tenants-card,
  .management-dashboard-v2__storage-card,
  .management-dashboard-v2__activity-card,
  .oc-dashboard-storage-card,
  .oc-dashboard-feed-card
) {
  min-height: var(--oc-dashboard-body-min-height, 286px);
  padding: var(--oc-dashboard-card-padding, 1.08rem 1.14rem);
}

.oc-panel-shell .panel-content .management-dashboard-v2__tenants-card {
  grid-column: span 2;
}

.oc-panel-shell .panel-content .management-dashboard-v2__activity-card {
  grid-column: span 1;
}

.oc-panel-shell .panel-content .management-dashboard-v2__storage-card {
  grid-column: 1 / -1;
}

.oc-panel-shell .panel-content :is(.portal-dashboard-v2__approval-alert, .management-dashboard-v2__approval-alert, .one-dashboard-approval-alert) {
  min-height: var(--oc-dashboard-approval-min-height, 116px);
  padding: var(--oc-dashboard-approval-padding, 1rem 1.14rem);
}

/* OneCore default dashboard class fallbacks:
   keep panel visuals intact even when page-level css class mapping is not available yet. */
.oc-panel-shell .panel-content .oc-dashboard-kpi-card__icon {
  width: var(--oc-dashboard-kpi-icon-size, 34px);
  height: var(--oc-dashboard-kpi-icon-size, 34px);
  border-radius: var(--oc-dashboard-kpi-icon-radius, 10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-light) 72%, var(--card) 28%);
}

.oc-panel-shell .panel-content .oc-dashboard-kpi-card strong {
  font-size: var(--oc-dashboard-kpi-value-size, clamp(1.92rem, 2.12vw, 2.12rem));
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--text-dark);
}

.oc-panel-shell .panel-content .oc-dashboard-kpi-card p {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-gray-600);
}

.oc-panel-shell .panel-content :is(.oc-dashboard-storage-card, .oc-dashboard-feed-card, .one-dashboard-approval-alert) .one-dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.oc-panel-shell .panel-content :is(.oc-dashboard-storage-card, .oc-dashboard-feed-card, .one-dashboard-approval-alert) .one-dashboard-card-header h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
  font-size: 1rem;
  color: var(--text-dark);
}

.oc-panel-shell .panel-content .oc-dashboard-storage-card__caption {
  margin: 0.52rem 0 0;
  font-size: 0.79rem;
  color: var(--text-gray-600);
}

.oc-panel-shell .panel-content .oc-dashboard-storage-card__metrics {
  margin-top: 0.84rem;
  display: grid;
  gap: 0.52rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.oc-panel-shell .panel-content .oc-dashboard-storage-card__metrics > div {
  border-radius: 9px;
  padding: 0.55rem 0.58rem;
  background: color-mix(in srgb, var(--accent) 80%, var(--card) 20%);
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--primary) 12%);
  display: grid;
  gap: 0.18rem;
}

.oc-panel-shell .panel-content .oc-dashboard-storage-card__metrics small {
  font-size: 0.68rem;
  color: var(--text-gray-600);
}

.oc-panel-shell .panel-content .oc-dashboard-storage-card__metrics strong {
  font-size: 0.79rem;
  color: var(--text-dark);
}

.oc-panel-shell .panel-content .oc-dashboard-feed-card__list {
  list-style: none;
  margin: 0.82rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.56rem;
}

.oc-panel-shell .panel-content .one-dashboard-list-item {
  min-height: 56px;
  border: 1px solid color-mix(in srgb, var(--border) 94%, var(--primary) 6%);
  border-radius: 12px;
  padding: 0.56rem 0.74rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, var(--card) 94%, var(--accent) 6%);
}

.oc-panel-shell .panel-content .one-dashboard-list-item__main {
  min-width: 0;
  display: grid;
  gap: 0.22rem;
}

.oc-panel-shell .panel-content .one-dashboard-list-item__main strong {
  font-size: 0.9rem;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oc-panel-shell .panel-content .one-dashboard-list-item__main small {
  font-size: 0.76rem;
  color: var(--text-gray-600);
}

@media (max-width: 1199.98px) {
  .oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpis, .management-dashboard-v2__kpis) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .oc-panel-shell .panel-content .portal-dashboard-v2__body-grid {
    grid-template-columns: 1fr;
  }

  .oc-panel-shell .panel-content .management-dashboard-v2__body-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .oc-panel-shell .panel-content :is(
    .management-dashboard-v2__tenants-card,
    .management-dashboard-v2__activity-card,
    .management-dashboard-v2__storage-card
  ) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 991.98px) {
  .oc-panel-shell .panel-content .management-dashboard-v2__body-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpis, .management-dashboard-v2__kpis) {
    grid-template-columns: 1fr;
  }
}

.oc-panel-shell .panel-loading,
.oc-panel-shell .panel-error {
  max-width: 760px;
  margin: 1.1rem auto;
}

.oc-panel-shell .oc-shell-backdrop,
.oc-panel-shell .oc-topbar-overlay,
.oc-panel-shell .panel-mobile-overlay {
  position: fixed;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.12);
  cursor: default;
}

.oc-panel-shell .panel-mobile-overlay-sidebar {
  z-index: 2190;
}

.oc-panel-shell .panel-mobile-overlay-notifications,
.oc-panel-shell .panel-mobile-overlay-profile,
.oc-panel-shell .oc-topbar-overlay {
  z-index: 2680;
}

/* Global dialog lock:
   shell interaction closes completely while dialog is open. */

.oc-dialog-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100dvw !important;
  height: 100dvh !important;
  z-index: var(--oc-dialog-z-base) !important;
  pointer-events: auto !important;
  background: rgba(15, 23, 42, 0.56) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.dark .oc-dialog-backdrop,
:root[data-theme="dark"] .oc-dialog-backdrop {
  background: rgba(2, 6, 23, 0.72) !important;
}

/* Fallback interaction lock:
   if a backdrop is rendered inside a nested host (module/card), this layer still blocks
   the whole shell surface and prevents sidebar/topbar interaction leaks. */
html.oc-dialog-open .oc-panel-shell::after,
body.oc-dialog-open .oc-panel-shell::after,
.oc-panel-shell.oc-dialog-open::after,
.oc-panel-shell:has(.oc-dialog-backdrop)::after,
html:has(.oc-dialog-backdrop) .oc-panel-shell::after,
body:has(.oc-dialog-backdrop) .oc-panel-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--oc-dialog-z-shield);
  background: transparent;
  pointer-events: auto;
}

html.oc-dialog-open,
body.oc-dialog-open {
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

html.oc-dialog-open .oc-panel-shell :is(
  .oc-shell-backdrop,
  .oc-topbar-overlay,
  .panel-mobile-overlay,
  .panel-mobile-overlay-sidebar,
  .panel-mobile-overlay-notifications,
  .panel-mobile-overlay-profile
),
body.oc-dialog-open .oc-panel-shell :is(
  .oc-shell-backdrop,
  .oc-topbar-overlay,
  .panel-mobile-overlay,
  .panel-mobile-overlay-sidebar,
  .panel-mobile-overlay-notifications,
  .panel-mobile-overlay-profile
),
.oc-panel-shell:has(.oc-dialog-backdrop) :is(
  .oc-shell-backdrop,
  .oc-topbar-overlay,
  .panel-mobile-overlay,
  .panel-mobile-overlay-sidebar,
  .panel-mobile-overlay-notifications,
  .panel-mobile-overlay-profile
),
html:has(.oc-dialog-backdrop) .oc-panel-shell :is(
  .oc-shell-backdrop,
  .oc-topbar-overlay,
  .panel-mobile-overlay,
  .panel-mobile-overlay-sidebar,
  .panel-mobile-overlay-notifications,
  .panel-mobile-overlay-profile
),
body:has(.oc-dialog-backdrop) .oc-panel-shell :is(
  .oc-shell-backdrop,
  .oc-topbar-overlay,
  .panel-mobile-overlay,
  .panel-mobile-overlay-sidebar,
  .panel-mobile-overlay-notifications,
  .panel-mobile-overlay-profile
),
.oc-panel-shell.oc-dialog-open :is(
  .oc-shell-backdrop,
  .oc-topbar-overlay,
  .panel-mobile-overlay,
  .panel-mobile-overlay-sidebar,
  .panel-mobile-overlay-notifications,
  .panel-mobile-overlay-profile
) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (min-width: 1024px) {
  .oc-panel-shell {
    --oc-shell-content-padding-x: 32px;
    --oc-shell-content-padding-y: 32px;
  }

  .oc-panel-shell .panel-topbar,
  .oc-panel-shell .oc-topbar {
    padding: 0 24px;
  }

  .oc-panel-shell .panel-sidebar.is-collapsed {
    width: var(--oc-shell-sidebar-collapsed-width);
  }

  .oc-panel-shell .panel-sidebar.is-collapsed .oc-sidebar__brandbar {
    justify-content: center;
    padding-inline: 0;
  }

  .oc-panel-shell .panel-sidebar.is-collapsed .oc-sidebar__brand-text,
  .oc-panel-shell .panel-sidebar.is-collapsed .oc-sidebar__section-title,
  .oc-panel-shell .panel-sidebar.is-collapsed .app-nav-item__label,
  .oc-panel-shell .panel-sidebar.is-collapsed .app-nav-item__badge,
  .oc-panel-shell .panel-sidebar.is-collapsed .app-nav-item__indicator,
  .oc-panel-shell .panel-sidebar.is-collapsed .oc-sidebar__status,
  .oc-panel-shell .panel-sidebar.is-collapsed .oc-sidebar__module-link > span:last-child {
    display: none;
  }

  .oc-panel-shell .panel-sidebar.is-collapsed .oc-sidebar__modules,
  .oc-panel-shell .panel-sidebar.is-collapsed .oc-sidebar__nav-wrap {
    padding-inline: var(--oc-sidebar-collapsed-inline-padding, 8px);
  }

  .oc-panel-shell .panel-sidebar.is-collapsed .oc-sidebar__module-link,
  .oc-panel-shell .panel-sidebar.is-collapsed .app-nav-item {
    justify-content: center;
    padding-inline: 0;
  }

  .oc-panel-shell .panel-sidebar.is-collapsed .app-nav-item__icon {
    width: var(--oc-sidebar-collapsed-icon-size, 26px);
    height: var(--oc-sidebar-collapsed-icon-size, 26px);
  }

  .oc-panel-shell .panel-mobile-overlay {
    display: none !important;
  }

  .oc-panel-shell .panel-topbar .oc-topbar-popover--notifications,
  .oc-panel-shell .panel-topbar .oc-topbar-popover--profile {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
  }
}

@media (max-width: 1399.98px) {
  .oc-panel-shell {
    --oc-shell-sidebar-width: 196px;
    --oc-shell-content-padding-x: 16px;
  }
}

/* UI parity hard override (ensures visible changes even if overrides are cached). */

.oc-panel-shell {
  --oc-shell-topbar-height: 64px !important;
  --oc-shell-sidebar-width: 248px !important;
  --oc-shell-sidebar-collapsed-width: 72px !important;
  --oc-shell-content-padding-x: 24px !important;
  --oc-shell-content-padding-y: 24px !important;
}

.oc-panel-shell .panel-topbar,
.oc-panel-shell .oc-topbar {
  min-height: 64px !important;
  height: 64px !important;
  padding: 0 16px !important;
  border-bottom: 1px solid #eff2f5 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04) !important;
}

.oc-panel-shell .panel-topbar .icon-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #5e6278 !important;
}

.oc-panel-shell .panel-topbar .icon-btn:hover {
  background: #f3f6f9 !important;
  color: #3f4254 !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__search input {
  height: 36px !important;
  border-radius: 8px !important;
  border-color: #e4e6ef !important;
  background: #f3f6f9 !important;
  padding-left: 40px !important;
  font-size: 0.875rem !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__user {
  min-height: 44px !important;
  max-width: 320px !important;
  margin-left: 8px !important;
  padding: 8px 8px 8px 12px !important;
  border: 0 !important;
  border-left: 1px solid #eff2f5 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__user > .one-svg,
.oc-panel-shell .panel-topbar .oc-topbar__user > span > .one-svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  color: #7e8299 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover {
  width: min(320px, calc(100vw - 20px)) !important;
  border: 1px solid #eff2f5 !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 30px rgb(15 23 42 / 0.14), 0 3px 10px rgb(15 23 42 / 0.08) !important;
}

.oc-panel-shell .panel-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #eff2f5 !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__brandbar {
  display: none !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__section-title {
  display: none !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__nav-wrap {
  padding: 24px 16px !important;
  gap: 6px !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item__indicator {
  display: none !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item {
  min-height: 48px !important;
  padding: 12px 16px !important;
  gap: 12px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item__icon {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  border-radius: 8px !important;
  background: transparent !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item__icon .one-svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item:hover {
  background: #f3f6f9 !important;
  border-color: transparent !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item--active {
  background: #e1f0ff !important;
  border-color: #d8e9fb !important;
  color: #3699ff !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item--active .app-nav-item__icon {
  background: #e1f0ff !important;
  color: #3699ff !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item__label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #5e6278 !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item--active .app-nav-item__label {
  color: #3699ff !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item__badge {
  min-width: 20px !important;
  height: 20px !important;
  font-size: 0.75rem !important;
}

@media (min-width: 1024px) {
  .oc-panel-shell :is(
    .oc-topbar-overlay,
    .panel-mobile-overlay,
    .panel-mobile-overlay-sidebar,
    .panel-mobile-overlay-notifications,
    .panel-mobile-overlay-profile
  ) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
  }
}

@media (max-width: 1199.98px) {
  .oc-panel-shell .panel-topbar .oc-topbar__brand-text small {
    display: none;
  }

  .oc-panel-shell .panel-topbar .oc-topbar__search {
    width: min(340px, 100%);
  }
}

@media (max-width: 1023.98px) {
  .oc-panel-shell {
    --oc-shell-content-padding-y: 12px;
    --oc-shell-content-padding-x: 12px;
  }

  .oc-panel-shell .oc-main,
  .oc-panel-shell .oc-main.with-sidebar,
  .oc-panel-shell .oc-main.with-collapsed-sidebar {
    margin-left: 0;
    min-height: 100dvh;
  }

  .oc-panel-shell .panel-sidebar {
    width: min(320px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    transform: translateX(-108%);
    box-shadow: 0 18px 46px rgb(15 23 42 / 0.34);
  }

  .oc-panel-shell .panel-sidebar.is-open {
    transform: translateX(0);
  }

  .oc-panel-shell .panel-sidebar .oc-sidebar__brandbar {
    padding-inline: 12px;
  }

  .oc-panel-shell .panel-topbar,
  .oc-panel-shell .oc-topbar {
    padding: 0 10px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
  }

  .oc-panel-shell .panel-topbar .oc-topbar__brand-text {
    display: grid;
  }

  .oc-panel-shell .panel-topbar .oc-topbar__search {
    width: 100%;
  }

  .oc-panel-shell .panel-topbar .oc-topbar__user-meta {
    display: none;
  }

  .oc-panel-shell .panel-topbar .oc-topbar__user {
    max-width: none;
    padding-right: 6px;
  }

  .oc-panel-shell .panel-topbar .oc-topbar-popover--notifications,
  .oc-panel-shell .panel-topbar .oc-topbar-popover--profile {
    position: fixed;
    top: calc(var(--oc-shell-topbar-height) + 8px);
    right: 8px;
    width: min(360px, calc(100vw - 16px));
    max-height: calc(100vh - var(--oc-shell-topbar-height) - 16px);
    overflow: auto;
    z-index: 2710;
  }

  .oc-panel-shell .panel-topbar .oc-topbar-popover--notifications {
    width: min(390px, calc(100vw - 16px));
  }

  .oc-panel-shell .panel-topbar .panel-profile-popover {
    width: min(360px, calc(100vw - 16px));
  }

  .oc-panel-shell .panel-content {
    min-height: calc(100dvh - var(--oc-shell-topbar-height));
  }
}

/* Portal dialogs: keyboard shortcut hint/menu is intentionally disabled for cleaner UI parity. */
.oc-panel-shell .panel-content :is(.oc-page-shortcut-hint, .oc-dialog-shortcut-hint, .one-dialog-shortcut-menu, [class*="shortcut-hint"]) {
  display: none !important;
}