/*
 * 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.
 */

/* Self-hosted Material Symbols Outlined (offline-safe) */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("/assets/material-symbols-outlined-c84f9c84.woff2") format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
}

/* Prevent layout shift from scrollbar appearing/disappearing */
html {
  overflow-y: scroll;
}

/* Disable font ligatures globally to prevent rendering issues (e.g., 'fi' combination hiding dot on 'i') */
* {
  font-variant-ligatures: none;
}

/* Ensure pointer cursor on all interactive elements */
button,
[type="submit"],
[type="button"],
[role="button"],
a[href],
select,
summary {
  cursor: pointer;
}

/* Manrope font family */
.font-manrope {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Material Symbols filled variant */
.material-symbols-filled {
  font-variation-settings: 'FILL' 1;
}

/* ========================================
   COACHWAVE THEME - Clean Minimal Design
   ======================================== */

/* Main content background - teal mesh gradient */
.cw-bg {
  position: relative;
  background: linear-gradient(150deg, #e8f9f5 0%, #f0fbf8 25%, #f7fdfb 50%, #eefaf5 75%, #e8f9f5 100%);
  background-color: #f0fbf8;
}

.cw-bg::before {
  content: "";
  position: fixed;
  top: -80px;
  left: -60px;
  width: 600px;
  height: 600px;
  border-radius: 9999px;
  background: rgba(94, 234, 212, 0.3);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

.cw-bg::after {
  content: "";
  position: fixed;
  bottom: -100px;
  right: -80px;
  width: 650px;
  height: 650px;
  border-radius: 9999px;
  background: rgba(110, 231, 183, 0.25);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

/* Top navigation bar */
.cw-topnav {
  background: white;
  border-bottom: 1px solid #e8e8e8;
}

.cw-topnav-link {
  color: #4b5563;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  transition: color 0.15s ease;
}

.cw-topnav-link:hover {
  color: #1f2937;
}

.cw-topnav-link.active {
  color: #1f2937;
  font-weight: 600;
}

/* Sliding underline indicator (positioned by topnav Stimulus controller) */
.cw-topnav-slider {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: #f97316;
  border-radius: 1px;
  opacity: 0;
  pointer-events: none;
}

/* CoachWave Card Styles - clean, no glassmorphism */
.cw-card {
  position: relative;
  z-index: 1;
  background: white;
  border-radius: 12px;
  border: 1px solid #d1d5db;
}

.cw-card-transparent {
  background: white;
  border-radius: 12px;
  border: 1px solid #d1d5db;
}

.cw-card-hover {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cw-card-hover:hover {
  border-color: #9ca3af;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* CoachWave Status Badges */
.cw-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.cw-badge-progress {
  background: #eff6ff;
  color: #2563eb;
}

.cw-badge-completed {
  background: #f0fdf4;
  color: #16a34a;
}

.cw-badge-success {
  background: #f0fdf4;
  color: #16a34a;
}

.cw-badge-danger {
  background: #fef2f2;
  color: #dc2626;
}

.cw-badge-pending {
  background: #fffbeb;
  color: #d97706;
}

/* Status tooltip on badges and info icons */
.status-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #d1d5db;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: normal;
  width: 220px;
  text-align: center;
  pointer-events: none;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.status-info-icon .status-tooltip {
  width: 240px;
  text-align: left;
  padding: 10px 12px;
  right: 0;
  left: auto;
  transform: none;
}
.status-info-icon .status-tooltip.status-tooltip--wide {
  width: 340px;
}

/* GDPR info tooltip on notes headings — uses JS to position via fixed */
.gdpr-info-icon {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.gdpr-tooltip {
  display: none;
  position: fixed;
  width: 320px;
  background: #1e293b;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.55;
  padding: 12px 14px;
  border-radius: 8px;
  white-space: normal;
  text-align: left;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
}
.gdpr-tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 12px;
  border: 5px solid transparent;
  border-bottom-color: #1e293b;
}
.status-info-icon .status-tooltip::after {
  right: 8px;
  left: auto;
  transform: none;
}
.status-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f2937;
}
.group:hover > .status-tooltip {
  display: block;
}

/* Task list table styling */
.cw-table th {
  color: #4b5563;
  font-weight: 500;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 16px;
  padding-right: 16px;
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Notes icon tooltip in clients table */
.cw-notes-icon:hover .cw-notes-tooltip {
  opacity: 1;
}

.cw-notes-icon:hover .material-symbols-outlined {
  color: #ea580c;
}

.cw-notes-tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 8px);
  min-width: 260px;
  max-width: 360px;
  padding: 10px 14px;
  background: #1f2937;
  color: white;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  white-space: normal;
  text-align: left;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 50;
}

.cw-notes-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f2937;
}

/* Fixed-position notes tooltip (escapes overflow:hidden) */
.cw-notes-tooltip-fixed {
  display: none;
  position: fixed;
  min-width: 260px;
  max-width: 360px;
  padding: 10px 14px;
  background: #1f2937;
  color: white;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  white-space: normal;
  text-align: left;
  pointer-events: none;
  z-index: 9999;
}
.cw-notes-tooltip-fixed::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f2937;
}

.cw-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cw-table tr:hover {
  background: #f9fafb;
}

/* Client page tab links */
.cw-tab-link {
  color: #4b5563;
  font-size: 14px;
  font-weight: 500;
  padding: 14px 16px;
  transition: color 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}

.cw-tab-link:hover {
  color: #1f2937;
}

.cw-tab-link.active {
  color: #1f2937;
  font-weight: 600;
}

/* Sliding underline for tabs (positioned by tabs Stimulus controller) */
.cw-tab-slider {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: #f97316;
  border-radius: 1px;
  opacity: 0;
  pointer-events: none;
}

/* CTA card */
.cw-cta-card {
  background: #2d3a4a;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.cw-cta-image {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.08) 78%, transparent 90%);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.08) 78%, transparent 90%);
}

/* CTA slide transitions */
.cw-cta-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: opacity 0.35s ease;
}

/* Dot Divider — matches the weekly sessions chart dots (radius 1, spacing 10) */
.cw-dot-divider {
  height: 2px;
  background-image: radial-gradient(circle, rgb(200, 205, 215) 1px, transparent 1px);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  background-position: center;
}

/* CTA Button */
.cw-btn {
  background: white;
  color: #1f2937;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.cw-btn:hover {
  background: #f3f4f6;
}


/* ========================================
   CUSTOM SCROLLBAR - Minimal thin style
   ======================================== */

.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #c4c4c4 transparent;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 9999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #b0b5bc;
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* ========================================
   CROPPER.JS - Circular crop mask
   ======================================== */

.cropper-view-box,
.cropper-face {
  border-radius: 50%;
}

.cropper-view-box {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-color: rgba(255, 255, 255, 0.75);
}

.cropper-face {
  background-color: transparent !important;
}

/* Hide grid lines, resize handles, and center indicator */
.cropper-dashed,
.cropper-point,
.cropper-center,
.cropper-line {
  display: none !important;
}

/* Darken area outside the crop circle */
.cropper-modal {
  background-color: rgba(0, 0, 0, 0.6);
}

/* ── Flash toasts ─────────────────────────────────────────────────────────────
   One stack, one card, every layout (shared/_flash_toasts + shared/_toast).
   Lives here rather than in design_system.css because the landing, portal,
   admin and application layouts don't load the design system — hence the
   fallbacks on every ds variable, so the card is identical either way.
   --ds-toast-top lets a layout clear its own header; the flash Stimulus
   controller animates via Tailwind's opacity-0/-translate-y-2 utilities.

   Top-centre, every layout. It overlays the header (on the dashboard, the
   search field) for the seconds it shows, which is the point: centring keeps it
   away from the top-RIGHT controls every layout puts there — the avatar, and
   the dashboard's New client / New session buttons — so a toast can never sit
   on top of something clickable. */
.ds-toasts {
  position: fixed;
  /* The runway. A card flies in from above the viewport, but `overflow-y` below
     clips to this box's padding edge — so a stack starting at its resting spot
     would slice the card off mid-flight and the entry would read as a wipe from
     a slot rather than a card falling in. Start the box a runway higher and pad
     the runway straight back, so cards still rest at --ds-toast-top and only the
     flight path is added. It must clear the tallest fall (the largest layout
     offset, 5rem, plus a multi-line card); it costs nothing to be generous,
     since the padding is inert — pointer-events: none, and no card is ever
     parked there. */
  --ds-toast-runway: 320px;
  top: calc(var(--ds-toast-top, 1rem) - var(--ds-toast-runway));
  padding-top: var(--ds-toast-runway);
  left: 50%;
  /* Centre on the content column, not the viewport. A layout with a fixed
     sidebar passes its width as --ds-toast-shift (the dashboard passes the live
     --side-w, so this follows the sidebar collapsing on its own); without it the
     stack lands half a sidebar left of the header it sits over. */
  margin-left: calc(var(--ds-toast-shift, 0px) / 2);
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: min(23.75rem, calc(100vw - 2rem));
  /* The stack is always in the DOM, so it must never intercept clicks on the
     page where it has no card; only the cards themselves take the pointer. */
  pointer-events: none;
  /* Cap the run so a burst of toasts scrolls in place rather than marching down
     the page. In px: the shell drops the root font to 14px on short viewports,
     so a rem cap silently shrinks 12.5% and clips a card meant to fit. */
  /* The runway is part of the scroll box, so it has to be added back here too —
     otherwise it would eat the cap and a single card would scroll. Adding it to
     both sides leaves the cap meaning exactly what it did: the run scrolls the
     moment the CARDS pass --ds-toast-max, and the stack's bottom edge lands in
     the same place. */
  max-height: calc(var(--ds-toast-max, 240px) + var(--ds-toast-runway));
  overflow-y: auto;
  scrollbar-width: none;
}
.ds-toasts::-webkit-scrollbar { display: none; }
.ds-toasts > * { pointer-events: auto; width: 100%; }
/* The sidebar is display:none under 1024px — nothing left to offset against. */
@media (max-width: 1023px) {
  .ds-toasts { margin-left: 0; }
}
/* Narrow screens: a phone header is short and its avatar sits close to centre,
   so drop below the header rather than cover it. */
@media (max-width: 767px) {
  .ds-toasts {
    top: calc(var(--ds-toast-top-sm, var(--ds-toast-top, 1rem)) - var(--ds-toast-runway));
    max-height: calc(var(--ds-toast-max-sm, var(--ds-toast-max, 240px)) + var(--ds-toast-runway));
  }
}

/* A toast is a floating surface, so it takes the system's floating recipe
   (.ds-pop, .calendar-tooltip): white card + the deep overlay shadow. Page cards
   carry a soft `0 2px 10px -2px/.10`; that gap in elevation is what separates
   "above the page" from "on the page" here.

   The border is a solid mid blue rather than the usual grey hairline — it reads
   as a deliberate edge against both the page and the white search field the
   toast sits over, without the accent blue's pull toward "focused/selected".
   Colour still stays out of the surface and in the icon chip, like every other
   status signal (.ds-st-*). */
.ds-toast {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--card, #fff);
  border: 1px solid #A9D2F0;
  border-radius: 0.625rem;
  box-shadow: 0 18px 40px -18px rgba(16, 42, 67, 0.35);
  padding: 0.625rem 0.75rem 0.625rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink, #243B53);
  /* Decelerating, no overshoot: the card is moving fastest when it is off the
     screen and slowest as it lands, so the eye catches the arrival without the
     card demanding to be watched. */
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Parked off-screen — the state a card enters from and leaves to.
   Up by its own height (100%) plus the drop from the viewport's top edge to its
   resting spot (--ds-toast-top), which puts its bottom edge exactly on y=0: out
   of sight in every layout, whatever offset that layout passes, without pinning
   a travel distance to any one of them. */
.ds-toast-off {
  opacity: 0;
  transform: translateY(calc(-1 * (var(--ds-toast-top, 1rem) + 100%)));
}
@media (max-width: 767px) {
  .ds-toast-off {
    transform: translateY(calc(-1 * (var(--ds-toast-top-sm, var(--ds-toast-top, 1rem)) + 100%)));
  }
}

/* Leaving retraces the entry — same path, mirrored curve (it now accelerates
   away rather than easing in), and quicker: an arrival has to be noticed, a
   departure only has to be understood. Keep in step with EXIT_MS in
   controllers/flash_controller.js, which removes the card when this ends. */
.ds-toast-leaving {
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.64, 0, 0.78, 0);
}

/* Reduced motion: keep the fade (it still signals arrival and departure, and the
   card must not simply blink out mid-read) but drop the travel, which is the
   part that provokes. */
@media (prefers-reduced-motion: reduce) {
  .ds-toast,
  .ds-toast-leaving {
    transition: opacity 0.2s linear;
  }
  .ds-toast-off { transform: none; }
}

.ds-toast-ic {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5625rem;
  display: grid;
  place-items: center;
  flex: 0 0 1.75rem;
}
.ds-toast-ic svg { width: 0.9375rem; height: 0.9375rem; }
.ds-toast-ic.ds-green { background: var(--green-bg, #E3F5EA); color: var(--green-tx, #177E4D); }
.ds-toast-ic.ds-red { background: #FBEBE9; color: #C43D3D; }

.ds-toast-msg { flex: 1; min-width: 0; }

/* --muted, not --faint: the dismiss glyph is the only control on the card and
   --faint (#8CA0B3) lands at 2.69:1 on white, under the 3:1 WCAG needs for a
   meaningful icon. --muted clears it at 5.08:1. */
.ds-toast-x {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--muted, #5B7183);
  padding: 0.25rem;
  border-radius: 0.375rem;
  transition: color 0.15s, background-color 0.15s;
}
.ds-toast-x:hover { color: var(--ink, #243B53); background: var(--active, #E3F2FB); }
/* An error toast never times out, so this button is the only way to close it —
   it has to be visibly reachable by keyboard. Ring matches the system's. */
.ds-toast-x:focus-visible {
  outline: none;
  color: var(--ink, #243B53);
  box-shadow: 0 0 0 4px rgba(17, 115, 194, 0.10);
}
.ds-toast-x svg { width: 0.875rem; height: 0.875rem; }