/* =====================================================================
 * Garthux Workout Planner Styles
 *
 * This stylesheet contains all of the styling for the workout planner.
 * Colours are pulled from Elementor's global colour variables where
 * available, and the layout is responsive with sensible defaults on
 * mobile and desktop.
 */

/* ====== COLOR & THEME BRIDGE (Elementor Globals) ====== */
:root {
  --gx-text: var(--e-global-color-text, #111827);
  --gx-text-2: var(--e-global-color-text-2, #ffffff);
  /*
   * Invert the Elementor primary/secondary mapping so that buttons and other
   * accented UI elements use the site's primary brand colour (often the
   * orange accent), while backgrounds use the secondary/darker colour.
   * Many Elementor themes define --e-global-color-primary as the accent
   * colour and --e-global-color-secondary as a neutral/dark shade. The
   * previous version of this plugin assumed the opposite and consequently
   * rendered dull grey buttons on live sites. By swapping these mappings
   * the planner will adopt the intended palette without requiring any
   * manual overrides from the editor. If the variables are not defined the
   * fallbacks preserve the original dark/orange palette.
   */
  --gx-primary: var(--e-global-color-secondary, #1f2937);
  --gx-secondary: var(--e-global-color-primary, #f97316);
  --gx-bg: #0b1220;
  --gx-card: #111827;
  --gx-muted: rgba(255, 255, 255, 0.08);
  --gx-ring: rgba(249, 115, 22, .45);
  /* Progress palette (status): green → blue → purple → orange */
  --gx-green: #10b981;
  --gx-blue: #3b82f6;
  --gx-purple: #a855f7;
  --gx-orange: #f59e0b;
}

/* ====== LAYOUT ====== */
.gx {
  color: var(--gx-text-2);
  background: linear-gradient(180deg, #0b1220, #0a1020);
  /* Increase the base padding slightly to give the planner more breathing room */
  padding: clamp(20px, 3vw, 36px);
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .35);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}
.gx a {
  color: var(--gx-secondary);
  text-underline-offset: 2px;
}
.gx h2,
.gx h3 {
  margin: 0 0 10px;
  line-height: 1.2;
}
.gx .row {
  display: grid;
  /* Increase row gap for a more spacious feel */
  gap: 20px;
}
@media (min-width: 900px) {
  .gx .row.grid-2 {
    grid-template-columns: 1.2fr .8fr;
  }
  .gx .row.grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  /* New grid layout for five columns (used in library filters and custom form) */
  .gx .row.grid-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ====== CARDS ====== */
.gx-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .03));
  border: 1px solid var(--gx-muted);
  border-radius: 16px;
  padding: 14px;
  backdrop-filter: blur(4px);
}

/* ====== CONTROL STRIP ====== */
.gx-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.gx .gx-btn {
  appearance: none;
  border: 0;
  background: var(--gx-secondary);
  color: var(--gx-text-2);
  /* Bigger padding and font for better touch targets */
  padding: 12px 20px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .04s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 20px rgba(249, 115, 22, .25);
}
.gx .gx-btn:hover {
  background: var(--gx-primary);
  color: var(--gx-text-2);
}
.gx .gx-btn:active {
  transform: translateY(1px);
}
.gx .gx-btn.ghost {
  background: transparent;
  border: 1px solid var(--gx-secondary);
  color: var(--gx-text-2);
  box-shadow: none;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 16px;
}

/* Ghost button hover and active states */
.gx .gx-btn.ghost:hover {
  background: var(--gx-primary);
  color: var(--gx-text-2);
  border-color: var(--gx-secondary);
}
/* Selected state for ghost buttons: use Primary background with a Secondary border to
   align with Elementor global colour rules. Text stays Text-2. */
.gx .gx-btn.ghost.active {
  background: var(--gx-primary);
  color: var(--gx-text-2);
  border-color: var(--gx-secondary);
  box-shadow: 0 6px 20px rgba(249, 115, 22, .25);
}

/* Active state for mode buttons */
/* Selected state for standard buttons: use Primary background with a Secondary border.
   This ensures that when a mode button is active it stands out with the Primary colour
   while still using the Secondary colour for its border. */
.gx .gx-btn.active {
  background: var(--gx-primary);
  color: var(--gx-text-2);
  border: 1px solid var(--gx-secondary);
  /* match the default button's rounded corners and shadow */
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(249,115,22,.25);
}
.gx .gx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Add slightly larger padding and font size for readability */
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px dashed var(--gx-muted);
  font-size: 14px;
  line-height: 1;
}

/* ====== DIFFICULTY CHIPS ====== */
.diff-beginner {
  background: var(--gx-green);
  color: #0f172a;
}
.diff-novice {
  background: var(--gx-blue);
  color: #0f172a;
}
.diff-intermediate {
  background: var(--gx-purple);
  color: #0f172a;
}
.diff-experienced {
  background: var(--gx-orange);
  color: #0f172a;
}
.diff-knowledgeable {
  background: var(--gx-secondary);
  color: #0f172a;
}
.gx .gx-input,
.gx select {
  width: 100%;
  background: rgba(255, 255, 255, .06);
  color: var(--gx-text-2);
  border: 1px solid var(--gx-muted);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  outline: none;
}
.gx .gx-input:focus,
.gx select:focus {
  box-shadow: 0 0 0 3px var(--gx-ring);
}

/* ====== UNIT TOGGLE per row ====== */
.gx-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  /* Increase padding and font size for accessibility */
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--gx-muted);
  background: rgba(255, 255, 255, .06);
  font-size: 14px;
}
.gx-toggle input {
  accent-color: var(--gx-secondary);
}

