/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content { margin-top: 25px; padding-left: 15px; padding-right: 15px; }
:root { --ink:#172033; --muted:#667085; --line:#e7eaf0; --surface:#fff; --canvas:#f4f7fb; --brand:#275efe; --brand-dark:#173ea8; }
body { background:var(--canvas); color:var(--ink); }
.app-shell { min-height:calc(100vh - 62px); }
.app-topbar { min-height:62px; color:#fff; background:linear-gradient(120deg,#17233d,#244fa8); box-shadow:0 2px 14px rgba(23,32,51,.2); }
.app-topbar .navbar-brand,.app-topbar span { color:#fff; }
.sidebar { background:#fff; border-right:1px solid var(--line); min-height:calc(100vh - 62px); }
.sidebar .nav-link { color:#344054; border-radius:9px; padding:.65rem .8rem; margin:.12rem 0; }
.sidebar .nav-link:hover { background:#eef3ff; color:var(--brand-dark); }
.content { padding:28px; max-width:1600px; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
.page-head h1 { font-size:clamp(1.7rem,3vw,2.35rem); margin:.15rem 0 .35rem; font-weight:750; letter-spacing:-.025em; }
.page-head p { color:var(--muted); margin:0; }
.eyebrow { color:var(--brand); text-transform:uppercase; font-size:.75rem; letter-spacing:.12em; font-weight:700; }
.app-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 8px 28px rgba(23,32,51,.055); }
.app-card h2 { font-size:1.12rem; margin:0 0 16px; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px 18px; }
.form-grid label { color:#475467; font-size:.86rem; font-weight:650; margin-bottom:5px; }
.form-grid .form-control { max-width:none; }
.content-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.check-line { display:flex; align-items:end; padding-bottom:.55rem; }
.weekday-picker { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.weekday-picker span { color:var(--muted); font-weight:600; }
.action-stack { display:flex; flex-wrap:wrap; gap:6px; min-width:210px; }
.status-filter { max-width:260px; }
.app-table { margin-bottom:0; }
.app-table th { color:#475467; font-size:.76rem; text-transform:uppercase; letter-spacing:.045em; border-bottom:1px solid var(--line); }
.time-value { font-variant-numeric:tabular-nums; font-weight:650; }
.holiday-row { background:#eef4ff !important; }

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .body-content {
        padding: 0;
    }
}
.save-feedback {
    background: #28a745;
    color: white;
    padding: 8px 14px;
    border-radius: 6px;
    display: inline-block;
    animation: fadeOut 3s forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
.weekend-row {
    background-color: #e6f4ea !important;
}

.table-striped > tbody > tr.weekend-row:nth-of-type(odd),
.table-striped > tbody > tr.weekend-row:nth-of-type(even) {
    background-color: #e6f4ea !important;
}

.incomplete-a {
    background-color: #fff1f1 !important;
}

.incomplete-b {
    background-color: #ffe8e8 !important;
}
.mobile-day-toggle,
.mobile-month-tools {
    display: none;
}

.desktop-day-label {
    display: block;
}
@media (max-width:767px) {
    .sidebar { position:fixed; top:62px; left:0; width:min(86vw,300px); height:calc(100vh - 62px); z-index:1030; transform:translateX(-100%); transition:transform .2s ease; box-shadow:12px 0 30px rgba(23,32,51,.16); }
    .sidebar.show { transform:translateX(0); }
    .backdrop { display:none; position:fixed; top:62px; left:0; right:0; bottom:0; background:rgba(15,23,42,.42); z-index:1020; }
    .backdrop.show { display:block; }
    .content { padding:18px 12px 34px; width:100%; }
    .content-grid { grid-template-columns:1fr; }
    .page-head { flex-direction:column; }
    .app-card { padding:16px; border-radius:13px; }
    .table-responsive { border-radius:10px; }
    .mobile-month-tools {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
    }

    .table-responsive {
        overflow: visible;
    }

    .timesheet-grid,
    .timesheet-grid tbody {
        display: block;
        width: 100%;
    }

        .timesheet-grid thead {
            display: none;
        }

        .timesheet-grid tr {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 12px;
            width: 100%;
            margin-bottom: 12px;
            padding: 0;
            background: #fff !important;
            border: 1px solid var(--line);
            border-left: 5px solid #8a94a6;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 5px 18px rgba(23, 32, 51, 0.07);
        }

        .timesheet-grid td {
            display: block;
            width: auto;
            min-width: 0;
            padding: 0 14px;
            border: 0;
        }

        /* Zugeklappt nur den Kartenkopf anzeigen */
        .timesheet-grid tr:not(.mobile-day-open)
        td:not(:first-child) {
            display: none;
        }

        .timesheet-grid td:first-child {
            grid-column: 1 / -1;
            padding: 0;
        }

    .desktop-day-label {
        display: none;
    }

    .mobile-day-toggle {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 24px;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 74px;
        padding: 12px 14px;
        color: var(--ink);
        text-align: left;
        background: transparent;
        border: 0;
    }

    .mobile-day-date,
    .mobile-day-result {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

        .mobile-day-date strong {
            font-size: 0.92rem;
            text-transform: capitalize;
        }

        .mobile-day-date small,
        .mobile-day-result small {
            color: var(--muted);
            font-size: 0.75rem;
        }

    .mobile-day-result {
        text-align: right;
    }

    .mobile-type-text {
        font-size: 0.86rem;
        font-weight: 700;
    }

    .mobile-toggle-icon {
        color: var(--brand);
        font-size: 1.25rem;
        font-weight: 700;
        text-align: center;
    }

    .timesheet-grid tr.mobile-day-open {
        padding-bottom: 14px;
    }

        .timesheet-grid tr.mobile-day-open
        td:first-child {
            margin-bottom: 3px;
            background: #f8faff;
            border-bottom: 1px solid var(--line);
        }

    /* Beschriftung der geöffneten Eingabefelder */
    .timesheet-grid td:not(:first-child)::before {
        display: block;
        margin-bottom: 5px;
        color: var(--muted);
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .timesheet-grid td:nth-child(2)::before {
        content: "Tagestyp";
    }

    .timesheet-grid td:nth-child(3)::before {
        content: "Kommen";
    }

    .timesheet-grid td:nth-child(4)::before {
        content: "Gehen";
    }

    .timesheet-grid td:nth-child(5)::before {
        content: "Pause in Minuten";
    }

    .timesheet-grid td:nth-child(6)::before {
        content: "Notiz";
    }

    .timesheet-grid td:nth-child(7)::before {
        content: "Soll";
    }

    .timesheet-grid td:nth-child(8)::before {
        content: "Ist / Gutschrift";
    }

    /* Typ und Notiz über die volle Breite */
    .timesheet-grid td:nth-child(2),
    .timesheet-grid td:nth-child(6) {
        grid-column: 1 / -1;
    }

    /* Abstand der geöffneten Zeilen */
    .timesheet-grid tr.mobile-day-open
    td:not(:first-child) {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    /* Soll und Ist hervorheben */
    .timesheet-grid td:nth-child(7),
    .timesheet-grid td:nth-child(8) {
        margin: 0 14px;
        padding: 10px !important;
        background: #f4f7fb;
        border-radius: 9px;
    }

    .timesheet-grid .form-control,
    .timesheet-grid .form-select {
        width: 100% !important;
        max-width: none !important;
    }

    /* Die beiden Uhrzeitfelder nebeneinander */
    .timesheet-grid .d-flex.gap-1 {
        align-items: center;
    }

        .timesheet-grid .d-flex.gap-1
        .form-control {
            flex: 1 1 0;
        }

    /* Farben der Tagestypen */
    .timesheet-grid tr.day-type-0 {
        border-left-color: #275efe;
    }

    .timesheet-grid tr.day-type-1 {
        border-left-color: #dc3545;
    }

    .timesheet-grid tr.day-type-2 {
        border-left-color: #198754;
    }

    .timesheet-grid tr.day-type-3 {
        border-left-color: #0dcaf0;
    }

    .timesheet-grid tr.day-type-4 {
        border-left-color: #98a2b3;
    }

    .timesheet-grid tr.day-type-5,
    .timesheet-grid tr.day-type-6 {
        border-left-color: #7950f2;
    }

    /* Unvollständiger Arbeitstag */
    .timesheet-grid tr.incomplete-a {
        border-left-color: #fd7e14;
    }

    .save-dock {
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .table-responsive {
        overflow: visible;
    }

    .save-dock {
        left: 10px;
        right: 10px;
        bottom: 10px;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
    }

    .save-dock-text span {
        display: none;
    }

    .save-dock .btn {
        white-space: nowrap;
    }
    .timesheet-grid .form-control, .timesheet-grid .form-select { max-width:none !important; }
    .app-topbar .navbar-brand { font-size:1rem; }
    .app-topbar .text-white { display:none; }
}
.workday-box {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px;
    background: #f8faff;
}

    .workday-box legend {
        float: none;
        width: auto;
        padding: 0 8px;
        margin: 0;
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--ink);
    }

.tariff-option {
    padding: 16px 18px;
    border: 1px solid #bfd2ff;
    border-radius: 12px;
    background: #eef4ff;
}

    .tariff-option label {
        font-weight: 650;
    }

.save-dock {
    position: fixed;
    right: 22px;
    bottom: 18px;
    z-index: 1010;
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 520px;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(23, 32, 51, 0.20);
    backdrop-filter: blur(8px);
}

.save-dock-text {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
}

    .save-dock-text span {
        color: var(--muted);
        font-size: 0.76rem;
    }

.content {
    padding-bottom: 100px;
}