/* Brand color defaults — change these to exact values if you have them */
:root {
  /* Dark background for header/navigation */
  --brand-dark-bg: 18 31 61;         /* #121f3d */
  --brand-dark-bg-hover: 12 24 48;   /* slightly darker hover */

  /* Brand accent (Orange) */
  --brand-accent: 255 143 0;         /* #ff8f00 */
  --brand-accent-dark: 204 114 0;    /* darker shade of accent */

  /* Text on dark bg (header) */
  --header-text: 255 255 255;
}

/* Apply header background and text color */
.site-header {
  background-color: rgb(var(--brand-dark-bg));
  color: rgb(var(--header-text));
}

.site-header a {
  color: rgb(var(--header-text));
}

.site-header a:hover {
  color: rgb(var(--header-text));
  /* or lighter shade if needed */
}

/* Use accent color for buttons, links, highlights */
.btn-accent {
  background-color: rgb(var(--brand-accent));
  color: white;
  border: none;
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  box-shadow: 0 8px 20px rgb(var(--brand-accent) / 0.35);
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}

.btn-accent:hover {
  background-color: rgb(var(--brand-accent-dark));
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgb(var(--brand-accent) / 0.45);
}

/* Accent for links */
.text-accent {
  color: rgb(var(--brand-accent));
}

.text-accent:hover {
  color: rgb(var(--brand-accent-dark));
}

/* Utilities */
.bg-header {
  background-color: rgb(var(--brand-dark-bg));
}

/*
  The .site-header sets a default link color of white.
  We need to override this for the nested flyout menu.
*/
.group\/item:hover .dropdown-flyout-item {
  color: #222; /* A dark gray color */
}
.group\/item:hover .dropdown-flyout-item:hover {
  background-color: #f3f4f6; /* Tailwind's slate-100 */
}
/* Logo + “Analytics” lockup styling */
.logo-lockup {
  display: inline-flex;
  align-items: center;
}

/* Adjust this to match your logo height */
.logo-img {
  height: 2rem;  /* ~32px; tweak up or down */
  width: auto;
}

/* The “Analytics” text next to it */
.logo-text {
  font-family: "Exo 2", sans-serif;
  font-weight: 600;
  color: rgb(var(--brand-accent)); /* your brand orange */
  font-size: 1.25rem;               /* tweak as needed */
  line-height: 1;
  margin-left: 0.5rem;              /* gives breathing space */
  white-space: nowrap;
}

/* Optional: adjust for small screens */
@media (max-width: 640px) {
  .logo-text {
    font-size: 1rem;
    margin-left: 0.3rem;
  }
}

