/**
 * M2T Management.Web — Site-Specific CSS
 *
 * Only styles NOT covered by Antumo Design System.
 * All values use --antumo-* CSS tokens.
 *
 * Sections:
 * 1. Blazor framework (validation, error UI)
 * 2. Stat cards (app-specific dashboard component)
 * 3. Filter bar (app-specific toolbar)
 * 4. Modal overlay (positioning for C# state modals)
 * 5. Definition lists (modal detail views)
 */

/* ========================================
   1. BLAZOR FRAMEWORK
   ======================================== */

#blazor-error-ui {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.valid.modified:not([type=checkbox]) {
  outline: 1px solid var(--antumo-green-500);
}

.invalid {
  outline: 1px solid var(--antumo-red-500);
}

.validation-message {
  color: var(--antumo-red-500);
  font-size: var(--antumo-font-size-xs);
  margin-top: var(--antumo-spacing-xs);
}

/* ========================================
   2. STAT CARDS (Dashboard)
   ======================================== */

.stat-card {
  border: 1px solid var(--antumo-border-secondary);
  border-radius: var(--antumo-radius-xl);
  overflow: hidden;
  background: var(--antumo-bg-primary);
  margin-bottom: var(--antumo-spacing-3xl);
}

.stat-header {
  padding: var(--antumo-spacing-3xl);
}

.stat-title {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-sm);
  font-weight: var(--antumo-font-weight-semibold);
  color: var(--antumo-text-secondary);
}

.stat-description {
  font-size: var(--antumo-font-size-xs);
  color: var(--antumo-text-tertiary);
  margin-top: var(--antumo-spacing-xs);
}

.stat-description-list {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xs);
}

.stat-value-wrapper {
  padding: 0 var(--antumo-spacing-3xl) var(--antumo-spacing-3xl);
}

.stat-value {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-3xl);
  font-weight: var(--antumo-font-weight-bold);
  color: var(--antumo-text-primary);
  line-height: 1.2;
}

.stat-value-sm {
  font-size: var(--antumo-font-size-lg);
}

.stat-hint {
  font-size: var(--antumo-font-size-xs);
  color: var(--antumo-text-tertiary);
  margin-top: var(--antumo-spacing-xs);
  display: block;
}

/* ========================================
   3. FILTER BAR
   ======================================== */

.filter-bar {
  display: flex;
  gap: var(--antumo-spacing-md);
  margin-bottom: var(--antumo-spacing-xl);
  align-items: center;
}

.filter-bar .form-select {
  max-width: 200px;
}

.filter-bar .form-control {
  max-width: 300px;
}

.filter-bar-search {
  max-width: 400px;
}

/* ========================================
   3b. SIDEBAR PROFILE DROPDOWN FIX
   ========================================
   DS bundle bug: the Metronic bridge reset (_metronic-bridge.scss ~L154) ships
   an UNSCOPED `.dropdown { display: inline-block !important; flex-direction:
   unset !important; background: none !important; ... }`. AntumoNavProfile.razor
   hardcodes `class="dropdown nav-profile-popover"`, so that reset clobbers the
   popover (always visible, no card styling, items collapse to block). Other
   dropdowns escape because their visible panel is a separate `.dropdown-menu`.
   Restore the intended collapsed/shown behavior with matching !important.

   TODO: report to antumo-design — scope the `.dropdown` reset to the Metronic
   context (e.g. `.aside-footer .dropdown`) instead of global, OR give
   `.nav-profile-popover` higher specificity. Once fixed upstream and the
   Antumo.Blazor package is bumped, DELETE this whole 3b block. */

.nav-profile-popover.dropdown {
  display: none !important;
  flex-direction: column !important;
  background-color: var(--antumo-bg-primary) !important;
  border: 1px solid var(--antumo-border-secondary) !important;
  border-radius: var(--antumo-radius-md) !important;
  box-shadow: var(--antumo-shadow-lg) !important;
  padding: var(--antumo-spacing-xs) !important;
  overflow: hidden !important;
}

.nav-profile-popover.dropdown.show {
  display: flex !important;
}

/* Restore icon + label side-by-side layout inside popover items
   (the `.dropdown !important` clobber forces these children to block). */
.nav-profile-popover .dropdown-item-content {
  display: flex;
  width: 100%;
}

.nav-profile-popover .dropdown-item-wrapper {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-md);
  width: 100%;
}

/* ========================================
   4. MODAL OVERLAY
   ======================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

/* ========================================
   5. DEFINITION LISTS (modal details)
   ======================================== */

dl {
  margin: 0;
}

dt {
  font-size: var(--antumo-font-size-sm);
  font-weight: var(--antumo-font-weight-semibold);
  color: var(--antumo-text-secondary);
  margin-top: var(--antumo-spacing-md);
  margin-bottom: var(--antumo-spacing-xs);
}

dt:first-child {
  margin-top: 0;
}

dd {
  font-size: var(--antumo-font-size-sm);
  color: var(--antumo-text-primary);
  margin: 0;
  margin-bottom: var(--antumo-spacing-sm);
}

/* ========================================
   6. FORM GROUP SPACING
   ======================================== */

.form-group + .form-group {
  margin-top: var(--antumo-spacing-3xl);
}