/* Hide Alpine-bound elements until Alpine has initialized, preventing a flash of the unhidden state (e.g. dropdown menus briefly showing on page load) */
[x-cloak] {
  display: none !important;
}

/* CUSTOM DROPDOWN */
.dropdown-content {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* .dropdown-wrapper {
  z-index: 999;
} */

.dropdown-wrapper:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* KANBAN BORDER ON HOVER */

.kanban-block {
  border: 2px solid transparent;
}

.kanban-block.highlight {
  border: 2px dashed #4a90e2;
}

/* SIDEBAR  */

.sidebarModal {
  width: 350px;
  max-width: calc(100% - 1rem);
  height: calc(-2rem + 100vh);
  position: fixed;
  z-index: 999;
  border-radius: 1rem;
  top: 1rem;
  right: 1rem;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(2px);
  padding: 1rem;
  transform: translateX(calc(100% + 1rem));
  transition: 0.3s;
}

.sidebarModal.active {
  transform: translateX(0px);
  box-shadow: rgba(0, 0, 0, 0.1) -15px 5px 20px;
}

@media (max-width: 575px) {
  .sidebarModal {
    width: 300px;
  }
}

/* LIST DESIGN */
.list-checked {
  display: flex;
  flex-flow: column;
}

.list-checked li {
  margin: 5px 0;
  position: relative;
  padding-left: 20px;
}

.list-checked li:before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 600;
  font-size: 12px;
  color: #e54f38;
  position: absolute;
  left: 0;
}

.sidebar {
  width: 75px;
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 15px;
}

.sidebox {
  opacity: 0;
  transition: 0.3s;
  top: 0;
  height: 100vh;
  top: 75px;
  visibility: hidden;
  font-size: 0.85rem;
}

/* Hover no longer shows sidebox — click toggle is used instead */

/* Show sidebox when sideboxmain has sidebox-active class */
.sideboxmain.sidebox-active .sidebox {
  opacity: 1;
  visibility: visible;
  background: rgb(255 255 255 / 95%);
  backdrop-filter: blur(3px);
}

.sideboxmain {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  padding: 5px;
  border-radius: 50%;
  background-color: #0000000e;
  transition: 0.3s;
}

/* Comment this line for dynamic theme */
/* .sideboxmain:hover {
  background-color: #e34e38;
} */

/* Apply image filter when sidebox is active */
.sideboxmain.sidebox-active img {
  filter: brightness(0) invert(1);
}

.sideboxmain.active {
  background-color: #e34e38;
}

.sideboxmain img {
  width: 20px;
}

.sideboxmain.active img {
  filter: brightness(0) invert(1);
}

.sidebox ul li {
  border-bottom: 1px solid #0000000c;
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.sidebox ul li a {
  transition: 0.3s;
  display: flex;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 5px;
  position: relative;
  transition: 0.3s;
  overflow: hidden;
}

.sidebox ul li a:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  /* Comment this line for dynamic theme */
  /* background-color: #e34e38; */
  opacity: 0;
  inset: 0;
  right: 0;
  left: auto;
  transition: 0.3s;
}

.sidebox ul li a:hover {
  background: rgb(227 78 56 / 10%);
  /* Comment this line for dynamic theme  */
  /* color: #e34e38; */
  /* border-right: 2px solid #e54f38; */
}

.sidebox ul li a:hover:after,
.sidebox ul li a.active:after {
  opacity: 1;
}

.sidebox ul li a.active {
  background: rgb(227 78 56 / 10%);
  color: #e34e38;
}

.breadcrumb {
  display: flex;
  flex-flow: wrap;
  gap: 1.5rem;
  font-size: 0.8rem;
  color: #333;
}

@media (max-width: 767px) {
  .breadcrumb {
    row-gap: 0;
  }
}

/* Phones (Gitea #100): beside the header icons the full trail wrapped onto
   five lines. Keep only the current crumb, on one truncated line. */
