@tailwind base;
@tailwind components;
@tailwind utilities;

@custom-variant dark (&:where(.dark, .dark *));

@layer components {
  /* Button Base Styles */
  .btn {
    @apply py-2 px-4 font-medium rounded inline-block text-center no-underline border border-transparent cursor-pointer;
  }

  /* Primary Button */
  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800;
  }

  /* Secondary Button */
  .btn-secondary {
    @apply bg-gray-200 text-gray-800 border-gray-300 hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-700;
  }

  /* Tertiary Button */
  .btn-tertiary {
    @apply bg-gray-600 text-white hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-800;
  }

  /* Danger Button */
  .btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800;
  }

  /* Success Button */
  .btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800;
  }

  /* Info Button */
  .btn-info {
    @apply bg-indigo-600 text-white hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-800;
  }

  /* Light Info Button */
  .btn-info-light {
    @apply bg-indigo-100 text-indigo-700 hover:bg-indigo-200 dark:bg-indigo-900 dark:text-indigo-200 dark:hover:bg-indigo-800;
  }

  /* Light Success Button */
  .btn-success-light {
    @apply bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900 dark:text-green-200 dark:hover:bg-green-800;
  }

  /* Warning Button */
  .btn-warning {
    @apply bg-orange-600 text-white hover:bg-orange-700 dark:bg-orange-700 dark:hover:bg-orange-800;
  }

  /* Light Warning Button */
  .btn-warning-light {
    @apply bg-orange-100 text-orange-700 hover:bg-orange-200 dark:bg-orange-900 dark:text-orange-200 dark:hover:bg-orange-800;
  }

  /* Light Danger Button */
  .btn-danger-light {
    @apply bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900 dark:text-red-200 dark:hover:bg-red-800;
  }
}

h1, h2, h3, h4, h5, h6 {
  @apply font-bold text-black dark:text-gray-200;
}
html.dark {
  @apply text-gray-200;
}

.session-holder {
  @apply w-full;
  height: var(--height);
  display: flex;
}
.session-holder:hover {
  height: auto;
  min-height: var(--height);
}
.session {
  @apply border border-l-[3px] p-2 rounded-md w-full shadow-sm hover:shadow-lg transition-shadow;
  @apply bg-slate-50 border-slate-300 border-l-slate-400;
  @apply dark:bg-slate-900 dark:border-slate-700 dark:border-l-slate-500;

  &.no-backup-needed {
    @apply bg-green-100 border-green-300 border-l-green-600;
    @apply dark:bg-green-950/60 dark:border-green-800 dark:border-l-green-500;
  }
  &.backup-needed {
    @apply bg-amber-100 border-amber-300 border-l-amber-600;
    @apply dark:bg-amber-950/60 dark:border-amber-800 dark:border-l-amber-500;
  }
  &.translators-needed {
    @apply bg-red-100 border-red-300 border-l-red-600;
    @apply dark:bg-red-950/60 dark:border-red-800 dark:border-l-red-500;
  }
  &.no-assignees {
    @apply bg-red-200 border-red-400 border-l-red-700;
    @apply dark:bg-red-950/80 dark:border-red-700 dark:border-l-red-400;
  }
}

/* User chip - tight & readable. Per-user bg/text color is set inline from
   user.avatar_color / user.text_color, so this class is the layout only. */
.nm-chip {
  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded font-semibold relative whitespace-nowrap leading-snug;
  font-size: 0.75rem; /* 12px - readable, click target ~22px tall */
  /* Fixed-color inset outline on every chip so they read as distinct
     pills regardless of the per-user background, instead of bleeding
     into the card background when avatar_color is near the card color.
     Using box-shadow inset keeps the chip's own size unchanged. */
  box-shadow: inset 0 0 0 1px rgb(100 116 139 / 0.5); /* slate-500/50 */
}
:where(.dark) .nm-chip {
  box-shadow: inset 0 0 0 1px rgb(148 163 184 / 0.5); /* slate-400/50 */
}
.nm-chip.candidate {
  @apply opacity-95;
}
.nm-chip .wl {
  @apply opacity-55 font-medium tabular-nums ml-0.5;
  font-size: 0.6875rem; /* 11px */
}

