/* /Components/Components/PowerBiReportComponent.razor.rz.scp.css */
.embed-container[b-h7jsf02imo] {
    aspect-ratio: 16 / 9;
    width: 100%;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
body[b-rnoh975nlv] {
    background-color: #f8fafc;
}
#blazor-error-ui[b-rnoh975nlv] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-rnoh975nlv] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-container[b-ru3pvc479x] {
    margin-bottom: var(--space-6);
}

.integrated-navbar[b-ru3pvc479x] {
    background: linear-gradient(to right, #59595b, #009ee1);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.navbar-main-section[b-ru3pvc479x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    position: relative;
}

.navbar-flex-container[b-ru3pvc479x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
}

.navbar-brand[b-ru3pvc479x] {
    display: flex;
    align-items: center;
}

.external-link[b-ru3pvc479x] {
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: all var(--transition-fast);
    padding: var(--space-2) 0;
}

    .external-link .link-text[b-ru3pvc479x] {
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
        transition: all var(--transition-fast);
    }

    .external-link:hover .link-text[b-ru3pvc479x] {
        text-decoration-thickness: 2px;
    }

    .external-link:hover[b-ru3pvc479x] {
        color: #e0f2fe;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
        transform: translateY(-1px);
    }

    .external-link i[b-ru3pvc479x] {
        font-size: 0.75rem;
        transition: transform var(--transition-fast);
    }

    .external-link:hover i[b-ru3pvc479x] {
        transform: translate(2px, -2px);
    }

.logo-button[b-ru3pvc479x] {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0;
    transition: var(--transition-fast);
}

    .logo-button:hover[b-ru3pvc479x] {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }

    .logo-button h3[b-ru3pvc479x] {
        margin: 0;
        font-weight: 700;
        font-size: 1.5rem;
    }

.mobile-toggle[b-ru3pvc479x] {
    display: none;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .mobile-toggle:hover[b-ru3pvc479x] {
        background: rgba(255, 255, 255, 0.3);
    }

.navbar-actions[b-ru3pvc479x] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.user-info[b-ru3pvc479x] {
    background-color: rgba(255, 255, 255, 0.2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
}

.user-name[b-ru3pvc479x] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: white;
    font-weight: 500;
    font-size: 0.9rem;
}

.action-buttons[b-ru3pvc479x] {
    display: flex;
    gap: var(--space-3);
}

.action-button[b-ru3pvc479x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    transition: all var(--transition-fast);
    text-decoration: none;
    font-size: 0.875rem;
    gap: var(--space-2);
    height: 38px;
    background-color: transparent;
}

    .action-button i[b-ru3pvc479x] {
        font-size: 0.9rem;
    }

    .action-button.create[b-ru3pvc479x] {
        background-color: #0f0f0e;
        color: white;
        border-color: #f8fafc;
    }

        .action-button.create:hover[b-ru3pvc479x],
        .action-button.create:focus[b-ru3pvc479x] {
            background-color: #f8fafc;
            border-color: #0f0f0e;
            box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.3);
            color: #0f0f0e;
        }

    .action-button.logout[b-ru3pvc479x] {
        background-color: white;
        color: var(--secondary);
        border-color: white;
    }

        .action-button.logout:hover[b-ru3pvc479x],
        .action-button.logout:focus[b-ru3pvc479x] {
            background-color: var(--secondary-lighter);
            border-color: var(--secondary-lighter);
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
        }

@media (max-width: 929.98px) {
    .navbar-flex-container[b-ru3pvc479x] {
        width: 100%;
    }

    .mobile-toggle[b-ru3pvc479x] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .external-link[b-ru3pvc479x] {
        justify-content: center;
        width: 100%;
    }

    .navbar-main-section[b-ru3pvc479x] {
        flex-direction: column;
        align-items: stretch;
    }

    .navbar-actions[b-ru3pvc479x] {
        display: none;
        flex-direction: column;
        width: 100%;
        margin-top: var(--space-4);
        padding-top: var(--space-4);
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        gap: var(--space-3);
    }

        .navbar-actions.show[b-ru3pvc479x] {
            display: flex;
        }

    .user-info[b-ru3pvc479x] {
        width: 100%;
        text-align: center;
        border-radius: var(--radius-md);
    }

    .user-name[b-ru3pvc479x] {
        justify-content: center;
    }

    .action-buttons[b-ru3pvc479x] {
        width: 100%;
        justify-content: space-between;
    }

        .action-buttons form[b-ru3pvc479x] {
            flex: 1;
        }

        .action-buttons button[b-ru3pvc479x] {
            width: 100%;
        }
}

@media (max-width: 479.98px) {
    .action-buttons[b-ru3pvc479x] {
        flex-direction: column;
        gap: var(--space-2);
    }
}
/* /Components/Pages/AdminCompanyView.razor.rz.scp.css */
.admin-company-card[b-geon8f48ah] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.company-logo-container[b-geon8f48ah] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.company-logo[b-geon8f48ah] {
    max-width: 80px;
    max-height: 80px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    border: 1px solid #e0e0e0;
    background: #fff;
    padding: 4px;
    margin-right: 16px;
    vertical-align: middle;
}

.company-info[b-geon8f48ah] {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.card-title[b-geon8f48ah] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.custom-file-upload label[b-geon8f48ah] {
    cursor: pointer;
    padding: 0.5rem 1.5rem;
    border: 1px solid #007bff;
    background: #fff;
    color: #007bff;
    border-radius: 6px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    display: inline-block;
}

    .custom-file-upload label:hover[b-geon8f48ah] {
        background: #007bff;
        color: #fff;
    }

input[type="file"].d-none[b-geon8f48ah] {
    display: none;
}
/* /Components/Pages/AdminView.razor.rz.scp.css */
.btn-primary[b-4dnn3iax51] {
    background-color: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}
/* /Components/Pages/CreateDocument.razor.rz.scp.css */
.breadcrumb[b-monsm9nocm] {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-lg) 0;
}

.breadcrumb-item[b-monsm9nocm] {
    display: flex;
    align-items: center;
}

    .breadcrumb-item:not(:first-child)[b-monsm9nocm]::before {
        content: '/';
        padding: 0 0.5rem;
        color: var(--medium-grey);
    }

    .breadcrumb-item a[b-monsm9nocm] {
        color: var(--primary);
        text-decoration: none;
        transition: var(--transition);
    }

        .breadcrumb-item a:hover[b-monsm9nocm] {
            color: var(--primary-dark);
            text-decoration: underline;
        }

    .breadcrumb-item.active[b-monsm9nocm] {
        color: var(--dark-grey);
    }

/* Loading spinner */
.loading-container[b-monsm9nocm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
}

.spinner[b-monsm9nocm] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--primary-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spinner-b-monsm9nocm 0.8s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spinner-b-monsm9nocm {
    to {
        transform: rotate(360deg);
    }
}

/* Card styling */
.card[b-monsm9nocm] {
    border: 1px solid var(--light-grey);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

    .card:hover[b-monsm9nocm] {
        box-shadow: var(--shadow-md);
    }

.card-header[b-monsm9nocm] {
    background-color: var(--white);
    border-bottom: 2px solid var(--primary);
    padding: 1rem 1.5rem;
}

    .card-header h2[b-monsm9nocm],
    .card-header h3[b-monsm9nocm] {
        margin: 0;
        color: var(--secondary);
        font-weight: var(--font-weight-bold);
    }

.card-body[b-monsm9nocm] {
    padding: 1.5rem;
}

/* Template selection */
.template-selection-card[b-monsm9nocm] {
    margin-bottom: 2rem;
}

.templates-grid[b-monsm9nocm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.template-card[b-monsm9nocm] {
    border: 1px solid var(--light-grey);
    border-radius: var(--radius-md);
    transition: var(--transition);
    cursor: pointer;
    background-color: var(--white);
    overflow: hidden;
}

    .template-card:hover[b-monsm9nocm] {
        border-color: var(--primary);
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

.template-card-body[b-monsm9nocm] {
    padding: 1.5rem;
}

.template-card-title[b-monsm9nocm] {
    margin-bottom: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--secondary);
}

.template-card-meta[b-monsm9nocm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.template-card-version[b-monsm9nocm] {
    font-size: 0.875rem;
    color: var(--dark-grey);
}

.template-card-status[b-monsm9nocm] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
}

    .template-card-status.active[b-monsm9nocm] {
        background-color: var(--success-light);
        color: var(--success);
    }

    .template-card-status.inactive[b-monsm9nocm] {
        background-color: rgba(108, 117, 125, 0.15);
        color: var(--dark-grey);
    }

.template-card-footer[b-monsm9nocm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.template-card-questions[b-monsm9nocm] {
    font-size: 0.875rem;
    color: var(--dark-grey);
}

/* Template info card */
.template-info-card[b-monsm9nocm] {
    border-left: 4px solid var(--primary);
}

.template-meta[b-monsm9nocm] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

/* Badges */
.badge[b-monsm9nocm] {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50rem;
}

.badge-active[b-monsm9nocm] {
    background-color: var(--success-light);
    color: var(--success);
}

.badge-inactive[b-monsm9nocm] {
    background-color: rgba(108, 117, 125, 0.15);
    color: var(--dark-grey);
}

.badge-required[b-monsm9nocm] {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}

/* Form styling */
.form-label[b-monsm9nocm] {
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

.required[b-monsm9nocm] {
    color: var(--danger);
}

.form-control[b-monsm9nocm], .form-select[b-monsm9nocm] {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--secondary);
    background-color: var(--white);
    background-clip: padding-box;
    border: 1px solid var(--light-grey);
    appearance: none;
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .form-control:focus[b-monsm9nocm], .form-select:focus[b-monsm9nocm] {
        border-color: var(--primary);
        outline: 0;
        box-shadow: 0 0 0 0.25rem var(--primary-light);
    }

.form-select[b-monsm9nocm] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

/* Custom checkbox */
.custom-checkbox[b-monsm9nocm] {
    display: flex;
    align-items: center;
}

    .custom-checkbox .form-check-input[b-monsm9nocm] {
        width: 1.25rem;
        height: 1.25rem;
        margin-right: 0.5rem;
        border: 1px solid var(--medium-grey);
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

        .custom-checkbox .form-check-input:checked[b-monsm9nocm] {
            background-color: var(--primary);
            border-color: var(--primary);
        }

    .custom-checkbox .form-check-label[b-monsm9nocm] {
        cursor: pointer;
    }

.container-fluid[b-monsm9nocm] {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.question-card.compact[b-monsm9nocm] {
    border: 1px solid var(--light-grey);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    /*    border-left: 3px solid var(--primary);
*/ margin-bottom: 0.5rem;
    background: #fff;
}

    .question-card.compact .question-number[b-monsm9nocm] {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.9rem;
        margin-right: 0.5rem;
        padding: 0;
    }

    .question-card.compact .question-content[b-monsm9nocm] {
        font-size: 0.95rem;
    }

    .question-card.compact .answer-options[b-monsm9nocm] {
        margin-bottom: 0.25rem;
    }

    .question-card.compact .form-check-label[b-monsm9nocm],
    .question-card.compact .form-check-input[b-monsm9nocm] {
        font-size: 1rem;
    }

    /* Larger radio buttons for better usability */
    .question-card.compact .form-check-input[b-monsm9nocm] {
        width: 1.3rem;
        height: 1.3rem;
        margin-right: 0.5rem;
        cursor: pointer;
        border: 2px solid var(--medium-grey);
        transition: all 0.2s ease;
    }

        .question-card.compact .form-check-input:checked[b-monsm9nocm] {
            background-color: var(--primary);
            border-color: var(--primary);
        }

        .question-card.compact .form-check-input:hover[b-monsm9nocm] {
            border-color: var(--primary);
            transform: scale(1.05);
        }

    .question-card.compact .form-check-label[b-monsm9nocm] {
        cursor: pointer;
        font-weight: 500;
        padding: 0.2rem 0;
        user-select: none;
    }

    .question-card.compact .form-check-inline[b-monsm9nocm] {
        margin-right: 1.5rem;
        display: flex;
        align-items: center;
    }

    .question-card.compact .comment-section[b-monsm9nocm] {
        margin-top: 0.25rem;
        padding-top: 0.25rem;
        border-top: 1px dashed var(--light-grey);
    }

    .question-card.compact textarea.form-control[b-monsm9nocm] {
        font-size: 0.95rem;
        padding: 0.25rem 0.5rem;
        min-height: 1.8em;
        max-height: 3em;
    }

    .question-card.compact .validation-message[b-monsm9nocm] {
        font-size: 0.85rem;
        color: var(--danger);
        margin-left: 0.5rem;
    }

.question-list[b-monsm9nocm] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Validation */
.validation-summary-errors[b-monsm9nocm] {
    color: var(--danger);
    margin-bottom: 1rem;
}

.validation-message[b-monsm9nocm] {
    color: var(--danger);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Action buttons */
.form-actions[b-monsm9nocm] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
}

.btn[b-monsm9nocm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 50px;
    transition: var(--transition);
}

.btn-primary[b-monsm9nocm] {
    color: white;
    background-color: var(--primary);
    border-color: var(--primary);
}

    .btn-primary:hover[b-monsm9nocm], .btn-primary:focus[b-monsm9nocm] {
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
    }

.btn-outline-primary[b-monsm9nocm] {
    color: var(--primary);
    border-color: var(--primary);
    background-color: transparent;
}

    .btn-outline-primary:hover[b-monsm9nocm], .btn-outline-primary:focus[b-monsm9nocm] {
        color: white;
        background-color: var(--primary);
    }

.btn-outline-secondary[b-monsm9nocm] {
    color: var(--secondary);
    border-color: var(--light-grey);
    background-color: transparent;
}

    .btn-outline-secondary:hover[b-monsm9nocm], .btn-outline-secondary:focus[b-monsm9nocm] {
        background-color: var(--light-grey);
    }

.btn-sm[b-monsm9nocm] {
    padding: 0.3rem 0.9rem !important;
    font-size: 0.95rem !important;
}

/* Spinner for buttons */
.spinner-border-sm[b-monsm9nocm] {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    /* iPad and tablet view - make radio buttons even larger */
    .question-card.compact .form-check-input[b-monsm9nocm] {
        width: 1.6rem;
        height: 1.6rem;
        margin-right: 0.7rem;
    }

    .question-card.compact .form-check-label[b-monsm9nocm] {
        font-size: 1.1rem;
        font-weight: 500;
    }

    .question-card.compact .form-check-inline[b-monsm9nocm] {
        margin-right: 2rem;
    }

    .question-card.compact[b-monsm9nocm] {
        padding: 0.75rem 1rem;
    }
}

@media (max-width: 767.98px) {
    .templates-grid[b-monsm9nocm] {
        grid-template-columns: 1fr;
    }

    .custom-radio-group[b-monsm9nocm] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .custom-radio[b-monsm9nocm] {
        width: 100%;
    }

    .form-actions[b-monsm9nocm] {
        flex-direction: column-reverse;
        gap: 1rem;
    }

        .form-actions .btn[b-monsm9nocm] {
            width: 100%;
        }

    .question-card.compact[b-monsm9nocm] {
        padding: 0.75rem 0.75rem;
    }

        /* Mobile view - largest radio buttons for touch friendliness */
        .question-card.compact .form-check-input[b-monsm9nocm] {
            width: 1.8rem;
            height: 1.8rem;
            margin-right: 0.8rem;
        }

        .question-card.compact .form-check-label[b-monsm9nocm] {
            font-size: 1.2rem;
            font-weight: 500;
        }

        .question-card.compact .form-check-inline[b-monsm9nocm] {
            margin-right: 2.5rem;
            margin-bottom: 0.5rem;
        }

        .question-card.compact .answer-options[b-monsm9nocm] {
            margin-bottom: 0.75rem;
        }
}
/* /Components/Pages/DocumentTemplates.razor.rz.scp.css */

.breadcrumb[b-emu1ng20j8] {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6) 0;
}

.breadcrumb-item[b-emu1ng20j8] {
    display: flex;
    align-items: center;
}

    .breadcrumb-item:not(:first-child)[b-emu1ng20j8]::before {
        content: '/';
        padding: 0 0.5rem;
        color: var(--medium-grey);
    }

    .breadcrumb-item a[b-emu1ng20j8] {
        color: var(--primary);
        text-decoration: none;
        transition: color var(--transition-fast);
    }

        .breadcrumb-item a:hover[b-emu1ng20j8] {
            color: var(--primary-dark);
            text-decoration: underline;
        }

    .breadcrumb-item.active[b-emu1ng20j8] {
        color: var(--dark-grey);
    }

.document-templates-container[b-emu1ng20j8] {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-6);
    background: var(--off-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.page-header[b-emu1ng20j8] {
    margin-bottom: var(--space-6);
}

.header-row[b-emu1ng20j8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.page-title[b-emu1ng20j8] {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--secondary);
    margin: 0;
    position: relative;
    padding-bottom: var(--space-2);
}

    .page-title[b-emu1ng20j8]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 3px;
        background-color: var(--primary);
        border-radius: var(--radius-pill);
    }

.content-area[b-emu1ng20j8] {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
}

.loading-state[b-emu1ng20j8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) 0;
    color: var(--dark-grey);
}


.chapter-header[b-emu1ng20j8] {
    cursor: pointer;
    padding: 0.75rem;
    border: 1px solid var(--light-grey);
    border-radius: var(--radius-md);
    background: var(--off-white);
    transition: background-color 0.2s ease;
    margin-bottom: 0.5rem;
    user-select: none;
}

    .chapter-header:hover[b-emu1ng20j8] {
        background: var(--secondary-lighter);
    }

    .chapter-header i[b-emu1ng20j8] {
        color: var(--secondary);
        transition: transform 0.2s ease;
    }

.spinner[b-emu1ng20j8] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--primary-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    margin-bottom: var(--space-4);
    animation: spinner-b-emu1ng20j8 0.8s linear infinite;
}

@keyframes spinner-b-emu1ng20j8 {
    to {
        transform: rotate(360deg);
    }
}

.empty-state[b-emu1ng20j8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-8) 0;
    color: var(--dark-grey);
    background: var(--secondary-lighter);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

    .empty-state i[b-emu1ng20j8] {
        font-size: 3rem;
        margin-bottom: var(--space-3);
        color: var(--medium-grey);
    }

    .empty-state h3[b-emu1ng20j8] {
        margin: 0 0 var(--space-2) 0;
        font-size: 1.25rem;
        font-weight: 600;
    }

.template-list[b-emu1ng20j8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
}

.template-card[b-emu1ng20j8] {
    background: var(--secondary-lighter);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 210px;
    transition: box-shadow var(--transition-fast);
    border: 1px solid var(--light-grey);
}

    .template-card:hover[b-emu1ng20j8] {
        box-shadow: 0 6px 18px rgba(65,209,179,0.08);
    }

.template-card-body[b-emu1ng20j8] {
    padding: var(--space-5) var(--space-6) var(--space-3) var(--space-6);
}

.template-title[b-emu1ng20j8] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--secondary);
    margin: 0;
}

.template-meta[b-emu1ng20j8] {
    display: flex;
    gap: var(--space-4);
    font-size: 0.95rem;
    color: var(--dark-grey);
    margin-top: var(--space-2);
    flex-wrap: wrap;
}

.template-card-footer[b-emu1ng20j8] {
    padding: var(--space-4) var(--space-6);
    background: var(--white);
    border-top: 1px solid var(--light-grey);
    display: flex;
    justify-content: flex-start;
}

.action-group[b-emu1ng20j8] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.action-button[b-emu1ng20j8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    transition: all var(--transition-fast);
    text-decoration: none;
    font-size: 0.95rem;
    gap: var(--space-2);
    background-color: transparent;
}





    .action-button.small[b-emu1ng20j8] {
        font-size: 0.85rem;
        padding: var(--space-1) var(--space-3);
        height: 32px;
    }

    .action-button.primary[b-emu1ng20j8] {
        background-color: var(--primary);
        color: var(--white);
        border-color: var(--primary);
    }

        .action-button.primary:hover[b-emu1ng20j8],
        .action-button.primary:focus[b-emu1ng20j8] {
            background-color: var(--primary-dark);
            border-color: var(--primary-dark);
        }

    .action-button.outline[b-emu1ng20j8] {
        background-color: transparent;
        color: var(--secondary);
        border-color: var(--light-grey);
    }

        .action-button.outline:hover[b-emu1ng20j8],
        .action-button.outline:focus[b-emu1ng20j8] {
            background-color: var(--secondary-lighter);
            border-color: var(--medium-grey);
        }

    .action-button.danger[b-emu1ng20j8] {
        background-color: var(--danger-light);
        color: var(--danger);
        border-color: var(--danger);
    }

        .action-button.danger:hover[b-emu1ng20j8],
        .action-button.danger:focus[b-emu1ng20j8] {
            background-color: var(--danger);
            color: var(--white);
        }

.status-badge[b-emu1ng20j8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.status-active[b-emu1ng20j8] {
    background-color: var(--success-light);
    color: var(--success);
    border-color: var(--success);
}

.status-inactive[b-emu1ng20j8] {
    background-color: var(--light-grey);
    color: var(--medium-grey);
    border-color: var(--medium-grey);
}

@media (max-width: 767.98px) {
    .document-templates-container[b-emu1ng20j8] {
        padding: var(--space-3);
    }

    .content-area[b-emu1ng20j8] {
        padding: var(--space-3);
    }

    .template-list[b-emu1ng20j8] {
        grid-template-columns: 1fr;
    }

    .header-row[b-emu1ng20j8] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
}
/* /Components/Pages/EditDocument.razor.rz.scp.css */
.breadcrumb[b-xffbsw027v] {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-lg) 0;
}

.breadcrumb-item[b-xffbsw027v] {
    display: flex;
    align-items: center;
}

    .breadcrumb-item:not(:first-child)[b-xffbsw027v]::before {
        content: '/';
        padding: 0 0.5rem;
        color: var(--medium-grey);
    }

    .breadcrumb-item a[b-xffbsw027v] {
        color: var(--primary);
        text-decoration: none;
        transition: var(--transition);
    }

        .breadcrumb-item a:hover[b-xffbsw027v] {
            color: var(--primary-dark);
            text-decoration: underline;
        }

    .breadcrumb-item.active[b-xffbsw027v] {
        color: var(--dark-grey);
    }

/* Loading spinner */
.loading-container[b-xffbsw027v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
}

.spinner[b-xffbsw027v] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--primary-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spinner-b-xffbsw027v 0.8s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spinner-b-xffbsw027v {
    to {
        transform: rotate(360deg);
    }
}

/* Card styling */
.card[b-xffbsw027v] {
    border: 1px solid var(--light-grey);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

    .card:hover[b-xffbsw027v] {
        box-shadow: var(--shadow-md);
    }

.card-header[b-xffbsw027v] {
    background-color: var(--white);
    border-bottom: 2px solid var(--primary);
    padding: 1rem 1.5rem;
}

    .card-header h2[b-xffbsw027v],
    .card-header h3[b-xffbsw027v] {
        margin: 0;
        color: var(--secondary);
        font-weight: var(--font-weight-bold);
    }

.card-body[b-xffbsw027v] {
    padding: 1.5rem;
}

/* Template selection */
.template-selection-card[b-xffbsw027v] {
    margin-bottom: 2rem;
}

.templates-grid[b-xffbsw027v] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.template-card[b-xffbsw027v] {
    border: 1px solid var(--light-grey);
    border-radius: var(--radius-md);
    transition: var(--transition);
    cursor: pointer;
    background-color: var(--white);
    overflow: hidden;
}

    .template-card:hover[b-xffbsw027v] {
        border-color: var(--primary);
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

.template-card-body[b-xffbsw027v] {
    padding: 1.5rem;
}

.template-card-title[b-xffbsw027v] {
    margin-bottom: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--secondary);
}

.template-card-meta[b-xffbsw027v] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.template-card-version[b-xffbsw027v] {
    font-size: 0.875rem;
    color: var(--dark-grey);
}

.template-card-status[b-xffbsw027v] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
}

    .template-card-status.active[b-xffbsw027v] {
        background-color: var(--success-light);
        color: var(--success);
    }

    .template-card-status.inactive[b-xffbsw027v] {
        background-color: rgba(108, 117, 125, 0.15);
        color: var(--dark-grey);
    }

.template-card-footer[b-xffbsw027v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.template-card-questions[b-xffbsw027v] {
    font-size: 0.875rem;
    color: var(--dark-grey);
}

/* Template info card */
.template-info-card[b-xffbsw027v] {
    border-left: 4px solid var(--primary);
}

.template-meta[b-xffbsw027v] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

/* Badges */
.badge[b-xffbsw027v] {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50rem;
}

.badge-active[b-xffbsw027v] {
    background-color: var(--success-light);
    color: var(--success);
}

.badge-inactive[b-xffbsw027v] {
    background-color: rgba(108, 117, 125, 0.15);
    color: var(--dark-grey);
}

.badge-required[b-xffbsw027v] {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}

/* Form styling */
.form-label[b-xffbsw027v] {
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

.required[b-xffbsw027v] {
    color: var(--danger);
}

.form-control[b-xffbsw027v], .form-select[b-xffbsw027v] {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--secondary);
    background-color: var(--white);
    background-clip: padding-box;
    border: 1px solid var(--light-grey);
    appearance: none;
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .form-control:focus[b-xffbsw027v], .form-select:focus[b-xffbsw027v] {
        border-color: var(--primary);
        outline: 0;
        box-shadow: 0 0 0 0.25rem var(--primary-light);
    }

.form-select[b-xffbsw027v] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

/* Custom checkbox */
.custom-checkbox[b-xffbsw027v] {
    display: flex;
    align-items: center;
}

    .custom-checkbox .form-check-input[b-xffbsw027v] {
        width: 1.25rem;
        height: 1.25rem;
        margin-right: 0.5rem;
        border: 1px solid var(--medium-grey);
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

        .custom-checkbox .form-check-input:checked[b-xffbsw027v] {
            background-color: var(--primary);
            border-color: var(--primary);
        }

    .custom-checkbox .form-check-label[b-xffbsw027v] {
        cursor: pointer;
    }

.container-fluid[b-xffbsw027v] {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.question-card.compact[b-xffbsw027v] {
    border: 1px solid var(--light-grey);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    /*    border-left: 3px solid var(--primary);
*/ margin-bottom: 0.5rem;
    background: #fff;
}

    .question-card.compact .question-number[b-xffbsw027v] {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.9rem;
        margin-right: 0.5rem;
        padding: 0;
    }

    .question-card.compact .question-content[b-xffbsw027v] {
        font-size: 0.95rem;
    }

    .question-card.compact .answer-options[b-xffbsw027v] {
        margin-bottom: 0.25rem;
    }

    .question-card.compact .form-check-label[b-xffbsw027v],
    .question-card.compact .form-check-input[b-xffbsw027v] {
        font-size: 1rem;
    }

    /* Larger radio buttons for better usability */
    .question-card.compact .form-check-input[b-xffbsw027v] {
        width: 1.3rem;
        height: 1.3rem;
        margin-right: 0.5rem;
        cursor: pointer;
        border: 2px solid var(--medium-grey);
        transition: all 0.2s ease;
    }

        .question-card.compact .form-check-input:checked[b-xffbsw027v] {
            background-color: var(--primary);
            border-color: var(--primary);
        }

        .question-card.compact .form-check-input:hover[b-xffbsw027v] {
            border-color: var(--primary);
            transform: scale(1.05);
        }

    .question-card.compact .form-check-label[b-xffbsw027v] {
        cursor: pointer;
        font-weight: 500;
        padding: 0.2rem 0;
        user-select: none;
    }

    .question-card.compact .form-check-inline[b-xffbsw027v] {
        margin-right: 1.5rem;
        display: flex;
        align-items: center;
    }

    .question-card.compact .comment-section[b-xffbsw027v] {
        margin-top: 0.25rem;
        padding-top: 0.25rem;
        border-top: 1px dashed var(--light-grey);
    }

    .question-card.compact textarea.form-control[b-xffbsw027v] {
        font-size: 0.95rem;
        padding: 0.25rem 0.5rem;
        min-height: 1.8em;
        max-height: 3em;
    }

    .question-card.compact .validation-message[b-xffbsw027v] {
        font-size: 0.85rem;
        color: var(--danger);
        margin-left: 0.5rem;
    }

.question-list[b-xffbsw027v] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Validation */
.validation-summary-errors[b-xffbsw027v] {
    color: var(--danger);
    margin-bottom: 1rem;
}

.validation-message[b-xffbsw027v] {
    color: var(--danger);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Action buttons */
.form-actions[b-xffbsw027v] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
}

.btn[b-xffbsw027v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 50px;
    transition: var(--transition);
}

.btn-primary[b-xffbsw027v] {
    color: white;
    background-color: var(--primary);
    border-color: var(--primary);
}

    .btn-primary:hover[b-xffbsw027v], .btn-primary:focus[b-xffbsw027v] {
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
    }

.btn-outline-primary[b-xffbsw027v] {
    color: var(--primary);
    border-color: var(--primary);
    background-color: transparent;
}

    .btn-outline-primary:hover[b-xffbsw027v], .btn-outline-primary:focus[b-xffbsw027v] {
        color: white;
        background-color: var(--primary);
    }

.btn-outline-secondary[b-xffbsw027v] {
    color: var(--secondary);
    border-color: var(--light-grey);
    background-color: transparent;
}

    .btn-outline-secondary:hover[b-xffbsw027v], .btn-outline-secondary:focus[b-xffbsw027v] {
        background-color: var(--light-grey);
    }

.btn-sm[b-xffbsw027v] {
    padding: 0.3rem 0.9rem !important;
    font-size: 0.95rem !important;
}

/* Spinner for buttons */
.spinner-border-sm[b-xffbsw027v] {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    /* iPad and tablet view - make radio buttons even larger */
    .question-card.compact .form-check-input[b-xffbsw027v] {
        width: 1.6rem;
        height: 1.6rem;
        margin-right: 0.7rem;
    }

    .question-card.compact .form-check-label[b-xffbsw027v] {
        font-size: 1.1rem;
        font-weight: 500;
    }

    .question-card.compact .form-check-inline[b-xffbsw027v] {
        margin-right: 2rem;
    }

    .question-card.compact[b-xffbsw027v] {
        padding: 0.75rem 1rem;
    }
}

@media (max-width: 767.98px) {
    .templates-grid[b-xffbsw027v] {
        grid-template-columns: 1fr;
    }

    .custom-radio-group[b-xffbsw027v] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .custom-radio[b-xffbsw027v] {
        width: 100%;
    }

    .form-actions[b-xffbsw027v] {
        flex-direction: column-reverse;
        gap: 1rem;
    }

        .form-actions .btn[b-xffbsw027v] {
            width: 100%;
        }

    .question-card.compact[b-xffbsw027v] {
        padding: 0.75rem 0.75rem;
    }

        /* Mobile view - largest radio buttons for touch friendliness */
        .question-card.compact .form-check-input[b-xffbsw027v] {
            width: 1.8rem;
            height: 1.8rem;
            margin-right: 0.8rem;
        }

        .question-card.compact .form-check-label[b-xffbsw027v] {
            font-size: 1.2rem;
            font-weight: 500;
        }

        .question-card.compact .form-check-inline[b-xffbsw027v] {
            margin-right: 2.5rem;
            margin-bottom: 0.5rem;
        }

        .question-card.compact .answer-options[b-xffbsw027v] {
            margin-bottom: 0.75rem;
        }
}
/* /Components/Pages/KSSVDashBoard.razor.rz.scp.css */

.container[b-e3z41ocmj4] {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-4);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--secondary);
    background-color: var(--off-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-inner);
}

.text-center[b-e3z41ocmj4] {
    text-align: center;
}

.container h3[b-e3z41ocmj4] {
    color: var(--secondary);
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
}

.container h4[b-e3z41ocmj4] {
    color: var(--dark-grey);
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-4);
}

.container h1[b-e3z41ocmj4] {
    font-size: 1.875rem;
    font-weight: var(--font-weight-bold);
    color: var(--secondary);
    position: relative;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-6);
    display: inline-block;
}

    .container h1[b-e3z41ocmj4]::after {
        content: '';
        display: block;
        width: 250px;
        height: 3px;
        background-color: var(--primary);
        border-radius: var(--radius-pill);
        margin: 0 auto;
    }

.card-fit-content[b-e3z41ocmj4] {
    display: inline-block;
    width: auto;
    min-width: 0;
    margin: 0 auto;
}
/* Layout */
.row[b-e3z41ocmj4] {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.5rem;
    margin-bottom: var(--space-4);
}

.col[b-e3z41ocmj4] {
    flex: 1 0 0%;
    padding: 0 0.5rem;
}

/* Card styling */
.card[b-e3z41ocmj4] {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: var(--space-6);
    border: none;
}

.card-body[b-e3z41ocmj4] {
    padding: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

/* Button styling */
.btn[b-e3z41ocmj4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-4);
    font-weight: var(--font-weight-medium);
    text-align: center;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    font-size: 0.9375rem;
    gap: var(--space-2);
    min-width: 120px;
}

    .btn i[b-e3z41ocmj4] {
        font-size: 1rem;
    }

.btn-dark[b-e3z41ocmj4] {
    background-color: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    height: 42px;
}

    .btn-dark:hover[b-e3z41ocmj4],
    .btn-dark:focus[b-e3z41ocmj4] {
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
    }

.btn-outline-primary[b-e3z41ocmj4] {
    background-color: transparent;
    color: var(--primary-dark);
    border-color: var(--primary);
}

    .btn-outline-primary:hover[b-e3z41ocmj4],
    .btn-outline-primary:focus[b-e3z41ocmj4] {
        background-color: var(--primary-light);
        border-color: var(--primary-dark);
    }

/* Error message component */
.error-message-component[b-e3z41ocmj4] {
    margin: var(--space-4) 0;
}

/* Change tab background and active tab color */
[b-e3z41ocmj4] .rz-tabs {
    background-color: var(--off-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-inner);
}

[b-e3z41ocmj4] .rz-tabview-nav {
    background-color: var(--secondary-lighter);
    border-bottom: 2px solid var(--primary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

    [b-e3z41ocmj4] .rz-tabview-nav li {
        color: var(--secondary);
        font-weight: var(--font-weight-medium);
        transition: background 0.2s, color 0.2s;
    }

        [b-e3z41ocmj4] .rz-tabview-nav li.rz-tabview-selected {
            background-color: var(--primary);
            color: var(--white);
            border-bottom: 2px solid var(--primary);
            border-radius: var(--radius-md) var(--radius-md) 0 0;
        }

        [b-e3z41ocmj4] .rz-tabview-nav li:not(.rz-tabview-selected):hover {
            background-color: var(--primary-light);
            color: var(--primary-dark);
        }

/* Grid section header */
.container h2[b-e3z41ocmj4] {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--secondary);
    margin: var(--space-6) 0 var(--space-4);
    position: relative;
    display: inline-block;
    padding-bottom: var(--space-2);
}

    .container h2[b-e3z41ocmj4]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        width: 100%;
        background-color: var(--primary);
        border-radius: var(--radius-pill);
    }

[b-e3z41ocmj4] .rz-datatable {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--light-grey);
    width: 100%;
    table-layout: auto;
}

[b-e3z41ocmj4] .rz-datatable-tablewrapper {
    overflow-x: auto;
    min-width: 100%;
}

[b-e3z41ocmj4] .rz-datatable-header {
    background-color: var(--secondary-lighter);
    border-bottom: 1px solid var(--light-grey);
}

.mobile-only[b-e3z41ocmj4] {
    display: none;
}

[b-e3z41ocmj4] .rz-datatable-thead th {
    background-color: var(--secondary-lighter);
    color: var(--secondary);
    font-weight: var(--font-weight-semibold);
    border-bottom: 2px solid var(--light-grey);
    text-align: left;
}

[b-e3z41ocmj4] .rz-datatable-data td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-e3z41ocmj4] .rz-datatable-even {
    background-color: var(--white);
}

