:root{
  --bg0:#070A10;
  --bg1:#0B1020;
  --panel:#0E1424cc;      /* glass panel */
  --panelSolid:#0E1424;
  --stroke:#27304a;
  --stroke2:#1b2236;
  --text:#EAF0FF;
  --muted:#A7B0C6;
  --muted2:#7E88A3;

  --accent:#E11D2E;       /* MultiCo red */
  --accent2:#FF3B4A;
  --good:#2EF2A7;
  --bad:#FF4D5E;

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 16px;
  --radius2: 12px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Reset */
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family: var(--sans);
  color: var(--text);
  overflow-x:hidden;
}

/* Desktop background */
.desktop{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px;
  background:
    radial-gradient(900px 600px at 15% 20%, rgba(225,29,46,.18), transparent 60%),
    radial-gradient(800px 550px at 80% 25%, rgba(93,143,255,.12), transparent 55%),
    radial-gradient(700px 600px at 55% 90%, rgba(46,242,167,.08), transparent 60%),
    linear-gradient(135deg, var(--bg0), var(--bg1));
  position:relative;
}

/* Subtle grid overlay (OS feel) */
.desktop::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity:.18;
  pointer-events:none;
  mask-image: radial-gradient(70% 60% at 50% 35%, black 45%, transparent 100%);
}

/* Window shell */
.window{
  width:100%;
  max-width: 520px;
  background: var(--panel);
  border: 1px solid rgba(39,48,74,.85);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow:hidden;
  animation: uiFade .18s ease-out;
}

@keyframes uiFade{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

.terms-box{
  margin-top: 14px;
  padding: 14px 14px;
  border-radius: 12px;
  border: 1px solid rgba(39,48,74,.65);
  background: rgba(10,12,18,.55);
  color: rgba(229,233,245,.92);
  font-size: 13.5px;
  line-height: 1.55;
  max-height: 260px;
  overflow:auto;
}

/* Titlebar */
.titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(39,48,74,.7);
}

.title-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.brand img{
  width: 92px;
  height:auto;
  display:block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

.window-title{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Faux window controls */
.win-controls{
  display:flex;
  gap:8px;
}
.dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.12);
}
.dot.red{ background: rgba(225,29,46,.55); border-color: rgba(225,29,46,.35); }
.dot.yellow{ background: rgba(255,196,59,.45); border-color: rgba(255,196,59,.25); }
.dot.green{ background: rgba(46,242,167,.45); border-color: rgba(46,242,167,.25); }

/* Window body */
.window-body{
  padding: 22px 22px 20px;
}

.h1{
  font-size: 26px;
  letter-spacing:.2px;
  font-weight: 750;
  margin-bottom: 6px;
}

.sub{
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 18px;
  line-height: 1.35;
}

/* Alerts */
.alert, .success{
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 14px;
  font-size: 14px;
  border: 1px solid;
  background: rgba(255,255,255,.05);
}
.alert{
  border-color: rgba(255,77,94,.35);
  color: #FFD0D4;
}
.success{
  border-color: rgba(46,242,167,.30);
  color: #D6FFEF;
}

