/**
 * Cổng TTĐT xã Mường Lạn - Module "to-chuc": sơ đồ tổ chức, trang đơn vị, danh bạ công vụ
 * NukeViet tự nạp tệp này (themes/<giao diện>/css/<module_theme>.css) trên mọi trang của module.
 * Màu lấy từ biến của giao diện (có giá trị dự phòng) nên tự hợp với chế độ tối. Viết theo hướng mobile-first.
 * @license GNU/GPL version 2 or any later version
 */

.tc-page {
    --tc-primary: var(--ml-primary, #8f1a1d);
    --tc-accent: var(--ml-accent, #f6c445);
    --tc-ink: var(--ml-ink, #1b2430);
    --tc-muted: var(--ml-muted, #4d5866);
    --tc-line: var(--ml-line, #d5d9df);
    --tc-surface: var(--ml-surface, #fff);
    --tc-soft: var(--ml-soft, #fbf7ee);
    --tc-link: var(--ml-link, #0a4d8c);
    --tc-heading: var(--ml-heading, var(--ml-primary, #8f1a1d));
    --tc-radius: var(--ml-radius, 6px);
    --tc-c: var(--tc-primary); /* màu nhận diện của khối, đổi theo .tc-kind--N */
    --tc-gap: 22px;            /* độ thụt mỗi cấp của cây */
    --tc-elbow: 34px;          /* vị trí đường nối ngang tính từ mép trên của mục */
}

/* Màu nhận diện từng khối: chỉ dùng làm nền cho biểu tượng trắng và làm viền (đều đạt tương phản ≥ 4.5:1 với chữ trắng) */
.tc-kind--1 { --tc-c: #b3261e; }
.tc-kind--2 { --tc-c: #8a5200; }
.tc-kind--3 { --tc-c: var(--tc-primary); }
.tc-kind--4 { --tc-c: #1c6b3c; }
.tc-kind--5 { --tc-c: #2f5373; }
.tc-kind--6 { --tc-c: #0a6670; }
.tc-kind--7 { --tc-c: #7a4a1e; }
.tc-kind--8 { --tc-c: #4d5866; }

/* ------------------------------------------------------------------ Ô tìm nhanh */
.tc-find__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.tc-find__row .form-control { flex: 1 1 220px; min-width: 0; }
.tc-find__status { margin: 8px 0 0; color: var(--tc-muted); }
/* Khối «chưa có dữ liệu» của giao diện có nền sáng cố định: trong module này lấy màu theo biến để đọc được ở chế độ tối */
.tc-page .ml-empty { background: var(--tc-soft); color: var(--tc-muted); border-color: var(--tc-line); }

/* ------------------------------------------------------------------ Sơ đồ tổ chức (cây) */
.tc-chart { margin: 18px 0 8px; }
.tc-tree, .tc-tree ul { list-style: none; margin: 0; padding: 0; }
.tc-tree__item { position: relative; }

/* Cấp 1: mỗi đơn vị gốc là một nhánh, xếp thành lưới */
.tc-tree--root { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
.tc-tree--root > .tc-tree__item {
    background: var(--tc-soft);
    border: 1px solid var(--tc-line);
    border-top: 4px solid var(--tc-c);
    border-radius: var(--tc-radius);
    padding: 12px;
    min-width: 0;
}

/* Cấp dưới: danh sách thụt cấp có đường nối */
.tc-tree--sub { margin-left: 12px; }
.tc-tree--sub > .tc-tree__item { padding: 10px 0 0 var(--tc-gap); }
.tc-tree--sub > .tc-tree__item::before { /* đường dọc */
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-left: 2px solid var(--tc-line);
}
.tc-tree--sub > .tc-tree__item:last-child::before { bottom: auto; height: var(--tc-elbow); }
.tc-tree--sub > .tc-tree__item::after { /* đường ngang nối vào ô */
    content: "";
    position: absolute;
    left: 0;
    top: var(--tc-elbow);
    width: var(--tc-gap);
    border-top: 2px solid var(--tc-line);
}

/* Ô đơn vị */
.tc-page .tc-node, .tc-page a.tc-node:link, .tc-page a.tc-node:visited {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 12px;
    background: var(--tc-surface);
    color: var(--tc-ink);
    border: 1px solid var(--tc-line);
    border-left: 4px solid var(--tc-c);
    border-radius: var(--tc-radius);
    text-decoration: none;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.tc-page a.tc-node:hover, .tc-page a.tc-node:focus-visible {
    color: var(--tc-ink);
    border-color: var(--tc-c);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
    transform: translateY(-1px);
    text-decoration: none;
}
.tc-page a.tc-node:hover .tc-node__title, .tc-page a.tc-node:focus-visible .tc-node__title { text-decoration: underline; }
.tc-node__icon, .tc-group__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--tc-c);
    color: #fff;
    font-size: .9375rem;
}
.tc-node__body { display: flex; flex-direction: column; min-width: 0; }
.tc-node__title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.tc-node__kind { color: var(--tc-muted); font-size: .8125rem; line-height: 1.3; }
.tc-node--l1 { min-height: 56px; }
.tc-node--l1 .tc-node__title { font-size: 1.0625rem; font-weight: 700; }
.tc-node--l1 .tc-node__icon { width: 38px; height: 38px; font-size: 1.0625rem; }

/* ------------------------------------------------------------------ Lưới thẻ theo khối */
.tc-groups { margin-top: 26px; }
.tc-group { margin: 0 0 18px; }
.tc-group[hidden], .tc-card[hidden], .tc-chart[hidden] { display: none; }
.ml-page .tc-group__title { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; font-size: 1.125rem; color: var(--tc-heading); }
.tc-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.tc-card {
    background: var(--tc-surface);
    color: var(--tc-ink);
    border: 1px solid var(--tc-line);
    border-left: 4px solid var(--tc-c);
    border-radius: var(--tc-radius);
    padding: 12px 14px;
    min-width: 0;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.tc-card:hover, .tc-card:focus-within { border-color: var(--tc-c); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.ml-page .tc-card__title { margin: 0 0 4px; font-size: 1.0625rem; line-height: 1.35; font-weight: 700; }
.tc-card__title a { color: var(--tc-link); }
.tc-card__title > .fa { color: var(--tc-muted); }
.tc-card__parent { margin: 0 0 4px; color: var(--tc-muted); font-size: .875rem; }
.tc-card__sum { margin: 0; color: var(--tc-ink); font-size: .9375rem; }

/* ------------------------------------------------------------------ Trang đơn vị */
.tc-path { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin: 0 0 12px; }
.tc-path__label { color: var(--tc-muted); font-weight: 600; }
.tc-path ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; }
.tc-path li + li::before { content: "›"; padding: 0 8px; color: var(--tc-muted); }

.tc-leaders { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.tc-leader {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--tc-surface);
    color: var(--tc-ink);
    border: 1px solid var(--tc-line);
    border-top: 4px solid var(--tc-c);
    border-radius: var(--tc-radius);
    padding: 14px;
    min-width: 0;
    transition: box-shadow .15s ease;
}
.tc-leader:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.tc-leader__photo { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--tc-line); background: var(--tc-soft); }
.tc-leader__photo--ph { display: inline-flex; align-items: center; justify-content: center; color: var(--tc-muted); font-size: 2rem; }
.tc-leader__body { min-width: 0; flex: 1 1 auto; }
.tc-leader__pos { margin: 0 0 6px; font-size: 1.0625rem; font-weight: 700; color: var(--tc-heading); }
.tc-leader__info { margin: 0; }
.tc-leader__info > div { margin: 0 0 4px; }
.tc-leader__info dt { display: inline; font-weight: 600; color: var(--tc-muted); font-size: .875rem; }
.tc-leader__info dt::after { content: ":"; }
.tc-leader__info dd { display: inline; margin: 0; overflow-wrap: anywhere; }
.tc-leader__name { font-weight: 700; }

/* ------------------------------------------------------------------ Bảng nhân sự, danh bạ */
.tc-tablewrap { overflow-x: auto; margin: 0 0 16px; }
.tc-tablewrap > .table { margin-bottom: 0; }
.tc-page .tc-table caption { caption-side: top; text-align: left; font-size: 1.0625rem; font-weight: 700; color: var(--tc-heading); padding: 6px 0; }
.tc-table th[scope="row"] { font-weight: 700; }
.tc-table td, .tc-table th { overflow-wrap: anywhere; vertical-align: top; }
.tc-table__group { display: block; color: var(--tc-muted); font-size: .8125rem; }

/* Điện thoại: bảng xếp thành từng thẻ, mỗi ô một dòng có nhãn */
@media (max-width: 599px) {
    .tc-page .tc-table, .tc-page .tc-table tbody, .tc-page .tc-table tr, .tc-page .tc-table th, .tc-page .tc-table td { display: block; width: auto; }
    .tc-page .tc-table caption { display: block; }
    .tc-page .tc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .tc-page .tc-table { border: 0; background: transparent; }
    .tc-page .tc-table tbody tr { border: 1px solid var(--tc-line); border-left: 4px solid var(--tc-c); border-radius: var(--tc-radius); background: var(--tc-surface); margin: 0 0 10px; padding: 6px 0; }
    .tc-page .tc-table > tbody > tr > th, .tc-page .tc-table > tbody > tr > td { border: 0; padding: 4px 12px; background: transparent; }
    .tc-page .tc-table tbody th::before, .tc-page .tc-table tbody td::before { content: attr(data-label) ": "; display: block; font-weight: 600; font-size: .8125rem; color: var(--tc-muted); }
    .tc-page .tc-table tbody th[scope="row"] { font-size: 1.0625rem; }
    .tc-tree--sub { margin-left: 4px; }
    .tc-page { --tc-gap: 16px; }
    .tc-leader__photo { width: 56px; height: 56px; }
    .tc-leader__photo--ph { font-size: 1.5rem; }
}

@media (min-width: 600px) {
    .tc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .tc-tree--root { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
    .tc-leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .tc-tree--root { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tôn trọng lựa chọn giảm chuyển động và «chế độ tải nhẹ» của cổng */
@media (prefers-reduced-motion: reduce) {
    .tc-page .tc-node, .tc-page a.tc-node:link, .tc-page a.tc-node:visited, .tc-card, .tc-leader { transition: none; }
    .tc-page a.tc-node:hover, .tc-page a.tc-node:focus-visible { transform: none; }
}
.ml-lite .tc-page a.tc-node:link, .ml-lite .tc-page a.tc-node:visited, .ml-lite .tc-card, .ml-lite .tc-leader { transition: none; box-shadow: none; }
.ml-lite .tc-page a.tc-node:hover, .ml-lite .tc-page a.tc-node:focus-visible { transform: none; box-shadow: none; }

@media print {
    .tc-find, .tc-page .ml-tabs { display: none; }
    .tc-node, .tc-card, .tc-leader { box-shadow: none; break-inside: avoid; }
}