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

/* Existing */
.logo-text {
  font-family: 'Borel', cursive;
  font-size: 2.5rem;
  position: absolute;
  top: 0;
  left: 1rem;  /* Add left spacing */
  padding: 1rem;
}

/* Design System */
@layer base {
  body { @apply bg-slate-50 text-slate-800 antialiased; }
  h1,h2,h3,h4 { @apply tracking-tight; }
}

@layer components {
  /* Layout helpers */
  .app-container { @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; }
  .app-container-wide { @apply max-w-[95vw] mx-auto px-4 sm:px-6 lg:px-8; }
  .app-container-form { @apply max-w-4xl mx-auto px-4 sm:px-6 lg:px-8; }
  .full-bleed-section { @apply w-full; }
  .stack-xs > * + * { @apply mt-2; }
  .stack-sm > * + * { @apply mt-3; }
  .stack-md > * + * { @apply mt-6; }
  .stack-lg > * + * { @apply mt-10; }

  /* Headings / text */
  .heading-page { @apply text-3xl md:text-4xl font-semibold text-slate-900; }
  .heading-section { @apply text-xl font-semibold text-slate-800; }
  .text-label { @apply text-[11px] font-medium uppercase tracking-wide text-slate-500; }
  .text-muted { @apply text-sm text-slate-500; }

  /* Cards */
  .card { @apply rounded-lg bg-white/90 backdrop-blur border border-slate-200 shadow-sm; }
  .card-section { @apply p-4 md:p-5; }
  .card-header { @apply px-4 md:px-5 pt-4 md:pt-5 pb-2 flex items-center justify-between; }
  .card-title { @apply text-base font-semibold text-slate-800; }

  /* Metrics */
  .metric { @apply flex flex-col gap-0.5; }
  .metric-label { @apply text-xs font-medium text-slate-500; }
  .metric-value { @apply text-lg font-semibold text-slate-800; }

  /* Buttons */
  .btn { @apply inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-600 disabled:opacity-50 disabled:cursor-not-allowed; }
  .btn-primary { @apply btn bg-slate-900 text-white hover:bg-slate-800; }
  .btn-secondary { @apply btn bg-slate-700 text-white hover:bg-slate-600; }
  .btn-soft { @apply btn bg-slate-100 text-slate-800 hover:bg-slate-200; }
  .btn-outline { @apply btn border border-slate-300 text-slate-700 bg-white hover:bg-slate-50; }
  .btn-danger { @apply btn bg-red-600 text-white hover:bg-red-500; }
  .btn-ghost { @apply btn text-slate-600 hover:text-slate-900 hover:bg-slate-100; }
  .btn-nav { @apply inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-100; }
  .btn-nav-active { @apply text-slate-900 bg-slate-100; }

  /* Badges */
  .badge { @apply inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium; }
  .badge-neutral { @apply badge bg-slate-100 text-slate-700; }
  .badge-accent { @apply badge bg-sky-100 text-sky-700; }
  .badge-warning { @apply badge bg-amber-100 text-amber-700; }
  .badge-danger { @apply badge bg-red-100 text-red-700; }

  /* Forms */
  .form-field { @apply space-y-1; }
  .form-label { @apply block text-sm font-medium text-slate-700; }
  .form-input { @apply w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-800 shadow-inner focus:border-slate-500 focus:ring-slate-500; }
  .form-textarea { @apply form-input min-h-[120px]; }

  /* Calendar */
  .calendar-wrapper { @apply overflow-x-auto pb-2; }
  .calendar-grid { @apply grid grid-cols-8 gap-4 min-w-[900px]; }
  .calendar-header { @apply h-10 flex items-center justify-center text-xs font-medium text-slate-600; }
  .calendar-week-label { @apply h-10 flex items-center text-xs font-medium text-slate-500; }
  .calendar-day-grid { @apply grid grid-cols-7 gap-3; }
  .calendar-cell { @apply h-32 w-full p-2 rounded-md border border-slate-200 bg-white flex flex-col transition shadow-sm hover:shadow-md; }
  .calendar-cell-has { @apply bg-slate-50 border-slate-300; }
  .calendar-edit-btn { @apply mt-auto inline-flex justify-center rounded-full bg-slate-100 text-[11px] font-medium px-3 py-1.5 text-slate-700 hover:bg-slate-200 shadow-sm hover:shadow-md transition-all duration-200; }


  /* Mobile Calendar Components */
  .mobile-day-card { @apply p-3 rounded-lg border border-slate-200 bg-white hover:bg-slate-50 transition-colors; }
  .mobile-day-card-has { @apply bg-slate-50 border-slate-300; }
  
  /* Week View Components */
  .week-day-card { @apply p-4 rounded-lg border border-slate-200 bg-white min-h-[120px] flex flex-col; }
  .week-day-card-has { @apply bg-slate-50 border-slate-300; }
  
  .mobile-week-card { @apply p-4 rounded-lg border border-slate-200 bg-white shadow-sm; }
  .mobile-week-card-has { @apply bg-slate-50 border-slate-300 shadow-md; }

  /* Dividers */
  .divider { @apply h-px bg-slate-200 my-6; }

  /* Nav */
  .app-nav { @apply bg-white/90 backdrop-blur border-b border-slate-200; }
  .app-nav-inner { @apply app-container flex items-center justify-between h-16; }

  /* Utility groups */
  .actions-row { @apply flex flex-wrap gap-3; }

  /* Navigation Pills */
  .nav-bar { @apply flex items-center gap-2; }
  .nav-pill { @apply relative inline-flex items-center px-3 py-2 text-sm font-medium rounded-md text-slate-600 transition-colors; }
  .nav-pill:hover { @apply text-slate-900 bg-gradient-to-br from-slate-100 to-slate-50; }
  .nav-pill-active { @apply text-slate-900; }
  .nav-pill-active::after { content:""; @apply absolute left-2 right-2 -bottom-0.5 h-0.5 rounded-full bg-sky-500; }

  /* Flourish utilities */
  .page-background { @apply relative; }
  .page-background::before { content:""; @apply pointer-events-none absolute inset-0 opacity-40; background-image:radial-gradient(circle at 25% 15%,rgba(148,163,184,0.15),transparent 60%),radial-gradient(circle at 80% 40%,rgba(56,189,248,0.12),transparent 65%); }
  .card-accent-top { @apply relative; }
  .card-accent-top::before { content:""; @apply absolute inset-x-0 top-0 h-1 rounded-t-md bg-gradient-to-r from-sky-500/70 via-slate-300 to-sky-500/70; }
  .heading-decor { @apply relative inline-block; }
  .heading-decor::after { content:""; @apply absolute left-0 -bottom-1 h-1 w-8 rounded-full bg-gradient-to-r from-sky-500 to-slate-400; }
  .accent-chip { @apply inline-flex items-center gap-1 rounded-sm bg-sky-50 text-sky-700 px-2 py-0.5 text-[11px] font-medium ring-1 ring-inset ring-sky-200; }
  .accent-chip-alt { @apply bg-emerald-50 text-emerald-700 ring-emerald-200; }
  .pixel-frame { @apply relative rounded-md border border-slate-300 bg-white; box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 0 2px rgba(148,163,184,.45),0 1px 3px 0 rgba(0,0,0,.05); }
  .pixel-frame::after { content:""; @apply pointer-events-none absolute inset-0 rounded-md; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
  .dot-grid { background-image:radial-gradient(circle at 1px 1px,rgba(148,163,184,0.35) 1px,transparent 0); background-size:22px 22px; }
  .subtle-panel { @apply relative rounded-lg bg-white/90 backdrop-blur ring-1 ring-slate-200; }
  .subtle-panel::before { content:""; @apply absolute inset-0 rounded-lg; background:linear-gradient(135deg,rgba(226,232,240,0.35),rgba(203,213,225,0.15)); mask:linear-gradient(#fff,#000); }
  .heading-bracket { @apply relative font-semibold text-slate-900; }
  .heading-bracket::before, .heading-bracket::after { content:""; @apply absolute top-1/2 -translate-y-1/2 h-4 w-1.5 bg-sky-500 rounded-sm; }
  .heading-bracket::before { @apply -left-3; }
  .heading-bracket::after { @apply -right-3; }
  .mono-kicker { @apply font-mono uppercase tracking-wider text-[10px] text-sky-600 bg-sky-50 px-2 py-0.5 rounded-sm; }
  .gradient-accent-bar { @apply relative; }
  .gradient-accent-bar::before { content:""; @apply absolute left-0 top-0 h-1 w-20 rounded-full bg-gradient-to-r from-sky-500 via-emerald-400 to-sky-600; }
  .hover-accent-border { @apply transition; }
  .hover-accent-border:hover { box-shadow:0 0 0 1px theme('colors.sky.500'); }
  .font-8bit { font-family: 'Press Start 2P', monospace; }

  /* Logo Bar */
  .logo-bar {
    position: relative;
    display: inline-flex; /* center with flex */
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.1rem; /* adjusted for better vertical centering */
    background: linear-gradient(90deg,#0ea5e9 0%,#34d399 55%,#2563eb 100%);
    border-radius: 9999px;
    line-height: 1;
    letter-spacing: 0.32em; /* optical centering */
    box-shadow: 0 1px 2px rgba(0,0,0,0.15),0 0 0 1px rgba(56,189,248,0.35),inset 0 0 0 1px rgba(255,255,255,0.35);
    white-space: nowrap;
  }
  @media (min-width: 640px) {
    .logo-bar { padding: 0.55rem 1.25rem; }
  }
}

@layer utilities {
  .fade-in { @apply animate-[fadeIn_0.25s_ease-out]; }
  @keyframes fadeIn { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:translateY(0);} }
}