/* Inputs */
.input-group{ margin-bottom: 14px; }
.input-group label{
  display:block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted2);
  margin-bottom: 6px;
}
.input-group input{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(39,48,74,.75);
  background: rgba(7,10,16,.55);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.input-group input:focus{
  border-color: rgba(225,29,46,.7);
  box-shadow: 0 0 0 4px rgba(225,29,46,.18);
}
.input-group input:active{ transform: translateY(1px); }

/* Custom file input (onboarding avatar) */
.file-input{ display:flex; align-items:center; gap: 12px; flex-wrap:wrap; }
.file-input__native{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}
.file-input__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(39,48,74,.75);
  background: rgba(7,10,16,.55);
  color: rgba(234,240,255,.9);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.file-input__btn:hover{ border-color: rgba(225,29,46,.55); }
.file-input__btn:active{ transform: translateY(1px); }
.file-input__native:focus + .file-input__btn{
  border-color: rgba(225,29,46,.7);
  box-shadow: 0 0 0 4px rgba(225,29,46,.18);
}
.file-input__name{ font-size: 13px; color: rgba(234,240,255,.72); }

/* Selects */
.input-group select{
  width:100%;
  padding: 12px 40px 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(39,48,74,.75);
  background: rgba(7,10,16,.55);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(234,240,255,.65) 50%),
    linear-gradient(135deg, rgba(234,240,255,.65) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.input-group select:focus{
  border-color: rgba(225,29,46,.7);
  box-shadow: 0 0 0 4px rgba(225,29,46,.18);
}
.input-group select:active{ transform: translateY(1px); }

/* Checkbox list (used in onboarding personalisation) */
.checkbox-group{ display:flex; flex-direction:column; gap: 12px; margin-top: 10px; }
.checkbox-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-top: 10px; }
.checkbox-item{ display:flex; align-items:center; gap: 10px; cursor:pointer; user-select:none; color: rgba(234,240,255,.86); }
.checkbox-item .checkbox-label{ font-size: 14px; }
.checkbox-item input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(39,48,74,.85);
  background: rgba(7,10,16,.55);
  position: relative;
  display:inline-block;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.checkbox-item input[type="checkbox"]:hover{
  border-color: rgba(225,29,46,.55);
}
.checkbox-item input[type="checkbox"]:focus{
  outline:none;
  box-shadow: 0 0 0 4px rgba(225,29,46,.18);
  border-color: rgba(225,29,46,.7);
}
.checkbox-item input[type="checkbox"]:checked{
  background: rgba(225,29,46,.95);
  border-color: rgba(225,29,46,.95);
}
.checkbox-item input[type="checkbox"]:checked::after{
  content: '';
  position: absolute;
  left: 6px;
  top: 3px;
  width: 4px;
  height: 8px;
  border: solid rgba(255,255,255,.95);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Onboarding 2-column form rows */
.onb-two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px){
  .onb-two-col{ grid-template-columns: 1fr; }
  .checkbox-grid{ grid-template-columns: 1fr; }
}

/* Options row */
.options{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 8px 0 14px;
}
.options input{ accent-color: var(--accent); }
.options label{
  font-size: 14px;
  color: var(--muted);
  cursor:pointer;
}

/* Links */
.tiny-link{
  display:inline-flex;
  margin: 2px 0 10px;
  color: rgba(234,240,255,.9);
  text-decoration:none;
  font-size:14px;
  border-bottom: 1px dashed rgba(234,240,255,.25);
  padding-bottom: 2px;
}
.tiny-link:hover{
  border-bottom-color: rgba(225,29,46,.7);
  color: var(--text);
}

/* Buttons (site-wide)
   Default = white pill ("Unfollow" style). No full-width unless explicitly requested. */
.btn{
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.86);
  color: rgba(10,12,18,.92);
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.05;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 16px 44px rgba(0,0,0,.28);
  transition: transform .06s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{
  background: rgba(255,255,255,.94);
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 18px 54px rgba(0,0,0,.32);
}
.btn:active{ transform: translateY(1px); }
.btn:disabled,
.btn[disabled]{
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Explicit full-width only when needed */
.btn.block{ width: 100%; }

/* White / "Unfollow" style (alias – default) */
.btn.is-white{ }

/* Dark glass button (for places where white doesn't fit) */
.btn.glass,
.btn.dark{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(234,240,255,.92);
  box-shadow: 0 12px 34px rgba(0,0,0,.25);
}
.btn.glass:hover,
.btn.dark:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

/* Sizes */
.btn.mini{
  padding: 8px 12px;
  font-size: 13px;
}
.btn.sm{
  padding: 9px 14px;
  font-size: 13px;
}

/* Variants */
.btn.primary{
  border-color: rgba(225,29,46,.55);
  background: linear-gradient(180deg, rgba(225,29,46,.95), rgba(155,14,26,.95));
  box-shadow: 0 14px 38px rgba(225,29,46,.22);
  color: white;
}
.btn.primary:hover{ box-shadow: 0 16px 48px rgba(225,29,46,.30); }

.btn.danger{
  border-color: rgba(255,77,94,.38);
  background: rgba(255,77,94,.10);
  color: rgba(255,208,212,.95);
}
.btn.danger:hover{ background: rgba(255,77,94,.14); }

.btn.ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  color: rgba(234,240,255,.92);
  box-shadow: none;
}
.btn.ghost:hover{
  border-color: rgba(225,29,46,.35);
  background: rgba(255,255,255,.06);
}

/* Make native buttons consistent when .btn isn't applied */
button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
  font-family: var(--sans);
  font-weight: 800;
  border-radius: 999px;
}

/* Tabs (Teams page) */
.tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 12px 0 0;
}
.tab-btn{ opacity: .85; }
.tab-btn.active{
  opacity: 1;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
}

/* Teams page layout helpers */
.teams-page .two-col{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 14px; }
@media (max-width: 980px){ .teams-page .two-col{ grid-template-columns: 1fr; } }
.teams-page .team-card{ margin: 10px 0; padding: 12px; }
.teams-page .cp-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.teams-page .cp-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.teams-page .cp-actions .btn{ margin: 0; }
.teams-page .section-gap{ margin-top: 14px; }
.teams-page .team-name-input{ max-width: 340px; }
.teams-page .btn-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.teams-page .card + .card{ margin-top: 18px; }
.teams-page .team-card.card{ margin-top: 10px; }
.teams-page .muted{ color: rgba(167,176,198,.9); }
.teams-page .hr{ height:1px; background: rgba(255,255,255,.08); margin: 10px 0; }
.teams-page .list{ display:flex; flex-direction:column; gap:10px; }
.teams-page .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 680px){ .teams-page .grid2{ grid-template-columns: 1fr; } }
.teams-page .empty{ padding: 10px 0; opacity: .85; }

