/*
Dungeonboard Whiteboard Styles
Version: 1.0.16
*/

.bpw-lite-app {
    --wb-bg: #120b07;
    --wb-panel: #1b1009;
    --wb-panel-2: #24160c;
    --wb-border: #7a4f22;
    --wb-border-soft: rgba(190, 132, 55, 0.35);
    --wb-gold: #d8b16a;
    --wb-gold-light: #f0d09a;
    --wb-text: #f5e2bd;
    --wb-text-soft: #c9a978;
    --wb-dark: #090604;

    background: transparent !important;
    color: var(--wb-text) !important;
    font-family: "Alegreya", Georgia, "Times New Roman", serif !important;
}

.bpw-lite-app button,
.bpw-lite-toolbar button,
.bpw-lite-sidebar h1,
.bpw-lite-sidebar h2,
.bpw-lite-sidebar h3,
.bpw-lite-sidebar h4,
.bpw-lite-sidebar strong {
    font-family: "Cinzel", Georgia, "Times New Roman", serif !important;
}

.bpw-lite-app input,
.bpw-lite-app select,
.bpw-lite-app textarea,
.bpw-lite-sidebar label,
.bpw-lite-sidebar span,
.bpw-lite-sidebar p,
.bpw-lite-sidebar small {
    font-family: "Alegreya", Georgia, "Times New Roman", serif !important;
}

/* äußerer weißer Rahmen weg */
.bpw-lite-app,
.bpw-lite-layout,
.bpw-lite-toolbar,
.bpw-lite-stage,
.bpw-lite-sidebar {
    border-color: var(--wb-border-soft) !important;
    box-shadow: none !important;
}

