/* Clock Dial Component for Anatomical Location Selection */

.clock-dial-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.clock-dial {
    position: relative;
    width: 280px;
    height: 280px;
    background: #f8f9fa;
    border-radius: 50%;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 
                inset 0 0 0 4px #2196F3,
                0 0 20px rgba(33, 150, 243, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Clock face background with equal pie divisions */
.clock-dial::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background: 
        /* 12 equal pie slices using conic-gradient (30deg each = 360/12) */
        conic-gradient(
            from 0deg,
            rgba(33, 150, 243, 0.08) 0deg,
            rgba(33, 150, 243, 0.08) 30deg,
            rgba(66, 165, 245, 0.15) 30deg,
            rgba(66, 165, 245, 0.15) 60deg,
            rgba(33, 150, 243, 0.08) 60deg,
            rgba(33, 150, 243, 0.08) 90deg,
            rgba(66, 165, 245, 0.15) 90deg,
            rgba(66, 165, 245, 0.15) 120deg,
            rgba(33, 150, 243, 0.08) 120deg,
            rgba(33, 150, 243, 0.08) 150deg,
            rgba(66, 165, 245, 0.15) 150deg,
            rgba(66, 165, 245, 0.15) 180deg,
            rgba(33, 150, 243, 0.08) 180deg,
            rgba(33, 150, 243, 0.08) 210deg,
            rgba(66, 165, 245, 0.15) 210deg,
            rgba(66, 165, 245, 0.15) 240deg,
            rgba(33, 150, 243, 0.08) 240deg,
            rgba(33, 150, 243, 0.08) 270deg,
            rgba(66, 165, 245, 0.15) 270deg,
            rgba(66, 165, 245, 0.15) 300deg,
            rgba(33, 150, 243, 0.08) 300deg,
            rgba(33, 150, 243, 0.08) 330deg,
            rgba(66, 165, 245, 0.15) 330deg,
            rgba(66, 165, 245, 0.15) 360deg
        );
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

/* Radial division lines from center (12 lines at 30-degree intervals) */
.clock-dial::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background: 
        /* 12 radial lines - one every 30 degrees */
        linear-gradient(0deg, transparent 0%, transparent 49%, rgba(33, 150, 243, 0.6) 49%, rgba(33, 150, 243, 0.6) 51%, transparent 51%, transparent 100%),
        linear-gradient(30deg, transparent 0%, transparent 49%, rgba(33, 150, 243, 0.5) 49%, rgba(33, 150, 243, 0.5) 51%, transparent 51%, transparent 100%),
        linear-gradient(60deg, transparent 0%, transparent 49%, rgba(33, 150, 243, 0.5) 49%, rgba(33, 150, 243, 0.5) 51%, transparent 51%, transparent 100%),
        linear-gradient(90deg, transparent 0%, transparent 49%, rgba(33, 150, 243, 0.6) 49%, rgba(33, 150, 243, 0.6) 51%, transparent 51%, transparent 100%),
        linear-gradient(120deg, transparent 0%, transparent 49%, rgba(33, 150, 243, 0.5) 49%, rgba(33, 150, 243, 0.5) 51%, transparent 51%, transparent 100%),
        linear-gradient(150deg, transparent 0%, transparent 49%, rgba(33, 150, 243, 0.5) 49%, rgba(33, 150, 243, 0.5) 51%, transparent 51%, transparent 100%);
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
}

/* 12 hour positions (pie slices) */
.clock-position {
    position: absolute;
    width: 50%;
    height: 50%;
    transform-origin: 100% 100%;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
    overflow: visible;
}

/* Pie slice visual borders */
.clock-position::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        from -15deg at 100% 100%,
        rgba(33, 150, 243, 0.05) 0deg,
        rgba(33, 150, 243, 0.05) 30deg,
        transparent 30deg
    );
    border-left: 1px solid rgba(33, 150, 243, 0.1);
    border-top: 1px solid rgba(33, 150, 243, 0.1);
    pointer-events: none;
}

