@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;
    }
  }
}

/* Payments disclosure in the invoice spine (admin/xero_payments/_payments_menu).
   Lives here, not in admin/invoices/_table_styles, because the user show page and
   the invoices index carry their OWN inline copies of those table styles — a rule
   added there would silently not apply on the two pages that matter most.

   Deliberately quiet: it appears on every invoice that has a payment, so it marks
   its presence rather than competing with the invoice id and Xero pill beside it.
   The tint on [aria-expanded="true"] is what shows which invoice is open, which is
   why the caret can stay tiny. */
@layer components {
  .payments-toggle {
    display: inline-flex;
    align-items: center;
    /* min-height keeps the hit area at 24px (WCAG 2.2 target size) even though
       the glyphs inside are much smaller. */
    min-height: 26px;
    /* Asymmetric, and larger than it looks: the count badge overhangs the icon's
       top-right corner, and this padding is what keeps that overhang inside the
       button's own box. Without it the button's scrollWidth exceeds its
       clientWidth, which is how a stray horizontal scrollbar appears inside the
       table's overflow-x ancestors. */
    padding: 6px 9px 4px 5px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #64748b;
    line-height: 1;
    cursor: pointer;
  }

  .payments-toggle:hover {
    background: #eef1f5;
    color: #1a202c;
  }

  .payments-toggle:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 1px;
  }

  .payments-toggle[aria-expanded="true"] {
    background: #e2e8f0;
    color: #1a202c;
  }

  .payments-toggle-icon {
    position: relative;
    display: inline-flex;
  }

  .payments-toggle-badge {
    position: absolute;
    top: -4px;
    right: -7px;
    min-width: 13px;
    padding: 0 3px;
    border-radius: 999px;
    background: #64748b;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
  }

  .payments-toggle:hover .payments-toggle-badge,
  .payments-toggle[aria-expanded="true"] .payments-toggle-badge {
    background: #334155;
  }
}

