/* ============================================
   Custom Styles for Heavy Rental Management
   ============================================ */

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.stat-card { animation: fadeIn 0.5s ease-out; }
.card { animation: fadeIn 0.5s ease-out 0.1s both; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #1a5276; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #154360; }

/* Table improvements */
.table th { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
.table td { vertical-align: middle; font-size: 0.9rem; }

/* Badge improvements */
.badge { font-weight: 500; padding: 5px 10px; font-size: 0.75rem; }

/* Form improvements */
.form-label { font-weight: 500; font-size: 0.85rem; color: #555; }
.form-control:focus, .form-select:focus {
    border-color: #1a5276;
    box-shadow: 0 0 0 0.2rem rgba(26, 82, 118, 0.15);
}

/* Print styles */
@media print {
    .sidebar, .top-bar, .btn, .no-print, .modal { display: none !important; }
    .main-content { margin-left: 0 !important; padding: 0 !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
    body { background: white !important; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .stat-card h2 { font-size: 1.3rem !important; }
    .table-responsive { font-size: 0.8rem; }
}

/* Loading spinner */
.loading-spinner {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

/* Tooltip */
[data-tooltip] {
    position: relative;
    cursor: pointer;
}

/* Card hover effect */
.card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

/* Status indicator */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}
.status-dot.green { background: #198754; }
.status-dot.yellow { background: #ffc107; }
.status-dot.red { background: #dc3545; }
.status-dot.blue { background: #0dcaf0; }