.brew-status-container {
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}

.device-status-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
    position: relative;
}

.status-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(0,0,0,0.1);
}

.status-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.status-card.error {
    background: rgba(244, 67, 54, 0.05);
    border-color: rgba(244, 67, 54, 0.2);
}

.status-card.success {
    background: white;
}

.status-card h3 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
}

.status-badges-container {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.status-badge.standby,
.standby .status-badge { 
    background: #f1c40f; /* Yellow */
    color: #000; 
}

.status-badge.brewing,
.brewing .status-badge { 
    background: #2ecc71; /* Green */
    color: #fff; 
}

.status-badge.monitoring,
.monitoring .status-badge,
.status-badge.success,
.success .status-badge { 
    background: #9b59b6; /* Purple */
    color: #fff; 
}

.status-badge.pressure,
.pressure .status-badge { 
    background: #3498db; /* Blue */
    color: #fff; 
}

.status-badge.finished,
.finished .status-badge { 
    background: #27ae60; /* Dark Green */
    color: #fff; 
}

.status-badge.disconnected,
.disconnected .status-badge,
.status-badge.disconnected-or-device-error,
.disconnected-or-device-error .status-badge { 
    background: #e74c3c; /* Red */
    color: #fff; 
}

.status-badge.claimed,
.claimed .status-badge {
    background: #4CAF50; /* Green */
    color: #fff;
}

/* Status icons */
.status-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
}

.standby .status-icon::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f1c40f"><path d="M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z"/></svg>');
}

.brewing .status-icon::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232ecc71"><path d="M2,2V4H7V8H2V10H7C8.1,10 9,9.1 9,8V4C9,2.9 8.1,2 7,2H2M19,2C17.9,2 17,2.9 17,4V8C17,9.1 17.9,10 19,10H22V8H19V4H22V2H19M2,15V17H7V21H2V23H7C8.1,23 9,22.1 9,21V17C9,15.9 8.1,15 7,15H2M19,15C17.9,15 17,15.9 17,17V21C17,22.1 17.9,23 19,23H22V21H19V17H22V15H19Z"/></svg>');
}

.monitoring .status-icon::before,
.success .status-icon::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239b59b6"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
}

.pressure .status-icon::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233498db"><path d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 2a8 8 0 0 1 8 8 8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8m4.9 3.1c-.2 0-.4.1-.5.3L13 13.8l-2.5-2.5c-.3-.3-.7-.3-1 0-.3.3-.3.7 0 1l3 3c.2.2.5.3.7.1.2-.1.4-.3.5-.6l3.7-6.6c.1-.3 0-.6-.3-.8-.1.1-.2.1-.3.1z"/></svg>');
}

.finished .status-icon::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2327ae60"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
}

.claimed .status-icon::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234CAF50"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
}

.disconnected .status-icon::before,
.disconnected-or-device-error .status-icon::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e74c3c"><path d="M12 2C17.53 2 22 6.47 22 12c0 5.53-4.47 10-10 10S2 17.53 2 12 6.47 2 12 2m3.59 5L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41 15.59 7z"/></svg>');
}

.metric-value {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

.progress-bar {
    height: 6px;
    background: #eee;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.progress-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--value);
    background: #3498db;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.metrics-grid div {
    font-size: 14px;
}

.metrics-grid span {
    color: #7f8c8d;
    display: block;
    margin-bottom: 4px;
}

.time-value {
    font-size: 18px;
    font-weight: 500;
    color: #2c3e50;
}

.stage-info p {
    margin: 5px 0;
    font-size: 14px;
}

.action-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.button-wrapper {
    flex: 1;
    min-width: 200px;
}

.button {
    width: 100%;
    padding: 12px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
}

.button:not(.disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.button-icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}

.button.danger {
    background-color: #dc3545;
    color: white;
}

.button.danger:hover {
    background-color: #c82333;
}

.button-icon.delete:before {
    content: "🗑️";
}

.button.loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.button.loading:after {
    content: "...";
}

.update-status {
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    font-size: 14px;
    color: #666;
}

.update-status .loading {
    color: #3498db;
}

.update-status .error {
    color: #e74c3c;
}

/* Loading state */
.loading {
    position: relative;
}

.loading::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(52, 152, 219, 0.3);
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1;
}

#next_update_in {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-size: 12px;
    z-index: 100;
}

#next_update_in .error {
    color: #e74c3c;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Update the opacity for loading state */
.loading .status-card {
    opacity: 0.95;
    transition: opacity 0.3s ease;
}

/* Log Panel Styles */
.log-panel {
    grid-column: span 2;
    max-height: 300px;
    overflow: hidden;
}

#activity-log {
    height: 365px;
    overflow-y: hidden;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 10px;
    position: relative;
}

.button.small.clear-logs {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 121px;
    padding: 4px 8px;
    font-size: 0.8em;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.button.small.clear-logs:hover {
    opacity: 1;
}

.log-entries {
    display: flex;
    flex-direction: column;
}

.log-entry {
    padding: 5px 8px;
    margin: 2px 0;
    font-size: 0.9em;
    border-radius: 3px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.log-entry .timestamp {
    color: #666;
    font-size: 0.85em;
    white-space: nowrap;
}

.log-entry .message {
    flex: 1;
}

.log-entry.info {
    background: rgba(0, 123, 255, 0.05);
}

.log-entry.error {
    background: rgba(255, 0, 0, 0.05);
    color: #dc3545;
}

.log-entry.success {
    background: rgba(40, 167, 69, 0.05);
    color: #28a745;
}

.log-entry.warning {
    background: rgba(255, 193, 7, 0.05);
    color: #ffc107;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .device-status-grid {
        grid-template-columns: 1fr;
    }
    
    .button-wrapper {
        flex: 1 1 100%;
    }
}

/* Additional styles for devices list */
.device-details {
    margin: 15px 0;
    font-size: 14px;
}

.device-details p {
    margin: 8px 0;
    color: #666;
}

.device-metrics {
    font-weight: 500;
    color: #2c3e50 !important;
}

.device-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.button {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    background: #3498db;
    color: white;
    border: none;
    cursor: pointer;
}

.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background: #2980b9;
}

.button.unclaim {
    background: #e74c3c;
}

.button.unclaim:hover {
    background: #c0392b;
}

/* Additional status styles for devices */
.unclaimed .status-badge {
    background: #95a5a6;
    color: #fff;
}

.claimed .status-badge {
    background: #2ecc71;
    color: #fff;
}

/* Status icons for devices */
.unclaimed .status-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2395a5a6' d='M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z'/%3E%3C/svg%3E");
}

.claimed .status-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232ecc71' d='M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z'/%3E%3C/svg%3E");
}