/* ============================================================================
   Global Component Styles - Shared across components
   These classes are used on MudBlazor components and need to be global
   Blazor CSS isolation doesn't work well with MudBlazor components
   ============================================================================ */

/* ============================================================================
   0. CLICKABLE ROW CURSOR
   ============================================================================ */
.clickable-row {
    cursor: pointer !important;
}

    .clickable-row:hover {
        background-color: rgba(0, 0, 0, 0.02) !important;
    }

/* ============================================================================
   1. STAT CARDS / METRICS (Unified - Used in SubscriptionMetrics & CustomerMetrics)
   ============================================================================ */
.ls-stat-card {
    border: var(--border-width) solid var(--border-color);
    padding: 0.625rem;
}

.ls-stat-content {
    flex: 1;
}

.ls-stat-label {
    font-size: var(--text-xs);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.125rem;
}

.ls-stat-value-container {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.ls-stat-value-large {
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
    color: var(--gray-900);
}

.ls-stat-value-small {
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.ls-stat-icon-container {
    padding: 0.375rem;
    border-radius: var(--border-radius);
    flex-shrink: 0;
}

.ls-stat-icon-container-blue {
    background-color: var(--blue-100);
}

.ls-stat-icon-container-amber {
    background-color: var(--amber-100);
}

.ls-stat-icon-container-purple {
    background-color: var(--purple-100);
}

.ls-stat-icon-container-green {
    background-color: var(--green-100);
}

.ls-stat-icon-container-red {
    background-color: var(--red-100);
}

.ls-stat-icon-container-orange {
    background-color: var(--orange-100);
}

.ls-stat-icon {
    width: 1rem;
    height: 1rem;
}

.ls-stat-icon-blue {
    color: var(--blue-600);
}

.ls-stat-icon-amber {
    color: var(--amber-600);
}

.ls-stat-icon-purple {
    color: var(--purple-600);
}

.ls-stat-icon-green {
    color: var(--green-600);
}

.ls-stat-icon-red {
    color: var(--red-600);
}

.ls-stat-icon-orange {
    color: var(--orange-600);
}

/* ============================================================================
   2. STATUS CHIPS (Global - Used across multiple components)
   ============================================================================ */
.ls-status-chip-active {
    background-color: var(--green-600) !important;
}

.ls-status-chip-paused {
    background-color: var(--amber-600) !important;
}

.ls-status-chip-inactive {
    background-color: var(--gray-500) !important;
}

/* ============================================================================
   3. PAGE FILTER BARS (Unified - Used in Subscriptions & Customers pages)
   ============================================================================ */

.ls-filter-bar {
    padding-right: var(--spacing-md);
    border-bottom: var(--border-width) solid var(--border-color);
}

.ls-filter-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.ls-filter-spacer {
    flex: 1;
}

.ls-filter-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Bulk Actions Bar */
.ls-subscriptions-bulk-actions {
    background-color: var(--bulk-actions-bg);
    border-bottom: var(--border-width) solid var(--bulk-actions-border);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ls-subscriptions-bulk-text {
    font-size: var(--text-sm);
    color: var(--bulk-actions-text);
}

.ls-subscriptions-bulk-buttons {
    display: flex;
    gap: var(--spacing-sm);
}

/* DataGrid & Toolbar (Unified) */
.ls-datagrid {
    cursor: pointer;
}

.ls-toolbar-title {
    margin: var(--spacing-sm);
}

/* Subscription Grid Columns */
.ls-subscription-customer-cell {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.ls-subscription-customer-name {
    font-weight: var(--font-weight-medium);
    font-size: var(--text-sm);
}

.ls-subscription-customer-date {
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.ls-subscription-status-chip-container {
    margin-top: -0.3rem;
}

.ls-subscription-contact-cell {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.ls-subscription-contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--text-sm);
}

.ls-subscription-contact-item-start {
    display: flex;
    align-items: start;
    gap: var(--spacing-xs);
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.ls-subscription-contact-icon {
    font-size: 12px;
    flex-shrink: 0;
}

.ls-subscription-contact-icon-start {
    font-size: 12px;
    margin-top: 2px;
    flex-shrink: 0;
}

.ls-subscription-contact-text {
    font-size: var(--text-sm);
}

.ls-subscription-contact-text-small {
    font-size: var(--text-xs);
    color: var(--gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}

/* Product Column */
.ls-subscription-product-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ls-subscription-product-icon-large {
    font-size: 1rem;
}

.ls-subscription-product-name-medium {
    font-weight: var(--font-weight-medium);
}

/* Frequency Column */
.ls-subscription-frequency-chip {
    text-transform: capitalize;
}

/* Shift Column */
.ls-subscription-shift-icon {
    margin-right: 4px;
}

.ls-subscription-shift-icon-small {
    margin-right: 2px;
}

/* Qty, Unit, Rate Columns */
.ls-subscription-text-sm {
    font-size: 0.875rem;
}

.ls-subscription-text-secondary {
    font-size: 0.875rem;
    color: var(--gray-500);
}

/* Coupon Column */
.ls-subscription-coupon-chip {
    font-size: 0.75rem;
}

.ls-subscription-coupon-discount {
    margin-left: 4px;
    color: var(--green-700);
}

.mud-theme-dark .ls-subscription-coupon-discount {
    color: var(--green-400) !important;
}

.ls-subscription-coupon-empty {
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* Total Column */
.ls-subscription-total-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ls-subscription-total-amount {
    font-weight: 600;
    font-size: 0.875rem;
}

.ls-subscription-total-original {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-decoration: line-through;
}

/* Actions Column */
.ls-subscription-actions-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.ls-subscription-switch-spacing {
    margin-right: 4px;
}

.ls-subscription-product-cell {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.ls-subscription-product-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.ls-subscription-product-name-container {
    font-weight: var(--font-weight-bold);
    display: flex;
}

.ls-subscription-product-icon {
    font-size: 1.25rem;
}

.ls-subscription-product-name {
    font-size: var(--text-base);
    padding-top: 0.2rem;
}

.ls-subscription-product-schedule {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}


.ls-subscription-schedule-icon {
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.25rem;
}

.ls-subscription-schedule-icon-morning {
    color: var(--orange-500);
}

.ls-subscription-schedule-icon-evening {
    color: var(--blue-500);
}

.ls-subscription-schedule-icon-both {
    color: var(--purple-500);
}

.ls-subscription-actions-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.ls-subscription-status-switch {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.ls-subscription-action-buttons {
    display: flex;
    gap: var(--spacing-xs);
}

/* Dark Mode Support for Subscription Grid */
.mud-theme-dark .ls-subscription-customer-date,
.mud-theme-dark .ls-subscription-contact-item-start,
.mud-theme-dark .ls-subscription-contact-text-small,
.mud-theme-dark .ls-subscription-text-secondary,
.mud-theme-dark .ls-subscription-coupon-empty,
.mud-theme-dark .ls-subscription-total-original {
    color: var(--gray-400) !important;
}

.mud-theme-dark .ls-subscription-customer-name,
.mud-theme-dark .ls-subscription-product-name-medium,
.mud-theme-dark .ls-subscription-total-amount {
    color: var(--gray-100) !important;
}

.mud-theme-dark .ls-subscription-contact-icon,
.mud-theme-dark .ls-subscription-contact-icon-start {
    color: var(--gray-400) !important;
}

/* No Records (Unified - Used in Subscriptions & Customers pages) */
.ls-no-records {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) 0;
    width: 100%;
}

.ls-no-records-icon {
    color: var(--gray-400);
    margin-bottom: var(--spacing-sm);
}

.ls-no-records-text {
    text-align: center;
    color: var(--gray-500);
}

/* ============================================================================
   4. CUSTOMERS PAGE
   ============================================================================ */

.ls-customer-name-cell {
    display: flex;
    gap: var(--spacing-xs);
}

.ls-customer-contact-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}



/* ============================================================================
   5. ADD SUBSCRIPTION MODAL
   ============================================================================ */

/* Modal Titles & Subtitles (Unified) */
.ls-modal-title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
}

.ls-modal-title-with-padding {
    padding: var(--spacing-md) var(--spacing-xl);
    border-bottom: var(--border-width) solid var(--border-color);
}

.ls-modal-subtitle {
    color: var(--gray-500);
    margin-top: var(--spacing-xs);
}

.ls-modal-loading {
    min-height: 200px;
}

.ls-subscription-step-content {
    padding: var(--spacing-lg);
}

.ls-customer-autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-sm) 0;
}

.ls-customer-autocomplete-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.ls-customer-chip-active {
    margin-left: var(--spacing-sm);
}

.ls-customer-details-card {
    background-color: var(--gray-50);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
}

.ls-customer-details-title {
    color: var(--gray-700);
}

.ls-customer-details-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    font-size: var(--text-sm);
}

.ls-customer-details-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.ls-customer-details-item-start {
    display: flex;
    align-items: start;
    gap: var(--spacing-sm);
    color: var(--gray-600);
}

.ls-customer-details-icon {
    color: var(--gray-400);
}

.ls-customer-details-icon-start {
    color: var(--gray-400);
    margin-top: 0.125rem;
}

.ls-customer-details-text {
    color: var(--gray-900);
}

.ls-customer-details-text-secondary {
    color: var(--gray-600);
}

.ls-customer-warning-section {
    padding-top: var(--spacing-md);
    border-top: var(--border-width) solid var(--border-color);
    margin-top: var(--spacing-sm);
}

.ls-customer-warning-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--orange-600);
    font-size: var(--text-xs);
}

.ls-customer-warning-icon {
    color: var(--orange-600);
}

.ls-customer-warning-text {
    font-size: var(--text-xs);
    color: var(--orange-600);
}

.ls-cart-header {
    font-weight: var(--font-weight-medium);
    display: flex;
}

.ls-cart-header-icon {
    margin-right: var(--spacing-sm);
}

.ls-review-section-title {
    color: var(--gray-700);
    font-weight: var(--font-weight-semibold);
    display: flex;
}

.ls-review-section-title-icon {
    margin-right: var(--spacing-sm);
}

.ls-review-customer-card {
    border: var(--border-width) solid var(--border-color);
}

.ls-review-customer-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    font-size: var(--text-sm);
}

