/*
  Branding note: movetoslack.com doesn't expose its compiled CSS to a
  plain fetch (it's bundled/rendered client-side), so these are NOT the
  site's exact hex values -- they're a close approximation built from
  Slack's own public brand palette (movetoslack.com is a Slack-migration
  product, styled in the same family: deep aubergine + Slack green/blue
  accents on a clean light surface). Swap the variables below for the
  real values any time you have them (e.g. from browser devtools on the
  live site) -- nothing else in this file needs to change.
*/
:root {
  --brand-aubergine: #3F0E40;
  --brand-aubergine-dark: #2b0a2c;
  --brand-green: #2EB67D;
  --brand-blue: #1264A3;
  --brand-yellow: #ECB22E;
  --brand-red: #E01E5A;

  --bg: #f4f5f7;
  --surface: #ffffff;
  --border: #e2e2e6;
  --text: #1d1c1d;
  --text-muted: #616061;
  --radius: 10px;

  /* Extra tones the theme switcher (authentication_services/theme.py)
     injects per-theme via base.html's second <style> block - defaults
     here match the "movetoslack" theme so this file still looks right
     standalone (e.g. before that block loads, or outside the full app).
     Added because several rules below used to hardcode a light-mode-only
     hex value here instead (white button backgrounds, light pastel
     badges, a light hover tint, etc.) - those looked fine on the
     original light default but turned into glaring white/pale boxes on
     the dark and orange themes since only --bg/--surface/--border/--text
     were theme-aware before. */
  --surface2: #f0f0f3;
  --surface3: #e8e8ec;
  --good-bg: #e5f7ee;
  --warn-bg: #fdf3dc;
  --bad-bg: #fce8ee;
  --accent-bg: #eaf2fb;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
}

a { color: var(--brand-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  background: var(--brand-aubergine);
  color: #fff;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.2px;
}

.brand .logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--brand-green), var(--brand-blue));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
}

.brand .arrow { color: var(--brand-yellow); font-weight: 900; }

.topbar nav a {
  color: #eadfe8;
  margin-left: 22px;
  font-size: 14px;
  font-weight: 600;
}
.topbar nav a:hover { color: #fff; }

.container {
  max-width: 1080px;
  margin: 32px auto;
  padding: 0 24px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 0 0 14px; }
.subtitle { color: var(--text-muted); font-size: 14px; margin: 0 0 20px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
tr:hover td { background: var(--surface2); }

.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--brand-aubergine); color: #fff; }
.btn-primary:hover { background: var(--brand-aubergine-dark); text-decoration: none; }
.btn-outline { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--brand-blue); color: var(--brand-blue); text-decoration: none; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge-ok { background: var(--good-bg); color: var(--brand-green); }
.badge-missing { background: var(--bad-bg); color: var(--brand-red); }
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.flash-success { background: var(--good-bg); color: var(--brand-green); border: 1px solid var(--brand-green); }
.flash-error { background: var(--bad-bg); color: var(--brand-red); border: 1px solid var(--brand-red); }

.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.form-row input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}
.form-row .hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.provider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .provider-grid { grid-template-columns: 1fr; } }

.connect-links a { margin-right: 10px; font-size: 12px; }
.text-muted { color: var(--text-muted); }
code { background: var(--surface2); color: var(--text); padding: 2px 6px; border-radius: 4px; font-size: 12px; }

.email-cell{
    max-width:220px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.text-center{
    text-align:center;
}

.connect-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px;
}

.btn-link{
    display:block;
    padding:5px 8px;
    border:1px solid var(--border);
    border-radius:6px;
    text-align:center;
    text-decoration:none;
    background:var(--surface2);
    font-size:12px;
    color:var(--text);
}

.btn-link:hover{
    background:var(--surface3);
}

.action-buttons{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.action-buttons button{
    padding:6px 10px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-size:12px;
}

/* NOTE: these two rules only match elements with class="btn-primary" /
   "btn-success" ALONE (no "btn" class) - the bulk "Send Source Consent" /
   "Send Destination Consent" buttons on admin_dashboard.html. Left as
   fixed blue/green on purpose (same "deliberately-fixed action color"
   convention as the per-user Reset/Delete buttons - see theme.py's own
   docstring) rather than theme-driven, so they don't collide with (or
   get confused with) the theme-aware ".btn.btn-primary" rule above,
   which uses --brand-aubergine for buttons that have BOTH classes. */
.btn-primary{
    background:#0d6efd;
    color:#fff;
}

.btn-success{
    background:#198754;
    color:#fff;
}

.status{
    display:block;
    font-size:11px;
    color:var(--text-muted);
}

.badge{
    font-size:18px;
}

table{
    width:100%;
    table-layout:auto;
}

th,td{
    padding:10px;
    vertical-align:middle;
}