/* 字体一律用「系统字体栈」，不引任何外部字体 CDN。
   原本这里 @import 了 fonts.googleapis.com 的 Source Sans Pro：国内访问不到，
   浏览器会一路等到超时才回落，后台每页都白等一次（且离线环境同样卡）。
   系统栈零请求、渲染即时，中文在各平台分别落到苹方 / 微软雅黑 / 思源黑体。 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC",
        "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

a {
    text-decoration: none;
}

/***** App shell：整页不卷，navbar/标题钉顶、pager 钉底、只有主内容区卷动 [START] *****/
/* .wrapper 占满窗口高并排成直栏；只有 .content-body 这一层可卷动。
   scope 在 .wrapper 之下，登录页（main-login.php，无 .wrapper）不受影响。 */
.wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* navbar 与页面标题固定高度，永远钉在顶端 */
.wrapper > .main-header {
    flex: 0 0 auto;
}
.content-wrapper {
    flex: 1 1 auto;
    min-height: 0;                 /* 允许子项在 flex 容器内收缩并触发内部卷动 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.content-wrapper > .content-header {
    flex: 0 0 auto;               /* 标题列固定在内容区顶端 */
}

/* 唯一卷动区：中间主内容。只设 overflow，不改成 flex 容器，
   以免影响各页 container-fluid 内既有元素的排版。 */
.content-wrapper > .content-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 1rem;            /* 原 .mt-3 的 margin-top 改为 padding-top，顶距纳入卷动容器内 */
}

/* 分页固定列：site.js 于载入时把主内容里的 .pager-sticky（pager.php 的 <form>）
   搬进此槽。footer 为 content-wrapper flex 直栏的最后一项且 flex:0 0 auto，
   故无论 table 高矮，pager 恒钉在窗口底部；中间内容自行卷动。
   采“搬移”而非 sticky/flex-push，避免动到各页 container-fluid 内其他元素排版。 */
.content-wrapper > .content-footer {
    flex: 0 0 auto;
    padding: 0.35rem 0.75rem;     /* 上下紧凑；左右对齐上方 container-fluid（每侧 0.75rem） */
    background-color: #FFF;
    border-top: 1px solid #DEE2E6;
}
/* 没有分页的页面：槽为空，整列隐藏，不占高度、不显示分隔线 */
.content-wrapper > .content-footer:empty {
    display: none;
}
.content-footer .pager-sticky {
    margin: 0;
}
.content-footer .pager-sticky .d-flex {
    margin-bottom: 0 !important;   /* 取消原 mb-4，固定列不再多出底距 */
}
/* 压低固定列高度：每页笔数下拉与分页链接改小尺寸（form-select 默认约 38px 过高） */
.content-footer .form-select {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    font-size: 0.875rem;
    background-position: right 0.5rem center;
}
.content-footer .page-link {
    padding: 0.2rem 0.55rem;
}

/* Flash 提示条浮层（标记 #7）：原本提示条排在内容流里，一出现就把整页内容往下挤；
   改为浮层后版面完全不位移。外层 .flash-stack 只当「定位参考框」——高度 0，
   在 content-wrapper 这个 flex 直栏里不占任何空间，位置恰在标题列下缘（无须写死偏移量）。
   参考框刻意不设在 .content-body（唯一卷动区）内，提示条才不会随内容卷走。 */
.content-wrapper > .flash-stack {
    position: relative;
    flex: 0 0 auto;
    height: 0;
    min-height: 0;                 /* 盖掉 column flex item 预设的 min-height:auto，避免被内容撑高 */
    z-index: 1035;                 /* 压过主内容；低于 offcanvas(1045)／modal(1055)／SweetAlert(1060) 与页面标记圈选层 */
}
/* 内层维持正常流：多则 flash 自然垂直堆叠，彼此不重叠 */
.content-wrapper > .flash-stack > .flash-stack-inner {
    position: absolute;
    top: 1rem;                     /* 对齐原本 .content-body 的 padding-top */
    left: 0.75rem;                 /* 左右对齐下方 container-fluid 的内距 */
    right: 0.75rem;
}
.content-wrapper > .flash-stack .alert {
    margin-bottom: 0.5rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);   /* 浮起感，与其下的内容区隔 */
}
.content-wrapper > .flash-stack .alert:last-child {
    margin-bottom: 0;
}
/***** App shell [END] *****/

