/* ============================================================================
   Art Design Pro 现代化简约风 - 设计令牌 + 通用基础样式
   设计原则：低饱和商务色 / 圆角 6-8px / 轻阴影 / 扁平化 / 信息层级清晰
   ============================================================================ */

:root {
    /* 主色 - 沉稳商务蓝（低饱和） */
    --ad-primary:           #2F7CF6;
    --ad-primary-hover:     #1E66D9;
    --ad-primary-active:    #1858BE;
    --ad-primary-light:     #EAF1FE;
    --ad-primary-lighter:   #F5F8FE;

    /* 中性色 - 灰阶 */
    --ad-text-primary:      #1F2329;
    --ad-text-regular:      #4E5969;
    --ad-text-secondary:    #86909C;
    --ad-text-placeholder:  #C9CDD4;
    --ad-text-disabled:     #C9CDD4;
    --ad-text-inverse:      #FFFFFF;

    --ad-border:            #E5E6EB;
    --ad-border-light:      #F2F3F5;
    --ad-divider:           #E5E6EB;

    --ad-bg-page:           #F7F8FA;
    --ad-bg-card:           #FFFFFF;
    --ad-bg-hover:          #F7F8FA;
    --ad-bg-active:         #EAF1FE;
    --ad-bg-mask:           rgba(29, 33, 41, 0.6);

    /* 状态色 - 低饱和 */
    --ad-success:           #00B42A;
    --ad-success-light:     #E8FFEA;
    --ad-warning:           #FF7D00;
    --ad-warning-light:     #FFF7E8;
    --ad-danger:            #F53F3F;
    --ad-danger-light:      #FFECE8;
    --ad-info:              #86909C;
    --ad-info-light:        #F2F3F5;

    /* 圆角 */
    --ad-radius-xs:         2px;
    --ad-radius-sm:         4px;
    --ad-radius-base:       6px;
    --ad-radius-lg:         8px;
    --ad-radius-xl:         12px;
    --ad-radius-2xl:        16px;
    --ad-radius-full:       999px;

    /* 阴影 - 轻微浮层 */
    --ad-shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.03);
    --ad-shadow-sm:         0 1px 4px rgba(0, 0, 0, 0.04);
    --ad-shadow-base:       0 2px 8px rgba(0, 0, 0, 0.06);
    --ad-shadow-md:         0 4px 12px rgba(0, 0, 0, 0.08);
    --ad-shadow-lg:         0 6px 20px rgba(0, 0, 0, 0.10);
    --ad-shadow-xl:         0 12px 32px rgba(0, 0, 0, 0.12);

    /* 间距 */
    --ad-gap-xs:            4px;
    --ad-gap-sm:            8px;
    --ad-gap-base:          12px;
    --ad-gap-md:            16px;
    --ad-gap-lg:            24px;
    --ad-gap-xl:            32px;
    --ad-gap-2xl:           48px;

    /* 字号 */
    --ad-font-xs:           12px;
    --ad-font-sm:           13px;
    --ad-font-base:         14px;
    --ad-font-md:           16px;
    --ad-font-lg:           18px;
    --ad-font-xl:           20px;
    --ad-font-2xl:          24px;
    --ad-font-3xl:          30px;

    /* 字重 */
    --ad-fw-regular:        400;
    --ad-fw-medium:         500;
    --ad-fw-semibold:       600;
    --ad-fw-bold:           700;

    /* 过渡 */
    --ad-transition:        all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----------------------------------------------------------------------------
   基础重置
---------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: var(--ad-font-base);
    color: var(--ad-text-regular);
    background-color: var(--ad-bg-page);
    line-height: 1.5715;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ad-primary); text-decoration: none; transition: var(--ad-transition); }
a:hover { color: var(--ad-primary-hover); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--ad-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ad-text-placeholder); }
::-webkit-scrollbar-track { background: transparent; }

