/*
  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;
  }
}
/* Custom animations for UI components */

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeSlideIn {
  animation: fadeSlideIn 0.2s ease-out;
}

/* --- Ming mode capybaras ------------------------------------------- */

.capybara-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .capybara-layer {
    display: none;
  }
}

.capybara {
  position: absolute;
}

.capybara__flip {
  display: block;
}

.capybara__flip--mirrored {
  transform: scaleX(-1);
}

/* Idle "alive" motion: gentle bottom-anchored breathing on every pose */
.capybara__body {
  display: block;
  width: 150px;
  height: auto;
  transform-origin: bottom center;
  animation: capybara-breathe 2.5s ease-in-out infinite;
}

@keyframes capybara-breathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.97); }
}

/* Walk: wrapper strolls across the viewport, body waddles */
.capybara--walk {
  bottom: 0;
  left: 0;
  animation: capybara-walk-across 15s linear forwards;
}

.capybara--walk.capybara--rtl {
  animation-name: capybara-walk-across-rtl;
}

@keyframes capybara-walk-across {
  from { transform: translateX(-160px); }
  to { transform: translateX(100vw); }
}

@keyframes capybara-walk-across-rtl {
  from { transform: translateX(100vw); }
  to { transform: translateX(-160px); }
}

/* Waddle replaces breathing while walking (both animate transform, so
   they cannot run on the same element; the waddle's bob reads as alive) */
.capybara__body--waddle {
  animation: capybara-waddle 0.6s ease-in-out infinite;
}

@keyframes capybara-waddle {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-4px); }
}

/* Peek: slide partway in from an edge with a curious tilt, hold, retreat.
   Right/bottom only — the left edge sits under the z-50 sidebar on desktop. */
.capybara--peek-right {
  right: 0;
  animation: capybara-peek-right 5s ease-in-out forwards;
}

@keyframes capybara-peek-right {
  0%, 100% { transform: translateX(110%) rotate(0deg); }
  30%, 70% { transform: translateX(30%) rotate(-6deg); }
}

.capybara--peek-bottom {
  bottom: 0;
  animation: capybara-peek-bottom 5s ease-in-out forwards;
}

@keyframes capybara-peek-bottom {
  0%, 100% { transform: translateY(110%) rotate(0deg); }
  30%, 70% { transform: translateY(35%) rotate(3deg); }
}

/* Rest: sleep (60s) and rare specials (30s) fade in, idle, fade out */
.capybara--rest {
  bottom: 8px;
  animation: capybara-fade 30s ease-in-out forwards;
}

.capybara--rest-slow {
  animation-duration: 60s;
}

/* Corner placement — the left corner must clear the fixed sidebar (w-64) on desktop */
.capybara--corner-right {
  right: 16px;
}

.capybara--corner-left {
  left: 16px;
}

@media (min-width: 1024px) {
  .capybara--corner-left {
    left: calc(16rem + 16px);
  }
}

@keyframes capybara-fade {
  0%, 100% { opacity: 0; }
  5%, 95% { opacity: 1; }
}

/* Slower, deeper breathing while asleep */
.capybara__body--doze {
  animation: capybara-breathe-deep 4s ease-in-out infinite;
}

@keyframes capybara-breathe-deep {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.94); }
}

/* Floating z's layered above the sleeping pose */
.capybara__zzz {
  position: absolute;
  top: -6px;
  right: 24px;
  font-size: 18px;
  font-weight: 700;
  color: #8c7355;
  opacity: 0;
  animation: capybara-zzz 3s ease-out infinite;
}

@keyframes capybara-zzz {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(14px, -34px) scale(1.1); }
}
:root {
  /* Brand Colors */
  --color-primary: #C9C78B;
  --color-primary-light: #e2e1c6;
  --color-primary-dark: #a9a76b;
  
  /* Accent Colors */
  --color-terracotta: #C4977A;
  --color-dusty-teal: #7BA3A8;

  /* 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);
}

.text-terracotta {
  color: var(--color-terracotta);
}

.bg-terracotta {
  background-color: var(--color-terracotta);
}

.bg-dusty-teal {
  background-color: var(--color-dusty-teal);
}

.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; }

/* Active Utilities */
.active\:bg-brand:active { background-color: var(--color-primary); }

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

/* Accent Color Brand (for native checkbox/radio tinting) */
.accent-brand { accent-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); }

