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

:root {
  --staffhr-font: "Cairo", "Tajawal", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --staffhr-sidebar-width: 16rem;
  --staffhr-header-height: 4.375rem;
  --staffhr-text: #1f2937;
  --staffhr-muted: #5f6b7a;
  --staffhr-line: #eef0f4;
  /* Primary brand color (name kept for compatibility — value is now purple) */
  --staffhr-orange: #7c3ef0;
}

html,
body,
button,
input,
select,
textarea,
.select2-container,
.select2-results__option,
.swal2-popup {
  font-family: var(--staffhr-font) !important;
  letter-spacing: 0 !important;
}

body {
  color: var(--staffhr-text);
  font-size: 14px;
  line-height: 1.65;
  direction: rtl;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html[lang="ar"],
html[lang="ar"] body {
  direction: rtl;
  overflow-x: hidden;
}

.ui-helper-hidden-accessible {
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  inset-inline-start: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

a,
button,
input,
select,
textarea {
  font-size: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.oh-main__titlebar-title {
  font-family: var(--staffhr-font) !important;
  color: #111827;
  font-weight: 700;
  line-height: 1.45;
}

.oh-main__titlebar-title,
.oh-main__titlebar-title.fw-bold {
  font-size: 1.25rem !important;
}

#sidebar > .fixed {
  width: var(--staffhr-sidebar-width) !important;
}

#mainContentWrapper {
  margin-right: var(--staffhr-sidebar-width) !important;
}

#header > div:first-child {
  width: calc(100% - var(--staffhr-sidebar-width)) !important;
  min-height: var(--staffhr-header-height);
  padding: 0.75rem 1.25rem !important;
  gap: 1rem;
}

#breadcrumbs-container,
#breadcrumbs-container * {
  font-size: 0.82rem !important;
  color: var(--staffhr-muted);
}

#header .dropdown-wrapper,
#header button,
#header a {
  font-family: var(--staffhr-font) !important;
}

#header > div:first-child > .flex.items-center {
  gap: 1.35rem !important;
  min-width: 0;
}

#header > div:first-child > .flex.items-center > .flex.items-center {
  gap: 0.5rem !important;
  flex-wrap: nowrap;
}

#header button.w-12,
#header .w-12.h-12 {
  width: 2.75rem !important;
  height: 2.75rem !important;
}

#sidebar {
  font-family: var(--staffhr-font) !important;
}

#sidebar .sidebar-scroll {
  height: calc(100vh - 73px) !important;
  overscroll-behavior: contain;
}

#sidebar .sideboxmain {
  min-height: 56px !important;
  padding: 0 22px !important;
  border-bottom-color: var(--staffhr-line);
}

#sidebar .sideboxmain:hover {
  background: #fbfbfc;
}

#sidebar .sideboxmain.active,
#sidebar .sideboxmain.sidebox-active {
  background: var(--staffhr-orange) !important;
  background-color: var(--staffhr-orange) !important;
}

#sidebar .sideboxmain > img,
#sidebar .sideboxmain > svg:not(.sidebar-menu-chevron) {
  right: 22px;
  top: 28px;
  width: 19px;
  height: 19px;
}

/*
 * Sidebar icon visibility fix:
 * All Horilla SVG icons use white strokes (designed for a dark background).
 * Our sidebar is white, so the icons are invisible by default.
 * brightness(0) converts everything to black, opacity softens to gray.
 */
#sidebar .sideboxmain > img {
  filter: brightness(0) opacity(0.52) !important;
  transition: filter 0.2s ease !important;
}

/* On hover: white icons on orange hover tint */
#sidebar .sideboxmain:hover > img {
  filter: brightness(0) invert(1) !important;
}

/* Active / open: white on orange */
#sidebar .sideboxmain.active > img,
#sidebar .sideboxmain.sidebox-active > img {
  filter: brightness(0) invert(1) !important;
}

#sidebar .sidebar-menu-label {
  min-height: 56px !important;
  padding-right: 34px !important;
  padding-left: 24px !important;
  color: inherit;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  white-space: normal !important;
}

#sidebar .sidebar-menu-chevron {
  left: 22px;
  top: 28px;
  width: 15px;
  height: 15px;
}

#sidebar .sidebox ul {
  padding: 0.25rem 0 0.55rem !important;
}

