/**
 * CrazyCivilCourt - Office Monitor Styles
 *
 * CCTV-style overhead view of animated office characters
 *
 * @package CrazyCivilCourt
 * @author TransXacto Networks
 */

/* ══════════════════════════════════════════════════════════════════════════
   CCTV CONTAINER
   ══════════════════════════════════════════════════════════════════════════ */

.cctv-container {
    background: #1a1a1a;
    border: 4px solid #333;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 32px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 0 60px rgba(0,0,0,0.3);
}

.cctv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #0a0a0a;
    border-bottom: 2px solid #333;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #00ff00;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.cctv-rec {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

.rec-dot {
    width: 10px;
    height: 10px;
    background: #ff0000;
    border-radius: 50%;
    box-shadow: 0 0 10px #ff0000;
}

.cctv-timestamp {
    color: #00ff00;
}

.cctv-camera {
    color: #888;
}

.cctv-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #0a0a0a;
    border-top: 2px solid #333;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #00ff00;
}

.cctv-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.online {
    background: #00ff00;
    box-shadow: 0 0 8px #00ff00;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.cctv-stats {
    color: #888;
}

.cctv-stats span {
    color: #00ff00;
    font-weight: bold;
}

/* ══════════════════════════════════════════════════════════════════════════
   OFFICE FLOORPLAN
   ══════════════════════════════════════════════════════════════════════════ */

.office-floorplan {
    position: relative;
    width: 100%;
    height: 420px;
    background:
        linear-gradient(90deg, rgba(60,60,60,0.1) 1px, transparent 1px),
        linear-gradient(rgba(60,60,60,0.1) 1px, transparent 1px),
        linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    background-size: 40px 40px, 40px 40px, 100% 100%;
    overflow: hidden;
    /* CRT scanline effect */
    box-shadow: inset 0 0 100px rgba(0,0,0,0.5);
}

.office-floorplan::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 100;
}

/* ══════════════════════════════════════════════════════════════════════════
   FURNITURE
   ══════════════════════════════════════════════════════════════════════════ */

.furniture {
    position: absolute;
    z-index: 10;
}

