/* ================================================================
   PSE_Backend — Global Application Styles
   Best practices: MudBlazor + Blazor Server
   ================================================================ */

/* ---- Design Tokens ------------------------------------------- */
:root {
  --app-radius-xs:   4px;
  --app-radius-sm:   8px;
  --app-radius-md:   12px;
  --app-radius-lg:   16px;
  --app-radius-xl:   24px;
  --app-radius-pill: 9999px;

  --app-ease-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --app-ease-in:   cubic-bezier(0.4, 0, 1,   1);
  --app-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  --app-dur-fast:  140ms;
  --app-dur-base:  240ms;
  --app-dur-slow:  380ms;

  --app-shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --app-shadow-md:    0 4px 14px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
  --app-shadow-lg:    0 10px 30px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
  --app-shadow-color: color-mix(in srgb, var(--mud-palette-primary, #6366F1) 22%, transparent);
  --app-shadow-glow:  0 16px 42px var(--app-shadow-color), 0 4px 12px var(--app-shadow-color);
}

/* ---- Keyframes ----------------------------------------------- */
@keyframes app-fade-in-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes app-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes app-slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0);    }
}

@keyframes app-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1);    }
}

@keyframes app-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/* ---- Base ---------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Page Content Entrance ----------------------------------- */
/* Opacity-only: a translateY entrance leaves a lingering transform on
   .mud-main-content, which would make it the containing block for the
   fixed dialog/overlay container and break full-viewport positioning
   (dialogs get clipped at the top, tab bars become unreachable). */
.mud-main-content {
  animation: app-fade-in var(--app-dur-slow) var(--app-ease-out) both;
  /* AppBar is 64px; add breathing room so the first row doesn't stick to it.
     The MainLayout still sets pt-16 (=64px) as a fallback; this refines it. */
  padding-top: calc(64px + 24px) !important;
}

/* ---- MudBlazor: AppBar --------------------------------------- */
.mud-appbar {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

/* ---- MudBlazor: Drawer --------------------------------------- */
.mud-drawer {
  transition: width var(--app-dur-slow) var(--app-ease-out),
              transform var(--app-dur-slow) var(--app-ease-out) !important;
}

/* ---- MudBlazor: Cards --------------------------------------- */
.mud-card {
  border-radius: var(--app-radius-lg) !important;
  box-shadow: var(--app-shadow-md) !important;
  transition: transform var(--app-dur-base) var(--app-ease-out),
              box-shadow var(--app-dur-base) var(--app-ease-out) !important;
}

.mud-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--app-shadow-glow) !important;
}

/* ---- MudBlazor: Paper ---------------------------------------- */
.mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-menu-paper) {
  border-radius: var(--app-radius-md) !important;
}

/* ---- MudBlazor: Buttons ------------------------------------- */
.mud-button-root.mud-button {
  border-radius: var(--app-radius-sm) !important;
  transition: transform       var(--app-dur-fast) var(--app-ease-out),
              box-shadow      var(--app-dur-fast) var(--app-ease-out),
              background-color var(--app-dur-fast) var(--app-ease-out),
              filter           var(--app-dur-fast) var(--app-ease-out) !important;
}

.mud-button-root.mud-button:hover {
  filter: brightness(1.06);
}

.mud-button-root.mud-button:active {
  transform: scale(0.96);
}

.mud-button-root.mud-icon-button {
  border-radius: var(--app-radius-pill) !important;
  transition: background-color var(--app-dur-fast) var(--app-ease-out),
              transform        var(--app-dur-fast) var(--app-ease-back) !important;
}

.mud-button-root.mud-icon-button:hover {
  transform: scale(1.10);
}

.mud-button-root.mud-icon-button:active {
  transform: scale(0.94);
}

/* FAB */
.mud-button-root.mud-fab {
  border-radius: var(--app-radius-xl) !important;
  transition: transform var(--app-dur-base) var(--app-ease-back),
              box-shadow var(--app-dur-base) var(--app-ease-out) !important;
}

.mud-button-root.mud-fab:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: var(--app-shadow-glow) !important;
}

/* ---- MudBlazor: Chips --------------------------------------- */
.mud-chip-root {
  border-radius: var(--app-radius-pill) !important;
  transition: transform var(--app-dur-fast) var(--app-ease-back),
              box-shadow var(--app-dur-fast) var(--app-ease-out) !important;
}

