/* Wiz.io Color Variables */
:root {
    /* Primary Wiz Colors */
    --wiz-primary-blue: #2563eb;
    --wiz-secondary-blue: #1e40af;
    --wiz-accent-purple: #7c3aed;
    --wiz-bright-blue: #3b82f6;
    --wiz-light-blue: #60a5fa;

    /* Supporting Colors */
    --wiz-pink-accent: #ec4899;
    --wiz-orange-accent: #f59e0b;
    --wiz-green-success: #10b981;
    --wiz-red-error: #ef4444;

    /* Neutral Colors */
    --wiz-dark-navy: #1e293b;
    --wiz-medium-gray: #64748b;
    --wiz-light-gray: #f1f5f9;
    --wiz-white: #ffffff;
    --wiz-background: #fafbfc;

    /* Text Colors */
    --wiz-text-primary: #1e293b;
    --wiz-text-secondary: #475569;
    --wiz-text-muted: #64748b;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--wiz-text-primary);
    background: var(--wiz-white);
    min-height: 100vh;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Navigation Styles */
.navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(37, 99, 235, 0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(37, 99, 235, 0.15);
}

.nav-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wiz-primary-blue);
}

.wiz-logo-nav {
    flex-shrink: 0;
    object-fit: contain;
}

.nav-brand i {
    font-size: 1.8rem;
}

.nav-links {
    display: flex;
    gap: 10px;
}

.nav-link {
    background: none;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--wiz-medium-gray);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link:hover {
    background: rgba(37, 99, 235, 0.1);
    color: var(--wiz-primary-blue);
}

.nav-link.active {
    background: var(--wiz-primary-blue);
    color: var(--wiz-white);
}

/* Page Management */
.page {
    display: none;
    min-height: calc(100vh - 70px);
    padding: 40px 0;
}

.page.active {
    display: block;
}

/* Section Management */
.section {
    display: none;
}

.section.active {
    display: block;
}

/* Welcome Section */
.welcome-content {
    text-align: center;
    max-width: 1400px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 60px 80px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    width: 95%;
}

.welcome-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--wiz-text-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.wiz-logo {
    flex-shrink: 0;
    object-fit: contain;
}

.welcome-header .subtitle {
    font-size: 1.2rem;
    color: var(--wiz-text-secondary);
    margin-bottom: 40px;
}

.welcome-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.feature {
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease;
}

.feature:hover {
    transform: translateY(-5px);
}

.feature i {
    font-size: 2.5rem;
    color: var(--wiz-primary-blue);
    margin-bottom: 16px;
}

.feature h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--wiz-text-primary);
    margin-bottom: 12px;
}

.feature p {
    color: var(--wiz-text-secondary);
    line-height: 1.6;
}

.welcome-form {
    margin-top: 40px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.welcome-form h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 24px;
}

/* Retrieve Assessment Styles */
.retrieve-assessment {
    margin: 40px 0;
    padding: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.retrieve-assessment h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.retrieve-assessment p {
    color: var(--wiz-text-secondary);
    margin-bottom: 24px;
}

/* Assessment Code Display Styles */
.assessment-code-section {
    margin: 30px 0;
    padding: 30px;
    background: linear-gradient(135deg, var(--wiz-primary-blue) 0%, var(--wiz-secondary-blue) 100%);
    border-radius: 16px;
    color: white;
    text-align: center;
}

.code-display h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.code-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
}

.assessment-code {
    font-family: 'Courier New', monospace;
    font-size: 1.8rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.2);
    padding: 12px 20px;
    border-radius: 8px;
    letter-spacing: 2px;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.code-description {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.9rem;
}

/* Form Styles */
.form-group {
    margin-bottom: 24px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--wiz-text-primary);
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--wiz-light-gray);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--wiz-primary-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    justify-content: center;
}

.btn-primary {
    background: linear-gradient(135deg, var(--wiz-primary-blue), var(--wiz-accent-purple));
    color: var(--wiz-white);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.9);
    color: var(--wiz-primary-blue);
    border: 2px solid var(--wiz-primary-blue);
}

.btn-secondary:hover {
    background: var(--wiz-primary-blue);
    color: var(--wiz-white);
}

