/* ============================================
   PREMIUM UI THEME SYSTEM
   Xero-inspired enterprise styling
   Overrides MudBlazor defaults globally
   Load AFTER all other CSS files
   ============================================ */

:root {
  /* ── Compact Spacing ── */
  --cell-padding-x: 16px;
  --cell-padding-y: 10px;
  --nav-padding-x: 1rem;
  --nav-padding-y: 0.65rem;
  --dialog-padding-x: 24px;
  --dialog-padding-y: 20px;
  --form-spacing: 1.25rem;

  /* ── Table Refinements ── */
  --table-header-bg: #f8f9fb;
  --table-stripe-bg: #fafbfc;
  --table-hover-bg: #f3f4f8;
  --table-border-subtle: #eef0f4;

  /* ── Dialog Refinements ── */
  --dialog-radius: 10px;
  --dialog-title-bg: #fafbfc;
  --dialog-title-border: #eef0f4;
  --dialog-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);

  /* ── Badge/Status ── */
  --badge-radius: 4px;

  /* ── Input Refinements ── */
  --input-focus-ring: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);

  /* ── Typography ── */
  --table-header-font: 600 0.6875rem/1.2 Montserrat, Helvetica, Arial, sans-serif;
}

/* ════════════════════════════════════════════
   TABLE COMPONENTS
   MudTable, FshTable, EntityTable
   ════════════════════════════════════════════ */

.mud-table-head .mud-table-cell {
  background: var(--table-header-bg) !important;
  font: var(--table-header-font) !important;
  color: #8e94a2 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid var(--table-border-subtle) !important;
  padding: 12px var(--cell-padding-x) !important;
}

.mud-table-sort-label {
  font: var(--table-header-font) !important;
  color: #8e94a2 !important;
}

.mud-table-cell {
  padding: var(--cell-padding-y) var(--cell-padding-x) !important;
  border-bottom: 1px solid var(--table-border-subtle) !important;
  font-size: 0.8125rem !important;
  font-variant-numeric: tabular-nums;
}

.mud-table-cell.mud-table-cell-align-right {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.mud-table-row:hover .mud-table-cell,
.mud-table-row:hover .mud-table-cell-content {
  background: var(--table-hover-bg) !important;
  transition: background 0.15s ease;
}

.mud-table-container .mud-table-body > .mud-table-row:nth-child(even) .mud-table-cell,
.mud-table-container .mud-table-body > .mud-table-row:nth-child(even) .mud-table-cell-content {
  background: var(--table-stripe-bg);
}

.mud-table-container .mud-table-body > .mud-table-row:nth-child(even):hover .mud-table-cell,
.mud-table-container .mud-table-body > .mud-table-row:nth-child(even):hover .mud-table-cell-content {
  background: var(--table-hover-bg) !important;
}

.mud-table-toolbar {
  height: auto !important;
  padding: 1rem !important;
  min-height: 48px;
}

.mud-table-toolbar .mud-button-root {
  font-size: 0.8125rem !important;
}

.mud-table-pagination {
  min-height: 40px !important;
  border-top: 1px solid var(--table-border-subtle) !important;
  background: var(--table-header-bg) !important;
}

.mud-table-pagination-toolbar {
  height: auto !important;
  padding: 4px 0 !important;
  min-height: 40px !important;
}

.mud-table-pagination .mud-select-input {
  font-size: 0.75rem !important;
}

/* ════════════════════════════════════════════
   STATUS CHIPS — square badges like Xero
   ════════════════════════════════════════════ */

.mud-chip {
  border-radius: var(--badge-radius) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  padding: 2px 10px !important;
  height: auto !important;
  min-height: 22px;
  line-height: 1.5 !important;
  text-transform: none !important;
}

.mud-chip.mud-chip-size-small {
  font-size: 0.625rem !important;
  padding: 1px 8px !important;
  min-height: 18px;
}

.mud-chip-filled.mud-chip-color-success {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
}

.mud-chip-filled.mud-chip-color-error {
  background: #fce4ec !important;
  color: #c62828 !important;
}

.mud-chip-filled.mud-chip-color-warning {
  background: #fff8e1 !important;
  color: #f57f17 !important;
}

.mud-chip-filled.mud-chip-color-info {
  background: #e3f2fd !important;
  color: #1565c0 !important;
}

.mud-chip-filled.mud-chip-color-default {
  background: #f5f5f5 !important;
  color: #616161 !important;
}

.mud-chip-filled.mud-chip-color-primary {
  background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important;
  color: var(--mud-palette-primary) !important;
}

.mud-chip-filled.mud-chip-color-secondary {
  background: color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent) !important;
  color: var(--mud-palette-secondary) !important;
}

/* ════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════ */

.mud-button-root {
  font-size: 0.8125rem !important;
}

.mud-button-filled.mud-button-filled-primary {
  border-radius: 6px !important;
  text-transform: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 6px 16px !important;
}

