table td:last-child {
    display: flex;
    flex-direction: row;
    justify-content: center;
}



.break-block {
    position: relative;
    padding: 8px;
}

.break-input-field {
    max-width: 500px;
}




/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
.te-card {
    border-radius: 0.6rem;
    border: 1px solid rgba(148, 163, 184, 0.6);
    background-color: #f9fafb;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}

.te-card-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.45);
    padding: 0.55rem 0.85rem!important;
    background: linear-gradient( 90deg, rgba(16, 185, 129, 0.1), rgba(14, 165, 233, 0.08) )!important;
}



   .te-card-header h5 {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: #065f46;
    }

.te-card .card-body {
    padding: 0.9rem 0.95rem 1rem;
}

/* Date filters in header */
.te-card-header .form-control.form-control-sm, .te-card-header .form-select.form-select-sm {
    border-radius: 0.45rem;
    border-color: rgba(148, 163, 184, 0.75);
    font-size: 0.8rem;
    padding-inline: 0.4rem;
}

    .te-card-header .form-control.form-control-sm:focus, .te-card-header .form-select.form-select-sm:focus {
        box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.45);
        border-color: rgba(5, 150, 105, 0.9);
    }

/* Table – uses tt-table for main styling, just adjust spacing here */
te-card #timeEntriesTable {
    margin-bottom: 0;
}

/* ==============================
   Right card: Monatsübersicht
============================== */

te-wrapper {
    padding-top: 0.75rem;
}

    
    /* Positive/negative balance colors (reuse existing logic) */
    te-wrapper .text-success {
        color: #16a34a !important;
    }

    te-wrapper .text-danger {
        color: #dc2626 !important;
    }






    /*--------------------------------------------------*/
    /*--------------------------------------------------*/
    /*--------------------------------------------------*/
#addTimeEntryModal .tt-classy-body {
    /* soft backdrop like your tab bar gradient */
    background: radial-gradient(circle at top left, rgba(15, 118, 110, 0.07) 0%, rgba(14, 165, 233, 0.05) 35%, rgba(255, 255, 255, 1) 75%);
    padding: 1.1rem 1.1rem 1rem;
}

    /* section titles inside body */
    #addTimeEntryModal .tt-classy-body .tt-section-title {
        font-size: 0.9rem;
        font-weight: 750;
        color: #0f172a;
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: 0 0 .65rem;
    }

    /* subtle divider line (classy, not harsh) */
    #addTimeEntryModal .tt-classy-body .tt-divider {
        height: 1px;
        background: linear-gradient(90deg, rgba(148, 163, 184, 0.15), rgba(148, 163, 184, 0.55), rgba(148, 163, 184, 0.15));
        margin: 0.95rem 0;
    }

    /* labels: match your emp-det theme */
    #addTimeEntryModal .tt-classy-body label,
    #addTimeEntryModal .tt-classy-body .form-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--tt-text-muted, #64748b);
        margin-bottom: .35rem;
    }

    /* inputs + textarea: softer + premium */
    #addTimeEntryModal .tt-classy-body .form-control,
    #addTimeEntryModal .tt-classy-body textarea.form-control,
    #addTimeEntryModal .tt-classy-body .form-select {
        border-radius: 0.7rem;
        border: 1px solid rgba(148, 163, 184, 0.55);
        background: rgba(255,255,255,0.95);
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
        padding: .55rem .75rem;
        transition: box-shadow .15s ease, border-color .15s ease, transform .1s ease;
    }

        /* focus: green/blue like your theme */
        #addTimeEntryModal .tt-classy-body .form-control:focus,
        #addTimeEntryModal .tt-classy-body textarea.form-control:focus,
        #addTimeEntryModal .tt-classy-body .form-select:focus {
            border-color: rgba(16, 185, 129, 0.60);
            box-shadow: 0 0 0 .2rem rgba(16, 185, 129, 0.12), 0 14px 28px rgba(15, 23, 42, 0.08);
            transform: translateY(-1px);
        }

/* break area: clean container without looking like a card */
/* Hide breaks container until at least one break exists */
#addTimeEntryModal .break-blocks.d-none {
    display: none !important;
}

/* Break row: flat, elegant, no "card" feel */
#addTimeEntryModal .tt-classy-body .tt-break-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
    padding: .75rem .75rem .65rem;
    margin-top: .65rem;
    border-radius: .85rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255,255,255,0.55);
}

/* Keep labels subtle */
#addTimeEntryModal .tt-classy-body .tt-break-label {
    margin-bottom: .35rem;
}

/* Inputs match your classy body */
#addTimeEntryModal .tt-classy-body .tt-break-input {
    border-radius: .75rem;
}

