/*
 * Pipeline-specific styling, on top of ltfc-ui.css (the LTFC UI kit, shared by every app: the look, the menu, cards, tables).
 * Uses the kit's colour tokens, so the glass skin carries across. Do not restyle anything the kit already styles; change
 * the kit instead. Everything here is for Pipeline's own parts, mostly prefixed pl-.
 */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.right { text-align: right; }
ul.plain { list-style: none; margin: 0 0 10px; padding: 0; }
ul.plain li { padding: 6px 0; border-bottom: 1px solid var(--border); }
ul.plain li:last-child { border-bottom: 0; }
.col-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.col-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card.collapsible > details > summary, details.card > summary { cursor: pointer; }
details.card > summary h2 { display: inline; }

/* Headline tiles */
.pl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 16px; }

/* The wave table */
.pl-waves tr.later { opacity: .7; }
.pl-waves td, .pl-waves th { white-space: nowrap; }

/* Stage strip */
.pl-stagebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.pl-stagecell { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); }
.pl-stagecell b { font-size: 22px; line-height: 1.1; }
.pl-stagename { font-size: 12px; }

/* Filters */
.pl-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 0 0 16px; }
.pl-filters .field { min-width: 160px; flex: 1 1 160px; max-width: 260px; }
.pl-filters .actions { margin: 0; }

/* The board */
.pl-board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; align-items: start;
  overflow-x: auto; padding-bottom: 8px; margin-bottom: 16px; }
.pl-col { background: var(--surface-2, var(--bg)); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px; min-width: 0; }
.pl-col h2 { font-size: 14px; margin: 0; display: flex; justify-content: space-between; align-items: baseline; }
.pl-count { font-size: 12px; font-weight: 600; color: var(--text-dim); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; }
.pl-col-total { margin: 2px 0 10px; font-size: 13px; color: var(--text-dim); }
.pl-empty { margin: 8px 0; }

.pl-deal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px; margin-bottom: 8px; box-shadow: var(--shadow); }
.pl-deal.overdue { border-left: 3px solid var(--red); }
.pl-deal header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.pl-deal-co { font-weight: 600; overflow-wrap: anywhere; }
.pl-ref { font-size: 11px; color: var(--text-mute); white-space: nowrap; }
.pl-deal-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 6px 0; font-size: 13px; }
.pl-next { margin: 4px 0 8px; font-size: 13px; }
.pl-deal footer { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 12px; }
.pl-deal footer select { font-size: 12px; padding: 2px 4px; max-width: 120px; }

/* Bigger touch targets on the board and in forms, on a phone. (The page frame, menu and phone top bar are the kit's.)
   The button and field sizes are candidates for the kit itself, which has no equivalent yet. */
@media (max-width: 720px) {
  .btn, button.btn, a.btn { min-height: 48px; }
  .pl-deal footer select { min-height: 44px; font-size: 16px; max-width: 150px; }
  .pl-deal .drag-handle { min-width: 44px; min-height: 44px; }
  .field input, .field select, .field textarea, .pl-filters select, .pl-filters input { font-size: 16px; min-height: 46px; }
}

/* Website area: sub-navigation, package page, availability grid, preview */
.pl-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); gap: 18px; align-items: start; }
.pl-cols .col-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pl-cols .col-side { position: sticky; top: 12px; }
del { color: var(--red); } ins { color: var(--green); text-decoration: none; font-weight: 700; }
.pl-av td { vertical-align: top; min-width: 150px; }
.pl-av td:first-child { min-width: 190px; }
.pl-av .cell input { width: 84px; }
.pl-av .cell small { display: block; color: var(--text-mute); font-size: 11.5px; }
.pl-av .bar { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; margin: 6px 0 4px; }
.pl-av .bar i { display: block; height: 100%; background: var(--green); }
.pl-av .bar i.hi { background: var(--amber); }
.pl-av .bar i.full { background: var(--red); }
.pl-pv { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--surface); }
.pl-pv h3 { margin: 4px 0 6px; font-size: 20px; }
.pl-pv-kicker { margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.pl-pv ul { margin: 8px 0; padding-left: 18px; }
.pl-pv-price { font-weight: 700; margin: 10px 0 6px; }
.pl-pv-btn { display: inline-block; margin: 0; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-dim); }
@media (max-width: 900px) { .pl-cols { grid-template-columns: 1fr; } .pl-cols .col-side { position: static; } }

