/* ============================================================
   住宿申请审批系统 · 外壳层（顶栏 / 侧栏 / 主区）
   ------------------------------------------------------------
   规格逐条对齐「智慧公寓管理系统」的 app.css，保证两套系统观感一致：
   - 顶栏：深蓝渐变、固定、高 60px；桌面端左侧让出侧栏宽度
   - 侧栏：固定 232px；移动端抽屉式（900px 断点）
   - 主区：max-width 1440px，桌面端左内边距让出侧栏
   ============================================================ */

/* ============================================================
   顶栏
   ============================================================ */

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    background: linear-gradient(100deg, #0E4373 0%, #15528F 48%, #1E6FBE 100%);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    z-index: 30;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 6px 18px rgba(12, 58, 102, .18);
}

.topbar .brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    min-width: 0;
}

.topbar .brand:hover {
    color: #fff;
}

.topbar .mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex: none;
}

.topbar .brand-text {
    min-width: 0;
    line-height: 1.25;
}

.topbar .brand-text strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar .brand-text span {
    display: block;
    font-size: 11px;
    opacity: .74;
    white-space: nowrap;
    letter-spacing: .6px;
}

.topbar .spacer {
    flex: 1;
    min-width: 0;
}

.topbar .who {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px 5px 5px;
    border-radius: 40px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .14);
}

.topbar .who .avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex: none;
}

.topbar .who .who-text {
    line-height: 1.2;
    min-width: 0;
}

.topbar .who .who-text b {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.topbar .who .who-text i {
    display: block;
    font-style: normal;
    font-size: 10.5px;
    opacity: .72;
    white-space: nowrap;
}

/* 顶栏按钮：深色底上用的浅色描边款 */
.topbar .btn {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}

.topbar .btn:hover {
    background: rgba(255, 255, 255, .26);
    border-color: rgba(255, 255, 255, .32);
    color: #fff;
}

.topbar .btn.ghost {
    background: transparent;
    border-color: transparent;
}

.topbar .btn.ghost:hover {
    background: rgba(255, 255, 255, .16);
}

/* 顶栏通知铃铛（第 4 步接入真实数据，此处先给样式与角标） */
.topbar .bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
    flex: none;
}

.topbar .bell:hover {
    background: rgba(255, 255, 255, .24);
    color: #fff;
}

.topbar .bell .icon {
    font-size: 17px;
}

.topbar .bell .dot-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--danger);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    border: 2px solid #15528F;
}

.menu-btn {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    padding: 0 7px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 9px;
    cursor: pointer;
    flex: none;
}

.menu-btn i {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

.menu-btn i:nth-child(2) {
    width: 70%;
}

/* ============================================================
   侧边栏
   ============================================================ */

.sidebar {
    position: fixed;
    top: var(--header-h);
    bottom: 0;
    left: 0;
    width: var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--line);
    overflow-y: auto;
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
    z-index: 25;
}

.sidebar.open {
    transform: translateX(0);
    box-shadow: var(--sh-3);
}

.sidebar .group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ink-4);
    padding: 16px 11px 7px;
    letter-spacing: 1.1px;
}

.sidebar .group::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.sidebar a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: var(--r-sm);
    color: var(--ink-2);
    font-size: 13.5px;
    margin-bottom: 1px;
    transition: background .14s, color .14s;
}

.sidebar a .icon {
    font-size: 16px;
    color: var(--ink-4);
    transition: color .14s;
}

.sidebar a:hover {
    background: var(--brand-50);
    color: var(--brand-700);
}

.sidebar a:hover .icon {
    color: var(--brand-500);
}

.sidebar a.is-active {
    background: var(--brand-100);
    color: var(--brand-800);
    font-weight: 600;
}

.sidebar a.is-active .icon {
    color: var(--brand-600);
}

.sidebar a.is-active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--brand-600);
}

.sidebar a .count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    background: var(--surface-3);
    color: var(--ink-3);
    border-radius: 999px;
    padding: 1px 8px;
}

.sidebar a.is-active .count {
    background: #fff;
    color: var(--brand-700);
}

.sidebar .side-foot {
    margin: 18px 2px 0;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: var(--ink-4);
    line-height: 1.7;
}

.sidebar .side-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 12px 0 0;
    padding: 9px 11px;
    border-radius: var(--r-sm);
    border: 1px solid #F0C8C8;
    background: var(--surface);
    color: var(--danger);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s, border-color .14s;
}

.sidebar .side-logout:hover {
    background: var(--danger-soft);
    border-color: #E5B0B0;
}

.sidebar .side-logout .icon {
    font-size: 16px;
}

.backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 30, 50, .42);
    backdrop-filter: blur(2px);
    z-index: 20;
    display: none;
}

.backdrop.show {
    display: block;
}

/* ============================================================
   主区域与页头
   ============================================================ */

/* 兼容既有页面的 <div class="container">：直接按主区规格渲染 */
.main,
.container {
    padding: calc(var(--header-h) + 18px) 14px 56px;
    max-width: 1440px;
    margin: 0 auto;
}