/* Legacy aliases (older pages) */
.btn-primary{ border-color: rgba(225,29,46,.55); background: linear-gradient(180deg, rgba(225,29,46,.95), rgba(155,14,26,.95)); box-shadow: 0 14px 38px rgba(225,29,46,.22); color: #fff; border-radius: 999px; padding: 10px 16px; font-weight: 800; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.btn-primary:hover{ box-shadow: 0 16px 48px rgba(225,29,46,.30); }
.btn-ghost{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); color: rgba(234,240,255,.92); border-radius: 999px; padding: 10px 16px; font-weight: 800; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.btn-ghost:hover{ border-color: rgba(225,29,46,.35); background: rgba(255,255,255,.06); }

/* Small footer text */
.footer-note{
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(167,176,198,.75);
  text-align:center;
}

/* Mobile tweaks */
@media (max-width: 520px){
  .window{ border-radius: 14px; }
  .window-body{ padding: 18px; }
  .brand img{ width: 84px; }
}

/* ================================= */
/* CONTROL PANEL (cp- layout system) */
/* ================================= */

/*
  Dashboard background
  - Use fixed, non-repeating paint so it never "splits" on tall pages
  - Apply to both html + body to avoid edge cases where the background
    appears to restart.
*/
html, body.dashboard {
    margin: 0;
    font-family: var(--sans);
    background:
      radial-gradient(900px 600px at 15% 20%, rgba(225,29,46,.18), transparent 60%),
      radial-gradient(800px 550px at 80% 25%, rgba(93,143,255,.12), transparent 55%),
      radial-gradient(700px 600px at 55% 90%, rgba(46,242,167,.08), transparent 60%),
      linear-gradient(135deg, var(--bg0), var(--bg1));
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: var(--text);
    position: relative;
}

/* keep legacy selector for specificity where needed */
body.dashboard{ background-color: var(--bg0); }

/* Subtle grid overlay globally (same vibe as login) */
body.dashboard::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity:.12;
  pointer-events:none;
  mask-image: radial-gradient(70% 60% at 50% 35%, black 45%, transparent 100%);
  z-index:0;
}

/* Ensure app content sits above the overlay */
.cp-shell{ position:relative; z-index:1; }

/* Layout shell */
.cp-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 70px 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar main";
    min-height: 100vh;
}

/* Topbar */
.cp-topbar {
    grid-area: topbar;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
    background: #111827;
    border-bottom: 1px solid #1f2937;
}

.cp-brand {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Topbar search */
.cp-search {
    position: relative;
    width: min(520px, 42vw);
}

.cp-search-input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #1f2937;
    background: #0b1220;
    color: #e5e7eb;
    outline: none;
}

.cp-search-input::placeholder {
    color: rgba(167,176,198,.8);
}

.cp-search-input:focus {
    border-color: rgba(225,29,46,.7);
    box-shadow: 0 0 0 3px rgba(225,29,46,.15);
}

.cp-search-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    background: #0f172a;
    border: 1px solid #1f2937;
    border-radius: 12px;
    overflow: hidden;
    z-index: 50;
}

.cp-search-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    text-decoration: none;
    color: #e5e7eb;
}

.cp-search-item:hover {
    background: #1e293b;
}

.cp-search-meta {
    font-size: 12px;
    color: rgba(167,176,198,.9);
    white-space: nowrap;
}

.cp-search-empty {
    padding: 12px;
    font-size: 13px;
    color: rgba(167,176,198,.9);
}

.cp-brand img {
    height: 40px;
}

.cp-brand .tag {
    font-size: 12px;
    color: #888;
    font-family: var(--mono);
}

