/* Unified shape styling for all views */

/* Color definitions */
:root {
    /* Status colors (now border colors) */
    --color-available: #555555;
    --color-pending: #555555;
    --color-sold: #555555;
    --color-not-available: #555555;
    --color-unknown: #555555;
    
    /* Group colors ORIGINAL
    --color-street-food: #ffecb3;
    --color-makers-market: #ffd700;
    --color-food-retail: #95c7ed;
    --color-community-services: #ece2ce;
    --color-coffee-shop: #ff6347;
    --color-if-25-services-public: #dfa1fa;
    --color-if-25-services-vendors: #DDDDDD;
    --color-activation: #d9edd3;
    --color-alcoholic-bar: #00853e;
    --color-wine-spirits: #00853e;
    --color-retail: #bce0f7; */ 

    --color-street-food: #ffecb3;
    --color-makers-market: #ffecb3;
    --color-food-retail: #ffecb3;
    --color-community-services: #ffecb3;
    --color-coffee-shop: #ffecb3;
    --color-if-25-services-public: #ffecb3;
    --color-if-25-services-vendors: #DDDDDD;
    --color-activation: #ffecb3;
    --color-alcoholic-bar: #ffecb3;
    --color-wine-spirits: #ffecb3;
    --color-retail: #ffecb3;      

    --color1: #ffecb3;
    --color2: #ffd700;    
    --color3: #f39200;
    --color4: #ff6347;    
    --color5: #d5121e; 
    --color6: #ff0000;
    --color7: #00853e;
    --color8: #95c7ed;
    --color9: #ece2ce;

    /* Other styling variables */
    --shape-opacity: 0.7;
    --shape-hover-opacity: 0.9;
    --shape-stroke-width: 2px;
    --shape-outline-width: 2px;
    --shape-outline-color: #ff0000;
    --border-thickness: 1px;
}

/* Base shape styling */
.shape-rect {
    cursor: pointer;
    opacity: var(--shape-opacity);
    transition: opacity 0.2s, stroke-width 0.2s;
    stroke-width: var(--border-thickness);
    stroke: transparent; /* Default transparent stroke */
    stroke-linejoin: round; /* Round the corners of the stroke */
}

/* Fill colors based on group (swapped from status) */
.shape-rect[data-group="activation"] {
    fill: var(--color-activation) !important;
}
.shape-rect[data-group="street-food"] {
    fill: var(--color-street-food) !important;
}
.shape-rect[data-group="alcoholic-bar"] {
    fill: var(--color-alcoholic-bar) !important;
}
.shape-rect[data-group="wine-spirits"] {
    fill: var(--color-wine-spirits) !important;
}
.shape-rect[data-group="coffee-shop"] {
    fill: var(--color-coffee-shop) !important;
}
.shape-rect[data-group="food-retail"] {
    fill: var(--color-food-retail) !important;
}
.shape-rect[data-group="if-25-services-public"] {
    fill: var(--color-if-25-services-public) !important;
}
.shape-rect[data-group="makers-market"] {
    fill: var(--color-makers-market) !important;
}
.shape-rect[data-group="if-25-services-vendors"] {
    fill: var(--color-if-25-services-vendors) !important;
}
.shape-rect[data-group="community-services"] {
    fill: var(--color-community-services) !important;
}
.shape-rect[data-group="retail"] {
    fill: var(--color-retail) !important;
}

/* Border colors based on status (swapped from group) */
.shape-rect[data-status="available"] {
    stroke: var(--color-available);
}
.shape-rect[data-status="pending"] {
    stroke: var(--color-pending);
}
.shape-rect[data-status="sold"] {
    stroke: var(--color-sold);
}
.shape-rect[data-status="not-available"] {
    stroke: var(--color-not-available);
}

/* Special rule for Activation group - removed, now uses same gray border as other shapes */

/* Exception rules commented out - all borders are now dark grey except activation group */
/* 
.shape-rect[data-status="not-available"][data-group="street-food"] {
    stroke: var(--color-street-food);
}
.shape-rect[data-status="not-available"][data-group="alcoholic-bar"] {
    stroke: var(--color-alcoholic-bar);
}
.shape-rect[data-status="not-available"][data-group="wine-spirits"] {
    stroke: var(--color-wine-spirits);
}
.shape-rect[data-status="not-available"][data-group="coffee-shop"] {
    stroke: var(--color-coffee-shop);
}
.shape-rect[data-status="not-available"][data-group="food-retail"] {
    stroke: var(--color-food-retail);
}
.shape-rect[data-status="not-available"][data-group="if-25-services-public"] {
    stroke: var(--color-if-25-services-public);
}
.shape-rect[data-status="not-available"][data-group="makers-market"] {
    stroke: var(--color-makers-market);
}
.shape-rect[data-status="not-available"][data-group="if-25-services-vendors"] {
    stroke: var(--color-if-25-services-vendors);
}
.shape-rect[data-status="not-available"][data-group="community-services"] {
    stroke: var(--color-community-services);
}
.shape-rect[data-status="not-available"][data-group="retail"] {
    stroke: var(--color-retail);
}

.shape-rect[data-status="sold"][data-group="street-food"] {
    stroke: var(--color-street-food);
}
.shape-rect[data-status="sold"][data-group="alcoholic-bar"] {
    stroke: var(--color-alcoholic-bar);
}
.shape-rect[data-status="sold"][data-group="wine-spirits"] {
    stroke: var(--color-wine-spirits);
}
.shape-rect[data-status="sold"][data-group="coffee-shop"] {
    stroke: var(--color-coffee-shop);
}
.shape-rect[data-status="sold"][data-group="food-retail"] {
    stroke: var(--color-food-retail);
}
.shape-rect[data-status="sold"][data-group="if-25-services-public"] {
    stroke: var(--color-if-25-services-public);
}
.shape-rect[data-status="sold"][data-group="makers-market"] {
    stroke: var(--color-makers-market);
}
.shape-rect[data-status="sold"][data-group="if-25-services-vendors"] {
    stroke: var(--color-if-25-services-vendors);
}
.shape-rect[data-status="sold"][data-group="community-services"] {
    stroke: var(--color-community-services);
}
.shape-rect[data-status="sold"][data-group="retail"] {
    stroke: var(--color-retail);
}
*/

/* Hover state */
.shape-rect:hover {
    opacity: var(--shape-hover-opacity);
    stroke: #fff;
    stroke-width: calc(var(--border-thickness) + 2px);
    stroke-dasharray: 5,5;
}

/* Selected state */
.shape-rect.selected {
    stroke-width: calc(var(--border-thickness) + 3px);
    stroke-dasharray: 5,5;
    opacity: 1;
    outline: var(--shape-outline-width) solid var(--shape-outline-color);
    outline-offset: 1px;
}

/* Dragging state */
.shape-rect.dragging {
    opacity: 0.8;
    stroke-width: calc(var(--border-thickness) + 3px);
    stroke-dasharray: 5,5;
    cursor: move;
    filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.5));
}