/* Bilingual (Arabic RTL / English LTR) layer shared by every portal.
 *
 * Loaded on top of css/style.css (LTR) or css/style-rtl.css (RTL). Keep this
 * file OUT of any RTL-flipping step: rules are written with explicit
 * html[dir] selectors or logical properties, so an automatic flip would
 * invert them (that is how the old copy inside style-rtl.css ended up
 * right-aligning English and left-aligning Arabic). */

/* ---- Text direction ---------------------------------------------------- */
html[dir="rtl"] body { text-align: right; }
html[dir="ltr"] body { text-align: left; }
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end { text-align: left !important; }

/* Values that are always left-to-right (emails, phones, URLs, codes) stay
   LTR inside Arabic sentences without flipping the surrounding layout. */
input[type="email"],
input[type="tel"],
input[type="url"],
[data-bidi="ltr"] { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="time"],
html[dir="rtl"] input[type="datetime-local"],
html[dir="rtl"] input[type="month"],
html[dir="rtl"] input[type="week"] { text-align: right; }
html[dir="rtl"] input[type="email"]::placeholder,
html[dir="rtl"] input[type="tel"]::placeholder,
html[dir="rtl"] input[type="url"]::placeholder { direction: rtl; }

/* ---- Arabic typography ------------------------------------------------- */
html[lang="ar"] body,
html[lang="ar"] .btn,
html[lang="ar"] .form-control,
html[lang="ar"] .form-select,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6 {
  letter-spacing: 0 !important;
}
html[lang="ar"] .nav-label { letter-spacing: 0 !important; }

/* ---- Direction-aware icons --------------------------------------------- */
/* Breadcrumb chevrons and "next/back" arrows point along the reading
   direction. The template icon fonts only ship the LTR glyph. */
html[dir="rtl"] .page-titles .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  transform: scaleX(-1);
  float: none;
  padding: 0;
  margin-left: 0.5rem; /* margins sit outside the mirrored box */
}
html[dir="rtl"] .fa-arrow-right, html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-chevron-right, html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-angle-right, html[dir="rtl"] .fa-angle-left,
html[dir="rtl"] .fa-angle-double-right, html[dir="rtl"] .fa-angle-double-left,
html[dir="rtl"] .fa-long-arrow-right, html[dir="rtl"] .fa-long-arrow-left,
html[dir="rtl"] .fa-long-arrow-alt-right, html[dir="rtl"] .fa-long-arrow-alt-left,
html[dir="rtl"] .fa-caret-right, html[dir="rtl"] .fa-caret-left,
html[dir="rtl"] .la-arrow-right, html[dir="rtl"] .la-arrow-left,
html[dir="rtl"] .la-angle-right, html[dir="rtl"] .la-angle-left,
html[dir="rtl"] .la-chevron-right, html[dir="rtl"] .la-chevron-left,
html[dir="rtl"] .la-long-arrow-right, html[dir="rtl"] .la-long-arrow-left,
html[dir="rtl"] .bi-arrow-right, html[dir="rtl"] .bi-arrow-left,
html[dir="rtl"] .bi-chevron-right, html[dir="rtl"] .bi-chevron-left,
html[dir="rtl"] .ti-arrow-right, html[dir="rtl"] .ti-arrow-left,
html[dir="rtl"] .ti-angle-right, html[dir="rtl"] .ti-angle-left,
html[dir="rtl"] .icon-arrow-right, html[dir="rtl"] .icon-arrow-left { transform: scaleX(-1); }

/* Language toggle injected into the header by the Instructor engine. */
.header .array-lang-picker { align-self: center; list-style: none; }

/* The template's demo theme switcher is not part of the product (the i18n
   engine also removes it, but it can be re-injected after load). */
.sidebar-right,
.sidebar-right-trigger { display: none !important; }

/* ---- Popups: opaque in every theme and above sticky headers ------------- */
.dropdown-menu,
.select2-dropdown,
.bootstrap-select .dropdown-menu,
.datepicker-dropdown,
.daterangepicker {
  background-color: var(--card, var(--bs-body-bg)) !important;
  color: var(--text-dark, var(--bs-body-color)) !important;
  isolation: isolate;
}
.dropdown-menu { z-index: 1060; }
.modal { z-index: 1065; }
.modal-backdrop { z-index: 1060; }

