/* The home pages (/client, /employee, /demo, /poc): the welcome header (WelcomeHeader), the app tiles (SectionPanel, AppTile), the quick links; the Changelog card and page (chg-).
   Moved out of app.css as they were (design system wave 0.4, Source\Docs\Design system\Design system.md section 14): one
   file per area, so that the app waves never edit the same file. Linked by Components\App.razor right after app.css,
   in the order the rules had there (home, admin, monitoring, management, account, messaging, support, training,
   azurecosts, tools), so every rule keeps its place in the cascade. Tokens only: light and dark both work. */

/* ---- Home pages (/client and /employee): welcome header (WelcomeHeader), app tiles (SectionPanel, AppTile), quick
   links (QuickLinks). The tiles are the same size in both sections. Sized so that the welcome header and 12 tiles (4 x 3)
   fit without scrolling in a 1920 x 1080 or 2048 x 1100 browser window: a tile's height follows the window's
   (min-height in vh), the grid has 4, 3, 2, then 1 column as the window narrows. The whole width of the page (the owner,
   2026-11-06: every page uses the page width; 1680 px before). ---- */
.home { display: flex; flex-direction: column; gap: 18px; width: 100%; padding: 6px 8px 12px; }

/* Welcome header: greeting on the left, the selected mine on the right, behind them the faint topographic map of an open-pit
   mine (V1.25, the owner: "make more like mine topographic"): welcome-topo.svg, the pit's benches, its haul ramp, a waste
   dump and a hill, made by Source\Docs\Logo proposals\Make-WelcomeTopo.js; it fades in from the greeting's side */
.welcome {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  overflow: hidden;
  padding: 22px 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(224, 191, 63, 0.2), transparent 45%),
    linear-gradient(115deg, var(--panel) 45%, var(--accent-soft) 100%);
  box-shadow: var(--shadow);
}
.welcome::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  background: url("welcome-topo.svg") right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 35%);
  mask-image: linear-gradient(to right, transparent, #000 35%);
  content: "";
  pointer-events: none;
}
.welcome > * { position: relative; z-index: 1; }
.welcome-text { min-width: 0; }
.welcome-section {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.welcome-section .mud-icon-root { width: 16px; height: 16px; font-size: 16px; }
.welcome h1 {
  margin: 6px 0 4px;
  color: var(--text);
  font-size: clamp(1.45rem, 1.05rem + 1vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.welcome-sub { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 0; color: var(--muted); font-weight: 600; }
.welcome-company { color: var(--text); font-weight: 800; }
.welcome-dot { color: var(--faint); }

.welcome-mine {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  padding: 12px 20px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.welcome-mine-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-gold);
  color: var(--text);
}
.welcome-mine-text { display: flex; min-width: 0; flex-direction: column; line-height: 1.35; }
.welcome-mine-label { color: var(--muted); font-size: 0.66rem; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; }
.welcome-mine-name { color: var(--text); font-size: 1.1rem; font-weight: 900; }
.welcome-mine-facts { color: var(--muted); font-size: 0.82rem; }
.welcome-mine-time { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; color: var(--text); font-weight: 700; white-space: nowrap; }
.welcome-mine-time .mud-icon-root { width: 15px; height: 15px; font-size: 15px; color: var(--accent); }

/* The apps of the section */
.home-apps { display: flex; flex-direction: column; gap: 12px; }
.home-apps-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 0 2px; }
.home-apps-head h2 { margin: 0; font-size: 1.15rem; font-weight: 900; }
.home-apps-head h2::before {
  display: inline-block;
  width: 6px;
  height: 18px;
  margin-right: 8px;
  border-radius: 3px;
  background: var(--brand-gold);
  content: "";
  vertical-align: -2px;
}

/* V1.25: smaller tiles (the owner: "reduce the sizes of the cards"), 6 per row on a wide screen down to 1 on a phone */
.home-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.home-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: clamp(112px, 14vh, 150px);
  overflow: hidden;
  padding: 14px 16px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04), 0 6px 18px rgba(31, 41, 55, 0.05);
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
/* Gold-to-olive line on top of an open tile, drawn on hover */
.home-tile::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-gold), var(--accent));
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}
.home-tile.open:hover, .home-tile.open:focus-visible {
  border-color: rgba(141, 127, 86, 0.45);
  box-shadow: 0 14px 34px rgba(31, 41, 55, 0.12);
  transform: translateY(-3px);
}
.home-tile.open:hover::before, .home-tile.open:focus-visible::before { transform: scaleX(1); }
.home-tile.open:focus-visible { outline: 3px solid rgba(224, 191, 63, 0.6); outline-offset: 2px; }

