/* Custom focus styles */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
}

/* Custom button styles */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--primary-foreground);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--background);
    border-color: var(--color-secondary);
}

.btn-secondary:hover {
    background-color: var(--color-secondary-hover);
}

.btn-outline {
    background-color: transparent;
    color: var(--foreground);
    border-color: var(--border);
}

.btn-outline:hover {
    background-color: var(--muted);
}

.btn-ghost {
    background-color: transparent;
    color: var(--foreground);
}

.btn-ghost:hover {
    background-color: var(--muted);
}

.btn-sm {
    @apply px-3 py-1.5 text-xs;
}

.btn-lg {
    @apply px-6 py-3 text-base;
}

/* Custom form styles */
.form-input {
    background-color: var(--input);
    color: var(--input-text);
    border-color: var(--border);
    @apply block w-full px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:border-transparent;
}

.form-input:focus {
    ring-color: var(--primary);
}

.form-select {
    background-color: var(--input);
    color: var(--input-text);
    border-color: var(--border);
    @apply block w-full px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:border-transparent;
}

.form-select:focus {
    ring-color: var(--primary);
}

.form-textarea {
    background-color: var(--input);
    color: var(--input-text);
    border-color: var(--border);
    @apply block w-full px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:border-transparent;
}

.form-textarea:focus {
    ring-color: var(--primary);
}

.form-label {
    color: var(--foreground);
    @apply block text-sm font-medium mb-1;
}

/* Custom card styles */
.card {
    background-color: var(--card);
    color: var(--card-foreground);
    @apply rounded-lg shadow border;
    border-color: var(--border);
}

.card-header {
    @apply px-6 py-4 border-b;
    border-color: var(--border);
}

.card-body {
    @apply px-6 py-4;
}

.card-footer {
    @apply px-6 py-4 border-t;
    background-color: var(--muted);
    border-color: var(--border);
}

/* Custom table styles */
.table {
    @apply min-w-full divide-y;
    border-color: var(--border);
}

.table thead {
    background-color: var(--muted);
}

.table th {
    color: var(--foreground);
    @apply px-6 py-3 text-left text-xs font-medium uppercase tracking-wider;
}

.table td {
    color: var(--foreground);
    @apply px-6 py-4 whitespace-nowrap text-sm;
}

.table tbody tr {
    @apply hover:bg-opacity-10;
}

.table tbody tr:hover {
    background-color: var(--primary);
    background-opacity: 0.1;
}

/* Custom badge styles */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-primary {
    background-color: var(--color-primary);
    color: var(--background);
}

.badge-secondary {
    background-color: var(--color-secondary);
    color: var(--background);
}

.badge-success {
    background-color: var(--color-success);
    color: var(--background);
}

.badge-warning {
    background-color: var(--color-warning);
    color: var(--background);
}

.badge-danger {
    background-color: var(--color-danger);
    color: var(--foreground);
}

.badge-info {
    background-color: var(--color-info);
    color: var(--background);
}

/* Custom modal styles */
.modal {
    @apply fixed inset-0 z-50 flex items-center justify-center p-4;
    background-color: rgba(22, 23, 27, 0.8);
}

.modal-content {
    background-color: var(--card);
    color: var(--card-foreground);
    @apply rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto;
}

.modal-header {
    @apply flex items-center justify-between p-4 border-b;
    border-color: var(--border);
}

.modal-body {
    @apply p-4;
}

.modal-footer {
    @apply flex justify-end gap-3 p-4 border-t;
    border-color: var(--border);
}

/* Custom navigation styles */
.nav-item {
    color: var(--foreground);
    @apply flex items-center gap-2 px-4 py-3 transition-colors whitespace-nowrap;
}

.nav-item:hover {
    background-color: var(--muted);
}

.nav-item.active {
    background-color: var(--primary);
    color: var(--background);
}

.nav-item.has-submenu.active {
    background-color: var(--primary);
    color: var(--background);
}

