/* Base styles for FastAction CRM */
* {
  box-sizing: border-box;
}

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', 'Lato', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Smooth theme transitions on key layout elements */
.theme-transition,
.theme-transition * {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease;
}

/* Pipeline Card Animations - lightweight, GPU-composited only */
@keyframes cardFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Only animate first few cards per column, rest appear instantly */
.pipeline-card-enter {
  animation: none; /* Default: no animation for performance */
}
.pipeline-card-animate {
  animation: cardFadeIn 0.15s ease-out forwards;
}

/* Column count animation - lightweight */
.count-animate {
  /* Removed pulse animation - causes layout recalculation */
}

/* ========== A4 Paged Editor - Multi-page visual breaks ========== */

.editor-page {
  width: 794px;
  min-height: 1123px;
  padding: 96px 72px;
  margin: 20px auto;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: relative;
  /* NO overflow:hidden — page grows with content */
  /* NO max-height — let it extend */
}

/* Multi-page TipTap editor — stacked A4 page cards like Google Docs / Word Online.
   White page card backgrounds are absolutely positioned behind the content.
   Grey gaps between cards are visible through the transparent wrapper background.
   Content flows continuously in a single ProseMirror contenteditable. */
.a4-paged-editor {
  position: relative;
  /* Transparent so the parent grey bg (#ebebeb) shows through the gaps */
  background: transparent;
}

/* Content layer: white background ensures text is always visible.
   Grey gap bars (position: absolute, z-index 15) sit on top to visually
   separate pages. No CSS mask needed — content is never invisible. */
.a4-content-layer {
  /* No mask — white bg set inline on the element */
}

/* The page gap labels sitting between page cards */
.page-gap-label {
  /* Visual styling is inline; this class is for optional overrides */
}

/* DOCX page break rendered inside the editor */
.template-editor-prosemirror hr.docx-page-break,
.ProseMirror hr.docx-page-break {
  border: none;
  height: 24px;
  background: #d9d9d9;
  margin: 0 -72px;
  position: relative;
  cursor: default;
}

.template-editor-prosemirror hr.docx-page-break::before,
.ProseMirror hr.docx-page-break::before {
  content: 'PAGE BREAK';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  color: #9ca3af;
  font-weight: 600;
  letter-spacing: 1px;
}

/* ProseMirror inside the paged editor — content flows continuously.
   Padding creates the A4 margins on the first page. The content layer
   sits above the page card backgrounds (z-index: 1). */
.a4-paged-editor .ProseMirror {
  outline: none;
  min-height: 919px; /* content zone per page */
  padding: 112px 72px 92px 72px; /* top: header zone, sides: margins, bottom: footer zone */
  font-family: 'Times New Roman', 'Georgia', serif;
  font-size: 12pt;
  line-height: 1.15; /* Match Word default */
}

/* ========== TipTap Template Editor Styles ========== */

/* ProseMirror base */
.template-editor-prosemirror {
  min-height: 100%;
}

.template-editor-prosemirror p {
  margin: 0; /* Match Word default — no extra space between paragraphs */
}

.template-editor-prosemirror h1 {
  font-size: 18pt;
  font-weight: bold;
  margin-bottom: 4px;
}

.template-editor-prosemirror h2 {
  font-size: 14pt;
  font-weight: bold;
  margin-bottom: 3px;
}

.template-editor-prosemirror h3 {
  font-size: 12pt;
  font-weight: bold;
  margin-bottom: 2px;
}

.template-editor-prosemirror ul,
.template-editor-prosemirror ol {
  padding-left: 1.5em;
  margin-bottom: 0;
}

.template-editor-prosemirror li {
  margin-bottom: 0;
}

.template-editor-prosemirror table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}

.template-editor-prosemirror td,
.template-editor-prosemirror th {
  border: 1px solid #d1d5db;
  padding: 8px;
  min-width: 60px;
}

.template-editor-prosemirror th {
  background: #f9fafb;
  font-weight: bold;
}

.template-editor-prosemirror img {
  max-width: 100%;
  height: auto;
  margin: 0; /* No extra margins — Word doesn't add them */
}

/* Letterhead: logo floats left, company details flow beside it */
.template-editor-prosemirror > p:first-child:has(> img) {
  float: left;
  margin: 0 15px 10px 0;
}
.template-editor-prosemirror > p:first-child:has(> img) ~ *:not([style*="right"]) {
  clear: left;
}

