/* =========================================================
   BASE
========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  --font-de: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-prs: "Vazirmatn", Tahoma, Arial, sans-serif;

  --text: #111827;
  --muted: #6b7280;
  --line: rgba(0,0,0,.10);

  --bg: #ffffff;
  --card: #ffffff;

  --radius: 16px;
  --shadow: 0 10px 26px rgba(0,0,0,.08);

  --brand-black: #111111;
  --brand-red: #c1121f;
  --brand-green: #1f7a1f;
  --brand-gold: #d4a017;

  --ui-radius-sm: 11px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 14px;
  --ui-radius-pill: 999px;

  --ui-shadow-soft: 0 8px 18px rgba(0,0,0,.05);
  --ui-shadow-soft-hover: 0 12px 24px rgba(0,0,0,.08);

  --ui-shadow-dark: 0 10px 22px rgba(0,0,0,.24);
  --ui-shadow-dark-hover: 0 14px 28px rgba(0,0,0,.30);

  --ui-focus-ring: 0 0 0 3px rgba(17,24,39,.10);
  --ui-focus-ring-dark: 0 0 0 3px rgba(255,255,255,.12);

  --ui-transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    opacity .16s ease;
}

/* ---------- Dark mode ---------- */
body.dark{
  --text: #e5e7eb;
  --muted: #9ca3af;
  --line: rgba(255,255,255,.12);

  --bg: #0b1220;
  --card: #0f172a;

  --shadow: 0 18px 40px rgba(0,0,0,.45);
}

/* ---------- Base ---------- */
html,
body{
  height:100%;
}

body{
  font-family:var(--font-de);
  color:var(--text);
  font-size:16px;
  line-height:1.75;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:linear-gradient(180deg, rgba(0,0,0,.015), transparent 220px), var(--bg);
}

body.dark{
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 220px), var(--bg);
}

html[dir="rtl"] body{
  font-family:var(--font-prs);
  line-height:1.95;
}

a{
  color:inherit;
}

a:hover{
  opacity:.92;
}

/* ---------- Bootstrap dark fixes ---------- */
body.dark .bg-white{
  background:var(--bg) !important;
}

body.dark .bg-light{
  background:rgba(255,255,255,.06) !important;
}

body.dark .text-muted{
  color:var(--muted) !important;
}

body.dark .border-top,
body.dark .border-bottom{
  border-color:var(--line) !important;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5,h6{
  letter-spacing:-0.01em;
  line-height:1.2;
  color:var(--text);
}

h1{ font-size:clamp(1.55rem, 2.2vw, 2.05rem); font-weight:850; }
h2{ font-size:clamp(1.25rem, 1.8vw, 1.6rem); font-weight:820; }
h3{ font-size:1.25rem; font-weight:780; }
h4{ font-size:1.1rem; font-weight:720; }
h5{ font-size:1rem; font-weight:700; }
h6{ font-size:.95rem; font-weight:650; }

html[dir="rtl"] h1,
html[dir="rtl"] h2{
  letter-spacing:0;
}

/* ---------- Cards / no borders ---------- */
.card,
.sidebar-sticky .card,
.news-card,
.admin-toolbar.card,
.admin-section.card,
.table-wrap{
  border:none !important;
}

.card{
  border-radius:var(--radius);
  background:var(--card);
}

.card.shadow-sm{
  box-shadow:none !important;
}

/* ---------- Buttons ---------- */
.btn i{
  width:1.1em;
  text-align:center;
}

/* ---------- Common light badges ---------- */
.badge.bg-light.text-dark.border{
  border-radius:999px;
  padding:.35rem .55rem;
  border-color:rgba(0,0,0,.08) !important;
  background:rgba(255,255,255,.75) !important;
}

body.dark .badge.bg-light{
  background:rgba(255,255,255,.08) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}

body.dark .badge.bg-light.text-dark.border{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.12) !important;
}

/* ---------- Pagination ---------- */
.pagination{
  gap:.35rem;
}

.pagination .page-link{
  border-radius:999px;
  padding:.45rem .85rem;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
}

.pagination .page-item.active .page-link{
  font-weight:700;
}

.pagination .page-item.disabled .page-link{
  opacity:.6;
}

/* ---------- Offcanvas ---------- */
.offcanvas-backdrop.show{
  opacity:.55;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.offcanvas.modern-menu{
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
  transition:transform .38s cubic-bezier(.2,.8,.2,1), visibility .38s;
}

body.dark .offcanvas.modern-menu{
  background:rgba(18,18,18,.70);
  box-shadow:var(--shadow);
}

@media (min-width:992px){
  .offcanvas.modern-menu{
    width:420px;
  }
}

.offcanvas.modern-menu .offcanvas-title{
  font-weight:850;
}

.menu-section-title{
  font-weight:850;
  font-size:.85rem;
  opacity:.7;
  margin:14px 0 8px;
  text-transform:uppercase;
  letter-spacing:.6px;
}

.menu-search .form-control,
.menu-search .btn{
  border-radius:14px;
  padding:10px 12px;
}

.menu-item-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.45);
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  color:inherit;
}

.menu-item-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.75);
  border-color:rgba(0,0,0,.14);
}

body.dark .menu-item-btn{
  background:rgba(255,255,255,.06);
}

body.dark .menu-item-btn:hover{
  background:rgba(255,255,255,.10);
}

.menu-cats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.menu-cat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
  text-decoration:none;
  color:inherit;
  transition:background .15s ease, transform .15s ease, border-color .15s ease;
  font-size:.92rem;
}

.menu-cat:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.85);
}

.menu-cat.active{
  background:rgba(13,110,253,.12);
  border-color:rgba(13,110,253,.30);
  color:#0d6efd;
}

body.dark .menu-cat{
  background:rgba(255,255,255,.06);
}

body.dark .menu-cat:hover{
  background:rgba(255,255,255,.10);
}

/* ---------- Custom file upload ---------- */
.custom-file-upload{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
}

.custom-file-upload .file-name{
  font-size:.95rem;
}