.ls-cost-breakdown-card {
    background: linear-gradient(135deg, var(--blue-50) 0%, var(--indigo-100) 100%);
    border: var(--border-width) solid var(--blue-400);
}

.ls-cost-breakdown-title {
    display: flex;
}

.ls-cost-breakdown-title-icon {
    margin-right: var(--spacing-sm);
}

.ls-cost-breakdown-title-text {
    color: var(--blue-900);
    font-weight: var(--font-weight-semibold);
}

.ls-cost-breakdown-list {
    display: flex;
    flex-direction: column;
}

.ls-cost-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
}

.ls-cost-breakdown-item-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--gray-700);
}

.ls-cost-breakdown-product-icon {
    font-size: 1.25rem;
}

.ls-cost-breakdown-item-right {
    color: var(--gray-900);
    font-weight: var(--font-weight-semibold);
}

.ls-cost-breakdown-divider {
    margin: var(--spacing-sm) 0;
}

.ls-cost-breakdown-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ls-cost-breakdown-total-label {
    color: var(--gray-800);
    font-weight: var(--font-weight-semibold);
}

.ls-cost-breakdown-total-value {
    color: var(--gray-900);
    font-weight: var(--font-weight-bold);
}

.ls-cost-breakdown-estimate {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ls-cost-breakdown-estimate-label {
    color: var(--gray-500);
}

.ls-cost-breakdown-estimate-value {
    color: var(--gray-700);
    font-weight: var(--font-weight-semibold);
}

.ls-modal-loading-center {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-2xl);
}

