/* Saont™ Universal UI Primitives
   Purpose: single source of truth for core primitives (buttons, checkboxes, modals, unique fields)
   NOTE: Keep this file lightweight and reusable across the whole stack.
*/

:root{
  --saont-cursor: url("/cursors/saont-cursor-circle.svg") 24 24, auto;
  --saont-navy: #1A1F36;
  --saont-ink: #ffffff;
  --saont-deep: #0A0C15;
  --saont-border: #B0B0B0;
  --saont-eb: #00BFFF;

  --saont-text-strong: rgba(255,255,255,0.92);
  --saont-text: rgba(255,255,255,0.82);
  --saont-text-muted: rgba(255,255,255,0.70);

  --saont-radius-btn: 14px;
  --saont-radius-tile: 18px;
  --saont-radius-field: 14px;
}

/* =========================
   Button typography baseline
   ========================= */

.btn,
.saont-btn,
button.btn,
button.saont-btn{
  font-size: 14px;
  font-family: "League Spartan", "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.02em;
}

button{ font-family: "League Spartan", "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif; }
/* =========================
   Universal button hierarchy
   Tier 1: Primary Authority (strongest aura)
   Tier 2: Active Operational (moderate aura)
   Tier 3: Utility (minimal aura)
   ========================= */

.saont-btn{
  font-size: 14px;
  appearance:none;
  border-radius: var(--saont-radius-btn) !important;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(180deg, rgba(26,31,54,0.92), rgba(10,12,21,0.92));
  color: rgba(255,255,255,0.92) !important;
  box-shadow: inset 0 0 0 1px rgba(0,191,255,0.08);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
  cursor:pointer;
  line-height: 1;
  white-space: nowrap;
  font-family: "League Spartan", "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
}

.saont-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.28);
  box-shadow:
    inset 0 0 0 1px rgba(0,191,255,0.18),
    0 0 0 2px rgba(0,191,255,0.12),
    0 0 22px rgba(0,191,255,0.20),
    0 14px 30px rgba(0,0,0,0.42);
  color: #ffffff !important;
}

.saont-btn:active{
  transform: translateY(0px);
  box-shadow:
    inset 0 0 0 1px rgba(0,191,255,0.18),
    0 8px 18px rgba(0,0,0,0.35);
}

.saont-btn:focus-visible{
  outline:none;
  border-color:#ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(0,191,255,0.22),
    0 0 0 2px rgba(0,191,255,0.18),
    0 0 26px rgba(0,191,255,0.24);
  color:#ffffff !important;
}

/* Tier 1 */
.saont-btn--primary{
  border-color: rgba(0,191,255,0.32);
  box-shadow:
    inset 0 0 0 1px rgba(0,191,255,0.22),
    0 0 0 2px rgba(0,191,255,0.14),
    0 0 26px rgba(0,191,255,0.24),
    0 14px 30px rgba(0,0,0,0.42);
}

.saont-btn--primary:hover{
  border-color:#ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(0,191,255,0.28),
    0 0 0 2px rgba(0,191,255,0.18),
    0 0 34px rgba(0,191,255,0.30),
    0 18px 36px rgba(0,0,0,0.45);
  color:#ffffff !important;
}

/* Tier 2 */
.saont-btn--secondary{
  border-color: rgba(255,255,255,0.18);
  box-shadow:
    inset 0 0 0 1px rgba(0,191,255,0.14),
    0 12px 26px rgba(0,0,0,0.36);
}

.saont-btn--secondary:hover{
  border-color:#ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(0,191,255,0.18),
    0 0 0 2px rgba(0,191,255,0.12),
    0 0 24px rgba(0,191,255,0.20),
    0 16px 30px rgba(0,0,0,0.42);
  color:#ffffff !important;
}

/* Tier 3 */
.saont-btn--utility{
  padding: 10px 14px;
  border-color: var(--saont-border);
  box-shadow: inset 0 0 0 1px rgba(0,191,255,0.06);
}

.saont-btn--utility:hover{
  border-color: rgba(255,255,255,0.26);
  box-shadow:
    inset 0 0 0 1px rgba(0,191,255,0.12),
    0 0 0 2px rgba(0,191,255,0.08),
    0 0 18px rgba(0,191,255,0.16),
    0 14px 26px rgba(0,0,0,0.36);
  color:#ffffff !important;
}

