/* ===================================
   iOS 风格主题 - 完整版
   适用于 FastAdmin 后台管理系统
   设计灵感：Apple Human Interface Guidelines
   ================================= */

/* ===================================
   1. CSS 变量定义
   ================================= */
:root {
    /* iOS 主色系 */
    --ios-blue: #007AFF;
    --ios-blue-dark: #0051D5;
    --ios-blue-light: #5AC8FA;
    --ios-indigo: #5856D6;
    --ios-purple: #AF52DE;
    --ios-pink: #FF2D55;
    --ios-red: #FF3B30;
    --ios-orange: #FF9500;
    --ios-yellow: #FFCC00;
    --ios-green: #34C759;
    --ios-teal: #5AC8FA;
    --ios-cyan: #32ADE6;
    
    /* iOS 灰度系 */
    --ios-gray-1: #8E8E93;
    --ios-gray-2: #AEAEB2;
    --ios-gray-3: #C7C7CC;
    --ios-gray-4: #D1D1D6;
    --ios-gray-5: #E5E5EA;
    --ios-gray-6: #F2F2F7;
    
    /* iOS 背景色 */
    --ios-bg-primary: #F2F2F7;
    --ios-bg-secondary: #FFFFFF;
    --ios-bg-tertiary: #F9F9F9;
    
    /* iOS 文字色 */
    --ios-text-primary: #000000;
    --ios-text-secondary: #3C3C43;
    --ios-text-tertiary: #8E8E93;
    --ios-text-quaternary: #C7C7CC;
    
    /* iOS 圆角 */
    --ios-radius-xs: 6px;
    --ios-radius-sm: 8px;
    --ios-radius-md: 12px;
    --ios-radius-lg: 16px;
    --ios-radius-xl: 20px;
    --ios-radius-2xl: 24px;
    
    /* iOS 阴影 */
    --ios-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --ios-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --ios-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --ios-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.10);
    --ios-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);
    --ios-shadow-2xl: 0 12px 32px rgba(0, 0, 0, 0.15);
    
    /* iOS 间距 */
    --ios-spacing-xs: 4px;
    --ios-spacing-sm: 8px;
    --ios-spacing-md: 12px;
    --ios-spacing-lg: 16px;
    --ios-spacing-xl: 20px;
    --ios-spacing-2xl: 24px;
    --ios-spacing-3xl: 32px;
    --ios-spacing-4xl: 40px;
    
    /* iOS 过渡 */
    --ios-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --ios-transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --ios-transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===================================
   2. 全局基础样式
   ================================= */
body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--ios-bg-primary) !important;
    color: var(--ios-text-primary);
    font-size: 14px;
    line-height: 1.5;
}

* {
    scroll-behavior: smooth;
}

/* 选中效果 */
::selection {
    background: var(--ios-blue);
    color: white;
}

/* ===================================
   3. 顶部导航栏 (Header)
   ================================= */
.main-header {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--ios-gray-5) !important;
    box-shadow: var(--ios-shadow-sm) !important;
    height: 56px !important;
}

.main-header .logo {
    background: transparent !important;
    border: none !important;
    font-weight: 600;
    color: var(--ios-text-primary) !important;
    font-size: 18px;
    padding: 0 20px;
}

.main-header .logo:hover {
    background: rgba(0, 0, 0, 0.03) !important;
}

.main-header .navbar {
    background: transparent !important;
    border: none !important;
}

.main-header .navbar-custom-menu > .navbar-nav > li > a {
    color: var(--ios-text-secondary);
    transition: all var(--ios-transition-base);
    border-radius: var(--ios-radius-md);
    margin: 0 4px;
}

.main-header .navbar-custom-menu > .navbar-nav > li > a:hover {
    background: rgba(0, 122, 255, 0.08) !important;
    color: var(--ios-blue);
}

