/* Sidebar "Color Tracts" status + save-toggle (always visible in the group) */

.color-rule-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 8px;
    background: #f5efe8;
    border-left: 3px solid #b96c28;
    border-radius: 3px;
    font-size: 11px;
    color: #7a4d27;
    font-weight: 500;
}

.color-rule-status-icon {
    font-size: 13px;
    line-height: 1;
}

#color-rule-status-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.color-save-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    color: #7a4d27;
    cursor: pointer;
    user-select: none;
}

.color-save-toggle input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.color-save-toggle:hover span {
    color: #5a3a1d;
}

/* Color-blind safe palette toggle (top of color rules dialog) */
.color-rules-cbsafe-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: #f0f4f8;
    border: 1px solid #c9d6e0;
    border-radius: 4px;
    font-size: 12px;
    color: #2b4a6c;
    cursor: pointer;
    user-select: none;
}

.color-rules-cbsafe-toggle input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.color-rules-cbsafe-toggle:hover {
    background: #e7eef5;
}

/* Color Rules Dialog — modal for Color by Attribute feature */

.color-rules-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9000;
    align-items: center;
    justify-content: center;
}

.color-rules-backdrop.visible {
    display: flex;
}

.color-rules-dialog {
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.color-rules-content {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.color-rules-summary {
    padding: 10px 12px;
    background: #f5efe8;
    border-left: 3px solid #b96c28;
    border-radius: 4px;
    font-size: 13px;
    color: #7a4d27;
    margin-bottom: 14px;
    line-height: 1.4;
}

.color-rules-section {
    margin-bottom: 14px;
}

.color-rules-status-section {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #e0d4c2;
    border-radius: 5px;
    background: #fafafa;
}

.color-rules-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.color-rules-status-header strong {
    font-size: 13px;
    color: #7a4d27;
}

.color-rules-reset-defaults {
    padding: 3px 8px;
    font-size: 11px;
    background: white;
    color: #7a4d27;
    border: 1px solid #d4c5b0;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
}

.color-rules-reset-defaults:hover {
    background: #f5efe8;
    border-color: #b96c28;
}

.color-rules-status-hint {
    font-size: 11px;
    color: #a08567;
    margin-bottom: 8px;
    line-height: 1.3;
}

.color-rules-status-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.color-rules-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    font-size: 12px;
    color: #333;
}

.color-rules-status-label {
    color: #7a4d27;
}

.color-rules-section label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #7a4d27;
    margin-bottom: 6px;
}

.color-rules-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d4c5b0;
    border-radius: 4px;
    font-size: 13px;
    background: white;
    color: #333;
}

.color-rules-select:focus {
    outline: none;
    border-color: #b96c28;
    box-shadow: 0 0 0 2px rgba(185, 108, 40, 0.15);
}

.color-rules-value-list {
    border: 1px solid #e0d4c2;
    border-radius: 4px;
    background: #fafafa;
    padding: 8px 10px;
    margin-bottom: 14px;
}

.color-rules-value-header {
    font-size: 12px;
    color: #7a4d27;
    padding: 4px 0 8px 0;
    border-bottom: 1px solid #e0d4c2;
    margin-bottom: 8px;
}

.color-rules-filter-note {
    margin: 6px 0 10px 0;
    padding: 8px 10px;
    background: #fff4e6;
    border: 1px solid #ffd9a8;
    border-radius: 4px;
}

.color-rules-filter-btn {
    width: 100%;
    padding: 7px 10px;
    background: #b96c28;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.color-rules-filter-btn:hover {
    background: #9d5820;
}

.color-rules-filter-hint {
    margin-top: 6px;
    font-size: 11px;
    color: #7a4d27;
    line-height: 1.4;
}

/* Numeric column: categorical / gradient mode toggle */
.color-rules-mode-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 10px;
    background: #fff4e6;
    border: 1px solid #ffd9a8;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #7a4d27;
    flex-wrap: wrap;
}

.color-rules-mode-toggle .color-rules-mode-label {
    font-weight: 500;
}

.color-rules-mode-toggle label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.color-rules-mode-toggle input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

/* Gradient controls */
.color-rules-gradient-controls {
    padding: 10px 12px;
    background: #fafafa;
    border: 1px solid #e0d4c2;
    border-radius: 4px;
}

.color-rules-gradient-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.color-rules-gradient-row label {
    font-size: 12px;
    font-weight: 500;
    color: #7a4d27;
    min-width: 80px;
}

.color-rules-gradient-row .color-rules-select {
    flex: 1;
}

.color-rules-gradient-preview {
    display: flex;
    height: 22px;
    border-radius: 3px;
    overflow: hidden;
    margin: 8px 0;
    border: 1px solid #d4c5b0;
}