.saont-btn[disabled],
.saont-btn:disabled{
  opacity: 0.55;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    0 8px 18px rgba(0,0,0,0.25);
}


/* =========================
   Universal checkbox (single-square)
   Outer fill: #0A0C15
   Border: #B0B0B0
   Hover/checked: white border + electric blue aura
   Tick: white + tiny EBA
   ========================= */

.saont-checkbox{
  display:flex !important;
  align-items:flex-start;
  gap: 10px;
  justify-content:flex-start !important;
  cursor:pointer;
  user-select:none;
}

.saont-checkbox input{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
}

.saont-checkbox-ui{
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--saont-deep) !important;
  border: 1px solid var(--saont-border) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.55);
  position: relative;
  transition: box-shadow 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

/* Remove the previous inner square layer */
.saont-checkbox-ui::before{ content:none !important; }

.saont-checkbox:hover .saont-checkbox-ui{
  border-color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.55),
    0 0 0 2px rgba(0,191,255,0.18),
    0 0 16px rgba(0,191,255,0.22);
  transform: translateY(-0.5px);
}

.saont-checkbox input:focus-visible + .saont-checkbox-ui{
  outline:none;
  border-color:#ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.55),
    0 0 0 2px rgba(0,191,255,0.22),
    0 0 20px rgba(0,191,255,0.26);
}

.saont-checkbox input:checked + .saont-checkbox-ui{
  border-color:#ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.55),
    0 0 0 2px rgba(0,191,255,0.20),
    0 0 22px rgba(0,191,255,0.28);
}

.saont-checkbox input:checked + .saont-checkbox-ui::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 6px;
  transform: translate(-50%, -55%) rotate(-45deg);
  border-left: 2px solid rgba(255,255,255,0.98);
  border-bottom: 2px solid rgba(255,255,255,0.98);
  filter: drop-shadow(0 0 2px rgba(0,191,255,0.35));
}

/* =========================
   Universal modal positioning (centred + internal scroll)
   ========================= */

.saont-modal{
  position: fixed;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px 18px;
  background: rgba(0,0,0,0.72);
  z-index: 999999;
}

.saont-modal[hidden]{ display:none !important; }

.saont-modal-card{
  width: min(920px, calc(100vw - 40px));
  max-height: calc(100vh - 56px);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(26,31,54,0.98);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  overflow:hidden;
}

.saont-modal-body{
  overflow:auto;
  max-height: calc(100vh - 230px);
}

