@import '_content/Blazored.Modal/Blazored.Modal.bundle.scp.css';

/* /Pages/CustomerList/Index.razor.rz.scp.css */
.btn-primary[b-bipvdf50zn] {
    min-width: 75px;
    border-radius: 50px;
    padding: 5px 22px;
    color: #004085;
    background-color: #f8f9fa;
    border-color: #007bff;
    margin: 5px;
}
.info-pill[b-bipvdf50zn]{
    width: 100px !important;
    margin: 3px 1px !important;
    padding: 1px 5px !important;
    color: white;
    font-width: bold;
}
input[b-bipvdf50zn]{
    border-radius: 50px;
    border-width: 1px;
    width: 100%;
    color: #004085;
    background-color: #f8f9fa;
    border-color: #007bff;
}

.ProductDisplayBox[b-bipvdf50zn]{
    width: 100% !important;
    height: 120px;
}

.ProductDisplayBox h5[b-bipvdf50zn]{
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
}

.ProductDisplayBox .row[b-bipvdf50zn]{
    margin-left: 0px;
    margin-right: 0px;
}
.ProductDisplayBox p[b-bipvdf50zn]{
    line-height: 1.15;
    margin: 0px;
}
.ProductDisplayBox .createButton[b-bipvdf50zn] {
    margin: 5px;
    width: 50px;
}

@media  (max-width: 450px) {
    .CustomerDisplayBox h5[b-bipvdf50zn]{
        font-size: 80%;
        font-weight: bold;
    }
}
/* /Pages/Index.razor.rz.scp.css */
.metric-card[b-uhwx1ncro3] {
    border-left: 5px solid var(--bs-primary);
    background: var(--bs-light);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    min-width: 200px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    text-align: left;
}

.metric-card .icon[b-uhwx1ncro3] {
    font-size: 1.5rem;
}

.metric-card .label[b-uhwx1ncro3] {
    font-size: 0.9rem;
    color: #6c757d;
}

.metric-card .value[b-uhwx1ncro3] {
    font-size: 1.2rem;
    font-weight: 600;
}

.metric-card .remaining[b-uhwx1ncro3]{
    display: flex;
    justify-content: space-between;
}

.metric-card .money[b-uhwx1ncro3]{
    text-align: center;
}

.section-heading[b-uhwx1ncro3] {
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.5rem;
}

table tbody tr td:last-of-type .progress[b-uhwx1ncro3]{
    position: relative;
}

table tbody tr td:last-of-type .progress span[b-uhwx1ncro3]{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.progress-percent[b-uhwx1ncro3]{
    color: black;
    text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;  
}
/* /Pages/MerchandisersOrders/Index.razor.rz.scp.css */
.transaction-card[b-okmp62ycac] {
    cursor: pointer;
    margin-bottom: 1rem;
    border-radius: 12px;
    border: 1px solid #ddd;
    transition: transform 0.2s, box-shadow 0.2s;
    background: #ffffff;
}

.transaction-card:hover[b-okmp62ycac] {
    transform: scale(1.01);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.transaction-card .card-body[b-okmp62ycac] {
    padding: 1rem 1.25rem;
}

.border-left-blue[b-okmp62ycac] {
    border-left: 8px solid #007bff;
}

.border-left-red[b-okmp62ycac] {
    border-left: 8px solid #dc3545;
}

#filter-container[b-okmp62ycac]{
    display: flex;
    margin-bottom: 10px;
    gap: 5px;
}

#time-filter[b-okmp62ycac]{
    display: flex;
    margin-bottom: 5px;
    gap: 10px;
}

#time-filter label:first-child[b-okmp62ycac]{
    line-height: 28px;
}


.input-controls[b-okmp62ycac]{
    height: 30px;
}


.transaction-card-container[b-okmp62ycac]{
    border: 1px solid lightgray;
    margin-bottom: 1px;
    /* transition: transform 0.3s ease; */
}

.transaction-card-container:nth-child(odd)[b-okmp62ycac]{
    background-color: #f2f2f0;
}

.transaction-card-container:hover[b-okmp62ycac]{
    background-color: rgb(225, 225, 225);
    cursor: pointer;
    /* transform: scale(1.005); */
}

.time-controls[b-okmp62ycac]{
    display: flex;
    gap: 5px;
}

.disabled-div[b-okmp62ycac] {
    opacity: 0.5;
    pointer-events: none;
}


#fromDate[b-okmp62ycac], #toDate[b-okmp62ycac]{
    width: 120px;
}



@media screen and (max-width: 800px) {

    #filter-container[b-okmp62ycac]{
        display: flex;
        flex-direction: column;
    }

    .time-controls[b-okmp62ycac]{
        align-items: flex-end;
    }

}
/* /Pages/MyInvoiceAndCredits/Index.razor.rz.scp.css */
.transaction-card[b-4eccpp7aww] {
    cursor: pointer;
    margin-bottom: 1rem;
    border-radius: 12px;
    border: 1px solid #ddd;
    transition: transform 0.2s, box-shadow 0.2s;
    background: #ffffff;
}

.transaction-card:hover[b-4eccpp7aww] {
    transform: scale(1.01);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.transaction-card .card-body[b-4eccpp7aww] {
    padding: 1rem 1.25rem;
}

.border-left-blue[b-4eccpp7aww] {
    border-left: 8px solid #007bff;
}

.border-left-red[b-4eccpp7aww] {
    border-left: 8px solid #dc3545;
}
/* /Pages/MyRoute/Route.razor.rz.scp.css */
.row[b-9m69p6f2kh]{
    margin-left: 0px;
    margin-right: 0px;
}
/* /Pages/OrderRequest/Customers.razor.rz.scp.css */
.row.searchBox[b-yth4mxw4zo]{
    margin-right: 0px;
    margin-left: 0px;
}
/* /Pages/OrderRequest/Details.razor.rz.scp.css */
.table td[b-ah09d0zgml]{
    vertical-align: middle;
}
/* /Pages/OrderRequest/Index.razor.rz.scp.css */
button[b-8drk59dwim] {
    border-radius: 0px;
}
/* /Pages/OrderRequest/Items.razor.rz.scp.css */
button[b-ixsk7zcfjj] {
    border-radius: 0px;
}
/* /Pages/OrderRequest/Memo.razor.rz.scp.css */
button[b-qwp9joybby] {
    border-radius: 0px;
}
/* /Pages/OrderRequest/Review.razor.rz.scp.css */
button[b-okxqt5rr07] {
    border-radius: 0px;
}
/* /Pages/OrderRequest/Signature.razor.rz.scp.css */
.signature-pad[b-12kbckj27a]{
    margin-right: auto;
    margin-left: auto;
}
/* /Pages/OrderRequestTemplate/Customers.razor.rz.scp.css */
.row.searchBox[b-3alq3fgcdd]{
    margin-right: 0px;
    margin-left: 0px;
}
/* /Pages/OrderRequestTemplate/Details.razor.rz.scp.css */
.table td[b-hp2yvnjqrl]{
    vertical-align: middle;
}
/* /Pages/OrderRequestTemplate/Index.razor.rz.scp.css */
button[b-8k8a4sccnw] {
    border-radius: 0px;
}
/* /Pages/OrderRequestTemplate/Items.razor.rz.scp.css */
button[b-zo7uo9eyyu] {
    border-radius: 0px;
}
/* /Pages/OrderRequestTemplate/Naming.razor.rz.scp.css */
button[b-qamiofv8wb] {
    border-radius: 0px;
}
/* /Pages/OrderRequestTemplate/Review.razor.rz.scp.css */
button[b-cai2xm19u1] {
    border-radius: 0px;
}
/* /Pages/PreviousOrder/Index.razor.rz.scp.css */
.order-card[b-een6nz0t78] {
    cursor: pointer;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.order-card:hover[b-een6nz0t78] {
    transform: scale(1.01);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.order-card .card-body[b-een6nz0t78] {
    padding: 1rem 1.25rem;
}
/* /Pages/PreviousOrder/View.razor.rz.scp.css */
table.table td[b-6yu7skfp11] {
    vertical-align: middle;
}

.badge.bg-success[b-6yu7skfp11] {
    background-color: #28a745 !important;
    font-size: 0.75rem;
    padding: 0.35em 0.5em;
}
/* /Pages/ProductList/Index.razor.rz.scp.css */
/* Hide scrollbar for Chrome, Safari and Opera */
.QuickFilter[b-w3htl3bzsb]::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.QuickFilter[b-w3htl3bzsb] {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}


.ProductDisplayBox[b-w3htl3bzsb]{
    width: 100% !important;
    height: 120px;
}

.ProductDisplayBox h5[b-w3htl3bzsb]{
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
}

.ProductDisplayBox .row[b-w3htl3bzsb]{
    margin-left: 0px;
    margin-right: 0px;
}
.ProductDisplayBox p[b-w3htl3bzsb]{
    line-height: 1.15;
    margin: 0px;
}
.ProductDisplayBox .createButton[b-w3htl3bzsb] {
    margin: 5px;
    width: 50px;
}
.btn-primary[b-w3htl3bzsb] {
    min-width: 75px;
    border-radius: 50px;
    padding: 5px 22px;
    color: #004085;
    background-color: #f8f9fa;
    border-color: #007bff;
    margin: 5px;
}
.info-pill[b-w3htl3bzsb]{
    width: 100px !important;
    margin: 3px 1px !important; 
    padding: 1px 5px !important;
    color: white;
    font-width: bold;
}
input[b-w3htl3bzsb]{
    border-radius: 50px;
    border-width: 1px;
    width: 100%;
    color: #004085;
    background-color: #f8f9fa;
    border-color: #007bff;
}

@media  (max-width: 450px) {
    .ProductDisplayBox h5[b-w3htl3bzsb]{
        font-size: 90%;
        font-weight: bold;
    }
}
/* /Pages/ReturnRequest/Details.razor.rz.scp.css */
.table-hover tbody tr:hover[b-xmcpi1yw0q] {
    background-color: #e2e2e2;
}
/* /Pages/ReturnRequest/Items.razor.rz.scp.css */
.modal[b-hkiz4195ed] {
    z-index: 1050;
}
.modal-backdrop[b-hkiz4195ed] {
    z-index: 1040;
}
.modal[b-hkiz4195ed] {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -10%);
}
/* /Pages/ReturnRequest/Review.razor.rz.scp.css */
/* Default width for larger screens */
#signaturePad[b-4be48wy06o] {
    width: 400px;
    height: 200px;
    border: 1px solid #e0e0e0;
    display: block;
    margin: 0 auto; /* Center the canvas */
}

/* Adjust width for medium screens */
@media screen and (max-width: 768px) {
    #signaturePad[b-4be48wy06o] {
        width: 300px;
        height: 150px;
    }
}

/* Adjust width for small screens */
@media screen and (max-width: 576px) {
    #signaturePad[b-4be48wy06o] {
        width: 100%;
        height: auto;
    }
}
/* /Pages/SavedOrders/List.razor.rz.scp.css */
.row[b-hs4bn8jkrq]{
    margin-left: 0px;
    margin-right: 0px;
}
/* /Pages/Templates/index.razor.rz.scp.css */
.btn-primary[b-5qfypukvqb] {
    min-width: 75px;
    border-radius: 50px;
    padding: 5px 22px;
    color: #004085;
    background-color: #f8f9fa;
    border-color: #007bff;
    margin: 5px;
}
.info-pill[b-5qfypukvqb]{
    width: 100px !important;
    margin: 3px 1px !important;
    padding: 1px 5px !important;
    color: white;
    font-width: bold;
}
input[b-5qfypukvqb]{
    border-radius: 50px;
    border-width: 1px;
    width: 100%;
    color: #004085;
    background-color: #f8f9fa;
    border-color: #007bff;
}

@media  (max-width: 450px) {
    .ProductDisplayBox h5[b-5qfypukvqb]{
        font-size: 90%;
        font-weight: bold;
    }
}
/* /Pages/TimeCard/BreakIn.razor.rz.scp.css */
.break-in-container[b-hqa2x04xip] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
}

.break-in-container[b-hqa2x04xip]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.05"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.05"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    pointer-events: none;
}

/* Header Section */
.page-header[b-hqa2x04xip] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 3rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-content[b-hqa2x04xip] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon .icon-circle[b-hqa2x04xip] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(238, 90, 111, 0.4);
}

.header-icon i[b-hqa2x04xip] {
    font-size: 2rem;
    color: white;
}

