/* Alva - application domain styles.
   Section map:
   1. Foundation and utilities
   2. Shell: skip link only
   3. Shared page elements: Flare composition only
   4. Task and assignee assignment
   5. Sprint planning
   6. Projects
   7. Capacity: heat scale
   8. Calendars and work schedule
   9. Analytics and risk bell
   10. Gantt: documented Flare hooks and variables only
   11. Flare point overrides, touch and mobile rules

   Audit rule: a block stays here only when it is Alva domain styling or a documented Flare
   hook/token. A Flare component is never restyled into a second copy, and markup that Flare
   already provides (tables, tabs, panels, lists, drawers, alerts, empty states, skeletons,
   calendars, WBS, the task tree, the capacity matrix) is not reimplemented. The declared domain
   exceptions are the heat scale, the calendar day states and the Gantt row header. */

/* 1. Foundation and utilities */
:root{--alva-font:Inter,"Segoe UI",system-ui,sans-serif;--alva-primary:#0037b0;--alva-primary-container:#1d4ed8;--alva-primary-hover:#1e40af;--alva-secondary:#3755c3;--alva-tertiary:#5311bc;--alva-surface:#f8f9ff;--alva-surface-lowest:#ffffff;--alva-surface-container:#e5eeff;--alva-surface-high:#dce9ff;--alva-outline:#c4c5d7;--alva-outline-strong:#747686;--alva-on-surface:#0b1c30;--alva-on-surface-variant:#434655;--alva-critical:#ef4444;--alva-warning:#f59e0b;--alva-ok:#10b981;--alva-role:#8b5cf6;--alva-radius-sm:6px;--alva-radius-md:8px;--alva-row-height:34px;--flare-font-family:var(--alva-font)}
html,body{margin:0;min-height:100%;font-family:var(--alva-font);background:var(--flare-color-surface,var(--alva-surface));color:var(--flare-color-on-surface,var(--alva-on-surface));-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
.skip-link{position:fixed;top:-6rem;left:1rem;z-index:100000;padding:1rem;background:var(--flare-color-surface,#fff)}.skip-link:focus{top:1rem}
#flare-splash{min-height:100dvh;display:grid;place-content:center;background:#f8fafc;color:#1e293b}#blazor-error-ui{display:none;position:fixed;bottom:0;padding:1rem;background:#f9dedc;color:#410e0b;width:100%;z-index:100000}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}
.alva-num{font-variant-numeric:tabular-nums}

/* 2. Shell: the app bar and navigation are FlareLayoutAppBar/FlareNavMenu; only the skip link remains. */

/* 3. Shared page elements are Flare components: FlareCard, FlareTabs, FlareStack, FlareGrid and
   FlareList. Only page composition stays in markup; no panel, toolbar or card surface is defined
   here. */

/* 4. Task list: the tree is a FlareDataGrid tree. Only the row state tints of the page remain. */
.alva-task-row--context{opacity:.72}
.alva-task-row--new{background:var(--flare-color-surface-container-low,#eff4ff)}

/* 5. Sprint planning: FlareCard, FlareGrid, FlareStack, FlareDragContext, FlareDropZone and
   FlareDraggable compose the board. No page-specific board, pool or card surface is defined here. */

/* 6. Projects: only page layout; the WBS is a FlareDataGrid tree. */

/* 7. Capacity: FlareDataGrid wrapper; only the heat scale (coloring and legend) is domain. */
.alva-heat-cell{padding:6px 8px;border:1px solid transparent;border-radius:4px}
.alva-heat--under{background:var(--flare-color-info-container)}
.alva-heat--balance{background:var(--flare-color-success-container)}
.alva-heat--tension{background:var(--flare-color-warning-container)}
.alva-heat--critical{background:var(--flare-color-error-container)}
.alva-heat-cell.alva-heat--critical{border-color:var(--alva-critical-border);color:var(--alva-critical-text)}
.alva-heat--empty{background:var(--flare-color-surface-container);color:var(--flare-color-on-surface-variant)}
.alva-heat--flag{box-shadow:inset 0 0 0 2px var(--alva-critical-text)}

/* 8. Calendars and work schedule */
/* TeamCalendar is a FlareCalendar; only the domain day-state colors and spacing remain. */
.alva-calendar-day{padding:2px;border-radius:4px}
.alva-calendar-day--off{background:var(--alva-subtle);color:var(--flare-color-on-surface-variant,var(--alva-on-surface-variant))}
.alva-calendar-day--out{opacity:.5}
.alva-calendar-day--absence{background:var(--alva-role-subtle)}
.alva-calendar-day--over{background:var(--alva-critical-subtle);box-shadow:inset 0 0 0 1px var(--alva-critical-border)}
.alva-calendar-day--today{outline:2px solid var(--flare-color-primary,var(--alva-primary));outline-offset:-2px}
/* 9. Analytics and risk bell: FlareCard, FlareAccordion and FlarePopover own the surfaces. */

/* 10. Gantt: FlareGantt owns the chart. Colors of bars, regions, cells and markers are theme
   tokens in Alva.Theme.Alva (--flare-gantt-* and flare-gantt--kind-*); only the row header
   composition, the focus row and the chart height are application rules. */
.alva-gantt{--flare-gantt-max-height:70vh}
.alva-gantt-row{display:flex;flex-direction:column;min-width:0;line-height:1.2;padding:3px 6px;box-sizing:border-box}
.alva-gantt-row__title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--flare-color-on-surface);font-weight:600;text-decoration:none}
.alva-gantt-row__title:hover,.alva-gantt-row__title:focus-visible{text-decoration:underline}
.alva-gantt-row__meta{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;color:var(--flare-color-on-surface-variant)}
.alva-gantt-row--closed .alva-gantt-row__title{color:var(--flare-color-on-surface-variant);text-decoration:line-through}
.alva-gantt-row--fixed{box-shadow:inset 2px 0 0 var(--flare-color-primary)}
.alva-gantt-row--skill{box-shadow:inset 2px 0 0 var(--alva-warning-text)}
.alva-gantt-row__skill{display:inline-flex;align-items:center;color:var(--alva-warning-text)}
.alva-gantt-row__fixed{display:inline-flex;align-items:center;color:var(--flare-color-primary)}
.alva-gantt-row--fixed .alva-gantt-row__title{color:var(--flare-color-primary)}
.alva-gantt-row--draggable{cursor:grab}
.alva-gantt-row:has(.alva-gantt-row__body){flex-direction:row;align-items:center;gap:.25rem}
.alva-gantt-row__body{display:flex;flex-direction:column;min-width:0;flex:1}
.alva-gantt-row--focus .alva-gantt-row__title{color:var(--flare-color-primary)}
.alva-gantt-row--person{background:var(--flare-color-surface-container-low);--flare-gantt-side-bg:var(--flare-color-surface-container-low)}
.alva-gantt-row--group{background:var(--flare-color-surface-container);--flare-gantt-side-bg:var(--flare-color-surface-container)}
.alva-gantt-row--selected{background:color-mix(in srgb,var(--flare-color-primary) 16%,transparent);--flare-gantt-side-bg:color-mix(in srgb,var(--flare-color-primary) 16%,transparent)}
.alva-gantt-row--selected .alva-gantt-row__title{color:var(--flare-color-primary)}
.alva-gantt .alva-gantt-row--focus{background:color-mix(in srgb,var(--flare-color-primary) 14%,transparent);--flare-gantt-side-bg:color-mix(in srgb,var(--flare-color-primary) 14%,transparent)}
.alva-gantt-row--group .alva-gantt-row__title{text-transform:uppercase;font-size:11px;letter-spacing:.04em;color:var(--flare-color-primary)}
.alva-gantt-row--role .alva-gantt-row__title{color:var(--flare-color-error)}
.alva-gantt-row--pool .alva-gantt-row__title{color:var(--flare-color-on-surface-variant)}

/* 11. Flare overrides, touch and mobile rules */
/* Point overrides for Flare that the theme has no token for. alva.css holds only theme variables;
   html strengthens the selector regardless of stylesheet load order. */
/* DataGrid row height and header density are an application-wide density choice; Flare has no
   token for them. The grid itself still draws the columns, tree and grouping. */
html .flare-theme-alva .flare-datagrid{--flare-state-hover-layer:var(--alva-hover);--flare-stripe-bg:var(--alva-subtle)}
html .flare-theme-alva .flare-datagrid:not(.flare-datagrid--stacked) .flare-datagrid__row{height:34px}
html .flare-theme-alva .flare-datagrid:not(.flare-datagrid--stacked) .flare-datagrid__th{height:34px;padding:0 8px;background:var(--alva-subtle);color:var(--flare-color-on-surface-variant);font-size:11px;font-weight:600;line-height:14px;letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid var(--alva-border)}
html .flare-theme-alva .flare-datagrid__td{padding:4px 8px}
/* Alva navigation group labels and separators are app structure, not a Flare component. */
html .flare-theme-alva .flare-progress{--flare-color-secondary-container:var(--flare-color-surface-container)}
html .flare-theme-alva .flare-alert--warning{background:var(--alva-warning-bg);color:var(--alva-warning-text)}
html .flare-theme-alva .flare-alert--error{background:var(--alva-critical-bg);color:var(--alva-critical-text)}
/* Stock amber #F59E0B on white does not reach 4.5:1. The semantic Alva token is
   darkened in the light theme and lightened in the dark theme, so warnings read well everywhere. */
html .flare-theme-alva .flare-color-warning{--fc-main:var(--alva-warning-text)}
/* The selected list row sets a contrasting content color. Nested text and links
   inherit it: gray and primary lost contrast on the strong selected-state background. */
html .flare-theme-alva .flare-list-item--selected .flare-color-on-surface,
html .flare-theme-alva .flare-list-item--selected .flare-color-on-surface-variant{color:inherit}
html .flare-theme-alva .flare-list-item--selected .flare-link{color:inherit}
html .flare-theme-alva .alva-num,html .flare-theme-alva td,html .flare-theme-alva th{font-variant-numeric:tabular-nums}

/* On a touch screen targets are at least 44px, text is no smaller than 12px and fields are 16px
   so iOS does not zoom the page. Desktop density is unchanged: the rules are inside media queries only. */
@media (pointer:coarse){
  .flare-btn,.flare-icon-button,.flare-chip,.flare-tab,.flare-menu-item,.flare-bottom-nav-item,.flare-nav-link{min-height:44px}
  .flare-btn--icon-only,.flare-icon-button{min-width:44px}
}
@media(max-width:767px){
  .flare-chip{font-size:12px;line-height:16px;padding:3px 7px}
  input,select,textarea{font-size:16px}
}