/**
 * מסך ניהול שאלות ותשובות (page-faq-manage.php).
 *
 * הפריסה נבנית ב-Flexbox ולא ברשת של Bootstrap: תבנית tiktak טוענת את
 * bootstrap.css בגרסת LTR בלבד (ה-RTL מסומן כהערה ב-lib/enqueue.php), ולכן
 * .col-md-* היו צפים לצד הלא נכון תחת dir="rtl".
 *
 * צבעים לפי טוקני המערכת: כחול #0099cc, כחול כהה #086c87, רקע תכלת #ecf9fe,
 * ירוק #329946, אדום #d9534f, טקסט אפור #4d4d4d.
 */

.tkfaq {
    direction: rtl;
    text-align: right;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 15px 60px;
    color: #4d4d4d;
    font-size: 15px;
}

.tkfaq.is-busy {
    opacity: .6;
    pointer-events: none;
}

.tkfaq__sronly {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------- כותרת */

.tkfaq__head {
    margin-bottom: 18px;
}

.tkfaq__title {
    margin: 0 0 4px;
    font-size: 26px;
    color: #086c87;
}

.tkfaq__sub {
    margin: 0;
    color: #777;
    font-size: 14px;
}

/* -------------------------------------------------------------- סרגל כלים */

.tkfaq__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px;
    margin-bottom: 16px;
    background: #ecf9fe;
    border: 1px solid #cfeaf5;
    border-radius: 6px;
}

.tkfaq__field {
    display: flex;
}

.tkfaq__field--grow {
    flex: 1 1 240px;
    min-width: 200px;
}

.tkfaq__input {
    width: 100%;
    min-height: 38px;
    padding: 6px 10px;
    font-size: 15px;
    font-family: inherit;
    color: #333;
    background: #fff;
    border: 1px solid #c9d4d9;
    border-radius: 4px;
    box-sizing: border-box;
}

.tkfaq__input:focus {
    outline: 2px solid #0099cc;
    outline-offset: 1px;
    border-color: #0099cc;
}

.tkfaq__count {
    margin-inline-start: auto;
    font-size: 14px;
    color: #666;
    white-space: nowrap;
}

/* -------------------------------------------------------------- כפתורים */

.tkfaq__btn {
    min-height: 38px;
    padding: 6px 16px;
    font-size: 15px;
    font-family: inherit;
    color: #086c87;
    background: #fff;
    border: 1px solid #0099cc;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.tkfaq__btn:hover {
    background: #ecf9fe;
}

.tkfaq__btn:focus-visible {
    outline: 2px solid #086c87;
    outline-offset: 2px;
}

.tkfaq__btn--primary {
    color: #fff;
    background: #0099cc;
}

.tkfaq__btn--primary:hover {
    background: #086c87;
}

.tkfaq__btn--danger {
    color: #fff;
    background: #d9534f;
    border-color: #d9534f;
}

.tkfaq__btn--danger:hover {
    background: #b52b27;
}

.tkfaq__icon {
    min-width: 34px;
    min-height: 34px;
    padding: 4px 6px;
    font-size: 15px;
    line-height: 1;
    color: #086c87;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.tkfaq__icon:hover {
    background: #ecf9fe;
    border-color: #cfeaf5;
}

.tkfaq__icon:focus-visible {
    outline: 2px solid #0099cc;
    outline-offset: 1px;
}

.tkfaq__icon--danger:hover {
    background: #fdecec;
    border-color: #f3c9c8;
}

/* -------------------------------------------------------------- התראות */

.tkfaq__alert {
    padding: 10px 14px;
    margin-bottom: 14px;
    color: #a3211d;
    background: #fdecec;
    border: 1px solid #f3c9c8;
    border-radius: 4px;
}

.tkfaq__alert.is-success {
    color: #1f6b30;
    background: #e9f6ec;
    border-color: #c3e4cc;
}

.tkfaq__empty {
    padding: 16px;
    color: #888;
    font-style: italic;
    text-align: center;
}

.tkfaq__hint {
    margin: 6px 0 10px;
    font-size: 13px;
    color: #8a8a8a;
}

.tkfaq-fatal {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    direction: rtl;
    text-align: center;
    color: #a3211d;
    background: #fdecec;
    border: 1px solid #f3c9c8;
    border-radius: 6px;
}

/* -------------------------------------------------------------- פריסה */

.tkfaq__cols {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}

.tkfaq__col--cats {
    flex: 0 0 280px;
    max-width: 100%;
    position: sticky;
    top: 10px;
}

.tkfaq__col--questions {
    flex: 1 1 480px;
    min-width: 0;
}

.tkfaq__panel {
    padding: 14px;
    background: #fff;
    border: 1px solid #dfe6e9;
    border-radius: 6px;
}

