/* =============================================================================
   INSARA Cal.com Custom CSS Overrides
   Self-hosted at cal.insara.ai

   Loaded via Nginx sub_filter injection into every Cal.com HTML response.
   Because this is injected INTO the page (not cross-origin), all selectors
   work normally — no iframe restrictions.
   ============================================================================= */

/* ── INSARA Brand Colors ──────────────────────────────────────────────────── */
:root {
  --cal-brand:          #08b6d4 !important;
  --cal-brand-emphasis: #0891b2 !important;
  --cal-brand-text:     #ffffff !important;
  --cal-brand-subtle:   rgba(8, 182, 212, 0.1) !important;
}

/* ── Avatar Enlargement (default ~24px → 96px) ────────────────────────────
   Cal.com renders avatars via Next.js <Image>, which wraps <img> in nested
   <span> containers with overflow:hidden. We must target both the img AND
   every ancestor wrapper to prevent clipping.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  --insara-avatar: 96px;
}

/* ── The image itself ── */
img.rounded-full,
[data-testid="avatar"] img {
  width:        var(--insara-avatar) !important;
  height:       var(--insara-avatar) !important;
  min-width:    var(--insara-avatar) !important;
  min-height:   var(--insara-avatar) !important;
  object-fit:   cover !important;
}

/* ── data-testid container ── */
[data-testid="avatar"] {
  width:        var(--insara-avatar) !important;
  height:       var(--insara-avatar) !important;
  min-width:    var(--insara-avatar) !important;
  min-height:   var(--insara-avatar) !important;
  overflow:     visible !important;
}

/* ── rounded-full element that IS the container ── */
.rounded-full {
  max-width:    unset !important;
  max-height:   unset !important;
}
.rounded-full.overflow-hidden,
.overflow-hidden.rounded-full {
  width:        var(--insara-avatar) !important;
  height:       var(--insara-avatar) !important;
  min-width:    var(--insara-avatar) !important;
  min-height:   var(--insara-avatar) !important;
  overflow:     visible !important;
}

/* ── Next.js <Image> wrapper spans — any span/div that directly contains
      a rounded-full img (covers 1-2 levels of nesting) ── */
span:has(> img.rounded-full),
div:has(>  img.rounded-full),
span:has(> span > img.rounded-full),
div:has(>  span > img.rounded-full),
span:has(> div  > img.rounded-full),
div:has(>  div  > img.rounded-full) {
  width:        var(--insara-avatar) !important;
  height:       var(--insara-avatar) !important;
  min-width:    var(--insara-avatar) !important;
  min-height:   var(--insara-avatar) !important;
  overflow:     visible !important;
  max-width:    unset !important;
  max-height:   unset !important;
}

/* ── Inline-styled wrappers (all common avatar sizes) ── */
[style*="width: 24px"].rounded-full, [style*="width:24px"].rounded-full,
[style*="width: 32px"].rounded-full, [style*="width:32px"].rounded-full,
[style*="width: 36px"].rounded-full, [style*="width:36px"].rounded-full,
[style*="width: 40px"].rounded-full, [style*="width:40px"].rounded-full,
[style*="width: 48px"].rounded-full, [style*="width:48px"].rounded-full,
[style*="width: 56px"].rounded-full, [style*="width:56px"].rounded-full,
[style*="width: 64px"].rounded-full, [style*="width:64px"].rounded-full {
  width:        var(--insara-avatar) !important;
  height:       var(--insara-avatar) !important;
  min-width:    var(--insara-avatar) !important;
  min-height:   var(--insara-avatar) !important;
  overflow:     visible !important;
}

/* ── HTML width attribute variants ── */
img.rounded-full[width="24"],
img.rounded-full[width="32"],
img.rounded-full[width="36"],
img.rounded-full[width="40"],
img.rounded-full[width="48"],
img.rounded-full[width="56"],
img.rounded-full[width="64"] {
  width:        var(--insara-avatar) !important;
  height:       var(--insara-avatar) !important;
}

/* ── Generic avatar class name selectors ── */
div[class*="avatar"],  span[class*="avatar"],
div[class*="Avatar"],  span[class*="Avatar"] {
  width:        var(--insara-avatar) !important;
  height:       var(--insara-avatar) !important;
  min-width:    var(--insara-avatar) !important;
  min-height:   var(--insara-avatar) !important;
  overflow:     visible !important;
}
div[class*="avatar"] img,  span[class*="avatar"] img,
div[class*="Avatar"] img,  span[class*="Avatar"] img {
  width:        var(--insara-avatar) !important;
  height:       var(--insara-avatar) !important;
  min-width:    var(--insara-avatar) !important;
  min-height:   var(--insara-avatar) !important;
}

/* ── Remove Cal.com Branding ──────────────────────────────────────────────── */

/* data-testid powered-by */
[data-testid="powered-by-cal"],
[data-testid="powered-by-calcom"] {
  display: none !important;
}

/* "Powered by Cal.com" link */
a[href*="cal.com"][target="_blank"] {
  display: none !important;
}

/* Footer/watermark containers that hold branding */
div[class*="poweredBy"],
div[class*="PoweredBy"],
div[class*="powered-by"],
span[class*="poweredBy"],
span[class*="PoweredBy"] {
  display: none !important;
}