.template-editor-prosemirror hr {
  border: none;
  border-top: 2px solid #e5e7eb;
  margin: 1.5em 0;
}

.template-editor-prosemirror blockquote {
  border-left: 3px solid #d1d5db;
  padding-left: 1em;
  margin-left: 0;
  color: #6b7280;
}

/* Placeholder text */
.template-editor-prosemirror p.is-editor-empty:first-child::before {
  color: #adb5bd;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

/* Variable chip inline style (rendered by TipTap NodeView) */
.variable-chip-inline {
  display: inline;
  vertical-align: baseline;
  line-height: inherit;
}

.variable-chip-inline.selected {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* Table resize handle */
.template-editor-prosemirror .column-resize-handle {
  position: absolute;
  right: -2px;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #3b82f6;
  cursor: col-resize;
}

/* Selected table cell */
.template-editor-prosemirror .selectedCell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(59, 130, 246, 0.1);
  pointer-events: none;
}


/* Task Work dashboard — typography from the supplied mockup.
   Scoped to .tw-dash so the rest of the CRM is untouched. */
.tw-dash{font-family:'Inter',sans-serif;font-size:13px;-webkit-font-smoothing:antialiased}
.tw-dash .tw-archivo{font-family:'Archivo','Inter',sans-serif}
.tw-dash h1,.tw-dash h2,.tw-dash h3{font-family:'Archivo','Inter',sans-serif}
.tw-dash .font-mono,.tw-dash .tabular-nums{font-family:'IBM Plex Mono',ui-monospace,monospace}

/* ════════════════════════════════════════════════════════════════════════
   DOCS & TEMPLATES PANEL TOKENS  (DOCS-TEMPLATES-FRONTEND-v2.md §1)

   One source for both modes. Light on :root, dark overrides on .dark, which
   is the class ThemeContext puts on <html>. Components reference var(--…)
   once and get both modes; nothing per-element can be "forgotten" in dark
   again, which is how chips, pips, badges, inputs, modals and the timeline
   ended up with no dark variants at all.

   Everything here is scoped by .docs-panel except the :root/.dark variable
   blocks, so the rest of the CRM is untouched.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* Brand — identical in both modes (v2 §1.4) */
  --rr-navy-deep:  #0b1533;
  --rr-navy:       #12275e;
  --rr-cobalt:     #1e3a8a;
  --rr-blue:       #1d4ed8;
  --rr-gold:       #d4a643;
  --rr-gold-light: #f0cf7c;
  --rr-gold-dark:  #b8860b;
  --rr-navy-grad:  linear-gradient(120deg, #0b1533, #1e3a8a);
  --rr-gold-grad:  linear-gradient(135deg, #d4a643, #b8860b);
  --rr-hairline:   linear-gradient(90deg, transparent, #d4a643 40%, #f0cf7c 55%, transparent 90%);

  /* Surfaces */
  --sf-page:       #eef2f7;
  --sf-card:       #ffffff;
  --sf-raised:     #f8fafc;
  --sf-hover:      #eff6ff;
  --sf-hover-flat: #f1f5f9;
  --sf-inset:      #e2e8f0;

  /* Text */
  --tx-heading:    #12275e;
  --tx-body:       #334155;
  --tx-muted:      #64748b;
  --tx-faint:      #94a3b8;
  --tx-disabled:   #cbd5e1;
  --tx-on-navy:    #ffffff;
  --tx-on-navy-sub:#93a6d4;
  --tx-on-navy-hov:#d7e0f5;   /* resting tab lifts toward white on hover, not to it */
  --tx-link:       #1d4ed8;

  /* Lines */
  --ln-divider:    #f1f5f9;
  --ln-border:     #e2e8f0;
  --ln-input:      #cbd5e1;
  --ln-dashed:     #cbd5e1;

  /* Shadows & scrims */
  --sh-card:       0 8px 30px rgba(15, 23, 42, 0.10);
  --sh-card-sm:    0 2px 10px rgba(15, 23, 42, 0.06);
  --sh-card-hover: 0 14px 34px -8px rgba(18, 39, 94, 0.22);
  --sh-paper:      0 12px 40px rgba(15, 23, 42, 0.18);
  --sh-dropdown:   0 20px 50px rgba(11, 21, 51, 0.25);
  --sh-modal:      0 24px 60px rgba(11, 21, 51, 0.40);
  --scrim-modal:   rgba(11, 21, 51, 0.55);

  /* Focus (v2 §9) */
  --focus-ring:      0 0 0 3px rgba(212, 166, 67, 0.45);
  --focus-ring-navy: 0 0 0 3px rgba(30, 58, 138, 0.30);

  /* Pipeline card sheen — dialled back on dark (v2 §3.1) */
  --pipe-sheen:    rgba(255, 255, 255, 0.22);
}

.dark {
  --sf-page:       #0E1320;
  --sf-card:       #161D2E;
  --sf-raised:     #1B2335;
  --sf-hover:      #1B2A4A;
  --sf-hover-flat: #1E2A44;
  --sf-inset:      #253150;

  --tx-heading:    #E8EDF5;
  --tx-body:       #C6CFDE;
  --tx-muted:      #93A0B4;
  --tx-faint:      #5E6B82;
  --tx-disabled:   #46526B;
  --tx-link:       #7EA4FF;   /* #1d4ed8 is ~3.4:1 on #161D2E — fails AA (v2 §13) */

  --ln-divider:    #1E2A44;
  --ln-border:     #2A3550;
  --ln-input:      #364260;
  --ln-dashed:     #364260;

  --sh-card:       0 8px 30px rgba(0, 0, 0, 0.45);
  --sh-card-sm:    0 2px 10px rgba(0, 0, 0, 0.35);
  --sh-card-hover: 0 14px 34px -8px rgba(0, 0, 0, 0.60);
  --sh-paper:      0 12px 40px rgba(0, 0, 0, 0.55);
  --sh-dropdown:   0 20px 50px rgba(0, 0, 0, 0.60);
  --sh-modal:      0 24px 60px rgba(0, 0, 0, 0.70);
  --scrim-modal:   rgba(4, 8, 18, 0.72);

  --focus-ring:      0 0 0 3px rgba(240, 207, 124, 0.40);
  --focus-ring-navy: 0 0 0 3px rgba(126, 164, 255, 0.30);

  --pipe-sheen:    rgba(255, 255, 255, 0.16);
}

/* ── Status chips (v2 §1.3) ───────────────────────────────────────────────
   Light chips are pastel-on-white. On a #161D2E card those pastels glare, so
   dark uses a translucent tint of the same hue plus a brightened foreground —
   same colour family, no white slab. */
.docs-panel .chip { background: #f1f5f9; color: #475569; }
.docs-panel .chip[data-status="Draft"]                { background:#f1f5f9; color:#475569; }
.docs-panel .chip[data-status="uploaded"]             { background:#e0e7ff; color:#4338ca; }
.docs-panel .chip[data-status="For Approval"]         { background:#fef3c7; color:#b45309; }
.docs-panel .chip[data-status="Sent"]                 { background:#dbeafe; color:#1d4ed8; }
.docs-panel .chip[data-status="Viewed"]               { background:#ede9fe; color:#7c3aed; }
.docs-panel .chip[data-status="Completed"]            { background:#d1fae5; color:#059669; }
.docs-panel .chip[data-status="Waiting for Payment"]  { background:#fef9c3; color:#a16207; }
.docs-panel .chip[data-status="Paid"]                 { background:#ccfbf1; color:#0f766e; }
.docs-panel .chip[data-status="Expired"]              { background:#ffe4e6; color:#e11d48; }
.docs-panel .chip[data-status="Declined"]             { background:#fecdd3; color:#9f1239; }

.dark .docs-panel .chip                               { background:rgba(148,163,184,0.16); color:#B7C2D4; }
.dark .docs-panel .chip[data-status="Draft"]          { background:rgba(148,163,184,0.16); color:#B7C2D4; }
.dark .docs-panel .chip[data-status="uploaded"]       { background:rgba(129,140,248,0.18); color:#A5B4FC; }
.dark .docs-panel .chip[data-status="For Approval"]   { background:rgba(251,191,36,0.16);  color:#FBBF24; }
.dark .docs-panel .chip[data-status="Sent"]           { background:rgba(59,130,246,0.18);  color:#7EB0FF; }
.dark .docs-panel .chip[data-status="Viewed"]         { background:rgba(168,85,247,0.18);  color:#C4A5FF; }
.dark .docs-panel .chip[data-status="Completed"]      { background:rgba(52,211,153,0.16);  color:#4ADE9E; }
.dark .docs-panel .chip[data-status="Waiting for Payment"] { background:rgba(202,138,4,0.18); color:#E3B341; }
.dark .docs-panel .chip[data-status="Paid"]           { background:rgba(45,212,191,0.16);  color:#5EEAD4; }
.dark .docs-panel .chip[data-status="Expired"]        { background:rgba(244,63,94,0.16);   color:#FB7185; }
.dark .docs-panel .chip[data-status="Declined"]       { background:rgba(159,18,57,0.28);   color:#FDA4AF; }

/* ── Panel header strips (v2 §1.4) ────────────────────────────────────────
   The navy strip sits on a #161D2E card in dark mode and the two nearly meet.
   An extra hairline above the 2px gold border keeps the edge readable. */
.dark .docs-panel .panel-head { box-shadow: inset 0 -1px 0 rgba(212,166,67,0.35); }

/* ── Focus system (v2 §9) ─────────────────────────────────────────────────
   Nothing in the panel had a visible focus state — the inline shadows swallow
   the browser default. Gold ring on controls, navy on text entry so focus is
   never mistaken for a gold CTA. :focus-visible, so mouse clicks stay clean. */
.docs-panel :is(button, a, [tabindex="0"], input[type="checkbox"]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 8px;
}
.docs-panel :is(input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-navy);
}

/* ── Row actions (v2 §5.2) ────────────────────────────────────────────────
   Hover-only actions are unreachable by keyboard and invisible on touch. */
.docs-panel .row-actions { opacity: 0; transition: opacity .15s; }
.docs-panel .tpl-row:hover .row-actions,
.docs-panel .tpl-row:focus-within .row-actions { opacity: 1; }
@media (hover: none) { .docs-panel .row-actions { opacity: 1; } }

/* ── Tab underline (v2 §2.2) ──────────────────────────────────────────────
   Scales in from the centre rather than snapping between border colours. */
/* The active tab is filled with the page colour so it reads as a folder tab cut
   out of the navy band, rather than the translucent white ghost it was. The
   colours live here, not inline, because --sf-page is near-black under .dark —
   navy text on it would be unreadable, so the dark rule below flips the text. */
.docs-tab { position: relative; transition: color .15s, background .15s;
  color: var(--tx-on-navy-sub); background: transparent; border-radius: 8px 8px 0 0; }
.docs-tab:hover { color: var(--tx-on-navy-hov); }
.docs-tab[aria-selected="true"],
.docs-tab[aria-selected="true"]:hover { background: var(--sf-page); color: var(--rr-navy); }
.dark .docs-tab[aria-selected="true"],
.dark .docs-tab[aria-selected="true"]:hover { color: var(--tx-heading); }
.docs-tab::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 3px;
  background: var(--rr-gold); border-radius: 2px 2px 0 0;
  transform: scaleX(0); transform-origin: center; transition: transform .22s ease;
}
.docs-tab[aria-selected="true"]::after { transform: scaleX(1); }

/* ── All documents — live (filter chips, status select, pager) ──────────
   aria-pressed carries the active state rather than a class, so the chip row
   is announced correctly to a screen reader and styled from the same fact. */
.docs-panel .fchip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--ln-border); background: var(--sf-raised); color: var(--tx-body);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.docs-panel .fchip:hover { border-color: var(--tx-faint); }
/* slate-900, per AllDocumentsLive.jsx — a neutral at full strength, so the
   focused chip never competes with the status dot sitting inside it. Dark mode
   inverts rather than switching to gold: the same "strongest neutral" intent,
   and gold is not a colour this component uses anywhere else. */
.docs-panel .fchip[aria-pressed="true"] {
  background: #0f172a; color: #fff; border-color: #0f172a;
}
.dark .docs-panel .fchip[aria-pressed="true"] {
  background: var(--tx-heading); color: #0f172a; border-color: var(--tx-heading);
}
.docs-panel .fchip .fc-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.docs-panel .fchip .fc-n { font-variant-numeric: tabular-nums; opacity: .75; }
.docs-panel .fchip[aria-pressed="true"] .fc-n { opacity: .9; }

/* The pill keeps the status colour it is showing, so the row reads the same
   whether the status is a chip elsewhere or an editable select here. */
.docs-panel .status-select {
  font-size: 11px; font-weight: 700; padding: 3px 22px 3px 10px; border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .12); cursor: pointer;
  -webkit-appearance: none; appearance: none; background-repeat: no-repeat;
  background-position: right 8px center;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23334155'/%3E%3C/svg%3E");
}
.docs-panel .status-select:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
.docs-panel .status-select:disabled { opacity: .55; cursor: progress; }
.docs-panel .status-select option { background: var(--sf-card); color: var(--tx-body); }

.docs-panel .ad-pager-btn {
  font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--ln-border); background: var(--sf-card); color: var(--tx-body);
  cursor: pointer; transition: background .15s;
}
.docs-panel .ad-pager-btn:hover:not(:disabled) { background: var(--sf-hover); }
.docs-panel .ad-pager-btn:disabled { opacity: .4; cursor: default; }

/* ── Modal & toast entrances (v2 §3.8) ────────────────────────────────── */
@keyframes docsModalIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes docsToastIn { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.docs-panel .docs-modal { animation: docsModalIn .2s ease; }
.docs-panel .docs-toast { animation: docsToastIn .3s ease; }

/* ── Skeletons (v2 §11) ───────────────────────────────────────────────────
   First load only. Never blank an already-populated table to show a spinner. */
.docs-panel .skeleton {
  background: linear-gradient(90deg, var(--sf-inset) 25%, var(--sf-raised) 50%, var(--sf-inset) 75%);
  background-size: 200% 100%;
  animation: docsShimmer 1.4s linear infinite;
}
@keyframes docsShimmer { to { background-position: -200% 0; } }

/* ── Scrollbars & selection (v2 §12) ──────────────────────────────────── */
.docs-panel *::-webkit-scrollbar { width: 8px; height: 8px; }
.docs-panel *::-webkit-scrollbar-track { background: transparent; }
.docs-panel *::-webkit-scrollbar-thumb { background: var(--sf-inset); border-radius: 4px; }
.docs-panel *::-webkit-scrollbar-thumb:hover { background: var(--tx-faint); }
.docs-panel { scrollbar-width: thin; scrollbar-color: var(--sf-inset) transparent; }
.docs-panel ::selection { background: rgba(212,166,67,0.30); }
.dark .docs-panel ::selection { background: rgba(212,166,67,0.40); color: #fff; }

/* ── Pressed state (v2 §7) ────────────────────────────────────────────────
   Buttons floated up on hover but never pressed down. */
.docs-panel button:active { transform: translateY(0) !important; filter: brightness(0.95); }

/* ── Reduced motion (v2 §10) — required, not optional ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .docs-panel *, .docs-panel *::before, .docs-panel *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .docs-panel *:hover { transform: none !important; }
}

/* Flow-connector circle: a white pill reads as a hole punched in a dark page. */
.dark .docs-panel {
  --connector-bg: linear-gradient(145deg,#2A3550,#1B2335);
  --connector-sh: 0 2px 6px rgba(0,0,0,0.5);
}

/* Editor rows: hover tint via tokens (the row lost its Tailwind hover classes
   when it gained .tpl-row, because those classes also carried the dark variant). */
.docs-panel .tpl-row { border-top: 1px solid var(--ln-divider); }
.docs-panel .tpl-row:hover { background: var(--sf-raised); }

/* ── The document sheet is always white (v2 §3.7) ─────────────────────────
   .docs-paper is a picture of a physical document. Everything printed on it —
   navy headings, slate body text, the gold rule, the statutory footer — is
   chosen for white paper, so the sheet must not follow the theme. It briefly
   did (`dark:bg-surface-800`), which left dark navy text on a dark sheet and
   made the whole preview unreadable.

   The guard pins the SURFACE only. Text is deliberately left alone: the sheet's
   colours are plain classes and inline hexes with no `dark:` variants, so they
   already render correctly on white in both modes. An earlier version of this
   rule also forced descendant colour, which out-specified Tailwind's
   `text-slate-500` and flattened the intentional greys — fixing a bug that did
   not exist and creating one that did. */
.dark .docs-panel .docs-paper { background: #fff !important; color-scheme: light; }
.dark .docs-panel .docs-paper iframe { background: #fff; color-scheme: light; }