@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 p-2 bg-slate-100 border-slate-300 rounded-md w-full hover:shadow-2xl;

  &.no-backup-needed {
    @apply bg-green-100 border-green-300;
  }
  &.backup-needed {
    @apply bg-amber-100 border-amber-400;
  }
  &.translators-needed {
    @apply bg-red-200 border-red-400;
  }
  &.no-assignees {
    @apply bg-red-300 border-red-800;
  }
}
#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;
}

/* 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 gray;
}
.time.hour-start {
  border-top: 1px solid black;
}
.current-time {
  position: absolute;
  width: 100%;
  z-index: 30;
  border-top: 1.5px solid rgba(255, 0, 0, 0.5);
  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;
}
.stage-header {
  width: 400px;
  min-width: 300px;
  border-left: 1px dashed gray;
}
/* Ensure stage-headers container doesn't shrink - needed for scroll sync */
.stage-headers {
  flex-shrink: 0;
  width: max-content;
}

/* Timeline content */
.times {
  width: 50px;
  min-width: 50px;
  flex-shrink: 0;
  position: sticky;
  left: 0;
}
.stages {
  display: flex;
  flex-direction: row;
  min-width: max-content;
}
.stages .stage {
  width: 400px;
  min-width: 300px;
  padding: 0 8px;
  border-right: 1px dashed gray;
  flex-shrink: 0;
}

/* Landscape phones / small tablets */
@media (max-width: 900px) {
  .stage-header {
    width: 240px;
    min-width: 220px;
    padding: 0 4px;
  }
  .stages .stage {
    width: 240px;
    min-width: 220px;
    padding: 0 4px;
  }
}

/* Mobile responsive stage columns */
@media (max-width: 640px) {
  .stage-header {
    width: 280px;
    min-width: 250px;
    padding: 0 4px;
  }
  .stages .stage {
    width: 280px;
    min-width: 250px;
    padding: 0 4px;
  }

  /* Make session cards more compact on mobile */
  .session {
    padding: 0.5rem !important;
    font-size: 0.875rem;
  }

  .session h4 {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
  }

  .session .session-time,
  .session .session-location {
    font-size: 0.75rem;
  }

  /* Ensure action buttons are visible and properly sized */
  .session ul.menubuttons {
    position: relative !important;
    top: auto !important;
    justify-content: flex-end;
  }

  .session ul.menubuttons li {
    margin: 0 0.25rem 0 0;
  }
}

@media (max-width: 480px) {
  .stage-header {
    width: 240px;
    min-width: 220px;
    padding: 0 2px;
  }
  .stages .stage {
    width: 240px;
    min-width: 220px;
    padding: 0 2px;
  }

  /* Further compress session cards on very small screens */
  .session {
    padding: 0.375rem !important;
    font-size: 0.8125rem;
  }

  .session h4 {
    font-size: 0.8125rem;
    line-height: 1.2;
  }

  .session .session-time,
  .session .session-location {
    font-size: 0.6875rem;
  }

  /* Make speaker names smaller on very small screens */
  .session ul.flex.flex-wrap li {
    font-size: 0.6875rem;
  }
}

/* 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;
}