/* ====== EXERCISE LIST ====== */
.gx-list {
  display: grid;
  gap: 10px;
}
.gx-ex {
  position: relative;
  border: 1px solid var(--gx-muted);
  border-radius: 14px;
  overflow: clip;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .03));
}
.gx-ex.dragging {
  opacity: .7;
}
.gx-ex.selected {
  outline: 2px solid var(--gx-secondary);
  box-shadow: 0 0 0 3px var(--gx-ring) inset;
}
.gx-ex header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px dashed var(--gx-muted);
}
.gx-ex .title {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 700;
}
.gx-ex .tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.gx-ex .line {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}
@media (min-width: 720px) {
  .gx-ex .line.cols {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
  }
}

/* ====== PROGRESS BAR ====== */
.gx-progress {
  position: relative;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(90deg,
    var(--gx-green) 0%,
    var(--gx-blue) 33%,
    var(--gx-purple) 66%,
    var(--gx-orange) 100%);
}
.gx-progress .pointer {
  position: absolute;
  top: -4px;
  width: 0;
  height: 18px;
  border-left: 3px solid var(--gx-text-2);
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, .6));
}
.gx-progress .labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  opacity: .75;
  margin-top: 6px;
}

/* -------------------------------------------------------------------
 * V2 Adjustments
 *
 * The following overrides hide the static colour labels under the progress
 * bar and provide a visual cue for exercises that are part of a superset.
 */
/* Hide the green/blue/purple/orange labels under the progress bar */
.gx-progress + .labels {
  display: none;
}
/* Highlight exercises that participate in a superset. Both the exercise
   with the "Superset with next" checkbox checked and the following row
   share the same accent colour. */
.gx-ex.superset-active,
.gx-ex.superset-target {
  border-left: 4px solid var(--gx-secondary);
  background: rgba(249, 115, 22, 0.08);
}
.gx-tooltip {
  position: absolute;
  transform: translate(-50%, -120%);
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 6px;
  pointer-events: none;
  display: none;
}
.gx-progress:hover .gx-tooltip {
  display: block;
}