.mud-chip-root:hover {
  transform: translateY(-2px);
  box-shadow: var(--app-shadow-sm) !important;
}

/* ---- MudBlazor: Inputs -------------------------------------- */
.mud-input-outlined .mud-notched-outline {
  border-radius: var(--app-radius-sm) !important;
  transition: border-color var(--app-dur-fast) var(--app-ease-out),
              box-shadow   var(--app-dur-fast) var(--app-ease-out) !important;
}

.mud-input-outlined:focus-within .mud-notched-outline {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary, #6366F1) 18%, transparent);
}

.mud-input-filled {
  border-radius: var(--app-radius-sm) var(--app-radius-sm) 0 0 !important;
}

/* ---- MudBlazor: Popover / Dropdown -------------------------- */
.mud-popover-paper {
  border-radius: var(--app-radius-md) !important;
  box-shadow: var(--app-shadow-lg) !important;
  animation: app-scale-in var(--app-dur-fast) var(--app-ease-out) both !important;
}

/* ---- MudBlazor: Alerts -------------------------------------- */
.mud-alert {
  border-radius: var(--app-radius-md) !important;
  animation: app-fade-in var(--app-dur-base) var(--app-ease-out) both;
}

/* ---- MudBlazor: Snackbar ------------------------------------ */
.mud-snackbar {
  border-radius: var(--app-radius-md) !important;
  box-shadow: var(--app-shadow-lg) !important;
  animation: app-slide-in-right var(--app-dur-base) var(--app-ease-out) both !important;
}

/* ---- MudBlazor: Dialog -------------------------------------- */
.mud-dialog {
  border-radius: var(--app-radius-xl) !important;
  box-shadow: var(--app-shadow-lg) !important;
  animation: app-scale-in var(--app-dur-base) var(--app-ease-out) both !important;
}

/* ---- MudBlazor: Table --------------------------------------- */
.mud-table-root {
  border-radius: var(--app-radius-lg) !important;
  overflow: hidden;
}

.mud-table-head .mud-table-cell {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.mud-table-body .mud-table-row {
  transition: background-color var(--app-dur-fast) var(--app-ease-out) !important;
}

/* ---- MudBlazor: Tabs ---------------------------------------- */
.mud-tab-panel {
  animation: app-fade-in-up var(--app-dur-base) var(--app-ease-out) both;
}

.mud-tab {
  border-radius: var(--app-radius-sm) var(--app-radius-sm) 0 0 !important;
  transition: background-color var(--app-dur-fast) var(--app-ease-out) !important;
}

/* ---- MudBlazor: Nav Links ----------------------------------- */
.mud-nav-link {
  border-radius: var(--app-radius-sm) !important;
  margin: 2px 8px !important;
  transition: background-color var(--app-dur-fast) var(--app-ease-out),
              color            var(--app-dur-fast) var(--app-ease-out),
              padding-left     var(--app-dur-fast) var(--app-ease-out) !important;
}

.mud-nav-link:hover:not(.active) {
  padding-left: 18px !important;
}

/* ---- MudBlazor: Skeleton ------------------------------------ */
.mud-skeleton {
  border-radius: var(--app-radius-sm) !important;
  animation: app-shimmer 1.6s linear infinite !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--mud-palette-primary, #6366F1) 6%, var(--mud-palette-background, #F8FAFC)) 25%,
    color-mix(in srgb, var(--mud-palette-primary, #6366F1) 14%, var(--mud-palette-background, #F8FAFC)) 50%,
    color-mix(in srgb, var(--mud-palette-primary, #6366F1) 6%, var(--mud-palette-background, #F8FAFC)) 75%
  ) !important;
  background-size: 800px 100% !important;
}

/* ---- MudBlazor: Tooltip ------------------------------------- */
.mud-tooltip {
  border-radius: var(--app-radius-xs) !important;
  font-size: 0.8125rem !important;
  animation: app-fade-in var(--app-dur-fast) var(--app-ease-out) both !important;
}

/* ---- Blazor Error UI ---------------------------------------- */
#blazor-error-ui {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b;
  border-radius: var(--app-radius-md);
  bottom: 1.5rem;
  box-shadow: var(--app-shadow-md);
  color: #78350f;
  display: none;
  font-size: 0.875rem;
  font-weight: 500;
  left: 50%;
  padding: 0.875rem 1.5rem;
  position: fixed;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 1400;
  animation: app-fade-in-up var(--app-dur-base) var(--app-ease-out) both;
}

#blazor-error-ui .reload {
  color: #92400e;
  font-weight: 600;
  margin-left: 0.5rem;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  font-size: 0.75rem;
  margin-left: 1rem;
  opacity: 0.65;
  transition: opacity var(--app-dur-fast) var(--app-ease-out);
}

#blazor-error-ui .dismiss:hover {
  opacity: 1;
}

/* ---- Nav logout button (form > button) ---------------------- */
.mud-nav-menu form > button.mud-nav-link {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  color: inherit;
}

/* ---- Custom Scrollbar --------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--mud-palette-primary, #6366F1) 28%, transparent);
  border-radius: var(--app-radius-pill);
  transition: background var(--app-dur-fast) var(--app-ease-out);
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--mud-palette-primary, #6366F1) 55%, transparent);
}

/* ---- Focus Rings (Accessibility) ---------------------------- */
:focus-visible {
  outline: 2px solid var(--mud-palette-primary, #6366F1);
  outline-offset: 2px;
  border-radius: var(--app-radius-xs);
  transition: outline-offset var(--app-dur-fast) var(--app-ease-out);
}

/* ================================================================
   PSE DESIGN SYSTEM — Phase 3 Components
   ================================================================ */

/* ---- Sidebar Nav -------------------------------------------- */
.pse-nav-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.pse-nav-content {
  flex: 1;
}

.pse-nav-footer {
  margin-top: auto;
  flex-shrink: 0;
}

.pse-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 6px;
}

.pse-nav-brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(99,102,241,0.5);
  flex-shrink: 0;
  letter-spacing: -0.03em;
}