[b-e3z41ocmj4] .rz-datatable-odd {
    background-color: var(--secondary-lighter);
}

[b-e3z41ocmj4] .rz-datatable-data tr:hover {
    background-color: var(--primary-lighter);
}

/* Grid expandable row styling */
[b-e3z41ocmj4] .rz-expanded-row {
    background-color: var(--secondary-lighter) !important;
}

[b-e3z41ocmj4] .rz-expanded-row-content {
    background-color: var(--secondary-lighter);
}

/* Grid button styling - Better alignment and sizing */
[b-e3z41ocmj4] .btn-outline-primary {
    height: 36px;
    padding: var(--space-1) var(--space-3);
    font-size: 0.8125rem;
    min-width: auto;
    width: auto;
    white-space: nowrap;
}

[b-e3z41ocmj4] .rz-datatable-data td .btn-outline-primary {
    display: inline-flex;
    margin: 0 auto;
}

/* Office grid in expanded row */
[b-e3z41ocmj4] .rz-card {
    background-color: var(--white);
    border-radius: var(--radius-md);
    margin: var(--space-3);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--light-grey);
}

    [b-e3z41ocmj4] .rz-card h5 {
        font-size: 1.25rem;
        font-weight: var(--font-weight-semibold);
        color: var(--secondary);
        margin-bottom: var(--space-4);
        position: relative;
        padding-left: var(--space-4);
    }

        [b-e3z41ocmj4] .rz-card h5::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background-color: var(--primary);
            border-radius: var(--radius-pill);
        }

