.kbo-club-manager {
    padding: 16px;
}

/* Edit Club modal, styled to read as a standalone window. The jQuery UI / Ignite UI
   themes leave the wrapper translucent and inherit the page background, which made the
   form hard to read, so every layer is forced opaque and given its own chrome.
   !important is used because the CDN theme stylesheets load after this file. */
.kbo-cm-dialog.ui-dialog {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #8a8a8a !important;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
    opacity: 1 !important;
    padding: 0;
    z-index: 10001;
}

.kbo-cm-dialog .ui-dialog-titlebar {
    position: relative;
    background: #337ab7 !important;
    background-image: none !important;
    border: 0;
    border-radius: 5px 5px 0 0;
    padding: 10px 44px 10px 14px;
    color: #fff !important;
    opacity: 1 !important;
    cursor: move;
}

.kbo-cm-dialog .ui-dialog-title {
    color: #fff !important;
    font-weight: 600;
    font-size: 15px;
}

.kbo-cm-dialog .ui-dialog-content {
    background: #fff !important;
    background-image: none !important;
    color: #333;
    opacity: 1 !important;
    padding: 14px;
    max-height: 75vh;
    overflow-y: auto;
}

/* The editor panel sits inside the dialog; drop its standalone card styling so the
   dialog itself provides the single visible frame. */
.kbo-cm-dialog .kbo-cm-editor {
    flex: none;
    max-width: none;
    width: auto;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

.kbo-cm-dialog .kbo-cm-editor > h4 {
    display: none;
}

/* jQuery UI renders the close button as an icon sprite that is easy to lose against
   the titlebar; render a plain, always-visible X instead. */
.kbo-cm-dialog .ui-dialog-titlebar-close {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .6) !important;
    border-radius: 3px;
    background: transparent !important;
    background-image: none !important;
    text-indent: 0;
    opacity: 1 !important;
    cursor: pointer;
}

.kbo-cm-dialog .ui-dialog-titlebar-close:hover {
    background: #d9534f !important;
    border-color: #c9302c !important;
}

.kbo-cm-dialog .ui-dialog-titlebar-close .ui-icon {
    display: none;
}

.kbo-cm-dialog .ui-dialog-titlebar-close::before {
    content: "\00D7";
    display: block;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #fff;
}

/* Dim the page behind the modal so the dialog reads as a separate window. */
.ui-widget-overlay {
    background: #000 !important;
    background-image: none !important;
    opacity: .6 !important;
    z-index: 10000;
}

.kbo-cm-toolbar {
    margin: 8px 0;
}

.kbo-cm-status {
    margin-left: 12px;
    font-style: italic;
}

.kbo-cm-progress {
    margin: 8px 0 12px;
    padding: 12px;
    border: 1px solid #d0d7de;
    border-left: 4px solid #337ab7;
    border-radius: 4px;
    background: #f6f8fa;
}

.kbo-cm-progress-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: #1f4f7d;
    font-weight: 600;
}

.kbo-cm-progress-spinner {
    width: 24px;
    height: 24px;
    animation: kbo-cm-spin 1s linear infinite;
}

.kbo-cm-progress-track {
    position: relative;
    overflow: hidden;
    height: 14px;
    border-radius: 999px;
    background: #dbe5f1;
}

.kbo-cm-progress-bar {
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #337ab7 0%, #5bc0de 100%);
    animation: kbo-cm-progress-slide 1.2s ease-in-out infinite;
}

/* Output of the one-off "Backfill Missing Coordinates" maintenance job. */
.kbo-cm-backfill-result {
    margin: 8px 0 12px;
    padding: 10px 12px;
    border: 1px solid #d0d7de;
    border-left: 4px solid #337ab7;
    border-radius: 4px;
    background: #f6f8fa;
    font-size: 13px;
}

.kbo-cm-backfill-result ul {
    margin: 6px 0 0 18px;
    padding: 0;
}

.kbo-cm-backfill-result li {
    margin-bottom: 2px;
    color: #a94442;
}

.kbo-cm-backfill-result a {
    color: #a94442;
    text-decoration: underline;
}

.kbo-cm-backfill-result a:hover,
.kbo-cm-backfill-result a:focus {
    color: #843534;
}

.kbo-cm-legend {
    margin: 8px 0;
    font-size: 12px;
}

.kbo-cm-legend-item {
    margin-right: 16px;
}

.kbo-cm-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    vertical-align: middle;
    border-radius: 50%;
}

.kbo-cm-swatch.kbo-cm-needs {
    background: #d9534f;
}

/* Status button shown in the grid "Needs Location" columns. */
.kbo-cm-location-button {
    min-width: 24px;
    padding: 1px 6px;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    cursor: default;
}

.kbo-cm-location-button.kbo-cm-needs {
    border-color: #c9302c;
    background: #d9534f;
}

.kbo-cm-location-button.kbo-cm-ok {
    border-color: #227d22;
    background: #2ca02c;
}

/* Two-column layout: grid on the left, editor on the right. */
.kbo-cm-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.kbo-cm-grid {
    flex: 1 1 60%;
    min-width: 0;
}

.kbo-cm-editor {
    flex: 0 0 360px;
    max-width: 360px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px;
    background: #fafafa;
}

.kbo-cm-editor h4 {
    margin-top: 0;
}

.kbo-cm-field {
    margin-bottom: 8px;
}

.kbo-cm-field label {
    display: block;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 2px;
}

.kbo-cm-field input[type="text"],
.kbo-cm-field textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Read-only latitude/longitude rows. */
.kbo-cm-readonly label {
    display: inline-block;
    width: 90px;
}

.kbo-cm-readonly span {
    font-family: monospace;
}

.kbo-cm-geostatus {
    margin-left: 8px;
    font-style: italic;
    font-size: 12px;
    color: #666;
}

.kbo-cm-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

@keyframes kbo-cm-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes kbo-cm-progress-slide {
    0% {
        left: -40%;
    }

    100% {
        left: 100%;
    }
}

@media (max-width: 768px) {
    .kbo-cm-body {
        flex-direction: column;
    }

    .kbo-cm-editor {
        flex-basis: auto;
        max-width: none;
        width: 100%;
    }
}