@media (max-width: 767.98px) {
  .breadcrumb,
  .oh-main-header .breadcrumb {
    flex-wrap: nowrap;
    min-width: 0;
    margin-inline-start: 0;
  }

  .breadcrumb li:not(:last-child) {
    display: none;
  }

  .breadcrumb li:last-child {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.breadcrumb li {
  position: relative;
}

.breadcrumb li:not(:last-child):before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 600;
  font-size: 10px;
  position: absolute;
  right: -15px;
  top: 4px;
  bottom: 0;
  margin: auto;
}

.breadcrumb li.oh-breadcrumb-current {
  color: #ac3b2a; /* revo_hris custom (#105): primary-800, AA on white */
  font-weight: 500;
}

.breadcrumb li a {
  transition: 0.3s;
}

.breadcrumb li a:hover {
  color: #e54f38;
}

.stickyleft {
  position: sticky;
  left: 0;
  background-color: white;
}

.stickyleft-second {
  position: sticky;
  left: 38px;
  background-color: white;
}

.stickyright {
  position: sticky;
  right: 0;
  background-color: white;
}

/* CHECK IN OUT */
.check {
  padding: 8px 20px;
  border-radius: 5px;
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  overflow: hidden;
  width: 135px;
  height: 38px;
}

/* revo_hris custom (#105): darker text, same hues, for AA contrast */
.check.checkin {
  color: #15803d;
  background: rgb(33 209 23 / 10%);
}

.check.checkout {
  color: #b45309;
  background: rgb(233 145 13 / 10%);
}

.check .date,
.check .con {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.check .date {
  opacity: 1;
  z-index: 1;
}

.check .con {
  opacity: 0;
  z-index: 2;
}

/* On hover: show .con, hide .date */
.check:hover .date {
  opacity: 0;
}

.check:hover .con {
  opacity: 1;
}

/* Icon inside the "Check In"/"Check Out" label: only the phone layout
   below shows it; on desktop the label still fades in on hover alone. */
.check .con .check-con-icon {
  display: none;
}

/* Phones (Gitea #100): the button used to be display:none below 992px, so
   web check-in was impossible on a phone. Phones have no hover, so the
   label cannot wait for one: icon + "Check In"/"Check Out" is the resting
   state, and the timer that the hover used to swap out is dropped. The
   label is the only text on the button here, so it gets a darker shade of
   the same colour to stay readable on the tinted background. */
@media (max-width: 767.98px) {
  .check {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: auto;
    height: 40px;
    padding: 0 12px;
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  .check.checkin {
    color: #0e7a08;
  }

  .check.checkout {
    color: #935700;
  }

  /* On the dark header the original bright shades already read well. */
  body.dark .check.checkin {
    color: #15ca0c;
  }

  body.dark .check.checkout {
    color: #e9910d;
  }

  .check .date {
    display: none;
  }

  .check .con {
    position: static;
    display: inline-flex !important;
    gap: 6px;
    opacity: 1;
  }

  .check .con .check-con-icon {
    display: inline-block;
  }
}

/* FORM DESIGN */
.myform input,
.myform select,
.myform textarea {
  padding: 0.5rem;
  border-radius: 5px;
  width: 100%;
  font-size: 0.75rem;
  border: 1px solid #e6e6e6;
  transition: 0.3s;
}

.myform input:focus,
.myform select:focus,
.myform textarea:focus {
  outline: unset;
  border: 1px solid #e54f38;
}

.myform label {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

.btn {
  background: #e54f38;
  color: white;
  font-size: 13px;
  min-width: max-content;
  padding: 3px 15px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  transition: 0.3s;
}

.btn:hover {
  background: #ac3b2a;
}

/* TOGGLE BUTTON */
.toggle-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 10px;
}

.toggle-input {
  display: none;
}

.toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  background-color: #aeaeb2;
  border-radius: 9999px;
  transition: background-color 0.3s;
}

.toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

.toggle-input:checked+.toggle-switch::after {
  transform: translateX(16px);
}

/* MULTI SELECT */
.select2-container--default .select2-selection--multiple {
  border: 1px solid #e7e7e7;
}

.select2-container--default .select2-selection--multiple:focus {
  outline: unset;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  font-size: 10px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  /* Comment this line for dynamic theme */
  /* background-color: #e54f38; */
  color: white;
  border: unset;
  height: 23px;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
  line-height: 18px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  border-right: 1px solid #ffffff57;
  color: white;
  font-size: 10px;
  height: 100%;
}

.select2-results__option {
  font-size: 12px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--primary-100, #fff5f1);
  color: var(--primary-600, #e54f38);
}

.select2-container--default .select2-results__option--selected {
  background-color: var(--primary-100, #fff5f1);
  color: var(--primary-600, #e54f38);
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: solid #e7e7e7 1px;
  outline: 0;
}

.select2-container .select2-search--inline .select2-search__field {
  height: 25px;
}

.select2-dropdown {
  border: 1px solid #e7e7e7;
}

/* .select2-container {
  width: 100% ;
} */

.userbox {
  border: 1px solid #ebebeb;
  transition: 0.3s;
}

.userbox.active,
.userbox:hover {
  border: 1px solid #e34e38;
}

.userlist {
  display: flex;
}

/* .userlist li span {
  display: flex;
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  padding: 2px;
  align-items: center;
  justify-content: center;
}
.userlist li span img {
  width: 100%;
}
.userlist li:nth-child(2) {
  margin-left: -10px;
}
.userlist li:nth-child(3) {
  margin-left: -10px;
}
.userlist li:nth-child(4) {
  margin-left: -10px;
}
.userlist li:nth-child(4) span {
  border: 3px solid white;
  background-color: #dbdbdb;
  font-size: 12px;
} */
.userlist li span {
  display: flex;
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  padding: 2px;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.userlist li span img {
  width: 100%;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.userlist li span a {
  display: block;
  width: 100%;
  height: 100%;
}

.userlist li:not(:first-child) {
  margin-left: -10px;
}

.userlist li:last-child span:not(:has(> a)) {
  border: 3px solid white;
  background-color: #dbdbdb;
  font-size: 12px;
  color: #666;
}

.userlist li:hover span {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  z-index: 10;
  position: relative;
}

.userlist li:hover span img {
  transform: scale(1.05);
}

.userlist li:not(:hover) span {
  transform: translateY(0) scale(1);
}

.usertablist {
  display: flex;
  flex-flow: wrap;
  gap: 10px;
}

.usertablist li button {
  border: 1px solid #e7e7e7;
  padding: 5px 15px;
  border-radius: 5px;
  font-size: 0.8rem;
  transition: 0.3s;
  color: #333;
}

.usertablist li button.active,
.usertablist li button:hover {
  background-color: #e54f38;
  border: 1px solid #e54f38;
  color: white;
}

/* TAB DESIGN */

.mytab {
  border: 1px solid #e34e38;
  border-radius: 50px;
  overflow: hidden;
  padding: 5px;
  background-color: white;
  z-index: 9;
}

.mytab .tab-button.active {
  color: white;
  background: #e34e38;
  border-radius: 50px;
}

/* FOLDING KANBAN */
.compact {
  width: max-content !important;
}

.compact .task-card {
  display: none;
}

.compact .kanban-head {
  height: 100%;
  display: flex;
  align-items: flex-start;
  flex-flow: column;
  width: 50px;
}

.compact h5 {
  transform: rotate(90deg) translateX(0);
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 40px;
  width: max-content;
}

.compact-mode {
  display: flex !important;
}

.compact-mode> :not(.kanban-block.compact) {
  width: 300px;
}

.compact .collapse-content,
.compact .fa-square-plus,
.compact .fa-square-plus,
.compact .fa-ellipsis-vertical {
  display: none;
}

@media (max-width: 767px) {
  .compact-mode {
    /* display: flow !important; */
    flex-flow: wrap;
  }
}

.btn-com {
  padding: 5px 15px;
  font-size: 13px;
  border-radius: 5px;
  width: max-content;
  transition: 0.3s;
}

.btn-com.clr1 {
  border: 1px solid #d71d00;
  color: #d71d00;
}

.btn-com.clr2 {
  border: 1px solid #ffa800;
  color: #ffa800;
}

.btn-com.clr3 {
  border: 1px solid #0e79dc;
  color: #0e79dc;
}

.btn-com.clr4 {
  border: 1px solid #00c490;
  color: #00c490;
}

.btn-com.clr5 {
  border: 1px solid #00d319;
  color: #00d319;
}

.btn-com.clr1:hover,
.btn-com.clr2:hover,
.btn-com.clr3:hover,
.btn-com.clr4:hover,
.btn-com.clr5:hover {
  color: white;
}

.btn-com.clr1:hover {
  background-color: #d71d00;
}

.btn-com.clr2:hover {
  background-color: #ffa800;
}

.btn-com.clr3:hover {
  background-color: #0e79dc;
}

.btn-com.clr4:hover {
  background-color: #00c490;
}

.btn-com.clr5:hover {
  background-color: #00d319;
}

.btn-square {
  padding: 10px;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.btn-square:hover {
  color: white;
}

.btn-square1:hover {
  background-color: #00c700;
}

.btn-square2:hover {
  background-color: red;
}

.btn-square3:hover {
  background-color: #001affd5;
}

/* SELECT DROPDOWN */
.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  height: 35px;
  display: flex;
  align-items: center;
  font-size: 13px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 13px;
  outline: unset;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 4px;
}

.select2-dropdown {
  box-shadow: 0 5px 7px 1px #00000014;
}

.sidebar-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.date-list li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  color: #666;
}

.date-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  bottom: 0;
  margin: auto;
  border-radius: 50%;
}

/*
.date-list li:nth-child(1)::before {
  background-color: #00c490;
}
.date-list li:nth-child(2)::before {
  background-color: #0e79dc;
}
.date-list li:nth-child(3)::before {
  background-color: #ee1b18;
}
.date-list li:nth-child(4)::before {
  background-color: #fe8a3d;
}
.date-list li:nth-child(5)::before {
  background-color: #fec53d;
}
.date-list li:nth-child(6)::before {
  background-color: #ee1b18;
} */

.datebox {
  color: white;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  margin: auto;
}

/* .datebox.box1 {
  background-color: #00c490;
}
.datebox.box2 {
  background-color: #ee1b18;
}
.datebox.box3 {
  background-color: #0e79dc;
}
.datebox.box4 {
  background-color: #fec53d;
}
.datebox.box5 {
  background-color: #fe8a3d;
} */
.date-list li:nth-child(1)::before {
  background-color: #00c490;
}

.date-list li:nth-child(2)::before {
  background-color: #808080;
}

.date-list li:nth-child(3)::before {
  background-color: #fec53d;
}

.date-list li:nth-child(4)::before {
  background-color: #a8b1ff;
}

.date-list li:nth-child(5)::before {
  background-color: #fe8a3d;
}

.date-list li:nth-child(6)::before {
  background-color: #ee1b18;
}

.datebox {
  color: white;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  margin: auto;
}

.datebox.present {
  background-color: #00c490;
}

.datebox.conflict {
  background-color: #ee1b18;
}

.datebox.absent {
  background-color: #a8b1ff;
}

.datebox.half-day {
  background-color: #fec53d;
}

.datebox.leave-present {
  background-color: #fe8a3d;
}

.datebox.leave {
  background-color: #808080;
}

.date-table thead tr th:first-child {
  border-top-left-radius: 10px;
}

.date-table thead tr th:last-child {
  border-top-right-radius: 10px;
}

.holiday {
  background: #ecf3fb;
}

input[type="radio"].red-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background-color: #e9edf7;
  border: 2px solid #ccc;
  position: relative;
  cursor: pointer;
  transition: 0.2s;
}

input[type="radio"].red-radio:checked {
  border-color: #e54f38;
  background-color: #e54f38;
}

input[type="radio"].red-radio:checked::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
}

input[type="checkbox"].custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  background-color: #e9edf7;
  border: 2px solid #ccc;
  border-radius: 0.25rem;
  position: relative;
  cursor: pointer;
  transition: 0.2s;
}

table input[type="checkbox"] {
  margin-top: 8px;
}

input[type="checkbox"].custom-checkbox:checked {
  background-color: #e54f38;
  border-color: #e54f38;
}

input[type="checkbox"].custom-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

input[type="checkbox"].custom-checkbox:hover {
  border-color: #e54f38;
}

.tooltip {
  position: relative;
}

.tooltip .tooltiptext {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: -30px;
  background: black;
  border-radius: 3px;
  font-size: 10px;
  padding: 3px 5px;
  opacity: 0;
  transition: 0.3s;
  width: max-content;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}

.progress {
  display: flex;
  justify-content: space-between;
}

.progress li {
  position: relative;
  width: 50%;
}

.progress li .sec::before {
  content: "";
  position: absolute;
  height: 4px;
  width: 100%;
  background-color: #ffe5e1;
  left: 0;
  top: 15px;
  bottom: 0;
}

.progress li.active .sec::before {
  background-color: #e54f38;
}

.progress li span {
  position: relative;
  z-index: 1;
}

.progress li:nth-child(2),
.progress li:nth-child(3) {
  display: flex;
  justify-content: center;
}

.progress li:nth-child(4) {
  display: flex;
  justify-content: flex-end;
  width: 30%;
}

.progress li:nth-child(1) {
  width: 30%;
}

/* .select2-container--default {
  padding-bottom: 0.75rem;
} */
#accordionToggle:focus-visible {
  outline: none;
}

.btn-square.disable {
  background: #ededed;
  color: #a9a9a9;
  cursor: no-drop;
}

/* .bg-primary-900 {
  background-color: #672419;
}
.bg-primary-800 {
  background-color: #AC3B2A;
}
.bg-primary-700 {
  background-color: #ce4732;
}
.bg-primary-600 {
  background-color: #E54F38;
}
.bg-primary-500 {
  background-color: #F7C8C1;
}
.bg-primary-400 {
  background-color: #FBE5E1;
}
.bg-primary-300 {
  background-color: #FCEDEB;
}
.bg-primary-200 {
  background-color: #FEF6F5;
}
.bg-primary-100 {
  background-color: #FFF5F1;
}
.bg-primary-50 {
  background-color: #f6f6f6;
}
.text-primary-600 {
  color: #e54f38;
} */
.dropdown-wrapper:focus-within .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sha {
  position: relative;
}

.sha::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(360deg, #ffffff, transparent);
}

#sidebar nav .sidebox {
  /* background-color: #1b1b1b; */
  left: 78px;
}

