/*
 * openTimetool - Theme-Layer "Intranet"
 * ------------------------------------------------------------------
 * Haengt die openTimetool-Oberflaeche an die Optik des Intranets an
 * (Intranet-Farben: Akzent #FFCC33 / #EBB000, Grautone #DEDEDE #EEEEEE
 *  #B0B0B0, Text #666666, Links #606060, Schrift Arial).
 *
 * Diese Datei UBERSCHREIBT nur die dynamisch erzeugte style.css
 * (htdocs/modules/style.css.php) und wird in header.tpl NACH dieser
 * eingebunden. Ein Kern-Template muss dafuer nicht angefasst werden.
 *
 * Abschalten: in config-local.php  $config->themeCss = '';
 *
 * PHP-freie Datei -> kann direkt im Browser getestet werden.
 */

:root {
    --ott-accent:        #FFCC33;   /* Intranet-Gelb                     */
    --ott-accent-dark:   #EBB000;   /* Intranet-Hover-Gelb              */
    --ott-accent-light:  #FFF3CC;   /* helle Gelb-Flaeche (Markierung)  */
    --ott-text:          #666666;   /* Intranet-Textfarbe               */
    --ott-text-strong:   #333333;
    --ott-link:          #606060;   /* Intranet-Linkfarbe               */
    --ott-border:        #B0B0B0;
    --ott-border-light:  #DDDDDD;
    --ott-head:          #DEDEDE;
    --ott-alt:           #EEEEEE;
    --ott-bg:            #F7F7F7;
    --ott-card:          #FFFFFF;
    --ott-danger:        #C0392B;
    --ott-ok:            #2E7D32;
    --ott-radius:        4px;
    --ott-shadow:        0 1px 3px rgba(0, 0, 0, .12);

    /* Werte, die in der dunklen Ansicht andere Farben brauchen (Abschnitt 14) */
    --ott-input-bg:      #FFFFFF;   /* Eingabefelder                       */
    --ott-input-focus:   #FFFDF3;
    --ott-input-warn:    #FFF2F0;
    --ott-btn2:          #FFFFFF;   /* sekundare Buttons (Abbrechen, Reset) */
    --ott-warn-bg:       #FFF2F0;
    --ott-warn-border:   #E6B1A8;
    --ott-ok-bg:         #EAF6EC;
    --ott-ok-border:     #B7D9BF;
    --ott-cell:          #FFFFFF;   /* Zellen, die das Kern-CSS weiss macht */
    --ott-plain:         #666666;   /* span / font / li ohne eigene Klasse  */
    --ott-on-accent:     #3A3000;   /* Text auf gelbem Grund               */

    /* Icon-Filter (Abschnitt 17): hell unveraendert, dunkel: weiss        */
    --ott-icon-filter:     none;
    --ott-icon-filter-hi:  none;
}


/* ==============================================================
 * 1. Grundtypografie
 * ============================================================== */

body,
td,
input,
textarea,
select,
a,
b,
i,
font {
    font-family: Arial, "Segoe UI", Tahoma, Verdana, sans-serif;
    font-size: 13px;                       /* 10pt wie im Intranet */
}

body {
    background: var(--ott-bg);
    color: var(--ott-text);
    margin: 16px;
    line-height: 1.45;
}

a {
    color: var(--ott-link);
    text-decoration: none;
}

a:hover {
    color: var(--ott-accent-dark);
    text-decoration: underline;
}

b,
th,
.pageHeader > span {
    color: var(--ott-text-strong);
}

h1 {
    font-size: 18px;
    color: var(--ott-text-strong);
}

/* Fokus-Rahmen: fuer Tastatur-Bedienung unverzichtbar */
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: 2px solid var(--ott-accent-dark);
    outline-offset: 1px;
}


/* ==============================================================
 * 2. Karten / Tabellen
 * ============================================================== */

table.outline,
table.poutline {
    background: var(--ott-card);
    border: 1px solid var(--ott-border-light);
    border-radius: var(--ott-radius);
    box-shadow: var(--ott-shadow);
    border-collapse: separate;
    border-spacing: 0;
    max-width: 100%;
}

table.outline > thead > tr > th,
table.outline > tbody > tr > th,
table.outline > tfoot > tr > th,
table.outline > tr > th {
    background: var(--ott-head);
    color: var(--ott-text-strong);
    border: 0;
    border-bottom: 2px solid var(--ott-accent);
    padding: 6px 8px;
    font-weight: bold;
    text-align: left;
}

