/* ============================================================================
   Chamanke Workspace — Roadmap module
   ----------------------------------------------------------------------------
   A month-column timeline in the spirit of an ASML product roadmap: a banded
   header, context rows, and grouped lanes carrying labelled bars. Chamanke
   styling — navy board, red accents — driven entirely by the theme tokens so it
   works in light AND dark. Logical properties throughout, so it also flips
   correctly in Arabic/RTL.

   Everything is scoped under .rd-* / #view-roadmap, so nothing leaks into
   another module.
   ============================================================================ */

#view-roadmap { --rd-label-w: 210px; }

/* ---- header + toolbar ---------------------------------------------------- */
.rd-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.rd-title { font-size: 1.35rem; font-weight: 800; color: var(--text-primary); margin: 0; letter-spacing: -0.01em; }
.rd-sub { font-size: 0.84rem; color: var(--text-tertiary); margin-top: 2px; }

#rdToolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rd-tb-left, .rd-tb-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rd-range { font-weight: 700; color: var(--text-primary); font-size: 0.95rem; min-width: 190px; text-align: center; }
.rd-nav-btn, .rd-today-btn, .rd-btn {
  min-height: 36px; padding: 0 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border-primary); background: var(--bg-card);
  color: var(--text-primary); font-weight: 700; cursor: pointer; font-size: 0.86rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.rd-nav-btn { min-width: 36px; font-size: 1.25rem; line-height: 1; padding: 0 10px; }
.rd-nav-btn:hover, .rd-today-btn:hover, .rd-btn:hover { background: var(--bg-card-hover); border-color: var(--accent); }
.rd-select {
  min-height: 36px; padding: 0 10px; border-radius: var(--radius-md);
  border: 1px solid var(--border-input); background: var(--bg-input); color: var(--text-primary); font-weight: 600;
}

/* ---- the board ----------------------------------------------------------- */
.rd-board {
  position: relative; border: 1px solid var(--border-primary); border-radius: var(--radius-lg);
  background: var(--bg-card); box-shadow: var(--shadow-card); overflow: hidden;
}
.rd-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border-primary); min-height: 46px; }
.rd-row:last-child { border-bottom: none; }
.rd-label {
  flex: 0 0 var(--rd-label-w); width: var(--rd-label-w);
  padding: 8px 12px; display: flex; flex-direction: column; justify-content: center;
  border-inline-end: 1px solid var(--border-primary); background: var(--bg-input);
  font-size: 0.85rem; color: var(--text-primary); overflow: hidden;
}
.rd-track { position: relative; flex: 1 1 auto; min-width: 0; }

/* month header */
.rd-head { background: linear-gradient(180deg, #1e3a8a 0%, #172f6e 100%); border-bottom: 2px solid var(--border-primary); }
.rd-head .rd-corner {
  background: transparent; color: #dbeafe; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 0.7rem; border-inline-end-color: rgba(255,255,255,0.18);
}
.rd-head .rd-track { display: flex; }
.rd-mcell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-inline-end: 1px solid rgba(255,255,255,0.16); color: #fff; padding: 6px 2px;
}
.rd-mcell:last-child { border-inline-end: none; }
.rd-mname { font-weight: 800; font-size: 0.86rem; line-height: 1.1; }
.rd-myear { font-size: 0.66rem; opacity: 0.72; }
.rd-mcell.is-now { background: rgba(229,33,33,0.34); }

/* faint month gridlines inside every track */
.rd-gridline { position: absolute; inset-block: 0; width: 1px; background: var(--border-primary); opacity: 0.55; }

/* ---- context bands ------------------------------------------------------- */
.rd-band-row { min-height: 38px; background: var(--bg-secondary); }
.rd-band-label { font-weight: 700; font-size: 0.78rem; color: var(--text-secondary); background: var(--bg-secondary); }
.rd-band-label[onclick] { cursor: pointer; }
.rd-band-label[onclick]:hover { color: var(--accent); }
.rd-seg {
  position: absolute; inset-block: 6px; border-radius: 4px; color: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 0.74rem; font-weight: 700; padding: 0 8px; white-space: nowrap;
}
.rd-seg.is-editable { cursor: pointer; }
.rd-seg.is-editable:hover { filter: brightness(1.12); }

/* ---- group heading ------------------------------------------------------- */
.rd-group-row {
  display: flex; align-items: center; padding: 7px 12px;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  border-bottom: 1px solid var(--border-primary);
}
.rd-group-name {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-secondary);
}

