/* ═══════════════════════════════════════════════════════════
   MALAYA FA — admin.css  |  Dark Luxury Admin Panel
   ═══════════════════════════════════════════════════════════ */

/* ── LOGIN ───────────────────────────────────────────────── */
.login-screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  position: relative;
}
.login-card {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-xl);
  padding: 44px 40px;
  width: 100%; max-width: 400px;
  position: relative; z-index: 1;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
}
.login-card::before {
  content: '';
  position: absolute; top: -1px; left: 30%; right: 30%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--p1), transparent);
  border-radius: 2px;
}
.login-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; }
.login-logo .logo-img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 0 10px var(--p-glow)); }
.login-logo .logo-name { color: var(--text); }
.login-logo .logo-name em { color: var(--p2); }
.login-logo .logo-tag { color: var(--text4); }
.login-card h2 { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.4px; margin-bottom: 4px; }
.login-sub { font-size: 13px; color: var(--text3); margin-bottom: 28px; }
.login-error { color: #f87171; font-size: 12px; min-height: 16px; margin-bottom: 8px; }
.login-hint { font-size: 11px; color: var(--text4); text-align: center; margin-top: 16px; }

/* ── ADMIN TOPBAR ────────────────────────────────────────── */
.admin-topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 0;
  background: rgba(7,6,13,.85);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px) saturate(180%);
  z-index: 100; padding: 0 20px;
}
.light .admin-topbar { background: rgba(245,243,255,.9); }
.admin-nav { display: flex; align-items: center; gap: 2px; flex: 1; margin: 0 20px; overflow-x: auto; }
.admin-nav::-webkit-scrollbar { height: 0; }
.anb {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 100px;
  font-size: 13px; font-weight: 500; color: var(--text3);
  transition: var(--trans); cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; font-family: var(--font);
}
.anb:hover { color: var(--text); background: var(--glass2); }
.anb.active { color: var(--p2); background: rgba(139,26,42,.12); border-color: var(--border2); }
.admin-tr { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.admin-user-badge {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text3);
  margin-right: 4px;
}
.aub-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.5); }

/* ── ADMIN LAYOUT ────────────────────────────────────────── */
.admin-layout {
  margin-top: var(--topbar-h);
  padding: 32px 32px;
  max-width: 1280px;
  margin-left: auto; margin-right: auto;
}
.admin-section { animation: sec-in .2s ease; }
@keyframes sec-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.sec-head h1 { font-size: 26px; font-weight: 900; color: var(--text); letter-spacing: -.5px; }

/* ── STATS ───────────────────────────────────────────────── */
.stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 24px; }
.stat {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 22px;
  position: relative; overflow: hidden; transition: var(--trans);
}
.stat:hover { border-color: var(--border3); }
.stat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--p1), var(--p4));
}
.stat-n { font-size: 36px; font-weight: 900; color: var(--text); letter-spacing: -2px; line-height: 1; }
.stat-l { font-size: 11px; font-weight: 600; color: var(--text4); text-transform: uppercase; letter-spacing: 1px; margin-top: 8px; }
.stat-ico {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 32px; opacity: .1;
}

/* ── DASH GRID ───────────────────────────────────────────── */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── CARDS ───────────────────────────────────────────────── */
.ac {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ac-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.ac-head h2 { font-size: 14px; font-weight: 700; color: var(--text); }

/* ── QUICK ACTIONS ───────────────────────────────────────── */
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 20px; }
.qa-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px 16px; border-radius: var(--radius); cursor: pointer;
  background: var(--bg3); border: 1px solid var(--border2);
  transition: var(--trans); text-align: left; font-family: var(--font);
}
.qa-btn:hover { border-color: var(--p1); background: rgba(139,26,42,.08); transform: translateY(-1px); }
.qa-btn svg { color: var(--p1); }
.qa-btn span { font-size: 13px; font-weight: 600; color: var(--text); }
.qa-btn small { font-size: 11px; color: var(--text3); }

/* ── ACTIVITY ────────────────────────────────────────────── */
.af { list-style: none; padding: 6px 20px; }
.af li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.af li:last-child { border-bottom: none; }
.af-line { width: 2px; background: var(--p4); border-radius: 2px; align-self: stretch; margin-top: 6px; flex-shrink: 0; }
.af-body { flex: 1; }
.af-msg { font-size: 13px; color: var(--text2); line-height: 1.4; }
.af-msg strong { color: var(--text); font-weight: 600; }
.af-time { font-size: 11px; color: var(--text4); white-space: nowrap; margin-top: 2px; }

