/**
 * Repair UI fixes — icon fonts + RTL sidebar alignment
 * Loaded last via assets_helper when this file exists.
 */

/* --------------------------------------------------------------------------
   Glyphicons — redeclare face + protect from Inter/Tailwind overrides
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Glyphicons Halflings";
  src: url("../plugins/bootstrap/fonts/glyphicons-halflings-regular.eot");
  src: url("../plugins/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
       url("../plugins/bootstrap/fonts/glyphicons-halflings-regular.woff2") format("woff2"),
       url("../plugins/bootstrap/fonts/glyphicons-halflings-regular.woff") format("woff"),
       url("../plugins/bootstrap/fonts/glyphicons-halflings-regular.ttf") format("truetype"),
       url("../plugins/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}

.glyphicon,
.glyphicon:before,
.glyphicon:after {
  font-family: "Glyphicons Halflings" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: none;
}

/* --------------------------------------------------------------------------
   FullCalendar fc-icons — element + ::before must use fcicons
   -------------------------------------------------------------------------- */
.fc-icon,
.fc-icon:before,
.fc-icon:after,
.fc .fc-button .fc-icon,
.fc .fc-button .fc-icon:before {
  font-family: "fcicons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: none;
}

/* Sidebar arrow uses FA codepoints */
.sidebar .fa.arrow:before,
.sidebar .active > a > .fa.arrow:before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

/* --------------------------------------------------------------------------
   RTL sidebar ONLY — scoped to #side-menu / #setup-menu top-level links.
   Must NEVER affect #wrapper content, modals, or module dropdowns.
   Far Right = Icon | Middle = Text | Far Left = Arrow
   -------------------------------------------------------------------------- */
body.rtl #side-menu > li > a,
body.rtl #setup-menu > li > a,
[dir="rtl"] #side-menu > li > a,
[dir="rtl"] #setup-menu > li > a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
}

body.rtl #side-menu > li > a > i.menu-icon,
body.rtl #side-menu > li > a > i.fa,
body.rtl #setup-menu > li > a > i.menu-icon,
body.rtl #setup-menu > li > a > i.fa,
[dir="rtl"] #side-menu > li > a > i.menu-icon,
[dir="rtl"] #side-menu > li > a > i.fa,
[dir="rtl"] #setup-menu > li > a > i.menu-icon,
[dir="rtl"] #setup-menu > li > a > i.fa {
  order: 1 !important;
  float: none !important;
  margin-left: 10px !important;
  margin-right: 0 !important;
}

body.rtl #side-menu > li > a > span.menu-text,
body.rtl #side-menu > li > a > span:not(.arrow):not(.fa),
body.rtl #setup-menu > li > a > span.menu-text,
body.rtl #setup-menu > li > a > span:not(.arrow):not(.fa),
[dir="rtl"] #side-menu > li > a > span.menu-text,
[dir="rtl"] #side-menu > li > a > span:not(.arrow):not(.fa),
[dir="rtl"] #setup-menu > li > a > span.menu-text,
[dir="rtl"] #setup-menu > li > a > span:not(.arrow):not(.fa) {
  order: 2 !important;
  flex-grow: 1 !important;
  text-align: right !important;
}

body.rtl #side-menu > li > a > span.arrow,
body.rtl #side-menu > li > a > span.fa.arrow,
body.rtl #setup-menu > li > a > span.arrow,
body.rtl #setup-menu > li > a > span.fa.arrow,
[dir="rtl"] #side-menu > li > a > span.arrow,
[dir="rtl"] #side-menu > li > a > span.fa.arrow,
[dir="rtl"] #setup-menu > li > a > span.arrow,
[dir="rtl"] #setup-menu > li > a > span.fa.arrow {
  order: 3 !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 0 !important;
}

/* Nested sidebar items — still scoped to side-menu trees only */
body.rtl #side-menu .nav-second-level > li > a,
body.rtl #setup-menu .nav-second-level > li > a,
[dir="rtl"] #side-menu .nav-second-level > li > a,
[dir="rtl"] #setup-menu .nav-second-level > li > a {
  padding: 5px 48px 5px 15px !important;
}

body.rtl #side-menu .nav-second-level > li > a > i.menu-icon,
body.rtl #setup-menu .nav-second-level > li > a > i.menu-icon,
[dir="rtl"] #side-menu .nav-second-level > li > a > i.menu-icon,
[dir="rtl"] #setup-menu .nav-second-level > li > a > i.menu-icon {
  float: none !important;
  margin-right: 0 !important;
  margin-left: 5px !important;
}

/* --------------------------------------------------------------------------
   Task list: keep row action links (ویرایش | حذف) on a new line under title
   -------------------------------------------------------------------------- */
