@tailwind base;
@tailwind components;
@tailwind utilities;
/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
 
/* 
   Add the following markup AFTER your import statements
   Notice: this style contains only the rules for pagy-nav
*/

.pagy-nav.pagination {
  @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
}

.page.next a {
  @apply relative inline-flex items-center border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page.prev a {
  @apply relative inline-flex items-center border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page.next.disabled {
  @apply relative inline-flex items-center border border-gray-300 bg-slate-100 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page.prev.disabled {
  @apply relative inline-flex items-center border border-gray-300 bg-slate-100 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page a, .page.gap {
  @apply bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20;
}

.page.active {
  @apply z-10 border-indigo-500 bg-indigo-50 text-indigo-600 relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20;
}

.text-gray-700 {
  color: rgb(32 33 35);
}

.text-yellow-100 {
  color: rgb(255,193,7);
}

.text-red-100 {
  color: rgb(191 21 21);
}

.text-green {
  color: rgb(57 159 39) !important;
}

.bg-yellow-100 {
  background-color: rgb(255,193,7);
  color: rgb(255 255 255);
}

.bg-green-100 {
  background-color: rgb(57 159 39);
  color: rgb(255 255 255);
}

.bg-red-100 {
  background-color: rgb(191 21 21);
  color: rgb(255 255 255);
}

.bg-purple-100 {
  background-color: rgb(230 207 252);
  color: rgb(0 0 0);
}

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
}

.loading-screen.hidden {
  display: none;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Đặt cursor mặc định cho toàn bộ table row */
#table-processor tbody tr {
  cursor: default !important;
}

/* Chỉ hiện cursor pointer khi hover vào icon */
.handler-drag {
  cursor: move; /* fallback nếu grab không được hỗ trợ */
  cursor: -webkit-grab;
  cursor: grab;
}

/* Khi đang kéo */
.handler-drag:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
/* Column Reorder Styles */
.reorderable-table-container .sortable-ghost {
  opacity: 0.5;
  background-color: #f3f4f6 !important;
  border: 2px dashed #6b7280 !important;
}

.reorderable-table-container .sortable-chosen {
  background-color: #dbeafe !important;
  border: 2px solid #3b82f6 !important;
  transform: rotate(2deg);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.reorderable-table-container .sortable-drag {
  background-color: #ffffff !important;
  border: 2px solid #3b82f6 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  transform: rotate(5deg);
  z-index: 1000;
}

/* Column reorder controls */
.reorderable-table-container .column-reorder-controls {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  align-items: center;
}

.reorderable-table-container .column-reorder-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background-color: #ffffff;
  color: #374151;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.reorderable-table-container .column-reorder-btn:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

.reorderable-table-container .column-reorder-btn.active {
  background-color: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
}

.reorderable-table-container .column-reorder-btn.danger {
  background-color: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}

.reorderable-table-container .column-reorder-btn.danger:hover {
  background-color: #dc2626;
  border-color: #dc2626;
}

/* Drag handle for columns */
.reorderable-table-container .column-drag-handle {
  cursor: move;
  color: #6b7280;
  margin-right: 0.5rem;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.reorderable-table-container .column-drag-handle:hover {
  opacity: 1;
  color: #3b82f6;
}

/* Reorder mode indicator */
.reorderable-table-container .reorder-mode-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  background-color: #fef3c7;
  color: #92400e;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.reorderable-table-container .reorder-mode-indicator.active {
  background-color: #dbeafe;
  color: #1e40af;
}
button .show-when-enabled {
  display: initial;
}
button .show-when-disabled {
  display: none;
}
button[disabled] .show-when-enabled {
  display: none;
}
button[disabled] .show-when-disabled {
  display: initial;
}
:root{--ss-primary-color: #5897fb;--ss-bg-color: #ffffff;--ss-font-color: #4d4d4d;--ss-font-placeholder-color: #8d8d8d;--ss-disabled-color: #dcdee2;--ss-border-color: #dcdee2;--ss-highlight-color: #fffb8c;--ss-success-color: #00b755;--ss-error-color: #dc3545;--ss-main-height: 30px;--ss-content-height: 300px;--ss-spacing-l: 7px;--ss-spacing-m: 5px;--ss-spacing-s: 3px;--ss-animation-timing: 0.2s;--ss-border-radius: 4px}@keyframes ss-valueIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes ss-valueOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}.ss-hide{display:none !important}.ss-main{display:flex;flex-direction:row;position:relative;user-select:none;color:var(--ss-font-color);min-height:var(--ss-main-height);width:100%;padding:var(--ss-spacing-s);cursor:pointer;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;box-sizing:border-box;transition:background-color var(--ss-animation-timing);overflow:hidden}.ss-main:focus{box-shadow:0 0 5px var(--ss-primary-color)}.ss-main.ss-disabled{background-color:var(--ss-disabled-color);cursor:not-allowed}.ss-main.ss-disabled .ss-values .ss-disabled{color:var(--ss-font-color)}.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.ss-main.ss-open-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main.ss-open-below{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.ss-main .ss-values{display:inline-flex;flex-wrap:wrap;gap:var(--ss-spacing-m);flex:1 1 100%}.ss-main .ss-values .ss-placeholder{display:flex;padding:var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s) var(--ss-spacing-m);margin:auto 0px auto 0px;line-height:1em;align-items:center;width:100%;color:var(--ss-font-placeholder-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss-main .ss-values .ss-max{display:flex;user-select:none;align-items:center;width:fit-content;font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m);background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius)}.ss-main .ss-values .ss-single{display:flex;margin:auto 0px auto var(--ss-spacing-s)}.ss-main .ss-values .ss-value{display:flex;user-select:none;align-items:center;width:fit-content;background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius);animation-name:ss-valueIn;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out;animation-fill-mode:both}.ss-main .ss-values .ss-value.ss-value-out{animation-name:ss-valueOut;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out}.ss-main .ss-values .ss-value .ss-value-text{font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m)}.ss-main .ss-values .ss-value .ss-value-delete{display:flex;align-items:center;height:var(--ss-spacing-l);width:var(--ss-spacing-l);padding:var(--ss-spacing-s) var(--ss-spacing-m);cursor:pointer;border-left:solid 1px var(--ss-bg-color);box-sizing:content-box}.ss-main .ss-values .ss-value .ss-value-delete svg{height:var(--ss-spacing-l);width:var(--ss-spacing-l)}.ss-main .ss-values .ss-value .ss-value-delete svg path{fill:none;stroke:var(--ss-bg-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-deselect{display:flex;align-self:center;justify-content:flex-end;flex:0 1 auto;width:8px;height:8px;margin:0 var(--ss-spacing-m) 0 var(--ss-spacing-m)}.ss-main .ss-deselect svg{width:8px;height:8px}.ss-main .ss-deselect svg path{fill:none;stroke:var(--ss-font-color);stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-arrow{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-main .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content{position:absolute;display:flex;height:auto;flex-direction:column;width:auto;max-height:var(--ss-content-height);box-sizing:border-box;border:solid 1px var(--ss-border-color);background-color:var(--ss-bg-color);transition:transform var(--ss-animation-timing),opacity var(--ss-animation-timing);opacity:0;transform:scaleY(0);transform-origin:center top;overflow:hidden;z-index:10000}.ss-content.ss-relative{position:relative;height:100%}.ss-content.ss-open-above{flex-direction:column-reverse;opacity:1;transform:scaleY(1);transform-origin:center bottom;border-top-left-radius:var(--ss-border-radius);border-top-right-radius:var(--ss-border-radius)}.ss-content.ss-open-below{opacity:1;transform:scaleY(1);transform-origin:center top;border-bottom-left-radius:var(--ss-border-radius);border-bottom-right-radius:var(--ss-border-radius)}.ss-content .ss-search{flex:0 1 auto;display:flex;flex-direction:row;padding:var(--ss-spacing-l) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0px;padding:var(--ss-spacing-m) var(--ss-spacing-l);margin:0;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;text-align:left;box-sizing:border-box}.ss-content .ss-search input::placeholder{color:var(--ss-font-placeholder-color);vertical-align:middle}.ss-content .ss-search input:focus{box-shadow:0 0 5px var(--ss-primary-color)}.ss-content .ss-search .ss-addable{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;flex:0 0 auto;height:auto;margin:0 0 0 var(--ss-spacing-m);border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius)}.ss-content .ss-search .ss-addable svg{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-content .ss-search .ss-addable svg path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list{flex:1 1 auto;height:auto;overflow-x:hidden;overflow-y:auto}.ss-content .ss-list .ss-error{color:var(--ss-error-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-searching{color:var(--ss-font-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup.ss-close .ss-option{display:none !important}.ss-content .ss-list .ss-optgroup .ss-optgroup-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text{flex:1 1 auto;font-weight:bold;color:var(--ss-font-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow){cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions{flex:0 1 auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ss-spacing-m)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall{flex:0 0 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall:hover{opacity:.5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall.ss-selected svg path{stroke:var(--ss-error-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall span{flex:0 1 auto;display:flex;align-items:center;justify-content:center;font-size:60%;text-align:center;padding:0 var(--ss-spacing-s) 0 0}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg{flex:0 1 auto;width:13px;height:13px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg path{fill:none;stroke:var(--ss-success-color);stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:first-child{stroke-width:5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:last-child{stroke-width:11}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable{flex:0 1 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow{flex:1 1 auto;width:10px;height:10px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content .ss-list .ss-optgroup .ss-option{padding:var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s) calc(var(--ss-spacing-l)*3)}.ss-content .ss-list .ss-option{display:flex;padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);color:var(--ss-font-color);cursor:pointer;user-select:none}.ss-content .ss-list .ss-option:hover{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-highlighted,.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;background-color:var(--ss-disabled-color)}.ss-content .ss-list .ss-option.ss-disabled:hover{color:var(--ss-font-color)}.ss-content .ss-list .ss-option .ss-search-highlight{background-color:var(--ss-highlight-color)}/*# sourceMappingURL=slimselect.css.map */
/* Transaction Records Checkbox Styling */
.user-checkbox:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.user-checkbox:focus {
  ring: 2px;
  ring-color: #3b82f6;
}

#select-all-checkbox:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

#select-all-checkbox:focus {
  ring: 2px;
  ring-color: #3b82f6;
}

/* Checkbox column width */
.checkbox-column {
  width: 70px;
  min-width: 70px;
}

/* Tooltip styles */
.tooltip-container {
  position: relative;
}

.tooltip-container:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background-color: #1f2937;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 9999;
  margin-left: 8px;
  pointer-events: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.tooltip-container:hover::before {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #1f2937;
  margin-left: 3px;
  pointer-events: none;
  z-index: 9999;
}

/* Modal styles */
#bank-account-modal,
#confirmation-modal {
  display: none;
}

#bank-account-modal.flex,
#confirmation-modal.flex {
  display: flex;
}

/* Ensure modals are above everything */
#bank-account-modal,
#confirmation-modal {
  z-index: 100 !important;
}

#transaction-records-container thead th {
  position: inherit !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.dropdown[aria-expanded="true"] .dropdown-icon {
  transform: rotate(90deg);
  transition: transform 0.3s ease-out;
}

.dropdown[aria-expanded="false"] .dropdown-icon {
  transform: rotate(0deg);
  transition: transform 0.3s ease-out;
}

#sidebar-multi-level-sidebar {
  transition: width 0.3s ease;
}