/* Dragging a deal */
.pl-deal header .drag-handle { margin: -2px 2px -2px -4px; touch-action: none; padding: 2px 4px; }
.pl-deal.drag-away { visibility: hidden; height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; }
.pl-deal.drag-ghost { max-height: none; }
.pl-deal.pl-saving { opacity: .6; }
.pl-col.over { outline: 2px dashed var(--orange); outline-offset: -2px; background: color-mix(in srgb, var(--orange) 8%, var(--surface-2, var(--bg))); }
.pl-col .drag-slot { margin: 0 0 8px; }
.pl-zones { display: flex; gap: 12px; margin: 0 0 12px; }
.pl-zone { flex: 1 1 0; display: flex; gap: 8px; align-items: baseline; justify-content: center; padding: 8px 12px;
  border: 2px dashed var(--border); border-radius: var(--radius); color: var(--text-dim); font-size: 13px; }
.pl-zone strong { font-size: 14px; }
.pl-zone.won strong { color: var(--green); }
.pl-zone.lost strong { color: var(--red); }
body.is-dragging .pl-zone.won { border-color: var(--green); }
body.is-dragging .pl-zone.lost { border-color: var(--red); }
.pl-zone.over { background: var(--surface); box-shadow: var(--shadow); color: var(--text); }
.pl-zone.won.over { background: var(--green-bg); }
.pl-zone.lost.over { background: var(--red-bg); }
.pl-dragtip { margin: 0 0 12px; }
.pl-toast { margin-bottom: 12px; }

/* Reports, rights, activity */
.pl-dealrights th:first-child, .pl-dealrights td:first-child { min-width: 170px; }
.pl-dealrights td:not(:first-child), .pl-dealrights th { white-space: nowrap; }
.pl-rights td:first-child, .pl-rights th:first-child { min-width: 170px; }
.pl-group { font-size: 18px; margin: 28px 0 10px; }
.pl-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
tr.pl-total td { font-weight: 700; border-top: 2px solid var(--border); }
.pl-rights td { vertical-align: top; }
.pl-rights td.pl-warn { background: var(--amber-bg); }
.pl-rights td.pl-over { background: var(--red-bg); }
.pl-more { margin: 4px 0 10px; }
.pl-more summary { cursor: pointer; font-size: 13px; color: var(--text-dim); margin: 6px 0 10px; }
.pl-activity textarea { min-height: 70px; }
.pl-edit input, table input:not([type=checkbox]):not([type=hidden]) { max-width: 100%; }
tr.later { opacity: .65; }

/* Detail pages */
.pl-def { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 18px; margin: 0 0 12px; }
.pl-def dt { font-size: 12px; color: var(--text-mute); margin: 0; }
.pl-def dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }

.pl-timeline { list-style: none; margin: 12px 0 0; padding: 0; }
.pl-timeline li { padding: 8px 0; border-top: 1px solid var(--border); }
.pl-timeline li:first-child { border-top: 0; }
.pl-timeline p { margin: 4px 0 0; }

/* Tables with inputs in the cells */
.pl-edit input[type=number], .pl-edit input[type=date] { width: 100%; min-width: 90px; }

/* Bulk move and paging under a long table */
.pl-bulk { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--border); }
.pl-pager { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 12px; border-top: 1px solid var(--border); }

@media (max-width: 1100px) {
  .pl-board { grid-template-columns: repeat(5, 240px); }
}
@media (max-width: 720px) {
  .pl-board { grid-template-columns: 1fr; overflow: visible; }
  .pl-filters .field { max-width: none; }
}