.pse-nav-brand-name {
  font-weight: 700;
  font-size: 1rem;
  color: white;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.pse-nav-brand-sub {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pse-nav-section {
  padding: 10px 16px 3px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}

.pse-nav-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 4px;
}

.pse-nav-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(99,102,241,0.7), rgba(139,92,246,0.7));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.2);
}

.pse-nav-user-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pse-nav-user-role {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
}

.pse-nav-logout-form {
  margin: 0;
  padding: 0 8px 12px;
}

.pse-nav-logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--app-radius-sm);
  color: rgba(252,165,165,0.9);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--app-dur-fast) ease, border-color var(--app-dur-fast) ease;
  text-align: left;
}

.pse-nav-logout-btn:hover {
  background: rgba(239,68,68,0.22);
  border-color: rgba(239,68,68,0.45);
  color: #fca5a5;
}

/* Dark sidebar nav link overrides */
.mud-drawer .mud-nav-link {
  color: rgba(203,213,225,0.78) !important;
  border-radius: var(--app-radius-sm) !important;
  margin: 1px 8px !important;
  transition: background var(--app-dur-fast) ease, color var(--app-dur-fast) ease !important;
}

.mud-drawer .mud-nav-link:hover {
  background: rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.95) !important;
  padding-left: 18px !important;
}

.mud-drawer .mud-nav-link.active {
  background: rgba(99,102,241,0.22) !important;
  color: white !important;
  box-shadow: inset 3px 0 0 #818CF8 !important;
}

.mud-drawer .mud-icon-root {
  color: inherit !important;
}

/* The dialog/popover providers render inside .mud-main-content (via
   PageProviders), which is offset by the drawer width. That offsets the
   dialog overlay + container so they only cover the content area — the
   dialog mis-centers and the drawer stays undimmed on top of its left
   edge. Force them back to the true viewport so dialogs center over
   everything and the scrim dims the drawer too. */
.mud-dialog-container,
.mud-overlay-dialog {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
}

/* ---- Dialog: keep within viewport & scroll content ---------- */
/* Without a height cap, tall dialogs (tabs + map + gallery) center
   vertically and push their top — including the tab bar — above the
   viewport behind the AppBar, making tabs unreachable. Cap height and
   let the content area scroll instead. */
.mud-dialog {
  max-height: calc(100vh - 48px) !important;
  display: flex;
  flex-direction: column;
}

.mud-dialog > .mud-dialog-content {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* Let the gradient header sit flush to the dialog edges. */
.mud-dialog-title:has(.pse-dialog-header) {
  padding: 0 !important;
}

/* Keep the tab bar pinned while the panel content scrolls. */
.mud-dialog .mud-dialog-content .mud-tabs-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--mud-palette-surface, #ffffff);
}

