/* =========================================================
   Pasteit UI – Modern Minimal (Light default + Dark switch)
   Option A accent: --primary / --primary-2
   ========================================================= */

:root{
  --radius: 16px;
  --shadow: 0 18px 45px rgba(0,0,0,.08);
  --shadow-sm: 0 8px 24px rgba(0,0,0,.08);
  --border: rgba(17, 24, 39, .10);

  --primary: #6D5DFC;          /* Theme A main */
  --primary-2: #8B7BFF;        /* Theme A gradient */
  --success: #16a34a;
  --danger: #ef4444;
  --warn: #f59e0b;

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: Vazirmatn, IRANSans, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Light theme */
  --bg: #f7f7fb;
  --bg2: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --card: rgba(255,255,255,.86);
  --card-solid: #ffffff;
  --input: #ffffff;
  --input-border: rgba(17,24,39,.14);

  --ring: rgba(109,93,252,.25);
  --chip: rgba(109,93,252,.10);

  /* Theme A reinforcement (no duplicates) */
  --A-glow: rgba(109,93,252,.28);
  --A-bg-soft: rgba(109,93,252,.12);
}

/* Dark theme override (via data-theme="dark") */
html[data-theme="dark"]{
  --bg: #0b1020;
  --bg2: #0f1630;
  --text: #e8eaf6;
  --muted: #9aa3c7;
  --card: rgba(255,255,255,.04);
  --card-solid: #101833;
  --border: rgba(255,255,255,.10);
  --input: #0c1228;
  --input-border: rgba(255,255,255,.12);
  --shadow: 0 22px 55px rgba(0,0,0,.35);
  --shadow-sm: 0 10px 30px rgba(0,0,0,.25);
  --chip: rgba(139,123,255,.12);
}

/* Reset */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  direction: rtl;
  font-family: var(--sans);
  background:
    radial-gradient(900px 420px at 20% -10%, rgba(109,93,252,.20), transparent 60%),
    radial-gradient(700px 380px at 95% 10%, rgba(139,123,255,.18), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
  line-height: 1.8;
}

/* Container */
.container{
  max-width: 1040px;
  margin: 0 auto;
  padding: 22px 16px 60px;
}

/* Typography */
.h1{ font-size: 1.55rem; font-weight: 900; letter-spacing: -.2px; }
.h2{ font-size: .98rem; color: var(--muted); margin-top: 6px; }
.small{ font-size: .88rem; color: var(--muted); }
.mono{ font-family: var(--mono); direction:ltr; }

/* Layout helpers */
.grid{ display:grid; gap:16px; }
@media (min-width: 980px){
  .grid-2{ grid-template-columns: 1.2fr .8fr; }
  .grid-3{ grid-template-columns: repeat(3, 1fr); }
}
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.stack{ display:flex; flex-direction:column; gap:10px; }
.spacer{ height: 10px; }

/* Navbar */
.navbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.65);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
html[data-theme="dark"] .navbar{
  background: rgba(10, 14, 30, .55);
}
.navbar-inner{
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight: 950;
  text-decoration:none;
  color: var(--text);
}
.brand-badge{
  width: 34px; height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 10px 30px var(--A-glow);
}
.nav-links{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Cards */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;

  /* Fix: put transition on base */
  transition: box-shadow .2s ease, transform .2s ease;
}
.card.tight{ padding: 14px; }
.card-title{ font-weight: 900; font-size: 1.05rem; }
.card-desc{ color: var(--muted); font-size: .92rem; margin-top: 6px; }

/* Fix: hover effect only, no transition here */
.card:hover{
  box-shadow: 0 20px 50px var(--A-glow);
  transform: translateY(-1px);
}

/* Hero */
.hero{
  padding: 22px;
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(600px 260px at 20% 0%, var(--A-bg-soft), transparent 60%),
    linear-gradient(135deg, rgba(109,93,252,.18), rgba(139,123,255,.10));
  border: 1px solid rgba(109,93,252,.35);
  box-shadow: var(--shadow);
}
.hero .h1{ font-size: 1.75rem; }
.hero .chips{ margin-top: 12px; display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  background: var(--A-bg-soft);
  border: 1px solid rgba(109,93,252,.35);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .86rem;
}

/* Forms */
label{ display:block; font-size:.88rem; color: var(--muted); margin-bottom: 6px; }
input,textarea,select{
  width:100%;
  background: var(--input);
  border: 1px solid var(--input-border);
  border-radius: 14px;
  padding: 12px 13px;
  color: var(--text);
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .06s ease;
}
textarea{ min-height: 170px; resize: vertical; }
input:focus,textarea:focus,select:focus{
  border-color: rgba(109,93,252,.55);
  box-shadow: 0 0 0 4px var(--A-glow);
}
input:active,textarea:active{ transform: translateY(1px); }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.65);
  color: var(--text);
  text-decoration:none;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
  user-select:none;
}
html[data-theme="dark"] .btn{ background: rgba(255,255,255,.04); }
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active{ transform: translateY(1px); box-shadow:none; }

