@tailwind base;
@tailwind components;
@tailwind utilities;

/* ─── Base ──────────────────────────────────────────────────────────────────── */

@layer base {
  :root {
    --background: 0 0% 98%;
    --foreground: 220 9% 12%;

    --card: 0 0% 100%;
    --card-foreground: 220 9% 12%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 9% 12%;

    --primary: 224 76% 53%;
    --primary-foreground: 0 0% 100%;

    --secondary: 199 89% 48%;
    --secondary-foreground: 0 0% 100%;

    --muted: 220 14% 96%;
    --muted-foreground: 220 8% 46%;

    --accent: 220 14% 96%;
    --accent-foreground: 220 9% 12%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 224 76% 53%;

    --radius: 0.625rem;

    --chart-1: 224 76% 53%;
    --chart-2: 199 89% 48%;
    --chart-3: 142 71% 45%;
    --chart-4: 38 92% 50%;
    --chart-5: 0 84% 60%;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 224 76% 53%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 14% 96%;
    --sidebar-accent-foreground: 220 9% 12%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 224 76% 53%;
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    @apply bg-background text-foreground;
    font-feature-settings: 'cv11', 'ss01';
  }

  *:focus-visible {
    @apply outline-none ring-2 ring-ring/40 ring-offset-1;
  }

  *:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }

  button {
    -webkit-appearance: none;
    appearance: none;
  }

  button:focus {
    outline: none;
    box-shadow: none;
  }

  button::-moz-focus-inner {
    border: 0;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold;
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: -0.04em;
  }

  * {
    @apply border-border;
  }
}

/* ─── Components ─────────────────────────────────────────────────────────────── */

@layer components {
  .card {
    @apply bg-white rounded-xl border border-gray-100 transition-shadow duration-200;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  .card:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
  }

  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg
           bg-primary text-white text-sm font-medium
           transition-all duration-150
           hover:bg-blue-700 active:scale-[0.98];
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
  }

  .btn-icon {
    @apply w-9 h-9 rounded-lg border border-gray-200 bg-white
           flex items-center justify-center text-gray-500
           transition-all duration-150
           hover:bg-gray-50 hover:text-gray-800 hover:border-gray-300
           active:scale-95;
  }

  .sidebar-icon {
    @apply w-10 h-10 rounded-xl flex items-center justify-center
           text-gray-500 transition-all duration-150 cursor-pointer
           hover:bg-gray-100 hover:text-primary;
  }

  .sidebar-icon-active {
    @apply bg-primary/10 text-primary;
  }

  .badge {
    @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium;
  }

  .badge-blue   { @apply bg-blue-50   text-blue-700   border border-blue-100; }
  .badge-green  { @apply bg-green-50  text-green-700  border border-green-100; }
  .badge-amber  { @apply bg-amber-50  text-amber-700  border border-amber-100; }
  .badge-red    { @apply bg-red-50    text-red-700    border border-red-100; }
  .badge-gray   { @apply bg-gray-100  text-gray-600   border border-gray-200; }
  .badge-purple { @apply bg-violet-50 text-violet-700 border border-violet-100; }

  .stat-value {
    @apply text-2xl font-semibold tracking-tight text-gray-900;
  }

  .stat-label {
    @apply text-xs font-medium text-gray-500 uppercase tracking-wider;
  }

  /* ─── Page wrapping (chrome) ────────────────────────────── */

  .app-shell {
    @apply relative isolate flex-1 overflow-hidden;
  }

  .app-frame {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 100%;
    min-width: 0;
    flex: 1;
    padding: 14px;
  }

  .content-frame {
    position: relative;
    display: flex;
    min-height: 0;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid hsl(var(--border));
    background: hsl(0 0% 100%);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  .sidebar-frame {
    height: calc(100vh - 28px);
    margin-bottom: 14px;
    margin-left: 14px;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid hsl(var(--border));
    background: hsl(0 0% 100%);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  /* ─── Page title block (display font) ───────────────────── */

  .page-hero {
    @apply mb-8 flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between;
  }

  .page-hero-main {
    @apply min-w-0 space-y-2;
  }

  .page-title {
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: clamp(2.15rem, 2.9vw, 3.15rem);
    line-height: 1.02;
    letter-spacing: -0.06em;
  }

  .page-subtitle {
    @apply max-w-3xl text-[15px] text-muted-foreground;
    max-width: 52rem;
  }
}

/* ─── Scrollbar ──────────────────────────────────────────────────────────────── */

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { @apply bg-gray-200 rounded-full; }
::-webkit-scrollbar-thumb:hover { @apply bg-gray-300; }

/* ─── Animations ─────────────────────────────────────────────────────────────── */

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

.animate-float { animation: float 3s ease-in-out infinite; }

.hp-day-has-test-entry {
  position: relative;
}

.hp-day-has-test-entry::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 5px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 9999px;
  background-color: #2563eb;
  z-index: 2;
}

.hp-day-has-test-entry.hp-day-has-medication-entry::after {
  left: calc(50% - 7px);
}

.hp-day-has-medication-entry {
  position: relative;
}

.hp-day-has-medication-entry::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 5px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 9999px;
  background-color: #22c55e;
  z-index: 2;
}

.hp-day-picker .rdp-day_button {
  position: relative;
  z-index: 1;
}

.hp-day-has-test-entry.hp-day-has-medication-entry::before {
  left: calc(50% + 7px);
}

.hp-day-picker,
.hp-day-picker.rdp-root,
.hp-day-picker .rdp-root {
  --rdp-day-height: 34px;
  --rdp-day_button-height: 30px;
  --rdp-nav_button-width: 28px;
  --rdp-nav_button-height: 28px;
  --rdp-nav-height: 36px;
  --rdp-weekday-padding: 0.28rem 0;
  width: 100%;
}

.hp-day-picker .rdp-months {
  justify-content: stretch;
  max-width: none;
  width: 100%;
  display: block;
}

.hp-day-picker .rdp-month {
  margin: 0;
  width: 100%;
}

.hp-day-picker .rdp-month_grid {
  width: 100%;
  table-layout: fixed;
}

.hp-day-picker .rdp-day {
  width: auto;
}

.hp-day-picker .rdp-month_caption {
  height: 36px;
  margin-bottom: 0.2rem;
}

.hp-day-picker .rdp-caption_label {
  font-size: 0.8rem;
  font-weight: 600;
}

.hp-day-picker .rdp-weekday {
  font-size: 0.66rem;
  font-weight: 600;
}

.hp-day-picker .rdp-day_button {
  width: 100%;
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: 8px;
}

.hp-day-picker .rdp-dropdown_root,
.hp-day-picker .rdp-dropdown,
.hp-day-picker .rdp-dropdown option,
.hp-day-picker .rdp-caption_label {
  font-size: 1rem;
  font-weight: 500;
}

.hp-input-calendar,
.hp-input-calendar.rdp-root,
.hp-input-calendar .rdp-root {
  --rdp-accent-color: #2563eb;
  --rdp-accent-background-color: #eff6ff;
}

.hp-input-calendar .rdp-day_button {
  border: 1px solid transparent;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.hp-input-calendar .rdp-day_button:hover {
  background-color: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.hp-input-calendar .rdp-selected .rdp-day_button {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  border-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
}

.hp-input-calendar .rdp-today:not(.rdp-selected) .rdp-day_button {
  border-color: #cbd5e1;
  color: #0f172a;
  font-weight: 700;
}

.hp-input-calendar .rdp-button_previous,
.hp-input-calendar .rdp-button_next {
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
}

.hp-input-calendar .rdp-chevron {
  fill: #475569;
}
