/* Shared styles for apply / application / admin pages — door-page palette */
:root{
  --purple:#6D40C4; --navy:#34317D; --navy-deep:#211E56; --navy-night:#161337;
  --gold:#FFD572; --lilac:#9778D2; --lavender:#F5F1FB; --ink:#292929;
  --card:rgba(52,49,125,.35); --border:rgba(151,120,210,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Poppins','Segoe UI',system-ui,sans-serif;
  background:radial-gradient(1200px 800px at 50% -200px, var(--navy) 0%, var(--navy-deep) 45%, var(--navy-night) 100%);
  color:var(--lavender);min-height:100vh;
}
.wrap{max-width:880px;margin:0 auto;padding:0 20px 80px}
header{display:flex;align-items:center;justify-content:space-between;padding:24px 0;flex-wrap:wrap;gap:10px}
.wordmark{font-weight:900;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:none}
.wordmark em{font-style:normal;color:var(--gold)}
.powered{display:flex;align-items:center;gap:8px;font-size:.68rem;letter-spacing:.08em;color:var(--lilac);text-transform:uppercase;font-weight:600}
.powered img{height:20px;width:auto}
h1{font-weight:900;color:#fff;font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.15;margin:18px 0 10px}
h1 .glow{color:var(--gold)}
.sub{color:var(--lavender);opacity:.85;line-height:1.6;max-width:620px}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:26px;margin:18px 0;backdrop-filter:blur(4px)}
.card h2{font-weight:900;color:#fff;font-size:1.1rem;margin-bottom:14px}
label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--lilac);margin:16px 0 6px}
input[type=text],input[type=email],input[type=url],input[type=tel],input[type=number],textarea,select{
  width:100%;background:rgba(22,19,55,.7);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;color:#fff;font-family:inherit;font-size:.95rem;outline:none;
  transition:border-color .2s, box-shadow .2s;
}
input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,213,114,.18)}
textarea{min-height:110px;resize:vertical}
.hint{font-size:.78rem;color:var(--lilac);margin-top:6px;line-height:1.5}
.btn{
  background:var(--gold);color:var(--navy);border:none;border-radius:10px;font-family:inherit;
  font-weight:900;font-size:.88rem;letter-spacing:.05em;text-transform:uppercase;
  padding:13px 24px;cursor:pointer;transition:transform .15s, box-shadow .2s;display:inline-block;text-decoration:none;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(255,213,114,.3)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:transparent;color:var(--lilac);border:1px solid var(--border)}
.btn.danger{background:#e05c5c;color:#fff}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row > *{flex:1;min-width:180px}
.err{background:rgba(224,92,92,.12);border:1px solid rgba(224,92,92,.4);border-radius:10px;padding:12px 14px;margin:12px 0;font-size:.9rem;display:none}
.err.show{display:block}
.ok{background:rgba(255,213,114,.08);border:1px solid rgba(255,213,114,.3);border-radius:10px;padding:12px 14px;margin:12px 0;font-size:.9rem}

/* collapsible cards (accordion): click the heading to open/close */
.card.acc > h2{cursor:pointer;user-select:none}
.card.acc > h2::before{content:'▸';display:inline-block;margin-right:9px;color:var(--gold);font-size:.8em;transition:transform .2s;vertical-align:1px}
.card.acc:not(.closed) > h2::before{transform:rotate(90deg)}
.card.acc.closed{padding-top:16px;padding-bottom:16px}
.card.acc.closed > h2{margin-bottom:0}
.card.acc.closed > *:not(h2){display:none!important}

/* stepper */
.steps{display:flex;gap:8px;margin:22px 0}
.step-dot{flex:1;text-align:center;padding:10px 6px;border-radius:10px;border:1px solid var(--border);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--lilac)}
.step-dot.active{border-color:var(--gold);color:var(--gold);background:rgba(255,213,114,.07)}
.step-dot.done{color:#9be29b;border-color:rgba(155,226,155,.4)}

/* profile verify card */
.profile-card{display:flex;gap:16px;align-items:center;background:rgba(22,19,55,.6);border:1px solid var(--gold);border-radius:14px;padding:16px;margin-top:14px}
.profile-card img{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--navy-deep)}
.profile-card .nm{font-weight:900;color:#fff}
.profile-card .hl{font-size:.85rem;color:var(--lilac);line-height:1.4}

/* stats */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:14px 0}
.stat{background:rgba(22,19,55,.6);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center}
.stat .v{font-size:1.5rem;font-weight:900;color:var(--gold)}
.stat .k{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--lilac);margin-top:4px}

/* tables */
table{width:100%;border-collapse:collapse;font-size:.86rem}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid rgba(151,120,210,.15)}
th{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--lilac);cursor:pointer;user-select:none;white-space:nowrap}
th.sorted{color:var(--gold)}
td a{color:var(--gold);text-decoration:none}
tr:hover td{background:rgba(255,255,255,.02)}
.table-scroll{overflow-x:auto}
/* wide card: breaks out of the 880px column so big tables (connections browser)
   get the full viewport before resorting to a horizontal scroll */
.card.wide{width:min(1180px,calc(100vw - 24px));position:relative;left:50%;transform:translateX(-50%)}
/* on smaller screens, drop the least-important table columns instead of
   pushing the tagging controls off-screen behind a sideways scroll */
@media (max-width:940px){ .hide-md{display:none} }
@media (max-width:600px){
  .hide-sm{display:none}
  /* compact the table so the tag buttons + dropdown fit on a phone */
  table{font-size:.8rem}
  th,td{padding:7px 5px}
  th{white-space:normal}
  .table-scroll .tagk{padding:4px 6px!important}
  .table-scroll select.tagf{min-width:86px!important;padding:6px 4px!important}
}
.pager{display:flex;gap:10px;align-items:center;justify-content:center;margin:14px 0;font-size:.85rem;color:var(--lilac)}
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.badge.draft{background:rgba(151,120,210,.15);color:var(--lilac)}
.badge.submitted{background:rgba(255,213,114,.15);color:var(--gold)}
.badge.approved{background:rgba(155,226,155,.15);color:#9be29b}
.badge.declined{background:rgba(224,92,92,.15);color:#e08c8c}
footer{margin-top:50px;border-top:1px solid rgba(151,120,210,.2);padding:22px 0;font-size:.75rem;color:var(--lilac)}
footer a{color:var(--gold);text-decoration:none}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--gold);border-radius:50%;animation:sp 1s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