#sidebar .sidebox ul li {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #f0f1f4;
}

#sidebar .sidebox ul li:last-child {
  border-bottom: 0;
}

#sidebar .sidebox ul li a {
  min-height: 42px !important;
  padding: 0.55rem 3.45rem 0.55rem 1.25rem !important;
  color: #667181;
  font-size: 0.94rem !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  justify-content: flex-start;
}

#sidebar .sidebox ul li a:hover,
#sidebar .sidebox ul li a.active {
  color: var(--staffhr-orange);
  background: #f4eefe;
}

.oh-tabs__tab,
.oh-btn,
.btn,
.oh-dropdown__link,
.oh-sticky-table__th,
.oh-sticky-table__td,
.oh-label,
.oh-input,
.oh-select,
.form-control,
.select2-container .select2-selection__rendered {
  font-family: var(--staffhr-font) !important;
}

.oh-input,
.oh-select,
.form-control,
.select2-container .select2-selection__rendered,
input[type="search"] {
  text-align: right;
}

/* Select2 RTL: ensure dropdown list and container follow RTL direction */
.select2-container--rtl,
[dir="rtl"] .select2-container {
  direction: rtl;
}

[dir="rtl"] .select2-dropdown {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .select2-results__option {
  text-align: right;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  left: 0.75rem;
  right: auto;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 2rem;
  padding-right: 0.75rem;
}

.oh-tabs__tab,
.oh-btn,
.btn {
  font-size: 0.92rem !important;
  font-weight: 600;
  line-height: 1.45;
}

.oh-label {
  font-size: 0.9rem !important;
  font-weight: 600;
  color: #273142;
}

.oh-input,
.oh-select,
.form-control,
.select2-container .select2-selection--single {
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
}

.oh-profile__info-value,
.oh-profile__info-title,
.oh-card,
.oh-card *,
.oh-profile-section__card,
.oh-profile-section__card * {
  letter-spacing: 0 !important;
}

.breadcrumb {
  direction: rtl;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  margin: 0;
  align-items: center;
}

.breadcrumb li,
.breadcrumb li a {
  font-family: var(--staffhr-font) !important;
}

/*
 * Breadcrumb separator in RTL.
 * The base theme positions the chevron absolutely at right:-15px (sized for a
 * 1.5rem gap) and points it right (\f105). With our reduced gap that overlaps
 * the text, and a right-pointing chevron is wrong for RTL reading. Make the
 * separator flow inline before each crumb and point left (\f104).
 */
.breadcrumb li:not(:last-child)::before {
  content: "\f104" !important;
  position: static !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin: 0 0 0 0.5rem !important;
  display: inline-block;
  color: #9aa0a6;
}

.oh-table_sticky--wrapper,
.oh-sticky-table,
.oh-sticky-table__table,
.staffhr-docs-table-wrap,
.staffhr-vehicle-table-wrap {
  direction: rtl;
}

.oh-sticky-table__th,
.oh-sticky-table__td,
.oh-sticky-table__sd,
.staffhr-docs-table th,
.staffhr-docs-table td,
.staffhr-vehicle-table th,
.staffhr-vehicle-table td {
  text-align: right !important;
}

.oh-sticky-table__right,
.staffhr-docs-actions,
.staffhr-vehicle-actions {
  justify-content: flex-start;
}

[dir="rtl"] .oh-table_sticky--wrapper {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
}

/* Keep the ⋮ settings button at its original right-side position
   (right = start/prominent side in RTL layout) */
[dir="rtl"] .oh-sticky-dropdown--header {
  z-index: 20 !important;
}

[dir="rtl"] .oh-sticky-dropdown_btn {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  border-radius: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

/* Dropdown opens LEFTWARD (away from the right sidebar).
   right: 0  → right edge of dropdown aligns with button's right edge.
   left: auto → extends leftward into content area.
   Clamp width so it never overflows the left viewport edge. */
[dir="rtl"] .oh-sticky-table_dropdown {
  right: 0 !important;
  left: auto !important;
  max-width: min(18rem, calc(100vw - 2rem));
  text-align: right;
}

[dir="rtl"] .oh-sticky-table__sd,
[dir="rtl"] .oh-sticky-table__thead div.oh-sticky-table__th:first-child,
[dir="rtl"] .oh-sticky-table__tfoot div.oh-sticky-table__th:first-child {
  right: 0 !important;
  left: auto !important;
  border-left: 1px solid hsl(213, 22%, 93%);
  border-right: 0;
}

[dir="rtl"] .oh-sticky-table__right,
[dir="rtl"] .oh-sticky-table__sr {
  left: 0 !important;
  right: auto !important;
  border-right: 1px solid hsl(213, 22%, 93%);
  border-left: 0;
}

[dir="rtl"] .oh-dropdown__menu--right,
[dir="rtl"] .oh-dropdown__import--right {
  right: auto !important;
  left: 0 !important;
}

[dir="rtl"] .oh-dropdown__menu {
  max-width: min(22rem, calc(100vw - 2rem));
  overflow-wrap: anywhere;
}

[dir="rtl"] .sidebarModal {
  right: auto !important;
  left: 1rem !important;
  transform: translateX(calc(-100% - 1rem)) !important;
}

[dir="rtl"] .sidebarModal.active {
  transform: translateX(0) !important;
}

.sidebarModal:not(.active) {
  visibility: hidden;
  pointer-events: none;
}

.sidebarModal.active {
  visibility: visible;
  pointer-events: auto;
}

[dir="rtl"] .oh-inner-sidebar {
  border-right: 0;
  border-left: 1px solid hsl(213, 22%, 93%);
  text-align: right;
}

[dir="rtl"] .oh-inner-sidebar__items {
  padding-right: 0;
  padding-left: 0;
}

[dir="rtl"] .oh-inner-sidebar__link {
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
}

[dir="rtl"] .oh-inner-sidebar-content {
  min-width: 0;
}

[dir="rtl"] .oh-general__tabs,
[dir="rtl"] .oh-general__tabs--profile,
[dir="rtl"] .oh-tabs__tablist {
  direction: rtl;
  padding-inline-start: 2.75rem;
}

[dir="rtl"] .oh-general__tab,
[dir="rtl"] .oh-general__tab-link {
  white-space: nowrap;
}

.oh-btn,
.btn,
.staffhr-docs-nav__link,
.staffhr-vehicle-nav__link {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
  justify-content: center;
  white-space: normal;
}

.oh-main__titlebar,
.oh-main__titlebar--right,
.oh-main__titlebar-button-container {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.oh-main__titlebar-search {
  min-width: min(100%, 260px);
}

.oh-main__titlebar-search input,
.oh-main__titlebar-search .oh-input {
  min-height: 42px;
}

.oh-pagination,
.oh-pagination__nav,
.oh-pagination__items {
  direction: rtl;
  flex-wrap: wrap;
}

/*
 * Profile-view gear/actions button: sits on the LEFT edge in RTL
 * (its flex parent uses justify-end = END side = LEFT in RTL row direction).
 * The Tailwind "absolute right-0" dropdown would extend further left → off-screen.
 * Flip it: anchor the LEFT edge, extend rightward into the content area.
 */
[dir="rtl"] .relative.inline-block > .absolute.right-0 {
  right: auto !important;
  left: 0 !important;
}

/* Fix text alignment inside the flipped profile-actions dropdown */
[dir="rtl"] .relative.inline-block > .absolute .text-left {
  text-align: right !important;
}

.oh-dropdown__menu {
  text-align: right;
}

[dir="rtl"] .oh-dropdown {
  position: relative;
}

/* General dropdowns: anchor right edge, extend leftward.
   right: 0 aligns dropdown's right edge with button, extends LEFT into content area.
   max-width prevents it from reaching the left viewport edge. */
[dir="rtl"] .oh-dropdown__menu,
[dir="rtl"] .oh-dropdown__filter {
  left: auto !important;
  right: 0 !important;
  max-width: min(92vw, 540px);
  min-width: min(92vw, 280px);
  direction: rtl;
  text-align: right;
  z-index: 10040;
}

/* --right variant: for dropdowns whose trigger is near the left edge */
[dir="rtl"] .oh-dropdown__menu--right {
  left: 0 !important;
  right: auto !important;
}

[dir="rtl"] .oh-dropdown__filter-body,
[dir="rtl"] .oh-accordion,
[dir="rtl"] .oh-accordion-header,
[dir="rtl"] .oh-accordion-body {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .oh-dropdown__filter .row {
  direction: rtl;
}

[dir="rtl"] .oh-dropdown__filter .oh-input-group {
  min-width: 0;
}

[dir="rtl"] .oh-dropdown__filter .oh-label {
  display: block;
  text-align: right;
}

[dir="rtl"] .pvtUi,
[dir="rtl"] .pvtUi *,
[dir="rtl"] .pvtFilterBox,
[dir="rtl"] .pvtFilterBox * {
  font-family: var(--staffhr-font) !important;
}

[dir="rtl"] #pivot-container {
  direction: ltr;
  max-width: 100%;
  overflow-x: auto;
  padding-inline: 0.25rem;
}

[dir="rtl"] .pvtUi {
  direction: ltr;
  margin: 0 !important;
  text-align: right;
  width: 100% !important;
  max-width: 100%;
}

[dir="rtl"] .pvtUi table,
[dir="rtl"] .pvtUi td,
[dir="rtl"] .pvtUi th,
[dir="rtl"] .pvtUi select,
[dir="rtl"] .pvtUi option,
[dir="rtl"] .pvtUi input,
[dir="rtl"] .pvtUi li,
[dir="rtl"] .pvtUi span {
  direction: rtl;
}

[dir="rtl"] table.pvtTable {
  direction: rtl;
  font-size: 0.82rem;
  text-align: right;
  min-width: max-content;
}

[dir="rtl"] table.pvtTable tbody tr th,
[dir="rtl"] table.pvtTable thead tr th,
[dir="rtl"] table.pvtTable tbody tr td {
  padding: 0.65rem 0.75rem;
  text-align: right;
  vertical-align: middle;
}

[dir="rtl"] .pvtAxisContainer,
[dir="rtl"] .pvtVals {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  min-width: 11rem;
  padding: 0.6rem;
}

[dir="rtl"] .pvtAxisContainer li {
  margin: 0.2rem 0;
  padding: 0.35rem 0.45rem;
}

[dir="rtl"] .pvtAxisContainer li span.pvtAttr {
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  display: inline-flex;
  gap: 0.35rem;
  max-width: 100%;
  min-height: 30px;
  padding: 0.25rem 0.55rem;
  white-space: normal;
}

[dir="rtl"] .pvtTriangle {
  display: inline-flex;
  margin-inline-start: 0.35rem;
}

[dir="rtl"] .pvtFilterBox {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 18px 42px -18px rgba(15, 23, 42, 0.35);
  direction: rtl;
  max-width: min(92vw, 320px);
  min-width: min(92vw, 260px);
  padding: 0;
  text-align: right;
  width: min(92vw, 320px);
  z-index: 10050;
}

[dir="rtl"] .pvtFilterBox h4 {
  border-bottom: 1px solid #eef0f4;
  font-size: 0.95rem;
  margin: 0;
  padding: 0.85rem 1rem;
  text-align: right;
}

[dir="rtl"] .pvtFilterBox p {
  margin: 0.55rem 0.75rem;
  text-align: right;
}

[dir="rtl"] .pvtFilterBox input[type="text"] {
  border: 1px solid #d9dee8;
  border-radius: 6px;
  min-height: 38px;
  padding: 0.45rem 0.65rem;
  text-align: right;
  width: 100%;
}

[dir="rtl"] .pvtCheckContainer {
  direction: rtl;
  max-height: 230px;
  overflow-y: auto;
  padding: 0.35rem 0.55rem;
  text-align: right;
  white-space: normal;
}

[dir="rtl"] .pvtCheckContainer p {
  align-items: center;
  display: flex;
  gap: 0.45rem;
  justify-content: flex-start;
  margin: 0.35rem 0;
}

[dir="rtl"] .pvtFilterBox input[type="checkbox"] {
  margin: 0;
}

[dir="rtl"] .pvtFilterBox button {
  border: 0;
  min-height: 42px;
  padding: 0.5rem 0.9rem;
}

[dir="rtl"] .pvtFilterBox button:first-of-type {
  background: #f3f4f6;
  color: #374151;
}

[dir="rtl"] .pvtFilterBox button:last-of-type {
  background: #ef4d3f;
  color: #fff;
}

[dir="rtl"] .pvtRendererArea {
  max-width: 100%;
  overflow-x: auto;
  padding: 0.75rem;
  text-align: right;
}

[dir="rtl"] .pvtUnused,
[dir="rtl"] .pvtRows,
[dir="rtl"] .pvtCols,
[dir="rtl"] .pvtVals {
  vertical-align: top;
}

[dir="rtl"] .pvtAggregator,
[dir="rtl"] .pvtRenderer {
  border: 1px solid #d9dee8;
  border-radius: 6px;
  min-height: 36px;
  padding: 0.35rem 0.45rem;
  text-align: right;
}

[dir="rtl"] .oh-wrapper:has(.pvtUi) {
  max-width: 100%;
}

/*
 * Flip Tailwind's physical-direction utilities for RTL.
 * "text-left" in an Arabic HR UI means "right-aligned" (end-aligned).
 * We override at the global [dir="rtl"] level so every table/form/card
 * aligns correctly without touching individual templates.
 * Exception: add class "keep-ltr" to any element that must stay left-aligned
 * (phone numbers in LTR blocks, code snippets, etc.).
 */
[dir="rtl"] .text-left:not(.keep-ltr) {
  text-align: right !important;
}

/* Tailwind ml-auto/mr-auto: swap for RTL margin-inline equivalents */
[dir="rtl"] .ml-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}

[dir="rtl"] .mr-auto {
  margin-right: 0 !important;
  margin-left: auto !important;
}

[dir="rtl"] .ms-1 {
  margin-left: 0 !important;
  margin-right: 0.25rem !important;
}

[dir="rtl"] .ms-2 {
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}

[dir="rtl"] .me-1 {
  margin-right: 0 !important;
  margin-left: 0.25rem !important;
}

[dir="rtl"] .me-2 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}

@media (max-width: 1280px) {
  :root {
    --staffhr-sidebar-width: 14.5rem;
  }

  #sidebar .sidebar-menu-label {
    font-size: 0.96rem !important;
  }

  #sidebar .sidebox ul li a {
    font-size: 0.9rem !important;
    padding-right: 3.15rem !important;
  }

  #header > div:first-child > .flex.items-center {
    gap: 0.85rem !important;
  }
}

