/* ============================================
   wp-nexcore-dashboard — dashboard.v13.css
   Prefix: core-dashboard- (cross-site compatible)
   All variables have CSS fallbacks — uses theme
   variables when available on CFA, falls back to
   default values on other sites.

   v13 — 2026-08-16 : module rows clickable — the
          .core-dashboard-module-row is now an <a>
          linking to the product page. Link reset +
          pointer cursor + hover glow (same as
          .core-btn-accent:hover), no static design
          change.
   v12 — 2026-08-16 : sidebar category gauges — dynamic HUD
          segmented progress bars (one segment per product)
          + % label on the same row.
   v11 — 2026-08-16 : replaced the text reference column
          with an ACF reference image
          (.core-dashboard-module-reference-image)
   v10 — 2026-08-16 : restructured sidebar into sections
          (Pilot Status / Pilot Tracking) with dynamic
          category entries + accent-colored logout link
     v9 — 2026-08-15 : replaced "Validated" / "Not validated"
          text with a 3-state network-bars icon
          (.core-dashboard-progress-icon) + % label
     v8 — 2026-08-15 : removed "Read briefing" / "Order"
          buttons and the specific .core-dashboard-module-vr
          class; replaced with generic .core-dashboard-text
          (opaque when unread, white when read)
     v7 — 2026-08-15 : archived (see ARCHIVE/wp-nexcore-dashboard/)
     v5 — 2026-08-10 : replaced core-dashboard-btn-accent with global core-btn-accent,
     added .core-dashboard-module-status
     v5 — 2026-08-10 : replaced hardcoded #FF0000 with
          var(--c-error), added --c-success, replaced
          icon-check/icon-x with text classes is-validated /
          is-not-validated, added .is-hidden utility,
          added .is-success class
     v4 — 2026-08-10 : added module listing rows
     v3 — 2026-08-08 : replaced discrete media-queries with clamp()
     ============================================ */

/* ============================================
   Global utility classes
   ============================================ */

.is-hidden {
  display: none !important;
}

/* --- Auth modal overlay --- */
.core-dashboard-auth-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #060B1ED9 !important;
  z-index: 9998 !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
}

.core-dashboard-auth-overlay h4 {
  text-align: center;
}