/* ----------------------------------------------------------------------------
   卡片 - 简约浮层
---------------------------------------------------------------------------- */
.ad-card {
    background: var(--ad-bg-card);
    border-radius: var(--ad-radius-lg);
    box-shadow: var(--ad-shadow-sm);
    padding: var(--ad-gap-lg);
}

.ad-card--bordered {
    border: 1px solid var(--ad-border-light);
    box-shadow: none;
}

.ad-card__title {
    font-size: var(--ad-font-md);
    font-weight: var(--ad-fw-semibold);
    color: var(--ad-text-primary);
    margin: 0 0 var(--ad-gap-md);
    padding-bottom: var(--ad-gap-md);
    border-bottom: 1px solid var(--ad-border-light);
}

/* ----------------------------------------------------------------------------
   按钮 - 覆盖 Layui 默认厚重风格
---------------------------------------------------------------------------- */
.ad-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ad-gap-xs);
    height: 32px;
    padding: 0 var(--ad-gap-md);
    font-size: var(--ad-font-base);
    font-weight: var(--ad-fw-regular);
    line-height: 1;
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-base);
    background: var(--ad-bg-card);
    color: var(--ad-text-regular);
    cursor: pointer;
    transition: var(--ad-transition);
    white-space: nowrap;
    user-select: none;
}
.ad-btn:hover { color: var(--ad-primary); border-color: var(--ad-primary); background: var(--ad-primary-lighter); }
.ad-btn--primary {
    background: var(--ad-primary);
    border-color: var(--ad-primary);
    color: var(--ad-text-inverse);
}
.ad-btn--primary:hover { background: var(--ad-primary-hover); border-color: var(--ad-primary-hover); color: var(--ad-text-inverse); }
.ad-btn--danger { background: var(--ad-danger); border-color: var(--ad-danger); color: var(--ad-text-inverse); }
.ad-btn--danger:hover { background: #D93030; border-color: #D93030; color: var(--ad-text-inverse); }
.ad-btn--text { border: none; background: transparent; padding: 0 8px; color: var(--ad-primary); height: auto; }
.ad-btn--text:hover { background: var(--ad-primary-light); color: var(--ad-primary-hover); }
.ad-btn--sm { height: 26px; padding: 0 10px; font-size: var(--ad-font-sm); }
.ad-btn--lg { height: 40px; padding: 0 20px; font-size: var(--ad-font-md); }
.ad-btn--block { display: flex; width: 100%; }
.ad-btn[disabled] { background: var(--ad-bg-hover); border-color: var(--ad-border); color: var(--ad-text-disabled); cursor: not-allowed; }
.ad-btn[disabled]:hover { background: var(--ad-bg-hover); border-color: var(--ad-border); color: var(--ad-text-disabled); }

/* ----------------------------------------------------------------------------
   表格 - 无边框轻量化，行悬浮
---------------------------------------------------------------------------- */
.ad-table { width: 100%; border-collapse: collapse; font-size: var(--ad-font-base); }
.ad-table thead th {
    background: var(--ad-bg-page);
    color: var(--ad-text-secondary);
    font-weight: var(--ad-fw-regular);
    text-align: left;
    padding: 10px var(--ad-gap-md);
    font-size: var(--ad-font-sm);
    border: none;
    white-space: nowrap;
}
.ad-table tbody td {
    padding: var(--ad-gap-md);
    color: var(--ad-text-regular);
    border: none;
    border-bottom: 1px solid var(--ad-border-light);
}
.ad-table tbody tr { transition: var(--ad-transition); }
.ad-table tbody tr:hover { background: var(--ad-bg-hover); }
.ad-table tbody tr:last-child td { border-bottom: none; }

/* ----------------------------------------------------------------------------
   表单 - 输入框 / 文本域
---------------------------------------------------------------------------- */
.ad-input, .ad-textarea, .ad-select {
    width: 100%;
    height: 32px;
    padding: 0 12px;
    font-size: var(--ad-font-base);
    color: var(--ad-text-primary);
    background: var(--ad-bg-card);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-base);
    transition: var(--ad-transition);
    outline: none;
}
.ad-textarea { height: auto; padding: 8px 12px; line-height: 1.5; resize: vertical; }
.ad-input:hover, .ad-textarea:hover, .ad-select:hover { border-color: var(--ad-text-placeholder); }
.ad-input:focus, .ad-textarea:focus, .ad-select:focus {
    border-color: var(--ad-primary);
    box-shadow: 0 0 0 3px var(--ad-primary-light);
}
.ad-input::placeholder, .ad-textarea::placeholder { color: var(--ad-text-placeholder); }
.ad-input:disabled { background: var(--ad-bg-hover); color: var(--ad-text-disabled); cursor: not-allowed; }

