/* ═══════════════════════════════════════
   THUGIL DESIGNERS — Admin Page Styles
   assets/css/admin.css
═══════════════════════════════════════ */

/* ── Admin page body ── */
body.admin-page { background: var(--ink2); }

/* ── Admin nav overrides ── */
.admin-nav-center {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
}
.admin-nav-label {
  display: flex; align-items: center; gap: 8px;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.anl-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.anl-dot.online  { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,.6); }
.anl-dot.offline { background: #E05C6E; }
.n-back {
  color: var(--muted); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; font-weight: 500;
  transition: color .2s; padding: 8px 14px; border: 1px solid var(--border);
}
.n-back:hover { color: var(--gold); border-color: var(--gold); }

/* ── Admin main layout ── */
.admin-main { padding-top: 68px; min-height: 100vh; }

/* ══════════════════════════
   LOGIN PAGE
══════════════════════════ */
.admin-login-page {
  min-height: calc(100vh - 68px);
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 5%;
  background: radial-gradient(ellipse at 60% 40%, rgba(139,26,47,.15) 0%, transparent 60%),
              var(--ink2);
}
.alp-inner { width: 100%; max-width: 420px; text-align: center; }
.alp-logo {
  width: 90px; height: 90px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--gold); margin: 0 auto 1.5rem;
  background: rgba(200,151,59,.06); display: flex; align-items: center; justify-content: center;
}
.alp-logo img { width: 86px; height: 86px; object-fit: contain; border-radius: 50%; }
.alp-title {
  font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 900;
  color: var(--cream); margin-bottom: .3rem;
}
.alp-sub { font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: 2.5rem; }
.alp-box {
  background: var(--ink3); border: 1px solid var(--border);
  padding: 2.5rem; text-align: left; margin-bottom: 1.5rem;
}
.alp-back {
  font-size: .75rem; color: var(--muted); text-decoration: none;
  letter-spacing: .08em; transition: color .2s;
}
.alp-back:hover { color: var(--gold); }

/* ══════════════════════════
   DASHBOARD LAYOUT
══════════════════════════ */
.admin-dashboard {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - 68px);
}

