/*
 * Fernway Grounds Co.: the office's look, on top of Filament's own styles.
 * Plain CSS, loaded after Filament's, so no build step is needed. Rowhouse
 * demo palette 5: coral for actions (Filament's primary, config/brand.php),
 * slate for structure and text, sky blue for links, focus and work in
 * progress. Top navigation over full-width pages, not Brightwater's sidebar.
 *
 * Contrast (WCAG AA): coral #C2452D with white 5.0:1; sky #0369A1 on white
 * 5.9:1; slate #334155 on white 10.4:1; coral #F57B61 on slate #0F172A 6.7:1.
 */

:root {
    --fw-coral: #C2452D;
    --fw-coral-soft: #FFF4F1;
    --fw-slate: #1E293B;
    --fw-slate-2: #334155;
    --fw-slate-3: #64748B;
    --fw-line: #E2E8F0;
    --fw-sky: #0EA5E9;
    --fw-sky-text: #0369A1;
    --fw-sky-soft: #E0F2FE;
    --fw-green: #15803D;
    --fw-green-soft: #DCFCE7;
    --fw-amber: #B45309;
    --fw-amber-soft: #FEF3C7;
    --fw-red: #B91C1C;
    --fw-red-soft: #FEE2E2;
    --fw-card: #FFFFFF;
    --rowhouse-navy: #1C2B45;
    --rowhouse-brass: #D4962F;
}

.dark {
    --fw-line: #334155;
    --fw-card: #0F172A;
    --fw-coral-soft: rgba(245, 123, 97, 0.12);
    --fw-sky-soft: rgba(56, 189, 248, 0.12);
    --fw-green-soft: rgba(74, 222, 128, 0.12);
    --fw-amber-soft: rgba(251, 191, 36, 0.12);
    --fw-red-soft: rgba(248, 113, 113, 0.14);
    --fw-sky-text: #7DD3FC;
    --fw-slate-3: #94A3B8;
}

[x-cloak] {
    display: none !important;
}

/* The top bar: slate, with a sky rule under it. */
.fi-topbar {
    border-bottom: 3px solid var(--fw-sky);
}

.fi-topbar nav,
.fi-topbar {
    background: var(--fw-slate);
}

.fi-topbar .fi-topbar-item-label,
.fi-topbar .fi-topbar-item-btn,
.fi-topbar .fi-icon-btn,
.fi-topbar .fi-dropdown-trigger {
    color: #E2E8F0;
}

.fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-btn {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 -3px 0 #F57B61;
}

.fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-label,
.fi-topbar .fi-topbar-item.fi-active .fi-icon {
    color: #FFFFFF;
}

/* Sign-in page: a coral line above the card. */
.fi-simple-main {
    border-top: 4px solid var(--fw-coral);
}

/* The logo: a fern in a coral disc, and the name in Manrope. */
.fw-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    line-height: 1;
}

.fw-logo-mark {
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
}