.furniture-label,
.desk-label {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #666;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}

/* Desks - 4x3 grid (12 desks) */
.desk {
    width: 80px;
    height: 60px;
}

/* Row 1 */
.desk-1 { top: 40px; left: 50px; }
.desk-2 { top: 40px; left: 160px; }
.desk-3 { top: 40px; left: 270px; }
.desk-4 { top: 40px; left: 380px; }
/* Row 2 */
.desk-5 { top: 140px; left: 50px; }
.desk-6 { top: 140px; left: 160px; }
.desk-7 { top: 140px; left: 270px; }
.desk-8 { top: 140px; left: 380px; }
/* Row 3 */
.desk-9 { top: 240px; left: 50px; }
.desk-10 { top: 240px; left: 160px; }
.desk-11 { top: 240px; left: 270px; }
.desk-12 { top: 240px; left: 380px; }

.desk-surface {
    position: absolute;
    width: 70px;
    height: 40px;
    background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
    border: 2px solid #5C3A1E;
    border-radius: 4px;
    top: 10px;
    left: 5px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.desk-computer {
    position: absolute;
    width: 16px;
    height: 12px;
    background: #333;
    border: 1px solid #555;
    border-radius: 2px;
    top: 18px;
    left: 32px;
}

.desk-computer::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 6px;
    background: #1a1a1a;
    border-radius: 1px;
    top: 2px;
    left: 2px;
}

.desk-chair {
    position: absolute;
    width: 24px;
    height: 24px;
    background: #444;
    border-radius: 50%;
    bottom: -5px;
    left: 28px;
    border: 2px solid #333;
}

/* Equipment Column 1 (right of desks) */
/* Printer */
.printer {
    top: 40px;
    left: 505px;
    width: 60px;
    height: 50px;
}

.printer-body {
    width: 50px;
    height: 35px;
    background: linear-gradient(180deg, #f5f5f5 0%, #ddd 100%);
    border: 2px solid #999;
    border-radius: 4px;
    position: relative;
}

.printer-body::before {
    content: '';
    position: absolute;
    width: 35px;
    height: 4px;
    background: #333;
    top: 6px;
    left: 6px;
    border-radius: 2px;
}

.printer-body::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: #00ff00;
    border-radius: 50%;
    top: 6px;
    right: 6px;
    animation: printerReady 2s infinite;
    box-shadow: 0 0 4px #00ff00;
}

@keyframes printerReady {
    0%, 80% { opacity: 1; }
    90%, 100% { opacity: 0.3; }
}

/* Fax Machine */
.fax-machine {
    top: 140px;
    left: 505px;
    width: 60px;
    height: 50px;
}

.fax-body {
    width: 50px;
    height: 35px;
    background: linear-gradient(180deg, #e0e0e0 0%, #bdbdbd 100%);
    border: 2px solid #888;
    border-radius: 4px;
    position: relative;
}

.fax-body::before {
    content: '📠';
    position: absolute;
    font-size: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Filing Cabinet */
.filing-cabinet {
    top: 240px;
    left: 505px;
    width: 60px;
    height: 50px;
}

.cabinet-drawers {
    width: 50px;
    height: 40px;
    background: linear-gradient(180deg, #666 0%, #555 100%);
    border: 2px solid #444;
    border-radius: 4px;
    position: relative;
}

.cabinet-drawers::before,
.cabinet-drawers::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 2px;
    background: #333;
    left: 3px;
}

.cabinet-drawers::before { top: 12px; }
.cabinet-drawers::after { top: 26px; }

/* Equipment Column 2 */
/* Copier */
.copier {
    top: 40px;
    left: 605px;
    width: 60px;
    height: 50px;
}

.copier-body {
    width: 50px;
    height: 35px;
    background: linear-gradient(180deg, #eee 0%, #ccc 100%);
    border: 2px solid #999;
    border-radius: 4px;
    position: relative;
}

.copier-body::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 3px;
    background: #66ff66;
    top: 8px;
    left: 8px;
    border-radius: 2px;
    animation: copierBlink 3s infinite;
}

@keyframes copierBlink {
    0%, 90% { opacity: 1; }
    95%, 100% { opacity: 0.3; }
}

/* Server Rack */
.server-rack {
    top: 140px;
    left: 605px;
    width: 60px;
    height: 50px;
}

.server-body {
    width: 45px;
    height: 40px;
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 2px solid #444;
    border-radius: 4px;
    position: relative;
    margin: 0 auto;
}

.server-body::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: #00ff00;
    border-radius: 50%;
    top: 8px;
    left: 8px;
    animation: serverBlink 0.5s infinite;
    box-shadow: 0 0 4px #00ff00;
}

.server-body::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: #ff6600;
    border-radius: 50%;
    top: 8px;
    left: 20px;
    animation: serverBlink 0.3s infinite;
    box-shadow: 0 0 4px #ff6600;
}

@keyframes serverBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.2; }
}

/* Phone Booth */
.phone-booth {
    top: 240px;
    left: 605px;
    width: 50px;
    height: 50px;
}

.booth-body {
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg, #FFE600 0%, #DAA520 100%);
    border: 2px solid #8B7500;
    border-radius: 4px;
    margin: 0 auto;
    position: relative;
}