.color-rules-gradient-swatch {
    flex: 1;
    height: 100%;
}

.color-rules-gradient-range {
    display: flex;
    align-items: end;
    gap: 10px;
    margin: 8px 0 4px 0;
}

.color-rules-gradient-range label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    color: #7a4d27;
}

.color-rules-gradient-range input[type="number"] {
    padding: 5px 6px;
    border: 1px solid #d4c5b0;
    border-radius: 3px;
    font-size: 12px;
    width: 110px;
    color: #333;
}

.color-rules-gradient-range input[type="number"]:focus {
    outline: none;
    border-color: #b96c28;
    box-shadow: 0 0 0 2px rgba(185, 108, 40, 0.15);
}

.color-rules-gradient-hint {
    font-size: 11px;
    color: #a08567;
    margin-top: 4px;
}

/* "Manage Equivalences" button in the Color by Attribute dialog */
.color-rules-equivalences-link {
    margin-top: 4px;
    font-size: 12px;
    color: #7a4d27;
}

.color-rules-equivalences-link button {
    background: none;
    border: none;
    padding: 0;
    color: #b96c28;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    text-decoration: underline;
}

.color-rules-equivalences-link button:hover {
    color: #9d5820;
}

/* ======================================================================
   Column Equivalences Dialog
   ====================================================================== */

.equivalences-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9100;
    align-items: center;
    justify-content: center;
}

.equivalences-backdrop.visible {
    display: flex;
}

.equivalences-dialog {
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    width: 92%;
    max-width: 640px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.equivalences-content {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.equivalences-intro {
    padding: 10px 12px;
    background: #f5efe8;
    border-left: 3px solid #b96c28;
    border-radius: 4px;
    font-size: 13px;
    color: #7a4d27;
    line-height: 1.4;
    margin-bottom: 14px;
}

.equivalences-section {
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid #e0d4c2;
    border-radius: 5px;
    background: #fafafa;
}

.equivalences-section-header {
    font-size: 13px;
    font-weight: 600;
    color: #7a4d27;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e0d4c2;
}

.equivalences-empty {
    padding: 12px;
    text-align: center;
    color: #a08567;
    font-size: 12px;
    font-style: italic;
}

.equivalences-group-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.equivalences-group-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 8px;
    padding: 8px 10px;
    background: white;
    border: 1px solid #e0d4c2;
    border-radius: 4px;
}

.equivalences-group-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #7a4d27;
    grid-column: 1;
}

.equivalences-group-icon {
    font-size: 14px;
}

.equivalences-group-members {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.equivalences-member-chip {
    font-size: 11px;
    padding: 2px 7px;
    background: #f5efe8;
    color: #7a4d27;
    border: 1px solid #e0d4c2;
    border-radius: 10px;
}

.equivalences-group-actions {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
}

.equivalences-delete-btn {
    padding: 4px 10px;
    font-size: 11px;
    background: white;
    color: #dc3545;
    border: 1px solid #e0d4c2;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
}

.equivalences-delete-btn:hover {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

.equivalences-add-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.equivalences-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.equivalences-form-label {
    font-size: 12px;
    font-weight: 600;
    color: #7a4d27;
}

.equivalences-form-row input[type="text"] {
    padding: 7px 10px;
    border: 1px solid #d4c5b0;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
}

.equivalences-form-row input[type="text"]:focus {
    outline: none;
    border-color: #b96c28;
    box-shadow: 0 0 0 2px rgba(185, 108, 40, 0.15);
}

.equivalences-member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px 10px;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
    background: white;
    border: 1px solid #e0d4c2;
    border-radius: 4px;
}

.equivalences-member-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
}

.equivalences-member-option input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.equivalences-member-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.equivalences-form-hint {
    font-size: 11px;
    color: #a08567;
    line-height: 1.4;
}

.equivalences-form-actions {
    display: flex;
    justify-content: flex-end;
}

.equivalences-save-btn {
    padding: 7px 16px;
    background: #b96c28;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.equivalences-save-btn:hover:not(:disabled) {
    background: #9d5820;
}

.equivalences-save-btn:disabled {
    background: #d4c5b0;
    cursor: not-allowed;
}

.equivalences-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid #e0d4c2;
}

.equivalences-actions button {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #d4c5b0;
    background: white;
    color: #7a4d27;
}

.equivalences-actions button:hover {
    background: #f5efe8;
}

/* ======================================================================
   On-map Color Legend
   ====================================================================== */