.table-tasks .row-options,
#tasks_bulk_actions + table .row-options,
table.dataTable tbody td .row-options {
  display: block !important;
  clear: both !important;
  margin-top: 4px !important;
  width: 100% !important;
}

body.rtl .table-tasks .row-options,
body.rtl table.dataTable tbody td .row-options,
[dir="rtl"] .table-tasks .row-options,
[dir="rtl"] table.dataTable tbody td .row-options {
  display: block !important;
  clear: both !important;
  width: 100% !important;
  margin-top: 4px !important;
  padding-top: 2px !important;
  text-align: right;
}

/* Title is truncated with max-width; force related/meta onto their own flow */
.table-tasks .main-tasks-table-href-name,
table.dataTable tbody td .main-tasks-table-href-name {
  display: block !important;
  max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   Tailwind RTL: dividers + horizontal spacing (dashboard widgets, etc.)
   -------------------------------------------------------------------------- */
body.rtl .tw-divide-x > :not([hidden]) ~ :not([hidden]),
[dir="rtl"] .tw-divide-x > :not([hidden]) ~ :not([hidden]) {
  border-right-width: 1px !important;
  border-left-width: 0px !important;
}

body.rtl .tw-divide-x-reverse > :not([hidden]) ~ :not([hidden]),
[dir="rtl"] .tw-divide-x-reverse > :not([hidden]) ~ :not([hidden]) {
  border-right-width: 0px !important;
  border-left-width: 1px !important;
}

body.rtl .tw-space-x-1 > :not([hidden]) ~ :not([hidden]),
[dir="rtl"] .tw-space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse)) !important;
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))) !important;
}

body.rtl .tw-space-x-1\.5 > :not([hidden]) ~ :not([hidden]),
[dir="rtl"] .tw-space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
  margin-right: calc(0.375rem * var(--tw-space-x-reverse)) !important;
  margin-left: calc(0.375rem * calc(1 - var(--tw-space-x-reverse))) !important;
}

body.rtl .tw-space-x-2 > :not([hidden]) ~ :not([hidden]),
[dir="rtl"] .tw-space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse)) !important;
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))) !important;
}

body.rtl .tw-space-x-3 > :not([hidden]) ~ :not([hidden]),
[dir="rtl"] .tw-space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse)) !important;
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))) !important;
}

body.rtl .tw-space-x-4 > :not([hidden]) ~ :not([hidden]),
[dir="rtl"] .tw-space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
  margin-right: calc(1rem * var(--tw-space-x-reverse)) !important;
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))) !important;
}

/* Todo widget: divider sits between the two header links in RTL */
body.rtl .todo-widget-header-actions > a:first-child,
[dir="rtl"] .todo-widget-header-actions > a:first-child {
  padding-left: 0.5rem !important;
  padding-right: 0 !important;
}

body.rtl .todo-widget-header-actions > a:last-child,
[dir="rtl"] .todo-widget-header-actions > a:last-child {
  padding-right: 0.5rem !important;
  padding-left: 0 !important;
}

/* --------------------------------------------------------------------------
   Global RTL DataTables Headers (all tables system-wide)
   Text RIGHT · sorting arrows FAR LEFT
   -------------------------------------------------------------------------- */
body.rtl table.dataTable thead th,
body.rtl table.dataTable thead td,
[dir="rtl"] table.dataTable thead th,
[dir="rtl"] table.dataTable thead td {
  text-align: right !important;
  padding-right: 10px !important;
  padding-left: 28px !important; /* Space for sorting icons on the left */
}

/* Move DataTables sorting arrows to the FAR LEFT of the header cell in RTL */
body.rtl table.dataTable thead .sorting,
body.rtl table.dataTable thead .sorting_asc,
body.rtl table.dataTable thead .sorting_desc,
[dir="rtl"] table.dataTable thead .sorting,
[dir="rtl"] table.dataTable thead .sorting_asc,
[dir="rtl"] table.dataTable thead .sorting_desc {
  background-position: left 8px center !important;
}

body.rtl table.dataTable thead .sorting:before,
body.rtl table.dataTable thead .sorting_asc:before,
body.rtl table.dataTable thead .sorting_desc:before,
body.rtl table.dataTable thead .sorting:after,
body.rtl table.dataTable thead .sorting_asc:after,
body.rtl table.dataTable thead .sorting_desc:after,
[dir="rtl"] table.dataTable thead .sorting:before,
[dir="rtl"] table.dataTable thead .sorting_asc:before,
[dir="rtl"] table.dataTable thead .sorting_desc:before,
[dir="rtl"] table.dataTable thead .sorting:after,
[dir="rtl"] table.dataTable thead .sorting_asc:after,
[dir="rtl"] table.dataTable thead .sorting_desc:after {
  right: auto !important;
  left: 8px !important;
}

