/* ==========================================================
   RPG SCHEDULER
   Smoke on the Water · Dark Copper Theme
   passend zum braun-kupfernen Screenshot
   ========================================================== */

.rpgs-wrap{
    /* ------------------------------------------------------
       FARBSYSTEM
       ------------------------------------------------------ */

    /* tiefes Schwarzbraun */
    --rpgs-bg:#120905;

    /* Hauptflächen */
    --rpgs-panel:#190c07;

    /* leicht hellere / abgesetzte Flächen */
    --rpgs-panel-alt:#241208;

    /* Rahmen / Linien */
    --rpgs-line:#4a260f;

    /* Hauptschrift – warmes Beige/Gold */
    --rpgs-text:#e6bd7c;

    /* gedecktere Schrift */
    --rpgs-muted:#a9794e;

    /* Kupfer / Orange */
    --rpgs-accent:#a95b1d;

    /* dunkleres Kupfer */
    --rpgs-accent-dark:#783814;

    /* heller Kupferton */
    --rpgs-accent-light:#51270f;

    /* Schrift auf Akzentflächen */
    --rpgs-accent-text:#f3d49a;

    /* Fehler / Löschen */
    --rpgs-danger:#b65a4d;

    max-width:1280px;
    margin:24px auto;
    padding:0 14px;
    color:var(--rpgs-text);
}


/* ==========================================================
   BASIS
   ========================================================== */

.rpgs-wrap *{
    box-sizing:border-box;
}


/* ==========================================================
   HERO / KOPFBEREICH
   ========================================================== */

.rpgs-hero{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;

    padding:28px;

    border:1px solid var(--rpgs-line);
    background:var(--rpgs-panel);

    border-radius:14px;
}


.rpgs-eyebrow{
    display:block;

    font-size:10px;
    letter-spacing:.18em;
    text-transform:uppercase;

    color:var(--rpgs-muted);

    margin-bottom:5px;
}


.rpgs-hero h1,
.rpgs-panel h2,
.rpgs-modal h2{
    margin:0;

    font-size:26px;
    line-height:1.15;

    color:var(--rpgs-text);
}


.rpgs-hero p{
    margin:7px 0 0;

    color:var(--rpgs-muted);
}


/* ==========================================================
   STATISTIK
   ========================================================== */

.rpgs-stats{
    display:flex;
    gap:10px;
}


.rpgs-stats div{
    min-width:88px;

    padding:12px 16px;

    border:1px solid var(--rpgs-line);
    border-radius:10px;

    text-align:center;

    background:var(--rpgs-panel-alt);

    color:var(--rpgs-text);
}


.rpgs-stats strong{
    display:block;

    font-size:22px;

    color:var(--rpgs-text);
}


.rpgs-stats span{
    font-size:11px;

    color:var(--rpgs-muted);

    text-transform:uppercase;
    letter-spacing:.08em;
}


/* ==========================================================
   TABS
   ========================================================== */

.rpgs-tabs{
    display:flex;
    gap:6px;

    margin:14px 0;
}


.rpgs-tabs a{
    padding:10px 16px;

    border:1px solid var(--rpgs-line);
    border-radius:9px;

    text-decoration:none;

    background:var(--rpgs-panel);

    color:var(--rpgs-text);

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}


.rpgs-tabs a:hover{
    background:var(--rpgs-panel-alt);

    border-color:#643315;
}


.rpgs-tabs a.is-active{
    background:var(--rpgs-accent);

    color:var(--rpgs-accent-text);

    border-color:#c0782b;
}


/* ==========================================================
   FILTER
   ========================================================== */

.rpgs-filter{
    display:grid;

    grid-template-columns:
        1fr
        1fr
        1fr
        auto
        auto;

    gap:10px;
    align-items:end;

    padding:15px;

    border:1px solid var(--rpgs-line);
    border-radius:12px;

    background:var(--rpgs-panel);

    margin-bottom:14px;
}