/* ---- Wide tables scroll instead of pushing the page sideways ------------ */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card-body:has(> table[style*="min-width"]),
.tab-pane:has(> table[style*="min-width"]),
.dataTables_wrapper { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 767.98px) {
  .content-body .container-fluid { padding-inline: 0.75rem; }
  /* Rows with a wider gutter than this padding stuck out a few px and made
     the whole page scroll sideways (Student/support.html). */
  .content-body { overflow-x: clip; }
  .card-body { padding-inline: 1rem; }
  .page-titles { align-items: flex-start; }
  table[style*="min-width"] th,
  table[style*="min-width"] td { padding-inline: 0.65rem; white-space: nowrap; }
}

/* The theme pins the calendar view to 800px under 992px, which cut a phone
   screen down to 3 of the 7 day columns. Fit the card instead. */
@media only screen and (max-width: 991px) {
  .fc .fc-view-harness { width: 100% !important; height: auto !important; min-height: 420px; }
}

/* QA L5 — phones: the week-number badge (holiday calendars, weekNumbers on)
   sat on top of the first day's number, and the weekday headers were
   cramped. Shrink the badge and drop that cell's day number below it; keep
   header labels small (schedule.html also switches to narrow weekday names). */
@media (max-width: 575.98px) {
  .fc .fc-daygrid-week-number {
    font-size: 0.6rem;
    line-height: 1.2;
    padding: 1px 3px;
    min-width: 0;
  }
  .fc .fc-daygrid-day-frame:has(.fc-daygrid-week-number) .fc-daygrid-day-top {
    padding-top: 1rem;
  }
  .fc .fc-col-header-cell-cushion {
    font-size: 0.7rem;
    padding: 2px 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }
  .fc .fc-daygrid-day-number { font-size: 0.75rem; padding: 2px; }
}

/* QA live round — live notification toast: opaque card with a shadow
   (the theme's light alert variants are translucent and the page showed
   through), placed below the fixed header by JS. */
