/* header.css — استایل‌های مربوط به هدر سایت (hero، منوی هدر، پروفایل/آواتار، سوییچ تم، دکمه‌ها و کنترل‌های هدر)
   استخراج‌شده از index.html بدون هیچ تغییری در مقادیر یا ترتیب. */

/* نوار برند بالای هدر (لوگو + نام باشگاه + زیرعنوان «عضویت در باشگاه» سمت راست، دکمه منو سمت چپ)
   با clamp() برای موبایل/تبلت/دسکتاپ به‌صورت یکپارچه اسکیل می‌شود؛ نیازی به بریک‌پوینت جدا نیست. */
.hero { position:relative; background:linear-gradient(135deg,var(--primary),var(--primary2)); color:#fff; border-radius:16px; padding:12px 18px; box-shadow:var(--shadow); }
.hero::before { content:""; position:absolute; inset:0; border-radius:inherit; background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px); background-size:20px 20px; opacity:.5; pointer-events:none }
.hero-stack { position:relative; z-index:1 }
.hero-datetime { display:flex; flex-flow:row wrap; align-items:center; justify-content:center; row-gap:8px; column-gap:12px; width:100%; margin:12px 0 0; padding:12px 16px; background:linear-gradient(135deg,var(--primary),var(--primary2)); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); color:#fff; font-size:clamp(13px,3vw,16px); font-weight:600; box-sizing:border-box; overflow-wrap:anywhere }
.hero-stack { display:flex; flex-direction:column; align-items:stretch; gap:8px }
.hero-identity-row { display:flex; align-items:center; gap:8px; min-width:0 }
.hero-controls-col { display:flex; flex-direction:row; align-items:center; gap:8px; flex:0 0 auto }
.hero-icon-actions { display:flex; flex-direction:row; align-items:center; gap:14px; flex:0 0 auto }
.hero-icon-btn { background:transparent; border:0; padding:0; margin:0; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; position:relative }
.hero-icon-btn svg { width:22px; height:22px; display:block }
.hero-icon-btn.hero-icon-danger { color:#ffd3cf }
.hero-icon-switch input { position:absolute; opacity:0; width:1px; height:1px }
.hero-icon-switch .theme-switch-track { width:auto; height:auto; border:0; background:transparent; display:inline-flex; align-items:center; justify-content:center }
.hero-icon-switch .theme-switch-thumb { position:static; width:22px; height:22px; display:flex; align-items:center; justify-content:center }
.hero-icon-switch .theme-switch-thumb .icon-sun,.hero-icon-switch .theme-switch-thumb .icon-moon { width:22px; height:22px; color:#fff }
.hero-icon-switch .theme-switch-thumb .icon-sun { color:#FFD60A }
.hero-icon-switch .theme-switch-thumb .icon-moon { display:none }
.hero-icon-switch input:checked + .theme-switch-track .icon-sun { display:none }
.hero-icon-switch input:checked + .theme-switch-track .icon-moon { display:block }
/* اصلاحیه: آیکون منو و آیکون سوییچ (تغییر حالت) کنار هم در یک ردیف، با فاصله کم و ثابت، هم‌تراز عمودی/افقی و در سمت چپ باکس هدر — فقط جایگاه تغییر می‌کند؛ اندازه و استایل آیکون‌ها دست‌نخورده می‌ماند */
    #heroManagerControls.hero-controls-col{ flex-wrap:nowrap; }
.hero-datetime.hero-datetime-external { margin:12px 0; padding:0 14px; background:none; border:0; box-shadow:none; color:var(--muted); font-size:clamp(13px,3vw,15px); font-weight:500; column-gap:10px; justify-content:space-between }
#heroDateTime + * { margin-top:0!important }
.hero-datetime.hero-datetime-external .hero-date-icon { display:none }
.hero-datetime.hero-datetime-external .hero-date-group,.hero-datetime.hero-datetime-external .hero-time-value,.hero-datetime.hero-datetime-external .hero-time-label { color:var(--muted) }
.hero-datetime.hero-datetime-external .hero-datetime-line { display:block; flex:1 1 auto; background:var(--line) }
.hero-time-value { order:3; flex:0 0 auto; display:flex; align-items:center; gap:4px; color:#fff; font-weight:600; white-space:nowrap }
.hero-time-label { font-weight:600; color:#fff }
.hero-date-group { order:1; flex:0 1 auto; min-width:0; display:flex; flex-direction:row; align-items:center; gap:4px; font-weight:600; color:#fff; white-space:nowrap }
.hero-date-icon { width:20px; height:20px; flex:0 0 auto; color:#fff }
.hero-datetime-line { order:2; flex:0 0 auto; width:22px; height:1px; border-radius:999px; background:rgba(255,255,255,.55) }
@media(max-width:380px) {
.hero-datetime.hero-datetime-external{ justify-content:space-between; column-gap:8px }
}
.hero h1 { margin:0 0 4px; font-size:clamp(22px,4vw,32px) }
.hero p { margin:0; opacity:.85 }
.hero-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px }
.hero-top-centered { flex-direction:column; align-items:center; gap:8px; text-align:center }
.hero-heading { display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:right; flex:1 1 auto; min-width:0 }
.hero-heading-centered { align-items:center; text-align:center }
.hero-title-main { margin:0; font-size:clamp(19px,4.4vw,26px); font-weight:730; color:#fff; line-height:1.2; text-align:center }
.hero-title-outside { color:var(--primary); margin:0 0 12px }
.hero-header-bar { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px 12px }
.hero-side-controls { display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto }
.hero-header-left { display:flex; align-items:center; gap:8px; margin-top:4px; min-width:0; width:100% }
.hero-username { font-size:24px; font-weight:700; color:#fff; line-height:1.3; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hero-header-avatar { width:68px; height:68px; border-radius:50%; object-fit:cover; border:1.5px solid rgba(255,255,255,.5); background:rgba(255,255,255,.15); flex:0 0 auto; display:block }
.hero-row { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100% }
.hero-controls-col { display:flex; flex-direction:row; align-items:center; gap:8px; flex:0 0 auto }
.hero-menu-trigger.hero-menu-trigger-pill { width:76px; height:32px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; line-height:1; gap:4px; background:transparent; border:1.5px solid rgba(255,255,255,.55); border-radius:9px; color:#fff; cursor:pointer; transition:background-color .2s,border-color .2s; flex:0 0 auto; box-sizing:border-box }
.hero-menu-trigger.hero-menu-trigger-pill:hover { border-color:rgba(255,255,255,.9) }
.hero-menu-trigger.hero-menu-trigger-pill.open { background:rgba(255,255,255,.18); border-color:#fff }
.hero-menu-label { font-size:12.5px; font-weight:600; color:#fff; line-height:1; display:inline-flex; align-items:center }
.hero-menu-list.hero-menu-list-left { left:0; transform:none; top:calc(100% + 8px); min-width:200px }
.hero-title-sub { margin:0; font-size:clamp(15px,3.4vw,19px); font-weight:600; color:#000; line-height:1.3 }
.hero-logo { width:92px; height:auto; flex:0 0 auto; display:block }
.club-logo.hero-logo-top { width:80px; height:auto; margin:0; display:block; background:none }
.club-logo.hero-logo-outside { margin:0 auto 6px; }
.hero-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px }
.hero-controls-centered { justify-content:space-between }
.hero-identity { display:flex; align-items:center; gap:8px; min-width:0; color:#fff }
.hero-identity-avatar { width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.75); background:rgba(255,255,255,.18); flex:0 0 auto }
.hero-identity-name { font-size:17px; font-weight:600; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hero-menu { position:relative }
.hero-controls-group { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:8px }
.hero-menu-pill { order:2; display:flex; align-items:center; justify-content:center; height:32px; min-width:78px; border-radius:999px; border:1.5px solid rgba(255,255,255,.6); background:transparent; padding:0 8px; transition:border-color .2s }
.hero-menu-pill.open { border-color:#fff }
.hero-menu-trigger { height:100%; display:inline-flex; align-items:center; justify-content:center; line-height:1; gap:4px; padding:0; background:transparent; border:0; color:#fff; font-size:13px; font-weight:600; font-family:inherit; cursor:pointer }
.hero-trigger-icon { width:16px; height:16px; flex:0 0 auto; display:block; align-self:center }
.hero-switch-pill { display:flex; align-items:center; justify-content:center; width:76px; height:32px; border-radius:9px; border:1.5px solid rgba(255,255,255,.55); background:transparent; padding:0 10px; transition:background-color .2s,border-color .2s; box-sizing:border-box }
.hero-switch-pill:hover { border-color:rgba(255,255,255,.9) }
.hero-switch-pill .theme-switch-track { border:none }
.hero-menu-divider { display:none }
.hero-menu-list { position:absolute; top:calc(100% + 10px); left:0; transform:none; min-width:200px; width:max-content; max-width:calc(100vw - 32px); background:linear-gradient(135deg,var(--primary),var(--primary2)); border:1px solid rgba(255,255,255,.18); border-radius:16px; box-shadow:var(--shadow); padding:8px; display:flex; flex-direction:column; gap:4px; z-index:15; box-sizing:border-box }
.hero-menu-item { display:flex; align-items:center; gap:12px; width:100%; padding:12px 12px; border:0; background:transparent; color:#fff; border-radius:10px; font-size:15px; font-weight:500; text-align:right; cursor:pointer }
.hero-menu-item:hover { background:rgba(255,255,255,.14) }
.hero-menu-item .hero-menu-icon { line-height:1; display:inline-flex; flex:0 0 auto }
.hero-menu-item .hero-menu-icon svg { width:19px; height:19px; display:block }
.hero-menu-item.danger { color:#ffd3cf }
.hero-menu-badge { margin-inline-start:auto; flex:0 0 auto; background:#dc2626; color:#fff; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; line-height:1.4 }
.hero-actions-legacy { display:none!important }
@media(max-width:760px) {
.hero {border-radius:16px}
.hero{padding:8px 14px}
.hero-header-left{margin-top:4px}
.hero-header-bar{gap:8px 8px;flex-wrap:nowrap}
.hero-switch-pill,.hero-menu-trigger.hero-menu-trigger-pill{min-width:62px;height:26px;padding:0 8px}
.hero-username{font-size:16px}
.hero-icon-actions{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;justify-content:start;align-items:center;column-gap:8px;row-gap:6px}
.hero-icon-actions #userPanelIconButton{grid-column:2;grid-row:1}
.hero-icon-actions .hero-icon-switch{grid-column:1;grid-row:1}
.hero-icon-actions #userLogoutIconButton{grid-column:2;grid-row:2}
.hero-actions {row-gap:8px;column-gap:8px}
}
@media(max-width:400px) {
.hero-title-main{font-size:18px}
.hero-username{font-size:18px}
.hero-header-avatar{width:54px;height:54px}
}
@media(max-width:360px) {
/* اصلاحیه: قبلاً اینجا flex-wrap باعث می‌شد هدر به‌جای یک ردیف، به دو ردیفِ روی‌هم (آواتار/نام بالا، دکمه‌ها پایین) بشکند.
   حالا هدر همیشه یک ردیف افقی می‌ماند و فقط فاصله‌ها/اندازه‌ها برای عرض کم جمع‌وجورتر می‌شوند. */
.hero-row{flex-wrap:nowrap;gap:6px}
.hero-controls-col{flex-direction:row;justify-content:flex-end;flex:0 0 auto;gap:6px}
.hero-identity-row{gap:6px;min-width:0}
.hero-username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
}
.theme-switch { position:relative; display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%; cursor:pointer }
.theme-switch input { position:absolute; opacity:0; width:1px; height:1px }
.theme-switch-track { width:auto; height:auto; border-radius:0; background:transparent; border:0; position:static; transition:none; display:inline-flex; align-items:center; justify-content:center }
.theme-switch input:checked + .theme-switch-track { background:transparent; border-color:transparent }
.theme-switch-thumb { position:static; width:18px; height:18px; border-radius:0; background:transparent; display:flex; align-items:center; justify-content:center; transition:none }
.theme-switch input:checked + .theme-switch-track .theme-switch-thumb { inset-inline-start:auto }
.theme-switch-thumb .icon-sun { width:18px; height:18px; display:block; color:#FFD60A }
.theme-switch-thumb .icon-moon { width:18px; height:18px; display:none; color:#fff }
.theme-switch input:checked + .theme-switch-track .icon-sun { display:none }
.theme-switch input:checked + .theme-switch-track .icon-moon { display:block }
.hero-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px }
.logout-button { color:#fff; background:transparent; border:1px solid rgba(255,255,255,.55); border-radius:10px; padding:4px 8px; font-size:13px; font-weight:600; white-space:nowrap }
html[data-theme="dark"] .profile-name-button { color:var(--gold) }
.profile-name-button { color:var(--primary); background:var(--card); border:0; border-radius:10px; padding:8px 12px; font-size:14px; font-weight:600; white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis }
/* اصلاحیه: تغییرات هدر فقط برای مدیر اصلی سایت (سوپرادمین) — بدون تأثیر روی مدیران فرعی و کاربران عادی */
    body.super-admin-header #heroIdentityAvatar { display:none !important; }
body.super-admin-header #heroIdentityName { color:#FFD60A; font-size:20px !important; font-weight:700; line-height:1; }
body.super-admin-header .hero-row { flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between !important; }
body.super-admin-header .hero-identity-row { flex:0 1 auto !important; min-width:0 !important; align-items:center !important; margin:0 !important; }
body.super-admin-header #heroManagerControls.hero-controls-col { display:flex !important; flex-direction:row !important; width:auto !important; max-width:max-content !important; flex:0 0 auto !important; align-items:center !important; justify-content:flex-start !important; gap:6px !important; margin:0 !important; padding:0 !important; }
body.super-admin-header .hero-switch-pill { flex:0 0 auto !important; margin:0 !important; border:0 !important; min-width:0 !important; width:28px !important; height:28px !important; padding:0 !important; border-radius:12px; display:flex !important; align-items:center !important; justify-content:center !important; }
body.super-admin-header #heroMenu.hero-menu { display:flex !important; align-items:center !important; flex:0 0 auto !important; margin:0 !important; width:auto !important; }
body.super-admin-header #heroMenuButton.hero-menu-trigger-pill { flex:0 0 auto !important; margin:0 !important; border:0 !important; min-width:0 !important; width:28px !important; height:28px !important; padding:0 !important; border-radius:12px; gap:0; }
body.super-admin-header #heroMenuButton.hero-menu-trigger-pill.open { background:rgba(255,255,255,.18); }
body.super-admin-header .hero-menu-label { display:none !important; }
body.super-admin-header #heroMenuButton .hero-trigger-icon { width:28px; height:28px; }
body.super-admin-header .hero-switch-pill .theme-switch-thumb { width:28px; height:28px; }
body.super-admin-header .hero-switch-pill .theme-switch-thumb .icon-sun,
    body.super-admin-header .hero-switch-pill .theme-switch-thumb .icon-moon { width:28px; height:28px; }