.fw-logo-disc { fill: #E85D42; }
.fw-logo-stem { stroke: #FFFFFF; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.fw-logo-leaf { fill: #FFFFFF; }

.fw-logo-words {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.fw-logo-name {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--fw-slate);
}

.fw-logo-sub {
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fw-coral);
}

.fi-topbar .fw-logo-name,
.dark .fw-logo-name { color: #FFFFFF; }
.fi-topbar .fw-logo-sub,
.dark .fw-logo-sub { color: #FCA38E; }

/* The demo's one line, shared by every Rowhouse demo (navy, the quote
   button in Rowhouse Systems' colors, brass focus ring). */
.fw-demo-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem 1rem;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    line-height: 1.35;
    text-align: center;
    color: #FFFFFF;
    background: var(--rowhouse-navy);
}

.fw-demo-strip a {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fw-demo-strip a:focus-visible {
    outline: 3px solid var(--rowhouse-brass);
    outline-offset: 2px;
}

.fw-demo-strip-short { display: none; }

@media (max-width: 1023px) {
    .fw-demo-strip-long { display: none; }
    .fw-demo-strip-short { display: inline; }
}

.fw-demo-strip a.fw-demo-strip-quote {
    display: inline-block;
    padding: 0.15rem 0.7rem;
    border: 1px solid #FFFFFF;
    border-radius: 6px;
    color: #FFFFFF;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.fw-demo-strip a.fw-demo-strip-quote:hover {
    color: var(--rowhouse-navy);
    background: #FFFFFF;
}

.fw-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Banners the kit adds (read-only mode, practice mode). */
.kit-banner {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border-left: 4px solid var(--fw-sky);
    background: var(--fw-sky-soft);
    color: var(--fw-slate);
    font-size: 0.875rem;
}

.dark .kit-banner { color: #F1F5F9; }

/* The demo's sign-in page: the sample people first, staff sign-in folded. */
.kit-demo-login { margin-top: 0.25rem; }
.kit-demo-login h2 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.25rem; }
.fw-demo-login-note { font-size: 0.8rem; opacity: 0.8; margin-bottom: 0.75rem; }
.kit-demo-login ul { display: grid; gap: 0.5rem; }

.kit-demo-login button {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.9rem;
    border-radius: 0.6rem;
    border: 1px solid var(--fw-line);
    cursor: pointer;
}

.fw-demo-who { font-size: 0.9rem; font-weight: 700; color: var(--fw-coral); }
.dark .fw-demo-who { color: #FCA38E; }
.fw-demo-what { font-size: 0.78rem; opacity: 0.85; }

.kit-demo-login button:hover,
.kit-demo-login button:focus-visible {
    border-color: var(--fw-coral);
    background: var(--fw-coral-soft);
    outline: none;
}

.fw-staff-sign-in { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--fw-line); }

.fw-staff-sign-in > summary {
    width: fit-content;
    margin: 0 auto;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.85rem;
    color: var(--fw-sky-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.fw-staff-sign-in > summary:focus-visible { outline: 2px solid var(--fw-sky); outline-offset: 2px; }
.fw-staff-sign-in[open] > summary { margin-bottom: 1rem; }

/* Before and after, in the history and the import (the kit's). */
.kit-diff { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.kit-diff th, .kit-diff td { padding: 0.375rem 0.5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--fw-line); }
.kit-diff td.kit-before, .kit-before { color: #9B2C2C; }
.kit-diff td.kit-after, .kit-after { color: #22543D; }
.dark .kit-diff td.kit-before, .dark .kit-before { color: #FEB2B2; }
.dark .kit-diff td.kit-after, .dark .kit-after { color: #9AE6B4; }
.kit-diff th { font-weight: 600; }

/* Shared bits. */
.fw-muted { color: var(--fw-slate-3); font-size: 0.875rem; }
.fw-block { display: block; }
.fw-link, .fw-link-button { color: var(--fw-sky-text); text-decoration: underline; text-underline-offset: 2px; font-size: 0.85rem; background: none; border: 0; padding: 0; cursor: pointer; }
.fw-link-button:focus-visible, .fw-link:focus-visible { outline: 2px solid var(--fw-sky); outline-offset: 2px; border-radius: 2px; }
.fw-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.fw-subhead { margin: 1rem 0 0.4rem; font-weight: 700; font-size: 0.9rem; }

.fw-pill { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-weight: 700; font-size: 0.8rem; }
.fw-pill.is-ok { background: var(--fw-green-soft); color: var(--fw-green); }
.fw-pill.is-low { background: var(--fw-amber-soft); color: var(--fw-amber); }
.fw-pill.is-loss { background: var(--fw-red-soft); color: var(--fw-red); }
.dark .fw-pill.is-ok { color: #86EFAC; }
.dark .fw-pill.is-low { color: #FCD34D; }
.dark .fw-pill.is-loss { color: #FCA5A5; }

/* "Try this first" (the pattern every Rowhouse demo shares). */
.fw-try {
    position: relative;
    padding: 1rem 1.25rem 1.1rem;
    border-radius: 0.9rem;
    background: var(--fw-coral-soft);
    border: 1px solid #FFC9BB;
}

.dark .fw-try { border-color: rgba(245, 123, 97, 0.35); }
.fw-try-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding-right: 2rem; margin-bottom: 0.75rem; }
.fw-try-head h2 { font-size: 1.05rem; font-weight: 800; }

.fw-try-close {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--fw-slate-2);
}

.fw-try-close:hover, .fw-try-close:focus-visible { background: rgba(0, 0, 0, 0.06); outline: 2px solid var(--fw-coral); }
.fw-try-steps { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.fw-try-step {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.15rem 0.6rem;
    height: 100%;
    padding: 0.7rem 0.8rem;
    border-radius: 0.7rem;
    background: var(--fw-card);
    border: 1px solid var(--fw-line);
    text-decoration: none;
}

.fw-try-step:hover, .fw-try-step:focus-visible { border-color: var(--fw-coral); outline: none; box-shadow: 0 0 0 2px rgba(194, 69, 45, 0.2); }

.fw-try-number {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--fw-coral);
    color: #FFFFFF;
    font-weight: 800;
}

.fw-try-step.is-done .fw-try-number { background: var(--fw-green); }
.fw-try-title { font-weight: 700; color: var(--fw-slate); }
.dark .fw-try-title { color: #F1F5F9; }
.fw-try-note { font-size: 0.82rem; color: var(--fw-slate-3); }

/* Today (dispatcher, account manager). */
.fw-today { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.fw-todo { display: grid; gap: 0.5rem; }
.fw-todo li { display: flex; align-items: center; gap: 0.75rem; }
.fw-todo-count { min-width: 2.25rem; text-align: center; padding: 0.15rem 0.4rem; border-radius: 0.5rem; background: var(--fw-coral); color: #FFFFFF; font-weight: 800; }
.fw-todo li.is-clear .fw-todo-count { background: var(--fw-line); color: var(--fw-slate-3); }
.fw-todo a { color: var(--fw-sky-text); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.fw-crew-progress { display: grid; gap: 0.55rem; }
.fw-crew-progress li { display: grid; grid-template-columns: 7rem 1fr auto; align-items: center; gap: 0.75rem; }
.fw-crew-name { font-weight: 700; }
.fw-progress { display: block; height: 0.6rem; border-radius: 999px; background: var(--fw-line); overflow: hidden; }
.fw-progress > span { display: block; height: 100%; background: var(--fw-green); }
.fw-under-list { display: grid; gap: 0.7rem; margin-bottom: 0.75rem; }
.fw-under-list a { color: var(--fw-slate); text-decoration: underline; text-underline-offset: 2px; margin-right: 0.4rem; }
.dark .fw-under-list a { color: #F1F5F9; }

/* Job costing. */
.fw-tiles { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.fw-tile {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border-radius: 0.8rem;
    background: var(--fw-card);
    border: 1px solid var(--fw-line);
}

.fw-tile.is-alert { border-color: #FCA5A5; background: var(--fw-red-soft); }
.fw-tile-label { font-size: 0.8rem; font-weight: 600; color: var(--fw-slate-3); text-transform: uppercase; letter-spacing: 0.04em; }
.fw-tile-figure { font-size: 1.75rem; font-weight: 800; color: var(--fw-slate); font-variant-numeric: tabular-nums; }
.dark .fw-tile-figure { color: #F8FAFC; }
.fw-tile-note { font-size: 0.82rem; color: var(--fw-slate-3); }
.fw-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; }
.fw-toolbar-spacer { flex: 1; }
.fw-select { display: grid; gap: 0.2rem; font-size: 0.8rem; font-weight: 600; }
.fw-select select { min-width: 14rem; padding: 0.45rem 0.6rem; border-radius: 0.5rem; border: 1px solid var(--fw-line); background: var(--fw-card); font-size: 0.9rem; }
.fw-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.fw-table-wrap { overflow-x: auto; border: 1px solid var(--fw-line); border-radius: 0.8rem; background: var(--fw-card); }
.fw-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.fw-table th, .fw-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--fw-line); text-align: left; vertical-align: top; }
.fw-table thead th { position: sticky; top: 0; background: var(--fw-card); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fw-slate-3); }
.fw-table thead button { font: inherit; color: inherit; text-transform: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fw-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fw-table tbody th a { color: var(--fw-slate); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.dark .fw-table tbody th a { color: #F1F5F9; }
.fw-table tr.is-under { background: var(--fw-red-soft); }
.fw-table .is-negative { color: var(--fw-red); font-weight: 700; }
.dark .fw-table .is-negative { color: #FCA5A5; }
.fw-why { max-width: 22rem; color: var(--fw-slate-2); }
.dark .fw-why { color: #CBD5E1; }

/* The board: crews down, days across. */
.fw-board-wrap { display: grid; gap: 1rem; }
.fw-board-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.fw-board-nav { display: flex; gap: 0.4rem; }
.fw-board-summary { font-size: 0.9rem; }
.fw-missed-link { margin-left: 0.5rem; color: var(--fw-red); font-weight: 700; text-decoration: underline; }
.fw-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.8rem; color: var(--fw-slate-3); }
.fw-legend li { display: inline-flex; align-items: center; gap: 0.3rem; }
.fw-dot { width: 0.75rem; height: 0.75rem; border-radius: 3px; border: 2px solid; }

.fw-board {
    display: grid;
    grid-template-columns: 9rem repeat(var(--fw-days), minmax(11.5rem, 1fr));
    overflow-x: auto;
    border: 1px solid var(--fw-line);
    border-radius: 0.8rem;
    background: var(--fw-line);
    gap: 1px;
}

.fw-board > * { background: var(--fw-card); }
.fw-board-corner, .fw-board-day { padding: 0.5rem 0.6rem; position: sticky; top: 0; z-index: 1; }
.fw-board-day { display: flex; gap: 0.4rem; align-items: baseline; font-weight: 700; }
.fw-board-day.is-today { background: var(--fw-sky-soft); box-shadow: inset 0 -3px 0 var(--fw-sky); }
.fw-board-date { font-weight: 500; font-size: 0.82rem; color: var(--fw-slate-3); }
.fw-board-crew { display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; padding: 0.6rem; position: sticky; left: 0; z-index: 1; }
.fw-board-cell { padding: 0.4rem; min-height: 4rem; }
.fw-board-cell.is-today { background: color-mix(in srgb, var(--fw-sky-soft) 45%, var(--fw-card)); }
.fw-cell-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-size: 0.72rem; color: var(--fw-slate-3); padding: 0 0.15rem 0.3rem; }
.fw-cards { display: grid; gap: 0.35rem; }
.fw-cards-row { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }

.fw-card {
    display: grid;
    gap: 0.1rem;
    padding: 0.4rem 0.5rem 0.45rem 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid var(--fw-line);
    border-left: 4px solid;
    background: var(--fw-card);
    font-size: 0.8rem;
}

.fw-card-site { font-weight: 700; color: var(--fw-slate); line-height: 1.25; text-decoration: none; }
.fw-card-site:hover, .fw-card-site:focus-visible { text-decoration: underline; }
.dark .fw-card-site { color: #F1F5F9; }
.fw-card-meta { color: var(--fw-slate-3); font-size: 0.75rem; }
.fw-card-status { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.fw-card-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.2rem; }

.fw-card-actions button {
    min-width: 1.75rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.35rem;
    border: 1px solid var(--fw-line);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--fw-slate-2);
    background: transparent;
    cursor: pointer;
}

.dark .fw-card-actions button { color: #CBD5E1; }
.fw-card-actions button:hover:not(:disabled), .fw-card-actions button:focus-visible { border-color: var(--fw-coral); color: var(--fw-coral); outline: none; }
.fw-card-actions button:disabled { opacity: 0.35; cursor: default; }

.fw-card.is-planned, .fw-dot.is-planned { border-left-color: #94A3B8; border-color: #94A3B8; }
.fw-card.is-planned { border-color: var(--fw-line); border-left-color: #94A3B8; }
.fw-card.is-planned .fw-card-status { color: var(--fw-slate-3); }
.fw-card.is-in-progress, .fw-dot.is-in-progress { border-left-color: var(--fw-sky); border-color: var(--fw-sky); }
.fw-card.is-in-progress { background: var(--fw-sky-soft); border-color: var(--fw-line); border-left-color: var(--fw-sky); }
.fw-card.is-in-progress .fw-card-status { color: var(--fw-sky-text); }
.fw-card.is-done, .fw-dot.is-done { border-left-color: var(--fw-green); border-color: var(--fw-green); }
.fw-card.is-done { border-color: var(--fw-line); border-left-color: var(--fw-green); }
.fw-card.is-done .fw-card-status { color: var(--fw-green); }
.fw-card.is-missed, .fw-dot.is-missed { border-left-color: var(--fw-red); border-color: var(--fw-red); }
.fw-card.is-missed { background: var(--fw-red-soft); border-color: var(--fw-line); border-left-color: var(--fw-red); }
.fw-card.is-missed .fw-card-status { color: var(--fw-red); }
.fw-card.is-skipped, .fw-dot.is-skipped { border-left-color: #CBD5E1; border-color: #CBD5E1; }
.fw-card.is-skipped { opacity: 0.7; border-color: var(--fw-line); border-left-color: #CBD5E1; }
.fw-unassigned h2 { font-weight: 700; margin-bottom: 0.5rem; }

/* Writing a report: the crew's side and the draft side by side. */
.fw-draft { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1100px) {
    .fw-draft { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
    .fw-draft-source { position: sticky; top: 5rem; }
}

.fw-draft-source, .fw-draft-form { display: grid; gap: 1rem; }
.fw-crew-note { font-size: 1.05rem; line-height: 1.5; font-style: italic; }
.fw-checklist { display: grid; gap: 0.3rem; }
.fw-checklist li.is-done span { color: var(--fw-green); font-weight: 800; }
.fw-checklist li.is-not-done { color: var(--fw-amber); }
.fw-warnings { display: grid; gap: 0.4rem; list-style: disc; padding-left: 1.2rem; }

/* Photos, in the office. */
.fw-photo-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.fw-photo { margin: 0; }
.fw-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.5rem; border: 1px solid var(--fw-line); }
.fw-photo figcaption { margin-top: 0.25rem; font-size: 0.8rem; color: var(--fw-slate-3); }

/* A visit report, as the office sees it (the client page uses crew.css). */
.fw-report { display: grid; gap: 1rem; max-width: 48rem; }
.fw-report h3 { font-weight: 800; font-size: 0.95rem; margin-bottom: 0.4rem; color: var(--fw-coral); }
.dark .fw-report h3 { color: #FCA38E; }
.fw-report-site { font-size: 0.85rem; color: var(--fw-slate-3); }
.fw-report-headline { font-size: 1.35rem; font-weight: 800; line-height: 1.25; }
.fw-report-meta { font-size: 0.85rem; color: var(--fw-slate-3); }
.fw-report-summary { font-size: 1rem; line-height: 1.55; }
.fw-report-list { display: grid; gap: 0.4rem; list-style: disc; padding-left: 1.2rem; line-height: 1.5; }
.fw-report-tag { display: inline-block; margin-left: 0.3rem; padding: 0 0.45rem; border-radius: 999px; background: var(--fw-amber-soft); color: var(--fw-amber); font-size: 0.75rem; font-weight: 700; }
.fw-report-photo-ref { color: var(--fw-slate-3); font-size: 0.85rem; }
.fw-report-foot { font-size: 0.85rem; color: var(--fw-slate-3); border-top: 1px solid var(--fw-line); padding-top: 0.75rem; }
.fw-report-signature { max-width: 14rem; margin-top: 0.5rem; background: #FFFFFF; border: 1px solid var(--fw-line); border-radius: 0.4rem; }