/* ─── Full-width button variant ─────────────────────────────────────────────── */
.button--full {
  display: block;
  width: 100%;
  box-sizing: border-box; }

/* ─── Push notifications (Notiser page) ─────────────────────────────────────── */
.push-lead {
  margin: 0 0 1em;
  color: #555;
  font-size: 0.95em;
  line-height: 1.5; }

.push-status {
  margin: 0.75em 0 0;
  min-height: 1.2em;
  font-size: 0.85em;
  color: #888; }
  .push-status--error {
    color: #ff5233; }

/* iOS "Add to Home Screen" steps shown when push isn't available in Safari. */
.push-ios__lead {
  display: block;
  margin-bottom: 0.5em; }
.push-ios__steps {
  margin: 0;
  padding-left: 1.4em;
  text-align: left; }
  .push-ios__steps li {
    margin: 0.3em 0;
    line-height: 1.5; }

/* ─── Watch rules (Bevakningsregler page) ───────────────────────────────────── */
.watchrules {
  display: flex;
  flex-direction: column;
  gap: 2em;
  margin-top: 1.25em; }
  @media (min-width: 992px) {
    .watchrules {
      flex-direction: row;
      align-items: flex-start;
      gap: 1.5em; } }

.watchrules__col {
  flex: 1;
  min-width: 0; }

/* Override global label styles so the radio + text sit in a proper flex row */
label.watchrules__radio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.6em;
  padding-left: 0;
  font-size: 0.9em;
  color: #444;
  cursor: pointer; }

/* Custom-drawn radio so it renders identically across browsers.

   The global style.css hides every radio with
   `position:absolute; left:-9999px; visibility:hidden` and redraws it via a
   sibling `+ label::before`. That pattern needs <input> and <label> to be
   siblings; here the input is nested *inside* the label, so nothing redraws
   it and the real input stays off-screen. The cascade is per-property, so we
   must explicitly undo position/left/visibility — overriding only appearance
   (as before) leaves the off-screen + hidden properties in force.

   The checked dot is painted with a radial-gradient background rather than
   ::after, because generated content on <input> elements doesn't render
   reliably in Firefox/Edge. */
label.watchrules__radio input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: static;
  left: auto;
  visibility: visible;
  display: inline-block;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  border: 2px solid #bbb;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s; }
  label.watchrules__radio input[type="radio"]:checked {
    border-color: #6C63FF;
    background: radial-gradient(circle, #6C63FF 0 4px, #fff 5px); }
  label.watchrules__radio input[type="radio"]:focus {
    outline: 0;
    border-color: #6C63FF; }

.watchrules__specific {
  transition: opacity 0.2s; }

.watchrules__specific--disabled {
  opacity: 0.3;
  pointer-events: none; }

.watchrules__add {
  margin-bottom: 0.4em; }
  .watchrules__add input {
    margin-bottom: 0.6em; }

.watchrules__add__btns {
  display: flex;
  gap: 8px; }
  .watchrules__add__btns .button {
    flex: 1;
    margin-bottom: 0;
    padding: 5pt 10pt;
    font-size: 0.85em; }

.watchrules__list {
  list-style: none;
  padding: 0;
  margin: 0.5em 0 0;
  min-height: 56px;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden; }

.watchrules__list__empty {
  padding: 14px;
  color: #ccc;
  font-size: 0.85em;
  text-align: center; }

.watchrules__list__item {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.9em;
  color: #333;
  transition: background 0.12s; }
  .watchrules__list__item:hover {
    background: #f7f7f7; }
  .watchrules__list__item--selected {
    background: #f0eeff;
    color: #6C63FF; }

/* ─── Role checkboxes (Bevaka ENDAST dessa roller) ───────────────────────── */
.wr-roles__list {
  margin-top: 0.5em;
  display: flex;
  flex-direction: column; }

.wr-roles__role {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5em; }
  .wr-roles__role:last-child {
    margin-bottom: 0; }

/* Input is nested inside label, so we must undo the global
   `position:absolute; left:-9999px; visibility:hidden` rule (same fix as
   the radio buttons above) and redraw using appearance:none. */
.wr-roles__cb-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9em;
  color: #444;
  cursor: pointer;
  padding-left: 0;
  margin-bottom: 0;
  line-height: 1.35; }

.wr-roles__cb-label--narstande {
  padding-left: 23px;
  font-size: 0.82em;
  color: #999;
  margin-top: 2px; }

/* Specificity must be >= 0,2,0 to beat the global
   `[type="checkbox"]:not(:checked), [type="checkbox"]:checked { position:absolute; visibility:hidden }`
   (0,2,0). Same specificity wins by source order because dashboard.css loads after style.css. */
.wr-roles__cb-label .wr-roles__cb,
.wr-txn__cb-label .wr-txn__cb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: static;
  left: auto;
  visibility: visible;
  display: inline-block;
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  margin-top: 1px;
  padding: 0;
  border: 1.5px solid #bbb;
  border-radius: 3px;
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s; }
  .wr-roles__cb-label .wr-roles__cb:checked,
  .wr-txn__cb-label .wr-txn__cb:checked {
    border-color: #6C63FF;
    background-color: #6C63FF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' d='M3 8.5l3 3L13 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px; }
  .wr-roles__cb-label .wr-roles__cb:disabled {
    opacity: 0.35;
    cursor: default; }
  .wr-roles__cb-label .wr-roles__cb:focus,
  .wr-txn__cb-label .wr-txn__cb:focus {
    outline: 0;
    border-color: #6C63FF; }

.wr-roles__cb-label:has(.wr-roles__cb:disabled) {
  cursor: default;
  color: #bbb; }

/* ─── Transaction-type checkboxes (Bevaka ENDAST dessa transaktionstyper) ───── */
.wr-txn__list {
  margin-top: 0.5em;
  display: flex;
  flex-direction: column; }

.wr-txn__item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 0.5em; }
  .wr-txn__item:last-child {
    margin-bottom: 0; }

/* Mirrors .wr-roles__cb-label; checkbox appearance is shared via the grouped
   selectors above. flex:1 lets the label take the row and push the "i" to the end. */
.wr-txn__cb-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 0;
  font-size: 0.9em;
  color: #444;
  cursor: pointer;
  padding-left: 0;
  margin-bottom: 0;
  line-height: 1.35; }

/* Circular "i" info button; toggles the floating popover below (dashboard.js). */
.wr-txn__info {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  padding: 0;
  border: 1.5px solid #c5c5c5;
  border-radius: 50%;
  background: #fff;
  color: #9a9a9a;
  font: italic 700 11px/1 Georgia, "Times New Roman", serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s; }
  .wr-txn__info:hover,
  .wr-txn__info--active {
    border-color: #6C63FF;
    color: #6C63FF;
    background: #f0eeff; }
  .wr-txn__info:focus {
    outline: 0;
    border-color: #6C63FF; }

/* Floating explanation popover — body-appended, positioned in JS. Stays out of
   the pointer path (pointer-events:none) and fades/slides in via the --open
   class so it can transition (display:none can't animate). */
.wr-txn__pop {
  position: absolute;
  z-index: 9998;
  top: 0;
  left: 0;
  max-width: 240px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #2b2b3a;
  color: #f4f4f8;
  font-size: 0.78em;
  line-height: 1.45;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.13s ease, transform 0.13s ease; }
  .wr-txn__pop--open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); }

/* ─── Transaction history (Transaktionshistorik page) ───────────────────────── */
.tx-list {
  margin-top: 0.5em; }

.tx-item {
  border: 1px solid #eee;
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.15s; }
  .tx-item--open {
    border-color: #d0ceff; }

.tx-item__header {
  display: flex;
  align-items: center;
  padding: 13px 16px;
  cursor: pointer;
  gap: 12px;
  user-select: none; }
  .tx-item__header:hover {
    background: #fafafa; }

.tx-item__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0; }
  .tx-item__dot--buy  { background: #06d19c; }
  .tx-item__dot--sell { background: tomato; }

.tx-item__company {
  flex: 1;
  font-size: 0.95em;
  color: #111; }

.tx-item__amount {
  font-size: 0.85em;
  color: #888;
  white-space: nowrap; }

.tx-item__chevron {
  width: 13px;
  height: 13px;
  color: #ccc;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: transform 0.2s; }
  .tx-item__chevron svg {
    width: 100%;
    height: 100%;
    fill: currentColor; }
  .tx-item--open .tx-item__chevron {
    transform: rotate(180deg); }

.tx-item__body {
  display: none;
  padding: 2px 16px 14px;
  border-top: 1px solid #eee; }
  .tx-item--open .tx-item__body {
    display: block; }

.tx-item__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 20px;
  font-size: 0.85em;
  margin-top: 10px; }

.tx-item__lbl {
  color: #bbb;
  white-space: nowrap; }

.tx-item__val {
  color: #333; }