/* =====================================================================
   Cattr calendar skin — shadcn-inspired cosmetic overlay.
   Loaded AFTER app.css (no SRI) so these rules win by source order.
   Scope is limited to the calendar page (.calendar) plus the calendar's
   own popup/modal, so it does not affect the rest of the app.
   Purely visual: the SVG month grid itself is drawn in JS and is left
   structurally intact (only fonts/label colors are softened).
   Reversible: remove the <link> in app.blade.php + these bind-mounts.
   ===================================================================== */

:root {
  --cal-bg: #f8fafc;          /* slate-50  */
  --cal-card: #ffffff;
  --cal-border: #e2e8f0;      /* slate-200 */
  --cal-border-strong: #cbd5e1;/* slate-300 */
  --cal-fg: #0f172a;          /* slate-900 */
  --cal-muted: #64748b;       /* slate-500 */
  --cal-accent: #0f172a;      /* near-black primary, shadcn default */
  --cal-accent-fg: #ffffff;
  --cal-hover: #f1f5f9;       /* slate-100 */
  --cal-ring: rgba(15, 23, 42, .12);
  --cal-radius: 10px;
  --cal-radius-sm: 8px;
  --cal-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05);
  --cal-shadow-lg: 0 10px 30px -10px rgba(16, 24, 40, .25);
  --cal-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
              Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ---- Page shell ---------------------------------------------------- */
.calendar {
  font-family: var(--cal-font) !important;
  color: var(--cal-fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.calendar .page-title {
  font-size: 1.5rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  color: var(--cal-fg) !important;
  margin-bottom: 1rem !important;
}

/* ---- Controls / toolbar row --------------------------------------- */
.calendar .controls-row {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  flex-wrap: wrap !important;
  padding: .625rem .75rem !important;
  background: var(--cal-card) !important;
  border: 1px solid var(--cal-border) !important;
  border-radius: var(--cal-radius) !important;
  box-shadow: var(--cal-shadow) !important;
  margin-bottom: 1rem !important;
}
.calendar .controls-row__item { margin: 0 !important; }

/* Prev / next month — shadcn "outline icon button" */
.calendar .controls-row .mx-btn,
.calendar .previous,
.calendar .next {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 .5rem !important;
  border: 1px solid var(--cal-border) !important;
  border-radius: var(--cal-radius-sm) !important;
  background: var(--cal-card) !important;
  color: var(--cal-fg) !important;
  cursor: pointer !important;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}
.calendar .controls-row .mx-btn:hover,
.calendar .previous:hover,
.calendar .next:hover {
  background: var(--cal-hover) !important;
  border-color: var(--cal-border-strong) !important;
}

/* "Show all" — subtle text/ghost button */
.calendar .show-all {
  display: inline-flex !important;
  align-items: center !important;
  height: 36px !important;
  padding: 0 .75rem !important;
  border-radius: var(--cal-radius-sm) !important;
  color: var(--cal-muted) !important;
  font-weight: 550 !important;
  cursor: pointer !important;
  transition: background .15s ease, color .15s ease !important;
}
.calendar .show-all:hover { background: var(--cal-hover) !important; color: var(--cal-fg) !important; }

/* Range picker (vue2-datepicker) input */
.calendar .datepicker .mx-input,
.calendar .mx-input {
  height: 36px !important;
  border: 1px solid var(--cal-border) !important;
  border-radius: var(--cal-radius-sm) !important;
  box-shadow: none !important;
  color: var(--cal-fg) !important;
  background: var(--cal-card) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.calendar .datepicker .mx-input:focus,
.calendar .mx-input:focus {
  border-color: var(--cal-border-strong) !important;
  box-shadow: 0 0 0 3px var(--cal-ring) !important;
  outline: none !important;
}

/* Select (at-ui) */
.calendar .at-select .at-select__selection {
  min-height: 36px !important;
  border: 1px solid var(--cal-border) !important;
  border-radius: var(--cal-radius-sm) !important;
  box-shadow: none !important;
  background: var(--cal-card) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.calendar .at-select .at-select__selection:hover { border-color: var(--cal-border-strong) !important; }
.calendar .at-select.at-select--visible .at-select__selection {
  border-color: var(--cal-border-strong) !important;
  box-shadow: 0 0 0 3px var(--cal-ring) !important;
}

/* ---- The SVG calendar surface (framed as a card) ------------------ */
.calendar .svg-container,
.calendar .svg-container__desktop,
.calendar .svg-container__mobile {
  background: var(--cal-card) !important;
  border: 1px solid var(--cal-border) !important;
  border-radius: var(--cal-radius) !important;
  box-shadow: var(--cal-shadow) !important;
  padding: .5rem !important;
  overflow: hidden !important;
}
/* Soften the SVG typography + default (non-colored) label text.
   Colored data values keep their own inline fill where the app sets it
   via a class; this only shifts the base text tone toward slate. */
.calendar .svg-container svg text {
  font-family: var(--cal-font) !important;
}

/* ---- Day / interval popup ----------------------------------------- */
.calendar__popup,
.calendar .popup {
  background: var(--cal-card) !important;
  border: 1px solid var(--cal-border) !important;
  border-radius: var(--cal-radius) !important;
  box-shadow: var(--cal-shadow-lg) !important;
  padding: .875rem 1rem !important;
  color: var(--cal-fg) !important;
}
.calendar__popup .popup__row,
.calendar .popup__row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.25rem !important;
  padding: .25rem 0 !important;
}
.calendar__popup .popup__key,
.calendar .popup__key { color: var(--cal-muted) !important; font-weight: 500 !important; }
.calendar__popup .popup__value,
.calendar .popup__value { color: var(--cal-fg) !important; font-weight: 600 !important; }

/* ---- Tasks modal --------------------------------------------------- */
.tasks-modal {
  background: var(--cal-card) !important;
  border: 1px solid var(--cal-border) !important;
  border-radius: var(--cal-radius) !important;
  box-shadow: var(--cal-shadow-lg) !important;
  overflow: hidden !important;
}
.tasks-modal__header,
.tasks-modal__title {
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  color: var(--cal-fg) !important;
  padding: .875rem 1rem !important;
  border-bottom: 1px solid var(--cal-border) !important;
}
.tasks-modal__list { padding: .375rem !important; }
.tasks-modal__item {
  border-radius: var(--cal-radius-sm) !important;
  padding: .5rem .625rem !important;
  transition: background .12s ease !important;
}
.tasks-modal__item:hover { background: var(--cal-hover) !important; }
.tasks-modal__link { color: var(--cal-fg) !important; text-decoration: none !important; font-weight: 550 !important; }
.tasks-modal__link:hover { color: #2563eb !important; }