body { font-family: 'Vazirmatn', sans-serif; }
html[lang="en"] body { font-family: 'Inter', sans-serif; } /* Add English font */
.chart-container { position: relative; height: 50vh; width: 100%; max-width: 1200px; margin: auto; }
.donut-chart-container { position: relative; height: 40vh; max-height: 400px; width: 100%; max-width: 400px; margin: auto; }
.price-card { position: relative; }
.loader {
    border: 4px solid #4b5563;
    border-top: 4px solid #22d3ee;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.chart-filter-btn {
    border-radius: 0.5rem;
    background-color: #e5e7eb;
    color: #374151;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    border: none;
    cursor: pointer;
}
.chart-filter-btn:hover {
    background-color: #d1d5db;
}
.chart-filter-btn.active {
    background-color: #2563eb;
    color: #ffffff;
}
.dark .chart-filter-btn {
    background-color: #374151;
    color: #d1d5db;
}
.dark .chart-filter-btn:hover {
    background-color: #4b5563;
}
.dark .chart-filter-btn.active {
    background-color: #3b82f6;
    color: #ffffff;
}

.refresh-icon.spinning {
    animation: spin 1s linear;
}
/* استایل های جدید برای مودال شخصی سازی */
.card-manage-item {
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}
.card-manage-item.visible {
    background-color: #e0f2fe; /* light-blue-100 */
    border-color: #3b82f6; /* blue-500 */
}
.card-manage-item .order-badge {
    background-color: #3b82f6;
    color: white;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.75rem;
}
/* استایل حالت شب */
.dark .card-manage-item {
    border-color: #4b5563;
}
.dark .card-manage-item.visible {
    background-color: #1e3a8a;
    border-color: #3b82f6;
}
/* استایل انتخابگر پوسته */
.theme-btn.active, .lang-btn.active {
    background-color: #ffffff;
    color: #1f2937;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.dark .theme-btn.active, .dark .lang-btn.active {
    background-color: #4b5563;
    color: #f9fafb;
}
.date-input {
    direction: ltr;
    text-align: center;
    font-family: monospace;
}


/* CSS for Price Update Effects */
@keyframes flash-up-effect {
  0% { background-color: rgba(22, 163, 74, 0); }
  50% { background-color: rgba(22, 163, 74, 0.5); }
  100% { background-color: rgba(22, 163, 74, 0); }
}

@keyframes flash-down-effect {
  0% { background-color: rgba(220, 38, 38, 0); }
  50% { background-color: rgba(220, 38, 38, 0.5); }
  100% { background-color: rgba(220, 38, 38, 0); }
}

@keyframes flash-neutral-effect {
  0% { background-color: rgba(107, 114, 128, 0); }
  50% { background-color: rgba(107, 114, 128, 0.4); }
  100% { background-color: rgba(107, 114, 128, 0); }
}

.price-container {
  padding: 4px 8px;
  border-radius: 8px;
  transition: background-color 0.5s ease;
}

.price-container.flash-up {
  animation: flash-up-effect 1.5s ease-out;
}

.price-container.flash-down {
  animation: flash-down-effect 1.5s ease-out;
}

.price-container.flash-neutral {
  animation: flash-neutral-effect 1.5s ease-out;
}

.million-suffix {
    font-size: 0.8rem; /* text-xs */
    font-weight: 600;  /* font-normal */
    margin: 0 0rem;
    align-self: flex-bottom;
    padding-bottom: 0rem;
	color: #808080;
}


@media (max-width: 640px) {
  #tx-year,
  #tx-month,
  #tx-day {
    /*
      !important rule gives this style the highest priority,
      overriding any other conflicting styles from frameworks.
    */
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: menulist !important;
    
    /* Also, ensure the background is not being altered by Tailwind.
      The default background often includes the native dropdown arrow.
    */
    background-image: none !important;
  }
}


.sort-btn.active {
    background-color: #3b82f6; /* رنگ آبی */
    color: white;
    border-color: #3b82f6;
}

/* استایل برای حالت دارک */
.dark .sort-btn.active {
    background-color: #2563eb;
    border-color: #2563eb;
}


/* Wrapper for the refresh button to handle positioning */
#refreshBtn {
    position: relative; /* Essential for positioning the SVG inside */
    overflow: hidden;   /* Keeps the corners neat */
}

/* The SVG that will contain our animated border */
.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicks to go through to the button */
}

/* The rectangle inside the SVG that acts as the border */

