/**
 * UI Components - Extended Component Styling
 * Gayatri Hi-Tech Nursery Management System
 * 
 * Component-specific enhancements that don't break AdminLTE
 */

/* ============================================================
   LOGIN PAGE - NURSERY THEMED WITH ANIMATIONS
   ============================================================ */

.login-page {
  background: linear-gradient(135deg, #047857 0%, #10B981 50%, #059669 100%);
  position: relative;
  overflow: hidden;
  animation: gradientShift 15s ease infinite;
}

/* Animated gradient background */
@keyframes gradientShift {
  0%, 100% {
    background: linear-gradient(135deg, #047857 0%, #10B981 50%, #059669 100%);
  }
  50% {
    background: linear-gradient(135deg, #059669 0%, #047857 50%, #10B981 100%);
  }
}

/* Floating leaves animation */
.login-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
  pointer-events: none;
  animation: floatPattern 20s ease-in-out infinite;
}

@keyframes floatPattern {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-20px) scale(1.05); opacity: 0.8; }
}

/* Decorative plant elements */
.login-page::after {
  content: '🌿';
  position: absolute;
  font-size: 120px;
  opacity: 0.08;
  bottom: -20px;
  right: -20px;
  animation: gentleFloat 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

.login-box {
  z-index: 1;
  animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-logo {
  animation: fadeInDown 0.8s ease-out;
}

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

.login-logo a {
  color: white;
  font-weight: var(--ui-font-bold);
  font-size: var(--ui-text-3xl);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 4px 20px rgba(16, 185, 129, 0.2);
  display: inline-block;
  animation: glow 3s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 4px 20px rgba(16, 185, 129, 0.2); }
  50% { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 4px 30px rgba(16, 185, 129, 0.4); }
}

.login-card-body {
  border-radius: var(--ui-radius-2xl);
  padding: var(--ui-space-8);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 100px rgba(16, 185, 129, 0.1);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  animation: cardFloat 3s ease-in-out infinite;
}

@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.login-box-msg {
  font-size: var(--ui-text-lg);
  color: var(--ui-gray-600);
  font-weight: var(--ui-font-medium);
  margin-bottom: var(--ui-space-6);
  animation: fadeIn 1s ease-out 0.3s both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.login-page .form-control {
  height: 48px;
  font-size: var(--ui-text-base);
  transition: all var(--ui-transition-base);
}

.login-page .form-control:focus {
  transform: scale(1.02);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.login-page .btn-primary {
  height: 48px;
  font-size: var(--ui-text-base);
  font-weight: var(--ui-font-bold);
  position: relative;
  overflow: hidden;
}

.login-page .btn-primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.login-page .btn-primary:hover::before {
  width: 300px;
  height: 300px;
}

/* Plant icons floating in background */
.login-page .card {
  position: relative;
}

.login-page .card::before {
  content: '🌱';
  position: absolute;
  top: -40px;
  left: -40px;
  font-size: 80px;
  opacity: 0.1;
  animation: rotate 20s linear infinite;
  pointer-events: none;
}

.login-page .card::after {
  content: '🍃';
  position: absolute;
  bottom: -30px;
  right: -30px;
  font-size: 70px;
  opacity: 0.1;
  animation: rotate 15s linear infinite reverse;
  pointer-events: none;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Animated input groups */
.login-page .input-group {
  animation: fadeInUp 0.6s ease-out backwards;
}

.login-page .input-group:nth-child(1) {
  animation-delay: 0.4s;
}

.login-page .input-group:nth-child(2) {
  animation-delay: 0.5s;
}

.login-page .row {
  animation: fadeInUp 0.6s ease-out 0.6s backwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Remember me and button row */
.login-page .icheck-primary {
  animation: fadeIn 0.8s ease-out 0.7s both;
}

/* Links animation */
.login-page .mb-1 a {
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--ui-font-medium);
  transition: all var(--ui-transition-base);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.login-page .mb-1 a:hover {
  color: white;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  transform: translateX(3px);
}

/* ============================================================
   DASHBOARD ENHANCEMENTS
   ============================================================ */

/* Dashboard stats icons */
.small-box .icon {
  font-size: 90px;
  opacity: 0.25;
}

.small-box .inner {
  padding: var(--ui-space-5);
}

.small-box .inner h3 {
  font-size: var(--ui-text-4xl);
  font-weight: var(--ui-font-extrabold);
  margin: 0 0 var(--ui-space-2);
}

.small-box .inner p {
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-medium);
  text-transform: uppercase;
  letter-spacing: var(--ui-tracking-wide);
  opacity: 0.9;
}

/* ============================================================
   FORM ENHANCEMENTS
   ============================================================ */

/* Better checkbox styling */
.icheck-primary > input:first-child:checked + label::before {
  background-color: var(--ui-primary-600);
  border-color: var(--ui-primary-600);
}

.icheck-primary > label {
  font-weight: var(--ui-font-medium);
  color: var(--ui-gray-700);
}

/* Select2 Dropdown Enhancement */
.select2-container--default .select2-selection--single {
  border-radius: var(--ui-input-radius);
  border-color: var(--ui-border-color);
  height: calc(1.5em + 0.75rem + 2px);
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--ui-primary-500);
  box-shadow: var(--ui-input-focus-ring);
}

.select2-dropdown {
  border-radius: var(--ui-radius-lg);
  border-color: var(--ui-border-color);
  box-shadow: var(--ui-shadow-xl);
}

.select2-results__option--highlighted {
  background-color: var(--ui-primary-500) !important;
}

/* DateRangePicker Enhancement */
.daterangepicker {
  border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-2xl);
  border: 1px solid var(--ui-border-color);
  font-family: var(--ui-font-sans);
}

.daterangepicker .calendar-table {
  border-radius: var(--ui-radius-lg);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--ui-primary-600);
}

.daterangepicker .ranges li:hover {
  background-color: var(--ui-primary-50);
  color: var(--ui-primary-700);
}

.daterangepicker .ranges li.active {
  background-color: var(--ui-primary-600);
  color: white;
}

/* ============================================================
   TABLE ENHANCEMENTS - PRESERVE ALL TABLE IDs
   ============================================================ */

/* Better table card wrapper */
.card .table {
  margin-bottom: 0;
}

.card-body.p-0 .table {
  border-radius: 0;
}

.table td a {
  color: var(--ui-primary-600);
  font-weight: var(--ui-font-medium);
  transition: color var(--ui-transition-base);
}

.table td a:hover {
  color: var(--ui-primary-700);
  text-decoration: none;
}

.table td small {
  color: var(--ui-gray-500);
  font-size: var(--ui-text-xs);
}

/* Table actions icons */
.project-actions .btn i {
  margin-right: var(--ui-space-2);
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination .page-link {
  border-radius: var(--ui-radius-md);
  margin: 0 var(--ui-space-1);
  padding: var(--ui-space-2) var(--ui-space-4);
  font-weight: var(--ui-font-medium);
  color: var(--ui-gray-700);
  border: 1px solid var(--ui-border-color);
  transition: all var(--ui-transition-base);
}

.pagination .page-link:hover {
  background-color: var(--ui-primary-50);
  border-color: var(--ui-primary-500);
  color: var(--ui-primary-700);
}

.pagination .page-item.active .page-link {
  background-color: var(--ui-primary-600);
  border-color: var(--ui-primary-600);
  box-shadow: var(--ui-shadow-primary);
}

/* ============================================================
   SWEETALERT2 CUSTOM STYLING
   ============================================================ */

.swal2-popup {
  border-radius: var(--ui-radius-2xl) !important;
  padding: var(--ui-space-8) !important;
  font-family: var(--ui-font-sans) !important;
}

.swal2-title {
  font-size: var(--ui-text-2xl) !important;
  font-weight: var(--ui-font-bold) !important;
  color: var(--ui-gray-900) !important;
}

.swal2-confirm {
  background-color: var(--ui-primary-600) !important;
  border-radius: var(--ui-radius-lg) !important;
  padding: var(--ui-space-3) var(--ui-space-6) !important;
  font-weight: var(--ui-font-semibold) !important;
  box-shadow: var(--ui-shadow-primary) !important;
}

.swal2-confirm:hover {
  background-color: var(--ui-primary-700) !important;
}

.swal2-deny {
  background-color: var(--ui-danger-600) !important;
  border-radius: var(--ui-radius-lg) !important;
  padding: var(--ui-space-3) var(--ui-space-6) !important;
  font-weight: var(--ui-font-semibold) !important;
}

.swal2-cancel {
  background-color: var(--ui-gray-500) !important;
  border-radius: var(--ui-radius-lg) !important;
  padding: var(--ui-space-3) var(--ui-space-6) !important;
  font-weight: var(--ui-font-semibold) !important;
}

/* ============================================================
   SIDEBAR ENHANCEMENTS
   ============================================================ */

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--ui-radius-full);
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ============================================================
   IMAGE ENHANCEMENTS
   ============================================================ */

.img-circle {
  transition: all var(--ui-transition-base);
}

.img-circle:hover {
  transform: scale(1.05);
}

/* Elevation classes - enhance shadows */
.elevation-1 { box-shadow: var(--ui-shadow-sm) !important; }
.elevation-2 { box-shadow: var(--ui-shadow-base) !important; }
.elevation-3 { box-shadow: var(--ui-shadow-md) !important; }
.elevation-4 { box-shadow: var(--ui-shadow-lg) !important; }
.elevation-5 { box-shadow: var(--ui-shadow-xl) !important; }

/* ============================================================
   INVOICE SPECIFIC
   ============================================================ */

/* Invoice header */
.invoice-header {
  background: linear-gradient(135deg, var(--ui-primary-600), var(--ui-primary-700));
  color: white;
  padding: var(--ui-space-8);
  border-radius: var(--ui-radius-xl) var(--ui-radius-xl) 0 0;
}

/* ============================================================
   LOADING STATES
   ============================================================ */

.overlay-wrapper .overlay {
  background: var(--ui-surface-overlay);
  backdrop-filter: blur(4px);
  border-radius: var(--ui-card-radius);
}

/* ============================================================
   TOOLTIPS
   ============================================================ */

.tooltip {
  font-family: var(--ui-font-sans);
  font-size: var(--ui-text-xs);
}

.tooltip-inner {
  background-color: var(--ui-gray-900);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-2) var(--ui-space-3);
  box-shadow: var(--ui-shadow-lg);
}

