/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Custom color overrides */
:root {
  --color-yellow-500: #eab308; /* More yellowish, less gold - Tailwind yellow-500 */
}

/* Brand palette (--color-brand-*) is defined in the Tailwind @theme block
   (app/assets/tailwind/application.css), which emits the :root variables AND
   the bg-brand-*/text-brand-* utilities. The var(--color-brand-*) references
   throughout this stylesheet resolve against those generated variables — same
   mechanism already used by blueprint-500 below. */

/* Active-tool indicator for the facade sketchpad toolbar. Uses the brand
   tan CSS variable because Tailwind doesn't expose a `tan-500` utility and
   inline styles fall afoul of the app's CSP. */
.facade-tool-active {
  background-color: var(--color-brand-tan);
  color: #ffffff;
  border-color: var(--color-brand-tan);
}

/* Active-segment indicator for the image-provider toggle (Gemini / Grok).
   Same brand tan as the tool buttons so the highlight stays consistent. */
.provider-toggle-active {
  background-color: var(--color-brand-tan);
  color: #ffffff;
  border-color: var(--color-brand-tan);
  font-weight: 600;
}


/* Blueprint Grid — minor 16px + major 80px lines with radial fade.
   Uses ::before pseudo-element so the mask fades only the grid,
   not the page content sitting on top. */