/* ✅ کد نهایی و قطعی برای انیمیشن */
/* ✅ کد نهایی و ساده‌شده برای انیمیشن (بدون چرخش) */
.progress-ring__rect {
    fill: transparent;
    stroke: #3b82f6;
    stroke-width: 3;
    /* این مقادیر باید با viewBox و ابعاد rect در HTML هماهنگ باشند */
    stroke-dasharray: 254; 
    stroke-dashoffset: 254;
}

/* The class that triggers the animation */
#refreshBtn.is-counting .progress-ring__rect {
    /* We use a transition instead of an animation for easier control */
    transition: stroke-dashoffset 60s linear;
}

/* Style for the 'Select All / Deselect All' buttons */
.select-all-btn {
    font-size: 0.75rem; /* 12px */
    padding: 0.125rem 0.5rem; /* 2px 8px */
    border-radius: 0.5rem; /* rounded-lg */
    background-color: #E5E7EB; /* bg-gray-200 */
    color: #374151; /* text-gray-700 */
    font-weight: 600; /* font-semibold */
    transition: background-color 0.2s;
}
.dark .select-all-btn {
    background-color: #4B5563; /* dark:bg-gray-600 */
    color: #D1D5DB; /* dark:text-gray-300 */
}
.select-all-btn:hover {
    background-color: #D1D5DB; /* hover:bg-gray-300 */
}
.dark .select-all-btn:hover {
    background-color: #6B7280; /* dark:hover:bg-gray-500 */
}

/* ========================================= */
/* New Styles for All Switchers       */
/* ========================================= */

/* Container for the switcher buttons */
.switcher-container {
    display: flex;
    width: 100%;
    background-color: #E5E7EB; /* gray-200 */
    padding: 0.25rem; /* p-1 */
    border-radius: 0.5rem; /* rounded-lg */
}

/* Dark mode styles for the container */
.dark .switcher-container {
    background-color: #374151; /* dark:bg-gray-700 */
}

/* Individual buttons inside the switcher */
.switcher-btn {
    flex: 1; /* Make buttons take equal width */
    border: none;
    padding: 0.25rem 0.5rem; /* py-1 px-2 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    border-radius: 0.375rem; /* rounded-md */
    color: #4B5563; /* gray-600 */
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Dark mode styles for the buttons */
.dark .switcher-btn {
    color: #D1D5DB; /* dark:text-gray-300 */
}

/* The ACTIVE state for a selected button */
.switcher-btn.active {
    background-color: #FFFFFF; /* white */
    color: #111827; /* gray-900 */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* Dark mode styles for the ACTIVE button */
.dark .switcher-btn.active {
    background-color: #4B5563; /* dark:bg-gray-600 */
    color: #FFFFFF; /* white */
}

/* Styles for Show More/Less functionality in settings */
.card-item-list .card-manage-item.hidden {
    display: none;
}

.show-more-btn {
    width: 100%;
    text-align: center;
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #3b82f6; /* text-blue-600 */
    margin-top: 0.5rem; /* mt-2 */
    padding: 0.25rem; /* p-1 */
    cursor: pointer;
    border-radius: 0.375rem; /* rounded-md */
    transition: background-color 0.2s;
}

.dark .show-more-btn {
    color: #60a5fa; /* dark:text-blue-400 */
}

.show-more-btn:hover {
    background-color: #eff6ff; /* hover:bg-blue-50 */
}

.dark .show-more-btn:hover {
    background-color: #1e293b; /* dark:hover:bg-slate-800 */
}

/* ========================================= */
/* Responsive Font Size for Main Title       */
/* ========================================= */

/* اندازه پیش‌فرض برای زبان انگلیسی */
html[lang="en"] h1[data-i18n="header_title"] {
    font-size: 1.3rem; /* text-3xl */
}
@media (min-width: 640px) {
    html[lang="en"] h1[data-i18n="header_title"] {
        font-size: 1.6rem; /* sm:text-4xl */
    }
}
/* برای جلوگیری از دو خطی شدن در موبایل */
@media (max-width: 500px) {
    html[lang="en"] h1[data-i18n="header_title"] {
        font-size: 1rem; /* text-2xl */
    }
}


/* اندازه بزرگتر برای زبان فارسی */
html[lang="fa"] h1[data-i18n="header_title"] {
    font-size: 1.8rem; /* text-4xl */
}
@media (min-width: 640px) {
    html[lang="fa"] h1[data-i18n="header_title"] {
        font-size: 2.5rem; /* sm:text-5xl */
    }
}