/* Marael tokens from marael.ro; category colors extend the brand for analytics. */
:root {
  --bg: #f4f7fc;
  --panel: #ffffff;
  --text: #0f1b34;
  --muted: #5b6b8c;
  --border: #e7edf7;
  --teal: #1d4ed8;
  --teal-soft: #eef3fd;
  --sidebar: #0f1b34;
  --sidebar-text: #c5d2e9;
  --brand-yellow: #ffc634;
  --chart-blue: #1d4ed8;
  --chart-gold: #bd7d00;
  --chart-cyan: #00879b;
  --chart-violet: #7445cc;
  --chart-coral: #d54a54;
  --chart-slate: #47567a;
  --purple: var(--chart-violet);
  --orange: var(--chart-gold);
  --pink: var(--chart-coral);
  --shadow: 0 4px 18px #0f1b3406;
  --radius: 10px;
}
:root[data-theme=dark] {
  --bg: #0f1b34;
  --panel: #172242;
  --text: #f4f7fc;
  --muted: #aebeda;
  --border: #2b3b60;
  --teal: #8ab0f1;
  --teal-soft: #21355d;
  --sidebar: #0b152b;
  --chart-blue: #79a5ff;
  --chart-gold: #ffc634;
  --chart-cyan: #2bc5d0;
  --chart-violet: #b397ff;
  --chart-coral: #ff8590;
  --chart-slate: #9fb0cc;
}
/* Preserve the official navy/gray wordmark on both light and dark surfaces. */
.brand-official {
  display: block;
  margin: 0 5px 27px;
  padding: 12px 10px;
  border-radius: 8px;
  background: #fff;
}
.brand-logo-window {
  display: block;
  width: 100%;
  aspect-ratio: 5.4;
  overflow: hidden;
}
.brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.login-brand {
  display: block;
  width: 235px;
  max-width: 100%;
  padding: 12px 10px;
  margin: 0 auto 27px;
  border-radius: 8px;
  background: #fff;
}
.sidebar { border-right: 1px solid #ffffff0b; }
.workspace { background: #172242; border-color: #344467; }
.workspace-icon { background: #253157; color: #ffc634; }
.workspace small, .nav-group-label, .sidebar-status { color: #9fb0cc; }
.nav-link > .ph { color: #9fb0cc; }
.nav-link:hover { background: #253157; }
.nav-link.active { background: #1d4ed8; color: #fff; }
.nav-link.active > .ph { color: #fff; }
.nav-link.active::before { background: var(--brand-yellow); height: 26px; width: 4px; }
.nav-link .live-dot { background: var(--brand-yellow); }
.setup-tip { background: #172242; border-color: #344467; }
.tip-icon { background: #ffc63418; color: #ffc634; }
.setup-tip p { color: #acbdd8; }
.setup-tip a { color: #ffc634; }
.sidebar-status .live-dot { background: #ffc634; }
.button.primary { background: #1d4ed8; border-color: #1d4ed8; box-shadow: 0 3px 8px #1d4ed818; }
.button.primary:hover { background: #2354d6; border-color: #2354d6; }
.button:active, .icon-button:active { transform: translateY(1px); }
.avatar { background: var(--teal-soft); color: var(--teal); }
.metric-card { --metric-accent: var(--chart-blue); position: relative; }
.metric-card::before { content: ''; position: absolute; top: 0; left: 19px; right: 19px; height: 3px; border-radius: 0 0 3px 3px; background: var(--metric-accent); }
.metric-views { --metric-accent: var(--chart-gold); }
.metric-sessions { --metric-accent: var(--chart-cyan); }
.metric-clicks { --metric-accent: var(--chart-violet); }
.metric-heading > .ph { color: var(--metric-accent); background: color-mix(in srgb, var(--metric-accent) 10%, var(--panel)); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; }
.metric-main { margin-top: 8px; }
.metric-main > strong, .live-number > strong, .donut-center strong { font-variant-numeric: tabular-nums; }
.metric-trend { color: var(--chart-cyan); background: color-mix(in srgb, var(--chart-cyan) 10%, var(--panel)); }
.metric-trend.negative { color: var(--chart-coral); background: color-mix(in srgb, var(--chart-coral) 10%, var(--panel)); }
.legend-dot { width: 8px; height: 8px; }
.legend-dot.visitors { background: var(--chart-blue); }
.legend-dot.views { background: var(--chart-gold); }
.live-dot, .live-row > span:first-child { background: var(--chart-cyan); }
.live-badge { color: var(--chart-cyan); background: color-mix(in srgb, var(--chart-cyan) 10%, var(--panel)); }
.live-number > strong { color: var(--chart-blue); }
.live-bars > span, .live-bars > span:last-child { background: var(--border); }
.live-bars > span.has-activity { background: var(--chart-blue); }
.mini-progress i { background: var(--chart-blue); }
.rank-track { background: var(--bg); height: 4px; }
.world-map path { fill: var(--border); }
.world-map path.has-traffic { fill: var(--chart-blue); }
.world-map path:hover { fill: var(--chart-cyan); }
.empty-state > .ph { color: var(--teal); }
.status-badge.pending { color: var(--muted); background: var(--bg); }
.onboarding-banner { display: flex; align-items: center; gap: 18px; background: var(--panel); border: 1px solid var(--border); border-left: 4px solid #1d4ed8; border-radius: 8px; padding: 18px 20px; margin-bottom: 21px; }
.onboarding-icon { width: 40px; height: 40px; border-radius: 10px; color: var(--teal); background: var(--teal-soft); display: grid; place-items: center; flex-shrink: 0; }
.onboarding-icon > .ph { font-size: 24px; }
.onboarding-banner p { font-size: 11px; margin-top: 4px; max-width: 62ch; }
.onboarding-banner .button { margin-left: auto; }
@media (max-width: 760px) {
  .onboarding-banner { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .onboarding-banner > div { flex: 1; min-width: 190px; }
  .onboarding-banner .button { margin-left: 0; }
  .metric-heading > .ph { width: 27px; height: 27px; font-size: 16px; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .brand-official { margin-left: 3px; margin-right: 3px; padding: 11px 8px; }
}

/* One page title in the topbar; desktop navigation can become an icon rail. */
:root { --sidebar-width: 236px; }
.sidebar { width: var(--sidebar-width); }
.main-shell { margin-left: var(--sidebar-width); }
.brand-mini { display: none; }
.sidebar-toggle { display: inline-flex; flex-shrink: 0; }
.topbar-left { min-width: 0; }
.topbar-page { min-width: 0; }
.topbar-page h1 { font-size: 16px; font-weight: 750; letter-spacing: -.4px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.topbar-page .breadcrumb { font-size: 9px; gap: 8px; white-space: nowrap; }
.topbar-page .breadcrumb strong { overflow: hidden; text-overflow: ellipsis; }
.topbar-right { flex-shrink: 0; }
.topbar-action { min-height: 34px; padding: 7px 12px; font-size: 10px; }
@media (max-width: 1250px) { :root { --sidebar-width: 210px; } }
@media (max-width: 1000px) { :root { --sidebar-width: 190px; } }
@media (min-width: 761px) {
  :root[data-sidebar=collapsed] { --sidebar-width: 72px; }
  :root[data-sidebar=collapsed] .sidebar { padding: 24px 10px 16px; }
  :root[data-sidebar=collapsed] .brand-official { display: grid; place-items: center; padding: 7px; margin: 0 0 24px; border-radius: 8px; }
  :root[data-sidebar=collapsed] .brand-logo-window { display: none; }
  :root[data-sidebar=collapsed] .brand-mini { display: grid; place-items: center; }
  .brand-mini img { display: block; width: 36px; height: 36px; }
  :root[data-sidebar=collapsed] .workspace { justify-content: center; padding: 8px 0; margin-bottom: 18px; border-color: transparent; background: transparent; }
  :root[data-sidebar=collapsed] .workspace > span:not(.workspace-icon),
  :root[data-sidebar=collapsed] .workspace > .ph,
  :root[data-sidebar=collapsed] .nav-group-label,
  :root[data-sidebar=collapsed] .nav-link > span,
  :root[data-sidebar=collapsed] .setup-tip,
  :root[data-sidebar=collapsed] .sidebar-status { display: none; }
  :root[data-sidebar=collapsed] .nav-link { justify-content: center; padding: 12px 0; min-height: 44px; gap: 0; margin: 4px 0; }
  :root[data-sidebar=collapsed] .nav-link > .ph { font-size: 21px; }
  :root[data-sidebar=collapsed] .sidebar-bottom { padding-top: 20px; }
  :root[data-sidebar=collapsed] .toast { left: calc(50% + 36px); }
}
@media (max-width: 760px) {
  :root { --sidebar-width: 236px; }
  .main-shell { margin-left: 0; }
  .topbar { gap: 10px; height: 72px; }
  .topbar-left { flex: 1; gap: 9px; }
  .topbar-page h1 { font-size: 14px; letter-spacing: -.3px; margin-bottom: 3px; }
  .topbar-page .breadcrumb { font-size: 8px; gap: 6px; }
  .topbar-action { width: 32px; min-height: 32px; padding: 0; }
  .topbar-action > span { display: none; }
  .topbar-right > a.icon-button { display: none; }
  .topbar-right { gap: 4px; }
  .content { padding-top: 20px; }
}
@media (max-width: 380px) {
  .topbar { padding: 0 12px; }
  .topbar-right .profile { display: none; }
}

/* Focus feedback uses color rather than an outer outline. */
:focus-visible { outline: none; }
button:focus-visible, a:focus-visible, input:focus, select:focus,
.search-input:focus-within, .search-input input:focus { outline: none; }
button:focus-visible, a.icon-button:focus-visible { background: var(--teal-soft); color: var(--teal); }
.button.primary:focus-visible { background: #2354d6; color: #fff; }
.sidebar a:focus-visible { background: #253157; color: #fff; }
.sidebar .nav-link.active:focus-visible { background: #2354d6; }
input:focus, select:focus, form input:not([type=hidden]):focus, form select:focus { border-color: var(--teal); }
.search-input:focus-within { border-color: var(--teal); }
.text-link:focus-visible, .breadcrumb a:focus-visible { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

/* The native select owns the whole filter, including its decorative icons. */
.select-wrap { position: relative; padding: 0; border: 0; }
.select-wrap select { display: block; min-height: 36px; max-width: 234px; padding: 8px 32px 8px 35px; border: 1px solid var(--border); border-radius: inherit; }
.select-wrap > .ph { position: absolute; left: 10px; pointer-events: none; }
.select-wrap > .ph:last-child { left: auto; right: 10px; }
.select-wrap select:hover, .select-wrap select:focus { border-color: var(--teal); }
@media (max-width: 760px) {
  .select-wrap select { min-height: 33px; max-width: 190px; }
}

.loading-spinner { display: inline-block; width: 28px; height: 28px; flex-shrink: 0; border: 3px solid var(--border); border-top-color: var(--teal); border-radius: 50%; animation: loading-spin .65s linear infinite; }
.analytics-loader { min-height: 260px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; color: var(--muted); font-size: 12px; }
.navigation-loader { position: fixed; top: 77px; right: 0; bottom: 0; left: var(--sidebar-width); z-index: 30; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--muted); font-size: 12px; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .navigation-loader { top: 72px; left: 0; } }
@media (prefers-reduced-motion: reduce) { .loading-spinner { animation: none; } }

/* Client access controls use the existing workspace form styles. */
.client-access-action{margin:16px 0}
.access-apps{border:1px solid var(--border);border-radius:8px;padding:12px 16px;margin-top:20px;max-height:280px;overflow:auto}
.access-apps legend{font-size:12px;font-weight:650;padding:0 5px}
form label.access-check{display:flex;align-items:center;gap:10px;cursor:pointer}
form .access-check input[type=checkbox]{width:17px;height:17px;padding:0;margin:0;flex-shrink:0;accent-color:var(--chart-blue)}
.access-check small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.client-logout{margin-bottom:18px}
.client-logout .button{width:100%}

.world-map{padding-bottom:38px}
.world-map svg{aspect-ratio:720/350;overflow:hidden;user-select:none}
.map-controls{position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:3px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:3px}
.map-controls .icon-button{width:30px;height:30px;min-height:30px}
.map-controls .icon-button:disabled{opacity:.35;cursor:default}
#map-zoom-level{min-width:39px;text-align:center;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}