@import "flatpickr/dist/flatpickr.min.css";

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

/* Kaminari pagination styling */
@layer components {
  nav.pagination {
    @apply flex items-center justify-center gap-1 py-3;
  }

  nav.pagination span.page.current {
    @apply px-3 py-1.5 text-sm rounded border border-blue-600 bg-blue-600 text-white font-bold shadow-sm;
  }

  nav.pagination span.page a,
  nav.pagination span.prev a,
  nav.pagination span.next a,
  nav.pagination span.first a,
  nav.pagination span.last a {
    @apply px-3 py-1.5 text-sm rounded border border-gray-200 bg-white text-gray-600 hover:bg-gray-100 inline-block;
  }

  nav.pagination span.page,
  nav.pagination span.prev,
  nav.pagination span.next,
  nav.pagination span.first,
  nav.pagination span.last {
    border: none;
  }

  nav.pagination span.gap {
    @apply px-2 py-1.5 text-sm text-gray-400;
  }

  /* Comment body paragraph spacing */
  .comment-body p {
    @apply mb-4;
  }

  .comment-body p:last-child {
    @apply mb-0;
  }

  /* Gantt chart — see docs/08_BUSINESS_LOGIC.md for bar color priority rules */
  .gantt-fixed {
    background-color: green;
    color: white;
    overflow: hidden;
    white-space: nowrap;
  }
  .gantt-fixed.need-ending-at {
    background-color: darkorange;
  }
  .gantt-rolling {
    background-color: green;
    opacity: 0.5;
    color: white;
    overflow: hidden;
    white-space: nowrap;
  }
  .gantt-rolling.no-ending-at {
    opacity: 0.95;
    box-shadow: -25px 0px 40px 0px white inset;
  }
  .gantt-new-needed {
    background-color: red;
    box-shadow: -45px 0px 50px 0px white inset;
    color: white;
    overflow: hidden;
    white-space: nowrap;
  }
  .gantt-row.due .gantt-fixed,
  .gantt-row.due .gantt-rolling {
    background-color: red;
  }
  .gantt-row.due .gantt-fixed.need-ending-at {
    background-color: darkorange;
  }
  .gantt-row.overlap .gantt-fixed,
  .gantt-row.overlap .gantt-rolling {
    animation: overlap-flash 0.8s ease-in-out infinite;
  }
  @keyframes overlap-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
  .gantt-name {
    position: absolute;
    white-space: nowrap;
    background: white;
    opacity: 0.85;
    height: 100%;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: bold;
    left: 15px;
    top: 0;
  }
  .gantt-bar-start {
    float: left;
    padding-left: 10px;
  }
  .gantt-bar-end {
    float: right;
    padding-right: 10px;
  }
  .gantt-bar-tenants {
    float: left;
    margin-left: 20px;
  }
  .gantt-bar-tenants-right {
    float: right;
    margin-right: 20px;
  }
  .gantt-bar-text-right {
    float: right;
    padding-right: 10px;
  }
}