/* User section */
.cp-user {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.cp-pill {
    background: #e11d2e;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Sidebar */
.cp-sidebar {
    grid-area: sidebar;
    background: #0f172a;
    padding: 25px 15px;
    border-right: 1px solid #1f2937;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nav a {
    text-decoration: none;
    color: #ccc;
    padding: 10px 12px;
    border-radius: 8px;
    transition: 0.2s;
}

.nav a:hover {
    background: #1e293b;
}

.nav a.active {
    background: #e11d2e;
    color: white;
}

.nav small {
    margin-top: 20px;
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
}

/* Main area */
.cp-main {
    grid-area: main;
    padding: 34px;
    /* less condensed on wider screens */
    max-width: 1480px;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 720px){
  .cp-main{ padding: 22px; }
}

.cp-title {
    font-size: 30px;
    font-weight: 850;
    letter-spacing: .2px;
    margin-bottom: 25px;
}

/* In case any pages use a generic page-title class */
.page-title{
  font-size: 30px;
  font-weight: 850;
  letter-spacing: .2px;
  margin-bottom: 18px;
}

/* Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

/* Cards */
.card {
    background: #1e293b;
    border: 1px solid #1f2937;
    border-radius: 12px;
    padding: 20px;
}

.card h3 {
    margin-top: 0;
    font-size: 14px;
    color: #aaa;
    margin-bottom: 15px;
}

/* ---------------------------------
   Manage Organisation (Management)
---------------------------------- */
.flash-ok{ color: rgba(120, 255, 200, .95); margin-bottom: 10px; }
.flash-err{ color: rgba(255, 120, 120, .95); margin-bottom: 10px; }

.mgorg-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
@media (max-width: 980px){ .mgorg-grid{ grid-template-columns: 1fr; } }

/* Manage Organisation: keep the org selector card spaced from the grid below */
.mgorg-select-card{ margin-bottom: 18px; }

/* Prevent cards from visually "touching" on tight layouts */
.mgorg-grid > .card{ height: fit-content; }

.mgorg-hero{ border-radius: 16px; overflow:hidden; border: 1px solid rgba(255,255,255,.06); }
.mgorg-hero-banner{ height: 150px; background: rgba(20,24,34,.55); }
.mgorg-hero-banner img{ width:100%; height:100%; object-fit: cover; display:block; }
.mgorg-hero-row{ display:flex; gap: 12px; align-items:center; padding: 12px; background: rgba(14,18,27,.65); }
.mgorg-hero-logo{ width:56px; height:56px; border-radius: 14px; object-fit: cover; border: 2px solid rgba(255,255,255,.08); background: rgba(255,255,255,.05); }
.mgorg-hero-meta{ display:flex; flex-direction:column; gap: 2px; min-width:0; }
.mgorg-hero-name{ font-weight: 700; font-size: 16px; line-height: 1.2; }
.mgorg-hero-slug{ font-size: 12px; color: rgba(167,176,198,.85); }

.mgorg-row{ display:flex; gap: 12px; flex-wrap: wrap; align-items:center; }
.mgorg-row .mgorg-select{ width: auto; flex: 1 1 260px; }
.mgorg-field{ display:flex; flex-direction:column; gap: 6px; margin-top: 10px; }
.mgorg-field label{ font-size: 12px; color: rgba(167,176,198,.9); }

.mgorg-input, .mgorg-textarea, .mgorg-select{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(244,247,255,.95);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
}
.mgorg-select{ min-width: 240px; max-width: 100%; }
.mgorg-textarea{ min-height: 110px; resize: vertical; }

.mgorg-btn{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(244,247,255,.95);
  border-radius: 12px;
  padding: 9px 12px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.mgorg-btn:hover{ background: rgba(255,255,255,.09); }

.mgorg-btn.primary{
  background:#e11d2e;
  border-color:#e11d2e;
  color:#fff;
}
.mgorg-btn.danger{
  background: rgba(225,29,46,.15);
  border-color: rgba(225,29,46,.45);
  color:#fff;
}
.mgorg-btn.danger:hover{ background: rgba(225,29,46,.22); }

.mgorg-hint{ font-size: 12px; color: rgba(167,176,198,.85); margin-top: 6px; line-height: 1.45; }
.mgorg-pill{ display:inline-flex; align-items:center; gap:6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); }

.mgorg-muted{ color: rgba(167,176,198,.9); line-height: 1.5; }

.mgorg-hr{ border:0; border-top:1px solid rgba(255,255,255,.07); margin: 14px 0; }
.mgorg-admin-title{ margin:0 0 6px; }

/* small spacing helpers (kept local to manage-org markup) */
.mgorg-mt-6{ margin-top: 6px; }
.mgorg-mt-10{ margin-top: 10px; }
.mgorg-mt-12{ margin-top: 12px; }
.mgorg-mt-14{ margin-top: 14px; }
.mgorg-ml-8{ margin-left: 8px; }

/* Key value rows */
.kv {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.kv span {
    color: #888;
}

.kv strong {
    font-weight: 600;
}

/* Buttons */
.actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.a-btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    background: #111827;
    border: 1px solid #1f2937;
    color: #ccc;
    transition: 0.2s;
}

.a-btn:hover {
    background: #1e293b;
}

.a-btn.primary {
    background: #e11d2e;
    border-color: #e11d2e;
    color: white;
}

/* ---------------------------
   Global Search (Topbar)
---------------------------- */
.cp-search-wrap{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cp-search-input{
  width: 320px;
  max-width: 46vw;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  outline: none;
}

.cp-search-input::placeholder{
  color: rgba(255,255,255,.45);
}

.cp-search-input:focus{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}

/* Dropdown */
#searchDropdown{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 380px;
  max-width: 70vw;
  background: #0f172a; /* close to your dashboard dark card */
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  z-index: 9999;
}

.cp-search-item{
  display: block;
  padding: 12px 12px;
  text-decoration: none;
  color: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.cp-search-item:last-child{
  border-bottom: none;
}

.cp-search-item:hover{
  background: rgba(255,255,255,.06);
}

.cp-search-title{
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}

.cp-search-meta{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

.cp-search-empty{
  padding: 12px;
  color: rgba(255,255,255,.55);
  font-size: 13px;
}

/* ================================= */
/* Overview page: Player card extras */
/* ================================= */

.empty-state{
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.10);
  background: rgba(17,24,39,.35);
  color: rgba(167,176,198,.92);
  font-size: 13px;
  line-height: 1.45;
}

.player-card .player-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* Overview title (dashboard) */
.welcome-title{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .2px;
}
.welcome-title .welcome-name{
  color: rgba(234,240,255,.98);
  text-shadow: 0 0 18px rgba(225,29,46,.20);
}

/* Player card header layout (shared across pages) */
.player-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

/* Shared "picture" frame (used for avatar + rank badge) */
.pf-frame{
  width:56px;
  height:56px;
  border-radius:14px;
  padding:2px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 90% at 25% 10%, rgba(225,29,46,.18), transparent 55%),
    rgba(17,24,39,.35);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 10px 30px rgba(0,0,0,.45);
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pf-frame img{
  width:100%;
  height:100%;
  border-radius: 12px;
  object-fit: cover;
  display:block;
}
.pf-frame.pf-rank img{
  object-fit: contain;
  padding: 6px;
}

.player-avatar{
  width:100%;
  height:100%;
  border-radius: 12px;
  object-fit: cover;
  border:none;
  flex:0 0 auto;
}

.player-title{ min-width:0; }

.player-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.player-card .player-title h3{
  margin-bottom: 6px;
}

.player-card .player-name{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2px;
}

.player-sub{
  margin-top: 6px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.embark-chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(17,24,39,.35);
  color: rgba(234,240,255,.92);
  font-size: 12px;
  line-height: 1;
}
.embark-chip strong{ font-weight: 800; }
.embark-label{
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(167,176,198,.95);
}

.rank-badge{
  image-rendering: auto;
}

.elo-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 10px;
}

.pc-metrics{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.elo-box{
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(17,24,39,.35);
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}

.elo-label{
  font-size: 11px;
  color: rgba(167,176,198,.9);
  font-family: var(--mono);
  margin-bottom: 6px;
}

.elo-value{
  font-size: 20px;
  font-weight: 800;
}

.badges{
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.badges-head{
  display:flex;
  align-items:baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  margin-bottom: 10px;
}

.muted{ color: rgba(167,176,198,.9); }

.badge-row{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge-row-ghost{
  gap: 10px;
  margin-bottom: 10px;
}

.badge-slot{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.12);
  background: rgba(17,24,39,.25);
}

.badge-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(225,29,46,.30);
  background: rgba(225,29,46,.12);
  color: rgba(234,240,255,.96);
  font-size: 12px;
  white-space: nowrap;
}

.badge-empty{
  color: rgba(167,176,198,.92);
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 980px){
  .elo-grid{ grid-template-columns: 1fr; }
  .pc-metrics{ grid-template-columns: 1fr; }
}

/* =====================================================
   ORGANISATIONS PAGE
   ===================================================== */

.org-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 1200px) {
  .org-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .org-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .org-grid { grid-template-columns: 1fr; }
}

.org-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 230px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  box-shadow: 0 10px 35px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Verified organisation badge + popout */
.verify-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--accent);
  filter: drop-shadow(0 0 10px rgba(225,29,46,.35));
  cursor: default;
}
.verify-badge svg{ width: 18px; height: 18px; display:block; }
.verify-badge img{ width: 18px; height: 18px; display:block; }