/***** For navbar [START] *****/
.main-header {
    border-bottom: 1px solid #DEE2E6;
}

.brand-link {
    margin-right: 0;
    padding-top: 12px;
    padding-bottom: 12px;
    width: 250px;
}

.navbar-nav.top-menu {
    border-left: 1px solid #DEE2E6;
    padding-top: 7px;
    padding-bottom: 7px;
}
/***** For navbar [END] *****/

/***** For form [START]***/
.form-control:invalid {
    border-color: #dc3545 !important;
}

.form-control:invalid:focus{
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

/***** For form [END]***/

/***** For sidebar [START] *****/
#sidebar {
    width: 300px;
}

#sidebar .offcanvas-header {
    padding: 0.75rem;
    border-bottom: 1px solid #DEE2E6;
}

#sidebar .offcanvas-body {
    padding: 0;
}

.nav-sidebar a.nav-link {
    color: #C2C7D0;
    /* 图标与文字恒保持同一行：容器层级 nowrap，宽度不足时由祖层 overflow 裁切，
       而非让 <p> 掉到图标下方多出一行（收合⇄展开动画中造成高度闪动的主因）。 */
    white-space: nowrap;
}

.nav-sidebar .nav-item.menu-open > .nav-link, .nav-sidebar .nav-item > .nav-link.active {
    color: #FFFFFF;
}

.nav-sidebar .nav.nav-treeview > li.nav-item {
    padding-left: 1rem;
    margin-top: 0.125rem;
    margin-bottom: 0.125rem;
}

.nav-sidebar .nav-icon {
    margin-right: 0.2rem;
}

.nav-sidebar .nav-link p {
    display: inline;
    margin: 0;
    /* 不换行：避免收合⇄展开宽度动画过程中，文字于窄宽度暂时折行造成列表高度闪动。 */
    white-space: nowrap;
}

.nav-sidebar .nav-header {
    color: #D0D4DB;
    font-size: 0.9rem;
    padding: 0.5rem 0 0.5rem 1rem;
}

.nav-sidebar .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgb(255, 255, 255);
}

.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar > .nav-item > .nav-link.active {
    background-color: rgb(0, 123, 255);
    color: rgb(255, 255, 255);
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link.active,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active:focus,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: rgb(52, 58, 64);
}
.nav-sidebar .nav-treeview > .nav-item.active:has(.nav-item.active) > .nav-link.active {
    background-color: rgba(255, 255, 255, 0.25);
    color: rgb(255, 255, 255);
}

.nav-sidebar .nav.nav-treeview {
    display: none;
}
.nav-sidebar .active.menu-open > .nav.nav-treeview, .nav-sidebar .menu-open > .nav.nav-treeview {
    display: block;
}

.nav-link i.float-end {
    margin-top: 0.25rem;
}
/* 父菜单需为展开箭头预留右侧空间，并作为箭头绝对定位的容器 */
.nav-sidebar .has-treeview > .nav-link {
    position: relative;
    padding-right: 2rem;
}
/* 展开箭头改为绝对定位钉在右侧：脱离流内，宽度不足时不会掉行造成父菜单变两行，
   而是跟文字一起被祖层 overflow 裁切。 */
.nav-sidebar .has-treeview > .nav-link i.float-end {
    float: none !important;
    position: absolute;
    right: 1rem;
    transition: transform ease-in-out .3s,-webkit-transform ease-in-out .3s;
}
.nav-sidebar .menu-open > .nav-link i.float-end {
    transform: rotate(-90deg);
}

.nav-sidebar .active.menu-open {
    background-color: #343a40;
}
/***** For sidebar [END] *****/