.alert[b-e3z41ocmj4] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin: var(--space-3);
}

.alert-info[b-e3z41ocmj4] {
    background-color: var(--info-light);
    border: 1px solid var(--info);
    color: var(--info-dark);
}

/* Loading states */
.loading-state[b-e3z41ocmj4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) 0;
    color: var(--dark-grey);
}

.spinner[b-e3z41ocmj4] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--primary-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    margin-bottom: var(--space-4);
    animation: spinner-b-e3z41ocmj4 0.8s linear infinite;
}

@keyframes spinner-b-e3z41ocmj4 {
    to {
        transform: rotate(360deg);
    }
}

[b-e3z41ocmj4] .rz-datatable-loading {
    background-color: rgba(255, 255, 255, 0.7);
}

[b-e3z41ocmj4] .rz-datatable-loading-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-6);
}

/* Dialog Styles */
[b-e3z41ocmj4] .rz-dialog {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    min-width: 500px;
    max-width: 90vw;
}

[b-e3z41ocmj4] .rz-dialog-titlebar {
    background-color: var(--secondary-lighter);
    color: var(--secondary);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--light-grey);
    display: flex;
    align-items: center;
}

[b-e3z41ocmj4] .rz-dialog-titlebar-close {
    margin-left: auto;
}

[b-e3z41ocmj4] .rz-dialog-content {
    padding: var(--space-6);
}

