/* =========================================================
   PageStylesShared.css
   Reusable page-level primitives
   ---------------------------------------------------------
   Scope:
   - Shared page spacing / workspace rhythm

   Notes:
   - Keep this file limited to reusable page patterns.
   - Do not place page-specific grid layouts or table layouts here.
   ========================================================= */


/* =========================================================
   Page that needs a scoped height/overflow host so the table region can own
   its internal scroll and keep the pager anchored above the footer.

   Example: This is defined in Products.razor.css instead of ProductsShared.razor.css
   because the .products-page-host class is applied in Products.razor, and
   Blazor CSS isolation only affects markup rendered by the matching component.
   ========================================================= */
.page-host-fill {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 5px;
}

  .page-host-fill > * {
    flex: 1 1 auto;
    min-height: 0;
  }

/* =====================================
   Unsaved Changes Guard Modal
   ---------------------------------------------------------
   Shared modal used by edit/create pages to protect unsaved
   form data during internal navigation. The modal stays compact,
   centered, and visually consistent with the enterprise shell.
   ===================================== */

.unsaved-guard-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
}

.unsaved-guard-shell {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.unsaved-guard-card {
  width: min(520px, 100%);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
  overflow: hidden;
}

.unsaved-guard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.unsaved-guard-title {
  margin: 0;
  color: #0f2344;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.unsaved-guard-subtitle {
  margin: 6px 0 0;
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.35;
}

.unsaved-guard-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #eef2f7;
  color: #334155;
  font-size: 1.35rem;
  line-height: 1;
}

  .unsaved-guard-close:hover:not(:disabled) {
    background: #e2e8f0;
  }

  .unsaved-guard-close:disabled {
    opacity: 0.55;
  }

.unsaved-guard-body {
  padding: 18px 22px;
}

.unsaved-guard-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, 0.26);
  border-radius: 12px;
  background: #fffbeb;
  color: #7c4a03;
  font-size: 0.88rem;
  line-height: 1.35;
}

  .unsaved-guard-alert .bi {
    margin-top: 1px;
    color: #b45309;
  }

.unsaved-guard-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 20px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  background: #f8fafc;
}

/* =====================================
   Unsaved Modal Close Guard Layer
   ---------------------------------------------------------
   Keeps modal-close confirmation prompts above nested modal
   shells such as Product Image Asset editors.
   ===================================== */

.unsaved-modal-close-guard-backdrop {
  z-index: 12990;
}

.unsaved-modal-close-guard-shell {
  z-index: 13000;
}