.header-text h1[b-hqa2x04xip] {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.header-text p[b-hqa2x04xip] {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    margin: 0;
}

.current-time[b-hqa2x04xip] {
    text-align: right;
    color: white;
}

.time-display[b-hqa2x04xip] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.time-display .time[b-hqa2x04xip] {
    font-size: 2.5rem;
    font-weight: 300;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.time-display .period[b-hqa2x04xip] {
    font-size: 1.25rem;
    opacity: 0.8;
}

.date-display[b-hqa2x04xip] {
    font-size: 0.95rem;
    opacity: 0.8;
}

/* Break Types Section */
.break-types-section[b-hqa2x04xip] {
    margin-bottom: 3rem;
}

.section-title[b-hqa2x04xip] {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.break-types-grid[b-hqa2x04xip] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.break-type-card[b-hqa2x04xip] {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid transparent;
    border-radius: 20px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.break-type-card:hover[b-hqa2x04xip] {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    border-color: rgba(102, 126, 234, 0.3);
}

.break-type-card.selected[b-hqa2x04xip] {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    box-shadow: 0 16px 48px rgba(102, 126, 234, 0.3);
}

.break-type-card:disabled[b-hqa2x04xip] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.card-icon[b-hqa2x04xip] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    position: relative;
}

.card-icon.lunch[b-hqa2x04xip] {
    background: linear-gradient(135deg, #ff9a9e, #fecfef);
}

.card-icon.rest[b-hqa2x04xip] {
    background: linear-gradient(135deg, #a8edea, #fed6e3);
}

.card-icon.personal[b-hqa2x04xip] {
    background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
}

.card-icon.other[b-hqa2x04xip] {
    background: linear-gradient(135deg, #fdbb2d, #22c1c3);
}

.card-content h3[b-hqa2x04xip] {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
}

.card-content p[b-hqa2x04xip] {
    margin: 0;
    color: #6c757d;
    font-size: 0.9rem;
}

.card-indicator[b-hqa2x04xip] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #28a745;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.break-type-card.selected .card-indicator[b-hqa2x04xip] {
    opacity: 1;
    transform: scale(1);
}

/* Time Section */
.time-section[b-hqa2x04xip] {
    margin-bottom: 3rem;
}

.time-card[b-hqa2x04xip] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.time-header[b-hqa2x04xip] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.time-header h3[b-hqa2x04xip] {
    margin: 0;
    color: #2c3e50;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.time-toggle[b-hqa2x04xip] {
    display: flex;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 0.25rem;
}

.toggle-btn[b-hqa2x04xip] {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #6c757d;
    transition: all 0.3s ease;
    cursor: pointer;
}

.toggle-btn.active[b-hqa2x04xip] {
    background: white;
    color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.current-time-display[b-hqa2x04xip] {
    text-align: center;
    padding: 2rem 0;
}

.time-badge[b-hqa2x04xip] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1.25rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    margin-bottom: 1rem;
}

.time-description[b-hqa2x04xip] {
    color: #6c757d;
    margin: 0;
    font-size: 0.95rem;
}

.custom-time-input[b-hqa2x04xip] {
    text-align: center;
}

.time-input[b-hqa2x04xip] {
    padding: 1rem;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 1.25rem;
    text-align: center;
    width: 200px;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.time-input:focus[b-hqa2x04xip] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Action Section */
.action-section[b-hqa2x04xip] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.start-break-btn[b-hqa2x04xip] {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 1.25rem 3rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(40, 167, 69, 0.3);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 250px;
    justify-content: center;
}

.start-break-btn:hover:not(:disabled)[b-hqa2x04xip] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(40, 167, 69, 0.4);
}

.start-break-btn:disabled[b-hqa2x04xip] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.start-break-btn.loading[b-hqa2x04xip] {
    background: linear-gradient(135deg, #6c757d, #adb5bd);
}

.loading-spinner[b-hqa2x04xip] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-hqa2x04xip 1s linear infinite;
}

.select-prompt[b-hqa2x04xip] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    padding: 1rem;
}

.select-prompt i[b-hqa2x04xip] {
    font-size: 1.5rem;
    animation: bounce-b-hqa2x04xip 2s infinite;
}

.cancel-btn[b-hqa2x04xip] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cancel-btn:hover:not(:disabled)[b-hqa2x04xip] {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Progress Overlay */
.progress-overlay[b-hqa2x04xip] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-hqa2x04xip 0.3s ease;
}

.progress-content[b-hqa2x04xip] {
    background: white;
    padding: 3rem;
    border-radius: 24px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.progress-spinner[b-hqa2x04xip] {
    width: 60px;
    height: 60px;
    border: 4px solid #e9ecef;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin-b-hqa2x04xip 1s linear infinite;
    margin: 0 auto 2rem;
}

.progress-content h3[b-hqa2x04xip] {
    margin: 0 0 1rem 0;
    color: #2c3e50;
    font-size: 1.5rem;
    font-weight: 600;
}

.progress-content p[b-hqa2x04xip] {
    margin: 0;
    color: #6c757d;
}

/* Animations */
@keyframes spin-b-hqa2x04xip {
    to { transform: rotate(360deg); }
}

@keyframes bounce-b-hqa2x04xip {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes fadeIn-b-hqa2x04xip {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .break-in-container[b-hqa2x04xip] {
        padding: 1rem;
    }

    .page-header[b-hqa2x04xip] {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .header-content[b-hqa2x04xip] {
        flex-direction: column;
        text-align: center;
    }

    .break-types-grid[b-hqa2x04xip] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }

    .time-header[b-hqa2x04xip] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .start-break-btn[b-hqa2x04xip] {
        min-width: auto;
        width: 100%;
    }

    .header-text h1[b-hqa2x04xip] {
        font-size: 2rem;
    }

    .time-display .time[b-hqa2x04xip] {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .break-types-grid[b-hqa2x04xip] {
        grid-template-columns: 1fr;
    }

    .break-type-card[b-hqa2x04xip] {
        padding: 1rem;
    }

    .card-icon[b-hqa2x04xip] {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
}
/* /Pages/TimeCard/BreakOut.razor.rz.scp.css */
.break-out-container[b-8m4noijz27] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    position: relative;
}

.break-out-container[b-8m4noijz27]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
    pointer-events: none;
}

/* Header Section */
.page-header[b-8m4noijz27] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 3rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.header-content[b-8m4noijz27] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon .icon-circle[b-8m4noijz27] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(40, 167, 69, 0.4);
    animation: pulse-b-8m4noijz27 2s ease-in-out infinite;
}

.header-icon i[b-8m4noijz27] {
    font-size: 2rem;
    color: white;
}

.header-text h1[b-8m4noijz27] {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.header-text p[b-8m4noijz27] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin: 0;
}

.current-time[b-8m4noijz27] {
    text-align: right;
    color: white;
}

.time-display[b-8m4noijz27] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.time-display .time[b-8m4noijz27] {
    font-size: 2.5rem;
    font-weight: 300;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.time-display .period[b-8m4noijz27] {
    font-size: 1.25rem;
    opacity: 0.8;
}

.date-display[b-8m4noijz27] {
    font-size: 0.95rem;
    opacity: 0.8;
}

/* Break Summary Section */
.break-summary-section[b-8m4noijz27] {
    margin-bottom: 3rem;
}

.summary-card[b-8m4noijz27] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    padding: 2rem;
    backdrop-filter: blur(20px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.summary-header[b-8m4noijz27] {
    text-align: center;
    margin-bottom: 2rem;
}

.summary-header h2[b-8m4noijz27] {
    color: #2c3e50;
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.summary-content[b-8m4noijz27] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
}

.break-info[b-8m4noijz27] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-item[b-8m4noijz27] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(79, 172, 254, 0.1);
    border-radius: 12px;
    border-left: 4px solid #4facfe;
}

.info-item .label[b-8m4noijz27] {
    font-weight: 500;
    color: #6c757d;
}

.info-item .value[b-8m4noijz27] {
    font-weight: 600;
    color: #2c3e50;
}

.info-item .value.duration[b-8m4noijz27] {
    color: #4facfe;
    font-size: 1.1rem;
}

.break-visual[b-8m4noijz27] {
    display: flex;
    justify-content: center;
}

.progress-circle[b-8m4noijz27] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(79, 172, 254, 0.3);
    animation: float-b-8m4noijz27 3s ease-in-out infinite;
}

.progress-inner[b-8m4noijz27] {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #4facfe;
}

/* Time Selection Section */
.time-selection-section[b-8m4noijz27] {
    margin-bottom: 3rem;
}

.time-card[b-8m4noijz27] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.time-header[b-8m4noijz27] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.time-header h3[b-8m4noijz27] {
    margin: 0;
    color: #2c3e50;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.time-toggle[b-8m4noijz27] {
    display: flex;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 0.25rem;
}

.toggle-btn[b-8m4noijz27] {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #6c757d;
    transition: all 0.3s ease;
    cursor: pointer;
}

.toggle-btn.active[b-8m4noijz27] {
    background: white;
    color: #4facfe;
    box-shadow: 0 2px 8px rgba(79, 172, 254, 0.2);
}

.current-time-display[b-8m4noijz27] {
    text-align: center;
    padding: 2rem 0;
}

.time-badge[b-8m4noijz27] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1.25rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(79, 172, 254, 0.3);
    margin-bottom: 1rem;
}

.time-description[b-8m4noijz27] {
    color: #6c757d;
    margin: 0;
    font-size: 0.95rem;
}

.custom-time-input[b-8m4noijz27] {
    text-align: center;
}

.time-input[b-8m4noijz27] {
    padding: 1rem;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 1.25rem;
    text-align: center;
    width: 200px;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.time-input:focus[b-8m4noijz27] {
    outline: none;
    border-color: #4facfe;
    box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
}

/* Quick Actions Section */
.quick-actions-section[b-8m4noijz27] {
    margin-bottom: 3rem;
}

.actions-title[b-8m4noijz27] {
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.actions-grid[b-8m4noijz27] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.action-card[b-8m4noijz27] {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.action-card:hover:not(:disabled)[b-8m4noijz27] {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    border-color: rgba(79, 172, 254, 0.3);
}

.action-card:disabled[b-8m4noijz27] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.action-icon[b-8m4noijz27] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.action-icon.extend[b-8m4noijz27] {
    background: linear-gradient(135deg, #ffc107, #ff8c00);
}

.action-icon.end-now[b-8m4noijz27] {
    background: linear-gradient(135deg, #28a745, #20c997);
}

.action-text h4[b-8m4noijz27] {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
}

.action-text p[b-8m4noijz27] {
    margin: 0;
    font-size: 0.875rem;
    color: #6c757d;
}

/* Main Action Section */
.action-section[b-8m4noijz27] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.end-break-btn[b-8m4noijz27] {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 1.25rem 3rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(40, 167, 69, 0.3);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 280px;
    justify-content: center;
}

.end-break-btn:hover:not(:disabled)[b-8m4noijz27] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(40, 167, 69, 0.4);
}

.end-break-btn:disabled[b-8m4noijz27] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.end-break-btn.loading[b-8m4noijz27] {
    background: linear-gradient(135deg, #6c757d, #adb5bd);
}

.loading-spinner[b-8m4noijz27] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-8m4noijz27 1s linear infinite;
}

.cancel-btn[b-8m4noijz27] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cancel-btn:hover:not(:disabled)[b-8m4noijz27] {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Progress Overlay */
.progress-overlay[b-8m4noijz27] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-8m4noijz27 0.3s ease;
}

.progress-content[b-8m4noijz27] {
    background: white;
    padding: 3rem;
    border-radius: 24px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.progress-spinner[b-8m4noijz27] {
    width: 60px;
    height: 60px;
    border: 4px solid #e9ecef;
    border-top-color: #4facfe;
    border-radius: 50%;
    animation: spin-b-8m4noijz27 1s linear infinite;
    margin: 0 auto 2rem;
}

.progress-content h3[b-8m4noijz27] {
    margin: 0 0 1rem 0;
    color: #2c3e50;
    font-size: 1.5rem;
    font-weight: 600;
}

.progress-content p[b-8m4noijz27] {
    margin: 0;
    color: #6c757d;
}

/* Animations */
@keyframes spin-b-8m4noijz27 {
    to { transform: rotate(360deg); }
}

@keyframes pulse-b-8m4noijz27 {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes float-b-8m4noijz27 {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes fadeIn-b-8m4noijz27 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .break-out-container[b-8m4noijz27] {
        padding: 1rem;
    }

    .page-header[b-8m4noijz27] {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .header-content[b-8m4noijz27] {
        flex-direction: column;
        text-align: center;
    }

    .summary-content[b-8m4noijz27] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }

    .actions-grid[b-8m4noijz27] {
        grid-template-columns: 1fr;
    }

    .time-header[b-8m4noijz27] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .end-break-btn[b-8m4noijz27] {
        min-width: auto;
        width: 100%;
    }

    .header-text h1[b-8m4noijz27] {
        font-size: 2rem;
    }

    .time-display .time[b-8m4noijz27] {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .action-card[b-8m4noijz27] {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .info-item[b-8m4noijz27] {
        flex-direction: column;
        gap: 0.25rem;
        text-align: center;
    }

    .progress-circle[b-8m4noijz27] {
        width: 100px;
        height: 100px;
    }

    .progress-inner[b-8m4noijz27] {
        width: 70px;
        height: 70px;
        font-size: 1.5rem;
    }
}
/* /Pages/TimeCard/CheckIn.razor.rz.scp.css */
.check-in-container[b-cviwk2vnoo] {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.header-section[b-cviwk2vnoo] {
    text-align: center;
    margin-bottom: 3rem;
}

.header-section h2[b-cviwk2vnoo] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #28a745;
    margin-bottom: 0.5rem;
}

.steps-container[b-cviwk2vnoo] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.step-card[b-cviwk2vnoo] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.step-card:hover[b-cviwk2vnoo] {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.step-card.completed[b-cviwk2vnoo] {
    border-left: 4px solid #28a745;
}

.step-number[b-cviwk2vnoo] {
    position: absolute;
    top: -12px;
    left: -12px;
    width: 30px;
    height: 30px;
    background: #28a745;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.card-content[b-cviwk2vnoo] {
    padding-left: 1rem;
}

.card-content h5[b-cviwk2vnoo] {
    color: #2c3e50;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.time-selector[b-cviwk2vnoo] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.current-time[b-cviwk2vnoo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.time-input[b-cviwk2vnoo] {
    width: 200px;
    padding: 0.5rem;
    border-radius: 8px;
}

.signature-section[b-cviwk2vnoo] {
    margin-top: 1.5rem;
}

.signature-container[b-cviwk2vnoo] {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 0.5rem;
    margin: 0.5rem 0;
}

.signature-pad[b-cviwk2vnoo] {
    width: 100%;
    background: #fff;
    border-radius: 6px;
}

.submit-section[b-cviwk2vnoo] {
    margin-top: 2rem;
    text-align: center;
}

.submit-button[b-cviwk2vnoo] {
    padding: 1rem 3rem;
    font-weight: 600;
    border-radius: 30px;
    min-width: 200px;
}

.modern-dropdown[b-cviwk2vnoo] {
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

@media (max-width: 768px) {
    .check-in-container[b-cviwk2vnoo] {
        padding: 1rem;
    }

    .header-section h2[b-cviwk2vnoo] {
        font-size: 2rem;
    }
}
/* /Pages/TimeCard/CheckOut.razor.rz.scp.css */
.check-out-container[b-bdpitmmdp9] {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.header-section[b-bdpitmmdp9] {
    text-align: center;
    margin-bottom: 3rem;
}

.header-section h2[b-bdpitmmdp9] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #007bff;
    margin-bottom: 0.5rem;
}

.steps-container[b-bdpitmmdp9] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.step-card[b-bdpitmmdp9] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.step-card:hover[b-bdpitmmdp9] {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.step-card.completed[b-bdpitmmdp9] {
    border-left: 4px solid #007bff;
}

.step-number[b-bdpitmmdp9] {
    position: absolute;
    top: -12px;
    left: -12px;
    width: 30px;
    height: 30px;
    background: #007bff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.card-content[b-bdpitmmdp9] {
    padding-left: 1rem;
}

.card-content h5[b-bdpitmmdp9] {
    color: #2c3e50;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.store-info[b-bdpitmmdp9] {
    margin-bottom: 1rem;
}

.location-display[b-bdpitmmdp9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.location-input[b-bdpitmmdp9] {
    background-color: #f8f9fa;
    border-radius: 8px;
    font-weight: 500;
}

.time-selector[b-bdpitmmdp9] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.current-time[b-bdpitmmdp9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.time-input[b-bdpitmmdp9] {
    width: 200px;
    padding: 0.5rem;
    border-radius: 8px;
}

.signature-section[b-bdpitmmdp9] {
    margin-top: 1.5rem;
}

.signature-container[b-bdpitmmdp9] {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 0.5rem;
    margin: 0.5rem 0;
}

.signature-pad[b-bdpitmmdp9] {
    width: 100%;
    background: #fff;
    border-radius: 6px;
}

.submit-section[b-bdpitmmdp9] {
    margin-top: 2rem;
    text-align: center;
}

.submit-button[b-bdpitmmdp9] {
    padding: 1rem 3rem;
    font-weight: 600;
    border-radius: 30px;
    min-width: 200px;
}

@media (max-width: 768px) {
    .check-out-container[b-bdpitmmdp9] {
        padding: 1rem;
    }

    .header-section h2[b-bdpitmmdp9] {
        font-size: 2rem;
    }
}
/* /Pages/TimeCard/ClockIn.razor.rz.scp.css */
.clock-in-container[b-72aadxghth] {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.header-section[b-72aadxghth] {
    text-align: center;
    margin-bottom: 3rem;
}

.header-section h2[b-72aadxghth] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.steps-container[b-72aadxghth] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.step-card[b-72aadxghth] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.step-card:hover[b-72aadxghth] {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.step-card.completed[b-72aadxghth] {
    border-left: 4px solid #28a745;
}

.step-number[b-72aadxghth] {
    position: absolute;
    top: -12px;
    left: -12px;
    width: 30px;
    height: 30px;
    background: #007bff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.card-content[b-72aadxghth] {
    padding-left: 1rem;
}

.card-content h5[b-72aadxghth] {
    color: #2c3e50;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.time-selector[b-72aadxghth] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.current-time[b-72aadxghth] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.time-input[b-72aadxghth] {
    width: 200px;
    padding: 0.5rem;
    border-radius: 8px;
}

.signature-section[b-72aadxghth] {
    margin-top: 1.5rem;
}

.signature-container[b-72aadxghth] {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 0.5rem;
    margin: 0.5rem 0;
}

.signature-pad[b-72aadxghth] {
    width: 100%;
    background: #fff;
    border-radius: 6px;
}

.submit-section[b-72aadxghth] {
    margin-top: 2rem;
    text-align: center;
}

.submit-button[b-72aadxghth] {
    padding: 1rem 3rem;
    font-weight: 600;
    border-radius: 30px;
    min-width: 200px;
}

.modern-dropdown[b-72aadxghth] {
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* Animation for completed steps */
.step-card.completed .step-number[b-72aadxghth] {
    background: #28a745;
    transition: background 0.3s ease;
}

@media (max-width: 768px) {
    .clock-in-container[b-72aadxghth] {
        padding: 1rem;
    }

    .header-section h2[b-72aadxghth] {
        font-size: 2rem;
    }
}
/* /Pages/TimeCard/ClockOut.razor.rz.scp.css */
.clock-out-container[b-6nejb94hxl] {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.header-section[b-6nejb94hxl] {
    text-align: center;
    margin-bottom: 3rem;
}

.header-section h2[b-6nejb94hxl] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #dc3545;
    margin-bottom: 0.5rem;
}

.steps-container[b-6nejb94hxl] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.step-card[b-6nejb94hxl] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.step-card:hover[b-6nejb94hxl] {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.step-card.completed[b-6nejb94hxl] {
    border-left: 4px solid #dc3545;
}

.step-number[b-6nejb94hxl] {
    position: absolute;
    top: -12px;
    left: -12px;
    width: 30px;
    height: 30px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.card-content[b-6nejb94hxl] {
    padding-left: 1rem;
}

.card-content h5[b-6nejb94hxl] {
    color: #2c3e50;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.store-info[b-6nejb94hxl] {
    margin-bottom: 1rem;
}

.location-display[b-6nejb94hxl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.location-input[b-6nejb94hxl] {
    background-color: #f8f9fa;
    border-radius: 8px;
    font-weight: 500;
}

.time-selector[b-6nejb94hxl] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.current-time[b-6nejb94hxl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.time-display[b-6nejb94hxl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 500;
}

.time-input[b-6nejb94hxl] {
    width: 200px;
    padding: 0.5rem;
    border-radius: 8px;
}

.signature-section[b-6nejb94hxl] {
    margin-top: 1.5rem;
}

.signature-container[b-6nejb94hxl] {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 0.5rem;
    margin: 0.5rem 0;
}

.signature-pad[b-6nejb94hxl] {
    width: 100%;
    background: #fff;
    border-radius: 6px;
}

.submit-section[b-6nejb94hxl] {
    margin-top: 2rem;
    text-align: center;
}

.submit-button[b-6nejb94hxl] {
    padding: 1rem 3rem;
    font-weight: 600;
    border-radius: 30px;
    min-width: 200px;
}

.last-worked-time[b-6nejb94hxl] {
    font-weight: 500;
}

.loading-indicator[b-6nejb94hxl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
}

@media (max-width: 768px) {
    .clock-out-container[b-6nejb94hxl] {
        padding: 1rem;
    }

    .header-section h2[b-6nejb94hxl] {
        font-size: 2rem;
    }
}
/* /Pages/TimeCard/Manage/ActiveEmployees.razor.rz.scp.css */
/* Page shell to match management time clock look */
.approvals-page[b-e2lgydc7am] { color: #212529; }
.global-time-display[b-e2lgydc7am] { display:flex; justify-content:flex-end; padding:.5rem 0 1rem; }
.time-orb[b-e2lgydc7am] { background: #ffffff; border:1px solid #dee2e6; border-radius:.375rem; box-shadow:0 .125rem .25rem rgba(0,0,0,.075); }
.time-orb .time-content[b-e2lgydc7am] { display:flex; gap:.75rem; align-items:center; padding:.5rem .75rem; color:#6c757d; font-size:.95rem; }
.current-time[b-e2lgydc7am] { font-weight:600; color:#212529; }
.current-date[b-e2lgydc7am] { opacity:.9; }

/* Container and main card */
.timecard-container[b-e2lgydc7am] { max-width: 1200px; margin: 0 auto; padding: .5rem 0 2rem; }
.main-card[b-e2lgydc7am] { background:#ffffff; border:1px solid #dee2e6; border-radius:.5rem; box-shadow:0 1rem 3rem rgba(0,0,0,.175); overflow:hidden; }

/* Hero header */
.hero-header[b-e2lgydc7am] { border-bottom:1px solid #dee2e6; padding:1.25rem 1.25rem .75rem; }
.hero-content[b-e2lgydc7am] { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.greeting-section[b-e2lgydc7am] { display:flex; flex-direction:column; gap:.5rem; }
.hero-title[b-e2lgydc7am] { margin:0; }
.hero-title .gradient-text[b-e2lgydc7am] { font-size:1.5rem; font-weight:700; letter-spacing:.2px; background:linear-gradient(90deg,#0d6efd,#6610f2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.status-display[b-e2lgydc7am] { display:flex; gap:.75rem; flex-wrap:wrap; }
.status-badge[b-e2lgydc7am] { display:flex; align-items:center; gap:.6rem; border:1px solid #dee2e6; border-radius:999px; padding:.25rem .6rem; background:#E9EDF2; }
.status-badge .badge-icon[b-e2lgydc7am] { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#E8F1F9; color:#0d6efd; }
.status-badge .badge-title[b-e2lgydc7am] { font-weight:600; font-size:.9rem; }
.status-badge .badge-subtitle[b-e2lgydc7am] { font-size:.8rem; color:#6c757d; }

/* Quick stats + refresh controls */
.quick-stats-galaxy[b-e2lgydc7am] { padding: .9rem 1.25rem; border-bottom:1px solid #dee2e6; background:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; }
.stat-constellation[b-e2lgydc7am] { display:flex; gap:.75rem; flex-wrap:wrap; }
.stat-star[b-e2lgydc7am] { background:#ffffff; border:1px solid #dee2e6; border-radius:.375rem; box-shadow:0 .125rem .25rem rgba(0,0,0,.075); display:flex; align-items:center; gap:.6rem; padding:.5rem .75rem; }
.stat-star .star-icon[b-e2lgydc7am] { width:32px; height:32px; border-radius:8px; display:grid; place-items:center; background:#E8F1F9; color:#0d6efd; border:1px solid #dee2e6; }
.star-value[b-e2lgydc7am] { font-weight:700; font-size:1.05rem; }
.star-label[b-e2lgydc7am] { color:#6c757d; font-size:.85rem; }
.stat-star.warning[b-e2lgydc7am] { background:#fff7f7; border-color:#f5c2c7; }

.refresh-controls[b-e2lgydc7am] { display:flex; gap:.5rem; align-items:center; }
.cosmic-refresh-btn[b-e2lgydc7am] { border:1px solid #dee2e6; background:#ffffff; color:#212529; border-radius:.375rem; padding:.45rem .7rem; box-shadow:0 .125rem .25rem rgba(0,0,0,.075); transition: all .15s ease-in-out; }
.cosmic-refresh-btn .btn-content[b-e2lgydc7am] { display:flex; align-items:center; gap:.5rem; }
.cosmic-refresh-btn:hover[b-e2lgydc7am] { border-color:#0d6efd; box-shadow:0 0 0 .2rem rgba(13,110,253,.15); }
.cosmic-refresh-btn.active[b-e2lgydc7am] { background:#E8F1F9; border-color:#0d6efd; color:#0d6efd; }
.cosmic-refresh-btn.manual[disabled][b-e2lgydc7am] { opacity:.6; cursor:not-allowed; }
.loading-spinner[b-e2lgydc7am] { display:grid; place-items:center; width:1rem; height:1rem; animation: spin-b-e2lgydc7am 1.2s linear infinite; }
@keyframes spin-b-e2lgydc7am { to { transform: rotate(360deg); } }

/* Content area */
.content-universe[b-e2lgydc7am] { padding: 1rem 1.25rem 1.25rem; }

/* Loading and empty states */
.loading[b-e2lgydc7am], .empty[b-e2lgydc7am] { display:flex; align-items:center; justify-content:center; min-height: 220px; border:1px dashed #dee2e6; border-radius:.375rem; background:#fff; }
.loading-text[b-e2lgydc7am], .empty-content[b-e2lgydc7am] { text-align:center; padding:1rem; }
.loading-title[b-e2lgydc7am] { font-weight:700; }
.loading-subtitle[b-e2lgydc7am] { color:#6c757d; font-size:.95rem; }
.empty-content h3[b-e2lgydc7am] { margin:0 0 .25rem; font-weight:700; }
.retry-btn[b-e2lgydc7am] { border:1px solid #dee2e6; background:#ffffff; color:#212529; border-radius:.375rem; padding:.45rem .7rem; box-shadow:0 .125rem .25rem rgba(0,0,0,.075); }
.retry-btn:hover[b-e2lgydc7am] { border-color:#0d6efd; box-shadow:0 0 0 .2rem rgba(13,110,253,.15); }

/* Active employees grid */
.active-employees-grid[b-e2lgydc7am] { display:grid; grid-template-columns: 1fr; gap:.75rem; }
@media (min-width: 640px){ .active-employees-grid[b-e2lgydc7am]{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px){ .active-employees-grid[b-e2lgydc7am]{ grid-template-columns: repeat(3, 1fr); } }

.active-employee-card[b-e2lgydc7am] { background:#ffffff; border:1px solid #dee2e6; border-radius:.375rem; box-shadow:0 .125rem .25rem rgba(0,0,0,.075); display:flex; flex-direction:column; }
.active-employee-card.long-shift[b-e2lgydc7am] { border-color:#f5c2c7; box-shadow:0 0 0 .1rem rgba(220,53,69,.075); }

/* Card header */
.employee-header[b-e2lgydc7am] { display:flex; justify-content:space-between; gap:.75rem; padding:.75rem .9rem; border-bottom:1px solid #dee2e6; }
.employee-avatar[b-e2lgydc7am] { position:relative; width:42px; height:42px; border-radius:50%; background:#E9EDF2; color:#0d6efd; display:grid; place-items:center; font-weight:700; }
.status-indicator[b-e2lgydc7am] { position:absolute; width:10px; height:10px; border-radius:50%; border:2px solid #fff; bottom:0; right:0; }
.status-indicator.active[b-e2lgydc7am] { background:#28a745; }
.status-indicator.at-store[b-e2lgydc7am] { background:#0d6efd; }
.status-indicator.long-shift[b-e2lgydc7am] { background:#dc3545; }
.employee-info[b-e2lgydc7am] { display:flex; flex-direction:column; gap:.25rem; }
.employee-name[b-e2lgydc7am] { margin:0; font-size:1rem; font-weight:700; }
.employee-status .status-badge[b-e2lgydc7am] { display:inline-flex; align-items:center; gap:.4rem; border:1px solid #dee2e6; border-radius:999px; padding:.15rem .5rem; background:#fff; color:#6c757d; font-size:.85rem; }

/* Time metrics */
.time-metrics[b-e2lgydc7am] { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:.6rem; padding:.75rem .9rem; }
.time-metric[b-e2lgydc7am] { background:#ffffff; border:1px solid #dee2e6; border-radius:.375rem; padding:.55rem .6rem; display:flex; gap:.5rem; align-items:center; box-shadow:0 .05rem .15rem rgba(0,0,0,.04); }
.time-metric .metric-icon[b-e2lgydc7am] { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:#E8F1F9; color:#0d6efd; border:1px solid #dee2e6; }
.metric-content[b-e2lgydc7am] { display:flex; flex-direction:column; line-height:1.15; }
.metric-label[b-e2lgydc7am] { color:#6c757d; font-size:.85rem; }
.metric-value[b-e2lgydc7am] { font-weight:700; }

/* Store visits */
.store-visits[b-e2lgydc7am] { padding: .25rem .9rem .9rem; display:flex; flex-direction:column; gap:.5rem; }
.visits-header[b-e2lgydc7am] { display:flex; align-items:center; gap:.4rem; color:#6c757d; font-weight:600; }
.visits-list[b-e2lgydc7am] { display:flex; flex-direction:column; gap:.45rem; }
.store-visit[b-e2lgydc7am] { display:flex; justify-content:space-between; align-items:center; border:1px solid #dee2e6; border-radius:.375rem; padding:.45rem .6rem; background:#fff; }
.store-name[b-e2lgydc7am] { font-weight:600; }
.visit-duration[b-e2lgydc7am] { color:#6c757d; font-feature-settings:"tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; }
/* /Pages/TimeCard/Manage/ClockSummaryReport.razor.rz.scp.css */
/* ClockSummaryReport — Scoped styles aligned with TimeCardApprovalList look & feel
   Calm, refined, accessible. Fixed values (no CSS variables). */

/* Page shell */
.approvals-page[b-5318fwjsso] {
  color: #212529;
}

/* Global time display (shared) */
.global-time-display[b-5318fwjsso] { display:flex; justify-content:flex-end; padding:.5rem 0 1rem; }
.time-summary[b-5318fwjsso] { background: #ffffff; border:1px solid #dee2e6; border-radius: .375rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.time-summary .time-content[b-5318fwjsso] { display:flex; gap:.75rem; align-items:center; padding:.5rem .75rem; color: #6c757d; font-size:.95rem; }
.current-time[b-5318fwjsso] { font-weight:600; color: #212529; }
.current-date[b-5318fwjsso] { opacity:.9; }

/* Container/Card (shared) */
.timecard-container[b-5318fwjsso] { max-width: 1200px; margin: 0 auto; padding: .5rem 0 2rem; }
.main-card[b-5318fwjsso] { background: #ffffff; border:1px solid #dee2e6; border-radius: .5rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.175); overflow:hidden; }

/* Hero header (shared) */
.hero-header[b-5318fwjsso] { border-bottom:1px solid #dee2e6; padding:1.25rem 1.25rem .75rem; }
.hero-content[b-5318fwjsso] { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.greeting-section[b-5318fwjsso] { display:flex; flex-direction:column; gap:.5rem; }
.hero-title[b-5318fwjsso] { margin:0; }
.hero-title .title-text[b-5318fwjsso], .hero-title .gradient-text[b-5318fwjsso] { font-size:1.5rem; font-weight:700; letter-spacing:.2px; }
.status-display[b-5318fwjsso] { display:flex; gap:.75rem; flex-wrap:wrap; }
.status-badge[b-5318fwjsso] { display:flex; align-items:center; gap:.6rem; border:1px solid #dee2e6; border-radius:999px; padding:.25rem .6rem; background: #E9EDF2; }
.status-badge .badge-icon[b-5318fwjsso] { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#E8F1F9; color: #0d6efd; }
.status-badge .badge-title[b-5318fwjsso] { font-weight:600; font-size:.9rem; }
.status-badge .badge-subtitle[b-5318fwjsso] { font-size:.8rem; color: #6c757d; }

/* Command center (shared) */
.command-center[b-5318fwjsso] { position: sticky; top: 64px; z-index: 102; padding: 1rem 1.25rem; border-bottom: 1px solid #dee2e6; background: #ffffff; backdrop-filter: saturate(120%) blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.command-header[b-5318fwjsso] { display:flex; align-items:center; gap:.6rem; margin-bottom:.75rem; }
.command-title[b-5318fwjsso] { margin:0; font-size:1.1rem; font-weight:600; }

/* Date selector as cards, aligned with approvals inputs */
.date-selector-grid[b-5318fwjsso] { display:grid; grid-template-columns: repeat(3, 1fr); gap:.75rem; }
@media (max-width: 992px){ .date-selector-grid[b-5318fwjsso]{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px){ .date-selector-grid[b-5318fwjsso]{ grid-template-columns: 1fr; } }
.date-card[b-5318fwjsso], .action-card[b-5318fwjsso] { background: #ffffff; border:1px solid #dee2e6; border-radius: .375rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); position:relative; overflow:hidden; }
.date-card .card-content[b-5318fwjsso] { display:flex; flex-direction:column; gap:.35rem; padding:.65rem .75rem; }
.date-label[b-5318fwjsso] { font-weight:600; color: #6c757d; font-size:.9rem; }
.cosmic-date-input[b-5318fwjsso] { border:1px solid #dee2e6; border-radius: .375rem; padding:.45rem .6rem; background:#fff; color: #212529; }
.cosmic-date-input:focus[b-5318fwjsso] { outline:none; border-color: #0d6efd; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }

.action-card[b-5318fwjsso] { display:flex; align-items:stretch; }
.cosmic-action-btn[b-5318fwjsso] { width:100%; border:1px solid #dee2e6; background: #0d6efd; color:#fff; border-radius: .375rem; padding:.6rem .9rem; font-weight:600; display:flex; align-items:center; justify-content:center; gap:.5rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.cosmic-action-btn:hover[b-5318fwjsso] { background: #0b5ed7; }
.cosmic-action-btn:disabled[b-5318fwjsso] { opacity:.6; cursor:not-allowed; }
.cosmic-action-btn .loading-spinner[b-5318fwjsso] { display:inline-grid; place-items:center; }

/* Content area (shared naming) */
.content-universe[b-5318fwjsso], .content[b-5318fwjsso] { padding: 1rem 1.25rem 1.25rem; }

/* Loading/Error (shared styles) */
.loading[b-5318fwjsso] { display:flex; align-items:center; justify-content:center; min-height: 200px; border:1px dashed #dee2e6; border-radius: .375rem; }
.loading-text[b-5318fwjsso] { text-align:center; }
.loading-title[b-5318fwjsso] { font-weight:700; }
.loading-subtitle[b-5318fwjsso] { color: #6c757d; font-size:.95rem; }

.error-block[b-5318fwjsso] { border:1px solid #E7A6A6; border-radius: .375rem; background:#FBEAEA; color:#7b1f1f; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.error-content[b-5318fwjsso] { padding:1rem; }
.error-content h3[b-5318fwjsso] { margin:0 0 .25rem; font-weight:700; }

/* Stats section aligned to approvals cards */
.stats-galaxy[b-5318fwjsso] { border:1px solid #dee2e6; border-radius: .375rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); background: #ffffff; margin-bottom:1rem; }
.galaxy-header[b-5318fwjsso] { display:flex; align-items:center; gap:.6rem; padding:.75rem .9rem; border-bottom:1px solid #dee2e6; }
.galaxy-icon[b-5318fwjsso] { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#E8F1F9; color: #0d6efd; }
.stats-constellation[b-5318fwjsso] { display:grid; grid-template-columns: repeat(4, 1fr); gap:.75rem; padding:.75rem; }
@media (max-width: 768px){ .stats-constellation[b-5318fwjsso]{ grid-template-columns: repeat(2, 1fr); } }
.stat-star[b-5318fwjsso] { border:1px solid #dee2e6; border-radius: .375rem; padding:.75rem; background:#fff; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); position:relative; }
.stat-star .star-icon[b-5318fwjsso] { color: #0d6efd; margin-bottom:.35rem; }
.stat-star .star-value[b-5318fwjsso] { font-size:1.25rem; font-weight:700; }
.stat-star .star-label[b-5318fwjsso] { color: #6c757d; font-size:.9rem; }

/* Employee cards */
.employee-solar-system[b-5318fwjsso] { display:flex; flex-direction:column; gap: .9rem; }
.employee-planet[b-5318fwjsso] { border:1px solid #dee2e6; border-radius: .5rem; background: #ffffff; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); overflow:hidden; }
.planet-header[b-5318fwjsso] { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem .9rem; border-bottom:1px solid #dee2e6; }
.planet-icon[b-5318fwjsso] { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#E8F1F9; color: #0d6efd; }
.planet-info h3[b-5318fwjsso] { margin:0; font-size:1.1rem; font-weight:700; }
.employee-summary[b-5318fwjsso] { color: #6c757d; font-size:.9rem; }
.planet-surface[b-5318fwjsso] { padding:.9rem; }
.employee-metrics[b-5318fwjsso] { display:grid; grid-template-columns: repeat(6, minmax(110px, 1fr)); gap:.6rem; }
@media (max-width: 1100px){ .employee-metrics[b-5318fwjsso]{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){ .employee-metrics[b-5318fwjsso]{ grid-template-columns: repeat(2, 1fr); } }
.metric[b-5318fwjsso] { border:1px solid #dee2e6; border-radius: .375rem; background:#fff; padding:.6rem .7rem; text-align:center; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.metric.warning[b-5318fwjsso] { background:#FFF5F5; border-color:#F3C3C3; }
.metric .metric-value[b-5318fwjsso] { font-weight:700; font-size:1.1rem; }
.metric .metric-label[b-5318fwjsso] { color: #6c757d; font-size:.85rem; }

.employee-actions[b-5318fwjsso] { display:flex; justify-content:flex-end; padding:.5rem 0 0; }
.expand-btn[b-5318fwjsso] { border:1px solid #dee2e6; background:#fff; color: #212529; border-radius:999px; padding:.4rem .75rem; display:flex; align-items:center; gap:.4rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.expand-btn.expanded[b-5318fwjsso] { background:#EEF6FF; border-color:#B6DAFF; color:#053969; }

.details-header[b-5318fwjsso] { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem 0 .25rem; }
.week-pagination[b-5318fwjsso] { display:flex; align-items:center; gap:.6rem; }
.week-nav-btn[b-5318fwjsso] { border:1px solid #dee2e6; background:#fff; border-radius: .375rem; padding:.35rem .6rem; }
.week-indicator[b-5318fwjsso] { font-weight:600; }
.week-date-range[b-5318fwjsso] { color: #6c757d; font-size:.9rem; }
.details-divider[b-5318fwjsso] { height:1px; background: #dee2e6; margin:.5rem 0; }

.daily-records[b-5318fwjsso] { display:flex; flex-direction:column; gap:.6rem; }
.daily-record[b-5318fwjsso] { border:1px solid #dee2e6; border-radius: .375rem; background:#fff; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.daily-record[b-5318fwjsso] { display:grid; grid-template-columns: 140px 1fr; gap:.6rem; padding:.6rem; }
@media (max-width: 700px){ .daily-record[b-5318fwjsso]{ grid-template-columns: 1fr; } }
.record-date .day-name[b-5318fwjsso] { font-weight:700; }
.record-date .date-number[b-5318fwjsso] { color: #6c757d; }

.record-times[b-5318fwjsso] { display:flex; align-items:stretch; gap:.6rem; }
.time-block[b-5318fwjsso] { display:flex; align-items:center; gap:.5rem; border:1px solid #dee2e6; border-radius: .375rem; padding:.4rem .6rem; background:#F9FBFD; }
.time-block.missing[b-5318fwjsso] { background:#FFF5F5; border-color:#F3C3C3; }
.time-icon[b-5318fwjsso] { color: #0d6efd; }
.time-label[b-5318fwjsso] { color: #6c757d; font-size:.85rem; }
.time-connector[b-5318fwjsso] { display:flex; align-items:center; gap:.4rem; color: #6c757d; }
.connector-line[b-5318fwjsso] { width:24px; height:2px; background: #dee2e6; }
.connector-duration[b-5318fwjsso] { font-size:.85rem; }

.record-details-grid[b-5318fwjsso] { display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; color: #6c757d; }
.stores-section[b-5318fwjsso] { display:flex; flex-direction:column; gap:.35rem; }
.stores-header[b-5318fwjsso] { font-weight:600; color: #212529; display:flex; align-items:center; gap:.4rem; }
.stores-list[b-5318fwjsso] { display:flex; flex-wrap:wrap; gap:.35rem; }
.store-pill[b-5318fwjsso] { border:1px solid #dee2e6; border-radius:999px; padding:.25rem .5rem; background:#F7FAFC; }

/* Exports */
.report-actions[b-5318fwjsso] { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.export-btn[b-5318fwjsso], .copy-btn[b-5318fwjsso] { border:1px solid #dee2e6; background:#fff; color: #212529; border-radius: .375rem; padding:.45rem .7rem; display:inline-flex; align-items:center; gap:.5rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.export-btn:hover[b-5318fwjsso], .copy-btn:hover[b-5318fwjsso] { background:#F3F7FB; }

/* Tables (if any) */
.table-container[b-5318fwjsso] { border:1px solid #dee2e6; border-radius: .375rem; overflow:auto; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); background:#fff; }
.table[b-5318fwjsso] { width:100%; border-collapse: separate; border-spacing:0; }
.table th[b-5318fwjsso], .table td[b-5318fwjsso] { border-bottom:1px solid #dee2e6; padding:.6rem .75rem; }
.table th[b-5318fwjsso] { background: #E9EDF2; font-weight:600; }

/* Accessibility focus */
.approvals-page :is(button, [role="button"], select, input):focus[b-5318fwjsso] { outline:none; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); border-color: #0d6efd; }


/* Record details design */
.record-details[b-5318fwjsso] { border-top:1px solid #dee2e6; margin-top:.6rem; padding-top:.6rem; display:flex; flex-direction:column; gap:.5rem; }

/* Inline info chips inside record details */
.break-info[b-5318fwjsso] { display:inline-flex; align-items:center; gap:.4rem; border:1px solid #dee2e6; background:#F7FAFC; color:#212529; border-radius:999px; padding:.25rem .6rem; font-weight:600; }
.break-info i[b-5318fwjsso] { color:#0d6efd; }

/* Stores section within record details */
.stores-section[b-5318fwjsso] { display:flex; flex-direction:column; gap:.5rem; }
.stores-section .stores-header[b-5318fwjsso] { font-weight:600; color:#212529; display:flex; align-items:center; gap:.5rem; }
.stores-section .stores-list[b-5318fwjsso] { display:flex; flex-wrap:wrap; gap:.5rem; }
.store-visit[b-5318fwjsso] { display:inline-flex; align-items:center; gap:.5rem; border:1px solid #dee2e6; background:#F7FAFC; border-radius:999px; padding:.4rem .75rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); max-width: 100%; }
.store-visit .store-name[b-5318fwjsso] { font-weight:600; color:#212529; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-visit .visit-time[b-5318fwjsso] { color:#6c757d; font-size:.85rem; white-space: nowrap; border-left: 1px solid #dee2e6; padding-left: .5rem; margin-left: .25rem; font-variant-numeric: tabular-nums; }
.store-visit:hover[b-5318fwjsso] { background:#F3F7FB; }
@media (max-width: 380px){
  .store-visit[b-5318fwjsso] { flex-direction: column; align-items: flex-start; gap:.25rem; }
  .store-visit .visit-time[b-5318fwjsso] { border-left: 0; padding-left: 0; margin-left: 0; }
}

/* Record actions (View Details button) */
.record-actions[b-5318fwjsso] { display:flex; justify-content:flex-end; margin-top:.4rem; }
.detail-btn[b-5318fwjsso] { border:1px solid #dee2e6; background:#fff; color:#212529; border-radius:.375rem; padding:.45rem .7rem; display:inline-flex; align-items:center; gap:.45rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); font-weight:600; }
.detail-btn:hover[b-5318fwjsso] { background:#F3F7FB; }
.detail-btn:focus[b-5318fwjsso] { outline:none; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); border-color:#0d6efd; }


/* Corporate export buttons (align with approvals look) */
.export-section[b-5318fwjsso] { padding: 1rem 1.25rem 1.25rem; }
.export-buttons[b-5318fwjsso] { display:flex; flex-wrap:wrap; gap:.6rem; }
.cosmic-export-btn[b-5318fwjsso] { border:1px solid #dee2e6; background:#fff; color:#212529; border-radius:.375rem; padding:.55rem .85rem; display:inline-flex; align-items:center; gap:.5rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); font-weight:600; position:relative; overflow:hidden; }
.cosmic-export-btn:hover[b-5318fwjsso] { background:#F3F7FB; }
.cosmic-export-btn:disabled[b-5318fwjsso] { opacity:.6; cursor:not-allowed; }
.cosmic-export-btn .btn-background[b-5318fwjsso], 
.cosmic-export-btn .btn-energy-field[b-5318fwjsso] { display:none; }
.cosmic-export-btn .btn-content[b-5318fwjsso] { display:inline-flex; align-items:center; gap:.45rem; }

/* No-records week styling */
.no-records-week[b-5318fwjsso] { border:1px dashed #dee2e6; border-radius:.375rem; padding: .9rem; color:#6c757d; display:flex; align-items:center; gap:.6rem; background:#fff; }
.no-records-week i[b-5318fwjsso] { color:#0d6efd; }

/* Tighter small-screen adjustments for daily records */
@media (max-width: 380px){
  .record-times[b-5318fwjsso] { flex-direction:column; align-items:stretch; gap:.4rem; }
  .time-connector[b-5318fwjsso] { justify-content:center; }
}
/* /Pages/TimeCard/Manage/Manage.razor.rz.scp.css */
/* Manage — align visuals with Approvals page */
:host[b-qmqomyw9c3] {
  --tc-surface: var(--bs-body-bg);
  --tc-text: var(--bs-body-color);
  --tc-muted: var(--brand-gray-600, #3B4149);
  --tc-border: var(--bs-border-color);
  --tc-primary: var(--bs-primary);
  --tc-primary-hover: var(--brand-primary-hover, #175F98);
  --tc-success: var(--bs-success);
  --tc-danger: var(--bs-danger);
  --tc-info: var(--bs-info);
  --tc-radius: var(--bs-border-radius);
  --tc-radius-lg: var(--bs-border-radius-lg);
  --tc-shadow-sm: var(--bs-box-shadow-sm);
  --tc-shadow: var(--bs-box-shadow);
  --tc-shadow-lg: var(--bs-box-shadow-lg);
  --tc-focus: var(--bs-focus-ring-color);
}

.approvals-page[b-qmqomyw9c3] {
  --tc-surface: var(--bs-body-bg);
  --tc-text: var(--bs-body-color);
  --tc-muted: var(--brand-gray-600, #3B4149);
  --tc-border: var(--bs-border-color);
  --tc-primary: var(--bs-primary);
  --tc-primary-hover: var(--brand-primary-hover, #175F98);
  --tc-success: var(--bs-success);
  --tc-danger: var(--bs-danger);
  --tc-info: var(--bs-info);
  --tc-radius: var(--bs-border-radius);
  --tc-radius-lg: var(--bs-border-radius-lg);
  --tc-shadow-sm: var(--bs-box-shadow-sm);
  --tc-shadow: var(--bs-box-shadow);
  --tc-shadow-lg: var(--bs-box-shadow-lg);
  --tc-focus: var(--bs-focus-ring-color);
  color: var(--tc-text);
}

/* Global time */
.global-time-display[b-qmqomyw9c3] { display:flex; justify-content:flex-end; padding:.5rem 0 1rem; }
.time-orb[b-qmqomyw9c3] { background: var(--tc-surface); border:1px solid var(--tc-border); border-radius: var(--tc-radius); box-shadow: var(--tc-shadow-sm); }
.time-content[b-qmqomyw9c3] { display:flex; gap:.75rem; align-items:center; padding:.5rem .75rem; color: var(--tc-muted); font-size:.95rem; }
.current-time[b-qmqomyw9c3] { font-weight:600; color: var(--tc-text); }

/* Container/Card */
.management-container[b-qmqomyw9c3] { max-width: 1200px; margin: 0 auto; padding: .5rem 0 2rem; }
.main-card[b-qmqomyw9c3] { background: var(--tc-surface); border:1px solid var(--tc-border); border-radius: var(--tc-radius-lg); box-shadow: var(--tc-shadow); overflow:hidden; }

/* Hero */
.hero-header[b-qmqomyw9c3] { border-bottom:1px solid var(--tc-border); padding:1.25rem 1.25rem .75rem; }
.hero-content[b-qmqomyw9c3] { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.greeting-section[b-qmqomyw9c3] { display:flex; flex-direction:column; gap:.5rem; }
.hero-title[b-qmqomyw9c3] { margin:0; }
.hero-title .gradient-text[b-qmqomyw9c3], .hero-title .title-text[b-qmqomyw9c3] { font-size:1.5rem; font-weight:700; letter-spacing:.2px; }
.status-display[b-qmqomyw9c3] { display:flex; gap:.75rem; flex-wrap:wrap; }
.status-badge[b-qmqomyw9c3] { display:flex; align-items:center; gap:.6rem; border:1px solid var(--tc-border); border-radius:999px; padding:.25rem .6rem; background: var(--bs-tertiary-bg, #E9EDF2); }
.status-badge .badge-icon[b-qmqomyw9c3] { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#E8F1F9; color: var(--tc-primary); }
.status-badge .badge-title[b-qmqomyw9c3] { font-weight:600; font-size:.9rem; }
.status-badge .badge-subtitle[b-qmqomyw9c3] { font-size:.8rem; color: var(--tc-muted); }

/* Management Galaxy */
.management-galaxy[b-qmqomyw9c3] { padding: 1rem 1.25rem 1.25rem; }
.galaxy-header[b-qmqomyw9c3] { display:flex; align-items:center; gap:.6rem; padding:.75rem .9rem; border:1px solid var(--tc-border); border-radius: var(--tc-radius); background: var(--tc-surface); box-shadow: var(--tc-shadow-sm); margin-bottom:.9rem; }
.galaxy-icon[b-qmqomyw9c3] { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#E8F1F9; color: var(--tc-primary); }
.management-constellation[b-qmqomyw9c3] { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.9rem; }
@media (max-width: 1100px){ .management-constellation[b-qmqomyw9c3]{ grid-template-columns: 1fr; } }

.management-star[b-qmqomyw9c3] { border:1px solid var(--tc-border); border-radius: var(--tc-radius-lg); background: var(--tc-surface); box-shadow: var(--tc-shadow); overflow:hidden; display:flex; flex-direction:column; }
.star-header[b-qmqomyw9c3] { padding:.75rem .9rem; border-bottom:1px solid var(--tc-border); }
.station-constellation[b-qmqomyw9c3] { display:flex; align-items:center; gap:.6rem; }
.station-icon[b-qmqomyw9c3] { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#E8F1F9; color: var(--tc-primary); }
.station-icon.hub[b-qmqomyw9c3] { background:#E8F1F9; }
.station-info .station-name[b-qmqomyw9c3] { margin:0; font-size:1.1rem; font-weight:700; }
.station-description[b-qmqomyw9c3] { color: var(--tc-muted); font-size:.9rem; }

.star-body[b-qmqomyw9c3] { padding:.85rem .9rem; }
.hub-description[b-qmqomyw9c3] { color: var(--tc-muted); }
.feature-matrix[b-qmqomyw9c3] { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.6rem; }
@media (max-width: 900px){ .feature-matrix[b-qmqomyw9c3]{ grid-template-columns: repeat(2, 1fr);} }
.feature-item[b-qmqomyw9c3] { border:1px solid var(--tc-border); border-radius: var(--tc-radius); background:#fff; padding:.6rem .7rem; display:flex; align-items:center; gap:.5rem; box-shadow: var(--tc-shadow-sm); }

.star-footer[b-qmqomyw9c3] { padding:.75rem .9rem; border-top:1px solid var(--tc-border); display:flex; justify-content:flex-end; }
.action-portal .cosmic-btn[b-qmqomyw9c3] { border:1px solid var(--tc-border); background: var(--tc-primary); color:#fff; border-radius: var(--tc-radius); padding:.5rem .8rem; display:inline-flex; align-items:center; gap:.5rem; box-shadow: var(--tc-shadow-sm); text-decoration:none; }
.action-portal .cosmic-btn:hover[b-qmqomyw9c3] { background: var(--tc-primary-hover); color:#fff; }

/* Apps grid cards */
.app-grid[b-qmqomyw9c3] { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.9rem; }
@media (max-width: 1100px){ .app-grid[b-qmqomyw9c3]{ grid-template-columns: 1fr; } }
.app-card[b-qmqomyw9c3] { border:1px solid var(--tc-border); border-radius: var(--tc-radius-lg); background: var(--tc-surface); box-shadow: var(--tc-shadow); overflow:hidden; display:flex; flex-direction:column; }
.app-card .card-header[b-qmqomyw9c3] { padding:.75rem .9rem; border-bottom:1px solid var(--tc-border); display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.app-card .card-title[b-qmqomyw9c3] { margin:0; font-size:1.05rem; font-weight:700; }
.app-card .card-body[b-qmqomyw9c3] { padding:.85rem .9rem; color: var(--tc-muted); }
.app-card .card-actions[b-qmqomyw9c3] { padding:.75rem .9rem; border-top:1px solid var(--tc-border); display:flex; gap:.5rem; justify-content:flex-end; }
.app-card .btn[b-qmqomyw9c3] { border:1px solid var(--tc-border); background:#fff; color: var(--tc-text); border-radius: var(--tc-radius); padding:.45rem .7rem; display:inline-flex; align-items:center; gap:.5rem; box-shadow: var(--tc-shadow-sm); text-decoration:none; }
.app-card .btn:hover[b-qmqomyw9c3] { background:#F3F7FB; }

/* Focus */
.approvals-page :is(a.btn, button, [role="button"], select, input):focus[b-qmqomyw9c3] { outline:none; box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--tc-focus); border-color: var(--tc-primary); }
/* /Pages/TimeCard/Manage/StoreLogs.razor.rz.scp.css */
/* Page shell to match management time clock look */
.approvals-page[b-x6ofan9i56] { color: #212529; }
.global-time-display[b-x6ofan9i56] { display:flex; justify-content:flex-end; padding:.5rem 0 1rem; }
.time-orb[b-x6ofan9i56] { background:#ffffff; border:1px solid #dee2e6; border-radius:.375rem; box-shadow:0 .125rem .25rem rgba(0,0,0,.075); }
.time-orb .time-content[b-x6ofan9i56] { display:flex; gap:.75rem; align-items:center; padding:.5rem .75rem; color:#6c757d; font-size:.95rem; }
.current-time[b-x6ofan9i56] { font-weight:600; color:#212529; }
.current-date[b-x6ofan9i56] { opacity:.9; }

/* Container and main card */
.timecard-container[b-x6ofan9i56] { max-width: 1200px; margin: 0 auto; padding: .5rem 0 2rem; }
.main-card[b-x6ofan9i56] { background:#ffffff; border:1px solid #dee2e6; border-radius:.5rem; box-shadow:0 1rem 3rem rgba(0,0,0,.175); overflow:hidden; }

/* Hero header */
.hero-header[b-x6ofan9i56] { position: relative; border-bottom:1px solid #dee2e6; padding:1.25rem 1.25rem .75rem; }
.hero-content[b-x6ofan9i56] { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.greeting-section[b-x6ofan9i56] { display:flex; flex-direction:column; gap:.5rem; }
.hero-title[b-x6ofan9i56] { margin:0; }
.hero-title .gradient-text[b-x6ofan9i56] { font-size:1.5rem; font-weight:700; letter-spacing:.2px; background:linear-gradient(90deg,#0d6efd,#6610f2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.status-display[b-x6ofan9i56] { display:flex; gap:.75rem; flex-wrap:wrap; }
.status-badge[b-x6ofan9i56] { display:flex; align-items:center; gap:.6rem; border:1px solid #dee2e6; border-radius:999px; padding:.25rem .6rem; background:#E9EDF2; }
.status-badge .badge-icon[b-x6ofan9i56] { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#E8F1F9; color:#0d6efd; }
.status-badge .badge-title[b-x6ofan9i56] { font-weight:600; font-size:.9rem; }
.status-badge .badge-subtitle[b-x6ofan9i56] { font-size:.8rem; color:#6c757d; }

/* Back button */
.cosmic-back-btn[b-x6ofan9i56] { position:absolute; inset:auto 1.25rem auto auto; transform: translateY(.25rem); border:1px solid #dee2e6; background:#ffffff; color:#212529; border-radius:.375rem; padding:.45rem .7rem; box-shadow:0 .125rem .25rem rgba(0,0,0,.075); }
.cosmic-back-btn .btn-content[b-x6ofan9i56] { display:flex; align-items:center; gap:.5rem; }
.cosmic-back-btn:hover[b-x6ofan9i56] { border-color:#0d6efd; box-shadow:0 0 0 .2rem rgba(13,110,253,.15); }

/* Command center */
.command-center[b-x6ofan9i56] { position: sticky; top: 64px; z-index: 102; padding: 1rem 1.25rem; border-bottom: 1px solid #dee2e6; background: #ffffff; backdrop-filter: saturate(120%) blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.command-header[b-x6ofan9i56] { display:flex; align-items:center; gap:.6rem; margin-bottom:.75rem; }
.command-title[b-x6ofan9i56] { margin:0; font-size:1.1rem; font-weight:600; }
.filter-grid[b-x6ofan9i56] { display:grid; grid-template-columns: 1fr 1fr 1fr auto; gap:.75rem; }
@media (max-width: 992px){ .filter-grid[b-x6ofan9i56]{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px){ .filter-grid[b-x6ofan9i56]{ grid-template-columns: 1fr; } }

.filter-card[b-x6ofan9i56] { position:relative; background:#ffffff; border:1px solid #dee2e6; border-radius:.375rem; box-shadow:0 .125rem .25rem rgba(0,0,0,.075); overflow:hidden; }
.filter-card .card-background[b-x6ofan9i56] { position:absolute; inset:0; background: radial-gradient(1200px 120px at -10% -60%, rgba(13,110,253,.06), transparent 55%); pointer-events:none; }
.filter-card .card-content[b-x6ofan9i56] { position:relative; display:flex; align-items:center; gap:.5rem; padding:.65rem .75rem; }
.filter-label[b-x6ofan9i56] { font-weight:600; color:#6c757d; display:flex; align-items:center; gap:.4rem; margin:0 .25rem 0 0; }
.cosmic-select[b-x6ofan9i56], .cosmic-input[b-x6ofan9i56] { width:100%; min-width: 180px; border:1px solid #dee2e6; border-radius:.375rem; padding:.45rem .6rem; background:#fff; color:#212529; }
.cosmic-select:focus[b-x6ofan9i56], .cosmic-input:focus[b-x6ofan9i56] { outline:none; border-color:#0d6efd; box-shadow:0 0 0 .25rem rgba(13,110,253,.25); }
.action-filter[b-x6ofan9i56] { display:flex; }

.cosmic-search-btn[b-x6ofan9i56], .cosmic-export-btn[b-x6ofan9i56], .cosmic-retry-btn[b-x6ofan9i56] { position:relative; border:1px solid #dee2e6; background:#ffffff; color:#212529; border-radius:.375rem; padding:.5rem .8rem; box-shadow:0 .125rem .25rem rgba(0,0,0,.075); overflow:hidden; }
.cosmic-search-btn[disabled][b-x6ofan9i56] { opacity:.65; cursor:not-allowed; }
.cosmic-search-btn .btn-content[b-x6ofan9i56], .cosmic-export-btn .btn-content[b-x6ofan9i56], .cosmic-retry-btn .btn-content[b-x6ofan9i56] { position:relative; display:flex; align-items:center; gap:.5rem; }
.cosmic-search-btn .btn-glow[b-x6ofan9i56], .cosmic-export-btn .btn-glow[b-x6ofan9i56], .cosmic-retry-btn .btn-glow[b-x6ofan9i56] { position:absolute; inset:0; background: radial-gradient(600px 80px at -10% -30%, rgba(13,110,253,.08), transparent 60%); pointer-events:none; }
.cosmic-search-btn:hover[b-x6ofan9i56], .cosmic-export-btn:hover[b-x6ofan9i56], .cosmic-retry-btn:hover[b-x6ofan9i56] { border-color:#0d6efd; box-shadow:0 0 0 .2rem rgba(13,110,253,.15); }

/* Loading constellation */
.loading-constellation[b-x6ofan9i56] { display:grid; place-items:center; gap:.75rem; min-height: 220px; border:1px dashed #dee2e6; border-radius:.375rem; background:#fff; margin: 1rem 1.25rem; }
.loading-orbit[b-x6ofan9i56], .empty-orbit[b-x6ofan9i56], .error-orbit[b-x6ofan9i56] { position:relative; width:80px; height:80px; }
.loading-planet[b-x6ofan9i56], .empty-planet[b-x6ofan9i56], .error-planet[b-x6ofan9i56] { position:absolute; inset:12px; border-radius:50%; display:grid; place-items:center; background:#E9EDF2; color:#0d6efd; border:1px solid #dee2e6; box-shadow: inset 0 .25rem .5rem rgba(0,0,0,.04); }
.loading-planet .planet-glow[b-x6ofan9i56] { position:absolute; inset:-8px; border-radius:50%; background: radial-gradient(closest-side, rgba(13,110,253,.15), transparent); filter: blur(4px); }
.orbit-ring[b-x6ofan9i56] { position:absolute; inset:0; border-radius:50%; border:1px dashed #dee2e6; animation: orbit-spin-b-x6ofan9i56 6s linear infinite; }
@keyframes orbit-spin-b-x6ofan9i56 { to { transform: rotate(360deg); } }
.loading-text[b-x6ofan9i56] { color:#6c757d; font-size:.95rem; }

/* Metrics dashboard */
.metrics-dashboard[b-x6ofan9i56] { padding: 1rem 1.25rem; border-top:1px solid #dee2e6; background:#fff; }
.dashboard-header[b-x6ofan9i56] { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; justify-content:space-between; margin-bottom:.75rem; }
.dashboard-title[b-x6ofan9i56] { margin:0; font-size:1.25rem; font-weight:700; display:flex; align-items:center; gap:.5rem; }
.dashboard-subtitle[b-x6ofan9i56] { color:#6c757d; font-size:.95rem; }
.cosmic-export-btn[b-x6ofan9i56] { margin-left:auto; }

.metrics-grid[b-x6ofan9i56] { display:grid; grid-template-columns: repeat(2, 1fr); gap:.75rem; }
@media (min-width: 900px){ .metrics-grid[b-x6ofan9i56]{ grid-template-columns: repeat(4, 1fr); } }
.metric-card[b-x6ofan9i56] { position:relative; background:#ffffff; border:1px solid #dee2e6; border-radius:.375rem; box-shadow:0 .125rem .25rem rgba(0,0,0,.075); display:flex; align-items:center; gap:.6rem; padding:.6rem .75rem; overflow:hidden; }
.metric-card .metric-background[b-x6ofan9i56] { position:absolute; inset:0; background: radial-gradient(1000px 100px at -10% -60%, rgba(13,110,253,.06), transparent 60%); pointer-events:none; }
.metric-icon[b-x6ofan9i56] { width:34px; height:34px; border-radius:8px; display:grid; place-items:center; background:#E8F1F9; color:#0d6efd; border:1px solid #dee2e6; }
.metric-content[b-x6ofan9i56] { display:flex; flex-direction:column; line-height:1.15; }
.metric-value[b-x6ofan9i56] { font-weight:700; font-size:1.05rem; }
.metric-label[b-x6ofan9i56] { color:#6c757d; font-size:.85rem; }
.metric-glow[b-x6ofan9i56] { position:absolute; inset:0; background: radial-gradient(600px 90px at 120% 120%, rgba(13,110,253,.06), transparent 65%); pointer-events:none; }

/* Activity timeline */
.activity-timeline[b-x6ofan9i56] { padding: 0 1.25rem 1.25rem; }
.timeline-header[b-x6ofan9i56] { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin: .75rem 0; }
.timeline-title[b-x6ofan9i56] { margin:0; font-size:1.1rem; font-weight:700; display:flex; align-items:center; gap:.5rem; }
.timeline-subtitle[b-x6ofan9i56] { color:#6c757d; }
.logs-container[b-x6ofan9i56] { display:flex; flex-direction:column; gap:.75rem; }

.log-item[b-x6ofan9i56] { display:grid; grid-template-columns: auto 1fr; gap:.75rem; }
.log-item .log-marker[b-x6ofan9i56] { position:relative; display:grid; place-items:center; width: 40px; }
.marker-dot[b-x6ofan9i56] { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; border:1px solid #dee2e6; background:#fff; color:#6c757d; box-shadow:0 .125rem .25rem rgba(0,0,0,.075); }
.marker-line[b-x6ofan9i56] { position:absolute; top:30px; bottom:-10px; left:50%; width:2px; background:#dee2e6; transform: translateX(-50%); }
.log-item:last-child .marker-line[b-x6ofan9i56] { display:none; }

.log-card[b-x6ofan9i56] { background:#ffffff; border:1px solid #dee2e6; border-radius:.375rem; box-shadow:0 .125rem .25rem rgba(0,0,0,.075); overflow:hidden; }
.log-card .card-header[b-x6ofan9i56] { display:flex; justify-content:space-between; gap:.75rem; padding:.75rem .9rem; border-bottom:1px solid #dee2e6; }
.employee-info[b-x6ofan9i56] { display:flex; gap:.75rem; align-items:center; }
.employee-avatar[b-x6ofan9i56] { width: 42px; height: 42px; border-radius: 50%; background: #E9EDF2; color: #0d6efd; display:grid; place-items:center; font-weight:700; }
.employee-name[b-x6ofan9i56] { margin:0; font-weight:700; font-size:1rem; }
.log-status[b-x6ofan9i56] { display:inline-flex; align-items:center; gap:.4rem; border:1px solid #dee2e6; border-radius:999px; padding:.15rem .5rem; background:#fff; color:#6c757d; font-size:.85rem; height: fit-content; }
.log-status.active[b-x6ofan9i56] { border-color:#b6d4fe; background:#E8F1F9; color:#0d6efd; }
.log-status.completed[b-x6ofan9i56] { border-color:#cfe2ff; background:#f1f8ff; color:#1e7e34; }

.log-card .card-body[b-x6ofan9i56] { padding:.9rem; display:flex; flex-direction:column; gap:.9rem; }
.date-info[b-x6ofan9i56] { display:flex; align-items:baseline; gap:.5rem; }
.date-primary[b-x6ofan9i56] { font-weight:700; }
.date-secondary[b-x6ofan9i56] { color:#6c757d; font-size:.95rem; }

.time-tracking-grid[b-x6ofan9i56] { display:grid; grid-template-columns: 1fr auto 1fr; gap:.75rem; align-items:center; }
.time-entry[b-x6ofan9i56] { background:#ffffff; border:1px solid #dee2e6; border-radius:.375rem; padding:.55rem .6rem; display:flex; gap:.5rem; align-items:center; box-shadow:0 .05rem .15rem rgba(0,0,0,.04); }
.time-icon[b-x6ofan9i56] { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:#E8F1F9; color:#0d6efd; border:1px solid #dee2e6; }
.time-details[b-x6ofan9i56] { display:flex; flex-direction:column; line-height:1.15; }
.time-label[b-x6ofan9i56] { color:#6c757d; font-size:.85rem; }
.time-value[b-x6ofan9i56] { font-weight:700; font-feature-settings:"tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; }
.approved-time[b-x6ofan9i56] { font-weight:700; }
.user-time[b-x6ofan9i56] { color:#6c757d; margin-left:.35rem; }
.no-data[b-x6ofan9i56] { color:#dc3545; }
.geofence-indicator.success[b-x6ofan9i56] { color:#198754; margin-left:auto; display:grid; place-items:center; }

.time-separator[b-x6ofan9i56] { display:grid; place-items:center; height:100%; }
.separator-line[b-x6ofan9i56] { width:1px; height:100%; background:#dee2e6; }
.separator-icon[b-x6ofan9i56] { position:absolute; transform: translateY(-50%); display:none; }

.summary-info[b-x6ofan9i56] { display:grid; grid-template-columns: 1fr 1fr; gap:.6rem; }
@media (max-width: 576px){ .summary-info[b-x6ofan9i56]{ grid-template-columns: 1fr; } }
.hours-worked[b-x6ofan9i56], .location-info[b-x6ofan9i56] { background:#ffffff; border:1px solid #dee2e6; border-radius:.375rem; padding:.55rem .6rem; display:flex; gap:.5rem; align-items:center; box-shadow:0 .05rem .15rem rgba(0,0,0,.04); }
.summary-icon[b-x6ofan9i56] { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:#E8F1F9; color:#0d6efd; border:1px solid #dee2e6; }
.summary-content[b-x6ofan9i56] { display:flex; flex-direction:column; line-height:1.15; }
.summary-label[b-x6ofan9i56] { color:#6c757d; font-size:.85rem; }
.summary-value[b-x6ofan9i56] { font-weight:700; }
.hours-badge[b-x6ofan9i56] { display:inline-flex; align-items:center; gap:.35rem; border:1px solid #dee2e6; border-radius:999px; padding:.1rem .45rem; background:#fff; }

/* Empty/Error states */
.empty-state[b-x6ofan9i56], .error-state[b-x6ofan9i56] { text-align:center; padding: 1.25rem; margin: 0 1.25rem 1.25rem; border:1px dashed #dee2e6; border-radius:.375rem; background:#fff; }
.empty-constellation[b-x6ofan9i56], .error-constellation[b-x6ofan9i56] { display:grid; place-items:center; }
.empty-planet[b-x6ofan9i56], .error-planet[b-x6ofan9i56] { font-size:1.25rem; }
.empty-title[b-x6ofan9i56], .error-title[b-x6ofan9i56] { margin:.5rem 0 .25rem; font-weight:700; }
.empty-subtitle[b-x6ofan9i56], .error-subtitle[b-x6ofan9i56] { color:#6c757d; }
/* /Pages/TimeCard/Manage/TimeCardApprovalList.razor.rz.scp.css */
/* Page shell */
.approvals-page[b-26g92civda] {
  color: #212529;
}
.global-time-display[b-26g92civda] {
  display: flex;
  justify-content: flex-end;
  padding: .5rem 0 1rem;
}
.time-summary[b-26g92civda] {
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: .375rem;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}
.time-summary .time-content[b-26g92civda] {
  display: flex; gap: .75rem; align-items: center;
  padding: .5rem .75rem;
  color: #6c757d;
  font-size: .95rem;
}
.current-time[b-26g92civda] { font-weight: 600; color: #212529; }
.current-date[b-26g92civda] { opacity: .9; }

/* Container/Card */
.timecard-container[b-26g92civda] { max-width: 1200px; margin: 0 auto; padding: .5rem 0 2rem; }
.main-card[b-26g92civda] { background: #ffffff; border: 1px solid #dee2e6; border-radius: .5rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.175); overflow: hidden; }

/* Hero header */
.hero-header[b-26g92civda] { border-bottom: 1px solid #dee2e6; padding: 1.25rem 1.25rem .75rem; }
.hero-content[b-26g92civda] { display:flex; align-items: center; justify-content: space-between; gap: 1rem; }
.greeting-section[b-26g92civda] { display:flex; flex-direction: column; gap: .5rem; }
.hero-title[b-26g92civda] { margin: 0; }
.hero-title .title-text[b-26g92civda] { font-size: 1.5rem; font-weight: 700; letter-spacing: .2px; }
.status-display[b-26g92civda] { display:flex; gap: .75rem; flex-wrap: wrap; }
.status-badge[b-26g92civda] { display:flex; align-items: center; gap:.6rem; border:1px solid #dee2e6; border-radius: 999px; padding: .25rem .6rem; background: #E9EDF2; }
.status-badge .badge-icon[b-26g92civda] { width: 28px; height: 28px; border-radius: 50%; display:grid; place-items:center; background: #E8F1F9; color: #0d6efd; }
.status-badge .badge-title[b-26g92civda] { font-weight: 600; font-size: .9rem; }
.status-badge .badge-subtitle[b-26g92civda] { font-size: .8rem; color: #6c757d; }

/* Command center */
.command-center[b-26g92civda] { position: sticky; top: 64px; z-index: 102; padding: 1rem 1.25rem; border-bottom: 1px solid #dee2e6; background: #ffffff; backdrop-filter: saturate(120%) blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.command-header[b-26g92civda] { display:flex; align-items:center; gap:.6rem; margin-bottom: .75rem; }
.command-title[b-26g92civda] { margin:0; font-size: 1.1rem; font-weight: 600; }
.search-control-grid[b-26g92civda] { display:grid; grid-template-columns: 1.5fr .8fr; gap: .75rem; }
@media (max-width: 768px){ .search-control-grid[b-26g92civda]{ grid-template-columns: 1fr; } }

.search-card[b-26g92civda], .filter-card[b-26g92civda] { background: #ffffff; border:1px solid #dee2e6; border-radius: .375rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.search-card .card-content[b-26g92civda], .filter-card .card-content[b-26g92civda] { display:flex; align-items:center; gap:.5rem; padding: .65rem .75rem; }
.search-icon[b-26g92civda] { color: #6c757d; }
.search-input[b-26g92civda] { width:100%; border:1px solid #dee2e6; border-radius: 999px; padding: .5rem .9rem; background: #fff; color: #212529; }
.search-input:focus[b-26g92civda] { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
.filter-label[b-26g92civda] { font-weight: 600; color: #6c757d; margin: 0 .25rem 0 0; display:flex; align-items:center; gap:.4rem; }
.filter-select[b-26g92civda] { margin-left:auto; min-width: 220px; border:1px solid #dee2e6; border-radius: .375rem; padding:.45rem .6rem; background:#fff; color: #212529; }
.filter-select:focus[b-26g92civda] { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }

/* Content area */
.content[b-26g92civda] { padding: 1rem 1.25rem 1.25rem; }

/* Loading */
.loading[b-26g92civda] { display:flex; align-items:center; justify-content:center; min-height: 200px; border:1px dashed #dee2e6; border-radius: .375rem; }
.loading-text[b-26g92civda] { text-align:center; }
.loading-title[b-26g92civda] { font-weight: 700; }
.loading-subtitle[b-26g92civda] { color: #6c757d; font-size: .95rem; }

/* Error */
.error-block[b-26g92civda] { border:1px solid #E7A6A6; border-radius: .375rem; background: #FBEAEA; color: #7b1f1f; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.error-content[b-26g92civda] { padding: 1rem; }
.error-content h3[b-26g92civda] { margin:0 0 .25rem; font-weight:700; }

/* Approvals grid */
.approvals-section[b-26g92civda] { display:flex; flex-direction: column; gap: .75rem; }
.section-header[b-26g92civda] { display:flex; align-items:center; gap:.6rem; }
.approvals-grid[b-26g92civda] { display:grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 640px){ .approvals-grid[b-26g92civda]{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px){ .approvals-grid[b-26g92civda]{ grid-template-columns: repeat(3, 1fr); } }

.approval-card[b-26g92civda] { background: #ffffff; border:1px solid #dee2e6; border-radius: .375rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); display:flex; flex-direction: column; }
.approval-card .card-header[b-26g92civda] { display:flex; justify-content: space-between; gap: .75rem; padding: .75rem .9rem; border-bottom: 1px solid #dee2e6; }
.employee-row[b-26g92civda] { display:flex; gap:.75rem; align-items:flex-start; }
.employee-avatar[b-26g92civda] { width: 42px; height: 42px; border-radius: 50%; background: #E9EDF2; color: #0d6efd; display:grid; place-items:center; font-weight:700; }
.employee-info[b-26g92civda] { display:flex; flex-direction: column; gap:.25rem; }
.employee-name[b-26g92civda] { margin:0; font-size: 1rem; font-weight: 700; }
.store-info[b-26g92civda] { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; color: #6c757d; font-size:.9rem; }
.store-location[b-26g92civda] { display:flex; gap:.35rem; align-items:center; color: #6c757d; }
.entry-date[b-26g92civda] { margin-top:.15rem; color: #6c757d; font-size:.9rem; display:flex; gap:.35rem; align-items:center; }

.entry-type-badge[b-26g92civda] { display:flex; align-items:center; gap:.5rem; }
.type-icon[b-26g92civda] { width: 34px; height: 34px; border-radius: 8px; display:grid; place-items:center; background: #E8F1F9; color: #0d6efd; border: 1px solid #dee2e6; }
.type-label[b-26g92civda] { font-weight: 600; font-size:.9rem; color: #6c757d; }

/* Card body */
.card-body[b-26g92civda] { padding: .9rem; display:flex; flex-direction: column; gap:.9rem; }
.time-matrix[b-26g92civda] { display:grid; grid-template-columns: 1fr auto 1fr; gap:.75rem; align-items:center; }
.dimension-header[b-26g92civda] { display:flex; gap:.4rem; align-items:center; font-weight:600; color: #6c757d; }
.time-value[b-26g92civda] { font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; font-weight:600; }
.time-value.missing[b-26g92civda] { color: #dc3545; }
.time-separator[b-26g92civda] { display:grid; place-items:center; height:100%; }
.separator-line[b-26g92civda] { width: 1px; height: 100%; background: #dee2e6; }
.separator-icon[b-26g92civda] { position:absolute; transform: translateY(-50%); display:none; }

.signature-section .section-header[b-26g92civda],
.location-section .section-header[b-26g92civda] { display:flex; gap:.5rem; align-items:center; font-weight:600; color: #6c757d; margin-top:.25rem; }
.signature-container[b-26g92civda], .location-container[b-26g92civda] { margin-top:.35rem; }
.signature-image[b-26g92civda] { max-width: 100%; height: auto; border:1px solid #dee2e6; border-radius: .375rem; background:#fff; }
.location-image[b-26g92civda] { width: 100%; height: auto; border:1px solid #dee2e6; border-radius: .375rem; }
.location-portal[b-26g92civda] { position: relative; display:block; }
.location-overlay[b-26g92civda] { position:absolute; inset:auto .5rem .5rem auto; display:flex; gap:.4rem; align-items:center; padding:.25rem .5rem; background: rgba(0,0,0,.55); color:#fff; border-radius: 999px; font-size:.85rem; }

/* Footer actions */
.star-footer[b-26g92civda] { border-top: 1px solid #dee2e6; padding: .6rem .9rem; display:flex; justify-content: space-between; align-items:center; }
.processing-state[b-26g92civda] { display:flex; gap:.5rem; align-items:center; color: #6c757d; }
.loading-spinner[b-26g92civda] { width: 24px; height: 24px; display:grid; place-items:center; color: #0d6efd; animation: tc-rotate-b-26g92civda 1.1s linear infinite; }
@keyframes tc-rotate-b-26g92civda { to { transform: rotate(360deg); } }
.action-buttons[b-26g92civda] { display:flex; gap:.5rem; flex-wrap: wrap; }

/* Buttons (scoped component variants) */
.cosmic-btn[b-26g92civda], .retry-btn[b-26g92civda] { display:inline-flex; align-items:center; gap:.5rem; height: 40px; padding: 0 .9rem; border-radius: 999px; border:1px solid #dee2e6; background:#fff; color: #212529; font-weight:600; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); transition: box-shadow .2s ease, transform .05s ease, border-color .15s ease, background-color .15s ease; }
.cosmic-btn:hover[b-26g92civda], .retry-btn:hover[b-26g92civda] { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.cosmic-btn:active[b-26g92civda], .retry-btn:active[b-26g92civda] { transform: translateY(1px); }
.cosmic-btn.primary[b-26g92civda] { background: #0d6efd; color:#fff; border-color: #0d6efd; }
.cosmic-btn.secondary[b-26g92civda] { background:#fff; color: #212529; }
.cosmic-btn.success[b-26g92civda] { background: #198754; color:#fff; border-color: #198754; }
.cosmic-btn .btn-content i[b-26g92civda] { opacity:.95; }

/* Empty state */
.cosmic-empty[b-26g92civda] { border:1px dashed #dee2e6; border-radius: .375rem; padding: 2rem; text-align:center; background: #ffffff; }
.cosmic-empty .empty-icon[b-26g92civda] { margin-bottom: .75rem; }
.void-portal[b-26g92civda] { width: 56px; height: 56px; border-radius: 50%; background: #E8F1F9; color: #0d6efd; display:inline-grid; place-items:center; margin: 0 auto; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.cosmic-empty h3[b-26g92civda] { margin-top:.5rem; font-weight:700; }
.cosmic-empty p[b-26g92civda] { color: #6c757d; }

/* Loading more sentinel */
.scroll-sentinel[b-26g92civda] { height: 1px; }
.loading-more-portal[b-26g92civda] { display:flex; gap:.6rem; justify-content:center; align-items:center; padding: .75rem; color: #6c757d; }
.portal-ring[b-26g92civda] { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #dee2e6; border-top-color: #0d6efd; animation: tc-rotate-b-26g92civda .8s linear infinite; }

/* Modal */
.cosmic-modal-backdrop[b-26g92civda] { position: fixed; inset: 0; background: rgba(0,0,0,.4); display:grid; place-items:center; z-index: 1040; }
.cosmic-modal[b-26g92civda] { width: min(720px, 92vw); background: white; color: #212529; border:1px solid #dee2e6; border-radius: .5rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.175); overflow:hidden; }
.modal-header[b-26g92civda] { display:flex; justify-content: space-between; align-items:center; padding: .85rem 1rem; border-bottom: 1px solid #dee2e6; }
.header-constellation[b-26g92civda] { display:flex; gap:.6rem; align-items:center; }
.modal-icon[b-26g92civda] { width: 36px; height: 36px; border-radius: 8px; display:grid; place-items:center; background: #E8F1F9; color: #0d6efd; border:1px solid #dee2e6; }
.header-content h3[b-26g92civda] { margin: 0; font-weight: 700; }
.header-content p[b-26g92civda] { margin: 0; color: #6c757d; font-size:.95rem; }
.close-btn[b-26g92civda] { border:none; background: transparent; color: #6c757d; width: 36px; height: 36px; border-radius: 50%; display:grid; place-items:center; }
.close-btn:focus-visible[b-26g92civda] { outline: none; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
.modal-body[b-26g92civda] { padding: 1rem; display:flex; flex-direction: column; gap: 1rem; }
.modal-footer[b-26g92civda] { padding: .75rem 1rem; border-top: 1px solid #dee2e6; display:flex; justify-content:flex-end; gap:.5rem; }

.entry-summary[b-26g92civda] { border:1px solid #dee2e6; border-radius: .375rem; background: #E9EDF2; }
.summary-grid[b-26g92civda] { display:grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; padding: .75rem; }
@media (max-width: 520px){ .summary-grid[b-26g92civda]{ grid-template-columns: 1fr; } }
.summary-item .item-label[b-26g92civda] { color: #6c757d; font-weight: 600; font-size: .9rem; }
.summary-item .item-value[b-26g92civda] { font-weight: 700; }
.summary-item .item-value.missing[b-26g92civda] { color: #dc3545; }

.approval-controls[b-26g92civda] { border:1px solid #dee2e6; border-radius: .375rem; }
.control-header[b-26g92civda] { display:flex; align-items:center; gap:.5rem; font-weight: 700; padding: .6rem .75rem; border-bottom: 1px solid #dee2e6; color: #6c757d; }
.time-options[b-26g92civda] { display:flex; gap:.75rem; flex-wrap:wrap; padding: .75rem; }
.cosmic-select[b-26g92civda] { min-width: 220px; border:1px solid #dee2e6; border-radius: .375rem; padding: .45rem .6rem; background:#fff; color: #212529; }
.cosmic-select:focus[b-26g92civda] { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
.custom-time-section[b-26g92civda] { display:flex; align-items:center; gap:.5rem; }
.custom-time-label[b-26g92civda] { display:flex; align-items:center; gap:.4rem; color: #6c757d; font-weight: 600; }
.cosmic-datetime-input[b-26g92civda] { border:1px solid #dee2e6; border-radius: .375rem; padding: .45rem .6rem; }
.cosmic-datetime-input:focus[b-26g92civda] { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }

/* Focus management for interactive areas */
.approval-card:focus-within[b-26g92civda] { box-shadow: 0 0 0 3px rgba(13,110,253,.25); border-color: #0d6efd; }

/* Dark mode adjustments */
:host-context([data-theme="dark"]) .search-input[b-26g92civda],
:host-context([data-theme="dark"]) .filter-select[b-26g92civda],
:host-context([data-theme="dark"]) .cosmic-select[b-26g92civda],
:host-context([data-theme="dark"]) .cosmic-datetime-input[b-26g92civda] {
  background: #111827; color: #e5e7eb; border-color: #374151;
}
:host-context([data-theme="dark"]) .modal-icon[b-26g92civda],
:host-context([data-theme="dark"]) .type-icon[b-26g92civda],
:host-context([data-theme="dark"]) .void-portal[b-26g92civda] { background: #1A1D21; }
:host-context([data-theme="dark"]) .error-block[b-26g92civda] { background: #2B1919; color: #F2DADA; border-color: #6E2B2B; }

/* Utilities inside this component */
.me-2[b-26g92civda] { margin-inline-end: .5rem; }

/* Review modal enhancements */
.cosmic-modal-backdrop[b-26g92civda] { backdrop-filter: saturate(120%) blur(2px); animation: tc-fade-in-b-26g92civda .14s ease-out; }
.cosmic-modal[b-26g92civda] { animation: tc-pop-b-26g92civda .16s ease-out; }
.close-btn:hover[b-26g92civda] { background: #E9EDF2; color: #212529; }

/* Ensure typography inherits inside form controls */
.cosmic-modal :is(input, select, button, textarea)[b-26g92civda] { font: inherit; }

/* Responsive behavior for smaller screens */
@media (max-width: 520px){
  .cosmic-modal[b-26g92civda] { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
  .modal-header[b-26g92civda], .modal-footer[b-26g92civda] { padding: .75rem; }
  .modal-body[b-26g92civda] { padding: .75rem; max-height: calc(100vh - 140px); overflow: auto; }
}

/* Additional focus visibility inside modal */
.cosmic-modal :is(button, [role="button"], a.btn, input, select, textarea):focus-visible[b-26g92civda] {
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
  border-color: #0d6efd;
}

/* Micro animations */
@keyframes tc-fade-in-b-26g92civda { from { opacity: 0 } to { opacity: 1 } }
@keyframes tc-pop-b-26g92civda { from { transform: translateY(6px) scale(.98); opacity: .94 } to { transform: translateY(0) scale(1); opacity: 1 } }

/* Cosmic Modal — full design */
/* Backdrop */
.cosmic-modal-backdrop[b-26g92civda] { position: fixed; inset: 0; padding: 1rem; background: rgba(0,0,0,.45); display:grid; place-items:center; z-index: 1060; backdrop-filter: saturate(120%) blur(2px); animation: tc-fade-in-b-26g92civda .16s ease-out; }

/* Container */
.cosmic-modal[b-26g92civda] { width: min(760px, 94vw); max-height: 90vh; background: white; color: #212529; border:1px solid #dee2e6; border-radius: .5rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.175); display:flex; flex-direction:column; overflow:hidden; animation: tc-pop-b-26g92civda .18s ease-out; }

/* Header */
.modal-header[b-26g92civda] { display:flex; justify-content: space-between; align-items:center; gap:.75rem; padding: .9rem 1rem; border-bottom: 1px solid #dee2e6; background: #ffffff; }
.header-constellation[b-26g92civda] { display:flex; gap:.6rem; align-items:center; min-width: 0; }
.modal-icon[b-26g92civda] { width: 38px; height: 38px; border-radius: 10px; display:grid; place-items:center; background: #E8F1F9; color: #0d6efd; border:1px solid #dee2e6; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.header-content h3[b-26g92civda] { margin: 0; font-weight: 700; font-size: 1.1rem; }
.header-content p[b-26g92civda] { margin: 0; color: #6c757d; font-size:.95rem; }
.close-btn[b-26g92civda] { border:1px solid transparent; background: #fff0; color: #6c757d; width: 36px; height: 36px; border-radius: 50%; display:grid; place-items:center; transition: background-color .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease; }
.close-btn:hover[b-26g92civda] { background: #E9EDF2; color: #212529; border-color: #dee2e6; }
.close-btn:focus-visible[b-26g92civda] { outline: none; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }

/* Body */
.modal-body[b-26g92civda] { padding: 1rem; display:flex; flex-direction: column; gap: 1rem; overflow:auto; }
.entry-summary[b-26g92civda] { border:1px solid #dee2e6; border-radius: .375rem; background: #E9EDF2; }
.summary-grid[b-26g92civda] { display:grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; padding: .75rem; }
@media (max-width: 520px){ .summary-grid[b-26g92civda]{ grid-template-columns: 1fr; } }
.summary-item .item-label[b-26g92civda] { color: #6c757d; font-weight: 600; font-size: .9rem; }
.summary-item .item-value[b-26g92civda] { font-weight: 700; }
.summary-item .item-value.missing[b-26g92civda] { color: #dc3545; }

/* Controls */
.approval-controls[b-26g92civda] { border:1px solid #dee2e6; border-radius: .375rem; background: #ffffff; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.control-header[b-26g92civda] { display:flex; align-items:center; gap:.5rem; font-weight: 700; padding: .6rem .75rem; border-bottom: 1px solid #dee2e6; color: #6c757d; }
.time-options[b-26g92civda] { display:flex; gap:.75rem; flex-wrap:wrap; padding: .75rem; }
.cosmic-select[b-26g92civda] { min-width: 220px; border:1px solid #dee2e6; border-radius: .375rem; padding: .45rem .6rem; background:#fff; color: #212529; }
.cosmic-select:focus[b-26g92civda] { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
.custom-time-section[b-26g92civda] { display:flex; align-items:center; gap:.5rem; }
.custom-time-label[b-26g92civda] { display:flex; align-items:center; gap:.4rem; color: #6c757d; font-weight: 600; }
.cosmic-datetime-input[b-26g92civda] { border:1px solid #dee2e6; border-radius: .375rem; padding: .45rem .6rem; background:#fff; color: #212529; }
.cosmic-datetime-input:focus[b-26g92civda] { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }

/* Footer */
.modal-footer[b-26g92civda] { padding: .75rem 1rem; border-top: 1px solid #dee2e6; display:flex; justify-content:flex-end; gap:.5rem; background: #ffffff; }
.btn-content[b-26g92civda] { display:inline-flex; align-items:center; gap:.45rem; }

/* Buttons (reuse component variants) */
.cosmic-btn[b-26g92civda], .retry-btn[b-26g92civda] { display:inline-flex; align-items:center; gap:.5rem; height: 40px; padding: 0 .9rem; border-radius: 999px; border:1px solid #dee2e6; background:#fff; color: #212529; font-weight:600; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); transition: box-shadow .2s ease, transform .05s ease, border-color .15s ease, background-color .15s ease; }
.cosmic-btn:hover[b-26g92civda], .retry-btn:hover[b-26g92civda] { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.cosmic-btn:active[b-26g92civda], .retry-btn:active[b-26g92civda] { transform: translateY(1px); }
.cosmic-btn.primary[b-26g92civda] { background: #0d6efd; color:#fff; border-color: #0d6efd; }
.cosmic-btn.secondary[b-26g92civda] { background:#fff; color: #212529; }
.cosmic-btn.success[b-26g92civda] { background: #198754; color:#fff; border-color: #198754; }

/* Focus visibility inside modal */
.cosmic-modal :is(button, [role="button"], a.btn, input, select, textarea):focus-visible[b-26g92civda] { outline: none; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); border-color: #0d6efd; }

/* Responsive modal full-screen on small devices */
@media (max-width: 520px){
  .cosmic-modal[b-26g92civda] { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
  .modal-header[b-26g92civda], .modal-footer[b-26g92civda] { padding: .75rem; }
  .modal-body[b-26g92civda] { padding: .75rem; max-height: calc(100vh - 140px); }
}

/* Micro animations */
@keyframes tc-fade-in-b-26g92civda { from { opacity: 0 } to { opacity: 1 } }
@keyframes tc-pop-b-26g92civda { from { transform: translateY(6px) scale(.98); opacity: .94 } to { transform: translateY(0) scale(1); opacity: 1 } }
/* /Pages/TimeCard/MyDailyTimeCard.razor.rz.scp.css */
.timecard-universe[b-wisknw7ohx] {
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Cosmic Background */

.stars[b-wisknw7ohx] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.5), transparent);
    animation: twinkle-b-wisknw7ohx 4s ease-in-out infinite;
    z-index: -2;
}

.nebula[b-wisknw7ohx] {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.3;
    z-index: -1;
}

.nebula-1[b-wisknw7ohx] {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.4) 0%, transparent 70%);
    top: -300px;
    right: -300px;
    animation: float-b-wisknw7ohx 8s ease-in-out infinite;
}

.nebula-2[b-wisknw7ohx] {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
    bottom: -400px;
    left: -400px;
    animation: float-b-wisknw7ohx 10s ease-in-out infinite reverse;
}

.floating-particles[b-wisknw7ohx] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.particle[b-wisknw7ohx] {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: particleFloat-b-wisknw7ohx var(--duration, 6s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

.particle:nth-child(odd)[b-wisknw7ohx] {
    left: calc(5% + 5vw);
    top: calc(10% + 10vh);
}

.particle:nth-child(even)[b-wisknw7ohx] {
    right: calc(5% + 5vw);
    bottom: calc(10% + 10vh);
}

/* Global Time Display */
.global-time-display[b-wisknw7ohx] {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 1000;
}

.time-orb[b-wisknw7ohx] {
    position: relative;
    width: 120px;
    height: 120px;
}

.time-content[b-wisknw7ohx] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 2;
}

.current-time[b-wisknw7ohx] {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.current-date[b-wisknw7ohx] {
    font-size: 0.7rem;
    opacity: 0.8;
    margin-top: 0.25rem;
}

.time-ring[b-wisknw7ohx] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.3), rgba(147, 51, 234, 0.3));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: spin-b-wisknw7ohx 20s linear infinite;
}

/* Main Container */
.timecard-container[b-wisknw7ohx] {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    z-index: 1;
}

.main-card[b-wisknw7ohx] {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3rem;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

/* Hero Header */
.hero-header[b-wisknw7ohx] {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-bottom: 4rem;
    position: relative;
}

.status-constellation[b-wisknw7ohx] {
    position: relative;
}

.status-orbit[b-wisknw7ohx] {
    position: relative;
    width: 160px;
    height: 160px;
}

.status-planet[b-wisknw7ohx] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    z-index: 2;
    transition: all 0.5s ease;
}

.status-planet.status-active[b-wisknw7ohx] {
    background: linear-gradient(135deg, #10b981, #34d399);
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
}

.status-planet.status-break[b-wisknw7ohx] {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.5);
}

.status-planet.status-transition[b-wisknw7ohx] {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
}

.status-planet.status-offline[b-wisknw7ohx] {
    background: linear-gradient(135deg, #6b7280, #9ca3af);
    box-shadow: 0 0 30px rgba(107, 114, 128, 0.5);
}

.planet-glow[b-wisknw7ohx] {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border-radius: 50%;
    background: inherit;
    filter: blur(20px);
    opacity: 0.6;
    z-index: -1;
}

.orbit-ring[b-wisknw7ohx] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    animation: spin-b-wisknw7ohx 30s linear infinite;
}

.orbit-ring[b-wisknw7ohx]::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: orbitDot-b-wisknw7ohx 5s ease-in-out infinite;
}

.hero-content[b-wisknw7ohx] {
    flex: 1;
}

.hero-title[b-wisknw7ohx] {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0 0 1.5rem 0;
    line-height: 1.1;
}

.gradient-text[b-wisknw7ohx] {
    background: linear-gradient(135deg, #ffffff, #a855f7, #3b82f6);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift-b-wisknw7ohx 3s ease-in-out infinite;
}

.status-display[b-wisknw7ohx] {
    display: flex;
    align-items: center;
}

.status-badge[b-wisknw7ohx] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-radius: 20px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.status-badge.status-active[b-wisknw7ohx] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(52, 211, 153, 0.1));
    border-color: rgba(16, 185, 129, 0.3);
}

.status-badge.status-break[b-wisknw7ohx] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.1));
    border-color: rgba(245, 158, 11, 0.3);
}

.status-badge.status-transition[b-wisknw7ohx] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(96, 165, 250, 0.1));
    border-color: rgba(59, 130, 246, 0.3);
}

.status-badge.status-offline[b-wisknw7ohx] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2), rgba(156, 163, 175, 0.1));
    border-color: rgba(107, 114, 128, 0.3);
}

.badge-icon[b-wisknw7ohx] {
    font-size: 2rem;
}

.badge-content[b-wisknw7ohx] {
    color: white;
}

.badge-title[b-wisknw7ohx] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.badge-subtitle[b-wisknw7ohx] {
    font-size: 0.875rem;
    opacity: 0.8;
}

.badge-pulse[b-wisknw7ohx] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    animation: pulse-b-wisknw7ohx 2s ease-in-out infinite;
}

/* Command Center */
.command-center[b-wisknw7ohx] {
    margin-bottom: 4rem;
}

.command-header[b-wisknw7ohx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.command-title[b-wisknw7ohx] {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.energy-bar[b-wisknw7ohx] {
    width: 200px;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.energy-fill[b-wisknw7ohx] {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 4px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.action-grid[b-wisknw7ohx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.action-card[b-wisknw7ohx] {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.action-card:hover[b-wisknw7ohx] {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.action-card.primary[b-wisknw7ohx] {
    border-color: rgba(16, 185, 129, 0.3);
}

.action-card.primary:hover[b-wisknw7ohx] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.05));
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.2);
}

.action-card.secondary[b-wisknw7ohx] {
    border-color: rgba(59, 130, 246, 0.3);
}

.action-card.secondary:hover[b-wisknw7ohx] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(96, 165, 250, 0.05));
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
}

.action-card.tertiary[b-wisknw7ohx] {
    border-color: rgba(147, 51, 234, 0.3);
}

.action-card.tertiary:hover[b-wisknw7ohx] {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(168, 85, 247, 0.05));
    box-shadow: 0 20px 40px rgba(147, 51, 234, 0.2);
}

.action-card.warning[b-wisknw7ohx] {
    border-color: rgba(239, 68, 68, 0.3);
}

.action-card.warning:hover[b-wisknw7ohx] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(248, 113, 113, 0.05));
    box-shadow: 0 20px 40px rgba(239, 68, 68, 0.2);
}

.action-card.break[b-wisknw7ohx] {
    border-color: rgba(245, 158, 11, 0.3);
}

.action-card.break:hover[b-wisknw7ohx] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.05));
    box-shadow: 0 20px 40px rgba(245, 158, 11, 0.2);
}

.action-card.success[b-wisknw7ohx] {
    border-color: rgba(34, 197, 94, 0.3);
}

.action-card.success:hover[b-wisknw7ohx] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(74, 222, 128, 0.05));
    box-shadow: 0 20px 40px rgba(34, 197, 94, 0.2);
}

.card-background[b-wisknw7ohx] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.action-card:hover .card-background[b-wisknw7ohx] {
    opacity: 1;
}

.card-glow[b-wisknw7ohx] {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.action-card:hover .card-glow[b-wisknw7ohx] {
    opacity: 1;
    animation: shimmer-b-wisknw7ohx 2s ease-in-out infinite;
}

.card-content[b-wisknw7ohx] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    z-index: 2;
}

.action-icon[b-wisknw7ohx] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.action-icon.clock-in[b-wisknw7ohx] {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.action-icon.check-in[b-wisknw7ohx] {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.action-icon.check-out[b-wisknw7ohx] {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.action-icon.clock-out[b-wisknw7ohx] {
    background: linear-gradient(135deg, #ef4444, #f87171);
}

.action-icon.break-start[b-wisknw7ohx] {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.action-icon.break-end[b-wisknw7ohx] {
    background: linear-gradient(135deg, #22c55e, #4ade80);
}

.action-details[b-wisknw7ohx] {
    flex: 1;
    color: white;
}

.action-details h3[b-wisknw7ohx] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.action-details p[b-wisknw7ohx] {
    font-size: 0.875rem;
    opacity: 0.7;
    margin: 0;
}

.action-arrow[b-wisknw7ohx] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.action-card:hover .action-arrow[b-wisknw7ohx] {
    color: white;
    transform: translateX(8px);
}

.card-particles[b-wisknw7ohx] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.action-card:hover .card-particles[b-wisknw7ohx] {
    opacity: 1;
}

.action-particle[b-wisknw7ohx] {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: particleRise-b-wisknw7ohx 2s ease-out infinite;
    animation-delay: var(--delay, 0s);
}

.action-particle:nth-child(1)[b-wisknw7ohx] { top: 80%; left: 20%; }
.action-particle:nth-child(2)[b-wisknw7ohx] { top: 60%; left: 80%; }
.action-particle:nth-child(3)[b-wisknw7ohx] { top: 40%; left: 60%; }
.action-particle:nth-child(4)[b-wisknw7ohx] { top: 70%; left: 40%; }
.action-particle:nth-child(5)[b-wisknw7ohx] { top: 30%; left: 90%; }

/* Location Required Section */
.location-required-section[b-wisknw7ohx] {
    margin-bottom: 4rem;
}

.location-card[b-wisknw7ohx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: 24px;
    backdrop-filter: blur(20px);
}

.location-icon[b-wisknw7ohx] {
    position: relative;
    margin-bottom: 2rem;
}

.icon-pulse[b-wisknw7ohx] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef4444, #f87171);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    animation: pulse-b-wisknw7ohx 2s ease-in-out infinite;
}

.location-content h2[b-wisknw7ohx] {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
}

.location-content p[b-wisknw7ohx] {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    margin: 0 0 2rem 0;
    max-width: 500px;
}

.location-enable-btn[b-wisknw7ohx] {
    position: relative;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #ef4444, #f87171);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.location-enable-btn:hover[b-wisknw7ohx] {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(239, 68, 68, 0.3);
}

.btn-glow[b-wisknw7ohx] {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.location-enable-btn:hover .btn-glow[b-wisknw7ohx] {
    left: 100%;
}

.btn-content[b-wisknw7ohx] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 2;
}

.location-error[b-wisknw7ohx] {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 8px;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Metrics Dashboard */
.metrics-dashboard[b-wisknw7ohx] {
    margin-bottom: 4rem;
}

.dashboard-header[b-wisknw7ohx] {
    text-align: center;
    margin-bottom: 2rem;
}

.dashboard-title[b-wisknw7ohx] {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.dashboard-subtitle[b-wisknw7ohx] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}

.metrics-grid[b-wisknw7ohx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.metric-card[b-wisknw7ohx] {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.metric-card:hover[b-wisknw7ohx] {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
}

.metric-background[b-wisknw7ohx] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.metric-card.clock-time .metric-background[b-wisknw7ohx] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), transparent);
}

.metric-card.elapsed-time .metric-background[b-wisknw7ohx] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent);
}

.metric-card.work-time .metric-background[b-wisknw7ohx] {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), transparent);
}

.metric-card.break-time .metric-background[b-wisknw7ohx] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), transparent);
}

.metric-card.stores-count .metric-background[b-wisknw7ohx] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), transparent);
}

.metric-card.breaks-count .metric-background[b-wisknw7ohx] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), transparent);
}

.metric-card:hover .metric-background[b-wisknw7ohx] {
    opacity: 1;
}

.metric-icon[b-wisknw7ohx] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    margin-bottom: 1rem;
}

.metric-card.clock-time .metric-icon[b-wisknw7ohx] {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.metric-card.elapsed-time .metric-icon[b-wisknw7ohx] {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.metric-card.work-time .metric-icon[b-wisknw7ohx] {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.metric-card.break-time .metric-icon[b-wisknw7ohx] {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.metric-card.stores-count .metric-icon[b-wisknw7ohx] {
    background: linear-gradient(135deg, #22c55e, #4ade80);
}

.metric-card.breaks-count .metric-icon[b-wisknw7ohx] {
    background: linear-gradient(135deg, #ef4444, #f87171);
}

.metric-content[b-wisknw7ohx] {
    position: relative;
    z-index: 2;
}

.metric-value[b-wisknw7ohx] {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
}

.metric-label[b-wisknw7ohx] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.metric-progress[b-wisknw7ohx] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.progress-fill[b-wisknw7ohx] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    transition: width 0.5s ease;
}

.metric-glow[b-wisknw7ohx] {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.metric-card:hover .metric-glow[b-wisknw7ohx] {
    opacity: 1;
    animation: shimmer-b-wisknw7ohx 2s ease-in-out infinite;
}

/* Activity Timeline */
.activity-timeline[b-wisknw7ohx] {
    margin-bottom: 4rem;
}

.timeline-header[b-wisknw7ohx] {
    text-align: center;
    margin-bottom: 2rem;
}

.timeline-title[b-wisknw7ohx] {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.timeline-subtitle[b-wisknw7ohx] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}

.timeline-container[b-wisknw7ohx] {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline-item[b-wisknw7ohx] {
    display: flex;
    margin-bottom: 2rem;
    position: relative;
}

.timeline-marker[b-wisknw7ohx] {
    position: relative;
    margin-right: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.marker-dot[b-wisknw7ohx] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
    z-index: 2;
    transition: all 0.5s ease;
}

.timeline-item.active .marker-dot[b-wisknw7ohx] {
    background: linear-gradient(135deg, #10b981, #34d399);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
    animation: pulse-b-wisknw7ohx 2s ease-in-out infinite;
}

.timeline-item.completed .marker-dot[b-wisknw7ohx] {
    background: linear-gradient(135deg, #6b7280, #9ca3af);
    box-shadow: 0 0 10px rgba(107, 114, 128, 0.3);
}

.marker-line[b-wisknw7ohx] {
    width: 2px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    margin-top: -20px;
}

.timeline-item:last-child .marker-line[b-wisknw7ohx] {
    display: none;
}

.timeline-content[b-wisknw7ohx] {
    flex: 1;
}

.timeline-card[b-wisknw7ohx] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.timeline-card:hover[b-wisknw7ohx] {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-header[b-wisknw7ohx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.store-info[b-wisknw7ohx] {
    color: white;
}

.store-name[b-wisknw7ohx] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.store-location[b-wisknw7ohx] {
    font-size: 0.875rem;
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.activity-status[b-wisknw7ohx] {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

.activity-status.active[b-wisknw7ohx] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(52, 211, 153, 0.1));
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.activity-status.completed[b-wisknw7ohx] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2), rgba(156, 163, 175, 0.1));
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.time-info[b-wisknw7ohx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.time-entry[b-wisknw7ohx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.time-label[b-wisknw7ohx] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    font-weight: 600;
}

.time-value[b-wisknw7ohx] {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    font-family: 'JetBrains Mono', monospace;
}

.time-separator[b-wisknw7ohx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.separator-line[b-wisknw7ohx] {
    width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.separator-icon[b-wisknw7ohx] {
    color: rgba(255, 255, 255, 0.5);
}

.duration-display[b-wisknw7ohx] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.duration-bar[b-wisknw7ohx] {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.duration-fill[b-wisknw7ohx] {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.duration-text[b-wisknw7ohx] {
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    font-family: 'JetBrains Mono', monospace;
}

.timeline-empty[b-wisknw7ohx] {
    text-align: center;
    padding: 4rem 2rem;
    color: rgba(255, 255, 255, 0.6);
}

.empty-icon[b-wisknw7ohx] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.timeline-empty h3[b-wisknw7ohx] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: white;
}

.timeline-empty p[b-wisknw7ohx] {
    font-size: 1rem;
    margin: 0;
}

/* Navigation Portal */
.navigation-portal[b-wisknw7ohx] {
    margin-bottom: 2rem;
}

.portal-header[b-wisknw7ohx] {
    text-align: center;
    margin-bottom: 2rem;
}

.portal-title[b-wisknw7ohx] {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.portal-grid[b-wisknw7ohx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
}

.portal-card[b-wisknw7ohx] {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.portal-card:hover[b-wisknw7ohx] {
    transform: translateY(-8px) scale(1.05);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.portal-background[b-wisknw7ohx] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portal-card:hover .portal-background[b-wisknw7ohx] {
    opacity: 1;
}

.portal-icon[b-wisknw7ohx] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    margin: 0 auto 1rem auto;
    transition: all 0.3s ease;
}

.portal-card:hover .portal-icon[b-wisknw7ohx] {
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
}

.portal-label[b-wisknw7ohx] {
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
}

.portal-glow[b-wisknw7ohx] {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portal-card:hover .portal-glow[b-wisknw7ohx] {
    opacity: 1;
    animation: shimmer-b-wisknw7ohx 2s ease-in-out infinite;
}

/* Animations */
@keyframes twinkle-b-wisknw7ohx {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes float-b-wisknw7ohx {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes particleFloat-b-wisknw7ohx {
    0% { transform: translateY(0px) translateX(0px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100px) translateX(20px); opacity: 0; }
}

@keyframes spin-b-wisknw7ohx {
    to { transform: rotate(360deg); }
}

@keyframes orbitDot-b-wisknw7ohx {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.2); }
}

@keyframes gradientShift-b-wisknw7ohx {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes pulse-b-wisknw7ohx {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes shimmer-b-wisknw7ohx {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes particleRise-b-wisknw7ohx {
    0% { transform: translateY(0px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-60px); opacity: 0; }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .timecard-container[b-wisknw7ohx] {
        padding: 1rem;
    }

    .main-card[b-wisknw7ohx] {
        padding: 2rem;
    }

    .hero-header[b-wisknw7ohx] {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    .hero-title[b-wisknw7ohx] {
        font-size: 2.5rem;
    }

    .global-time-display[b-wisknw7ohx] {
        position: static;
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
    }
}

@media (max-width: 768px) {
    .hero-title[b-wisknw7ohx] {
        font-size: 2rem;
    }

    .command-header[b-wisknw7ohx] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .action-grid[b-wisknw7ohx] {
        grid-template-columns: 1fr;
    }

    .metrics-grid[b-wisknw7ohx] {
        grid-template-columns: repeat(2, 1fr);
    }

    .timeline-item[b-wisknw7ohx] {
        flex-direction: column;
    }

    .timeline-marker[b-wisknw7ohx] {
        flex-direction: row;
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .marker-line[b-wisknw7ohx] {
        width: 60px;
        height: 2px;
        margin-top: 0;
        margin-left: -20px;
    }

    .portal-grid[b-wisknw7ohx] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .metrics-grid[b-wisknw7ohx] {
        grid-template-columns: 1fr;
    }

    .time-info[b-wisknw7ohx] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .duration-display[b-wisknw7ohx] {
        flex-direction: column;
        gap: 0.5rem;
    }
}
/* ===== Professional Theme Overrides (Enterprise visual system; preserve flows/markup) ===== */
.timecard-universe[b-wisknw7ohx] {
    background: #f6f7fb !important;
    color: #0f172a;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Remove/disable cosmic visuals everywhere in this page scope */
.timecard-universe .cosmic-background[b-wisknw7ohx],
.timecard-universe .stars[b-wisknw7ohx],
.timecard-universe .nebula[b-wisknw7ohx],
.timecard-universe .floating-particles[b-wisknw7ohx],
.timecard-universe .planet-glow[b-wisknw7ohx],
.timecard-universe .badge-pulse[b-wisknw7ohx],
.timecard-universe .orbit-ring[b-wisknw7ohx],
.timecard-universe .btn-energy-field[b-wisknw7ohx],
.timecard-universe .star-glow[b-wisknw7ohx],
.timecard-universe .card-glow[b-wisknw7ohx],
.timecard-universe .card-background[b-wisknw7ohx],
.timecard-universe .input-glow[b-wisknw7ohx],
.timecard-universe .card-particles[b-wisknw7ohx],
.timecard-universe .metric-glow[b-wisknw7ohx],
.timecard-universe .portal-background[b-wisknw7ohx],
.timecard-universe .portal-glow[b-wisknw7ohx],
.timecard-universe .btn-glow[b-wisknw7ohx],
.timecard-universe .star-particles[b-wisknw7ohx],
.timecard-universe .galaxy-trail[b-wisknw7ohx],
.timecard-universe .time-ring[b-wisknw7ohx] { 
    display: none !important; 
    animation: none !important; 
    filter: none !important; 
    box-shadow: none !important; 
}

/* Core container */
.timecard-universe .timecard-container[b-wisknw7ohx] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px;
}

/* Main surfaces */
.timecard-universe .main-card[b-wisknw7ohx],
.timecard-universe .action-card[b-wisknw7ohx],
.timecard-universe .metric-card[b-wisknw7ohx],
.timecard-universe .portal-card[b-wisknw7ohx],
.timecard-universe .summary-card[b-wisknw7ohx],
.timecard-universe .day-card[b-wisknw7ohx],
.timecard-universe .card[b-wisknw7ohx],
.timecard-universe .panel[b-wisknw7ohx] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 10px rgba(16, 24, 40, 0.06);
}

/* Header */
.timecard-universe .hero-header[b-wisknw7ohx],
.timecard-universe .header[b-wisknw7ohx] {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.9) 0%, rgba(255,255,255,1) 100%);
    border-bottom: 1px solid #eef2f7;
    border-radius: 12px 12px 0 0;
    padding: 24px;
}
.timecard-universe .hero-title[b-wisknw7ohx],
.timecard-universe .gradient-text[b-wisknw7ohx] {
    color: #0f172a !important;
    background: none !important;
    -webkit-text-fill-color: inherit !important;
}

/* Global time display */
.timecard-universe .global-time-display[b-wisknw7ohx] { position: static; margin-left: auto; }
.timecard-universe .time-orb[b-wisknw7ohx] { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 14px; width: auto; height: auto; }
.timecard-universe .time-content[b-wisknw7ohx] { color: #0f172a !important; }

/* Typography defaults for readability */
.timecard-universe h1[b-wisknw7ohx],
.timecard-universe h2[b-wisknw7ohx],
.timecard-universe h3[b-wisknw7ohx],
.timecard-universe h4[b-wisknw7ohx],
.timecard-universe h5[b-wisknw7ohx],
.timecard-universe h6[b-wisknw7ohx],
.timecard-universe p[b-wisknw7ohx],
.timecard-universe span[b-wisknw7ohx],
.timecard-universe label[b-wisknw7ohx],
.timecard-universe td[b-wisknw7ohx],
.timecard-universe th[b-wisknw7ohx],
.timecard-universe li[b-wisknw7ohx],
.timecard-universe a[b-wisknw7ohx] {
    color: #0f172a;
}
.timecard-universe a[b-wisknw7ohx] { text-decoration: none; }

/* Buttons and interactive elements */
.timecard-universe .btn[b-wisknw7ohx],
.timecard-universe .cosmic-btn[b-wisknw7ohx],
.timecard-universe .cosmic-action-btn[b-wisknw7ohx],
.timecard-universe .action-card .btn[b-wisknw7ohx],
.timecard-universe button[b-wisknw7ohx],
.timecard-universe a.cosmic-btn[b-wisknw7ohx] {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a !important;
    padding: 8px 12px;
    box-shadow: 0 1px 1px rgba(16,24,40,0.06);
}
.timecard-universe .cosmic-action-btn.loading[b-wisknw7ohx] { opacity: .75; }
.timecard-universe .btn.primary[b-wisknw7ohx],
.timecard-universe .cosmic-btn.primary[b-wisknw7ohx],
.timecard-universe .cosmic-action-btn.primary[b-wisknw7ohx] { background: #0f172a; color: #fff !important; border-color: #0f172a; }
.timecard-universe .btn.secondary[b-wisknw7ohx],
.timecard-universe .cosmic-btn.secondary[b-wisknw7ohx] { background: #fff; color: #0f172a !important; }
.timecard-universe .btn.danger[b-wisknw7ohx],
.timecard-universe .cosmic-btn.danger[b-wisknw7ohx] { background: #fee2e2; color: #991b1b !important; border-color: #fecaca; }

/* Inputs */
.timecard-universe select[b-wisknw7ohx],
.timecard-universe input[type="text"][b-wisknw7ohx],
.timecard-universe input[type="date"][b-wisknw7ohx],
.timecard-universe input[type="time"][b-wisknw7ohx],
.timecard-universe .cosmic-input[b-wisknw7ohx],
.timecard-universe .cosmic-date-input[b-wisknw7ohx],
.timecard-universe .cosmic-search-input[b-wisknw7ohx],
.timecard-universe .cosmic-filter-select[b-wisknw7ohx] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
    color: #0f172a;
    box-shadow: none;
}

/* Tables */
.timecard-universe table[b-wisknw7ohx] { width: 100%; border-collapse: collapse; }
.timecard-universe th[b-wisknw7ohx], .timecard-universe td[b-wisknw7ohx] { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
.timecard-universe th[b-wisknw7ohx] { text-align: left; color: #475569; font-weight: 600; font-size: 0.875rem; }
.timecard-universe tr:hover td[b-wisknw7ohx] { background: #f9fafb; }

/* Status badges */
.timecard-universe .status-badge[b-wisknw7ohx] { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; background: #eef2ff; border: 1px solid #e0e7ff; color: #3730a3; }
.timecard-universe .status-badge .badge-icon[b-wisknw7ohx] { color: #4f46e5; }
.timecard-universe .badge-title[b-wisknw7ohx] { font-weight: 600; }
.timecard-universe .badge-subtitle[b-wisknw7ohx] { color: #475569; font-size: 0.875rem; }

/* Metric cards */
.timecard-universe .metric-card .metric-value[b-wisknw7ohx] { color: #0f172a; }
.timecard-universe .metric-card .metric-label[b-wisknw7ohx] { color: #64748b; }

/* Lists/sections hover */
.timecard-universe .portal-card:hover[b-wisknw7ohx],
.timecard-universe .action-card:hover[b-wisknw7ohx],
.timecard-universe .day-card:hover[b-wisknw7ohx] { box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08); }

/* Responsive */
@media (max-width: 900px) {
  .timecard-universe .timecard-container[b-wisknw7ohx] { padding: 16px 12px; }
}
/* /Pages/TimeCard/TimeCardHistory.razor.rz.scp.css */
.history-container[b-pqbfzswanj] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
}

.history-container[b-pqbfzswanj]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="timeline-pattern" width="50" height="50" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23timeline-pattern)"/></svg>');
    pointer-events: none;
}

/* Header Section */
.page-header[b-pqbfzswanj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 3rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.header-content[b-pqbfzswanj] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon .icon-circle[b-pqbfzswanj] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(238, 90, 111, 0.4);
}

.header-icon i[b-pqbfzswanj] {
    font-size: 2rem;
    color: white;
}

.header-text h1[b-pqbfzswanj] {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.header-text p[b-pqbfzswanj] {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    margin: 0;
}

.header-stats[b-pqbfzswanj] {
    display: flex;
    gap: 1.5rem;
}

.stat-card[b-pqbfzswanj] {
    background: rgba(255, 255, 255, 0.15);
    padding: 1.25rem;
    border-radius: 16px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 100px;
}

.stat-value[b-pqbfzswanj] {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.stat-label[b-pqbfzswanj] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.25rem;
}

/* Navigation Section */
.navigation-section[b-pqbfzswanj] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 3rem;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.nav-controls[b-pqbfzswanj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.nav-btn[b-pqbfzswanj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border: 2px solid #e9ecef;
    background: white;
    border-radius: 12px;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.nav-btn:hover[b-pqbfzswanj] {
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
}

.date-picker-container[b-pqbfzswanj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.date-picker-wrapper[b-pqbfzswanj] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    border: 2px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.date-picker-wrapper i[b-pqbfzswanj] {
    color: #667eea;
    font-size: 1.1rem;
}

.date-picker[b-pqbfzswanj] {
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 500;
    color: #2c3e50;
    cursor: pointer;
}

.date-picker:focus[b-pqbfzswanj] {
    outline: none;
}

.date-range-display[b-pqbfzswanj] {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
}

.filter-section[b-pqbfzswanj] {
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}

.filter-group[b-pqbfzswanj] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.filter-label[b-pqbfzswanj] {
    font-weight: 600;
    color: #2c3e50;
}

.filter-buttons[b-pqbfzswanj] {
    display: flex;
    gap: 0.5rem;
}

.filter-btn[b-pqbfzswanj] {
    padding: 0.5rem 1rem;
    border: 2px solid #e9ecef;
    background: white;
    border-radius: 25px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn.active[b-pqbfzswanj],
.filter-btn:hover[b-pqbfzswanj] {
    border-color: #667eea;
    background: #667eea;
    color: white;
}

/* Loading & Empty States */
.loading-section[b-pqbfzswanj], .empty-section[b-pqbfzswanj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.loading-spinner[b-pqbfzswanj] {
    width: 60px;
    height: 60px;
    border: 4px solid #e9ecef;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin-b-pqbfzswanj 1s linear infinite;
    margin-bottom: 2rem;
}

.empty-icon[b-pqbfzswanj] {
    font-size: 4rem;
    color: #6c757d;
    margin-bottom: 1.5rem;
}

.loading-section h3[b-pqbfzswanj], .empty-section h3[b-pqbfzswanj] {
    color: #2c3e50;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.loading-section p[b-pqbfzswanj], .empty-section p[b-pqbfzswanj] {
    color: #6c757d;
    margin: 0;
}

/* Timeline Container */
.timeline-container[b-pqbfzswanj] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.timeline-header[b-pqbfzswanj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.timeline-header h2[b-pqbfzswanj] {
    color: #2c3e50;
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.timeline-legend[b-pqbfzswanj] {
    display: flex;
    gap: 1.5rem;
}

.legend-item[b-pqbfzswanj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
}

.legend-dot[b-pqbfzswanj] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-item.work-day .legend-dot[b-pqbfzswanj] {
    background: #28a745;
}

.legend-item.no-work .legend-dot[b-pqbfzswanj] {
    background: #6c757d;
}

.legend-item.incomplete .legend-dot[b-pqbfzswanj] {
    background: #ffc107;
}

/* Timeline */
.timeline[b-pqbfzswanj] {
    position: relative;
}

.timeline-item[b-pqbfzswanj] {
    display: flex;
    margin-bottom: 2rem;
    position: relative;
}

.timeline-marker[b-pqbfzswanj] {
    position: relative;
    margin-right: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.marker-dot[b-pqbfzswanj] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #6c757d;
    border: 4px solid white;
    box-shadow: 0 0 0 2px #e9ecef;
    z-index: 2;
    transition: all 0.3s ease;
}

.timeline-item.work-day .marker-dot[b-pqbfzswanj] {
    background: #28a745;
    box-shadow: 0 0 0 2px #28a745;
}

.timeline-item.incomplete .marker-dot[b-pqbfzswanj] {
    background: #ffc107;
    box-shadow: 0 0 0 2px #ffc107;
}

.timeline-item.has-issues .marker-dot[b-pqbfzswanj] {
    animation: pulse-b-pqbfzswanj 2s ease-in-out infinite;
}

.marker-line[b-pqbfzswanj] {
    width: 2px;
    height: 100%;
    background: #e9ecef;
    margin-top: -10px;
    min-height: 60px;
}

.timeline-item:last-child .marker-line[b-pqbfzswanj] {
    display: none;
}

.timeline-content[b-pqbfzswanj] {
    flex: 1;
}

.timeline-card[b-pqbfzswanj] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.timeline-card:hover[b-pqbfzswanj] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card-header[b-pqbfzswanj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-bottom: 1px solid #dee2e6;
}

.date-info[b-pqbfzswanj] {
    display: flex;
    flex-direction: column;
}

.date-primary[b-pqbfzswanj] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
}

.date-secondary[b-pqbfzswanj] {
    font-size: 0.875rem;
    color: #6c757d;
}

.issue-badge[b-pqbfzswanj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #fff3cd;
    color: #856404;
    border-radius: 25px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid #ffeaa7;
}

.day-status[b-pqbfzswanj] {
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.875rem;
    font-weight: 500;
}

.day-status.work-day[b-pqbfzswanj] {
    background: #d4edda;
    color: #155724;
}

.day-status.no-work[b-pqbfzswanj] {
    background: #e2e3e5;
    color: #6c757d;
}

.day-status.incomplete[b-pqbfzswanj] {
    background: #fff3cd;
    color: #856404;
}

.card-body[b-pqbfzswanj] {
    padding: 1.5rem;
}

.shift-summary[b-pqbfzswanj] {
    margin-bottom: 2rem;
}

.summary-row[b-pqbfzswanj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.summary-item[b-pqbfzswanj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 12px;
    border-left: 4px solid #667eea;
}

.summary-item i[b-pqbfzswanj] {
    color: #667eea;
    font-size: 1.1rem;
}

.item-content[b-pqbfzswanj] {
    display: flex;
    flex-direction: column;
}

.item-label[b-pqbfzswanj] {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
}

.item-value[b-pqbfzswanj] {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
}

.stores-section[b-pqbfzswanj], .breaks-section[b-pqbfzswanj] {
    margin-bottom: 2rem;
}

.stores-section h4[b-pqbfzswanj], .breaks-section h4[b-pqbfzswanj] {
    color: #2c3e50;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stores-grid[b-pqbfzswanj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.store-card[b-pqbfzswanj] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid #e9ecef;
}

.store-header[b-pqbfzswanj] {
    margin-bottom: 0.75rem;
}

.store-name[b-pqbfzswanj] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.store-location[b-pqbfzswanj] {
    font-size: 0.875rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.store-times[b-pqbfzswanj] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.time-entry[b-pqbfzswanj] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-label[b-pqbfzswanj] {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    font-weight: 600;
}

.time-value[b-pqbfzswanj] {
    font-weight: 600;
    color: #2c3e50;
}

.store-duration[b-pqbfzswanj] {
    text-align: center;
    font-size: 0.875rem;
    color: #667eea;
    font-weight: 600;
    padding-top: 0.5rem;
    border-top: 1px solid #dee2e6;
}

.breaks-list[b-pqbfzswanj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.break-item[b-pqbfzswanj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #28a745;
}

.break-type[b-pqbfzswanj] {
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.break-time[b-pqbfzswanj] {
    font-size: 0.875rem;
    color: #6c757d;
}

.break-duration[b-pqbfzswanj] {
    font-weight: 600;
    color: #28a745;
}

.card-actions[b-pqbfzswanj] {
    display: flex;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.action-btn[b-pqbfzswanj] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.action-btn.secondary[b-pqbfzswanj] {
    background: #6c757d;
    color: white;
}

.action-btn.secondary:hover[b-pqbfzswanj] {
    background: #5a6268;
}

.action-btn.warning[b-pqbfzswanj] {
    background: #ffc107;
    color: #212529;
}

.action-btn.warning:hover[b-pqbfzswanj] {
    background: #e0a800;
}

.no-data[b-pqbfzswanj] {
    text-align: center;
    padding: 3rem 1rem;
}

.no-data-content[b-pqbfzswanj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.no-data-content i[b-pqbfzswanj] {
    font-size: 3rem;
    color: #6c757d;
}

.no-data-text h4[b-pqbfzswanj] {
    color: #2c3e50;
    margin: 0 0 0.5rem 0;
}

.no-data-text p[b-pqbfzswanj] {
    color: #6c757d;
    margin: 0;
}

/* Animations */
@keyframes spin-b-pqbfzswanj {
    to { transform: rotate(360deg); }
}

@keyframes pulse-b-pqbfzswanj {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .history-container[b-pqbfzswanj] {
        padding: 1rem;
    }

    .page-header[b-pqbfzswanj] {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .header-stats[b-pqbfzswanj] {
        justify-content: center;
    }

    .nav-controls[b-pqbfzswanj] {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-btn[b-pqbfzswanj] {
        width: 100%;
        justify-content: center;
    }

    .filter-group[b-pqbfzswanj] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .filter-buttons[b-pqbfzswanj] {
        justify-content: center;
    }

    .timeline-item[b-pqbfzswanj] {
        flex-direction: column;
    }

    .timeline-marker[b-pqbfzswanj] {
        flex-direction: row;
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .marker-line[b-pqbfzswanj] {
        width: 100%;
        height: 2px;
        margin-top: 0;
        margin-left: -10px;
        min-height: auto;
    }

    .summary-row[b-pqbfzswanj] {
        grid-template-columns: 1fr;
    }

    .stores-grid[b-pqbfzswanj] {
        grid-template-columns: 1fr;
    }

    .card-actions[b-pqbfzswanj] {
        flex-direction: column;
    }

    .header-text h1[b-pqbfzswanj] {
        font-size: 2rem;
    }
}
/* /Pages/TimeCard/TimePunch.razor.rz.scp.css */
.time-card-container[b-a1wky7w273] {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    min-height: 100vh;
    padding: 2rem 0;
}

.glass-card[b-a1wky7w273] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}

.status-header[b-a1wky7w273] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #1e3a8a;
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    border: 2px solid #1e3a8a;
}

.status-header h1[b-a1wky7w273] {
    color: #1e3a8a;
    text-shadow: none;
    font-weight: 800;
}

.status-header[b-a1wky7w273]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(30, 58, 138, 0.1) 0%, transparent 70%);
    animation: pulse-b-a1wky7w273 4s ease-in-out infinite;
}

@keyframes pulse-b-a1wky7w273 {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.1; }
}

.current-time[b-a1wky7w273] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e3a8a;
    text-shadow: none;
    margin-bottom: 0.5rem;
}

.status-badge[b-a1wky7w273] {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    border: 2px solid #1e3a8a;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.status-clocked-out[b-a1wky7w273] { background: rgba(245, 158, 11, 0.9); color: #1e3a8a; }
.status-clocked-in[b-a1wky7w273] { background: rgba(34, 197, 94, 0.9); color: white; border-color: #22c55e; }
.status-on-break[b-a1wky7w273] { background: rgba(245, 158, 11, 0.9); color: #1e3a8a; }
.status-transition[b-a1wky7w273] { background: rgba(30, 58, 138, 0.9); color: white; border-color: #1e3a8a; }
.status-unknown[b-a1wky7w273] { background: rgba(75, 85, 99, 0.9); color: white; border-color: #4b5563; }

.action-buttons[b-a1wky7w273] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.action-btn[b-a1wky7w273] {
    background: linear-gradient(135deg, var(--btn-start), var(--btn-end));
    border: none;
    color: white;
    padding: 1rem 2rem;
    border-radius: 16px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
}

.action-btn:hover[b-a1wky7w273] {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.2);
}

.action-btn:active[b-a1wky7w273] {
    transform: translateY(0);
}

.btn-clock-in[b-a1wky7w273] { --btn-start: #22c55e; --btn-end: #16a34a; }
.btn-check-in[b-a1wky7w273] { --btn-start: #1e3a8a; --btn-end: #1e40af; }
.btn-check-out[b-a1wky7w273] { --btn-start: #f59e0b; --btn-end: #d97706; color: #1e3a8a; }
.btn-clock-out[b-a1wky7w273] { --btn-start: #dc2626; --btn-end: #b91c1c; }
.btn-break[b-a1wky7w273] { --btn-start: #f59e0b; --btn-end: #d97706; color: #1e3a8a; }
.btn-end-break[b-a1wky7w273] { --btn-start: #22c55e; --btn-end: #16a34a; }

.info-card[b-a1wky7w273] {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    margin: 1.5rem 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.04);
}

.info-card h5[b-a1wky7w273] {
    color: #1e3a8a;
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.metric-grid[b-a1wky7w273] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.metric-item[b-a1wky7w273] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1.5rem;
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.06);
    border-left: 4px solid #f59e0b;
}

.metric-label[b-a1wky7w273] {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.metric-value[b-a1wky7w273] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e3a8a;
}

.store-entry[b-a1wky7w273] {
    background: white;
    border: 1px solid #e9ecef;
    border-left: 4px solid #1e3a8a;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.store-entry:hover[b-a1wky7w273] {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.location-disabled[b-a1wky7w273] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    margin: 2rem 0;
}

.navigation-buttons[b-a1wky7w273] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-toe: 1px solid #e9ecef;
}

.nav-btn[b-a1wky7w273] {
    background: white;
    border: 2px solid #e9ecef;
    color: #6c757d;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-btn:hover[b-a1wky7w273] {
    border-color: #1e3a8a;
    color: #1e3a8a;
    transform: translateY(-1px);
}

.floating-time[b-a1wky7w273] {
    position: fixed;
    top: 2rem;
    right: 2rem;
    background: rgba(30, 58, 138, 0.9);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    backdrop-filter: blur(10px);
    z-index: 1000;
}

@media (max-width: 768px) {
    .time-card-container[b-a1wky7w273] { padding: 1rem; }
    .status-header[b-a1wky7w273] { padding: 1.5rem; }
    .current-time[b-a1wky7w273] { font-size: 2rem; }
    .action-buttons[b-a1wky7w273] { grid-template-columns: 1fr; }
    .metric-grid[b-a1wky7w273] { grid-template-columns: 1fr; }
    .floating-time[b-a1wky7w273] { position: static; margin-bottom: 1rem; }
}
/* /Pages/TransferRequest/Index.Razor.rz.scp.css */
.table td[b-0tdwv0dc5z]{
    vertical-align: middle;
}
/* /Pages/TransferRequest/Items.Razor.rz.scp.css */
button[b-apb62fr821] {
    border-radius: 0px;
}
/* /Pages/TransferRequest/Memo.Razor.rz.scp.css */
button[b-h3f62cdxw4] {
    border-radius: 0px;
}
/* /Pages/TransferRequest/Review.Razor.rz.scp.css */
button[b-43x1udsy2r] {
    border-radius: 0px;
}
/* /Shared/Chat/ChatShell.razor.rz.scp.css */
.chat-shell[b-myys2a709e] { display:flex; height: calc(100vh - 70px); }
.sidebar[b-myys2a709e] { width: 280px; border-right: 1px solid #e5e5e5; overflow:auto; }
.main[b-myys2a709e] { flex:1; display:flex; flex-direction:column; }
.topbar[b-myys2a709e] { height:48px; display:flex; align-items:center; padding:0 12px; border-bottom:1px solid #eee; }
.title[b-myys2a709e] { font-weight:600; }
@media (max-width: 768px) {
  .sidebar[b-myys2a709e] { position:absolute; z-index:10; background:#fff; height:100%; }
}
/* /Shared/Components/NavButton.razor.rz.scp.css */
.nav-card[b-wgk988ds3g] {
    border-width: 2px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.nav-card:hover[b-wgk988ds3g] {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.nav-icon[b-wgk988ds3g] {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

.nav-label[b-wgk988ds3g] {
    font-size: 1.05rem;
    font-weight: 600;
}
/* /Shared/Components/TimeCards/ReviewEntryModal.razor.rz.scp.css */
/* Modal styles copied from TimeCardApprovalList.razor.css to preserve look in the standalone component */

/* Base modal/backdrop */
.cosmic-modal-backdrop[b-rh4lyt7577] { position: fixed; inset: 0; background: rgba(0,0,0,.4); display:grid; place-items:center; z-index: 1040; }
.cosmic-modal[b-rh4lyt7577] { width: min(720px, 92vw); background: white; color: #212529; border:1px solid #dee2e6; border-radius: .5rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.175); overflow:hidden; }
.modal-header[b-rh4lyt7577] { display:flex; justify-content: space-between; align-items:center; padding: .85rem 1rem; border-bottom: 1px solid #dee2e6; }
.header-constellation[b-rh4lyt7577] { display:flex; gap:.6rem; align-items:center; }
.modal-icon[b-rh4lyt7577] { width: 36px; height: 36px; border-radius: 8px; display:grid; place-items:center; background: #E8F1F9; color: #0d6efd; border:1px solid #dee2e6; }
.header-content h3[b-rh4lyt7577] { margin: 0; font-weight: 700; }
.header-content p[b-rh4lyt7577] { margin: 0; color: #6c757d; font-size:.95rem; }
.close-btn[b-rh4lyt7577] { border:none; background: transparent; color: #6c757d; width: 36px; height: 36px; border-radius: 50%; display:grid; place-items:center; }
.close-btn:focus-visible[b-rh4lyt7577] { outline: none; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
.modal-body[b-rh4lyt7577] { padding: 1rem; display:flex; flex-direction: column; gap: 1rem; }
.modal-footer[b-rh4lyt7577] { padding: .75rem 1rem; border-top: 1px solid #dee2e6; display:flex; justify-content:flex-end; gap:.5rem; }

.entry-summary[b-rh4lyt7577] { border:1px solid #dee2e6; border-radius: .375rem; background: #E9EDF2; }
.summary-grid[b-rh4lyt7577] { display:grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; padding: .75rem; }
@media (max-width: 520px){ .summary-grid[b-rh4lyt7577]{ grid-template-columns: 1fr; } }
.summary-item .item-label[b-rh4lyt7577] { color: #6c757d; font-weight: 600; font-size: .9rem; }
.summary-item .item-value[b-rh4lyt7577] { font-weight: 700; }
.summary-item .item-value.missing[b-rh4lyt7577] { color: #dc3545; }

.approval-controls[b-rh4lyt7577] { border:1px solid #dee2e6; border-radius: .375rem; }
.control-header[b-rh4lyt7577] { display:flex; align-items:center; gap:.5rem; font-weight: 700; padding: .6rem .75rem; border-bottom: 1px solid #dee2e6; color: #6c757d; }
.time-options[b-rh4lyt7577] { display:flex; gap:.75rem; flex-wrap:wrap; padding: .75rem; }
.cosmic-select[b-rh4lyt7577] { min-width: 220px; border:1px solid #dee2e6; border-radius: .375rem; padding: .45rem .6rem; background:#fff; color: #212529; }
.cosmic-select:focus[b-rh4lyt7577] { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
.custom-time-section[b-rh4lyt7577] { display:flex; align-items:center; gap:.5rem; }
.custom-time-label[b-rh4lyt7577] { display:flex; align-items:center; gap:.4rem; color: #6c757d; font-weight: 600; }
.cosmic-datetime-input[b-rh4lyt7577] { border:1px solid #dee2e6; border-radius: .375rem; padding: .45rem .6rem; }
.cosmic-datetime-input:focus[b-rh4lyt7577] { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }

/* Enhancements & animations */
.cosmic-modal-backdrop[b-rh4lyt7577] { backdrop-filter: saturate(120%) blur(2px); animation: tc-fade-in-b-rh4lyt7577 .14s ease-out; }
.cosmic-modal[b-rh4lyt7577] { animation: tc-pop-b-rh4lyt7577 .16s ease-out; }
.close-btn:hover[b-rh4lyt7577] { background: #E9EDF2; color: #212529; }

/* Ensure typography inherits inside form controls */
.cosmic-modal :is(input, select, button, textarea)[b-rh4lyt7577] { font: inherit; }

/* Button content layout (icon + label) */
.btn-content[b-rh4lyt7577] { display:inline-flex; align-items:center; gap:.45rem; }

/* Cosmic buttons (copied from page styles to keep look consistent) */
.cosmic-btn[b-rh4lyt7577], .retry-btn[b-rh4lyt7577] {
  display:inline-flex; align-items:center; gap:.5rem;
  height: 40px; padding: 0 .9rem; border-radius: 999px;
  border:1px solid #dee2e6; background:#fff; color: #212529; font-weight:600;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  transition: box-shadow .2s ease, transform .05s ease, border-color .15s ease, background-color .15s ease;
}
.cosmic-btn:hover[b-rh4lyt7577], .retry-btn:hover[b-rh4lyt7577] { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.cosmic-btn:active[b-rh4lyt7577], .retry-btn:active[b-rh4lyt7577] { transform: translateY(1px); }
.cosmic-btn.primary[b-rh4lyt7577] { background: #0d6efd; color:#fff; border-color: #0d6efd; }
.cosmic-btn.secondary[b-rh4lyt7577] { background:#fff; color: #212529; }
.cosmic-btn.success[b-rh4lyt7577] { background: #198754; color:#fff; border-color: #198754; }
.cosmic-btn .btn-content i[b-rh4lyt7577] { opacity:.95; }

/* Responsive behavior for smaller screens */
@media (max-width: 520px){
  .cosmic-modal[b-rh4lyt7577] { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
  .modal-header[b-rh4lyt7577], .modal-footer[b-rh4lyt7577] { padding: .75rem; }
  .modal-body[b-rh4lyt7577] { padding: .75rem; max-height: calc(100vh - 140px); overflow: auto; }
}

/* Focus visibility inside modal */
.cosmic-modal :is(button, [role="button"], a.btn, input, select, textarea):focus-visible[b-rh4lyt7577] {
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
  border-color: #0d6efd;
}

/* Micro animations */
@keyframes tc-fade-in-b-rh4lyt7577 { from { opacity: 0 } to { opacity: 1 } }
@keyframes tc-pop-b-rh4lyt7577 { from { transform: translateY(6px) scale(.98); opacity: .94 } to { transform: translateY(0) scale(1); opacity: 1 } }

/* Full design variant; keep in sync with page styles */
.cosmic-modal-backdrop[b-rh4lyt7577] { position: fixed; inset: 0; padding: 1rem; background: rgba(0,0,0,.45); display:grid; place-items:center; z-index: 1060; backdrop-filter: saturate(120%) blur(2px); animation: tc-fade-in-b-rh4lyt7577 .16s ease-out; }
.cosmic-modal[b-rh4lyt7577] { width: min(760px, 94vw); max-height: 90vh; background: white; color: #212529; border:1px solid #dee2e6; border-radius: .5rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.175); display:flex; flex-direction:column; overflow:hidden; animation: tc-pop-b-rh4lyt7577 .18s ease-out; }
.modal-header[b-rh4lyt7577] { display:flex; justify-content: space-between; align-items:center; gap:.75rem; padding: .9rem 1rem; border-bottom: 1px solid #dee2e6; background: #ffffff; }
.header-constellation[b-rh4lyt7577] { display:flex; gap:.6rem; align-items:center; min-width: 0; }
.modal-icon[b-rh4lyt7577] { width: 38px; height: 38px; border-radius: 10px; display:grid; place-items:center; background: #E8F1F9; color: #0d6efd; border:1px solid #dee2e6; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.header-content h3[b-rh4lyt7577] { margin: 0; font-weight: 700; font-size: 1.1rem; }
.header-content p[b-rh4lyt7577] { margin: 0; color: #6c757d; font-size:.95rem; }
.close-btn[b-rh4lyt7577] { border:1px solid transparent; background: #fff0; color: #6c757d; width: 36px; height: 36px; border-radius: 50%; display:grid; place-items:center; transition: background-color .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease; }
.close-btn:hover[b-rh4lyt7577] { background: #E9EDF2; color: #212529; border-color: #dee2e6; }
.close-btn:focus-visible[b-rh4lyt7577] { outline: none; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
.modal-body[b-rh4lyt7577] { padding: 1rem; display:flex; flex-direction: column; gap: 1rem; overflow:auto; }
.entry-summary[b-rh4lyt7577] { border:1px solid #dee2e6; border-radius: .375rem; background: #E9EDF2; }
.summary-grid[b-rh4lyt7577] { display:grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; padding: .75rem; }
@media (max-width: 520px){ .summary-grid[b-rh4lyt7577]{ grid-template-columns: 1fr; } }
.summary-item .item-label[b-rh4lyt7577] { color: #6c757d; font-weight: 600; font-size: .9rem; }
.summary-item .item-value[b-rh4lyt7577] { font-weight: 700; }
.summary-item .item-value.missing[b-rh4lyt7577] { color: #dc3545; }
.approval-controls[b-rh4lyt7577] { border:1px solid #dee2e6; border-radius: .375rem; background: #ffffff; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.control-header[b-rh4lyt7577] { display:flex; align-items:center; gap:.5rem; font-weight: 700; padding: .6rem .75rem; border-bottom: 1px solid #dee2e6; color: #6c757d; }
.time-options[b-rh4lyt7577] { display:flex; gap:.75rem; flex-wrap:wrap; padding: .75rem; }
.cosmic-select[b-rh4lyt7577] { min-width: 220px; border:1px solid #dee2e6; border-radius: .375rem; padding: .45rem .6rem; background:#fff; color: #212529; }
.cosmic-select:focus[b-rh4lyt7577] { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
.custom-time-section[b-rh4lyt7577] { display:flex; align-items:center; gap:.5rem; }
.custom-time-label[b-rh4lyt7577] { display:flex; align-items:center; gap:.4rem; color: #6c757d; font-weight: 600; }
.cosmic-datetime-input[b-rh4lyt7577] { border:1px solid #dee2e6; border-radius: .375rem; padding: .45rem .6rem; }
.cosmic-datetime-input:focus[b-rh4lyt7577] { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
/* /Shared/Components/TimeCards/TimeCardDetailsModal.razor.rz.scp.css */
/* TimeCardDetailsModal — align look & feel with Approvals page (scoped without :host) */
/* Removed CSS variables block: using fixed values below */

/* Overlay and container */
.cosmic-modal-overlay[b-fs7cgzjxqp] { position: fixed; inset: 0; background: rgba(0,0,0,.35); display:grid; place-items:center; z-index: 1060; }
.cosmic-modal-container[b-fs7cgzjxqp] { width: min(900px, 96vw); max-height: 90vh; overflow: hidden; background: #ffffff; border:1px solid #dee2e6; border-radius: .5rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.175); display:flex; flex-direction:column; }

/* Header */
.modal-cosmic-header[b-fs7cgzjxqp] { border-bottom:1px solid #dee2e6; background: #ffffff; position:relative; }
.modal-cosmic-header .header-content[b-fs7cgzjxqp] { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding: .85rem 1rem; }
.modal-cosmic-title[b-fs7cgzjxqp] { margin:0; font-size:1.25rem; font-weight:700; }
.modal-cosmic-title .gradient-text[b-fs7cgzjxqp], .modal-cosmic-title .title-text[b-fs7cgzjxqp] { background:none; color: #212529; }
.employee-info[b-fs7cgzjxqp] { display:flex; gap:.5rem; align-items:center; color: #6c757d; }
.employee-info .employee-name[b-fs7cgzjxqp] { font-weight:600; color: #212529; }
.timecard-date[b-fs7cgzjxqp] { color: #6c757d; font-size:.95rem; display:flex; gap:.4rem; align-items:center; }

/* Close button */
.cosmic-close-btn[b-fs7cgzjxqp] { position:absolute; right:.75rem; top:.75rem; border:1px solid #dee2e6; background:#fff; color: #212529; border-radius: .375rem; padding:.35rem .55rem; display:inline-flex; align-items:center; gap:.35rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.cosmic-close-btn:hover[b-fs7cgzjxqp] { background:#F3F7FB; }

/* Body */
.modal-cosmic-body[b-fs7cgzjxqp] { padding: 1rem; overflow:auto; }

/* Generic sections/cards inside modal */
.data-galaxy[b-fs7cgzjxqp] { border:1px solid #dee2e6; border-radius: .375rem; background: #ffffff; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); margin-bottom:.85rem; }
.data-galaxy .galaxy-header[b-fs7cgzjxqp] { display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border-bottom:1px solid #dee2e6; }
.data-galaxy .galaxy-icon[b-fs7cgzjxqp] { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#E8F1F9; color: #0d6efd; }
.data-galaxy .galaxy-body[b-fs7cgzjxqp], .data-galaxy .section-body[b-fs7cgzjxqp] { padding:.75rem .85rem; }

/* Tables within modal */
.modal-table-container[b-fs7cgzjxqp] { border:1px solid #dee2e6; border-radius: .375rem; overflow:auto; background:#fff; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.modal-table[b-fs7cgzjxqp] { width:100%; border-collapse:separate; border-spacing:0; }
.modal-table th[b-fs7cgzjxqp], .modal-table td[b-fs7cgzjxqp] { border-bottom:1px solid #dee2e6; padding:.55rem .65rem; }
.modal-table th[b-fs7cgzjxqp] { background: #E9EDF2; font-weight:600; }

/* Pills/badges */
.badge[b-fs7cgzjxqp], .pill[b-fs7cgzjxqp] { border:1px solid #dee2e6; border-radius:999px; padding:.2rem .5rem; background:#F7FAFC; color: #212529; font-size:.85rem; }

/* Buttons (reuse approvals look) */
.retry-btn[b-fs7cgzjxqp], .export-btn[b-fs7cgzjxqp], .copy-btn[b-fs7cgzjxqp], .modal-btn[b-fs7cgzjxqp] { border:1px solid #dee2e6; background:#fff; color: #212529; border-radius: .375rem; padding:.45rem .7rem; display:inline-flex; align-items:center; gap:.45rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); font-weight:600; }
.retry-btn:hover[b-fs7cgzjxqp], .export-btn:hover[b-fs7cgzjxqp], .copy-btn:hover[b-fs7cgzjxqp], .modal-btn:hover[b-fs7cgzjxqp] { background:#F3F7FB; }
.modal-btn.primary[b-fs7cgzjxqp] { background: #0d6efd; color:#fff; border-color: transparent; }
.modal-btn.primary:hover[b-fs7cgzjxqp] { background: #0b5ed7; }

/* Inputs */
.modal-cosmic-body :is(input, select, textarea)[b-fs7cgzjxqp] { border:1px solid #dee2e6; border-radius: .375rem; padding:.45rem .6rem; background:#fff; color: #212529; }
.modal-cosmic-body :is(input, select, textarea):focus[b-fs7cgzjxqp] { outline:none; border-color: #0d6efd; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }

/* Alerts/loading/empty */
.cosmic-error[b-fs7cgzjxqp] { border:1px solid #E7A6A6; border-radius: .375rem; background:#FBEAEA; color:#7b1f1f; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); padding: .75rem; }
.cosmic-loading[b-fs7cgzjxqp], .cosmic-empty[b-fs7cgzjxqp] { display:flex; align-items:center; justify-content:center; min-height: 160px; border:1px dashed #dee2e6; border-radius: .375rem; color: #6c757d; }

/* Accessibility focus ring */
.tc-modal-scope :is(button, [role="button"], a.btn, input, select, textarea):focus[b-fs7cgzjxqp] { outline:none; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); border-color: #0d6efd; }


/* --- Hardcoded fallbacks: no CSS variables --- */
/* Use these to ensure styling works even if CSS custom properties are unavailable */
.modal-cosmic-body[b-fs7cgzjxqp] {
  padding: 16px 20px; /* 1rem 1.25rem */
  overflow: auto;
  background: #ffffff;
  display: grid;
  grid-auto-flow: row;
  gap: 14px; /* 0.9rem */
}

/* Sections/cards within body */
.modal-cosmic-body .data-galaxy[b-fs7cgzjxqp] {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  margin-bottom: 0; /* grid gap manages rhythm */
}
.modal-cosmic-body .data-galaxy .galaxy-header[b-fs7cgzjxqp] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #dee2e6;
}
.modal-cosmic-body .data-galaxy .galaxy-icon[b-fs7cgzjxqp] {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #E8F1F9;
  color: #0d6efd;
}
.modal-cosmic-body h2[b-fs7cgzjxqp], .modal-cosmic-body h3[b-fs7cgzjxqp] { margin: 0; font-weight: 700; color: #212529; }

/* Tables */
.modal-cosmic-body .modal-table-container[b-fs7cgzjxqp] {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: auto;
  background: #ffffff;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}
.modal-cosmic-body .modal-table[b-fs7cgzjxqp] { width: 100%; border-collapse: separate; border-spacing: 0; }
.modal-cosmic-body .modal-table th[b-fs7cgzjxqp], .modal-cosmic-body .modal-table td[b-fs7cgzjxqp] { border-bottom: 1px solid #dee2e6; padding: 9px 10px; }
.modal-cosmic-body .modal-table th[b-fs7cgzjxqp] { background: #E9EDF2; font-weight: 600; }

/* Pills/badges */
.modal-cosmic-body .badge[b-fs7cgzjxqp], .modal-cosmic-body .pill[b-fs7cgzjxqp] {
  border: 1px solid #dee2e6;
  border-radius: 999px;
  padding: 3px 8px;
  background: #F7FAFC;
  color: #212529;
  font-size: .85rem;
}

/* Buttons */
.modal-cosmic-body .retry-btn[b-fs7cgzjxqp],
.modal-cosmic-body .export-btn[b-fs7cgzjxqp],
.modal-cosmic-body .copy-btn[b-fs7cgzjxqp],
.modal-cosmic-body .modal-btn[b-fs7cgzjxqp] {
  border: 1px solid #dee2e6;
  background: #ffffff;
  color: #212529;
  border-radius: 6px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  font-weight: 600;
}
.modal-cosmic-body .retry-btn:hover[b-fs7cgzjxqp],
.modal-cosmic-body .export-btn:hover[b-fs7cgzjxqp],
.modal-cosmic-body .copy-btn:hover[b-fs7cgzjxqp],
.modal-cosmic-body .modal-btn:hover[b-fs7cgzjxqp] { background: #F3F7FB; }
.modal-cosmic-body .modal-btn.primary[b-fs7cgzjxqp] { background: #0d6efd; color: #ffffff; border-color: transparent; }
.modal-cosmic-body .modal-btn.primary:hover[b-fs7cgzjxqp] { background: #0b5ed7; }

/* Inputs */
.modal-cosmic-body :is(input, select, textarea)[b-fs7cgzjxqp] {
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: .45rem .6rem;
  background: #ffffff;
  color: #212529;
}
.modal-cosmic-body :is(input, select, textarea):focus[b-fs7cgzjxqp] {
  outline: none;
  border-color: #0d6efd;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

/* Utility layout options */
@media (min-width: 992px) {
  .modal-cosmic-body.layout-2cols[b-fs7cgzjxqp] { grid-template-columns: 1fr 1fr; align-items: start; }
}
.modal-cosmic-body .form-row[b-fs7cgzjxqp] { display: grid; gap: 10px 12px; }
@media (min-width: 768px) {
  .modal-cosmic-body .form-row.cols-2[b-fs7cgzjxqp] { grid-template-columns: 1fr 1fr; }
  .modal-cosmic-body .form-row.cols-3[b-fs7cgzjxqp] { grid-template-columns: repeat(3, 1fr); }
}

/* TimeCardDetailsModal — align look & feel with Approvals page (scoped without :host) */
/* Removed CSS variables block: using fixed values below */

/* Overlay and container */
.cosmic-modal-overlay[b-fs7cgzjxqp] { position: fixed; inset: 0; background: rgba(0,0,0,.35); display:grid; place-items:center; z-index: 1060; }
.cosmic-modal-container[b-fs7cgzjxqp] { width: min(900px, 96vw); max-height: 90vh; overflow: hidden; background: #ffffff; border:1px solid #dee2e6; border-radius: .5rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.175); display:flex; flex-direction:column; }

/* Header */
.modal-cosmic-header[b-fs7cgzjxqp] { border-bottom:1px solid #dee2e6; background: #ffffff; position:relative; }
.modal-cosmic-header .header-content[b-fs7cgzjxqp] { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding: .85rem 1rem; }
.modal-cosmic-title[b-fs7cgzjxqp] { margin:0; font-size:1.25rem; font-weight:700; }
.modal-cosmic-title .gradient-text[b-fs7cgzjxqp], .modal-cosmic-title .title-text[b-fs7cgzjxqp] { background:none; color: #212529; }
.employee-info[b-fs7cgzjxqp] { display:flex; gap:.5rem; align-items:center; color: #6c757d; }
.employee-info .employee-name[b-fs7cgzjxqp] { font-weight:600; color: #212529; }
.timecard-date[b-fs7cgzjxqp] { color: #6c757d; font-size:.95rem; display:flex; gap:.4rem; align-items:center; }

/* Close button */
.cosmic-close-btn[b-fs7cgzjxqp] { position:absolute; right:.75rem; top:.75rem; border:1px solid #dee2e6; background:#fff; color: #212529; border-radius: .375rem; padding:.35rem .55rem; display:inline-flex; align-items:center; gap:.35rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.cosmic-close-btn:hover[b-fs7cgzjxqp] { background:#F3F7FB; }

/* Body */
.modal-cosmic-body[b-fs7cgzjxqp] { padding: 1rem; overflow:auto; }

/* Generic sections/cards inside modal */
.data-galaxy[b-fs7cgzjxqp] { border:1px solid #dee2e6; border-radius: .375rem; background: #ffffff; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); margin-bottom:.85rem; }
.data-galaxy .galaxy-header[b-fs7cgzjxqp] { display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border-bottom:1px solid #dee2e6; }
.data-galaxy .galaxy-icon[b-fs7cgzjxqp] { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#E8F1F9; color: #0d6efd; }
.data-galaxy .galaxy-body[b-fs7cgzjxqp], .data-galaxy .section-body[b-fs7cgzjxqp] { padding:.75rem .85rem; }

/* Tables within modal */
.modal-table-container[b-fs7cgzjxqp] { border:1px solid #dee2e6; border-radius: .375rem; overflow:auto; background:#fff; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.modal-table[b-fs7cgzjxqp] { width:100%; border-collapse:separate; border-spacing:0; }
.modal-table th[b-fs7cgzjxqp], .modal-table td[b-fs7cgzjxqp] { border-bottom:1px solid #dee2e6; padding:.55rem .65rem; }
.modal-table th[b-fs7cgzjxqp] { background: #E9EDF2; font-weight:600; }

/* Pills/badges */
.badge[b-fs7cgzjxqp], .pill[b-fs7cgzjxqp] { border:1px solid #dee2e6; border-radius:999px; padding:.2rem .5rem; background:#F7FAFC; color: #212529; font-size:.85rem; }

/* Buttons (reuse approvals look) */
.retry-btn[b-fs7cgzjxqp], .export-btn[b-fs7cgzjxqp], .copy-btn[b-fs7cgzjxqp], .modal-btn[b-fs7cgzjxqp] { border:1px solid #dee2e6; background:#fff; color: #212529; border-radius: .375rem; padding:.45rem .7rem; display:inline-flex; align-items:center; gap:.45rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); font-weight:600; }
.retry-btn:hover[b-fs7cgzjxqp], .export-btn:hover[b-fs7cgzjxqp], .copy-btn:hover[b-fs7cgzjxqp], .modal-btn:hover[b-fs7cgzjxqp] { background:#F3F7FB; }
.modal-btn.primary[b-fs7cgzjxqp] { background: #0d6efd; color:#fff; border-color: transparent; }
.modal-btn.primary:hover[b-fs7cgzjxqp] { background: #0b5ed7; }

/* Inputs */
.modal-cosmic-body :is(input, select, textarea)[b-fs7cgzjxqp] { border:1px solid #dee2e6; border-radius: .375rem; padding:.45rem .6rem; background:#fff; color: #212529; }
.modal-cosmic-body :is(input, select, textarea):focus[b-fs7cgzjxqp] { outline:none; border-color: #0d6efd; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }

/* Alerts/loading/empty */
.cosmic-error[b-fs7cgzjxqp] { border:1px solid #E7A6A6; border-radius: .375rem; background:#FBEAEA; color:#7b1f1f; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); padding: .75rem; }
.cosmic-loading[b-fs7cgzjxqp], .cosmic-empty[b-fs7cgzjxqp] { display:flex; align-items:center; justify-content:center; min-height: 160px; border:1px dashed #dee2e6; border-radius: .375rem; color: #6c757d; }

/* Accessibility focus ring */
.tc-modal-scope :is(button, [role="button"], a.btn, input, select, textarea):focus[b-fs7cgzjxqp] { outline:none; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); border-color: #0d6efd; }


/* --- Hardcoded fallbacks: no CSS variables --- */
/* Use these to ensure styling works even if CSS custom properties are unavailable */
.modal-cosmic-body[b-fs7cgzjxqp] {
  padding: 16px 20px; /* 1rem 1.25rem */
  overflow: auto;
  background: #ffffff;
  display: grid;
  grid-auto-flow: row;
  gap: 14px; /* 0.9rem */
}

/* Sections/cards within body */
.modal-cosmic-body .data-galaxy[b-fs7cgzjxqp] {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  margin-bottom: 0; /* grid gap manages rhythm */
}
.modal-cosmic-body .data-galaxy .galaxy-header[b-fs7cgzjxqp] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #dee2e6;
}
.modal-cosmic-body .data-galaxy .galaxy-icon[b-fs7cgzjxqp] {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #E8F1F9;
  color: #0d6efd;
}
.modal-cosmic-body h2[b-fs7cgzjxqp], .modal-cosmic-body h3[b-fs7cgzjxqp] { margin: 0; font-weight: 700; color: #212529; }

/* Tables */
.modal-cosmic-body .modal-table-container[b-fs7cgzjxqp] {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: auto;
  background: #ffffff;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}
.modal-cosmic-body .modal-table[b-fs7cgzjxqp] { width: 100%; border-collapse: separate; border-spacing: 0; }
.modal-cosmic-body .modal-table th[b-fs7cgzjxqp], .modal-cosmic-body .modal-table td[b-fs7cgzjxqp] { border-bottom: 1px solid #dee2e6; padding: 9px 10px; }
.modal-cosmic-body .modal-table th[b-fs7cgzjxqp] { background: #E9EDF2; font-weight: 600; }

/* Pills/badges */
.modal-cosmic-body .badge[b-fs7cgzjxqp], .modal-cosmic-body .pill[b-fs7cgzjxqp] {
  border: 1px solid #dee2e6;
  border-radius: 999px;
  padding: 3px 8px;
  background: #F7FAFC;
  color: #212529;
  font-size: .85rem;
}

/* Buttons */
.modal-cosmic-body .retry-btn[b-fs7cgzjxqp],
.modal-cosmic-body .export-btn[b-fs7cgzjxqp],
.modal-cosmic-body .copy-btn[b-fs7cgzjxqp],
.modal-cosmic-body .modal-btn[b-fs7cgzjxqp] {
  border: 1px solid #dee2e6;
  background: #ffffff;
  color: #212529;
  border-radius: 6px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  font-weight: 600;
}
.modal-cosmic-body .retry-btn:hover[b-fs7cgzjxqp],
.modal-cosmic-body .export-btn:hover[b-fs7cgzjxqp],
.modal-cosmic-body .copy-btn:hover[b-fs7cgzjxqp],
.modal-cosmic-body .modal-btn:hover[b-fs7cgzjxqp] { background: #F3F7FB; }
.modal-cosmic-body .modal-btn.primary[b-fs7cgzjxqp] { background: #0d6efd; color: #ffffff; border-color: transparent; }
.modal-cosmic-body .modal-btn.primary:hover[b-fs7cgzjxqp] { background: #0b5ed7; }

/* Inputs */
.modal-cosmic-body :is(input, select, textarea)[b-fs7cgzjxqp] {
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: .45rem .6rem;
  background: #ffffff;
  color: #212529;
}
.modal-cosmic-body :is(input, select, textarea):focus[b-fs7cgzjxqp] {
  outline: none;
  border-color: #0d6efd;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

/* Utility layout options */
@media (min-width: 992px) {
  .modal-cosmic-body.layout-2cols[b-fs7cgzjxqp] { grid-template-columns: 1fr 1fr; align-items: start; }
}
.modal-cosmic-body .form-row[b-fs7cgzjxqp] { display: grid; gap: 10px 12px; }
@media (min-width: 768px) {
  .modal-cosmic-body .form-row.cols-2[b-fs7cgzjxqp] { grid-template-columns: 1fr 1fr; }
  .modal-cosmic-body .form-row.cols-3[b-fs7cgzjxqp] { grid-template-columns: repeat(3, 1fr); }
}

/* --- Decorative cosmic header + states (hardcoded, scoped) --- */
@keyframes tc-spin-b-fs7cgzjxqp { to { transform: rotate(360deg); } }
@keyframes tc-pulse-b-fs7cgzjxqp { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes tc-orbit-b-fs7cgzjxqp { to { transform: rotate(360deg); } }

/* Constellation cluster at left of header */
.tc-modal-scope .modal-cosmic-header .header-constellation[b-fs7cgzjxqp] {
  position: absolute;
  left: 10px;
  top: 8px;
  width: 64px;
  height: 64px;
  pointer-events: none;
}
.tc-modal-scope .modal-cosmic-header .constellation-ring[b-fs7cgzjxqp] {
  position: absolute;
  inset: 0;
  border: 1px dashed #d7dee5;
  border-radius: 50%;
  animation: tc-spin-b-fs7cgzjxqp 24s linear infinite;
}
.tc-modal-scope .modal-cosmic-header .constellation-dot[b-fs7cgzjxqp] {
  position: absolute;
  width: 6px; height: 6px; border-radius: 50%;
  background: #0d6efd;
  box-shadow: 0 0 0 4px rgba(13,110,253,.08);
}
.tc-modal-scope .modal-cosmic-header .dot-1[b-fs7cgzjxqp] { left: 4px; top: 28px; }
.tc-modal-scope .modal-cosmic-header .dot-2[b-fs7cgzjxqp] { right: 6px; top: 12px; }
.tc-modal-scope .modal-cosmic-header .dot-3[b-fs7cgzjxqp] { right: 10px; bottom: 6px; }
.tc-modal-scope .modal-cosmic-header .dot-4[b-fs7cgzjxqp] { left: 16px; bottom: 10px; }

/* Planet badge next to title */
.tc-modal-scope .modal-cosmic-header .header-planet[b-fs7cgzjxqp] {
  position: absolute;
  left: 74px;
  top: 10px;
  width: 40px; height: 40px;
}
.tc-modal-scope .modal-cosmic-header .planet-core[b-fs7cgzjxqp] {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #0d6efd, #5aa0ff);
  color: #fff;
  box-shadow: 0 6px 20px rgba(13,110,253,.35);
  animation: tc-pulse-b-fs7cgzjxqp 5s ease-in-out infinite;
}
.tc-modal-scope .modal-cosmic-header .planet-atmosphere[b-fs7cgzjxqp] {
  position: absolute; inset: -6px; border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(13,110,253,.12);
}

/* Loading portal visuals */
.tc-modal-scope .cosmic-loading[b-fs7cgzjxqp] { gap: 14px; padding: 16px; background: #ffffff; }
.tc-modal-scope .loading-portal[b-fs7cgzjxqp] { position: relative; width: 72px; height: 72px; }
.tc-modal-scope .portal-ring[b-fs7cgzjxqp] { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #d7e3ff; }
.tc-modal-scope .portal-ring.ring-1[b-fs7cgzjxqp] { animation: tc-orbit-b-fs7cgzjxqp 8s linear infinite; border-color: #cfe2ff; }
.tc-modal-scope .portal-ring.ring-2[b-fs7cgzjxqp] { animation: tc-orbit-b-fs7cgzjxqp 6s linear infinite reverse; border-color: #b6d4fe; inset: 6px; }
.tc-modal-scope .portal-ring.ring-3[b-fs7cgzjxqp] { animation: tc-orbit-b-fs7cgzjxqp 12s linear infinite; border-color: #9ec5fe; inset: 12px; }
.tc-modal-scope .portal-core[b-fs7cgzjxqp] { position: absolute; inset: 20px; border-radius: 50%; background: #0d6efd; color: #fff; display:grid; place-items:center; box-shadow: 0 4px 14px rgba(13,110,253,.35); }
.tc-modal-scope .loading-text .loading-title[b-fs7cgzjxqp] { font-weight: 700; color: #212529; }
.tc-modal-scope .loading-text .loading-subtitle[b-fs7cgzjxqp] { color: #6c757d; font-size: .95rem; }

/* Error and empty visuals */
.tc-modal-scope .cosmic-error[b-fs7cgzjxqp] { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: start; }
.tc-modal-scope .cosmic-error .error-icon[b-fs7cgzjxqp] { width: 56px; height: 56px; border-radius: 50%; background: #fde2e2; display:grid; place-items:center; box-shadow: inset 0 0 0 2px #f5c2c7; }
.tc-modal-scope .cosmic-error .error-burst[b-fs7cgzjxqp] { color:#b02a37; font-size: 20px; }
.tc-modal-scope .cosmic-empty[b-fs7cgzjxqp] { flex-direction: column; gap: 8px; padding: 16px; }
.tc-modal-scope .cosmic-empty .void-portal[b-fs7cgzjxqp] { width: 56px; height: 56px; border-radius: 50%; display:grid; place-items:center; background: #eef2f7; color:#6c757d; }

/* Section utilities */
.tc-modal-scope .galaxy-trail[b-fs7cgzjxqp] { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(13,110,253,0.45), rgba(13,110,253,0)); margin-left: 8px; }
.tc-modal-scope .basic-info-galaxy h2[b-fs7cgzjxqp] { font-size: 1.05rem; }

/* Responsive tweaks */
@media (max-width: 420px) {
  .tc-modal-scope .modal-cosmic-header .header-constellation[b-fs7cgzjxqp] { display: none; }
  .tc-modal-scope .modal-cosmic-header .header-planet[b-fs7cgzjxqp] { left: 10px; }
  .tc-modal-scope .modal-cosmic-header .header-content[b-fs7cgzjxqp] { padding-left: 3.25rem; }
}

/* Clean business tone: hide decorative header elements and remove animations */
.tc-modal-scope .modal-cosmic-header .header-constellation[b-fs7cgzjxqp],
.tc-modal-scope .modal-cosmic-header .header-planet[b-fs7cgzjxqp] { display: none !important; }
.tc-modal-scope .modal-cosmic-header .constellation-ring[b-fs7cgzjxqp],
.tc-modal-scope .modal-cosmic-header .planet-core[b-fs7cgzjxqp],
.tc-modal-scope .portal-ring[b-fs7cgzjxqp] { animation: none !important; }

/* Sticky in-body toolbar */
.modal-cosmic-body.has-toolbar[b-fs7cgzjxqp] { position: relative; }
.modal-cosmic-body .body-toolbar[b-fs7cgzjxqp] {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #ffffff;
  border-bottom: 1px solid #dee2e6;
  padding: 8px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.modal-cosmic-body .body-toolbar .toolbar-actions[b-fs7cgzjxqp] { display: flex; gap: 8px; }

/*** Layout for TimeCardDetailsModal content blocks ***/
/* Two-column responsive layout for the main clock sections */
.solar-system[b-fs7cgzjxqp] {
  display: grid;
  gap: 12px;
}
@media (min-width: 900px) {
  .solar-system[b-fs7cgzjxqp] { grid-template-columns: 1fr; align-items: start; }
}

/* Planet cards (Clock-In/Clock-Out) */
.data-planet[b-fs7cgzjxqp] {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  display: grid;
  grid-template-rows: auto 1fr;
}
.data-planet .planet-header[b-fs7cgzjxqp] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #dee2e6;
}
.data-planet .planet-icon[b-fs7cgzjxqp] { width: 30px; height: 30px; border-radius: 50%; display:grid; place-items:center; background:#E8F1F9; color:#0d6efd; }
.data-planet .planet-rings[b-fs7cgzjxqp] { margin-left: auto; display: flex; gap: 6px; }
.data-planet .planet-rings .ring[b-fs7cgzjxqp] { width: 10px; height: 10px; border-radius: 50%; background: #e9ecef; }

.data-planet .planet-surface[b-fs7cgzjxqp] { padding: 12px; display: grid; gap: 10px; }

/* Temporal grid fields inside clock planets */
.temporal-grid[b-fs7cgzjxqp] { display: grid; gap: 10px; }
@media (min-width: 520px) { .temporal-grid[b-fs7cgzjxqp] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .temporal-grid[b-fs7cgzjxqp] { grid-template-columns: repeat(3, 1fr); } }

.temporal-field[b-fs7cgzjxqp] {
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #fff;
  padding: 10px;
  display: grid;
  gap: 4px;
}
.temporal-field .field-label[b-fs7cgzjxqp] { font-size: .82rem; color: #6c757d; }
.temporal-field .field-value[b-fs7cgzjxqp] { font-weight: 600; color: #212529; word-break: break-word; }

/* Geofence indicator pill */
.geofence-field[b-fs7cgzjxqp] { grid-column: 1 / -1; }
.geofence-indicator[b-fs7cgzjxqp] { display: inline-flex; align-items: center; gap: 8px; border:1px solid #dee2e6; border-radius:999px; padding: 6px 10px; }
.geofence-indicator .geofence-icon[b-fs7cgzjxqp] { width: 24px; height: 24px; border-radius:50%; display:grid; place-items:center; }
.geofence-indicator .geofence-text[b-fs7cgzjxqp] { font-weight: 600; }
.geofence-indicator.geofence-valid[b-fs7cgzjxqp] { background:#E6F4EA; border-color:#c7e6d1; color:#146c43; }
.geofence-indicator.geofence-valid .geofence-icon[b-fs7cgzjxqp] { background:#c7e6d1; color:#146c43; }
.geofence-indicator.geofence-invalid[b-fs7cgzjxqp] { background:#FBEAEA; border-color:#E7A6A6; color:#7b1f1f; }
.geofence-indicator.geofence-invalid .geofence-icon[b-fs7cgzjxqp] { background:#f5c2c7; color:#7b1f1f; }

/* Location image/link */
.location-field[b-fs7cgzjxqp] { grid-column: 1 / -1; }
.location-data[b-fs7cgzjxqp] { display: grid; gap: 8px; }
.location-data .coordinates[b-fs7cgzjxqp] { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color:#495057; }
.location-portal .portal-frame[b-fs7cgzjxqp] { position: relative; border:1px solid #dee2e6; border-radius:8px; overflow:hidden; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.location-portal .portal-map[b-fs7cgzjxqp] { display:block; width:100%; max-height: 220px; object-fit: cover; }
.location-portal .portal-overlay[b-fs7cgzjxqp] { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(0,0,0,.35)); color:#fff; opacity:0; transition: opacity .15s ease-in-out; }
.location-portal .portal-frame:hover .portal-overlay[b-fs7cgzjxqp] { opacity:1; }
.location-portal .portal-icon[b-fs7cgzjxqp] { background: rgba(0,0,0,.45); width:28px; height:28px; display:grid; place-items:center; border-radius:50%; }

/* Empty/void state inside planets */
.no-data-void[b-fs7cgzjxqp] { border:1px dashed #dee2e6; border-radius:6px; padding:14px; color:#6c757d; display:flex; align-items:center; gap:8px; }
.no-data-void .void-icon[b-fs7cgzjxqp] { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#eef2f7; color:#6c757d; }

/* Breaks section (data-nebula) */
.data-nebula[b-fs7cgzjxqp] { border:1px solid #dee2e6; border-radius:8px; background:#fff; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.data-nebula .nebula-header[b-fs7cgzjxqp] { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid #dee2e6; }
.data-nebula .nebula-icon[b-fs7cgzjxqp] { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#E8F1F9; color:#0d6efd; }
.data-nebula .nebula-content[b-fs7cgzjxqp] { padding: 12px; }
.breaks-matrix[b-fs7cgzjxqp] { display: grid; gap: 12px; }
.break-dimension[b-fs7cgzjxqp] { border:1px solid #dee2e6; border-radius:6px; padding:10px; background:#fff; }
.break-type-badge[b-fs7cgzjxqp] { display:inline-flex; align-items:center; gap:8px; border:1px solid #dee2e6; border-radius:999px; padding:4px 10px; background:#F7FAFC; color:#212529; font-weight:600; margin-bottom:8px; }
.break-timeline[b-fs7cgzjxqp] { display:grid; grid-template-columns: 1fr 40px 1fr; gap: 8px; align-items: start; }
.timeline-section .section-title[b-fs7cgzjxqp] { font-weight:700; margin-bottom:6px; color:#212529; }
.time-layers[b-fs7cgzjxqp] { display:grid; gap:6px; }
.time-layer[b-fs7cgzjxqp] { display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid #dee2e6; border-radius:6px; padding:6px 8px; }
.time-layer .layer-label[b-fs7cgzjxqp] { color:#6c757d; font-size:.85rem; }
.time-layer .layer-value[b-fs7cgzjxqp] { font-weight:600; color:#212529; }
.timeline-connector[b-fs7cgzjxqp] { display:grid; place-items:center; }
.timeline-connector .connector-line[b-fs7cgzjxqp] { width: 2px; height: 100%; background:#dee2e6; border-radius:1px; }

/* Store constellation (store logs) */
.data-constellation[b-fs7cgzjxqp] { border:1px solid #dee2e6; border-radius:8px; background:#fff; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.data-constellation .constellation-header[b-fs7cgzjxqp] { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid #dee2e6; }
.data-constellation .constellation-icon[b-fs7cgzjxqp] { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#E8F1F9; color:#0d6efd; }
.data-constellation .constellation-content[b-fs7cgzjxqp] { padding: 12px; display:grid; gap:12px; }
.store-dimension[b-fs7cgzjxqp] { border:1px solid #dee2e6; border-radius:6px; background:#fff; }
.store-dimension .store-header[b-fs7cgzjxqp] { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid #dee2e6; }
.store-dimension .store-icon[b-fs7cgzjxqp] { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:#eef2f7; color:#0d6efd; }
.store-dimension .store-trail[b-fs7cgzjxqp] { flex:1 1 auto; height:1px; background: linear-gradient(90deg, rgba(13,110,253,0.35), rgba(13,110,253,0)); }
.store-activities[b-fs7cgzjxqp] { display:grid; gap:10px; padding:10px 12px; }
.activity-phase[b-fs7cgzjxqp] { border:1px solid #dee2e6; border-radius:6px; padding:8px; background:#fff; }
.activity-phase .phase-header[b-fs7cgzjxqp] { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.activity-phase .phase-icon[b-fs7cgzjxqp] { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#E8F1F9; color:#0d6efd; }
.phase-data[b-fs7cgzjxqp] { display:grid; gap:6px; }
.phase-data .data-row[b-fs7cgzjxqp] { display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid #dee2e6; border-radius:6px; padding:6px 8px; }
.phase-data .data-label[b-fs7cgzjxqp] { color:#6c757d; font-size:.85rem; }
.phase-data .data-value[b-fs7cgzjxqp] { font-weight:600; color:#212529; }

/* Audit trails */
.audit-galaxy[b-fs7cgzjxqp], .approval-galaxy[b-fs7cgzjxqp] { border:1px solid #dee2e6; border-radius:8px; background:#fff; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.audit-galaxy .galaxy-header[b-fs7cgzjxqp], .approval-galaxy .galaxy-header[b-fs7cgzjxqp] { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid #dee2e6; }
.audit-galaxy .galaxy-body[b-fs7cgzjxqp], .approval-galaxy .galaxy-body[b-fs7cgzjxqp] { padding:12px; }
.audit-log[b-fs7cgzjxqp], .approval-log[b-fs7cgzjxqp] { display:grid; gap:8px; }
.audit-entry[b-fs7cgzjxqp], .approval-entry[b-fs7cgzjxqp] { border:1px solid #dee2e6; border-radius:6px; padding:8px 10px; display:grid; gap:4px; }
.audit-entry .entry-header[b-fs7cgzjxqp], .approval-entry .entry-header[b-fs7cgzjxqp] { display:flex; align-items:center; gap:8px; color:#6c757d; font-size:.9rem; }
.audit-entry .entry-content[b-fs7cgzjxqp], .approval-entry .entry-content[b-fs7cgzjxqp] { color:#212529; }

/* Footer */
.modal-cosmic-footer[b-fs7cgzjxqp] { border-top:1px solid #dee2e6; background:#fff; padding:10px 12px; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.modal-cosmic-footer .spacer[b-fs7cgzjxqp] { flex: 1 1 auto; }
.modal-cosmic-footer .actions[b-fs7cgzjxqp] { display:flex; gap:8px; }

/* Minor icon fixes for the Font Awesome names used */
.fas.fa-calendar-star[b-fs7cgzjxqp]::before { content: "\f073"; }
.fas.fa-shield-check[b-fs7cgzjxqp]::before { content: "\f3ed"; }
.fas.fa-shield-exclamation[b-fs7cgzjxqp]::before { content: "\f3ed"; }

.basic-info-galaxy .galaxy-content[b-fs7cgzjxqp] { padding: 12px; }
.basic-info-galaxy .info-constellation[b-fs7cgzjxqp] { display: grid; gap: 10px; grid-template-columns: 1fr; }
.basic-info-galaxy .info-star[b-fs7cgzjxqp] { border:1px solid #dee2e6; border-radius:6px; background:#fff; padding:8px 10px; display:grid; gap:4px; }
.basic-info-galaxy .info-star.full-width[b-fs7cgzjxqp] { grid-column: 1 / -1; }
.basic-info-galaxy .star-label[b-fs7cgzjxqp] { color:#6c757d; font-size:.85rem; }
.basic-info-galaxy .star-value[b-fs7cgzjxqp] { color:#212529; font-weight:600; word-break: break-word; }

/* Footer primary close button styling */
.dimensional-close-btn[b-fs7cgzjxqp] { border:1px solid #dee2e6; background:#fff; color:#212529; border-radius: .375rem; padding:.5rem .9rem; display:inline-flex; align-items:center; gap:.45rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); font-weight:600; }
.dimensional-close-btn:hover[b-fs7cgzjxqp] { background:#F3F7FB; }
.dimensional-close-btn:focus[b-fs7cgzjxqp] { outline:none; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); border-color:#0d6efd; }
.dimensional-close-btn i[b-fs7cgzjxqp] { font-size:1rem; }


/* Store header polish: ensure long names truncate and align cleanly */
.store-dimension .store-header h3[b-fs7cgzjxqp] {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #212529;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Slightly stronger icon background for consistency */
.store-dimension .store-icon[b-fs7cgzjxqp] { background:#E8F1F9; color:#0d6efd; border:1px solid #dee2e6; }
/* Tighten spacing inside activity phases for readability */
.activity-phase[b-fs7cgzjxqp] { padding:10px; }
.phase-data .data-row[b-fs7cgzjxqp] { padding:7px 10px; }
/* /Shared/Components/ToastBase.razor.rz.scp.css */
/* /Shared/Dialogs/ItemSearch.razor.rz.scp.css */
.modernUI .searchBox[b-bumkc3vwc7] {
  padding: 8px 12px;
}

.modernUI .searchContainer[b-bumkc3vwc7] { display:flex; align-items:center; }
.modernUI .searchButton[b-bumkc3vwc7] { border:none; background:transparent; color:#0d6efd; font-size:18px; }

.modernUI .itemsContainer[b-bumkc3vwc7] { display: grid; gap: 12px; padding: 8px 12px; }

.modernUI .itemCard[b-bumkc3vwc7] { background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.08); padding:14px; }
.modernUI .itemName[b-bumkc3vwc7] { margin:0 0 6px 0; font-weight:700; color:#0b1f33; }
.modernUI .itemStatus[b-bumkc3vwc7] { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.modernUI .itemStatusText[b-bumkc3vwc7] { background:#eef2f6; color:#2d3e50; border-radius:10px; padding:4px 10px; font-size:12px; }
.modernUI .caseQuantity[b-bumkc3vwc7] { background:#e9f2ff; color:#0d47a1; }
.modernUI .outOfStock[b-bumkc3vwc7] { background:#ffe8e8; color:#b00020; }
.modernUI .lowStock[b-bumkc3vwc7] { background:#fff4e5; color:#a15d00; }
.modernUI .mayBeOutOfStock[b-bumkc3vwc7] { background:#f4f6f8; color:#5a5a5a; }
.modernUI .previouslyBought[b-bumkc3vwc7] { background:#eef7ff; color:#0c4a6e; }
.modernUI .recentlyBought[b-bumkc3vwc7] { background:#e8ffef; color:#176a3a; }
.modernUI .newItem[b-bumkc3vwc7] { background:#e8fff8; color:#0b6b50; }

.modernUI .unitsContainer[b-bumkc3vwc7] { display:flex; justify-content:flex-end; gap:16px; margin-bottom:6px; color:#0b1f33; }
.modernUI #noOfUnits[b-bumkc3vwc7], .modernUI #noOfFreeUnits[b-bumkc3vwc7] { font-size:14px; }

.modernUI .itemActions.modern[b-bumkc3vwc7] { display:flex; flex-direction:column; gap:16px; margin-top:10px; }

.modernUI .segmented-category[b-bumkc3vwc7] { display:flex; border:1px solid #d1d9e6; border-radius:10px; overflow:hidden; } /*changed segmented to segmented-catgory*/
.modernUI .segment[b-bumkc3vwc7] { flex:1; padding:10px 12px; background:#fff; color:#2d3e50; border:none; }
.modernUI .segment + .segment[b-bumkc3vwc7] { border-left:1px solid #d1d9e6; }
.modernUI .segment.active[b-bumkc3vwc7] { background:#0d6efd; color:#fff; }

.modernUI .qtyBlock[b-bumkc3vwc7] { display:flex; flex-direction:column; gap:8px; }
.modernUI .qtyLabel[b-bumkc3vwc7] { font-weight:600; color:#223; }
.modernUI .stepper[b-bumkc3vwc7] { display:grid; grid-template-columns:44px 1fr 44px; align-items:stretch; border:1px solid #cfd6e4; border-radius:10px; overflow:hidden; }
.modernUI .stepperBtn[b-bumkc3vwc7] { background:#fff; border:none; font-size:22px; color:#2d3e50; }
.modernUI .stepperInput[b-bumkc3vwc7] { border:none; text-align:center; font-size:20px; }
.modernUI .stepperInput:focus[b-bumkc3vwc7] { outline:none; }

.modernUI .ctaPrimary[b-bumkc3vwc7] { background:#0d6efd; color:#fff; border:none; border-radius:12px; padding:12px; font-size:18px; font-weight:700; }
.modernUI .ctaRemove[b-bumkc3vwc7] { background:transparent; border:none; color:#d72638; font-size:18px; }

.modernUI .segmented[b-bumkc3vwc7]{
  display: flex;
  gap: 20px;
}

.modernUI .segmented .segmented-category[b-bumkc3vwc7]{
  display: flex;
}

/* Legacy classes retained for compatibility */
.itemActions[b-bumkc3vwc7] { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.quantityInputContainer[b-bumkc3vwc7] { display:flex; align-items:center; }
.quantityInput[b-bumkc3vwc7] { width:90px; }
.itemButton.addButton[b-bumkc3vwc7] { background:#0d6efd; color:#fff; border:none; border-radius:8px; padding:8px 12px; }
.itemButton.removeButton[b-bumkc3vwc7] { background:#fff; color:#b00020; border:1px solid #ffc9c9; border-radius:8px; padding:8px 12px; }

@media (min-width: 720px) {
  .modernUI .itemsContainer[b-bumkc3vwc7] { grid-template-columns: 1fr 1fr; }
}

/* Removed legacy fallback styling as modern UI is always on */
/* /Shared/ExtrasUI/BackToTop.razor.rz.scp.css */
button[b-drb3tw4y7d] {
    background: rgba(136, 136, 136, 0.8);
    height: 50px;
    width: 50px;
    position: fixed;
    bottom: 18px;
    right: 20px;
    border: 3px solid #888888;
    border-radius: 35%;
    content: "";
    z-index: 10000;
}
/* /Shared/ExtrasUI/Loading.razor.rz.scp.css */
.loading--full-height[b-0g5yipp2rp]{
    align-items: center;
    height: 100%;
}
.loading[b-0g5yipp2rp]{
    display: flex;
    justify-content: center;
}
.loading[b-0g5yipp2rp]::after {
    content: "";
    width: 50px;
    height: 50px;
    border: 10px solid #dddddd;
    border-top-color: #438025;
    border-radius: 50%;
    animation: loading-b-0g5yipp2rp 1s linear infinite;
}
@keyframes loading-b-0g5yipp2rp {
    to{
        transform: rotate(1turn);
    }

}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-e7dsogbeqv] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-e7dsogbeqv] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-e7dsogbeqv] {
    font-size: 1.1rem;
}

.oi[b-e7dsogbeqv] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-e7dsogbeqv] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-e7dsogbeqv] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-e7dsogbeqv] {
        padding-bottom: 1rem;
    }

    .nav-item[b-e7dsogbeqv]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-e7dsogbeqv]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-e7dsogbeqv]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-e7dsogbeqv] {
        display: none;
    }

    .collapse[b-e7dsogbeqv] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}