/* ============================================================
   Blog Editor — stylesheet
   public/css/blog-editor.css

   Shared by resources/views/blog/editor.blade.php and the
   components it includes:
     - resources/views/components/multi-selector.blade.php
       (relies on: .tag-box, .multi-select-search-wrap, .multi-select-dropdown,
        .multi-select-item, .multi-select-empty, .tag-chip)
     - resources/views/components/featured-image-upload.blade.php
       (relies on: .upload-zone, .upload-error, .featured-preview)
   ============================================================ */

:root {}

body {
    background: #ffffff;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
}

.page-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.75rem;
}

/* ---- Header actions ---- */
.header-actions {
    margin-top: 0.25rem;
}

/* ---- Title / Slug header block ---- */
.title-input {
    font-size: 1.7rem;
    font-weight: 700;
    border: none;
    padding: 0;
    width: 100%;
    color: #1f2937;
}

.title-input::placeholder {
    color: #c4ccdb;
    font-weight: 700;
}

.title-input:focus {
    outline: none;
    box-shadow: none;
}

.slug-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: #8a93a3;
}

.slug-domain {
    white-space: nowrap;
}

.slug-input {
    border: none;
    background: transparent;
    color: #3b7dff;
    font-size: 0.82rem;
    padding: 0 0 0 2px;
    min-width: 0;
    flex: 1;
}

.slug-input:focus {
    outline: none;
    box-shadow: none;
    text-decoration: underline;
}

.title-block {
    padding-bottom: 1.1rem;
    /*border-bottom: 1px solid #e9eaee;*/
    /*margin-bottom: 1.4rem;*/
}

/* ---- Cards ---- */
.card {
    background: #ffffff;
    border: 1px solid #e9eaee;
    border-radius: 0.6rem;
    box-shadow:
        0 2px 4px rgba(16, 24, 40, 0.06),
        0 1px 2px rgba(16, 24, 40, 0.04);
}

.card+.card {
    margin-top: 1.1rem;
}

.field-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a93a3;
}

/* ---- Editor ---- */
.editor-toolbar {
    border-bottom: 1px solid #e9eaee;
    padding-bottom: 0.6rem;
    margin-bottom: 0.85rem;
}

.editor-toolbar .btn {
    color: #5b6473;
    padding: 0.3rem 0.55rem;
    font-size: 0.8rem;
}

.editor-toolbar .btn.active {
    background: #eaf1ff;
    color: #3b7dff;
}

.editor-canvas {
    min-height: 420px;
    border: 1px dashed #e9eaee;
    border-radius: 0.5rem;
    padding: 1.5rem;
    color: #8a93a3;
}

.ph-block {
    background: #eef1f5;
    border-radius: 0.25rem;
}

.editor-img-block {
    height: 130px;
    background: #eef1f5;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c2c9d4;
    font-size: 0.75rem;
}

/* ---- Tag box (used by components.multi-selector); badge-* are unused legacy wireframe classes ---- */
.tag-box {
    border: 1px solid #e9eaee;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.badge-glossary {
    background: #eaf1ff;
    color: #3b7dff;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.35rem;
}

.badge-add {
    border: 1px dashed #e9eaee;
    color: #8a93a3;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.35rem;
    background: #fff;
}

/* ---- Right panel ---- */
.side-col {
    max-width: 100%;
}

.panel-title {
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 0.7rem;
}

.status-list .row-item {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #e9eaee;
}

.status-list .row-item:last-child {
    border-bottom: none;
}

.status-list .label {
    color: #8a93a3;
    margin-bottom: 0.15rem;
}

.upload-zone {
    border: 1px dashed #e9eaee;
    border-radius: 0.5rem;
    padding: 1rem 0.5rem;
    text-align: center;
    color: #8a93a3;
    font-size: 0.72rem;
}

.attach-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #e9eaee;
    font-size: 0.72rem;
}

.attach-row:last-child {
    border-bottom: none;
}

.attach-icon {
    width: 26px;
    height: 26px;
    border-radius: 0.4rem;
    background: #eaf1ff;
    color: #3b7dff;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: #8a93a3;
    padding: 0.25rem 0;
}

.btn-outline-accent {
    color: #3b7dff;
    border-color: #3b7dff;
    background: #eaf1ff;
}

.btn-accent {
    background: #3b7dff;
    border-color: #3b7dff;
    color: #fff;
}

.btn-accent:hover,
.btn-outline-accent:hover {
    color: #fff;
    background: #3b7dff;
}

.side-col .card {
    padding: 0.9rem;
}

.side-col select.form-control,
.side-col .form-control {
    font-size: 0.8rem;
}

/* ---- Multi-select search dropdown (used by components.multi-selector) ---- */
.multi-select-search-wrap {
    position: relative;
}

.multi-select-dropdown {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e9eaee;
    border-radius: 0.5rem;
    box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.1);
    z-index: 200;
    max-height: 220px;
    overflow-y: auto;
}

.multi-select-item {
    padding: 0.55rem 0.85rem;
    font-size: 0.82rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.1s;
}

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

.multi-select-item:hover {
    background: #eaf1ff;
}

.multi-select-item.selected {
    opacity: 0.4;
    pointer-events: none;
}

.multi-select-item .ms-item-label {
    font-weight: 600;
    color: #1f2937;
}

.multi-select-item .ms-item-subtitle {
    font-size: 0.7rem;
    color: #8a93a3;
}

.multi-select-item .check {
    color: #3b7dff;
    font-size: 0.8rem;
}

.multi-select-empty {
    padding: 0.75rem 0.85rem;
    font-size: 0.8rem;
    color: #8a93a3;
}

/* ---- Selected tag chips (used by components.multi-selector) ---- */
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #eaf1ff;
    color: #3b7dff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
    border-radius: 0.35rem;
    animation: chipIn 0.15s ease;
}

.tag-chip .chip-subtitle {
    font-weight: 400;
    opacity: 0.65;
    font-size: 0.68rem;
}

.tag-chip .chip-remove {
    background: none;
    border: none;
    padding: 0;
    color: #9bb8ee;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    margin-left: 0.1rem;
}

.tag-chip .chip-remove:hover {
    color: #e53e3e;
}

.tag-chip.ms-draggable-chip {
    cursor: grab;
    user-select: none;
    transition: opacity 0.15s ease;
}

.tag-chip.ms-draggable-chip:active {
    cursor: grabbing;
}

.tag-chip.is-dragging {
    opacity: 0.4;
    background: #dbeafe !important;
    border: 1px dashed #2563eb !important;
}

.tag-chip .ms-drag-handle {
    cursor: grab;
    font-size: 0.72rem;
    color: #9bb8ee;
    margin-right: 0.25rem;
    pointer-events: none;
}

.tag-chip:hover .ms-drag-handle {
    color: #3b7dff;
}

.tag-chip .ms-chip-label,
.tag-chip .chip-subtitle {
    pointer-events: none;
}

.tag-chip .chip-remove {
    pointer-events: auto;
}

@keyframes chipIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.slug-status {
    font-size: 0.75rem;
    margin-left: 0.5rem;
    white-space: nowrap;
}

.slug-status.loading {
    color: #8a93a3;
}

.slug-status.success {
    color: #1b9e4f;
}

.slug-status.error {
    color: #e53e3e;
}

.wireframe-note {
    font-size: 0.68rem;
    color: #8a93a3;
    text-align: center;
    margin-top: 1rem;
    padding-top: 0.7rem;
    border-top: 1px solid #e9eaee;
}

/* ---- Featured image upload (used by components.featured-image-upload) ---- */
.upload-zone {
    cursor: pointer;
    transition:
        border-color 0.15s,
        background 0.15s;
}

.upload-zone:hover {
    border-color: #3b7dff;
    background: #f7faff;
}

.upload-zone.dragover {
    border-color: #3b7dff;
    background: #eaf1ff;
    color: #3b7dff;
}

.upload-zone .upload-icon {
    font-size: 1.1rem;
    display: block;
    margin-bottom: 0.25rem;
}

.upload-zone .upload-hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.66rem;
    color: #a7afbc;
    line-height: 1.4;
}

.upload-zone input[type="file"] {
    display: none;
}

.upload-error {
    display: none;
    font-size: 0.7rem;
    color: #e53e3e;
    background: #fdeeee;
    border: 1px solid #f6c9c9;
    border-radius: 0.4rem;
    padding: 0.4rem 0.55rem;
    margin-top: 0.5rem;
}

.upload-error.show {
    display: block;
}

.featured-preview {
    display: none;
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #e9eaee;
}

.featured-preview.show {
    display: block;
}

.featured-preview img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: #eef1f5;
}

.featured-preview .fp-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.6rem;
    font-size: 0.7rem;
    color: #8a93a3;
    background: #fff;
}

.featured-preview .fp-meta .fp-name {
    color: #1f2937;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 65%;
}

.featured-preview .fp-actions {
    display: flex;
    gap: 0.6rem;
}

.featured-preview .fp-actions button {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    color: #3b7dff;
}

.featured-preview .fp-actions button.fp-remove {
    color: #e53e3e;
}

