:root {
    /* tixity Brand Colors */
    --primary-color: #1D3FBE;
    --secondary-pink: #D53879;
    --secondary-coral: #FF917E;
    --secondary-teal: #7BC9A2;
    
    /* Status Colors */
    --success-color: #7BC9A2;
    --warning-color: #FF917E;
    --danger-color: #D53879;
    --info-color: #1D3FBE;
    
    /* Background Colors - Light Mode */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F9FA;
    --bg-tertiary: #F1F3F5;
    
    /* Text Colors - Light Mode */
    --text-primary: #1A1A1A;
    --text-secondary: #6C757D;
    --text-light: #ADB5BD;
    
    /* Border Colors - Light Mode */
    --border-color: #E9ECEF;
    --border-light: #F1F3F5;
    
    /* Hover States */
    --bg-hover: #F1F3F5;
    --primary-hover: #1632A0;
    --accent-primary: #1D3FBE;
    
    /* Shadow */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Dark Mode Variables */
[data-theme="dark"] {
    /* Background Colors - Dark Mode */
    --bg-primary: #1a1f2e;
    --bg-secondary: #0f1419;
    --bg-tertiary: #2b3544;
    
    /* Text Colors - Dark Mode */
    --text-primary: #ffffff;
    --text-secondary: #8898aa;
    --text-light: #5e6e85;
    
    /* Border Colors - Dark Mode */
    --border-color: #2b3544;
    --border-light: #323a4b;
    
    /* Hover States - Dark Mode */
    --bg-hover: #2b3544;
    --primary-hover: #2545D3;
    --accent-primary: #3B5EE6;
    
    /* Shadow - Dark Mode */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

.dashboard-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    width: 100%;
}

.dashboard-header {
    background-color: var(--bg-primary);
    padding: 1.25rem 1.5rem;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    width: 100%;
    overflow: hidden;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.company-logo {
    height: 56px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.dashboard-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.theme-toggle {
    background: none;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-secondary);
}

.theme-toggle:hover {
    background-color: var(--bg-tertiary);
    color: var(--primary-color);
}

.theme-toggle svg {
    transition: all 0.3s ease;
}

.sun-icon {
    display: block;
}

.moon-icon {
    display: none;
}

[data-theme="dark"] .sun-icon {
    display: none;
}

[data-theme="dark"] .moon-icon {
    display: block;
}

.header-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
}

.header-date {
    color: var(--text-secondary);
    font-size: 0.813rem;
    font-family: 'General Sans', sans-serif;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.header-time-display {
    color: var(--text-primary);
    font-size: 1rem;
    font-family: 'General Sans', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Logo switching for dark/light mode */
.light-logo {
    display: block;
}

.dark-logo {
    display: none;
}

[data-theme="dark"] .light-logo {
    display: none;
}

[data-theme="dark"] .dark-logo {
    display: block;
}

.dashboard-nav {
    background-color: var(--bg-primary);
    padding: 0.5rem 1.5rem;
    display: flex;
    gap: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.nav-btn {
    background: none;
    border: 2px solid transparent;
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.813rem;
    font-weight: 500;
    font-family: 'Urbanist', sans-serif;
}

.nav-btn:hover {
    background-color: var(--bg-tertiary);
    color: var(--primary-color);
}

.nav-btn.active {
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
}

/* Coming soon badge */
.coming-soon-badge {
    font-size: 10px;
    background: var(--secondary-coral);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dashboard-content {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 120px); /* Adjust based on header and nav height */
    width: 100%;
}

.dashboard-section {
    display: none;
    width: 100%;
    overflow-x: hidden;
}

.dashboard-section.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Support section takes full height */
#support-section {
    display: none;
    flex-direction: column;
}

#support-section.active {
    display: flex;
}

#support-section .support-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#support-section .recent-issues {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-section h2 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    font-weight: 700;
    font-family: 'Urbanist', sans-serif;
    color: var(--text-primary);
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
    width: 100%;
}

/* Cycle card with merged stats */
.metric-card.cycle-card {
    position: relative;
}

.cycle-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-light);
}

/* Compact styles for merged cycle card */
.metric-card.cycle-card.merged .cycle-stats-row {
    gap: 2rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.metric-card.cycle-card.merged .cycle-stat-item {
    gap: 0.25rem;
}

.metric-card.cycle-card.merged .cycle-stat-item .stat-label {
    font-size: 0.875rem;
}

.metric-card.cycle-card.merged .cycle-stat-item .stat-value {
    font-size: 1.5rem;
}

.metric-card.cycle-card.merged .cycle-stat-item .stat-detail {
    font-size: 0.875rem;
}

.metric-card.cycle-card.merged .progress-bar {
    height: 3px;
}

.cycle-stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cycle-stat-item .stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 500;
}

.cycle-stat-item .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Urbanist', sans-serif;
}

.cycle-stat-item .stat-detail {
    font-size: 0.813rem;
    color: var(--text-secondary);
}