.btn-primary{
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: 0 10px 26px var(--A-glow);
}
.btn-primary:hover{
  box-shadow: 0 14px 34px var(--A-glow);
}

.btn-ghost{ background: transparent; }

.btn-warn{
  background: rgba(245,158,11,.14);
  border: 1px solid rgba(245,158,11,.30);
  color: #9a5b00;
}
html[data-theme="dark"] .btn-warn{ color: #ffd48a; }

.btn-danger{
  background: rgba(239,68,68,.14);
  border: 1px solid rgba(239,68,68,.30);
  color: #a51414;
}
html[data-theme="dark"] .btn-danger{ color: #ffb0b0; }

.btn-success{
  background: rgba(22,163,74,.14);
  border: 1px solid rgba(22,163,74,.30);
  color: #0b5f2a;
}
html[data-theme="dark"] .btn-success{ color: #b9f6d0; }

.btn-icon{
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 14px;
}

/* Alerts */
.alert{ padding: 12px 14px; border-radius: 14px; margin-bottom: 12px; border: 1px solid var(--border); }
.alert-danger{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.25); }
.alert-warn{ background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.22); }
.alert-success{ background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.22); }

/* Paste box */
.paste-box{
  background: var(--input);
  border: 1px solid var(--input-border);
  border-radius: 16px;
  padding: 14px;
  overflow:auto;
}
.paste-box pre{
  margin:0;
  font-family: var(--mono);
  font-size: .95rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Badges */
.badge{
  display:inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.03);
  color: var(--muted);
}
html[data-theme="dark"] .badge{ background: rgba(255,255,255,.04); }
.badge-warn{ border-color: rgba(245,158,11,.30); background: rgba(245,158,11,.12); }
.badge-danger{ border-color: rgba(239,68,68,.30); background: rgba(239,68,68,.12); }

/* Home marketing blocks */
.feature{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.feature h3{ font-size: 1.02rem; font-weight: 900; margin-bottom: 6px; }
.feature p{ color: var(--muted); font-size: .92rem; margin-bottom: 12px; }

/* Single source of truth for icon box */
.icon{
  width: 42px; height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(109,93,252,.35), rgba(139,123,255,.18));
  border: 1px solid rgba(109,93,252,.30);
  display:flex; align-items:center; justify-content:center;
}
.svg-ic{
  width: 20px;
  height: 20px;
  display: inline-block;
  color: var(--text);
  opacity: .92;
}

/* ================= Footer ================= */

.site-footer{
  margin-top: 60px;
  padding: 28px 16px 36px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.03));
}
html[data-theme="dark"] .site-footer{
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.25));
}

.footer-inner{
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}
@media (min-width: 900px){
  .footer-inner{
    grid-template-columns: 1.4fr 1fr 1fr;
    align-items: start;
  }
}

.footer-brand{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-brand .name{
  font-weight: 900;
  font-size: 1.05rem;
}
.footer-brand .desc{
  font-size: .9rem;
  color: var(--muted);
  max-width: 380px;
}

.footer-links{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links h4{
  font-size: .9rem;
  font-weight: 800;
}
.footer-links a{
  font-size: .88rem;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s ease;
}
.footer-links a:hover{ color: var(--text); }

.footer-bottom{
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--muted);
}
.footer-inline-links{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-inline-links a{
  color: var(--muted);
  text-decoration: none;
}
.footer-inline-links a:hover{ color: var(--text); }

/* ================= Admin Tables ================= */

.table-wrap{
  width: 100%;
  overflow: auto;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px; /* keeps columns readable; wrapper makes it scroll on mobile */
}

.table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: right;
  padding: 12px 12px;
  font-size: .88rem;
  color: var(--muted);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

html[data-theme="dark"] .table thead th{
  background: rgba(16, 24, 51, .75);
}

.table tbody td{
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}

.table tbody tr:nth-child(odd){
  background: rgba(0,0,0,.02);
}

html[data-theme="dark"] .table tbody tr:nth-child(odd){
  background: rgba(255,255,255,.03);
}

.table tbody tr:hover{
  background: rgba(109,93,252,.06);
}

html[data-theme="dark"] .table tbody tr:hover{
  background: rgba(109,93,252,.12);
}

.table .mono{
  font-family: var(--mono);
  direction: ltr;
}

/* Align actions nicely */
.table .actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

/* Smaller buttons in tables */
.table .btn{
  padding: 8px 10px;
  border-radius: 12px;
}

/* Nice scrollbar (optional, webkit) */
.table-wrap::-webkit-scrollbar{ height: 10px; }
.table-wrap::-webkit-scrollbar-track{ background: transparent; }
.table-wrap::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.12);
  border-radius: 999px;
}
html[data-theme="dark"] .table-wrap::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
}


/* Copy buttons spacing (if used) */
.paste-actions{ justify-content:flex-start; gap:8px; }
@media (max-width: 640px){
  .paste-actions{ width:100%; }
}