/* ---------- Admin panel styles (loaded after style.css) ---------- */

.admin-body { background: var(--paper-deep); min-height: 100vh; }
.admin-body .wa-float { display: none; }

/* Login */
.login-wrap { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; }
.login-card { width: min(380px, 100%); text-align: center; padding: 2.2rem 2rem; display: grid; gap: 0.6rem; justify-items: center; }
.login-card h1 { font-size: 1.5rem; color: var(--deep-dark); }
.login-card label { width: 100%; text-align: left; font-size: 0.85rem; font-weight: 500; margin-top: 0.5rem; }
.login-card input { width: 100%; padding: 0.6rem 0.8rem; border: 1.5px solid #d8c9b8; border-radius: 10px; font: inherit; background: #fff; }
.login-card input:focus { outline: none; border-color: var(--deep); }
.back-home { text-decoration: none; font-size: 0.85rem; margin-top: 0.8rem; }

/* Setup-required screen */
.setup-card { max-width: 520px; }
.setup-box { text-align: left; background: #fdf6ec; border: 1px solid #eeddc2; border-radius: 12px; padding: 1rem 1.2rem; margin-top: 0.8rem; display: grid; gap: 0.5rem; font-size: 0.92rem; }
.setup-box p { margin: 0; }
.setup-box ol { margin: 0.2rem 0 0.2rem 1.1rem; display: grid; gap: 0.35rem; }
.setup-box code { background: #f1e4cf; border-radius: 6px; padding: 0.05rem 0.35rem; font-size: 0.85em; }

/* Topbar + tabs */
.admin-topbar { background: var(--deep-dark); color: #fff; padding-block: 0.7rem; }
.admin-topbar-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.admin-topbar-actions { display: flex; gap: 0.5rem; }
.admin-topbar .btn-outline { color: #fff !important; border-color: rgba(255,255,255,0.5); }
.admin-tabs { display: flex; gap: 0.4rem; padding-block: 1rem 0.4rem; overflow-x: auto; }
.tab {
  border: none; background: transparent; font: inherit; font-weight: 500;
  color: var(--muted); padding: 0.55rem 1.1rem; border-radius: 999px; cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--deep); background: #fff; }
.tab.active { background: var(--deep); color: #fff; }

/* Panes */
.tab-pane { padding-block: 1.2rem 4rem; }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.3rem; flex-wrap: wrap; }
.pane-head h2 { color: var(--deep-dark); font-size: 1.45rem; }
.hint { font-size: 0.85rem; margin-bottom: 1.1rem; }

.card-panel {
  background: #fff; border-radius: var(--radius, 14px);
  box-shadow: 0 4px 16px rgba(45,36,32,0.08); padding: 1.3rem 1.4rem;
}

/* Stats */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.9rem; margin-bottom: 1.6rem; }
.stat-card { background: #fff; border-radius: var(--radius, 14px); box-shadow: 0 4px 16px rgba(45,36,32,0.07); padding: 0.95rem 1.1rem; border-inline-start: 4px solid var(--accent); }
.stat-card .stat-value { font-family: var(--serif); font-size: 1.5rem; color: var(--deep-dark); font-weight: 700; }
.stat-card .stat-label { font-size: 0.8rem; color: var(--muted); }

/* Orders */
.order-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block: 0.9rem 1rem; }
.order-filters .chip { padding: 0.32rem 0.85rem; font-size: 0.8rem; }

.order-row {
  background: #fff; border-radius: var(--radius, 14px);
  box-shadow: 0 4px 14px rgba(45,36,32,0.06);
  padding: 1rem 1.15rem; margin-bottom: 0.85rem;
  display: grid; gap: 0.65rem;
}
.order-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.9rem; }
.order-code { font-weight: 700; color: var(--deep); letter-spacing: 0.02em; }
.order-customer strong { font-weight: 600; }
.order-items-summary { color: var(--muted); font-size: 0.88rem; }
.order-total { font-weight: 700; color: var(--deep-dark); margin-left: auto; }
.order-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; font-size: 0.88rem; }
.order-date { color: var(--muted); }
.status-select { padding: 0.35rem 0.6rem; border-radius: 8px; border: 1.5px solid #d8c9b8; font: inherit; font-size: 0.85rem; background: #fff; }
.order-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }
.btn-sm { padding: 0.38rem 0.85rem; font-size: 0.82rem; }
.notes-text { font-size: 0.84rem; color: var(--muted); font-style: italic; }

.status-pill, .order-row .status-pill {
  display: inline-block; border-radius: 999px; padding: 0.18rem 0.7rem;
  font-size: 0.78rem; font-weight: 600; background: #eee; color: #444;
}
.status-pending   { background: #fdf0d5; color: #8a6100; }
.status-confirmed { background: #e2f0e5; color: #22662f; }
.status-shipped   { background: #ddebf7; color: #1d4f80; }
.status-delivered { background: #e8e4f7; color: #47309c; }
.status-cancelled { background: #fadddd; color: #992222; }

/* Modals */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(45, 20, 30, 0.45); backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: 1rem; overflow-y: auto;
}
.modal { width: min(640px, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; display: grid; gap: 0.75rem; align-content: start; }
.modal h3 { color: var(--deep-dark); }
.modal label, .announce-form label { display: grid; gap: 0.25rem; font-size: 0.85rem; font-weight: 500; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.modal input:not([type="checkbox"]):not([type="file"]),
.modal select, .modal textarea, .announce-form input, .announce-form select {
  width: 100%; padding: 0.55rem 0.75rem; border: 1.5px solid #d8c9b8;
  border-radius: 10px; font: inherit; background: #fff;
}
.check-label { display: flex !important; align-items: center; gap: 0.5rem; }
.field-label { font-size: 0.85rem; font-weight: 500; margin-top: 0.2rem; }
.modal-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.error-text { color: #b32020; font-size: 0.85rem; }
.success-text { color: #22662f; font-size: 0.85rem; }
.muted { color: var(--muted); }

/* Order item rows in the modal */
.of-item-row { display: grid; grid-template-columns: 1fr 70px 110px 40px; gap: 0.5rem; margin-bottom: 0.5rem; }
.of-item-row input { width: 100%; padding: 0.5rem 0.65rem; border: 1.5px solid #d8c9b8; border-radius: 10px; font: inherit; }
.of-item-row input[name="qty"] { text-align: center; }
.remove-item-btn { border: none; background: transparent; color: #b32020; font-size: 1.2rem; cursor: pointer; line-height: 1; }

/* Products admin */
.admin-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.admin-product-card { background: #fff; border-radius: var(--radius, 14px); box-shadow: 0 4px 14px rgba(45,36,32,0.06); overflow: hidden; display: flex; flex-direction: column; }
.ap-img { aspect-ratio: 4/3; object-fit: cover; width: 100%; background: #efe6da; }
.ap-body { padding: 0.8rem 0.95rem 1rem; display: grid; gap: 0.45rem; }
.ap-name { font-weight: 600; }
.ap-meta { font-size: 0.82rem; color: var(--muted); display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ap-photo-count { font-size: 0.78rem; color: var(--muted); }
.ap-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.toggle-switch { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; cursor: pointer; }

/* Thumbs editor inside product form */
.thumbs-editor { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.thumb-edit { position: relative; width: 74px; height: 74px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(45,36,32,0.15); }
.thumb-edit img { width: 100%; height: 100%; object-fit: cover; }
.thumb-remove {
  position: absolute; top: 2px; right: 2px; width: 22px; height: 22px;
  border: none; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff;
  font-size: 0.8rem; line-height: 1; cursor: pointer;
}
.upload-box {
  border: 2px dashed #cdb9a4; border-radius: 12px; padding: 0.9rem;
  text-align: center; color: var(--muted); cursor: pointer; font-size: 0.9rem;
}
.upload-box:hover { border-color: var(--deep); color: var(--deep); }

/* Reviews list */
.review-admin-row {
  background: #fff; border-radius: var(--radius, 14px); box-shadow: 0 4px 14px rgba(45,36,32,0.06);
  padding: 0.95rem 1.15rem; margin-bottom: 0.8rem; display: flex; gap: 0.9rem; align-items: flex-start; flex-wrap: wrap;
}
.review-admin-row .review-stars { color: var(--accent); letter-spacing: 0.1em; }
.review-admin-row blockquote { flex: 1 1 300px; margin: 0; font-size: 0.92rem; }
.review-hidden-tag { font-size: 0.75rem; background: #eee; padding: 0.1rem 0.5rem; border-radius: 999px; color: #777; }

/* Track page result */
.track-page { padding-block: 3rem 5rem; max-width: 720px; }
.track-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; align-items: end; margin-block: 1.5rem; }
.track-form .field { display: grid; gap: 0.25rem; }
.track-form label { font-size: 0.85rem; font-weight: 500; }
.track-form input { padding: 0.6rem 0.8rem; border: 1.5px solid #d8c9b8; border-radius: 10px; font: inherit; background: #fff; }
.track-form input:focus { outline: none; border-color: var(--deep); }

.track-result { margin-top: 1rem; display: grid; gap: 1.2rem; }
.track-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.track-code-label strong { color: var(--deep); }
.timeline { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 0; }
.timeline li { position: relative; padding-right: 1.6rem; font-size: 0.88rem; color: #b9aca0; }
.timeline li:not(:last-child)::after { content: "→"; position: absolute; right: 0.45rem; color: #d8c9b8; }
.timeline li.done { color: #22662f; font-weight: 600; }
.timeline li.cancelled { color: #992222; font-weight: 600; }
.items-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.items-table th { text-align: left; color: var(--muted); font-weight: 500; padding: 0.35rem 0; border-bottom: 1px solid #eee2d3; }
.items-table td { text-align: right; padding: 0.35rem 0; }
.items-table tfoot td { font-weight: 700; color: var(--deep-dark); }

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 200; background: var(--ink); color: #fff; border-radius: 999px;
  padding: 0.6rem 1.3rem; font-size: 0.9rem; box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

@media (max-width: 700px) {
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
  .track-form { grid-template-columns: 1fr; }
  .of-item-row { grid-template-columns: 1fr 60px 90px 34px; }
  .order-total { margin-left: 0; }
}