/* ─────────────────────────────────────────────────────────────────────────
   FormSlideout — right-anchored slide-in flyout panel.
   Ported verbatim (dimensions/animation/colors) from the React reference
   src/components/layout/FormSlideout.css so the Blazor flyout matches the
   React app pixel-for-pixel. The React "env" theming (var(--brand-*)) is
   mapped onto the Blazor project theme tokens (--projectrac-primary-color /
   --projectrac-secondary-color); "neutral" keeps the dark #222 header.

   NOTE: the odd decimal px values (12.8 / 35.2 / 9.6 / 3.2 / 53.6 …) are the
   React app's 0.8x-scaled sizes — preserve them exactly for parity.
   ───────────────────────────────────────────────────────────────────────── */

.form-slideout-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 200;
}

.form-slideout {
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;
  background: #ffffff;
  box-shadow: -3.2px 0 9.6px rgba(0, 0, 0, 0.15);
  border-left: 1.6px solid #222;
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.3s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.form-slideout-env {
  border-left-color: var(--projectrac-primary-color, #222);
}

.form-slideout.open {
  transform: translateX(0);
}

.form-slideout.expanded {
  width: 100%;
}

/* Header — env-themed */
.form-slideout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12.8px;
  height: 56px;
  box-sizing: border-box;
  background-color: #222;
  color: white;
  flex-shrink: 0;
}

.form-slideout-env .form-slideout-header {
  background-color: var(--projectrac-primary-color, #222);
}

.form-slideout-env-neutral .form-slideout-header {
  background-color: #222;
}

.form-slideout-header-left {
  display: flex;
  align-items: center;
  gap: 12.8px;
}

.form-slideout-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16px;
}

.form-slideout-expand {
  background: none;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 17.6px;
  cursor: pointer;
  padding: 0;
  line-height: 11.2px;
  position: relative;
  top: -1.6px;
}

.form-slideout-expand:hover {
  color: rgba(255, 255, 255, 1);
}

/* Close (X) — top-right of header. Only rendered when ShowCloseButton. */
.form-slideout-close-x {
  background: none;
  border: none;
  font-size: 20.8px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  padding: 0 6.4px;
  transition: color 0.12s;
}

.form-slideout-close-x:hover {
  color: #fff;
}

/* Body — the thin 6.4px scrollbar comes from the app-wide rule in app.css
   (which mirrors the React app's global bar). No scrollbar-gutter: a stable
   gutter reserves a permanent ~6px empty strip on the right even when the form
   fits without scrolling (it reads as extra right padding); dropping it lets
   the thin bar overlay the content only while actually scrolling, like React. */
.form-slideout-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 35.2px 16px;
  position: relative;
}

/* Footer */
.form-slideout-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 35.2px;
  height: 53.6px;
  box-sizing: border-box;
  border-top: 1.6px solid #d9d9d9;
  background: #eae8e5;
  flex-shrink: 0;
}

.form-slideout-footer-spacer {
  flex: 1;
}

.form-slideout-btn {
  font-size: 10.4px;
  font-weight: 600;
  padding: 6.4px 14.4px;
  border-radius: 3.2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.form-slideout-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Cancel — Cancelled-status colorway (red text on tinted red bg). */
.form-slideout-btn-cancel {
  background: rgba(217, 54, 54, 0.18);
  border: 1px solid transparent;
  color: #c22;
}

.form-slideout-btn-cancel:hover {
  background: rgba(217, 54, 54, 0.28);
  color: #c22;
}

/* Save Draft — gray at rest, env-secondary on hover when enabled. */
.form-slideout-btn-draft {
  background: #ccc;
  border-color: #ccc;
  color: #555;
}

.form-slideout-btn-draft:hover:not(:disabled) {
  background: #4282c0;
  border-color: #4282c0;
  color: #ffffff;
}

.form-slideout-env .form-slideout-btn-draft:hover:not(:disabled) {
  background: var(--projectrac-secondary-color, #4282c0);
  border-color: var(--projectrac-secondary-color, #4282c0);
  color: #ffffff;
}

.form-slideout-btn-draft:disabled {
  background: #ccc;
  border-color: #ccc;
  color: #999;
  cursor: not-allowed;
  opacity: 1;
}

/* Submit — "Approved" status palette: light-green fill + dark-green text. */
.form-slideout-btn-submit {
  background: rgba(44, 162, 76, 0.18);
  border-color: transparent;
  color: #2a7f2a;
}

.form-slideout-btn-submit:hover:not(:disabled) {
  background: rgba(44, 162, 76, 0.30);
  border-color: transparent;
  color: #1f5f1f;
}

.form-slideout .form-slideout-btn-submit:disabled,
.form-slideout-env .form-slideout-btn-submit:disabled,
.form-slideout-env-neutral .form-slideout-btn-submit:disabled {
  background: #ccc;
  border-color: #ccc;
  color: #999;
  cursor: not-allowed;
  opacity: 1;
}