/* Capacity badge - small [2/2] inline tag colored to the state */
.cap-badge {
  @apply inline-flex items-center justify-center px-1 py-px rounded font-bold text-[10px] tabular-nums leading-tight;
}
.cap-badge.cap-ok    { @apply bg-green-200 text-green-900 dark:bg-green-900/60 dark:text-green-100; }
.cap-badge.cap-warn  { @apply bg-amber-200 text-amber-900 dark:bg-amber-900/60 dark:text-amber-100; }
.cap-badge.cap-crit  { @apply bg-red-200 text-red-900 dark:bg-red-900/60 dark:text-red-100; }
.cap-badge.cap-muted { @apply bg-black/10 text-slate-700 dark:bg-white/10 dark:text-slate-300; }

/* Section label inside a session card: "assigned 2/2", "candidates 3" - kept
   inline with the chip row so it doesn't take a whole extra line. */
.s-section {
  @apply inline-flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wide text-slate-600 dark:text-slate-400 mr-1.5;
}

/* Corner badges on chips - top-right / top-left / bottom-right slots reserved
   per category in the design. SVG inside scales to 11px. */
.nm-badge {
  @apply absolute inline-flex items-center justify-center w-[13px] h-[13px] rounded-full ring-[1.5px] ring-white dark:ring-slate-900 pointer-events-none;
}
.nm-badge svg {
  @apply w-[10px] h-[10px];
  stroke-width: 2.4;
}
.nm-badge.b2b      { @apply bg-amber-500 text-amber-950 dark:text-amber-950; top: -3px; right: -3px; }
.nm-badge.overlap  { @apply bg-red-600 text-white; top: -3px; right: -3px; }
.nm-badge.unavail  { @apply bg-red-600 text-white; bottom: -3px; right: -3px; }
.nm-badge.newbie   { @apply bg-green-600 text-white; top: -3px; left: -3px; }

/* Chip needs side-padding when a badge is attached */
.nm-chip.has-tr { @apply pr-[11px]; }
.nm-chip.has-br { @apply pr-[11px]; }
.nm-chip.has-tr.has-br { @apply pr-[13px]; }
.nm-chip.has-tl { @apply pl-[11px]; }

/* Language pill - replaces the existing inline lang-de / lang-en styling */
.lang-pill {
  @apply inline-flex items-center font-mono text-[10px] font-bold uppercase rounded px-1 py-px text-white shrink-0;
  letter-spacing: 0.02em;
}
.lang-pill.lang-de { @apply bg-sky-500; }
.lang-pill.lang-en { @apply bg-fuchsia-500; }
.lang-pill.lang-other { @apply bg-slate-500; }
#flash {
  @apply mx-auto flex items-center flex-col gap-1 p-2;
  .flash {
    @apply bg-slate-100 border-slate-200 border inline-block p-2 rounded-lg shadow;
    &.alert-notice {
      @apply bg-sky-200 border-sky-400;
    }
    &.alert-error {
      @apply bg-red-200 border-red-400;
    }
    &.alert-success {
      @apply bg-green-200 border-green-400;
    }
  }
}
.past {
  @apply opacity-50 hover:opacity-100;
}

/* Responsive admin table: below md, the table collapses to a stack of
   row-cards with the header row hidden. td cells flow vertically; an
   optional data-label attribute renders as a small uppercase prefix so
   the value still reads in context. Above md the table renders normally. */
@media (max-width: 767px) {
  .responsive-table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td {
    display: block;
  }
  .responsive-table thead {
    display: none;
  }
  .responsive-table tr {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid rgb(241 245 249);
  }
  :where(.dark) .responsive-table tr {
    border-top-color: rgb(30 41 59);
  }
  .responsive-table td {
    padding: 0.125rem 0;
    white-space: normal;
  }
  .responsive-table td[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 5rem;
    font-weight: 600;
    color: rgb(100 116 139);
    margin-right: 0.5rem;
    text-transform: uppercase;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    vertical-align: baseline;
  }
}

/* Denser responsive table for list-of-rich-items tables. Below md, each
   <tr> becomes a 2-column CSS grid so the cells pack horizontally
   instead of stacking one per line. <td class="full"> spans the full
   row; <td class="row-right"> right-aligns within its grid cell. <thead
   class="hide-mobile"> hides the column-name header row on mobile;
   theads without that class (used as section dividers) stay visible. */