/* ---- project lanes ------------------------------------------------------- */
/* A lane is two stacked strips: the BAR band on top, and a MILESTONE RAIL under
   it. Keeping them apart is what makes the lane readable — with diamonds drawn
   over the bars they covered the phase labels and their captions had to fight
   the bar colour for contrast. */
.rd-lane { min-height: 84px; }
.rd-lane .rd-track { --rd-bar-top: 10px; --rd-bar-h: 34px; }
.rd-lane:hover .rd-lane-tools { opacity: 1; }
.rd-lane-label { border-inline-start: 4px solid var(--rd-accent, var(--accent)); }
.rd-lane-name { font-weight: 700; color: var(--text-primary); line-height: 1.25; }
.rd-lane-name[onclick] { cursor: pointer; }
.rd-lane-name[onclick]:hover { color: var(--accent); text-decoration: underline; }
.rd-lane-sub { font-size: 0.74rem; color: var(--text-tertiary); margin-top: 2px; }

/* ---- a phase bar: a CHEVRON, like the ASML roadmap ------------------------
   The pointed right end reads as "this progresses onward"; a bar that starts
   before the window also gets a notched left end so it reads as "continuing
   from earlier". Shape comes from clip-path, which also clips away any border
   and box-shadow — so definition is added with a drop-shadow FILTER instead
   (it follows the clipped silhouette). --rd-arrow is the point depth.        */
.rd-bar {
  --rd-arrow: 14px;
  position: absolute; inset-block-start: var(--rd-bar-top, 8px); height: var(--rd-bar-h, 34px);
  background: var(--rd-bar, #1e3a8a);
  color: #fff; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  /* text must clear BOTH chevrons */
  padding-inline: calc(var(--rd-arrow) + 6px) calc(var(--rd-arrow) + 8px);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.28));
  /* Notched start + pointed end, so consecutive phases interlock like the
     reference roadmap's ribbons rather than reading as detached blocks. */
  clip-path: polygon(
    0 0,
    calc(100% - var(--rd-arrow)) 0,
    100% 50%,
    calc(100% - var(--rd-arrow)) 100%,
    0 100%,
    var(--rd-arrow) 50%);
}
/* A short phase would be swallowed by a full-size point — shrink the chevron and
   hold a minimum width, so a few-day task still reads as a marker instead of a
   degenerate sliver. (Exact dates stay available on hover and in the edit form.) */
.rd-bar.is-narrow { --rd-arrow: 7px; padding-inline: 6px 10px; min-width: 26px; }
.rd-bar.is-editable { cursor: pointer; }
.rd-bar.is-editable:hover { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.4)) brightness(1.1); }

/* The phase label lives in its own layer, sharing the bar's geometry, padding and
   chevron so text still can't spill past the shape — but painted ABOVE the
   milestone wedges (z-index 7 > 6) so a wedge never lands mid-word. It can't
   simply be a child with a higher z-index: clip-path makes the bar a stacking
   context, which traps its children beneath the wedges.
   pointer-events:none keeps the click on the bar underneath. */