/* ---- Featured post toggle ---- */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0 0.15rem;
}

.toggle-row .toggle-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1f2937;
}

.toggle-row .toggle-sub {
    font-size: 0.7rem;
    color: #8a93a3;
    margin-top: 0.1rem;
}

.switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 21px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #d7dbe3;
    border-radius: 999px;
    transition: 0.15s;
}

.switch .slider::before {
    content: "";
    position: absolute;
    height: 15px;
    width: 15px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.15s;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);
}

.switch input:checked+.slider {
    background: #3b7dff;
}

.switch input:checked+.slider::before {
    transform: translateX(17px);
}

/* ---- 75/25 split ---- */
.col-main {
    flex: 0 0 75%;
    max-width: 75%;
}

.col-side {
    flex: 0 0 25%;
    max-width: 25%;
}

@media (max-width: 991px) {

    .col-main,
    .col-side {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---- Scroll to Top Button Centering & Visibility ---- */
.btn.btn-scroll-to-top,
.btn-scroll-to-top {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    padding: 0 !important;
}

.btn.btn-scroll-to-top.fade:not(.show):not(.in),
.btn-scroll-to-top.fade:not(.show):not(.in) {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.btn.btn-scroll-to-top.show,
.btn.btn-scroll-to-top.in,
.btn-scroll-to-top.show,
.btn-scroll-to-top.in {
    display: inline-flex !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.btn.btn-scroll-to-top i,
.btn-scroll-to-top i,
.btn.btn-scroll-to-top svg,
.btn-scroll-to-top svg {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* ============================================================
   KeyPoint Admin Table & 3-Dots Ellipsis Dropdown Styles
   (Matching /account/affiliate modern-datatable specifications)
   ============================================================ */
.kla-admin-page-header {
    margin-bottom: 16px;
}

.kla-admin-page-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.kla-page-subtitle {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 0;
}

.kla-page-subtitle strong {
    color: #0f172a;
    font-weight: 600;
}

.kla-page-subtitle .kla-text-meta {
    color: #64748b;
}

.kla-admin-subnav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.kla-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b !important;
    text-decoration: none !important;
    transition: all 0.15s ease;
    padding: 4px 0;
}

.kla-back-link:hover {
    color: #0f172a !important;
}

.kla-back-link svg {
    transition: transform 0.15s ease;
}

.kla-back-link:hover svg {
    transform: translateX(-3px);
}

/* ---- Reusable Modern Admin Modal Styling ---- */
.kla-admin-modal .modal-content {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.kla-admin-modal .modal-header {
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 18px 20px !important;
}

.kla-admin-modal .modal-title {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 16px !important;
    margin-bottom: 0 !important;
}

.kla-admin-modal .modal-body {
    padding: 20px !important;
}

.kla-admin-modal .modal-form-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.kla-admin-card {
    background: transparent;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
    margin-bottom: 1.5rem;
}

.kla-admin-filter-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0.75rem !important;
}

.kla-admin-filter-card .form-control-sm {
    height: 32px !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
    border-color: #e2e8f0 !important;
}

.kla-admin-filter-card .form-control-sm:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
}

/* ---- Lucide Chevron-Down Custom Select Arrow ---- */
.kla-admin-filter-card select.form-control-sm,
.kla-admin-card-header select.form-control-sm,
select.kla-custom-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 14px 14px !important;
    padding-right: 26px !important;
    cursor: pointer !important;
}

.kla-admin-filter-card select.form-control-sm:focus,
.kla-admin-card-header select.form-control-sm:focus,
select.kla-custom-select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* ---- Modern Unified Search Input Box ---- */
.kla-search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0 10px;
    transition: all 0.15s ease;
}

.kla-search-box:hover {
    border-color: #cbd5e1;
}

.kla-search-box:focus-within {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
}

.kla-search-box .kla-search-icon {
    width: 14px;
    height: 14px;
    color: #94a3b8;
    margin-right: 8px;
    flex-shrink: 0;
    pointer-events: none;
    transition: color 0.15s ease;
}

.kla-search-box:focus-within .kla-search-icon {
    color: #3b82f6;
}

.kla-search-box .kla-search-input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100%;
    height: 100%;
    font-size: 12px !important;
    color: #0f172a;
    padding: 0 !important;
}

.kla-search-box .kla-search-input::placeholder {
    color: #94a3b8;
}

.kla-admin-filter-card .btn-filter-submit {
    height: 32px;
    font-size: 12px;
    font-weight: 600;
    padding: 0 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.kla-admin-filter-card .btn-filter-reset {
    height: 32px;
    width: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #ef4444;
    transition: all 0.15s ease;
}

.kla-admin-filter-card .btn-filter-reset:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* ---- Active Filter Badges / Chips ---- */
.kla-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.kla-active-filter-label {
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
    margin-right: 4px;
}

.kla-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f6ff;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    transition: all 0.15s ease;
}

.kla-filter-badge:hover {
    background: #e0edff;
    border-color: #bfdbfe;
}

.kla-filter-badge .filter-type {
    color: #64748b;
    font-weight: 500;
}

.kla-filter-badge .filter-val {
    font-weight: 600;
    color: #0f172a;
}

.kla-filter-badge .kla-filter-remove,
.kla-filter-badge .btn-remove-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    color: #2563eb;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    transition: color 0.15s ease;
}

.kla-filter-badge .kla-filter-remove:hover,
.kla-filter-badge .btn-remove-filter:hover {
    color: #dc2626;
}

.kla-btn-clear-all {
    font-size: 13px;
    font-weight: 600;
    color: #ef4444;
    text-decoration: none !important;
    margin-left: 6px;
    transition: all 0.15s ease;
}

.kla-btn-clear-all:hover {
    color: #dc2626;
    text-decoration: underline !important;
}

/* ---- Select2 Filter Styling Matching Search Box ---- */
.kla-admin-filter-card .select2-container--default .select2-selection--single {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    height: 32px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
}

.kla-admin-filter-card .select2-container--default .select2-selection--multiple {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    min-height: 32px !important;
    height: auto !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
}

.kla-admin-filter-card .select2-container--default .select2-selection--single:hover,
.kla-admin-filter-card .select2-container--default .select2-selection--multiple:hover {
    border-color: #cbd5e1 !important;
}

.kla-admin-filter-card .select2-container--default.select2-container--open .select2-selection--single,
.kla-admin-filter-card .select2-container--default.select2-container--open .select2-selection--multiple,
.kla-admin-filter-card .select2-container--default.select2-container--focus .select2-selection--single,
.kla-admin-filter-card .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
    outline: none !important;
}

.kla-admin-filter-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 12px !important;
    color: #0f172a !important;
    padding-left: 4px !important;
    padding-right: 20px !important;
    line-height: 30px !important;
}

.kla-admin-filter-card .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    font-size: 12px !important;
    color: #0f172a !important;
    padding-left: 4px !important;
    padding-right: 20px !important;
}

.kla-admin-filter-card .select2-container--default .select2-selection--single .select2-selection__placeholder,
.kla-admin-filter-card .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
    color: #94a3b8 !important;
    font-size: 12px !important;
}

.kla-admin-filter-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px !important;
    right: 6px !important;
}

.kla-admin-filter-card .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1d4ed8 !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 1px 6px !important;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}

/* ---- Section 12 Mandatory Admin Form Control & Input System ---- */
.kla-form-control,
.kla-form-card .form-control {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 9px 14px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    height: 42px !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
}

.kla-form-control:focus,
.kla-form-card .form-control:focus {
    background-color: #ffffff !important;
    border-color: #1f5eff !important;
    box-shadow: 0 0 0 4px rgba(31, 94, 255, 0.15) !important;
    outline: none !important;
}

/* Native Select Custom Chevron for Form Pages */
select.kla-form-control,
select.kla-form-select,
.kla-form-card select.form-control:not([multiple]) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #f8fafc !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235a6072'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px 14px !important;
    padding-right: 36px !important;
    cursor: pointer !important;
}

select.kla-form-control:focus,
select.kla-form-select:focus,
.kla-form-card select.form-control:not([multiple]):focus {
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231f5eff'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
}

textarea.kla-form-control,
.kla-form-card textarea.form-control {
    height: auto !important;
    min-height: 90px !important;
}

/* Select2 Form Field Styling */
.kla-form-card .select2-container--default .select2-selection--single {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 42px !important;
    padding: 6px 14px !important;
    font-size: 13.5px !important;
}

.kla-form-card .select2-container--default .select2-selection--multiple {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    min-height: 42px !important;
    padding: 3px 8px !important;
}

/* ---- Modern SaaS Theme Overrides for CKEditor 4 ---- */
.cke {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
}

.cke:focus-within,
.cke_focus {
    border-color: #1f5eff !important;
    box-shadow: 0 0 0 4px rgba(31, 94, 255, 0.15) !important;
}

.cke_inner {
    background: #ffffff !important;
    border-radius: 8px !important;
}

.cke_top {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    padding: 8px 10px !important;
}

.cke_bottom {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    padding: 6px 12px !important;
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
}