.verify-pop{
  position: fixed;
  z-index: 9999;
  width: 360px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 90% at 25% 10%, rgba(225,29,46,.22), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    rgba(14,20,36,.92);
  box-shadow: 0 22px 70px rgba(0,0,0,.70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .14s ease, transform .14s ease;
  pointer-events: none;
}
.verify-pop.show{ opacity: 1; transform: translateY(0); pointer-events: auto; }

.verify-pop::before{
  content: "";
  position: absolute;
  top: 26px;
  width: 12px;
  height: 12px;
  background: rgba(14,20,36,.92);
  border-left: 1px solid rgba(255,255,255,.10);
  border-top: 1px solid rgba(255,255,255,.10);
  transform: rotate(45deg);
}
.verify-pop[data-side="right"]::before{ left: -6px; }
.verify-pop[data-side="left"]::before{ right: -6px; transform: rotate(225deg); }

.verify-pop-title{
  display:flex;
  align-items:center;
  gap: 12px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .2px;
}
.verify-pop-badge{ color: var(--accent); display:inline-flex; }
.verify-pop-badge svg{ width: 20px; height: 20px; display:block; }
.verify-pop-badge img{ width: 20px; height: 20px; display:block; }

.verify-pop-sep{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 14px 0;
}
.verify-pop-row{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(234,240,255,.92);
  font-size: 14px;
}
.verify-pop-check{
  display:inline-flex;
  width: 22px;
  height: 22px;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
}
.verify-pop-link{
  display:inline-block;
  margin-top: 14px;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  font-size: 14px;
}
.verify-pop-link:hover{ color: var(--accent2); }


.org-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

.org-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(12px);
  transform: scale(1.08);
  opacity: .9;
}

.org-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.7));
}

.org-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.org-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.org-header .org-logo{
  margin: 0 0 12px 0;
}

.org-logo {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  object-fit: cover;
  margin: 4px auto 6px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.3);
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}

.org-name {
  font-size: 18px;
  font-weight: 800;
  margin-top: 8px;
  letter-spacing: .3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}


.org-sub {
  font-size: 12px;
  opacity: .8;
  margin-top: 6px;
}

.org-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

.org-btn {
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  transition: all .2s ease;
}

.org-btn:hover {
  background: rgba(255,255,255,.12);
}

.org-btn.primary {
  background: rgba(255,255,255,.12);
}

.org-btn.primary:hover {
  background: rgba(255,255,255,.2);
}

/* Loading Spinner */
.org-load {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.org-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: rgba(255,255,255,.85);
  animation: orgSpin 1s linear infinite;
}

@keyframes orgSpin {
  to { transform: rotate(360deg); }
}

.empty-state {
  grid-column: 1 / -1;
  padding: 18px;
  text-align: center;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.15);
  background: rgba(0,0,0,.2);
  opacity: .85;
}

