/* =============================================================================
   AVATAR.CSS - Jednotný systém avatarů a premium badge
   Použití: Všude kde se zobrazují avatary uživatelů
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CSS Proměnné
   ----------------------------------------------------------------------------- */
:root {
    --avatar-border-color: #2a2a2a;
    --premium-1-color: #f39c12;
    --premium-1-gradient: linear-gradient(135deg, #f39c12, #e67e22);
    --premium-2-color: #27ae60;
    --premium-2-gradient: linear-gradient(135deg, #27ae60, #2ecc71);
    --premium-3-color: #9b59b6;
    --premium-3-gradient: linear-gradient(135deg, #9b59b6, #e74c3c);
    --online-color: #10b981;
}

/* -----------------------------------------------------------------------------
   Avatar Wrapper - Kontejner pro avatar s badge a online indikátorem
   ----------------------------------------------------------------------------- */
.avatar-wrapper {
    position: relative;
    display: inline-block;
}

/* Velikosti avatar wrapperu */
.avatar-wrapper.avatar-xs {
    width: 32px;
    height: 32px;
}

.avatar-wrapper.avatar-sm {
    width: 40px;
    height: 40px;
}

.avatar-wrapper.avatar-md {
    width: 48px;
    height: 48px;
}

.avatar-wrapper.avatar-lg {
    width: 64px;
    height: 64px;
}

.avatar-wrapper.avatar-xl {
    width: 80px;
    height: 80px;
}

.avatar-wrapper.avatar-xxl {
    width: 120px;
    height: 120px;
}

/* -----------------------------------------------------------------------------
   Avatar obrázek / placeholder
   ----------------------------------------------------------------------------- */
.avatar-wrapper img,
.avatar-wrapper .avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-wrapper .avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--primary-color, #d4745f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
}

/* Velikost písma v placeholder podle velikosti avataru */
.avatar-wrapper.avatar-xs .avatar-placeholder { font-size: 0.8rem; }
.avatar-wrapper.avatar-sm .avatar-placeholder { font-size: 1rem; }
.avatar-wrapper.avatar-md .avatar-placeholder { font-size: 1.2rem; }
.avatar-wrapper.avatar-lg .avatar-placeholder { font-size: 1.5rem; }
.avatar-wrapper.avatar-xl .avatar-placeholder { font-size: 2rem; }
.avatar-wrapper.avatar-xxl .avatar-placeholder { font-size: 3rem; }

/* -----------------------------------------------------------------------------
   Premium Ring - Barevný kroužek kolem avataru
   ----------------------------------------------------------------------------- */
.avatar-wrapper.premium-1 img,
.avatar-wrapper.premium-1 .avatar-placeholder {
    box-shadow: 0 0 0 3px var(--premium-1-color);
}

.avatar-wrapper.premium-2 img,
.avatar-wrapper.premium-2 .avatar-placeholder {
    box-shadow: 0 0 0 3px var(--premium-2-color);
}

.avatar-wrapper.premium-3 img,
.avatar-wrapper.premium-3 .avatar-placeholder {
    box-shadow: 0 0 0 3px var(--premium-3-color);
}

/* Menší ring pro menší avatary */
.avatar-wrapper.avatar-xs.premium-1 img,
.avatar-wrapper.avatar-xs.premium-1 .avatar-placeholder,
.avatar-wrapper.avatar-sm.premium-1 img,
.avatar-wrapper.avatar-sm.premium-1 .avatar-placeholder {
    box-shadow: 0 0 0 2px var(--premium-1-color);
}

.avatar-wrapper.avatar-xs.premium-2 img,
.avatar-wrapper.avatar-xs.premium-2 .avatar-placeholder,
.avatar-wrapper.avatar-sm.premium-2 img,
.avatar-wrapper.avatar-sm.premium-2 .avatar-placeholder {
    box-shadow: 0 0 0 2px var(--premium-2-color);
}

.avatar-wrapper.avatar-xs.premium-3 img,
.avatar-wrapper.avatar-xs.premium-3 .avatar-placeholder,
.avatar-wrapper.avatar-sm.premium-3 img,
.avatar-wrapper.avatar-sm.premium-3 .avatar-placeholder {
    box-shadow: 0 0 0 2px var(--premium-3-color);
}

/* -----------------------------------------------------------------------------
   Rights Badge - Ikona v rohu avataru podle uživatelských práv
   Pozice: vpravo nahoře (top-right)
   ----------------------------------------------------------------------------- */
:root {
    /* Barvy práv - z roles.tt */
    --rights-guest-color: #6b7280;
    --rights-demo-color: #9b59b6;
    --rights-user-color: #3498db;
    --rights-moderator-color: #16a085;
    --rights-admin-color: #e67e22;
    --rights-superadmin-color: #e74c3c;
}

.rights-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--avatar-border-color);
    z-index: 10;
}

