[x-cloak] {
    display: none;
}

:root {
    --theme-primary: #1f93ff;
    --theme-primary-hover: #2774bd;
    --theme-quick-menu-bg: #ffffff;
    --theme-main-menu-bg: #f8fafc;
    --theme-body-bg: #f3f4f6;

    /* Success */
    --theme-success: #28a745;
    --theme-success-hover: rgb(22, 128, 22);

    /* Danger */
    --theme-danger: #be0e0e;
    --theme-danger-hover: rgb(175, 29, 29);

    /* Warning */
    --theme-warning: #f59e0b;
    --theme-warning-hover: #d97706;

    /* Info */
    --theme-info: #06b6d4;
    --theme-info-hover: #0891b2;
    
    /* Slate */
    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;
    --color-slate-950: #020617;

    /* Gray */
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-gray-950: #030712;

    /* Zinc */
    --color-zinc-50: #fafafa;
    --color-zinc-100: #f4f4f5;
    --color-zinc-200: #e4e4e7;
    --color-zinc-300: #d4d4d8;
    --color-zinc-400: #a1a1aa;
    --color-zinc-500: #71717a;
    --color-zinc-600: #52525b;
    --color-zinc-700: #3f3f46;
    --color-zinc-800: #27272a;
    --color-zinc-900: #18181b;
    --color-zinc-950: #09090b;

    /* Neutral */
    --color-neutral-50: #fafafa;
    --color-neutral-100: #f5f5f5;
    --color-neutral-200: #e5e5e5;
    --color-neutral-300: #d4d4d4;
    --color-neutral-400: #a3a3a3;
    --color-neutral-500: #737373;
    --color-neutral-600: #525252;
    --color-neutral-700: #404040;
    --color-neutral-800: #262626;
    --color-neutral-900: #171717;
    --color-neutral-950: #0a0a0a;

    /* Stone */
    --color-stone-50: #fafaf9;
    --color-stone-100: #f5f5f4;
    --color-stone-200: #e7e5e4;
    --color-stone-300: #d6d3d1;
    --color-stone-400: #a8a29e;
    --color-stone-500: #78716c;
    --color-stone-600: #57534e;
    --color-stone-700: #44403c;
    --color-stone-800: #292524;
    --color-stone-900: #1c1917;
    --color-stone-950: #0c0a09;

    /* Red */
    --color-red-50: #fef2f2;
    --color-red-100: #fee2e2;
    --color-red-200: #fecaca;
    --color-red-300: #fca5a5;
    --color-red-400: #f87171;
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;
    --color-red-700: #b91c1c;
    --color-red-800: #991b1b;
    --color-red-900: #7f1d1d;
    --color-red-950: #450a0a;

    /* Orange */
    --color-orange-50: #fff7ed;
    --color-orange-100: #ffedd5;
    --color-orange-200: #fed7aa;
    --color-orange-300: #fdba74;
    --color-orange-400: #fb923c;
    --color-orange-500: #f97316;
    --color-orange-600: #ea580c;
    --color-orange-700: #c2410c;
    --color-orange-800: #9a3412;
    --color-orange-900: #7c2d12;
    --color-orange-950: #431407;

    /* Amber */
    --color-amber-50: #fffbeb;
    --color-amber-100: #fef3c7;
    --color-amber-200: #fde68a;
    --color-amber-300: #fcd34d;
    --color-amber-400: #fbbf24;
    --color-amber-500: #f59e42;
    --color-amber-600: #d97706;
    --color-amber-700: #b45309;
    --color-amber-800: #92400e;
    --color-amber-900: #78350f;
    --color-amber-950: #451a03;

    /* Yellow */
    --color-yellow-50: #fefce8;
    --color-yellow-100: #fef9c3;
    --color-yellow-200: #fef08a;
    --color-yellow-300: #fde047;
    --color-yellow-400: #facc15;
    --color-yellow-500: #eab308;
    --color-yellow-600: #ca8a04;
    --color-yellow-700: #a16207;
    --color-yellow-800: #854d0e;
    --color-yellow-900: #713f12;
    --color-yellow-950: #422006;

    /* Lime */
    --color-lime-50: #f7fee7;
    --color-lime-100: #ecfccb;
    --color-lime-200: #d9f99d;
    --color-lime-300: #bef264;
    --color-lime-400: #a3e635;
    --color-lime-500: #84cc16;
    --color-lime-600: #65a30d;
    --color-lime-700: #4d7c0f;
    --color-lime-800: #3f6212;
    --color-lime-900: #365314;
    --color-lime-950: #1a2e05;

    /* Green */
    --color-green-50: #f0fdf4;
    --color-green-100: #dcfce7;
    --color-green-200: #bbf7d0;
    --color-green-300: #86efac;
    --color-green-400: #4ade80;
    --color-green-500: #22c55e;
    --color-green-600: #16a34a;
    --color-green-700: #15803d;
    --color-green-800: #166534;
    --color-green-900: #14532d;
    --color-green-950: #052e16;

    /* Emerald */
    --color-emerald-50: #ecfdf5;
    --color-emerald-100: #d1fae5;
    --color-emerald-200: #a7f3d0;
    --color-emerald-300: #6ee7b7;
    --color-emerald-400: #34d399;
    --color-emerald-500: #10b981;
    --color-emerald-600: #059669;
    --color-emerald-700: #047857;
    --color-emerald-800: #065f46;
    --color-emerald-900: #064e3b;
    --color-emerald-950: #022c22;

    /* Teal */
    --color-teal-50: #f0fdfa;
    --color-teal-100: #ccfbf1;
    --color-teal-200: #99f6e4;
    --color-teal-300: #5eead4;
    --color-teal-400: #2dd4bf;
    --color-teal-500: #14b8a6;
    --color-teal-600: #0d9488;
    --color-teal-700: #0f766e;
    --color-teal-800: #115e59;
    --color-teal-900: #134e4a;
    --color-teal-950: #042f2e;

    /* Cyan */
    --color-cyan-50: #ecfeff;
    --color-cyan-100: #cffafe;
    --color-cyan-200: #a5f3fc;
    --color-cyan-300: #67e8f9;
    --color-cyan-400: #22d3ee;
    --color-cyan-500: #06b6d4;
    --color-cyan-600: #0891b2;
    --color-cyan-700: #0e7490;
    --color-cyan-800: #155e75;
    --color-cyan-900: #164e63;
    --color-cyan-950: #083344;

    /* Sky */
    --color-sky-50: #f0f9ff;
    --color-sky-100: #e0f2fe;
    --color-sky-200: #bae6fd;
    --color-sky-300: #7dd3fc;
    --color-sky-400: #38bdf8;
    --color-sky-500: #0ea5e9;
    --color-sky-600: #0284c7;
    --color-sky-700: #0369a1;
    --color-sky-800: #075985;
    --color-sky-900: #0c4a6e;
    --color-sky-950: #082f49;

    /* Blue */
    --color-blue-50: #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-200: #bfdbfe;
    --color-blue-300: #93c5fd;
    --color-blue-400: #60a5fa;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    --color-blue-800: #1e40af;
    --color-blue-900: #1e3a8a;
    --color-blue-950: #172554;

    /* Indigo */
    --color-indigo-50: #eef2ff;
    --color-indigo-100: #e0e7ff;
    --color-indigo-200: #c7d2fe;
    --color-indigo-300: #a5b4fc;
    --color-indigo-400: #818cf8;
    --color-indigo-500: #6366f1;
    --color-indigo-600: #4f46e5;
    --color-indigo-700: #4338ca;
    --color-indigo-800: #3730a3;
    --color-indigo-900: #312e81;
    --color-indigo-950: #1e1b4b;

    /* Violet */
    --color-violet-50: #f5f3ff;
    --color-violet-100: #ede9fe;
    --color-violet-200: #ddd6fe;
    --color-violet-300: #c4b5fd;
    --color-violet-400: #a78bfa;
    --color-violet-500: #8b5cf6;
    --color-violet-600: #7c3aed;
    --color-violet-700: #6d28d9;
    --color-violet-800: #5b21b6;
    --color-violet-900: #4c1d95;
    --color-violet-950: #2e1065;

    /* Purple */
    --color-purple-50: #faf5ff;
    --color-purple-100: #f3e8ff;
    --color-purple-200: #e9d5ff;
    --color-purple-300: #d8b4fe;
    --color-purple-400: #c084fc;
    --color-purple-500: #a855f7;
    --color-purple-600: #9333ea;
    --color-purple-700: #7e22ce;
    --color-purple-800: #6d28d9;
    --color-purple-900: #581c87;
    --color-purple-950: #3b0764;

    /* Fuchsia */
    --color-fuchsia-50: #fdf4ff;
    --color-fuchsia-100: #fae8ff;
    --color-fuchsia-200: #f5d0fe;
    --color-fuchsia-300: #f0abfc;
    --color-fuchsia-400: #e879f9;
    --color-fuchsia-500: #d946ef;
    --color-fuchsia-600: #c026d3;
    --color-fuchsia-700: #a21caf;
    --color-fuchsia-800: #86198f;
    --color-fuchsia-900: #701a75;
    --color-fuchsia-950: #4a044e;

    /* Pink */
    --color-pink-50: #fdf2f8;
    --color-pink-100: #fce7f3;
    --color-pink-200: #fbcfe8;
    --color-pink-300: #f9a8d4;
    --color-pink-400: #f472b6;
    --color-pink-500: #ec4899;
    --color-pink-600: #db2777;
    --color-pink-700: #be185d;
    --color-pink-800: #9d174d;
    --color-pink-900: #831843;
    --color-pink-950: #500724;

    /* Rose */
    --color-rose-50: #fff1f2;
    --color-rose-100: #ffe4e6;
    --color-rose-200: #fecdd3;
    --color-rose-300: #fda4af;
    --color-rose-400: #fb7185;
    --color-rose-500: #f43f5e;
    --color-rose-600: #e11d48;
    --color-rose-700: #be123c;
    --color-rose-800: #9f1239;
    --color-rose-900: #881337;
    --color-rose-950: #4c0519;

    /* White/Black */
    --color-white: #ffffff;
    --color-black: #000000;
}

