/*
 * Synder Design System — extracted from live app (April 2026)
 * Use this in all prototypes to match Synder's actual look.
 *
 * Usage: <link rel="stylesheet" href="synder-design-system.css">
 * Then use classes like: .sds-btn-primary, .sds-card, .sds-badge-success, etc.
 */

/* ─── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── CSS VARIABLES (Design Tokens) ─────────────────────── */
:root {
  /* Primary */
  --sds-blue: #0053CC;              /* rgb(0, 83, 204) — primary brand, buttons, links */
  --sds-blue-link: #428BCA;         /* rgb(66, 139, 202) — secondary link color */
  --sds-blue-ios: #007AFF;          /* rgb(0, 122, 255) — used on some interactive elements */
  
  /* Neutrals */
  --sds-black: #1A1B24;            /* rgb(26, 27, 36) — primary text, headings */
  --sds-dark: #2F303A;             /* rgb(47, 48, 58) — secondary text */
  --sds-gray-dark: #555555;        /* rgb(85, 85, 85) — body text */
  --sds-gray-mid: #6B778C;         /* rgb(107, 119, 140) — muted text */
  --sds-gray-light: #818EA5;       /* rgb(129, 142, 165) — placeholders */
  --sds-gray-border: #C8C7CC;      /* rgb(200, 199, 204) — borders, dividers */
  --sds-gray-bg: #F6F6F6;          /* rgb(246, 246, 246) — sidebar bg, card bg */
  --sds-gray-bg-light: #FAFAFA;    /* rgb(250, 250, 250) — page background */
  --sds-white: #FFFFFF;
  
  /* Status */
  --sds-green: #1F8940;            /* rgb(31, 137, 64) — success, connected */
  --sds-orange: #E18013;           /* rgb(225, 128, 19) — warning, CTA */
  --sds-red: #D74A4A;              /* rgb(215, 74, 74) — error, danger */
  --sds-red-dark: #A72222;         /* rgb(167, 34, 34) — error text on light bg */
  --sds-red-bg: #FDEDE9;           /* rgb(253, 237, 233) — error badge bg */
  --sds-blue-accent: #3C4EAC;      /* rgb(60, 78, 172) — accent */
  
  /* Semantic (map to status) */
  --sds-success: var(--sds-green);
  --sds-warning: var(--sds-orange);
  --sds-danger: var(--sds-red);
  --sds-info: var(--sds-blue);
  
  /* Typography */
  --sds-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sds-font-size-xs: 8.75px;     /* small labels */
  --sds-font-size-sm: 14px;       /* body text (primary) */
  --sds-font-size-md: 15px;       /* slightly larger body */
  --sds-font-size-lg: 18px;       /* section headers */
  --sds-font-size-xl: 20px;       /* page titles */
  --sds-font-size-xxl: 24px;      /* large headings */
  --sds-font-size-hero: 26px;     /* hero text */
  
  --sds-font-weight-light: 300;
  --sds-font-weight-regular: 400;
  --sds-font-weight-medium: 500;
  --sds-font-weight-bold: 900;    /* Synder uses 900 for bold, not 700 */
  
  /* Spacing */
  --sds-space-xs: 4px;
  --sds-space-sm: 8px;
  --sds-space-md: 12px;
  --sds-space-lg: 16px;
  --sds-space-xl: 20px;
  --sds-space-xxl: 24px;
  
  /* Borders */
  --sds-radius-sm: 3px;
  --sds-radius-md: 4px;           /* most common */
  --sds-radius-lg: 5px;
  --sds-radius-pill: 10px;        /* badge pill */
  --sds-radius-circle: 50%;
  --sds-border: 1px solid var(--sds-gray-border);
  
  /* Shadows */
  --sds-shadow-sm: 2px 2px 6px -4px rgb(153, 153, 153);
  --sds-shadow-sidebar: 10px 0px 14px 0px rgba(0, 0, 0, 0);
  
  /* Layout */
  --sds-sidebar-width: 230px;
  --sds-navbar-height: 59px;
}

