/*
 * Links
 *
 * BEM-style component classes for links previously emitted by `link_class`
 * and `dropdown_class` in app/helpers/links_helper.rb. Those helpers — along
 * with `edit_class`, `sidebar_class`, and `sidebar_icon_class` — have been
 * inlined; the class names below are now written directly in ERB.
 *
 * Usage:
 *   class="lnk lnk--primary lnk--border-none"      (default link)
 *   class="lnk lnk--destroy lnk--border-none"      (destroy link)
 *   class="dropdown-link dropdown-link--plain"     (default dropdown item)
 *   class="edit edit--border-transparent"          (inlined edit chip)
 *   class="sidenav-link sidenav-link--transparent" (inlined sidenav link)
 *   class="sidenav-icon"                           (inlined sidenav icon)
 *
 * Styles, borders, and the popup/icon flags can stack on a single
 * element by listing each modifier class alongside the base.
 */

.lnk {
  font-weight: 500;
  line-height: 1rem;
  transition-property:
    color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.lnk:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Style modifiers                                                    */
/* ------------------------------------------------------------------ */

/* Plain — quiet indigo text link, no background. */
.lnk--plain {
  padding: 0.25rem 0.5rem;
  color: rgb(var(--palette-indigo-700));
}

.lnk--plain:hover {
  color: var(--color-brand);
}

.lnk--plain:active {
  background-color: rgb(var(--palette-indigo-200));
}

.lnk--plain:focus-visible {
  box-shadow:
    var(--shadow-surface-outline),
    0 0 0 4px rgb(var(--palette-indigo-300));
}

/* Primary — default link style. Indigo text that gains a soft bg on hover. */
.lnk--primary {
  padding: 0.5rem 1.25rem;
  color: rgb(var(--palette-indigo-700));
}

.lnk--primary:hover {
  background-color: rgb(var(--palette-indigo-100));
  border-radius: var(--radius-sm);
  color: var(--color-brand-strong);
}

.lnk--primary:active {
  background-color: rgb(var(--palette-indigo-200));
}

.lnk--primary:focus-visible {
  box-shadow:
    var(--shadow-surface-outline),
    0 0 0 4px rgb(var(--palette-indigo-300));
}

/* Destroy — red text link for destructive actions. */
.lnk--destroy {
  padding: 0.25rem 0.5rem;
  color: rgb(var(--palette-red-700));
}

.lnk--destroy:hover {
  background-color: rgb(var(--palette-red-100));
  border-radius: var(--radius-sm);
  color: var(--color-danger);
}

.lnk--destroy:active {
  background-color: rgb(var(--palette-red-200));
}

.lnk--destroy:focus-visible {
  box-shadow:
    var(--shadow-surface-outline),
    0 0 0 4px rgb(var(--palette-red-300));
}

/* ------------------------------------------------------------------ */
/* Border modifiers                                                   */
/* ------------------------------------------------------------------ */

/* Full — bordered button-like link with indigo fill. */
.lnk--border-full {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background-color: rgb(var(--palette-indigo-100));
}

.lnk--border-full:hover {
  background-color: rgb(var(--palette-indigo-50));
}

.lnk--border-full:focus {
  border-color: rgb(var(--palette-indigo-300));
}

/* Single — pill link with inset ring (used for sort/filter chips). */
.lnk--border-single {
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  box-shadow:
    inset 0 0 0 1px var(--color-border-medium),
    var(--shadow-sm);
}

.lnk--border-single:hover {
  background-color: var(--color-surface-muted);
}

/* None — borderless link that picks up a subtle hover bg. Default. */
.lnk--border-none:hover {
  background-color: rgb(var(--palette-indigo-50));
  border-radius: var(--radius-md);
}

.lnk--border-none:active {
  background-color: rgb(var(--palette-indigo-200));
}

.lnk--border-none:focus {
  border-color: rgb(var(--palette-indigo-300));
}

/* ------------------------------------------------------------------ */
/* Boolean flags — popup and icon                                     */
/* Applied when the lnk has the .lnk--popup / .lnk--icon modifier.    */
/* ------------------------------------------------------------------ */

.lnk--popup {
  padding: 0.5rem 1rem;
}

.lnk--popup:hover,
.lnk--popup:active {
  background-color: rgb(var(--palette-indigo-100));
}

.lnk--icon {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
}

.record-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-brand-strong);
  font-weight: 500;
  transition:
    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.record-link:hover {
  color: var(--color-brand);
}

/* ------------------------------------------------------------------ */
/* Dropdown links                                                     */
/* Used inside menu/dropdown surfaces — full-width, left-aligned.     */
/* ------------------------------------------------------------------ */

.dropdown-link {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1rem;
  text-align: left;
  transition-property:
    color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-link:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.dropdown-link__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-inline-start: -0.25rem;
  margin-inline-end: 0.5rem;
  flex-shrink: 0;
}

/* Plain — sky-coloured menu item. Default. */
.dropdown-link--plain {
  color: rgb(var(--palette-sky-700));
}

.dropdown-link--plain:hover {
  background-color: rgb(var(--palette-sky-100));
  color: rgb(var(--palette-sky-500));
}

.dropdown-link--plain:active {
  background-color: rgb(var(--palette-sky-200));
}

