/* ----------------------------------- ADMIN (CONTROLS / TABLE) ----------------------------------- */

.admin_controls {display: flex;}
.admin_controls > div {display: flex; width: 50%;}
.admin_controls > div:nth-of-type(1) > div + div {margin-inline-start: 10px;}
.admin_controls > div:nth-of-type(2) {justify-content: flex-end;}

#admin_table {padding-top: 12px;}
#tg_accounts_body, #tg_dialogs_body, #tg_scenarios_body {padding-top: 12px;}
.tg_dialogs_controls > .tg_status_filters {width: auto; flex: 1 1 auto; flex-wrap: wrap; gap: 10px;}
.tg_dialogs_controls > div:nth-of-type(2) {width: auto;}
.checkbox_group_wrap > label {padding-inline-start: 10px;}

/* ----------------------------------- ADMIN (TABLE) ----------------------------------- */

.table_1 {width: 100%; font-size: 12px; color: var(--gray-color-2); text-align: start;}
.table_1 > thead > tr {background: var(--gray-color-14);}
.table_1 td {padding: 6px; vertical-align: top;}
.table_1 .br {border-inline-end: 1px solid var(--gray-color-11);}
.table_1 .sep > td {
    height: 1px; padding: 0; background: var(--gray-color-11); border-inline-start: 1px solid var(--gray-color-11);
    border-inline-end: 1px solid var(--gray-color-11);
}
.table_1 .sep > td.bt {background: transparent;}
.table_1 .link {
    color: var(--primary-color-1); font-weight: 600; text-decoration: underline; cursor: pointer; transition: all 0.2s ease-in-out;
}
.table_1 .link:hover {color: var(--red-color-1); text-decoration: none;}
.table_1 .icon_copy {display: inline-block; margin-inline-start: 4px; text-decoration: none;}
.table_1 .admin_user_row .icon_copy, .table_1 .admin_user_row .icon_reload {visibility: hidden;}
.table_1 .admin_user_row:hover .icon_copy, .table_1 .admin_user_row:hover .icon_reload {visibility: visible;}
.table_1 .icon_copy.copied {text-decoration: none; animation: admin-copy-success 0.5s ease-in-out;}
.table_1 .icon_reload {display: inline-block; margin-inline-start: 4px; text-decoration: none; font-size: 11px;}
.table_1 .icon_reload.reloading {text-decoration: none; animation: admin-reload 0.5s ease-in-out;}
.table_1_actions {display: flex; flex-direction: column; align-items: flex-start; gap: 4px;}
.table_1_sub {margin-top: 2px; color: var(--gray-color-7); font-size: 11px;}

@keyframes admin-copy-success {50% {color: var(--green-color-1); transform: scale(1.35) rotate(-8deg);}}
@keyframes admin-reload {50% {color: var(--green-color-1); transform: scale(1.35) rotate(180deg);}}

.no_data {
    width: 100%; padding: 14px 0; background: var(--gray-color-15); border: 1px solid var(--gray-color-11); border-radius: 8px;
    color: var(--gray-color-2); font-size: 12px; text-align: center;
}

/* ----------------------------------- ADMIN (TABS) ----------------------------------- */

.admin_tabs {position: relative; overflow: hidden; margin-bottom: 14px;}
.admin_tabs::before, .admin_tabs::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 1;
    pointer-events: none; transition: opacity 0.3s;
}
.admin_tabs::before {inset-inline-end: 0; opacity: 0; background: linear-gradient(to left, var(--jobs-roles-bg), transparent);}
.admin_tabs::after {inset-inline-start: 0; opacity: 0; background: linear-gradient(to right, var(--jobs-roles-bg), transparent);}
.admin_tabs.shadow_right::before {opacity: 1;}
.admin_tabs.shadow_left::after {opacity: 1;}
html[dir="rtl"] .admin_tabs::before {background: linear-gradient(to right, var(--jobs-roles-bg), transparent);}
html[dir="rtl"] .admin_tabs::after {background: linear-gradient(to left, var(--jobs-roles-bg), transparent);}