/* Breathing room so the first field doesn't stick to the tab bar / header. */
.mud-dialog .mud-tab-panel {
  padding-top: 12px;
}

/* ---- Dialog Header ------------------------------------------ */
.pse-dialog-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px 18px;
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  position: relative;
  overflow: hidden;
}

.pse-dialog-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -8%;
  width: 180px;
  height: 180px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  pointer-events: none;
}

.pse-dialog-header::after {
  content: '';
  position: absolute;
  bottom: -70%;
  right: 22%;
  width: 130px;
  height: 130px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
  pointer-events: none;
}

.pse-dialog-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.45);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.pse-dialog-avatar-fallback {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  position: relative;
  z-index: 1;
  letter-spacing: -0.03em;
}

.pse-dialog-logo {
  width: 130px;
  height: 65px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.35);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.pse-dialog-logo-fallback {
  width: 130px;
  height: 65px;
  border-radius: 10px;
  background: rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,0.25);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.pse-dialog-header-info {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.pse-dialog-header-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: white;
  margin: 0 0 3px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.pse-dialog-header-sub {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.82);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pse-dialog-header-sub2 {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.58);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pse-dialog-header-badges {
  display: flex;
  gap: 6px;
  margin-top: 9px;
  flex-wrap: wrap;
}

.pse-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pse-badge-success {
  background: rgba(16,185,129,0.28);
  color: #6ee7b7;
  border: 1px solid rgba(16,185,129,0.45);
}

.pse-badge-error {
  background: rgba(239,68,68,0.28);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.45);
}

.pse-badge-neutral {
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.22);
}

/* ---- Masonry Gallery ---------------------------------------- */
.pse-masonry {
  column-count: 3;
  column-gap: 10px;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .pse-masonry { column-count: 2; }
}

@media (max-width: 480px) {
  .pse-masonry { column-count: 1; }
}

.pse-masonry-item {
  break-inside: avoid;
  margin-bottom: 10px;
  position: relative;
  border-radius: var(--app-radius-sm);
  overflow: hidden;
  cursor: zoom-in;
}

.pse-masonry-img {
  width: 100%;
  display: block;
  border-radius: var(--app-radius-sm);
  transition: transform 0.22s ease;
}

.pse-masonry-item:hover .pse-masonry-img {
  transform: scale(1.03);
}

.pse-masonry-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.42);
  opacity: 0;
  transition: opacity 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--app-radius-sm);
  z-index: 1;
}

.pse-masonry-item:hover .pse-masonry-overlay {
  opacity: 1;
}

.pse-masonry-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  border: 2px dashed rgba(0,0,0,0.1);
  border-radius: var(--app-radius-md);
  color: rgba(0,0,0,0.28);
  gap: 8px;
}

/* ---- Map View ----------------------------------------------- */
.pse-map-frame {
  width: 100%;
  height: 280px;
  border-radius: var(--app-radius-md);
  border: 1px solid rgba(0,0,0,0.1);
  overflow: hidden;
  box-shadow: var(--app-shadow-sm);
}

.pse-map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 160px;
  border: 2px dashed rgba(0,0,0,0.12);
  border-radius: var(--app-radius-md);
  color: rgba(0,0,0,0.3);
  gap: 8px;
  margin-top: 8px;
}

.pse-map-unconfigured {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(245,158,11,0.07);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: var(--app-radius-sm);
  margin-top: 8px;
}

.pse-maps-search-box {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: var(--app-radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  background: #fff;
  transition: border-color var(--app-dur-fast) ease, box-shadow var(--app-dur-fast) ease;
  color: #1E293B;
}

.pse-maps-search-box:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}

.pse-maps-search-box::placeholder {
  color: rgba(0,0,0,0.38);
}

/* ---- Page Header -------------------------------------------- */
.pse-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.pse-page-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pse-page-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 14px rgba(99,102,241,0.38);
  flex-shrink: 0;
}

.pse-page-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #1E293B;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

.pse-page-subtitle {
  font-size: 0.84rem;
  color: #64748B;
  margin: 2px 0 0;
}

.pse-page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 4px;
}

/* ---- Table Row Avatar --------------------------------------- */
.pse-row-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pse-row-thumb {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.08);
}

.pse-row-thumb-round {
  border-radius: 50%;
}

.pse-row-initials {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(99,102,241,0.12);
  color: #6366F1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.pse-row-initials-round {
  border-radius: 50%;
}