.rd-bar-text {
  --rd-arrow: 14px;
  position: absolute; inset-block-start: var(--rd-bar-top, 8px); height: var(--rd-bar-h, 34px);
  z-index: 7; pointer-events: none; color: #fff; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding-inline: calc(var(--rd-arrow) + 6px) calc(var(--rd-arrow) + 8px);
  clip-path: polygon(
    0 0,
    calc(100% - var(--rd-arrow)) 0,
    100% 50%,
    calc(100% - var(--rd-arrow)) 100%,
    0 100%,
    var(--rd-arrow) 50%);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);    /* holds up where it crosses a wedge */
}
.rd-bar-text.is-narrow { --rd-arrow: 7px; padding-inline: 6px 10px; min-width: 26px; }
.rd-bar-label { font-size: 0.8rem; font-weight: 700; line-height: 1.18; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-bar-sub { font-size: 0.68rem; opacity: 0.9; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- a milestone -----------------------------------------------------------
   Sits ON TOP of the bars, so it needs to read against a dark bar AND against
   the empty track. A filled diamond with a light ring gives it an edge on any
   background; the caption sits in its own chip rather than as bare text (which
   was unreadable where it crossed a bar).                                    */
.rd-ms {
  --rd-ms-arrow: 8px;
  --rd-ms-color: #f59e0b;                     /* amber — reads against navy/red/cyan bars */
  position: absolute;
  inset-block-start: calc(var(--rd-bar-top, 10px) + 4px);      /* sit INSIDE the bar band */
  height: calc(var(--rd-bar-h, 34px) - 8px);
  width: 18px;
  transform: translateX(-50%); z-index: 6; line-height: 0;
}
.rd-ms.is-editable { cursor: pointer; }
/* The marker itself is a WEDGE driven into the phase — same chevron geometry as
   the bar, in a contrasting colour. The 4px inset above/below leaves a sliver of
   bar colour around it, which is what separates the two without needing a border
   (clip-path would clip a border away anyway). */
.rd-ms-dot {
  display: block; width: 100%; height: 100%;
  background: var(--rd-ms-color);
  clip-path: polygon(
    0 0,
    calc(100% - var(--rd-ms-arrow)) 0,
    100% 50%,
    calc(100% - var(--rd-ms-arrow)) 100%,
    0 100%,
    var(--rd-ms-arrow) 50%);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
  transition: transform 0.12s ease;
}
.rd-ms.is-done { --rd-ms-color: #22c55e; }    /* reached */
.rd-ms.is-editable:hover .rd-ms-dot { transform: scaleX(1.18); }
/* The caption hangs BELOW the diamond and is taken out of flow, so the marker
   itself stays exactly on the bar's centre line (stacking them would push the
   diamond upward by half the caption's height). */
/* Caption drops into the rail under the bar band. When a lane stacks several
   sub-rows the rail moves down with them, so the offset is passed in per lane
   (--rd-ms-label-top) — otherwise the caption would land on the second row's bar. */
.rd-ms-label {
  position: absolute; inset-block-start: var(--rd-ms-label-top, calc(100% + 6px)); inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 1px 6px; line-height: 1.45;
  font-size: 0.65rem; font-weight: 700; color: var(--text-primary);
  background: var(--bg-card); border: 1px solid var(--border-primary);
  border-radius: var(--radius-pill); box-shadow: 0 1px 3px rgba(0,0,0,0.22);
  white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis;
}

/* inline add buttons, revealed on lane hover */
.rd-lane-tools { position: absolute; inset-inline-end: 6px; inset-block-start: 6px; display: flex; gap: 5px; opacity: 0; transition: opacity 0.15s ease; z-index: 4; }
.rd-add-inline {
  border: 1px dashed var(--border-primary); background: var(--bg-card); color: var(--text-secondary);
  border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 700; padding: 3px 9px; cursor: pointer;
  min-height: 26px;
}
.rd-add-inline:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }
.rd-band-row .rd-add-inline { position: absolute; inset-inline-end: 6px; inset-block-start: 5px; opacity: 0.75; }
.rd-band-row:hover .rd-add-inline { opacity: 1; }

/* today marker across the whole board */
.rd-today-line { position: absolute; inset-block: 0; width: 2px; background: var(--accent); opacity: 0.75; z-index: 5; pointer-events: none; }
.rd-today-line span {
  position: absolute; inset-block-start: 0; inset-inline-start: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: 0.6rem; font-weight: 800;
  padding: 1px 6px; border-radius: 0 0 4px 4px; text-transform: uppercase; letter-spacing: 0.05em;
}

/* ---- legend + notes ------------------------------------------------------ */
#rdLegend { margin-top: 14px; }
.rd-legend-keys { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.rd-key { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--text-secondary); font-weight: 600; }
.rd-key i { width: 16px; height: 11px; border-radius: 3px; display: inline-block; }
/* legend swatch must match the real marker (a wedge, not a diamond) */
.rd-key i.rd-key-ms {
  width: 15px; height: 13px; background: #f59e0b; border-radius: 0;
  clip-path: polygon(0 0, 7px 0, 100% 50%, 7px 100%, 0 100%, 7px 50%);
}
.rd-notes { margin-top: 10px; display: grid; gap: 3px; }
.rd-note { font-size: 0.78rem; color: var(--text-tertiary); }
.rd-footer-note { margin-top: 10px; font-size: 0.76rem; color: var(--text-tertiary); font-style: italic; }

/* ---- empty state --------------------------------------------------------- */
.rd-empty { padding: 46px 20px; text-align: center; }
.rd-empty-icon { font-size: 2.4rem; margin-bottom: 8px; }
.rd-empty-title { font-weight: 800; color: var(--text-primary); margin-bottom: 5px; }
.rd-empty-sub { font-size: 0.85rem; color: var(--text-tertiary); margin-bottom: 16px; }

/* ---- form layout ---------------------------------------------------------
   The app has NO global styling for `.form-row` or for a bare <input> inside a
   modal — each modal scopes its own (see #ctrClientModalOverlay in styles2.css,
   and .fin-form-section for Finance). Without this block the roadmap forms fall
   back to raw browser defaults: labels and fields run together on one line and
   the inputs are unstyled. Scoped to #rdFormOverlay so nothing else is touched.
   -------------------------------------------------------------------------- */
#rdFormOverlay .modal-body .form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;
}
#rdFormOverlay .modal-body .form-row.full { grid-template-columns: 1fr; }
#rdFormOverlay .modal-body label {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  font-size: 0.82rem; font-weight: 600; color: var(--text-secondary);
}
#rdFormOverlay .modal-body input,
#rdFormOverlay .modal-body select,
#rdFormOverlay .modal-body textarea {
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  font-size: 0.9rem; font-family: inherit; color: var(--text-primary); background: var(--bg-input);
}
#rdFormOverlay .modal-body input:focus,
#rdFormOverlay .modal-body select:focus,
#rdFormOverlay .modal-body textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
#rdFormOverlay .modal-body textarea { resize: vertical; min-height: 62px; line-height: 1.45; }
/* a colour swatch shouldn't stretch to full width like a text field */
#rdFormOverlay .modal-body input[type="color"] {
  width: 62px; height: 38px; padding: 3px; cursor: pointer; flex: 0 0 auto;
}
/* the "Reached" checkbox reads as one line, not a stacked label */
#rdFormOverlay .modal-body label.rd-check { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }
#rdFormOverlay .modal-body label.rd-check input { width: auto; }
/* the quick +/- month buttons keep their own compact sizing */
#rdFormOverlay .modal-body .rd-quick button { width: auto; }
#rdFormOverlay .modal-body p.rd-hint { margin: 2px 0 0; }
@media (max-width: 768px) {
  #rdFormOverlay .modal-body .form-row { grid-template-columns: 1fr; }
}

