/* ============================================================
   SOVEREIGN SCENTS — Admin Dashboard styles
   Token system:
   display face: Cormorant Garamond (elegant serif, echoes the wordmark)
   body/UI face: Inter
   ============================================================ */

:root{
  --bg: #FBF6F4;
  --panel: #FFFFFF;
  --sidebar: #3B2A2E;
  --sidebar-text: #F3E4E2;
  --sidebar-text-dim: #C9AFAE;
  --gold: #B0863C;
  --gold-dark: #8C6A2E;
  --blush: #E9C3C8;
  --blush-soft: #F7E7E9;
  --accent: #B0863C;
  --accent-soft: #F7E7E9;
  --text: #2E2225;
  --muted: #8D7A7B;
  --border: #EEDFDD;
  --success: #4B7A5B;
  --success-soft: #E4EEE6;
  --danger: #A94442;
  --danger-soft: #F6E2E1;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(59,42,46,0.06), 0 10px 26px rgba(59,42,46,0.07);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Inter", -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ font-family:"Cormorant Garamond", serif; font-weight:600; margin:0; letter-spacing:.01em; }
p{ margin:0; }
button{ font-family:inherit; }
input,select,textarea{ font-family:inherit; }
a{ color: var(--gold-dark); }
::selection{ background: var(--blush); }

button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .nav-item:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------------- shared form bits ---------------- */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; font-size:14px; }
.field span{ font-weight:600; color: var(--text); }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=number], .field input[type=file], .field select, .field textarea{
  padding:10px 12px; border:1px solid var(--border); border-radius:9px;
  font-size:14px; background:#fff; color:var(--text);
}
.field textarea{ resize:vertical; }
.field-inline{ flex-direction:row; align-items:center; gap:8px; }
.field-inline input{ width:auto; }

.btn{ border:none; border-radius:9px; padding:10px 18px; font-size:14px; font-weight:600; cursor:pointer; transition: background .15s ease, transform .05s ease; }
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--gold); color:#fff; }
.btn-primary:hover{ background: var(--gold-dark); }
.btn-secondary{ background:#fff; color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover{ background: var(--blush-soft); }
.btn-block{ width:100%; }
.btn-link{ background:none; border:none; color:var(--gold-dark); font-size:13px; font-weight:600; cursor:pointer; padding:6px 0; }
.btn-danger{ color: var(--danger); }

.form-error{ background: var(--danger-soft); color: var(--danger); padding:8px 12px; border-radius:8px; font-size:13px; margin-bottom:12px; }
.form-note{ background: var(--blush-soft); color: var(--gold-dark); padding:8px 12px; border-radius:8px; font-size:13px; margin-bottom:12px; }

/* ---------------- auth screen ---------------- */
.auth-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 20% 15%, var(--blush-soft) 0%, transparent 45%), var(--bg);
  padding:24px;
}
.auth-card{
  width:100%; max-width:380px; background:var(--panel); border-radius:18px;
  padding:36px 32px; box-shadow: var(--shadow); border:1px solid var(--border);
}
.auth-mark{ color: var(--gold); margin-bottom:14px; }
.auth-eyebrow{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:6px; }
.auth-title{ font-size:28px; margin-bottom:6px; }
.auth-sub{ color:var(--muted); font-size:14px; margin-bottom:26px; }
.auth-form{ display:flex; flex-direction:column; }

/* ---------------- dashboard shell ---------------- */
.dashboard{ display:flex; min-height:100vh; }

