/* ==========================================================================
   WhatsCRM - Premium Arabic RTL & Responsive Enhancements
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Tajawal:wght@300;400;500;700;800&display=swap');

/* --- Arabic Typography & Base Direction --- */
html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] #root,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button {
  font-family: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] code,
html[dir="rtl"] pre {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace !important;
  direction: ltr;
  text-align: left;
}

/* --- Layout & Alignment --- */
html[dir="rtl"] .MuiTypography-root,
html[dir="rtl"] .MuiListItemText-root,
html[dir="rtl"] .MuiTableCell-root,
html[dir="rtl"] .MuiFormLabel-root,
html[dir="rtl"] .MuiInputBase-input,
html[dir="rtl"] .MuiCardHeader-content {
  text-align: right !important;
}

/* --- Tables in RTL --- */
html[dir="rtl"] .MuiTable-root th,
html[dir="rtl"] .MuiTable-root td {
  text-align: right !important;
}

html[dir="rtl"] .MuiTablePagination-root {
  direction: rtl;
}

html[dir="rtl"] .MuiTablePagination-actions {
  margin-right: 20px;
  margin-left: 0;
}

html[dir="rtl"] .MuiTablePagination-actions button {
  transform: rotate(180deg);
}

/* --- Form Fields & Inputs in RTL --- */
html[dir="rtl"] .MuiOutlinedInput-root {
  text-align: right;
}

html[dir="rtl"] .MuiInputAdornment-positionStart {
  margin-right: 0;
  margin-left: 8px;
}

html[dir="rtl"] .MuiInputAdornment-positionEnd {
  margin-left: 0;
  margin-right: 8px;
}

html[dir="rtl"] .MuiSelect-select {
  text-align: right !important;
  padding-left: 32px !important;
  padding-right: 14px !important;
}

html[dir="rtl"] .MuiSelect-icon {
  right: auto !important;
  left: 7px !important;
}

/* --- Breadcrumbs & Navigation --- */
html[dir="rtl"] .MuiBreadcrumbs-ol {
  direction: rtl;
}

html[dir="rtl"] .MuiBreadcrumbs-separator svg {
  transform: rotate(180deg);
}

/* --- Lists, Menus & Icons --- */
html[dir="rtl"] .MuiListItemIcon-root {
  min-width: 36px;
  margin-left: 10px;
  margin-right: 0;
}

html[dir="rtl"] .MuiMenuItem-root {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .MuiButton-startIcon {
  margin-left: 8px !important;
  margin-right: -4px !important;
}

html[dir="rtl"] .MuiButton-endIcon {
  margin-right: 8px !important;
  margin-left: -4px !important;
}

/* --- Dialogs, Drawers & Modals --- */
html[dir="rtl"] .MuiDialogTitle-root {
  text-align: right;
}

html[dir="rtl"] .MuiDialogActions-root {
  justify-content: flex-start;
  direction: rtl;
}

/* --- Flow canvas LTR override (ReactFlow needs LTR coordinates) --- */
.react-flow,
.react-flow__pane,
.react-flow__viewport,
.react-flow__renderer {
  direction: ltr !important;
}

/* ==========================================================================
   Responsive Design Optimizations (Mobile & Tablet)
   ========================================================================== */

/* Prevent unwanted horizontal viewport overflow */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Table containers auto-scroll smoothly on mobile */
.MuiTableContainer-root {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.MuiTableContainer-root::-webkit-scrollbar {
  height: 6px;
}

.MuiTableContainer-root::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 120, 0.3);
  border-radius: 3px;
}

/* Medium & Small screens (Tablets & Phones) */
@media (max-width: 900px) {
  .MuiContainer-root {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  .MuiGrid-container {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Make Dialogs responsive */
  .MuiDialog-paper {
    margin: 12px !important;
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    border-radius: 16px !important;
  }

  /* Adjust Action Bars & Filter toolbars */
  .MuiToolbar-root {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px !important;
  }
}

/* Small screens (Phones < 600px) */
@media (max-width: 600px) {
  body {
    font-size: 13.5px;
  }

  .MuiButton-root {
    font-size: 0.825rem;
    padding: 6px 12px;
  }

  .MuiTableCell-root {
    padding: 10px 8px !important;
    font-size: 0.8rem !important;
  }

  .MuiCard-root {
    border-radius: 12px !important;
    padding: 12px !important;
  }
}