/* The Tools section (tl-: Client\Pages\ToolsHome.razor and ToolsPublish.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. */

/* ---- Tools section (V1.58, Client\Pages\ToolsHome.razor and ToolsPublish.razor; the mockups the owner approved): the tools'
   cards on the left, the selected tool's history on the right (layout B); under 1100 px the history shows under its card
   (layout A: .tl-inline instead of .tl-side). Tokens only, so the dark theme follows. ---- */
.tl-public .welcome-mine-icon { background: var(--accent-soft); color: var(--accent); }
.tl-public .mud-switch { margin: 2px 0 0 -10px; }
.tl-public .mud-switch .mud-typography { font-size: 0.85rem; font-weight: 700; }
.tl-signout { margin-top: 2px; color: var(--accent); font-size: 0.78rem; font-weight: 800; }
.tl-search { flex: 0 1 320px; min-width: 220px; }
.tl-search .mud-input-control { margin: 0; }
.tl-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel); color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 800; cursor: pointer; }
.tl-chip b { color: var(--faint); font-weight: 800; }
.tl-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.tl-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr); gap: 16px; align-items: start; }
.tl-cards { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tl-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 16px; align-items: start;
  padding: 16px 18px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); cursor: pointer;
  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04), 0 6px 18px rgba(31, 41, 55, 0.05);
  transition: box-shadow 180ms ease, border-color 180ms ease; }
.tl-card::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: linear-gradient(180deg, var(--brand-gold), var(--accent));
  content: ""; transform: scaleY(0); transform-origin: top; transition: transform 220ms ease; }