.admin_tabs_items {
    display: flex; gap: 8px; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none; user-select: none;
}
.admin_tabs_items::-webkit-scrollbar {display: none;}

.admin_tab {
    flex: 0 0 auto; padding: 6px 14px; border: var(--surface-border); border-radius: 12px;
    background: var(--white-color); color: var(--gray-color-3); font-size: 13px; white-space: nowrap;
    text-decoration: none; cursor: pointer; user-select: none; transition: all 0.2s ease-in-out;
}
.admin_tab:hover {border-color: var(--primary-color-4); color: var(--primary-color-1); background: var(--primary-color-7);}
.admin_tab.active {border-color: var(--primary-color-3); background: var(--primary-color-3); color: #fff;}

@media screen and (max-width: 768px) {
    .admin_tabs_items {gap: 10px; padding-bottom: 2px;}
    .admin_tab {padding: 8px 16px; border-radius: 14px; font-size: 15px;}
}

/* ----------------------------------- ADMIN (VISITORS) ----------------------------------- */

.vs_period {display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;}
.vs_period > a {
    padding: 4px 12px; border: 1px solid var(--gray-color-11); border-radius: 8px;
    color: var(--gray-color-7); font-size: 12px; font-weight: 500; text-decoration: none; transition: all 0.2s ease-in-out;
}
.vs_period > a:hover {border-color: var(--primary-color-3); color: var(--primary-color-1);}
.vs_period > a.active {background: var(--primary-color-1); border-color: var(--primary-color-1); color: #fff;}
.vs_period > a.vs_export {margin-inline-start: auto; border-color: var(--primary-color-3); color: var(--primary-color-1);}
.vs_metric {display: inline-flex; border: 1px solid var(--gray-color-11); border-radius: 8px; overflow: hidden;}
.vs_metric > a {padding: 4px 12px; color: var(--gray-color-7); font-size: 12px; font-weight: 500; text-decoration: none; transition: all 0.2s ease-in-out;}
.vs_metric > a:hover {color: var(--primary-color-1);}
.vs_metric > a.active {background: var(--primary-color-1); color: #fff;}
.table_1 td.vs_hl {background: var(--primary-color-9); color: var(--primary-color-1); font-weight: 600;}

.vs_kpis {display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px;}
.vs_kpi {
    padding: 10px 12px; background: var(--gray-color-15); border: 1px solid var(--gray-color-11); border-radius: 10px;
}
.vs_kpi_t {color: var(--gray-color-7); font-size: 11px; font-weight: 500;}
.vs_kpi_v {margin-top: 4px; color: var(--black-color); font-size: 20px; font-weight: 600;}
.vs_kpi_d {margin-top: 2px; color: var(--gray-color-7); font-size: 11px;}
.vs_now {background: var(--primary-color-9); border-color: var(--primary-color-3);}

.vs_charts {display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px;}
.vs_chart {
    padding: 16px 18px; background: var(--white-color); border: 1px solid var(--gray-color-12); border-radius: 14px;
}
.vs_chart_t {
    display: flex; align-items: center; margin-bottom: 12px; padding-inline-start: 10px;
    border-inline-start: 3px solid var(--primary-color-4); color: var(--gray-color-1); font-size: 13px; font-weight: 600;
}
.vs_canvas {position: relative; width: 100%; height: 260px;}
.vs_canvas > canvas {display: block;}

.vs_scroll {width: 100%; overflow-x: auto;}
.vs_more {margin-top: 12px; text-align: center;}
.vs_more > a {
    display: inline-block; padding: 8px 18px; border: 1px solid var(--gray-color-11); border-radius: 8px;
    color: var(--primary-color-1); font-size: 12px; font-weight: 500; text-decoration: none; transition: all 0.2s ease-in-out;
}
.vs_more > a:hover {border-color: var(--primary-color-3); color: var(--red-color-1);}

.vs_grid3 {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;}
.vs_grid2 {display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: start;}

.vs_legend {display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; color: var(--gray-color-7); font-size: 11px;}
.vs_legend > span {display: flex; align-items: center;}
.vs_dot {display: inline-block; width: 9px; height: 9px; margin-inline-end: 5px; border-radius: 50%; background: var(--gray-color-8);}
.vs_dot_people {background: var(--primary-color-4);}
.vs_dot_gray {background: var(--yellow-color-1);}
.vs_dot_bots {background: var(--red-color-2);}
.vs_dot_fake {background: var(--orange-color-1);}

.vs_alert {background: var(--red-color-4); border-color: var(--red-color-1);}

.vs_badge {display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; background: var(--gray-color-13); color: var(--gray-color-2);}
.vs_badge.vs_verified {background: var(--green-color-4); color: var(--green-color-1);}
.vs_badge.vs_pending {background: color-mix(in srgb, var(--yellow-color-1) 20%, transparent); color: var(--yellow-color-1);}
.vs_badge.vs_fake {background: var(--red-color-4); color: var(--red-color-1);}

@media (max-width: 900px) {
    .vs_charts {grid-template-columns: 1fr;}
    .vs_grid3 {grid-template-columns: 1fr;}
    .vs_grid2 {grid-template-columns: 1fr;}
}

/* ----------------------------------- ADMIN (TREE) ----------------------------------- */

.admin_tree {
    display: flex; margin-top: 12px; border-top: 1px solid var(--gray-color-12); border-bottom: 1px solid var(--gray-color-12);
}
.admin_tree > div:nth-of-type(1) {width: 240px; padding-block: 14px; padding-inline: 14px 6px; background: var(--gray-color-14);}
.admin_tree > div:nth-of-type(2) {width: calc(100% - 240px); padding-block: 10px 24px; padding-inline: 12px 0;}

.admin_tree_list_item {display: flex; align-items: center; font-size: 12px;}
.admin_tree_list_item > div:nth-of-type(1) {display: flex; align-items: center; width: 11px;}
.admin_tree_list_item > div:nth-of-type(1) > i {
    position: relative; top: 0; padding: 2px 1px; color: var(--gray-color-5); font-size: 11px;
    transform: rotateZ(0deg); cursor: pointer;
}
.admin_tree_list_item.expand > div:nth-of-type(1) > i {inset-inline-start: -1px; transform: rotateZ(90deg);}
.admin_tree_list_item > div:nth-of-type(2) {width: calc(100% - 30px);}
.admin_tree_list_item > div:nth-of-type(2) > span:nth-of-type(1) {
    color: var(--primary-color-1); font-weight: 500; cursor: pointer; transition: all 0.2s ease-in-out;
}
.admin_tree_list_item > div:nth-of-type(2) > span:nth-of-type(1):hover {color: var(--red-color-1);}
.admin_tree_list_item > div:nth-of-type(2) > span:nth-of-type(2) {
    padding-inline-start: 4px; color: var(--gray-color-7); font-size: 11px;
}
.admin_tree_list_item > div:nth-of-type(2) > span:nth-of-type(2) > span:nth-of-type(2) {color: var(--primary-color-4);}
.admin_tree_list_item > div:nth-of-type(3) {width: 15px;}
.admin_tree_list_item > div:nth-of-type(3) > i {
    height: 12px; color: var(--gray-color-8); font-size: 15px; cursor: pointer; transition: all 0.2s ease-in-out;
}
.admin_tree_list_item > div:nth-of-type(3) > i:hover {color: var(--gray-color-5);}

.admin_tree_list_item.active > div:nth-of-type(2) > span:nth-of-type(1) {color: var(--red-color-1);}
.admin_tree_list_item.active > div:nth-of-type(3) > i {color: var(--red-color-1);}

.admin_tree_list_item.root > div:nth-of-type(2) {position: relative; inset-inline-start: -14px;}
.admin_tree_list_item.root > div:nth-of-type(2) > span:nth-of-type(1) {color: var(--gray-color-1); font-weight: 500; cursor: initial;}

.admin_tree_list_item.light > div:nth-of-type(2) > span:nth-of-type(1) {font-weight: 500;}

.admin_tree_table_title {font-size: 12px; font-weight: 500; text-align: center;}

.admin_tree_table_body {display: table; width: 100%; margin-top: 8px; font-size: 12px;}
.admin_tree_table_body > div {display: table-row;}
.admin_tree_table_body > div > div {display: table-cell; padding: 8px; border-bottom: 1px solid var(--gray-color-10);}
.admin_tree_table_body > div:nth-of-type(1) > div {
    background-color: var(--gray-color-14);
    border-top: 1px solid var(--gray-color-8); border-bottom: 1px solid var(--gray-color-8);
}
.admin_tree_table_body > div > div > .link {
    color: var(--primary-color-1); font-weight: 500; text-decoration: underline; cursor: pointer; transition: all 0.2s ease-in-out;
}
.admin_tree_table_body > div > div > .link:hover {color: var(--red-color-1); text-decoration: none;}

/* ----------------------------------- ADMIN (USER CV UPLOAD) ----------------------------------- */

.admin_user_cv_upload {margin-top: 16px;}
.admin_user_cv_upload .dd_group {border: 1px dashed var(--gray-color-9); transition: border-color .15s ease, background .15s ease;}
.admin_user_cv_upload .dd_group.dragover {border-color: var(--primary-color-3); background: var(--primary-color-9);}

.admin_user_cv_analyzing {
    display: none; align-items: center; gap: 16px; margin-top: 16px; padding: 18px 20px; border-radius: 12px;
    background: var(--primary-color-9);
}
.admin_user_cv_analyzing.active {display: flex;}
.admin_user_cv_analyzing_spinner {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--gray-color-11);
    border-top-color: var(--primary-color-3); animation: admin-cv-spin 0.8s linear infinite;
}
.admin_user_cv_analyzing_text {flex: 1 1 auto; min-width: 0;}
.admin_user_cv_analyzing_title {color: var(--black-color); font-size: 14px; font-weight: 600;}
.admin_user_cv_analyzing_desc {margin-top: 4px; color: var(--gray-color-5); font-size: 12px; line-height: 1.4;}

@keyframes admin-cv-spin {to {transform: rotate(360deg);}}

.admin_user_cv_error {
    display: none; margin-top: 16px; padding: 12px 16px; border: 1px solid var(--red-color-1); border-radius: 10px;
    background: var(--red-color-4); color: var(--red-color-1); font-size: 13px; font-weight: 500; line-height: 1.4;
}
.admin_user_cv_error.active {display: block;}

.admin_user_cv_success {
    display: none; margin-top: 16px; padding: 12px 16px; border: 1px solid var(--primary-color-3); border-radius: 10px;
    background: var(--primary-color-9); color: var(--primary-color-1); font-size: 13px; font-weight: 500; line-height: 1.4;
}
.admin_user_cv_success.active {display: block;}


.tg_dialog_head {display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;}
.tg_dialog_controls {margin-bottom: 10px;}
.tg_feed {display: flex; flex-direction: column; max-height: 460px; padding: 10px; overflow-y: auto; background: #f7f8fa; border-radius: 8px;}
.tg_msg {max-width: 70%; margin-bottom: 8px; padding: 8px 12px; border-radius: 10px;}
.tg_msg.in {align-self: flex-start; background: #ffffff; border: 1px solid #e6e8eb;}
.tg_msg.out {align-self: flex-end; background: #e3f0ff;}
.tg_msg_text {white-space: pre-wrap; word-break: break-word;}
.tg_msg_meta {margin-top: 4px; font-size: 11px; color: #8a929c;}
.tg_manual {margin-top: 12px;}


/* ------------------------------- SCREENING METRICS ------------------------------- */

.admin_screening_stats {display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px;}
.admin_screening_stat {padding: 16px; border: 1px solid var(--gray-color-11, #e5e7eb); border-radius: 12px; background: #fff;}
.admin_screening_stat_value {font-size: 24px; font-weight: 700; color: var(--black-color, #111827);}
.admin_screening_stat_label {margin-top: 4px; font-size: 12px; color: var(--gray-color-5, #9ca3af);}
.admin_screening_note {margin-bottom: 16px; font-size: 13px; color: var(--gray-color-3, #4b5563);}