[b-e3z41ocmj4] .rz-dialog-content-scrollable {
    max-height: 70vh;
    overflow-y: auto;
}

/* Form styling */
[b-e3z41ocmj4] .rz-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

    [b-e3z41ocmj4] .rz-stack[orientation="Horizontal"] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-3);
    }

[b-e3z41ocmj4] .rz-form-field {
    margin-bottom: var(--space-4);
}

[b-e3z41ocmj4] .rz-form-field-label {
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-2);
    color: var(--secondary);
}

[b-e3z41ocmj4] .rz-textbox {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--light-grey);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    height: 38px;
}

    [b-e3z41ocmj4] .rz-textbox:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-light);
        outline: none;
    }

[b-e3z41ocmj4] .rz-helper-text {
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--danger);
}

/* Button styling for dialog */
[b-e3z41ocmj4] .rz-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    gap: var(--space-2);
    height: 38px;
    min-width: 120px;
}

[b-e3z41ocmj4] .rz-button-primary {
    background-color: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

    [b-e3z41ocmj4] .rz-button-primary:hover {
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
    }

[b-e3z41ocmj4] .rz-button-light {
    background-color: transparent;
    color: var(--secondary);
    border-color: var(--light-grey);
}

    [b-e3z41ocmj4] .rz-button-light:hover {
        background-color: var(--secondary-lighter);
        border-color: var(--medium-grey);
    }

[b-e3z41ocmj4] .rz-paginator {
    background-color: var(--secondary-lighter);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--light-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

[b-e3z41ocmj4] .rz-paginator-element {
    color: var(--secondary);
    background-color: var(--white);
    border: 1px solid var(--light-grey);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    [b-e3z41ocmj4] .rz-paginator-element:hover {
        background-color: var(--primary-lighter);
        color: var(--primary-dark);
        border-color: var(--primary);
    }

[b-e3z41ocmj4] .rz-paginator-page.rz-state-active {
    background-color: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

[b-e3z41ocmj4] .rz-paginator-summary {
    margin-left: auto;
    color: var(--dark-grey);
}

.grid-button[b-e3z41ocmj4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-3);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    gap: var(--space-1);
    height: 32px;
    min-width: 90px;
    white-space: nowrap;
}


    .grid-button.edit[b-e3z41ocmj4] {
        background-color: var(--info-light);
        color: var(--info-dark);
        border-color: var(--info);
    }

        .grid-button.edit:hover[b-e3z41ocmj4] {
            background-color: var(--info);
            color: var(--white);
        }

    .grid-button.add[b-e3z41ocmj4] {
        background-color: var(--primary-light);
        color: var(--primary-dark);
        border-color: var(--primary);
    }

        .grid-button.add:hover[b-e3z41ocmj4] {
            background-color: var(--primary);
            color: var(--white);
        }

    .grid-button.create[b-e3z41ocmj4] {
        background-color: var(--success-light);
        color: var(--success-dark);
        border-color: var(--success);
    }

        .grid-button.create:hover[b-e3z41ocmj4] {
            background-color: var(--success);
            color: var(--white);
        }

    .grid-button.view[b-e3z41ocmj4] {
        background-color: var(--secondary-lighter);
        color: var(--secondary);
        border-color: var(--medium-grey);
    }

        .grid-button.view:hover[b-e3z41ocmj4] {
            background-color: var(--secondary-light);
            color: var(--white);
        }

@media (max-width: 1400px) {

    .card-body[b-e3z41ocmj4] {
        flex-direction: column;
    }

    .btn[b-e3z41ocmj4] {
        width: 100%;
    }

    [b-e3z41ocmj4] .rz-datatable-tablewrapper {
        overflow-x: auto !important;
    }

    .navbar[b-e3z41ocmj4], .nav-menu[b-e3z41ocmj4], .rz-navigation-bar[b-e3z41ocmj4] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .navbar-brand[b-e3z41ocmj4], .rz-navigation-brand[b-e3z41ocmj4] {
        margin-right: 1.5rem;
        margin-bottom: 0 !important;
    }

    .nav-link[b-e3z41ocmj4], .rz-navigation-link[b-e3z41ocmj4] {
        margin-bottom: 0 !important;
    }

    [b-e3z41ocmj4] .rz-paginator {
        flex-wrap: wrap;
    }

    .navbar-toggler[b-e3z41ocmj4] {
        display: block !important;
    }
}


/* Responsive adjustments */
@media (max-width: 767.98px) {
    .mobile-only[b-e3z41ocmj4] {
        display: inherit;
    }

    .mobile-hidden[b-e3z41ocmj4] {
        display: none !important;
    }

    .card-body[b-e3z41ocmj4] {
        flex-direction: column;
    }

    .btn[b-e3z41ocmj4] {
        width: 100%;
    }

    [b-e3z41ocmj4] .rz-datatable-tablewrapper {
        overflow-x: auto;
    }

    [b-e3z41ocmj4] .rz-paginator {
        flex-wrap: wrap;
    }
}

/* Nested grid styling - expanded row */
.expanded-content[b-e3z41ocmj4] {
    padding: var(--space-4);
    background-color: var(--secondary-lighter);
    border-radius: var(--radius-md);
}

.office-header[b-e3z41ocmj4] {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-4);
    gap: var(--space-3);
}

.office-icon[b-e3z41ocmj4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--primary);
    color: white;
    border-radius: var(--radius-md);
    font-size: 1rem;
}

.office-header h3[b-e3z41ocmj4] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    color: var(--secondary);
}