.ls-subscription-modal-actions {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-lg);
    border-top: var(--border-width) solid var(--border-color);
}

.ls-subscription-modal-actions-left {
    display: flex;
    gap: var(--spacing-sm);
}

.ls-subscription-modal-actions-right {
    display: flex;
    gap: var(--spacing-sm);
}

.ls-subscription-modal-button-icon {
    margin-right: var(--spacing-sm);
}

.ls-subscription-modal-button-icon-right {
    margin-left: var(--spacing-sm);
}

/* ============================================================================
   6. PRODUCT CARD & SELECTOR
   ============================================================================ */

.ls-product-card {
    border-left: 4px solid var(--primary-color);
}

.ls-product-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-lg);
}

.ls-product-card-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.ls-product-card-icon {
    font-size: 2rem;
}

.ls-product-card-info {
    display: flex;
    flex-direction: column;
}

.ls-product-card-price {
    color: var(--gray-600);
}

.ls-product-card-select-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.ls-product-card-readonly-field {
    background-color: var(--gray-100);
}

.ls-product-selector-card {
    background-color: var(--gray-50);
}

.ls-product-selector-title {
    margin-bottom: var(--spacing-lg);
    font-weight: var(--font-weight-medium);
    display: flex;
}

.ls-product-selector-title-icon {
    margin-right: var(--spacing-sm);
}