/* 下拉菜单 */
.dropdown-menu {
    border: none !important;
    border-radius: var(--ios-radius-lg) !important;
    box-shadow: var(--ios-shadow-xl) !important;
    padding: 8px !important;
    margin-top: 8px !important;
}

.dropdown-menu > li > a {
    border-radius: var(--ios-radius-sm) !important;
    padding: 10px 16px !important;
    color: var(--ios-text-secondary) !important;
    transition: all var(--ios-transition-base);
    margin: 2px 0;
}

.dropdown-menu > li > a:hover {
    background: var(--ios-gray-6) !important;
    color: var(--ios-text-primary) !important;
}

/* ===================================
   4. 侧边栏 (Sidebar)
   ================================= */
.main-sidebar {
    background: var(--ios-bg-secondary) !important;
    border-right: 1px solid var(--ios-gray-5) !important;
    box-shadow: none !important;
    padding-top: 56px !important;
}

.sidebar {
    padding: 12px !important;
}

/* 侧边栏菜单 */
.sidebar-menu {
    padding: 0 !important;
}

.sidebar-menu > li {
    margin-bottom: 4px;
}

.sidebar-menu > li > a {
    border-radius: var(--ios-radius-md) !important;
    padding: 12px 16px !important;
    color: var(--ios-text-secondary) !important;
    transition: all var(--ios-transition-base);
    border-left: none !important;
    font-weight: 500;
}

.sidebar-menu > li > a:hover {
    background: var(--ios-gray-6) !important;
    color: var(--ios-text-primary) !important;
}

.sidebar-menu > li.active > a {
    background: var(--ios-blue) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

.sidebar-menu > li.active > a:hover {
    background: var(--ios-blue-dark) !important;
}

/* 子菜单 */
.sidebar-menu .treeview-menu {
    background: transparent !important;
    padding: 4px 0 4px 16px !important;
}

.sidebar-menu .treeview-menu > li > a {
    border-radius: var(--ios-radius-sm) !important;
    padding: 8px 16px !important;
    color: var(--ios-text-tertiary) !important;
    font-size: 13px;
}

.sidebar-menu .treeview-menu > li > a:hover {
    background: var(--ios-gray-6) !important;
    color: var(--ios-text-primary) !important;
}

.sidebar-menu .treeview-menu > li.active > a {
    background: rgba(0, 122, 255, 0.1) !important;
    color: var(--ios-blue) !important;
}

/* 侧边栏图标 */
.sidebar-menu li > a > .fa,
.sidebar-menu li > a > .glyphicon,
.sidebar-menu li > a > .ion {
    margin-right: 12px;
    opacity: 0.7;
}

.sidebar-menu li.active > a > .fa,
.sidebar-menu li.active > a > .glyphicon,
.sidebar-menu li.active > a > .ion {
    opacity: 1;
}

/* ===================================
   5. 内容区域 (Content)
   ================================= */
.content-wrapper {
    background: var(--ios-bg-primary) !important;
    padding: var(--ios-spacing-2xl) !important;
    margin-top: 56px !important;
}

.content {
    background: transparent !important;
}

/* 页面内容容器 */
.content > .row {
    margin: 0 !important;
}

/* ===================================
   6. 面包屑导航
   ================================= */
#ribbon {
    background: transparent !important;
    border: none !important;
    padding: 0 0 var(--ios-spacing-lg) 0 !important;
    margin-bottom: var(--ios-spacing-lg);
}

.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.breadcrumb > li {
    font-size: 13px;
}

.breadcrumb > li > a {
    color: var(--ios-blue);
    text-decoration: none;
    transition: all var(--ios-transition-base);
}

.breadcrumb > li > a:hover {
    color: var(--ios-blue-dark);
}

.breadcrumb > li + li:before {
    content: "›";
    font-size: 16px;
    color: var(--ios-gray-2);
    padding: 0 8px;
}

.breadcrumb > .active {
    color: var(--ios-text-secondary);
}

