/* Aegis Pulse — minimal custom styles on top of DaisyUI */

/* Alpine x-cloak — hide elements until Alpine initializes them, prevents
   flash-of-unstyled content when htmx swaps partials in. */
[x-cloak] { display: none !important; }

/* Kill all DaisyUI shadows — Overseer uses flat cards with borders only */
.card, .stat, [class*="bg-base-300"], [class*="bg-aegis-card"] {
  box-shadow: none !important;
}

/* Dark-scheme native controls — tells the browser to render the native date
   picker popup, scrollbars, and form control internals in dark mode.
   `accent-color` tints selected dates/checkboxes/radios with the Aegis teal
   so the native picker matches the rest of the UI. */
:root {
  color-scheme: dark;
  accent-color: #17CCBF; /* aegis-teal */
}

/* Hide the default browser calendar icon on date inputs so the input itself
   matches our other form fields. Users still click the input to open the
   native picker — the icon was the only tell that the picker was native. */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7); /* makes the icon visible on dark backgrounds */
  cursor: pointer;
  opacity: 0.5;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Flatpickr theme overrides — match the Aegis palette.
   The defaults are light and blue; we want dark + teal, matching cards
   elsewhere in the app. Selectors mirror flatpickr's own structure — we
   only override color / border / background and keep the layout intact. */
.flatpickr-calendar {
  background: #111418;                 /* aegis-card */
  border: 1px solid #272C36;           /* aegis-border */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  border-radius: 0.5rem;
  color: #EEF1F4;                      /* aegis-text */
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowBottom::before { border-bottom-color: #272C36; }
.flatpickr-calendar.arrowTop::after    { border-bottom-color: #111418; }
.flatpickr-calendar.arrowBottom::after { border-top-color:    #111418; }

.flatpickr-months,
.flatpickr-months .flatpickr-month {
  background: transparent;
  color: #EEF1F4;
  border-bottom: 1px solid #272C36;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: #EEF1F4;
  background: transparent;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: rgba(23, 204, 191, 0.1); }
.flatpickr-monthDropdown-month                                 { background: #111418; color: #EEF1F4; }

.flatpickr-prev-month, .flatpickr-next-month            { fill: #7E8A9A; }
.flatpickr-prev-month:hover, .flatpickr-next-month:hover { fill: #17CCBF; }

.flatpickr-weekdays                { background: transparent; }
.flatpickr-weekday                 { color: #7E8A9A !important; background: transparent !important; }

.flatpickr-day {
  color: #EEF1F4;
  border-radius: 0.25rem;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: rgba(23, 204, 191, 0.1);   /* aegis-teal/10 */
  border-color: transparent;
  color: #EEF1F4;
}
.flatpickr-day.today {
  border-color: #17CCBF;                 /* aegis-teal */
}
.flatpickr-day.today:hover {
  background: rgba(23, 204, 191, 0.2);
  color: #EEF1F4;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: #17CCBF;                   /* aegis-teal */
  border-color: #17CCBF;
  color: #0B0F14;                        /* dark text on teal */
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: rgba(126, 138, 154, 0.5);       /* muted */
}
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
  color: rgba(126, 138, 154, 0.3);
}

.numInputWrapper span.arrowUp::after   { border-bottom-color: #7E8A9A; }
.numInputWrapper span.arrowDown::after { border-top-color:    #7E8A9A; }
.numInputWrapper:hover                 { background: rgba(23, 204, 191, 0.05); }

/* Custom <select> chevron. Native carets sit too close to the right edge
   on the dark-themed selects we use across the app; ``.pulse-select`` pairs
   with Tailwind's ``appearance-none`` and ``pr-10`` to swap the native
   arrow for a hand-rolled SVG with breathing room. */
.pulse-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237E8A9A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
}
.pulse-select:hover,
.pulse-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2317CCBF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}

/* Pulse loader — EKG scanline overlay used by long-running submits.
   The track is a static, faint path; the beam shares the same path but
   uses ``stroke-dasharray`` + an animated ``stroke-dashoffset`` so a
   single teal segment appears to travel from left to right, looping.
   ``prefers-reduced-motion`` users get a calm pulsing dot instead. */
.aegis-pulse-ekg {
  display: inline-block;
  color: #17CCBF;  /* aegis-teal */
}
.aegis-pulse-ekg__track {
  stroke: rgba(126, 138, 154, 0.35);  /* aegis-muted, low alpha */
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aegis-pulse-ekg__beam {
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(23, 204, 191, 0.6));
  /* Path length ~360 viewBox units; dasharray draws a 70-unit lit
     segment trailing into a long gap so only one segment is visible
     at a time, looping. Slower than the 240px version so the
     larger scanline still reads as calm rather than racing. */
  stroke-dasharray: 70 360;
  stroke-dashoffset: 70;
  animation: aegis-pulse-ekg-scan 2s linear infinite;
}
@keyframes aegis-pulse-ekg-scan {
  from { stroke-dashoffset: 70; }
  to   { stroke-dashoffset: -360; }
}
@media (prefers-reduced-motion: reduce) {
  /* Drop the moving scanline: render a calm pulsing dot in its place
     so vestibular-sensitive users get the same "we're working" cue
     without the horizontal motion. */
  .aegis-pulse-ekg__beam {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0;
  }
  .aegis-pulse-ekg::after {
    content: "";
    display: block;
    /* SVG is now 100px tall; pull the dot up by half that so it
       lands where the heartbeat spike used to draw the eye. */
    width: 18px;
    height: 18px;
    margin: -64px auto 46px auto;
    border-radius: 50%;
    background: #17CCBF;
    animation: aegis-pulse-ekg-dot 1.4s ease-in-out infinite;
  }
}
@keyframes aegis-pulse-ekg-dot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.45; }
}

/* Smooth htmx transitions */
.htmx-settling {
  opacity: 0;
}
.htmx-swapping {
  opacity: 0;
  transition: opacity 100ms ease-out;
}
.htmx-added {
  opacity: 0;
}