/*
 * Foreman pages: attendance, site management and company calendar.
 * All existing IDs and actions remain visible; this file changes presentation
 * only.  The three sections share the same compact cream/white design language.
 */

.app-view #tab-sites,
.app-view #tab-sites button,
.app-view #tab-sites input,
.app-view #tab-sites select,
.app-view #tab-sites textarea {
  --foreman-paper: #fbf8f3;
  --foreman-surface: #fffdf9;
  --foreman-soft: #f5f1ea;
  --foreman-navy: #0d315c;
  --foreman-ink: #1e3d5a;
  --foreman-muted: #52677d;
  --foreman-coral: #f06447;
  --foreman-coral-deep: #b9492f;
  --foreman-coral-soft: #fff0e9;
  --foreman-green: #14543d;
  --foreman-green-soft: #e4f2e9;
  --foreman-border: #ddd8cf;
  --foreman-control-border: #7d8c9c;
  --foreman-shadow: 0 5px 18px rgb(37 52 58 / 7%);
  font-family: var(--hd-sans);
}

.app-view #tab-sites,
.app-view #sites-overview,
.app-view #site-wizard,
.app-view #foreman-attendance,
.app-view #foreman-calendar {
  color: var(--foreman-ink);
  color-scheme: light;
}

/* Section switcher: no navy slab and no low-contrast inactive labels. */
.app-view #tab-sites > .foreman-segments {
  position: sticky;
  z-index: 8;
  top: env(safe-area-inset-top);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 12px;
  padding: 4px;
  border: 1px solid var(--foreman-border);
  border-radius: 15px;
  background: rgb(245 241 234 / 97%);
  box-shadow: 0 3px 12px rgb(37 52 58 / 6%);
}

.app-view #tab-sites > .foreman-segments button {
  min-width: 0;
  min-height: 46px;
  padding: 7px 5px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--foreman-muted) !important;
  -webkit-text-fill-color: var(--foreman-muted) !important;
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 800;
  opacity: 1;
  box-shadow: none;
}

.app-view #tab-sites > .foreman-segments button[aria-selected="true"] {
  background: var(--foreman-surface);
  color: var(--foreman-navy) !important;
  -webkit-text-fill-color: var(--foreman-navy) !important;
  box-shadow: 0 2px 8px rgb(31 48 59 / 8%);
}

.app-view #tab-sites .section-head {
  min-height: 46px;
  margin-bottom: 9px;
}

.app-view #tab-sites .section-head h2,
.app-view #sites-overview .section-head h2,
.app-view #site-wizard .wizard-head h2,
.app-view #site-wizard .wizard-step h3 {
  color: var(--foreman-navy) !important;
  -webkit-text-fill-color: var(--foreman-navy) !important;
  opacity: 1;
}

.app-view #tab-sites .section-head h2 { font-size: 21px; }
.app-view #sites-overview .card-kicker,
.app-view #site-wizard .card-kicker,
.app-view #foreman-attendance .card-kicker,
.app-view #foreman-calendar .card-kicker {
  color: var(--foreman-coral-deep) !important;
  -webkit-text-fill-color: var(--foreman-coral-deep) !important;
  opacity: 1;
}

.app-view #tab-sites .btn-inline,
.app-view #sites-overview #btn-new-site {
  min-height: 44px;
  padding-inline: 12px;
  border: 1px solid rgb(240 100 71 / 30%);
  border-radius: 12px;
  background: var(--foreman-coral-soft);
  color: var(--foreman-coral-deep);
  -webkit-text-fill-color: var(--foreman-coral-deep);
  font-weight: 800;
  box-shadow: none;
}

/* Attendance filters and results. */
.app-view #foreman-attendance .filter-grid,
.app-view #foreman-calendar .filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.app-view #foreman-attendance .filter-grid input,
.app-view #foreman-attendance .filter-grid select,
.app-view #foreman-calendar .filter-grid input,
.app-view #foreman-calendar .filter-grid select,
.app-view #foreman-calendar .filter-grid button,
.app-view #sites-overview .search-field input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--foreman-control-border) !important;
  border-radius: 12px;
  background: var(--foreman-surface) !important;
  color: var(--foreman-navy) !important;
  -webkit-text-fill-color: var(--foreman-navy) !important;
  color-scheme: light;
  opacity: 1;
  box-shadow: none;
}

.app-view #tab-sites .search-field {
  margin-bottom: 10px;
}

.app-view #tab-sites .search-field input {
  min-height: 48px;
  border: 1px solid var(--foreman-control-border) !important;
  border-radius: 13px;
  background: var(--foreman-surface) !important;
  color: var(--foreman-navy) !important;
  -webkit-text-fill-color: var(--foreman-navy) !important;
  box-shadow: none;
}

.app-view #tab-sites input::placeholder,
.app-view #tab-sites textarea::placeholder {
  color: #607286 !important;
  -webkit-text-fill-color: #607286 !important;
  opacity: 1;
}

