/* Main Styles */
:root {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --secondary-color: #64748b;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #3b82f6;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Sidebar Styles */
.sidebar {
    transition: width 0.3s ease, transform 0.3s ease;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1), 4px 0 16px rgba(0, 0, 0, 0.05);
}

.sidebar.collapsed {
    width: 4rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Custom scrollbar for sidebar */
.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

.sidebar:hover::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}

/* Sidebar Toggle Button - z-index thấp hơn modal (z-50) để không che popup */
#sidebarToggle {
    z-index: 30 !important;
    position: fixed !important;
    /* Không có transition để di chuyển ngay lập tức */
}

@media (min-width: 1024px) {
    #sidebarToggle {
        position: absolute !important;
        /* Không có transition để di chuyển ngay lập tức */
    }
}

/* Mobile Sidebar - Hidden by default, shown when toggled */
@media (max-width: 1023px) {
    .sidebar {
        width: 16rem;
    }
    
    .sidebar.collapsed {
        width: 4rem;
    }
}

.sidebar-text {
    transition: opacity 0.2s ease, visibility 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar.collapsed .sidebar-text {
    opacity: 0;
    visibility: hidden;
    width: 0;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

.sidebar.collapsed .nav-item i {
    margin: 0 !important;
    font-size: 1.25rem;
}

.sidebar.collapsed .nav-section-title {
    display: none;
}

/* Sidebar Tooltip Styles */
.nav-item {
    position: relative;
}

.nav-item[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: #1f2937;
    color: white;
    font-size: 0.875rem;
    white-space: nowrap;
    border-radius: 0.375rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.nav-item[data-tooltip]::before {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0.5rem;
    border: 6px solid transparent;
    border-right-color: #1f2937;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1001;
}

.sidebar.collapsed .nav-item[data-tooltip]:hover::after,
.sidebar.collapsed .nav-item[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Đảm bảo nav không cắt tooltip khi sidebar collapsed */
.sidebar.collapsed nav {
    overflow: visible;
}

/* Modal Dialog Styles */
#modalDialog {
    z-index: 9999;
}

#modalBackdrop {
    backdrop-filter: blur(2px);
}

#commentModal {
    z-index: 10001;
}

/* Card Styles */
.card {
    @apply bg-white rounded-lg shadow-lg border border-gray-200;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200;
}

.card-body {
    @apply p-6;
}

/* Button Styles */
.btn {
    @apply px-4 py-2 rounded-lg font-medium transition duration-200;
}

.btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-700 hover:bg-gray-300;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700;
}

.btn-success {
    @apply bg-green-600 text-white hover:bg-green-700;
}

/* Badge Styles */
.badge {
    @apply px-2 py-1 text-xs rounded;
}

.badge-primary {
    @apply bg-blue-100 text-blue-800;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

/* Notification Badge Blink Animation */
@keyframes notificationBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.15);
    }
}

.notification-badge {
    animation: notificationBlink 1.2s ease-in-out infinite !important;
    will-change: opacity, transform;
}

/* Form Styles */
.form-group {
    @apply mb-4;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500;
}

/* Table Styles */
.table {
    @apply min-w-full divide-y divide-gray-200;
}

.table thead {
    @apply bg-gray-50;
}

.table th {
    @apply px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wide;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

/* Alert Styles */
.alert {
    @apply p-4 rounded-lg border-l-4;
}

.alert-success {
    @apply bg-green-50 border-green-500 text-green-700;
}

.alert-error {
    @apply bg-red-50 border-red-500 text-red-700;
}

.alert-warning {
    @apply bg-yellow-50 border-yellow-500 text-yellow-700;
}

.alert-info {
    @apply bg-blue-50 border-blue-500 text-blue-700;
}

/* Loading Spinner */
.spinner {
    @apply inline-block animate-spin rounded-full border-2 border-solid border-current border-r-transparent;
}

/* Logo Styles - Đảm bảo background trong suốt */
img[src*="jivo_logo.png"],
img[src*="jivo_fav.png"] {
    background: transparent !important;
    background-color: transparent !important;
    mix-blend-mode: normal;
}

/* Utilities */
.text-truncate {
    @apply truncate;
}

.shadow-hover {
    @apply transition-shadow duration-200 hover:shadow-lg;
}

/* Mobile Safe Area Support - Tránh bị che bởi notch/system bar */
/* Chỉ áp dụng trên mobile (max-width: 1023px) */
@media (max-width: 1023px) {
    .top-nav-mobile-safe {
        padding-top: max(0px, env(safe-area-inset-top, 0px));
    }
    
    /* Điều chỉnh spacing cho mobile */
    .top-nav-mobile-safe > div {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    
    /* Đảm bảo các phần tử trong header không bị tràn */
    .top-nav-mobile-safe .flex.items-center {
        gap: 0.25rem;
    }
}

/* Hỗ trợ tốt hơn cho các trình duyệt hiện đại với safe-area-inset */
@supports (padding: max(0px)) {
    @media (max-width: 1023px) {
        .top-nav-mobile-safe {
            padding-top: max(0px, env(safe-area-inset-top));
        }
    }
}

/* Responsive adjustments cho header trên các kích thước màn hình khác nhau */
@media (max-width: 640px) {
    /* Mobile nhỏ */
    .top-nav-mobile-safe .flex.items-center {
        gap: 0.125rem;
    }
}

@media (min-width: 641px) and (max-width: 1023px) {
    /* Tablet */
    .top-nav-mobile-safe .flex.items-center {
        gap: 0.5rem;
    }
}

/* Custom Date Picker Styles */
.custom-date-picker-wrapper {
    position: relative;
}

.custom-date-picker-calendar {
    position: absolute !important;
    z-index: 9999 !important;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.custom-date-picker-calendar.hidden {
    display: none !important;
}

.custom-date-picker-calendar:not(.hidden) {
    display: block !important;
}

/* Calendar Header */
.custom-date-picker-calendar > div:first-child {
    margin-bottom: 0.5rem;
}

.custom-date-picker-calendar > div:first-child button {
    border: none;
    background: transparent;
    cursor: pointer;
}

.custom-date-picker-calendar > div:first-child button:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.custom-date-picker-day {
    width: 14.28%;
    padding: 0.25rem;
    margin-bottom: 0.25rem;
}

.custom-date-picker-day > div {
    cursor: pointer;
    text-align: center;
    text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100;
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

.custom-date-picker-day > div:hover:not(.disabled):not(.selected):not(.other-month) {
    background-color: #bfdbfe;
}

.custom-date-picker-day.selected > div {
    background-color: #3b82f6;
    color: #ffffff;
}

.custom-date-picker-day.today > div:not(.selected) {
    background-color: #3b82f6;
    color: #ffffff;
}

.custom-date-picker-day.other-month > div {
    color: #d1d5db;
    cursor: default;
}

.custom-date-picker-day.disabled > div {
    color: #d1d5db;
    cursor: not-allowed;
    opacity: 0.5;
}

.custom-date-picker-day:not(.selected):not(.today):not(.other-month):not(.disabled) > div {
    color: #374151;
}