/* ============================================
   五开精选 - 完整响应式样式
   前台: public/front.css (通过 link 引入)
   后台: admin.css (本文件)
   ============================================ */

/* --- Reset & Base --- */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC",sans-serif;
  background:#f5f0e8;color:#2c2c2c;min-height:100vh
}
a{text-decoration:none;color:inherit}

/* --- Admin Layout: Desktop --- */
.admin-wrap{display:flex;min-height:100vh}

/* Sidebar */
.admin-sidebar{
  width:220px;min-width:220px;
  background:linear-gradient(180deg,#1a0a0a 0%,#2c0a0a 100%);
  color:#e8d5b0;display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:100;
  border-right:2px solid #C9A96E;
  transition:transform 0.3s ease;
}
.sidebar-header{padding:18px 20px;border-bottom:1px solid rgba(201,169,110,0.3);text-align:center}
.sidebar-header h2{font-size:16px;color:#C9A96E;font-weight:bold}
.sidebar-sub{font-size:11px;color:#a08060;margin-top:2px;display:block}
.sidebar-nav{padding:10px 0;flex:1;overflow-y:auto}
.sidebar-nav a{
  display:flex;align-items:center;gap:10px;
  padding:10px 20px;color:#c0a880;text-decoration:none;
  font-size:14px;transition:all 0.15s
}
.sidebar-nav a:hover{background:rgba(201,169,110,0.1);color:#C9A96E}
.sidebar-nav a.active{background:rgba(201,169,110,0.15);color:#C9A96E;border-right:3px solid #C9A96E}

/* Mobile hamburger button */
.hamburger{
  display:none;position:fixed;top:10px;left:10px;z-index:200;
  background:#1a0a0a;color:#C9A96E;border:1px solid #C9A96E;
  border-radius:6px;padding:8px 12px;cursor:pointer;font-size:18px;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.sidebar-overlay{display:none}

/* Main content area */
.admin-main{
  margin-left:220px;flex:1;min-height:100vh;width:0;min-width:0
}
.admin-main.no-sidebar{margin-left:0}

/* Header bar */
.admin-topbar{
  background:linear-gradient(135deg,#fffdf5 0%,#f5f0e8 100%);
  border-bottom:2px solid #C9A96E;
  padding:12px 20px;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:50;min-height:52px
}
.admin-topbar h1{font-size:18px;color:#2c0a0a;font-weight:bold}
.admin-topbar .user-info{display:flex;align-items:center;gap:10px}
.admin-topbar .user-info .username{font-size:13px;color:#8a7a6a}
.admin-topbar .user-info .role-badge{
  padding:2px 8px;border-radius:3px;font-size:11px;color:#fff
}
.admin-topbar .user-info .logout-link{
  font-size:12px;color:#8a7a6a;text-decoration:none;padding:4px 10px;
  border:1px solid #d4c5a9;border-radius:4px;transition:all 0.15s
}
.admin-topbar .user-info .logout-link:hover{color:#8B1A1A;border-color:#8B1A1A}

.admin-content{padding:20px 24px}
.admin-content.compact{padding:16px}

/* --- Common Components --- */
.btn-primary{
  display:inline-flex;align-items:center;padding:8px 20px;
  background:#8B1A1A;color:#C9A96E;border:none;border-radius:4px;
  font-size:14px;cursor:pointer;text-decoration:none;transition:all 0.15s;
  font-weight:500;white-space:nowrap
}
.btn-primary:hover{background:#6b1010;color:#e8d5b0}
.btn-secondary{
  display:inline-flex;align-items:center;padding:8px 20px;
  background:#fff;color:#666;border:1px solid #d4c5a9;
  border-radius:4px;font-size:14px;cursor:pointer;text-decoration:none
}
.btn-secondary:hover{border-color:#8B1A1A;color:#8B1A1A}
.btn-sm{
  display:inline-flex;align-items:center;padding:4px 12px;
  background:#f5f0e8;color:#2c2c2c;border:1px solid #d4c5a9;
  border-radius:4px;font-size:12px;cursor:pointer;text-decoration:none;
  transition:all 0.15s
}
.btn-sm:hover{border-color:#8B1A1A;color:#8B1A1A}

/* --- Dashboard Stats Grid --- */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.stat-card{
  background:linear-gradient(135deg,#fffdf5,#f5f0e8);border:1px solid #d4c5a9;
  border-radius:10px;padding:20px;box-shadow:0 2px 8px rgba(139,26,26,0.08)
}
.stat-number{font-size:28px;font-weight:bold;color:#8B1A1A}
.stat-label{font-size:12px;color:#8a7a6a;margin-top:4px}

/* Quick actions grid */
.nav-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:16px 0}
.nav-card{
  background:#fffdf5;border:1px solid #d4c5a9;border-radius:8px;
  padding:16px;text-align:center;text-decoration:none;color:#2c2c2c;
  transition:all 0.15s
}
.nav-card:hover{border-color:#C9A96E;box-shadow:0 2px 8px rgba(139,26,26,0.1)}
.nav-card .ico{font-size:22px;margin-bottom:4px}
.nav-card .name{font-size:13px;font-weight:bold}
.nav-card .desc{font-size:11px;color:#8a7a6a;margin-top:2px}

/* --- Data Table --- */
.data-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.data-table{
  width:100%;border-collapse:collapse;background:#fffdf5;
  border-radius:8px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.06);min-width:500px
}
.data-table th{
  background:linear-gradient(180deg,#1a0a0a,#2c0a0a);padding:10px 14px;
  text-align:left;font-size:12px;color:#C9A96E;font-weight:500;
  border-bottom:1px solid #d4c5a9;white-space:nowrap
}
.data-table td{padding:8px 14px;font-size:13px;border-bottom:1px solid #f0e8d8}
.data-table tr:hover td{background:#faf5ea}
.data-table .title-cell{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.data-table .price-cell{color:#8B1A1A;font-weight:500;white-space:nowrap}
.data-table .action-cell{white-space:nowrap}
.level-badge{
  display:inline-block;font-size:11px;color:#6b3a00;background:#f0e8d8;
  padding:2px 8px;border-radius:4px;white-space:nowrap
}
.sn-badge{
  display:inline-block;font-size:11px;color:#fff;background:#1a7a1a;
  padding:2px 8px;border-radius:4px;font-weight:500;white-space:nowrap
}

/* --- Forms --- */
.admin-form{max-width:100%}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12px;color:#6b5a4a;margin-bottom:5px;font-weight:500}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:8px 12px;border:1px solid #d4c5a9;border-radius:4px;
  font-size:14px;outline:none;transition:border-color 0.2s;
  font-family:inherit;background:#fffdf5
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#8B1A1A}
.form-group textarea{resize:vertical;min-height:60px}

/* Feature checkbox group */
.feature-checkbox-group{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:10px 12px;background:#fffdf5;border:1px solid #d4c5a9;border-radius:6px
}
.feature-checkbox{
  display:inline-flex;align-items:center;gap:4px;font-size:12px;cursor:pointer;
  padding:4px 10px;border-radius:3em;border:1px solid #d4c5a9;
  transition:all 0.15s;user-select:none
}
.feature-checkbox:hover{border-color:#8B1A1A}
.feature-checkbox input[type="checkbox"]{display:none}
.feature-checkbox:has(input:checked){background:#8B1A1A;border-color:#8B1A1A;color:#C9A96E}

/* Filter bar */
.filter-row{margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filter-row select{padding:8px 12px;border:1px solid #d4c5a9;border-radius:4px;font-size:13px;background:#fffdf5;outline:none}

/* Alerts */
.alert-error{
  background:#fef2f2;color:#8B1A1A;padding:10px 14px;border-radius:6px;
  font-size:13px;margin-bottom:14px;border:1px solid #fecaca
}
.alert-success{
  background:#f0fdf4;color:#166534;padding:10px 14px;border-radius:6px;
  font-size:13px;margin-bottom:14px;border:1px solid #bbf7d0
}

/* Empty state */
.empty-cell{text-align:center;color:#999;padding:40px;font-size:13px}

/* Category management */
.cat-section{margin-bottom:24px}
.cat-section h2{font-size:15px;color:#2c0a0a;margin-bottom:6px;padding-bottom:6px;border-bottom:2px solid #C9A96E}
.cat-section .desc{font-size:11px;color:#8a7a6a;margin-bottom:10px}
.cat-list{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.cat-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;background:#fffdf5;border:1px solid #e8dcc8;border-radius:6px
}
.cat-item:hover{border-color:#C9A96E}
.cat-item .name{font-size:13px;font-weight:500;color:#2c2c2c}
.cat-item .actions{display:flex;gap:4px;align-items:center}
.del-cat-btn{
  padding:4px 12px;border:1px solid #e8b0b0;border-radius:4px;
  background:#fef2f2;color:#8B1A1A;cursor:pointer;font-size:11px;transition:all 0.15s
}
.del-cat-btn:hover{background:#8B1A1A;color:#fff;border-color:#8B1A1A}
.edit-cat-btn{
  padding:4px 12px;border:1px solid #d4c5a9;border-radius:4px;
  background:#f5f0e8;color:#6b5a4a;cursor:pointer;font-size:11px;transition:all 0.15s
}
.edit-cat-btn:hover{border-color:#8B1A1A;color:#8B1A1A}

/* Settings */
.settings-logo{padding:16px;background:#faf5ea;border:1px dashed #C9A96E;border-radius:6px;text-align:center}
.settings-logo img{max-width:160px;max-height:60px;border-radius:4px}
.settings-logo .logo-placeholder{padding:20px;color:#8a7a6a;font-size:12px}

/* --- Mobile: ≤768px --- */
@media(max-width:768px){
  /* Sidebar becomes off-canvas */
  .admin-sidebar{transform:translateX(-100%)}
  .admin-sidebar.open{transform:translateX(0)}
  .sidebar-overlay{
    display:none;position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.4);z-index:99
  }
  .sidebar-overlay.show{display:block}
  .admin-main{margin-left:0}
  .hamburger{display:block}
  
  .admin-topbar{padding:10px 14px;min-height:48px;padding-left:52px}
  .admin-topbar h1{font-size:15px}
  .admin-topbar .user-info .username{display:none}
  .admin-topbar .user-info .logout-link{font-size:11px;padding:3px 8px}
  
  .admin-content{padding:12px 14px}
  .admin-content.compact{padding:10px}
  
  .stats-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
  .stat-card{padding:14px}
  .stat-number{font-size:22px}
  
  .nav-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
  .nav-card{padding:12px}
  
  .form-row{grid-template-columns:1fr;gap:10px}
  .form-group input,.form-group select,.form-group textarea{font-size:16px;padding:10px 12px} /* prevent iOS zoom */
  
  .data-table{font-size:12px;min-width:450px}
  .data-table th,.data-table td{padding:8px 10px}
  .data-table .title-cell{max-width:100px}
  .btn-sm{min-height:36px}
  .btn-primary{min-height:40px}
  .btn-secondary{min-height:40px}
  
  .cat-item{flex-wrap:wrap;gap:6px;padding:8px}
  .cat-item .actions{width:100%;justify-content:flex-end}
  
  .feature-checkbox{padding:6px 12px;font-size:13px}
  .feature-checkbox-group{gap:4px;padding:8px}
}

/* --- Small Mobile: ≤480px --- */
@media(max-width:480px){
  .admin-topbar h1{font-size:14px}
  .stats-grid{grid-template-columns:1fr 1fr;gap:8px}
  .nav-grid{grid-template-columns:1fr 1fr;gap:6px}
  .nav-card{padding:10px}
  .data-table th,.data-table td{padding:6px 8px;font-size:11px}
}

/* --- Admin standalone pages (login, register) --- */
.admin-standalone{max-width:400px;margin:60px auto;padding:0 16px}
.admin-standalone .card{
  background:#fffdf5;border:1px solid #d4c5a9;border-radius:8px;padding:24px
}
.card.outlinenone, .card.outlinenone:focus { outline: none; box-shadow: none; }
.card.outlinenone:hover { box-shadow: none; }
.admin-standalone h2{text-align:center;color:#2c0a0a;margin-bottom:16px}
@media(max-width:480px){
  .admin-standalone{margin:30px auto}
  .admin-standalone .card{padding:16px}
}

/* ====== Added by system audit ====== */
.admin-content {
  max-width: 960px;
}
.card {
  background: #fffdf5;
  border: 1px solid #d4c5a9;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}
.form-group {
  margin-bottom: 14px;
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #2c0a0a;
  margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d4c5a9;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  background: #fffdf5;
  box-sizing: border-box;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #8B1A1A;
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border: 1px solid #d4c5a9;
  border-radius: 6px;
  background: #f5f0e8;
  color: #6b5a4a;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.btn-secondary:hover {
  border-color: #8B1A1A;
  color: #8B1A1A;
}


/* ============ v32.1 第 2 轮：编辑弹窗（从 listings.ejs 提取） ============ */
/* v30: 编辑弹窗 - 卡片式双击编辑 */
.edit-modal-content {
  background: linear-gradient(135deg, #fffdf5 0%, #faf5ea 100%);
  border: 2px solid #C9A96E;
  border-radius: 12px;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.edit-modal-header {
  padding: 14px 18px;
  border-bottom: 2px solid #C9A96E;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #8B1A1A 0%, #6a0f15 100%);
  color: #C9A96E;
  border-radius: 10px 10px 0 0;
}
.edit-modal-header h3 {
  margin: 0;
  font-size: 16px;
  color: #C9A96E;
}
.edit-modal-close {
  background: rgba(201,169,110,0.2);
  border: 1px solid #C9A96E;
  color: #C9A96E;
  font-size: 16px;
  cursor: pointer;
  padding: 0 10px;
  border-radius: 4px;
  height: 28px;
}
.edit-modal-close:hover { background: rgba(201,169,110,0.4); }
.edit-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}
.edit-modal-footer {
  padding: 12px 18px;
  border-top: 1px solid #e8dcc8;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  background: #faf5ea;
  border-radius: 0 0 10px 10px;
}
.edit-card {
  background: #fffdf5;
  border: 1px solid #e8dcc8;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.edit-card h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: #2c0a0a;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.edit-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dashed #f0e8d8;
  min-height: 24px;
}
.edit-field:last-child { border-bottom: none; }
.edit-field-label {
  min-width: 70px;
  font-size: 11px;
  color: #8a7a6a;
  padding-top: 4px;
  flex-shrink: 0;
}
.edit-field-value {
  flex: 1;
  font-size: 13px;
  color: #2c2c2c;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: text;
  min-height: 22px;
  word-break: break-all;
  transition: all 0.15s;
  white-space: pre-wrap;
}
.edit-field-value:hover {
  background: #fff8e1;
  border-color: #C9A96E;
}
.edit-field-value.editing {
  background: #fffdf5;
  border: 2px solid #8B1A1A;
  padding: 2px 6px;
  cursor: text;
  outline: none;
}
.edit-field-value input,
.edit-field-value textarea,
.edit-field-value select {
  width: 100%;
  padding: 4px 8px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: #2c2c2c;
  font-family: inherit;
  outline: none;
}
.edit-field-value textarea {
  min-height: 60px;
  resize: vertical;
  font-family: inherit;
}
.edit-field-value .empty {
  color: #b0a090;
  font-style: italic;
}
.edit-field-hint {
  font-size: 10px;
  color: #b0a090;
  padding: 2px 8px 0 78px;
}
.edit-link-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.edit-link-row .link-label {
  font-size: 11px;
  color: #8B1A1A;
  font-weight: 600;
  min-width: 36px;
  flex-shrink: 0;
}
.edit-link-row .edit-field-value {
  flex: 1;
}
.edit-status-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.edit-status-options .status-opt {
  padding: 4px 10px;
  border-radius: 3em;
  border: 1px solid #d4c5a9;
  font-size: 11px;
  cursor: pointer;
  background: #f5f0e8;
  color: #2c2c2c;
  transition: all .15s;
}
.edit-status-options .status-opt:hover { border-color: #8B1A1A; }
.edit-status-options .status-opt.active {
  background: #8B1A1A;
  color: #C9A96E;
  border-color: #920933;
}

/* v31: 弹窗 chip 组（组合/特色 多选） */
.edit-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}
.edit-chip-group .chip-opt {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 3em;
  border: 1px solid #d4c5a9;
  background: #f5f0e8;
  color: #6b5a4a;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: all .15s;
}
.edit-chip-group .chip-opt:hover {
  border-color: #8B1A1A;
  color: #8B1A1A;
}
.edit-chip-group .chip-opt.active {
  background: #8B1A1A;
  color: #C9A96E;
  border-color: #920933;
  font-weight: 600;
}
.edit-raw-text {
  color: #2c2c2c;
  font-weight: 400;
}
.edit-raw-text:focus {
  border-color: #8B1A1A;
  box-shadow: 0 0 0 2px rgba(139,26,26,0.08);
}