/* Custom styles goes here */

/* ===== Arabic typography: Tajawal (Google Fonts) ===== */
/* Override Vuexy's font CSS variables when the document language is Arabic so the
   whole template (body, headings, components, menu) renders in Tajawal. */
html[lang="ar"] {
  --bs-font-sans-serif: "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html[lang="ar"] body {
  font-family: var(--bs-body-font-family);
}

/* Brand primary (teal #0D9394) is baked into vendor/css/core.css — the SCSS source
   ($purple) was changed and recompiled, so all derived primary shades are correct
   at source. No runtime CSS-variable override is needed here. */

/* ===== Brand dark sidebar (slate #2F334A + teal #0D9394 accent) ===== */
/* The vertical menu runs in dark mode (data-bs-theme="dark") but recolored to the
   brand slate background with a teal-gradient active pill — matching the Vuexy demo
   dark menu. Scoped to .brand-menu so the navbar/content keep their own light/dark
   state from the theme switcher. */
.brand-menu {
  --brand-menu-bg: #2F334A;
  --brand-menu-accent: #0D9394;
  /* Vuexy primary gradient used for the active leaf pill */
  --brand-menu-active-grad: linear-gradient(72.47deg, #0D9394 22.16%, rgba(13, 147, 148, 0.7) 76.47%);
  --brand-menu-bg-hover: rgba(255, 255, 255, 0.06);
  --brand-menu-bg-open: rgba(255, 255, 255, 0.05);
  background-color: var(--brand-menu-bg) !important;
  border-color: transparent !important;
}
/* Brand header area + the inner shadow that fades content under it */
.brand-menu .app-brand,
.brand-menu .menu-inner-shadow {
  background: var(--brand-menu-bg) !important;
}
.brand-menu .app-brand-text {
  color: #fff !important;
}
/* Links: muted white, full white on hover */
.brand-menu .menu-inner .menu-link {
  color: rgba(255, 255, 255, 0.78);
}
.brand-menu .menu-inner .menu-link:hover {
  color: #fff;
}
.brand-menu .menu-inner > .menu-item > .menu-link:hover,
.brand-menu .menu-inner .menu-sub .menu-item > .menu-link:hover {
  background-color: var(--brand-menu-bg-hover);
}
.brand-menu .menu-icon {
  color: rgba(255, 255, 255, 0.7);
}
/* Open submenu parent (e.g. "Dashboards") — subtle highlight, NOT the pill */
.brand-menu .menu-inner > .menu-item.open > .menu-link.menu-toggle {
  background-color: var(--brand-menu-bg-open);
  color: #fff;
}
/* Active LEAF (current page) — teal gradient pill, at any nesting level.
   :not(.menu-toggle) excludes expandable parents so only the real leaf gets it. */
.brand-menu .menu-inner .menu-item.active > .menu-link:not(.menu-toggle) {
  background: var(--brand-menu-active-grad) !important;
  color: #fff !important;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(13, 147, 148, 0.4);
}
.brand-menu .menu-inner .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon {
  color: #fff !important;
}
/* Submenu connector line + bullet markers stay faintly visible on the slate */
.brand-menu .menu-header-text {
  color: rgba(255, 255, 255, 0.5);
}
.brand-menu .menu-divider,
.brand-menu hr {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.brand-menu .menu-sub {
  background-color: transparent;
}

/* ===== Consistent vertical gap between stacked cards / sections ===== */
.container-p-y > .card,
.container-xxl > .card,
.container-fluid > .card,
.container-p-y > .alert,
.container-xxl > .alert {
  margin-bottom: 1.5rem;
}

/* ===== jQuery DataTables — Vuexy polish ===== */
/* Keep using jQuery DataTables; just make the toolbar/table fit the theme cleanly. */
.card-datatable .dt-container {
  padding-block: .25rem 1rem;
}
.card-datatable .dt-layout-row {
  align-items: center;
}
.card-datatable .dt-buttons {
  gap: .5rem;
  display: inline-flex;
  flex-wrap: wrap;
}
/* Toolbar export/print buttons. Inside .dt-buttons the higher-specificity
   .btn-group rule flattens the outline border, leaving a link-like look, so we
   re-assert a full bordered button (rest + hover) deterministically. */
.card-datatable .dt-buttons .btn {
  margin: 0;
  border: 1px solid var(--bs-secondary);
  color: var(--bs-secondary);
  background-color: transparent;
}
.card-datatable .dt-buttons .btn:hover,
.card-datatable .dt-buttons .btn:focus-visible,
.card-datatable .dt-buttons .btn:active,
.card-datatable .dt-buttons .btn.active {
  color: #fff;
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}
/* search + page-length inputs spacing within the toolbar */
.card-datatable div.dt-search,
.card-datatable div.dt-length {
  margin-block: .5rem;
}
.card-datatable table.dataTable thead th {
  font-weight: 600;
}
/* pagination icons mirror correctly in RTL */
.card-datatable .pagination .page-link i {
  vertical-align: middle;
}

/* ===== Bordered datatable ===== */
/* Full cell grid + crisp outer border so the grid reads as a bordered table
   regardless of the Bootstrap table-* classes on the markup. */
.card-datatable table.dataTable {
  border: 1px solid var(--bs-border-color);
  border-collapse: collapse;
}
.card-datatable table.dataTable thead th,
.card-datatable table.dataTable tbody td {
  border: 1px solid var(--bs-border-color);
}
/* keep the row hover/zebra reading cleanly over the borders */
.card-datatable table.dataTable tbody tr:hover > * {
  --bs-table-accent-bg: var(--bs-table-hover-bg);
}

/* ===== Roomier pages ===== */
/* Trim the global page padding so grids/content get more usable space.
   Mirrors Vuexy's own .container-p-y guards so explicit pt-*/pb-* still win. */
.container-p-y:not([class^="pt-"]):not([class*=" pt-"]) {
  padding-block-start: .75rem !important;
}
.container-p-y:not([class^="pb-"]):not([class*=" pb-"]) {
  padding-block-end: .75rem !important;
}
/* slightly tighter side gutters too (content + navbar stay aligned) */
.container-xxl {
  padding-inline: 1rem;
}

/* ===== DataTables processing (loading) overlay ===== */
/* Keep the grid as the positioning context so the overlay covers just the table. */
.dt-container {
  position: relative;
}
/* Translucent backdrop + centered spinner shown on initial load and filter reloads. */
.dt-container .dt-processing {
  position: absolute;
  inset: 0;
  inset-block-start: 3.5rem; /* sit below the toolbar row, over the table body */
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: auto;
  background-color: rgba(var(--bs-paper-bg-rgb), 0.7);
  border: 0;
  box-shadow: none;
  z-index: 5;
}
.dt-container .dt-processing .dt-processing-text {
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}

/* ===== SweetAlert2 ===== */
/* Keep confirm/error dialogs centered in the actual browser viewport even inside
   fixed Vuexy layouts with scrollable content wrappers. */
.swal2-container.app-swal-container {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 1rem !important;
}
.swal2-popup.app-swal-popup {
  margin: 0 !important;
}

/* ===== Flush navbar ===== */
/* Vuexy ships a "detached" (floating) navbar with a top gap, rounded corners,
   side gaps and a max-width cap. Drop all of those so the navbar sticks to the
   top edge and stretches from the side-menu border to the screen edge.
   The fixed navbar already gets inset-inline-start = menu/collapsed width
   (or 0 without a menu) and inset-inline-end = 0, in both LTR and RTL — so we
   just let those insets size the navbar (inline-size:auto) instead of Vuexy's
   explicit width, and drop the container-xxl max-width cap. This covers
   expanded/collapsed/no-menu and both directions with no per-case rules. */
.layout-navbar.navbar-detached {
  margin-block: 0;
  border-radius: 0;
}
.layout-navbar-fixed .layout-navbar.navbar-detached {
  inline-size: auto !important;     /* fill the gap defined by the fixed insets */
  max-inline-size: none !important; /* drop the 1440px container-xxl cap */
}

/* ===== Wizard (bs-stepper) — errored step indicator =====
   A step whose fields failed validation (client or server) gets .step-error.
   Paint its circle + title in the theme warning colour so the user can see
   which tab to fix, independent of the active/crossed states. */
.bs-stepper .step.step-error .bs-stepper-circle {
  background-color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.bs-stepper .step.step-error .bs-stepper-title {
  color: var(--bs-warning) !important;
}

/* ------------------------------------------------------------------ */
/* Filter cards (shared) + FlexiRequest dynamic-request workflow UI    */
/* ------------------------------------------------------------------ */
.grid-filter {
  background-color: var(--bs-gray-50, #f8f7fa);
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
}
html[data-bs-theme="dark"] .grid-filter {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Workflow chain preview shown in the apply wizard / type builder */
.flexi-steps-preview .flexi-step-chip {
  min-width: 190px;
}
.flexi-step-num {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

/* Soft note background used in the request timeline */
.bg-lighter {
  background-color: var(--bs-gray-50, #f8f7fa);
}
html[data-bs-theme="dark"] .bg-lighter {
  background-color: rgba(255, 255, 255, 0.04);
}

/* ===== Attachment lightbox (PDF / image inline preview) ===== */
.app-lightbox .modal-content { position: relative; overflow: hidden; }
.app-lightbox .lb-body {
  position: relative;
  height: 80vh;
  min-height: 24rem;
  background-color: #1e1e2d;
}
.app-lightbox .lb-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.app-lightbox .lb-frame { width: 100%; height: 100%; border: 0; background: #fff; border-radius: .375rem; }
.app-lightbox .lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .375rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .4); }
.app-lightbox .lb-spinner { display: flex; align-items: center; justify-content: center; }
.app-lightbox .lb-fallback { padding: 2rem; }
/* prev / next overlay controls */
.app-lightbox .lb-nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 5;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: rgba(0, 0, 0, .45);
  transition: background-color .15s ease;
}
.app-lightbox .lb-nav:hover { background-color: rgba(0, 0, 0, .75); }
.app-lightbox .lb-prev { inset-inline-start: 1rem; }
.app-lightbox .lb-next { inset-inline-end: 1rem; }

/* ===== Shared profile-photo cropper — "move & scale" (shared/photo-cropper.js) ===== */
.pc-stage {
  inline-size: 100%;
  block-size: 62vh;
  max-block-size: 520px;
  min-block-size: 320px;
  background: #1e1e2d;
  border-radius: .375rem;
  overflow: hidden;
}
/* Cropper.js measures the <img> box at init, then replaces it with its own
   container — fill the stage so the cropper canvas fills the stage too. */
.pc-stage > img { display: block; inline-size: 100%; block-size: 100%; max-inline-size: 100%; }
#photoCropperModal .cropper-container { inline-size: 100% !important; block-size: 100% !important; }

/* Clean, square move-&-scale frame (no oval). White edge like WhatsApp/Apple. */
#photoCropperModal .cropper-view-box { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: -1px; }
#photoCropperModal .cropper-face { background-color: transparent; }
#photoCropperModal .cropper-line,
#photoCropperModal .cropper-point { display: none; }
#photoCropperModal .cropper-modal { opacity: .55; }

.pc-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-block-start: 1rem;
}
.pc-controls .pc-zoom { flex: 1 1 auto; }
.pc-controls .pc-sep {
  inline-size: 1px;
  align-self: stretch;
  background: var(--bs-border-color);
  margin-inline: .25rem;
}

.pc-status {
  margin-block-start: .75rem;
  padding: .5rem .75rem;
  border-radius: .375rem;
  font-size: .8125rem;
  min-block-size: 2.25rem;
  display: flex;
  align-items: center;
}
.pc-status-info  { background: rgba(105, 108, 255, .12); color: #5f61e6; }
.pc-status-ok    { background: rgba(40, 199, 111, .14); color: #1f9d57; }
.pc-status-warn  { background: rgba(255, 171, 0, .16);  color: #b37400; }
.pc-status-error { background: rgba(255, 62, 29, .14);  color: #d33a1c; }

/* ===== DataTables header sort chevrons =====
   The Vuexy theme hides the sort chevrons unless the header is hovered and tints them
   with the low-contrast heading color, so on light headers they're effectively invisible.
   Show them persistently in a dark tone, and fix the header-text spacing: the base library
   reserves the icon space with a physical `padding-right: 30px`, which in RTL lands on the
   start side and pushes a large gap *before* the header text — the chevron actually sits on
   the inline-end. Reserve the space on the correct (logical) side instead. */
table.dataTable thead .dt-orderable-asc.dt-orderable-desc .dt-column-order::before,
table.dataTable thead .dt-orderable-asc.dt-orderable-desc .dt-column-order::after,
table.dataTable thead .dt-ordering-asc .dt-column-order::before,
table.dataTable thead .dt-ordering-desc .dt-column-order::after {
  visibility: visible !important;
  background-color: #4b5563 !important; /* slate-600 — clearly visible on light headers */
  opacity: 0.5 !important;              /* subtle for the inactive/sortable hint */
}

/* The column that's actually sorted: full, near-black, opaque chevron */
table.dataTable thead .dt-ordering-asc .dt-column-order::before,
table.dataTable thead .dt-ordering-desc .dt-column-order::after {
  background-color: #111827 !important;
  opacity: 1 !important;
}

/* Remove the spurious before-text gap and reserve icon space on the inline-end side */
table.dataTable thead > tr > th.dt-orderable-asc,
table.dataTable thead > tr > th.dt-orderable-desc,
table.dataTable thead > tr > th.dt-ordering-asc,
table.dataTable thead > tr > th.dt-ordering-desc,
table.dataTable thead > tr > td.dt-orderable-asc,
table.dataTable thead > tr > td.dt-orderable-desc,
table.dataTable thead > tr > td.dt-ordering-asc,
table.dataTable thead > tr > td.dt-ordering-desc {
  padding-right: 0 !important;            /* drop the library's physical 30px reserve */
  padding-inline-end: 1.875rem !important; /* reserve space where the chevron actually sits */
}