/* Minimal custom rules (non-color layout helpers and responsive tweaks).
   Colors live in theme.css. Keep only non-visual-essential tweaks here. */

/* Responsive tweaks: make container fluid on small screens */
@media (max-width: 576px) {
  .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px;
    padding-right: 12px;
  }

  .modal-dialog {
    max-width: calc(100% - 2rem);
    margin: 1rem;
  }
}

/* Dartboard styling (grid-based for simple layout) */
.dartboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; justify-items: stretch; align-items: stretch; }
.sector-btn { border-radius: 0.25rem; padding: 0.5rem; font-size: 0.95rem; min-width: 0; width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; }
.sector-placeholder { width: 100%; min-height: 36px; }
.center-bulls { display:flex; gap:0.5rem; justify-content:center; margin-top:0.75rem; }

/* Current visit grid above dartboard; aligns with the 3-column dartboard */
.visit-grid { width: 100%; display: grid; gap: 0.5rem; }
.visit-grid .badge { width: 100%; display: flex; align-items: center; justify-content: center; padding: 0.5rem; }
@media (max-width: 576px) {
  .visit-grid .badge { font-size: 0.8rem; padding: 0.35rem; }
}


.bg-accent {
	background-color: var(--app-accent) !important;
	color: #ffffff !important;
}

.bg-accent-2 {
	background-color: #14b8a6 !important; /* slightly darker teal */
	color: #ffffff !important;
}

/* Modifier and sector button tweaks */
.modifier-btn.active, .modifier-btn.btn-primary {
  color: #fff !important;
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}

/* Explicit filled styles for sector buttons by multiplier */
.sector-1 {
  background-color: #cfe7ff !important; /* light blue */
  color: #000000 !important; /* black text for contrast */
  border-color: #9fcfff !important;
}
/* Outer 25 gets a greenish tint distinct from other singles */
.sector-25 {
  background-color: #55ef55 !important; /* pale green */
  color: #0b3d0b !important; /* dark green/black text for contrast */
  border-color: #bfe6bf !important;
}
.sector-50 {
  background-color: #ffcfe6 !important; /* light pink */
  color: #000000 !important; /* black text for contrast */
  border-color: #ee1c1c !important;
}
.sector-2 {
  background-color: #ffc107 !important; /* warning */
  color: #000000 !important; /* black text as requested */
  border-color: #ffc107 !important;
}
.sector-3 {
  background-color: #dc3545 !important; /* danger */
  color: #ffffff !important; /* white text */
  border-color: #dc3545 !important;
}
.sector-0 {
  background-color: #e2e3e5 !important; /* light grey */
  color: #000000 !important; /* medium grey text */
  border-color: #d3d6d8 !important;
}

/* apply to buttons with parent having class */
.border-throw-1 { border: 3px solid #0b07ff !important; } /* blue */
.border-throw-2 { border: 3px solid #018b1c !important; } /* green */
.border-throw-3 { border: 3px solid #ff9c08 !important; } /* red */

@media (max-width: 576px) {
  .dartboard .sector .btn-group-vertical .btn { font-size: 0.7rem; padding: 0.2rem 0.3rem; }
}