table.outline > tbody > tr > td,
table.outline > tfoot > tr > td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--ott-border-light);
    vertical-align: top;
}

/* letzte Zeile ohne Trennlinie, damit die runde Ecke sauber bleibt */
table.outline > tbody > tr:last-child > td,
table.outline > tfoot > tr:last-child > td {
    border-bottom: 0;
}

table.outline > tbody > tr:hover > td {
    background: var(--ott-alt);
}

/* aktuell bearbeitete / markierte Zeile */
.backgroundHighlight,
table.outline > tbody > tr > td.backgroundHighlight {
    background: var(--ott-accent-light);
}

.selected {
    background: var(--ott-accent) !important;
    color: var(--ott-on-accent) !important;
}

/* Kopfzeile bleibt beim Scrollen sichtbar (lange Buchungslisten).        */
/* Ebenen untereinander: Titelbalken 20 < Projektbaum 1000, Kalender 999  */
table.outline > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 20;
}

table.outline {
    background-clip: padding-box;
}

/* Kopfzeilen der Layout-Tabellen (Hauptmenue, Statuszeile) */
.layoutWithBgColor,
div.td.layoutWithBgColor {
    background: var(--ott-card) !important;
}

table.outline > tbody > tr > td[align="center"] {
    text-align: center;
}


/* ==============================================================
 * 3. Formulareingaben
 * ============================================================== */

input,
select,
textarea {
    background: var(--ott-input-bg);
    border: 1px solid var(--ott-border);
    border-radius: 3px;
    padding: 4px 6px;
    color: var(--ott-text);
    max-width: 100%;
    box-sizing: border-box;
}

input:hover,
select:hover,
textarea:hover {
    border-color: #8a8a8a;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--ott-accent-dark);
    background: var(--ott-input-focus);
}

textarea {
    min-width: 260px;
}

input.required,
select.required,
.required {
    border-color: var(--ott-danger);
}

input.warning,
select.warning {
    border: 2px dashed var(--ott-danger);
    background: var(--ott-input-warn);
}

/* Datum-/Uhrzeitfelder etwas breiter und auf gleicher Hohe */
input[name*="timestamp"] {
    padding: 5px 6px;
}


/* ==============================================================
 * 4. Buttons
 * ============================================================== */

input.button,
input[type="submit"],
input[type="button"],
a.button {
    background: var(--ott-accent);
    border: 1px solid var(--ott-accent-dark);
    border-radius: 3px;
    color: var(--ott-on-accent);
    font-weight: bold;
    padding: 5px 12px;
    margin: 2px 3px 2px 0;
    cursor: pointer;
    min-height: 26px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .10);
}

input.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.button:hover {
    background: var(--ott-accent-dark);
    border-color: #c99700;
    color: #fff;
    text-decoration: none;
}

input.button:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* Sekundaere Buttons (Abbrechen, Filter, Blaettern) */
input[value="Cancel"],
input[value="Abbrechen"],
input[value="reset"],
input[value="Reset"],
a.button.noAccent {
    background: var(--ott-btn2);
    border-color: var(--ott-border);
    color: var(--ott-text);
    font-weight: normal;
    box-shadow: none;
}

input[value="Cancel"]:hover,
input[value="Abbrechen"]:hover,
input[value="reset"]:hover,
input[value="Reset"]:hover,
a.button.noAccent:hover {
    background: var(--ott-alt);
    color: var(--ott-text-strong);
}

/* Loeschen-Buttons gefaerblich machen (entfernen.gif-Links) */
img.button {
    padding: 2px 4px;
}

/* "Weiter machen": eine Buchung als Vorlage uebernehmen (today.tpl) */
a.ottRepeatBtn {
    padding: 3px 8px;
    font-size: 11px;
    white-space: nowrap;
}

input.ottRepeatBtn {
    font-size: 12px;
}

a:hover img.button {
    filter: invert(28%) sepia(60%) saturate(1000%) hue-rotate(320deg);
}

#boldbutton {
    font-weight: bold;
}


/* ==============================================================
 * 5. Hauptnavigation
 * ============================================================== */

table.navi {
    background: var(--ott-card);
    border: 1px solid var(--ott-border-light);
    border-radius: var(--ott-radius);
    box-shadow: var(--ott-shadow);
    border-collapse: separate;
    border-spacing: 0;
}

