/* ============================================================ Arbah v2 — DailyReport surface (Lane D) Scoped restyle of the existing Daily Site Report DOM under .arbah-v2. Legacy AND v1 paint stay byte-identical when the flag is off — nothing here applies unless carries .arbah-v2. Hooks targeted (all already in src/pages/DailyReport.js): .daily-report — page root .daily-report-section — each card section (weather/crew/work/etc.) .daily-report-meta-label — uppercase eyebrow label (weather, crew) .daily-report-section-label — section title (workDone) Plus the print-button + picker controls inside .daily-report (Tailwind-only chrome targeted via .arbah-v2 .daily-report ancestor specificity). Print stylesheets (src/design/print.css + src/pages/PrintReports.css) are intentionally NOT touched — per protocol SPEC. The .print:hidden utility on picker chrome flows through unchanged; the .hidden.print:block "print header" remains styled by the print stylesheet. !important policy: 1 use, scoped to defeating the inline style="background:#0B2545" on the PageHeader print button (the only protocol-allowed escalation: "!important reserved for defeating inline style= only"). All other rules win via the .arbah-v2 ancestor chain over the page's Tailwind utilities (0,1,0) and inline-conditional severity-pill compounds. RTL: logical-prop padding throughout. One scoped block flips the sub-icon direction inside the print button. ============================================================ */ /* -- Page shell -- */ /* Background reads through from the .app-shell sunken canvas. The page sets type + ink only. */ .arbah-v2 .daily-report { font-family: var(--arbah-v2-font-sans); color: var(--arbah-v2-ink); } /* -- Print button (PageHeader action) -- */ /* The page DOM uses an inline style=background:#0B2545. v2 overrides via ancestor specificity to .arbah-v2-brand (same navy family). */ .arbah-v2 .daily-report button[onclick*="print"], .arbah-v2 .daily-report .page-header button[type="button"] { background: var(--arbah-v2-brand) !important; /* defeat inline style only */ border-radius: var(--arbah-v2-radius-md); font-family: var(--arbah-v2-font-sans); font-weight: 600; } /* -- Picker row (project select + date input) -- */ /* The Tailwind picker uses .border-gray-300 + .rounded-sm; lift to v2 borders + radius. Same shape as the Reports hub filter chrome. */ .arbah-v2 .daily-report select, .arbah-v2 .daily-report input[type="date"] { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-md); color: var(--arbah-v2-ink); font-family: var(--arbah-v2-font-sans); font-size: 13.5px; padding-block: 8px; padding-inline: 12px; transition: border-color 120ms ease, box-shadow 120ms ease; } .arbah-v2 .daily-report select:focus, .arbah-v2 .daily-report input[type="date"]:focus { outline: none; border-color: var(--arbah-v2-brand); box-shadow: 0 0 0 3px rgba(16, 42, 67, .12); } /* Picker labels above selects. */ .arbah-v2 .daily-report .text-sm.text-gray-600 { color: var(--arbah-v2-ink-muted); } /* -- Section cards (weather / crew / work / photos / safety / toolbox) -- */ /* All sections share the .bg-white.border.border-gray-200.rounded-xl Tailwind compound. The named hook on the weather/crew/workDone sections is .daily-report-section; for photos/safety/toolbox the source uses the same Tailwind compound without a named hook. Style both reliably via two paths. */ .arbah-v2 .daily-report .daily-report-section, .arbah-v2 .daily-report > .grid > .bg-white, .arbah-v2 .daily-report > .bg-white { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-lg); box-shadow: var(--arbah-v2-shadow-sm); } /* Meta-label (eyebrow, weather/crew). */ .arbah-v2 .daily-report .daily-report-meta-label { color: var(--arbah-v2-ink-muted); font-family: var(--arbah-v2-font-mono); letter-spacing: 0.06em; } /* Section-label (eyebrow, work done). */ .arbah-v2 .daily-report .daily-report-section-label { color: var(--arbah-v2-ink-muted); font-family: var(--arbah-v2-font-mono); letter-spacing: 0.06em; } /* Section body type — base ink. */ .arbah-v2 .daily-report .daily-report-section .text-base.text-gray-900, .arbah-v2 .daily-report .daily-report-section .text-sm.text-gray-900 { color: var(--arbah-v2-ink); } /* Empty / no-data muted hints. */ .arbah-v2 .daily-report .text-gray-400 { color: var(--arbah-v2-ink-subtle); } /* -- Photos grid -- */ /* Each photo thumb is wrapped in a .bg-gray-100.rounded-lg. Lift to v2 surface-raised and the v2 radius. */ .arbah-v2 .daily-report .bg-gray-100.rounded-lg { background: var(--arbah-v2-surface-raised); border-radius: var(--arbah-v2-radius-md); } /* -- Incident severity chip -- */ /* The page renders an inline-conditional class compound for .severity = critical / major / minor / near_miss. Lift each tone to the v2 chip token pairs. */ .arbah-v2 .daily-report .bg-red-50.text-red-700 { background: var(--arbah-v2-danger-soft); color: var(--arbah-v2-danger); border-color: transparent; border-radius: 999px; } .arbah-v2 .daily-report .bg-orange-50.text-orange-700 { background: var(--arbah-v2-warning-soft); color: var(--arbah-v2-warning); border-color: transparent; border-radius: 999px; } .arbah-v2 .daily-report .bg-blue-50.text-blue-700 { background: var(--arbah-v2-info-soft); color: var(--arbah-v2-info); border-color: transparent; border-radius: 999px; } .arbah-v2 .daily-report .bg-yellow-50.text-yellow-700 { background: var(--arbah-v2-warning-soft); color: var(--arbah-v2-warning); border-color: transparent; border-radius: 999px; } /* -- List items (incidents / toolbox) -- */ /* Truncated title strings get v2 ink; sub-meta gets ink-muted. */ .arbah-v2 .daily-report li .text-gray-900 { color: var(--arbah-v2-ink); } .arbah-v2 .daily-report li .text-gray-500 { color: var(--arbah-v2-ink-muted); } /* List dividers — soften from gray-100 to v2 border. */ .arbah-v2 .daily-report li.border-b.border-gray-100 { border-bottom-color: var(--arbah-v2-border); } /* Section card title (Photos / Incidents / Toolbox headers). */ .arbah-v2 .daily-report .text-sm.font-semibold.text-gray-900 { color: var(--arbah-v2-ink); font-family: var(--arbah-v2-font-sans); } /* Error banner */ .arbah-v2 .daily-report .border-red-200.bg-red-50 { background: var(--arbah-v2-danger-soft); border-color: var(--arbah-v2-danger); color: var(--arbah-v2-danger); border-radius: var(--arbah-v2-radius-md); } /* Author footer (small muted) */ .arbah-v2 .daily-report .text-xs.text-gray-500 { color: var(--arbah-v2-ink-muted); font-family: var(--arbah-v2-font-mono); letter-spacing: 0.02em; } /* -- Mobile bump -- */ @media (max-width: 640px) { .arbah-v2 .daily-report .daily-report-section { padding: 14px; } }