.rpgs-filter label,
.rpgs-modal label{
    display:flex;
    flex-direction:column;
    gap:5px;
}


.rpgs-filter label > span,
.rpgs-modal label > span{
    font-size:11px;

    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.06em;

    color:var(--rpgs-muted);
}


.rpgs-filter select,
.rpgs-modal input{
    width:100%;

    min-height:38px;

    padding:7px 9px;

    border:1px solid var(--rpgs-line);
    border-radius:7px;

    background:var(--rpgs-panel-alt);

    color:var(--rpgs-text);

    outline:none;
}


.rpgs-filter select:focus,
.rpgs-modal input:focus{
    border-color:var(--rpgs-accent);

    box-shadow:
        0 0 0 2px rgba(169,91,29,.14);
}


.rpgs-filter select option{
    background:var(--rpgs-panel-alt);
    color:var(--rpgs-text);
}


.rpgs-filter button,
.rpgs-modal-actions button{
    min-height:38px;

    padding:7px 14px;

    border:1px solid #c0782b;
    border-radius:7px;

    cursor:pointer;

    background:var(--rpgs-accent);

    color:var(--rpgs-accent-text);

    transition:
        background .2s ease,
        border-color .2s ease;
}


.rpgs-filter button:hover,
.rpgs-modal-actions button:hover{
    background:#bf6d24;

    border-color:#d38b39;
}


.rpgs-filter > a{
    min-height:38px;

    display:flex;
    align-items:center;

    padding:0 8px;

    color:var(--rpgs-text);
}


/* ==========================================================
   PANEL
   ========================================================== */

.rpgs-panel{
    border:1px solid var(--rpgs-line);

    border-radius:14px;

    background:var(--rpgs-panel);

    overflow:hidden;

    margin-bottom:16px;
}


.rpgs-panel-head{
    padding:18px 20px;

    border-bottom:1px solid var(--rpgs-line);

    background:var(--rpgs-panel);
}


.rpgs-panel-head h2{
    font-size:20px;

    color:var(--rpgs-text);
}


/* ==========================================================
   POSTINGPLAN
   ========================================================== */

.rpgs-plan-day{
    display:grid;

    grid-template-columns:100px 1fr;

    min-height:62px;

    border-bottom:1px solid var(--rpgs-line);

    background:var(--rpgs-panel);
}


.rpgs-plan-day:last-child{
    border-bottom:0;
}


.rpgs-plan-day.is-today{
    box-shadow:
        inset 4px 0 0 var(--rpgs-accent);
}


.rpgs-plan-date{
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:11px 16px;

    background:var(--rpgs-panel-alt);

    color:var(--rpgs-text);
}


.rpgs-plan-date strong{
    text-transform:uppercase;

    font-size:12px;

    color:#efc37d;
}


.rpgs-plan-date span{
    font-size:12px;

    color:var(--rpgs-muted);
}


.rpgs-plan-items{
    display:flex;

    align-items:center;

    gap:7px;

    flex-wrap:wrap;

    padding:10px 14px;
}


.rpgs-plan-chip{
    display:inline-flex;

    padding:6px 9px;

    border:1px solid var(--rpgs-line);

    border-radius:999px;

    font-size:12px;

    background:var(--rpgs-panel-alt);

    color:var(--rpgs-text);
}


.rpgs-plan-chip:hover{
    border-color:#693515;

    background:#2d160a;
}


.rpgs-muted{
    color:var(--rpgs-muted);
}


/* ==========================================================
   KARTEN / GEPLANTE POSTS
   ========================================================== */

.rpgs-cards{
    padding:10px;
}


.rpgs-card{
    border:1px solid var(--rpgs-line);

    border-radius:10px;

    margin-bottom:9px;

    overflow:hidden;

    background:var(--rpgs-panel);
}


.rpgs-card:last-child{
    margin-bottom:0;
}


