/* ============================================================
   Tool Wizard — Utility layer
   Replaces the MudBlazor.min.css utility/spacing classes that were
   removed during the MudBlazor -> ToolWizard.UI migration but are
   still referenced across the pages and layout components.

   Source: design-system.md §4 Spacing, §2 Color, §3 Typography.
   Load AFTER components.css so these can refine component defaults.
   ============================================================ */

/* ------------------------------------------------------------
   Spacing scale (m / p), mapped to --space-* tokens.
   1=4px 2=8px 3=12px 4=16px 5=24px 10=40px (page-level breathing).
   ------------------------------------------------------------ */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-10 { margin-top: 40px; }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-10 { margin-bottom: 40px; }

.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-4 { margin-left: var(--space-4); }

.mr-2 { margin-right: var(--space-2); }
.mr-4 { margin-right: var(--space-4); }

.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }

.m-auto { margin: auto; }

.p-3 { padding: var(--space-3); }
.pa-2 { padding: var(--space-2); }
.pa-4 { padding: var(--space-4); }

.pt-5 { padding-top: var(--space-5); }
.pb-5 { padding-bottom: var(--space-5); }
.pl-5 { padding-left: var(--space-5); }
.pr-5 { padding-right: var(--space-5); }

/* ------------------------------------------------------------
   Flex / display / float helpers
   ------------------------------------------------------------ */
.flex-grow-1 { flex-grow: 1; }
.flex-wrap { flex-wrap: wrap; }
.float-right { float: right; }

/* ------------------------------------------------------------
   Text alignment + color utilities
   ------------------------------------------------------------ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.text-start { text-align: start; }
.text-end { text-align: end; }
.text-danger { color: var(--danger); }

/* tw-* prefixed aliases (TwText AlignClass emits these) */
.tw-text-left { text-align: left; }
.tw-text-center { text-align: center; }
.tw-text-right { text-align: right; }
.tw-text-justify { text-align: justify; }
.tw-text-start { text-align: start; }
.tw-text-end { text-align: end; }

/* Standalone color utilities (TwText/TwIcon/TwColorPicker ColorClass) */
.tw-color-primary { color: var(--accent); }
.tw-color-secondary { color: var(--text-2); }
.tw-color-tertiary { color: var(--text-3); }
.tw-color-error { color: var(--danger); }
.tw-color-success { color: var(--success); }
.tw-color-warning { color: var(--warning); }
.tw-color-info { color: var(--info); }
.tw-color-text { color: var(--text-1); }

/* ------------------------------------------------------------
   Flex wrap / nowrap / break (TwStack WrapClass, TwFlexBreak)
   ------------------------------------------------------------ */
.tw-wrap { flex-wrap: wrap; }
.tw-wrap-reverse { flex-wrap: wrap-reverse; }
.tw-nowrap { flex-wrap: nowrap; }
.tw-flex-wrap { flex-wrap: wrap; }
.tw-flex-break { flex-basis: 100%; height: 0; }

.tw-center { text-align: center; }

/* ------------------------------------------------------------
   Headings h5 / h6 (h1–h4 live in components.css)
   ------------------------------------------------------------ */
.tw-h5 { font-size: var(--font-md); font-weight: 600; }
.tw-h6 { font-size: var(--font-sm); font-weight: 600; }

/* ------------------------------------------------------------
   Input field helpers (TwTextField)
   ------------------------------------------------------------ */
.tw-field-fullwidth { width: 100%; }
.tw-field-fullwidth .tw-input,
.tw-field-fullwidth .tw-textarea,
.tw-field-fullwidth .tw-select { width: 100%; box-sizing: border-box; }

.tw-input-wrap { position: relative; display: inline-flex; align-items: center; }
.tw-input-adorned .tw-input,
.tw-input-adorned .tw-textarea { padding: var(--space-2) var(--space-3); }
.tw-adornment { display: inline-flex; align-items: center; padding: 0 var(--space-2); color: var(--text-3); }
.tw-adornment-start { order: -1; }
.tw-adornment-end { order: 1; }

.tw-margin-dense { margin-bottom: var(--space-1); }
.tw-margin-normal { margin-bottom: var(--space-3); }

/* ------------------------------------------------------------
   Button / FAB icon children
   ------------------------------------------------------------ */
.tw-btn-icon { display: inline-flex; align-items: center; }
.tw-btn-icon .tw-icon { margin-right: var(--space-1); }
.tw-fab-icon { display: inline-flex; align-items: center; justify-content: center; }

/* ------------------------------------------------------------
   Form
   ------------------------------------------------------------ */