/* ── Sidebar ── */
.admin-sidebar {
  background: var(--ink3);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 68px;
  height: calc(100vh - 68px);
  overflow-y: auto;
}
.asb-head {
  padding: 2rem 1.5rem 1.8rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.asb-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(200,151,59,.12); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin: 0 auto 1rem;
}
.asb-name { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: var(--cream); }
.asb-role { font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-top: 3px; }
.asb-nav { padding: 1.2rem .8rem; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.asb-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; background: none; border: none;
  color: var(--muted); font-family: 'DM Sans', sans-serif;
  font-size: .82rem; letter-spacing: .05em; cursor: pointer;
  transition: all .2s; text-align: left; border-radius: 2px;
  position: relative;
}
.asb-link::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--gold); opacity: 0; transition: opacity .2s;
}
.asb-link:hover { color: var(--dust); background: rgba(240,230,211,.04); }
.asb-link.active { color: var(--gold); background: rgba(200,151,59,.08); }
.asb-link.active::before { opacity: 1; }
.asb-icon { font-size: 1rem; flex-shrink: 0; width: 22px; text-align: center; }
.asb-foot {
  padding: 1.2rem; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .6rem;
}
.asb-site-link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; color: var(--muted); font-size: .75rem;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  padding: 9px; border: 1px solid var(--border); transition: all .2s;
}
.asb-site-link:hover { color: var(--gold); border-color: var(--gold); }
.asb-logout {
  background: rgba(139,26,47,.15); border: 1px solid rgba(139,26,47,.3);
  color: #E05C6E; padding: 9px; font-family: 'DM Sans', sans-serif;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: all .2s; font-weight: 500;
}
.asb-logout:hover { background: rgba(139,26,47,.3); border-color: #E05C6E; }

/* ── Content area ── */
.admin-content {
  padding: 3rem 3.5rem;
  background: var(--ink2);
  overflow-y: auto;
}
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.tab-header { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.tab-title {
  font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 900;
  color: var(--cream); margin-bottom: .4rem;
}
.tab-sub { font-size: .85rem; color: var(--muted); }

/* ── Add product form ── */
.add-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2.5rem; }
.add-section-title {
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.2rem; font-weight: 500;
}
.drop-zone.large {
  border: 2px dashed var(--border); padding: 3rem 2rem; text-align: center;
  cursor: pointer; transition: border-color .2s, background .2s;
  display: block; margin-bottom: 0;
}
.drop-zone.large:hover { border-color: var(--gold); background: rgba(200,151,59,.04); }
.drop-zone.large .dz-icon { font-size: 2.5rem; margin-bottom: .8rem; }
.drop-zone.large p { font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
.drop-zone.large p strong { color: var(--dust); }
.dz-hint { font-size: .72rem !important; opacity: .6; }
.prev-wrap { margin-top: 1rem; position: relative; }
.prev-full {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
  border: 1px solid var(--border);
}
.prev-clear {
  position: absolute; top: 8px; right: 8px;
  background: rgba(14,10,11,.85); border: 1px solid var(--border);
  color: var(--muted); padding: 5px 10px; cursor: pointer;
  font-size: .72rem; font-family: 'DM Sans', sans-serif; transition: color .2s;
}
.prev-clear:hover { color: #E05C6E; }
.fi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── Manage toolbar ── */
.manage-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.2rem; padding: .8rem 1rem;
  background: var(--ink3); border: 1px solid var(--border);
}
.manage-count { font-size: .8rem; color: var(--muted); }
.manage-count strong { color: var(--gold); }

/* ── Stats / Overview ── */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); margin-bottom: 3rem;
}
.stat-card {
  background: var(--ink3); padding: 1.8rem 1.5rem;
  text-align: center;
}
.stat-num {
  font-family: 'Playfair Display', serif; font-size: 2.5rem;
  font-weight: 900; color: var(--gold); line-height: 1;
}
.stat-lbl { font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-top: .5rem; }
.recent-section { margin-top: 1.5rem; }

/* ── Mobile responsive ── */
@media (max-width: 900px) {
  .admin-dashboard { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; }
  .asb-head { padding: 1rem; display: flex; align-items: center; gap: 1rem; text-align: left; }
  .asb-head .asb-avatar { margin: 0; flex-shrink: 0; }
  .asb-nav { flex-direction: row; flex-wrap: wrap; padding: .8rem; gap: 4px; }
  .asb-link { padding: 8px 12px; }
  .admin-content { padding: 2rem 1.5rem; }
  .add-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .admin-nav-center { display: none; }
}
@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .fi-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════
   EDIT PRODUCT MODAL
══════════════════════════ */
.edit-modal {
  visibility: hidden; opacity: 0; pointer-events: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9000;
  background: rgba(14,10,11,.88); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  transition: opacity .25s, visibility .25s;
}
.edit-modal.show { visibility: visible; opacity: 1; pointer-events: auto; }

.edit-modal-box {
  background: var(--ink2); border: 1px solid var(--border);
  width: 100%; max-width: 860px; max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
}
.edit-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 2rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.edit-modal-head h3 {
  font-family: 'Playfair Display', serif; font-size: 1.4rem;
  font-weight: 700; color: var(--cream);
}
.edit-close {
  background: none; border: 1px solid var(--border); color: var(--muted);
  width: 34px; height: 34px; cursor: pointer; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; flex-shrink: 0;
}
.edit-close:hover { border-color: #E05C6E; color: #E05C6E; }

.edit-modal-body {
  padding: 2rem; overflow-y: auto; flex: 1;
}
.edit-grid {
  display: grid; grid-template-columns: 220px 1fr; gap: 2rem;
}
.edit-img-col { display: flex; flex-direction: column; gap: .8rem; }
.edit-img-wrap {
  border: 1px solid var(--border); background: var(--ink3);
  aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.edit-cur-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edit-no-img { font-size: .78rem; color: var(--muted); letter-spacing: .08em; }
.edit-upload-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 14px; border: 1px dashed var(--border); cursor: pointer;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); transition: all .2s; font-family: 'DM Sans', sans-serif;
}
.edit-upload-btn:hover { border-color: var(--gold); color: var(--gold); }
.edit-new-img-wrap { position: relative; }
.edit-err {
  background: rgba(224,92,110,.1); border: 1px solid rgba(224,92,110,.3);
  color: #E05C6E; font-size: .8rem; padding: 10px 14px; margin-top: 1rem;
}

