/* =============================================
   6 STREET ROASTERY — admin.css
   관리자 패널 전체 스타일
   ============================================= */

#page-admin {
  min-height: 100vh; background: #1a1612; color: #e8dfd0;
  padding: 2rem 2.5rem 4rem;
}
.admin-topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 2rem; padding-bottom: 1rem;
  border-bottom: 1px solid rgba(200,184,138,0.2);
}
.admin-topbar h1 { font-family: 'IM Fell English', serif; font-size: 1.6rem; font-weight: 400; }

/* ── TABS ── */
.admin-tabs { display: flex; gap: 0; margin-bottom: 2rem; border-bottom: 1px solid rgba(200,184,138,0.2); }
.admin-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: #8a7a6a; padding: 0.65rem 1.5rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: -1px; transition: all .2s; cursor: pointer;
}
.admin-tab:hover { color: #e8dfd0; }
.admin-tab.active { color: #c8b88a; border-bottom-color: #c8b88a; }

.admin-panel { display: none; }
.admin-panel.active { display: block; }

/* ── SUB TABS ── */
.asub-tabs { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(200,184,138,0.2); }
.asub-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: #5a5040; padding: 0.5rem 1.25rem;
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: -1px; transition: all .2s; cursor: pointer;
}
.asub-tab.active { color: #c8b88a; border-bottom-color: #c8b88a; }
.asub-panel { display: none; }
.asub-panel.active { display: block; }

/* ── STATS ── */
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
.astat { background: #231e1a; border: 1px solid rgba(200,184,138,0.15); padding: 1.25rem; }
.astat-label { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: #8a7a6a; margin-bottom: 0.4rem; }
.astat-val { font-family: 'IM Fell English', serif; font-size: 2rem; color: #e8dfd0; }
.astat-sub { font-size: 0.62rem; color: #c8b88a; margin-top: 0.2rem; }

/* ── CARDS & TABLES ── */
.admin-card { background: #231e1a; border: 1px solid rgba(200,184,138,0.15); padding: 1.5rem; margin-bottom: 1.25rem; }
.admin-card-title {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: #c8b88a; margin-bottom: 1.25rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(200,184,138,0.12);
}
.atable { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.atable th {
  text-align: left; padding: 0.6rem 0.75rem;
  font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: #c8b88a; border-bottom: 1px solid rgba(200,184,138,0.15);
}
.atable td { padding: 0.8rem 0.75rem; color: #8a7a6a; border-bottom: 1px solid rgba(200,184,138,0.06); vertical-align: middle; }
.atable tr:hover td { background: rgba(200,184,138,0.04); color: #e8dfd0; }

/* ── STATUS BADGES ── */
.sbadge { display: inline-block; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.55rem; border: 1px solid; }
.sbadge-paid    { color: #7ab88a; border-color: rgba(122,184,138,0.3); }
.sbadge-pending { color: #c8b88a; border-color: rgba(200,184,138,0.3); }
.sbadge-shipped { color: #8aaac8; border-color: rgba(138,170,200,0.3); }
.sbadge-cancelled { color: #c88a8a; border-color: rgba(200,138,138,0.3); }

/* ── FORMS ── */
.aform-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.aform-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.aform-group { margin-bottom: 1.25rem; }
.alabel { display: block; font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: #c8b88a; margin-bottom: 0.4rem; }
.ainput {
  width: 100%; background: #2d2620; border: 1px solid rgba(200,184,138,0.2);
  color: #e8dfd0; padding: 0.65rem 0.85rem;
  font-family: 'Barlow', sans-serif; font-size: 0.8rem; outline: none; transition: border-color .2s;
}
.ainput:focus { border-color: #c8b88a; }
.ainput::placeholder { color: #5a5040; }
.aselect {
  width: 100%; background: #2d2620; border: 1px solid rgba(200,184,138,0.2);
  color: #e8dfd0; padding: 0.65rem 0.85rem;
  font-family: 'Barlow', sans-serif; font-size: 0.8rem; outline: none; cursor: pointer;
}
.atextarea {
  width: 100%; background: #2d2620; border: 1px solid rgba(200,184,138,0.2);
  color: #e8dfd0; padding: 0.65rem 0.85rem;
  font-family: 'Barlow', sans-serif; font-size: 0.8rem;
  outline: none; resize: vertical; min-height: 80px; transition: border-color .2s;
}
.atextarea:focus { border-color: #c8b88a; }

/* ── BUTTONS ── */
.abtn {
  background: #c8b88a; color: #1a1612; border: none;
  padding: 0.65rem 1.75rem; font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; transition: all .2s; cursor: pointer;
}
.abtn:hover { background: #e8dfd0; }
.abtn-sec {
  background: none; color: #8a7a6a; border: 1px solid rgba(200,184,138,0.25);
  padding: 0.65rem 1.75rem; font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; transition: all .2s; cursor: pointer;
}
.abtn-sec:hover { border-color: #c8b88a; color: #c8b88a; }
.abtn-sm {
  background: none; border: 1px solid rgba(200,184,138,0.2);
  color: #8a7a6a; padding: 0.25rem 0.6rem; font-size: 0.6rem;
  letter-spacing: 0.08em; text-transform: uppercase; transition: all .2s; cursor: pointer;
}
.abtn-sm:hover { border-color: #c8b88a; color: #c8b88a; }
.abtn-sm.danger:hover { border-color: #c88a8a; color: #c88a8a; }
.back-site-btn {
  background: none; border: 1px solid rgba(200,184,138,0.4);
  color: #c8b88a; padding: 0.45rem 1rem; font-size: 0.68rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: all .2s; cursor: pointer;
}
.back-site-btn:hover { background: #c8b88a; color: #1a1612; }

/* ── SEARCH BAR ── */
.asearch { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; }
.asearch-input {
  flex: 1; background: #2d2620; border: 1px solid rgba(200,184,138,0.2);
  color: #e8dfd0; padding: 0.55rem 0.85rem;
  font-family: 'Barlow', sans-serif; font-size: 0.75rem; outline: none;
}
.asearch-input:focus { border-color: #c8b88a; }
.asearch-input::placeholder { color: #5a5040; }
.afilter {
  background: #2d2620; border: 1px solid rgba(200,184,138,0.2);
  color: #8a7a6a; padding: 0.55rem 0.85rem;
  font-family: 'Barlow', sans-serif; font-size: 0.72rem; outline: none; cursor: pointer;
}

/* ── UPLOAD BOX ── */
.upload-box {
  border: 1px dashed rgba(200,184,138,0.3); padding: 2rem;
  text-align: center; cursor: pointer; transition: border-color .2s; margin-bottom: 1rem;
}
.upload-box:hover { border-color: #c8b88a; }
.upload-icon { font-size: 2rem; margin-bottom: 0.6rem; display: block; }
.upload-text { font-size: 0.72rem; color: #8a7a6a; }
.upload-hint { font-size: 0.6rem; color: #5a5040; margin-top: 0.25rem; }
.hidden-file { display: none; }

/* ── MEDIA THUMBS ── */
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
.thumb-box {
  aspect-ratio: 1; background: #2d2620; border: 1px solid rgba(200,184,138,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; cursor: pointer; position: relative; overflow: hidden;
}
.thumb-box:hover .thumb-hover { opacity: 1; }
.thumb-hover {
  position: absolute; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s;
  font-size: 0.62rem; color: #c8b88a; letter-spacing: 0.1em; text-transform: uppercase;
}
.thumb-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── TOGGLE ── */
.toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 0; border-bottom: 1px solid rgba(200,184,138,0.08); }
.tgl-label { font-size: 0.75rem; color: #e8dfd0; margin-bottom: 0.15rem; }
.tgl-desc  { font-size: 0.65rem; color: #5a5040; }
.tgl { position: relative; width: 42px; height: 22px; flex-shrink: 0; }
.tgl input { opacity: 0; width: 0; height: 0; }
.tgl-slider { position: absolute; inset: 0; background: #2d2620; border: 1px solid rgba(200,184,138,0.2); cursor: pointer; transition: .3s; border-radius: 22px; }
.tgl-slider:before { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background: #5a5040; transition: .3s; border-radius: 50%; }
.tgl input:checked + .tgl-slider { background: rgba(200,184,138,0.15); border-color: #c8b88a; }
.tgl input:checked + .tgl-slider:before { transform: translate(20px, -50%); background: #c8b88a; }

/* ── CUSTOMER AVATAR ── */
.cust-av {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #3d2b1d, #5a3f2c);
  display: flex; align-items: center; justify-content: center;
  font-family: 'IM Fell English', serif; font-size: 0.85rem; color: #c8b88a; flex-shrink: 0;
}
.cust-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
.cust-info-label { font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: #c8b88a; margin-bottom: 0.35rem; }
.cust-info-val { font-size: 0.8rem; color: #e8dfd0; line-height: 1.6; }

/* ── ORDER MODAL ── */
.omodal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  z-index: 800; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all .3s;
}
.omodal-overlay.open { opacity: 1; visibility: visible; }
.omodal {
  background: #1a1612; border: 1px solid rgba(200,184,138,0.2);
  width: 640px; max-width: 95vw; max-height: 85vh; overflow-y: auto; padding: 2rem;
}
.omodal-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(200,184,138,0.15);
}
.omodal-title { font-family: 'IM Fell English', serif; font-size: 1.4rem; color: #e8dfd0; }
.omodal-close { background: none; border: none; color: #8a7a6a; font-size: 1.4rem; cursor: pointer; }