.tw-form { display: flex; flex-direction: column; gap: var(--space-3); }

/* ------------------------------------------------------------
   List dense
   ------------------------------------------------------------ */
.tw-list-dense .tw-list-item { padding: var(--space-1) 0; }
.tw-select-dense { padding: var(--space-1) var(--space-2); }

/* ------------------------------------------------------------
   Alert variants (severity classes live in components.css)
   ------------------------------------------------------------ */
.tw-alert-filled.tw-alert-success { background: var(--success-surface); color: var(--success); }
.tw-alert-filled.tw-alert-error { background: var(--danger-surface); color: var(--danger); }
.tw-alert-filled.tw-alert-warning { background: var(--warning-surface); color: var(--warning); }
.tw-alert-filled.tw-alert-info { background: var(--info-surface); color: var(--info); }
.tw-alert-filled.tw-alert-normal { background: var(--surface-2); color: var(--text-1); }

.tw-alert-outlined { background: transparent; border: 1px solid var(--border-strong); }
.tw-alert-outlined.tw-alert-success { color: var(--success); border-color: var(--success); }
.tw-alert-outlined.tw-alert-error { color: var(--danger); border-color: var(--danger); }
.tw-alert-outlined.tw-alert-warning { color: var(--warning); border-color: var(--warning); }
.tw-alert-outlined.tw-alert-info { color: var(--info); border-color: var(--info); }

.tw-alert-text { background: transparent; border: none; }
.tw-alert-text.tw-alert-success { color: var(--success); }
.tw-alert-text.tw-alert-error { color: var(--danger); }
.tw-alert-text.tw-alert-warning { color: var(--warning); }
.tw-alert-text.tw-alert-info { color: var(--info); }

/* ------------------------------------------------------------
   Drawer anchors + elevation (TwDrawer)
   ------------------------------------------------------------ */
.tw-drawer-left { left: 0; }
.tw-drawer-right { right: 0; }
.tw-drawer-top { top: 0; }
.tw-drawer-bottom { bottom: 0; }
.tw-drawer-open { display: block; }
.tw-drawer-closed { display: none; }

.tw-elevation-1 { box-shadow: var(--shadow-1); }
.tw-elevation-2 { box-shadow: var(--shadow-2); }
.tw-elevation-3 { box-shadow: var(--shadow-3); }

/* ------------------------------------------------------------
   Container max-widths (TwContainer MaxWidthClass)
   lg = design content max-width (1080px)
   ------------------------------------------------------------ */
.tw-maxw-xs { max-width: 576px; }
.tw-maxw-sm { max-width: 768px; }
.tw-maxw-md { max-width: 960px; }
.tw-maxw-lg { max-width: var(--content-max-width); }
.tw-maxw-xl { max-width: 1280px; }

/* ------------------------------------------------------------
   Scroll-to-top wrapper
   ------------------------------------------------------------ */
.tw-scroll-top { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(var(--tw-footer-clearance, 0px) + max(12px, env(safe-area-inset-bottom))); z-index: 30; }
/* The wrapper owns positioning; a fixed child ignores the host's footer clearance. */
.tw-scroll-top .tw-fab { position: static; }

/* ------------------------------------------------------------
   Shared tooltip wrapper and root-layer surface
   (replaces the native title attribute).
   ------------------------------------------------------------ */
