/* Sidebar interaction states and the Google Workspace brand icons.

   Its own file, loaded after style.css, so these states live in one place.
   The same design as hub.hollend.com (hollend-hub-backend public/css/sidebar.css),
   measured again here against this Hub's own palette: indigo accent, dark by
   default (sidebar #131a2e), light under body.theme-light (sidebar #ffffff).

   MOTION
   ------
   Only color, background-color and transform are transitioned, for 180ms --
   not `all` (style.css's --transition-fast), which also animates box-shadow
   and costs paint on every hover. The hover shadow therefore appears at once
   while the tint fades in, which reads as the item lifting. The icon nudge is
   2px. Both are removed under prefers-reduced-motion. */

.sidebar .nav-btn {
  transition: color 180ms ease, background-color 180ms ease;
}
.sidebar .nav-btn > .material-symbols-outlined:first-child {
  transition: transform 180ms ease, color 180ms ease;
}

/* Hover: an accent tint and a soft shadow for elevation. The old hover was 4%
   white, invisible on the light theme's white sidebar. Text goes to
   --text-primary, so hovering never lowers its contrast. */
.sidebar .nav-btn:hover {
  color: var(--text-primary);
  background-color: color-mix(in srgb, var(--accent-primary) 14%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 6px 14px -6px rgba(0, 0, 0, 0.45);
}
body.theme-light .sidebar .nav-btn:hover {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 14px -6px rgba(15, 23, 42, 0.18);
}
.sidebar .nav-btn:hover > .material-symbols-outlined:first-child {
  transform: translateX(2px);
}

/* Active: a deeper indigo fill with white text, and a bar on the leading edge
   so "you are here" does not rely on colour alone.
     white on #4f46e5 (--accent-primary-hover)  6.29:1  (text needs 4.5:1)
     white on #4338ca (active + hover)          7.90:1
   The previous fill (#6366f1) carried --text-primary: 4.27:1 in the dark
   theme and 4.00:1 in the light one, both under 4.5:1. The bar is the same
   white as the text, so it clears the 3:1 a non-text indicator needs. */
.sidebar .nav-btn.active {
  color: #ffffff;
  background-color: var(--accent-primary-hover);
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
}
.sidebar .nav-btn.active::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  width: 3px;
  height: 60%;
  border-radius: 3px;
  background-color: #ffffff;
  transform: translateY(-50%);
}
.sidebar .nav-btn.active:hover {
  color: #ffffff;
  background-color: #4338ca;
}

/* Focus: a ring outside the button in the accent, visible around the active
   fill too. #6366f1 on #131a2e 3.87:1, on #ffffff 4.47:1 (3:1 needed). */
.sidebar .nav-btn:focus-visible {
  outline: 3px solid var(--accent-primary);
  outline-offset: 2px;
}

/* The Chat link is an <a>, styled as a button: no underline, and its
   "opens elsewhere" icon pushed to the end of the row. */
a.nav-btn { text-decoration: none; }
.nav-external-icon { margin-left: auto; font-size: 16px !important; opacity: .8; }

/* ---------------------------------------------------------------------------
   GOOGLE WORKSPACE BRAND ICONS

   The icon glyphs take Google's product colours; labels keep the normal text
   colour. Each sits on a small circular chip painted in the sidebar colour, so
   its ground is the same whether the button behind it is at rest, tinted on
   hover, or filled when active (on the indigo fill every brand hue fails).

   MEASURED CONTRAST (WCAG 1.4.11, non-text, needs 3:1) against the chip:

                         dark #131a2e   light #ffffff
     Gmail    #EA4335       4.41:1         3.92:1
     Calendar #4285F4       4.85:1         3.56:1
     Drive    #0F9D58       4.93:1         3.51:1
     Chat     #00AC47       5.76:1         3.00:1

   The suite's sidebar has all four: Gmail, Calendar and Drive are tabs
   (data-tab="suite-*"); Chat is the #nav-google-chat link.
   --------------------------------------------------------------------------- */

:root {
  --brand-gmail: #EA4335;
  --brand-calendar: #4285F4;
  --brand-drive: #0F9D58;
  --brand-chat: #00AC47;
}
/* On body, not :root: the light theme is body.theme-light, which redefines
   --bg-secondary on body. Resolved on :root, the chip would keep the dark
   sidebar colour in the light theme. */
body {
  --brand-chip: var(--bg-secondary);
}

.nav-btn[data-tab="suite-gmail"] { --brand-icon: var(--brand-gmail); }
.nav-btn[data-tab="suite-calendar"] { --brand-icon: var(--brand-calendar); }
.nav-btn[data-tab="suite-drive"] { --brand-icon: var(--brand-drive); }
#nav-google-chat { --brand-icon: var(--brand-chat); }

.nav-btn[data-tab="suite-gmail"] > .material-symbols-outlined:first-child,
.nav-btn[data-tab="suite-calendar"] > .material-symbols-outlined:first-child,
.nav-btn[data-tab="suite-drive"] > .material-symbols-outlined:first-child,
#nav-google-chat > .material-symbols-outlined:first-child {
  color: var(--brand-icon);
  background-color: var(--brand-chip);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-icon) 35%, transparent);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  /* Into the icon column, so labels line up with the items above. */
  margin: -4px;
}

/* ---------------------------------------------------------------------------
   REDUCED MOTION: no transitions and no nudge.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-btn,
  .sidebar .nav-btn > .material-symbols-outlined {
    transition: none !important;
  }
  .sidebar .nav-btn:hover > .material-symbols-outlined:first-child {
    transform: none !important;
  }
}