.booth-body::after {
    content: '📞';
    position: absolute;
    font-size: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Break Area Column */
/* Water Cooler */
.water-cooler {
    top: 40px;
    left: 705px;
    width: 50px;
    height: 60px;
}

.cooler-body {
    width: 30px;
    height: 45px;
    background: linear-gradient(180deg, #87CEEB 0%, #4169E1 100%);
    border: 2px solid #333;
    border-radius: 4px 4px 8px 8px;
    margin: 0 auto;
    position: relative;
}

.cooler-body::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 25px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    top: 5px;
    left: 3px;
}

/* Coffee Spot */
.coffee-spot {
    top: 140px;
    left: 705px;
    width: 50px;
    height: 50px;
}

.coffee-body {
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg, #5D4037 0%, #3E2723 100%);
    border: 2px solid #2E1B12;
    border-radius: 4px;
    margin: 0 auto;
    position: relative;
}

.coffee-body::after {
    content: '☕';
    position: absolute;
    font-size: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Conference Table */
.conference-table {
    top: 240px;
    left: 705px;
    width: 80px;
    height: 60px;
}

.table-surface {
    width: 70px;
    height: 45px;
    background: linear-gradient(135deg, #654321 0%, #4a3520 100%);
    border: 3px solid #3a2510;
    border-radius: 8px;
    margin: 5px auto;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.4);
}

/* ══════════════════════════════════════════════════════════════════════════
   CHARACTERS
   ══════════════════════════════════════════════════════════════════════════ */

.character {
    position: absolute;
    width: 32px;
    height: 32px;
    z-index: 50;
    transition: left 0.8s ease-in-out, top 0.8s ease-in-out;
    cursor: pointer;
}

.character-body {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Character head */
.character-head {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: 0;
    left: 6px;
    border: 2px solid rgba(0,0,0,0.2);
}

/* Character body/torso */
.character-torso {
    position: absolute;
    width: 16px;
    height: 14px;
    border-radius: 4px 4px 0 0;
    top: 18px;
    left: 8px;
}

/* Character arms */
.character-arms {
    position: absolute;
    width: 24px;
    height: 4px;
    border-radius: 2px;
    top: 20px;
    left: 4px;
}

/* Character name label */
.character-name {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap;
    font-family: 'Nunito', sans-serif;
}

/* Task label floating above character */
.character-task {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: #00ff00;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #00ff00;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.3);
}

/* Animation states */
.character.idle .character-body {
    animation: idle-bob 2s ease-in-out infinite;
}

@keyframes idle-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.character.working .character-body {
    animation: working-bounce 0.3s ease-in-out infinite;
}

@keyframes working-bounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-1px) rotate(-2deg); }
    75% { transform: translateY(-1px) rotate(2deg); }
}

.character.walking {
    animation: walking-step 0.4s ease-in-out infinite;
}

@keyframes walking-step {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.character.on-phone .character-body {
    animation: phone-talk 0.5s ease-in-out infinite;
}

@keyframes phone-talk {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    75% { transform: rotate(-3deg); }
}

.character.typing .character-arms {
    animation: typing-arms 0.15s ease-in-out infinite;
}

@keyframes typing-arms {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* Rushing animation - hectic movement */
.character.rushing {
    animation: rushing-bounce 0.25s ease-in-out infinite;
}

.character.rushing .character-body {
    animation: rushing-lean 0.25s ease-in-out infinite;
}

@keyframes rushing-bounce {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-4px) translateX(2px); }
    50% { transform: translateY(0) translateX(0); }
    75% { transform: translateY(-4px) translateX(-2px); }
}

@keyframes rushing-lean {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(8deg); }
    75% { transform: rotate(-8deg); }
}

/* Talking animation */
.character.talking .character-head {
    animation: talking-nod 0.6s ease-in-out infinite;
}

@keyframes talking-nod {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-1px) rotate(3deg); }
    75% { transform: translateY(-1px) rotate(-3deg); }
}

/* Failed state - melting into puddle */
.character.failed {
    animation: melt 1s ease-in forwards;
}

@keyframes melt {
    0% {
        transform: scaleY(1) scaleX(1);
        opacity: 1;
    }
    50% {
        transform: scaleY(0.5) scaleX(1.3);
        opacity: 0.8;
    }
    100% {
        transform: scaleY(0.1) scaleX(2);
        opacity: 0;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PUDDLES (Failed Tasks)
   ══════════════════════════════════════════════════════════════════════════ */

.puddle {
    position: absolute;
    width: 50px;
    height: 20px;
    border-radius: 50%;
    opacity: 0.7;
    z-index: 5;
    animation: puddle-appear 0.5s ease-out forwards;
}

@keyframes puddle-appear {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0.7;
    }
}

.puddle::after {
    content: '💀';
    position: absolute;
    font-size: 12px;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    animation: skull-float 2s ease-in-out infinite;
}

@keyframes skull-float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-3px); }
}