.material-icons.fw-lighter.fs-5 {
  font-size: 1.1rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
  list-style: none;
  font-size: 0.7rem;
  height: auto;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  height: auto;
}

#year {
  font-size: 0.8rem;
  padding: 3px 8px;
  border-radius: 5px;
}

.fixed-table th,
.fixed-table td {
  border: 1px solid #efefef;
  border-radius: 2px;
}

.oh-input[type="color"] {
  height: 38px !important;
}

::-webkit-scrollbar {
  width: 8px;
  height: 6px;
  border-radius: 5px;
  overflow: hidden;
}

::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: #acacac;
  border-radius: 5px;
  transition: 0.3s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #8a8a8a;
}

/* ========================================
 *  Column configurator (list view toggle)
 *  Shared via generic/as_list.html
 * ====================================== */
.oh-sticky-table_dropdown:has(.oh-column-config) {
  width: 280px;
  min-width: 280px;
  max-width: min(280px, calc(100vw - 24px));
  padding: 0;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.12),
    0 2px 6px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  animation: oh-column-config-in 0.16s ease-out;
}

@keyframes oh-column-config-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.oh-column-config {
  display: flex;
  flex-direction: column;
  max-height: min(420px, calc(100vh - 120px));
  background: #fff;
  color: #333;
}

