/* Canteen Admin Management */
#headline {
    color: #1a1a1a;
    margin: 0;
}

#AppBarAdminBG {
    margin: 0 0 10px 0;
}
 
#AppBarAdmin {
    margin: 0;
    width: 100%;
    height: 50px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.85); 
    border-radius: 4px;  
}

#LogoBackend{ 
    height: 50px;
    margin-right: 5px;  
}

.active-icon svg,
.active-icon .fluent-icon svg {
    fill: #6264A7 !important;
} 
 
.active-icon div {
    color: #6264A7 !important;
}

#FluentDataGrid tr.fluent-data-grid-row td { /* fix dropdown hidden behind next row */
    overflow: visible !important;
}

.highlight-row {
    background-color: rgba(237, 237, 255, 0.7) !important;
}

.MealDateBtn {
    width: 270px;  
}

.gridImg {
    margin-top: -4px;
    max-width: 40px; 
    max-height: 40px;
    cursor: pointer;
}

.fluent-data-grid {
    height: auto !important; /* new: order + gridrows overflow if gird empty */
}

.gridSmallFont td, .gridSmallFont th, .gridSmallFont th fluent-button, .gridSmallFont fluent-text-field, .gridSmallFont fluent-select::part(control), .gridSmallFont fluent-number-field::part(control) {
    font-size: 12px !important;
}

.gridSmallFont .fluent-rating svg { /* rating stars instead of 28px */
    width: 15px !important;
}

#FluentDataGridLunchPlan {
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    padding: 10px 0;
    margin-top: 10px;
}

    #FluentDataGridLunchPlan td {
        background-color: rgba(255, 255, 255, 0.5);
        border-bottom: 1px solid #dbdbdb;
    }


#FluentDataGrid .fluent-data-grid-row:nth-child(even) td {
    background-color: rgba(200, 200, 200, 0.2);
    border-bottom: 1px solid #dbdbdb;
}

#FluentDataGrid .fluent-data-grid-row:nth-child(odd) td {
    background-color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid #dbdbdb !important;
}
 
/* Dialog grid white bg */
#FluentDataGridDialog .fluent-data-grid-row:nth-child(even) td {
    border-bottom: 1px solid #dbdbdb;  
}

#FluentDataGridDialog .fluent-data-grid-row:nth-child(odd) td {
    background-color: #f2f2f2;
    border-bottom: 1px solid #dbdbdb !important;
}

.PersonaAdmin {
    margin-top: -4px;
}

.SearchCustomerFilter fluent-horizontal-scroll { /* Name select autocomplete in +Order  */
    height: 18px !important;
    position: absolute !important;
    margin-top: -10px;
}

.SearchCustomerFilter {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.booking-table {
    width: 100%;
    table-layout: fixed;
}

    .booking-table td {
        border-bottom: 1px solid #dbdbdb;
        padding: 2px 0;
        height: 42px;
    }

.TableBtn {
    width: 150px;
}

.ReservationBadge {
    min-width: 150px;
}
/* pagination */
.pagination-controls {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-btn {
    min-width: 40px;
    height: 36px;
    border-radius: 6px;
    font-weight: 500;
    margin-right: 4px;
}

    .page-btn.active {
        box-shadow: 0 0 0 2px #0078d4;
    }

/* Drag and Drop CSV import */
.mapping-container {
    display: flex;
    gap: 2rem;
    margin-top: 20px;
}

.csv-headers, .model-properties {
    border: 1px solid #ccc;
    padding: 1rem;
    min-width: 200px;
} 

.draggable {
    background: #e5e5e5;
    margin: 0.5rem 0;
    padding: 0.5rem;
    cursor: grab;
} 

.dropzone { 
    background: #f9f9f9;
    margin: 0.5rem 0;
    padding: 0.5rem;
    min-height: 2rem;
    border: 1px dashed #aaa;
    transition: background 0.2s;
}

    .dropzone.active {
        background: #e0ffe0;
    } 

    .dropzone.mappedzone {
        background: #b6fcb6 !important;
    }

        .dropzone.active.mappedzone,
        .dropzone.mappedzone.active { 
            background: #b6fcb6 !important;
        }
         
.mapped {
    color: green;
    margin-left: 1rem;
}

.dashboard-chart { 
    margin-top: 15px;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    padding: 10px 0; 
}