:root{--transition-speed: 300ms} html{scrollbar-gutter: stable} body, .card, button, input, select, textarea, table, th, td, nav, header, aside, section, div[class*="bg-"]{transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease, color var(--transition-speed) ease} ::-webkit-scrollbar{width: 8px;height: 8px} ::-webkit-scrollbar-track{background: transparent} ::-webkit-scrollbar-thumb{background: #cbd5e1;border-radius: 4px} .dark ::-webkit-scrollbar-thumb{background: #475569} ::-webkit-scrollbar-thumb:hover{background: #94a3b8} body.modal-open{overflow: hidden} .ai-summary-modal{z-index: 10000;overscroll-behavior: contain} input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear{display: none} #financeMonthSelector{scroll-behavior: smooth;position: relative;height: 40px;box-sizing: border-box} #financeMonthSelector::-webkit-calendar-picker-indicator{cursor: pointer;position: absolute;right: 8px;top: 50%;transform: translateY(-50%);opacity: 0.6;padding: 0;margin: 0;width: 16px;height: 16px;background-size: contain;background-repeat: no-repeat} #financeMonthSelector::-webkit-calendar-picker-indicator:hover{opacity: 1} #financeMonthSelector::-moz-calendar-picker-indicator{cursor: pointer;opacity: 0.6} #financeMonthSelector::-moz-calendar-picker-indicator:hover{opacity: 1} #financeMonthSelector::-webkit-datetime-edit{color: transparent} #financeMonthSelector::-webkit-datetime-edit-fields-wrapper{display: none} #financeMonthDisplay{} #financeMonthSelector:focus::-webkit-datetime-edit-month-field, #financeMonthSelector:focus::-webkit-datetime-edit-year-field{scroll-behavior: auto} @keyframes fadeIn{from{opacity: 0;transform: translateY(10px)} to{opacity: 1;transform: translateY(0)} } @keyframes slideIn{from{opacity: 0;transform: translateX(20px)} to{opacity: 1;transform: translateX(0)} } @keyframes pulse{0%, 100%{opacity: 1} 50%{opacity: 0.5} } @keyframes spin{from{transform: rotate(0deg)} to{transform: rotate(360deg)} } .animate-fade-in{animation: fadeIn 0.3s ease-out} .animate-slide-in{animation: slideIn 0.3s ease-out} .animate-pulse{animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite} select{-webkit-appearance: none !important;-moz-appearance: none !important;appearance: none !important;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;background-repeat: no-repeat !important;background-position: right 1rem center !important;background-size: 1rem !important;padding-right: 2rem !important} .dark select{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important} input[type="date"]::-webkit-calendar-picker-indicator{cursor: pointer;opacity: 0.6;transition: opacity 0.2s} input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity: 1} input:focus, select:focus, textarea:focus, button:focus{outline: none;ring: 2px;ring-color: #3b82f6} .weekly-day{aspect-ratio: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 0.75rem;cursor: pointer;transition: all 0.2s;border: 2px solid #e5e7eb} .dark .weekly-day{border-color: #4b5563} .weekly-day:hover{transform: scale(1.05)} .weekly-day.today{border: 2px solid #3b82f6} .weekly-day.has-entries{background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)} .dark .weekly-day.has-entries{background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%)} .weekly-day.complete{background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%)} .dark .weekly-day.complete{background: linear-gradient(135deg, #065f46 0%, #047857 100%)} .weekly-day.incomplete{background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%)} .dark .weekly-day.incomplete{background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%)} .weekly-day.weekend{background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);opacity: 0.7} .dark .weekly-day.weekend{background: linear-gradient(135deg, #374151 0%, #4b5563 100%);opacity: 0.7} .weekly-day.weekend .day-name, .weekly-day.weekend .day-hours{color: #9ca3af} .dark .weekly-day.weekend .day-name, .dark .weekly-day.weekend .day-hours{color: #6b7280} .weekly-day.holiday{background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);opacity: 0.7} .dark .weekly-day.holiday{background: linear-gradient(135deg, #374151 0%, #4b5563 100%);opacity: 0.7} .weekly-day.holiday .day-name, .weekly-day.holiday .day-hours{color: #9ca3af} .dark .weekly-day.holiday .day-name, .dark .weekly-day.holiday .day-hours{color: #6b7280} .weekly-day.holiday .holiday-name{font-size: 0.65rem;color: #ef4444;text-align: center;line-height: 1;margin-top: 2px;font-weight: 500} .dark .weekly-day.holiday .holiday-name{color: #f87171} @media (max-width: 640px){.weekly-day.holiday .holiday-name{font-size: 0.55rem} } .weekly-day.holiday-allowed{opacity: 1} .weekly-day.holiday-allowed .holiday-name{font-size: 0.65rem;color: #f59e0b;text-align: center;line-height: 1;margin-top: 2px;font-weight: 500} .dark .weekly-day.holiday-allowed .holiday-name{color: #fbbf24} @media (max-width: 640px){.weekly-day.holiday-allowed .holiday-name{font-size: 0.55rem} } .weekly-day.leave-pending{background: repeating-linear-gradient( 135deg, #fef3c7 0px, #fef3c7 8px, #fde68a 8px, #fde68a 16px );border: 1px dashed #f59e0b;opacity: 1} .dark .weekly-day.leave-pending{background: repeating-linear-gradient( 135deg, #78350f 0px, #78350f 8px, #92400e 8px, #92400e 16px );border-color: #fbbf24} .weekly-day.leave-pending .day-name, .weekly-day.leave-pending .day-hours{color: #92400e} .dark .weekly-day.leave-pending .day-name, .dark .weekly-day.leave-pending .day-hours{color: #fde68a} .weekly-day.leave-pending .holiday-name{font-size: 0.65rem;color: #92400e;text-align: center;line-height: 1;margin-top: 2px;font-weight: 500} .dark .weekly-day.leave-pending .holiday-name{color: #fde68a} @media (max-width: 640px){.weekly-day.leave-pending .holiday-name{font-size: 0.55rem} } .weekly-day.leave-pending-worked{background: repeating-linear-gradient( 135deg, #d1fae5 0px, #d1fae5 8px, #fde68a 8px, #fde68a 16px );border: 1px dashed #f59e0b;opacity: 1} .dark .weekly-day.leave-pending-worked{background: repeating-linear-gradient( 135deg, #064e3b 0px, #064e3b 8px, #92400e 8px, #92400e 16px );border-color: #fbbf24} .weekly-day.leave-pending-worked .day-name{color: #92400e} .weekly-day.leave-pending-worked .day-hours{color: #065f46} .dark .weekly-day.leave-pending-worked .day-name{color: #fde68a} .dark .weekly-day.leave-pending-worked .day-hours{color: #6ee7b7} .weekly-day.leave-pending-worked .holiday-name{font-size: 0.65rem;color: #92400e;text-align: center;line-height: 1;margin-top: 2px;font-weight: 500} .dark .weekly-day.leave-pending-worked .holiday-name{color: #fde68a} @media (max-width: 640px){.weekly-day.leave-pending-worked .holiday-name{font-size: 0.55rem} } #toastContainer{z-index: 11000} #dashboardView, #timesheetView, .timesheet-table-scroll{min-width: 0;max-width: 100%} .timesheet-table-scroll{width: 100%;overflow-x: auto;overscroll-behavior-x: contain} .toast{display: flex;align-items: center;gap: 0.75rem;padding: 1rem 1.25rem;border-radius: 0.75rem;box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);animation: slideIn 0.3s ease-out;max-width: 400px} .toast.success{background: #ecfdf5;border: 1px solid #a7f3d0;color: #065f46} .dark .toast.success{background: #064e3b;border-color: #059669;color: #d1fae5} .toast.error{background: #fef2f2;border: 1px solid #fecaca;color: #991b1b} .dark .toast.error{background: #7f1d1d;border-color: #dc2626;color: #fee2e2} .toast.info{background: #eff6ff;border: 1px solid #bfdbfe;color: #1e40af} .dark .toast.info{background: #1e3a8a;border-color: #3b82f6;color: #dbeafe} .skeleton{background: linear-gradient( 90deg, #e2e8f0 25%, #cbd5e1 50%, #e2e8f0 75% );background-size: 200% 100%;animation: loading 1.5s infinite} .dark .skeleton{background: linear-gradient( 90deg, #334155 25%, #475569 50%, #334155 75% );background-size: 200% 100%} @keyframes loading{0%{background-position: 200% 0} 100%{background-position: -200% 0} } table{border-collapse: collapse} tbody tr{transition: background-color 0.15s} tbody tr:hover{background-color: #f8fafc} .dark tbody tr:hover{background-color: #1e293b} button:disabled{opacity: 0.5;cursor: not-allowed} button:active:not(:disabled){transform: scale(0.98)} #togglePasswordBtn:active:not(:disabled){transform: none !important} .nav-btn{position: relative} .nav-btn::after{content: '';position: absolute;bottom: -2px;left: 50%;width: 0;height: 2px;background: #3b82f6;transition: all 0.2s;transform: translateX(-50%)} .nav-btn:hover::after, .nav-btn.active::after{width: 80%} .nav-dropdown-item::after{display: none} .nav-dropdown-item.bg-primary-100{border-left: 3px solid #3b82f6} .dark .nav-dropdown-item.dark\:bg-primary-900{border-left: 3px solid #60a5fa} .nav-more-chevron{transition: transform 0.2s ease} .nav-more-chevron.rotate-180{transform: rotate(180deg)} .nav-dropdown-enter{animation: navDropdownEnter 0.15s ease-out} .topbar-picker-enter{animation: themePickerIn 0.14s ease-out} .cv-import-file-input{min-height: 42px;padding: 0.25rem 0.75rem !important;line-height: 1} .cv-import-file-input::file-selector-button{height: 32px;margin: 0 0.75rem 0 0;padding: 0 0.65rem;border: 0;border-radius: 0.375rem;vertical-align: middle;font: inherit;line-height: 1} @keyframes navDropdownEnter{from{opacity: 0;transform: translateY(-8px)} to{opacity: 1;transform: translateY(0)} } .nav-more-btn.bg-primary-100::after, .nav-more-btn.dark\:bg-primary-900::after{width: 80%} @media (max-width: 640px){.weekly-day{aspect-ratio: auto;min-height: 80px;padding: 0.5rem} .weekly-day .day-name{font-size: 0.75rem} .weekly-day .day-hours{font-size: 0.875rem} } @media (pointer: coarse){button, a, input, select{min-height: 44px} } #languageSelector{min-width: 60px;text-align: left;font-weight: 600;cursor: pointer;transition: all 0.2s ease} #languageSelector:hover{border-color: #3b82f6} #languageSelector option{font-weight: 500} .dark #languageSelector{background-color: #374151;border-color: #4b5563;color: #f3f4f6} .dark #languageSelector:hover{border-color: #60a5fa} [dir="rtl"]{direction: rtl} [dir="rtl"] .text-left{text-align: right} [dir="rtl"] .text-right{text-align: left} .weekly-day[title]{position: relative} .weekly-day[title]:hover::after{content: attr(title);position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);padding: 0.5rem 0.75rem;background: rgba(0, 0, 0, 0.9);color: white;font-size: 0.75rem;border-radius: 0.5rem;white-space: nowrap;z-index: 100;margin-bottom: 0.5rem;max-width: 200px;overflow: hidden;text-overflow: ellipsis} .weekly-day[title]:hover::before{content: '';position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);border: 5px solid transparent;border-top-color: rgba(0, 0, 0, 0.9);margin-bottom: -0.25rem;z-index: 100} .dark .weekly-day[title]:hover::after{background: rgba(255, 255, 255, 0.95);color: #1f2937} .dark .weekly-day[title]:hover::before{border-top-color: rgba(255, 255, 255, 0.95)} #dayDetailsModal{animation: fadeIn 0.2s ease-out} .day-entry-item{display: flex;align-items: center;justify-content: space-between;padding: 0.75rem;background: #f9fafb;border-radius: 0.5rem;margin-bottom: 0.5rem;border: 1px solid #e5e7eb} .dark .day-entry-item{background: #374151;border-color: #4b5563} .day-entry-item:last-child{margin-bottom: 0} .day-entry-info{flex: 1;min-width: 0} .day-entry-project{font-weight: 500;color: #1f2937;font-size: 0.875rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis} .dark .day-entry-project{color: #f3f4f6} .day-entry-details{font-size: 0.75rem;color: #6b7280;margin-top: 0.25rem} .dark .day-entry-details{color: #9ca3af} .day-entry-hours{font-weight: 600;color: #3b82f6;font-size: 0.875rem;margin-right: 0.75rem;white-space: nowrap} .day-entry-delete{padding: 0.375rem;color: #ef4444;border-radius: 0.375rem;transition: all 0.2s;cursor: pointer;background: transparent;border: none} .day-entry-delete:hover{background: #fee2e2} .dark .day-entry-delete:hover{background: #7f1d1d} .day-entry-delete:disabled{opacity: 0.5;cursor: not-allowed} .day-details-empty{text-align: center;padding: 2rem;color: #6b7280} .dark .day-details-empty{color: #9ca3af} .day-details-total{display: flex;justify-content: space-between;padding: 0.75rem;background: #eff6ff;border-radius: 0.5rem;font-weight: 600;margin-top: 1rem} .dark .day-details-total{background: #1e3a8a} .weekly-day{position: relative} .weekly-day .day-tooltip{position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);background: rgba(0, 0, 0, 0.95);color: white;padding: 0.5rem 0.75rem;border-radius: 0.5rem;font-size: 0.75rem;white-space: nowrap;z-index: 100;opacity: 0;visibility: hidden;transition: opacity 0.2s, visibility 0.2s;pointer-events: none;max-width: 250px;text-align: center;line-height: 1.4} .weekly-day .day-tooltip::after{content: '';position: absolute;top: 100%;left: 50%;transform: translateX(-50%);border: 5px solid transparent;border-top-color: rgba(0, 0, 0, 0.95)} .weekly-day:hover .day-tooltip{opacity: 1;visibility: visible} .dark .weekly-day .day-tooltip{background: rgba(255, 255, 255, 0.95);color: #1f2937} .dark .weekly-day .day-tooltip::after{border-top-color: rgba(255, 255, 255, 0.95)} .weekly-day .day-tooltip-multi{white-space: pre-line;text-align: left;min-width: 200px;max-width: 280px;line-height: 1.5} .weekly-day .day-tooltip-line{display: block;margin-bottom: 0.25rem} .weekly-day .day-tooltip-line:last-child{margin-bottom: 0} .tc-cell{position: relative;width: 28px;height: 28px;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;font-size: 0.65rem;font-weight: 600;cursor: pointer;transition: transform 0.15s, box-shadow 0.15s;margin: 0 auto} .tc-cell:hover{transform: scale(1.2);z-index: 10} .tc-cell.tc-empty, .tc-legend-dot.tc-empty{background: #f3f4f6;color: #9ca3af;border: 1.5px dashed #d1d5db} .dark .tc-cell.tc-empty, .dark .tc-legend-dot.tc-empty{background: #374151;color: #6b7280;border-color: #4b5563} .tc-cell.tc-ok, .tc-legend-dot.tc-ok{background: #4ade80;color: white} .tc-cell.tc-under, .tc-legend-dot.tc-under, .tc-cell.tc-over, .tc-legend-dot.tc-over{background: #93c5fd;color: #1e3a5f} .tc-cell.tc-leave-approved, .tc-legend-dot.tc-leave-approved{background: #0369a1;color: white} .dark .tc-cell.tc-leave-approved, .dark .tc-legend-dot.tc-leave-approved{background: #075985;color: #7dd3fc} .tc-legend-dot.tc-leave-types{background: conic-gradient(#38bdf8, #3b82f6, #ec4899, #f97316, #7c3aed, #38bdf8) !important;color: transparent} .tc-cell.tc-leave-pending, .tc-legend-dot.tc-leave-pending{background: #f59e0b;color: white;animation: tc-pulse 2s ease-in-out infinite} @keyframes tc-pulse{0%, 100%{box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4)} 50%{box-shadow: 0 0 0 4px rgba(245, 158, 11, 0)} } .tc-cell.tc-weekend-hours{width: 18px;height: 18px;font-size: 0.5rem;opacity: 0.75} .tc-cell.tc-weekend-hours:hover{opacity: 1} .tc-cell.tc-holiday, .tc-legend-dot.tc-holiday{background: #fecaca;color: #dc2626;font-size: 0.55rem} .dark .tc-cell.tc-holiday, .dark .tc-legend-dot.tc-holiday{background: #7f1d1d;color: #fca5a5} th.tc-today-header{position: relative;color: #1d4ed8 !important;font-weight: 700;background-color: rgba(37, 99, 235, 0.06);border-top-left-radius: 4px;border-top-right-radius: 4px} .dark th.tc-today-header{color: #93c5fd !important;background-color: rgba(96, 165, 250, 0.09)} th.tc-today-header::after{content: '';position: absolute;bottom: 0;left: 0;right: 0;height: 2px;background: #2563eb;border-radius: 2px} .dark th.tc-today-header::after{background: #60a5fa} td.tc-today-col{background-color: rgba(37, 99, 235, 0.07) !important;box-shadow: inset 1px 0 0 rgba(37, 99, 235, 0.2), inset -1px 0 0 rgba(37, 99, 235, 0.2)} .dark td.tc-today-col{background-color: rgba(96, 165, 250, 0.09) !important;box-shadow: inset 1px 0 0 rgba(96, 165, 250, 0.22), inset -1px 0 0 rgba(96, 165, 250, 0.22)} .tc-cell.tc-weekend{cursor: default} .tc-cell.tc-weekend:hover{transform: none} .tc-cell.tc-selected{ring: 2px;box-shadow: 0 0 0 2px #3b82f6, 0 0 0 4px rgba(59, 130, 246, 0.3)} #teamCalendarTable{table-layout: fixed} #teamCalendarTable th:first-child, #teamCalendarTable td:first-child{width: 120px;min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap} #teamCalendarTable th:not(:first-child), #teamCalendarTable td:not(:first-child){width: 24px;padding-left: 0;padding-right: 0} #teamCalendarTable th.tc-th-weekend{width: 18px} #teamCalendarTable td.tc-weekend{padding-left: 0;padding-right: 0} #teamCalendarTable tbody tr.tc-search-hidden{display: none} #tcGlobalTooltip{position: fixed;background: rgba(15, 23, 42, 0.95);color: white;padding: 0.5rem 0.75rem;border-radius: 0.5rem;font-size: 0.7rem;font-weight: 400;white-space: nowrap;z-index: 9999;opacity: 0;visibility: hidden;transition: opacity 0.15s, visibility 0.15s;pointer-events: none;min-width: 140px;max-width: 280px;text-align: left;line-height: 1.5} #tcGlobalTooltip.visible{opacity: 1;visibility: visible} #tcGlobalTooltip::after{content: '';position: absolute;top: 100%;left: 50%;transform: translateX(-50%);border: 5px solid transparent;border-top-color: rgba(15, 23, 42, 0.95)} .dark #tcGlobalTooltip{background: rgba(241, 245, 249, 0.95);color: #1e293b} .dark #tcGlobalTooltip::after{border-top-color: rgba(241, 245, 249, 0.95)} .tc-tooltip-title{font-weight: 600;margin-bottom: 0.25rem;padding-bottom: 0.25rem;border-bottom: 1px solid rgba(255,255,255,0.2)} .dark .tc-tooltip-title{border-bottom-color: rgba(0,0,0,0.1)} .tc-tooltip-row{display: flex;justify-content: space-between;gap: 1rem} .tc-tooltip-paid-absence{color: #fbbf24} .dark .tc-tooltip-paid-absence{color: #b45309} .tc-tooltip-total{font-weight: 600;margin-top: 0.25rem;padding-top: 0.25rem;border-top: 1px solid rgba(255,255,255,0.2)} .dark .tc-tooltip-total{border-top-color: rgba(0,0,0,0.1)} .tc-name-tip[data-tc-tip]{cursor: help} .tc-tooltip-note{font-style: italic;opacity: 0.75;white-space: normal;word-break: break-word;max-width: 240px;margin-top: 1px} .tc-attachment-link{color: #93c5fd;text-decoration: underline;cursor: pointer} .tc-attachment-link:hover{color: #bfdbfe} .tc-legend{display: flex;flex-wrap: wrap;gap: 0.75rem;padding: 0.75rem 0;font-size: 0.75rem} .tc-legend-item{display: flex;align-items: center;gap: 0.35rem} .tc-legend-dot{width: 14px;height: 14px;border-radius: 50%;flex-shrink: 0} @media print{.no-print{display: none !important} body{background: white !important;color: black !important} .shadow-sm, .shadow-xl{box-shadow: none !important} } #financeOverviewPanel .rounded-xl, #projectDetailPanel .rounded-xl{transition: transform 0.2s ease, box-shadow 0.2s ease} #financeOverviewPanel .rounded-xl:hover{transform: translateY(-1px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)} .dark #financeOverviewPanel .rounded-xl:hover{box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3)} .finance-tab{transition: all 0.15s ease} #projectsTableBody tr{transition: background-color 0.15s ease} .margin-positive{color: #16a34a} .margin-warning{color: #ca8a04} .margin-negative{color: #dc2626} #financeOverheadPanel tfoot td{font-size: 0.9rem} #exchangeRatesGrid .exchange-rate-input{text-align: right} @media (max-width: 768px){#financeProfitBody td, #financeSalesBody td, #financeDeptBody td, #financeUtilBody td, #financeOverheadBody td{padding: 0.5rem 0.25rem;font-size: 0.75rem} .finance-tab{padding: 0.375rem 0.75rem;font-size: 0.75rem} } #mobileMenu{animation: slideDown 0.2s ease-out} @keyframes slideDown{from{opacity: 0;transform: translateY(-10px)} to{opacity: 1;transform: translateY(0)} } .mobile-nav-btn{position: relative;transition: all 0.2s ease} .mobile-nav-btn:active{transform: scale(0.98)} @media (max-width: 767px){header .flex.items-center.gap-3:first-child{flex-shrink: 0} #userMenuBtn{padding: 0.5rem} #userMenuBtn span{display: none} } @media (max-width: 767px){#mainNav{display: none} } #mobileMenuBtn{transition: background-color 0.2s, transform 0.1s} #mobileMenuBtn:active{transform: scale(0.95)} .team-expand-arrow{display: inline-block;transition: transform 0.2s ease;font-size: 0.7em;color: #6b7280} #projectTeamTable tbody tr[onclick]{transition: background-color 0.15s ease} #projectTeamTable tbody tr[onclick]:hover{background-color: rgba(59, 130, 246, 0.05)} .dark #projectTeamTable tbody tr[onclick]:hover{background-color: rgba(59, 130, 246, 0.1)} #projectTeamTable td table{border-collapse: collapse} #projectTeamTable td table th{font-weight: 500;font-size: 0.7rem;text-transform: uppercase;letter-spacing: 0.05em} #projectFixedCostsSection{border-top: 2px solid #e5e7eb;margin-top: 1rem} .dark #projectFixedCostsSection{border-top-color: #374151} #projectFixedCostsSection .flex button{transition: color 0.15s} #fixedCostClosedBadge{animation: fadeIn 0.3s ease} @keyframes fadeIn{from{opacity: 0;transform: translateY(-2px)} to{opacity: 1;transform: translateY(0)} } #fixedCostModal{animation: modalFadeIn 0.2s ease} @keyframes modalFadeIn{from{opacity: 0} to{opacity: 1} } #fixedCostModal > div{animation: modalSlideIn 0.2s ease} @keyframes modalSlideIn{from{opacity: 0;transform: scale(0.95) translateY(-10px)} to{opacity: 1;transform: scale(1) translateY(0)} } #projectTeamFooter tr{transition: background-color 0.15s} #projectTeamFooter tr:hover{background-color: rgba(0, 0, 0, 0.02)} .dark #projectTeamFooter tr:hover{background-color: rgba(255, 255, 255, 0.02)} #kanbanBoard:not(.hidden){display: flex;gap: 1rem;overflow-x: auto;padding-bottom: 0.5rem;min-height: 300px} .kanban-column{min-width: 280px;max-width: 320px;width: 280px} .kanban-column-body{transition: background-color 0.15s ease;border-radius: 0.5rem;padding: 0.25rem} .kanban-dropzone-end{min-height: 44px;transition: background-color 0.15s ease, border-color 0.15s ease} .kanban-dropzone-end.is-active{background-color: rgba(14, 165, 233, 0.08);border-color: rgb(14, 165, 233)} .dark .kanban-dropzone-end.is-active{background-color: rgba(14, 165, 233, 0.16)} .task-card{transition: box-shadow 0.15s ease, transform 0.1s ease, opacity 0.2s ease;border-left: 3px solid transparent} .task-card:hover{box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);transform: translateY(-1px)} .task-card.opacity-50{opacity: 0.5} .task-card.priority-critical{border-left-color: #dc2626} .task-card.priority-high{border-left-color: #f97316} .task-card.priority-medium{border-left-color: #eab308} .task-card.priority-low{border-left-color: #22c55e} .task-card.is-dragging{opacity: 0.4;transform: scale(0.97);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);z-index: 100;cursor: grabbing !important} .task-card.drop-indicator-top{border-top: 3px solid #0ea5e9 !important} .task-card.drop-indicator-bottom{border-bottom: 3px solid #0ea5e9 !important} .kanban-column.drag-over{background-color: rgba(14, 165, 233, 0.06) !important;outline: 2px dashed rgba(14, 165, 233, 0.4);outline-offset: -2px;border-radius: 0.75rem} .dark .kanban-column.drag-over{background-color: rgba(14, 165, 233, 0.12) !important} .kanban-dropzone-end.drag-visible{min-height: 50px;opacity: 1;border-color: rgba(14, 165, 233, 0.3);border-style: dashed;border-width: 2px} .project-kanban-board{transition: all 0.2s ease} .project-kanban-header{} .project-kanban-header:hover{background-color: rgba(0, 0, 0, 0.02)} .dark .project-kanban-header:hover{background-color: rgba(255, 255, 255, 0.02)} .project-kanban-content{transition: max-height 0.3s ease, opacity 0.2s ease} .kanban-board-horizontal{scrollbar-width: thin;scrollbar-color: rgba(156, 163, 175, 0.5) transparent} .kanban-board-horizontal::-webkit-scrollbar{height: 8px} .kanban-board-horizontal::-webkit-scrollbar-track{background: transparent} .kanban-board-horizontal::-webkit-scrollbar-thumb{background-color: rgba(156, 163, 175, 0.5);border-radius: 4px} .kanban-board-horizontal::-webkit-scrollbar-thumb:hover{background-color: rgba(156, 163, 175, 0.7)} .kanban-dropzone-active{background-color: rgba(14, 165, 233, 0.1) !important;border-color: rgba(14, 165, 233, 0.5) !important;opacity: 1 !important} .dark .kanban-dropzone-active{background-color: rgba(14, 165, 233, 0.2) !important} #notificationBell{position: relative} #notifBadge{position: absolute;top: -4px;right: -4px;min-width: 18px;height: 18px;display: flex;align-items: center;justify-content: center;font-size: 10px;font-weight: 700;border-radius: 9999px;background: #ef4444;color: white;padding: 0 4px;line-height: 1} #notifPanel{position: absolute;top: 100%;right: 0;z-index: 50;width: 360px;max-height: 480px;overflow-y: auto;animation: notifDropdownEnter 0.15s ease-out} @keyframes notifDropdownEnter{from{opacity: 0;transform: translateY(-8px)} to{opacity: 1;transform: translateY(0)} } .notif-item{border-bottom: 1px solid rgba(0, 0, 0, 0.05)} .dark .notif-item{border-bottom-color: rgba(255, 255, 255, 0.05)} #myTasksList > div{transition: box-shadow 0.15s ease} #kanbanBoard::-webkit-scrollbar{height: 8px} #kanbanBoard::-webkit-scrollbar-track{background: transparent} #kanbanBoard::-webkit-scrollbar-thumb{background: rgba(0, 0, 0, 0.15);border-radius: 4px} .dark #kanbanBoard::-webkit-scrollbar-thumb{background: rgba(255, 255, 255, 0.15)} .line-clamp-2{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden} .hierarchy-tree{font-size: 0.875rem} .hierarchy-upward{display: flex;flex-direction: column;gap: 0.5rem} .hierarchy-selected{position: relative} @media (min-width: 768px){.hierarchy-downward ul{position: relative;padding-left: 16px;list-style: none} .hierarchy-downward li{position: relative;list-style: none} .hierarchy-downward li::after{content: '';position: absolute;left: -8px;top: 0;bottom: 0;width: 2px;background-color: #e5e7eb} .dark .hierarchy-downward li::after{background-color: #374151} .hierarchy-downward li:last-child::after{height: 14px;bottom: auto} .hierarchy-downward li::before{content: '';position: absolute;left: -8px;top: 12px;width: 16px;height: 2px;background-color: #e5e7eb} .dark .hierarchy-downward li::before{background-color: #374151} } @media (max-width: 767px){.hierarchy-downward ul{margin-left: 8px;padding-left: 0;list-style: none} .subordinate-item{border-left: 2px solid #e5e7eb;border-bottom: 1px solid #f3f4f6} .dark .subordinate-item{border-left-color: #374151;border-bottom-color: #1f2937} .subordinate-item:last-child{border-left-color: transparent;border-bottom: none} } .tree-toggle svg{transition: transform 0.2s ease} .tree-toggle[aria-expanded="false"] svg{transform: rotate(-90deg)} .subtree.collapsed .subtree-content{display: none} .show-more-btn{display: block;width: 100%;text-align: left;padding: 0.5rem;background: #f9fafb;border-radius: 0.375rem;margin-top: 0.25rem;border: none;cursor: pointer} .dark .show-more-btn{background: #374151;color: #93c5fd} .show-more-btn:hover{background: #f3f4f6} .dark .show-more-btn:hover{background: #4b5563} .role-badge-admin{background-color: #f3e8ff;color: #7c3aed} .dark .role-badge-admin{background-color: #4c1d95;color: #c4b5fd} .role-badge-manager{background-color: #dbeafe;color: #2563eb} .dark .role-badge-manager{background-color: #1e3a8a;color: #93c5fd} .role-badge-employee{background-color: #f3f4f6;color: #374151} .dark .role-badge-employee{background-color: #374151;color: #d1d5db} .subordinate-item > div:first-child:hover{background-color: #f3f4f6} .dark .subordinate-item > div:first-child:hover{background-color: rgba(55, 65, 81, 0.5)} .cv-combobox-wrapper{position: relative;width: 100%} .cv-combobox-input{width: 100%;padding: 0.5rem 2.25rem 0.5rem 0.75rem;border-radius: 0.5rem;border: 1px solid #d1d5db;background-color: #fff;font-size: 0.875rem;line-height: 1.25rem;outline: none;cursor: text;box-sizing: border-box;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 0.75rem center;background-size: 1rem;transition: border-color 0.15s ease, box-shadow 0.15s ease} .cv-combobox-input::placeholder{color: #9ca3af} .cv-combobox-input:focus{border-color: #3b82f6;box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3)} .dark .cv-combobox-input{border-color: #4b5563;background-color: #374151;color: #f3f4f6;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")} .dark .cv-combobox-input::placeholder{color: #6b7280} .dark .cv-combobox-input:focus{border-color: #60a5fa;box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3)} .cv-combobox-dropdown{position: absolute;top: 100%;left: 0;right: 0;margin-top: 2px;max-height: 240px;overflow-y: auto;background-color: #fff;border: 1px solid #d1d5db;border-radius: 0.5rem;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);z-index: 50;display: none} .cv-combobox-dropdown.open{display: block} .cv-combobox-dropdown.drop-up{top: auto;bottom: 100%;margin-top: 0;margin-bottom: 2px} .dark .cv-combobox-dropdown{background-color: #1f2937;border-color: #4b5563} .cv-combobox-optgroup{padding: 0.375rem 0.75rem;font-size: 0.75rem;font-weight: 600;color: #6b7280;text-transform: uppercase;letter-spacing: 0.025em} .dark .cv-combobox-optgroup{color: #9ca3af} .cv-combobox-option{padding: 0.375rem 0.75rem 0.375rem 1.25rem;font-size: 0.875rem;cursor: pointer;color: #111827;transition: background-color 0.1s ease} .cv-combobox-option:hover, .cv-combobox-option.highlighted{background-color: #eff6ff;color: #1d4ed8} .dark .cv-combobox-option{color: #f3f4f6} .dark .cv-combobox-option:hover, .dark .cv-combobox-option.highlighted{background-color: #1e3a5f;color: #93c5fd} .cv-combobox-option-empty{font-style: italic;opacity: 0.75;border-bottom: 1px solid rgba(156, 163, 175, 0.35)} .cv-combobox-option-empty:hover, .cv-combobox-option-empty.highlighted{opacity: 1} .cv-combobox-separator{height: 1px;margin: 0.25rem 0;background: rgba(156, 163, 175, 0.4)} .cv-combobox-action{font-weight: 600} .cv-combobox-no-results{padding: 0.5rem 0.75rem;font-size: 0.875rem;color: #9ca3af;text-align: center} .leave-calendar-day{aspect-ratio: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 0.75rem;border: 2px solid #e5e7eb;background-color: #ffffff;color: #1f2937;cursor: pointer;transition: all 0.2s;padding: 2px;overflow: hidden} .dark .leave-calendar-day{border-color: #4b5563;background-color: #1f2937;color: #f3f4f6} .leave-calendar-day:hover{transform: scale(1.05)} .leave-calendar-day-number{font-size: 0.875rem;font-weight: 500;line-height: 1} .dark .leave-calendar-day-number{color: #f3f4f6} .leave-calendar-day-label{font-size: 0.6rem;color: #ef4444;text-align: center;line-height: 1.1;margin-top: 2px;font-weight: 500;word-break: break-word;max-width: 100%} .dark .leave-calendar-day-label{color: #f87171} @media (max-width: 640px){.leave-calendar-day-label{font-size: 0.5rem} } .leave-calendar-day-weekend{background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);opacity: 0.7} .dark .leave-calendar-day-weekend{background: linear-gradient(135deg, #374151 0%, #4b5563 100%);opacity: 0.7} .leave-calendar-day-weekend .leave-calendar-day-number{color: #9ca3af} .dark .leave-calendar-day-weekend .leave-calendar-day-number{color: #6b7280} .leave-calendar-day-holiday{background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);opacity: 0.7} .dark .leave-calendar-day-holiday{background: linear-gradient(135deg, #374151 0%, #4b5563 100%);opacity: 0.7} .leave-calendar-day-holiday .leave-calendar-day-number{color: #9ca3af} .dark .leave-calendar-day-holiday .leave-calendar-day-number{color: #6b7280} .leave-calendar-day-approved{background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);color: #065f46} .dark .leave-calendar-day-approved{background: linear-gradient(135deg, #065f46 0%, #047857 100%);color: #d1fae5} .leave-calendar-day-approved .leave-calendar-day-number{color: #065f46} .dark .leave-calendar-day-approved .leave-calendar-day-number{color: #d1fae5} .leave-calendar-day-type .leave-calendar-day-number, .dark .leave-calendar-day-type .leave-calendar-day-number, .leave-calendar-day-type .leave-calendar-day-approval-label, .dark .leave-calendar-day-type .leave-calendar-day-approval-label{color: inherit} .leave-calendar-day-approval-label{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;font-size: 0.52rem;line-height: 1.05;font-weight: 600;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18)} .leave-calendar-day-pending{background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);color: #92400e} .dark .leave-calendar-day-pending{background: linear-gradient(135deg, #78350f 0%, #92400e 100%);color: #fef3c7} .leave-calendar-day-pending .leave-calendar-day-number{color: #92400e} .dark .leave-calendar-day-pending .leave-calendar-day-number{color: #fef3c7} .leave-calendar-day-rejected{background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);color: #991b1b;opacity: 0.7} .dark .leave-calendar-day-rejected{background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);color: #fee2e2;opacity: 0.7} .leave-calendar-day-rejected .leave-calendar-day-number{color: #991b1b;text-decoration: line-through} .dark .leave-calendar-day-rejected .leave-calendar-day-number{color: #fee2e2} .leave-calendar-day-selectable:hover{background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);border-color: #3b82f6} .dark .leave-calendar-day-selectable:hover{background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);border-color: #60a5fa} .leave-calendar-day.today{border-color: #3b82f6;border-width: 3px} .leave-partial{background-image: repeating-linear-gradient( 45deg, rgba(34, 197, 94, 0.6), rgba(34, 197, 94, 0.6) 4px, rgba(34, 197, 94, 0.85) 4px, rgba(34, 197, 94, 0.85) 8px );background-color: #047857;color: #fff !important} .tc-cell.leave-partial{background-color: #047857} .dark .tc-cell.leave-partial{background-color: #065f46} .tl-date-native{display: none !important} .tl-date-display{cursor: pointer;background-image: linear-gradient(transparent, transparent)} .tl-date-picker{position: fixed;z-index: 120;padding: 0.875rem;border: 1px solid #d1d5db;border-radius: 0.875rem;background: #ffffff;color: #111827;box-shadow: 0 20px 45px rgba(15, 23, 42, 0.24)} .dark .tl-date-picker{border-color: #4b5563;background: #1f2937;color: #f9fafb} .tl-date-picker-header, .tl-date-picker-footer{display: flex;align-items: center;justify-content: space-between;gap: 0.5rem} .tl-date-picker-title{position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap} .tl-date-picker-selectors{display: flex;align-items: center;gap: 0.4rem;flex: 1;min-width: 0} .tl-date-picker-select{min-width: 0;height: 2.25rem;border: 1px solid #d1d5db;border-radius: 0.5rem;background: #ffffff;color: #111827;padding: 0 0.45rem;font-size: 0.78rem;font-weight: 700;text-transform: capitalize;outline: none} .tl-date-picker-select[data-field="month"]{flex: 1} .tl-date-picker-select[data-field="year"]{width: 5.6rem;flex: 0 0 auto} .tl-date-picker-select:focus{border-color: #2563eb;box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18)} .dark .tl-date-picker-select{border-color: #4b5563;background: #374151;color: #f9fafb} .tl-date-picker-nav, .tl-date-picker-secondary{border-radius: 0.5rem;transition: background-color 0.15s ease} .tl-date-picker-nav{width: 2.25rem;height: 2.25rem;font-size: 1.5rem;line-height: 1} .tl-date-picker-secondary{padding: 0.4rem 0.65rem;font-size: 0.75rem;font-weight: 600;color: #2563eb} .tl-date-picker-nav:hover, .tl-date-picker-secondary:hover{background: #f3f4f6} .dark .tl-date-picker-nav:hover, .dark .tl-date-picker-secondary:hover{background: #374151} .tl-date-picker-weekdays, .tl-date-picker-days{display: grid;grid-template-columns: repeat(7, minmax(0, 1fr));gap: 0.25rem} .tl-date-picker-weekdays{margin: 0.75rem 0 0.35rem} .tl-date-picker-weekdays span{text-align: center;font-size: 0.68rem;font-weight: 700;color: #6b7280;text-transform: capitalize} .tl-date-picker-day{aspect-ratio: 1;border-radius: 0.5rem;font-size: 0.8rem;font-weight: 500} .tl-date-picker-day:hover:not(:disabled){background: #dbeafe;color: #1d4ed8} .dark .tl-date-picker-day:hover:not(:disabled){background: #1e3a5f;color: #bfdbfe} .tl-date-picker-day.is-outside{color: #9ca3af} .tl-date-picker-day.is-today{box-shadow: inset 0 0 0 1px #3b82f6} .tl-date-picker-day.is-selected{background: #2563eb;color: #ffffff} .tl-date-picker-day:disabled{cursor: not-allowed;opacity: 0.28} .tl-date-picker-footer{justify-content: flex-end;margin-top: 0.65rem;padding-top: 0.6rem;border-top: 1px solid #e5e7eb} .dark .tl-date-picker-footer{border-color: #374151} .ai-dot{display: inline-block;width: 8px;height: 8px;border-radius: 50%;background-color: #6b7280;animation: ai-bounce 1.4s ease-in-out infinite} .dark .ai-dot{background-color: #9ca3af} .ai-dot:nth-child(1){animation-delay: 0s} .ai-dot:nth-child(2){animation-delay: 0.2s} .ai-dot:nth-child(3){animation-delay: 0.4s} .ai-button-loading .ai-dot{width: 6px;height: 6px;background-color: currentColor} @keyframes ai-bounce{0%, 60%, 100%{transform: translateY(0);opacity: 0.4} 30%{transform: translateY(-6px);opacity: 1} } @media (max-width: 640px){html, body{max-width: 100%;overflow-x: hidden} #appView header > div{padding-left: 0.75rem !important;padding-right: 0.75rem !important} #appView header h1{font-size: 1.05rem;line-height: 1.35rem} #mobileMenu{position: fixed;top: 4rem;right: 0;left: 0;z-index: 60;max-height: calc(100dvh - 4rem);overflow-y: auto;overscroll-behavior: contain;background: #ffffff;box-shadow: 0 18px 35px rgba(15, 23, 42, 0.18)} .dark #mobileMenu{background: #1f2937;box-shadow: 0 18px 35px rgba(0, 0, 0, 0.45)} #mobileNav{padding-left: 0.75rem !important;padding-right: 0.75rem !important} .mobile-nav-btn{display: flex;align-items: center;min-height: 2.75rem;line-height: 1.2} #mobileMenu button, #mobileMenu select, #appView main button{min-height: 2.5rem} #appView main{width: 100%;max-width: 100%;padding: 1rem 0.75rem 1.5rem !important} #appView main .p-6{padding: 1rem !important} #appView main .p-5, #appView main .px-5{padding-left: 1rem !important;padding-right: 1rem !important} #appView main .py-4, #appView main .p-5{padding-top: 0.875rem !important;padding-bottom: 0.875rem !important} #appView main .space-y-8 > :not([hidden]) ~ :not([hidden]){margin-top: 1.25rem !important} #appView main .space-y-6 > :not([hidden]) ~ :not([hidden]){margin-top: 1rem !important} #appView main .text-2xl{font-size: 1.25rem !important;line-height: 1.75rem !important} #appView main .text-xl{font-size: 1.125rem !important;line-height: 1.55rem !important} #appView main .mb-4.flex.items-center.justify-between, #appView main .mb-6.flex.items-center.justify-between, #appView main .mb-4.flex.items-start.justify-between, #appView main .mb-6.flex.items-start.justify-between{align-items: flex-start !important;flex-wrap: wrap;gap: 0.75rem} #appView main .flex.items-center.gap-2, #appView main .flex.items-center.gap-3, #appView main .flex.items-center.gap-4{flex-wrap: wrap} #appView main input:not([type="checkbox"]):not([type="radio"]), #appView main select, #appView main textarea{min-width: 0;max-width: 100%;font-size: 16px !important} #appView main input[type="date"], #appView main input[type="time"], #appView main select{min-height: 2.5rem} #timesheetView .flex.items-center.gap-2 > input[type="date"], #detailedEntriesContent .flex.items-center.gap-2 > select, #leaveHoursInputs .flex.gap-4 > div{flex: 1 1 8.5rem} #timesheetView .flex.items-center.gap-2 > button, #detailedEntriesContent .flex.items-center.gap-2 > button{flex: 1 0 100%} #leaveHoursInputs .flex.gap-4{flex-wrap: wrap} #leaveHoursCount{width: 100% !important} #appView main .overflow-x-auto{max-width: 100%;overflow-x: auto;-webkit-overflow-scrolling: touch;overscroll-behavior-x: contain;scrollbar-width: thin} #appView main .overflow-x-auto > table{min-width: 42rem} #appView main table{font-size: 0.82rem} #appView main th, #appView main td{padding: 0.65rem 0.7rem !important} #teamCalendarContainer > *{min-width: 46rem} #leaveCalendarGrid{gap: 0.25rem !important} .leave-calendar-day{min-height: 2.5rem;padding: 0.2rem} .leave-calendar-day-number{font-size: 0.7rem} .leave-calendar-day-approval-label{font-size: 0.46rem} #leaveView .mt-4.flex.items-center.gap-4{gap: 0.5rem 0.75rem !important} #teamView > div:first-child, #adminView > div:first-child, #financeView > div:first-child{overflow: hidden} #teamView > div:first-child > div, #adminView > div:first-child > div, #financeView > div:first-child > div, #adminSkillsDictionaryTab .flex.gap-1.mb-4{flex-wrap: nowrap !important;overflow-x: auto;padding-bottom: 0.25rem;-webkit-overflow-scrolling: touch;scrollbar-width: thin} .team-tab, .admin-tab-btn, .finance-tab, .admin-skills-subtab{flex: 0 0 auto !important;padding: 0.55rem 0.75rem !important;font-size: 0.78rem} #teamHoursSearch, #teamHoursSalesPerson, #adminProjectsSalesPersonFilter, #adminLeaveManagementYear, #permManagerSelect, #aiModelSelect{width: 100% !important;min-width: 0 !important} #hoursAnalysisContent > .flex.gap-3, #adminProjectsTab .flex.gap-3, #adminLeaveManagementTab .flex.items-center.gap-3, #adminSettingsTab .flex.items-center.gap-4, #adminSkillsDictionaryTab .flex.gap-2, #projectsListPanel .flex.flex-wrap.items-center.gap-3, #myTasksView .flex.flex-wrap.gap-2{flex-direction: column;align-items: stretch !important} #projectsListPanel .flex.flex-wrap.items-center.gap-3 > *, #myTasksView .flex.flex-wrap.gap-2 > *{width: 100%} #projectsSummary{flex-wrap: wrap;gap: 0.35rem 0.75rem !important} #projectDetailPanel > .flex.items-center.gap-4{flex-wrap: wrap;gap: 0.5rem !important} #projectDetailName{flex: 1 1 100%;overflow-wrap: anywhere} #projectDetailPanel .grid.grid-cols-2{grid-template-columns: minmax(0, 1fr) !important} #projectDetailPanel .col-span-2{grid-column: auto !important} #projectDetailPanel .flex.gap-2, #permissionsTreeContainer .mt-4.flex.gap-3{flex-wrap: wrap} #projectDetailPanel .flex.gap-2 > button, #permissionsTreeContainer .mt-4.flex.gap-3 > button{flex: 1 1 100%} #adminEmployeesList .flex.items-start.justify-between{flex-wrap: wrap;gap: 0.75rem} #adminEmployeesList .flex-1, #adminProjectsList .flex-1{min-width: 0} #adminEmployeesList p, #adminProjectsList p, #adminLeaveManagementEmployeeList p{overflow-wrap: anywhere} #adminHierarchyStats{grid-template-columns: minmax(0, 1fr) !important} #permissionsTreeContainer .max-w-lg, #adminViewPermissionsTab .max-w-lg{max-width: 100% !important} .employee-actions-menu{z-index: 90} #cvView > .rounded-xl > .flex:first-child, #cvView .mb-8 > .flex.items-center.justify-between{align-items: flex-start !important;flex-wrap: wrap;gap: 0.75rem} #cvView > .rounded-xl > .flex:first-child > div, #cvView > .rounded-xl > .flex:first-child .flex.gap-2{width: 100%;flex-wrap: wrap} #cvView > .rounded-xl > .flex:first-child button{flex: 1 1 9rem;justify-content: center} .project-kanban-header{flex-wrap: wrap;gap: 0.75rem} .project-kanban-header > div{min-width: 0;flex-wrap: wrap} .project-kanban-header h3{width: 100%;overflow-wrap: anywhere} .project-kanban-content{padding: 0.75rem !important} #kanbanBoard, .kanban-board-horizontal{gap: 0.75rem !important;scroll-snap-type: x proximity} .kanban-column, .kanban-board-horizontal .kanban-column{width: min(16rem, 78vw) !important;min-width: min(16rem, 78vw) !important;max-width: min(16rem, 78vw) !important;scroll-snap-align: start} #notifPanel, #navMoreDropdown, #userMenu{max-width: calc(100vw - 1rem)} .tl-date-picker{right: 0.75rem !important;left: 0.75rem !important;width: auto !important;max-width: calc(100vw - 1.5rem)} body > .fixed.inset-0, #appView .fixed.inset-0{align-items: flex-start !important;overflow-y: auto;padding: 0.75rem !important} body > .fixed.inset-0 > div, #appView .fixed.inset-0 > div{width: 100% !important;max-width: 100% !important;max-height: calc(100dvh - 1.5rem) !important;margin: 0 !important;border-radius: 0.75rem !important} body > .fixed.inset-0 > div.p-6, #appView .fixed.inset-0 > div.p-6, #appView .fixed.inset-0 > div > .p-6{padding: 1rem !important} } @media (max-width: 380px){#appView header h1{font-size: 0.98rem} #appView header .w-10.h-10{width: 2.25rem !important;height: 2.25rem !important} #appView main{padding-left: 0.5rem !important;padding-right: 0.5rem !important} #appView main .p-6, #appView main .p-5{padding: 0.875rem !important} }