/* ============================================================
   CUSTOM SCROLLBAR (for better UX)
   ============================================================ */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--ui-gray-100);
  border-radius: var(--ui-radius-full);
}

::-webkit-scrollbar-thumb {
  background: var(--ui-gray-400);
  border-radius: var(--ui-radius-full);
  transition: background var(--ui-transition-base);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ui-gray-500);
}

/* ============================================================
   SPACING UTILITIES (Additive)
   ============================================================ */

.ui-mt-1 { margin-top: var(--ui-space-1); }
.ui-mt-2 { margin-top: var(--ui-space-2); }
.ui-mt-3 { margin-top: var(--ui-space-3); }
.ui-mt-4 { margin-top: var(--ui-space-4); }
.ui-mt-6 { margin-top: var(--ui-space-6); }
.ui-mt-8 { margin-top: var(--ui-space-8); }

.ui-mb-1 { margin-bottom: var(--ui-space-1); }
.ui-mb-2 { margin-bottom: var(--ui-space-2); }
.ui-mb-3 { margin-bottom: var(--ui-space-3); }
.ui-mb-4 { margin-bottom: var(--ui-space-4); }
.ui-mb-6 { margin-bottom: var(--ui-space-6); }
.ui-mb-8 { margin-bottom: var(--ui-space-8); }