/* Where a package can be sold: Events lounges to tick, grouped by site and group */
.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;margin:6px 0 14px}
.pick label{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line,#d9deea);border-radius:8px;padding:8px 10px;background:var(--card,#fff);cursor:pointer}
.pick label small{display:block;color:var(--muted,#5b6577)}
.pick label.gone{border-color:#e0a23a;background:#fff8ec}
.lg{margin:0 0 6px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#5b6577)}

/* =====================================================================================================
   On the photograph: Pipeline's own headings and controls.

   The kit makes text dark by default and lights only what it knows sits straight on the photograph (the page title, the words
   under it, the footer). Pipeline's own things that sit there too are lit here.
   ===================================================================================================== */
html[data-skin="glass"] .pl-dragtip { color: #dbe4f7; }
html[data-skin="glass"] .pl-group { color: #fff; }
html[data-skin="glass"] main > form label, html[data-skin="glass"] main > .pl-filters label,
html[data-skin="glass"] .pl-jump { color: #fff; }
/* A form that sits straight on the photograph but holds its fields in a card: the card's labels are dark again. */
html[data-skin="glass"] .card label, html[data-skin="glass"] .card .pl-filters label { color: var(--text); }
/* A quiet button in a page header sits on the photograph, so it needs a surface of its own. */
html[data-skin="glass"] .page-head .actions .btn.ghost {
  background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.8); color: var(--text);
}

/* ---------- The dashboard ---------- */
/* The dashboard cards sit on a three-column grid and can be moved: a card keeps its width wherever it goes. */
.pl-dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.pl-dash > .card, .pl-dash > .drag-slot { margin: 0; }
.pl-dash > .span-1 { grid-column: span 1; } .pl-dash > .span-2 { grid-column: span 2; } .pl-dash > .span-3 { grid-column: span 3; }
.pl-dash > .card.drag-away { display: none; }
@media (max-width: 1100px) { .pl-dash { grid-template-columns: minmax(0, 1fr); } .pl-dash > .span-1, .pl-dash > .span-2, .pl-dash > .span-3 { grid-column: auto; } }

.pl-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 14px; font-size: 12px; color: var(--text-dim); }
.pl-key span, .pl-legend li { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.sw.sold { background: #0f1d41; } .sw.pipe { background: #5f7fc7; } .sw.tick { width: 4px; height: 16px; border-radius: 0; background: var(--orange); }

.pl-waves-list { display: flex; flex-direction: column; gap: 16px; }
.pl-wave { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pl-wave.later { opacity: .72; }
.pl-wave-name { flex: 0 0 140px; display: flex; flex-direction: column; gap: 2px; }
.pl-wave-name small { color: var(--text-mute); font-size: 12px; }
/* The bar is the whole capacity of the wave. A clearly darker, outlined track keeps an empty bar visible; the blue of "in open
   deals" is a stronger blue than the donut's pale steps so it reads against the track; the target tick has a white edge. */
.pl-track { position: relative; flex: 1 1 200px; min-width: 0; height: 22px; display: flex; background: #c9d1e3;
  border: 1px solid rgba(15, 29, 65, .3); border-radius: 11px; box-shadow: inset 0 1px 2px rgba(15, 29, 65, .22); }
.pl-track i { display: block; height: 100%; }
.pl-track i.sold { background: #0f1d41; border-radius: 10px 0 0 10px; }
.pl-track i.pipe { background: #5f7fc7; }
.pl-track i.pipe:first-child { border-radius: 10px 0 0 10px; }
.pl-track .tick { position: absolute; top: -7px; bottom: -7px; width: 4px; margin-left: -2px; background: var(--orange);
  box-shadow: 0 0 0 1.5px #fff; border-radius: 1px; }
.pl-wave-nums { flex: 0 0 150px; font-size: 13px; line-height: 1.3; }
.pl-wave-nums strong { font-size: 16px; }
.pl-wave-nums small { display: block; color: var(--text-mute); font-size: 12px; }
.pl-wave .badge { flex: 0 0 auto; min-width: 88px; text-align: center; }

.pl-donut-wrap { display: flex; justify-content: center; margin: 4px 0 16px; }
.pl-donut { position: relative; width: 176px; height: 176px; border-radius: 50%; }
.pl-donut-hole { position: absolute; inset: 34px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.pl-donut-hole b { font-size: 20px; color: var(--navy-800); line-height: 1.1; }
.pl-donut-hole span { font-size: 12px; color: var(--text-dim); }
.pl-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.pl-legend li { display: flex; gap: 10px; }
.pl-legend li span { flex: 1 1 auto; }
.pl-legend li small { color: var(--text-mute); }
.pl-legend li strong { min-width: 64px; text-align: right; }

/* ---------- The board ---------- */
html[data-skin="glass"] .pl-col {
  background: rgba(255,255,255,.70); border: 1px solid rgba(255,255,255,.6); border-radius: 16px; padding: 12px;
  box-shadow: 0 10px 32px rgba(6,14,40,.26); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html[data-skin="glass"] .pl-col h2 { justify-content: flex-start; gap: 8px; align-items: center; color: var(--navy-800); }
html[data-skin="glass"] .pl-col h2::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--stage-c, #c9cfdf); flex: none; }
html[data-skin="glass"] .pl-col .pl-count { margin-left: auto; background: #fff; }
html[data-skin="glass"] .pl-col[data-stage="lead"] { --stage-c: #c9cfdf; }
html[data-skin="glass"] .pl-col[data-stage="contacted"] { --stage-c: #98a3c1; }
html[data-skin="glass"] .pl-col[data-stage="meeting"] { --stage-c: #66749f; }
html[data-skin="glass"] .pl-col[data-stage="proposal"] { --stage-c: #3a4a7a; }
html[data-skin="glass"] .pl-col[data-stage="negotiation"] { --stage-c: #0f1d41; }
html[data-skin="glass"] .pl-deal {
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.88)); border: 1px solid rgba(255,255,255,.85);
  border-radius: 12px; box-shadow: 0 6px 18px rgba(6,14,40,.18), inset 0 1px 0 rgba(255,255,255,.95);
}
html[data-skin="glass"] .pl-deal.overdue { border-left: 4px solid var(--red); }
html[data-skin="glass"] .pl-col.over { outline-color: var(--orange); background: rgba(255,255,255,.9); }
html[data-skin="glass"] .pl-zone { border-radius: 16px; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.55); color: #fff; }
html[data-skin="glass"] .pl-zone.won { background: var(--green-bg); border-color: var(--green); color: var(--green); }
html[data-skin="glass"] .pl-zone.lost { background: var(--red-bg); border-color: var(--red); color: var(--red); }
html[data-skin="glass"] .pl-zone.won strong, html[data-skin="glass"] .pl-zone.lost strong { color: inherit; }
html[data-skin="glass"] .pl-zone.over { box-shadow: 0 6px 20px rgba(6,14,40,.3); }

/* ---------- Your account ---------- */
.skin-pick { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
.skin-pick label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.skin-pick small { display: block; color: var(--text-dim); }

/* ---------- Glossy look: fixes found by looking at the real pages ---------- */
.pl-wave-name { flex: 0 0 170px; }
.pl-wave-name .badge { align-self: flex-start; margin: 2px 0; }
.pl-wave > .badge { flex: 0 0 auto; min-width: 96px; text-align: center; }
.pl-legend { align-items: stretch; width: 100%; }
.pl-legend li { width: 100%; justify-content: flex-start; }

/* Deal cards: the reference goes on its own line, so a company name can use the whole card width. */
html[data-skin="glass"] .pl-deal header { flex-wrap: wrap; align-items: flex-start; }
html[data-skin="glass"] .pl-deal-co { flex: 1 1 120px; min-width: 0; overflow-wrap: break-word; word-break: normal; }
html[data-skin="glass"] .pl-ref { flex: 0 0 100%; order: 3; margin-top: -2px; }
@media (min-width: 901px) {
  html[data-skin="glass"] body:not(.plain) .pl-board { grid-template-columns: repeat(5, minmax(190px, 1fr)); }
}
@media (min-width: 901px) and (max-width: 1250px) {
  html[data-skin="glass"] body:not(.plain) .pl-board { grid-template-columns: repeat(5, 210px); }
}

/* Wave rows on a grid, so the bars, numbers and status line up down the card. */
.pl-wave { display: grid; grid-template-columns: 170px minmax(120px, 1fr) 150px 132px; gap: 8px 16px; align-items: center; }
.pl-wave-name, .pl-track, .pl-wave-nums, .pl-wave > .badge { flex: none; min-width: 0; }
.pl-wave > .badge { min-width: 0; width: 100%; }
@media (max-width: 760px) {
  .pl-wave { grid-template-columns: minmax(0, 1fr) auto; }
  .pl-wave .pl-track { grid-column: 1 / -1; order: 3; }
  .pl-wave .pl-wave-nums { grid-column: 1 / -1; order: 4; }
  .pl-wave > .badge { width: auto; min-width: 96px; }
}
@media (min-width: 901px) and (max-width: 1100px) { .pl-wave { grid-template-columns: 150px minmax(100px, 1fr) 130px 120px; } }

/* Links in the wave names on the dashboard. */
.pl-wave-name strong a { color: var(--navy-800); }
.pl-wave-name strong a:hover { color: var(--blue); }

/* ---------- Small rules carried over from the old shared stylesheet, which the kit replaced ---------- */
.mt { margin-top: 12px; }
.hint.mt { margin-top: 14px; }
.msg-body {
  background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; margin: 6px 0 0;
  font-family: inherit; max-height: 320px; overflow: auto;
}

/* Sign-in page: the password form that sits under the kit's main button (the kit draws the rest). */
.signin-card .signin-form { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.signin-card .or-rule { width: 100%; display: flex; align-items: center; gap: 12px; color: #4a556c; font-size: 13px; }
.signin-card .or-rule::before, .signin-card .or-rule::after { content: ""; flex: 1; border-top: 1px solid #d5dbe8; }
.signin-card .flash.warn { text-align: left; width: 100%; }