/* Hauptbox */
.bpw-lite-layout {
    background:
        radial-gradient(circle at top, rgba(216, 177, 106, 0.08), transparent 35%),
        linear-gradient(180deg, #24160c 0%, #100905 100%) !important;
    border: 1px solid var(--wb-border-soft) !important;
    border-radius: 18px !important;
    padding: 18px !important;
    gap: 16px !important;
}

/* Toolbar */
.bpw-lite-toolbar {
    background:
        linear-gradient(180deg, rgba(45, 27, 14, 0.96), rgba(20, 12, 7, 0.98)) !important;
    border: 1px solid var(--wb-border-soft) !important;
    border-radius: 16px !important;
    padding: 14px !important;
}

/* Toolbar Buttons */
.bpw-lite-app button {
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    background:
        linear-gradient(180deg, #c39a59 0%, #8a5b28 45%, #4b2b12 100%) !important;
    color: #1b0f07 !important;
    border: 1px solid #d9b16b !important;
    border-radius: 8px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 238, 190, 0.55),
        inset 0 -2px 0 rgba(40, 20, 5, 0.45),
        0 3px 8px rgba(0, 0, 0, 0.35) !important;
    text-shadow: 0 1px 0 rgba(255, 235, 180, 0.35);
}

.bpw-lite-app button:hover {
    background:
        linear-gradient(180deg, #e0b86f 0%, #a06b31 45%, #5a3215 100%) !important;
    color: #120904 !important;
}

.bpw-lite-app button.active,
.bpw-lite-app button[aria-pressed="true"] {
    background:
        linear-gradient(180deg, #3a210f 0%, #170c05 100%) !important;
    color: var(--wb-gold-light) !important;
    border-color: #f0c878 !important;
    box-shadow:
        inset 0 0 0 1px rgba(240, 200, 120, 0.35),
        0 0 12px rgba(216, 177, 106, 0.35) !important;
}

/* Text in Toolbar */
.bpw-lite-toolbar,
.bpw-lite-toolbar span,
.bpw-lite-toolbar label,
.bpw-lite-toolbar small {
    color: var(--wb-gold-light) !important;
}

/* Stage / Mapbereich */
.bpw-lite-stage {
    background: #090604 !important;
    border: 1px solid var(--wb-border-soft) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow:
        inset 0 0 50px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(216, 177, 106, 0.08) !important;
}

/* Map etwas dunkler/fantasy */
.bpw-lite-stage img,
.bpw-lite-stage canvas {
    filter: brightness(0.72) contrast(1.18) sepia(0.22) saturate(0.9);
}

/* Sidebar */
.bpw-lite-sidebar {
    background:
        linear-gradient(180deg, rgba(39, 24, 13, 0.98), rgba(15, 9, 5, 0.98)) !important;
    border: 1px solid var(--wb-border-soft) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    color: var(--wb-text) !important;
}

/* Sidebar Titel */
.bpw-lite-sidebar h1,
.bpw-lite-sidebar h2,
.bpw-lite-sidebar h3,
.bpw-lite-sidebar h4,
.bpw-lite-sidebar strong {
    color: var(--wb-gold-light) !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

/* Labels */
.bpw-lite-sidebar label,
.bpw-lite-sidebar span,
.bpw-lite-sidebar p,
.bpw-lite-sidebar small {
    color: var(--wb-text-soft) !important;
}

/* Inputs */
.bpw-lite-app input,
.bpw-lite-app select,
.bpw-lite-app textarea {
    background: #100905 !important;
    color: var(--wb-text) !important;
    border: 1px solid var(--wb-border-soft) !important;
    border-radius: 8px !important;
    box-shadow:
        inset 0 1px 4px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(0, 0, 0, 0.25) !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.bpw-lite-app input:focus,
.bpw-lite-app select:focus,
.bpw-lite-app textarea:focus {
    outline: none !important;
    border-color: #d8b16a !important;
    box-shadow:
        0 0 0 3px rgba(216, 177, 106, 0.18),
        inset 0 1px 4px rgba(0, 0, 0, 0.65) !important;
}

/* Slider */
.bpw-lite-app input[type="range"] {
    accent-color: #d8b16a !important;
}

/* Color Picker */
.bpw-lite-app input[type="color"] {
    background: #100905 !important;
    border: 1px solid var(--wb-border-soft) !important;
    padding: 2px !important;
}

/* kleine Status-/Info-Texte */
.bpw-lite-app .saved,
.bpw-lite-app .status,
.bpw-lite-app [class*="status"],
.bpw-lite-app [class*="saved"] {
    color: var(--wb-gold-light) !important;
}

/* Token Sidebar Panel */
.bpw-lite-sidebar[data-panel="token-sheet"] {
    min-width: 330px;
}

/* Scrollbars */
.bpw-lite-app *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.bpw-lite-app *::-webkit-scrollbar-track {
    background: #0b0603;
}

.bpw-lite-app *::-webkit-scrollbar-thumb {
    background: #7a4f22;
    border-radius: 999px;
}

.bpw-lite-app *::-webkit-scrollbar-thumb:hover {
    background: #a56f32;
}

/* Mobile */
@media (max-width: 1000px) {
    .bpw-lite-layout {
        flex-direction: column !important;
    }

    .bpw-lite-sidebar {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================
   V1.0.17 – UI POLISH
   ========================================= */

/* ===== Toolbar Gruppierung ===== */
.bpw-lite-toolbar {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
}

/* Button Gruppe optisch zusammenziehen */
.bpw-lite-toolbar > div,
.bpw-lite-toolbar > section {
    display: flex;
    gap: 6px;
    padding: 6px;
    border-radius: 10px;
    background: rgba(255, 220, 150, 0.03);
    border: 1px solid rgba(216, 177, 106, 0.08);
}

/* ===== Buttons Feinschliff ===== */
.bpw-lite-app button {
    transition:
        background 0.2s ease,
        transform 0.08s ease,
        box-shadow 0.2s ease !important;
}

/* Hover fühlt sich „klickbar“ an */
.bpw-lite-app button:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 238, 190, 0.6),
        inset 0 -2px 0 rgba(40, 20, 5, 0.5),
        0 6px 16px rgba(0, 0, 0, 0.45) !important;
}

/* Klick */
.bpw-lite-app button:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

/* ===== Aktives Tool (WICHTIG) ===== */
.bpw-lite-app button.active,
.bpw-lite-app button[aria-pressed="true"] {
    position: relative;
}

.bpw-lite-app button.active::after,
.bpw-lite-app button[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 10px;
    border: 1px solid rgba(216, 177, 106, 0.6);
    box-shadow: 0 0 12px rgba(216, 177, 106, 0.5);
}

/* ===== Canvas besser einbetten ===== */
.bpw-lite-stage {
    position: relative;
}

/* leichter inner glow */
.bpw-lite-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 16px;
    box-shadow:
        inset 0 0 80px rgba(0,0,0,0.9),
        inset 0 0 20px rgba(216, 177, 106, 0.05);
}

/* ===== Sidebar optisch hochwertiger ===== */
.bpw-lite-sidebar {
    backdrop-filter: blur(4px);
}

/* Sektionen klar trennen */
.bpw-lite-sidebar > div {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(216, 177, 106, 0.08);
}

.bpw-lite-sidebar > div:last-child {
    border-bottom: none;
}

/* ===== Token Auswahl Highlight ===== */
.bpw-lite-stage .selected,
.bpw-lite-stage [data-selected="true"],
.bpw-lite-stage .is-selected {
    outline: 2px solid rgba(216, 177, 106, 0.8);
    box-shadow:
        0 0 12px rgba(216, 177, 106, 0.6),
        0 0 30px rgba(216, 177, 106, 0.25);
}

/* ===== Hover auf Token ===== */
.bpw-lite-stage img:hover,
.bpw-lite-stage canvas:hover {
    filter: brightness(0.85) contrast(1.2) sepia(0.2);
}

/* ===== Kleine UI Details ===== */

/* Zahlenfelder angenehmer */
.bpw-lite-app input[type="number"] {
    text-align: center;
}

/* Labels klarer */
.bpw-lite-sidebar label {
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Status oben rechts */
.bpw-lite-toolbar span {
    opacity: 0.8;
    font-size: 12px;
}

/* ===== Entfernt letzte helle Ränder ===== */
.bpw-lite-app * {
    outline-color: rgba(216, 177, 106, 0.3) !important;
}

/*
Dungeonboard Whiteboard Styles
Version: 1.0.18 – Heldenbogen Sidebar Layout
*/

/* =========================================
   HELDENBOGEN / TOKEN SIDEBAR LAYOUT
   ========================================= */

/* Sidebar als geordnetes Charakterblatt */
.bpw-lite-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

/* Allgemeine Gruppen in der Sidebar */
.bpw-lite-sidebar > div,
.bpw-lite-sidebar section,
.bpw-lite-sidebar fieldset {
    background: rgba(255, 220, 150, 0.035) !important;
    border: 1px solid rgba(216, 177, 106, 0.10) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    margin: 0 !important;
}

/* Labels etwas kompakter */
.bpw-lite-sidebar label {
    display: block !important;
    margin-bottom: 4px !important;
    color: #c9a978 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Inputs kompakter */
.bpw-lite-sidebar input,
.bpw-lite-sidebar select,
.bpw-lite-sidebar textarea {
    min-height: 34px !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
}

/* =========================================
   LOGISCHE FELD-GRIDS
   ========================================= */

/* Falls dein Plugin keine eigenen Wrapper hat:
   wir ordnen direkte Zeilen automatisch als Grid */
.bpw-lite-sidebar .bpw-token-fields,
.bpw-lite-sidebar .bpw-character-fields,
.bpw-lite-sidebar .bpw-hero-fields,
.bpw-lite-sidebar .bpw-sheet-fields {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

/* generische Feldzeilen */
.bpw-lite-sidebar .bpw-field,
.bpw-lite-sidebar .field,
.bpw-lite-sidebar .form-field,
.bpw-lite-sidebar .bpw-form-field {
    min-width: 0 !important;
}

/* Name / Titel breit */
.bpw-lite-sidebar .bpw-field-name,
.bpw-lite-sidebar .field-name,
.bpw-lite-sidebar [data-field="name"],
.bpw-lite-sidebar [name*="name"] {
    grid-column: span 4 !important;
}

/* Lebenspunkte / Mana / Rüstung / Initiative nebeneinander */
.bpw-lite-sidebar .bpw-field-hp,
.bpw-lite-sidebar .bpw-field-health,
.bpw-lite-sidebar .bpw-field-mp,
.bpw-lite-sidebar .bpw-field-mana,
.bpw-lite-sidebar .bpw-field-ac,
.bpw-lite-sidebar .bpw-field-armor,
.bpw-lite-sidebar .bpw-field-initiative,
.bpw-lite-sidebar [data-field*="hp"],
.bpw-lite-sidebar [data-field*="health"],
.bpw-lite-sidebar [data-field*="mana"],
.bpw-lite-sidebar [data-field*="armor"],
.bpw-lite-sidebar [data-field*="initiative"] {
    grid-column: span 1 !important;
}

/* Werte / Attribute als 3er-Grid */
.bpw-lite-sidebar .bpw-attributes,
.bpw-lite-sidebar .bpw-stats,
.bpw-lite-sidebar .attributes,
.bpw-lite-sidebar .stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

/* Attribut-Boxen */
.bpw-lite-sidebar .bpw-attribute,
.bpw-lite-sidebar .bpw-stat,
.bpw-lite-sidebar .attribute,
.bpw-lite-sidebar .stat {
    background: rgba(12, 8, 6, 0.72) !important;
    border: 1px solid rgba(216, 177, 106, 0.16) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    text-align: center !important;
}

/* Zahlenwerte mittig */
.bpw-lite-sidebar .bpw-attribute input,
.bpw-lite-sidebar .bpw-stat input,
.bpw-lite-sidebar .attribute input,
.bpw-lite-sidebar .stat input,
.bpw-lite-sidebar input[type="number"] {
    text-align: center !important;
    font-weight: 700 !important;
}

/* Aktionen / Buttons in Reihen */
.bpw-lite-sidebar .bpw-actions,
.bpw-lite-sidebar .actions,
.bpw-lite-sidebar .button-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* Kleine +/- Buttons quadratisch */
.bpw-lite-sidebar button {
    min-height: 34px !important;
}

.bpw-lite-sidebar button[data-action*="plus"],
.bpw-lite-sidebar button[data-action*="minus"],
.bpw-lite-sidebar button[data-action*="increase"],
.bpw-lite-sidebar button[data-action*="decrease"] {
    min-width: 34px !important;
    width: 34px !important;
    padding: 0 !important;
}

/* Notizen / Beschreibung über volle Breite */
.bpw-lite-sidebar textarea,
.bpw-lite-sidebar .bpw-notes,
.bpw-lite-sidebar .notes,
.bpw-lite-sidebar [data-field*="notes"],
.bpw-lite-sidebar [data-field*="description"] {
    grid-column: span 4 !important;
}

/* =========================================
   FALLBACK: direkte Formular-Kinder ordnen
   ========================================= */

.bpw-lite-sidebar form {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.bpw-lite-sidebar form > label,
.bpw-lite-sidebar form > div,
.bpw-lite-sidebar form > p {
    min-width: 0 !important;
}

/* Erstes Feld meist Name */
.bpw-lite-sidebar form > :first-child {
    grid-column: span 4 !important;
}

/* Lange Elemente volle Breite */
.bpw-lite-sidebar form textarea,
.bpw-lite-sidebar form .full,
.bpw-lite-sidebar form .wide {
    grid-column: span 4 !important;
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1200px) {
    .bpw-lite-sidebar .bpw-token-fields,
    .bpw-lite-sidebar .bpw-character-fields,
    .bpw-lite-sidebar .bpw-hero-fields,
    .bpw-lite-sidebar .bpw-sheet-fields,
    .bpw-lite-sidebar form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .bpw-lite-sidebar .bpw-field-name,
    .bpw-lite-sidebar .field-name,
    .bpw-lite-sidebar [data-field="name"],
    .bpw-lite-sidebar [name*="name"],
    .bpw-lite-sidebar textarea,
    .bpw-lite-sidebar .bpw-notes,
    .bpw-lite-sidebar .notes {
        grid-column: span 2 !important;
    }

    .bpw-lite-sidebar .bpw-attributes,
    .bpw-lite-sidebar .bpw-stats,
    .bpw-lite-sidebar .attributes,
    .bpw-lite-sidebar .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* =========================================
   V1.0.19 – Statblock Sidebar Layout
   ========================================= */

.bpw-lite-sidebar .bpw-npc-sheet__section.bpw-statblock {
    display: block !important;
    padding: 14px !important;
}

/* Hauptwerte: RK, Initiative, TP, Bewegung, HG */
.bpw-lite-sidebar .bpw-statblock-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 10px 0 18px !important;
}

.bpw-lite-sidebar .bpw-statblock-grid > div {
    background: rgba(12, 8, 6, 0.72) !important;
    border: 1px solid rgba(216, 177, 106, 0.16) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    text-align: center !important;
}

.bpw-lite-sidebar .bpw-statblock-grid strong {
    display: block !important;
    color: #f0d09a !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 4px !important;
}

.bpw-lite-sidebar .bpw-statblock-grid br {
    display: none !important;
}

/* Attribute: Stä, Ges, Kon, Int, Wei, Cha */
.bpw-lite-sidebar .bpw-statblock-abilities {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 10px 0 18px !important;
}

.bpw-lite-sidebar .bpw-statblock-abilities > div {
    background: rgba(12, 8, 6, 0.72) !important;
    border: 1px solid rgba(216, 177, 106, 0.16) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    text-align: center !important;
}

.bpw-lite-sidebar .bpw-statblock-abilities strong {
    display: block !important;
    color: #f0d09a !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 4px !important;
}

.bpw-lite-sidebar .bpw-statblock-abilities br {
    display: none !important;
}

/* Abschnittsüberschriften */
.bpw-lite-sidebar .bpw-statblock h4 {
    color: #f3d49b !important;
    font-size: 18px !important;
    margin: 0 0 12px !important;
    border-bottom: 1px solid rgba(216, 177, 106, 0.18) !important;
    padding-bottom: 8px !important;
}

.bpw-lite-sidebar .bpw-statblock h5 {
    color: #f0d09a !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin: 18px 0 8px !important;
}

/* Fertigkeiten, Sinne, Sprachen, Merkmale */
.bpw-lite-sidebar .bpw-statblock p {
    background: rgba(12, 8, 6, 0.42) !important;
    border: 1px solid rgba(216, 177, 106, 0.10) !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
    margin: 0 0 8px !important;
    color: #ead2a3 !important;
}

/* Leere Felder dezenter */
.bpw-lite-sidebar .bpw-statblock p.bpw-statblock-empty {
    opacity: 0.55 !important;
    font-style: italic !important;
}

/* Aktionen */
.bpw-lite-sidebar .bpw-statblock-entry {
    background: rgba(12, 8, 6, 0.62) !important;
    border: 1px solid rgba(216, 177, 106, 0.16) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    margin-top: 8px !important;
}

.bpw-lite-sidebar .bpw-statblock-entry strong,
.bpw-lite-sidebar .bpw-statblock-entry h6 {
    display: block !important;
    color: #f0d09a !important;
    font-size: 16px !important;
    margin: 0 0 6px !important;
}

.bpw-lite-sidebar .bpw-statblock-entry p {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.45 !important;
}

/* Mobile / schmale Sidebar */
@media (max-width: 1200px) {
    .bpw-lite-sidebar .bpw-statblock-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .bpw-lite-sidebar .bpw-statblock-abilities {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .bpw-lite-sidebar .bpw-statblock-grid,
    .bpw-lite-sidebar .bpw-statblock-abilities {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}