.ui-gap-2 { gap: var(--ui-space-2); }
.ui-gap-3 { gap: var(--ui-space-3); }
.ui-gap-4 { gap: var(--ui-space-4); }

/* ============================================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================================ */

/* Skip to main content link */
.skip-to-main {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--ui-primary-600);
  color: white;
  padding: var(--ui-space-3) var(--ui-space-4);
  border-radius: 0 0 var(--ui-radius-md) 0;
  z-index: 9999;
  transition: top var(--ui-transition-base);
}

.skip-to-main:focus {
  top: 0;
}

/* Better keyboard focus indicators */
*:focus-visible {
  outline: 2px solid var(--ui-primary-500);
  outline-offset: 2px;
}

/* ============================================================
   NOTIFICATION BADGE (if used)
   ============================================================ */

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--ui-danger-500);
  color: white;
  border-radius: var(--ui-radius-full);
  padding: 2px 6px;
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-font-bold);
  box-shadow: var(--ui-shadow-md);
}

/* ============================================================
   STATUS INDICATORS
   ============================================================ */

.status-indicator {
  display: inline-flex;
  align-items: center;
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-full);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-font-semibold);
  gap: var(--ui-space-2);
}

.status-indicator::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--ui-radius-full);
  animation: pulse 2s ease-in-out infinite;
}

.status-pending {
  background-color: var(--ui-warning-50);
  color: var(--ui-warning-700);
}

.status-pending::before {
  background-color: var(--ui-warning-500);
}

.status-active,
.status-success {
  background-color: var(--ui-success-50);
  color: var(--ui-success-700);
}

.status-active::before,
.status-success::before {
  background-color: var(--ui-success-500);
}

.status-inactive,
.status-cancelled {
  background-color: var(--ui-gray-100);
  color: var(--ui-gray-700);
}

.status-inactive::before,
.status-cancelled::before {
  background-color: var(--ui-gray-500);
}

/* ============================================================
   EMPTY STATES
   ============================================================ */

.empty-state {
  text-align: center;
  padding: var(--ui-space-12) var(--ui-space-6);
  color: var(--ui-gray-500);
}

.empty-state-icon {
  font-size: 64px;
  color: var(--ui-gray-300);
  margin-bottom: var(--ui-space-4);
}

.empty-state-title {
  font-size: var(--ui-text-xl);
  font-weight: var(--ui-font-semibold);
  color: var(--ui-gray-700);
  margin-bottom: var(--ui-space-2);
}

