/* LeoIndex 主样式表 - 胶水样式
 *
 * 在 TRAE Work Design System (traework.css) 基础上补充项目特有样式。
 * DS 组件（ds-card/ds-form-field/ds-empty/ds-btn/ds-tag 等）直接使用，
 * 本文件只保留 DS 未提供的布局与项目特有样式。
 */

/* ===== 基础重置 ===== */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    font-family: var(--font-family-default);
    font-size: var(--body-base-font-size);
    line-height: var(--body-base-line-height);
    color: var(--text-default);
    background-color: var(--bg-base-default);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ===== App Shell：侧栏 + 工作区 二栏布局（flex，侧栏折叠自动收窄） ===== */
.app-shell {
    display: flex;
    min-height: 100vh;
    background: var(--bg-base-default);
}

.app-shell > .ds-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: start;
    flex: 0 0 auto;  /* 侧栏自定 width，折叠 240→64 时 grid 列跟着收窄 */
}

.workspace {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/* ===== DS 组件轻量扩展 ===== */
.ds-sidebar__group-label {
    padding: var(--spacer-12) var(--spacer-12) var(--spacer-4);
    color: var(--text-tertiary);
    font-family: var(--heading-2xs-font-family);
    font-size: var(--heading-2xs-font-size);
    line-height: var(--heading-2xs-line-height);
    font-weight: var(--heading-2xs-font-weight);
    letter-spacing: var(--heading-2xs-letter-spacing);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-sidebar--collapsed .ds-sidebar__group-label {
    display: none;
}

.ds-sidebar__footer .ds-sidebar__brand-mark {
    flex: 0 0 auto;
}

.ds-navbar__title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--heading-sm-font-family);
    font-size: var(--heading-sm-font-size);
    line-height: var(--heading-sm-line-height);
    font-weight: var(--heading-sm-font-weight);
    color: var(--text-default);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-navbar__breadcrumb {
    color: var(--text-tertiary);
    font-size: var(--body-sm-font-size);
    font-weight: var(--font-weight-default);
    flex: 0 0 auto;
}

.ds-navbar__brand:only-child {
    margin-right: var(--spacer-16);
}

/* ===== Topbar：实色 + sticky + 边缘对齐 ===== */
.ds-navbar {
    padding: 0 var(--spacer-32);
    background: var(--bg-base-default);  /* 实色，不用 secondary 避免漂浮感 */
}

.ds-command-bar {
    position: sticky;
    top: 0;
    z-index: 1020;
    padding: 0 var(--spacer-32);
    background: var(--bg-base-default);  /* 实色覆盖 DS 默认 --bg-base-secondary */
}

/* ===== 侧栏折叠修正 ===== */
/* 折叠时 toggle 箭头翻转 ‹ → › */
.ds-sidebar--collapsed .ds-sidebar__toggle {
    transform: rotate(180deg);
}

/* 折叠时隐藏 brand 释放空间，让 toggle 按钮可点击（64px 内容区仅够 toggle） */
.ds-sidebar--collapsed .ds-sidebar__brand {
    display: none;
}

/* 折叠时 toggle 居中 */
.ds-sidebar--collapsed .ds-sidebar__header {
    justify-content: center;
    padding: 0;
}

/* 登出按钮重置 */
.ds-sidebar__item--button {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
}

.ds-sidebar__logout-form {
    display: flex;
    flex: 1 1 auto;
}

/* 移动端抽屉中隐藏侧栏 header（drawer 有自己的 header） */
.ds-drawer .ds-sidebar__header {
    display: none;
}

.ds-command-bar__search {
    max-width: 360px;
}

.ds-command-bar__btn svg,
.ds-navbar__actions .ds-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}

.ds-navbar__actions .ds-btn {
    height: 32px;
    padding: 0 var(--spacer-12);
}

/* ===== Main 主区 ===== */
.main {
    flex: 1 1 auto;
    padding: var(--spacer-24) var(--spacer-32) var(--spacer-40);
    width: 100%;
    min-width: 0;
}

/* ===== 工具卡片（前台首页） ===== */
.tool-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-12);
    padding: var(--spacer-20);
    background: var(--bg-base-secondary);
    border: 1px solid var(--border-neutral-l1);
    border-radius: var(--radius-12);
    color: var(--text-default);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    min-height: 0;
}

.tool-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-neutral-l2);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--text-default) 12%, transparent);
    background: var(--bg-base-default);
}