.cke_path_item,
.cke_wordcount {
    color: #64748b !important;
    font-size: 11.5px !important;
}

.cke_toolgroup {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    margin: 2px 4px 2px 0 !important;
    padding: 1px !important;
}

.cke_button {
    border-radius: 4px !important;
    padding: 3px 5px !important;
    transition: background 0.15s ease !important;
}

.cke_button:hover,
.cke_button_on,
.cke_button_off:hover {
    background: #eff6ff !important;
    box-shadow: none !important;
}

.cke_combo_button {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    margin: 2px 4px 2px 0 !important;
}

.cke_combo_text {
    font-size: 12px !important;
    color: #334155 !important;
    font-weight: 500 !important;
}

.cke_contents {
    background: #ffffff !important;
}

/* ---- Fixed Bottom Sticky Action Bar ---- */
.kla-sticky-action-bar {
    position: fixed;
    bottom: 0;
    left: 260px;
    right: 0;
    z-index: 99;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
    padding: 12px 32px;
    transition: left 0.2s ease, padding 0.2s ease;
    will-change: left;
}

/* Tablet (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    #page-container:not(.page-sidebar-minified) .kla-sticky-action-bar {
        left: 220px !important;
    }
}

/* Desktop (1025px and up) */
@media (min-width: 1025px) {
    #page-container:not(.page-sidebar-minified) .kla-sticky-action-bar {
        left: 260px !important;
    }
}

/* Minified Sidebar State (Desktop & Tablet) */
#page-container.page-sidebar-minified .kla-sticky-action-bar {
    left: 60px !important;
}

/* Mobile Screens */
@media (max-width: 767px) {
    .kla-sticky-action-bar,
    #page-container .kla-sticky-action-bar,
    #page-container.page-sidebar-minified .kla-sticky-action-bar {
        left: 0 !important;
        padding: 12px 16px;
    }
}

/* ---- Shift Scroll-to-Top Button Above Sticky Action Bar ---- */
body:has(.kla-sticky-action-bar) .btn-scroll-to-top,
body:has(.kla-sticky-action-bar) .btn.btn-scroll-to-top,
.kla-sticky-action-bar ~ .btn-scroll-to-top,
.kla-sticky-action-bar ~ .btn.btn-scroll-to-top {
    bottom: 76px !important;
}

body:not(:has(.kla-sticky-action-bar)) .btn-scroll-to-top,
body:not(:has(.kla-sticky-action-bar)) .btn.btn-scroll-to-top {
    right: 20px !important;
}

/* ---- Header & Action Outline Buttons ---- */
.btn-header-outline-primary,
.btn-outline-primary {
    color: #1f5eff !important;
    border-color: #1f5eff !important;
    background-color: transparent !important;
    transition: all 0.15s ease-in-out !important;
}

.btn-header-outline-primary:hover,
.btn-header-outline-primary:focus,
.btn-header-outline-primary:active,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #ffffff !important;
    background-color: #1f5eff !important;
    border-color: #1f5eff !important;
}

.btn-header-outline-primary:hover svg,
.btn-header-outline-primary:focus svg,
.btn-outline-primary:hover svg,
.btn-outline-primary:focus svg,
.btn-header-outline-primary:hover i,
.btn-outline-primary:hover i {
    stroke: #ffffff !important;
    color: #ffffff !important;
}

/* ---- Fix Answer Radio & Checkbox Alignment (Top aligned for multi-line support) ---- */
.radio.radio-css,
.checkbox.checkbox-css,
.answer-tick-wrapper.radio-css,
.answer-tick-wrapper.checkbox-css {
    padding-top: 0 !important;
    display: inline-flex !important;
    align-items: flex-start !important;
}

.radio.radio-css label,
.checkbox.checkbox-css label,
.answer-tick-wrapper.radio-css label,
.answer-tick-wrapper.checkbox-css label {
    position: relative !important;
    padding-left: 28px !important;
    margin-bottom: 0 !important;
    line-height: 1.45 !important;
    display: inline-block !important;
    cursor: pointer !important;
    user-select: none !important;
}

.radio.radio-css label.d-none,
.checkbox.checkbox-css label.d-none,
.answer-tick-wrapper label.d-none,
.answer-tick-wrapper .d-none {
    display: none !important;
}

.radio.radio-css label:before,
.checkbox.checkbox-css label:before,
.answer-tick-wrapper.radio-css label:before,
.answer-tick-wrapper.checkbox-css label:before {
    top: 2px !important;
    transform: none !important;
    margin-top: 0 !important;
}

.radio.radio-css input:checked + label:after,
.answer-tick-wrapper.radio-css input:checked + label:after {
    top: 6px !important;
    transform: none !important;
    margin-top: 0 !important;
}

.checkbox.checkbox-css input:checked + label:after,
.answer-tick-wrapper.checkbox-css input:checked + label:after {
    top: 2px !important;
    transform: none !important;
    margin-top: 0 !important;
}

/* ---- Active Correct Choice Card Styling & Border Cleanup ---- */
.kla-choice-card {
    border: 1px solid #cbd5e1 !important;
}

.kla-choice-card .cke {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 0 10px 10px !important;
}

.kla-choice-card .cke_contents {
    min-height: 100px !important;
}

.kla-choice-card .card-body {
    padding: 0 !important;
}

.kla-choice-card.is-correct-choice {
    background: #f0fdf4 !important;
    border-color: #10b981 !important;
}

.kla-choice-card.is-correct-choice .card-header {
    background: #e6f4ea !important;
    border-bottom-color: #bbf7d0 !important;
}

.kla-choice-card.is-correct-choice .option-label-badge {
    background: #10b981 !important;
    color: #ffffff !important;
}

/* ---- Fix Edit Page Answer Choices Vertical Alignment ---- */
.kla-answer-choices-list p,
.kla-answer-choices-list table,
.kla-answer-choices-list ul,
.kla-answer-choices-list ol {
    margin-bottom: 0 !important;
}

.kla-filter-badge:hover {
    border-color: #cbd5e1;
    background: #e2e8f0;
}

.kla-btn-clear-all {
    font-size: 12px;
    font-weight: 600;
    color: #ef4444;
    text-decoration: none;
    margin-left: 4px;
    transition: all 0.15s ease;
}

.kla-btn-clear-all:hover {
    color: #b91c1c;
    text-decoration: underline;
}

.kla-admin-card-header {
    padding: 8px 0 14px 0;
    background: transparent;
    border-bottom: none !important;
}

/* ---- Datatable Grid Matching style.kla.app_profile.css ---- */
.kla-admin-table {
    width: 100% !important;
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: none !important;
}

.kla-admin-table thead {
    background-color: transparent !important;
}

