/* ==============================================
   WALLBOARD ICON SYSTEM
   Floor plan indicators

   Sizes: sm (28px), md (40px), lg (50px)
   States: available, pending, busy, unknown
   Badges: video, display, call, calendar, temperature
   ============================================== */

/* ==============================================
   BASE INDICATOR
   ============================================== */
.wb-indicator {
    --size: 50px;
    --badge-size: 22px;

    position: relative;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: #2a2a2a;
    border: 3px solid rgba(255,255,255,0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 150ms cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 150ms cubic-bezier(0.25, 1, 0.5, 1);
    box-sizing: border-box;
}

/* ==============================================
   SHAPE VARIANTS
   ============================================== */
.wb-indicator--square {
    border-radius: 20%;
}

/* ==============================================
   SIZE VARIANTS
   ============================================== */
.wb-indicator--sm {
    --size: 28px;
    --badge-size: 14px;
}

.wb-indicator--md {
    --size: 40px;
    --badge-size: 18px;
}

.wb-indicator--lg {
    --size: 50px;
    --badge-size: 22px;
}

/* ==============================================
   NUMBER DISPLAY
   ============================================== */
.wb-indicator__number {
    font-size: calc(var(--size) * 0.35);
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    font-feature-settings: 'tnum';
    line-height: 1;
}

/* ==============================================
   DEVICE TYPE ICON
   ============================================== */
.wb-indicator__icon {
    font-size: calc(var(--size) * 0.35);
    color: rgba(255,255,255,0.7);
}

/* ==============================================
   PRESENCE STATES
   ============================================== */

/* Available - Green */
.wb-indicator--available {
    border-color: #4bd396;
    box-shadow: 0 0 0 1px #4bd396;
    animation: wb-pulse-green 3s ease-out infinite;
}

/* Pending/No Show - Amber */
.wb-indicator--pending {
    border-color: #f9c851;
    box-shadow: 0 0 0 1px #f9c851;
    animation: wb-pulse-amber 3s ease-out infinite;
}

/* Busy - Red */
.wb-indicator--busy {
    border-color: #f5707a;
    box-shadow: 0 0 0 1px #f5707a;
    animation: wb-pulse-red 3s ease-out infinite;
}

/* Unknown - Neutral (with subtle pulse) */
.wb-indicator--unknown {
    border-color: rgba(255,255,255,0.3);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
    animation: wb-pulse-gray 3s ease-out infinite;
}

/* ==============================================
   PULSE ANIMATIONS
   ============================================== */
@keyframes wb-pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(75, 211, 150, 0.7); }
    70% { box-shadow: 0 0 0 12px rgba(75, 211, 150, 0); }
    100% { box-shadow: 0 0 0 0 rgba(75, 211, 150, 0); }
}

@keyframes wb-pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(245, 112, 122, 0.7); }
    70% { box-shadow: 0 0 0 12px rgba(245, 112, 122, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 112, 122, 0); }
}

@keyframes wb-pulse-amber {
    0% { box-shadow: 0 0 0 0 rgba(249, 200, 81, 0.7); }
    70% { box-shadow: 0 0 0 12px rgba(249, 200, 81, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 200, 81, 0); }
}

@keyframes wb-pulse-gray {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* ==============================================
   BADGE CONTAINER
   ============================================== */
.wb-indicator__badges {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ==============================================
   BADGE BASE
   ============================================== */
.wb-indicator__badge {
    position: absolute;
    width: var(--badge-size);
    height: var(--badge-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    pointer-events: auto;
    cursor: pointer;
}

.wb-indicator__badge::after {
    content: '';
    display: block;
    background: #fff;
}

/* ==============================================
   BADGE TYPES
   Shape only - apply color modifier separately
   ============================================== */

/* Video - Font Awesome icon */
.wb-indicator__badge--video {
    font-size: calc(var(--badge-size) * 0.5);
    color: #fff;
}
.wb-indicator__badge--video::after {
    display: none;
}

/* Display - Font Awesome icon */
.wb-indicator__badge--display {
    font-size: calc(var(--badge-size) * 0.5);
    color: #fff;
}
.wb-indicator__badge--display::after {
    display: none;
}

/* In Call - Circle */
.wb-indicator__badge--call::after {
    width: 45%;
    height: 45%;
    border-radius: 50%;
}

/* Meeting/Calendar - Font Awesome icon */
.wb-indicator__badge--calendar {
    font-size: calc(var(--badge-size) * 0.55);
    color: #fff;
}
.wb-indicator__badge--calendar::after {
    display: none;
}

/* Alert - Font Awesome icon */
.wb-indicator__badge--alert {
    font-size: calc(var(--badge-size) * 0.55);
    color: #fff;
}
.wb-indicator__badge--alert::after {
    display: none;
}

/* Temperature - Font Awesome icon */
.wb-indicator__badge--temperature {
    font-size: calc(var(--badge-size) * 0.55);
    color: #fff;
}
.wb-indicator__badge--temperature::after {
    display: none;
}

/* ==============================================
   BADGE POSITIONS
   ============================================== */
.wb-indicator__badge--top-right {
    top: calc(var(--badge-size) * -0.35);
    right: calc(var(--badge-size) * -0.35);
}

.wb-indicator__badge--top-left {
    top: calc(var(--badge-size) * -0.35);
    left: calc(var(--badge-size) * -0.35);
}

.wb-indicator__badge--bottom-right {
    bottom: calc(var(--badge-size) * -0.35);
    right: calc(var(--badge-size) * -0.35);
}

.wb-indicator__badge--bottom-left {
    bottom: calc(var(--badge-size) * -0.35);
    left: calc(var(--badge-size) * -0.35);
}

/* ==============================================
   BADGE COLOR MODIFIERS
   Apply to any badge type to override background color
   ============================================== */

/* Green */
.wb-indicator__badge--green {
    background: #4bd396;
}

/* Amber/Yellow - uses dark icon for contrast */
.wb-indicator__badge--amber {
    background: #f9c851;
    color: #4a4a4a;
}

/* Red */
.wb-indicator__badge--red {
    background: #f5707a;
}

/* Purple */
.wb-indicator__badge--purple {
    background: #8b5cf6;
}

/* Cyan */
.wb-indicator__badge--cyan {
    background: #06b6d4;
}

/* Blue */
.wb-indicator__badge--blue {
    background: #3b82f6;
}

/* ==============================================
   BADGE SHAPE MODIFIER
   ============================================== */
.wb-indicator__badge--square {
    border-radius: 20%;
}

/* ==============================================
   TEMPERATURE LABEL
   ============================================== */
.wb-indicator__temp {
    position: absolute;
    bottom: calc(var(--size) * -0.45);
    left: 50%;
    transform: translateX(-50%);
    background: #2a2a2a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 1px 4px;
    font-size: calc(var(--size) * 0.22);
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    font-feature-settings: 'tnum';
    white-space: nowrap;
}