/* ===== 数据库列表页 — 世系图暖色风格 ===== */

.database-container {
    padding: 16px 20px;
}

/* ===== 搜索栏 ===== */
.search-form {
    margin-bottom: 12px;
    background: #fdf8f4;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1.5px solid #d4b8a0;
    box-shadow: 0 1px 4px rgba(90,62,43,0.08);
}

.search-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.search-bracket {
    color: #b8835a;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
}

.search-label {
    font-size: 13px;
    white-space: nowrap;
    color: #5a4a3a;
}

.search-input {
    padding: 4px 10px;
    border: 1.5px solid #d4b8a0;
    border-radius: 6px;
    font-size: 13px;
    color: #5a4a3a;
    background: #fff;
    transition: border-color 0.2s;
}
.search-input:focus {
    outline: none;
    border-color: #b8835a;
    box-shadow: 0 0 0 2px rgba(184,131,90,0.15);
}

.search-row select {
    padding: 4px 8px;
    border: 1.5px solid #d4b8a0;
    border-radius: 6px;
    font-size: 13px;
    color: #5a4a3a;
    background: #fff;
}

/* ===== 分页栏 ===== */
.pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
    padding: 8px 12px;
    background: #f5f0eb;
    border: 1.5px solid #c9b99a;
    border-radius: 8px;
    font-size: 13px;
}

.pagination-text {
    color: #5a4a3a;
}

.pagination-links a {
    margin: 0 2px;
    padding: 3px 10px;
    background: #fff;
    border: 1.5px solid #d4b8a0;
    color: #5a4a3a;
    text-decoration: none;
    border-radius: 6px;
    font-size: 12px;
    transition: all 0.2s;
}

.pagination-links a:hover {
    background: #b8835a;
    border-color: #b8835a;
    color: #fff;
}

/* 转到页 */
.goto-page {
    margin-left: 12px;
    white-space: nowrap;
    font-size: 13px;
    color: #5a4a3a;
}
.goto-input {
    width: 50px;
    padding: 3px 4px;
    border: 1.5px solid #d4b8a0;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
    color: #5a4a3a;
}

/* ===== 滚动区域 ===== */
.database-scroll-area {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    overflow-x: auto;
    /* Firefox 滚动条 */
    scrollbar-width: thin;
    scrollbar-color: #d4b8a0 #f5f0eb;
}
.database-scroll-area::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
.database-scroll-area::-webkit-scrollbar-track {
    background: #f5f0eb;
    border-radius: 4px;
}
.database-scroll-area::-webkit-scrollbar-thumb {
    background: #d4b8a0;
    border-radius: 4px;
    border: 1px solid #f5f0eb;
}
.database-scroll-area::-webkit-scrollbar-thumb:hover {
    background: #b8835a;
}

/* 底部翻页栏 */
.pagination-bar.bottom {
    margin: 12px 0 0 0;
}

/* 表头固定 */
.database-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

