/*
 * 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.
 */
/* Shared simple-calendar styles – mobile-first, no inline CSS in views */

.cal-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cal-inner {
    min-width: 0;
  }

  .simple-calendar table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
  }

  .simple-calendar thead th {
    padding: 8px 4px;
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-transform: lowercase;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
  }

  .simple-calendar tbody tr,
  .simple-calendar tbody tr.week,
  .simple-calendar tbody tr.week td {
    background: transparent !important;
  }

  .simple-calendar tbody td.day {
    vertical-align: top;
    padding: 6px 4px;
    min-height: 56px;
    height: auto;
    border-top: 1px solid #f1f5f9;
  }

  .sc-day {
    border-radius: 0.9rem;
    transition: background 0.14s ease, box-shadow 0.14s ease, transform 0.08s ease;
    padding: 3px 4px;
    display: grid;
    grid-template-rows: 20px 1fr;
  }

  .sc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 20px;
    margin-bottom: 0;
  }

  .sc-num {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: #071b2f;
  }

  .sc-num--other {
    font-weight: 500;
    color: #64748b;
  }

  .sc-today-badge {
    display: none;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid #bae6fd;
    background: #e0f2fe;
    color: #0369a1;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    margin-left: 0.375rem;
  }

  .sc-badge-label {
    font-size: 11px;
  }

  .sc-empty {
    display: none;
    font-size: 10px;
    line-height: 1;
    color: #9ca3af;
    margin-top: 0.25rem;
  }

  @media (min-width: 640px) {
    .simple-calendar thead th {
      padding: 12px 16px;
      font-size: 12px;
    }

    .simple-calendar tbody td.day {
      padding: 10px 12px;
      min-height: 76px;
    }

    .sc-day {
      padding: 4px 6px;
      grid-template-rows: 22px 1fr;
    }

    .sc-head {
      min-height: 22px;
      margin-bottom: 2px;
    }

    .sc-today-badge {
      display: inline-flex;
    }

    .sc-badge-label {
      display: inline;
    }

    .sc-empty {
      display: block;
    }
  }

  @media (hover: hover) {
    .sc-day:hover {
      background: #eff6ff;
      box-shadow: 0 0 0 1px rgba(34, 150, 202, 0.25);
      transform: translateY(-1px);
    }
  }