/* ── TABLE ───────────────────────────────────────────────── */
.at { width: 100%; border-collapse: collapse; font-size: 13px; }
.at thead th {
  padding: 10px 18px; text-align: left;
  font-size: 10px; font-weight: 700; color: var(--text4);
  text-transform: uppercase; letter-spacing: 1px;
  border-bottom: 1px solid var(--border); background: rgba(0,0,0,.15);
}
.at tbody td { padding: 11px 18px; border-bottom: 1px solid var(--border); color: var(--text2); vertical-align: middle; }
.at tbody tr:last-child td { border-bottom: none; }
.at tbody tr:hover td { background: rgba(139,26,42,.04); }
.at-name { font-weight: 600; color: var(--text); cursor: pointer; transition: var(--trans); }
.at-name:hover { color: var(--p2); }
.at-muted { color: var(--text4); font-size: 12px; }
.at-actions { display: flex; gap: 4px; }

/* ── BADGES ──────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
}
.badge-p  { background: rgba(139,26,42,.15); color: var(--p2); }
.badge-g  { background: rgba(34,197,94,.12);  color: #4ade80; }
.badge-b  { background: rgba(59,130,246,.12);  color: #60a5fa; }
.badge-r  { background: rgba(239,68,68,.12);   color: #f87171; }
.badge-o  { background: rgba(249,115,22,.12);  color: #fb923c; }
.light .badge-g { color: #16a34a; }
.light .badge-b { color: #2563eb; }
.light .badge-r { color: #dc2626; }

/* ── LOGS FILTER ─────────────────────────────────────────── */
.logs-bar {
  display: flex; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.logs-bar select, .logs-bar input {
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 8px; padding: 7px 12px;
  color: var(--text); font-family: var(--font); font-size: 13px;
  outline: none; transition: var(--trans);
}
.logs-bar input { flex: 1; min-width: 150px; }
.logs-bar select:focus, .logs-bar input:focus { border-color: var(--p1); }

/* ── FORMS ───────────────────────────────────────────────── */
.fg { margin-bottom: 16px; }
.fg label { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px; letter-spacing: .2px; }
.fg input, .fg select, .fg textarea {
  width: 100%; background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 10px; padding: 9px 14px;
  color: var(--text); font-family: var(--font); font-size: 13px;
  outline: none; transition: var(--trans);
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: var(--p1);
  box-shadow: 0 0 0 3px rgba(139,26,42,.12);
}
.fg textarea { resize: vertical; min-height: 80px; }
.fg-row { display: flex; gap: 12px; }
.fg-row .fg { flex: 1; }

.cp-row { display: flex; align-items: center; gap: 10px; }
.cp-row input[type=color] { width: 42px; height: 38px; border-radius: 8px; border: 1px solid var(--border2); cursor: pointer; padding: 3px; background: var(--bg3); }
.cp-row code { font-family: var(--mono); font-size: 12px; color: var(--text3); }

.cover-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.cover-row input { flex: 1; min-width: 160px; }
.cover-row span { font-size: 12px; color: var(--text4); }
.cover-prev { display: none; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); max-height: 110px; }
.cover-prev img { width: 100%; height: 110px; object-fit: cover; }

/* ── MODALS ──────────────────────────────────────────────── */
.mo {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: mo-in .15s ease;
}
@keyframes mo-in { from { opacity:0; } to { opacity:1; } }
.mo-box {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-xl);
  width: 100%; max-width: 540px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 40px 120px rgba(0,0,0,.7);
  animation: box-in .2s cubic-bezier(.34,1.56,.64,1);
}
.mo-box-sm { max-width: 380px; }
.mo-box-lg { max-width: 720px; }
@keyframes box-in { from { opacity:0; transform:scale(.95) translateY(10px); } to { opacity:1; transform:none; } }
.mo-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--border);
}
.mo-head h2 { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -.3px; }
.mo-close {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); font-size: 14px; cursor: pointer;
  transition: var(--trans); background: none; border: none; font-family: var(--font);
}
.mo-close:hover { background: var(--bg3); color: var(--text); }
.mo-body { padding: 22px 24px; }
.mo-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 16px 24px; border-top: 1px solid var(--border);
}