table.navi th {
    background: var(--ott-head);
    border-bottom: 2px solid var(--ott-accent);
    color: var(--ott-text-strong);
    padding: 5px 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.naviTdWithLink,
a.navi,
a.naviSelected {
    background: var(--ott-card);
    color: var(--ott-text);
    padding: 4px 8px;
}

.naviTdWithLink:hover,
.naviTdWithLink[selected] {
    background: var(--ott-accent-light);
}

.naviTdWithLink:hover a,
.naviTdWithLink[selected] a {
    color: var(--ott-text-strong);
    border: 0;
    padding: 0;
    text-decoration: none;
}

.naviTdWithLink[selected] a {
    font-weight: bold;
    border-left: 3px solid var(--ott-accent-dark);
    padding-left: 5px;
}


/* ==============================================================
 * 6. Projektbaum (Auswahl)
 * ============================================================== */

/* Der Projektbaum wird per JS als absolut positionierte Ebene gebaut     */
/* (projectTree.js.tpl -> div.treeMenuDiv) und hat im Kern-CSS keinen      */
/* z-index. Der klebrige Titelbalken aus Abschnitt 2 (position: sticky,    */
/* z-index 20) wurde deshalb ueber die Liste gemalt: die Auswahl lag       */
/* "unter" dem Balken. 1000 legt sie ueber den Balken und auch ueber den   */
/* Kalender-Popup (popcalendar arbeitet mit z-index 999).                  */
.treeMenuDiv {
    position: absolute;
    z-index: 1000;
    background: var(--ott-card);
    border: 1px solid var(--ott-border);
    border-radius: var(--ott-radius);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
    padding: 8px 10px;
}

.treeMenu,
.treeMenuNotSelectable {
    padding: 2px 3px;
}

.treeMenu:hover,
.treeMenu:hover span {
    background: var(--ott-accent);
    color: var(--ott-on-accent);
}

.treeMenu span:hover {
    background: var(--ott-accent);
    color: var(--ott-on-accent);
}

.treeMenu[selected],
.treeMenu[selected] span,
.treeMenuSelected {
    background: var(--ott-accent-light);
    font-weight: bold;
}

.treeMenuDisabled,
.disabled {
    color: #9a9a9a;
}

.treeMenuMultiText {
    border: 1px solid var(--ott-border);
    background: var(--ott-card);
    padding: 3px 6px;
    margin: 2px;
}


/* ==============================================================
 * 7. Kopf- und Statuszeile
 * ============================================================== */

.pageHeader {
    background: var(--ott-head);
    border: 0;
    border-left: 4px solid var(--ott-accent);
    border-radius: var(--ott-radius);
    padding: 6px 10px;
}

.pageHeader > span {
    color: var(--ott-text-strong);
}

div.table.statusLine > div.tr > div.td {
    background: var(--ott-alt);
    border: 1px solid var(--ott-border-light);
    border-radius: 3px;
    padding: 3px 8px;
    color: var(--ott-text);
}

div.table.statusLine > div.tr > div.td b {
    color: var(--ott-text-strong);
}

/* "current project / current task"-Block im Kopf */
table.layoutWithBgColor td {
    padding: 2px 6px;
}


/* ==============================================================
 * 8. Meldungen
 * ============================================================== */

table.message,
th.message {
    background: var(--ott-head);
    color: var(--ott-text-strong);
    border: 1px solid var(--ott-border);
    border-radius: var(--ott-radius);
}

td.message {
    padding: 8px;
}

.warning {
    background: var(--ott-warn-bg);
    color: var(--ott-danger);
    border: 1px solid var(--ott-warn-border);
    border-radius: 3px;
    padding: 2px 4px;
}

.success {
    background: var(--ott-ok-bg);
    color: var(--ott-ok);
    border: 1px solid var(--ott-ok-border);
    border-radius: 3px;
    padding: 2px 4px;
}

.highlight {
    color: var(--ott-accent-dark);
}

.vpRedDotColor {
    color: var(--ott-danger);
}


/* ==============================================================
 * 9. Login
 * ============================================================== */

table.outline th[colspan] {
    background: var(--ott-head);
}

body .outline input[type="text"],
body .outline input[type="password"] {
    min-width: 200px;
}


/* ==============================================================
 * 10. Responsive (Handy / schmaler Bildschirm)
 * ============================================================== */

@media screen and (max-width: 1024px) {
    body {
        margin: 10px;
    }
}

@media screen and (max-width: 820px) {
    body {
        margin: 6px;
        font-size: 14px;
    }

    table.outline,
    table.navi {
        width: 100%;
    }

    /* breite Listen quetschen - horizontal scrollen ist besser als umbrechen */
    table.outline {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    table.outline > tbody > tr > td,
    table.outline > tfoot > tr > td,
    table.outline > thead > tr > th {
        padding: 6px 8px;
    }

    /* Kommentar- und Projektfelder duerfen umbrechen */
    table.outline > tbody > tr > td {
        white-space: normal;
        min-width: 90px;
    }

    input.button,
    input[type="submit"],
    input[type="button"],
    a.button {
        min-height: 34px;
        padding: 8px 14px;
        font-size: 14px;
    }

    input,
    select,
    textarea {
        font-size: 15px;
        padding: 7px 8px;
    }

    textarea {
        min-width: 90%;
    }

    table.outline > thead > tr > th {
        position: static;                     /* sticky bringt hier nichts */
    }
}

/* Mobile-Ansicht von openTimetool (body-Klasse kommt aus header.php) */
body.mobile {
    margin: 4px !important;
}

body.mobile table.outline {
    display: block;
    overflow-x: auto;
}


/* ==============================================================
 * 11. Druck (Ansicht / Export-Listen)
 * ============================================================== */

@media print {
    body {
        background: #fff;
        margin: 0;
        font-size: 11px;
    }

    table.outline,
    table.navi {
        box-shadow: none;
        border: 1px solid #999;
    }

    table.outline > thead > tr > th {
        background: #e8e8e8 !important;
        position: static;
    }

    input.button,
    input[type="submit"],
    input[type="button"],
    a.button,
    .mdSwitch,
    img.button {
        display: none !important;
    }

    a {
        color: #000;
    }
}


/* ==============================================================
 * 12. Barrierefreiheit
 * ============================================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Kontrast der gelben Akzente auf weiss ist fuer Text zu gering ->
   Text auf gelb immer dunkel */
input.button,
input[type="submit"],
input[type="button"],
a.button,
.treeMenu:hover span,
.naviTdWithLink:hover {
    text-shadow: none;
}


/* ==============================================================
 * 13. Kopf- und Fussbereich im Intranet-Stil
 * ==============================================================
 */

/* gelbe Akzentleiste oben, wie die gelbe Knopfreihe im Intranet */
thead > tr > td.layoutWithBgColor,
thead > tr > th.layoutWithBgColor {
    border-top: 4px solid var(--ott-accent);
    border-radius: var(--ott-radius) var(--ott-radius) 0 0;
}

tfoot > tr > td.layoutWithBgColor {
    border-bottom: 3px solid var(--ott-accent);
    border-radius: 0 0 var(--ott-radius) var(--ott-radius);
}

/* "Hello ...", Logo, Datum/Projekt im Kopf */
table.layoutWithBgColor {
    padding: 4px 0;
}

table.layoutWithBgColor a {
    color: var(--ott-link);
}

/* Umsteller Mobile/Desktop-Ansicht */
.mdSwitch,
.mdSwitch a {
    font-size: 11px;
    color: var(--ott-link);
}

.mdSwitch:hover {
    background: var(--ott-accent-light);
    border-radius: 3px;
}

/* Logo oben rechts, ersetzt tt_logo.gif (headline.tpl, gebaut in init.php) */
.ottLogo {
    /* das Logo ist 800 x 75 px: Hoehe begrenzt, Breite folgt dem Seitenverhaeltnis */
    max-height: 56px;
    width: auto;
    border: 0;
    vertical-align: middle;
}

table.layoutWithBgColor td[align="right"] {
    padding-right: 10px;
}

@media (max-width: 1200px) {
    .ottLogo {
        max-height: 44px;
    }
}

@media (max-width: 820px) {
    .ottLogo {
        max-height: 30px;
    }
}

/* "Zurueck ins Intranet" (footer.tpl, kommt aus header.php) */
.ottIntranetLink {
    margin-top: 18px;
    padding: 6px 10px;
    border-top: 2px solid var(--ott-accent);
    background: var(--ott-card);
    border-radius: var(--ott-radius);
    font-size: 12px;
}

.ottIntranetLink a {
    color: var(--ott-text-strong);
    font-weight: bold;
}

.ottIntranetLink a:hover {
    color: var(--ott-accent-dark);
}

@media print {
    .ottIntranetLink {
        display: none;
    }

    .ottDarkSwitch {
        display: none;
    }

    /* Drucken bleibt hell, auch wenn die Ansicht dunkel ist. */
    /* Die drei Selektoren noetigen, damit dies nach den dunkeln Regeln */
    /* steht und sie deshalb ueberdeckt.                                */
    body,
    body.ottDark,
    body:not(.ottLight) {
        color-scheme: light;
        --ott-accent:       #FFCC33;
        --ott-accent-dark:  #EBB000;
        --ott-accent-light: #F5F0DC;
        --ott-text:         #222222;
        --ott-text-strong:  #000000;
        --ott-link:         #000000;
        --ott-border:       #999999;
        --ott-border-light: #CCCCCC;
        --ott-head:         #E8E8E8;
        --ott-alt:          #F4F4F4;
        --ott-bg:           #FFFFFF;
        --ott-card:         #FFFFFF;
        --ott-danger:       #C0392B;
        --ott-ok:           #2E7D32;
        --ott-shadow:       none;
        --ott-input-bg:     #FFFFFF;
        --ott-input-focus:  #FFFDF3;
        --ott-input-warn:   #FFF2F0;
        --ott-btn2:         #FFFFFF;
        --ott-warn-bg:      #FFF2F0;
        --ott-warn-border:  #E6B1A8;
        --ott-ok-bg:        #EAF6EC;
        --ott-ok-border:    #B7D9BF;
        --ott-cell:         #FFFFFF;
        --ott-plain:        #222222;
        --ott-on-accent:    #000000;
    }
}


/* ==============================================================
 * 14. Dunkle Darstellung
 * ==============================================================
 * body.ottDark  : Nutzer hat "dunkel" gewaehlt   (header.php)
 * body.ottLight : Nutzer hat "hell" gewaehlt     (header.php)
 * ohne Klasse   : Systemeinstellung entscheidet  (prefers-color-scheme)
 *
 * Alle Farben stehen in Variablen, deshalb enthaelt die dunkle Ansicht
 * nur die neuen Werte; die Regeln weiter oben muessen nicht ein zweites
 * Mal geschrieben werden. Umstellen: ?dark=1 / ?dark=0 / ?dark=auto oder
 * $config->darkMode in config-local.php ('auto', 'on', 'off').
 * ==============================================================
 */

body.ottDark {
    color-scheme: dark;

    --ott-accent:        #FFCC33;
    --ott-accent-dark:   #E8B217;
    --ott-accent-light:  #3A3115;   /* dunkle Gelb-Flaeche statt hellgelb */
    --ott-text:          #C8C8C8;
    --ott-text-strong:   #F2F2F2;
    --ott-link:          #D8D8D8;
    --ott-border:        #5A5A5A;
    --ott-border-light:  #3A3A3A;
    --ott-head:          #2E2E2E;
    --ott-alt:           #262626;
    --ott-bg:            #1E1E1E;
    --ott-card:          #242424;
    --ott-danger:        #E8866F;
    --ott-ok:            #86C48A;
    --ott-shadow:        0 1px 3px rgba(0, 0, 0, .6);

    --ott-input-bg:      #2A2A2A;
    --ott-input-focus:   #332B12;
    --ott-input-warn:    #3B2320;
    --ott-btn2:          #2A2A2A;
    --ott-warn-bg:       #3B2320;
    --ott-warn-border:   #6B3A32;
    --ott-ok-bg:         #22301F;
    --ott-ok-border:     #3C5A3E;
    --ott-cell:          transparent;
    --ott-plain:         #C8C8C8;
    --ott-on-accent:     #241F00;

    /* Symbole (Abschnitt 17): schwarze und rote PNGs werden weiss.      */
    /* Loeschen verliert dabei sein Rot - auf dunklem Grund waere es     */
    /* zu schwach; wer Rot behalten will:                                */
    /*   invert(1) hue-rotate(180deg) saturate(1.6)                      */
    --ott-icon-filter:     brightness(0) invert(1);
    --ott-icon-filter-hi:  brightness(0);
}

/* Systemeinstellung "dunkel", solange der Nutzer nicht explizit "hell" */
/* gewaehlt hat (body-Klasse ottLight kommt aus header.php)             */
@media (prefers-color-scheme: dark) {
    body:not(.ottLight) {
        color-scheme: dark;

        --ott-accent:        #FFCC33;
        --ott-accent-dark:   #E8B217;
        --ott-accent-light:  #3A3115;
        --ott-text:          #C8C8C8;
        --ott-text-strong:   #F2F2F2;
        --ott-link:          #D8D8D8;
        --ott-border:        #5A5A5A;
        --ott-border-light:  #3A3A3A;
        --ott-head:          #2E2E2E;
        --ott-alt:           #262626;
        --ott-bg:            #1E1E1E;
        --ott-card:          #242424;
        --ott-danger:        #E8866F;
        --ott-ok:            #86C48A;
        --ott-shadow:        0 1px 3px rgba(0, 0, 0, .6);

        --ott-input-bg:      #2A2A2A;
        --ott-input-focus:   #332B12;
        --ott-input-warn:    #3B2320;
        --ott-btn2:          #2A2A2A;
        --ott-warn-bg:       #3B2320;
        --ott-warn-border:   #6B3A32;
        --ott-ok-bg:         #22301F;
        --ott-ok-border:     #3C5A3E;
        --ott-cell:          transparent;
        --ott-plain:         #C8C8C8;
        --ott-on-accent:     #241F00;

        /* Symbole (Abschnitt 17): schwarze und rote PNGs werden weiss    */
        --ott-icon-filter:     brightness(0) invert(1);
        --ott-icon-filter-hi:  brightness(0);
    }
}

/* Das Kern-CSS (style.css.tpl) setzt Tabellen, Zellen und Texte hart auf */
/* weiss bzw. dunkelgrau. Die folgenden Regeln gelten in beiden Ansichten */
/* und holen diese Werte auf die Variablen zurueck. :not([class]) stellt  */
/* sicher, dass alles mit eigener Klasse (Kopfzeilen, Navigation, Baum)   */
/* so bleibt, wie es die Abschnitte 2 bis 8 vorsehen.                     */
body table:not([class]),
body div.table:not([class]),
body td:not([class]),
body div.td:not([class]) {
    background-color: var(--ott-cell);
}

body span:not([class]),
body font,
body li {
    color: var(--ott-plain);
}

body .header,
body div.th {
    background: var(--ott-head);
    color: var(--ott-text-strong);
}

body .outlineOverlay {
    background: var(--ott-card);
    border-color: var(--ott-border);
    color: var(--ott-text);
}

body .outlineOverlay td,
body .outlineOverlay table {
    background: var(--ott-card);
}

body .noStyle,
body a.noStyle:hover {
    background-color: transparent;
    color: var(--ott-text);
}

/* Tabellenkoepfe ohne eigene Klasse: das Kern-CSS schreibt th hart auf    */
/* #EEEEEE - das war die auffaelligste weisse Zeile in der dunklen Ansicht */
body th:not([class]) {
    background-color: var(--ott-head);
    color: var(--ott-text-strong);
}

/* Zellen, die im Kern-CSS nur ueber die td-Regel weiss waren             */
body td.pButtons,
body td.layout {
    background-color: var(--ott-card);
}

body span.content {
    color: var(--ott-plain);
}

body .treeMenuNotSelectable,
body div.treeMenuMultiText:hover {
    color: var(--ott-text);
}

/* Kalender-Popup (external/calendar/popcalendar.css.php): diese Datei      */
/* arbeitet ausschliesslich mit hellen Hex-Werten, hier werden sie auf die */
/* Theme-Variablen umgestellt (gilt in heller und dunkler Ansicht).        */
body .table-style,
body .title-style,
body .title-background-style,
body .body-style,
body .today-style,
body .dropdown-normal-style {
    background-color: var(--ott-card);
    color: var(--ott-text);
    border-color: var(--ott-border);
}

body .dropdown-style {
    background-color: var(--ott-head);
    color: var(--ott-text);
    border-color: var(--ott-border);
}

body .dropdown-select-style {
    background-color: var(--ott-accent);
    color: var(--ott-on-accent);
    border-color: var(--ott-accent-dark);
}

body .title-control-normal-style { border-color: var(--ott-border); }
body .title-control-select-style { border-color: var(--ott-accent-dark); }
body .selected-day-style         { border-color: var(--ott-accent-dark); }
body .current-day-style          { color: var(--ott-accent-dark); }
body .normal-day-style           { color: var(--ott-text); }
body .end-of-weekday-style       { color: var(--ott-plain); }
body .holiday-style {
    background-color: var(--ott-accent-light);
    color: var(--ott-text-strong);
}
body .weeknumber-div-style {
    background-color: var(--ott-alt);
    color: var(--ott-plain);
}


/* ==============================================================
 * 15. Umsteller "Darstellung" am Seitenfuss (footer.tpl)
 * ==============================================================
 */

.ottDarkSwitch {
    margin-top: 14px;
    padding: 4px 10px;
    font-size: 11px;
    color: var(--ott-plain);
}

.ottDarkSwitch a {
    color: var(--ott-link);
    padding: 2px 5px;
    border-radius: 3px;
}

.ottDarkSwitch a:hover {
    background: var(--ott-accent-light);
    color: var(--ott-text-strong);
    text-decoration: none;
}

.ottDarkSwitch a.selected {
    background: var(--ott-alt);
    color: var(--ott-text-strong);
    font-weight: bold;
}

.ottDarkSwitch a.selected:hover {
    background: var(--ott-accent);
    color: var(--ott-on-accent);
}


/* ==============================================================
 * 16. Sitzungsende in der Fusszeile (main.tpl)
 * ==============================================================
 * Der Countdown stand bisher nur als Text in der Fusszeile, die Seite hat
 * sich nach Ablauf selbst neu geladen (meta refresh) - ohne Warnung und
 * mit verlorenen Eingaben. Jetzt: ab $config->sessionWarnSeconds wird die
 * Zeile hervorgehoben und main.tpl haengt den Button 'weiter arbeiten'
 * an. Doku: USABILITY-BACKLOG.md, Punkt U-01
 * ==============================================================
 */

#logoutText {
    white-space: nowrap;
}

#logoutText.ottWarn {
    background-color: var(--ott-warn-bg);
    border: 1px solid var(--ott-warn-border);
    border-radius: 4px;
    padding: 3px 8px;
    color: var(--ott-text-strong);
}