/* ===================================
   7. 卡片样式
   ================================= */
.panel,
.box,
.panel-default,
.box-default {
    background: var(--ios-bg-secondary) !important;
    border: none !important;
    border-radius: var(--ios-radius-lg) !important;
    box-shadow: var(--ios-shadow-sm) !important;
    margin-bottom: var(--ios-spacing-lg);
    transition: all var(--ios-transition-base);
    overflow: hidden;
}

.panel:hover,
.box:hover {
    box-shadow: var(--ios-shadow-md) !important;
}

.panel-heading,
.box-header {
    background: var(--ios-bg-secondary) !important;
    border-bottom: 1px solid var(--ios-gray-5) !important;
    padding: var(--ios-spacing-lg) var(--ios-spacing-xl) !important;
    border-radius: 0 !important;
}

.panel-title,
.box-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ios-text-primary);
}

.panel-body,
.box-body {
    padding: var(--ios-spacing-xl) !important;
}

.panel-footer,
.box-footer {
    background: var(--ios-bg-tertiary) !important;
    border-top: 1px solid var(--ios-gray-5) !important;
    padding: var(--ios-spacing-lg) var(--ios-spacing-xl) !important;
}

/* ===================================
   8. 按钮样式
   ================================= */
.btn {
    border: none !important;
    border-radius: var(--ios-radius-md) !important;
    padding: 10px 20px !important;
    font-weight: 500;
    transition: all var(--ios-transition-base);
    box-shadow: none !important;
    font-size: 14px;
}

.btn:active {
    transform: scale(0.98);
}

/* 主要按钮 */
.btn-primary {
    background: var(--ios-blue) !important;
    color: white !important;
}

.btn-primary:hover {
    background: var(--ios-blue-dark) !important;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3) !important;
}

/* 成功按钮 */
.btn-success {
    background: var(--ios-green) !important;
    color: white !important;
}

.btn-success:hover {
    background: #2DB04F !important;
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3) !important;
}

/* 警告按钮 */
.btn-warning {
    background: var(--ios-orange) !important;
    color: white !important;
}

.btn-warning:hover {
    background: #E68600 !important;
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3) !important;
}

/* 危险按钮 */
.btn-danger {
    background: var(--ios-red) !important;
    color: white !important;
}

.btn-danger:hover {
    background: #E62E24 !important;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3) !important;
}

/* 信息按钮 */
.btn-info {
    background: var(--ios-teal) !important;
    color: white !important;
}

.btn-info:hover {
    background: #3FB8E8 !important;
    box-shadow: 0 4px 12px rgba(90, 200, 250, 0.3) !important;
}

/* 默认按钮 */
.btn-default {
    background: var(--ios-bg-secondary) !important;
    color: var(--ios-text-secondary) !important;
    border: 1px solid var(--ios-gray-4) !important;
}

.btn-default:hover {
    background: var(--ios-gray-6) !important;
    color: var(--ios-text-primary) !important;
}

/* 按钮尺寸 */
.btn-xs {
    padding: 4px 12px !important;
    font-size: 12px !important;
    border-radius: var(--ios-radius-sm) !important;
}

.btn-sm {
    padding: 6px 16px !important;
    font-size: 13px !important;
}

.btn-lg {
    padding: 12px 24px !important;
    font-size: 16px !important;
    border-radius: var(--ios-radius-lg) !important;
}

/* ===================================
   9. 表格样式
   ================================= */
.table-responsive {
    border: none !important;
    border-radius: var(--ios-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--ios-shadow-sm);
}

.table {
    background: var(--ios-bg-secondary) !important;
    border: none !important;
    margin-bottom: 0 !important;
}

.table thead {
    background: var(--ios-bg-tertiary) !important;
}

.table thead th {
    border: none !important;
    border-bottom: 2px solid var(--ios-gray-5) !important;
    color: var(--ios-text-secondary) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px !important;
}