/* Tooltips render once in the shared root, never inside scrolling/clipping panes. */
.tw-tooltip { display: inline-flex; position: relative; align-items: center; min-width: 0; max-width: 100%; }
.tw-tooltip > .tw-field { min-width: 0; flex: 1; }
.tw-tooltip .tw-select { max-width: 100%; }
.tw-tooltip-description {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.tw-tooltip-help {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 4px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%; cursor: pointer;
  color: var(--text-2); background: var(--surface-1); font: inherit;
}
.tw-tooltip-help:hover { color: var(--text-1); background: var(--surface-2); }
.tw-tooltip-help:focus-visible, .tw-tooltip-bounded:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tw-tooltip-popover {
  position: fixed; box-sizing: border-box; margin: 0; z-index: 64;
  width: min(320px, calc(100vw - 16px)); max-height: calc(100dvh - 16px);
  background: var(--surface-1); color: var(--text-1);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); font-size: var(--font-sm); line-height: 1.5;
  box-shadow: var(--shadow-2); white-space: normal; overflow-wrap: anywhere;
  overflow-y: auto; overscroll-behavior: contain; pointer-events: auto;
}
.tw-tooltip-bounded { scrollbar-gutter: stable; }
@media (any-pointer: coarse) { .tw-tooltip-help { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .tw-tooltip-popover { animation: none; transition: none; } }

/* ------------------------------------------------------------
   Info/help button + click popover (TwInfoButton)
   ------------------------------------------------------------ */
.tw-info-btn-wrap { display: inline-flex; position: relative; }
.tw-info-btn {
  width: 40px; height: 40px; display: inline-flex;
  align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-2);
  border-radius: 50%; cursor: pointer;
}
.tw-info-btn:hover { background: var(--surface-2); color: var(--text-1); }
.tw-info-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tw-info-popover {
  text-align: left;
  position: absolute; top: calc(100% + var(--space-2)); right: 0;
  z-index: 70; width: 360px; max-width: calc(100vw - 2 * var(--space-4));
  background: var(--surface-1); color: var(--text-1);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-4); box-shadow: var(--shadow-3);
  animation: tw-popover-in var(--dur-fast) var(--ease);
}
.tw-info-popover .tw-info-title { font-weight: 600; margin-bottom: var(--space-2); }
.tw-info-popover .tw-info-subtitle { font-weight: 600; margin: var(--space-2) 0 var(--space-1); }
.tw-info-popover .tw-info-list { list-style: disc; margin: 0 0 0 var(--space-4); padding: 0; }
.tw-info-popover .tw-info-list li { margin-bottom: var(--space-1); font-size: var(--font-sm); }
.tw-popover-backdrop { position: fixed; inset: 0; z-index: 65; }

@keyframes tw-popover-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   Grid item responsive spans (TwItem)
   Breakpoints match MudBlazor: sm 600, md 960, lg 1280, xl 1920.
   Base .tw-item-1..12 already exist in components.css.
   ------------------------------------------------------------ */
.tw-item { grid-column: span 12; }
.tw-item-1 { grid-column: span 1; }
.tw-item-2 { grid-column: span 2; }
.tw-item-3 { grid-column: span 3; }
.tw-item-4 { grid-column: span 4; }
.tw-item-5 { grid-column: span 5; }
.tw-item-6 { grid-column: span 6; }
.tw-item-7 { grid-column: span 7; }
.tw-item-8 { grid-column: span 8; }
.tw-item-9 { grid-column: span 9; }
.tw-item-10 { grid-column: span 10; }
.tw-item-11 { grid-column: span 11; }
.tw-item-12 { grid-column: span 12; }

@media (min-width: 600px) {
  .tw-item-sm-1 { grid-column: span 1; } .tw-item-sm-2 { grid-column: span 2; }
  .tw-item-sm-3 { grid-column: span 3; } .tw-item-sm-4 { grid-column: span 4; }
  .tw-item-sm-5 { grid-column: span 5; } .tw-item-sm-6 { grid-column: span 6; }
  .tw-item-sm-7 { grid-column: span 7; } .tw-item-sm-8 { grid-column: span 8; }
  .tw-item-sm-9 { grid-column: span 9; } .tw-item-sm-10 { grid-column: span 10; }
  .tw-item-sm-11 { grid-column: span 11; } .tw-item-sm-12 { grid-column: span 12; }
}

@media (min-width: 960px) {
  .tw-item-md-1 { grid-column: span 1; } .tw-item-md-2 { grid-column: span 2; }
  .tw-item-md-3 { grid-column: span 3; } .tw-item-md-4 { grid-column: span 4; }
  .tw-item-md-5 { grid-column: span 5; } .tw-item-md-6 { grid-column: span 6; }
  .tw-item-md-7 { grid-column: span 7; } .tw-item-md-8 { grid-column: span 8; }
  .tw-item-md-9 { grid-column: span 9; } .tw-item-md-10 { grid-column: span 10; }
  .tw-item-md-11 { grid-column: span 11; } .tw-item-md-12 { grid-column: span 12; }
}

@media (min-width: 1280px) {
  .tw-item-lg-1 { grid-column: span 1; } .tw-item-lg-2 { grid-column: span 2; }
  .tw-item-lg-3 { grid-column: span 3; } .tw-item-lg-4 { grid-column: span 4; }
  .tw-item-lg-5 { grid-column: span 5; } .tw-item-lg-6 { grid-column: span 6; }
  .tw-item-lg-7 { grid-column: span 7; } .tw-item-lg-8 { grid-column: span 8; }
  .tw-item-lg-9 { grid-column: span 9; } .tw-item-lg-10 { grid-column: span 10; }
  .tw-item-lg-11 { grid-column: span 11; } .tw-item-lg-12 { grid-column: span 12; }
}

