/* ============================================
   APEX PROTOCOL - Tactical Fitness Theme
   Embedded in Jerry OS
   ============================================ */

/* -- Fonts (loaded via Google Fonts link in index.html) -- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;900&family=DM+Mono:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* -- Page Container -- */
#page-apex { font-family: 'Inter', sans-serif; }
#page-apex .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
#page-apex .material-symbols-outlined.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* -- Apex Header -- */
.apex-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid rgba(204,255,128,0.1); }
.apex-title { font-family:'Space Grotesk'; font-weight:900; color:#ccff80; font-size:20px; letter-spacing:-0.02em; text-transform:uppercase; }

/* -- Bottom Tab Bar -- */
.apex-tabbar { position:fixed; bottom:0; left:0; right:0; z-index:100; display:flex; background:#0e1320; border-top:1px solid rgba(204,255,128,0.1); box-shadow:0 -4px 20px rgba(0,0,0,0.5); }
.apex-tab-active { background:#ccff80; color:#0e1320; }
.apex-tab-inactive { color:rgba(222,226,245,0.5); }
.apex-tab-btn { border:none; cursor:pointer; font-family:'Space Grotesk'; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; gap:2px; }
.apex-tab-btn span.material-symbols-outlined { font-size:20px; }

/* -- Views -- */
.apex-view { padding:0 16px 100px; }

/* -- Date -- */
.apex-date { font-family:'Space Grotesk'; font-size:10px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:#8d9380; padding:12px 4px; border-bottom:1px solid rgba(141,147,128,0.1); }

/* -- Stats Row -- */
.apex-stats-row { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid rgba(141,147,128,0.1); }
.apex-stat-box { padding:16px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.apex-stat-box + .apex-stat-box { border-left:1px solid rgba(141,147,128,0.1); }
.apex-stat-box .label { font-family:'Space Grotesk'; font-size:10px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:#8d9380; }
.apex-stat-box .value { font-family:'DM Mono'; font-size:28px; font-weight:700; }
.apex-stat-box .sub { font-family:'DM Mono'; font-size:10px; margin-top:2px; }

/* -- Timer -- */
.apex-timer-card { background:#1a1f2e; padding:20px; margin:16px 0; }
.apex-timer-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.apex-timer-label { font-family:'Space Grotesk'; font-size:10px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:#8d9380; display:flex; align-items:center; gap:8px; }
.apex-dot-active { width:8px; height:8px; border-radius:50%; background:#ccff80; animation:pulse 1.5s infinite; }
.apex-dot-idle { width:8px; height:8px; border-radius:50%; background:#8d9380; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.apex-timer-display { font-family:'DM Mono'; font-size:36px; font-weight:700; text-align:center; color:#dee2f5; margin-bottom:16px; letter-spacing:-0.02em; }
.apex-timer-btns { display:flex; gap:8px; }
.apex-btn-primary { flex:1; padding:10px; background:#ccff80; color:#0e1320; border:none; font-family:'Space Grotesk'; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:0.05em; cursor:pointer; transition:transform 0.1s; }
.apex-btn-primary:active { transform:scale(0.97); }
.apex-btn-outline { flex:1; padding:10px; background:transparent; color:#dee2f5; border:1px solid rgba(141,147,128,0.2); font-family:'Space Grotesk'; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:0.05em; cursor:pointer; }

/* -- Weight Input -- */
.apex-weight-card { background:#161b29; padding:16px; margin:16px 0; }
.apex-weight-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.apex-weight-label { font-family:'Space Grotesk'; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
.apex-weight-unit { font-family:'Space Grotesk'; font-size:10px; color:#8d9380; text-transform:uppercase; }
.apex-weight-row { display:flex; gap:8px; align-items:center; }
.apex-weight-input { flex:1; background:#0e1320; border:1px solid rgba(141,147,128,0.15); color:#ccff80; font-family:'DM Mono'; font-size:22px; padding:8px 12px; text-align:right; outline:none; -webkit-appearance:none; -moz-appearance:textfield; }
.apex-weight-input:focus { border-color:rgba(204,255,128,0.3); }
.apex-weight-input::-webkit-inner-spin-button, .apex-weight-input::-webkit-outer-spin-button { -webkit-appearance:none; }

/* -- Habits -- */
.apex-habit-group { margin:20px 0; }
.apex-habit-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.apex-habit-bar { width:20px; height:2px; }
.apex-habit-label { font-family:'Space Grotesk'; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; flex:1; }
.apex-habit-count { font-family:'DM Mono'; font-size:10px; }
.apex-habit-item { display:flex; flex-direction:column; padding:14px; margin-bottom:6px; cursor:pointer; transition:transform 0.1s; width:100%; text-align:left; border:none; }
button.apex-habit-item { flex-direction:row; align-items:center; justify-content:space-between; }
.apex-habit-item:active { transform:scale(0.98); }
.apex-done { background:rgba(204,255,128,0.06); border:1px solid rgba(204,255,128,0.15); }
.apex-undone { background:#161b29; border:1px solid rgba(141,147,128,0.1); }
.apex-habit-name { font-family:'Space Grotesk'; font-size:13px; font-weight:700; text-transform:uppercase; color:#dee2f5; }
.apex-habit-unit { font-family:'Space Grotesk'; font-size:9px; color:#8d9380; text-transform:uppercase; }
.apex-habit-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.apex-input-row { display:flex; align-items:center; gap:8px; }
.apex-adj-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:none; border:1px solid rgba(141,147,128,0.2); cursor:pointer; }
.apex-adj-btn:active { transform:scale(0.9); }
.apex-num-input { flex:1; background:#0e1320; border:1px solid rgba(141,147,128,0.15); font-family:'DM Mono'; font-size:18px; text-align:center; padding:6px; outline:none; -webkit-appearance:none; -moz-appearance:textfield; }
.apex-num-input::-webkit-inner-spin-button, .apex-num-input::-webkit-outer-spin-button { -webkit-appearance:none; }
.apex-quick-btn { background:#1a1f2e; border:1px solid rgba(141,147,128,0.15); padding:6px 12px; font-family:'Space Grotesk'; font-size:10px; font-weight:700; text-transform:uppercase; cursor:pointer; }
.apex-target-label { font-family:'DM Mono'; font-size:13px; color:#8d9380; }

/* -- Section Titles -- */
.apex-section-title { font-family:'Space Grotesk'; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:#dee2f5; margin-bottom:12px; }

/* -- Empty State -- */
.apex-empty-state { text-align:center; padding:40px 20px; }
.apex-empty-state p { color:#8d9380; font-size:14px; margin-bottom:16px; }
.apex-empty-text { color:#8d9380; font-family:'DM Mono'; font-size:13px; text-align:center; padding:20px; }

/* -- Plan Grid -- */
.apex-plan-header { margin-bottom:16px; }
.apex-plan-name { font-family:'Space Grotesk'; font-size:18px; font-weight:900; text-transform:uppercase; color:#dee2f5; }
.apex-plan-meta { font-family:'DM Mono'; font-size:11px; color:#ccff80; margin-top:4px; }
.apex-plan-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.apex-plan-day { background:#161b29; padding:8px 4px; display:flex; flex-direction:column; align-items:center; gap:2px; border-left:2px solid transparent; min-height:48px; }
.apex-plan-today { background:#1a1f2e; border-left-color:#ccff80 !important; }
.apex-plan-done { opacity:0.6; }
.apex-plan-num { font-family:'DM Mono'; font-size:11px; font-weight:700; color:#dee2f5; }
.apex-plan-label { font-family:'Space Grotesk'; font-size:7px; font-weight:700; text-transform:uppercase; color:#8d9380; text-align:center; }

/* -- Library -- */
.apex-lib-tabs { display:flex; gap:0; margin-bottom:16px; border-bottom:1px solid rgba(141,147,128,0.15); }
.apex-lib-tab { flex:1; padding:10px; background:none; border:none; color:#8d9380; font-family:'Space Grotesk'; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; cursor:pointer; border-bottom:2px solid transparent; }
.apex-lib-tab-active { color:#ccff80; border-bottom-color:#ccff80; }
.apex-search-input { width:100%; background:#161b29; border:1px solid rgba(141,147,128,0.15); color:#dee2f5; font-family:'Inter'; font-size:13px; padding:10px 12px; outline:none; margin-bottom:12px; }
.apex-search-input:focus { border-color:rgba(204,255,128,0.3); }
.apex-filter-row { display:flex; gap:8px; margin-bottom:16px; }
.apex-filter-chip { background:#161b29; border:1px solid rgba(141,147,128,0.15); color:#8d9380; font-family:'Space Grotesk'; font-size:10px; font-weight:700; padding:6px 14px; cursor:pointer; text-transform:uppercase; }
.apex-filter-active { background:rgba(204,255,128,0.1); border-color:rgba(204,255,128,0.3); color:#ccff80; }
.apex-exercise-card { display:flex; justify-content:space-between; align-items:center; padding:14px; background:#161b29; border-bottom:1px solid rgba(141,147,128,0.05); }
.apex-exercise-name { font-family:'Space Grotesk'; font-size:13px; font-weight:700; text-transform:uppercase; color:#dee2f5; }
.apex-cat-badge { font-family:'Space Grotesk'; font-size:9px; font-weight:700; text-transform:uppercase; margin-left:8px; padding:2px 6px; border:1px solid; }
.apex-template-card { display:flex; justify-content:space-between; align-items:center; padding:16px; background:#161b29; margin-bottom:6px; border-left:2px solid #ccff80; }
.apex-template-name { font-family:'Space Grotesk'; font-size:14px; font-weight:700; text-transform:uppercase; color:#dee2f5; display:block; }
.apex-template-meta { font-family:'DM Mono'; font-size:10px; color:#8d9380; display:block; margin-top:4px; }
.apex-btn-full { width:100%; margin-top:16px; text-align:center; }

/* -- Races -- */
.apex-race-card { display:flex; justify-content:space-between; align-items:center; padding:16px; background:#161b29; margin-bottom:6px; border-left:2px solid #ccff80; }
.apex-race-info { display:flex; flex-direction:column; gap:2px; }
.apex-race-name { font-family:'Space Grotesk'; font-size:14px; font-weight:700; text-transform:uppercase; color:#dee2f5; }
.apex-race-meta { font-family:'DM Mono'; font-size:10px; color:#8d9380; }
.apex-race-date { font-family:'DM Mono'; font-size:10px; color:#06b6d4; }
.apex-race-countdown { display:flex; flex-direction:column; align-items:center; }
.apex-countdown-num { font-family:'DM Mono'; font-size:24px; font-weight:700; color:#ccff80; }
.apex-countdown-label { font-family:'Space Grotesk'; font-size:8px; font-weight:700; color:#8d9380; text-transform:uppercase; }
.apex-run-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(141,147,128,0.08); }
.apex-run-date { font-family:'DM Mono'; font-size:11px; color:#8d9380; }
.apex-run-dist { font-family:'DM Mono'; font-size:14px; font-weight:700; color:#dee2f5; }
.apex-run-pace { font-family:'DM Mono'; font-size:11px; color:#06b6d4; }

/* -- Profile / Goals -- */
.apex-goal-card { background:#161b29; padding:16px; margin-bottom:8px; border-left:2px solid; }
.apex-goal-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
.apex-goal-title { font-family:'Space Grotesk'; font-size:15px; font-weight:700; text-transform:uppercase; color:#dee2f5; }
.apex-goal-value { font-family:'DM Mono'; font-size:32px; font-weight:500; display:block; margin-bottom:8px; }
.apex-goal-unit { font-family:'Space Grotesk'; font-size:12px; font-weight:700; color:rgba(222,226,245,0.3); }
.apex-progress-bar { height:8px; background:#303443; width:100%; overflow:hidden; margin-bottom:4px; }
.apex-progress-fill { height:100%; transition:width 0.5s; }
.apex-progress-labels { display:flex; justify-content:space-between; font-family:'DM Mono'; font-size:9px; color:rgba(222,226,245,0.25); }
.apex-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.apex-stat-card { background:#1a1f2e; padding:16px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.apex-stat-label { font-family:'Space Grotesk'; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:#8d9380; }
.apex-stat-value { font-family:'DM Mono'; font-size:28px; font-weight:700; color:#dee2f5; }
.apex-stat-unit { font-family:'DM Mono'; font-size:10px; color:#8d9380; }
.apex-log-row { display:flex; justify-content:space-between; align-items:center; padding:12px; background:#0e1320; border-left:3px solid rgba(204,255,128,0.2); margin-bottom:4px; }
.apex-log-name { font-family:'Space Grotesk'; font-size:12px; font-weight:700; text-transform:uppercase; color:#dee2f5; display:block; }
.apex-log-date { font-family:'DM Mono'; font-size:10px; color:#8d9380; display:block; }