@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300&family=El+Messiri&display=swap');

* {
  font-family: 'El Messiri', sans-serif;
}

body {
  font-family: 'El Messiri', sans-serif;
}

h1, h2, h3, h4, h5, h6, p, span, li, a, strong,
.text-primary,
.navbar-menu .navbar-nav .nav-sm .nav-link,
.page-title-box h4,
.navbar-menu .navbar-nav .nav-sm .nav-link {
  font-family: 'El Messiri', sans-serif !important;
}

.form-control {
  text-align: right;
}

.pannelPermission {
  padding: 0px;
    flex: 31% !important;
    margin: 0 1%;
    min-height: 280px;
    margin-bottom: 20px;
}

.pannelPermission .card-body {
    text-align: right;
    padding: 10px 0px;
    min-height: 300px;
}

.pannelPermission .card-body ul {
  padding: 0px 10px;
}

.pannelPermission .card-body ul li {
    display: block;
    padding: 5px;
    border-bottom: 1px solid #cccccc82;
    width: 100%;
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
}

.btn-primary {
    color: #fff !important;
    background-color: #7367f0 !important;
    border-color: #7367f0 !important;
}

@media screen and (max-width: 768px)
{
  .pannelPermission {
    flex: 100% !important;
  }
}
/* =====================================================
   Arabic typography + RTL corrections
   Public Sans carries no Arabic glyphs, so point the Bootstrap font
   variable at IBM Plex Sans Arabic whenever the panel is in Arabic.
   ===================================================== */

html[dir="rtl"] {
    --bs-font-sans-serif: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

html[dir="rtl"] body,
html[dir="rtl"] .menu,
html[dir="rtl"] .card,
html[dir="rtl"] .btn,
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .modal,
html[dir="rtl"] table {
    font-family: var(--bs-font-sans-serif);
}

/* Keep icon fonts untouched by the swap */
html[dir="rtl"] .ti,
html[dir="rtl"] [class^="ti-"],
html[dir="rtl"] [class*=" ti-"] {
    font-family: "tabler-icons" !important;
}

html[dir="rtl"] .fa,
html[dir="rtl"] .fas,
html[dir="rtl"] .far,
html[dir="rtl"] .fal,
html[dir="rtl"] [class^="fa-"],
html[dir="rtl"] [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro" !important;
}

html[dir="rtl"] .fab {
    font-family: "Font Awesome 6 Brands" !important;
}

/* Arabic needs a little more breathing room */
html[dir="rtl"] body {
    line-height: 1.6;
}

/* Form labels and table cells were left-aligned by the template */
html[dir="rtl"] .form-label,
html[dir="rtl"] label,
html[dir="rtl"] .table th,
html[dir="rtl"] .table td {
    text-align: right;
}

html[dir="rtl"] .text-right {
    text-align: right !important;
}

/* Breadcrumb separators point the wrong way in RTL */
html[dir="rtl"] .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    transform: scaleX(-1);
    float: right;
    padding-right: 0;
    padding-left: .5rem;
}

/* Inputs holding latin data (emails, urls, phones) stay ltr so they read correctly */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[name="slug"] {
    direction: ltr;
    text-align: right;
}

/* Dashboard tweaks */
html[dir="rtl"] .stat-card .stat-icon {
    margin-left: 0;
}

html[dir="rtl"] .apexcharts-legend {
    direction: rtl;
}

/* Thumbnails in the admin list tables.
   Every one of these models carries an image but none of the lists showed it,
   so a row could only be identified by opening it. */
.list-thumb {
    width: 84px;
    height: 63px;
    object-fit: cover;
    border-radius: 6px;
    background: rgba(0, 0, 0, .04);
}

/* Progress bar in the subscribers listing. Small enough to sit in a table cell
   without stretching the row. */
.sub-bar {
	height: 8px;
	border-radius: 999px;
	background: #eceff1;
	overflow: hidden;
	min-width: 90px;
}

.sub-bar span {
	display: block;
	height: 100%;
	background: #004D40;
	border-radius: 999px;
}

/* Twelve-month signup bars, drawn without a charting library. */
.stat-bars {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 130px;
}

.stat-bar {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
	gap: 4px;
}

.stat-bar > span {
	display: block;
	width: 100%;
	min-height: 3px;
	background: #004D40;
	border-radius: 4px 4px 0 0;
}

.stat-bar small {
	font-size: 10px;
	color: #8a8578;
}

/* WhatsApp pairing dialog */
.wa-dialog {
	border: 0;
	border-radius: 14px;
	padding: 0;
	max-width: 400px;
	width: calc(100% - 32px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}

.wa-dialog::backdrop {
	background: rgba(18, 24, 22, .55);
}

.wa-dialog-inner {
	padding: 28px;
	text-align: center;
}

/* fixed height so the box does not jump each time the code refreshes */
.wa-qr {
	display: grid;
	place-items: center;
	min-height: 320px;
	margin: 16px 0;
}

.wa-qr img {
	width: 300px;
	height: 300px;
	image-rendering: pixelated;
}

.wa-done {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: #e8f5ee;
	color: #1f6f52;
	display: grid;
	place-items: center;
	font-size: 44px;
}

.wa-state {
	min-height: 24px;
	direction: ltr;
	word-break: break-word;
}