/* =============================================================
   BuildHub Custom Planner — kein DayPilot
   Primär: #0F4A67  |  Akzent: #E18321
   ============================================================= */

:root {
    --pg-worker-width:  220px;
    --pg-row-h:          56px;
    --pg-head-h:         48px;
    --pg-event-h:        30px;
    --pg-blue:          #0F4A67;
    --pg-orange:        #E18321;
    --pg-green:         #00bd9d;
    --pg-red:           #f06548;
    --pg-yellow:        #f7b84b;
    --pg-gray:          #878a99;
    --pg-today-bg:      rgba(15,74,103,.07);
    --pg-weekend-bg:    #f8f9fa;
    --pg-holiday-bg:    #fdecea;
    --pg-holiday-dot:   #f06548;
    --pg-border:        #e9ebec;
    --pg-hover-bg:      rgba(15,74,103,.04);
    --pg-dragover-bg:   rgba(15,74,103,.13);
}

/* ── Toolbar ─────────────────────────────────────────────────── */
.pg-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.pg-range-label {
    font-weight: 700;
    font-size: 15px;
    color: #343a40;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pg-view-switcher .btn.active {
    background: var(--pg-blue) !important;
    color: #fff !important;
    border-color: var(--pg-blue) !important;
}

/* ── Container ───────────────────────────────────────────────── */
.pg-container {
    border: 1px solid var(--pg-border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    font-family: var(--vz-font-sans-serif, "Open Sans", sans-serif);
    font-size: 13px;
}
.pg-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 230px);
    min-height: 320px;
}
.pg-scroll::-webkit-scrollbar         { width: 6px; height: 6px; }
.pg-scroll::-webkit-scrollbar-track   { background: #f1f1f1; }
.pg-scroll::-webkit-scrollbar-thumb   { background: #c8cbcf; border-radius: 3px; }
.pg-scroll::-webkit-scrollbar-thumb:hover { background: #a0a4a8; }

/* ── Flat Grid (ein Grid für Header + alle Rows) ─────────────── */
.pg-flat-grid {
    display: grid;
    min-width: max-content;
}
/* Week view: stretch to fill the viewport — no horizontal scroll */
.pg-flat-grid--fluid {
    min-width: 0;
    width: 100%;
}

/* sticky Header-Zellen im flat grid */
.pg-sticky-corner,
.pg-sticky-head {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    box-shadow: 0 2px 0 var(--pg-border);  /* ersetzt border-bottom der alten header-row */
}
.pg-sticky-corner {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 25;  /* über Tag-Headern (top) und Worker-Zellen (left) */
    background: #f5f6f8;
}

/* Zeilen-Trennlinie: untere Rahmenlinie für Worker-Zelle + alle Tag-Zellen */
.pg-row-start {
    border-top: 1px solid var(--pg-border);
}
.pg-flat-grid .pg-cell {
    border-top: 1px solid var(--pg-border);
}
/* letzte Zelle jeder Zeile kein rechter Rand */
.pg-flat-grid .pg-cell:last-child { border-right: none; }

/* ── Week/Month: header row (legacy, nicht mehr genutzt) ─────── */
.pg-header-row {
    display: grid;
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-bottom: 2px solid var(--pg-border);
    min-width: max-content;
}

.pg-corner {
    background: #f5f6f8;
    border-right: 2px solid var(--pg-border);
    padding: 0 12px;
    display: flex;
    align-items: center;
    min-height: var(--pg-head-h);
    font-size: 11px;
    font-weight: 700;
    color: var(--pg-gray);
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}

.pg-day-head {
    border-right: 1px solid var(--pg-border);
    padding: 5px 3px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: var(--pg-head-h);
    cursor: pointer;
    user-select: none;
    gap: 1px;
}
.pg-day-head:last-child { border-right: none; }
.pg-day-head.pg-weekend { background: var(--pg-weekend-bg); }
.pg-day-head.pg-weekend .pg-wd,
.pg-day-head.pg-weekend .pg-dn { color: #adb5bd; }
/* Feiertag: eigene Farbe statt der neutralen Wochenend-Grau-Färbung, damit ein
   Feiertag an einem Werktag (z.B. 3. Oktober an einem Dienstag) genauso auffällt
   wie einer, der zufällig aufs Wochenende fällt. */
.pg-day-head.pg-holiday { background: var(--pg-holiday-bg); }
.pg-day-head.pg-holiday .pg-wd,
.pg-day-head.pg-holiday .pg-dn { color: var(--pg-holiday-dot); }
.pg-day-head.pg-holiday .pg-dn::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    margin: 2px auto 0;
    border-radius: 50%;
    background: var(--pg-holiday-dot);
}

.pg-wd {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--pg-gray);
    line-height: 1;
}
.pg-dn {
    font-size: 15px;
    font-weight: 700;
    color: #343a40;
    line-height: 1.1;
}
.pg-day-head.pg-today .pg-dn {
    background: var(--pg-blue);
    color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.pg-mo-label {
    font-size: 9px;
    color: #adb5bd;
    line-height: 1;
}

/* ── Week/Month: body rows (legacy) ──────────────────────────── */
.pg-body-row {
    display: grid;
    border-bottom: 1px solid var(--pg-border);
    min-width: max-content;
}
.pg-body-row:last-child { border-bottom: none; }
.pg-body-row:hover { background: var(--pg-hover-bg); }

/* Flat-grid row hover via JS-Klasse .pg-row-hover */
.pg-flat-grid .pg-cell.pg-row-hover  { background: var(--pg-hover-bg); }
.pg-flat-grid .pg-worker-cell.pg-row-hover { background: #edf0f4; }

.pg-worker-cell {
    position: sticky;
    left: 0;
    z-index: 10;
    background: #f5f6f8;
    border-right: 2px solid var(--pg-border);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--pg-row-h);
    min-width: var(--pg-worker-width);
}
.pg-body-row:hover .pg-worker-cell { background: #edf0f4; }

.pg-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--pg-blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.pg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pg-wname {
    font-size: 12px;
    font-weight: 600;
    color: #343a40;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Day cells ────────────────────────────────────────────────── */
.pg-cell {
    border-right: 1px solid var(--pg-border);
    padding: 3px 2px;
    min-height: var(--pg-row-h);
    cursor: pointer;
}
.pg-cell:last-child        { border-right: none; }
.pg-cell:hover             { background: var(--pg-hover-bg); }
.pg-cell.pg-today-col      { background: var(--pg-today-bg); }
.pg-cell.pg-weekend-col    { background: rgba(248,249,250,.7); }
.pg-cell.pg-holiday-col    { background: rgba(253,236,234,.6); }
.pg-cell.pg-dragover       { background: var(--pg-dragover-bg) !important; outline: 2px dashed var(--pg-blue); outline-offset: -2px; }

/* ── Track spacer ─────────────────────────────────────────────── */
.pg-ev-spacer {
    min-height: var(--pg-event-h);
    margin-bottom: 2px;
}
.pg-grid-month .pg-ev-spacer { min-height: 20px; }

/* ── Events ───────────────────────────────────────────────────── */
.pg-event {
    display: flex;
    align-items: center;
    gap: 3px;
    border-radius: 4px;
    padding: 3px 5px;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    cursor: grab;
    user-select: none;
    min-height: var(--pg-event-h);
    overflow: hidden;
    white-space: nowrap;
    border-left: 3px solid rgba(0,0,0,.18);
    box-shadow: 0 1px 3px rgba(0,0,0,.14);
    transition: opacity .12s, box-shadow .12s;
}
.pg-event:hover {
    opacity: .88;
    box-shadow: 0 3px 9px rgba(0,0,0,.22);
}
.pg-event:active   { cursor: grabbing; }
.pg-event.pg-dragging { opacity: .3; }

/* multi-day spans */
.pg-ev-start { border-radius: 4px 0 0 4px; }
.pg-ev-mid   { border-radius: 0; border-left: none; padding-left: 2px; }
.pg-ev-end   { border-radius: 0 4px 4px 0; border-left: none; padding-left: 2px; }

.pg-ev-icon { font-size: 11px; flex-shrink: 0; }
.pg-ev-text { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.pg-ev-time { font-size: 9px; opacity: .75; flex-shrink: 0; margin-left: auto; }

/* month compact */
.pg-grid-month .pg-event { font-size: 10px; min-height: 20px; padding: 2px 4px; }

/* ── Day View (Timeline) ──────────────────────────────────────── */
.pg-day-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 230px);
    min-height: 320px;
}
.pg-day-wrap::-webkit-scrollbar         { width: 6px; height: 6px; }
.pg-day-wrap::-webkit-scrollbar-track   { background: #f1f1f1; }
.pg-day-wrap::-webkit-scrollbar-thumb   { background: #c8cbcf; border-radius: 3px; }

/* table-like layout for day view */
.pg-day-table { display: table; border-collapse: collapse; min-width: 100%; }
.pg-day-head-row,
.pg-day-row   { display: table-row; }

.pg-day-corner-cell,
.pg-day-hour-label,
.pg-day-name-cell,
.pg-day-hour-cell { display: table-cell; border: 1px solid var(--pg-border); vertical-align: middle; }

.pg-day-corner-cell {
    width: var(--pg-worker-width);
    min-width: var(--pg-worker-width);
    background: #f5f6f8;
    border-right: 2px solid var(--pg-border);
    border-bottom: 2px solid var(--pg-border);
    padding: 6px 12px;
    font-size: 11px; font-weight: 700;
    color: var(--pg-gray);
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
    position: sticky; left: 0; top: 0; z-index: 25;
}
.pg-day-hour-label {
    width: 58px; min-width: 58px;
    text-align: center;
    font-size: 11px;
    color: var(--pg-gray);
    padding: 4px 2px;
    border-bottom: 2px solid var(--pg-border);
    background: #fff;
    white-space: nowrap;
    position: sticky; top: 0; z-index: 15;
}
.pg-day-name-cell {
    width: var(--pg-worker-width);
    min-width: var(--pg-worker-width);
    background: #f5f6f8;
    border-right: 2px solid var(--pg-border);
    padding: 8px 10px;
    position: sticky; left: 0; z-index: 10;
}
.pg-day-row:hover .pg-day-name-cell { background: #edf0f4; }
.pg-day-hour-cell {
    width: 58px; min-width: 58px;
    height: var(--pg-row-h);
    padding: 0;
    cursor: pointer;
    position: relative;
}
.pg-day-hour-cell:nth-child(even) { background: rgba(0,0,0,.015); }
.pg-day-hour-cell:hover { background: var(--pg-hover-bg); }
.pg-day-hour-cell.pg-dragover { background: var(--pg-dragover-bg) !important; }

/* timeline events (absolutely positioned within pg-day-hour-cell container row) */
.pg-day-body-row {
    position: relative;
    height: var(--pg-row-h);
}
.pg-tl-event {
    position: absolute;
    top: 5px;
    height: calc(var(--pg-row-h) - 10px);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    white-space: nowrap;
    border-left: 3px solid rgba(0,0,0,.18);
    box-shadow: 0 1px 3px rgba(0,0,0,.14);
    cursor: pointer;
    z-index: 5;
    min-width: 20px;
}
.pg-tl-event:hover { opacity: .88; z-index: 10; box-shadow: 0 3px 9px rgba(0,0,0,.22); }

/* ── Legend ───────────────────────────────────────────────────── */
.pg-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 14px;
    background: #f8f9fa;
    border-top: 1px solid var(--pg-border);
    flex-wrap: wrap;
    font-size: 11px;
}
.pg-legend-item { display: flex; align-items: center; gap: 6px; color: #495057; }
.pg-legend-dot  { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }

/* ── Loading ──────────────────────────────────────────────────── */
.pg-loading { text-align: center; padding: 60px 20px; color: var(--pg-gray); }
.pg-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--pg-border);
    border-top-color: var(--pg-blue);
    border-radius: 50%;
    animation: pg-spin .65s linear infinite;
    margin: 0 auto 12px;
}
@keyframes pg-spin { to { transform: rotate(360deg); } }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    :root { --pg-worker-width: 110px; }
    .pg-wname { font-size: 11px; }
    .pg-avatar { display: none; }
    .pg-range-label { font-size: 13px; }
}