/* file: src/ui/app-theme.css — shared visual system; feature layout stays in its module. */
:root {
  --ink: #192e45;
  --muted: #607388;
  --paper: #f2f5f8;
  --line: #dce4eb;
  --navy: #173b66;
  --blue: #2463a5;
  --mint: #e7f4ef;
  --mint-ink: #176255;
  --surface-radius: 20px;
  --control-radius: 12px;
  --surface-shadow: 0 3px 16px #173b6606;
}
body { background: var(--paper); -webkit-font-smoothing: antialiased; }
.tracker-shell { background: var(--paper); }
.display-face, .metric-value, .chart-number, .worker-home-heading h2,
.worker-past-hours-dialog h2, #header-weekly-hours #weekly-pay-value {
  font-family: "Work Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -.035em;
}
h2 { line-height: 1.25; }
button, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button { transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
:where(button, input, select, textarea, summary, a):focus-visible {
  outline: 3px solid #44a99b;
  outline-offset: 3px;
}
:where(button, summary) { touch-action: manipulation; }
/* A compact brand band anchors every screen. */
.canva-header { background: #173b66 !important; border-color: #173b66 !important; }
.canva-header > div { padding-block: 1.25rem; }
.canva-header [data-template-id="page-title"] { color: #fff !important; font-size: 28px !important; }
.canva-header [data-template-id="page-subtitle"] { color: #d5e3ef !important; font-size: 13px !important; margin-top: 2px; }
.header-brand-title { gap: .75rem; }
.header-clock-mark { width: 46px; height: 46px; border-radius: 14px; border-color: #ffffff25; background: #ffffff12; color: #b9e9dc; }
#user-name { margin-left: 3.65rem; background: #ffffff12; color: #fff; border-color: #ffffff25; }
.header-actions-cluster:empty { display: none; }
/* One surface treatment for worker, company, hours and settings. */
.worker-home-panel, #calendar-section, .summary-card, .entry-card,
#profile-tab-panel, #company-tab-panel, .company-card, #account-role-setup,
#schedule-tab-panel > section, #reports-tab-panel > section {
  border-color: var(--line);
  border-radius: var(--surface-radius);
  box-shadow: var(--surface-shadow);
}
.panel-shadow { box-shadow: var(--surface-shadow); }
.worker-home-panel, #calendar-section, #profile-tab-panel, #company-tab-panel { padding: 1.5rem; }
.worker-dashboard-cards { gap: 1.25rem; }
.worker-eyebrow, .company-eyebrow { color: var(--muted); font-size: .7rem; letter-spacing: .12em; }
.worker-home-heading h2 { font-size: 1.65rem; margin-top: .25rem; }
.worker-home-heading { align-items: center; }
#worker-today-date { margin-top: .35rem; }
.worker-home-panel button, #company-tab-panel button, #company-dashboard button,
#worker-company-hours button, .company-weekly-dialog button,
.worker-past-hours-dialog button { border-radius: var(--control-radius); min-height: 48px; font-weight: 600; }
.worker-home-heading button { background: #f5f8fb; border-color: var(--line); color: var(--navy); }
#worker-simple-controls { margin-top: 1.25rem; padding: 1.1rem; border-color: #d5e7e1; background: #f0f8f5; border-radius: 16px; }
#worker-simple-controls .worker-work-buttons button { background: #176255; border: 1px solid #176255; border-radius: var(--control-radius); min-height: 56px; box-shadow: 0 3px 8px #17625516; }
#worker-simple-controls .worker-work-buttons button:hover:not(:disabled) { background: #125344; }
.worker-shift-badge { background: #e0ebe6; color: #285b4c; font-weight: 600; }
#worker-simple-shift-state { line-height: 1.55; }
.worker-today-route { margin-top: 1.25rem; padding-top: 1.25rem; border-color: var(--line); }
.worker-route-heading h3 { font-size: 1.1rem; font-weight: 700; }
#worker-personal-jobs > summary { border-radius: var(--control-radius); min-height: 52px; font-weight: 600; }
.worker-jobs-empty { text-align: center; padding: 1.25rem .5rem .5rem; font-size: .85rem; }
.worker-assigned-job { padding-block: 1.15rem; }
.worker-stop-order { border-radius: 10px; background: #edf2f8; }
/* Shared field rhythm; checkboxes, ranges, file inputs and compact calendar cells retain their own sizing. */
#app-main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
#app-main select, #app-main textarea,
.worker-past-hours-dialog input {
  border: 1px solid #cbd7e2; border-radius: var(--control-radius);
  background: #fff; color: var(--ink); min-height: 48px; padding: .7rem .8rem;
  font-size: 16px; box-shadow: 0 1px 2px #173b6604;
}
#app-main input:disabled, #app-main select:disabled { background: #f2f5f8; }
#app-main input::placeholder, #app-main textarea::placeholder { color: #728398; }
#app-main input[type=checkbox] { accent-color: #176255; }
#app-main input[type=file] { max-width: 100%; font-size: .85rem; }
#app-main input[type=file]::file-selector-button { min-height: 44px; padding: .6rem .8rem; margin-right: .65rem; border: 1px solid #cbd7e2; border-radius: 10px; background: #edf2f8; color: #173b66; font: 600 .85rem "Work Sans", sans-serif; cursor: pointer; }
#profile-form fieldset { background: #f8fafc; border-radius: 16px; border-color: var(--line); padding: 1.25rem; }
#profile-form legend { font-size: .9rem; color: var(--ink); }
#profile-form { max-width: 48rem; }
#profile-form > div:last-child { padding-top: .75rem; }
#save-profile { min-height: 48px; border-radius: var(--control-radius); }
.job-row { border-color: var(--line); border-radius: 16px; background: #f8fafc; }
.company-auto-send, .company-week-export { border-color: var(--line); border-radius: 16px; background: #f8fafc; }
/* Navigation shares one clear selected state. */
#app-tabs { border: 1px solid var(--line); border-radius: 14px; padding: .3rem; background: #e9eff4; gap: .25rem; }
#app-tabs .app-tab { border: 0; border-radius: 10px; color: #53687f; min-height: 44px; flex: 1; }
#app-tabs .app-tab[aria-selected="true"] { background: #fff; color: var(--navy); box-shadow: 0 2px 5px #173b6610; }
#company-dashboard .company-subtabs { border-bottom-color: var(--line); gap: .3rem; }
#company-dashboard .company-subtabs button { border-radius: 10px 10px 0 0; }
#company-dashboard .company-subtabs button[aria-selected="true"] { background: #edf4f8; border-bottom-color: #176255; color: #173b66; }
/* Calendar states preserve their meaning without competing with shift actions. */
.calendar-day { border-radius: 10px; border-color: #e1e8ef; }
.calendar-day.outside-month:not(.logged-day):not(.scheduled-day):not(.in-progress-day) { background: #f7f9fb; }
.calendar-day.today { box-shadow: inset 0 0 0 2px #173b66; }
.calendar-day.logged-day { background: #edf7f2; border-color: #cee5da; }
.calendar-day.selected { outline: 2px solid #2463a5; outline-offset: 1px; }
#calendar-prev, #calendar-next, #calendar-today { border-radius: 10px; }
.metric-value { color: var(--navy); font-variant-numeric: tabular-nums; }
.summary-grid .summary-card { padding: 1.15rem !important; }
.summary-grid .metric-value { margin-top: .8rem; font-size: 2rem; }
.entry-card:hover { transform: none; border-color: #b8cbdc; box-shadow: var(--surface-shadow); }
#day-detail-modal, #report-preview-modal, .worker-past-hours-dialog, .company-weekly-dialog { border-radius: var(--surface-radius); border-color: var(--line); box-shadow: 0 20px 65px #102b4840; }
.worker-past-hours-dialog, .company-weekly-dialog { padding: 1.5rem; }
.worker-past-hours-dialog::backdrop, .company-weekly-dialog::backdrop { background: #102b4880; backdrop-filter: blur(3px); }
@media(max-width: 767px) {
  .canva-header > div { padding-block: 1rem; gap: .75rem; }
  .canva-header [data-template-id="page-title"] { font-size: 26px !important; }
  .header-actions-cluster:not(:has(> :not(.hidden-state))) { display: none; }
  #app-main { padding-top: 1.25rem; }
  .worker-home-panel, #calendar-section, #profile-tab-panel, #company-tab-panel { padding: 1.1rem; border-radius: 18px; }
  .worker-home-heading h2 { font-size: 1.45rem; }
  .worker-home-heading button { font-size: .75rem; padding: .5rem .7rem; }
  #mobile-bottom-nav { border-top-color: var(--line); background: #fffffff5; box-shadow: 0 -3px 18px #173b6608; padding-top: .45rem; }
  .mobile-nav-item { border-radius: 12px; min-height: 54px; }
  .mobile-nav-item[aria-current="page"] { background: #e7f2ee; color: #176255; }
  .mobile-nav-item svg { width: 21px; height: 21px; }
}
@media(prefers-reduced-motion: reduce) {
  button, .entry-card { transition: none; }
}

#auth-panel { border-radius: var(--surface-radius); border-color: var(--line); box-shadow: var(--surface-shadow); }
#auth-panel button, .job-finished-photos button { border-radius: var(--control-radius); min-height: 48px; }
#profile-tab-panel > .worker-tracking-setting { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 16px; background: #f8fafc; }
#profile-tab-panel > .worker-tracking-setting summary { font-size: 1rem; color: var(--ink); }