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

/* ─── Page Animations ─────────────────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes dropIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(20px); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.93) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Animation Classes ───────────────────────────────────────────────────── */
.page-enter    { animation: fadeIn 0.4s ease both; }
.header-enter  { animation: fadeInDown 0.4s ease both; }
.card-enter-1  { animation: fadeInUp 0.4s ease both; animation-delay: 0.05s; }
.card-enter-2  { animation: fadeInUp 0.4s ease both; animation-delay: 0.15s; }
.card-enter-3  { animation: fadeInUp 0.4s ease both; animation-delay: 0.25s; }
.row-enter     { animation: fadeInUp 0.35s ease both; }
.card-enter    { animation: cardFadeIn 0.35s ease both; }
.toast-enter   { animation: slideUp 0.3s cubic-bezier(0.34,1.56,0.64,1) both; }
.toast-exit    { animation: slideDown 0.25s ease both; }
.modal-backdrop-enter { animation: fadeIn 0.2s ease both; }
.modal-card-enter     { animation: scaleIn 0.25s cubic-bezier(0.34,1.2,0.64,1) both; }

/* ─── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar-link {
    position: relative;
    transition: color 0.2s ease, background 0.2s ease;
}
.sidebar-link .active-bar {
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px; height: 60%;
    background: #3b82f6;
    border-radius: 0 2px 2px 0;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.sidebar-link.active .active-bar {
    transform: translateY(-50%) scaleY(1);
}
.logo-text {
    max-width: 0;
    opacity: 0;
    transition: max-width 0.3s ease, opacity 0.3s ease, margin-left 0.3s ease;
    margin-left: 0;
}
.logo-link:hover .logo-text {
    max-width: 100px;
    opacity: 1;
    margin-left: 2px;
}

/* ─── Row Hover ───────────────────────────────────────────────────────────── */
.row-hover { transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.row-hover:hover { background: #f1f5f9; }
.row-hover:hover td { color: #1d4ed8 !important; }

/* ─── Button Styles ───────────────────────────────────────────────────────── */
.btn-edit {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
    background-color: #eff6ff;
    color: #2563eb;
    transition: background 0.15s ease;
    cursor: pointer;
}
.btn-edit:hover { background-color: #dbeafe; }

.btn-delete {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid #fecaca;
    background-color: #fff1f2;
    color: #dc2626;
    transition: background 0.15s ease;
    cursor: pointer;
}
.btn-delete:hover { background-color: #fee2e2; }

.btn-approve {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 0.75rem;
    border: 1px solid #bbf7d0;
    background-color: #f0fdf4;
    color: #16a34a;
    transition: background 0.15s ease;
    cursor: pointer;
}
.btn-approve:hover { background-color: #dcfce7; }

.btn-reject {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid #fecaca;
    background-color: #fff1f2;
    color: #dc2626;
    transition: background 0.15s ease;
    cursor: pointer;
}
.btn-reject:hover { background-color: #fee2e2; }

.btn-restore {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid #bbf7d0;
    background-color: #f0fdf4;
    color: #16a34a;
    transition: background 0.15s ease;
    cursor: pointer;
}
.btn-restore:hover { background-color: #dcfce7; }

.btn-view {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    color: #475569;
    transition: background 0.15s ease;
    cursor: pointer;
}
.btn-view:hover { background-color: #f1f5f9; }

/* ─── Dark Mode - Body & Base ─────────────────────────────────────────────── */
.dark body {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}
.dark .login-bg { background: #0f172a !important; }

/* ─── Dark Mode - Backgrounds ─────────────────────────────────────────────── */
/* ─── Dark Mode - Structural Backgrounds ─────────────────────────────────── */
.dark .bg-white           { background-color: #253347 !important; }
.dark .bg-slate-50        { background-color: #1a2535 !important; }
.dark .bg-gray-50         { background-color: #1a2535 !important; }
.dark .bg-gray-100        { background-color: #253347 !important; }
.dark .bg-gradient-to-br  { background: #1a2535 !important; }
.dark .dark\:bg-slate-800 { background-color: #253347 !important; }
.dark .dark\:bg-slate-900 { background-color: #1a2535 !important; }

/* ─── Dark Mode - Status Badges ──────────────────────────────────────────── */
.dark .bg-slate-100 {
    background-color: #3d4f63 !important;
    border: 1px solid #546478;
    color: #e2e8f0 !important;
}

.dark .bg-green-50,
.dark .bg-green-100 {
    background-color: #1a4a38 !important;
    border: 1px solid #22865a;
    color: #bbf7d0 !important;
}

.dark .bg-yellow-50 {
    background-color: #4a3510 !important;
    border: 1px solid #a16207;
    color: #fde68a !important;
}

.dark .bg-orange-50,
.dark .bg-orange-100 {
    background-color: #5a3020 !important;
    border: 1px solid #ea580c;
    color: #fed7aa !important;
}

.dark .bg-red-50 {
    background-color: #4a2428 !important;
    border: 1px solid #991b1b;
    color: #fecaca !important;
}

.dark .bg-blue-50,
.dark .bg-blue-100 {
    background-color: #1e3358 !important;
    border: 1px solid #2563eb;
    color: #93c5fd !important;
}

.dark .bg-purple-100 {
    background-color: #4a1272 !important;
    border: 1px solid #9333ea;
    color: #e9d5ff !important;
}

/* ─── Dark Mode - Text ────────────────────────────────────────────────────── */
.dark .text-slate-400    { color: #94a3b8 !important; }
.dark .text-slate-500    { color: #fbfbfc !important; }
.dark .text-slate-600,
.dark .text-slate-700,
.dark .text-slate-800,
.dark .text-slate-900    { color: #f1f5f9 !important; }
.dark .text-gray-400     { color: #475569 !important; }
.dark .text-gray-500     { color: #64748b !important; }
.dark .text-gray-600     { color: #94a3b8 !important; }
.dark .text-gray-700     { color: #94a3b8 !important; }
.dark .text-gray-800,
.dark .text-gray-900     { color: #f1f5f9 !important; }
.dark .text-green-700    { color: #4ade80 !important; }
.dark .text-green-800    { color: #86efac !important; }
.dark .text-yellow-700   { color: #fbbf24 !important; }
.dark .text-orange-700   { color: #fb923c !important; }
.dark .text-red-700      { color: #f87171 !important; font-weight: bold !important; }
.dark .text-blue-700     { color: #60a5fa !important; }
.dark .text-purple-700   { color: #c084fc !important; }
.dark .dark\:text-white      { color: #ffffff !important; }
.dark .dark\:text-slate-100  { color: #f1f5f9 !important; }
.dark .dark\:text-slate-400  { color: #f1f5f9 !important; }
.dark .dark\:text-slate-500  { color: #f1f5f9 !important; }
.dark input::placeholder  { color: #475569 !important; }

/* ─── Dark Mode - Borders ─────────────────────────────────────────────────── */
.dark .border-slate-200,
.dark .border-slate-300       { border-color: #334155 !important; }
.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300        { border-color: #334155 !important; }
.dark .border-green-200,
.dark .border-green-300       { border-color: #16653400 !important; }
.dark .border-red-200,
.dark .border-red-300         { border-color: #991b1b !important; }
.dark .border-blue-200        { border-color: #1d4ed8 !important; }
.dark .border-purple-200      { border-color: #6b21a8 !important; }
.dark .dark\:border-slate-700 { border-color: #475569 !important; }

/* ─── Dark Mode - Inputs ──────────────────────────────────────────────────── */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="current-password"] {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
.dark label { color: #cbd5e1 !important; }

/* ─── Dark Mode - Hover ───────────────────────────────────────────────────── */
.dark .row-hover:hover           { background: #1e3a5f !important; }
.dark .row-hover:hover td        { color: #ffffff !important; }
.dark .hover\:bg-red-50:hover    { background-color: #3b1a1a !important; }
.dark .hover\:bg-slate-50:hover,
.dark .hover\:bg-slate-100:hover { background-color: #334155 !important; }
.dark .dark\:hover\:bg-slate-700:hover { background-color: #334155 !important; }

/* ─── Dark Mode - Table ───────────────────────────────────────────────────── */
.dark th { color: #94a3b8; }

/* ─── Dark Mode - Misc ────────────────────────────────────────────────────── */
.dark img.dark\:invert          { filter: invert(1) !important; }

.dark .divide-gray-100 > *      { border-color: #334155 !important; }
.dark .toast-enter,
.dark .toast-exit               { background-color: #ffffff !important; color: #166534 !important; }
/* ─── Table Header ────────────────────────────────────────────────────────── */
thead tr {
    background-color: #f1f5f9;
}

thead th {
    color: #334155 !important;
}

.dark thead tr {
    background-color: #1e3a5f !important;
}

.dark thead th {
    color: #f6f7f8 !important;
}