@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');
:root {
  --bg: #0b1220;
  --panel: #0f172a;
  --muted: #94a3b8;
  --text: #e2e8f0;
  --brand: #22c55e;
  --brand-2: #0ea5e9;
  --danger: #ef4444;
  --border: #1f2937;
  --card: #0b1220;
}
:root.theme-light {
  --bg: #f7fafc;
  --panel: #ffffff;
  --muted: #475569;
  --text: #0f172a;
  --brand: #22c55e;
  --brand-2: #0284c7;
  --danger: #b91c1c;
  --border: #e5e7eb;
  --card: #ffffff;
}
* { box-sizing: border-box; }
html { font-size: 18px; }
body { font-family: 'Cairo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; background: var(--bg); color: var(--text); direction: rtl; }

/* Shell */
.app { max-width: 1120px; margin: 18px auto; padding: 0 12px; }
.header {
  display:flex; align-items:center; gap:14px; padding:14px;
  background: linear-gradient(180deg, var(--panel), color-mix(in oklab, var(--panel), black 6%));
  border:1px solid var(--border); border-radius:16px;
  position: sticky; top: 10px; z-index: 5;
}
.logo { width:66px; height:66px; border-radius:14px; background:color-mix(in oklab, var(--brand-2), transparent 85%); display:grid; place-items:center; border:1px solid color-mix(in oklab, var(--brand-2), transparent 70%); }
.logo img { width:52px; height:auto; }
.ttl { display:flex; flex-direction:column; gap:2px; }
.ttl .title { font-weight:800; font-size:1.25rem; letter-spacing:.2px; }
.ttl .subtitle { color: var(--muted); font-weight:600; }

.theme-toggle { margin-inline-start:auto; }
.theme-toggle .btn { padding:10px 12px; }

main.panel {
  margin-top:14px; background: var(--panel);
  border:1px solid var(--border); border-radius:16px; padding:16px;
}

/* Top navigation */
.topnav { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin: 6px 0 12px; }
.topnav .hello { color: var(--muted); font-weight:600; margin-inline-end: 6px; }

/* Controls */
label { display:block; margin:12px 0 6px; font-weight:800; color: color-mix(in oklab, var(--brand-2), white 15%); }
input[type=text], input[type=tel], input[type=password], select, textarea {
  width:100%; padding:12px 14px; border-radius:12px;
  background:var(--card); border:1px solid var(--border); color: var(--text);
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand-2); box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand-2), transparent 80%); }

.checkbox-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:10px; padding:8px 0; }
.checkbox-item { background:var(--card); border:1px dashed var(--border); border-radius:12px; padding:10px 12px; color:inherit; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; cursor:pointer; user-select:none;
  border:1px solid #164e63; background:linear-gradient(180deg,var(--brand),color-mix(in oklab, var(--brand), black 10%)); color:white; font-weight:800;
  box-shadow: 0 4px 16px color-mix(in oklab, var(--brand), transparent 65%);
  transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.02); box-shadow: 0 8px 18px color-mix(in oklab, var(--brand), transparent 55%); }
.btn.primary { background:linear-gradient(180deg,var(--brand-2),color-mix(in oklab, var(--brand-2), black 10%)); border-color:color-mix(in oklab, var(--brand-2), black 15%); }
.btn.secondary { background: var(--card); border-color:var(--border); color:color-mix(in oklab, var(--brand-2), white 35%); }
.btn.danger { background:linear-gradient(180deg,var(--danger),color-mix(in oklab, var(--danger), black 10%)); border-color:color-mix(in oklab, var(--danger), black 15%); }

/* Messages */
.msg { padding:12px 14px; border-radius:12px; margin:10px 0; font-weight:800; }
.msg.ok { background:color-mix(in oklab, var(--brand), transparent 85%); border:1px solid color-mix(in oklab, var(--brand), transparent 60%); color:color-mix(in oklab, var(--brand), black 20%); }
.msg.err { background:color-mix(in oklab, var(--danger), transparent 85%); border:1px solid color-mix(in oklab, var(--danger), transparent 50%); color:color-mix(in oklab, var(--danger), black 10%); }

/* Table */
.table-wrapper { width:100%; overflow-x:auto; border:1px solid var(--border); border-radius:12px; background:var(--card); }
.table { width:100%; border-collapse: collapse; font-size: .95rem; }
.table thead th {
  position: sticky; top:0; background:var(--panel); color:#cbd5e1; border-bottom:1px solid var(--border); padding:12px; text-align:right;
}
.table td { border-bottom:1px dashed var(--border); padding:12px; color:inherit; vertical-align:top; word-break: break-word; }
.table tr:nth-child(even) td { background: color-mix(in oklab, var(--panel), white 2%); }

/* Cards */
.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px; margin-top:12px; }
.card {
  background: radial-gradient(120% 120% at 10% 10%, color-mix(in oklab, var(--panel), white 4%) 0%, var(--card) 60%);
  border:1px solid var(--border); border-radius:16px; padding:14px 16px;
  box-shadow: 0 10px 30px color-mix(in oklab, black, transparent 65%);
  transition: transform .08s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 18px 38px color-mix(in oklab, black, transparent 55%); }
.card .head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.avatar { width:40px; height:40px; border-radius:10px; background:color-mix(in oklab, var(--brand), transparent 85%); display:grid; place-items:center; color:color-mix(in oklab, var(--brand), black 10%); font-weight:800; border:1px solid color-mix(in oklab, var(--brand), transparent 60%); }
.card-row { display:flex; gap:8px; margin:6px 0; }
.card-row .label { min-width:120px; font-weight:800; color:color-mix(in oklab, var(--brand-2), white 30%); }
.card-row .value { flex:1; overflow-wrap:anywhere; }
.badge-list { display:flex; flex-wrap:wrap; gap:6px; }
.badge { display:inline-block; padding:4px 8px; border-radius:9999px; background:var(--panel); border:1px solid var(--border); font-size:.85rem; }
.card .actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }

/* Pagination */
.pagination { display:flex; gap:8px; align-items:center; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.page-btn { padding:8px 12px; border-radius:10px; background:var(--card); border:1px solid var(--border); cursor:pointer; }
.page-btn.active { background:color-mix(in oklab, var(--brand-2), transparent 85%); border-color:color-mix(in oklab, var(--brand-2), transparent 50%); }

/* Utility */
.hidden { display:none !important; }
.divider { height:1px; background:var(--border); margin:10px 0; }

/* Footer */
.footer { text-align:center; color:var(--muted); font-size:.95rem; padding:14px; }
.footer strong { color:inherit; }

/* Mobile */
@media (max-width: 768px) {
  html { font-size: 17px; }
  .checkbox-grid { grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); }
  .card-row .label { min-width:100px; }
}