.oh-column-config__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid #f0f0f0;
}

.oh-column-config__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.oh-column-config__title {
  font-size: 13px;
  font-weight: 600;
  color: #1f1f1f;
  line-height: 1.2;
}

.oh-column-config__subtitle {
  font-size: 11px;
  color: #888;
  line-height: 1.3;
}

.oh-column-config__count {
  flex-shrink: 0;
  margin-top: 1px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f5f5f5;
  color: #666;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.oh-column-config__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 12px 0;
  padding: 0 10px;
  height: 34px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #fafafa;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.oh-column-config__search:focus-within {
  border-color: #e54f38;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(229, 79, 56, 0.12);
}

.oh-column-config__search ion-icon {
  flex-shrink: 0;
  font-size: 15px;
  color: #999;
}

.oh-column-config__search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 12px;
  color: #333;
  height: 100%;
}

.oh-column-config__search-input::placeholder {
  color: #aaa;
}

.oh-column-config__select-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 12px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f7f7f7;
  cursor: pointer;
  user-select: none;
}

.oh-column-config__select-all:hover {
  background: #f1f1f1;
}

.oh-column-config__select-all .oh-column-config__label {
  font-size: 12px;
  font-weight: 600;
  color: #333;
}

.oh-column-config__list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0 6px 6px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}