.tl-card:hover { border-color: rgba(141, 127, 86, 0.45); box-shadow: 0 14px 34px rgba(31, 41, 55, 0.1); }
.tl-card.sel { border-color: rgba(141, 127, 86, 0.6); background: linear-gradient(90deg, var(--accent-soft), var(--panel) 40%); }
.tl-card.sel::before, .tl-card:hover::before { transform: scaleY(1); }
.tl-card .home-tile-icon { width: 48px; height: 48px; }
.tl-card .home-tile-icon .mud-icon-root { width: 26px; height: 26px; font-size: 26px; }
.tl-card.sel .home-tile-icon { background: var(--os-accent-fill); color: var(--os-on-accent-fill); }
.tl-card-body { min-width: 0; }
.tl-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.tl-card-name { font-size: 1.05rem; font-weight: 900; letter-spacing: -0.2px; }
.tl-card-desc { margin: 2px 0 0; color: var(--muted); font-size: 0.84rem; line-height: 1.4; }
.tl-card-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; color: var(--faint); font-size: 0.76rem; font-weight: 700; }
.tl-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.tl-card-meta .mud-icon-root { width: 14px; height: 14px; font-size: 14px; }
.tl-card-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 14px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--accent); font: inherit; font-size: 0.85rem; font-weight: 700; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background 150ms ease; }
.tl-btn .mud-icon-root { width: 18px; height: 18px; font-size: 18px; }
.tl-btn.filled { background: var(--os-accent-fill); color: var(--os-on-accent-fill); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); }
.tl-btn.filled:hover { background: var(--os-accent-fill-hover); }
.tl-btn.outlined { padding: 3px 10px; border-color: color-mix(in srgb, var(--accent) 55%, transparent); font-size: 0.78rem; }
.tl-btn.outlined:hover, .tl-btn.text:hover { background: var(--accent-soft); }
.tl-btn.text { padding: 4px 8px; }
.tl-btn.small { padding: 2px 6px; font-size: 0.78rem; }
.tl-btn.icon { padding: 4px; border-radius: 50%; color: var(--muted); }
.tl-btn.icon:hover { background: var(--accent-soft); color: var(--accent); }
.tl-lbl { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 900; white-space: nowrap; }
.tl-lbl .mud-icon-root { width: 13px; height: 13px; font-size: 13px; }
.tl-lbl.latest { background: var(--good-soft); color: var(--good-text); }
.tl-lbl.deprecated { background: var(--warn-soft); color: var(--warn); }
.tl-lbl.pre { background: var(--info-soft); color: var(--info); }
.tl-lbl.ver { background: var(--chip); color: var(--chip-text); }
.tl-side, .tl-inline { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
.tl-side { position: sticky; top: 12px; }
.tl-inline { display: none; }
.tl-side-head { padding: 16px 18px 14px; border-bottom: 1px solid var(--rule);
  background: radial-gradient(circle at 100% 0%, rgba(224, 191, 63, 0.18), transparent 50%), linear-gradient(115deg, var(--panel) 40%, var(--accent-soft) 100%); }
.tl-side-title { display: flex; align-items: center; gap: 10px; }
.tl-side-title .home-tile-icon { width: 40px; height: 40px; }
.tl-side-title h2 { margin: 0; font-size: 1.1rem; font-weight: 900; }
.tl-kicker { color: var(--accent); font-size: 0.68rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.tl-files { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.tl-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.tl-file.compact { padding: 5px 8px; }
.tl-file-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.tl-file.compact .tl-file-icon { width: 26px; height: 26px; }
.tl-file-icon .mud-icon-root { width: 18px; height: 18px; font-size: 18px; }
.tl-file-text { display: flex; min-width: 0; flex-direction: column; }
.tl-file-name { overflow: hidden; font-size: 0.86rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.tl-file-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; color: var(--muted); font-size: 0.74rem; }
.tl-sha { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); font-family: Consolas, "Cascadia Mono", monospace; font-size: 0.72rem; }
.tl-sha button { display: inline-flex; padding: 1px; border: 0; border-radius: 4px; background: transparent; color: var(--faint); cursor: pointer; }
.tl-sha button:hover { background: var(--accent-soft); color: var(--accent); }
.tl-sha .mud-icon-root { width: 13px; height: 13px; font-size: 13px; }
.tl-hist-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 6px; }
.tl-hist-head h3 { margin: 0; font-size: 0.95rem; font-weight: 900; }
.tl-hist { max-height: 620px; overflow: auto; padding: 4px 18px 16px; }
.tl-inline .tl-hist { max-height: none; }
.tl-ver { position: relative; padding: 0 0 14px 26px; }
.tl-ver::before { position: absolute; top: 18px; bottom: -2px; left: 7px; width: 2px; background: var(--rule); content: ""; }
.tl-ver:last-child::before { display: none; }
.tl-dot { position: absolute; top: 5px; left: 0; width: 16px; height: 16px; border: 3px solid var(--panel); border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 1px var(--border); }
.tl-ver.latest .tl-dot { background: var(--brand-gold); box-shadow: 0 0 0 1px var(--accent); }
.tl-ver.deprecated .tl-dot { background: var(--warn); }
.tl-ver.notes-only .tl-dot { background: var(--panel); }
.tl-ver-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tl-ver-top .spacer { flex: 1; }
.tl-ver-num { font-size: 0.98rem; font-weight: 900; }
.tl-ver-date { color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.tl-ver-head { margin: 4px 0 0; font-size: 0.86rem; font-weight: 800; }
.tl-ver ul { margin: 4px 0 0; padding-left: 18px; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }
.tl-warn { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: 0.78rem; font-weight: 700; }
.tl-ver-files { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.tl-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; }
.tl-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 0.76rem; font-weight: 800; cursor: pointer; }
.tl-link:disabled { cursor: default; opacity: 0.5; }
.tl-side-foot { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--rule); background: var(--panel-2); color: var(--muted); font-size: 0.76rem; }
.tl-side-foot .mud-icon-root { width: 15px; height: 15px; font-size: 15px; color: var(--accent); }
.tl-downloads { padding: 12px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.tl-downloads h3 { margin: 0; font-size: 0.95rem; font-weight: 900; }
.tl-dl-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.tl-dl-table td { padding: 4px 8px; border-top: 1px solid var(--rule); }
/* Publish a version */
.tl-pub { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 16px; align-items: start; }
.tl-pub-form, .tl-pub-side { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
.tl-pub-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tl-pub-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.4px; text-transform: uppercase; }
.tl-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; border: 2px dashed rgba(141, 127, 86, 0.45);
  border-radius: 12px; background: var(--panel-2); color: var(--muted); font-size: 0.84rem; text-align: center; cursor: pointer; }
.tl-drop .mud-icon-root { width: 30px; height: 30px; font-size: 30px; color: var(--accent); }
.tl-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tl-pub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tl-pub-actions .spacer { flex: 1; }
.tl-pub-side h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.95rem; font-weight: 900; }
.tl-pub-side h3 .mud-icon-root { color: var(--accent); }
.tl-req { margin: 0; padding: 8px 10px; overflow-x: auto; border-radius: 8px; background: var(--code-bg); font-family: Consolas, monospace; font-size: 0.76rem; line-height: 1.5; white-space: pre-wrap; }
@media (max-width: 1099px) {
  .tl-layout { grid-template-columns: minmax(0, 1fr); }
  .tl-side { display: none; }
  .tl-inline { display: flex; }
  .tl-pub { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .tl-card { grid-template-columns: auto minmax(0, 1fr); }
  .tl-card-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .tl-card-actions .tl-btn.filled { flex: 1; }
  .tl-pub-row { grid-template-columns: minmax(0, 1fr); }
}