.rpgs-card.is-error{
    box-shadow:
        inset 4px 0 0 var(--rpgs-danger);
}


.rpgs-card-main{
    display:grid;

    grid-template-columns:
        170px
        minmax(280px,1fr)
        125px
        85px;

    gap:14px;

    align-items:center;

    padding:14px;
}


.rpgs-ident strong,
.rpgs-ident span,
.rpgs-when strong,
.rpgs-when span{
    display:block;
}


.rpgs-ident strong,
.rpgs-when strong{
    color:var(--rpgs-text);
}


.rpgs-ident span,
.rpgs-when span,
.rpgs-for{
    font-size:11px;

    color:var(--rpgs-muted);
}


.rpgs-scene-link{
    font-weight:700;

    text-decoration:none;

    color:#efc37d;
}


.rpgs-scene-link:hover{
    text-decoration:underline;

    color:#d77927;
}


.rpgs-for{
    display:block;

    margin-top:4px;
}


.rpgs-state{
    text-align:center;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.06em;

    font-weight:700;

    color:var(--rpgs-muted);
}


/* ==========================================================
   AKTIONEN
   ========================================================== */

.rpgs-actions{
    display:flex;

    gap:12px;

    flex-wrap:wrap;

    padding:9px 14px;

    border-top:1px solid var(--rpgs-line);

    background:var(--rpgs-panel-alt);

    font-size:11px;
}


.rpgs-actions a,
.rpgs-linkbutton{
    border:0;

    background:none;

    padding:0;

    color:var(--rpgs-text);

    text-decoration:underline;

    cursor:pointer;

    font:inherit;
}


.rpgs-actions a:hover,
.rpgs-linkbutton:hover{
    color:#d77927;
}


.rpgs-actions .rpgs-danger{
    color:var(--rpgs-danger);
}


.rpgs-actions .rpgs-danger:hover{
    color:#dc7569;
}


.rpgs-error{
    font-size:11px;

    margin-top:5px;

    color:var(--rpgs-danger);
}


.rpgs-empty{
    padding:34px;

    text-align:center;

    color:var(--rpgs-muted);
}


/* ==========================================================
   KALENDER KOPF
   ========================================================== */

.rpgs-calendar-head{
    display:grid;

    grid-template-columns:
        42px
        1fr
        42px;

    align-items:center;

    text-align:center;

    padding:14px;

    border-bottom:1px solid var(--rpgs-line);

    background:var(--rpgs-panel);
}


.rpgs-calendar-head a{
    font-size:26px;

    text-decoration:none;

    color:var(--rpgs-text);
}


.rpgs-calendar-head a:hover{
    color:#d77927;
}


/* ==========================================================
   KALENDER
   ========================================================== */

.rpgs-calendar-weekdays,
.rpgs-calendar-grid{
    display:grid;

    grid-template-columns:repeat(7,1fr);
}


.rpgs-calendar-weekdays span{
    padding:9px;

    text-align:center;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    color:var(--rpgs-muted);

    background:var(--rpgs-panel-alt);

    border-right:1px solid var(--rpgs-line);

    border-bottom:1px solid var(--rpgs-line);
}


.rpgs-calendar-weekdays span:last-child{
    border-right:0;
}


.rpgs-calendar-cell{
    min-height:125px;

    padding:7px;

    border-right:1px solid var(--rpgs-line);

    border-bottom:1px solid var(--rpgs-line);

    overflow:hidden;

    background:var(--rpgs-panel);
}


.rpgs-calendar-cell:nth-child(7n){
    border-right:0;
}


.rpgs-calendar-cell.is-empty{
    background:#140a06;

    opacity:.76;
}


.rpgs-calendar-cell.is-today{
    box-shadow:
        inset 0 0 0 2px var(--rpgs-accent);

    background:#211006;
}


.rpgs-calendar-number{
    font-size:12px;

    font-weight:700;

    margin-bottom:5px;

    color:var(--rpgs-text);
}


