/*
 * 优锋派 ERP - Apple Design Theme
 * Inspired by Apple Human Interface Guidelines
 * Loads after layui.css / mian.css / web.css to override styles
 */

/* ============================================
   CSS Variables - Apple Color System
   ============================================ */
:root {
    --apple-blue: #007AFF;
    --apple-blue-hover: #0062CC;
    --apple-blue-light: #E8F2FF;
    --apple-green: #34C759;
    --apple-green-light: #E8FAF0;
    --apple-red: #FF3B30;
    --apple-red-light: #FFE8E7;
    --apple-orange: #FF9500;
    --apple-orange-light: #FFF3E0;
    --apple-purple: #AF52DE;
    --apple-purple-light: #F3E5FF;
    --apple-teal: #5AC8FA;
    --apple-teal-light: #E3F5FD;
    --apple-gray: #8E8E93;
    --apple-gray-light: #F2F2F7;
    --apple-gray-mid: #D1D1D6;
    --apple-gray-dark: #636366;
    --apple-bg: #F5F5F7;
    --apple-card: #FFFFFF;
    --apple-text-primary: #1D1D1F;
    --apple-text-secondary: #86868B;
    --apple-text-tertiary: #AEAEB2;
    --apple-border: #E5E5EA;
    --apple-shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --apple-shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
    --apple-shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
    --apple-radius-sm: 8px;
    --apple-radius-md: 12px;
    --apple-radius-lg: 16px;
    --apple-radius-xl: 20px;
    --apple-nav-height: 52px;
    --apple-transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ============================================
   Base / Reset Overrides
   ============================================ */
body {
    background: var(--apple-bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600 !important;
    color: var(--apple-text-primary);
}

/* ============================================
   Navigation Bar - Frosted Glass
   ============================================ */
.lay-blog .header {
    background: #ffffff !important;
    height: var(--apple-nav-height) !important;
    line-height: var(--apple-nav-height) !important;
    margin-bottom: calc(-1 * var(--apple-nav-height)) !important;
    border-bottom: 1px solid var(--apple-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.lay-blog .header-wrap {
    padding: 0 20px !important;
}

/* Navigation items - force transparent bg on layui-nav */
.lay-blog .layui-nav,
.lay-blog .layui-nav.layui-bg-blue,
.lay-blog .header .layui-nav,
.lay-blog .header-wrap .layui-nav {
    background: transparent !important;
    background-color: transparent !important;
}

.lay-blog .layui-nav .layui-nav-item {
    line-height: var(--apple-nav-height) !important;
    margin: 0 4px !important;
}

.lay-blog .layui-nav .layui-nav-item a,
.lay-blog .layui-nav .layui-nav-item a:hover {
    color: var(--apple-text-primary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 0 18px !important;
    transition: all var(--apple-transition);
    border-radius: 6px;
}

.lay-blog .layui-nav .layui-nav-item a:hover {
    color: var(--apple-blue) !important;
    background: rgba(0, 122, 255, 0.08) !important;
}

/* Active nav item */
.lay-blog .layui-nav .layui-nav-item.layui-this a,
.lay-blog .layui-nav .layui-nav-item.layui-this:after {
    color: var(--apple-blue) !important;
    background: transparent !important;
}

.lay-blog .layui-nav .layui-this:after,
.lay-blog .layui-nav-bar {
    display: none !important;
}

/* Dropdown child menus */
.lay-blog .layui-nav-child {
    background: #ffffff !important;
    border: 1px solid var(--apple-border) !important;
    border-radius: var(--apple-radius-md) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
    padding: 6px !important;
    top: calc(var(--apple-nav-height) - 4px) !important;
}

.lay-blog .layui-nav-child dd a {
    color: var(--apple-text-primary) !important;
    font-size: 13px !important;
    padding: 0 16px !important;
    border-radius: 6px !important;
    line-height: 34px !important;
    transition: background var(--apple-transition);
}

.lay-blog .layui-nav-child dd a:hover {
    color: var(--apple-text-primary) !important;
    background: var(--apple-blue-light) !important;
}

.lay-blog .layui-nav-child dd.layui-this a {
    color: var(--apple-blue) !important;
    background: var(--apple-blue-light) !important;
}

/* Badge */
.lay-blog .layui-badge {
    background: var(--apple-red) !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    padding: 0 5px !important;
    font-weight: 500;
}

/* User info area */
.lay-blog .personal,
.lay-blog .personal i {
    color: var(--apple-text-secondary) !important;
    font-size: 13px !important;
    transition: color var(--apple-transition);
}

.lay-blog .personal:hover {
    color: var(--apple-blue) !important;
}

/* Mobile nav icon */
.lay-blog .mobile-nav i {
    color: var(--apple-text-primary) !important;
}

/* Mobile popup nav */
.lay-blog ul.pop-nav {
    background: #ffffff !important;
    top: var(--apple-nav-height) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
}

.lay-blog ul.pop-nav li {
    border-top-color: rgba(0, 0, 0, 0.06) !important;
}

.lay-blog ul.pop-nav li a {
    color: var(--apple-text-primary) !important;
}

/* ============================================
   Container Area
   ============================================ */
.lay-blog .container-wrap {
    padding-top: 72px !important;
    min-height: auto !important;
}

/* ============================================
   Breadcrumb
   ============================================ */
.breadcrumb,
.layui-breadcrumb {
    font-size: 13px !important;
    color: var(--apple-text-secondary) !important;
}

.breadcrumb a,
.layui-breadcrumb a {
    color: var(--apple-text-secondary) !important;
    transition: color var(--apple-transition);
}

.breadcrumb a:hover,
.layui-breadcrumb a:hover {
    color: var(--apple-blue) !important;
}

/* ============================================
   Form - Apple Style Inputs
   ============================================ */
.layui-form-pane .layui-form-label {
    background: var(--apple-gray-light) !important;
    border: 1px solid var(--apple-border) !important;
    border-right: none !important;
    color: var(--apple-text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: var(--apple-radius-sm) 0 0 var(--apple-radius-sm) !important;
    height: 38px !important;
    line-height: 36px !important;
}

.layui-form-pane .layui-input-block {
    border-color: var(--apple-border) !important;
    border-radius: 0 var(--apple-radius-sm) var(--apple-radius-sm) 0 !important;
}

.layui-form-pane .layui-input {
    border-color: var(--apple-border) !important;
    border-radius: var(--apple-radius-sm) !important;
}

.layui-form-pane .layui-input:focus {
    border-color: var(--apple-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15) !important;
}

.layui-input,
.layui-textarea,
.layui-select {
    border-color: var(--apple-border) !important;
    border-radius: var(--apple-radius-sm) !important;
    background: #fff !important;
    color: var(--apple-text-primary) !important;
    font-size: 14px !important;
    transition: border-color var(--apple-transition), box-shadow var(--apple-transition);
}

.layui-input:focus,
.layui-textarea:focus {
    border-color: var(--apple-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15) !important;
}

.layui-input::placeholder,
.layui-textarea::placeholder {
    color: var(--apple-text-tertiary) !important;
}

/* Select dropdown */
.layui-form-select .layui-input {
    border-radius: var(--apple-radius-sm) !important;
}

.layui-form-select dl {
    border-color: var(--apple-border) !important;
    border-radius: var(--apple-radius-sm) !important;
    box-shadow: var(--apple-shadow-md) !important;
}

.layui-form-select dl dd.layui-this {
    background: var(--apple-blue-light) !important;
    color: var(--apple-blue) !important;
}

.layui-form-select dl dd:hover {
    background: var(--apple-gray-light) !important;
}

/* Form item spacing */
.layui-form-pane .layui-form-item {
    border-color: transparent !important;
    margin-bottom: 12px !important;
}

/* ============================================
   Buttons - Apple Pill Style
   ============================================ */
.layui-btn {
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 18px !important;
    transition: all var(--apple-transition) !important;
    border: none !important;
    box-shadow: none !important;
}

.layui-btn-normal {
    background: var(--apple-blue) !important;
    color: #fff !important;
}

.layui-btn-normal:hover {
    background: var(--apple-blue-hover) !important;
}

.layui-btn-primary {
    background: rgba(0, 0, 0, 0.04) !important;
    color: var(--apple-text-primary) !important;
    border: 0.5px solid var(--apple-border) !important;
}

.layui-btn-primary:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: var(--apple-gray-mid) !important;
}

.layui-btn-warm {
    background: var(--apple-orange) !important;
    color: #fff !important;
}

.layui-btn-danger {
    background: var(--apple-red) !important;
    color: #fff !important;
}

.layui-btn-sm {
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

.layui-btn-xs {
    height: 26px !important;
    line-height: 26px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

.layui-btn-radius {
    border-radius: 18px !important;
}

/* ============================================
   Tables - Clean Apple Style
   ============================================ */
.layui-table-view {
    border-color: var(--apple-border) !important;
    border-radius: var(--apple-radius-md) !important;
    overflow: hidden;
    box-shadow: var(--apple-shadow-sm) !important;
    background: var(--apple-card) !important;
}

.layui-table-view .layui-table {
    width: 100% !important;
}

.layui-table thead tr {
    background: var(--apple-gray-light) !important;
}

.layui-table thead th {
    background: transparent !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--apple-text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-color: transparent !important;
    padding: 10px 12px !important;
}

.layui-table tbody tr {
    transition: background var(--apple-transition);
}

.layui-table tbody td {
    font-size: 14px !important;
    color: var(--apple-text-primary) !important;
    border-color: var(--apple-border) !important;
    padding: 10px 12px !important;
}

.layui-table-hover td:hover,
.layui-table tbody tr:hover td {
    background: var(--apple-blue-light) !important;
}

.layui-table[lay-even] tr:nth-child(even) td {
    background: transparent !important;
}

/* Table pagination */
.layui-table-page {
    border-top-color: var(--apple-border) !important;
    background: var(--apple-card) !important;
}

.layui-laypage a,
.layui-laypage span {
    border-radius: 6px !important;
    border-color: var(--apple-border) !important;
    color: var(--apple-text-primary) !important;
    font-size: 12px !important;
    transition: all var(--apple-transition);
}

.layui-laypage .layui-laypage-curr em {
    background: var(--apple-blue) !important;
    border-radius: 6px !important;
}

.layui-laypage a:hover {
    color: var(--apple-blue) !important;
}

/* Table header toolbar */
.layui-table-tool {
    background: var(--apple-card) !important;
    border-color: var(--apple-border) !important;
}

.layui-table-tool .layui-btn {
    margin: 6px 8px 6px 0 !important;
}

/* Table fixed columns border */
.layui-table-fixed-r,
.layui-table-fixed-l {
    box-shadow: 1px 0 4px rgba(0,0,0,0.04) !important;
}

/* ============================================
   Table Data Numbers - Clean Plain Text
   ============================================ */
/* 表格里的badge全部变成普通数字 */
.layui-table tbody td .layui-badge,
.layui-table tbody td .ly-bg-red,
.layui-table tbody td .ly-bg-green,
.layui-table tbody td .ly-bg-green-plus,
.layui-table tbody td .ly-bg-orange,
.layui-table tbody td .ly-bg-blue,
.layui-table tbody td .ly-bg-blue-plus,
.layui-table tbody td .ly-bg-cyan,
.layui-table tbody td .ly-bg-black {
    display: inline !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: inherit !important;
    height: auto !important;
    font-family: inherit !important;
    letter-spacing: normal !important;
    color: var(--apple-text-primary) !important;
}

/* ============================================
   Cards & Panels
   ============================================ */
.layui-card {
    border: none !important;
    border-radius: var(--apple-radius-lg) !important;
    box-shadow: var(--apple-shadow-sm) !important;
    background: var(--apple-card) !important;
}

.layui-card-header {
    border-bottom-color: var(--apple-border) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--apple-text-primary) !important;
}

.layui-card-body {
    color: var(--apple-text-primary) !important;
}

/* ============================================
   Blockquote / Summary Bar
   ============================================ */
.layui-elem-quote {
    background: var(--apple-card) !important;
    border-left: 3px solid var(--apple-blue) !important;
    border-radius: var(--apple-radius-sm) !important;
    box-shadow: var(--apple-shadow-sm) !important;
    font-size: 13px !important;
    color: var(--apple-text-primary) !important;
    padding: 12px 16px !important;
}

.layui-quote-nm {
    border-left-color: var(--apple-gray-mid) !important;
}

/* ============================================
   Tabs - Apple Segmented Control
   ============================================ */
.layui-tab-title li {
    font-size: 13px !important;
    color: var(--apple-text-secondary) !important;
    font-weight: 500 !important;
    padding: 0 16px !important;
    transition: color var(--apple-transition);
}

.layui-tab-title .layui-this {
    color: var(--apple-blue) !important;
}

.layui-tab-title .layui-this:after {
    background: var(--apple-blue) !important;
    border-radius: 2px !important;
    height: 2px !important;
}

.layui-tab-title li:hover {
    color: var(--apple-blue) !important;
}

.layui-tab-brief > .layui-tab-title .layui-this:after {
    border: none !important;
    border-radius: 0 !important;
}

/* ============================================
   Badge / Tags
   ============================================ */
.layui-badge {
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 500;
    padding: 0 6px !important;
    line-height: 18px !important;
    height: 18px !important;
}

.layui-badge-rim {
    border-radius: 10px !important;
    color: var(--apple-text-secondary) !important;
    border-color: var(--apple-border) !important;
}

/* ============================================
   Layer / Modal - Apple Dialog
   ============================================ */
.layui-layer {
    border-radius: var(--apple-radius-lg) !important;
    box-shadow: var(--apple-shadow-lg) !important;
    overflow: hidden;
}

.layui-layer-title {
    background: #f9f9f9 !important;
    color: var(--apple-text-primary) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border-bottom: 1px solid var(--apple-border) !important;
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 20px !important;
}

.layui-layer-setwin a {
    color: var(--apple-text-secondary) !important;
    top: 14px !important;
    transition: color var(--apple-transition);
}

.layui-layer-setwin a:hover {
    color: var(--apple-text-primary) !important;
}

.layui-layer-btn a {
    border-radius: 8px !important;
    font-weight: 500 !important;
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 20px !important;
    transition: all var(--apple-transition);
}

.layui-layer-btn .layui-layer-btn0 {
    background: var(--apple-blue) !important;
    border-color: var(--apple-blue) !important;
}

/* ============================================
   Tree Component
   ============================================ */
.layui-tree {
    background: var(--apple-card) !important;
    border-radius: var(--apple-radius-md) !important;
    box-shadow: var(--apple-shadow-sm) !important;
    padding: 12px !important;
}

.layui-tree a {
    color: var(--apple-text-primary) !important;
    font-size: 13px !important;
    transition: color var(--apple-transition);
}

.layui-tree a:hover {
    color: var(--apple-blue) !important;
}

.layui-tree-entry {
    border-radius: 6px !important;
    padding: 0 8px !important;
    transition: background var(--apple-transition);
}

.layui-tree-entry:hover {
    background: var(--apple-gray-light) !important;
}

/* ============================================
   Switch / Toggle
   ============================================ */
.layui-form-switch {
    border-radius: 30px !important;
    border-color: var(--apple-gray-mid) !important;
    background: var(--apple-gray-mid) !important;
    height: 22px !important;
    line-height: 22px !important;
    min-width: 35px !important;
    transition: all var(--apple-transition);
}

.layui-form-onswitch {
    border-color: var(--apple-green) !important;
    background: var(--apple-green) !important;
}

.layui-form-switch i {
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    top: 3px !important;
    left: 5px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: all var(--apple-transition);
}

.layui-form-onswitch i {
    left: 100% !important;
    margin-left: -21px !important;
}

/* ============================================
   Footer
   ============================================ */
.lay-blog .footer {
    background: #ffffff !important;
    color: var(--apple-text-secondary) !important;
    font-size: 12px !important;
    border-top: 1px solid var(--apple-border);
    margin-top: 40px !important;
}

.lay-blog .footer a {
    color: var(--apple-blue) !important;
}

/* ============================================
   Loading
   ============================================ */
.layui-layer-loading .layui-layer-content .layui-layer-ico1,
.layui-layer-loading .layui-layer-content .layui-layer-ico2,
.layui-layer-loading .layui-layer-content .layui-layer-ico3 {
    border-color: var(--apple-blue) !important;
}

/* ============================================
   Custom Color Utility Classes Override
   ============================================ */
.ly-text-red { color: var(--apple-red) !important; }
.ly-text-blue { color: var(--apple-blue) !important; }
.ly-text-blue-plus { color: var(--apple-blue) !important; }
.ly-text-orange { color: var(--apple-orange) !important; }
.ly-text-green { color: var(--apple-green) !important; }
.ly-text-green-plus { color: var(--apple-green) !important; }
.ly-text-cyan { color: var(--apple-teal) !important; }
.ly-text-black { color: var(--apple-text-primary) !important; }
.ly-text-gray { color: var(--apple-gray) !important; }

.ly-bg-red { background-color: var(--apple-red) !important; color: #fff !important; border-radius: 10px !important; }
.ly-bg-blue { background-color: var(--apple-blue) !important; color: #fff !important; border-radius: 10px !important; }
.ly-bg-blue-plus { background-color: var(--apple-blue) !important; color: #fff !important; border-radius: 10px !important; }
.ly-bg-orange { background-color: var(--apple-orange) !important; color: #fff !important; border-radius: 10px !important; }
.ly-bg-green { background-color: var(--apple-green) !important; color: #fff !important; border-radius: 10px !important; }
.ly-bg-green-plus { background-color: var(--apple-green) !important; color: #fff !important; border-radius: 10px !important; }
.ly-bg-cyan { background-color: var(--apple-teal) !important; color: #fff !important; border-radius: 10px !important; }
.ly-bg-black { background-color: var(--apple-text-primary) !important; color: #fff !important; border-radius: 10px !important; }

/* ============================================
   Dashboard KPI Cards
   ============================================ */
.ht {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--apple-text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hc {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--apple-text-primary) !important;
    letter-spacing: -0.5px;
}

/* KPI container override */
.layui-col-xs4 {
    background: var(--apple-card) !important;
    border-radius: var(--apple-radius-md) !important;
    box-shadow: var(--apple-shadow-sm) !important;
    padding: 20px !important;
    margin-right: 12px !important;
    border: none !important;
}

/* ============================================
   Scrollbar - Apple Thin Style
   ============================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

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

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

/* ============================================
   Laydate (Date Picker) Override
   ============================================ */
.layui-laydate {
    border-radius: var(--apple-radius-md) !important;
    box-shadow: var(--apple-shadow-lg) !important;
    border-color: var(--apple-border) !important;
    overflow: hidden;
}

.layui-laydate-header * {
    color: var(--apple-text-primary) !important;
    font-weight: 500 !important;
}

.layui-laydate-main td.layui-this {
    background: var(--apple-blue) !important;
    border-radius: 50% !important;
}

.layui-laydate-main td:hover {
    background: var(--apple-blue-light) !important;
    border-radius: 50% !important;
}

.layui-laydate .laydate-set-ym span:hover {
    background: var(--apple-gray-light) !important;
    border-radius: 6px !important;
}

/* ============================================
   Progress Bar
   ============================================ */
.layui-progress {
    background: var(--apple-gray-light) !important;
    border-radius: 4px !important;
}

.layui-progress-bar {
    border-radius: 4px !important;
}

/* ============================================
   Responsive - Keep mobile popup nav
   ============================================ */
@media only screen and (max-width: 750px) {
    .lay-blog .header-wrap {
        padding: 0 16px !important;
    }

    .lay-blog ul.pop-nav {
        background: #ffffff !important;
    }
}