/* Elldus Dienstplaner – Anwendung im Frontend */

.dp-app {
    --dp-rahmen: #dcdfe4;
    --dp-grau: #f6f7f7;
    --dp-blau: #2271b1;
    --dp-text: #1d2327;

    /* Block-Themes begrenzen die Inhaltsbreite stark. Ein Wochenraster mit
       sieben Spalten braucht mehr Platz, deshalb bricht die Anwendung aus
       dem Textcontainer aus – ohne die Seite seitlich scrollen zu lassen. */
    width: min(1400px, calc(100vw - 32px));
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 0 0 48px;
    color: var(--dp-text);
    font-size: 15px;
    line-height: 1.5;
    box-sizing: border-box;
}
.dp-app *, .dp-app *::before, .dp-app *::after { box-sizing: border-box; }

/* ---------- Kopf und Navigation ---------- */
.dp-app-kopf {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; padding: 14px 0;
    border-bottom: 1px solid var(--dp-rahmen);
}
.dp-app-marke { font-weight: 700; font-size: 17px; }
.dp-app-marke span { font-weight: 400; color: #6b7280; margin-left: 8px; }
.dp-app-benutzer { font-size: 13px; color: #6b7280; display: flex; align-items: center; gap: 12px; }
.dp-app-benutzer strong { color: var(--dp-text); }
.dp-app-benutzer a { color: var(--dp-blau); }

.dp-app-nav {
    display: flex; gap: 2px; flex-wrap: wrap;
    margin: 0 0 20px; padding: 8px 0 0;
    border-bottom: 2px solid var(--dp-rahmen);
}
.dp-app-nav a {
    padding: 9px 16px; text-decoration: none; color: #50575e;
    border-bottom: 3px solid transparent; margin-bottom: -2px;
    font-size: 14px; font-weight: 500; white-space: nowrap;
}
.dp-app-nav a:hover { color: var(--dp-text); background: var(--dp-grau); }
.dp-app-nav a.is-aktiv { color: var(--dp-blau); border-bottom-color: var(--dp-blau); font-weight: 600; }

/* ---------- Knöpfe (das Admin-Design steht im Frontend nicht zur Verfügung) ---------- */
.dp-app .button, .dp-app .dp-btn {
    display: inline-block; padding: 6px 13px; font-size: 13px; line-height: 1.5;
    border: 1px solid #b6bcc2; border-radius: 4px; background: #fff; color: var(--dp-text);
    text-decoration: none; cursor: pointer; vertical-align: middle;
}
.dp-app .button:hover, .dp-app .dp-btn:hover { background: var(--dp-grau); border-color: #8c9196; }
.dp-app .button-primary, .dp-app .dp-btn-primaer {
    background: var(--dp-blau); border-color: var(--dp-blau); color: #fff;
}
.dp-app .button-primary:hover, .dp-app .dp-btn-primaer:hover { background: #135e96; border-color: #135e96; color: #fff; }
.dp-app .button:disabled, .dp-app .dp-btn:disabled { opacity: .5; cursor: default; }
.dp-app .button-link-delete, .dp-app .dp-btn-loeschen { color: #b32d2e; border-color: #d3a0a0; }
.dp-app .description { font-size: 13px; color: #6b7280; }
.dp-app kbd {
    background: var(--dp-grau); border: 1px solid var(--dp-rahmen); border-radius: 3px;
    padding: 1px 5px; font-size: 11px;
}
.dp-app h1, .dp-app h2, .dp-app h3 {
    margin: 0 0 10px;
    font-family: inherit;
    line-height: 1.25;
    letter-spacing: normal;
}
.dp-app h1 { font-size: 22px; font-weight: 700; }
.dp-app h2 { font-size: 17px; font-weight: 600; }
.dp-app h3 { font-size: 15px; font-weight: 600; }
.dp-app .elldus-dp-h1-sub { font-size: 14px; font-weight: 400; color: #6b7280; margin-left: 8px; }
.dp-app p { margin: 0 0 10px; }
.dp-app table { font-family: inherit; }
.dp-app .notice { padding: 10px 14px; border-left: 4px solid var(--dp-blau); background: var(--dp-grau); margin: 12px 0; }
.dp-app .notice-warning { border-left-color: #d97706; background: #fff4e5; }

/* ---------- Hinweise ---------- */
.dp-hinweis {
    padding: 12px 16px; border-radius: 6px; background: var(--dp-grau);
    border-left: 4px solid #9aa2ab; margin: 16px 0; font-size: 14px;
}
.dp-hinweis.is-warnung { background: #fff4e5; border-left-color: #d97706; color: #8a5300; }

/* ---------- Anmeldung ---------- */
.dp-app-login { display: flex; justify-content: center; padding-top: 40px; }
.dp-login-box {
    width: 100%; max-width: 380px; padding: 28px;
    border: 1px solid var(--dp-rahmen); border-radius: 10px; background: #fff;
}
.dp-login-box h2 { margin: 0 0 6px; }
.dp-login-box p { color: #6b7280; font-size: 14px; }
.dp-login-box label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.dp-login-box input[type=text], .dp-login-box input[type=password] {
    width: 100%; padding: 9px 11px; border: 1px solid #b6bcc2; border-radius: 4px; margin-bottom: 14px;
}
.dp-login-box .login-remember { font-weight: 400; font-size: 13px; margin-bottom: 12px; }
.dp-login-box .button-primary, .dp-login-box input[type=submit] {
    width: 100%; padding: 10px; font-size: 15px; cursor: pointer;
    background: var(--dp-blau); border: 1px solid var(--dp-blau); border-radius: 4px; color: #fff;
}
.dp-login-hilfe { text-align: center; font-size: 13px; margin-bottom: 0; }

/* ---------- Mein Plan ---------- */
.dp-wochenkopf {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 16px; padding: 10px 14px;
    background: var(--dp-grau); border-radius: 8px;
}
.dp-wochenkopf div { text-align: center; line-height: 1.3; }
.dp-wochenkopf small { display: block; color: #6b7280; font-size: 13px; }

.dp-tage { list-style: none; margin: 0; padding: 0; }
.dp-tage li {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 12px 14px; border: 1px solid var(--dp-rahmen);
    border-radius: 8px; margin-bottom: 8px; background: #fff;
}
.dp-tage li.is-leer { background: #fcfcfc; }
.dp-tage li.is-heute { border-color: var(--dp-blau); box-shadow: 0 0 0 1px var(--dp-blau); }
.dp-tag-datum { flex: 0 0 52px; text-align: center; line-height: 1.2; }
.dp-tag-datum span { display: block; font-size: 12px; color: #6b7280; text-transform: uppercase; }
.dp-tag-datum strong { font-size: 20px; }
.dp-tag-inhalt { flex: 1; min-width: 0; }
.dp-leer { color: #c0c6cc; }
.dp-summe { margin-top: 16px; padding: 12px 14px; background: var(--dp-grau); border-radius: 8px; font-size: 14px; }

/* ---------- Tabellen ---------- */
.dp-tabelle { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; }
.dp-tabelle th, .dp-tabelle td { padding: 9px 11px; border-bottom: 1px solid var(--dp-rahmen); text-align: left; vertical-align: top; }
.dp-tabelle thead th { background: var(--dp-grau); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #50575e; }
.dp-tabelle select, .dp-tabelle textarea { width: 100%; font: inherit; padding: 5px 7px; border: 1px solid #b6bcc2; border-radius: 4px; }
.dp-tabelle textarea { margin-top: 4px; resize: vertical; }
.dp-aktionen { white-space: nowrap; }
.dp-aktionen .dp-btn { margin: 0 2px 4px 0; }

/* ---------- Planungsraster im Frontend ---------- */
.dp-app .elldus-dp-wrap { margin: 0; }
.dp-app .elldus-dp-plan-edit, .dp-app .elldus-dp-tagesinfo-tbl { font-size: 13px; }
.dp-app .elldus-dp-modal { z-index: 99999; }

/* Das Raster braucht Breite – auf schmalen Schirmen seitlich scrollen */
@media screen and (max-width: 1100px) {
    .dp-app .elldus-dp-plan-edit,
    .dp-app .elldus-dp-tagesinfo-tbl { min-width: 900px; }
    .dp-app .elldus-dp-planen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media screen and (max-width: 640px) {
    .dp-app { padding: 0 12px 40px; }
    .dp-app-nav a { padding: 8px 11px; font-size: 13px; }

    .dp-tabelle, .dp-tabelle tbody, .dp-tabelle tr, .dp-tabelle td { display: block; width: 100%; }
    .dp-tabelle thead { display: none; }
    .dp-tabelle tr { border: 1px solid var(--dp-rahmen); border-radius: 8px; margin-bottom: 12px; padding: 4px 0; }
    .dp-tabelle td { border-bottom: 0; padding: 6px 12px; }
    .dp-tabelle td::before {
        content: attr(data-label); display: block;
        font-size: 11px; text-transform: uppercase; color: #6b7280; margin-bottom: 2px;
    }
    .dp-tabelle td[data-label=""]::before { display: none; }
}

@media print {
    .dp-app-kopf, .dp-app-nav, .elldus-dp-weekbar, .elldus-dp-palette,
    .dp-palette-hinweis, .elldus-dp-hilfe { display: none !important; }
    .dp-app { max-width: none; padding: 0; }
}


/* Ausbruch aus dem Textcontainer darf keinen seitlichen Bildlauf erzeugen */
body:has(.dp-app) { overflow-x: hidden; }

/* ---------- Theme-Styles zurücksetzen ----------
   Themes stylen <button> und <input> global, teils mit :not()-Ketten, die die
   Spezifität künstlich hochtreiben (Twenty Twenty-One tut genau das). Ein
   Plugin, das in fremden Themes bestehen muss, setzt seine Kernwerte deshalb
   hart – begrenzt auf die Eigenschaften, die das Aussehen tragen. */

.dp-app button,
.dp-app input,
.dp-app select,
.dp-app textarea {
    font-family: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.dp-app .button,
.dp-app .dp-btn {
    background: #fff !important;
    color: var(--dp-text) !important;
    border: 1px solid #b6bcc2 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    padding: 6px 13px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    min-height: 0 !important;
    text-decoration: none !important;
}
.dp-app .button:hover,
.dp-app .dp-btn:hover { background: var(--dp-grau) !important; }

.dp-app .button-primary,
.dp-app .dp-btn-primaer {
    background: var(--dp-blau) !important;
    border-color: var(--dp-blau) !important;
    color: #fff !important;
}
.dp-app .button-primary:hover,
.dp-app .dp-btn-primaer:hover { background: #135e96 !important; }
.dp-app .button:disabled { background: var(--dp-grau) !important; color: #8c9196 !important; }
.dp-app .button-link-delete,
.dp-app .dp-btn-loeschen { color: #b32d2e !important; border-color: #d3a0a0 !important; }

.dp-app .dp-pinsel {
    background: color-mix(in srgb, var(--farbe, #607d8b) 12%, white) !important;
    color: var(--dp-text) !important;
    border: 1px solid transparent !important;
    border-left: 4px solid var(--farbe, #607d8b) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    padding: 5px 11px !important;
    min-height: 0 !important;
}
.dp-app .dp-pinsel:hover { background: color-mix(in srgb, var(--farbe, #607d8b) 22%, white) !important; }
.dp-app .dp-pinsel strong { color: var(--dp-text) !important; font-size: 12px; font-weight: 600; }
.dp-app .dp-pinsel small  { color: #6b7280 !important; font-size: 11px; }
.dp-app .dp-pinsel.is-aktiv {
    border-color: var(--dp-text) !important;
    box-shadow: 0 0 0 2px var(--dp-text) inset, 0 1px 3px rgba(0, 0, 0, .2) !important;
}
.dp-app .dp-pinsel.is-radierer { --farbe: #9aa2ab; background: var(--dp-grau) !important; }

.dp-app .elldus-dp-add,
.dp-app .elldus-dp-row-handle {
    background: transparent !important; border: 0 !important;
    color: #9aa2ab !important; padding: 0 !important; box-shadow: none !important;
}

.dp-app .elldus-dp-tinfo-input {
    background: transparent !important; border: 1px solid transparent !important;
    box-shadow: none !important; padding: 4px 6px !important; text-align: center;
}
.dp-app .elldus-dp-tinfo-input:focus { border-color: var(--dp-blau) !important; background: #fff !important; }

.dp-app .elldus-dp-modal-box input,
.dp-app .elldus-dp-modal-box select,
.dp-app .elldus-dp-modal-box textarea {
    border: 1px solid #b6bcc2 !important; border-radius: 4px !important;
    padding: 7px 9px !important; background: #fff !important; box-shadow: none !important;
}
.dp-app .dp-chip, .dp-app .dp-fremd { font-size: 12px; }
.dp-app .elldus-dp-weekbar { gap: 6px; }

/* Ausbruch aus dem Textcontainer darf keinen seitlichen Bildlauf erzeugen */
body:has(.dp-app) { overflow-x: hidden; }

/* Entfernen-X und Plus-Knopf gegen Theme-Vorgaben absichern */
.dp-app .dp-chip-x,
.dp-app .dp-chip-frage button,
.dp-app .dp-zelle-plus {
    font-family: inherit !important;
    box-shadow: none !important;
    min-height: 0 !important;
    text-transform: none !important;
}
.dp-app .dp-chip-x {
    background: transparent !important; color: #8c9196 !important;
    border: 0 !important; padding: 0 !important; font-size: 15px !important;
}
.dp-app .dp-chip-x:hover { background: #fdecea !important; color: #b32d2e !important; }
.dp-app .dp-chip-frage button {
    background: #fff !important; color: #50575e !important;
    border: 1px solid #b6bcc2 !important; padding: 1px 8px !important; font-size: 11px !important;
}
.dp-app .dp-chip-ja:hover { background: #b32d2e !important; border-color: #b32d2e !important; color: #fff !important; }
.dp-app .dp-zelle-plus {
    background: transparent !important; color: #8c9196 !important;
    border: 1px dashed #c7ccd1 !important; padding: 2px 0 !important; font-size: 11px !important;
}
.dp-app .dp-zelle-plus:hover { border-color: #2271b1 !important; color: #2271b1 !important; background: #f2f7ff !important; }

/* Passwortwechsel bei der ersten Anmeldung */
.dp-pw-fehler {
    background: #fdecea; color: #a4231a; border-radius: 4px;
    padding: 8px 11px; font-size: 13px; margin-bottom: 12px;
}
.dp-pw-hinweis { font-size: 12px; color: #6b7280; margin: -6px 0 14px; }
.dp-login-box input[type=password] {
    width: 100%; padding: 9px 11px; border: 1px solid #b6bcc2;
    border-radius: 4px; margin-bottom: 14px;
}

/* ---------- Rückmeldung ---------- */
.dp-feedback { position: fixed; right: 20px; bottom: 20px; z-index: 9998; }

.dp-feedback-knopf {
    padding: 10px 18px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: var(--dp-blau) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .22) !important;
}
.dp-feedback-knopf:hover { background: #135e96 !important; }
.dp-feedback.is-offen .dp-feedback-knopf { display: none; }

.dp-feedback-box {
    width: min(360px, calc(100vw - 32px));
    background: #fff;
    border: 1px solid var(--dp-rahmen);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .22);
    padding: 16px;
}
.dp-feedback-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-feedback-zu {
    background: transparent !important; border: 0 !important; padding: 0 4px !important;
    font-size: 20px !important; line-height: 1; color: #8c9196 !important; cursor: pointer;
}
.dp-feedback-hinweis { font-size: 12px; color: #6b7280; margin: 0 0 10px; }

.dp-feedback-noten { display: flex; gap: 5px; margin-bottom: 10px; }
.dp-note {
    flex: 1; padding: 6px 0 !important; cursor: pointer;
    border: 1px solid #b6bcc2 !important; border-radius: 4px !important;
    background: #fff !important; color: var(--dp-text) !important; font-size: 13px !important;
}
.dp-note:hover { background: var(--dp-grau) !important; }
.dp-note.is-gewaehlt { background: var(--dp-blau) !important; border-color: var(--dp-blau) !important; color: #fff !important; }

.dp-feedback-box textarea {
    width: 100%; padding: 9px 11px; font: inherit; font-size: 14px;
    border: 1px solid #b6bcc2 !important; border-radius: 4px; resize: vertical;
}
.dp-feedback-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.dp-feedback-status { font-size: 12px; color: #1e6b33; }
.dp-feedback-status.is-fehler { color: #a4231a; }

@media print { .dp-feedback { display: none !important; } }
@media screen and (max-width: 640px) {
    .dp-feedback { right: 12px; bottom: 12px; left: 12px; }
    .dp-feedback-box { width: 100%; }
}

/* Kopfbereich im Frontend */
.dp-app .dp-segment a {
    background: #fff !important; color: #50575e !important;
    border-right: 1px solid #e3e6e8 !important; border-radius: 0 !important;
    padding: 5px 13px !important; font-size: 13px !important; box-shadow: none !important;
}
.dp-app .dp-segment a.is-aktiv { background: #2271b1 !important; color: #fff !important; font-weight: 600 !important; }
.dp-app .dp-segment a:last-child { border-right: 0 !important; }
.dp-app .dp-kopf-zeile + .dp-kopf-zeile { background: #fcfcfd; }