/* ---------------------------------------------------------------------------
   Property works timeline (docs/98_WORKS_TIMELINE.md)
   Tokens are read by works_timeline_controller.js via getComputedStyle, so the
   custom properties below are the contract between the stylesheet and the SVG
   it draws. Series and sequential ramp come from the validated data-viz
   palette (colourblind-safe in the adjacent-pair ordering). Light-only, to
   match the rest of the admin chrome.
--------------------------------------------------------------------------- */
.works-timeline {
  --wt-ground: #f4f6f4;
  --wt-surface: #ffffff;
  --wt-surface-2: #eceff0;
  --wt-line: #d7dcdf;
  --wt-line-soft: #e8ecee;
  --wt-ink: #151a1e;
  --wt-ink-2: #4f5860;
  --wt-ink-3: #7c868e;
  --wt-capital: #eb6834;
  --wt-other: #9aa3aa;
  --wt-run: #151a1e;
  --wt-hmrc: #c62828;
  --wt-hmrc-fill: rgba(198, 40, 40, 0.10);
  --wt-warn: #b45309;
  --wt-s1: #2a78d6; --wt-s2: #eb6834; --wt-s3: #1baf7a; --wt-s4: #eda100;
  --wt-s5: #e87ba4; --wt-s6: #008300; --wt-s7: #4a3aa7; --wt-s8: #e34948;
  --wt-seq1: #cde2fb; --wt-seq2: #9ec5f4; --wt-seq3: #6da7ec; --wt-seq4: #3987e5;
  --wt-seq5: #256abf; --wt-seq6: #184f95; --wt-seq7: #0d366b;
  color: var(--wt-ink);
}
.works-timeline .wt-header { margin-bottom: 4px; }
.works-timeline .wt-eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--wt-ink-3); font-weight: 600; }
.works-timeline .wt-h1 { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.12; font-weight: 700; letter-spacing: -0.01em; margin: 4px 0 8px; text-wrap: balance; }
.works-timeline .wt-h2 { font-size: 20px; line-height: 1.2; font-weight: 700; margin: 0 0 4px; }
.works-timeline .wt-h3 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.works-timeline .wt-lede { max-width: 68ch; color: var(--wt-ink-2); margin: 0 0 8px; }
.works-timeline .wt-meta, .works-timeline .wt-small { font-size: 13px; color: var(--wt-ink-3); max-width: 80ch; }
.works-timeline .wt-small { color: var(--wt-ink-2); }
.works-timeline .wt-mono, .works-timeline .wt-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.works-timeline .wt-section { margin-top: 28px; }
.works-timeline .wt-panel { background: var(--wt-surface); border: 1px solid var(--wt-line-soft); border-radius: 6px; padding: 16px; }
.works-timeline .wt-scroll { overflow-x: auto; padding-bottom: 6px; }
.works-timeline .wt-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 4px; }
.works-timeline .wt-chip { border: 1px solid var(--wt-line); background: var(--wt-surface); color: var(--wt-ink-2); border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-block; }
.works-timeline .wt-chip:hover { border-color: var(--wt-ink-3); }
.works-timeline .wt-chip[aria-pressed="true"] { background: var(--wt-ink); color: var(--wt-ground); border-color: var(--wt-ink); }
.works-timeline .wt-chip-hm[aria-pressed="true"] { background: var(--wt-hmrc); border-color: var(--wt-hmrc); color: #fff; }
.works-timeline .wt-chip:focus-visible { outline: 2px solid var(--wt-s1); outline-offset: 2px; }
.works-timeline .wt-range { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--wt-ink-2); }
.works-timeline .wt-input { border: 1px solid var(--wt-line); border-radius: 4px; padding: 4px 8px; font-size: 13px; background: var(--wt-surface); color: var(--wt-ink); }
.works-timeline .wt-hmrc-note { font-size: 13px; color: var(--wt-ink-2); margin: 6px 0 0; max-width: 78ch; }
.works-timeline .wt-hmrc-note b { color: var(--wt-hmrc); }
.works-timeline .wt-status { font-size: 13px; color: var(--wt-warn); margin: 8px 0; }
.works-timeline .wt-legend { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; font-size: 13px; color: var(--wt-ink-2); margin-top: 10px; }
.works-timeline .wt-sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -2px; margin-right: 6px; }
.works-timeline .wt-ln { display: inline-block; width: 18px; height: 2px; vertical-align: 3px; margin-right: 6px; }
.works-timeline .wt-ramp { display: inline-flex; gap: 1px; vertical-align: -2px; margin: 0 6px; }
.works-timeline .wt-ramp i { width: 12px; height: 12px; display: block; }
.works-timeline .wt-cell { cursor: pointer; }
.works-timeline .wt-cell:hover { stroke: var(--wt-ink-3); stroke-width: 1.5px; }
.works-timeline .wt-hit { fill: transparent; }
.works-timeline svg text { font-family: inherit; fill: var(--wt-ink-2); }
.works-timeline .wt-tip { position: fixed; z-index: 60; pointer-events: none; background: var(--wt-ink); color: #f4f6f4; padding: 9px 11px; border-radius: 6px; font-size: 13px; line-height: 1.4; max-width: 280px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.works-timeline .wt-tip .row { display: flex; justify-content: space-between; gap: 16px; }
.works-timeline .wt-tip .dim { opacity: .7; }
.works-timeline .wt-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.works-timeline .wt-table th, .works-timeline .wt-table td { padding: 7px 10px; border-bottom: 1px solid var(--wt-line-soft); text-align: left; vertical-align: top; white-space: nowrap; }
.works-timeline .wt-table th { font-weight: 600; color: var(--wt-ink-2); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.works-timeline .wt-table td.num, .works-timeline .wt-table th.num { text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.works-timeline .wt-table tr.wt-org-hd td { background: var(--wt-surface-2); font-weight: 600; color: var(--wt-ink-2); text-transform: none; letter-spacing: 0; }
.works-timeline .wt-pill { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--wt-surface-2); color: var(--wt-ink-2); margin-left: 6px; vertical-align: 1px; }
.works-timeline .wt-bar { display: inline-block; height: 8px; border-radius: 2px; background: var(--wt-s1); vertical-align: 0; }
.works-timeline .wt-bar i { display: block; height: 100%; background: var(--wt-capital); border-radius: 2px 0 0 2px; }
@media (max-width: 640px) {
  .works-timeline .wt-table th, .works-timeline .wt-table td { padding: 6px 7px; }
  .works-timeline .wt-panel { padding: 12px; }
}