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

/* Force dark mode - root level custom properties */
:root {
  --bg-primary: #111827; /* gray-900 */
  --text-primary: #f3f4f6; /* gray-100 */
  --bg-secondary: #1f2937; /* gray-800 */
  --text-secondary: #d1d5db; /* gray-300 */
}

/* Fallback styles in case Tailwind dark: variants fail */
html.dark body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

body {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-display: block;
}

.homepage-label {
  @apply text-sm font-semibold leading-6 uppercase text-accent;
}


.form-label {
  @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
}

.form-input {
  @apply block w-full px-4 py-3 placeholder-gray-400 dark:placeholder-gray-500 border border-gray-300 dark:border-gray-600 rounded-xl appearance-none text-base bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-accent/30 focus:border-accent transition-all duration-200 ease-out;
}

.form-input-inline {
  @apply block w-full py-2 px-0 placeholder-gray-400 dark:placeholder-gray-500 appearance-none text-base bg-white dark:bg-transparent text-gray-900 dark:text-gray-100 focus:outline-none border-none focus:border-none focus:shadow-none focus:ring-0 focus:outline-none caret-accent placeholder-gray-200 dark:placeholder-gray-600;
}
.form-input-inline:empty:before{
  content: attr(placeholder);
  @apply text-gray-200 dark:text-gray-600;
}

.prose>div, .prose {
 padding-bottom:.75rem;
 padding-top:.75rem
}

.prose p.is-editor-empty:first-child::before {
  @apply text-gray-200 dark:text-gray-700;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}


.attachment--video {
  @apply w-full h-auto object-cover;
}
.form-space {
 @apply space-y-6;
}

.form-input:disabled {
  @apply cursor-not-allowed bg-gray-050 dark:bg-gray-700 text-gray-700 dark:text-gray-400;
}

/* https://tailwindui.com/components/application-ui/forms/input-groups#component-1ef4d534fa0cbcb38331bafa5c352ff8 */
.form-input-added-on {
  @apply form-input;
  @apply flex-1 min-w-0 rounded-none rounded-r-md;
}

.form-input-added-on-parent {
  .field_with_errors {
    @apply flex-1;
  }
}

.turbo-progress-bar {
  @apply h-0.5 bg-accent;
}

img {
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
img:-moz-loading {
  visibility: hidden;
}

.container {
  @apply px-6 mx-auto max-w-7xl lg:px-8;
}

.lg-container {
  @apply px-0 mx-auto max-w-7xl lg:px-8 lg:mx-auto;
}


.btn {
  @apply inline-flex items-center justify-center px-6 py-3 rounded-full font-medium no-underline cursor-pointer transition-all duration-200 ease-out;
}

.btn-big {
  @apply px-8 py-4 md:py-4 md:text-lg font-semibold;
}

.btn-small {
  @apply px-4 py-2 text-sm;
}

.btn-responsive {
  @apply btn-small md:px-6 md:py-3 md:text-base;
}

.btn-primary {
  @apply bg-accent text-white shadow-md hover:shadow-lg hover:bg-accent/90 focus:ring-2 focus:ring-accent/30 focus:ring-offset-2;
}

.btn-secondary {
  @apply text-accent border border-accent bg-transparent hover:bg-accent/5 focus:ring-2 focus:ring-accent/30 focus:ring-offset-2;
}

.btn-tertiary {
  @apply bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-0 hover:bg-gray-200 dark:hover:bg-gray-600 focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600;
}

.trix-editor {
  @apply prose max-w-none focus:outline-none focus:ring-gray-500 dark:focus:ring-gray-400 focus:border-gray-500 dark:focus:border-gray-400 focus:ring-0 !important;
  min-height:200px;
}

/* Ensure Trix editor content has proper contrast in dark mode */
.trix-editor {
  @apply dark:text-gray-100 !important;
}

/* Ensure images are visible in Trix editor */
.trix-editor .attachment,
.trix-editor action-text-attachment,
.trix-editor img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 1rem auto !important;
}

/* Fix Action Text attachment display in editor */
.trix-editor action-text-attachment {
  display: block !important;
  text-align: center !important;
}

.trix-editor action-text-attachment img {
  max-width: 100% !important;
  height: auto !important;
  display: inline-block !important;
}

.public-page-container {
  @apply max-w-3xl px-6 mx-auto lg:px-8 w-full;
}

.dashboard-container {
  @apply px-4 sm:px-8 lg:px-12 mx-auto w-full;
}
.dashboard-y-container {
  @apply py-6 w-full mb-8 lg:mb-0;
}

.dashboard-title {
  @apply text-2xl font-semibold leading-6 text-gray-950 dark:text-gray-050;
}

.form-description {
  @apply text-gray-700 dark:text-gray-400 text-xs pt-1;
}
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-accent text-gray-050;
}

.badge-secondary {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium border border-accent text-accent;
}

.badge-secondary-gray {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium border border-gray-600 dark:border-gray-400 text-gray-600 dark:text-gray-400;
}

.record {
  @apply bg-gray-050 dark:bg-gray-700 font-mono text-gray-700 dark:text-gray-200 px-1 rounded-sm select-all;
}

.link {
  @apply text-accent underline cursor-pointer;
}

/* Type setting */

.prose {
  @apply text-gray-950 dark:text-gray-100 max-w-none leading-relaxed;
}