/* ====== TIMER ====== */
.gx-timer {
  display: grid;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--gx-muted);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .03));
}
.gx-timer.flash {
  animation: gxFlash .8s ease 3;
}
@keyframes gxFlash {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, .0);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(249, 115, 22, .25);
  }
}
.gx-timeface {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 5vw, 50px);
  letter-spacing: 1px;
  text-align: center;
}
.gx-time-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.gx-time-controls .gx-input {
  width: 90px;
  text-align: center;
}

/* ====== STREAK & BADGES ====== */
.gx-streak {
  display: grid;
  gap: 8px;
}
.gx-streak .bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.gx-streak .bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gx-secondary), var(--gx-orange));
  width: 0%;
}
.gx-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gx-badge {
  border: 1px solid var(--gx-muted);
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, .05);
  font-size: 14px;
}

/* ====== MODAL (Exercise Library) ====== */
.gx-modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 99999;
  background: rgba(0, 0, 0, .45);
}
.gx-modal.open {
  display: grid;
}
.gx-modal .panel {
  width: min(920px, 92vw);
  max-height: 86vh;
  overflow: auto;
  background: #0c1426;
  border: 1px solid var(--gx-muted);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.gx-lib {
  display: grid;
  gap: 8px;
}
.gx-lib-item {
  display: grid;
  gap: 12px;
  align-items: center;
  grid-template-columns: 1fr auto;
  border: 1px dashed var(--gx-muted);
  border-radius: 12px;
  padding: 10px 12px;
}
.gx-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ====== MINI UTIL ====== */
.gx-right {
  margin-left: auto;
}
.gx-hide {
  display: none !important;
}
.gx-note {
  font-size: 14px;
  opacity: .85;
}
.gx-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ====================================================================
 * Inline timer styles (V3 updates)
 * These styles define the compact timer that attaches below the current
 * exercise row. They reuse the global colour variables to stay aligned
 * with Elementor's global palette.
 */
.gx-inline-timer {
  margin-top: 8px;
  border: 1px solid var(--gx-secondary);
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .03));
  box-shadow: 0 0 0 3px var(--gx-ring);
}
.gx-inline-timer .gx-timer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

/* When a timer is attached directly after a selected exercise row, apply the same
   outline and inset box shadow as the selected row so the two elements appear
   connected. This rule targets the inline timer immediately following a
   selected exercise. */
.gx-ex.selected + .gx-inline-timer {
  outline: 2px solid var(--gx-secondary);
  box-shadow: 0 0 0 3px var(--gx-ring) inset;
}

/* When the inline timer is nested inside the selected exercise row, apply the same
   outline and inset shadow as when it follows the row. This ensures the timer
   visually connects to the selected exercise even when injected within it. */
.gx-ex.selected .gx-inline-timer {
  outline: 2px solid var(--gx-secondary);
  box-shadow: 0 0 0 3px var(--gx-ring) inset;
}

/* Quick save icon button in Achievements. Uses the secondary colour and
   enlarges slightly on hover. This button sits in the Achievements header
   and triggers a save action. Restored to its original single-icon design. */
.gx-icon-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--gx-secondary);
  font-size: 22px;
  cursor: pointer;
  transition: transform .15s ease;
  line-height: 1;
}
.gx-icon-btn:hover {
  transform: scale(1.3);
}
.gx-icon-btn:active {
  transform: scale(1.15);
}

/* Optional search icon used inside the Find My Plan button */
.gx-search-icon {
  display: inline-block;
  line-height: 0;
  /* scale the search icon up to align with larger buttons */
  font-size: 18px;
}
.gx-inline-timeface {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(24px, 4.2vw, 40px);
  letter-spacing: 1px;
  text-align: center;
  margin: 6px 0;
}
.gx-inline-time-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
/* Highlight the current exercise row when the timer beeps */
.gx-ex.current {
  outline: 2px solid var(--gx-secondary);
  box-shadow: 0 0 0 3px var(--gx-ring) inset;
}