@media (max-width: 1024px) {
  :root {
    --staffhr-sidebar-width: 13.25rem;
    --staffhr-header-height: 4rem;
  }

  body {
    font-size: 13.5px;
  }

  #header > div:first-child {
    padding: 0.55rem 0.9rem !important;
  }

  #header button.w-12,
  #header .w-12.h-12 {
    width: 2.45rem !important;
    height: 2.45rem !important;
  }

  #ohMainContent {
    padding: 5.5rem 1rem 1rem !important;
  }

  #sidebar .sideboxmain {
    min-height: 52px !important;
    padding: 0 16px !important;
  }

  #sidebar .sideboxmain > img,
  #sidebar .sideboxmain > svg:not(.sidebar-menu-chevron) {
    right: 16px;
    top: 26px;
  }

  #sidebar .sidebar-menu-label {
    min-height: 52px !important;
    padding-right: 30px !important;
    padding-left: 20px !important;
    font-size: 0.9rem !important;
  }

  #sidebar .sidebar-menu-chevron {
    left: 16px;
    top: 26px;
  }
}

@media (max-width: 768px) {
  :root {
    --staffhr-sidebar-width: 5rem;
  }

  #sidebar .sidebar-menu-label,
  #sidebar .sideboxmain .sidebar-menu-chevron {
    display: none !important;
  }

  #sidebar .sideboxmain {
    justify-content: center;
    padding: 0 !important;
  }

  #sidebar .sideboxmain > img,
  #sidebar .sideboxmain > svg:not(.sidebar-menu-chevron) {
    position: static;
    transform: none;
    margin: 0 auto;
  }

  #sidebar .sideboxmain.sidebox-active > .sidebox {
    position: fixed !important;
    top: 73px !important;
    right: var(--staffhr-sidebar-width) !important;
    width: min(17rem, calc(100vw - var(--staffhr-sidebar-width))) !important;
    max-height: calc(100vh - 73px);
    overflow-y: auto;
    box-shadow: 0 18px 42px -20px rgba(15, 23, 42, 0.35) !important;
  }

  #sidebar .sidebox ul li a {
    padding-right: 1.25rem !important;
  }

  #header > div:first-child {
    flex-wrap: wrap;
    align-content: center;
    row-gap: 0.4rem;
  }

  #breadcrumbs-container {
    max-width: 100%;
    order: 2;
  }

  #ohMainContent {
    padding-top: 6.5rem !important;
  }

  [dir="rtl"] .oh-dropdown__menu,
  [dir="rtl"] .oh-dropdown__filter {
    left: 0.5rem !important;
    right: 0.5rem !important;
    max-width: calc(100vw - 1rem);
    min-width: 0;
    width: auto !important;
  }

  [dir="rtl"] .pvtUi {
    display: block;
    overflow-x: auto;
  }

  [dir="rtl"] .pvtUi > tbody,
  [dir="rtl"] .pvtUi > tbody > tr,
  [dir="rtl"] .pvtUi > tbody > tr > td {
    display: block;
    width: 100%;
  }

  [dir="rtl"] .pvtAxisContainer,
  [dir="rtl"] .pvtVals {
    margin-bottom: 0.5rem;
    min-width: 100%;
  }
}