.oh-column-config__item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 8px;
  border-radius: 8px;
  transition: background 0.12s ease;
}

.oh-column-config__item:hover {
  background: #f7f7f7;
}

.oh-column-config__item.is-filtered-out {
  display: none;
}

.oh-column-config__item.is-draggable {
  cursor: grab;
}

.oh-column-config__item.is-draggable.ui-sortable-helper {
  cursor: grabbing;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  border: 1px solid #eee;
}

.oh-column-config__item.is-fixed .oh-column-config__handle {
  color: #c0c0c0;
  cursor: default;
}

.oh-column-config__item.is-fixed .oh-table__checkbox {
  opacity: 0.55;
  pointer-events: none;
}

.oh-column-config__item.is-fixed .toggle-column-checkbox {
  cursor: not-allowed;
}

.oh-column-config__handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #b0b0b0;
  border-radius: 6px;
  transition: color 0.12s ease, background 0.12s ease;
}

.oh-column-config__item.is-draggable:hover .oh-column-config__handle {
  color: #777;
  background: #ececec;
}

.oh-column-config__handle ion-icon {
  font-size: 16px;
  pointer-events: none;
}

.oh-column-config__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #444;
  line-height: 1.3;
}

.oh-column-config__item .oh-table__checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.oh-column-config__placeholder {
  height: 34px;
  margin: 0 2px;
  border-radius: 8px;
  border: 1px dashed #e54f38;
  background: rgba(229, 79, 56, 0.06);
}