.kla-admin-table thead th {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid #e2e8f0 !important;
    color: #475569 !important;
    /* slate-600 */
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 14px 18px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.kla-admin-table thead th a {
    color: #475569 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.kla-admin-table thead th a:hover {
    color: #0f172a !important;
}

/* DataTables Sorting Icons Vertical Centering */
.kla-admin-table.dataTable thead th.sorting,
.kla-admin-table.dataTable thead th.sorting_asc,
.kla-admin-table.dataTable thead th.sorting_desc,
table.dataTable.kla-admin-table thead th.sorting,
table.dataTable.kla-admin-table thead th.sorting_asc,
table.dataTable.kla-admin-table thead th.sorting_desc,
table.dataTable.kla-admin-table thead>tr>th.sorting,
table.dataTable.kla-admin-table thead>tr>th.sorting_asc,
table.dataTable.kla-admin-table thead>tr>th.sorting_desc {
    padding-right: 30px !important;
    position: relative !important;
}

.kla-admin-table.dataTable thead .sorting:after,
.kla-admin-table.dataTable thead .sorting_asc:after,
.kla-admin-table.dataTable thead .sorting_desc:after,
.kla-admin-table.dataTable thead .sorting_asc_disabled:after,
.kla-admin-table.dataTable thead .sorting_desc_disabled:after,
table.dataTable.kla-admin-table thead .sorting:after,
table.dataTable.kla-admin-table thead .sorting_asc:after,
table.dataTable.kla-admin-table thead .sorting_desc:after,
table.dataTable.kla-admin-table thead .sorting_asc_disabled:after,
table.dataTable.kla-admin-table thead .sorting_desc_disabled:after,
.kla-admin-table.dataTable thead .sorting:before,
.kla-admin-table.dataTable thead .sorting_asc:before,
.kla-admin-table.dataTable thead .sorting_desc:before,
table.dataTable.kla-admin-table thead .sorting:before,
table.dataTable.kla-admin-table thead .sorting_asc:before,
table.dataTable.kla-admin-table thead .sorting_desc:before {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    right: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 11px !important;
    margin-top: 0 !important;
}

.kla-admin-table tbody td {
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 14px 18px !important;
    vertical-align: middle !important;
    font-size: 13.5px !important;
    color: #334155 !important;
}

/* Row Hover State Transition */
.kla-admin-table tbody tr {
    transition: background-color 0.15s ease !important;
}

.kla-admin-table tbody tr:hover td,
.kla-admin-table tbody tr:hover>td,
.kla-admin-table tbody tr:hover {
    background-color: #f8fafc !important;
    /* Soft, delicate modern hover */
}

.kla-admin-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* ---- Title & Subtitle ---- */
.kla-table-title {
    color: #08193d;
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

a.kla-table-title {
    color: #08193d !important;
    display: inline;
}

a.kla-table-title:hover,
a.kla-table-title:focus {
    color: #0072CE !important;
    text-decoration: none !important;
}

.kla-table-title-link {
    color: #08193d !important;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none !important;
    transition: color 0.15s ease, text-decoration 0.15s ease;
}

.kla-table-title-link:hover,
.kla-table-title-link:focus {
    color: #0072CE !important;
    text-decoration: none !important;
}

.kla-table-sub {
    font-size: 12.5px;
    color: #64748b;
    margin-top: 2px;
}

/* ---- Status Badges ---- */
.kla-badge-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1.4;
    white-space: nowrap;
}

.kla-badge-status .status-dot,
.kla-badge-status .kla-status-dot,
.kla-badge-status .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.kla-badge-status.is-published,
.kla-badge-status.is-active,
.kla-badge-status.is-paid,
.kla-badge-status.is-completed {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.kla-badge-status.is-published .status-dot,
.kla-badge-status.is-published .kla-status-dot,
.kla-badge-status.is-published .dot,
.kla-badge-status.is-active .status-dot,
.kla-badge-status.is-active .kla-status-dot,
.kla-badge-status.is-active .dot,
.kla-badge-status.is-paid .status-dot,
.kla-badge-status.is-paid .kla-status-dot,
.kla-badge-status.is-paid .dot,
.kla-badge-status.is-completed .status-dot,
.kla-badge-status.is-completed .kla-status-dot,
.kla-badge-status.is-completed .dot {
    background: #10b981;
}

.kla-badge-status.is-draft,
.kla-badge-status.is-pending,
.kla-badge-status.is-progress,
.kla-badge-status.is-in-progress,
.kla-badge-status.is-medium {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.kla-badge-status.is-draft .status-dot,
.kla-badge-status.is-draft .kla-status-dot,
.kla-badge-status.is-draft .dot,
.kla-badge-status.is-pending .status-dot,
.kla-badge-status.is-pending .kla-status-dot,
.kla-badge-status.is-pending .dot,
.kla-badge-status.is-progress .status-dot,
.kla-badge-status.is-progress .kla-status-dot,
.kla-badge-status.is-progress .dot,
.kla-badge-status.is-in-progress .status-dot,
.kla-badge-status.is-in-progress .kla-status-dot,
.kla-badge-status.is-in-progress .dot,
.kla-badge-status.is-medium .status-dot,
.kla-badge-status.is-medium .kla-status-dot,
.kla-badge-status.is-medium .dot {
    background: #f59e0b;
}

.kla-badge-status.is-new,
.kla-badge-status.is-hard {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.kla-badge-status.is-new .status-dot,
.kla-badge-status.is-new .kla-status-dot,
.kla-badge-status.is-new .dot,
.kla-badge-status.is-hard .status-dot,
.kla-badge-status.is-hard .kla-status-dot,
.kla-badge-status.is-hard .dot {
    background: #3b82f6;
}

.kla-badge-status.is-inactive,
.kla-badge-status.is-disabled,
.kla-badge-status.is-deleted,
.kla-badge-status.is-archived,
.kla-badge-status.is-not-set {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.kla-badge-status.is-inactive .status-dot,
.kla-badge-status.is-inactive .kla-status-dot,
.kla-badge-status.is-inactive .dot,
.kla-badge-status.is-disabled .status-dot,
.kla-badge-status.is-disabled .kla-status-dot,
.kla-badge-status.is-disabled .dot,
.kla-badge-status.is-deleted .status-dot,
.kla-badge-status.is-deleted .kla-status-dot,
.kla-badge-status.is-deleted .dot,
.kla-badge-status.is-archived .status-dot,
.kla-badge-status.is-archived .kla-status-dot,
.kla-badge-status.is-archived .dot,
.kla-badge-status.is-not-set .status-dot,
.kla-badge-status.is-not-set .kla-status-dot,
.kla-badge-status.is-not-set .dot {
    background: #94a3b8;
}

.kla-badge-status.is-danger,
.kla-badge-status.is-rejected,
.kla-badge-status.is-cancelled,
.kla-badge-status.is-unpaid {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.kla-badge-status.is-danger .status-dot,
.kla-badge-status.is-danger .kla-status-dot,
.kla-badge-status.is-danger .dot,
.kla-badge-status.is-rejected .status-dot,
.kla-badge-status.is-rejected .kla-status-dot,
.kla-badge-status.is-rejected .dot,
.kla-badge-status.is-cancelled .status-dot,
.kla-badge-status.is-cancelled .kla-status-dot,
.kla-badge-status.is-cancelled .dot,
.kla-badge-status.is-unpaid .status-dot,
.kla-badge-status.is-unpaid .kla-status-dot,
.kla-badge-status.is-unpaid .dot {
    background: #ef4444;
}

/* ---- Level Badges ---- */
.kla-badge-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.kla-badge-level.level-1,
.kla-badge-level.level-i {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.kla-badge-level.level-2,
.kla-badge-level.level-ii {
    background: #f5f3ff;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}

.kla-badge-level.level-3,
.kla-badge-level.level-iii {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

/* ---- Boolean Badges ---- */
.kla-badge-bool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 600;
}

.kla-badge-bool.is-true {
    background: #e0f2fe;
    color: #0369a1;
}

.kla-badge-bool.is-false {
    background: #f1f5f9;
    color: #94a3b8;
}

.kla-text-bool-false {
    font-size: 12.5px;
    font-weight: 500;
    color: #64748b;
}

/* ---- Date display ---- */
.kla-table-date-main {
    font-weight: 600;
    color: #1e293b;
    font-size: 12.5px;
}

.kla-table-date-sub {
    font-size: 12px;
    color: #94a3b8;
}

/* ---- Author display ---- */
.kla-table-author {
    font-size: 12px;
    font-weight: 500;
    color: #1e293b;
}

/* ---- Table Count Badge ---- */
.kla-table-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
}

/* ---- Table Meta Text (Per page & Pagination info) ---- */
.kla-table-meta-text {
    font-size: 12.5px;
    font-weight: 500;
    color: #64748b;
}

/* ---- 3-Dots Ellipsis Dropdown Action Menu ---- */
.kla-admin-action-dropdown {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.kla-admin-action-trigger {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    vertical-align: middle !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

.kla-admin-action-trigger:hover,
.kla-admin-action-trigger:focus,
.kla-admin-action-dropdown.show .kla-admin-action-trigger {
    background: #f1f5f9 !important;
    border: none !important;
    color: #0f172a !important;
    outline: none !important;
    box-shadow: none !important;
}

.kla-admin-action-trigger svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 0 !important;
    vertical-align: middle !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
}

.kla-admin-card .table-responsive {
    overflow: visible !important;
}

@media (max-width: 991.98px) {
    .kla-admin-card .table-responsive {
        overflow-x: auto !important;
        overflow-y: visible !important;
        min-height: 280px;
    }
}

.kla-admin-action-dropdown .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    transform: none !important;
    will-change: unset !important;
}

/* Dropup placement ONLY when .dropup class is explicitly added on deep rows */
.kla-admin-action-dropdown.dropup .dropdown-menu {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}

/* Ensure top rows and single-row tables NEVER dropup via CSS */
.kla-admin-table tbody tr:first-child .kla-admin-action-dropdown .dropdown-menu,
.kla-admin-table tbody tr:nth-child(2) .kla-admin-action-dropdown .dropdown-menu,
.kla-admin-table tbody tr:only-child .kla-admin-action-dropdown .dropdown-menu {
    top: 100% !important;
    bottom: auto !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

.kla-admin-action-dropdown .dropdown-menu.show {
    animation: klaDropdownFade 0.15s ease-out forwards;
}

@keyframes klaDropdownFade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.kla-admin-action-menu {
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #e2e8f0 !important;
    padding: 5px !important;
    min-width: 130px !important;
    z-index: 1050;
    background: #ffffff !important;
}

.kla-admin-action-menu .dropdown-item {
    font-size: 12px;
    font-weight: 500;
    color: #334155;
    padding: 6px 9px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.12s ease;
}

.kla-admin-action-menu .dropdown-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #64748b;
    transition: color 0.12s ease;
}

.kla-admin-action-menu .dropdown-item:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}

.kla-admin-action-menu .dropdown-item:hover svg {
    color: #0f172a;
}

.kla-admin-action-menu .dropdown-item.action-delete {
    color: #ef4444;
}

.kla-admin-action-menu .dropdown-item.action-delete svg {
    color: #ef4444;
}

.kla-admin-action-menu .dropdown-item.action-delete:hover {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

.kla-admin-action-menu .dropdown-item.action-delete:hover svg {
    color: #dc2626 !important;
}

.kla-admin-action-menu .dropdown-divider {
    margin: 4px 0;
    border-top: 1px solid #f1f5f9;
}

/* ============================================================
   Modern Datatable Pagination (Matching /account/affiliate)
   ============================================================ */
.kla-admin-pagination .pagination,
.kla-admin-card .pagination {
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
    display: flex !important;
    align-items: center !important;
}

.kla-admin-pagination .pagination>li,
.kla-admin-pagination .pagination>.page-item,
.kla-admin-card .pagination>li,
.kla-admin-card .pagination>.page-item {
    display: inline-block !important;
    margin: 0 !important;
}

.kla-admin-pagination .pagination>li>a,
.kla-admin-pagination .pagination>li>span,
.kla-admin-pagination .pagination>.page-item>.page-link,
.kla-admin-pagination .pagination>.page-item>span,
.kla-admin-card .pagination>li>a,
.kla-admin-card .pagination>li>span,
.kla-admin-card .pagination>.page-item>.page-link,
.kla-admin-card .pagination>.page-item>span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    box-shadow: none !important;
    margin-left: 0 !important;
}

.kla-admin-pagination .pagination>li>a:hover,
.kla-admin-pagination .pagination>.page-item>.page-link:hover,
.kla-admin-card .pagination>li>a:hover,
.kla-admin-card .pagination>.page-item>.page-link:hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

.kla-admin-pagination .pagination>li.active>a,
.kla-admin-pagination .pagination>li.active>span,
.kla-admin-pagination .pagination>.page-item.active>.page-link,
.kla-admin-pagination .pagination>.page-item.active>span,
.kla-admin-card .pagination>li.active>a,
.kla-admin-card .pagination>li.active>span,
.kla-admin-card .pagination>.page-item.active>.page-link,
.kla-admin-card .pagination>.page-item.active>span {
    color: #ffffff !important;
    background-color: #1f5eff !important;
    border-color: #1f5eff !important;
    box-shadow: 0 4px 8px rgba(31, 94, 255, 0.15) !important;
    border-radius: 8px !important;
}

.kla-admin-pagination .pagination>li.disabled>a,
.kla-admin-pagination .pagination>li.disabled>span,
.kla-admin-pagination .pagination>.page-item.disabled>.page-link,
.kla-admin-pagination .pagination>.page-item.disabled>span,
.kla-admin-card .pagination>li.disabled>a,
.kla-admin-card .pagination>li.disabled>span,
.kla-admin-card .pagination>.page-item.disabled>.page-link,
.kla-admin-card .pagination>.page-item.disabled>span {
    color: #94a3b8 !important;
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* ============================================================
   Modern Admin Empty State
   ============================================================ */
.kla-admin-table tbody td.kla-empty-state-cell,
table.kla-admin-table tbody td.kla-empty-state-cell,
.kla-empty-state-cell {
    padding: 90px 20px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border-bottom: none !important;
}

.kla-admin-table tbody tr:hover td.kla-empty-state-cell {
    background-color: transparent !important;
}

.kla-empty-state-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #f1f5f9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.kla-empty-state-icon-wrap svg {
    width: 22px;
    height: 22px;
    color: #64748b;
    stroke: #64748b;
}

.kla-empty-state-title {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 6px;
}

.kla-empty-state-desc {
    font-size: 13.5px;
    color: #64748b;
    margin-bottom: 0;
}

/* ============================================================
   Modern DataTables Overrides for .kla-admin-table
   ============================================================ */
.dataTables_wrapper {
    width: 100%;
}

.dataTables_wrapper .dataTables_length {
    margin-bottom: 1rem;
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.dataTables_wrapper .dataTables_length select {
    display: inline-block;
    width: auto;
    height: 32px;
    padding: 2px 24px 2px 8px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin: 0 4px;
    outline: none;
}

.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem;
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.dataTables_wrapper .dataTables_filter input {
    height: 34px;
    padding: 6px 12px;
    font-size: 13px;
    color: #0f172a;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-left: 8px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dataTables_wrapper .dataTables_info {
    padding-top: 1rem !important;
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 4px !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination>li,
.dataTables_wrapper .dataTables_paginate ul.pagination>li.paginate_button,
.dataTables_wrapper .dataTables_paginate ul.pagination>li.page-item,
.kla-admin-pagination .pagination>li,
.kla-admin-card .pagination>li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    min-width: 0 !important;
    height: auto !important;
}

div.dataTables_paginate>a.paginate_button,
div.dataTables_paginate>span>a.paginate_button,
.dataTables_wrapper .dataTables_paginate .pagination>li>a,
.dataTables_wrapper .dataTables_paginate .pagination>li>span,
.dataTables_wrapper .dataTables_paginate .pagination>.page-item>.page-link,
.kla-admin-pagination .pagination>li>a,
.kla-admin-pagination .pagination>li>span,
.kla-admin-pagination .pagination>.page-item>.page-link,
.kla-admin-card .pagination>li>a,
.kla-admin-card .pagination>li>span,
.kla-admin-card .pagination>.page-item>.page-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    cursor: pointer !important;
}

div.dataTables_paginate>a.paginate_button:hover,
div.dataTables_paginate>span>a.paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .pagination>li>a:hover,
.dataTables_wrapper .dataTables_paginate .pagination>.page-item>.page-link:hover,
.kla-admin-pagination .pagination>li>a:hover,
.kla-admin-pagination .pagination>.page-item>.page-link:hover,
.kla-admin-card .pagination>li>a:hover,
.kla-admin-card .pagination>.page-item>.page-link:hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

div.dataTables_paginate>a.paginate_button.current,
div.dataTables_paginate>span>a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate .pagination>li.active>a,
.dataTables_wrapper .dataTables_paginate .pagination>li.active>span,
.dataTables_wrapper .dataTables_paginate .pagination>.page-item.active>.page-link,
.kla-admin-pagination .pagination>li.active>a,
.kla-admin-pagination .pagination>li.active>span,
.kla-admin-pagination .pagination>.page-item.active>.page-link,
.kla-admin-card .pagination>li.active>a,
.kla-admin-card .pagination>li.active>span,
.kla-admin-card .pagination>.page-item.active>.page-link {
    color: #ffffff !important;
    background-color: #1f5eff !important;
    border-color: #1f5eff !important;
    box-shadow: 0 4px 8px rgba(31, 94, 255, 0.15) !important;
    border-radius: 8px !important;
}

div.dataTables_paginate>a.paginate_button.disabled,
div.dataTables_paginate>span>a.paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .pagination>li.disabled>a,
.dataTables_wrapper .dataTables_paginate .pagination>li.disabled>span,
.dataTables_wrapper .dataTables_paginate .pagination>.page-item.disabled>.page-link,
.kla-admin-pagination .pagination>li.disabled>a,
.kla-admin-pagination .pagination>li.disabled>span,
.kla-admin-pagination .pagination>.page-item.disabled>.page-link,
.kla-admin-card .pagination>li.disabled>a,
.kla-admin-card .pagination>li.disabled>span,
.kla-admin-card .pagination>.page-item.disabled>.page-link {
    color: #94a3b8 !important;
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* ============================================================
   User Table Specific Styles
   ============================================================ */
.kla-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #e2e8f0;
    flex-shrink: 0;
}

.kla-user-avatar-placeholder {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #e2e8f0;
    flex-shrink: 0;
    line-height: 0;
}

.kla-user-avatar-placeholder svg {
    width: 20px;
    height: 20px;
    color: #64748b;
    stroke-width: 1.8;
}

.kla-user-meta {
    display: flex;
    flex-direction: column;
}

.kla-user-name {
    font-size: 14px;
    font-weight: 600;
    color: #08193d;
    line-height: 1.35;
}

.kla-user-email {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.35;
}

.kla-user-badges-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.kla-user-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 1.5px 7px;
    border-radius: 6px;
    line-height: 1.3;
    width: fit-content;
}

.kla-user-badge.badge-id {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.kla-user-badge.badge-role {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.kla-user-badge.badge-role-admin {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.kla-user-badge.badge-role-affiliate {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.kla-user-badge.badge-role-user {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.kla-user-badge.badge-role-trial {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.kla-badge-package {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 16px;
    line-height: 1.3;
}

.kla-badge-package.package-premium {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.kla-badge-package.package-deluxe {
    background: #faf5ff;
    color: #7e22ce;
    border: 1px solid #e9d5ff;
}

.kla-badge-package.package-none {
    color: #94a3b8;
    font-weight: 500;
}

.kla-status-tabs {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    gap: 4px;
}

.kla-status-tab-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    border-radius: 7px;
    text-decoration: none !important;
    transition: all 0.15s ease;
    border: none !important;
    background: transparent;
    outline: none !important;
    cursor: pointer;
}

.kla-status-tab-item:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.6);
}

.kla-status-tab-item.is-active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.kla-status-tab-item .tab-count {
    font-size: 11.5px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    background: #e2e8f0;
    color: #475569;
}

.kla-status-tab-item.is-active .tab-count {
    background: #eff6ff;
    color: #1d4ed8;
}

/* ============================================================
   Modern Progress & Score Badges
   ============================================================ */
.kla-badge-progress {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 3px 10px;
    min-width: 78px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #0369a1;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
}

.kla-badge-progress.is-zero {
    color: #64748b;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.kla-badge-progress .progress-mini-bar {
    width: 36px;
    height: 5.5px;
    border-radius: 10px;
    background: #cbd5e1;
    overflow: hidden;
    display: inline-block;
}

.kla-badge-progress .progress-mini-fill {
    height: 100%;
    background: #0284c7;
    border-radius: 10px;
}

.kla-badge-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 2.5px 9px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.kla-badge-score.is-scored {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

/* ============================================================
   User Overview Modal Styles
   ============================================================ */
.kla-user-overview-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.kla-user-overview-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.kla-user-overview-avatar-placeholder {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    line-height: 0;
}

.kla-user-overview-avatar-placeholder svg {
    width: 34px;
    height: 34px;
    color: #64748b;
    stroke-width: 1.8;
}

.kla-user-stat-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
}

.kla-user-stat-label {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 4px;
}

.kla-user-stat-value {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.kla-info-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}

.kla-info-row:last-child {
    border-bottom: none;
}

.kla-info-label {
    color: #64748b;
    font-weight: 500;
}

.kla-info-val {
    color: #0f172a;
    font-weight: 600;
    text-align: right;
}

/* ============================================================
   Modern Admin Calendar & Study Plans System
   ============================================================ */
.kla-calendar-container {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: 2.5rem;
}

/* 1-Row SaaS Toolbar */
.kla-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 16px 0;
    background: transparent;
    border: none;
    gap: 16px;
    flex-wrap: wrap;
}

.kla-cal-nav-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.kla-cal-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.kla-cal-nav-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}

.kla-cal-nav-btn:active {
    background: #e2e8f0;
}

.kla-cal-nav-btn.btn-icon {
    width: 32px;
    padding: 0;
}

.kla-cal-nav-btn.btn-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
}

.kla-cal-period-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1;
    min-width: 150px;
    text-align: center;
}

/* View Switcher Pills */
.kla-cal-view-pills {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 9px;
    gap: 2px;
}

.kla-cal-view-pill {
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    line-height: 1.2;
}

.kla-cal-view-pill:hover {
    color: #0f172a;
}

.kla-cal-view-pill.is-active {
    background: #ffffff;
    color: #1f5eff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Calendar Body with Single Outer Frame, Crisp Inner Grid Lines & Boxy Cells */
.kla-calendar-body {
    padding: 0;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    position: relative !important;
    min-height: 250px;
}

/* Loading Overlay & Spinner Animation */
.kla-calendar-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.kla-calendar-loading-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.kla-spinner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.kla-loading-text {
    font-size: 13px;
    font-weight: 600;
    color: #1f5eff;
    letter-spacing: 0.01em;
}

/* Override FullCalendar default header since we use custom toolbar */
.kla-calendar-body .fc-toolbar {
    display: none !important;
}

.kla-calendar-body .fc {
    font-family: inherit;
}

.kla-calendar-body .fc-view-container {
    background: #ffffff;
}

.kla-calendar-body .fc-view,
.kla-calendar-body .fc-view>table,
.kla-calendar-body .fc-head-container,
.kla-calendar-body .fc-body,
.kla-calendar-body .fc-day-grid {
    border: none !important;
    border-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.kla-calendar-body .fc td,
.kla-calendar-body .fc th {
    border-width: 0 !important;
}

.kla-calendar-body .fc table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border: none !important;
    border-width: 0 !important;
    margin: 0 !important;
}

/* Header Row (Sun - Sat) */
.kla-calendar-body .fc-head th {
    background: #f8fafc !important;
    border: none !important;
    border-right: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-width: 0 1px 1px 0 !important;
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 4px !important;
    vertical-align: middle !important;
    width: 14.2857% !important;
    box-sizing: border-box !important;
}

.kla-calendar-body .fc-head th:last-child {
    border-right: none !important;
    border-width: 0 0 1px 0 !important;
}

/* Equal Square Boxy Rows */
.kla-calendar-body .fc-basic-view .fc-body .fc-row {
    min-height: 110px !important;
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-width: 0 0 1px 0 !important;
}

.kla-calendar-body .fc-basic-view .fc-body .fc-row:last-child {
    border-bottom: none !important;
    border-width: 0 !important;
}

/* Background Grid Table with Visible Vertical Lines */
.kla-calendar-body .fc-row .fc-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.kla-calendar-body .fc-row .fc-bg table {
    height: 100% !important;
    border: none !important;
    border-width: 0 !important;
}

.kla-calendar-body .fc-bg td,
.kla-calendar-body .fc-day.fc-widget-content {
    border: none !important;
    border-right: 1px solid #e2e8f0 !important;
    border-width: 0 1px 0 0 !important;
    width: 14.2857% !important;
    background: #ffffff;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease;
}

.kla-calendar-body .fc-bg td:last-child,
.kla-calendar-body .fc-bg tr>td:last-child {
    border-right: none !important;
    border-width: 0 !important;
}

.kla-calendar-body .fc-bg td:hover {
    background-color: #fafbfc !important;
}

.kla-calendar-body .fc-bg td.fc-today,
.kla-calendar-body td.fc-today {
    background: #f0f7ff !important;
    border-style: none !important;
    border-width: 0 !important;
}

.kla-calendar-body .fc-bg td.fc-other-month {
    background-color: #fcfdfe !important;
}

/* Content Skeleton Overlay with Visible Vertical Column Lines */
.kla-calendar-body .fc-content-skeleton {
    position: relative;
    z-index: 4;
    min-height: 110px !important;
    border: none !important;
    border-width: 0 !important;
    background: transparent !important;
}

.kla-calendar-body .fc-content-skeleton table {
    background: transparent !important;
    border: none !important;
    border-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 110px !important;
    table-layout: fixed !important;
}

.kla-calendar-body .fc-content-skeleton thead tr,
.kla-calendar-body .fc-content-skeleton tbody tr {
    display: table-row !important;
    border: none !important;
    border-width: 0 !important;
}

.kla-calendar-body .fc-content-skeleton td {
    border: none !important;
    border-right: 1px solid #e2e8f0 !important;
    border-width: 0 1px 0 0 !important;
    background: transparent !important;
    width: 14.2857% !important;
    display: table-cell !important;
    float: none !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
}

.kla-calendar-body .fc-content-skeleton tr>td:last-child {
    border-right: none !important;
    border-width: 0 !important;
}

.kla-calendar-body td.fc-day-number {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    padding: 8px 10px 4px !important;
    text-align: right !important;
    border: none !important;
    border-right: 1px solid #e2e8f0 !important;
    border-width: 0 1px 0 0 !important;
    background: transparent !important;
    width: 14.2857% !important;
    display: table-cell !important;
    float: none !important;
    box-sizing: border-box !important;
}

.kla-calendar-body thead tr>td.fc-day-number:last-child {
    border-right: none !important;
    border-width: 0 !important;
}

.kla-calendar-body td.fc-other-month.fc-day-number,
.kla-calendar-body .fc-other-month td.fc-day-number {
    color: #94a3b8 !important;
    opacity: 0.45 !important;
}

.kla-calendar-body td.fc-today.fc-day-number {
    color: #1f5eff !important;
    font-weight: 700 !important;
}

/* Event Pills inside Calendar Cells */
.kla-calendar-body .fc-event {
    border-radius: 6px !important;
    padding: 3px 7px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
    margin: 2px 4px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    line-height: 1.35 !important;
    display: block !important;
}

.kla-calendar-body .fc-event:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.1) !important;
    opacity: 0.92;
}

/* Event Types Color Palette */
.kla-calendar-body .fc-event.event-type-curriculum {
    background: #eef2ff !important;
    color: #4338ca !important;
    border-color: #c7d2fe !important;
}

.kla-calendar-body .fc-event.event-type-exam {
    background: #fff1f2 !important;
    color: #be123c !important;
    border-color: #fecdd3 !important;
}

.kla-calendar-body .fc-event.event-type-user {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border-color: #a7f3d0 !important;
}

.kla-calendar-body .fc-event.event-type-others {
    background: #fffbeb !important;
    color: #b45309 !important;
    border-color: #fde68a !important;
}

.kla-calendar-body .fc-more {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #1f5eff !important;
    padding: 1px 4px !important;
    margin: 2px 4px !important;
    display: inline-block !important;
}

/* Agenda / Time Grid overrides */
.kla-calendar-body .fc-time-grid-event {
    padding: 3px 5px !important;
}

.kla-calendar-body .fc-time-grid-event .fc-time {
    font-size: 11px !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
}

.kla-calendar-body .fc-time-grid-event .fc-title {
    font-size: 11.5px !important;
    font-weight: 600 !important;
}

.kla-calendar-body .fc-axis {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Clean Minimal Legend Bar */
.kla-calendar-legend-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 16px 2px 0 2px;
    background: transparent;
    border: none;
    gap: 12px;
}

.kla-calendar-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.kla-legend-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.kla-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: #334155;
}

.kla-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.kla-legend-dot.is-curriculum {
    background: #6366f1;
}

.kla-legend-dot.is-exam {
    background: #f43f5e;
}

.kla-legend-dot.is-user {
    background: #10b981;
}

.kla-legend-dot.is-others {
    background: #f59e0b;
}

/* Event Detail Inspector Modal */
.kla-event-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.kla-event-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #eff6ff;
    color: #1f5eff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kla-event-icon-box svg {
    width: 22px;
    height: 22px;
}

.kla-event-title-main {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.kla-event-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.kla-event-prop-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
}

.kla-event-prop-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 3px;
}

.kla-event-prop-val {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
}

.kla-event-notes-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    color: #334155;
    line-height: 1.6;
    max-height: 160px;
    overflow-y: auto;
}