#ottExtendSession {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 10px;
    border: 1px solid var(--ott-accent-dark);
    border-radius: 4px;
    background-color: var(--ott-accent);
    color: var(--ott-on-accent);
    font-weight: bold;
    text-decoration: none;
}

#ottExtendSession:hover,
#ottExtendSession:focus {
    background-color: var(--ott-accent-dark);
    color: var(--ott-on-accent);
    outline: none;
}

@media print {
    #logoutText,
    #ottExtendSession {
        display: none;
    }
}


/* ==============================================================
 * 17. Icon-Buttons (Aendern / Loeschen / Hilfe) und Menue-Punkte
 * ==============================================================
 * Die 16-px-GIFs (edit.gif, remove.gif, help.gif) sind durch die
 * icons8-PNGs in htdocs/media/image ersetzt. Gebaut werden sie in
 * common/macro/common.mcr (edit / remove / help) und in
 * common/js/projectTreeTeam*.js.php (Projektbaum). Einheitliche
 * Bauart: 30 x 30 px aussen, 2 px Eckradius, das Bild darin 24 x 24.
 * Doku: USABILITY-BACKLOG.md, Punkt U-09
 * ==============================================================
 */

a.ottIconBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;                     /* Aussenmass                     */
    height: 30px;
    box-sizing: border-box;          /* Rand zaehlt mit in die 30 px   */
    padding: 0;
    margin: 1px 4px 1px 0;
    border: 1px solid var(--ott-border);
    border-radius: 2px;              /* gewuenschter Eckradius         */
    background-color: var(--ott-card);
    vertical-align: middle;
    line-height: 1;
}

