/* ==========================================
   CANVAS & STATUS
   ========================================== */
#kulkiCanvas {
    background-color: var(--bs-body-bg);
    cursor: crosshair;
}

/* Status badge – pill nad canvasem, czytelny w każdym motywie */
.game-status-badge {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.60);
    color: #fff;
    padding: 0.35em 1.1em;
    border-radius: 2em;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

[data-bs-theme="dark"] .game-status-badge {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
}

/* ==========================================
   KARTA KONFIGURACJI KULKI – hover
   ========================================== */
.ball-config-card {
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.ball-config-card:hover {
    border-color: #0d6efd !important;
    box-shadow: var(--bs-box-shadow-sm);
}

.kulki-range-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.kulki-paired-range {
    flex: 4 1 0;
    min-width: 0;
    width: auto;
}
.kulki-paired-num {
    flex: 1 1 0;
    min-width: 3.5rem;
    max-width: 5rem;
    padding: 0.25rem 0.375rem;
    text-align: center;
    font-size: 0.875rem;
    border-radius: var(--bs-border-radius);
    height: auto;
    aspect-ratio: auto;
    display: block;
}


/* Ukrywamy domyślne scrollbary/strzałki w inputach number */
.kulki-paired-num::-webkit-inner-spin-button,
.kulki-paired-num::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.kulki-paired-num[type=number] {
    -moz-appearance: textfield;
}

/* ==========================================
   PANEL BOCZNY – wysokość, oddech na cienie, flex
   ========================================== */
.kulki-sidebar {
    height: 800px;
    max-height: 800px;
    min-width: 0;
    padding: 0 3px;
}

/* Ensure number inputs have enough width for 3-digit numbers and stay centered */
.kulki-paired-num {
    min-width: 4.5rem !important;  /* Increased from 3.5rem */
    max-width: 6rem !important;    /* Increased from 5rem */
    text-align: center;            /* Ensure numbers stay centered */
    /* Ensure proper vertical centering of text */
    line-height: 1.5;
    /* Remove any potential padding issues that could cause misalignment */
    padding-top: calc(0.25rem - 1px) !important;
    padding-bottom: calc(0.25rem - 1px) !important;
    /* Ensure box-sizing doesn't interfere */
    box-sizing: border-box;
}

@media (max-width: 991.98px) {
    .kulki-sidebar {
        height: auto;
        max-height: none;
    }
}

/* Szerokość przycisku jak treść w .card.p-3 */
.kulki-sidebar-inset {
    padding-inline: var(--spacer);
}

/* ==========================================
   BRAKUJĄCE UTILITY CLASSES
   ========================================== */
.col-4  { flex: 0 0 auto; width: 33.33333333%; }
.col-8  { flex: 0 0 auto; width: 66.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* row gutters */
.g-2 { --bs-gutter-x: 0.5rem;  --bs-gutter-y: 0.5rem; }
.g-4 { --bs-gutter-x: 1.5rem;  --bs-gutter-y: 1.5rem; }

/* flex helpers */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: var(--spacer); }
.align-items-start { align-items: flex-start; }
.flex-shrink-0 { flex-shrink: 0; }
.overflow-auto { overflow: auto !important; }

/* spacing helpers */
.mt-1  { margin-top:     calc(var(--spacer) * 0.25) !important; }
.mt-3  { margin-top:     var(--spacer)               !important; }
.pb-2  { padding-bottom: calc(var(--spacer) * 0.5)   !important; }
.pe-1  { padding-right:  calc(var(--spacer) * 0.25)  !important; }
.pe-2  { padding-right:  calc(var(--spacer) * 0.5)   !important; }
.py-0  { padding-top: 0 !important; padding-bottom: 0 !important; }
.px-2  { padding-left: calc(var(--spacer) * 0.5) !important; padding-right: calc(var(--spacer) * 0.5) !important; }

/* positioning */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.top-0             { top: 0 !important; }
.start-50          { left: 50% !important; }
.translate-middle-x { transform: translateX(-50%) !important; }

/* text helpers */
.fw-bold    { font-weight: 700 !important; }
.text-primary { color: #0d6efd !important; }
.text-muted   { color: rgba(var(--bs-secondary-color-rgb), 0.65) !important; }
.w-100  { width: 100% !important; }
.h-auto { height: auto !important; }
.small  { font-size: .875em; }

/* shadow */
.shadow-sm { box-shadow: var(--bs-box-shadow-sm) !important; }

/* border helpers */
.border-bottom { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
.border-top    { border-top:    var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }

/* ==========================================
   PRZYCISKI – warianty kolorystyczne
   ========================================== */
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #198754;
    --bs-btn-border-color: #198754;
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}
.btn-success:hover { background-color: #157347; border-color: #146c43; color: #fff; }

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #dc3545;
    --bs-btn-border-color: #dc3545;
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}
.btn-danger:hover { background-color: #bb2d3b; border-color: #b02a37; color: #fff; }

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}
.btn-primary:hover { background-color: #0b5ed7; border-color: #0a58ca; color: #fff; }

.btn-warning {
    --bs-btn-color: #000;
    --bs-btn-bg: #ffc107;
    --bs-btn-border-color: #ffc107;
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}
.btn-warning:hover { background-color: #ffca2c; border-color: #ffc720; color: #000; }

.btn-outline-danger {
    color: #dc3545;
    background-color: transparent;
    border-color: #dc3545;
}
.btn-outline-danger:hover { background-color: #dc3545; border-color: #dc3545; color: #fff; }

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: calc(var(--bs-border-radius) * 0.75);
}

/* ==========================================
   BADGE (legacy – zostawione dla pewności)
   ========================================== */
.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--bs-border-radius);
}
.bg-dark { background-color: rgba(var(--bs-dark-rgb), 1) !important; color: #fff; }
.fs-6 { font-size: 1rem !important; }

/* ==========================================
   CARD
   ========================================== */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--bs-body-bg);
    background-clip: border-box;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
.card-header {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity));
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    border-top-left-radius:  calc(var(--bs-border-radius) - var(--bs-border-width));
    border-top-right-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
}
.card-body {
    flex: 1 1 auto;
    padding: 0.75rem 1rem;
}