.home-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.home-tile-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  transition: background 180ms ease, color 180ms ease;
}
.home-tile-icon .mud-icon-root { width: 22px; height: 22px; font-size: 22px; }
.home-tile.open:hover .home-tile-icon, .home-tile.open:focus-visible .home-tile-icon { background: var(--os-accent-fill); color: var(--os-on-accent-fill); }
.home-tile-name { color: var(--text); font-size: 1rem; font-weight: 800; letter-spacing: -0.2px; line-height: 1.25; }
.home-tile-desc {
  display: -webkit-box;
  overflow: hidden;
  padding-right: 18px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.home-tile-go {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  color: var(--faint);
  transition: transform 180ms ease, color 180ms ease;
}
.home-tile.open:hover .home-tile-go, .home-tile.open:focus-visible .home-tile-go { color: var(--accent); transform: translateX(4px); }

/* Coming soon (Available false) and No access: no link, a chip says why */
.home-tile-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}
.home-tile-state .mud-icon-root { width: 15px; height: 15px; font-size: 15px; }
.home-tile-state.soon { background: var(--gold-soft); color: var(--gold-text); }
.home-tile-state.denied { background: var(--chip); color: var(--muted); }
.home-tile.soon { border-style: dashed; border-color: rgba(141, 127, 86, 0.4); background: var(--panel-2); box-shadow: none; }
.home-tile.soon .home-tile-icon { background: var(--accent-soft); color: #a99f82; }
.home-tile.denied { background: var(--panel-2); box-shadow: none; cursor: not-allowed; }
.home-tile.denied .home-tile-icon { background: var(--chip); color: var(--faint); }
.home-tile.denied .home-tile-name { color: var(--muted); }
.home-tile.denied .home-tile-desc { color: var(--faint); }
/* V1.69: the app's stage under its description (AppStageBadge: In Production, In Development, Food for Thought; os-badge, soft) */
.home-tile-stage { display: inline-flex; align-self: flex-start; margin-top: var(--os-space-2); }

/* Quick links of the employee section, below the tiles: bubbles opening external sites in a new tab */
.quick-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 6px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}
.quick-links-title {
  margin-right: 4px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.bubble:hover { border-color: var(--accent); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); transform: translateY(-1px); }
.bubble-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.bubble .bubble-out { color: var(--faint); font-size: 1rem; }
.bubble:hover .bubble-out { color: var(--accent); }

/* Short windows (1440 x 900 laptops): a bit less padding so that 3 rows of tiles still fit */
@media (max-height: 950px) and (min-width: 560px) {
  .home { gap: 14px; }
  .welcome { padding: 16px 24px; }
  .home-tile { padding: 12px 14px 12px; }
  .home-tile-top { margin-bottom: 2px; }
  .home-tile-icon { width: 38px; height: 38px; }
  .home-tile-icon .mud-icon-root { width: 20px; height: 20px; font-size: 20px; }
}
/* Wider than 2200 px (the page has no cap since 2026-11-06): more tiles per row instead of larger ones */
@media (min-width: 2200px) { .home-tiles { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
@media (max-width: 1599px) { .home-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1279px) { .home-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .home-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 799px) { .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .home { gap: 14px; padding: 0; }
  .welcome { padding: 18px; }
  .welcome::after { width: 100%; opacity: 0.6; }
  .welcome-mine { width: 100%; }
}
/* Phones: one tile per row, the icon on the left of the name and description (the chip, when there is one, above the
   name), so that more apps show on one screen */
@media (max-width: 559px) {
  /* The company and the date on two lines: no dot left hanging at the end of the first one */
  .welcome-sub { flex-direction: column; }
  .welcome-dot { display: none; }
  /* The mine's local time on its own line, aligned with the region above it */
  .welcome-mine-time { display: flex; margin-left: 0; }
  .home-tiles { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .home-tile {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: 2px 14px;
    min-height: 0;
    padding: 14px 16px;
  }
  .home-tile-top { display: contents; }
  .home-tile-icon { grid-row: 1 / span 3; grid-column: 1; width: 48px; height: 48px; }
  .home-tile-icon .mud-icon-root { width: 26px; height: 26px; font-size: 26px; }
  .home-tile-state { grid-row: 1; grid-column: 2; justify-self: start; margin-bottom: 2px; }
  .home-tile-name { font-size: 1.05rem; }
  .home-tile-desc { font-size: 0.85rem; }
  .home-tile-stage { grid-column: 2; justify-self: start; margin-top: var(--os-space-1); }
  .home-tile-go { right: 14px; bottom: auto; top: 50%; margin-top: -12px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-tile, .home-tile::before, .home-tile-icon, .home-tile-go { transition: none; }
  .home-tile.open:hover, .home-tile.open:focus-visible { transform: none; }
}

/* ---- Changelog (V1.18): the Employee section's "What's new" card and /changelog ---- */
.chg-card { margin-top: 14px; }
.chg-card h2, .chg-version h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.chg-items { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 0.9rem; line-height: 1.45; }
.chg-page { display: grid; gap: 12px; }   /* the whole width of the page (2026-11-06; 900 px before) */
.chg-title { margin: 4px 0 0; font-size: 1.4rem; font-weight: 900; }