/* =========================================================
   Admin - Word roots mapping
   ========================================================= */

.word-roots-admin-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.word-roots-header,
.word-roots-panel {
    box-sizing: border-box;

    padding: 26px 28px;

    border: 1px solid #dfe8ef;
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 7px 20px
        rgba(31, 60, 90, 0.07);
}

.word-roots-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.word-roots-kicker {
    color: #109c9b;

    font-size: 0.76rem;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.65px;
}

.word-roots-header h1 {
    margin: 5px 0 0;

    color: #102b56;

    font-size: clamp(
        1.8rem,
        3vw,
        2.5rem
    );

    font-weight: 950;
}

.word-roots-header p {
    margin: 8px 0 0;

    color: #607286;

    line-height: 1.5;
}

.word-roots-secondary,
.word-roots-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 0 12px;

    border-radius: 10px;

    font: inherit;
    font-size: 0.8rem;
    font-weight: 900;

    text-decoration: none !important;

    cursor: pointer;
}

.word-roots-secondary {
    border: 1px solid #d5e1e9;

    background: #ffffff;

    color: #40566d !important;
}

.word-roots-save {
    border: 0;

    background: #109c9b;

    color: #ffffff;
}

.word-roots-toolbar {
    display: grid;
    grid-template-columns:
        minmax(230px, 1fr)
        auto
        auto;

    gap: 14px;
    align-items: center;

    margin-bottom: 16px;
}

.word-roots-toolbar input[type="search"],
.word-roots-select {
    width: 100%;
    box-sizing: border-box;

    padding: 9px 10px;

    border: 1px solid #cfdce5;
    border-radius: 10px;

    background: #ffffff;

    font: inherit;
}

.word-roots-check {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #52677b;

    font-size: 0.78rem;
    font-weight: 800;
}

.word-roots-count {
    color: #718196;

    font-size: 0.78rem;
    font-weight: 850;
}

.word-roots-message {
    margin-bottom: 13px;

    color: #718196;
}

.word-roots-message.is-success {
    color: #267149;
}

.word-roots-message.is-error {
    color: #9a4444;
}

.word-roots-table-wrapper {
    overflow-x: auto;
}

.word-roots-table {
    width: 100%;

    border-collapse: collapse;
}

.word-roots-table th,
.word-roots-table td {
    padding: 10px 9px;

    border-bottom: 1px solid #e8eef3;

    text-align: left;
    vertical-align: middle;
}

.word-roots-table th {
    color: #607286;

    font-size: 0.72rem;
    font-weight: 900;

    text-transform: uppercase;
}

.word-roots-arabic {
    color: #102b56;

    font-size: 1.25rem;
    font-weight: 900;
}

.word-roots-level {
    display: inline-flex;

    padding: 4px 8px;

    border-radius: 999px;

    background: #edf8f8;
    color: #0c8584;

    font-size: 0.7rem;
    font-weight: 900;
}

@media (max-width: 760px) {

    .word-roots-header,
    .word-roots-toolbar {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .word-roots-header {
        flex-direction: column;
    }
}


.word-roots-gender {
    color: #718196;
    font-size: 0.74rem;
    font-weight: 800;
}

.word-roots-row-unmapped {
    background: #fffdf7;
}