.text-primary {
    color: var(--theme-primary);
}

body {
    font-family: 'Vazirmatn FD NL', sans-serif;
    background-color: var(--theme-body-bg);
}

.text-theme {
    color: var(--theme-primary);
}

.bg-theme {
    background-color: var(--theme-primary);
}

.hover-bg-theme:hover {
    background-color: var(--theme-primary-hover);
}

.bg-quick-menu {
    background-color: var(--theme-quick-menu-bg);
}

.bg-main-menu {
    background-color: var(--theme-main-menu-bg);
}

.bg-success {
    background-color: var(--theme-success);
}

.bg-success-hover {
    background-color: var(--theme-success-hover);
}

.text-success {
    color: var(--theme-success);
}

.text-success-hover {
    color: var(--theme-success-hover);
}

.border-success {
    border-color: var(--theme-success);
}

.border-success-hover {
    border-color: var(--theme-success-hover);
}

/* Danger */
.bg-danger {
    background-color: var(--theme-danger);
}

.bg-danger-hover {
    background-color: var(--theme-danger-hover);
}

.text-danger {
    color: var(--theme-danger);
}

.text-danger-hover {
    color: var(--theme-danger-hover);
}

.border-danger {
    border-color: var(--theme-danger);
}

.border-danger-hover {
    border-color: var(--theme-danger-hover);
}