/* ══════════════════════════════════════════════════════════════════════════
   CHARACTER COLORS (per character)
   ══════════════════════════════════════════════════════════════════════════ */

/* Gerald - Senior Partner (gray hair, navy suit) */
.character[data-char="gerald"] .character-head { background: linear-gradient(135deg, #A0A0A0 0%, #808080 100%); }
.character[data-char="gerald"] .character-torso { background: #1a237e; }
.character[data-char="gerald"] .character-arms { background: #1a237e; }
.character[data-char="gerald"] + .puddle { background: radial-gradient(ellipse, #1a237e 0%, #0d1442 100%); }

/* Brenda - Paralegal (blonde, pink blouse) */
.character[data-char="brenda"] .character-head { background: linear-gradient(135deg, #F4D03F 0%, #C9A227 100%); }
.character[data-char="brenda"] .character-torso { background: #E91E63; }
.character[data-char="brenda"] .character-arms { background: #E91E63; }
.character[data-char="brenda"] + .puddle { background: radial-gradient(ellipse, #E91E63 0%, #880E4F 100%); }

/* Marcus - Associate (dark skin, gray suit) */
.character[data-char="marcus"] .character-head { background: linear-gradient(135deg, #8D6E63 0%, #5D4037 100%); }
.character[data-char="marcus"] .character-torso { background: #455A64; }
.character[data-char="marcus"] .character-arms { background: #455A64; }
.character[data-char="marcus"] + .puddle { background: radial-gradient(ellipse, #455A64 0%, #263238 100%); }

/* Diane - Clerk (red hair, green dress) */
.character[data-char="diane"] .character-head { background: linear-gradient(135deg, #E65100 0%, #BF360C 100%); }
.character[data-char="diane"] .character-torso { background: #2E7D32; }
.character[data-char="diane"] .character-arms { background: #2E7D32; }
.character[data-char="diane"] + .puddle { background: radial-gradient(ellipse, #2E7D32 0%, #1B5E20 100%); }

/* Terrence - IT Guy (glasses look, purple hoodie) */
.character[data-char="terrence"] .character-head { background: linear-gradient(135deg, #4A148C 0%, #311B92 100%); }
.character[data-char="terrence"] .character-torso { background: #7B1FA2; }
.character[data-char="terrence"] .character-arms { background: #7B1FA2; }
.character[data-char="terrence"] + .puddle { background: radial-gradient(ellipse, #7B1FA2 0%, #4A148C 100%); }

/* Patricia - Senior Clerk (brown hair, beige) */
.character[data-char="patricia"] .character-head { background: linear-gradient(135deg, #795548 0%, #5D4037 100%); }
.character[data-char="patricia"] .character-torso { background: #D7CCC8; }
.character[data-char="patricia"] .character-arms { background: #D7CCC8; }
.character[data-char="patricia"] + .puddle { background: radial-gradient(ellipse, #D7CCC8 0%, #A1887F 100%); }

/* Kevin - Intern (young, blue shirt) */
.character[data-char="kevin"] .character-head { background: linear-gradient(135deg, #FFCC80 0%, #FFB74D 100%); }
.character[data-char="kevin"] .character-torso { background: #1976D2; }
.character[data-char="kevin"] .character-arms { background: #1976D2; }
.character[data-char="kevin"] + .puddle { background: radial-gradient(ellipse, #1976D2 0%, #0D47A1 100%); }

/* Rosa - Receptionist (dark hair, red top) */
.character[data-char="rosa"] .character-head { background: linear-gradient(135deg, #212121 0%, #000000 100%); }
.character[data-char="rosa"] .character-torso { background: #C62828; }
.character[data-char="rosa"] .character-arms { background: #C62828; }
.character[data-char="rosa"] + .puddle { background: radial-gradient(ellipse, #C62828 0%, #B71C1C 100%); }

/* Walter - Records Clerk (gray hair, teal shirt) */
.character[data-char="walter"] .character-head { background: linear-gradient(135deg, #B0BEC5 0%, #78909C 100%); }
.character[data-char="walter"] .character-torso { background: #00695C; }
.character[data-char="walter"] .character-arms { background: #00695C; }
.character[data-char="walter"] + .puddle { background: radial-gradient(ellipse, #00695C 0%, #004D40 100%); }

/* Janet - Legal Assistant (brown hair, orange blouse) */
.character[data-char="janet"] .character-head { background: linear-gradient(135deg, #6D4C41 0%, #4E342E 100%); }
.character[data-char="janet"] .character-torso { background: #F57C00; }
.character[data-char="janet"] .character-arms { background: #F57C00; }
.character[data-char="janet"] + .puddle { background: radial-gradient(ellipse, #F57C00 0%, #E65100 100%); }

/* Derek - Junior Associate (dark hair, light blue suit) */
.character[data-char="derek"] .character-head { background: linear-gradient(135deg, #3E2723 0%, #1B0000 100%); }
.character[data-char="derek"] .character-torso { background: #0277BD; }
.character[data-char="derek"] .character-arms { background: #0277BD; }
.character[data-char="derek"] + .puddle { background: radial-gradient(ellipse, #0277BD 0%, #01579B 100%); }

/* Sharon - Office Manager (light hair, purple dress) */
.character[data-char="sharon"] .character-head { background: linear-gradient(135deg, #D7CCC8 0%, #BCAAA4 100%); }
.character[data-char="sharon"] .character-torso { background: #6A1B9A; }
.character[data-char="sharon"] .character-arms { background: #6A1B9A; }
.character[data-char="sharon"] + .puddle { background: radial-gradient(ellipse, #6A1B9A 0%, #4A148C 100%); }

/* Miguel - Research Analyst (tan skin, green polo) */
.character[data-char="miguel"] .character-head { background: linear-gradient(135deg, #A1887F 0%, #8D6E63 100%); }
.character[data-char="miguel"] .character-torso { background: #2E7D32; }
.character[data-char="miguel"] .character-arms { background: #2E7D32; }
.character[data-char="miguel"] + .puddle { background: radial-gradient(ellipse, #2E7D32 0%, #1B5E20 100%); }

/* Lisa - Document Specialist (blonde, magenta top) */
.character[data-char="lisa"] .character-head { background: linear-gradient(135deg, #FDD835 0%, #F9A825 100%); }
.character[data-char="lisa"] .character-torso { background: #C2185B; }
.character[data-char="lisa"] .character-arms { background: #C2185B; }
.character[data-char="lisa"] + .puddle { background: radial-gradient(ellipse, #C2185B 0%, #880E4F 100%); }

/* ══════════════════════════════════════════════════════════════════════════
   OFFICE CONTROLS
   ══════════════════════════════════════════════════════════════════════════ */

.office-controls {
    display: flex;
    gap: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   QUEUE SECTION
   ══════════════════════════════════════════════════════════════════════════ */

.office-queue-section {
    background: white;
    border: 2px solid var(--brown);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 32px;
    box-shadow: 3px 3px 0 rgba(92,58,30,0.2);
}

.office-queue-header {
    margin-bottom: 16px;
}

.office-queue-title {
    font-family: 'Bangers', cursive;
    font-size: 22px;
    color: var(--brown);
}

.office-queue-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.office-queue-empty {
    text-align: center;
    padding: 24px;
    color: var(--gray-400);
    font-style: italic;
}

.office-queue-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--gray-50);
    border-radius: 6px;
    font-size: 13px;
    transition: background 0.2s;
}

.office-queue-item:hover {
    background: var(--gray-100);
}

.office-queue-item-char {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: white;
    flex-shrink: 0;
}

.office-queue-item-info {
    flex: 1;
    min-width: 0;
}

.office-queue-item-task {
    font-weight: 700;
    color: var(--black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.office-queue-item-entity {
    font-size: 12px;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.office-queue-item-status {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.office-queue-item-status.running {
    background: rgba(43, 159, 212, 0.15);
    color: var(--blue);
}

.office-queue-item-status.pending {
    background: rgba(245, 158, 11, 0.15);
    color: var(--orange);
}

.office-queue-item-time {
    font-size: 11px;
    color: var(--gray-400);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   ROSTER SECTION
   ══════════════════════════════════════════════════════════════════════════ */

.roster-section {
    background: white;
    border: 2px solid var(--brown);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 32px;
    box-shadow: 3px 3px 0 rgba(92,58,30,0.2);
}

.roster-title {
    font-family: 'Bangers', cursive;
    font-size: 22px;
    color: var(--brown);
    margin-bottom: 16px;
}

.roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.roster-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--gray-50);
    border-radius: 8px;
    border: 2px solid var(--gray-200);
    transition: all 0.2s;
}

.roster-card:hover {
    border-color: var(--brown);
    box-shadow: 2px 2px 0 rgba(92,58,30,0.15);
}

.roster-card.busy {
    border-color: var(--blue);
    background: rgba(43, 159, 212, 0.05);
}

.roster-card.idle {
    opacity: 0.7;
}

.roster-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.roster-info {
    flex: 1;
    min-width: 0;
}

.roster-name {
    font-weight: 900;
    font-size: 14px;
    color: var(--black);
}

.roster-role {
    font-size: 11px;
    color: var(--gray-500);
}

.roster-status {
    font-size: 10px;
    color: var(--gray-400);
    margin-top: 2px;
}

.roster-status.working {
    color: var(--blue);
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   CHARACTER POPUP
   ══════════════════════════════════════════════════════════════════════════ */

.character-popup {
    position: fixed;
    width: 200px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 1000;
    overflow: hidden;
    font-family: 'Nunito', sans-serif;
}

.popup-header {
    padding: 10px 12px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.popup-header strong {
    font-size: 14px;
}

.popup-role {
    font-size: 11px;
    opacity: 0.8;
}

.popup-body {
    padding: 12px;
}

.popup-status {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

.popup-status.working {
    background: rgba(43, 159, 212, 0.15);
    color: #2B9FD4;
}

.popup-status.idle {
    background: rgba(156, 163, 175, 0.15);
    color: #6B7280;
}

.popup-task {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}

.popup-task-name {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.popup-entity {
    font-size: 11px;
    color: #666;
}

.popup-entity-link {
    font-size: 11px;
    color: #2B9FD4;
    text-decoration: none;
    display: block;
}

.popup-entity-link:hover {
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .office-floorplan {
        height: 380px;
        overflow-x: auto;
        overflow-y: hidden;
        min-width: 100%;
    }

    /* Scale down furniture for mobile */
    .desk {
        width: 60px;
        height: 45px;
    }

    .desk-surface {
        width: 52px;
        height: 30px;
    }

    .desk-computer {
        width: 12px;
        height: 9px;
        left: 22px;
        top: 14px;
    }

    .desk-chair {
        width: 18px;
        height: 18px;
        left: 21px;
        bottom: -3px;
    }

    /* Reposition desks for mobile - 3x2 grid tighter */
    .desk-1 { top: 30px; left: 10px; }
    .desk-2 { top: 30px; left: 80px; }
    .desk-3 { top: 30px; left: 150px; }
    .desk-4 { top: 100px; left: 10px; }
    .desk-5 { top: 100px; left: 80px; }
    .desk-6 { top: 100px; left: 150px; }

    /* Reposition other furniture */
    .filing-cabinet {
        top: 180px;
        left: 10px;
        width: 45px;
        height: 40px;
    }
    .cabinet-drawers {
        width: 38px;
        height: 32px;
    }

    .copier {
        top: 180px;
        left: 70px;
        width: 45px;
        height: 40px;
    }
    .copier-body {
        width: 38px;
        height: 28px;
    }

    .water-cooler {
        top: 30px;
        right: 10px;
        width: 40px;
        height: 50px;
    }
    .cooler-body {
        width: 24px;
        height: 36px;
    }

    .conference-table {
        top: 100px;
        right: 10px;
        width: 70px;
        height: 60px;
    }
    .table-surface {
        width: 60px;
        height: 40px;
    }

    .phone-booth {
        top: 240px;
        right: 80px;
        width: 40px;
        height: 40px;
    }
    .booth-body {
        width: 28px;
        height: 28px;
    }
    .booth-body::after {
        font-size: 10px;
    }

    .server-rack {
        top: 240px;
        right: 10px;
        width: 45px;
        height: 40px;
    }
    .server-body {
        width: 36px;
        height: 32px;
    }

    .furniture-label,
    .desk-label {
        font-size: 8px;
        bottom: -14px;
    }

    /* Smaller characters on mobile */
    .character {
        width: 22px;
        height: 22px;
    }

    .character-head {
        width: 14px;
        height: 14px;
        left: 4px;
    }

    .character-torso {
        width: 10px;
        height: 9px;
        top: 12px;
        left: 6px;
    }

    .character-arms {
        width: 16px;
        height: 3px;
        top: 14px;
        left: 3px;
    }

    .character-name {
        font-size: 7px;
        bottom: -12px;
    }

    .character-task {
        font-size: 7px;
        padding: 2px 5px;
        top: -22px;
        max-width: 80px;
    }

    /* CCTV header/footer mobile */
    .cctv-header,
    .cctv-footer {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 12px;
        font-size: 10px;
    }

    .cctv-rec {
        gap: 4px;
    }

    .rec-dot {
        width: 8px;
        height: 8px;
    }

    .cctv-camera {
        display: none;
    }

    .roster-grid {
        grid-template-columns: 1fr;
    }

    .character-popup {
        width: 170px;
        font-size: 12px;
    }

    .popup-header {
        padding: 8px 10px;
    }

    .popup-body {
        padding: 10px;
    }

    /* Queue items on mobile */
    .office-queue-item {
        padding: 10px;
        gap: 8px;
        font-size: 12px;
    }

    .office-queue-item-char {
        width: 24px !important;
        height: 24px !important;
        font-size: 9px !important;
    }
}

/* Even smaller screens */
@media (max-width: 480px) {
    .office-floorplan {
        height: 320px;
    }

    /* 2x3 grid for very small screens */
    .desk-1 { top: 25px; left: 5px; }
    .desk-2 { top: 25px; left: 70px; }
    .desk-3 { top: 25px; left: 135px; }
    .desk-4 { top: 85px; left: 5px; }
    .desk-5 { top: 85px; left: 70px; }
    .desk-6 { top: 85px; left: 135px; }

    .filing-cabinet { top: 155px; left: 5px; }
    .copier { top: 155px; left: 60px; }
    .water-cooler { top: 25px; right: 5px; }
    .conference-table { top: 85px; right: 5px; width: 55px; }
    .phone-booth { top: 200px; right: 60px; }
    .server-rack { top: 200px; right: 5px; }

    .desk {
        width: 50px;
        height: 38px;
    }

    .desk-surface {
        width: 44px;
        height: 26px;
    }

    .character {
        width: 18px;
        height: 18px;
    }

    .character-head {
        width: 12px;
        height: 12px;
        left: 3px;
    }

    .character-torso {
        width: 8px;
        height: 7px;
        top: 10px;
        left: 5px;
    }

    .character-arms {
        width: 14px;
        top: 12px;
        left: 2px;
    }

    .character-name {
        font-size: 6px;
        bottom: -10px;
    }

    .character-task {
        display: none;
    }

    .cctv-header,
    .cctv-footer {
        padding: 6px 10px;
        font-size: 9px;
    }

    .cctv-timestamp {
        font-size: 8px;
    }
}