/* Glassmorphism • RTL • Dark Neutral (iOS-ish) + Vazirmatn */

/* ---------- Theme ---------- */
:root{
  --bg:#0B0F17;                 /* neutral dark */
  --card:rgba(255,255,255,.07); /* glass */
  --stroke:rgba(255,255,255,.12);
  --shadow: 0 16px 44px rgba(0,0,0,.55);
  --shadow2: 0 10px 22px rgba(0,0,0,.35);

  --txt:#E8ECFF;
  --muted:rgba(232,236,255,.72);

  --brand:#7C8CFF;              /* indigo */
  --brand2:#B58BFF;             /* purple */
  --pink:#FF8BC6;

  --good:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;

  --tableHead:rgba(124,140,255,.55);
  --rowAlt:rgba(255,255,255,.035);

  --focus:rgba(124,140,255,.25);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--txt);
  background:
    radial-gradient(circle at 15% 8%, rgba(124,140,255,.16), transparent 52%),
    radial-gradient(circle at 86% 10%, rgba(181,139,255,.12), transparent 52%),
    radial-gradient(circle at 70% 90%, rgba(255,139,198,.08), transparent 55%),
    linear-gradient(180deg, #0B0F17 0%, #070A10 100%);
  font-family: "Vazirmatn", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans Arabic", "Noto Sans", sans-serif;
  line-height:1.7;
}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  padding:14px 18px;
  margin:12px auto 18px auto;
  width:min(1200px, calc(100% - 24px));
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brand{display:flex; gap:12px; align-items:center}
.logo{width:42px; height:42px}
.brand__title{font-weight:900}
.brand__subtitle{font-size:.85rem; color:var(--muted)}

.topnav{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.userbox{display:flex; gap:10px; align-items:center}
.userbox__name{font-weight:800}
.userbox__role{font-size:.85rem; color:var(--muted)}

/* ---------- Layout ---------- */
.container{
  width:min(1200px, calc(100% - 24px));
  margin:0 auto 30px auto;
}

/* ---------- Cards ---------- */
.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 16px;
}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 900px){
  .grid--2{grid-template-columns: 1fr 1fr}
  .grid--3{grid-template-columns: 1fr 1fr 1fr}
}

.h1{font-size:1.15rem; font-weight:900; margin:0 0 10px 0}
.muted{color:var(--muted)}

.hr{height:1px; background: rgba(255,255,255,.10); margin: 12px 0}

/* ---------- Chips / Buttons ---------- */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  text-decoration:none;
  color: var(--txt);
  background: rgba(255,255,255,.06);
}
.chip:hover{transform: translateY(-1px); box-shadow: 0 10px 16px rgba(0,0,0,.28)}
.chip--primary{background: rgba(124,140,255,.20); border-color: rgba(124,140,255,.40)}
.chip--ghost{background: transparent}

.btn{
  cursor:pointer;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 10px 14px;
  color: var(--txt);
  font-weight:800;
}
.btn:hover{box-shadow: 0 12px 20px rgba(0,0,0,.32)}
.btn--brand{background: rgba(124,140,255,.22); border-color: rgba(124,140,255,.45)}
.btn--danger{background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.35)}

/* ---------- Forms ---------- */
.form{display:grid; gap:10px}
.row{display:grid; gap:10px}
@media (min-width: 900px){ .row--2{grid-template-columns: 1fr 1fr} .row--3{grid-template-columns:1fr 1fr 1fr} }

.field label{display:block; font-weight:900; font-size:.9rem; margin-bottom:6px}
.field input, .field select, .field textarea{
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--txt);
  outline:none;
}
.field input::placeholder, .field textarea::placeholder{color: rgba(232,236,255,.55)}
.field input:focus, .field select:focus, .field textarea:focus{
  box-shadow: 0 0 0 4px var(--focus);
  border-color: rgba(124,140,255,.50);
}
.field textarea{min-height:86px; resize:vertical}

/* Make native select readable in dark */
.field select{
  appearance:none;
}

/* ---------- Badges ---------- */
.badge{display:inline-flex; align-items:center; padding: 3px 10px; border-radius: 999px; font-size:.8rem; font-weight:900}
.badge--good{background: rgba(34,197,94,.16); color: #86efac; border:1px solid rgba(34,197,94,.30)}
.badge--warn{background: rgba(245,158,11,.18); color: #fde68a; border:1px solid rgba(245,158,11,.34)}
.badge--bad{background: rgba(239,68,68,.18); color: #fecaca; border:1px solid rgba(239,68,68,.32)}

/* ---------- Tables ---------- */
.tablewrap{overflow:auto; border-radius: 16px; border:1px solid rgba(255,255,255,.12)}
table{width:100%; border-collapse:collapse; min-width: 980px}
th{
  position:sticky; top:0;
  background: var(--tableHead);
  color:#fff;
  text-align:right;
  padding:10px 12px;
  font-size:.9rem;
}
td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  vertical-align:top;
}
tr:nth-child(even) td{ background: var(--rowAlt) }
td .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.92rem}
.actions{display:flex; gap:8px; flex-wrap:wrap}
a.link{color: #A5B4FC; text-decoration:none; font-weight:900}
a.link:hover{text-decoration:underline}

/* ---------- Login ---------- */
.center{min-height:100vh; display:grid; place-items:center; padding: 24px}
.login-card{width:min(520px, 100%)}
.kbd{font-family: ui-monospace, monospace; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:2px 8px; border-radius: 10px}

/* ---------- Footer ---------- */
.footer{
  width:min(1200px, calc(100% - 24px));
  margin: 0 auto 26px auto;
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  color: var(--muted);
  font-size:.9rem;
}

/* ---------- Alerts ---------- */
.alert{padding:12px 14px; border-radius: 16px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06)}
.alert--bad{border-color: rgba(239,68,68,.32); background: rgba(239,68,68,.12)}
.alert--good{border-color: rgba(34,197,94,.30); background: rgba(34,197,94,.12)}