#main-content {
  transition: margin-left 0.3s ease;
}

#sidebar-multi-level-sidebar.w-16 .flex-1,
#sidebar-multi-level-sidebar.w-16 .ml-3,
#sidebar-multi-level-sidebar.w-16 .dropdown-list,
#sidebar-multi-level-sidebar.w-16 .dropdown-icon {
  display: none;
}

.relative.overflow-x-auto {
  overflow-x: auto;
  overflow-y: visible;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  border: 1px solid #e5e7eb;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #f9fafb;
}

.header-sticky-1,
.row-sticky-1 {
  position: sticky;
  left: 0;
  z-index: 2;
}

.header-sticky-2,
.row-sticky-2 {
  position: sticky;
  left: var(--first-column-width);
  z-index: 2;
}

.header-sticky-3,
.row-sticky-3 {
  position: sticky;
  left: calc(var(--first-column-width) + var(--second-column-width));
  z-index: 2;
}

.header-sticky-4,
.row-sticky-4 {
  position: sticky;
  left: calc(var(--first-column-width) + var(--second-column-width) + var(--third-column-width));
  z-index: 2;
}

thead .header-sticky-1,
thead .header-sticky-2,
thead .header-sticky-3,
thead .header-sticky-4 {
  z-index: 2;
}

.header-sticky-1,
.header-sticky-2,
.header-sticky-3,
.header-sticky-4,
.row-sticky-1,
.row-sticky-2,
.row-sticky-3,
.row-sticky-4 {
  background-color: #f9fafb;
}

