/* ==========================================================
   استایل مشترک سیستم — پنل کاربری / پنل ادمین / احراز هویت / پست
   طراحی: پس‌زمینه‌ی کاغذی خنثی + لهجه‌ی نیلی تیره + لهجه‌ی طلایی
   برای برجسته‌سازی (لایک، آمار). فونت وزیرمتن برای خوانایی فارسی.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap');

:root{
  --bg:        #F5F6F8;
  --surface:   #FFFFFF;
  --ink:       #1E212B;
  --muted:     #6B7280;
  --border:    #E4E6EB;
  --accent:    #26324A;   /* نیلی تیره - رنگ اصلی */
  --accent-2:  #C9972B;   /* طلایی - لهجه‌ی گرم برای لایک/برجسته‌سازی */
  --accent-soft: #EEF1F6;
  --danger:    #B3261E;
  --danger-bg: #FDECEA;
  --success:   #1E7A46;
  --success-bg:#EAFAF1;
  --warn:      #9C6B00;
  --warn-bg:   #FFF6E0;
  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 1px 3px rgba(20,20,30,.07), 0 1px 2px rgba(20,20,30,.04);
  --gap:       16px;
  --tap:       44px; /* حداقل اندازه لمسی دکمه‌ها روی موبایل */
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; width:100%; }
body{
  font-family:'Vazirmatn', Tahoma, Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  margin:0;
  width:100%;
  max-width:100%;
  overflow-x:hidden;   /* اگر عکس یا لینک خیلی بلندی جا نشد، صفحه به‌جای بهم‌ریختن، اسکرول افقی نمی‌گیره */
  line-height:1.7;
  font-size:15px;
}
a{ color:inherit; }
h1,h2,h3{ font-weight:700; letter-spacing:-.01em; }

/* عنوان بخش‌ها با یک نوار طلایی سمت راست - امضای بصری تکرارشونده در کل سیستم */
.section-title{
  margin:0 0 16px;
  padding-right:12px;
  border-right:4px solid var(--accent-2);
  font-size:15px;
  font-weight:700;
}

