/*
 * RackMapper-EP — application chrome (shared)
 * -----------------------------------------------------------------------
 * Small, generic pieces shared by every in-app page: the header
 * additions (suite label, current-page nav state, status pill), a
 * panel-heading/field system used inside the v2 canvas pages' bottom
 * sheets, and the base choice-chip control.
 *
 * The old full-screen "config panel + canvas + summary panel" CAD shell
 * that used to live in this file has been retired — warehouse.html and
 * racking.html are now built on css/app-canvas.css's canvas-first shell
 * instead (one dominant canvas/preview, floating chrome, an on-demand
 * bottom sheet for everything secondary). Nothing here duplicates
 * anything already shared by the homepage (css/style.css) — buttons,
 * nav, brand, theme toggle, icons, the tool rail, and hud-chip/
 * layer-check are reused as-is from there.
 *
 * Every in-app page should link tokens.css + style.css + this file +
 * app-canvas.css, in that order.
 *
 * Backs the real, live application chrome shared across every in-app
 * page — not a static mockup.
 */

/* ---------------------------------------------------------------------
   App header additions
   The header itself reuses .nav / .nav-inner / .brand / .nav-links /
   .nav-actions / .theme-toggle from style.css untouched. This just adds
   the pieces those homepage rules don't need: a suite label next to the
   wordmark, a current-page nav state, and a project status pill.
--------------------------------------------------------------------- */
.suite-label {
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-left: var(--space-2);
  padding-left: var(--space-2);
  border-left: 1px solid var(--border-strong);
  align-self: center;
}
.nav-links .nav-link-current {
  color: var(--accent);
  font-weight: 700;
  cursor: default;
}
.nav-links .nav-link-current::after { display: none; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.status-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.status-pill-draft {
  background: var(--bg-elevated-2);
  border-color: var(--border-strong);
  color: var(--text-muted);
}
.status-pill-ready {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

/* ---------------------------------------------------------------------
   Panel heading pieces — reused inside a bottom sheet's sections
   (css/app-canvas.css's .sheet-section) as plain in-flow headings.
--------------------------------------------------------------------- */
.panel-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 0.82em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-4);
}
.panel-title-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.panel-note {
  font-size: 0.82em;
  line-height: 1.6;
  color: var(--text-faint);
  margin: -6px 0 var(--space-4);
}

/* ---------------------------------------------------------------------
   Form fields — shared by every settings panel on every in-app page
--------------------------------------------------------------------- */
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.82em;
  font-weight: 700;
  color: var(--text);
}
.field-hint { font-size: 0.85em; font-weight: 500; color: var(--text-faint); flex-basis: 100%; }

.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field textarea {
  width: 100%;
  min-height: 44px;                 /* touch target */
  padding: 10px 13px;
  font-family: var(--font-sans);
  font-size: 0.95em;
  color: var(--text);
  background: var(--bg-sunken);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.field textarea { min-height: 84px; resize: vertical; font-family: var(--font-sans); }
.field select {
  width: 100%;
  min-height: 44px;                 /* touch target */
  padding: 10px 36px 10px 13px;
  font-family: var(--font-sans);
  font-size: 0.95em;
  color: var(--text);
  background: var(--bg-sunken) var(--select-chevron) no-repeat right 12px center;
  background-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.btn-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }

/* ---------------------------------------------------------------------
   Choice chip — the base pill control reused standalone for the bottom
   sheet's own tab labels (css/app-canvas.css drives their selected
   state; this just supplies the shared shape/hover/typography). */
.choice-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;                 /* touch target */
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 0.86em;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-sunken);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.choice-chip.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* Hidden radio inputs driving the bottom sheet's own tabs — see
   css/app-canvas.css for the ~ combinator rules that read these. */
.config-tab-radio { position: absolute; opacity: 0; pointer-events: none; }

/* HUD chips inside a canvas reuse .canvas-hud / .hud-chip from style.css
   untouched. This is just a size bump for a real, full-scale page — the
   homepage's hero mockup keeps its smaller default size. */
.hud-chip-lg { font-size: 0.8em; padding: 5px 12px; }

/* ---------------------------------------------------------------------
   Styled dialogs (js/dialogs.js) — the alert()/confirm() replacement
   used across every EP page. Same async open/close pattern production
   already uses for its own modal (Rackmapper/js/rackmapper.js
   appAlert/appConfirm), rebuilt here against EP's own tokens instead
   of importing production's page-specific CSS.
--------------------------------------------------------------------- */
.ep-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.ep-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }

.ep-modal {
  position: fixed;
  z-index: 201;
  top: 50%;
  left: 50%;
  width: min(400px, calc(100vw - var(--space-6)));
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -48%) scale(0.97);
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              visibility 0s linear var(--duration-fast);
}
.ep-modal.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              visibility 0s;
}
.ep-modal-title { font-family: var(--font-display); font-size: 1.05em; font-weight: 700; margin: 0 0 var(--space-3); color: var(--text); }
.ep-modal-message { font-size: 0.92em; line-height: 1.6; color: var(--text-muted); margin: 0 0 var(--space-5); }
.ep-modal-input {
  display: block; width: 100%; min-height: 40px; margin: -8px 0 var(--space-5);
  padding: 8px 10px; font-family: var(--font-sans); font-size: 0.9em; font-weight: 600;
  color: var(--text); background: var(--bg-sunken); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.ep-modal-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ep-modal-actions { display: flex; justify-content: flex-end; gap: var(--space-3); }

/* ---------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------- */
@media (max-width: 640px) {
  .field-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Mobile edge breathing room (iPhone/small-screen safe area)
   Appended at file end for cascade precedence. Keeps .ep-modal's
   existing centring/animation untouched — only clamps its width so the
   dialog can never sit flush against the screen edges on a phone.
--------------------------------------------------------------------- */
@media (max-width: 600px) {
  .ep-modal {
    width: min(400px, calc(100vw - var(--edge-pad-l) - var(--edge-pad-r)));
  }
}