.header-sticky-4,
.row-sticky-4 {
  box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.1);
}

td:not(.row-sticky-1):not(.row-sticky-2):not(.row-sticky-3):not(.row-sticky-4),
th:not(.header-sticky-1):not(.header-sticky-2):not(.header-sticky-3):not(.header-sticky-4) {
  z-index: 1;
}

thead .header-sticky-1,
thead .header-sticky-2,
thead .header-sticky-3,
thead .header-sticky-4 {
  background-color: #f9fafb;
}

.drag-handle {
  cursor: move;
  user-select: none;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

.animate-blink {
  animation: blink 1.25s infinite;
}

@keyframes pulseRed {

  0%,
  100% {
    background-color: inherit;
  }

  50% {
    background-color: rgb(255 193 7 / 43%);
  }
}

.force-no-animation {
  animation: none !important;
}

.animate-pulse-red {
  animation: pulseRed 1.5s infinite;
}

.row-inactive {
  background-color: #e7e9eb;
  color: #c0c0c1;
}

.text-xs {
  font-size: 0.85rem !important;
}

.spinner-loading {
  display: inline-block;
  /* Ensure the spinner is inline */
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 20px;
  /* Adjust size as needed */
  height: 20px;
  /* Adjust size as needed */
  border-radius: 50%;
  border-left-color: #09f;
  animation: spin 1s linear infinite;
  vertical-align: middle;
  /* Align with text */
  margin-left: 5px;
  /* Add space between text and spinner */
}

/* Styles cho row đang được kéo */
.sortable-drag {
  background-color: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  opacity: 0.8;
}

/* Styles cho placeholder */
.sortable-ghost {
  background-color: #f3f4f6 !important;
  opacity: 0.5;
}

/* Disable text selection khi đang sort */
body.sorting {
  user-select: none;
}

/* Cursor cho draggable rows */
#table-processor tbody tr {
  cursor: grab;
}

#table-processor tbody tr:active {
  cursor: grabbing;
}

.force-no-bank-account {
  background-color: rgba(108, 108, 108, 0.611) !important;
  animation: none !important;
}

/* Custom modal backdrop styles */
[modal-backdrop] {
  background-color: rgba(0, 0, 0, 0.405) !important; /* Darker backdrop */
  /* backdrop-filter: blur(4px) !important; /* Add blur effect */
  transition: all 0.3s ease !important; /* Smooth transition */
}