@media (min-width: 1920px) {
  .tw-item-xl-1 { grid-column: span 1; } .tw-item-xl-2 { grid-column: span 2; }
  .tw-item-xl-3 { grid-column: span 3; } .tw-item-xl-4 { grid-column: span 4; }
  .tw-item-xl-5 { grid-column: span 5; } .tw-item-xl-6 { grid-column: span 6; }
  .tw-item-xl-7 { grid-column: span 7; } .tw-item-xl-8 { grid-column: span 8; }
  .tw-item-xl-9 { grid-column: span 9; } .tw-item-xl-10 { grid-column: span 10; }
  .tw-item-xl-11 { grid-column: span 11; } .tw-item-xl-12 { grid-column: span 12; }
}

/* ------------------------------------------------------------
   Home / footer bespoke classes (HomeContent.razor, MudFooter.razor)
   These were previously styled by MudBlazor typography; restored here.
   ------------------------------------------------------------ */
.home-highlight {
  color: var(--accent);
  font-weight: 600;
}

.home-title-bold {
  font-weight: 700;
  color: var(--text-1);
}

.home-section-title {
  font-weight: 600;
  color: var(--text-1);
}

.home-list {
  margin: var(--space-3) 0;
  padding-left: var(--space-5);
}
.home-list .tw-list-item {
  list-style: disc;
  border-bottom: none;
  padding: var(--space-1) 0;
}

.footer-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-stack {
  flex-direction: row;
  align-items: flex-start;
}
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.rights-reserved {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Compact public navigation and footer */
.tw-navbar-links {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.tw-navbar-links .tw-link { padding: var(--space-2); }
.tw-navbar-links .active { color: var(--accent); font-weight: 600; }
.tw-navbar-links .tw-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tw-appbar { flex-wrap: wrap; height: auto; min-height: var(--appbar-height); flex-shrink: 0; }
.tw-footer {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-2);
}
.tw-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  max-width: var(--content-max-width);
  margin: 0 auto;
}
.tw-footer-links, .tw-contact-social { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.tw-contact { overflow-wrap: anywhere; }
.tw-contact-social { margin-top: var(--space-4); }
.tw-web-shell .tw-brand { min-width: 0; text-decoration: none; }
.tw-web-shell .tw-logo { flex-shrink: 0; }
.tw-web-drawer-links { display: none; }
.tw-web-shell .tw-footer {
  box-sizing: border-box;
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
  padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
  overflow-wrap: anywhere;
}
.tw-web-shell .tw-footer-bottom > * { min-width: 0; }
@media (max-width: 860px) {
  .tw-web-shell .tw-appbar { flex-wrap: nowrap; padding: 0 var(--space-2); gap: var(--space-2); }
  .tw-web-shell .tw-appbar > .tw-icon-btn { flex-shrink: 0; }
  .tw-web-shell .tw-web-header-links { display: none; }
  .tw-web-drawer-links { display: block; border-bottom: 1px solid var(--border); margin-bottom: var(--space-3); padding-bottom: var(--space-2); }
  .tw-web-drawer-links .tw-navbar-links { margin-left: 0; gap: var(--space-1); }
  .tw-web-shell .tw-footer { padding-top: var(--space-2); }
}
@media (max-height: 480px) {
  .tw-web-shell .tw-appbar { min-height: 48px; }
  .tw-web-shell .tw-footer { padding-top: var(--space-1); padding-bottom: max(var(--space-1), env(safe-area-inset-bottom)); }
  .tw-web-shell .tw-main { padding-top: var(--space-2); padding-bottom: var(--space-2); }
}
@media (max-width: 600px) {
  .tw-footer-bottom { flex-direction: column; align-items: flex-start; }
  .tw-main { padding: var(--space-4); }
  /* Input/result panes need usable line lengths, not two tiny columns. */
  .tw-app-container > .tw-grid > .tw-item-6 { grid-column: span 12; }
  .tw-tooltip { min-width: 0; max-width: 100%; }
  .tw-info-popover {
    position: fixed; top: calc(var(--appbar-height) + 2 * var(--space-6));
    left: var(--space-4); right: var(--space-4); width: auto;
    max-width: none; max-height: calc(100dvh - 200px); overflow-y: auto;
    box-sizing: border-box; overflow-wrap: anywhere;
  }
}

/* Legacy MudBlazor typography shim still referenced by a few pages */
.app-mud-typography-h2 {
  font-size: var(--font-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mud-drawer-fluent {
  box-shadow: var(--shadow-3);
}