/* SP Tournée App - UI (mobile-first)
   Theme intentionally minimal; this CSS scopes to .spt-app-root to avoid theme conflicts. */

:root{
  --spt-bg:#f6f7f8;
  --spt-card:#ffffff;
  --spt-text:#111827;
  --spt-muted:#6b7280;
  --spt-border:#e5e7eb;
  --spt-radius:14px;
  --spt-shadow:0 1px 2px rgba(0,0,0,.06);
  --spt-gap:12px;
  --spt-pad:12px;
  --spt-font: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}

.spt-app-root{
  font-family:var(--spt-font);
  color:var(--spt-text);
  background:transparent;
}

.spt-app-root *{ box-sizing:border-box; }

.spt-app-root .spt-h2{ font-size:18px; line-height:1.25; margin:0; }
.spt-app-root .spt-h3{ font-size:14px; line-height:1.25; margin:0; color:var(--spt-muted); }
.spt-app-root .spt-small{ font-size:12px; color:var(--spt-muted); }

.spt-app-root .spt-card{
  background:var(--spt-card);
  border:1px solid var(--spt-border);
  border-radius:var(--spt-radius);
  box-shadow:var(--spt-shadow);
  padding:var(--spt-pad);
}

.spt-app-root .spt-card-title{
  font-size:13px;
  font-weight:700;
  margin:0 0 10px 0;
  color:var(--spt-text);
}

.spt-app-root .spt-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--spt-gap);
  align-items:stretch;
}

.spt-app-root .spt-row > *{
  flex:1 1 280px;
  min-width:0;
}

/* Buttons */
.spt-app-root .spt-btn{
  appearance:none;
  border:1px solid var(--spt-border);
  background:#fff;
  color:var(--spt-text);
  border-radius:12px;
  padding:10px 12px;
  font-weight:600;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  box-shadow:var(--spt-shadow);
}

.spt-app-root .spt-btn:active{ transform:translateY(1px); }
.spt-app-root .spt-btn[disabled]{ opacity:.6; cursor:not-allowed; }

.spt-app-root .spt-btn.primary{
  background:#111827;
  border-color:#111827;
  color:#fff;
}

/* Inputs */
.spt-app-root .spt-field{ display:flex; flex-direction:column; gap:6px; margin:0 0 10px 0; }
.spt-app-root .spt-input,
.spt-app-root .spt-select,
.spt-app-root .spt-textarea{
  width:100%;
  border:1px solid var(--spt-border);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  outline:none;
  background:#fff;
  color:var(--spt-text);
}
.spt-app-root .spt-textarea{ min-height:96px; resize:vertical; }

/* Key/Value list */
.spt-app-root .spt-kv{ display:flex; flex-direction:column; gap:10px; }
.spt-app-root .spt-kv-row{ display:flex; justify-content:space-between; gap:12px; }
.spt-app-root .spt-kv-k{ color:var(--spt-muted); font-size:12px; min-width:120px; }
.spt-app-root .spt-kv-v{ color:var(--spt-text); font-size:14px; text-align:right; word-break:break-word; }

/* Notes */
.spt-app-root .spt-note{
  border-left:4px solid var(--spt-border);
  padding-left:10px;
  color:var(--spt-muted);
  font-size:13px;
}

/* Modal */
.spt-app-root .spt-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  z-index:9999;
}


/* Modal panel */
.spt-modal__panel{
  width:100%;
  max-width:520px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  overflow:hidden;
}
.spt-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.spt-modal__panel > div{
  padding:14px;
}
.spt-modal__panel .spt-row{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:12px;
}
.spt-app-root .spt-modal > .spt-card{
  width:100%;
  max-width:520px;
  border-radius:18px;
}

@media (min-width: 720px){
  .spt-app-root .spt-modal{ align-items:center; }
}

/* Profile */
.spt-app-root .spt-profile{ max-width:980px; margin:0 auto; padding:8px 0; }

.spt-app-root .spt-profile-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  margin-bottom:12px;
}

.spt-app-root .spt-avatar{
  width:88px;
  height:88px;
  border-radius:999px;
  border:1px solid var(--spt-border);
  background:#f3f4f6;
  background-size:cover;
  background-position:center;
  box-shadow:var(--spt-shadow);
  flex:0 0 auto;
  position:relative;
  overflow:hidden;
}

.spt-app-root .spt-avatar-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:28px;
  color:var(--spt-muted);
}

.spt-app-root .spt-profile-name{ font-size:18px; font-weight:800; margin:0; }
.spt-app-root .spt-profile-sub{ font-size:13px; color:var(--spt-muted); margin:2px 0 0 0; }
.spt-app-root .spt-profile-meta{ display:flex; flex-direction:column; gap:2px; }

@media (min-width: 680px){
  .spt-app-root .spt-profile-head{
    flex-direction:row;
    align-items:center;
    text-align:left;
  }
  .spt-app-root .spt-profile-meta{ align-items:flex-start; }
}

/* Ensure file input doesn't take space */
.spt-app-root input[type="file"].spt-hidden{ display:none !important; }

.spt-tabs{display:flex;gap:8px;margin:10px 0 14px;}
.spt-tab{padding:8px 12px;border:1px solid #ddd;border-radius:999px;background:#fff;cursor:pointer;font:inherit;}
.spt-tab.active{border-color:#000;}