/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Modal turbo-frame: pin it to the viewport so the inner fixed overlay works correctly
   regardless of where the <turbo-frame> element sits in the DOM flow. */
turbo-frame#modal:not(:empty) {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

@media (min-width: 640px) {
  turbo-frame#modal:not(:empty) {
    align-items: center;
  }
}

turbo-frame#modal input[type="submit"],
turbo-frame#modal button[type="button"] {
  appearance: none;
  line-height: 1.25;
}

/* Normalize native button chrome so helper classes control height consistently */
button:not([class*="underline"]),
input[type="submit"],
input[type="button"] {
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.25;
}

form.button_to {
  display: inline-flex;
  margin: 0;
}

form.button_to button,
form.button_to input {
  margin: 0;
}

/* Confirm dialog overlay */
#turbo-confirm:not(.hidden) {
  display: flex;
}

/*
 * Responsive data tables: on small screens, each row becomes a stacked card
 * with labels from data-label attributes (no horizontal scroll).
 */
@media (max-width: 767px) {
  .responsive-cards thead {
    display: none;
  }

  .responsive-cards,
  .responsive-cards tbody {
    display: block;
    width: 100%;
  }

  .responsive-cards tbody tr {
    display: block;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.85rem 1rem;
  }

  /* Beat card-layout display:block so day-group collapse works on phone */
  .responsive-cards tbody tr.hidden {
    display: none !important;
  }

  .responsive-cards tbody tr:last-child {
    border-bottom: 0;
  }

  .responsive-cards tbody td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0 !important;
    text-align: right;
    border: 0 !important;
    white-space: normal !important;
    max-width: none !important;
    word-break: break-word;
  }

  .responsive-cards tbody td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    max-width: 40%;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    line-height: 1.4;
  }

  .responsive-cards tbody td:not([data-label])::before,
  .responsive-cards tbody td[data-label=""]::before {
    content: none;
    display: none;
  }

  .responsive-cards tbody td:not([data-label]),
  .responsive-cards tbody td[data-label=""] {
    justify-content: flex-start;
    text-align: left;
  }

  .responsive-cards tbody td > * {
    text-align: right;
  }

  /* Long notes read better stacked under the label */
  .responsive-cards tbody td[data-label="Description"] {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
  }

  .responsive-cards tbody td[data-label="Description"]::before {
    flex: none;
    max-width: none;
  }

  .responsive-cards tbody td[data-label="Description"] > * {
    text-align: left;
  }

  /* Preserve Tailwind `hidden` / spacer cells on mobile */
  .responsive-cards tbody td.hidden {
    display: none !important;
  }

  .responsive-cards tbody tr.responsive-cards-group {
    background: #f8fafc;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    column-gap: 0.75rem;
    row-gap: 0.15rem;
  }

  .responsive-cards tbody tr.responsive-cards-group td[colspan] {
    min-width: 0;
  }

  .responsive-cards tbody tr.responsive-cards-group td {
    display: block;
    padding: 0 !important;
    font-weight: 600;
    text-align: left;
    min-width: 0;
  }

  .responsive-cards tbody tr.responsive-cards-group td[data-label="Hours"],
  .responsive-cards tbody tr.responsive-cards-group td[data-label="Amount"] {
    text-align: right;
    justify-self: end;
    white-space: nowrap;
  }

  .responsive-cards tbody tr.responsive-cards-group td::before {
    display: none;
  }

  .responsive-cards tbody tr.responsive-cards-group td:empty,
  .responsive-cards tbody tr.responsive-cards-group td.hidden {
    display: none !important;
  }

  .responsive-cards tbody tr.responsive-cards-empty td {
    display: block;
    text-align: center;
    justify-content: center;
    padding: 1.5rem 0 !important;
  }

  .responsive-cards tbody tr.responsive-cards-empty td::before {
    display: none;
  }
}

/* Password field with in-input show/hide toggle */
.password-field__control {
  position: relative;
}

.password-field__input {
  padding-right: 2.75rem;
}

.password-field__toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  color: #94a3b8;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.password-field__toggle:hover {
  color: #334155;
}

.password-field__icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.password-field__icon--hidden {
  display: none;
}

/* Animated CTB dual-cloud mark (404 and brand accents) */
.ctb-logo-mark {
  display: block;
  overflow: visible;
  width: auto;
  height: 5rem;
}

.ctb-logo-mark--lg {
  height: 7.5rem;
}

.ctb-logo-mark__cloud--back {
  transform-box: fill-box;
  transform-origin: center;
  animation: ctb-cloud-drift 6s ease-in-out infinite;
}

.ctb-logo-mark__cloud--front {
  transform-box: fill-box;
  transform-origin: center;
  animation: ctb-cloud-drift-front 4.8s ease-in-out infinite;
}

@keyframes ctb-cloud-drift {
  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(14px, -8px);
  }

  50% {
    transform: translate(0, -12px);
  }

  75% {
    transform: translate(-14px, -6px);
  }
}

@keyframes ctb-cloud-drift-front {
  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-18px, -10px);
  }

  50% {
    transform: translate(0, -16px);
  }

  75% {
    transform: translate(18px, -8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ctb-logo-mark__cloud--back,
  .ctb-logo-mark__cloud--front {
    animation: none;
  }
}