/* ==========================================================================
   Portal, plan page and admin surfaces.

   Everything here is built on the tokens and animation vocabulary already
   defined in app.css (--accent, --p1..--p5, --ff-display, rise/fade), so the
   new pages read as the same product as the ticket form rather than as a
   second app bolted on.
   ========================================================================== */

/* ---- top navigation ---------------------------------------------------- */
.topnav{display:flex; gap:.1rem; align-items:center; margin-right:.35rem}
.topnav a{
  font-size:.82rem; font-weight:600; letter-spacing:.01em;
  color:var(--txt-3); text-decoration:none;
  padding:.42rem .7rem; border-radius:999px;
  transition:color .18s ease, background .18s ease;
}
.topnav a:hover{color:var(--txt); background:var(--bg-3)}
.topnav a.on{color:var(--accent-ink); background:var(--accent-dim)}
@media (max-width:640px){ .topnav a{padding:.4rem .5rem; font-size:.78rem} }

/* ---- status ------------------------------------------------------------ */
.statusdot{
  width:.5rem; height:.5rem; border-radius:50%; flex:none;
  background:currentColor; position:relative;
}
.tone-new    { color:var(--p4) }
.tone-open   { color:var(--ok) }
.tone-wait   { color:var(--accent) }
.tone-hold   { color:var(--p5) }
.tone-done   { color:var(--ok) }
.tone-closed { color:var(--txt-3) }

/* Only a live ticket pulses — a closed one should sit still. */
.tone-open .statusdot::after,
.tone-wait .statusdot::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:1px solid currentColor; animation:ring 2.4s ease-out infinite;
}
@media (prefers-reduced-motion:reduce){
  .tone-open .statusdot::after,.tone-wait .statusdot::after{animation:none}
}

.statusrow{
  display:flex; gap:.8rem; align-items:flex-start;
  padding:1rem 1.1rem; border:1px solid var(--line); border-radius:14px;
  background:var(--bg-2); box-shadow:var(--shadow-lift);
  animation:fade .5s both;
}
.statusrow .statusdot{margin-top:.42rem}
.statusrow b{display:block; font-size:1rem; color:var(--txt); letter-spacing:-.01em}
.statusrow span:not(.statusdot){display:block; font-size:.88rem; color:var(--txt-2); margin-top:.15rem}

/* ---- the plan link block on the result screen -------------------------- */
.planlink{
  margin:1.5rem 0 0; padding:1.25rem 1.3rem;
  border:1px solid var(--accent-line); border-radius:16px;
  background:
    linear-gradient(135deg, var(--accent-dim), transparent 62%),
    var(--bg-2);
  box-shadow:var(--shadow-lift);
  animation:rise .6s .15s both;
}
.planlink b{
  display:block; font-family:var(--ff-display); font-size:1.18rem;
  color:var(--txt); letter-spacing:-.01em;
}
.planlink span{
  display:block; font-size:.88rem; color:var(--txt-2);
  margin:.3rem 0 .95rem; max-width:46ch; line-height:1.5;
}
.planlink .pbtn{margin:0}
.planlink.err-state{border-color:var(--accent); background:var(--bg-2)}
.warn-note{
  display:block; margin-top:.8rem !important; font-size:.8rem !important;
  color:var(--accent-ink) !important;
}

.planfoot{
  margin:2.2rem 0 3rem; font-size:.86rem; color:var(--txt-3); text-align:center;
  animation:fade .6s .3s both;
}
.planfoot a{color:var(--accent-ink); font-weight:600; text-decoration:none}
.planfoot a:hover{text-decoration:underline}
.planfoot b{color:var(--txt-2); font-weight:600}

/* ---- ticket list ------------------------------------------------------- */
.sec h3 .cnt{
  display:inline-block; margin-left:.5rem; padding:.1rem .5rem;
  font-size:.72rem; font-weight:700; border-radius:999px;
  background:var(--bg-3); color:var(--txt-3); vertical-align:middle;
}

.tlist{display:flex; flex-direction:column; gap:.7rem}
.tlist.dim{opacity:.72}
.tlist.dim:hover{opacity:1; transition:opacity .25s ease}

