/* ============================================================
   ASHMAK MEDIA — Admin dashboard styles
   Reuses design tokens from style.css (colors, fonts, radius)
   ============================================================ */

body.admin-body{
  background:var(--ink-2); min-height:100vh;
}

/* ---------- login screen ---------- */
.admin-login{
  min-height:100vh; display:grid; place-items:center; padding:24px;
}
.admin-login-card{
  width:100%; max-width:380px; background:var(--ink-3); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:36px 32px; box-shadow:var(--shadow);
}
.admin-login-card h1{ font-size:1.5rem; margin-bottom:6px; }
.admin-login-card p{ color:var(--mute); font-size:.9rem; margin-bottom:26px; }
.admin-login-card .field{ margin-bottom:16px; }
.admin-error{
  background:rgba(224,75,62,.08); border:1px solid rgba(224,75,62,.3); color:#c0392b;
  border-radius:8px; padding:10px 14px; font-size:.85rem; margin-bottom:16px; display:none;
}
.admin-error.show{ display:block; }

/* ---------- dashboard shell ---------- */
.admin-shell{ display:none; }
.admin-shell.show{ display:block; }
.admin-topbar{
  background:var(--ink-3); border-bottom:1px solid var(--line-soft);
  padding:16px 28px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:10;
}
.admin-topbar b{ font-family:var(--display); font-size:1.15rem; }
.admin-topbar span{ color:var(--mute); font-size:.85rem; }
.admin-wrap{ max-width:1080px; margin:0 auto; padding:32px 24px 80px; }

.admin-tabs{ display:flex; gap:8px; margin-bottom:28px; border-bottom:1px solid var(--line-soft); }
.admin-tab{
  font:inherit; background:none; border:none; cursor:pointer; padding:12px 18px;
  color:var(--mute); font-weight:600; font-size:.92rem; border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.admin-tab.active{ color:var(--tungsten); border-bottom-color:var(--tungsten); }
.admin-panel{ display:none; }
.admin-panel.active{ display:block; }

/* ---------- form card ---------- */
.admin-form-card{
  background:var(--ink-3); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:26px; margin-bottom:32px;
}
.admin-form-card h2{ font-size:1.15rem; margin-bottom:18px; }
.admin-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.admin-form-grid .field-full{ grid-column:1 / -1; }
.admin-form-card label{ display:block; font-size:.82rem; color:var(--mute); margin-bottom:6px; }
.admin-form-card input[type="text"],
.admin-form-card input[type="number"],
.admin-form-card input[type="url"],
.admin-form-card select,
.admin-form-card textarea{
  width:100%; background:var(--ink-2); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; font:inherit; font-size:.92rem; color:var(--bone);
}
.admin-form-card textarea{ min-height:80px; resize:vertical; }
.admin-form-card input[type="file"]{ font-size:.85rem; }
.admin-form-card .checkbox-row{ display:flex; align-items:center; gap:8px; }
.admin-form-card .checkbox-row input{ width:auto; }
.admin-hint{ font-size:.8rem; color:var(--mute); margin-top:-6px; }
.admin-hint code{ background:var(--ink-2); padding:1px 5px; border-radius:4px; font-size:.78rem; }
.admin-form-actions{ display:flex; gap:10px; margin-top:18px; }
.admin-thumb-preview{
  width:80px; height:80px; border-radius:8px; object-fit:cover; border:1px solid var(--line);
  margin-top:8px; display:none;
}
.admin-thumb-preview.show{ display:block; }

/* ---------- buttons ---------- */
.admin-btn{
  font:inherit; font-weight:600; font-size:.88rem; border-radius:8px; padding:10px 18px;
  border:1px solid var(--line); background:var(--ink-2); color:var(--bone); cursor:pointer;
  transition:border-color .2s, background .2s;
}
.admin-btn:hover{ border-color:var(--tungsten); }
.admin-btn-primary{ background:var(--tungsten); border-color:var(--tungsten); color:#fff; }
.admin-btn-primary:hover{ background:var(--tungsten-2); }
.admin-btn-danger{ color:#c0392b; border-color:rgba(192,57,43,.35); }
.admin-btn-danger:hover{ background:rgba(192,57,43,.08); border-color:#c0392b; }
.admin-btn-sm{ padding:6px 12px; font-size:.8rem; }
.admin-btn:disabled{ opacity:.55; cursor:not-allowed; }

/* ---------- list table ---------- */
.admin-list{ display:flex; flex-direction:column; gap:10px; }
.admin-row{
  background:var(--ink-3); border:1px solid var(--line-soft); border-radius:10px;
  padding:14px 16px; display:flex; align-items:center; gap:14px;
}
.admin-row img{ width:52px; height:52px; border-radius:8px; object-fit:cover; flex:0 0 52px; background:var(--ink-2); }
.admin-row-body{ flex:1; min-width:0; }
.admin-row-body b{ display:block; font-size:.95rem; }
.admin-row-body span{ display:block; color:var(--mute); font-size:.8rem; margin-top:2px; }
.admin-row-actions{ display:flex; gap:8px; flex:0 0 auto; }
.admin-badge{
  font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px;
  border-radius:20px; background:var(--ink-2); color:var(--mute); border:1px solid var(--line);
}
.admin-badge.unpublished{ color:#c0392b; border-color:rgba(192,57,43,.3); }
.admin-badge.featured{ color:var(--tungsten); border-color:rgba(103,14,16,.35); }
.admin-empty{ color:var(--mute); font-size:.9rem; padding:20px 0; text-align:center; }
.admin-status{ font-size:.85rem; margin-top:12px; min-height:1.2em; }
.admin-status.ok{ color:#1e8e5a; }
.admin-status.err{ color:#c0392b; }

@media (max-width:640px){
  .admin-form-grid{ grid-template-columns:1fr; }
  .admin-row{ flex-wrap:wrap; }
}