/* User Activity Table Enhancements */
.kla-ip-badge {
    background: #f1f5f9;
    color: #334155;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    padding: 3px 7px;
    border-radius: 5px;
    border: 1px solid #e2e8f0;
}

.kla-location-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 2px 8px;
    border-radius: 6px;
}

.kla-user-agent-text {
    font-size: 12px;
    color: #64748b;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Single Row Action Pill Button */
.kla-btn-action-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1f5eff !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.kla-btn-action-primary:hover,
.kla-btn-action-primary:focus {
    color: #ffffff !important;
    background: #1f5eff !important;
    border-color: #1f5eff !important;
    box-shadow: 0 4px 10px rgba(31, 94, 255, 0.25) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

/* Metric Stats Card */
.kla-stat-card {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    margin-bottom: 1.25rem;
}

.kla-stat-card .stat-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kla-stat-card .stat-icon-wrap.bg-emerald-light {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.kla-stat-card .stat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 2px;
}

.kla-stat-card .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.kla-stat-card .stat-currency {
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    margin-left: 2px;
}

/* Responsive Overrides */
@media (max-width: 991px) {
    .kla-calendar-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .kla-cal-nav-group {
        justify-content: space-between;
        width: 100%;
    }

    .kla-cal-period-title {
        order: 2;
        margin: 0 auto;
    }

    .kla-cal-view-pills {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .kla-calendar-body {
        padding: 8px;
    }

    .kla-calendar-body .fc th {
        font-size: 10.5px !important;
        padding: 6px 2px !important;
        width: 14.2857% !important;
    }

    .kla-calendar-body td.fc-day-number {
        font-size: 11.5px !important;
        padding: 3px 4px !important;
        width: 14.2857% !important;
        display: table-cell !important;
        float: none !important;
    }

    .kla-calendar-body .fc-event {
        font-size: 10px !important;
        padding: 2px 4px !important;
    }

    .kla-event-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ADMIN & MODAL INPUT FIELDS (Matching /account/profile Input Styling)
   ========================================================================== */
.kla-admin-card .form-control,
.modal-body .form-control,
.kla-modal-input,
.kla-form-control {
    height: auto !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: none !important;
}

.kla-admin-card .form-control::placeholder,
.modal-body .form-control::placeholder,
.kla-modal-input::placeholder,
.kla-form-control::placeholder {
    color: #94a3b8 !important;
}

.kla-admin-card .form-control:focus,
.modal-body .form-control:focus,
.kla-modal-input:focus,
.kla-form-control:focus {
    background-color: #ffffff !important;
    border-color: #1f5eff !important;
    box-shadow: 0 0 0 4px rgba(31, 94, 255, 0.15) !important;
    outline: none !important;
}

.kla-admin-card .form-control[readonly],
.kla-admin-card .form-control:disabled,
.modal-body .form-control[readonly],
.modal-body .form-control:disabled,
.kla-modal-input[readonly],
.kla-modal-input:disabled {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
    cursor: not-allowed !important;
}

.kla-admin-card label,
.kla-admin-card .form-label,
.modal-body label,
.modal-body .form-label {
    display: block;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 6px !important;
}

select.form-control:not([multiple]),
.kla-admin-card select.form-control:not([multiple]),
.modal-body select.form-control:not([multiple]),
.kla-admin-filter-card select.form-control:not([multiple]) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235a6072'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px 14px !important;
    padding-right: 36px !important;
}

/* Merged password fields styling (only round outer corners) */
.password-show-hide .input-group {
    display: flex !important;
    align-items: stretch !important;
}

.password-show-hide .input-group .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}

.password-show-hide .input-group .form-control:focus {
    border-right: 1px solid #1f5eff !important;
    z-index: 3 !important;
}

.password-show-hide .input-group-append .btn,
.password-show-hide .input-group-append .input-group-text,
.password-show-hide .input-group-btn .btn,
.password-show-hide .input-group-addon {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #f8fafc !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 14px !important;
    margin-left: -1px !important;
    transition: all 0.2s ease-in-out !important;
}

.password-show-hide .input-group-append .btn:hover,
.password-show-hide .input-group-btn .btn:hover {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
}

/* Fix Parsley validation error placement inside flex input groups */
.input-group ul.parsley-errors-list,
.password-show-hide ul.parsley-errors-list {
    width: 100% !important;
    flex-basis: 100% !important;
    order: 99 !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    list-style-type: none !important;
    padding-left: 0 !important;
}

/* ==========================================================================
   SELECT2 MULTI-SELECT & SINGLE-SELECT DROPDOWN REDESIGN
   ========================================================================== */
.modal-body .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 42px !important;
    padding: 6px 14px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: none !important;
}

.modal-body .select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    background-color: #ffffff !important;
    border-color: #1f5eff !important;
    box-shadow: 0 0 0 4px rgba(31, 94, 255, 0.15) !important;
    outline: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    padding-left: 0 !important;
    padding-right: 20px !important;
    line-height: normal !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    right: 10px !important;
    top: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235a6072'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: -7px !important;
    margin-top: -7px !important;
}

