/**
 * Mon Petit Tartan - Layout CSS
 * Winamax-inspired layout: dark, compact, bottom nav
 */

.with-sidebar { display: flex; min-height: 100vh; }
.main-full { min-height: 100vh; width: 100%; }
.main-full > .landing-page { width: 100%; }

.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    top: 0; left: 0;
    background: var(--color-bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex; flex-direction: column;
    z-index: var(--z-fixed);
    transition: transform var(--transition-normal);
}

.sidebar-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: space-between;
    height: var(--topbar-height);
}

.sidebar-close { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: var(--border-radius-sm); color: var(--color-text-muted); transition: all var(--transition-fast); }
.sidebar-close:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }

.logo { display: flex; align-items: center; gap: var(--spacing-sm); text-decoration: none; }
.logo-icon { width: 38px; height: 38px; background: var(--gradient-primary); border-radius: var(--border-radius-md); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.logo-icon::before { content: none; }
.logo-letter { font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); color: var(--color-text-inverse); text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
.logo-text { font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); color: var(--color-text-primary); white-space: nowrap; text-transform: uppercase; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 6px; }
.beta-badge { display: inline-block; font-size: 0.55em; font-weight: 800; letter-spacing: 1px; padding: 2px 6px; border-radius: 4px; background: linear-gradient(135deg, #FF5CB8, #9C66FF); color: #fff; text-transform: uppercase; vertical-align: middle; line-height: 1; box-shadow: 0 2px 6px rgba(156,102,255,0.35); }

.sidebar-nav { flex: 1; padding: var(--spacing-sm); overflow-y: auto; }
.nav-list { display: flex; flex-direction: column; gap: 2px; }
.nav-divider { height: 1px; background: var(--border-color); margin: var(--spacing-sm) var(--spacing-md); }

.nav-link { display: flex; align-items: center; gap: var(--spacing-md); padding: 10px 14px; color: var(--color-text-secondary); border-radius: var(--border-radius-md); transition: all var(--transition-fast); position: relative; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.nav-link i { width: 20px; text-align: center; font-size: var(--font-size-md); }
.nav-link:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.nav-link.active { background: rgba(255,200,0,0.1); color: var(--color-primary); }
.nav-link.active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--color-primary); border-radius: 0 3px 3px 0; }

.sidebar-footer { padding: var(--spacing-sm) var(--spacing-md); border-top: 1px solid var(--border-color); }
.user-card { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm); background: var(--color-bg-tertiary); border-radius: var(--border-radius-md); }
.user-avatar { width: 36px; height: 36px; border-radius: var(--border-radius-full); object-fit: cover; }
.user-info { flex: 1; min-width: 0; }
.user-name { display: block; font-weight: var(--font-weight-medium); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--font-size-sm); }
.user-badge { display: inline-block; padding: 2px 6px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); border-radius: var(--border-radius-full); margin-top: 2px; }
.user-badge.athlete { background: rgba(255,200,0,0.15); color: var(--color-primary); }

.main-content { flex: 1; margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }

.topbar { height: var(--topbar-height); background: var(--color-bg-secondary); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: var(--spacing-md); padding: 0 var(--spacing-lg); position: sticky; top: 0; z-index: var(--z-sticky); }
.menu-toggle { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: var(--border-radius-md); color: var(--color-text-secondary); transition: all var(--transition-fast); }
.menu-toggle:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }

/* margin-left:auto sur le premier groupe à droite seulement.
   .topbar-actions reste collé à .topbar-stats sans son propre auto-margin
   (sinon les deux se partageraient l'espace en flex et finiraient au milieu). */
.topbar-stats { display: flex; gap: var(--spacing-sm); margin-left: auto; }
.topbar-stat-item { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--color-bg-tertiary); border-radius: var(--border-radius-full); border: 1px solid var(--border-color); }
.topbar-stat-item i { color: var(--color-primary); font-size: var(--font-size-sm); }
.topbar-stat-value { font-weight: var(--font-weight-bold); color: var(--color-text-primary); font-size: var(--font-size-sm); }
.topbar-stat-label { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-left: 2px; }