.core-dashboard-auth-box {
  background: var(--c-bg, #0E1332) !important;
  border: 1px solid var(--c-border, #1A2048) !important;
  border-radius: var(--radius-md, 14px) !important;
  padding: var(--space-lg, 40px) !important;
  width: clamp(min(94vw, 400px), 50vw, 560px) !important;
  box-shadow: var(--shadow-lift, 0 8px 32px #00000066) !important;
  position: relative !important;
}

.core-dashboard-auth-form {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.core-dashboard-auth-form input {
  width: 100% !important;
  padding: 14px var(--space-sm, 16px) !important;
  background: var(--c-bg, #060B1E) !important;
  border: 1px solid var(--c-border, #1A2048) !important;
  border-radius: var(--radius-sm, 10px) !important;
  color: var(--c-text, #FFFFFF) !important;
  font-family: 'NeoSansStdLight', sans-serif !important;
  font-size: 16px !important;
  outline: none !important;
}

.core-dashboard-auth-form input:focus {
  border-color: var(--c-accent, #00D4FF) !important;
  box-shadow: var(--glow-accent-sm, 0 0 6px #00D4FF) !important;
}

/* --- Validation error --- */
.core-dashboard-auth-form input.core-dashboard-error {
  border-color: var(--c-error, #FF0000) !important;
  box-shadow: 0 0 4px var(--c-error, #FF0000) !important;
}

.core-dashboard-error-text {
  color: var(--c-error, #FF0000) !important;
  font-size: 14px !important;
  margin-top: -30px !important;
  font-family: 'NeoSansStdLight', sans-serif !important;
}

/* Keep error text positioned absolutely inside form-field wrapper */
.core-dashboard-form-field .core-dashboard-error-text,
.core-dashboard-input-row .core-dashboard-error-text {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: 2px !important;
}

/* --- Inline input row (verification code + button) --- */
.core-dashboard-input-row {
  display: flex !important;
  gap: var(--space-xs, 12px) !important;
  width: 100% !important;
  position: relative !important;
}

.core-dashboard-input-row input {
  flex: 1 !important;
  width: 65% !important;
}

/* --- Auth form buttons — use theme's .core-btn-ghost with modal-specific overrides --- */
.core-dashboard-auth-form .core-btn-ghost {
  width: 100% !important;
  margin: 10px 0px 0px 0px !important;
}

/* --- Checkbox CGU --- */
.core-dashboard-auth-checkbox {
  display: flex;
  align-items: center !important;
  gap: var(--space-xs, 12px) !important;
  font-size: 14px !important;
  color: var(--c-muted, #6B7199) !important;
  font-family: 'NeoSansStdLight', sans-serif !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
}

.core-dashboard-auth-checkbox input[type="checkbox"] {
  width: auto !important;
  margin: 2px 0 0 0 !important;
  accent-color: var(--c-accent, #00D4FF) !important;
  flex-shrink: 0 !important;
}

.core-dashboard-auth-checkbox a {
  color: var(--c-accent, #00D4FF) !important;
  text-decoration: underline !important;
}

.core-dashboard-auth-info {
  font-size: 14px !important;
  color: var(--c-muted, #6B7199) !important;
  display: flex;
  gap: 8px;
  flex-direction: row;
  align-self: center;
}

.core-dashboard-auth-link,
.core-dashboard-auth-link a {
  display: block !important;
  text-align: center !important;
  color: var(--c-accent, #00D4FF) !important;
  font-size: 14px !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

.core-dashboard-auth-close {
  position: absolute !important;
  top: var(--space-sm, 16px) !important;
  right: var(--space-sm, 16px) !important;
  color: var(--c-muted, #6B7199) !important;
  font-size: 20px !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
}

/* --- Success (green text, used from JS) --- */
.is-success {
  color: var(--c-success, #22c55e) !important;
}

/* --- Account icon (widget shortcode, placed next to mini-cart) --- */
.core-dashboard-account-icon {
  color: var(--c-accent, #00D4FF) !important ;
  font-size: 45px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.2s!important;
}

.core-dashboard-account-icon:hover {
  color: var(--c-gold-light, #FFD375) !important;
}

/* ========================
   DASHBOARD LAYOUT
   ======================== */

.core-dashboard-grid {
  display: flex !important;
  gap: var(--space-lg, 40px) !important;
}

.core-dashboard-grid h2,
.core-dashboard-grid h4 {
  text-transform: uppercase !important;
}

.core-dashboard-main {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0px !important;
}

.core-dashboard-main .core-hud-border-octa-cycle {
  text-align: center !important;
  gap: 0px !important;
}

.core-dashboard-sidebar-section > a,
.core-dashboard-sidebar-section > div {
  display: block !important;
  padding: 2px 12px !important;
  color: var(--c-text, #FFFFFF) !important;
  font-family: 'Turret Road', sans-serif !important;
  font-size: 18px !important;
  text-decoration: none !important;
  border-radius: var(--radius-sm, 10px) !important;
  transition: background 0.2s, color 0.2s !important;
  letter-spacing: 1.4px !important;
}

.core-dashboard-sidebar-section > a:hover,
.core-dashboard-sidebar-section > a.active {
  color: var(--c-accent, #00D4FF) !important;
}

/* --- Sidebar --- */
.core-dashboard-sidebar {
  width: 400px !important;
  flex-shrink: 0 !important;
}

.core-dashboard-sidebar nav {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-lg, 40px) !important;
  text-transform: uppercase !important;
}

.core-dashboard-sidebar-section {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-xs, 12px) !important;
}

.core-dashboard-sidebar h5 {
  margin: 0 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

/* Category gauge container — segmented bar + % label on one row */
.core-dashboard-module-progress {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-xs, 12px) !important;
}

/* --- HUD segmented progress (sidebar category gauges) --- */
.core-dashboard-progress.is-segmented {
  display: flex;
  align-items: center;
  gap: 2px;
  border: none;
  background: transparent;
  overflow: visible;
  flex: 1;
}

.core-dashboard-progress.is-segmented .seg {
  display: block;
  flex: 1;
  height: 14px;
  background: var(--c-muted, #6B7199);
  border-radius: 2px;
  transition: background 0.3s;
}

.core-dashboard-progress.is-segmented .seg.is-filled {
  background: var(--c-accent, #00D4FF);
}

/* --- Session boxes --- */
.core-dashboard-session-box {
  padding: var(--space-md, 20px) !important;
  border: 1px solid var(--c-border, #1A2048) !important;
  border-radius: var(--radius-md, 14px) !important;
  background: var(--c-surface, #0E1332) !important;
  margin-bottom: var(--space-sm, 16px) !important;
}

.core-dashboard-session-expires {
  font-size: 14px !important;
  color: var(--c-muted, #6B7199) !important;
  margin: 0 0 12px !important;
}

.core-dashboard-lang-btn {
  display: inline-block !important;
  padding: 8px 20px !important;
  border: 1px solid var(--c-accent, #00D4FF) !important;
  border-radius: var(--btn-radius, 50px) !important;
  background: transparent !important;
  color: var(--c-accent, #00D4FF) !important;
  font-family: 'Turret Road', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin-right: 8px !important;
  transition: background 0.2s !important;
}

.core-dashboard-lang-btn:hover {
  background: var(--c-accent-20, #00D4FF33) !important;
}

.core-dashboard-lang-btn.disabled {
  border-color: var(--c-muted, #6B7199) !important;
  color: var(--c-muted, #6B7199) !important;
  cursor: not-allowed !important;
}

.core-dashboard-empty {
  text-align: center !important;
  padding: var(--space-xl, 60px) 0 !important;
  color: var(--c-muted, #6B7199) !important;
}

.core-dashboard-empty-link {
  color: var(--c-accent, #00D4FF) !important;
}

/* --- Form field wrapper (email, password, etc.) --- */
.core-dashboard-form-field {
  position: relative !important;
  width: 100% !important;
}

.core-dashboard-form-field.is-toggle input {
  padding-right: 52px !important;
}

/* --- Form field toggle (eye icon for password visibility) --- */
.core-dashboard-form-toggle {
  position: absolute !important;
  top: 50% !important;
  right: var(--space-sm, 16px) !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  z-index: 1 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--c-muted, #6B7199) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  transition: color 0.2s !important;
}

.core-dashboard-form-toggle:hover {
  color: var(--c-accent, #00D4FF) !important;
}

.core-dashboard-form-toggle .icon { 
  pointer-events: none !important; 
}

/* ============================================
   Module listing (CFA-MODULE-* products)
   ============================================ */

.core-dashboard-module-list {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-xs, 12px) !important;
}

.core-dashboard-module-list h4 {
  margin-top: var(--space-lg, 40px) !important;
}

.core-dashboard-module-row {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-sm, 16px) !important;
  flex-wrap: wrap !important;
  position: relative !important;
  isolation: isolate !important;
  flex: 1 !important;
  align-items: center !important;
  gap: var(--space-md, 20px) !important;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer !important;
  transition: filter 0.2s !important;
}

.core-dashboard-module-row::before,
.core-dashboard-module-row::after {
  content: '';
  position: absolute;
}

.core-dashboard-module-row::before {
  inset: -1px;
  z-index: -2;
  background: var(--c-accent, #00D4FF) !important;
  clip-path: polygon(20px 0%, calc(100%) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100%), 0% 20px);
}

.core-dashboard-module-row::after {
  inset: 0;
  z-index: -1;
  background: var(--c-surface, #0E1332) !important;
  clip-path: polygon(20px 0%, calc(100%) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100%), 0% 20px);
}

.core-dashboard-module-row:hover {
  filter: drop-shadow(0 0 4px var(--c-accent, #00d4ff)) !important;
  transform: none !important;
}

.core-dashboard-module-row > span {
  font-family: 'Turret Road', sans-serif !important;
  font-size: 16px !important;
  font-weight: bold !important;
  min-width: 100px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: var(--space-xs, 12px) !important;
}

.core-dashboard-module-row > span:nth-child(2) {
  min-width: 300px !important;
}

/* --- Reference image (ACF reference_image) --- */
.core-dashboard-module-row img {
  height: 99% !important;
  width: auto !important;
  max-width: 160px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* --- Generic dashboard text state --- */
.core-dashboard-module-row > span.is-unread {
  color: var(--c-muted, #6B7199) !important;
  opacity: 0.4 !important;
}

.core-dashboard-module-row > span.is-read {
  color: var(--c-text, #FFFFFF) !important;
  opacity: 1 !important;
}

/* --- Module status — network bars icon + % label --- */
.core-dashboard-module-status {
  display: inline-flex !important;
  gap: 6px !important;
  min-width: 100px !important;
}

.core-dashboard-progress-icon {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  width: 26px;
  height: 20px;
  flex-shrink: 0;
}

.core-dashboard-progress-icon .bar {
  display: block;
  width: 6px;
  background: var(--c-muted, #6B7199);
  fill: var(--c-muted, #6B7199);
  transition: background 0.2s, fill 0.2s;
}

.core-dashboard-progress-icon .bar-1 { height: 8px;  }
.core-dashboard-progress-icon .bar-2 { height: 13px; }
.core-dashboard-progress-icon .bar-3 { height: 18px; }

/* State 1 — briefing read = 2 filled bars (small + medium) */
.core-dashboard-progress-icon.is-level-1 .bar-1,
.core-dashboard-progress-icon.is-level-1 .bar-2 {
  background: var(--c-accent, #00D4FF);
  fill: var(--c-accent, #00D4FF);
}

/* State 2 — briefing + mission read = 3 filled bars */
.core-dashboard-progress-icon.is-level-2 .bar {
  background: var(--c-accent, #00D4FF);
  fill: var(--c-accent, #00D4FF);
}

.core-dashboard-progress-label {
  font-family: 'Turret Road', sans-serif !important;
  font-size: 14px !important;
  color: var(--c-accent, #00D4FF) !important;
  min-width: 38px !important;
  text-align: left !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* ============================================
   Media queries — only layout overrides that
   cannot be expressed with clamp() / fluid units
   (.core-dashboard-auth-box width is now fluid
   via clamp() in the base rule, no breakpoints needed)
   ============================================ */
@media (max-width: 1880px) { 
  .core-dashboard-module-row { gap: var(--space-xs, 12px) !important; }
  .core-dashboard-module-row img { height: auto !important; }
}

@media (max-width: 1440px) { 
  .core-dashboard-sidebar { width: 300px !important; }
}

@media (max-width: 768px) {
  .core-dashboard-grid { flex-direction: column-reverse !important; gap: var(--space-xs, 12px) !important; }
  .core-dashboard-sidebar { width: 100% !important; }
  .core-dashboard-main { gap: var(--space-xs, 12px) !important; }
  .core-dashboard-sidebar-section > a, .core-dashboard-module-row > span { padding: 0px 12px !important; }
  .core-dashboard-module-list .core-dashboard-module-row .core-dashboard-module-status { padding-bottom: 12px !important; }
  .core-dashboard-module-row span:nth-of-type(2) { flex-basis: 50% !important; }
  .core-dashboard-module-row > span:nth-child(2) { min-width: 180px !important; }
  .core-dashboard-module-status { gap: 4px !important; }
  .core-dashboard-progress-label { font-size: 12px !important; min-width: 32px !important; }
}

@media (max-width: 650px) {
   .core-dashboard-module-row span:nth-of-type(2) { flex-basis: auto !important; }
}

@media (max-width: 425px) {
  .core-dashboard-auth-box { padding: var(--space-md, 20px) !important; }
  .core-dashboard-auth-info { flex-direction: column !important; }
  .core-dashboard-module-row { flex-direction: column !important; align-items: flex-start !important; }
}