.app-view #tab-sites .search-field > span:last-child { color: var(--foreman-muted); }

.app-view #foreman-attendance-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 8px 0 11px;
}

.app-view #foreman-attendance-counts .summary-card {
  min-height: 61px;
  padding: 9px;
  border: 1px solid var(--foreman-border);
  border-radius: 12px;
  background: var(--foreman-surface);
  box-shadow: none;
}

.app-view #foreman-attendance-counts .summary-card b { color: var(--foreman-navy); font-size: 18px; }
.app-view #foreman-attendance-counts .summary-card span { color: var(--foreman-muted); font-size: 10px; }

.app-view #foreman-attendance-list {
  display: grid;
  gap: 8px;
}

.app-view #foreman-attendance-list .list-card {
  padding: 13px 14px;
  border: 1px solid var(--foreman-border);
  border-radius: 14px;
  background: var(--foreman-surface);
  color: var(--foreman-ink);
  box-shadow: var(--foreman-shadow);
}

.app-view #foreman-attendance-list .list-card h3 { color: var(--foreman-navy); font-size: 15px; }
.app-view #foreman-attendance-list .list-card p { color: var(--foreman-muted); -webkit-text-fill-color: var(--foreman-muted); font-size: 12px; }
.app-view #foreman-attendance-list .empty-state { border-color: var(--foreman-border); background: var(--foreman-surface); color: var(--foreman-muted); }

/* Company calendar in the foreman tab. */
.app-view #foreman-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin: 10px 0 12px;
}

.app-view #foreman-calendar-grid .calendar-readonly-day {
  min-width: 0;
  min-height: 48px;
  padding: 4px 1px;
  border: 1px solid var(--foreman-border);
  border-radius: 10px;
  background: var(--foreman-surface);
  color: var(--foreman-navy);
  font-size: 11px;
}

/* Site cards keep photo, edit, delete and GPS radius controls visible. */
.app-view #foreman-site-list {
  display: grid;
  gap: 9px;
}

.app-view #foreman-site-list .site-card {
  display: block;
  min-height: 112px;
  padding: 13px;
  border: 1px solid var(--foreman-border);
  border-radius: 15px;
  background: var(--foreman-surface) !important;
  color: var(--foreman-ink) !important;
  box-shadow: var(--foreman-shadow);
}

.app-view #foreman-site-list .site-card[data-pwa-photo-ready="true"] {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 5px;
}

.app-view #foreman-site-list .pwa-site-card-image {
  grid-column: 1;
  grid-row: 1 / 5;
  width: 78px;
  height: 78px;
  margin: 0;
  border-radius: 12px;
}

.app-view #foreman-site-list .site-card[data-pwa-photo-ready="true"] > .list-card-head,
.app-view #foreman-site-list .site-card[data-pwa-photo-ready="true"] > p:not(.pwa-site-photo-message) { grid-column: 2; min-width: 0; }
.app-view #foreman-site-list .site-card h3 { color: var(--foreman-navy) !important; -webkit-text-fill-color: var(--foreman-navy) !important; font-size: 15px; opacity: 1; overflow-wrap: anywhere; }
.app-view #foreman-site-list .site-card p,
.app-view #foreman-site-list .pwa-site-photo-controls small { margin: 2px 0 0; color: var(--foreman-muted) !important; -webkit-text-fill-color: var(--foreman-muted) !important; font-size: 10px; opacity: 1; }
.app-view #foreman-site-list .site-card .radius { color: var(--foreman-coral-deep) !important; -webkit-text-fill-color: var(--foreman-coral-deep) !important; font-weight: 800; }
.app-view #foreman-site-list .status-label.approved { border: 1px solid rgb(47 114 88 / 15%); background: var(--foreman-green-soft); color: var(--foreman-green); -webkit-text-fill-color: var(--foreman-green); }

.app-view #foreman-site-list .site-card-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 6px;
}

.app-view #foreman-site-list .site-card-actions button,
.app-view #foreman-site-list .pwa-site-photo-edit {
  min-height: 44px;
  border: 1px solid var(--foreman-border);
  border-radius: 11px;
  background: var(--foreman-soft);
  color: var(--foreman-navy);
  -webkit-text-fill-color: var(--foreman-navy);
  font-size: 12px;
  font-weight: 800;
}

.app-view #foreman-site-list .site-card-actions button[data-site-delete] {
  border-color: #e8c6bf;
  background: #fff4f1;
  color: #a94b42;
  -webkit-text-fill-color: #a94b42;
}

.app-view #foreman-site-list .pwa-site-photo-controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 1px;
}

.app-view #foreman-site-list .pwa-site-photo-controls .pwa-site-photo-edit { width: auto; padding-inline: 12px; }

