/* AMOSHA visual consistency layer.
 * Keeps categorical color tokens visually identical across task surfaces and
 * finance operations, and keeps shell utility controls on one shared geometry.
 */

/* Shared categorical token geometry.
 * The owning element supplies its category/tag color through currentColor. */
.tag,
.tag-choice span,
.amosha-category-token {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 23px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  border-radius: var(--radius-pill, 999px);
  background: color-mix(in srgb, currentColor 10%, var(--surface-solid));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 18%),
    0 1px 2px rgb(15 23 42 / 5%);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}

/* Legacy task-list markup writes an inline background. The semantic token is
 * authoritative so list/dashboard/modal chips no longer use different fills. */
.tag {
  background: color-mix(in srgb, currentColor 10%, var(--surface-solid)) !important;
}

.tag-choice span {
  cursor: pointer;
  opacity: .7;
  transition:
    opacity var(--motion-fast, 120ms) var(--ease-ui, ease-out),
    background var(--motion-fast, 120ms) var(--ease-ui, ease-out),
    border-color var(--motion-fast, 120ms) var(--ease-ui, ease-out),
    box-shadow var(--motion-fast, 120ms) var(--ease-ui, ease-out),
    transform var(--motion-fast, 120ms) var(--ease-ui, ease-out);
}

.tag-choice span:hover {
  opacity: .9;
  background: color-mix(in srgb, currentColor 13%, var(--surface-solid));
}

.tag-choice input:checked + span {
  opacity: 1;
  border-color: color-mix(in srgb, currentColor 50%, transparent);
  background: color-mix(in srgb, currentColor 14%, var(--surface-solid));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 20%),
    0 0 0 2px color-mix(in srgb, currentColor 11%, transparent),
    0 2px 5px rgb(15 23 42 / 7%);
}

.finance-v6-operation-main small.amosha-category-token {
  margin-top: 5px;
}

:root[data-theme="dark"] :is(.tag, .tag-choice span, .amosha-category-token) {
  background: color-mix(in srgb, currentColor 11%, var(--surface-solid));
  border-color: color-mix(in srgb, currentColor 38%, var(--border));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 5%),
    0 1px 2px rgb(0 0 0 / 20%);
}

:root[data-theme="dark"] .tag {
  background: color-mix(in srgb, currentColor 11%, var(--surface-solid)) !important;
}

/* Logout is a real .icon-button now, so its box, border, hover and centering are
 * owned by the same shared component as feedback/theme/settings. Only semantic
 * color and right anchoring differ. The power glyph is generated as the sole
 * visible grid item, avoiding nested hydrated SVG/mask alignment drift. */
#logout-button {
  margin-left: auto;
  color: var(--danger);
}

#logout-button .logout-label {
  display: none !important;
}

#logout-button::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v10'/%3E%3Cpath d='M18.36 5.64a9 9 0 1 1-12.72 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v10'/%3E%3Cpath d='M18.36 5.64a9 9 0 1 1-12.72 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Preserve the previous compact-rail behavior: four 34px controls cannot fit
 * horizontally in the 78/72px sidebar. Logout remains available when expanded. */
@media (max-width: 1050px) {
  #logout-button {
    display: none;
  }
}

@media (min-width: 1051px) {
  .sidebar-footer {
    width: 100%;
    display: flex !important;
    align-items: center;
    gap: 6px;
  }

  .app.sidebar-collapsed #logout-button {
    display: none;
  }
}