.nav-item.has-submenu.active:hover {
    background-color: var(--color-primary-hover);
}

/* Navigation submenu styles */
#agenda-submenu,
#colaboradores-submenu {
    background-color: var(--primary);
    color: var(--background);
    @apply absolute left-0 top-full z-50 w-48 shadow-lg rounded-b-md border-0;
    min-width: 12rem;
}

#agenda-submenu a,
#colaboradores-submenu a {
    color: var(--background);
    @apply flex items-center gap-2 px-4 py-3 transition-colors;
    border-bottom: 1px solid rgba(22, 23, 27, 0.1);
}

#agenda-submenu a:last-child,
#colaboradores-submenu a:last-child {
    border-bottom: none;
}

#agenda-submenu a:hover,
#colaboradores-submenu a:hover {
    background-color: var(--color-primary-hover);
}

/* Ensure submenus are visible */
.nav .relative {
    @apply overflow-visible;
}

/* Custom dropdown styles */
.dropdown {
    @apply relative;
}

.dropdown-menu {
    background-color: var(--card);
    color: var(--foreground);
    @apply absolute left-0 top-full mt-1 w-48 shadow-lg rounded-md z-50;
}

.dropdown-item {
    color: var(--foreground);
    @apply flex items-center gap-2 px-4 py-3 transition-colors;
}

.dropdown-item:hover {
    background-color: var(--muted);
}

/* Bootstrap-datepicker: flutuante e posicionado absoluto (não no rodapé) */
.datepicker {
    position: absolute !important;
    z-index: 1060;
    display: none;
    min-width: 260px;
    padding: 0.75rem;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.datepicker.dropdown-menu {
    top: 0;
    left: 0;
    margin: 0;
}
.datepicker table {
    width: 100%;
}
.datepicker th,
.datepicker td {
    padding: 0.25rem;
    text-align: center;
}
.datepicker .prev,
.datepicker .next,
.datepicker .switch {
    cursor: pointer;
}
.datepicker .dow {
    color: var(--muted-foreground);
    font-size: 0.75rem;
}
.datepicker .day:hover,
.datepicker .month:hover,
.datepicker .year:hover {
    background-color: var(--muted);
    border-radius: 0.25rem;
}
.datepicker .active.day,
.datepicker .active.month,
.datepicker .active.year {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: 0.25rem;
}
.datepicker .old,
.datepicker .new {
    color: var(--muted-foreground);
}

/* Sidebar: desktop coluna fixa, mobile drawer */
#sidebar {
    background-color: var(--background);
    color: var(--foreground);
}

@media (min-width: 768px) {
    #sidebar {
        min-height: 0;
    }
}

/* Custom calendar styles */
.calendar-grid {
    @apply grid grid-cols-7;
}

.calendar-day {
    background-color: var(--card);
    border-color: var(--border);
    @apply min-h-[120px] border-r border-b p-2;
}

.calendar-day.other-month {
    background-color: var(--muted);
}

.calendar-day.today {
    background-color: var(--primary);
    background-opacity: 0.1;
}

.calendar-day-number {
    color: var(--foreground);
    @apply text-sm font-medium;
}

.calendar-day-number.today {
    color: var(--primary);
}

.calendar-day-number.other-month {
    color: var(--muted-foreground);
}

.calendar-appointment {
    background-color: var(--primary);
    color: var(--background);
    @apply text-xs p-1 rounded truncate cursor-pointer transition-colors;
}

.calendar-appointment:hover {
    background-color: var(--color-primary-hover);
}

/* Custom loading states */
.loading {
    @apply opacity-50 pointer-events-none;
}

.loading::after {
    content: '';
    background-color: var(--card);
    background-opacity: 0.75;
    @apply absolute inset-0 flex items-center justify-center;
}

.loading::after::before {
    content: '';
    border-color: var(--primary);
    border-top-color: transparent;
    @apply w-6 h-6 border-2 rounded-full animate-spin;
}

