/* Import base Flatpickr styles from CDN */
@import url('https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css');

/* =============================================
   Brand Calendar Theme (Light)
   ============================================= */

/* Calendar container */
.flatpickr-calendar {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: #ffffff;
  overflow: hidden;
  padding: 0;
  z-index: 9999;
}

/* Tighten the days container so it sits flush */
.flatpickr-calendar .flatpickr-rContainer {
  padding: 0;
}

/* Remove default bottom padding that creates orphan gap */
.flatpickr-calendar .dayContainer {
  padding: 4px 0 2px;
  min-width: 280px;
  max-width: 280px;
}

/* Month header bar */
.flatpickr-months {
  background-color: hsl(153 68% 40%);
  border-radius: 0;
  padding: 0;
  height: 44px;
  align-items: center;
}

.flatpickr-months .flatpickr-month {
  color: #ffffff;
  height: 44px;
  fill: #ffffff;
}

.flatpickr-current-month {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  padding-top: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Month dropdown */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  padding: 2px 4px;
  appearance: none;
  -webkit-appearance: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.3);
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background-color: hsl(153 68% 40%);
  color: #ffffff;
}

/* Year input */
.flatpickr-current-month .numInputWrapper {
  width: 7ch;
}

.flatpickr-current-month .numInputWrapper input {
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 4px;
}

.flatpickr-current-month .numInputWrapper input:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.flatpickr-current-month .numInputWrapper input:focus {
  background-color: rgba(255, 255, 255, 0.3);
  outline: none;
}

.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
  display: none;
}

/* Prev/Next arrows — force white, vertically centered */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: #ffffff;
  fill: #ffffff;
  padding: 0 14px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  position: static;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: #ffffff !important;
  width: 12px;
  height: 12px;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: rgba(255, 255, 255, 0.7) !important;
}

/* Weekday labels */
.flatpickr-weekdays {
  padding: 12px 0 4px;
  background: transparent;
}

span.flatpickr-weekday {
  color: #9ca3af;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Day cells */
.flatpickr-day {
  border-radius: 8px;
  color: #374151;
  font-size: 13px;
  font-weight: 400;
  line-height: 36px;
  height: 36px;
  max-width: 36px;
  margin: 1px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.flatpickr-day:hover {
  background-color: hsl(153 68% 46% / 0.1);
  border-color: hsl(153 68% 46% / 0.1);
  color: hsl(153 68% 30%);
}

/* Selected */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background-color: hsl(153 68% 40%);
  border-color: hsl(153 68% 40%);
  color: #ffffff;
  font-weight: 600;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background-color: hsl(153 68% 36%);
  border-color: hsl(153 68% 36%);
}

/* Today */
.flatpickr-day.today {
  border-color: hsl(153 68% 40%);
  background-color: transparent;
  color: hsl(153 68% 36%);
  font-weight: 600;
}

.flatpickr-day.today:hover {
  background-color: hsl(153 68% 46% / 0.08);
  border-color: hsl(153 68% 40%);
  color: hsl(153 68% 30%);
}

/* In range */
.flatpickr-day.inRange {
  background-color: hsl(153 68% 46% / 0.06);
  border-color: hsl(153 68% 46% / 0.15);
  box-shadow: none;
}

/* Disabled */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #d1d5db;
  cursor: not-allowed;
  background-color: transparent;
}

/* Prev/next month dates — very subtle */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #e5e7eb;
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  color: #9ca3af;
  background-color: #f9fafb;
  border-color: #f9fafb;
}

/* Inner container padding */
.flatpickr-innerContainer {
  padding: 0 12px 8px;
}

/* Alt input */
.flatpickr-input[readonly] {
  cursor: pointer;
}

/* Time picker */
.flatpickr-time {
  border-top: 1px solid #e5e7eb;
}

.flatpickr-time input {
  color: #374151;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
  background-color: #f3f4f6;
}

/* Animation */
.flatpickr-calendar.animate.open {
  animation: fpFadeInDown 0.2s ease-out;
}

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

