/* ============================================================
   AUFGABEN IM BLATT-LOOK  (wie in der nativen App)
   ------------------------------------------------------------
   Die Aufgaben liegen als Blätter im Raster: hochkant im Papier-
   Format (DIN-A4-Verhältnis 1 : 1,414), heller Papierton, feiner
   Schatten — dazu ein gelber Klebezettel mit dem Vornamen und
   einer Büroklammer.

   Wie viele Blätter nebeneinander liegen, bestimmt der Ansichts-
   Umschalter: 3 Blätter (view-2col) oder 4 Blätter (view-3col).
   Am Handy sind es immer 2. Das Blatt behält dabei stets das
   DIN-A4-Verhältnis; alles darauf skaliert mit seiner Breite —
   dafür sorgt die Maßeinheit --twk-s (siehe unten).

   Aktiv nur, wenn <html> die Klasse twk-sheets trägt — und die setzt
   header.php nur bis 1024px Fensterbreite. Am Schreibtisch bleiben die
   gewohnten Balken; die Papier-Zutaten unten stecken dann unsichtbar
   in der Karte (siehe „Zutaten des Blattes ausblenden“).
   ============================================================ */

/* ---------- Raster: Blätter nebeneinander ----------
   In Gebrauch sind nur die beiden Regeln am Dateiende: drei Blätter auf
   mittleren Schirmen, zwei am Handy. Die Vier-, Fünf- und Sechs-Spalten-
   Regeln hier stammen aus der Zeit, als der Blatt-Look auch am Schreibtisch
   galt; sie greifen erst wieder, wenn die 1024px-Grenze in header.php fällt. */
html.twk-sheets .task-grid,
html.twk-sheets .pool-task-grid,
html.twk-sheets .task-grid.view-list,
html.twk-sheets .task-grid.view-1col,
html.twk-sheets .task-grid.view-2col,
html.twk-sheets .task-grid.view-3col {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px 18px !important;
    align-items: start;
    padding-bottom: 18px !important;      /* Luft unter der letzten Reihe */
}

@media (min-width: 1025px) {
    html.twk-sheets .task-grid.view-2col,
    html.twk-sheets .pool-task-grid.view-2col {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 22px 16px !important;
    }
    html.twk-sheets .task-grid.view-3col,
    html.twk-sheets .pool-task-grid.view-3col {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 20px 14px !important;
    }
}

/* ---------- Scrollbare Boxen (ab der fünften Aufgabe) ----------
   Hat eine Box mehr als vier Aufgaben, liegt das Raster in einer
   scrollbaren Hülle (.task-list-container). Ein Scroll-Container
   schneidet alles ab, was über seine Innenkante ragt – und genau
   dort stehen Zettel und Büroklammer über (Klammer bis ~1,3 × --twk-s
   nach oben und ~0,75 × --twk-s nach links, --twk-s höchstens 24px).
   Die Hülle bekommt deshalb oben und links so viel Luft, dass beide
   auch beim größten Blatt vollständig zu sehen sind.               */
html.twk-sheets .task-list-container {
    padding: 36px 8px 4px 20px !important;
}

/* ---------- Maßeinheit des Blattes ----------
   --twk-s ist die Grundgröße (entspricht der Schriftgröße des
   Titels). Alles andere ist ein Vielfaches davon. Wo der Browser
   Container-Abfragen kennt, wächst sie mit der Blattbreite —
   dadurch sehen 3er- und 4er-Ansicht gleich aus, nur größer bzw.
   kleiner. Ohne Container-Abfragen greifen feste Werte.         */
html.twk-sheets .task-card-block { --twk-s: 15px; }

@media (min-width: 1025px) {
    html.twk-sheets .task-grid.view-2col .task-card-block,
    html.twk-sheets .pool-task-grid.view-2col .task-card-block { --twk-s: 13.5px; }
    html.twk-sheets .task-grid.view-3col .task-card-block,
    html.twk-sheets .pool-task-grid.view-3col .task-card-block { --twk-s: 12.5px; }
}

@supports (container-type: inline-size) {
    html.twk-sheets .task-card-block {
        container-type: inline-size;
        /* 7 % der Blattbreite — dasselbe Verhältnis wie im ursprünglichen
           Entwurf (13,5 px auf 186 px). Die Untergrenze hält die Schrift
           auch dann lesbar, wenn sechs Blätter in ein schmales Fenster
           müssen; die Obergrenze verhindert Plakatschrift.              */
        --twk-s: clamp(13.2px, 7.8cqw, 24px) !important;
    }
}