@media (max-width: 1400px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1200px) {
    .metrics-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .cycle-stats-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .priority-grid-compact {
        grid-template-columns: 1fr 1fr;
    }
    
    .metric-card.priority-status-card {
        height: auto;
        max-height: 400px;
    }
    
    .priority-status-columns {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.metric-card {
    background-color: var(--bg-primary);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Prominent metric card */
.metric-card-prominent {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
}

.metric-card-prominent:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.metric-card-prominent h3 {
    color: var(--primary-color);
    font-weight: 700;
}

.metric-card-prominent .metric-number {
    color: var(--primary-color);
}

.metric-card-prominent .metric-label {
    color: var(--text-secondary);
}

.metric-card-prominent .metric-total {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Split metric display for open/closed */
.metric-split {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.metric-part {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.metric-number {
    font-size: 3rem;
    line-height: 1;
    display: block;
}

.metric-sublabel {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
    opacity: 0.8;
}

.metric-divider {
    font-size: 2rem;
    opacity: 0.5;
    margin: 0 0.5rem;
    align-self: flex-start;
    padding-top: 0.5rem;
}

.metric-closed {
    opacity: 0.8;
}

.metric-card-prominent .metric-sublabel {
    color: var(--text-secondary);
    font-weight: 600;
}

.metric-card h3 {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Urbanist', sans-serif;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
    font-family: 'Urbanist', sans-serif;
}


/* Support metrics grid with 4 cards */
.support-metrics-extended {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 1rem;
}

@media (max-width: 1200px) {
    .support-metrics-extended {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .support-metrics-extended {
        grid-template-columns: 1fr;
    }
}

.metric-detail {
    font-size: 0.813rem;
    color: var(--text-secondary);
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary-teal), var(--primary-color));
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* Timeline card in metrics grid */
.metric-card.timeline-card .timeline-header {
    margin-bottom: 1.5rem;
}

.metric-card.timeline-card .timeline-container {
    margin-top: 0;
}

/* Merged cycle card */
.metric-card.cycle-card.merged {
    display: flex;
    flex-direction: column;
}

.cycle-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.cycle-info h3 {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.cycle-info .metric-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.cycle-name-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cycle-name-link:hover {
    color: var(--primary-color);
}

.cycle-time {
    text-align: right;
}

.cycle-time .metric-value {
    font-size: 1.5rem;
    margin-bottom: 0.125rem;
}

.cycle-time .metric-detail {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.metric-card.cycle-card.merged .timeline-container {
    margin-bottom: 0.75rem;
}

.metric-card.cycle-card.merged .timeline-bar {
    height: 20px;
    margin-bottom: 0.375rem;
}

.metric-card.cycle-card.merged .timeline-labels {
    font-size: 0.875rem;
}

.metric-card.cycle-card.merged .timeline-labels span {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* First row cards fixed height */
.metric-card.cycle-card,
.metric-card.priority-card-compact,
.metric-card.tasks-card,
.metric-card.wins-card {
    height: 280px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* Completed tasks card */
.metric-card.tasks-card {
    grid-column: span 1;
}

.tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.tasks-header h3 {
    margin-bottom: 0;
    font-size: 0.875rem;
}

.tasks-count {
    text-align: right;
}

.tasks-count .metric-value {
    font-size: 2rem;
    margin-bottom: 0.125rem;
}

.tasks-count .metric-detail {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.completed-tasks-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    padding: 0;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.completed-tasks-list::-webkit-scrollbar {
    display: none;
}

.completed-task-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    margin-bottom: 0.375rem;
    background-color: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-light);
    transition: all 0.2s ease;
    gap: 0.75rem;
}

.completed-task-link:last-child .completed-task-item {
    margin-bottom: 0;
}


.task-icon {
    color: var(--success-color);
    margin-right: 0.5rem;
    flex-shrink: 0;
    font-size: 0.75rem;
}

.task-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.completed-task-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.completed-task-link:hover .completed-task-item {
    background-color: var(--bg-tertiary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.completed-task-link:hover .task-id-badge {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.task-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.task-id-badge {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1.2;
    border: 1px solid var(--border-color);
}

.task-title {
    font-size: 0.813rem;
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
    flex: 1;
    min-width: 0;
}

.task-priority {
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    align-self: flex-start;
}

.completed-task-item .task-assignee-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-left: auto;
}

.completed-task-item .task-assignee-avatar.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.task-assignee-link {
    display: inline-block;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.task-assignee-link:hover {
    transform: scale(1.1);
}

.task-assignee {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 120px;
}

.task-priority {
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Priority and Status card with two columns */
.metric-card.priority-status-card {
    display: flex;
    flex-direction: column;
}

.metric-card.priority-status-card h3 {
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.priority-status-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.priority-column,
.status-column {
    display: flex;
    flex-direction: column;
}

.priority-column h4,
.status-column h4 {
    font-size: 0.813rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

/* Compact priority card */
.metric-card.wins-card h3 {
    margin-bottom: 1rem;
}

.priority-grid-compact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    overflow-y: auto;
    overflow-x: hidden;
    /* Height to show exactly 4 items */
    height: 9.5rem;
    /* Hide scrollbar for Chrome, Safari and Opera */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.priority-grid-compact::-webkit-scrollbar {
    display: none;
}

.priority-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0.625rem;
    border-radius: 6px;
    border: 1px solid;
    transition: all 0.3s ease;
    position: relative;
}

.priority-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.priority-item .priority-label {
    font-size: 0.875rem;
    font-weight: 500;
}

.priority-item .priority-count {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Urbanist', sans-serif;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.priority-item .priority-counts {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.priority-count.split-count {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1.5rem;
}

.count-open {
    color: inherit;
    font-weight: 700;
    font-size: 1.5rem;
}

.count-divider {
    color: var(--text-light);
    font-weight: 400;
    font-size: 1.25rem;
}

.count-completed {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 1.5rem;
}

.priority-item.urgent {
    border-color: var(--secondary-coral);
    background-color: rgba(255, 145, 126, 0.1);
}

.priority-item.urgent .priority-count {
    color: var(--secondary-coral);
}

.priority-item.high {
    border-color: var(--secondary-pink);
    background-color: rgba(213, 56, 121, 0.1);
}

.priority-item.high .priority-count {
    color: var(--secondary-pink);
}

.priority-item.medium {
    border-color: var(--primary-color);
    background-color: rgba(29, 63, 190, 0.1);
}

.priority-item.medium .priority-count {
    color: var(--primary-color);
}

.priority-item.low {
    border-color: var(--text-light);
    background-color: var(--bg-tertiary);
}

.priority-item.low .priority-count {
    color: var(--text-secondary);
}

/* Priority Assignee Avatars */
.priority-assignees {
    display: flex;
    align-items: center;
    margin-left: 0.75rem;
}

.priority-assignee-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    margin-left: -10px;
    border: 2px solid var(--bg-primary);
    background-color: var(--bg-primary);
}

.priority-assignee-avatar:first-child {
    margin-left: 0;
}

.priority-assignee-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.priority-assignee-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

.priority-assignee-avatar.overflow .avatar-placeholder {
    background-color: var(--bg-tertiary);
    font-size: 0.65rem;
}

/* Status grid styling */
.status-grid-compact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    overflow-y: auto;
    overflow-x: hidden;
    /* Match priority grid height */
    height: 9.5rem;
    /* Hide scrollbar for Chrome, Safari and Opera */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.status-grid-compact::-webkit-scrollbar {
    display: none;
}

/* Daily Section Styles */
.daily-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    border-bottom: 1px solid var(--border-light);
}

.daily-cycle-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--bg-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.daily-cycle-badge {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color);
}

.daily-cycle-dates {
    font-size: 0.813rem;
    color: var(--text-secondary);
}

/* New vertical tab layout */
.daily-content-wrapper {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.daily-user-tabs {
    width: 280px;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.daily-tabs-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

.daily-tabs-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.daily-team-summary {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.daily-tabs-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

/* User tab item */
.daily-user-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.daily-user-tab:hover {
    background: var(--bg-secondary);
}

.daily-user-tab.active {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.daily-user-tab.overview-tab {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    margin-bottom: 12px;
}

.daily-user-tab.overview-tab.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.daily-user-tab.overview-tab.active .daily-user-name,
.daily-user-tab.overview-tab.active .daily-user-status {
    color: white;
}

.daily-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    flex-shrink: 0;
    border: 2px solid var(--border-light);
}

.daily-user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

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

.daily-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.daily-user-status {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.daily-user-status .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
}

.daily-user-status .status-dot.busy {
    background: var(--warning);
}

.daily-user-status .status-dot.inactive {
    background: var(--text-muted);
}

/* Right content area */
.daily-user-content {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

.daily-tab-pane {
    display: none;
}

.daily-tab-pane.active {
    display: block;
}

.daily-user-pane {
    display: none;
}

.daily-user-pane.active {
    display: block;
}

/* User detail view styling */
.daily-user-detail {
    max-width: 1200px;
    margin: 0 auto;
}

.daily-user-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 2rem;
    background: var(--bg-primary);
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

.daily-user-header .daily-user-avatar {
    width: 80px;
    height: 80px;
    font-size: 24px;
    border: 3px solid var(--primary-color);
}

.daily-user-header-info h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.daily-user-header-info p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.daily-user-sections {
    display: grid;
    gap: 2rem;
}

.daily-user-section {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-light);
}

.daily-user-section h4 {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-primary);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.daily-user-section .section-count {
    background: var(--primary-color);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
}

.daily-issues-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.daily-issue-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.daily-issue-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.daily-issue-checkbox {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Backlog - Thin dashed circle in light grey, animated */
.daily-issue-checkbox.backlog {
    border: 1.5px dashed #9ca3af;
    border-radius: 50%;
    animation: rotate-dash 8s linear infinite;
}

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

/* Todo - Empty circle in light grey outline */
.daily-issue-checkbox.todo {
    border: 2px solid #d1d5db;
    border-radius: 50%;
}

/* In Progress - Circle with ~60% fill in yellow, pulsing */
.daily-issue-checkbox.in-progress {
    border: 2px solid #fbbf24;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    animation: pulse-progress 2s ease-in-out infinite;
}

.daily-issue-checkbox.in-progress::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: #fbbf24;
}

@keyframes pulse-progress {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* Paused - Circle split in half, top grey, bottom muted yellow */
.daily-issue-checkbox.paused {
    border: 2px solid #9ca3af;
    border-radius: 50%;
    background: linear-gradient(to bottom, #9ca3af 50%, #fde68a 50%);
}

/* Blocked - Solid red circle with white dash */
.daily-issue-checkbox.blocked {
    background: #ef4444;
    border: 2px solid #ef4444;
    border-radius: 50%;
}

.daily-issue-checkbox.blocked::after {
    content: '';
    width: 10px;
    height: 2px;
    background: white;
    position: absolute;
}

/* Under Review - Pink circle with rotating border */
.daily-issue-checkbox.review {
    border: 2px solid transparent;
    border-radius: 50%;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(45deg, #ec4899, #f9a8d4, #ec4899) border-box;
    animation: rotate-border 3s linear infinite;
}

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

/* In Testing - Solid purple circle with white checkmark outline */
.daily-issue-checkbox.testing {
    background: #8b5cf6;
    border: 2px solid #8b5cf6;
    border-radius: 50%;
}

.daily-issue-checkbox.testing::after {
    content: '✓';
    color: white;
    font-size: 11px;
    font-weight: 300;
    opacity: 0.9;
}

/* Done - Solid green circle with bold white checkmark */
.daily-issue-checkbox.done {
    background: #10b981;
    border: 2px solid #10b981;
    border-radius: 50%;
}

.daily-issue-checkbox.done::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* Shipped - Green outlined circle with small green checkmark */
.daily-issue-checkbox.shipped {
    border: 2px solid #10b981;
    border-radius: 50%;
    background: white;
}

.daily-issue-checkbox.shipped::after {
    content: '✓';
    color: #10b981;
    font-size: 10px;
    font-weight: bold;
}

/* Completed - Same as done */
.daily-issue-checkbox.completed {
    background: #10b981;
    border: 2px solid #10b981;
    border-radius: 50%;
}

.daily-issue-checkbox.completed::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* Canceled - Solid grey circle with white X */
.daily-issue-checkbox.canceled {
    background: #6b7280;
    border: 2px solid #6b7280;
    border-radius: 50%;
}

.daily-issue-checkbox.canceled::after {
    content: '×';
    color: white;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

/* Duplicate - Grey outlined circle with overlapping circles */
.daily-issue-checkbox.duplicate {
    border: 2px solid #9ca3af;
    border-radius: 50%;
    background: white;
}

.daily-issue-checkbox.duplicate::before,
.daily-issue-checkbox.duplicate::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1px solid #9ca3af;
    border-radius: 50%;
    background: white;
}

.daily-issue-checkbox.duplicate::before {
    left: 4px;
    top: 6px;
}

.daily-issue-checkbox.duplicate::after {
    right: 4px;
    bottom: 6px;
}

/* Triage - Orange circle with clockwise arrow */
.daily-issue-checkbox.triage {
    border: 2px solid #fb923c;
    border-radius: 50%;
    background: white;
}

.daily-issue-checkbox.triage::after {
    content: '↻';
    color: #fb923c;
    font-size: 12px;
    font-weight: bold;
    transform: rotate(45deg);
}

/* Dark mode adjustments */
[data-theme="dark"] .daily-issue-checkbox.todo {
    border-color: #4b5563;
}

[data-theme="dark"] .daily-issue-checkbox.shipped,
[data-theme="dark"] .daily-issue-checkbox.duplicate,
[data-theme="dark"] .daily-issue-checkbox.triage {
    background: var(--bg-secondary);
}

[data-theme="dark"] .daily-issue-checkbox.review {
    background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
                linear-gradient(45deg, #ec4899, #f9a8d4, #ec4899) border-box;
}

.daily-issue-content {
    flex: 1;
    min-width: 0;
}

.daily-issue-title {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.daily-issue-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    align-items: center;
}

.daily-issue-meta .issue-id {
    font-weight: 600;
    color: var(--primary-color);
}

.daily-issue-meta .issue-status {
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-weight: 500;
}

.daily-issue-meta .issue-priority {
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 500;
}

.daily-issue-meta .issue-priority.priority-urgent {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.daily-issue-meta .issue-priority.priority-high {
    background: rgba(251, 146, 60, 0.1);
    color: #fb923c;
}

.daily-issue-meta .issue-priority.priority-medium {
    background: rgba(250, 204, 21, 0.1);
    color: #facc15;
}

.daily-issue-meta .issue-priority.priority-low,
.daily-issue-meta .issue-priority.priority-none {
    background: rgba(74, 222, 128, 0.1);
    color: #4ade80;
}

.daily-issue-meta .issue-points {
    padding: 2px 8px;
    background: var(--primary-color);
    color: white;
    border-radius: 6px;
    font-weight: 600;
}

.daily-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px dashed var(--border-light);
}

.daily-overview {
    margin-bottom: 2rem;
}

.daily-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.daily-stat-card {
    background-color: var(--bg-primary);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.daily-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.daily-stat-card h4 {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.daily-stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    font-family: 'Urbanist', sans-serif;
}

.daily-stat-label {
    font-size: 0.813rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.daily-team-grid {
    column-count: 3;
    column-gap: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .daily-team-grid {
        column-count: 2;
    }
}

@media (max-width: 900px) {
    .daily-team-grid {
        column-count: 1;
    }
}

.daily-member-card {
    background-color: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    break-inside: avoid;
    margin-bottom: 1.5rem;
}

.daily-member-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.daily-member-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
    background-color: var(--bg-secondary);
}

.daily-member-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.daily-member-avatar.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    background-color: var(--primary-color);
    color: white;
}

.daily-member-info {
    flex: 1;
}

.daily-member-info h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.daily-member-status {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.daily-member-points {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--secondary-teal);
    background-color: rgba(123, 201, 162, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    flex-shrink: 0;
}

.daily-section {
    padding: 1rem;
}

.daily-section h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.daily-section-count {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

.daily-task-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.daily-task-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 6px;
    background-color: var(--bg-tertiary);
    transition: all 0.2s ease;
}

.daily-task-item:hover {
    transform: translateX(4px);
    background-color: var(--bg-secondary);
}

.daily-task-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
}

.daily-task-icon.completed {
    background-color: var(--success-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
}

.daily-task-icon.todo {
    border: 2px solid var(--primary-color);
}

.daily-task-icon.available {
    border: 2px dashed var(--text-light);
}

.daily-task-content {
    flex: 1;
}

.daily-task-title {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.125rem;
    color: var(--text-primary);
}

.daily-task-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.daily-task-id {
    font-weight: 600;
}

.daily-task-priority {
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
}

.daily-task-priority.priority-urgent {
    background-color: rgba(255, 145, 126, 0.2);
    color: var(--secondary-coral);
}

.daily-task-priority.priority-high {
    background-color: rgba(213, 56, 121, 0.2);
    color: var(--secondary-pink);
}

.daily-task-priority.priority-medium {
    background-color: rgba(29, 63, 190, 0.2);
    color: var(--primary-color);
}

.daily-task-priority.priority-low {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

.daily-task-item {
    text-decoration: none;
    color: inherit;
}

.daily-task-item:hover {
    text-decoration: none;
}

.daily-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.daily-section {
    border-right: 1px solid var(--border-light);
}

.daily-section:last-child {
    border-right: none;
}

.daily-empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.daily-focus-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.daily-focus-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-radius: 6px;
    background-color: var(--bg-tertiary);
}

.daily-focus-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.daily-focus-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
}

.daily-focus-value.in-progress {
    color: var(--secondary-coral);
}

.daily-focus-value.todo {
    color: var(--primary-color);
}

.daily-focus-value.points {
    color: var(--secondary-teal);
}

.daily-status-group {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.daily-status-group:last-child {
    margin-bottom: 0;
}

.daily-status-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.daily-task-points {
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-size: 0.625rem;
    font-weight: 600;
    background-color: rgba(123, 201, 162, 0.1);
    color: var(--secondary-teal);
}

.daily-task-icon.in-progress {
    background-color: var(--secondary-coral);
    border: none;
}

.daily-task-icon.other {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
}

.daily-focus-link {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--primary-color);
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.813rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
    text-align: center;
}

.daily-focus-link:hover {
    background-color: var(--primary-color);
    opacity: 0.9;
    text-decoration: none;
}

@media (max-width: 768px) {
    .daily-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .daily-stats {
        grid-template-columns: 1fr;
    }
    
    .daily-team-grid {
        grid-template-columns: 1fr;
    }
    
    .daily-sections {
        grid-template-columns: 1fr;
    }
    
    .daily-section {
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }
    
    .daily-section:last-child {
        border-bottom: none;
    }
}

/* Section header with daily button */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.section-header h2 {
    margin: 0;
}

/* Daily button */
.daily-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.daily-button:hover {
    background-color: var(--primary-color);
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.daily-button svg {
    width: 20px;
    height: 20px;
}

/* Daily overlay */
.daily-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: none;
    animation: fadeIn 0.2s ease;
}

.daily-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.daily-overlay-content {
    width: 95%;
    max-width: 1800px;
    height: 90vh;
    background-color: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    animation: slideIn 0.3s ease;
    position: relative;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
}

@keyframes slideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Close button */
.daily-close-btn {
    position: fixed;
    top: calc(5vh + 1rem);
    right: calc(2.5% + 1rem);
    width: 40px;
    height: 40px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1010;
}

.daily-close-btn:hover {
    background-color: var(--bg-tertiary);
    transform: scale(1.1);
}

.daily-close-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-secondary);
}

.daily-close-btn:hover svg {
    stroke: var(--text-primary);
}

.status-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0.625rem;
    border-radius: 6px;
    border: 1px solid;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

.status-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.status-item .status-label {
    font-size: 0.875rem;
    font-weight: 500;
}

.status-item .status-counts {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.status-item .status-count {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Urbanist', sans-serif;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.timeline-bar {
    position: relative;
    height: 32px;
    background-color: var(--bg-tertiary);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.timeline-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--secondary-coral), var(--secondary-pink));
    border-radius: 16px;
    transition: width 0.5s ease;
}

.timeline-labels {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    pointer-events: none;
    z-index: 1;
    gap: 0.5rem;
}

.timeline-labels span {
    background-color: var(--bg-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-light);
    white-space: nowrap;
    font-size: 0.7rem;
    flex-shrink: 0;
}

[data-theme="dark"] .timeline-labels span {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    background-color: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    padding: 3rem;
}

.coming-soon svg {
    margin-bottom: 2rem;
    opacity: 0.2;
    color: var(--secondary-pink);
}

.coming-soon h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
}

.coming-soon p {
    max-width: 400px;
}

/* Team Section Styles */
.team-section {
    margin-top: 1.5rem;
    width: 100%;
    overflow: hidden;
}

.team-section h3 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    font-family: 'Urbanist', sans-serif;
    font-weight: 600;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.team-member-card {
    background-color: var(--bg-primary);
    padding: 1.25rem;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

/* High workload warning border */
.team-member-card:has(.workload-indicator.high) {
    border-color: var(--secondary-pink);
    background: linear-gradient(135deg, var(--bg-primary), rgba(213, 56, 121, 0.05));
}

.team-member-card:has(.workload-indicator.medium) {
    border-color: var(--secondary-coral);
}

.team-member-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.member-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.member-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary-pink), var(--secondary-coral));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1.25rem;
    font-family: 'Urbanist', sans-serif;
}

.member-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.member-info h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
    font-family: 'Urbanist', sans-serif;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    min-height: 2.4rem; /* Forces 2 lines of space */
}

.member-avatar-link {
    text-decoration: none;
    display: block;
    transition: transform 0.2s ease;
}

.member-avatar-link:hover {
    transform: scale(1.05);
}

.member-name-link {
    text-decoration: none;
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.member-name-link:hover {
    color: var(--primary-color);
}

.member-info .email,
.member-info .issues-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Workload Indicator */
.workload-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    white-space: nowrap;
}

.workload-badge {
    font-size: 0.7rem;
    padding: 0.125rem 0.375rem;
    border-radius: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.workload-indicator.low .workload-badge {
    background-color: rgba(123, 201, 162, 0.2);
    color: var(--secondary-teal);
}

.workload-indicator.medium .workload-badge {
    background-color: rgba(255, 145, 126, 0.2);
    color: var(--secondary-coral);
}

.workload-indicator.high .workload-badge {
    background-color: rgba(213, 56, 121, 0.2);
    color: var(--secondary-pink);
}

.workload-indicator.unassigned {
    justify-content: center;
}

.workload-indicator.unassigned .workload-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.workload-points {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.workload-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

.workload-stat {
    background-color: var(--bg-secondary);
    padding: 0.75rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border-light);
    position: relative;
}

.workload-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.workload-stat .stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.stat-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: var(--primary-color);
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
    line-height: 1;
}

.workload-stat.completed .stat-badge {
    background-color: var(--secondary-teal);
}

.workload-stat.in-progress .stat-badge {
    background-color: var(--primary-color);
}

.workload-stat.todo .stat-badge {
    background-color: var(--text-secondary);
}

.workload-stat.completed {
    background-color: rgba(123, 201, 162, 0.1);
    border-color: var(--secondary-teal);
}

.workload-stat.completed .stat-value {
    color: var(--secondary-teal);
}

.workload-stat.in-progress {
    background-color: rgba(29, 63, 190, 0.1);
    border-color: var(--primary-color);
}

.workload-stat.in-progress .stat-value {
    color: var(--primary-color);
}

.workload-stat.todo {
    background-color: var(--bg-tertiary);
}

.workload-stat.unassigned {
    background-color: rgba(255, 145, 126, 0.1);
    border-color: var(--secondary-coral);
    grid-column: 1 / -1;
}

.workload-stat.unassigned .stat-value {
    color: var(--secondary-coral);
}

.member-progress {
    margin-top: 1rem;
}

.progress-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.member-progress-bar {
    height: 6px;
    background-color: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.member-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary-teal), var(--primary-color));
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Priority Section Styles */
.priority-section {
    margin-top: 1.5rem;
}

.priority-section h3 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    font-family: 'Urbanist', sans-serif;
    font-weight: 600;
}

.priority-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.priority-card {
    background-color: var(--bg-primary);
    padding: 1rem;
    border-radius: 8px;
    border: 2px solid var(--border-light);
    text-align: center;
    transition: all 0.3s ease;
}

.priority-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.priority-card h4 {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Urbanist', sans-serif;
    font-weight: 600;
}

.priority-count {
    font-size: 2rem;
    font-weight: 700;
    font-family: 'Urbanist', sans-serif;
}

.priority-card.urgent {
    border-color: var(--secondary-coral);
    background-color: rgba(255, 145, 126, 0.1);
}

.priority-card.urgent .priority-count {
    color: var(--secondary-coral);
}

.priority-card.high {
    border-color: var(--secondary-pink);
    background-color: rgba(213, 56, 121, 0.1);
}

.priority-card.high .priority-count {
    color: var(--secondary-pink);
}

.priority-card.medium {
    border-color: var(--primary-color);
    background-color: rgba(29, 63, 190, 0.1);
}

.priority-card.medium .priority-count {
    color: var(--primary-color);
}

.priority-card.low {
    border-color: var(--text-light);
    background-color: var(--bg-tertiary);
}

.priority-card.low .priority-count {
    color: var(--text-secondary);
}

/* Unassigned Badge */
.unassigned-badge {
    background-color: rgba(255, 145, 126, 0.1);
    color: var(--secondary-coral);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-top: 1rem;
    display: inline-block;
    border: 1px solid var(--secondary-coral);
    font-weight: 500;
}

/* Uptime Monitoring Styles */
.uptime-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.uptime-stat-card {
    background-color: var(--bg-primary);
    padding: 1.25rem;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.uptime-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.uptime-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.uptime-stat-content h4 {
    font-size: 0.813rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.uptime-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Urbanist', sans-serif;
}

.monitors-section {
    margin-top: 1.5rem;
}

.monitors-section h3 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    font-family: 'Urbanist', sans-serif;
    font-weight: 600;
}

.monitors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    max-width: 100%;
}

.monitor-card {
    background-color: var(--bg-primary);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.monitor-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}


.monitor-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1.25rem;
    gap: 1rem;
}

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

.monitor-info h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-family: 'Urbanist', sans-serif;
    color: var(--text-primary);
}

.monitor-url {
    font-size: 0.813rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    text-decoration: none;
    transition: color 0.2s ease;
}

.monitor-url:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.monitor-url:active {
    color: var(--secondary-pink);
}

.external-link-icon {
    display: inline-block;
    margin-left: 0.25rem;
    vertical-align: middle;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.monitor-url:hover .external-link-icon {
    opacity: 1;
}

.monitor-status {
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.monitor-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

.monitor-status.up {
    background-color: rgba(123, 201, 162, 0.1);
    color: var(--secondary-teal);
    border: 1px solid rgba(123, 201, 162, 0.2);
}

.monitor-status.down {
    background-color: rgba(213, 56, 121, 0.1);
    color: var(--secondary-pink);
    border: 1px solid rgba(213, 56, 121, 0.2);
}

.monitor-status.paused {
    background-color: rgba(255, 145, 126, 0.1);
    color: var(--secondary-coral);
    border: 1px solid rgba(255, 145, 126, 0.2);
}

.monitor-uptime {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-top: 1.25rem;
    background-color: var(--bg-secondary);
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .monitor-uptime {
    background-color: var(--bg-tertiary);
}

.uptime-period {
    text-align: center;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.uptime-period:hover {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .uptime-period:hover {
    background-color: var(--bg-secondary);
}

.uptime-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.uptime-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Urbanist', sans-serif;
    position: relative;
}

.uptime-value::after {
    content: '%';
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 0.125rem;
}

.monitor-response-time {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-light);
}

.response-metric {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.response-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.response-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'Urbanist', sans-serif;
}

.response-value.response-time::after {
    content: 'ms';
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 0.25rem;
}


/* Loading Spinner */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Loading spinner in metric values */
.metric-value .loading-spinner {
    vertical-align: middle;
    margin: 0 auto;
}

.loading-spinner.large {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

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

/* Uptime Graph Styles */
.uptime-graph-container {
    margin: 1rem 0;
    padding: 0.75rem;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .uptime-graph-container {
    background-color: var(--bg-tertiary);
}

.uptime-graph-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.uptime-graph-title {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.uptime-percentage {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.uptime-percentage-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--secondary-teal);
}

.uptime-graph {
    height: 32px;
    background-color: var(--bg-primary);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .uptime-graph {
    background-color: var(--bg-secondary);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.uptime-graph-bars {
    display: flex;
    height: 100%;
    gap: 2px;
    padding: 3px;
}

.uptime-bar {
    flex: 1;
    background-color: var(--secondary-teal);
    border-radius: 3px;
    transition: all 0.2s ease;
    position: relative;
    min-width: 2px;
}

.uptime-bar.down {
    background-color: var(--secondary-pink);
    animation: pulse 2s ease-in-out infinite;
}

.uptime-bar.paused {
    background-color: var(--secondary-coral);
}

.uptime-bar:hover {
    transform: scaleY(1.2);
    opacity: 0.9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

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

.uptime-graph-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.625rem;
    color: var(--text-light);
}

.uptime-graph-legend {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
}

.uptime-legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.uptime-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.uptime-legend-dot.up {
    background-color: var(--secondary-teal);
}

.uptime-legend-dot.down {
    background-color: var(--secondary-pink);
}

/* Compact Monitor Card */
.monitor-card.compact {
    padding: 1.25rem;
}

.monitor-card.compact .monitor-header {
    margin-bottom: 1rem;
}

.monitor-status-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.monitor-duration {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.monitor-card.compact .monitor-info h4 {
    font-size: 1.125rem;
    font-weight: 600;
}

.monitor-card.compact .monitor-url {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    max-width: 100%;
}

.monitor-card.compact .monitor-uptime {
    padding: 1rem;
    gap: 0.5rem;
    background-color: var(--bg-secondary);
    margin-top: 1rem;
}

[data-theme="dark"] .monitor-card.compact .monitor-uptime {
    background-color: var(--bg-tertiary);
}

.monitor-card.compact .uptime-period {
    padding: 0.5rem;
}

.monitor-card.compact .uptime-period:hover {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .monitor-card.compact .uptime-period:hover {
    background-color: var(--bg-secondary);
}

.monitor-card.compact .uptime-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    font-weight: 600;
}

.monitor-card.compact .uptime-value {
    font-size: 1.125rem;
    font-weight: 700;
}

.monitor-card.compact .monitor-response-time {
    margin-top: 1rem;
    padding-top: 1rem;
    gap: 0.75rem;
}


/* Response Time Graph */
.response-time-graph-container {
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .response-time-graph-container {
    background-color: var(--bg-tertiary);
}

.response-time-graph-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.response-time-graph-title {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.response-time-current {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.response-time-current-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
}

.response-time-graph {
    height: 60px;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-primary);
    border-radius: 6px;
    padding: 8px;
}

[data-theme="dark"] .response-time-graph {
    background-color: var(--bg-secondary);
}

.response-time-graph svg {
    width: 100%;
    height: 100%;
}

.response-time-graph-line {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.response-time-graph-area {
    fill: var(--primary-color);
    opacity: 0.1;
}

.response-time-graph-dots {
    fill: var(--primary-color);
}

.response-time-graph-grid {
    stroke: var(--border-light);
    stroke-width: 0.5;
    stroke-dasharray: 2 2;
}

.response-time-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.625rem;
    color: var(--text-light);
}

.response-time-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

.response-time-stat-value {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/* Wins card in metrics grid */
.metric-card.wins-card h3 {
    margin-bottom: 1rem;
}

.wins-container.compact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
    width: 100%;
}

.wins-container.compact .win-card {
    background-color: var(--bg-secondary);
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: transform 0.3s ease;
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wins-container.compact .win-card:hover {
    transform: translateX(4px);
    background-color: var(--bg-tertiary);
}

/* MVP Card with Confetti */
.wins-container.compact .win-card.mvp-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(123, 201, 162, 0.1), rgba(213, 56, 121, 0.1));
    border-color: var(--secondary-teal);
}

.confetti-container {
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 100%;
    height: 120%;
    pointer-events: none;
    transform: translateX(-50%);
    overflow: visible;
}

/* Individual confetti pieces */
.confetti-piece {
    position: absolute;
    width: 10px;
    height: 14px;
    bottom: 0;
    left: 50%;
    border-radius: 2px;
    transform-origin: center;
}

.confetti-piece:nth-child(1) {
    background: linear-gradient(45deg, var(--secondary-coral) 0%, #ff9b9b 50%, var(--secondary-coral) 100%);
    animation: confetti-1 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.confetti-piece:nth-child(2) {
    background: linear-gradient(45deg, var(--secondary-pink) 0%, #ffb3d9 50%, var(--secondary-pink) 100%);
    animation: confetti-2 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.1s;
}

.confetti-piece:nth-child(3) {
    background: linear-gradient(45deg, var(--secondary-teal) 0%, #66d9d9 50%, var(--secondary-teal) 100%);
    animation: confetti-3 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.2s;
}

.confetti-piece:nth-child(4) {
    background: linear-gradient(45deg, var(--primary-color) 0%, #8bdba8 50%, var(--primary-color) 100%);
    animation: confetti-4 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.3s;
}

.confetti-piece:nth-child(5) {
    background: linear-gradient(45deg, #FFD700 0%, #ffeb66 50%, #FFD700 100%);
    animation: confetti-5 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.4s;
}

.confetti-piece:nth-child(6) {
    background: linear-gradient(45deg, #FF6B6B 0%, #ff9999 50%, #FF6B6B 100%);
    animation: confetti-6 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.5s;
}

/* Additional confetti pieces 7-20 */
.confetti-piece:nth-child(7) {
    background: linear-gradient(45deg, #9b59b6 0%, #c39bd3 50%, #9b59b6 100%);
    animation: confetti-1 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.05s;
}

.confetti-piece:nth-child(8) {
    background: linear-gradient(45deg, #3498db 0%, #85c1e9 50%, #3498db 100%);
    animation: confetti-2 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.15s;
}

.confetti-piece:nth-child(9) {
    background: linear-gradient(45deg, #e74c3c 0%, #f1948a 50%, #e74c3c 100%);
    animation: confetti-3 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.25s;
}

.confetti-piece:nth-child(10) {
    background: linear-gradient(45deg, #f39c12 0%, #f8c471 50%, #f39c12 100%);
    animation: confetti-4 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.35s;
}

.confetti-piece:nth-child(11) {
    background: linear-gradient(45deg, #27ae60 0%, #82e0aa 50%, #27ae60 100%);
    animation: confetti-5 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.45s;
}

.confetti-piece:nth-child(12) {
    background: linear-gradient(45deg, #e67e22 0%, #f0b27a 50%, #e67e22 100%);
    animation: confetti-6 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.55s;
}

.confetti-piece:nth-child(13) {
    background: linear-gradient(45deg, var(--secondary-coral) 0%, #ff9b9b 50%, var(--secondary-coral) 100%);
    animation: confetti-3 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.08s;
}

.confetti-piece:nth-child(14) {
    background: linear-gradient(45deg, var(--secondary-pink) 0%, #ffb3d9 50%, var(--secondary-pink) 100%);
    animation: confetti-4 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.18s;
}

.confetti-piece:nth-child(15) {
    background: linear-gradient(45deg, var(--secondary-teal) 0%, #66d9d9 50%, var(--secondary-teal) 100%);
    animation: confetti-5 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.28s;
}

.confetti-piece:nth-child(16) {
    background: linear-gradient(45deg, var(--primary-color) 0%, #8bdba8 50%, var(--primary-color) 100%);
    animation: confetti-6 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.38s;
}

.confetti-piece:nth-child(17) {
    background: linear-gradient(45deg, #FFD700 0%, #ffeb66 50%, #FFD700 100%);
    animation: confetti-1 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.48s;
}

.confetti-piece:nth-child(18) {
    background: linear-gradient(45deg, #FF6B6B 0%, #ff9999 50%, #FF6B6B 100%);
    animation: confetti-2 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.58s;
}

.confetti-piece:nth-child(19) {
    background: linear-gradient(45deg, #9b59b6 0%, #c39bd3 50%, #9b59b6 100%);
    animation: confetti-3 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.12s;
}

.confetti-piece:nth-child(20) {
    background: linear-gradient(45deg, #3498db 0%, #85c1e9 50%, #3498db 100%);
    animation: confetti-4 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.22s;
}

/* Additional confetti using pseudo elements */
.confetti-piece::before,
.confetti-piece::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
}

.confetti-piece::before {
    transform: rotateY(180deg);
    backface-visibility: visible;
    filter: brightness(0.8);
}

.confetti-piece::after {
    display: none;
}

/* Realistic confetti physics animations */
@keyframes confetti-1 {
    0% {
        transform: translate(0, 0) scale(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        opacity: 0;
    }
    5% {
        transform: translate(0, 0) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        opacity: 1;
    }
    15% {
        transform: translate(25px, -80px) scale(1) rotateX(180deg) rotateY(90deg) rotateZ(45deg);
        opacity: 1;
    }
    25% {
        transform: translate(45px, -120px) scale(1) rotateX(360deg) rotateY(180deg) rotateZ(90deg);
        opacity: 1;
    }
    40% {
        transform: translate(65px, -60px) scale(1) rotateX(540deg) rotateY(270deg) rotateZ(180deg);
        opacity: 1;
    }
    60% {
        transform: translate(80px, 20px) scale(1) rotateX(720deg) rotateY(360deg) rotateZ(270deg);
        opacity: 1;
    }
    80% {
        transform: translate(90px, 100px) scale(1) rotateX(900deg) rotateY(450deg) rotateZ(360deg);
        opacity: 0.9;
    }
    100% {
        transform: translate(95px, 180px) scale(1) rotateX(1080deg) rotateY(540deg) rotateZ(450deg);
        opacity: 0;
    }
}

@keyframes confetti-2 {
    0% {
        transform: translate(0, 0) scale(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        opacity: 0;
    }
    5% {
        transform: translate(0, 0) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        opacity: 1;
    }
    15% {
        transform: translate(-30px, -90px) scale(1) rotateX(-120deg) rotateY(60deg) rotateZ(-30deg);
        opacity: 1;
    }
    25% {
        transform: translate(-55px, -140px) scale(1) rotateX(-240deg) rotateY(120deg) rotateZ(-60deg);
        opacity: 1;
    }
    40% {
        transform: translate(-75px, -80px) scale(1) rotateX(-360deg) rotateY(180deg) rotateZ(-120deg);
        opacity: 1;
    }
    60% {
        transform: translate(-85px, 0px) scale(1) rotateX(-480deg) rotateY(240deg) rotateZ(-180deg);
        opacity: 1;
    }
    80% {
        transform: translate(-90px, 80px) scale(1) rotateX(-600deg) rotateY(300deg) rotateZ(-240deg);
        opacity: 0.9;
    }
    100% {
        transform: translate(-92px, 160px) scale(1) rotateX(-720deg) rotateY(360deg) rotateZ(-300deg);
        opacity: 0;
    }
}

@keyframes confetti-3 {
    0% {
        transform: translate(0, 0) scale(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        opacity: 0;
    }
    5% {
        transform: translate(0, 0) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        opacity: 1;
    }
    15% {
        transform: translate(15px, -100px) scale(1) rotateX(90deg) rotateY(-45deg) rotateZ(60deg);
        opacity: 1;
    }
    25% {
        transform: translate(30px, -150px) scale(1) rotateX(180deg) rotateY(-90deg) rotateZ(120deg);
        opacity: 1;
    }
    40% {
        transform: translate(40px, -90px) scale(1) rotateX(270deg) rotateY(-135deg) rotateZ(180deg);
        opacity: 1;
    }
    60% {
        transform: translate(45px, -10px) scale(1) rotateX(360deg) rotateY(-180deg) rotateZ(240deg);
        opacity: 1;
    }
    80% {
        transform: translate(48px, 70px) scale(1) rotateX(450deg) rotateY(-225deg) rotateZ(300deg);
        opacity: 0.9;
    }
    100% {
        transform: translate(50px, 150px) scale(1) rotateX(540deg) rotateY(-270deg) rotateZ(360deg);
        opacity: 0;
    }
}

@keyframes confetti-4 {
    0% {
        transform: translate(0, 0) scale(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        opacity: 0;
    }
    5% {
        transform: translate(0, 0) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        opacity: 1;
    }
    15% {
        transform: translate(-20px, -85px) scale(1) rotateX(-60deg) rotateY(120deg) rotateZ(-45deg);
        opacity: 1;
    }
    25% {
        transform: translate(-35px, -125px) scale(1) rotateX(-120deg) rotateY(240deg) rotateZ(-90deg);
        opacity: 1;
    }
    40% {
        transform: translate(-45px, -65px) scale(1) rotateX(-180deg) rotateY(360deg) rotateZ(-135deg);
        opacity: 1;
    }
    60% {
        transform: translate(-50px, 15px) scale(1) rotateX(-240deg) rotateY(480deg) rotateZ(-180deg);
        opacity: 1;
    }
    80% {
        transform: translate(-52px, 95px) scale(1) rotateX(-300deg) rotateY(600deg) rotateZ(-225deg);
        opacity: 0.9;
    }
    100% {
        transform: translate(-53px, 175px) scale(1) rotateX(-360deg) rotateY(720deg) rotateZ(-270deg);
        opacity: 0;
    }
}

@keyframes confetti-5 {
    0% {
        transform: translate(0, 0) scale(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        opacity: 0;
    }
    5% {
        transform: translate(0, 0) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        opacity: 1;
    }
    15% {
        transform: translate(5px, -110px) scale(1) rotateX(45deg) rotateY(90deg) rotateZ(30deg);
        opacity: 1;
    }
    25% {
        transform: translate(10px, -160px) scale(1) rotateX(90deg) rotateY(180deg) rotateZ(60deg);
        opacity: 1;
    }
    40% {
        transform: translate(12px, -100px) scale(1) rotateX(135deg) rotateY(270deg) rotateZ(90deg);
        opacity: 1;
    }
    60% {
        transform: translate(13px, -20px) scale(1) rotateX(180deg) rotateY(360deg) rotateZ(120deg);
        opacity: 1;
    }
    80% {
        transform: translate(14px, 60px) scale(1) rotateX(225deg) rotateY(450deg) rotateZ(150deg);
        opacity: 0.9;
    }
    100% {
        transform: translate(15px, 140px) scale(1) rotateX(270deg) rotateY(540deg) rotateZ(180deg);
        opacity: 0;
    }
}

@keyframes confetti-6 {
    0% {
        transform: translate(0, 0) scale(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        opacity: 0;
    }
    5% {
        transform: translate(0, 0) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        opacity: 1;
    }
    15% {
        transform: translate(35px, -95px) scale(1) rotateX(135deg) rotateY(-60deg) rotateZ(75deg);
        opacity: 1;
    }
    25% {
        transform: translate(60px, -145px) scale(1) rotateX(270deg) rotateY(-120deg) rotateZ(150deg);
        opacity: 1;
    }
    40% {
        transform: translate(75px, -85px) scale(1) rotateX(405deg) rotateY(-180deg) rotateZ(225deg);
        opacity: 1;
    }
    60% {
        transform: translate(82px, -5px) scale(1) rotateX(540deg) rotateY(-240deg) rotateZ(300deg);
        opacity: 1;
    }
    80% {
        transform: translate(85px, 75px) scale(1) rotateX(675deg) rotateY(-300deg) rotateZ(375deg);
        opacity: 0.9;
    }
    100% {
        transform: translate(87px, 155px) scale(1) rotateX(810deg) rotateY(-360deg) rotateZ(450deg);
        opacity: 0;
    }
}

/* Completed Tasks Mini List in Win Card */
.completed-task-mini {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tasks win card with fade effect */
.win-card .win-title:contains("Completed Tasks") ~ .win-description {
    opacity: 0.9;
}

/* Fade in animation for completed tasks */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Support Section Styles */
.support-content {
    margin-top: 1.5rem;
}

.support-content h3 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    font-family: 'Urbanist', sans-serif;
    font-weight: 600;
}

.recent-issues.full-width {
    width: 100%;
}

/* Status card styles */
.status-card .status-breakdown {
    padding: 0.5rem 0;
}

/* Pie chart container */
.status-pie-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem;
}

.status-pie {
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        var(--primary-color) 0deg,
        var(--primary-color) 90deg,
        var(--secondary-color) 90deg,
        var(--secondary-color) 180deg,
        var(--border-color) 180deg
    );
}

.status-legend {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-color {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.legend-label {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.legend-count {
    font-weight: 600;
    color: var(--text-primary);
    margin-left: auto;
    font-size: 0.75rem;
}

.issues-by-status,
.recent-issues {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

/* Support section issues list */
#recent-issues-list.issues-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-content: start;
    padding-right: 0.5rem; /* Add some padding for scrollbar */
}

@media (max-width: 1400px) {
    #recent-issues-list.issues-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    #recent-issues-list.issues-list {
        grid-template-columns: 1fr;
    }
}

/* Customer grouping styles */
.customer-group {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.customer-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.company-logo-large {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: var(--bg-secondary);
    padding: 4px;
    border: 1px solid var(--border-light);
}

.customer-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    flex: 1;
}

.customer-count {
    font-size: 0.875rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
}

.customer-issues {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Issue controls and search */
.issues-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* Issue filters */
.issue-filters {
    display: flex;
    gap: 0.5rem;
}

.issue-search {
    flex: 1;
    max-width: 300px;
}

.search-input {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.search-input::placeholder {
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .issues-controls {
        flex-direction: column;
    }
    
    .issue-search {
        max-width: 100%;
    }
}

.filter-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.filter-btn.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.issues-by-status h3,
.recent-issues h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.status-breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.status-item {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-name {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.status-count {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 600;
}

.status-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.status-bar-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.status-bar-fill.status-open {
    background: #f39c12;
}

.status-bar-fill.status-closed,
.status-bar-fill.status-resolved {
    background: #27ae60;
}

.status-bar-fill.status-in_progress {
    background: #3498db;
}

.status-bar-fill.status-waiting {
    background: #9b59b6;
}


.issue-item-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.issue-item {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 10px;
    border: 1px solid var(--border-light);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.customer-issues .issue-item {
    background: var(--bg-tertiary);
}

.issue-item:hover {
    background: var(--bg-tertiary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.issue-link-icon {
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
    margin-left: auto;
}

.issue-item:hover .issue-link-icon {
    opacity: 0.7;
}

.issue-header {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.issue-status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
}

.issue-status.status-NEW {
    background: rgba(74, 222, 128, 0.15);
    color: #16a34a;
}

.issue-status.status-PROCESSED {
    background: rgba(156, 163, 175, 0.15);
    color: #6b7280;
}

.issue-status.status-COMPLETED {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}

.issue-status.status-SNOOZED {
    background: rgba(251, 191, 36, 0.15);
    color: #d97706;
}

.issue-status.status-UNSNOOZED {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.issue-priority {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.issue-priority.priority-urgent {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}

.issue-priority.priority-high {
    background: rgba(243, 156, 18, 0.1);
    color: #f39c12;
}

.issue-priority.priority-normal {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
}

.issue-priority.priority-low {
    background: rgba(155, 89, 182, 0.1);
    color: #9b59b6;
}

.issue-title {
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.4;
    word-wrap: break-word;
    flex: 1;
}

.issue-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: auto;
}

.issue-customer,
.issue-assignee,
.issue-time {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.company-logo {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-right: 8px;
    object-fit: contain;
    background: var(--bg-primary);
    padding: 3px;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    border: 1px solid var(--border-light);
}


/* Pulse effect on MVP card every 30 seconds */
@keyframes mvp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(123, 201, 162, 0);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(123, 201, 162, 0.3);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(123, 201, 162, 0);
    }
}

.win-card.mvp-card {
    animation: fadeIn 0.5s ease-out forwards, mvp-pulse 30s ease-out infinite;
}

.wins-container.compact .win-icon {
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wins-container.compact .win-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--secondary-teal);
}

.wins-container.compact .win-avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary-pink), var(--secondary-coral));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: 'Urbanist', sans-serif;
}

.wins-container.compact .win-content {
    flex: 1;
    min-width: 0;
}

.wins-container.compact .win-title {
    font-weight: 600;
    font-size: 0.813rem;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
}

.wins-container.compact .win-description {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wins-container.compact .win-metric {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-pink);
    flex-shrink: 0;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    body {
        width: 100vw;
        max-width: 100vw;
    }
    
    .dashboard-container {
        max-width: 100vw;
    }
    
    .dashboard-content {
        padding: 1rem;
        max-width: 100vw;
    }
    
    .dashboard-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.5rem 1rem;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    
    /* Hide scrollbar for Chrome, Safari and Opera */
    .dashboard-nav::-webkit-scrollbar {
        display: none;
    }
    
    .nav-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .priority-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .uptime-overview {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .monitors-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    /* Prevent metric cards from overflowing */
    .metric-card {
        max-width: 100%;
        overflow: hidden;
    }
    
    .metric-value {
        font-size: 1.75rem;
        word-break: break-word;
    }
    
    /* Adjust team member cards */
    .team-member-card {
        max-width: 100%;
    }
    
    .member-info h4 {
        font-size: 0.875rem;
    }
    
    /* Adjust monitor cards */
    .monitor-card {
        max-width: 100%;
    }
    
    .monitor-url {
        max-width: 100%;
    }
    
    /* Adjust header on mobile */
    .dashboard-header {
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }
    
    .dashboard-title {
        font-size: 1.1rem;
    }
    
    .company-logo {
        height: 28px;
    }
    
    .header-time {
        display: none;
    }
    
    .header-date,
    .header-time-display {
        display: none;
    }
    
    /* Adjust timeline labels */
    .timeline-labels span {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }
    
    /* Ensure no horizontal overflow on workload stats */
    .workload-stats {
        gap: 0.5rem;
    }
    
    .workload-stat {
        padding: 0.5rem;
    }
    
    /* Adjust priority grid on small screens */
    .priority-grid-compact {
        gap: 0.375rem;
    }
    
    .priority-item {
        padding: 0.375rem 0.5rem;
    }
    
    .priority-item .priority-label {
        font-size: 0.75rem;
    }
    
    .priority-item .priority-count {
        font-size: 1rem;
    }
}

/* Notification System */
.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 400px;
}

.notification {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 300px;
    animation: slideInRight 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.notification.info::before {
    background-color: var(--primary-color);
}

.notification.success::before {
    background-color: var(--secondary-teal);
}

.notification.warning::before {
    background-color: var(--secondary-coral);
}

.notification.error::before {
    background-color: var(--secondary-pink);
}

.notification-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification.info .notification-icon {
    color: var(--primary-color);
}

.notification.success .notification-icon {
    color: var(--secondary-teal);
}

.notification.warning .notification-icon {
    color: var(--secondary-coral);
}

.notification.error .notification-icon {
    color: var(--secondary-pink);
}

.notification-content {
    flex: 1;
}

.notification-title {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.notification-message {
    font-size: 0.813rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.notification-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.notification-close:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.notification.hiding {
    animation: slideOutRight 0.3s ease-out forwards;
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Mobile adjustments for notifications */
@media (max-width: 768px) {
    .notification-container {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .notification {
        min-width: unset;
        width: 100%;
    }
    
    /* Uptime graph mobile adjustments */
    .uptime-graph-container {
        padding: 0.5rem;
    }
    
    .uptime-graph {
        height: 28px;
    }
    
    .uptime-graph-bars {
        gap: 1px;
        padding: 2px;
    }
    
    .uptime-percentage-value {
        font-size: 1rem;
    }
    
    .uptime-graph-legend {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .uptime-legend-item {
        font-size: 0.7rem;
    }
}

/* Label Cloud Styles */
.label-cloud-card {
    display: flex;
    flex-direction: column;
    height: 280px;
    overflow: hidden;
}

.label-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    align-items: center;
    justify-content: center;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.label-cloud::-webkit-scrollbar {
    display: none;
}

.label-tag {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: default;
    border: 2px solid;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: visible; /* Changed from hidden to visible for badge */
    padding: 0.3rem;
    box-sizing: border-box;
}

.label-tag-link {
    text-decoration: none;
    display: inline-block;
}

.label-tag:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    z-index: 20;
    cursor: pointer;
}

.label-tag .label-name {
    line-height: 1.1;
    white-space: nowrap;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
}

.label-count {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.5rem;
    font-weight: 700;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding: 0.125rem 0.3rem;
    border-radius: 10px;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    min-width: 18px;
    min-height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 100;
}

[data-theme="dark"] .label-count {
    background-color: var(--bg-secondary);
    border-color: var(--bg-secondary);
}

/* Responsive adjustments for label cloud */
@media (max-width: 768px) {
    .label-cloud {
        gap: 0.5rem;
        padding: 0.75rem 0;
    }
    
    .label-cloud-card {
        grid-column: 1 / -1;
    }
    
    .label-count {
        font-size: 0.5rem;
        padding: 0.2rem 0.4rem;
        min-width: 20px;
    }
}

/* Maintenance Cards Styles */
.stale-issues-card,
.in-review-card,
.no-estimate-card {
    background: var(--bg-primary);
    height: 280px;
    display: flex;
    flex-direction: column;
}

/* Specific adjustments for stale issues - multi-column grid */
.stale-issues-card .issues-list {
    padding: 0.625rem 0.5rem 0.5rem 0.5rem; /* Added 0.125rem top padding to align with review list */
    gap: 0.4rem;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    height: calc(100% - 3rem); /* Account for card header */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.stale-issues-card .issues-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Center no-issues message in stale issues grid */
.stale-issues-card .no-issues {
    min-height: 100%;
    grid-column: 1 / -1; /* Span full width in grid */
}

.card-header-with-badge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.card-header-with-badge h3 {
    margin: 0;
}

.issue-count-badge {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    min-width: 32px;
    text-align: center;
}

.stale-issues-card .issue-count-badge {
    background-color: rgba(255, 145, 126, 0.1);
    color: var(--secondary-coral);
}


.no-estimate-card .issue-count-badge {
    background-color: rgba(113, 102, 193, 0.1);
    color: var(--primary-color);
}

.tasks-card .issue-count-badge {
    background-color: rgba(123, 201, 162, 0.1);
    color: var(--secondary-teal);
}

/* Review card specific styles */
.in-review-card > h3 {
    margin-bottom: 0.625rem; /* Further reduced to move content up */
}

.review-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    height: calc(100% - 2rem);
    margin-top: -0.25rem; /* Increased negative margin to move columns up more */
}

.review-column {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.review-column h4 {
    font-size: 0.8125rem; /* Slightly bigger font */
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 1.5rem; /* Changed to min-height to accommodate badge */
}

.review-count {
    background-color: rgba(147, 51, 234, 0.1);
    color: #9333ea;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.review-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.125rem 0 0.5rem 0; /* Add top padding to prevent border clipping */
}

.review-list::-webkit-scrollbar {
    display: none;
}

/* Override maintenance-issue-item styles for review columns */
.review-list .maintenance-issue-item.compact {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    min-height: auto;
}

.review-list .issue-title {
    font-size: 0.75rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
}

.review-list .issue-assignee-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Ensure issue-id-badge styling applies in testing columns */
.review-list .issue-id-badge {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1.2;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .review-list .issue-id-badge {
    background-color: var(--bg-secondary);
}

.review-list .maintenance-issue-link:hover .issue-id-badge {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}


/* Maintenance cards default issues list */
.no-estimate-card .issues-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
}

.no-estimate-card .issues-list::-webkit-scrollbar {
    display: none;
}

.maintenance-issue-item {
    background-color: var(--bg-secondary);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.maintenance-issue-item.compact {
    padding: 0.3rem 0.5rem;
}

/* Specific sizing for stale issues grid layout */
.stale-issues-card .maintenance-issue-item.compact {
    padding: 0.375rem 0.625rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    flex-shrink: 0;
}

[data-theme="dark"] .maintenance-issue-item {
    background-color: var(--bg-tertiary);
}

.maintenance-issue-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.issue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.maintenance-issue-item.compact .issue-header {
    margin-bottom: 0.1rem;
}

.issue-id {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.days-stale {
    font-size: 0.7rem;
    color: var(--secondary-coral);
    font-weight: 500;
}

.issue-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.maintenance-issue-item.compact .issue-title {
    font-size: 0.7rem;
    margin-bottom: 0.1rem;
    line-height: 1.2;
}

/* Issue right content for days and avatar */
.issue-right-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* Stale issues ID badge */
.stale-issues-card .issue-id-badge {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1.2;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .stale-issues-card .issue-id-badge {
    background-color: var(--bg-secondary);
}

/* Stale issues specific title styling */
.stale-issues-card .maintenance-issue-item.compact .issue-title {
    font-size: 0.75rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0; /* Allow text to shrink */
}

/* Maintenance issue link styling */
.maintenance-issue-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.maintenance-issue-link:hover .maintenance-issue-item {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background-color: var(--bg-tertiary);
}

.maintenance-issue-link:hover .issue-id-badge {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Stale issues specific meta */
.stale-issues-card .maintenance-issue-item.compact .issue-meta {
    font-size: 0.625rem;
    gap: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stale-issues-card .days-stale {
    font-size: 0.7rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    font-weight: 500;
}

.issue-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.7rem;
}

/* Profile picture in issue meta */
.issue-assignee-wrapper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.issue-assignee-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--bg-tertiary);
    flex-shrink: 0;
}

/* Smaller avatar for stale issues */
.stale-issues-card .issue-assignee-avatar {
    width: 18px;
    height: 18px;
}

/* Compact assignee wrapper for stale issues */
.stale-issues-card .issue-assignee-wrapper {
    gap: 0.25rem;
}

.issue-assignee-avatar.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.stale-issues-card .issue-assignee-avatar.placeholder {
    font-size: 0.55rem;
}

.maintenance-issue-item.compact .issue-meta {
    font-size: 0.65rem;
}

.issue-assignee,
.issue-state {
    color: var(--text-secondary);
}

.issue-priority {
    padding: 0.1rem 0.375rem;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.6rem;
}

.issue-priority.urgent {
    background-color: rgba(255, 145, 126, 0.1);
    color: var(--secondary-coral);
}

.issue-priority.high {
    background-color: rgba(213, 56, 121, 0.1);
    color: var(--secondary-pink);
}

.issue-priority.medium {
    background-color: rgba(113, 102, 193, 0.1);
    color: var(--primary-color);
}

.issue-priority.low {
    background-color: rgba(171, 174, 178, 0.1);
    color: var(--text-secondary);
}

.no-issues {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem 1rem;
    font-size: 0.875rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    grid-column: 1 / -1; /* Span full width in grid containers */
}

/* Project Estimate Styles */
.project-estimate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.project-estimate-item {
    background-color: var(--bg-secondary);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 40px;
}

[data-theme="dark"] .project-estimate-item {
    background-color: var(--bg-tertiary);
}

.project-estimate-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.project-estimate-link:hover .project-estimate-item {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.project-estimate-link:hover .project-name {
    color: var(--primary-color);
}

.project-content {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    overflow: hidden;
}

.project-icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* Dynamic Linear icon badge display */
.linear-icon-badge {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    font-family: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.project-name {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--text-primary);
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.2;
}

.project-estimate-item .issue-count {
    background-color: var(--primary-color);
    color: white;
    padding: 0.1rem 0.3rem;
    border-radius: 10px;
    font-size: 0.6rem;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* Monitoring Section Styles */
.monitoring-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    min-height: 40px; /* Prevent layout shift when button appears */
}

.monitoring-filter {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.monitoring-filter:hover {
    border-color: var(--accent-primary);
}

/* Time Filter Button Group */
.time-filter-group {
    display: inline-flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.time-filter-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.time-filter-btn:not(:last-child) {
    border-right: 1px solid var(--border-color);
}

.time-filter-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.time-filter-btn.active {
    background: var(--primary-color);
    color: white;
    font-weight: 600;
}

.time-filter-btn.active:hover {
    background: var(--primary-hover);
}

/* Back to All Servers Button */
.back-to-all-btn {
    padding: 6px 14px;
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary-color), #2545D3);
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(29, 63, 190, 0.2);
    position: relative;
    overflow: hidden;
    height: 34px;
    margin-right: auto;
}

.back-to-all-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.back-to-all-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 63, 190, 0.3);
}

.back-to-all-btn:hover::before {
    left: 100%;
}

.back-to-all-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(29, 63, 190, 0.2);
}

.refresh-btn {
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.refresh-btn:hover {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.monitoring-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.monitoring-stat-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    border: 1px solid var(--border-color);
}

.monitoring-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.monitoring-stat-icon.cpu {
    background: rgba(255, 99, 132, 0.1);
    color: rgb(255, 99, 132);
}

.monitoring-stat-icon.memory {
    background: rgba(54, 162, 235, 0.1);
    color: rgb(54, 162, 235);
}

.monitoring-stat-icon.disk {
    background: rgba(255, 206, 86, 0.1);
    color: rgb(255, 206, 86);
}

.monitoring-stat-icon.alerts {
    background: rgba(255, 145, 126, 0.1);
    color: rgb(255, 145, 126);
}

.monitoring-stat-content {
    flex: 1;
}

.monitoring-stat-content h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.monitoring-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.monitoring-stat-detail {
    font-size: 12px;
    color: var(--text-tertiary);
}

.monitoring-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.chart-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.chart-card h3 {
    margin: 0 0 20px 0;
    font-size: 16px;
    color: var(--text-primary);
}

.chart-card canvas {
    max-height: 300px;
}

.server-details {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.server-details h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: var(--text-primary);
}

.server-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.server-card {
    background: var(--bg-primary);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--border-color);
}

.server-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.server-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.server-status {
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.server-status.healthy {
    background: rgba(123, 201, 162, 0.1);
    color: rgb(123, 201, 162);
}

.server-status.warning {
    background: rgba(255, 145, 126, 0.1);
    color: rgb(255, 145, 126);
}

.server-status.critical {
    background: rgba(239, 68, 68, 0.1);
    color: rgb(239, 68, 68);
}

.server-status.stale {
    background: rgba(148, 163, 184, 0.1);
    color: rgb(148, 163, 184);
}

.server-status.unknown {
    background: rgba(148, 163, 184, 0.1);
    color: rgb(148, 163, 184);
}

.server-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
}

.server-metric {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    padding: 4px 0;
    position: relative;
}

.server-metric .metric-label {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 3px;
}

.server-metric .metric-value {
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    margin-left: auto;
}

.metric-progress-bar {
    grid-column: 1 / -1;
    height: 3px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

[data-theme="dark"] .metric-progress-bar {
    background: rgba(255, 255, 255, 0.1);
}

.metric-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.metric-value {
    color: var(--text-primary);
    font-weight: 500;
}

.server-alerts {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.server-alert {
    padding: 6px 8px;
    background: rgba(255, 145, 126, 0.1);
    color: rgb(255, 145, 126);
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 4px;
}

.server-updated {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--text-tertiary);
}

/* New server cards styles */
.server-cards-grid,
#server-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

/* Loading card animation */
.monitoring-server-card.loading-card {
    opacity: 0.6;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.3; }
}

/* Chart loading overlay */
.chart-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 17, 23, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
}

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

/* Monitoring subsections for merged view */
.monitoring-subsection {
    margin-bottom: 48px;
}

.subsection-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-color);
}

.subsection-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.subsection-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.subsection-header .subsection-title {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.monitoring-server-card {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 14px;
    border: 1px solid var(--border-color);
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    min-height: 240px;
    transform-origin: center;
    opacity: 1;
}

/* Smooth transitions for text size changes */
.monitoring-server-card .metric-label,
.monitoring-server-card .metric-value,
.monitoring-server-card .server-header h4,
.monitoring-server-card .server-status,
.monitoring-server-card .service-label,
.monitoring-server-card .service-status-badge {
    transition: font-size 0.3s ease, padding 0.3s ease;
}

/* Keep grid stable during transition */
.server-cards-grid {
    position: relative;
    min-height: 300px; /* Maintain minimum height to prevent jumps */
}

/* Hide non-selected cards when one is selected */
.server-cards-grid.has-selected .monitoring-server-card:not(.selected) {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    visibility: hidden;
}

/* Expand selected card to full width without affecting layout */
.server-cards-grid.has-selected .monitoring-server-card.selected {
    grid-column: 1 / -1;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}


.monitoring-server-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
    border-color: var(--primary-color);
}

.monitoring-server-card:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.monitoring-server-card.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(29, 63, 190, 0.1);
}

.monitoring-server-card.keyboard-focused {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(29, 63, 190, 0.3);
    transform: translateY(-2px);
    position: relative;
}

.monitoring-server-card.keyboard-focused::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid var(--primary-color);
    border-radius: 14px;
    opacity: 0.5;
    pointer-events: none;
    animation: focusPulse 1.5s ease-in-out infinite;
}

@keyframes focusPulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.8;
    }
}

.server-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.server-card-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.server-status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.server-status-badge.healthy {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.server-status-badge.unknown {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.server-status-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.server-status-badge.critical {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    font-weight: 600;
}

.server-status-badge.stale {
    background: rgba(156, 163, 175, 0.1);
    color: #9ca3af;
    font-style: italic;
}

.server-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.metric-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-primary);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.metric-icon {
    font-size: 24px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-details {
    flex: 1;
}

.metric-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.metric-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.metric-bar {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.metric-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.server-services {
    padding: 10px;
    margin-top: auto;
    min-height: 50px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
}

.service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.service-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.service-status {
    font-size: 13px;
    font-weight: 500;
}

.service-status.running {
    color: #22c55e;
}

.service-status.stopped {
    color: #ef4444;
}

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

.service-status-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.service-status-badge.running {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.service-status-badge.stopped {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.service-status-badge.unknown {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
}

.service-metrics {
    font-size: 11px;
    color: var(--text-secondary);
}

.apache-details,
.mysql-details {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 6px;
    padding: 10px;
    margin: 8px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .apache-details,
[data-theme="dark"] .mysql-details {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.apache-metric,
.mysql-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mysql-metric span:first-child {
    color: var(--text-secondary);
}

.mysql-metric span:last-child {
    color: var(--text-primary);
    font-weight: 500;
}

.server-alerts-list {
    margin: 16px 0;
    padding: 12px;
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 8px;
}

.alert-item {
    font-size: 13px;
    color: #f59e0b;
    padding: 4px 0;
}

.server-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.last-updated {
    font-size: 12px;
    color: var(--text-tertiary);
}

.view-details-btn {
    padding: 6px 12px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.view-details-btn:hover {
    opacity: 0.9;
}

/* ===== OPTIMIZED LOADING STATES ===== */
/* Smooth loading transitions for better UX */
.loading {
    position: relative;
    min-height: 200px;
    pointer-events: none;
}

.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    opacity: 0.8;
    z-index: 10;
    animation: fadeIn 0.2s ease;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 11;
}

/* Optimize animations for performance */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 0.8; }
}

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

/* Use GPU acceleration for smooth animations */
.loading-spinner,
.chart-loading,
.loading::after {
    transform: translateZ(0);
    will-change: transform;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .loading::after,
    .loading-spinner {
        animation: none;
        border-color: var(--primary-color);
    }
}

/* Keyboard Shortcuts Dialog */
.shortcuts-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

.shortcuts-dialog {
    background: var(--bg-primary);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.shortcuts-dialog-header {
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shortcuts-dialog-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.shortcuts-close-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.shortcuts-close-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.shortcuts-dialog-content {
    padding: 24px;
}

.shortcut-group {
    margin-bottom: 28px;
}

.shortcut-group:last-child {
    margin-bottom: 0;
}

.shortcut-group h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.shortcut-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 32px;
    padding: 0 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    box-shadow: 0 2px 0 0 var(--border-color);
    text-transform: uppercase;
}

.shortcut-desc {
    color: var(--text-primary);
    font-size: 14px;
}

/* Keyboard shortcut hints in nav buttons */
.nav-btn-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.nav-btn:hover .nav-btn-shortcut {
    opacity: 1;
}

.nav-btn.active .nav-btn-shortcut {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Mobile-specific monitoring fixes */
@media (max-width: 768px) {
    /* Fix monitoring controls overflow */
    .monitoring-controls {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        justify-content: flex-start;
    }
    
    .monitoring-filter {
        flex: 1 1 auto;
        min-width: 0;
    }
    
    .time-filter-group {
        flex: 0 0 100%;
        width: 100%;
        display: flex;
    }
    
    .time-filter-btn {
        flex: 1;
        padding: 8px 4px;
        font-size: 12px;
    }
    
    /* Fix server cards grid */
    .server-cards-grid,
    #server-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    /* Fix monitoring charts */
    .monitoring-charts {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    /* Fix monitors grid */
    .monitors-grid {
        grid-template-columns: 1fr;
        padding: 0;
    }
    
    /* Ensure cards don't overflow */
    .monitor-card,
    .monitoring-server-card {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .monitor-url {
        word-break: break-all;
    }
    
    /* Hide keyboard shortcuts on mobile */
    .nav-btn-shortcut {
        display: none;
    }
}