.color-legend {
    /* v2.13.2.8: auto-stretch between the bottom edge of the Section
     * Information panel and the top of the Mapbox native controls,
     * hugging the right edge.
     *
     * --info-panel-bottom and --attribute-drawer-height are kept live
     * by colorLegend.js (ResizeObserver + MutationObserver). The
     * top-anchor is `max(70px, info-panel-bottom + 10)` so the legend
     * sits 10px below the info panel, or 10px below the toolbar when
     * the info panel is hidden. The bottom-anchor adds the drawer
     * height to a 80px clearance above the Mapbox zoom controls (which
     * move up with the drawer, so the same buffer keeps clearing them
     * regardless of drawer state). When drawer height is 0 the bottom
     * is just 80. */
    position: fixed;
    top: max(70px, calc(var(--info-panel-bottom, 70px) + 10px));
    bottom: calc(80px + var(--attribute-drawer-height, 0px));
    right: 10px;                   /* hug right edge */
    width: 240px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #d4c5b0;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    font-size: 12px;
    color: #333;
    z-index: 500;                  /* above map, below modals (which are 9000+) */
    overflow: visible;             /* let the slide-toggle stick out past the left edge */
    display: none;                 /* hidden until .visible is set */
    transition: transform 0.25s ease;
}

/* v2.13.2.8: the legend's `bottom` is now driven by
 * `--attribute-drawer-height` (set live by colorLegend.js), so the
 * legacy `bottom: 360px` static override has been removed. */

.color-legend.visible {
    display: flex;
    flex-direction: column;
}

/* Slid-away state: entire legend translates off the right edge of the
   screen. The slide-toggle (positioned at the legend's left edge) moves
   with it and ends up visible at the right edge — so the user always has
   a way to pull the legend back. */
.color-legend.slid-away {
    /* v2.13.2.6: legend now anchors at right:10. Translate by
       width + right-offset = 240 + 10 = 250px so the legend's left
       edge lands exactly at the viewport's right edge. The slide-toggle
       (sitting 18px LEFT of the legend's left edge) ends up 18px inside
       the viewport — visible and clickable so the user can always pull
       the legend back. */
    transform: translateX(calc(100% + 10px));
}

/* Small side tab that slides the legend in/out. Sticks out past the left
   edge of the legend — proportioned to roughly match the header height
   so it doesn't visually overpower the panel. Vertically centered on the
   legend itself, so when collapsed it centers on the header alone and
   when expanded it centers on the full panel. */
.color-legend-slide-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -18px;
    width: 18px;
    height: 28px;
    background: white;
    border: 1px solid #d4c5b0;
    border-right: none;            /* seam against the legend */
    border-radius: 4px 0 0 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #b96c28;
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.08);
    padding: 0;
    line-height: 1;
}

.color-legend-slide-toggle:hover {
    background: #f5efe8;
}

/* Flip the chevron direction when slid-away */
.color-legend.slid-away .color-legend-slide-toggle-arrow {
    transform: rotate(180deg);
}

.color-legend-slide-toggle-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.color-legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    background: #b96c28;
    color: white;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    font-size: 12px;
}

.color-legend-header:hover {
    background: #9d5820;
}

.color-legend-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.color-legend-chevron {
    font-size: 12px;
    margin-left: 8px;
    transition: transform 0.15s ease;
}

.color-legend.collapsed .color-legend-chevron {
    transform: rotate(-90deg);
}

/* v2.13.2.9: each rule scope (tracts/wells/permits/production)
 * renders inside a .color-legend-section wrapper. For the body's
 * `flex: 1` to actually claim the remaining vertical space, the
 * section itself has to be a flex column too. With multiple sections
 * they share the legend's available height proportionally; with a
 * single section (the common case) it fills the legend.
 * `overflow: hidden` keeps overflowing rows clipped to the section
 * box so the body's auto-scrollbar handles the spill correctly. */
