/* Add this to your app.css or wwwroot/css/app.css file */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
html,
body {
  font-family: "Archivo", sans-serif;
  background-color: #000000;
  color: #ffffff;
  overflow-x: hidden;
}

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

.mud-typography {
  font-family: "Archivo", sans-serif !important;
}

.mud-input {
  font-family: "Archivo", sans-serif !important;
}

.mud-button {
  font-family: "Archivo", sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.02857em;
}

.mud-typography-h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.167;
  letter-spacing: -0.01562em;
}

.mud-typography-h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.00833em;
}

.mud-typography-h3 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.167;
  letter-spacing: 0em;
}

.mud-typography-h4 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.235;
  letter-spacing: 0.00735em;
}

.mud-typography-h5 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.334;
  letter-spacing: 0.05em;
}

.mud-typography-h6 {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.0075em;
}

/* Background patterns for events */
.bg-event-1 {
  background: linear-gradient(135deg, #8e44ad 0%, #3498db 100%);
}

.bg-event-2 {
  background: linear-gradient(135deg, #e74c3c 0%, #f39c12 100%);
}

.bg-event-3 {
  background: linear-gradient(135deg, #1abc9c 0%, #2ecc71 100%);
}

.bg-event-4 {
  background: linear-gradient(135deg, #9b59b6 0%, #f1c40f 100%);
}

.bg-event-5 {
  background: linear-gradient(135deg, #34495e 0%, #95a5a6 100%);
}

/* Background patterns for brands */
.bg-brand-1 {
  background: linear-gradient(135deg, #3498db 0%, #8e44ad 100%);
}

.bg-brand-2 {
  background: linear-gradient(135deg, #f39c12 0%, #e74c3c 100%);
}

.bg-brand-3 {
  background: linear-gradient(135deg, #2ecc71 0%, #1abc9c 100%);
}

.bg-brand-4 {
  background: linear-gradient(135deg, #f1c40f 0%, #9b59b6 100%);
}

.bg-brand-5 {
  background: linear-gradient(135deg, #95a5a6 0%, #34495e 100%);
}

/* MudDatePicker Popover Overrides */
.mud-picker-popover .mud-paper {
  background-color: #121212 !important; /* Theme Surface color */
}

.mud-picker-calendar-header .mud-picker-calendar-header-text {
  color: #ffffff !important; /* Theme TextPrimary color */
}

.mud-picker-calendar-header button .mud-icon-root {
  color: #ffffff !important; /* Theme TextPrimary color */
}

.mud-picker-calendar-day-header span {
  color: #aaaaaa !important; /* Theme TextSecondary color */
}

.mud-picker-day {
  color: #ffffff !important; /* Theme TextPrimary color */
}

.mud-picker-day.mud-disabled {
  color: #555555 !important; /* Darker grey for disabled */
}

/* Selected day background is handled by Color="Color.Tertiary" */
/* Ensure selected date text is readable against Tertiary background */
.mud-picker-day.mud-selected,
.mud-picker-day.mud-selected:hover {
  color: #000000 !important; /* Black text on Tertiary background */
}

/* Ensure today's date outline is visible */
.mud-picker-day.mud-current {
  border-color: #aaaaaa !important; /* Theme TextSecondary color */
}

/* Fullscreen container for pages that need to take full width */
.fullscreen-container {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: -24px;
  padding: 0;
}

/* Override MudBlazor main content margins and padding when needed */
.use-full-width .mud-main-content,
.fullscreen-container + .mud-main-content {
  padding: 0 !important;
  margin: 0 !important;
}

/* Responsive fullscreen container for mobile devices */
@media (max-width: 768px) {
  /* Target the main content container margins for apply pages */
  .mobile-fullscreen-container {
    width: 100%;
    max-width: 100% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Override only horizontal margins/padding for main content */
  .mobile-fullscreen-container + .mud-main-content,
  .mobile-fullscreen-container .mud-main-content,
  .mud-main-content:has(.mobile-fullscreen-container) {
    padding-left: 2px !important;
    padding-right: 2px !important;
    margin-left: 2px !important;
    margin-right: 2px !important;
  }

  /* Force override for horizontal margins only */
  .mud-main-content.ma-10,
  .mud-main-content.ma-sm-4,
  .mud-main-content.ma-xs-2 {
    margin-left: 2px !important;
    margin-right: 2px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  /* Ensure any child cards don't overflow */
  .mobile-fullscreen-container .mud-card {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Ensure form fields properly scale */
  .mobile-fullscreen-container .mud-input {
    width: 100% !important;
    max-width: 100% !important;
  }
}
::deep .mud-card-media {
  aspect-ratio: 0.8; /* A4 portrait aspect ratio */
  width: 100%;
}

/* Mobile date picker dialog fix */
@media (max-width: 768px) {
    .mud-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 1300 !important;
    }
    
    .mud-dialog-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 16px !important;
        box-sizing: border-box !important;
        z-index: 1300 !important;
    }

    .mud-dialog {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: auto !important;
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100vh - 32px) !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    .mud-picker-calendar-container {
        max-width: 100% !important;
        max-height: 100% !important;
        overflow: visible !important;
    }
    
    .mud-picker-calendar {
        max-width: 100% !important;
        max-height: 100% !important;
    }
    
    /* Additional specific selectors for date picker dialogs */
    .mud-dialog .mud-picker-dialog {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }
    
    .mud-picker-dialog .mud-paper {
        position: relative !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
    }
}