/* BrainzieMusterpoint base styling: a thin layer over team.core's component library (teamcore-components.css).
   It sets the page chrome the component CSS deliberately leaves to the host, and brands the generic
   tcc-* components with the app's theme colours (the same palette gathered for the landing page). */

:root {
  --app-ink: #13211C;
  --app-muted: color-mix(in srgb, #13211C 55%, white);
  --app-line: color-mix(in srgb, #2E8B6E 12%, white);
  --app-brand: #2E8B6E;
  --app-brand-deep: color-mix(in srgb, #2E8B6E 80%, black);
  --app-paper: #F4F8F6;
  --app-surface: #FFFFFF;

  /* Brand the team.core buttons (the components read these). */
  --tcc-btn-primary-bg: #2E8B6E;
  --tcc-btn-primary-fg: #ffffff;
  --tcc-btn-primary-bg-hover: color-mix(in srgb, #2E8B6E 80%, black);
  --tcc-btn-radius: 10px;
}

/* The shell fixes itself to the viewport so the body never scrolls — exactly one scrollbar on any page (.app-main
   below is the single scroll region; a grid page hands that scroll to the grid via .app-page--fill, keeping its header
   pinned). Mirrors the CRM reference and EOM. */
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font-family: var(--tcc-font); color: var(--app-ink); background: var(--app-paper); }

/* App bar + side navigation.
   Nav links live in team.core's left-anchored Drawer (a mini icon-rail when collapsed — the default — expanding to
   labels when the app bar's menu button is toggled). The app bar (brand + profile + system info) stays across the top;
   the drawer is pinned below it via --tcc-drawer-top and the content clears the rail via .app-main's left margin. The
   generic --tcc-drawer-*/--tcc-nav-* tokens are mapped onto the app palette so the drawer themes with the app. */
:root {
  --app-bar-height: 3.25rem;
  --tcc-drawer-top: var(--app-bar-height);
  --tcc-drawer-bg: var(--app-surface);
  --tcc-drawer-mini-width: 3.5rem;
  --tcc-drawer-width: 15rem;
  --tcc-nav-fg: var(--app-ink);
  --tcc-nav-hover-bg: color-mix(in srgb, var(--app-brand) 10%, transparent);
  --tcc-nav-divider: var(--app-line);
  --tcc-nav-active-fg: var(--app-brand-deep);
  --tcc-nav-active-bg: color-mix(in srgb, var(--app-brand) 12%, transparent);
  --tcc-nav-active-accent: var(--app-brand);
}

.app-bar {
  position: sticky;
  top: 0;
  /* Above the drawer (1100) and its backdrop (1099) so the brand + tools stay usable while the menu is open. */
  z-index: 1101;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--app-bar-height);
  padding: 0 1.25rem 0 0.5rem;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-line);
}
.app-bar__menu { color: var(--app-muted); flex: none; }
.app-bar__menu:hover { color: var(--app-brand-deep); }
.app-bar__brand { font-weight: 700; color: var(--app-brand-deep); text-decoration: none; font-size: 1.05rem; }
.app-bar__spacer { margin-left: auto; }
/* User-profile icon. */
.app-bar__profile { font-size: 1.25rem; line-height: 1; text-decoration: none; }

/* The nav icons are stroke/outline SVGs; override .tcc-icon's fill:currentColor (which would fill the closed shapes into solid blobs) and size them for the rail. */
.tcc-navmenu .tcc-navlink__icon { width: 1.35rem; height: 1.35rem; fill: none; }

/* Page: the left margin clears the collapsed icon-rail; the drawer overlays content when open, so it never reflows.
   The app bar is a fixed height at the top, so main takes the rest of the viewport and is the single scroll region
   (a normal page scrolls here; a grid page hands the scroll to its grid — see .app-page--fill). One scrollbar, never two. */
.app-main {
  max-width: 64rem;
  margin: 0 auto 0 var(--tcc-drawer-mini-width);
  padding: 2rem 1.75rem;
  height: calc(100dvh - var(--app-bar-height));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* A grid/list page that should fill the viewport and let its grid be the sole scroll region: the page's title,
   intro and toolbar stay pinned at the top; the DataGrid (with Fill="true") grows to fill the rest and scrolls. */
.app-page--fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* Always-visible (but unobtrusive) legal links, shown on every page below the content. */
.app-legal { margin: 1.75rem auto 0.9rem; text-align: center; font-size: 0.82rem; color: var(--app-muted); }
.app-legal a { color: var(--app-muted); text-decoration: none; }
.app-legal a:hover { color: var(--app-brand-deep); text-decoration: underline; }
.app-legal__sep { margin: 0 0.5rem; opacity: 0.6; }
.app-h1 { font-size: 1.6rem; margin: 0 0 0.25rem; }
.app-intro { color: var(--app-muted); margin: 0 0 1.5rem; }

/* Toolbar + input */
.app-toolbar { display: flex; gap: 0.5rem; margin: 1rem 0; flex-wrap: wrap; }
.app-input { padding: 0.5rem 0.7rem; border: 1px solid var(--app-line); border-radius: 10px; font: inherit; min-width: 18rem; }
.app-input:focus { outline: none; border-color: var(--app-brand); }

/* Table */
.app-table { width: 100%; border-collapse: collapse; background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 12px; overflow: hidden; }
.app-table th, .app-table td { text-align: left; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--app-line); }
.app-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--app-muted); background: color-mix(in srgb, #2E8B6E 5%, white); }
.app-table tr:last-child td { border-bottom: none; }

.app-badge { margin-left: 0.5rem; font-size: 0.75rem; color: var(--app-muted); font-style: italic; }
.app-empty, .app-loading { color: var(--app-muted); }

/* Phones: tighten the app bar + page gutters. The nav stays the same collapsible rail + drawer as desktop. Wide
   content (tables) should scroll inside its own container rather than pushing the page. */
@media (max-width: 768px) {
  .app-bar { padding: 0 0.6rem; gap: 0.5rem; }
  .app-main { margin-left: var(--tcc-drawer-mini-width); padding: 1.25rem 0.9rem; }
  .app-h1 { font-size: 1.35rem; }
}