/* ---- form bits ----------------------------------------------------------- */
.rd-hint { font-weight: 400; font-size: 0.74rem; color: var(--text-tertiary); }
.rd-quick { display: flex; gap: 5px; flex-wrap: wrap; }
.rd-quick button {
  border: 1px solid var(--border-primary); background: var(--bg-input); color: var(--text-secondary);
  border-radius: var(--radius-md); font-size: 0.74rem; font-weight: 700; padding: 5px 8px; cursor: pointer; min-height: 32px;
}
.rd-quick button:hover { border-color: var(--accent); color: var(--accent); }
.rd-check { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.rd-check input { width: auto; }

/* live preview of the dates a repeat rule will create — shown before saving so a
   series is never a surprise */
.rd-preview {
  margin-top: 4px; padding: 9px 11px;
  background: var(--bg-input); border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
}
.rd-preview:empty { display: none; }
.rd-prev-head { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.rd-prev-list { display: flex; flex-wrap: wrap; gap: 5px; }
.rd-prev-chip {
  font-size: 0.7rem; font-weight: 600; color: var(--text-secondary);
  background: var(--bg-card); border: 1px solid var(--border-primary);
  border-radius: var(--radius-pill); padding: 2px 8px; white-space: nowrap;
}
.rd-prev-more { font-size: 0.7rem; font-weight: 700; color: var(--text-tertiary); align-self: center; }

/* ---- phone --------------------------------------------------------------- */
@media (max-width: 768px) {
  #view-roadmap { --rd-label-w: 124px; }
  .rd-board { overflow-x: auto; }
  .rd-label { padding: 6px 8px; font-size: 0.78rem; }
  .rd-bar-sub, .rd-ms-label { display: none; }
  .rd-range { min-width: 0; font-size: 0.85rem; }
  .rd-lane-tools { opacity: 1; }
}

/* ============================================================================
   INCOMING PAYMENTS — the auto-generated companion board (read-only).
   Reuses the roadmap's board/lane/bar classes so the two read as one system;
   only the heading, the monthly-totals row and the teal accent are new.
   ========================================================================= */
.rd-cash-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin: 26px 0 10px;
  padding-top: 18px; border-top: 1px solid var(--border-primary);
}
.rd-cash-title { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); margin: 0 0 2px; }
.rd-cash-total { text-align: end; }
.rd-cash-total span { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); }
.rd-cash-total strong { font-size: 1.15rem; font-weight: 800; color: var(--success); font-variant-numeric: tabular-nums; }

