:root{--primary-color: #1a3b5d;--secondary-color: #3b4556;--accent-blue: #3498db;--accent-red: #e74c3c;--accent-green: #2ecc71;--accent-yellow: #f1c40f;--bg-color: #f4f7fa;--panel-bg-color: #ffffff;--border-color: #e9ecef;--shadow: 0 4px 6px rgba(0, 0, 0, .07)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--bg-color);margin:0;color:var(--secondary-color)}.app-container{max-width:1600px;margin:0 auto;padding:20px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:0 10px;flex-wrap:wrap;gap:15px}.header h1{font-size:26px;color:var(--primary-color);margin:0}.header-controls{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.salesperson-selector label,.fiscal-year-selector label,.snapshot-selector label{font-size:14px;margin-right:5px}.salesperson-selector select,.fiscal-year-selector select,.snapshot-selector select{padding:5px;border-radius:5px;border:1px solid #cdd5df}.navigation a{margin-left:15px;color:var(--primary-color);text-decoration:none;font-weight:500}.navigation a:hover{text-decoration:underline}.time-switch button{padding:8px 18px;border:1px solid #cdd5df;background-color:var(--panel-bg-color);border-radius:20px;cursor:pointer;font-size:14px;transition:all .2s}.time-switch button:hover{background-color:#f0f2f5}.time-switch button.active{background-color:var(--primary-color);color:var(--panel-bg-color);border-color:var(--primary-color)}.view-panel{background-color:var(--panel-bg-color);border-radius:12px;padding:25px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:25px}.view-panel h2{font-size:22px;margin:0;padding-bottom:15px;border-bottom:2px solid #f0f2f5;display:flex;align-items:center;color:var(--primary-color)}.section-title{font-size:18px;color:#34495e;margin:0 0 15px;padding-bottom:8px;border-bottom:1px solid var(--border-color)}.clickable{cursor:pointer;text-decoration:underline;color:var(--accent-blue);font-weight:700}.clickable:hover{color:#2980b9}.data-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:10px;display:block;overflow-x:auto;white-space:nowrap}.data-table th,.data-table td{border:1px solid #ddd;padding:8px;text-align:left}.data-table th{background-color:#f2f2f2}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}.modal-overlay.visible{opacity:1;visibility:visible}.modal-content{background:#fff;padding:30px;border-radius:10px;width:90%;max-width:1200px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;transform:scale(.95);transition:transform .3s}.modal-overlay.visible .modal-content{transform:scale(1)}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ccc;padding-bottom:10px;margin-bottom:20px;flex-shrink:0}.modal-header h3{margin:0}.modal-close{font-size:24px;font-weight:700;cursor:pointer;border:none;background:none}.modal-body{overflow-y:auto}.yearly-progress{background:var(--panel-bg-color);padding:20px;border-radius:12px;box-shadow:var(--shadow);margin-bottom:20px}.yearly-progress h3{margin:0 0 10px;font-size:16px;color:var(--primary-color)}.progress-bar-bg{width:100%;height:25px;background-color:var(--border-color);border-radius:5px}.progress-bar-fill{height:100%;background-color:var(--accent-blue);border-radius:5px;text-align:center;line-height:25px;color:#fff;font-weight:700;font-size:14px;transition:width .5s ease-in-out}.progress-label{display:flex;justify-content:space-between;font-size:12px;margin-top:5px}.dashboard-container{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:20px}.kpi-section{margin-bottom:15px}.kpi-main{font-size:24px;font-weight:700;margin-bottom:5px}.kpi-sub{font-size:14px;color:#7f8c8d}.gauge-container{width:100%;height:20px;background:var(--border-color);border-radius:10px;overflow:hidden}.gauge-bar{height:100%;background-color:var(--accent-green);border-radius:10px}.portfolio-charts{display:flex;gap:20px}.portfolio-chart{flex:1}.portfolio-chart .chart-title{font-size:14px;font-weight:600;text-align:center;margin-bottom:10px}.portfolio-chart ul{list-style:none;padding:0;margin:0;font-size:13px}.portfolio-chart li{display:flex;justify-content:space-between;padding:5px 0}.portfolio-chart .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}.summary-item{background:#f8f9fa;padding:10px;border-radius:6px;border:1px solid var(--border-color);transition:transform .2s,box-shadow .2s}.summary-item:hover{transform:translateY(-3px);box-shadow:0 4px 8px #0000000f}.summary-item .count{font-size:20px;font-weight:700;color:var(--primary-color)}.summary-item .label{font-size:12px;color:#7f8c8d}.issue-card{background-color:#fff9f9;border:1px solid #f5c6cb;border-left:5px solid var(--accent-red);border-radius:4px;padding:15px}.issue-card h4{margin:0 0 8px;font-size:16px;color:#c0392b}.issue-card p{margin:0;font-size:14px;line-height:1.6}.alert-section{display:flex;gap:15px;text-align:center}.alert-item{flex:1;background:#fff4e6;padding:15px;border-radius:8px;border:1px solid #ffe8cc}.alert-item .count{font-size:28px;font-weight:700;color:#e67e22}.alert-item .label{font-size:13px}.action-needed{text-align:center;background:#e8f4fd;padding:15px;border-radius:8px;border:1px solid #d0e8fc}.action-needed p{margin:0}.action-needed strong{font-size:24px;color:var(--accent-blue)}.mission{background-color:#f8f9fa;border-radius:6px;padding:15px;margin-bottom:15px}.mission-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.priority-circle{width:30px;height:30px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0}.p1{border-left:4px solid #c0392b}.p1 .priority-circle{background-color:#c0392b}.p2{border-left:4px solid #e67e22}.p2 .priority-circle{background-color:#e67e22}.p3{border-left:4px solid #f1c40f}.p3 .priority-circle{background-color:#f1c40f;color:#333}.mission h4{margin:0;font-size:16px;flex-grow:1}.action-btn{padding:5px 10px;font-size:12px;background-color:#27ae60;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s}.action-btn:hover{background-color:#229954}.action-btn:disabled{background-color:#7f8c8d;cursor:not-allowed}#weekly-todo{margin-top:25px}#weekly-todo-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}#weekly-todo-list li{background:var(--panel-bg-color);border:1px solid var(--border-color);border-radius:5px;padding:10px}#weekly-todo-list label{font-weight:700;font-size:13px;display:block;margin-bottom:5px}#weekly-todo-list textarea{width:100%;height:100px;border:1px solid #ccc;border-radius:4px;resize:vertical;font-size:13px;padding:5px;box-sizing:border-box}.outlook-btn{display:block;width:100%;margin-top:15px;padding:10px;background-color:var(--primary-color);color:#fff;text-align:center;border:none;border-radius:5px;cursor:pointer;font-weight:700}.boost-plan{border-top:2px dashed #e0e0e0;padding-top:20px;margin-top:20px}.boost-item{margin-bottom:20px}.boost-item h5{font-size:15px;margin:0 0 10px}.boost-item .description{font-size:13px;color:#555;background-color:#f0f2f5;padding:8px;border-radius:4px;margin:0 0 10px}.download-button{display:inline-block;padding:8px 15px;font-size:13px;font-weight:700;color:#fff;background-color:#27ae60;border:none;border-radius:5px;cursor:pointer;text-decoration:none;transition:background-color .2s}.download-button:hover{background-color:#229954}.week-selector{display:flex;align-items:center;gap:8px}.week-selector label{font-size:14px;font-weight:500}.week-selector select{padding:5px 10px;border-radius:5px;border:1px solid var(--border-color)}.main-content-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:flex-start}.rank-container{text-align:center;padding:20px;background:#fdfdfd;border-radius:12px;border:1px solid var(--border-color);box-shadow:0 2px 4px #0000000d}.rank-container h3{margin:0 0 15px;color:var(--secondary-color)}.rank-container h3 span{font-size:1.8em;color:var(--primary-color);margin-left:8px;font-weight:800}.rank-image-wrapper{position:relative;width:100%;max-width:300px;margin:0 auto 15px;aspect-ratio:9 / 16;border-radius:8px;overflow:hidden;background-color:#e0e0e0;border:4px solid #fff;box-shadow:0 4px 10px #0000001a}.rank-image{width:100%;height:100%;object-fit:cover}.old-rank-image,.flash-effect{position:absolute;top:0;left:0;width:100%;height:100%}.old-rank-image{animation:fadeOutShrink 1.2s forwards cubic-bezier(.22,1,.36,1);z-index:2}.new-rank-image-effect{animation:fadeInGrow 1.2s forwards .3s cubic-bezier(.22,1,.36,1)}.flash-effect{background:#fff;opacity:0;animation:flash .8s forwards .1s;z-index:3;pointer-events:none}@keyframes fadeOutShrink{0%{opacity:1;transform:scale(1);filter:brightness(1)}to{opacity:0;transform:scale(.9);filter:brightness(2)}}@keyframes fadeInGrow{0%{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes flash{0%{opacity:.8}to{opacity:0}}.mission-evaluation-container{padding-left:20px}.todo-evaluation-list .day-group{margin-bottom:20px}.todo-evaluation-list h5{font-size:16px;margin-bottom:8px;padding-left:5px;border-left:3px solid var(--accent-blue)}.todo-evaluation-list ul{list-style:none;padding:0;margin:0}.task-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;margin-bottom:8px;border-radius:6px;background-color:#f8f9fa;border:1px solid var(--border-color);border-left:5px solid #bdc3c7;transition:all .3s ease}.task-item.status-complete{background-color:#f0fff4;border-left-color:var(--accent-green)}.task-item.status-incomplete{background-color:#fff8f8;border-left-color:var(--accent-red)}.task-text{flex-grow:1;padding-right:15px;font-size:15px}.mission-actions{display:flex;gap:8px;flex-shrink:0}.mission-actions button{padding:6px 12px;font-size:13px;font-weight:700;border:2px solid;border-radius:20px;cursor:pointer;transition:all .2s;background-color:transparent}.complete-btn{border-color:var(--accent-green);color:var(--accent-green)}.incomplete-btn{border-color:var(--accent-red);color:var(--accent-red)}.task-item.status-complete .complete-btn{background-color:var(--accent-green);color:#fff}.task-item.status-incomplete .incomplete-btn{background-color:var(--accent-red);color:#fff}.mission-actions button:disabled{opacity:.5;cursor:not-allowed}.evaluation-footer{margin-top:30px;text-align:right;padding-top:20px;border-top:1px solid var(--border-color)}.evaluate-button{padding:12px 30px;font-size:16px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--primary-color),var(--accent-blue));border:none;border-radius:30px;cursor:pointer;box-shadow:0 4px 10px #1a3b5d4d;transition:transform .2s,box-shadow .2s}.evaluate-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #1a3b5d66}.evaluate-button:disabled{background:#bdc3c7;cursor:not-allowed;box-shadow:none;transform:none}.evaluated-message{font-size:18px;font-weight:700;color:var(--primary-color);display:flex;align-items:center;justify-content:flex-end}.evaluated-message:before{content:"✅";margin-right:8px}.unevaluated-message{font-size:16px;font-weight:500;color:#7f8c8d;text-align:right}.old-data-container{font-size:15px}.old-data-notice{background-color:#fffbe6;border:1px solid #ffe58f;border-left:5px solid #fadb14;padding:15px;border-radius:8px;margin-bottom:20px}.old-data-notice strong{display:block;margin-bottom:5px;font-size:16px;color:#d46b08}.old-data-notice p{margin:0}.old-data-container h5{font-size:16px;color:var(--primary-color);margin-bottom:10px}.old-mission-list{list-style:none;padding:0;margin:0}.old-mission-list li{background-color:#f8f9fa;padding:10px 15px;border-radius:4px;margin-bottom:8px;border:1px solid var(--border-color)}.no-mission-notice{background-color:#e8f4fd;border:1px solid #d0e8fc;border-left:5px solid var(--accent-blue);padding:20px;border-radius:8px}.no-mission-notice p{margin:0;line-height:1.6}.no-mission-notice p:first-child{margin-bottom:10px}@media (max-width: 1200px){.dashboard-container{grid-template-columns:1fr 1.3fr}#current-status{grid-column:1 / -1}}@media (max-width: 900px){.dashboard-container,.main-content-grid,#weekly-todo-list{grid-template-columns:1fr}.portfolio-charts{flex-direction:column}.mission-evaluation-container{padding-left:0;margin-top:30px}.rank-image-wrapper{max-width:200px}}@media (max-width: 768px){.app-container{padding:10px}.header{flex-direction:column;align-items:flex-start}.header-controls{width:100%;justify-content:space-between}.modal-content{width:95%}}.issue-card.critical-alert{background-color:#e2d757;color:#fff;border:1px solid #843534;border-left:8px solid #d9534f;animation:pulse-animation 1.5s infinite}.issue-card.critical-alert h4{color:#fff;display:flex;align-items:center;font-size:18px}.issue-card.critical-alert h4:before{content:"🚨";margin-right:10px;font-size:20px}.issue-card.critical-alert p{font-size:15px;font-weight:500}@keyframes pulse-animation{0%{box-shadow:0 0 #d9534fb3}70%{box-shadow:0 0 0 10px #d9534f00}to{box-shadow:0 0 #d9534f00}}.page-container{max-width:1600px;margin:0 auto;padding:30px}.page-container h2{margin-bottom:10px;color:var(--primary-color);font-size:26px}.page-container .description{margin-bottom:25px;color:#64748b;font-size:.9rem}.legend{display:flex;gap:20px;margin-bottom:20px;background:#fff;padding:12px 20px;border-radius:8px;box-shadow:0 1px 2px #0000000d;font-size:.85rem;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:6px;cursor:default}.legend-box{width:12px;height:12px;border-radius:2px;border:1px solid #ccc}.line-mark{width:25px;height:3px;background:var(--accent-yellow);position:relative}.line-mark:after{content:"";width:8px;height:8px;background:#fff;border:2px solid var(--accent-yellow);border-radius:50%;position:absolute;left:8px;top:-2.5px}.monitor-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:2500px;margin:0 auto}@media (max-width: 1200px){.monitor-grid{grid-template-columns:1fr}}.performance-card{background:var(--panel-bg-color);border-radius:12px;box-shadow:0 4px 6px #0000000d;display:flex;height:320px;overflow:hidden;border:1px solid #e2e8f0}.performance-info{width:210px;background:#f8fafc;padding:15px;display:flex;flex-direction:column;border-right:1px solid #e2e8f0;flex-shrink:0;font-size:.85rem}.person-name{font-size:1.1rem;font-weight:700;margin-bottom:10px;color:#0f172a}.target-section{margin-bottom:15px}.progress-container{width:100%;height:6px;background:#e2e8f0;border-radius:3px;margin-top:4px}.progress-bar{height:100%;background:var(--accent-yellow);width:0%;border-radius:3px;transition:width .5s ease-in-out}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:15px;border-top:1px dashed #cbd5e1}.stat-item{display:flex;flex-direction:column}.stat-label{font-size:.7rem;color:#64748b;margin-bottom:2px}.stat-val{font-weight:700;font-size:1.1rem}.chart-area{flex:1;display:flex;position:relative;padding-top:40px;padding-bottom:5px;background-color:#fff}.svg-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.sales-line{fill:none;stroke:var(--accent-yellow);stroke-width:3;stroke-linejoin:round;filter:drop-shadow(0 2px 2px rgba(0,0,0,.1))}.sales-dot{fill:#fff;stroke:var(--accent-yellow);stroke-width:2;r:4}.target-line{stroke:#cbd5e1;stroke-width:1;stroke-dasharray:4}.monthly-columns{display:flex;width:100%;height:100%;position:relative}.month-column{flex:1;border-right:1px solid #f1f5f9;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;transition:all .2s}.month-column:last-child{border-right:none}.month-column.low-activity{background-color:#fee2e2}.month-column.gap-issue{background-color:#fef9c3}.month-column.low-activity:hover{background-color:#fca5a5}.month-column.gap-issue:hover{background-color:#fde047}.bar-activity{background:var(--accent-blue);opacity:.6}.bar-stock{background:var(--accent-green)}.month-label{position:absolute;bottom:4px;width:100%;text-align:center;font-size:.7rem;color:#64748b;font-weight:700;pointer-events:none}.month-column:hover .tooltip{opacity:1}:root{--chart-bar1: #94a3b8;--chart-bar2: #3b82f6;--chart-line: #f59e0b}.won-markers{position:absolute;top:5px;left:50%;transform:translate(-50%);display:flex;gap:2px;pointer-events:none;z-index:15}.won-marker{font-size:14px;animation:heartbeat 1.5s ease-in-out infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}@keyframes heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.month-label{position:absolute;bottom:4px;width:100%;text-align:center;font-size:.7rem;color:#64748b;font-weight:700;pointer-events:none;z-index:5}:root{--bg-body: #f1f5f9;--panel-bg: #ffffff;--bar-activity: #94a3b8;--bar-stock: #3b82f6;--line-sales: #f59e0b;--status-low-bg: #fee2e2;--status-gap-bg: #fef9c3;--text-main: #334155}.rep-panel{background:var(--panel-bg);border-radius:12px;box-shadow:0 4px 6px #0000000d;display:flex;height:320px;overflow:hidden;border:1px solid #e2e8f0}.rep-info{width:210px;background:#f8fafc;padding:15px;display:flex;flex-direction:column;border-right:1px solid #e2e8f0;flex-shrink:0;font-size:.85rem}.rep-name{font-size:1.1rem;font-weight:700;margin-bottom:10px;color:#0f172a}.month-col{flex:1;border-right:1px solid #f1f5f9;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;transition:all .2s}.month-col:last-child{border-right:none}.month-col.low_activity{background-color:var(--status-low-bg);cursor:pointer}.month-col.gap_issue{background-color:var(--status-gap-bg);cursor:pointer}.month-col.low_activity:hover{background-color:#fca5a5}.month-col.gap_issue:hover{background-color:#fde047}.bar-wrapper{width:85%;height:100%;position:relative;display:flex;justify-content:center;align-items:flex-end;gap:4px;margin-bottom:20px}.bar{width:45%;border-radius:3px 3px 0 0;transition:height .5s;pointer-events:none}.bar-act{background:var(--bar-activity);opacity:.6}.bar-stock{background:var(--bar-stock)}.tooltip{position:absolute;bottom:85%;left:50%;transform:translate(-50%);background:#0f172af2;color:#fff;padding:8px 12px;border-radius:6px;font-size:.75rem;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s;z-index:20;box-shadow:0 4px 10px #00000026}.month-col:hover .tooltip{opacity:1}.modal-header{font-size:1.2rem;font-weight:700;margin-bottom:15px;display:flex;align-items:center;gap:10px}.modal-close{position:absolute;top:15px;right:20px;font-size:1.5rem;cursor:pointer;color:#999}.modal-close:hover{color:#333}.modal-content h4{margin:15px 0 5px;color:#475569;font-size:.9rem;border-bottom:1px solid #eee;padding-bottom:5px}.modal-content p{margin:0;font-size:.95rem;line-height:1.6;color:#333}.modal-tag{display:inline-block;padding:4px 10px;border-radius:4px;font-size:.8rem;font-weight:700}.tag-red{background:var(--status-low-bg);color:#b91c1c;border:1px solid #fecaca}.tag-yellow{background:var(--status-gap-bg);color:#854d0e;border:1px solid #fde047}.won-marker{position:absolute;top:5px;font-size:16px;pointer-events:none;z-index:15;animation:heartbeat 1.5s ease-in-out infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}.box{width:12px;height:12px;border-radius:2px;border:1px solid #ccc}.line-mark{width:25px;height:3px;background:var(--line-sales);position:relative}.line-mark:after{content:"";width:8px;height:8px;background:#fff;border:2px solid var(--line-sales);border-radius:50%;position:absolute;left:8px;top:-2.5px}
