/* Kinan delete confirmation modal (shared destructive-action dialog) */

#kinanDeleteConfirmModal,
#createCourseModal,
#createLearningPathModal,
#enrollModal,
#assignModal,
#shareModal {
    z-index: 99999 !important;
}

#kinanDeleteConfirmModal.kinan-delete-modal--open {
    animation: kinanDeleteModalFadeIn 0.2s ease-out;
}

#kinanDeleteConfirmModal .kinan-delete-modal-panel {
    animation: kinanDeleteModalScaleIn 0.2s ease-out;
}

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

@keyframes kinanDeleteModalScaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.kinan-delete-modal-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.kinan-delete-modal-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 28rem;
    min-width: 0;
    overflow-x: hidden;
    border: 1px solid #ccc3d1;
}

.dark .kinan-delete-modal-panel {
    border-color: #4b5563;
}

.kinan-delete-modal-header,
.kinan-delete-modal-footer,
#kinanDeleteConfirmInputSection {
    box-sizing: border-box;
    max-width: 100%;
}

.kinan-delete-modal-title,
.kinan-delete-modal-message,
.kinan-delete-modal-label,
.kinan-delete-modal-action,
.kinan-delete-modal-item-name,
#kinanDeleteConfirmTitle,
#kinanDeleteConfirmMessage,
#kinanDeleteConfirmLabel,
#kinanDeleteConfirmInput,
#kinanDeleteConfirmMessage .font-bold,
.kinan-delete-modal-message .font-bold {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
}

.kinan-delete-modal-item-name,
#kinanDeleteConfirmMessage .font-bold,
.kinan-delete-modal-message .font-bold {
    display: inline-block;
    vertical-align: top;
}

.kinan-delete-modal-label,
#kinanDeleteConfirmLabel {
    text-align: start;
    line-height: 1.5;
    white-space: normal;
}

.kinan-delete-modal-title,
#kinanDeleteConfirmTitle {
    text-align: center;
    line-height: 1.35;
}

.kinan-delete-modal-message,
#kinanDeleteConfirmMessage {
    text-align: center;
}

.kinan-delete-modal-action {
    min-width: 0;
    white-space: normal;
    line-height: 1.35;
}

[dir="rtl"] .kinan-delete-modal-label,
[dir="rtl"] #kinanDeleteConfirmLabel {
    text-align: right;
}

[dir="rtl"] .kinan-delete-modal-message,
[dir="rtl"] #kinanDeleteConfirmMessage,
[dir="rtl"] .kinan-delete-modal-title,
[dir="rtl"] #kinanDeleteConfirmTitle {
    text-align: center;
    unicode-bidi: plaintext;
}

.kinan-delete-btn--disabled {
    background-color: rgba(211, 47, 47, 0.5) !important;
    cursor: not-allowed !important;
}

.kinan-delete-btn--enabled {
    background-color: #d32f2f !important;
}

.kinan-delete-btn--enabled:hover {
    background-color: #b71c1c !important;
}

.kinan-delete-btn--enabled:active {
    transform: scale(0.98);
}

.kinan-enroll-btn {
    background-color: #006d37 !important;
    color: #ffffff !important;
}

.kinan-enroll-btn:hover {
    background-color: #005228 !important;
}

.kinan-enroll-btn:active {
    transform: scale(0.98);
}

.kinan-create-btn {
    background-color: #6E4FA2 !important;
    color: #ffffff !important;
}

.kinan-create-btn:hover {
    background-color: #5a3f85 !important;
}

#createLearningPathModal .kinan-create-btn,
#createCourseModal .kinan-create-btn,
#onboardCompanyModal .kinan-create-btn {
    background-color: #6E4FA2 !important;
    color: #ffffff !important;
}

#createLearningPathModal .kinan-create-btn:hover,
#createCourseModal .kinan-create-btn:hover,
#onboardCompanyModal .kinan-create-btn:hover {
    background-color: #5a3f85 !important;
}

.kinan-create-btn:active {
    transform: scale(0.98);
}

.kinan-create-modal-panel {
    max-width: 32rem;
}

.kinan-org-modal-panel {
    max-width: 36rem;
}

.kinan-assign-modal-panel {
    max-width: 48rem;
}

.kinan-share-modal-panel {
    max-width: 100%;
    width: 100%;
}

#shareModal .kinan-delete-modal-panel.kinan-share-modal-panel {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

#shareModalContent,
#assignModalContent {
    min-width: 0;
    width: 100%;
}

.kinan-share-notice {
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    white-space: normal;
}

