/* Vue v-cloak */
[v-cloak] {
    display: none !important;
}

/* Vue-Element-Plus-Admin style overrides */

:root {
    --el-color-primary: #409eff;
}

/* Message / Notification style */
.el-message {
    min-width: 380px !important;
    padding: 15px 15px 15px 20px !important;
    border-radius: 4px !important;
    border: 1px solid #ebeef5 !important;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
    background-color: #edf2fc !important;
    transition: opacity .3s, transform .4s, top .4s !important;
}

.el-message--success {
    background-color: #f0f9eb !important;
    border-color: #e1f3d8 !important;
    color: #67c23a !important;
}

.el-message--error {
    background-color: #fef0f0 !important;
    border-color: #fde2e2 !important;
    color: #f56c6c !important;
}

.el-message--warning {
    background-color: #fdf6ec !important;
    border-color: #faecd8 !important;
    color: #e6a23c !important;
}

.el-message--info {
    background-color: #f4f4f5 !important;
    border-color: #e9e9eb !important;
    color: #909399 !important;
}

/* Fix for icons in messages */
.el-message .el-message__icon {
    margin-right: 10px;
}

/* Button style */
.el-button--primary:not(.is-link):not(.is-text) {
    background-color: var(--el-color-primary) !important;
    border-color: var(--el-color-primary) !important;
}

/* Input style */
.el-input__wrapper.is-focus {
    box-shadow: 0 0 0 1px var(--el-color-primary) inset !important;
}

/* Sidebar Navigation Enhancements */
.sidebar-container .el-menu {
    border: none;
    height: 100%;
    width: 100% !important;
}

.sidebar-container .el-menu-item, 
.sidebar-container .el-sub-menu__title {
    height: 50px !important;
    line-height: 50px !important;
    margin: 4px 0;
}

.sidebar-container .el-menu-item.is-active {
    background-color: #ecf5ff !important;
    color: var(--el-color-primary) !important;
}

.sidebar-container .el-menu-item.is-active::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--el-color-primary);
}

.sidebar-container .el-menu-item:hover, 
.sidebar-container .el-sub-menu__title:hover {
    background-color: #f5f7fa !important;
    color: var(--el-color-primary) !important;
}

/* 子菜单不限制高度，避免第 5 项被裁切看不见 */
.sidebar-container .el-sub-menu .el-menu,
.sidebar-container .el-menu--inline {
    max-height: none !important;
    overflow: visible !important;
}

/* Fix sidebar transition flicker */
.sidebar-container {
    transition: width 0.3s cubic-bezier(0.2, 0, 0, 1), transform 0.3s cubic-bezier(0.2, 0, 0, 1) !important;
}

.main-wrapper {
    transition: margin-left 0.3s cubic-bezier(0.2, 0, 0, 1) !important;
}

.header-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.right-menu {
    flex-shrink: 0;
}

.breadcrumb-container {
    min-width: 0;
}

.breadcrumb-container .el-breadcrumb__item {
    white-space: nowrap;
}

.breadcrumb-container .el-breadcrumb__item:last-child {
    min-width: 0;
}

.breadcrumb-container .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* Unified breadcrumb style for header and page content */
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
    color: #606266 !important;
    font-weight: 500;
}

.el-breadcrumb__separator {
    color: #c0c4cc !important;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a {
    color: var(--el-color-primary) !important;
    font-weight: 600;
}

.el-menu--collapse .el-sub-menu__title span {
    display: none;
}

.el-menu--collapse .el-sub-menu__icon-arrow {
    display: none;
}

/* 表格单元格内容溢出处理 */
.el-table .cell {
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    padding-left: 8px !important;
    padding-right: 8px !important;
    line-height: 1.5 !important;
}

/* 表格容器宽度 + 使用 auto 布局防止列被合并 */
.el-table {
    width: 100% !important;
    table-layout: auto !important;
}

/* 表头背景色 */
.el-table th.el-table__cell {
    background-color: #fafafa !important;
}

/* 不覆盖 Element Plus 的内层 table width 和 colgroup col width，
   让 Element Plus JS 自行管理列宽分配 */

/* Mobile Adaptation Styles */
.drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    position: fixed;
    z-index: 999;
}

@media screen and (max-width: 768px) {
    .main-wrapper {
        margin-left: 0 !important;
    }

    .fixed-header {
        width: 100% !important;
    }

    .sidebar-container {
        width: 210px !important;
        z-index: 1002;
    }

    .breadcrumb-container {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;
        margin-left: 8px;
        overflow: hidden;
    }

    /* Adjust navbar right menu for mobile */
    .avatar-container {
        margin-right: 10px !important;
    }

    .avatar-wrapper span {
        display: none;
    }

    .tags-view-container {
        display: none; /* Optionally hide tags-view on mobile to save space */
    }

    .app-main {
        padding-top: var(--header-height) !important;
    }

    /* Global adjustments for mobile sub-pages */
    body {
        padding: 10px !important;
    }

    .form-card, .table-container, .search-form, .card-container {
        padding: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Make tables scrollable on mobile */
    .el-table {
        width: 100% !important;
        overflow-x: auto;
    }

    /* Stack form items on mobile if they are inline */
    .el-form--inline .el-form-item {
        display: block !important;
        margin-right: 0 !important;
    }
}