/* ============================================================
 * layout.css
 * 整体布局骨架：顶部导航 / 侧边栏 / 双栏布局 / 响应式
 * 依赖 common.css 的 Design Token
 * ============================================================ */

/* ============================================================
 * 1) Topbar 顶部导航
 * ============================================================ */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--topbar-h);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    /* 弱阴影制造层次感，避免与内容粘连 */
    box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
}
.topbar-inner {
    height: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

/* —— 品牌区 —— */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
    font-size: var(--fs-md);
    transition: opacity var(--t);
}
.brand:hover { opacity: .85; color: var(--color-text); }

.brand-logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}
.brand-mark {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    flex-shrink: 0;
    /* 内置极简 logo：主色方块 + 白色圆点（不依赖图片） */
    background:
        radial-gradient(circle at 50% 50%, #fff 0 5px, transparent 6px),
        linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active) 100%);
}
.brand-name {
    letter-spacing: .01em;
}

/* —— 顶部导航链接 —— */
.topbar-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.nav-link {
    color: var(--color-text-2);
    font-size: var(--fs-sm);
    text-decoration: none;
    padding: 6px 4px;
    border-radius: var(--radius-sm);
    transition: color var(--t);
    position: relative;
}
.nav-link:hover {
    color: var(--color-primary);
}
.nav-link.is-active {
    color: var(--color-primary);
}
.nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: -8px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
}
.nav-user {
    font-size: var(--fs-sm);
    color: var(--color-text-3);
    padding-left: var(--space-3);
    border-left: 1px solid var(--color-divider);
}

/* ============================================================
 * 2) Layout 双栏（侧边栏 + 主内容）
 * 用于用户/打手/部门/管理员中心
 * ============================================================ */
.layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    gap: 0;
    align-items: flex-start;
    min-height: calc(100vh - var(--topbar-h));
}

/* —— 侧边栏 —— */
.sidebar {
    position: sticky;
    top: var(--topbar-h);
    align-self: stretch;
    height: calc(100vh - var(--topbar-h));
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    padding: var(--space-5) var(--space-3);
    overflow-y: auto;
}
.sidebar-title {
    padding: 0 12px;
    font-size: var(--fs-xs);
    color: var(--color-text-4);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: var(--space-2);
}
.sidebar-sub {
    padding: 0 12px;
    margin-bottom: var(--space-3);
}

/* 侧边栏分组标题（管理后台多个分组） */
.side-group {
    margin: var(--space-4) 12px var(--space-2);
    font-size: var(--fs-xs);
    color: var(--color-text-4);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* 侧边导航链接 */
.side-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.side-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 12px;
    color: var(--color-text-2);
    font-size: var(--fs-sm);
    text-decoration: none;
    border-radius: var(--radius);
    transition:
        background-color var(--t),
        color var(--t);
    position: relative;
}
.side-link:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
}
.side-link.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 500;
}
.side-link.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--color-primary);
    border-radius: 0 3px 3px 0;
}

/* —— 主内容区 —— */
.main {
    min-width: 0;          /* 防止 grid 子项撑爆 */
    padding: var(--space-6) var(--space-8);
    max-width: 100%;
}

/* main 内的页头 */
.main .page-head {
    padding-top: 0;
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-2);
}

/* ============================================================
 * 3) Auth 页（登录/注册 居中卡片）
 * ============================================================ */
.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 0%, rgba(74,111,165,.05) 0, transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(74,111,165,.04) 0, transparent 40%),
        var(--color-bg);
}
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
}
.auth-header {
    text-align: center;
    margin-bottom: var(--space-6);
}
.auth-title {
    font-size: var(--fs-2xl);
    font-weight: 600;
    margin: 0 0 var(--space-1);
    letter-spacing: -.01em;
}
.auth-sub {
    color: var(--color-text-3);
    font-size: var(--fs-sm);
}
.auth-form .field {
    margin-bottom: var(--space-4);
}
.auth-footer {
    text-align: center;
    margin-top: var(--space-5);
    color: var(--color-text-3);
    font-size: var(--fs-sm);
}
.auth-footer .link { margin: 0 4px; }

/* ============================================================
 * 4) 响应式断点
 *    桌面（>= 1024）：双栏 220 + main
 *    平板（768–1023）：双栏 180 + main，侧栏窄一点
 *    手机（< 768）：单栏 + 侧栏变成顶部水平 chip 滚动
 * ============================================================ */

/* —— 平板 —— */
@media (max-width: 1023px) {
    :root {
        --sidebar-w: 180px;
    }
    .main { padding: var(--space-5) var(--space-5); }
    .topbar-inner { padding: 0 var(--space-5); }
    .container { padding: 0 var(--space-5); }
}

/* —— 手机：侧栏变水平横滑导航 —— */
@media (max-width: 767px) {
    .layout {
        display: block;
    }
    .sidebar {
        position: static;
        height: auto;
        width: 100%;
        padding: var(--space-3) var(--space-4);
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
        overflow-x: auto;
        overflow-y: hidden;
    }
    .sidebar-title,
    .sidebar-sub,
    .side-group {
        display: none;
    }
    .side-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--space-2);
        white-space: nowrap;
    }
    .side-link {
        flex-shrink: 0;
        padding: 8px 14px;
        border-radius: var(--radius-pill);
        background: var(--color-bg-alt);
    }
    .side-link.is-active {
        background: var(--color-primary);
        color: #fff;
    }
    .side-link.is-active::before {
        display: none;
    }
    .side-link .badge-dot {
        margin-left: 6px;
    }

    .main { padding: var(--space-5) var(--space-4); }

    /* 顶部导航在手机上变紧凑 */
    .topbar-inner { padding: 0 var(--space-4); gap: var(--space-2); }
    .topbar-nav { gap: var(--space-2); }
    .nav-user { display: none; }
    .brand-name { font-size: var(--fs-sm); }
}

/* —— 超窄屏（< 480）：隐藏纯文字辅助 —— */
@media (max-width: 479px) {
    .nav-link {
        font-size: var(--fs-xs);
    }
    .page-title { font-size: var(--fs-xl); }
    .hero { padding: var(--space-10) 0 var(--space-8); }
    .hero-title { font-size: var(--fs-2xl); }
}