/* Light/dark theme of /app and /admin: the switch at the bottom of the sidebar and
   dark-only adjustments of shared components. Tokens live in tokens.css, logic in /js/theme.js.
   Loaded only by the cabinet and admin, so platform assets of managed sites stay unchanged. */

/* Switch: shared .lf-segmented with Button / Icon S halves (sun / moon). */
.sidebar-theme {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--color-border);
}

.sidebar-theme__label {
  min-width: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.sidebar-theme__switch.lf-segmented {
  flex: none;
  gap: 2px;
  padding: 3px;
}

.sidebar-theme__switch.lf-segmented > .btn {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
}

.sidebar-theme__switch.lf-segmented > .btn svg {
  width: 16px;
  height: 16px;
}

/* /app mobile drawer: the same gutter as the social row below it.
   /admin mobile top bar: only the switch, at the end of the row. */
@media (max-width: 768px) {
  .sidebar-theme {
    padding: 10px 16px;
  }

  .admin-layout .sidebar-theme {
    padding: 0 10px 0 4px;
    border-top: 0;
  }

  .admin-layout .sidebar-theme__label {
    display: none;
  }
}

/* /app desktop rail: the label hides and the halves stack to fit 64 px. */
@media (min-width: 769px) {
  .sidebar.is-collapsed .sidebar-theme {
    justify-content: center;
    padding: 6px 0;
  }

  .sidebar.is-collapsed .sidebar-theme__label {
    display: none;
  }

  .sidebar.is-collapsed .sidebar-theme__switch.lf-segmented {
    flex-direction: column;
  }
}

/* The active tab is filled with brand ink; in the dark theme that ink is light green,
   so the fill switches to the deep brand fill that keeps white text readable. */
:root[data-theme="dark"] .lf-tab:is(.is-active, .active, [aria-selected="true"]) {
  border-color: var(--color-brand-fill);
  background: var(--color-brand-fill);
}

/* Monochrome black brand marks of AI clients (OpenAI Codex, Cursor) vanish on dark
   surfaces; the coloured marks keep their brand colours. */
:root[data-theme="dark"] img:is([src*="/images/ai-clients/client-codex.svg"], [src*="/images/ai-clients/client-cursor.svg"]) {
  filter: invert(1);
}