tr[data-href] {
    cursor: pointer;
}

tr[data-href]:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.page-item.active .page-link {
    color: white;
}

.legend .related { background-color: orchid; }
.legend .synonym { background-color: orange; }
.legend .antonym { background-color: tomato; }
.legend .hint { background-color: deepskyblue; }

#search {
    font-size: 16px;
}

/* Default styles for small screens */
.table-responsive {
    overflow-x: auto;
    min-width: 100%;
}

.table {
    width: auto; /* Allow table to be its natural size on small screens */
    table-layout: fixed;
    word-break: break-word;
}

.table td, .table th {
    padding: 5px !important; /* Smaller padding for compact look */
}
.table-top td, .table-top th {
    white-space: wrap;
}

/* Styles for screens larger than 500px */
@media (min-width: 500px) {
    .card {
        max-width: 100%;
        margin: 0 auto;
    }

    .table {
        table-layout: auto;
        width: 100%;
    }

    .table td, .table th {
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 12px !important; /* Restore normal padding */
    }

    .table-top th:nth-child(2), .table-top td:nth-child(2) { width: 30%; } /* Japonca */
    .table-top th:nth-child(3), .table-top td:nth-child(3) { width: 20%; } /* Okunuş */
    .table-top th:nth-child(4), .table-top td:nth-child(4) { width: 30%; } /* Türkçe */
}

.table th:nth-child(1), .table td:nth-child(1),
.table th:nth-child(5), .table td:nth-child(5),
.table th:nth-child(6), .table td:nth-child(6) {
     white-space: nowrap; 
} /* ID, İlinti Sayısı */
.table th:nth-child(2), .table th:nth-child(3), .table th:nth-child(4) { white-space: nowrap; } /* Japonca, Okunuş, Türkçe */

.table td > select { width: 100%; }
.table td .btn { padding: 8px !important; white-space: nowrap;  }

/* View Words, Not Found List */
.table .word {
  min-width: 200px;
  width: auto;
  white-space: normal;
}

.pagination {
    flex-wrap: wrap;
    row-gap: .4em;
    margin-bottom: 0;
}

.dataTable-container {
    height: auto !important;
}
.dataTable-search {
    float: right !important;
}

canvas.linkable {
    cursor: pointer;
}

.tree {
    overflow-x: auto;
}
.tree ul {
    position: relative;
    padding: 1em 0;
    white-space: nowrap;
    margin: 0 auto;
    text-align: center;
}

.tree ul::after {
    content: '';
    display: table;
    clear: both;
}

.tree li {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 1em .5em 0 .5em;
}

.tree li::before, .tree li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 1px solid #ccc;
    width: 50%;
    height: 1em;
}

.tree li::after {
    right: auto;
    left: 50%;
    border-left: 1px solid #ccc;
}

.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}

.tree li:only-child {
    padding-top: 0;
}

.tree li:first-child::before, .tree li:last-child::after {
    border: 0 none;
}

.tree li:last-child::before {
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
    border-radius: 5px 0 0 0;
}

.tree ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 1px solid #ccc;
    width: 0;
    height: 1em;
}

.tree li a {
    border: 1px solid #ccc;
    padding: .5em .75em;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
    color: #333;
    position: relative;
    top: 1px;
}

.tree li a:hover,
.tree li a:hover + ul li a {
    background: #e9453f;
    color: #fff;
    border: 1px solid #e9453f;
}

.tree li a:hover + ul li::after,
.tree li a:hover + ul li::before,
.tree li a:hover + ul::before,
.tree li a:hover + ul ul::before {
    border-color: #e9453f;
}

.input-word .form-group {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.input-word .form-group label {
    min-width: 180px;
    margin-bottom: 0;
    margin-right: 1rem;
}

.input-word .form-group .form-control {
    flex: 1;
}

.ui-autocomplete {
    z-index: 9999;
}

.main-content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.container-fluid {
    flex-grow: 1;
}

body, th, td {
    color: #333 !important;
}
.footer {
    background-color: #2f2f2f;
    color: #fff;
    margin-top: 1em;
}

/* アラート上書き */
.alert-primary {
    --bs-alert-color: #472e7f;
    --bs-alert-bg: #e4dbf6;
    --bs-alert-border-color: #d6caf2;
}

.alert-primary .alert-link {
    color: #392566;
}

.alert-secondary {
    --bs-alert-color: #3c4653;
    --bs-alert-bg: #e0e3e8;
    --bs-alert-border-color: #d1d5dc;
}

.alert-secondary .alert-link {
    color: #303842;
}

.alert-success {
    --bs-alert-color: #3e7423;
    --bs-alert-bg: #e1f3d8;
    --bs-alert-border-color: #d1edc4;
}

.alert-success .alert-link {
    color: #325d1c;
}

.alert-info {
    --bs-alert-color: #336495;
    --bs-alert-bg: #ddedfe;
    --bs-alert-border-color: #cce4fd;
}

.alert-info .alert-link {
    color: #295077;
}

.alert-warning {
    --bs-alert-color: #915c21;
    --bs-alert-bg: #fcebd7;
    --bs-alert-border-color: #fbe0c3;
}

.alert-warning .alert-link {
    color: #744a1a;
}

.alert-danger {
    --bs-alert-color: #8c2f25;
    --bs-alert-bg: #fbdcd8;
    --bs-alert-border-color: #f9cac5;
}

.alert-danger .alert-link {
    color: #70261e;
}

.alert-light {
    --bs-alert-color: #585a5c;
    --bs-alert-bg: #f8f9fa;
    --bs-alert-border-color: #f5f6f7;
}

.alert-light .alert-link {
    color: #46484a;
}

.alert-dark {
    --bs-alert-color: #121923;
    --bs-alert-bg: #d2d4d8;
    --bs-alert-border-color: #bcbfc4;
}

.alert-dark .alert-link {
    color: #0e141c;
}

.alert-white {
    --bs-alert-color: #666666;
    --bs-alert-bg: white;
    --bs-alert-border-color: white;
}

.alert-white .alert-link {
    color: #525252;
}