a.ottIconBtn img {
    width: 24px;                     /* Bild 24 x 24 in 30 x 30        */
    height: 24px;
    border: 0;
    filter: var(--ott-icon-filter);  /* dunkle Ansicht: weisse Symbole */
}

/* Hover und Fokus: gelber Grund, deshalb wieder schwarz - weiss auf    */
/* Gelb haette zu wenig Kontrast. In der hellen Ansicht bleibt alles     */
/* unveraendert (die Filter stehen auf none).                            */
a.ottIconBtn:hover img,
a.ottIconBtn:focus img {
    filter: var(--ott-icon-filter-hi);
}

a.ottIconBtn:hover,
a.ottIconBtn:focus {
    background-color: var(--ott-accent);
    border-color: var(--ott-accent-dark);
    outline: none;
}

a.ottIconBtn:active {
    transform: translateY(1px);
}

/* Hilfesymbol in Tabellenkopfzeilen ('Messages', Projekteigenschaften): */
/* ohne eigenen Aussenabstand, damit die Zeile nicht hoeher wird        */
th a.ottIconBtn,
.pageHeader a.ottIconBtn {
    margin: 0 4px 0 0;
    vertical-align: text-bottom;
}

/* Die Punkte vor den Menuepunkten (navigation.tpl, redSquare()):     */
/* bisher redDot.gif (rot), jetzt ein gelber Punkt aus CSS - passt   */
/* sich der hellen und der dunklen Ansicht automatisch an.            */
.naviTdWithLink .naviDot,
.naviDot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 5px 0 1px;
    border-radius: 50%;
    background-color: var(--ott-accent);
    border: 1px solid var(--ott-accent-dark);
    vertical-align: middle;
}

