/*
 * PicsCollab Global Styles
 * 
 * This file contains global styles that should be applied across all PicsCollab applications:
 * - MudBlazor component overrides
 * - PicsCollab custom component styling
 * - Global utility classes
 * - Validation and form styling
 */

.pc-elevation-1 {
  box-shadow: 1px 1px 15px 0 rgba(0, 0, 0, 0.10);
}

.mud-slider.mud-slider-large .mud-slider-input::-webkit-slider-runnable-track {
  height: 6px;
  margin: 10px 0
}

.mud-slider.mud-slider-large .mud-slider-input::-moz-range-track {
  height: 6px;
  margin: 10px 0
}

.mud-slider.mud-slider-large .mud-slider-input::-webkit-slider-thumb {
  height: 2px;
  width: 2px;
  margin-top: 2px;
  transform: scale(4, 4)
}

.mud-slider.mud-slider-large .mud-slider-input::-webkit-slider-thumb {
  height: 2px;
  width: 2px;
  margin-top: 2px;
  transform: scale(4, 4)
}

.mud-slider.mud-slider-secondary .mud-slider-input::-webkit-slider-runnable-track {
  background-color: rgba(var(--mud-palette-secondary-rgb), 0.3)
}

.mud-slider.mud-slider-secondary .mud-slider-input::-moz-range-track {
  background-color: rgba(var(--mud-palette-secondary-rgb), 0.3)
}

.mud-slider.mud-slider-secondary .mud-slider-filled {
  background-color: var(--mud-palette-secondary)
}

.mud-slider.mud-slider-secondary .mud-slider-track-tick {
  background-color: var(--mud-palette-secondary)
}

/* ============================================
   BATCH 1: Component Base Overrides (Lines 1-200)
   ============================================ */

/* PicsCollab Checkbox Circle Component */
.pc-check-box-circle circle {
  fill: var(--mud-palette-surface);
  opacity: 1;
}

/* US-225 Bucket 4: MudBlazor 9 dropped the `.mud-checkbox-false` modifier class;
   the unchecked state is now everything that doesn't carry `.mud-checked`. */
.pc-check-box-circle .mud-checkbox:not(.mud-checked) .mud-icon-root {
  fill: var(--mud-palette-secondary);
}

/* Checked: the CheckCircle glyph punches the tick out as transparent, so over a
   photo the tick reads as a muddy/grey shape. Paint a white disc *behind* the
   glyph so the tick shows white. The glyph's disc radius is 10 of its 24 viewBox
   = ~83% of the icon's half-width, so size the white disc to match (closest-side
   keeps it correct at any icon size) — the secondary fill then reaches the edge
   with no white ring (bug 1376). */
