@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: rgba(0, 128, 0, 0.5);
    color: white;
    overflow: hidden;
    white-space: nowrap;
  }
  .gantt-fixed.need-ending-at {
    background-color: rgba(255, 140, 0, 0.6);
  }
  .gantt-faded {
    background: linear-gradient(to right, rgba(0, 128, 0, 0.5), rgba(0, 128, 0, 0));
  }
  .gantt-row.due .gantt-faded {
    background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0));
  }
  .gantt-new-needed {
    background-image: repeating-linear-gradient(-45deg, rgba(255, 0, 0, 0.7), rgba(255, 0, 0, 0.7) 5px, white 5px, white 10px);
    border: 1px solid rgba(180, 0, 0, 0.7);
  }
  .gantt-row.due .gantt-fixed {
    background-color: rgba(255, 0, 0, 0.5);
  }
  .gantt-row.due .gantt-fixed.need-ending-at {
    background-color: rgba(255, 140, 0, 0.6);
  }
  .gantt-row.overlap .gantt-fixed,
  .gantt-row.overlap .gantt-faded {
    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;
  }

  /* ----------------------------------------------------------------------
     Xero bill split-pane responsive line grids.

     Three regimes:
       < lg  : single column (stacked card). Each field full width, text
               wraps on whitespace, no horizontal scroll at ~390px or
               ~700px. Per-field mini-labels (.lg:hidden) are shown.
       lg+   : a single horizontal row matching Xero's grid. The header
               strip + every line row share the SAME column template so
               the left and right panes line up across the split view.

     Right pane (editable + read-only + header strip):
       Description · Qty · Unit · Account · Tax · Tracking · Amount
     The left pane keeps a real <table> at lg+ (block stacked cards at
     < lg) — its column widths line up roughly with this template.

     This is a component class (not inline arbitrary values) because
     Tailwind cannot scan responsive classes out of HAML dot-chains —
     and a shared class keeps the editable / read-only / header partials
     in lockstep.
  ---------------------------------------------------------------------- */
  /* The Xero split-view right pane. At lg+ it is only ~half the viewport,
     so a viewport @media query is the WRONG axis to switch the line grid
     to its wide single-row layout: a 1470-logical display gives a ~700px
     half-pane, too narrow for the 7-col row (it overflowed off the right
     edge). Establish a CSS containment context here so .xero-line-grid can
     respond to the PANE's own width via @container instead. */
  .xero-pane {
    container-type: inline-size;
    container-name: xeropane;
  }

  .xero-line-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  /* Switch to the single Xero-style row ONLY when the pane itself is wide
     enough (≥820px) for all 6 columns. On Steve's 1470 display the pane is
     ~700px → stays stacked (tidy, zero overflow). On a true wide display
     where the half-pane ≥820px → single row. (Per-line Amount removed —
     Qty is always 1 so Amount duplicated Unit; the bottom TOTAL strip is
     the real check now.) */
  @container xeropane (min-width: 820px) {
    .xero-line-grid {
      grid-template-columns:
        minmax(10rem, 2.5fr) /* Description — real floor, widest, absorbs slack */
        3.5rem               /* Qty */
        5rem                 /* Unit £ */
        minmax(9rem, 1.5fr)  /* Account — fits "272/Labour · General Labouring" */
        5rem                 /* Tax */
        minmax(7rem, 1fr);   /* Tracking — fits "26 Glebe Villas" */
      align-items: center;
    }
    /* The header strip must sit in the SAME horizontal box as a line row.
       An editable row is .border (1px) + .p-3 (0.75rem) left and
       .pr-8 (2rem) right (the ✕ lives in that right gutter). A read-only
       row is .border (1px) + .p-3 (0.75rem) both sides (no ✕). Inset the
       header grid by the matching amount so its column labels sit directly
       above the row inputs/values at every wide width. */
    .xero-line-header--editable {
      padding-left: calc(1px + 0.75rem);
      padding-right: calc(1px + 2rem);
    }
    .xero-line-header--readonly {
      padding-left: calc(1px + 0.75rem);
      padding-right: calc(1px + 0.75rem);
    }
  }

  /* Header strip + per-field mini-labels switch on the SAME container query
     (markup uses .xero-line-header / .xero-cq-hide / .xero-cq-only instead
     of the old viewport-based `hidden lg:block` / `lg:hidden` utilities). */
  .xero-line-header {
    display: none;
  }
  .xero-cq-only {
    display: none;
  }
  /* Per-cell layout flip for line rows. < 820px pane: each field is a
     flex(label + control) row. ≥ 820px pane: it collapses into a grid cell
     (display:block, no inline label). These replace the old lg: Tailwind
     utilities, which keyed off viewport width instead of pane width. */
  @container xeropane (min-width: 820px) {
    .xero-cq-block {
      display: block;
    }
    .xero-cq-gap-x-3 {
      column-gap: 0.75rem;
    }
    .xero-cq-items-start {
      align-items: start;
    }
    .xero-cq-text-right {
      text-align: right;
    }
  }

  /* Left pane: stacked cards by default, real <table> when the pane is wide
     (same 820px breakpoint as the right pane so left/right switch together
     and stay column-aligned across the split view). */
  .xero-cq-table {
    display: none;
  }
  @container xeropane (min-width: 820px) {
    .xero-line-header {
      display: block;
    }
    .xero-cq-hide {
      display: none;
    }
    .xero-cq-only {
      display: block;
    }
    .xero-cq-cards {
      display: none;
    }
    .xero-cq-table {
      display: table;
    }
  }
}