/* Clamp card descriptions to 2 lines to keep cards even-height */
.card-desc {
  display: -webkit-box;
  line-clamp: 2; /* standard property for future support */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Modern card styling */
.card {
  border-radius: 1rem; /* ~rounded-2xl */
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(16, 24, 48, 0.08), 0 2px 8px rgba(16, 24, 48, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.06); /* slate-900 at low alpha */
  position: relative;
}
.card:hover { box-shadow: 0 16px 40px rgba(16,24,48,0.12), 0 4px 14px rgba(16,24,48,0.08); }
/* Remove orange top accent line on cards */
.card::before { content: none; display: none; }

/* Elevated variant */
.card-elevated { box-shadow: 0 16px 50px rgba(16,24,48,0.14), 0 6px 18px rgba(16,24,48,0.10); }
.card-gradient { background: radial-gradient(160% 80% at 0% 0%, rgb(var(--brand-dark-bg) / 0.08), transparent 50%), #fff; }

/* Section titles */
.section-title { font-weight: 800; letter-spacing: -.02em; }
.section-subtitle { color: #64748b; font-size: .9rem; }

/* KPI with icons */
.kpi {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: center;
}
.kpi-icon {
  width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: grid; place-items: center;
  background: linear-gradient(135deg, rgb(var(--brand-accent) / .12), rgb(var(--brand-dark-bg) / .12));
  border: 1px solid rgba(15,23,42,.06);
}
.kpi-icon svg { width: 1.25rem; height: 1.25rem; color: rgb(var(--brand-accent)); }

/* Animations */
.fade-in { animation: fade-in .4s ease-out both; }
.rise { animation: rise .45s ease-out both; }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise { from { transform: translateY(6px); opacity: .0 } to { transform: translateY(0); opacity: 1 } }

/* Chart containers */
.chart-wrap { border-radius: .75rem; overflow: hidden; }
.chart-toolbar { display:flex; align-items:center; gap:.5rem }
.chart-toolbar .input-modern { height: 2rem; padding: .25rem .5rem; }

/* Badges */
.badge { font-size:.7rem; padding:.2rem .5rem; border-radius: .5rem; background: rgb(var(--brand-accent) / .1); color:#1f2937; }

/* Skeleton shimmer (optional utility) */
.skeleton { position: relative; overflow: hidden; background: #e5e7eb; }
.skeleton::after { content:""; position:absolute; inset:0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: shimmer 1.5s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* KPI card specifics */
.kpi-card .kpi-label { color: #64748b; /* slate-500 */ font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.kpi-card .kpi-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; }
.kpi-card .kpi-delta { font-size: .75rem; }

/* Pretty pills and inputs */
.pill { border-radius: 9999px; padding: .375rem .75rem; border: 1px solid rgba(15,23,42,0.08); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: all .15s ease; }
.pill:hover { box-shadow: 0 2px 5px rgba(0,0,0,.06); transform: translateY(-1px); }
.pill.active { background: rgb(var(--brand-accent) / .08); border-color: rgb(var(--brand-accent) / .35); color: rgb(var(--brand-accent)); }

.input-modern { border-radius: .75rem; border: 1px solid rgba(15,23,42,0.15); padding: .5rem .75rem; background: #fff; transition: box-shadow .15s ease, border-color .2s ease; }
.input-modern:focus { outline: none; border-color: rgb(var(--brand-accent) / .6); box-shadow: 0 0 0 4px rgb(var(--brand-accent) / .18); }

.section-title { font-weight: 700; letter-spacing: -.02em; }

/* Page backdrop subtle accents */
body {
  background:
    radial-gradient(800px 200px at 10% 0%, rgb(var(--brand-accent) / 0.1), transparent 60%),
    radial-gradient(600px 160px at 90% 0%, rgb(var(--brand-dark-bg) / 0.08), transparent 60%),
    #f8fafc; /* slate-50 */
}

/* Sticky filter bar shadow */
.sticky-card { position: sticky; top: .75rem; z-index: 20; }

/* Dashboard container: 1200px max width centered, fluid below */
#page-root { max-width: 1200px; margin-left: auto; margin-right: auto; width: 100%; }

/* Ensure root elements can size to viewport */
html, body { height: 100%; }

/* Full-height embed container: occupy viewport minus header/footer, independent of layout flow */
.embed-root {
  position: fixed;
  left: 0;
  right: 0;
  /* Add a small gap below the header before the embed starts */
  top: calc(var(--stack-top, 0px) + var(--embed-top-gap, 8px));
  /* Explicit height ensures consistent full-viewport sizing */
  height: calc(100vh - var(--stack-top, 0px) - var(--stack-bottom, 0px) - var(--embed-top-gap, 8px));
  bottom: auto;
  overflow: hidden;
  display: flex;
  justify-content: center; /* center inner content horizontally */
  align-items: stretch;     /* let inner fill full height */
}

/* Centered inner container for embedded dashboards with max width */
.embed-inner {
  position: relative;
  height: 100%;
  min-height: 100%;
  width: 100%;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Ensure iframe itself respects the max width and is centered */
.embed-frame {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border: 0;
  box-sizing: border-box;
}

/* Removed .embed-mask-ask overlay */