.prose h1, h2 {
  @apply text-2xl font-bold leading-tight text-gray-925 dark:text-gray-100;
}

.prose h3 {
  @apply text-xl font-semibold leading-tight text-gray-925 dark:text-gray-100;
}

.prose h4 {
  @apply text-lg font-semibold leading-tight text-gray-925 dark:text-gray-100;
}

.prose blockquote {
  @apply font-normal !border-accent not-italic;
  border-left-width: 2px;
}

.prose a {
  @apply !font-normal;
}
.prose img {
  max-width: 100%;
  height: auto;
  @apply my-0 mx-auto;
}
.prose ul {
  @apply marker:text-gray-800 dark:marker:text-gray-300;
}
.prose .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
  @apply my-4;
}
.prose .attachment a { color: inherit; text-decoration: none; }
.prose .attachment a:hover,
.prose .attachment a:visited:hover { color: inherit; }
.prose .attachment__caption { text-align: center; }
.prose .attachment__caption .attachment__name + .attachment__size::before { content: " · "; }
.prose .attachment--preview { width: 100%; text-align: center; }
.prose .attachment--preview .attachment__caption { color: #666; font-size: 0.9em; line-height: 1.2; }
.prose .attachment--file { color: #333; line-height: 1; margin: 0 2px 2px 2px; padding: 0.4em 1em; border: 1px solid #bbb; border-radius: 5px; }
.prose .attachment-gallery { display: flex; flex-wrap: wrap; position: relative; }
.prose .attachment-gallery .attachment { flex: 1 0 33%; padding: 0 0.5em; max-width: 33%; }
.prose .attachment-gallery.attachment-gallery--2 .attachment,
.prose .attachment-gallery.attachment-gallery--4 .attachment { flex-basis: 50%; max-width: 50%; }

.flash {
  @apply text-sm font-semibold text-gray-950 dark:text-gray-100 w-full max-w-sm overflow-hidden rounded-lg shadow-lg pointer-events-auto lg:mb-0 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-4;
}

.placeholder-center::placeholder,
.placeholder-center::-webkit-input-placeholder,
.placeholder-center:-moz-placeholder,
.placeholder-center::-moz-placeholder,
.placeholder-center:-ms-input-placeholder,
.placeholder-center::-ms-input-placeholder {
    text-align: center;
}

.dropdown-menu {
  @apply absolute z-40 bg-white dark:bg-gray-800 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none w-48 py-1;
}

.dropdown-menu-item {
  @apply flex block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-050 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100;
}

/* Material 3 Typography Scale */
.display-large { @apply text-6xl font-normal leading-tight; }
.display-medium { @apply text-5xl font-normal leading-tight; }
.display-small { @apply text-4xl font-normal leading-tight; }

.headline-large { @apply text-3xl font-normal leading-tight; }
.headline-medium { @apply text-2xl font-normal leading-tight; }
.headline-small { @apply text-xl font-normal leading-tight; }

.title-large { @apply text-lg font-medium leading-normal; }
.title-medium { @apply text-base font-medium leading-normal; }
.title-small { @apply text-sm font-medium leading-normal; }

.body-large { @apply text-base font-normal leading-relaxed; }
.body-medium { @apply text-sm font-normal leading-relaxed; }
.body-small { @apply text-xs font-normal leading-relaxed; }

.label-large { @apply text-sm font-medium leading-tight; }
.label-medium { @apply text-xs font-medium leading-tight; }
.label-small { @apply text-xs font-medium leading-tight; }

.page-title {
  @apply text-3xl font-bold leading-relaxed lg:text-4xl text-gray-950 dark:text-gray-100 break-words;
}

trix-toolbar {
  @apply sticky top-0 z-10;
}

trix-editor:empty:not(:focus)::before {
  @apply text-gray-200 dark:text-gray-700;
}

.overlay {
  height: 0px;
  overflow: visible;
  pointer-events: none;
  background:none !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*
  GOOGLE MAPS INFOWINDOW RESET
  This removes the default bubble, padding, and close button,
  allowing a fully custom HTML bubble to take its place.
*/

/* Makes the main outer bubble wrapper transparent and removes padding/shadow */
.gm-style-iw-c {
  padding: 0 !important;
  background-color: transparent;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important; /* Your custom bubble already handles this */
}

/* Removes padding from the inner content wrapper (the source of the empty space) */
.gm-style-iw-d {
  padding: 0 !important;
  overflow: hidden !important; /* Prevents unwanted scrollbars */
}

/* Hides Google's default 'X' close button. Your custom JS button will still work. */
.gm-ui-hover-effect {
  display: none !important;
}

/* STYLES THE ANCHOR TAIL
  This targets the triangle and styles it to match the custom bubble colors
  you defined in your home_map_controller.js
*/

/* Targets the outer part of the tail (creates the border) */
.gm-style-iw-t::after {
  background-color: #111827 !important; /* Your bubble's dark background */
  box-shadow: none !important;
  border-top-color: #4b5563 !important;  /* Your bubble's border color */
}

/* Force dark styling on Google Maps container */
[data-controller="home-map"], [data-controller="map"] {
  border: 2px solid #1f2937 !important; /* gray-800 */
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Override any white backgrounds in Google Maps UI */
.gm-style > div, .gm-style div {
  background-color: transparent !important;
}
.grecaptcha-badge {
  visibility: hidden !important;
}