/*
  AppointIt base styles (Phase 1)
  - This file provides a small, Bootstrap-independent baseline.
  - Keep it intentionally minimal to avoid surprising legacy pages.
  - Do NOT add large resets here (Tailwind preflight remains opt-in).
*/

/*
  IMPORTANT (Tailwind v4): Tailwind uses CSS cascade layers.
  If this file is unlayered, it will outrank Tailwind's @layer utilities and
  can accidentally override utility classes (e.g., tw:text-2xl on <button>).
  Keep app-base in a lower-priority layer so utilities win when explicitly used.
*/

@layer base {

:root {
  /* A consistent focus ring across Razor + Vue (utilities can override). */
  --ai-focus-ring-color: rgba(13, 110, 253, 0.35);
}

/* Predictable box sizing without a full reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

:where(body) {
  font-family: var(--ai-font-sans, system-ui);
  background: var(--ai-color-bg, #ffffff);
  color: var(--ai-color-text, #111827);
  line-height: 1.5;
}

:where(a) {
  color: var(--ai-color-primary, #0d6efd);
  text-decoration: none;
}

:where(a:hover) {
  text-decoration: underline;
}

:where(a:focus-visible) {
  outline: 2px solid var(--ai-focus-ring-color);
  outline-offset: 2px;
}

/* Headings: just enough to keep spacing readable without Bootstrap */
:where(h1,
  h2,
  h3,
  h4,
  h5,
  h6) {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: inherit;
}

:where(p) {
  margin-top: 0;
  margin-bottom: 1rem;
}

:where(hr) {
  border: 0;
  border-top: 1px solid var(--ai-color-border, #e5e7eb);
  margin: 1rem 0;
}

/* Minimal form baseline (avoid fighting Bootstrap form classes) */
:where(button, input, select, textarea) {
  font: inherit;
}

:where(input, select, textarea) {
  color: inherit;
  background-color: var(--ai-color-surface, #ffffff);
}

:where(input:focus, select:focus, textarea:focus, button:focus-visible) {
  outline: 2px solid var(--ai-focus-ring-color);
  outline-offset: 2px;
}

body.ai-modal-open {
  overflow: hidden;
}

.ai-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.ai-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.68);
}

.ai-modal__dialog {
  position: relative;
  width: min(900px, 94vw);
  max-height: 92vh;
  overflow: auto;
  border-radius: 0.85rem;
  border: 2px solid var(--ai-border-input, #cbd5e1);
  background: #fff;
  color: var(--ai-text-body, #334155);
  box-shadow: 0 24px 55px rgba(15, 23, 42, 0.42);
}

.ai-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
}

.ai-modal__title {
  margin: 0;
  font-size: 1.65rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--ai-text-heading, #1e293b);
}

.ai-modal__close {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.2rem;
  font-weight: 800;
}

.ai-modal__body {
  padding: 1.25rem;
  font-size: 1.15rem;
  line-height: 1.45;
}

.ai-modal__confirm-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ai-modal__confirm-message,
.ai-modal__confirm-details {
  margin: 0;
}

.ai-modal__confirm-details {
  color: var(--ai-text-muted, #64748b);
  font-size: 0.95em;
}

.ai-modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 1rem 1.25rem 1.2rem;
}

.ai-modal__action-btn,
.ai-modal__footer .ai-btn {
  min-height: 58px;
  min-width: 170px;
  padding: 0.8rem 1.35rem;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.ai-modal__action-btn--xxl {
  min-height: 72px;
  min-width: 220px;
  padding: 1rem 1.75rem;
  font-size: 1.45rem !important;
  font-weight: 900;
}

@media (max-width: 640px) {
  .ai-modal {
    padding: 0.5rem;
  }

  .ai-modal__dialog {
    width: 96vw;
    max-height: 95vh;
  }

  .ai-modal__title {
    font-size: 1.35rem;
  }

  .ai-modal__action-btn,
  .ai-modal__footer .ai-btn {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    font-size: 1.1rem;
  }

  .ai-modal__action-btn--xxl {
    min-height: 68px;
    font-size: 1.35rem !important;
  }
}

/*
  ASP.NET MVC unobtrusive validation helpers render containers even when valid.
  Bootstrap (and many legacy stylesheets) typically hide these by default.
  When Bootstrap is disabled on migrated pages, the empty containers can become
  visible (e.g., an empty red validation summary bar). Keep them hidden when valid.
*/
.validation-summary-valid,
.field-validation-valid {
  display: none;
}

}