/* Input styling */
.flatpickr-input {
  font-size: 14px;
  color: #374151;
}

.flatpickr-input::placeholder {
  color: #9ca3af;
}

/* Calendar icon wrapper */
.datepicker-wrapper {
  position: relative;
  display: inline-block;
}

.datepicker-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #9ca3af;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.datepicker-icon:hover {
  color: hsl(153 68% 40%);
}

.datepicker-icon svg {
  width: 100%;
  height: 100%;
}

/* =============================================
   Dark mode overrides
   ============================================= */

.shadcn-theme.dark .flatpickr-calendar {
  background: hsl(225 14% 14%);
  border-color: hsl(225 10% 22%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.shadcn-theme.dark .flatpickr-months {
  background-color: hsl(153 68% 36%);
}

.shadcn-theme.dark .flatpickr-current-month .flatpickr-monthDropdown-months option {
  background-color: hsl(225 14% 14%);
  color: hsl(210 10% 90%);
}

.shadcn-theme.dark span.flatpickr-weekday {
  color: hsl(215 8% 50%);
}

.shadcn-theme.dark .flatpickr-day {
  color: hsl(210 10% 85%);
}

.shadcn-theme.dark .flatpickr-day:hover {
  background-color: hsl(153 68% 46% / 0.12);
  border-color: hsl(153 68% 46% / 0.12);
  color: hsl(153 68% 65%);
}

.shadcn-theme.dark .flatpickr-day.selected,
.shadcn-theme.dark .flatpickr-day.startRange,
.shadcn-theme.dark .flatpickr-day.endRange {
  background-color: hsl(153 68% 40%);
  border-color: hsl(153 68% 40%);
  color: #ffffff;
}

.shadcn-theme.dark .flatpickr-day.selected:hover,
.shadcn-theme.dark .flatpickr-day.startRange:hover,
.shadcn-theme.dark .flatpickr-day.endRange:hover {
  background-color: hsl(153 68% 46%);
  border-color: hsl(153 68% 46%);
}

.shadcn-theme.dark .flatpickr-day.today {
  border-color: hsl(153 68% 46%);
  color: hsl(153 68% 60%);
}

.shadcn-theme.dark .flatpickr-day.today:hover {
  background-color: hsl(153 68% 46% / 0.12);
  border-color: hsl(153 68% 46%);
  color: hsl(153 68% 65%);
}

.shadcn-theme.dark .flatpickr-day.inRange {
  background-color: hsl(153 68% 46% / 0.08);
  border-color: hsl(153 68% 46% / 0.15);
}

.shadcn-theme.dark .flatpickr-day.flatpickr-disabled,
.shadcn-theme.dark .flatpickr-day.flatpickr-disabled:hover {
  color: hsl(215 8% 30%);
}

.shadcn-theme.dark .flatpickr-day.prevMonthDay,
.shadcn-theme.dark .flatpickr-day.nextMonthDay {
  color: hsl(215 8% 35%);
}

.shadcn-theme.dark .flatpickr-day.prevMonthDay:hover,
.shadcn-theme.dark .flatpickr-day.nextMonthDay:hover {
  color: hsl(215 8% 50%);
  background-color: hsl(225 10% 18%);
  border-color: hsl(225 10% 18%);
}

.shadcn-theme.dark .flatpickr-input[readonly] {
  background-color: hsl(225 14% 14%);
  color: hsl(210 10% 90%);
}

.shadcn-theme.dark .flatpickr-time {
  border-top-color: hsl(225 10% 22%);
}

.shadcn-theme.dark .flatpickr-time input {
  color: hsl(210 10% 85%);
}

.shadcn-theme.dark .flatpickr-time input:hover,
.shadcn-theme.dark .flatpickr-time input:focus {
  background-color: hsl(225 10% 18%);
}

.shadcn-theme.dark .datepicker-icon:hover {
  color: hsl(153 68% 55%);
}
/*
 * 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.
 *


 */

/* Custom application styles (non-Tailwind) go here */

/* Topbar (shared/_topbar): narrow-viewport scroll affordance.
   The dashboard layout wraps content in overflow-x-hidden, so a topbar whose
   right-side actions exceed a phone's width would otherwise be unreachable.
   Scoped to <640px (Tailwind's sm breakpoint) on purpose: at >=640px the bar
   must NOT be a scroll container — overflow-x:auto forces overflow-y to auto
   and clips absolutely-positioned dropdown panels (date-range picker et al.)
   into the 48px bar. See shared/_topbar.html.erb. */
@media (max-width: 639px) {
  header.topbar {
    overflow-x: auto;
  }
}

/* Topbar overflow handling. Left nav and right actions are both flex-1 with
   basis 0 so `center` stays centered; without this the right group is a
   normal flex item and, once its actions exceed its share, flex squeezes
   whichever action can shrink ("Last 30 days", "Snapshot now", "Save as
   template") into 2–3 wrapped lines that spill out of the 48px bar — or,
   with shrinking forbidden, the group overflows leftward over `center`.
   Rule: actions never shrink or wrap, and the group claims at least its
   content width; the breadcrumb (min-w-0 + truncate) is what yields. When
   there is room, both sides still grow equally and center stays centered.
   Selects cap their own width with max-w + truncate. */
header.topbar .topbar-actions {
  min-width: max-content;
}
header.topbar .topbar-actions > * {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Text-card markdown typography (report_cards/_text.html.erb → report_markdown).
   Redcarpet emits classless <h1>/<ul>/... and Tailwind's preflight resets heading
   sizes, so all levels render identically. Restore hierarchy here, scoped to
   .report-markdown. Sizes are em-relative so the card's content_scale (text-xs..
   text-lg) scales everything. Body color inherits the card's text-ink token. */
.report-markdown h1 { font-size: 1.6em; font-weight: 700; line-height: 1.2; margin: 0.3em 0 0.3em; }
.report-markdown h2 { font-size: 1.3em; font-weight: 700; line-height: 1.25; margin: 0.5em 0 0.25em; }
.report-markdown h3 { font-size: 1.12em; font-weight: 600; line-height: 1.3; margin: 0.5em 0 0.2em; }
.report-markdown h4 { font-size: 1em; font-weight: 600; margin: 0.5em 0 0.2em; }
.report-markdown h1:first-child, .report-markdown h2:first-child,
.report-markdown h3:first-child, .report-markdown h4:first-child { margin-top: 0; }
.report-markdown p { margin: 0 0 0.6em; }
.report-markdown ul { list-style: disc; padding-left: 1.25em; margin: 0 0 0.6em; }
.report-markdown ol { list-style: decimal; padding-left: 1.25em; margin: 0 0 0.6em; }
.report-markdown li { margin: 0.12em 0; }
.report-markdown a { color: var(--eds-brand-green, #1a9e5e); text-decoration: underline; }
.report-markdown strong { font-weight: 700; }
.report-markdown em { font-style: italic; }
.report-markdown blockquote { border-left: 3px solid var(--eds-border, #dfdbd4); padding-left: 0.75em; margin: 0 0 0.6em; color: var(--eds-fg-muted, #575550); }
.report-markdown code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.9em; background: var(--eds-bg-sunken, #f2f0ec); padding: 0.08em 0.32em; border-radius: 0.25em; }
.report-markdown pre { background: var(--eds-bg-sunken, #f2f0ec); padding: 0.6em 0.8em; border-radius: 0.4em; overflow-x: auto; margin: 0 0 0.6em; }
.report-markdown pre code { background: transparent; padding: 0; }
.report-markdown hr { border: 0; border-top: 1px solid var(--eds-border, #dfdbd4); margin: 0.8em 0; }
.report-markdown table { border-collapse: collapse; margin: 0 0 0.6em; }
.report-markdown th, .report-markdown td { border: 1px solid var(--eds-border, #dfdbd4); padding: 0.3em 0.5em; text-align: left; }