/* input-group: make it look like a single unit */
#addTimeEntryModal .tt-classy-body .tt-break-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Remove button: elegant, not aggressive */
#addTimeEntryModal .tt-classy-body .tt-break-remove {
    border: 1px solid rgba(148, 163, 184, 0.55);
    border-left: none;
    background: rgba(255,255,255,0.9);
    color: #b91c1c;
    width: 44px;
    border-top-right-radius: .75rem;
    border-bottom-right-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}

    #addTimeEntryModal .tt-classy-body .tt-break-remove:hover {
        background: linear-gradient(135deg, #fee2e2, #fecaca);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
        transform: translateY(-1px);
    }

    #addTimeEntryModal .tt-classy-body .tt-break-remove i {
        font-size: 1.05rem;
    }








#editTimeEntryModal .tt-classy-body {
    /* soft backdrop like your tab bar gradient */
    background: radial-gradient(circle at top left, rgba(15, 118, 110, 0.07) 0%, rgba(14, 165, 233, 0.05) 35%, rgba(255, 255, 255, 1) 75%);
    padding: 1.1rem 1.1rem 1rem;
}

    /* section titles inside body */
    #editTimeEntryModal .tt-classy-body .tt-section-title {
        font-size: 0.9rem;
        font-weight: 750;
        color: #0f172a;
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: 0 0 .65rem;
    }

    /* subtle divider line (classy, not harsh) */
    #editTimeEntryModal .tt-classy-body .tt-divider {
        height: 1px;
        background: linear-gradient(90deg, rgba(148, 163, 184, 0.15), rgba(148, 163, 184, 0.55), rgba(148, 163, 184, 0.15));
        margin: 0.95rem 0;
    }

    /* labels: match your emp-det theme */
    #editTimeEntryModal .tt-classy-body label,
    #editTimeEntryModal .tt-classy-body .form-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--tt-text-muted, #64748b);
        margin-bottom: .35rem;
    }

    /* inputs + textarea: softer + premium */
    #editTimeEntryModal .tt-classy-body .form-control,
    #editTimeEntryModal .tt-classy-body textarea.form-control,
    #editTimeEntryModal .tt-classy-body .form-select {
        border-radius: 0.7rem;
        border: 1px solid rgba(148, 163, 184, 0.55);
        background: rgba(255,255,255,0.95);
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
        padding: .55rem .75rem;
        transition: box-shadow .15s ease, border-color .15s ease, transform .1s ease;
    }

        /* focus: green/blue like your theme */
        #editTimeEntryModal .tt-classy-body .form-control:focus,
        #editTimeEntryModal .tt-classy-body textarea.form-control:focus,
        #editTimeEntryModal .tt-classy-body .form-select:focus {
            border-color: rgba(16, 185, 129, 0.60);
            box-shadow: 0 0 0 .2rem rgba(16, 185, 129, 0.12), 0 14px 28px rgba(15, 23, 42, 0.08);
            transform: translateY(-1px);
        }

/* break area: clean container without looking like a card */
/* Hide breaks container until at least one break exists */
#editTimeEntryModal .break-blocks.d-none {
    display: none !important;
}

/* Break row: flat, elegant, no "card" feel */
#editTimeEntryModal .tt-classy-body .tt-break-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
    padding: .75rem .75rem .65rem;
    margin-top: .65rem;
    border-radius: .85rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255,255,255,0.55);
}

/* Keep labels subtle */
#editTimeEntryModal .tt-classy-body .tt-break-label {
    margin-bottom: .35rem;
}

/* Inputs match your classy body */
#editTimeEntryModal .tt-classy-body .tt-break-input {
    border-radius: .75rem;
}

/* input-group: make it look like a single unit */
#editTimeEntryModal .tt-classy-body .tt-break-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Remove button: elegant, not aggressive */
#editTimeEntryModal .tt-classy-body .tt-break-remove {
    border: 1px solid rgba(148, 163, 184, 0.55);
    border-left: none;
    background: rgba(255,255,255,0.9);
    color: #b91c1c;
    width: 44px;
    border-top-right-radius: .75rem;
    border-bottom-right-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}

    #editTimeEntryModal .tt-classy-body .tt-break-remove:hover {
        background: linear-gradient(135deg, #fee2e2, #fecaca);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
        transform: translateY(-1px);
    }

    #editTimeEntryModal .tt-classy-body .tt-break-remove i {
        font-size: 1.05rem;
    }

.modal-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.5);
    background: linear-gradient( 90deg, rgba(15, 23, 42, 0.9), rgba(15, 118, 110, 0.9) );
    color: #f9fafb;
}

    .modal-header .modal-title {
        font-weight: 600;
    }

/* primary/secondary in modals */
.modal-content .btn.btn-primary {
    border-radius: 0.45rem;
    border: none;
    background: linear-gradient(135deg, #059669, #0f766e);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.6);
}

    .modal-content .btn.btn-primary:hover {
        background: linear-gradient(135deg, #10b981, #0284c7);
    }