@media (max-width: 520px) {
  :root {
    --staffhr-sidebar-width: 4.25rem;
  }

  body {
    font-size: 13px;
  }

  #header > div:first-child > .flex.items-center > .flex.items-center {
    gap: 0.35rem !important;
  }

  #header button.w-12,
  #header .w-12.h-12 {
    width: 2.15rem !important;
    height: 2.15rem !important;
  }

  #ohMainContent {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD ENHANCEMENTS
   Improves the visual quality of stat cards, section panels and
   the overall dashboard layout without touching any template HTML.
   ═══════════════════════════════════════════════════════════════ */

/* ── Stat cards (top row) ────────────────────────────────────── */
.oh-card-dashboard {
  border-radius: 16px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  overflow: hidden;
}

.oh-card-dashboard:not(.oh-card-dashboard--no-scale):hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px -8px rgba(15, 23, 42, 0.18) !important;
}

/* Large count number */
.oh-card-dashboard__count {
  font-size: 2.6rem !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  font-family: var(--staffhr-font) !important;
  letter-spacing: -0.02em !important;
}

/* Card title label */
.oh-card-dashboard__title {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  opacity: 0.85;
}

/* Neutral card — today's attendance (blue-gray gradient) */
.oh-card-dashboard--neutral {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
  border-inline-start: 4px solid #6366f1 !important;
}

