/* TealPeach 前台自定义样式（tp- 前缀；只补 boblog-ui 没有的） */

/* 浮动导航项：定宽不被长文本撑宽，超长单行截断显示省略号（如「栏目：很长的名字...」）。 */
.tp-sidenav a.boblog-sidebar-link {
    box-sizing: border-box;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 右侧浮动快捷导航：区分 hover 与 active 焦点色。
   boblog-sidebar-link 的 hover 与 active 默认同为浅蓝(--boblog-blue-wash)，无法区分；
   此处把 hover 改为浅灰，active 仍保留库的浅蓝+左蓝条+蓝字。 */
.tp-sidenav a.boblog-sidebar-link:hover {
    background-color: #eee;
    color: var(--boblog-text, #1A1A1A);
}

/* active(当前焦点项)保持库样式，且优先级高于上面的 hover：移上去也维持浅蓝焦点态 */
.tp-sidenav a.boblog-sidebar-link.boblog-sidebar-active:hover {
    background-color: var(--boblog-blue-wash, #F4FBFF);
    color: var(--boblog-blue-accent, #0D80BD);
}

/* ===== 前台相册（tp-photo-*）：只补 boblog-ui 没有的角标 / 工具条 / 灯箱 / 侧边栏布局；
   密度三档直接用 boblog-ui 既有 boblog-gallery-compact / boblog-gallery-loose，不自造。 ===== */

/* 工具条：标签 chips + 密度 + 边栏开关（一行排布，右侧靠边） */
.tp-photo-toolbar {
    background: #F5FBFE;
    border: 1px solid #A9DBF6;
    padding: 8px 12px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tp-photo-toolbar-label {
    color: #0D80BD;
    font-weight: bold;
    font-size: 11px;
}

.tp-photo-toolbar-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 标签 / 密度 chip（选中态加 -active） */
.tp-photo-chip {
    font-size: 11px;
    padding: 2px 8px;
    border: 1px solid #9EC9FF;
    background: #FFFFFF;
    color: #0D80BD;
    text-decoration: none;
}

.tp-photo-chip:hover {
    text-decoration: none;
    border-color: #2E93C9;
}

.tp-photo-chip-active {
    background: #0D6EAA;
    border-color: #0D6EAA;
    color: #FFFFFF;
}

/* 主体 + 侧边栏两栏布局（边栏隐藏时主体自动占满） */
.tp-photo-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.tp-photo-main {
    flex: 1;
    min-width: 0;
}

.tp-photo-sidebar {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 相册卡片：封面容器 + 覆盖标题条 */
/* 卡片用纵向 flex：gallery 是 grid 且 align-items 默认 stretch，整行会拉齐到最高卡片
   （某卡标签换行即变高），block 布局下矮卡底部会空出一截。改 flex + meta 行 flex:1 吃掉多余高度。 */
.tp-photo-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.tp-photo-card:hover {
    text-decoration: none;
}

/* overflow:hidden 是硬兜底：boblog-ui 的 .boblog-gallery-item img 给了固定 height（标准 180px /
   compact 120px / loose 240px），与本文件的 height:100% 权重同为 (0,1,1)，胜负只取决于样式表加载顺序。
   一旦 boblog-ui 那条赢，图片就会超出本盒 158px 并向下盖住 meta 行的日期 / 标签。裁掉即与胜负无关。 */
.tp-photo-card-cover-box {
    height: 158px;
    background: #f2f5f8;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #DDE8F0;
    flex: 0 0 auto;
}

/* 提权到 (0,2,1) 稳定压过 .boblog-gallery-item img 的固定高度（含 compact / loose 两档），不用 !important */
.tp-photo-card .tp-photo-card-cover-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tp-photo-card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(13, 110, 170, .82);
    color: #FFFFFF;
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    font-weight: bold;
}

/* flex:1 吃掉整行拉齐多出来的高度（align-content:flex-start 保证内容仍靠上，不被垂直居中撑散） */
.tp-photo-card-meta {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    align-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.tp-photo-card-date {
    color: #999999;
    font-size: 11px;
}

/* 标签 chip（卡片 / 后台表格共用视觉） */
.tp-photo-tag-chip {
    font-size: 11px;
    background: #F4FBFF;
    border: 1px solid #D3E7FC;
    color: #0D80BD;
    padding: 1px 6px;
    white-space: nowrap;
}

/* 权限角标（卡片右上角；四档配色同设计稿 :227-232） */
.tp-photo-card-perm {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 11px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #999999;
    color: #333333;
}

.tp-photo-perm-public {
    border-color: #3C8C30;
    color: #3C8C30;
}

.tp-photo-perm-login {
    border-color: #1677B5;
    color: #1677B5;
}

.tp-photo-perm-password {
    border-color: #D07020;
    color: #D07020;
}

.tp-photo-perm-private {
    border-color: #CC3333;
    color: #CC3333;
}

/* 水印角标（相片卡片右下角） */
.tp-photo-card-wm {
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: 10px;
    color: rgba(255, 255, 255, .9);
    background: rgba(0, 0, 0, .4);
    padding: 1px 5px;
}

/* 灯箱（boblog-ui 无同款；遮罩 + 面板 + 上一张/下一张） */
.tp-photo-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tp-photo-lightbox-panel {
    width: min(860px, 86vw);
    background: #FFFFFF;
    border: 1px solid #9EC9FF;
}

.tp-photo-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #DDE8F0;
    font-weight: bold;
    color: #0D6EAA;
}

.tp-photo-lightbox-body {
    height: 70vh;
    background: #f2f5f8;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* width/height 而非 max-*：max-* 只限制不放大，小图会按原始像素显示成一个点。 */
.tp-photo-lightbox-body img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .12s ease-out;
}

.tp-photo-lightbox-zoom {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    margin-right: 12px;
    font-size: 12px;
    color: #6b7785;
}

.tp-photo-lightbox-wm {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, .92);
    background: rgba(0, 0, 0, .4);
    padding: 2px 8px;
}

.tp-photo-lightbox-desc {
    padding: 8px 12px;
    border-top: 1px solid #DDE8F0;
    color: #555555;
    background: #F5FBFE;
}

.tp-photo-lightbox-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid #DDE8F0;
}

.tp-photo-lightbox-pos {
    font-size: 11px;
    color: #999999;
}