/* ============================================
   猫咪租界 管理后台 · UI v2
   参考: Shopify Admin + 飞书后台 + Notion
   ============================================ */

/* ----- 色彩 -----
   bg       #F8FAFC
   surface  #FFFFFF
   primary  #2563EB
   text     #111827
   muted    #6B7280
   border   #E5E7EB
   success  #059669
   danger   #DC2626
   warning  #D97706
   ----------------------------- */

* { margin:0; padding:0; box-sizing:border-box }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  background: #F8FAFC; color: #111827; font-size: 14px; -webkit-font-smoothing: antialiased;
}

/* ============================================ */
/*  LAYOUT                                      */
/* ============================================ */
.admin-container { display:flex; height:100vh }
.admin-locked { display:none !important }

/* ============================================ */
/*  SIDEBAR — 深色导航                          */
/* ============================================ */
.sidebar {
  width: 220px; min-width: 220px; background: #111827; color: #E5E7EB;
  display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto;
}
.sidebar .logo { padding: 24px 20px 20px; border-bottom: 1px solid rgba(255,255,255,0.06) }
.sidebar .logo h2 { font-size: 18px; color: #FFFFFF; font-weight: 700; letter-spacing: 0.02em }
.sidebar .logo p  { font-size: 12px; color: #9CA3AF; margin-top: 2px }

.nav-menu { padding: 12px 0; flex: 1 }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 20px;
  color: #9CA3AF; font-size: 14px; text-decoration: none; cursor: pointer;
  border-left: 3px solid transparent; transition: all 0.15s;
}
.nav-item:hover { background: rgba(255,255,255,0.04); color: #E5E7EB }
.nav-item.active { background: rgba(37,99,235,0.15); color: #FFFFFF; border-left-color: #2563EB; font-weight: 600 }
.nav-item .icon { font-size: 18px; width: 22px; text-align: center; flex-shrink: 0 }

/* ============================================ */
/*  TOP BAR                                     */
/* ============================================ */
.main-content { flex:1; display:flex; flex-direction:column; overflow:hidden }
.top-bar {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 12px 24px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; flex-shrink: 0;
}
.search-box { display:flex; align-items:center; gap:8px }
.search-box input {
  width: 280px; height: 36px; border: 1px solid #E5E7EB; border-radius: 10px;
  padding: 0 14px; font-size: 13px; color: #111827; background: #F9FAFB; outline: none
}
.search-box input:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,0.1) }
.search-box button {
  height: 36px; width: 36px; border: 1px solid #E5E7EB; border-radius: 10px;
  background: #F9FAFB; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center
}
.user-info { display:flex; align-items:center; gap:12px; font-size:13px; color:#6B7280 }

/* ============================================ */
/*  PAGE CONTENT                                */
/* ============================================ */
.page-content { flex:1; overflow-y:auto; padding: 24px }
.page { display:none }
.page.active { display:block }

/* ============================================ */
/*  STATS CARDS (Dashboard)                     */
/* ============================================ */
.stats-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px }
.stat-card {
  background: #FFFFFF; border-radius: 12px; padding: 20px; border: 1px solid #E5E7EB;
  display: flex; align-items: flex-start; gap: 14px
}
.stat-card .stat-icon {
  width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0
}
.stat-card .stat-icon.blue   { background: #EFF6FF; color: #2563EB }
.stat-card .stat-icon.green  { background: #ECFDF5; color: #059669 }
.stat-card .stat-icon.orange { background: #FFF7ED; color: #D97706 }
.stat-card .stat-icon.purple { background: #F5F3FF; color: #7C3AED }
.stat-card .stat-info h3 { font-size: 12px; color: #6B7280; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px }
.stat-card .stat-info .stat-value { font-size: 26px; font-weight: 700; color: #111827 }
.stat-card .stat-info .stat-desc { font-size: 12px; color: #9CA3AF; margin-top: 2px }

/* ============================================ */
/*  PAGE HEADER                                 */
/* ============================================ */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 20px }
.page-header h1 { font-size: 22px; font-weight: 700; color: #111827 }

/* ============================================ */
/*  BUTTONS — 统一 10px/36px                    */
/* ============================================ */
.btn-primary, .btn-secondary, .btn-danger, .btn-logout {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 20px; border-radius: 10px; font-size: 13px; font-weight: 500;
  cursor: pointer; border: none; transition: all 0.15s; gap: 6px; white-space: nowrap
}
.btn-primary { background: #2563EB; color: #FFFFFF }
.btn-primary:hover { background: #1D4ED8 }
.btn-secondary { background: #FFFFFF; color: #374151; border: 1px solid #D1D5DB }
.btn-secondary:hover { background: #F9FAFB }
.btn-danger { background: #FFFFFF; color: #DC2626; border: 1px solid #FCA5A5 }
.btn-danger:hover { background: #FEF2F2 }
.btn-logout { background: transparent; color: #6B7280; border: 1px solid #E5E7EB; height: 28px; padding: 0 12px; font-size: 12px }
.btn-logout:hover { background: #FEF2F2; color: #DC2626; border-color: #FCA5A5 }

/* ============================================ */
/*  TABLES (Orders, Users, etc.)                */
/* ============================================ */
.data-table { width:100%; border-collapse:collapse; background:#FFFFFF; border-radius:12px; overflow:hidden; border:1px solid #E5E7EB }
.data-table th { background:#F9FAFB; color:#6B7280; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; padding:12px 16px; text-align:left; border-bottom:1px solid #E5E7EB }
.data-table td { padding:12px 16px; font-size:13px; color:#111827; border-bottom:1px solid #F3F4F6 }
.data-table tr:last-child td { border-bottom:none }
.data-table tr:hover td { background:#F9FAFB }
.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600 }
.badge.active, .badge.上架 { background:#ECFDF5; color:#059669 }
.badge.inactive, .badge.下架 { background:#F3F4F6; color:#9CA3AF }
.badge.pending { background:#FFF7ED; color:#D97706 }
.badge.paid { background:#EFF6FF; color:#2563EB }
.badge.renting { background:#F5F3FF; color:#7C3AED }
.badge.shipping { background:#EFF6FF; color:#2563EB }
.badge.return_pending { background:#FFF7ED; color:#C2410C }
.badge.returned { background:#ECFDF5; color:#059669 }
.badge.cancelled { background:#FEF2F2; color:#DC2626 }
.badge.refund_pending { background:#FEFCE8; color:#CA8A04 }

/* ============================================ */
/*  PRODUCT CARDS (替代表格)                    */
/* ============================================ */
.product-card-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px }
.product-card {
  background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden;
  transition: box-shadow 0.15s; cursor: pointer
}
.product-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06) }
.product-card .pc-image {
  width: 100%; height: 200px; background: #F3F4F6; display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative
}
.product-card .pc-image img { width: 100%; height: 100%; object-fit: cover }
.product-card .pc-image .pc-no-img { font-size: 48px; color: #D1D5DB }
.product-card .pc-body { padding: 16px }
.product-card .pc-name { font-size: 15px; font-weight: 600; color: #111827; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.product-card .pc-meta { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap }
.product-card .pc-tag { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600 }
.product-card .pc-tag.brand { background: #F3F4F6; color: #374151 }
.product-card .pc-tag.stock-ok { background: #ECFDF5; color: #059669 }
.product-card .pc-tag.stock-low { background: #FFF7ED; color: #D97706 }
.product-card .pc-tag.stock-out { background: #FEF2F2; color: #DC2626 }
.product-card .pc-foot { display: flex; align-items: center; justify-content: space-between }
.product-card .pc-price { font-size: 20px; font-weight: 700; color: #111827 }
.product-card .pc-price-unit { font-size: 12px; color: #6B7280; font-weight: 400 }
.product-card .pc-actions { display: flex; gap: 6px }
.product-card .pc-actions button { height: 28px; padding: 0 10px; border-radius: 6px; font-size: 11px }

/* ============================================ */
/*  FILTER TABS                                 */
/* ============================================ */
.filter-tabs { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap }
.filter-tabs .tab {
  display:inline-flex; align-items:center; padding:6px 16px; border-radius:20px; font-size:13px;
  color:#6B7280; background:#FFFFFF; border:1px solid #E5E7EB; cursor:pointer; transition:all 0.15s
}
.filter-tabs .tab:hover { border-color:#D1D5DB; color:#374151 }
.filter-tabs .tab.active { background:#111827; color:#FFFFFF; border-color:#111827 }

/* ============================================ */
/*  MODALS                                      */
/* ============================================ */
.modal { display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.4) }
.modal.show { display:flex; align-items:flex-start; justify-content:center; padding-top: 60px }
.modal-content {
  width: min(680px, 95vw); max-height: 85vh; overflow-y: auto;
  background: #FFFFFF; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.15)
}
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid #E5E7EB }
.modal-header h2 { font-size:17px; font-weight:700; color:#111827 }
.modal-header .close { font-size:22px; color:#9CA3AF; cursor:pointer; background:none; border:none }
.modal-header .close:hover { color:#111827 }
.modal-body { padding: 24px }

/* ============================================ */
/*  FORMS                                       */
/* ============================================ */
.form-group { margin-bottom: 16px }
.form-group label { display:block; font-size:13px; font-weight:500; color:#374151; margin-bottom:6px }
.form-group input, .form-group select, .form-group textarea {
  width:100%; height:38px; border:1px solid #D1D5DB; border-radius:8px; padding:0 12px;
  font-size:13px; color:#111827; background:#FFFFFF; outline:none
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,0.1)
}
.form-group textarea { height:80px; padding:10px 12px; resize:vertical }
.form-row { display:flex; gap:16px }
.form-row .form-group { flex:1 }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; padding-top:16px; border-top:1px solid #E5E7EB }
.form-actions.sticky { position:sticky; bottom:0; background:#FFFFFF; padding:12px 0; z-index:5 }
.form-tip { font-size:12px; color:#9CA3AF; margin-top:6px }
.required { color:#DC2626; font-weight:700 }

/* form sections */
.form-section {
  border:1px solid #E5E7EB; border-radius:10px; padding:16px 20px; margin-bottom:16px; background:#FAFBFC
}
.form-section legend {
  font-size:13px; font-weight:700; color:#111827; padding:0 8px;
  text-transform:uppercase; letter-spacing:0.05em
}

/* tag checkboxes */
.tag-checkboxes { display:flex; flex-wrap:wrap; gap:8px }
.tag-cb { display:inline-flex; align-items:center; gap:4px; font-size:13px; color:#374151; cursor:pointer }
.tag-cb input[type="checkbox"] { width:auto; height:auto; margin:0 }

/* ============================================ */
/*  SCHEDULE                                    */
/* ============================================ */
.schedule-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px }
.schedule-filter-select { height:34px; border:1px solid #D1D5DB; border-radius:8px; padding:0 10px; font-size:12px; color:#374151; background:#FFFFFF }
.schedule-month-label { font-size:15px; font-weight:600; color:#111827; min-width:100px; text-align:center }
.schedule-legend { display:flex; gap:18px; margin-bottom:12px }
.legend-item { display:flex; align-items:center; gap:6px; font-size:12px; color:#6B7280 }
.legend-dot { width:10px; height:10px; border-radius:3px }
.legend-dot.paid { background:#2563EB }
.legend-dot.shipping { background:#0EA5E9 }
.legend-dot.renting { background:#7C3AED }
.legend-dot.return_pending { background:#F97316 }
.legend-dot.returned { background:#059669 }
.schedule-gantt-container { overflow-x:auto; background:#FFFFFF; border:1px solid #E5E7EB; border-radius:10px }
.schedule-empty { text-align:center; padding:40px; color:#9CA3AF; font-size:14px }
.schedule-summary { padding:12px 16px; background:#F9FAFB; border-radius:8px; margin-bottom:12px; display:flex; gap:28px; font-size:13px; color:#6B7280; border:1px solid #E5E7EB }
.schedule-summary strong { color:#111827 }

.schedule-grid { min-width: 900px }
.schedule-header-row { display:flex; border-bottom:1px solid #E5E7EB; background:#F9FAFB; position:sticky; top:0; z-index:2 }
.schedule-product-head { width:200px; min-width:200px; padding:10px 14px; border-right:1px solid #E5E7EB; font-size:12px; font-weight:600; color:#6B7280 }
.schedule-days-row { display:flex }
.schedule-day { width:34px; text-align:center; font-size:11px; color:#6B7280; padding:8px 0; border-right:1px solid #F3F4F6 }
.schedule-row { display:flex; border-bottom:1px solid #F3F4F6 }
.schedule-product-cell { width:200px; min-width:200px; padding:10px 14px; border-right:1px solid #E5E7EB; display:flex; flex-direction:column; gap:2px }
.schedule-product-name { font-size:13px; font-weight:500; color:#111827 }
.schedule-product-id { font-size:11px; color:#9CA3AF }
.schedule-timeline-cell { position:relative; min-height:44px; background-image:linear-gradient(to right, #F3F4F6 1px, transparent 1px); background-size:34px 100% }
.schedule-bar { position:absolute; top:8px; height:28px; border-radius:6px; cursor:pointer; opacity:0.9 }
.schedule-bar.paid { background:#2563EB }
.schedule-bar.shipping { background:#0EA5E9 }
.schedule-bar.renting { background:#7C3AED }
.schedule-bar.return_pending { background:#F97316 }
.schedule-bar.returned { background:#059669 }

/* ============================================ */
/*  PRICE RULES / ACCESSORIES EDITOR            */
/* ============================================ */
.price-rule-list, .accessory-rule-list { display:flex; flex-direction:column; gap:6px }
.price-rule-row, .accessory-row { display:flex; gap:8px; align-items:center }
.price-rule-row input, .accessory-row input { flex:1 }

/* product image list */
.product-image-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px }
.product-image-grid { display:flex; flex-wrap:wrap; gap:10px }
.product-image-card {
  width: 100px; border:1px solid #E5E7EB; border-radius:8px; overflow:hidden; position:relative; cursor:grab
}
.product-image-card img { width:100%; height:80px; object-fit:cover; display:block }
.product-image-card.cover { border-color: #2563EB; box-shadow: 0 0 0 2px rgba(37,99,235,0.15) }
.product-image-actions { display:flex; align-items:center; justify-content:space-between; padding:4px 6px; background:#F9FAFB; font-size:11px }
.product-image-actions button { font-size:11px; padding:2px 6px; border:none; background:none; color:#DC2626; cursor:pointer }

/* rank tab product list */
.rank-tab-product-list { max-height:260px; overflow-y:auto; border:1px solid #E5E7EB; border-radius:8px; padding:8px }
.rank-tab-product-item { display:flex; align-items:center; gap:8px; padding:6px 8px; font-size:13px; cursor:pointer; border-radius:4px }
.rank-tab-product-item:hover { background:#F9FAFB }
.rank-tab-product-item input { width:auto; height:auto }
.rank-tab-empty { text-align:center; padding:20px; color:#9CA3AF; font-size:13px }

/* ============================================ */
/*  LOGIN SCREEN (keep existing)                */
/* ============================================ */
.admin-login-screen {
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:#F1F5F9; padding:24px
}
.admin-login-screen.hidden { display:none !important; pointer-events:none !important; visibility:hidden }
.admin-login-card {
  width: min(400px, 100%); background:#FFFFFF; border:1px solid #E5E7EB; border-radius:16px;
  padding: 40px 32px; box-shadow: 0 4px 24px rgba(0,0,0,0.06)
}
.admin-login-card h1 { font-size: 24px; color: #111827; margin-bottom: 4px; letter-spacing: 0.02em }
.admin-login-card p  { color: #6B7280; margin-bottom: 24px; font-size: 14px }
.admin-login-card input {
  width:100%; height:42px; border:1px solid #D1D5DB; border-radius:10px; padding:0 14px;
  font-size:14px; color:#111827; outline:none; margin-bottom:12px
}
.admin-login-card input:focus { border-color:#2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,0.1) }
.admin-login-card .btn-primary { width:100%; height:42px; font-size:15px }
.admin-login-error { color:#DC2626; font-size:13px; text-align:center; margin-top:12px }

/* ============================================ */
/*  ALERTS / GUIDES                             */
/* ============================================ */
.alert { padding: 16px 20px; margin-bottom: 16px; border-radius: 10px; font-size:13px; line-height:1.6 }
.alert-info { background:#EFF6FF; border:1px solid #BFDBFE; color:#1E40AF }
.alert-warning { background:#FFF7ED; border:1px solid #FED7AA; color:#9A3412 }
.alert h3 { font-size:14px; margin-bottom:4px }

.guide-section { margin-top: 24px }
.guide-card { background:#FFFFFF; border:1px solid #E5E7EB; border-radius:10px; padding:20px; margin-bottom:16px }
.guide-card h3 { font-size:15px; color:#111827; margin-bottom:8px }
.guide-card ol, .guide-card ul { padding-left:20px; color:#374151; font-size:13px; line-height:1.8 }
.guide-card pre { background:#F3F4F6; padding:14px; border-radius:8px; overflow-x:auto; font-size:12px; margin-top:8px }
.guide-card code { font-size:12px }
.guide-card table { width:100% }

/* ============================================ */
/*  MISC                                        */
/* ============================================ */
.product-image-preview { margin-top:8px }
.product-image-preview img { max-width:100px; max-height:80px; border-radius:6px; border:1px solid #E5E7EB }

/* ============================================ */
/*  TABLE WRAP (for table view toggle)           */
/* ============================================ */
.table-wrap { overflow-x:auto; background:#FFFFFF; border-radius:12px; border:1px solid #E5E7EB }

/* ============================================ */
/*  VIEW TOGGLE BUTTONS                         */
/* ============================================ */
.view-toggle { height:32px; padding:0 14px; font-size:12px }
.view-toggle.active { background:#111827; color:#FFFFFF; border-color:#111827 }

/* ============================================ */
/*  ORDER CARDS                                 */
/* ============================================ */
.order-card-list { display:flex; flex-direction:column; gap:12px }
.order-card {
  background:#FFFFFF; border:1px solid #E5E7EB; border-radius:12px; padding:18px 20px;
  transition:box-shadow 0.15s
}
.order-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.04) }
.oc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid #F3F4F6 }
.oc-order-no { font-size:13px; font-weight:600; color:#111827; font-family:monospace }
.oc-body { display:grid; grid-template-columns:1fr 1fr; gap:6px 24px; margin-bottom:14px }
.oc-row { display:flex; align-items:center; gap:8px; font-size:13px; color:#111827 }
.oc-label { color:#9CA3AF; font-size:12px; min-width:36px; flex-shrink:0 }
.oc-price { font-weight:700; color:#111827 }
.oc-actions { display:flex; gap:8px; flex-wrap:wrap; padding-top:10px; border-top:1px solid #F3F4F6 }
.oc-actions button { height:30px; padding:0 14px; font-size:12px }

/* ============================================ */
/*  USER CARDS                                  */
/* ============================================ */
.user-card-list { display:flex; flex-direction:column; gap:10px }
.user-card {
  display:flex; align-items:center; gap:14px; background:#FFFFFF;
  border:1px solid #E5E7EB; border-radius:12px; padding:14px 18px; transition:box-shadow 0.15s
}
.user-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.04) }
.uc-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#F3F4F6 }
.uc-info { flex:1; min-width:0 }
.uc-name { font-size:14px; font-weight:600; color:#111827; margin-bottom:2px }
.uc-meta { font-size:12px; color:#6B7280 }

/* ============================================ */
/*  CHART CARD                                  */
/* ============================================ */
.chart-card { background:#FFFFFF; border:1px solid #E5E7EB; border-radius:12px; padding:18px 20px }

/* ============================================ */
/*  COMPACT TABLE + SMALL BUTTONS               */
/* ============================================ */
.data-table.compact th, .data-table.compact td { padding:8px 12px; font-size:13px; white-space:nowrap }
.data-table.compact th { font-size:11px }
.btn-sm { display:inline-flex; align-items:center; height:28px; padding:0 10px; border-radius:6px; font-size:11px; font-weight:500; cursor:pointer; border:1px solid #D1D5DB; background:#FFFFFF; color:#374151; white-space:nowrap }
.btn-sm:hover { background:#F9FAFB }
.btn-sm.danger { color:#DC2626; border-color:#FCA5A5 }
.btn-sm.danger:hover { background:#FEF2F2 }

/* ============================================ */
/*  COLORFUL STATUS BADGES                      */
/* ============================================ */
.badge.muted { background:#F3F4F6; color:#6B7280 }
.badge.warning { background:#FFF7ED; color:#D97706 }
.badge.info { background:#EFF6FF; color:#2563EB }
.badge.success { background:#ECFDF5; color:#059669 }
.badge.danger { background:#FEF2F2; color:#DC2626 }