.office-grid-wrapper[b-e3z41ocmj4] {
    padding: var(--space-1);
    background-color: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--light-grey);
}

.empty-offices-message[b-e3z41ocmj4] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background-color: var(--info-light);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    color: var(--info-dark);
    border: 1px solid var(--info);
}

    .empty-offices-message i[b-e3z41ocmj4] {
        font-size: 1.25rem;
        color: var(--info);
    }

    .empty-offices-message p[b-e3z41ocmj4] {
        margin: 0;
    }
/* /Components/Pages/ShowDocument.razor.rz.scp.css */

/* Base styles - Removing bootstrap feel */
.documents-container[b-6ka0n5y75s] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-4);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--secondary);
    background-color: var(--off-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-inner);
}

/* Page header */
.page-header[b-6ka0n5y75s] {
    margin-bottom: var(--space-8);
}

.header-row[b-6ka0n5y75s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.page-title[b-6ka0n5y75s] {
    font-size: 1.875rem;
    font-weight: var(--font-weight-bold);
    color: var(--secondary);
    margin: 0;
    position: relative;
    padding-bottom: var(--space-2);
}

    .page-title[b-6ka0n5y75s]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 3px;
        background-color: var(--primary);
        border-radius: var(--radius-pill);
    }

/* Breadcrumb */
.breadcrumb[b-6ka0n5y75s] {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5) 0;
    font-size: 0.875rem;
}

.breadcrumb-item[b-6ka0n5y75s] {
    display: flex;
    align-items: center;
}

    .breadcrumb-item:not(:first-child)[b-6ka0n5y75s]::before {
        content: '/';
        padding: 0 var(--space-2);
        color: var(--medium-grey);
    }

    .breadcrumb-item a[b-6ka0n5y75s] {
        color: var(--primary);
        text-decoration: none;
        transition: color var(--transition-fast);
    }

        .breadcrumb-item a:hover[b-6ka0n5y75s] {
            color: var(--primary-dark);
            text-decoration: underline;
        }

    .breadcrumb-item.active[b-6ka0n5y75s] {
        color: var(--dark-grey);
    }

/* Filter banner */
.filter-banner[b-6ka0n5y75s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--primary-lighter);
    border-left: 4px solid var(--primary);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    margin-top: var(--space-6);
}

