/* ======================================================
   1. Grundlayout & Reset
   ====================================================== */
html, body { 
    left: 0;
    top: 0;  
    margin: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: absolute; 
    background-color: #FFFFFF;
} 

div {
    width: 95vw;
    left: 2.5vw;
    top: 16vh;
    border-style: none;
    position: absolute;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0;
}

button {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; 
    touch-action: manipulation; 
}

/* Formularelemente */
input[type="time"]::-webkit-clear-button { display: none; }   
input[type='range'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: gray;
    position: absolute;
}
input[type='text'], 
input[type='password'] {
    text-align: center;
}

/* ======================================================
   2. Absolute Koordinaten Grid (Raster)
   ====================================================== */
.c0  { left: 2.5vw; }
.c1  { left: 8.5vw; }
.c2  { left: 14.5vw; }
.c3  { left: 20.5vw; }
.c4  { left: 26.5vw; }
.c5  { left: 32.5vw; }
.c6  { left: 38.5vw; }
.c7  { left: 44.5vw; }
.c8  { left: 50.5vw; }
.c9  { left: 56.5vw; }
.c10 { left: 62.5vw; }
.c11 { left: 68.5vw; }
.c12 { left: 74.5vw; }
.c13 { left: 80.5vw; } 
.c14 { left: 86.5vw; } 
.c15 { left: 92.5vw; } 

.r0  { top: 4vh; }
.r1  { top: 10vh; }
.r2  { top: 16vh; }
.r3  { top: 22vh; }
.r4  { top: 28vh; }
.r5  { top: 34vh; }
.r6  { top: 40vh; }
.r7  { top: 46vh; }
.r8  { top: 52vh; }
.r9  { top: 58vh; }
.r10 { top: 64vh; }
.r11 { top: 70vh; }
.r12 { top: 76vh; }
.r13 { top: 82vh; }
.r14 { top: 88vh; }

/* ======================================================
   3. Buttons & Element-Breiten
   ====================================================== */
.days, 
[class^="set"] {
    height: 8vh;
    border-style: none;
    position: absolute;
}

.days { width: 11vw; padding-left: 5vh; }
.set1 { width: 5vw; }
.set2 { width: 11vw; }
.set3 { width: 17vw; }
.set4 { width: 23vw; }
.set5 { width: 29vw; }           
.set6 { width: 35vw; }
.set7 { width: 41vw; }
.set8 { width: 47vw; }
.set9 { width: 53vw; }
.set10 { width: 59vw; }
.set11 { width: 55vw; }
.set12 { width: 71vw; }
.set13 { width: 77vw; }

.fw, .fb {   
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 3.6vmin;
    text-decoration: none;
    border-radius: 2vh;
    display: inline-block;
}
.fw { color: white; }
.fb { color: black; }

/* ======================================================
   4. Icon-Hintergründe (.set-*)
   ====================================================== */
[class^="set-"] {
    background-size: 6vh 6vh;
    background-repeat: no-repeat;
    background-position: 1vh 1vh;
}
.set-off    { background-image: url(icon/set-off.gif?v=2018); }
.set-lock   { background-image: url(icon/set-lock.gif?v=2018); }
.set-time   { background-image: url(icon/set-time.gif?v=2018); }
.set-help   { background-image: url(icon/set-help.gif?v=2018); }
.set-info   { background-image: url(icon/set-info.gif?v=2018); }
.set-ok     { background-image: url(icon/set-ok.gif?v=2024); }
.set-save   { background-image: url(icon/set-save.gif?v=2018); }
.set-alias  { background-image: url(icon/set-alias.gif?v=2018); } 
.set-data   { background-image: url(icon/set-data.gif?v=2018); } 
.set-pc     { background-image: url(icon/set-pc.gif?v=2018); }
.set-valide { background-image: url(icon/set-valide.gif?v=2018); }
.set-mobil  { background-image: url(icon/set-mobil.gif?v=2018); }

/* ======================================================
   5. Farb-Klassen
   ====================================================== */
