html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] body {
  direction: ltr;
  text-align: left;
}

html[dir="rtl"] .pull-left {
  float: right !important;
}

html[dir="rtl"] .pull-right {
  float: left !important;
}

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

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

html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .bootstrap-select .dropdown-menu,
html[dir="rtl"] .select2-container,
html[dir="rtl"] .dataTables_wrapper {
  text-align: right;
}

html[dir="rtl"] .btn .fa,
html[dir="rtl"] .btn .fa-solid,
html[dir="rtl"] .btn .fa-regular {
  margin-left: 6px;
  margin-right: 0;
}

html[dir="ltr"] .btn .fa,
html[dir="ltr"] .btn .fa-solid,
html[dir="ltr"] .btn .fa-regular {
  margin-right: 6px;
  margin-left: 0;
}

.pwa-alert {
  z-index: 100050;
}

.pwa-alert .alert-title {
  display: block;
  padding-inline-end: 18px;
}

.pwa-alert [data-pwa-alert-notification-action],
.pwa-alert [data-pwa-alert-update-reload] {
  margin-top: 8px;
  white-space: nowrap;
}

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

html[dir="rtl"] .pwa-alert .close {
  right: auto;
  left: 10px;
}

html[dir="rtl"] .pwa-alert [data-pwa-alert-notification-action],
html[dir="rtl"] .pwa-alert [data-pwa-alert-update-reload] {
  margin-left: 0 !important;
  margin-right: 10px !important;
}

.attendance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.attendance-actions .btn {
  margin: 0;
}

.attendance-table-wrap {
  overflow-x: auto;
}

.attendance-table-wrap table {
  min-width: 860px;
}

@media (max-width: 767px) {
  .attendance-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .attendance-actions .btn {
    width: 100%;
  }
}

