/**
 * Module: /public/css/core.css
 * Updated: 2025-11-02
 * Batch #44 — “Perfection is achieved by subtraction.” — Aether Core
 * © Steam Factory — Built with ❤️ by the awesome crew at Steam Factory
 * chatGPT says, "and I helped!"
 *
 * Purpose:
 *   Unified, optimized stylesheet for the Steam Factory Portal.
 *   Provides global typography, button styles, table layouts, modals,
 *   and reusable utility classes with consistent brass/steampunk tone.
 */

/* =========================================================
   🎨 Index and Login Page Formatting
========================================================= */
body.sf-gradient,
body.sfp-gradient {
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .5), #000),
    url("/assets/gears-bg.jpg") center/cover no-repeat fixed;
  background-blend-mode: overlay;
}

/* =========================================================
   🎨 Base Typography & Structure
========================================================= */
html, body {
  font-family: "Zilla Slab", "Segoe UI", sans-serif;
  font-size: 16px;
  color: #222;
  margin: 0;
  padding: 0;
  background: #f8f9fa;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Agency FB", "Zilla Slab", sans-serif;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: #111;
}

p {
  margin: 0 0 1rem 0;
  line-height: 1.5;
}

/* =========================================================
   🧱 Layout Utilities
========================================================= */
.sfp-container {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.sfp-flex { display: flex; align-items: center; justify-content: center; }
.sfp-grid { display: grid; gap: 1rem; }
.sfp-hidden { display: none !important; }

/* =========================================================
   🪄 Buttons (Unified System)
========================================================= */
.sfp-btn {
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

/* Primary (Brass) */
.sfp-btn-primary {
  background: #ffcc00;
  color: #000;
}
.sfp-btn-primary:hover { background: #fff000; }

/* Secondary (Neutral Gray) */
.sfp-btn-secondary {
  background: #ccc;
  color: #000;
}
.sfp-btn-secondary:hover { background: #aaa; }

/* Confirm (Green) */
.sfp-btn-confirm {
  background: #28a745;
  color: #fff;
}
.sfp-btn-confirm:hover { background: #218838; }

/* Danger (Red) */
.sfp-btn-danger {
  background: #dc3545;
  color: #fff;
}
.sfp-btn-danger:hover { background: #c82333; }

/* Small Variant */
.sfp-btn-small {
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
}

/* Disabled */
.sfp-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================================
   ✉️ Send / Action Buttons — Steampunk Gold
========================================================== */
.sfp-btn-send {
  background: #ffcc00;
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.sfp-btn-send:hover {
  background: #fff000;
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.6);
}
.sfp-btn-send:active { transform: translateY(0); background: #e6b800; }

/* ==========================================================
   🧾 Quotes Header Layout
========================================================== */
.sfv-quotes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.sfp-btn-newquote {
  background: #ffcc00;
  color: #000;
  font-weight: 700;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  transition: all 0.2s ease;
  box-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.sfp-btn-newquote:hover {
  background: #fff000;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.35);
}

/* ==========================================================
   📦 Order Detail Layout
   ========================================================== */
.sfp-order-builds th,
.sfp-order-builds td {
  text-align: center;
  vertical-align: middle;
}

/* Narrow columns */
.sfp-order-builds th:nth-child(1),
.sfp-order-builds td:nth-child(1) {
  width: 50px;
}

.sfp-order-builds th:nth-child(2),
.sfp-order-builds td:nth-child(2) {
  width: 120px; /* Technology (SLA, SLS, etc.) */
}

.sfp-order-builds th:nth-child(3),
.sfp-order-builds td:nth-child(3) {
  width: 160px; /* Material */
}

.sfp-order-builds th:nth-child(4),
.sfp-order-builds td:nth-child(4) {
  width: 120px; /* Total */
  text-align: right;
}

/* ==========================================================
   🧾 Order Summary Table
   ========================================================== */
.sfp-order-summary {
  margin-top: 1.5rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  padding: 1rem 1.25rem;
}

.sfp-order-summary h3 {
  font-family: "Agency FB", "Zilla Slab", sans-serif;
  text-transform: uppercase;
  font-size: 1.25rem;
  color: #111;
  margin-bottom: 1rem;
}

/* Totals layout */
.sfp-order-totals {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.sfp-order-totals th {
  width: 80%;
  text-align: right;
  padding: 0.5rem 0.75rem;
  color: #333;
  background: #fafafa;
}

.sfp-order-totals td {
  width: 120px;
  text-align: right;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
}

.sfp-order-totals tr.sfp-total th,
.sfp-order-totals tr.sfp-total td {
  border-top: 2px solid #ffcc00;
  font-size: 1.05rem;
}

.sfp-btn-proceed {
  margin-top: 0.5rem;
}

/* ==========================================================
   💡 Membership Tip
   ========================================================== */
.sfp-membership-tip {
  margin-top: 0.75rem;
  font-size: 0.95rem;
}

.sfp-membership-tip a.sfp-link {
  color: #ffcc00;
  font-weight: 600;
  text-decoration: none;
}

.sfp-membership-tip a.sfp-link:hover {
  text-decoration: underline;
}



/* ==========================================================
   🎯 Status Badges — Shared Between Orders & Quotes
========================================================== */
.sfp-status-badge {
  display: inline-block;
  min-width: 110px;
  min-height: 20px;
  line-height: 1.4;
  padding: 6px 6px;
  border-radius: 5px !important;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: capitalize;
  text-align: center;
  color: #fff;
  background: linear-gradient(145deg, #3a3a3a, #1e1e1e);
  border: 1px solid rgba(255, 204, 0, 0.25);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.4),
    inset 0 0 3px rgba(255,204,0,0.15);
  transition: all 0.15s ease;
  vertical-align: middle;
}

/* Hover */
.sfp-status-badge:hover {
  transform: translateY(-1px);
  box-shadow:
    0 2px 5px rgba(0,0,0,0.35),
    inset 0 0 5px rgba(255,204,0,0.25);
}

/* Color Variants */
.sfp-status-badge.draft {
  background: linear-gradient(145deg, #7a7a7a, #5c5c5c);
  border-color: #8a8a8a;
}
.sfp-status-badge.submitted {
  background: linear-gradient(145deg, #2196f3, #0b63c9);
  border-color: #0b63c9;
}
.sfp-status-badge.quoted {
  background: linear-gradient(145deg, #ffd54f, #ffb300);
  color: #000;
  border-color: #cc9a00;
}
.sfp-status-badge.pending-payment {
  background: linear-gradient(145deg, #ffb703, #d68b00);
  color: #000;
  border-color: #cc9000;
}
.sfp-status-badge.paid {
  background: linear-gradient(145deg, #43a047, #2e7d32);
  border-color: #2e7d32;
}
.sfp-status-badge.canceled,
.sfp-status-badge.cancelled {
  background: linear-gradient(145deg, #e74c3c, #b71c1c);
  border-color: #b71c1c;
}

/* ==========================================================
   🧾 Portal Table Column Standards (Unified Layout)
========================================================== */
.sfp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: #fff;
}

/* 🔹 Headers */
.sfp-table-head th,
.sfp-orders-table thead th,
.sfp-quotes-table thead th {
  background: #2c2c2c;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid #444;
  padding: 0.75rem 0.75rem;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  font-family: "Zilla Slab", "Segoe UI", sans-serif;
}

/* 🔹 Cells */
.sfp-table td {
  border: 1px solid #ccc;
  padding: 0.6rem 0.75rem;
  vertical-align: middle;
  white-space: nowrap;
  font-family: "Zilla Slab", "Segoe UI", sans-serif;
  font-size: 0.95rem;
  text-align: center;
}

/* 🔹 Exceptions */
.sfp-table td.sfp-col-title { text-align: left; }
.sfp-table td.sfp-col-total { text-align: right; }

/* 🔹 Column sizing */
th.sfp-col-order,  td.sfp-col-order,
th.sfp-col-rfq,    td.sfp-col-rfq       { width: 110px; }
th.sfp-col-revision, td.sfp-col-revision{ width: 90px; }
th.sfp-col-title,  td.sfp-col-title     { min-width: 240px; max-width: 100%; }
th.sfp-col-date,   td.sfp-col-date      { width: 120px; }
th.sfp-col-total,  td.sfp-col-total     { width: 110px; }
th.sfp-col-status, td.sfp-col-status    { width: 140px; }
th.sfp-col-actions,td.sfp-col-actions   { width: 160px; }

/* ✨ Subtle brass edge under headers */
.sfp-table-head tr {
  box-shadow: inset 0 -2px 0 rgba(255, 204, 0, 0.25);
}

/* ==========================================================
   🧱 Steam Factory Portal — Modal Framework
========================================================== */
.sfp-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  z-index: 999999;
  overflow: hidden;
  transition: opacity 0.2s ease-in-out;
}
.sfp-modal.hidden { display: none !important; }

.sfp-modal-content {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  width: min(620px, 95vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sfpModalAppear 0.25s ease-out;
  font-family: "Zilla Slab", "Segoe UI", sans-serif;
}
@keyframes sfpModalAppear {
  from { opacity: 0; transform: translateY(25px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sfp-modal-header {
  background: linear-gradient(180deg, #fff8e1 0%, #fff 100%);
  padding: 1rem 1.25rem;
  border-bottom: 2px solid #ffcc00;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sfp-modal-header h2 { margin: 0; font-size: 1.3rem; color: #222; }
.sfp-modal-close {
  background: none; border: none; font-size: 1.3rem; color: #444;
  cursor: pointer; transition: color 0.2s ease, transform 0.15s ease;
}
.sfp-modal-close:hover { color: #000; transform: scale(1.15); }

.sfp-modal-body {
  padding: 1.25rem;
  flex: 1;
  overflow-y: auto;
  color: #333;
  background: #fff;
}
.sfp-modal-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: 0.95rem;
}
.sfp-modal-table th,
.sfp-modal-table td {
  border: 1px solid #ddd;
  padding: 0.45rem 0.6rem;
}
.sfp-modal-table th {
  background: #ffcc00;
  color: #000;
  text-align: left;
}
.sfp-modal-summary {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  margin-top: 1rem;
  border-top: 2px solid #ffcc00;
  padding-top: 0.6rem;
}
.sfp-modal-footer {
  background: #fafafa;
  border-top: 1px solid #ddd;
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* ==========================================================
   💬 Dialog Modals (Alert, Confirm, Prompt)
========================================================== */
.sfp-dialog {
  max-width: 420px;
  animation: sfpDialogPop 0.25s ease-out;
}
@keyframes sfpDialogPop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.sfp-modal-confirm .sfp-modal-body p {
  font-size: 1.05rem;
  color: #222;
  text-align: center;
  padding: 1rem 0;
}
.sfp-modal-confirm .sfp-modal-footer {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding-top: 1rem;
}

/* ==========================================================
   🧩 Utilities
========================================================== */
.sfp-center-text { text-align: center; }
.sfp-right-text  { text-align: right; }
.sfp-bold { font-weight: 700; }
.sfp-muted { color: #666; }

/* ==========================================================
   ✨ Animations
========================================================== */
@keyframes sfp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sfp-fade-up {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}