/* ================================================
   Admin Panel Custom Colors & Animations
   ================================================ */

/* Color Variables */
:root {
    --primary-green: #1AFE83;
    --secondary-purple: #8B5CF6;
    --background-light: #F9FAFB;
    --text-dark: #111827;
    --card-white: #ffffff;
}

/* ================================================
   1. Page Load Animation
   ================================================ */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.main-content, 
.right_col, 
.page-content,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, 
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    animation: fadeIn 0.5s ease;
}

/* ================================================
   2. Card Hover Animation
   ================================================ */
.card, 
.panel, 
.x_panel,
.tile-stats,
.panel.widget,
.x_panel,
.bs-glyphicons,
.list-group,
.content-grid {
    transition: all 0.3s ease;
}

.card:hover, 
.panel:hover, 
.x_panel:hover,
.tile-stats:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* ================================================
   3. Button Hover Animation
   ================================================ */
.btn, 
button,
.button,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-default {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn:hover, 
button:hover, 
.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(26,254,131,0.3);
}

.btn:active,
button:active {
    transform: translateY(0);
}

/* Gradient Buttons */
.btn-primary, 
.btn-success {
    background: linear-gradient(135deg, #1AFE83, #0EA5E9) !important;
    border: none !important;
    color: #111827 !important;
    font-weight: 600;
}

.btn-primary:hover, 
.btn-success:hover {
    background: linear-gradient(135deg, #0EA5E9, #8B5CF6) !important;
}

.btn-info {
    background: linear-gradient(135deg, #8B5CF6, #6366F1) !important;
    border: none !important;
    color: #ffffff !important;
}

.btn-info:hover {
    background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
}

.btn-warning {
    background: linear-gradient(135deg, #F59E0B, #FBBF24) !important;
    border: none !important;
    color: #111827 !important;
}

.btn-danger {
    background: linear-gradient(135deg, #EF4444, #F87171) !important;
    border: none !important;
    color: #ffffff !important;
}

/* ================================================
   4. Sidebar Menu Items Animation
   ================================================ */
.sidebar li, 
.nav li, 
.menu-item,
.sidebar-menu li,
.nav_menu ul li,
.nav.side > li {
    transition: all 0.3s ease;
}

.sidebar li:hover, 
.nav li:hover, 
.menu-item:hover,
.sidebar-menu li:hover,
.nav_menu ul li:hover,
.nav.side > li:hover {
    padding-left: 20px !important;
    background: rgba(26,254,131,0.1) !important;
}

/* Sidebar menu link hover */
.sidebar li a:hover,
.nav li a:hover,
.menu-item a:hover {
    color: #1AFE83 !important;
}

/* ================================================
   5. Table Row Hover Animation
   ================================================ */
.table tr, 
.data tr,
.table tbody tr,
.table > tbody > tr,
.table-hover tbody tr,
.bootstrap-table .table > tbody > tr:hover {
    transition: background 0.2s ease;
}

.table tr:hover, 
.data tr:hover,
.table tbody tr:hover,
.table > tbody > tr:hover,
.table-hover tbody tr:hover,
.bootstrap-table .table > tbody > tr:hover {
    background: #f0fdf4 !important;
}

/* Table header styling */
.table thead th,
.table > thead > tr > th {
    background: linear-gradient(135deg, #1AFE83, #0EA5E9) !important;
    color: #111827 !important;
    font-weight: 600;
}

/* ================================================
   6. Dropdown Animation
   ================================================ */
.dropdown-menu {
    animation: dropdownFade 0.2s ease;
}

@keyframes dropdownFade {
    from { 
        opacity: 0; 
        transform: translateY(-10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Dropdown menu items */
.dropdown-menu li a:hover {
    background: rgba(26,254,131,0.1) !important;
    color: #1AFE83 !important;
}

/* ================================================
   7. Modal Animation
   ================================================ */
.modal, 
.modal-content,
.modal-dialog {
    animation: modalPop 0.3s ease;
}

@keyframes modalPop {
    from { 
        transform: scale(0.9); 
        opacity: 0; 
    }
    to { 
        transform: scale(1); 
        opacity: 1; 
    }
}

/* Modal header styling */
.modal-header {
    border-bottom: 2px solid #1AFE83 !important;
}

.modal-title {
    color: #111827 !important;
    font-weight: 600;
}

/* Modal footer buttons */
.modal-footer .btn-primary {
    background: linear-gradient(135deg, #1AFE83, #0EA5E9) !important;
}

/* ================================================
   8. Loading Spinner Animation
   ================================================ */
.spinner, 
.loading,
.loader,
.ajax-loading,
.dataTables_processing {
    border: 3px solid #f3f3f3 !important;
    border-top: 3px solid #1AFE83 !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loading overlay */
.loading-overlay {
    background: rgba(255,255,255,0.8) !important;
}

/* ================================================
   Additional Color Enhancements
   ================================================ */

/* Text colors */
body, 
p, 
div,
span,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #111827;
}

/* Links */
a {
    color: #8B5CF6;
    transition: color 0.3s ease;
}

a:hover {
    color: #1AFE83;
}

/* Page background */
body {
    background-color: #F9FAFB;
}

/* Right column/main content background */
.right_col {
    background-color: #F9FAFB;
}

/* Navbar styling */
.navbar {
    background: linear-gradient(135deg, #1AFE83, #0EA5E9) !important;
}

.navbar-nav > li > a {
    color: #111827 !important;
}

.navbar-nav > li > a:hover {
    background: rgba(0,0,0,0.1) !important;
}

/* Sidebar styling enhancements */
.sidebar {
    background: #ffffff;
}

.nav.side > li > a {
    color: #111827;
    transition: all 0.3s ease;
}

.nav.side > li > a:hover {
    color: #1AFE83 !important;
}

/* Active menu item */
.nav.side > li.active > a {
    background: rgba(26,254,131,0.15) !important;
    color: #1AFE83 !important;
    border-left: 3px solid #1AFE83;
}

/* Card/Panel styling */
.panel,
.x_panel,
.card {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border: none;
    border-radius: 8px;
}

/* Tile stats styling */
.tile-stats {
    background: #ffffff;
    border-left: 4px solid #1AFE83;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Form controls focus */
.form-control:focus {
    border-color: #1AFE83 !important;
    box-shadow: 0 0 0 3px rgba(26,254,131,0.2) !important;
}

/* Checkbox and radio styling */
.icheckbox_flat-green.checked,
.iradio_flat-green.checked {
    background-color: #1AFE83 !important;
}

/* Progress bar */
.progress-bar {
    background: linear-gradient(135deg, #1AFE83, #0EA5E9) !important;
}

/* Badge styling */
.badge {
    background: linear-gradient(135deg, #1AFE83, #8B5CF6) !important;
}

/* Alert styling */
.alert-success {
    background: linear-gradient(135deg, #D1FAE5, #A7F3D0) !important;
    border-color: #1AFE83 !important;
    color: #065F46 !important;
}

.alert-info {
    background: linear-gradient(135deg, #DBEAFE, #BFDBFE) !important;
    border-color: #8B5CF6 !important;
    color: #1E40AF !important;
}

.alert-warning {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important;
    border-color: #F59E0B !important;
    color: #92400E !important;
}

.alert-danger {
    background: linear-gradient(135deg, #FEE2E2, #FECACA) !important;
    border-color: #EF4444 !important;
    color: #991B1B !important;
}

/* Pagination */
.pagination > li > a,
.pagination > li > span {
    color: #111827;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
    background: rgba(26,254,131,0.1);
    color: #1AFE83;
}

.pagination > .active > a,
.pagination > .active > span {
    background: linear-gradient(135deg, #1AFE83, #0EA5E9) !important;
    border-color: #1AFE83 !important;
}

/* Breadcrumb */
.breadcrumb {
    background: transparent;
}

.breadcrumb > li + li::before {
    color: #8B5CF6;
}

.breadcrumb > .active {
    color: #1AFE83;
}

/* Tooltip */
.tooltip-inner {
    background: linear-gradient(135deg, #1AFE83, #8B5CF6) !important;
    color: #111827;
}

.tooltip-arrow {
    border-top-color: #1AFE83 !important;
}

/* Popover */
.popover {
    border: 2px solid #1AFE83;
}

.popover-title {
    background: linear-gradient(135deg, #1AFE83, #0EA5E9);
    color: #111827;
}

/* Switchery */
.js-switch:checked + .switchery {
    background: linear-gradient(135deg, #1AFE83, #0EA5E9) !important;
    border-color: #1AFE83 !important;
}

/* Select2 */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(26,254,131,0.2) !important;
    color: #111827;
}

.select2-container--default .select2-selection--single {
    border-color: #e5e7eb !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #1AFE83 !important;
    box-shadow: 0 0 0 3px rgba(26,254,131,0.2) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #1AFE83, #0EA5E9) !important;
    border-color: #1AFE83 !important;
    color: #111827 !important;
}

.dataTables_wrapper .dataTables_length select {
    border-color: #1AFE83 !important;
}

/* Chart colors for consistency */
.chartjs-render-monitor {
    border-color: #8B5CF6 !important;
}

/* Calendar events */
.fc-event {
    background: linear-gradient(135deg, #1AFE83, #8B5CF6) !important;
    border-color: #1AFE83 !important;
}

/* File upload dropzone */
.dropzone {
    border: 2px dashed #1AFE83 !important;
    background: #f0fdf4 !important;
}

.dropzone:hover {
    border-color: #8B5CF6 !important;
}

.dropzone .dz-message {
    color: #111827;
}

/* Lightbox */
.lb-nav a.lb-next,
.lb-nav a.lb-prev {
    color: #1AFE83 !important;
}

.lb-caption {
    color: #111827 !important;
}

/* Sweet Alert */
.swal2-confirm {
    background: linear-gradient(135deg, #1AFE83, #0EA5E9) !important;
}

.swal2-cancel {
    background: linear-gradient(135deg, #EF4444, #F87171) !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #F9FAFB;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #1AFE83, #8B5CF6);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1AFE83;
}

/* Focus states for accessibility */
*:focus {
    outline-color: #1AFE83 !important;
}

/* Pager */
.pager li > a {
    border-color: #1AFE83;
    color: #111827;
}

.pager li > a:hover {
    background: rgba(26,254,131,0.1);
    border-color: #1AFE83;
    color: #1AFE83;
}

/* List group */
.list-group-item {
    border-color: #e5e7eb;
}

.list-group-item.active {
    background: linear-gradient(135deg, #1AFE83, #0EA5E9) !important;
    border-color: #1AFE83 !important;
    color: #111827 !important;
}

/* Tabs */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-top-color: #1AFE83 !important;
    color: #111827 !important;
}

.nav-tabs > li > a:hover {
    border-color: transparent;
    border-top: 3px solid #1AFE83;
}

/* Wells */
.well {
    background: #ffffff;
    border: none;
    border-left: 4px solid #1AFE83;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Labels */
.label-success {
    background: linear-gradient(135deg, #1AFE83, #0EA5E9) !important;
}

.label-primary {
    background: linear-gradient(135deg, #8B5CF6, #6366F1) !important;
}

/* Custom highlight for search */
mark, .highlight {
    background: rgba(26,254,131,0.3);
    color: #111827;
}

/* Print styles */
@media print {
    .btn, .sidebar, .navbar {
        display: none !important;
    }
    
    .right_col {
        margin: 0 !important;
        padding: 0 !important;
    }
}