/* the "expected in month" summary strip under the header */
.rd-cash-totals { min-height: 34px; background: var(--bg-input); }
.rd-cash-totals .rd-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); }
.rd-cash-mrow { position: absolute; inset: 0; display: flex; }
.rd-cash-mcell {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800; color: var(--text-primary);
  font-variant-numeric: tabular-nums; border-inline-end: 1px solid var(--border-primary);
}
.rd-cash-mcell:last-child { border-inline-end: none; }
.rd-cash-legend { margin-top: 12px; }
/* payment lanes are shorter — they carry no milestone rail */
#rdCash .rd-lane { min-height: 56px; }
#rdCash .rd-lane .rd-track { --rd-bar-top: 9px; --rd-bar-h: 32px; }
#rdCash .rd-bar { cursor: default; }

/* Text tiers: a bar too narrow to hold its label just renders noise across the
   chevron, so drop the detail line first and then the label itself. The full
   text stays available in the bar's tooltip either way. */
.rd-bar-text.is-narrow .rd-bar-sub { display: none; }
.rd-bar-text.is-tiny { --rd-arrow: 6px; padding-inline: 4px; }
.rd-bar-text.is-tiny .rd-bar-label,
.rd-bar-text.is-tiny .rd-bar-sub { display: none; }
.rd-bar.is-tiny { --rd-arrow: 6px; min-width: 20px; }
/* lanes size themselves from the number of stacked sub-rows (inline min-height) */
#rdCash .rd-lane { min-height: 0; }

/* ---- payment markers (Incoming Payments lanes) -----------------------------
   One marker per invoice, pinned to the day the money is due. A payment is a
   moment rather than a span, so this uses the module's milestone language (a
   coloured wedge) with the amount beside it, instead of a bar. The wedge — not
   the pill — is what sits on the date: the element is nudged back by half the
   wedge so the chip can flow to its right without shifting the anchor. */
.rd-pay {
  position: absolute; inset-block-start: var(--rd-pay-top, 9px);
  transform: translateX(-8px);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; z-index: 4; line-height: 1;
}
.rd-pay-dot {
  flex: 0 0 auto; width: 16px; height: 16px;
  background: var(--rd-pay-color, #1e3a8a);
  clip-path: polygon(0 0, 8px 0, 100% 50%, 8px 100%, 0 100%, 8px 50%);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.rd-pay-amt {
  font-size: 0.72rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--text-primary); background: var(--bg-card);
  border: 1px solid var(--border-primary); border-inline-start: 3px solid var(--rd-pay-color, #1e3a8a);
  border-radius: var(--radius-pill); padding: 2px 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.14);
}
.rd-pay-lane .rd-track { overflow: visible; }