/*
 * 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.
 */

.project-budget-chart [role="button"] { cursor: pointer; }
.internal-badge { display: inline-block; margin-left: .35rem; padding: .1rem .4rem; border: 1px solid var(--color-stone-300, #d6d3d1); border-radius: .35rem; font-size: .7rem; font-weight: 500; line-height: 1.4; color: var(--color-teal-800, #115e59); background: var(--color-teal-50, #f0fdfa); vertical-align: middle; white-space: nowrap; }
.project-budget-chart [role="button"]:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }
.project-budget-bar { fill: currentColor; fill-opacity: .2; stroke: currentColor; stroke-opacity: .6; stroke-width: 1.5; }

.day-entries { display: flex; flex-direction: column; gap: 3px; }
.time-dialog { margin: auto; width: min(520px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain; }
.time-dialog::backdrop { background: rgb(0 0 0 / .3); }
@media (max-width: 639px) {
  .time-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); margin: auto auto .5rem; padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
}
.day-entry { padding: .65rem .75rem; border: 1px solid var(--color-stone-300, #d6d3d1); border-radius: .5rem; background: #fff; }
.day-entry:nth-child(even) { background: #edf6f3; }
.day-entry.day-entry-running { padding: 1rem; background: #d9eee7; box-shadow: inset 4px 0 0 var(--color-teal-800, #115e59); }
.day-entry-running .day-entry-layout { grid-template-columns: minmax(0, 1fr) 112px; }
.day-entry-running h2 { font-size: 1.125rem; }
.day-entry-running .day-entry-duration { font-size: 1.5rem; color: var(--color-teal-800, #115e59); padding-inline: 0; }
.day-entry-now { display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; font-size: .75rem; font-weight: 700; color: var(--color-teal-800, #115e59); }
.day-entry-running .day-entry-actions { justify-content: end; }
.day-entry-layout { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: .5rem; }
.day-entry-actions { display: grid; grid-template-columns: repeat(2, 44px); }
.day-entry-action { width: 44px; height: 44px; display: grid; place-items: center; border-radius: .4rem; cursor: pointer; }
.day-entry-action:disabled { opacity: .35; cursor: not-allowed; }
.day-entry-action:focus-visible { outline: 2px solid var(--color-teal-800, #115e59); outline-offset: -2px; }
.day-entry-action[aria-expanded="true"] { background: var(--color-teal-50, #f0fdfa); }
.day-entry-running-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; color: var(--color-teal-800, #115e59); flex: none; }
@media (hover: hover) {
  .day-entry-action:not(:disabled):hover { background: var(--color-stone-100, #f5f5f4); }
  .day-entry-hide:not(:disabled):hover { color: var(--color-red-800, #991b1b); }
}
@media (min-width: 640px) {
  .day-entry { padding: .6rem 1rem; }
  .day-entry-layout, .day-entry-running .day-entry-layout { grid-template-columns: minmax(0, 1fr) 176px; gap: 1rem; }
  .day-entry-actions { grid-template-columns: repeat(4, 44px); }
}
:root[data-theme="dark"] .day-entry { background: #102c30; }
:root[data-theme="dark"] .day-entry:nth-child(even) { background: #173a3c; }
:root[data-theme="dark"] .day-entry.day-entry-running { background: #174c46; }

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}
[hidden] { display: none !important; }

/* iOS WebKit adds native month-input padding outside width:100% (bug 301648).
   Keep decoration on the wrapper so the native picker has no extra width. */
.report-month-control { min-width: 0; }
.report-overview { max-width: 45.5rem; margin-inline: auto; }
@media (min-width: 1024px) {
  main.report-page { max-width: none; }
}
.report-month-input {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 44px;
  text-align: left;
  appearance: none;
}
.report-month-input:focus { outline: none; }
.report-month-input::-webkit-date-and-time-value { text-align: left; }

/* Keep the existing utility palette consistent across every screen. White button
   labels stay white; surfaces and strong button fills have separate dark colors. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-stone-50: #081d20;
  --color-stone-100: #18373b;
  --color-stone-200: #2c494d;
  --color-stone-300: #537074;
  --color-slate-500: #a4b9bc;
  --color-slate-600: #b9cbcd;
  --color-slate-700: #cfddde;
  --color-slate-900: #edf5f4;
  --color-teal-50: #123e3f;
  --color-teal-700: #83ddd0;
  --color-teal-800: #99e8db;
  --color-teal-900: #bbf1e7;
  --color-red-50: #40282a;
  --color-red-700: #ffb4ad;
  --color-red-800: #ffc7c1;
  --color-amber-50: #393323;
  --color-amber-900: #f4d795;
}
:root[data-theme="dark"] .bg-white { background-color: #102c30; }
:root[data-theme="dark"] .bg-teal-800 { background-color: #0f766e; }
@media (hover: hover) {
  :root[data-theme="dark"] .hover\:bg-teal-900:hover { background-color: #115e59; }
}

.concentration-layout { display: grid; align-items: center; gap: 1rem; }
.concentration-graphic { position: relative; min-width: 0; width: min(100%, 260px); margin: auto; }
.concentration-chart { display: block; width: 100%; overflow: visible; }
.concentration-slice { cursor: pointer; }
.concentration-slice:focus-visible { outline: none; stroke: var(--color-slate-900, #0f172a); stroke-width: 2; }
.concentration-center-value { font-size: 21px; font-weight: 600; fill: currentColor; }
.concentration-center-label { font-size: 9px; fill: currentColor; }
.concentration-tooltip { overflow-wrap: anywhere; position: absolute; z-index: 10; bottom: 0; left: 0; right: 0; }
.concentration-dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-right: 0.5rem; flex-shrink: 0; }
.concentration-legend { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.25rem; min-height: 44px; }
.concentration-legend:focus-visible { outline: 2px solid var(--color-teal-800, #115e59); }
.concentration-slice.concentration-muted { opacity: 0.5; }
.concentration-legend[aria-pressed="true"] { background: var(--color-stone-100, #f5f5f4); }
@media (min-width: 520px) { .concentration-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }

.catalog-input { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; border: 1px solid var(--color-stone-300, #d6d3d1); border-radius: .5rem; padding: .75rem; min-height: 44px; }
.catalog-form input[type="date"] { appearance: none; -webkit-appearance: none; }

.forecast-scroll { overflow-x: auto; isolation: isolate; }
.forecast-table { width: 100%; min-width: 1250px; border-collapse: separate; border-spacing: 0; font-size: .875rem; font-variant-numeric: tabular-nums; }
.forecast-table th, .forecast-table td { padding: .65rem; border-bottom: 1px solid var(--color-stone-200); text-align: right; min-width: 80px; }
.forecast-table tr > :first-child { position: sticky; left: 0; z-index: 1; width: 280px; min-width: 280px; max-width: 280px; text-align: left; background: var(--color-stone-50); overflow-wrap: anywhere; }
.forecast-table thead th { position: sticky; top: 0; z-index: 2; background: var(--color-stone-100); }
.forecast-table thead th:first-child { z-index: 3; background: var(--color-stone-100); }
.forecast-grouping { display: flex; align-items: center; min-height: 44px; color: var(--color-teal-800); text-decoration: underline; text-underline-offset: .2em; }
.forecast-month-heading { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; }
.forecast-table .forecast-navigation { width: 44px; min-width: 44px; padding: .65rem .25rem; }
.forecast-period-arrow { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 1.25rem; color: var(--color-teal-800); }
.forecast-period-arrow:hover, .forecast-period-arrow:focus-visible { background: var(--color-teal-50); border-radius: .5rem; }
.forecast-summary { background: var(--color-stone-50); }
.forecast-summary td, .forecast-table tfoot { font-weight: 600; }
.forecast-detail th { font-weight: 400; }
.forecast-toggle { display: flex; align-items: center; gap: .5rem; min-height: 44px; width: 100%; text-align: left; cursor: pointer; }
.forecast-expand-icon { font-size: 1.5rem; line-height: 1; }
.forecast-toggle:focus-visible { outline: 2px solid var(--color-teal-800); outline-offset: 2px; border-radius: .5rem; }
.forecast-cell { display: block; width: 100%; min-height: 44px; border: 1px dashed var(--color-stone-300); border-radius: .5rem; color: var(--color-teal-800); cursor: pointer; }
.forecast-cell:hover, .forecast-cell:focus-visible { background: var(--color-teal-50); outline: 2px solid var(--color-teal-800); }
.forecast-filled { border-style: solid; background: var(--color-teal-50); font-weight: 500; }
.forecast-budget-container { position: relative; }
.forecast-budget-renewing .forecast-budget-bar { margin-left: 22px; }
.forecast-budget-renewal { position: absolute; left: 0; bottom: -4px; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--color-teal-700); background: var(--color-stone-50); border-radius: 50%; cursor: help; }
.forecast-budget-renewal:focus-visible { outline: 2px solid var(--color-teal-800); outline-offset: 2px; }
.forecast-budget-gauge { margin-top: .2rem; font-size: .75rem; font-weight: 400; }
.forecast-budget-gauge:focus-visible { outline: 2px solid var(--color-teal-800); outline-offset: 3px; border-radius: .25rem; }
.forecast-budget-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .4rem; }
.forecast-budget-caption > span { white-space: nowrap; }
.forecast-budget-balance { color: var(--color-teal-800); }
.forecast-budget-exceeded .forecast-budget-balance { color: var(--color-red-800); font-weight: 600; }
.forecast-budget-bar { position: relative; margin-top: .25rem; }
.forecast-budget-accrued { position: absolute; bottom: -3px; left: 0; width: 12px; height: 11px; transform: translateX(-50%); cursor: help; }
.forecast-budget-accrued::before { content: ""; position: absolute; left: 5px; height: 100%; width: 2px; background: var(--color-slate-900); box-shadow: 0 0 0 1px var(--color-stone-50); }
.forecast-budget-track { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--color-stone-200); }
.forecast-budget-actual { background: var(--color-teal-700); }
.forecast-budget-forecast { background: #d97706; }
.forecast-budget-excess { background: #dc2626; border-left: 2px solid var(--color-stone-50); box-sizing: border-box; }
.forecast-subtotal { font-weight: 600; background: var(--color-teal-50); color: var(--color-teal-900); }
.forecast-table .forecast-subtotal > :first-child { background: var(--color-teal-50); }
.forecast-table .forecast-add { position: static; text-align: left; background: transparent; }
.forecast-add-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; width: min(600px, calc(100vw - 5rem)); padding: .5rem; }
.forecast-add-form select { flex: 1; min-width: 140px; }
.forecast-dialog { margin: auto; width: min(840px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; }
.forecast-dialog::backdrop { background: rgb(0 0 0 / .45); }
@media (max-width: 600px) {
  .forecast-table tr > :first-child { width: 180px; min-width: 180px; max-width: 180px; }
}

.report-comparison { position: relative; isolation: isolate; overflow: hidden; display: block; width: 100%; min-width: 72px; min-height: 48px; padding: .3rem .25rem; border-radius: .35rem; cursor: zoom-in; text-align: right; }
.report-comparison:focus-visible { outline: 2px solid var(--color-teal-800); outline-offset: 2px; }
.report-comparison:hover { background: var(--color-stone-100); }
.report-comparison-actual { position: relative; font-weight: 600; }
.report-comparison-forecast { position: relative; display: block; margin-top: .25rem; font-size: .75rem; font-weight: 400; color: var(--color-slate-500); }
.report-comparison-large { text-align: left; min-width: 0; min-height: 76px; }
.report-comparison-large .report-comparison-actual { font-size: 1.5rem; color: var(--color-teal-900); }
.report-trend-graph { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.report-trend-actual { color: #0d9488; }
.report-trend-forecast { color: #d97706; }
.report-trend-area { fill: currentColor; opacity: .2; }
.report-trend-ahead { color: #16a34a; }
.report-trend-behind { color: #ea580c; }
.report-trend-line { fill: none; stroke: currentColor; stroke-width: 1.3; opacity: .6; }
.report-trend-line.report-trend-forecast { stroke-dasharray: 4 3; }
.report-trend-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .75rem; color: var(--color-slate-500); }
.report-trend-actual-key::before, .report-trend-forecast-key::before { content: ''; display: inline-block; width: 1rem; margin-right: .35rem; vertical-align: middle; border-top: 2px solid #0d9488; }
.report-trend-forecast-key::before { border-color: #d97706; border-top-style: dashed; }
.report-trend-dialog { margin: auto; width: min(720px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; }
.report-trend-dialog::backdrop { background: rgb(0 0 0 / .45); }
.report-trend-expanded { display: block; width: 100%; height: auto; }
.report-trend-expanded text { fill: currentColor; font-size: 12px; }
.report-trend-expanded .report-trend-line { stroke-width: 2; opacity: 1; }
.report-trend-grid { stroke: currentColor; opacity: .15; }

.report-trend-ahead-key::before, .report-trend-behind-key::before { content: ""; display: inline-block; width: .75rem; height: .6rem; margin-right: .35rem; background: #16a34a; opacity: .6; }
.report-trend-behind-key::before { background: #ea580c; }

.forecast-dialog-layout { display: grid; gap: 1.25rem; }
.forecast-dialog-layout > * { min-width: 0; }
.forecast-recent { border-top: 1px solid var(--color-stone-200); padding-top: 1rem; }
.forecast-recent-table { width: 100%; margin-top: .75rem; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.forecast-recent-table th, .forecast-recent-table td { padding: .5rem .3rem; border-bottom: 1px solid var(--color-stone-200); text-align: right; }
.forecast-recent-table th:first-child { text-align: left; overflow-wrap: anywhere; font-weight: 500; }
.forecast-recent-table td { white-space: nowrap; }
.forecast-recent-table tfoot { font-weight: 600; }
@media (min-width: 800px) {
  .forecast-dialog-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .forecast-recent { border-top: 0; border-left: 1px solid var(--color-stone-200); padding-top: 0; padding-left: 1.25rem; }
}

.forecast-summary > th, .forecast-summary > td { padding-top: .3rem; padding-bottom: .3rem; }
.forecast-project-client { display: block; font-size: .75rem; font-weight: 400; color: var(--color-slate-600); }
.forecast-budget-reference { margin-top: .15rem; font-size: .75rem; font-weight: 400; }
.forecast-detail > th, .forecast-detail > td { padding-top: .25rem; padding-bottom: .25rem; }

/* A persistent environment cue with its own space, including on narrow screens. */
.environment-banner { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 28px; padding: .25rem 1rem; border-bottom: 1px solid #d97706; background: #fef3c7; color: #78350f; font-size: .75rem; font-weight: 600; line-height: 1.25; letter-spacing: .025em; text-align: center; overflow-wrap: anywhere; }
.environment-banner-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #b45309; }
:root[data-theme="dark"] .environment-banner { border-color: #a16207; background: #422006; color: #fde68a; }
:root[data-theme="dark"] .environment-banner-dot { background: #fbbf24; }
@media print { .environment-banner { position: static; } }

/* Incoming time has its own visual identity, without looking disabled or broken. */
article.source-entry { background: #f0f7f5; border-color: #b8d4cd; box-shadow: inset 3px 0 0 #508b7e; }
.entry-source-line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .65rem; }
.entry-source-badge { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .25rem .4rem; max-width: 100%; padding: .15rem .4rem; border: 1px solid #b8d4cd; border-radius: .35rem; background: #e0eeea; color: #245c50; font-size: .7rem; font-weight: 500; line-height: 1.4; vertical-align: middle; }
.entry-source-icon { width: 15px; height: 15px; flex: none; }
.entry-source-name { min-width: 0; overflow-wrap: anywhere; }
.entry-source-status { border-left: 1px solid #91b8ad; padding-left: .4rem; white-space: nowrap; font-weight: 600; }
.source-entry[data-shared-entry] { padding-inline: .75rem; }
:root[data-theme="dark"] article.source-entry { background: #153b39; border-color: #3c6963; box-shadow: inset 3px 0 0 #74ae9e; }
:root[data-theme="dark"] .entry-source-badge { background: #214c45; border-color: #4f7b70; color: #d2eee4; }
:root[data-theme="dark"] .entry-source-status { border-color: #6c998b; }

/* Disclosure contents must not resize columns and rewrap rows above the click. */
.harvest-review-table { table-layout: fixed; min-width: 40rem; }
.harvest-review-choice { width: 40%; }
.harvest-review-person, .harvest-review-hours { width: 7rem; }
.harvest-review-table td { overflow-wrap: anywhere; }

/* Move individual cells: Safari paints sticky first columns above transformed
   row groups. Keeping all header cells in the table's stacking context avoids it. */
[data-controller~="sticky-table"] > thead > tr > th {
  position: relative; z-index: 5; background: var(--color-stone-50);
  transform: translateY(var(--table-header-offset, 0px));
}
.forecast-table[data-controller~="sticky-table"] > thead > tr > th:first-child { position: sticky; left: 0; z-index: 6; }
[data-controller~="sticky-table"] > thead.table-header-floating > tr > th { box-shadow: 0 2px 3px rgb(0 0 0 / .12); }
@media print {
  [data-controller~="sticky-table"] > thead > tr > th { transform: none !important; box-shadow: none !important; }
}