/*
  Calendar styles
  - Light, thin, and clean
  - Square-ish edges, airy spacing
  - Uses CSS variables from custom palette (see app/assets/stylesheets/custom.css)
*/

.calendar-weekdays,
.calendar-week-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
}

.calendar-month {
  display: grid;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-gray-600);
}

.calendar-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.calendar-legend__swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.calendar-week-columns {
  display: grid;
  gap: 0.75rem;
  height: 30rem;
  overflow-y: auto;
  padding-right: 0.5rem;
}

@media (min-width: 768px) {
  .calendar-week-columns {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

.calendar-week-row>a {
  min-height: 56px;
}

@media (min-width: 640px) {
  .calendar-week-row>a {
    min-height: 110px;
  }
}

@media (min-width: 1024px) {
  .calendar-week-row>a {
    min-height: 124px;
  }
}

.calendar-adjacent {
  background-color: var(--color-gray-50);
  opacity: 0.6;
}

/* Custom scrollbar styling for week view entry lists */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-300);
  border-radius: 2px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-gray-400);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply antialiased;
  }
}

@layer components {
  .btn-primary {
    @apply bg-gradient-to-r from-tertiary to-tertiary-dark hover:from-tertiary-dark hover:to-tertiary
           text-quaternary font-medium py-4 px-5 rounded-xl
           focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-tertiary
           transition duration-200 ease-in-out transform hover:-translate-y-0.5;
  }

  .form-input {
    @apply appearance-none block w-full px-5 py-4 border-2 border-primary/30 rounded-xl
           text-secondary placeholder-primary/50
           focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary
           transition duration-200 ease-in-out text-lg;
  }
} 
:root {
  /* Brand Colors */
  --color-primary: #C9C78B;
  --color-primary-light: #e2e1c6;
  --color-primary-dark: #a9a76b;
  
  /* Background Colors */
  --color-bg-primary: var(--color-primary);
  --color-bg-primary-light: var(--color-primary-light);
  --color-bg-primary-dark: var(--color-primary-dark);
  
  /* Text Colors */
  --color-text-on-primary: #ffffff;
  --color-text-on-primary-light: rgba(255, 255, 255, 0.7);

  /* Status Colors */
  --color-success: #34c759;
  --color-warning: #ff9500;
  --color-danger: #ff3b30;
  --color-info: #0a84ff;

  /* Status Background Colors */
  --color-success-light: #edf9f0;
  --color-warning-light: #fff5eb;
  --color-danger-light: #feeeee;
  --color-info-light: #e6f3ff;

  /* Neutral Colors */
  --color-gray-50: #f8f8f8;
  --color-gray-100: #f2f2f2;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a3a3a3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;
}

/* Utility classes for our custom colors */
.bg-brand {
  background-color: var(--color-primary);
}

.bg-brand-light {
  background-color: var(--color-primary-light);
}

.bg-brand-dark {
  background-color: var(--color-primary-dark);
}

.text-brand {
  color: var(--color-primary);
}

.text-brand-light {
  color: var(--color-primary-light);
}

.text-brand-dark {
  color: var(--color-primary-dark);
}

.border-brand {
  border-color: var(--color-primary);
}

.from-brand {
  --tw-gradient-from: var(--color-primary);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(201, 199, 139, 0));
}

.to-brand-dark {
  --tw-gradient-to: var(--color-primary-dark);
}

/* Status Colors */
.bg-status-success { background-color: var(--color-success); }
.bg-status-warning { background-color: var(--color-warning); }
.bg-status-danger { background-color: var(--color-danger); }
.bg-status-info { background-color: var(--color-info); }

.text-status-success { color: var(--color-success); }
.text-status-warning { color: var(--color-warning); }
.text-status-danger { color: var(--color-danger); }
.text-status-info { color: var(--color-info); }

/* Status Background Light */
.bg-status-success-light { background-color: var(--color-success-light); }
.bg-status-warning-light { background-color: var(--color-warning-light); }
.bg-status-danger-light { background-color: var(--color-danger-light); }
.bg-status-info-light { background-color: var(--color-info-light); }

/* Text on Dark */
.text-on-dark { color: var(--color-text-on-primary); }
.text-on-dark-light { color: var(--color-text-on-primary-light); }

/* Border Utilities */
.border-light { border-color: rgba(255, 255, 255, 0.1); }
.border-status-success { border-color: var(--color-success); }
.border-status-warning { border-color: var(--color-warning); }
.border-status-danger { border-color: var(--color-danger); }
.border-status-info { border-color: var(--color-info); }

/* Hover Utilities */
.hover\:text-brand:hover { color: var(--color-primary); }
.hover\:text-brand-dark:hover { color: var(--color-primary-dark); }
.hover\:bg-brand-dark:hover { background-color: var(--color-primary-dark); }
.hover\:opacity-90:hover { opacity: 0.9; }
.hover\:opacity-80:hover { opacity: 0.8; }

/* Focus Ring Brand */
.focus\:ring-brand:focus { --tw-ring-color: var(--color-primary); }

/* Additional Brand Utilities for Landing Pages */
.hover\:bg-brand\/10:hover { background-color: rgba(201, 199, 139, 0.1); }
.border-brand-dark { border-color: var(--color-primary-dark); } 
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */