/* ═══════════════════════════════════════════════════════════════════ */
/* FLOATING TIMER WIDGET - Production Styles */
/* ═══════════════════════════════════════════════════════════════════ */
.power-timer-widget {
position: fixed;
bottom: 20px;
right: 20px;
width: 360px;
background: white;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
z-index: 9999;
font-family: Arial, sans-serif;
overflow: hidden;
border: 3px solid #FF8C00;
transition: all 0.3s ease;
}
.timer-header {
background: linear-gradient(135deg, #FF8C00, #FFB84D);
color: white;
padding: 12px 15px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: move;
user-select: none;
}
.timer-title {
font-weight: bold;
font-size: 16px;
display: flex;
align-items: center;
gap: 6px;
}
.timer-controls-top {
display: flex;
gap: 5px;
}
.timer-btn-icon {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 28px;
height: 28px;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
font-size: 14px;
}
.timer-btn-icon:hover {
background: rgba(255, 255, 255, 0.3);
}
.timer-body {
padding: 20px;
}
/* Timer Display */
.timer-display-section {
text-align: center;
margin-bottom: 20px;
padding: 15px;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 8px;
}
.timer-clock {
font-size: 48px;
font-weight: bold;
color: #28a745;
margin-bottom: 8px;
font-family: 'Courier New', monospace;
transition: color 0.3s ease;
}
.timer-green { color: #28a745 !important; }
.timer-yellow { color: #ffc107 !important; }
.timer-red { color: #dc3545 !important; }
.timer-blink {
animation: blink 1s infinite;
}
@keyframes blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0.3; }
}
.timer-status {
font-size: 14px;
color: #666;
font-weight: 500;
}
/* Quick Capture Section */
.quick-capture-section {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
border: 1px solid #e9ecef;
}
.section-title {
margin: 0 0 12px 0;
font-size: 14px;
font-weight: bold;
color: #1a2b47;
}
.form-group-inline {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 8px;
}
.form-group-inline:has(select) {
grid-template-columns: 1fr;
}
.timer-input {
padding: 8px 10px;
border: 2px solid #e9ecef;
border-radius: 6px;
font-size: 13px;
transition: border-color 0.3s ease;
width: 100%;
box-sizing: border-box;
}
.timer-input:focus {
outline: none;
border-color: #FF8C00;
}
.timer-btn-save {
width: 100%;
margin-top: 8px;
}
/* Progress Section */
.progress-section {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
padding: 12px 15px;
border-radius: 8px;
margin-bottom: 15px;
border: 1px solid #dee2e6;
}
.progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-size: 13px;
font-weight: 600;
color: #1a2b47;
}
.progress-count {
color: #FF8C00;
font-size: 16px;
font-weight: bold;
}
.progress-stars {
font-size: 24px;
text-align: center;
letter-spacing: 4px;
}
/* Action Buttons */
.timer-action-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.timer-btn {
padding: 10px 15px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.3s ease;
}
.timer-btn:hover {
transform: translateY(-2px);
}
.timer-btn-primary {
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
}
.timer-btn-primary:hover {
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}
.timer-btn-warning {
background: linear-gradient(135deg, #ffc107, #fd7e14);
color: white;
box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
}
.timer-btn-warning:hover {
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}
.timer-btn-danger {
background: linear-gradient(135deg, #dc3545, #c82333);
color: white;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
}
.timer-btn-danger:hover {
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}
.timer-btn-secondary {
background: linear-gradient(135deg, #6c757d, #5a6268);
color: white;
grid-column: 1 / -1;
box-shadow: 0 2px 8px rgba(108, 117, 125, 0.2);
}
.timer-btn-secondary:hover {
box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}
.timer-btn-info {
background: linear-gradient(135deg, #17a2b8, #138496);
color: white;
grid-column: 1 / -1;
box-shadow: 0 2px 8px rgba(23, 162, 184, 0.2);
}
.timer-btn-info:hover {
box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}
.timer-btn-save {
background: linear-gradient(135deg, #FF8C00, #FFB84D);
color: white;
box-shadow: 0 2px 8px rgba(255, 140, 0, 0.2);
}
.timer-btn-save:hover {
box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
}
/* Minimized State */
.timer-minimized {
display: none;
align-items: center;
justify-content: space-between;
padding: 10px 15px;
}
.mini-clock {
font-size: 24px;
font-weight: bold;
font-family: 'Courier New', monospace;
color: #1a2b47;
}
.mini-expand {
background: rgba(255, 140, 0, 0.2);
border: none;
color: #FF8C00;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.mini-expand:hover {
background: rgba(255, 140, 0, 0.3);
transform: scale(1.1);
}
/* Notifications */
.timer-notification {
position: fixed;
top: 20px;
right: 20px;
background: white;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 10000;
opacity: 0;
transform: translateX(100%);
transition: all 0.3s ease;
max-width: 350px;
border-left: 4px solid #FF8C00;
}
.timer-notification.show {
opacity: 1;
transform: translateX(0);
}
.timer-celebration {
border-left-color: #28a745;
}
.timer-goal-reached {
border-left-color: #ffc107;
background: linear-gradient(135deg, #fff3cd, #ffffff);
}
.timer-reminder {
border-left-color: #17a2b8;
}
.timer-success {
border-left-color: #28a745;
background: #d4edda;
color: #155724;
}
.timer-error {
border-left-color: #dc3545;
background: #f8d7da;
color: #721c24;
}
.timer-warning {
border-left-color: #ffc107;
background: #fff3cd;
color: #856404;
}
.celebration-content {
display: flex;
gap: 15px;
align-items: center;
}
.celebration-icon {
font-size: 32px;
flex-shrink: 0;
}
.celebration-text strong {
display: block;
margin-bottom: 4px;
color: #1a2b47;
font-size: 15px;
}
.celebration-text p {
margin: 0;
color: #666;
font-size: 13px;
}
/* Break Mode Widget */
.break-mode-widget {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
max-width: 90vw;
background: white;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
z-index: 10000;
overflow: hidden;
border: 3px solid #FF8C00;
}
.break-header {
background: linear-gradient(135deg, #6c757d, #5a6268);
color: white;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
font-size: 18px;
}
.break-timer {
background: rgba(255, 255, 255, 0.2);
padding: 5px 12px;
border-radius: 6px;
font-family: 'Courier New', monospace;
font-size: 20px;
}
.break-body {
padding: 20px;
}
.snake-container {
text-align: center;
}
.game-title {
margin: 0 0 15px 0;
color: #1a2b47;
font-size: 24px;
}
.game-instructions {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
text-align: left;
border: 1px solid #dee2e6;
}
.game-instructions p {
margin: 0 0 8px 0;
font-weight: bold;
color: #1a2b47;
}
.game-instructions ul {
margin: 0;
padding-left: 20px;
}
.game-instructions li {
margin: 4px 0;
color: #666;
font-size: 14px;
}
.game-stats {
display: flex;
justify-content: space-around;
margin-bottom: 15px;
padding: 10px;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 8px;
}
.game-stats span {
font-size: 14px;
color: #666;
}
.game-stats strong {
color: #FF8C00;
font-size: 18px;
}
#snake-canvas {
border: 3px solid #FF8C00;
border-radius: 8px;
margin: 0 auto 15px;
display: block;
max-width: 100%;
height: auto;
}
.game-controls {
display: flex;
gap: 10px;
justify-content: center;
margin-bottom: 15px;
}
.game-btn {
padding: 10px 20px;
background: linear-gradient(135deg, #FF8C00, #FFB84D);
color: white;
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.3s ease;
}
.game-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
}
.break-btn-back {
width: 100%;
padding: 12px 20px;
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.3s ease;
}
.break-btn-back:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}
/* Pipeline Board Styles */
.pipeline-header {
background: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
border: 3px solid #FF8C00;
}
.pipeline-title {
margin: 0;
color: #1a2b47;
font-size: 24px;
}
.pipeline-summary {
display: flex;
gap: 20px;
}
.summary-stat {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #666;
}
.summary-stat i {
color: #FF8C00;
}
.summary-stat strong {
color: #1a2b47;
font-size: 18px;
}
.pipeline-columns {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin-bottom: 30px;
}
.pipeline-column {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.column-header {
padding: 12px 15px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
}
.column-title {
font-size: 14px;
}
.column-count {
background: rgba(255, 255, 255, 0.3);
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
}
.column-body {
padding: 10px;
min-height: 400px;
background: #f8f9fa;
}
.column-body.drag-over {
background: #fff3cd;
border: 2px dashed #ffc107;
}
.column-empty {
text-align: center;
padding: 40px 10px;
color: #999;
font-size: 13px;
font-style: italic;
}
.pipeline-card {
background: white;
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 12px;
margin-bottom: 10px;
cursor: move;
transition: all 0.3s ease;
}
.pipeline-card:hover {
border-color: #FF8C00;
box-shadow: 0 4px 12px rgba(255, 140, 0, 0.2);
transform: translateY(-2px);
}
.pipeline-card.dragging {
opacity: 0.5;
transform: rotate(3deg);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.card-name {
color: #1a2b47;
font-size: 15px;
font-weight: bold;
}
.card-outcome {
font-size: 18px;
}
.card-details {
margin-bottom: 8px;
}
.card-detail {
font-size: 12px;
color: #666;
margin: 4px 0;
display: flex;
align-items: center;
gap: 6px;
}
.card-detail i {
color: #FF8C00;
width: 14px;
}
.card-meta {
display: flex;
justify-content: space-between;
padding-top: 8px;
border-top: 1px solid #e9ecef;
font-size: 11px;
color: #999;
margin-bottom: 8px;
}
.card-actions {
display: flex;
gap: 5px;
padding-top: 8px;
border-top: 1px solid #e9ecef;
}
.card-btn {
flex: 1;
padding: 6px;
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 4px;
cursor: pointer;
color: #666;
transition: all 0.3s ease;
font-size: 12px;
}
.card-btn:hover {
background: #FF8C00;
color: white;
border-color: #FF8C00;
}
.card-btn-delete:hover {
background: #dc3545;
border-color: #dc3545;
}
/* Pipeline Modal */
.pipeline-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
transition: opacity 0.3s ease;
}
.pipeline-modal.show {
opacity: 1;
}
.modal-content {
background: white;
border-radius: 12px;
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
border: 3px solid #FF8C00;
}
.modal-header {
background: linear-gradient(135deg, #FF8C00, #FFB84D);
color: white;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
margin: 0;
font-size: 20px;
}
.modal-close {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.modal-close:hover {
background: rgba(255, 255, 255, 0.3);
}
.modal-body {
padding: 20px;
}
.modal-detail {
margin-bottom: 12px;
padding: 10px;
background: #f8f9fa;
border-radius: 6px;
}
.modal-detail strong {
color: #1a2b47;
margin-right: 8px;
}
/* Pipeline Notifications */
.pipeline-notification {
position: fixed;
top: 20px;
right: 20px;
background: white;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 10001;
opacity: 0;
transform: translateX(100%);
transition: all 0.3s ease;
border-left: 4px solid #FF8C00;
}
.pipeline-notification.show {
opacity: 1;
transform: translateX(0);
}
.notification-success {
border-left-color: #28a745;
}
.notification-error {
border-left-color: #dc3545;
}
/* Responsive Design */
@media (max-width: 1200px) {
.pipeline-columns {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.power-timer-widget {
width: calc(100vw - 40px);
left: 20px;
right: 20px;
}
.pipeline-columns {
grid-template-columns: 1fr;
}
.timer-action-buttons {
grid-template-columns: 1fr;
}
.form-group-inline {
grid-template-columns: 1fr;
}
.break-mode-widget {
width: calc(100vw - 40px);
}
#snake-canvas {
width: 100%;
max-width: 300px;
height: auto;
}
}