/* Warning */
.bg-warning {
    background-color: var(--theme-warning);
}

.bg-warning-hover {
    background-color: var(--theme-warning-hover);
}

.text-warning {
    color: var(--theme-warning);
}

.text-warning-hover {
    color: var(--theme-warning-hover);
}

.border-warning {
    border-color: var(--theme-warning);
}

.border-warning-hover {
    border-color: var(--theme-warning-hover);
}

/* Info */
.bg-info {
    background-color: var(--theme-info);
}

.bg-info-hover {
    background-color: var(--theme-info-hover);
}

.text-info {
    color: var(--theme-info);
}

.text-info-hover {
    color: var(--theme-info-hover);
}

.border-info {
    border-color: var(--theme-info);
}

.border-info-hover {
    border-color: var(--theme-info-hover);
}

.hover\:bg-primary-hover:hover {
    background-color: var(--theme-primary-hover);
}

.hover\:bg-success-hover:hover {
    background-color: var(--theme-success-hover);
}

.hover\:bg-danger-hover:hover {
    background-color: var(--theme-danger-hover);
}

.hover\:bg-warning-hover:hover {
    background-color: var(--theme-warning-hover);
}

.hover\:bg-info-hover:hover {
    background-color: var(--theme-info-hover);
}

.hover\:bg-secondary-hover:hover {
    background-color: var(--theme-secondary-hover);
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    /* border-radius: 5px; */
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}


.rotate-icon {
    transform: rotate(180deg);
}

.tree-ul {
    margin-inline-start: 1.25rem;
    border-inline-start: 2px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tree-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline-start: 1.25rem;
    padding-inline-end: 0.75rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    color: #4b5563;
    font-size: 0.75rem;
    /* border-radius: 0.375rem; */
    transition: all 0.2s;
    line-height: 1;
}

.tree-link:hover {
    color: var(--theme-primary);
    background-color: #eff6ff;
}


.tree-link::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.85rem;
    height: 1px;
    background-color: #cbd5e1;
    transition: background-color 0.2s;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.animate-shimmer {
    animation: shimmer 1.8s infinite;
    background-size: 200% 100%;
}

.blink {
    animation: blink-animation 1s steps(1, start) infinite;
}

@keyframes blink-animation {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    /* border-radius: 5px; */
}

.dashboard-island {
    background: #ffffff;
    box-shadow: 0 4px 20px -10px rgba(15, 23, 42, 0.05);
    border: 1px solid #f8fafc;
    transition: all 0.3s ease;
}

.category-wrapper {
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}


.widget-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0.875rem 1rem;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
}

.widget-card:hover {
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.05), 0 4px 6px -4px rgba(15, 23, 42, 0.02);
    transform: translateY(-3px);
}

.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

body.is-editing .dashboard-island {
    box-shadow: none;
    border: 1px solid #e2e8f0;
}

body.is-editing .widget-card {
    cursor: grab;
    border: 1px dashed #cbd5e1 !important;
    background: #f8fafc;
}

body.is-editing .widget-card:hover {
    transform: none;
    border-color: #94a3b8 !important;
    box-shadow: none;
}

body.is-editing .widget-card:active,
body.is-editing .category-drag-handle:active {
    cursor: grabbing !important;
}


.sortable-ghost {
    opacity: 0.4;
    background: #f1f5f9 !important;
    border: 1px dashed #94a3b8 !important;
}

.sortable-drag {
    cursor: grabbing !important;
    transform: scale(1.02) !important;
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1) !important;
    opacity: 1 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    z-index: 9999;
}

.timeline-dot::before {
    content: '';
    position: absolute;
    top: 24px;
    bottom: -24px;
    left: 50%;
    width: 1px;
    background-color: #e2e8f0;
    transform: translateX(-50%);
    z-index: 0;
}

.timeline-item:last-child .timeline-dot::before {
    display: none;
}

.hide-scroll::-webkit-scrollbar {
    display: none;
}

.hide-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* Alert Overlay */
.alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.alert-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Alert Box - More Compact */
.alert-box {
    background: white;
    border-radius: 8px;
    padding: 24px 28px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.7);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.alert-overlay.active .alert-box {
    transform: scale(1);
    opacity: 1;
}

