:root,
[data-bs-theme="light"] {
    --bs-blue: #5D87FF;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #FA896B;
    --bs-orange: #fd7e14;
    --bs-yellow: #FFAE1F;
    --bs-green: #13DEB9;
    --bs-teal: #20c997;
    --bs-cyan: #539BFF;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #2A3547;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #F6F9FC;
    --bs-gray-200: #EAEFF4;
    --bs-gray-300: #DFE5EF;
    --bs-gray-400: #7C8FAC;
    --bs-gray-500: #5A6A85;
    --bs-gray-600: #2A3547;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #5D87FF;
    --bs-secondary: #49BEFF;
    --bs-success: #13DEB9;
    --bs-info: #539BFF;
    --bs-warning: #FFAE1F;
    --bs-danger: #FA896B;
    --bs-light: #F6F9FC;
    --bs-dark: #2A3547;
    --bs-muted: #5A6A85;
    --bs-indigo: #6610f2;
    --bs-light-primary: #ECF2FF;
    --bs-light-secondary: #E8F7FF;
    --bs-light-info: #EBF3FE;
    --bs-light-success: #E6FFFA;
    --bs-light-warning: #FEF5E5;
    --bs-light-danger: #FBF2EF;
    --bs-light-indigo: #EBF3FE;
    --bs-dark-light: #2A3547;
    --bs-light-gray: #F6F9FC;
    --bs-primary-rgb: 93, 135, 255;
    --bs-secondary-rgb: 73, 190, 255;
    --bs-success-rgb: 19, 222, 185;
    --bs-info-rgb: 83, 155, 255;
    --bs-warning-rgb: 255, 174, 31;
    --bs-danger-rgb: 250, 137, 107;
    --bs-light-rgb: 246, 249, 252;
    --bs-dark-rgb: 42, 53, 71;
    --bs-muted-rgb: 90, 106, 133;
    --bs-indigo-rgb: 102, 16, 242;
    --bs-light-primary-rgb: 236, 242, 255;
    --bs-light-secondary-rgb: 232, 247, 255;
    --bs-light-info-rgb: 235, 243, 254;
    --bs-light-success-rgb: 230, 255, 250;
    --bs-light-warning-rgb: 254, 245, 229;
    --bs-light-danger-rgb: 251, 242, 239;
    --bs-light-indigo-rgb: 235, 243, 254;
    --bs-dark-light-rgb: 42, 53, 71;
    --bs-light-gray-rgb: 246, 249, 252;
    --bs-primary-text: #4a6ccc;
    --bs-secondary-text: #2A3547;
    --bs-success-text: #0fb294;
    --bs-info-text: #325d99;
    --bs-warning-text: #996813;
    --bs-danger-text: #c86e56;
    --bs-light-text: #2A3547;
    --bs-dark-text: #495057;
    --bs-primary-bg-subtle: #dfe7ff;
    --bs-secondary-bg-subtle: #F6F9FC;
    --bs-success-bg-subtle: #d0f8f1;
    --bs-info-bg-subtle: #ddebff;
    --bs-warning-bg-subtle: #ffefd2;
    --bs-danger-bg-subtle: #fee7e1;
    --bs-light-bg-subtle: #fbfcfe;
    --bs-dark-bg-subtle: #7C8FAC;
    --bs-primary-border-subtle: #becfff;
    --bs-secondary-border-subtle: #EAEFF4;
    --bs-success-border-subtle: #a1f2e3;
    --bs-info-border-subtle: #bad7ff;
    --bs-warning-border-subtle: #ffdfa5;
    --bs-danger-border-subtle: #fdd0c4;
    --bs-light-border-subtle: #EAEFF4;
    --bs-dark-border-subtle: #5A6A85;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 90, 106, 133;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-font-sans-serif: "vazir", "Plus Jakarta Sans", sans-serif;
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.875rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #5A6A85;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: rgba(90, 106, 133, 0.75);
    --bs-secondary-color-rgb: 90, 106, 133;
    --bs-secondary-bg: #EAEFF4;
    --bs-secondary-bg-rgb: 234, 239, 244;
    --bs-tertiary-color: rgba(90, 106, 133, 0.5);
    --bs-tertiary-color-rgb: 90, 106, 133;
    --bs-tertiary-bg: #F6F9FC;
    --bs-tertiary-bg-rgb: 246, 249, 252;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-heading-color: #2A3547;
    --bs-link-color: #5D87FF;
    --bs-link-color-rgb: 93, 135, 255;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #4a6ccc;
    --bs-link-hover-color-rgb: 74, 108, 204;
    --bs-code-color: #d63384;
    --bs-highlight-bg: #ffefd2;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #ebf1f6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 7px;
    --bs-border-radius-sm: 5px;
    --bs-border-radius-lg: 15px;
    --bs-border-radius-xl: 12px;
    --bs-border-radius-2xl: 2rem;
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(var(--bs-body-color-rgb), 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(var(--bs-body-color-rgb), 0.175);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(var(--bs-body-color-rgb), 0.075);
    --bs-emphasis-color: #000;
    --bs-form-control-bg: var(--bs-body-bg);
    --bs-form-control-disabled-bg: var(--bs-secondary-bg);
    --bs-highlight-bg: #ffefd2;
    --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px;
}

.table {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: transparent;
    --bs-table-border-color: #ebf1f6;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg: #EAEFF4;
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-hover-bg: #F6F9FC;
    color: var(--bs-table-color);
}

.table> :not(caption)>*>* {
    padding: 16px 16px;
    background-color: var(--bs-table-bg);
    border-bottom-width: var(--bs-border-width);
    -webkit-box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.table-dark {
    --bs-table-color: #fff;
    --bs-table-bg: #2A3547;
    --bs-table-border-color: #3f4959;
    --bs-table-striped-bg: #353f50;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #3f4959;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #3a4455;
    --bs-table-hover-color: #fff;
    color: var(--bs-table-color);
}



.card {
    --bs-card-spacer-y: 30px;
    --bs-card-spacer-x: 30px;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color: #2A3547;
    --bs-card-subtitle-color: #2A3547;
    --bs-card-border-width: 0px;
    --bs-card-border-color: #ebf1f6;
    --bs-card-border-radius: 7px;
    --bs-card-box-shadow: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px, rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
    --bs-card-inner-border-radius: 7px;
    --bs-card-cap-padding-y: 15px;
    --bs-card-cap-padding-x: 30px;
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 12px;
    word-wrap: break-word;
}


.alert {
    --bs-alert-bg: transparent;
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 1rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-color: inherit;
    --bs-alert-border-color: transparent;
    --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
    --bs-alert-border-radius: 7px;
    --bs-alert-link-color: inherit;
    position: relative;
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: var(--bs-alert-border);
    border-radius: var(--bs-alert-border-radius);
}

.alert-light {
    --bs-alert-color: var(--bs-light-text);
    --bs-alert-bg: var(--bs-light-bg-subtle);
    --bs-alert-border-color: var(--bs-light-border-subtle);
    --bs-alert-link-color: var(--bs-light-text);
}

.alert-secondary {
    --bs-alert-color: var(--bs-secondary-text);
    --bs-alert-bg: var(--bs-secondary-bg-subtle);
    --bs-alert-border-color: var(--bs-secondary-border-subtle);
    --bs-alert-link-color: var(--bs-secondary-text);
}

.alert-warning {
    --bs-alert-color: var(--bs-warning-text);
    --bs-alert-bg: var(--bs-warning-bg-subtle);
    --bs-alert-border-color: var(--bs-warning-border-subtle);
    --bs-alert-link-color: var(--bs-warning-text);
}

.bg-light {
    --bs-bg-opacity: 1;
    background-color: #fbfcfe !important;
}

.bg-secondary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

.bg-warning {
    --bs-bg-opacity: 1;
    background-color: #ffefd2 !important;
}

.h5,
h5 {
    font-size: 1.09375rem;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color, inherit);
}

text-danger {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.myTable {
    height: 650px;
    overflow-y: auto;
    z-index: -0;

}

.firstCol {
    position: sticky;
    right: -1px;
    z-index: 2;
}

.secondCol {
    position: sticky;
    right: 23px;
    z-index: 1;
}

body {
    font-family: 'Vazirmatn', sans-serif;
    background-color: #f8f9fa;
    overflow-x: hidden;
}

.dashboard-header {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-icon {
    font-size: 2rem;
    opacity: 0.8;
}

.user-code {
    color: #6c757d;
    font-size: 0.85rem;
}

.medal-1 {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(0, 0, 0, 1);
    /* text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); */
}

.medal-2 {
    color: #c0c0c0;
    text-shadow: 0 0 10px rgba(192, 192, 192, 0.5);
}

.medal-3 {
    color: #cd7f32;
    text-shadow: 0 0 10px rgba(205, 127, 50, 0.5);
}

.top-performers {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.performer-card {
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #dee2e6;
    transition: all 0.3s;
}

.performer-card:hover {
    background-color: #f8f9fa;
    transform: scale(1.02);
}

.medal {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}



.weekly-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.stat-label {
    font-size: 0.7rem;
    color: #6c757d;
    margin-bottom: 1px;
}


/* Loading state */
.loading-cell {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Dashboard Stats Styles */
.stats-overview {
    margin-top: 1rem;
}

.dashboard-stat {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 12px;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.stat-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.stat-icon-wrapper.purple {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.stat-icon-wrapper.blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.stat-icon-wrapper.green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.stat-icon-wrapper.orange {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: #1e293b;
}

.stat-label {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0.25rem 0;
}

.stat-detail {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}

@media (max-width: 768px) {
    .dashboard-stat {
        padding: 1rem;
    }

    .stat-icon-wrapper {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .stat-value {
        font-size: 1.25rem;
    }
}

.period-indicator {
    background: linear-gradient(135deg, #6366f1 0%, #0972f3 100%);
    padding: 1.5rem;
    border-radius: 12px;
    color: white;
    text-align: center;
    margin-top: -1rem;
}

.period-indicator h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

@media (max-width: 768px) {
    .period-indicator h2 {
        font-size: 1.25rem;
    }
}

select option:disabled {
    background-color: #f0f0f0;
    color: #999;
    font-style: italic;
    cursor: not-allowed;
    /* Add a subtle pattern to indicate disabled state */
    background-image: linear-gradient(45deg,
            rgba(0, 0, 0, 0.05) 25%,
            transparent 25%,
            transparent 50%,
            rgba(0, 0, 0, 0.05) 50%,
            rgba(0, 0, 0, 0.05) 75%,
            transparent 75%,
            transparent);
    background-size: 4px 4px;
}

/* Style for the select element itself */
select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
}

/* Hover effect for non-disabled options */
select option:not(:disabled):hover {
    background-color: #e8f0fe;
}

/* When the select is opened, highlight the current selection */
select option:checked {
    background-color: #1a73e8;
    color: white;
}

.stat-unit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6em;
    color: #666;
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 4px;
}

.stat-unit[data-unit="minutes"]::after {
    content: "دقیقه";
}

.stat-unit[data-unit="hours"]::after {
    content: "ساعت";
}

.stat-unit[data-unit="times"]::after {
    content: "بار";
}

.stat-unit[data-unit="percent"]::after {
    content: "%";
}

.stat-unit[data-unit="toman"]::after {
    content: "تومان";
}

/* Add hover effect */
.stat-unit:hover {
    background-color: #eef2ff;
    color: #4f46e5;
    transition: all 0.2s ease;
}

/* Add different colors based on context */
.stat-unit.positive {
    background-color: #ecfdf5;
    color: #059669;
}

.stat-unit.negative {
    background-color: #fef2f2;
    color: #dc2626;
}

.chart-container {
    position: relative;
    margin: 20px auto;
    padding: 10px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .chart-container {
        margin: 10px auto;
        padding: 5px;
    }
}

/* To Navigation Style */
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.codrops-top {
    background: #fff;
    background: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    width: 100%;
    font-size: 0.69em;
    line-height: 2.2;
    /* position: fixed; */
    z-index: 250;
}

.codrops-top a {
    text-decoration: none;
    padding: 0 1em;
    letter-spacing: 0.1em;
    display: inline-block;
}

.codrops-top a:hover {
    background: rgba(255, 255, 255, 0.95);
}

.codrops-top span.right {
    float: left;
}

.codrops-top span.right a {
    float: right;
    display: block;
}

.codrops-icon:before {
    font-family: 'codropsicons';
    margin: 0 4px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
    content: "\e001";
}

.codrops-icon-prev:before {
    content: "\e004";
}