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

div.field_with_errors > label {
  @apply text-red-500;
}

div.field_with_errors > :is(input, textarea, select) {
  @apply border-red-500 text-red-500 placeholder-red-300;
}

@layer components {
  .btn-base {
    @apply inline-flex items-center justify-center cursor-pointer rounded-md shadow-sm sm:w-auto focus:outline-none focus:ring-0 focus:ring-offset-0;
  }

  .btn-primary {
    @apply btn-base bg-lime-600 text-sm font-medium text-white hover:bg-lime-700 px-4 py-2;
    &:disabled {
      @apply bg-lime-700;
    }
  }
  .btn-primary-lean {
    @apply btn-base bg-lime-600 text-sm font-medium text-white hover:bg-lime-700 px-3 py-1.5;
    &:disabled {
      @apply bg-lime-700;
    }
  }

  .btn-secondary {
    @apply btn-base border border-gray-300 bg-gray-50 text-sm font-medium text-gray-700 hover:bg-gray-200 px-4 py-2;
    &:disabled {
      @apply bg-gray-200;
    }
  }
  .btn-secondary-lean {
    @apply btn-base border border-gray-300 bg-gray-50 text-sm font-medium text-gray-700 hover:bg-gray-200 px-3 py-1.5;
    &:disabled {
      @apply bg-gray-200;
    }
  }

  .btn-soft {
    @apply btn-base border border-lime-400 bg-lime-50 text-sm font-medium text-lime-600 hover:bg-lime-100 px-2.5 py-1.5;
    &:disabled {
      @apply bg-lime-100;
    }
  }
  .btn-soft-lean {
    @apply btn-base border border-lime-400 bg-lime-50 text-sm font-normal text-lime-600 hover:bg-lime-100 px-2 py-1;
    &:disabled {
      @apply bg-lime-100;
    }
  }

  .btn-danger {
    @apply btn-base border border-red-600 bg-red-50 text-sm font-medium text-red-600 hover:text-red-600 hover:bg-red-100 px-4 py-2;
    &:disabled {
      @apply bg-red-100;
    }
  }
  .btn-danger-lean {
    @apply btn-base border border-red-600 bg-red-50 text-sm font-medium text-red-600 hover:text-red-600 hover:bg-red-100 disabled:bg-red-100 px-3 py-1.5;
    &:disabled {
      @apply bg-red-100;
    }
  }

  .link-primary {
    @apply font-medium text-lime-600 hover:text-lime-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500;
  }
  /* Quiet actions on the status card: the expected next event, and at most
     one routine alternative. The floating "+" is the loud one. */
  .btn-pill-primary {
    @apply inline-flex h-9 items-center gap-1.5 rounded-full border border-lime-500 bg-white px-3 text-[13px] font-semibold text-lime-800
           hover:border-lime-600 hover:bg-lime-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-lime-500/40;
  }
  .btn-pill-ghost {
    @apply inline-flex h-9 items-center gap-1.5 rounded-full border border-gray-300 bg-white px-3 text-[13px] font-medium text-gray-700
           hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-lime-500/40;
  }
  /* A round pill holding one icon: the "⋯" that
     opens the rarer actions, the same 36px as the text pills beside it. */
  .btn-pill-icon {
    @apply inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-gray-300 bg-white text-gray-600
           hover:border-gray-400 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-lime-500/40;
  }
  /* One row of a "⋯" menu: the 56px row of the timeline's "+" sheet on phones, a 40px popover row on lg */
  .menu-item {
    @apply flex min-h-[56px] w-full items-center gap-3 rounded-md py-2 text-left text-base font-semibold text-gray-900 hover:bg-gray-50
           lg:min-h-0 lg:gap-2.5 lg:px-2 lg:text-sm lg:font-medium;
  }
  .menu-item-quiet {
    @apply text-gray-500 hover:text-gray-700;
  }
  .menu-item-danger {
    @apply text-red-600 hover:text-red-700;
  }
  /* The three views of an animal as one pill switch */
  .segment-link {
    @apply flex h-[38px] items-center justify-center rounded-[9px] text-sm font-medium text-gray-600 hover:text-gray-900;
  }
  .segment-link-active {
    @apply bg-white font-semibold text-gray-900 shadow-sm hover:text-gray-900;
  }
  .link-primary-lean {
    @apply inline-flex text-lime-600 hover:text-lime-700 text-sm focus:outline-none focus:ring-0 focus:ring-offset-0;
  }
  .link-primary-danger {
    @apply font-medium text-red-600 hover:text-red-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
  }
  .link-danger-lean {
    @apply font-normal text-red-600 hover:text-red-500 focus:outline-none focus:ring-0 focus:ring-offset-0;
  }
  .active-item {
    @apply bg-gray-100 text-gray-900;
  }
  .active-range {
    @apply bg-lime-100 text-gray-700 hover:bg-lime-200 !important;
  }
  .active-list-item {
    @apply text-lime-700 font-semibold;
  }

  .title {
    @apply md:text-xl text-lg font-bold text-gray-900 sm:truncate
  }
  .subtitle {
    @apply text-base text-gray-600 sm:truncate
  }

  .header-nav {
    @apply relative flex justify-center sm:flex flex-col shadow-sm rounded-xl p-4;
  }
  .header-nav-badge {
    @apply absolute sm:hidden -top-3 -right-2 flex h-8 w-8 flex-shrink-0 items-center justify-center text-base font-medium text-gray-800 rounded-full border border-gray-300 bg-white;
  }

  @media (max-width: 400px) {
    .header-nav {
      @apply p-2;
    }
    .header-nav-badge {
      @apply h-6 w-6 text-sm;
    }
  }

  @media (max-width: 355px) {
  .charts-checkboxes-content {
    @apply flex-col gap-y-3;
  }
}

  /* Chart.js sizes its canvas to the container, so the container owns the height.
     Modes that draw few, information-dense charts ask for the taller variant. */
  .chart-container-tall {
    @apply relative w-full h-72 sm:h-80 lg:h-96;
  }

  /* The health-activity pair, stacked with no gap. On a phone the pair runs over
     the page's side padding (px-6 on .div-body) to the screen edges, so the plots
     get those pixels too. */
  .chart-container-joined-top {
    @apply relative -mx-6 h-56 sm:mx-0 sm:h-64 lg:h-[19rem];
  }

  /* 1.5rem taller for the event lane under its plot (LANE_* in
     activity_chart_controller.js), so the plot itself keeps its height. Runs to
     the screen edges on a phone, like the chart above it. */
  .chart-container-joined-bottom {
    @apply relative -mx-6 h-[19.75rem] sm:mx-0 sm:h-[21.75rem] lg:h-[25.75rem];
  }

  /* The help dropdowns draw their own chevron, so Safari's marker goes */
  .help-summary::-webkit-details-marker {
    display: none;
  }

  .slide-hidden {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height 0.5s ease-in, opacity 0.5s ease-in, visibility 0.5s ease-in;
  }

  .slide-visible {
    max-height: 1000px;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out, visibility 0.5s ease-out;
  }

  .form-input {
    @apply shadow-sm text-base border-slate-300 bg-white rounded-md w-full focus:ring-lime-500 focus:border-lime-500;
    &:disabled {
      @apply border-gray-300 bg-gray-50;
    }
  }
  .form-input:read-only:not(select) {
    @apply border-gray-300 bg-gray-50;
  }

  .form-label {
    @apply block text-sm font-medium text-gray-900 mb-2;
  }

  .form-label-description {
    @apply block text-sm leading-6 text-gray-600 mb-1;
  }

  .form-group {
    @apply mt-8;
  }

  .form-radio {
    @apply border-gray-300 text-lime-600 focus:ring-lime-600 cursor-pointer;
    &:disabled {
      @apply text-gray-300;
    }
  }

  .form-checkbox {
    @apply h-4 w-4 cursor-pointer rounded border-gray-300 text-lime-600 focus:ring-lime-600
  }

  .form-checkbox-label {
    @apply pl-2 p-1 text-base text-gray-700 cursor-pointer
  }

  .form-checkbox-disabled {
    @apply text-gray-300 pointer-events-none;
  }

  .tab-link {
    @apply flex items-center border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 whitespace-nowrap border-b-2 pb-3 px-1 text-sm font-medium;
  }

  .tab-link-active {
    @apply border-lime-500 text-lime-600 hover:border-lime-600 hover:text-lime-600;
  }

  /* --- Animal event timeline ------------------------------------------- */
  /* The rail runs behind the node; the node's white ring punches it out. */
  .timeline-rail {
    @apply absolute left-4 top-0 -ml-px h-full w-0.5 bg-gray-200;
  }
  .timeline-list > .timeline-entry:last-child .timeline-rail {
    @apply h-8;
  }
  /* 5px down: the card's border and padding put the title's line centre at
     21px, so the 32px node is centred on it rather than on the row's top */
  .timeline-node {
    @apply absolute left-0 top-[5px] z-10 flex h-8 w-8 items-center justify-center rounded-full ring-4 ring-white;
  }
  .timeline-card {
    @apply w-full cursor-pointer rounded-lg border border-transparent px-3 py-2 text-left transition
           duration-150 hover:border-gray-200 hover:bg-gray-50 focus:outline-none focus-visible:border-lime-300
           focus-visible:ring-2 focus-visible:ring-lime-500/40;
  }
  .timeline-entry.is-selected .timeline-card {
    @apply border-lime-200 bg-lime-50 shadow-sm;
  }
  .timeline-entry.is-selected .timeline-node {
    @apply ring-lime-50;
  }
  .timeline-actions {
    @apply pl-1;
  }
  /* Row actions as plain text links: the row stays the thing on the page.
     The hit area is 44px tall and padded 8px past the text on both sides for
     gloved thumbs; the padding is invisible, so the links still read as text. */
  .timeline-action {
    @apply inline-flex min-h-[44px] items-center gap-1.5 px-2 text-sm font-medium text-gray-600 hover:text-gray-900;
  }
  .timeline-action-danger {
    @apply text-red-600 hover:text-red-700;
  }
  .timeline-badge {
    @apply inline-flex items-center rounded-md px-2 py-0.5 text-sm font-medium ring-1 ring-inset ring-gray-900/5;
  }
  /* Full-width band that opens a lactation group */
  .timeline-band {
    @apply -mx-4 flex flex-wrap items-center gap-x-2 gap-y-1 border-y border-gray-200 bg-gray-50 px-4 py-2 sm:mx-0 sm:rounded-lg sm:border;
  }
  /* A collar detection: hollow, so it reads as noticed rather than recorded */
  .timeline-node-detected {
    @apply border-2 bg-white;
  }
  /* A reminder is not an event either: hollow node in its source's colour,
     and a card with a real border instead of the events' bare rows */
  .timeline-node-reminder {
    @apply border-2 border-current bg-white;
  }
  .timeline-card-reminder {
    @apply border-gray-200 bg-white hover:border-gray-300;
  }
  /* The same node on the reminder lists, where there is no rail to sit on */
  .reminder-node {
    @apply relative flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 border-current bg-white;
  }
  /* A predicted event above "Danes": a node that is not there yet */
  .timeline-node-upcoming {
    @apply border-[1.5px] border-dashed border-gray-400 bg-white;
  }
  /* Above "Danes" nothing has happened yet, so the rail and every card are
     dashed; a reminder's card keeps its hover and selected looks. */
  .timeline-future .timeline-rail {
    @apply w-0 border-l-2 border-dashed border-gray-300 bg-transparent;
  }
  .timeline-future .timeline-card {
    @apply border-dashed border-gray-300;
  }
  .timeline-card-upcoming {
    @apply rounded-lg border border-dashed border-gray-300 px-3 py-2;
  }
  /* The "Danes" marker: a small solid dot on the rail, between what is ahead
     and what happened. No row above "Danes" ends the rail: it runs on into
     the first past row. */
  .timeline-node-today {
    @apply absolute left-4 top-1 z-10 -ml-[7px] h-3.5 w-3.5 rounded-full bg-gray-900 ring-4 ring-white;
  }
  .timeline-today .timeline-rail {
    @apply border-solid;
  }
  .timeline-future .timeline-list > .timeline-entry:last-child .timeline-rail {
    @apply h-full;
  }
  /* Days between two rows, on the rail halfway between the two nodes: the
     node is 32px tall at the top, the next one starts at the row's bottom. */
  .timeline-gap {
    @apply absolute left-4 whitespace-nowrap bg-white px-1 py-0.5 text-xs leading-none text-gray-400;
    top: calc(50% + 1rem);
    transform: translate(-50%, -50%);
  }
  .timeline-badge-link {
    @apply cursor-pointer gap-1 border border-gray-200 bg-white text-gray-600 ring-0
           hover:border-gray-300 hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-lime-500/40;
  }
  /* Brief highlight after a badge jumps the reader to a related row */
  .timeline-entry.is-flash > .timeline-card {
    animation: timeline-flash 1.4s ease-out;
  }

  /* Label/value rows of the animal data tab */
  .data-rows {
    @apply divide-y divide-gray-200 rounded-xl border border-gray-200;
  }
  .data-row {
    @apply flex min-h-[52px] items-center justify-between gap-4 px-4 py-2 text-sm;
  }
  .data-row > dt {
    @apply text-gray-600;
  }
  .data-row > dd {
    @apply text-right font-medium text-gray-900;
  }
  /* A row that is a link: label on the left, chevron on the right */
  .data-row-link {
    @apply font-medium text-gray-900 hover:bg-gray-50;
  }
  .data-row-link:first-child {
    @apply rounded-t-xl;
  }
  .data-row-link:last-child {
    @apply rounded-b-xl;
  }

  /* Reproduction status as a small tinted pill with a dot in the state colour */
  /* Collar alerts: the strip above the animal overview (heats/_recent_heats)
     and the rows of the alarms page (overview/events) share one anatomy —
     hollow node, text, the insemination bar, pill actions sized for thumbs. */
  .heat-alert {
    @apply mb-4 grid grid-cols-[2rem_minmax(0,1fr)] items-center gap-x-3 rounded-xl bg-[#D6EEE7] px-3 pb-1 pt-2.5 text-[#134e4a];
  }
  .insemination-bar {
    @apply relative mt-2 h-[60px];
  }
  /* The one thing that moves on the bar: now, an amber pill overhanging the track */
  .insemination-now {
    @apply absolute top-[17px] h-[26px] w-2.5 -translate-x-1/2 rounded-full border-2 border-white bg-amber-500 shadow-[0_1px_3px_rgba(0,0,0,0.28)];
  }
  .alert-node-time {
    @apply mt-1 text-sm leading-4 text-gray-600;
  }
  /* A row on the alarms page: a column on phones, one line from lg up */
  .alert-row {
    @apply grid grid-cols-[2rem_minmax(0,1fr)] gap-x-3 border-b border-gray-100 py-3 lg:grid-cols-[2rem_15rem_minmax(0,1fr)_auto] lg:items-start lg:gap-x-4 lg:py-3.5;
  }
  .alert-node {
    @apply flex h-8 w-8 items-center justify-center rounded-full lg:mt-0.5;
  }
  .alert-actions {
    @apply col-span-2 mt-2.5 flex items-center justify-end gap-2 lg:col-span-1 lg:col-start-4 lg:-my-1 lg:mt-0;
  }
  .alert-band {
    @apply -mx-4 border-y border-gray-200 bg-gray-50 px-4 py-2 text-sm leading-5 sm:mx-0 sm:rounded-lg sm:border;
  }

  .status-pill {
    @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-sm font-semibold text-gray-800;
  }
  .status-dot {
    @apply h-2 w-2 rounded-full bg-current;
  }

  /* One-choice chips: the kind filter on the reminders overview, the view and
     lactation pills in the timeline's "what to show" sheet */
  .reminder-chip {
    @apply inline-flex h-8 shrink-0 items-center whitespace-nowrap rounded-full border border-gray-300 bg-white px-3 text-[13px] font-medium text-gray-700 hover:bg-gray-50;
  }
  .reminder-chip-active {
    @apply border-lime-700 bg-lime-100 font-semibold text-lime-800 hover:bg-lime-100;
  }


  .truncate-5-lines {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .heat-list:last-of-type .line-vertical {
    display: none;
    height: 0;
  }
  .heat-list:last-child .line-vertical {
    display: none;
  }
  .heat-list:last-of-type .day-label {
    display: none;
    height: 0;
  }
  .heat-list:last-child .day-label {
    display: none;
  }
  .active-tab {
    @apply bg-gradient-to-b from-gray-50 to-lime-200/75 !important;
  }
  .div-body:has(> .no-navigation) .navigation-content {
    display: none !important;
    background-color: blue !important;
  }
  /* Status Colors */
  .fresh-primary-color {
    background-color: #C6DEF1;
  }
  .fresh-secondary-color {
    color: #349DF0;
  }

  .ready-primary-color {
    background-color: #D6EEE7;
  }
  .ready-secondary-color {
    color: #17BC97;
  }

  .inseminated-primary-color {
    background-color: #DBCDF0;
  }
  .inseminated-secondary-color {
    color: #8D4DEC;
  }

  .pregnant-primary-color {
    background-color: #FFF0F3;
  }
  .pregnant-secondary-color {
    color: #F742A5;
  }

  .dry-primary-color {
    background-color: #FAEDCB;
  }
  .dry-secondary-color {
    color: #DBB10B;
  }

  /* Not a status: the event colour of a lost pregnancy on the timeline */
  .abortion-primary-color {
    background-color: #FFE0D6;
  }
  .abortion-secondary-color {
    color: #E9502C;
  }

  .undefined-primary-color {
    background-color: #f3f4f6;
  }
  .undefined-secondary-color {
    color: #94a3b8;
  }

  /* The status card's border: the state's ink colour on a white ground */
  .fresh-border-color {
    border-color: #349DF0;
  }
  .ready-border-color {
    border-color: #17BC97;
  }
  .inseminated-border-color {
    border-color: #8D4DEC;
  }
  .pregnant-border-color {
    border-color: #F742A5;
  }
  .dry-border-color {
    border-color: #DBB10B;
  }
  .undefined-border-color {
    border-color: #d1d5db;
  }
}

.pagy {
  @apply flex space-x-1 font-semibold text-sm text-gray-500;
  a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200 hover:bg-gray-300;

    &:not([href]) { /* disabled links */
      @apply text-gray-300 bg-gray-100 cursor-default;
    }
    &.current {
      @apply text-white bg-gray-400;
    }
  }
  label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
    input {
      @apply bg-gray-100 border-none rounded-md;
    }
  }
}

@keyframes timeline-flash {
  0%, 40% {
    box-shadow: 0 0 0 3px theme('colors.lime.300');
  }
  100% {
    box-shadow: 0 0 0 3px transparent;
  }
}

.searchInput {
  transition: all 0.4s ease-in;
}

.searchInput:focus {
  width: 100%;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}



/* Chatwoot bubble: keep it above the fixed mobile bottom navigation (see the
   flash message, which uses the same bottom-[82px] offset on small screens). */
@media (max-width: 767px) {
  .woot-widget-bubble {
    bottom: 90px !important;
  }
}
/*Logic for spinner*/
/* By default, force the spinner to be hiden */
turbo-frame#herd_average_stats_frame .custom-spinner {
  display: none !important;
}

/* When the frame is BUSY (aria-busy="true"), force it to flex */
turbo-frame#herd_average_stats_frame[aria-busy="true"] .custom-spinner {
  display: flex !important;
}

/* Fade out content when busy */
turbo-frame#herd_average_stats_frame[aria-busy="true"] .content-container {
  opacity: 0.5;
  pointer-events: none;
}

/* Ensure the frame handles absolute positioning correctly */
turbo-frame#herd_average_stats_frame {
  display: block;
  position: relative;
}
/*
 * 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.
 *


 */