/* Compact Icon - Fixed overflow */
.alert-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    position: relative;
    overflow: hidden;
}

.alert-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0.2;
}

.alert-icon.success {
    color: #10b981;
}

.alert-icon.success::before {
    background: #10b981;
}

.alert-icon.error {
    color: #ef4444;
}

.alert-icon.error::before {
    background: #ef4444;
}

.alert-icon.warning {
    color: #f59e0b;
}

.alert-icon.warning::before {
    background: #f59e0b;
}

.alert-icon.info {
    color: #3b82f6;
}

.alert-icon.info::before {
    background: #3b82f6;
}

.alert-icon.question {
    color: #8b5cf6;
}

.alert-icon.question::before {
    background: #8b5cf6;
}

/* Loading Spinner - Fixed size */
.alert-icon.loading {
    color: #667eea;
}

.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(102, 126, 234, 0.2);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Compact Text */
.alert-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 6px;
    text-align: center;
}

.alert-message {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
    text-align: center;
    line-height: 1.5;
}

.alert-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 16px;
    transition: border-color 0.3s ease;
}

.alert-input:focus {
    outline: none;
    border-color: #667eea;
}

.alert-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.alert-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 90px;
}

.alert-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.alert-btn.confirm {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.alert-btn.cancel {
    background: #f3f4f6;
    color: #6b7280;
}

.alert-btn.cancel:hover {
    background: #e5e7eb;
}

/* Toast Container */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 380px;
}

