@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

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

@layer base {
  :root {
    /* macOS-inspired neutral palette */
    --background: 220 20% 97%;
    --foreground: 222 25% 12%;

    --card: 0 0% 100%;
    --card-foreground: 222 25% 12%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 25% 12%;

    --primary: 211 100% 50%;
    --primary-foreground: 0 0% 100%;

    --secondary: 220 14% 94%;
    --secondary-foreground: 222 25% 12%;

    --muted: 220 14% 94%;
    --muted-foreground: 220 9% 46%;

    --accent: 220 14% 94%;
    --accent-foreground: 222 25% 12%;

    --destructive: 5 78% 57%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 13% 88%;
    --input: 220 13% 88%;
    --ring: 211 100% 50%;

    --radius: 1rem;

    /* macOS translucent sidebar */
    --sidebar-background: 220 20% 96%;
    --sidebar-foreground: 222 25% 18%;
    --sidebar-primary: 211 100% 50%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 14% 90%;
    --sidebar-accent-foreground: 222 25% 12%;
    --sidebar-border: 220 13% 86%;
    --sidebar-ring: 211 100% 50%;

    /* Semantic tokens */
    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;

    /* Custom */
    --navy: 222 25% 12%;
    --navy-light: 222 25% 22%;
    --gradient-start: 211 100% 60%;
    --gradient-end: 262 83% 65%;
    --surface-elevated: 0 0% 100%;
    --kpi-blue: 211 100% 50%;
    --kpi-violet: 262 83% 58%;
    --kpi-amber: 38 92% 50%;
    --kpi-emerald: 142 71% 45%;

    /* macOS glass shadow */
    --shadow-glass: 0 8px 32px -4px hsl(222 25% 12% / 0.08), 0 2px 6px -2px hsl(222 25% 12% / 0.05);
    --shadow-elevated: 0 20px 60px -10px hsl(222 25% 12% / 0.18), 0 4px 12px -4px hsl(222 25% 12% / 0.08);
  }

  .dark {
    --background: 222 25% 8%;
    --foreground: 210 20% 96%;
    --card: 222 25% 12%;
    --card-foreground: 210 20% 96%;
    --popover: 222 25% 12%;
    --popover-foreground: 210 20% 96%;
    --primary: 211 100% 55%;
    --primary-foreground: 0 0% 100%;
    --secondary: 222 20% 18%;
    --secondary-foreground: 210 20% 96%;
    --muted: 222 20% 18%;
    --muted-foreground: 220 10% 65%;
    --accent: 222 20% 18%;
    --accent-foreground: 210 20% 96%;
    --destructive: 5 70% 50%;
    --destructive-foreground: 210 20% 96%;
    --border: 222 20% 22%;
    --input: 222 20% 22%;
    --ring: 211 100% 55%;
    --sidebar-background: 222 25% 10%;
    --sidebar-foreground: 210 20% 92%;
    --sidebar-primary: 211 100% 55%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 222 20% 16%;
    --sidebar-accent-foreground: 210 20% 96%;
    --sidebar-border: 222 20% 18%;
    --sidebar-ring: 211 100% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply text-foreground font-sans antialiased;
    font-size: 13px;
    line-height: 1.5;
    background:
      radial-gradient(ellipse 80% 60% at 20% 0%, hsl(211 100% 92% / 0.55), transparent 60%),
      radial-gradient(ellipse 70% 50% at 100% 20%, hsl(262 83% 92% / 0.45), transparent 60%),
      radial-gradient(ellipse 60% 70% at 50% 100%, hsl(190 80% 92% / 0.4), transparent 60%),
      hsl(var(--background));
    background-attachment: fixed;
  }

  .dark body {
    background:
      radial-gradient(ellipse 80% 60% at 20% 0%, hsl(211 60% 20% / 0.5), transparent 60%),
      radial-gradient(ellipse 70% 50% at 100% 20%, hsl(262 50% 18% / 0.4), transparent 60%),
      hsl(var(--background));
    background-attachment: fixed;
  }
}