.saont-modal-actions{
  display:flex;
  justify-content:flex-start !important;
  gap: 10px;
  padding: 18px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

/* Keep global chrome visible; do not hide header when modal opens */
body.saont-modal-open .saont-header-shell{ display:block !important; }

/* =========================
   Dark inputs inside modals (avoid default white inputs)
   ========================= */

.saont-modal input[type="text"],
.saont-modal input[type="email"],
.saont-modal input[type="url"],
.saont-modal input[type="search"],
.saont-modal input[type="password"],
.saont-modal input[type="date"],
.saont-modal select,
.saont-modal textarea{
  background: rgba(0,0,0,0.20) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: var(--saont-text-strong) !important;
  border-radius: var(--saont-radius-field) !important;
}

.saont-modal input::placeholder,
.saont-modal textarea::placeholder{
  color: rgba(255,255,255,0.55) !important;
}

.saont-modal select option{ color:#0A0C15; }


/* Global Saont cursor */
html, body{
  cursor: var(--saont-cursor);
}

button, a, .saont-btn, [role="button"]{
  cursor: pointer;
}


/* =========================
   Saont™ Button Authority System v2 (Gradient-free, surface authority model)
   ========================= */

.saont-btn{
  font-family: "League Spartan", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-weight: 300 !important;
  font-size: 14px;
  letter-spacing: 0.3px;

  padding: 10px 18px;

  background: #1A1F36 !important;
  color: #FFFFFF !important;

  border: 1px solid #B0B0B0 !important;

  border-radius: 12px !important;

  box-shadow: none !important;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    background 0.18s ease;

  cursor: pointer;
}

.saont-btn:hover{
  transform: translateY(-1px);
  border-color: #FFFFFF !important;
}

.saont-btn:active{
  transform: translateY(0px);
}

/* Tier 3 — Utility */

.saont-btn--utility{
  font-size: 13px;

  background: #161B2E !important;

  border-color: #8A8F9E !important;

  box-shadow:
    inset 0 0 0 1px rgba(0,191,255,0.05);
}

.saont-btn--utility:hover{
  border-color: #B0B0B0 !important;

  box-shadow:
    inset 0 0 0 1px rgba(0,191,255,0.10);
}

/* Tier 2 — Operational */

.saont-btn--operational{
  font-size: 14px;

  background: #1A1F36 !important;

  border-color: #FFFFFF !important;

  box-shadow:
    0 0 0 1px rgba(0,191,255,0.10),
    0 0 12px rgba(0,191,255,0.10);
}

.saont-btn--operational:hover{
  box-shadow:
    0 0 0 1px rgba(0,191,255,0.18),
    0 0 18px rgba(0,191,255,0.18);
}

/* Tier 1 — Primary Authority */

.saont-btn--primary{
  font-size: 15px;

  background: #202641 !important;

  border-color: #FFFFFF !important;

  box-shadow:
    0 0 0 1px rgba(0,191,255,0.18),
    0 0 20px rgba(0,191,255,0.18);
}

.saont-btn--primary:hover{
  background: #242B4A !important;

  box-shadow:
    0 0 0 1px rgba(0,191,255,0.24),
    0 0 26px rgba(0,191,255,0.24);
}


/* Saont modal 6-pack grid */
.saont-modal-grid, .saont-brand-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 700px) {
  .saont-modal-grid, .saont-brand-grid {
    grid-template-columns: 1fr;
  }
}

/* Ensure modal example links are white */
.saont-modal a, .saont-modal a.example-link {
  color: #FFFFFF !important;
  text-decoration: none;
}
.saont-modal a:hover, .saont-modal a.example-link:hover {
  text-decoration: underline;
}


/* =========================
   Saont modal header (GDPR-style, right title)
   ========================= */
.saont-modal-head--saont{
  position: relative;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}
.saont-modal-head--saont .saont-modal-head-left{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
}
.saont-modal-head--saont .saont-modal-head-right{
  flex: 1 1 auto;
  text-align: right;
  padding-right: 54px; /* space for close button */
}
.saont-modal-head-title{
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.01em;
  font-family: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  color: rgba(255,255,255,0.96);
}
.saont-modal-head-sub{
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,0.72);
}
.saont-modal-brand-logo{
  width: 34px;
  height: auto;
  display: block;
  opacity: 0.98;
}

/* =========================
   Modal field tiles (GDPR popup-grade)
   ========================= */
.saont-field-tile{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,12,21,0.42);
  box-shadow: inset 0 0 0 1px rgba(0,191,255,0.08);
  padding: 14px;
}
.saont-field-tile--wide{
  grid-column: 1 / -1;
}
.saont-field-label{
  display:block;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.86);
  margin: 0 0 8px 2px;
  font-family: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
}
.saont-field-hint{
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255,255,255,0.62);
}
.saont-colour-row{
  display:flex;
  align-items:center;
  gap: 10px;
}
.saont-colour-hex{
  flex: 1 1 auto;
  min-width: 0;
}

/* Underline picker: make it feel like a Saont field control */
.saont-underline-picker{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.saont-underline-trigger{
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(15,23,51,0.42);
  color: rgba(255,255,255,0.92);
  padding: 0 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  cursor:pointer;
  font-family: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.saont-underline-trigger:hover{
  border-color: rgba(0,191,255,0.35);
  box-shadow: 0 0 0 2px rgba(0,191,255,0.08);
}
.saont-underline-menu{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,12,21,0.92);
  box-shadow: 0 18px 55px rgba(0,0,0,0.45);
  overflow: hidden;
}
.saont-underline-opt{
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.90);
  cursor: pointer;
  font-family: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
}
.saont-underline-opt:hover{
  background: rgba(0,191,255,0.10);
}
.saont-underline-preview{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
}
.saont-underline-preview a{
  color: #FFFFFF !important;
}

/* Team & Access (MySaont) */
.saont-user-sub{
  font-family: "LeagueSpartan", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  letter-spacing: 0.1px;
  opacity: 0.86;
}


/* Checkbox small variant */
.saont-checkbox--sm .saont-checkbox-ui{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 6px;
}
.saont-checkbox--sm .saont-checkbox-text{
  font-size: 12px;
  opacity: .92;
}