/**
 * CLMS v2 Dark Theme - Button & Interactive Styling
 * Consolidated button styling using CSS variables
 */

/* ===== BASE BUTTON STYLING ===== */
[data-bs-theme="dark"] {
  .btn {
    border-width: 1px !important;
    border-style: solid !important;
  }
}

/* ===== PRIMARY BUTTONS ===== */
[data-bs-theme="dark"] {
  .btn-primary {
    background-color: var(--clms-accent-blue-focus) !important;
    border-color: var(--clms-accent-blue-focus) !important;
    color: var(--clms-white) !important;
  }

  .btn-primary:hover,
  .btn-primary:focus {
    background-color: #1565c0 !important;
    border-color: #1565c0 !important;
    color: var(--clms-white) !important;
  }

  .btn-primary:active,
  .btn-primary.active {
    background-color: #0d47a1 !important;
    border-color: #0d47a1 !important;
    color: var(--clms-white) !important;
  }

  .btn-primary:disabled,
  .btn-primary.disabled {
    background-color: var(--clms-bg-muted) !important;
    border-color: var(--clms-border-muted) !important;
    color: var(--clms-text-muted) !important;
  }
}

/* ===== OUTLINE PRIMARY BUTTONS ===== */
[data-bs-theme="dark"] {
  .btn-outline-primary {
    color: var(--clms-text-link) !important;
    border-color: var(--clms-text-link) !important;
    background-color: var(--clms-transparent) !important;
  }

  .btn-outline-primary:hover,
  .btn-outline-primary:focus {
    background-color: var(--clms-text-link) !important;
    border-color: var(--clms-text-link) !important;
    color: var(--clms-white) !important;
  }

  .btn-outline-primary:active,
  .btn-outline-primary.active {
    background-color: var(--clms-accent-blue-focus) !important;
    border-color: var(--clms-accent-blue-focus) !important;
    color: var(--clms-white) !important;
  }
}

/* ===== SECONDARY BUTTONS ===== */
[data-bs-theme="dark"] {
  .btn-secondary {
    background-color: var(--clms-bg-tertiary) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-primary) !important;
  }

  .btn-secondary:hover,
  .btn-secondary:focus {
    background-color: var(--clms-hover-bg) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-primary) !important;
  }

  .btn-secondary:active,
  .btn-secondary.active {
    background-color: var(--clms-active-bg) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-primary) !important;
  }
}

/* ===== SUCCESS BUTTONS ===== */
[data-bs-theme="dark"] {
  .btn-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: var(--clms-white) !important;
  }

  .btn-success:hover,
  .btn-success:focus {
    background-color: #157347 !important;
    border-color: #157347 !important;
    color: var(--clms-white) !important;
  }

  .btn-outline-success {
    color: #198754 !important;
    border-color: #198754 !important;
  }

  .btn-outline-success:hover,
  .btn-outline-success:focus {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: var(--clms-white) !important;
  }
}

/* ===== DANGER BUTTONS ===== */
[data-bs-theme="dark"] {
  .btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: var(--clms-white) !important;
  }

  .btn-danger:hover,
  .btn-danger:focus {
    background-color: #bb2d3b !important;
    border-color: #bb2d3b !important;
    color: var(--clms-white) !important;
  }

  .btn-outline-danger {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
  }

  .btn-outline-danger:hover,
  .btn-outline-danger:focus {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: var(--clms-white) !important;
  }
}

/* ===== WARNING BUTTONS ===== */
[data-bs-theme="dark"] {
  .btn-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: var(--clms-black) !important;
  }

  .btn-warning:hover,
  .btn-warning:focus {
    background-color: #ffca2c !important;
    border-color: #ffca2c !important;
    color: var(--clms-black) !important;
  }

  .btn-outline-warning {
    color: #ffc107 !important;
    border-color: #ffc107 !important;
  }

  .btn-outline-warning:hover,
  .btn-outline-warning:focus {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: var(--clms-black) !important;
  }
}

/* ===== INFO BUTTONS ===== */
[data-bs-theme="dark"] {
  .btn-info {
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
    color: var(--clms-black) !important;
  }

  .btn-info:hover,
  .btn-info:focus {
    background-color: #31d2f2 !important;
    border-color: #31d2f2 !important;
    color: var(--clms-black) !important;
  }

  .btn-outline-info {
    color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
  }

  .btn-outline-info:hover,
  .btn-outline-info:focus {
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
    color: var(--clms-black) !important;
  }
}

/* ===== LIGHT BUTTONS ===== */
[data-bs-theme="dark"] {
  .btn-light {
    background-color: var(--clms-bg-tertiary) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-primary) !important;
  }

  .btn-light:hover,
  .btn-light:focus {
    background-color: var(--clms-hover-bg) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-primary) !important;
  }

  .btn-outline-light {
    color: var(--clms-text-primary) !important;
    border-color: var(--clms-border-primary) !important;
  }

  .btn-outline-light:hover,
  .btn-outline-light:focus {
    background-color: var(--clms-bg-tertiary) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-primary) !important;
  }
}

/* ===== DARK BUTTONS ===== */
[data-bs-theme="dark"] {
  .btn-dark {
    background-color: var(--clms-bg-primary) !important;
    border-color: var(--clms-border-secondary) !important;
    color: var(--clms-text-primary) !important;
  }

  .btn-dark:hover,
  .btn-dark:focus {
    background-color: var(--clms-bg-secondary) !important;
    border-color: var(--clms-border-secondary) !important;
    color: var(--clms-text-primary) !important;
  }

  .btn-outline-dark {
    border-color: var(--clms-text-muted) !important;
    color: var(--clms-text-primary) !important;
    background-color: var(--clms-transparent) !important;
  }

  .btn-outline-dark:hover,
  .btn-outline-dark:focus {
    background-color: var(--clms-text-muted) !important;
    border-color: var(--clms-text-muted) !important;
    color: var(--clms-white) !important;
  }
}

/* ===== LINK BUTTONS ===== */
[data-bs-theme="dark"] {
  .btn-link {
    color: var(--clms-text-link) !important;
  }

  .btn-link:hover,
  .btn-link:focus {
    color: var(--clms-text-link-hover) !important;
  }

  .btn-link:disabled,
  .btn-link.disabled {
    color: var(--clms-text-muted) !important;
  }
}

/* ===== BUTTON GROUPS ===== */
[data-bs-theme="dark"] {
  .btn-group .btn:not(:first-child),
  .btn-group-vertical .btn:not(:first-child) {
    border-left-color: var(--clms-border-primary) !important;
  }

  .btn-group .btn:not(:last-child),
  .btn-group-vertical .btn:not(:last-child) {
    border-right-color: var(--clms-border-primary) !important;
  }
}

/* ===== BUTTON FOCUS STATES ===== */
[data-bs-theme="dark"] {
  .btn:focus,
  .btn.focus {
    box-shadow: 0 0 0 0.2rem var(--clms-focus-shadow) !important;
  }

  .btn-primary:focus,
  .btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25) !important;
  }

  .btn-success:focus,
  .btn-success.focus {
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
  }

  .btn-danger:focus,
  .btn-danger.focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
  }

  .btn-warning:focus,
  .btn-warning.focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
  }

  .btn-info:focus,
  .btn-info.focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.25) !important;
  }
}

/* ===== CLOSE BUTTONS ===== */
[data-bs-theme="dark"] {
  .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
  }

  .btn-close:hover,
  .btn-close:focus {
    opacity: 0.75 !important;
  }
}