.edit-modal-foot {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.2rem 2rem; border-top: 1px solid var(--border);
  flex-shrink: 0; background: var(--ink3);
}
.edit-ok {
  font-size: .8rem; color: #4ade80;
  background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.25);
  padding: 8px 16px;
}

/* Edit button in manage list */
.btn-edit {
  background: none; border: 1px solid var(--border); color: var(--muted);
  padding: 7px 14px; cursor: pointer; font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase;
  font-family: 'DM Sans', sans-serif; font-weight: 500;
  white-space: nowrap; transition: all .2s;
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.btn-edit:hover { border-color: var(--gold); color: var(--gold); }

.mg-actions { display: flex; gap: .5rem; flex-shrink: 0; }

@media (max-width: 640px) {
  .edit-grid { grid-template-columns: 1fr; }
  .edit-img-wrap { aspect-ratio: 2/1; }
  .edit-modal-box { max-height: 95vh; }
}

/* ══════════════════════════
   ORDERS TAB
══════════════════════════ */
.ord-toolbar { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.ord-search-wrap { flex:1; min-width:200px; }
.ord-search { width:100%; }
.ord-filters { display:flex; gap:4px; flex-wrap:wrap; }
.ord-filter { background:none; border:1px solid var(--border); color:var(--muted); padding:7px 14px; cursor:pointer; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-family:'DM Sans',sans-serif; transition:all .2s; }
.ord-filter:hover { border-color:var(--gold); color:var(--gold); }
.ord-filter.active { background:var(--gold); border-color:var(--gold); color:#000; font-weight:600; }

.orders-list { display:flex; flex-direction:column; gap:3px; }
.ord-row { display:grid; grid-template-columns:140px 1fr 1.4fr 1fr auto; align-items:center; gap:1rem; padding:1rem 1.2rem; background:var(--ink3); border:1px solid var(--border); cursor:pointer; transition:all .2s; }
.ord-row:hover { border-color:var(--gold); background:rgba(200,151,59,.04); }
.ord-id { font-family:'Playfair Display',serif; font-size:.9rem; font-weight:700; color:var(--cream); }
.ord-date { font-size:.7rem; color:var(--muted); margin-top:.2rem; }
.ord-cust-name { font-size:.85rem; color:var(--dust); font-weight:500; }
.ord-cust-phone { font-size:.75rem; color:var(--muted); margin-top:.2rem; }
.ord-prod-name { font-size:.82rem; color:var(--cream); }
.ord-prod-meta { font-size:.7rem; color:var(--muted); margin-top:.2rem; }
.ord-pay { font-size:.82rem; color:var(--dust); }
.ord-bal { font-size:.72rem; margin-top:.2rem; }
.ord-bal.due { color:#E05C6E; }
.ord-bal.clear { color:#4ade80; }
.ord-status-badge { display:inline-block; padding:5px 12px; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; border:1px solid var(--sc,#6b7280); color:var(--sc,#6b7280); background:rgba(107,114,128,.08); white-space:nowrap; }
.ord-rcpt-count { display:block; font-size:.68rem; color:var(--muted); margin-top:.3rem; }

/* Order modal extras */
.ord-modal-id { font-size:.75rem; color:var(--gold); letter-spacing:.1em; margin-top:.3rem; font-family:'DM Sans',sans-serif; }
.om-section-title { font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:.8rem; font-weight:500; padding-bottom:.4rem; border-bottom:1px solid var(--border); }
.receipt-list { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.rcpt-item { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--ink3); border:1px solid var(--border); text-decoration:none; color:var(--muted); font-size:.78rem; transition:all .2s; }
.rcpt-item:hover { border-color:var(--gold); color:var(--gold); }

/* ══════════════════════════
   USERS TAB
══════════════════════════ */
.users-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; padding:.8rem 1rem; background:var(--ink3); border:1px solid var(--border); }
.usr-row { align-items:center; }
.usr-avatar { width:42px; height:42px; border-radius:50%; background:rgba(200,151,59,.15); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; color:var(--gold); flex-shrink:0; }
.usr-role-badge { display:inline-block; padding:2px 10px; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--rc,#6b7280); color:var(--rc,#6b7280); margin-left:.5rem; font-weight:600; vertical-align:middle; }
.usr-inactive { display:inline-block; padding:2px 8px; font-size:.62rem; background:rgba(224,92,110,.12); border:1px solid rgba(224,92,110,.3); color:#E05C6E; margin-left:.4rem; vertical-align:middle; letter-spacing:.08em; text-transform:uppercase; }

@media (max-width:900px) {
  .ord-row { grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; }
  .ord-id-col,.ord-cust-col { grid-column:span 1; }
  .ord-prod-col { grid-column:span 2; }
  .ord-pay-col,.ord-status-col { grid-column:span 1; }
}

/* ══════════════════════════
   GALLERY TAB
══════════════════════════ */
.gal-search-wrap { margin-bottom:1.2rem; }
.gal-product-list { display:flex; flex-direction:column; gap:3px; margin-bottom:2rem; }
.gal-prod-row {
  display:flex; align-items:center; gap:1rem;
  padding:.9rem 1.2rem; background:var(--ink3); border:1px solid var(--border);
  cursor:pointer; transition:all .2s;
}
.gal-prod-row:hover { border-color:var(--gold); background:rgba(200,151,59,.04); }
.gal-edit-hint { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-left:auto; flex-shrink:0; }

.gal-editor { background:var(--ink2); border:1px solid var(--gold); padding:1.8rem; margin-top:1.5rem; }
.gal-editor-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.2rem; gap:1rem; }
.gal-editor-title { font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:700; color:var(--cream); }
.gal-editor-sku { font-size:.68rem; color:var(--muted); letter-spacing:.12em; margin-top:.2rem; }

.gal-img-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.8rem; margin-bottom:1rem; }
.gal-img-cell {
  position:relative; aspect-ratio:3/4; background:var(--ink3);
  border:2px solid var(--border); overflow:hidden; cursor:pointer;
  transition:border-color .2s;
}
.gal-img-cell img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.gal-img-cell:hover img { transform:scale(1.05); }
.gal-img-cell.primary { border-color:var(--gold); }
.gal-primary-badge {
  position:absolute; bottom:.4rem; left:.4rem;
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--gold); color:#000; padding:2px 8px; font-weight:700;
}
.gal-img-actions {
  position:absolute; top:.4rem; right:.4rem;
  display:flex; flex-direction:column; gap:.3rem;
  opacity:0; transition:opacity .2s;
}
.gal-img-cell:hover .gal-img-actions { opacity:1; }
.gal-img-actions button {
  background:rgba(14,10,11,.85); border:1px solid var(--border);
  color:var(--muted); width:28px; height:28px; cursor:pointer;
  font-size:.75rem; display:flex; align-items:center; justify-content:center;
  transition:all .15s; padding:0;
}
.gal-img-actions button:hover { border-color:var(--gold); color:var(--gold); }
.gal-img-actions .gal-del:hover { border-color:#E05C6E; color:#E05C6E; }
.gal-no-images { padding:2rem; text-align:center; color:var(--muted); font-size:.82rem; border:1px dashed var(--border); }

.gal-add-img {
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  padding:1rem; background:var(--ink3); border:1px dashed var(--border); margin-bottom:1.5rem;
}

/* ══════════════════════════
   VIDEOS ADMIN
══════════════════════════ */
.vid-admin-row { align-items:center; }
.vid-admin-preview { flex-shrink:0; width:80px; height:52px; overflow:hidden; background:var(--ink3); border:1px solid var(--border); }
.vid-admin-thumb { width:100%; height:100%; object-fit:cover; display:block; }
.vid-admin-thumb-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--border); }