/* Dark-theme treatments.

   Every rule here starts with [data-theme="dark"], and this file loads
   after every other stylesheet except the school's custom colour, so
   nothing in it can change the light theme by accident. Values come from
   tokens.css; docs/THEME_SPEC.md explains the four treatments.

   On charcoal, colour has to be quieter than on white: a row of accent
   outlines glows, a solid green button reads as neon, and a soft accent
   block behind the current menu item turns into a slab of colour. So in
   dark, secondary buttons are neutral, status buttons and labels are
   tints, alert panels are nearly neutral with the icon carrying the
   meaning, and the current place in a list is a neutral fill with a thin
   accent bar. */

/* Bootstrap tints some surfaces with a percentage of this. */
:root[data-theme="dark"] { --bs-body-color-rgb: 236, 236, 238; }

/* Backdrops, darker than in light so a dialog still stands off the page. */
[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, .7); }
[data-theme="dark"] .swal2-container.swal2-backdrop-show { background: rgba(0, 0, 0, .7) !important; }

/* Bootstrap's close icon is a black image. */
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ---- Buttons ------------------------------------------------------------ */

/* The secondary button is neutral. Only its icon keeps the accent. */
[data-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--color-text);
  --bs-btn-bg: var(--color-surface);
  --bs-btn-border-color: var(--color-border-strong);
  --bs-btn-hover-color: var(--color-text);
  --bs-btn-hover-bg: var(--color-surface-alt);
  --bs-btn-hover-border-color: var(--color-border-strong);
  --bs-btn-active-color: var(--color-text);
  --bs-btn-active-bg: var(--color-surface-alt);
  --bs-btn-active-border-color: var(--color-border-strong);
}
[data-theme="dark"] .btn-outline-primary > .bi,
[data-theme="dark"] .btn-outline-primary > i { color: var(--color-primary); }
[data-theme="dark"] .btn-check:checked + .btn-outline-primary {
  --bs-btn-active-bg: var(--color-primary-soft);
  --bs-btn-active-color: var(--color-primary);
  --bs-btn-active-border-color: transparent;
}

/* Status buttons, filled or outlined, are tints: the soft fill, text in
   the hue, no border, a little stronger on hover and when pressed. */
[data-theme="dark"] .btn-success, [data-theme="dark"] .btn-outline-success {
  --bs-btn-color: var(--color-success-ink); --bs-btn-bg: var(--color-success-soft); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-success-ink); --bs-btn-hover-bg: var(--color-success-tint-hover); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--color-success-ink); --bs-btn-active-bg: var(--color-success-tint-strong); --bs-btn-active-border-color: transparent;
}
[data-theme="dark"] .btn-warning, [data-theme="dark"] .btn-outline-warning {
  --bs-btn-color: var(--color-warning-ink); --bs-btn-bg: var(--color-warning-soft); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-warning-ink); --bs-btn-hover-bg: var(--color-warning-tint-hover); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--color-warning-ink); --bs-btn-active-bg: var(--color-warning-tint-strong); --bs-btn-active-border-color: transparent;
}
[data-theme="dark"] .btn-danger, [data-theme="dark"] .btn-outline-danger {
  --bs-btn-color: var(--color-danger-ink); --bs-btn-bg: var(--color-danger-soft); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-danger-ink); --bs-btn-hover-bg: var(--color-danger-tint-hover); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--color-danger-ink); --bs-btn-active-bg: var(--color-danger-tint-strong); --bs-btn-active-border-color: transparent;
}
[data-theme="dark"] .btn-info, [data-theme="dark"] .btn-outline-info {
  --bs-btn-color: var(--color-info-ink); --bs-btn-bg: var(--color-info-soft); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-info-ink); --bs-btn-hover-bg: var(--color-info-tint-hover); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--color-info-ink); --bs-btn-active-bg: var(--color-info-tint-strong); --bs-btn-active-border-color: transparent;
}
[data-theme="dark"] .btn-success:hover, [data-theme="dark"] .btn-success:active,
[data-theme="dark"] .btn-warning:hover, [data-theme="dark"] .btn-warning:active,
[data-theme="dark"] .btn-danger:hover,  [data-theme="dark"] .btn-danger:active,
[data-theme="dark"] .btn-info:hover,    [data-theme="dark"] .btn-info:active { filter: none; }

/* A set of choices (present / absent / late): the options not chosen are
   neutral, so the chosen one is the only coloured thing in the row. */