.btn-danger {
    background: linear-gradient(135deg, var(--wiz-red-error), #dc2626);
    color: var(--wiz-white);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.btn-outline {
    background: transparent;
    color: #6b7280;
    border: 2px solid #e5e7eb;
}

.btn-outline:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

/* Assessment Section */
.assessment-header {
    text-align: center;
    margin-bottom: 40px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.assessment-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}

.assessment-header p {
    font-size: 1.1rem;
    color: #6b7280;
    margin-bottom: 30px;
}

.progress-container {
    max-width: 600px;
    margin: 0 auto;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 500;
}

/* Question Styles */
.question-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.question {
    margin-bottom: 30px;
}

.question h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 20px;
    line-height: 1.5;
}

.response-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.response-option {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.response-option:hover {
    border-color: #4f46e5;
    background: rgba(79, 70, 229, 0.05);
}

.response-option.selected {
    border-color: #4f46e5;
    background: rgba(79, 70, 229, 0.1);
}

.response-option input[type="radio"] {
    margin-right: 12px;
    transform: scale(1.2);
}

.response-option label {
    cursor: pointer;
    font-weight: 500;
    color: #374151;
    flex: 1;
}

/* Assessment Navigation */
.assessment-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Results Section */
.results-header {
    margin-bottom: 40px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.header-text {
    flex: 1;
    text-align: center;
}

.header-text h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.header-text p {
    font-size: 1.1rem;
    color: #6b7280;
}

.header-content .score-circle {
    width: 120px;
    height: 120px;
    min-width: 120px;
    min-height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.3);
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}

.header-content .score-circle .score-number {
    font-size: 1.8rem;
    font-weight: 700;
}

.header-content .score-circle .score-label {
    font-size: 0.8rem;
    opacity: 0.9;
}

.results-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.overall-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.score-circle {
    width: 140px;
    height: 140px;
    min-width: 140px;
    min-height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.3);
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}

.score-number {
    font-size: 2rem;
    font-weight: 700;
}

.score-label {
    font-size: 0.9rem;
    opacity: 0.9;
}

.score-and-maturity-section {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    align-items: flex-start;
}





/* Dynamic background colors for score box based on maturity level */
.score-box.level-1 {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border: 3px solid #dc2626;
}

.score-box.level-2 {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 3px solid #d97706;
}

.score-box.level-3 {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border: 3px solid #2563eb;
}

.score-box.level-4 {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border: 3px solid #059669;
}

.score-box.level-5 {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    border: 3px solid #7c3aed;
}

/* Responsive styles for score and maturity section */
@media (max-width: 768px) {
    .score-and-maturity-section {
        flex-direction: column;
        gap: 20px;
    }
}

.maturity-level-section {
    flex: 1;
    margin-bottom: 0;
}

.maturity-header {
    margin-bottom: 30px;
    padding: 30px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(124, 58, 237, 0.1));
    border-radius: 16px;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.maturity-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.maturity-text {
    flex: 1;
    text-align: left;
}

.score-box {
    width: 140px;
    height: 140px;
    min-width: 140px;
    min-height: 140px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.3);
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}

.maturity-header h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--wiz-primary-blue);
    margin-bottom: 12px;
}

.maturity-header p {
    color: var(--wiz-text-secondary);
    font-size: 1.1rem;
    margin: 0;
}

.maturity-level h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.maturity-level p {
    color: #6b7280;
    font-size: 1rem;
}

.maturity-details {
    margin-top: 24px;
}

.maturity-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.maturity-detail-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(37, 99, 235, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.maturity-detail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: rgba(37, 99, 235, 0.2);
}

