/* UI bridge overrides.
   Loaded last to keep Blazor shell/components visually aligned with UI/ Figma source. */

:root {
  --oc-control-height: 36px;
  --oc-control-radius: 6px;
  --oc-control-font-size: 0.875rem;
  --oc-control-line-height: 1.5;
  --oc-control-padding-inline: 0.75rem;
}

.oc-input,
.oc-select,
.oc-textarea {
  width: 100%;
  min-height: var(--oc-control-height);
  border-radius: var(--oc-control-radius);
  border-color: var(--input-border);
  background: var(--input-background);
  font-size: var(--oc-control-font-size);
  line-height: var(--oc-control-line-height);
  padding-inline: var(--oc-control-padding-inline);
  box-shadow: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.oc-input:hover:not(:disabled),
.oc-select:hover:not(:disabled),
.oc-textarea:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 26%, var(--input-border));
}

.oc-input:focus-visible,
.oc-select:focus-visible,
.oc-textarea:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 52%, var(--input-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.oc-select,
select.oc-select,
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--input-background);
  background-image:
    linear-gradient(45deg, transparent 50%, #64728b 50%),
    linear-gradient(135deg, #64728b 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 6px 6px;
  background-position:
    calc(100% - 1.02rem) calc(50% - 1px),
    calc(100% - 0.72rem) calc(50% - 1px);
  padding-right: 2.15rem;
  cursor: pointer;
}

.oc-select option[value=""],
select.oc-select option[value=""],
select:not([multiple]):not([size]) option[value=""] {
  color: var(--text-gray-500);
}

.oc-dialog-form :is(input, select, textarea).oc-dialog-form__control--invalid,
.oc-dialog-form :is(input, select, textarea)[aria-invalid="true"],
.oc-dialog-form :is(.oc-input, .oc-select, .oc-textarea).oc-dialog-form__control--invalid,
.oc-dialog-form :is(.oc-input, .oc-select, .oc-textarea)[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--destructive) 58%, var(--input-border) 42%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--destructive) 16%, transparent);
}

.oc-input:disabled,
.oc-select:disabled,
.oc-textarea:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.72;
  cursor: not-allowed;
  border-color: color-mix(in srgb, var(--input-border) 88%, var(--border) 12%);
  background: color-mix(in srgb, var(--input-background) 88%, var(--accent) 12%);
}

.btn-ok,
.btn-lite,
.btn-bad {
  border-radius: 6px;
  min-height: 36px;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: none;
}

.btn-ok {
  background: var(--primary);
  border-color: var(--primary);
}

.btn-ok:hover {
  background: color-mix(in srgb, var(--primary) 90%, #000 10%);
  border-color: color-mix(in srgb, var(--primary) 90%, #000 10%);
}

.btn-lite {
  border-color: var(--border);
  background: var(--card);
}

.btn-lite:hover {
  border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
  background: var(--accent);
}

.btn-bad {
  background: var(--destructive-light);
  border-color: color-mix(in srgb, var(--destructive) 35%, var(--border));
}

.btn-bad:hover {
  background: color-mix(in srgb, var(--destructive-light) 85%, #fff 15%);
  border-color: color-mix(in srgb, var(--destructive) 45%, var(--border));
}

.btn-ok:disabled,
.btn-lite:disabled,
.btn-bad:disabled,
.btn-ok[aria-disabled="true"],
.btn-lite[aria-disabled="true"],
.btn-bad[aria-disabled="true"] {
  opacity: 0.58;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.btn-ok.is-loading,
.btn-lite.is-loading,
.btn-bad.is-loading {
  pointer-events: none;
}

.oc-panel-shell .oc-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: none;
}

.oc-panel-shell .panel-content .management-tab-strip {
  display: inline-flex;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  min-height: 40px;
  margin-bottom: 1rem;
  padding: 0;
  gap: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.oc-panel-shell .panel-content .management-tab-strip::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.oc-panel-shell .panel-content .management-tab-strip button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-gray-600);
  min-height: 40px;
  padding: 0 1.05rem;
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: 0;
  scroll-snap-align: start;
  transition: color 140ms ease, background-color 140ms ease;
}

.oc-panel-shell .panel-content .management-tab-strip button:hover {
  color: var(--text-dark);
  background: color-mix(in srgb, var(--accent) 54%, transparent);
  border-color: transparent;
}

.oc-panel-shell .panel-content .management-tab-strip button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 24%, transparent);
}

.oc-panel-shell .panel-content .management-tab-strip button.active,
.oc-panel-shell .panel-content .management-tab-strip button[aria-selected="true"] {
  color: var(--primary);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.oc-panel-shell .panel-content .management-tab-strip button.active::after,
.oc-panel-shell .panel-content .management-tab-strip button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: var(--primary);
}

/* Dialog + grid parity patch (portal design lock). */

.oc-dialog-backdrop--full {
  padding: 0 !important;
  place-items: stretch !important;
  overflow: hidden !important;
}

.oc-dialog.oc-dialog--full {
  width: 100dvw !important;
  max-width: 100dvw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.oc-dialog.oc-dialog--full .oc-dialog__header,
.oc-dialog.oc-dialog--full .oc-dialog__footer {
  flex: 0 0 auto;
}

.oc-dialog.oc-dialog--full .oc-dialog__body {
  flex: 1 1 auto;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 1rem 1.25rem;
}

.oc-dialog.oc-dialog--full .oc-dialog__body > * {
  width: min(1360px, 100%);
  margin-inline: auto;
}

.oc-dialog.oc-dialog--full .oc-dialog__footer > :is(.oc-dialog__footer-actions, .oc-dialog__footer-actions--split) {
  width: min(1360px, 100%);
  margin-inline: auto;
}

.oc-dialog__footer {
  padding: 1rem 1.25rem !important;
}

.oc-dialog__footer-actions,
.oc-dialog__footer-actions--split {
  width: 100%;
  min-width: 0;
  align-items: center !important;
  gap: 0.65rem !important;
}

.oc-dialog__footer-actions--split {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  column-gap: 0.8rem !important;
  row-gap: 0.55rem !important;
}

.oc-dialog__footer-left,
.oc-dialog__footer-right {
  min-width: 0;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}

.oc-dialog__footer-right {
  margin-left: auto !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
}

.oc-dialog__footer-right .oc-dialog-form__actions {
  margin: 0 !important;
  min-width: max-content !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.6rem !important;
  flex-wrap: nowrap !important;
}

.oc-dialog__footer-right .oc-dialog-form__actions > * {
  flex: 0 0 auto !important;
}

.oc-dialog__footer :is(.btn-ok, .btn-lite, .btn-bad) {
  min-height: 40px;
  padding-inline: 1rem;
}

.oc-dialog__header-actions {
  position: relative;
}

.oc-dialog__header-actions > :is(.one-dialog-shortcut-menu, details.one-row-menu--workspace-header) {
  position: relative;
  flex: 0 0 auto;
}

.oc-dialog__header-actions .one-dialog-shortcut-menu__trigger,
.oc-dialog__header-actions .one-menu-trigger--compact-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}

.oc-dialog__header-actions :is(
  .one-dialog-shortcut-menu__panel,
  details.one-row-menu--workspace-header .oc-row-menu__panel
) {
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 2760;
}

.oc-dialog__header-actions .one-dialog-shortcut-menu__panel {
  min-width: 300px;
  max-width: min(360px, calc(100vw - 2rem));
  max-height: min(360px, calc(100dvh - 10rem));
  overflow: auto;
}

.oc-panel-shell .panel-content :is(.one-grid__th--actions, .one-grid__td--actions) {
  width: var(--oc-actions-col-width, 168px) !important;
  min-width: var(--oc-actions-col-width, 168px) !important;
  max-width: var(--oc-actions-col-width, 168px) !important;
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}

