/* ============================================================
   Tailwind-equivalent utility classes (offline / no CDN needed)
   ============================================================ */

/* --- Box model reset --- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: Tahoma, Arial, sans-serif; }

/* --- Backgrounds --- */
.bg-gray-100 { background-color: #F3F4F6; }
.bg-white    { background-color: #FFFFFF; }

/* --- Min height --- */
.min-h-screen { min-height: 100vh; }

/* --- Padding --- */
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }

/* --- Margin bottom --- */
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

/* --- Grid --- */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --- Border radius & shadow --- */
.rounded-lg { border-radius: 0.5rem; }
.shadow { box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06); }

/* --- Typography --- */
.text-sm  { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg  { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl  { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem;  line-height: 2.5rem; }
.font-bold     { font-weight: 700; }
.font-semibold { font-weight: 600; }
.text-center { text-align: center; }

/* --- Text colors --- */
.text-gray-500 { color: #6B7280; }
.text-gray-600 { color: #4B5563; }
.text-gray-700 { color: #374151; }
.text-blue-600 { color: #2563EB; }
.text-blue-800 { color: #1E3A5F; }

/* --- Display --- */
.block { display: block; }


/* ============================================================
   Custom dashboard styles
   ============================================================ */

/* RTL fixes for plotly chart titles */
.js-plotly-plot .plotly .gtitle {
    direction: rtl;
}

/* Smooth transitions on KPI cards */
.kpi-card {
    transition: box-shadow 0.2s ease;
}
.kpi-card:hover {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* ---- Tab styling ---- */
.tab-item {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 28px;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.2s ease;
}
.tab-item:hover {
    color: #1E3A5F;
}
.tab-item--selected {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 28px;
    border: none !important;
    border-bottom: 3px solid #3B82F6 !important;
    background: transparent !important;
    color: #1E3A5F !important;
}

/* Tabs container – remove default borders */
.tab-container {
    border-bottom: 1px solid #E5E7EB;
}

/* ---- DataTable overrides ---- */
.dash-table-container .dash-spreadsheet-container {
    direction: rtl;
}
.dash-table-container .dash-header {
    direction: rtl;
}
/* Sortable column header arrows */
.dash-table-container .column-header--sort {
    cursor: pointer;
}
/* Filter input RTL */
.dash-table-container .dash-filter input {
    direction: rtl;
    text-align: right;
    font-family: Tahoma, Arial, sans-serif;
}