.oh-card-dashboard--neutral .oh-card-dashboard__count {
  color: #4338ca !important;
}

.oh-card-dashboard--neutral .oh-card-dashboard__title {
  color: #3730a3 !important;
}

/* Success card — on-time (green gradient) */
.oh-card-dashboard--success {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  border-inline-start: 4px solid #10b981 !important;
}

.oh-card-dashboard--success .oh-card-dashboard__count {
  color: #047857 !important;
}

.oh-card-dashboard--success .oh-card-dashboard__title {
  color: #065f46 !important;
}

/* Danger card — late arrivals (red gradient) */
.oh-card-dashboard--danger {
  background: linear-gradient(135deg, #fff5f5 0%, #fee2e2 100%) !important;
  border-inline-start: 4px solid #ef4444 !important;
}

.oh-card-dashboard--danger .oh-card-dashboard__count {
  color: #b91c1c !important;
}

.oh-card-dashboard--danger .oh-card-dashboard__title {
  color: #991b1b !important;
}

/* ── Section/panel cards (data tables and charts) ────────────── */
.oh-card-dashboard--transparent {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #f0f2f8 !important;
  box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.07) !important;
}

.oh-card-dashboard__header--divider {
  border-bottom: 1.5px solid #f0f2f8 !important;
  padding-bottom: 0.9rem !important;
  margin-bottom: 0.25rem !important;
}