/* Toast - More Compact */
.toast {
    background: white;
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    cursor: pointer;
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast.paused .toast-progress {
    animation-play-state: paused !important;
}

/* Compact Toast Icon */
.toast-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.toast-icon.success {
    background: #d1fae5;
    color: #10b981;
}

.toast-icon.error {
    background: #fee2e2;
    color: #ef4444;
}

.toast-icon.warning {
    background: #fef3c7;
    color: #f59e0b;
}

.toast-icon.info {
    background: #dbeafe;
    color: #3b82f6;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2px;
    line-height: 1.3;
}

.toast-message {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.toast-close {
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: color 0.3s ease;
    flex-shrink: 0;
}

.toast-close:hover {
    color: #4b5563;
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 0 0 10px 10px;
    width: 100%;
    transform-origin: left;
}

@media (max-width: 640px) {
    .toast-container {
        right: 10px;
        left: 10px;
        max-width: none;
    }

    .toast {
        min-width: auto;
    }
}


/* Tabler Buttons for Tailwind CSS 4 */
/* Import this CSS after Tailwind to override/add button styles */

@layer components {
    .btn {
        @apply inline-flex items-center justify-center font-medium text-xs whitespace-nowrap align-middle transition-all duration-150 ease-in-out border border-transparent select-none tracking-wide uppercase;
        padding: 0.375rem 0.75rem;
        letter-spacing: 0.025em;
    }

    .btn:hover {
        @apply opacity-90;
    }

    .btn:active {
        @apply opacity-100;
    }

    .btn:focus-visible {
        @apply outline-none ring-2 ring-offset-2 ring-blue-500/50;
    }

    .btn:disabled,
    .btn.disabled {
        @apply opacity-50 cursor-not-allowed pointer-events-none;
    }

    /* Primary */
    .btn-primary {
        @apply bg-blue-600 text-white border-blue-600 hover:bg-blue-700 hover:border-blue-700 active:bg-blue-700 active:border-blue-700 focus:ring-blue-500/25;
    }

    /* Secondary */
    .btn-secondary {
        @apply bg-gray-500 text-white border-gray-500 hover:bg-gray-600 hover:border-gray-600 active:bg-gray-600 active:border-gray-600 focus:ring-gray-400/25;
    }

    /* Success */
    .btn-success {
        @apply bg-green-800 text-white border-green-800 hover:bg-emerald-600 hover:border-emerald-600 active:bg-emerald-600 active:border-emerald-600 focus:ring-emerald-400/25;
    }

    /* Info */
    .btn-info {
        @apply bg-cyan-500 text-white border-cyan-500 hover:bg-cyan-600 hover:border-cyan-600 active:bg-cyan-600 active:border-cyan-600 focus:ring-cyan-400/25;
    }

    /* Warning */
    .btn-warning {
        @apply bg-yellow-400 text-gray-900 border-yellow-400 hover:bg-yellow-500 hover:border-yellow-500 active:bg-yellow-500 active:border-yellow-500 focus:ring-yellow-300/25;
    }

    /* Danger */
    .btn-danger {
        @apply bg-rose-500 text-white border-rose-500 hover:bg-rose-600 hover:border-rose-600 active:bg-rose-600 active:border-rose-600 focus:ring-rose-400/25;
    }

    /* Light */
    .btn-light {
        @apply bg-gray-100 text-gray-900 border-gray-100 hover:bg-gray-200 hover:border-gray-200 active:bg-gray-200 active:border-gray-200 focus:ring-gray-300/25;
    }

    /* Dark */
    .btn-dark {
        @apply bg-gray-900 text-white border-gray-900 hover:bg-gray-800 hover:border-gray-800 active:bg-gray-800 active:border-gray-800 focus:ring-gray-700/25;
    }

    /* White */
    .btn-white {
        @apply bg-white text-gray-900 border-white hover:bg-gray-50 hover:border-gray-50 active:bg-gray-50 active:border-gray-50 focus:ring-white/25;
    }

    /* Muted */
    .btn-muted {
        @apply bg-slate-400 text-white border-slate-400 hover:bg-slate-500 hover:border-slate-500 active:bg-slate-500 active:border-slate-500 focus:ring-slate-300/25;
    }

    /* Gray */
    .btn-gray {
        @apply bg-gray-400 text-white border-gray-400 hover:bg-gray-500 hover:border-gray-500 active:bg-gray-500 active:border-gray-500 focus:ring-gray-300/25;
    }

    /* Darker */
    .btn-darker {
        @apply bg-gray-950 text-white border-gray-950 hover:bg-gray-800 hover:border-gray-800 active:bg-gray-800 active:border-gray-800 focus:ring-gray-800/25;
    }

    /* Outline Variants */
    .btn-outline-primary {
        @apply bg-transparent border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white hover:border-blue-600 active:bg-blue-700 active:border-blue-700 focus:ring-blue-500/25;
    }

    .btn-outline-secondary {
        @apply bg-transparent border-gray-500 text-gray-500 hover:bg-gray-500 hover:text-white hover:border-gray-500 active:bg-gray-600 active:border-gray-600 focus:ring-gray-400/25;
    }

    .btn-outline-success {
        @apply bg-transparent border-emerald-500 text-emerald-500 hover:bg-emerald-500 hover:text-white hover:border-emerald-600 active:bg-emerald-700 active:border-emerald-600 focus:ring-emerald-400/25;
    }

    .btn-outline-info {
        @apply bg-transparent border-cyan-500 text-cyan-500 hover:bg-cyan-500 hover:text-white hover:border-cyan-500 active:bg-cyan-600 active:border-cyan-600 focus:ring-cyan-400/25;
    }

    .btn-outline-warning {
        @apply bg-transparent border-yellow-400 text-yellow-400 hover:bg-yellow-400 hover:text-gray-900 hover:border-yellow-400 active:bg-yellow-500 active:border-yellow-500 focus:ring-yellow-300/25;
    }

    .btn-outline-danger {
        @apply bg-transparent border-rose-500 text-rose-500 hover:bg-rose-500 hover:text-white hover:border-rose-500 active:bg-rose-600 active:border-rose-600 focus:ring-rose-400/25;
    }

    .btn-outline-light {
        @apply bg-transparent border-gray-100 text-gray-100 hover:bg-gray-100 hover:text-gray-900 hover:border-gray-100 active:bg-gray-200 active:border-gray-200 focus:ring-gray-200/25;
    }

    .btn-outline-dark {
        @apply bg-transparent border-gray-900 text-gray-900 hover:bg-gray-900 hover:text-white hover:border-gray-900 active:bg-gray-800 active:border-gray-800 focus:ring-gray-800/25;
    }

    .btn-outline-white {
        @apply bg-transparent border-white text-white hover:bg-white hover:text-gray-900 hover:border-white active:bg-white active:border-white focus:ring-white/25;
    }

    .btn-outline-muted {
        @apply bg-transparent border-slate-400 text-slate-400 hover:bg-slate-400 hover:text-white hover:border-slate-400 active:bg-slate-500 active:border-slate-500 focus:ring-slate-300/25;
    }

    .btn-outline-gray {
        @apply bg-transparent border-gray-400 text-gray-400 hover:bg-gray-400 hover:text-white hover:border-gray-400 active:bg-gray-500 active:border-gray-500 focus:ring-gray-300/25;
    }

    .btn-outline-darker {
        @apply bg-transparent border-gray-950 text-gray-950 hover:bg-gray-950 hover:text-white hover:border-gray-950 active:bg-gray-900 active:border-gray-900 focus:ring-gray-900/25;
    }

    /* Sizes */
    .btn-xs {
        @apply text-xs px-1 py-0.5;
    }

    .btn-sm {
        @apply text-xs px-2 py-1;
    }

    .btn-lg {
        @apply text-base px-4 py-2;
    }

    .btn-xl {
        @apply text-lg px-5 py-2.5;
    }

    /* Shapes */
    .btn-pill {
        @apply rounded-full;
    }

    /* Icon Only */
    .btn-icon {
        @apply px-1.5 py-1.5 justify-center;
    }

    .btn-icon span {
        @apply sr-only;
    }

    /* Link Style */
    .btn-link {
        @apply bg-transparent border-transparent text-blue-600 hover:text-blue-800 hover:underline focus:underline;
    }

    .btn-link:disabled,
    .btn-link.disabled {
        @apply text-gray-500;
    }
}

@layer components {

    /* Modal Backdrop */
    .modal-backdrop {
        @apply fixed inset-0 z-50 bg-gray-900/50 backdrop-blur-sm transition-opacity duration-300 opacity-0;
        pointer-events: none;
    }

    /* Modal Container */
    .modal-container {
        @apply fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none;
        opacity: 0;
        transform: scale(0.95) translateY(10px);
        transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    }

    /* Active State for Backdrop and Container */
    .modal-backdrop.open {
        @apply opacity-100 pointer-events-auto;
    }

    .modal-container.open {
        @apply opacity-100 pointer-events-auto;
        transform: scale(1) translateY(0);
    }

    /* Modal Body */
    .modal-box {
        @apply bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto pointer-events-auto relative;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }

    /* Custom Scrollbar for dark mode compatibility */
    .dark .modal-box {
        scrollbar-color: #475569 transparent;
    }

    /* Modal Header */
    .modal-header {
        @apply flex items-center justify-between px-6 py-4 border-b border-gray-100 dark:border-gray-700;
    }

    /* Modal Title */
    .modal-title {
        @apply text-lg font-semibold text-gray-900 dark:text-white;
    }

    /* Modal Close Button (X) */
    .modal-close {
        @apply inline-flex items-center justify-center w-8 h-8 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-300 transition-colors;
    }

    /* Modal Body Content */
    .modal-body {
        @apply px-6 py-4 text-gray-600 dark:text-gray-300;
    }

    /* Modal Footer */
    .modal-footer {
        @apply flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 rounded-b-lg;
    }

    /* Utility for hiding scroll on body when modal is open */
    body.modal-open {
        @apply overflow-hidden;
    }
}



/* tabs vertical  css form */

/* اسکرول بار سفارشی */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    /* border-radius: 4px; */
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* مخفی کردن اسکرول تب‌ها */
#tabs-nav::-webkit-scrollbar {
    display: none;
}

#tabs-nav {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* کلاس برای نوشته عمودی */
.writing-mode-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
}