.naviTdWithLink:hover .naviDot,
.naviTdWithLink[selected] .naviDot {
    background-color: var(--ott-accent-dark);
    border-color: var(--ott-accent-dark);
}

@media print {
    a.ottIconBtn,
    .naviDot {
        display: none !important;
    }

    /* Falls ein Filter bleibt: Drucken ist und bleibt hell             */
    :root {
        --ott-icon-filter:    none;
        --ott-icon-filter-hi: none;
    }
}


/* ==============================================================
 * 18. Multi-Log: Kuerzel-Legende und Rueckmeldung
 * ==============================================================
 * time/multi.tpl zeigt unter der Buchungstabelle die Kuerzel aller
 * Projekte und Tasks, die der angemeldete Benutzer wuehlen kann,
 * und darunter den Satz, wenn ein Kuerzel nicht passt. Die Farben
 * kommen wieder aus den Variablen, dunkle Ansicht also automatisch.
 * Doku: UI-MODERNISIERUNG.md 2.10.7, USABILITY-BACKLOG.md U-21
 * ============================================================== */

.ottKuerzel {
    margin: 18px 0 0;
    padding: 10px 12px;
    background: var(--ott-card);
    border: 1px solid var(--ott-border-light);
    border-radius: var(--ott-radius);
    box-shadow: var(--ott-shadow);
}