@media (max-width: 768px) {
  #header #top_search {
    display: none !important;
  }

  #header,
  #header nav,
  #header .mobile-menu,
  #header .mobile-icon-menu {
    overflow: visible !important;
  }

  #header nav {
    min-height: 63px;
    align-items: center;
  }

  #header .mobile-menu {
    display: flex;
    align-items: center;
    min-height: 63px;
  }

  #header .mobile-icon-menu {
    align-items: center;
    margin-top: 0 !important;
  }

  #header .mobile-menu-toggle {
    margin-top: 0;
  }

  #header .mobile-icon-menu .header-timers,
  #header .mobile-icon-menu .mobile-header-notifications {
    position: relative;
    line-height: 1;
  }

  #header .mobile-icon-menu .top-timers,
  #header .mobile-icon-menu .notifications-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 8px;
    background: #fff;
  }

  #header .mobile-icon-menu .notifications-icon > span:first-child {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    width: 100%;
    height: 100%;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  #header .mobile-icon-menu .top-timers svg,
  #header .mobile-icon-menu .notifications-icon svg {
    display: block;
    width: 20px;
    height: 20px;
  }

  #header .mobile-icon-menu .icon-started-timers,
  #header .mobile-icon-menu .icon-notifications {
    right: -7px !important;
    top: -7px !important;
  }

  #header .mobile-icon-menu .started-timers-top,
  #header .mobile-icon-menu .notifications {
    position: fixed;
    top: 63px;
    left: 10px;
    right: 10px;
    width: auto !important;
    max-width: none;
    max-height: calc(100vh - 83px);
    margin-top: 0;
    padding: 14px !important;
    overflow-y: auto;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    z-index: 1001;
  }

  #header .mobile-icon-menu .notifications {
    padding: 0;
  }

  #header .mobile-icon-menu .notifications .tw-py-1 {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }

  #header .mobile-icon-menu .notifications li.notification-wrapper a.notification-handler {
    display: block;
  }

  #header .mobile-icon-menu .notifications .notification-box {
    padding: 12px !important;
  }

  #header .mobile-icon-menu .notifications .media-body {
    min-width: 0;
  }

  #header .mobile-icon-menu .notifications .notification-title {
    display: block;
    line-height: 1.4;
  }

  html[dir="rtl"] #header .mobile-icon-menu .started-timers-top,
  html[dir="rtl"] #header .mobile-icon-menu .notifications {
    left: 10px;
    right: 10px;
    text-align: right;
  }

  html[dir="rtl"] #header .mobile-icon-menu .icon-started-timers,
  html[dir="rtl"] #header .mobile-icon-menu .icon-notifications {
    right: auto !important;
    left: -7px !important;
  }

  #header .mobile-icon-menu .started-timers-top .top-dropdown-btn {
    width: 100%;
    min-width: 0;
    margin: 12px 0 0;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #header .mobile-icon-menu .started-timers-top li.timer {
    line-height: 1.45;
    padding: 0 0 8px;
  }

  #header .mobile-icon-menu .started-timers-top li.timer a._timer + p {
    margin-top: 8px;
  }

  #header .mobile-navbar {
    z-index: 1000;
  }

  #header .mobile-navbar .header-languages-title {
    padding: 10px 12px 5px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .content ._buttons {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    z-index: 60;
  }

  .content ._buttons:before,
  .content ._buttons:after {
    display: none;
  }

  .content ._buttons > [class*="col-"],
  .content ._buttons > .display-block,
  .content ._buttons > .row {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  .content ._buttons > a.btn,
  .content ._buttons > button.btn,
  .content ._buttons > .btn,
  .content ._buttons > .btn-group,
  .content ._buttons > [class*="col-"] > a.btn,
  .content ._buttons > [class*="col-"] > button.btn,
  .content ._buttons > [class*="col-"] > .btn,
  .content ._buttons > [class*="col-"] > .btn-group,
  .content ._buttons > .display-block > a.btn,
  .content ._buttons > .display-block > button.btn,
  .content ._buttons > .display-block > .btn,
  .content ._buttons > .display-block > .btn-group {
    align-items: center;
    display: inline-flex !important;
    flex: 1 1 calc(50% - 4px);
    float: none !important;
    justify-content: center;
    margin: 0 !important;
    min-height: 44px;
    text-align: center !important;
    touch-action: manipulation;
    width: auto !important;
  }

  .content ._buttons a.btn.hidden-xs,
  .content ._buttons button.btn.hidden-xs,
  .content ._buttons .btn.hidden-xs,
  .content ._buttons .btn-group.hidden-xs {
    display: inline-flex !important;
  }

  .content ._buttons .btn-group > .btn {
    align-items: center;
    display: inline-flex !important;
    justify-content: center;
    min-height: 44px;
    text-align: center !important;
    width: 100%;
  }

  .content ._buttons .dropdown-menu {
    text-align: inherit;
  }

  .content ._buttons .hide {
    display: none !important;
  }

  .content ._buttons [data-new-lead-button],
  .kan-ban-col .new-lead-from-status {
    align-items: center;
    display: inline-flex !important;
    justify-content: center;
    min-height: 44px;
    pointer-events: auto;
    position: relative;
    text-align: center !important;
    touch-action: manipulation;
    z-index: 60;
  }

  .leads-toolbar {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .leads-toolbar > a.btn,
  .leads-toolbar > .btn {
    flex: 1 1 calc(50% - 4px);
    margin: 0 !important;
    width: auto !important;
  }

  .leads-toolbar > .row {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    width: 100%;
  }

  .leads-toolbar > .row > .col-sm-5 {
    display: flex;
    gap: 8px;
    padding: 0;
    width: 100%;
  }

  .leads-toolbar > .row > .col-sm-5 > .btn {
    align-items: center;
    display: inline-flex !important;
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
    margin: 0 !important;
    min-height: 44px;
    text-align: center !important;
    width: auto !important;
  }

  .leads-toolbar .leads-search {
    margin-top: 4px;
    padding: 0;
    width: 100%;
  }

  body.modal-open .mobile-navbar,
  body.modal-open #header .mobile-icon-menu .dropdown-menu {
    display: none !important;
  }

  body.modal-open.show-sidebar #wrapper:after {
    display: none !important;
  }

  body.modal-open .modal-backdrop {
    z-index: 10040 !important;
  }

  body.modal-open .modal {
    z-index: 10050 !important;
  }

  body.modal-open .modal.in {
    left: 0 !important;
    right: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px !important;
    -webkit-overflow-scrolling: touch;
  }

  body.modal-open .modal.in .modal-dialog {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  body.modal-open .modal.in .modal-content {
    width: 100%;
    max-height: calc(100vh - 20px);
    display: flex;
    flex-direction: column;
  }

  body.modal-open .modal.in .modal-header,
  body.modal-open .modal.in .modal-footer {
    flex: 0 0 auto;
  }

  body.modal-open .modal.in .modal-body {
    flex: 1 1 auto;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.modal-open #lead-modal.in .modal-content.data,
  body.modal-open #task-modal.in .modal-content.data {
    min-height: 160px;
  }

  body.modal-open #lead-modal.in {
    padding: 8px !important;
  }

  body.modal-open #lead-modal.in .modal-dialog {
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
  }

  body.modal-open #lead-modal.in .modal-content.data {
    height: 100%;
    max-height: none;
    overflow: hidden;
  }

  body.modal-open #lead-modal.in .modal-header {
    padding: 12px 14px;
  }

  body.modal-open #lead-modal.in .modal-header .close {
    margin-top: 0;
  }

  body.modal-open #lead-modal.in .modal-title {
    max-width: calc(100% - 36px);
    font-size: 16px;
    line-height: 1.4;
  }

  body.modal-open #lead-modal.in .modal-body {
    max-height: none;
    padding: 14px;
  }

  body.modal-open #lead-modal.in .lead-wrapper,
  body.modal-open #lead-modal.in #lead_form,
  body.modal-open #lead-modal.in .tab-content,
  body.modal-open #lead-modal.in .tab-pane.active {
    min-width: 0;
  }

  body.modal-open #lead-modal.in .lead-wrapper .row {
    margin-left: 0;
    margin-right: 0;
  }

  body.modal-open #lead-modal.in .lead-wrapper [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }

  body.modal-open #lead-modal.in .bootstrap-select,
  body.modal-open #lead-modal.in .bootstrap-select .dropdown-toggle,
  body.modal-open #lead-modal.in .form-control {
    max-width: 100%;
  }

  html[dir="rtl"] body.page-small #menu {
    left: auto !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: -250px !important;
    transform: none;
  }

  html[dir="rtl"] body.page-small.show-sidebar #menu {
    margin-right: 0 !important;
    transform: none;
  }

  html[dir="rtl"] body.page-small.show-sidebar #wrapper {
    margin-left: 0 !important;
    margin-right: 250px !important;
  }

  html[dir="rtl"] body.show-sidebar #wrapper:after {
    left: auto;
    right: 0;
  }

  html[dir="rtl"] body.show-sidebar #side-menu {
    display: block;
  }

  html[dir="rtl"] body.page-small #header {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .pwa-alert {
    left: 10px;
    right: 10px;
    width: auto;
    max-width: calc(100vw - 20px);
  }
}