.table tbody tr {
    border-bottom: 1px solid var(--ios-gray-5) !important;
    transition: background var(--ios-transition-base);
}

.table tbody tr:last-child {
    border-bottom: none !important;
}

.table tbody tr:hover {
    background: var(--ios-bg-tertiary) !important;
}

.table tbody td {
    border: none !important;
    padding: 14px 16px !important;
    vertical-align: middle !important;
    color: var(--ios-text-secondary);
}

/* 条纹表格 */
.table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--ios-bg-secondary) !important;
}

.table-striped > tbody > tr:nth-of-type(even) {
    background: var(--ios-bg-tertiary) !important;
}

/* Bootstrap Table 工具栏 */
.fixed-table-toolbar {
    background: var(--ios-bg-secondary) !important;
    border: none !important;
    padding: var(--ios-spacing-lg) !important;
    border-radius: var(--ios-radius-lg) var(--ios-radius-lg) 0 0 !important;
}

.fixed-table-container {
    border: none !important;
    border-radius: var(--ios-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--ios-shadow-sm);
}

/* ===================================
   10. 表单样式
   ================================= */
.form-control {
    border: 1.5px solid var(--ios-gray-4) !important;
    border-radius: var(--ios-radius-md) !important;
    padding: 10px 14px !important;
    font-size: 14px;
    color: var(--ios-text-primary);
    background: var(--ios-bg-secondary) !important;
    transition: all var(--ios-transition-base);
    box-shadow: none !important;
}

.form-control:focus {
    border-color: var(--ios-blue) !important;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1) !important;
    outline: none !important;
    background: var(--ios-bg-secondary) !important;
}

.form-control::placeholder {
    color: var(--ios-gray-2);
}

.form-control[disabled],
.form-control[readonly] {
    background: var(--ios-gray-6) !important;
    color: var(--ios-gray-1) !important;
}

/* 表单组 */
.form-group {
    margin-bottom: var(--ios-spacing-lg);
}

.form-group label {
    font-weight: 500;
    color: var(--ios-text-secondary);
    margin-bottom: 8px;
    font-size: 13px;
}

/* 输入组 */
.input-group-addon {
    background: var(--ios-gray-6) !important;
    border: 1.5px solid var(--ios-gray-4) !important;
    border-radius: var(--ios-radius-md) !important;
    color: var(--ios-text-tertiary);
}

/* 复选框和单选框 */
.checkbox,
.radio {
    margin-top: 8px;
    margin-bottom: 8px;
}

.checkbox label,
.radio label {
    font-weight: 400;
    color: var(--ios-text-secondary);
    cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    accent-color: var(--ios-blue);
    cursor: pointer;
}

/* Select 下拉框 */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%238E8E93' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* ===================================
   11. 标签和徽章
   ================================= */
.label,
.badge {
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    border: none !important;
}

.label-primary,
.badge-primary {
    background: var(--ios-blue) !important;
    color: white !important;
}

.label-success,
.badge-success {
    background: var(--ios-green) !important;
    color: white !important;
}

.label-warning,
.badge-warning {
    background: var(--ios-orange) !important;
    color: white !important;
}

.label-danger,
.badge-danger {
    background: var(--ios-red) !important;
    color: white !important;
}

.label-info,
.badge-info {
    background: var(--ios-teal) !important;
    color: white !important;
}

.label-default,
.badge-default {
    background: var(--ios-gray-3) !important;
    color: var(--ios-text-secondary) !important;
}

/* ===================================
   12. 标签页 (Tabs)
   ================================= */
.nav-tabs {
    border: none !important;
    background: var(--ios-bg-secondary);
    border-radius: var(--ios-radius-lg);
    padding: 6px;
    margin-bottom: var(--ios-spacing-lg);
    box-shadow: var(--ios-shadow-sm);
}

.nav-tabs > li {
    margin: 0 2px;
}