.container.wide {
    max-width: 1440px;
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.page-head h1 {
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -.2px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.page-head h1 .icon {
    font-size: 20px;
    color: var(--brand-600);
}

.page-head .sub {
    font-size: 12.5px;
    color: var(--ink-3);
}

.page-head .spacer {
    flex: 1;
    min-width: 0;
}

.crumb {
    font-size: 12.5px;
    color: var(--ink-3);
    margin-bottom: 4px;
}

/* ============================================================
   响应式：900px 以上为桌面端（侧栏常驻），以下为抽屉
   ============================================================ */

@media (min-width: 900px) {
    .topbar {
        padding-left: calc(var(--sidebar-w) + 18px);
    }

    .menu-btn {
        display: none;
    }

    .sidebar {
        transform: translateX(0);
    }

    .backdrop {
        display: none !important;
    }

    .main,
    .container {
        padding-left: calc(var(--sidebar-w) + 18px);
        padding-right: 26px;
    }
}

/* ============================================================
   顶栏窄屏适配：保证「退出」等操作按钮始终可见、可点
   ------------------------------------------------------------
   顶栏元素从左到右：菜单钮 / 品牌 / spacer / (extra) / 身份胶囊 / 返回 / 改口令 / 退出。
   窄屏下把次要按钮文字收起为纯图标、身份胶囊精简，避免按钮被挤出可视区。
   ============================================================ */

/* 中窄屏：收起按钮文字，只留图标 */
@media (max-width: 900px) {
    .topbar {
        gap: 8px;
        padding: 0 10px;
    }

    .topbar .btn .nowrap,
    .topbar .who-text i {
        display: none;
    }

    .topbar .btn {
        padding: 6px 9px;
    }

    .topbar .who {
        padding: 4px 8px 4px 4px;
    }
}

/* 小屏：进一步精简，品牌只留图标、身份胶囊只留头像 */
@media (max-width: 560px) {
    /* 品牌只收起副标题，保留系统名——只剩一个图标时用户看不出自己在哪套系统 */
    .topbar .brand {
        gap: 8px;
    }

    .topbar .brand-text span {
        display: none;
    }

    .topbar .brand-text strong {
        font-size: 13.5px;
        max-width: 8.6em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 身份胶囊收成一个小头像，姓名/角色文字隐藏（点侧栏可见完整身份） */
    .topbar .who-text {
        display: none;
    }

    .topbar .who {
        padding: 3px;
    }

    .topbar .who .avatar {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    /* 次要按钮（返回智慧公寓/改口令）在小屏隐藏，精简到只剩退出 */
    .topbar #btnBackHome,
    .topbar a[href="change-password.html"] {
        display: none;
    }

    /* 退出按钮保留一个可辨识的文字或更大触达区，避免「找不到退出」 */
    .topbar .btn .icon {
        font-size: 17px;
    }
}

/* ============================================================
   手机端整体简化：布局纵向化、信息收紧、操作按钮换行通栏
   ------------------------------------------------------------
   目标：小屏一屏看得清、点的准，去掉桌面端的多列横向信息。
   ============================================================ */
@media (max-width: 560px) {
    /* 必须保留顶栏高度：顶栏是 fixed，若这里只写 12px 会把首屏内容压到顶栏底下 */
    .container,
    .main {
        padding: calc(var(--header-h) + 12px) 10px 28px;
    }

    /* 页头：标题缩小，副标题（负责范围说明）直接收起 */
    .page-title {
        font-size: 17px;
    }

    .page-sub {
        display: none;
    }

    /* 页签：横向滑动条（tab 多时滑动，少时自然铺开） */
    .tabs {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* 右侧渐隐，提示还能继续横向滑动 */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
    }

    .tabs::-webkit-scrollbar {
        display: none;
    }

    .tabs .tab {
        flex: 0 0 auto;
        padding: 8px 13px;
        font-size: 13px;
    }

    /* 列表卡片：内容与操作按钮纵向堆叠，按钮通栏铺满 */
    .item {
        flex-direction: column;
        gap: 10px;
        padding: 13px 14px;
    }

    .item-actions {
        width: 100%;
        gap: 8px;
    }

    .item-actions .btn {
        flex: 1;
        justify-content: center;
    }

    /* 元信息收紧：缩小字号、减小间距，避免挤成一团 */
    .item-meta {
        font-size: 11.5px;
        gap: 6px 10px;
    }

    .item-title {
        font-size: 13px;
    }

    /* 详情键值对：改为单列，键在上值在下 */
    .kv {
        grid-template-columns: 1fr;
        gap: 4px 0;
    }

    .kv .k {
        margin-top: 8px;
        font-size: 11.5px;
    }

    .kv .k:first-child {
        margin-top: 0;
    }

    /* 表格：横向可滚动，避免挤爆 */
    .card > table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* 卡片内边距收窄 */
    .card-pad {
        padding: 12px 12px;
    }

    /* 弹窗：贴边、更满，适配小屏 */
    .modal {
        width: calc(100vw - 20px) !important;
        max-width: 100% !important;
        margin: 10px;
    }
}