/*
  HEROKU REBUILD GOTCHA: A Tailwind class that appears ONLY in app/views/**.erb
  can silently fail to compile on deploy. The Ruby buildpack's asset-change
  detection watches app/assets (not app/views), so a view-only change may skip
  assets:precompile and reuse the cached CSS — the new utility class then won't
  exist in production even though the markup references it. If a class isn't
  taking effect after a deploy, force a Tailwind rebuild: edit this file (any
  change) or run `heroku repo:purge_cache -a advokate`, then redeploy. See
  CLAUDE.md -> Production Notes. (cache-bust marker: 2026-06-24b — force
  assets:precompile so the Klean Analysis "Follow up" section's emphasis
  classes (shadow-xl, ring-brand-mint/40, bg-brand-mint/10, w-44, w-72,
  divide-y) land in production)
*/
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Brand palette variables. :root holds the Advokate (default) values; the
   .brand-planifi class (stamped on <html> by the layout) overrides them.
   Channels are space-separated RGB so Tailwind's `/ <alpha-value>` works. */
:root {
  --brand-ocean: 1 71 95;
  --brand-pine: 1 58 55;
  --brand-lime: 169 220 21;
  --brand-leaf: 139 197 64;
  --brand-green: 67 172 71;
  --brand-mint: 66 205 152;
  --brand-mist: 209 244 209;
  --brand-cream: 252 248 245;

  --gradient-soft: linear-gradient(135deg, #FCF8F5 0%, #D1F4D1 100%);
  --gradient-ocean: radial-gradient(700px circle at 0% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 58%), linear-gradient(135deg, #01475F 0%, #013A37 100%);
  --gradient-sea: radial-gradient(700px circle at 0% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 58%), linear-gradient(135deg, #01475F 0%, #42CD98 100%);
  --gradient-leaf: linear-gradient(135deg, #8BC540 0%, #43AC47 100%);
}

.brand-planifi {
  --brand-ocean: 30 64 175;
  --brand-pine: 30 58 138;
  --brand-lime: 56 189 248;
  --brand-leaf: 59 130 246;
  --brand-green: 37 99 235;
  --brand-mint: 14 165 233;
  --brand-mist: 219 234 254;
  --brand-cream: 248 250 252;

  --gradient-soft: linear-gradient(135deg, #F8FAFC 0%, #DBEAFE 100%);
  --gradient-ocean: radial-gradient(700px circle at 0% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 58%), linear-gradient(135deg, #1E40AF 0%, #1E3A8A 100%);
  --gradient-sea: radial-gradient(700px circle at 0% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 58%), linear-gradient(135deg, #1E40AF 0%, #0EA5E9 100%);
  --gradient-leaf: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
}

@layer base {
  body {
    @apply font-sans bg-brand-cream text-slate-900;
  }

  h1, h2, h3 {
    @apply font-display;
  }

  h4, h5, h6 {
    @apply font-subhead font-bold;
  }
}

@layer utilities {
  .h-app {
    height: var(--app-height, 100dvh);
  }
}

/* Sticky right-edge table column (punchlist #50, 2026-07-17). Keeps a wide admin
   index table's Actions column pinned to the right edge so View/Edit/Delete is
   always reachable without horizontal scrolling — which means you never scroll
   the row's identity (e.g. the plan name) out of view to reach it. Apply the
   `col-sticky-right` class to BOTH the Actions <th> and each Actions <td> inside a
   horizontally-scrolling table (the `overflow-auto` wrapper). This is plain CSS
   (not an @apply utility) so it's never purged; adding it here also forces
   assets:precompile on deploy (see the Heroku rebuild gotcha above). */
.col-sticky-right {
  position: sticky;
  right: 0;
  z-index: 10;
  background-color: #ffffff;
  box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12);
}
tr:hover > td.col-sticky-right {
  background-color: #f9fafb; /* gray-50 — matches the row hover tint */
}
thead .col-sticky-right {
  z-index: 30; /* wins the top-right corner over the sticky thead (z-20) */
  background-color: #f9fafb; /* gray-50 — matches the sticky thead background */
}

/* Participant-facing plan-overview video. Chrome's native <video controls>
   bar overlays the bottom of the frame — first the dark fade behind it
   (2026-08-25, v265/v266 re-shaded it), then the bar itself hiding the last
   line of slide text (2026-09-15). Controls now render BELOW the frame in
   `video_player_controller.js`; `.plan-video` keeps the shading fix for the
   no-JS fallback, where the native bar is still the only way to press play. */
.plan-video::-webkit-media-controls-panel {
  background-image: none !important;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) !important;
}
.plan-player__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  flex: none;
}
.plan-player__btn:hover,
.plan-player__btn:focus-visible {
  background-color: rgba(255, 255, 255, 0.15);
  outline: none;
}
.plan-player__seek {
  accent-color: rgb(var(--brand-lime));
  height: 1.25rem;
  cursor: pointer;
}
/* Fullscreen targets the wrapper (video + bar), so the bar stays under the
   frame there too; the video letterboxes into whatever is left above it. */
.plan-player.is-fullscreen {
  display: flex;
  flex-direction: column;
  border-radius: 0;
}
.plan-player.is-fullscreen .plan-video {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Sticky left-edge table column (Task 13 review fix). Symmetric to
   col-sticky-right above — pins a row-identity column (e.g. Plan) to the left
   edge of a horizontally-scrolling table so it never scrolls out of view while
   reaching filters/data further right. Apply the `col-sticky-left` class to
   BOTH that column's <th> and each of its <td>s. */
.col-sticky-left {
  position: sticky;
  left: 0;
  z-index: 10;
  background-color: #ffffff;
  box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.12);
}
tr:hover > td.col-sticky-left {
  background-color: #f9fafb; /* gray-50 — matches the row hover tint */
}
thead .col-sticky-left {
  z-index: 30; /* wins the top-left corner over the sticky thead (z-20) */
  background-color: #f9fafb; /* gray-50 — matches the sticky thead background */
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/