[dir="rtl"] #shareModal .kinan-share-notice {
    text-align: start;
    unicode-bidi: plaintext;
}

#shareModal .kinan-delete-modal-panel,
#shareModal #quickAccessSection,
#shareModal #inviteColleaguesSection {
    max-width: 100%;
    min-width: 0;
}

#assignModal.kinan-delete-modal--open,
#shareModal.kinan-delete-modal--open {
    animation: kinanDeleteModalFadeIn 0.2s ease-out;
}

#assignModal .kinan-delete-modal-panel,
#shareModal .kinan-delete-modal-panel {
    animation: kinanDeleteModalScaleIn 0.2s ease-out;
}

.kinan-assign-btn {
    background-color: #6E4FA2 !important;
    color: #ffffff !important;
}

.kinan-assign-btn:hover {
    background-color: #5a3f85 !important;
}

.kinan-assign-btn:active {
    transform: scale(0.98);
}

#modal-container > .kinan-delete-modal--open {
    animation: kinanDeleteModalFadeIn 0.2s ease-out;
}

#modal-container .kinan-delete-modal-panel {
    animation: kinanDeleteModalScaleIn 0.2s ease-out;
}

#createCourseModal.kinan-delete-modal--open,
#createLearningPathModal.kinan-delete-modal--open,
#onboardCompanyModal.kinan-delete-modal--open {
    animation: kinanDeleteModalFadeIn 0.2s ease-out;
}

#createCourseModal .kinan-delete-modal-panel,
#createLearningPathModal .kinan-delete-modal-panel,
#onboardCompanyModal .kinan-delete-modal-panel {
    animation: kinanDeleteModalScaleIn 0.2s ease-out;
}

.kinan-modal-field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4a4550;
    margin-bottom: 0.5rem;
    text-align: start;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

.dark .kinan-modal-field-label {
    color: #d1d5db;
}

[dir="rtl"] .kinan-modal-field-label {
    text-align: right;
}

.kinan-modal-field-input,
.kinan-modal-field-select,
.kinan-modal-field-textarea {
    width: 100%;
    background-color: #f3f4f5;
    border: 1px solid #ccc3d1;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #191c1d;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dark .kinan-modal-field-input,
.dark .kinan-modal-field-select,
.dark .kinan-modal-field-textarea {
    background-color: #1f2937;
    border-color: #4b5563;
    color: #f9fafb;
}

.kinan-modal-field-input:focus,
.kinan-modal-field-select:focus,
.kinan-modal-field-textarea:focus {
    border-color: #6f4f99;
    box-shadow: 0 0 0 2px rgba(111, 79, 153, 0.2);
}

body.modal-open nav.fixed,
body.modal-open .sidebar-container {
    z-index: 1 !important;
}

#onboardCompanyModal {
    z-index: 99999 !important;
}

#onboardCompanyModal.kinan-delete-modal--open {
    z-index: 99999 !important;
}

#enrollModal.kinan-delete-modal--open {
    animation: kinanDeleteModalFadeIn 0.2s ease-out;
}

#enrollModal .kinan-delete-modal-panel {
    animation: kinanDeleteModalScaleIn 0.2s ease-out;
}

.kinan-htmx-btn.htmx-request,
.kinan-htmx-btn.kinan-htmx-loading,
.kinan-modal-trigger-btn.htmx-request,
.kinan-modal-trigger-btn.kinan-htmx-loading,
.load-more-btn.htmx-request,
.load-more-btn.kinan-htmx-loading {
    pointer-events: none;
}

/* Button loading: swap label for spinner during HTMX request */
.kinan-htmx-btn .btn-loading,
.kinan-modal-trigger-btn .btn-loading,
.load-more-btn .btn-loading {
    display: none;
}

.kinan-htmx-btn.htmx-request .btn-text,
.kinan-htmx-btn.kinan-htmx-loading .btn-text,
.kinan-modal-trigger-btn.htmx-request .btn-text,
.kinan-modal-trigger-btn.kinan-htmx-loading .btn-text,
.load-more-btn.htmx-request .btn-text,
.load-more-btn.kinan-htmx-loading .btn-text {
    display: none;
}

.kinan-htmx-btn.htmx-request .btn-loading,
.kinan-htmx-btn.kinan-htmx-loading .btn-loading,
.kinan-modal-trigger-btn.htmx-request .btn-loading,
.kinan-modal-trigger-btn.kinan-htmx-loading .btn-loading,
.load-more-btn.htmx-request .btn-loading,
.load-more-btn.kinan-htmx-loading .btn-loading {
    display: inline-flex;
}