.oh-card-dashboard__header--divider .oh-card-dashboard__title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  opacity: 1 !important;
}

/* ── Status badges in employee list (At work / Pending) ─────── */
.oh-card-dashboard__body .badge,
.oh-card-dashboard__body [class*="badge"] {
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 0.25em 0.7em !important;
  letter-spacing: 0 !important;
}

/* ── Dashboard top wrapper spacing ──────────────────────────── */
.oh-wrapper .oh-dashboard__cards {
  row-gap: 1rem !important;
}

.oh-wrapper .oh-dashboard__cards .oh-card-dashboard {
  margin-bottom: 0 !important;
}

/* ── Attendance table inside dashboard ───────────────────────── */
.oh-card-dashboard .oh-sticky-table__th {
  background: #f8fafc !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #374151 !important;
  letter-spacing: 0 !important;
  border-bottom: 1.5px solid #e5e7eb !important;
}

.oh-card-dashboard .oh-sticky-table__td {
  font-size: 0.88rem !important;
  color: #374151 !important;
  vertical-align: middle !important;
}

/* ── Top-menu tooltip card ────────────────────────────────────── */
#topMenuTooltip,
.oh-topbar__tooltip {
  border-radius: 10px !important;
  font-family: var(--staffhr-font) !important;
}

/* ── Sidebar submenu panel header ────────────────────────────── */
#sidebar .sidebox h5,
#sidebarSharedPanel h5 {
  font-family: var(--staffhr-font) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--staffhr-orange) !important;
  text-align: right !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

