/* PendingApproval.module.css */

.container {
    @apply min-h-screen bg-gray-50;
}

/* Navigation */
/* Navigation */
.navbar {
    @apply bg-white border-b border-gray-200 sticky top-0 z-10;
}

.navContent {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between;
}

.logoContainer {
    @apply flex items-center space-x-2;
}

.logoIcon {
    @apply w-8 h-8 text-purple-600;
}

.logoText {
    @apply text-xl font-bold text-purple-600;
}

/* Main Content */
.main {
    @apply max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12;
}

.statusCard {
    @apply bg-white rounded-lg shadow-sm p-8 border border-gray-200;
}

/* Status Icon */
.statusIconContainer {
    @apply mx-auto w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6;
}

.statusIcon {
    @apply w-8 h-8 text-purple-600;
}

/* Title and Subtitle */
.title {
    @apply text-2xl font-bold text-center text-gray-900 mb-2;
}

.subtitle {
    @apply text-center text-gray-600 mb-8;
}

/* Application Details */
.detailsContainer {
    @apply bg-gray-50 rounded-lg p-6 mb-6;
}

.detailsTitle {
    @apply text-lg font-semibold text-gray-900 mb-4;
}

.detailsGrid {
    @apply space-y-4;
}

.detailItem {
    @apply flex items-start space-x-3;
}

.detailIcon {
    @apply w-5 h-5 text-purple-600 mt-1;
}

.detailContent {
    @apply flex flex-col;
}

.detailLabel {
    @apply text-sm text-gray-500;
}

.detailValue {
    @apply text-gray-900;
}

/* Notice */
.notice {
    @apply flex items-start space-x-3 bg-yellow-50 p-4 rounded-lg mb-6;
}

.noticeIcon {
    @apply w-5 h-5 text-yellow-600 mt-0.5;
}

.noticeText {
    @apply text-sm text-yellow-800;
}

/* Support Section */
.supportSection {
    @apply text-center border-t border-gray-200 pt-6 mt-6;
}

.supportText {
    @apply text-sm text-gray-600;
}

.supportLink {
    @apply text-purple-600 hover:text-purple-700 font-medium;
}

/* Hover and Focus States */
.supportLink:focus {
    @apply outline-none ring-2 ring-purple-500 ring-offset-2 rounded;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .main {
        @apply px-4 py-8;
    }

    .statusCard {
        @apply p-6;
    }

    .detailsContainer {
        @apply p-4;
    }

    .title {
        @apply text-xl;
    }

    .statusIconContainer {
        @apply w-14 h-14 mb-4;
    }

    .statusIcon {
        @apply w-6 h-6;
    }
}