/* --- GLOBAL RESET & BOX SIZING --- */
* { box-sizing: border-box; }

body { 
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 
    margin: 0; padding: 0; height: 100vh; display: flex; 
    overflow: hidden; 
    min-width: 360px; /* iPhone SE szélesség környéke */
}

:root {
    /* Softened black tone for SVG icons rendered as IMG elements */
    --icon-color-filter: brightness(0) saturate(0%) contrast(88%) opacity(0.78);
}

.settings-color-picker {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    display: inline-block;
    box-shadow: 0 1px 3px rgba(44, 62, 80, 0.22);
}

.settings-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.settings-color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 5px;
}

.settings-color-picker::-moz-color-swatch {
    border: none;
    border-radius: 5px;
}

/* --- ICON SYSTEM --- */
.icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 4px;
    object-fit: contain;
    width: 1em;
    height: 1em;
    filter: var(--icon-color-filter);
}

.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }
.icon-no-margin { margin-right: 0; }
.icon-original-color { filter: none !important; }

/* --- LAYOUT --- */
.app-container { display: flex; flex-direction: column; width: 100%; height: 100%; }

/* Felső Fejléc (Header) */
.app-header {
    height: 60px;
    background-color: #2c3e50;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1100;
}
.app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-brand-icon {
    width: 28px;
    height: 28px;
    display: block;
    border-radius: 6px;
    filter: none;
}

.app-title { font-size: 1.2rem; font-weight: bold; color: #ecf0f1; }

.header-left-group { display: flex; align-items: center; gap: 15px; }
.header-right-group { display: flex; align-items: center; gap: 15px; }

.hamburger-btn { /* Csak mobilon látszik majd */
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    font-size: 1.5rem;
    padding: 2px 10px;
    border-radius: 4px;
    cursor: pointer;
    display: none; 
}

/* --- SIDE NAV (Desktop: Fix bal sáv) --- */
.side-nav {
    position: absolute;
    top: 60px;
    left: 0;
    width: 90px;
    height: calc(100vh - 60px);
    background-color: #2c3e50;
    z-index: 1000;
    border-right: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
}

.side-nav-header.mobile-only { display: none; }

.side-nav-content { padding: 10px 0; }

.side-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90px !important;
    height: 90px !important;
    padding: 5px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    background: transparent;
    border: none;
    flex-shrink: 0;
    transition: all 0.2s;
    cursor: pointer;
}
 .nav-icon { width: 24px; height: 24px; margin-bottom: 4px; stroke: currentColor; filter: var(--icon-color-filter); }
 .nav-text { font-size: 0.55rem; text-align: center; text-transform: none; letter-spacing: 0.3px; line-height: 1.1; }