/***** 可收合的固定侧栏（push-menu）[START] *****/
/* 侧栏页首品牌字：默认（展开 / 手机）显示完整字，精简字“后台管理”仅收合时显示。 */
#sidebar .offcanvas-title .brand-mini {
    display: none;
}
/* 完整品牌字不换行；宽度不足时裁切隐藏（min-width:0 让 flex 子项可收缩以触发裁切）。 */
#sidebar .offcanvas-title {
    min-width: 0;
    overflow: hidden;
}
#sidebar .offcanvas-title .brand-full {
    display: block;
    white-space: nowrap;
    overflow: hidden;
}

/* 手机（<992px）维持 Bootstrap offcanvas 覆盖层行为，不覆写。 */
@media (min-width: 992px) {
    /* 桌面：侧栏常驻固定于左侧 */
    #sidebar.offcanvas {
        visibility: visible !important;
        transform: none !important;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100vh;
        width: 250px;
        display: flex;
        flex-direction: column;
        transition: width .25s ease-in-out;
        z-index: 1030;
    }
    #sidebar .offcanvas-body {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;             /* 裁掉展开动画过程中 nowrap 文字的暂时水平溢出 */
    }
    /* 桌面不需要 offcanvas 关闭钮；品牌字在侧栏页首已有，navbar 内不重复 */
    #sidebar .btn-close {
        display: none;
    }
    .main-header .brand-link {
        display: none;
    }
    /* navbar 与内容区右移，让出侧栏宽度 */
    .main-header,
    .content-wrapper {
        margin-left: 250px;
        transition: margin-left .25s ease-in-out;
    }

    /* ===== 收合成图标列（不整体展开；hover 于右侧浮出二级菜单）===== */
    body.sidebar-collapse #sidebar.offcanvas {
        width: 5rem;
        overflow: visible;              /* 让右侧浮层不被裁切 */
    }
    body.sidebar-collapse #sidebar .offcanvas-body {
        overflow: visible;              /* 收合时菜单短，不需卷动；改为可见以显示浮层 */
    }
    body.sidebar-collapse .main-header,
    body.sidebar-collapse .content-wrapper {
        margin-left: 4.6rem;
    }

    /* 页首：完整字换成精简字“后台管理” */
    body.sidebar-collapse #sidebar .offcanvas-title .brand-full {
        display: none;
    }
    /* 精简字沿用 h5 原字级（不缩小）：页首高度与文字大小在收合/展开间保持一致。 */
    body.sidebar-collapse #sidebar .offcanvas-title .brand-mini {
        display: block;
        text-align: center;
        white-space: nowrap;
    }
    /* 仅缩小左右 padding 以留出文字空间；上下 padding 维持 0.75rem＝与展开态同高。 */
    body.sidebar-collapse #sidebar .offcanvas-header {
        padding: 0.75rem 0.25rem;
        justify-content: center;
    }

    /* 只留图标、置中；隐藏第一层文字、nav-header 与所有子菜单 */
    body.sidebar-collapse #sidebar .nav-sidebar > .nav-item > .nav-link > p,
    body.sidebar-collapse #sidebar .nav-sidebar .nav-header {
        display: none;
    }
    body.sidebar-collapse #sidebar .nav-sidebar .nav-treeview {
        display: none !important;
    }
    body.sidebar-collapse #sidebar .nav-sidebar > .nav-item {
        position: relative;
    }
    /* 图标保持与展开态相同的左对齐与尺寸（不置中、不放大）：
       否则收合⇄展开时图标会于起始格瞬间跳位/改尺寸，造成闪动。
       收合态只是“宽度较窄，文字被裁掉”，图标全程不动。 */

    /* hover：第一层 label 化为图标右侧的浮层标题（叶节点＝自身名称，父节点＝分类名称） */
    body.sidebar-collapse #sidebar .nav-sidebar > .nav-item:hover > .nav-link > p {
        display: block;
        position: absolute;
        left: 100%;
        top: 0;
        width: 210px;
        height: 2.6rem;
        margin: 0;
        padding: 0 1rem;
        line-height: 2.6rem;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: #343a40;
        color: #fff;
        z-index: 1046;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
        border-radius: 0 0.25rem 0.25rem 0;      /* 叶节点：右侧全圆角 */
    }
    /* 父节点的 label 浮层底部接子菜单，故只圆上缘，并隐藏展开箭头 */
    body.sidebar-collapse #sidebar .nav-sidebar > .nav-item.has-treeview:hover > .nav-link > p {
        border-radius: 0 0.25rem 0 0;
    }
    body.sidebar-collapse #sidebar .nav-sidebar > .nav-item:hover > .nav-link > p .float-end {
        display: none;
    }

    /* hover：父节点的二级菜单浮出于 label 浮层下方 */
    body.sidebar-collapse #sidebar .nav-sidebar > .nav-item.has-treeview:hover > .nav-treeview {
        display: block !important;
        position: absolute;
        left: 100%;
        top: 2.6rem;                     /* = label 浮层高度 */
        width: 210px;
        margin: 0;
        padding: 0.25rem 0 0.4rem;
        background: #343a40;
        z-index: 1046;
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
        border-radius: 0 0 0.25rem 0.25rem;
    }
    /* 浮层内二级项目：显示文字、左对齐、正常内距 */
    body.sidebar-collapse #sidebar .nav-sidebar > .nav-item.has-treeview:hover > .nav-treeview .nav-item {
        padding-left: 0;
    }
    body.sidebar-collapse #sidebar .nav-sidebar > .nav-item.has-treeview:hover > .nav-treeview .nav-link {
        text-align: left;
    }
    body.sidebar-collapse #sidebar .nav-sidebar > .nav-item.has-treeview:hover > .nav-treeview .nav-link p {
        display: inline;
    }
}
/***** 可收合的固定侧栏（push-menu）[END] *****/

