/* CyberIntelligence Speakers Panel. Scoped to .csp-app, matching the
   Organizers Panel (CIS Invites) visual design — same palette, fonts,
   and component shapes, so the two feel like one product to end users
   even though they are separate plugins under the hood. */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&family=Roboto:wght@400;500;700;900&display=swap');

.csp-app{
  --base:#0E1A1F;--surface:#15262C;--surface-2:#1C333A;--line:#2A464E;--ink:#EDE6DB;
  --muted:#86A0A6;--coral:#E08C82;--signal:#F4C04E;--cyan:#5BC0CC;--ok:#6FCF97;--warn:#E06A5A;--btn:#6BA8E5;
  background:var(--base);color:var(--ink);font-family:'Open Sans',sans-serif;
  border-radius:16px;padding:28px;max-width:900px;margin:0 auto;line-height:1.5;
}
.csp-app *{box-sizing:border-box}
.csp-loading{color:var(--muted);font-family:'Open Sans',monospace;font-size:13px;padding:20px}
.csp-app h2{font-family:'Roboto',sans-serif;font-weight:700;font-size:25px;letter-spacing:-.02em;margin:0 0 6px;color:var(--ink)}
.csp-app h3{font-family:'Roboto',sans-serif;font-weight:500;font-size:16px;margin:0 0 4px;color:var(--ink)}

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

.csp-field{margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.csp-app label{display:block;font-size:13px;font-weight:500;margin-bottom:0;color:var(--ink)}
.csp-app input:not([type=checkbox]),.csp-app select,.csp-app textarea{
  width:100%;background:var(--base);border:1px solid var(--line);border-radius:7px;
  color:var(--ink);font-family:inherit;font-size:15px;padding:11px 13px;
}
.csp-app input:focus,.csp-app select:focus{outline:none;border-color:var(--btn);box-shadow:0 0 0 3px rgba(107,168,229,.18)}
.csp-app input::placeholder{color:#56727a}

.csp-row{display:flex;gap:12px;flex-wrap:wrap}
.csp-row > .csp-field{flex:1 1 200px}
@media(max-width:560px){.csp-row{flex-direction:column}}

.csp-role-row{display:flex;gap:10px;align-items:flex-end;margin-bottom:10px;padding:14px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:9px}
.csp-role-row .csp-field{margin-bottom:0;flex:1}

.csp-btn{font-family:'Roboto',sans-serif;font-weight:700;font-size:14px;background:var(--btn);
  color:#0E2A44;border:none;border-radius:7px;padding:12px 20px;cursor:pointer;transition:.15s}
.csp-btn:hover{background:#7FB4EC}
.csp-btn.secondary{background:transparent;border:1px solid var(--line);color:var(--ink)}
.csp-btn.secondary:hover{border-color:var(--btn)}
.csp-btn.danger{background:var(--warn);color:#2a0f0b}
.csp-btn.danger:hover{background:#e57e70}
.csp-btn.small{padding:8px 14px;font-size:12px}

.csp-error{color:var(--warn);font-size:13px;margin-top:8px;background:rgba(224,106,90,.1);
  border-left:2px solid var(--warn);padding:8px 12px;border-radius:4px}
.csp-notice{color:var(--ok);font-size:13px;margin-top:8px;background:rgba(111,207,151,.1);
  border-left:2px solid var(--ok);padding:8px 12px;border-radius:4px}

.csp-session-block{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  margin-bottom:16px;overflow:hidden}
.csp-session-block h3{background:var(--surface-2);margin:0;padding:14px 18px;font-size:15px;
  border-bottom:1px solid var(--line);color:var(--ink)}

.csp-tbl{width:100%;border-collapse:collapse;font-size:13px}
.csp-tbl th{text-align:left;font-family:'Open Sans',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:10px 18px;border-bottom:1px solid var(--line)}
.csp-tbl td{padding:11px 18px;border-bottom:1px solid var(--line);color:var(--ink)}
.csp-tbl tr:last-child td{border-bottom:none}

.csp-tabs{display:flex;gap:4px;background:var(--surface);padding:4px;border-radius:8px;
  border:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.csp-tab{font-family:'Open Sans',monospace;font-size:12px;color:var(--muted);background:transparent;
  border:none;padding:8px 14px;border-radius:5px;cursor:pointer}
.csp-tab.active{background:var(--btn);color:#0E2A44;font-weight:600}

.csp-portal, #csp-admin-root{color:var(--ink)}
.csp-hint{font-size:12px;color:var(--muted);line-height:1.5;margin-top:2px}

.csp-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#1C333A;border:1px solid #6FCF97;color:#EDE6DB;font-size:14px;
  padding:13px 20px;border-radius:9px;box-shadow:0 12px 30px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:.3s;z-index:99999;
  font-family:'Open Sans',sans-serif;
}
.csp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- Unified dark input fields (theme-proof) --------------------------------
   The rules above (.csp-app input, select, textarea) lose to page-builder /
   theme CSS on some sites (e.g. WPBakery), because those stylesheets load
   after ours and/or use higher specificity. This block matches the same
   theme-proofing already used by the Organizers Panel plugin: scoped to the
   widget root IDs + !important, so it always wins regardless of load order. */
#csp-portal-root input:not([type=checkbox]), #csp-portal-root select, #csp-portal-root textarea,
#csp-admin-root  input:not([type=checkbox]), #csp-admin-root  select, #csp-admin-root  textarea {
  background: #0E1A1F !important;
  color: #EDE6DB !important;
  border: 1px solid #2A464E !important;
  border-radius: 7px !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 15px !important;
  padding: 11px 13px !important;
  width: 100% !important;
  box-shadow: none !important;
}
#csp-portal-root select option, #csp-admin-root select option {
  background: #0E1A1F;
  color: #EDE6DB;
}
#csp-portal-root input::placeholder, #csp-admin-root input::placeholder {
  color: #56727a !important;
}
#csp-portal-root input:focus, #csp-portal-root select:focus,
#csp-admin-root  input:focus, #csp-admin-root  select:focus {
  outline: none !important;
  border-color: #6BA8E5 !important;
  box-shadow: 0 0 0 3px rgba(107,168,229,.18) !important;
}

/* Same theme-proofing for tables: the site theme's own table styles were
   winning over .csp-tbl, leaving rows white-on-white instead of dark. */
#csp-portal-root table, #csp-admin-root table {
  background: #15262C !important;
  border-collapse: collapse !important;
  width: 100% !important;
}
#csp-portal-root th, #csp-admin-root th {
  background: #15262C !important;
  color: #86A0A6 !important;
  text-align: left !important;
  font-family: 'Open Sans', monospace !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid #2A464E !important;
}
#csp-portal-root td, #csp-admin-root td {
  background: #15262C !important;
  color: #EDE6DB !important;
  padding: 11px 18px !important;
  border-bottom: 1px solid #2A464E !important;
  font-size: 13px !important;
}
#csp-portal-root tr:last-child td, #csp-admin-root tr:last-child td {
  border-bottom: none !important;
}