/* ==========================================
   FORM LABEL
   ========================================== */
.form-label {
    margin-bottom: 0.25rem;
    font-size: 0.875em;
    display: block;
}

/* ==========================================
   FORM RANGE (suwak)
   ========================================== */
.form-range {
    width: 100%;
    height: 1.25rem;
    padding: 0;
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.form-range:focus { outline: none; }
.form-range:disabled { opacity: 0.5; cursor: not-allowed; }

/* WebKit */
.form-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    background-color: var(--bs-tertiary-bg);
    border: none;
    border-radius: 1rem;
}
.form-range::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -0.25rem;
    background-color: #0d6efd;
    border: 0;
    border-radius: 1rem;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 0 0 2px rgba(13,110,253,.25);
    transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-range::-webkit-slider-thumb:hover { background-color: #0b5ed7; }
.form-range:disabled::-webkit-slider-thumb { background-color: #adb5bd; box-shadow: none; }

/* Firefox */
.form-range::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    background-color: var(--bs-tertiary-bg);
    border: none;
    border-radius: 1rem;
}
.form-range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background-color: #0d6efd;
    border: 0;
    border-radius: 1rem;
}
.form-range:disabled::-moz-range-thumb { background-color: #adb5bd; }

/* dark mode track */
[data-bs-theme="dark"] .form-range::-webkit-slider-runnable-track { background-color: #495057; }
[data-bs-theme="dark"] .form-range::-moz-range-track { background-color: #495057; }

/* ==========================================
   FORM SELECT
   ========================================== */
.form-select {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    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='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}
.form-select-sm {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    font-size: 0.875rem;
    border-radius: calc(var(--bs-border-radius) * 0.75);
}

[data-bs-theme="dark"] .form-select {
    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='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ==========================================
   FORM CONTROL (input text / color)
   ========================================== */
.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}
.form-control-color {
    width: 2.5rem;
    height: 2rem;
    padding: 0.2rem;
    cursor: pointer;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

/* ==========================================
   FORM CHECK & SWITCH
   ========================================== */
.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: 0.125rem;
}
.form-check .form-check-input {
    float: left;
    margin-left: -1.5em;
}
.form-check-input {
    width: 1em;
    height: 1em;
    margin-top: 0.25em;
    vertical-align: top;
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.form-check-input[type="checkbox"] {
    border-radius: 0.25em;
}
.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: .8em;
}

.form-switch {
    padding-left: 2.5em;
}
.form-switch .form-check-input {
    width: 2em;
    margin-left: -2.5em;
    border-radius: 2em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280,0,0,0.25%29'/%3e%3c/svg%3e");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: background-position .15s ease-in-out;
}
.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-label {
    cursor: pointer;
    font-size: 0.875em;
}

[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,0.35%29'/%3e%3c/svg%3e");
}