.modal-body .select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    min-height: 42px !important;
    padding: 2px 8px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: none !important;
}

.modal-body .select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    background-color: #ffffff !important;
    border-color: #1f5eff !important;
    box-shadow: 0 0 0 4px rgba(31, 94, 255, 0.15) !important;
    outline: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Selected Chips / Choice Badges inside Select2 */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1d4ed8 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 3px 10px 3px 8px !important;
    margin: 2px 4px 2px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.4 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #3b82f6 !important;
    margin-right: 6px !important;
    font-weight: 700 !important;
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #1d4ed8 !important;
}

/* Placeholder & Inline Search Field */
.select2-container--default .select2-search--inline {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 26px !important;
    font-family: inherit !important;
}

.select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: #94a3b8 !important;
}

/* Redesigned Select2 Dropdown Popup */
.select2-dropdown {
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    padding: 6px !important;
    background: #ffffff !important;
    z-index: 99999 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    background-color: #f8fafc !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #1f5eff !important;
    box-shadow: 0 0 0 3px rgba(31, 94, 255, 0.15) !important;
    background-color: #ffffff !important;
}

/* Results Options List */
.select2-container--default .select2-results__option {
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    border-radius: 6px !important;
    margin-bottom: 2px !important;
    transition: all 0.12s ease !important;
}