.blueprint-grid {
  position: relative;
}
.blueprint-grid::before {
  content: "";
  position: absolute;
  inset: -24px 0 0 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(100, 116, 139, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(100, 116, 139, 0.09) 1px, transparent 1px),
    linear-gradient(to right, rgba(100, 116, 139, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(100, 116, 139, 0.05) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.dark .blueprint-grid::before {
  background-image:
    linear-gradient(to right, rgba(100, 116, 139, 0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(100, 116, 139, 0.14) 1px, transparent 1px),
    linear-gradient(to right, rgba(100, 116, 139, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(100, 116, 139, 0.08) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}

/* Blueprint Title — company name rendered as an architectural cartouche,
   stamped into the blueprint grid at the same visual weight as the major
   grid lines. Uses the same steel-slate palette so it reads as part of
   the drawing sheet, not a UI heading. */
.blueprint-title {
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgba(100, 116, 139, 0.13);
  line-height: 1;
}
.dark .blueprint-title {
  color: rgba(100, 116, 139, 0.18);
}

/* Price History - Expand/Collapse animation */
.expanded {
  grid-template-rows: 1fr !important;
}

.details-collapsed {
  grid-template-rows: 0fr;
}

.rotated {
  transform: rotate(90deg);
}

.workflow-stage-pill--execution {
  background: var(--color-brand-tan);
}

.field-packet-watermark {
  color: rgba(100, 116, 139, 0.2);
}

.popover-panel {
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  pointer-events: none;
  transition: opacity 100ms ease-out, transform 100ms ease-out;
}

.popover-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ============================================================
   Cost Code Table V2 — Depth gauge & density styles
   ============================================================ */

/* Depth gauge: left-edge hierarchy markers (status-aware) */
.depth-L1-completed  { border-left: 4px solid #10b981; } /* emerald-500 — all services done */
.depth-L1-in-progress    { border-left: 4px solid #f59e0b; } /* amber-500 — some quotes received or pending */
.depth-L1-vendor-pending { border-left: 4px solid #eab308; } /* yellow-500 — internal done, vendor pending */
.depth-L1-not-started { border-left: 4px solid #ef4444; } /* red-500 — needs attention */
.depth-L1-muted      { border-left: 4px solid #cbd5e1; } /* slate-300 — no material services */
.depth-L2 { border-left: 4px solid transparent; }
.depth-L3 { border-left: 4px solid transparent; }

/* Permit stages indicators (monitoring tables) */
.permit-stages-complete  { border-left: 4px solid #10b981; background-color: rgb(236 253 245 / 0.5); } /* emerald-500 — all received */
.permit-stages-pending   { border-left: 4px solid #f59e0b; } /* amber-500  — pending stages */
.permit-stages-cancelled { border-left: 4px solid #ef4444; } /* red-500    — cancelled */
.dark .permit-stages-complete { background-color: rgb(6 78 59 / 0.1); }

/* Permit management global status indicators */
.permit-status-none       { border-left: 4px solid #9ca3af; } /* gray-400   — not started */
.permit-status-applied    { border-left: 4px solid #f59e0b; } /* amber-500  — applied */
.permit-status-issued     { border-left: 4px solid #10b981; } /* emerald-500 — issued */
.permit-status-cancelled  { border-left: 4px solid #ef4444; } /* red-500    — cancelled */

/* Row density tiers */
.row-L1 td { padding-top: 10px; padding-bottom: 10px; }
.row-L2 td { padding-top: 7px; padding-bottom: 7px; }
.row-L3 td { padding-top: 5px; padding-bottom: 5px; }

/* Chevron expand/collapse animation */
.chevron { transition: transform 120ms ease-out; }
.chevron-open { transform: rotate(90deg); }

/* Table row expand/collapse animation */
.row-reveal {
  animation: rowReveal 150ms ease-out forwards;
}
@keyframes rowReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Tabular numbers for aligned columns */
.tabnum { font-variant-numeric: tabular-nums; }

/* Search highlight */
mark.search-hit {
  background: #fbbf24;
  color: #0f172a;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 500;
}
.dark mark.search-hit {
  background: #f59e0b;
  color: #0f172a;
}

/* Summary bar gradient */
.summary-bar {
  background: linear-gradient(90deg, rgba(14,165,233,0.08) 0%, rgba(14,165,233,0.02) 100%);
}
.dark .summary-bar {
  background: linear-gradient(90deg, rgba(14,165,233,0.12) 0%, rgba(14,165,233,0.03) 100%);
}

/* Grid pattern for empty state */
.grid-pattern {
  background-image:
    linear-gradient(rgba(14,165,233,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,0.06) 1px, transparent 1px);
  background-size: 20px 20px;
}
.dark .grid-pattern {
  background-image:
    linear-gradient(rgba(14,165,233,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,0.08) 1px, transparent 1px);
}

/* Status pulse animation for in-progress indicators */
@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.status-in-progress { animation: status-pulse 2.5s ease-in-out infinite; }

/* Subtle row hover */
tbody tr:hover td { background-color: rgba(14, 165, 233, 0.04); }
.dark tbody tr:hover td { background-color: rgba(14, 165, 233, 0.06); }

/* Confirm dialog animations */
@keyframes confirm-backdrop-in {
  from { opacity: 0 }
  to   { opacity: 1 }
}
@keyframes confirm-card-in {
  from { opacity: 0; transform: scale(0.95) translateY(-8px) }
  to   { opacity: 1; transform: scale(1) translateY(0) }
}

/* ============================================================
   Top Navbar — translucent Basecamp-inspired
   ============================================================ */

/* Translucent background via ::before (text stays crisp, bg is see-through) */
.top-navbar {
  position: fixed;
  top: 0;
  z-index: 50;
  width: 100%;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.top-navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-brand-navy);
  opacity: 0.92;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Scrolled state — subtle bottom edge appears */
.top-navbar--scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* User dropdown — warm multi-layer shadow + entry animation */
.navbar-dropdown {
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  pointer-events: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out;
  box-shadow:
    0 -1px 1px 0 rgba(173, 151, 121, 0.06),
    0 1px 3px -0.5px rgba(173, 151, 121, 0.12),
    0 3px 6px -1px rgba(26, 36, 63, 0.10),
    0 6px 12px -2px rgba(26, 36, 63, 0.12),
    0 16px 36px -8px rgba(26, 36, 63, 0.18);
}
.navbar-dropdown.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Arrow nub — rotated square peeking above the dropdown */
.navbar-dropdown::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 16px;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 1px 0 0 0;
  transform: rotate(45deg);
  z-index: 1;
  box-shadow:
    -1px -1px 2px -1px rgba(26, 36, 63, 0.08);
}

/* Arrow nub — centered variant for mid-navbar dropdowns */
.navbar-dropdown--center::before {
  right: auto;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

/* Arrow nub — start (left) variant for the mobile navigation menu */
.navbar-dropdown--start::before {
  right: auto;
  left: 16px;
}

/* Dropdown item hover */
.navbar-dropdown-item {
  transition: background-color 120ms ease;
}
.navbar-dropdown-item:hover {
  background-color: rgba(173, 151, 121, 0.08);
}

/* Hub dropdown mini-cards — mirrors .workflow-card hover (inset left-accent) */
.hub-card {
  transition: background-color 150ms ease, box-shadow 200ms ease;
}
.hub-card:hover {
  box-shadow: inset 2px 0 0 0 var(--color-blueprint-500);
}
.hub-card--execution:hover {
  box-shadow: inset 2px 0 0 0 var(--color-brand-tan);
}

/* Dialog modal system — transparent wrapper for stacking modals via <dialog> */
dialog.modal-dialog {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  overflow: visible;
}
dialog.modal-dialog::backdrop {
  background: transparent;
}

/* ============================================================
   Global scrollbar — subtle, Basecamp-inspired
   ============================================================ */

/* Firefox / standard */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.45) transparent;  /* slate-400 @ 45% */
}
.dark * {
  scrollbar-color: rgba(71, 85, 105, 0.5) transparent;     /* slate-600 @ 50% */
}

/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.35);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(148, 163, 184, 0.6);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Dark mode — WebKit */
.dark ::-webkit-scrollbar-thumb {
  background-color: rgba(71, 85, 105, 0.4);
}
.dark ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(71, 85, 105, 0.65);
}

/* Utility: extra-thin scrollbar (for small containers, modals) */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 transparent;
}
.scrollbar-thin::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.4);
  border-radius: 9999px;
  border: 1px solid transparent;
  background-clip: content-box;
}
.dark .scrollbar-thin {
  scrollbar-color: #475569 transparent;
}
.dark .scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: rgba(71, 85, 105, 0.45);
}

/* Note item expand/collapse chevron */
details[open] > summary .chevron-icon {
  transform: rotate(90deg);
}

.action-menu {
  opacity: 0;
  transform: translateY(-4px) scale(0.97);
  pointer-events: none;
  transition: opacity 100ms ease-out, transform 100ms ease-out;
}
.action-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.table-row-removing {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.table-row-entering {
  animation: tableRowEnter 300ms ease-out forwards;
}

.table-row-collapsing {
  animation: tableRowCollapse 200ms ease-in forwards;
}

@keyframes tableRowEnter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tableRowCollapse {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-5px);
  }
}

/* ============================================================
   Workflow Card — hover refinement for shared-border grids
   ============================================================ */

/* Inset left-accent reveal on hover (Linear-style).
   Works inside overflow-hidden grid containers where
   outward box-shadows would be clipped by adjacent cells. */
.workflow-card {
  transition: background-color 150ms ease, box-shadow 200ms ease;
}
.workflow-card:hover {
  box-shadow: inset 2px 0 0 0 var(--color-blueprint-500);
}
.workflow-card--execution:hover {
  box-shadow: inset 2px 0 0 0 var(--color-brand-tan);
}
.dark .workflow-card:hover {
  box-shadow: inset 2px 0 0 0 var(--color-blueprint-400);
}
.dark .workflow-card--execution:hover {
  box-shadow: inset 2px 0 0 0 var(--color-brand-tan);
}

/* Model cards */
.portfolio-card {
  transition: border-color 0.2s ease;
}

.portfolio-card:hover {
  border-color: #94a3b8;
}

.portfolio-card:hover .card-overlay {
  opacity: 1;
}

.portfolio-card:hover .card-cta {
  transform: translateY(0);
  opacity: 1;
}

.portfolio-card:hover .house-svg {
  transform: scale(1.06);
}

.portfolio-card:hover .card-thumbnail {
  transform: scale(1.04);
}

.card-thumbnail {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-cta {
  transform: translateY(8px);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}

.card-hero {
  background-image:
    linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 16px 16px;
}

.house-svg {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.metric-value {
  font-variant-numeric: tabular-nums;
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-enter {
  animation: cardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.card-enter[data-card-seq="1"] { animation-delay: 70ms; }
.card-enter[data-card-seq="2"] { animation-delay: 140ms; }
.card-enter[data-card-seq="3"] { animation-delay: 210ms; }
.card-enter[data-card-seq="4"] { animation-delay: 280ms; }
.card-enter[data-card-seq="5"] { animation-delay: 350ms; }
.card-enter[data-card-seq="6"] { animation-delay: 420ms; }
.card-enter[data-card-seq="7"] { animation-delay: 490ms; }

.budget-bar-fill {
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

/* Kanban cards */
.kanban-card {
  border: 1px solid #475569;
  margin: 0.75rem 0;
  background-color: #fefefe;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}

.kanban-card:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.kanban-card .text-gray-900 {
  color: #1e3a5f !important;
  font-weight: 600;
}

.kanban-card .text-gray-600 {
  color: #374151 !important;
}

.kanban-card .border-gray-200 {
  border-color: #dbeafe !important;
}

.kanban-card-content {
  padding: 1rem;
}

.kanban-card-content-compact {
  padding: 0.75rem;
}

/* Workflow card avatars use stylesheet classes instead of inline styles so
   they remain compatible with the app CSP (`style-src 'self' https:`). */
.avatar-color-0 { background-color: #7A8594; }
.avatar-color-1 { background-color: #8B7D6B; }
.avatar-color-2 { background-color: #6E7A8A; }
.avatar-color-3 { background-color: #8A7B6A; }
.avatar-color-4 { background-color: #657585; }
.avatar-color-5 { background-color: #9A8B7A; }
.avatar-color-6 { background-color: #768694; }
.avatar-color-7 { background-color: #87796B; }

/* Keep a CSP-safe navigation indicator instead of Turbo's inline-style progress bar. */
html.turbo-progress-visible::before {
  content: "";
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  z-index: 2147483647;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14, 165, 233, 0) 0%, rgba(14, 165, 233, 0.95) 50%, rgba(14, 165, 233, 0) 100%);
  background-size: 35% 100%;
  background-repeat: no-repeat;
  animation: turboProgressSlide 1s linear infinite;
}

@keyframes turboProgressSlide {
  from { background-position: -35% 0; }
  to   { background-position: 135% 0; }
}

@media (prefers-color-scheme: dark) {
  .portfolio-card:hover {
    border-color: #64748b;
  }

  .card-hero {
    background-image:
      linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  }
}

/* Document Register — accordion sections */
.section-chevron { transition: transform 150ms ease; }
.section-open .section-chevron { transform: rotate(90deg); }
.section-body { display: none; }
.section-open .section-body { display: block; }
.section-accent-active { border-left: 3px solid #2e6fff; }
.section-accent-empty { border-left: 3px solid #e2e8f0; }

@media (prefers-color-scheme: dark) {
  .section-accent-empty { border-left-color: #334155; }
}

/* Proposal hero — subtle radial vignette on brand-navy */
.proposal-hero {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(173, 151, 121, 0.06) 0%, transparent 70%),
    var(--color-brand-navy);
}
@media (prefers-color-scheme: dark) {
  .proposal-hero {
    background:
      radial-gradient(ellipse at 50% 0%, rgba(173, 151, 121, 0.08) 0%, transparent 70%),
      var(--color-brand-navy);
  }
}

/* ── Spec Sheet ── */
/* Sticky command bar: bg is set via Tailwind (bg-steel-100 dark:bg-steel-900) so
   it follows the app's class-based dark toggle. This only adds the separating
   shadow. The app uses class-based dark mode (<html class="dark">), NOT
   prefers-color-scheme — so all dark variants below use the `.dark` selector. */
.spec-command-bar {
  box-shadow: 0 1px 0 rgb(226 232 240), 0 6px 12px -10px rgba(15, 23, 42, 0.25);
}
.dark .spec-command-bar {
  box-shadow: 0 1px 0 rgb(51 65 85), 0 6px 12px -10px rgba(0, 0, 0, 0.5);
}

/* Filled row: tan left accent + a soft tan wash fading to the right. */
.spec-row { position: relative; }
.spec-row.is-filled {
  background-image: linear-gradient(to right, rgba(173, 151, 121, 0.09), transparent 38%);
}
.spec-row.is-filled::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--color-brand-tan);
}

/* Product Approval row: blueprint left accent. Declared after the filled rule so it
   overrides the tan ::before bar; the filled tan wash (on the element) stays, so a
   PA+filled row still reads as filled. */
.spec-row.is-pa::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-blueprint-500);
}

/* Collapsible category */
.spec-cat.is-collapsed .spec-cat-rows { display: none; }
.spec-cat.is-collapsed .spec-cat-chev { transform: rotate(-90deg); }

/* Completed category: swap fraction for the "Complete" pill, bar turns emerald. */
.spec-cat-done { display: none; }
.spec-cat.is-done .spec-cat-done { display: inline-flex; }
.spec-cat.is-done .spec-cat-frac { display: none; }
.spec-cat.is-done .spec-cat-bar { background-color: rgb(5 150 105); } /* emerald-600 */

/* Rail (trade index) */
.spec-rail-item.is-active {
  border-left-color: var(--color-brand-tan);
  background-color: #ffffff;
}
.spec-rail-item.is-active .spec-rail-name { color: var(--color-brand-navy); }
.spec-rail-item.is-complete .spec-rail-bar { background-color: rgb(5 150 105); }
.spec-rail-item.is-complete .spec-rail-frac { color: rgb(4 120 87); } /* emerald-700 */

.dark .spec-rail-item.is-active { background-color: rgb(30 41 59); } /* steel-800 */
.dark .spec-rail-item.is-active .spec-rail-name { color: rgb(241 245 249); }
.dark .spec-rail-item.is-complete .spec-rail-frac { color: rgb(52 211 153); } /* emerald-400 */

/* Legend swatches */
.spec-legend-swatch { display: inline-block; width: 18px; height: 10px; }
.spec-legend-swatch--filled {
  background-image: linear-gradient(to right, rgba(173, 151, 121, 0.5), transparent);
  border-left: 2px solid var(--color-brand-tan);
}
.spec-legend-swatch--pa {
  background-color: rgb(241 245 249);          /* steel-100 */
  border-left: 3px solid var(--color-blueprint-500);
}
.spec-legend-swatch--open {
  background-color: rgb(241 245 249);          /* steel-100 */
  border: 1px solid rgb(226 232 240);          /* steel-200 */
}
.dark .spec-legend-swatch--open {
  background-color: rgb(30 41 59);             /* steel-800 */
  border-color: rgb(51 65 85);                 /* steel-700 */
}

/* Print-friendly chrome — hides app shell when the user prints or saves as PDF */
@page {
  size: letter;
  margin: 0.5in;
}

@media print {
  /* Force solid white across the entire page — removes steel-100/50 tints */
  html, body,
  .bg-steel-100, .bg-steel-50, .bg-steel-150,
  .dark\:bg-steel-900, .dark\:bg-steel-850 {
    background: white !important;
    background-color: white !important;
  }

  .top-navbar,
  [data-controller~="feedback-widget"] {
    display: none !important;
  }

  .proposal-hero {
    background: #ffffff !important;
    color: #111827 !important;
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
    border-bottom: 1px solid #cbd5e1 !important;
  }
  .proposal-hero * {
    color: #111827 !important;
  }

  /* Hide anything explicitly marked as screen-only during print */
  .print\:hidden {
    display: none !important;
  }

  /* Collapse the 3+2 grid to a single column so the contract uses full page width */
  .print\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  .print\:col-span-full {
    grid-column: 1 / -1 !important;
  }
  .print\:gap-4 {
    gap: 1rem !important;
  }

  /* Softer card borders on paper */
  article.bg-white {
    box-shadow: none !important;
    break-inside: avoid;
  }
}

/* Hidden scrollbar — scrollable but no visible track/thumb */
.scroll-hidden {
  overflow-y: auto;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge */
}
.scroll-hidden::-webkit-scrollbar {
  display: none;                  /* Chrome/Safari */
}

/* Ledger scrollbar — visible scroll affordance for the Conceptual Building
   Breakdown. Thin steel tick (zero radius) sliding in a faint channel. */
.breakdown-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 0.75rem;        /* breathing room between content and scrollbar */

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.14) rgba(15, 23, 42, 0.03);
}
.dark .breakdown-scroll {
  scrollbar-color: rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.025);
}
.breakdown-scroll::-webkit-scrollbar {
  width: 10px;
}
.breakdown-scroll::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.025);
  border-left: 1px solid rgba(15, 23, 42, 0.05);
}
.dark .breakdown-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-left-color: rgba(255, 255, 255, 0.05);
}
.breakdown-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(15, 23, 42, 0.14);
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.15s ease;
}
.dark .breakdown-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.12);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.breakdown-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(15, 23, 42, 0.28);
}
.dark .breakdown-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.24);
}

/* Service code callouts (PER-001, LND-002…). Slashed-zero distingue 0/O em
   IBM Plex Mono pequeno; tracking apertado mantém o tick compacto. */
.font-code-callout {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "zero" 1;
  letter-spacing: -0.01em;
}

/* Currency input — $ prefix integrado via ::before, sem span irmão.
   O input filho recebe padding-left e text-left para o $ colar no número. */
.input-currency {
  position: relative;
  display: inline-block;
}
.input-currency::before {
  content: "$";
  position: absolute;
  left: 0.375rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: rgb(148 163 184); /* steel-400 */
  pointer-events: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.dark .input-currency::before {
  color: rgb(100 116 139); /* steel-500 */
}
.input-currency > input {
  padding-left: 1.125rem;
}

/* Hover-link entre a stripe do footer e o sticky header da stage acima.
   O Stimulus draw_schedule_stripe_controller marca [data-stripe-highlight]
   no wrapper do stage; o seletor pinta o sticky header em warm tan/steel. */
[data-stripe-highlight="true"] > .sticky {
  background-color: rgb(254 252 247);  /* warm tint do brand-tan-50 */
}
.dark [data-stripe-highlight="true"] > .sticky {
  background-color: rgb(30 41 59);     /* steel-800 */
}

/* ============================================================================
   Login page (Direction A · Split) — utilitarian, IBM Plex, zero radius
   Tokens scoped under .login-page so they don't leak to the app.
   Paired with app/views/sessions/new.html.erb.
   ============================================================================ */
.login-page {
  --lk-navy: #0E2A3B;
  --lk-navy-hover: #14364A;
  --lk-gold: #C9A66B;
  --lk-cream: #F5F1EA;
  --lk-off-white: #FAF7F2;
  --lk-ember: #C0392B;

  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  width: 100%;
  background: var(--lk-off-white);
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--lk-navy);
}

/* ---- Left panel (brand) -------------------------------------------------- */
.login-page__brand {
  background: var(--lk-navy);
  padding: 32px 40px;
  color: var(--lk-cream);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.login-page__brand-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.login-page__brand-body { max-width: 440px; }

.login-page__logo {
  color: var(--lk-cream);
  height: 28px;
  width: auto;
}

.login-page__brand-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--lk-cream);
  margin: 12px 0 0;
  max-width: 400px;
}

.login-page__brand-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: rgba(245, 241, 234, 0.4);
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---- Right panel (form) -------------------------------------------------- */
.login-page__form {
  padding: 32px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.login-page__form-top { min-height: 24px; }

.login-page__form-inner {
  max-width: 360px;
  width: 100%;
  align-self: center;
}

.login-page__eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--lk-gold);
  letter-spacing: 0.02em;
  margin: 0 0 14px;
}

.login-page__heading {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--lk-navy);
  margin: 0 0 10px;
}

.login-page__hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: rgba(14, 42, 59, 0.6);
  line-height: 1.5;
  margin: 0 0 36px;
}

/* ---- Form fields --------------------------------------------------------- */
.login-page__fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.login-page__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-page__field-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(14, 42, 59, 0.7);
  text-transform: lowercase;
}

.login-page__field-label--error { color: var(--lk-ember); }

.login-page__field-wrapper {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(14, 42, 59, 0.18);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.login-page__field-wrapper:focus-within {
  border-color: var(--lk-gold);
  box-shadow: 0 0 0 3px rgba(201, 166, 107, 0.18);
}

.login-page__field-wrapper--error { border-color: var(--lk-ember); }
.login-page__field-wrapper--error:focus-within {
  border-color: var(--lk-ember);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

.login-page__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 11px 13px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  color: var(--lk-navy);
  min-width: 0;
}

.login-page__input::placeholder { color: rgba(14, 42, 59, 0.35); }

.login-page__toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: rgba(14, 42, 59, 0.55);
}
.login-page__toggle:hover { color: var(--lk-navy); }

.login-page__error-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--lk-ember);
  margin-top: 6px;
}

/* ---- Remember-me row ---------------------------------------------------- */
.login-page__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.login-page__checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  color: rgba(14, 42, 59, 0.8);
  user-select: none;
}