/* Calculator pad toggle: open state matches the pad's operator keys */
.calculator-pad-toggle[aria-expanded="true"] {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/* ══ TomSelect overrides (ported from FluxInc/configatorium, re-tokened) ══
   The base CSS comes from the CDN <link> which loads after this file —
   hence the !important on rules that must beat it. Geometry and colors
   mirror .form-input in app/assets/tailwind/application.css. */

/* Hide original select when TomSelect is active — visually hidden but
   still findable by Capybara (do NOT change to display:none). */
select.ts-hidden-accessible {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* TomSelect copies the original select's classes (e.g. form-select) onto
   the wrapper — reset them so only the inner .ts-control shows styling. */
.ts-wrapper {
  position: relative;
  z-index: 1;
  height: auto !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ts-wrapper.focus {
  z-index: 51;
}

/* The control clones .form-input */
.ts-wrapper .ts-control {
  height: 38px;
  min-height: 38px;
  border-radius: 4px !important;
  border: 1px solid var(--color-form-border) !important;
  background: #fff !important;
  padding: 2px 12px !important;
  font-size: 14px;
  line-height: 1.25rem;
  box-shadow: 0 1px 2px rgba(40, 38, 25, 0.04) !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  align-items: center !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ts-wrapper .ts-control:hover {
  border-color: var(--color-form-border-hover) !important;
}

.ts-wrapper.focus .ts-control {
  border-color: var(--color-sage-600) !important;
  box-shadow: 0 0 0 3px rgba(201, 199, 139, 0.32), 0 1px 2px rgba(40, 38, 25, 0.04) !important;
}

/* Propagate the error state (class copied onto the wrapper) to the control */
.ts-wrapper.form-input-error .ts-control {
  border-color: var(--color-form-error) !important;
}

.ts-wrapper.form-input-error.focus .ts-control {
  border-color: var(--color-form-error) !important;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.15), 0 1px 2px rgba(40, 38, 25, 0.04) !important;
}

/* When an item is selected, collapse the inner search input so it doesn't
   push the item or show a stray placeholder */
.ts-wrapper .ts-control > .item ~ input {
  width: 0 !important;
  min-width: 0 !important;
  flex: 0 0 0px !important;
  overflow: hidden !important;
  position: absolute !important;
}

.ts-wrapper .ts-control > .item ~ input::placeholder {
  color: transparent !important;
}

/* …but restore it on focus so the user can type to search */
.ts-wrapper.focus .ts-control > .item ~ input {
  position: relative !important;
  width: 0 !important;
  flex: 1 1 auto !important;
}

/* When nothing is selected, the input fills the control */
.ts-wrapper .ts-control:not(.has-items) > input {
  width: 100% !important;
}

/* Inner search input: no border-inside-a-border, no inner focus outline */
.ts-wrapper .ts-control > input {
  font-size: 14px !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  background: transparent !important;
}

.ts-wrapper .ts-control > input:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.ts-wrapper .ts-control > .item {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

/* Dropdown as a card */
.ts-wrapper .ts-dropdown {
  z-index: 50;
  border-radius: 4px;
  border: 1px solid var(--color-form-border);
  background: #fff;
  box-shadow: 0 4px 12px rgba(40, 38, 25, 0.1);
}

.ts-wrapper .ts-dropdown .option.active {
  background-color: var(--color-sage-100);
  color: var(--color-sage-800);
}

/* Optgroup headers (kept from the previous styling, unchanged look) */
.ts-dropdown .optgroup-header {
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 0.75rem;
  cursor: default;
  border-bottom: 1px solid var(--color-gray-200);
}

.ts-dropdown .optgroup .option {
  padding-left: 1.25rem;
}
/*
 * 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.
 *



 */