.tcard{
  position:relative; display:flex; align-items:stretch; gap:0;
  border:1px solid var(--line); border-radius:15px;
  background:var(--bg-2); text-decoration:none; color:inherit;
  overflow:hidden; box-shadow:var(--shadow-lift);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
  animation:rise .5s both;
}
/* Stagger so a full list arrives as a wave rather than a block. */
.tlist .tcard:nth-child(1){animation-delay:.02s}
.tlist .tcard:nth-child(2){animation-delay:.07s}
.tlist .tcard:nth-child(3){animation-delay:.12s}
.tlist .tcard:nth-child(4){animation-delay:.17s}
.tlist .tcard:nth-child(5){animation-delay:.22s}
.tlist .tcard:nth-child(n+6){animation-delay:.26s}

.tcard:hover{
  transform:translateY(-2px);
  border-color:var(--line-2);
  box-shadow:0 2px 4px rgba(1,30,65,.05), 0 18px 36px -20px rgba(1,30,65,.38);
}
.tcard:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

.tcard-bar{width:4px; flex:none; background:var(--pc, var(--p5))}
.tcard-main{flex:1; padding:1rem 1.15rem; min-width:0}

.tcard-top{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.45rem}
.tkey{
  font-family:var(--ff-mono); font-size:.76rem; font-weight:600;
  letter-spacing:.02em; color:var(--txt-3);
}
.pill{
  font-size:.7rem; font-weight:800; letter-spacing:.04em;
  padding:.14rem .45rem; border-radius:6px;
  color:#fff; background:var(--pc, var(--p5));
}
.chip{
  display:inline-flex; align-items:center; gap:.38rem;
  font-size:.73rem; font-weight:600; letter-spacing:.01em;
  padding:.18rem .55rem .18rem .45rem; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-3);
}