/* تب محتوا — بدون انیمیشن ورود */
.tab-content {
    animation: none;
}

/* افکت هاور روی دکمه‌ها */
.tab-btn {
    position: relative;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    transform: translateX(-2px);
}

/* در موبایل نوشته‌ها افقی می‌شوند */
@media (max-width: 768px) {
    .writing-mode-vertical {
        writing-mode: horizontal-tb;
        white-space: normal;
    }

    .tab-btn:hover {
        transform: translateY(-2px);
    }
}

/* استایل برای فوکوس */
.tab-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 0.5rem;
}

/* tabs vertical  css form */


/* change swal design */


.swal2-popup {
    width: 340px !important;
    padding: 0 !important;
    border-radius: 5px !important;
    box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.2) !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

/* ===== HEADER SECTION ===== */
.swal2-header {
    padding: 20px 20px 12px 20px !important;
    border-bottom: 1px solid #eef2f6 !important;
    background: #ffffff !important;
}

.swal2-icon {
    width: 44px !important;
    height: 44px !important;
    margin: 0 0 10px 0 !important;
}

.swal2-icon .swal2-icon-content {
    font-size: 24px !important;
}

.swal2-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #1f2937 !important;
}

/* ===== BODY SECTION ===== */
.swal2-content {
    padding: 20px !important;
    background: #ffffff !important;
}

.swal2-html-container {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #4b5563 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

/* استایل فرم‌ها در بخش body */
.swal2-input,
.swal2-textarea,
.swal2-select {
    margin: 8px 0 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 5px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
}

.swal2-input:focus,
.swal2-textarea:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
}

/* ===== ACTIONS SECTION (Buttons) ===== */
.swal2-actions {
    margin: 0 !important;
    padding: 16px 20px !important;
    border-top: 1px solid #eef2f6 !important;
    background: #fafbfc !important;
    gap: 10px !important;
}

.swal2-styled {
    margin: 0 !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 5px !important;
    transition: all 0.2s ease !important;
}

.swal2-styled.swal2-confirm {
    background: #3b82f6 !important;
    flex: 1 !important;
}

.swal2-styled.swal2-confirm:hover {
    background: #2563eb !important;
}

.swal2-styled.swal2-cancel {
    background: transparent !important;
    border: 1px solid #e5e7eb !important;
    color: #6b7280 !important;
    flex: 1 !important;
}

.swal2-styled.swal2-cancel:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
}

.swal2-styled.swal2-deny {
    background: #ef4444 !important;
    flex: 1 !important;
}

.swal2-styled.swal2-deny:hover {
    background: #dc2626 !important;
}

/* دکمه بستن در هدر */
.swal2-close {
    position: absolute !important;
    right: 16px !important;
    top: 16px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 20px !important;
    color: #9ca3af !important;
    background: transparent !important;
}

.swal2-close:hover {
    color: #ef4444 !important;
    background: #fef2f2 !important;
}

/* تایمر بار در پایین popup */
.swal2-timer-progress-bar-container {
    height: 3px !important;
    background: #f3f4f6 !important;
}

.swal2-timer-progress-bar {
    background: #3b82f6 !important;
}

/* انیمیشن ساده */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.swal2-show {
    animation: fadeInUp 0.25s ease-out !important;
}

/* تعمیر کامل آیکون success - نسخه ساده و بدون خطا */