.dropdown-link--plain:focus-visible {
  box-shadow:
    var(--shadow-surface-outline),
    0 0 0 4px rgb(var(--palette-sky-300));
}

/* Destroy — red menu item for destructive actions in dropdowns. */
.dropdown-link--destroy {
  color: rgb(var(--palette-red-700));
}

.dropdown-link--destroy:hover {
  background-color: rgb(var(--palette-red-100));
  color: var(--color-danger);
}

.dropdown-link--destroy:active {
  background-color: rgb(var(--palette-red-200));
}

.dropdown-link--destroy:focus-visible {
  box-shadow:
    var(--shadow-surface-outline),
    0 0 0 4px rgb(var(--palette-red-300));
}

/* ------------------------------------------------------------------ */
/* Edit chip                                                          */
/* Small teal action link used as an inline edit affordance next to   */
/* table rows and list items. Always renders as link_to.              */
/* ------------------------------------------------------------------ */

.edit {
  display: inline-flex;
  align-items: center;
  margin-right: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  background-color: rgb(var(--palette-teal-100));
  color: rgb(var(--palette-teal-700));
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  transition-property:
    color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.edit:hover {
  background-color: rgb(var(--palette-teal-50));
}

.edit:active {
  background-color: rgb(var(--palette-teal-200));
}

.edit:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.edit:focus-visible {
  box-shadow:
    var(--shadow-surface-outline),
    0 0 0 4px rgb(var(--palette-teal-300));
}

/* Border modifier — only `transparent` exists today (the default). */
.edit--border-transparent {
  border: 1px solid transparent;
}

.edit--border-transparent:focus {
  border-color: rgb(var(--palette-teal-300));
}

/* ------------------------------------------------------------------ */
/* Sidebar navigation link                                            */
/* Used in the admin/main side panel — link hover recolours the       */
/* nested .sidenav-icon.                                               */
/* ------------------------------------------------------------------ */

.sidenav-link {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border-radius: var(--radius-md);
  color: rgb(var(--palette-hq-blue-700));
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  transition-property:
    color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.sidenav-link--split {
  justify-content: space-between;
}

.sidenav-link__icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--radius-lg);
  padding: 0.25rem;
}

.sidenav-link__icon-box > svg {
  flex: 0 0 auto;
}

.sidenav-link__icon-box--admin-active {
  background-color: rgb(var(--palette-red-400));
}

.sidenav-link__icon-box--main-active {
  background-color: rgb(var(--palette-cyan-300));
}

.sidenav-link__active-marker {
  inline-size: 0.25rem;
  block-size: 1.5rem;
  border-radius: var(--radius-pill);
}

.sidenav-link__active-marker--admin {
  background-color: rgb(var(--palette-rose-700));
}

.sidenav-link__active-marker--main {
  background-color: rgb(var(--palette-hq-blue-700));
}

.sidenav-link:hover,
.sidenav-link:focus {
  background-color: rgb(var(--palette-hq-pink-300));
}

.sidenav-link--main:hover,
.sidenav-link--main:focus {
  background-color: rgb(var(--palette-hq-aqua-100));
}

.sidenav-link:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Bg modifiers */
.sidenav-link--transparent {
  background-color: transparent;
}

.sidenav-link--nested {
  margin-inline-start: 1.5rem;
}

.sidenav-link--selected {
  background-color: rgb(var(--palette-hq-pink-300));
  border-right-width: 2px;
}

.sidenav-link--admin-active {
  background-color: rgb(var(--palette-hq-pink-300));
}

.sidenav-link--main-active {
  background-color: rgb(var(--palette-hq-aqua-100));
}

/* Icon inside a sidenav link — recolours when its parent is hovered. */
.sidenav-icon {
  margin-right: 0.75rem;
  width: 1.5rem;
  height: 1.5rem;
  color: rgb(var(--palette-hq-blue-700));
  transition-property: color;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.sidenav-link:hover .sidenav-icon {
  color: rgb(var(--palette-hq-indigo-600));
}

.sidenav-link__icon-box > .sidenav-icon {
  margin-right: 0;
}

.sidenav-folded-link__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
}


.sidenav-folded-link__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.sidenav-folded-link__chevron {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: rgb(var(--palette-hq-blue-700));
  transition: color 150ms ease;
}

.sidenav-link:hover .sidenav-folded-link__chevron,
.sidenav-link:focus .sidenav-folded-link__chevron {
  color: rgb(var(--palette-hq-indigo-600));
}

.sidenav-folded-link__menu {
  margin-block-start: 0.5rem;
  margin-inline-start: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* Back-link modifier                                                 */
/* ------------------------------------------------------------------ */

/*
 * Back — borderless indigo text link with a leading chevron icon.
 *
 * Lives in links.css (not buttons.css per the spec) because the visual is
 * a borderless text link, not a padded/bordered button — see the plan's
 * "Design notes" section.
 */
.lnk--back {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;             /* space-x-2.5 */
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-brand-strong);
  margin-inline-end: 1rem;
}

.lnk--back:hover {
  color: rgb(var(--palette-indigo-900));
}

.lnk--back svg {
  block-size: 1.25rem;
  inline-size: 1.25rem;
  margin-inline-start: -0.25rem;
  margin-inline-end: 0.5rem;
}