/* Highlighted / Hover State */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #eff6ff !important;
    color: #1f5eff !important;
    font-weight: 600 !important;
}

/* Selected State */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}

/* Modal Static Zoom & Translate Prevention */
.modal.modal-static .modal-dialog,
.kla-admin-modal.modal-static .modal-dialog,
.kla-admin-modal .modal-dialog {
    transform: none !important;
    transition: none !important;
}

/* ==========================================================================
   MODULE BUILDER WORKSPACE STYLES
   ========================================================================== */
.kla-builder-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    background: #ffffff;
    margin-bottom: 20px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kla-builder-card.is-highlighted {
    border-color: #1f5eff;
    box-shadow: 0 0 0 2.5px rgba(31, 94, 255, 0.2);
}
.kla-builder-card-header {
    padding: 12px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    border-top-left-radius: 11px !important;
    border-top-right-radius: 11px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.kla-sortable-row {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
    transition: all 0.15s ease;
}
.kla-sortable-row:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}
.kla-sortable-row.is-highlighted {
    border-color: #1f5eff;
    background: #eff6ff;
}
.kla-drag-handle {
    cursor: grab;
    color: #94a3b8;
    padding: 2px 4px;
    border-radius: 4px;
    user-select: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.15s ease;
}
.kla-drag-handle:hover {
    color: #0f172a;
    background: #e2e8f0;
}
.kla-drag-handle:active {
    cursor: grabbing;
}
.kla-los-letter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 5px;
    border-radius: 6px;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.kla-content-badge-lesson,
.kla-content-badge-qbank {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2.5px 8px;
    border-radius: 6px;
}
.kla-content-badge-lesson svg,
.kla-content-badge-qbank svg {
    color: #64748b;
    stroke: #64748b;
}
.kla-inspector-card {
    position: sticky;
    top: 85px;
    border: 1px solid #e2e8f0;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    background: #ffffff;
}
.kla-inspector-header {
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
    border-top-left-radius: 11px !important;
    border-top-right-radius: 11px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.kla-inspector-body {
    padding: 20px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}
.kla-inspector-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    padding: 40px 24px;
    text-align: center;
}
.kla-inspector-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1f5eff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

