@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    font-family: 'Inter', system-ui, sans-serif;
}

/* Glassmorphism */
.glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.dark .glass {
    background: rgba(23, 23, 27, 0.85);
    border: 1px solid rgba(124, 58, 237, 0.25);
}

/* Hover effects */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 
                0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Purple accent buttons */
.purple-btn {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    transition: all 0.3s ease;
}

.purple-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.5);
}

/* Modal animations */
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-in { animation: modalIn 0.2s cubic-bezier(0.16,1,0.3,1) forwards; }

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.5);
    border-radius: 20px;
}

/* ─── Единая система анимаций ACOM ─────────────────────── */

/* Оверлей модалок — плавный blur + opacity */
.modal-overlay {
    transition: opacity 0.4s ease, backdrop-filter 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}
.modal-overlay.instant-close {
    transition: opacity 0.2s ease, backdrop-filter 0.2s ease;
}
.modal-overlay.open {
    opacity: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Тело модалки — pop-up снизу */
@keyframes modalBodyIn {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes modalBodyOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(10px) scale(0.97); }
}
.modal-body-in  { animation: modalBodyIn  0.28s cubic-bezier(0.16,1,0.3,1) forwards; }
.modal-body-out { animation: modalBodyOut 0.2s  ease-in                    forwards; }

/* Confirm dialog — pop из центра */
@keyframes confirmBodyIn {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
@keyframes confirmBodyOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(0.92) translateY(8px); }
}
.confirm-open { animation: confirmBodyIn  0.22s cubic-bezier(0.16,1,0.3,1) forwards; }
.confirm-close{ animation: confirmBodyOut 0.17s ease-in                    forwards; }

/* Toast — стек с плавным сдвигом вниз */
@keyframes toastIn  { from { opacity:0; transform:translateY(-10px) scale(0.96); } to { opacity:1; transform:none; } }
@keyframes toastOut { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(-6px) scale(0.96) ; } }
.toast-enter { animation: toastIn  0.32s cubic-bezier(0.16,1,0.3,1) forwards; }
.toast-leave { animation: toastOut 0.22s ease-in                    forwards; }

/* Toast стек — соседние тосты плавно двигаются */
#toast-container > * {
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1),
                opacity   0.25s ease;
}

/* Дропдаун — разворот из верхнего края */
@keyframes dropIn {
    from { opacity: 0; transform: scaleY(0.88) translateY(-6px); }
    to   { opacity: 1; transform: scaleY(1)    translateY(0); }
}
@keyframes dropOut {
    from { opacity: 1; transform: scaleY(1)    translateY(0); }
    to   { opacity: 0; transform: scaleY(0.88) translateY(-6px); }
}
.dropdown-open  { animation: dropIn  0.18s cubic-bezier(0.16,1,0.3,1) forwards; transform-origin: top center; }
.dropdown-close { animation: dropOut 0.14s ease-in                    forwards; transform-origin: top center; }

/* Нотиф-колокольчик дропдаун — из правого края */
@keyframes notifDropIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes notifDropOut {
    from { opacity: 1; transform: translateY(0)    scale(1); }
    to   { opacity: 0; transform: translateY(-6px) scale(0.97); }
}
.notif-drop-in  { animation: notifDropIn  0.2s cubic-bezier(0.16,1,0.3,1) forwards; }
.notif-drop-out { animation: notifDropOut 0.15s ease-in                   forwards; }

/* Accordion / expand panels */
@keyframes expandIn {
    from { opacity: 0; max-height: 0; }
    to   { opacity: 1; max-height: 600px; }
}
.panel-expand {
    animation: expandIn 0.28s cubic-bezier(0.16,1,0.3,1) forwards;
    overflow: hidden;
}

/* Sidebar link active highlight */
.sidebar-link {
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.sidebar-link:hover { transform: translateX(2px); }
.sidebar-link.active {
    background: rgba(124,58,237,0.08);
    color: #7c3aed;
}

/* Кнопки — активное нажатие */
button:active:not(:disabled) {
    transform: scale(0.97);
    transition: transform 0.08s ease;
}

/* Плавные переходы для input focus */
input, textarea, select {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}