.filter-content[b-6ka0n5y75s] {
    font-weight: var(--font-weight-medium);
    color: var(--primary-darker);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

    .filter-content i[b-6ka0n5y75s] {
        font-size: 1.125rem;
        color: var(--primary);
    }

/* Content area */
.content-area[b-6ka0n5y75s] {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* Selection panel */
.selection-panel[b-6ka0n5y75s] {
    padding: 0;
    background-color: var(--white);
    margin-bottom: var(--space-8);
}

.panel-header[b-6ka0n5y75s] {
    background-color: var(--secondary-lighter);
    padding: var(--space-6);
    border-bottom: 1px solid var(--light-grey);
}

    .panel-header h2[b-6ka0n5y75s] {
        font-size: 1.5rem;
        font-weight: var(--font-weight-semibold);
        margin: 0 0 var(--space-2) 0;
        color: var(--secondary);
    }

.panel-subtitle[b-6ka0n5y75s] {
    color: var(--dark-grey);
    font-size: 0.9375rem;
}

.panel-body[b-6ka0n5y75s] {
    padding: var(--space-6);
}

.selection-grid[b-6ka0n5y75s] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-6);
}

.selection-cell[b-6ka0n5y75s] {
    display: flex;
    flex-direction: column;
}

.action-cell[b-6ka0n5y75s] {
    justify-content: flex-end;
}

/* Form elements with industrial look */
.form-label[b-6ka0n5y75s] {
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-2);
    display: block;
    color: var(--secondary);
}

.form-select[b-6ka0n5y75s] {
    appearance: none;
    background-color: var(--white);
    border: 1px solid var(--light-grey);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--secondary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    background-size: 16px 12px;
    width: 100%;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .form-select:focus[b-6ka0n5y75s] {
        border-color: var(--primary);
        outline: none;
        box-shadow: 0 0 0 3px var(--primary-light);
    }

    .form-select:disabled[b-6ka0n5y75s] {
        background-color: var(--light-grey);
        opacity: 0.7;
        cursor: not-allowed;
    }

/* Info panel */
.info-panel[b-6ka0n5y75s] {
    display: flex;
    align-items: flex-start;
    padding: var(--space-6);
    background-color: var(--info-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-8);
}

.info-icon[b-6ka0n5y75s] {
    color: var(--info);
    font-size: 1.5rem;
    margin-right: var(--space-5);
    flex-shrink: 0;
}

.info-content h3[b-6ka0n5y75s] {
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-2) 0;
    color: var(--info-dark);
}

.info-content p[b-6ka0n5y75s] {
    margin: 0;
    color: var(--dark-grey);
}

/* Error panel */
.error-panel[b-6ka0n5y75s] {
    display: flex;
    align-items: flex-start;
    padding: var(--space-6);
    background-color: var(--danger-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-8);
}

.error-icon[b-6ka0n5y75s] {
    color: var(--danger);
    font-size: 1.5rem;
    margin-right: var(--space-5);
    flex-shrink: 0;
}

.error-content h3[b-6ka0n5y75s] {
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-2) 0;
    color: var(--danger-dark);
}

.error-content p[b-6ka0n5y75s] {
    margin: 0;
    color: var(--dark-grey);
}

/* Loading state */
.loading-state[b-6ka0n5y75s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) 0;
    color: var(--dark-grey);
}

.spinner[b-6ka0n5y75s] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--primary-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    margin-bottom: var(--space-4);
    animation: spinner-b-6ka0n5y75s 0.8s linear infinite;
}

@keyframes spinner-b-6ka0n5y75s {
    to

{
    transform: rotate(360deg);
}

}

.empty-state[b-6ka0n5y75s] {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    max-width: 500px;
    margin: 0 auto;
}

.empty-icon[b-6ka0n5y75s] {
    font-size: 4rem;
    color: var(--medium-grey);
    margin-bottom: var(--space-6);
}

.empty-state h3[b-6ka0n5y75s] {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
    color: var(--secondary);
}

.empty-state p[b-6ka0n5y75s] {
    color: var(--dark-grey);
    margin-bottom: var(--space-6);
    font-size: 1.0625rem;
}

.empty-actions[b-6ka0n5y75s] {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Section header */
.section-header[b-6ka0n5y75s] {
    padding: var(--space-6);
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--secondary-lighter);
    border-top: 1px solid var(--light-grey);
    border-bottom: 1px solid var(--light-grey);
}

    .section-header h2[b-6ka0n5y75s] {
        font-size: 1.25rem;
        font-weight: var(--font-weight-semibold);
        margin: 0;
        color: var(--secondary);
        position: relative;
        padding-left: var(--space-4);
    }

        .section-header h2[b-6ka0n5y75s]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 60%;
            width: 3px;
            background-color: var(--primary);
            border-radius: var(--radius-pill);
        }

/* Document cards - More industrial feel */
.document-card[b-6ka0n5y75s] {
    background-color: var(--white);
    border: 1px solid var(--light-grey);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin: var(--space-6);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    position: relative;
    overflow: hidden;
}

    .document-card:hover[b-6ka0n5y75s] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .document-card.featured[b-6ka0n5y75s] {
        border-left: 5px solid var(--primary);
    }

        .document-card.featured[b-6ka0n5y75s]::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 5px;
            background-color: var(--primary);
        }

.document-header[b-6ka0n5y75s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--light-grey);
    background-color: var(--off-white);
}

.document-title[b-6ka0n5y75s] {
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--secondary);
    font-size: 1.25rem;
}

.document-details[b-6ka0n5y75s] {
    padding: var(--space-6);
}

.details-grid[b-6ka0n5y75s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.detail-item[b-6ka0n5y75s] {
    margin-bottom: var(--space-3);
    display: flex;
    align-items: baseline;
}

.detail-label[b-6ka0n5y75s] {
    font-weight: var(--font-weight-medium);
    color: var(--dark-grey);
    min-width: 90px;
}

.detail-value[b-6ka0n5y75s] {
    color: var(--secondary);
}

.detail-link[b-6ka0n5y75s] {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
    font-weight: var(--font-weight-medium);
}

    .detail-link:hover[b-6ka0n5y75s] {
        color: var(--primary-dark);
        text-decoration: underline;
    }

.document-actions[b-6ka0n5y75s] {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-6);
    border-top: 1px solid var(--light-grey);
    background-color: var(--off-white);
}

    .document-actions.compact[b-6ka0n5y75s] {
        justify-content: flex-end;
        padding: var(--space-4) var(--space-6);
    }

.status-badge[b-6ka0n5y75s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active[b-6ka0n5y75s] {
    background-color: var(--success-light);
    color: var(--success-dark);
    border: 1px solid var(--success);
}

.status-inactive[b-6ka0n5y75s] {
    background-color: var(--warning-light);
    color: var(--warning-dark);
    border: 1px solid var(--warning);
}

.status-cancelled[b-6ka0n5y75s] {
    background-color: var(--danger-light);
    color: var(--danger-dark);
    border: 1px solid var(--danger);
}

.status-completed[b-6ka0n5y75s] {
    background-color: var(--info-light);
    color: var(--info-dark);
    border: 1px solid var(--info);
}

.status-unknown[b-6ka0n5y75s] {
    background-color: rgba(108, 117, 125, 0.1);
    color: var(--dark-grey);
    border: 1px solid var(--medium-grey);
}

.approved-badge[b-6ka0n5y75s] {
    display: inline-flex;
    align-items: center;
    background-color: var(--success-light);
    color: var(--success-dark);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--success);
}

.not-approved-badge[b-6ka0n5y75s] {
    display: inline-flex;
    align-items: center;
    background-color: var(--danger-light);
    color: var(--danger-dark);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--danger);
}

.document-grid[b-6ka0n5y75s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-6);
    padding: var(--space-6);
}

.action-button[b-6ka0n5y75s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    font-weight: var(--font-weight-medium);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    text-decoration: none;
    font-size: 0.9375rem;
    gap: var(--space-2);
    height: 42px;
}

    .action-button i[b-6ka0n5y75s] {
        font-size: 1rem;
    }

    .action-button.primary[b-6ka0n5y75s] {
        background-color: var(--primary);
        color: var(--white);
        border-color: var(--primary);
    }

        .action-button.primary:hover[b-6ka0n5y75s],
        .action-button.primary:focus[b-6ka0n5y75s] {
            background-color: var(--primary-dark);
            border-color: var(--primary-dark);
        }

    .action-button.outline[b-6ka0n5y75s] {
        background-color: transparent;
        color: var(--secondary);
        border-color: var(--light-grey);
    }

        .action-button.outline:hover[b-6ka0n5y75s],
        .action-button.outline:focus[b-6ka0n5y75s] {
            background-color: var(--secondary-lighter);
            border-color: var(--medium-grey);
        }

    .action-button.danger[b-6ka0n5y75s] {
        background-color: var(--danger);
        color: var(--white);
        border-color: var(--danger);
    }

        .action-button.danger:hover[b-6ka0n5y75s],
        .action-button.danger:focus[b-6ka0n5y75s] {
            background-color: var(--danger-dark);
            border-color: var(--danger-dark);
        }

    .action-button.danger-outline[b-6ka0n5y75s] {
        background-color: transparent;
        color: var(--danger);
        border-color: var(--danger-light);
    }

        .action-button.danger-outline:hover[b-6ka0n5y75s],
        .action-button.danger-outline:focus[b-6ka0n5y75s] {
            background-color: var(--danger-light);
            border-color: var(--danger);
        }

    .action-button.sm[b-6ka0n5y75s] {
        padding: var(--space-2) var(--space-3);
        font-size: 0.875rem;
        height: 36px;
    }

    .action-button.block[b-6ka0n5y75s] {
        display: flex;
        width: 100%;
    }

    .action-button:disabled[b-6ka0n5y75s] {
        opacity: 0.65;
        cursor: not-allowed;
    }

