/* يوم المبرمج العراقي 2026 — نظام تصميم مشترك: رسمي، VIP، عصري، بسيط، RTL، Mobile First */
:root{
  --navy:#0B2A43;
  --navy-2:#123A5C;
  --gold:#C9A227;
  --gold-soft:#F7EFD6;
  --paper:#F4F5F7;
  --card:#FFFFFF;
  --ink:#16232E;
  --muted:#64748B;
  --line:#E3E6EA;
  --pass:#1B7A4A;
  --pass-soft:#E5F3EC;
  --fail:#B3261E;
  --fail-soft:#FBEAE9;
  --warn:#9A6B00;
  --warn-soft:#FBF1D9;
  --radius:14px;
  --radius-sm:9px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  font-family:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.7;
  font-variant-numeric:tabular-nums;
  min-height:100vh;
}

.num{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

a{color:inherit}

header.site{
  background:var(--navy);
  color:#fff;
  padding:28px 18px 24px;
  text-align:center;
}
header.site .logo{
  width:84px;height:84px;
  display:block;margin:0 auto 14px;
  border-radius:50%;
  border:2px solid var(--gold);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  background:#fff;
}
header.site .eyebrow{
  font-size:.82rem;
  letter-spacing:.5px;
  color:var(--gold);
  font-weight:700;
  margin-bottom:6px;
}
header.site h1{
  font-size:1.5rem;
  font-weight:800;
  line-height:1.5;
}
header.site .rule{
  display:flex;gap:4px;justify-content:center;width:64px;margin:12px auto 10px;
}
header.site .rule span{height:4px;border-radius:3px;flex:1;background:var(--gold)}
header.site p{font-size:.92rem;color:#C9D4DE;margin-top:2px}

main{max-width:520px;margin:0 auto;padding:20px 16px 40px}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:16px;
}

.card h2{
  font-size:1.05rem;
  font-weight:800;
  margin-bottom:14px;
  color:var(--navy);
}

.notice{
  background:var(--warn-soft);
  border:1px solid #EBD8A0;
  border-radius:var(--radius-sm);
  padding:14px 16px;
  font-size:.92rem;
  color:var(--warn);
  margin-bottom:16px;
}
.notice b{display:block;margin-bottom:4px;color:#7A5400}
.notice.notice-restrict{background:var(--fail-soft);border-color:#E7B9B5;color:var(--fail)}
.notice.notice-restrict b{color:#7A241B}

label{
  font-size:.9rem;
  font-weight:700;
  display:block;
  margin-bottom:6px;
  color:var(--ink);
}
label .opt{font-weight:500;color:var(--muted);font-size:.82rem}

input[type=text],
input[type=password],
input[type=tel],
input[type=email],
select,
textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:1rem;
  background:#fff;
  color:var(--ink);
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--navy-2);
  outline-offset:1px;
}

.field{margin-bottom:14px;position:relative}

.checkbox-field{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px}
.checkbox-label{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;font-weight:600;color:var(--ink);cursor:pointer;margin:0}
.checkbox-label input[type=checkbox]{width:19px;height:19px;flex-shrink:0;accent-color:var(--navy);cursor:pointer;margin-top:1px}

.btn{
  font-family:inherit;
  font-size:1rem;
  font-weight:700;
  border:none;
  border-radius:var(--radius-sm);
  padding:12px 18px;
  cursor:pointer;
  transition:transform .12s ease, background .15s ease;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--navy);color:#fff;width:100%}
.btn-primary:hover{background:var(--navy-2)}
.btn-primary:disabled{background:#9AA7B2;cursor:not-allowed}
.btn-gold{background:var(--gold);color:var(--navy);width:100%}
.btn-outline{background:#fff;color:var(--navy);border:1.5px solid var(--navy);width:100%}
.btn-outline:hover{background:#EEF3F7}
.btn-danger-outline{background:#fff;color:var(--fail);border:1.5px solid var(--fail)}
.btn-sm{padding:7px 12px;font-size:.85rem;width:auto}

.stack{display:flex;flex-direction:column;gap:10px}
.row-2{display:flex;gap:10px}
.row-2 > *{flex:1}

/* Autocomplete */
.suggestions{
  position:absolute;
  top:calc(100% + 4px);
  right:0;left:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:0 8px 24px rgba(11,42,67,.12);
  max-height:260px;
  overflow-y:auto;
  z-index:20;
}
.suggestions .item{
  padding:10px 14px;
  cursor:pointer;
  border-bottom:1px solid var(--line);
  font-size:.95rem;
}
.suggestions .item:last-child{border-bottom:none}
.suggestions .item:hover,.suggestions .item.active{background:var(--gold-soft)}
.suggestions .item .pos{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
.suggestions .empty{padding:12px 14px;color:var(--muted);font-size:.88rem}

/* Selected entrant chip */
.entrant-chip{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--gold-soft);
  border:1px solid #EAD98F;
  border-radius:var(--radius-sm);
  padding:12px 14px;
}
.entrant-chip .who .name{font-weight:800;color:var(--navy)}
.entrant-chip .who .pos{font-size:.85rem;color:var(--muted)}
.entrant-chip button{background:none;border:none;color:var(--navy-2);font-weight:700;font-size:.85rem;cursor:pointer;text-decoration:underline}

/* Status badges */
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:700}
.badge.invited{background:#EEF1F4;color:var(--muted)}
.badge.confirmed{background:var(--warn-soft);color:var(--warn)}
.badge.attended{background:var(--pass-soft);color:var(--pass)}
.badge.absent{background:var(--fail-soft);color:var(--fail)}

/* Result box (verify page) */
.result-box{display:none;text-align:center;padding:22px 16px}
.result-box.show{display:block}
.result-box .icon{font-size:2.4rem;display:block;margin-bottom:8px}
.result-box.v-pass{background:var(--pass-soft);border-radius:var(--radius)}
.result-box.v-pass .icon{color:var(--pass)}
.result-box.v-fail{background:var(--fail-soft);border-radius:var(--radius)}
.result-box.v-fail .icon{color:var(--fail)}
.result-box .name{font-size:1.15rem;font-weight:800;color:var(--navy);margin-bottom:6px}
.result-box .title{font-weight:700}
.result-box .details{margin-top:10px;font-size:.9rem;color:var(--muted)}
.result-box .details div{margin-bottom:2px}

/* Success screen */
.success-box{text-align:center;padding:10px 4px 4px}
.success-box .check{font-size:2.6rem;color:var(--pass);margin-bottom:6px}
.success-box .code{
  font-weight:800;font-size:1.1rem;color:var(--navy);
  background:var(--gold-soft);display:inline-block;padding:6px 14px;border-radius:999px;margin:8px 0 14px;
}
.qr-wrap{margin:14px auto;width:230px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px;background:#fff}
.qr-wrap img{width:100%;height:auto;display:block;border-radius:6px}

/* Custom listbox (replaces native <select> so open menus never break the theme) */
.listbox{position:relative;display:inline-block}
.listbox-btn{
  font-family:inherit;font-size:.85rem;font-weight:600;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:7px 30px 7px 10px;cursor:pointer;text-align:right;min-width:100px;
  position:relative;
}
.listbox-btn::after{
  content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-left:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:translateY(-65%) rotate(-45deg);
}
.listbox-btn:hover{border-color:var(--navy-2)}
.listbox-menu{
  position:absolute;top:calc(100% + 4px);right:0;min-width:100%;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 24px rgba(11,42,67,.16);z-index:30;overflow:hidden;
}
.listbox-option{padding:8px 12px;font-size:.85rem;white-space:nowrap;cursor:pointer;color:var(--ink)}
.listbox-option:hover{background:var(--gold-soft)}
.listbox-option.selected{font-weight:800;color:var(--navy)}

/* Summary cards (index.html, mobile-friendly alternative to a wide table) */
.vip-summary-card{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 14px;
}
.vip-summary-name{font-weight:800;color:var(--navy)}
.vip-summary-meta{font-size:.85rem;color:var(--muted);margin:2px 0 4px}
.vip-summary-priority{display:flex;align-items:center;gap:8px;margin-top:8px}
.vip-summary-priority label{margin:0;white-space:nowrap;font-size:.85rem}
.vip-summary-priority .listbox{flex:1}
.vip-summary-priority .listbox-btn{width:100%}

/* Table (admin) */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm)}
table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:640px}
th,td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:#F0F2F5;color:var(--navy);font-weight:800;position:sticky;top:0}
tr:last-child td{border-bottom:none}

.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
@media(min-width:480px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;text-align:center}
.stat-tile .n{font-size:1.5rem;font-weight:800;color:var(--navy)}
.stat-tile .l{font-size:.78rem;color:var(--muted);margin-top:2px}

.muted{color:var(--muted);font-size:.88rem}
.center{text-align:center}
.hidden{display:none !important}

.modal-backdrop{
  position:fixed;inset:0;background:rgba(11,42,67,.45);
  display:flex;align-items:flex-end;justify-content:center;z-index:50;
}
@media(min-width:600px){.modal-backdrop{align-items:center}}
.modal{
  background:#fff;border-radius:16px 16px 0 0;padding:20px;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;
}
@media(min-width:600px){.modal{border-radius:16px}}
.modal h3{color:var(--navy);margin-bottom:12px;font-size:1.05rem}

footer.site{text-align:center;padding:20px 16px 32px;color:var(--muted);font-size:.8rem}

@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
  .btn:active{transform:none}
}