/*
 * UTILITIES.CSS
 * =============
 *
 * Functional utility classes for spacing, layout, and common patterns.
 * Prefix: u-* (prevents clashes with Bulma)
 *
 * Categories:
 * 1. Spacing (margins, padding, gaps) - based on consistent token scale
 * 2. Containers (max-width + centering patterns)
 * 3. Layout (flex, width utilities)
 * 4. Typography (alignment, style)
 * 5. Icons (size modifiers)
 * 6. Effects (toast animations)
 *
 * Usage:
 * - Use Bulma first for components (is-*, has-*)
 * - Use utilities for small adjustments and repeated patterns
 * - Avoid inline styles - extract to utilities if used 2+ times
 * - For brand/design decisions, see theme.css
 */

/* ===========================
   SPACING SCALE
   =========================== */

:root {
  --u-space-xs: 0.25rem;
  --u-space-sm: 0.5rem;
  --u-space-md: 0.75rem;
  --u-space-lg: 1rem;
  --u-space-xl: 1.25rem;
}

/* ===========================
   MARGINS
   =========================== */

/* Margin Bottom */
.u-mb-xs { margin-bottom: var(--u-space-xs); }
.u-mb-sm { margin-bottom: var(--u-space-sm); }
.u-mb-md { margin-bottom: var(--u-space-md); }
.u-mb-lg { margin-bottom: var(--u-space-lg); }
.u-mb-xl { margin-bottom: var(--u-space-xl); }

/* Margin Top */
.u-mt-xs { margin-top: var(--u-space-xs); }
.u-mt-sm { margin-top: var(--u-space-sm); }
.u-mt-md { margin-top: var(--u-space-md); }
.u-mt-lg { margin-top: var(--u-space-lg); }
.u-mt-xl { margin-top: var(--u-space-xl); }
.u-mt-2 { margin-top: 2rem; }
.u-mt-3 { margin-top: 3rem; }

/* Margin Left */
.u-ml-xs { margin-left: var(--u-space-xs); }
.u-ml-sm { margin-left: var(--u-space-sm); }
.u-ml-md { margin-left: var(--u-space-md); }
.u-ml-lg { margin-left: var(--u-space-lg); }

/* Margin Right */
.u-mr-xs { margin-right: var(--u-space-xs); }
.u-mr-sm { margin-right: var(--u-space-sm); }
.u-mr-md { margin-right: var(--u-space-md); }
.u-mr-lg { margin-right: var(--u-space-lg); }

/* Horizontal Auto Margins */
.u-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* ===========================
   PADDING
   =========================== */

.u-px-sm { padding-left: var(--u-space-sm); padding-right: var(--u-space-sm); }
.u-px-md { padding-left: var(--u-space-lg); padding-right: var(--u-space-lg); }
.u-px-lg { padding-left: calc(var(--u-space-lg) + var(--u-space-sm)); padding-right: calc(var(--u-space-lg) + var(--u-space-sm)); }

.u-py-sm { padding-top: var(--u-space-md); padding-bottom: var(--u-space-md); }
.u-py-md { padding-top: var(--u-space-lg); padding-bottom: var(--u-space-lg); }
.u-py-lg { padding-top: calc(var(--u-space-lg) + var(--u-space-sm)); padding-bottom: calc(var(--u-space-lg) + var(--u-space-sm)); }

/* ===========================
   GAP HELPERS
   =========================== */

.u-gap-xs { gap: var(--u-space-sm); }
.u-gap-sm { gap: var(--u-space-md); }
.u-gap-md { gap: var(--u-space-lg); }

/* ===========================
   CENTERED CONTAINERS
   =========================== */

/*
 * Max-width containers with auto horizontal margins.
 * Common pattern for centered forms, modals, and content boxes.
 */