.ls-product-autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-sm) 0;
}

.ls-product-autocomplete-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.ls-product-autocomplete-icon {
    font-size: 1.5rem;
}

.ls-product-autocomplete-info {
    display: flex;
    flex-direction: column;
}

.ls-product-autocomplete-name {
    font-weight: var(--font-weight-medium);
}

.ls-product-autocomplete-category {
    font-size: var(--text-xs);
    color: var(--gray-500);
    text-transform: uppercase;
}


.ls-product-selector-no-items {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--gray-500);
}

.ls-product-selector-no-items-icon {
    opacity: 0.5;
}

.ls-product-selector-no-items-text {
    margin-top: var(--spacing-sm);
}

/* ============================================================================
   7. CUSTOMER DETAILS MODAL
   ============================================================================ */

.ls-customer-details-modal-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    width: 100%;
}

.ls-customer-details-modal-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.ls-customer-details-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    max-height: calc(95vh - 180px);
    overflow-y: auto;
}

.ls-customer-info-card {
    background-color: white;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
}

.ls-customer-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.ls-customer-info-title {
    font-size: var(--text-sm);
    color: var(--gray-900);
    font-weight: var(--font-weight-medium);
}

.ls-customer-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.ls-customer-info-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-sm);
}

.ls-customer-info-item-start {
    display: flex;
    align-items: start;
    gap: var(--spacing-sm);
    font-size: var(--text-sm);
}

.ls-customer-info-icon {
    color: var(--gray-400);
}

.ls-customer-info-icon-start {
    color: var(--gray-400);
    margin-top: 0.125rem;
}

.ls-customer-info-text-secondary {
    color: var(--gray-600);
}

.ls-customer-info-text-small {
    font-size: var(--text-xs);
    color: var(--gray-500);
    margin-top: 0.125rem;
}

.ls-billing-section-title {
    font-size: var(--text-sm);
    color: var(--gray-900);
    font-weight: var(--font-weight-medium);
}

.ls-billing-cards-container {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    padding-bottom: var(--spacing-sm);
}

.ls-billing-card {
    min-width: 16rem;
    flex-shrink: 0;
}

.ls-billing-card-paid {
    border-left: 4px solid var(--green-600);
}

.ls-billing-card-partial {
    border-left: 4px solid var(--amber-600);
}

.ls-billing-card-pending {
    border-left: 4px solid var(--red-600);
}

.ls-billing-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}


.ls-billing-card-divider {
    border-top: var(--border-width) solid var(--border-color);
    padding-top: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.ls-billing-card-label {
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.ls-billing-card-value {
    font-size: 1.25rem;
    color: var(--gray-900);
    font-weight: var(--font-weight-medium);
}

.ls-billing-card-status-paid {
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-sm);
    background-color: var(--green-50);
}

.ls-billing-card-status-partial {
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-sm);
    background-color: var(--amber-50);
}

.ls-billing-card-status-pending {
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-sm);
    background-color: var(--red-50);
}

