/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn.active:focus,
.btn.focus, .btn:active.focus, .btn.active.focus {
  outline: none;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Make floating labels (when acting as placeholders) more visible */
.form-floating > label {
    color: #495057; /* Corresponds to Bootstrap's $gray-700. Adjust if needed. */
}

/* Room Card Styles */
.custom-room-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1.5px 4px rgba(0,0,0,0.03);
  border: none;
  background: #fff;
  transition: box-shadow 0.2s;
  margin-bottom: 1.5rem;
}
.custom-room-card:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 3px 8px rgba(0,0,0,0.05);
}

.icon-bg {
  background: #f5f7fa;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.badge-status {
  font-size: 0.9em;
  padding: 0.35em 0.8em;
  border-radius: 6px;
  font-weight: 500;
  background: #eafaf1;
  color: #28a745;
  border: 1px solid #d1f5e0;
}

.badge-participants {
  font-size: 0.9em;
  padding: 0.35em 0.8em;
  border-radius: 6px;
  font-weight: 500;
  background: #f5f7fa;
  color: #6c757d;
  border: 1px solid #e2e6ea;
}

.custom-room-card .card-footer {
  background: #f8f9fa;
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.btn-outline-primary {
  border-radius: 6px;
  font-weight: 500;
}

.btn-outline-secondary {
  border-radius: 6px;
  font-weight: 500;
}

/* Force Quick Action buttons on Details page to show their colors */
/* Targeting the specific card body where these buttons are */
.card .card-body .btn-success,
.card .card-body .btn-success:hover,
.card .card-body .btn-success:focus,
.card .card-body .btn-success:active {
    background-color: var(--bs-success) !important; /* Use Bootstrap CSS variable for success */
    border-color: var(--bs-success) !important;
    color: white !important; /* Assuming white text is desired */
}

.card .card-body .btn-info,
.card .card-body .btn-info:hover,
.card .card-body .btn-info:focus,
.card .card-body .btn-info:active {
    background-color: var(--bs-info) !important; /* Use Bootstrap CSS variable for info */
    border-color: var(--bs-info) !important;
    color: white !important; /* Assuming white text is desired for btn-info, adjust if not */
}

/*
 * The Quartz theme's white Bootstrap hamburger SVG icon becomes invisible on a white navbar; apply filter: invert(1) to flip it to black for visibility.
*/
.navbar-toggler-icon {
    filter: invert(1);
}

/* Override for Bootstrap theme that forces list-group-item text to be white */
.card .list-group-item,
.card .list-group-item.bg-light {
    color: #212529; /* Black text */
}

/* Remove box-shadow from list groups */
.list-group.no-shadow {
    box-shadow: none !important;
}

/* Participant tag cloud styles */
.participant-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.participant-tag {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    color: #495057;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

.participant-tag:hover {
    background-color: #e9ecef;
    text-decoration: none;
}

/* Fix for Quartz theme making dropdown options white on a white background */
.form-control option {
    color: #000; /* Or use var(--bs-body-color) if available and suitable */
}