/***** For content [START] *****/
.content-header {
    padding: 15px .5rem;
}
.content-header h1 {
    font-size: 1.8rem;
    margin: 0;
}
.breadcrumb {
    padding-top: 0.25rem;
}
.breadcrumb a {
    text-decoration: none;
}
/***** For content [END] *****/

/***** For Login Page [START] *****/
.login-page {
    align-items: center;
    background-color: #E9ECEF;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
}

.login-box {
    width: 360px;
}
/***** For Login Page [END] *****/

/***** For \common\components\Paginator\Paginator [START] *****/
.filter-form label.form-label {
    font-size: 0.9rem;
    margin-bottom: 0;
}
/***** For \common\components\Paginator\Paginator [END] *****/

/***** For \backend\views\activity\employer-new-expansion\search-shop.php [START] *****/
.form-field-description{
    font-size: 0.9rem;
    color: #aaa;
    margin-top: 5px;
}
/***** For \backend\views\activity\employer-new-expansion\search-shop.php [END] *****/

/********** For \backend\helpers\HtmlHelper.php [START] **********/
.document-editor {
    border: 1px solid #DEE2E6;
    border-radius: 4px;

    /* Set vertical boundaries for the document editor. */
    max-height: 430px;

    /* This element is a flex container for easier rendering. */
    display: flex;
    flex-flow: column nowrap;
}

.document-editor__toolbar {
    /* Make sure the toolbar container is always above the editable. */
    z-index: 10;

    /* Create the illusion of the toolbar floating over the editable. */
    box-shadow: 0 0 5px hsla( 0,0%,0%,.2 );

    /* Use the CKEditor CSS variables to keep the UI consistent. */
    border-bottom: 1px solid #DEE2E6;
}

/* Adjust the look of the toolbar inside of the container. */
.document-editor__toolbar .ck-toolbar {
    border: 0;
    border-radius: 0;
}

/* Make the editable container look like the inside of a native word processor app. */
.document-editor__editable-container {
    padding: 30px;
    background: #F8F9FA;

    /* Make it possible to scroll the "page" of the edited content. */
    overflow-y: scroll;
}