/* Custom animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

.animate-scale-in {
    animation: scaleIn 0.2s ease-out;
}

/* Custom responsive utilities */
@media (max-width: 640px) {
    .mobile-hidden {
        display: none;
    }

    .mobile-full {
        width: 100%;
    }

    .mobile-stack {
        flex-direction: column;
    }
}

@media (min-width: 768px) {
    .desktop-hidden {
        display: none;
    }
}

/* Custom print styles */
@media print {
    .no-print {
        display: none !important;
    }

    .print-break {
        page-break-before: always;
    }

    .print-avoid-break {
        page-break-inside: avoid;
    }
}

/* Custom dark mode support */
@media (prefers-color-scheme: dark) {
    .dark-mode-auto {
        @apply bg-gray-900 text-white;
    }

    .dark-mode-auto .card {
        @apply bg-gray-800 border-gray-700;
    }

    .dark-mode-auto .table thead {
        @apply bg-gray-800;
    }

    .dark-mode-auto .table tbody tr:hover {
        @apply bg-gray-700;
    }
}

/* Custom utility classes */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

/* Custom focus visible support */
.focus-visible:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Custom reduced motion support */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.notification {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    max-width: 400px;
    padding: 1rem;
    border-radius: var(--radius);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.3s ease;
}

.notification-info {
    background-color: var(--primary);
    color: var(--background);
}

.notification-success {
    background-color: var(--secondary);
    color: var(--background);
}

.notification-error {
    background-color: var(--destructive);
    color: var(--destructive-foreground);
}

.notification-warning {
    background-color: var(--color-warning);
    color: var(--background);
}

.notification-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.25rem;
    cursor: pointer;
    margin-left: 1rem;
}

/*
 * QQ Uploader - Modernized Styles
 * Updated to match the current site design system
 */
.qq-uploader,
.qq-uploader-improved {
    position: relative;
    width: 100%;
    background-color: var(--card);
    border-color: var(--border);
    @apply rounded-lg border shadow-sm;
}

/* Upload Button */
.qq-upload-button {
    background-color: #ffffff;
    color: #111827;
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors cursor-pointer;
    min-width: 120px;
}

.qq-upload-button:hover {
    background-color: #ffffff;
}

.qq-upload-button:focus {
    ring-color: var(--primary);
}

/* Drop Areas */
.qq-upload-drop-area,
.qq-upload-extra-drop-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 120px;
    z-index: 2;
    background-color: var(--primary);
    background-opacity: 0.1;
    border-color: var(--primary);
    @apply border-2 border-dashed rounded-lg flex items-center justify-center;
    transition: all 0.3s ease;
}

.qq-upload-drop-area span {
    color: var(--primary);
    @apply font-medium text-lg;
    text-align: center;
}

.qq-upload-extra-drop-area {
    position: relative;
    margin-top: 1rem;
    background-color: var(--muted);
    border-color: var(--border);
    color: var(--muted-foreground);
    min-height: 80px;
}

.qq-upload-drop-area-active {
    background-color: var(--primary);
    background-opacity: 0.2;
    border-color: var(--primary);
    transform: scale(1.02);
}