/* --------------------------------------------------------------------------
   Global RTL Bootstrap Select + Dropdowns (all selects/menus system-wide)
   -------------------------------------------------------------------------- */
body.rtl .bootstrap-select .dropdown-toggle,
[dir="rtl"] .bootstrap-select .dropdown-toggle {
  text-align: right !important;
}

body.rtl .bootstrap-select .dropdown-toggle .filter-option,
[dir="rtl"] .bootstrap-select .dropdown-toggle .filter-option {
  text-align: right !important;
  float: right !important;
}

body.rtl .bootstrap-select .dropdown-toggle .caret,
body.rtl .bootstrap-select .dropdown-toggle .bs-caret,
[dir="rtl"] .bootstrap-select .dropdown-toggle .caret,
[dir="rtl"] .bootstrap-select .dropdown-toggle .bs-caret {
  right: auto !important;
  left: 12px !important;
}

body.rtl .bootstrap-select .dropdown-toggle .filter-option-inner-inner,
[dir="rtl"] .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  text-align: right !important;
}

/* --------------------------------------------------------------------------
   Enforce single-row horizontal layout for dropdown / submenu links (RTL)
   Icon RIGHT · text middle/left — fixes hr_profile & general dropdown stacking
   -------------------------------------------------------------------------- */
body.rtl .dropdown-menu > li > a,
body.rtl .nav-second-level li a,
body.rtl .hr_profile .dropdown-menu > li > a,
[dir="rtl"] .dropdown-menu > li > a,
[dir="rtl"] .nav-second-level li a,
[dir="rtl"] .hr_profile .dropdown-menu > li > a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  white-space: nowrap !important;
  text-align: right !important;
}

/* Prevent icons inside dropdown links from forcing a new line */
body.rtl .dropdown-menu > li > a > i,
body.rtl .nav-second-level li a > i,
body.rtl .hr_profile .dropdown-menu > li > a > i,
[dir="rtl"] .dropdown-menu > li > a > i,
[dir="rtl"] .nav-second-level li a > i,
[dir="rtl"] .hr_profile .dropdown-menu > li > a > i {
  display: inline-block !important;
  flex-shrink: 0 !important;
  order: 1 !important;
  margin-left: 8px !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

/* Text span inside dropdown links */
body.rtl .dropdown-menu > li > a > span,
body.rtl .nav-second-level li a > span,
body.rtl .hr_profile .dropdown-menu > li > a > span,
[dir="rtl"] .dropdown-menu > li > a > span,
[dir="rtl"] .nav-second-level li a > span,
[dir="rtl"] .hr_profile .dropdown-menu > li > a > span {
  display: inline-block !important;
  order: 2 !important;
  flex-grow: 1 !important;
  text-align: right !important;
}

body.rtl .bootstrap-select .dropdown-menu.inner > li > a,
body.rtl .bootstrap-select .dropdown-menu li a,
[dir="rtl"] .bootstrap-select .dropdown-menu.inner > li > a,
[dir="rtl"] .bootstrap-select .dropdown-menu li a {
  text-align: right !important;
}

/* --------------------------------------------------------------------------
   Bootstrap Select — show check-mark ONLY on selected options (RTL)
   Overrides the generic dropdown span { display:inline-block } rule above.
   -------------------------------------------------------------------------- */
body.rtl .bootstrap-select .dropdown-menu li a .check-mark,
body.rtl .dropdown-menu.inner li a .check-mark {
  display: none !important;
}

body.rtl .bootstrap-select .dropdown-menu li.selected a .check-mark,
body.rtl .bootstrap-select .dropdown-menu li a[aria-selected="true"] .check-mark,
body.rtl .dropdown-menu.inner li.selected a .check-mark {
  display: inline-block !important;
  margin-left: 8px !important;
  margin-right: 0 !important;
}

body.rtl .bootstrap-select .dropdown-menu li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: right !important;
}

body.rtl .bootstrap-select .dropdown-menu li a span.text {
  order: 1 !important;
  flex-grow: 1 !important;
  text-align: right !important;
}

body.rtl .bootstrap-select .dropdown-menu li a span.check-mark {
  order: 2 !important;
}

/* --------------------------------------------------------------------------
   Dashboard Clock Widget — dual Gregorian / Jalali live clock
   -------------------------------------------------------------------------- */
#widget-clock-section .panel_s,
#widget-clock-section .panel-body {
  margin-bottom: 0;
}

#widget-clock-section .panel-body {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7fafc 0%, #eef5f9 55%, #f3f6f8 100%);
  border-radius: 6px;
}