/* Site add/edit wizard. */
.app-view #site-wizard .back-button,
.app-view #site-wizard #btn-reverse-address { min-height: 44px; color: var(--foreman-coral-deep) !important; -webkit-text-fill-color: var(--foreman-coral-deep) !important; }
.app-view #site-wizard .wizard-head h2 { margin-bottom: 8px; font-size: 22px; }
.app-view #site-wizard .wizard-progress { margin-bottom: 13px; }
.app-view #site-wizard .wizard-progress i { background: #d7d8d6; }
.app-view #site-wizard .wizard-progress i.on { background: var(--foreman-coral); }

.app-view #site-wizard .wizard-step {
  padding: 15px;
  border: 1px solid var(--foreman-border);
  border-radius: 15px;
  background: var(--foreman-surface) !important;
  color: var(--foreman-ink) !important;
  box-shadow: var(--foreman-shadow);
}

.app-view #site-wizard .wizard-step h3 { margin-bottom: 13px; font-size: 17px; }
.app-view #site-wizard .wizard-step > .muted,
.app-view #site-wizard .wizard-step .muted { color: var(--foreman-muted) !important; -webkit-text-fill-color: var(--foreman-muted) !important; opacity: 1; }
.app-view #site-wizard .field > span,
.app-view #site-wizard .coord-grid label { color: var(--foreman-navy) !important; -webkit-text-fill-color: var(--foreman-navy) !important; font-size: 13px; font-weight: 800; opacity: 1; }

.app-view #site-wizard .field input:not([type="checkbox"]):not([type="radio"]),
.app-view #site-wizard .field select,
.app-view #site-wizard .field textarea,
.app-view #site-wizard .coord-grid input {
  min-height: 50px;
  border: 1px solid var(--foreman-control-border) !important;
  border-radius: 12px;
  background: var(--foreman-surface) !important;
  color: var(--foreman-navy) !important;
  -webkit-text-fill-color: var(--foreman-navy) !important;
  color-scheme: light !important;
  opacity: 1;
}

.app-view #site-wizard .btn-primary { border-color: transparent; background: linear-gradient(135deg, #ff6c4d, var(--foreman-coral)); color: #fff; -webkit-text-fill-color: #fff; box-shadow: 0 7px 16px rgb(190 91 65 / 17%); }
.app-view #site-wizard .btn-secondary { border: 1px solid var(--foreman-border); background: var(--foreman-surface); color: var(--foreman-navy); -webkit-text-fill-color: var(--foreman-navy); box-shadow: none; }
.app-view #site-wizard .map-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; overflow: visible; }
.app-view #site-wizard .map-toolbar button { min-width: 0; min-height: 44px; padding-inline: 5px; border: 1px solid var(--foreman-border); border-radius: 10px; background: var(--foreman-soft); color: var(--foreman-navy); -webkit-text-fill-color: var(--foreman-navy); font-size: 11px; opacity: 1; }
.app-view #site-wizard .map-toolbar button.is-active { border-color: var(--foreman-coral); background: var(--foreman-coral); color: #fff; -webkit-text-fill-color: #fff; }
.app-view #site-wizard .map-wrap { height: min(290px, 42dvh); border-color: var(--foreman-border); border-radius: 13px; background: #eef1ee; }
.app-view #site-wizard .map-status { background: #f4f3ef; color: var(--foreman-navy); -webkit-text-fill-color: var(--foreman-navy); }
.app-view #site-wizard .coord-grid { gap: 7px; }
.app-view #site-wizard .confirm-card { border-color: var(--foreman-border); background: var(--foreman-paper); color: var(--foreman-navy); }
.app-view #site-wizard .confirm-row span { color: var(--foreman-muted); }
.app-view #site-wizard .confirm-row b { color: var(--foreman-navy); }
.app-view #site-wizard .msg,
.app-view #foreman-calendar .msg { color: #a53d31; -webkit-text-fill-color: #a53d31; }
.app-view #site-wizard .msg.ok,
.app-view #foreman-calendar .msg.ok { color: var(--foreman-green); -webkit-text-fill-color: var(--foreman-green); }

@media (max-width: 380px) {
  .app-view #foreman-attendance-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-view #foreman-attendance .filter-grid { grid-template-columns: 1fr; }
  .app-view #foreman-site-list .site-card { padding: 11px; }
  .app-view #foreman-site-list .site-card[data-pwa-photo-ready="true"] { grid-template-columns: 68px minmax(0, 1fr); }
  .app-view #foreman-site-list .pwa-site-card-image { width: 68px; height: 68px; }
  .app-view #foreman-site-list .list-card-head { display: grid; }
  .app-view #foreman-site-list .status-label { width: max-content; }
}

@media (prefers-color-scheme: dark) and (prefers-color-scheme: light) {
  .app-view #tab-sites,
  .app-view #sites-overview,
  .app-view #site-wizard,
  .app-view #foreman-attendance,
  .app-view #foreman-calendar { color-scheme: light; }
}

@media (prefers-reduced-motion: reduce) {
  .app-view #tab-sites * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}