/* ==========================================================================
   MGS Holdings - foundation
   Design tokens, reset, and the controls shared by the store and the console.

   Typography note: the design specification suggested Inter or Montserrat.
   Both would mean loading a font service, which puts third-party code on the
   page and makes the privacy position harder to state honestly. A system font
   stack is used instead: same industrial, geometric feel, nothing fetched.
   ========================================================================== */

:root {
  /* Brand palette, from the UI/UX specification. */
  --navy: #0b132b;
  --navy-soft: #16203d;
  --crimson: #dc2626;
  --crimson-dark: #b91c1c;
  --canvas: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;

  --success: #15803d;
  --success-soft: #dcfce7;
  --warning: #b45309;
  --warning-soft: #fef3c7;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;
  --info: #1d4ed8;
  --info-soft: #dbeafe;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --radius: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.1);
  --shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);

  /* Layout width.
   *
   * The cap is deliberately wide so the site reads as near-full-width on the
   * laptop and desktop screens it will actually be used on, rather than sitting
   * in a narrow column with large empty margins either side. Above this width
   * it stops growing, because a line of body text that runs the full width of
   * an ultrawide monitor is hard to read.
   *
   * The gutter scales with the viewport instead of being a fixed number:
   *   - 16px floor, so content never touches the edge of a phone screen
   *   - 2.2vw in between, so the breathing room grows with the window
   *   - 44px ceiling, so it stops before it becomes a margin in its own right
   */
  --container: 1720px;
  --gutter: clamp(16px, 2.2vw, 44px);

  --header-height: 72px;
  --transition: 160ms ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--canvas);
}

body.has-overlay {
  overflow: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.015em;
}

p {
  margin: 0 0 1em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--crimson);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 3px solid var(--crimson);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.is-hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  font-weight: 600;
  transition: top var(--transition);
}

.skip-link:focus {
  top: 12px;
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition),
    transform var(--transition);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.55;
}

.btn--primary {
  background: var(--crimson);
  color: #fff;
}

.btn--primary:hover:not(:disabled) {
  background: var(--crimson-dark);
}

.btn--dark {
  background: var(--navy);
  color: #fff;
}

.btn--dark:hover:not(:disabled) {
  background: var(--navy-soft);
}

.btn--outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn--outline:hover:not(:disabled) {
  border-color: var(--navy);
  background: var(--canvas);
}

.btn--ghost {
  background: transparent;
  color: inherit;
  border-color: rgba(255, 255, 255, 0.28);
}

.btn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}

/* Outlined button for use over a dark background or a photograph. */
.btn--on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.btn--on-dark:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.btn--danger {
  background: var(--danger-soft);
  border-color: #fca5a5;
  color: var(--danger);
}

.btn--danger:hover:not(:disabled) {
  background: #fecaca;
}

.btn--sm {
  padding: 7px 12px;
  font-size: 0.85rem;
}

.btn--lg {
  padding: 14px 26px;
  font-size: 1.05rem;
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* --- Forms --------------------------------------------------------------- */

.field {
  margin-bottom: 16px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 600;
}

.label .req {
  color: var(--crimson);
}

.hint {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--crimson);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
  outline: none;
}

.textarea {
  min-height: 96px;
  resize: vertical;
}

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.input[aria-invalid='true'],
.textarea[aria-invalid='true'],
.select[aria-invalid='true'] {
  border-color: var(--danger);
}

.error {
  margin: 6px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--danger);
}

.radio-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* Honeypot. Hidden from people and from assistive technology, present in the
   DOM for anything filling in every field it can find. */
.guard-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Badges -------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--ok {
  background: var(--success-soft);
  color: var(--success);
}

.badge--off {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge--wait {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge--info {
  background: var(--info-soft);
  color: var(--info);
}

.badge--neutral {
  background: var(--border);
  color: var(--text-muted);
}

/* --- Overlays and drawers ------------------------------------------------ */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(11, 19, 43, 0.6);
}

.overlay.is-open {
  display: flex;
}

.overlay__panel {
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.overlay__panel--wide {
  max-width: 860px;
}

/* For a dialogue that asks one short question, such as a link address. At 640px the
   single field looks stranded in the middle of the card. */
.overlay__panel--narrow {
  max-width: 440px;
}

.overlay__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.overlay__head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.overlay__body {
  padding: 24px;
}

.overlay__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--canvas);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--canvas);
  color: var(--text);
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: none;
}

.drawer.is-open {
  display: block;
}

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 19, 43, 0.6);
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  height: 100%;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.drawer__head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.drawer__foot {
  padding: 18px 20px;
  border-top: 1px solid var(--border);
  background: var(--canvas);
}

/* --- Toast --------------------------------------------------------------- */

.toast-host {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  padding: 12px 20px;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
}

.toast--success {
  background: var(--success);
}

.toast--error {
  background: var(--danger);
}

/* --- Tables -------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.table th,
.table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}

.table th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--canvas);
  white-space: nowrap;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover {
  background: var(--canvas);
}

.empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
}

/* --- Rich text output ---------------------------------------------------- */

.rich h3,
.rich h4 {
  margin-top: 1.2em;
  font-size: 1rem;
}

.rich ul,
.rich ol {
  margin: 0 0 1em;
  padding-left: 22px;
}

.rich li {
  margin-bottom: 4px;
}

.rich blockquote {
  margin: 0 0 1em;
  padding-left: 14px;
  border-left: 3px solid var(--border);
  color: var(--text-muted);
}

.rich > *:last-child {
  margin-bottom: 0;
}

.stars {
  color: #f59e0b;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* --- Pagination ----------------------------------------------------------
   Shared by the storefront grid and the console tables, so the two cannot
   drift into behaving differently. */

.pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

.pagination__row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pagination__page {
  font-size: 0.92rem;
  font-weight: 700;
  min-width: 10ch;
  text-align: center;
}

.pagination__count {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* --- Wordmark ------------------------------------------------------------
   "MGS" in the inherited colour, "HOLDINGS" in crimson. Set tight, because
   the two halves read as one word. Inheriting the first half means the same
   markup works on the navy header and on the white sign-in card. */

.wordmark {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wordmark__primary {
  color: inherit;
}

.wordmark__accent {
  color: var(--crimson);
}

@media (max-width: 640px) {
  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .overlay {
    padding: 0;
    align-items: flex-end;
  }

  .overlay__panel {
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── "Built by Biz Enabla" ───────────────────────────────────────────────── */

/* Shared by the storefront footer, the workspace footer bar and the sign-in card. Here in
   base.css rather than in either page's stylesheet because all three load this file, and the
   alternative was the same block written out three times.

   The colours assume a dark background. All three places it appears are navy, and the logo
   asset is the white variant for the same reason — the brand logo is pure black, which on
   navy sits at about 1.14:1 and is effectively invisible. */
.built-by,
.built-by__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #94a3b8;
  text-decoration: none;
}

.built-by__link:hover {
  color: #fff;
}

.built-by__logo {
  height: 22px;
  width: auto;
}

.built-by__name {
  font-weight: 700;
  color: #cbd5e1;
}