.wd { background-color: #44c767; }
.sa { background-color: #ffd700; }    
.so { background-color: #fe1a00; }
.vd { background-color: #663399; }    
.hd { background-color: #c71818; }
.on { background-color: #007dc1; }
.no { background-color: #bddbff; }
.of { background-color: #dbe6c4; }
.in { background-color: #eeeeee; }

/* ======================================================
   6. Standardlisten & Höhen
   ====================================================== */
.list { top: 78vh; height: 8vh; }
.day  { width: 100%; }

.day td, .day th { text-align: center; font-size: 1.8vmin; }
.list td { text-align: center; font-size: 2vmin; }
.summe td { text-align: right; width: 3.2vw; white-space: normal; font-size: 2vmin; }

.h12 { height: 60vh; }
.h14 { height: 69vh; }

/* ======================================================
   7. Vergleichsansicht (Tabellenlayout)
   ====================================================== */
.vers {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: none;
}

.vers #liste-wrapper {
    position: absolute;
    inset: 0;
    overflow: auto;
    padding: 0;
    box-sizing: border-box;
}

.vers .compare-table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: 0.9rem;
    background: white;
}

.vers .compare-table thead th {
    position: sticky;
    top: 0;
    background: #ccc;
    z-index: 10 !important;
    padding: 0.5rem 0.8rem;
    text-align: left;
    white-space: nowrap;
}

/* Fixierte Spaltensteuerung */
.vers .compare-table th:nth-child(1),
.vers .compare-table td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 9 !important;
    background: #f8f9fa;
}

/* 2. Spalte ausgeblendet */
.vers .compare-table th:nth-child(2),
.vers .compare-table td:nth-child(2) {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    visibility: collapse !important;
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    background: transparent !important;
}

.vers .compare-table th:nth-child(3),
.vers .compare-table td:nth-child(3) {
    position: sticky;
    left: 10rem;
    z-index: 9 !important;
    background: #fff;
}

.vers .compare-table th:nth-child(4),
.vers .compare-table td:nth-child(4) {
    position: sticky;
    left: 22rem;
    z-index: 9 !important;
    background: #fff;
}

.vers .compare-table th:last-child,
.vers .compare-table td:last-child {
    position: sticky;
    right: 0;
    background: #fafafa;
    z-index: 9 !important;
    font-weight: bold;
}

.vers .compare-table thead th:nth-child(1),
.vers .compare-table thead th:nth-child(3),
.vers .compare-table thead th:nth-child(4),
.vers .compare-table thead th:last-child {
    z-index: 11 !important;
}

.vers .compare-table th,
.vers .compare-table td {
    border-bottom: 1px solid #ddd;
    padding: 0.3rem 0.6rem;
    white-space: nowrap;
    text-align: right;
}

.vers .compare-table td:first-child {
    text-align: left;
    font-weight: bold;
}

/* Status- & Fehlerfarben */
.vers .compare-table td.az-cell { background: #f2f2f2; }
.vers .compare-table td.error { background-color: #ffd6d6; }
td.error-soll { background-color: #ff8080 !important; color: #000; font-weight: bold; }
td.messing { background-color: #fff8b0; }

.vers .compare-table tr:has(td.error) td:nth-child(4) {
    color: #f22;
    font-weight: bolder;
}

/* Hover- & Scrollbar */
.vers .compare-table tbody tr:hover { background: #f5f5f5; }
.vers .compare-table td[title]:hover { cursor: help; background: #eef; }

.vers #liste-wrapper::-webkit-scrollbar { height: 0.8rem; width: 0.8rem; }
.vers #liste-wrapper::-webkit-scrollbar-thumb { background: #bbb; border-radius: 0.4rem; }
.vers #liste-wrapper::-webkit-scrollbar-thumb:hover { background: #888; }

/* Filter Dropdown */
#taetigkeitFilter {
    position: fixed;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    padding: 4px 6px;
    z-index: 9999;
}
#taetigkeitFilter select { width: 160px; font-size: 0.9rem; padding: 2px; }

/* ======================================================
   8. Validation Tabelle (Monatsübersicht)
   ====================================================== */
.validation_table {
    border-collapse: collapse;
    width: max-content;
    font-size: 1rem;
}

.validation_table thead th {
    position: sticky;
    top: 0;
    background: #f0f0f0;
    z-index: 10;
    padding: 4px 6px;
    text-align: center;
    border: 1px solid #ccc;
}

.validation_table th.col_id,
.validation_table td.col_id {
    position: sticky;
    left: 0;
    background: #f9f9f9;
    z-index: 9;
    text-align: left;
    padding: 4px 6px;
    border: 1px solid #ccc;
}

.validation_table th.col_name,
.validation_table td.col_name {
    position: sticky;
    left: calc(var(--col_id_width, 50px));
    background: #f9f9f9;
    z-index: 9;
    text-align: left;
    padding: 4px 6px;
    border: 1px solid #ccc;
}

.validation_table th:not(.col_id):not(.col_name),
.validation_table td:not(.col_id):not(.col_name) {
    text-align: center;
    padding: 4px;
    border: 4px solid transparent;
    margin: 2px;
}

.day_ok { border: 4px solid green; }
.day_error { border: 4px solid red; color: white; font-weight: bold; text-align: center; }

/* ======================================================
   9. VMA Matrix (Worksite-Scoping gem. Punkt 5)
   ====================================================== */

.worksite .vma-matrix-table {
    border-collapse: separate !important;
    border-spacing: 0;
    width: max-content;
    background: #ffffff;
    font-size: 0.85rem;
}

/* ------------------------------------------------------
   HEADER
   ------------------------------------------------------ */
.worksite .vma-matrix-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background-color: #e0e0e0 !important;
    border-bottom: 2px solid #ccc;
    height: 60px;
    vertical-align: bottom;
    padding: 0;
}

/* Punkt 1: Samstag & Sonntag Header-Farben */
/* Punkt 1: Samstag, Sonntag & Feiertag Header-Farben */
.worksite .vma-matrix-table thead th.sa-head       { background-color: #ffe6b3 !important; }
.worksite .vma-matrix-table thead th.so-head       { background-color: #ffcccc !important; }
.worksite .vma-matrix-table thead th.feiertag-head { background-color: #f8d7da !important; color: #721c24; cursor: help; }

.worksite .vma-matrix-table thead th.sticky-head-left {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 30 !important;
    background-color: #f0f0f0 !important;
    text-align: left;
    padding: 8px !important;
    border-right: 1px solid #ccc;
}

.worksite .vma-matrix-table thead th.sticky-head-right {
    position: sticky !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 30 !important;
    background-color: #f0f0f0 !important;
    padding: 8px !important;
    border-left: 1px solid #ccc;
}

.worksite .vma-matrix-table thead th.day-head-rotate {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    z-index: 20 !important;
}

.worksite .vma-matrix-table th.day-head-rotate div.rot-wrap {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 22px !important;
    height: 55px !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.worksite .vma-matrix-table th.day-head-rotate div.rot-wrap span {
    transform: rotate(-90deg);
    white-space: nowrap;
    font-size: 0.7rem;
    font-weight: bold;
    display: inline-block;
    line-height: 1;
}

/* ------------------------------------------------------
   BODY: Sticky-Spalten & Gruppenzeilen
   ------------------------------------------------------ */
.worksite .vma-matrix-table td.sticky-col-left {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: #ffffff;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #eee;
}

.worksite .vma-matrix-table td.sticky-col-right {
    position: sticky;
    right: 0;
    z-index: 10;
    background-color: #fafafa;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #eee;
    text-align: center;
}

.worksite .vma-matrix-table tr.user-header-row td.user-name-cell {
    background-color: #e9ecef !important;
    padding: 6px 10px !important;
    border-top: 2px solid #bbb;
    border-bottom: 1px solid #bbb;
}

.worksite .vma-matrix-table tr.user-header-row td.user-name-cell .sticky-name-inner {
    position: sticky;
    left: 10px;
    display: inline-block;
    font-weight: bold;
    font-size: 0.95rem;
    color: #212529;
    white-space: nowrap;
}

.worksite .vma-matrix-table td.job-name-cell {
    padding-left: 1.2rem !important;
    font-family: monospace;
    font-size: 0.85rem;
    color: #333;
    font-weight: bold;
}

/* ------------------------------------------------------
   TAG-ZELLEN & FARBEN (Punkte 3 & 4)
   ------------------------------------------------------ */
.worksite .vma-matrix-table td.vma-cell {
    width: 22px;
    min-width: 22px;
    max-width: 22px;
    height: 24px;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle;
    font-size: 0.75rem;
    font-weight: bold;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
}


.worksite .vma-over   { background-color: #fe1a00 !important; color: #ffffff; }
.worksite .vma-empty  { background-color: #f9f9f9 !important; color: transparent; }

/* Punkt 3 & 4: Blasse Hintergründe für Fristverlauf */
.worksite .vma-bg-green { background-color: #e2f0d9 !important; color: transparent; }
.worksite .vma-bg-red   { background-color: #fce8e6 !important; color: transparent; }

/* ------------------------------------------------------
   BADGES (Rechte Spalte)
   ------------------------------------------------------ */
.worksite .vma-matrix-table td.sum-cell .vma-badge {
    display: inline-block;
    padding: 3px 6px;
    font-size: 0.72rem;
    font-weight: bold;
    border-radius: 4px;
    white-space: nowrap;
    text-align: center;
    cursor: help;
}

.worksite .vma-badge.badge-ok {
    background-color: #e6f4ea;
    color: #137333;
    border: 1px solid #ceead6;
}

.worksite .vma-badge.badge-reset {
    background-color: #e8f0fe;
    color: #1a73e8;
    border: 1px solid #aecbfa;
}

.worksite .vma-badge.badge-warning-critical {
    background-color: #feefc3;
    color: #b06000;
    border: 1px solid #fde293;
}

.worksite .vma-badge.badge-danger {
    background-color: #fce8e6;
    color: #c5221f;
    border: 1px solid #fad2cf;
}

/* ==========================================================================
   VMA Code-Farben für A, M, L, T (Blaus und Grüns)
   ========================================================================== */

/* A & M = Blautöne */
.worksite .vma-matrix-table td.vma-code-a {
    background-color: #007dc1 !important; /* Blau (Online / Standard-Blau) */
    color: #ffffff !important;
    font-weight: bold;
}

.worksite .vma-matrix-table td.vma-code-m {
    background-color: #004085 !important; /* Dunkleres Blau */
    color: #ffffff !important;
    font-weight: bold;
}

/* L & T = Grüntöne */
.worksite .vma-matrix-table td.vma-code-l {
    background-color: #44c767 !important; /* Hellgrün (Werktag-Grün) */
    color: #ffffff !important;
    font-weight: bold;
}

.worksite .vma-matrix-table td.vma-code-t {
    background-color: #1b522a !important; /* Dunkleres Grün */
    color: #ffffff !important;
    font-weight: bold;
}

/* Roter Bereich (> 90 Tage Frist): Behält den Buchstaben, wird aber rot hinterlegt */
.worksite .vma-matrix-table td.vma-over {
    background-color: var(--color-so, #fe1a00) !important; /* Kräftiges Rot */
    color: #ffffff !important;
    font-weight: bold;
}


/* ==========================================================================
   Hervorhebung der Spalte für den heutigen Tag (HEUTE)
   ========================================================================== */

/* Header des heutigen Tages */
.worksite .vma-matrix-table thead th.today-head {
    background-color: var(--color-on, #007dc1) !important;
    color: #ffffff !important;
    font-weight: bold;
    border-left: 2px solid #005689 !important;
    border-right: 2px solid #005689 !important;
}

/* Tabellenzellen in der Spalte des heutigen Tages */
.worksite .vma-matrix-table td.today-col {
    background-color: rgba(0, 125, 193, 0.15) !important; /* Blauer Soft-Marker */
    border-left: 2px solid rgba(0, 125, 193, 0.4) !important;
    border-right: 2px solid rgba(0, 125, 193, 0.4) !important;
}

/* Falls die Zelle leeres Feld mit VMA-Grün/Rot ist, etwas kräftiger hervorheben */
.worksite .vma-matrix-table td.today-col.vma-bg-green {
    background-color: #bcebc7 !important;
}
.worksite .vma-matrix-table td.today-col.vma-bg-red {
    background-color: #f7b7b1 !important;
}

/* Einsatz-Codes (A, M, L, T) am heutigen Tag erhalten eine blaue Markierung als Border */
.worksite .vma-matrix-table td.today-col.vma-code-a,
.worksite .vma-matrix-table td.today-col.vma-code-m,
.worksite .vma-matrix-table td.today-col.vma-code-l,
.worksite .vma-matrix-table td.today-col.vma-code-t,
.worksite .vma-matrix-table td.today-col.vma-over {
    outline: 2px solid #004085;
    outline-offset: -2px;
}