.pc-check-box-circle .mud-checkbox.mud-checked .mud-icon-root {
  background: radial-gradient(circle closest-side at center, #fff 0, #fff 83%, transparent 84%);
}

/* MudBlazor Snackbar Overrides */
.mud-snackbar.mud-alert-filled-info {
  background-color: #cceef3;
  color: #158ebe;
  border: 1px solid #158ebe;
  box-shadow: none;
}

.mud-snackbar.mud-alert-filled-success {
  background-color: #dbf1d7;
  color: #1e9b6e;
  border: 1px solid #1e9b6e;
  box-shadow: none;
}

.mud-snackbar.mud-alert-filled-warning {
  background-color: #ffefbf;
  color: #bb8838;
  border: 1px solid #bb8838;
  box-shadow: none;
}

.mud-snackbar.mud-alert-filled-error {
  background-color: #f8c8c8;
  color: #e6575a;
  border: 1px solid #e6575a;
  box-shadow: none;
}

/* MudBlazor Breadcrumbs Overrides */
ol.mud-breadcrumbs {
  padding: 0px;
}

.mud-breadcrumbs a {
  color: var(--mud-palette-primary);
  font-weight: 350;
}

.mud-breadcrumbs .mud-breadcrumb-item.mud-disabled > a {
  color: var(--mud-palette-primary);
  font-weight: 500;
}

.mud-breadcrumbs .mud-icon-size-small.mud-icon-root {
  font-size: 17px;
}

/* MudBlazor Input Overrides */
.mud-input.mud-input-outlined > input.mud-input-root-outlined, 
.mud-select div.mud-input-slot.mud-input-root-outlined,
.mud-input.mud-input-outlined > textarea.mud-input-root-outlined {
  padding: 8px 16px;
  font-size: 0.875rem;
}

.mud-input.mud-input-outlined > textarea.mud-input-root-outlined {
  margin-top: 0px;
}

.mud-input.mud-input-outlined > textarea.mud-input-root-outlined {
  mask-image: linear-gradient(to bottom, transparent 8px, black 8px)
}

/* MudBlazor 9.5 keeps `.mud-shrink` as the wrapper-level state class on inputs;
   `.mud-input-label-shrink` is a SEPARATE class applied only to the LABEL's
   transform. A previous post-sweep "rename" pointed this rule at the label
   element, which has no `.mud-input-outlined-border` child — making the
   second selector match nothing. Verified against MudBlazor.min.css v9.5.0. */
.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-shrink > .mud-input-outlined-border {
  border-color: var(--mud-palette-secondary);
}

/* Global Typography */
strong, b {
  font-weight: 500;
}

/* MudBlazor Button Overrides */
.mud-button.mud-button-filled {
  box-shadow: unset;
  padding: 2px 16px;
  /* Consistent height for all filled buttons — icon-only filled buttons (e.g. MudIconButton
     Variant.Filled) otherwise render shorter (22px) than text filled buttons (26px). */
  min-height: 27px;
}

.mud-button.mud-button-text {
  padding: 2px 0px;
}

.mud-button.mud-button-text .mud-button-label {
  justify-content: flex-start;
}

.mud-button.mud-button-root {
  letter-spacing: 0em;
  line-height: 22px;
}

.mud-button.mud-button-text.mud-button-text-secondary:hover {
  background-color: initial;
}

.mud-button.mud-button-text.mud-button-text-error:hover {
  background-color: initial;
}

.mud-button-root.mud-button:disabled {
  color: var(--mud-palette-tertiary) !important;
}

.mud-button {
  padding: 2px 16px;
}

.mud-button.mud-button-outlined {
  padding: 2px 16px;
  height: 26px;
}

.mud-button .mud-button-label .mud-button-icon-start {
  margin-left: 0px;
  margin-right: 4px;
  margin-inline-start: 0px;
  margin-inline-end: 4px;
}

/* MudBlazor Menu Overrides */
.mud-menu-item {
  padding: 1px 16px;
  border-radius: var(--mud-default-borderradius);
}

.mud-menu .mud-icon-button {
  padding: 4px;
}

div.mud-list.mud-menu-list {
  background-color: var(--mud-palette-surface);
  border-radius: var(--mud-default-borderradius);
  padding: 16px 8px;
}

.pc-color-error.mud-menu-item > .mud-icon-root {
  color: var(--mud-palette-error);
}

/* Menu Icon Styling */
.mud-menu .mud-icon-button .mud-icon-root {
  font-size: 10px;
  color: var(--mud-palette-tertiary);
}

.mud-menu .mud-button.mud-button-outlined {
  font-weight: 300;
  border: 1px solid var(--mud-palette-dark);
}

.mud-menu .mud-button.mud-button-outlined .mud-icon-root {
  fill: var(--mud-palette-tertiary);
}

/* MudBlazor Icon Size Overrides */
.mud-icon-size-small.mud-icon-root {
  font-size: 1rem;
}

.mud-icon-size-medium.mud-icon-root {
  font-size: 1.125rem;
}

/* Mini-drawer collapsed label hide (bug #1395)
   MudBlazor's built-in rule that hides nav-link text in a collapsed mini drawer uses
   direct-child combinators (.mud-drawer--closed.mud-drawer-mini > .mud-drawer-content > .mud-navmenu ...).
   WebApp's AdminNavMenu wraps <MudNavMenu> in a <div class="admin-nav"> (the scope anchor
   for its ::deep .no-collapse rule), which sits between .mud-drawer-content and .mud-navmenu
   and breaks that chain — so collapsed labels were shown truncated instead of hidden. Re-apply
   the hide with a descendant combinator so it tolerates the wrapper. The .mud-drawer--closed
   gate is required: .mud-drawer-mini is present in both states (it's the variant marker), so
   without it the icon'd top-level labels would also be hidden while the drawer is expanded. */
.mud-drawer--closed.mud-drawer-mini .mud-navmenu .mud-nav-link .mud-icon-root:first-child + .mud-nav-link-text {
  display: none;
}

/* MudBlazor Toggle Item Overrides */
.mud-toggle-item {
  padding: 0px 12px;
}

/* PicsCollab Checkbox Padding Utilities */
.pc-checkbox-pa-1 .mud-checkbox > .mud-button-root.mud-icon-button {
  padding: 4px;
}

.pc-checkbox-pa-2 .mud-checkbox > .mud-button-root.mud-icon-button {
  padding: 8px;
}

/* PicsCollab Utility Classes */
.pc-width-20-px {
  width: 20px;
}

/* MudBlazor Switch Component Overrides — for MudExtensions.MudSwitchM3
   (CodeBeam.MudBlazor.Extensions package). PcSwitch wraps this M3 variant,
   NOT upstream MudBlazor's MudSwitch, so the classes carry a `-m3` suffix.
   Verified against CodeBeam.MudBlazor.Extensions 9.1.0's MudExtensions.min.css.
   These overrides resize the track + thumb to a smaller pill (34x20 / 13x13),
   force the track default fill to var(--mud-palette-info) so an OFF switch
   is visible against the page background, and keep the thumb white in both
   states. The translate-X adjustment compensates for the resized geometry. */
span.mud-switch-button-m3 .mud-switch-thumb-m3.mud-switch-thumb-tertiary-m3 {
  background-color: #FFFFFF;
}

span.mud-switch-base-m3.mud-checked .mud-switch-thumb-m3 {
  background-color: #FFFFFF;
}

span.mud-switch-base-m3 {
  padding-inline-start: 4px;
}

.mud-switch-span-m3.mud-switch-child-content-m3 {
  margin-inline-end: 0px;
}

.mud-switch-m3 {
  display: initial;
  margin-right: 4px;
}

.mud-switch-button-m3 span.mud-switch-thumb-m3 {
  width: 13px;
  height: 13px;
  background-color: var(--mud-palette-background);
}

.mud-switch-base-m3.mud-checked span.mud-switch-thumb-m3 {
  width: 13px;
  height: 13px;
}

span.mud-switch-span-m3 {
  width: 34px;
  height: 20px;
}

.mud-switch-span-m3 span.mud-switch-track-m3 {
  background-color: var(--mud-palette-info);
  width: 34px;
  height: 20px;
}

span.mud-switch-base-m3.mud-checked {
  transform: translateX(14px);
}

/* PicsCollab Color Utilities */
.mud-list-item-clickable.pc-color-error {
  color: var(--mud-palette-error);
}

/* ============================================
   BATCH 2: Advanced Components (Lines 201-400)
   ============================================ */

/* MudBlazor Tooltip Overrides */
/* US-225 Bucket 4: MudBlazor 9 removed the `.mud-popover-provider` wrapper.
   Tooltips now mount under `.mud-popover` directly; drop the prefix selector. */
.mud-tooltip.mud-tooltip-default {
  background-color: var(--mud-palette-surface);
  border-width: 1px;
  border-color: var(--mud-palette-dark);
  color: var(--mud-palette-text-primary);
  max-width: 500px;
  text-align: left;
}

/* MudBlazor Picker Popover Overrides */
/* MudPicker sizes its popover to match the input element's width. When the
   input is narrowed via Style="width: ..." the calendar dropdown gets clipped.
   Force the picker popover to use its natural content width.
   US-225 Bucket 4: MudBlazor 9 removed the outer `.mud-picker-popover`
   wrapper; only `.mud-picker-popover-paper` remains. */
.mud-picker-popover-paper {
  min-width: max-content;
}

.mud-tooltip.mud-tooltip-default > div {
  width: 100%;
}

/* PicsCollab Tooltip Components */
.pc-info-tooltip-close-icon {
  padding: 8px;
}

.pc-info-tooltip-close-icon .mud-icon-size-large {
  font-size: 30px;
}

/* PicsCollab Utility Classes */
.pc-vw-30 {
  width: 30vw;
}

.pc-input-border {
  border-width: 1px;
  border-radius: var(--mud-default-borderradius);
  border-color: var(--mud-palette-lines-inputs);
  border-style: solid;
}

.pc-half-divider {
  border-bottom-width: 1px;
  border-color: var(--mud-palette-lines-inputs);
  border-style: solid;
  flex: 1 1 0%;
}

/* PicsCollab Text Color Utilities */
.pcg-grey-text {
  color: var(--mud-palette-info);
}

.pcg-primary-text {
  color: var(--mud-palette-primary);
}

.pcg-secondary-text {
  color: var(--mud-palette-secondary);
}

.pcg-tertiary-text {
  color: var(--mud-palette-tertiary);
}

.pcg-overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* MudBlazor Table Overrides */
.mud-table-head > .mud-table-row > .mud-table-cell {
  vertical-align: bottom;
  min-width: 160px;
}

/* Bug #1371: the 160px header floor above forces the statistics activity-log tables (up to 8
   columns: Purchases, Downloads) past the card width, so they scrolled left-right and the last
   column (Végösszeg) was clipped. Those columns hold short dates / names / 1–3 digit counts, so
   they size cleanly to content — relax the floor for the activity-log tables and let the columns
   fill the available width. Scoped to `.activity-log-table` so other tables keep the 160px floor.
   Lives here (not in the panel's .razor.css) because the class sits on a child <MudTable> that
   never receives the panel's CSS-isolation scope, so a ::deep override there silently misses. */
.mud-table.activity-log-table {
  width: 100%;
}

.mud-table.activity-log-table .mud-table-head > .mud-table-row > .mud-table-cell {
  min-width: 0;
}

/* The original v8 selector `.mud-table-mud-check-box-filter` was verified
   against both MudBlazor v8.15.0 and v9.5.0 minified CSS + the live DOM —
   it is NOT emitted by either version. The rule was dead code in v8 and
   stays removed in v9. A previous post-sweep change "translated" it to
   `.mud-table .mud-table-head .mud-checkbox` which matched the wrong
   element entirely (the select-all checkbox in every table header) and
   added 21px of vertical padding to header rows on Orders, Clients, and
   any other MudTable with a SelectionModel. Removed entirely. */

/* Responsive Utility Classes */
@media (max-width: 960px) {
  .show-mobile {
    display: initial;
  }
  .show-desktop {
    display: none;
  }
}

@media (min-width: 961px) {
  .show-mobile {
    display: none;
  }
  .show-desktop {
    display: initial;
  }
}

/* ============================================
   CRITICAL VALIDATION & DIALOG STYLES (Lines 1500+)
   ============================================ */

/* MudTable Header Styling - Global Override */
.mud-table-container table.mud-table-root thead.mud-table-head tr.mud-table-row th.mud-table-cell {
  font-size: 0.75rem;
  color: var(--mud-palette-tertiary);
  font-weight: 400;
  text-transform: uppercase;
}

/* Sortable Headers */
.mud-table-container table.mud-table-root thead.mud-table-head tr.mud-table-row th.mud-table-cell .mud-table-sort-label {
  color: var(--mud-palette-tertiary);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
}

/* PicsCollab Input Validation Error Styling - CRITICAL */
.pc-input-error .mud-input-outlined-border {
  border-color: var(--mud-palette-error) !important;
}

.pc-input-error .mud-input-outlined:hover .mud-input-outlined-border {
  border-color: var(--mud-palette-error) !important;
}

/* US-225 Bucket 4: MudBlazor 9 split filled/outlined into mutually exclusive
   root variants (`.mud-input-root-filled` vs `.mud-input-root-outlined`); the
   composite `.mud-input-outlined-filled` no longer exists. The outlined-error
   border colour is already covered by the unqualified `.mud-input-outlined`
   selector below, so this rule is now redundant — keeping a stub so a future
   filled-variant override has the comment for context. */
.pc-input-error .mud-input-root-filled .mud-input-outlined-border {
  border-color: var(--mud-palette-error) !important;
}

.pc-input-error .mud-input-outlined:focus-within .mud-input-outlined-border {
  border-color: var(--mud-palette-error) !important;
}

.pc-input-error .mud-input-label {
  color: var(--mud-palette-error) !important;
}

.pc-input-error .mud-input-label.mud-input-label-animated {
  color: var(--mud-palette-error) !important;
}

/* US-225 Bucket 4: MudBlazor 9 renamed `.mud-input-label-inputtype` to
   `.mud-input-label-inputcontrol`. */
.pc-input-error .mud-input-label.mud-input-label-inputcontrol {
  color: var(--mud-palette-error) !important;
}

/* Focus styling for error state */
.pc-input-error .mud-input-control:focus-within .mud-input-outlined-border {
  border-color: var(--mud-palette-error) !important;
  border-width: 2px !important;
}

/* Table Styling Improvements */
.mud-table.mud-table-hover .mud-table-body .mud-table-row:hover {
  background-color: #F4FBFA !important;
}

.mud-table .mud-table-body .mud-table-row .mud-table-cell {
  padding-top: 18px;
  padding-bottom: 18px;
}

.mud-table-dense.mud-table .mud-table-body .mud-table-row .mud-table-cell {
  padding: 6px 24px 6px 16px;
}

/* Toggle Button Styling */
/* MudBlazor 9.5 still emits `.mud-toggle-item-selected` on the selected item
   (verified against MudBlazor.min.css and DOM inspection on 2026-06-05).
   The US-225 migration comment was wrong about this class being dropped —
   v9 keeps the same selector contract as v8 for toggle-item selection state. */
.mud-toggle-item:not(.mud-toggle-item-selected) {
  color: var(--mud-palette-tertiary);
  font-weight: 300;
}

/* Button Date Override */
/* MudBlazor 9.5 still emits `.mud-button-date` on the big date-display button
   inside the calendar popover (the heading-like button showing the selected
   date — uses `font-size:2.125rem;line-height:1.17`). A previous post-sweep
   "rename" to `.mud-picker-button-root` pointed at a class that doesn't exist
   in v9.5 (verified against MudBlazor.min.css), making the rule dead and
   reintroducing the line-height overflow this override was added to fix. */
.mud-button.mud-button-root.mud-button-date {
  line-height: unset;
}

/* Icon Size Utilities */
.mud-icon-size-medium.mud-icon-root.info-icon {
  font-size: 1.25rem;
}

.mud-icon-size-medium.mud-icon-root.pc-icon-size-40 {
  font-size: 40px;
}

.mud-icon-size-medium.mud-icon-root.pc-icon-size-30 {
  font-size: 30px;
}

.mud-icon-size-medium.mud-icon-root.pc-icon-size-20 {
  font-size: 20px;
}

/* Checkbox Dense Styling */
.mud-input-control-input-container .mud-checkbox .mud-checkbox-dense {
  margin-right: 8px;
  padding: 2px;
}

.mud-checkbox .mud-checkbox-dense .mud-icon-size-medium.mud-icon-root {
  font-size: 22px;
}

/* Width Utility Classes */
.w-25 {
  width: 25%;
}
.w-50 {
  width: 50%;
}
.w-75 {
  width: 75%;
}
.w-100 {
  width: 100%;
}

/* PicsCollab Dialog Size Classes - CRITICAL */
.pcg-dialog-small-width {
  max-width: 500px;
  width: 500px;
}

.pcg-dialog-medium-width {
  max-width: 850px;
  width: 850px;
}

.pcg-dialog-large-width {
  max-width: 1200px;
  width: 1200px;
}

.pcg-dialog-max-height {
  min-height: calc(100dvh - var(--mud-appbar-height));
  width: 1200px;
  max-width: 1200px;
  padding: 24px;
}

/* US-260: on phones the fixed dialog widths (500/850/1200px) overflow the viewport. Cap them so
   every PcDialog (incl. the order action dialogs — payments, refund, status, lab approval, email)
   fits a phone with a small gutter. Global + mobile-only, so desktop dialog sizing is untouched.
   (Specificity .mud-dialog.pcg-* beats the base width classes regardless of source order.) */
@media (max-width: 959px) {
  .mud-dialog.pcg-dialog-small-width,
  .mud-dialog.pcg-dialog-medium-width,
  .mud-dialog.pcg-dialog-large-width,
  .mud-dialog.pcg-dialog-max-height {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }
}

/* MudDialog Overrides - CRITICAL for PicsCollab Dialog System */
.mud-dialog .mud-dialog-content {
  padding: 0px 36px;
  margin: 0px;
}

/* US-260: tighten dialog content padding on phones (comes after the 36px base so it wins). */
@media (max-width: 959px) {
  .mud-dialog .mud-dialog-content {
    padding: 0px 16px;
  }
}

.mud-dialog .mud-dialog-actions {
  padding: 32px 36px 28px 32px;
  margin: 0px;
}

.mud-dialog .mud-dialog-title {
  padding: 0px;
  margin: 0px;
}

/* #1663: shared colour-picker dialog (ColorPickerDialog) — mirror the bare MudColorPicker
   popover: picker flush to the dialog edges (no side padding), a tight 16px bottom gutter, and
   centered action buttons. These live here (global) rather than in the component's .razor.css:
   the `.color-picker-dialog` class is passed to <MudDialog Class=...>, so it lands on the dialog
   root but NOT under the component's CSS-isolation scope — a `::deep .mud-dialog-content` block
   would silently miss and the global `.mud-dialog .mud-dialog-content` 36px padding would win. */
.mud-dialog.color-picker-dialog .mud-dialog-content {
  padding: 0;
  overflow: hidden;
  position: relative; /* anchor the absolutely-positioned close X */
}

.mud-dialog.color-picker-dialog .mud-dialog-actions {
  padding: 0 0 16px 0;
  margin: 0;
  justify-content: center;
}

/* Close X overlaid on the picker's own toolbar row (mode-switch icons sit at its right), so the
   X shares that line — matching the bare MudColorPicker popover. The 32px height + centered
   alignment mirror the toolbar so the X lines up vertically with the icons. */
.color-picker-dialog .cpd-header {
  position: absolute;
  top: 0;
  left: 0;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  z-index: 10;
}

/* MudIconButton's internal box seats the glyph ~4px below its flex-centre, so the X lands
   below the picker's mode-switch icons on the same row; nudge it up to line up with them. */
.color-picker-dialog .cpd-header .mud-button-root.mud-icon-button {
  line-height: 0;
  margin-top: -4px;
}

.color-picker-dialog .color-picker-dialog-content {
  display: flex;
  justify-content: center;
  padding: 0;
}

.color-picker-dialog .cpd-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

/* Bug #1211: email-template editor dialog (CampaignTemplateEditorDialog) — the grey email
   preview bleeds out of the content box up to the dialog top (level with the title), over to
   the right edge and down to the content bottom, while only the left editor column scrolls.
   That needs the dialog height capped and the content box to overflow visibly so the preview
   can pull up over the title row. Only above the 1100px collapse breakpoint, where the
   two-column layout is active; below it the dialog scrolls normally. */
.mud-dialog.ctd-dialog {
  max-height: calc(100dvh - 64px);
}

@media (min-width: 1101px) {
  .mud-dialog.ctd-dialog {
    overflow: hidden;
  }

  /* Pin the content box to a definite height — dialog max-height (100dvh − 64px) minus the
     fixed title container (82px) and actions row (86px) heights set above — so the .ctd-*
     percentage heights resolve and the content does not grow with a tall email preview.
     `overflow: visible` lets the preview column pull up over the title row (its grey bleed). */
  .mud-dialog.ctd-dialog .mud-dialog-content {
    height: calc(100dvh - 232px);
    max-height: calc(100dvh - 232px);
    overflow: visible;
  }
}

/* US-237: the ad-hoc send dialog (AdHocEmailSendDialog) shares the template editor's two-pane
   editor+preview layout, so it gets the identical capped-height + independent-column-scroll
   treatment as .ctd-dialog above (bug #1211): the dialog itself never scrolls; the settings
   column and the preview pane scroll independently and the preview bleeds up over the title row. */
.mud-dialog.aesd-dialog {
  max-height: calc(100dvh - 64px);
}

@media (min-width: 1101px) {
  .mud-dialog.aesd-dialog {
    overflow: hidden;
  }

  .mud-dialog.aesd-dialog .mud-dialog-content {
    height: calc(100dvh - 232px);
    max-height: calc(100dvh - 232px);
    overflow: visible;
  }
}

/* Bug #1411: after the send completes the dialog hosts only the compact result panel
   (EmailSendResultPanel → .esrp-root), not the two-pane editor. The large width + forced
   full-height content above are sized for the editor and leave a near-fullscreen popup around a
   single success line. MudBlazor captures the dialog root's class once at open and does not
   re-apply it when the inner <MudDialog> Size/Class flips, so we collapse it in CSS instead,
   keyed off the result panel's presence. Wins on specificity over .pcg-dialog-large-width. */
.mud-dialog.aesd-dialog:has(.esrp-root) {
  width: 500px;
  max-width: 500px;
  overflow: visible;
}

.mud-dialog.aesd-dialog:has(.esrp-root) .mud-dialog-content {
  height: auto;
  max-height: none;
}

/* PicsCollab Dialog Components - CRITICAL */
.pc-dialog-title-container {
  padding: 36px 36px 24px 36px;
  margin: 0px;
  position: relative;
}

.pc-dialog-title-cancel {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1410;
}

.pc-dialog-title-cancel .mud-icon-button {
  padding: 8px;
}

.pc-dialog-title-cancel .mud-icon-size-medium.mud-icon-root {
  font-size: 20px;
}

/* Position Utilities */
.pc-tr-0 {
    top: 0px;
    right: 0px;
}

.pc-tr-2 {
  top: 8px;
  right: 8px;
}

.pc-tr-4 {
    top: 16px;
    right: 16px;
}

/* ============================================
   ADDITIONAL FORM & UTILITY STYLES
   ============================================ */

/* Button Loading Indicator */
.cyp-button-loader {
  margin-inline-start: 8px;
}

/* Input Label Background Fixes */
.mud-input-control-input-container > .mud-input-label-outlined {
  background-color: var(--mud-palette-background);
}

.surface-white.mud-paper .mud-input-control-input-container > .mud-input-label-outlined {
  background-color: var(--mud-palette-info);
}

/* Aspect Ratio Utilities */
.cyp-img-no-reflow-16-9-300 {
  --aspect-ratio: 16/9;
  width: 300px;
}

@media (max-width: 960px) {
  .cyp-img-no-reflow-16-9-300 {
    width: 100%;
  }
}

.cyp-img-no-reflow-16-9 {
  --aspect-ratio: 16/9;
  width: 100%;
}

/* Modern CSS Aspect Ratio Support */
@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }

  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }
  
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
}

/* ============================================
   GLOBAL LOADER STYLES
   ============================================ */

/* PicsCollab Application Loader */
.cyp-loader-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2300;
  height: 100vh;
  width: 100vw;
  background-color: var(--mud-palette-background);
  display: flex;
  justify-content: center;
  align-items: center;
}

.css-loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  width: 40px;
  margin: auto auto;
  position: relative;
}

.css-loader-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.css-loader-circle-yellow {
  background-color: #fcc231;
  animation-name: moveYellow;
  left: 20px;
}

.css-loader-circle-teal {
  background-color: #1c8578;
  animation-name: moveTeal;
  left: 0px;
}

@keyframes moveYellow {
  0% {
      transform: translateX(0px);
  }
  50% {
      transform: translateX(-20px);
  }
  100% {
      transform: translateX(0px);
  }
}

@keyframes moveTeal {
  0% {
      transform: translateX(0px);
  }
  50% {
      transform: translateX(20px);
  }
  100% {
      transform: translateX(0px);
  }
}