/* Administration: its home's tiles (app-tile), Clients, Access and History (admin-), the employees' rights matrix of Access (ac-: Apps\Admin\AccessPage.razor).
   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. */

/* ---- Tiles of the Administration home (Apps\Admin\AdminPage.razor) ---- */
.app-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.app-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 4px 12px;
  padding: 14px;
  color: inherit;
  text-decoration: none;
  box-shadow: none;
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
.app-tile:hover { border-color: var(--accent); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); }
.app-tile.locked { cursor: not-allowed; opacity: 0.6; }
.app-tile.locked:hover { border-color: var(--border); box-shadow: none; }
.app-icon {
  display: flex;
  grid-row: 1 / 3;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}
.app-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-name { font-size: 1rem; font-weight: 800; }
.app-description { color: var(--muted); font-size: 0.82rem; line-height: 1.35; }

/* Administration > Clients, Access, History */
.admin-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 16px; align-items: start; }
.admin-apps { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 4px 0 8px; }
.admin-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.admin-state {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}
.admin-state.on { background: var(--os-accent); color: var(--os-on-accent); }
.admin-state.off { background: var(--bad-soft); color: var(--bad); }
.admin-state.warn { background: var(--warn-soft); color: var(--warn); }
.admin-consent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-consent code { overflow-wrap: anywhere; }
.admin-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 8px 0 14px; }
.admin-facts dt { color: var(--muted); font-weight: 700; }
/* Administration > Access, "Test the office link": the button, the verdict, then the local API's answer or the error */
.admin-gateway { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 14px; }
.admin-gateway .good { color: var(--good, #2f7d32); font-weight: 700; }
.admin-gateway .warn { color: var(--bad); font-weight: 700; }
.admin-gateway-detail { flex-basis: 100%; padding: 8px 10px; border-radius: 6px; background: var(--panel-2); font-size: 0.8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-facts dd { margin: 0; }
.admin-code { display: inline-block; margin: 0 6px 4px 0; }
@media (max-width: 600px) {
  .admin-facts { grid-template-columns: minmax(0, 1fr); }
}

/* V1.25: Administration > Access, the employees' rights matrix (Apps\Admin\AccessPage.razor): one column per employee, one
   row per app; the first column stays put while the matrix scrolls sideways */
.ac-groups { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; font-weight: 600; }
.ac-toolbar { margin-top: 14px; }
.ac-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; }
.ac-wrap { max-width: 100%; overflow-x: auto; }
.ac-matrix { width: auto; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.ac-matrix th, .ac-matrix td { padding: 6px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.ac-matrix .ac-app { position: sticky; left: 0; z-index: 1; min-width: 210px; background: var(--panel); white-space: nowrap; text-align: left; }
.ac-matrix thead .ac-app { z-index: 2; vertical-align: bottom; }
.ac-matrix th.ac-person { min-width: 150px; max-width: 200px; vertical-align: bottom; text-align: center; font-weight: 400; text-transform: none; letter-spacing: 0; }
.ac-matrix th.ac-person.ac-off { opacity: 0.55; }
.ac-name { display: block; font-weight: 800; color: var(--text); font-size: 0.9rem; }
.ac-sub { display: block; color: var(--muted); font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-badge { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--os-accent); color: var(--os-on-accent); font-size: 0.7rem; font-weight: 800; }
.ac-badge-soft { background: var(--accent-soft); color: var(--accent-strong); }
.ac-cell { text-align: center; }
.ac-cell input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
/* V1.62: scoped to the matrix (unscoped, it also coloured the Account page's previous/next buttons, ".ac-btn ac-icon") */
.ac-matrix .ac-icon { vertical-align: middle; margin-right: 4px; color: var(--accent); }
.ac-group td { padding-top: 14px; background: var(--head-bg); color: var(--muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; text-align: left; }
.ac-group td:first-child { position: sticky; left: 0; }
.ac-admin-row td { background: var(--accent-soft); }
.ac-admin-row .ac-app { background: var(--accent-soft); }
.ac-select { padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--field); color: var(--text); font: inherit; font-size: 0.82rem; }
.ac-select.ac-opens { border-color: var(--accent); background: var(--accent-soft); }
.ac-select.ac-administers { border-color: var(--os-accent-fill); background: var(--os-accent-fill); color: var(--os-on-accent-fill); font-weight: 700; }
.ac-all { color: var(--accent); font-weight: 800; }
.ac-toggle { min-width: 92px; padding: 3px 10px; font-size: 0.8rem; }
.ac-toggle-off { background: var(--bad-soft); color: var(--bad); }
/* "Add an employee" under the matrix. V1.62: its own class (it was ".ac-add", the class of the Account comment form too:
   this rule gave that form a top border and a margin, and the Account rule turned this one into a column) */
.ac-add-employee { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
.ac-add-employee .pdm-input { width: auto; min-width: 220px; }