/*
 * Bundle: utilities.min.css
 * Generated: 2025-11-08 22:52:50
 * Files: 17
 */

/* === tp-date-picker.css === */
.tp-date-picker {
position: relative;
width: 100%;
max-width: 320px;
}
.tp-date-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.tp-date-input {
width: 100%;
padding: var(--tp-space-3, 0.75rem) var(--tp-space-10, 2.5rem) var(--tp-space-3, 0.75rem) var(--tp-space-3, 0.75rem);
font-size: 0.9375rem;
font-weight: 400;
color: var(--tp-gray-900, #111827);
background: var(--tp-white, #ffffff);
border: 2px solid var(--tp-gray-300, #d1d5db);
border-radius: var(--tp-radius-lg, 8px);
outline: none;
cursor: pointer;
transition: all 200ms;
}
.tp-rtl .tp-date-input {
padding-right: var(--tp-space-3, 0.75rem);
padding-left: var(--tp-space-10, 2.5rem);
}
.tp-date-input:focus,
.tp-date-input:hover {
border-color: var(--tp-primary-500, #3b82f6);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
[data-theme="dark"] .tp-date-input {
color: var(--tp-white, #ffffff);
background: var(--tp-gray-800, #1f2937);
border-color: var(--tp-gray-700, #374151);
}
[data-theme="dark"] .tp-date-input:focus,
[data-theme="dark"] .tp-date-input:hover {
border-color: var(--tp-primary-400, #60a5fa);
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}
.tp-date-icon {
position: absolute;
right: var(--tp-space-3, 0.75rem);
top: 50%;
transform: translateY(-50%);
color: var(--tp-gray-400, #9ca3af);
pointer-events: none;
}
.tp-rtl .tp-date-icon {
right: auto;
left: var(--tp-space-3, 0.75rem);
}
.tp-date-picker-dropdown {
position: absolute;
top: calc(100% + var(--tp-space-2, 0.5rem));
left: 0;
background: var(--tp-white, #ffffff);
border: 1px solid var(--tp-gray-200, #e5e7eb);
border-radius: var(--tp-radius-lg, 8px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
padding: var(--tp-space-4, 1rem);
z-index: 1000;
min-width: 320px;
}
[data-theme="dark"] .tp-date-picker-dropdown {
background: var(--tp-gray-800, #1f2937);
border-color: var(--tp-gray-700, #374151);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.tp-date-presets {
padding: var(--tp-space-3, 0.75rem);
border-bottom: 1px solid var(--tp-gray-200, #e5e7eb);
margin-bottom: var(--tp-space-4, 1rem);
}
[data-theme="dark"] .tp-date-presets {
border-bottom-color: var(--tp-gray-700, #374151);
}
.tp-date-presets-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--tp-gray-700, #374151);
margin-bottom: var(--tp-space-2, 0.5rem);
}
[data-theme="dark"] .tp-date-presets-title {
color: var(--tp-gray-300, #d1d5db);
}
.tp-date-preset-btn {
display: block;
width: 100%;
padding: var(--tp-space-2, 0.5rem) var(--tp-space-3, 0.75rem);
margin-bottom: var(--tp-space-1, 0.25rem);
font-size: 0.875rem;
font-weight: 500;
color: var(--tp-gray-700, #374151);
background: transparent;
border: none;
border-radius: var(--tp-radius-md, 6px);
text-align: right;
cursor: pointer;
transition: all 200ms;
}
.tp-rtl .tp-date-preset-btn {
text-align: right;
}
.tp-date-preset-btn:hover {
background: var(--tp-gray-100, #f3f4f6);
color: var(--tp-primary-600, #2563eb);
}
[data-theme="dark"] .tp-date-preset-btn {
color: var(--tp-gray-300, #d1d5db);
}
[data-theme="dark"] .tp-date-preset-btn:hover {
background: var(--tp-gray-700, #374151);
color: var(--tp-primary-400, #60a5fa);
}
.tp-date-picker-calendars {
display: flex;
gap: var(--tp-space-4, 1rem);
}
.tp-calendar {
flex: 1;
min-width: 280px;
}
.tp-calendar-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--tp-space-3, 0.75rem);
}
.tp-calendar-title {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.tp-calendar-month {
font-size: 1rem;
font-weight: 600;
color: var(--tp-gray-900, #111827);
}
[data-theme="dark"] .tp-calendar-month {
color: var(--tp-white, #ffffff);
}
.tp-calendar-year {
font-size: 0.875rem;
color: var(--tp-gray-600, #4b5563);
margin-top: 0.125rem;
}
[data-theme="dark"] .tp-calendar-year {
color: var(--tp-gray-400, #9ca3af);
}
.tp-calendar-nav-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: transparent;
border: none;
border-radius: var(--tp-radius-md, 6px);
color: var(--tp-gray-600, #4b5563);
cursor: pointer;
transition: all 200ms;
}
.tp-calendar-nav-btn:hover {
background: var(--tp-gray-100, #f3f4f6);
color: var(--tp-gray-900, #111827);
}
[data-theme="dark"] .tp-calendar-nav-btn {
color: var(--tp-gray-400, #9ca3af);
}
[data-theme="dark"] .tp-calendar-nav-btn:hover {
background: var(--tp-gray-700, #374151);
color: var(--tp-white, #ffffff);
}
.tp-calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--tp-space-1, 0.25rem);
margin-bottom: var(--tp-space-2, 0.5rem);
}
.tp-calendar-weekday {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
font-size: 0.75rem;
font-weight: 600;
color: var(--tp-gray-500, #6b7280);
text-transform: uppercase;
}
[data-theme="dark"] .tp-calendar-weekday {
color: var(--tp-gray-400, #9ca3af);
}
.tp-calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--tp-space-1, 0.25rem);
}
.tp-calendar-day-cell {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 36px;
border-radius: var(--tp-radius-md, 6px);
cursor: pointer;
transition: all 150ms;
}
.tp-calendar-day-empty {
cursor: default;
}
.tp-calendar-day-number {
font-size: 0.875rem;
font-weight: 500;
color: var(--tp-gray-700, #374151);
}
[data-theme="dark"] .tp-calendar-day-number {
color: var(--tp-gray-300, #d1d5db);
}
.tp-calendar-day-cell:hover:not(.disabled):not(.tp-calendar-day-empty) {
background: var(--tp-gray-100, #f3f4f6);
}
[data-theme="dark"] .tp-calendar-day-cell:hover:not(.disabled):not(.tp-calendar-day-empty) {
background: var(--tp-gray-700, #374151);
}
.tp-calendar-day-cell.today .tp-calendar-day-number {
color: var(--tp-primary-600, #2563eb);
font-weight: 700;
}
.tp-calendar-day-cell.selected {
background: var(--tp-primary-500, #3b82f6);
}
.tp-calendar-day-cell.selected .tp-calendar-day-number {
color: var(--tp-white, #ffffff);
font-weight: 600;
}
.tp-calendar-day-cell.in-range {
background: var(--tp-primary-100, #dbeafe);
}
[data-theme="dark"] .tp-calendar-day-cell.in-range {
background: rgba(59, 130, 246, 0.2);
}
.tp-calendar-day-cell.in-range .tp-calendar-day-number {
color: var(--tp-primary-700, #1d4ed8);
}
[data-theme="dark"] .tp-calendar-day-cell.in-range .tp-calendar-day-number {
color: var(--tp-primary-300, #93c5fd);
}
.tp-calendar-day-cell.disabled {
cursor: not-allowed;
opacity: 0.4;
}
.tp-calendar-day-cell.disabled:hover {
background: transparent;
}
.tp-date-picker-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--tp-space-2, 0.5rem);
margin-top: var(--tp-space-4, 1rem);
padding-top: var(--tp-space-4, 1rem);
border-top: 1px solid var(--tp-gray-200, #e5e7eb);
}
[data-theme="dark"] .tp-date-picker-footer {
border-top-color: var(--tp-gray-700, #374151);
}
.tp-date-btn {
padding: var(--tp-space-2, 0.5rem) var(--tp-space-4, 1rem);
font-size: 0.875rem;
font-weight: 600;
border: none;
border-radius: var(--tp-radius-md, 6px);
cursor: pointer;
transition: all 200ms;
}
.tp-date-btn-cancel {
color: var(--tp-gray-700, #374151);
background: var(--tp-gray-100, #f3f4f6);
}
.tp-date-btn-cancel:hover {
background: var(--tp-gray-200, #e5e7eb);
}
[data-theme="dark"] .tp-date-btn-cancel {
color: var(--tp-gray-300, #d1d5db);
background: var(--tp-gray-700, #374151);
}
[data-theme="dark"] .tp-date-btn-cancel:hover {
background: var(--tp-gray-600, #4b5563);
}
.tp-date-btn-apply {
color: var(--tp-white, #ffffff);
background: var(--tp-primary-600, #2563eb);
}
.tp-date-btn-apply:hover {
background: var(--tp-primary-700, #1d4ed8);
}
[data-theme="dark"] .tp-date-btn-apply {
background: var(--tp-primary-500, #3b82f6);
}
[data-theme="dark"] .tp-date-btn-apply:hover {
background: var(--tp-primary-600, #2563eb);
}
.tp-date-picker-calendars:has(.tp-calendar-hijri) {
flex-direction: column;
}
@media (min-width: 768px) {
.tp-date-picker-calendars:has(.tp-calendar-hijri) {
flex-direction: row;
}
.tp-date-picker-dropdown:has(.tp-calendar-hijri) {
min-width: 640px;
}
}
.tp-calendar-gregorian {
border-right: 1px solid var(--tp-gray-200, #e5e7eb);
padding-right: var(--tp-space-4, 1rem);
}
[data-theme="dark"] .tp-calendar-gregorian {
border-right-color: var(--tp-gray-700, #374151);
}
.tp-rtl .tp-calendar-gregorian {
border-right: none;
border-left: 1px solid var(--tp-gray-200, #e5e7eb);
padding-right: 0;
padding-left: var(--tp-space-4, 1rem);
}
[data-theme="dark"].tp-rtl .tp-calendar-gregorian {
border-left-color: var(--tp-gray-700, #374151);
}
@media (max-width: 1024px) {
.tp-date-picker {
max-width: 100%;
}
.tp-date-picker-dropdown {
left: 0;
right: 0;
}
}
@media (max-width: 768px) {
.tp-date-picker-dropdown {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90vw;
max-height: 90vh;
overflow-y: auto;
}
.tp-date-picker-calendars {
flex-direction: column;
}
.tp-calendar {
min-width: auto;
}
.tp-calendar-gregorian {
border-right: none;
border-bottom: 1px solid var(--tp-gray-200, #e5e7eb);
padding-right: 0;
padding-bottom: var(--tp-space-4, 1rem);
margin-bottom: var(--tp-space-4, 1rem);
}
[data-theme="dark"] .tp-calendar-gregorian {
border-bottom-color: var(--tp-gray-700, #374151);
}
.tp-date-presets {
max-height: 150px;
overflow-y: auto;
}
}
@media (max-width: 640px) {
.tp-date-picker-dropdown {
min-width: auto;
width: 90vw;
}
.tp-calendar-days {
gap: 0.125rem;
}
.tp-calendar-day-cell {
height: 32px;
}
.tp-calendar-day-number {
font-size: 0.8125rem;
}
.tp-date-btn {
padding: var(--tp-space-2, 0.5rem) var(--tp-space-3, 0.75rem);
font-size: 0.8125rem;
}
}
.tp-date-input:focus-visible,
.tp-calendar-nav-btn:focus-visible,
.tp-calendar-day-cell:focus-visible,
.tp-date-preset-btn:focus-visible,
.tp-date-btn:focus-visible {
outline: 2px solid var(--tp-primary-500, #3b82f6);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.tp-date-input,
.tp-calendar-nav-btn,
.tp-calendar-day-cell,
.tp-date-preset-btn,
.tp-date-btn {
transition: none !important;
}
}
@media (prefers-contrast: high) {
.tp-date-input,
.tp-date-picker-dropdown {
border-width: 2px;
}
.tp-calendar-day-cell.selected {
outline: 2px solid currentColor;
}
}
@media (max-width: 768px) {
.tp-date-picker.open::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
[data-theme="dark"] .tp-date-picker.open::before {
background: rgba(0, 0, 0, 0.7);
}
}
.tp-date-picker-dropdown {
animation: tp-date-picker-fade-in 200ms ease-out;
}
@keyframes tp-date-picker-fade-in {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.tp-date-picker-dropdown {
animation: tp-date-picker-scale-in 200ms ease-out;
}
@keyframes tp-date-picker-scale-in {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(0.95);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
}

/* === tp-bottom-sheet.css === */
.tp-bottom-sheet-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9998;
opacity: 0;
transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
-webkit-tap-highlight-color: transparent;
}
.tp-bottom-sheet-backdrop-open {
opacity: 1;
}
[data-theme="dark"] .tp-bottom-sheet-backdrop {
background: rgba(0, 0, 0, 0.7);
}
.tp-bottom-sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: var(--tp-white, #ffffff);
border-radius: var(--tp-radius-xl, 20px) var(--tp-radius-xl, 20px) 0 0;
box-shadow:
0 -10px 40px rgba(0, 0, 0, 0.1),
0 -2px 8px rgba(0, 0, 0, 0.05);
z-index: 9999;
display: flex;
flex-direction: column;
max-height: 95vh;
transform: translateY(100%);
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
-webkit-overflow-scrolling: touch;
}
.tp-bottom-sheet-open {
transform: translateY(0);
}
[data-theme="dark"] .tp-bottom-sheet {
background: var(--tp-gray-800, #1f2937);
box-shadow:
0 -10px 40px rgba(0, 0, 0, 0.4),
0 -2px 8px rgba(0, 0, 0, 0.2);
}
.tp-bottom-sheet-dragging {
transition: none !important;
}
.tp-bottom-sheet-auto {
height: auto;
min-height: 200px;
}
.tp-bottom-sheet-half {
height: 50vh;
}
.tp-bottom-sheet-full {
height: 95vh;
}
.tp-bottom-sheet-handle {
width: 40px;
height: 4px;
background: var(--tp-gray-300, #d1d5db);
border-radius: 2px;
margin: 12px auto 8px;
flex-shrink: 0;
transition: background 200ms;
cursor: grab;
}
.tp-bottom-sheet-handle:active {
cursor: grabbing;
}
.tp-bottom-sheet:hover .tp-bottom-sheet-handle,
.tp-bottom-sheet-dragging .tp-bottom-sheet-handle {
background: var(--tp-gray-400, #9ca3af);
}
[data-theme="dark"] .tp-bottom-sheet-handle {
background: var(--tp-gray-600, #4b5563);
}
[data-theme="dark"] .tp-bottom-sheet:hover .tp-bottom-sheet-handle,
[data-theme="dark"] .tp-bottom-sheet-dragging .tp-bottom-sheet-handle {
background: var(--tp-gray-500, #6b7280);
}
.tp-bottom-sheet-header {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 var(--tp-space-4, 1rem) var(--tp-space-2, 0.5rem);
flex-shrink: 0;
border-bottom: 1px solid var(--tp-gray-100, #f3f4f6);
}
[data-theme="dark"] .tp-bottom-sheet-header {
border-bottom-color: var(--tp-gray-700, #374151);
}
.tp-bottom-sheet-close {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
background: transparent;
border: none;
border-radius: var(--tp-radius-full, 50%);
color: var(--tp-gray-500, #6b7280);
cursor: pointer;
transition: all 200ms;
-webkit-tap-highlight-color: transparent;
}
.tp-bottom-sheet-close:hover {
background: var(--tp-gray-100, #f3f4f6);
color: var(--tp-gray-700, #374151);
}
.tp-bottom-sheet-close:active {
transform: scale(0.95);
}
.tp-bottom-sheet-close:focus-visible {
outline: 2px solid var(--tp-primary-500, #3b82f6);
outline-offset: 2px;
}
.tp-bottom-sheet-close svg {
width: 20px;
height: 20px;
}
[data-theme="dark"] .tp-bottom-sheet-close {
color: var(--tp-gray-400, #9ca3af);
}
[data-theme="dark"] .tp-bottom-sheet-close:hover {
background: var(--tp-gray-700, #374151);
color: var(--tp-gray-200, #e5e7eb);
}
[dir="rtl"] .tp-bottom-sheet-header {
justify-content: flex-start;
}
.tp-bottom-sheet-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: var(--tp-space-4, 1rem);
-webkit-overflow-scrolling: touch;
}
.tp-bottom-sheet-content::-webkit-scrollbar {
width: 6px;
}
.tp-bottom-sheet-content::-webkit-scrollbar-track {
background: transparent;
}
.tp-bottom-sheet-content::-webkit-scrollbar-thumb {
background: var(--tp-gray-300, #d1d5db);
border-radius: 3px;
}
.tp-bottom-sheet-content::-webkit-scrollbar-thumb:hover {
background: var(--tp-gray-400, #9ca3af);
}
[data-theme="dark"] .tp-bottom-sheet-content::-webkit-scrollbar-thumb {
background: var(--tp-gray-600, #4b5563);
}
[data-theme="dark"] .tp-bottom-sheet-content::-webkit-scrollbar-thumb:hover {
background: var(--tp-gray-500, #6b7280);
}
.tp-bottom-sheet-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--tp-gray-900, #111827);
margin: 0 0 var(--tp-space-4, 1rem);
}
.tp-bottom-sheet-description {
font-size: 0.875rem;
color: var(--tp-gray-600, #4b5563);
line-height: 1.5;
margin: 0 0 var(--tp-space-4, 1rem);
}
[data-theme="dark"] .tp-bottom-sheet-title {
color: var(--tp-white, #ffffff);
}
[data-theme="dark"] .tp-bottom-sheet-description {
color: var(--tp-gray-400, #9ca3af);
}
.tp-bottom-sheet-actions {
display: flex;
gap: var(--tp-space-3, 0.75rem);
padding: var(--tp-space-4, 1rem);
border-top: 1px solid var(--tp-gray-100, #f3f4f6);
flex-shrink: 0;
}
.tp-bottom-sheet-actions button {
flex: 1;
padding: var(--tp-space-3, 0.75rem);
border-radius: var(--tp-radius-md, 6px);
font-weight: 500;
transition: all 200ms;
}
[data-theme="dark"] .tp-bottom-sheet-actions {
border-top-color: var(--tp-gray-700, #374151);
}
[dir="rtl"] .tp-bottom-sheet-actions {
flex-direction: row-reverse;
}
.tp-bottom-sheet-list {
list-style: none;
margin: 0;
padding: 0;
}
.tp-bottom-sheet-list-item {
display: flex;
align-items: center;
padding: var(--tp-space-3, 0.75rem) var(--tp-space-4, 1rem);
margin: 0 calc(var(--tp-space-4, 1rem) * -1);
border-radius: var(--tp-radius-md, 6px);
cursor: pointer;
transition: background 200ms;
-webkit-tap-highlight-color: transparent;
}
.tp-bottom-sheet-list-item:hover {
background: var(--tp-gray-50, #f9fafb);
}
.tp-bottom-sheet-list-item:active {
background: var(--tp-gray-100, #f3f4f6);
}
[data-theme="dark"] .tp-bottom-sheet-list-item:hover {
background: var(--tp-gray-700, #374151);
}
[data-theme="dark"] .tp-bottom-sheet-list-item:active {
background: var(--tp-gray-600, #4b5563);
}
.tp-bottom-sheet-list-item-icon {
width: 24px;
height: 24px;
margin-right: var(--tp-space-3, 0.75rem);
color: var(--tp-gray-500, #6b7280);
flex-shrink: 0;
}
[dir="rtl"] .tp-bottom-sheet-list-item-icon {
margin-right: 0;
margin-left: var(--tp-space-3, 0.75rem);
}
.tp-bottom-sheet-list-item-content {
flex: 1;
}
.tp-bottom-sheet-list-item-title {
font-size: 0.9375rem;
font-weight: 500;
color: var(--tp-gray-900, #111827);
margin: 0;
}
.tp-bottom-sheet-list-item-subtitle {
font-size: 0.8125rem;
color: var(--tp-gray-600, #4b5563);
margin: 2px 0 0;
}
[data-theme="dark"] .tp-bottom-sheet-list-item-title {
color: var(--tp-white, #ffffff);
}
[data-theme="dark"] .tp-bottom-sheet-list-item-subtitle {
color: var(--tp-gray-400, #9ca3af);
}
.tp-bottom-sheet-content .tp-form-group {
margin-bottom: var(--tp-space-4, 1rem);
}
.tp-bottom-sheet-content label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: var(--tp-gray-700, #374151);
margin-bottom: var(--tp-space-2, 0.5rem);
}
.tp-bottom-sheet-content input,
.tp-bottom-sheet-content select,
.tp-bottom-sheet-content textarea {
width: 100%;
padding: var(--tp-space-3, 0.75rem);
border: 1px solid var(--tp-gray-300, #d1d5db);
border-radius: var(--tp-radius-md, 6px);
font-size: 0.9375rem;
transition: all 200ms;
}
.tp-bottom-sheet-content input:focus,
.tp-bottom-sheet-content select:focus,
.tp-bottom-sheet-content textarea:focus {
outline: none;
border-color: var(--tp-primary-500, #3b82f6);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
[data-theme="dark"] .tp-bottom-sheet-content label {
color: var(--tp-gray-300, #d1d5db);
}
[data-theme="dark"] .tp-bottom-sheet-content input,
[data-theme="dark"] .tp-bottom-sheet-content select,
[data-theme="dark"] .tp-bottom-sheet-content textarea {
background: var(--tp-gray-700, #374151);
border-color: var(--tp-gray-600, #4b5563);
color: var(--tp-white, #ffffff);
}
@media (min-width: 768px) {
.tp-bottom-sheet {
left: 50%;
right: auto;
transform: translateX(-50%) translateY(100%);
max-width: 600px;
border-radius: var(--tp-radius-xl, 20px);
}
.tp-bottom-sheet-open {
transform: translateX(-50%) translateY(0);
}
.tp-bottom-sheet-full {
max-width: 90vw;
}
}
@media (min-width: 1024px) {
.tp-bottom-sheet {
max-width: 700px;
}
}
@media (max-width: 374px) {
.tp-bottom-sheet-content {
padding: var(--tp-space-3, 0.75rem);
}
.tp-bottom-sheet-actions {
padding: var(--tp-space-3, 0.75rem);
flex-direction: column;
}
.tp-bottom-sheet-actions button {
width: 100%;
}
}
@media (max-height: 500px) and (orientation: landscape) {
.tp-bottom-sheet {
max-height: 90vh;
}
.tp-bottom-sheet-full {
height: 90vh;
}
.tp-bottom-sheet-half {
height: 70vh;
}
}
.tp-bottom-sheet *:focus-visible {
outline: 2px solid var(--tp-primary-500, #3b82f6);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.tp-bottom-sheet,
.tp-bottom-sheet-backdrop,
.tp-bottom-sheet-handle,
.tp-bottom-sheet-close,
.tp-bottom-sheet-list-item {
transition: none !important;
}
.tp-bottom-sheet-close:active {
transform: none !important;
}
}
@media (prefers-contrast: high) {
.tp-bottom-sheet {
border: 2px solid currentColor;
}
.tp-bottom-sheet-header {
border-bottom-width: 2px;
}
.tp-bottom-sheet-actions {
border-top-width: 2px;
}
}
.tp-bottom-sheet-fade {
opacity: 0;
}
.tp-bottom-sheet-fade.tp-bottom-sheet-open {
opacity: 1;
}
.tp-bottom-sheet-scale {
transform: translateY(100%) scale(0.9);
}
.tp-bottom-sheet-scale.tp-bottom-sheet-open {
transform: translateY(0) scale(1);
}
.tp-bottom-sheet-loading {
display: flex;
align-items: center;
justify-content: center;
padding: var(--tp-space-8, 2rem);
}
.tp-bottom-sheet-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--tp-gray-200, #e5e7eb);
border-top-color: var(--tp-primary-500, #3b82f6);
border-radius: 50%;
animation: tp-bottom-sheet-spin 0.8s linear infinite;
}
@keyframes tp-bottom-sheet-spin {
to {
transform: rotate(360deg);
}
}
[data-theme="dark"] .tp-bottom-sheet-spinner {
border-color: var(--tp-gray-700, #374151);
border-top-color: var(--tp-primary-500, #3b82f6);
}
.tp-bottom-sheet-empty {
text-align: center;
padding: var(--tp-space-8, 2rem) var(--tp-space-4, 1rem);
}
.tp-bottom-sheet-empty-icon {
width: 64px;
height: 64px;
margin: 0 auto var(--tp-space-4, 1rem);
color: var(--tp-gray-300, #d1d5db);
}
.tp-bottom-sheet-empty-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--tp-gray-700, #374151);
margin: 0 0 var(--tp-space-2, 0.5rem);
}
.tp-bottom-sheet-empty-description {
font-size: 0.875rem;
color: var(--tp-gray-500, #6b7280);
margin: 0;
}
[data-theme="dark"] .tp-bottom-sheet-empty-icon {
color: var(--tp-gray-600, #4b5563);
}
[data-theme="dark"] .tp-bottom-sheet-empty-title {
color: var(--tp-gray-200, #e5e7eb);
}
[data-theme="dark"] .tp-bottom-sheet-empty-description {
color: var(--tp-gray-400, #9ca3af);
}

/* === bitrix-v3-icons-override.css === */
.bitrix-top-bar .top-bar-icon-btn {
position: relative !important;
width: 40px !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255, 255, 255, 0.1) !important;
border: none !important;
border-radius: 8px !important;
color: white !important;
font-size: 18px !important;
cursor: pointer !important;
transition: all 0.3s !important;
padding: 0 !important;
margin: 0 5px !important;
}
.bitrix-top-bar .top-bar-icon-btn:hover {
background: rgba(255, 255, 255, 0.2) !important;
transform: translateY(-2px) !important;
}
.bitrix-top-bar .top-bar-icon-btn i {
color: white !important;
font-size: 18px !important;
text-shadow: none !important;
filter: none !important;
}
.bitrix-top-bar .notification-badge {
position: absolute !important;
top: -5px !important;
left: -5px !important;
width: 20px !important;
height: 20px !important;
background: #ef4444 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px !important;
font-weight: 700 !important;
color: white !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
z-index: 1 !important;
}

/* === bitrix-v3-tabs.css === */
.cards-grid, .category-cards-wrapper {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;
margin-bottom: 32px;
}
@media (max-width: 1200px) {
.cards-grid, .category-cards-wrapper {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 900px) {
.cards-grid, .category-cards-wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.cards-grid, .category-cards-wrapper {
grid-template-columns: 1fr;
}
}
.bitrix-portal-wrapper {
position: relative;
width: 100%;
min-height: 100vh;
overflow-x: hidden;
}
.bitrix-main-content {
position: relative;
z-index: 1;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 16px;
padding-top: 0 !important;
min-height: calc(100vh - 110px);
background: #f8f9fa;
transition: margin-right 0.3s ease;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
.bitrix-sidebar.collapsed ~ .bitrix-main-content {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
transition: all 0.3s ease;
}
.content-section {
display: none;
animation: fadeInUp 0.3s ease-in-out;
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
position: relative;
z-index: 1;
max-width: 100%;
overflow-x: auto;
}
.content-section.active {
display: block;
}
.content-section table,
.content-section .dataTables_wrapper {
max-width: 100%;
overflow-x: auto;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.content-section .tabcontent {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
.content-section .section-header {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #e5e7eb;
}
.content-section .section-header h1 {
font-size: 24px;
color: #1f2937;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.content-section .section-header h1 i {
color: #667eea;
}
.content-section .section-subtitle {
color: #6b7280;
font-size: 14px;
margin-top: 5px;
}
[dir="rtl"] .bitrix-main-content {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
}
[dir="rtl"] .bitrix-sidebar.collapsed ~ .bitrix-main-content {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
}
@media (max-width: 768px) {
.bitrix-main-content {
margin-right: 0;
margin-top: var(--bitrix-top-height, 60px);
padding: 15px;
max-width: 100vw;
}
.bitrix-sidebar.collapsed ~ .bitrix-main-content {
margin-right: 0;
max-width: 100vw;
}
[dir="rtl"] .bitrix-main-content {
margin-left: 0;
max-width: 100vw;
}
[dir="rtl"] .bitrix-sidebar.collapsed ~ .bitrix-main-content {
margin-left: 0;
max-width: 100vw;
}
.content-section {
padding: 15px;
}
.content-section .section-header h1 {
font-size: 20px;
}
}
.content-section.loading {
position: relative;
min-height: 400px;
}
.content-section.loading::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border: 4px solid #f3f4f6;
border-top-color: #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.activity-heatmap-loader {
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.activity-load-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
border: none;
border-radius: 6px;
padding: 6px 12px;
font-size: 13px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}
.activity-load-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}
.activity-load-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.activity-heatmap-empty {
color: #94a3b8;
font-size: 12px;
font-style: italic;
}
.activity-heatmap {
display: inline-block;
padding: 4px;
}
.ai-assistant-btn {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #fff;
border: none;
border-radius: 6px;
padding: 6px 12px;
font-size: 13px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}
.ai-assistant-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}
.ai-assistant-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999999;
align-items: center;
justify-content: center;
}
.ai-assistant-modal.show {
display: flex;
}
.ai-assistant-modal-content {
background: #fff;
border-radius: 12px;
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.ai-assistant-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
border-bottom: 1px solid #e5e7eb;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #fff;
}
.ai-assistant-modal-title {
margin: 0;
font-size: 18px;
display: flex;
align-items: center;
gap: 8px;
}
.ai-assistant-modal-close {
background: none;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
line-height: 1;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: background 0.2s;
}
.ai-assistant-modal-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.ai-assistant-modal-body {
padding: 20px;
max-height: calc(80vh - 80px);
overflow-y: auto;
}
.ai-assistant-welcome {
margin-bottom: 16px;
padding: 12px;
background: #f0fdf4;
border-radius: 8px;
color: #166534;
font-size: 14px;
}
.ai-assistant-input {
width: 100%;
padding: 12px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 14px;
resize: vertical;
font-family: inherit;
margin-bottom: 12px;
}
.ai-assistant-input:focus {
outline: none;
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.ai-assistant-send {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #fff;
border: none;
border-radius: 8px;
padding: 10px 20px;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}
.ai-assistant-send:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}
.ai-assistant-chat {
margin-top: 16px;
max-height: 300px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.ai-assistant-msg {
padding: 10px 14px;
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
}
.ai-assistant-msg.user-msg {
background: #667eea;
color: #fff;
align-self: flex-end;
max-width: 80%;
}
.ai-assistant-msg.ai-msg {
background: #f3f4f6;
color: #1f2937;
align-self: flex-start;
max-width: 80%;
}
.trust-score-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
transition: all 0.3s ease;
cursor: help;
}
.trust-score-badge:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.trust-score-badge i {
font-size: 16px;
}
.trust-score-value {
font-size: 16px;
font-weight: 700;
}
.trust-score-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.9;
}
.trust-score-cell {
text-align: center;
vertical-align: middle;
}

/* === tp-advanced-search.css === */
.tp-advanced-search {
position: relative;
width: 100%;
max-width: 600px;
}
.tp-search-wrapper {
position: relative;
}
.tp-search-input-container {
position: relative;
display: flex;
align-items: center;
}
.tp-search-icon {
position: absolute;
left: var(--tp-space-3, 0.75rem);
top: 50%;
transform: translateY(-50%);
color: var(--tp-gray-400, #9ca3af);
pointer-events: none;
z-index: 2;
}
.tp-rtl .tp-search-icon {
left: auto;
right: var(--tp-space-3, 0.75rem);
}
.tp-search-input {
width: 100%;
padding: var(--tp-space-3, 0.75rem) var(--tp-space-10, 2.5rem);
padding-left: var(--tp-space-10, 2.5rem);
font-size: 0.9375rem;
font-weight: 400;
color: var(--tp-gray-900, #111827);
background: var(--tp-white, #ffffff);
border: 2px solid var(--tp-gray-300, #d1d5db);
border-radius: var(--tp-radius-lg, 8px);
outline: none;
transition: all 200ms;
}
.tp-rtl .tp-search-input {
padding-left: var(--tp-space-10, 2.5rem);
padding-right: var(--tp-space-10, 2.5rem);
}
.tp-search-input:focus {
border-color: var(--tp-primary-500, #3b82f6);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.tp-search-input::placeholder {
color: var(--tp-gray-400, #9ca3af);
}
[data-theme="dark"] .tp-search-input {
color: var(--tp-white, #ffffff);
background: var(--tp-gray-800, #1f2937);
border-color: var(--tp-gray-700, #374151);
}
[data-theme="dark"] .tp-search-input:focus {
border-color: var(--tp-primary-400, #60a5fa);
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}
.tp-search-clear {
position: absolute;
right: var(--tp-space-3, 0.75rem);
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: var(--tp-gray-200, #e5e7eb);
border: none;
border-radius: var(--tp-radius-full, 9999px);
color: var(--tp-gray-600, #4b5563);
cursor: pointer;
transition: all 200ms;
z-index: 2;
}
.tp-rtl .tp-search-clear {
right: auto;
left: var(--tp-space-3, 0.75rem);
}
.tp-search-clear:hover {
background: var(--tp-gray-300, #d1d5db);
color: var(--tp-gray-700, #374151);
}
[data-theme="dark"] .tp-search-clear {
background: var(--tp-gray-700, #374151);
color: var(--tp-gray-300, #d1d5db);
}
[data-theme="dark"] .tp-search-clear:hover {
background: var(--tp-gray-600, #4b5563);
color: var(--tp-white, #ffffff);
}
.tp-search-loading {
position: absolute;
right: var(--tp-space-3, 0.75rem);
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.tp-rtl .tp-search-loading {
right: auto;
left: var(--tp-space-3, 0.75rem);
}
.tp-search-spinner {
width: 20px;
height: 20px;
border: 2px solid var(--tp-gray-300, #d1d5db);
border-top-color: var(--tp-primary-500, #3b82f6);
border-radius: 50%;
animation: tp-search-spin 0.6s linear infinite;
}
@keyframes tp-search-spin {
to { transform: rotate(360deg); }
}
[data-theme="dark"] .tp-search-spinner {
border-color: var(--tp-gray-700, #374151);
border-top-color: var(--tp-primary-400, #60a5fa);
}
.tp-search-filters {
display: flex;
align-items: center;
gap: var(--tp-space-3, 0.75rem);
margin-top: var(--tp-space-3, 0.75rem);
padding: var(--tp-space-3, 0.75rem);
background: var(--tp-gray-50, #f9fafb);
border-radius: var(--tp-radius-md, 6px);
flex-wrap: wrap;
}
[data-theme="dark"] .tp-search-filters {
background: var(--tp-gray-900, #111827);
}
.tp-search-filter {
display: flex;
align-items: center;
gap: var(--tp-space-2, 0.5rem);
}
.tp-search-filter-label {
font-size: 0.875rem;
font-weight: 500;
color: var(--tp-gray-700, #374151);
white-space: nowrap;
}
[data-theme="dark"] .tp-search-filter-label {
color: var(--tp-gray-300, #d1d5db);
}
.tp-search-filter-select {
padding: var(--tp-space-2, 0.5rem) var(--tp-space-3, 0.75rem);
font-size: 0.875rem;
color: var(--tp-gray-900, #111827);
background: var(--tp-white, #ffffff);
border: 1px solid var(--tp-gray-300, #d1d5db);
border-radius: var(--tp-radius-md, 6px);
outline: none;
cursor: pointer;
transition: all 200ms;
}
.tp-search-filter-select:focus {
border-color: var(--tp-primary-500, #3b82f6);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
[data-theme="dark"] .tp-search-filter-select {
color: var(--tp-white, #ffffff);
background: var(--tp-gray-800, #1f2937);
border-color: var(--tp-gray-700, #374151);
}
.tp-search-filter-checkbox {
display: flex;
align-items: center;
gap: var(--tp-space-2, 0.5rem);
font-size: 0.875rem;
color: var(--tp-gray-700, #374151);
cursor: pointer;
user-select: none;
}
.tp-search-filter-checkbox input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
}
[data-theme="dark"] .tp-search-filter-checkbox {
color: var(--tp-gray-300, #d1d5db);
}
.tp-search-clear-filters {
display: flex;
align-items: center;
gap: var(--tp-space-1, 0.25rem);
padding: var(--tp-space-2, 0.5rem) var(--tp-space-3, 0.75rem);
font-size: 0.875rem;
font-weight: 500;
color: var(--tp-error-600, #dc2626);
background: transparent;
border: 1px solid var(--tp-error-300, #fca5a5);
border-radius: var(--tp-radius-md, 6px);
cursor: pointer;
transition: all 200ms;
margin-left: auto;
}
.tp-rtl .tp-search-clear-filters {
margin-left: 0;
margin-right: auto;
}
.tp-search-clear-filters:hover {
background: var(--tp-error-50, #fef2f2);
border-color: var(--tp-error-400, #f87171);
}
[data-theme="dark"] .tp-search-clear-filters {
color: var(--tp-error-400, #f87171);
border-color: var(--tp-error-800, #991b1b);
}
[data-theme="dark"] .tp-search-clear-filters:hover {
background: var(--tp-error-900, #7f1d1d);
}
.tp-search-results-container {
position: absolute;
top: calc(100% + var(--tp-space-2, 0.5rem));
left: 0;
right: 0;
background: var(--tp-white, #ffffff);
border: 1px solid var(--tp-gray-200, #e5e7eb);
border-radius: var(--tp-radius-lg, 8px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
max-height: 400px;
overflow-y: auto;
z-index: 1000;
}
[data-theme="dark"] .tp-search-results-container {
background: var(--tp-gray-800, #1f2937);
border-color: var(--tp-gray-700, #374151);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.tp-search-results-container::-webkit-scrollbar {
width: 8px;
}
.tp-search-results-container::-webkit-scrollbar-track {
background: var(--tp-gray-100, #f3f4f6);
border-radius: 0 var(--tp-radius-lg, 8px) var(--tp-radius-lg, 8px) 0;
}
.tp-search-results-container::-webkit-scrollbar-thumb {
background: var(--tp-gray-300, #d1d5db);
border-radius: var(--tp-radius-md, 6px);
}
.tp-search-results-container::-webkit-scrollbar-thumb:hover {
background: var(--tp-gray-400, #9ca3af);
}
[data-theme="dark"] .tp-search-results-container::-webkit-scrollbar-track {
background: var(--tp-gray-900, #111827);
}
[data-theme="dark"] .tp-search-results-container::-webkit-scrollbar-thumb {
background: var(--tp-gray-700, #374151);
}
.tp-search-results-header {
padding: var(--tp-space-3, 0.75rem) var(--tp-space-4, 1rem);
border-bottom: 1px solid var(--tp-gray-200, #e5e7eb);
}
[data-theme="dark"] .tp-search-results-header {
border-bottom-color: var(--tp-gray-700, #374151);
}
.tp-search-results-count {
font-size: 0.875rem;
font-weight: 600;
color: var(--tp-gray-600, #4b5563);
}
[data-theme="dark"] .tp-search-results-count {
color: var(--tp-gray-400, #9ca3af);
}
.tp-search-results-list {
padding: var(--tp-space-2, 0.5rem);
}
.tp-search-result-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--tp-space-3, 0.75rem) var(--tp-space-4, 1rem);
border-radius: var(--tp-radius-md, 6px);
cursor: pointer;
transition: all 200ms;
}
.tp-search-result-item:hover,
.tp-search-result-item.active {
background: var(--tp-primary-50, #eff6ff);
}
[data-theme="dark"] .tp-search-result-item:hover,
[data-theme="dark"] .tp-search-result-item.active {
background: var(--tp-gray-700, #374151);
}
.tp-search-result-content {
flex: 1;
}
.tp-search-result-title {
font-size: 0.9375rem;
font-weight: 500;
color: var(--tp-gray-900, #111827);
margin-bottom: var(--tp-space-1, 0.25rem);
}
.tp-search-result-title mark {
background: var(--tp-warning-200, #fde68a);
color: var(--tp-gray-900, #111827);
padding: 0.125rem 0.25rem;
border-radius: var(--tp-radius-sm, 4px);
font-weight: 600;
}
[data-theme="dark"] .tp-search-result-title {
color: var(--tp-white, #ffffff);
}
[data-theme="dark"] .tp-search-result-title mark {
background: var(--tp-warning-800, #92400e);
color: var(--tp-warning-200, #fde68a);
}
.tp-search-result-description {
font-size: 0.8125rem;
color: var(--tp-gray-600, #4b5563);
line-height: 1.4;
}
[data-theme="dark"] .tp-search-result-description {
color: var(--tp-gray-400, #9ca3af);
}
.tp-search-result-badge {
padding: var(--tp-space-1, 0.25rem) var(--tp-space-2, 0.5rem);
font-size: 0.75rem;
font-weight: 600;
color: var(--tp-primary-700, #1d4ed8);
background: var(--tp-primary-100, #dbeafe);
border-radius: var(--tp-radius-md, 6px);
white-space: nowrap;
}
[data-theme="dark"] .tp-search-result-badge {
color: var(--tp-primary-300, #93c5fd);
background: var(--tp-primary-900, #1e3a8a);
}
.tp-search-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--tp-space-8, 2rem);
text-align: center;
}
.tp-search-empty svg {
color: var(--tp-gray-300, #d1d5db);
margin-bottom: var(--tp-space-4, 1rem);
}
[data-theme="dark"] .tp-search-empty svg {
color: var(--tp-gray-600, #4b5563);
}
.tp-search-empty-title {
font-size: 1rem;
font-weight: 600;
color: var(--tp-gray-900, #111827);
margin: 0 0 var(--tp-space-2, 0.5rem);
}
[data-theme="dark"] .tp-search-empty-title {
color: var(--tp-white, #ffffff);
}
.tp-search-empty-text {
font-size: 0.875rem;
color: var(--tp-gray-600, #4b5563);
margin: 0;
}
[data-theme="dark"] .tp-search-empty-text {
color: var(--tp-gray-400, #9ca3af);
}
.tp-search-recent-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--tp-space-3, 0.75rem) var(--tp-space-4, 1rem);
border-bottom: 1px solid var(--tp-gray-200, #e5e7eb);
font-size: 0.875rem;
font-weight: 600;
color: var(--tp-gray-700, #374151);
}
[data-theme="dark"] .tp-search-recent-header {
border-bottom-color: var(--tp-gray-700, #374151);
color: var(--tp-gray-300, #d1d5db);
}
.tp-search-clear-recent {
font-size: 0.8125rem;
font-weight: 500;
color: var(--tp-primary-600, #2563eb);
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.tp-search-clear-recent:hover {
color: var(--tp-primary-700, #1d4ed8);
text-decoration: underline;
}
[data-theme="dark"] .tp-search-clear-recent {
color: var(--tp-primary-400, #60a5fa);
}
.tp-search-recent-list {
padding: var(--tp-space-2, 0.5rem);
}
.tp-search-recent-item {
display: flex;
align-items: center;
gap: var(--tp-space-2, 0.5rem);
padding: var(--tp-space-3, 0.75rem) var(--tp-space-4, 1rem);
font-size: 0.875rem;
color: var(--tp-gray-700, #374151);
border-radius: var(--tp-radius-md, 6px);
cursor: pointer;
transition: all 200ms;
}
.tp-search-recent-item:hover {
background: var(--tp-gray-100, #f3f4f6);
}
.tp-search-recent-item svg {
color: var(--tp-gray-400, #9ca3af);
flex-shrink: 0;
}
[data-theme="dark"] .tp-search-recent-item {
color: var(--tp-gray-300, #d1d5db);
}
[data-theme="dark"] .tp-search-recent-item:hover {
background: var(--tp-gray-700, #374151);
}
@media (max-width: 1024px) {
.tp-advanced-search {
max-width: 100%;
}
}
@media (max-width: 768px) {
.tp-search-filters {
flex-direction: column;
align-items: stretch;
}
.tp-search-filter {
width: 100%;
justify-content: space-between;
}
.tp-search-filter-select {
flex: 1;
}
.tp-search-clear-filters {
margin-left: 0;
margin-top: var(--tp-space-2, 0.5rem);
}
.tp-rtl .tp-search-clear-filters {
margin-right: 0;
}
}
@media (max-width: 640px) {
.tp-search-input {
font-size: 0.875rem;
padding: var(--tp-space-2, 0.5rem) var(--tp-space-9, 2.25rem);
}
.tp-search-results-container {
max-height: 300px;
}
.tp-search-result-item {
padding: var(--tp-space-2, 0.5rem) var(--tp-space-3, 0.75rem);
}
.tp-search-result-title {
font-size: 0.875rem;
}
.tp-search-result-description {
font-size: 0.75rem;
}
}
.tp-search-mobile {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: none;
background: var(--tp-white, #ffffff);
padding: var(--tp-space-4, 1rem);
z-index: 9999;
}
[data-theme="dark"] .tp-search-mobile {
background: var(--tp-gray-900, #111827);
}
.tp-search-mobile .tp-search-results-container {
position: static;
max-height: none;
flex: 1;
border: none;
box-shadow: none;
}
.tp-search-input:focus-visible,
.tp-search-filter-select:focus-visible,
.tp-search-clear:focus-visible,
.tp-search-result-item:focus-visible {
outline: 2px solid var(--tp-primary-500, #3b82f6);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.tp-search-input,
.tp-search-clear,
.tp-search-result-item,
.tp-search-spinner {
animation: none !important;
transition: none !important;
}
}
@media (prefers-contrast: high) {
.tp-search-input,
.tp-search-filter-select,
.tp-search-results-container {
border-width: 2px;
}
.tp-search-result-title mark {
outline: 2px solid currentColor;
}
}

/* === tp-icons.css === */
.tp-icon {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
flex-shrink: 0;
user-select: none;
transition: all var(--tp-transition-base, 200ms);
}
.tp-icon svg {
display: block;
width: 100%;
height: 100%;
}
.tp-icon-xs {
width: 16px;
height: 16px;
}
.tp-icon-sm {
width: 20px;
height: 20px;
}
.tp-icon-md,
.tp-icon {
width: 24px;
height: 24px;
}
.tp-icon-lg {
width: 32px;
height: 32px;
}
.tp-icon-xl {
width: 40px;
height: 40px;
}
.tp-icon-2xl {
width: 48px;
height: 48px;
}
.tp-icon-primary {
color: var(--tp-primary-500, #3b82f6);
}
.tp-icon-success {
color: var(--tp-success-500, #10b981);
}
.tp-icon-warning {
color: var(--tp-warning-500, #f59e0b);
}
.tp-icon-danger {
color: var(--tp-danger-500, #ef4444);
}
.tp-icon-info {
color: var(--tp-info-500, #06b6d4);
}
.tp-icon-gray {
color: var(--tp-gray-500, #6b7280);
}
.tp-icon-white {
color: #ffffff;
}
.tp-icon-hover:hover {
transform: scale(1.1);
}
.tp-icon-rotate:hover {
transform: rotate(15deg);
}
.tp-icon-pulse {
animation: tp-icon-pulse 2s ease-in-out infinite;
}
@keyframes tp-icon-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
.tp-icon-spin {
animation: tp-icon-spin 1s linear infinite;
}
@keyframes tp-icon-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.tp-btn .tp-icon {
margin-left: var(--tp-space-2, 0.5rem);
}
.tp-btn .tp-icon:first-child {
margin-left: 0;
margin-right: var(--tp-space-2, 0.5rem);
}
.tp-btn .tp-icon:only-child {
margin: 0;
}
.tp-badge .tp-icon {
width: 14px;
height: 14px;
margin-right: 4px;
}
.tp-icon-container {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--tp-radius-full, 50%);
padding: var(--tp-space-2, 0.5rem);
}
.tp-icon-container-primary {
background-color: var(--tp-primary-100, #dbeafe);
color: var(--tp-primary-600, #2563eb);
}
.tp-icon-container-success {
background-color: var(--tp-success-100, #d1fae5);
color: var(--tp-success-600, #059669);
}
.tp-icon-container-warning {
background-color: var(--tp-warning-100, #fef3c7);
color: var(--tp-warning-600, #d97706);
}
.tp-icon-container-danger {
background-color: var(--tp-danger-100, #fee2e2);
color: var(--tp-danger-600, #dc2626);
}
.tp-icon-container-info {
background-color: var(--tp-info-100, #cffafe);
color: var(--tp-info-600, #0891b2);
}
.tp-icon-text {
display: inline-flex;
align-items: center;
gap: var(--tp-space-2, 0.5rem);
}
.tp-icon-text .tp-icon {
flex-shrink: 0;
}
.tp-icon-placeholder {
background: var(--tp-gray-200, #e5e7eb);
color: var(--tp-gray-500, #6b7280);
font-size: 12px;
font-weight: bold;
border-radius: var(--tp-radius-base, 4px);
}
[data-theme="dark"] .tp-icon-primary {
color: var(--tp-primary-400, #60a5fa);
}
[data-theme="dark"] .tp-icon-success {
color: var(--tp-success-400, #34d399);
}
[data-theme="dark"] .tp-icon-warning {
color: var(--tp-warning-400, #fbbf24);
}
[data-theme="dark"] .tp-icon-danger {
color: var(--tp-danger-400, #f87171);
}
[data-theme="dark"] .tp-icon-info {
color: var(--tp-info-400, #22d3ee);
}
[data-theme="dark"] .tp-icon-gray {
color: var(--tp-gray-400, #9ca3af);
}
[data-theme="dark"] .tp-icon-placeholder {
background: var(--tp-gray-700, #374151);
color: var(--tp-gray-400, #9ca3af);
}
[data-theme="dark"] .tp-icon-container-primary {
background-color: rgba(59, 130, 246, 0.2);
color: var(--tp-primary-400, #60a5fa);
}
[data-theme="dark"] .tp-icon-container-success {
background-color: rgba(16, 185, 129, 0.2);
color: var(--tp-success-400, #34d399);
}
[data-theme="dark"] .tp-icon-container-warning {
background-color: rgba(245, 158, 11, 0.2);
color: var(--tp-warning-400, #fbbf24);
}
[data-theme="dark"] .tp-icon-container-danger {
background-color: rgba(239, 68, 68, 0.2);
color: var(--tp-danger-400, #f87171);
}
[data-theme="dark"] .tp-icon-container-info {
background-color: rgba(6, 182, 212, 0.2);
color: var(--tp-info-400, #22d3ee);
}
[dir="rtl"] .tp-btn .tp-icon {
margin-left: 0;
margin-right: var(--tp-space-2, 0.5rem);
}
[dir="rtl"] .tp-btn .tp-icon:first-child {
margin-right: 0;
margin-left: var(--tp-space-2, 0.5rem);
}
[dir="rtl"] .tp-badge .tp-icon {
margin-right: 0;
margin-left: 4px;
}
.tp-icon[aria-hidden="true"] {
pointer-events: none;
}
.tp-icon:focus-visible {
outline: 2px solid var(--tp-primary-500, #3b82f6);
outline-offset: 2px;
border-radius: var(--tp-radius-sm, 2px);
}
@media (max-width: 768px) {
.tp-icon-2xl {
width: 40px;
height: 40px;
}
.tp-icon-xl {
width: 32px;
height: 32px;
}
}
@media print {
.tp-icon {
color: #000 !important;
}
.tp-icon-spin,
.tp-icon-pulse {
animation: none !important;
}
}

/* === client-modal-performance.css === */
#clientModal {
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
will-change: transform, opacity;
}
.acf-field.loading {
position: relative;
overflow: hidden;
}
.acf-field.loading::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.6) 50%,
rgba(255, 255, 255, 0) 100%
);
animation: shimmer 1.5s infinite;
z-index: 1;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.skeleton-text {
height: 1em;
background: linear-gradient(
90deg,
#f0f0f0 25%,
#e0e0e0 50%,
#f0f0f0 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 4px;
}
.skeleton-image {
background: linear-gradient(
90deg,
#f0f0f0 25%,
#e0e0e0 50%,
#f0f0f0 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 8px;
}
img[data-src] {
background: #f3f4f6;
min-height: 100px;
}
#clientModal .modal-content {
transition: opacity 0.3s ease, transform 0.3s ease;
}
#clientModal .acf-field-group {
contain: layout style paint;
}
#clientModal .client-tabs .tab-pane {
display: none;
opacity: 0;
transition: opacity 0.2s ease;
}
#clientModal .client-tabs .tab-pane.active {
display: block;
opacity: 1;
}
#clientModal .modal-body {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
will-change: scroll-position;
}
#clientModal.loading .modal-content {
opacity: 0.6;
pointer-events: none;
}
#clientModal .acf-field.error {
border-left: 3px solid #ef4444;
background: #fef2f2;
padding-left: 12px;
}
#clientModal .acf-field.success {
border-left: 3px solid #10b981;
background: #f0fdf4;
padding-left: 12px;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
#clientModalLoadingOverlay .spinner {
width: 36px !important;
height: 36px !important;
border-width: 3px !important;
}
#clientModalLoadingOverlay div {
font-size: 14px !important;
}
}
@media (prefers-reduced-motion: reduce) {
#clientModal,
#clientModal * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media print {
#clientModalLoadingOverlay,
.skeleton-text,
.skeleton-image {
display: none !important;
}
}

/* === controls.css === */
.tp-refresh-btn {
background: #0ea5e9 !important;
border-color: #0284c7 !important;
color: #ffffff !important;
transition: background-color .15s ease, transform .05s ease;
}
.tp-refresh-btn:hover {
background: #0284c7 !important;
}
.tp-refresh-btn:active {
transform: translateY(1px);
}
.tp-refresh-btn[disabled] {
opacity: .7;
cursor: not-allowed;
}
:root {
--btn-primary: #667eea;
--btn-primary-hover: #5a6fd8;
--btn-success: #28a745;
--btn-success-hover: #218838;
--btn-warning: #ff9500;
--btn-warning-hover: #e6850e;
--btn-danger: #dc3545;
--btn-danger-hover: #c82333;
--btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
--btn-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
--btn-shadow-active: 0 1px 4px rgba(0, 0, 0, 0.2);
--btn-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--btn-radius: 8px;
--btn-padding: 12px 24px;
--btn-gap: 12px;
}
.loading-controls {
display: flex;
gap: 10px;
margin: 1rem 0;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.pause-btn,
.resume-btn,
.stop-btn,
.control-btn {
padding: 10px 20px;
border: none;
border-radius: var(--btn-radius);
cursor: pointer;
font-size: 0.875rem;
font-weight: 600;
font-family: inherit;
transition: var(--btn-transition);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 110px;
position: relative;
overflow: hidden;
text-decoration: none;
user-select: none;
box-shadow: var(--btn-shadow);
}
.pause-btn::before,
.resume-btn::before,
.stop-btn::before,
.control-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transition: width 0.6s, height 0.6s, top 0.6s, left 0.6s;
transform: translate(-50%, -50%);
z-index: 0;
}
.pause-btn:active::before,
.resume-btn:active::before,
.stop-btn:active::before,
.control-btn:active::before {
width: 300px;
height: 300px;
top: 50%;
left: 50%;
}
.pause-btn {
background: linear-gradient(135deg, var(--btn-warning), #ff6b35);
color: white;
}
.pause-btn:hover {
background: linear-gradient(135deg, var(--btn-warning-hover), #e55a2b);
transform: translateY(-2px);
box-shadow: var(--btn-shadow-hover);
}
.pause-btn:active {
transform: translateY(0);
box-shadow: var(--btn-shadow-active);
}
.resume-btn {
background: linear-gradient(135deg, var(--btn-success), #20c997);
color: white;
}
.resume-btn:hover {
background: linear-gradient(135deg, var(--btn-success-hover), #1ba085);
transform: translateY(-2px);
box-shadow: var(--btn-shadow-hover);
}
.resume-btn:active {
transform: translateY(0);
box-shadow: var(--btn-shadow-active);
}
.stop-btn {
background: linear-gradient(135deg, var(--btn-danger), #e74c3c);
color: white;
}
.stop-btn:hover {
background: linear-gradient(135deg, var(--btn-danger-hover), #dc2626);
transform: translateY(-2px);
box-shadow: var(--btn-shadow-hover);
}
.stop-btn:active {
transform: translateY(0);
box-shadow: var(--btn-shadow-active);
}
.pause-btn:disabled,
.resume-btn:disabled,
.stop-btn:disabled,
.control-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.speed-selector {
margin: 1.5rem 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.speed-selector label {
font-weight: 600;
color: var(--text-primary);
font-size: 0.875rem;
white-space: nowrap;
}
.speed-selector select {
padding: 10px 16px;
border: 2px solid #e9ecef;
border-radius: var(--btn-radius);
background: white;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: var(--btn-transition);
min-width: 120px;
box-shadow: var(--btn-shadow);
}
.speed-selector select:focus {
outline: none;
border-color: var(--btn-primary);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.speed-selector select:hover {
border-color: var(--btn-primary);
}
.scroll-loading {
text-align: center;
padding: 1.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--text-secondary);
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: var(--btn-radius);
margin: 1.5rem 0;
border: 1px solid #dee2e6;
transition: var(--btn-transition);
position: relative;
overflow: hidden;
}
.scroll-loading::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 1.5s ease-in-out;
}
.scroll-loading.loading {
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
color: #1976d2;
border-color: #2196f3;
}
.scroll-loading.loading::before {
left: 100%;
}
.scroll-loading .spinner {
display: inline-block;
width: 24px;
height: 24px;
border: 3px solid rgba(25, 118, 210, 0.2);
border-top: 3px solid #1976d2;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 12px;
vertical-align: middle;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (max-width: 768px) {
.loading-controls {
gap: 8px;
margin: 1rem 0;
}
.pause-btn,
.resume-btn,
.stop-btn,
.control-btn {
padding: 10px 16px;
font-size: 0.8rem;
min-width: 100px;
}
.speed-selector {
flex-direction: column;
gap: 8px;
}
.speed-selector select {
min-width: 200px;
}
}
@media (max-width: 480px) {
.loading-controls {
flex-direction: column;
align-items: stretch;
}
.pause-btn,
.resume-btn,
.stop-btn,
.control-btn {
width: 100%;
min-width: auto;
}
.scroll-loading {
padding: 1rem;
font-size: 0.875rem;
}
}
@media (prefers-reduced-motion: reduce) {
.pause-btn,
.resume-btn,
.stop-btn,
.control-btn,
.speed-selector select,
.scroll-loading {
transition: none;
}
.scroll-loading .spinner {
animation: none;
}
.pause-btn::before,
.resume-btn::before,
.stop-btn::before,
.control-btn::before {
display: none;
}
}
.pause-btn:focus-visible,
.resume-btn:focus-visible,
.stop-btn:focus-visible,
.control-btn:focus-visible,
.speed-selector select:focus-visible {
outline: 2px solid var(--btn-primary);
outline-offset: 2px;
}
.modal {
position: fixed;
inset: 0;
display: none;
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
overflow-y: auto;
padding: 24px;
}
.modal.show {
display: block;
opacity: 1;
}
.modal .modal-content {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
margin: auto;
position: relative;
max-width: 800px;
width: 100%;
direction: rtl;
}
.edit-modal-content {
max-width: 700px;
}
.modal .modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #eee;
}
.modal .close {
cursor: pointer;
font-size: 1.5rem;
line-height: 1;
color: #666;
transition: color 0.2s ease, transform 0.2s ease;
}
.modal .close:hover {
color: #000;
transform: rotate(90deg);
}
.modal .modal-body {
padding: 16px 20px;
}
.modal .form-group { margin-bottom: 12px; }
.modal .form-group label {
display: none !important;
font-weight: 600;
margin-bottom: 6px;
}
.modal .form-group input[type="text"],
.modal .form-group input[type="date"],
.modal .form-group input[type="number"],
.modal .form-group select {
width: 100%;
padding: 10px 12px;
border: 1px solid #e0e0e0;
border-radius: var(--radius-md);
font-size: 0.95rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.modal .form-group input:focus,
.modal .form-group select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}
.modal .form-actions {
display: flex;
gap: 12px;
justify-content: flex-start;
padding: 8px 20px 20px;
}
@media (min-height: 700px) {
.modal .modal-content {
margin-top: 5vh;
margin-bottom: 5vh;
}
}
.form-group label {
display: none !important;
}
.team-portal-shortcode .form-group label {
display: none !important;
}
.modal .form-group input[type="text"],
.modal .form-group input[type="date"],
.modal .form-group input[type="number"],
.modal .form-group select {
width: 100%;
padding: 10px 12px;
border: 1px solid #e0e0e0;
border-radius: var(--radius-md);
font-size: 0.95rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.modal .form-group input:focus,
.modal .form-group select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}
.modal .form-actions {
display: flex;
gap: 12px;
justify-content: flex-start;
padding: 8px 20px 20px;
}
@media (min-height: 700px) {
.modal .modal-content {
margin-top: 5vh;
margin-bottom: 5vh;
}
}

/* === tp-pull-refresh.css === */
.tp-pull-refresh {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) translateY(-100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--tp-space-2, 0.5rem);
padding: var(--tp-space-4, 1rem);
opacity: 0;
pointer-events: none;
z-index: 1000;
transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform, opacity;
}
[dir="rtl"] .tp-pull-refresh {
direction: rtl;
}
.tp-pull-refresh-spinner {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: var(--tp-primary-500, #3b82f6);
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tp-pull-refresh-spinner-circular svg {
width: 100%;
height: 100%;
transform-origin: center;
}
.tp-pull-refresh-spinner-circular circle {
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-linecap: round;
}
.tp-pull-refresh-spinner-circular.tp-pull-refresh-spinner-active svg {
animation: tp-pull-refresh-rotate 1.4s linear infinite;
}
.tp-pull-refresh-spinner-circular.tp-pull-refresh-spinner-active circle {
animation: tp-pull-refresh-dash 1.4s ease-in-out infinite;
}
@keyframes tp-pull-refresh-rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes tp-pull-refresh-dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
.tp-pull-refresh-spinner-dots {
display: flex;
gap: 6px;
}
.tp-pull-refresh-spinner-dots span {
width: 8px;
height: 8px;
background: var(--tp-primary-500, #3b82f6);
border-radius: 50%;
opacity: 0.3;
}
.tp-pull-refresh-spinner-dots.tp-pull-refresh-spinner-active span {
animation: tp-pull-refresh-dots 1.4s infinite ease-in-out both;
}
.tp-pull-refresh-spinner-dots.tp-pull-refresh-spinner-active span:nth-child(1) {
animation-delay: -0.32s;
}
.tp-pull-refresh-spinner-dots.tp-pull-refresh-spinner-active span:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes tp-pull-refresh-dots {
0%, 80%, 100% {
opacity: 0.3;
transform: scale(1);
}
40% {
opacity: 1;
transform: scale(1.3);
}
}
.tp-pull-refresh-spinner-arrow svg {
width: 100%;
height: 100%;
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tp-pull-refresh-ready .tp-pull-refresh-spinner-arrow svg {
color: var(--tp-success-500, #10b981);
}
.tp-pull-refresh-text {
font-size: 0.875rem;
font-weight: 500;
color: var(--tp-gray-600, #4b5563);
text-align: center;
white-space: nowrap;
transition: color 200ms;
}
.tp-pull-refresh-ready .tp-pull-refresh-text {
color: var(--tp-success-600, #059669);
}
.tp-pull-refresh-refreshing .tp-pull-refresh-text {
color: var(--tp-primary-600, #2563eb);
}
[data-theme="dark"] .tp-pull-refresh-text {
color: var(--tp-gray-400, #9ca3af);
}
[data-theme="dark"] .tp-pull-refresh-ready .tp-pull-refresh-text {
color: var(--tp-success-400, #34d399);
}
[data-theme="dark"] .tp-pull-refresh-refreshing .tp-pull-refresh-text {
color: var(--tp-primary-400, #60a5fa);
}
.tp-pull-refresh-ready {
}
.tp-pull-refresh-refreshing {
opacity: 1 !important;
}
.tp-pull-refresh-refreshing .tp-pull-refresh-spinner {
color: var(--tp-primary-500, #3b82f6);
}
[data-theme="dark"] .tp-pull-refresh-spinner {
color: var(--tp-primary-400, #60a5fa);
}
[data-theme="dark"] .tp-pull-refresh-ready .tp-pull-refresh-spinner-arrow svg {
color: var(--tp-success-400, #34d399);
}
[data-theme="dark"] .tp-pull-refresh-refreshing .tp-pull-refresh-spinner {
color: var(--tp-primary-400, #60a5fa);
}
[data-theme="dark"] .tp-pull-refresh-spinner-dots span {
background: var(--tp-primary-400, #60a5fa);
}
@media (prefers-reduced-motion: reduce) {
.tp-pull-refresh,
.tp-pull-refresh-spinner,
.tp-pull-refresh-spinner svg,
.tp-pull-refresh-text {
transition: none !important;
animation: none !important;
}
.tp-pull-refresh-spinner-circular.tp-pull-refresh-spinner-active svg {
animation: none;
}
.tp-pull-refresh-spinner-circular.tp-pull-refresh-spinner-active circle {
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
}
.tp-pull-refresh-spinner-dots.tp-pull-refresh-spinner-active span {
animation: none;
opacity: 1;
}
}
@media (prefers-contrast: high) {
.tp-pull-refresh-text {
font-weight: 600;
}
.tp-pull-refresh-spinner {
filter: contrast(1.2);
}
}
@media (min-width: 768px) {
.tp-pull-refresh {
display: none;
}
}
@media (max-width: 374px) {
.tp-pull-refresh-spinner {
width: 32px;
height: 32px;
}
.tp-pull-refresh-text {
font-size: 0.8125rem;
}
}
.tp-pull-refresh-large .tp-pull-refresh-spinner {
width: 48px;
height: 48px;
}
.tp-pull-refresh-large .tp-pull-refresh-text {
font-size: 1rem;
}
.tp-pull-refresh-small .tp-pull-refresh-spinner {
width: 28px;
height: 28px;
}
.tp-pull-refresh-small .tp-pull-refresh-text {
font-size: 0.8125rem;
}
.tp-pull-refresh-no-text .tp-pull-refresh-text {
display: none;
}
.tp-pull-refresh-success .tp-pull-refresh-spinner {
color: var(--tp-success-500, #10b981);
}
.tp-pull-refresh-success .tp-pull-refresh-text {
color: var(--tp-success-600, #059669);
}
.tp-pull-refresh-error .tp-pull-refresh-spinner {
color: var(--tp-danger-500, #ef4444);
}
.tp-pull-refresh-error .tp-pull-refresh-text {
color: var(--tp-danger-600, #dc2626);
}
.tp-pull-refresh-enabled {
position: relative;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.tp-pull-refresh-enabled {
overscroll-behavior-y: contain;
}
.tp-pull-refresh-skeleton {
padding: var(--tp-space-4, 1rem);
}
.tp-pull-refresh-skeleton-item {
height: 60px;
background: linear-gradient(
90deg,
var(--tp-gray-200, #e5e7eb) 25%,
var(--tp-gray-100, #f3f4f6) 50%,
var(--tp-gray-200, #e5e7eb) 75%
);
background-size: 200% 100%;
border-radius: var(--tp-radius-md, 6px);
margin-bottom: var(--tp-space-3, 0.75rem);
}
.tp-pull-refresh-refreshing .tp-pull-refresh-skeleton-item {
animation: tp-pull-refresh-skeleton 1.5s ease-in-out infinite;
}
@keyframes tp-pull-refresh-skeleton {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
[data-theme="dark"] .tp-pull-refresh-skeleton-item {
background: linear-gradient(
90deg,
var(--tp-gray-700, #374151) 25%,
var(--tp-gray-600, #4b5563) 50%,
var(--tp-gray-700, #374151) 75%
);
background-size: 200% 100%;
}
.tp-pull-refresh-primary .tp-pull-refresh-spinner,
.tp-pull-refresh-primary .tp-pull-refresh-text {
color: var(--tp-primary-500, #3b82f6);
}
.tp-pull-refresh-success-theme .tp-pull-refresh-spinner,
.tp-pull-refresh-success-theme .tp-pull-refresh-text {
color: var(--tp-success-500, #10b981);
}
.tp-pull-refresh-warning .tp-pull-refresh-spinner,
.tp-pull-refresh-warning .tp-pull-refresh-text {
color: var(--tp-warning-500, #f59e0b);
}
.tp-pull-refresh-info .tp-pull-refresh-spinner,
.tp-pull-refresh-info .tp-pull-refresh-text {
color: var(--tp-info-500, #0ea5e9);
}

/* === tp-swipe-gestures.css === */
.tp-swipe-feedback {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 60px;
height: 60px;
background: rgba(59, 130, 246, 0.2);
border: 2px solid rgba(59, 130, 246, 0.6);
border-radius: 50%;
pointer-events: none;
z-index: 99999;
opacity: 0;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(8px);
}
.tp-swipe-feedback::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 24px;
height: 24px;
background: currentColor;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
[data-theme="dark"] .tp-swipe-feedback {
background: rgba(96, 165, 250, 0.2);
border-color: rgba(96, 165, 250, 0.6);
}
.tp-swipe-feedback-left::before {
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>');
}
.tp-swipe-feedback-right::before {
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>');
}
.tp-swipe-feedback-up::before {
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg>');
}
.tp-swipe-feedback-down::before {
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>');
}
[data-tp-swipe] {
position: relative;
touch-action: pan-y pan-x;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
}
[data-tp-swipe-direction="horizontal"] {
touch-action: pan-y;
}
[data-tp-swipe-direction="vertical"] {
touch-action: pan-x;
}
.tp-swipe-card {
position: relative;
background: var(--tp-white, #ffffff);
border-radius: var(--tp-radius-lg, 8px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 200ms;
will-change: transform;
}
.tp-swipe-card:active {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .tp-swipe-card {
background: var(--tp-gray-800, #1f2937);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.tp-swipe-card::before,
.tp-swipe-card::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
border-radius: 50%;
opacity: 0;
pointer-events: none;
transition: opacity 200ms;
}
.tp-swipe-card::before {
left: 20px;
background: rgba(239, 68, 68, 0.2);
border: 2px solid rgba(239, 68, 68, 0.6);
}
.tp-swipe-card::after {
right: 20px;
background: rgba(16, 185, 129, 0.2);
border: 2px solid rgba(16, 185, 129, 0.6);
}
.tp-swipe-card[data-swipe-direction="left"]::before {
opacity: 1;
}
.tp-swipe-card[data-swipe-direction="right"]::after {
opacity: 1;
}
.tp-swipe-progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: var(--tp-gray-200, #e5e7eb);
overflow: hidden;
}
.tp-swipe-progress-bar {
height: 100%;
background: var(--tp-primary-500, #3b82f6);
transform: scaleX(0);
transform-origin: left;
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
[dir="rtl"] .tp-swipe-progress-bar {
transform-origin: right;
}
.tp-swipe-carousel {
position: relative;
overflow: hidden;
touch-action: pan-y;
}
.tp-swipe-carousel-track {
display: flex;
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.tp-swipe-carousel-item {
flex-shrink: 0;
width: 100%;
}
.tp-swipe-carousel-dots {
display: flex;
justify-content: center;
gap: var(--tp-space-2, 0.5rem);
padding: var(--tp-space-4, 1rem) 0;
}
.tp-swipe-carousel-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--tp-gray-300, #d1d5db);
transition: all 200ms;
cursor: pointer;
}
.tp-swipe-carousel-dot.active {
background: var(--tp-primary-500, #3b82f6);
transform: scale(1.2);
}
[data-theme="dark"] .tp-swipe-carousel-dot {
background: var(--tp-gray-600, #4b5563);
}
[data-theme="dark"] .tp-swipe-carousel-dot.active {
background: var(--tp-primary-400, #60a5fa);
}
.tp-swipe-actions {
position: relative;
overflow: hidden;
}
.tp-swipe-actions-content {
position: relative;
background: var(--tp-white, #ffffff);
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.tp-swipe-actions-left,
.tp-swipe-actions-right {
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
}
.tp-swipe-actions-left {
left: 0;
transform: translateX(-100%);
}
.tp-swipe-actions-right {
right: 0;
transform: translateX(100%);
}
.tp-swipe-action-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--tp-space-4, 1rem);
height: 100%;
color: var(--tp-white, #ffffff);
font-weight: 500;
cursor: pointer;
transition: opacity 200ms;
}
.tp-swipe-action-btn:active {
opacity: 0.8;
}
.tp-swipe-action-delete {
background: var(--tp-danger-500, #ef4444);
}
.tp-swipe-action-archive {
background: var(--tp-warning-500, #f59e0b);
}
.tp-swipe-action-edit {
background: var(--tp-primary-500, #3b82f6);
}
.tp-swipe-pull-indicator {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.05);
border-radius: 50%;
opacity: 0;
transition: opacity 200ms;
pointer-events: none;
}
.tp-swipe-pull-indicator svg {
width: 20px;
height: 20px;
color: var(--tp-gray-600, #4b5563);
}
.tp-swipe-pull-indicator-left {
left: 20px;
}
.tp-swipe-pull-indicator-right {
right: 20px;
}
.tp-swipe-pull-active .tp-swipe-pull-indicator {
opacity: 1;
}
[data-tp-swipe]:focus-visible {
outline: 2px solid var(--tp-primary-500, #3b82f6);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.tp-swipe-feedback,
.tp-swipe-card,
.tp-swipe-carousel-track,
.tp-swipe-actions-content,
.tp-swipe-progress-bar,
.tp-swipe-carousel-dot,
.tp-swipe-pull-indicator {
transition: none !important;
}
.tp-swipe-carousel-track {
scroll-behavior: auto;
}
}
@media (prefers-contrast: high) {
.tp-swipe-feedback {
border-width: 3px;
}
.tp-swipe-card::before,
.tp-swipe-card::after {
border-width: 3px;
}
}
.tp-swipe-disabled {
touch-action: auto !important;
}
.tp-swipe-smooth {
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tp-swipe-lock-horizontal {
touch-action: pan-y !important;
}
.tp-swipe-lock-vertical {
touch-action: pan-x !important;
}
@keyframes tp-swipe-bounce-left {
0% { transform: translateX(0); }
50% { transform: translateX(-20px); }
100% { transform: translateX(0); }
}
@keyframes tp-swipe-bounce-right {
0% { transform: translateX(0); }
50% { transform: translateX(20px); }
100% { transform: translateX(0); }
}
@keyframes tp-swipe-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
.tp-swipe-bounce-left {
animation: tp-swipe-bounce-left 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tp-swipe-bounce-right {
animation: tp-swipe-bounce-right 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tp-swipe-shake {
animation: tp-swipe-shake 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 768px) {
[data-tp-swipe] {
}
.tp-swipe-feedback {
width: 50px;
height: 50px;
}
}
@media (max-width: 374px) {
.tp-swipe-feedback {
width: 50px;
height: 50px;
}
.tp-swipe-card::before,
.tp-swipe-card::after {
width: 50px;
height: 50px;
}
}

/* === client-actions-buttons.css === */
.client-actions-group {
display: grid;
grid-template-columns: repeat(4, 32px);
gap: 6px 8px;
align-items: center;
padding: 4px 2px;
justify-content: center;
}
.action-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: visible;
flex-shrink: 0;
}
.action-btn i {
font-size: 15px;
transition: all 0.3s ease;
color: rgba(107, 114, 128, 0.5);
}
.action-btn[data-action="tasks"] i {
color: rgba(16, 185, 129, 0.5);
}
.action-btn[data-action="docs"] i {
color: rgba(245, 158, 11, 0.5);
}
.action-btn[data-action="inspect"] i {
color: rgba(59, 130, 246, 0.5);
}
.action-btn[data-action="notifications"] i {
color: rgba(139, 92, 246, 0.5);
}
.action-btn[data-action="credentials"] i {
color: rgba(236, 72, 153, 0.5);
}
.action-btn[data-action="declarations"] i {
color: rgba(34, 197, 94, 0.5);
}
.action-btn[data-action="accounting"] i {
color: rgba(249, 115, 22, 0.5);
}
.action-btn[data-action="assistant"] i {
color: rgba(100, 116, 139, 0.5);
}
.action-btn:hover {
background: rgba(0, 0, 0, 0.05);
transform: scale(1.1);
}
.action-btn[data-action="tasks"]:hover i {
color: rgb(16, 185, 129);
}
.action-btn[data-action="docs"]:hover i {
color: rgb(245, 158, 11);
}
.action-btn[data-action="inspect"]:hover i {
color: rgb(59, 130, 246);
}
.action-btn[data-action="notifications"]:hover i {
color: rgb(139, 92, 246);
}
.action-btn[data-action="credentials"]:hover i {
color: rgb(236, 72, 153);
}
.action-btn[data-action="declarations"]:hover i {
color: rgb(34, 197, 94);
}
.action-btn[data-action="accounting"]:hover i {
color: rgb(249, 115, 22);
}
.action-btn[data-action="assistant"]:hover i {
color: rgb(100, 116, 139);
}
.action-btn[data-action="tasks"],
.action-btn[data-action="docs"],
.action-btn[data-action="inspect"] {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.action-btn[data-action="tasks"] i { color: #10b981; }
.action-btn[data-action="docs"]  i { color: #f59e0b; }
.action-btn[data-action="inspect"] i { color: #3b82f6; }
.action-btn[data-action="tasks"]:hover {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
border-color: transparent;
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}
.action-btn[data-action="docs"]:hover {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
border-color: transparent;
box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);
}
.action-btn[data-action="inspect"]:hover {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
border-color: transparent;
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35);
}
.action-btn[data-action="tasks"]:hover i,
.action-btn[data-action="docs"]:hover  i,
.action-btn[data-action="inspect"]:hover i {
color: #ffffff !important;
filter: drop-shadow(0 0 10px rgba(255,255,255,0.6));
}
.action-btn[data-action="tasks"]:active,
.action-btn[data-action="docs"]:active,
.action-btn[data-action="inspect"]:active {
transform: scale(0.96);
}
.notification-badge {
position: absolute;
top: -4px;
right: -4px;
background: #ef4444;
color: white;
font-size: 9px;
font-weight: 600;
padding: 1px 4px;
border-radius: 6px;
min-width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
z-index: 10;
}
.notification-badge.badge-tasks {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}
.notification-badge.badge-docs {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}
.notification-badge.badge-inspect {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}
.notification-badge.badge-credentials {
background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
box-shadow: 0 0 8px rgba(236, 72, 153, 0.6);
}
.notification-badge.badge-declarations {
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}
.notification-badge.badge-obligations {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
box-shadow: 0 0 8px rgba(139, 92, 246, 0.6);
}
#file-summary-modal.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.file-summary-modal-container {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-width: 800px;
width: 100%;
max-height: 85vh;
display: flex;
flex-direction: column;
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.file-summary-modal-container .modal-header {
padding: 20px 24px;
border-bottom: 2px solid #e5e7eb;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 16px 16px 0 0;
}
.file-summary-modal-container .modal-header h3 {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #ffffff;
display: flex;
align-items: center;
gap: 10px;
}
.file-summary-modal-container .modal-header h3 i {
font-size: 22px;
}
.file-summary-modal-container .modal-close-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
color: #ffffff;
font-size: 18px;
}
.file-summary-modal-container .modal-close-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.file-summary-modal-container .modal-body {
padding: 24px;
overflow-y: auto;
flex: 1;
direction: rtl;
text-align: right;
}
.file-summary-content {
font-size: 15px;
line-height: 1.8;
color: #1f2937;
transition: all 0.3s ease;
cursor: default;
}
.file-summary-content.editing {
background: #f9fafb;
border: 2px solid #667eea;
border-radius: 8px;
padding: 16px;
outline: none;
cursor: text;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.file-summary-content:not(.editing):hover {
background: #fafbfc;
border-radius: 6px;
padding: 8px;
cursor: pointer;
}
.edit-hint {
text-align: center;
font-size: 13px;
color: #667eea;
padding: 12px;
margin-top: 16px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
border-radius: 6px;
border: 1px dashed #667eea;
}
.edit-hint i {
margin-left: 6px;
}
.file-summary-content p {
margin-bottom: 16px;
}
.file-summary-content .no-summary {
text-align: center;
color: #9ca3af;
font-style: italic;
padding: 40px 20px;
}
.file-summary-content .loading-spinner {
text-align: center;
color: #667eea;
font-size: 16px;
padding: 40px 20px;
}
.file-summary-content .loading-spinner i {
font-size: 24px;
margin-left: 10px;
}
.file-summary-content .error-message {
text-align: center;
color: #dc2626;
font-size: 15px;
padding: 40px 20px;
}
.file-summary-content .error-message i {
font-size: 20px;
margin-left: 8px;
}
.file-summary-modal-container .modal-footer {
padding: 16px 24px;
border-top: 1px solid #e5e7eb;
display: flex;
justify-content: flex-start;
gap: 12px;
}
.file-summary-modal-container .modal-footer .btn {
padding: 10px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
border: none;
}
.file-summary-modal-container .modal-footer .btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.file-summary-modal-container .modal-footer .btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.file-summary-modal-container .modal-footer .btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.file-summary-modal-container .modal-footer .btn-secondary {
background: #f3f4f6;
color: #4b5563;
}
.file-summary-modal-container .modal-footer .btn-secondary:hover {
background: #e5e7eb;
}
.file-summary-modal-container .modal-footer .btn-secondary:hover {
background: #4b5563;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}
@media (max-width: 768px) {
.file-summary-modal-container {
max-width: 95%;
max-height: 90vh;
}
.file-summary-modal-container .modal-header {
padding: 16px 20px;
}
.file-summary-modal-container .modal-header h3 {
font-size: 18px;
}
.file-summary-modal-container .modal-body {
padding: 20px;
}
.file-summary-content {
font-size: 14px;
}
}
tr.actions-bar-row {
background: #ffffff !important;
}
tr.actions-bar-row td.actions-bar-cell {
padding: 8px 10px;
background: transparent;
}
.row-actions-bar {
display: flex;
align-items: center;
justify-content: stretch;
gap: 12px;
padding: 8px 14px;
border-top: none;
background: linear-gradient(180deg, #f3f6fb 0%, #e9eef5 100%);
border-radius: 14px;
border: 1px solid rgba(15, 23, 42, 0.06);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07), 0 2px 6px rgba(15, 23, 42, 0.05);
}
.row-actions-bar .client-actions-group {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
gap: 0;
}
.row-actions-bar .client-actions-group .action-btn {
flex: 0 0 auto;
width: auto;
height: auto;
min-width: 65px;
flex-direction: column;
gap: 10px;
padding: 10px 12px;
}
.row-actions-bar .action-btn {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.row-actions-bar .action-btn:hover {
background: rgba(0, 0, 0, 0.05) !important;
transform: scale(1.1);
}
.row-actions-bar .action-btn[data-action="tasks"]:hover,
.row-actions-bar .action-btn[data-action="docs"]:hover,
.row-actions-bar .action-btn[data-action="inspect"]:hover {
box-shadow: none !important;
border-color: transparent !important;
}
.row-actions-bar .action-btn[data-action="tasks"]:hover i { color: rgb(16, 185, 129) !important; filter: none !important; }
.row-actions-bar .action-btn[data-action="docs"]:hover  i { color: rgb(245, 158, 11) !important; filter: none !important; }
.row-actions-bar .action-btn[data-action="inspect"]:hover i { color: rgb(59, 130, 246) !important; filter: none !important; }
.row-actions-bar .action-btn i {
opacity: 0.95;
font-size: 18px;
text-shadow: 0 0 6px currentColor;
transition: text-shadow 0.2s ease, transform 0.2s ease;
}
.row-actions-bar .action-btn:hover i { text-shadow: 0 0 10px currentColor; }
.row-actions-bar .action-btn[data-action="tasks"] i       { color: #10b981 !important; }
.row-actions-bar .action-btn[data-action="docs"] i        { color: #f59e0b !important; }
.row-actions-bar .action-btn[data-action="inspect"] i     { color: #3b82f6 !important; }
.row-actions-bar .action-btn[data-action="notifications"] i { color: #8b5cf6 !important; }
.row-actions-bar .action-btn[data-action="credentials"] i { color: #ec4899 !important; }
.row-actions-bar .action-btn[data-action="declarations"] i{ color: #22c55e !important; }
.row-actions-bar .action-btn[data-action="accounting"] i  { color: #f97316 !important; }
.row-actions-bar .action-btn[data-action="assistant"] i   { color: #64748b !important; }
.row-actions-bar .action-btn[data-action="summary"] i     { color: #0891b2 !important; }
.row-actions-bar .action-btn .action-label {
display: block;
font-size: 12px;
font-weight: 600;
font-family: 'Cairo', 'Segoe UI', 'Tajawal', -apple-system, sans-serif;
color: #475569;
line-height: 1.3;
text-align: center;
white-space: nowrap;
letter-spacing: 0.01em;
transition: color 0.2s ease, transform 0.2s ease;
}
.row-actions-bar .action-btn:hover .action-label {
color: #1e293b;
transform: translateY(-1px);
}
td.hidden-actions-cell {
padding: 0 !important;
}
@media (max-width: 768px) {
.client-actions-group {
grid-template-columns: repeat(3, 28px);
gap: 3px 4px;
padding: 2px;
}
.action-btn {
width: 28px;
height: 28px;
}
.action-btn i {
font-size: 13px;
}
.notification-badge {
font-size: 8px;
padding: 1px 3px;
min-width: 12px;
height: 12px;
}
.row-actions-bar {
justify-content: stretch;
gap: 8px 12px;
padding: 8px 12px;
}
.row-actions-bar .client-actions-group {
justify-content: space-between;
flex-wrap: wrap;
row-gap: 8px;
column-gap: 12px;
}
.row-actions-bar .client-actions-group .action-btn {
flex: 0 0 auto;
min-width: 56px;
width: auto;
height: auto;
padding: 8px 10px;
gap: 8px;
}
.row-actions-bar .action-btn i {
font-size: 16px;
}
.row-actions-bar .action-btn .action-label {
font-size: 11px;
}
}
.action-btn[data-action="contact-log"] i {
color: rgba(99, 102, 241, 0.5);
}
.action-btn[data-action="contact-log"]:hover i {
color: rgba(99, 102, 241, 1);
}
.action-btn--contact:hover {
background: rgba(99, 102, 241, 0.1);
}
#contact-log-modal.modal-overlay,
#contact-log-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 999999 !important;
background: rgba(0, 0, 0, 0.5) !important;
}
#contact-log-modal .modal-overlay {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
}
#contact-log-modal .modal-dialog {
position: relative;
background: white;
border-radius: 16px;
max-width: 600px;
width: 90%;
max-height: 90vh;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: modalSlideUp 0.3s ease-out;
}
#contact-log-modal .modal-dialog--medium {
max-width: 700px;
}
#contact-log-modal .modal-dialog--xl {
max-width: 1100px;
width: 95%;
}
@media (max-width: 1024px) {
#contact-log-modal .modal-dialog--xl {
max-width: 95vw;
width: 95vw;
}
}
#contact-log-modal .modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 25px;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: white;
}
#contact-log-modal .modal-title {
margin: 0;
font-size: 1.3rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
#contact-log-modal .modal-close {
background: none;
border: none;
color: white;
font-size: 1.3rem;
cursor: pointer;
padding: 5px 10px;
border-radius: 6px;
transition: all 0.2s ease;
}
#contact-log-modal .modal-close:hover {
background: rgba(255, 255, 255, 0.2);
}
#contact-log-modal .modal-body {
padding: 24px;
max-height: calc(92vh - 180px);
overflow-y: auto;
}
#contact-log-modal .contact-log-history {
background: #fafafa;
border-right: 3px solid #e5e7eb;
padding-right: 12px;
}
#contact-log-modal .contact-log-item {
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
#contact-log-modal .contact-log-item:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
transform: translateY(-1px);
}
#contact-log-modal .modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 15px 25px;
background: #f9fafb;
border-top: 1px solid #e5e7eb;
}
#contact-log-modal .contact-log-form .form-group {
margin-bottom: 20px;
}
#contact-log-modal .contact-log-form label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #374151;
font-size: 14px;
}
#contact-log-modal .contact-log-form .required {
color: #ef4444;
}
#contact-log-modal .contact-log-form .form-control {
width: 100%;
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
transition: all 0.2s ease;
font-family: inherit;
}
#contact-log-modal .contact-log-form .form-control:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
#contact-log-modal .contact-log-form .form-control:disabled {
background-color: #f3f4f6;
cursor: not-allowed;
}
#contact-log-modal .contact-log-form textarea.form-control {
resize: vertical;
min-height: 80px;
}
#contact-log-modal .contact-log-form .form-text {
display: block;
margin-top: 5px;
font-size: 12px;
color: #6b7280;
}
#contact-log-modal .contact-log-form input[type="checkbox"] {
margin-left: 8px;
width: 16px;
height: 16px;
cursor: pointer;
}
#contact-log-modal .btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
#contact-log-modal .btn-primary {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: white;
}
#contact-log-modal .btn-primary:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}
#contact-log-modal .btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
}
#contact-log-modal .btn-secondary {
background: #e5e7eb;
color: #374151;
}
#contact-log-modal .btn-secondary:hover {
background: #d1d5db;
}
#contact-log-modal[style*="display: none"],
#contact-log-modal[style*="display:none"] {
display: none !important;
}
@keyframes modalSlideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* === tp-chart-themes.css === */
.tp-chart-container {
position: relative;
width: 100%;
height: 400px;
padding: var(--tp-space-4, 1rem);
background: var(--tp-white, #ffffff);
border-radius: var(--tp-radius-lg, 8px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] .tp-chart-container {
background: var(--tp-gray-800, #1f2937);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.tp-chart-container canvas {
max-width: 100%;
height: auto !important;
}
.tp-chart-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--tp-space-4, 1rem);
padding-bottom: var(--tp-space-3, 0.75rem);
border-bottom: 1px solid var(--tp-gray-200, #e5e7eb);
}
[data-theme="dark"] .tp-chart-header {
border-bottom-color: var(--tp-gray-700, #374151);
}
.tp-chart-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--tp-gray-900, #111827);
margin: 0;
}
[data-theme="dark"] .tp-chart-title {
color: var(--tp-white, #ffffff);
}
.tp-chart-subtitle {
font-size: 0.875rem;
color: var(--tp-gray-600, #4b5563);
margin: 0;
}
[data-theme="dark"] .tp-chart-subtitle {
color: var(--tp-gray-400, #9ca3af);
}
.tp-chart-actions {
display: flex;
gap: var(--tp-space-2, 0.5rem);
}
.tp-chart-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--tp-space-2, 0.5rem);
background: var(--tp-gray-100, #f3f4f6);
border: none;
border-radius: var(--tp-radius-md, 6px);
color: var(--tp-gray-700, #374151);
font-size: 0.875rem;
cursor: pointer;
transition: all 200ms;
}
.tp-chart-action-btn:hover {
background: var(--tp-gray-200, #e5e7eb);
color: var(--tp-gray-900, #111827);
}
.tp-chart-action-btn svg {
width: 16px;
height: 16px;
}
[data-theme="dark"] .tp-chart-action-btn {
background: var(--tp-gray-700, #374151);
color: var(--tp-gray-300, #d1d5db);
}
[data-theme="dark"] .tp-chart-action-btn:hover {
background: var(--tp-gray-600, #4b5563);
color: var(--tp-white, #ffffff);
}
.tp-chart-loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.9);
border-radius: var(--tp-radius-lg, 8px);
z-index: 10;
}
[data-theme="dark"] .tp-chart-loading {
background: rgba(31, 41, 55, 0.9);
}
.tp-chart-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--tp-gray-200, #e5e7eb);
border-top-color: var(--tp-primary-500, #3b82f6);
border-radius: 50%;
animation: tp-chart-spin 0.8s linear infinite;
}
@keyframes tp-chart-spin {
to { transform: rotate(360deg); }
}
[data-theme="dark"] .tp-chart-spinner {
border-color: var(--tp-gray-700, #374151);
border-top-color: var(--tp-primary-400, #60a5fa);
}
.tp-chart-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 300px;
text-align: center;
color: var(--tp-gray-500, #6b7280);
}
.tp-chart-empty svg {
width: 64px;
height: 64px;
margin-bottom: var(--tp-space-4, 1rem);
color: var(--tp-gray-300, #d1d5db);
}
.tp-chart-empty-title {
font-size: 1.125rem;
font-weight: 600;
margin: 0 0 var(--tp-space-2, 0.5rem);
}
.tp-chart-empty-description {
font-size: 0.875rem;
margin: 0;
}
[data-theme="dark"] .tp-chart-empty {
color: var(--tp-gray-400, #9ca3af);
}
[data-theme="dark"] .tp-chart-empty svg {
color: var(--tp-gray-600, #4b5563);
}
.tp-chart-legend {
display: flex;
flex-wrap: wrap;
gap: var(--tp-space-3, 0.75rem);
margin-top: var(--tp-space-4, 1rem);
padding-top: var(--tp-space-3, 0.75rem);
border-top: 1px solid var(--tp-gray-200, #e5e7eb);
}
[data-theme="dark"] .tp-chart-legend {
border-top-color: var(--tp-gray-700, #374151);
}
.tp-chart-legend-item {
display: flex;
align-items: center;
gap: var(--tp-space-2, 0.5rem);
font-size: 0.875rem;
color: var(--tp-gray-700, #374151);
cursor: pointer;
transition: opacity 200ms;
}
.tp-chart-legend-item:hover {
opacity: 0.7;
}
.tp-chart-legend-item.disabled {
opacity: 0.4;
text-decoration: line-through;
}
.tp-chart-legend-color {
width: 12px;
height: 12px;
border-radius: 2px;
flex-shrink: 0;
}
[data-theme="dark"] .tp-chart-legend-item {
color: var(--tp-gray-300, #d1d5db);
}
.tp-chart-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--tp-space-4, 1rem);
}
.tp-chart-container-sm {
height: 250px;
}
.tp-chart-container-md {
height: 400px;
}
.tp-chart-container-lg {
height: 500px;
}
.tp-chart-container-xl {
height: 600px;
}
.tp-chart-realtime-indicator {
position: absolute;
top: var(--tp-space-3, 0.75rem);
right: var(--tp-space-3, 0.75rem);
display: flex;
align-items: center;
gap: var(--tp-space-2, 0.5rem);
padding: var(--tp-space-1, 0.25rem) var(--tp-space-3, 0.75rem);
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: var(--tp-radius-full, 9999px);
font-size: 0.75rem;
color: var(--tp-success-700, #047857);
}
.tp-chart-realtime-pulse {
width: 8px;
height: 8px;
background: var(--tp-success-500, #10b981);
border-radius: 50%;
animation: tp-chart-pulse 2s ease-in-out infinite;
}
@keyframes tp-chart-pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(0.8);
}
}
[data-theme="dark"] .tp-chart-realtime-indicator {
background: rgba(52, 211, 153, 0.1);
border-color: rgba(52, 211, 153, 0.3);
color: var(--tp-success-400, #34d399);
}
[dir="rtl"] .tp-chart-realtime-indicator {
right: auto;
left: var(--tp-space-3, 0.75rem);
}
.tp-chart-card {
background: var(--tp-white, #ffffff);
border: 1px solid var(--tp-gray-200, #e5e7eb);
border-radius: var(--tp-radius-lg, 8px);
padding: var(--tp-space-4, 1rem);
transition: box-shadow 200ms;
}
.tp-chart-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] .tp-chart-card {
background: var(--tp-gray-800, #1f2937);
border-color: var(--tp-gray-700, #374151);
}
[data-theme="dark"] .tp-chart-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.tp-chart-action-btn:focus-visible,
.tp-chart-legend-item:focus-visible {
outline: 2px solid var(--tp-primary-500, #3b82f6);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.tp-chart-spinner,
.tp-chart-realtime-pulse,
.tp-chart-action-btn,
.tp-chart-legend-item,
.tp-chart-card {
animation: none !important;
transition: none !important;
}
}
@media (prefers-contrast: high) {
.tp-chart-container {
border: 2px solid currentColor;
}
.tp-chart-legend-color {
border: 1px solid currentColor;
}
}
@media (max-width: 1024px) {
.tp-chart-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.tp-chart-container {
height: 350px;
}
}
@media (max-width: 640px) {
.tp-chart-container {
height: 300px;
padding: var(--tp-space-3, 0.75rem);
}
.tp-chart-header {
flex-direction: column;
align-items: flex-start;
gap: var(--tp-space-2, 0.5rem);
}
.tp-chart-actions {
width: 100%;
justify-content: flex-end;
}
.tp-chart-grid {
grid-template-columns: 1fr;
}
.tp-chart-legend {
font-size: 0.8125rem;
}
.tp-chart-realtime-indicator {
top: auto;
bottom: var(--tp-space-3, 0.75rem);
font-size: 0.6875rem;
}
}
@media print {
.tp-chart-container {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
.tp-chart-actions {
display: none;
}
.tp-chart-realtime-indicator {
display: none;
}
}
.tp-chart-scheme-default {
--chart-color-1: #3b82f6;
--chart-color-2: #10b981;
--chart-color-3: #f59e0b;
--chart-color-4: #ef4444;
--chart-color-5: #8b5cf6;
--chart-color-6: #06b6d4;
--chart-color-7: #ec4899;
--chart-color-8: #f97316;
}
.tp-chart-scheme-vibrant {
--chart-color-1: #ff6384;
--chart-color-2: #36a2eb;
--chart-color-3: #ffce56;
--chart-color-4: #4bc0c0;
--chart-color-5: #9966ff;
--chart-color-6: #ff9f40;
--chart-color-7: #c9cbcf;
--chart-color-8: #ff6384;
}
.tp-chart-scheme-pastel {
--chart-color-1: #ffb3ba;
--chart-color-2: #bae1ff;
--chart-color-3: #ffffba;
--chart-color-4: #baffc9;
--chart-color-5: #e0bbff;
--chart-color-6: #ffd8b3;
--chart-color-7: #c9c9c9;
--chart-color-8: #ffb3d9;
}
.tp-chart-scheme-monochrome {
--chart-color-1: #1f2937;
--chart-color-2: #374151;
--chart-color-3: #4b5563;
--chart-color-4: #6b7280;
--chart-color-5: #9ca3af;
--chart-color-6: #d1d5db;
--chart-color-7: #e5e7eb;
--chart-color-8: #f3f4f6;
}

/* === tp-tooltip-system.css === */
.tp-tooltip {
position: fixed;
padding: var(--tp-space-2, 0.5rem) var(--tp-space-3, 0.75rem);
font-size: 13px;
line-height: 1.5;
border-radius: var(--tp-radius-md, 6px);
pointer-events: none;
opacity: 0;
transform: scale(0.9);
transition: all var(--tp-transition-fast, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
word-wrap: break-word;
z-index: 9999;
box-shadow:
0 10px 25px -5px rgba(0, 0, 0, 0.2),
0 8px 10px -6px rgba(0, 0, 0, 0.2);
}
.tp-tooltip-show {
opacity: 1;
transform: scale(1);
}
.tp-tooltip-hide {
opacity: 0;
transform: scale(0.9);
}
.tp-tooltip-content {
position: relative;
z-index: 1;
}
.tp-tooltip.tp-tooltip-interactive {
pointer-events: auto;
}
.tp-tooltip-dark {
background: var(--tp-gray-900, #111827);
color: var(--tp-white, #ffffff);
}
.tp-tooltip-dark .tp-tooltip-arrow::before {
background: var(--tp-gray-900, #111827);
}
.tp-tooltip-light {
background: var(--tp-white, #ffffff);
color: var(--tp-gray-900, #111827);
border: 1px solid var(--tp-gray-300, #d1d5db);
}
.tp-tooltip-light .tp-tooltip-arrow::before {
background: var(--tp-white, #ffffff);
border: 1px solid var(--tp-gray-300, #d1d5db);
}
.tp-tooltip-primary {
background: var(--tp-primary-600, #2563eb);
color: var(--tp-white, #ffffff);
}
.tp-tooltip-primary .tp-tooltip-arrow::before {
background: var(--tp-primary-600, #2563eb);
}
.tp-tooltip-success {
background: var(--tp-success-600, #059669);
color: var(--tp-white, #ffffff);
}
.tp-tooltip-success .tp-tooltip-arrow::before {
background: var(--tp-success-600, #059669);
}
.tp-tooltip-warning {
background: var(--tp-warning-600, #d97706);
color: var(--tp-white, #ffffff);
}
.tp-tooltip-warning .tp-tooltip-arrow::before {
background: var(--tp-warning-600, #d97706);
}
.tp-tooltip-danger {
background: var(--tp-danger-600, #dc2626);
color: var(--tp-white, #ffffff);
}
.tp-tooltip-danger .tp-tooltip-arrow::before {
background: var(--tp-danger-600, #dc2626);
}
.tp-tooltip-arrow {
position: absolute;
width: 12px;
height: 12px;
pointer-events: none;
}
.tp-tooltip-arrow::before {
content: '';
position: absolute;
width: 12px;
height: 12px;
transform: rotate(45deg);
background: inherit;
}
.tp-tooltip-top .tp-tooltip-arrow {
bottom: -6px;
left: 50%;
margin-left: -6px;
}
.tp-tooltip-bottom .tp-tooltip-arrow {
top: -6px;
left: 50%;
margin-left: -6px;
}
.tp-tooltip-left .tp-tooltip-arrow {
right: -6px;
top: 50%;
margin-top: -6px;
}
.tp-tooltip-right .tp-tooltip-arrow {
left: -6px;
top: 50%;
margin-top: -6px;
}
.tp-tooltip-light .tp-tooltip-arrow {
overflow: hidden;
}
.tp-tooltip-light.tp-tooltip-top .tp-tooltip-arrow::before {
border-bottom: none;
border-right: none;
}
.tp-tooltip-light.tp-tooltip-bottom .tp-tooltip-arrow::before {
border-top: none;
border-left: none;
}
.tp-tooltip-light.tp-tooltip-left .tp-tooltip-arrow::before {
border-top: none;
border-right: none;
}
.tp-tooltip-light.tp-tooltip-right .tp-tooltip-arrow::before {
border-bottom: none;
border-left: none;
}
.tp-tooltip-fade {
transition: opacity var(--tp-transition-fast, 150ms) ease;
}
.tp-tooltip-fade.tp-tooltip-show {
opacity: 1;
}
.tp-tooltip-fade.tp-tooltip-hide {
opacity: 0;
}
.tp-tooltip-scale {
transition: all var(--tp-transition-fast, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.tp-tooltip-scale.tp-tooltip-show {
opacity: 1;
transform: scale(1);
}
.tp-tooltip-scale.tp-tooltip-hide {
opacity: 0;
transform: scale(0.9);
}
.tp-tooltip-slide.tp-tooltip-top {
transform: translateY(-10px);
}
.tp-tooltip-slide.tp-tooltip-bottom {
transform: translateY(10px);
}
.tp-tooltip-slide.tp-tooltip-left {
transform: translateX(-10px);
}
.tp-tooltip-slide.tp-tooltip-right {
transform: translateX(10px);
}
.tp-tooltip-slide.tp-tooltip-show {
opacity: 1;
transform: translate(0, 0);
}
.tp-tooltip-slide.tp-tooltip-hide {
opacity: 0;
}
.tp-tooltip-content h1,
.tp-tooltip-content h2,
.tp-tooltip-content h3,
.tp-tooltip-content h4,
.tp-tooltip-content h5,
.tp-tooltip-content h6 {
margin: 0 0 var(--tp-space-2, 0.5rem) 0;
font-size: 14px;
font-weight: 600;
}
.tp-tooltip-content p {
margin: 0 0 var(--tp-space-2, 0.5rem) 0;
}
.tp-tooltip-content p:last-child {
margin-bottom: 0;
}
.tp-tooltip-content ul,
.tp-tooltip-content ol {
margin: 0;
padding-left: var(--tp-space-4, 1rem);
}
.tp-tooltip-content li {
margin-bottom: var(--tp-space-1, 0.25rem);
}
.tp-tooltip-content code {
padding: 2px 4px;
background: rgba(0, 0, 0, 0.1);
border-radius: var(--tp-radius-sm, 2px);
font-size: 12px;
font-family: 'Courier New', monospace;
}
.tp-tooltip-light .tp-tooltip-content code {
background: rgba(0, 0, 0, 0.05);
}
.tp-tooltip-content a {
color: inherit;
text-decoration: underline;
}
.tp-tooltip-content a:hover {
text-decoration: none;
}
.tp-tooltip-large {
max-width: 400px;
padding: var(--tp-space-3, 0.75rem) var(--tp-space-4, 1rem);
font-size: 14px;
}
.tp-tooltip-small {
max-width: 200px;
padding: var(--tp-space-1, 0.25rem) var(--tp-space-2, 0.5rem);
font-size: 12px;
}
.tp-tooltip-rich {
max-width: 500px;
padding: var(--tp-space-4, 1rem);
}
[dir="rtl"] .tp-tooltip-content ul,
[dir="rtl"] .tp-tooltip-content ol {
padding-right: var(--tp-space-4, 1rem);
padding-left: 0;
}
[data-theme="dark"] .tp-tooltip-light {
background: var(--tp-gray-800, #1f2937);
color: var(--tp-gray-100, #f3f4f6);
border-color: var(--tp-gray-700, #374151);
}
[data-theme="dark"] .tp-tooltip-light .tp-tooltip-arrow::before {
background: var(--tp-gray-800, #1f2937);
border-color: var(--tp-gray-700, #374151);
}
[data-theme="dark"] .tp-tooltip-light .tp-tooltip-content code {
background: rgba(255, 255, 255, 0.1);
}
.tp-tooltip-interactive:hover {
box-shadow:
0 20px 35px -5px rgba(0, 0, 0, 0.3),
0 10px 15px -6px rgba(0, 0, 0, 0.3);
}
.tp-tooltip-loading {
min-width: 100px;
text-align: center;
}
.tp-tooltip-loading::after {
content: '';
display: inline-block;
width: 12px;
height: 12px;
margin-left: var(--tp-space-2, 0.5rem);
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: tp-tooltip-spin 0.6s linear infinite;
}
@keyframes tp-tooltip-spin {
to {
transform: rotate(360deg);
}
}
.tp-tooltip-error {
background: var(--tp-danger-600, #dc2626);
color: var(--tp-white, #ffffff);
}
.tp-tooltip-error::before {
content: '⚠️ ';
}
.tp-tooltip-success-check::before {
content: '✓ ';
font-weight: bold;
}
.tp-tooltip-info-icon::before {
content: 'ℹ️ ';
}
.tp-tooltip:focus-visible {
outline: 2px solid var(--tp-primary-500, #3b82f6);
outline-offset: 2px;
}
@media (max-width: 640px) {
.tp-tooltip {
max-width: calc(100vw - 20px) !important;
font-size: 12px;
}
.tp-tooltip-large {
max-width: calc(100vw - 20px) !important;
}
.tp-tooltip-rich {
max-width: calc(100vw - 20px) !important;
padding: var(--tp-space-3, 0.75rem);
}
}
@media print {
.tp-tooltip {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.tp-tooltip {
transition: opacity var(--tp-transition-fast, 150ms);
}
.tp-tooltip-show {
transform: none;
}
.tp-tooltip-hide {
transform: none;
}
.tp-tooltip-loading::after {
animation: none;
}
}
.tp-tooltip-high-priority {
z-index: 99999;
}
.tp-tooltip-low-priority {
z-index: 9998;
}
.tp-tooltip[data-width="auto"] {
max-width: none;
width: auto;
}
.tp-tooltip[data-width="fit"] {
max-width: fit-content;
width: fit-content;
}
.tp-tooltip-multiline {
white-space: normal;
text-align: right;
}
[dir="ltr"] .tp-tooltip-multiline {
text-align: left;
}
.tp-tooltip-with-icon {
display: flex;
align-items: flex-start;
gap: var(--tp-space-2, 0.5rem);
}
.tp-tooltip-icon {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 2px;
}
.tp-tooltip-group {
display: flex;
flex-direction: column;
gap: var(--tp-space-2, 0.5rem);
}
.tp-tooltip-group-item {
padding: var(--tp-space-2, 0.5rem);
border-radius: var(--tp-radius-sm, 2px);
background: rgba(0, 0, 0, 0.1);
}
.tp-tooltip-light .tp-tooltip-group-item {
background: rgba(0, 0, 0, 0.05);
}
.tp-tooltip-kbd {
display: inline-block;
padding: 2px 6px;
font-size: 11px;
font-family: 'Courier New', monospace;
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--tp-radius-sm, 2px);
margin: 0 2px;
}
.tp-tooltip-light .tp-tooltip-kbd {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.1);
}

/* === utilities.css === */
:root {
--util-primary: #667eea;
--util-secondary: #6c757d;
--util-success: #28a745;
--util-danger: #dc3545;
--util-warning: #ffc107;
--util-info: #17a2b8;
--util-light: #f8f9fa;
--util-dark: #343a40;
--util-white: #ffffff;
--util-black: #000000;
--util-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--util-gradient-secondary: linear-gradient(135deg, #6c757d 0%, #495057 100%);
--util-gradient-success: linear-gradient(135deg, #28a745 0%, #20c997 100%);
--util-gradient-danger: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%);
--util-gradient-warning: linear-gradient(135deg, #ffc107 0%, #ff9500 100%);
--util-gradient-info: linear-gradient(135deg, #17a2b8 0%, #6f42c1 100%);
--util-gradient-rainbow: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c, #4facfe, #00f2fe);
--util-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--util-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
--util-shadow-md: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
--util-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
--util-shadow-xl: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
--util-shadow-2xl: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
--util-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
--util-shadow-primary: 0 8px 32px rgba(102, 126, 234, 0.3);
--util-shadow-success: 0 8px 32px rgba(40, 167, 69, 0.3);
--util-shadow-warning: 0 8px 32px rgba(255, 193, 7, 0.3);
--util-shadow-danger: 0 8px 32px rgba(220, 53, 69, 0.3);
--util-shadow-info: 0 8px 32px rgba(23, 162, 184, 0.3);
--util-border-width: 1px;
--util-border-width-2: 2px;
--util-border-width-3: 3px;
--util-border-width-4: 4px;
--util-border-color: #dee2e6;
--util-border-color-light: rgba(255, 255, 255, 0.2);
--util-border-color-dark: rgba(0, 0, 0, 0.1);
--util-border-radius-xs: 0.125rem;
--util-border-radius-sm: 0.25rem;
--util-border-radius: 0.375rem;
--util-border-radius-md: 0.5rem;
--util-border-radius-lg: 0.75rem;
--util-border-radius-xl: 1rem;
--util-border-radius-2xl: 1.5rem;
--util-border-radius-3xl: 2rem;
--util-border-radius-full: 50%;
--util-spacing-0: 0;
--util-spacing-1: 0.25rem;
--util-spacing-2: 0.5rem;
--util-spacing-3: 0.75rem;
--util-spacing-4: 1rem;
--util-spacing-5: 1.25rem;
--util-spacing-6: 1.5rem;
--util-spacing-7: 1.75rem;
--util-spacing-8: 2rem;
--util-spacing-9: 2.25rem;
--util-spacing-10: 2.5rem;
--util-spacing-12: 3rem;
--util-spacing-16: 4rem;
--util-spacing-20: 5rem;
--util-spacing-24: 6rem;
--util-spacing-32: 8rem;
--util-transition-fast: 0.15s ease-in-out;
--util-transition-normal: 0.3s ease-in-out;
--util-transition-slow: 0.5s ease-in-out;
--util-transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
--util-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--util-font-size-xs: 0.75rem;
--util-font-size-sm: 0.875rem;
--util-font-size-base: 1rem;
--util-font-size-lg: 1.125rem;
--util-font-size-xl: 1.25rem;
--util-font-size-2xl: 1.5rem;
--util-font-size-3xl: 1.875rem;
--util-font-size-4xl: 2.25rem;
--util-font-size-5xl: 3rem;
--util-font-size-6xl: 3.75rem;
--util-font-weight-thin: 100;
--util-font-weight-light: 300;
--util-font-weight-normal: 400;
--util-font-weight-medium: 500;
--util-font-weight-semibold: 600;
--util-font-weight-bold: 700;
--util-font-weight-extrabold: 800;
--util-font-weight-black: 900;
--util-opacity-0: 0;
--util-opacity-5: 0.05;
--util-opacity-10: 0.1;
--util-opacity-20: 0.2;
--util-opacity-25: 0.25;
--util-opacity-30: 0.3;
--util-opacity-40: 0.4;
--util-opacity-50: 0.5;
--util-opacity-60: 0.6;
--util-opacity-70: 0.7;
--util-opacity-75: 0.75;
--util-opacity-80: 0.8;
--util-opacity-90: 0.9;
--util-opacity-95: 0.95;
--util-opacity-100: 1;
}
.shadow-none { box-shadow: none !important; }
.shadow-xs { box-shadow: var(--util-shadow-xs) !important; }
.shadow-sm { box-shadow: var(--util-shadow-sm) !important; }
.shadow { box-shadow: var(--util-shadow-md) !important; }
.shadow-md { box-shadow: var(--util-shadow-md) !important; }
.shadow-lg { box-shadow: var(--util-shadow-lg) !important; }
.shadow-xl { box-shadow: var(--util-shadow-xl) !important; }
.shadow-2xl { box-shadow: var(--util-shadow-2xl) !important; }
.shadow-inner { box-shadow: var(--util-shadow-inner) !important; }
.shadow-primary { box-shadow: var(--util-shadow-primary) !important; }
.shadow-secondary { box-shadow: 0 8px 32px rgba(108, 117, 125, 0.3) !important; }
.shadow-success { box-shadow: var(--util-shadow-success) !important; }
.shadow-danger { box-shadow: var(--util-shadow-danger) !important; }
.shadow-warning { box-shadow: var(--util-shadow-warning) !important; }
.shadow-info { box-shadow: var(--util-shadow-info) !important; }
.shadow-hover {
transition: box-shadow var(--util-transition-normal) !important;
}
.shadow-hover:hover {
box-shadow: var(--util-shadow-xl) !important;
}
.shadow-glow {
position: relative !important;
}
.shadow-glow::after {
content: '';
position: absolute;
inset: -2px;
background: var(--util-gradient-primary);
border-radius: inherit;
opacity: 0;
z-index: -1;
transition: opacity var(--util-transition-normal);
}
.shadow-glow:hover::after {
opacity: 0.2;
}
.smooth-scroll {
scroll-behavior: smooth !important;
}
.scroll-auto { scroll-behavior: auto !important; }
.scrollbar-thin::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: var(--util-light);
border-radius: 3px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background: var(--util-gradient-primary);
border-radius: 3px;
transition: background var(--util-transition-normal);
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #5a6fd8, #6a4190);
}
.scrollbar-hidden::-webkit-scrollbar {
display: none;
}
.scrollbar-hidden {
-ms-overflow-style: none;
scrollbar-width: none;
}
.focus-ring:focus-visible {
outline: 2px solid var(--util-primary) !important;
outline-offset: 2px !important;
border-radius: var(--util-border-radius) !important;
}
.focus-glow:focus-visible {
outline: none !important;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3) !important;
}
.focus-none:focus {
outline: none !important;
box-shadow: none !important;
}
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.not-sr-only {
position: static !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
clip: auto !important;
white-space: normal !important;
}
@media print {
.no-print { display: none !important; }
.print-only { display: block !important; }
.print-break-before { page-break-before: always !important; }
.print-break-after { page-break-after: always !important; }
.print-break-inside-avoid { page-break-inside: avoid !important; }
body {
font-size: 12pt !important;
line-height: 1.4 !important;
color: var(--util-black) !important;
background: var(--util-white) !important;
}
.service-card,
.entity-card,
.glass-stat-card,
.sub-stat,
.inline-stat {
break-inside: avoid !important;
box-shadow: none !important;
border: 1px solid #ddd !important;
background: var(--util-white) !important;
}
.shadow-sm,
.shadow,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
box-shadow: none !important;
}
}
.text-primary { color: var(--util-primary) !important; }
.text-secondary { color: var(--util-secondary) !important; }
.text-success { color: var(--util-success) !important; }
.text-danger { color: var(--util-danger) !important; }
.text-warning { color: var(--util-warning) !important; }
.text-info { color: var(--util-info) !important; }
.text-light { color: var(--util-light) !important; }
.text-dark { color: var(--util-dark) !important; }
.text-muted { color: var(--util-secondary) !important; }
.text-white { color: var(--util-white) !important; }
.text-black { color: var(--util-black) !important; }
.text-gradient-primary {
background: var(--util-gradient-primary) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
.text-gradient-success {
background: var(--util-gradient-success) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
.text-gradient-rainbow {
background: var(--util-gradient-rainbow) !important;
background-size: 200% 100% !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
animation: gradientShift 3s ease-in-out infinite !important;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.text-xs { font-size: var(--util-font-size-xs) !important; }
.text-sm { font-size: var(--util-font-size-sm) !important; }
.text-base { font-size: var(--util-font-size-base) !important; }
.text-lg { font-size: var(--util-font-size-lg) !important; }
.text-xl { font-size: var(--util-font-size-xl) !important; }
.text-2xl { font-size: var(--util-font-size-2xl) !important; }
.text-3xl { font-size: var(--util-font-size-3xl) !important; }
.text-4xl { font-size: var(--util-font-size-4xl) !important; }
.text-5xl { font-size: var(--util-font-size-5xl) !important; }
.text-6xl { font-size: var(--util-font-size-6xl) !important; }
.font-thin { font-weight: var(--util-font-weight-thin) !important; }
.font-light { font-weight: var(--util-font-weight-light) !important; }
.font-normal { font-weight: var(--util-font-weight-normal) !important; }
.font-medium { font-weight: var(--util-font-weight-medium) !important; }
.font-semibold { font-weight: var(--util-font-weight-semibold) !important; }
.font-bold { font-weight: var(--util-font-weight-bold) !important; }
.font-extrabold { font-weight: var(--util-font-weight-extrabold) !important; }
.font-black { font-weight: var(--util-font-weight-black) !important; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }
.text-start { text-align: start !important; }
.text-end { text-align: end !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-normal-case { text-transform: none !important; }
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
.text-decoration-overline { text-decoration: overline !important; }
.font-italic { font-style: italic !important; }
.font-normal { font-style: normal !important; }
.text-shadow-sm { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; }
.text-shadow { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; }
.text-shadow-lg { text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important; }
.text-shadow-none { text-shadow: none !important; }
.bg-transparent { background-color: transparent !important; }
.bg-primary { background-color: var(--util-primary) !important; }
.bg-secondary { background-color: var(--util-secondary) !important; }
.bg-success { background-color: var(--util-success) !important; }
.bg-danger { background-color: var(--util-danger) !important; }
.bg-warning { background-color: var(--util-warning) !important; }
.bg-info { background-color: var(--util-info) !important; }
.bg-light { background-color: var(--util-light) !important; }
.bg-dark { background-color: var(--util-dark) !important; }
.bg-white { background-color: var(--util-white) !important; }
.bg-black { background-color: var(--util-black) !important; }
.bg-gradient-primary { background: var(--util-gradient-primary) !important; }
.bg-gradient-secondary { background: var(--util-gradient-secondary) !important; }
.bg-gradient-success { background: var(--util-gradient-success) !important; }
.bg-gradient-danger { background: var(--util-gradient-danger) !important; }
.bg-gradient-warning { background: var(--util-gradient-warning) !important; }
.bg-gradient-info { background: var(--util-gradient-info) !important; }
.bg-gradient-rainbow {
background: var(--util-gradient-rainbow) !important;
background-size: 200% 100% !important;
animation: gradientShift 4s ease-in-out infinite !important;
}
.bg-glass {
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(20px) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.bg-glass-dark {
background: rgba(0, 0, 0, 0.1) !important;
backdrop-filter: blur(20px) !important;
border: 1px solid rgba(0, 0, 0, 0.2) !important;
}
.border-0 { border: 0 !important; }
.border { border: var(--util-border-width) solid var(--util-border-color) !important; }
.border-2 { border: var(--util-border-width-2) solid var(--util-border-color) !important; }
.border-3 { border: var(--util-border-width-3) solid var(--util-border-color) !important; }
.border-4 { border: var(--util-border-width-4) solid var(--util-border-color) !important; }
.border-t { border-top: var(--util-border-width) solid var(--util-border-color) !important; }
.border-r { border-right: var(--util-border-width) solid var(--util-border-color) !important; }
.border-b { border-bottom: var(--util-border-width) solid var(--util-border-color) !important; }
.border-l { border-left: var(--util-border-width) solid var(--util-border-color) !important; }
.border-x {
border-left: var(--util-border-width) solid var(--util-border-color) !important;
border-right: var(--util-border-width) solid var(--util-border-color) !important;
}
.border-y {
border-top: var(--util-border-width) solid var(--util-border-color) !important;
border-bottom: var(--util-border-width) solid var(--util-border-color) !important;
}
.border-transparent { border-color: transparent !important; }
.border-primary { border-color: var(--util-primary) !important; }
.border-secondary { border-color: var(--util-secondary) !important; }
.border-success { border-color: var(--util-success) !important; }
.border-danger { border-color: var(--util-danger) !important; }
.border-warning { border-color: var(--util-warning) !important; }
.border-info { border-color: var(--util-info) !important; }
.border-light { border-color: var(--util-light) !important; }
.border-dark { border-color: var(--util-dark) !important; }
.border-white { border-color: var(--util-white) !important; }
.border-black { border-color: var(--util-black) !important; }
.border-gradient {
border: var(--util-border-width-2) solid transparent !important;
background: linear-gradient(var(--util-white), var(--util-white)) padding-box,
var(--util-gradient-primary) border-box !important;
}
.border-solid { border-style: solid !important; }
.border-dashed { border-style: dashed !important; }
.border-dotted { border-style: dotted !important; }
.border-double { border-style: double !important; }
.border-none { border-style: none !important; }
.rounded-none { border-radius: 0 !important; }
.rounded-xs { border-radius: var(--util-border-radius-xs) !important; }
.rounded-sm { border-radius: var(--util-border-radius-sm) !important; }
.rounded { border-radius: var(--util-border-radius) !important; }
.rounded-md { border-radius: var(--util-border-radius-md) !important; }
.rounded-lg { border-radius: var(--util-border-radius-lg) !important; }
.rounded-xl { border-radius: var(--util-border-radius-xl) !important; }
.rounded-2xl { border-radius: var(--util-border-radius-2xl) !important; }
.rounded-3xl { border-radius: var(--util-border-radius-3xl) !important; }
.rounded-full { border-radius: var(--util-border-radius-full) !important; }
.rounded-t-none { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.rounded-t { border-top-left-radius: var(--util-border-radius) !important; border-top-right-radius: var(--util-border-radius) !important; }
.rounded-t-lg { border-top-left-radius: var(--util-border-radius-lg) !important; border-top-right-radius: var(--util-border-radius-lg) !important; }
.rounded-r-none { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.rounded-r { border-top-right-radius: var(--util-border-radius) !important; border-bottom-right-radius: var(--util-border-radius) !important; }
.rounded-r-lg { border-top-right-radius: var(--util-border-radius-lg) !important; border-bottom-right-radius: var(--util-border-radius-lg) !important; }
.rounded-b-none { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.rounded-b { border-bottom-left-radius: var(--util-border-radius) !important; border-bottom-right-radius: var(--util-border-radius) !important; }
.rounded-b-lg { border-bottom-left-radius: var(--util-border-radius-lg) !important; border-bottom-right-radius: var(--util-border-radius-lg) !important; }
.rounded-l-none { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.rounded-l { border-top-left-radius: var(--util-border-radius) !important; border-bottom-left-radius: var(--util-border-radius) !important; }
.rounded-l-lg { border-top-left-radius: var(--util-border-radius-lg) !important; border-bottom-left-radius: var(--util-border-radius-lg) !important; }
.m-0 { margin: var(--util-spacing-0) !important; }
.m-1 { margin: var(--util-spacing-1) !important; }
.m-2 { margin: var(--util-spacing-2) !important; }
.m-3 { margin: var(--util-spacing-3) !important; }
.m-4 { margin: var(--util-spacing-4) !important; }
.m-5 { margin: var(--util-spacing-5) !important; }
.m-6 { margin: var(--util-spacing-6) !important; }
.m-8 { margin: var(--util-spacing-8) !important; }
.m-10 { margin: var(--util-spacing-10) !important; }
.m-12 { margin: var(--util-spacing-12) !important; }
.m-16 { margin: var(--util-spacing-16) !important; }
.m-20 { margin: var(--util-spacing-20) !important; }
.m-24 { margin: var(--util-spacing-24) !important; }
.m-32 { margin: var(--util-spacing-32) !important; }
.m-auto { margin: auto !important; }
.mx-0 { margin-left: var(--util-spacing-0) !important; margin-right: var(--util-spacing-0) !important; }
.mx-1 { margin-left: var(--util-spacing-1) !important; margin-right: var(--util-spacing-1) !important; }
.mx-2 { margin-left: var(--util-spacing-2) !important; margin-right: var(--util-spacing-2) !important; }
.mx-3 { margin-left: var(--util-spacing-3) !important; margin-right: var(--util-spacing-3) !important; }
.mx-4 { margin-left: var(--util-spacing-4) !important; margin-right: var(--util-spacing-4) !important; }
.mx-5 { margin-left: var(--util-spacing-5) !important; margin-right: var(--util-spacing-5) !important; }
.mx-6 { margin-left: var(--util-spacing-6) !important; margin-right: var(--util-spacing-6) !important; }
.mx-8 { margin-left: var(--util-spacing-8) !important; margin-right: var(--util-spacing-8) !important; }
.mx-10 { margin-left: var(--util-spacing-10) !important; margin-right: var(--util-spacing-10) !important; }
.mx-12 { margin-left: var(--util-spacing-12) !important; margin-right: var(--util-spacing-12) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-0 { margin-top: var(--util-spacing-0) !important; margin-bottom: var(--util-spacing-0) !important; }
.my-1 { margin-top: var(--util-spacing-1) !important; margin-bottom: var(--util-spacing-1) !important; }
.my-2 { margin-top: var(--util-spacing-2) !important; margin-bottom: var(--util-spacing-2) !important; }
.my-3 { margin-top: var(--util-spacing-3) !important; margin-bottom: var(--util-spacing-3) !important; }
.my-4 { margin-top: var(--util-spacing-4) !important; margin-bottom: var(--util-spacing-4) !important; }
.my-5 { margin-top: var(--util-spacing-5) !important; margin-bottom: var(--util-spacing-5) !important; }
.my-6 { margin-top: var(--util-spacing-6) !important; margin-bottom: var(--util-spacing-6) !important; }
.my-8 { margin-top: var(--util-spacing-8) !important; margin-bottom: var(--util-spacing-8) !important; }
.my-10 { margin-top: var(--util-spacing-10) !important; margin-bottom: var(--util-spacing-10) !important; }
.my-12 { margin-top: var(--util-spacing-12) !important; margin-bottom: var(--util-spacing-12) !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.mt-0 { margin-top: var(--util-spacing-0) !important; }
.mt-1 { margin-top: var(--util-spacing-1) !important; }
.mt-2 { margin-top: var(--util-spacing-2) !important; }
.mt-3 { margin-top: var(--util-spacing-3) !important; }
.mt-4 { margin-top: var(--util-spacing-4) !important; }
.mt-5 { margin-top: var(--util-spacing-5) !important; }
.mt-6 { margin-top: var(--util-spacing-6) !important; }
.mt-8 { margin-top: var(--util-spacing-8) !important; }
.mt-10 { margin-top: var(--util-spacing-10) !important; }
.mt-12 { margin-top: var(--util-spacing-12) !important; }
.mt-16 { margin-top: var(--util-spacing-16) !important; }
.mt-20 { margin-top: var(--util-spacing-20) !important; }
.mt-24 { margin-top: var(--util-spacing-24) !important; }
.mt-32 { margin-top: var(--util-spacing-32) !important; }
.mt-auto { margin-top: auto !important; }
.mr-0 { margin-right: var(--util-spacing-0) !important; }
.mr-1 { margin-right: var(--util-spacing-1) !important; }
.mr-2 { margin-right: var(--util-spacing-2) !important; }
.mr-3 { margin-right: var(--util-spacing-3) !important; }
.mr-4 { margin-right: var(--util-spacing-4) !important; }
.mr-5 { margin-right: var(--util-spacing-5) !important; }
.mr-6 { margin-right: var(--util-spacing-6) !important; }
.mr-8 { margin-right: var(--util-spacing-8) !important; }
.mr-10 { margin-right: var(--util-spacing-10) !important; }
.mr-12 { margin-right: var(--util-spacing-12) !important; }
.mr-auto { margin-right: auto !important; }
.mb-0 { margin-bottom: var(--util-spacing-0) !important; }
.mb-1 { margin-bottom: var(--util-spacing-1) !important; }
.mb-2 { margin-bottom: var(--util-spacing-2) !important; }
.mb-3 { margin-bottom: var(--util-spacing-3) !important; }
.mb-4 { margin-bottom: var(--util-spacing-4) !important; }
.mb-5 { margin-bottom: var(--util-spacing-5) !important; }
.mb-6 { margin-bottom: var(--util-spacing-6) !important; }
.mb-8 { margin-bottom: var(--util-spacing-8) !important; }
.mb-10 { margin-bottom: var(--util-spacing-10) !important; }
.mb-12 { margin-bottom: var(--util-spacing-12) !important; }
.mb-16 { margin-bottom: var(--util-spacing-16) !important; }
.mb-20 { margin-bottom: var(--util-spacing-20) !important; }
.mb-24 { margin-bottom: var(--util-spacing-24) !important; }
.mb-32 { margin-bottom: var(--util-spacing-32) !important; }
.mb-auto { margin-bottom: auto !important; }
.ml-0 { margin-left: var(--util-spacing-0) !important; }
.ml-1 { margin-left: var(--util-spacing-1) !important; }
.ml-2 { margin-left: var(--util-spacing-2) !important; }
.ml-3 { margin-left: var(--util-spacing-3) !important; }
.ml-4 { margin-left: var(--util-spacing-4) !important; }
.ml-5 { margin-left: var(--util-spacing-5) !important; }
.ml-6 { margin-left: var(--util-spacing-6) !important; }
.ml-8 { margin-left: var(--util-spacing-8) !important; }
.ml-10 { margin-left: var(--util-spacing-10) !important; }
.ml-12 { margin-left: var(--util-spacing-12) !important; }
.ml-auto { margin-left: auto !important; }
.p-0 { padding: var(--util-spacing-0) !important; }
.p-1 { padding: var(--util-spacing-1) !important; }
.p-2 { padding: var(--util-spacing-2) !important; }
.p-3 { padding: var(--util-spacing-3) !important; }
.p-4 { padding: var(--util-spacing-4) !important; }
.p-5 { padding: var(--util-spacing-5) !important; }
.p-6 { padding: var(--util-spacing-6) !important; }
.p-8 { padding: var(--util-spacing-8) !important; }
.p-10 { padding: var(--util-spacing-10) !important; }
.p-12 { padding: var(--util-spacing-12) !important; }
.p-16 { padding: var(--util-spacing-16) !important; }
.p-20 { padding: var(--util-spacing-20) !important; }
.p-24 { padding: var(--util-spacing-24) !important; }
.p-32 { padding: var(--util-spacing-32) !important; }
.px-0 { padding-left: var(--util-spacing-0) !important; padding-right: var(--util-spacing-0) !important; }
.px-1 { padding-left: var(--util-spacing-1) !important; padding-right: var(--util-spacing-1) !important; }
.px-2 { padding-left: var(--util-spacing-2) !important; padding-right: var(--util-spacing-2) !important; }
.px-3 { padding-left: var(--util-spacing-3) !important; padding-right: var(--util-spacing-3) !important; }
.px-4 { padding-left: var(--util-spacing-4) !important; padding-right: var(--util-spacing-4) !important; }
.px-5 { padding-left: var(--util-spacing-5) !important; padding-right: var(--util-spacing-5) !important; }
.px-6 { padding-left: var(--util-spacing-6) !important; padding-right: var(--util-spacing-6) !important; }
.px-8 { padding-left: var(--util-spacing-8) !important; padding-right: var(--util-spacing-8) !important; }
.px-10 { padding-left: var(--util-spacing-10) !important; padding-right: var(--util-spacing-10) !important; }
.px-12 { padding-left: var(--util-spacing-12) !important; padding-right: var(--util-spacing-12) !important; }
.py-0 { padding-top: var(--util-spacing-0) !important; padding-bottom: var(--util-spacing-0) !important; }
.py-1 { padding-top: var(--util-spacing-1) !important; padding-bottom: var(--util-spacing-1) !important; }
.py-2 { padding-top: var(--util-spacing-2) !important; padding-bottom: var(--util-spacing-2) !important; }
.py-3 { padding-top: var(--util-spacing-3) !important; padding-bottom: var(--util-spacing-3) !important; }
.py-4 { padding-top: var(--util-spacing-4) !important; padding-bottom: var(--util-spacing-4) !important; }
.py-5 { padding-top: var(--util-spacing-5) !important; padding-bottom: var(--util-spacing-5) !important; }
.py-6 { padding-top: var(--util-spacing-6) !important; padding-bottom: var(--util-spacing-6) !important; }
.py-8 { padding-top: var(--util-spacing-8) !important; padding-bottom: var(--util-spacing-8) !important; }
.py-10 { padding-top: var(--util-spacing-10) !important; padding-bottom: var(--util-spacing-10) !important; }
.py-12 { padding-top: var(--util-spacing-12) !important; padding-bottom: var(--util-spacing-12) !important; }
.pt-0 { padding-top: var(--util-spacing-0) !important; }
.pt-1 { padding-top: var(--util-spacing-1) !important; }
.pt-2 { padding-top: var(--util-spacing-2) !important; }
.pt-3 { padding-top: var(--util-spacing-3) !important; }
.pt-4 { padding-top: var(--util-spacing-4) !important; }
.pt-5 { padding-top: var(--util-spacing-5) !important; }
.pt-6 { padding-top: var(--util-spacing-6) !important; }
.pt-8 { padding-top: var(--util-spacing-8) !important; }
.pt-10 { padding-top: var(--util-spacing-10) !important; }
.pt-12 { padding-top: var(--util-spacing-12) !important; }
.pt-16 { padding-top: var(--util-spacing-16) !important; }
.pt-20 { padding-top: var(--util-spacing-20) !important; }
.pt-24 { padding-top: var(--util-spacing-24) !important; }
.pt-32 { padding-top: var(--util-spacing-32) !important; }
.pr-0 { padding-right: var(--util-spacing-0) !important; }
.pr-1 { padding-right: var(--util-spacing-1) !important; }
.pr-2 { padding-right: var(--util-spacing-2) !important; }
.pr-3 { padding-right: var(--util-spacing-3) !important; }
.pr-4 { padding-right: var(--util-spacing-4) !important; }
.pr-5 { padding-right: var(--util-spacing-5) !important; }
.pr-6 { padding-right: var(--util-spacing-6) !important; }
.pr-8 { padding-right: var(--util-spacing-8) !important; }
.pr-10 { padding-right: var(--util-spacing-10) !important; }
.pr-12 { padding-right: var(--util-spacing-12) !important; }
.pb-0 { padding-bottom: var(--util-spacing-0) !important; }
.pb-1 { padding-bottom: var(--util-spacing-1) !important; }
.pb-2 { padding-bottom: var(--util-spacing-2) !important; }
.pb-3 { padding-bottom: var(--util-spacing-3) !important; }
.pb-4 { padding-bottom: var(--util-spacing-4) !important; }
.pb-5 { padding-bottom: var(--util-spacing-5) !important; }
.pb-6 { padding-bottom: var(--util-spacing-6) !important; }
.pb-8 { padding-bottom: var(--util-spacing-8) !important; }
.pb-10 { padding-bottom: var(--util-spacing-10) !important; }
.pb-12 { padding-bottom: var(--util-spacing-12) !important; }
.pb-16 { padding-bottom: var(--util-spacing-16) !important; }
.pb-20 { padding-bottom: var(--util-spacing-20) !important; }
.pb-24 { padding-bottom: var(--util-spacing-24) !important; }
.pb-32 { padding-bottom: var(--util-spacing-32) !important; }
.pl-0 { padding-left: var(--util-spacing-0) !important; }
.pl-1 { padding-left: var(--util-spacing-1) !important; }
.pl-2 { padding-left: var(--util-spacing-2) !important; }
.pl-3 { padding-left: var(--util-spacing-3) !important; }
.pl-4 { padding-left: var(--util-spacing-4) !important; }
.pl-5 { padding-left: var(--util-spacing-5) !important; }
.pl-6 { padding-left: var(--util-spacing-6) !important; }
.pl-8 { padding-left: var(--util-spacing-8) !important; }
.pl-10 { padding-left: var(--util-spacing-10) !important; }
.pl-12 { padding-left: var(--util-spacing-12) !important; }
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-table { display: table !important; }
.d-table-row { display: table-row !important; }
.d-table-cell { display: table-cell !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.d-inline-grid { display: inline-grid !important; }
.d-contents { display: contents !important; }
.d-list-item { display: list-item !important; }
.flex-row { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-col { flex-direction: column !important; }
.flex-col-reverse { flex-direction: column-reverse !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.justify-evenly { justify-content: space-evenly !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-center { align-items: center !important; }
.items-baseline { align-items: baseline !important; }
.items-stretch { align-items: stretch !important; }
.content-start { align-content: flex-start !important; }
.content-end { align-content: flex-end !important; }
.content-center { align-content: center !important; }
.content-between { align-content: space-between !important; }
.content-around { align-content: space-around !important; }
.content-evenly { align-content: space-evenly !important; }
.content-stretch { align-content: stretch !important; }
.self-auto { align-self: auto !important; }
.self-start { align-self: flex-start !important; }
.self-end { align-self: flex-end !important; }
.self-center { align-self: center !important; }
.self-stretch { align-self: stretch !important; }
.self-baseline { align-self: baseline !important; }
.flex-1 { flex: 1 1 0% !important; }
.flex-auto { flex: 1 1 auto !important; }
.flex-initial { flex: 0 1 auto !important; }
.flex-none { flex: none !important; }
.grow { flex-grow: 1 !important; }
.grow-0 { flex-grow: 0 !important; }
.shrink { flex-shrink: 1 !important; }
.shrink-0 { flex-shrink: 0 !important; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
.grid-cols-none { grid-template-columns: none !important; }
.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)) !important; }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)) !important; }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)) !important; }
.grid-rows-none { grid-template-rows: none !important; }
.col-auto { grid-column: auto !important; }
.col-span-1 { grid-column: span 1 / span 1 !important; }
.col-span-2 { grid-column: span 2 / span 2 !important; }
.col-span-3 { grid-column: span 3 / span 3 !important; }
.col-span-4 { grid-column: span 4 / span 4 !important; }
.col-span-5 { grid-column: span 5 / span 5 !important; }
.col-span-6 { grid-column: span 6 / span 6 !important; }
.col-span-full { grid-column: 1 / -1 !important; }
.row-auto { grid-row: auto !important; }
.row-span-1 { grid-row: span 1 / span 1 !important; }
.row-span-2 { grid-row: span 2 / span 2 !important; }
.row-span-3 { grid-row: span 3 / span 3 !important; }
.row-span-4 { grid-row: span 4 / span 4 !important; }
.row-span-5 { grid-row: span 5 / span 5 !important; }
.row-span-6 { grid-row: span 6 / span 6 !important; }
.row-span-full { grid-row: 1 / -1 !important; }
.gap-0 { gap: var(--util-spacing-0) !important; }
.gap-1 { gap: var(--util-spacing-1) !important; }
.gap-2 { gap: var(--util-spacing-2) !important; }
.gap-3 { gap: var(--util-spacing-3) !important; }
.gap-4 { gap: var(--util-spacing-4) !important; }
.gap-5 { gap: var(--util-spacing-5) !important; }
.gap-6 { gap: var(--util-spacing-6) !important; }
.gap-8 { gap: var(--util-spacing-8) !important; }
.gap-10 { gap: var(--util-spacing-10) !important; }
.gap-12 { gap: var(--util-spacing-12) !important; }
.gap-x-0 { column-gap: var(--util-spacing-0) !important; }
.gap-x-1 { column-gap: var(--util-spacing-1) !important; }
.gap-x-2 { column-gap: var(--util-spacing-2) !important; }
.gap-x-3 { column-gap: var(--util-spacing-3) !important; }
.gap-x-4 { column-gap: var(--util-spacing-4) !important; }
.gap-x-5 { column-gap: var(--util-spacing-5) !important; }
.gap-x-6 { column-gap: var(--util-spacing-6) !important; }
.gap-x-8 { column-gap: var(--util-spacing-8) !important; }
.gap-y-0 { row-gap: var(--util-spacing-0) !important; }
.gap-y-1 { row-gap: var(--util-spacing-1) !important; }
.gap-y-2 { row-gap: var(--util-spacing-2) !important; }
.gap-y-3 { row-gap: var(--util-spacing-3) !important; }
.gap-y-4 { row-gap: var(--util-spacing-4) !important; }
.gap-y-5 { row-gap: var(--util-spacing-5) !important; }
.gap-y-6 { row-gap: var(--util-spacing-6) !important; }
.gap-y-8 { row-gap: var(--util-spacing-8) !important; }
.static { position: static !important; }
.fixed { position: fixed !important; }
.absolute { position: absolute !important; }
.relative { position: relative !important; }
.sticky { position: sticky !important; }
.inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
.inset-x-0 { right: 0 !important; left: 0 !important; }
.inset-y-0 { top: 0 !important; bottom: 0 !important; }
.top-0 { top: 0 !important; }
.top-1 { top: var(--util-spacing-1) !important; }
.top-2 { top: var(--util-spacing-2) !important; }
.top-3 { top: var(--util-spacing-3) !important; }
.top-4 { top: var(--util-spacing-4) !important; }
.top-auto { top: auto !important; }
.right-0 { right: 0 !important; }
.right-1 { right: var(--util-spacing-1) !important; }
.right-2 { right: var(--util-spacing-2) !important; }
.right-3 { right: var(--util-spacing-3) !important; }
.right-4 { right: var(--util-spacing-4) !important; }
.right-auto { right: auto !important; }
.bottom-0 { bottom: 0 !important; }
.bottom-1 { bottom: var(--util-spacing-1) !important; }
.bottom-2 { bottom: var(--util-spacing-2) !important; }
.bottom-3 { bottom: var(--util-spacing-3) !important; }
.bottom-4 { bottom: var(--util-spacing-4) !important; }
.bottom-auto { bottom: auto !important; }
.left-0 { left: 0 !important; }
.left-1 { left: var(--util-spacing-1) !important; }
.left-2 { left: var(--util-spacing-2) !important; }
.left-3 { left: var(--util-spacing-3) !important; }
.left-4 { left: var(--util-spacing-4) !important; }
.left-auto { left: auto !important; }
.w-0 { width: 0 !important; }
.w-1 { width: var(--util-spacing-1) !important; }
.w-2 { width: var(--util-spacing-2) !important; }
.w-3 { width: var(--util-spacing-3) !important; }
.w-4 { width: var(--util-spacing-4) !important; }
.w-5 { width: var(--util-spacing-5) !important; }
.w-6 { width: var(--util-spacing-6) !important; }
.w-8 { width: var(--util-spacing-8) !important; }
.w-10 { width: var(--util-spacing-10) !important; }
.w-12 { width: var(--util-spacing-12) !important; }
.w-16 { width: var(--util-spacing-16) !important; }
.w-20 { width: var(--util-spacing-20) !important; }
.w-24 { width: var(--util-spacing-24) !important; }
.w-32 { width: var(--util-spacing-32) !important; }
.w-auto { width: auto !important; }
.w-full { width: 100% !important; }
.w-screen { width: 100vw !important; }
.w-min { width: min-content !important; }
.w-max { width: max-content !important; }
.w-fit { width: fit-content !important; }
.w-1\/2 { width: 50% !important; }
.w-1\/3 { width: 33.333333% !important; }
.w-2\/3 { width: 66.666667% !important

/* === my-dashboard.css === */
.dashboard-content-wrapper {
padding: 20px;
background: #f8f9fa;
min-height: 600px;
}
.dashboard-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
gap: 20px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--stat-color, #667eea), transparent);
}
.stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.stat-card-primary {
--stat-color: #667eea;
}
.stat-card-success {
--stat-color: #43e97b;
}
.stat-card-warning {
--stat-color: #fa709a;
}
.stat-card-info {
--stat-color: #4facfe;
}
.stat-icon {
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
background: var(--stat-color, #667eea);
background: linear-gradient(135deg, var(--stat-color, #667eea), var(--stat-color, #667eea)cc);
color: white;
flex-shrink: 0;
}
.stat-content {
flex: 1;
}
.stat-label {
font-size: 14px;
color: #6b7280;
margin: 0 0 8px 0;
font-weight: 500;
font-family: 'Tajawal', Arial, sans-serif;
}
.stat-value {
font-size: 32px;
font-weight: 700;
color: #1f2937;
margin: 0 0 8px 0;
font-family: 'Tajawal', Arial, sans-serif;
}
.stat-change {
font-size: 13px;
color: #6b7280;
display: flex;
align-items: center;
gap: 6px;
font-family: 'Tajawal', Arial, sans-serif;
}
.stat-change.positive {
color: #10b981;
}
.stat-change.negative {
color: #dc2626;
}
.stat-change i {
font-size: 12px;
}
.dashboard-charts-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.chart-container {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 2px solid #f3f4f6;
}
.chart-title {
font-size: 16px;
font-weight: 700;
color: #1f2937;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
font-family: 'Tajawal', Arial, sans-serif;
}
.chart-title i {
color: #667eea;
}
.chart-controls {
display: flex;
gap: 8px;
}
.chart-btn {
padding: 6px 16px;
border: 1px solid #e5e7eb;
background: white;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
color: #6b7280;
cursor: pointer;
transition: all 0.2s;
font-family: 'Tajawal', Arial, sans-serif;
}
.chart-btn:hover {
border-color: #667eea;
color: #667eea;
}
.chart-btn.active {
background: #667eea;
border-color: #667eea;
color: white;
}
.chart-body {
min-height: 200px;
position: relative;
}
.chart-legend {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-family: 'Tajawal', Arial, sans-serif;
}
.legend-color {
width: 12px;
height: 12px;
border-radius: 3px;
}
.legend-label {
color: #6b7280;
flex: 1;
}
.legend-value {
font-weight: 700;
color: #1f2937;
}
.dashboard-activity-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.activity-panel {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.panel-header {
padding: 20px 24px;
border-bottom: 2px solid #f3f4f6;
display: flex;
justify-content: space-between;
align-items: center;
}
.panel-title {
font-size: 16px;
font-weight: 700;
color: #1f2937;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
font-family: 'Tajawal', Arial, sans-serif;
}
.panel-title i {
color: #667eea;
}
.panel-link {
font-size: 13px;
color: #667eea;
text-decoration: none;
font-weight: 600;
font-family: 'Tajawal', Arial, sans-serif;
transition: color 0.2s;
}
.panel-link:hover {
color: #4f5bd5;
text-decoration: underline;
}
.panel-body {
padding: 20px 24px;
max-height: 400px;
overflow-y: auto;
}
.activity-list,
.tasks-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.activity-item {
display: flex;
align-items: center;
gap: 16px;
padding: 12px;
border-radius: 8px;
transition: background 0.2s;
}
.activity-item:hover {
background: #f9fafb;
}
.activity-icon {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.activity-content {
flex: 1;
min-width: 0;
}
.activity-title {
font-size: 14px;
font-weight: 600;
color: #1f2937;
margin: 0 0 4px 0;
font-family: 'Tajawal', Arial, sans-serif;
}
.activity-subtitle {
font-size: 12px;
color: #6b7280;
margin: 0;
font-family: 'Tajawal', Arial, sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.activity-time {
font-size: 11px;
color: #9ca3af;
font-weight: 500;
flex-shrink: 0;
font-family: 'Tajawal', Arial, sans-serif;
}
.task-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 8px;
border: 1px solid #e5e7eb;
transition: all 0.2s;
position: relative;
overflow: hidden;
}
.task-item:hover {
border-color: #667eea;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}
.task-priority {
width: 4px;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
.task-content {
flex: 1;
min-width: 0;
padding-right: 8px;
}
.task-title {
font-size: 14px;
font-weight: 600;
color: #1f2937;
margin: 0 0 6px 0;
font-family: 'Tajawal', Arial, sans-serif;
}
.task-client {
font-size: 12px;
color: #6b7280;
margin: 0;
display: flex;
align-items: center;
gap: 6px;
font-family: 'Tajawal', Arial, sans-serif;
}
.task-client i {
font-size: 11px;
}
.task-due {
font-size: 12px;
color: #6b7280;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
font-family: 'Tajawal', Arial, sans-serif;
}
.task-due i {
font-size: 11px;
}
.dashboard-metrics-section {
background: white;
border-radius: 12px;
padding: 24px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.section-header {
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 2px solid #f3f4f6;
}
.section-title {
font-size: 18px;
font-weight: 700;
color: #1f2937;
margin: 0;
display: flex;
align-items: center;
gap: 12px;
font-family: 'Tajawal', Arial, sans-serif;
}
.section-title i {
color: #667eea;
font-size: 20px;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
}
.metric-item {
display: flex;
align-items: center;
gap: 16px;
}
.metric-icon {
width: 50px;
height: 50px;
border-radius: 10px;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: white;
flex-shrink: 0;
}
.metric-details {
flex: 1;
}
.metric-label {
font-size: 13px;
color: #6b7280;
margin: 0 0 8px 0;
font-weight: 500;
font-family: 'Tajawal', Arial, sans-serif;
}
.metric-value {
font-size: 24px;
font-weight: 700;
color: #1f2937;
margin: 0;
font-family: 'Tajawal', Arial, sans-serif;
}
.metric-subtitle {
font-size: 11px;
color: #9ca3af;
margin: 4px 0 0 0;
font-family: 'Tajawal', Arial, sans-serif;
}
.metric-value-bar {
width: 100%;
height: 6px;
background: #e5e7eb;
border-radius: 3px;
overflow: hidden;
margin: 8px 0;
}
.bar-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
transition: width 0.6s ease;
}
.metric-stars {
display: flex;
gap: 4px;
color: #fbbf24;
font-size: 16px;
margin: 8px 0;
}
.dashboard-ai-insights {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
padding: 24px;
color: white;
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}
.ai-insights-header {
margin-bottom: 20px;
}
.insights-title {
font-size: 18px;
font-weight: 700;
margin: 0;
display: flex;
align-items: center;
gap: 12px;
font-family: 'Tajawal', Arial, sans-serif;
}
.ai-badge {
padding: 4px 10px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
}
.insights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
.insight-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
padding: 20px;
display: flex;
gap: 16px;
transition: all 0.3s;
}
.insight-card:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
.insight-icon {
width: 40px;
height: 40px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.insight-content {
flex: 1;
}
.insight-title {
font-size: 14px;
font-weight: 700;
margin: 0 0 8px 0;
font-family: 'Tajawal', Arial, sans-serif;
}
.insight-text {
font-size: 13px;
line-height: 1.6;
margin: 0;
opacity: 0.95;
font-family: 'Tajawal', Arial, sans-serif;
}
.loading-skeleton {
display: inline-block;
min-width: 60px;
height: 1em;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
border-radius: 4px;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.loading-state {
text-align: center;
padding: 40px 20px;
color: #9ca3af;
}
.loading-state i {
font-size: 32px;
margin-bottom: 12px;
display: block;
}
.loading-state p {
margin: 0;
font-size: 14px;
font-family: 'Tajawal', Arial, sans-serif;
}
.empty-state {
text-align: center;
padding: 80px 20px;
}
.empty-icon {
font-size: 80px;
color: #cbd5e1;
margin-bottom: 24px;
}
.empty-title {
font-size: 24px;
font-weight: 700;
color: #1f2937;
margin: 0 0 12px 0;
font-family: 'Tajawal', Arial, sans-serif;
}
.empty-message {
font-size: 16px;
color: #6b7280;
margin: 0 0 32px 0;
line-height: 1.8;
font-family: 'Tajawal', Arial, sans-serif;
}
.btn-primary {
padding: 12px 32px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Tajawal', Arial, sans-serif;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}
@media (max-width: 768px) {
.dashboard-stats-grid,
.dashboard-charts-row,
.dashboard-activity-row {
grid-template-columns: 1fr;
}
.metrics-grid {
grid-template-columns: 1fr;
}
.insights-grid {
grid-template-columns: 1fr;
}
.stat-card {
padding: 20px;
}
.stat-icon {
width: 50px;
height: 50px;
font-size: 24px;
}
.stat-value {
font-size: 28px;
}
.chart-container {
padding: 20px;
}
.dashboard-content-wrapper {
padding: 16px;
}
}

/* === search-results-counter.css === */
.tp-search-results-counter {
display: none;
margin-bottom: 16px;
padding: 12px 16px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
transition: all 0.3s ease;
}
body.dark-mode .tp-search-results-counter {
background: #1f2937;
border-color: #374151;
}
.tp-search-results-counter.tp-counter-visible {
display: block;
animation: counterSlideIn 0.3s ease;
}
.tp-search-results-counter.tp-counter-hidden {
display: none;
}
.tp-search-results-counter.tp-counter-all {
background: #eff6ff;
border-color: #bfdbfe;
color: #1e40af;
}
body.dark-mode .tp-search-results-counter.tp-counter-all {
background: #1e3a8a;
border-color: #3b82f6;
color: #dbeafe;
}
.tp-search-results-counter.tp-counter-filtered {
background: #fef3c7;
border-color: #fcd34d;
color: #92400e;
}
body.dark-mode .tp-search-results-counter.tp-counter-filtered {
background: #78350f;
border-color: #f59e0b;
color: #fef3c7;
}
.tp-search-results-counter.tp-counter-empty {
background: #fee2e2;
border-color: #fca5a5;
color: #991b1b;
}
body.dark-mode .tp-search-results-counter.tp-counter-empty {
background: #7f1d1d;
border-color: #ef4444;
color: #fee2e2;
}
.tp-counter-content {
display: flex;
align-items: center;
gap: 8px;
}
.tp-counter-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #3b82f6;
color: #ffffff;
border-radius: 16px;
font-size: 13px;
font-weight: 500;
}
.tp-counter-badge .tp-counter-number {
font-weight: 700;
font-size: 14px;
}
.tp-counter-badge .tp-counter-label {
opacity: 0.9;
}
.tp-counter-detailed {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
.tp-counter-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: rgba(59, 130, 246, 0.1);
border-radius: 6px;
color: #3b82f6;
font-size: 14px;
flex-shrink: 0;
}
body.dark-mode .tp-counter-icon {
background: rgba(59, 130, 246, 0.2);
color: #60a5fa;
}
.tp-counter-text {
display: flex;
align-items: baseline;
gap: 6px;
flex: 1;
flex-wrap: wrap;
}
.tp-counter-label {
color: #6b7280;
font-size: 13px;
}
body.dark-mode .tp-counter-label {
color: #9ca3af;
}
.tp-counter-current,
.tp-counter-number {
font-weight: 700;
font-size: 16px;
color: #111827;
font-variant-numeric: tabular-nums;
}
body.dark-mode .tp-counter-current,
body.dark-mode .tp-counter-number {
color: #f9fafb;
}
.tp-counter-separator {
color: #9ca3af;
font-size: 13px;
}
.tp-counter-total {
font-weight: 600;
font-size: 14px;
color: #6b7280;
font-variant-numeric: tabular-nums;
}
body.dark-mode .tp-counter-total {
color: #d1d5db;
}
.tp-counter-suffix {
color: #6b7280;
font-size: 13px;
}
body.dark-mode .tp-counter-suffix {
color: #9ca3af;
}
.tp-counter-percentage {
margin-left: auto;
padding: 4px 10px;
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
body.dark-mode .tp-counter-percentage {
background: rgba(59, 130, 246, 0.2);
color: #60a5fa;
}
.tp-search-results-counter.tp-counter-filtered .tp-counter-icon {
background: rgba(245, 158, 11, 0.1);
color: #f59e0b;
}
body.dark-mode .tp-search-results-counter.tp-counter-filtered .tp-counter-icon {
background: rgba(245, 158, 11, 0.2);
color: #fbbf24;
}
.tp-search-results-counter.tp-counter-filtered .tp-counter-current {
color: #92400e;
}
body.dark-mode .tp-search-results-counter.tp-counter-filtered .tp-counter-current {
color: #fef3c7;
}
.tp-search-results-counter.tp-counter-empty .tp-counter-icon {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
body.dark-mode .tp-search-results-counter.tp-counter-empty .tp-counter-icon {
background: rgba(239, 68, 68, 0.2);
color: #f87171;
}
.tp-search-results-counter.tp-counter-empty .tp-counter-current {
color: #991b1b;
}
body.dark-mode .tp-search-results-counter.tp-counter-empty .tp-counter-current {
color: #fee2e2;
}
@keyframes counterSlideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes numberFlash {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
.tp-counter-current[data-animating],
.tp-counter-number[data-animating] {
animation: numberFlash 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
.tp-search-results-counter,
.tp-counter-current,
.tp-counter-number,
.tp-counter-badge {
animation: none;
transition: none;
}
}
@media (max-width: 767px) {
.tp-search-results-counter {
padding: 10px 12px;
font-size: 13px;
margin-bottom: 12px;
}
.tp-counter-detailed {
gap: 8px;
}
.tp-counter-icon {
width: 28px;
height: 28px;
font-size: 12px;
}
.tp-counter-current,
.tp-counter-number {
font-size: 15px;
}
.tp-counter-label,
.tp-counter-separator,
.tp-counter-suffix {
font-size: 12px;
}
.tp-counter-percentage {
padding: 3px 8px;
font-size: 11px;
}
@media (max-width: 480px) {
.tp-counter-text {
flex-wrap: wrap;
}
.tp-counter-percentage {
margin-left: 0;
margin-top: 4px;
}
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.tp-search-results-counter {
padding: 11px 14px;
}
}
.dataTables_wrapper > .tp-search-results-counter,
.dataTables_wrapper > #search-results-counter {
margin-top: 0;
margin-bottom: 16px;
}
.team-portal-filters + .tp-search-results-counter,
.team-portal-filters + #search-results-counter {
margin-top: 12px;
}
.tp-search-results-counter:focus-within {
outline: 2px solid var(--focus-ring-color, #3b82f6);
outline-offset: 2px;
}
.tp-counter-sr-only {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
@media (prefers-contrast: high) {
.tp-search-results-counter {
border-width: 2px;
}
.tp-counter-current,
.tp-counter-number {
font-weight: 800;
}
.tp-counter-icon {
border: 2px solid currentColor;
}
}
@media print {
.tp-search-results-counter {
page-break-inside: avoid;
border-color: #000;
background: #fff !important;
color: #000 !important;
}
.tp-counter-icon {
display: none;
}
.tp-counter-percentage {
background: #f0f0f0 !important;
color: #000 !important;
}
}
.tp-counter-inline {
display: inline-flex;
margin: 0;
padding: 6px 12px;
border-radius: 16px;
font-size: 12px;
}
.tp-counter-inline .tp-counter-icon {
width: 20px;
height: 20px;
font-size: 10px;
}
.tp-counter-inline .tp-counter-current {
font-size: 13px;
}
.tp-counter-sticky {
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
body.dark-mode .tp-counter-sticky {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* === active-filters-indicator.css === */
.tp-active-filters-indicator {
margin-bottom: 20px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 16px;
transition: all 0.3s ease;
}
body.dark-mode .tp-active-filters-indicator {
background: #1f2937;
border-color: #374151;
}
.tp-active-filters-indicator.tp-filters-empty {
background: #f9fafb;
border-style: dashed;
}
body.dark-mode .tp-active-filters-indicator.tp-filters-empty {
background: #111827;
}
.tp-filters-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #e5e7eb;
}
body.dark-mode .tp-filters-header {
border-bottom-color: #374151;
}
.tp-filters-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: #374151;
}
body.dark-mode .tp-filters-title {
color: #d1d5db;
}
.tp-filters-title i {
color: #6b7280;
font-size: 13px;
}
body.dark-mode .tp-filters-title i {
color: #9ca3af;
}
.tp-filters-count {
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: #dbeafe;
color: #1e40af;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
body.dark-mode .tp-filters-count {
background: #1e3a8a;
color: #dbeafe;
}
.tp-clear-all-btn {
margin-left: auto;
padding: 6px 14px;
background: transparent;
border: 1px solid #d1d5db;
border-radius: 6px;
color: #6b7280;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.tp-clear-all-btn:hover:not(:disabled) {
background: #fef2f2;
border-color: #fca5a5;
color: #dc2626;
}
.tp-clear-all-btn:focus {
outline: 2px solid var(--focus-ring-color, #3b82f6);
outline-offset: 2px;
}
.tp-clear-all-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
body.dark-mode .tp-clear-all-btn {
border-color: #4b5563;
color: #9ca3af;
}
body.dark-mode .tp-clear-all-btn:hover:not(:disabled) {
background: #7f1d1d;
border-color: #ef4444;
color: #fca5a5;
}
.tp-clear-all-btn i {
font-size: 12px;
}
.tp-filters-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
min-height: 40px;
}
.tp-filters-empty-state {
display: none;
width: 100%;
text-align: center;
padding: 20px;
color: #9ca3af;
font-size: 13px;
gap: 8px;
align-items: center;
justify-content: center;
}
.tp-filters-empty .tp-filters-empty-state {
display: flex;
}
.tp-filters-empty-state i {
color: #d1d5db;
font-size: 16px;
}
body.dark-mode .tp-filters-empty-state {
color: #6b7280;
}
body.dark-mode .tp-filters-empty-state i {
color: #4b5563;
}
.tp-filter-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border: 1px solid #bfdbfe;
border-radius: 16px;
font-size: 13px;
line-height: 1.4;
transition: all 0.2s ease;
max-width: 300px;
}
body.dark-mode .tp-filter-pill {
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
border-color: #3b82f6;
}
.tp-filter-pill:hover {
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
transform: translateY(-1px);
}
.tp-filter-pill[data-filter-type="select"] {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-color: #fcd34d;
}
body.dark-mode .tp-filter-pill[data-filter-type="select"] {
background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
border-color: #f59e0b;
}
.tp-filter-pill[data-filter-type="date"] {
background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
border-color: #d8b4fe;
}
body.dark-mode .tp-filter-pill[data-filter-type="date"] {
background: linear-gradient(135deg, #581c87 0%, #6b21a8 100%);
border-color: #a855f7;
}
.tp-filter-pill[data-filter-type="search"],
.tp-filter-pill[data-filter-key="global_search"] {
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
border-color: #86efac;
}
body.dark-mode .tp-filter-pill[data-filter-type="search"],
body.dark-mode .tp-filter-pill[data-filter-key="global_search"] {
background: linear-gradient(135deg, #14532d 0%, #166534 100%);
border-color: #22c55e;
}
.tp-pill-label {
font-weight: 600;
color: #1e40af;
white-space: nowrap;
}
body.dark-mode .tp-pill-label {
color: #dbeafe;
}
.tp-filter-pill[data-filter-type="select"] .tp-pill-label {
color: #92400e;
}
body.dark-mode .tp-filter-pill[data-filter-type="select"] .tp-pill-label {
color: #fef3c7;
}
.tp-filter-pill[data-filter-type="date"] .tp-pill-label {
color: #6b21a8;
}
body.dark-mode .tp-filter-pill[data-filter-type="date"] .tp-pill-label {
color: #e9d5ff;
}
.tp-filter-pill[data-filter-type="search"] .tp-pill-label,
.tp-filter-pill[data-filter-key="global_search"] .tp-pill-label {
color: #166534;
}
body.dark-mode .tp-filter-pill[data-filter-type="search"] .tp-pill-label,
body.dark-mode .tp-filter-pill[data-filter-key="global_search"] .tp-pill-label {
color: #dcfce7;
}
.tp-pill-value {
color: #374151;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.dark-mode .tp-pill-value {
color: #f3f4f6;
}
.tp-pill-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
margin: 0;
background: rgba(0, 0, 0, 0.1);
border: none;
border-radius: 50%;
color: #6b7280;
font-size: 11px;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.tp-pill-remove:hover {
background: #dc2626;
color: #ffffff;
transform: scale(1.1);
}
.tp-pill-remove:focus {
outline: 2px solid var(--focus-ring-color, #3b82f6);
outline-offset: 2px;
}
body.dark-mode .tp-pill-remove {
background: rgba(255, 255, 255, 0.1);
color: #d1d5db;
}
body.dark-mode .tp-pill-remove:hover {
background: #ef4444;
color: #ffffff;
}
@keyframes pillSlideIn {
from {
opacity: 0;
transform: translateX(-10px) scale(0.9);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
.tp-filter-pill.tp-pill-enter {
animation: pillSlideIn 0.3s ease;
}
@keyframes pillSlideOut {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.8);
}
}
.tp-filter-pill.tp-pill-exit {
animation: pillSlideOut 0.3s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
.tp-filter-pill,
.tp-clear-all-btn,
.tp-pill-remove {
animation: none;
transition: none;
}
.tp-filter-pill:hover {
transform: none;
}
.tp-pill-remove:hover {
transform: none;
}
}
@media (max-width: 767px) {
.tp-active-filters-indicator {
padding: 12px;
margin-bottom: 16px;
}
.tp-filters-header {
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
padding-bottom: 10px;
}
.tp-filters-title {
font-size: 13px;
}
.tp-filters-count {
padding: 3px 8px;
font-size: 11px;
}
.tp-clear-all-btn {
padding: 5px 12px;
font-size: 12px;
width: 100%;
justify-content: center;
margin-left: 0;
}
.tp-filters-container {
gap: 6px;
}
.tp-filter-pill {
font-size: 12px;
padding: 5px 8px;
max-width: 100%;
}
.tp-pill-value {
max-width: 140px;
}
.tp-pill-remove {
width: 18px;
height: 18px;
font-size: 10px;
}
}
@media (max-width: 480px) {
.tp-filter-pill {
width: 100%;
justify-content: space-between;
}
.tp-pill-value {
max-width: none;
flex: 1;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.tp-active-filters-indicator {
padding: 14px;
}
}
.tp-filters-container.tp-filters-scrollable {
max-height: 150px;
overflow-y: auto;
padding-right: 8px;
}
.tp-filters-container.tp-filters-scrollable::-webkit-scrollbar {
width: 6px;
}
.tp-filters-container.tp-filters-scrollable::-webkit-scrollbar-track {
background: #f3f4f6;
border-radius: 3px;
}
.tp-filters-container.tp-filters-scrollable::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 3px;
}
.tp-filters-container.tp-filters-scrollable::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
}
body.dark-mode .tp-filters-container.tp-filters-scrollable::-webkit-scrollbar-track {
background: #374151;
}
body.dark-mode .tp-filters-container.tp-filters-scrollable::-webkit-scrollbar-thumb {
background: #6b7280;
}
body.dark-mode .tp-filters-container.tp-filters-scrollable::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
}
.tp-active-filters-indicator:focus-within {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
@media (prefers-contrast: high) {
.tp-active-filters-indicator {
border-width: 2px;
border-color: #000000;
}
.tp-filter-pill {
border-width: 2px;
}
.tp-pill-label {
font-weight: 700;
}
.tp-clear-all-btn {
border-width: 2px;
}
}
.tp-pill-remove {
min-width: 44px;
min-height: 44px;
}
@media (min-width: 768px) {
.tp-pill-remove {
min-width: 20px;
min-height: 20px;
}
}
.dataTables_wrapper > .tp-active-filters-indicator,
.dataTables_wrapper > #active-filters-indicator {
margin-top: 0;
margin-bottom: 16px;
}
.team-portal-filters + .tp-active-filters-indicator,
.advanced-search + .tp-active-filters-indicator {
margin-top: 12px;
}
@media print {
.tp-active-filters-indicator {
page-break-inside: avoid;
border-color: #000;
background: #fff !important;
}
.tp-filter-pill {
background: #f0f0f0 !important;
border-color: #999 !important;
color: #000 !important;
}
.tp-pill-remove,
.tp-clear-all-btn {
display: none;
}
.tp-filters-empty-state {
display: none;
}
}
.tp-active-filters-indicator.tp-compact {
padding: 10px 12px;
}
.tp-active-filters-indicator.tp-compact .tp-filters-header {
margin-bottom: 8px;
padding-bottom: 8px;
}
.tp-active-filters-indicator.tp-compact .tp-filter-pill {
padding: 4px 8px;
font-size: 12px;
}
.tp-active-filters-indicator.tp-inline {
background: transparent;
border: none;
padding: 8px 0;
}
.tp-active-filters-indicator.tp-inline .tp-filters-header {
border-bottom: none;
padding-bottom: 0;
}