.rights-badge svg {
    width: 8px;
    height: 8px;
    fill: white;
}

/* Barvy badge podle práv */
.rights-badge.rights-guest {
    background: var(--rights-guest-color);
    display: none;  /* Guest badge se nezobrazuje */
}

.rights-badge.rights-demo {
    background: var(--rights-demo-color);
}

.rights-badge.rights-user {
    background: var(--rights-user-color);
    display: none;  /* User badge se nezobrazuje - je default */
}

.rights-badge.rights-moderator {
    background: var(--rights-moderator-color);
}

.rights-badge.rights-admin {
    background: var(--rights-admin-color);
}

.rights-badge.rights-superadmin {
    background: var(--rights-superadmin-color);
}

/* Velikosti rights badge podle velikosti avataru */

/* XS avatar (32px) */
.avatar-wrapper.avatar-xs .rights-badge {
    width: 12px;
    height: 12px;
    top: -2px;
    right: -2px;
}

.avatar-wrapper.avatar-xs .rights-badge svg {
    width: 6px;
    height: 6px;
}

/* SM avatar (40px) */
.avatar-wrapper.avatar-sm .rights-badge {
    width: 14px;
    height: 14px;
    top: -2px;
    right: -4px;
}

.avatar-wrapper.avatar-sm .rights-badge svg {
    width: 8px;
    height: 8px;
}

/* MD avatar (48px) */
.avatar-wrapper.avatar-md .rights-badge {
    width: 16px;
    height: 16px;
    top: -2px;
    right: -4px;
}

.avatar-wrapper.avatar-md .rights-badge svg {
    width: 9px;
    height: 9px;
}

/* LG avatar (64px) */
.avatar-wrapper.avatar-lg .rights-badge {
    width: 20px;
    height: 20px;
    top: -2px;
    right: -4px;
}

.avatar-wrapper.avatar-lg .rights-badge svg {
    width: 11px;
    height: 11px;
}

/* XL avatar (80px) */
.avatar-wrapper.avatar-xl .rights-badge {
    width: 22px;
    height: 22px;
    top: -2px;
    right: -4px;
}

.avatar-wrapper.avatar-xl .rights-badge svg {
    width: 12px;
    height: 12px;
}

/* XXL avatar (120px) */
.avatar-wrapper.avatar-xxl .rights-badge {
    width: 28px;
    height: 28px;
    top: 0;
    right: 0;
}

.avatar-wrapper.avatar-xxl .rights-badge svg {
    width: 14px;
    height: 14px;
}

/* -----------------------------------------------------------------------------
   Premium Badge - Ikona v rohu avataru (LEGACY - pro zpětnou kompatibilitu)
   ----------------------------------------------------------------------------- */
.premium-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--avatar-border-color);
    z-index: 10;
}

.premium-badge svg {
    width: 8px;
    height: 8px;
    fill: white;
}

/* Barvy badge podle úrovně */
.premium-badge.level-1 {
    background: var(--premium-1-gradient);
}

.premium-badge.level-2 {
    background: var(--premium-2-gradient);
}

.premium-badge.level-3 {
    background: var(--premium-3-gradient);
}

/* Velikosti badge podle velikosti avataru */

/* XS avatar (32px) */
.avatar-wrapper.avatar-xs .premium-badge {
    width: 12px;
    height: 12px;
    top: -2px;
    right: -2px;
    border-width: 1px;
}

.avatar-wrapper.avatar-xs .premium-badge svg {
    width: 6px;
    height: 6px;
}

/* SM avatar (40px) - default */
.avatar-wrapper.avatar-sm .premium-badge {
    width: 14px;
    height: 14px;
    top: -2px;
    right: -4px;
    border-width: 2px;
}

.avatar-wrapper.avatar-sm .premium-badge svg {
    width: 8px;
    height: 8px;
}

/* MD avatar (48px) */
.avatar-wrapper.avatar-md .premium-badge {
    width: 16px;
    height: 16px;
    top: -2px;
    right: -4px;
    border-width: 2px;
}

.avatar-wrapper.avatar-md .premium-badge svg {
    width: 9px;
    height: 9px;
}

