/* Small custom layer on top of Bootstrap 5.1.3 (loaded from CDN in index.html) */

body {
  background: #f4f5f7;
  min-height: 100vh;
  transition: background-color .2s ease, color .2s ease;
}

.stage {
  min-height: calc(100vh - 56px - 70px); /* viewport minus navbar/footer */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}

.notice-card {
  width: 100%;
  max-width: 620px;
}

/* editable regions: quiet by default, show intent on hover/focus */
[contenteditable="true"] {
  outline: none;
  border-radius: .25rem;
  padding: 0 .15rem;
  margin: 0 -.15rem;
  cursor: text;
  transition: box-shadow .15s ease, background-color .15s ease;
}
[contenteditable="true"]:hover {
  box-shadow: 0 0 0 1px rgba(13, 110, 253, .35);
}
[contenteditable="true"]:focus {
  box-shadow: 0 0 0 2px rgba(13, 110, 253, .55);
  background-color: rgba(13, 110, 253, .06);
}

/* ---- dark mode ---- */
body.dark-mode {
  background: rgba(33, 37, 41, 1);
  color: #e7ecef;
}
body.dark-mode .navbar {
  background-color: rgba(33, 37, 41, 1) !important;
  border-bottom-color: #1d2024 !important;
}
body.dark-mode .navbar-brand,
body.dark-mode .navbar-text {
  color: #e7ecef !important;
}
body.dark-mode .footer {
  background-color: rgba(33, 37, 41, 1) !important;
  border-top-color: #1d2024 !important;
}
body.dark-mode .footer .text-muted {
  color: #9aa1a8 !important;
}
body.dark-mode .card {
  background-color: rgba(33, 37, 41, 1);
  border-color: #1d2024;
  color: #e7ecef;
}
body.dark-mode .alert-secondary {
  background-color: #e2e3e5;
  border-color: #1d2024;
  color: #41464b;
}
body.dark-mode a {
  color: #6ea8fe;
}
body.dark-mode [contenteditable="true"]:hover {
  box-shadow: 0 0 0 1px rgba(110, 168, 254, .45);
}
body.dark-mode [contenteditable="true"]:focus {
  box-shadow: 0 0 0 2px rgba(110, 168, 254, .6);
  background-color: rgba(110, 168, 254, .1);
}

#theme-toggle {
  white-space: nowrap;
}

/* ---- saved cards sidebar ---- */
#saved-cards-list .list-group-item {
  gap: .5rem;
}
body.dark-mode .offcanvas {
  background-color: rgba(33, 37, 41, 1);
  color: #e7ecef;
  border-color: #1d2024;
}
body.dark-mode .offcanvas .offcanvas-header {
  border-bottom-color: #1d2024 !important;
}
body.dark-mode .offcanvas .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
body.dark-mode .offcanvas .form-control {
  background-color: #1d2024;
  border-color: #1d2024;
  color: #e7ecef;
}
body.dark-mode .offcanvas .list-group-item {
  background-color: rgba(33, 37, 41, 1);
  border-color: #1d2024;
  color: #e7ecef;
}
body.dark-mode .offcanvas .btn-link {
  color: #6ea8fe;
}

/* ---- action buttons (Discord / Roblox style) ---- */
.btn-custom {
    padding: 0.5rem 1rem;
    font-weight: 600;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease-in-out;
}
.btn-discord {
    background-color: #5865f2;
    color: white;
    padding: 0.5rem 1rem;
    font-weight: 600;
    border-radius: 0.375rem;
    border: none;
    text-decoration: none;
    display: inline-block;
}
.btn-discord:hover {
    background-color: #4752c4;
    color: white;
}
.btn-discord:focus, .btn-discord.focus {
    box-shadow: 0 0 0 0.25rem rgba(86, 101, 242, 0.5);
}
.btn-roblox {
    background-color: #DC2625;
    color: white;
    padding: 0.5rem 1rem;
    font-weight: 600;
    border-radius: 0.375rem;
    border: none;
    text-decoration: none;
    display: inline-block;
}
.btn-roblox:hover {
    background-color: #B21E1F;
    color: white;
}
.btn-roblox:focus, .btn-roblox.focus {
    box-shadow: 0 0 0 0.25rem rgba(86, 101, 242, 0.5);
}
.icon-custom-roblox:before {
    margin: 0!important;
}

.submit-input:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}
/* ---- webhook modal dark mode ---- */
body.dark-mode .modal-content {
    background-color: rgba(33, 37, 41, 1);
    color: #e7ecef;
    border-color: #1d2024;
}
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: #1d2024;
}
body.dark-mode .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
body.dark-mode .modal .form-control {
    background-color: #1d2024;
    border-color: #1d2024;
    color: #e7ecef;
}
body.dark-mode .modal .form-text {
    color: #9aa1a8;
}