/* Admin panel — reuses the storefront's color tokens (style.css must be
   linked before this file) but is laid out as a functional dashboard
   rather than a marketing page. */

.admin-body{ background:var(--paper-deep); }

.admin-wrap{ max-width:1100px; margin:0 auto; padding:0 24px; }

.admin-header{ background:var(--ink); color:#fff; padding:16px 0; }
.admin-header-inner{ display:flex; justify-content:space-between; align-items:center; }
.admin-brand{ font-family:var(--font-display); font-size:1.3rem; }
.admin-brand span{ font-family:var(--font-body); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; opacity:.6; margin-left:8px; }
.admin-header-right{ display:flex; align-items:center; gap:14px; font-size:.9rem; }
.admin-header-right .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.admin-header-right .btn-ghost:hover{ background:rgba(255,255,255,.1); }

.admin-main{ padding:36px 24px 80px; }
.admin-main h1{ margin-bottom:20px; }

.admin-back{ display:inline-block; margin-bottom:18px; font-weight:700; font-size:.9rem; }

/* auth pages (login / setup) --------------------------------------------- */
.admin-auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--paper-deep); padding:24px; }
.admin-auth-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:40px; max-width:400px; width:100%; box-shadow:var(--shadow-soft); }
.admin-auth-card h1{ text-align:center; margin-bottom:24px; }
.admin-auth-card label{ display:block; font-weight:800; font-size:.85rem; color:var(--rose-deep); margin-bottom:16px; }
.admin-auth-card input{ width:100%; padding:12px 14px; border-radius:10px; border:2px solid var(--line); margin-top:6px; font-family:var(--font-body); font-size:.95rem; }
.admin-auth-card input:focus{ outline:none; border-color:var(--rose); }
.admin-error{ background:#FBE4E7; color:#8C2F3F; padding:12px 16px; border-radius:10px; font-weight:700; font-size:.88rem; margin-bottom:16px; }
.admin-success{ background:#E4F1E0; color:#3E5E37; padding:12px 16px; border-radius:10px; font-weight:700; font-size:.88rem; margin-bottom:16px; }
.admin-warning{ background:#FDF2DA; color:#7A5A1E; padding:12px 16px; border-radius:10px; font-weight:700; font-size:.85rem; }

/* tabs ---------------------------------------------------------------------- */
.admin-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.admin-tab{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:.82rem; font-weight:700; color:var(--ink-soft); }
.admin-tab.active{ background:var(--rose); border-color:var(--rose); color:#fff; }
.admin-empty{ text-align:center; padding:60px 0; color:var(--ink-soft); font-weight:600; }

/* table ----------------------------------------------------------------------- */
.admin-table-wrap{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); overflow:auto; box-shadow:var(--shadow-soft); }
.admin-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.admin-table th{ text-align:left; padding:10px 12px; background:var(--paper-deep); font-weight:800; color:var(--ink-soft); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.admin-table td{ padding:10px 12px; border-top:1px solid var(--line); vertical-align:top; }
.admin-muted{ color:var(--ink-soft); font-size:.82rem; }

.status-pill{ display:inline-block; padding:4px 12px; border-radius:999px; font-size:.75rem; font-weight:800; white-space:nowrap; }
.status-awaiting_payment{ background:#FDF2DA; color:#7A5A1E; }
.status-pending_verification{ background:#E4ECFB; color:#2E4C8C; }
.status-verified{ background:#E4F1E0; color:#3E5E37; }
.status-delivered{ background:#E0F1EC; color:#1F6F5C; }
.status-rejected{ background:#FBE4E7; color:#8C2F3F; }
.status-cancelled{ background:#EFEAE2; color:#6B5D52; }

/* order detail -------------------------------------------------------------------- */
.order-detail-head{ display:flex; align-items:center; gap:16px; margin-bottom:26px; }
.order-detail-head h1{ margin:0; }
.order-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:24px; align-items:start; }
@media (max-width:800px){ .order-grid{ grid-template-columns:1fr; } }
.order-col{ display:flex; flex-direction:column; gap:20px; }
.order-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:24px; box-shadow:var(--shadow-soft); }
.order-card h2{ font-size:1.15rem; margin-bottom:14px; }
.order-card h3{ font-size:.95rem; margin:18px 0 8px; color:var(--rose-deep); }
.order-dl{ display:grid; grid-template-columns:110px 1fr; gap:8px 12px; margin:0; }
.order-dl dt{ font-weight:800; font-size:.8rem; color:var(--ink-soft); }
.order-dl dd{ margin:0; font-size:.9rem; }
.proof-thumb{ max-width:100%; border-radius:10px; border:1px solid var(--line); }

.admin-action-form{ margin-bottom:18px; padding-bottom:18px; border-bottom:1px dashed var(--line); }
.admin-action-form:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.admin-action-form label{ display:block; font-weight:700; font-size:.85rem; margin-bottom:8px; }
.admin-action-form textarea, .admin-action-form input[type=file]{
  width:100%; border:2px solid var(--line); border-radius:10px; padding:10px; font-family:var(--font-body); font-size:.88rem; margin-bottom:10px;
}

.admin-tab {
  transition: all 0.2s ease;
  cursor: pointer;
}
.admin-tab:not(.active):hover {
  background: var(--paper-deep);
  border-color: var(--ink-soft);
  color: var(--ink);
  transform: translateY(-1px);
}
.admin-tab.active:hover {
  background: var(--rose-deep);
  transform: translateY(-1px);
}

#quickStats > div {
  transition: all 0.2s ease;
  box-shadow: var(--shadow-soft);
}
#quickStats > div:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-pop);
}

#orderSearch {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#orderSearch:focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(196,83,106,0.1);
}

.copy-inline-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
  font-size: 0.9em;
  padding: 0 4px;
}
.copy-inline-btn:hover {
  opacity: 1;
}

.admin-table-wrap {
  max-height: 60vh;
  overflow-y: scroll;
  overflow-x: auto;
}

/* Make table header sticky so it stays at the top when scrolling */
.admin-table th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper-deep);
  /* Needs a bottom border to separate it when scrolling */
  border-bottom: 1px solid var(--line);
}


/* Clickable table rows */
.admin-table-row {
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.admin-table-row:hover {
  background-color: rgba(0,0,0,0.02);
}
.admin-table-row:active {
  background-color: rgba(0,0,0,0.04);
}

/* Compact buttons in table */
.admin-table .btn-small {
    padding: 6px 10px !important;
    font-size: 0.8rem;
}

/* Allow emails to wrap gracefully */
.admin-muted {
    word-break: break-all;
    display: inline-block;
    max-width: 180px;
}