.empty-state-description {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-500);
  margin-bottom: var(--ui-space-6);
}

/* ============================================================
   FILE UPLOAD AREA
   ============================================================ */

.custom-file-label {
  border-radius: var(--ui-input-radius);
  border-color: var(--ui-border-color);
  padding: var(--ui-input-padding-y) var(--ui-input-padding-x);
}

.custom-file-label::after {
  background-color: var(--ui-primary-600);
  color: white;
  border-radius: 0 var(--ui-input-radius) var(--ui-input-radius) 0;
  font-weight: var(--ui-font-semibold);
}

/* ============================================================
   PROGRESS BARS (if used)
   ============================================================ */

.progress {
  height: 8px;
  border-radius: var(--ui-radius-full);
  background-color: var(--ui-gray-200);
  overflow: hidden;
}

.progress-bar {
  background: linear-gradient(90deg, var(--ui-primary-600), var(--ui-primary-500));
  border-radius: var(--ui-radius-full);
  transition: width var(--ui-transition-slow);
}

/* ============================================================
   TABS (if used)
   ============================================================ */

.nav-tabs {
  border-bottom: 2px solid var(--ui-border-color);
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: var(--ui-space-3) var(--ui-space-5);
  font-weight: var(--ui-font-medium);
  color: var(--ui-gray-600);
  transition: all var(--ui-transition-base);
}

.nav-tabs .nav-link:hover {
  border-color: var(--ui-gray-300);
  color: var(--ui-gray-900);
}

.nav-tabs .nav-link.active {
  color: var(--ui-primary-600);
  border-color: var(--ui-primary-600);
  background-color: transparent;
}

/* ============================================================
   INVOICE STYLING
   ============================================================ */

.invoice {
  background-color: white;
  border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-xl);
  overflow: hidden;
}

.invoice-header {
  padding: var(--ui-space-8);
  background: linear-gradient(135deg, var(--ui-primary-600), var(--ui-primary-700));
  color: white;
}

.invoice-header h1 {
  color: white;
  margin-bottom: var(--ui-space-2);
}

.invoice-body {
  padding: var(--ui-space-8);
}

.invoice-footer {
  background-color: var(--ui-gray-50);
  padding: var(--ui-space-6);
  border-top: 2px solid var(--ui-border-color);
}

/* ============================================================
   CHART CONTAINERS
   ============================================================ */

.chart-container {
  padding: var(--ui-space-6);
  background-color: white;
  border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-md);
}

/* ============================================================
   RESPONSIVE IMAGES
   ============================================================ */

img {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  border-radius: var(--ui-radius-lg);
  border-color: var(--ui-border-color);
  padding: var(--ui-space-2);
}

/* ============================================================
   LIST GROUPS
   ============================================================ */

.list-group-item {
  border-color: var(--ui-border-color);
  padding: var(--ui-space-4);
  transition: all var(--ui-transition-base);
}

.list-group-item:hover {
  background-color: var(--ui-gray-50);
  border-color: var(--ui-primary-300);
}

.list-group-item.active {
  background-color: var(--ui-primary-600);
  border-color: var(--ui-primary-600);
}

/* ============================================================
   CLOSE BUTTON ENHANCEMENT
   ============================================================ */

.close,
button.close {
  opacity: 0.6;
  transition: all var(--ui-transition-base);
  font-size: var(--ui-text-2xl);
  font-weight: var(--ui-font-normal);
}

.close:hover,
button.close:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* ============================================================
   SEARCH & FILTER SECTION
   ============================================================ */

.filter-section {
  background-color: var(--ui-gray-50);
  padding: var(--ui-space-5);
  border-radius: var(--ui-radius-lg);
  margin-bottom: var(--ui-space-6);
  border: 1px solid var(--ui-border-color);
}

/* ============================================================
   MOBILE MENU IMPROVEMENTS
   ============================================================ */

@media (max-width: 991px) {
  .main-sidebar {
    box-shadow: var(--ui-shadow-2xl);
  }
  
  .sidebar-mini.sidebar-collapse .main-sidebar {
    transform: translateX(-100%);
  }
  
  /* Better mobile header */
  .main-header {
    position: sticky;
    top: 0;
    z-index: var(--ui-z-sticky);
  }
}

/* ============================================================
   PRINT OPTIMIZATIONS
   ============================================================ */

@media print {
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  .card {
    page-break-inside: avoid;
  }
  
  .table {
    border: 1px solid var(--ui-border-color) !important;
  }
  
  .table thead th {
    background-color: var(--ui-gray-100) !important;
    color: black !important;
  }
}

/* ============================================================
   DARK THEME SUPPORT (Optional Future Enhancement)
   ============================================================ */

@media (prefers-color-scheme: dark) {
  /* Future dark mode styles */
  /* Currently disabled to maintain light theme */
}