.nav-tabs > li > a {
    border: none !important;
    border-radius: var(--ios-radius-md) !important;
    padding: 10px 20px !important;
    color: var(--ios-text-secondary) !important;
    transition: all var(--ios-transition-base);
    margin: 0 !important;
}

.nav-tabs > li > a:hover {
    background: var(--ios-gray-6) !important;
    color: var(--ios-text-primary) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: var(--ios-blue) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25) !important;
    border: none !important;
}

.tab-content {
    background: transparent;
}

/* ===================================
   13. 弹窗和模态框
   ================================= */
.modal-content {
    border: none !important;
    border-radius: var(--ios-radius-2xl) !important;
    box-shadow: var(--ios-shadow-2xl) !important;
    overflow: hidden;
}

.modal-header {
    background: var(--ios-bg-secondary) !important;
    border-bottom: 1px solid var(--ios-gray-5) !important;
    padding: var(--ios-spacing-xl) var(--ios-spacing-2xl) !important;
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ios-text-primary);
}

.modal-body {
    padding: var(--ios-spacing-2xl) !important;
    background: var(--ios-bg-secondary);
}

.modal-footer {
    background: var(--ios-bg-tertiary) !important;
    border-top: 1px solid var(--ios-gray-5) !important;
    padding: var(--ios-spacing-lg) var(--ios-spacing-2xl) !important;
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

.modal-backdrop.in {
    opacity: 1 !important;
}

/* ===================================
   14. 提示框 (Alerts)
   ================================= */
.alert {
    border: none !important;
    border-radius: var(--ios-radius-lg) !important;
    padding: 16px 20px !important;
    font-size: 14px;
    box-shadow: var(--ios-shadow-sm);
}

.alert-success {
    background: rgba(52, 199, 89, 0.1) !important;
    color: #1F8A3C !important;
}

.alert-info {
    background: rgba(90, 200, 250, 0.1) !important;
    color: #0077CC !important;
}

.alert-warning {
    background: rgba(255, 149, 0, 0.1) !important;
    color: #CC7A00 !important;
}

.alert-danger {
    background: rgba(255, 59, 48, 0.1) !important;
    color: #CC2F26 !important;
}

/* ===================================
   15. 分页样式
   ================================= */
.pagination {
    margin: var(--ios-spacing-lg) 0 !important;
}

.pagination > li > a,
.pagination > li > span {
    border: none !important;
    border-radius: var(--ios-radius-md) !important;
    margin: 0 4px;
    padding: 8px 14px !important;
    color: var(--ios-text-secondary) !important;
    background: var(--ios-bg-secondary) !important;
    transition: all var(--ios-transition-base);
}

.pagination > li > a:hover {
    background: var(--ios-gray-6) !important;
    color: var(--ios-text-primary) !important;
}

.pagination > li.active > a,
.pagination > li.active > span {
    background: var(--ios-blue) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

.pagination > li.disabled > a,
.pagination > li.disabled > span {
    background: var(--ios-gray-6) !important;
    color: var(--ios-gray-2) !important;
    cursor: not-allowed;
}

/* ===================================
   16. 进度条
   ================================= */
.progress {
    background: var(--ios-gray-6) !important;
    border-radius: 100px !important;
    height: 8px !important;
    box-shadow: none !important;
    overflow: hidden;
}

.progress-bar {
    background: var(--ios-blue) !important;
    border-radius: 100px !important;
    transition: width 0.6s ease;
}

.progress-bar-success {
    background: var(--ios-green) !important;
}

.progress-bar-warning {
    background: var(--ios-orange) !important;
}

.progress-bar-danger {
    background: var(--ios-red) !important;
}

/* ===================================
   17. 工具提示
   ================================= */
.tooltip-inner {
    background: rgba(0, 0, 0, 0.85) !important;
    border-radius: var(--ios-radius-md) !important;
    padding: 8px 12px !important;
    font-size: 12px;
    box-shadow: var(--ios-shadow-lg);
}

.tooltip.top .tooltip-arrow {
    border-top-color: rgba(0, 0, 0, 0.85) !important;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: rgba(0, 0, 0, 0.85) !important;
}

.tooltip.left .tooltip-arrow {
    border-left-color: rgba(0, 0, 0, 0.85) !important;
}

.tooltip.right .tooltip-arrow {
    border-right-color: rgba(0, 0, 0, 0.85) !important;
}

/* ===================================
   18. 搜索框
   ================================= */
.search-box,
.searchbox {
    position: relative;
}

.search-box .form-control,
.searchbox .form-control {
    padding-left: 40px !important;
    border-radius: 24px !important;
    background: var(--ios-bg-tertiary) !important;
    border-color: transparent !important;
}

.search-box .form-control:focus,
.searchbox .form-control:focus {
    background: var(--ios-bg-secondary) !important;
    border-color: var(--ios-blue) !important;
}

.search-box::before,
.searchbox::before {
    content: "🔍";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    opacity: 0.5;
}

/* ===================================
   19. 文件上传
   ================================= */
.file-upload-wrapper {
    background: var(--ios-bg-secondary);
    border: 2px dashed var(--ios-gray-4);
    border-radius: var(--ios-radius-lg);
    padding: var(--ios-spacing-3xl);
    text-align: center;
    transition: all var(--ios-transition-base);
    cursor: pointer;
}

.file-upload-wrapper:hover {
    border-color: var(--ios-blue);
    background: rgba(0, 122, 255, 0.05);
}

.file-upload-wrapper.dragover {
    border-color: var(--ios-blue);
    background: rgba(0, 122, 255, 0.1);
}

/* ===================================
   20. 加载动画
   ================================= */
.loading {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--ios-gray-5);
    border-top-color: var(--ios-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===================================
   21. 空状态
   ================================= */
.empty-state {
    text-align: center;
    padding: var(--ios-spacing-4xl);
    color: var(--ios-text-tertiary);
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: var(--ios-spacing-lg);
    opacity: 0.3;
}

.empty-state-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--ios-text-secondary);
}

/* ===================================
   22. 响应式优化
   ================================= */
@media (max-width: 768px) {
    .content-wrapper {
        padding: var(--ios-spacing-md) !important;
    }
    
    .panel-body,
    .box-body {
        padding: var(--ios-spacing-lg) !important;
    }
    
    .table thead th,
    .table tbody td {
        padding: 12px 8px !important;
        font-size: 13px !important;
    }
    
    .btn {
        padding: 8px 16px !important;
    }
}

@media (max-width: 480px) {
    .content-wrapper {
        padding: var(--ios-spacing-sm) !important;
    }
    
    .sidebar {
        padding: 8px !important;
    }
    
    .modal-body {
        padding: var(--ios-spacing-lg) !important;
    }
}

/* ===================================
   23. 暗色模式支持（可选）
   ================================= */
@media (prefers-color-scheme: dark) {
    .dark-mode-enabled {
        --ios-bg-primary: #000000;
        --ios-bg-secondary: #1C1C1E;
        --ios-bg-tertiary: #2C2C2E;
        
        --ios-text-primary: #FFFFFF;
        --ios-text-secondary: #EBEBF5;
        --ios-text-tertiary: #AEAEB2;
        
        --ios-gray-5: #38383A;
        --ios-gray-6: #2C2C2E;
    }
}

/* ===================================
   24. 自定义滚动条
   ================================= */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--ios-gray-3);
    border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ios-gray-2);
}

/* ===================================
   25. 打印样式优化
   ================================= */
@media print {
    .main-header,
    .main-sidebar,
    .control-sidebar,
    .main-footer {
        display: none !important;
    }
    
    .content-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .panel,
    .box {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* ===================================
   END - iOS Theme
   ================================= */