/* ═══════════════════════════════════════════════════════
   RPG Characters — Frontend styles
   Záměrně NEOBSAHUJE barvy/ohraničení inputů — ty dědí
   z aktivní šablony CMS (default, blank nebo vlastní).
   ═══════════════════════════════════════════════════════ */

/* ── Formulář postavy — pouze layout ────────────────── */
.rpg-char-form { max-width: 680px; }

.rpg-form-field { margin-bottom: 1.2em; }

.rpg-form-label {
    display: block;
    font-weight: bold;
    margin-bottom: .3em;
}

.rpg-form-hint {
    display: block;
    font-size: .88em;
    opacity: .75;
    margin: .15em 0 .35em;
    line-height: 1.4;
}

/* box-sizing aby .inputmedium nepřetekla v úzkých kontejnerech */
.rpg-char-form input.inputmedium,
.rpg-char-form textarea.areamedium {
    box-sizing: border-box;
    max-width: 100%;
}

.rpg-form-field--checkbox {
    display: flex;
    align-items: flex-start;
    gap: .4em;
}
.rpg-form-field--checkbox label { cursor: pointer; }

.rpg-form-submit {
    margin-top: 1.5em;
    padding-top: 1em;
    border-top: 1px solid rgba(128,128,128,.2);
}

.rpg-color-wrap {
    display: flex;
    align-items: center;
    gap: .5em;
    flex-wrap: wrap;
}

/* ── Skupiny (tagy) ──────────────────────────────────── */
.rpg-tag-group { margin-bottom: .6em; }

.rpg-tag-group-label {
    display: block;
    font-size: .82em;
    opacity: .65;
    margin-bottom: .25em;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rpg-tag-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    margin-right: .6em;
    margin-bottom: .3em;
    cursor: pointer;
    padding: .2em .5em;
    border: 1px solid rgba(128,128,128,.3);
    border-radius: 3px;
    font-size: .9em;
}
.rpg-tag-checkbox-label:hover { opacity: .85; }
.rpg-tag-checkbox-label input[type="checkbox"] { margin: 0; }

/* ── Zprávy (fallback — šablona má .message .message-ok atd.) ── */
.rpg-msg-ok {
    margin: .8em 0; padding: .7em 1em;
    border: 1px solid rgba(80,160,80,.5);
    background: rgba(80,160,80,.1); border-radius: 3px;
}
.rpg-msg-warn {
    margin: .8em 0; padding: .7em 1em;
    border: 1px solid rgba(200,150,0,.5);
    background: rgba(200,150,0,.08); border-radius: 3px;
}

/* ── Avatar upload widget ────────────────────────────── */
.rpg-avatar-widget { display:flex; flex-direction:column; gap:.7em; max-width:480px; }
.rpg-av-hidden-file { display:none; }
.rpg-avatar-pick-btn { cursor:pointer; display:inline-block; align-self:flex-start; }
.rpg-avatar-current { line-height:0; }

.rpg-avatar-preview-img {
    width:120px; height:120px; object-fit:cover;
    border-radius:6px; border:2px solid rgba(128,128,128,.3); display:block;
}
.rpg-avatar-placeholder-box {
    width:120px; height:120px; border-radius:6px;
    background:rgba(128,128,128,.12); border:2px dashed rgba(128,128,128,.3);
    display:flex; align-items:center; justify-content:center;
    font-size:.8em; opacity:.6;
}

.rpg-crop-area { border:1px solid rgba(128,128,128,.3); border-radius:5px; padding:.8em; }
.rpg-crop-info { font-size:.85em; opacity:.7; margin-bottom:.6em; }
.rpg-crop-container { max-width:100%; max-height:400px; overflow:hidden; border-radius:3px; }
.rpg-crop-img { display:block; max-width:100%; }
.rpg-crop-actions { display:flex; gap:.6em; margin-top:.7em; flex-wrap:wrap; }

.rpg-av-status { padding:.5em .8em; border-radius:3px; font-size:.9em; border:1px solid transparent; }
.rpg-av-status--ok   { border-color:rgba(80,160,80,.5);  background:rgba(80,160,80,.1); }
.rpg-av-status--error{ border-color:rgba(200,60,60,.5);  background:rgba(200,60,60,.1); }
.rpg-av-status--info { border-color:rgba(60,120,200,.4); background:rgba(60,120,200,.08); }

/* ── Badge u komentářů ───────────────────────────────── */
.rpg-badge { display:inline-flex; align-items:center; gap:.4em; vertical-align:middle; }
.rpg-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.rpg-avatar-placeholder { width:36px; height:36px; border-radius:50%; background:rgba(128,128,128,.2); display:inline-block; flex-shrink:0; }
.rpg-char-name { font-weight:bold; }
.rpg-group-label { font-size:.8em; opacity:.7; margin-left:.2em; }
.rpg-emblem { font-size:1em; }

/* ═══════════════════════════════════════════════════════
   RPG User Panel widget
   ═══════════════════════════════════════════════════════ */

.rpg-userpanel {
    display: flex;
    flex-direction: column;
    gap: .4em;
}

/* ── Hlavička ────────────────────────────────────────── */
.rpg-up-header {
    display: flex;
    align-items: flex-start;
    gap: .7em;
}

/* Avatar postavy */
.rpg-up-avatar {
    flex-shrink: 0;
    line-height: 0;
}

.rpg-up-avatar-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.rpg-up-avatar-placeholder {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
}

/* Identita */
.rpg-up-identity {
    display: flex;
    flex-direction: column;
    gap: .15em;
    min-width: 0;
    padding-top: .2em;
}

.rpg-up-name {
    font-size: 1.05em;
    line-height: 1.2;
}