.topbar-actions { display: flex; align-items: center; gap: var(--spacing-sm); }
/* Quand .topbar-stats est masqué (sans ligue OU breakpoint mobile),
   c'est .topbar-actions qui doit absorber l'espace pour rester à droite. */
.topbar-stats:empty + .topbar-actions,
.topbar-no-stats .topbar-actions { margin-left: auto; }
.action-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-full); color: var(--color-text-secondary); background: var(--color-bg-tertiary); position: relative; transition: all var(--transition-fast); border: 1px solid var(--border-color); }
.action-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.action-btn.has-badge::after { display: none; }
.action-btn .badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; font-weight: var(--font-weight-bold); background: var(--color-secondary); color: #fff; border-radius: var(--border-radius-full); display: flex; align-items: center; justify-content: center; }

.user-dropdown { position: relative; }
.user-dropdown-toggle { display: flex; align-items: center; gap: var(--spacing-sm); padding: 3px; padding-right: var(--spacing-sm); background: var(--color-bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--border-radius-full); cursor: pointer; transition: all var(--transition-fast); }
.user-dropdown-toggle:hover { background: var(--color-bg-hover); }
.user-dropdown-toggle img { width: 30px; height: 30px; border-radius: var(--border-radius-full); object-fit: cover; }
.user-dropdown-toggle i { font-size: 10px; color: var(--color-text-muted); transition: transform var(--transition-fast); }
.user-dropdown:hover .user-dropdown-toggle i { transform: rotate(180deg); }

.user-dropdown-menu { position: absolute; top: 100%; right: 0; width: 200px; margin-top: var(--spacing-sm); background: #242424; border: 1px solid var(--border-color); border-radius: var(--border-radius-md); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--transition-fast); z-index: var(--z-dropdown); }
.user-dropdown:hover .user-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown-item { display: flex; align-items: center; gap: var(--spacing-md); padding: 10px 14px; color: var(--color-text-secondary); transition: all var(--transition-fast); font-size: var(--font-size-sm); }
.dropdown-item:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.dropdown-item i { width: 16px; text-align: center; }
.dropdown-divider { height: 1px; background: var(--border-color); margin: 4px 0; }

.page-content { flex: 1; padding: var(--spacing-lg); }
.page-header { margin-bottom: var(--spacing-lg); }
.page-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-xs); }
.page-subtitle { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: var(--mobile-nav-height); background: var(--color-bg-secondary); border-top: 1px solid var(--border-color); justify-content: space-around; align-items: center; padding: 0; z-index: var(--z-fixed); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.mobile-nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 12px; color: var(--color-text-muted); font-size: 10px; font-weight: var(--font-weight-medium); transition: color var(--transition-fast); text-decoration: none; position: relative; }
.mobile-nav-item i { font-size: 20px; }
.mobile-nav-item:hover, .mobile-nav-item.active { color: var(--color-primary); }
.mobile-nav-item.active::before { content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background: var(--color-primary); border-radius: 0 0 3px 3px; }

.container { width: 100%; max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--spacing-lg); }
.container-sm { max-width: 600px; }
.container-md { max-width: 800px; }
.container-lg { max-width: 1200px; }

.row { display: flex; flex-wrap: wrap; margin: 0 calc(var(--spacing-md) * -1); }
.col { padding: 0 var(--spacing-md); width: 100%; }
.col-auto { width: auto; }
.col-1 { width: 8.333333%; } .col-2 { width: 16.666667%; } .col-3 { width: 25%; } .col-4 { width: 33.333333%; }
.col-5 { width: 41.666667%; } .col-6 { width: 50%; } .col-7 { width: 58.333333%; } .col-8 { width: 66.666667%; }
.col-9 { width: 75%; } .col-10 { width: 83.333333%; } .col-11 { width: 91.666667%; } .col-12 { width: 100%; }

.section { margin-bottom: var(--spacing-xl); }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-md); flex-wrap: wrap; gap: var(--spacing-sm); }
.section-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.section-link { display: flex; align-items: center; gap: var(--spacing-xs); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-primary); }
.section-link:hover { color: var(--color-primary-light); }
.section-link:hover i { transform: translateX(4px); }
.section-link i { transition: transform var(--transition-fast); }