.ottKuerzel h3 {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--ott-text-strong);
}

.ottKuerzel p {
    margin: 0 0 10px;
}

/* zwei Tabellen nebeneinander, auf schmalen Bildschirmen untereinander */
.ottKuerzelCols {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.ottKuerzelCols table.outline {
    flex: 1 1 300px;
    margin: 0 0 10px;
}

/* Kopfzeile der Legende bleibt ortlich, sie muss nicht mitscrollen    */
.ottKuerzelCols table.outline > thead > tr > th {
    position: static;
}

/* Achtung: das Kern-CSS (style.css.tpl) setzt JEDES td auf weiss.      */
/* Abschnitt 9 faengt das nur fuer td OHNE eigene Klasse ab (not([class])) */
/* - die Kuerzel- und Nr-Spalten hier haben aber eine Klasse und waren  */
/* darum in der dunklen Ansicht weiss. var(--ott-cell): hell weiss,      */
/* dunkel durchsichtig, damit die Karte der Legende durchscheint.       */
.ottKuerzel table.outline > tbody > tr > td {
    background-color: var(--ott-cell);
}

/* Hover bleibt erhalten (gleiche Farbe wie in den uebrigen Tabellen)   */
.ottKuerzel table.outline > tbody > tr:hover > td {
    background-color: var(--ott-alt);
}

.ottKuerzel code,
.ottKuerzelCode {
    font-family: Consolas, "Courier New", monospace;
    color: var(--ott-text-strong);
    white-space: nowrap;
}

.ottKuerzelCode {
    font-weight: bold;
}

.ottKuerzel table.outline > tbody > tr > td.ottKuerzelNr {
    text-align: right;
    width: 4em;
    white-space: nowrap;
}

.ottKuerzelOrdner {
    color: var(--ott-text);
    font-style: italic;
}

.ottKuerzelHinweis {
    margin: 4px 0 0;
    font-size: 12px;
}

/* Hinweis unter der Tabelle: leer unsichtbar, sonst als Warnung       */
.ottKuerzelHint {
    margin: 12px 0 0;
    padding: 0;
}

.ottKuerzelHintOn {
    padding: 6px 8px;
    background: var(--ott-warn-bg);
    border: 1px solid var(--ott-warn-border);
    border-radius: var(--ott-radius);
    color: var(--ott-danger);
}

@media print {
    .ottKuerzel,
    .ottKuerzelHint {
        display: none;
    }
}