/* assets/style.css */
:root{
  --bg:#0b1220;
  --card:#101a2e;
  --muted:#93a4c7;
  --text:#e9eefc;
  --border: rgba(255,255,255,.08);
  --accent:#4da3ff;
  --danger:#ff5c7a;
  --ok:#2dd4bf;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(1200px 800px at 20% 0%, #182a4f 0%, var(--bg) 45%, #070b14 100%);
  color:var(--text);
  font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
  direction: rtl;
}
input,
textarea,
select,
button,
.btn {
  font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
}


a{ color: var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 16px;
}

.topbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  border: 1px solid var(--border);
  background: rgba(16,26,46,.7);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 12px 0 16px;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.brand b{ font-size: 16px; }
.brand span{ color: var(--muted); font-size: 12px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  font-size: 14px;
  white-space: nowrap;
}
.btn:hover{ background: rgba(255,255,255,.10); }
.btn.primary{
  background: linear-gradient(135deg, rgba(77,163,255,.35), rgba(77,163,255,.15));
  border-color: rgba(77,163,255,.35);
}
.btn.danger{
  background: rgba(255,92,122,.15);
  border-color: rgba(255,92,122,.35);
  color: #ffd2da;
}
.btn.ok{
  background: rgba(45,212,191,.12);
  border-color: rgba(45,212,191,.30);
  color:#d9fffb;
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px){
  .grid{ grid-template-columns: 1fr; }
  .topbar{ flex-direction:column; align-items:stretch; }
}

.card{
  border: 1px solid var(--border);
  background: rgba(16,26,46,.68);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 14px;
}

.h1{ font-size: 18px; margin: 0 0 10px; }
.muted{ color: var(--muted); font-size: 13px; }
.hr{ height:1px; background: var(--border); margin: 12px 0; }

.input, textarea{
  width:100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.25);
  color: var(--text);
  outline:none;
  font-size: 14px;
}
textarea{ min-height: 120px; resize: vertical; }

.row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}
.row > *{ flex: 0 0 auto; }

.note{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 13px;
}

.alert{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,92,122,.35);
  background: rgba(255,92,122,.12);
  color: #ffd2da;
  font-size: 13px;
}
.success{
  border-color: rgba(45,212,191,.35);
  background: rgba(45,212,191,.10);
  color:#d9fffb;
}

/* ✅ جدول */
.table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
}
.table th, .table td{
  padding: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: top;
}
.table th{
  color: var(--muted);
  font-weight: 600;
  background: rgba(255,255,255,.03);
  white-space: nowrap;
}
.table tr:hover td{ background: rgba(255,255,255,.03); }

.badge{
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.badge.open{ color:#d9fffb; border-color: rgba(45,212,191,.35); background: rgba(45,212,191,.10); }
.badge.closed{ color:#ffd2da; border-color: rgba(255,92,122,.35); background: rgba(255,92,122,.10); }

/* ✅ ریسپانسیو واقعی جدول در موبایل (بدون دوباره‌کاری HTML)
   هر ردیف تبدیل به کارت می‌شود و هر ستون به صورت label/value نمایش داده می‌شود */
@media (max-width: 720px){
  .table thead{ display:none; }

  .table,
  .table tbody,
  .table tr,
  .table td{
    display:block;
    width:100%;
  }

  .table{
    border: none;
    background: transparent;
  }

  .table tr{
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(0,0,0,.18);
    margin-bottom: 10px;
    overflow: hidden;
  }

  .table td{
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 10px 12px;
    display:flex;
    gap:10px;
    justify-content: space-between;
    align-items: center;
  }

  .table td:last-child{
    border-bottom: none;
  }

  .table td::before{
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    flex: 0 0 auto;
    max-width: 45%;
    white-space: nowrap;
  }

  /* متن‌های بلند (مثل عنوان) */
  .table td .cell{
    flex: 1 1 auto;
    text-align: left;
    direction: ltr;
    unicode-bidi: plaintext;
    overflow-wrap: anywhere;
  }

  /* دکمه مشاهده روی موبایل */
  .table td .btn{
    width: 100%;
  }
}

/* پیام‌ها */
.msg{
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: rgba(0,0,0,.18);
  margin-bottom: 10px;
}
.msg .meta{
  display:flex;
  justify-content: space-between;
  gap:10px;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}
.attach{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}
.attach a{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  font-size: 13px;
}