/* ==========================================================================
   پنل مدیریت — از همان توکن‌های style.css استفاده می‌کند
   ========================================================================== */

body.admin-body{
  min-height:100vh;
  display:flex;
}

.admin-sidebar{
  width:250px;
  flex-shrink:0;
  background:var(--ink-900);
  border-inline-start:1px solid var(--line);
  padding:28px 20px;
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
}
.admin-sidebar .brand{ margin-bottom:38px; font-size:17px; }
.admin-sidebar .brand .mark{ width:30px; height:30px; }

.admin-nav{ display:flex; flex-direction:column; gap:6px; }
.admin-nav button{
  display:flex;
  align-items:center;
  gap:10px;
  background:transparent;
  border:none;
  color:var(--muted);
  font-family:var(--font-body);
  font-size:14.5px;
  padding:12px 14px;
  border-radius:var(--radius-s);
  text-align:right;
  transition:background .2s ease, color .2s ease;
}
.admin-nav button:hover{ background:var(--ink-850); color:var(--text); }
.admin-nav button.is-active{ background:rgba(224,138,60,.12); color:var(--copper-bright); }
.admin-nav .count{
  margin-inline-start:auto;
  font-family:var(--font-mono);
  font-size:11.5px;
  background:var(--ink-800);
  border-radius:999px;
  padding:2px 8px;
  color:var(--muted);
}

.admin-sidebar-foot{ margin-top:auto; padding-top:20px; border-top:1px solid var(--line); }
.admin-sidebar-foot a{ font-size:13px; color:var(--muted-2); display:flex; align-items:center; gap:8px; }
.admin-sidebar-foot a:hover{ color:var(--copper-bright); }

.admin-main{
  flex:1;
  padding:40px 44px 80px;
  max-width:1100px;
}
.admin-head{ margin-bottom:32px; }
.admin-head h1{ font-size:24px; color:var(--text); }
.admin-head p{ margin-top:8px; color:var(--muted); font-size:14px; }

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

/* ---- Orders table ---- */
.orders-empty{
  border:1px dashed var(--line);
  border-radius:var(--radius-m);
  padding:56px 24px;
  text-align:center;
  color:var(--muted);
  font-size:14.5px;
}
.order-card{
  background:var(--ink-900);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:22px 24px;
  margin-bottom:14px;
}
.order-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.order-service{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--copper-bright);
  letter-spacing:.04em;
}
.order-card h3{ margin-top:6px; font-size:16px; color:var(--text); }
.order-meta-row{
  display:flex;
  gap:18px;
  margin-top:10px;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--muted);
}
.order-meta-row span b{ color:var(--text); font-weight:500; }
.order-details{
  margin-top:14px;
  font-size:13.5px;
  color:var(--muted);
  line-height:1.85;
  background:var(--ink-950);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-s);
  padding:14px 16px;
}
.order-files{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.order-files span, .order-files a.file-chip{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--trace);
  border:1px solid var(--line);
  border-radius:6px;
  padding:4px 9px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.order-files a.file-chip{ transition:border-color .2s ease, color .2s ease; }
.order-files a.file-chip:hover{ border-color:var(--copper-bright); color:var(--copper-bright); }
.order-files a.file-chip em{ color:var(--muted-2); font-style:normal; }
.order-files a.file-chip-img{ padding:4px 9px 4px 4px; }
.order-files a.file-chip-img img{ width:26px; height:26px; object-fit:cover; border-radius:4px; }
.order-card-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.order-status{
  font-family:var(--font-mono);
  font-size:12.5px;
  background:var(--ink-950);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:var(--radius-s);
  padding:8px 10px;
}
.icon-btn{
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted);
}
.icon-btn:hover{ border-color:#d9534f; color:#e77f7b; }
.icon-btn svg{ width:15px; height:15px; }
.order-date{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted-2); }

/* ---- Courses admin ---- */
.admin-grid-2{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:28px;
  align-items:flex-start;
}
.course-form{
  background:var(--ink-900);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:26px;
  position:sticky;
  top:24px;
}
.course-form h3{ font-size:15.5px; margin-bottom:18px; }
.course-form .field label{ font-size:13px; }
.course-form .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.thumb-preview{
  width:100%;
  aspect-ratio:16/10;
  border-radius:var(--radius-s);
  border:1px dashed var(--line);
  overflow:hidden;
  margin-bottom:14px;
  background:var(--ink-950);
  display:flex; align-items:center; justify-content:center;
}
.thumb-preview img{ width:100%; height:100%; object-fit:cover; }
.thumb-preview span{ font-size:12px; color:var(--muted-2); }
.form-actions{ display:flex; gap:10px; margin-top:6px; }
.form-actions .btn{ flex:1; padding:12px; font-size:13.5px; }

.admin-course-list{ display:flex; flex-direction:column; gap:12px; }
.admin-course-item{
  display:flex;
  gap:16px;
  align-items:center;
  background:var(--ink-900);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:14px;
}
.admin-course-item .thumb{
  width:88px; height:60px;
  border-radius:8px;
  overflow:hidden;
  flex-shrink:0;
  background:var(--ink-950);
}
.admin-course-item .thumb img{ width:100%; height:100%; object-fit:cover; }
.admin-course-item .info{ flex:1; min-width:0; }
.admin-course-item h4{ font-size:14.5px; color:var(--text); }
.admin-course-item .meta{ margin-top:5px; font-size:12px; color:var(--muted); display:flex; gap:12px; flex-wrap:wrap; }
.admin-course-item .price{ font-family:var(--font-mono); font-size:12.5px; color:var(--copper-bright); }
.admin-course-item .actions{ display:flex; gap:8px; flex-shrink:0; }
.admin-course-item .actions button{
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  display:flex; align-items:center; justify-content:center;
}
.admin-course-item .actions button:hover{ border-color:var(--copper-bright); color:var(--copper-bright); }
.admin-course-item .actions button.del-btn:hover{ border-color:#d9534f; color:#e77f7b; }
.admin-course-item .actions svg{ width:14px; height:14px; }

.toast{
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--ink-800);
  border:1px solid var(--copper);
  color:var(--text);
  padding:13px 22px;
  border-radius:999px;
  font-size:13.5px;
  opacity:0;
  visibility:hidden;
  transition:all .3s ease;
  z-index:200;
}
.toast.is-visible{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

@media (max-width:900px){
  body.admin-body{ flex-direction:column; }
  .admin-sidebar{ width:100%; height:auto; position:static; flex-direction:row; align-items:center; padding:16px 20px; overflow-x:auto; }
  .admin-sidebar .brand{ margin-bottom:0; margin-inline-end:20px; }
  .admin-nav{ flex-direction:row; }
  .admin-sidebar-foot{ display:none; }
  .admin-main{ padding:28px 20px 60px; }
  .admin-grid-2{ grid-template-columns:1fr; }
  .course-form{ position:static; }
}