/* FORCE verified badge size */
.verify-badge {
  display: inline-flex !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex: 0 0 18px !important;
  overflow: hidden !important;
}

.verify-badge svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: block !important;
}

/* If the badge is rendered as an <img> (SVG file), hard-enforce the same size.
   This prevents the SVG's intrinsic dimensions from exploding the layout. */
.verify-badge img{
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: block !important;
}

.verify-pop-badge img{
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  display: block !important;
}

/* =============================
   Notifications + Push settings
   (appended to avoid touching existing styles)
============================= */

.notif-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 12px; }
.notif-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.notif-filters{ display:flex; gap:8px; }
.a-btn.is-on{ border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.10); }
.notif-list{ display:flex; flex-direction:column; gap:10px; }
.notif-empty{ color: rgba(167,176,198,.9); padding: 10px 0; }

.notif-item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.14);
  cursor: pointer;
}
.notif-item.is-unread{ border-color: rgba(255,255,255,.12); background: rgba(0,0,0,.22); }
.notif-title{ font-weight: 700; }
.notif-body{ color: rgba(167,176,198,.9); margin-top: 4px; line-height: 1.4; }
.notif-meta{ color: rgba(167,176,198,.65); margin-top: 8px; font-size: 12px; }
.notif-mark{ flex: 0 0 auto; }
.notif-cta{ display:flex; flex-direction:column; gap:8px; flex: 0 0 auto; }
.notif-del{ flex: 0 0 auto; }

.pref-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 10px 0; }
.pref-title{ font-weight: 700; }
.pref-sub{ color: rgba(167,176,198,.85); font-size: 13px; line-height: 1.4; }

/* Toggle switch */
.switch{ position: relative; display: inline-block; width: 52px; height: 30px; }
.switch input{ opacity: 0; width: 0; height: 0; }
.slider{
  position: absolute; cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,.10);
  transition: .2s;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
}
.slider:before{
  position: absolute; content: "";
  height: 22px; width: 22px;
  left: 4px; top: 3px;
  background: rgba(255,255,255,.85);
  transition: .2s;
  border-radius: 999px;
}
.switch input:checked + .slider{ background: rgba(120, 255, 200, .20); border-color: rgba(120, 255, 200, .35); }
.switch input:checked + .slider:before{ transform: translateX(22px); }

/* Sidebar unread badge */
.nav-badge{
  margin-left: auto;
  min-width: 22px;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.95);
  background: rgba(225,29,46,.85);
  border: 1px solid rgba(255,255,255,.10);
}