.oh-column-config__empty {
  display: none;
  margin: 0;
  padding: 18px 14px;
  text-align: center;
  font-size: 12px;
  color: #999;
}

.oh-column-config__empty.is-visible {
  display: block;
}

.oh-column-config__footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
  color: #999;
  font-size: 11px;
  line-height: 1.3;
}

.oh-column-config__footer ion-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.oh-sticky-dropdown_btn.is-column-config-trigger {
  color: #666;
}

.oh-sticky-dropdown_btn.is-column-config-trigger:hover,
.oh-sticky-dropdown_btn.is-column-config-trigger[aria-expanded="true"] {
  color: #e54f38;
  border-color: #f0c4bc;
  background: #fff5f3;
}

/* ====================================
*        Sticky Table
* Theme pages (extends "index.html" -> horilla_theme's override) don't
* load static/build/css/style.min.css, where the base .oh-sticky-table
* component normally lives — ported here so report/standard_report.html's
* KPI/drilldown tables render with the same sticky-header/sticky-first-
* column behavior used elsewhere in the app.
* ================================== */
.oh-table_sticky--wrapper {
  position: relative;
}

.oh-sticky-table {
  max-height: 75vh;
  overflow: auto;
  margin: auto;
  max-width: 100%;
  border: 1px solid hsl(213, 22%, 93%);
  position: relative;
}

.oh-sticky-table--no-highlight .oh-sticky-table__tr:hover {
  background-color: transparent;
}

.oh-sticky-table--no-overflow {
  overflow-x: auto;
  overflow-y: visible;
}

.oh-sticky-table__table {
  display: table;
  position: relative;
  width: 100%;
  table-layout: fixed;
}

.oh-sticky-table__tr {
  display: table-row;
}
.oh-sticky-table__tr:hover {
  background-color: hsl(0, 0%, 96%);
  cursor: pointer;
}

.oh-sticky-table__td,
.oh-sticky-table__th,
.oh-sticky-table__sd {
  display: table-cell;
  padding: 8px 10px;
  border-bottom: 0.2px solid hsl(213, 22%, 93%);
  border-right: 0.2px solid #fff;
  vertical-align: middle;
  width: 160px;
  word-break: break-word;
}

.oh-sticky-table__sd {
  background-color: hsl(0, 0%, 100%);
  z-index: 10 !important;
  width: 240px;
}

.oh-sticky-table__th:first-child {
  z-index: 11 !important;
}