.color-legend-section {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.color-legend-body {
    padding: 8px 10px;
    overflow-y: auto;
    /* Fill whatever vertical space the section gives us; min-height:0
     * lets the body shrink below content size and scroll instead of
     * pushing the legend's bottom anchor outward. */
    flex: 1 1 0;
    min-height: 0;
}

.color-legend.collapsed .color-legend-body {
    display: none;
}

/* Gradient mode */
.color-legend-gradient-strip {
    height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 4px;
}

.color-legend-gradient-range {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #7a4d27;
    font-weight: 500;
}

/* Categorical mode - sort-arrow header aligned with the row grid below:
   [swatch-spacer 16px] [name column 1fr] [count column auto] */
.color-legend-sort-header {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ecdfce;
}

.color-legend-sort-spacer {
    /* Empty cell above the swatch column so the arrows line up over name/count */
}

.color-legend-sort-col {
    display: inline-flex;
    gap: 1px;
    line-height: 1;
}

/* Arrow buttons — contain an inline SVG triangle whose fill uses
   `currentColor`, so active/hover just change the button's color. */
.color-legend-sort-arrow {
    background: transparent;
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    color: #c8b79d;                 /* muted by default */
    padding: 1px 2px;
    margin: 0;
    cursor: pointer;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}

.color-legend-sort-arrow svg {
    display: block;
}

.color-legend-sort-arrow:hover {
    color: #7a4d27;
    background: #f5efe8;
}

/* The trailing `background` declarations override a global
   `button.active { background: #b96c28 }` rule in overlays-controls.css
   that was filling these tiny buttons with a solid orange block. */
.color-legend-sort-arrow.active {
    color: #b96c28;                 /* the legend's accent orange */
    background: transparent;
}

.color-legend-sort-arrow.active:hover {
    background: #f5efe8;
}

.color-legend-rows {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.color-legend-row {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: #333;
    padding: 2px 4px;
    margin: 0 -4px;        /* let hover/active background extend to panel edge */
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, box-shadow 0.12s;
}

.color-legend-row:hover {
    background: #f5efe8;
}

/* v2.10.2.0: active isolation row. Heavier border + accent so the user can
   see at a glance which values are currently isolated. */
.color-legend-row-isolated {
    background: #fdf2e6;
    box-shadow: inset 0 0 0 1px #b96c28;
}

.color-legend-row-isolated:hover {
    background: #fbe8d2;
}

/* v2.10.2.0: "Show all" reset button — visible only when isolation is
   active for this scope. Sits between the sort header and the rows. */
.color-legend-show-all {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.color-legend-show-all-btn {
    background: transparent;
    border: 1px solid #d4c5b0;
    color: #7a4d27;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
}

.color-legend-show-all-btn:hover {
    background: #f5efe8;
    border-color: #b96c28;
}

/* v2.10.2.3: per-scope ✕ button in the legend section header. One-click
   turns off the color rule for that scope. */
.color-legend-clear-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #888;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    padding: 0;
    line-height: 16px;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.color-legend-clear-btn:hover {
    background: #fdf2e6;
    color: #b96c28;
    border-color: #b96c28;
}

/* v2.10.2.2: dim-intensity slider — visible only when this scope has
   active isolation. Slider drag updates non-isolated opacity in real time. */
.color-legend-intensity {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 6px;
    padding: 3px 4px;
    background: #fbf6ee;
    border: 1px solid #ecdfce;
    border-radius: 3px;
}

.color-legend-intensity-label {
    font-size: 10px;
    color: #6b5536;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.color-legend-intensity-slider {
    flex: 1;
    accent-color: #b96c28;
    cursor: pointer;
    height: 14px;
}

.color-legend-intensity-extremes {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: #c8b79d;
}

.color-legend-intensity-extremes span:first-child {
    /* "Hidden" end — hollow */
    color: #c8b79d;
}

.color-legend-intensity-extremes span:last-child {
    /* "Subtle" end — solid accent */
    color: #b96c28;
}

.color-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.color-legend-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.color-legend-count {
    font-variant-numeric: tabular-nums;
    color: #7a4d27;
    font-weight: 500;
    font-size: 11px;
    padding: 1px 5px;
    background: #f5efe8;
    border-radius: 8px;
}

.color-legend-empty {
    font-size: 11px;
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 6px 0;
}

.color-rules-value-rows {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 4px;
}

.color-rules-value-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 13px;
    color: #333;
}

.color-rules-value-row:not(:last-child) {
    border-bottom: 1px solid #f0e6db;
}

.color-rules-swatch {
    width: 30px;
    height: 24px;
    border: 1px solid #d4c5b0;
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
    background: white;
    flex-shrink: 0;
}

.color-rules-swatch:hover {
    border-color: #b96c28;
}

.color-rules-value-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.color-rules-value-badge {
    font-size: 11px;
    padding: 2px 6px;
    background: #e8dccb;
    color: #7a4d27;
    border-radius: 10px;
    flex-shrink: 0;
}

.color-rules-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #e0d4c2;
}

.color-rules-actions-right {
    display: flex;
    gap: 8px;
}

.color-rules-actions button {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}

.color-rules-actions button#cr-apply-btn {
    background: #b96c28;
    color: white;
}

.color-rules-actions button#cr-apply-btn:hover:not(:disabled) {
    background: #9d5820;
}

.color-rules-actions button#cr-apply-btn:disabled {
    background: #d4c5b0;
    cursor: not-allowed;
}

.color-rules-actions button.secondary {
    background: white;
    color: #7a4d27;
    border: 1px solid #d4c5b0;
}

.color-rules-actions button.secondary:hover {
    background: #f5efe8;
}