/* Instant toast notifications */
.toast-stack{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast{
  width: 360px;
  max-width: calc(100vw - 36px);
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 90% at 25% 10%, rgba(225,29,46,.20), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    rgba(14,20,36,.92);
  box-shadow: 0 22px 70px rgba(0,0,0,.70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: auto;
  cursor: pointer;
}
.toast.show{ opacity: 1; transform: translateY(0); }

.toast-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.toast-title{ font-weight: 900; font-size: 14px; letter-spacing: .2px; }
.toast-time{ font-size: 12px; color: rgba(167,176,198,.70); }
.toast-body{ margin-top: 6px; font-size: 13px; color: rgba(234,240,255,.92); line-height: 1.35; }
.toast-actions{ margin-top: 10px; display:flex; gap:10px; }
.toast-link{ color: rgba(255,255,255,.60); text-decoration: none; font-size: 13px; }
.toast-link:hover{ color: var(--accent2); }

/* =============================
   Tournament / Event pages UI
   ============================= */

.evt-list{ display:flex; flex-direction:column; gap: 10px; }

.evt-item{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(17,24,39,.35);
  border-radius: 14px;
  padding: 12px;
}

.evt-item-top{ display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.evt-item-main{ min-width:0; }
.evt-item-title{ font-weight: 850; font-size: 18px; line-height: 1.2; word-break: break-word; }
.evt-item-meta{ margin-top: 6px; color: rgba(167,176,198,.92); font-size: 13px; line-height: 1.4; display:flex; flex-direction:column; gap: 4px; }
.evt-meta-top{ display:flex; align-items:center; }
.evt-meta-bottom{ display:flex; align-items:center; flex-wrap:wrap; gap: 0; }
.evt-item-actions{ display:flex; gap: 10px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }

/* Upcoming tournaments (dashboard) */
.evt-orgline{ display:inline-flex; align-items:center; gap: 10px; }
.evt-org-logo{
  width: 22px;
  height: 22px;
  border-radius: 7px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.evt-org-name{ font-weight: 800; color: rgba(231,236,248,.95); }
.evt-sep{ padding: 0 6px; color: rgba(167,176,198,.55); }

/* Dashboard teams list (match upcoming tournaments card styling) */
.team-list{ display:flex; flex-direction:column; gap: 10px; }
.team-item{
  background: rgba(30,40,58,.55);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 14px 14px;
}
.team-item-top{ display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.team-item-main{ min-width:0; }
.team-item-actions{ display:flex; justify-content:flex-end; align-items:center; }

.team-head{ display:flex; align-items:center; gap: 12px; min-width:0; }
.team-logo{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
}
.team-title-wrap{ min-width:0; }
.team-title-row{ display:flex; align-items:center; gap: 10px; flex-wrap:wrap; }
.team-title{ font-weight: 850; font-size: 16px; line-height: 1.2; word-break: break-word; color: rgba(240,244,255,.98); }
.team-meta{ margin-top: 4px; color: rgba(167,176,198,.92); font-size: 13px; }

.team-role{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.team-role.owner{ color: rgba(255, 225, 170, .95); border-color: rgba(255, 225, 170, .22); background: rgba(255, 225, 170, .08); }
.team-role.captain{ color: rgba(189,221,255,.95); border-color: rgba(189,221,255,.22); background: rgba(189,221,255,.08); }
.team-role.member{ color: rgba(196,236,214,.95); border-color: rgba(196,236,214,.20); background: rgba(196,236,214,.07); }

@media (max-width: 760px){
  .team-item-top{ align-items:flex-start; }
  .team-item-actions{ width:100%; justify-content:flex-start; }
  .team-item-actions .mgorg-btn{ width:100%; }
}

.evt-status{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(231,236,248,.92);
}
.evt-status::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: .9;
}
.evt-status.pending{ color: var(--accent2); border-color: rgba(255,59,74,.35); background: rgba(255,59,74,.10); }
.evt-status.approved{ color: rgba(196,236,214,.95); border-color: rgba(196,236,214,.25); background: rgba(196,236,214,.08); }
.evt-status.checked_in{ color: rgba(189,221,255,.95); border-color: rgba(189,221,255,.22); background: rgba(189,221,255,.08); }
.evt-status.waitlist{ color: rgba(255,225,170,.95); border-color: rgba(255,225,170,.22); background: rgba(255,225,170,.08); }

/* Make the dashboard "View" button align visually with the row height */
.evt-view{ padding: 10px 16px; }

.evt-details-pills{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }

.evt-inline-panel{
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.12);
  background: rgba(14,18,27,.35);
}

/* Event page layout helpers (avoid inheriting Manage Organisation grid rules) */
.event-page .evt-head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 14px; flex-wrap:wrap; }
.event-page .evt-head-main{ min-width: 260px; flex: 1 1 520px; }
.event-page .evt-head-actions{ display:flex; gap: 10px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }

/* Breathing room between stacked sections */
.event-page .mgorg-card{ margin-bottom: 18px; }
.event-page .evt-grid{ margin-top: 18px; }
.event-page .evt-grid > .card{ margin-bottom: 0; } /* grid already has gap */

/* Forms: restore sensible label/input spacing (prevent “touching”) */
.event-page .mgorg-label{
  display:block;
  margin: 0 0 8px;
}
.event-page .mgorg-select{
  margin-top: 0;
}

/* Buttons on event page: slightly smaller & consistent */
.event-page .mgorg-btn{
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.15;
}
.event-page .mgorg-btn.primary{ padding: 10px 16px; }
.event-page .evt-item-actions .mgorg-btn{ padding: 10px 16px; }

/* Inline roster editor: spacing between title/hint and fields */
.event-page .evt-inline-panel .mgorg-hint{ margin-top: 10px; }
.event-page .evt-inline-panel form{ margin-top: 10px; }

/* Two-column section grid (Registration | Registered teams) */
.event-page .evt-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; align-items:start; }
@media (max-width: 980px){ .event-page .evt-grid{ grid-template-columns: 1fr; } }

/* Make sure nothing from other pages can "pull" buttons out of cards */
.event-page .evt-card{ position: relative; overflow: hidden; }
.event-page form.evt-form{ display:block; width:100%; max-width:100%; }
.event-page form.evt-form *{ max-width: 100%; }

.event-page .evt-form-grid{ display:grid; grid-template-columns: 1fr; gap: 14px; }
.event-page .evt-field{ min-width:0; }
.event-page .evt-roster-wrap{ grid-column: 1 / -1; }
.event-page .evt-form .mgorg-select{ min-width: 0; }

.event-page .evt-roster-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
@media (max-width: 760px){ .event-page .evt-roster-grid{ grid-template-columns: 1fr; } }

.event-page .evt-roster-hint{ grid-column: 1 / -1; }

.event-page .evt-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 12px;
  width:100%;
  position: static;
  float:none;
}

@media (max-width: 560px){
  .event-page .evt-actions{ justify-content:stretch; }
  .event-page .evt-actions .mgorg-btn{ width:100%; }
}







/* =========================================================
   SITE-WIDE BUTTON SYSTEM (FINAL OVERRIDES)
   Goal: unify ALL buttons across dashboard/profile/teams/etc
   - Default look: dark glass pill (matches Teams tabs)
   - No full width unless explicitly requested
   - Legacy classes (.a-btn/.org-btn/.mgorg-btn) inherit the same base
   ========================================================= */

/* Base pill (glass) applied to all common button classes + native buttons */
:where(.btn, .a-btn, .org-btn, .mgorg-btn, button, input[type="submit"], input[type="button"], input[type="reset"]){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(234,240,255,.92);
  font-family: var(--sans);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.05;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  width: auto;
  max-width: 100%;
  box-shadow: 0 12px 34px rgba(0,0,0,.25);
  transition: transform .06s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

:where(.btn, .a-btn, .org-btn, .mgorg-btn, button, input[type="submit"], input[type="button"], input[type="reset"]):hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 16px 44px rgba(0,0,0,.30);
}

:where(.btn, .a-btn, .org-btn, .mgorg-btn, button, input[type="submit"], input[type="button"], input[type="reset"]):active{
  transform: translateY(1px);
}

/* Explicit full-width only when asked */
.btn.block,
.a-btn.block,
.org-btn.block,
.mgorg-btn.block{ width: 100% !important; }

/* Sizes */
.btn.sm, .a-btn.sm, .org-btn.sm, .mgorg-btn.sm{ padding: 9px 14px; font-size: 13px; }
.btn.mini, .a-btn.mini, .org-btn.mini, .mgorg-btn.mini,
.a-btn.small{ padding: 8px 12px; font-size: 13px; }

/* Primary (red) */
.btn.primary,
.a-btn.primary,
.org-btn.primary,
.mgorg-btn.primary{
  border-color: rgba(225,29,46,.55);
  background: linear-gradient(180deg, rgba(225,29,46,.95), rgba(155,14,26,.95));
  box-shadow: 0 14px 38px rgba(225,29,46,.22);
  color: #fff;
}
.btn.primary:hover,
.a-btn.primary:hover,
.org-btn.primary:hover,
.mgorg-btn.primary:hover{ box-shadow: 0 16px 48px rgba(225,29,46,.30); }

/* Danger (outlined red/pink like your Leave button) */
.btn.danger,
.a-btn.danger,
.org-btn.danger,
.mgorg-btn.danger{
  border-color: rgba(255,77,94,.38);
  background: rgba(255,77,94,.10);
  color: rgba(255,208,212,.95);
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
}
.btn.danger:hover,
.a-btn.danger:hover,
.org-btn.danger:hover,
.mgorg-btn.danger:hover{ background: rgba(255,77,94,.14); border-color: rgba(255,77,94,.48); }

/* Ghost */
.btn.ghost,
.a-btn.ghost,
.org-btn.ghost,
.mgorg-btn.ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  box-shadow: none;
}
.btn.ghost:hover,
.a-btn.ghost:hover,
.org-btn.ghost:hover,
.mgorg-btn.ghost:hover{ border-color: rgba(225,29,46,.35); background: rgba(255,255,255,.06); }