.ad-form-item { margin-bottom: var(--ad-gap-md); }
.ad-form-label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--ad-font-sm);
    color: var(--ad-text-regular);
    font-weight: var(--ad-fw-medium);
}
.ad-form-label .ad-required { color: var(--ad-danger); margin-right: 4px; }

/* ----------------------------------------------------------------------------
   标签 / 徽标
---------------------------------------------------------------------------- */
.ad-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    font-size: var(--ad-font-xs);
    line-height: 1;
    border-radius: var(--ad-radius-sm);
    background: var(--ad-info-light);
    color: var(--ad-text-regular);
}
.ad-tag--success { background: var(--ad-success-light); color: var(--ad-success); }
.ad-tag--warning { background: var(--ad-warning-light); color: var(--ad-warning); }
.ad-tag--danger  { background: var(--ad-danger-light);  color: var(--ad-danger); }
.ad-tag--primary{ background: var(--ad-primary-light); color: var(--ad-primary); }

/* ----------------------------------------------------------------------------
   工具类
---------------------------------------------------------------------------- */
.ad-flex { display: flex; }
.ad-flex-center { display: flex; align-items: center; }
.ad-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ad-text-primary { color: var(--ad-text-primary) !important; }
.ad-text-secondary { color: var(--ad-text-secondary) !important; }
.ad-text-success { color: var(--ad-success) !important; }
.ad-text-warning { color: var(--ad-warning) !important; }
.ad-text-danger  { color: var(--ad-danger)  !important; }
.ad-fs-xs { font-size: var(--ad-font-xs); }
.ad-fs-sm { font-size: var(--ad-font-sm); }
.ad-fs-md { font-size: var(--ad-font-md); }
.ad-fs-lg { font-size: var(--ad-font-lg); }
.ad-mt-sm { margin-top: var(--ad-gap-sm); }
.ad-mt-md { margin-top: var(--ad-gap-md); }
.ad-mt-lg { margin-top: var(--ad-gap-lg); }
.ad-mb-sm { margin-bottom: var(--ad-gap-sm); }
.ad-mb-md { margin-bottom: var(--ad-gap-md); }
.ad-mb-lg { margin-bottom: var(--ad-gap-lg); }