.sidebar{
  width:240px; flex-shrink:0; background:var(--sidebar); color:var(--sidebar-text);
  display:flex; flex-direction:column; justify-content:space-between; padding:24px 16px;
}
.brand-mark{ display:flex; align-items:center; gap:10px; color: var(--gold); margin-bottom:28px; }
.brand-name{ font-family:"Cormorant Garamond",serif; font-size:18px; color:#fff; }
.brand-sub{ font-size:11px; color: var(--sidebar-text-dim); letter-spacing:.06em; text-transform:uppercase; }

.nav{ display:flex; flex-direction:column; gap:2px; }
.nav-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:none; border:none; color: var(--sidebar-text-dim);
  text-align:left; padding:10px 12px; border-radius:9px; font-size:14px; font-weight:500; cursor:pointer;
}
.nav-item:hover{ background: rgba(255,255,255,0.07); color:#fff; }
.nav-item.is-active{ background: var(--gold); color:#fff; }
.nav-badge{ background:#fff; color: var(--gold-dark); font-size:11px; font-weight:700; padding:1px 7px; border-radius:999px; }

.sidebar-bottom{ border-top:1px solid rgba(255,255,255,0.12); padding-top:14px; }
.signed-in-as{ font-size:12px; color: var(--sidebar-text-dim); margin-bottom:6px; word-break:break-all; }
.sidebar-bottom .btn-link{ color: var(--blush); padding:0; }

.main{ flex:1; padding:32px 40px 60px; max-width:1200px; }
.topbar{ margin-bottom:24px; }
.view-sub{ color:var(--muted); font-size:14px; margin-top:4px; }
.view[hidden]{ display:none; }

/* ---------------- stat cards ---------------- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:14px; margin-bottom:28px; }
.stat-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; }
.stat-card.accent{ border-color: var(--gold); background: var(--blush-soft); }
.stat-label{ font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.stat-value{ font-family:"Cormorant Garamond",serif; font-size:32px; }
.stat-value-sm{ font-size:18px; }

/* ---------------- panels & tables ---------------- */
.panel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow: var(--shadow); }
.panel h3{ font-size:18px; margin-bottom:14px; }
.panel-narrow{ max-width:460px; }

.table-wrap{ overflow-x:auto; }
.table{ width:100%; border-collapse:collapse; font-size:14px; }
.table th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--border); }
.table td{ padding:12px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.table tr:last-child td{ border-bottom:none; }
.table tr.row-clickable{ cursor:pointer; }
.table tr.row-clickable:hover{ background: var(--bg); }

.status-pill{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.status-New{ background: var(--blush-soft); color: var(--gold-dark); }
.status-InProgress{ background:#FBF0D9; color:#8A6A1B; }
.status-Completed{ background: var(--success-soft); color: var(--success); }
.status-Delivered{ background:#E4E9EE; color:#3D5A75; }
.status-Pending{ background: var(--blush-soft); color: var(--gold-dark); }
.status-Approved{ background: var(--success-soft); color: var(--success); }
.status-Hidden{ background:#EEE; color:#777; }

.empty-state{ color:var(--muted); font-size:14px; padding:24px 4px; text-align:center; }

/* ---------------- toolbar ---------------- */
.toolbar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.input{ padding:9px 12px; border:1px solid var(--border); border-radius:9px; font-size:14px; background:#fff; }
.select{ min-width:150px; }
#orders-search{ flex:1; min-width:200px; }

/* ---------------- reviews list ---------------- */
.review-list{ display:flex; flex-direction:column; gap:14px; }
.review-card{ border:1px solid var(--border); border-radius:11px; padding:16px; }
.review-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.review-name{ font-weight:700; }
.review-stars{ color: var(--gold); letter-spacing:2px; }
.review-meta{ font-size:12px; color:var(--muted); margin-bottom:8px; }
.review-text{ font-size:14px; line-height:1.5; margin-bottom:12px; }
.review-actions{ display:flex; gap:8px; }
.review-actions .btn{ padding:6px 14px; font-size:13px; }

/* ---------------- product grid ---------------- */
.product-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:16px; }
.product-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; cursor:pointer; box-shadow: var(--shadow); }
.product-card:hover{ border-color: var(--gold); }
.product-thumb{ width:100%; aspect-ratio:1/1; background: var(--blush-soft); display:flex; align-items:center; justify-content:center; color: var(--gold-dark); font-size:12px; overflow:hidden; }
.product-thumb img{ width:100%; height:100%; object-fit:cover; }
.product-info{ padding:14px 16px; }
.product-name{ font-weight:700; font-size:15px; margin-bottom:2px; }
.product-price{ color: var(--gold-dark); font-weight:700; font-size:14px; }
.product-inactive{ opacity:.55; }
.product-tag{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:4px; }

.image-preview{ width:100px; height:100px; object-fit:cover; border-radius:8px; margin-top:8px; border:1px solid var(--border); }

/* ---------------- modal ---------------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(46,34,37,0.5); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50; }
.modal-overlay[hidden]{ display:none; }
.modal{ background:#fff; border-radius:18px; padding:28px 26px; max-width:520px; width:100%; max-height:88vh; overflow-y:auto; position:relative; box-shadow: var(--shadow); }
.modal h3{ margin-bottom:16px; padding-right:24px; font-size:20px; }
.modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px; color:var(--muted); cursor:pointer; line-height:1; }
.modal-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:6px; }

.detail-grid{ display:grid; gap:10px; font-size:14px; margin-bottom:16px; }
.detail-row{ display:flex; gap:8px; }
.detail-label{ width:140px; flex-shrink:0; color:var(--muted); font-weight:600; }
.detail-files{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.detail-files a{ display:inline-block; padding:6px 10px; background: var(--blush-soft); color: var(--gold-dark); border-radius:6px; font-size:12px; text-decoration:none; font-weight:600; }
.status-select{ margin-top:4px; }

/* ---------------- toast ---------------- */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background: var(--text); color:#fff; padding:10px 18px; border-radius:9px; font-size:14px; box-shadow: var(--shadow); z-index:100; transition: background 200ms ease, transform 200ms ease; }
.toast.error{ background: var(--danger); }
.toast.success{ background: linear-gradient(135deg, #2f7a3a, #5ba564); }

.muted{ color:var(--muted); font-size:13px; margin-bottom:6px; }

/* ---------------- responsive ---------------- */
@media (max-width: 860px){
  .dashboard{ flex-direction:column; }
  .sidebar{ width:100%; flex-direction:row; align-items:center; padding:12px 16px; }
  .sidebar-top{ flex:1; }
  .brand-mark{ margin-bottom:0; }
  .nav{ flex-direction:row; overflow-x:auto; }
  .sidebar-bottom{ display:none; }
  .main{ padding:20px; }
}