/* 添加 GlotPress 自定义样式 */

html {
    -webkit-font-smoothing: antialiased;
}

.notice,
.error {
    padding: 1em !important;
    border-radius: 3px;
}

body,
html,
.gp-content,
.gp-content textarea,
.gp-content input {
    font-family:
        "PingFang SC",
        Microsoft YaHei,
        WenQuanYi Micro Hei,
        Arial,
        Helvetica,
        sans-serif;
}
.gp-content label {
    line-height: 2;
}
.gp-bar h1 {
    display: none !important;
}
.gp-content h2 {
    background-color: #fff !important;
    padding: 1em !important;
    font-size: 16px;
}

.gp-content h3 {
    padding: 1em 0.5em !important;
}

.gp-content a {
    text-decoration: unset;
}
.gp-content a:hover {
    text-decoration: underline;
}

.gp-content li {
    display: inline-block;
    padding: 10px!important;
    margin: 15px 0;
    font-weight: 400;
    width: 33%;
    text-align: left;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    border: 1px solid rgba(255, 255, 255, 0);
}
.gp-content li:hover {
    transition-duration: 0.2s;
    transition-timing-function: linear;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.117647) 0 1px 3px;
    visibility: visible;
    -moz-box-sizing: border-box;
    -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
    -webkit-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    -ms-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    background: #fbf8e3;
    border: 1px solid #e7dd71;
}
.gp-js-message {
    top: 3em;
    padding: 1em;
}

.tablesorter-glotpress tr.odd td {
    background-color: #e8ffd7;
}
.locale-sub-projects tr:hover td {
    background-color: #e8ffd7 !important;
}
table.translations .gp-column-priority {
    width: 6%;
    padding-top: 1.5em;
}
table.gp-table tbody td,
table.gp-table tbody th {
    padding: 1em 0.75em;
}
table.translations td.original,
table.translations td.translation {
    padding-top: 20px;
}
table.translations td.original .original-text,
table.translations td.translation .translation-text {
    white-space: pre-wrap;
    line-height: initial;
}
.tablesorter-glotpress .header,
.tablesorter-glotpress .tablesorter-header {
    padding-top: 10px;
    padding-bottom: 15px;
    text-align: center;
}

table.glossary thead th,
table.locale-sub-projects thead th,
table.locales thead th,
table.permissions thead th,
table.translation-sets thead th,
table.translations tfoot th,
table.translations thead th {
    padding-top: 10px;
    padding-bottom: 15px;
}
/* .gp-content li:before {
    font-family: "dashicons";
    content: "\f326";
    font-size: 22px;
    position: inherit;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-right: 5px;

}*/

.translate-icon:before {
    font-family: "dashicons";
    content: "\f326";
    font-size: 25px;
    color: #c6c6c6;
    position: inherit;
    margin-bottom: 5px;
    line-height: 10px;
    top: 5px;
    padding-right: 5px;
}

ul a.edit,
dt a.edit {
    background-color: rgb(255 255 255 / 0%) !important;
    font-weight: 600;
}
.gp-content input,
.gp-content textarea {
    margin: 0em 0.1em 0 0 !important;
}
dl.filters-expanded {
    background-color: #fff !important;
}
div#translation-sets h3 {
    background-color: #fff;
}
p.description {
    margin: 1.75em !important;
}

code,
kbd,
pre,
tt,
var {
    font-family: "Lucida Console", Monaco, "Courier New", monospace;
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    line-height: 2;
    background: #f5f5f5;
    text-transform: none;
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding: 0 0.618em;
    margin: 0 0.191em;
}

.actionlist {
    margin-top: 1em;
    padding-top: 2em;
    border-top: 1px solid #ededed !important;
    margin-left: 1em;
}
.breadcrumb {
    background-color: #fff !important;
    border: 1px solid rgb(255 255 255 / 0%) !important;
    border-bottom: 1px solid #ededed !important;
    margin: 1rem -1rem 1rem !important;
}

.breadcrumb li {
    width: auto;
    padding: 5px !important;
}
form.filters-toolbar > div {
    line-height: 4em !important;
}
table.translations td,
table.translations th,
table.translation-sets td,
table.translation-sets th,
table.locales td,
table.locales th,
table.permissions td,
table.permissions th,
table.glossary th,
table.glossary td,
table.locale-sub-projects th,
table.locale-sub-projects td {
    border: 1px solid #c7e8af !important;
}
.glossary-description,
.project-description {
    margin-bottom: 1em;
}
.recent-projects li {
    padding: 8px;
    display: list-item;
    width: auto;
}
.project-actions.hide-if-js li {
    width: unset;
}
a.bubble,
.bubble {
    padding: 0.3em 0.2em 0.3em 0.2em !important;
    float: right;
    font-size: 11px;
    font-weight: 400;
}
.editor .strings {
    width: 50% !important;
}

.editor .meta li {
    display: unset;
    width: auto;
    padding: 10px !important;
}
.editor .meta dl {
    margin: 1em 0em;
    font-size: 90%;
}
.actionlist li {
    display: inline-table;
    width: auto;
    padding: 15px !important;
}