@media (max-width: 767px) {
  .responsive-table-grid,
  .responsive-table-grid > thead,
  .responsive-table-grid > thead > tr,
  .responsive-table-grid > thead > tr > th,
  .responsive-table-grid > tbody {
    display: block;
  }
  .responsive-table-grid > thead.hide-mobile {
    display: none;
  }
  .responsive-table-grid > tbody > tr {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    padding: 0.625rem 0.75rem;
    border-top: 1px solid rgb(241 245 249);
    align-items: baseline;
  }
  :where(.dark) .responsive-table-grid > tbody > tr {
    border-top-color: rgb(30 41 59);
  }
  .responsive-table-grid > tbody > tr > td {
    display: block;
    padding: 0;
    min-width: 0;
    white-space: normal;
  }
  .responsive-table-grid > tbody > tr > td.full {
    grid-column: 1 / -1;
  }
  .responsive-table-grid > tbody > tr > td.row-right {
    justify-self: end;
    text-align: right;
  }
}

/* Needs attention filter - hide OK sessions when filter is active */
.filter-needs-attention .session-holder:has(.session.ok) {
  @apply hidden;
}
.filter-needs-attention .session-holder:has(.session.reviewed) {
  @apply hidden;
}

/* Visual indicator for reviewed sessions */
.session.reviewed {
  @apply ring-2 ring-green-500 ring-offset-1;
}
.field {
  @apply my-2;
  label {
    @apply block;
  }
}
.conference-stats {
  ul {
    @apply list-disc list-inside;
    li {
      @apply ml-6;
    }
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
/* Add your styles here to layout the tabs, timeline, and session blocks */

.timeline {
  position: relative;
  margin: 0 auto;
}

.session h4 {
  margin-top: 0;
  margin-bottom: 4px;
}
.session p {
  margin: 6px 0;
}
.session .session-desc {
  text-overflow: ellipsis;
}
.conference-day {
  position: relative;
}
.stage-sessions {
  position: relative;
}
.time {
  border-top: 1px dotted rgb(203 213 225); /* slate-300 */
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  color: rgb(100 116 139); /* slate-500 */
  padding-left: 6px;
}
:where(.dark) .time {
  border-top-color: rgb(51 65 85); /* slate-700 */
  color: rgb(148 163 184); /* slate-400 */
}
.time.hour-start {
  border-top: 1px solid rgb(148 163 184); /* slate-400 */
  color: rgb(15 23 42); /* slate-900 */
  font-weight: 600;
}
:where(.dark) .time.hour-start {
  border-top-color: rgb(100 116 139); /* slate-500 */
  color: rgb(241 245 249); /* slate-100 */
}
.current-time {
  position: absolute;
  width: 100%;
  height: 2px;
  z-index: 30;
  background: #ef4444; /* red-500 */
  box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
  pointer-events: none;
}
/* Timeline header row (sticky) */
.timeline-headers {
  z-index: 35 !important;
}
.time-header,
.stage-header {
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}
.time-header {
  width: 50px;
  min-width: 50px;
  flex-shrink: 0;
}
.stage-header {
  flex: 1 1 0;
  min-width: 280px;
  max-width: 460px;
  padding: 0.25rem 6px;
  border-left: 1px dashed rgb(203 213 225); /* slate-300 */
}
:where(.dark) .stage-header { border-left-color: rgb(51 65 85); /* slate-700 */ }

/* Container for stage-header cells - flex so children share space */
.stage-headers {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

/* Timeline content */
.times {
  width: 50px;
  min-width: 50px;
  flex-shrink: 0;
  position: sticky;
  left: 0;
  background: rgb(255 255 255 / 0.9);
  z-index: 25;
}
:where(.dark) .times { background: rgb(15 23 42 / 0.92); }
.stages {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-width: 0;
}
.stages .stage {
  flex: 1 1 0;
  min-width: 280px;
  max-width: 460px;
  padding: 0 6px;
  border-right: 1px dashed rgb(203 213 225); /* slate-300 */
}
:where(.dark) .stages .stage { border-right-color: rgb(51 65 85); /* slate-700 */ }
.stages .stage:last-child { border-right: 0; }

/* Snap to next stage on horizontal swipe (tablet + mobile) */
@media (max-width: 1024px) {
  .day-wrapper {
    scroll-snap-type: x mandatory;
    /* keep the sticky time column from clipping the snap target */
    scroll-padding-left: 50px;
    -webkit-overflow-scrolling: touch;
  }
  .stages .stage,
  .stage-header {
    scroll-snap-align: start;
  }
}

/* Mobile: time column compact + flush, stage size lets ~one fit with a peek of the next */
@media (max-width: 640px) {
  /* tighter time gutter - 32px is wide enough for "10:00", not pretty but functional */
  .times,
  .time-header {
    width: 32px;
    min-width: 32px;
    padding-left: 2px;
  }
  .day-wrapper { scroll-padding-left: 32px; }
  .time {
    padding-left: 2px;
    font-size: 10px;
  }
  /* Stage = viewport minus gutter minus peek of next column. Peek is ~52px,
     enough to see the next stage's title bar but not enough to read content. */
  .stages .stage,
  .stage-header {
    min-width: calc(100vw - 32px - 52px);
    max-width: calc(100vw - 32px - 52px);
    padding: 0 4px;
  }

  /* Session card on mobile: looser padding, tighter type */
  .session {
    padding: 0.5rem !important;
    font-size: 0.8125rem;
  }
  .session h4 { font-size: 0.875rem; line-height: 1.25; margin-bottom: 0.25rem; }
  .session .session-time,
  .session .session-location { font-size: 0.6875rem; }
  /* Keep the action menu floating in the top-right on mobile too -
     overlapping content reads as a sticker on top of the card, rather
     than a row that pushes everything down. */
}

/* Improve mobile scrolling for tables */
.table-responsive,
table.w-full,
.overflow-x-auto:not(.day-wrapper),
.admin-table-container,
div:has(> table) {
  width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100vw;
  display: block;
}

/* Mobile responsive headers with buttons */
@media (max-width: 640px) {
  .header-with-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-with-actions h1,
  .header-with-actions h2,
  .header-with-actions h3 {
    margin-bottom: 0.75rem;
  }

  .header-with-actions .actions {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }
}

/* Make day headers sticky at top */
.conference-day h3.sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(4px);
}

/* Override table-responsive display for day-wrapper to maintain flex layout */
.day-wrapper.table-responsive {
  display: flex !important;
}

/* Responsive admin dashboard tiles */
@media (max-width: 768px) {
  .admin-dashboard-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-dashboard-tiles .tile {
    padding: 0.75rem;
    min-height: auto;
  }
  .admin-dashboard-tiles .tile h3 {
    font-size: 1rem;
  }
  .admin-dashboard-tiles .tile p {
    font-size: 0.875rem;
  }
  .admin-dashboard-tiles .tile .stat {
    font-size: 1.25rem;
  }
}

/* Role-based visibility classes */
[class*="-only"] {
  display: none;
}

/* Permission-based visibility classes */
.can-manage-assignments-only {
  display: none;
}
body[data-can-manage-assignments] .can-manage-assignments-only {
  display: block;
}

/* Role-based visibility classes */
.has-role-shift_coordinator-only {
  display: none;
}
body[data-has-role-shift_coordinator] .has-role-shift_coordinator-only {
  display: block;
}

.has-role-admin-only {
  display: none;
}
body[data-has-role-admin] .has-role-admin-only {
  display: block;
}

.has-role-events_admin-only {
  display: none;
}
body[data-has-role-events_admin] .has-role-events_admin-only {
  display: block;
}

/* Exception classes */
.except-has-role-admin {
  display: block;
}
body[data-has-role-admin] .except-has-role-admin {
  display: none;
}

.except-has-role-shift_coordinator {
  display: block;
}
body[data-has-role-shift_coordinator] .except-has-role-shift_coordinator {
  display: none;
}

.except-has-role-events_admin {
  display: block;
}
body[data-has-role-events_admin] .except-has-role-events_admin {
  display: none;
}

.except-can-manage-assignments {
  display: block;
}
body[data-can-manage-assignments] .except-can-manage-assignments {
  display: none;
}

/* Legacy class for backward compatibility */
.hide-unless-shiftcoordinator {
  display: none;
}
body[data-has-role-shift_coordinator] .hide-unless-shiftcoordinator,
body[data-can-manage-assignments] .hide-unless-shiftcoordinator {
  display: block;
}

/* Line clamp utility for text truncation */
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}