.tool-card__head {
    display: flex;
    align-items: center;
    gap: var(--spacer-12);
}

.tool-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-10);
    background: var(--bg-brand-popup);
    color: var(--text-brand);
    font-family: var(--font-family-heading);
    font-size: var(--heading-sm-font-size);
    font-weight: var(--font-weight-strong);
    line-height: 1;
    flex: 0 0 auto;
    overflow: hidden;
}

.tool-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tool-card__meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacer-2);
}

.tool-card__title {
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: var(--heading-xs-font-size);
    line-height: var(--heading-xs-line-height);
    font-weight: var(--font-weight-strong);
    color: var(--text-default);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-card__cat {
    font-size: var(--body-sm-font-size);
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-card__external {
    flex: 0 0 auto;
    color: var(--text-tertiary);
    font-size: var(--body-base-font-size);
    transition: color 0.12s ease;
}

.tool-card:hover .tool-card__external {
    color: var(--text-brand);
}

.tool-card__desc {
    margin: 0;
    font-size: var(--body-base-font-size);
    line-height: var(--body-base-line-height);
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(var(--body-base-line-height) * 2);
}

.tool-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacer-6);
    margin-top: auto;
}

/* ===== 移动端导航抽屉：使用 DS .ds-drawer--left，无需自定义样式 ===== */

/* ===== Auth 卡片（login/setup 页） ===== */
.auth-card {
    width: 100%;
    max-width: 420px;
    padding: var(--spacer-32);
}

.auth-card__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacer-8);
    margin-bottom: var(--spacer-24);
    text-align: center;
}

.auth-card__logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-10);
    object-fit: cover;
}

.auth-card__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-10);
    background: var(--bg-brand-popup);
    color: var(--text-brand);
    font-family: var(--font-family-heading);
    font-size: var(--heading-md-font-size);
    font-weight: var(--font-weight-strong);
    line-height: 1;
}

.auth-card__footer {
    margin-top: var(--spacer-16);
    text-align: center;
}

/* ===== Flash 消息（admin.js AJAX 回调） ===== */
.ds-flash-messages {
    position: fixed;
    top: var(--spacer-16);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    pointer-events: none;
}

.ds-flash {
    padding: var(--spacer-10) var(--spacer-16);
    border-radius: var(--radius-8);
    font-size: var(--body-base-font-size);
    margin-bottom: var(--spacer-8);
    background: var(--bg-brand);
    color: var(--text-onbrand);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--text-default) 12%, transparent);
    pointer-events: auto;
}

/* ===== 错误详情（500 页开发模式） ===== */
.error-detail {
    margin-top: var(--spacer-16);
    width: 100%;
    text-align: left;
    border-top: 1px solid var(--border-neutral-l1);
    padding-top: var(--spacer-12);
}

.error-detail summary {
    cursor: pointer;
    font-size: var(--body-sm-font-size);
    color: var(--text-tertiary);
    user-select: none;
}

.error-traceback {
    margin-top: var(--spacer-8);
    padding: var(--spacer-12);
    background: var(--bg-overlay-l1);
    border: 1px solid var(--border-neutral-l1);
    border-radius: var(--radius-8);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 400px;
    overflow-y: auto;
}

/* ===== 内联表单（删除按钮内联） ===== */
.inline-form {
    display: inline;
}

/* ===== 汉堡菜单按钮：仅移动端可见 ===== */
.ds-command-bar__btn[data-ds-drawer-trigger],
.ds-navbar .mobile-menu {
    display: none;
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .app-shell {
        display: block;  /* 移动端单列，侧栏隐藏 */
    }

    .app-shell > .ds-sidebar {
        display: none;
    }

    /* 移动端显示汉堡按钮 */
    .ds-command-bar__btn[data-ds-drawer-trigger],
    .ds-navbar .mobile-menu {
        display: inline-flex;
    }

    .ds-navbar,
    .ds-command-bar {
        padding: 0 var(--spacer-16);  /* 与移动端 main 16px 对齐 */
    }

    .main {
        padding: var(--spacer-16) var(--spacer-16) var(--spacer-32);
    }

    .ds-command-bar__search,
    .ds-navbar__title {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .ds-navbar,
    .ds-command-bar {
        padding: 0 var(--spacer-12);  /* 与移动端 main 12px 对齐 */
    }

    .main {
        padding: var(--spacer-12) var(--spacer-12) var(--spacer-24);
    }
}