.rpg-up-charname { font-weight: bold; }
.rpg-up-prefix, .rpg-up-suffix { opacity: .8; font-size: .9em; }

.rpg-up-username {
    font-size: .8em;
    opacity: .55;
}

.rpg-up-role {
    font-size: .8em;
    opacity: .7;
}

/* Odznaky skupin */
.rpg-up-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3em;
    margin-top: .2em;
}

.rpg-up-tag {
    display: inline-block;
    font-size: .72em;
    padding: .1em .45em;
    border-radius: 3px;
    border: 1px solid currentColor;
    opacity: .85;
    white-space: nowrap;
}

/* Nepřečtené zprávy */
.rpg-up-unread {
    display: inline-block;
    font-size: .8em;
    margin-top: .2em;
    opacity: .8;
}

/* ── Přepínač postav ─────────────────────────────────── */
.rpg-up-switch {
    display: flex;
    gap: .3em;
    flex-wrap: wrap;
    padding: .3em 0;
    border-top: 1px solid rgba(255,255,255,.1);
}

.rpg-up-switch-item {
    display: block;
    opacity: .5;
    transition: opacity .15s;
    line-height: 0;
}

.rpg-up-switch-item:hover { opacity: .8; }
.rpg-up-switch-item--active { opacity: 1; }

.rpg-up-switch-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.rpg-up-switch-avatar--empty {
    background: rgba(255,255,255,.15);
    display: block;
}

/* ── Menu toggle ─────────────────────────────────────── */
.rpg-up-menu-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: .4em .6em;
    border-radius: 4px;
    background: rgba(255,255,255,.07);
    user-select: none;
    transition: background .15s;
}

.rpg-up-menu-toggle:hover { background: rgba(255,255,255,.12); }

.rpg-up-toggle-arrow {
    transition: transform .2s;
    display: inline-block;
}

.rpg-up-toggle--open .rpg-up-toggle-arrow { transform: rotate(180deg); }

/* ── Navigační menu ──────────────────────────────────── */
.rpg-up-menu {
    display: flex;
    flex-direction: column;
    gap: .1em;
}

.rpg-up-menu-item {
    display: block;
    padding: .3em .6em;
    border-radius: 3px;
    text-decoration: none;
    transition: background .12s;
    font-size: .9em;
}

.rpg-up-menu-item:hover {
    background: rgba(255,255,255,.1);
}

/* ── Host ────────────────────────────────────────────── */
.rpg-up-guest {
    display: flex;
    gap: .5em;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════
   RPG Komentáře — autor s postavou
   ═══════════════════════════════════════════════════════ */

.rpg-post-charname {
    font-weight: bold;
}

.rpg-post-prefix,
.rpg-post-suffix {
    opacity: .8;
    font-size: .9em;
}

/* Odznaky skupin za jménem */
.rpg-post-badge {
    display: inline-block;
    font-size: .72em;
    padding: .1em .45em;
    border-radius: 3px;
    border: 1px solid currentColor;
    vertical-align: middle;
    opacity: .9;
    white-space: nowrap;
}

/* Jméno hráče v závorce */
.rpg-post-player {
    font-size: .85em;
    opacity: .6;
    font-weight: normal;
}

/* Avatar wrapper — pro overlay vrstvy */
.rpg-post-avatar-wrap {
    line-height: 0;
}

.rpg-post-avatar {
    display: block;
}

/* ═══════════════════════════════════════════════════════
   Profil postavy (character_profile route)
   ═══════════════════════════════════════════════════════ */

.rpg-char-profile {
    max-width: 800px;
}

.rpg-cp-header {
    display: flex;
    align-items: flex-start;
    gap: 1.5em;
    margin-bottom: 1.5em;
}

.rpg-cp-avatar-wrap {
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
}

.rpg-cp-avatar {
    width: 140px;
    height: 140px;
    object-fit: cover;
    display: block;
}

.rpg-cp-identity {
    flex: 1;
    min-width: 0;
}

.rpg-cp-name {
    margin: 0 0 .4em;
    font-size: 1.6em;
}

.rpg-cp-groups {
    margin-bottom: .5em;
}

.rpg-cp-badge {
    display: inline-block;
    font-size: .78em;
    padding: .15em .5em;
    border-radius: 4px;
    border: 1px solid currentColor;
    margin-right: .25em;
}

.rpg-cp-meta {
    font-size: .88em;
    opacity: .7;
    margin-bottom: .5em;
}

.rpg-cp-pending-note {
    font-size: .9em;
    opacity: .7;
    font-style: italic;
}

/* Pole formuláře profilu */
.rpg-cp-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75em 2em;
}

.rpg-cp-field {
    display: flex;
    flex-direction: column;
    gap: .15em;
}

.rpg-cp-field--wide {
    grid-column: 1 / -1;
}

.rpg-cp-label {
    font-size: .78em;
    opacity: .55;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rpg-cp-value {
    font-size: .95em;
}

.rpg-cp-text {
    font-size: .95em;
    line-height: 1.6;
    white-space: pre-wrap;
}

@media (max-width: 600px) {
    .rpg-cp-header { flex-direction: column; }
    .rpg-cp-avatar { width: 100px; height: 100px; }
    .rpg-cp-fields { grid-template-columns: 1fr; }
}

/* rpg-cp-grid — 2 sloupce pro krátká pole */
.rpg-cp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6em 2em;
    margin-bottom: .75em;
}

@media (max-width: 500px) {
    .rpg-cp-grid { grid-template-columns: 1fr; }
}

/* Klikatelné linky na profil z komentářů */
.rpg-post-char-link {
    text-decoration: none;
    color: inherit;
}
.rpg-post-char-link:hover .rpg-post-charname {
    text-decoration: underline;
}
.rpg-post-char-link:hover .rpg-post-avatar {
    opacity: .85;
}