/* Upload List */
.qq-upload-list {
    @apply space-y-2 mt-4;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qq-upload-list li {
    background-color: var(--muted);
    border-color: var(--border);
    @apply flex items-center justify-between p-3 rounded-lg border transition-all duration-200;
    margin: 0;
    padding: 0.75rem;
}

.qq-upload-file {
    color: var(--foreground);
    @apply flex-1 text-sm font-medium truncate;
    margin-right: 0.75rem;
}

.qq-upload-spinner {
    border-color: var(--primary);
    border-top-color: transparent;
    @apply w-4 h-4 border-2 rounded-full animate-spin;
    display: inline-block;
    margin-right: 0.75rem;
}

.qq-upload-finished {
    color: var(--secondary);
    @apply w-4 h-4;
    display: none;
    margin-right: 0.75rem;
}

.qq-upload-size {
    color: var(--muted-foreground);
    @apply text-xs font-normal;
    margin-right: 0.75rem;
}

.qq-upload-cancel {
    color: var(--muted-foreground);
    @apply text-xs hover:text-red-500 cursor-pointer font-normal transition-colors;
    margin-right: 0.75rem;
}

.qq-upload-failed-text {
    color: var(--destructive);
    @apply text-xs font-medium italic;
    display: none;
    margin-right: 0.75rem;
}

.qq-upload-failed-icon {
    color: var(--destructive);
    @apply w-4 h-4;
    display: none;
    margin-right: 0.75rem;
}

.qq-upload-fail .qq-upload-failed-text {
    display: inline;
}

.qq-upload-fail .qq-upload-failed-icon {
    display: inline-block;
}

/* Success and Error States */
.qq-upload-list li.qq-upload-success {
    background-color: var(--secondary);
    background-opacity: 0.1;
    border-color: var(--secondary);
}

.qq-upload-list li.qq-upload-success .qq-upload-file {
    color: var(--secondary);
}

.qq-upload-list li.qq-upload-fail {
    background-color: var(--destructive);
    background-opacity: 0.1;
    border-color: var(--destructive);
}

.qq-upload-list li.qq-upload-fail .qq-upload-file {
    color: var(--destructive);
}

/* Progress Bar */
.qq-progress-bar {
    background-color: var(--muted);
    @apply w-full h-2 rounded-full overflow-hidden;
    width: 0%;
    margin-bottom: 0.5rem;
    display: none;
    position: relative;
}

.qq-progress-bar::after {
    content: '';
    background: linear-gradient(to right, var(--primary), var(--color-primary-hover));
    @apply absolute inset-0 rounded-full;
    width: 100%;
    transition: width 0.3s ease;
}

/* Upload Area States */
.qq-uploader.qq-uploader-dragover .qq-upload-drop-area {
    background-color: var(--primary);
    background-opacity: 0.2;
    border-color: var(--primary);
    transform: scale(1.05);
}

/* Enhanced Visual States */
.qq-upload-finished::before {
    content: '✓';
    color: var(--secondary);
    @apply font-bold;
}

.qq-upload-failed-icon::before {
    content: '✗';
    color: var(--destructive);
    @apply font-bold;
}

/* Upload Button with Icon */
.qq-upload-button::before {
    content: '📁';
    margin-right: 0.5rem;
}

/* Drop Area Text Enhancement */
.qq-upload-drop-area span::before {
    content: '⬇️ ';
    margin-right: 0.5rem;
}

/* File Type Icons */
.qq-upload-file[data-file-type="pdf"]::before {
    content: '📄 ';
    margin-right: 0.25rem;
}

.qq-upload-file[data-file-type="image"]::before {
    content: '🖼️ ';
    margin-right: 0.25rem;
}

.qq-upload-file[data-file-type="document"]::before {
    content: '📝 ';
    margin-right: 0.25rem;
}

/* Responsive Design */
@media (max-width: 640px) {
    .qq-upload-list li {
        @apply flex-col items-start space-y-2;
    }

    .qq-upload-file {
        @apply w-full;
        margin-right: 0;
    }

    .qq-upload-spinner,
    .qq-upload-finished,
    .qq-upload-size,
    .qq-upload-cancel,
    .qq-upload-failed-text,
    .qq-upload-failed-icon {
        margin-right: 0.5rem;
    }

    .qq-upload-button {
        @apply w-full justify-center;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {

    .qq-uploader,
    .qq-uploader-improved {
        @apply bg-gray-800 border-gray-700;
    }

    .qq-upload-list li {
        @apply bg-gray-700 border-gray-600;
    }

    .qq-upload-file {
        @apply text-gray-100;
    }

    .qq-upload-drop-area {
        @apply bg-gray-700 border-gray-500 text-gray-300;
    }
}

/* ========================================
 * ITEMUPLADO MODERN STYLES
 * ======================================== */

/* Container principal */
.itemuplado-modern {
    background-color: var(--card);
    border-color: var(--border);
    @apply rounded-lg shadow-sm mb-3 transition-all duration-200 hover:shadow-md border;
    position: relative;
    overflow: hidden;
}

/* Conteúdo do item */
.itemuplado-content {
    @apply flex items-center p-4;
    gap: 0.75rem;
}

/* Ícone do arquivo */
.itemuplado-icon {
    background-color: var(--muted);
    color: var(--foreground);
    @apply flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center text-lg;
    font-size: 1.25rem;
}

/* Informações do arquivo */
.itemuplado-info {
    @apply flex-1 min-w-0;
}

.itemuplado-name {
    color: var(--foreground);
    @apply text-sm font-medium truncate;
    line-height: 1.25;
}

.itemuplado-meta {
    color: var(--muted-foreground);
    @apply text-xs mt-1;
    line-height: 1.25;
}

/* Ações do item */
.itemuplado-actions {
    @apply flex-shrink-0;
}

.itemuplado-del {
    background-color: var(--muted);
    color: var(--muted-foreground);
    @apply w-8 h-8 hover:bg-red-100 hover:text-red-600 rounded-lg flex items-center justify-center transition-all duration-200;
    border: none;
    cursor: pointer;
}

.itemuplado-del:hover {
    @apply transform scale-105;
}

.itemuplado-del svg {
    @apply w-4 h-4;
}

/* Estados especiais */
.itemuplado-modern:hover {
    border-color: var(--primary);
    @apply shadow-md;
}

.itemuplado-modern.itemuplado-success {
    background-color: var(--secondary);
    background-opacity: 0.1;
    border-color: var(--secondary);
}

.itemuplado-modern.itemuplado-success .itemuplado-icon {
    background-color: var(--secondary);
    background-opacity: 0.2;
    color: var(--secondary);
}

.itemuplado-modern.itemuplado-error {
    background-color: var(--destructive);
    background-opacity: 0.1;
    border-color: var(--destructive);
}

.itemuplado-modern.itemuplado-error .itemuplado-icon {
    background-color: var(--destructive);
    background-opacity: 0.2;
    color: var(--destructive);
}

/* Animação de entrada */
.itemuplado-modern {
    animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 640px) {
    .itemuplado-content {
        @apply p-3;
        gap: 0.5rem;
    }

    .itemuplado-icon {
        @apply w-8 h-8 text-sm;
    }

    .itemuplado-name {
        @apply text-xs;
    }

    .itemuplado-meta {
        @apply text-xs;
    }

    .itemuplado-del {
        @apply w-7 h-7;
    }
}

/* Dark Mode para itemuplado */
@media (prefers-color-scheme: dark) {
    .itemuplado-modern {
        background-color: var(--card);
        border-color: var(--border);
    }

    .itemuplado-icon {
        background-color: var(--muted);
        color: var(--foreground);
    }

    .itemuplado-name {
        color: var(--foreground);
    }

    .itemuplado-meta {
        color: var(--muted-foreground);
    }

    .itemuplado-del {
        background-color: var(--muted);
        color: var(--muted-foreground);
    }

    .itemuplado-del:hover {
        background-color: var(--destructive);
        background-opacity: 0.2;
        color: var(--destructive);
    }

    .itemuplado-modern.itemuplado-success {
        background-color: var(--secondary);
        background-opacity: 0.1;
        border-color: var(--secondary);
    }

    .itemuplado-modern.itemuplado-success .itemuplado-icon {
        background-color: var(--secondary);
        background-opacity: 0.2;
        color: var(--secondary);
    }

    .itemuplado-modern.itemuplado-error {
        background-color: var(--destructive);
        background-opacity: 0.1;
        border-color: var(--destructive);
    }

    .itemuplado-modern.itemuplado-error .itemuplado-icon {
        background-color: var(--destructive);
        background-opacity: 0.2;
        color: var(--destructive);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}