/* ─── BASE ──────────────────────────────────────────────── */
body.sds {
  font-family: var(--sds-font);
  font-size: var(--sds-font-size-sm);
  font-weight: var(--sds-font-weight-regular);
  color: var(--sds-black);
  background: var(--sds-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ─── TYPOGRAPHY ────────────────────────────────────────── */
.sds-h1 { font-size: var(--sds-font-size-hero); font-weight: var(--sds-font-weight-regular); color: var(--sds-black); }
.sds-h2 { font-size: var(--sds-font-size-xxl); font-weight: var(--sds-font-weight-regular); color: var(--sds-black); }
.sds-h3 { font-size: var(--sds-font-size-xl); font-weight: var(--sds-font-weight-light); color: var(--sds-black); }
.sds-h4 { font-size: var(--sds-font-size-lg); font-weight: var(--sds-font-weight-regular); color: var(--sds-black); }
.sds-body { font-size: var(--sds-font-size-sm); font-weight: var(--sds-font-weight-regular); color: var(--sds-gray-dark); }
.sds-body-md { font-size: var(--sds-font-size-md); font-weight: var(--sds-font-weight-regular); color: var(--sds-gray-dark); }
.sds-caption { font-size: var(--sds-font-size-xs); font-weight: var(--sds-font-weight-medium); color: var(--sds-gray-mid); }
.sds-muted { color: var(--sds-gray-mid); }

/* ─── LINKS ─────────────────────────────────────────────── */
.sds a, a.sds-link {
  color: var(--sds-blue);
  text-decoration: none;
  font-size: var(--sds-font-size-sm);
  font-weight: var(--sds-font-weight-regular);
}
.sds a:hover, a.sds-link:hover {
  text-decoration: underline;
  color: var(--sds-blue-link);
}

/* ─── BUTTONS ───────────────────────────────────────────── */
.sds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-family: var(--sds-font);
  font-size: var(--sds-font-size-sm);
  font-weight: var(--sds-font-weight-medium);
  border-radius: var(--sds-radius-md);
  border: none;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  gap: 6px;
}
.sds-btn:hover { opacity: 0.9; }

.sds-btn-primary {
  background: var(--sds-blue);
  color: var(--sds-white);
}
.sds-btn-warning {
  background: var(--sds-orange);
  color: var(--sds-white);
}
.sds-btn-danger {
  background: var(--sds-red);
  color: var(--sds-white);
}
.sds-btn-ghost {
  background: transparent;
  color: var(--sds-blue);
  padding: 8px 12px;
}
.sds-btn-ghost:hover { background: rgba(0, 83, 204, 0.06); }

/* ─── BADGES ────────────────────────────────────────────── */
.sds-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: var(--sds-font-weight-medium);
  border-radius: var(--sds-radius-sm);
  white-space: nowrap;
}
.sds-badge-success {
  background: #E8F5E9;
  color: var(--sds-green);
}
.sds-badge-danger {
  background: var(--sds-red-bg);
  color: var(--sds-red-dark);
}
.sds-badge-warning {
  background: #FFF3E0;
  color: var(--sds-orange);
}
.sds-badge-info {
  background: #E3F2FD;
  color: var(--sds-blue);
}
.sds-badge-pill {
  border-radius: var(--sds-radius-pill);
}
.sds-badge-count {
  background: #F44336;
  color: white;
  border-radius: var(--sds-radius-pill);
  min-width: 20px;
  text-align: center;
  font-size: 11px;
  padding: 1px 6px;
}

/* ─── LAYOUT ────────────────────────────────────────────── */
.sds-layout {
  display: flex;
  min-height: 100vh;
}

/* Navbar */
.sds-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--sds-navbar-height);
  background: var(--sds-white);
  border-bottom: var(--sds-border);
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Sidebar */
.sds-sidebar {
  width: var(--sds-sidebar-width);
  min-width: var(--sds-sidebar-width);
  background: var(--sds-gray-bg);
  border-right: var(--sds-border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sds-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: var(--sds-font-size-sm);
  color: var(--sds-black);
  text-decoration: none;
  transition: background 0.1s;
}
.sds-sidebar-item:hover { background: rgba(0, 0, 0, 0.04); }
.sds-sidebar-item.active { color: var(--sds-blue); font-weight: var(--sds-font-weight-medium); }

/* Main content */
.sds-main {
  flex: 1;
  padding: var(--sds-space-lg);
  background: var(--sds-white);
  min-width: 0;
}

/* ─── CARDS ─────────────────────────────────────────────── */
.sds-card {
  background: var(--sds-white);
  border: var(--sds-border);
  border-radius: var(--sds-radius-md);
  padding: var(--sds-space-lg);
  margin-bottom: var(--sds-space-md);
}
.sds-card-warning {
  background: #FFF8F0;
  border-color: #FFDDB5;
}
.sds-card-title {
  font-size: var(--sds-font-size-sm);
  font-weight: var(--sds-font-weight-medium);
  color: var(--sds-black);
  margin-bottom: var(--sds-space-sm);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ─── INFO ICON ─────────────────────────────────────────── */
.sds-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--sds-radius-circle);
  border: 1px solid var(--sds-gray-light);
  color: var(--sds-gray-light);
  font-size: 10px;
  font-weight: var(--sds-font-weight-medium);
  cursor: help;
}