.u-container-xs {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.u-container-sm {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.u-container-md {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.u-container-lg {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Box-specific centered variants with vertical spacing */
.u-box-centered-xs {
  max-width: 400px;
  margin: 0 auto;
}

.u-box-centered-sm {
  max-width: 600px;
  margin: 2rem auto;
}

.u-box-centered-lg {
  max-width: 800px;
  margin: 2rem auto;
}

/* ===========================
   LAYOUT UTILITIES
   =========================== */

/* Flex utilities */
.u-flex-1 {
  flex: 1;
}

.u-flex-grow {
  flex-grow: 1;
}

.u-flex-shrink-0 {
  flex-shrink: 0;
}

/* Fixed widths for inputs and buttons */
.u-w-120 { width: 120px; }
.u-w-150 { width: 150px; }
.u-w-200 { width: 200px; }

/* ===========================
   TYPOGRAPHY
   =========================== */

.u-italic {
  font-style: italic;
}

/* Text alignment */
.u-text-left { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }

/* ===========================
   ICON SIZES
   =========================== */

/*
 * Extra large icon sizes for status pages and hero sections.
 * Use with Bulma's .icon class: <span class="icon is-huge">
 */

.icon.is-huge {
  font-size: 4rem;
}

.icon.is-jumbo {
  font-size: 5rem;
}

/* Toast helpers */
.u-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  left: 20px;
  z-index: 9999;
  max-width: 400px;
  width: auto;
}

.u-toast {
  animation: slideInRight 0.3s ease-out;
  display: flex;
  align-items: center;
  gap: 10px;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ===========================
   THEME OVERRIDES
   =========================== */

/*
 * Remove all shadows for flat design.
 * Overrides Bulma's default box-shadow on common components.
 */

.card,
.box,
.notification,
.button,
.modal-card,
.dropdown-menu,
.panel,
.message,
.navbar,
.pagination,
.table,
.tabs,
.menu {
  box-shadow: none !important;
}

/*
 * Card colors: dark cards in light mode, slightly lighter in dark mode.
 * Uses Bulma CSS variables so the scheme switch works automatically.
 */

.card {
  --bulma-card-background-color: hsl(0, 0%, 17%);
  --bulma-card-color: hsl(0, 0%, 100%);
}

.card .title,
.card .subtitle {
  color: hsl(0, 0%, 100%);
}

.card .card-footer-item {
  color: hsl(0, 0%, 90%);
}

.card .card-footer-item:hover {
  color: hsl(0, 0%, 100%);
}

.card .card-footer-item.has-text-danger {
  color: var(--bulma-danger) !important;
}

.card .card-footer-item.has-text-success {
  color: var(--bulma-success) !important;
}

@media (prefers-color-scheme: dark) {
  .card {
    --bulma-card-background-color: hsl(0, 0%, 22%);
    --bulma-card-color: hsl(0, 0%, 95%);
  }
}

/* ===========================
   ROOM GRID (Booking Confirmation Modal)
   =========================== */

.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
  max-height: 240px;
  overflow-y: auto;
  padding: 0.25rem;
}

.room-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.5rem !important;
  height: 70px;
  white-space: normal;
}

.room-button .icon {
  margin: 0 0 0.25rem 0 !important;
}

.room-button .room-info {
  text-align: center;
  line-height: 1.2;
}

@media screen and (max-width: 768px) {
  .room-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  .room-button {
    height: 65px;
    padding: 0.5rem 0.25rem !important;
    font-size: 0.8rem;
  }
}

/* ===========================
   SKIP NAVIGATION (A11Y)
   =========================== */

.u-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 10000;
  transition: top 0.2s;
}

.u-skip-link:focus {
  top: 0;
}

/* ===========================
   MOBILE RESPONSIVE FIXES
   =========================== */

/*
 * Make .level components stack vertically on mobile screens.
 * Bulma's .level stays horizontal by default at all breakpoints,
 * which causes layout issues on narrow screens.
 */

@media (max-width: 768px) {
  .level {
    flex-direction: column !important;
  }

  .level-left,
  .level-right {
    width: 100%;
  }

  .level-right {
    margin-top: 1rem;
  }

  .level-item {
    justify-content: flex-start;
  }
}