/* ── General page title bar improvements ────────────────────── */
.oh-main__titlebar {
  border-bottom: 1.5px solid #f0f2f8;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
}

/* ── Animated loading placeholder ───────────────────────────── */
.animated-background {
  border-radius: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   MODERN UI OVERHAUL (2026-06) — app-wide visual refresh applied to ALL
   dashboard pages/branches. Purely cosmetic: no markup or logic changes.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --sx-canvas: #f5f6fa;
  --sx-surface: #ffffff;
  --sx-line: #eceef3;
  --sx-line-soft: #f1f3f7;
  --sx-ink: #0f172a;
  --sx-muted: #8a93a3;
  --sx-radius: 16px;
  --sx-radius-sm: 10px;
  --sx-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 26px -18px rgba(16,24,40,.16);
  --sx-shadow-hover: 0 14px 34px -18px rgba(16,24,40,.22);
  --sx-brand: var(--staffhr-orange);
}

/* ── App canvas: soft gray so white cards lift off the page ───────────── */
body { background: var(--sx-canvas) !important; }
#mainContentWrapper, #ohMainContent { background: transparent !important; }

/* ── Unified card / panel surface across the whole app ───────────────── */
.shadow-card,
.oh-card,
.oh-card-dashboard,
.oh-profile-section__card,
.oh-inner-sidebar,
.oh-accordion,
#ohMainContent .bg-white.rounded-md,
#ohMainContent .bg-white.rounded-lg,
#ohMainContent .bg-white.shadow-card {
  border-radius: var(--sx-radius) !important;
  border: 1px solid var(--sx-line) !important;
  box-shadow: var(--sx-shadow) !important;
}

.oh-card-dashboard:not(.oh-card-dashboard--no-scale):hover,
.shadow-card.group:hover {
  box-shadow: var(--sx-shadow-hover) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.oh-btn,
.btn,
button.oh-btn,
.oh-dropdown__toggle {
  border-radius: var(--sx-radius-sm) !important;
  font-weight: 600 !important;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease !important;
}
.oh-btn:hover,
.btn:hover { transform: translateY(-1px); }
.oh-btn--secondary {
  background: var(--sx-brand) !important;
  border-color: var(--sx-brand) !important;
  box-shadow: 0 6px 16px -8px rgba(124,62,240,.5) !important;
}
.oh-btn--light {
  background: #fff !important;
  border: 1px solid var(--sx-line) !important;
  color: #475569 !important;
}
.oh-btn--light:hover { background: #f8fafc !important; }

/* ── Inputs / selects ────────────────────────────────────────────────── */
.oh-input,
.oh-select,
.form-control,
input[type="text"], input[type="email"], input[type="number"],
input[type="date"], input[type="month"], input[type="search"],
input[type="password"], textarea,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-radius: var(--sx-radius-sm) !important;
  border: 1px solid #e5e7eb !important;
  min-height: 42px;
  transition: border-color .14s ease, box-shadow .14s ease !important;
}
.oh-input:focus,
.oh-select:focus,
.form-control:focus,
input:focus, textarea:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
  border-color: var(--sx-brand) !important;
  box-shadow: 0 0 0 3px rgba(124,62,240,.12) !important;
  outline: none !important;
}