.tcard h3{
  margin:0 0 .3rem; font-family:var(--ff-display); font-weight:400;
  font-size:1.1rem; line-height:1.3; color:var(--txt); letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.tmeta{margin:0; font-size:.8rem; color:var(--txt-3)}
.tmeta .dot{margin:0 .35rem; opacity:.5}
.tdue{margin:.5rem 0 0; font-size:.82rem; color:var(--txt-2)}
.tdue b{font-weight:600; color:var(--txt)}
.tdue small{display:block; font-size:.76rem; color:var(--txt-3); margin-top:.08rem}
.tdue.muted{color:var(--txt-3)}
small.overdue{color:var(--accent-ink) !important; font-weight:600}

.tgo{
  display:flex; align-items:center; padding:0 1.1rem 0 .4rem;
  font-size:1.1rem; color:var(--line-2);
  transition:color .22s ease, transform .22s ease;
}
.tcard:hover .tgo{color:var(--accent); transform:translateX(3px)}
@media (max-width:640px){ .tgo{display:none} }

/* ---- empty state ------------------------------------------------------- */
.empty{
  text-align:center; padding:3.5rem 1.5rem;
  border:1px dashed var(--line-2); border-radius:18px; background:var(--bg-2);
  animation:rise .6s both;
}
.empty-mark{
  width:3rem; height:3rem; margin:0 auto 1.1rem; border-radius:50%;
  display:grid; place-items:center; font-size:1.3rem;
  color:var(--ok); background:rgba(20,107,70,.1);
}
.empty h3{margin:0 0 .4rem; font-family:var(--ff-display); font-weight:400; font-size:1.35rem; color:var(--txt)}
.empty p{margin:0 auto 1.4rem; max-width:40ch; color:var(--txt-2); font-size:.92rem}
.empty .pbtn{display:inline-flex; width:auto; min-width:14rem}

/* ==========================================================================
   ADMIN
   ========================================================================== */
.adminwrap{max-width:68rem; margin:0 auto; padding:0 1.25rem 4rem}
.adminhead{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.4rem}

.tabs{display:flex; gap:.25rem; flex-wrap:wrap; margin:1.6rem 0 1.4rem; border-bottom:1px solid var(--line)}
.tabs a{
  padding:.6rem .9rem; font-size:.86rem; font-weight:600;
  color:var(--txt-3); text-decoration:none; border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color .18s ease, border-color .18s ease;
}
.tabs a:hover{color:var(--txt)}
.tabs a.on{color:var(--accent-ink); border-bottom-color:var(--accent)}

.panel{
  border:1px solid var(--line); border-radius:16px; background:var(--bg-2);
  box-shadow:var(--shadow-lift); padding:1.3rem 1.4rem; margin-bottom:1.1rem;
  animation:fade .45s both;
}
.panel > h3{
  margin:0 0 .25rem; font-family:var(--ff-display); font-weight:400;
  font-size:1.25rem; color:var(--txt); letter-spacing:-.01em;
}
.panel > p.sub{margin:0 0 1.1rem; font-size:.87rem; color:var(--txt-2); max-width:62ch; line-height:1.5}

table.grid{width:100%; border-collapse:collapse; font-size:.87rem}
table.grid th{
  text-align:left; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-3); font-weight:700; padding:.5rem .6rem; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
table.grid td{padding:.55rem .6rem; border-bottom:1px solid var(--line); vertical-align:middle}
table.grid tr:last-child td{border-bottom:0}
table.grid tbody tr{transition:background .15s ease}
table.grid tbody tr:hover{background:var(--bg-3)}
.scrollx{overflow-x:auto; -webkit-overflow-scrolling:touch}

.adminwrap input[type=text],
.adminwrap input[type=email],
.adminwrap input[type=number],
.adminwrap select{
  width:100%; padding:.46rem .6rem; font:inherit; font-size:.86rem;
  color:var(--txt); background:var(--bg); border:1px solid var(--line-2);
  border-radius:9px; transition:border-color .18s ease, box-shadow .18s ease;
}
.adminwrap input:focus, .adminwrap select:focus{
  outline:none; border-color:var(--focus); box-shadow:0 0 0 3px var(--blue-dim);
}
.adminwrap label.fl{display:block; font-size:.74rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--txt-3); margin:0 0 .3rem}
.frow{display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.9rem; margin-bottom:1rem}

.btn{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  font:inherit; font-size:.86rem; font-weight:600;
  padding:.5rem .95rem; border-radius:10px;
  border:1px solid var(--accent); background:var(--accent); color:var(--on-accent);
  transition:transform .15s ease, filter .18s ease;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn.sec{background:transparent; color:var(--txt-2); border-color:var(--line-2)}
.btn.sec:hover{color:var(--txt); background:var(--bg-3); filter:none}
.btn.danger{background:transparent; color:var(--accent-ink); border-color:var(--accent-line)}

.flash{
  padding:.75rem 1rem; border-radius:11px; font-size:.87rem; font-weight:500;
  margin-bottom:1.1rem; animation:fade .4s both;
}
.flash.ok{background:rgba(20,107,70,.1); color:var(--ok); border:1px solid rgba(20,107,70,.25)}
.flash.bad{background:var(--accent-dim); color:var(--accent-ink); border:1px solid var(--accent-line)}

.hintline{font-size:.78rem; color:var(--txt-3); margin:.35rem 0 0; line-height:1.5}
.mono{font-family:var(--ff-mono); font-size:.8rem}
.tag-vacant{
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent-dim);
  padding:.1rem .4rem; border-radius:5px; margin-left:.4rem;
}
.ok-dot,.bad-dot{display:inline-block; width:.5rem; height:.5rem; border-radius:50%; margin-right:.45rem}
.ok-dot{background:var(--ok)} .bad-dot{background:var(--accent)}

.statgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.8rem; margin-bottom:1.3rem}
.stat{
  border:1px solid var(--line); border-radius:13px; background:var(--bg-2);
  padding:.9rem 1rem; animation:rise .5s both;
}
.stat b{display:block; font-family:var(--ff-display); font-size:1.75rem; color:var(--txt); line-height:1.1}
.stat span{display:block; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3); margin-top:.2rem}