.ls-billing-card-status-label {
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.ls-billing-card-status-value {
    font-size: 1.125rem;
    color: var(--gray-900);
    font-weight: var(--font-weight-medium);
}

.ls-billing-card-pending-text {
    font-size: var(--text-sm);
    color: var(--red-600);
    margin-top: var(--spacing-xs);
}

.ls-billing-card-paid-text {
    font-size: var(--text-sm);
    color: var(--green-600);
    margin-top: var(--spacing-xs);
}

.ls-subscriptions-section-title {
    font-size: var(--text-sm);
    color: var(--gray-900);
    font-weight: var(--font-weight-medium);
}

.ls-subscription-card {
    background-color: white;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

    .ls-subscription-card:hover {
        border-color: var(--blue-400);
    }

.ls-subscription-card-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.ls-subscription-card-title {
    font-size: var(--text-sm);
    color: var(--gray-900);
    font-weight: var(--font-weight-medium);
}

.ls-subscription-card-arrow {
    color: var(--blue-600);
    font-size: var(--text-base);
}

.ls-subscription-card-chips {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}


.ls-subscription-card-label {
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.ls-subscription-card-value {
    font-size: var(--text-xs);
    color: var(--gray-900);
    font-weight: var(--font-weight-medium);
}

.ls-subscription-card-link {
    font-size: var(--text-xs);
    color: var(--blue-600);
    margin-top: var(--spacing-sm);
}

.ls-customer-details-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.ls-customer-details-action-button {
    gap: var(--spacing-sm);
}

/* ============================================================================
   8. VIEW BILL MODAL
   ============================================================================ */


.ls-bill-balance-paid {
    color: var(--green-600);
}

.ls-bill-balance-pending {
    color: var(--red-600);
}

.ls-bill-status-chip-paid {
    background-color: var(--green-600) !important;
}

.ls-bill-status-chip-partial {
    background-color: var(--amber-600) !important;
}

.ls-bill-status-chip-pending {
    background-color: var(--red-600) !important;
}

.ls-bill-summary {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: var(--border-width) solid var(--border-color);
}

.ls-bill-summary-label {
    font-weight: var(--font-weight-medium);
}

.ls-bill-summary-value {
    color: var(--green-600);
}

.ls-bill-summary-balance {
    color: var(--red-600);
}

.ls-bill-no-records {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) 0;
}

.ls-bill-no-records-icon {
    color: var(--gray-400);
    margin-bottom: var(--spacing-lg);
}

.ls-bill-no-records-text {
    color: var(--gray-500);
}

/* ============================================================================
   9. ADD CUSTOMER MODAL
   ============================================================================ */


/* ============================================================================
   10. RESPONSIVE STYLES
   ============================================================================ */

@media (max-width: 768px) {
    .ls-filter-content {
        flex-direction: column;
        align-items: stretch;
    }

    .ls-filter-actions {
        flex-wrap: wrap;
    }

    .ls-subscriptions-bulk-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }

    .ls-subscriptions-bulk-buttons {
        flex-wrap: wrap;
    }
}

/* ============================================================================
   DROPZONE FILE UPLOAD (Expense Attachments)
   ============================================================================ */
.ls-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--white);
    position: relative;
    display: block;
}

.ls-dropzone-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.ls-dropzone:hover {
    background-color: var(--gray-50);
    border-color: var(--primary-color);
}

.ls-dropzone-dragover {
    background-color: var(--blue-50);
    border-color: var(--primary-color);
    border-style: solid;
}

.ls-dropzone-content {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.ls-dropzone-icon {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--blue-50);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ls-dropzone-icon-svg {
    color: var(--blue-500);
}

.ls-dropzone-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ls-dropzone-text-primary {
    font-size: var(--text-sm);
    color: var(--gray-600);
}

.ls-dropzone-text-link {
    font-weight: var(--font-weight-medium);
    color: var(--blue-600);
}

.ls-dropzone-text-secondary {
    font-size: var(--text-xs);
    color: var(--gray-500);
    margin: 0;
}

.ls-dropzone-uploading {
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    text-align: center;
    background-color: var(--gray-50);
}

.ls-dropzone-file-uploaded {
    margin-top: 0.75rem;
    padding: 0.5rem;
    background-color: var(--green-50);
    border: 1px solid var(--green-100);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm);
    color: var(--green-700);
}

.ls-dropzone-file-name {
    flex: 1;
}

/* ============================================================================
   VIEW EXPENSE DIALOG
   ============================================================================ */
.ls-view-expense-dialog .mud-dialog-content {
    padding: 0;
    max-height: calc(95vh - 180px);
    overflow-y: auto;
}

.ls-view-expense-content {
    padding: 1.5rem;
}

.ls-view-expense-amount-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: var(--gray-50);
    border-radius: var(--border-radius-lg);
}

.ls-view-expense-label {
    font-size: var(--text-sm);
    color: var(--gray-500);
    margin-bottom: 0.25rem;
}

