/* Extracted from POSPlusPlusUI\Pages\Reports.razor inline styles */
.loading-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background: var(--bg-primary);
        gap: 16px;
    }

    .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid var(--border-color);
        border-top-color: var(--accent-primary);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

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

    .loading-container p {
        color: var(--text-muted);
        font-size: 14px;
    }

    .reports-container {
        padding: 24px;
        background: var(--bg-primary);
        min-height: 100vh;
    }

    .header {
        display: flex;
        flex-direction: column;
        margin: -24px -24px 24px -24px;
        gap: 16px;
        background: var(--bg-secondary, #1a1a24);
        border: none;
        border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
        border-radius: 0;
        padding: 20px 24px;
    }

    .header .header-content {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .header .page-header-icon {
        color: var(--accent-primary, var(--brand-primary));
        flex-shrink: 0;
        font-size: 28px;
        line-height: 1;
    }

    .header h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .header p {
        margin: 4px 0 0 0;
        color: var(--text-muted);
    }

    /* Coming Soon Section */
    .coming-soon-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .coming-soon-item {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 14px;
        background: var(--bg-tertiary);
        border-radius: 10px;
        border: 1px dashed var(--border-color);
    }

    .coming-soon-icon {
        font-size: 24px;
        flex-shrink: 0;
    }

    .coming-soon-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .coming-soon-info strong {
        color: var(--text-primary);
        font-size: 14px;
    }

    .coming-soon-info span {
        color: var(--text-secondary);
        font-size: 13px;
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 12px 16px;
        flex-wrap: wrap;
    }

    .header-buttons {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
    }

    .date-range {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .location-filter {
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
    }

    .location-filter label {
        color: var(--text-secondary);
        font-size: 14px;
        white-space: nowrap;
    }

    .location-dropdown {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--bg-secondary);
        color: var(--text-primary);
        font-size: 14px;
        min-width: 140px;
        max-width: 200px;
        height: 38px;
        box-sizing: border-box;
        cursor: pointer;
        user-select: none;
        transition: border-color 0.2s;
    }

    .location-dropdown:hover {
        border-color: var(--accent-primary);
    }

    .location-dropdown:focus-within {
        outline: none;
        border-color: var(--accent-primary);
    }

    .selected-locations-text {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dropdown-arrow {
        transition: transform 0.2s;
        flex-shrink: 0;
    }

    .dropdown-arrow.open {
        transform: rotate(180deg);
    }

    .location-dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 4px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: var(--shadow-lg);
        z-index: 100;
        max-height: 300px;
        overflow-y: auto;
        min-width: 200px;
    }

    .location-checkbox-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        cursor: pointer;
        transition: background 0.15s;
    }

    .location-checkbox-item:hover {
        background: var(--bg-hover);
    }

    .location-checkbox-item.all-locations {
        font-weight: 600;
    }

    .location-checkbox-item span {
        flex: 1;
        color: var(--text-primary);
    }

    .dropdown-divider {
        height: 1px;
        background: var(--border-color);
        margin: 4px 0;
    }

    .apply-locations-btn {
        display: block;
        width: calc(100% - 16px);
        margin: 8px;
        padding: 10px;
        background: var(--accent-primary);
        color: white;
        border: none;
        border-radius: 6px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.2s;
    }

    .apply-locations-btn:hover {
        background: var(--accent-secondary);
    }

    .location-select {
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--bg-secondary);
        color: var(--text-primary);
        font-size: 14px;
        min-width: 150px;
        cursor: pointer;
    }

    .location-select:focus {
        outline: none;
        border-color: var(--accent-primary);
    }

    .date-range label {
        color: var(--text-secondary);
        font-size: 14px;
    }

    .quick-filters {
        display: flex;
        gap: 8px;
    }

    .quick-btn {
        padding: 8px 14px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--bg-secondary);
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        height: 38px;
        box-sizing: border-box;
        transition: all 0.2s;
    }

    .quick-btn:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }

    .quick-btn.active {
        background: var(--accent-primary);
        color: white;
        border-color: var(--accent-primary);
    }

    .date-range input {
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--bg-secondary);
        color: var(--text-primary);
        height: 38px;
        box-sizing: border-box;
        font-size: 14px;
        color-scheme: light;
    }

    [data-theme="dark"] .date-range input {
        color-scheme: dark;
    }

    .date-range input:focus {
        outline: none;
        border-color: var(--accent-primary);
    }

    .business-day-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        font-size: 13px;
        color: var(--text-secondary);
        white-space: nowrap;
        margin-left: 4px;
    }

    .business-day-toggle input[type="checkbox"] {
        accent-color: var(--accent-primary);
    }

    .btn-refresh {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: var(--accent-primary);
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s;
    }

    .btn-refresh:hover {
        background: var(--accent-secondary);
        transform: translateY(-1px);
    }

    /* Loading State */
    .loading-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px;
        color: var(--text-secondary);
    }

    .spinner {
        width: 40px;
        height: 40px;
        border: 3px solid var(--border-color);
        border-top-color: var(--accent-primary);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin-bottom: 16px;
    }

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

    /* Summary Cards */
    .summary-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }

    .summary-card {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 20px;
        background: var(--bg-secondary);
        border-radius: 16px;
        border: 1px solid var(--border-color);
    }

    .card-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card-icon svg {
        width: 24px;
        height: 24px;
    }

    .summary-card.revenue .card-icon {
        background: rgba(16, 185, 129, 0.2);
        color: #10b981;
    }

    .summary-card.orders .card-icon {
        background: rgba(var(--brand-primary-rgb), 0.2);
        color: var(--accent-primary);
    }

    .summary-card.average .card-icon {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
    }

    .summary-card.items .card-icon {
        background: rgba(236, 72, 153, 0.2);
        color: #ec4899;
    }

    .card-content {
        display: flex;
        flex-direction: column;
    }

    .card-label {
        font-size: 13px;
        color: var(--text-secondary);
    }

    .card-value {
        font-size: 24px;
        font-weight: 700;
        color: var(--text-primary);
    }

    /* Charts Grid */
    .charts-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .chart-card {
        background: var(--bg-secondary);
        border-radius: 16px;
        border: 1px solid var(--border-color);
        overflow: hidden;
    }

    .chart-card.full-width {
        grid-column: span 2;
    }

    .chart-header {
        padding: 20px 24px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    .chart-title {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .chart-header h3 {
        margin: 0;
        font-size: 16px;
        color: var(--text-primary);
    }

    .chart-subtitle {
        font-size: 13px;
        color: var(--text-secondary);
    }

    .chart-actions {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .download-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        background: var(--bg-tertiary);
        color: var(--text-primary);
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
        font-size: 13px;
        transition: all 0.2s;
        white-space: nowrap;
    }

    .download-btn svg {
        width: 16px;
        height: 16px;
    }

    .download-btn:hover {
        background: var(--bg-secondary);
        border-color: var(--accent-primary);
        color: var(--accent-primary);
    }

    .download-btn.ghost {
        background: transparent;
        border-color: var(--border-color);
    }

    .chart-body {
        padding: 20px 24px 24px;
    }

    .empty-chart {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px;
        color: var(--text-muted);
        gap: 12px;
    }

    .empty-chart.success {
        color: #10b981;
    }

    .empty-chart svg {
        width: 40px;
        height: 40px;
    }

    /* Donut Chart */
    .donut-chart-container {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .donut-chart {
        position: relative;
        width: 160px;
        height: 160px;
        flex-shrink: 0;
    }

    .donut-svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

    .donut-segment {
        transition: all 0.3s;
    }

    .donut-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .donut-total {
        display: block;
        font-size: 20px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .donut-label {
        font-size: 12px;
        color: var(--text-secondary);
    }

    .chart-legend {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
    }

    .legend-color {
        width: 12px;
        height: 12px;
        border-radius: 3px;
        flex-shrink: 0;
    }

    .legend-label {
        color: var(--text-primary);
        flex: 1;
    }

    .legend-value {
        color: var(--text-secondary);
        font-weight: 500;
    }

    /* Horizontal Bar Chart */
    .horizontal-bar-chart {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .bar-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .bar-label {
        width: 100px;
        font-size: 13px;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bar-track {
        flex: 1;
        height: 28px;
        background: var(--bg-tertiary);
        border-radius: 6px;
        overflow: hidden;
    }

    .bar-fill {
        height: 100%;
        border-radius: 6px;
        display: flex;
        align-items: center;
        padding-right: 10px;
        justify-content: flex-end;
        transition: width 0.5s ease;
        min-width: 60px;
    }

    .bar-fill.area-bar {
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    }

    .bar-value {
        font-size: 12px;
        font-weight: 600;
        color: white;
    }

    /* Vertical Bar Chart */
    .vertical-bar-chart {
        padding: 10px 0;
    }

    .bar-chart-container {
        display: flex;
        align-items: flex-end;
        gap: 4px;
        height: 150px;
    }

    .v-bar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
    }

    .v-bar-wrapper {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: flex-end;
    }

    .v-bar {
        width: 100%;
        background: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
        border-radius: 4px 4px 0 0;
        transition: height 0.5s ease;
        min-height: 2px;
    }

    .v-bar-item.peak .v-bar {
        background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    }

    .v-bar-label {
        font-size: 10px;
        color: var(--text-secondary);
        margin-top: 6px;
    }

    /* Product Mix */
    .pmix-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .pmix-chart h4 {
        margin: 0 0 16px 0;
        font-size: 14px;
        color: var(--text-secondary);
        font-weight: 600;
    }

    .pmix-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .pmix-rank {
        width: 24px;
        height: 24px;
        background: var(--bg-tertiary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        color: var(--text-secondary);
    }

    .pmix-row:nth-child(-n+3) .pmix-rank {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: white;
    }

    .pmix-name {
        width: 140px;
        font-size: 13px;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pmix-bar-track {
        flex: 1;
        height: 8px;
        background: var(--bg-tertiary);
        border-radius: 4px;
        overflow: hidden;
    }

    .pmix-bar {
        height: 100%;
        border-radius: 4px;
        transition: width 0.5s ease;
    }

    .pmix-bar.qty-bar {
        background: linear-gradient(90deg, #ec4899 0%, #db2777 100%);
    }

    .pmix-bar.rev-bar {
        background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    }

    .pmix-value {
        width: 60px;
        text-align: right;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-primary);
    }

    /* Payment Methods */
    .payment-breakdown {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .payment-item {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .payment-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .payment-icon svg {
        width: 24px;
        height: 24px;
    }

    .payment-icon.card {
        background: rgba(var(--brand-primary-rgb), 0.2);
        color: var(--accent-primary);
    }

    .payment-icon.cash {
        background: rgba(16, 185, 129, 0.2);
        color: #10b981;
    }

    .payment-details {
        flex: 1;
    }

    .payment-name {
        display: block;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 6px;
    }

    .payment-bar-track {
        height: 8px;
        background: var(--bg-tertiary);
        border-radius: 4px;
        overflow: hidden;
    }

    .payment-bar {
        height: 100%;
        border-radius: 4px;
        transition: width 0.5s ease;
    }

    .payment-bar.card {
        background: var(--accent-primary);
    }

    .payment-bar.cash {
        background: #10b981;
    }

    .payment-stats {
        text-align: right;
    }

    .payment-amount {
        display: block;
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .payment-percent {
        font-size: 13px;
        color: var(--text-secondary);
    }

    /* Split Payment Stats */
    .stats-grid.compact {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }

    .stats-grid.compact .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 12px;
        background: var(--bg-tertiary);
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }

    .stats-grid.compact .stat-value {
        font-size: 20px;
        font-weight: 700;
        color: var(--accent-primary);
    }

    .stats-grid.compact .stat-label {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 4px;
    }

    .split-method-mix {
        padding: 12px;
        background: var(--bg-tertiary);
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }

    .mix-label {
        font-size: 13px;
        color: var(--text-muted);
        display: block;
        margin-bottom: 8px;
    }

    .mix-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .mix-tag {
        padding: 4px 10px;
        background: rgba(var(--brand-primary-rgb), 0.1);
        border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
        color: var(--accent-primary);
    }

    /* Reorder Table */
    .reorder-table, .performance-table {
        overflow-x: auto;
    }

    .reorder-table table, .performance-table table {
        width: 100%;
        border-collapse: collapse;
    }

    .reorder-table th, .reorder-table td,
    .performance-table th, .performance-table td {
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
    }

    .reorder-table th, .performance-table th {
        background: var(--bg-tertiary);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-secondary);
    }

    .reorder-table td, .performance-table td {
        font-size: 14px;
        color: var(--text-primary);
    }

    .reorder-table tr.critical {
        background: rgba(239, 68, 68, 0.1);
    }

    .reorder-table tr.warning {
        background: rgba(245, 158, 11, 0.1);
    }

    .stock-indicator {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .stock-bar-track {
        width: 60px;
        height: 6px;
        background: var(--bg-tertiary);
        border-radius: 3px;
        overflow: hidden;
    }

    .stock-bar {
        height: 100%;
        border-radius: 3px;
    }

    .stock-bar.critical {
        background: #ef4444;
    }

    .stock-bar.warning {
        background: #f59e0b;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
    }

    .status-badge.critical {
        background: rgba(239, 68, 68, 0.2);
        color: #ef4444;
    }

    .status-badge.warning {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
    }

    /* Percent Bar */
    .percent-bar {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .percent-fill {
        height: 6px;
        background: var(--accent-primary);
        border-radius: 3px;
        flex: 1;
    }

    .percent-bar span {
        font-size: 12px;
        color: var(--text-secondary);
        min-width: 40px;
    }

    .trend-badge {
        font-size: 18px;
    }

    /* Loyalty Report Styles */
    .loyalty-stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-bottom: 20px;
    }

    .loyalty-stat {
        text-align: center;
        padding: 16px;
        background: var(--bg-secondary);
        border-radius: 12px;
        border: 1px solid var(--border-color);
    }

    .loyalty-stat.highlight {
        background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.1), rgba(168, 85, 247, 0.1));
        border-color: var(--brand-shadow);
    }

    .loyalty-stat-value {
        display: block;
        font-size: 24px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 4px;
    }

    .loyalty-stat-label {
        font-size: 12px;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .redemption-rate {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: var(--bg-secondary);
        border-radius: 8px;
    }

    .rate-label {
        font-size: 13px;
        color: var(--text-secondary);
        white-space: nowrap;
    }

    .rate-bar-track {
        flex: 1;
        height: 8px;
        background: var(--bg-hover);
        border-radius: 4px;
        overflow: hidden;
    }

    .rate-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
        border-radius: 4px;
        transition: width 0.5s ease;
    }

    .rate-value {
        font-weight: 600;
        color: var(--text-primary);
        min-width: 50px;
        text-align: right;
    }

    /* Customer Report Styles */
    .customer-stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .customer-stat {
        text-align: center;
        padding: 16px;
        background: var(--bg-secondary);
        border-radius: 12px;
        border: 1px solid var(--border-color);
    }

    .customer-stat.active {
        background: rgba(16, 185, 129, 0.1);
        border-color: rgba(16, 185, 129, 0.3);
    }

    .customer-stat.highlight {
        background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.1), rgba(16, 185, 129, 0.1));
        border-color: var(--brand-shadow);
    }

    .customer-stat-value {
        display: block;
        font-size: 24px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 4px;
    }

    .customer-stat-label {
        font-size: 12px;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Top Customers Table */
    .top-customers-table {
        overflow-x: auto;
    }

    .top-customers-table table {
        width: 100%;
        border-collapse: collapse;
    }

    .top-customers-table th {
        text-align: left;
        padding: 12px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border-color);
        font-weight: 600;
    }

    .top-customers-table td {
        padding: 12px;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-primary);
    }

    .top-customers-table tr:hover {
        background: var(--bg-hover);
    }

    .top-customers-table tr.top-1 {
        background: rgba(255, 215, 0, 0.05);
    }

    .top-customers-table tr.top-2 {
        background: rgba(192, 192, 192, 0.05);
    }

    .top-customers-table tr.top-3 {
        background: rgba(205, 127, 50, 0.05);
    }

    .rank-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        height: 32px;
        border-radius: 50%;
        font-weight: 600;
        font-size: 14px;
        background: var(--bg-secondary);
        color: var(--text-secondary);
    }

    .rank-badge.medal {
        background: transparent;
        font-size: 24px;
    }

    .rank-award.rank-1 { color: gold; }
    .rank-award.rank-2 { color: silver; }
    .rank-award.rank-3 { color: #cd7f32; }

    .contact-info {
        display: block;
        font-size: 12px;
        color: var(--text-secondary);
    }

    .spent-indicator {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .spent-bar-track {
        width: 100%;
        height: 6px;
        background: var(--bg-hover);
        border-radius: 3px;
        overflow: hidden;
    }

    .spent-bar {
        height: 100%;
        background: linear-gradient(90deg, #10b981, var(--brand-primary));
        border-radius: 3px;
    }

    /* Server Sales Styles */
    .server-sales-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .server-sales-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: var(--bg-tertiary);
        border-radius: 10px;
    }

    .server-rank {
        font-weight: 700;
        color: var(--text-secondary);
        min-width: 30px;
    }

    .server-info {
        display: flex;
        flex-direction: column;
        min-width: 100px;
    }

    .server-name {
        font-weight: 600;
        color: var(--text-primary);
    }

    .server-orders {
        font-size: 12px;
        color: var(--text-secondary);
    }

    .server-bar-container {
        flex: 1;
        height: 8px;
        background: var(--bg-hover);
        border-radius: 4px;
        overflow: hidden;
    }

    .server-bar {
        height: 100%;
        border-radius: 4px;
        transition: width 0.3s ease;
    }

    .server-value {
        font-weight: 700;
        color: var(--text-primary);
        min-width: 80px;
        text-align: right;
    }

    /* Void/Comp Styles */
    .void-comp-summary {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
    }

    .summary-stat {
        flex: 1;
        padding: 16px;
        border-radius: 12px;
        text-align: center;
    }

    .summary-stat.void {
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.2);
    }

    .summary-stat.comp {
        background: rgba(245, 158, 11, 0.1);
        border: 1px solid rgba(245, 158, 11, 0.2);
    }

    .summary-stat.gratuity {
        background: rgba(16, 185, 129, 0.1);
        border: 1px solid rgba(16, 185, 129, 0.2);
    }

    .summary-stat.auto-gratuity {
        background: rgba(var(--brand-primary-rgb), 0.1);
        border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
    }

    .summary-value {
        display: block;
        font-size: 28px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .summary-label {
        display: block;
        font-size: 13px;
        color: var(--text-secondary);
        margin-top: 4px;
    }

    .subsection-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-secondary);
        margin: 0 0 12px 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .user-breakdown-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .user-breakdown-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        background: var(--bg-tertiary);
        border-radius: 8px;
    }

    .user-info {
        display: flex;
        flex-direction: column;
        min-width: 120px;
    }

    .user-name {
        font-weight: 600;
        color: var(--text-primary);
        font-size: 14px;
    }

    .user-count {
        font-size: 12px;
        color: var(--text-secondary);
    }

    .user-bar-container {
        flex: 1;
        height: 8px;
        background: var(--bg-hover);
        border-radius: 4px;
        overflow: hidden;
    }

    .user-bar {
        height: 100%;
        border-radius: 4px;
        transition: width 0.3s ease;
    }

    .user-bar.void {
        background: #ef4444;
    }

    .user-bar.comp {
        background: #f59e0b;
    }

    .user-bar.gratuity {
        background: #10b981;
    }

    .user-bar.labor {
        background: var(--brand-primary);
    }

    .user-value {
        font-weight: 600;
        color: var(--text-primary);
        min-width: 70px;
        text-align: right;
    }

    .empty-chart.small {
        padding: 20px;
    }

    /* Labor Cost Styles */
    .labor-cost-summary {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .summary-stat.labor {
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        color: white;
    }

    .summary-stat.labor .summary-label {
        color: rgba(255,255,255,0.8);
    }

    .labor-ratio-alert {
        margin-top: 16px;
        padding: 12px 16px;
        background: var(--bg-card);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--border-color);
    }

    .ratio-label {
        font-weight: 500;
        color: var(--text-secondary);
    }

    .ratio-value {
        font-size: 1.25rem;
        font-weight: 700;
    }

    .ratio-value.excellent {
        color: #10b981;
    }

    .ratio-value.good {
        color: #3b82f6;
    }

    .ratio-value.warning {
        color: #f59e0b;
    }

    .ratio-value.danger {
        color: #ef4444;
    }

    /* Void/Comp Table */
    .void-comp-table {
        overflow-x: auto;
    }

    .void-comp-table table {
        width: 100%;
        border-collapse: collapse;
    }

    .void-comp-table th {
        text-align: left;
        padding: 12px;
        background: var(--bg-tertiary);
        color: var(--text-secondary);
        font-weight: 600;
        font-size: 13px;
        border-bottom: 1px solid var(--border-color);
        white-space: nowrap;
    }

    .void-comp-table td {
        padding: 12px;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-primary);
        font-size: 14px;
    }

    .void-comp-table tr:hover {
        background: var(--bg-hover);
    }

    .void-comp-table tr.void-row {
        background: rgba(239, 68, 68, 0.03);
    }

    .void-comp-table tr.comp-row {
        background: rgba(245, 158, 11, 0.03);
    }

    .type-badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .type-badge.void {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
    }

    .type-badge.comp {
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
    }

    .reason-cell {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .table-note {
        text-align: center;
        padding: 12px;
        color: var(--text-secondary);
        font-size: 13px;
        font-style: italic;
    }

    /* Responsive */
    @media (max-width: 1024px) {
        .charts-grid {
            grid-template-columns: 1fr;
        }

        .chart-card.full-width {
            grid-column: span 1;
        }

        .pmix-grid {
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .donut-chart-container {
            flex-direction: column;
        }

        .loyalty-stats-grid,
        .customer-stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .header {
            flex-direction: column;
        }

        .date-range {
            flex-wrap: wrap;
        }

        .summary-cards {
            grid-template-columns: repeat(2, 1fr);
        }

        .loyalty-stats-grid,
        .customer-stats-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 480px) {
        .summary-cards {
            grid-template-columns: 1fr;
        }

        .loyalty-stats-grid,
        .customer-stats-grid {
            grid-template-columns: 1fr;
        }
    }

    /* Daily Sales Trend */
    .daily-trend-chart {
        padding: 10px 0;
    }

    .trend-bars {
        display: flex;
        gap: 8px;
        align-items: flex-end;
        height: 200px;
        overflow-x: auto;
        padding-bottom: 10px;
    }

    .trend-bar-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 50px;
        flex: 1;
    }

    .trend-bar-wrapper {
        height: 150px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        width: 100%;
    }

    .trend-bar {
        background: linear-gradient(to top, var(--accent-primary), var(--brand-primary-soft));
        border-radius: 4px 4px 0 0;
        min-height: 4px;
        position: relative;
        transition: height 0.3s;
    }

    .trend-bar:hover {
        opacity: 0.9;
    }

    .trend-value {
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        color: var(--text-primary);
    }

    .trend-label {
        margin-top: 6px;
        font-size: 11px;
        color: var(--text-primary);
        font-weight: 500;
    }

    .trend-orders {
        font-size: 9px;
        color: var(--text-secondary);
    }

    /* Order Type Comparison */
    .order-type-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .order-type-card {
        padding: 16px;
        background: var(--bg-tertiary);
        border-radius: 10px;
        border: 1px solid var(--border-color);
    }

    .order-type-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }

    .order-type-icon {
        font-size: 24px;
    }

    .order-type-name {
        font-weight: 600;
        font-size: 16px;
        color: var(--text-primary);
    }

    .order-type-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 12px;
    }

    .order-type-stat {
        text-align: center;
    }

    .order-type-stat .stat-value {
        display: block;
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .order-type-stat .stat-label {
        font-size: 11px;
        color: var(--text-secondary);
    }

    .order-type-bar-track {
        height: 8px;
        background: var(--bg-secondary);
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 6px;
    }

    .order-type-bar {
        height: 100%;
        background: linear-gradient(to right, var(--accent-primary), var(--brand-primary-soft));
        border-radius: 4px;
        transition: width 0.3s;
    }

    .order-type-percent {
        font-size: 12px;
        color: var(--text-secondary);
    }

    /* Discount & Fee Styling */
    .discount-summary-stats,
    .fee-summary-stats,
    .refund-summary-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }

    .summary-stat.discount {
        background: rgba(245, 158, 11, 0.1);
        border-color: rgba(245, 158, 11, 0.3);
    }

    .summary-stat.discount .summary-value {
        color: #f59e0b;
    }

    .summary-stat.fee {
        background: rgba(16, 185, 129, 0.1);
        border-color: rgba(16, 185, 129, 0.3);
    }

    .summary-stat.fee .summary-value {
        color: #10b981;
    }

    .summary-stat.refund {
        background: rgba(239, 68, 68, 0.1);
        border-color: rgba(239, 68, 68, 0.3);
    }

    .summary-stat.refund .summary-value {
        color: #ef4444;
    }

    .discount-breakdown,
    .fee-breakdown {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .discount-row,
    .fee-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .discount-info,
    .fee-info {
        min-width: 120px;
        display: flex;
        flex-direction: column;
    }

    .discount-name,
    .fee-name {
        font-weight: 600;
        color: var(--text-primary);
        font-size: 14px;
    }

    .discount-count,
    .fee-count {
        font-size: 11px;
        color: var(--text-secondary);
    }

    .discount-bar-track,
    .fee-bar-track {
        flex: 1;
        height: 8px;
        background: var(--bg-tertiary);
        border-radius: 4px;
        overflow: hidden;
    }

    .discount-bar {
        height: 100%;
        background: linear-gradient(to right, #f59e0b, #fbbf24);
        border-radius: 4px;
    }

    .fee-bar {
        height: 100%;
        background: linear-gradient(to right, #10b981, #34d399);
        border-radius: 4px;
    }

    .discount-value,
    .fee-value {
        min-width: 100px;
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .discount-value span:first-child,
    .fee-value span:first-child {
        font-weight: 600;
        color: var(--text-primary);
    }

    .avg-note {
        font-size: 11px;
        color: var(--text-secondary);
    }

    /* Cash Discount Program */
    .cash-discount-overview {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .summary-stat-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .summary-stat.success {
        background: rgba(16, 185, 129, 0.1);
        border-color: rgba(16, 185, 129, 0.3);
    }

    .summary-stat.success .summary-value {
        color: #10b981;
    }

    .cash-discount-details {
        background: var(--bg-tertiary);
        border-radius: 8px;
        padding: 12px;
    }

    .detail-row {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-color);
    }

    .detail-row:last-child {
        border-bottom: none;
    }

    .detail-row .detail-label {
        color: var(--text-secondary);
        font-size: 13px;
    }

    .detail-row .detail-value {
        font-weight: 600;
        color: var(--text-primary);
    }

    .detail-row.highlight {
        background: rgba(var(--brand-primary-rgb), 0.1);
        margin: 0 -12px;
        padding: 8px 12px;
    }

    .detail-row.positive .detail-value {
        color: #10b981;
    }

    .detail-row.negative .detail-value {
        color: #ef4444;
    }

    /* Refund Report */
    .refund-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .refund-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        background: var(--bg-tertiary);
        border-radius: 8px;
        border-left: 3px solid #ef4444;
    }

    .refund-order-info {
        display: flex;
        flex-direction: column;
    }

    .refund-order-num {
        font-weight: 600;
        color: var(--text-primary);
    }

    .refund-date {
        font-size: 12px;
        color: var(--text-secondary);
    }

    .refund-amount {
        font-weight: 700;
        color: #ef4444;
        font-size: 16px;
    }

    .more-refunds {
        text-align: center;
        color: var(--text-secondary);
        font-size: 13px;
        padding: 8px;
    }

    /* Inventory Valuation */
    .valuation-summary {
        margin-bottom: 20px;
    }

    .valuation-total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.1), rgba(var(--brand-secondary-rgb), 0.1));
        border-radius: 12px;
        border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
    }

    .valuation-label {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .valuation-value {
        font-size: 28px;
        font-weight: 700;
        color: var(--accent-primary);
    }

    .valuation-table {
        overflow-x: auto;
    }

    .valuation-table table {
        width: 100%;
        border-collapse: collapse;
    }

    .valuation-table th,
    .valuation-table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
    }

    .valuation-table th {
        background: var(--bg-tertiary);
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 12px;
        text-transform: uppercase;
    }

    .valuation-table td {
        color: var(--text-primary);
    }

    /* Table Turn Time Styles */
    .table-turn-summary {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 20px;
        padding: 20px 0;
    }

    .table-turn-stat {
        text-align: center;
        padding: 16px;
        background: var(--bg-secondary);
        border-radius: 12px;
        border: 1px solid var(--border-color);
    }

    .table-turn-stat.highlight {
        background: linear-gradient(135deg, var(--brand-primary-light), rgba(var(--brand-secondary-rgb), 0.15));
        border-color: var(--primary-color);
    }

    .table-turn-stat .stat-value {
        display: block;
        font-size: 24px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 4px;
    }

    .table-turn-stat.highlight .stat-value {
        color: var(--primary-color);
    }

    .table-turn-stat .stat-label {
        font-size: 12px;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .section-stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }

    .section-stat-card {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 16px;
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-color);
    }

    .section-name {
        font-weight: 600;
        color: var(--text-primary);
    }

    .section-count {
        font-size: 12px;
        color: var(--text-secondary);
    }

    .section-metrics {
        display: flex;
        justify-content: space-between;
    }

    .section-metric {
        text-align: center;
    }

    .section-metric .metric-value {
        display: block;
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .section-metric .metric-label {
        font-size: 11px;
        color: var(--text-secondary);
    }

    .hour-bar.sessions-bar {
        background: linear-gradient(180deg, var(--brand-secondary), var(--brand-primary));
    }

    /* Hourly Chart Styles */
    .hourly-chart {
        padding: 10px 0;
    }

    .hours-container {
        display: flex;
        align-items: flex-end;
        gap: 2px;
        height: 220px;
        overflow-x: auto;
        padding-bottom: 10px;
    }

    .hour-column {
        flex: 1;
        min-width: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
    }

    .hour-value {
        font-size: 10px;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hour-bar-wrapper {
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0 4px;
    }

    .hour-bar {
        width: 100%;
        background: linear-gradient(180deg, #10b981 0%, #059669 100%);
        border-radius: 4px 4px 0 0;
        min-height: 2px;
        transition: height 0.3s ease;
    }

    .hour-bar:hover {
        opacity: 0.85;
    }

    .hour-label {
        font-size: 9px;
        color: var(--text-secondary);
        margin-top: 4px;
        white-space: nowrap;
    }

    .hour-column.business .hour-label {
        color: var(--text-primary);
        font-weight: 500;
    }

    .table-performance-grid {
        overflow-x: auto;
    }

    .performance-table {
        width: 100%;
        border-collapse: collapse;
    }

    .performance-table th,
    .performance-table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
    }

    .performance-table th {
        background: var(--bg-tertiary);
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 12px;
        text-transform: uppercase;
    }

    .performance-table td {
        color: var(--text-primary);
    }

    .performance-table tr:hover {
        background: var(--bg-secondary);
    }

    .empty-hint {
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 8px;
    }

    /* Kitchen Tab Styles */
    .cook-times-table-container {
        max-height: 400px;
        overflow-y: auto;
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
    }

    .data-table th,
    .data-table td {
        padding: 10px 12px;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
    }

    .data-table th {
        background: var(--bg-tertiary);
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 12px;
        text-transform: uppercase;
        position: sticky;
        top: 0;
    }

    .data-table tbody tr:hover {
        background: var(--bg-secondary);
    }

    .data-table .item-name {
        font-weight: 500;
    }

    .data-table .time-value {
        font-family: monospace;
        color: var(--text-secondary);
    }

    .data-table .variance {
        font-weight: 500;
    }

    .data-table .variance.over {
        color: #ef4444;
    }

    .data-table .variance.under {
        color: #10b981;
    }

    .data-table .variance.ontime {
        color: var(--text-muted);
    }

    .data-table .count-value {
        color: var(--text-muted);
    }

    .kitchen-summary-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .summary-stat.kitchen {
        text-align: center;
        padding: 20px;
        background: var(--bg-secondary);
        border-radius: 8px;
    }

    .summary-stat.kitchen .summary-value {
        display: block;
        font-size: 28px;
        font-weight: 700;
        color: var(--accent-primary);
        margin-bottom: 4px;
    }

    .summary-stat.kitchen .summary-label {
        font-size: 12px;
        color: var(--text-secondary);
        text-transform: uppercase;
    }

    .hour-bar.kitchen-bar {
        background: linear-gradient(135deg, #f59e0b, #ef4444);
    }

    /* Waste Report Styles */
    .waste-summary-row {
        display: flex;
        gap: 16px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .waste-stat {
        flex: 1;
        min-width: 120px;
        text-align: center;
        padding: 16px;
        background: var(--bg-secondary);
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }

    .waste-stat.total {
        background: var(--bg-tertiary);
        border-color: var(--accent-primary);
    }

    .waste-value {
        display: block;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .waste-value.waste { color: #f59e0b; }
    .waste-value.damage { color: #ef4444; }
    .waste-value.theft { color: #dc2626; }
    .waste-value.expired { color: var(--brand-primary); }

    .waste-label {
        font-size: 11px;
        color: var(--text-secondary);
        text-transform: uppercase;
    }

    .waste-table-container {
        max-height: 400px;
        overflow-y: auto;
    }

    .data-table .reason {
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
    }

    .data-table .reason.waste { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
    .data-table .reason.damage { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
    .data-table .reason.theft { background: rgba(220, 38, 38, 0.15); color: #dc2626; }
    .data-table .reason.expired { background: var(--brand-primary-light); color: var(--brand-primary); }
    .data-table .reason.physicalcount { background: rgba(16, 185, 129, 0.15); color: #10b981; }
    .data-table .reason.transfer { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
    .data-table .reason.other { background: rgba(107, 114, 128, 0.15); color: #6b7280; }

    .data-table .qty-change.negative { color: #ef4444; }
    .data-table .qty-change.positive { color: #10b981; }

    .data-table .cost-impact {
        font-weight: 500;
        color: #ef4444;
    }

    .data-table .notes {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--text-secondary);
    }

    .data-table .adjusted-by {
        color: var(--text-muted);
        font-size: 12px;
    }

    @media (max-width: 768px) {
        .kitchen-summary-stats {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .waste-summary-row {
            flex-direction: column;
        }
        
        .waste-stat {
            min-width: 100%;
        }
    }