/* ----------------------------------------------------------------------------
   Layui 风格覆盖 - 摒弃传统厚重样式
---------------------------------------------------------------------------- */
.layui-btn {
    height: 32px;
    line-height: 32px;
    padding: 0 16px;
    font-size: var(--ad-font-base);
    border-radius: var(--ad-radius-base);
    border: 1px solid var(--ad-border);
    background: var(--ad-bg-card);
    color: var(--ad-text-regular);
    transition: var(--ad-transition);
}
.layui-btn:hover { color: var(--ad-primary); border-color: var(--ad-primary); background: var(--ad-primary-lighter); }
.layui-btn-normal { background: var(--ad-primary); border-color: var(--ad-primary); color: #fff; }
.layui-btn-normal:hover { background: var(--ad-primary-hover); border-color: var(--ad-primary-hover); color: #fff; }
.layui-btn-danger { background: var(--ad-danger); border-color: var(--ad-danger); color: #fff; }
.layui-btn-danger:hover { background: #D93030; border-color: #D93030; color: #fff; }
.layui-btn-warm { background: var(--ad-warning); border-color: var(--ad-warning); color: #fff; }
.layui-btn-sm { height: 26px; line-height: 26px; padding: 0 10px; font-size: var(--ad-font-sm); }
.layui-btn-lg { height: 40px; line-height: 40px; padding: 0 20px; font-size: var(--ad-font-md); }

.layui-input, .layui-textarea, .layui-select {
    height: 32px;
    line-height: 1;
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-base);
    color: var(--ad-text-primary);
    transition: var(--ad-transition);
}
.layui-input:hover, .layui-textarea:hover { border-color: var(--ad-text-placeholder); }
.layui-input:focus, .layui-textarea:focus {
    border-color: var(--ad-primary);
    box-shadow: 0 0 0 3px var(--ad-primary-light);
}

.layui-form-label { padding: 6px 0; color: var(--ad-text-regular); font-weight: var(--ad-fw-medium); }

.layui-table { color: var(--ad-text-regular); }
.layui-table thead tr, .layui-table-header thead tr { background-color: var(--ad-bg-page); }
.layui-table thead th, .layui-table-header th {
    color: var(--ad-text-secondary);
    font-weight: var(--ad-fw-regular);
    font-size: var(--ad-font-sm);
}
.layui-table tbody tr:hover, .layui-table-hover { background-color: var(--ad-bg-hover); }

.layui-card {
    border-radius: var(--ad-radius-lg);
    box-shadow: var(--ad-shadow-sm);
    border: none;
}
.layui-card-header {
    border-bottom: 1px solid var(--ad-border-light);
    color: var(--ad-text-primary);
    font-weight: var(--ad-fw-semibold);
    font-size: var(--ad-font-md);
}

.layui-layer-btn a { border-radius: var(--ad-radius-base) !important; }
.layui-layer-dialog { border-radius: var(--ad-radius-lg) !important; box-shadow: var(--ad-shadow-lg) !important; }
.layui-layer-title { border-radius: var(--ad-radius-lg) var(--ad-radius-lg) 0 0 !important; }

.layui-nav .layui-nav-item a { transition: var(--ad-transition); }
.layui-nav .layui-nav-item.layui-this a, .layui-nav .layui-nav-item a:hover { color: var(--ad-primary); }

.layui-bg-cyan { background-color: var(--ad-primary) !important; }

/* ----------------------------------------------------------------------------
   Layui 表单选择框 - Art Design Pro 风格覆盖
---------------------------------------------------------------------------- */
.layui-form-select { margin: 0; }
.layui-form-select .layui-input {
    height: 32px;
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-base);
    background: var(--ad-bg-card);
    color: var(--ad-text-primary);
    font-size: var(--ad-font-base);
    padding-left: 12px;
    padding-right: 30px;
    cursor: pointer;
    transition: var(--ad-transition);
}
.layui-form-select .layui-input:hover { border-color: var(--ad-text-placeholder); }
.layui-form-select .layui-edge { right: 12px; color: var(--ad-text-placeholder); }
.layui-form-select dl {
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-base);
    box-shadow: var(--ad-shadow-md);
    max-height: 240px;
    overflow-y: auto;
    margin-top: 4px;
}
.layui-form-select dl dd {
    padding: 0 12px;
    line-height: 32px;
    color: var(--ad-text-regular);
    font-size: var(--ad-font-base);
}
.layui-form-select dl dd.layui-this { background: var(--ad-primary-light); color: var(--ad-primary); }
.layui-form-select dl dd:hover { background: var(--ad-bg-hover); color: var(--ad-text-primary); }

/* Layui 日期选择器覆盖 */
.layui-laydate {
    border-radius: var(--ad-radius-lg) !important;
    box-shadow: var(--ad-shadow-lg) !important;
    border: 1px solid var(--ad-border) !important;
}
.layui-laydate-header { border-bottom: 1px solid var(--ad-border-light) !important; }
.layui-laydate .layui-laydate-content td.laylaydate-now { color: var(--ad-primary) !important; }
.layui-laydate .layui-laydate-content td.layui-this { background: var(--ad-primary) !important; color: #fff !important; }
.layui-laydate-footer { border-top: 1px solid var(--ad-border-light) !important; }
.layui-laydate .laydate-btns-confirm { background: var(--ad-primary) !important; border-radius: var(--ad-radius-sm) !important; }

/* Layui 分页覆盖 */
.layui-laypage a, .layui-laypage span {
    border-radius: var(--ad-radius-sm) !important;
    border: 1px solid var(--ad-border) !important;
    color: var(--ad-text-regular) !important;
    margin: 0 2px !important;
}
.layui-laypage .layui-laypage-curr { background: var(--ad-primary) !important; border-color: var(--ad-primary) !important; color: #fff !important; }
.layui-laypage a:hover { color: var(--ad-primary) !important; border-color: var(--ad-primary) !important; }

/* Layui Tab 覆盖 */
.layui-tab { margin: 0; }
.layui-tab-title { border-bottom: 1px solid var(--ad-border-light); }
.layui-tab-title li { padding: 0 12px; font-size: var(--ad-font-base); color: var(--ad-text-regular); }
.layui-tab-title li.layui-this { color: var(--ad-primary); }
.layui-tab-title .layui-this::after { border-bottom-color: var(--ad-primary); height: 2px; }

/* 搜索工具条 - layui 行内表单 */
.ad-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ad-gap-sm);
}
.ad-filter-bar .layui-form-select,
.ad-filter-bar .layui-input {
    display: inline-block;
}
.ad-filter-bar .layui-input-inline { width: auto; min-width: 140px; margin: 0; }
.ad-filter-bar .layui-input { width: 100%; }

/* 状态徽标 - 内联使用 */
.ad-status-tag { display: inline-flex; align-items: center; gap: 4px; }

/* ----------------------------------------------------------------------------
   列表分页容器（所有列表页统一）
---------------------------------------------------------------------------- */
.ad-list-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 12px 18px;
}
.ad-list-pager .layui-laypage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
}
.ad-list-pager .layui-laypage > a,
.ad-list-pager .layui-laypage > span:not(.layui-laypage-limits) {
    margin: 0;
    height: 32px;
    line-height: 30px;
    padding: 0 12px;
    font-size: 13px;
    vertical-align: middle;
}
.ad-list-pager .layui-laypage .layui-laypage-limits {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 0 0 4px;
    height: 32px;
    border: none;
    background: transparent;
    vertical-align: middle;
}
.ad-list-pager .layui-laypage .layui-laypage-curr {
    line-height: 30px;
    padding: 0 12px;
}
.ad-list-pager .layui-laypage .layui-laypage-count {
    color: var(--ad-text-secondary);
    padding: 0 12px;
    height: 32px;
    line-height: 32px;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* 分页条数下拉：与前后分页按钮高度/内边距完全一致，视觉统一为同一套控件 */
.ad-list-pager .layui-laypage select.layui-laypage-limits,
.ad-list-pager .layui-laypage-limits select {
    height: 32px;
    padding: 0 30px 0 12px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 L5 7 L8.5 3.5' fill='none' stroke='%23909399' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 10px;
    color: var(--ad-text);
    font-size: 13px;
    line-height: 30px;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all .2s ease;
    vertical-align: middle;
    box-sizing: border-box;
}
.ad-list-pager .layui-laypage-limits select:hover {
    border-color: #d2d2d2;
    background-color: #fafafa;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 L5 7 L8.5 3.5' fill='none' stroke='%23606266' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ad-list-pager .layui-laypage-limits select:focus {
    border-color: var(--ad-primary);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(30, 159, 255, 0.12);
}
.ad-list-pager .layui-laypage-limits select option {
    background: #fff;
    color: var(--ad-text);
    padding: 6px 10px;
    font-size: 13px;
}
.ad-list-pager .layui-laypage-limits select option:checked {
    background-color: #e8f3ff;
    color: var(--ad-primary);
    font-weight: 600;
}