.ls-view-expense-value {
    font-weight: var(--font-weight-medium);
    color: var(--gray-900);
    margin: 0;
}

.ls-view-expense-status-chip {
    margin-top: 0.25rem;
}

.ls-view-expense-detail-item {
    margin-bottom: 0.5rem;
}

.ls-view-expense-description-box {
    padding: 0.75rem;
    background-color: var(--gray-50);
    border-radius: var(--border-radius);
    font-size: var(--text-sm);
    color: var(--gray-700);
    line-height: 1.6;
}

.ls-view-expense-attachments {
    border-top: 1px solid var(--border-color);
}

.ls-view-expense-attachment-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--gray-50);
    width: fit-content;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .ls-view-expense-attachment-item:hover {
        background-color: var(--gray-100);
    }

.ls-view-expense-attachment-link {
    font-size: var(--text-sm);
    color: var(--blue-600);
    text-decoration: underline;
}

/* ============================================================================
   ORDER ENTRY MODAL (Bulk Daily Order Log Creation)
   ============================================================================ */
.ls-order-entry-container {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ls-order-entry-customer-list {
    max-height: 50vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-right: 0.5rem;
}

.ls-order-entry-customer-card {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: white;
    transition: background-color 0.2s;
}

    .ls-order-entry-customer-card:hover {
        background-color: var(--gray-50);
    }

.ls-order-entry-qty-input {
    min-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ============================================================================
   DELIVERY ROUTES - Bottle Count Columns & V1 Design
   ============================================================================ */
.ls-route-description {
    font-size: 0.75rem;
}

/* Route Name Cell */
.ls-route-name-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.ls-route-expand-btn {
    flex-shrink: 0;
}

.ls-route-icon {
    color: var(--gray-400);
    flex-shrink: 0;
}

.ls-route-name-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.ls-route-name-text {
    font-weight: var(--font-weight-medium);
}

/* Main Route Row */
.ls-route-main-row {
    background-color: var(--white);
}

    .ls-route-main-row:hover {
        background-color: var(--gray-50);
    }

/* Expanded Cell */
.ls-route-expanded-cell {
    padding: 0;
    background-color: var(--mud-palette-background-grey);
}

.ls-route-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg);
}

/* Customers Header */
.ls-route-customers-header {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: var(--border-width) solid var(--border-color);
    background-color: var(--gray-50);
}