[data-theme="dark"] .btn-check + .btn-outline-success,
[data-theme="dark"] .btn-check + .btn-outline-warning,
[data-theme="dark"] .btn-check + .btn-outline-danger,
[data-theme="dark"] .btn-check + .btn-outline-info,
[data-theme="dark"] .btn-check + .btn-outline-secondary {
  --bs-btn-color: var(--color-text-muted); --bs-btn-bg: transparent; --bs-btn-border-color: var(--color-border-strong);
  --bs-btn-hover-color: var(--color-text); --bs-btn-hover-bg: var(--color-surface-alt); --bs-btn-hover-border-color: var(--color-border-strong);
}
[data-theme="dark"] .btn-check:checked + .btn-outline-success { --bs-btn-active-bg: var(--color-success-tint-strong); --bs-btn-active-color: var(--color-success-ink); --bs-btn-active-border-color: transparent; }
[data-theme="dark"] .btn-check:checked + .btn-outline-warning { --bs-btn-active-bg: var(--color-warning-tint-strong); --bs-btn-active-color: var(--color-warning-ink); --bs-btn-active-border-color: transparent; }
[data-theme="dark"] .btn-check:checked + .btn-outline-danger  { --bs-btn-active-bg: var(--color-danger-tint-strong);  --bs-btn-active-color: var(--color-danger-ink);  --bs-btn-active-border-color: transparent; }
[data-theme="dark"] .btn-check:checked + .btn-outline-info    { --bs-btn-active-bg: var(--color-info-tint-strong);    --bs-btn-active-color: var(--color-info-ink);    --bs-btn-active-border-color: transparent; }
/* A neutral choice: the text colour at 15% over the surface. */
[data-theme="dark"] .btn-check:checked + .btn-outline-secondary { --bs-btn-active-bg: var(--color-choice-neutral); --bs-btn-active-color: var(--color-text); --bs-btn-active-border-color: transparent; }

/* Pills: a tint, not a block of accent. */
[data-theme="dark"] .nav-pills {
  --bs-nav-pills-link-active-bg: var(--color-primary-soft);
  --bs-nav-pills-link-active-color: var(--color-primary);
}

/* ---- Alerts ----------------------------------------------------------- */

/* A nearly neutral panel (the hue at 14%), the normal text colour, and the
   icon in the hue. The icon carries the meaning; the panel stays calm. */
[data-theme="dark"] .alert-success { background: var(--color-success-panel); color: var(--color-text); }
[data-theme="dark"] .alert-warning { background: var(--color-warning-panel); color: var(--color-text); }
[data-theme="dark"] .alert-danger  { background: var(--color-danger-panel);  color: var(--color-text); }
[data-theme="dark"] .alert-info    { background: var(--color-info-panel);    color: var(--color-text); }
[data-theme="dark"] .alert-success > .bi, [data-theme="dark"] .alert-success .alert-icon { color: var(--color-success-ink); }
[data-theme="dark"] .alert-warning > .bi, [data-theme="dark"] .alert-warning .alert-icon { color: var(--color-warning-ink); }
[data-theme="dark"] .alert-danger > .bi,  [data-theme="dark"] .alert-danger .alert-icon  { color: var(--color-danger-ink); }
[data-theme="dark"] .alert-info > .bi,    [data-theme="dark"] .alert-info .alert-icon    { color: var(--color-info-ink); }

/* ---- Navigation and the current row ------------------------------------ */

/* The current menu item: a neutral fill, normal text, the icon in the
   accent and a thin accent bar. The soft accent fill used in light reads
   as a slab of colour on charcoal. */
[data-theme="dark"] .sidebar-nav .nav-link.is-active {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-left-color: var(--color-primary);
}
[data-theme="dark"] .sidebar-nav .nav-link.is-active i { color: var(--color-primary); }

[data-theme="dark"] .palette-item.is-active { background: var(--color-surface-alt); color: var(--color-text); }
[data-theme="dark"] .palette-item.is-active i { color: var(--color-primary); }
[data-theme="dark"] .palette-item.is-active .palette-item-section { color: var(--color-text-muted); }

[data-theme="dark"] .import-nav.is-active {
  background: var(--color-surface-alt);
  color: var(--color-text);
  box-shadow: inset 2px 0 0 var(--color-primary);
}

[data-theme="dark"] .ts-dropdown .active { background: var(--color-surface-alt); color: var(--color-text); }
[data-theme="dark"] .ts-wrapper.multi .ts-control > div.active { background: var(--color-primary-soft); color: var(--color-primary); }

/* ---- Icon bubbles ------------------------------------------------------ */

/* A soft bubble loses its edge on charcoal; a 1px neutral inset keeps it. */
[data-theme="dark"] .activity-icon,
[data-theme="dark"] .avatar { box-shadow: inset 0 0 0 1px var(--color-border); }