.gp-bar {
    background: #23292d !important;
    border-bottom-style: solid;
    border-radius: 25px;
    padding: 5px 1em;
    box-shadow: 0 3px 8px rgb(100 100 100 / 30%);
}
.gp-bar nav a {
    font-weight: 700;
    padding: 1em 1.5em !important;
}

.gp-bar nav a:hover {
    transition-duration: 0.2s;
    transition-timing-function: linear;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.117647) 0 1px 3px;
    color: #b8b8b8 !important;
    -webkit-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    -ms-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.gp-bar h1 {
    line-height: 2.5em;
}

.user-card .user-avatar {
    float: left;
    margin: 0 12px 0 0;
    width: 100px;
    height: 100px;
    margin-top: 0;
    padding: 5px;
    border: 1px solid #e7e7e7;
    -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.tablesorter-glotpress tr.odd td {
    padding: 1em !important;
}

#legend {
    margin-top: 1.5em;
}
.paging {
    margin-top: 1em;
}

#gp-footer {
    text-align: right !important;
    font-size: 90% !important;
    background-color: #fff !important;
    padding-top: 2.5em !important;
    color: #9e9e9e;
}

p#gp-footer a {
    color: #a9a9a9 !important;
    text-decoration: none !important;
}

/* 新增：支持更新后的模板结构 */

/* 页面标题样式优化 */
.gp-content .page-title {
    margin-bottom: 1.5em;
    padding: 1em;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 项目列表容器样式 */
.gp-content .projects-list {
    background-color: #fff;
    border-radius: 5px;
    padding: 1em;
    margin-bottom: 2em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 优化项目描述样式 */
.project-description {
    background-color: #f8f9fa;
    padding: 1em;
    border-radius: 3px;
    margin: 1em 0;
    border-left: 4px solid #c7e8af;
    font-size: 14px;
    line-height: 1.6;
}


/* 语言选择器样式 */
.gp-content select {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.5em;
    font-size: 14px;
    background-color: #fff;
    transition: border-color 0.2s ease;
}

.gp-content select:focus {
    border-color: #d93d2e;
    outline: none;
    box-shadow: 0 0 0 2px rgba(217, 61, 46, 0.1);
}
.gp-content input[type="checkbox"],
.gp-content input[type="radio"] {
    height: 0.75rem;
    width: 0.75rem;
}
/* 项目列表三栏横排布局 */
#projects dl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5em;
    margin: 2em 0;
    justify-content: space-between;
    align-content: start;
    width: 100%;
}

#projects dt {
    background-color: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 1em;
    margin: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#projects dt:hover {
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    background: #fbf8e3;
    border: 1px solid #e7dd71;
}

#projects dt a {
    font-size: 13px;
    font-weight: 400;
    color: #21759b;
    text-decoration: none;
    line-height: 1.3;
    display: block;
}

#projects dt a:hover {
    color: #d93d2e;
}

#projects dd {
    display: none; /* 隐藏描述，因为在三栏布局中空间有限 */
}

/* 项目状态标签 */
#projects dt .inactive.bubble {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #f56565;
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 12px;
    font-weight: 500;
}

/* 编辑和删除按钮样式 */
#projects dt .button.is-small {
    display: inline-block;
    padding: 6px 8px;
    font-size: 11px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
    text-decoration: none;
    margin-right: 4px;
    margin-top: 0;
    transition: all 0.2s ease;
}

#projects dt .button.is-small:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #495057;
}

/* 项目名称和按钮布局 - 类似project-stats-status-container */
.project-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
}

/* 项目名称链接占据剩余空间 */
.project-name a:first-child {
    flex: 1;
    min-width: 0;
}

/* 编辑删除按钮容器 */
.project-name .button.is-small {
    flex-shrink: 0;
    margin-left: 4px;
}

/* 第一个按钮不需要左边距 */
.project-name .button.is-small:first-of-type {
    margin-left: 0;
}

/* 项目标题和图标布局 */
.project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    min-height: 32px;
    width: 100%;
}

.project-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
}

.project-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-top: 2px;
}

.project-icon .site-icon {
    width: 24px;
    height: 24px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.project-icon .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: #666;
    line-height: 1;
}

.project-name {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    font-weight: 500;
    font-size: 14px;
}

/* 响应式优化 */
@media screen and (max-width: 1024px) {
    #projects dl {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2em;
    }
}

@media screen and (max-width: 768px) {
    #projects dl {
        grid-template-columns: 1fr;
        gap: 1em;
    }

    #projects dt {
        min-height: 100px;
        padding: 1em;
    }

    .gp-content li {
        width: 48% !important;
        margin-bottom: 1em;
    }
}

@media screen and (max-width: 480px) {
    .gp-content li {
        width: 100% !important;
        display: block;
    }

    .gp-bar nav {
        text-align: center;
    }

    .gp-bar nav a {
        display: inline-block;
        margin: 0.2em;
        padding: 0.5em 1em !important;
    }
}