.login-page__checkbox-box {
  position: relative;
  width: 15px;
  height: 15px;
  border: 1.5px solid rgba(14, 42, 59, 0.3);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 120ms ease;
}

.login-page__checkbox-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.login-page__checkbox-input:checked ~ .login-page__checkbox-box {
  background: var(--lk-navy);
  border-color: var(--lk-navy);
}
.login-page__checkbox-input:focus-visible ~ .login-page__checkbox-box {
  box-shadow: 0 0 0 3px rgba(201, 166, 107, 0.18);
}

.login-page__checkbox-tick {
  opacity: 0;
  stroke: var(--lk-gold);
  transition: opacity 80ms ease;
}
.login-page__checkbox-input:checked ~ .login-page__checkbox-box .login-page__checkbox-tick {
  opacity: 1;
}

.login-page__forgot {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--lk-navy);
  text-decoration: underline;
}
.login-page__forgot:hover { color: var(--lk-gold); }

/* ---- Submit button ------------------------------------------------------ */
.login-page__btn {
  width: 100%;
  margin-top: 12px;
  background: var(--lk-navy);
  color: var(--lk-cream);
  border: none;
  padding: 12px 16px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.login-page__btn:hover:not(:disabled) { background: var(--lk-navy-hover); }
.login-page__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 166, 107, 0.35);
}
.login-page__btn:disabled { cursor: wait; }

