VERALA/smartadmin-dashboard

1/* Custom CSS for SmartAdmin Dashboard */2@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');3 4* {5    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;6}7 8/* Smooth transitions */9* {10    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;11}12 13/* Custom scrollbar */14::-webkit-scrollbar {15    width: 8px;16    height: 8px;17}18 19::-webkit-scrollbar-track {20    background: #1a1a1a;21}22 23::-webkit-scrollbar-thumb {24    background: #4b5563;25    border-radius: 4px;26}27 28::-webkit-scrollbar-thumb:hover {29    background: #6b7280;30}31 32/* Animations */33@keyframes slideIn {34    from {35        transform: translateX(-100%);36        opacity: 0;37    }38    to {39        transform: translateX(0);40        opacity: 1;41    }42}43 44@keyframes fadeIn {45    from {46        opacity: 0;47        transform: translateY(10px);48    }49    to {50        opacity: 1;51        transform: translateY(0);52    }53}54 55.animate-fade-in {56    animation: fadeIn 0.5s ease-out forwards;57}58 59/* Glassmorphism effect for cards */60.glass-card {61    background: rgba(31, 41, 55, 0.6);62    backdrop-filter: blur(10px);63    -webkit-backdrop-filter: blur(10px);64    border: 1px solid rgba(75, 85, 99, 0.3);65}66 67/* Hover effects */68.hover-lift {69    transition: transform 0.2s, box-shadow 0.2s;70}71 72.hover-lift:hover {73    transform: translateY(-4px);74    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);75}76 77/* Custom button styles */78.btn-primary {79    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;80}81 82.btn-secondary {83    @apply bg-gray-700 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;84}85 86/* Status badges */87.status-badge {88    @apply px-2 py-1 text-xs rounded-full font-medium;89}90 91.status-new {92    @apply bg-yellow-600 text-yellow-100;93}94 95.status-urgent {96    @apply bg-red-600 text-red-100;97}98 99.status-progress {100    @apply bg-blue-600 text-blue-100;101}102 103.status-done {104    @apply bg-green-600 text-green-100;105}106 107/* Table row hover */108.table-row-hover {109    @apply hover:bg-gray-700 transition-colors duration-150;110}111 112/* Input focus styles */113.form-input {114    @apply bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-400;115}116 117/* Loading shimmer */118.shimmer {119    background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);120    background-size: 200% 100%;121    animation: shimmer 1.5s infinite;122}123 124@keyframes shimmer {125    0% {126        background-position: 200% 0;127    }128    100% {129        background-position: -200% 0;130    }131}132 133/* Responsive adjustments */134@media (max-width: 768px) {135    .container {136        padding-left: 1rem;137        padding-right: 1rem;138    }139    140    .summary-card {141        margin-bottom: 1rem;142    }143}144 145/* Dark mode specific */146.dark {147    color-scheme: dark;148}149 150/* Sidebar active state */151.sidebar-item-active {152    @apply bg-blue-600 bg-opacity-20 border-l-4 border-blue-600;153}154 155/* Chart container */156.chart-container {157    position: relative;158    height: 100%;159    width: 100%;160}161 162/* Tooltip custom */163.custom-tooltip {164    @apply bg-gray-800 text-white text-sm rounded-lg px-3 py-2 border border-gray-600;165}166 167/* CCTV status animation */168.cctv-status-online {169    @apply relative;170}171 172.cctv-status-online::after {173    content: '';174    @apply absolute top-0 right-0 w-3 h-3 bg-green-500 rounded-full animate-pulse;175}176 177/* Mobile menu overlay */178.mobile-overlay {179    @apply fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden;180}181 182/* Transitions for sidebar */183.sidebar-transition {184    transition: transform 0.3s ease-in-out;185}186 187/* Focus outline for accessibility */188.focus-outline:focus {189    @apply outline-none ring-2 ring-blue-500 ring-opacity-50;190}191 192/* Custom date picker styling */193input[type="date"]::-webkit-calendar-picker-indicator {194    filter: invert(1);195    opacity: 0.6;196}197 198input[type="date"]::-webkit-calendar-picker-indicator:hover {199    opacity: 1;200}