/* ---------- Das Blatt ---------- */
html.twk-sheets .task-card-block {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1.414;            /* DIN-A4 hochkant */
    height: auto !important;
    min-height: 0 !important;
    width: 100%;
    max-width: 420px;                   /* auf sehr breiten Schirmen nicht ins Plakathafte */
    justify-self: center;
    padding: calc(var(--twk-s) * 1.62) calc(var(--twk-s) * 1.05) calc(var(--twk-s) * .9) !important;
    background: #fdfdfc !important;
    border: 1px solid rgba(0, 0, 0, .09) !important;
    border-left: 1px solid rgba(0, 0, 0, .09) !important;   /* Farbbalken passt nicht zum Blatt */
    border-radius: 2px !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .13), 0 1px 2px rgba(0, 0, 0, .07) !important;
    overflow: visible !important;      /* Zettel + Klammer dürfen überstehen */
    transform: none;
}

html.twk-sheets .task-card-block:hover {
    box-shadow: 0 10px 22px rgba(0, 0, 0, .17) !important;
    transform: translateY(-2px);
}

html.twk-sheets .task-card-block::before,
html.twk-sheets .task-card-block::after { display: none !important; }

html.dark-mode.twk-sheets .task-card-block {
    background: #212831 !important;
    border-color: rgba(255, 255, 255, .09) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .5) !important;
}