.side-nav-link:hover { background: rgba(255,255,255,0.1); color: white; }
.side-nav-link.active { background: #3498db; color: white; font-weight: bold; }

.side-nav-link.has-alert {
    position: relative;
}

.side-nav-link.has-alert::after {
    content: '';
    position: absolute;
    top: 14px;
    right: 18px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5d5d;
    box-shadow: 0 0 0 2px rgba(44, 62, 80, 0.95);
}

/* User Dropdown Menu */
.user-menu-container { position: relative; cursor: pointer; height: 100%; display: flex; align-items: center; }
.user-menu-trigger { display: flex; align-items: center; padding: 5px 10px; border-radius: 4px; transition: background 0.2s; }
.user-menu-trigger:hover { background-color: #34495e; }

.user-dropdown { 
    display: none; 
    position: absolute; 
    right: 0; 
    background-color: white; 
    color: #333; 
    width: 360px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); 
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden;
    z-index: 2000;
}
.user-dropdown.show { display: block; }

.user-info-section {
    padding: 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #eee;
    text-align: left;
}
.logged-in-label { font-size: 0.75rem; color: #7f8c8d; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
.logged-in-top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.logged-in-name { font-weight: bold; color: #2c3e50; font-size: 1rem; margin-bottom: 0; }
.logged-in-separator {
    height: 1px;
    width: 100%;
    background: #e5e7eb;
    margin: 2px 0 10px 0;
}
.logged-in-license-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; width: 100%; }
.logged-in-license { font-size: 0.85rem; color: #b45309; font-weight: 700; margin-bottom: 12px; }
.logged-in-license-row .logged-in-license { margin-bottom: 0; text-align: left; }
.upgrade-btn {
    border: 1px solid #b45309;
    background: #fff;
    color: #b45309;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}
.upgrade-btn:hover { background: #fff7ed; }
.logout-btn {
    background-color: white;
    border: 1px solid #e74c3c;
    color: #e74c3c;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.logout-btn:hover { background-color: #e74c3c; color: white; }

.dropdown-item { 
    display: flex; 
    align-items: center; 
    padding: 12px 15px; 
    border-bottom: 1px solid #f1f1f1;
    cursor: pointer; 
    transition: background 0.2s; 
}
.dropdown-item:hover { background-color: #f8f9fa; }
.dropdown-item.active { background-color: #e8f4fd; }

.avatar { width: 32px; height: 32px; background-color: #95a5a6; border-radius: 50%; margin-right: 10px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #fff; font-size: 13px; }
.user-name { font-size: 0.9rem; font-weight: 500; }
.user-name-block { display: flex; flex-direction: column; gap: 4px; }

.coach-mini-stats {
    display: flex;
    gap: 5px;
}

.coach-mini-stat {
    font-size: 0.65rem;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid transparent;
    color: #ffffff;
    font-weight: 600;
}

.coach-mini-stat.ctl {
    background: #3498db;
    border-color: #3498db;
}

.coach-mini-stat.atl {
    background: #9b59b6;
    border-color: #9b59b6;
}

.coach-mini-stat.tsb {
    background: #95a5a6;
    border-color: #95a5a6;
}

.coach-mini-stat.tsb-fresh {
    background: #f1c40f;
    border-color: #f1c40f;
}

.coach-mini-stat.tsb-light {
    background: #8bc34a;
    border-color: #8bc34a;
}

.coach-mini-stat.tsb-neutral {
    background: #95a5a6;
    border-color: #95a5a6;
}

.coach-mini-stat.tsb-optimal {
    background: #2ecc71;
    border-color: #2ecc71;
}

.coach-mini-stat.tsb-risk {
    background: #e74c3c;
    border-color: #e74c3c;
}

.coach-mini-stats.loading .coach-mini-stat {
    opacity: 0.65;
}

.notification-badge { 
    background-color: #e74c3c; color: white; border-radius: 10px; 
    padding: 2px 6px; font-size: 0.7rem; font-weight: bold; min-width: 18px; text-align: center;
}
.dropdown-header { font-size: 0.8rem; color: #7f8c8d; padding: 10px 15px; background: #fdfdfd; border-bottom: 1px solid #eee; text-transform: uppercase; letter-spacing: 1px; }

/* --- NOTIFICATION DROPDOWN (HEADER BELL) --- */
.notification-menu-container { position: relative; cursor: pointer; height: 100%; display: flex; align-items: center; margin-right: 15px; }
.notification-menu-trigger { display: flex; align-items: center; padding: 5px 10px; border-radius: 4px; transition: background 0.2s, color 0.2s; cursor: pointer; color: #7f8c8d; }
.notification-menu-trigger:hover { background-color: #34495e; color: #3498db; }

.notification-dropdown { 
    display: none; 
    position: absolute; 
    right: 0; 
    background-color: white; 
    color: #333; 
    width: 340px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); 
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
    z-index: 2000;
    top: 100%;
    margin-top: 8px;
}
.notification-dropdown.show { display: block; }

.notification-card {
    padding: 12px 15px;
    border-bottom: 1px solid #f1f1f1;
    transition: background 0.2s;
}
.notification-card:hover { background-color: #f8f9fa; }
.notification-card.unread { background-color: #e3f2fd; }

.notification-card-title { font-weight: 600; color: #2c3e50; margin-bottom: 4px; font-size: 0.95em; }
.notification-card-meta { font-size: 0.75em; color: #7f8c8d; margin-bottom: 6px; }
.notification-card-message { font-size: 0.85em; color: #555; margin-bottom: 8px; line-height: 1.4; }

.notification-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.notification-actions button {
    flex: 1;
    min-width: 70px;
    padding: 5px 10px;
    font-size: 0.75em;
    border: 1px solid #ddd;
    background: white;
    color: #2c3e50;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.notification-actions button:hover { background: #f0f0f0; border-color: #999; }
.notification-actions button.accept {
    background: #27ae60;
    color: white;
    border-color: #27ae60;
}
.notification-actions button.accept:hover {
    background: #229954;
    border-color: #229954;
}

.notification-empty {
    padding: 30px 15px;
    text-align: center;
    color: #7f8c8d;
    font-size: 0.9em;
}

/* --- NOTIFICATION BUTTON --- */
.notif-btn {
    background: #f39c12; color: white; border: none; border-radius: 4px; 
    padding: 4px 8px; font-size: 0.7rem; display: flex; align-items: center; gap: 8px;
    margin-left: auto; cursor: pointer; text-align: left; line-height: 1.2;
    transition: background 0.2s;
}
.notif-btn:hover { background: #d35400; }
.notif-icon { font-size: 1.1em; }
.notif-lines { display: flex; flex-direction: column; }

/* Jobb oldali tartalom */
.main-content { 
    flex: 1; 
    padding: 0;
    margin-left: 90px; /* Fix hely az oldalsávnak asztali gépen */
    transition: margin-left 0.3s ease;
    overflow: hidden; 
    background-color: #f8f9fa; 
    display: flex;
    flex-direction: column;
}

/* Fiziológiai adatok rácsa */
.metrics-grid {
    display: flex; 
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-around; 
    padding: 10px 0;
}

.zones-wrapper { 
    display: flex; 
    gap: 20px; 
    margin-top: 20px; 
    flex-wrap: wrap; /* Mobilon egymás alá törnek */
}

.race-reco-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 16px;
    align-items: stretch;
}

.race-reco-panel {
    border: 1px solid #e8ecef;
    border-radius: 10px;
    padding: 12px;
    background: #ffffff;
}

.race-reco-score-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    color: #2c3e50;
    background: #eef3f7;
    margin: 4px 6px 0 0;
}

.race-reco-score-pill b {
    color: #1f3f5b;
}

.race-reco-list {
    margin: 8px 0 0 0;
    padding-left: 18px;
    color: #51606e;
    font-size: 0.85rem;
}

#race-fit-chart {
    width: 100%;
    height: 230px !important;
}

@media (max-width: 980px) {
    .race-reco-grid {
        grid-template-columns: 1fr;
    }
}

.discussions-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 12px;
    min-height: 620px;
}

.discussions-sidebar,
.discussions-main {
    background: #ffffff;
    border: 1px solid #e6ebef;
    border-radius: 10px;
    overflow: hidden;
}

.discussion-partner-item {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f3f6;
    cursor: pointer;
}

.discussion-partner-item:hover { background: #f8fafc; }
.discussion-partner-item.active { background: #eaf3ff; }

.discussion-chat-scroll {
    max-height: 470px;
    overflow-y: auto;
    padding: 10px 14px;
    background: #fbfdff;
}

.discussion-group-header {
    margin: 10px 0 6px;
    font-size: 0.78rem;
    color: #617080;
    font-weight: 700;
    cursor: pointer;
}

.discussion-row {
    display: flex;
    margin-bottom: 10px;
}

.discussion-row.mine { justify-content: flex-end; }
.discussion-row.theirs { justify-content: flex-start; }

.discussion-bubble {
    max-width: 74%;
    border-radius: 14px;
    padding: 8px 10px;
    box-shadow: 0 1px 2px rgba(44, 62, 80, 0.08);
}

.discussion-row.mine .discussion-bubble {
    background: #d9ecff;
    border: 1px solid #bfddff;
}

.discussion-row.theirs .discussion-bubble {
    background: #ffffff;
    border: 1px solid #e7edf3;
}

.discussion-meta {
    font-size: 0.72rem;
    color: #748494;
    margin-top: 4px;
}

.discussion-inline-action {
    background: #f0f4f8;
    color: #4f6072;
    border: 1px solid #d6dfe8;
    border-radius: 999px;
    font-size: 0.72rem;
    padding: 3px 9px;
    cursor: pointer;
}

.discussion-inline-action:hover {
    background: #e8eef5;
}

.discussion-compose {
    border-top: 1px solid #edf1f5;
    padding: 10px;
    background: #fff;
}

.discussion-compose textarea {
    width: 100%;
    min-height: 72px;
    resize: vertical;
    border: 1px solid #d6dee6;
    border-radius: 8px;
    padding: 9px;
    font-family: inherit;
}

@media (max-width: 980px) {
    .discussions-layout {
        grid-template-columns: 1fr;
    }

    .discussion-chat-scroll {
        max-height: 420px;
    }

    .discussion-bubble {
        max-width: 88%;
    }
}

.content-wrapper { 
    max-width: 1800px; 
    width: 100%; 
    margin: 0 auto; 
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Fontos a belső görgetéshez */
}

.workout-card { border: 1px solid #ccc; padding: 15px; margin-bottom: 10px; border-radius: 8px; }

/* Lágyabb gombok az egész appban */
button { 
    background: #5c7cfa; 
    color: white; 
    border: none; 
    padding: 8px 16px; 
    cursor: pointer; 
    border-radius: 6px; 
    transition: all 0.2s ease;
    font-weight: 500;
}
button:hover { background: #4263eb; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
button:active { transform: translateY(0); }

input, textarea { width: 100%; margin-bottom: 10px; display: block; }

.viz-container { display: flex; gap: 15px; height: 350px; margin-bottom: 15px; }
.map-wrapper { flex: 1; height: 100%; background: #eee; border-radius: 4px; overflow: hidden; }
.charts-wrapper { flex: 1; display: flex; flex-direction: column; gap: 10px; height: 100%; }
.chart-box { flex: 1; position: relative; border: 1px solid #eee; padding: 5px; border-radius: 4px; }

/* --- ÉRTESÍTÉSEK --- */
.notification-icon { color: #95a5a6; margin-left: 10px; font-size: 1.2em; }
.status-icon-ok { color: #2ecc71; margin-left: auto; font-size: 1.2em; }
.notification-container { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.notification-text { font-size: 0.7rem; color: #ff9800; font-style: italic; opacity: 0.9; line-height: 1.2; }

/* Új Edzés Stílus */
.workout-card.status-new { border: 2px solid #ff9800; background-color: #fff3e0; position: relative; }
.workout-card.status-new h3::after { content: "  •  ÚJ FELTÖLTÉS"; color: #ff9800; font-size: 0.7em; vertical-align: middle; text-transform: uppercase; }

/* Új Komment Stílus */
.feedback-section { margin-top: 15px; padding: 10px; border-radius: 6px; transition: background 0.3s; }
.workout-card.status-comment .feedback-section { background-color: #fff9db; border: 1px solid #f1c40f; position: relative; }
.workout-card.status-comment .feedback-section::before { 
    content: "🔔 Új hozzászólás érkezett!"; 
    display: block; color: #d35400; font-weight: bold; font-size: 0.85em; margin-bottom: 8px; 
}

/* --- NAPTÁR NÉZET --- */
.view-header { 
    display: none; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 0; 
    margin-top: 0;
    padding: 10px 0;
    height: 80px; /* Fix magasság a pontos sticky pozicionáláshoz */
    position: sticky;
    top: 0;
    z-index: 110;
    background-color: #f8f9fa; /* Szürke háttér a vizuális elválasztáshoz */
    border-bottom: 1px solid #ccc; 
    border-top: none; /* Fentre nem kell, ott a sötét sáv */
    border-radius: 0; /* Szögletes sarkok a fejléc illeszkedéséhez */
    z-index: 1002 !important; /* A menüsáv (1000) felett, de a modal (2000) alatt */
    padding: 10px 10px; /* Igazítás a naptár konténeréhez (10px padding) */
}

/* --- MINI DATE PICKER (DROPDOWN) --- */
.mini-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}
.mini-picker-title { font-weight: 400; font-size: 1rem; color: #576574; letter-spacing: 0.5px; }
.mini-picker-nav { cursor: pointer; padding: 2px 8px; border-radius: 4px; border: 1px solid #ddd; background: #f8f9fa; font-size: 0.8rem; }
.mini-picker-nav:hover { background: #e9ecef; }

.mini-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}
.mini-picker-weekday { font-size: 0.7rem; color: #95a5a6; font-weight: bold; padding-bottom: 5px; }
.mini-picker-day {
    font-size: 0.8rem;
    padding: 6px 0;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}
.mini-picker-day:hover { background-color: #3498db; color: white; }
.mini-picker-day.other-month { color: #ccc; }
.mini-picker-day.today { 
    font-weight: bold; 
    border: 1px solid #3498db; 
    color: #3498db; 
}
.mini-picker-day.active-view {
    background-color: #3498db;
    color: white;
}

.calendar-controls { 
    display: flex; 
    gap: 20px; 
    align-items: center; 
    justify-content: space-between;
    z-index: 110;
    background-color: transparent; /* Átlátszó, mert a szülő (.view-header) adja a színt */
    padding: 10px 0;
    width: 100%;
}

.calendar-nav-left { display: flex; align-items: center; gap: 10px; }

.header-stats-center {
    display: flex;
    gap: 12px;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.mini-stat-box {
    padding: 6px 15px;
    border-radius: 8px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 90px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.mini-stat-box .label { font-size: 0.65rem; letter-spacing: 0.5px; opacity: 0.9; font-weight: 700; margin-bottom: 2px; }
.mini-stat-box .value { font-size: 1.1rem; font-weight: bold; }

.calendar-controls button.header-btn { 
    padding: 8px 15px; border-radius: 6px; border: 1px solid #ddd; 
    font-size: 0.9em; cursor: pointer; background: white; color: #333;
    transition: all 0.2s;
}
.calendar-controls button.header-btn:hover { background: #f1f1f1; border-color: #ccc; }

/* Kiemelés animáció */
@keyframes highlight-glow {
    0% { border-color: var(--calendar-today-marker-color, #2980b9); box-shadow: 0 0 0 2px var(--calendar-today-marker-color, #2980b9); z-index: 100; }
    50% { border-color: var(--calendar-today-marker-color, #2980b9); box-shadow: 0 0 0 4px var(--calendar-today-marker-color, #2980b9); z-index: 100; }
    100% { border-color: #ccc; box-shadow: none; }
}
.highlight-day { animation: highlight-glow 2s ease-out; }

/* --- TABLE BASED CALENDAR (Stabil rács) --- */
.calendar-table {
    width: 100%;
    min-width: 800px; /* Megakadályozza az oszlopok összenyomódását mobilon */
    border-collapse: collapse;
    table-layout: fixed; /* Ez garantálja a fix oszlopszélességet */
    background: #fff;
    border: 1px solid #ccc; /* Sötétebb keret */
    border-radius: 8px; /* Ha a border-collapse separate, akkor működik, de itt a konténer adhat keretet */
    border-top: none; /* A fejléc külön van, összeolvadás miatt */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* --- MOBILE CALENDAR RECONSTRUCTION (SPLIT VIEW) --- */
@media (max-width: 768px) {
    /* Elrejtjük a fix nap-fejlécet mobilon a kérés szerint */
    .calendar-days-header { display: none !important; }
    
    .calendar-header-summary, .calendar-summary-cell {
        display: none !important;
    }

    .calendar-table {
        display: block !important;
        min-width: 100% !important;
        border: none !important;
    }

    .calendar-table tbody {
        display: block !important;
    }

    .calendar-week-row {
        display: contents !important; /* Szétesik a sor, a cellák közvetlen gyerekek lesznek */
    }

    .calendar-day-cell {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 60px;
        border-left: none !important;
        border-right: none !important;
        padding: 10px !important;
        background: white;
        margin-bottom: 2px;
    }

    .day-date {
        margin: -10px -10px 10px -10px !important;
        padding: 12px 15px !important;
        font-size: 1rem !important;
        background-color: #f8f9fa !important;
        border-bottom: 1px solid #eee;
        color: #34495e;
    }
}

/* Biztosítjuk, hogy a konténer engedje a sticky működését */
#calendar-view-container, #notifications-view-container, #settings-view-container {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 10px 20px 10px;
}

#list-view-container {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    padding: 20px 10px 20px 10px;
}

/* ÚJ: Különálló fix fejléc a napoknak */
.calendar-days-header {
    display: flex;
    min-width: 800px; /* Összhangban a táblázattal */
    position: sticky; /* Sticky */
    top: 0; /* A görgethető konténer tetejéhez ragad */
    z-index: 90; /* A vezérlők (110) alatt, de a tartalom felett */
    border: 1px solid #ccc;
    border-bottom: none; /* Hogy egybeolvadjon a táblázattal */
    border-top: none; /* Hogy egybeolvadjon a vezérlőkkel */
    font-weight: 600;
    box-sizing: border-box;
    margin-top: 0;
    color: white;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important; /* Erősebb, látható árnyék */
    width: 100%;
    margin-bottom: 10px; /* Hogy a táblázat ne csússzon be alá betöltéskor */
}
.calendar-header-item { flex: 1; padding: 10px; text-align: center; border-right: 1px solid rgba(255,255,255,0.2); }
.calendar-header-item:last-child { border-right: none; }
.calendar-header-summary { 
    width: 140px; flex: none; 
    background-color: rgba(0,0,0,0.1); /* Enyhe sötétítés az alapszínen */
    position: relative;
    transition: width 0.3s ease;
    display: flex; align-items: center; justify-content: center;
}

.calendar-day-cell { 
    border: 1px solid #ccc; 
    padding: 5px; 
    position: relative; 
    font-size: 0.9em; 
    vertical-align: top; 
    height: 140px; /* Fix magasság: Kártya + Dátum + Menü helye */
}
.calendar-summary-cell { 
    width: 140px; 
    background: #f8f6fa; /* Nagyon halvány lilás háttér */
    border: 1px solid #ccc; 
    padding: 10px; 
    vertical-align: middle; 
    font-size: 0.8em; 
}
.calendar-summary-header { width: 140px; }

/* --- ÖSSZESÍTÉS OSZLOP ÖSSZECSUKÁSA --- */
/* Gomb stílusa */
.summary-toggle-btn {
    position: absolute;
    left: auto; 
    right: 0; /* Mindig a konténer jobb széléhez tapad */
    top: 50%; transform: translateY(-50%); /* Csak vertikális igazítás */
    width: 24px; height: 24px; /* Kicsit nagyobb klikk terület */
    background: transparent; color: white;
    border: none; border-radius: 50%;
    font-size: 14px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 100;
    padding: 0;
}
.summary-toggle-btn:hover { background: rgba(142, 68, 173, 0.1); transform: translateY(-50%) scale(1.1); }
/* Összecsukott állapot */
.summary-collapsed .calendar-header-summary { width: 0 !important; padding: 0 !important; border: none !important; overflow: visible !important; }
.summary-collapsed .calendar-header-summary span { display: none; } /* Szöveg elrejtése */
.summary-collapsed .calendar-summary-cell { display: none; } /* Cella eltüntetése */
/* Ha az oszlop eltűnik, a táblázat többi oszlopa automatikusan kitölti a helyet (table-layout: fixed mellett is, ha a th/td eltűnik) */


/* Napi feltöltés gomb (Hoverre jelenik meg) */
.calendar-day-cell:hover .day-upload-btn { display: flex; }
.day-upload-btn { 
    display: none; /* Alapból rejtett */
    position: absolute; top: 5px; right: 5px;
    width: 24px; height: 24px; border-radius: 50%;
    background-color: rgba(255,255,255,0.8); color: #3498db; border: 1px solid #3498db;
    align-items: center; justify-content: center; cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    font-size: 16px; font-weight: bold; z-index: 10;
    transition: background-color 0.2s;
}
.day-upload-btn:hover { background-color: #3498db; color: white; }

/* --- HOVER GYORSMENÜ A NAPTÁRBAN (ÚJ) --- */
.calendar-day-cell:hover .day-hover-menu { visibility: visible; opacity: 1; }
.day-hover-menu {
    display: flex; /* Mindig a layout része, hogy ne ugráljon */
    visibility: hidden; /* De alapból nem látszik */
    opacity: 0;
    transition: opacity 0.2s;
    position: relative; /* Flow positioning: közvetlenül a tartalom után */
    margin: 1px auto 0 auto; /* 1px távolság fentről, középre igazítva */
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 2px 4px;
    gap: 2px;
    max-width: 96%; /* Az oszlop szélességén belül maradjon */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 20;
    align-items: center;
    justify-content: center;
}
.day-hover-btn {
    background: transparent; border: none; padding: 2px;
    font-size: 0.9rem; cursor: pointer; border-radius: 4px;
    transition: transform 0.2s;
    line-height: 1;
}
.day-hover-btn:hover { transform: scale(1.2); background-color: rgba(0,0,0,0.05); }

.day-date { 
    background-color: rgba(52, 152, 219, 0.15); /* Sokkal áttetszőbb kék */
    color: #2c3e50;
    padding: 8px 10px;
    margin: -5px -5px 10px -5px; /* Kitölti a cella tetejét (negatív margin a padding ellen) */
    font-weight: bold; 
    font-size: 0.9em; 
    text-align: left; 
    box-shadow: 0 3px 5px rgba(0,0,0,0.05); /* Finomabb árnyék */
}

/* Mai nap kiemelése */
.day-date-today {
    border: 1px solid var(--calendar-today-marker-color, #2980b9); /* Erősebb kék keret (naptár stílus) */
    /* A háttérszín és a szövegszín marad az eredeti (.day-date) */
}

.mini-card { 
    background: white; 
    border: 1px solid #e0e0e0; /* Kicsit finomabb keret */
    padding: 6px; 
    margin-bottom: 6px; 
    border-radius: 6px; 
    border-left: 6px solid #ccc; 
    height: 70px; /* Fix magasság a kérésnek megfelelően */
    display: flex; flex-direction: column; gap: 2px;
    overflow: hidden; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* Lágyabb, de mélyebb árnyék */
    cursor: pointer; 
    font-size: 0.75rem; 
    position: relative;
    user-select: none;
    white-space: normal; /* Engedi a sortörést */
    word-wrap: break-word; /* Tördeli a hosszú szavakat */
    transition: transform 0.2s, box-shadow 0.2s;
}
.mini-card.with-plan-preview {
    height: 98px;
}
.mini-card:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0,0,0,0.12); }

.mini-card-row.data i { 
    padding-right: 3px; /* Megelőzzük a dőlt karakterek levágását a szélén */
    display: inline-block; 
}
.mini-card i { font-style: italic; opacity: 0.9; }

/* Naptár mini kártya státuszok */
.mini-card.status-new { border: 2px solid #ff9800; border-left-width: 5px; background-color: white; }
.mini-card.status-comment { border: 2px solid #f1c40f; border-left-width: 5px; background-color: white; }

/* Tervezett edzés stílusa */
.mini-card.type-plan {
    border-style: solid;
    background-color: #ffffff;
    opacity: 1;
}

.mini-card-row { display: flex; align-items: center; gap: 4px; line-height: 1.2; }
.mini-card-row.title { font-size: 0.8rem; font-weight: normal; }
.mini-card-row.title b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.mini-card-row.data { font-size: 0.7rem; color: #000; }

.mini-card-footer {
    justify-content: space-between;
    align-items: center;
    min-height: 14px;
}

.mini-card-tss {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.mini-card-footer-badges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.mini-card-plan-strip {
    width: 100%;
    height: 20px;
    margin-top: auto;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    border: none;
}

.plan-structure-svg--compact {
    display: block;
}

.mini-status-icon { 
    position: static;
    font-size: 0.8rem;
}

.mini-rank-indicator {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* AI Gomb a naptárban */
.ai-summary-btn { margin-top: 10px; width: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; color: white; padding: 6px; border-radius: 4px; cursor: pointer; font-size: 0.8em; transition: transform 0.2s; }
.ai-summary-btn:hover { transform: scale(1.05); }

/* AI Szöveg Stílus */
.ai-text-content { font-family: 'Courier New', Courier, monospace; line-height: 1.6; white-space: pre-wrap; background: #f4f6f7; padding: 15px; border-radius: 5px; border-left: 4px solid #764ba2; min-height: 100px; }

/* --- AI MODAL SPECIFIKUS STÍLUSOK (Középre igazítás) --- */
#ai-modal .modal-content {
    max-width: 850px; /* Szélesebb */
    height: auto;     /* Vegye fel a tartalom méretét */
    max-height: 80vh; /* De maximum a képernyő 80%-át töltse ki */
    display: flex;
    flex-direction: column;
}
/* Bezáró gomb fixálása jobb felülre (flex miatt a float nem működik) */
#ai-modal .close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
}
/* Törlés gomb stílusa */
.delete-btn { background-color: transparent; color: #e74c3c; border: 1px solid #e74c3c; padding: 6px 12px; border-radius: 4px; cursor: pointer; float: right; font-size: 0.9em; transition: all 0.2s; }
.delete-btn:hover { background-color: #e74c3c; color: white; }

/* Hogy csak a szöveg görgessen, a fejléc maradjon */
#ai-result-container { flex: 1; overflow-y: auto; }

/* Komment előzmények */
.comment-history { background: #f1f3f5; padding: 10px; border-radius: 5px; margin-bottom: 10px; border: 1px solid #e9ecef; }
.comment-item { font-size: 0.9em; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #e0e0e0; color: #495057; }
.comment-item:last-child { border-bottom: none; margin-bottom: 0; }
.comment-meta { font-weight: bold; color: #2c3e50; font-size: 0.85em; }
.comment-time { color: #adb5bd; font-size: 0.8em; font-weight: normal; margin-left: auto; }

.comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.comment-actions {
    margin-left: 10px;
    display: flex;
    gap: 8px;
}

.comment-actions button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.5;
    color: #7f8c8d;
    line-height: 1;
}

/* ÚJ: Célok vizualizációja rács elrendezésben */
#goals-visualization-container.goals-grid-container {
    display: flex;
    flex-wrap: wrap; /* Engedi, hogy sorba törjenek, ha nincs elég hely */
    gap: 20px; /* Hely a kártyák között */
    justify-content: center; /* Középre igazítás */
    margin-top: 20px; /* Hely a PMC alatt */
}

#goals-visualization-container .fitness-chart-wrapper {
    flex: 1 1 calc(50% - 10px); /* Két oszlop, 20px gap-pel (10px mindkét oldalról) */
    min-width: 300px; /* Minimális szélesség, hogy ne legyenek túl kicsik */
    margin-top: 0 !important; /* Felülírjuk az app.js-ben beállított margin-top-ot */
}

@media (max-width: 768px) {
    #goals-visualization-container .fitness-chart-wrapper {
        flex: 1 1 100%; /* Mobilon egy oszlop */
    }
}
.comment-actions button:hover { opacity: 1; color: #2c3e50; }

#modal-comment-input {
    resize: vertical;
    max-height: 200px;
}

/* --- MODAL (DIALOG) NÉZET --- */
.modal { 
    display: none; 
    position: fixed; 
    z-index: 2000; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; /* A belső tartalom görögjön, ne az egész modal háttere */
    background-color: rgba(0,0,0,0.5); 
    backdrop-filter: blur(2px);
    align-items: center; 
    justify-content: center;
}
.modal-content { 
    background-color: #fefefe; 
    margin: 0; 
    padding: 20px; 
    border: 1px solid #888; 
    width: 95%; 
    max-width: 1200px; 
    border-radius: 8px; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); 
    position: relative; 
    max-height: 90vh; /* Ne érjen le az aljáig, maradjon 5-5% hely alul-felül */
    overflow-y: auto; /* Ha túl sok a tartalom, az ablakon belül lehessen görgetni */
}
.close-btn { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.2s; }
.close-btn:hover { color: #000; }

.modal-header { border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 20px; }
.modal-header h2 { margin: 0; color: #2c3e50; }
.modal-stats { display: flex; gap: 15px; font-size: 0.9em; color: #555; margin-top: 5px; }

/* --- WORKOUT MODAL TITLE --- */
.workout-modal-title-row { display: flex; align-items: center; line-height: 1; }
.workout-modal-title-main { display: flex; align-items: center; }
.workout-modal-title-text { font-size: 1.6rem; font-weight: bold; margin-right: 20px; white-space: nowrap; }
.workout-modal-title-separator { width: 1px; height: 2.2rem; background-color: #ddd; margin-right: 20px; }
.workout-modal-title-meta { display: flex; flex-direction: column; justify-content: space-around; height: 2.2rem; font-weight: normal; }
.workout-modal-title-meta span { font-size: 0.85rem; color: #7f8c8d; white-space: nowrap; }
.workout-modal-title-meta--mobile { display: none; }

@media (max-width: 768px) {
    .workout-modal-title-row { align-items: center; }
    .workout-modal-title-main { flex-direction: column; align-items: flex-start; }
    .workout-modal-title-text { margin-right: 0; white-space: normal; }
    .workout-modal-title-separator { display: none; }
    .workout-modal-title-meta--desktop { display: none; }
    .workout-modal-title-meta--mobile { display: block; font-size: 0.82rem; color: #7f8c8d; margin-top: 10px; height: auto; }
}

/* --- ÚJ MODAL FLOW LAYOUT --- */
.modal-body-flow { display: flex; flex-direction: column; gap: 20px; }

.master-chart-section { width: 100%; background: white; border: 1px solid #ddd; border-radius: 8px; padding: 15px; }
.master-chart-container { height: 350px; width: 100%; }

/* --- TIME IN ZONE STYLES --- */
.time-in-zone-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
}
.zone-group {
    background: white;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.zone-bar-container {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.zone-label { width: 35px; font-size: 0.75rem; font-weight: bold; color: #7f8c8d; flex-shrink: 0; }
.zone-progress-bg { flex: 1; height: 16px; background: #f0f0f0; border-radius: 8px; overflow: hidden; position: relative; }
.zone-progress-fill { height: 100%; border-radius: 7px; transition: width 0.5s ease-out; }
.zone-range-text {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 0.65rem;
    color: rgba(0,0,0,0.25);
    line-height: 16px;
    pointer-events: none;
    font-weight: bold;
}
.zone-stats { min-width: 130px; font-size: 0.8rem; color: #2c3e50; font-family: monospace; display: flex; justify-content: flex-end; gap: 12px; }
.zone-stats span:first-child { width: 65px; text-align: right; }
.zone-stats span:last-child { width: 45px; text-align: right; }

@media (max-width: 768px) {
    .time-in-zone-section { grid-template-columns: 1fr; }
}

.info-split-row { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 15px; width: 100%; }

/* --- RESPONSIVE MEDIA QUERIES --- */

@media (min-width: 769px) {
    .content-wrapper { width: 95%; }
}

@media (min-width: 1200px) {
    .content-wrapper { width: 97%; }
}

@media (max-width: 768px) {
    .hamburger-btn { display: block; }
    .app-brand-icon { display: none; }
    
    .side-nav {
        position: fixed;
        left: -280px;
        width: 280px;
        top: 0;
        height: 100%;
        z-index: 1500;
        box-shadow: 2px 0 10px rgba(0,0,0,0.2);
        transition: left 0.3s ease;
    }
    .side-nav.open { left: 0; }
    
    .side-nav-header.mobile-only {
        display: flex;
        justify-content: flex-end;
        padding: 10px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .side-nav-link {
        flex-direction: row;
        width: 100% !important;
        height: auto !important;
        padding: 15px 20px;
        justify-content: flex-start;
    }
    .side-nav-link.active {
        border-radius: 0;
        background-color: #3498db;
    }
    .nav-icon { margin-bottom: 0; margin-right: 15px; width: 20px; height: 20px; }
    .nav-text { font-size: 1rem; }

    .main-content { margin-left: 0; }
    #list-view-container, #calendar-view-container, #notifications-view-container { padding: 0 5px 20px 5px; }

    .app-header { padding: 0 10px; }
    .app-title { font-size: 1rem; }
    .header-toggles button { padding: 5px 8px; font-size: 0.8rem; }
    
    /* Naptár nézet statisztikái mobilon */
    .view-header { height: auto; min-height: 80px; }
    .calendar-controls { flex-direction: column-reverse; gap: 15px; padding: 15px 0; }
    .header-stats-center { 
        display: flex !important; 
        position: static; 
        transform: none; 
        width: 100%; 
        justify-content: center; 
        gap: 8px;
    }
    .mini-stat-box { 
        min-width: 75px; 
        padding: 4px 8px;
    }
    .mini-stat-box .value { font-size: 0.9rem; }
    
    .info-split-row {
        grid-template-columns: 1fr; /* Modal statisztikák egymás alá kerülnek */
    }
    
    .metrics-grid {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    .metrics-grid > div { width: 100%; border-left: none !important; border-right: none !important; border-bottom: 1px solid #eee; padding-bottom: 10px; }

    /* Mobilon ne legyen margin-left még pinned állapotban sem */
    .app-container.sidebar-pinned .main-content {
        margin-left: 0;
    }

    .zones-wrapper {
        flex-direction: column; /* Mobilon kényszerített függőleges elrendezés */
    }

    .chart-stats-row {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .stat-box {
        min-width: 100px;
    }

    .fitness-chart-wrapper {
        padding: 10px 5px; /* Kisebb oldalsó padding mobilon */
    }

    /* PMC chart edge-to-edge mobilon: kompenzálja a list-view-container 5px paddingját */
    #pmc-chart-wrapper {
        margin-left: -5px;
        margin-right: -5px;
        border-radius: 0;
        width: calc(100% + 10px);
    }

    /* Insight kártyák ne tolja ki a layoutot mobilon */
    #training-insights-container .fitness-chart-wrapper {
        min-width: 0;
        width: 100%;
    }

    .chart-title {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    #pmc-chart-wrapper .chart-title {
        justify-content: flex-start !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    #pmc-chart-wrapper #lbl-pmc-title {
        width: 100%;
        text-align: left !important;
        display: block;
    }

    #pmc-chart-wrapper .chart-controls {
        align-self: flex-start;
    }

    /* Áttekintés oldal statisztikai boxai mobilon - Arányos kicsinyítés */
    .chart-stats-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        margin-top: 20px !important; /* Távolabb a felső menütől */
        margin-bottom: 25px !important; /* Távolabb az alsó grafikontól */
        justify-content: center !important;
        width: 100% !important;
    }
    .stat-box {
        width: 85px !important; /* Fix szélesség mobilon */
        height: 68px !important; /* Fix magasság mobilon */
        flex: 0 0 85px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    .stat-box .stat-label { font-size: 0.55rem !important; margin-bottom: 1px !important; }
    .stat-box .stat-value { font-size: 1rem !important; }
    .stat-box.highlight-box { transform: none; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }

    .user-dropdown {
        width: 100vw;
        position: fixed;
        top: 60px;
        left: 0;
        border-radius: 0;
    }

    .integration-row {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    .strava-btn {
        width: 100%;
    }
}
.stats-column { background-color: #f8f9fa; padding: 12px; border-radius: 8px; border: 1px solid #eee; }
.comments-column { background-color: #fff; padding: 12px; border-radius: 8px; border: 1px solid #eee; }

.modal-footer { margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; display: flex; justify-content: flex-start; }
.delete-btn-footer { background-color: transparent; color: #e74c3c; border: 1px solid #e74c3c; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 0.85em; transition: all 0.2s; }
.delete-btn-footer:hover { background-color: #e74c3c; color: white; }

.draggable-charts-section { display: flex; flex-direction: column; gap: 15px; border-top: 2px dashed #eee; padding-top: 20px; }

/* Jobb oldali statisztika táblázat */
.stat-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 0.85rem; }
.stat-table td { padding: 6px 0; border-bottom: 1px solid #e0e0e0; }
.stat-table tr:last-child td { border-bottom: none; }

/* Kisebb, "cukibb" statisztika megjelenítés */
.mini-stat-table { width: 100%; border-collapse: collapse; line-height: 1.1; }
.mini-stat-table td { padding: 2px 0; border-bottom: 1px solid #f0f0f0; }
.mini-stat-table .stat-label { color: #95a5a6; font-weight: normal; padding-right: 8px; font-size: 0.75rem; }
.mini-stat-table .stat-value { font-weight: 600; color: #34495e; text-align: right; font-size: 1.05rem; }

.modal-section-title { font-size: 0.85rem; color: #7f8c8d; margin-bottom: 8px; border-bottom: 1px solid #eee; padding-bottom: 4px; font-weight: bold; }

.stat-label { color: #7f8c8d; }
.stat-value { font-weight: bold; text-align: right; color: #2c3e50; }

/* Draggable Grid a Modalban (Bal oldal) */
.detail-container { display: flex; flex-direction: column; gap: 20px; }
.draggable-item { background: white; border: 1px solid #ddd; border-radius: 6px; padding: 10px; position: relative; transition: box-shadow 0.2s; }
.draggable-item.dragging { opacity: 0.5; border: 2px dashed #007bff; }
.draggable-item h4 { margin: 0 0 10px 0; border-bottom: 1px solid #eee; padding-bottom: 5px; color: #7f8c8d; font-size: 0.9em; letter-spacing: 0.5px; pointer-events: none; }

/* Modalbeli elemek méretei */
.modal-map-container { height: 400px; width: 100%; border-radius: 4px; overflow: hidden; }
.modal-chart-container { height: 200px; width: 100%; }

/* Lista nézet módosítása - kattinthatóság jelzése */
.workout-card { cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.workout-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }

/* Hamburgermenü ikon a mozgatáshoz */
.drag-handle { position: absolute; top: 8px; right: 10px; cursor: grab; font-size: 1.4em; color: #bdc3c7; user-select: none; z-index: 10; line-height: 1; }
.drag-handle:hover { color: #2c3e50; }
.drag-handle:active { cursor: grabbing; }

/* --- FITNESS CHART --- */
.training-insights-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 768px) {
    .training-insights-grid {
        grid-template-columns: 1fr;
    }
}

.fitness-chart-wrapper { 
    background: white; 
    padding: 20px 20px 30px 20px; /* Több helyet hagyunk alul a skálaértékeknek */
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); 
    margin-bottom: 25px; 
    min-height: 400px;
    position: relative;
    flex-shrink: 0; /* Megakadályozza, hogy a Flexbox összenyomja a boxot */
    display: flex;
    flex-direction: column;
}

.fitness-chart-wrapper canvas {
    flex: 1; /* A grafikon kitölti a maradék helyet a konténeren belül */
    min-height: 0; /* Megakadályozza a flex-overflow-t */
}

.chart-title { 
    font-size: 1.1rem; font-weight: bold; color: #34495e; 
    margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; 
    display: flex; justify-content: space-between; align-items: center;
    gap: 15px;
    flex-wrap: wrap; /* Mobilon vagy szűk helyen a gomb leugrik a szöveg alá az átfedés helyett */
}

/* Settings hierarchia: A beágyazott alcsoportok címei ne legyenek félkövérek 
   és kicsit kisebbek legyenek a jobb vizuális elkülönítés érdekében. */
.fitness-chart-wrapper .fitness-chart-wrapper .chart-title,
#settings-view-container h3 {
    font-weight: normal;
    font-size: 1rem;
    color: #34495e;
}

/* Chart Controls (Időtáv gombok) */
.chart-controls { display: flex; gap: 5px; }
.chart-range-btn { 
    background: #ecf0f1; 
    color: #7f8c8d;
    border: none; 
    padding: 6px 12px; 
    border-radius: 20px; /* Lekerekített */
    font-size: 0.8rem; cursor: pointer; font-weight: 500; transition: all 0.2s; 
}
.chart-range-btn:hover { background: #dce1e3; color: #2c3e50; }
.chart-range-btn.active { background: #95a5a6; color: white; box-shadow: 0 1px 3px rgba(0,0,0,0.1); font-weight: bold; }

/* Kiemelt statisztikák a grafikon felett */
.chart-stats-row { display: flex; gap: 15px; margin-bottom: 25px; justify-content: center; width: 100%; flex-wrap: nowrap; }
.stat-box { width: 100px; height: 80px; flex: 0 0 100px; border-radius: 10px; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; }
.stat-box.highlight-box { box-shadow: 0 10px 25px rgba(0,0,0,0.25); transform: scale(1.08); z-index: 5; }
.stat-label { font-size: 0.65rem; opacity: 0.9; letter-spacing: 0.5px; font-weight: 700; text-transform: uppercase; margin-bottom: 2px; line-height: 1; }
.stat-value { font-size: 1.5rem; font-weight: bold; line-height: 1; }

/* Színes dobozok javítása: felülírjuk a modal táblázat stílusait */
.stat-box .stat-label { color: white; }
.stat-box .stat-value { color: white; text-align: center; }

/* --- CONTEXT MENU (Jobb klikk) --- */
.context-menu {
    display: none;
    position: absolute;
    z-index: 3000;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border-radius: 6px;
    padding: 5px 0;
    min-width: 160px;
}
.context-menu-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #333;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.context-menu-item:hover { background-color: #f1f1f1; }
.context-menu-item.delete { color: #e74c3c; }
.context-menu-item.delete:hover { background-color: #fadbd8; }

/* --- INTEGRATIONS --- */
.integration-row {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #eee;
    margin-top: 15px;
}

.integration-logo {
    background: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Strava specifikus lágyított gombok */
.strava-btn {
    background-color: #FC4C02;
    color: white;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: bold;
    transition: opacity 0.2s;
}
.strava-btn:hover { background-color: #e34402; }
.strava-btn.connected {
    background-color: #f8f9fa;
    color: #2ecc71;
    border: 1px solid #2ecc71;
    cursor: default;
}
.strava-btn.connected:hover { background-color: #f8f9fa; transform: none; box-shadow: none; }

.strava-history-btn {
    background: transparent;
    color: #FC4C02;
    border: 1px solid #FC4C02;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.strava-history-btn:hover {
    background: rgba(252, 76, 2, 0.05) !important; /* Halvány narancssárga háttér a kék helyett */
    color: #FC4C02 !important;
    border-color: #FC4C02 !important;
}

/* --- TYPE SELECTOR MODAL STÍLUSOK --- */
#type-selector-modal .modal-content { margin: 0; width: auto; max-width: 500px; }

.type-selector-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
.type-btn {
    background-color: #f8f9fa; border: 1px solid #ddd; border-radius: 8px; padding: 20px;
    cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.type-btn:hover {
    background-color: #e3f2fd; border-color: #3498db; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.type-icon { font-size: 2rem; }
.type-label { font-weight: bold; color: #2c3e50; font-size: 0.9rem; }

/* --- ZONE SAVE BUTTONS --- */
#btn-save-hr:disabled,
#btn-save-pwr:disabled,
#btn-save-metrics:disabled {
    border: 1px solid #ccc !important;
    color: #7f8c8d !important;
    opacity: 0.55;
    cursor: not-allowed;
}

/* --- WORKOUT BUILDER / PLANNER --- */
.plan-steps-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
    min-height: 50px;
}

.plan-step-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8f9fa;
    padding: 10px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    transition: background 0.2s;
}
.plan-step-item:hover { background: #fff; border-color: #3498db; }

.add-step-btn {
    background: transparent;
    color: #3498db;
    border: 1px dashed #3498db;
    width: 100%;
    padding: 10px;
    font-weight: bold;
}
.add-step-btn:hover { background: rgba(52, 152, 219, 0.05); }

.delete-step-btn { background: #f8d7da; color: #721c24; border: none; border-radius: 4px; padding: 0 8px; font-size: 1.2rem; cursor: pointer; }

/* --- PLAN VISUALIZATION --- */
.plan-viz-section {
    width: 100%;
    height: 90px;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 10px;
    overflow: hidden;
}

.plan-tooltip {
    position: fixed;
    background: rgba(44, 62, 80, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    z-index: 3000;
    display: none;
    white-space: pre-line;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    line-height: 1.4;
}

/* Strava Szinkron Dropdown finomítás */
.strava-dropdown-small {
    width: 180px;
    top: 100%;
    right: 0;
    left: auto;
    bottom: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid #ddd;
    background: white;
}

.strava-dropdown-small .dropdown-item {
    padding: 10px 14px !important;
    font-size: 0.8rem !important;
    color: #444 !important;
    border-bottom: 1px solid #eee !important;
    font-weight: 400 !important;
}

/* PMC Chart Egyedi Időtáv (Naptár) pozicionálás fix */
#chart-picker-container {
    position: relative;
}

/* A pickerek alaphelyzetbe állítása, a JS fogja pozicionálni őket */
#chart-picker-dropdown, #calendar-dropdown, #strava-sync-dropdown {
    top: 100%;
    left: auto;
    right: 0;
    bottom: auto;
    margin-top: 8px;
    position: absolute;
}

/* --- STATUS BAR --- */
.status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: #f1f1f1;
    border-top: 1px solid #ccc;
    display: none; /* Alapból rejtett */
    align-items: center;
    justify-content: flex-end;
    padding: 0 15px;
    z-index: 9999;
    font-size: 0.8rem;
    color: #555;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
}
.status-bar.show {
    display: flex;
}

#pull-refresh-indicator {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background: rgba(44, 62, 80, 0.92);
    color: #fff;
    font-size: 0.78rem;
    padding: 6px 10px;
    border-radius: 14px;
    z-index: 2500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

#pull-refresh-indicator.show {
    opacity: 1;
}