/* Alert Modern */
 .alert-modern {
     display: flex;
     align-items: flex-start;
     padding: 20px 24px;
     border-radius: 16px;
     border: none;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     background: white;
 }

 .alert-modern-info {
     border-left: 4px solid #0dcaf0;
 }

 .alert-modern .alert-icon {
     flex-shrink: 0;
     width: 40px;
     height: 40px;
     border-radius: 10px;
     background: rgba(13, 202, 240, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 16px;
 }

 .alert-modern .alert-icon i {
     font-size: 22px;
     color: #0dcaf0;
 }

 .alert-modern .alert-content p {
     color: #495057;
     font-size: 15px;
     line-height: 1.6;
 }

 /* Status Card */
 .status-card {
     background: white;
     border-radius: 24px;
     padding: 60px 40px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
     text-align: center;
     margin-bottom: 30px;
     position: relative;
     overflow: hidden;
 }

 .status-card::before {
     content: '';
     position: absolute;
     top: -100px;
     right: -100px;
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, rgba(0, 123, 255, 0.03) 0%, transparent 70%);
     border-radius: 50%;
 }

 /* Status Icon Wrapper */
 .status-icon-wrapper {
     width: 90px;
     height: 90px;
     margin: 0 auto 32px;
     position: relative;
     animation: fadeInScale 0.6s ease-out;
 }

 .status-icon-circle {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
     transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }

 .status-icon-circle:hover {
     transform: scale(1.1) rotate(5deg);
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
 }

 .status-icon-circle i {
     font-size: 56px;
     font-weight: 600;
     z-index: 2;
 }

 /* Pending Status */
 .status-pending .status-icon-circle {
     background: linear-gradient(135deg, #fff3cd 0%, #ffc107 100%);
     animation: pulseGlow 2s ease-in-out infinite;
 }

 .status-pending .status-icon-circle::before {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background: inherit;
     animation: ripple 1.5s ease-out infinite;
     opacity: 0.6;
 }

 .status-pending .status-icon-circle i {
     color: #ff8800;
 }

 /* Rejected Status */
 .status-rejected .status-icon-circle {
     background: linear-gradient(135deg, #f8d7da 0%, #dc3545 100%);
 }

 .status-rejected .status-icon-circle i {
     color: #dc3545;
     animation: shakeIcon 0.5s ease-in-out;
 }

 /* Active/Approved Status */
 .status-active .status-icon-circle {
     background: linear-gradient(135deg, #d1e7dd 0%, #28a745 100%);
 }

 .status-active .status-icon-circle i {
     color: #28a745;
     animation: checkBounce 0.6s ease-out;
 }

 /* Unknown Status */
 .status-unknown .status-icon-circle {
     background: linear-gradient(135deg, #e2e3e5 0%, #6c757d 100%);
 }

 .status-unknown .status-icon-circle i {
     color: #6c757d;
 }

 /* Animations */
 @keyframes fadeInScale {
     from {
         opacity: 0;
         transform: scale(0.5);
     }
     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 @keyframes pulseGlow {
     0%, 100% {
         box-shadow: 0 8px 24px rgba(255, 193, 7, 0.3);
     }
     50% {
         box-shadow: 0 8px 32px rgba(255, 193, 7, 0.6);
     }
 }

 @keyframes ripple {
     0% {
         transform: scale(1);
         opacity: 0.6;
     }
     100% {
         transform: scale(1.4);
         opacity: 0;
     }
 }

 @keyframes shakeIcon {
     0%, 100% { transform: translateX(0); }
     10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
     20%, 40%, 60%, 80% { transform: translateX(3px); }
 }

 @keyframes checkBounce {
     0% { transform: scale(0); }
     50% { transform: scale(1.2); }
     100% { transform: scale(1); }
 }

 /* Progress Ring */
 .status-progress-ring {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     animation: rotate 3s linear infinite;
 }

 .progress-ring-circle {
     stroke-dasharray: 465;
     stroke-dashoffset: 116;
     transform-origin: center;
     animation: progress 2s ease-in-out infinite;
 }

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

 @keyframes progress {

     0%,
     100% {
         stroke-dashoffset: 116;
     }

     50% {
         stroke-dashoffset: 232;
     }
 }

 /* Status Title & Subtitle */
 .status-title {
     font-size: 32px;
     font-weight: 700;
     color: #212529;
     margin-bottom: 12px;
     line-height: 1.3;
 }

 .status-subtitle {
     font-size: 18px;
     color: #6c757d;
     margin-bottom: 40px;
     line-height: 1.6;
 }

 /* Status Info Card */
 .status-info-card {
     background: #f8f9fa;
     border-radius: 20px;
     padding: 32px;
     margin: 32px 0;
     text-align: left;
     border: 2px solid #e9ecef;
     transition: all 0.3s ease;
 }

 .status-info-card:hover {
     border-color: #dee2e6;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
 }

 .status-error {
     background: #fff5f5;
     border-color: #ffccd5;
 }

 .status-warning {
     background: #fff9f0;
     border-color: #ffe5cc;
 }

 .status-info-header {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 24px;
     padding-bottom: 16px;
     border-bottom: 2px solid rgba(0, 0, 0, 0.05);
 }

 .status-info-header i {
     font-size: 24px;
     color: #0d6efd;
 }

 .status-info-header span {
     font-size: 18px;
     font-weight: 600;
     color: #212529;
 }

 /* Timeline */
 .status-timeline {
     display: flex;
     flex-direction: column;
     gap: 24px;
 }

 .timeline-item {
     display: flex;
     gap: 16px;
     position: relative;
 }

 .timeline-item:not(:last-child)::before {
     content: '';
     position: absolute;
     left: 15px;
     top: 40px;
     width: 2px;
     height: calc(100% + 8px);
     background: #dee2e6;
 }

 .timeline-item.completed::before {
     background: #198754;
 }

 .timeline-item.active::before {
     background: linear-gradient(180deg, #ffc107 0%, #dee2e6 100%);
 }

 .timeline-marker {
     flex-shrink: 0;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: white;
     border: 2px solid #dee2e6;
     position: relative;
     z-index: 1;
 }

 .timeline-item.completed .timeline-marker {
     background: #198754;
     border-color: #198754;
     color: white;
 }

 .timeline-item.active .timeline-marker {
     background: white;
     border-color: #ffc107;
 }

 .timeline-marker i {
     font-size: 16px;
 }

 .pulse-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: #ffc107;
     animation: pulse-animation 2s infinite;
 }

 @keyframes pulse-animation {

     0%,
     100% {
         transform: scale(1);
         opacity: 1;
     }

     50% {
         transform: scale(1.3);
         opacity: 0.7;
     }
 }

 .timeline-content h4 {
     font-size: 16px;
     font-weight: 600;
     color: #212529;
     margin-bottom: 4px;
 }

 .timeline-content p {
     font-size: 14px;
     color: #6c757d;
     margin: 0;
     line-height: 1.5;
 }

 /* Status Estimate */
 .status-estimate {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 12px 24px;
     background: white;
     border-radius: 12px;
     border: 2px solid #e9ecef;
     margin-top: 24px;
     font-size: 15px;
     color: #495057;
 }

 .status-estimate i {
     font-size: 20px;
     color: #0d6efd;
 }

 /* Action Items */
 .status-actions-list {
     display: flex;
     flex-direction: column;
     gap: 20px;
     margin-bottom: 24px;
 }

 .action-item {
     display: flex;
     gap: 16px;
     padding: 20px;
     background: white;
     border-radius: 12px;
     transition: all 0.3s ease;
 }

 .action-item:hover {
     transform: translateX(8px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }

 .action-icon {
     flex-shrink: 0;
     width: 48px;
     height: 48px;
     border-radius: 12px;
     background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 24px;
 }

 .action-content h4 {
     font-size: 16px;
     font-weight: 600;
     color: #212529;
     margin-bottom: 4px;
 }

 .action-content p {
     font-size: 14px;
     color: #6c757d;
     margin: 0;
     line-height: 1.5;
 }

 /* Modern Buttons */
 .btn-modern {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 14px 28px;
     border-radius: 12px;
     font-size: 15px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
     border: none;
     cursor: pointer;
     font-family: inherit;
 }

 .btn-modern i {
     font-size: 20px;
 }

 .btn-modern-primary {
     background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
     color: white;
     box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
 }

 .btn-modern-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
     color: white;
 }

 .btn-modern-secondary {
     background: #6c757d;
     color: white;
 }

 .btn-modern-secondary:hover {
     background: #5a6268;
     transform: translateY(-2px);
     color: white;
 }

 .btn-modern-outline {
     background: white;
     color: #495057;
     border: 2px solid #dee2e6;
 }

 .btn-modern-outline:hover {
     background: #f8f9fa;
     border-color: #adb5bd;
     color: #212529;
 }

 .btn-modern-ghost {
     background: transparent;
     color: #6c757d;
     border: 2px solid transparent;
 }

 .btn-modern-ghost:hover {
     background: #f8f9fa;
     color: #495057;
 }

 /* Status Actions */
 .status-actions {
     display: flex;
     justify-content: center;
     gap: 16px;
     margin-top: 40px;
     flex-wrap: wrap;
 }

 /* Help Card */
 .help-card {
     background: #8e17c7;
     border-radius: 20px;
     padding: 32px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     box-shadow: 0 8px 24px rgba(13, 110, 253, 0.25);
     gap: 24px;
     flex-wrap: wrap;
 }

 .help-content {
     display: flex;
     align-items: center;
     gap: 20px;
     flex: 1;
 }

 .help-icon {
     width: 64px;
     height: 64px;
     border-radius: 16px;
     background: rgba(255, 255, 255, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 32px;
 }

 .help-text h4 {
     font-size: 20px;
     font-weight: 700;
     color: white;
     margin-bottom: 4px;
 }

 .help-text p {
     font-size: 14px;
     color: rgba(255, 255, 255, 0.9);
     margin: 0;
 }

 .help-link {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 12px 24px;
     background: white;
     color: #0d6efd;
     border-radius: 10px;
     text-decoration: none;
     font-weight: 600;
     font-size: 15px;
     transition: all 0.3s ease;
 }

 .help-link:hover {
     transform: translateX(4px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     color: #0a58ca;
 }

 /* Animations */
 .fade-in {
     animation: fadeIn 0.6s ease-out;
 }

 .fade-in-up {
     animation: fadeInUp 0.8s ease-out;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .status-card {
         padding: 40px 24px;
         border-radius: 20px;
     }

     .status-title {
         font-size: 26px;
     }

     .status-subtitle {
         font-size: 16px;
     }

     .status-icon-wrapper {
         width: 120px;
         height: 120px;
     }

     .status-icon-circle i {
         font-size: 60px;
     }

     .status-info-card {
         padding: 24px;
     }

     .timeline-item {
         font-size: 14px;
     }

     .status-actions {
         flex-direction: column;
         align-items: stretch;
     }

     .btn-modern {
         justify-content: center;
         width: 100%;
     }

     .help-card {
         flex-direction: column;
         text-align: center;
     }

     .help-content {
         flex-direction: column;
     }

     .help-link {
         width: 100%;
         justify-content: center;
     }

     .action-item {
         flex-direction: column;
         text-align: center;
         align-items: center;
     }
 }

 @media (max-width: 576px) {
     .status-title {
         font-size: 22px;
     }

     .status-icon-wrapper {
         width: 100px;
         height: 100px;
     }

     .status-icon-circle i {
         font-size: 50px;
     }
 }