/* --- Layout: prevent inflated bottom spacing on short pages --- */
body.app.admin #wrapper {
  min-height: calc(100vh - 63px) !important;
}

/* Only vertical scrolling on admin pages */
body.app.admin,
body.app.admin #wrapper {
  overflow-x: hidden;
}

/* Page background behind the sidebar column matches content area
   so the dark sidebar rail ends exactly where the menu ends */
body.app.admin {
  background: #f1f5f9;
}

/* --- Sidebar: full-height scroll container; dark rail sized to menu content --- */
@media (min-width: 769px) {
  #menu.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 250px;
    height: auto;
    padding-right: 0;
    padding-left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background: #f1f5f9;
  }

  html[dir="rtl"] #menu.sidebar {
    left: auto;
    right: 0;
  }

  #side-menu {
    background: #1e293b;
    padding: 0 7px 16px 6px;
  }

  #setup-menu-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 250px;
    height: auto;
    padding-right: 0;
    padding-left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background: #f1f5f9;
  }

  html[dir="rtl"] #setup-menu-wrapper {
    left: auto;
    right: 0;
  }

  #setup-menu {
    background: #1e293b;
    padding: 0 7px 16px 6px;
  }
}

/* --- Datatable pagination: compact + elegant --- */
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  margin: 4px 0 0;
  padding-left: 0;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination > li {
  margin: 0 2px;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > span {
  padding: 4px 10px;
  margin: 0;
  min-width: 28px;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  color: #475569;
  background-color: #fff;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > a:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > span:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > a:focus,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > span:focus {
  background-color: #f1f5f9;
  border-color: #e2e8f0;
  color: #2563eb;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.active > a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.active > span,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.active > a:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.active > span:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.active > a:focus,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.active > span:focus {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.disabled > a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.disabled > span,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.disabled > a:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.disabled > span:hover {
  color: #94a3b8;
  background-color: #fff;
  border-color: #e2e8f0;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination > li:first-child > a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li:first-child > span,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li:last-child > a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li:last-child > span {
  border-radius: 6px;
}

@media (max-width: 768px) {
  div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > a,
  div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > span {
    padding: 6px 11px;
    min-width: 36px;
    font-size: 14px;
  }

  div.dataTables_wrapper div.dataTables_paginate {
    margin-top: 8px;
    text-align: left;
  }

  html[dir="rtl"] div.dataTables_wrapper div.dataTables_paginate {
    text-align: right;
  }

  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 0;
  }

  html[dir="rtl"] div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: flex-end;
  }
}