.button-spinner[b-6ka0n5y75s] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spinner-b-6ka0n5y75s 0.8s linear infinite;
    margin-right: var(--space-2);
}

.modal-overlay[b-6ka0n5y75s] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.modal[b-6ka0n5y75s] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-6ka0n5y75s] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    pointer-events: auto;
    background-color: var(--white);
    border-radius: var(--radius-lg);
    outline: 0;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--light-grey);
    overflow: hidden;
}

.modal-header[b-6ka0n5y75s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--light-grey);
    background-color: var(--off-white);
}

.modal-title[b-6ka0n5y75s] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    color: var(--secondary);
}

.close-button[b-6ka0n5y75s] {
    background: transparent;
    border: none;
    color: var(--dark-grey);
    font-size: 1rem;
    cursor: pointer;
    padding: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

    .close-button:hover[b-6ka0n5y75s] {
        background-color: var(--light-grey);
        color: var(--secondary);
    }

.modal-body[b-6ka0n5y75s] {
    padding: var(--space-6);
}

    .modal-body p[b-6ka0n5y75s] {
        margin-top: 0;
        margin-bottom: var(--space-4);
    }

.warning-text[b-6ka0n5y75s] {
    color: var(--danger);
    font-weight: var(--font-weight-medium);
}

.modal-footer[b-6ka0n5y75s] {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--light-grey);
    background-color: var(--off-white);
    gap: var(--space-3);
}

@media (max-width: 767.98px) {
    .document-grid[b-6ka0n5y75s]

{
    grid-template-columns: 1fr;
}

.details-grid[b-6ka0n5y75s] {
    grid-template-columns: 1fr;
}

.selection-grid[b-6ka0n5y75s] {
    grid-template-columns: 1fr;
}

.document-actions[b-6ka0n5y75s] {
    flex-direction: column;
}

    .document-actions .action-button[b-6ka0n5y75s] {
        width: 100%;
    }

    .document-actions.compact[b-6ka0n5y75s] {
        flex-direction: row;
    }

.empty-actions[b-6ka0n5y75s] {
    flex-direction: column;
}

    .empty-actions .action-button[b-6ka0n5y75s] {
        width: 100%;
    }
}
/* /Components/Pages/UpdateTemplate.razor.rz.scp.css */
.preview-container[b-i1xdlt4vcx] {
    background-color: #f9f9f9;
    border-radius: 8px;
}

.preview-header[b-i1xdlt4vcx] {
    background-color: #fff;
    border-left: 4px solid #41D1B3;
}

.preview-form[b-i1xdlt4vcx] {
    background-color: #fff;
}

.question-text[b-i1xdlt4vcx] {
    color: #212529;
}

.questions-table[b-i1xdlt4vcx] {
    table-layout: fixed;
    width: 100%;
}

    .questions-table th:nth-child(1)[b-i1xdlt4vcx] {
        width: 60px;
    }
    .questions-table th:nth-child(2)[b-i1xdlt4vcx] {
        width: 40%;
    }
    .questions-table th:nth-child(3)[b-i1xdlt4vcx] {
        width: 120px;
    }
    .questions-table th:nth-child(4)[b-i1xdlt4vcx] {
        width: 140px;
    }
    .questions-table th:nth-child(5)[b-i1xdlt4vcx] {
        width: 120px;
    }

    .questions-table td[b-i1xdlt4vcx] {
        vertical-align: middle;
        padding: 8px 4px;
    }

.question-text-cell[b-i1xdlt4vcx] {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 0;
}

.question-text-truncated[b-i1xdlt4vcx] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    max-height: 2.8em;
}

.badge-container[b-i1xdlt4vcx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.badge-small[b-i1xdlt4vcx] {
    font-size: 0.7rem;
    padding: 0.25em 0.5em;
    white-space: nowrap;
}

.action-buttons[b-i1xdlt4vcx] {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: nowrap;
}

.btn-table-action[b-i1xdlt4vcx] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1;
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.order-index-cell[b-i1xdlt4vcx] {
    text-align: center;
    font-weight: 600;
}

@media (max-width: 768px) {
    .questions-table th:nth-child(2)[b-i1xdlt4vcx] {
        width: 35%;
    }

    .questions-table th:nth-child(3)[b-i1xdlt4vcx] {
        width: 100px;
    }

    .questions-table th:nth-child(4)[b-i1xdlt4vcx] {
        width: 110px;
    }

    .badge-small[b-i1xdlt4vcx] {
        font-size: 0.65rem;
        padding: 0.2em 0.4em;
    }

    .btn-table-action[b-i1xdlt4vcx] {
        padding: 0.2rem 0.4rem;
        font-size: 0.8rem;
        min-width: 28px;
        height: 28px;
    }
}

.questions-table tbody tr[b-i1xdlt4vcx] {
    min-height: 50px;
}

/* /Components/Pages/ViewDocument.razor.rz.scp.css */
/*

.document-view-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-4);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--secondary);
    background-color: var(--off-white);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.page-header {
    margin-bottom: var(--space-8);
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.page-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--secondary);
    margin: 0;
    position: relative;
    padding-bottom: var(--space-2);
}

    .page-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 3px;
        background-color: var(--primary);
        border-radius: var(--radius-pill);
    }

.action-buttons {
    display: flex;
    gap: var(--space-3);
}*/

/* Breadcrumb */
/*.breadcrumb {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5) 0;
    font-size: 0.875rem;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

    .breadcrumb-item:not(:first-child)::before {
        content: '/';
        padding: 0 var(--space-2);
        color: var(--medium-grey);
    }

    .breadcrumb-item a {
        color: var(--primary);
        text-decoration: none;
        transition: color var(--transition-fast);
    }

        .breadcrumb-item a:hover {
            color: var(--primary-dark);
            text-decoration: underline;
        }

    .breadcrumb-item.active {
        color: var(--dark-grey);
    }*/

/* Content area */
/*.content-area {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}*/

/* Document container */
/*.document-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6);
}*/

/* Document panels */
/*.document-panel {
    border: 1px solid var(--light-grey);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.panel-header {
    background-color: var(--secondary-lighter);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--light-grey);
}

    .panel-header h2 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--secondary);
        position: relative;
        padding-left: var(--space-4);
    }

        .panel-header h2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 60%;
            width: 3px;
            background-color: var(--primary);
            border-radius: var(--radius-pill);
        }

.panel-body {
    padding: var(--space-6);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.info-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dark-grey);
}

.info-value {
    font-size: 1rem;
    color: var(--secondary);
}

.info-link {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

    .info-link:hover {
        color: var(--primary-dark);
        text-decoration: underline;
    }

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.status-active {
    background-color: var(--success-light);
    color: var(--success-dark);
    border: 1px solid var(--success);
}

.status-inactive {
    background-color: var(--warning-light);
    color: var(--warning-dark);
    border: 1px solid var(--warning);
}

.status-cancelled {
    background-color: var(--danger-light);
    color: var(--danger-dark);
    border: 1px solid var(--danger);
}

.status-completed {
    background-color: var(--info-light);
    color: var(--info-dark);
    border: 1px solid var(--info);
}

.status-unknown {
    background-color: rgba(108, 117, 125, 0.1);
    color: var(--dark-grey);
    border: 1px solid var(--medium-grey);
}

.approved-badge {
    display: inline-flex;
    align-items: center;
    background-color: var(--success-light);
    color: var(--success-dark);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--success);
}

.not-approved-badge {
    display: inline-flex;
    align-items: center;
    background-color: rgba(108, 117, 125, 0.1);
    color: var(--dark-grey);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--medium-grey);
}*/

/* Q&A Styling */
/*.qa-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.qa-card {
    border: 1px solid var(--light-grey);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.question-section {
    background-color: var(--secondary-lighter);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--light-grey);
}

.question-text {
    font-weight: 600;
    color: var(--secondary);
}

.answer-section {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.answer-value {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    width: fit-content;
}

.answer-yes {
    background-color: var(--success-light);
    color: var(--success-dark);
    border: 1px solid var(--success);
}

.answer-no {
    background-color: var(--danger-light);
    color: var(--danger-dark);
    border: 1px solid var(--danger);
}

.answer-na {
    background-color: var(--info-light);
    color: var(--info-dark);
    border: 1px solid var(--info);
}

.answer-other, .answer-empty {
    background-color: rgba(108, 117, 125, 0.1);
    color: var(--dark-grey);
    border: 1px solid var(--medium-grey);
}

.comment-container {
    background-color: var(--off-white);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--light-grey);
}

.comment-label {
    font-weight: 500;
    color: var(--dark-grey);
    font-size: 0.875rem;
    margin-bottom: var(--space-1);
}

.comment-value {
    color: var(--secondary);
    white-space: pre-line;
}

.approval-marker {
    color: var(--success);
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.nonApproval-marker {
    color: var(--danger);
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-6) 0;
    color: var(--dark-grey);
}

    .empty-state i {
        font-size: 2.5rem;
        margin-bottom: var(--space-3);
        color: var(--medium-grey);
    }

    .empty-state p {
        font-size: 1rem;
        margin: 0;
    }

.action-bar {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-10) 0;
    color: var(--dark-grey);
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--primary-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    margin-bottom: var(--space-4);
    animation: spinner 0.8s linear infinite;
}

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

.error-panel {
    display: flex;
    align-items: flex-start;
    padding: var(--space-6);
    gap: var(--space-4);
}

.error-icon {
    flex-shrink: 0;
    color: var(--danger);
    font-size: 2rem;
}

.error-content h3 {
    margin: 0 0 var(--space-2) 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--danger-dark);
}

.error-content p {
    margin: 0;
    color: var(--dark-grey);
}

.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    text-decoration: none;
    font-size: 0.9375rem;
    gap: var(--space-2);
    height: 42px;
}

    .action-button i {
        font-size: 1rem;
    }

    .action-button.primary {
        background-color: var(--primary);
        color: var(--white);
        border-color: var(--primary);
    }

        .action-button.primary:hover,
        .action-button.primary:focus {
            background-color: var(--primary-dark);
            border-color: var(--primary-dark);
        }

    .action-button.outline {
        background-color: transparent;
        color: var(--secondary);
        border-color: var(--light-grey);
    }

        .action-button.outline:hover,
        .action-button.outline:focus {
            background-color: var(--secondary-lighter);
            border-color: var(--medium-grey);
        }

@media (max-width: 767.98px) {
    .info-grid {
        grid-template-columns: 1fr;
    }

    .action-buttons {
        flex-direction: column;
        width: 100%;
    }

        .action-buttons .action-button {
            width: 100%;
        }

    .header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .action-bar {
        flex-direction: column;
    }

        .action-bar .action-button {
            width: 100%;
        }
}*/
/* /Components/Pages/ViewDocumentTemplate.razor.rz.scp.css */

.container-fluid[b-so95odm7g7] {
    max-width: 1000px;
    margin: 2rem auto;
    padding: var(--space-4);
    background: var(--off-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

h1[b-so95odm7g7], h5[b-so95odm7g7], h3[b-so95odm7g7] {
    color: var(--secondary);
}

.card[b-so95odm7g7] {
    border: 1px solid var(--light-grey);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    background: var(--white);
    margin-bottom: var(--space-6);
}

.card-header[b-so95odm7g7] {
    background: var(--secondary-lighter);
    border-bottom: 1px solid var(--light-grey);
    padding: var(--space-4) var(--space-6);
}

.card-title[b-so95odm7g7] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--secondary);
}

.card-body[b-so95odm7g7] {
    padding: var(--space-6);
}

.badge[b-so95odm7g7] {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    border-radius: var(--radius-pill);
}

.bg-success[b-so95odm7g7] {
    background-color: var(--success-light) !important;
    color: var(--success) !important;
}

.bg-secondary[b-so95odm7g7] {
    background-color: var(--light-grey) !important;
    color: var(--dark-grey) !important;
}

.bg-primary[b-so95odm7g7] {
    background-color: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}

.list-group-item[b-so95odm7g7] {
    border: none;
    border-bottom: 1px solid var(--light-grey);
    padding: var(--space-4) 0;
    background: transparent;
}

    .list-group-item:last-child[b-so95odm7g7] {
        border-bottom: none;
    }

.question-layout[b-so95odm7g7] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-height: 2.5rem;
}