/* 版权信息样式优化 */
.site-info {
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    margin-top: 2em;
    border-radius: 0 0 15px 15px;
}

.site-info a {
    color: #d93d2e !important;
    font-weight: 500;
}

.site-info a:hover {
    color: #b8321f !important;
}

/* 通知和错误消息样式 */
.gp-content .notice {
    border-radius: 5px !important;
    border-left: 4px solid #00a0d2 !important;
    background-color: #f0f8ff !important;
}

/* 翻译进度条样式 - 参考 translation-stats 插件 */
.progress-bar-container {
    margin: 0.6em 0 0.4em 0;
    position: relative;
    width: 100%;
    max-width: 200px;
}

.progress-bar {
    background-color: #f5f5f5;
    border-radius: 3px;
    overflow: hidden;
    height: 8px;
    position: relative;
    border: 1px solid #ddd;
    transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
    width: 100%;
}

.progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
    position: relative;
    min-width: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 基于百分比的颜色系统 - 参考 translation-stats */
.progress-fill.percent100 {
    background-color: #46b450;
}
.progress-fill.percent90 {
    background-color: #6bc373;
}
.progress-fill.percent80 {
    background-color: #90d296;
}
.progress-fill.percent70 {
    background-color: #b5e1b9;
}
.progress-fill.percent60 {
    background-color: #c7e8ca;
}
.progress-fill.percent50 {
    background-color: #ffe399;
}
.progress-fill.percent40 {
    background-color: #fbc5a9;
}
.progress-fill.percent30 {
    background-color: #f1adad;
}
.progress-fill.percent20 {
    background-color: #ea8484;
}
.progress-fill.percent10 {
    background-color: #e35b5b;
}
.progress-fill.percent0 {
    background-color: #dc3232;
}

.progress-text {
    font-size: 10px;
    font-weight: 600;
    color: #000;
    margin-top: 2px;
    display: block;
    line-height: 1.2;
}

/* 悬停效果 */
#projects dt:hover .progress-fill {
    opacity: 0.9;
}

/* 翻译统计信息样式 */
.translation-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    margin-top: 0.3em;
    font-size: 10px;
    line-height: 1.2;
}

.stat-item {
    padding: 1px 5px;
    border-radius: 10px;
    font-weight: 500;
    white-space: nowrap;
    font-size: 9px;
}

.stat-item.translated {
    background-color: #e8f5e8;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.stat-item.waiting {
    background-color: #fff3e0;
    color: #f57c00;
    border: 1px solid #ffcc02;
}

.stat-item.fuzzy {
    background-color: #fce4ec;
    color: #c2185b;
    border: 1px solid #f8bbd9;
}

.stat-item.untranslated {
    background-color: #f3e5f5;
    color: #7b1fa2;
    border: 1px solid #e1bee7;
}

.stat-item .count {
    font-weight: 600;
    margin-left: 2px;
}

/* 项目状态标签增强 */
#projects dt .project-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.3em;
    padding-top: 0.3em;
}

#projects dt .project-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    flex: 1;
}

/* 响应式优化 - 翻译统计 */
@media screen and (max-width: 768px) {
    .translation-stats {
        gap: 0.3em;
    }

    .stat-item {
        font-size: 10px;
        padding: 1px 4px;
    }

    .progress-text {
        font-size: 10px;
    }

    .translation-progress {
        height: 16px;
    }
}

@media screen and (max-width: 480px) {
    .translation-stats {
        flex-direction: column;
        gap: 0.2em;
    }

    .stat-item {
        justify-content: center;
        width: 100%;
    }
}

.gp-content .error {
    border-radius: 5px !important;
    border-left: 4px solid #dc3232 !important;
    background-color: #fff5f5 !important;
}

/* 项目统计信息和状态标签平排布局 */
.project-stats-status-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin-top: 0.5em;
}

.project-stats {
    flex: 1;
    min-width: 0;
}

.project-status {
    flex-shrink: 0;
}

.project-stats .progress-bar-container {
    margin: 0;
    width: 100%;
    max-width: 180px;
}

.project-stats .progress-text {
    margin-top: 3px;
    font-size: 10px;
}

/* 三栏布局两端对齐优化 */
#projects dl {
    justify-items: stretch;
    align-items: stretch;
}

#projects dt {
    width: 100%;
    box-sizing: border-box;
}

/* 确保最后一行的项目也能正确对齐 */
#projects dt:nth-child(3n + 1):nth-last-child(-n + 3),
#projects dt:nth-child(3n + 1):nth-last-child(-n + 3) ~ dt {
    justify-self: stretch;
}

/* 当只有一个或两个项目在最后一行时的特殊处理 */
#projects dt:nth-child(3n + 1):nth-last-child(1) {
    justify-self: start;
}

#projects dt:nth-child(3n + 1):nth-last-child(2),
#projects dt:nth-child(3n + 1):nth-last-child(2) ~ dt {
    justify-self: start;
}