/* ---------------- نوار بالا ---------------- */
.topbar{
  background:var(--accent);
  color:#fff;
  padding:14px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  position:sticky;
  top:0;
  z-index:20;
}
.topbar .brand{ font-weight:700; font-size:15px; }
.topbar a{ color:#fff; text-decoration:none; font-size:13px; }
.topbar a.view-link{ opacity:.85; margin-inline-end:14px; }
.topbar a.logout{ color:#ffb4a8; }
body.theme-admin .topbar{ background:#161B26; }

/* ---------------- چیدمان اصلی ---------------- */
.layout{
  display:flex;
  max-width:1100px;
  margin:0 auto;
  gap:var(--gap);
  padding:16px 12px 90px; /* فضای پایین برای نوار موبایل */
}
main.content{
  flex:1;
  min-width:0;
  background:var(--surface);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
}

/* ---------------- ناوبری کناری (دسکتاپ) ---------------- */
nav.side{
  display:none;
}
@media (min-width:900px){
  nav.side{
    display:block;
    background:var(--surface);
    border-radius:var(--radius);
    padding:12px;
    min-width:190px;
    flex:0 0 190px;
    height:fit-content;
    box-shadow:var(--shadow);
    position:sticky;
    top:76px;
  }
  nav.side a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:var(--radius-sm);
    color:var(--ink);
    text-decoration:none;
    font-size:13.5px;
    margin-bottom:3px;
  }
  nav.side a.active{ background:var(--accent); color:#fff; }
  body.theme-admin nav.side a.active{ background:#161B26; }
}

/* ---------------- ناوبری پایینی (موبایل) ---------------- */
nav.bottom-bar{
  position:fixed;
  bottom:0; left:0; right:0;
  background:var(--surface);
  border-top:1px solid var(--border);
  display:flex;
  padding-bottom:env(safe-area-inset-bottom);
  z-index:30;
  box-shadow:0 -2px 8px rgba(0,0,0,.05);
}
nav.bottom-bar a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:8px 4px;
  min-height:var(--tap);
  text-decoration:none;
  color:var(--muted);
  font-size:10.5px;
}
nav.bottom-bar a .ic{ font-size:18px; line-height:1; }
nav.bottom-bar a.active{ color:var(--accent); font-weight:700; }
body.theme-admin nav.bottom-bar a.active{ color:#161B26; }
@media (min-width:900px){
  nav.bottom-bar{ display:none; }
}

/* ---------------- دکمه‌ها ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--tap);
  padding:8px 18px;
  background:var(--accent);
  color:#fff !important;
  border:none;
  border-radius:var(--radius-sm);
  font-size:13.5px;
  font-family:inherit;
  text-decoration:none;
  cursor:pointer;
}
.btn.secondary{ background:#8A8F98; }
.btn.danger{ background:var(--danger); }
.btn.warn{ background:var(--warn); }
.btn.ok{ background:var(--success); }
.btn.small{ min-height:36px; padding:4px 10px; font-size:12px; }
.link-btn{
  background:none; border:none; color:var(--danger); cursor:pointer;
  font-size:13px; font-family:inherit; padding:6px; min-height:var(--tap);
}

/* ---------------- جدول‌ها (با اسکرول افقی روی موبایل) ---------------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; }
table{ width:100%; border-collapse:collapse; font-size:13px; min-width:520px; }
table th, table td{ padding:10px 8px; border-bottom:1px solid var(--border); text-align:right; white-space:nowrap; }
table td:nth-child(1), table th:nth-child(1){ white-space:normal; }

/* ---------------- پیام‌ها ---------------- */
.msg{ padding:11px 14px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:14px; }
.msg.ok{ background:var(--success-bg); color:var(--success); }
.msg.err{ background:var(--danger-bg); color:var(--danger); }

/* ---------------- کارت‌های آماری ---------------- */
.stat-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:20px; }
@media (min-width:560px){ .stat-cards{ grid-template-columns:repeat(4,1fr); } }
.stat-card{ background:var(--accent-soft); border-radius:var(--radius); padding:16px 10px; text-align:center; }
.stat-card .num{ font-size:22px; font-weight:700; color:var(--accent); }
.stat-card .lbl{ font-size:11.5px; color:var(--muted); margin-top:4px; }

/* ---------------- نشان وضعیت ---------------- */
.badge{ padding:3px 10px; border-radius:20px; font-size:11px; white-space:nowrap; }
.badge.active{ background:var(--success-bg); color:var(--success); }
.badge.suspended{ background:var(--danger-bg); color:var(--danger); }
.badge.pending{ background:var(--warn-bg); color:var(--warn); }

/* ---------------- فرم‌ها ---------------- */
label{ display:block; font-size:13px; margin:12px 0 5px; color:var(--ink); font-weight:500; }
input[type=text], input[type=email], input[type=password], textarea, select{
  width:100%;
  padding:11px 12px;
  min-height:var(--tap);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:14.5px;
  font-family:inherit;
  background:#fff;
  color:var(--ink);
}
textarea{ min-height:auto; }
input:focus, textarea:focus, select:focus{
  outline:2px solid var(--accent); outline-offset:1px;
}
.hint{ font-size:11.5px; color:var(--muted); margin-top:4px; }

/* ---------------- کارت‌های ورود/ثبت‌نام (auth) ---------------- */
body.theme-auth{ background:var(--accent); }
body.theme-auth.setup{ background:#161B26; }
.auth-wrap{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.auth-box{
  width:100%;
  max-width:400px;
  background:#fff;
  padding:28px 24px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.auth-box h1{ font-size:18px; text-align:center; margin:0 0 20px; }
.auth-box .foot{ text-align:center; margin-top:16px; font-size:13px; color:var(--muted); }
.auth-box .foot a{ color:var(--accent); font-weight:600; text-decoration:none; }
.auth-box button[type=submit]{
  width:100%; margin-top:18px; min-height:var(--tap);
  background:var(--accent); color:#fff; border:none;
  border-radius:var(--radius-sm); font-size:15px; font-family:inherit; cursor:pointer;
}

/* ---------------- صفحه‌ی تک‌پست عمومی ---------------- */
body.theme-public{ background:var(--bg); }

.public-header{
  background:var(--accent);
  color:#fff;
  width:100%;
}
.public-header .inner{
  max-width:760px;
  margin:0 auto;
  padding:16px 20px;
}
.public-header a{
  color:#fff;
  text-decoration:none;
  font-size:13.5px;
  opacity:.92;
  display:inline-block;
}
.public-header a:hover{ opacity:1; text-decoration:underline; }

.public-wrap{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:20px 16px 60px;
}

.post-box{
  width:100%;
  background:var(--surface);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
  overflow-wrap:break-word;
  word-break:break-word;
}
.post-box h1{
  font-size:22px;
  line-height:1.5;
  margin:0 0 12px;
  font-weight:800;
  color:var(--ink);
}
.post-meta{
  font-size:12.5px;
  color:var(--muted);
  margin-bottom:20px;
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
}
.post-content{
  font-size:16px;
  line-height:2;
  overflow-wrap:break-word;
  word-break:break-word;
}
.post-content img{ max-width:100%; height:auto; border-radius:10px; display:block; margin:14px 0; }
.post-content a{ color:var(--accent-2); text-decoration:underline; }
.post-content h2{ font-size:19px; margin:28px 0 12px; }
.post-content h3{ font-size:16.5px; margin:22px 0 10px; }
.post-content blockquote{
  margin:16px 0; padding:10px 16px; border-inline-start:3px solid var(--accent-2);
  background:var(--accent-soft); border-radius:0 8px 8px 0; color:var(--ink);
}
.post-content ul, .post-content ol{ padding-inline-start:22px; }
.post-content p{ margin:0 0 14px; }

.like-box{ margin-top:24px; text-align:center; }
.like-btn{
  border:2px solid var(--accent-2);
  background:#fff; color:var(--accent-2);
  min-height:var(--tap);
  padding:8px 26px; border-radius:30px;
  font-size:14px; font-family:inherit; cursor:pointer;
}
.like-btn.liked{ background:var(--accent-2); color:#fff; }

.comments-box{
  width:100%;
  background:var(--surface);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  overflow-wrap:break-word;
}
.comments-box h3{ font-size:14.5px; margin-top:0; margin-bottom:16px; }
.comment-item{ border-bottom:1px solid var(--border); padding:14px 0; }
.comment-item:last-of-type{ border-bottom:none; }
.comment-item .cname{ font-size:13px; font-weight:700; }
.comment-item .ctext{ font-size:13.5px; color:#444; margin-top:5px; line-height:1.9; }
.comment-item .cdate{ font-size:11px; color:#aaa; margin-top:4px; }
.honeypot{ position:absolute; left:-9999px; }

@media (max-width:480px){
  .public-header .inner{ padding:14px 16px; }
  .public-wrap{ padding:16px 12px 50px; }
  .post-box{ padding:18px; }
  .post-box h1{ font-size:19px; }
  .comments-box{ padding:16px; }
}