/* ── Tables: clean header, soft rows, hover ──────────────────────────── */
.oh-sticky-table__thead .oh-sticky-table__th,
.fixed-table thead th,
table thead th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--sx-line) !important;
}
.oh-sticky-table__td,
.fixed-table tbody td { border-color: var(--sx-line-soft) !important; }
.oh-sticky-table__tr:hover,
.fixed-table tbody tr:hover { background: #fafbfc !important; }

/* ── Badges / pills ──────────────────────────────────────────────────── */
.oh-badge,
.badge,
[class*="oh-badge--"] { border-radius: 20px !important; font-weight: 600 !important; }

/* ── Tabs ────────────────────────────────────────────────────────────── */
.oh-general__tab-link,
.oh-tabs__tab {
  border-radius: var(--sx-radius-sm) !important;
  transition: background-color .14s ease, color .14s ease !important;
}
.oh-general__tab-link.active,
.oh-tabs__tab--active {
  background: #f4eefe !important;
  color: var(--sx-brand) !important;
  font-weight: 700 !important;
}

/* ── Modals / dialogs ────────────────────────────────────────────────── */
.oh-modal__dialog,
.oh-modal__dialog-relative {
  border-radius: 18px !important;
  border: 1px solid var(--sx-line) !important;
  box-shadow: 0 30px 70px -30px rgba(15,23,42,.45) !important;
}
.oh-modal__dialog-header { border-bottom: 1px solid var(--sx-line-soft) !important; }

/* ── Dropdown menus ──────────────────────────────────────────────────── */
.oh-dropdown__menu,
.oh-dropdown__filter,
.oh-sticky-table_dropdown {
  border-radius: 14px !important;
  border: 1px solid var(--sx-line) !important;
  box-shadow: 0 18px 44px -22px rgba(15,23,42,.4) !important;
}

/* ── Pagination ──────────────────────────────────────────────────────── */
.oh-pagination__link,
.oh-pagination__item a {
  border-radius: 8px !important;
}

/* ── Header: crisp, subtle bottom border ─────────────────────────────── */
#header > div:first-child {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid var(--sx-line) !important;
}
#header button.w-12, #header .w-12.h-12 { border-radius: 12px !important; }

/* ── Sidebar: white, rounded active pill ─────────────────────────────── */
#sidebar > .fixed { background: #fff !important; border-inline-start: 1px solid var(--sx-line) !important; }
#sidebar .sideboxmain {
  margin: 2px 8px !important;
  border-radius: 12px !important;
  border-bottom: 0 !important;
  min-height: 48px !important;
}
#sidebar .sideboxmain:hover { background: #f7f8fb !important; }
#sidebar .sideboxmain.active,
#sidebar .sideboxmain.sidebox-active {
  background: var(--sx-brand) !important;
  box-shadow: 0 8px 18px -10px rgba(124,62,240,.6) !important;
}
#sidebar .sideboxmain.active .sidebar-menu-label,
#sidebar .sideboxmain.sidebox-active .sidebar-menu-label { color: #fff !important; }

/* ── Page title bar ──────────────────────────────────────────────────── */
.oh-main__titlebar-title { letter-spacing: -.01em; }

/* ── Profile section header card ─────────────────────────────────────── */
.oh-profile-section .oh-profile-section__card { padding: 18px !important; }

/* ── Scrollbar polish ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d4d8e0; border-radius: 8px; border: 2px solid var(--sx-canvas); }
::-webkit-scrollbar-thumb:hover { background: #b9bfcb; }
::-webkit-scrollbar-track { background: transparent; }

/* ── System messages (toasts) vs sidebar ─────────────────────────────────
   The redesigned sidebar stacks at z-index 10055–10070 while the stock
   .oh-alert-container sits at 9999 AND is pinned to the RIGHT edge — the
   exact strip the sidebar occupies in RTL. Result: server error/success
   messages render behind the sidebar and are never seen.
   Fix: lift alerts above every shell layer, and in RTL move the toast
   stack to the LEFT side (away from the sidebar). SweetAlert dialogs get
   the same lift so their backdrop/modal is never under the sidebar. */
.oh-alert-container {
  z-index: 10080 !important;
}
[dir="rtl"] .oh-alert-container {
  right: auto !important;
  left: 2rem !important;
}
@media (max-width: 575.98px) {
  [dir="rtl"] .oh-alert-container {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
  }
}
.swal2-container {
  z-index: 10080 !important;
}