.maturity-detail-card h4 {
    color: var(--wiz-primary-blue);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.maturity-detail-card h4 i {
    font-size: 1rem;
    opacity: 0.8;
}

.maturity-detail-card p {
    color: var(--wiz-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

.maturity-detail-card ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.maturity-detail-card li {
    color: var(--wiz-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.maturity-detail-card li::before {
    content: '•';
    color: var(--wiz-primary-blue);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.maturity-detail-card strong {
    color: var(--wiz-text-primary);
    font-weight: 600;
}

/* Responsive styles for the new layout */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .header-text h2 {
        font-size: 1.8rem;
        justify-content: center;
    }

    .maturity-header-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .maturity-text {
        text-align: center;
    }

    .score-box {
        width: 100px;
        height: 100px;
        min-width: 100px;
        min-height: 100px;
    }

    .score-box .score-number {
        font-size: 1.5rem;
    }

    .score-box .score-label {
        font-size: 0.7rem;
    }

    .maturity-details-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .maturity-header h3 {
        font-size: 1.6rem;
    }

    .maturity-header p {
        font-size: 1rem;
    }
}

.maturity-details h4 {
    color: var(--wiz-primary-blue);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
    margin-top: 20px;
}

.maturity-details h4:first-child {
    margin-top: 0;
}

.maturity-details p {
    color: var(--wiz-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

.maturity-details ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}

.maturity-details li {
    color: var(--wiz-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.maturity-details li::before {
    content: '•';
    color: var(--wiz-primary-blue);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.maturity-details strong {
    color: var(--wiz-text-primary);
    font-weight: 600;
}

/* Maturity Categories Section */
.maturity-categories {
    margin-bottom: 40px;
}

.maturity-categories h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.maturity-categories h3::before {
    content: '🎯';
    font-size: 1.2rem;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.category-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.category-card.people {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
}

.category-card.process {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
}

.category-card.tooling {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.category-name {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
}

.category-score {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 1.1rem;
}

.category-description {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 15px;
    opacity: 0.9;
}

.category-insights {
    background: rgba(255, 255, 255, 0.1);
    padding: 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.category-strength {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 500;
}

.category-strength.strong {
    color: #a8e6cf;
}

.category-strength.medium {
    color: #ffd3b6;
}

.category-strength.weak {
    color: #ffaaa5;
}

.pillar-scores {
    margin-bottom: 40px;
}

.pillar-scores h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 24px;
}

.pillar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.pillar-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(37, 99, 235, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.pillar-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15);
}

.pillar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.pillar-name {
    font-weight: 600;
    color: #1f2937;
    font-size: 1.1rem;
}

.pillar-score {
    font-size: 1.2rem;
    font-weight: 700;
    color: #4f46e5;
}

.pillar-description {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.5;
}

.recommendations {
    margin-bottom: 40px;
}

.recommendations h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 24px;
}



.recommendation-controls {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.controls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.controls-header h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.controls-buttons {
    display: flex;
    gap: 12px;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
    border-radius: 8px;
}

.recommendations-content {
    display: grid;
    gap: 20px;
}

.pillar-recommendation-group {
    background: transparent;
    border-radius: 12px;
    border: none;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pillar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px 12px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.pillar-header:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

.pillar-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    gap: 16px;
}

.pillar-header h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pillar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(79, 70, 229, 0.1);
    transition: all 0.3s ease;
}

.pillar-toggle:hover {
    background: rgba(79, 70, 229, 0.2);
}

.toggle-icon {
    color: #4f46e5;
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.pillar-details {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0 0 12px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-top: none;
    padding: 24px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.pillar-details.collapsed {
    max-height: 0;
    padding: 0 24px;
    opacity: 0;
}

.pillar-metrics {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.pillar-score {
    background: #4f46e5;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.pillar-priority {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.8);
}

.pillar-count {
    color: #6b7280;
    font-size: 0.85rem;
}

.use-case-group {
    margin-bottom: 24px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.group-header {
    padding: 20px;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.group-header:hover {
    background: rgba(255, 255, 255, 1);
}

.group-header-content {
    flex: 1;
}

.group-header h5 {
    color: #1f2937;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.group-description {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.group-stats {
    display: flex;
    gap: 12px;
    align-items: center;
}

.group-stats .use-case-count {
    background: rgba(79, 70, 229, 0.1);
    color: #4f46e5;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.group-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(79, 70, 229, 0.1);
    transition: all 0.3s ease;
}

.group-toggle:hover {
    background: rgba(79, 70, 229, 0.2);
}

.group-toggle-icon {
    color: #4f46e5;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.use-case-list {
    display: grid;
    gap: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.use-case-list.collapsed {
    max-height: 0;
    padding: 0 20px;
    opacity: 0;
}

.use-case-item {
    background: white;
    border-radius: 8px;
    padding: 16px;
    border-left: 4px solid #4f46e5;
    transition: all 0.2s ease;
    margin-bottom: 12px;
}

.use-case-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.use-case-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.use-case-id {
    background: #4f46e5;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.use-case-category {
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 500;
}

.use-case-platform-module {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.use-case-title {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
    font-size: 1rem;
    line-height: 1.4;
}

.use-case-details {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 12px;
}

.use-case-justification,
.use-case-metrics {
    background: rgba(79, 70, 229, 0.05);
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
}

.use-case-justification strong,
.use-case-metrics strong {
    color: #1f2937;
    font-weight: 600;
}

.actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Methodology Page Styles */
.methodology-header {
    text-align: center;
    margin-bottom: 40px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.methodology-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.methodology-header p {
    font-size: 1.2rem;
    color: #6b7280;
}

.methodology-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.methodology-section {
    margin-bottom: 40px;
}

.methodology-section h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

.methodology-card {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.methodology-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 16px;
}

.methodology-card ul {
    list-style: none;
    padding: 0;
}

.methodology-card li {
    padding: 8px 0;
    color: #374151;
    position: relative;
    padding-left: 20px;
}

.methodology-card li:before {
    content: "•";
    color: #4f46e5;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.methodology-card p {
    margin-bottom: 1em;
}

.methodology-card p:last-child {
    margin-bottom: 0;
}

/* Benefits Grid */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.benefit-item {
    background: white;
    border-radius: 8px;
    padding: 20px;
    border-left: 4px solid #4f46e5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.benefit-item h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.benefit-item p {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Scoring Dimensions */
.scoring-dimensions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.dimension-item {
    background: white;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    border: 1px solid #e5e7eb;
}

.dimension-item h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dimension-item p {
    color: #6b7280;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Detailed Maturity Levels */
.maturity-detailed {
    display: grid;
    gap: 20px;
    margin-top: 20px;
}

.maturity-level-detailed {
    background: white;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.level-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.level-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.level-range {
    background: #f3f4f6;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
}

.level-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

.level-description h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 16px 0 8px 0;
}

.level-description ul {
    list-style: none;
    padding: 0;
    margin-bottom: 16px;
}

.level-description li {
    padding: 4px 0;
    color: #6b7280;
    font-size: 0.9rem;
    position: relative;
    padding-left: 16px;
}

.level-description li:before {
    content: "→";
    color: #4f46e5;
    position: absolute;
    left: 0;
}

/* Classification Explanation */
.classification-explanation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #007bff;
}

.classification-type {
    padding: 15px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.classification-type h5 {
    color: #007bff;
    margin-bottom: 10px;
}

.classification-type p {
    margin: 0;
    color: #6c757d;
    line-height: 1.5;
}

/* Maturity Ceiling Warning */
.maturity-ceiling-warning {
    margin: 15px 0;
}

.maturity-ceiling-warning .alert {
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
    background-color: #fff3cd;
    color: #856404;
}

.maturity-ceiling-warning .alert i {
    margin-right: 8px;
    color: #ffc107;
}

.maturity-ceiling-warning .alert small {
    display: block;
    margin-top: 8px;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Category Analysis */
.category-analysis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.category-item {
    background: white;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.category-item h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-item p {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

.category-item ul {
    list-style: none;
    padding: 0;
}

.category-item li {
    padding: 6px 0;
    color: #6b7280;
    font-size: 0.9rem;
    position: relative;
    padding-left: 16px;
}

.category-item li:before {
    content: "•";
    color: #4f46e5;
    position: absolute;
    left: 0;
}

/* Progression Timeline */
.progression-timeline {
    display: grid;
    gap: 30px;
    margin-top: 20px;
}

.progression-stage {
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.stage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e5e7eb;
}

.stage-header h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.stage-header p {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 4px 0 0 0;
}



.stage-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.business-value,
.key-activities,
.success-indicators {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
}

.business-value h4,
.key-activities h4,
.success-indicators h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
}

.business-value ul,
.key-activities ul,
.success-indicators ul {
    list-style: none;
    padding: 0;
}

.business-value li,
.key-activities li,
.success-indicators li {
    padding: 6px 0;
    color: #6b7280;
    font-size: 0.9rem;
    position: relative;
    padding-left: 16px;
}

.business-value li:before,
.key-activities li:before,
.success-indicators li:before {
    content: "✓";
    color: #10b981;
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* ROI Metrics */
.roi-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.roi-category {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.roi-category h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #4f46e5;
}

.roi-category ul {
    list-style: none;
    padding: 0;
}

.roi-category li {
    padding: 8px 0;
    color: #6b7280;
    font-size: 0.9rem;
    position: relative;
    padding-left: 20px;
}

.roi-category li:before {
    content: "📈";
    position: absolute;
    left: 0;
}

/* Assessment Types */
.assessment-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.assessment-type {
    background: white;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.assessment-type h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.assessment-type p {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 8px;
    line-height: 1.5;
}

.assessment-type ul {
    list-style: none;
    padding: 0;
    margin-top: 16px;
}

.assessment-type li {
    padding: 6px 0;
    color: #6b7280;
    font-size: 0.9rem;
    position: relative;
    padding-left: 16px;
}

.assessment-type li:before {
    content: "→";
    color: #4f46e5;
    position: absolute;
    left: 0;
}

/* Analytics Features */
.analytics-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.analytics-feature {
    background: white;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    text-align: center;
}

.analytics-feature h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.analytics-feature p {
    color: #6b7280;
    font-size: 0.85rem;
    line-height: 1.4;
}

.pillar-list {
    display: grid;
    gap: 20px;
}

.pillar-item {
    background: white;
    border-radius: 8px;
    padding: 20px;
    border-left: 4px solid #4f46e5;
}

.pillar-item h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
}

.pillar-item ul {
    list-style: none;
    padding: 0;
}

.pillar-item li {
    padding: 4px 0;
    color: #6b7280;
    font-size: 0.9rem;
    position: relative;
    padding-left: 16px;
}

.pillar-item li:before {
    content: "→";
    color: #4f46e5;
    position: absolute;
    left: 0;
}

.maturity-levels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.level-item {
    background: white;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    border: 1px solid #e5e7eb;
}

.level-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.level-1 { background: #fee2e2; color: #dc2626; }
.level-2 { background: #fef3c7; color: #d97706; }
.level-3 { background: #dbeafe; color: #2563eb; }
.level-4 { background: #d1fae5; color: #059669; }
.level-5 { background: #f3e8ff; color: #7c3aed; }

.level-range {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 4px;
}

.level-name {
    display: block;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.level-item p {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.4;
}

.value-timeline {
    display: grid;
    gap: 24px;
}

.timeline-item {
    background: white;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.timeline-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.timeline-header h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

.timeline-header p {
    color: #6b7280;
    font-size: 0.9rem;
}

.timeline-content ul {
    list-style: none;
    padding: 0;
}

.timeline-content li {
    padding: 6px 0;
    color: #6b7280;
    font-size: 0.9rem;
    position: relative;
    padding-left: 20px;
}

.timeline-content li:before {
    content: "•";
    color: #4f46e5;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.metric-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.metric-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #4f46e5;
}

.metric-card ul {
    list-style: none;
    padding: 0;
}

.metric-card li {
    padding: 6px 0;
    color: #6b7280;
    font-size: 0.9rem;
    position: relative;
    padding-left: 16px;
}

.metric-card li:before {
    content: "✓";
    color: #10b981;
    position: absolute;
    left: 0;
    font-weight: bold;
}

.methodology-actions {
    text-align: center;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #e5e7eb;
}

/* Loading and Modal Styles */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.loading-overlay.active {
    display: flex;
}

.loading-spinner {
    background: white;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.loading-spinner i {
    font-size: 2rem;
    color: #4f46e5;
    margin-bottom: 16px;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.modal-header {
    padding: 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1f2937;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* Admin Authentication Modal Styles */
#admin-auth-modal .modal-content {
    max-width: 400px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.auth-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-form label {
    font-weight: 600;
    color: var(--wiz-text-primary);
    font-size: 0.95rem;
}

.auth-form input[type="password"] {
    padding: 12px 16px;
    border: 2px solid var(--wiz-light-gray);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    background: var(--wiz-white);
}

.auth-form input[type="password"]:focus {
    outline: none;
    border-color: var(--wiz-primary-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.error-message {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: var(--wiz-red-error);
    font-size: 0.9rem;
    font-weight: 500;
}

.error-message i {
    font-size: 1rem;
}

#admin-auth-modal .modal-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

#admin-auth-modal .modal-footer .btn {
    flex: 1;
}

/* Admin Header Styles */
.admin-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.admin-title-section {
    flex: 1;
}

.admin-auth-section {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.auth-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    color: var(--wiz-green-success);
    font-size: 0.9rem;
    font-weight: 500;
}

.auth-status i {
    font-size: 1rem;
}

.admin-auth-section .btn {
    padding: 8px 16px;
    font-size: 0.9rem;
}

/* Responsive admin header */
@media (max-width: 768px) {
    .admin-header-content {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .admin-auth-section {
        justify-content: space-between;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-container {
        padding: 0 16px;
    }

    .nav-brand span {
        display: none;
    }

    .nav-links {
        gap: 8px;
    }

    .nav-link {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    .welcome-content {
        padding: 40px 20px;
        width: 95%;
    }

    .welcome-header h1 {
        font-size: 2rem;
    }

    .welcome-features {
        grid-template-columns: 1fr;
    }

    .overall-score {
        flex-direction: column;
        gap: 24px;
    }

    .score-circle {
        width: 120px;
        height: 120px;
        min-width: 120px;
        min-height: 120px;
    }

    .pillar-grid {
        grid-template-columns: 1fr;
    }

    .actions {
        flex-direction: column;
    }

    .methodology-content {
        padding: 20px;
    }

    .methodology-header h1 {
        font-size: 2rem;
    }

    .maturity-levels {
        grid-template-columns: 1fr;
    }

    .metrics-grid {
        grid-template-columns: 1fr;
    }

    .pillar-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .pillar-metrics {
        flex-wrap: wrap;
        gap: 8px;
    }

    .controls-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .controls-buttons {
        width: 100%;
        justify-content: space-between;
    }

    .priority-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .priority-stats {
        gap: 8px;
    }

    .pillar-summary-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .pillar-summary-metrics {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .score-circle {
        width: 100px;
        height: 100px;
        min-width: 100px;
        min-height: 100px;
    }

    .welcome-form {
        padding: 20px;
    }

    .assessment-header,
    .results-header,
    .methodology-header {
        padding: 20px;
    }

    .question-container,
    .results-content,
    .methodology-content {
        padding: 20px;
    }
}

/* Assessment Selection Styles */
.assessment-selection {
    margin: 2rem 0;
}

.assessment-selection h3 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #1f2937;
    font-size: 1.5rem;
}

.assessment-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.assessment-option {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #e5e7eb;
    border-radius: 12px;
        padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.assessment-option:hover {
    border-color: #4f46e5;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(79, 70, 229, 0.1);
}

.assessment-option.selected {
    border-color: #4f46e5;
    background: rgba(79, 70, 229, 0.05);
    box-shadow: 0 10px 25px rgba(79, 70, 229, 0.15);
}

.option-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.option-header i {
    font-size: 1.5rem;
    color: #4f46e5;
}

.option-header h4 {
    margin: 0;
    color: #1f2937;
    font-size: 1.25rem;
}

.option-content p {
    margin-bottom: 0.75rem;
    color: #374151;
    font-weight: 500;
}

.option-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.option-content li {
    padding: 0.25rem 0;
    color: #6b7280;
    position: relative;
    padding-left: 1.25rem;
}

.option-content li:before {
    content: "✓";
    color: #4f46e5;
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Response Structure Styles */
.response-structure {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.response-level {
        padding: 0.75rem;
    background: rgba(255, 255, 255, 0.8);
    border-left: 4px solid #4f46e5;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #374151;
}

.response-level strong {
    color: #4f46e5;
}

pre {
    background: rgba(255, 255, 255, 0.8);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #374151;
}

code {
    background: rgba(255, 255, 255, 0.8);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #4f46e5;
}

/* Admin Page Styles */
.admin-header {
    text-align: center;
    margin-bottom: 3rem;
    color: white;
}

.admin-header h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.admin-header .subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

.admin-controls {
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.filter-controls {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.filter-controls label {
    font-weight: 600;
    color: #374151;
    margin-right: 0.5rem;
}

.filter-controls select {
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    color: #374151;
    font-size: 0.95rem;
    min-width: 180px;
    transition: all 0.3s ease;
}

.filter-controls select:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.questions-container {
    margin-top: 20px;
}

.questions-table-wrapper {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    max-height: 70vh;
    overflow-x: auto;
    overflow-y: auto;
}

.questions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.questions-table th {
    background: #f8fafc;
    padding: 1rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 10;
}

.questions-table td {
    padding: 1rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}

.questions-table tr:hover {
    background: rgba(79, 70, 229, 0.04);
}

.question-text-cell {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.response-cell {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    color: #6b7280;
}

.assessment-type-badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.assessment-type-badge.simple {
    background: #dbeafe;
    color: #1e40af;
}

.assessment-type-badge.comprehensive {
    background: #fef3c7;
    color: #92400e;
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    border-radius: 6px;
}

/* Edit Modal Styles */
#edit-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    backdrop-filter: blur(4px);
}

#edit-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

#edit-modal .modal-content {
    background: white;
    border-radius: 16px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

#edit-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}

#edit-modal .modal-header h3 {
    color: #374151;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

#edit-modal .close {
    color: #9ca3af;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s ease;
}

#edit-modal .close:hover {
    color: #374151;
}

#edit-modal .modal-body {
    padding: 2rem;
    max-height: 60vh;
    overflow-y: auto;
}

#edit-modal .form-group {
    margin-bottom: 1.5rem;
}

#edit-modal .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #374151;
}

#edit-modal .form-group input,
#edit-modal .form-group select,
#edit-modal .form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #374151;
    transition: all 0.3s ease;
}

#edit-modal .form-group input:focus,
#edit-modal .form-group select:focus,
#edit-modal .form-group textarea:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

#edit-modal .form-group textarea {
    resize: vertical;
    min-height: 60px;
}

#edit-modal .modal-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

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

.btn-secondary:hover {
    background: #4b5563;
}

/* Responsive Design for Admin */
@media (max-width: 768px) {
    .filter-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-controls select {
        min-width: auto;
        width: 100%;
    }

    .questions-table {
        font-size: 0.8rem;
    }

    .questions-table th,
    .questions-table td {
        padding: 0.75rem 0.5rem;
    }

    .question-text-cell,
    .response-cell {
        max-width: 200px;
    }

    #edit-modal .modal-content {
        margin: 1rem;
        max-width: none;
        width: calc(100% - 2rem);
    }

    #edit-modal .modal-body {
        padding: 1.5rem;
    }

    #edit-modal .modal-header,
    #edit-modal .modal-footer {
        padding: 1.5rem;
    }
}

/* Navigation Dropdown */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-arrow {
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

.dropdown-toggle.active .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid #e9ecef;
    min-width: 200px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.2s ease;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background-color: #f8fafc;
    color: #0066cc;
}

.dropdown-item i {
    width: 16px;
    text-align: center;
    font-size: 14px;
}

/* Admin Section Management */
.admin-section {
    display: none;
}

.admin-section.active {
    display: block;
}

/* Use Cases Admin Styles */
.use-cases-container {
    margin-top: 20px;
}

.use-cases-table-wrapper {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    max-height: 70vh;
    overflow-x: auto;
    overflow-y: auto;
}

.use-cases-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.use-cases-table th {
    background: #f8fafc;
    padding: 1rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 10;
}

.use-cases-table td {
    padding: 1rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}

.use-cases-table tr:hover {
    background: rgba(79, 70, 229, 0.04);
}

/* Use Case Table Cell Styles */
.use-case-title-cell {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: #374151;
}

.maturity-level-cell {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #374151;
}

.platform-module-cell {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #374151;
    font-weight: 500;
}

.test-cases-cell,
.key-metrics-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #374151;
}

/* Use Case Edit Modal */
#edit-use-case-modal {
    z-index: 10002;
}

#edit-use-case-modal .modal-content {
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
}

#edit-use-case-modal .form-group {
    margin-bottom: 20px;
}

#edit-use-case-modal .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2d3748;
}

/* Assessments Admin Styles */
.assessments-container {
    margin-top: 20px;
}

.assessments-table-wrapper {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    max-height: 70vh;
    overflow-x: auto;
    overflow-y: auto;
}

.assessments-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.assessments-table th {
    background: #f8fafc;
    padding: 1rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 10;
}

.assessments-table td {
    padding: 1rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}

.assessments-table tr:hover {
    background: rgba(79, 70, 229, 0.04);
}

.assessments-table .assessment-code {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--wiz-primary-blue);
    background: rgba(79, 70, 229, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9rem;
}

.assessments-table .score-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    min-width: 40px;
}

.assessments-table .score-high {
    background: rgba(16, 185, 129, 0.1);
    color: var(--wiz-green-success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.assessments-table .score-medium {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.assessments-table .score-low {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.assessments-table .maturity-level {
    font-size: 0.9rem;
    color: var(--wiz-text-secondary);
}

.assessments-table .date-column {
    font-size: 0.9rem;
    color: var(--wiz-text-secondary);
}

.assessments-table .action-buttons {
    display: flex;
    gap: 8px;
}

.assessments-table .btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

/* Badge Styles */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-primary {
    background: rgba(79, 70, 229, 0.1);
    color: var(--wiz-primary-blue);
    border: 1px solid rgba(79, 70, 229, 0.3);
}

.badge-secondary {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

#edit-use-case-modal .form-group input,
#edit-use-case-modal .form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

#edit-use-case-modal .form-group input:focus,
#edit-use-case-modal .form-group textarea:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

#edit-use-case-modal .form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Pillar Card Enhancements */
.pillar-card.clickable {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.pillar-card.clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.pillar-click-hint {
    text-align: center;
    color: #6b7280;
    font-size: 0.8rem;
    margin-top: 10px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.pillar-card.clickable:hover .pillar-click-hint {
    opacity: 1;
    color: #4f46e5;
}

/* Pillar Details Modal */
.pillar-modal-content {
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
}

/* Pillar Recommendations */
.pillar-recommendations {
    margin: 24px 0;
    padding: 20px;
    background: var(--wiz-light-gray);
    border-radius: 12px;
    border-left: 4px solid var(--wiz-primary-blue);
}

.pillar-recommendations h4 {
    margin: 0 0 16px 0;
    color: var(--wiz-primary-blue);
    font-size: 18px;
    font-weight: 600;
}

.recommendations-content {
    font-size: 14px;
    line-height: 1.6;
}

.recommendation-level {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.recommendation-level.strong {
    background: rgba(34, 197, 94, 0.1);
    border-left: 4px solid var(--wiz-green-success);
}

.recommendation-level.medium {
    background: rgba(245, 158, 11, 0.1);
    border-left: 4px solid var(--wiz-orange-accent);
}

.recommendation-level.weak {
    background: rgba(239, 68, 68, 0.1);
    border-left: 4px solid var(--wiz-red-error);
}

.recommendation-level h5 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
}

.recommendation-level.strong h5 {
    color: var(--wiz-green-success);
}

.recommendation-level.medium h5 {
    color: var(--wiz-orange-accent);
}

.recommendation-level.weak h5 {
    color: var(--wiz-red-error);
}

.recommendation-level p {
    margin: 0 0 12px 0;
    color: var(--wiz-text-primary);
}

.recommendation-level ul {
    margin: 0;
    padding-left: 20px;
}

.recommendation-level li {
    margin-bottom: 8px;
    color: var(--wiz-text-secondary);
}

.recommendation-level li strong {
    color: var(--wiz-text-primary);
}

.pillar-score-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 30px;
    margin-bottom: 30px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.score-card {
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 150px;
}

.score-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: #4f46e5;
    margin-bottom: 5px;
}

.score-percentage {
    font-size: 1.2rem;
    color: #059669;
    font-weight: 600;
    margin-bottom: 5px;
}

.score-calculation {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.score-calculation h4 {
    margin: 0 0 15px 0;
    color: #374151;
    font-size: 1.1rem;
}

.score-calculation p {
    margin: 8px 0;
    color: #4b5563;
    font-size: 0.95rem;
}

.questions-breakdown h4 {
    margin-bottom: 20px;
    color: #374151;
    font-size: 1.1rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 10px;
}

.questions-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
}

.question-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
    padding: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 12px;
    background: white;
    transition: box-shadow 0.2s ease;
}

.question-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.question-number {
    background: #4f46e5;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    min-width: 40px;
    height: fit-content;
}

.question-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.question-text {
    color: #374151;
    font-weight: 500;
    line-height: 1.4;
}

.response-info {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.response-score {
    background: #059669;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

.response-text {
    color: #6b7280;
    font-style: italic;
    font-size: 0.9rem;
    flex: 1;
}

/* Additional Responsive Design for Use Cases Admin */
@media (max-width: 768px) {
    .dropdown-menu {
        left: auto;
        right: 0;
        min-width: 180px;
    }

    .pillar-score-summary {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .question-item {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .question-number {
        align-self: start;
        width: fit-content;
    }

    .response-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

    .use-cases-table {
        font-size: 0.8rem;
    }

    .use-cases-table th,
    .use-cases-table td {
        padding: 0.75rem 0.5rem;
    }

    .use-case-title-cell,
    .test-cases-cell,
    .key-metrics-cell {
        max-width: 150px;
    }

    #edit-use-case-modal .modal-content {
        margin: 1rem;
        max-width: none;
        width: calc(100% - 2rem);
    }
}

/* Maturity Categories Section */
.maturity-categories {
    margin-bottom: 40px;
}

.maturity-categories h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.maturity-categories h3::before {
    content: "🎯";
    font-size: 1.2rem;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.category-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.category-card.people {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
}

.category-card.process {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
}

.category-card.tooling {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.category-name {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
}

.category-score {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 1.1rem;
}

.category-description {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 15px;
    opacity: 0.9;
}

.category-insights {
    background: rgba(255, 255, 255, 0.1);
    padding: 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.category-strength {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 500;
}

.category-strength.strong {
    color: #a8e6cf;
}

.category-strength.medium {
    color: #ffd3b6;
}

.category-strength.weak {
    color: #ffaaa5;
}

/* Level Content Grid for three-column layout */
.level-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    margin-top: 16px;
}

.level-content-column h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
}

.level-content-column ul {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}

.level-content-column li {
    padding: 4px 0;
    color: #6b7280;
    font-size: 0.9rem;
    position: relative;
    padding-left: 16px;
}

.level-content-column li:before {
    content: "→";
    color: #4f46e5;
    position: absolute;
    left: 0;
}

/* Tier Mapping Styles */
.tier-mapping {
    background: rgba(79, 70, 229, 0.05);
    border: 1px solid rgba(79, 70, 229, 0.1);
    border-radius: 8px;
    padding: 16px;
}

.tier-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: white;
}

.tier-badge.tier-1 {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.tier-badge.tier-2 {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.tier-badge.tier-3 {
    background: linear-gradient(135deg, #10b981, #059669);
}

.tier-badge.tier-4 {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.tier-badge.tier-4-plus {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.tier-mapping p {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Responsive styles for tier mapping */
@media (max-width: 768px) {
    .level-content-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tier-mapping {
        padding: 12px;
    }

    .tier-badge {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
}

/* Admin Layout Styles */
.admin-layout {
    display: flex;
    min-height: 100vh;
    background: #f8fafc;
}

.admin-main {
    flex: 1;
    min-height: 100vh;
    background: #f8fafc;
}

.admin-header {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 24px 32px;
}

.admin-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-nav-buttons {
    display: flex;
    gap: 12px;
}

.admin-title-section h1 {
    margin: 0 0 4px 0;
    font-size: 1.875rem;
    font-weight: 600;
    color: #111827;
}

.admin-title-section .subtitle {
    margin: 0;
    color: #6b7280;
    font-size: 1rem;
}

/* Dashboard Styles */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    padding: 32px;
}

.dashboard-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
}

.dashboard-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

.card-content h3 {
    margin: 0 0 8px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.card-number {
    margin: 0 0 4px 0;
    font-size: 2rem;
    font-weight: 700;
    color: #4f46e5;
}

.card-description {
    margin: 0;
    font-size: 0.875rem;
    color: #6b7280;
}

.dashboard-actions {
    padding: 0 32px 32px;
    display: flex;
    justify-content: center;
}

.admin-section-nav {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 32px;
}

.btn-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 32px;
    min-width: 200px;
    text-align: center;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.btn-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-large i {
    font-size: 2rem;
    margin-bottom: 8px;
}

.btn-text {
    font-size: 1.1rem;
    font-weight: 600;
}

.btn-description {
    font-size: 0.875rem;
    opacity: 0.8;
    line-height: 1.4;
}

/* Admin Section Styles */
.admin-section {
    display: none;
    padding: 32px;
}

.admin-section.active {
    display: block;
}

.admin-controls {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.filter-controls {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-controls label {
    font-weight: 500;
    color: #374151;
    font-size: 0.875rem;
}

.filter-controls select {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    background: white;
    color: #374151;
}

/* Responsive Design */
@media (max-width: 768px) {
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .admin-sidebar.open {
        transform: translateX(0);
    }

    .admin-main {
        margin-left: 0;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .admin-section {
        padding: 16px;
    }

    .filter-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-controls select {
        width: 100%;
    }
}

/* Technology Category (replaces Tooling) */
.category-card.technology {
    background: var(--wiz-accent-purple);
}

/* Legacy support for Tooling category */
.category-card.tooling {
    background: var(--wiz-accent-purple);
}

/* Enhanced Report Modal Styles */
#report-modal .modal-content {
    max-width: 900px;
    max-height: 90vh;
    animation: slideInUp 0.3s ease-out;
}

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

.report-modal-content {
    background: var(--wiz-background);
}

.report-summary {
    margin-bottom: 32px;
}

.report-summary h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wiz-text-primary);
    margin-bottom: 20px;
    text-align: center;
}

.report-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.report-info-item {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--wiz-light-gray);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: all 0.3s ease;
}

.report-info-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--wiz-primary-blue);
}

.report-info-item strong {
    color: var(--wiz-text-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 8px;
}

.pillar-scores-section {
    margin-bottom: 32px;
}

.pillar-scores-section h5 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--wiz-text-primary);
    margin-bottom: 20px;
    text-align: center;
}

.pillar-scores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.pillar-score-item {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--wiz-light-gray);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: all 0.3s ease;
}

.pillar-score-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--wiz-primary-blue);
}

.pillar-score-value {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--wiz-primary-blue) 0%, var(--wiz-accent-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    line-height: 1;
}

.pillar-score-name {
    font-size: 0.9rem;
    color: var(--wiz-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.roadmap-section {
    margin-bottom: 24px;
}

.roadmap-section h5 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--wiz-text-primary);
    margin-bottom: 16px;
}

.roadmap-content {
    background: var(--wiz-light-gray);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--wiz-light-gray);
    font-family: inherit;
    line-height: 1.6;
    color: var(--wiz-text-secondary);
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: auto;
}

/* Responsive adjustments for report modal */
@media (max-width: 768px) {
    #report-modal .modal-content {
        max-width: 95%;
        margin: 20px;
    }

    .report-info-grid {
        grid-template-columns: 1fr;
    }

    .pillar-scores-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .pillar-score-value {
        font-size: 1.5rem;
    }
}