/* ---------- Klebezettel + Büroklammer ---------- */
html.twk-sheets .twk-note {
    display: block !important;      /* gegen fremde Ausblend-Regeln absichern */
    position: absolute;
    top: calc(var(--twk-s) * -.82);          /* ragt über die obere linke Ecke */
    left: calc(var(--twk-s) * -.52);
    z-index: 4;
    padding: calc(var(--twk-s) * .3) calc(var(--twk-s) * 1.04) calc(var(--twk-s) * .3) calc(var(--twk-s) * 1.48);
    max-width: 78%;
    background: linear-gradient(180deg, #ffdf59 0%, #f8c93f 100%);
    color: #1c1c1e;
    font-family: "Segoe Script", "Bradley Hand", "Snell Roundhand", "Brush Script MT", cursive;
    font-size: calc(var(--twk-s) * .96);
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: rotate(-5deg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
}

html.twk-sheets .twk-clip {
    display: block !important;
    position: absolute;
    top: calc(var(--twk-s) * -1.41);         /* Büroklammer klemmt über der Ecke */
    left: calc(var(--twk-s) * -.74);
    z-index: 5;
    font-size: calc(var(--twk-s) * 1.41);
    line-height: 1;
    color: #3f434b;
    transform: rotate(24deg);
    pointer-events: none;
}
html.dark-mode.twk-sheets .twk-clip { color: #a8aeb8; }

/* Aufgaben aus dem Pool: blaugraues Schildchen statt gelbem Namenszettel */
html.twk-sheets .twk-note-pool {
    background: linear-gradient(180deg, #7e8fa6 0%, #63748c 100%);
    color: #fff;
    letter-spacing: .3px;
}
html.dark-mode.twk-sheets .twk-note-pool {
    background: linear-gradient(180deg, #5b6b80 0%, #46546a 100%);
}
html.twk-sheets .twk-clip-pool { color: #4a5769; }
html.dark-mode.twk-sheets .twk-clip-pool { color: #9fb0c4; }

/* Avatar & Name entfallen – beides steht auf dem Zettel */
html.twk-sheets .task-card-avatar,
html.twk-sheets .task-card-avatar-placeholder,
html.twk-sheets .task-card-assignee,
html.twk-sheets .task-card-footer-name,
html.twk-sheets .task-card-footer-separator { display: none !important; }

/* ---------- Inhalt des Blattes: fester Aufbau von oben nach unten ----------
   1) Kopf mit Status + Titel   2) Beschreibung, mittig im freien Raum
   3) Frist   4) Fortschritt   5) Fußzeile am unteren Blattrand           */
html.twk-sheets .task-card-header {
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto;                        /* nimmt den freien Raum bis zur Frist */
    min-height: 0;
    overflow: hidden;                      /* langer Text bleibt im Blatt */
}

html.twk-sheets .task-card-body {
    padding: 0 !important;
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Wrapper um den Titel (Übersetzungsfunktion) auf volle Blattbreite */
html.twk-sheets .task-card-body > .translatable,
html.twk-sheets .task-card-body > div { width: 100%; min-width: 0; }

/* Statusfähnchen über dem Titel (steht als erstes Kind in der Karte) */
html.twk-sheets .task-card-block > .twk-status,
html.twk-sheets .task-card-block .twk-status,
html.twk-sheets .task-card-block .task-rev-badge {
    align-self: flex-start;
    order: -1;                             /* immer ganz oben, vor dem Titel */
    display: inline-block;
    margin: 0 0 calc(var(--twk-s) * .44) !important;
    padding: calc(var(--twk-s) * .15) calc(var(--twk-s) * .52);
    border-radius: calc(var(--twk-s) * .45);
    font-size: calc(var(--twk-s) * .78);
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}
html.twk-sheets .twk-status-overdue  { background: #fdeaea; color: #c02424; }
html.twk-sheets .twk-status-new      { background: #f3eefe; color: #7c4fd8; }
html.twk-sheets .twk-status-progress { background: #fdf3e2; color: #b06a00; }
html.twk-sheets .twk-status-revision { background: #e9f1fe; color: #2563c9; }
html.twk-sheets .twk-status-done     { background: #e6f7f0; color: #0c8a5c; }
html.dark-mode.twk-sheets .twk-status-overdue  { background: #3d1a1a; color: #e4837f; }
html.dark-mode.twk-sheets .twk-status-new      { background: #2a2140; color: #b49ae8; }
html.dark-mode.twk-sheets .twk-status-progress { background: #3a2d14; color: #d8a353; }
html.dark-mode.twk-sheets .twk-status-revision { background: #182a45; color: #7fa8e8; }
html.dark-mode.twk-sheets .twk-status-done     { background: #123b2d; color: #5ed2a2; }

html.twk-sheets .task-card-title {
    padding-right: 0 !important;           /* Platz für den Auslastungskreis entfällt hier */
    width: 100%;
    font-size: var(--twk-s) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;                 /* Titel höchstens drei Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Anhang-Symbol oben rechts auf dem Blatt */
html.twk-sheets .twk-attach {
    position: absolute;
    top: calc(var(--twk-s) * .6);
    right: calc(var(--twk-s) * .67);
    z-index: 4;
    font-size: calc(var(--twk-s) * .89);
    color: #64748b;
    transform: rotate(8deg);
    pointer-events: none;
}
html.dark-mode.twk-sheets .twk-attach { color: #94a3b8; }
/* Außerhalb des Blatt-Looks nicht anzeigen (Markup ist immer da) */
html:not(.twk-sheets) .twk-attach { display: none !important; }

/* Notiz-Markierung auf dem Blatt.
   Sie sitzt eine Symbolbreite LINKS von der Büroklammer. So stehen beide
   nebeneinander, wenn eine Aufgabe Notiz UND Anhang hat, und verdecken sich
   nie gegenseitig. Der feste Platz bedeutet auch: Die Klammer wandert nicht,
   je nachdem ob eine Notiz da ist. */
html.twk-sheets .twk-hasnote {
    position: absolute;
    top: calc(var(--twk-s) * .6);
    right: calc(var(--twk-s) * 1.95);
    z-index: 4;
    font-size: calc(var(--twk-s) * .85);
    color: #d97706;
    transform: rotate(-7deg);
    pointer-events: none;
}
html.dark-mode.twk-sheets .twk-hasnote { color: #fbbf24; }
/* Außerhalb des Blatt-Looks nicht anzeigen (Markup ist immer da) */
html:not(.twk-sheets) .twk-hasnote { display: none !important; }

/* Beschreibung: sitzt mittig im freien Raum zwischen Titel und Frist.
   Der gleiche Abstand oben und unten hält jedes Blatt ruhig — egal wie
   lang Titel oder Beschreibung sind. */
html.twk-sheets .task-card-desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: auto 0 !important;             /* gleicher Abstand oben wie unten */
    padding: calc(var(--twk-s) * .74) 0 !important;
    font-size: calc(var(--twk-s) * .85) !important;
    line-height: 1.45 !important;
    color: #6b7280 !important;
}
html.dark-mode.twk-sheets .task-card-desc { color: #8696a0 !important; }
/* Außerhalb des Blatt-Looks bleibt die Beschreibung unsichtbar (Markup ist immer da) */
html:not(.twk-sheets) .task-card-desc { display: none !important; }

/* ---------- Zutaten des Blattes ausblenden ----------
   Klebezettel, Büroklammer, Statusfähnchen sowie die Symbole für Anhang und
   Notiz liefert der Server in jede Karte (task_card_helpers.php). Sie gehören
   zum Papier; ohne Blatt-Look — also am Schreibtisch oder wenn der Look in den
   Einstellungen aus ist — bleiben sie weg, sonst stünden sie unformatiert
   mitten in der Karte.                                                     */
html:not(.twk-sheets) .twk-clip,
html:not(.twk-sheets) .twk-note,
html:not(.twk-sheets) .twk-status,
html:not(.twk-sheets) .twk-attach,
html:not(.twk-sheets) .twk-hasnote { display: none !important; }

/* Frist: genau eine Zeile über dem Fortschrittsbalken (Skript hebt sie dorthin) */
html.twk-sheets .task-sheet-deadline {
    flex: 0 0 auto;                      /* sitzt fest über dem Balken */
    margin-top: 0 !important;
    margin-bottom: calc(var(--twk-s) * .37) !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--twk-s) * .3) calc(var(--twk-s) * .44);
    font-size: calc(var(--twk-s) * .85) !important;
    line-height: 1.3 !important;
}
html.twk-sheets .task-sheet-deadline .task-card-deadline {
    display: flex; align-items: center; gap: calc(var(--twk-s) * .37);
    font-size: calc(var(--twk-s) * .85) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.twk-sheets .task-sheet-deadline .task-overdue-badge { font-size: calc(var(--twk-s) * .74) !important; }
/* Der Balken folgt direkt darunter, ohne eigenen Abstand nach oben */
html.twk-sheets .task-sheet-deadline + .task-progress-container { margin-top: 0 !important; padding-top: 0 !important; }

/* Fortschritt und Fußzeile sitzen unten am Blattrand.
   Der Bestand rückt sie um die Avatarbreite ein — die gibt es hier nicht. */
html.twk-sheets .task-progress-container {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
}
html.twk-sheets .task-progress-container::before { display: none !important; }

html.twk-sheets .task-card-footer {
    flex: 0 0 auto;
    margin: calc(var(--twk-s) * .59) 0 0 !important;
    padding-top: calc(var(--twk-s) * .59) !important;
    border-top: 1px dashed rgba(0, 0, 0, .12);
    font-size: calc(var(--twk-s) * .81) !important;
    flex-wrap: wrap;
    gap: calc(var(--twk-s) * .3) calc(var(--twk-s) * .59);
}
html.twk-sheets .task-progress-container + .task-card-footer { margin-top: calc(var(--twk-s) * .44) !important; }
html.dark-mode.twk-sheets .task-card-footer { border-top-color: rgba(255, 255, 255, .14); }

/* Auslastungs-Kreis stört auf dem schmalen Blatt */
html.twk-sheets .task-card-block .task-card-workload,
html.twk-sheets .task-card-block .workload-circle,
html.twk-sheets .task-card-block .workload-circle-wrapper { display: none !important; }

/* Der Stift-Knopf rückt in die untere Ecke */
html.twk-sheets .task-card-edit-btn {
    position: absolute !important;
    right: calc(var(--twk-s) * .44); bottom: calc(var(--twk-s) * .44);
    z-index: 3;
    font-size: calc(var(--twk-s) * .85);
}


/* ---------- Fortschritt: Balken und Schieberegler ----------
   Beide sind gleich schlank und gleich rund; der Schieberegler zeigt
   den erreichten Anteil in der Spur an (--twk-p setzt task-sheets.js). */
html.twk-sheets .task-progress-bar {
    display: flex !important;
    align-items: center;
    gap: calc(var(--twk-s) * .44);
    width: 100%;
    min-width: 0;
}

/* Nur-Lese-Balken */
html.twk-sheets .task-progress-track {
    flex: 1 1 auto;
    min-width: 0;
    height: calc(var(--twk-s) * .44) !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .09) !important;
    overflow: hidden;
}
html.twk-sheets .task-progress-fill { height: 100% !important; border-radius: 999px !important; }
html.dark-mode.twk-sheets .task-progress-track { background: rgba(255, 255, 255, .14) !important; }

/* Schieberegler (nur für die zuständige Person) */
html.twk-sheets .task-progress-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    height: calc(var(--twk-s) * .44) !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,
                #6486aa 0 var(--twk-p, 0%),
                rgba(0, 0, 0, .09) var(--twk-p, 0%) 100%) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08) !important;
    cursor: pointer;
    outline: none;
}
html.dark-mode.twk-sheets .task-progress-slider {
    background: linear-gradient(90deg,
                #7ea6cf 0 var(--twk-p, 0%),
                rgba(255, 255, 255, .16) var(--twk-p, 0%) 100%) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35) !important;
}

html.twk-sheets .task-progress-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: calc(var(--twk-s) * .96);
    height: calc(var(--twk-s) * .96);
    border-radius: 50%;
    background: #fff !important;
    border: calc(var(--twk-s) * .18) solid #6486aa;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !important;
    transition: transform .15s ease;
}
html.twk-sheets .task-progress-slider::-moz-range-thumb {
    width: calc(var(--twk-s) * .96);
    height: calc(var(--twk-s) * .96);
    border-radius: 50%;
    background: #fff !important;
    border: calc(var(--twk-s) * .18) solid #6486aa;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !important;
}
html.twk-sheets .task-progress-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
html.twk-sheets .task-progress-slider::-webkit-slider-thumb:active { transform: scale(1.05); cursor: grabbing; }
html.dark-mode.twk-sheets .task-progress-slider::-webkit-slider-thumb {
    background: #2b323c !important;
    border-color: #7ea6cf;
}
html.dark-mode.twk-sheets .task-progress-slider::-moz-range-thumb {
    background: #2b323c !important;
    border-color: #7ea6cf;
}

html.twk-sheets .task-progress-percent {
    flex: 0 0 auto;
    font-size: calc(var(--twk-s) * .78) !important;
    min-width: calc(var(--twk-s) * 2.3);
    text-align: right;
    white-space: nowrap;
}

/* Fußzeilen-Hinweis („Klicken zum Verwalten") klein halten */
html.twk-sheets .task-card-footer .task-card-footer-hint,
html.twk-sheets .task-card-footer > span:last-child { font-size: calc(var(--twk-s) * .78) !important; }


/* ---------- Die Umschalter zeigen im Blatt-Look 4, 5 oder 6 Blätter ----------
   view-list = 4, view-2col = 5, view-3col = 6 (siehe Raster oben).
   Die Chips im Bereichskopf entstehen an drei Stellen im Code (dashboard.php,
   get_zone_content.php und im Skript für Benutzer-Boxen). Statt alle drei zu
   ändern, wird das Spalten-Symbol hier ausgeblendet und durch die Zahl
   ersetzt — das greift überall.                                          */
html.twk-sheets .section-layout-btn[data-layout="list"] > i,
html.twk-sheets .section-layout-btn[data-layout="2col"] > i,
html.twk-sheets .section-layout-btn[data-layout="3col"] > i { display: none !important; }

html.twk-sheets .section-layout-btn[data-layout="list"]::after { content: "4"; }
html.twk-sheets .section-layout-btn[data-layout="2col"]::after { content: "5"; }
html.twk-sheets .section-layout-btn[data-layout="3col"]::after { content: "6"; }

html.twk-sheets .section-layout-btn[data-layout="list"]::after,
html.twk-sheets .section-layout-btn[data-layout="2col"]::after,
html.twk-sheets .section-layout-btn[data-layout="3col"]::after {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}


/* ---------- Mittlere Bildschirme: immer drei Blätter ---------- */
@media (min-width: 701px) and (max-width: 1024px) {
    html.twk-sheets .task-grid,
    html.twk-sheets .pool-task-grid,
    html.twk-sheets .task-grid.view-list,
    html.twk-sheets .task-grid.view-1col,
    html.twk-sheets .task-grid.view-2col,
    html.twk-sheets .task-grid.view-3col {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* ---------- Kleine Bildschirme: zwei Blätter nebeneinander ---------- */
@media (max-width: 700px) {
    html.twk-sheets .task-grid,
    html.twk-sheets .pool-task-grid,
    html.twk-sheets .task-grid.view-list,
    html.twk-sheets .task-grid.view-1col,
    html.twk-sheets .task-grid.view-2col,
    html.twk-sheets .task-grid.view-3col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px 14px !important;
        padding-bottom: 14px !important;
    }
    html.twk-sheets .task-card-block { --twk-s: 12px; }
    /* kleinere Blätter → weniger Luft nötig */
    html.twk-sheets .task-list-container {
        padding: 24px 6px 4px 14px !important;
    }
}