/* CatDNS 公共样式 - 可收缩侧边栏布局 */

/* ========== 顶部栏 ========== */
.layui-layout-admin .layui-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* 收缩/展开按钮 */
.side-toggle {
    display: inline-block;
    color: #fff;
    font-size: 20px;
    line-height: 60px;
    padding: 0 15px;
    cursor: pointer;
    vertical-align: top;
    transition: background .2s;
}
.side-toggle:hover {
    background: rgba(255,255,255,.08);
}

.layui-header .logo {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    line-height: 60px;
    padding: 0 10px;
    display: inline-block;
    vertical-align: top;
}

/* ========== 侧边栏 ========== */
.layui-layout-admin .layui-side {
    top: 60px;
    width: 220px;
    transition: width .25s ease;
    overflow: hidden;
}
.layui-side-scroll {
    overflow-y: auto !important;
    width: 220px;
}

/* 收缩状态 - 侧边栏 */
.layui-side.side-collapsed {
    width: 64px;
}
.side-collapsed .layui-side-scroll {
    width: 64px;
    overflow: visible !important;
}
.side-collapsed .layui-nav-tree .layui-nav-item a {
    padding: 0 !important;
    text-align: center;
    position: relative;
}
.side-collapsed .layui-nav-tree .layui-nav-item a .layui-icon {
    margin-right: 0;
    font-size: 18px;
}
.side-collapsed .layui-nav-tree .layui-nav-item a span {
    display: none;
}

/* 收缩状态 - hover展开提示 */
.side-collapsed .layui-nav-tree .layui-nav-item {
    position: relative;
}
.side-collapsed .layui-nav-tree .layui-nav-item a:hover::after {
    content: attr(data-title);
    position: absolute;
    left: 64px;
    top: 0;
    background: #2d2d2d;
    color: #fff;
    padding: 0 15px;
    height: 48px;
    line-height: 48px;
    white-space: nowrap;
    z-index: 9999;
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 2px 6px rgba(0,0,0,.15);
    font-size: 14px;
}

/* 导航图标 */
.layui-nav-tree .layui-icon {
    margin-right: 8px;
    font-size: 16px;
    vertical-align: middle;
}

/* 侧边菜单项样式 */
.layui-nav.layui-nav-tree {
    width: 100%;
}
.layui-nav-item a {
    padding: 0 20px !important;
    height: 48px;
    line-height: 48px;
    font-size: 14px;
}
.layui-this a {
    background-color: rgba(255,255,255,.08) !important;
}
.layui-nav .layui-this:after {
    width: 0;
}

/* ========== 主体内容区 ========== */
.layui-layout-admin .layui-body {
    left: 220px;
    top: 60px;
    bottom: 44px;
    transition: left .25s ease;
}
.layui-body.body-collapsed {
    left: 64px;
}

/* ========== 底部 ========== */
.layui-layout-admin .layui-footer {
    left: 220px;
    text-align: center;
    color: #666;
    transition: left .25s ease;
}
.layui-footer.footer-collapsed {
    left: 64px;
}

/* ========== 卡片统计 ========== */
.stat-card { text-align: center; padding: 20px; }
.stat-card .num { font-size: 32px; font-weight: bold; color: #1E9FFF; }
.stat-card .label { color: #666; margin-top: 5px; }

/* ========== 表格操作按钮 ========== */
.table-actions a { margin-right: 5px; }

/* ========== 状态标签 ========== */
.status-badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 12px; }
.status-active { background: #5FB878; color: #fff; }
.status-paused { background: #FF5722; color: #fff; }
.status-pending { background: #FFB800; color: #fff; }

/* ========== 表单 ========== */
.form-section { margin-bottom: 20px; }
.form-section .layui-form-item { margin-bottom: 15px; }

/* ========== 响应式 ========== */
@media (max-width: 768px) {
    .layui-layout-admin .layui-side {
        left: -220px;
        transition: left .2s ease, width .25s ease;
    }
    .layui-layout-admin .layui-side.side-open {
        left: 0;
    }
    .layui-layout-admin .layui-body,
    .layui-layout-admin .layui-footer {
        left: 0;
    }
    .layui-body.body-collapsed {
        left: 0;
    }
    .layui-footer.footer-collapsed {
        left: 0;
    }
}

/* ========== 首页 ========== */
.home-page {
    max-width: 600px; margin: 80px auto; padding: 40px;
}
.home-page h1 { text-align: center; margin-bottom: 30px; }