/* =========================================
   02-VENDOR-FLATPICKR (Use Dates UI)
   - Layout is feature-specific (kept local)
   - Colors/spacing/z-index pull from settings
   ========================================= */
@layer vendor {

  /* ======= Use Dates UI ======= */
  .use-dates-grid {
    display: grid;
    grid-template-columns: minmax(280px, 330px) 1fr;
    gap: 12px; /* = var(--space-5), but leaving literal is fine; swap if you prefer: gap: var(--space-5); */
    align-items: start;
  }

  .use-calendar .flatpickr-calendar { position: static !important; box-shadow: none; }
  .use-calendar .flatpickr-months,
  .use-calendar .flatpickr-innerContainer { width: 100%; }

  /* Consolidated category colours */
  .flatpickr-day.cat-prep {
    background:   var(--cat-prep-bg) !important;
    border-color: var(--cat-prep-bd) !important;
  }
  .flatpickr-day.cat-shoot {
    background:   var(--cat-shoot-bg) !important;
    border-color: var(--cat-shoot-bd) !important;
  }
  .flatpickr-day.cat-hold_over {
    background:   var(--cat-hold-bg) !important;
    border-color: var(--cat-hold-bd) !important;
    color:        var(--cat-hold-fg) !important;
  }
  .flatpickr-day.cat-strike {
    background:   var(--cat-strike-bg) !important;
    border-color: var(--cat-strike-bd) !important;
  }

  /* Selection ring */
  .flatpickr-day.selected,
  .flatpickr-day.startRange,
  .flatpickr-day.endRange,
  .flatpickr-day.inRange {
    box-shadow: inset 0 0 0 1px var(--black-a15);
  }

  .date-hidden { font-size: .9rem; }

  .use-dates-global-grid {
    display: grid;
    grid-template-columns: minmax(280px, 330px) 1fr;
    gap: 14px; /* stays literal (feature-specific size); change to a token later if reused */
    align-items: start;
  }

  .use-calendar-panel .flatpickr-calendar { position: static !important; box-shadow: none; }
  .use-calendar-panel .flatpickr-months,
  .use-calendar-panel .flatpickr-innerContainer { width: 100%; }

  /* Use Dates list as a column-wise grid */
  .use-dates-list{
    display: grid;
    grid-auto-flow: column;                 /* fill down first, then across */
    grid-template-rows: repeat(3, auto);    /* 3 per column */
    grid-auto-columns: minmax(0, 1fr);      /* each column = 1fr; single col = full width */
    gap: 10px var(--space-6);               /* row-gap / column-gap (10px × 16px) */
  }
  .use-dates-list .visit-block{
    height: 100%; /* keeps the block nice if you add side panels */
  }

  /* Keep Flatpickr above offcanvas/modals */
  .flatpickr-calendar { z-index: var(--z-flatpickr) !important; }
}