/* macOS Big Sur / Sonoma glass surfaces */
@layer components {
  /* Cards: frosted glass */
  .bg-card,
  [class~="bg-card"] {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    background-color: hsl(var(--card) / 0.72) !important;
    box-shadow: var(--shadow-glass);
  }

  /* Dialogs */
  [role="dialog"][data-state] {
    backdrop-filter: saturate(180%) blur(28px);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    background-color: hsl(var(--background) / 0.78) !important;
    box-shadow: var(--shadow-elevated) !important;
    border-radius: calc(var(--radius) + 4px) !important;
  }

  /* Popovers, dropdowns, selects, command menus */
  [data-radix-popper-content-wrapper] > * {
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    background-color: hsl(var(--popover) / 0.82) !important;
    box-shadow: var(--shadow-glass) !important;
    border-radius: calc(var(--radius) - 2px) !important;
  }

  /* Sidebar: translucent vibrancy */
  [data-sidebar="sidebar"] {
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    background-color: hsl(var(--sidebar-background) / 0.7) !important;
    border-right: 1px solid hsl(var(--sidebar-border) / 0.6);
  }

  /* Top nav: bubblier rounded translucent header */
  header,
  nav[role="navigation"] {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }

  /* Buttons: pill-shaped with subtle gradient + glass */
  button.inline-flex:not([data-sidebar]):not([role="tab"]):not([role="checkbox"]):not([role="radio"]):not([role="switch"]):not([class*="rounded-full"]) {
    border-radius: 9999px;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  }
  button.inline-flex:not([disabled]):active {
    transform: scale(0.97);
  }

  /* Inputs: softer, bubbly */
  input.flex,
  textarea.flex,
  select.flex {
    border-radius: calc(var(--radius) - 4px);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: hsl(var(--background) / 0.6) !important;
  }

  /* Hero gradient banner */
  .cc-hero-gradient {
    background: linear-gradient(135deg, hsl(var(--gradient-start)), hsl(var(--gradient-end)));
  }

  /* Card hover lift */
  .cc-card-hover {
    @apply transition-all duration-200;
  }
  .cc-card-hover:hover {
    box-shadow: var(--shadow-elevated);
    transform: translateY(-2px);
  }


  /* KPI number */
  .cc-kpi {
    @apply text-[30px] font-semibold tracking-tight leading-none;
  }

  /* Page title */
  .cc-page-title {
    @apply text-[22px] font-semibold tracking-tight;
  }

  /* Section title */
  .cc-section-title {
    @apply text-[15px] font-semibold;
  }

  /* Card title */
  .cc-card-title {
    @apply text-[13px] font-medium;
  }

  /* Metadata */
  .cc-meta {
    @apply text-[12px] text-muted-foreground;
  }

  /* Compact table */
  .cc-table th {
    @apply text-[11px] font-semibold uppercase tracking-wider text-muted-foreground bg-muted/50 py-2 px-3;
  }
  .cc-table td {
    @apply text-[13px] py-2.5 px-3;
  }

  /* Status badges */
  .cc-badge-success {
    @apply bg-emerald-50 text-emerald-700 border-emerald-200;
  }
  .cc-badge-warning {
    @apply bg-amber-50 text-amber-700 border-amber-200;
  }
  .cc-badge-danger {
    @apply bg-red-50 text-red-700 border-red-200;
  }
  .cc-badge-info {
    @apply bg-blue-50 text-blue-700 border-blue-200;
  }
  .cc-badge-neutral {
    @apply bg-gray-50 text-gray-600 border-gray-200;
  }
}

/* Letter Generator Quill Editor */
.letter-quill-editor .ql-container {
  min-height: 300px;
  font-size: 0.875rem;
  line-height: 1.625;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.letter-quill-editor .ql-toolbar {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  background: hsl(var(--muted) / 0.3);
}
.letter-quill-editor .ql-editor.ql-blank::before {
  font-style: italic;
  color: hsl(var(--muted-foreground));
}

/* Quill custom font families */
.ql-font-arial { font-family: Arial, Helvetica, sans-serif; }
.ql-font-times-new-roman { font-family: "Times New Roman", Times, serif; }
.ql-font-georgia { font-family: Georgia, serif; }
.ql-font-courier-new { font-family: "Courier New", Courier, monospace; }
.ql-font-verdana { font-family: Verdana, Geneva, sans-serif; }
.ql-font-trebuchet-ms { font-family: "Trebuchet MS", Helvetica, sans-serif; }

/* Quill font picker labels */
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before { content: "Sans Serif"; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before { content: "Arial"; font-family: Arial, sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times-new-roman"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times-new-roman"]::before { content: "Times New Roman"; font-family: "Times New Roman", serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before { content: "Georgia"; font-family: Georgia, serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier-new"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier-new"]::before { content: "Courier New"; font-family: "Courier New", monospace; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="verdana"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="verdana"]::before { content: "Verdana"; font-family: Verdana, sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="trebuchet-ms"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="trebuchet-ms"]::before { content: "Trebuchet MS"; font-family: "Trebuchet MS", sans-serif; }

/* Quill size picker labels */
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "Normal"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="9px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="9px"]::before { content: "9px"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before { content: "10px"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="11px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="11px"]::before { content: "11px"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { content: "12px"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: "14px"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { content: "16px"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: "18px"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { content: "20px"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: "24px"; }

/* Page break marker in editor */
.page-break-marker {
  border: none;
  border-top: 2px dashed hsl(var(--primary) / 0.5);
  margin: 12px 0;
  height: 0;
  position: relative;
  cursor: default;
}
.page-break-marker::after {
  content: "— Page Break —";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: hsl(var(--background));
  padding: 0 8px;
  font-size: 10px;
  color: hsl(var(--primary));
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Wider toolbar pickers for letter editor */
.letter-quill-editor .ql-snow .ql-picker.ql-font {
  width: 140px;
}
.letter-quill-editor .ql-snow .ql-picker.ql-size {
  width: 70px;
}

/* Minutes mini rich-text editor */
.minutes-quill-block .ql-toolbar.ql-snow {
  border: none;
  padding: 2px 4px;
  border-bottom: 1px solid hsl(var(--border));
}
.minutes-quill-block .ql-container.ql-snow {
  border: 1px solid hsl(var(--border));
  border-radius: 0 0 6px 6px;
  font-size: 0.875rem;
  min-height: 40px;
}
.minutes-quill-block .ql-editor {
  padding: 6px 10px;
  min-height: 40px;
}
.minutes-quill-block .ql-editor.ql-blank::before {
  font-style: italic;
  color: hsl(var(--muted-foreground));
  font-size: 0.8rem;
}
.minutes-quill-block.motion-block .ql-container.ql-snow {
  background: hsl(var(--primary) / 0.05);
  border-color: hsl(var(--primary) / 0.2);
}

/* Scrolling marquee banner for community page announcements */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 30s linear infinite;
}
.animate-marquee:hover {
  animation-play-state: paused;
}

/* Keep Leaflet/Mapbox map panes & controls below Radix dialogs/popovers.
   Leaflet defaults panes to z-index 200-700 and controls to 1000, which can
   render above modal overlays. Constrain them to a low stacking context. */
.leaflet-container {
  z-index: 0;
}
.leaflet-pane,
.leaflet-top,
.leaflet-bottom {
  z-index: 1;
}
.leaflet-control {
  z-index: 2;
}