.tkfaq__panel-title {
    margin: 0 0 12px;
    font-size: 18px;
    color: #086c87;
}

/* ------------------------------------------------------------ קטגוריות */

.tkfaq__addcat {
    display: flex;
    gap: 6px;
}

.tkfaq__catlist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tkfaq-cat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 4px;
    border-bottom: 1px solid #eef2f4;
}

.tkfaq-cat:last-child {
    border-bottom: 0;
}

.tkfaq-cat__handle {
    color: #b9c4c9;
    cursor: grab;
    user-select: none;
}

.tkfaq-cat--orphan {
    color: #999;
    font-style: italic;
}

.tkfaq-cat--orphan .tkfaq-cat__name {
    padding-inline-start: 20px;
}

.tkfaq-cat__name {
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 4px;
    font-size: 15px;
    font-family: inherit;
    color: #333;
    text-align: right;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    overflow-wrap: anywhere;
}

button.tkfaq-cat__name:hover {
    background: #f5fbfd;
    border-color: #cfeaf5;
}

.tkfaq-cat__edit {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 30px;
}

.tkfaq-cat__count {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 1px 7px;
    font-size: 12px;
    color: #086c87;
    text-align: center;
    background: #ecf9fe;
    border-radius: 10px;
}

.tkfaq-cat__del {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    color: #b9c4c9;
    background: transparent;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}

.tkfaq-cat__del:hover {
    color: #d9534f;
    background: #fdecec;
}

/* -------------------------------------------------------------- שאלות */

.tkfaq-sec {
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid #dfe6e9;
    border-radius: 6px;
    overflow: hidden;
}

.tkfaq-sec__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #ecf9fe;
    border-bottom: 1px solid #cfeaf5;
}

.tkfaq-sec__title {
    margin: 0;
    font-size: 16px;
    color: #086c87;
}

.tkfaq-sec__count {
    padding: 1px 8px;
    font-size: 12px;
    color: #086c87;
    background: #fff;
    border: 1px solid #cfeaf5;
    border-radius: 10px;
}

.tkfaq-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tkfaq-q {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid #f1f4f5;
}

.tkfaq-q:last-child {
    border-bottom: 0;
}

.tkfaq-q:hover {
    background: #fafdfe;
}

.tkfaq-q.is-hidden .tkfaq-q__text {
    color: #a0a0a0;
    text-decoration: line-through;
}

.tkfaq-q__handle {
    flex: 0 0 auto;
    color: #cbd4d8;
    cursor: grab;
    user-select: none;
}

.tkfaq-q__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.tkfaq-q__badge {
    flex: 0 0 auto;
    padding: 1px 8px;
    font-size: 12px;
    color: #8a5a12;
    background: #fdf3e0;
    border: 1px solid #f2dcb4;
    border-radius: 10px;
}

.tkfaq-q__actions {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
}

/* אלמנט ה-placeholder של jQuery UI sortable */
.ui-sortable-helper {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}

/* -------------------------------------------------------------- מודלים */

body.tkfaq-modal-open {
    overflow: hidden;
}

.tkfaq-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 12px;
    overflow-y: auto;
    direction: rtl;
    text-align: right;
}

.tkfaq-modal[hidden] {
    display: none;
}

.tkfaq-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}

.tkfaq-modal__box {
    position: relative;
    width: 100%;
    max-width: 820px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

.tkfaq-modal__box--sm {
    max-width: 520px;
}

.tkfaq-modal__title {
    margin: 0 0 16px;
    font-size: 20px;
    color: #086c87;
}

.tkfaq__field-block {
    margin-bottom: 14px;
}

.tkfaq__field-block > label {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
    color: #4d4d4d;
}

.tkfaq__checkbox {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 400 !important;
    cursor: pointer;
}

.tkfaq-modal__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid #eef2f4;
}

.tkfaq-modal__error {
    color: #a3211d;
    font-size: 14px;
}

/* העורך של WordPress בתוך המודל */
.tkfaq-modal .wp-editor-wrap {
    direction: rtl;
}

.tkfaq-modal .wp-editor-area {
    direction: rtl;
    text-align: right;
    font-family: monospace;
}

/* ------------------------------------------------------------- מסך צר */

@media (max-width: 860px) {
    .tkfaq__col--cats {
        position: static;
        flex: 1 1 100%;
    }

    .tkfaq__count {
        margin-inline-start: 0;
        width: 100%;
    }

    .tkfaq__field,
    .tkfaq__field--grow {
        flex: 1 1 100%;
    }

    .tkfaq__btn,
    .tkfaq__icon {
        min-height: 44px;
    }

    .tkfaq__icon {
        min-width: 44px;
    }
}