.document-editor__editable-container .document-editor__editable.ck-editor__editable {
    /* Set the dimensions of the "page". */
    /*width: 15.8cm;*/
    min-height: 300px;

    /* Keep the "page" off the boundaries of the container. */
    padding: 1cm 2cm 2cm;

    border: 1px hsl( 0,0%,82.7% ) solid;
    border-radius: 4px;
    background: white;

    /* The "page" should cast a slight shadow (3D illusion). */
    box-shadow: 0 0 5px hsla( 0,0%,0%,.1 );

    /* Center the "page". */
    margin: 0 auto;
}

/* Override the page's width in the "Examples" section which is wider. */
.main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
    /*width: 18cm;*/
}

/* Set the default font for the "page" of the content. */
.document-editor .ck-content,
.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
    font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Adjust the headings dropdown to host some larger heading styles. */
.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
    line-height: calc( 1.7 * 1.6 * 16px );
    min-width: 6em;
}

/* Scale down all heading previews because they are way too big to be presented in the UI.
Preserve the relative scale, though. */
.document-editor .ck-heading-dropdown .ck-list .ck-heading_heading1 .ck-button__label,
.document-editor .ck-heading-dropdown .ck-list .ck-heading_heading2 .ck-button__label {
    transform: scale(0.8);
    transform-origin: left;
}

/* Set the styles for "Heading 1". */
.document-editor .ck-content h2,
.document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
    font-size: 2.18em;
    font-weight: normal;
}

.document-editor .ck-content h2 {
    line-height: 1.37em;
    padding-top: .342em;
    margin-bottom: .142em;
}

/* Set the styles for "Heading 2". */
.document-editor .ck-content h3,
.document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
    font-size: 1.75em;
    font-weight: normal;
    color: hsl( 203, 100%, 50% );
}

.document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
    color: #FFFFFF;
}

/* Set the styles for "Heading 2". */
.document-editor .ck-content h3 {
    line-height: 1.86em;
    padding-top: .171em;
    margin-bottom: .357em;
}

/* Set the styles for "Heading 3". */
.document-editor .ck-content h4,
.document-editor .ck-heading-dropdown .ck-heading_heading3 .ck-button__label {
    font-size: 1.31em;
    font-weight: bold;
}

.document-editor .ck-content h4 {
    line-height: 1.24em;
    padding-top: .286em;
    margin-bottom: .952em;
}

/* Make the block quoted text serif with some additional spacing. */
.document-editor .ck-content blockquote {
    font-family: Georgia, serif;
    margin-left: 30px;
    margin-right: 30px;
}
.is-invalid ~ .document-editor{
   border-color:#dc3545;
}
@media only screen and (max-width: 960px) {
    /* Because on mobile 2cm paddings are to big. */
    .document-editor__editable-container .document-editor__editable.ck-editor__editable {
        padding: 1.5em;
    }
}

@media only screen and (max-width: 1200px) {
    .main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
        width: 100%;
    }
}

/* Style document editor a'ka Google Docs.*/
@media only screen and (min-width: 1360px) {
    .main .main__content.main__content-wide {
        padding-right: 0;
    }
}

@media only screen and (min-width: 1600px) {
    .main .main__content.main__content-wide {
        width: 24cm;
    }

    .main .main__content.main__content-wide .main__content-inner {
        width: auto;
        margin: 0 50px;
    }

    /* Keep "page" look based on viewport width. */
    .main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
        width: 60%;
    }
}
/********** For \backend\helpers\HtmlHelper.php [END] **********/
div.required>label:after {
    content: " * ";
    color: #ff0000;
}
.btn_publish, .cursor-pointer {
    cursor: pointer;
}
.operator {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.operator > .btn {
    margin: 1px 2px;
}
.truncate-text {
    max-width: 200px;          /* 最大宽度 200px */
    white-space: nowrap;       /* 禁止换行 */
    overflow: hidden;          /* 隐藏超出部分 */
    text-overflow: ellipsis;   /* 超出部分显示为省略号 */
    display: inline-block;     /* 或者 block，根据需求选择 */
}