/* LG avatar (64px) */
.avatar-wrapper.avatar-lg .premium-badge {
    width: 20px;
    height: 20px;
    top: -2px;
    right: -4px;
    border-width: 2px;
}

.avatar-wrapper.avatar-lg .premium-badge svg {
    width: 11px;
    height: 11px;
}

/* XL avatar (80px) */
.avatar-wrapper.avatar-xl .premium-badge {
    width: 22px;
    height: 22px;
    top: -2px;
    right: -4px;
    border-width: 2px;
}

.avatar-wrapper.avatar-xl .premium-badge svg {
    width: 12px;
    height: 12px;
}

/* XXL avatar (120px) */
.avatar-wrapper.avatar-xxl .premium-badge {
    width: 28px;
    height: 28px;
    top: 0;
    right: 0;
    border-width: 3px;
}

.avatar-wrapper.avatar-xxl .premium-badge svg {
    width: 14px;
    height: 14px;
}

/* -----------------------------------------------------------------------------
   Premium Badge Inline - Vedle jména uživatele
   ----------------------------------------------------------------------------- */
.premium-badge-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}

.premium-badge-inline svg {
    width: 10px;
    height: 10px;
    color: white;
}

.premium-badge-inline.level-1 {
    background: var(--premium-1-gradient);
}

.premium-badge-inline.level-2 {
    background: var(--premium-2-gradient);
}

.premium-badge-inline.level-3 {
    background: var(--premium-3-gradient);
}

/* -----------------------------------------------------------------------------
   Online Indikátor - Zelená tečka pro online stav
   Pozice: vpravo dole (bottom-right)
   ----------------------------------------------------------------------------- */
.online-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: var(--online-color);
    border: 2px solid var(--avatar-border-color);
    border-radius: 50%;
    display: none;
    z-index: 5;
}

.online-indicator.online {
    display: block;
}

/* Velikosti online indikátoru podle velikosti avataru */
.avatar-wrapper.avatar-xs .online-indicator {
    width: 8px;
    height: 8px;
    border-width: 1px;
}

.avatar-wrapper.avatar-sm .online-indicator {
    width: 10px;
    height: 10px;
    border-width: 2px;
}

.avatar-wrapper.avatar-md .online-indicator {
    width: 12px;
    height: 12px;
    border-width: 2px;
}

.avatar-wrapper.avatar-lg .online-indicator {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.avatar-wrapper.avatar-xl .online-indicator,
.avatar-wrapper.avatar-xxl .online-indicator {
    width: 16px;
    height: 16px;
    border-width: 3px;
}

/* -----------------------------------------------------------------------------
   Speciální kontexty - Přepisy pro specifické stránky
   ----------------------------------------------------------------------------- */

/* Konverzace v messages */
.conv-avatar-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.conv-avatar-wrapper img,
.conv-avatar-wrapper .avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.conv-avatar-wrapper .avatar-placeholder {
    background: var(--primary-color, #d4745f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
}

/* Základní styly pro avatar placeholder v messages */
.user-avatar-placeholder,
.conv-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--primary-color, #d4745f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
}

/* Premium ring kolem avataru v messages */
.conv-avatar.premium-1,
.conv-avatar-placeholder.premium-1,
.user-avatar.premium-1,
.user-avatar-placeholder.premium-1 {
    box-shadow: 0 0 0 2px var(--premium-1-color);
}

.conv-avatar.premium-2,
.conv-avatar-placeholder.premium-2,
.user-avatar.premium-2,
.user-avatar-placeholder.premium-2 {
    box-shadow: 0 0 0 2px var(--premium-2-color);
}

.conv-avatar.premium-3,
.conv-avatar-placeholder.premium-3,
.user-avatar.premium-3,
.user-avatar-placeholder.premium-3 {
    box-shadow: 0 0 0 2px var(--premium-3-color);
}

.conv-avatar-wrapper .online-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: var(--online-color);
    border: 2px solid var(--avatar-border-color);
    border-radius: 50%;
    display: none;
}

.conv-avatar-wrapper .online-indicator.online {
    display: block;
}

/* Online user item v sidebaru chatu/dashboardu */
.online-user-item {
    position: relative;
}

/* Premium badge - dědí základní styly z .premium-badge */

/* Forum topic avatar */
.topic-avatar-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.topic-avatar-wrapper img,
.topic-avatar-wrapper .avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Premium badge - dědí základní styly z .premium-badge */