.oc-panel-shell .panel-content .one-grid__td--actions .one-grid__row-actions {
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

.oc-panel-shell .panel-content .one-grid__td--actions .one-grid__row-actions > * {
  flex: 0 0 auto;
}

.oc-panel-shell :is(
  .icon-btn,
  .oc-grid-action-btn,
  .one-grid__action-icon,
  .one-grid__icon-btn,
  .one-menu-trigger--compact-icon,
  .one-dialog-shortcut-menu__trigger,
  .oc-dialog__header-btn,
  .oc-row-menu__item
) :is(
  svg,
  .one-svg,
  iconify-icon,
  i,
  .lucide,
  .fa,
  .fas,
  .far,
  .fab,
  .bi,
  [class^="fa-"],
  [class*=" fa-"],
  [class^="ri-"],
  [class*=" ri-"],
  [class^="bi-"],
  [class*=" bi-"],
  [class^="icon-"],
  [class*=" icon-"]
) {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  transform: none !important;
}

.oc-panel-shell :is(
  .icon-btn,
  .oc-grid-action-btn,
  .one-grid__action-icon,
  .one-grid__icon-btn,
  .one-menu-trigger--compact-icon,
  .one-dialog-shortcut-menu__trigger,
  .oc-dialog__header-btn,
  .oc-row-menu__item
) :is(
  i,
  [class^="fa-"],
  [class*=" fa-"],
  [class^="ri-"],
  [class*=" ri-"],
  [class^="bi-"],
  [class*=" bi-"],
  [class^="icon-"],
  [class*=" icon-"]
)::before {
  font-size: 14px !important;
  line-height: 1 !important;
  width: 1em !important;
  height: 1em !important;
  transform: none !important;
}

.oc-dialog-form--2col,
.oc-dialog-form--3col,
.oc-dialog-form--4col {
  align-items: start;
  align-content: start;
}

@media (max-width: 1360px) {
  .oc-dialog-form--4col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .oc-dialog-form--4col :is(.col-span-3, .col-span-4) {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 1180px) {
  .oc-dialog-form--3col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .oc-dialog-form--3col .col-span-3,
  .oc-dialog-form--4col .col-span-2 {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 920px) {
  .oc-dialog-form--2col,
  .oc-dialog-form--3col,
  .oc-dialog-form--4col {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oc-dialog-form :is(.col-span-2, .col-span-3, .col-span-4) {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 860px) {
  .oc-dialog__footer-actions,
  .oc-dialog__footer-actions--split {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }

  .oc-dialog__footer-left,
  .oc-dialog__footer-right {
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
  }

  .oc-dialog__footer-right .oc-dialog-form__actions {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
  }
}

/* UI parity refresh (source: /UI management + portal shell). */

.oc-panel-shell {
  --oc-shell-topbar-height: 64px;
  --oc-shell-sidebar-width: 232px;
  --oc-shell-content-padding-x: 24px;
  --oc-shell-content-padding-y: 22px;
  --oc-dashboard-card-radius: 12px;
  --oc-dashboard-card-border-color: #e6edf3;
  --oc-dashboard-card-shadow: none;
  --oc-dashboard-kpi-min-height: 146px;
  --oc-dashboard-card-padding: 1rem 1.05rem;
  --oc-dashboard-body-gap: 0.94rem;
}

.oc-panel-shell .panel-topbar {
  padding: 0 16px !important;
  gap: 12px;
  background: #fff !important;
  border-bottom-color: #e6edf3 !important;
}

.oc-panel-shell .panel-topbar .icon-btn {
  width: 32px;
  height: 32px;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-topbar .icon-btn:hover {
  background: var(--accent) !important;
  border-color: transparent !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__right {
  gap: 6px;
}

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

.oc-panel-shell .panel-topbar .oc-topbar__search input {
  height: 38px !important;
  border-radius: 10px !important;
  border-color: #e1e8f0 !important;
  background: #f5f7fb !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__user {
  min-height: 36px;
  max-width: 260px;
  margin-left: 4px;
  padding: 2px 0 2px 12px;
  border: 0 !important;
  border-left: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__user:hover,
.oc-panel-shell .panel-topbar .oc-topbar__user.is-open {
  background: color-mix(in srgb, var(--accent) 68%, transparent) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
  border: 0;
  background: var(--primary-light);
  color: var(--primary);
}

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

.oc-panel-shell .panel-topbar .oc-topbar__user-meta strong {
  font-size: 0.82rem;
  font-weight: 600;
}

.oc-panel-shell .panel-topbar .oc-topbar__user-meta small {
  font-size: 0.7rem;
  color: var(--text-gray-600);
}

.oc-panel-shell .panel-topbar .panel-profile-popover {
  width: min(320px, calc(100vw - 20px)) !important;
  border-radius: 12px !important;
  border-color: #e6edf3 !important;
  box-shadow: 0 16px 30px rgb(15 23 42 / 0.14), 0 4px 12px rgb(15 23 42 / 0.06) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-header {
  padding: 12px 14px 10px !important;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__item {
  min-height: 52px;
  padding: 10px 14px;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__label {
  color: var(--text-gray-800) !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__text small {
  color: var(--text-gray-600) !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item {
  min-height: 42px;
  padding: 6px 8px;
  border-radius: 10px;
  border-color: transparent !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
}

.oc-panel-shell .panel-sidebar .app-nav-item__icon .one-svg {
  width: 15px;
  height: 15px;
}

.oc-panel-shell .panel-sidebar .app-nav-item__label {
  font-size: 0.82rem;
  font-weight: 600;
}

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

.oc-panel-shell .panel-sidebar .oc-sidebar__nav-wrap {
  padding-top: 10px;
}

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

.oc-panel-shell .panel-sidebar .app-nav-item--active {
  background: #e8f2ff !important;
  border-color: #cfe0f6 !important;
  color: #2f7ef0 !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status {
  border-color: #d7e5f7 !important;
  background: linear-gradient(168deg, #f7fbff 0%, #edf4ff 100%) !important;
}

.oc-panel-shell .panel-content .oc-page-header {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-content .oc-page-header :is(h1, .oc-page-header-title) {
  font-size: clamp(1.86rem, 2.05vw, 2.18rem) !important;
  letter-spacing: -0.015em;
}

.oc-panel-shell .panel-content :is(
  .management-surface-card,
  .portal-surface-card,
  .portal-section-card,
  .account-section-card,
  .photographer-section-card
) {
  border: 1px solid #e6edf3 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 1rem !important;
  gap: 0.72rem;
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__header h2,
  .management-dashboard-v2__header h2
) {
  font-size: clamp(2rem, 2.2vw, 2.3rem) !important;
  line-height: 1.06 !important;
  color: #172142 !important;
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__header p,
  .management-dashboard-v2__header p
) {
  margin-top: 0.32rem !important;
  color: #6f82a0 !important;
  font-size: 0.84rem !important;
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__kpi-card,
  .management-dashboard-v2__kpi-card,
  .oc-dashboard-kpi-card
) {
  border: 1px solid #e6edf3 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  min-height: 160px !important;
  padding: 24px !important;
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__storage,
  .portal-dashboard-v2__recent-events,
  .portal-dashboard-v2__approval-alert,
  .management-dashboard-v2__storage-card,
  .management-dashboard-v2__activity-card,
  .management-dashboard-v2__approval-alert
) {
  border-color: #e6edf3 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__kpi-card strong,
  .management-dashboard-v2__kpi-card strong
) {
  color: #172142 !important;
  font-size: 1.875rem !important;
  line-height: 1.1 !important;
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__kpi-card p,
  .management-dashboard-v2__kpi-card p
) {
  color: #7e8299 !important;
  font-size: 0.875rem !important;
}

.oc-panel-shell .panel-content .management-dashboard-v2__kpi-card {
  padding: 20px !important;
  min-height: 140px !important;
}

.oc-panel-shell .panel-content .management-dashboard-v2__kpi-card strong {
  font-size: 1.5rem !important;
}

.oc-panel-shell .panel-content :is(.portal-dashboard-v2__storage, .portal-dashboard-v2__recent-events) {
  padding: 24px !important;
  min-height: 280px !important;
}

.oc-panel-shell .panel-content :is(.management-dashboard-v2__storage-card, .management-dashboard-v2__activity-card) {
  padding: 20px !important;
}

.oc-panel-shell .panel-content :is(.portal-dashboard-v2__recent-list, .management-dashboard-v2__activity-list) {
  gap: 12px !important;
}

.oc-panel-shell .panel-content :is(.portal-dashboard-v2__recent-item, .management-dashboard-v2__activity-item) {
  padding: 16px !important;
  min-height: 64px !important;
  border-radius: 12px !important;
  border-color: #eff2f5 !important;
}

.oc-data-grid .one-grid__card {
  border-color: #e6edf3 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.oc-data-grid .one-grid__toolbar-row {
  padding: 0.82rem 0.94rem !important;
  background: #fff !important;
}

.oc-data-grid .one-grid__search-input {
  height: 36px !important;
  border-radius: 6px !important;
  background: var(--accent) !important;
}

.oc-data-grid .one-grid__th {
  padding: 0.75rem 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-gray-600);
  background: color-mix(in srgb, var(--accent) 52%, transparent);
}

.oc-data-grid .one-grid__td {
  padding: 0.875rem 0.5rem !important;
  font-size: 0.875rem;
  color: var(--text-gray-800);
}

.oc-data-grid .one-grid__tbody .one-grid__row {
  min-height: 56px;
}

.oc-panel-shell :is(
  .btn-ok,
  .btn-lite,
  .btn-bad,
  .oc-link-btn
) {
  border-radius: 6px !important;
  min-height: 36px !important;
}

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

@media (prefers-reduced-motion: reduce) {
  .oc-input,
  .oc-select,
  .oc-textarea,
  .btn-ok,
  .btn-lite,
  .btn-bad,
  .oc-panel-shell .panel-content .management-tab-strip button {
    transition: none !important;
  }
}

/* Final parity lock (UI/source-of-truth). */

.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-topbar-search-width: min(448px, 100%);
  --oc-topbar-search-height: 36px;
  --oc-topbar-search-radius: 8px;
  --oc-dashboard-card-radius: 12px;
  --oc-dashboard-kpi-min-height: 160px;
}

.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 .oc-topbar__left {
  gap: 12px !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand-mark {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  border-radius: 10px !important;
}

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

.oc-panel-shell .panel-topbar .oc-topbar__brand-text strong {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #181c32 !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand-text small {
  font-size: 0.72rem !important;
  color: #7e8299 !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__search input,
.oc-panel-shell .panel-topbar .panel-topbar-search-input {
  height: 36px !important;
  border-radius: 8px !important;
  border-color: #e4e6ef !important;
  background: #f3f6f9 !important;
}

.oc-panel-shell .panel-topbar .icon-btn {
  width: 34px !important;
  height: 34px !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__right {
  gap: 4px !important;
}

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

.oc-panel-shell .panel-topbar .oc-topbar__user:hover,
.oc-panel-shell .panel-topbar .oc-topbar__user.is-open {
  background: #f3f6f9 !important;
  border-left-color: #eff2f5 !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__avatar {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: #e1f0ff !important;
  color: #3699ff !important;
}

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

.oc-panel-shell .panel-topbar .oc-topbar__user-meta strong {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #181c32 !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__user-meta small {
  font-size: 0.7rem !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-topbar .panel-profile-menu__item {
  min-height: 52px !important;
  padding: 10px 14px !important;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__label {
  color: #181c32 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__text small {
  color: #7e8299 !important;
  font-size: 0.75rem !important;
}

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

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

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

.oc-panel-shell .panel-sidebar .app-nav-item {
  min-height: 46px !important;
  padding: 8px 12px !important;
  gap: 10px !important;
  border-radius: 10px !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;
}

.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__label {
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  color: #5e6278 !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: #dcecff !important;
  color: #3699ff !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.67rem !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status {
  margin: auto 10px 10px !important;
  border: 1px solid #dce8f8 !important;
  border-radius: 12px !important;
  background: #f7fbff !important;
}

.oc-panel-shell .panel-content {
  background: #f5f8fa !important;
}

.oc-panel-shell .panel-content :is(
  .management-surface-card,
  .portal-surface-card,
  .portal-section-card,
  .account-section-card,
  .photographer-section-card,
  .one-grid__card
) {
  border-color: #eff2f5 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04) !important;
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__kpi-card,
  .management-dashboard-v2__kpi-card,
  .oc-dashboard-kpi-card
) {
  min-height: 156px !important;
  padding: 16px !important;
  border-color: #eff2f5 !important;
  border-radius: 12px !important;
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__storage,
  .portal-dashboard-v2__recent-events,
  .management-dashboard-v2__storage-card,
  .management-dashboard-v2__activity-card,
  .portal-dashboard-v2__approval-alert,
  .management-dashboard-v2__approval-alert,
  .one-dashboard-approval-alert
) {
  border-color: #eff2f5 !important;
  border-radius: 12px !important;
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__kpi-card strong,
  .management-dashboard-v2__kpi-card strong
) {
  color: #181c32 !important;
}

.oc-data-grid .one-grid__toolbar-row {
  padding: 0.75rem 0.9rem !important;
  border-bottom: 1px solid #eff2f5 !important;
}

.oc-data-grid .one-grid__search-input {
  height: 36px !important;
  border-radius: 8px !important;
  border-color: #e4e6ef !important;
  background: #f3f6f9 !important;
}

.oc-data-grid .one-grid__th {
  padding: 0.72rem 0.92rem !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #eff2f5 !important;
  font-size: 0.71rem !important;
  color: #7e8299 !important;
}

.oc-data-grid .one-grid__td {
  padding: 0.76rem 0.92rem !important;
  border-bottom: 1px solid #eff2f5 !important;
  font-size: 0.84rem !important;
  color: #3f4254 !important;
}

.oc-data-grid .one-grid__tbody .one-grid__row {
  min-height: 54px !important;
}

.oc-panel-shell .panel-content :is(.one-grid__th--actions, .one-grid__td--actions) {
  width: 172px !important;
  min-width: 172px !important;
  max-width: 172px !important;
}

.oc-input,
.oc-select,
.oc-textarea {
  min-height: 40px !important;
  border-radius: 8px !important;
  border-color: #e4e6ef !important;
  background: #ffffff !important;
}

.btn-ok,
.btn-lite,
.btn-bad,
.oc-link-btn {
  min-height: 38px !important;
  border-radius: 8px !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
}

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

.oc-dialog-backdrop--full {
  padding: 0 !important;
  place-items: stretch !important;
}

.oc-dialog.oc-dialog--full {
  width: 100dvw !important;
  max-width: 100dvw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.oc-dialog.oc-dialog--full .oc-dialog__body {
  min-height: 0 !important;
  overflow: auto !important;
}

.oc-dialog__footer-actions,
.oc-dialog__footer-actions--split,
.oc-dialog__footer-right,
.oc-dialog__footer-right .oc-dialog-form__actions {
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
}

.oc-dialog__header-actions .one-dialog-shortcut-menu__trigger,
.oc-dialog__header-actions .one-menu-trigger--compact-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
}

.oc-dialog__header-actions :is(
  .one-dialog-shortcut-menu__panel,
  details.one-row-menu--workspace-header .oc-row-menu__panel
) {
  top: calc(100% + 0.45rem) !important;
  right: 0 !important;
}

.oc-panel-shell :is(
  .icon-btn,
  .oc-topbar__avatar,
  .app-nav-item__icon,
  .oc-sidebar__module-icon,
  .panel-profile-menu__icon,
  .panel-profile-header__avatar,
  .portal-dashboard-v2__kpi-icon,
  .management-dashboard-v2__kpi-icon,
  .oc-dashboard-kpi-card__icon,
  .one-grid__action-icon,
  .one-grid__icon-btn,
  .one-menu-trigger--compact-icon,
  .one-dialog-shortcut-menu__trigger,
  .oc-dialog__header-btn,
  .oc-row-menu__item
) :is(svg, .one-svg, iconify-icon, i) {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

.oc-panel-shell .panel-profile-header__avatar :is(svg, .one-svg) {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
}

.oc-dialog-form--2col,
.oc-dialog-form--3col,
.oc-dialog-form--4col {
  gap: 0.78rem 0.9rem !important;
  align-items: start !important;
  align-content: start !important;
}

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

  .oc-dialog-form--4col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1023.98px) {
  .oc-panel-shell {
    --oc-shell-sidebar-width: 248px;
    --oc-shell-topbar-height: 56px;
  }

  .oc-panel-shell .panel-topbar,
  .oc-panel-shell .oc-topbar {
    min-height: 56px !important;
    height: 56px !important;
  }

  .oc-dialog-form--3col,
  .oc-dialog-form--4col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  .oc-dialog-form--2col,
  .oc-dialog-form--3col,
  .oc-dialog-form--4col {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oc-dialog__footer-actions,
  .oc-dialog__footer-actions--split,
  .oc-dialog__footer-right,
  .oc-dialog__footer-right .oc-dialog-form__actions {
    flex-wrap: wrap !important;
  }
}

/* Hard lock after user feedback: sidebar/topbar/profile parity + no desktop dim. */

.oc-panel-shell {
  --oc-shell-sidebar-width: 224px !important;
  --oc-shell-content-padding-x: 20px !important;
  --oc-shell-content-padding-y: 20px !important;
}

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

.oc-panel-shell .panel-sidebar .app-nav-item {
  min-height: 44px !important;
  padding: 8px 12px !important;
  gap: 10px !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item__icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  border-radius: 0 !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: transparent !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item__label {
  font-size: 0.84rem !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-topbar .oc-topbar__user > .one-svg,
.oc-panel-shell .panel-topbar .oc-topbar__user > span > .one-svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  color: #7e8299 !important;
  opacity: 1 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__item--logout .panel-profile-menu__label {
  color: #181c32 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__item--logout .panel-profile-menu__text small {
  color: #7e8299 !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;
  }
}

/* Final UI parity override (portal/management shells). */

.oc-panel-shell {
  --oc-shell-topbar-height: 64px !important;
  --oc-shell-sidebar-width: 256px !important;
  --oc-shell-sidebar-collapsed-width: 64px !important;
  --oc-shell-content-padding-x: 24px !important;
  --oc-shell-content-padding-y: 24px !important;
  --oc-topbar-search-width: min(448px, 100%) !important;
  --oc-topbar-search-height: 36px !important;
  --oc-topbar-search-radius: 8px !important;
  --oc-topbar-icon-button-size: 32px !important;
  --oc-topbar-icon-radius: 8px !important;
  --oc-topbar-avatar-size: 32px !important;
  --oc-topbar-avatar-font-size: 0.75rem !important;
}

.oc-panel-shell .panel-topbar,
.oc-panel-shell .oc-topbar {
  min-height: 64px !important;
  height: 64px !important;
  padding: 0 16px !important;
  gap: 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 .oc-topbar__left {
  gap: 16px !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand-mark {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 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;
  min-width: 20px !important;
  min-height: 20px !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand-text strong {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #181c32 !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand-text small {
  font-size: 0.75rem !important;
  color: #7e8299 !important;
}

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

.oc-panel-shell .panel-topbar .oc-topbar__search .one-svg {
  width: 16px !important;
  height: 16px !important;
  left: 12px !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__search input,
.oc-panel-shell .panel-topbar .panel-topbar-search-input {
  height: 36px !important;
  border-radius: 8px !important;
  border-color: #e4e6ef !important;
  background: #f3f6f9 !important;
  color: #3f4254 !important;
  padding-left: 40px !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__search input::placeholder,
.oc-panel-shell .panel-topbar .panel-topbar-search-input::placeholder {
  color: #a1a5b7 !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__right {
  gap: 8px !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;
  box-shadow: none !important;
}

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

.oc-panel-shell .panel-topbar .oc-dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  top: 4px !important;
  right: 4px !important;
}

.oc-panel-shell .panel-topbar .oc-dot--count {
  min-width: 16px !important;
  height: 16px !important;
  font-size: 0.6rem !important;
}

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

.oc-panel-shell .panel-topbar .oc-topbar__user:hover,
.oc-panel-shell .panel-topbar .oc-topbar__user.is-open {
  background: #f3f6f9 !important;
  border-left-color: #eff2f5 !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__avatar {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: #e1f0ff !important;
  color: #3699ff !important;
}

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

.oc-panel-shell .panel-topbar .oc-topbar__user-meta strong {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #181c32 !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__user-meta small {
  font-size: 0.75rem !important;
  color: #7e8299 !important;
}

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

.oc-panel-shell .panel-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #eff2f5 !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 {
  min-height: 48px !important;
  padding: 12px 16px !important;
  gap: 12px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  color: #5e6278 !important;
}

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

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

.oc-panel-shell .panel-sidebar .app-nav-item--active {
  background: var(--sidebar-active-bg) !important;
  border-color: #d8e9fb !important;
  color: var(--sidebar-primary) !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04) !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:hover .app-nav-item__icon {
  background: color-mix(in srgb, var(--sidebar-active-bg) 70%, transparent) !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item--active .app-nav-item__icon {
  background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
  color: var(--sidebar-primary) !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__label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: inherit !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item__badge {
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background: var(--warning) !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status {
  margin: auto 16px 16px !important;
  padding: 16px !important;
  border: 1px solid #eff2f5 !important;
  border-radius: 12px !important;
  background: var(--sidebar-active-bg) !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status-link {
  min-height: 32px !important;
  border-radius: 8px !important;
  font-size: 0.75rem !important;
}

.oc-panel-shell .panel-content {
  background: #f5f8fa !important;
}

.oc-data-grid .one-grid__toolbar-row {
  padding: 16px 24px !important;
  border-bottom: 1px solid #eff2f5 !important;
  background: #ffffff !important;
}

.oc-data-grid .one-grid__search-input {
  height: 40px !important;
  border-radius: 8px !important;
  border-color: #e4e6ef !important;
  background: #f3f6f9 !important;
}

.oc-data-grid .one-grid__th {
  padding: 16px 24px !important;
  background: color-mix(in srgb, var(--accent) 50%, transparent) !important;
  border-bottom: 1px solid #eff2f5 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #5e6278 !important;
}

.oc-data-grid .one-grid__td {
  padding: 16px 24px !important;
  border-bottom: 1px solid #eff2f5 !important;
  font-size: 0.875rem !important;
  color: #3f4254 !important;
}

.oc-data-grid .one-grid__tbody .one-grid__row {
  min-height: 56px !important;
}

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

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

.oc-panel-shell .panel-topbar .oc-topbar__item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.oc-panel-shell .panel-topbar .panel-language-trigger {
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--text-gray-700) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

.oc-panel-shell .panel-topbar .panel-language-trigger:hover {
  background: var(--accent) !important;
  color: var(--text-dark) !important;
}

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

.oc-panel-shell .panel-sidebar.is-collapsed .app-nav-item__icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: var(--accent) !important;
  color: var(--text-gray-700) !important;
}

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

/* Dark mode parity for shell surfaces. */

.dark .oc-panel-shell .panel-topbar,
.dark .oc-panel-shell .oc-topbar,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar,
:root[data-theme="dark"] .oc-panel-shell .oc-topbar {
  background: var(--card) !important;
  border-bottom-color: var(--border) !important;
  box-shadow: 0 1px 2px rgb(2 6 23 / 0.45) !important;
}

.dark .oc-panel-shell .panel-topbar .oc-topbar__search input,
.dark .oc-panel-shell .panel-topbar .panel-topbar-search-input,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .oc-topbar__search input,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-topbar-search-input {
  background: var(--accent) !important;
  border-color: var(--input-border) !important;
  color: var(--text-gray-800) !important;
}

.dark .oc-panel-shell .panel-topbar .icon-btn,
.dark .oc-panel-shell .panel-topbar .panel-language-trigger,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .icon-btn,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-language-trigger {
  color: var(--text-gray-700) !important;
}

.dark .oc-panel-shell .panel-sidebar,
:root[data-theme="dark"] .oc-panel-shell .panel-sidebar {
  background: var(--sidebar) !important;
  border-right-color: var(--border) !important;
}

.dark .oc-panel-shell .panel-sidebar .app-nav-item,
:root[data-theme="dark"] .oc-panel-shell .panel-sidebar .app-nav-item {
  color: var(--sidebar-foreground) !important;
}

.dark .oc-panel-shell .panel-sidebar .app-nav-item--active,
:root[data-theme="dark"] .oc-panel-shell .panel-sidebar .app-nav-item--active {
  background: var(--sidebar-active-bg) !important;
  color: var(--sidebar-primary) !important;
}

.dark .oc-panel-shell .panel-topbar .oc-topbar__brand-text strong,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .oc-topbar__brand-text strong {
  color: var(--text-dark) !important;
}

.dark .oc-panel-shell .panel-topbar .oc-topbar__brand-text small,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .oc-topbar__brand-text small {
  color: var(--text-gray-500) !important;
}

.dark .oc-panel-shell .panel-topbar .oc-topbar__user-meta strong,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .oc-topbar__user-meta strong {
  color: var(--text-dark) !important;
}

.dark .oc-panel-shell .panel-topbar .oc-topbar__user-meta small,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .oc-topbar__user-meta small {
  color: var(--text-gray-600) !important;
}

.dark .oc-panel-shell .panel-topbar .oc-topbar__user > .one-svg,
.dark .oc-panel-shell .panel-topbar .oc-topbar__user > span > .one-svg,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .oc-topbar__user > .one-svg,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .oc-topbar__user > span > .one-svg {
  color: var(--text-gray-500) !important;
}

.dark .oc-panel-shell .panel-sidebar .app-nav-item__label,
:root[data-theme="dark"] .oc-panel-shell .panel-sidebar .app-nav-item__label {
  color: var(--sidebar-foreground) !important;
}

.dark .oc-panel-shell .panel-sidebar .app-nav-item--active .app-nav-item__label,
:root[data-theme="dark"] .oc-panel-shell .panel-sidebar .app-nav-item--active .app-nav-item__label {
  color: var(--sidebar-primary) !important;
}

.dark .oc-panel-shell .panel-topbar .panel-profile-popover,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-profile-popover {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

.dark .oc-panel-shell .panel-content,
:root[data-theme="dark"] .oc-panel-shell .panel-content {
  background: var(--background) !important;
}

/* UI parity v2 (tokenized, source: UI layout + theme tokens). */
.oc-panel-shell {
  --oc-shell-topbar-height: 64px !important;
  --oc-shell-sidebar-width: 256px !important;
  --oc-shell-sidebar-collapsed-width: 48px !important;
  --oc-shell-content-padding-x: 24px !important;
  --oc-shell-content-padding-y: 24px !important;
  --oc-topbar-search-width: min(448px, 100%) !important;
  --oc-topbar-search-height: 36px !important;
  --oc-topbar-search-radius: 8px !important;
  --oc-topbar-icon-button-size: 32px !important;
  --oc-topbar-icon-radius: 8px !important;
  --oc-topbar-avatar-size: 32px !important;
}

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

@media (min-width: 1024px) {
  .oc-panel-shell .panel-topbar,
  .oc-panel-shell .oc-topbar {
    padding: 0 24px !important;
  }
}

.oc-panel-shell .panel-topbar .oc-topbar__left {
  gap: 16px !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand-mark {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, var(--primary), var(--primary-dark)) !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--primary) 35%, transparent) !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand-mark .one-svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  display: block;
  color: var(--primary-foreground) !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand-text strong {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand-text small {
  font-size: 0.75rem !important;
  color: var(--text-gray-500) !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__search {
  width: var(--oc-topbar-search-width) !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__search input,
.oc-panel-shell .panel-topbar .panel-topbar-search-input {
  height: var(--oc-topbar-search-height) !important;
  border-radius: var(--oc-topbar-search-radius) !important;
  border-color: var(--input-border) !important;
  background: var(--accent) !important;
  color: var(--text-gray-700) !important;
  padding-left: 40px !important;
}

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

.oc-panel-shell .panel-topbar .oc-topbar__right {
  gap: 8px !important;
}

.oc-panel-shell .panel-topbar .icon-btn {
  width: var(--oc-topbar-icon-button-size) !important;
  height: var(--oc-topbar-icon-button-size) !important;
  border-radius: var(--oc-topbar-icon-radius) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--text-gray-700) !important;
  box-shadow: none !important;
}

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

.oc-panel-shell .panel-topbar .icon-btn :is(svg, .one-svg, iconify-icon) {
  width: 20px !important;
  height: 20px !important;
}

.oc-panel-shell .panel-topbar .panel-language-trigger {
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--text-gray-700) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

.oc-panel-shell .panel-topbar .panel-language-trigger:hover {
  background: var(--accent) !important;
  color: var(--text-dark) !important;
}

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

.oc-panel-shell .panel-topbar .oc-topbar__user:hover,
.oc-panel-shell .panel-topbar .oc-topbar__user.is-open {
  background: var(--accent) !important;
  border-left-color: var(--border) !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__avatar {
  width: var(--oc-topbar-avatar-size) !important;
  height: var(--oc-topbar-avatar-size) !important;
  flex: 0 0 var(--oc-topbar-avatar-size) !important;
  border-radius: 8px !important;
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}

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

.oc-panel-shell .panel-topbar .oc-topbar__user-meta strong {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__user-meta small {
  font-size: 0.75rem !important;
  color: var(--text-gray-600) !important;
}

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

.oc-panel-shell .panel-topbar .oc-topbar__item {
  position: relative !important;
  display: inline-flex;
  align-items: center;
}

@media (min-width: 1024px) {
  .oc-panel-shell .panel-topbar .oc-topbar__item > :is(.oc-topbar-popover--notifications, .oc-topbar-popover--profile) {
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 10px) !important;
    z-index: 2770 !important;
  }
}

.oc-panel-shell .panel-topbar .oc-topbar-popover--notifications,
.oc-panel-shell .panel-topbar .panel-profile-popover {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--popover) !important;
  box-shadow: 0 16px 30px rgb(15 23 42 / 0.14), 0 4px 12px rgb(15 23 42 / 0.06) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover {
  width: min(320px, calc(100vw - 20px)) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-header {
  border-bottom: 1px solid var(--border) !important;
  background: linear-gradient(180deg, var(--card) 0%, color-mix(in srgb, var(--primary) 6%, var(--card) 94%) 100%) !important;
}

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

.oc-panel-shell .panel-topbar .panel-profile-menu__item--logout:hover {
  background: color-mix(in srgb, var(--destructive-light) 25%, var(--card) 75%) !important;
}

.oc-panel-shell .panel-sidebar {
  background: var(--sidebar) !important;
  border-right: 1px solid var(--sidebar-border) !important;
}

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

.oc-panel-shell .panel-sidebar .oc-sidebar__brand-mark {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, var(--primary), var(--primary-dark)) !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__brand-mark .one-svg {
  width: 18px !important;
  height: 18px !important;
  display: block;
  color: var(--primary-foreground) !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__brand-text strong {
  color: var(--text-dark) !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__brand-text small {
  color: var(--text-gray-600) !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 {
  min-height: 48px !important;
  padding: 12px 16px !important;
  gap: 12px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  color: var(--sidebar-foreground) !important;
}

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

.oc-panel-shell .panel-sidebar .app-nav-item--active {
  background: var(--sidebar-active-bg) !important;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
  color: var(--sidebar-primary) !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04) !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:hover .app-nav-item__icon {
  background: color-mix(in srgb, var(--sidebar-active-bg) 70%, transparent) !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item--active .app-nav-item__icon {
  background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
  color: var(--sidebar-primary) !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item__icon .one-svg,
.oc-panel-shell .panel-sidebar .oc-sidebar__module-icon .one-svg,
.oc-panel-shell .panel-sidebar .oc-sidebar__status-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__label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: inherit !important;
}

.oc-panel-shell .panel-sidebar .app-nav-item__badge {
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  background: var(--warning) !important;
  color: var(--warning-foreground) !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status {
  margin: auto 16px 16px !important;
  padding: 16px !important;
  border: 1px solid var(--sidebar-border) !important;
  border-radius: 12px !important;
  background: var(--sidebar-active-bg) !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__progress {
  height: 8px !important;
  background: var(--sidebar-border) !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__progress > span {
  background: linear-gradient(90deg, var(--primary), var(--primary-dark)) !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status-link {
  min-height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid var(--primary) !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__status-link:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

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

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

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

.oc-panel-shell .panel-sidebar.is-collapsed .app-nav-item__icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: var(--accent) !important;
}

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

.oc-panel-shell .panel-content {
  background: var(--background) !important;
}

@media (max-width: 1023.98px) {
  .oc-panel-shell .panel-topbar .oc-topbar__middle {
    display: none !important;
  }
}

/* Token lock to prevent light-only surfaces in dark mode. */
.oc-panel-shell .panel-sidebar .oc-sidebar__brandbar {
  z-index: 2 !important;
}

.oc-panel-shell .panel-content :is(
  .management-surface-card,
  .portal-surface-card,
  .portal-section-card,
  .account-section-card,
  .photographer-section-card,
  .portal-dashboard-v2__kpi-card,
  .management-dashboard-v2__kpi-card,
  .oc-dashboard-kpi-card,
  .portal-dashboard-v2__storage,
  .portal-dashboard-v2__recent-events,
  .portal-dashboard-v2__approval-alert,
  .management-dashboard-v2__storage-card,
  .management-dashboard-v2__activity-card,
  .management-dashboard-v2__approval-alert
) {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text-dark) !important;
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__storage-kpis div,
  .portal-dashboard-v2__recent-item
) {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text-dark) !important;
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__recent-item:hover,
  .management-dashboard-v2__recent-item:hover
) {
  background: color-mix(in srgb, var(--accent) 50%, var(--card) 50%) !important;
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__storage-breakdown,
  .management-dashboard-v2__storage-breakdown
) {
  border-top-color: var(--border) !important;
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__card-title,
  .management-dashboard-v2__card-title,
  .portal-dashboard-v2__approval-text h3,
  .management-dashboard-v2__approval-text h3
) {
  color: var(--text-dark) !important;
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__card-header-note,
  .portal-dashboard-v2__recent-link
) {
  color: var(--primary) !important;
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__storage-caption,
  .portal-dashboard-v2__approval-text p,
  .portal-dashboard-v2__recent-main small
) {
  color: var(--text-gray-600) !important;
}

.oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__kpi-card p,
  .portal-dashboard-v2__kpi-card small,
  .management-dashboard-v2__kpi-card p,
  .management-dashboard-v2__kpi-card small
) {
  color: var(--text-gray-600) !important;
}

.oc-panel-shell .oc-data-grid .one-grid__toolbar-row,
.oc-panel-shell .oc-data-grid .one-grid__th,
.oc-panel-shell .oc-data-grid .one-grid__td {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text-gray-700) !important;
}

.oc-panel-shell .oc-data-grid .one-grid__th {
  color: var(--text-gray-600) !important;
}

/* UX cleanup + parity fixes. */
.oc-panel-shell .panel-sidebar .oc-sidebar__brandbar {
  display: none !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__middle {
  display: none !important;
}

.oc-panel-shell .panel-topbar {
  justify-content: space-between !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__left {
  flex: 1 1 auto;
  gap: 8px !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__right {
  margin-left: auto;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand-mark,
.oc-panel-shell .panel-sidebar .oc-sidebar__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.one-dialog-shortcut-menu,
.portal-payment-notice-workspace__header-shortcuts,
[class*="shortcut-hint"] {
  display: none !important;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__item--logout {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text-dark) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__item--logout:hover {
  background: color-mix(in srgb, var(--destructive-light) 25%, var(--card) 75%) !important;
  border-color: color-mix(in srgb, var(--destructive) 30%, var(--border)) !important;
  color: var(--destructive) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-menu__item--logout .panel-profile-menu__text small {
  color: var(--text-gray-600) !important;
}

.oc-panel-shell .panel-content :is(
  .portal-inline-form,
  .portal-finance-form,
  .portal-customers-filter-form,
  .management-inline-form,
  .account-inline-form,
  .photographer-inline-form
) {
  display: grid;
  gap: 0.85rem;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}

.oc-panel-shell .panel-content :is(
  .portal-inline-form .oc-auto-form,
  .portal-finance-form .oc-auto-form,
  .portal-customers-filter-form .oc-auto-form,
  .management-inline-form .oc-auto-form,
  .account-inline-form .oc-auto-form,
  .photographer-inline-form .oc-auto-form
) {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: end;
}

.oc-panel-shell .panel-content .portal-inline-form__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-left: auto;
  grid-column: 1 / -1;
}

.oc-panel-shell .panel-content .one-grid__toolbar-row {
  padding: 0.6rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--card) !important;
  gap: 0.5rem !important;
}

.oc-panel-shell .panel-content .one-grid__search {
  height: 36px !important;
  border-radius: 8px !important;
  border: 1px solid var(--input-border) !important;
  background: var(--accent) !important;
  padding-inline: 0.5rem !important;
}

.oc-panel-shell .panel-content .one-grid__search-input {
  height: 32px !important;
}

.oc-panel-shell .panel-content :is(.one-grid__filter-input, .one-grid__filter-select) {
  height: 32px !important;
  border-radius: 6px !important;
  border: 1px solid var(--input-border) !important;
  background: var(--input-background) !important;
  color: var(--text-gray-700) !important;
}

.oc-panel-shell .panel-content .one-grid__filter-op-btn {
  border-radius: 6px !important;
}

/* Dark mode readability fixes. */
.dark .oc-panel-shell .panel-content,
:root[data-theme="dark"] .oc-panel-shell .panel-content {
  color: var(--text-gray-700) !important;
}

.dark .oc-panel-shell .panel-content :is(h1, h2, h3, h4),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(h1, h2, h3, h4) {
  color: var(--text-dark) !important;
}

.dark .oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__header h2,
  .management-dashboard-v2__header h2,
  .portal-dashboard-v2__kpi-card strong,
  .management-dashboard-v2__kpi-card strong,
  .oc-dashboard-kpi-card strong,
  .portal-dashboard-v2__card-title,
  .management-dashboard-v2__card-title
),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__header h2,
  .management-dashboard-v2__header h2,
  .portal-dashboard-v2__kpi-card strong,
  .management-dashboard-v2__kpi-card strong,
  .oc-dashboard-kpi-card strong,
  .portal-dashboard-v2__card-title,
  .management-dashboard-v2__card-title
) {
  color: var(--text-dark) !important;
}

.dark .oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__header p,
  .management-dashboard-v2__header p,
  .portal-dashboard-v2__kpi-card p,
  .portal-dashboard-v2__kpi-card small,
  .management-dashboard-v2__kpi-card p,
  .management-dashboard-v2__kpi-card small,
  .portal-dashboard-v2__storage-caption,
  .portal-dashboard-v2__approval-text p,
  .portal-dashboard-v2__recent-main small
),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__header p,
  .management-dashboard-v2__header p,
  .portal-dashboard-v2__kpi-card p,
  .portal-dashboard-v2__kpi-card small,
  .management-dashboard-v2__kpi-card p,
  .management-dashboard-v2__kpi-card small,
  .portal-dashboard-v2__storage-caption,
  .portal-dashboard-v2__approval-text p,
  .portal-dashboard-v2__recent-main small
) {
  color: var(--text-gray-600) !important;
}

.dark .oc-panel-shell .panel-content :is(.one-grid__filter-input, .one-grid__filter-select),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(.one-grid__filter-input, .one-grid__filter-select) {
  background: var(--input-background) !important;
  color: var(--text-gray-700) !important;
}

.oc-panel-shell :is(.oc-topbar__brand-mark, .oc-sidebar__brand-mark) .oc-shell-brand-heart {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  display: block;
}

/* Brand lock: match UI heart badge exactly, avoid drift. */
.oc-panel-shell :is(.oc-topbar__brand, .oc-sidebar__brand) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 36px !important;
  margin-left: 0 !important;
}

.oc-panel-shell :is(.oc-topbar__brand-mark, .oc-sidebar__brand-mark) {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #3aa4ff 0%, #1f7bff 100%) !important;
  box-shadow:
    0 10px 20px color-mix(in srgb, #1f7bff 28%, transparent),
    inset 0 1px 4px color-mix(in srgb, #ffffff 22%, transparent) !important;
  display: grid !important;
  place-items: center !important;
}

.oc-panel-shell .oc-shell-brand-heart {
  width: 18px !important;
  height: 18px !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

.oc-panel-shell :is(.oc-topbar__brand-text, .oc-sidebar__brand-text) strong {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  line-height: 1.1 !important;
  display: block !important;
}

.oc-panel-shell :is(.oc-topbar__brand-text, .oc-sidebar__brand-text) small {
  margin-top: 2px !important;
  display: block !important;
  color: var(--text-gray-500) !important;
  font-size: 0.76rem !important;
  line-height: 1.2 !important;
}

.oc-panel-shell :is(.oc-topbar__brand-text, .oc-sidebar__brand-text) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Final portal stabilization */
.oc-panel-shell .panel-topbar .oc-topbar__left {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
  gap: 10px !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__left > .oc-topbar__brand {
  order: 1;
  margin-right: 0 !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__left > .icon-btn {
  order: 0;
  margin-left: 0 !important;
  margin-right: 2px !important;
  flex: 0 0 auto !important;
}

.oc-panel-shell .panel-content .oc-data-grid .one-grid__toolbar-row {
  padding: 0.84rem 0.92rem !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, var(--primary) 18%) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--card) 78%, var(--accent) 22%) !important;
}

.oc-panel-shell .panel-content .oc-data-grid .one-grid__search {
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-content .oc-data-grid .one-grid__search-input {
  height: 40px !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 10px !important;
  background: var(--accent) !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}

.oc-panel-shell .panel-content :is(.oc-page-shortcut-hint, .oc-dialog-shortcut-hint, .one-dialog-shortcut-menu) {
  display: none !important;
}

.oc-panel-shell .panel-content :is(
  .portal-events-open-dialog,
  .portal-billing-open-dialog,
  .portal-accounting-open-dialog,
  .portal-receiving-open-dialog,
  .portal-packages-open-dialog
) {
  display: none !important;
}

/* Final lock: topbar order + list/filter/dialog consistency. */
.oc-panel-shell .panel-topbar .panel-topbar-left {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

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

.oc-panel-shell .panel-topbar .panel-topbar-brand-slot {
  order: 1 !important;
}

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

.oc-panel-shell .panel-topbar .panel-topbar-toggle-slot > .icon-btn {
  margin: 0 !important;
}

.oc-panel-shell .panel-content :is(
  .portal-inline-form,
  .portal-finance-form,
  .portal-users-filter-form,
  .portal-customers-filter-form
) {
  display: grid !important;
  gap: 0.9rem !important;
  padding: 1rem !important;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--primary) 14%) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--card) 90%, var(--accent) 10%) !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-content :is(
  .portal-inline-form .oc-auto-form,
  .portal-finance-form .oc-auto-form,
  .portal-users-filter-form .oc-auto-form,
  .portal-customers-filter-form .oc-auto-form
) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 0.8rem 0.9rem !important;
  align-items: end !important;
}

.oc-panel-shell .panel-content :is(
  .portal-inline-form__actions,
  .portal-users-actions,
  .portal-events-filter-actions,
  .portal-customers-filter-actions
) {
  grid-column: 1 / -1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

.oc-panel-shell .panel-content .oc-data-grid .one-grid__toolbar-row,
.oc-panel-shell .panel-content .portal-grid-table .one-grid__toolbar-row {
  padding: 0.85rem 1rem !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, var(--primary) 18%) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--card) 82%, var(--accent) 18%) !important;
}

.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__toolbar-row > div {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) auto !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__search {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__search-input {
  width: 100% !important;
  height: 40px !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 10px !important;
  background: var(--accent) !important;
  box-shadow: none !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}

.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__toolbar-row > div > .ml-auto {
  margin-left: 0 !important;
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

.oc-panel-shell .panel-content :is(.oc-page-shortcut-hint, .oc-dialog-shortcut-hint, .one-dialog-shortcut-menu) {
  display: none !important;
}

.dark .oc-panel-shell .panel-content,
:root[data-theme="dark"] .oc-panel-shell .panel-content {
  color: var(--text-gray-700) !important;
}

.dark .oc-panel-shell .panel-content :is(
  .portal-surface-card,
  .portal-section-card,
  .one-grid__card,
  .oc-page-header,
  .oc-dialog,
  .oc-dialog__header,
  .oc-dialog__body,
  .oc-dialog__footer
),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(
  .portal-surface-card,
  .portal-section-card,
  .one-grid__card,
  .oc-page-header,
  .oc-dialog,
  .oc-dialog__header,
  .oc-dialog__body,
  .oc-dialog__footer
) {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

.dark .oc-panel-shell .panel-content :is(.portal-surface-card__title, .oc-page-header-text h1, .one-grid__td, .one-grid__search-input, .oc-input, .oc-select, .oc-textarea),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(.portal-surface-card__title, .oc-page-header-text h1, .one-grid__td, .one-grid__search-input, .oc-input, .oc-select, .oc-textarea) {
  color: var(--text-dark) !important;
}

.dark .oc-panel-shell .panel-content :is(.portal-surface-card__description, .oc-page-header-text p, .one-grid__th, .oc-input::placeholder, .oc-textarea::placeholder),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(.portal-surface-card__description, .oc-page-header-text p, .one-grid__th, .oc-input::placeholder, .oc-textarea::placeholder) {
  color: var(--text-gray-500) !important;
}

@media (max-width: 1200px) {
  .oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__toolbar-row > div {
    grid-template-columns: 1fr !important;
  }

  .oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__toolbar-row > div > .ml-auto {
    justify-self: start !important;
  }
}

@media (max-width: 760px) {
  .oc-panel-shell .panel-content :is(
    .portal-inline-form .oc-auto-form,
    .portal-finance-form .oc-auto-form,
    .portal-users-filter-form .oc-auto-form,
    .portal-customers-filter-form .oc-auto-form
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oc-panel-shell .panel-content :is(
    .portal-inline-form__actions,
    .portal-users-actions,
    .portal-events-filter-actions,
    .portal-customers-filter-actions
  ) {
    justify-content: stretch !important;
  }
}

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

.oc-panel-shell .panel-topbar-brand-slot {
  order: 1 !important;
}

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

.oc-panel-shell .panel-topbar-toggle-slot > .icon-btn {
  margin: 0 !important;
}

.oc-panel-shell .panel-content :is([class*="shortcut-hint"], .one-dialog-shortcut-menu) {
  display: none !important;
}

.oc-panel-shell .panel-content .portal-customers-workspace__record-position {
  display: none !important;
}

.panel-profile-menu .panel-profile-menu__item--logout {
  width: 100% !important;
  margin: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, var(--accent) 4%) 0%, color-mix(in srgb, var(--card) 92%, var(--accent) 8%) 100%) !important;
}

.panel-profile-menu .panel-profile-menu__item--logout:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, var(--destructive-light) 6%) 0%, color-mix(in srgb, var(--card) 86%, var(--destructive-light) 14%) 100%) !important;
}

.panel-profile-menu .panel-profile-menu__item--logout .panel-profile-menu__icon {
  background: linear-gradient(180deg, color-mix(in srgb, var(--destructive-light) 34%, var(--card) 66%) 0%, color-mix(in srgb, var(--accent) 76%, var(--card) 24%) 100%) !important;
  color: color-mix(in srgb, var(--destructive) 64%, var(--text-gray-700) 36%) !important;
}

.panel-profile-menu .panel-profile-menu__item--logout:hover .panel-profile-menu__icon {
  background: color-mix(in srgb, var(--destructive-light) 54%, var(--card) 46%) !important;
  color: var(--destructive) !important;
}

.panel-profile-menu .panel-profile-footer {
  margin-top: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 84%, var(--primary) 16%) !important;
}

.panel-profile-menu .panel-profile-footer .panel-profile-menu__item--logout {
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--destructive) 10%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.52) !important;
}

.oc-panel-shell .panel-content :is(
  .portal-events-open-dialog,
  .portal-billing-open-dialog,
  .portal-accounting-open-dialog,
  .portal-receiving-open-dialog,
  .portal-packages-open-dialog,
  .portal-payment-notice-open-dialog
) {
  display: none !important;
}

.dark :is(.oc-dashboard-kpi-card, .portal-dashboard-v2__kpi-card, .management-dashboard-v2__kpi-card),
.dark :is(.oc-dashboard-storage-card, .portal-dashboard-v2__storage, .management-dashboard-v2__storage-card),
.dark :is(.oc-dashboard-feed-card, .portal-dashboard-v2__recent-events, .management-dashboard-v2__activity-card),
.dark :is(.one-dashboard-approval-alert, .portal-dashboard-v2__approval-alert, .management-dashboard-v2__approval-alert),
:root[data-theme="dark"] :is(.oc-dashboard-kpi-card, .portal-dashboard-v2__kpi-card, .management-dashboard-v2__kpi-card),
:root[data-theme="dark"] :is(.oc-dashboard-storage-card, .portal-dashboard-v2__storage, .management-dashboard-v2__storage-card),
:root[data-theme="dark"] :is(.oc-dashboard-feed-card, .portal-dashboard-v2__recent-events, .management-dashboard-v2__activity-card),
:root[data-theme="dark"] :is(.one-dashboard-approval-alert, .portal-dashboard-v2__approval-alert, .management-dashboard-v2__approval-alert) {
  box-shadow: none !important;
}

/* Final parity lock: topbar order, single-layer grid search, unified portal dialogs. */
.oc-panel-shell .panel-topbar .panel-topbar-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-direction: row !important;
}

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

.oc-panel-shell .panel-topbar .panel-topbar-brand-slot {
  order: 1 !important;
}

.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__search {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
}

.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__search:focus-within {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.oc-panel-shell .oc-dialog__body.portal-dialog-body .portal-dialog-topline {
  display: none !important;
}

.oc-panel-shell .oc-dialog__body.portal-dialog-body > .oc-dialog-form {
  width: 100% !important;
  max-width: none !important;
}

.oc-panel-shell .oc-dialog.portal-payment-notice-dialog .portal-payment-notice-form.oc-dialog-form,
.oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form.oc-dialog-form,
.oc-panel-shell .oc-dialog.portal-accounting-dialog .portal-accounting-dialog-form.oc-dialog-form {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 0.72rem 0.9rem !important;
}

.oc-panel-shell .oc-dialog.portal-payment-notice-dialog .portal-payment-notice-form .oc-dialog-field {
  grid-column: 1 / -1 !important;
}

.oc-panel-shell .oc-dialog.portal-payment-notice-dialog .portal-payment-notice-form .portal-payment-notice-field--amount {
  grid-column: span 8 !important;
}

.oc-panel-shell .oc-dialog.portal-payment-notice-dialog .portal-payment-notice-form .portal-payment-notice-field--currency {
  grid-column: span 4 !important;
}

.oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form .oc-dialog-field {
  grid-column: 1 / -1 !important;
}

.oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form :is(.portal-billing-field--amount, .portal-billing-field--line-description) {
  grid-column: span 8 !important;
}

.oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form :is(.portal-billing-field--currency, .portal-billing-field--due-days) {
  grid-column: span 4 !important;
}

.oc-panel-shell .oc-dialog.portal-accounting-dialog .portal-accounting-dialog-form .oc-dialog-field {
  grid-column: span 6 !important;
}

.oc-panel-shell .oc-dialog.portal-accounting-dialog .portal-accounting-dialog-form .oc-dialog-field.col-span-2 {
  grid-column: 1 / -1 !important;
}

@media (max-width: 980px) {
  .oc-panel-shell .oc-dialog.portal-payment-notice-dialog .portal-payment-notice-form :is(
    .portal-payment-notice-field--amount,
    .portal-payment-notice-field--currency,
    .portal-payment-notice-field--paid-date,
    .portal-payment-notice-field--reference,
    .oc-dialog-field
  ),
  .oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form :is(
    .portal-billing-field--amount,
    .portal-billing-field--currency,
    .portal-billing-field--due-days,
    .portal-billing-field--line-description,
    .oc-dialog-field
  ),
    .oc-panel-shell .oc-dialog.portal-accounting-dialog .portal-accounting-dialog-form .oc-dialog-field {
    grid-column: 1 / -1 !important;
  }
}

/* ==========================================================================
   FINAL UI PARITY LOCK V4 (authoritative, keep this block last)
   ========================================================================== */

.oc-panel-shell .panel-topbar .panel-topbar-left {
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 0.55rem !important;
}

.oc-panel-shell .panel-topbar .panel-topbar-toggle-slot {
  order: 0 !important;
  margin: 0 0.1rem 0 0 !important;
}

.oc-panel-shell .panel-topbar .panel-topbar-brand-slot {
  order: 1 !important;
  margin: 0 !important;
}

.oc-panel-shell .panel-topbar :is(.oc-topbar__middle, .oc-topbar__search, .panel-topbar-search, .panel-topbar-search-input) {
  display: none !important;
}

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

.oc-panel-shell .panel-topbar .oc-topbar__item {
  position: relative !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__item--notifications .oc-topbar-popover--notifications {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: -26px !important;
  left: auto !important;
  z-index: 2800 !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__item--profile .panel-profile-popover {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 2810 !important;
}

.oc-panel-shell .panel-content :is(
  [class*="shortcut-hint"],
  .oc-page-shortcut-hint,
  .oc-dialog-shortcut-hint,
  .one-dialog-shortcut-menu,
  .portal-payment-notice-workspace__header-shortcuts
) {
  display: none !important;
}

.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__toolbar-row > div {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) auto !important;
  align-items: center !important;
  gap: 0.72rem !important;
}

.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__toolbar-row > div > .ml-auto {
  margin-left: 0 !important;
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  flex-wrap: wrap !important;
}

.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__search,
.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__search:focus-within {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__search::before,
.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__search::after {
  display: none !important;
}

.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__search-input {
  width: 100% !important;
  height: 40px !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 10px !important;
  background: var(--input-background) !important;
  box-shadow: none !important;
  padding-left: 2.55rem !important;
  padding-right: 2.55rem !important;
}

.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__search:focus-within .one-grid__search-input {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--input-border)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell {
  width: min(960px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
}

.oc-panel-shell .oc-dialog__body.portal-dialog-body {
  padding: 1rem 1.15rem 1.05rem !important;
  display: grid !important;
  gap: 0.9rem !important;
  align-content: start !important;
  grid-auto-rows: min-content !important;
}

.oc-panel-shell .oc-dialog__body.portal-dialog-body .portal-dialog-topline {
  display: none !important;
}

.oc-panel-shell .oc-dialog__body.portal-dialog-body > .oc-dialog-form,
.oc-panel-shell .oc-dialog__body.portal-dialog-body > form.oc-dialog-form {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 0.72rem 0.9rem !important;
}

.oc-panel-shell .oc-dialog.portal-payment-notice-dialog .portal-payment-notice-form :is(.portal-payment-notice-field, .oc-dialog-field),
.oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form :is(.portal-billing-field, .oc-dialog-field) {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
}

.oc-panel-shell .oc-dialog.portal-payment-notice-dialog .portal-payment-notice-form .portal-payment-notice-field--amount,
.oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form :is(.portal-billing-field--amount, .portal-billing-field--line-description) {
  grid-column: span 8 !important;
}

.oc-panel-shell .oc-dialog.portal-payment-notice-dialog .portal-payment-notice-form .portal-payment-notice-field--currency,
.oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form :is(.portal-billing-field--currency, .portal-billing-field--due-days) {
  grid-column: span 4 !important;
}

.oc-panel-shell .oc-dialog.portal-accounting-dialog .portal-accounting-dialog-form .oc-dialog-field {
  grid-column: span 6 !important;
}

.oc-panel-shell .oc-dialog.portal-accounting-dialog .portal-accounting-dialog-form .oc-dialog-field.col-span-2 {
  grid-column: 1 / -1 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .oc-dialog__footer-actions,
.oc-panel-shell .oc-dialog.portal-dialog-shell .oc-dialog__footer-actions--split {
  align-items: center !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .oc-dialog__footer-right,
.oc-panel-shell .oc-dialog.portal-dialog-shell .oc-dialog__footer-right .oc-dialog-form__actions {
  margin-left: auto !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.oc-dialog--full {
  width: 100dvw !important;
  max-width: 100dvw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.oc-dialog--full .oc-dialog__header {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.oc-dialog--full .oc-dialog__body {
  min-height: 0 !important;
  overflow: auto !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.oc-dialog--full .oc-dialog__footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
}

.oc-panel-shell :is(
  .oc-topbar,
  .panel-topbar,
  .panel-sidebar,
  .panel-profile-menu__icon,
  .oc-grid-action-btn,
  .one-menu-trigger--compact-icon,
  .oc-dialog__header-btn
) :is(
  svg,
  .one-svg,
  iconify-icon,
  i,
  [class^="fa-"],
  [class*=" fa-"],
  [class^="ri-"],
  [class*=" ri-"],
  [class^="bi-"],
  [class*=" bi-"],
  [class^="icon-"],
  [class*=" icon-"]
) {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.panel-profile-menu .panel-profile-menu__item--logout,
.panel-profile-menu .panel-profile-menu__item--logout:hover {
  border-top: 1px solid var(--border) !important;
  background: transparent !important;
}

.panel-profile-menu .panel-profile-menu__item--logout .panel-profile-menu__icon,
.panel-profile-menu .panel-profile-menu__item--logout:hover .panel-profile-menu__icon {
  background: var(--accent) !important;
  color: var(--text-gray-700) !important;
}

.panel-profile-menu .panel-profile-menu__item--logout .panel-profile-menu__label,
.panel-profile-menu .panel-profile-menu__item--logout:hover .panel-profile-menu__label {
  color: var(--text-dark) !important;
}

.panel-profile-menu .panel-profile-menu__item--logout .panel-profile-menu__text small,
.panel-profile-menu .panel-profile-menu__item--logout:hover .panel-profile-menu__text small {
  color: var(--text-gray-600) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer {
  margin-top: 6px !important;
  padding-top: 10px !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 84%, var(--primary) 16%) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-footer__copy {
  min-width: 0 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-footer__copy small {
  color: var(--text-gray-600) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-footer__button.btn-bad {
  border-color: color-mix(in srgb, var(--destructive) 22%, var(--border) 78%) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--destructive-light) 76%, #ffffff 24%) 0%, color-mix(in srgb, var(--destructive-light) 88%, #ffffff 12%) 100%) !important;
  color: color-mix(in srgb, var(--destructive) 86%, var(--text-dark) 14%) !important;
  box-shadow:
    0 10px 22px rgb(233 93 123 / 0.12),
    inset 0 1px 0 rgb(255 255 255 / 0.72) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-footer__button.btn-bad:hover {
  border-color: color-mix(in srgb, var(--destructive) 34%, var(--border) 66%) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--destructive-light) 88%, #ffffff 12%) 0%, color-mix(in srgb, var(--destructive-light) 96%, #ffffff 4%) 100%) !important;
  color: var(--destructive) !important;
  transform: translateY(-1px) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-footer__button.btn-bad .one-svg {
  color: currentColor !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-menu__item--logout,
.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-menu__item--logout:hover {
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-menu__item--logout:hover {
  background: color-mix(in srgb, var(--destructive-light) 16%, var(--card) 84%) !important;
  border-color: transparent !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-menu__item--logout .panel-profile-menu__icon,
.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-menu__item--logout:hover .panel-profile-menu__icon {
  background: color-mix(in srgb, var(--destructive-light) 18%, var(--accent) 82%) !important;
  color: color-mix(in srgb, var(--destructive) 72%, var(--text-gray-700) 28%) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-menu__item--logout .panel-profile-menu__label,
.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-menu__item--logout .panel-profile-menu__text small {
  color: var(--text-dark) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-menu__item--logout:hover .panel-profile-menu__label {
  color: color-mix(in srgb, var(--destructive) 82%, var(--text-dark) 18%) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-menu__item--logout:hover .panel-profile-menu__text small {
  color: var(--text-gray-600) !important;
}

.oc-panel-shell .portal-dashboard-v2__storage-breakdown ul {
  display: grid !important;
  gap: 0 !important;
}

.oc-panel-shell .portal-dashboard-v2__storage-breakdown li {
  min-height: 2rem !important;
  padding: 0.25rem 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent) !important;
}

.oc-panel-shell .portal-dashboard-v2__storage-breakdown li:last-child {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.oc-panel-shell .portal-dashboard-v2__storage-breakdown strong {
  font-variant-numeric: tabular-nums !important;
  text-align: right !important;
}

.dark .oc-panel-shell,
:root[data-theme="dark"] .oc-panel-shell {
  --background: #181a24 !important;
  --card: #1f2432 !important;
  --accent: #2a3144 !important;
  --border: #3b465c !important;
  --input-background: #1a2030 !important;
  --input-border: #4c5973 !important;
  --text-dark: #f3f6ff !important;
  --text-gray-800: #dbe3f2 !important;
  --text-gray-700: #c5cfdf !important;
  --text-gray-600: #a7b3c8 !important;
  --text-gray-500: #8f9cb5 !important;
}

.dark .oc-panel-shell :is(.panel-topbar, .panel-sidebar),
:root[data-theme="dark"] .oc-panel-shell :is(.panel-topbar, .panel-sidebar) {
  background: color-mix(in srgb, var(--card) 92%, #0f172a 8%) !important;
  border-color: var(--border) !important;
}

.dark .oc-panel-shell .panel-content :is(
  .portal-surface-card,
  .portal-section-card,
  .one-grid__card,
  .oc-page-header,
  .oc-dialog,
  .oc-dialog__header,
  .oc-dialog__body,
  .oc-dialog__footer
),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(
  .portal-surface-card,
  .portal-section-card,
  .one-grid__card,
  .oc-page-header,
  .oc-dialog,
  .oc-dialog__header,
  .oc-dialog__body,
  .oc-dialog__footer
) {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

.dark .oc-panel-shell .panel-content :is(
  .portal-surface-card__title,
  .portal-surface-card__description,
  .one-grid__th,
  .one-grid__td,
  .oc-input,
  .oc-select,
  .oc-textarea,
  .oc-page-header-text h1,
  .oc-page-header-text p
),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(
  .portal-surface-card__title,
  .portal-surface-card__description,
  .one-grid__th,
  .one-grid__td,
  .oc-input,
  .oc-select,
  .oc-textarea,
  .oc-page-header-text h1,
  .oc-page-header-text p
) {
  color: var(--text-dark) !important;
  opacity: 1 !important;
}

.dark .oc-panel-shell .panel-content :is(.one-grid__search-input::placeholder, .oc-input::placeholder, .oc-textarea::placeholder),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(.one-grid__search-input::placeholder, .oc-input::placeholder, .oc-textarea::placeholder) {
  color: var(--text-gray-600) !important;
  opacity: 1 !important;
}

@media (max-width: 1200px) {
  .oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__toolbar-row > div {
    grid-template-columns: 1fr !important;
  }

  .oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__toolbar-row > div > .ml-auto {
    justify-self: start !important;
  }
}

@media (max-width: 980px) {
  .oc-panel-shell .oc-dialog.portal-payment-notice-dialog .portal-payment-notice-form :is(
    .portal-payment-notice-field,
    .portal-payment-notice-field--amount,
    .portal-payment-notice-field--currency,
    .portal-payment-notice-field--paid-date,
    .portal-payment-notice-field--reference,
    .portal-payment-notice-field--attachment,
    .oc-dialog-field
  ),
  .oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form :is(
    .portal-billing-field,
    .portal-billing-field--amount,
    .portal-billing-field--currency,
    .portal-billing-field--due-days,
    .portal-billing-field--line-description,
    .oc-dialog-field
  ),
  .oc-panel-shell .oc-dialog.portal-accounting-dialog .portal-accounting-dialog-form .oc-dialog-field {
    grid-column: 1 / -1 !important;
  }
}

.dark .oc-panel-shell .panel-content :is(.portal-dashboard-v2__header h2, .management-dashboard-v2__header h2),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(.portal-dashboard-v2__header h2, .management-dashboard-v2__header h2) {
  background: none !important;
  color: var(--text-dark) !important;
  -webkit-text-fill-color: currentColor !important;
}

.dark .oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__kpi-card strong,
  .portal-dashboard-v2__card-title,
  .portal-dashboard-v2__storage-kpis strong,
  .portal-dashboard-v2__recent-main strong,
  .portal-dashboard-v2__storage-breakdown h4
),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(
  .portal-dashboard-v2__kpi-card strong,
  .portal-dashboard-v2__card-title,
  .portal-dashboard-v2__storage-kpis strong,
  .portal-dashboard-v2__recent-main strong,
  .portal-dashboard-v2__storage-breakdown h4
) {
  color: var(--text-dark) !important;
}

/* Master parity lock (latest) */
.oc-panel-shell .panel-topbar .panel-topbar-left {
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 8px !important;
}

.oc-panel-shell .panel-topbar .panel-topbar-brand-slot {
  order: 1 !important;
  margin-right: 0 !important;
}

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

.oc-panel-shell .panel-topbar .panel-topbar-toggle-slot > .icon-btn {
  margin: 0 !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__brandbar {
  display: flex !important;
  align-items: center !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__search {
  display: none !important;
}

.oc-panel-shell :is(.oc-topbar__brand-mark, .oc-sidebar__brand-mark) .oc-shell-brand-heart,
.oc-panel-shell .oc-shell-brand-heart {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  fill: #fff !important;
  stroke: #fff !important;
}

.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__search,
.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__search:focus-within {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}

.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__search-input {
  border: 1px solid var(--input-border) !important;
  background: var(--input-background) !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-content :is(
  .oc-grid-action-btn,
  .one-menu-trigger--compact-icon,
  .one-dialog-shortcut-menu__trigger,
  .oc-dialog__header-btn,
  .panel-profile-menu__icon
) :is(
  svg,
  .one-svg,
  iconify-icon,
  i,
  .fa,
  .fas,
  .far,
  .fab,
  .bi,
  [class^="fa-"],
  [class*=" fa-"],
  [class^="ri-"],
  [class*=" ri-"],
  [class^="bi-"],
  [class*=" bi-"],
  [class^="icon-"],
  [class*=" icon-"]
) {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.oc-panel-shell .panel-content :is([class*="shortcut-hint"], .oc-page-shortcut-hint, .oc-dialog-shortcut-hint, .one-dialog-shortcut-menu, .portal-payment-notice-workspace__header-shortcuts) {
  display: none !important;
}

.oc-panel-shell .oc-dialog__footer-actions,
.oc-panel-shell .oc-dialog__footer-actions--split {
  align-items: center !important;
}

.oc-panel-shell .oc-dialog__footer-right,
.oc-panel-shell .oc-dialog__footer-right .oc-dialog-form__actions {
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  margin-left: auto !important;
}

.oc-panel-shell .oc-dialog.oc-dialog--full {
  width: 100dvw !important;
  max-width: 100dvw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
}

.oc-panel-shell .oc-dialog.oc-dialog--full .oc-dialog__body {
  min-height: 0 !important;
  overflow: auto !important;
}

.panel-profile-menu .panel-profile-menu__item--logout,
.panel-profile-menu .panel-profile-menu__item--logout:hover {
  background: transparent !important;
}

.panel-profile-menu .panel-profile-menu__item--logout:hover .panel-profile-menu__label {
  color: var(--text-dark) !important;
}

.panel-profile-menu .panel-profile-menu__item--logout:hover .panel-profile-menu__text small {
  color: var(--text-gray-600) !important;
}

.dark .oc-panel-shell,
:root[data-theme="dark"] .oc-panel-shell {
  --background: #0f172a;
  --card: #172238;
  --accent: #1f2d48;
  --border: #2a3b58;
  --input-background: #16243a;
  --input-border: #334863;
  --text-dark: #e6edf9;
  --text-gray-800: #d8e2f2;
  --text-gray-700: #bccbe0;
  --text-gray-600: #93a8c7;
  --text-gray-500: #7f97b8;
}

.dark .oc-panel-shell .panel-content :is(
  .portal-surface-card__title,
  .portal-surface-card__description,
  .one-grid__th,
  .one-grid__td,
  .oc-input,
  .oc-select,
  .oc-textarea,
  .oc-page-header-text h1,
  .oc-page-header-text p
),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(
  .portal-surface-card__title,
  .portal-surface-card__description,
  .one-grid__th,
  .one-grid__td,
  .oc-input,
  .oc-select,
  .oc-textarea,
  .oc-page-header-text h1,
  .oc-page-header-text p
) {
  opacity: 1 !important;
}

/* ==========================================================================
   FINAL UI PARITY LOCK (authoritative, keep last)
   ========================================================================== */

.oc-panel-shell .panel-topbar .panel-topbar-left {
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 8px !important;
}

.oc-panel-shell .panel-topbar .panel-topbar-brand-slot {
  order: 0 !important;
  margin-right: 0 !important;
}

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

.oc-panel-shell .panel-topbar .panel-topbar-toggle-slot > .icon-btn {
  margin: 0 !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__middle,
.oc-panel-shell .panel-topbar .oc-topbar__search {
  display: none !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__brand-mark {
  display: inline-flex !important;
}

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

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

.oc-panel-shell .panel-topbar .oc-topbar__item {
  position: relative !important;
}

.oc-panel-shell .panel-topbar :is(.oc-topbar-popover--notifications, .panel-profile-popover) {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 2800 !important;
  left: auto !important;
}

.oc-panel-shell .panel-topbar .oc-topbar-action-button.panel-notification-trigger {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  border: 1px solid #dbe5f2 !important;
  background: linear-gradient(150deg, #ffffff 0%, #f5f9ff 100%) !important;
  color: #5b708f !important;
  box-shadow: 0 10px 18px rgb(15 23 42 / 0.07), inset 0 1px 0 rgb(255 255 255 / 0.86) !important;
}

.oc-panel-shell .panel-topbar .oc-topbar-action-button.panel-notification-trigger:hover,
.oc-panel-shell .panel-topbar .oc-topbar-action-button.panel-notification-trigger.is-open {
  border-color: color-mix(in srgb, var(--primary) 34%, #dbe5f2 66%) !important;
  background: linear-gradient(150deg, #ffffff 0%, #eaf3ff 100%) !important;
  color: #1f5ea8 !important;
  box-shadow: 0 14px 24px rgb(37 99 235 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.92) !important;
  transform: translateY(-1px) !important;
}

.oc-panel-shell .panel-topbar .oc-topbar-action-button.panel-notification-trigger .oc-topbar-action-button__icon {
  width: 18px !important;
  height: 18px !important;
  color: currentColor !important;
}

.oc-panel-shell .panel-topbar .oc-topbar-action-button.panel-notification-trigger .oc-topbar-action-button__badge {
  top: -4px !important;
  right: -4px !important;
  min-width: 19px !important;
  height: 19px !important;
  padding: 0 5px !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ff8090 0%, #ef4444 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgb(239 68 68 / 0.28) !important;
  font-size: 0.63rem !important;
  font-weight: 800 !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__item--notifications .oc-topbar-popover--notifications {
  width: min(368px, calc(100vw - 20px)) !important;
  border-radius: 20px !important;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--primary) 14%) !important;
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, #ffffff 96%, var(--accent) 4%) 100%) !important;
  box-shadow: 0 22px 44px rgb(15 23 42 / 0.16), 0 8px 18px rgb(15 23 42 / 0.08) !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer__header {
  padding: 1rem 1.05rem 0.92rem !important;
  background:
    radial-gradient(circle at top left, rgb(94 162 255 / 0.16) 0%, transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, #ffffff 96%, var(--primary-light) 4%) 0%, color-mix(in srgb, #ffffff 90%, var(--accent) 10%) 100%) !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer__headline p {
  color: color-mix(in srgb, var(--primary-dark) 64%, var(--text-gray-600) 36%) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer__body {
  padding: 0.9rem 0.95rem 0.76rem !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer__list {
  gap: 0.68rem !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer .one-notifications-list__item {
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  padding: 0.9rem 0.92rem 0.84rem 1rem !important;
  box-shadow: 0 10px 24px rgb(15 23 42 / 0.05), inset 0 1px 0 rgb(255 255 255 / 0.86) !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer .one-notifications-list__item:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 28px rgb(15 23 42 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.88) !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer .one-notifications-list__header strong {
  font-size: 0.91rem !important;
  line-height: 1.3 !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer .one-notifications-list__description {
  font-size: 0.775rem !important;
  line-height: 1.52 !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer .one-notifications-list__meta-line {
  width: fit-content !important;
  max-width: 100% !important;
  padding: 0.24rem 0.56rem !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  font-size: 0.68rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  background: rgb(255 255 255 / 0.58) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.78) !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer .tone-neutral.one-notifications-list__item {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-color: #e2e8f0 !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer .tone-neutral.one-notifications-list__meta-line {
  border-color: #d8e1eb !important;
  background: #ffffff !important;
  color: var(--text-gray-600) !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer .tone-info.one-notifications-list__item {
  background: linear-gradient(180deg, #fcfdff 0%, #f2f8ff 100%) !important;
  border-color: #d7e5fb !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer .tone-info.one-notifications-list__meta-line {
  border-color: #cfe0f8 !important;
  background: #f9fcff !important;
  color: color-mix(in srgb, var(--primary) 72%, var(--text-gray-600) 28%) !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer .tone-success.one-notifications-list__item {
  background: linear-gradient(180deg, #fcfefd 0%, #effbf4 100%) !important;
  border-color: #cfeeda !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer .tone-success.one-notifications-list__meta-line {
  border-color: #c8e9d4 !important;
  background: #f8fffb !important;
  color: color-mix(in srgb, var(--success) 74%, var(--text-gray-600) 26%) !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer .tone-warning.one-notifications-list__item {
  background: linear-gradient(180deg, #fffdf8 0%, #fff6e8 100%) !important;
  border-color: #f4dfb8 !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer .tone-warning.one-notifications-list__meta-line {
  border-color: #f0d3a3 !important;
  background: #fffaf0 !important;
  color: color-mix(in srgb, #d97706 84%, var(--text-gray-600) 16%) !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer .tone-danger.one-notifications-list__item {
  background: linear-gradient(180deg, #fffdfd 0%, #fff3f5 100%) !important;
  border-color: #f3d4dc !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer .tone-danger.one-notifications-list__meta-line {
  border-color: #edc8d1 !important;
  background: #fff7f8 !important;
  color: color-mix(in srgb, var(--destructive) 82%, var(--text-gray-600) 18%) !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer .one-notifications-list__item--unread {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent 90%), 0 14px 26px rgb(31 111 235 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.9) !important;
}

.panel-profile-menu .panel-profile-menu__item--logout,
.panel-profile-menu .panel-profile-menu__item--logout:hover {
  background: transparent !important;
  border: 0 !important;
  border-radius: 14px !important;
}

.panel-profile-menu .panel-profile-menu__item--logout .panel-profile-menu__icon,
.panel-profile-menu .panel-profile-menu__item--logout:hover .panel-profile-menu__icon {
  background: color-mix(in srgb, var(--destructive-light) 26%, var(--accent) 74%) !important;
  color: color-mix(in srgb, var(--destructive) 74%, var(--text-gray-700) 26%) !important;
}

.panel-profile-menu .panel-profile-menu__item--logout .panel-profile-menu__label,
.panel-profile-menu .panel-profile-menu__item--logout:hover .panel-profile-menu__label {
  color: color-mix(in srgb, var(--destructive) 68%, var(--text-dark) 32%) !important;
}

.panel-profile-menu .panel-profile-menu__item--logout .panel-profile-menu__text small,
.panel-profile-menu .panel-profile-menu__item--logout:hover .panel-profile-menu__text small {
  color: var(--text-gray-600) !important;
}

.oc-panel-shell .panel-content :is(
  [class*="shortcut-hint"],
  .oc-page-shortcut-hint,
  .oc-dialog-shortcut-hint,
  .one-dialog-shortcut-menu,
  .portal-payment-notice-workspace__header-shortcuts
) {
  display: none !important;
}

.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__toolbar-row > div {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) auto !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__toolbar-row > div > .ml-auto {
  margin-left: 0 !important;
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__search,
.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__search:focus-within {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  height: auto !important;
}

.oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__search-input {
  width: 100% !important;
  height: 40px !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 10px !important;
  background: var(--input-background) !important;
  box-shadow: none !important;
  padding-left: 2.55rem !important;
  padding-right: 2.55rem !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell {
  width: min(960px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
}

.oc-panel-shell .oc-dialog__body.portal-dialog-body {
  padding: 1rem 1.15rem 1.1rem !important;
  display: grid !important;
  gap: 0.95rem !important;
  align-content: start !important;
  grid-auto-rows: min-content !important;
}

.oc-panel-shell .oc-dialog__body.portal-dialog-body .portal-dialog-topline {
  display: none !important;
}

.oc-panel-shell .oc-dialog__body.portal-dialog-body > .oc-dialog-form {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 0.72rem 0.9rem !important;
}

.oc-panel-shell .oc-dialog.portal-payment-notice-dialog .portal-payment-notice-form .oc-dialog-field,
.oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form .oc-dialog-field {
  grid-column: 1 / -1 !important;
}

.oc-panel-shell .oc-dialog.portal-payment-notice-dialog .portal-payment-notice-form .portal-payment-notice-field--amount,
.oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form .portal-billing-field--amount,
.oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form .portal-billing-field--line-description {
  grid-column: span 8 !important;
}

.oc-panel-shell .oc-dialog.portal-payment-notice-dialog .portal-payment-notice-form .portal-payment-notice-field--currency,
.oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form .portal-billing-field--currency,
.oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form .portal-billing-field--due-days {
  grid-column: span 4 !important;
}

.oc-panel-shell .oc-dialog.portal-accounting-dialog .portal-accounting-dialog-form .oc-dialog-field {
  grid-column: span 6 !important;
}

.oc-panel-shell .oc-dialog.portal-accounting-dialog .portal-accounting-dialog-form .oc-dialog-field.col-span-2 {
  grid-column: 1 / -1 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .oc-dialog__footer-actions,
.oc-panel-shell .oc-dialog.portal-dialog-shell .oc-dialog__footer-actions--split {
  align-items: center !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .oc-dialog__footer-right,
.oc-panel-shell .oc-dialog.portal-dialog-shell .oc-dialog__footer-right .oc-dialog-form__actions {
  margin-left: auto !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.oc-dialog--full {
  width: 100dvw !important;
  max-width: 100dvw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.oc-dialog--full .oc-dialog__header {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.oc-dialog--full .oc-dialog__body {
  min-height: 0 !important;
  overflow: auto !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.oc-dialog--full .oc-dialog__footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
}

.oc-panel-shell :is(
  .oc-topbar,
  .panel-topbar,
  .panel-sidebar,
  .panel-profile-menu__icon,
  .oc-grid-action-btn,
  .one-menu-trigger--compact-icon,
  .oc-dialog__header-btn
) :is(
  svg,
  .one-svg,
  iconify-icon,
  i,
  [class^="fa-"],
  [class*=" fa-"],
  [class^="ri-"],
  [class*=" ri-"],
  [class^="bi-"],
  [class*=" bi-"],
  [class^="icon-"],
  [class*=" icon-"]
) {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.oc-panel-shell :is(.oc-topbar__brand-mark, .oc-sidebar__brand-mark) .oc-shell-brand-heart {
  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 .portal-dashboard-v2__storage-breakdown ul {
  gap: 0 !important;
}

.oc-panel-shell .portal-dashboard-v2__storage-breakdown li {
  min-height: 2rem !important;
  padding: 0.2rem 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent) !important;
}

.oc-panel-shell .portal-dashboard-v2__storage-breakdown li:last-child {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.oc-panel-shell .portal-dashboard-v2__storage-breakdown strong {
  font-variant-numeric: tabular-nums !important;
  text-align: right !important;
}

.dark .oc-panel-shell,
:root[data-theme="dark"] .oc-panel-shell {
  --background: #151521;
  --card: #1e1e2d;
  --accent: #2b2b40;
  --border: #2f324a;
  --input-background: #242539;
  --input-border: #3b3f5c;
  --text-dark: #f5f8fa;
  --text-gray-800: #d1d3e0;
  --text-gray-700: #b4b8cc;
  --text-gray-600: #9ca2bb;
  --text-gray-500: #7f86a8;
}

.dark .oc-panel-shell :is(.panel-topbar, .panel-sidebar),
:root[data-theme="dark"] .oc-panel-shell :is(.panel-topbar, .panel-sidebar) {
  border-color: var(--border) !important;
}

.dark .oc-panel-shell .panel-content :is(
  .portal-surface-card,
  .portal-section-card,
  .one-grid__card,
  .oc-page-header,
  .oc-dialog,
  .oc-dialog__header,
  .oc-dialog__body,
  .oc-dialog__footer
),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(
  .portal-surface-card,
  .portal-section-card,
  .one-grid__card,
  .oc-page-header,
  .oc-dialog,
  .oc-dialog__header,
  .oc-dialog__body,
  .oc-dialog__footer
) {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

.dark .oc-panel-shell .panel-content :is(
  .portal-surface-card__title,
  .oc-page-header-text h1,
  .one-grid__td,
  .oc-input,
  .oc-select,
  .oc-textarea
),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(
  .portal-surface-card__title,
  .oc-page-header-text h1,
  .one-grid__td,
  .oc-input,
  .oc-select,
  .oc-textarea
) {
  color: var(--text-dark) !important;
}

.dark .oc-panel-shell .panel-content :is(
  .portal-surface-card__description,
  .oc-page-header-text p,
  .one-grid__th,
  .oc-input::placeholder,
  .oc-textarea::placeholder
),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(
  .portal-surface-card__description,
  .oc-page-header-text p,
  .one-grid__th,
  .oc-input::placeholder,
  .oc-textarea::placeholder
) {
  color: var(--text-gray-600) !important;
  opacity: 1 !important;
}

@media (max-width: 1200px) {
  .oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__toolbar-row > div {
    grid-template-columns: 1fr !important;
  }

  .oc-panel-shell .panel-content :is(.oc-data-grid, .portal-grid-table) .one-grid__toolbar-row > div > .ml-auto {
    justify-self: start !important;
  }
}

@media (max-width: 980px) {
  .oc-panel-shell .oc-dialog.portal-payment-notice-dialog .portal-payment-notice-form :is(
    .portal-payment-notice-field--amount,
    .portal-payment-notice-field--currency,
    .portal-payment-notice-field--paid-date,
    .portal-payment-notice-field--reference,
    .oc-dialog-field
  ),
  .oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form :is(
    .portal-billing-field--amount,
    .portal-billing-field--currency,
    .portal-billing-field--due-days,
    .portal-billing-field--line-description,
    .oc-dialog-field
  ),
  .oc-panel-shell .oc-dialog.portal-accounting-dialog .portal-accounting-dialog-form .oc-dialog-field {
    grid-column: 1 / -1 !important;
  }
}