.swal2-icon.swal2-success {
    border-color: #10b981 !important;
    background: #f0fdf4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* حذف کامل المان‌های SVG مشکل‌دار */
.swal2-icon.swal2-success .swal2-success-ring,
.swal2-icon.swal2-success [class^=swal2-success-circular-line],
.swal2-icon.swal2-success .swal2-success-fix,
.swal2-icon.swal2-success [class^=swal2-success-line] {
    display: none !important;
}

/* آیکون ساده با علامت تیک */
.swal2-icon.swal2-success::after {
    content: "✓" !important;
    font-size: 32px !important;
    font-weight: bold !important;
    color: #10b981 !important;
    line-height: 1 !important;
    display: block !important;
}

.swal2-icon.swal2-error {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* حذف کامل المان‌های SVG مشکل‌دار */
.swal2-icon.swal2-error .swal2-x-mark,
.swal2-icon.swal2-error [class^=swal2-x-mark-line],
.swal2-icon.swal2-error .swal2-x-mark .swal2-x-mark-line-left,
.swal2-icon.swal2-error .swal2-x-mark .swal2-x-mark-line-right {
    display: none !important;
}

/* آیکون ساده با علامت ضربدر */
.swal2-icon.swal2-error::after {
    content: "✕" !important;
    font-size: 32px !important;
    font-weight: bold !important;
    color: #ef4444 !important;
    line-height: 1 !important;
    display: block !important;
}

.swal2-actions {
    z-index: 0 !important;
}

.swal2-container .sepehr-select {
    overflow: visible !important;
}

.swal2-container .sepehr-select__dropdown {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 32px) !important;
    max-width: 300px !important;
    /* top: 50% !important; */
    /* transform: translate(-50%, -50%) !important; */
    z-index: 9999999 !important;
}





/* change swal design */


/* start jpd calender */


jdp-container {
    transform: scale(0.85) !important;
    transform-origin: top center !important;
    min-width: 260px !important;
    max-width: 260px !important;
}

jdp-container .jdp-months,
jdp-container .jdp-years {
    font-size: 13px !important;
}

jdp-container .jdp-days {
    padding: 4px 0 0 !important;
}

jdp-container .jdp-day,
jdp-container .jdp-day-name {
    height: 28px !important;
    line-height: 28px !important;
    font-size: 12px !important;
    margin: 1px 0 !important;
}

jdp-container .jdp-day:not(.disabled-day):hover {
    transform: scale(1.05) !important;
}

jdp-container .jdp-footer {
    padding: 5px 8px 0 !important;
}

jdp-container .jdp-btn-close,
jdp-container .jdp-btn-empty,
jdp-container .jdp-btn-today {
    font-size: 11px !important;
    padding: 4px 10px !important;
}

jdp-container .jdp-icon-minus svg,
jdp-container .jdp-icon-plus svg {
    height: 1.2rem !important;
    width: 1.2rem !important;
    padding: 2px !important;
}

jdp-container .jdp-month,
jdp-container .jdp-year {
    font-size: 13px !important;
}

jdp-container .jdp-time-container .jdp-time select {
    font-size: 12px !important;
    padding: 4px 8px !important;
}

/* برای موبایل */
@media only screen and (max-width: 481px) {
    jdp-container {
        transform: scale(1) !important;
        min-width: 90% !important;
        max-width: 90% !important;
    }

    jdp-container .jdp-day,
    jdp-container .jdp-day-name {
        height: 35px !important;
        line-height: 35px !important;
        font-size: 13px !important;
    }

    jdp-container .jdp-btn-close,
    jdp-container .jdp-btn-empty,
    jdp-container .jdp-btn-today {
        font-size: 13px !important;
        padding: 6px 12px !important;
    }

}

jdp-container {
    z-index: 999999999 !important;
    position: fixed !important;
    background: white !important;
    /* تضمین دید پس‌زمینه */
}

jdp-overlay {
    z-index: 999999998 !important;
}

.swal2-container jdp-container {
    z-index: 999999999 !important;
    position: fixed !important;
}

.swal2-container jdp-overlay {
    z-index: 999999998 !important;
}

.swal2-container {
    z-index: 1000 !important;
}

.swal2-container.jdp-opened {
    z-index: auto !important;
}

jdp-container {
    z-index: 999999999 !important;
    position: fixed !important;
}

jdp-container .jdp-day-name {
    background-color: #2E2E30 !important;
    color: white !important;
    border: 1px solid #2E2E30 !important;
}

jdp-container .jdp-btn-today,
jdp-container .jdp-btn-empty {
    background-color: #2E2E30 !important;
    color: white !important;
    transition: all 0.2s ease !important;
}

jdp-container .jdp-btn-today:hover,
jdp-container .jdp-btn-empty:hover {
    background-color: #4a4a4d !important;
}

jdp-container .jdp-day.selected,
jdp-container .jdp-day-name.selected {
    background-color: #2E2E30 !important;
    color: white !important;
    background-image: none !important;
}

.row-deleted {
    background-color: #fecaca !important;
    color: #991b1b !important;
    text-decoration: line-through !important;
}

.row-deleted .ag-cell {
    text-decoration: line-through !important;
}

.row-new {
    background-color: #fcfda2 !important;
}

.row-edited {
    background-color: #d1f0ff !important;
}

#mainMenu.sidebar-collapsed {
    width: 0 !important;
    min-width: 0 !important;
    border-inline-end-width: 0 !important;
}

/* ================= Sepehr Chrome Tab Manager (white schema) ================= */
.sepehr-app-header {
    display: flex;
    align-items: flex-end;
    gap: 0;
    background: #ffffff;
    border-bottom: 1px solid #d1d5db;
}

.sepehr-header-clock {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
    height: 2.75rem;
    padding: 0 0.85rem;
    background: #ffffff;
    /* border-inline-end: 1px solid #d1d5db; */
}