/* ===== 数据表 ===== */
.database-table {
    width: 100%;
    border-collapse: collapse;
    border: 1.5px solid #c9b99a;
    font-size: 13px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

/* 表头 */
.database-table .header-row th {
    padding: 8px 6px;
    background: #5a3e2b;
    border: 1px solid #4a2e1b;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    color: #f5f0eb;
    vertical-align: middle;
    letter-spacing: 1px;
}

/* 数据行边框 */
.database-table tbody td {
    border: 1px solid #e0d5c8;
    padding: 6px 4px;
}

/* 行交替色 */
.database-table tbody tr:nth-child(odd) td {
    background-color: #fdf8f4;
}

.database-table tbody tr:nth-child(even) td {
    background-color: #ffffff;
}

.database-table tbody tr:hover td {
    background-color: #f5f0eb !important;
}

/* ===== 排序箭头 ===== */
.sort-arrows {
    display: inline;
    white-space: nowrap;
    font-size: 11px;
    margin-left: 2px;
}

.sort-arrows a {
    text-decoration: none;
    color: #c9b99a;
    padding: 0 2px;
}

.sort-arrows a.active {
    color: #f5f0eb;
    font-weight: bold;
}

.sort-arrows a:hover {
    color: #fff;
}

/* ===== 列宽 ===== */
.col-gen,
.col-id,
.col-name,
.col-name2,
.col-chushengdi,
.col-juzhudi,
.col-fuid {
    white-space: nowrap;
    text-align: center;
    padding: 6px 4px;
    vertical-align: middle;
}

.col-children {
    white-space: nowrap;
    text-align: center;
    padding: 4px 2px;
    vertical-align: middle;
}

.col-detail {
    text-align: left;
    padding: 6px 6px;
    vertical-align: middle;
    line-height: 1.6;
}

.col-note {
    text-align: center;
    padding: 6px 4px;
    vertical-align: middle;
    line-height: 1.5;
}

.col-fuid {
    font-size: 12px;
}

/* ===== 链接 ===== */
.col-id a, .col-name a {
    color: #b8835a;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.col-id a:hover, .col-name a:hover {
    text-decoration: underline;
    color: #5a3e2b;
}

/* ===== 世次 ===== */
.gen-num {
    font-weight: 600;
    font-size: 13px;
    color: #5a3e2b;
}

.gen-name {
    font-size: 11px;
    color: #8a7a6a;
}

/* ===== 生子 ===== */
.children-inline {
    margin: 0 auto;
    text-align: left;
    font-size: 12px;
}

.children-inline td {
    padding: 1px 4px;
    white-space: nowrap;
}

.child-idx {
    color: #8a7a6a;
    font-size: 11px;
}

.children-inline a {
    color: #b8835a;
    text-decoration: none;
    font-weight: 500;
}

.children-inline a:hover {
    text-decoration: underline;
    color: #5a3e2b;
}

/* ===== 详情列 ===== */
.col-detail .spouse-divider {
    margin: 6px 0;
    border: none;
    border-top: 1.5px dashed #d4b8a0;
    height: 1px;
}

.col-detail .spouse-id {
    color: #8a7a6a;
    font-size: 12px;
}

.col-detail .spouse-role {
    color: #b8835a;
    font-weight: 600;
}

.col-detail .spouse-name {
    color: #b8835a;
    font-weight: 600;
}

/* ===== 父ID列 ===== */
.parent-label {
    color: #5a3e2b;
    font-weight: 600;
}

.parent-link {
    color: #b8835a;
    text-decoration: none;
    font-size: 12px;
}

.parent-link:hover {
    text-decoration: underline;
    color: #5a3e2b;
}

/* ===== 响应式 ===== */
@media (max-width: 1200px) {
    .database-container {
        padding: 10px;
        overflow-x: auto;
    }
    .database-table {
        font-size: 12px;
    }
}
@media (max-width: 768px) {
    .database-container {
        padding: 10px;
        max-width: 100%;
        overflow: hidden;
    }
    .database-scroll-area {
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: none;
        max-width: 100%;
    }
    .database-table {
        font-size: 11px;
        min-width: 700px;
    }
    .database-table th,
    .database-table td {
        padding: 4px 4px;
    }
    .col-gen .gen-num { font-size: 11px; }
    .col-gen .gen-name { font-size: 10px; }
    .col-children { font-size: 11px; }
    .children-inline td { padding: 0 4px; }
    .child-idx { font-size: 10px; }
    .col-detail { font-size: 11px; min-width: 100px; }
    .col-note { min-width: 60px; }
    .search-bracket { font-size: 13px; display: block; width: 100%; }
    .search-row { gap: 4px; }
    .search-row .search-input {
        flex: 1;
        min-width: 100px;
        width: auto;
    }
    .search-row .btn-sm, .search-row .btn {
        font-size: 11px;
        padding: 3px 8px;
        white-space: nowrap;
        text-align: center;
    }
    .pagination-bar { flex-direction: column; gap: 6px; text-align: center; }
    .pagination-links { flex-wrap: wrap; justify-content: center; }
    .pagination-links a { font-size: 12px; padding: 3px 7px; }
    .goto-page { display: inline; margin-left: 8px; white-space: nowrap; }
    .goto-input { width: 44px; }
    .database-table .spouse-divider { margin: 4px 0; }
    /* 弹窗全屏 */
    #memberModal > div {
        width: 95% !important;
        height: 90vh !important;
    }
}
@media (max-width: 480px) {
    .database-container { padding: 6px; max-width: 100%; overflow: hidden; }
    .database-table { font-size: 10px; min-width: 600px; }
    .database-table th,
    .database-table td { padding: 3px 2px; }
    .search-form { padding: 8px 10px; }
    .search-row .btn-sm, .search-row .btn {
        font-size: 10px;
        padding: 2px 6px;
        text-align: center;
    }
    .search-row select { font-size: 11px; }
    .pagination-text { font-size: 10px; }
    .pagination-links a { font-size: 10px; padding: 2px 5px; }
    .col-detail { min-width: 80px; font-size: 10px; }
    .children-inline { font-size: 10px; }
}