.ls-route-customers-header-text {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Customers Table */
.ls-route-customers-table {
    margin: 0;
}

.ls-route-th-center {
    text-align: center;
}

.ls-route-th-subtitle {
    font-size: 0.7rem;
    font-weight: var(--font-weight-normal);
}

.ls-route-th-right {
    text-align: right;
}

/* Customer Row */
.ls-route-customer-row {
    background-color: var(--gray-50);
}

    .ls-route-customer-row:hover {
        background-color: var(--gray-100);
    }

.ls-route-customer-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ls-route-customer-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ls-route-customer-name {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
}

.ls-route-customer-id-text {
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.ls-route-info-btn {
    color: var(--gray-400);
    width: 24px;
    height: 24px;
    padding: 0;
}

    .ls-route-info-btn:hover {
        color: var(--gray-600);
    }

.ls-route-customer-address {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--gray-500);
}

    .ls-route-customer-address .ls-route-customer-address-tooltip {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .ls-route-customer-address .ls-route-address-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
        display: block;
    }


.ls-route-address-icon {
    font-size: 12px;
    flex-shrink: 0;
}

.ls-route-address-text {
    font-size: var(--text-xs);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ls-route-subscription-count {
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.ls-route-bottle-count-small {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
}

.ls-route-total-bottles-small {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.ls-route-total-bottles-value-small {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: #1e40af;
}

.ls-route-other-items-chip-small {
    font-size: var(--text-xs);
    color: #6b21a8;
    border-color: #c4b5fd;
    background-color: #f3e8ff;
}

.ls-route-switch-btn-small {
    font-size: var(--text-xs);
    height: 28px;
    padding: 0 var(--spacing-sm);
}

/* Subscriptions Popover */
.ls-route-subscriptions-popover {
    width: 320px;
    padding: 0;
}

.ls-route-popover-header {
    padding: var(--spacing-md);
    border-bottom: var(--border-width) solid var(--border-color);
    background-color: var(--gray-50);
}

.ls-route-popover-title {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    margin: 0;
}

.ls-route-popover-content {
    padding: var(--spacing-sm);
    max-height: 256px;
    overflow-y: auto;
}

.ls-route-popover-cell {
    font-size: var(--text-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
}

.ls-route-text-right {
    text-align: right;
}

.ls-route-text-center {
    text-align: center;
}

.ls-route-popover-footer {
    padding: var(--spacing-sm);
    border-top: var(--border-width) solid var(--border-color);
    background-color: var(--gray-50);
}

.ls-route-switch-btn {
    width: 100%;
    font-size: var(--text-xs);
    gap: var(--spacing-xs);
}

/* Customer Subscriptions Dialog */
.ls-customer-subscriptions-dialog {
    padding: 0;
}

.ls-customer-subscriptions-header {
    padding: var(--spacing-md);
    border-bottom: var(--border-width) solid var(--border-color);
    background-color: var(--gray-50);
}

.ls-customer-subscriptions-title {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    margin: 0 0 var(--spacing-xs) 0;
}

.ls-customer-subscriptions-customer {
    font-size: var(--text-xs);
    color: var(--gray-600);
    margin: 0;
}

.ls-customer-subscriptions-content {
    padding: var(--spacing-sm);
    max-height: 400px;
    overflow-y: auto;
}

/* Totals Row */
.ls-route-totals-row {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 2px solid #93c5fd;
    background-color: #dbeafe;
}

.ls-route-totals-cell-empty {
    flex: 1;
}

.ls-route-totals-cell-label {
    font-weight: var(--font-weight-bold);
    margin-right: var(--spacing-md);
}

.ls-route-totals-cow {
    color: #15803d;
    font-weight: var(--font-weight-bold);
}

.ls-route-totals-buffalo {
    color: #b45309;
    font-weight: var(--font-weight-bold);
}

.ls-route-totals-total {
    color: #1e40af;
}

.ls-route-totals-text {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
}

.ls-route-totals-text-large {
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
}

.ls-route-totals-other {
    color: #6b21a8;
}

.ls-route-icon-purple {
    color: #6b21a8;
}

/* Pagination */
.ls-route-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
}

.ls-route-pagination-text {
    color: var(--gray-500);
}

.ls-route-no-subscriptions {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--gray-500);
}

/* Actions Cell */
.ls-route-actions-cell {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-sm);
}

.ls-route-customers-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.ls-route-icon-muted {
    color: var(--gray-400);
}

.ls-route-icon-primary {
    color: #2563eb;
}

.ls-route-bottle-count {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
}

.ls-route-bottle-cow {
    color: #15803d;
}

.ls-route-bottle-buffalo {
    color: #b45309;
}

.ls-route-total-bottles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.ls-route-total-bottles-value {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: #1e40af;
}

.ls-route-other-items-chip {
    color: #6b21a8;
    border-color: #c4b5fd;
    background-color: #f3e8ff;
}

.ls-route-empty-value {
    font-size: var(--text-xs);
    color: var(--gray-400);
}

.ls-route-expanded-cell {
    padding: 0;
    background-color: var(--mud-palette-background-grey);
}

.ls-route-subscriptions-table {
    margin: 8px;
}

.ls-route-address-text {
    font-size: 0.85rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dark mode support for delivery routes */
.mud-theme-dark .ls-route-icon-muted {
    color: var(--gray-500) !important;
}

.mud-theme-dark .ls-route-icon-primary {
    color: #60a5fa !important;
}

.mud-theme-dark .ls-route-bottle-cow {
    color: #4ade80 !important;
}

.mud-theme-dark .ls-route-bottle-buffalo {
    color: #fbbf24 !important;
}

.mud-theme-dark .ls-route-total-bottles-value {
    color: #60a5fa !important;
}

.mud-theme-dark .ls-route-other-items-chip {
    color: #a78bfa !important;
    border-color: #7c3aed !important;
    background-color: #3b1f5e !important;
}

.mud-theme-dark .ls-route-empty-value {
    color: var(--gray-500) !important;
}


.ls-subscription-summary {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-divider);
}

.ls-subscription-code {
    background-color: var(--mud-palette-action-selected-background);
}