.question-content[b-so95odm7g7] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.question-text[b-so95odm7g7] {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.4;
}

.question-badges[b-so95odm7g7] {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: flex-start;
    min-width: fit-content;
}

.chapter-header[b-so95odm7g7] {
    cursor: pointer;
    padding: 0.75rem;
    border: 1px solid var(--light-grey);
    border-radius: var(--radius-md);
    background: var(--off-white);
    transition: background-color 0.2s ease;
    margin-bottom: 0.5rem;
    user-select: none;
}

    .chapter-header:hover[b-so95odm7g7] {
        background: var(--secondary-lighter);
    }

    .chapter-header i[b-so95odm7g7] {
        color: var(--secondary);
        transition: transform 0.2s ease;
    }

.preview-chapter[b-so95odm7g7] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #ffffff;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.preview-chapter-header[b-so95odm7g7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
}

    .preview-chapter-header:hover[b-so95odm7g7] {
        background: #e9ecef;
    }

.preview-chapter-left[b-so95odm7g7] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.preview-chevron[b-so95odm7g7] {
    color: #6c757d;
    font-size: 14px;
    transition: transform 0.2s ease, color 0.2s ease;
    width: 12px;
}

.preview-chapter-header:hover .preview-chevron[b-so95odm7g7] {
    color: #495057;
}

.preview-chapter-title[b-so95odm7g7] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #212529;
}

.preview-chapter-right[b-so95odm7g7] {
    display: flex;
    align-items: center;
}

.preview-question-count[b-so95odm7g7] {
    background: #6c757d;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.preview-chapter-content[b-so95odm7g7] {
    padding: 0;
    background: #ffffff;
}

.preview-no-questions[b-so95odm7g7] {
    padding: 20px;
    color: #6c757d;
    font-style: italic;
    text-align: center;
}

.preview-question[b-so95odm7g7] {
    border-bottom: 1px solid #f0f0f0;
    padding: 20px;
}

    .preview-question:last-child[b-so95odm7g7] {
        border-bottom: none;
    }

.preview-question-header[b-so95odm7g7] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.preview-question-number[b-so95odm7g7] {
    background: #007bff;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

.preview-question-text[b-so95odm7g7] {
    flex: 1;
    color: #212529;
    font-size: 15px;
    line-height: 1.5;
    padding-top: 4px;
}

.preview-question-badges[b-so95odm7g7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.preview-badge[b-so95odm7g7] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preview-badge-required[b-so95odm7g7] {
    background: #dc3545;
    color: white;
}

.preview-badge-important[b-so95odm7g7] {
    background: #ffc107;
    color: #212529;
}

.preview-question-options[b-so95odm7g7] {
    margin-left: 40px;
}

.preview-radio-group[b-so95odm7g7] {
    display: flex;
    gap: 24px;
    align-items: center;
}

.preview-radio-option[b-so95odm7g7] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6c757d;
    font-size: 14px;
    cursor: not-allowed;
}

    .preview-radio-option input[type="radio"][b-so95odm7g7] {
        margin: 0;
        cursor: not-allowed;
    }

    .preview-radio-option span[b-so95odm7g7] {
        user-select: none;
    }

.d-flex[b-so95odm7g7] {
    display: flex !important;
}

.justify-content-between[b-so95odm7g7] {
    justify-content: space-between !important;
}

.align-items-center[b-so95odm7g7] {
    align-items: center !important;
}

.align-items-start[b-so95odm7g7] {
    align-items: flex-start !important;
}

.flex-grow-1[b-so95odm7g7] {
    flex-grow: 1 !important;
}

.mb-4[b-so95odm7g7] {
    margin-bottom: var(--space-6) !important;
}

.me-2[b-so95odm7g7] {
    margin-right: var(--space-4) !important;
}

.ms-2[b-so95odm7g7] {
    margin-left: var(--space-2) !important;
}

.gap-2[b-so95odm7g7] {
    gap: var(--space-2) !important;
}

.btn[b-so95odm7g7] {
    border-radius: var(--radius-pill);
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-primary[b-so95odm7g7] {
    background: var(--primary);
    color: var(--white);
    border: none;
}

.btn-outline-primary[b-so95odm7g7] {
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--primary);
}

.btn-outline-secondary[b-so95odm7g7] {
    background: transparent;
    color: var(--secondary);
    border: 1.5px solid var(--light-grey);
}

.btn-outline-danger[b-so95odm7g7] {
    background: transparent;
    color: var(--danger);
    border: 1.5px solid var(--danger);
}

.btn-outline-dark[b-so95odm7g7] {
    background: transparent;
    color: var(--dark-grey);
    border: 1.5px solid var(--dark-grey);
}

.btn:hover[b-so95odm7g7], .btn:focus[b-so95odm7g7] {
    opacity: 0.9;
}

.alert[b-so95odm7g7] {
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
}

.modal-content[b-so95odm7g7] {
    border-radius: var(--radius-md);
}

.preview-container[b-so95odm7g7] {
    background-color: #f9f9f9;
    border-radius: 8px;
}

.preview-header[b-so95odm7g7] {
    background-color: #fff;
    border-left: 4px solid #41D1B3;
}

.preview-form[b-so95odm7g7] {
    background-color: #fff;
}

.question-text[b-so95odm7g7] {
    color: #212529;
}

@media (max-width: 991.98px) {
    .container-fluid[b-so95odm7g7] {
        max-width: 98vw;
        padding: var(--space-3);
    }

    .card-body[b-so95odm7g7] {
        padding: var(--space-4);
    }

    .question-layout[b-so95odm7g7] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .question-badges[b-so95odm7g7] {
        align-self: stretch;
    }
}

@media (max-width: 767.98px) {
    .container-fluid[b-so95odm7g7] {
        max-width: 100vw;
        padding: var(--space-2);
    }

    .card-body[b-so95odm7g7] {
        padding: var(--space-3);
    }

    .d-flex[b-so95odm7g7] {
        flex-direction: column !important;
        gap: var(--space-3);
    }

    .question-layout[b-so95odm7g7] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .chapter-header[b-so95odm7g7] {
        padding: 0.5rem;
    }
}

.fw-bold[b-so95odm7g7] {
    font-weight: 600 !important;
}

.text-muted[b-so95odm7g7] {
    color: #6c757d !important;
}