/* ── Reception Layout ─────────────────────────────────────────────────── */
.header {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          var(--s-4) var(--s-6);
  background:       var(--c-primary-dark);
  color:            #fff;
  position:         sticky;
  top:              0;
  z-index:          100;
  min-height:       64px;
}
.header-brand {
  font-size: var(--text-xl);
  font-weight: 800;
  flex: 1;
}
.header-meta { display: flex; align-items: center; gap: var(--s-3); }

.station-label {
  font-size:   var(--text-sm);
  background:  rgba(255,255,255,0.15);
  padding:     var(--s-1) var(--s-3);
  border-radius: var(--r-full);
}

.conn-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #66BB6A;
  transition: background var(--t-base);
}
.conn-dot.reconnecting { background: #FFA726; animation: pulse-dot 1s infinite; }
.conn-dot.disconnected { background: #EF5350; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.3} }

.main {
  max-width:  640px;
  margin:     var(--s-6) auto;
  padding:    0 var(--s-4) var(--s-16);
  display:    flex;
  flex-direction: column;
  gap:        var(--s-4);
}

/* ── Form card ────────────────────────────────────────────────────────── */
.form-card .card-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* ── Name row: حقلان جنباً لجنب ─────────────────────────────────────── */
.name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 520px) {
  .name-row { grid-template-columns: 1fr; }
}

.req { color: var(--c-danger); font-weight: 700; }

/* ── Department Grid ──────────────────────────────────────────────────── */
.dept-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}

.dept-card {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--s-1);
  padding:         var(--s-4) var(--s-2);
  border:          2.5px solid var(--c-border);
  border-radius:   var(--r-lg);
  background:      var(--c-surface);
  cursor:          pointer;
  transition:      all var(--t-fast);
  text-align:      center;
  user-select:     none;
}
.dept-card:hover { border-color: var(--dept-color, var(--c-primary)); background: #F8FAFF; }
.dept-card.selected {
  border-color: var(--dept-color, var(--c-primary));
  background:   color-mix(in srgb, var(--dept-color, var(--c-primary)) 10%, white);
}

.dept-prefix {
  font-size:   var(--text-2xl);
  font-weight: 800;
  color:       var(--dept-color, var(--c-primary));
  line-height: 1;
}
.dept-name {
  font-size:   var(--text-sm);
  font-weight: 600;
  color:       var(--c-text);
  line-height: 1.3;
}
.dept-waiting {
  font-size:  var(--text-xs);
  color:      var(--c-text-muted);
}

/* ── Priority ─────────────────────────────────────────────────────────── */
.priority-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  background: var(--c-bg);
  border: 2px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text-muted);
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  padding: var(--s-3) var(--s-4);
  width: 100%;
  transition: all var(--t-fast);
}
.priority-toggle:hover {
  background: var(--c-warning-bg);
  border-color: var(--c-warning);
  color: var(--c-warning);
}

.priority-row {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--c-warning-bg);
  border: 2px solid var(--c-warning);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.priority-options { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.priority-opt {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--text-lg); cursor: pointer; font-weight: 700;
}

/* ── Issue Button ─────────────────────────────────────────────────────── */
#issueBtn {
  height: 72px;
  font-size: var(--text-2xl);
  letter-spacing: .5px;
}
.shortcut-hint {
  font-size: var(--text-sm);
  opacity: .65;
  margin-right: var(--s-2);
}

/* ── Success Card ─────────────────────────────────────────────────────── */
.success-card {
  background:    var(--c-surface);
  border:        2px solid var(--c-success);
  border-radius: var(--r-xl);
  padding:       var(--s-12) var(--s-8);
  text-align:    center;
  animation:     success-pop .3s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes success-pop {
  from { transform: scale(.88); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.success-check {
  font-size:  4rem;
  color:      var(--c-success);
  line-height: 1;
  margin-bottom: var(--s-4);
}
.success-number {
  font-size:   var(--text-giant);
  font-weight: 800;
  color:       var(--c-primary-dark);
  line-height: 1;
}
.success-dept {
  font-size:    var(--text-xl);
  font-weight:  600;
  color:        var(--c-text-muted);
  margin-top:   var(--s-2);
}
.success-hint {
  font-size:   var(--text-sm);
  color:       var(--c-text-muted);
  margin-top:  var(--s-4);
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer {
  position:   fixed;
  bottom:     0;
  left:       0;
  right:      0;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding:    var(--s-3) var(--s-6);
  display:    flex;
  align-items:center;
  justify-content: space-between;
  gap:        var(--s-4);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}
.footer-last { font-size: var(--text-sm); color: var(--c-text-muted); }
.footer-last strong { color: var(--c-primary-dark); font-size: var(--text-base); }

/* ── Print stylesheet ─────────────────────────────────────────────────── */
@media print {
  body * { visibility: hidden; }
  #printArea, #printArea * { visibility: visible; }
  #printArea {
    position: absolute; inset: 0;
    width: 80mm; margin: 0 auto;
    font-family: monospace; text-align: center;
  }
}