.clock-position input[type="checkbox"] {
    display: none;
}

.clock-position-label {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Position number styling */
.position-number {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    background: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 10;
    position: relative;
}

/* Hour positions with rotation */
.pos-12 { transform: rotate(0deg); top: 0; right: 50%; }
.pos-1 { transform: rotate(30deg); top: 6.7%; right: 25%; }
.pos-2 { transform: rotate(60deg); top: 25%; right: 6.7%; }
.pos-3 { transform: rotate(90deg); top: 50%; right: 0; }
.pos-4 { transform: rotate(120deg); bottom: 25%; right: 6.7%; }
.pos-5 { transform: rotate(150deg); bottom: 6.7%; right: 25%; }
.pos-6 { transform: rotate(180deg); bottom: 0; right: 50%; }
.pos-7 { transform: rotate(210deg); bottom: 6.7%; left: 25%; }
.pos-8 { transform: rotate(240deg); bottom: 25%; left: 6.7%; }
.pos-9 { transform: rotate(270deg); top: 50%; left: 0; }
.pos-10 { transform: rotate(300deg); top: 25%; left: 6.7%; }
.pos-11 { transform: rotate(330deg); top: 6.7%; left: 25%; }

/* Pie slice overlay - creates visible segments with 30-degree wedges */
.clock-position::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        from -15deg at 100% 100%,
        rgba(33, 150, 243, 0.15) 0deg,
        rgba(33, 150, 243, 0.15) 30deg,
        transparent 30deg
    );
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Hover effect */
.clock-position:hover .position-number {
    transform: scale(1.2);
    background: #e3f2fd;
    color: #1976d2;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.clock-position:hover::after {
    opacity: 1;
}

/* Selected state */
.clock-position input[type="checkbox"]:checked + .clock-position-label .position-number {
    background: linear-gradient(135deg, #2196F3 0%, #1976d2 100%);
    color: white;
    transform: scale(1.15);
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.5);
}

.clock-position input[type="checkbox"]:checked ~ .clock-position-label::after {
    opacity: 1;
    background: conic-gradient(
        from -15deg at 100% 100%,
        rgba(33, 150, 243, 0.3) 0deg,
        rgba(33, 150, 243, 0.25) 15deg,
        rgba(33, 150, 243, 0.3) 30deg,
        transparent 30deg
    );
}

.clock-position input[type="checkbox"]:checked + .clock-position-label::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        from -15deg at 100% 100%,
        rgba(33, 150, 243, 0.3) 0deg,
        rgba(33, 150, 243, 0.25) 15deg,
        rgba(33, 150, 243, 0.3) 30deg,
        transparent 30deg
    );
    opacity: 1;
    animation: pulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.3; }
}

/* Clock center - ENHANCED visibility */
.clock-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #2196F3 0%, #1976d2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.3);
    z-index: 100;
    border: 3px solid white;
}

/* Selected positions display */
.selected-positions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    min-height: 40px;
    padding: 10px;
    background: white;
    border-radius: 10px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
}

.selected-position-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #2196F3 0%, #1976d2 100%);
    color: white;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
    animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.selected-position-badge i {
    font-size: 10px;
}

/* No selection placeholder */
.no-selection {
    color: #999;
    font-style: italic;
    font-size: 13px;
}

/* Responsive */
@media (max-width: 768px) {
    .clock-dial {
        width: 220px;
        height: 220px;
    }
    
    .clock-dial::before {
        width: 180px;
        height: 180px;
    }
    
    .position-number {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    
    .clock-center {
        width: 40px;
        height: 40px;
        font-size: 10px;
    }
}

/* Multi-select indicator */
.clock-dial.multi-select .clock-center::after {
    content: 'Multi';
    position: absolute;
    bottom: -20px;
    font-size: 10px;
    background: #ff9800;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Single select indicator */
.clock-dial.single-select .clock-center::after {
    content: 'Single';
    position: absolute;
    bottom: -20px;
    font-size: 10px;
    background: #4caf50;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}