.mud-button-outlined {
  border-radius: 6px !important;
  text-transform: none !important;
  padding: 5px 14px !important;
}

.mud-button-text {
  text-transform: none !important;
  font-weight: 500 !important;
}

/* ════════════════════════════════════════════
   INPUTS
   ════════════════════════════════════════════ */

.mud-input-root {
  font-size: 0.8125rem !important;
}

.mud-input-root:focus {
  box-shadow: var(--input-focus-ring) !important;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
  font-size: 0.8125rem !important;
}

.mud-input-control-margin-dense .mud-input > input.mud-input-root {
  font-size: 0.8125rem !important;
}

.mud-select-input {
  font-size: 0.8125rem !important;
}

/* ════════════════════════════════════════════
   NAVIGATION
   MudDrawer, MudNavMenu
   ════════════════════════════════════════════ */

.mud-nav-link {
  padding: var(--nav-padding-y) var(--nav-padding-x) !important;
  font-size: 0.8125rem !important;
  border-radius: 6px !important;
  margin: 2px 8px !important;
  white-space: normal !important;
}

.mud-nav-link.active {
  background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) !important;
  font-weight: 600 !important;
  color: var(--mud-palette-primary) !important;
}

.mud-nav-item .mud-nav-link:hover {
  background: var(--table-hover-bg) !important;
}

.mud-nav-group > .mud-nav-group-header {
  font-size: 0.6875rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #8e94a2 !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
}

.mud-nav-group .mud-nav-group-header .mud-nav-group-toggle-icon {
  font-size: 1.1rem !important;
}

.mud-nav-group .mud-navmenu .mud-nav-link {
  padding-left: calc(var(--nav-padding-x) * 2) !important;
  padding-inline-start: calc(var(--nav-padding-x) * 2) !important;
}

.mud-nav-group .mud-navmenu .mud-nav-group .mud-nav-link {
  padding-left: calc(var(--nav-padding-x) * 3) !important;
  padding-inline-start: calc(var(--nav-padding-x) * 3) !important;
}

/* ════════════════════════════════════════════
   APP BAR
   ════════════════════════════════════════════ */

.mud-appbar {
  border-bottom: 1px solid var(--table-border-subtle) !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════
   PAPER / CARD
   ════════════════════════════════════════════ */

.mud-paper {
  border-radius: 8px !important;
}

.dash-glass {
  border: 1px solid var(--table-border-subtle) !important;
}

/* ════════════════════════════════════════════
   TYPOGRAPHY REFINEMENTS
   ════════════════════════════════════════════ */

.mud-typography-subtitle2 {
  color: var(--mud-palette-text-secondary) !important;
}

.mud-table-cell .mud-typography {
  font-size: 0.8125rem !important;
}

/* ════════════════════════════════════════════
   EXPANSION PANEL
   ════════════════════════════════════════════ */

.mud-expand-panel .mud-expand-panel-header {
  font-size: 0.8125rem !important;
}

/* ════════════════════════════════════════════
   SIMPLE TABLE
   ════════════════════════════════════════════ */

.mud-simple-table table * tr > td,
.mud-simple-table table * tr th {
  font-size: 0.8125rem !important;
  padding: var(--cell-padding-y) var(--cell-padding-x) !important;
}

/* ════════════════════════════════════════════
   DIALOG / MODAL
   ════════════════════════════════════════════ */

.mud-dialog {
  border-radius: var(--dialog-radius) !important;
  box-shadow: var(--dialog-shadow) !important;
}

.mud-dialog-title {
  background: var(--dialog-title-bg) !important;
  border-bottom: 1px solid var(--dialog-title-border) !important;
  padding: 16px var(--dialog-padding-x) !important;
  font-weight: 600 !important;
  font-size: 1.0625rem !important;
}

.mud-dialog-content {
  padding: var(--dialog-padding-y) var(--dialog-padding-x) !important;
}

.mud-dialog-actions {
  border-top: 1px solid var(--dialog-title-border) !important;
  background: var(--dialog-title-bg) !important;
  padding: 12px var(--dialog-padding-x) !important;
}

.mud-dialog-actions .mud-button-root {
  min-width: 80px !important;
}

/* ════════════════════════════════════════════
   AUTOCOMPLETE / SELECT / PICKER
   ════════════════════════════════════════════ */

.mud-select .mud-input-root {
  font-size: 0.8125rem !important;
}

.mud-picker-popover {
  border-radius: 8px !important;
  box-shadow: var(--dialog-shadow) !important;
}

/* ════════════════════════════════════════════
   TABS
   ════════════════════════════════════════════ */

.mud-tabs {
  background-color: var(--mud-palette-surface) !important;
}

.mud-tab {
  font-size: 0.8125rem !important;
  text-transform: none !important;
  font-weight: 500 !important;
}

/* ════════════════════════════════════════════
   ENTITY TABLE — Card View (migrated from EntityTable.razor)
   ════════════════════════════════════════════ */

.entity-card-view-mode .mud-table-container,
.entity-card-view-mode .mud-table-pagination {
  display: none !important;
}

.entity-card-view-header {
  background: var(--mud-palette-background-grey) !important;
  border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

@keyframes entityCardFadeUp {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  60% {
    opacity: 1;
    transform: translateY(-3px) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.entity-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  animation: entityCardFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s ease;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--table-border-subtle);
  will-change: transform, box-shadow;
}

.entity-card:hover {
  transform: translateY(-6px) scale(1.012) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.entity-card:active {
  transform: translateY(-2px) scale(1.004) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10) !important;
  transition-duration: 0.12s !important;
}

.entity-card-accent {
  height: 4px;
  background: var(--mud-palette-primary);
  transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.35s ease;
  opacity: 0.85;
}

.entity-card:hover .entity-card-accent {
  height: 7px;
  opacity: 1;
}

.entity-card-accent-secondary .entity-card-accent { background: var(--mud-palette-secondary); }
.entity-card-accent-success   .entity-card-accent { background: var(--mud-palette-success); }
.entity-card-accent-info      .entity-card-accent { background: var(--mud-palette-info); }
.entity-card-accent-warning   .entity-card-accent { background: var(--mud-palette-warning); }

.entity-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  max-width: 100%;
  transition: color 0.25s ease;
}

.entity-card:hover .entity-card-title {
  color: var(--mud-palette-primary);
}

.entity-card-fields {
  flex: 1;
  padding: 12px 16px;
}

.card-field-row {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--mud-palette-lines-default);
  transition: background-color 0.2s ease, padding-left 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 4px;
}