.login-page__btn[aria-busy="true"]::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--lk-cream);
  border-top-color: transparent;
  animation: lk-spin 0.7s linear infinite;
}

@keyframes lk-spin { to { transform: rotate(360deg); } }

/* ---- Footer ------------------------------------------------------------- */
.login-page__footer {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: rgba(14, 42, 59, 0.5);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.login-page__footer a { color: inherit; text-decoration: underline; }
.login-page__footer a:hover { color: var(--lk-navy); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 768px) {
  .login-page {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .login-page__brand {
    padding: 20px 24px;
    gap: 16px;
  }

  .login-page__brand-body,
  .login-page__brand-meta { display: none; }

  .login-page__form {
    padding: 32px 24px;
    gap: 32px;
  }

  .login-page__btn,
  .login-page__toggle { min-height: 44px; }
}


/* ---------------------------------------------------------------------------
   Architectural Workspace · Document Set focus choreography
   - Focus dimming: with any card open, closed cards' mini stage tracks fade
     to the periphery (context stays readable, nothing shifts position).
   - Open animation: the expanded body eases in; the height expansion uses the
     modern ::details-content transition (browsers without support just snap).
--------------------------------------------------------------------------- */
.doc-flow-mini-track {
  transition: opacity 200ms ease;
}

.doc-flow-list:has(details[open]) details:not([open]) .doc-flow-mini-track {
  opacity: 0.35;
}

@media (prefers-reduced-motion: no-preference) {
  .doc-flow-body {
    animation: doc-flow-body-in 220ms ease-out;
  }

  details.doc-flow-item::details-content {
    transition: height 220ms ease, content-visibility 220ms allow-discrete;
    height: 0;
    overflow: clip;
  }

  details.doc-flow-item[open]::details-content {
    height: auto;
  }
}

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
}

@keyframes doc-flow-body-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Review-exchange ledger notes: collapsible revision/email comments reuse the
   same gentle open choreography as the Document Set items (fade + slide in,
   animated height via ::details-content). */
@media (prefers-reduced-motion: no-preference) {
  .ledger-note-body {
    animation: doc-flow-body-in 220ms ease-out;
  }

  details.ledger-note::details-content {
    transition: height 220ms ease, content-visibility 220ms allow-discrete;
    height: 0;
    overflow: clip;
  }

  details.ledger-note[open]::details-content {
    height: auto;
  }
}

/* ---------------------------------------------------------------------------
   Process pages · deep canvas
   Standard background for every Process::PageLayoutComponent page (the home
   opts out — it has its own identity). Approved 2026-06-11 on the
   Architectural Workspace: deep canvas with a light top gradient, settling
   into #dde4ec by ~720px (px stop so long pages keep the same depth).
   Flat depth, no texture, no shadows.
--------------------------------------------------------------------------- */
.process-canvas {
  background: linear-gradient(180deg, #eef2f7 0px, #e4eaf1 320px, #dde4ec 720px) no-repeat,
              #dde4ec;
}

.dark .process-canvas {
  background: linear-gradient(180deg, #131e30 0px, #101a2b 320px, #0d1626 720px) no-repeat,
              #0d1626;
}