/* ─── TOGGLE SWITCH ─────────────────────────────────────── */
.sds-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  background: #ccc;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}
.sds-toggle.on { background: var(--sds-blue); }
.sds-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: left 0.2s;
}
.sds-toggle.on::after { left: 18px; }

/* ─── TABLE ─────────────────────────────────────────────── */
.sds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sds-font-size-sm);
}
.sds-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: var(--sds-font-weight-medium);
  color: var(--sds-gray-dark);
  border-bottom: 2px solid var(--sds-gray-border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.sds-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--sds-gray-border);
  color: var(--sds-black);
}
.sds-table tr:hover td { background: var(--sds-gray-bg-light); }

/* ─── FORM ELEMENTS ─────────────────────────────────────── */
.sds-input {
  width: 100%;
  padding: 8px 12px;
  font-family: var(--sds-font);
  font-size: var(--sds-font-size-sm);
  border: var(--sds-border);
  border-radius: var(--sds-radius-md);
  outline: none;
  transition: border-color 0.15s;
}
.sds-input:focus { border-color: var(--sds-blue); }

.sds-select {
  padding: 8px 12px;
  font-family: var(--sds-font);
  font-size: var(--sds-font-size-sm);
  border: var(--sds-border);
  border-radius: var(--sds-radius-md);
  background: var(--sds-white);
  outline: none;
}

.sds-label {
  display: block;
  font-size: 12px;
  font-weight: var(--sds-font-weight-medium);
  color: var(--sds-gray-dark);
  margin-bottom: 4px;
}

/* ─── ALERTS / BANNERS ──────────────────────────────────── */
.sds-alert {
  padding: 12px 16px;
  border-radius: var(--sds-radius-md);
  font-size: var(--sds-font-size-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sds-space-lg);
}
.sds-alert-warning {
  background: #FFF3E0;
  border-left: 3px solid var(--sds-orange);
  color: var(--sds-orange);
}
.sds-alert-danger {
  background: var(--sds-red-bg);
  border-left: 3px solid var(--sds-red);
  color: var(--sds-red-dark);
}
.sds-alert-info {
  background: #E3F2FD;
  border-left: 3px solid var(--sds-blue);
  color: var(--sds-blue);
}
.sds-alert-success {
  background: #E8F5E9;
  border-left: 3px solid var(--sds-green);
  color: var(--sds-green);
}

/* ─── INTEGRATION ROW ───────────────────────────────────── */
.sds-integration-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.sds-integration-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--sds-radius-sm);
}
.sds-integration-name {
  flex: 1;
  font-size: var(--sds-font-size-sm);
  color: var(--sds-black);
}

/* ─── TOOLTIP ───────────────────────────────────────────── */
.sds-tooltip {
  position: relative;
}
.sds-tooltip-content {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--sds-black);
  color: var(--sds-white);
  padding: 8px 12px;
  border-radius: var(--sds-radius-md);
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
}
.sds-tooltip:hover .sds-tooltip-content { display: block; }

/* ─── UTILITIES ─────────────────────────────────────────── */
.sds-flex { display: flex; }
.sds-flex-between { display: flex; justify-content: space-between; align-items: center; }
.sds-flex-center { display: flex; align-items: center; }
.sds-gap-sm { gap: var(--sds-space-sm); }
.sds-gap-md { gap: var(--sds-space-md); }
.sds-gap-lg { gap: var(--sds-space-lg); }
.sds-mt-sm { margin-top: var(--sds-space-sm); }
.sds-mt-md { margin-top: var(--sds-space-md); }
.sds-mt-lg { margin-top: var(--sds-space-lg); }
.sds-mb-sm { margin-bottom: var(--sds-space-sm); }
.sds-mb-md { margin-bottom: var(--sds-space-md); }
.sds-mb-lg { margin-bottom: var(--sds-space-lg); }
.sds-text-blue { color: var(--sds-blue); }
.sds-text-green { color: var(--sds-green); }
.sds-text-orange { color: var(--sds-orange); }
.sds-text-red { color: var(--sds-red); }
.sds-text-muted { color: var(--sds-gray-mid); }
.sds-text-bold { font-weight: var(--sds-font-weight-bold); }
.sds-text-medium { font-weight: var(--sds-font-weight-medium); }
.sds-bg-light { background: var(--sds-gray-bg-light); }