.card-field-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.entity-card:hover .card-field-row:hover {
  background-color: var(--mud-palette-background-grey);
  padding-left: 6px;
}

.card-field-label {
  display: block;
  line-height: 1.2;
  margin-bottom: 2px;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8e94a2;
  font-weight: 600;
}

.card-field-value {
  margin-left: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: right;
}

.entity-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--mud-palette-lines-default);
  background: var(--mud-palette-background-grey);
  min-height: 44px;
  transition: background-color 0.3s ease;
}

.entity-card:hover .entity-card-footer {
  background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-background-grey));
}

.entity-card-skeleton {
  border-radius: 8px;
  border: 1px solid var(--table-border-subtle);
}

.entity-card-skeleton-header {
  height: 4px;
  background: var(--mud-palette-lines-default);
  border-radius: 8px 8px 0 0;
  animation: entitySkeletonPulse 1.5s ease-in-out infinite;
}

@keyframes entitySkeletonPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

.card-stagger-1 .entity-card { animation-delay: 0.06s; }
.card-stagger-2 .entity-card { animation-delay: 0.13s; }
.card-stagger-3 .entity-card { animation-delay: 0.20s; }
.card-stagger-4 .entity-card { animation-delay: 0.27s; }
.card-stagger-5 .entity-card { animation-delay: 0.34s; }
.card-stagger-6 .entity-card { animation-delay: 0.41s; }

.entity-card-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 16px 0;
}

@media (max-width: 600px) {
  .entity-card-view {
    grid-template-columns: 1fr;
  }

  .d-flex.flex-row.flex-wrap.justify-center.mud-text-align-center {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* ════════════════════════════════════════════
   DARK THEME OVERRIDES
   ════════════════════════════════════════════ */

.dark-theme {
  --table-header-bg: #1e2126;
  --table-stripe-bg: #1a1d22;
  --table-hover-bg: #252830;
  --table-border-subtle: #2a2d35;
  --dialog-title-bg: #1e2126;
  --dialog-title-border: #2a2d35;
}

.dark-theme .mud-chip-filled.mud-chip-color-success {
  background: #1b3d1f !important;
  color: #81c784 !important;
}

.dark-theme .mud-chip-filled.mud-chip-color-error {
  background: #3d1b1b !important;
  color: #ef9a9a !important;
}

.dark-theme .mud-chip-filled.mud-chip-color-warning {
  background: #3d2e1b !important;
  color: #ffd54f !important;
}

.dark-theme .mud-chip-filled.mud-chip-color-info {
  background: #1b2d3d !important;
  color: #90caf9 !important;
}

.dark-theme .mud-chip-filled.mud-chip-color-default {
  background: #2a2d35 !important;
  color: #bdbdbd !important;
}

.dark-theme .mud-chip-filled.mud-chip-color-primary {
  background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent) !important;
  color: var(--mud-palette-primary-lighten) !important;
}

.dark-theme .mud-chip-filled.mud-chip-color-secondary {
  background: color-mix(in srgb, var(--mud-palette-secondary) 18%, transparent) !important;
  color: var(--mud-palette-secondary-lighten) !important;
}

.dark-theme .mud-nav-link.active {
  background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent) !important;
}

.dark-theme .entity-card {
  border-color: var(--table-border-subtle);
}

.dark-theme .entity-card-footer {
  border-color: var(--table-border-subtle);
}

.dark-theme .entity-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}