/* ==============================
   Custom Styles for NSDrafter
   Following BEM Convention
   ============================== */

/* ==============================
    0. Body and HTML Styles
   ============================== */

body,
html {
  margin: 0 !important;
  padding: 0 !important;
}

/* ==============================
   1. Auth Page Block
   ============================== */
.auth-page {
  background: linear-gradient(135deg, var(--auth-bg-start) 0%, var(--auth-bg-end) 100%);
}

/* ==============================
   2. Error Page Block
   ============================== */
.error-page {
  background-color: var(--color-gray-100);
}

/* ==============================
   3. Profile Image Block
   ============================== */
.profile-image {
  width: var(--profile-image-size);
  height: var(--profile-image-size);
}

.profile-image__container {
  min-width: 260px;
}

.profile-image__thumbnail {
  width: var(--profile-thumbnail-size);
  height: var(--profile-thumbnail-size);
}

.profile-image__placeholder {
  width: var(--profile-image-size);
  height: var(--profile-image-size);
}

/* ==============================
   4. Logo Block
   ============================== */
.logo {
  color: var(--color-dark);
}

.logo--light {
  color: var(--color-white);
}

.logo--dark {
  color: var(--color-dark);
}

.logo--primary {
  color: var(--color-primary);
}

.logo--muted {
  color: var(--color-gray-600);
}

/* Login page logo - uses default text color (dark) */
.auth-page .logo {
  color: var(--color-dark);
}

/* Header logo - uses white color on dark background */
.navbar-dark .logo {
  filter: brightness(0) invert(1);
}

/* ==============================
   5. Calendar Event Colors
   ============================== */
.calendar-event--holiday {
  background-color: var(--calendar-event-holiday-color);
}

.calendar-event--absence {
  background-color: var(--calendar-event-absence-color);
}

/* ==============================
   6. Responsive Adjustments
   ============================== */

/* Bootstrap 5.3 Breakpoints:
   - xs: 0px (extra small)
   - sm: 576px (small)
   - md: 768px (medium)
   - lg: 992px (large)
   - xl: 1200px (extra large)
   - xxl: 1400px (extra extra large)
*/

@media (min-width: 576px) {
  .auth-page__card {
    max-width: 440px !important;
    height: auto !important;
  }
}