/* /Components/Layout/LoginDisplay.razor.rz.scp.css */
.user-info[b-p7bwp221o8] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-name[b-p7bwp221o8] {
    font-weight: 600;
}

.user-type[b-p7bwp221o8] {
    font-size: 0.85em;
    color: #666;
}

.user-info form[b-p7bwp221o8] {
    margin: 0;
}

.user-info .btn-link[b-p7bwp221o8] {
    padding: 0;
    text-decoration: none;
    color: #0066cc;
}

.user-info .btn-link:hover[b-p7bwp221o8] {
    text-decoration: underline;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.portal-layout[b-oxcy173rmy] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.portal-header[b-oxcy173rmy] {
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.portal-nav[b-oxcy173rmy] {
    flex: 1;
    display: flex;
    align-items: center;
}

.portal-user[b-oxcy173rmy] {
    display: flex;
    align-items: center;
}

.portal-content[b-oxcy173rmy] {
    flex: 1;
    background-color: #f5f5f5;
    overflow: auto;
}

#blazor-error-ui[b-oxcy173rmy] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-oxcy173rmy] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.nav-menu[b-c8shmi769m] {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item[b-c8shmi769m] {
    padding: 8px 16px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    border-radius: 4px;
    transition: all 0.2s;
}

.nav-item:hover[b-c8shmi769m] {
    background-color: #f5f5f5;
    color: var(--text-primary);
}

.nav-item[b-c8shmi769m]::deep.active {
    background-color: #e3f2fd;
    color: #1976d2;
}
/* /Components/Pages/CustomerDashboard.razor.rz.scp.css */
.customer-dashboard[b-z5t0fpkct7] {
    padding: 0;
    height: 100%;
}

.loading-state[b-z5t0fpkct7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
}

/* Dashboard Cards Grid */
.dashboard-cards[b-z5t0fpkct7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    padding: 24px;
    background: #f5f5f5;
}

.dashboard-card[b-z5t0fpkct7] {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dashboard-card:hover[b-z5t0fpkct7] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.dashboard-card.active[b-z5t0fpkct7] {
    border-color: #1b5e20;
    background: #e8f5e9;
}

.card-icon[b-z5t0fpkct7] {
    background: #1b5e20;
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-icon i.material-icons[b-z5t0fpkct7] {
    font-size: 28px;
}

.card-content[b-z5t0fpkct7] {
    flex: 1;
}

.card-count[b-z5t0fpkct7] {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: #1b5e20;
    line-height: 1;
    margin-bottom: 4px;
}

.card-title[b-z5t0fpkct7] {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dashboard Content Area */
.dashboard-content-area[b-z5t0fpkct7] {
    padding: 24px;
    min-height: 400px;
    max-height: calc(100vh - 240px);
    overflow-y: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .dashboard-cards[b-z5t0fpkct7] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 16px;
    }

    .dashboard-card[b-z5t0fpkct7] {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    .card-count[b-z5t0fpkct7] {
        font-size: var(--font-size-h2);
    }

    .dashboard-content-area[b-z5t0fpkct7] {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .dashboard-cards[b-z5t0fpkct7] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Customer/Contact/AddUsers.razor.rz.scp.css */
/* Modern Add Users Form Styles */

.add-users-container[b-te65ma40g1] {
    display: flex;
    justify-content: center;
    padding: 24px;
    min-height: calc(100vh - 200px);
}

.add-users-card[b-te65ma40g1] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    width: 100%;
    padding: 32px;
    animation: fadeIn-b-te65ma40g1 0.3s ease-out;
    overflow-x: auto;
    overflow-y: auto;
}

@keyframes fadeIn-b-te65ma40g1 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Card Header */
.card-header[b-te65ma40g1] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
}

.header-icon[b-te65ma40g1] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-icon i[b-te65ma40g1] {
    font-size: 28px;
    color: white;
}

.header-text[b-te65ma40g1] {
    flex: 1;
}

.card-title[b-te65ma40g1] {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 6px 0;
}

.card-subtitle[b-te65ma40g1] {
    font-size: var(--font-size-body);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Form Styles */
.add-users-form[b-te65ma40g1] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group[b-te65ma40g1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 10px;
}

.form-group label[b-te65ma40g1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.form-group label i[b-te65ma40g1] {
    font-size: 18px;
    color: #1b5e20;
}

.form-control[b-te65ma40g1] {
    width: 100%;
    padding: 12px 14px;
    font-size: var(--font-size-body);
    font-family: inherit;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.form-control[b-te65ma40g1]::placeholder {
    color: #999;
}

.form-control:focus[b-te65ma40g1] {
    outline: none;
    border-color: #1b5e20;
    box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.1);
}

.form-control:disabled[b-te65ma40g1] {
    background: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Select Control */
.select-control[b-te65ma40g1] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 44px;
}

.select-control:disabled[b-te65ma40g1] {
    cursor: not-allowed;
}

/* Form Row */
.form-row[b-te65ma40g1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Input Hint */
.input-hint[b-te65ma40g1] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 4px;
}

/* Validation */
.validation-message[b-te65ma40g1],
.field-error[b-te65ma40g1] {
    color: #dc3545;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    margin-top: 4px;
    display: block;
}

/* Alerts */
.alert[b-te65ma40g1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    animation: slideIn-b-te65ma40g1 0.3s ease-out;
}

@keyframes slideIn-b-te65ma40g1 {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.alert i[b-te65ma40g1] {
    font-size: 22px;
    flex-shrink: 0;
}

.alert span[b-te65ma40g1] {
    font-size: var(--font-size-body);
    line-height: 1.4;
}

.alert-success[b-te65ma40g1] {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border: 1px solid #a5d6a7;
    color: #1b5e20;
}

.alert-success i[b-te65ma40g1] {
    color: #2e7d32;
}

.alert-danger[b-te65ma40g1] {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    border: 1px solid #ef9a9a;
    color: #c62828;
}

.alert-danger i[b-te65ma40g1] {
    color: #d32f2f;
}

/* Form Actions */
.form-actions[b-te65ma40g1] {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}

.btn-submit[b-te65ma40g1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-semibold);
    color: white;
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 160px;
}

.btn-submit:hover:not(:disabled)[b-te65ma40g1] {
    background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.3);
}

.btn-submit:active:not(:disabled)[b-te65ma40g1] {
    transform: translateY(0);
}

.btn-submit:disabled[b-te65ma40g1] {
    background: #bdbdbd;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-submit i[b-te65ma40g1] {
    font-size: 20px;
}

/* Spinner */
.spinner[b-te65ma40g1] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-te65ma40g1 0.8s linear infinite;
}

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

/* Loading Container */
.loading-container[b-te65ma40g1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 16px;
}

.loading-container p[b-te65ma40g1] {
    color: var(--text-secondary);
    font-size: var(--font-size-body);
    margin: 0;
}

.loading-spinner[b-te65ma40g1] {
    width: 40px;
    height: 40px;
    border: 3px solid #e0e0e0;
    border-top-color: #1b5e20;
    border-radius: 50%;
    animation: spin-b-te65ma40g1 0.8s linear infinite;
}

.loading-spinner.small[b-te65ma40g1] {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

/* Processing Indicator */
.processing-indicator[b-te65ma40g1] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    font-size: var(--font-size-body);
}

/* Responsive Design */
@media (max-width: 768px) {
    .add-users-container[b-te65ma40g1] {
        padding: 16px;
    }

    .add-users-card[b-te65ma40g1] {
        padding: 24px;
        border-radius: 12px;
    }

    .card-header[b-te65ma40g1] {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .header-icon[b-te65ma40g1] {
        width: 64px;
        height: 64px;
    }

    .header-icon i[b-te65ma40g1] {
        font-size: 32px;
    }

    .card-title[b-te65ma40g1] {
        font-size: var(--font-size-h3);
    }

    .form-row[b-te65ma40g1] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-actions[b-te65ma40g1] {
        justify-content: center;
    }

    .btn-submit[b-te65ma40g1] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .add-users-card[b-te65ma40g1] {
        padding: 20px;
    }

    .card-title[b-te65ma40g1] {
        font-size: var(--font-size-h3);
    }

    .card-subtitle[b-te65ma40g1] {
        font-size: var(--font-size-small);
    }

    .form-control[b-te65ma40g1] {
        padding: 10px 12px;
        font-size: var(--font-size-body);
    }
}
/* /Components/Pages/Customer/Dashboard/FilledShifts.razor.rz.scp.css */
/* Shared styles for all shift tabs */
.shifts-tab[b-1pnsahchmb] {
    padding: 0;
}

.loading[b-1pnsahchmb], .empty-state[b-1pnsahchmb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.empty-state i.material-icons[b-1pnsahchmb] {
    font-size: 64px;
    color: #9e9e9e;
    margin-bottom: 16px;
}

.empty-state h4[b-1pnsahchmb] {
    color: var(--text-primary);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 8px;
}

.empty-state p[b-1pnsahchmb] {
    color: var(--text-secondary);
    font-size: var(--font-size-body);
}

.section-title[b-1pnsahchmb] {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 24px;
}

/* Grid Container - matches OrderGrid styling */
.shifts-grid-container[b-1pnsahchmb] {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Fixed Header */
.shifts-table-header[b-1pnsahchmb] {
    background: white;
    border-radius: 12px 12px 0 0;
    padding: 0 16px;
}

/* Scrollable Body */
.shifts-table-body[b-1pnsahchmb] {
    max-height: calc(100vh - 420px);
    overflow-y: auto;
    padding: 0 16px 16px 16px;
}

/* Table Styles - matches OrderGrid */
.shifts-table[b-1pnsahchmb] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    table-layout: fixed;
}

.shifts-table thead th[b-1pnsahchmb] {
    background: white;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e0e0e0;
    padding: 14px 16px;
    text-align: left;
    white-space: nowrap;
}

.shifts-table tbody tr[b-1pnsahchmb] {
    transition: all 0.15s ease;
    background-color: white;
    cursor: pointer;
}

.shifts-table tbody tr:hover[b-1pnsahchmb] {
    background-color: #f1f8f1;
}

.shifts-table tbody td[b-1pnsahchmb] {
    padding: 16px;
    font-size: var(--font-size-body);
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Column widths */
.shifts-table th:nth-child(1)[b-1pnsahchmb],
.shifts-table td:nth-child(1)[b-1pnsahchmb] { width: 12%; }
.shifts-table th:nth-child(2)[b-1pnsahchmb],
.shifts-table td:nth-child(2)[b-1pnsahchmb] { width: 18%; }
.shifts-table th:nth-child(3)[b-1pnsahchmb],
.shifts-table td:nth-child(3)[b-1pnsahchmb] { width: 20%; }
.shifts-table th:nth-child(4)[b-1pnsahchmb],
.shifts-table td:nth-child(4)[b-1pnsahchmb] { width: 15%; }
.shifts-table th:nth-child(5)[b-1pnsahchmb],
.shifts-table td:nth-child(5)[b-1pnsahchmb] { width: 10%; }
.shifts-table th:nth-child(6)[b-1pnsahchmb],
.shifts-table td:nth-child(6)[b-1pnsahchmb] { width: 10%; }
.shifts-table th:nth-child(7)[b-1pnsahchmb],
.shifts-table td:nth-child(7)[b-1pnsahchmb] { width: 15%; }

/* Status Badge - modern pill design (matches OrderGrid) */
.status-badge[b-1pnsahchmb] {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
    letter-spacing: 0.3px;
}

.status-badge.filled[b-1pnsahchmb] {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.open[b-1pnsahchmb] {
    background: #fff3e0;
    color: #f57c00;
}

/* View button - matches OrderGrid */
.btn-view[b-1pnsahchmb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #1b5e20;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.btn-view:hover[b-1pnsahchmb] {
    background: #2e7d32;
}

/* Responsive */
@media (max-width: 768px) {
    .shifts-grid-container[b-1pnsahchmb] {
        border-radius: 8px;
    }

    .shifts-table thead th[b-1pnsahchmb],
    .shifts-table tbody td[b-1pnsahchmb] {
        padding: 10px 12px;
    }
}
/* /Components/Pages/Customer/Dashboard/OpenShifts.razor.rz.scp.css */
/* Shared styles for all shift tabs */
.shifts-tab[b-c4p42nsw3l] {
    padding: 0;
}

.loading[b-c4p42nsw3l], .empty-state[b-c4p42nsw3l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.empty-state i.material-icons[b-c4p42nsw3l] {
    font-size: 64px;
    color: #9e9e9e;
    margin-bottom: 16px;
}

.empty-state h4[b-c4p42nsw3l] {
    color: var(--text-primary);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 8px;
}

.empty-state p[b-c4p42nsw3l] {
    color: var(--text-secondary);
    font-size: var(--font-size-body);
}

.section-title[b-c4p42nsw3l] {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 24px;
}

/* Grid Container - matches OrderGrid styling */
.shifts-grid-container[b-c4p42nsw3l] {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Fixed Header */
.shifts-table-header[b-c4p42nsw3l] {
    background: white;
    border-radius: 12px 12px 0 0;
    padding: 0 16px;
}

/* Scrollable Body */
.shifts-table-body[b-c4p42nsw3l] {
    max-height: calc(100vh - 420px);
    overflow-y: auto;
    padding: 0 16px 16px 16px;
}

/* Table Styles - matches OrderGrid */
.shifts-table[b-c4p42nsw3l] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    table-layout: fixed;
}

.shifts-table thead th[b-c4p42nsw3l] {
    background: white;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e0e0e0;
    padding: 14px 16px;
    text-align: left;
    white-space: nowrap;
}

.shifts-table tbody tr[b-c4p42nsw3l] {
    transition: all 0.15s ease;
    background-color: white;
    cursor: pointer;
}

.shifts-table tbody tr:hover[b-c4p42nsw3l] {
    background-color: #f1f8f1;
}

.shifts-table tbody td[b-c4p42nsw3l] {
    padding: 16px;
    font-size: var(--font-size-body);
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Column widths */
.shifts-table th:nth-child(1)[b-c4p42nsw3l],
.shifts-table td:nth-child(1)[b-c4p42nsw3l] { width: 12%; }
.shifts-table th:nth-child(2)[b-c4p42nsw3l],
.shifts-table td:nth-child(2)[b-c4p42nsw3l] { width: 18%; }
.shifts-table th:nth-child(3)[b-c4p42nsw3l],
.shifts-table td:nth-child(3)[b-c4p42nsw3l] { width: 20%; }
.shifts-table th:nth-child(4)[b-c4p42nsw3l],
.shifts-table td:nth-child(4)[b-c4p42nsw3l] { width: 15%; }
.shifts-table th:nth-child(5)[b-c4p42nsw3l],
.shifts-table td:nth-child(5)[b-c4p42nsw3l] { width: 10%; }
.shifts-table th:nth-child(6)[b-c4p42nsw3l],
.shifts-table td:nth-child(6)[b-c4p42nsw3l] { width: 10%; }
.shifts-table th:nth-child(7)[b-c4p42nsw3l],
.shifts-table td:nth-child(7)[b-c4p42nsw3l] { width: 15%; }

/* Status Badge - modern pill design (matches OrderGrid) */
.status-badge[b-c4p42nsw3l] {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
    letter-spacing: 0.3px;
}

.status-badge.filled[b-c4p42nsw3l] {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.open[b-c4p42nsw3l] {
    background: #fff3e0;
    color: #f57c00;
}

/* View button - matches OrderGrid */
.btn-view[b-c4p42nsw3l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #1b5e20;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.btn-view:hover[b-c4p42nsw3l] {
    background: #2e7d32;
}

/* Responsive */
@media (max-width: 768px) {
    .shifts-grid-container[b-c4p42nsw3l] {
        border-radius: 8px;
    }

    .shifts-table thead th[b-c4p42nsw3l],
    .shifts-table tbody td[b-c4p42nsw3l] {
        padding: 10px 12px;
    }
}
/* /Components/Pages/Customer/Dashboard/PreferredEmployees.razor.rz.scp.css */
/* Shared styles for all shift tabs */
.shifts-tab[b-txeqd5ngfm] {
    padding: 0;
}

.loading[b-txeqd5ngfm], .empty-state[b-txeqd5ngfm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.empty-state i.material-icons[b-txeqd5ngfm] {
    font-size: 64px;
    color: #9e9e9e;
    margin-bottom: 16px;
}

.empty-state h4[b-txeqd5ngfm] {
    color: var(--text-primary);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 8px;
}

.empty-state p[b-txeqd5ngfm] {
    color: var(--text-secondary);
    font-size: var(--font-size-body);
}

.section-title[b-txeqd5ngfm] {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 24px;
}

.shifts-grid[b-txeqd5ngfm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.shift-card[b-txeqd5ngfm] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.shift-card:hover[b-txeqd5ngfm] {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    border-color: #1b5e20;
}

.shift-header[b-txeqd5ngfm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.shift-date[b-txeqd5ngfm] {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    font-size: var(--font-size-body-lg);
}

.status-badge[b-txeqd5ngfm] {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.status-badge.filled[b-txeqd5ngfm] {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.open[b-txeqd5ngfm] {
    background: #fff3e0;
    color: #f57c00;
}

.shift-body[b-txeqd5ngfm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shift-info[b-txeqd5ngfm] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: var(--font-size-body);
}

.shift-info i.material-icons[b-txeqd5ngfm] {
    font-size: 18px;
    color: var(--text-light);
}

/* Preferred Employees Specific Styles */
.preferred-employees[b-txeqd5ngfm] {
    padding: 0;
}

.employees-grid[b-txeqd5ngfm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.employee-card[b-txeqd5ngfm] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.employee-card:hover[b-txeqd5ngfm] {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.employee-info[b-txeqd5ngfm] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.employee-info i.material-icons[b-txeqd5ngfm] {
    font-size: 24px;
    color: #ffa000;
}

.employee-name[b-txeqd5ngfm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.employee-name strong[b-txeqd5ngfm] {
    color: var(--text-primary);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
}

.employee-number[b-txeqd5ngfm] {
    color: var(--text-light);
    font-size: var(--font-size-small);
}

.employee-card .btn i.material-icons[b-txeqd5ngfm] {
    font-size: 18px;
}

/* Responsive */
@media (max-width: 768px) {
    .shifts-grid[b-txeqd5ngfm] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Customer/Dashboard/TodaysShifts.razor.rz.scp.css */
/* Shared styles for all shift tabs */
.shifts-tab[b-2qqwg597j7] {
    padding: 0;
}

.loading[b-2qqwg597j7], .empty-state[b-2qqwg597j7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.empty-state i.material-icons[b-2qqwg597j7] {
    font-size: 64px;
    color: #9e9e9e;
    margin-bottom: 16px;
}

.empty-state h4[b-2qqwg597j7] {
    color: var(--text-primary);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 8px;
}

.empty-state p[b-2qqwg597j7] {
    color: var(--text-secondary);
    font-size: var(--font-size-body);
}

.section-title[b-2qqwg597j7] {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 24px;
}

/* Grid Container - matches OrderGrid styling */
.shifts-grid-container[b-2qqwg597j7] {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Fixed Header */
.shifts-table-header[b-2qqwg597j7] {
    background: white;
    border-radius: 12px 12px 0 0;
    padding: 0 16px;
}

/* Scrollable Body */
.shifts-table-body[b-2qqwg597j7] {
    max-height: calc(100vh - 420px);
    overflow-y: auto;
    padding: 0 16px 16px 16px;
}

/* Table Styles - matches OrderGrid */
.shifts-table[b-2qqwg597j7] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    table-layout: fixed;
}

.shifts-table thead th[b-2qqwg597j7] {
    background: white;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e0e0e0;
    padding: 14px 16px;
    text-align: left;
    white-space: nowrap;
}

.shifts-table tbody tr[b-2qqwg597j7] {
    transition: all 0.15s ease;
    background-color: white;
    cursor: pointer;
}

.shifts-table tbody tr:hover[b-2qqwg597j7] {
    background-color: #f1f8f1;
}

.shifts-table tbody td[b-2qqwg597j7] {
    padding: 16px;
    font-size: var(--font-size-body);
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Column widths */
.shifts-table th:nth-child(1)[b-2qqwg597j7],
.shifts-table td:nth-child(1)[b-2qqwg597j7] { width: 12%; }
.shifts-table th:nth-child(2)[b-2qqwg597j7],
.shifts-table td:nth-child(2)[b-2qqwg597j7] { width: 18%; }
.shifts-table th:nth-child(3)[b-2qqwg597j7],
.shifts-table td:nth-child(3)[b-2qqwg597j7] { width: 20%; }
.shifts-table th:nth-child(4)[b-2qqwg597j7],
.shifts-table td:nth-child(4)[b-2qqwg597j7] { width: 15%; }
.shifts-table th:nth-child(5)[b-2qqwg597j7],
.shifts-table td:nth-child(5)[b-2qqwg597j7] { width: 10%; }
.shifts-table th:nth-child(6)[b-2qqwg597j7],
.shifts-table td:nth-child(6)[b-2qqwg597j7] { width: 10%; }
.shifts-table th:nth-child(7)[b-2qqwg597j7],
.shifts-table td:nth-child(7)[b-2qqwg597j7] { width: 15%; }

/* Status Badge - modern pill design (matches OrderGrid) */
.status-badge[b-2qqwg597j7] {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
    letter-spacing: 0.3px;
}

.status-badge.filled[b-2qqwg597j7] {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.open[b-2qqwg597j7] {
    background: #fff3e0;
    color: #f57c00;
}

/* View button - matches OrderGrid */
.btn-view[b-2qqwg597j7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #1b5e20;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.btn-view:hover[b-2qqwg597j7] {
    background: #2e7d32;
}

/* Responsive */
@media (max-width: 768px) {
    .shifts-grid-container[b-2qqwg597j7] {
        border-radius: 8px;
    }

    .shifts-table thead th[b-2qqwg597j7],
    .shifts-table tbody td[b-2qqwg597j7] {
        padding: 10px 12px;
    }
}
/* /Components/Pages/Customer/Dashboard/UnapprovedShifts.razor.rz.scp.css */
.unapproved-shifts[b-0i57pryg5q] {
    padding: 0;
}

.loading[b-0i57pryg5q], .empty-state[b-0i57pryg5q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.empty-state i.material-icons[b-0i57pryg5q] {
    font-size: 64px;
    color: #4caf50;
    margin-bottom: 16px;
}

.empty-state h4[b-0i57pryg5q] {
    color: var(--text-primary);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 8px;
}

.empty-state p[b-0i57pryg5q] {
    color: var(--text-secondary);
    font-size: var(--font-size-body);
}

.section-header[b-0i57pryg5q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-header h3[b-0i57pryg5q] {
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

/* Approve All button - dark green to match portal theme */
.section-header .btn-success[b-0i57pryg5q] {
    background: #1b5e20;
    border-color: #1b5e20;
    color: white;
    padding: 10px 20px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.section-header .btn-success:hover:not(:disabled)[b-0i57pryg5q] {
    background: #145018;
    border-color: #145018;
}

.section-header .btn-success:disabled[b-0i57pryg5q] {
    background: #cccccc;
    border-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.timeslips-list[b-0i57pryg5q] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timeslip-card[b-0i57pryg5q] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.card-header[b-0i57pryg5q] {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
}

.order-info[b-0i57pryg5q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-no[b-0i57pryg5q] {
    font-weight: var(--font-weight-semibold);
    color: #1b5e20;
    font-size: var(--font-size-h4);
}

.position[b-0i57pryg5q] {
    color: var(--text-secondary);
    font-size: var(--font-size-body);
}

.employee-info[b-0i57pryg5q] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
}

.employee-info i.material-icons[b-0i57pryg5q] {
    font-size: 20px;
}

.card-body[b-0i57pryg5q] {
    padding: 16px;
}

/* Horizontal fields row - matches old portal */
.fields-row[b-0i57pryg5q] {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    align-items: flex-start;
}

.field-item[b-0i57pryg5q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.field-item label[b-0i57pryg5q] {
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    white-space: nowrap;
}

.field-item .field-value[b-0i57pryg5q] {
    padding: 6px 0;
    color: var(--text-primary);
    font-size: var(--font-size-body);
}

.field-item input[b-0i57pryg5q],
.field-item .form-control-sm[b-0i57pryg5q] {
    font-size: var(--font-size-body);
    font-family: var(--font-family-base);
}

/* Comments section below fields */
.comments-section[b-0i57pryg5q] {
    margin-bottom: 16px;
}

.comments-section label[b-0i57pryg5q] {
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    display: block;
    margin-bottom: 4px;
}

.comments-section textarea[b-0i57pryg5q] {
    width: 100%;
}

.comments-section small[b-0i57pryg5q] {
    display: block;
    margin-top: 4px;
    text-align: right;
}

.comments[b-0i57pryg5q] {
    background: #f9f9f9;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.comments strong[b-0i57pryg5q] {
    color: var(--text-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    display: block;
    margin-bottom: 4px;
}

.comments p[b-0i57pryg5q] {
    color: var(--text-secondary);
    font-size: var(--font-size-body);
    margin: 0;
}

.card-actions[b-0i57pryg5q] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Individual Approve button - dark green to match portal theme */
.card-actions .btn-success[b-0i57pryg5q] {
    background: #1b5e20;
    border-color: #1b5e20;
    color: white;
    padding: 8px 16px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.card-actions .btn-success:hover:not(:disabled)[b-0i57pryg5q] {
    background: #145018;
    border-color: #145018;
}

.card-actions .btn-success:disabled[b-0i57pryg5q] {
    background: #cccccc;
    border-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Review Dialog */
.modal-backdrop[b-0i57pryg5q] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

.review-dialog[b-0i57pryg5q] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 1050;
    min-width: 400px;
    max-width: 500px;
}

.dialog-header[b-0i57pryg5q] {
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
}

.dialog-header h4[b-0i57pryg5q] {
    margin: 0;
    font-size: var(--font-size-h3);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

.dialog-body[b-0i57pryg5q] {
    padding: 24px;
}

.dialog-body p[b-0i57pryg5q] {
    margin: 0 0 12px 0;
    color: var(--text-secondary);
    font-size: var(--font-size-body);
    line-height: 1.5;
}

.dialog-body .instruction[b-0i57pryg5q] {
    margin: 0;
    font-size: var(--font-size-body);
}

.dialog-footer[b-0i57pryg5q] {
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
}

.dialog-footer .btn[b-0i57pryg5q] {
    min-width: 80px;
}

@media (max-width: 768px) {
    .card-header[b-0i57pryg5q] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .fields-row[b-0i57pryg5q] {
        flex-direction: column;
        gap: 12px;
    }

    .field-item[b-0i57pryg5q] {
        width: 100%;
    }
}
/* /Components/Pages/Customer/Dashboard/WeeksShifts.razor.rz.scp.css */
/* Shared styles for all shift tabs */
.shifts-tab[b-0l7sn994v6] {
    padding: 0;
}

.loading[b-0l7sn994v6], .empty-state[b-0l7sn994v6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.empty-state i.material-icons[b-0l7sn994v6] {
    font-size: 64px;
    color: #9e9e9e;
    margin-bottom: 16px;
}

.empty-state h4[b-0l7sn994v6] {
    color: var(--text-primary);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 8px;
}

.empty-state p[b-0l7sn994v6] {
    color: var(--text-secondary);
    font-size: var(--font-size-body);
}

.section-title[b-0l7sn994v6] {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 24px;
}

/* Grid Container - matches OrderGrid styling */
.shifts-grid-container[b-0l7sn994v6] {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Fixed Header */
.shifts-table-header[b-0l7sn994v6] {
    background: white;
    border-radius: 12px 12px 0 0;
    padding: 0 16px;
}

/* Scrollable Body */
.shifts-table-body[b-0l7sn994v6] {
    max-height: calc(100vh - 420px);
    overflow-y: auto;
    padding: 0 16px 16px 16px;
}

/* Table Styles - matches OrderGrid */
.shifts-table[b-0l7sn994v6] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    table-layout: fixed;
}

.shifts-table thead th[b-0l7sn994v6] {
    background: white;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e0e0e0;
    padding: 14px 16px;
    text-align: left;
    white-space: nowrap;
}

.shifts-table tbody tr[b-0l7sn994v6] {
    transition: all 0.15s ease;
    background-color: white;
    cursor: pointer;
}

.shifts-table tbody tr:hover[b-0l7sn994v6] {
    background-color: #f1f8f1;
}

.shifts-table tbody td[b-0l7sn994v6] {
    padding: 16px;
    font-size: var(--font-size-body);
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Column widths */
.shifts-table th:nth-child(1)[b-0l7sn994v6],
.shifts-table td:nth-child(1)[b-0l7sn994v6] { width: 12%; }
.shifts-table th:nth-child(2)[b-0l7sn994v6],
.shifts-table td:nth-child(2)[b-0l7sn994v6] { width: 18%; }
.shifts-table th:nth-child(3)[b-0l7sn994v6],
.shifts-table td:nth-child(3)[b-0l7sn994v6] { width: 20%; }
.shifts-table th:nth-child(4)[b-0l7sn994v6],
.shifts-table td:nth-child(4)[b-0l7sn994v6] { width: 15%; }
.shifts-table th:nth-child(5)[b-0l7sn994v6],
.shifts-table td:nth-child(5)[b-0l7sn994v6] { width: 10%; }
.shifts-table th:nth-child(6)[b-0l7sn994v6],
.shifts-table td:nth-child(6)[b-0l7sn994v6] { width: 10%; }
.shifts-table th:nth-child(7)[b-0l7sn994v6],
.shifts-table td:nth-child(7)[b-0l7sn994v6] { width: 15%; }

/* Status Badge - modern pill design (matches OrderGrid) */
.status-badge[b-0l7sn994v6] {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
    letter-spacing: 0.3px;
}

.status-badge.filled[b-0l7sn994v6] {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.open[b-0l7sn994v6] {
    background: #fff3e0;
    color: #f57c00;
}

/* View button - matches OrderGrid */
.btn-view[b-0l7sn994v6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #1b5e20;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.btn-view:hover[b-0l7sn994v6] {
    background: #2e7d32;
}

/* Responsive */
@media (max-width: 768px) {
    .shifts-grid-container[b-0l7sn994v6] {
        border-radius: 8px;
    }

    .shifts-table thead th[b-0l7sn994v6],
    .shifts-table tbody td[b-0l7sn994v6] {
        padding: 10px 12px;
    }
}
/* /Components/Pages/Customer/Order/OrderCreate.razor.rz.scp.css */
/* Order Create Page Container */
.order-create-page[b-q3ie9zydvo] {
    background-color: #f5f5f5;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px;
}

.page-header[b-q3ie9zydvo] {
    margin-bottom: 20px;
    flex-shrink: 0;
}

.page-header h2[b-q3ie9zydvo] {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

/* Main Layout - Two Column Flex */
.order-create-layout[b-q3ie9zydvo] {
    display: flex;
    flex: 1;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    gap: 16px;
}

/* Left Section: Add/Edit Shifts (30%) */
.add-shift-section[b-q3ie9zydvo] {
    width: 30%;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Right Section: Order Preview (70%) */
.all-shifts-section[b-q3ie9zydvo] {
    width: 70%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Responsive layout */
@media (max-width: 1200px) {
    .add-shift-section[b-q3ie9zydvo] {
        width: 35%;
        min-width: 300px;
    }

    .all-shifts-section[b-q3ie9zydvo] {
        width: 65%;
    }
}

@media (max-width: 1024px) {
    .order-create-page[b-q3ie9zydvo] {
        padding: 12px;
    }

    .order-create-layout[b-q3ie9zydvo] {
        flex-direction: column;
        gap: 12px;
    }

    .add-shift-section[b-q3ie9zydvo],
    .all-shifts-section[b-q3ie9zydvo] {
        width: 100%;
        min-width: auto;
        border-radius: 8px;
    }

    .add-shift-section[b-q3ie9zydvo] {
        max-height: 50%;
    }

    .all-shifts-section[b-q3ie9zydvo] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .order-create-page[b-q3ie9zydvo] {
        padding: 8px;
    }

    .page-header h2[b-q3ie9zydvo] {
        font-size: var(--font-size-h2);
    }
}
/* /Components/Pages/Customer/Order/OrderSearch.razor.rz.scp.css */
.page-container[b-2gyua2xj2p] {
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* Header Section */
.search-header[b-2gyua2xj2p] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    background: white;
    border-bottom: 1px solid #e0e0e0;
}

.page-title[b-2gyua2xj2p] {
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

/* Filter Card */
.filter-card[b-2gyua2xj2p] {
    flex-shrink: 0;
    margin: 16px 32px;
    padding: 16px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.filter-row[b-2gyua2xj2p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-section-custom[b-2gyua2xj2p] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.filter-label[b-2gyua2xj2p] {
    display: block;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Preset Buttons */
.preset-buttons[b-2gyua2xj2p] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-preset[b-2gyua2xj2p] {
    padding: 8px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.btn-preset:hover[b-2gyua2xj2p] {
    background: #f5f5f5;
    border-color: #bdbdbd;
}

.btn-preset.active[b-2gyua2xj2p] {
    background: #1b5e20;
    color: white;
    border-color: #1b5e20;
}

.btn-preset.active:hover[b-2gyua2xj2p] {
    background: #2e7d32;
    border-color: #2e7d32;
}

/* Date Range Inputs */
.date-range-inputs[b-2gyua2xj2p] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}

/* Compact single-line layout for date range with action buttons */
.date-range-with-actions[b-2gyua2xj2p] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.date-input-group[b-2gyua2xj2p] {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
}

.action-buttons[b-2gyua2xj2p] {
    display: flex;
    gap: 12px;
}

.input-label[b-2gyua2xj2p] {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    margin-bottom: 6px;
}

.date-input[b-2gyua2xj2p] {
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: var(--font-size-body);
    color: var(--text-primary);
    background: white;
    transition: all 0.2s ease;
}

.date-input:focus[b-2gyua2xj2p] {
    outline: none;
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.date-separator[b-2gyua2xj2p] {
    display: flex;
    align-items: center;
    padding-bottom: 4px;
    color: #9e9e9e;
}

.date-separator .material-icons[b-2gyua2xj2p] {
    font-size: 20px;
}

/* Filter Actions */
.filter-actions[b-2gyua2xj2p] {
    display: flex;
    gap: 12px;
}

.btn-search[b-2gyua2xj2p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    background: #1b5e20;
    color: white;
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(27, 94, 32, 0.2);
}

.btn-search:hover[b-2gyua2xj2p] {
    background: #2e7d32;
    box-shadow: 0 4px 8px rgba(27, 94, 32, 0.3);
    transform: translateY(-1px);
}

.btn-search:active[b-2gyua2xj2p] {
    background: #1b5e20;
    transform: translateY(0);
}

.btn-search .material-icons[b-2gyua2xj2p] {
    font-size: 18px;
}

.btn-clear[b-2gyua2xj2p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.btn-clear:hover[b-2gyua2xj2p] {
    background: #f5f5f5;
    border-color: #bdbdbd;
}

.btn-clear .material-icons[b-2gyua2xj2p] {
    font-size: 18px;
}

.btn-add[b-2gyua2xj2p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    background: #1b5e20;
    color: white;
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(27, 94, 32, 0.2);
}

.btn-add:hover[b-2gyua2xj2p] {
    background: #2e7d32;
    box-shadow: 0 4px 8px rgba(27, 94, 32, 0.3);
    transform: translateY(-1px);
}

.btn-add:active[b-2gyua2xj2p] {
    background: #1b5e20;
    transform: translateY(0);
}

.btn-add .material-icons[b-2gyua2xj2p] {
    font-size: 18px;
}

.content[b-2gyua2xj2p] {
    position: relative;
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 32px 32px 32px;
}

.grid-wrapper[b-2gyua2xj2p] {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.grid-wrapper[b-2gyua2xj2p]  .order-grid-container {
    flex: 1;
    min-height: 0;
}

.loading-indicator[b-2gyua2xj2p] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    z-index: 10;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.spinner[b-2gyua2xj2p] {
    height: 100%;
    background: #2e7d32;
    animation: loading-b-2gyua2xj2p 2s linear infinite;
}

@keyframes loading-b-2gyua2xj2p {
    0% {
        margin-left: -100%;
        margin-right: 100%;
    }
    50% {
        margin-left: 25%;
        margin-right: 25%;
    }
    100% {
        margin-left: 100%;
        margin-right: -100%;
    }
}
/* /Components/Pages/Customer/Order/OrderView.razor.rz.scp.css */
/* Order View Page Container */
.order-view-page[b-k2hmz0zw0e] {
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    height: 100%;
    width: 100%;
    overflow: hidden;
    padding: 16px;
    gap: 16px;
}

/* Loading and Error States */
.loading-container[b-k2hmz0zw0e] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: var(--font-size-h4);
    color: var(--text-secondary);
    gap: 16px;
}

.error-container[b-k2hmz0zw0e] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 20px;
    padding: 40px;
}

.error-message[b-k2hmz0zw0e] {
    color: #d32f2f;
    font-size: var(--font-size-h4);
    text-align: center;
}

.btn-retry[b-k2hmz0zw0e] {
    padding: 12px 32px;
    background: #1b5e20;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    transition: background 0.2s ease;
}

.btn-retry:hover[b-k2hmz0zw0e] {
    background: #145018;
}

/* Main Layout - Two Column Split View */
.order-view-layout[b-k2hmz0zw0e] {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 16px;
}

/* Left Panel: Shifts List (65%) */
.order-panel-section[b-k2hmz0zw0e] {
    width: 65%;
    min-width: 500px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Right Panel: Fulfillment Details (35%) */
.fulfillment-panel-section[b-k2hmz0zw0e] {
    width: 35%;
    min-width: 320px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Add Shift Container */
.add-shift-container[b-k2hmz0zw0e] {
    height: 100%;
    padding: 24px;
    background: white;
    overflow: auto;
    border-radius: 12px;
}

.add-shift-header[b-k2hmz0zw0e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.add-shift-header h3[b-k2hmz0zw0e] {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
}

.btn-close[b-k2hmz0zw0e] {
    width: 36px;
    height: 36px;
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-close:hover[b-k2hmz0zw0e] {
    background: #e0e0e0;
    color: #333;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .order-panel-section[b-k2hmz0zw0e] {
        width: 60%;
        min-width: 400px;
    }

    .fulfillment-panel-section[b-k2hmz0zw0e] {
        width: 40%;
        min-width: 300px;
    }
}

@media (max-width: 1024px) {
    .order-view-page[b-k2hmz0zw0e] {
        padding: 12px;
    }

    .order-view-layout[b-k2hmz0zw0e] {
        flex-direction: column;
        gap: 12px;
    }

    .order-panel-section[b-k2hmz0zw0e] {
        width: 100%;
        min-width: auto;
        height: 50%;
        border-radius: 8px;
    }

    .fulfillment-panel-section[b-k2hmz0zw0e] {
        width: 100%;
        min-width: auto;
        height: 50%;
        border-radius: 8px;
    }

    .add-shift-container[b-k2hmz0zw0e] {
        border-radius: 8px;
    }
}

@media (max-width: 768px) {
    .order-view-page[b-k2hmz0zw0e] {
        padding: 8px;
        gap: 8px;
    }

    .order-panel-section[b-k2hmz0zw0e] {
        height: 40%;
    }

    .fulfillment-panel-section[b-k2hmz0zw0e] {
        height: 60%;
    }

    .add-shift-container[b-k2hmz0zw0e] {
        padding: 16px;
    }

    .add-shift-header h3[b-k2hmz0zw0e] {
        font-size: var(--font-size-h4);
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Portal layout for authenticated users */
.portal-layout[b-87ay143i1b] {
    display: flex;
    min-height: 100vh;
    font-family: var(--font-family-base);
}

/* Left Sidebar - Modern 2025 Design */
.portal-sidebar[b-87ay143i1b] {
    width: 260px;
    background: linear-gradient(180deg, #1a5c1f 0%, #145218 100%);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    overflow: visible;
}

/* Logo Header Section */
.sidebar-header[b-87ay143i1b] {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-bottom: none;
    height: 72px;
}

.sidebar-brand[b-87ay143i1b] {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.sidebar-brand:hover[b-87ay143i1b] {
    transform: scale(1.02);
}

.sidebar-logo[b-87ay143i1b] {
    height: 48px;
    width: auto;
    max-width: 100%;
    cursor: pointer;
}

/* Customer Selector - Refined */
.customer-selector[b-87ay143i1b] {
    padding: 16px 16px;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: visible;
}

.customer-selector-label[b-87ay143i1b] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.customer-selector-label i.material-icons[b-87ay143i1b] {
    font-size: 16px;
}

/* Custom Dropdown - Modern 2025 Style */
.custom-dropdown[b-87ay143i1b] {
    position: relative;
    width: 100%;
}

.custom-dropdown.disabled[b-87ay143i1b] {
    pointer-events: none;
    opacity: 0.5;
}

.dropdown-trigger[b-87ay143i1b] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 13px;
    font-weight: 500;
    padding: 12px 14px;
    border-radius: 10px;
    outline: none;
    cursor: pointer;
    color: #fff;
    transition: all 0.25s ease;
    text-align: left;
}

.dropdown-trigger:hover:not(:disabled)[b-87ay143i1b] {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.dropdown-trigger:focus[b-87ay143i1b] {
    background-color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.dropdown-trigger:disabled[b-87ay143i1b] {
    cursor: not-allowed;
    opacity: 0.5;
}

.dropdown-value[b-87ay143i1b] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-arrow[b-87ay143i1b] {
    font-size: 20px;
    opacity: 0.8;
    transition: transform 0.2s ease;
}

.custom-dropdown.open .dropdown-arrow[b-87ay143i1b] {
    transform: rotate(180deg);
}

/* Dropdown Menu - Styled Options */
.customer-dropdown-menu[b-87ay143i1b] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    animation: dropdownSlide-b-87ay143i1b 0.2s ease-out;
    display: block;
}

@keyframes dropdownSlide-b-87ay143i1b {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.customer-dropdown-option[b-87ay143i1b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 8px;
    cursor: pointer;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
}

.customer-dropdown-option:hover[b-87ay143i1b] {
    background: #f0f7f0;
    color: #1b5e20;
}

.customer-dropdown-option.selected[b-87ay143i1b] {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    color: #1b5e20;
    font-weight: 600;
}

.customer-dropdown-option .check-icon[b-87ay143i1b] {
    font-size: 18px;
    color: #1b5e20;
}

/* Scrollbar styling for dropdown */
.customer-dropdown-menu[b-87ay143i1b]::-webkit-scrollbar {
    width: 6px;
}

.customer-dropdown-menu[b-87ay143i1b]::-webkit-scrollbar-track {
    background: transparent;
}

.customer-dropdown-menu[b-87ay143i1b]::-webkit-scrollbar-thumb {
    background: #c8e6c9;
    border-radius: 3px;
}

.customer-dropdown-menu[b-87ay143i1b]::-webkit-scrollbar-thumb:hover {
    background: #a5d6a7;
}

.selector-loading[b-87ay143i1b] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    padding: 12px 14px;
}

/* Sidebar Navigation */
.sidebar-nav[b-87ay143i1b] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    padding: 12px 0;
}

.nav-list[b-87ay143i1b] {
    list-style: none;
    padding: 0 12px;
    margin: 0;
}

/* Nav Items - Modern Pill Style */
.nav-item[b-87ay143i1b] {
    margin: 4px 0;
    position: relative;
}

.nav-item a[b-87ay143i1b] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.2s ease;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body);
}

.nav-item a:hover[b-87ay143i1b] {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateX(2px);
}

/* Active State - Pill Highlight */
.nav-item.active a[b-87ay143i1b] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-weight: 600;
}

.nav-item.active a[b-87ay143i1b]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background: #fff;
    border-radius: 0 4px 4px 0;
}

.nav-item i.material-icons[b-87ay143i1b] {
    font-size: 22px;
    opacity: 0.9;
    flex-shrink: 0;
}

.nav-item span[b-87ay143i1b] {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

/* Divider */
.divider[b-87ay143i1b] {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    margin: 12px 16px;
}

/* Bottom Navigation */
.nav-bottom[b-87ay143i1b] {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Sign Out Item - Subtle different style */
.nav-item.signout-item a[b-87ay143i1b] {
    color: rgba(255, 255, 255, 0.7);
}

.nav-item.signout-item a:hover[b-87ay143i1b] {
    background-color: rgba(255, 100, 100, 0.15);
    color: #ffcdd2;
}

/* Main Content Area */
.portal-main[b-87ay143i1b] {
    flex: 1;
    margin-left: 260px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

.portal-header[b-87ay143i1b] {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    color: #333;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    height: 72px;
    flex-shrink: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.page-title[b-87ay143i1b] {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    padding-left: 16px;
}

.page-title[b-87ay143i1b]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 28px;
    background: linear-gradient(180deg, #1b5e20 0%, #2e7d32 100%);
    border-radius: 2px;
}

.portal-user[b-87ay143i1b] {
    display: flex;
    align-items: center;
    position: relative;
}

/* User Dropdown Styles - matching old portal */
.user-dropdown[b-87ay143i1b] {
    position: relative;
}

.user-dropdown-button[b-87ay143i1b] {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px 16px;
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    border-radius: 10px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(27, 94, 32, 0.25);
}

.user-dropdown-button:hover[b-87ay143i1b] {
    background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.35);
}

.user-dropdown-button:active[b-87ay143i1b] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(27, 94, 32, 0.2);
}

.user-dropdown-button .user-name[b-87ay143i1b] {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: #fff;
    margin-right: 6px;
    user-select: none;
}

.user-dropdown-button i.material-icons[b-87ay143i1b] {
    font-size: 20px;
    color: #fff;
    pointer-events: none;
    opacity: 0.9;
}

.user-dropdown-menu[b-87ay143i1b] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    min-width: 220px;
    padding: 16px;
    animation: dropdownFadeIn-b-87ay143i1b 0.2s ease-out;
}

@keyframes dropdownFadeIn-b-87ay143i1b {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-user-info[b-87ay143i1b] {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}

.dropdown-user-name[b-87ay143i1b] {
    white-space: nowrap;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-size: var(--font-size-body-lg);
}

.dropdown-user-email[b-87ay143i1b] {
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    white-space: nowrap;
}

.dropdown-actions[b-87ay143i1b] {
    text-align: right;
}

.dropdown-actions .btn[b-87ay143i1b] {
    margin: 0;
    padding: 10px 20px;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    text-transform: none;
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%) !important;
    border: none;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    display: inline-block;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(27, 94, 32, 0.2);
}

.dropdown-actions .btn:hover[b-87ay143i1b] {
    background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(27, 94, 32, 0.3);
    border-color: #0e4910;
}

.portal-content[b-87ay143i1b] {
    flex: 1;
    min-height: 0;
    max-height: 100%;
    background-color: #f5f5f5;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* App loading screen */
.app-loading-container[b-87ay143i1b] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

.app-loading-container > img[b-87ay143i1b] {
    display: block;
    max-width: 100%;
    height: auto;
}

.app-loading-container > span[b-87ay143i1b] {
    margin-top: 40px;
    text-align: center;
    font-size: 2rem;
    color: #333;
}

@media (max-width: 576px) {
    .app-loading-container > span[b-87ay143i1b] {
        font-size: 1.5rem;
    }
}

/* Customer selection prompt */
.customer-selection-prompt[b-87ay143i1b] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 3rem;
}

.customer-selection-prompt .text-center[b-87ay143i1b] {
    max-width: 400px;
}

/* Login page for unauthenticated users */
.login-page[b-87ay143i1b] {
    display: flex;
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 50%, #43a047 100%);
    background-position: center;
    background-size: cover;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    padding: 24px;
    overflow-x: hidden;
    overflow-y: auto;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin: 0;
}

/* Green decorative circles similar to the blue design */
.login-page[b-87ay143i1b]::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(129, 199, 132, 0.3);
    border-radius: 50%;
    bottom: -100px;
    left: -100px;
    z-index: 1;
}

.login-page[b-87ay143i1b]::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(76, 175, 80, 0.2);
    border-radius: 50%;
    top: 50px;
    left: 100px;
    z-index: 1;
}

/* Welcome section on the left */
.welcome-section[b-87ay143i1b] {
    flex: 1;
    max-width: 500px;
    color: white;
    padding: 40px 20px;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.welcome-title[b-87ay143i1b] {
    font-size: clamp(1.5rem, 3.5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 16px;
    color: white;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.2;
}

.welcome-subtitle[b-87ay143i1b] {
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
    font-weight: 400;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    color: white;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.4;
}

.welcome-text[b-87ay143i1b] {
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    text-align: justify;
}

.login-card[b-87ay143i1b] {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15),
                0 4px 12px rgba(0, 0, 0, 0.1),
                0 1px 3px rgba(0, 0, 0, 0.08);
    max-width: 420px;
    width: 100%;
    text-align: center;
    margin: auto;
    position: relative;
    z-index: 10;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-card:hover[b-87ay143i1b] {
    transform: translateY(-4px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2),
                0 6px 16px rgba(0, 0, 0, 0.12),
                0 2px 4px rgba(0, 0, 0, 0.1);
}

.subheading[b-87ay143i1b] {
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.login-card p[b-87ay143i1b] {
    color: var(--text-secondary);
    margin-bottom: 16px;
    font-size: var(--font-size-small);
}

.login-card hr[b-87ay143i1b] {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 24px 0;
}

.login-card .btn[b-87ay143i1b] {
    width: 100%;
    margin-bottom: 16px;
    padding: 12px 24px;
    height: 48px;
    line-height: 1.5;
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-semibold);
    border-radius: 8px;
    text-transform: none;
    font-family: var(--font-family-base);
    min-width: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.login-card .btn-primary[b-87ay143i1b] {
    background-color: #1b5e20 !important;
    border-color: #1b5e20 !important;
    color: white;
}

.login-card .btn-primary:hover[b-87ay143i1b] {
    background-color: #2e7d32 !important;
    border-color: #2e7d32 !important;
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.3);
    transform: translateY(-2px);
}

.login-card .btn-primary:active[b-87ay143i1b] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(27, 94, 32, 0.2);
}

.login-card .btn-outline-primary[b-87ay143i1b] {
    background-color: transparent;
    border: 2px solid #1b5e20 !important;
    color: #1b5e20;
}

.login-card .btn-outline-primary:hover[b-87ay143i1b] {
    background-color: #1b5e20 !important;
    color: white;
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.2);
    transform: translateY(-2px);
}

.login-card .btn-outline-primary:active[b-87ay143i1b] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(27, 94, 32, 0.15);
}

.login-card .btn-block[b-87ay143i1b] {
    display: block;
    width: 100%;
}

.login-card .btn:disabled[b-87ay143i1b],
.login-card .btn[disabled][b-87ay143i1b] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.login-card .btn:focus[b-87ay143i1b] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.25);
}

.sign-up-note[b-87ay143i1b] {
    display: block;
    margin-top: 8px;
    color: #555;
    font-size: 10px;
    font-weight: bold;
    line-height: 1.4;
}

/* Access denied layout - full width when sidebar is hidden */
.portal-main.access-denied-layout[b-87ay143i1b] {
    margin-left: 0;
    width: 100%;
}

/* Access denied container - centered */
.access-denied-container[b-87ay143i1b] {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
}

.access-denied-container .btn-primary[b-87ay143i1b] {
    background-color: #1b5e20 !important;
    border-color: #1b5e20 !important;
    color: white;
    padding: 10px 32px;
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-medium);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.access-denied-container .btn-primary:hover:not(:disabled)[b-87ay143i1b] {
    background-color: #2e7d32 !important;
    border-color: #2e7d32 !important;
    box-shadow: 0 2px 8px rgba(27, 94, 32, 0.3);
}

.access-denied-container .btn-primary:disabled[b-87ay143i1b] {
    opacity: 0.6;
    cursor: not-allowed;
}

.loading[b-87ay143i1b] {
    text-align: center;
    padding: 3rem;
}

/* Tablet and larger - side by side but tighter */
@media (max-width: 1400px) {
    .login-page[b-87ay143i1b] {
        gap: 20px;
        padding: 20px 15px;
    }

    .welcome-section[b-87ay143i1b] {
        max-width: 450px;
        padding: 30px 15px;
    }

    .login-card[b-87ay143i1b] {
        max-width: 380px;
    }
}

/* Medium screens - start stacking */
@media (max-width: 992px) {
    .login-page[b-87ay143i1b] {
        flex-direction: column;
        gap: 30px;
        padding: 20px 15px;
        justify-content: flex-start;
        padding-top: 40px;
    }

    .welcome-section[b-87ay143i1b] {
        max-width: 100%;
        padding: 20px 15px;
        text-align: center;
    }

    .welcome-title[b-87ay143i1b] {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
        margin-bottom: 12px;
    }

    .welcome-subtitle[b-87ay143i1b] {
        font-size: clamp(0.9rem, 3vw, 1.1rem);
        margin-bottom: 16px;
    }

    .welcome-text[b-87ay143i1b] {
        font-size: clamp(0.8rem, 2.5vw, 0.95rem);
        max-width: 600px;
        margin: 0 auto;
    }

    .login-card[b-87ay143i1b] {
        max-width: 100%;
        width: 100%;
    }
}

/* Tablets */
@media (max-width: 768px) {
    .login-page[b-87ay143i1b] {
        padding: 15px 10px;
        gap: 25px;
    }

    .welcome-section[b-87ay143i1b] {
        padding: 15px 10px;
    }

    .welcome-title[b-87ay143i1b] {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }

    .welcome-subtitle[b-87ay143i1b] {
        font-size: clamp(0.85rem, 3.5vw, 1rem);
    }

    .welcome-text[b-87ay143i1b] {
        font-size: clamp(0.75rem, 3vw, 0.9rem);
    }

    .login-card[b-87ay143i1b] {
        padding: 24px;
        border-radius: 14px;
    }
}

/* Mobile phones */
@media (max-width: 576px) {
    .login-page[b-87ay143i1b] {
        padding: 10px;
        gap: 20px;
        padding-top: 20px;
    }

    .welcome-section[b-87ay143i1b] {
        padding: 10px;
    }

    .welcome-title[b-87ay143i1b] {
        font-size: 1.5rem;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }

    .welcome-subtitle[b-87ay143i1b] {
        font-size: 0.9rem;
        letter-spacing: 0.3px;
        margin-bottom: 12px;
    }

    .welcome-text[b-87ay143i1b] {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    .login-card[b-87ay143i1b] {
        padding: 20px;
        max-width: 100%;
        border-radius: 12px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12),
                    0 3px 10px rgba(0, 0, 0, 0.08);
    }

    .login-card:hover[b-87ay143i1b] {
        transform: translateY(-2px);
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15),
                    0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .login-page[b-87ay143i1b]::before {
        width: 200px;
        height: 200px;
        bottom: -80px;
        left: -80px;
    }

    .login-page[b-87ay143i1b]::after {
        width: 150px;
        height: 150px;
        top: 30px;
        left: 60px;
    }

    .subheading[b-87ay143i1b] {
        font-size: 14px;
    }

    .login-card p[b-87ay143i1b] {
        font-size: 12px;
    }

    .login-card .btn[b-87ay143i1b] {
        height: 44px;
        font-size: 14px;
        padding: 10px 20px;
        border-radius: 6px;
    }
}

/* Rotating animation for sign out loading indicator */
@keyframes rotate-b-87ay143i1b {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotating[b-87ay143i1b] {
    animation: rotate-b-87ay143i1b 1s linear infinite;
}

/* Sign out overlay - full screen loading */
.signout-overlay[b-87ay143i1b] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

/* Week 1 Release - Coming Soon Container */
.coming-soon-container[b-87ay143i1b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 500px;
    padding: 2rem;
    text-align: center;
}
/* /Components/Pages/Registration.razor.rz.scp.css */
/* Registration Page - Modern Green Background */
.registration-page[b-8d90la9096] {
    min-height: 100vh;
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 50%, #388e3c 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    overflow: hidden;
}

/* Decorative Circles */
.registration-page[b-8d90la9096]::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    z-index: 0;
}

.registration-page[b-8d90la9096]::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    z-index: 0;
}

.registration-card[b-8d90la9096] {
    background: white !important;
    background-color: #ffffff !important;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 32px;
    width: 100%;
    max-width: 550px;
    text-align: center;
    position: relative;
    z-index: 1;
    transform: translateZ(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e0e0e0;
}

.registration-card:hover[b-8d90la9096] {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18), 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Logo */
.logo-container img[b-8d90la9096] {
    height: 100px;
    margin-bottom: 16px;
}

hr[b-8d90la9096] {
    border: 0;
    border-top: 1px solid #e0e0e0;
    margin: 16px 0;
}

/* Instructions */
.instructions[b-8d90la9096] {
    padding: 0 16px;
    margin: 16px 0;
    color: var(--text-primary);
    font-size: var(--font-size-body);
}

/* Error Messages */
.error-message[b-8d90la9096] {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #c62828;
    padding: 14px 18px;
    border-radius: 12px;
    border-left: 4px solid #d32f2f;
    margin: 16px 0;
    font-size: var(--font-size-body);
    text-align: left;
    box-shadow: 0 2px 8px rgba(211, 47, 47, 0.15);
    animation: errorSlideIn-b-8d90la9096 0.3s ease-out;
}

@keyframes errorSlideIn-b-8d90la9096 {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.form-field-error[b-8d90la9096] {
    color: #d32f2f;
    font-size: var(--font-size-xs);
    margin-top: 6px;
    text-align: left;
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Loading Container */
.loading-container[b-8d90la9096] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.loading-container span[b-8d90la9096] {
    display: block;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: var(--font-size-body);
}

/* Success Container */
.success-container[b-8d90la9096] {
    padding: 16px 0;
}

.subheading[b-8d90la9096] {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-medium);
    color: #1b5e20;
    margin-bottom: 16px;
}

.success-container p[b-8d90la9096] {
    margin: 16px 0;
    color: var(--text-secondary);
    font-size: var(--font-size-body);
}

.btn-continue[b-8d90la9096] {
    background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
    color: white;
    border: none;
    padding: 14px 40px;
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-semibold);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 12px;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(0);
    position: relative;
    overflow: hidden;
}

.btn-continue[b-8d90la9096]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-continue:hover[b-8d90la9096]::before {
    left: 100%;
}

.btn-continue:hover[b-8d90la9096] {
    background: linear-gradient(135deg, #388e3c 0%, #43a047 100%);
    box-shadow: 0 6px 16px rgba(46, 125, 50, 0.4), 0 3px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.btn-continue:active[b-8d90la9096] {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 6px rgba(46, 125, 50, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Button Group - User Type Selection */
.button-group[b-8d90la9096] {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.selection-button[b-8d90la9096] {
    width: 65%;
    padding: 16px 24px;
    background-color: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    color: var(--text-primary);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(0);
    position: relative;
    overflow: hidden;
    align-self: center;
}

.selection-button[b-8d90la9096]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(46, 125, 50, 0.05), rgba(46, 125, 50, 0.1));
    transition: width 0.4s ease;
    z-index: 0;
}

.selection-button:hover[b-8d90la9096]::before {
    width: 100%;
}

.selection-button:hover[b-8d90la9096] {
    background-color: #fafafa;
    border-color: #2e7d32;
    box-shadow: 0 6px 16px rgba(46, 125, 50, 0.2);
    transform: translateY(-3px);
}

.selection-button.selected[b-8d90la9096] {
    background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
    border: 2px solid #1b5e20;
    color: white !important;
    box-shadow: 0 8px 20px rgba(46, 125, 50, 0.35), 0 3px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px) scale(1.02);
}

.selection-button.selected[b-8d90la9096]::before {
    width: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
}

.selection-button:active[b-8d90la9096] {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* Form Container */
.form-container[b-8d90la9096] {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    padding: 20px;
    background-color: #fafafa;
    border-radius: 16px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
    animation: formSlideIn-b-8d90la9096 0.4s ease-out;
}

@keyframes formSlideIn-b-8d90la9096 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-row[b-8d90la9096] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
}

.form-group[b-8d90la9096] {
    flex: 1;
    text-align: left;
    position: relative;
}

.form-group:last-child[b-8d90la9096] {
    margin-right: 0;
}

.form-group label[b-8d90la9096] {
    display: block;
    text-align: left;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.3px;
    transition: color 0.3s ease;
}

/* Actions Container */
.actions-container[b-8d90la9096] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    margin-top: 20px;
    gap: 12px;
}

.next-button[b-8d90la9096] {
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-semibold);
    background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(0);
    position: relative;
    overflow: hidden;
}

.next-button[b-8d90la9096]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.next-button:hover[b-8d90la9096]::before {
    left: 100%;
}

.next-button:hover[b-8d90la9096] {
    background: linear-gradient(135deg, #388e3c 0%, #43a047 100%);
    box-shadow: 0 6px 16px rgba(46, 125, 50, 0.4), 0 3px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.next-button:active[b-8d90la9096] {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 6px rgba(46, 125, 50, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
}

.right-buttons[b-8d90la9096] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.verify-button[b-8d90la9096] {
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-semibold);
    background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(0);
    position: relative;
    overflow: hidden;
}

.verify-button[b-8d90la9096]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.verify-button:hover:not(:disabled)[b-8d90la9096]::before {
    left: 100%;
}

.verify-button:hover:not(:disabled)[b-8d90la9096] {
    background: linear-gradient(135deg, #388e3c 0%, #43a047 100%);
    box-shadow: 0 6px 16px rgba(46, 125, 50, 0.4), 0 3px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.verify-button:active:not(:disabled)[b-8d90la9096] {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 6px rgba(46, 125, 50, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
}

.verify-button:disabled[b-8d90la9096] {
    background: #bdbdbd;
    cursor: not-allowed;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    opacity: 0.6;
}

/* QR Code Popup */
.qr-popup-overlay[b-8d90la9096] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.qr-popup-content[b-8d90la9096] {
    background: white !important;
    background-color: #ffffff !important;
    border-radius: 12px;
    padding: 24px;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.2);
    animation: popupSlideIn-b-8d90la9096 0.3s ease-out;
    border: 1px solid #e0e0e0;
}

@keyframes popupSlideIn-b-8d90la9096 {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.qr-popup-header[b-8d90la9096] {
    text-align: center;
    margin-bottom: 24px;
    position: relative;
}

.qr-popup-header img[b-8d90la9096] {
    margin-bottom: 12px;
}

.qr-popup-header h3[b-8d90la9096] {
    color: #1b5e20;
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-medium);
    margin: 0;
}

.qr-close-button[b-8d90la9096] {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #d32f2f;
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(211, 47, 47, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    transform: translateY(0);
}

.qr-close-button:hover[b-8d90la9096] {
    background: #c62828;
    box-shadow: 0 6px 12px rgba(211, 47, 47, 0.5), 0 3px 6px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

.qr-close-button:active[b-8d90la9096] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(211, 47, 47, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.qr-container[b-8d90la9096] {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.qr-item[b-8d90la9096] {
    flex: 1;
    min-width: 200px;
    max-width: 250px;
}

.qr-card[b-8d90la9096] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(0);
    background-color: #ffffff !important;
    background: white !important;
}

.qr-card:hover[b-8d90la9096] {
    border-color: #1b5e20;
    box-shadow: 0 8px 20px rgba(27, 94, 32, 0.25), 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
}

.qr-card:active[b-8d90la9096] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.store-header[b-8d90la9096] {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.store-icon[b-8d90la9096] {
    width: 40px;
    height: 40px;
}

.qr-image[b-8d90la9096] {
    width: 180px;
    height: 180px;
    margin-bottom: 12px;
}

.qr-label[b-8d90la9096] {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

/* Responsive */
@media (max-width: 600px) {
    .registration-card[b-8d90la9096] {
        padding: 16px;
        max-width: 100%;
    }

    .form-row[b-8d90la9096] {
        flex-direction: column;
        gap: 0;
    }

    .selection-button[b-8d90la9096] {
        width: 100%;
        font-size: var(--font-size-small);
    }

    .logo-container img[b-8d90la9096] {
        height: 80px;
    }

    .qr-popup-content[b-8d90la9096] {
        padding: 16px;
        width: 95%;
    }

    .qr-container[b-8d90la9096] {
        flex-direction: column;
        align-items: center;
    }

    .qr-item[b-8d90la9096] {
        max-width: 100%;
    }
}
/* /Components/Shared/ConfirmDialog.razor.rz.scp.css */
.confirm-backdrop[b-pqalyrf2x5] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    animation: fadeIn-b-pqalyrf2x5 0.2s ease-in;
}

.confirm-dialog[b-pqalyrf2x5] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    min-width: 400px;
    max-width: 500px;
    animation: slideIn-b-pqalyrf2x5 0.3s ease-out;
}

.confirm-header[b-pqalyrf2x5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
}

.confirm-icon[b-pqalyrf2x5] {
    font-size: 32px;
}

.confirm-primary .confirm-icon[b-pqalyrf2x5] {
    color: #007bff;
}

.confirm-danger .confirm-icon[b-pqalyrf2x5] {
    color: #dc3545;
}

.confirm-warning .confirm-icon[b-pqalyrf2x5] {
    color: #ffc107;
}

.confirm-success .confirm-icon[b-pqalyrf2x5] {
    color: #28a745;
}

.confirm-header h4[b-pqalyrf2x5] {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.confirm-body[b-pqalyrf2x5] {
    padding: 24px;
}

.confirm-body p[b-pqalyrf2x5] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-body-lg);
    line-height: 1.5;
}

.confirm-footer[b-pqalyrf2x5] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    background-color: #f8f9fa;
    border-radius: 0 0 8px 8px;
}

.confirm-footer .btn[b-pqalyrf2x5] {
    padding: 8px 20px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    border-radius: 4px;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.confirm-footer .btn-outline-secondary[b-pqalyrf2x5] {
    background: white;
    border: 1px solid #ced4da;
    color: #6c757d;
}

.confirm-footer .btn-outline-secondary:hover[b-pqalyrf2x5] {
    background: #e9ecef;
}

.confirm-footer .btn-primary[b-pqalyrf2x5] {
    background: #007bff;
    color: white;
}

.confirm-footer .btn-primary:hover[b-pqalyrf2x5] {
    background: #0056b3;
}

.confirm-footer .btn-danger[b-pqalyrf2x5] {
    background: #dc3545;
    color: white;
}

.confirm-footer .btn-danger:hover[b-pqalyrf2x5] {
    background: #c82333;
}

.confirm-footer .btn-warning[b-pqalyrf2x5] {
    background: #ffc107;
    color: #212529;
}

.confirm-footer .btn-warning:hover[b-pqalyrf2x5] {
    background: #e0a800;
}

.confirm-footer .btn-success[b-pqalyrf2x5] {
    background: #1b5e20;
    color: white;
}

.confirm-footer .btn-success:hover[b-pqalyrf2x5] {
    background: #145018;
}

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

@keyframes slideIn-b-pqalyrf2x5 {
    from {
        transform: translate(-50%, -60%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}
/* /Components/Shared/Contact/ContactForm.razor.rz.scp.css */
/* Modern Contact Form Styles */

.contact-form-container[b-26zmi3emol] {
    display: flex;
    justify-content: center;
    padding: 24px;
    min-height: calc(100vh - 200px);
}

.contact-form-card[b-26zmi3emol] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    width: 100%;
    padding: 32px;
    animation: fadeIn-b-26zmi3emol 0.3s ease-out;
    overflow-x: auto;
    overflow-y: auto;
}

@keyframes fadeIn-b-26zmi3emol {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Card Header */
.card-header[b-26zmi3emol] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
}

.header-icon[b-26zmi3emol] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-icon i[b-26zmi3emol] {
    font-size: 28px;
    color: white;
}

.header-text[b-26zmi3emol] {
    flex: 1;
}

.card-title[b-26zmi3emol] {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 6px 0;
}

.card-subtitle[b-26zmi3emol] {
    font-size: var(--font-size-body);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Form Styles */
.contact-form[b-26zmi3emol] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group[b-26zmi3emol] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 10px;
}

.form-group label[b-26zmi3emol] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.form-group label i[b-26zmi3emol] {
    font-size: 18px;
    color: #1b5e20;
}

.form-control[b-26zmi3emol] {
    width: 100%;
    padding: 12px 14px;
    font-size: var(--font-size-body);
    font-family: inherit;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.form-control[b-26zmi3emol]::placeholder {
    color: #999;
}

.form-control:focus[b-26zmi3emol] {
    outline: none;
    border-color: #1b5e20;
    box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.1);
}

.form-control:disabled[b-26zmi3emol] {
    background: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.7;
}

.form-control.textarea[b-26zmi3emol] {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

/* Character Counter */
.char-counter[b-26zmi3emol] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-align: right;
    margin-top: 4px;
}

/* Form Row */
.form-row[b-26zmi3emol] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Validation */
.validation-message[b-26zmi3emol] {
    color: #dc3545;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    margin-top: 4px;
}

/* Alerts */
.alert[b-26zmi3emol] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    animation: slideIn-b-26zmi3emol 0.3s ease-out;
}

@keyframes slideIn-b-26zmi3emol {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.alert i[b-26zmi3emol] {
    font-size: 22px;
    flex-shrink: 0;
}

.alert span[b-26zmi3emol] {
    font-size: var(--font-size-body);
    line-height: 1.4;
}

.alert-success[b-26zmi3emol] {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border: 1px solid #a5d6a7;
    color: #1b5e20;
}

.alert-success i[b-26zmi3emol] {
    color: #2e7d32;
}

.alert-danger[b-26zmi3emol] {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    border: 1px solid #ef9a9a;
    color: #c62828;
}

.alert-danger i[b-26zmi3emol] {
    color: #d32f2f;
}

/* Form Actions */
.form-actions[b-26zmi3emol] {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}

.btn-submit[b-26zmi3emol] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-semibold);
    color: white;
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 180px;
}

.btn-submit:hover:not(:disabled)[b-26zmi3emol] {
    background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.3);
}

.btn-submit:active:not(:disabled)[b-26zmi3emol] {
    transform: translateY(0);
}

.btn-submit:disabled[b-26zmi3emol] {
    background: #bdbdbd;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-submit i[b-26zmi3emol] {
    font-size: 20px;
}

/* Spinner */
.spinner[b-26zmi3emol] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-26zmi3emol 0.8s linear infinite;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .contact-form-container[b-26zmi3emol] {
        padding: 16px;
    }

    .contact-form-card[b-26zmi3emol] {
        padding: 24px;
        border-radius: 12px;
    }

    .card-header[b-26zmi3emol] {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .header-icon[b-26zmi3emol] {
        width: 64px;
        height: 64px;
    }

    .header-icon i[b-26zmi3emol] {
        font-size: 32px;
    }

    .card-title[b-26zmi3emol] {
        font-size: var(--font-size-h3);
    }

    .form-row[b-26zmi3emol] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-actions[b-26zmi3emol] {
        justify-content: center;
    }

    .btn-submit[b-26zmi3emol] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .contact-form-card[b-26zmi3emol] {
        padding: 20px;
    }

    .card-title[b-26zmi3emol] {
        font-size: var(--font-size-h3);
    }

    .card-subtitle[b-26zmi3emol] {
        font-size: var(--font-size-small);
    }

    .form-control[b-26zmi3emol] {
        padding: 10px 12px;
        font-size: var(--font-size-body);
    }
}
/* /Components/Shared/LoadingModal.razor.rz.scp.css */
.loading-modal-backdrop[b-ue7vnd0koh] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-modal-content[b-ue7vnd0koh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.loading-modal-content .spinner-border[b-ue7vnd0koh] {
    width: 3rem;
    height: 3rem;
}

.loading-message[b-ue7vnd0koh] {
    color: white;
    font-size: 1.2rem;
    margin: 0;
    text-align: center;
}
/* /Components/Shared/NotificationMessage.razor.rz.scp.css */
.notification-backdrop[b-c91c79qnjz] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    animation: fadeIn-b-c91c79qnjz 0.2s ease-in;
}

.notification-popup[b-c91c79qnjz] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 2010;
    min-width: 400px;
    max-width: 500px;
    animation: slideIn-b-c91c79qnjz 0.3s ease-out;
}

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

@keyframes slideIn-b-c91c79qnjz {
    from {
        transform: translate(-50%, -60%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

.notification-header[b-c91c79qnjz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 24px 16px 24px;
    border-bottom: 1px solid #e0e0e0;
}

.notification-icon[b-c91c79qnjz] {
    font-size: 32px;
}

.notification-success .notification-icon[b-c91c79qnjz] {
    color: #4caf50;
}

.notification-error .notification-icon[b-c91c79qnjz] {
    color: #f44336;
}

.notification-warning .notification-icon[b-c91c79qnjz] {
    color: #ffc107;
}

.notification-info .notification-icon[b-c91c79qnjz] {
    color: #2196f3;
}

.notification-header h4[b-c91c79qnjz] {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
}

.notification-success .notification-header h4[b-c91c79qnjz] {
    color: #4caf50;
}

.notification-error .notification-header h4[b-c91c79qnjz] {
    color: #f44336;
}

.notification-warning .notification-header h4[b-c91c79qnjz] {
    color: #ffc107;
}

.notification-info .notification-header h4[b-c91c79qnjz] {
    color: #2196f3;
}

.notification-body[b-c91c79qnjz] {
    padding: 20px 24px;
}

.notification-body p[b-c91c79qnjz] {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-h4);
    line-height: 1.5;
}

.notification-footer[b-c91c79qnjz] {
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
}

.btn-notification[b-c91c79qnjz] {
    padding: 8px 20px;
    font-weight: var(--font-weight-medium);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--font-size-body);
    transition: background-color 0.2s;
}

.notification-success .btn-notification[b-c91c79qnjz] {
    background-color: #1b5e20;
    color: white;
}

.notification-success .btn-notification:hover[b-c91c79qnjz] {
    background-color: #145018;
}

.notification-error .btn-notification[b-c91c79qnjz] {
    background-color: #f44336;
    color: white;
}

.notification-error .btn-notification:hover[b-c91c79qnjz] {
    background-color: #da190b;
}

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

.notification-warning .btn-notification:hover[b-c91c79qnjz] {
    background-color: #e0a800;
}

.notification-info .btn-notification[b-c91c79qnjz] {
    background-color: #2196f3;
    color: white;
}

.notification-info .btn-notification:hover[b-c91c79qnjz] {
    background-color: #0b7dda;
}

@media (max-width: 768px) {
    .notification-popup[b-c91c79qnjz] {
        min-width: 90%;
        max-width: 90%;
    }

    .notification-header[b-c91c79qnjz] {
        padding: 20px 16px 12px 16px;
    }

    .notification-body[b-c91c79qnjz] {
        padding: 16px;
    }

    .notification-footer[b-c91c79qnjz] {
        padding: 12px 16px;
    }
}
/* /Components/Shared/Order/AddShiftPanel.razor.rz.scp.css */
.add-shift-panel[b-lkjrl3fs7e] {
    background: white;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.panel-content[b-lkjrl3fs7e] {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.form-body[b-lkjrl3fs7e] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.section-header[b-lkjrl3fs7e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}

.section-title[b-lkjrl3fs7e] {
    margin: 0;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
}

.header-actions[b-lkjrl3fs7e] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.validation-message-header[b-lkjrl3fs7e] {
    font-size: var(--font-size-xs);
    color: #dc3545;
    font-weight: var(--font-weight-medium);
    max-width: 150px;
    line-height: 1.2;
    text-align: right;
}

.btn-icon[b-lkjrl3fs7e] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon .material-icons[b-lkjrl3fs7e] {
    font-size: 20px;
}

.btn-icon-success[b-lkjrl3fs7e] {
    background: #1b5e20;
    color: white;
}

.btn-icon-success:hover:not(:disabled)[b-lkjrl3fs7e] {
    background: #145018;
}

.btn-icon-success:disabled[b-lkjrl3fs7e] {
    background: #ccc;
    cursor: not-allowed;
}

.btn-icon-secondary[b-lkjrl3fs7e] {
    background: #757575;
    color: white;
}

.btn-icon-secondary:hover:not(:disabled)[b-lkjrl3fs7e] {
    background: #616161;
}

.btn-icon-secondary:disabled[b-lkjrl3fs7e] {
    opacity: 0.5;
    cursor: not-allowed;
}

.info-section[b-lkjrl3fs7e] {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.info-section:last-child[b-lkjrl3fs7e] {
    border-bottom: none;
    margin-bottom: 0;
}

.info-section h4[b-lkjrl3fs7e] {
    margin: 0 0 8px 0;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.form-group[b-lkjrl3fs7e] {
    margin-bottom: 12px;
}

.form-group label[b-lkjrl3fs7e] {
    display: block;
    margin-bottom: 4px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
}

.form-control[b-lkjrl3fs7e] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: var(--font-size-body);
    font-family: var(--font-family-base);
}

.form-control:focus[b-lkjrl3fs7e] {
    outline: none;
    border-color: #1b5e20;
    box-shadow: 0 0 0 2px rgba(27, 94, 32, 0.1);
}

.form-control:disabled[b-lkjrl3fs7e] {
    background: #f5f5f5;
    cursor: not-allowed;
}

select.form-control[b-lkjrl3fs7e] {
    cursor: pointer;
}

textarea.form-control[b-lkjrl3fs7e] {
    resize: vertical;
    min-height: 80px;
}

.form-row[b-lkjrl3fs7e] {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
}

.form-row .form-group[b-lkjrl3fs7e] {
    flex: 1;
    margin-bottom: 0;
}

/* Skill Description Styling - matches FulfillmentPanel */
.skill-description[b-lkjrl3fs7e] {
    padding: 8px 12px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #1b5e20;
    border-radius: 4px;
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 8px;
}

/* Position and Skill Dropdowns */
.position-dropdown[b-lkjrl3fs7e],
.skill-dropdown[b-lkjrl3fs7e] {
    width: 100%;
}

/* /Components/Shared/Order/EditShiftPanel.razor.rz.scp.css */
.edit-shift-panel[b-wbnk38c3bb] {
    background: transparent;
    padding: 20px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.form-body[b-wbnk38c3bb] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.section-header[b-wbnk38c3bb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
}

.section-title[b-wbnk38c3bb] {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--text-primary);
}

.header-actions[b-wbnk38c3bb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.validation-message-header[b-wbnk38c3bb] {
    font-size: var(--font-size-xs);
    color: #dc3545;
    font-weight: var(--font-weight-medium);
    max-width: 150px;
    line-height: 1.2;
    text-align: right;
}

.btn-icon[b-wbnk38c3bb] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon .material-icons[b-wbnk38c3bb] {
    font-size: 20px;
}

.btn-icon-success[b-wbnk38c3bb] {
    background: #1b5e20;
    color: white;
}

.btn-icon-success:hover:not(:disabled)[b-wbnk38c3bb] {
    background: #145018;
}

.btn-icon-success:disabled[b-wbnk38c3bb] {
    background: #ccc;
    cursor: not-allowed;
}

.btn-icon-secondary[b-wbnk38c3bb] {
    background: #757575;
    color: white;
}

.btn-icon-secondary:hover[b-wbnk38c3bb] {
    background: #616161;
}

.btn-icon-danger[b-wbnk38c3bb] {
    background: #dc3545;
    color: white;
}

.btn-icon-danger:hover[b-wbnk38c3bb] {
    background: #c82333;
}

.form-group[b-wbnk38c3bb] {
    margin-bottom: 16px;
}

.form-group label[b-wbnk38c3bb] {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    margin-bottom: 6px;
    display: block;
    color: var(--text-secondary);
}

.form-control[b-wbnk38c3bb] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: var(--font-size-body);
    font-family: var(--font-family-base);
}

.form-control:focus[b-wbnk38c3bb] {
    border-color: #1b5e20;
    outline: none;
    box-shadow: 0 0 0 2px rgba(27, 94, 32, 0.1);
}

.form-row[b-wbnk38c3bb] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.form-row .form-group[b-wbnk38c3bb] {
    flex: 1;
    margin-bottom: 0;
}


.skill-description[b-wbnk38c3bb] {
    margin-top: 8px;
    padding: 12px 16px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #1b5e20;
    border-radius: 4px;
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .form-row[b-wbnk38c3bb] {
        flex-direction: column;
    }
}
/* /Components/Shared/Order/EmployeeRequestDialog.razor.rz.scp.css */
.request-backdrop[b-z7el8m35jd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    animation: fadeIn-b-z7el8m35jd 0.2s ease-in;
}

.request-dialog[b-z7el8m35jd] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    min-width: 560px;
    max-width: 680px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: slideIn-b-z7el8m35jd 0.3s ease-out;
}

.request-header[b-z7el8m35jd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid #e0e0e0;
}

.request-icon[b-z7el8m35jd] {
    font-size: 28px;
    color: #333;
}

.request-header h4[b-z7el8m35jd] {
    margin: 0;
    flex: 1;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.close-btn[b-z7el8m35jd] {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.close-btn:hover[b-z7el8m35jd] {
    color: #333;
}

.request-body[b-z7el8m35jd] {
    padding: 16px 24px;
    overflow-y: auto;
    flex: 1;
}

.loading-state[b-z7el8m35jd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100px;
    color: var(--text-muted);
    font-size: 16px;
}

.empty-state[b-z7el8m35jd] {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
}

.employee-grid-container[b-z7el8m35jd] {
    border: 1px solid #ddd;
    border-radius: 4px;
}

.employee-table[b-z7el8m35jd] {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 0;
}

.employee-table thead th[b-z7el8m35jd] {
    padding: 8px 12px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-small);
    color: var(--text-primary);
    text-align: left;
}

.employee-table tbody tr[b-z7el8m35jd] {
    transition: background-color 0.15s;
}

.employee-table tbody tr:hover[b-z7el8m35jd] {
    background-color: #f7f7f7;
}

.employee-table td[b-z7el8m35jd] {
    padding: 8px 12px;
    border-top: 1px solid #eee;
    vertical-align: middle;
    font-size: var(--font-size-body);
}

.request-btn[b-z7el8m35jd] {
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 3px;
}

.action-btns[b-z7el8m35jd] {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.current-employee-row[b-z7el8m35jd] {
    background-color: #f0f7ff;
}

.current-employee-row:hover[b-z7el8m35jd] {
    background-color: #e3f0ff !important;
}

.request-footer[b-z7el8m35jd] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    background-color: #f8f9fa;
    border-radius: 0 0 8px 8px;
}

.request-footer .btn[b-z7el8m35jd] {
    padding: 8px 20px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    border-radius: 4px;
    transition: all 0.2s;
    cursor: pointer;
}

.request-footer .btn-outline-secondary[b-z7el8m35jd] {
    background: white;
    border: 1px solid #ced4da;
    color: #6c757d;
}

.request-footer .btn-outline-secondary:hover[b-z7el8m35jd] {
    background: #e9ecef;
}

/* Confirmation sub-dialog */
.confirm-backdrop[b-z7el8m35jd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 10000;
}

.confirm-dialog[b-z7el8m35jd] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    z-index: 10001;
    padding: 24px;
    max-width: 440px;
}

.confirm-body p[b-z7el8m35jd] {
    margin: 0 0 16px 0;
    font-size: var(--font-size-body);
    color: var(--text-primary);
    line-height: 1.5;
}

.confirm-actions[b-z7el8m35jd] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

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

@keyframes slideIn-b-z7el8m35jd {
    from {
        transform: translate(-50%, -60%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}
/* /Components/Shared/Order/FulfillmentPanel.razor.rz.scp.css */
.fulfillment-panel[b-vv8yltcmgh] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
}

.no-selection[b-vv8yltcmgh] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: var(--text-light);
    font-size: var(--font-size-body);
    font-style: italic;
    padding: 40px;
    text-align: center;
}

/* Panel Header - matches green theme */
.panel-header[b-vv8yltcmgh] {
    padding: 5px;
    background: white;
    display: flex;
        padding-bottom: 12px;
    justify-content: space-between;
    align-items: center;
}

.panel-header h3[b-vv8yltcmgh] {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
}

.shift-id[b-vv8yltcmgh] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Panel Content */
.panel-content[b-vv8yltcmgh] {
    flex: 1;
    background: white;
    padding: 5px;
}

/* Section Styling */
.section[b-vv8yltcmgh] {
    margin-bottom: 28px;
}

.section:last-child[b-vv8yltcmgh] {
    border-bottom: none;
    margin-bottom: 0;
}

.subheading-row[b-vv8yltcmgh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
    position: sticky;
    top: -16px;
    z-index: 1;
    background: #ffffff;
    padding: 12px 0;
    margin-top: -12px;
}

.subheading[b-vv8yltcmgh] {
    margin: 0;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.header-actions[b-vv8yltcmgh] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.validation-message-header[b-vv8yltcmgh] {
    font-size: var(--font-size-xs);
    color: #dc3545;
    font-weight: var(--font-weight-medium);
    max-width: 120px;
    line-height: 1.2;
    text-align: right;
}

.btn-icon[b-vv8yltcmgh] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon .material-icons[b-vv8yltcmgh] {
    font-size: 18px;
}

.btn-icon-success[b-vv8yltcmgh] {
    background: #1b5e20;
    color: white;
}

.btn-icon-success:hover:not(:disabled)[b-vv8yltcmgh] {
    background: #145018;
}

.btn-icon-success:disabled[b-vv8yltcmgh] {
    background: #ccc;
    cursor: not-allowed;
}

.btn-icon-primary[b-vv8yltcmgh] {
    background: #1976d2;
    color: white;
}

.btn-icon-primary:hover[b-vv8yltcmgh] {
    background: #1565c0;
}

.btn-icon-secondary[b-vv8yltcmgh] {
    background: #757575;
    color: white;
}

.btn-icon-secondary:hover[b-vv8yltcmgh] {
    background: #616161;
}

.btn-icon-danger[b-vv8yltcmgh] {
    background: #d32f2f;
    color: white;
}

.btn-icon-danger:hover:not(.disabled)[b-vv8yltcmgh] {
    background: #c62828;
}

.btn-icon-danger.disabled[b-vv8yltcmgh] {
    pointer-events: auto !important;
    cursor: not-allowed;
    opacity: 0.65;
}

.section label[b-vv8yltcmgh] {
    display: block;
    margin-top: 16px;
    margin-bottom: 6px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
}

.section label:first-of-type[b-vv8yltcmgh] {
    margin-top: 0;
}

.section > div:not(.edit-form):not(.employee-profile):not(.subheading)[b-vv8yltcmgh] {
    font-size: var(--font-size-body);
    color: var(--text-primary);
    line-height: 1.6;
}

/* Form Controls */
.form-group[b-vv8yltcmgh] {
    margin-bottom: 20px;
}

.form-group label[b-vv8yltcmgh] {
    display: block;
    margin-bottom: 6px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

.form-control[b-vv8yltcmgh] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: var(--font-size-body);
    font-family: var(--font-family-base);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus[b-vv8yltcmgh] {
    outline: none;
    border-color: #1b5e20;
    box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.1);
}

.form-control:disabled[b-vv8yltcmgh] {
    background: #f5f5f5;
    cursor: not-allowed;
    color: var(--text-secondary);
}

.form-control.is-invalid[b-vv8yltcmgh] {
    border-color: #d32f2f;
}

/* Edit Form Container */
.edit-form[b-vv8yltcmgh] {
    margin-top: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

/* Read-only Value Display */
.readonly-value[b-vv8yltcmgh] {
    padding: 10px 14px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: var(--font-size-body);
    color: var(--text-primary);
}

/* Character Counter */
.char-counter[b-vv8yltcmgh] {
    text-align: right;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 4px;
}

/* Validation Errors */
.validation-error[b-vv8yltcmgh] {
    color: #d32f2f;
    font-size: var(--font-size-small);
    margin-top: 6px;
    display: block;
    line-height: 1.4;
    padding: 8px 12px;
    background: #ffebee;
    border-radius: 4px;
}

.form-field-error[b-vv8yltcmgh] {
    color: #d32f2f;
    font-size: var(--font-size-small);
    margin-top: 6px;
    display: block;
}


/* Status Badge */
.status-badge[b-vv8yltcmgh] {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
}

.status-open[b-vv8yltcmgh] {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-filled[b-vv8yltcmgh] {
    background: #e3f2fd;
    color: #1565c0;
}

.status-canceled[b-vv8yltcmgh] {
    background: #ffebee;
    color: #c62828;
}

/* Employee Profile */
.employee-profile[b-vv8yltcmgh] {
    margin: 12px 0;
}

.profile-image[b-vv8yltcmgh] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e8f5e9;
}

.profile-image-placeholder[b-vv8yltcmgh] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1b5e20;
}

.profile-image-placeholder .material-icons[b-vv8yltcmgh] {
    font-size: 32px;
}

/* Skill Description */
.skill-description[b-vv8yltcmgh] {
    margin-top: 12px;
    padding: 14px 16px;
    background: #f1f8e9;
    border: 1px solid #c5e1a5;
    border-left: 4px solid #7cb342;
    border-radius: 6px;
    font-size: var(--font-size-small);
    color: #33691e;
    line-height: 1.5;
}

/* Action Buttons Section */
.action-buttons-section[b-vv8yltcmgh] {
    margin-top: 24px;
}

.action-buttons-section .btn[b-vv8yltcmgh] {
    width: 100%;
    margin-bottom: 10px;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.action-buttons-section .btn:last-child[b-vv8yltcmgh] {
    margin-bottom: 0;
}

.action-buttons-section .btn-primary[b-vv8yltcmgh] {
    background: #1976d2;
    color: white;
}

.action-buttons-section .btn-primary:hover[b-vv8yltcmgh] {
    background: #1565c0;
}

.action-buttons-section .btn-success[b-vv8yltcmgh] {
    background: #1b5e20;
    color: white;
}

.action-buttons-section .btn-success:hover:not(:disabled)[b-vv8yltcmgh] {
    background: #145018;
}

.action-buttons-section .btn-success:disabled[b-vv8yltcmgh] {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.action-buttons-section .btn-danger[b-vv8yltcmgh] {
    background: #d32f2f;
    color: white;
}

.action-buttons-section .btn-danger:hover:not(.disabled)[b-vv8yltcmgh] {
    background: #c62828;
}

/* Override pointer-events to allow clicks on disabled cancel shift button */
.action-buttons-section .btn-danger.disabled[b-vv8yltcmgh] {
    pointer-events: auto !important;
    cursor: not-allowed;
    opacity: 0.65;
    background: #d32f2f;
}

.action-buttons-section .btn-danger.disabled:hover[b-vv8yltcmgh] {
    background: #d32f2f;
}

.action-buttons-section .btn-secondary[b-vv8yltcmgh] {
    background: #757575;
    color: white;
}

.action-buttons-section .btn-secondary:hover[b-vv8yltcmgh] {
    background: #616161;
}

/* Info Section (Legacy Support) */
.info-section[b-vv8yltcmgh] {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.info-section:last-child[b-vv8yltcmgh] {
    border-bottom: none;
}

.info-section h4[b-vv8yltcmgh] {
    margin: 0 0 16px 0;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: #1b5e20;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-row[b-vv8yltcmgh] {
    display: flex;
    margin-bottom: 10px;
    font-size: var(--font-size-body);
}

.info-row .label[b-vv8yltcmgh] {
    min-width: 130px;
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
}

.info-row .value[b-vv8yltcmgh] {
    color: var(--text-primary);
}

/* Approved Badge */
.approved-badge[b-vv8yltcmgh] {
    margin-top: 16px;
    padding: 14px 16px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 6px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Form Actions */
.form-actions[b-vv8yltcmgh] {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.btn-edit[b-vv8yltcmgh] {
    width: 100%;
    margin-top: 12px;
    padding: 12px 20px;
    background: #1976d2;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.btn-edit:hover[b-vv8yltcmgh] {
    background: #1565c0;
}

.btn-save[b-vv8yltcmgh] {
    padding: 10px 20px;
    background: #1b5e20;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
}

.btn-save:hover[b-vv8yltcmgh] {
    background: #145018;
}

.btn-cancel[b-vv8yltcmgh] {
    padding: 10px 20px;
    background: #757575;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-body);
}

.btn-cancel:hover[b-vv8yltcmgh] {
    background: #616161;
}

.btn-danger[b-vv8yltcmgh] {
    padding: 10px 20px;
    background: #d32f2f;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
}

.btn-danger:hover[b-vv8yltcmgh] {
    background: #c62828;
}

/* Position and Skill Dropdowns */
.position-dropdown[b-vv8yltcmgh],
.skill-dropdown[b-vv8yltcmgh] {
    width: 100%;
}

/* Action Buttons Group (Legacy Support) */
.action-buttons-group[b-vv8yltcmgh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-buttons-group .btn[b-vv8yltcmgh] {
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.action-buttons-group .btn-primary[b-vv8yltcmgh] {
    background: #1976d2;
    color: white;
}

.action-buttons-group .btn-primary:hover[b-vv8yltcmgh] {
    background: #1565c0;
}

.action-buttons-group .btn-success[b-vv8yltcmgh] {
    background: #1b5e20;
    color: white;
}

.action-buttons-group .btn-success:hover:not(:disabled)[b-vv8yltcmgh] {
    background: #145018;
}

.action-buttons-group .btn-success:disabled[b-vv8yltcmgh] {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.action-buttons-group .btn-danger[b-vv8yltcmgh] {
    background: #d32f2f;
    color: white;
}

.action-buttons-group .btn-danger:hover[b-vv8yltcmgh] {
    background: #c62828;
}

.action-buttons-group .btn-danger.disabled[b-vv8yltcmgh] {
    pointer-events: auto !important;
    cursor: not-allowed;
    opacity: 0.65;
    background: #d32f2f;
}

.action-buttons-group .btn-danger.disabled:hover[b-vv8yltcmgh] {
    background: #d32f2f;
}

.action-buttons-group .btn-secondary[b-vv8yltcmgh] {
    background: #757575;
    color: white;
}

.action-buttons-group .btn-secondary:hover[b-vv8yltcmgh] {
    background: #616161;
}

/* Approve Time Section (Legacy Support) */
.approve-time-section[b-vv8yltcmgh] {
    margin-bottom: 24px;
    padding: 20px;
    background: #f1f8e9;
    border: 1px solid #c5e1a5;
    border-radius: 8px;
}

.approve-time-section h4[b-vv8yltcmgh] {
    margin: 0 0 16px 0;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: #33691e;
    text-transform: uppercase;
}

/* Shift Actions Section (Legacy Support) */
.shift-actions-section[b-vv8yltcmgh] {
    margin-top: 24px;
    padding: 20px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.shift-actions-section h4[b-vv8yltcmgh] {
    margin: 0 0 16px 0;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
}
/* /Components/Shared/Order/OrderGrid.razor.rz.scp.css */
.order-grid-container[b-obrln47g36] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 16px;
}

.loading-indicator[b-obrln47g36] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    font-size: var(--font-size-h4);
    color: var(--text-secondary);
}

.error-container[b-obrln47g36] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
    gap: 16px;
}

.error-message[b-obrln47g36] {
    color: #d32f2f;
    font-size: var(--font-size-body);
    margin: 0;
}

.btn-retry[b-obrln47g36] {
    padding: 10px 24px;
    background: #1b5e20;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.btn-retry:hover[b-obrln47g36] {
    background: #2e7d32;
}

.grid-content[b-obrln47g36] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Table wrapper for scrolling */
.grid-content[b-obrln47g36] {
    overflow-x: auto;
    overflow-y: auto;
}

.orders-table[b-obrln47g36] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.orders-table thead[b-obrln47g36] {
    position: sticky;
    top: 0;
    z-index: 10;
}

.orders-table thead th[b-obrln47g36] {
    background: white;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e0e0e0;
    padding: 14px 16px;
    text-align: left;
    white-space: nowrap;
}

.orders-table tbody tr[b-obrln47g36] {
    transition: all 0.15s ease;
    background-color: white;
}

.orders-table tbody tr:hover[b-obrln47g36] {
    background-color: #f1f8f1;
}

.orders-table tbody td[b-obrln47g36] {
    padding: 16px;
    font-size: var(--font-size-body);
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Column-specific widths - compact like OrderItemSummaryGrid */
.orders-table th:nth-child(1)[b-obrln47g36],
.orders-table td:nth-child(1)[b-obrln47g36] {
    width: 100px;
}

.orders-table th:nth-child(2)[b-obrln47g36],
.orders-table td:nth-child(2)[b-obrln47g36] {
    width: 100px;
}

.orders-table th:nth-child(3)[b-obrln47g36],
.orders-table td:nth-child(3)[b-obrln47g36] {
    width: 200px;
}

.orders-table th:nth-child(4)[b-obrln47g36],
.orders-table td:nth-child(4)[b-obrln47g36] {
    width: 120px;
}

.orders-table th:nth-child(5)[b-obrln47g36],
.orders-table td:nth-child(5)[b-obrln47g36] {
    width: 80px;
}

.no-results[b-obrln47g36] {
    text-align: center;
    padding: 60px 20px !important;
    color: var(--text-secondary);
    font-size: var(--font-size-body);
    font-style: italic;
}

/* Status Badge - modern pill design (matches OrderItemSummaryGrid) */
.status-badge[b-obrln47g36] {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
    letter-spacing: 0.3px;
}

.status-open[b-obrln47g36] {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-filled[b-obrln47g36] {
    background: #e3f2fd;
    color: #1565c0;
}

.status-canceled[b-obrln47g36], .status-cancelled[b-obrln47g36] {
    background: #ffebee;
    color: #c62828;
}

.status-void[b-obrln47g36] {
    background: #f5f5f5;
    color: #757575;
}

.status-closed[b-obrln47g36] {
    background: #f3e5f5;
    color: #7b1fa2;
}

/* View button */
.btn-view[b-obrln47g36] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #1b5e20;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.btn-view:hover[b-obrln47g36] {
    background: #2e7d32;
}

.pagination-footer[b-obrln47g36] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-top: 2px solid #e0e0e0;
    background: white;
    flex-shrink: 0;
}

.pagination-info[b-obrln47g36] {
    font-size: var(--font-size-body);
    color: var(--text-secondary);
}

.pagination-controls[b-obrln47g36] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-controls label[b-obrln47g36] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    margin-right: 16px;
}

.pagination-controls select[b-obrln47g36] {
    padding: 6px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: var(--font-size-body);
    font-family: var(--font-family-base);
    background: white;
    transition: all 0.2s ease;
}

.pagination-controls select:focus[b-obrln47g36] {
    outline: none;
    border-color: #1b5e20;
    box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.1);
}

.btn-page[b-obrln47g36] {
    padding: 8px 14px;
    background: white;
    color: #1b5e20;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.btn-page:hover:not(:disabled)[b-obrln47g36] {
    background: #f1f8f1;
    border-color: #1b5e20;
}

.btn-page:disabled[b-obrln47g36] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f5f5f5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .order-grid-container[b-obrln47g36] {
        border-radius: 8px;
    }

    .orders-table thead th[b-obrln47g36],
    .orders-table tbody td[b-obrln47g36] {
        padding: 10px 12px;
    }

    .pagination-footer[b-obrln47g36] {
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px;
    }

    .pagination-controls[b-obrln47g36] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination-controls label[b-obrln47g36] {
        margin-right: 0;
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Shared/Order/OrderHeaderCard.razor.rz.scp.css */
/* Order Header Card - White background with rounded corners */
.order-header-card[b-9m6pok3qpp] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 16px 24px;
}

.order-header-content[b-9m6pok3qpp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* Order Info Row - Left side */
.order-info-row[b-9m6pok3qpp] {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.order-number[b-9m6pok3qpp] {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.order-status[b-9m6pok3qpp],
.order-date[b-9m6pok3qpp] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-body);
}

.status-label[b-9m6pok3qpp],
.date-label[b-9m6pok3qpp] {
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

.status-value[b-9m6pok3qpp],
.date-value[b-9m6pok3qpp] {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

/* Action Buttons - Right side */
.order-actions[b-9m6pok3qpp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-action[b-9m6pok3qpp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.btn-action i[b-9m6pok3qpp] {
    font-size: 18px;
}

.btn-add[b-9m6pok3qpp] {
    background: #1b5e20;
    color: white;
}

.btn-add:hover[b-9m6pok3qpp] {
    background: #145018;
}

.btn-clone[b-9m6pok3qpp] {
    background: #1976d2;
    color: white;
}

.btn-clone:hover[b-9m6pok3qpp] {
    background: #1565c0;
}

.btn-cancel[b-9m6pok3qpp] {
    background: #d32f2f;
    color: white;
}

.btn-cancel:hover[b-9m6pok3qpp] {
    background: #c62828;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .order-header-content[b-9m6pok3qpp] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .order-actions[b-9m6pok3qpp] {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .order-header-card[b-9m6pok3qpp] {
        padding: 12px 16px;
        border-radius: 8px;
    }

    .order-info-row[b-9m6pok3qpp] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .order-actions[b-9m6pok3qpp] {
        flex-wrap: wrap;
    }

    .btn-action[b-9m6pok3qpp] {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }

    .btn-action span[b-9m6pok3qpp] {
        display: none;
    }

    .btn-action i[b-9m6pok3qpp] {
        margin: 0;
    }
}
/* /Components/Shared/Order/OrderItemSummaryGrid.razor.rz.scp.css */
.summary-grid-container[b-c42bwr0995] {
    height: 100%;
    overflow: auto;
    background: white;
}

.loading[b-c42bwr0995], .error[b-c42bwr0995] {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-size-body);
}

.loading[b-c42bwr0995] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.error[b-c42bwr0995] {
    color: #d32f2f;
}

/* Modern Table Design */
.summary-table[b-c42bwr0995] {
    width: 100%;
    border-collapse: collapse;
}

.summary-table thead[b-c42bwr0995] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.summary-table th[b-c42bwr0995] {
    padding: 14px 16px;
    text-align: left;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    white-space: nowrap;
}

.summary-table td[b-c42bwr0995] {
    padding: 16px;
    font-size: var(--font-size-body);
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Column-specific widths to prevent text cutting */
.summary-table td:nth-child(1)[b-c42bwr0995] {
    min-width: 100px;
}

.summary-table td:nth-child(2)[b-c42bwr0995] {
    min-width: 120px;
    max-width: 180px;
}

.summary-table td:nth-child(4)[b-c42bwr0995] {
    min-width: 120px;
    max-width: 180px;
}

.summary-table td:nth-child(5)[b-c42bwr0995] {
    min-width: 100px;
}

.summary-table tbody tr[b-c42bwr0995] {
    cursor: pointer;
    transition: all 0.15s ease;
}

.summary-table tbody tr:hover[b-c42bwr0995] {
    background: #f1f8f1;
}

.summary-table tbody tr.selected[b-c42bwr0995] {
    background: #e8f5e9;
    border-left: 4px solid #1b5e20;
}

.summary-table tbody tr.selected td:first-child[b-c42bwr0995] {
    padding-left: 12px;
}

.summary-table tbody tr.selected:hover[b-c42bwr0995] {
    background: #c8e6c9;
}

/* New Shift Row */
.new-shift-row[b-c42bwr0995] {
    background: #fff8e1 !important;
    cursor: default !important;
}

.new-shift-row:hover[b-c42bwr0995] {
    background: #fff8e1 !important;
}

.new-shift-message[b-c42bwr0995] {
    text-align: center;
    color: #f57c00;
    font-style: italic;
    padding: 20px !important;
}

.no-results[b-c42bwr0995] {
    text-align: center;
    padding: 40px !important;
    color: var(--text-light);
    font-size: var(--font-size-body);
    font-style: italic;
}

/* Shift Time Cell - prevent cutting */
.shift-time-cell[b-c42bwr0995] {
    min-width: 150px !important;
    max-width: 200px !important;
}

/* Shift Times - cleaner format */
.shift-times[b-c42bwr0995] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}

/* Status Badge - modern pill design */
.status-badge[b-c42bwr0995] {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
    letter-spacing: 0.3px;
}

.status-open[b-c42bwr0995] {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-filled[b-c42bwr0995] {
    background: #e3f2fd;
    color: #1565c0;
}

.status-canceled[b-c42bwr0995] {
    background: #ffebee;
    color: #c62828;
}

.status-void[b-c42bwr0995] {
    background: #f5f5f5;
    color: #757575;
}

/* Icon column styles - matches old portal */
.icon-column[b-c42bwr0995] {
    text-align: center;
    width: 50px;
}

.icon-column .material-icons[b-c42bwr0995] {
    font-size: 22px;
}

/* Approved - green check */
.check-icon[b-c42bwr0995] {
    color: #388E3C;
}

/* Timesheet approval pending - red clock */
.timer-icon[b-c42bwr0995] {
    color: #F44336;
}

/* Billed - green money icon */
.money-icon[b-c42bwr0995] {
    color: #388E3C;
}

/* Void - red X */
.x-icon[b-c42bwr0995] {
    color: #F44336;
}

/* Row chevron indicator */
.row-indicator[b-c42bwr0995] {
    color: #bbb;
    transition: color 0.2s ease;
}

.summary-table tbody tr:hover .row-indicator[b-c42bwr0995],
.summary-table tbody tr.selected .row-indicator[b-c42bwr0995] {
    color: #1b5e20;
}
/* /Components/Shared/Order/OrderPanel.razor.rz.scp.css */
/* Order Panel - Left column with shifts grid */
.order-panel[b-a9g937w5qk] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    padding: 16px;
}

.shifts-grid[b-a9g937w5qk] {
    flex: 1;
    overflow: hidden;
}
/* /Components/Shared/Order/PendingOrderPanel.razor.rz.scp.css */
.pending-order-panel[b-md061zw0mh] {
    background: transparent;
    padding: 20px;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header[b-md061zw0mh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 2px solid #e0e0e0;
    flex-shrink: 0;
}

.section-title[b-md061zw0mh] {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--text-primary);
}

.header-actions[b-md061zw0mh] {
    display: flex;
    gap: 10px;
}

.header-actions .btn-success[b-md061zw0mh] {
    background-color: #1b5e20;
    border-color: #1b5e20;
    color: white;
    padding: 8px 20px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
}

.header-actions .btn-success:hover:not(:disabled)[b-md061zw0mh] {
    background-color: #145018;
    border-color: #145018;
}

.header-actions .btn-success:disabled[b-md061zw0mh] {
    background-color: #ccc;
    border-color: #ccc;
    cursor: not-allowed;
}

.empty-state[b-md061zw0mh] {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-light);
}

.empty-state p[b-md061zw0mh] {
    font-size: var(--font-size-h4);
}

.shifts-grid[b-md061zw0mh] {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    background: white;
}

.table[b-md061zw0mh] {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

.table thead[b-md061zw0mh] {
    position: sticky;
    top: 0;
    z-index: 10;
}

.table thead th[b-md061zw0mh] {
    background: white;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e0e0e0;
    padding: 14px 16px;
    text-align: left;
    white-space: nowrap;
}

/* Override Bootstrap table default backgrounds */
.pending-order-panel .table > :not(caption) > * > *[b-md061zw0mh] {
    background-color: transparent;
}

.table tbody tr[b-md061zw0mh] {
    cursor: pointer;
    transition: all 0.15s ease;
    background-color: white;
}

.table tbody tr:hover[b-md061zw0mh] {
    background-color: #f1f8f1 !important;
}

.table tbody tr.selected[b-md061zw0mh] {
    background-color: #e8f5e9 !important;
    border-left: 4px solid #1b5e20;
}

.table tbody tr.selected td:first-child[b-md061zw0mh] {
    padding-left: 12px;
}

.table tbody tr.selected:hover[b-md061zw0mh] {
    background-color: #c8e6c9 !important;
}

.table tbody td[b-md061zw0mh] {
    padding: 16px;
    font-size: var(--font-size-body);
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Column-specific widths to prevent text cutting */
.table td:nth-child(1)[b-md061zw0mh] {
    min-width: 100px;
}

.table td:nth-child(2)[b-md061zw0mh],
.table td:nth-child(3)[b-md061zw0mh] {
    min-width: 100px;
}

.table td:nth-child(4)[b-md061zw0mh] {
    min-width: 120px;
    max-width: 180px;
}

.table td:nth-child(5)[b-md061zw0mh],
.table td:nth-child(6)[b-md061zw0mh] {
    min-width: 120px;
    max-width: 200px;
}

/* Modern Order Loader Overlay */
.order-loader-overlay[b-md061zw0mh] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeInOverlay-b-md061zw0mh 0.3s ease-out;
}

@keyframes fadeInOverlay-b-md061zw0mh {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.order-loader-content[b-md061zw0mh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 48px;
    max-width: 450px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    text-align: center;
    animation: slideUpContent-b-md061zw0mh 0.4s ease-out;
}

@keyframes slideUpContent-b-md061zw0mh {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loader Icon Container */
.loader-icon[b-md061zw0mh] {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Spinning Circle Loader */
.loader-spinner[b-md061zw0mh] {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 5px solid #e8f5e9;
    border-top: 5px solid #1b5e20;
    border-right: 5px solid #2e7d32;
    border-radius: 50%;
    animation: spinLoader-b-md061zw0mh 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes spinLoader-b-md061zw0mh {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Check Icon (hidden initially, can be shown on success) */
.loader-check[b-md061zw0mh] {
    font-size: 48px;
    color: #1b5e20;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

/* Loader Text */
.loader-title[b-md061zw0mh] {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: #1b5e20;
    margin: 0;
    letter-spacing: -0.3px;
}

.loader-message[b-md061zw0mh] {
    font-size: var(--font-size-body);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Progress Bar */
.loader-progress[b-md061zw0mh] {
    width: 100%;
    max-width: 280px;
    height: 5px;
    background: #e8f5e9;
    border-radius: 3px;
    overflow: hidden;
}

.loader-progress-bar[b-md061zw0mh] {
    height: 100%;
    background: linear-gradient(90deg, #1b5e20 0%, #2e7d32 50%, #43a047 100%);
    background-size: 200% 100%;
    border-radius: 3px;
    animation: progressSlide-b-md061zw0mh 1.5s ease-in-out infinite;
}

@keyframes progressSlide-b-md061zw0mh {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .panel-header[b-md061zw0mh] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .header-actions[b-md061zw0mh] {
        width: 100%;
        flex-direction: column;
    }

    .header-actions .btn[b-md061zw0mh] {
        width: 100%;
    }

    .shifts-grid[b-md061zw0mh] {
        max-height: 400px;
    }

    .table[b-md061zw0mh] {
        font-size: var(--font-size-body);
    }

    .table thead th[b-md061zw0mh],
    .table tbody td[b-md061zw0mh] {
        padding: 8px;
    }

    .order-loader-content[b-md061zw0mh] {
        padding: 32px 28px;
        gap: 16px;
        max-width: 90%;
    }

    .loader-icon[b-md061zw0mh] {
        width: 70px;
        height: 70px;
    }

    .loader-check[b-md061zw0mh] {
        font-size: 40px;
    }

    .loader-title[b-md061zw0mh] {
        font-size: var(--font-size-h4);
    }

    .loader-message[b-md061zw0mh] {
        font-size: var(--font-size-small);
    }

    .loader-progress[b-md061zw0mh] {
        max-width: 240px;
    }
}
/* /Components/Shared/Order/PlaceOrderConfirmDialog.razor.rz.scp.css */
.place-order-backdrop[b-eyjtjc8sw3] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    animation: fadeIn-b-eyjtjc8sw3 0.2s ease-in;
}

.place-order-dialog[b-eyjtjc8sw3] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    min-width: 450px;
    max-width: 550px;
    animation: slideIn-b-eyjtjc8sw3 0.3s ease-out;
}

.place-order-header[b-eyjtjc8sw3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    border-radius: 12px 12px 0 0;
}

.place-order-icon[b-eyjtjc8sw3] {
    font-size: 32px;
    color: white;
}

.place-order-header h4[b-eyjtjc8sw3] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
}

.place-order-body[b-eyjtjc8sw3] {
    padding: 24px;
    min-height: 100px;
}

.loading-state[b-eyjtjc8sw3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px;
}

.loading-state .spinner[b-eyjtjc8sw3] {
    width: 40px;
    height: 40px;
    border: 3px solid #e0e0e0;
    border-top-color: #1b5e20;
    border-radius: 50%;
    animation: spin-b-eyjtjc8sw3 0.8s linear infinite;
}

.loading-state p[b-eyjtjc8sw3] {
    margin: 0;
    color: #666;
    font-size: 0.95rem;
}

.error-state[b-eyjtjc8sw3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: #ffebee;
    border-radius: 8px;
    color: #c62828;
}

.error-state .material-icons[b-eyjtjc8sw3] {
    font-size: 24px;
}

.error-state p[b-eyjtjc8sw3] {
    margin: 0;
    font-size: 0.95rem;
}

.confirm-message[b-eyjtjc8sw3] {
    margin: 0;
    color: #333;
    font-size: 1.05rem;
    line-height: 1.6;
}

.customer-name[b-eyjtjc8sw3] {
    margin: 8px 0 16px 0;
    font-size: 1.15rem;
    color: #1b5e20;
    text-align: center;
}

.customer-name strong[b-eyjtjc8sw3] {
    font-weight: 600;
}

.warning-note[b-eyjtjc8sw3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background-color: #fff8e1;
    border: 1px solid #ffcc02;
    border-radius: 8px;
    margin-top: 16px;
}

.warning-note .material-icons[b-eyjtjc8sw3] {
    font-size: 24px;
    color: #f57c00;
    flex-shrink: 0;
    margin-top: 2px;
}

.warning-content[b-eyjtjc8sw3] {
    color: #5d4037;
    font-size: 0.9rem;
    line-height: 1.5;
}

.warning-content strong[b-eyjtjc8sw3] {
    color: #e65100;
}

.place-order-footer[b-eyjtjc8sw3] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    background-color: #f8f9fa;
    border-radius: 0 0 12px 12px;
}

.place-order-footer .btn[b-eyjtjc8sw3] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.place-order-footer .btn .material-icons[b-eyjtjc8sw3] {
    font-size: 18px;
}

.place-order-footer .btn-outline-secondary[b-eyjtjc8sw3] {
    background: white;
    border: 1px solid #ced4da;
    color: #6c757d;
}

.place-order-footer .btn-outline-secondary:hover:not(:disabled)[b-eyjtjc8sw3] {
    background: #e9ecef;
}

.place-order-footer .btn-success[b-eyjtjc8sw3] {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    color: white;
}

.place-order-footer .btn-success:hover:not(:disabled)[b-eyjtjc8sw3] {
    background: linear-gradient(135deg, #145018 0%, #256d28 100%);
    box-shadow: 0 2px 8px rgba(27, 94, 32, 0.3);
}

.place-order-footer .btn:disabled[b-eyjtjc8sw3] {
    opacity: 0.6;
    cursor: not-allowed;
}

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

@keyframes slideIn-b-eyjtjc8sw3 {
    from {
        transform: translate(-50%, -60%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

@keyframes spin-b-eyjtjc8sw3 {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Shared/Order/ShiftSpanEditor.razor.rz.scp.css */
.shift-span-editor[b-16thdjnhmd] {
    background: transparent;
    padding: 20px;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.form-body[b-16thdjnhmd] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.section-header[b-16thdjnhmd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
}

.header-actions[b-16thdjnhmd] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.validation-message-header[b-16thdjnhmd] {
    font-size: var(--font-size-xs);
    color: #dc3545;
    font-weight: var(--font-weight-medium);
    max-width: 150px;
    line-height: 1.2;
    text-align: right;
}

.btn-icon[b-16thdjnhmd] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon .material-icons[b-16thdjnhmd] {
    font-size: 20px;
}

.btn-icon-success[b-16thdjnhmd] {
    background: #1b5e20;
    color: white;
}

.btn-icon-success:hover:not(:disabled)[b-16thdjnhmd] {
    background: #145018;
}

.btn-icon-success:disabled[b-16thdjnhmd] {
    background: #ccc;
    cursor: not-allowed;
}

.section-title[b-16thdjnhmd] {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--text-primary);
}


.form-group[b-16thdjnhmd] {
    margin-bottom: 16px;
}

.form-group label[b-16thdjnhmd] {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body);
    margin-bottom: 6px;
    display: block;
    color: var(--text-secondary);
}

.form-control[b-16thdjnhmd] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: var(--font-size-body);
    font-family: var(--font-family-base);
}

.form-control:focus[b-16thdjnhmd] {
    border-color: #1b5e20;
    outline: none;
    box-shadow: 0 0 0 2px rgba(27, 94, 32, 0.1);
}

.form-row[b-16thdjnhmd] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.form-row .form-group[b-16thdjnhmd] {
    flex: 1;
    margin-bottom: 0;
}

.days-selection[b-16thdjnhmd] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.days-selection .btn[b-16thdjnhmd] {
    min-width: 50px;
}

.is-invalid-border[b-16thdjnhmd] {
    border: 1px solid #dc3545;
    border-radius: 4px;
    padding: 4px;
}

.selected-dates[b-16thdjnhmd] {
    margin-top: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 4px;
}

.date-list[b-16thdjnhmd] {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
}

.date-list li[b-16thdjnhmd] {
    padding: 6px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
}

.date-list li:last-child[b-16thdjnhmd] {
    border-bottom: none;
}

.actions[b-16thdjnhmd] {
    margin-top: 24px;
}

.actions .btn-success[b-16thdjnhmd] {
    background-color: #1b5e20;
    border-color: #1b5e20;
    color: white;
    padding: 12px;
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-medium);
}

.actions .btn-success:hover:not(:disabled)[b-16thdjnhmd] {
    background-color: #145018;
    border-color: #145018;
}

.actions .btn-success:disabled[b-16thdjnhmd] {
    background-color: #ccc;
    border-color: #ccc;
    cursor: not-allowed;
}

.skill-description[b-16thdjnhmd] {
    margin-top: 8px;
    padding: 12px 16px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #1b5e20;
    border-radius: 4px;
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .form-row[b-16thdjnhmd] {
        flex-direction: column;
    }

    .days-selection[b-16thdjnhmd] {
        justify-content: center;
    }
}
/* /Components/Shared/PageLoadingSpinner.razor.rz.scp.css */
/* Page Loading Spinner - Matches old portal */

.page-loading-spinner[b-6lcw1e5rmg] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
}

.loading-text[b-6lcw1e5rmg] {
    margin-top: 16px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #666;
}
/* /Components/Shared/ReviewDialog.razor.rz.scp.css */
.modal-backdrop[b-4p5upz9vs4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

.review-dialog-modal[b-4p5upz9vs4] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 1050;
    min-width: 500px;
    max-width: 600px;
}

.dialog-header[b-4p5upz9vs4] {
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
}

.dialog-header h4[b-4p5upz9vs4] {
    margin: 0;
    font-size: var(--font-size-h3);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

.dialog-body[b-4p5upz9vs4] {
    padding: 24px;
}

.employee-details[b-4p5upz9vs4] {
    background: #f9f9f9;
    padding: 16px;
    border-radius: 4px;
    margin-bottom: 24px;
}

.detail-row[b-4p5upz9vs4] {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.detail-row:last-child[b-4p5upz9vs4] {
    margin-bottom: 0;
}

.detail-row strong[b-4p5upz9vs4] {
    color: var(--text-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    min-width: 80px;
}

.detail-row span[b-4p5upz9vs4] {
    color: var(--text-secondary);
    font-size: var(--font-size-body);
}

.rating-section[b-4p5upz9vs4] {
    margin-bottom: 24px;
}

.rating-section label[b-4p5upz9vs4] {
    display: block;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 12px;
}

.required[b-4p5upz9vs4] {
    color: #d32f2f;
}

.star-rating[b-4p5upz9vs4] {
    display: flex;
    gap: 8px;
}

.star-button[b-4p5upz9vs4] {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    transition: transform 0.2s;
}

.star-button:hover[b-4p5upz9vs4] {
    transform: scale(1.2);
}

.star-button i.material-icons[b-4p5upz9vs4] {
    font-size: 36px;
    color: #ddd;
}

.star-button.selected i.material-icons[b-4p5upz9vs4] {
    color: #ffa000;
}

.star-button:hover i.material-icons[b-4p5upz9vs4] {
    color: #ffb300;
}

.comments-section label[b-4p5upz9vs4] {
    display: block;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 8px;
}

.helper-text[b-4p5upz9vs4] {
    font-size: var(--font-size-body);
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.comments-section textarea[b-4p5upz9vs4] {
    width: 100%;
    resize: vertical;
}

.dialog-footer[b-4p5upz9vs4] {
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.dialog-footer .btn[b-4p5upz9vs4] {
    min-width: 100px;
}

@media (max-width: 768px) {
    .review-dialog-modal[b-4p5upz9vs4] {
        min-width: 90%;
        max-width: 90%;
    }

    .star-button i.material-icons[b-4p5upz9vs4] {
        font-size: 28px;
    }
}
/* /Components/Shared/Spinner.razor.rz.scp.css */
/* Spinner Component CSS - Matches old portal Material Design spinner */

.spinner[b-w7xkg0pxki] {
    display: inline-block;
    position: relative;
    width: 28px;
    height: 28px;
    animation: rotate-b-w7xkg0pxki 1568ms linear infinite;
}

.circle[b-w7xkg0pxki] {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-radius: 50%;
    border-top-color: #4285f4;
    animation: fill-unfill-rotate-b-w7xkg0pxki 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.circle.left[b-w7xkg0pxki] {
    border-right-color: #4285f4;
    animation: left-spin-b-w7xkg0pxki 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.circle.right[b-w7xkg0pxki] {
    border-left-color: #4285f4;
    left: -100%;
    animation: right-spin-b-w7xkg0pxki 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.circle.gap[b-w7xkg0pxki] {
    left: 45%;
    width: 10%;
    border-top-color: white;
    border-bottom-color: white;
}

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

@keyframes fill-unfill-rotate-b-w7xkg0pxki {
    12.5% {
        transform: rotate(135deg);
    }

    25% {
        transform: rotate(270deg);
    }

    37.5% {
        transform: rotate(405deg);
    }

    50% {
        transform: rotate(540deg);
    }

    62.5% {
        transform: rotate(675deg);
    }

    75% {
        transform: rotate(810deg);
    }

    87.5% {
        transform: rotate(945deg);
    }

    to {
        transform: rotate(1080deg);
    }
}

@keyframes left-spin-b-w7xkg0pxki {
    from {
        transform: rotate(130deg);
    }

    50% {
        transform: rotate(-5deg);
    }

    to {
        transform: rotate(130deg);
    }
}

@keyframes right-spin-b-w7xkg0pxki {
    from {
        transform: rotate(-130deg);
    }

    50% {
        transform: rotate(5deg);
    }

    to {
        transform: rotate(-130deg);
    }
}