.sepehr-header-clock__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 7.5rem;
}

.sepehr-chrome-tab-bar {
    flex: 1;
    min-width: 0;
    background: #ffffff;
}

.sepehr-chrome-tab-bar__inner {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    min-height: 2.75rem;
    height: 100%;
    padding: 0.1rem 0.6rem 0;
}

.sepehr-chrome-tab-strip {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
    padding-bottom: 0;
}

.sepehr-chrome-tab-strip:hover {
    scrollbar-color: #d1d5db transparent;
}

.sepehr-chrome-tab-strip::-webkit-scrollbar {
    height: 1px;
}

.sepehr-chrome-tab-strip::-webkit-scrollbar-track {
    background: transparent;
}

.sepehr-chrome-tab-strip::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 999px;
}

.sepehr-chrome-tab-strip:hover::-webkit-scrollbar-thumb {
    background: #d1d5db;
}

.sepehr-chrome-tab-strip::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

.sepehr-chrome-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    height: 2.1rem;
    min-width: 3.25rem;
    max-width: 15rem;
    flex: 0 1 15rem;
    padding: 0 0.65rem;
    border: 1px solid #e5e7eb;
    border-bottom: none;
    border-radius: 0.2rem 0.2rem 0 0;
    background: #f9fafb;
    color: #4b5563;
    cursor: pointer;
    user-select: none;
    opacity: 0.52;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        opacity 0.15s ease,
        box-shadow 0.15s ease;
}

.sepehr-chrome-tab:hover:not(.is-active) {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
    opacity: 0.72;
}

.sepehr-chrome-tab.is-active {
    background: #ffffff;
    color: #111827;
    border-color: #d1d5db;
    z-index: 3;
    /* margin-bottom: -1px; */
    padding-bottom: 1px;
    opacity: 1;
    box-shadow: inset 0 -14px 18px -14px color-mix(in srgb, var(--theme-primary) 11%, transparent);
}

.sepehr-chrome-tab.is-active::before,
.sepehr-chrome-tab.is-active::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 0.5rem;
    height: 0.5rem;
    pointer-events: none;
}

.sepehr-chrome-tab.is-active::before {
    inset-inline-start: -0.5rem;
    background: radial-gradient(circle at 0 0, transparent 0.5rem, #ffffff 0.51rem);
}

.sepehr-chrome-tab.is-active::after {
    inset-inline-end: -0.5rem;
    background: radial-gradient(circle at 100% 0, transparent 0.5rem, #ffffff 0.51rem);
}

.sepehr-chrome-tab__title-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.sepehr-chrome-tab__title-track {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    white-space: nowrap;
    max-width: 100%;
}

.sepehr-chrome-tab__title-text {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
}

.sepehr-chrome-tab__title-track.is-marquee {
    max-width: none;
}

.sepehr-chrome-tab:hover .sepehr-chrome-tab__title-track.is-marquee,
.sepehr-chrome-tab.is-active .sepehr-chrome-tab__title-track.is-marquee {
    animation: sepehr-tab-marquee 14s linear infinite;
}

@keyframes sepehr-tab-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - 0.75rem));
    }
}

[dir="rtl"] .sepehr-chrome-tab:hover .sepehr-chrome-tab__title-track.is-marquee,
[dir="rtl"] .sepehr-chrome-tab.is-active .sepehr-chrome-tab__title-track.is-marquee {
    animation-name: sepehr-tab-marquee-rtl;
}

@keyframes sepehr-tab-marquee-rtl {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(50% + 0.75rem));
    }
}

.sepehr-chrome-tab__pin,
.sepehr-chrome-tab__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #9ca3af;
    font-size: 0.62rem;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.sepehr-chrome-tab:hover .sepehr-chrome-tab__pin,
.sepehr-chrome-tab:hover .sepehr-chrome-tab__close,
.sepehr-chrome-tab__pin.is-visible {
    opacity: 1;
}

.sepehr-chrome-tab__pin.is-visible {
    color: var(--theme-primary, #1f93ff);
}

.sepehr-chrome-tab__pin:hover,
.sepehr-chrome-tab__close:hover {
    background: #f3f4f6;
    color: #374151;
}

.sepehr-chrome-tab__close:hover {
    background: #fef2f2;
    color: #dc2626;
}

.sepehr-chrome-tab__close.is-hidden {
    display: none;
}

.sepehr-chrome-tab.is-pinned .sepehr-chrome-tab__pin {
    opacity: 1;
}

.sepehr-chrome-tab.sortable-ghost {
    opacity: 0.45;
}

.sepehr-chrome-tab.sortable-drag {
    cursor: grabbing;
}

.sepehr-chrome-tab-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    padding-inline-start: 0.35rem;
    margin-bottom: 0.35rem;
    border-inline-start: 1px solid #e5e7eb;
    padding-inline-end: 0.15rem;
}

.sepehr-chrome-tab-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    background: #ffffff;
    color: #6b7280;
    font-size: 0.78rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sepehr-chrome-tab-action:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

#sepehr-tab-panels iframe[x-cloak],
#sepehr-tab-panels [x-cloak] {
    display: none !important;
}

.aggrid_background {
    background-color: #f1f1f1;
}