/* 自定义样式补充 */

/* Alpine 初始化前隐藏带 x-cloak 的元素（必须，否则全屏遮罩会挡住点击） */
[x-cloak] { display: none !important; }

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 侧边栏菜单图标颜色 */
aside nav a i {
    color: #94a3b8;
}

aside nav a:hover i {
    color: #ffffff;
}

aside nav a.bg-blue-600 i {
    color: #ffffff !important;
}

/* 表格样式优化 */
.table-container {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    background-color: #f8fafc;
    color: #475569;
    font-weight: 500;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.875rem;
}

.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
    color: #334155;
}

.data-table tbody tr:hover {
    background-color: #f8fafc;
}

/* 状态标签 */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-passed { background-color: #e0e7ff; color: #3730a3; }
.status-registered { background-color: #dbeafe; color: #1e40af; }
.status-suspended { background-color: #fef3c7; color: #92400e; }
.status-dropped { background-color: #fee2e2; color: #991b1b; }
.status-graduated { background-color: #d1fae5; color: #065f46; }

/* 模态框 */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

/* ===== 移动端响应式（全站统一：仅改共享文件即覆盖所有页面） ===== */
.mobile-menu-btn { display: none; }

@media (max-width: 768px) {
    /* 汉堡按钮仅窄屏显示 */
    .mobile-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-right: 8px;
        border-radius: 8px;
        color: #475569;
        flex-shrink: 0;
    }
    .mobile-menu-btn:hover { background: #f1f5f9; }

    /* 侧边栏变为抽屉 */
    aside {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }
    body.sidebar-open aside { transform: translateX(0); }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 55;
        display: none;
    }
    body.sidebar-open .sidebar-overlay { display: block; }

    /* 弹窗在窄屏全屏显示 */
    .fixed.inset-0 { padding: 0 !important; }
    .fixed.inset-0 > div {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* 窄屏更紧凑的内边距 */
    main.p-6, .p-6 { padding: 1rem !important; }
}

/* ===== 内嵌模式（统一壳通过内联 iframe 承载独立功能页） =====
   子页 URL 带 ?embed=1 时，auth.js 会给 body 加 embed-mode 类；
   此处隐藏子页自身导航/顶栏，让内容铺满 iframe（壳不刷新、不跳页）。 */
body.embed-mode aside,
body.embed-mode header { display: none !important; }
/* 导航隐藏后，内容区直接铺满视口高度。
   注意：必须用 :first-of-type 限定布局容器，不能写成 body.embed-mode > div，否则会误伤 body 下其他 div（如 toast 提示条），把 fixed 定位的提示条也拉成 100vh 全高。 */
body.embed-mode > div:first-of-type { height: 100vh; }
body.embed-mode > div:first-of-type > main,
body.embed-mode > div:first-of-type > div { height: 100%; }