.array-live-toast .array-live-toast-box {
  background-color: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-inline-start: 4px solid currentColor;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  opacity: 1;
  backdrop-filter: none;
}
.array-live-toast .alert-info.array-live-toast-box { border-inline-start-color: #0dcaf0; }
.array-live-toast .alert-success.array-live-toast-box { border-inline-start-color: #198754; }
.array-live-toast .alert-warning.array-live-toast-box { border-inline-start-color: #ffc107; }
.array-live-toast .alert-danger.array-live-toast-box { border-inline-start-color: #dc3545; }
.array-live-toast .alert-primary.array-live-toast-box { border-inline-start-color: var(--primary, #0d6efd); }
[data-theme-version="dark"] .array-live-toast .array-live-toast-box { background-color: #1e2235; color: #e6e8ef; }

/* QA live round — data tables inside .table-responsive keep their header
   labels on one line and scroll sideways on phones instead of collapsing
   (empty tables on refund-requests / payroll-workflow / pending-*). */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive table.text-nowrap { min-width: max-content; }
.table-responsive table.text-nowrap th,
.table-responsive table.dataTable thead th { white-space: nowrap; }

/* QA live round — department-details: the theme pulls .card-profile
   .profile-photo up by 20px, so the building icon sat on the card title. */
.card-profile .dept-profile-photo { margin-top: 0.5rem; }

/* Amount + currency runs (fmtCcy) never wrap between digits and label. */
bdi.text-nowrap { white-space: nowrap; }

/* Reports / dashboard charts: fixed-height box so Chart.js stays readable
   on a 390px phone (maintainAspectRatio: false). */
.array-chart-box { position: relative; width: 100%; }
.array-chart-box > canvas { max-width: 100%; }

/* My Lectures: 'waiting' = inside the live-session window, instructor has
   not started it yet (yellow, like the other pending states). */
.badge-status.waiting { background:#fff3cd; color:#856404; }

/* QA r7 — the theme gives every .card height:calc(100% - 30px) for
   equal-height columns. When a column stacks more than one card (or a panel
   is injected next to the card: edit-holiday compensation panel,
   fees-collection pending claims), each card took the full column height and
   the bottom was cut off. Only a column's sole card keeps the stretch. */
.row > [class*="col"] > .card:not(:only-child) { height: auto; }

/* QA r7 — add/edit group weekday toggles: 7 buttons overflowed a 390px
   phone (Thu/Fri off-screen). Wrap them instead. */
.btn-group.group-days { flex-wrap: wrap; row-gap: 0.25rem; }
.btn-group.group-days > .btn { flex: 1 0 3.25rem; }

/* QA r7 — empty list tables on phones: header labels ran together. Keep
   every header cell padded and on one line; the table grows to its content
   and .table-responsive scrolls. */
.table-responsive table.display { min-width: max-content; }
.table-responsive table.display thead th {
  white-space: nowrap;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-inline-start: 0.9375rem;
  min-width: 4.5rem;
}

/* QA r7 — user data (group / course / person names) is shown exactly as
   typed: the theme's .card-title capitalize re-cased names. */
.card-title[translate="no"],
.card-title.notranslate,
[translate="no"] .card-title,
.card-title [translate="no"] { text-transform: none; }

/* QA R8 M4 — chat panel full-width on phones in every portal (Student had
   it; Admin/Instructor kept the 340px panel and clipped at ≤575px). */
@media only screen and (max-width: 575px) {
  .chatbox { width: 100%; }
  .chatbox .user_info span,
  .chatbox .user_info p { max-width: calc(100vw - 7rem); }
}

/* QA R8 L9 — the floating "?" help button covered banner text at 390px:
   smaller and tucked into the bottom corner on phones. */
@media only screen and (max-width: 575px) {
  .support {
    width: 36px;
    height: 36px;
    font-size: 15px;
    padding: 0;
    bottom: 12px;
    opacity: 0.85;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* QA R8 M3 — sidebar counters stay content-sized in RTL (the stylesheet's
   physical right/left offset + the inline logical one stretched the pill). */
.dlabnav .nav-badge[style*="inset-inline-end"] { width: auto; max-width: max-content; }

/* ── QA R9 (2026-10-21) ─────────────────────────────────────────── */
/* M3 — Admin/Instructor chat at phone width: the panel is full-width, so the
   template's off-panel "×" strip (.chatbox-close) floated over the content.
   Same rule Student already has in its own stylesheet (identical there). */
@media only screen and (max-width: 575px) {
  .chatbox .chatbox-close { display: none; }
}

/* L4 — phone sidebar (overlay, full labels): parent-item counters sat on the
   submenu caret (caret is ~1.5–1.9rem from the inline end). Move the counter
   inward past it. Student badges ([data-sb]) are positioned by Student CSS. */
@media only screen and (max-width: 767.98px) {
  .dlabnav .metismenu a.has-arrow > .nav-badge:not([data-sb]) {
    inset-inline-end: 2.9rem !important;
    inset-inline-start: auto !important;
  }
}
/* L4 — header bell: the "99"/"99+" counter covered the bell glyph on phones.
   Content-sized pill pinned outside the icon's top corner. */
@media only screen and (max-width: 575px) {
  .header-right .notification_dropdown a.bell > .nav-badge {
    top: -12px !important;
    inset-inline-end: -16px !important;
    inset-inline-start: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 14px;
    padding: 1px 3px !important;
    font-size: 8.5px !important;
    line-height: 1.2 !important;
    border-radius: 8px !important;
  }
}

/* ── QA R10 (2026-10-21) ────────────────────────────────────────── */
/* M — chat conversation header (all portals, same chat-ui.js markup:
   .card-header > a.dlab-chat-history-back + div(h6,p) + .dropdown): a long
   conversation title pushed the "⋯" menu off-screen at 390px (Arabic). The
   title block shrinks and ellipsizes; back/menu buttons never shrink. */
.chatbox .dlab-chat-history-box .card-header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
}
.chatbox .dlab-chat-history-box .card-header > div:not(.dropdown) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.chatbox .dlab-chat-history-box .card-header > div:not(.dropdown) > h6,
.chatbox .dlab-chat-history-box .card-header > div:not(.dropdown) > .h6,
.chatbox .dlab-chat-history-box .card-header > div:not(.dropdown) > p {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chatbox .dlab-chat-history-box .card-header > .dlab-chat-history-back,
.chatbox .dlab-chat-history-box .card-header > .dropdown {
  flex-shrink: 0;
}

/* ── QA R23 (2026-11-01) ────────────────────────────────────────── */
/* AC11 — header bell counter: the template fixes the bubble at 1.1rem wide
   with no padding, so "100" showed as "10"/"00" and "99+" as "99". The
   bubble now grows with its text (the JS caps it at "99+"), all portals,
   both directions, both themes. */
.header-right .notification_dropdown .nav-link .badge,
.header-right .notification_dropdown a.bell > .nav-badge {
  width: auto;
  max-width: none;
  min-width: 1.1rem;
  padding-inline: 0.25rem;
  border-radius: 999px;
  white-space: nowrap;
  overflow: visible;
  box-sizing: border-box;
}