/* ── PAGE EDITOR ─────────────────────────────────────────── */
.pe { display: flex; flex-direction: column; width: 100%; height: 100vh; background: var(--bg2); }
.pe-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  gap: 12px; flex-wrap: wrap; flex-shrink: 0;
}
.pe-title {
  flex: 1; min-width: 200px; background: none; border: none; outline: none;
  font-family: var(--font); font-size: 19px; font-weight: 800;
  color: var(--text); letter-spacing: -.4px;
}
.pe-title::placeholder { color: var(--text4); }
.pe-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pe-meta select, .pe-meta input {
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 8px; padding: 6px 10px;
  color: var(--text); font-family: var(--font); font-size: 12px; outline: none;
}
.pe-meta select:focus, .pe-meta input:focus { border-color: var(--p1); }
.pe-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
#quill-editor { flex: 1; overflow-y: auto; }

/* Quill overrides */
.ql-toolbar.ql-snow {
  border: none !important;
  border-bottom: 1px solid rgba(139,26,42,.2) !important;
  background: #1c1a2e !important;
  padding: 10px 20px;
  flex-shrink: 0;
}
.ql-toolbar.ql-snow .ql-stroke { stroke: var(--p3) !important; }
.ql-toolbar.ql-snow .ql-fill   { fill:   var(--p3) !important; }
.ql-toolbar.ql-snow .ql-picker  { color:  var(--p3) !important; }
.ql-toolbar.ql-snow .ql-picker-label { color: var(--p3) !important; }
.ql-toolbar.ql-snow .ql-picker-options {
  background: #1c1a2e !important;
  border: 1px solid rgba(139,26,42,.25) !important;
  border-radius: 8px !important;
}
.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow .ql-active .ql-stroke { stroke: #a855f7 !important; }
.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow .ql-active .ql-fill   { fill:   #a855f7 !important; }

.ql-container.ql-snow {
  border: none !important;
  font-family: var(--font) !important;
  font-size: 15px !important;
  background: #13111f;
}
.ql-editor {
  padding: 40px 64px !important;
  max-width: 840px; margin: 0 auto;
  line-height: 1.85;
  min-height: calc(100vh - 160px);
  color: #e2deff !important;
  caret-color: #a855f7;
}
.ql-editor.ql-blank::before {
  color: #4a3d6e !important;
  font-style: normal !important;
  font-size: 15px;
}
.ql-editor p   { margin-bottom: 14px; color: var(--p3); }
.ql-editor h1  { font-size: 28px; font-weight: 800; color: #f1eeff; margin: 32px 0 12px; letter-spacing: -.5px; }
.ql-editor h2  { font-size: 22px; font-weight: 800; color: #f1eeff; margin: 28px 0 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(139,26,42,.2); }
.ql-editor h3  { font-size: 17px; font-weight: 700; color: var(--p2); margin: 20px 0 8px; }
.ql-editor strong { color: #f1eeff; }
.ql-editor a   { color: #a855f7; }
.ql-editor blockquote {
  border-left: 3px solid var(--p1) !important;
  background: rgba(139,26,42,.08);
  border-radius: 0 8px 8px 0;
  padding: 12px 18px !important;
  color: var(--p2) !important;
  margin: 16px 0 !important;
}
.ql-editor pre.ql-syntax {
  background: #0f0d1a !important;
  border: 1px solid rgba(139,26,42,.2);
  border-radius: 10px !important;
  color: var(--p2) !important;
  font-family: var(--mono) !important;
  padding: 16px 20px !important;
}
.ql-editor ul li, .ql-editor ol li { color: var(--p3); }
.ql-editor ul li::marker, .ql-editor ol li::marker { color: var(--p1); }

/* ── TOAST ───────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 28px; right: 28px; z-index: 1000;
  background: var(--bg2); border: 1px solid var(--border3);
  border-radius: 12px; padding: 12px 20px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; color: var(--text);
  box-shadow: 0 16px 50px rgba(0,0,0,.5);
  animation: toast-in .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes toast-in { from { opacity:0; transform:translateY(12px) scale(.95); } to { opacity:1; transform:none; } }
.toast-ico { color: #4ade80; font-size: 16px; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .stats-row { grid-template-columns: repeat(2,1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .admin-layout { padding: 20px; }
  .ql-editor { padding: 24px !important; }
}