/* ===================================
   iOS 风格组件补充样式
   针对 FastAdmin 特殊组件的iOS化改造
   ================================= */

/* ===================================
   1. Addtabs 多标签页增强
   ================================= */
.nav-addtabs {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid #e5e5ea !important;
    padding: 8px 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.nav-addtabs > li {
    margin: 0 4px;
}

.nav-addtabs > li > a {
    border: none !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    background: transparent !important;
    color: #3c3c43 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 13px;
    font-weight: 500;
}

.nav-addtabs > li > a:hover {
    background: #f2f2f7 !important;
    color: #1d1d1f !important;
}

.nav-addtabs > li.active > a {
    background: #007AFF !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25) !important;
}

.nav-addtabs > li > a .close-tab {
    margin-left: 8px;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.nav-addtabs > li > a:hover .close-tab,
.nav-addtabs > li.active > a .close-tab {
    opacity: 1;
}

/* ===================================
   2. Bootstrap Table 增强
   ================================= */
/* 工具栏按钮组 */
.btn-group {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    overflow: hidden;
}

.btn-group .btn {
    border: none !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.btn-group .btn:first-child {
    border-radius: 10px 0 0 10px !important;
}

.btn-group .btn:last-child {
    border-radius: 0 10px 10px 0 !important;
    border-right: none !important;
}

.btn-group .btn:only-child {
    border-radius: 10px !important;
}

/* 搜索框 */
.bootstrap-table .search input.form-control {
    border-radius: 20px !important;
    padding-left: 40px !important;
    background: #f2f2f7 !important;
    border: 1px solid transparent !important;
}

.bootstrap-table .search input.form-control:focus {
    background: white !important;
    border-color: #007AFF !important;
}

/* 表格操作按钮 */
.table .btn-xs {
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
}

/* ===================================
   3. Layer 弹层增强
   ================================= */
.layui-layer {
    border-radius: 20px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden;
}

.layui-layer-title {
    background: white !important;
    border-bottom: 1px solid #e5e5ea !important;
    padding: 18px 24px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
}

.layui-layer-content {
    padding: 24px !important;
    font-size: 14px;
    color: #3c3c43;
}

.layui-layer-btn {
    border-top: 1px solid #e5e5ea !important;
    padding: 16px 24px !important;
    background: #f9f9f9 !important;
}

.layui-layer-btn a {
    border-radius: 10px !important;
    padding: 10px 24px !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
}

.layui-layer-btn .layui-layer-btn0 {
    background: #007AFF !important;
    border-color: #007AFF !important;
}

.layui-layer-btn .layui-layer-btn0:hover {
    background: #0051D5 !important;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3) !important;
}

.layui-layer-btn .layui-layer-btn1 {
    background: white !important;
    border: 1.5px solid #d1d1d6 !important;
    color: #3c3c43 !important;
}

.layui-layer-btn .layui-layer-btn1:hover {
    background: #f2f2f7 !important;
}

/* 关闭按钮 */
.layui-layer-setwin .layui-layer-close {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    border-radius: 8px !important;
    transition: all 0.2s;
}

.layui-layer-setwin .layui-layer-close:hover {
    background: #f2f2f7 !important;
}

/* ===================================
   4. Select2 下拉框增强
   ================================= */
.select2-container--default .select2-selection--single {
    border: 1.5px solid #d1d1d6 !important;
    border-radius: 12px !important;
    height: 44px !important;
    padding: 8px 14px !important;
    transition: all 0.2s;
}

.select2-container--default .select2-selection--single:focus {
    border-color: #007AFF !important;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1) !important;
}

.select2-container--default .select2-selection__rendered {
    line-height: 26px !important;
    color: #1d1d1f !important;
}

.select2-dropdown {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    margin-top: 4px !important;
}

.select2-container--default .select2-results__option {
    padding: 10px 16px !important;
    border-radius: 8px !important;
    margin: 4px 8px !important;
    transition: all 0.2s;
}

.select2-container--default .select2-results__option--highlighted {
    background: #f2f2f7 !important;
    color: #1d1d1f !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: rgba(0, 122, 255, 0.1) !important;
    color: #007AFF !important;
}

/* ===================================
   5. DatePicker 日期选择器增强
   ================================= */
.bootstrap-datetimepicker-widget {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden;
}

.bootstrap-datetimepicker-widget table td {
    border-radius: 8px !important;
    transition: all 0.2s;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: #007AFF !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25) !important;
}

.bootstrap-datetimepicker-widget table td:hover {
    background: #f2f2f7 !important;
}

.bootstrap-datetimepicker-widget thead tr:first-child th {
    border-radius: 0 !important;
    padding: 12px !important;
}

.bootstrap-datetimepicker-widget .picker-switch {
    font-weight: 600 !important;
    color: #1d1d1f !important;
}

/* ===================================
   6. iCheck 复选框/单选框增强
   ================================= */
.icheckbox_minimal-blue,
.iradio_minimal-blue {
    margin-right: 8px;
}

.icheckbox_minimal-blue.checked,
.iradio_minimal-blue.checked {
    background-position: -20px 0 !important;
}

/* ===================================
   7. Toastr 消息提示增强
   ================================= */
.toast {
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    padding: 16px 20px !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.toast-success {
    background: rgba(52, 199, 89, 0.95) !important;
}

.toast-error {
    background: rgba(255, 59, 48, 0.95) !important;
}

.toast-info {
    background: rgba(0, 122, 255, 0.95) !important;
}

.toast-warning {
    background: rgba(255, 149, 0, 0.95) !important;
}

.toast-title {
    font-weight: 600 !important;
    margin-bottom: 4px !important;
}

.toast-message {
    font-weight: 400 !important;
}

/* ===================================
   8. 树形控件增强
   ================================= */
.jstree-default .jstree-clicked {
    background: rgba(0, 122, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #007AFF !important;
}

.jstree-default .jstree-hovered {
    background: #f2f2f7 !important;
    border-radius: 8px !important;
}

.jstree-default .jstree-node {
    margin-bottom: 2px;
}

.jstree-default .jstree-anchor {
    padding: 6px 12px !important;
    border-radius: 8px !important;
    transition: all 0.2s;
}

/* ===================================
   9. 文件上传组件增强
   ================================= */
.plupload_wrapper {
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.plupload_button {
    border-radius: 10px !important;
    transition: all 0.2s !important;
}

.plupload_button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2) !important;
}

.plupload_filelist_header,
.plupload_filelist_footer {
    background: #f9f9f9 !important;
    border-radius: 0 !important;
}

/* ===================================
   10. 卡片网格布局
   ================================= */
.row {
    margin-left: -12px !important;
    margin-right: -12px !important;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* ===================================
   11. 统计卡片
   ================================= */
.info-box,
.small-box {
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.info-box:hover,
.small-box:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10) !important;
    transform: translateY(-2px);
}

.info-box-icon {
    border-radius: 12px 0 0 12px !important;
}

.small-box .icon {
    opacity: 0.15;
}

.small-box-footer {
    background: rgba(0, 0, 0, 0.03) !important;
    border-radius: 0 0 14px 14px !important;
}

/* ===================================
   12. 时间线
   ================================= */
.timeline > li > .timeline-item {
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.timeline > li > .timeline-item > .timeline-header {
    border-bottom: 1px solid #e5e5ea !important;
    padding: 12px 16px !important;
    font-weight: 600;
}

.timeline > li > .timeline-item > .timeline-body {
    padding: 16px !important;
}

.timeline > li > .fa,
.timeline > li > .glyphicon,
.timeline > li > .ion {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    line-height: 36px !important;
    border-radius: 10px !important;
}

/* ===================================
   13. 控制侧边栏
   ================================= */
.control-sidebar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-left: 1px solid #e5e5ea !important;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.06) !important;
}

.control-sidebar-heading {
    background: transparent !important;
    border-bottom: 1px solid #e5e5ea !important;
    padding: 16px 20px !important;
    font-weight: 600;
    color: #1d1d1f !important;
}

.control-sidebar-menu > li > a {
    border-radius: 10px !important;
    margin: 4px 12px !important;
    padding: 12px 16px !important;
    transition: all 0.2s;
}

.control-sidebar-menu > li > a:hover {
    background: #f2f2f7 !important;
}

/* ===================================
   14. 响应式适配
   ================================= */
@media (max-width: 768px) {
    .nav-addtabs > li > a {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    
    .layui-layer-title {
        padding: 14px 16px !important;
        font-size: 16px !important;
    }
    
    .layui-layer-content {
        padding: 16px !important;
    }
}

/* ===================================
   15. 打印优化
   ================================= */
@media print {
    .nav-addtabs,
    .control-sidebar,
    .btn-group {
        display: none !important;
    }
    
    .panel,
    .box,
    .info-box,
    .small-box {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* ===================================
   END - iOS Components
   ================================= */