/* ==========================================================
   KALENDER-EVENT
   ========================================================== */

.rpgs-calendar-event{
    display:block;

    padding:6px 7px;

    border:1px solid var(--rpgs-line);

    border-radius:7px;

    margin-top:5px;

    text-decoration:none;

    background:var(--rpgs-panel-alt);

    color:var(--rpgs-text);

    font-size:10px;

    line-height:1.25;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}


.rpgs-calendar-event:hover{
    background:#34190b;

    border-color:#824417;
}


.rpgs-calendar-event time,
.rpgs-calendar-event strong,
.rpgs-calendar-event span{
    display:block;
}


.rpgs-calendar-event strong{
    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    margin:2px 0;

    color:#efc37d;
}


.rpgs-calendar-event span{
    color:var(--rpgs-muted);
}


/* ==========================================================
   MODAL
   ========================================================== */

.rpgs-modal{
    position:fixed;

    inset:0;

    display:none;

    z-index:9999;
}


.rpgs-modal.is-open{
    display:block;
}


.rpgs-modal-backdrop{
    position:absolute;

    inset:0;

    background:rgba(5,2,1,.76);
}


.rpgs-modal-dialog{
    position:relative;

    z-index:2;

    width:min(460px,calc(100% - 30px));

    margin:12vh auto 0;

    padding:24px;

    border-radius:14px;

    background:var(--rpgs-panel,#190c07);

    color:var(--rpgs-text);

    border:1px solid var(--rpgs-line);

    box-shadow:
        0 20px 70px rgba(0,0,0,.65);
}


.rpgs-modal-dialog form{
    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:12px;

    margin-top:18px;
}


.rpgs-modal-actions{
    grid-column:1/-1;

    display:flex;

    justify-content:flex-end;

    gap:8px;

    margin-top:4px;
}


.rpgs-modal-actions button:first-child{
    background:var(--rpgs-panel-alt);

    color:var(--rpgs-text);

    border:1px solid var(--rpgs-line);
}


.rpgs-modal-actions button:first-child:hover{
    background:#33190c;

    border-color:#6b3515;
}


.rpgs-modal-x{
    position:absolute;

    right:12px;

    top:10px;

    border:0;

    background:none;

    font-size:25px;

    cursor:pointer;

    color:var(--rpgs-text);
}


.rpgs-modal-x:hover{
    color:#d77927;
}


/* ==========================================================
   HEADER
   ========================================================== */

.rpgscheduler-header{
    white-space:nowrap;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:900px){

    .rpgs-filter{
        grid-template-columns:
            1fr
            1fr;
    }


    .rpgs-card-main{
        grid-template-columns:
            1fr
            110px;
    }


    .rpgs-ident{
        grid-column:1;
    }


    .rpgs-scene{
        grid-column:1/-1;
        grid-row:2;
    }


    .rpgs-when{
        grid-column:2;
        grid-row:1;
    }


    .rpgs-state{
        display:none;
    }


    .rpgs-calendar-cell{
        min-height:90px;
    }


    .rpgs-calendar-event span{
        display:none;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:620px){

    .rpgs-hero{
        align-items:flex-start;

        flex-direction:column;
    }


    .rpgs-filter{
        grid-template-columns:1fr;
    }


    .rpgs-plan-day{
        grid-template-columns:
            78px
            1fr;
    }


    .rpgs-calendar-weekdays{
        display:none;
    }


    .rpgs-calendar-grid{
        display:block;
    }


    .rpgs-calendar-cell,
    .rpgs-calendar-cell.is-empty{
        min-height:0;

        border-right:0;
    }


    .rpgs-calendar-cell.is-empty{
        display:none;
    }


    .rpgs-calendar-cell:not(:has(.rpgs-calendar-event)){
        display:none;
    }


    .rpgs-calendar-event span{
        display:block;
    }
}