/**
 * Phase 4 — minimal Metro utility/layout stand-ins for the SPA shell.
 * Loaded instead of CDN metro.css.
 * Icons: Bootstrap Icons (vendors/bootstrap-icons) — see .bi-* size helpers below.
 */

/* Display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

/* Spacing (Metro 4px step) */
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.mt-10 { margin-top: 40px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-10 { margin-bottom: 40px !important; }
.mr-2 { margin-right: 8px !important; }
.ml-2 { margin-left: 8px !important; }
.p-0 { padding: 0 !important; }
.p-2 { padding: 8px !important; }
.p-3 { padding: 12px !important; }
.p-4 { padding: 16px !important; }
.p-6 { padding: 24px !important; }
.pt-4 { padding-top: 16px !important; }
.pt-6 { padding-top: 24px !important; }
.pb-2 { padding-bottom: 8px !important; }
.pb-6 { padding-bottom: 24px !important; }

/* Text */
.text-bold { font-weight: 700 !important; }
.text-muted { color: #8a96a0 !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.reduce-1 { font-size: 0.9em !important; }

/* Colors */
.fg-white { color: #ffffff !important; }
.fg-cyan { color: #1ba1e2 !important; }
.fg-red { color: #ce352c !important; }
.fg-orange { color: #fa6800 !important; }
.bg-cyan { background-color: #1ba1e2 !important; }
.bg-green { background-color: #60a917 !important; }
.bg-orange { background-color: #fa6800 !important; }
.bg-red { background-color: #ce352c !important; }
.bg-light { background-color: #f8f8f8 !important; }
.bg-lightBlue { background-color: #3ecbff !important; }
.bg-teal { background-color: #00aba9 !important; }
.bg-blue { background-color: #00aff0 !important; }
/* App bar class still present on shell; real bg comes from scan-shell --scan-appbar-bg */
.bg-reserve-steppe { background-color: #5a6a4a !important; }

/* Layout: Metro row/cell approximation */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -6px;
  margin-right: -6px;
}
.cell,
.col {
  flex: 1 0 0;
  max-width: 100%;
  padding: 6px;
  box-sizing: border-box;
}

/* Borders / shadow */
.border-bottom { border-bottom: 1px solid #e4e8ec; }
.border-top { border-top: 1px solid #e4e8ec; }
.border-left { border-left: 1px solid #e4e8ec; }
.border-radius { border-radius: 0.25rem; }
.rounded { border-radius: 0.25rem !important; }
.shadow {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 5px 0 rgba(0, 0, 0, 0.08);
}

/* Buttons (subset used by P0 pages) */
.button,
a.button,
button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.2;
  height: 36px;
  min-height: 36px;
  border-radius: 0.25rem;
  background-color: #ebebeb;
  color: #1d1d1d;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.button:hover,
a.button:hover,
button.button:hover {
  background-color: #dcdcdc;
}
.button.small {
  height: 28px;
  min-height: 28px;
  padding: 0 0.5rem;
  font-size: 0.8125rem;
}
.button.primary {
  background-color: #0366d6;
  color: #fff;
}
.button.primary:hover {
  background-color: #024ea4;
  color: #fff;
}
.button.secondary {
  background-color: #607d8b;
  color: #fff;
}
.button.secondary:hover {
  background-color: #4b636e;
  color: #fff;
}
.button.success {
  background-color: #60a917;
  color: #fff;
}
.button.success:hover {
  background-color: #4c8612;
  color: #fff;
}
.button.info {
  background-color: #1ba1e2;
  color: #fff;
}
.button.info:hover {
  background-color: #1580b5;
  color: #fff;
}
.button.alert {
  background-color: #ce352c;
  color: #fff;
}
.button.alert:hover {
  background-color: #a52a23;
  color: #fff;
}
.button.outline {
  background-color: transparent;
}
.button.outline.primary {
  color: #0366d6;
  border-color: #0366d6;
}
.button.outline.primary:hover {
  background-color: #0366d6;
  color: #fff;
}
.button.outline.secondary {
  color: #607d8b;
  border-color: #607d8b;
}
.button.outline.secondary:hover {
  background-color: #607d8b;
  color: #fff;
}
.button.outline.info {
  color: #1ba1e2;
  border-color: #1ba1e2;
}
.button.outline.info:hover {
  background-color: #1ba1e2;
  color: #fff;
}

/* Flex helpers occasionally used with d-flex */
.flex-justify-center { justify-content: center; }
.flex-align-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }

/* ---- Phase 4 expansions: login + common P0 Metro stand-ins ---- */

/* Size */
.h-100 { height: 100% !important; }
.w-100 { width: 100% !important; }

/* Margin / padding extras used on P0 pages */
.m-0 { margin: 0 !important; }
.m-3 { margin: 12px !important; }
.no-margin { margin: 0 !important; }
.p-md-4 { padding: 16px !important; }

/* Text extras */
.text-weight-7 { font-weight: 700 !important; }
.text-leader { font-size: 1.25rem !important; font-weight: 300; }
.text-small { font-size: 0.8em !important; }
.text-upper { text-transform: uppercase !important; }
.reduce-2 { font-size: 0.8em !important; }

/* Borders / colors */
.bd-white { border-color: #ffffff !important; }
.border-bottom.bd-white,
.border-top.bd-white {
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Shadows */
.shadow-large-extra {
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.22),
    0 6px 14px rgba(0, 0, 0, 0.14) !important;
}

/* Z-index */
.z-1 { z-index: 1 !important; }

/* Containers */
.container,
.container-xl {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}
.container-xl {
  max-width: 1200px;
}

/* Flex helpers (Metro naming) */
.flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.flex-justify-content-center,
.flex-justify-center {
  justify-content: center !important;
}
.flex-justify-between {
  justify-content: space-between !important;
}
.flex-align-center {
  align-items: center !important;
}
.flex-wrap {
  flex-wrap: wrap !important;
}

/* Glass / box (fallback; jsindex also defines bg-glassmorphism) */
.bg-glassmorphism {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.box {
  display: block;
  position: relative;
  box-sizing: border-box;
}

/* Forms */
.form-group {
  display: block;
  position: relative;
}
.form-group + .form-group {
  margin-top: 1rem;
}
.form-actions {
  margin: 10px 0;
  display: block;
  position: relative;
}

/* Link-style button (login forgot / back links) */
.button.link,
button.button.link,
a.button.link {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: inherit;
  height: auto;
  min-height: 0;
  padding: 0;
  text-decoration: none;
}
.button.link:hover,
button.button.link:hover,
a.button.link:hover {
  background-color: transparent !important;
  text-decoration: underline;
  color: inherit;
}

/* Responsive cells (Metro 12-col approximations) */
.cell-sm-6,
.cell-md-4,
.cell-md-6,
.cell-md-8,
.cell-md-12,
.cell-lg-3,
.cell-lg-4,
.cell-lg-8,
.cell-ld-12 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 6px;
  box-sizing: border-box;
}

@media screen and (min-width: 576px) {
  .cell-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media screen and (min-width: 768px) {
  .cell-md-4 {
    flex: 0 0 33.33334%;
    max-width: 33.33334%;
  }
  .cell-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .cell-md-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .cell-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media screen and (min-width: 992px) {
  .cell-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .cell-lg-4 {
    flex: 0 0 33.33334%;
    max-width: 33.33334%;
  }
  .cell-lg-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
}

@media screen and (min-width: 1200px) {
  .cell-ld-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Animations used by login loader / invalid form shake */
@keyframes ani-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}
.ani-spin {
  display: inline-block;
  animation: ani-spin 1.5s linear infinite;
}

@keyframes ani-ring {
  0% { transform: rotate(-15deg); }
  2% { transform: rotate(15deg); }
  4% { transform: rotate(-18deg); }
  6% { transform: rotate(18deg); }
  8% { transform: rotate(-22deg); }
  10% { transform: rotate(22deg); }
  12% { transform: rotate(-18deg); }
  14% { transform: rotate(18deg); }
  16% { transform: rotate(-12deg); }
  18% { transform: rotate(12deg); }
  20%, 100% { transform: rotate(0deg); }
}
.ani-ring {
  transform-origin: 50% 0;
  animation: ani-ring 1s ease;
}

/* Bootstrap Icons size helpers (parity with former mif-2x/3x/4x) */
.bi-2x { font-size: 1.5em; }
.bi-3x { font-size: 2em; }
.bi-4x { font-size: 2.5em; }
.bi-5x { font-size: 3em; }