.clock-section {
  direction: rtl;
  width: 100%;
}

.clock-section .c-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.clock-section .icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 20px;
  color: #94a3b8;
}

.clock-section .icon-sun,
.clock-section .icon-moon {
  opacity: 0.35;
  transition: opacity 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.clock-section .icon-sun.active {
  opacity: 1;
  color: #d97706;
  transform: scale(1.08);
}

.clock-section .icon-moon.active {
  opacity: 1;
  color: #334155;
  transform: scale(1.08);
}

/* Force LTR display for clock digits and colons in all modes */
.clock-section .time {
  direction: ltr !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 0;
  unicode-bidi: isolate;
}

.clock-section .time-colon {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  direction: ltr !important;
}

.clock-section .time-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: 64px;
}

.clock-section .num {
  font-family: "Vazirmatn", "IRANSans", Tahoma, sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  color: #0f172a;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  direction: ltr !important;
  unicode-bidi: isolate;
}

.clock-section .text {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.clock-section .colon {
  margin: 0 6px !important;
  display: inline-block !important;
  direction: ltr !important;
  font-size: 36px;
  font-weight: 600;
  color: #475569;
  line-height: 1.15;
  animation: clock-colon-pulse 1s steps(1, end) infinite;
}

@keyframes clock-colon-pulse {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.25; }
}

.clock-section .am_pm {
  display: none !important;
}

.clock-section .clock-date {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
}

.clock-section .gregorian-date {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: "Segoe UI", Tahoma, sans-serif;
  color: #475569;
}

.clock-section .jalali-date {
  direction: rtl;
  color: #0f172a;
  font-family: "Vazirmatn", "IRANSans", Tahoma, sans-serif;
}

.clock-section .clock-date-swap {
  margin-right: 15px;
  margin-left: 15px;
  color: #94a3b8;
  font-size: 13px;
}

.clock-section .clock-date-cal {
  margin-right: 0;
  margin-left: 6px;
  color: #0f766e;
}

@media (max-width: 767px) {
  .clock-section .num {
    font-size: 32px;
  }

  .clock-section .colon {
    font-size: 28px;
  }

  .clock-section .time-text {
    min-width: 52px;
  }

  .clock-section .clock-date {
    font-size: 13px;
  }

  .clock-section .clock-date-swap {
    margin-right: 8px;
    margin-left: 8px;
  }
}

/* Hide hourly rate, billable status, and logged time stats in task modal popup */
#task-modal .task-single-hourly-rate,
#task-modal .task-single-billable,
#task-modal .task-info-hourly-rate,
#task-modal .task-info-billable,
#task-modal .task-billable-amount,
#task-modal .task-info-user-logged-time,
#task-modal .task-info-total-logged-time,
#task-modal .task-single-timesheet,
#task-modal .task-info-timesheets,
#task-modal [data-task-is-billable],
#task-modal .task-modal-logged-time-stats {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Notification bell dropdown — keep long text inside the box
   -------------------------------------------------------------------------- */
.dropdown-menu.notifications,
.dropdown-notifications {
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

.dropdown-menu.notifications li,
.dropdown-menu.notifications li.notification-wrapper,
.dropdown-notifications li {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.dropdown-menu.notifications li a,
.dropdown-menu.notifications a.notification-handler,
.dropdown-menu.notifications a.notification-top,
.dropdown-notifications li a {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;
}

.dropdown-menu.notifications .notification-box,
.dropdown-notifications .notification-box {
  display: block;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.dropdown-menu.notifications .notification-box .media-body,
.dropdown-notifications .media-body,
.dropdown-menu.notifications li .media-body {
  display: block;
  width: auto !important;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;
}

.dropdown-menu.notifications .notification-title,
.dropdown-menu.notifications .notification-text,
.dropdown-notifications .notification-text,
.notification-box .notification-text,
.notification-box .notification-title {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.dropdown-menu.notifications .notification-image,
.dropdown-menu.notifications img.notification-image,
.dropdown-menu.notifications img.staff-profile-image-small,
.dropdown-menu.notifications img.client-profile-image-small {
  max-width: 36px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Mobile notifications dropdown — smooth scroll, avoid accidental taps
   (pairs with assets/js/notifications-tap-scroll.js)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #header .notifications-wrapper .dropdown-menu.notifications,
  .mobile-menu .dropdown-menu.notifications,
  .notification-box,
  .dropdown-menu.notifications {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  #header .notifications-wrapper .dropdown-menu.notifications,
  .mobile-menu .dropdown-menu.notifications {
    overscroll-behavior: contain;
    max-width: min(400px, calc(100vw - 16px));
  }
}