/* ======= Locations Page Flatpicker ======= */
  /* keep calendar on top of accordions/offcanvas */
  .flatpickr-calendar { z-index: 3000 }

  /* base colouring per category */
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-prep:not(.disabled) {
    background:#e6f4ea !important; border-color:#2e7d32 !important; color:#1b5e20 !important;
  }
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-shoot:not(.disabled) {
    background:#e3f2fd !important; border-color:#1976d2 !important; color:#0d47a1 !important;
  }
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-hold_over:not(.disabled) {
    background:#fff8e1 !important; border-color:#f57c00 !important; color:#e65100 !important;
  }
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-strike:not(.disabled) {
    background:#ffebee !important; border-color:#d32f2f !important; color:#b71c1c !important;
  }

  /* keep colour when selected / in a range */
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-prep.selected,
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-prep.startRange,
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-prep.endRange,
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-prep.inRange { background:#cdebd5 !important; }

  .flatpickr-calendar .dayContainer .flatpickr-day.cat-shoot.selected,
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-shoot.startRange,
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-shoot.endRange,
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-shoot.inRange { background:#cfe4fc !important; }

  .flatpickr-calendar .dayContainer .flatpickr-day.cat-hold_over.selected,
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-hold_over.startRange,
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-hold_over.endRange,
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-hold_over.inRange { background:#ffe9b6 !important; }

  .flatpickr-calendar .dayContainer .flatpickr-day.cat-strike.selected,
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-strike.startRange,
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-strike.endRange,
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-strike.inRange { background:#ffc9cf !important; }

  .flatpickr-calendar .dayContainer .flatpickr-day:focus,
  .flatpickr-calendar .dayContainer .flatpickr-day:hover { box-shadow:none !important; }

  /* N/C (No Charge) – neutral grey */
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-nc:not(.disabled) {
    background:#f2f3f5 !important; border-color:#9ea3a8 !important; color:#646c72 !important;
  }
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-nc.selected,
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-nc.startRange,
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-nc.endRange,
  .flatpickr-calendar .dayContainer .flatpickr-day.cat-nc.inRange {
    background:#e6e8ea !important;
  }


  /* Side-by-side fields + fee table within a visit */
.visit-block .visit-flex {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 300px);
  gap: 12px;
  align-items: start;
}
@media (max-width: 768px) {
  .visit-block .visit-flex { grid-template-columns: 1fr; }
}

/* Use Dates list:
   - Up to 3 rows per column
   - With ≤3 visits, the single column spans full width
   - 4th visit automatically creates a 2nd equal column */
.use-dates-list{
  display: grid;
  grid-auto-flow: column;                  /* fill down first, then across */
  grid-template-rows: repeat(3, auto);     /* 3 per column */
  grid-auto-columns: minmax(0, 1fr);       /* each column is 1fr; single column = full width */
  gap: 14px 18px;
}

@media (max-width: 992px) {
  .use-dates-list{
    display: block;                         /* stack on narrow screens */
  }
}

/* Tidy little calc tables */
.calc-table th, .calc-table td { font-size: var(--fs-sm-s); vertical-align: middle; }
.calc-table .text-end { text-align: right; }


/* 1) tighter label → value layout inside each visit */
.visit-block .visit-fields .mb-2{
  display:grid;
  grid-template-columns:max-content 1fr; /* label fits, value takes rest */
  column-gap:8px;                        /* ← reduce this to make even tighter */
  align-items:start;
  margin-bottom:.35rem;                  /* was .5 via mb-2 */
}
.visit-block .visit-fields .mb-2 > strong{ margin:0; white-space:nowrap; }
.visit-block .visit-fields .mb-2 > .view-mode{ align-self:start; }
.visit-block .visit-fields .mb-2 > .edit-mode{ grid-column:1 / -1; } /* input full width in edit mode */

/* 2) put the delete button to the RIGHT of the fee table (smaller), 
      so the table aligns top with the dates block */
.visit-block .visit-calcs{
  display:grid;
  grid-template-columns: 1fr max-content;               /* table | trash */
  grid-template-areas: "table del" "mode  del";
  column-gap:10px;
  align-items:start;
}
.visit-block .visit-calcs > .d-flex{                    /* wrapper that contains the button */
  grid-area: del;
  align-self:start;
  display:contents;                                     /* makes the button a grid child */
}
.visit-block .visit-calcs .calc-table{ grid-area: table; margin-top:0; }
.visit-block .visit-calcs .text-muted.small{ grid-area: mode; margin-top:4px; }

/* smaller icon-only delete button */
.visit-block .remove-visit-btn.btn{
  padding:.25rem .35rem;
  line-height:1;
  border-radius:6px;
}
.visit-block .remove-visit-btn .bi{ font-size:.95rem; }

/* optional: nudge the whole visit-calcs block so the table lines up visually
   with the first line of dates text */
@media (min-width: 768px){
  .visit-block .visit-calcs{ margin-top:2px; }
}