.oh-sticky-table__th {
  z-index: 10;
  background-color: hsl(0, 0%, 100%);
  padding: 0.5rem 1rem !important;
}

.oh-sticky-table__thead {
  display: table-header-group;
  font-weight: bold;
  z-index: 1;
}

.oh-sticky-table__tbody {
  display: table-row-group;
  height: 60px;
}

.oh-sticky-table__th,
.oh-sticky-table__sd {
  position: sticky;
  background: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 11%);
}

.oh-sticky-table__th {
  top: 0;
  border-bottom: 2px solid hsl(213, 22%, 93%);
}

.oh-sticky-table__sd {
  left: 0;
  border-right: 1px solid hsl(213, 22%, 93%);
}
@media (max-width: 575.98px) {
  .oh-sticky-table__sd {
    position: relative;
  }
}

.oh-sticky-table__sd,
.oh-sticky-table__td,
.oh-sticky-table__th {
  padding: 0.6rem;
}

.oh-sticky-table--fit .oh-sticky-table__sd,
.oh-sticky-table--fit .oh-sticky-table__td,
.oh-sticky-table--fit .oh-sticky-table__th {
  padding: 0.6rem;
  width: fit-content;
}

.oh-sticky-table__thead div.oh-sticky-table__th:first-child,
.oh-sticky-table__tfoot div.oh-sticky-table__th:first-child {
  left: 0;
  z-index: 1;
  border-right: 1px solid hsl(213, 22%, 93%);
}
@media (max-width: 575.98px) {
  .oh-sticky-table__thead div.oh-sticky-table__th:first-child,
  .oh-sticky-table__tfoot div.oh-sticky-table__th:first-child {
    position: relative;
  }
}

.oh-sticky-table__sr {
  position: sticky;
  right: 0;
  background-color: hsl(0, 0%, 100%);
  z-index: 9 !important;
  padding: 1rem;
  border-bottom: 1px solid hsl(213, 22%, 93%);
  border-left: 1px solid hsl(213, 22%, 93%);
  display: table-cell;
}

.oh-sticky-table__th--sticky {
  right: 0;
  position: sticky;
  border-left: 1px solid hsl(213, 22%, 93%);
}

.oh-sticky-table__th--right {
  right: 0;
  border-left: 1px solid hsl(213, 22%, 93%);
}

.oh-sticky-table__button-container {
  display: flex;
  align-items: center;
}

.oh-sticky-table__button-container > * {
  flex-shrink: 0;
}

.dark .oh-sticky-table {
  border-color: hsl(0, 0%, 25%);
}

.dark .oh-sticky-table__th,
.dark .oh-sticky-table__sd,
.dark .oh-sticky-table__sr {
  background: #242424;
  color: hsl(0, 0%, 92%);
  border-color: hsl(0, 0%, 25%);
}

.dark .oh-sticky-table__td {
  border-color: hsl(0, 0%, 25%);
}

.dark .oh-sticky-table__tr:hover {
  background-color: hsl(0, 0%, 18%);
}

/* Wide variant of the base .oh-modal__dialog (max-width: 700px, defined in
   v1_styles.css) — used by report/standard_report.html's drilldown modal,
   which needs room for a multi-column sticky table. */
.oh-modal__dialog--wide {
  max-width: min(1100px, 95vw);
}

/* .oh-card-dashboard's __header/__counts have their own spacing but the
   __body wrapper between them (report/standard_report.html's KPI cards)
   has never had a rule of its own. */
.oh-card-dashboard__body {
  margin-top: 6px;
}

/* Bare .oh-card (distinct from .oh-card-dashboard / .oh-card__*, which
   already have real rules) is used by report/explorer_picker.html and
   report/standard_report.html but was never actually defined anywhere the
   theme loads — those cards were rendering with zero border/shadow/padding.
   Tokens match the theme's own real card component
   (horilla_theme/templates/generic/horilla_card.html) for visual
   consistency with the Standard Reports catalog grid fixed earlier. */
.oh-card {
  background-color: hsl(0, 0%, 100%);
  border: 1px solid #ebebeb;
  border-radius: 6px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
}
.dark .oh-card {
  background-color: #242424;
  border-color: hsl(0, 0%, 25%);
}