/* Section 12 Form Controls Standard for Modals & Inspector */
.kla-inspector-card label,
.kla-admin-modal label {
    display: block;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 6px !important;
}

.kla-inspector-card .form-control:not(textarea):not(select),
.kla-admin-modal .form-control:not(textarea):not(select),
.kla-inspector-card input[type="text"].form-control,
.kla-admin-modal input[type="text"].form-control,
.kla-inspector-card input[type="number"].form-control,
.kla-admin-modal input[type="number"].form-control,
.kla-inspector-card input[type="email"].form-control,
.kla-admin-modal input[type="email"].form-control,
.kla-inspector-card input[type="password"].form-control,
.kla-admin-modal input[type="password"].form-control,
.kla-inspector-card input[type="search"].form-control,
.kla-admin-modal input[type="search"].form-control {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 9px 13px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    height: 40px !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
}

.kla-inspector-card textarea.form-control,
.kla-admin-modal textarea.form-control {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 13px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    min-height: 80px !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
}

.kla-inspector-card select.form-control:not([multiple]),
.kla-admin-modal select.form-control:not([multiple]) {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 8px 36px 8px 13px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    height: 40px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235a6072'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px 14px !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
}

.kla-inspector-card select.form-control:not([multiple]):disabled,
.kla-admin-modal select.form-control:not([multiple]):disabled {
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

.kla-inspector-card .form-control:disabled,
.kla-inspector-card .form-control[disabled],
.kla-admin-modal .form-control:disabled,
.kla-admin-modal .form-control[disabled] {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    opacity: 0.85 !important;
}

.kla-inspector-card .form-control:focus,
.kla-admin-modal .form-control:focus {
    background-color: #ffffff !important;
    border-color: #1f5eff !important;
    box-shadow: 0 0 0 4px rgba(31, 94, 255, 0.15) !important;
    outline: none !important;
}

/* Select2 Multi-Select Widgets */
.kla-inspector-card .select2-container,
.kla-admin-modal .select2-container {
    width: 100% !important;
}

.kla-inspector-card .select2-container--default .select2-selection--multiple,
.kla-admin-modal .select2-container--default .select2-selection--multiple {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    min-height: 40px !important;
    padding: 3px 6px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
}

.kla-inspector-card .select2-container--default.select2-container--focus .select2-selection--multiple,
.kla-admin-modal .select2-container--default.select2-container--focus .select2-selection--multiple {
    background-color: #ffffff !important;
    border-color: #1f5eff !important;
    box-shadow: 0 0 0 4px rgba(31, 94, 255, 0.15) !important;
    outline: none !important;
}

.kla-inspector-card .select2-container--default .select2-selection--multiple .select2-selection__choice,
.kla-admin-modal .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1d4ed8 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    margin: 2px 4px 2px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.kla-inspector-card .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.kla-admin-modal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #1d4ed8 !important;
    margin-right: 5px !important;
    font-weight: 700 !important;
}

.kla-inspector-card .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.kla-admin-modal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #b91c1c !important;
}

.kla-admin-modal .cke_chrome {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.kla-admin-modal .cke_top {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 6px 8px !important;
}

.kla-admin-modal .cke_bottom {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* ==========================================================================
   Multi-Select Listing Filter Standards (Book Library Pattern)
   ========================================================================== */
.kla-checkbox-dropdown {
    min-width: 210px;
    max-height: 270px;
    overflow-y: auto;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px !important;
    background: #ffffff !important;
}

.kla-dropdown-checkbox-item {
    cursor: pointer;
    border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
    user-select: none;
    transition: background-color 0.15s ease;
}

.kla-dropdown-checkbox-item:hover {
    background-color: #f1f5f9;
}

.kla-dropdown-checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: #2563eb;
    flex-shrink: 0;
}

.kla-dropdown-checkbox-item span {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    line-height: 1;
}

/* ==========================================================================
   Modern 2-Column Lesson Editor & 16:9 Thumbnail Dropzone
   ========================================================================== */
.kla-editor-layout {
    margin-bottom: 24px;
}

.kla-form-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    margin-bottom: 20px;
    overflow: hidden;
}

.kla-form-section-heading {
    padding: 12px 18px;
    margin: 0;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kla-form-section-heading svg,
.kla-form-section-heading i {
    color: #1f5eff;
}

.kla-form-section-body {
    padding: 18px 20px;
}

.kla-field-group {
    margin-bottom: 16px;
}

.kla-field-group:last-child {
    margin-bottom: 0;
}

.kla-field-label {
    display: block;
    margin-bottom: 6px;
    color: #334155;
    font-size: 12.5px;
    font-weight: 600;
}

.kla-field-label .required-star {
    color: #ef4444;
    margin-left: 2px;
}

.kla-form-control {
    width: 100%;
    min-height: 42px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #1e293b;
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 12px;
    transition: all 0.15s ease;
}

.kla-form-control:focus {
    background: #ffffff;
    border-color: #1f5eff;
    box-shadow: 0 0 0 4px rgba(31, 94, 255, 0.15);
    outline: none;
}

/* Seamless Input Groups for Form Controls */
.input-group > .kla-form-control:not(:last-child),
.input-group > .form-control.kla-form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
}

.input-group > .input-group-append {
    margin-left: 0 !important;
}

.input-group > .input-group-append > .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

.input-group > .input-group-append > .btn:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Unified Single Datepicker Input with Embedded Calendar Icon */
.kla-date-input-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.kla-date-input-wrap .kla-date-input {
    width: 100%;
    padding-right: 38px;
    cursor: pointer;
}

.kla-date-input-wrap .kla-date-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    pointer-events: none;
    font-size: 14px;
    transition: color 0.15s ease;
}

.kla-date-input-wrap .kla-date-input:focus ~ .kla-date-icon {
    color: #1f5eff;
}

/* 16:9 Interactive Video Thumbnail Dropzone */
.kla-thumbnail-dropzone {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.kla-thumbnail-dropzone:hover {
    border-color: #1f5eff;
    background: #eff6ff;
}

.kla-thumbnail-dropzone.is-dragover {
    border-color: #1f5eff;
    background: #dbeafe;
    transform: scale(1.01);
}

.kla-thumbnail-dropzone.has-image {
    border: 1px solid #cbd5e1;
    background: #0f172a;
}

.kla-thumbnail-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    gap: 8px;
    pointer-events: none;
}

.kla-thumbnail-empty-state .dropzone-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eff6ff;
    color: #1f5eff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.kla-thumbnail-empty-state .dropzone-primary-text {
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.kla-thumbnail-empty-state .dropzone-helper-text {
    font-size: 11.5px;
    color: #64748b;
    margin: 0;
}

.kla-thumbnail-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kla-thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.kla-thumbnail-dropzone:hover .kla-thumbnail-overlay {
    opacity: 1;
}

.kla-thumbnail-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(15, 23, 42, 0.75);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    z-index: 1;
    backdrop-filter: blur(4px);
    letter-spacing: 0.3px;
}

/* Sticky Sidebar */
@media (min-width: 992px) {
    .kla-sticky-sidebar {
        position: sticky;
        top: 80px;
        z-index: 5;
    }
}

/* ==========================================================================
   Details View Property Rows & Video Layout
   ========================================================================== */
.kla-details-prop-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.kla-details-prop-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.kla-details-prop-label {
    color: #64748b;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.kla-details-prop-value {
    color: #0f172a;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
}

.kla-video-player-frame {
    background: #0f172a;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #1e293b;
}

.kla-duration-warning {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
}

/* TipTap Task List (Checkbox List) Styles */
ul[data-type="taskList"],
.taskList {
    list-style: none !important;
    padding-left: 0 !important;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}

ul[data-type="taskList"] li[data-type="taskItem"],
li[data-type="taskItem"],
.taskItem {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
    list-style: none !important;
}

ul[data-type="taskList"] li[data-type="taskItem"]>label,
li[data-type="taskItem"]>label,
.taskItem>label {
    display: inline-flex !important;
    align-self: flex-start !important;
    flex-shrink: 0 !important;
    user-select: none !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

ul[data-type="taskList"] li[data-type="taskItem"]>label input[type="checkbox"],
li[data-type="taskItem"]>label input[type="checkbox"],
.taskItem>label input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    border-radius: 4px !important;
    border: 1.5px solid #cbd5e1 !important;
    cursor: pointer !important;
    accent-color: #22a3e1 !important;
    margin: 0 !important;
    vertical-align: top !important;
    align-self: flex-start !important;
}

ul[data-type="taskList"] li[data-type="taskItem"]>div,
li[data-type="taskItem"]>div,
.taskItem>div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

ul[data-type="taskList"] li[data-type="taskItem"]>div>p,
li[data-type="taskItem"]>div>p,
.taskItem>div>p {
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
}

ul[data-type="taskList"] li[data-type="taskItem"][data-checked="true"]>div,
li[data-type="taskItem"][data-checked="true"]>div,
.taskItem[data-checked="true"]>div {
    text-decoration: line-through;
    opacity: 0.75;
}