/* Disabled */
.btn:disabled, .btn[disabled],
.a-btn:disabled, .a-btn[disabled],
.org-btn:disabled, .org-btn[disabled],
.mgorg-btn:disabled, .mgorg-btn[disabled],
button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled{
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Tabs: use same pill style + active state */
.tabs{ gap: 12px; }
.tab-btn{ opacity: .9; }
.tab-btn.active{
  opacity: 1;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
}

/* Prevent any legacy full-width buttons in control panel */
.dashboard .a-btn,
.dashboard .org-btn{ width: auto; }


/* Strong override for legacy button classes (beats earlier .a-btn rules) */
.btn,
.a-btn,
.org-btn,
.mgorg-btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(234,240,255,.92);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.05;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  width: auto;
  box-shadow: 0 12px 34px rgba(0,0,0,.25);
  transition: transform .06s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.btn:hover,
.a-btn:hover,
.org-btn:hover,
.mgorg-btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 16px 44px rgba(0,0,0,.30);
}
.btn.primary,
.a-btn.primary,
.org-btn.primary,
.mgorg-btn.primary{
  border-color: rgba(225,29,46,.55);
  background: linear-gradient(180deg, rgba(225,29,46,.95), rgba(155,14,26,.95));
  box-shadow: 0 14px 38px rgba(225,29,46,.22);
  color: #fff;
}
.btn.danger,
.a-btn.danger,
.org-btn.danger,
.mgorg-btn.danger{
  border-color: rgba(255,77,94,.38);
  background: rgba(255,77,94,.10);
  color: rgba(255,208,212,.95);
}
.btn.ghost,
.a-btn.ghost,
.org-btn.ghost,
.mgorg-btn.ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  box-shadow: none;
}



/* ===== Team title row (avatar + name + pills) ===== */
.team-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
}
.team-avatar{
  width:42px;
  height:42px;
  /* Rounded-square (not circle) */
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.team-name{
  font-size: 18px;
  color: rgba(234,240,255,.96);
}
.team-subrow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}
.team-row .team-title{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
/* Ensure dashboard/team cards never stretch buttons full width */
.dashboard .a-btn, .dashboard .org-btn, .teams-page .btn{ width:auto; }

/* ===== Teams page card layout ===== */
.team-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.team-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.team-text{ min-width:0; }
.team-name-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.team-name{
  font-size:22px;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.1;
}
.team-members{
  color: rgba(215,224,245,.88);
  font-weight:700;
}

/* ===== Dashboard team mini cards (align with logo) ===== */
.dash-team-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.dash-team-name-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}
.dash-team-name{
  font-weight:900;
  color: rgba(234,240,255,.96);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 420px;
}
.dash-team-members{ color: rgba(215,224,245,.88); font-weight:700; }

/* Slightly larger team avatar in Teams page cards */
.teams-page .team-avatar{
  width:42px;
  height:42px;
  border-radius:16px;
}